[pull] main from supermemoryai:main

apps/memory-graph-playground/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/app/new/page.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useEffect } from "react"
 import { Header } from "@/components/new/header"
 import { ChatSidebar } from "@/components/new/chat"
 import { MemoriesGrid } from "@/components/new/memories-grid"
+import { GraphLayoutView } from "@/components/new/graph-layout-view"
 import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background"
 import { AddDocumentModal } from "@/components/new/add-document"
 import { MCPModal } from "@/components/new/mcp-modal"
@@ -25,13 +26,16 @@ import { useDocumentMutations } from "@/hooks/use-document-mutations"
 import { useQuery } from "@tanstack/react-query"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
+import { useViewMode } from "@/lib/view-mode-context"
+import { cn } from "@lib/utils"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
 
 export default function NewPage() {
 	const isMobile = useIsMobile()
 	const { selectedProject } = useProject()
+	const { viewMode } = useViewMode()
 	const [isAddDocumentOpen, setIsAddDocumentOpen] = useState(false)
 	const [isMCPModalOpen, setIsMCPModalOpen] = useState(false)
 	const [isSearchOpen, setIsSearchOpen] = useState(false)
@@ -54,24 +58,41 @@ export default function NewPage() {
 		},
 	})
 
-	// Fetch space highlights (highlights + suggested questions)
 	type SpaceHighlightsResponse = {
 		highlights: HighlightItem[]
 		questions: string[]
 		generatedAt: string
 	}
+
+	const HIGHLIGHTS_CACHE_NAME = "space-highlights-v1"
+	const HIGHLIGHTS_MAX_AGE = 4 * 60 * 60 * 1000 // 4 hours
+
 	const { data: highlightsData, isLoading: isLoadingHighlights } =
 		useQuery<SpaceHighlightsResponse>({
 			queryKey: ["space-highlights", selectedProject],
 			queryFn: async (): Promise<SpaceHighlightsResponse> => {
+				const spaceId = selectedProject || "sm_project_default"
+				const cacheKey = `${process.env.NEXT_PUBLIC_BACKEND_URL}/v3/space-highlights?spaceId=${spaceId}`
+
+				// Check Cache API for a fresh response
+				const cache = await caches.open(HIGHLIGHTS_CACHE_NAME)
+				const cached = await cache.match(cacheKey)
+				if (cached) {
+					const age =
+						Date.now() - Number(cached.headers.get("x-cached-at") || 0)
+					if (age < HIGHLIGHTS_MAX_AGE) {
+						return cached.json()
+					}
+				}
+
 				const response = await fetch(
 					`${process.env.NEXT_PUBLIC_BACKEND_URL}/v3/space-highlights`,
 					{
 						method: "POST",
 						headers: { "Content-Type": "application/json" },
 						credentials: "include",
 						body: JSON.stringify({
-							spaceId: selectedProject || "sm_project_default",
+							spaceId,
 							highlightsCount: 3,
 							questionsCount: 4,
 							includeHighlights: true,
@@ -84,9 +105,20 @@ export default function NewPage() {
 					throw new Error("Failed to fetch space highlights")
 				}
 
-				return response.json()
+				const data = await response.json()
+
+				// Store in Cache API with timestamp
+				const cacheResponse = new Response(JSON.stringify(data), {
+					headers: {
+						"Content-Type": "application/json",
+						"x-cached-at": String(Date.now()),
+					},
+				})
+				await cache.put(cacheKey, cacheResponse)
+
+				return data
 			},
-			staleTime: 4 * 60 * 60 * 1000, // 4 hours (matches backend cache)
+			staleTime: HIGHLIGHTS_MAX_AGE,
 			refetchOnWindowFocus: false,
 		})
 
@@ -172,13 +204,26 @@ export default function NewPage() {
 		setIsSearchOpen(true)
 	}, [])
 
+	const isGraphMode = viewMode === "graph" && !isMobile
+
 	return (
 		<HotkeysProvider>
-			<div className="bg-black min-h-screen">
+			<div
+				className={cn(
+					"bg-black min-h-screen",
+					isGraphMode && "h-screen overflow-hidden",
+				)}
+			>
 				<AnimatedGradientBackground
 					topPosition="15%"
 					animateFromBottom={false}
 				/>
+				{isGraphMode && (
+					<div
+						id="graph-dotted-grid"
+						className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,#69A7F0_0.1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]"
+					/>
+				)}
 				<Header
 					onAddMemory={() => {
 						analytics.addDocumentModalOpened()
@@ -195,36 +240,47 @@ export default function NewPage() {
 					}}
 				/>
 				<main
-					key={`main-container-${isChatOpen}`}
-					className="z-10 flex flex-col md:flex-row relative"
+					key={`main-container-${isChatOpen}-${viewMode}`}
+					className={cn(
+						"z-10 relative",
+						isGraphMode && "h-[calc(100vh-86px)] overflow-hidden",
+					)}
 				>
-					<div className="flex-1 p-4 md:p-6 md:pr-0 pt-2!">
-						<MemoriesGrid
-							isChatOpen={isChatOpen}
-							onOpenDocument={handleOpenDocument}
-							quickNoteProps={{
-								onSave: handleQuickNoteSave,
-								onMaximize: handleMaximize,
-								isSaving: noteMutation.isPending,
-							}}
-							highlightsProps={{
-								items: highlightsData?.highlights || [],
-								onChat: handleHighlightsChat,
-								onShowRelated: handleHighlightsShowRelated,
-								isLoading: isLoadingHighlights,
-							}}
-						/>
-					</div>
-					<div className="hidden md:block md:sticky md:top-0 md:h-screen">
-						<AnimatePresence mode="popLayout">
-							<ChatSidebar
-								isChatOpen={isChatOpen}
-								setIsChatOpen={setIsChatOpen}
-								queuedMessage={queuedChatSeed}
-								onConsumeQueuedMessage={() => setQueuedChatSeed(null)}
-								emptyStateSuggestions={highlightsData?.questions}
-							/>
-						</AnimatePresence>
+					<div className={cn("relative z-10 flex flex-col md:flex-row h-full")}>
+						{viewMode === "graph" && !isMobile ? (
+							<div className="flex-1">
+								<GraphLayoutView isChatOpen={isChatOpen} />
+							</div>
+						) : (
+							<div className="flex-1 p-4 md:p-6 md:pr-0 pt-2!">
+								<MemoriesGrid
+									isChatOpen={isChatOpen}
+									onOpenDocument={handleOpenDocument}
+									quickNoteProps={{
+										onSave: handleQuickNoteSave,
+										onMaximize: handleMaximize,
+										isSaving: noteMutation.isPending,
+									}}
+									highlightsProps={{
+										items: highlightsData?.highlights || [],
+										onChat: handleHighlightsChat,
+										onShowRelated: handleHighlightsShowRelated,
+										isLoading: isLoadingHighlights,
+									}}
+								/>
+							</div>
+						)}
+						<div className="hidden md:block md:sticky md:top-0 md:h-screen">
+							<AnimatePresence mode="popLayout">
+								<ChatSidebar
+									isChatOpen={isChatOpen}
+									setIsChatOpen={setIsChatOpen}
+									queuedMessage={queuedChatSeed}
+									onConsumeQueuedMessage={() => setQueuedChatSeed(null)}
+									emptyStateSuggestions={highlightsData?.questions}
+								/>
+							</AnimatePresence>
+						</div>
 					</div>
 				</main>