Infinity: Engineering an AI-Agentic Infinite Whiteboard & Architecture Workspace

import { z } from "zod";

export const DiagramNodeSchema = z.object({
  id: z.string(),
  type: z.enum(["rectangle", "ellipse", "diamond", "text"]),
  label: z.string().min(1).max(120),
  x: z.number().min(0).max(4000),
  y: z.number().min(0).max(4000),
  width: z.number().min(60).max(600),
  height: z.number().min(40).max(400),
  backgroundColor: z.string().default("transparent"),
  strokeColor: z.string().default("#1e1e1e"),
});

export const DiagramEdgeSchema = z.object({
  id: z.string(),
  fromNodeId: z.string(),
  toNodeId: z.string(),
  label: z.string().optional(),
  style: z.enum(["arrow", "line"]).default("arrow"),
});

export const AIDiagramSchema = z.object({
  title: z.string(),
  type: z.enum(["architecture", "flowchart", "mindmap"]),
  nodes: z.array(DiagramNodeSchema).min(1).max(50),
  edges: z.array(DiagramEdgeSchema).default([]),
});

export function validateAndAdjustGeometry(diagram: z.infer<typeof AIDiagramSchema>) {
  const validated = AIDiagramSchema.parse(diagram);
  const nodeMap = new Map(validated.nodes.map((n) => [n.id, n]));

  // Verify all edge references exist to prevent orphan pointers
  const validEdges = validated.edges.filter(
    (edge) => nodeMap.has(edge.fromNodeId) && nodeMap.has(edge.toNodeId)
  );

  return { ...validated, edges: validEdges };
}

Enforces strict type safety and spatial integrity on every diagram emitted by Gemini 2.5 before passing to RenderAIDiagram.tsx.

import type { AppState } from "@excalidraw/excalidraw/types/types";

export interface NormalizedWhiteboardState {
  viewBackgroundColor: string;
  gridSize: number;
  theme: "light" | "dark";
  zoom: { value: number };
  scrollX: number;
  scrollY: number;
}

/**
 * Normalizes persisted canvas appState before saving to Neon PostgreSQL.
 * Strips non-serializable Map objects (e.g., collaborators), active selections,
 * and ephemeral pointers that distort viewports on reload.
 */
export function sanitizeAppState(appState: Partial<AppState>): NormalizedWhiteboardState {
  return {
    viewBackgroundColor: appState.viewBackgroundColor || "#ffffff",
    gridSize: appState.gridSize || 20,
    theme: appState.theme === "dark" ? "dark" : "light",
    zoom: { value: 1 }, // Reset zoom to 100% to prevent camera clipping
    scrollX: 0,
    scrollY: 0,
  };
}

export function hydrateAppState(savedState?: Partial<NormalizedWhiteboardState>): Partial<AppState> {
  return {
    viewBackgroundColor: savedState?.viewBackgroundColor || "#ffffff",
    gridSize: savedState?.gridSize || 20,
    theme: savedState?.theme || "light",
    isLoading: false,
    errorMessage: null,
  };
}

Guarantees that stored appState is cleanly serializable and prevents runtime crashes caused by Map structures or stale viewport offsets.

import { useEffect, useRef } from "react";
import { exportToBlob } from "@excalidraw/excalidraw";
import { sanitizeAppState } from "@/lib/whiteboard";

export function useWhiteboardAutosave(projectId: string, elements: any[], appState: any, files: any) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(async () => {
      try {
        // Generate lightweight WebP preview thumbnail for dashboard cards
        const blob = await exportToBlob({
          elements,
          appState: { ...appState, exportBackground: true },
          files,
          mimeType: "image/webp",
          quality: 0.75,
        });

        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = async () => {
          const thumbnailBase64 = reader.result as string;

          await fetch("/api/projects", {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              projectId,
              elements: JSON.stringify(elements),
              appState: JSON.stringify(sanitizeAppState(appState)),
              files: JSON.stringify(files),
              thumbnail: thumbnailBase64,
            }),
          });
        };
      } catch (err) {
        console.error("Autosave pipeline error:", err);
      }
    }, 10000); // 10s debounce window

    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [projectId, elements, appState, files]);
}

Buffers high-frequency canvas operations and packages elements, normalized state, and a WebP thumbnail into an atomic 10s debounced sync.

import { db } from "@/db";
import { projects } from "@/db/schema";
import { eq, and } from "drizzle-orm";
import { auth } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export async function PATCH(req: Request) {
  const { userId } = await auth();
  if (!userId) return new NextResponse("Unauthorized", { status: 401 });

  const { projectId, isArchived, ...data } = await req.json();

  const updated = await db
    .update(projects)
    .set({
      ...(isArchived !== undefined ? { isArchived } : {}),
      ...data,
      updatedAt: new Date(),
    })
    .where(and(eq(projects.id, projectId), eq(projects.userId, userId)))
    .returning();

  return NextResponse.json(updated[0]);
}

export async function DELETE(req: Request) {
  const { userId } = await auth();
  if (!userId) return new NextResponse("Unauthorized", { status: 401 });

  const { searchParams } = new URL(req.url);
  const projectId = searchParams.get("projectId");
  const permanent = searchParams.get("permanent") === "true";

  if (!projectId) return new NextResponse("Missing projectId", { status: 400 });

  if (permanent) {
    await db.delete(projects).where(and(eq(projects.id, projectId), eq(projects.userId, userId)));
    return NextResponse.json({ success: true, purged: true });
  }

  await db
    .update(projects)
    .set({ isArchived: true, updatedAt: new Date() })
    .where(and(eq(projects.id, projectId), eq(projects.userId, userId)));

  return NextResponse.json({ success: true, archived: true });
}

Enforces user tenant isolation in Drizzle ORM while supporting both non-destructive soft-delete archiving and hard permanent purging.