feat: add version history page with side-by-side comparison
New /history page shows all past generations for a repo and allows selecting two to compare side-by-side. Displays tech stack diffs, architecture diagrams, key metrics changes, and module breakdowns. Added Version History link to doc viewer header.
This commit is contained in:
Vectry
29
apps/web/src/app/api/history/route.ts
Normal file
29
apps/web/src/app/api/history/route.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@codeboard/database";
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const repo = searchParams.get("repo");
|
||||||
|
|
||||||
|
if (!repo) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "repo parameter required" },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const generations = await prisma.generation.findMany({
|
||||||
|
where: { repoUrl: repo, status: "COMPLETED" },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
repoUrl: true,
|
||||||
|
repoName: true,
|
||||||
|
commitHash: true,
|
||||||
|
createdAt: true,
|
||||||
|
duration: true,
|
||||||
|
},
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(generations);
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { DocViewer } from "@/components/doc-viewer";
|
import { DocViewer } from "@/components/doc-viewer";
|
||||||
import type { GeneratedDocs } from "@codeboard/shared";
|
import type { GeneratedDocs } from "@codeboard/shared";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { Github, ArrowLeft } from "lucide-react";
|
import { Github, ArrowLeft, History } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
async function fetchDocs(id: string): Promise<GeneratedDocs | null> {
|
async function fetchDocs(id: string): Promise<GeneratedDocs | null> {
|
||||||
@@ -45,6 +45,15 @@ export default async function DocsPage({
|
|||||||
Back to Home
|
Back to Home
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Link
|
||||||
|
href={`/history?repo=${encodeURIComponent(docs.repoUrl)}`}
|
||||||
|
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<History className="w-4 h-4" />
|
||||||
|
Version History
|
||||||
|
</Link>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={docs.repoUrl}
|
href={docs.repoUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -57,6 +66,7 @@ export default async function DocsPage({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<DocViewer docs={docs} />
|
<DocViewer docs={docs} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
791
apps/web/src/app/history/page.tsx
Normal file
791
apps/web/src/app/history/page.tsx
Normal file
@@ -0,0 +1,791 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Suspense, useEffect, useState } from "react";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import type { GeneratedDocs } from "@codeboard/shared";
|
||||||
|
import { MermaidDiagram } from "@/components/mermaid-diagram";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Clock,
|
||||||
|
GitCommit,
|
||||||
|
History,
|
||||||
|
CheckSquare,
|
||||||
|
Square,
|
||||||
|
GitCompare,
|
||||||
|
X,
|
||||||
|
BookOpen,
|
||||||
|
Layers,
|
||||||
|
Folder,
|
||||||
|
FileCode,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface Generation {
|
||||||
|
id: string;
|
||||||
|
repoUrl: string;
|
||||||
|
repoName: string;
|
||||||
|
commitHash: string;
|
||||||
|
createdAt: string;
|
||||||
|
duration: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateStr: string): string {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(seconds: number | null): string {
|
||||||
|
if (!seconds) return "Unknown";
|
||||||
|
const mins = Math.floor(seconds / 60);
|
||||||
|
const secs = seconds % 60;
|
||||||
|
if (mins > 0) {
|
||||||
|
return `${mins}m ${secs}s`;
|
||||||
|
}
|
||||||
|
return `${secs}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function TechStackDiff({
|
||||||
|
leftStack,
|
||||||
|
rightStack,
|
||||||
|
}: {
|
||||||
|
leftStack: string[];
|
||||||
|
rightStack: string[];
|
||||||
|
}) {
|
||||||
|
const leftSet = new Set(leftStack.map((s) => s.toLowerCase()));
|
||||||
|
const rightSet = new Set(rightStack.map((s) => s.toLowerCase()));
|
||||||
|
|
||||||
|
const added = rightStack.filter((s) => !leftSet.has(s.toLowerCase()));
|
||||||
|
const removed = leftStack.filter((s) => !rightSet.has(s.toLowerCase()));
|
||||||
|
const unchanged = leftStack.filter((s) => rightSet.has(s.toLowerCase()));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{removed.map((tech) => (
|
||||||
|
<span
|
||||||
|
key={`removed-${tech}`}
|
||||||
|
className="px-3 py-1 text-sm bg-red-500/10 border border-red-500/30 rounded-full text-red-300 line-through"
|
||||||
|
title="Removed"
|
||||||
|
>
|
||||||
|
{tech}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{unchanged.map((tech) => (
|
||||||
|
<span
|
||||||
|
key={tech}
|
||||||
|
className="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded-full text-zinc-400"
|
||||||
|
>
|
||||||
|
{tech}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{added.map((tech) => (
|
||||||
|
<span
|
||||||
|
key={`added-${tech}`}
|
||||||
|
className="px-3 py-1 text-sm bg-green-500/10 border border-green-500/30 rounded-full text-green-300"
|
||||||
|
title="Added"
|
||||||
|
>
|
||||||
|
{tech}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ComparisonView({
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
leftGen,
|
||||||
|
rightGen,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
left: GeneratedDocs;
|
||||||
|
right: GeneratedDocs;
|
||||||
|
leftGen: Generation;
|
||||||
|
rightGen: Generation;
|
||||||
|
onClose: () => void;
|
||||||
|
}) {
|
||||||
|
const leftOverview = left.sections.overview;
|
||||||
|
const rightOverview = right.sections.overview;
|
||||||
|
|
||||||
|
const filesDiff = rightOverview.keyMetrics.files - leftOverview.keyMetrics.files;
|
||||||
|
const modulesDiff =
|
||||||
|
rightOverview.keyMetrics.modules - leftOverview.keyMetrics.modules;
|
||||||
|
const languagesDiff =
|
||||||
|
rightOverview.keyMetrics.languages.length -
|
||||||
|
leftOverview.keyMetrics.languages.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 bg-[#0a0a0f] overflow-auto">
|
||||||
|
<div className="sticky top-0 z-10 border-b border-white/10 bg-black/50 backdrop-blur-sm">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<GitCompare className="w-6 h-6 text-blue-400" />
|
||||||
|
<h2 className="text-xl font-bold text-white">Version Comparison</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* Left Panel - Older */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="glass rounded-xl p-4 border-l-4 border-l-zinc-500">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<GitCommit className="w-4 h-4 text-zinc-400" />
|
||||||
|
<code className="text-sm text-zinc-300">
|
||||||
|
{leftGen.commitHash.slice(0, 7)}
|
||||||
|
</code>
|
||||||
|
<span className="text-xs text-zinc-500">•</span>
|
||||||
|
<span className="text-sm text-zinc-400">
|
||||||
|
{formatDate(leftGen.createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-zinc-500">Older version</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<BookOpen className="w-5 h-5 text-blue-400" />
|
||||||
|
Overview
|
||||||
|
</h3>
|
||||||
|
<p className="text-zinc-300 text-sm leading-relaxed mb-4">
|
||||||
|
{leftOverview.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4 className="text-sm font-medium text-zinc-400 mb-3">
|
||||||
|
Tech Stack
|
||||||
|
</h4>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{leftOverview.techStack.map((tech) => (
|
||||||
|
<span
|
||||||
|
key={tech}
|
||||||
|
className="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded-full text-zinc-300"
|
||||||
|
>
|
||||||
|
{tech}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<Layers className="w-5 h-5 text-blue-400" />
|
||||||
|
Architecture
|
||||||
|
</h3>
|
||||||
|
<MermaidDiagram chart={leftOverview.architectureDiagram} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="p-4 glass rounded-lg text-center">
|
||||||
|
<div className="text-2xl font-bold text-white">
|
||||||
|
{leftOverview.keyMetrics.files}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Files</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 glass rounded-lg text-center">
|
||||||
|
<div className="text-2xl font-bold text-white">
|
||||||
|
{leftOverview.keyMetrics.modules}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Modules</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 glass rounded-lg text-center">
|
||||||
|
<div className="text-2xl font-bold text-white">
|
||||||
|
{leftOverview.keyMetrics.languages.length}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Languages</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Panel - Newer */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="glass rounded-xl p-4 border-l-4 border-l-green-500">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<GitCommit className="w-4 h-4 text-zinc-400" />
|
||||||
|
<code className="text-sm text-zinc-300">
|
||||||
|
{rightGen.commitHash.slice(0, 7)}
|
||||||
|
</code>
|
||||||
|
<span className="text-xs text-zinc-500">•</span>
|
||||||
|
<span className="text-sm text-zinc-400">
|
||||||
|
{formatDate(rightGen.createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-green-400">Newer version</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<BookOpen className="w-5 h-5 text-blue-400" />
|
||||||
|
Overview
|
||||||
|
</h3>
|
||||||
|
<p className="text-zinc-300 text-sm leading-relaxed mb-4">
|
||||||
|
{rightOverview.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4 className="text-sm font-medium text-zinc-400 mb-3">
|
||||||
|
Tech Stack Changes
|
||||||
|
</h4>
|
||||||
|
<TechStackDiff
|
||||||
|
leftStack={leftOverview.techStack}
|
||||||
|
rightStack={rightOverview.techStack}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<Layers className="w-5 h-5 text-blue-400" />
|
||||||
|
Architecture
|
||||||
|
</h3>
|
||||||
|
<MermaidDiagram chart={rightOverview.architectureDiagram} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="p-4 glass rounded-lg text-center relative overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`text-2xl font-bold ${
|
||||||
|
filesDiff > 0
|
||||||
|
? "text-green-400"
|
||||||
|
: filesDiff < 0
|
||||||
|
? "text-red-400"
|
||||||
|
: "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{rightOverview.keyMetrics.files}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Files</div>
|
||||||
|
{filesDiff !== 0 && (
|
||||||
|
<div
|
||||||
|
className={`absolute top-1 right-2 text-xs ${
|
||||||
|
filesDiff > 0 ? "text-green-400" : "text-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{filesDiff > 0 ? "+" : ""}
|
||||||
|
{filesDiff}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-4 glass rounded-lg text-center relative overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`text-2xl font-bold ${
|
||||||
|
modulesDiff > 0
|
||||||
|
? "text-green-400"
|
||||||
|
: modulesDiff < 0
|
||||||
|
? "text-red-400"
|
||||||
|
: "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{rightOverview.keyMetrics.modules}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Modules</div>
|
||||||
|
{modulesDiff !== 0 && (
|
||||||
|
<div
|
||||||
|
className={`absolute top-1 right-2 text-xs ${
|
||||||
|
modulesDiff > 0 ? "text-green-400" : "text-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{modulesDiff > 0 ? "+" : ""}
|
||||||
|
{modulesDiff}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-4 glass rounded-lg text-center relative overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`text-2xl font-bold ${
|
||||||
|
languagesDiff > 0
|
||||||
|
? "text-green-400"
|
||||||
|
: languagesDiff < 0
|
||||||
|
? "text-red-400"
|
||||||
|
: "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{rightOverview.keyMetrics.languages.length}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-500">Languages</div>
|
||||||
|
{languagesDiff !== 0 && (
|
||||||
|
<div
|
||||||
|
className={`absolute top-1 right-2 text-xs ${
|
||||||
|
languagesDiff > 0 ? "text-green-400" : "text-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{languagesDiff > 0 ? "+" : ""}
|
||||||
|
{languagesDiff}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Module Comparison */}
|
||||||
|
<div className="mt-8">
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
|
||||||
|
<Folder className="w-6 h-6 text-blue-400" />
|
||||||
|
Module Breakdown Comparison
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h4 className="font-semibold text-white mb-4 text-zinc-400">
|
||||||
|
Older Version ({left.sections.modules.length} modules)
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-2 max-h-96 overflow-auto">
|
||||||
|
{left.sections.modules.map((module) => (
|
||||||
|
<div
|
||||||
|
key={module.name}
|
||||||
|
className="flex items-center gap-3 p-3 rounded-lg bg-white/5"
|
||||||
|
>
|
||||||
|
<FileCode className="w-4 h-4 text-zinc-500" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-sm text-zinc-300 truncate">
|
||||||
|
{module.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-zinc-500 truncate">
|
||||||
|
{module.path}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-6">
|
||||||
|
<h4 className="font-semibold text-white mb-4 text-green-400">
|
||||||
|
Newer Version ({right.sections.modules.length} modules)
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-2 max-h-96 overflow-auto">
|
||||||
|
{right.sections.modules.map((module) => {
|
||||||
|
const existedInLeft = left.sections.modules.some(
|
||||||
|
(m) => m.name === module.name
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={module.name}
|
||||||
|
className={`flex items-center gap-3 p-3 rounded-lg ${
|
||||||
|
existedInLeft ? "bg-white/5" : "bg-green-500/10 border border-green-500/20"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FileCode
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
existedInLeft ? "text-zinc-500" : "text-green-400"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-sm text-zinc-300 truncate">
|
||||||
|
{module.name}
|
||||||
|
{!existedInLeft && (
|
||||||
|
<span className="ml-2 text-xs text-green-400">
|
||||||
|
(new)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-zinc-500 truncate">
|
||||||
|
{module.path}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HistoryContent() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const repo = searchParams.get("repo");
|
||||||
|
|
||||||
|
const [generations, setGenerations] = useState<Generation[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||||
|
const [comparing, setComparing] = useState(false);
|
||||||
|
const [leftDoc, setLeftDoc] = useState<GeneratedDocs | null>(null);
|
||||||
|
const [rightDoc, setRightDoc] = useState<GeneratedDocs | null>(null);
|
||||||
|
const [leftGen, setLeftGen] = useState<Generation | null>(null);
|
||||||
|
const [rightGen, setRightGen] = useState<Generation | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!repo) {
|
||||||
|
setLoading(false);
|
||||||
|
setError("No repository URL provided");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(`/api/history?repo=${encodeURIComponent(repo)}`)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) throw new Error("Failed to fetch history");
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data: Generation[]) => {
|
||||||
|
setGenerations(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setError(err.message);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, [repo]);
|
||||||
|
|
||||||
|
const toggleSelection = (id: string) => {
|
||||||
|
const newSelected = new Set(selectedIds);
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id);
|
||||||
|
} else if (newSelected.size < 2) {
|
||||||
|
newSelected.add(id);
|
||||||
|
}
|
||||||
|
setSelectedIds(newSelected);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCompare = async () => {
|
||||||
|
if (selectedIds.size !== 2) return;
|
||||||
|
|
||||||
|
const ids = Array.from(selectedIds);
|
||||||
|
const gen1 = generations.find((g) => g.id === ids[0])!;
|
||||||
|
const gen2 = generations.find((g) => g.id === ids[1])!;
|
||||||
|
|
||||||
|
// Sort by date - older first
|
||||||
|
const [olderGen, newerGen] =
|
||||||
|
new Date(gen1.createdAt) < new Date(gen2.createdAt)
|
||||||
|
? [gen1, gen2]
|
||||||
|
: [gen2, gen1];
|
||||||
|
|
||||||
|
setComparing(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [olderDocRes, newerDocRes] = await Promise.all([
|
||||||
|
fetch(`/api/docs/${olderGen.id}`),
|
||||||
|
fetch(`/api/docs/${newerGen.id}`),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!olderDocRes.ok || !newerDocRes.ok) {
|
||||||
|
throw new Error("Failed to fetch documentation");
|
||||||
|
}
|
||||||
|
|
||||||
|
const [olderDoc, newerDoc] = await Promise.all([
|
||||||
|
olderDocRes.json(),
|
||||||
|
newerDocRes.json(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
setLeftDoc(olderDoc);
|
||||||
|
setRightDoc(newerDoc);
|
||||||
|
setLeftGen(olderGen);
|
||||||
|
setRightGen(newerGen);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Failed to compare");
|
||||||
|
setComparing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeComparison = () => {
|
||||||
|
setLeftDoc(null);
|
||||||
|
setRightDoc(null);
|
||||||
|
setLeftGen(null);
|
||||||
|
setRightGen(null);
|
||||||
|
setComparing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
|
||||||
|
<span className="text-zinc-400">Loading history...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="glass rounded-xl p-8 text-center max-w-md">
|
||||||
|
<div className="text-red-400 mb-2">Error</div>
|
||||||
|
<p className="text-zinc-400">{error}</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-2 mt-4 text-blue-400 hover:text-blue-300"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!repo) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="glass rounded-xl p-8 text-center max-w-md">
|
||||||
|
<History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-xl font-bold text-white mb-2">
|
||||||
|
No Repository Specified
|
||||||
|
</h2>
|
||||||
|
<p className="text-zinc-400 mb-4">
|
||||||
|
Please provide a repository URL to view its history.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-2 btn-primary"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (generations.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="glass rounded-xl p-8 text-center max-w-md">
|
||||||
|
<History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-xl font-bold text-white mb-2">No History Found</h2>
|
||||||
|
<p className="text-zinc-400 mb-4">
|
||||||
|
No documentation has been generated for this repository yet.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-2 btn-primary"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (generations.length === 1) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<div className="border-b border-white/10 bg-black/20">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
|
||||||
|
<h1 className="text-3xl font-bold text-white mb-2">
|
||||||
|
Version History
|
||||||
|
</h1>
|
||||||
|
<p className="text-zinc-400">
|
||||||
|
{generations[0].repoName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass rounded-xl p-8 text-center">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<GitCommit className="w-8 h-8 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl font-bold text-white mb-2">
|
||||||
|
Only One Version Exists
|
||||||
|
</h2>
|
||||||
|
<p className="text-zinc-400 max-w-md mx-auto">
|
||||||
|
Generate docs again after code changes to compare versions and track
|
||||||
|
how your architecture evolves over time.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 p-4 rounded-lg bg-white/5 max-w-md mx-auto text-left">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<GitCommit className="w-4 h-4 text-zinc-400" />
|
||||||
|
<code className="text-sm text-zinc-300">
|
||||||
|
{generations[0].commitHash.slice(0, 7)}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<Clock className="w-4 h-4 text-zinc-400" />
|
||||||
|
<span className="text-sm text-zinc-300">
|
||||||
|
{formatDate(generations[0].createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Clock className="w-4 h-4 text-zinc-400" />
|
||||||
|
<span className="text-sm text-zinc-300">
|
||||||
|
Generated in {formatDuration(generations[0].duration)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href={`/docs/${generations[0].id}`}
|
||||||
|
className="inline-flex items-center gap-2 btn-primary mt-8"
|
||||||
|
>
|
||||||
|
<BookOpen className="w-4 h-4" />
|
||||||
|
View Documentation
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<div className="border-b border-white/10 bg-black/20">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
<span className="text-sm text-zinc-500">
|
||||||
|
{selectedIds.size} of 2 selected
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
|
||||||
|
<h1 className="text-3xl font-bold text-white mb-2">Version History</h1>
|
||||||
|
<p className="text-zinc-400">{generations[0]?.repoName}</p>
|
||||||
|
<p className="text-sm text-zinc-500 mt-2">
|
||||||
|
Select any 2 versions to compare side-by-side
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{generations.map((gen) => {
|
||||||
|
const isSelected = selectedIds.has(gen.id);
|
||||||
|
const canSelect = selectedIds.size < 2 || isSelected;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={gen.id}
|
||||||
|
className={`glass rounded-xl p-4 transition-all ${
|
||||||
|
isSelected
|
||||||
|
? "border-blue-500/50 bg-blue-500/5"
|
||||||
|
: "border-white/10"
|
||||||
|
} ${!canSelect ? "opacity-50" : ""}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => canSelect && toggleSelection(gen.id)}
|
||||||
|
className={`flex-shrink-0 p-2 rounded-lg transition-colors ${
|
||||||
|
isSelected
|
||||||
|
? "text-blue-400 hover:bg-blue-500/10"
|
||||||
|
: "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
|
||||||
|
} ${!canSelect ? "cursor-not-allowed" : ""}`}
|
||||||
|
disabled={!canSelect}
|
||||||
|
>
|
||||||
|
{isSelected ? (
|
||||||
|
<CheckSquare className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<Square className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-3 flex-wrap">
|
||||||
|
<GitCommit className="w-4 h-4 text-zinc-500" />
|
||||||
|
<code className="text-sm text-zinc-300">
|
||||||
|
{gen.commitHash.slice(0, 7)}
|
||||||
|
</code>
|
||||||
|
<span className="text-zinc-600">•</span>
|
||||||
|
<span className="text-sm text-zinc-400">
|
||||||
|
{formatDate(gen.createdAt)}
|
||||||
|
</span>
|
||||||
|
<span className="text-zinc-600">•</span>
|
||||||
|
<span className="text-sm text-zinc-500">
|
||||||
|
{formatDuration(gen.duration)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href={`/docs/${gen.id}`}
|
||||||
|
className="flex-shrink-0 px-3 py-1.5 text-sm text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedIds.size === 2 && (
|
||||||
|
<div className="mt-8 flex justify-center animate-slide-up">
|
||||||
|
<button
|
||||||
|
onClick={handleCompare}
|
||||||
|
disabled={comparing}
|
||||||
|
className="inline-flex items-center gap-2 btn-primary"
|
||||||
|
>
|
||||||
|
{comparing ? (
|
||||||
|
<>
|
||||||
|
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||||
|
Loading...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<GitCompare className="w-4 h-4" />
|
||||||
|
Compare Selected Versions
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{leftDoc && rightDoc && leftGen && rightGen && (
|
||||||
|
<ComparisonView
|
||||||
|
left={leftDoc}
|
||||||
|
right={rightDoc}
|
||||||
|
leftGen={leftGen}
|
||||||
|
rightGen={rightGen}
|
||||||
|
onClose={closeComparison}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HistoryPage() {
|
||||||
|
return (
|
||||||
|
<Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
|
||||||
|
<span className="text-zinc-400">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<HistoryContent />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user