fix ui issues and package issue

apps/web/components/content-cards/google-docs.tsx

@@ -16,7 +16,7 @@ import {
 } from "@repo/ui/components/alert-dialog"
 import { ExternalLink, FileText, Brain, Trash2 } from "lucide-react"
 import { cn } from "@lib/utils"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import { getPastelBackgroundColor } from "../memories-utils"
 
 interface GoogleDocsCardProps {

apps/web/components/content-cards/note.tsx

@@ -12,7 +12,7 @@ import {
 	AlertDialogTrigger,
 } from "@repo/ui/components/alert-dialog"
 
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import { Brain, ExternalLink, Trash2 } from "lucide-react"
 import { cn } from "@lib/utils"
 import { useState } from "react"

apps/web/components/content-cards/tweet.tsx

@@ -26,7 +26,7 @@ import {
 	AlertDialogTrigger,
 } from "@repo/ui/components/alert-dialog"
 import { Brain, Trash2 } from "lucide-react"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import { getPastelBackgroundColor } from "../memories-utils"
 
 type MyTweetProps = {

apps/web/components/content-cards/website.tsx

@@ -16,7 +16,7 @@ import { ExternalLink, Trash2 } from "lucide-react"
 import { useState } from "react"
 import { cn } from "@lib/utils"
 import { getPastelBackgroundColor } from "../memories-utils"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 
 interface WebsiteCardProps {
 	title: string

apps/web/components/graph-dialog.tsx

@@ -6,7 +6,7 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import { useInfiniteQuery } from "@tanstack/react-query"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import type { z } from "zod"
-import { MemoryGraph } from "@supermemory/memory-graph"
+import { MemoryGraph } from "@repo/ui/memory-graph"
 import { Dialog, DialogContent } from "@repo/ui/components/dialog"
 import { ConnectAIModal } from "@/components/connect-ai-modal"
 import { AddMemoryView } from "@/components/views/add-memory"

apps/web/components/masonry-memory-list.tsx

@@ -2,7 +2,7 @@
 
 import { useIsMobile } from "@hooks/use-mobile"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import { Sparkles } from "lucide-react"
 import { Masonry, useInfiniteLoader } from "masonic"
 import { memo, useCallback, useMemo, useState } from "react"

apps/web/components/memories-utils/index.tsx

@@ -1,4 +1,4 @@
-import type { DocumentWithMemories } from "@supermemory/memory-graph"
+import type { DocumentWithMemories } from "@ui/memory-graph/types"
 
 export const formatDate = (date: string | Date) => {
 	const dateObj = new Date(date)

apps/web/components/memory-list-view.tsx

@@ -15,7 +15,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@repo/ui/components/alert-dialog"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { Brain, ExternalLink, Sparkles, Trash2 } from "lucide-react"

apps/web/lib/document-icon.tsx

@@ -1,5 +1,5 @@
 import { MCPIcon } from "@/components/menu"
-import { colors } from "@repo/ui/colors"
+import { colors } from "@repo/ui/memory-graph/constants"
 import {
 	GoogleDocs,
 	MicrosoftWord,

apps/web/package.json

@@ -18,7 +18,6 @@
     "@ai-sdk/google": "^2.0.0-beta.13",
     "@ai-sdk/react": "2.0.0-beta.24",
     "@better-fetch/fetch": "^1.1.18",
-    "@supermemory/memory-graph": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -73,6 +72,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-dropzone": "^14.3.8",
+    "react-markdown": "^10.1.0",
     "react-tweet": "^3.2.2",
     "recharts": "2",
     "slate": "^0.118.0",

packages/ui/colors.ts → packages/ui/memory-graph/constants.ts

@@ -47,4 +47,54 @@ export const colors = {
 		extends: "rgba(16, 185, 129, 0.5)", // green
 		derives: "rgba(147, 197, 253, 0.5)", // blue
 	},
-}
+};
+
+export const LAYOUT_CONSTANTS = {
+	centerX: 400,
+	centerY: 300,
+	clusterRadius: 300, // Memory "bubble" size around a doc - smaller bubble
+	spaceSpacing: 1600, // How far apart the *spaces* (groups of docs) sit - push spaces way out
+	documentSpacing: 1000, // How far the first doc in a space sits from its space-centre - push docs way out
+	minDocDist: 900, // Minimum distance two documents in the **same space** are allowed to be - sets repulsion radius
+	memoryClusterRadius: 300,
+};
+
+// Graph view settings
+export const GRAPH_SETTINGS = {
+	console: {
+		initialZoom: 0.8, // Higher zoom for console - better overview
+		initialPanX: 0,
+		initialPanY: 0,
+	},
+	consumer: {
+		initialZoom: 0.5, // Changed from 0.1 to 0.5 for better initial visibility
+		initialPanX: 400, // Pan towards center to compensate for larger layout
+		initialPanY: 300, // Pan towards center to compensate for larger layout
+	},
+};
+
+// Responsive positioning for different app variants
+export const POSITIONING = {
+	console: {
+		legend: {
+			desktop: "bottom-4 right-4",
+			mobile: "bottom-4 right-4",
+		},
+		loadingIndicator: "top-20 right-4",
+
+		spacesSelector: "top-4 left-4",
+		viewToggle: "", // Not used in console
+		nodeDetail: "top-4 right-4",
+	},
+	consumer: {
+		legend: {
+			desktop: "top-18 right-4",
+			mobile: "bottom-[180px] left-4",
+		},
+		loadingIndicator: "top-20 right-4",
+
+		spacesSelector: "", // Hidden in consumer
+		viewToggle: "top-4 right-4", // Consumer has view toggle
+		nodeDetail: "top-4 right-4",
+	},
+};

packages/ui/memory-graph/controls.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { cn } from "@repo/lib/utils";
+import { Button } from "@repo/ui/components/button";
+import { GlassMenuEffect } from "@repo/ui/other/glass-effect";
+import { Move, ZoomIn, ZoomOut } from "lucide-react";
+import { memo } from "react";
+import type { ControlsProps } from "./types";
+
+export const Controls = memo<ControlsProps>(
+	({ onZoomIn, onZoomOut, onResetView, variant = "console" }) => {
+		// Use explicit classes - controls positioning not defined in constants
+		// Using a reasonable default position
+		const getPositioningClasses = () => {
+			if (variant === "console") {
+				return "bottom-4 left-4";
+			}
+			if (variant === "consumer") {
+				return "bottom-20 right-4";
+			}
+			return "";
+		};
+
+		return (
+			<div
+				className={cn(
+					"absolute z-10 rounded-xl overflow-hidden",
+					getPositioningClasses(),
+				)}
+			>
+				{/* Glass effect background */}
+				<GlassMenuEffect rounded="rounded-xl" />
+
+				<div className="relative z-10 px-4 py-3">
+					<div className="flex items-center gap-2">
+						<Button
+							className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
+							onClick={onZoomIn}
+							size="sm"
+							variant="ghost"
+						>
+							<ZoomIn className="w-4 h-4" />
+						</Button>
+						<Button
+							className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
+							onClick={onZoomOut}
+							size="sm"
+							variant="ghost"
+						>
+							<ZoomOut className="w-4 h-4" />
+						</Button>
+						<Button
+							className="h-8 w-8 p-0 text-slate-200 hover:bg-slate-700/40 hover:text-slate-100 transition-colors"
+							onClick={onResetView}
+							size="sm"
+							variant="ghost"
+						>
+							<Move className="w-4 h-4" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		);
+	},
+);
+
+Controls.displayName = "Controls";