void;
};
export const useIDERouter = create
()((set) => ({
page: "challenge", // Default to challenge page so users see the problem immediately
setPage: (page) => set({ page }),
}));
```
### src/app/ide/page.tsx
```typescript
import { AssessmentProvider } from "@/contexts/assessment-context";
import { auth } from "@/lib/auth";
import { db } from "@/server/db";
import { assessmentSession } from "@/server/db/schema/assessment-schema";
import { and, eq } from "drizzle-orm";
import dynamic from "next/dynamic";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
const App = dynamic(() => import("@/ide/app"));
export default async function IDEPage() {
const session = await auth.api.getSession({
headers: await headers(),
});
if (!session?.user) {
redirect("/api/auth/sign-in");
}
// Fetch active assessment directly from database
const activeAssessment = await db.query.assessmentSession.findFirst({
where: and(
eq(assessmentSession.userId, session.user.id),
eq(assessmentSession.status, "active"),
),
});
return (
);
}
```
### src/ide/filesystem/index.ts
```typescript
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
// example data structure
// const files = {
// "test.txt": {
// file: {
// size: 1024,
// }
// },
// "test.js": {
// file: {
// size: 1024,
// }
// },
// "dir": {
// directory: {
// "test.txt": {
// file: {
// size: 1024,
// }
// },
// "symlink-file": {
// symlink: {
// target: "test.txt",
// }
// },
// }
// }
// }
export type FSFile = {
file: {
size: number;
isBinary: boolean;
};
};
export type FSDirectory = {
directory: {
[key: string]: FSFile | FSDirectory | FSSymlink;
};
open: boolean;
};
export type FSSymlink = {
symlink: {
target: string;
};
};
export type FSNode = FSFile | FSDirectory | FSSymlink;
type FileSystemState = {
files: FSDirectory;
setFiles: (files: FSDirectory) => void;
};
export const useFileSystem = create()(
immer((set) => ({
files: {
directory: {},
open: true,
},
setFiles: (files) => set({ files }),
})),
);
```
### src/app/page.tsx
```typescript
"use client";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { motion } from "motion/react";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { Streamdown } from "streamdown";
type Framework = "react-router-v7" | "nextjs" | null;
type AssessmentSession = {
id: string;
userId: string;
framework: string;
problemContent: string;
status: string;
startedAt: string;
completedAt: string | null;
createdAt: string;
updatedAt: string;
};
function AnimatedStreamdown({ content }: { content: string }) {
const containerRef = useRef(null);
const previousLengthRef = useRef(0);
const observerRef = useRef(null);
// Set up mutation observer once
useEffect(() => {
if (!containerRef.current) return;
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node instanceof HTMLElement) {
// Animate newly added elements
node.style.opacity = "0";
node.style.animation = "streamFadeIn 1s ease-out forwards";
} else if (node.nodeType === Node.TEXT_NODE && node.parentElement) {
// Animate parent of newly added text nodes
const parent = node.parentElement;
if (!parent.classList.contains("stream-animated")) {
parent.classList.add("stream-animated");
parent.style.animation = "streamFadeIn 0.5s ease-out forwards";
}
}
}
}
});
observer.observe(containerRef.current, {
childList: true,
subtree: true,
});
observerRef.current = observer;
return () => {
observer.disconnect();
};
}, []);
// Track content changes
useEffect(() => {
if (content.length > previousLengthRef.current) {
previousLengthRef.current = content.length;
} else if (content.length === 0) {
previousLengthRef.current = 0;
}
}, [content]);
return (
<>
{content}
);
}
export default function AssessmentPage() {
const router = useRouter();
const [isStreaming, setIsStreaming] = useState(false);
const [assessmentContent, setAssessmentContent] = useState("");
const [generatedAt, setGeneratedAt] = useState(null);
const [selectedFramework, setSelectedFramework] = useState(null);
const [activeSession, setActiveSession] = useState(
null,
);
const [isCheckingSession, setIsCheckingSession] = useState(true);
const [isStarting, setIsStarting] = useState(false);
const [showAbandonConfirmation, setShowAbandonConfirmation] = useState(false);
const [isAbandoning, setIsAbandoning] = useState(false);
// Check for active session on mount
useEffect(() => {
checkForActiveSession();
}, []);
const checkForActiveSession = async () => {
try {
const response = await fetch("/api/assessment/active");
if (response.ok) {
const data = await response.json();
if (data.session) {
setActiveSession(data.session);
}
}
} catch (error) {
console.error("Error checking for active session:", error);
} finally {
setIsCheckingSession(false);
}
};
const handleResumeSession = () => {
if (activeSession) {
// Navigate to IDE - it will fetch the active session from the database
router.push("/ide");
}
};
const handleAbandonSession = async () => {
if (!activeSession) return;
setIsAbandoning(true);
try {
const response = await fetch("/api/assessment/abandon", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ sessionId: activeSession.id }),
});
if (response.ok) {
setActiveSession(null);
setShowAbandonConfirmation(false);
toast.success("Session abandoned! You can now start a new assessment.");
} else {
const error = await response.json();
toast.error(`Failed to abandon session: ${error.error}`);
}
} catch (error) {
console.error("Error abandoning session:", error);
toast.error("Failed to abandon session. Please try again.");
} finally {
setIsAbandoning(false);
}
};
const handleViewProblem = async () => {
// Check if there's an active session
if (activeSession) {
toast.error(
"You already have an active assessment. Please resume or abandon it first.",
);
return;
}
setIsStreaming(true);
setAssessmentContent("");
setGeneratedAt(new Date().toISOString());
try {
const requestBody = selectedFramework
? { framework: selectedFramework }
: {};
const response = await fetch("/api/ai/assessment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(requestBody),
});
if (!response.ok) {
const errorText = await response.text().catch(() => "Unknown error");
console.error("Assessment API error:", response.status, errorText);
throw new Error(
`Failed to generate assessment: ${response.status} - ${errorText}`,
);
}
const reader = response.body?.getReader();
const decoder = new TextDecoder();
if (!reader) {
throw new Error("No response body");
[truncated — 17335 more characters]
```
[95 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]