feat: deep-research on user profile and tiptap integration (#672)01-14-feat_deep-research_on_user_profile

deep-research on user profile

add novel integration

tiptap 3.x integration

56 files changed, 1567 insertions, 327 deletions

diff --git a/apps/web/.env.example b/apps/web/.env.example
index 969d7377..aaf5fab4 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -1,2 +1,4 @@
 NEXT_PUBLIC_BACKEND_URL=https://api.supermemory.ai
-NEXT_PUBLIC_POSTHOG_KEY=
\ No newline at end of file
+NEXT_PUBLIC_POSTHOG_KEY=
+EXA_API_KEY=
+XAI_API_KEY=
\ No newline at end of file
diff --git a/apps/web/app/(auth)/login/new/page.tsx b/apps/web/app/(auth)/login/new/page.tsx
index ddea896e..4fc7536b 100644
--- a/apps/web/app/(auth)/login/new/page.tsx
+++ b/apps/web/app/(auth)/login/new/page.tsx
@@ -14,7 +14,7 @@ import { InitialHeader } from "@/components/initial-header"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useState, useEffect } from "react"
 import { motion } from "motion/react"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { Logo } from "@ui/assets/Logo"
 
@@ -30,7 +30,11 @@ function AnimatedGradientBackground() {
 				}}
 				transition={{
 					y: { duration: 0.75, ease: "easeOut" },
-					opacity: { duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" },
+					opacity: {
+						duration: 8,
+						repeat: Number.POSITIVE_INFINITY,
+						ease: "easeInOut",
+					},
 				}}
 			/>
 			<motion.div
@@ -42,7 +46,11 @@ function AnimatedGradientBackground() {
 				}}
 				transition={{
 					y: { duration: 0.75, ease: "easeOut" },
-					opacity: { duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" },
+					opacity: {
+						duration: 8,
+						repeat: Number.POSITIVE_INFINITY,
+						ease: "easeInOut",
+					},
 				}}
 			/>
 			<motion.div
diff --git a/apps/web/app/api/exa/fetch-content/route.ts b/apps/web/app/api/onboarding/extract-content/route.ts
index 6cdb40d5..6cdb40d5 100644
--- a/apps/web/app/api/exa/fetch-content/route.ts
+++ b/apps/web/app/api/onboarding/extract-content/route.ts
diff --git a/apps/web/app/api/onboarding/research/route.ts b/apps/web/app/api/onboarding/research/route.ts
new file mode 100644
index 00000000..d0d6eded
--- /dev/null
+++ b/apps/web/app/api/onboarding/research/route.ts
@@ -0,0 +1,81 @@
+import { xai } from "@ai-sdk/xai"
+import { generateText } from "ai"
+
+interface ResearchRequest {
+	xUrl: string
+	name?: string
+	email?: string
+}
+
+// prompt to get user context from X/Twitter profile
+function finalPrompt(xUrl: string, userContext: string) {
+	return `You are researching a user based on their X/Twitter profile to help personalize their experience.
+
+X/Twitter Profile URL: ${xUrl}${userContext}
+
+Please analyze this X/Twitter profile and provide a comprehensive but concise summary of the user. Include:
+- Professional background and current role (if available)
+- Key interests and topics they engage with
+- Notable projects, achievements, or affiliations
+- Their expertise areas
+- Any other relevant information that helps understand who they are
+
+Format the response as clear, readable paragraphs. Focus on factual information from their profile. If certain information is not available, skip that section rather than speculating.`
+}
+
+export async function POST(req: Request) {
+	try {
+		const { xUrl, name, email }: ResearchRequest = await req.json()
+
+		if (!xUrl?.trim()) {
+			return Response.json(
+				{ error: "X/Twitter URL is required" },
+				{ status: 400 },
+			)
+		}
+
+		const lowerUrl = xUrl.toLowerCase()
+		if (!lowerUrl.includes("x.com") && !lowerUrl.includes("twitter.com")) {
+			return Response.json(
+				{ error: "URL must be an X/Twitter profile link" },
+				{ status: 400 },
+			)
+		}
+
+		const contextParts: string[] = []
+		if (name) contextParts.push(`Name: ${name}`)
+		if (email) contextParts.push(`Email: ${email}`)
+		const userContext =
+			contextParts.length > 0
+				? `\n\nAdditional context about the user:\n${contextParts.join("\n")}`
+				: ""
+
+		const { text } = await generateText({
+			model: xai("grok-4-1-fast-reasoning"),
+			prompt: finalPrompt(xUrl, userContext),
+			providerOptions: {
+				xai: {
+					searchParameters: {
+						mode: "on",
+						sources: [
+							{
+								type: "web",
+								safeSearch: true,
+							},
+							{
+								type: "x",
+								includedXHandles: [lowerUrl.replace("https://x.com/", "").replace("https://twitter.com/", "")],
+								postFavoriteCount: 10,
+							},
+						],
+					},
+				},
+			},
+		})
+
+		return Response.json({ text })
+	} catch (error) {
+		console.error("Research API error:", error)
+		return Response.json({ error: "Internal server error" }, { status: 500 })
+	}
+}
diff --git a/apps/web/app/new/onboarding/page.tsx b/apps/web/app/new/onboarding/page.tsx
index 57b5b4fb..1b4962e4 100644
--- a/apps/web/app/new/onboarding/page.tsx
+++ b/apps/web/app/new/onboarding/page.tsx
@@ -6,18 +6,18 @@ import { useState, useEffect } from "react"
 import { useAuth } from "@lib/auth-context"
 import { cn } from "@lib/utils"
 
-import { InputStep } from "./welcome/input-step"
-import { GreetingStep } from "./welcome/greeting-step"
-import { WelcomeStep } from "./welcome/welcome-step"
-import { ContinueStep } from "./welcome/continue-step"
-import { FeaturesStep } from "./welcome/features-step"
-import { MemoriesStep } from "./welcome/memories-step"
-import { RelatableQuestion } from "./setup/relatable-question"
-import { IntegrationsStep } from "./setup/integrations-step"
+import { InputStep } from "../../../components/new/onboarding/welcome/input-step"
+import { GreetingStep } from "../../../components/new/onboarding/welcome/greeting-step"
+import { WelcomeStep } from "../../../components/new/onboarding/welcome/welcome-step"
+import { ContinueStep } from "../../../components/new/onboarding/welcome/continue-step"
+import { FeaturesStep } from "../../../components/new/onboarding/welcome/features-step"
+import { ProfileStep } from "../../../components/new/onboarding/welcome/profile-step"
+import { RelatableQuestion } from "../../../components/new/onboarding/setup/relatable-question"
+import { IntegrationsStep } from "../../../components/new/onboarding/setup/integrations-step"
 
 import { InitialHeader } from "@/components/initial-header"
-import { SetupHeader } from "./setup/header"
-import { ChatSidebar } from "./setup/chat-sidebar"
+import { SetupHeader } from "../../../components/new/onboarding/setup/header"
+import { ChatSidebar } from "../../../components/new/onboarding/setup/chat-sidebar"
 import { Logo } from "@ui/assets/Logo"
 import NovaOrb from "@/components/nova/nova-orb"
 import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background"
@@ -152,7 +152,7 @@ export default function OnboardingPage() {
 			case "features":
 				return <FeaturesStep key="features" />
 			case "memories":
-				return <MemoriesStep key="memories" onSubmit={setMemoryFormData} />
+				return <ProfileStep key="profile" onSubmit={setMemoryFormData} />
 			default:
 				return null
 		}
diff --git a/apps/web/app/new/settings/page.tsx b/apps/web/app/new/settings/page.tsx
index fbb0bc08..2b5df3ca 100644
--- a/apps/web/app/new/settings/page.tsx
+++ b/apps/web/app/new/settings/page.tsx
@@ -6,7 +6,7 @@ import { motion } from "motion/react"
 import NovaOrb from "@/components/nova/nova-orb"
 import { useState, useEffect, useRef } from "react"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import Account from "@/components/new/settings/account"
 import Integrations from "@/components/new/settings/integrations"
 import ConnectionsMCP from "@/components/new/settings/connections-mcp"
@@ -175,7 +175,11 @@ export default function SettingsPage() {
 	return (
 		<div className="h-screen flex flex-col overflow-hidden">
 			<header className="flex justify-between items-center px-6 py-3 shrink-0">
-				<button type="button" onClick={() => router.push("/new")} className="cursor-pointer">
+				<button
+					type="button"
+					onClick={() => router.push("/new")}
+					className="cursor-pointer"
+				>
 					<Logo className="h-7" />
 				</button>
 				<div className="flex items-center gap-2">
diff --git a/apps/web/components/new/add-document/connections.tsx b/apps/web/components/new/add-document/connections.tsx
index 5a89cf70..b146fb4c 100644
--- a/apps/web/components/new/add-document/connections.tsx
+++ b/apps/web/components/new/add-document/connections.tsx
@@ -10,7 +10,7 @@ import { Check, Loader, Trash2, Zap } from "lucide-react"
 import { useEffect, useState } from "react"
 import { toast } from "sonner"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
 
diff --git a/apps/web/components/new/add-document/file.tsx b/apps/web/components/new/add-document/file.tsx
index 8e7dc4c4..bb605f03 100644
--- a/apps/web/components/new/add-document/file.tsx
+++ b/apps/web/components/new/add-document/file.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { FileIcon } from "lucide-react"
 import { useHotkeys } from "react-hotkeys-hook"
 
@@ -19,7 +19,12 @@ interface FileContentProps {
 	isOpen?: boolean
 }
 
-export function FileContent({ onSubmit, onDataChange, isSubmitting, isOpen }: FileContentProps) {
+export function FileContent({
+	onSubmit,
+	onDataChange,
+	isSubmitting,
+	isOpen,
+}: FileContentProps) {
 	const [isDragging, setIsDragging] = useState(false)
 	const [selectedFile, setSelectedFile] = useState<File | null>(null)
 	const [title, setTitle] = useState("")
@@ -33,8 +38,16 @@ export function FileContent({ onSubmit, onDataChange, isSubmitting, isOpen }: Fi
 		}
 	}
 
-	const updateData = (newFile: File | null, newTitle: string, newDescription: string) => {
-		onDataChange?.({ file: newFile, title: newTitle, description: newDescription })
+	const updateData = (
+		newFile: File | null,
+		newTitle: string,
+		newDescription: string,
+	) => {
+		onDataChange?.({
+			file: newFile,
+			title: newTitle,
+			description: newDescription,
+		})
 	}
 
 	const handleFileChange = (file: File | null) => {
diff --git a/apps/web/components/new/add-document/index.tsx b/apps/web/components/new/add-document/index.tsx
index 9e117912..a99505bd 100644
--- a/apps/web/components/new/add-document/index.tsx
+++ b/apps/web/components/new/add-document/index.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react"
 import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import {
 	FileTextIcon,
 	GlobeIcon,
diff --git a/apps/web/components/new/add-document/link.tsx b/apps/web/components/new/add-document/link.tsx
index 544af86d..2efb67dc 100644
--- a/apps/web/components/new/add-document/link.tsx
+++ b/apps/web/components/new/add-document/link.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { useHotkeys } from "react-hotkeys-hook"
 import { Image as ImageIcon, Loader2 } from "lucide-react"
 import { toast } from "sonner"
diff --git a/apps/web/components/new/add-document/note.tsx b/apps/web/components/new/add-document/note.tsx
index 465e295a..4f833ca2 100644
--- a/apps/web/components/new/add-document/note.tsx
+++ b/apps/web/components/new/add-document/note.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { useHotkeys } from "react-hotkeys-hook"
+import { TextEditor } from "../text-editor"
 
 interface NoteContentProps {
 	onSubmit?: (content: string) => void
@@ -31,11 +31,6 @@ export function NoteContent({
 		onContentChange?.(newContent)
 	}
 
-	useHotkeys("mod+enter", handleSubmit, {
-		enabled: isOpen && canSubmit,
-		enableOnFormTags: ["TEXTAREA"],
-	})
-
 	// Reset content when modal closes
 	useEffect(() => {
 		if (!isOpen) {
@@ -45,12 +40,12 @@ export function NoteContent({
 	}, [isOpen, onContentChange])
 
 	return (
-		<textarea
-			value={content}
-			onChange={(e) => handleContentChange(e.target.value)}
-			placeholder="Write your note here..."
-			disabled={isSubmitting}
-			className="w-full h-full p-4 mb-4! rounded-[14px] bg-[#14161A] shadow-inside-out resize-none disabled:opacity-50 outline-none"
-		/>
+		<div className="p-4 overflow-y-auto flex-1 w-full h-full mb-4! bg-[#14161A] shadow-inside-out rounded-[14px]">
+			<TextEditor
+				content={undefined}
+				onContentChange={handleContentChange}
+				onSubmit={handleSubmit}
+			/>
+		</div>
 	)
 }
diff --git a/apps/web/components/new/chat/index.tsx b/apps/web/components/new/chat/index.tsx
index 3460c456..08f4e2ef 100644
--- a/apps/web/components/new/chat/index.tsx
+++ b/apps/web/components/new/chat/index.tsx
@@ -14,7 +14,7 @@ import {
 	SquarePenIcon,
 } from "lucide-react"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import ChatInput from "./input"
 import ChatModelSelector from "./model-selector"
 import { GradientLogo, LogoBgGradient } from "@ui/assets/Logo"
@@ -110,7 +110,6 @@ export function ChatSidebar({
 				},
 			},
 		}),
-		maxSteps: 10,
 		onFinish: async (result) => {
 			if (result.message.role !== "assistant") return
 
@@ -285,14 +284,20 @@ export function ChatSidebar({
 
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
+			const activeElement = document.activeElement as HTMLElement | null
+			const isInEditableContext =
+				activeElement?.tagName === "INPUT" ||
+				activeElement?.tagName === "TEXTAREA" ||
+				activeElement?.isContentEditable ||
+				activeElement?.closest('[contenteditable="true"]')
+
 			if (
 				e.key.toLowerCase() === "t" &&
 				!e.metaKey &&
 				!e.ctrlKey &&
 				!e.altKey &&
 				isChatOpen &&
-				document.activeElement?.tagName !== "INPUT" &&
-				document.activeElement?.tagName !== "TEXTAREA"
+				!isInEditableContext
 			) {
 				e.preventDefault()
 				handleNewChat()
diff --git a/apps/web/components/new/chat/input/chain-of-thought.tsx b/apps/web/components/new/chat/input/chain-of-thought.tsx
index 0371a97e..b1923146 100644
--- a/apps/web/components/new/chat/input/chain-of-thought.tsx
+++ b/apps/web/components/new/chat/input/chain-of-thought.tsx
@@ -2,7 +2,7 @@ import { useAuth } from "@lib/auth-context"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
 import type { UIMessage } from "@ai-sdk/react"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 
 interface MemoryResult {
 	documentId?: string
diff --git a/apps/web/components/new/chat/input/index.tsx b/apps/web/components/new/chat/input/index.tsx
index 4294add5..40c1949d 100644
--- a/apps/web/components/new/chat/input/index.tsx
+++ b/apps/web/components/new/chat/input/index.tsx
@@ -3,7 +3,7 @@
 import { ChevronUpIcon } from "lucide-react"
 import NovaOrb from "@/components/nova/nova-orb"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { useRef, useState } from "react"
 import { motion } from "motion/react"
 import { SendButton, StopButton } from "./actions"
diff --git a/apps/web/components/new/chat/message/related-memories.tsx b/apps/web/components/new/chat/message/related-memories.tsx
index f3b406db..ad83d03e 100644
--- a/apps/web/components/new/chat/message/related-memories.tsx
+++ b/apps/web/components/new/chat/message/related-memories.tsx
@@ -1,6 +1,6 @@
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import type { UIMessage } from "@ai-sdk/react"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 
 interface MemoryResult {
diff --git a/apps/web/components/new/chat/model-selector.tsx b/apps/web/components/new/chat/model-selector.tsx
index 9cecafc2..c1952bea 100644
--- a/apps/web/components/new/chat/model-selector.tsx
+++ b/apps/web/components/new/chat/model-selector.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { ChevronDownIcon } from "lucide-react"
 import { models, type ModelId, modelNames } from "@/lib/models"
 
diff --git a/apps/web/components/new/document-cards/file-preview.tsx b/apps/web/components/new/document-cards/file-preview.tsx
index 6f72c0e3..93e53463 100644
--- a/apps/web/components/new/document-cards/file-preview.tsx
+++ b/apps/web/components/new/document-cards/file-preview.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { PDF } from "@ui/assets/icons"
 import { FileText, Image, Video } from "lucide-react"
diff --git a/apps/web/components/new/document-cards/google-docs-preview.tsx b/apps/web/components/new/document-cards/google-docs-preview.tsx
index ee3e6c72..6c783c7d 100644
--- a/apps/web/components/new/document-cards/google-docs-preview.tsx
+++ b/apps/web/components/new/document-cards/google-docs-preview.tsx
@@ -2,7 +2,7 @@
 
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
diff --git a/apps/web/components/new/document-cards/mcp-preview.tsx b/apps/web/components/new/document-cards/mcp-preview.tsx
index 55c98169..a8a792fb 100644
--- a/apps/web/components/new/document-cards/mcp-preview.tsx
+++ b/apps/web/components/new/document-cards/mcp-preview.tsx
@@ -2,7 +2,7 @@
 
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { ClaudeDesktopIcon, MCPIcon } from "@ui/assets/icons"
 
@@ -13,11 +13,16 @@ export function McpPreview({ document }: { document: DocumentWithMemories }) {
 	return (
 		<div className="bg-[#0B1017] p-3 rounded-[18px] space-y-2">
 			<div className="flex items-center justify-between gap-1">
-				<p className={cn(dmSansClassName(), "text-[12px] font-semibold flex items-center gap-1")}>
-                    <ClaudeDesktopIcon className="size-3" />
+				<p
+					className={cn(
+						dmSansClassName(),
+						"text-[12px] font-semibold flex items-center gap-1",
+					)}
+				>
+					<ClaudeDesktopIcon className="size-3" />
 					Claude Desktop
 				</p>
-                <MCPIcon className="size-6" />
+				<MCPIcon className="size-6" />
 			</div>
 			<div className="space-y-[6px]">
 				{document.title && (
diff --git a/apps/web/components/new/document-cards/note-preview.tsx b/apps/web/components/new/document-cards/note-preview.tsx
index 288b6fa5..2becc237 100644
--- a/apps/web/components/new/document-cards/note-preview.tsx
+++ b/apps/web/components/new/document-cards/note-preview.tsx
@@ -2,12 +2,54 @@
 
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
+import { useMemo } from "react"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
 
+type TipTapNode = {
+	type: string
+	text?: string
+	content?: TipTapNode[]
+	attrs?: Record<string, unknown>
+}
+
+function extractTextFromTipTapContent(content: string): string {
+	try {
+		const json = JSON.parse(content) as TipTapNode
+		return extractTextFromNode(json)
+	} catch {
+		return content
+	}
+}
+
+function extractTextFromNode(node: TipTapNode): string {
+	if (node.type === "text" && node.text) {
+		return node.text
+	}
+
+	if (!node.content) {
+		return ""
+	}
+
+	const texts: string[] = []
+	for (const child of node.content) {
+		const text = extractTextFromNode(child)
+		if (text) {
+			texts.push(text)
+		}
+	}
+
+	const blockTypes = ["paragraph", "heading", "listItem", "blockquote", "codeBlock"]
+	if (blockTypes.includes(node.type)) {
+		return `${texts.join("")}\n`
+	}
+
+	return texts.join("")
+}
+
 function NoteIcon() {
 	return (
 		<svg
@@ -79,6 +121,11 @@ function NoteIcon() {
 }
 
 export function NotePreview({ document }: { document: DocumentWithMemories }) {
+	const previewText = useMemo(() => {
+		if (!document.content) return ""
+		return extractTextFromTipTapContent(document.content).trim()
+	}, [document.content])
+
 	return (
 		<div className="bg-[#0B1017] p-3 rounded-[18px] space-y-2">
 			<div className="flex items-center gap-1">
@@ -98,9 +145,9 @@ export function NotePreview({ document }: { document: DocumentWithMemories }) {
 						{document.title}
 					</p>
 				)}
-				{document.content && (
+				{previewText && (
 					<p className="text-[10px] text-[#737373] line-clamp-4">
-						{document.content}
+						{previewText}
 					</p>
 				)}
 			</div>
diff --git a/apps/web/components/new/document-cards/tweet-preview.tsx b/apps/web/components/new/document-cards/tweet-preview.tsx
index 7ba9b392..291bc18a 100644
--- a/apps/web/components/new/document-cards/tweet-preview.tsx
+++ b/apps/web/components/new/document-cards/tweet-preview.tsx
@@ -11,7 +11,7 @@ import {
 	TweetSkeleton,
 } from "react-tweet"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 
 export function TweetPreview({
 	data,
diff --git a/apps/web/components/new/document-cards/website-preview.tsx b/apps/web/components/new/document-cards/website-preview.tsx
index d61b1ed6..ab3c5ad3 100644
--- a/apps/web/components/new/document-cards/website-preview.tsx
+++ b/apps/web/components/new/document-cards/website-preview.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
diff --git a/apps/web/components/new/document-cards/youtube-preview.tsx b/apps/web/components/new/document-cards/youtube-preview.tsx
index 101376f8..47c9cb5e 100644
--- a/apps/web/components/new/document-cards/youtube-preview.tsx
+++ b/apps/web/components/new/document-cards/youtube-preview.tsx
@@ -2,7 +2,7 @@
 
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { extractYouTubeVideoId } from "../utils"
 
diff --git a/apps/web/components/new/document-modal/document-icon.tsx b/apps/web/components/new/document-modal/document-icon.tsx
index f86228eb..cb279e49 100644
--- a/apps/web/components/new/document-modal/document-icon.tsx
+++ b/apps/web/components/new/document-modal/document-icon.tsx
@@ -80,7 +80,7 @@ const PDFIcon = ({ className }: { className: string }) => {
 					width="8.25216"
 					height="10.2522"
 					filterUnits="userSpaceOnUse"
-					color-interpolation-filters="sRGB"
+					colorInterpolationFilters="sRGB"
 				>
 					<feFlood floodOpacity="0" result="BackgroundImageFix" />
 					<feBlend
@@ -158,7 +158,7 @@ const TextDocumentIcon = ({ className }: { className: string }) => {
 					width="18.0253"
 					height="13.8376"
 					filterUnits="userSpaceOnUse"
-					color-interpolation-filters="sRGB"
+					colorInterpolationFilters="sRGB"
 				>
 					<feFlood floodOpacity="0" result="BackgroundImageFix" />
 					<feBlend
diff --git a/apps/web/components/new/document-modal/index.tsx b/apps/web/components/new/document-modal/index.tsx
index 74d4e178..bd8ec05d 100644
--- a/apps/web/components/new/document-modal/index.tsx
+++ b/apps/web/components/new/document-modal/index.tsx
@@ -2,19 +2,24 @@
 
 import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
-import { ArrowUpRightIcon, XIcon } from "lucide-react"
+import { ArrowUpRightIcon, XIcon, Loader2 } from "lucide-react"
 import type { z } from "zod"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { cn } from "@lib/utils"
 import dynamic from "next/dynamic"
 import { Title } from "./title"
 import { Summary as DocumentSummary } from "./summary"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { GraphListMemories, type MemoryEntry } from "./graph-list-memories"
 import { YoutubeVideo } from "./content/yt-video"
 import { TweetContent } from "./content/tweet"
-import { isTwitterUrl } from "@/utils/url-helpers"
+import { isTwitterUrl } from "@/lib/url-helpers"
 import { NotionDoc } from "./content/notion-doc"
+import { TextEditor } from "../text-editor"
+import { useState, useEffect, useCallback, useMemo } from "react"
+import { motion, AnimatePresence } from "motion/react"
+import { Button } from "@repo/ui/components/button"
+import { useDocumentMutations } from "@/hooks/use-document-mutations"
 
 // Dynamically importing to prevent DOMMatrix error
 const PdfViewer = dynamic(
@@ -43,7 +48,49 @@ export function DocumentModal({
 	isOpen,
 	onClose,
 }: DocumentModalProps) {
-	console.log(_document)
+	const { updateMutation } = useDocumentMutations()
+
+	const { initialEditorContent, initialEditorString } = useMemo(() => {
+		const content = _document?.content as string | null | undefined
+		return {
+			initialEditorContent: content ?? undefined,
+			initialEditorString: content ?? "",
+		}
+	}, [_document?.content])
+
+	const [draftContentString, setDraftContentString] =
+		useState(initialEditorString)
+	const [editorResetNonce, setEditorResetNonce] = useState(0)
+	const [lastSavedContent, setLastSavedContent] = useState<string | null>(null)
+
+	const resetEditor = useCallback(() => {
+		setDraftContentString(initialEditorString)
+		setEditorResetNonce((n) => n + 1)
+		setLastSavedContent(null)
+	}, [initialEditorString])
+
+	useEffect(() => {
+		setDraftContentString(initialEditorString)
+		setEditorResetNonce((n) => n + 1)
+		setLastSavedContent(null)
+	}, [initialEditorString])
+
+	useEffect(() => {
+		if (!isOpen) resetEditor()
+	}, [isOpen, resetEditor])
+
+	const hasUnsavedChanges =
+		draftContentString !== initialEditorString &&
+		draftContentString !== lastSavedContent
+
+	const handleSave = useCallback(() => {
+		if (!_document?.id) return
+		updateMutation.mutate(
+			{ documentId: _document.id, content: draftContentString },
+			{ onSuccess: (_data, variables) => setLastSavedContent(variables.content) },
+		)
+	}, [_document?.id, draftContentString, updateMutation])
+
 	return (
 		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
 			<DialogContent
@@ -79,7 +126,7 @@ export function DocumentModal({
 							</a>
 						)}
 						<DialogPrimitive.Close
-							className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
+							className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
 							data-slot="dialog-close"
 						>
 							<XIcon stroke="#737373" />
@@ -91,7 +138,7 @@ export function DocumentModal({
 					<div
 						id="document-preview"
 						className={cn(
-							"bg-[#14161A] rounded-[14px] overflow-hidden flex flex-col shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]",
+							"bg-[#14161A] rounded-[14px] overflow-hidden flex flex-col shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)] relative",
 						)}
 					>
 						{(_document?.type === "tweet" ||
@@ -104,9 +151,66 @@ export function DocumentModal({
 							/>
 						)}
 						{_document?.type === "text" && (
-							<div className="p-4 overflow-y-auto flex-1">
-								{_document.content}
-							</div>
+							<>
+								<div className="p-4 overflow-y-auto flex-1 scrollbar-thin">
+									<TextEditor
+										key={`${_document.id}-${editorResetNonce}`}
+										content={initialEditorContent}
+										onContentChange={setDraftContentString}
+										onSubmit={handleSave}
+									/>
+								</div>
+								<AnimatePresence>
+									{hasUnsavedChanges && (
+										<motion.div
+											initial={{ opacity: 0, y: 20 }}
+											animate={{ opacity: 1, y: 0 }}
+											exit={{ opacity: 0, y: 20 }}
+											transition={{ duration: 0.2 }}
+											className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3 px-4 py-2 bg-[#1B1F24] rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.4),inset_1px_1px_1px_rgba(255,255,255,0.1)]"
+										>
+											<span className="text-sm text-[#737373]">
+												Unsaved changes
+											</span>
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={resetEditor}
+												disabled={updateMutation.isPending}
+												className="text-[#737373]/80 hover:text-white rounded-full px-3"
+											>
+												Cancel
+											</Button>
+											<Button
+												variant="insideOut"
+												size="sm"
+												onClick={handleSave}
+												disabled={updateMutation.isPending}
+												className="hover:text-white rounded-full px-4"
+											>
+												{updateMutation.isPending ? (
+													<>
+														<Loader2 className="size-4 animate-spin mr-1" />
+														Saving...
+													</>
+												) : (
+													<>
+														Save
+														<span
+															className={cn(
+																"bg-[#21212180] border border-[#73737333] text-[#737373] rounded-sm px-1 py-0.5 text-[10px] flex items-center justify-center",
+																dmSansClassName(),
+															)}
+														>
+															⌘+Enter
+														</span>
+													</>
+												)}
+											</Button>
+										</motion.div>
+									)}
+								</AnimatePresence>
+							</>
 						)}
 						{_document?.type === "pdf" && <PdfViewer url={_document.url} />}
 						{_document?.type === "notion_doc" && (
diff --git a/apps/web/components/new/document-modal/title.tsx b/apps/web/components/new/document-modal/title.tsx
index b8bdc8bb..066c437b 100644
--- a/apps/web/components/new/document-modal/title.tsx
+++ b/apps/web/components/new/document-modal/title.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import type { DocumentTypeEnum } from "@repo/validation/schemas"
 import type { z } from "zod"
 import { getDocumentIcon } from "@/components/new/document-modal/document-icon"
diff --git a/apps/web/components/new/header.tsx b/apps/web/components/new/header.tsx
index a5aa47d3..3bb2d115 100644
--- a/apps/web/components/new/header.tsx
+++ b/apps/web/components/new/header.tsx
@@ -18,7 +18,7 @@ import {
 } from "lucide-react"
 import { Button } from "@ui/components/button"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { Tabs, TabsList, TabsTrigger } from "@ui/components/tabs"
 import { useProjectName } from "@/hooks/use-project-name"
 import {
@@ -259,10 +259,12 @@ export function Header({ onAddMemory, onOpenMCP }: HeaderProps) {
 								<Settings className="h-4 w-4" />
 								Settings
 							</DropdownMenuItem>
-							<DropdownMenuItem onClick={() => {
-								authClient.signOut()
-								router.push("/login/new")
-							}}>
+							<DropdownMenuItem
+								onClick={() => {
+									authClient.signOut()
+									router.push("/login/new")
+								}}
+							>
 								<LogOut className="h-4 w-4" />
 								Logout
 							</DropdownMenuItem>
diff --git a/apps/web/components/new/mcp-modal/index.tsx b/apps/web/components/new/mcp-modal/index.tsx
index d555ae62..6816c21e 100644
--- a/apps/web/components/new/mcp-modal/index.tsx
+++ b/apps/web/components/new/mcp-modal/index.tsx
@@ -1,4 +1,4 @@
-import { dmSans125ClassName, dmSansClassName } from "@/utils/fonts"
+import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
 import { Dialog, DialogContent, DialogFooter } from "@repo/ui/components/dialog"
 import { cn } from "@lib/utils"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
diff --git a/apps/web/components/new/mcp-modal/mcp-detail-view.tsx b/apps/web/components/new/mcp-modal/mcp-detail-view.tsx
index f1254bcb..5cc2fa68 100644
--- a/apps/web/components/new/mcp-modal/mcp-detail-view.tsx
+++ b/apps/web/components/new/mcp-modal/mcp-detail-view.tsx
@@ -14,7 +14,7 @@ import Image from "next/image"
 import { toast } from "sonner"
 import { analytics } from "@/lib/analytics"
 import { cn } from "@lib/utils"
-import { dmMonoClassName, dmSansClassName } from "@/utils/fonts"
+import { dmMonoClassName, dmSansClassName } from "@/lib/fonts"
 import { SyncLogoIcon } from "@ui/assets/icons"
 
 const clients = {
@@ -78,7 +78,14 @@ export function MCPSteps({ variant = "full" }: MCPStepsProps) {
 		>
 			<div
 				className="absolute left-4 top-0 w-px bg-[#1E293B] z-10"
-				style={{ height: activeStep === 3 ? isEmbedded ? "100%" : "calc(100% - 4rem)" : "100%" }}
+				style={{
+					height:
+						activeStep === 3
+							? isEmbedded
+								? "100%"
+								: "calc(100% - 4rem)"
+							: "100%",
+				}}
 			/>
 			<div className="flex items-start space-x-4 z-20">
 				<button
diff --git a/apps/web/components/new/memories-grid.tsx b/apps/web/components/new/memories-grid.tsx
index e5972d51..e6095645 100644
--- a/apps/web/components/new/memories-grid.tsx
+++ b/apps/web/components/new/memories-grid.tsx
@@ -6,11 +6,8 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import { useInfiniteQuery } from "@tanstack/react-query"
 import { useCallback, memo, useMemo, useState, useRef } from "react"
 import type { z } from "zod"
-import {
-	Masonry,
-	useInfiniteLoader,
-} from "masonic"
-import { dmSansClassName } from "@/utils/fonts"
+import { Masonry, useInfiniteLoader } from "masonic"
+import { dmSansClassName } from "@/lib/fonts"
 import { SuperLoader } from "@/components/superloader"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
@@ -151,9 +148,7 @@ export function MemoriesGrid({ isChatOpen }: { isChatOpen: boolean }) {
 	}
 
 	return (
-		<div
-			className="h-full"
-		>
+		<div className="h-full">
 			<Button
 				className={cn(
 					dmSansClassName(),
diff --git a/apps/web/app/new/onboarding/setup/chat-sidebar.tsx b/apps/web/components/new/onboarding/setup/chat-sidebar.tsx
index d35ce73d..59742271 100644
--- a/apps/web/app/new/onboarding/setup/chat-sidebar.tsx
+++ b/apps/web/components/new/onboarding/setup/chat-sidebar.tsx
@@ -5,10 +5,11 @@ import { motion, AnimatePresence } from "motion/react"
 import NovaOrb from "@/components/nova/nova-orb"
 import { Button } from "@ui/components/button"
 import { PanelRightCloseIcon, SendIcon } from "lucide-react"
-import { collectValidUrls } from "@/utils/url-helpers"
+import { collectValidUrls } from "@/lib/url-helpers"
 import { $fetch } from "@lib/api"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
+import { useAuth } from "@lib/auth-context"
 
 interface ChatSidebarProps {
 	formData: {
@@ -20,6 +21,7 @@ interface ChatSidebarProps {
 }
 
 export function ChatSidebar({ formData }: ChatSidebarProps) {
+	const { user } = useAuth()
 	const [message, setMessage] = useState("")
 	const [isChatOpen, setIsChatOpen] = useState(true)
 	const [messages, setMessages] = useState<
@@ -127,9 +129,60 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 	useEffect(() => {
 		if (!formData) return
 
-		const urls = collectValidUrls(formData.linkedin, formData.otherLinks)
+		const formDataMessages: typeof messages = []
+
+		if (formData.twitter) {
+			formDataMessages.push({
+				message: formData.twitter,
+				url: formData.twitter,
+				title: "X/Twitter",
+				description: formData.twitter,
+				type: "formData" as const,
+			})
+		}
+
+		if (formData.linkedin) {
+			formDataMessages.push({
+				message: formData.linkedin,
+				url: formData.linkedin,
+				title: "LinkedIn",
+				description: formData.linkedin,
+				type: "formData" as const,
+			})
+		}
+
+		if (formData.otherLinks.length > 0) {
+			formData.otherLinks.forEach((link) => {
+				formDataMessages.push({
+					message: link,
+					url: link,
+					title: "Link",
+					description: link,
+					type: "formData" as const,
+				})
+			})
+		}
+
+		if (formData.description?.trim()) {
+			formDataMessages.push({
+				message: formData.description,
+				title: "Likes",
+				description: formData.description,
+				type: "formData" as const,
+			})
+		}
+
+		setMessages(formDataMessages)
+
+		const hasContent =
+			formData.twitter ||
+			formData.linkedin ||
+			formData.otherLinks.length > 0 ||
+			formData.description?.trim()
 
-		console.log("urls", urls)
+		if (!hasContent) return
+
+		const urls = collectValidUrls(formData.linkedin, formData.otherLinks)
 
 		const processContent = async () => {
 			setIsLoading(true)
@@ -137,17 +190,73 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 			try {
 				const documentIds: string[] = []
 
-				// Step 1: Fetch content from Exa if URLs exist
+				if (formData.description?.trim()) {
+					try {
+						const descDocResponse = await $fetch("@post/documents", {
+							body: {
+								content: formData.description,
+								containerTags: ["sm_project_default"],
+								metadata: {
+									sm_source: "consumer",
+									description_source: "user_input",
+								},
+							},
+						})
+
+						if (descDocResponse.data?.id) {
+							documentIds.push(descDocResponse.data.id)
+						}
+					} catch (error) {
+						console.warn("Error creating description document:", error)
+					}
+				}
+
+				if (formData.twitter) {
+					try {
+						const researchResponse = await fetch("/api/onboarding/research", {
+							method: "POST",
+							headers: { "Content-Type": "application/json" },
+							body: JSON.stringify({
+								xUrl: formData.twitter,
+								name: user?.name,
+								email: user?.email,
+							}),
+						})
+
+						if (researchResponse.ok) {
+							const { text } = await researchResponse.json()
+
+							if (text?.trim()) {
+								const xDocResponse = await $fetch("@post/documents", {
+									body: {
+										content: text,
+										containerTags: ["sm_project_default"],
+										metadata: {
+											sm_source: "consumer",
+											onboarding_source: "x_research",
+											x_url: formData.twitter,
+										},
+									},
+								})
+
+								if (xDocResponse.data?.id) {
+									documentIds.push(xDocResponse.data.id)
+								}
+							}
+						}
+					} catch (error) {
+						console.warn("Error fetching X research:", error)
+					}
+				}
+
 				if (urls.length > 0) {
-					const response = await fetch("/api/exa/fetch-content", {
+					const response = await fetch("/api/onboarding/extract-content", {
 						method: "POST",
 						headers: { "Content-Type": "application/json" },
 						body: JSON.stringify({ urls }),
 					})
 					const { results } = await response.json()
-					console.log("results", results)
 
-					// Create documents from Exa results
 					for (const result of results) {
 						try {
 							const docResponse = await $fetch("@post/documents", {
@@ -171,95 +280,17 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 					}
 				}
 
-				// Step 2: Create document from description if it exists
-				if (formData.description?.trim()) {
-					try {
-						const descDocResponse = await $fetch("@post/documents", {
-							body: {
-								content: formData.description,
-								containerTags: ["sm_project_default"],
-								metadata: {
-									sm_source: "consumer",
-									description_source: "user_input",
-								},
-							},
-						})
-
-						if (descDocResponse.data?.id) {
-							documentIds.push(descDocResponse.data.id)
-						}
-					} catch (error) {
-						console.warn("Error creating description document:", error)
-					}
-				}
-
-				// Step 3: Poll for memories or show form data
 				if (documentIds.length > 0) {
 					await pollForMemories(documentIds)
-				} else {
-					// No documents created, show form data or waiting
-					const formDataMessages = []
-
-					if (formData.twitter) {
-						formDataMessages.push({
-							message: `Twitter: ${formData.twitter}`,
-							url: formData.twitter,
-							title: "Twitter Profile",
-							description: `Twitter: ${formData.twitter}`,
-							type: "formData" as const,
-						})
-					}
-
-					if (formData.linkedin) {
-						formDataMessages.push({
-							message: `LinkedIn: ${formData.linkedin}`,
-							url: formData.linkedin,
-							title: "LinkedIn Profile",
-							description: `LinkedIn: ${formData.linkedin}`,
-							type: "formData" as const,
-						})
-					}
-
-					if (formData.otherLinks.length > 0) {
-						formData.otherLinks.forEach((link) => {
-							formDataMessages.push({
-								message: `Link: ${link}`,
-								url: link,
-								title: "Other Link",
-								description: `Link: ${link}`,
-								type: "formData" as const,
-							})
-						})
-					}
-
-					const waitingMessage = {
-						message: "Waiting for your input",
-						url: "",
-						title: "",
-						description: "Waiting for your input",
-						type: "waiting" as const,
-					}
-
-					setMessages([...formDataMessages, waitingMessage])
 				}
 			} catch (error) {
 				console.warn("Error processing content:", error)
-
-				const waitingMessage = {
-					message: "Waiting for your input",
-					url: "",
-					title: "",
-					description: "Waiting for your input",
-					type: "waiting" as const,
-				}
-
-				setMessages([waitingMessage])
 			}
 			setIsLoading(false)
 		}
 
 		processContent()
-	}, [formData, pollForMemories])
+	}, [formData, pollForMemories, user])
 
 	return (
 		<AnimatePresence mode="wait">
@@ -330,6 +361,39 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 											)}
 											<div className="w-px flex-1 bg-[#293952]/40" />
 										</div>
+										{msg.type === "formData" && (
+											<div className="bg-[#293952]/40 rounded-lg p-2 px-3 space-y-1 flex-1">
+												{msg.title && (
+													<h3
+														className="text-sm font-medium"
+														style={{
+															background:
+																"linear-gradient(90deg, #369BFD 0%, #36FDFD 30%, #36FDB5 100%)",
+															WebkitBackgroundClip: "text",
+															WebkitTextFillColor: "transparent",
+															backgroundClip: "text",
+														}}
+													>
+														{msg.title}
+													</h3>
+												)}
+												{msg.url && (
+													<a
+														href={msg.url}
+														target="_blank"
+														rel="noopener noreferrer"
+														className="text-xs text-blue-400 hover:underline break-all block"
+													>
+														{msg.url}
+													</a>
+												)}
+												{msg.title === "Likes" && msg.description && (
+													<p className="text-xs text-white/70 mt-1">
+														{msg.description}
+													</p>
+												)}
+											</div>
+										)}
 										{msg.type === "memory" && (
 											<div className="space-y-2 w-full max-h-60 overflow-y-auto scrollbar-thin">
 												{msg.memories?.map((memory) => (
@@ -383,7 +447,7 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 						{isLoading && (
 							<div className="flex items-center gap-2 text-foreground/50">
 								<NovaOrb size={28} className="blur-none!" />
-								<span className="text-sm">Fetching your memories...</span>
+								<span className="text-sm">Extracting memories...</span>
 							</div>
 						)}
 					</div>
diff --git a/apps/web/app/new/onboarding/setup/header.tsx b/apps/web/components/new/onboarding/setup/header.tsx
index 4981c6aa..4981c6aa 100644
--- a/apps/web/app/new/onboarding/setup/header.tsx
+++ b/apps/web/components/new/onboarding/setup/header.tsx
diff --git a/apps/web/app/new/onboarding/setup/integrations-step.tsx b/apps/web/components/new/onboarding/setup/integrations-step.tsx
index ff1ce96f..49e3062a 100644
--- a/apps/web/app/new/onboarding/setup/integrations-step.tsx
+++ b/apps/web/components/new/onboarding/setup/integrations-step.tsx
@@ -3,10 +3,10 @@
 import { useState } from "react"
 import { Button } from "@ui/components/button"
 import { MCPDetailView } from "@/components/new/mcp-modal/mcp-detail-view"
-import { XBookmarksDetailView } from "@/components/x-bookmarks-detail-view"
+import { XBookmarksDetailView } from "@/components/new/onboarding/x-bookmarks-detail-view"
 import { useRouter } from "next/navigation"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { useOnboardingStorage } from "@hooks/use-onboarding-storage"
 
 const integrationCards = [
@@ -164,7 +164,9 @@ export function IntegrationsStep() {
 				<Button
 					variant="link"
 					className="text-white hover:text-gray-300 hover:no-underline cursor-pointer"
-					onClick={() => router.push("/new/onboarding?flow=setup&step=relatable")}
+					onClick={() =>
+						router.push("/new/onboarding?flow=setup&step=relatable")
+					}
 				>
 					← Back
 				</Button>
diff --git a/apps/web/app/new/onboarding/setup/relatable-question.tsx b/apps/web/components/new/onboarding/setup/relatable-question.tsx
index c853985d..5fbe9bb4 100644
--- a/apps/web/app/new/onboarding/setup/relatable-question.tsx
+++ b/apps/web/components/new/onboarding/setup/relatable-question.tsx
@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "motion/react"
 import { Button } from "@ui/components/button"
 import { useRouter } from "next/navigation"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 
 const relatableOptions = [
 	{
diff --git a/apps/web/app/new/onboarding/welcome/continue-step.tsx b/apps/web/components/new/onboarding/welcome/continue-step.tsx
index eefab753..86b4593a 100644
--- a/apps/web/app/new/onboarding/welcome/continue-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/continue-step.tsx
@@ -1,4 +1,4 @@
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
 import { motion } from "motion/react"
diff --git a/apps/web/app/new/onboarding/welcome/features-step.tsx b/apps/web/components/new/onboarding/welcome/features-step.tsx
index 6d15e2f8..2671efc1 100644
--- a/apps/web/app/new/onboarding/welcome/features-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/features-step.tsx
@@ -2,7 +2,7 @@ import { motion } from "motion/react"
 import { Button } from "@ui/components/button"
 import { useRouter } from "next/navigation"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 
 export function FeaturesStep() {
 	const router = useRouter()
diff --git a/apps/web/app/new/onboarding/welcome/greeting-step.tsx b/apps/web/components/new/onboarding/welcome/greeting-step.tsx
index 744e3719..744e3719 100644
--- a/apps/web/app/new/onboarding/welcome/greeting-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/greeting-step.tsx
diff --git a/apps/web/app/new/onboarding/welcome/input-step.tsx b/apps/web/components/new/onboarding/welcome/input-step.tsx
index 077d4944..077d4944 100644
--- a/apps/web/app/new/onboarding/welcome/input-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/input-step.tsx
diff --git a/apps/web/app/new/onboarding/welcome/memories-step.tsx b/apps/web/components/new/onboarding/welcome/profile-step.tsx
index 4230f510..65eb21c6 100644
--- a/apps/web/app/new/onboarding/welcome/memories-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/profile-step.tsx
@@ -3,9 +3,15 @@ import { Button } from "@ui/components/button"
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
+import {
+	parseXHandle,
+	parseLinkedInHandle,
+	toXProfileUrl,
+	toLinkedInProfileUrl,
+} from "@/lib/url-helpers"
 
-interface MemoriesStepProps {
+interface ProfileStepProps {
 	onSubmit: (data: {
 		twitter: string
 		linkedin: string
@@ -19,7 +25,7 @@ type ValidationError = {
 	linkedin: string | null
 }
 
-export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
+export function ProfileStep({ onSubmit }: ProfileStepProps) {
 	const router = useRouter()
 	const [otherLinks, setOtherLinks] = useState([""])
 	const [twitterHandle, setTwitterHandle] = useState("")
@@ -43,63 +49,43 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 		setOtherLinks(updated)
 	}
 
-	const validateTwitterLink = (value: string): string | null => {
-		if (!value.trim()) return null
+	const validateTwitterHandle = (handle: string): string | null => {
+		if (!handle.trim()) return null
 
-		const normalized = value.trim().toLowerCase()
-		const isXDomain =
-			normalized.includes("x.com") || normalized.includes("twitter.com")
-
-		if (!isXDomain) {
-			return "share your X profile link"
-		}
-
-		// Check if it's a profile link (not a status/tweet link)
-		const profilePattern =
-			/^(https?:\/\/)?(www\.)?(x\.com|twitter\.com)\/[^\/]+$/
-		const statusPattern = /\/status\//i
-
-		if (statusPattern.test(normalized) || !profilePattern.test(normalized)) {
-			return "share your X profile link"
+		// Basic validation: handle should be alphanumeric, underscore, or hyphen
+		// X/Twitter handles can contain letters, numbers, and underscores, max 15 chars
+		const handlePattern = /^[a-zA-Z0-9_]{1,15}$/
+		if (!handlePattern.test(handle.trim())) {
+			return "Enter your handle or profile link"
 		}
 
-		// Note: 404 validation would require a backend API endpoint
-		// Format validation is handled above
 		return null
 	}
 
-	const validateLinkedInLink = (value: string): string | null => {
-		if (!value.trim()) return null
-
-		const normalized = value.trim().toLowerCase()
-		const isLinkedInDomain = normalized.includes("linkedin.com")
-
-		if (!isLinkedInDomain) {
-			return "share your Linkedin profile link"
-		}
-
-		// Check if it's a profile link (should have /in/ or /pub/)
-		const profilePattern =
-			/^(https?:\/\/)?(www\.)?linkedin\.com\/(in|pub)\/[^\/]+/
+	const validateLinkedInHandle = (handle: string): string | null => {
+		if (!handle.trim()) return null
 
-		if (!profilePattern.test(normalized)) {
-			return "share your Linkedin profile link"
+		// Basic validation: LinkedIn handles are typically alphanumeric with hyphens
+		// They can be quite long, so we'll be lenient
+		const handlePattern = /^[a-zA-Z0-9-]+$/
+		if (!handlePattern.test(handle.trim())) {
+			return "Enter your handle or profile link"
 		}
 
-		// Note: 404 validation would require a backend API endpoint
-		// Format validation is handled above
 		return null
 	}
 
 	const handleTwitterChange = (value: string) => {
-		setTwitterHandle(value)
-		const error = validateTwitterLink(value)
+		const parsedHandle = parseXHandle(value)
+		setTwitterHandle(parsedHandle)
+		const error = validateTwitterHandle(parsedHandle)
 		setErrors((prev) => ({ ...prev, twitter: error }))
 	}
 
 	const handleLinkedInChange = (value: string) => {
-		setLinkedinProfile(value)
-		const error = validateLinkedInLink(value)
+		const parsedHandle = parseLinkedInHandle(value)
+		setLinkedinProfile(parsedHandle)
+		const error = validateLinkedInHandle(parsedHandle)
 		setErrors((prev) => ({ ...prev, linkedin: error }))
 	}
 
@@ -123,24 +109,33 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 						X/Twitter
 					</label>
 					<div className="relative flex items-center">
-						<input
-							id="twitter-handle"
-							type="text"
-							placeholder="x.com/yourhandle"
-							value={twitterHandle}
-							onChange={(e) => handleTwitterChange(e.target.value)}
-							onBlur={() => {
-								if (twitterHandle.trim()) {
-									const error = validateTwitterLink(twitterHandle)
-									setErrors((prev) => ({ ...prev, twitter: error }))
-								}
-							}}
-							className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
+						<div
+							className={`flex items-center border rounded-xl overflow-hidden h-[40px] w-full ${
 								errors.twitter
 									? "border-[#52596633] bg-[#290F0A]"
 									: "border-onboarding/20"
 							}`}
-						/>
+						>
+							<div className="px-3 py-2 bg-[#070E1B] text-white/60 text-sm border-r border-onboarding/20 whitespace-nowrap">
+								x.com/
+							</div>
+							<input
+								id="twitter-handle"
+								type="text"
+								placeholder="handle"
+								value={twitterHandle}
+								onChange={(e) => handleTwitterChange(e.target.value)}
+								onBlur={() => {
+									if (twitterHandle.trim()) {
+										const error = validateTwitterHandle(twitterHandle)
+										setErrors((prev) => ({ ...prev, twitter: error }))
+									}
+								}}
+								className={`flex-1 px-4 py-2 bg-[#070E1B] text-white placeholder-onboarding focus:outline-none transition-colors ${
+									errors.twitter ? "bg-[#290F0A]" : ""
+								}`}
+							/>
+						</div>
 						{errors.twitter && (
 							<div className="absolute left-full ml-3">
 								<div
@@ -165,24 +160,33 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 						LinkedIn
 					</label>
 					<div className="relative flex items-center">
-						<input
-							id="linkedin-profile"
-							type="text"
-							placeholder="linkedin.com/in/yourname"
-							value={linkedinProfile}
-							onChange={(e) => handleLinkedInChange(e.target.value)}
-							onBlur={() => {
-								if (linkedinProfile.trim()) {
-									const error = validateLinkedInLink(linkedinProfile)
-									setErrors((prev) => ({ ...prev, linkedin: error }))
-								}
-							}}
-							className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
+						<div
+							className={`flex items-center border rounded-xl overflow-hidden h-[40px] w-full ${
 								errors.linkedin
 									? "border-[#52596633] bg-[#290F0A]"
 									: "border-onboarding/20"
 							}`}
-						/>
+						>
+							<div className="px-3 py-2 bg-[#070E1B] text-white/60 text-sm border-r border-onboarding/20 whitespace-nowrap w-[140px]">
+								linkedin.com/in/
+							</div>
+							<input
+								id="linkedin-profile"
+								type="text"
+								placeholder="username"
+								value={linkedinProfile}
+								onChange={(e) => handleLinkedInChange(e.target.value)}
+								onBlur={() => {
+									if (linkedinProfile.trim()) {
+										const error = validateLinkedInHandle(linkedinProfile)
+										setErrors((prev) => ({ ...prev, linkedin: error }))
+									}
+								}}
+								className={`flex-1 px-4 py-2 bg-[#070E1B] text-white placeholder-onboarding focus:outline-none transition-colors ${
+									errors.linkedin ? "bg-[#290F0A]" : ""
+								}`}
+							/>
+						</div>
 						{errors.linkedin && (
 							<div className="absolute left-full ml-3">
 								<div
@@ -282,8 +286,8 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 					}}
 					onClick={() => {
 						const formData = {
-							twitter: twitterHandle,
-							linkedin: linkedinProfile,
+							twitter: toXProfileUrl(twitterHandle),
+							linkedin: toLinkedInProfileUrl(linkedinProfile),
 							description: description,
 							otherLinks: otherLinks.filter((l) => l.trim()),
 						}
diff --git a/apps/web/app/new/onboarding/welcome/welcome-step.tsx b/apps/web/components/new/onboarding/welcome/welcome-step.tsx
index 5c0d998f..5c0d998f 100644
--- a/apps/web/app/new/onboarding/welcome/welcome-step.tsx
+++ b/apps/web/components/new/onboarding/welcome/welcome-step.tsx
diff --git a/apps/web/components/x-bookmarks-detail-view.tsx b/apps/web/components/new/onboarding/x-bookmarks-detail-view.tsx
index 72befe96..acd4ebf8 100644
--- a/apps/web/components/x-bookmarks-detail-view.tsx
+++ b/apps/web/components/new/onboarding/x-bookmarks-detail-view.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from "@ui/components/button"
 import { cn } from "@lib/utils"
-import { dmSansClassName } from "@/utils/fonts"
+import { dmSansClassName } from "@/lib/fonts"
 import Image from "next/image"
 
 interface XBookmarksDetailViewProps {
@@ -27,9 +27,7 @@ const steps = [
 	},
 ]
 
-export function XBookmarksDetailView({
-	onBack,
-}: XBookmarksDetailViewProps) {
+export function XBookmarksDetailView({ onBack }: XBookmarksDetailViewProps) {
 	const handleInstall = () => {
 		window.open(
 			"https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnangednailhoegogi",
diff --git a/apps/web/components/new/settings/account.tsx b/apps/web/components/new/settings/account.tsx
index 10967947..3be01f9f 100644
--- a/apps/web/components/new/settings/account.tsx
+++ b/apps/web/components/new/settings/account.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { dmSans125ClassName } from "@/utils/fonts"
+import { dmSans125ClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { useAuth } from "@lib/auth-context"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
diff --git a/apps/web/components/new/settings/connections-mcp.tsx b/apps/web/components/new/settings/connections-mcp.tsx
index 760dcf22..5a619f65 100644
--- a/apps/web/components/new/settings/connections-mcp.tsx
+++ b/apps/web/components/new/settings/connections-mcp.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { dmSans125ClassName } from "@/utils/fonts"
+import { dmSans125ClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { $fetch } from "@lib/api"
 import { fetchSubscriptionStatus } from "@lib/queries"
diff --git a/apps/web/components/new/settings/integrations.tsx b/apps/web/components/new/settings/integrations.tsx
index 0ce96bf7..deccf5e4 100644
--- a/apps/web/components/new/settings/integrations.tsx
+++ b/apps/web/components/new/settings/integrations.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { dmSans125ClassName } from "@/utils/fonts"
+import { dmSans125ClassName } from "@/lib/fonts"
 import { analytics } from "@/lib/analytics"
 import { cn } from "@lib/utils"
 import { authClient } from "@lib/auth"
diff --git a/apps/web/components/new/settings/support.tsx b/apps/web/components/new/settings/support.tsx
index 691f5c38..5868f356 100644
--- a/apps/web/components/new/settings/support.tsx
+++ b/apps/web/components/new/settings/support.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { dmSans125ClassName } from "@/utils/fonts"
+import { dmSans125ClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { ArrowUpRight } from "lucide-react"
 
diff --git a/apps/web/components/new/text-editor/extensions.tsx b/apps/web/components/new/text-editor/extensions.tsx
new file mode 100644
index 00000000..9db26c2b
--- /dev/null
+++ b/apps/web/components/new/text-editor/extensions.tsx
@@ -0,0 +1,92 @@
+import StarterKit from "@tiptap/starter-kit"
+import Placeholder from "@tiptap/extension-placeholder"
+import Link from "@tiptap/extension-link"
+import Image from "@tiptap/extension-image"
+import TaskList from "@tiptap/extension-task-list"
+import TaskItem from "@tiptap/extension-task-item"
+import { cx } from "class-variance-authority"
+
+const placeholder = Placeholder.configure({
+	placeholder: 'Write, paste anything or type "/" for commands...',
+})
+
+const taskList = TaskList.configure({
+	HTMLAttributes: {
+		class: cx("not-prose pl-2"),
+	},
+})
+
+const taskItem = TaskItem.configure({
+	HTMLAttributes: {
+		class: cx("flex items-start my-4"),
+	},
+	nested: true,
+})
+
+const link = Link.configure({
+	HTMLAttributes: {
+		class: cx(
+			"text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
+		),
+	},
+	openOnClick: false,
+})
+
+const image = Image.configure({
+	HTMLAttributes: {
+		class: cx("rounded-lg border border-muted"),
+	},
+})
+
+const starterKit = StarterKit.configure({
+	bulletList: {
+		HTMLAttributes: {
+			class: cx("list-disc list-outside leading-3 -mt-2"),
+		},
+	},
+	orderedList: {
+		HTMLAttributes: {
+			class: cx("list-decimal list-outside leading-3 -mt-2"),
+		},
+	},
+	listItem: {
+		HTMLAttributes: {
+			class: cx("leading-normal -mb-2"),
+		},
+	},
+	blockquote: {
+		HTMLAttributes: {
+			class: cx("border-l-4 border-primary"),
+		},
+	},
+	codeBlock: {
+		HTMLAttributes: {
+			class: cx("rounded-sm bg-muted border p-5 font-mono font-medium"),
+		},
+	},
+	code: {
+		HTMLAttributes: {
+			class: cx("rounded-md bg-muted  px-1.5 py-1 font-mono font-medium"),
+			spellcheck: "false",
+		},
+	},
+	horizontalRule: {
+		HTMLAttributes: {
+			class: cx("mt-4 mb-6 border-t border-muted-foreground"),
+		},
+	},
+	dropcursor: {
+		color: "#DBEAFE",
+		width: 4,
+	},
+	gapcursor: false,
+})
+
+export const defaultExtensions = [
+	starterKit,
+	placeholder,
+	link,
+	image,
+	taskList,
+	taskItem,
+]
diff --git a/apps/web/components/new/text-editor/index.tsx b/apps/web/components/new/text-editor/index.tsx
new file mode 100644
index 00000000..6446863d
--- /dev/null
+++ b/apps/web/components/new/text-editor/index.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import { useEditor, EditorContent } from "@tiptap/react"
+import { BubbleMenu } from "@tiptap/react/menus"
+import type { Editor } from "@tiptap/core"
+import { Markdown } from "@tiptap/markdown"
+import { useRef, useEffect, useCallback } from "react"
+import { defaultExtensions } from "./extensions"
+import { slashCommand } from "./suggestions"
+import { Bold, Italic, Code } from "lucide-react"
+import { useDebouncedCallback } from "use-debounce"
+import { cn } from "@lib/utils"
+
+const extensions = [...defaultExtensions, slashCommand, Markdown]
+
+export function TextEditor({
+	content: initialContent,
+	onContentChange,
+	onSubmit,
+}: {
+	content: string | undefined
+	onContentChange: (content: string) => void
+	onSubmit: () => void
+}) {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const editorRef = useRef<Editor | null>(null)
+	const onSubmitRef = useRef(onSubmit)
+	const hasUserEditedRef = useRef(false)
+
+	useEffect(() => {
+		onSubmitRef.current = onSubmit
+	}, [onSubmit])
+
+	const debouncedUpdates = useDebouncedCallback((editor: Editor) => {
+		if (!hasUserEditedRef.current) return
+		const json = editor.getJSON()
+		const markdown = editor.storage.markdown?.manager?.serialize(json) ?? ""
+		onContentChange?.(markdown)
+	}, 500)
+
+	const editor = useEditor({
+		extensions,
+		content: initialContent,
+		contentType: "markdown",
+		immediatelyRender: true,
+		onCreate: ({ editor }) => {
+			editorRef.current = editor
+		},
+		onUpdate: ({ editor }) => {
+			editorRef.current = editor
+			debouncedUpdates(editor)
+		},
+		editorProps: {
+			handleKeyDown: (_view, event) => {
+				if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+					event.preventDefault()
+					onSubmitRef.current?.()
+					return true
+				}
+				hasUserEditedRef.current = true
+				return false
+			},
+			handleTextInput: () => {
+				hasUserEditedRef.current = true
+				return false
+			},
+			handlePaste: () => {
+				hasUserEditedRef.current = true
+				return false
+			},
+			handleDrop: () => {
+				hasUserEditedRef.current = true
+				return false
+			},
+		},
+	})
+
+	useEffect(() => {
+		if (editor && initialContent) {
+			hasUserEditedRef.current = false
+			editor.commands.setContent(initialContent, { contentType: "markdown" })
+		}
+	}, [editor, initialContent])
+
+	const handleClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>) => {
+			const target = e.target as HTMLElement
+			if (target.closest(".ProseMirror")) {
+				return
+			}
+			if (target.closest("button, a")) {
+				return
+			}
+
+			const proseMirror = containerRef.current?.querySelector(
+				".ProseMirror",
+			) as HTMLElement
+			if (proseMirror && editorRef.current) {
+				setTimeout(() => {
+					proseMirror.focus()
+					editorRef.current?.commands.focus("end")
+				}, 0)
+			}
+		},
+		[],
+	)
+
+	useEffect(() => {
+		return () => {
+			editor?.destroy()
+		}
+	}, [editor])
+
+	return (
+		<>
+			{/* biome-ignore lint/a11y/useSemanticElements: div is needed as container for editor, cannot use button */}
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: we need to use a div to get the focus on the editor */}
+			<div
+				role="button"
+				tabIndex={0}
+				ref={containerRef}
+				onClick={handleClick}
+				className="w-full h-full outline-none prose prose-invert max-w-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:focus:outline-none [&_.ProseMirror-focused]:outline-none text-editor-prose cursor-text"
+			>
+				<EditorContent editor={editor} />
+			</div>
+			{editor && (
+				<BubbleMenu
+					editor={editor}
+					options={{ placement: "bottom-start", offset: 8 }}
+				>
+					<div className="flex items-center gap-1 rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]">
+						<button
+							type="button"
+							onClick={() =>
+								editor.chain().focus().toggleBold().run()
+							}
+							className={cn(
+								"flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]",
+								editor.isActive("bold") && "bg-[#2e353d]",
+							)}
+						>
+							<Bold size={16} />
+						</button>
+						<button
+							type="button"
+							onClick={() =>
+								editor.chain().focus().toggleItalic().run()
+							}
+							className={cn(
+								"flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]",
+								editor.isActive("italic") && "bg-[#2e353d]",
+							)}
+						>
+							<Italic size={16} />
+						</button>
+						<button
+							type="button"
+							onClick={() =>
+								editor.chain().focus().toggleCode().run()
+							}
+							className={cn(
+								"flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]",
+								editor.isActive("code") && "bg-[#2e353d]",
+							)}
+						>
+							<Code size={16} />
+						</button>
+					</div>
+				</BubbleMenu>
+			)}
+		</>
+	)
+}
diff --git a/apps/web/components/new/text-editor/slash-command.tsx b/apps/web/components/new/text-editor/slash-command.tsx
new file mode 100644
index 00000000..31991093
--- /dev/null
+++ b/apps/web/components/new/text-editor/slash-command.tsx
@@ -0,0 +1,308 @@
+"use client"
+
+import { Extension, type Editor, type Range } from "@tiptap/core"
+import Suggestion, { type SuggestionOptions } from "@tiptap/suggestion"
+import { useEffect, useLayoutEffect, useState, useRef } from "react"
+import { createPortal } from "react-dom"
+import { createRoot, type Root } from "react-dom/client"
+import {
+	useFloating,
+	offset,
+	flip,
+	shift,
+	autoUpdate,
+} from "@floating-ui/react"
+import { cn } from "@lib/utils"
+
+export interface SuggestionItem {
+	title: string
+	description: string
+	searchTerms?: string[]
+	icon: React.ReactNode
+	command: (props: { editor: Editor; range: Range }) => void
+}
+
+interface CommandListProps {
+	items: SuggestionItem[]
+	command: (item: SuggestionItem) => void
+	selectedIndex: number
+}
+
+function CommandList({ items, command, selectedIndex }: CommandListProps) {
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		const selectedElement = containerRef.current?.querySelector(
+			`[data-index="${selectedIndex}"]`,
+		)
+		selectedElement?.scrollIntoView({ block: "nearest" })
+	}, [selectedIndex])
+
+	if (items.length === 0) {
+		return (
+			<div className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]">
+				<div className="px-2 text-muted-foreground">No results</div>
+			</div>
+		)
+	}
+
+	return (
+		<div
+			ref={containerRef}
+			className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]"
+		>
+			{items.map((item, index) => (
+				<button
+					type="button"
+					key={item.title}
+					data-index={index}
+					onClick={() => command(item)}
+					className={cn(
+						"flex w-full items-center gap-2 rounded-[4px] px-3 py-2 text-left hover:bg-[#2e353d]",
+						index === selectedIndex && "bg-[#2e353d]",
+					)}
+				>
+					<div className="flex size-[20px] shrink-0 items-center justify-center text-[#fafafa]">
+						{item.icon}
+					</div>
+					<p className="font-medium text-[16px] leading-[1.35] tracking-[-0.16px] text-[#fafafa]">
+						{item.title}
+					</p>
+				</button>
+			))}
+		</div>
+	)
+}
+
+interface CommandMenuProps {
+	items: SuggestionItem[]
+	command: (item: SuggestionItem) => void
+	clientRect: (() => DOMRect | null) | null
+	selectedIndex: number
+}
+
+function CommandMenu({
+	items,
+	command,
+	clientRect,
+	selectedIndex,
+}: CommandMenuProps) {
+	const [mounted, setMounted] = useState(false)
+
+	const { refs, floatingStyles } = useFloating({
+		placement: "bottom-start",
+		middleware: [offset(8), flip(), shift()],
+		whileElementsMounted: autoUpdate,
+	})
+
+	useLayoutEffect(() => {
+		setMounted(true)
+	}, [])
+
+	useEffect(() => {
+		const rect = clientRect?.()
+		if (rect) {
+			refs.setReference({
+				getBoundingClientRect: () => rect,
+			})
+		}
+	}, [clientRect, refs])
+
+	if (!mounted) return null
+
+	return createPortal(
+		<div ref={refs.setFloating} style={floatingStyles} className="z-50">
+			<CommandList
+				items={items}
+				command={command}
+				selectedIndex={selectedIndex}
+			/>
+		</div>,
+		document.body,
+	)
+}
+
+export function createSlashCommand(items: SuggestionItem[]) {
+	let component: {
+		updateProps: (props: CommandMenuProps) => void
+		destroy: () => void
+		element: HTMLElement
+	} | null = null
+	let root: Root | null = null
+	let selectedIndex = 0
+	let currentItems: SuggestionItem[] = []
+
+	const renderMenu = (props: {
+		items: SuggestionItem[]
+		command: (item: SuggestionItem) => void
+		clientRect: (() => DOMRect | null) | null
+	}) => {
+		root?.render(
+			<CommandMenu
+				items={props.items}
+				command={props.command}
+				clientRect={props.clientRect}
+				selectedIndex={selectedIndex}
+			/>,
+		)
+	}
+
+	const suggestion: Omit<SuggestionOptions<SuggestionItem>, "editor"> = {
+		char: "/",
+		items: ({ query }) => {
+			return items.filter(
+				(item) =>
+					item.title.toLowerCase().includes(query.toLowerCase()) ||
+					item.searchTerms?.some((term) =>
+						term.toLowerCase().includes(query.toLowerCase()),
+					),
+			)
+		},
+		command: ({ editor, range, props }) => {
+			props.command({ editor, range })
+		},
+		render: () => {
+			let currentCommand: ((item: SuggestionItem) => void) | null = null
+			let currentClientRect: (() => DOMRect | null) | null = null
+
+			return {
+				onStart: (props) => {
+					selectedIndex = 0
+					currentItems = props.items as SuggestionItem[]
+					currentCommand = props.command as (
+						item: SuggestionItem,
+					) => void
+					currentClientRect = props.clientRect ?? null
+
+					const element = document.createElement("div")
+					document.body.appendChild(element)
+
+					root = createRoot(element)
+					if (currentCommand) {
+						renderMenu({
+							items: currentItems,
+							command: currentCommand,
+							clientRect: currentClientRect,
+						})
+					}
+
+					component = {
+						element,
+						updateProps: (newProps: CommandMenuProps) => {
+							root?.render(
+								<CommandMenu
+									items={newProps.items}
+									command={newProps.command}
+									clientRect={newProps.clientRect}
+									selectedIndex={newProps.selectedIndex}
+								/>,
+							)
+						},
+						destroy: () => {
+							root?.unmount()
+							element.remove()
+							root = null
+						},
+					}
+				},
+
+				onUpdate: (props) => {
+					currentItems = props.items as SuggestionItem[]
+					currentCommand = props.command as (
+						item: SuggestionItem,
+					) => void
+					currentClientRect = props.clientRect ?? null
+
+					if (selectedIndex >= currentItems.length) {
+						selectedIndex = Math.max(0, currentItems.length - 1)
+					}
+
+					if (currentCommand) {
+						component?.updateProps({
+							items: currentItems,
+							command: currentCommand,
+							clientRect: currentClientRect,
+							selectedIndex,
+						})
+					}
+				},
+
+				onKeyDown: (props) => {
+					const { event } = props
+
+					if (event.key === "Escape") {
+						component?.destroy()
+						component = null
+						return true
+					}
+
+					if (event.key === "ArrowUp") {
+						selectedIndex =
+							selectedIndex <= 0
+								? currentItems.length - 1
+								: selectedIndex - 1
+						if (currentCommand) {
+							component?.updateProps({
+								items: currentItems,
+								command: currentCommand,
+								clientRect: currentClientRect,
+								selectedIndex,
+							})
+						}
+						return true
+					}
+
+					if (event.key === "ArrowDown") {
+						selectedIndex =
+							selectedIndex >= currentItems.length - 1
+								? 0
+								: selectedIndex + 1
+						if (currentCommand) {
+							component?.updateProps({
+								items: currentItems,
+								command: currentCommand,
+								clientRect: currentClientRect,
+								selectedIndex,
+							})
+						}
+						return true
+					}
+
+					if (event.key === "Enter") {
+						const item = currentItems[selectedIndex]
+						if (item && currentCommand) {
+							currentCommand(item)
+						}
+						return true
+					}
+
+					return false
+				},
+
+				onExit: () => {
+					component?.destroy()
+					component = null
+				},
+			}
+		},
+	}
+
+	return Extension.create({
+		name: "slashCommand",
+
+		addOptions() {
+			return {
+				suggestion,
+			}
+		},
+
+		addProseMirrorPlugins() {
+			return [
+				Suggestion({
+					editor: this.editor,
+					...this.options.suggestion,
+				}),
+			]
+		},
+	})
+}
diff --git a/apps/web/components/new/text-editor/suggestions.tsx b/apps/web/components/new/text-editor/suggestions.tsx
new file mode 100644
index 00000000..d31f7732
--- /dev/null
+++ b/apps/web/components/new/text-editor/suggestions.tsx
@@ -0,0 +1,103 @@
+import {
+	Heading1,
+	Heading2,
+	Heading3,
+	List,
+	ListOrdered,
+	TextQuote,
+	Text,
+} from "lucide-react"
+import { createSlashCommand, type SuggestionItem } from "./slash-command"
+
+export const suggestionItems: SuggestionItem[] = [
+	{
+		title: "Heading 1",
+		description: "Big section heading.",
+		searchTerms: ["title", "big", "large"],
+		icon: <Heading1 size={20} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 1 })
+				.run()
+		},
+	},
+	{
+		title: "Heading 2",
+		description: "Medium section heading.",
+		searchTerms: ["subtitle", "medium"],
+		icon: <Heading2 size={20} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 2 })
+				.run()
+		},
+	},
+	{
+		title: "Heading 3",
+		description: "Small section heading.",
+		searchTerms: ["subtitle", "small"],
+		icon: <Heading3 size={20} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 3 })
+				.run()
+		},
+	},
+	{
+		title: "Text",
+		description: "Just start typing with plain text.",
+		searchTerms: ["p", "paragraph"],
+		icon: <Text size={18} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.toggleNode("paragraph", "paragraph")
+				.run()
+		},
+	},
+	{
+		title: "Bullet List",
+		description: "Create a simple bullet list.",
+		searchTerms: ["unordered", "point"],
+		icon: <List size={20} />,
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleBulletList().run()
+		},
+	},
+	{
+		title: "Numbered List",
+		description: "Create a list with numbering.",
+		searchTerms: ["ordered"],
+		icon: <ListOrdered size={20} />,
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+		},
+	},
+	{
+		title: "Block Quote",
+		description: "Capture a quote.",
+		searchTerms: ["blockquote"],
+		icon: <TextQuote size={20} />,
+		command: ({ editor, range }) =>
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.toggleNode("paragraph", "paragraph")
+				.toggleBlockquote()
+				.run(),
+	},
+]
+
+export const slashCommand = createSlashCommand(suggestionItems)
diff --git a/apps/web/globals.css b/apps/web/globals.css
index 50f28e98..c9e5da27 100644
--- a/apps/web/globals.css
+++ b/apps/web/globals.css
@@ -88,3 +88,35 @@
 		inset 0 2px 4px rgba(0, 0, 0, 0.3),
 		inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+
+/* Disable ProseMirror focus styles */
+.ProseMirror:focus,
+.ProseMirror-focused,
+.ProseMirror:focus-visible {
+	outline: none;
+	box-shadow: none;
+	border: none;
+}
+
+/* Override prose paragraph margins for text editor */
+.text-editor-prose.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* Style placeholder for text editor */
+.text-editor-prose .ProseMirror p.is-editor-empty:first-child::before {
+	content: attr(data-placeholder);
+	float: left;
+	color: #525966;
+	pointer-events: none;
+	height: 0;
+}
+
+.text-editor-prose .ProseMirror .is-empty::before {
+	content: attr(data-placeholder);
+	float: left;
+	color: #525966;
+	pointer-events: none;
+	height: 0;
+}
diff --git a/apps/web/hooks/use-document-mutations.ts b/apps/web/hooks/use-document-mutations.ts
index 5abd7b56..f3931b5f 100644
--- a/apps/web/hooks/use-document-mutations.ts
+++ b/apps/web/hooks/use-document-mutations.ts
@@ -10,10 +10,10 @@ interface DocumentsQueryData {
 }
 
 interface UseDocumentMutationsOptions {
-	onClose: () => void
+	onClose?: () => void
 }
 
-export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) {
+export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions = {}) {
 	const queryClient = useQueryClient()
 
 	const noteMutation = useMutation({
@@ -101,7 +101,7 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) {
 			queryClient.invalidateQueries({
 				queryKey: ["documents-with-memories", variables.project],
 			})
-			onClose()
+			onClose?.()
 		},
 	})
 
@@ -184,7 +184,7 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) {
 			queryClient.invalidateQueries({
 				queryKey: ["documents-with-memories", variables.project],
 			})
-			onClose()
+			onClose?.()
 		},
 	})
 
@@ -301,7 +301,43 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) {
 			queryClient.invalidateQueries({
 				queryKey: ["documents-with-memories", variables.project],
 			})
-			onClose()
+			onClose?.()
+		},
+	})
+
+	const updateMutation = useMutation({
+		mutationFn: async ({
+			documentId,
+			content,
+		}: {
+			documentId: string
+			content: string
+		}) => {
+			const response = await $fetch(`@patch/documents/${documentId}`, {
+				body: {
+					content,
+					metadata: {
+						sm_source: "consumer",
+					},
+				},
+			})
+
+			if (response.error) {
+				throw new Error(response.error?.message || "Failed to save document")
+			}
+
+			return response.data
+		},
+		onSuccess: () => {
+			toast.success("Document saved successfully!")
+			queryClient.invalidateQueries({
+				queryKey: ["documents-with-memories"],
+			})
+		},
+		onError: (error) => {
+			toast.error("Failed to save document", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			})
 		},
 	})
 
@@ -309,5 +345,6 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) {
 		noteMutation,
 		linkMutation,
 		fileMutation,
+		updateMutation,
 	}
 }
diff --git a/apps/web/utils/fonts.ts b/apps/web/lib/fonts.ts
index dd13c6b5..dd13c6b5 100644
--- a/apps/web/utils/fonts.ts
+++ b/apps/web/lib/fonts.ts
diff --git a/apps/web/lib/url-helpers.ts b/apps/web/lib/url-helpers.ts
new file mode 100644
index 00000000..e4147a05
--- /dev/null
+++ b/apps/web/lib/url-helpers.ts
@@ -0,0 +1,190 @@
+/**
+ * Validates if a string is a valid URL.
+ */
+export const isValidUrl = (url: string): boolean => {
+	try {
+		new URL(url)
+		return true
+	} catch {
+		return false
+	}
+}
+
+/**
+ * Normalizes a URL by adding https:// prefix if missing.
+ */
+export const normalizeUrl = (url: string): string => {
+	if (!url.trim()) return ""
+	if (url.startsWith("http://") || url.startsWith("https://")) {
+		return url
+	}
+	return `https://${url}`
+}
+
+/**
+ * Checks if a URL is a Twitter/X URL.
+ */
+export const isTwitterUrl = (url: string): boolean => {
+	const normalizedUrl = url.toLowerCase()
+	return (
+		normalizedUrl.includes("twitter.com") || normalizedUrl.includes("x.com")
+	)
+}
+
+/**
+ * Checks if a URL is a LinkedIn profile URL (not a company page).
+ */
+export const isLinkedInProfileUrl = (url: string): boolean => {
+	const normalizedUrl = url.toLowerCase()
+	return (
+		normalizedUrl.includes("linkedin.com/in/") &&
+		!normalizedUrl.includes("linkedin.com/company/")
+	)
+}
+
+/**
+ * Collects and validates URLs from LinkedIn profile and other links, excluding Twitter.
+ */
+export const collectValidUrls = (
+	linkedinProfile: string,
+	otherLinks: string[],
+): string[] => {
+	const urls: string[] = []
+
+	if (linkedinProfile.trim()) {
+		const normalizedLinkedIn = normalizeUrl(linkedinProfile.trim())
+		if (
+			isValidUrl(normalizedLinkedIn) &&
+			isLinkedInProfileUrl(normalizedLinkedIn)
+		) {
+			urls.push(normalizedLinkedIn)
+		}
+	}
+
+	otherLinks
+		.filter((link) => link.trim())
+		.forEach((link) => {
+			const normalizedLink = normalizeUrl(link.trim())
+			if (isValidUrl(normalizedLink) && !isTwitterUrl(normalizedLink)) {
+				urls.push(normalizedLink)
+			}
+		})
+
+	return urls
+}
+
+/**
+ * Extracts X/Twitter handle from various input formats (URLs, handles with @, etc.).
+ */
+export function parseXHandle(input: string): string {
+	if (!input.trim()) return ""
+
+	let value = input.trim()
+
+	if (value.startsWith("@")) {
+		value = value.slice(1)
+	}
+
+	const lowerValue = value.toLowerCase()
+	if (lowerValue.includes("x.com") || lowerValue.includes("twitter.com")) {
+		try {
+			let url: URL
+			if (value.startsWith("http://") || value.startsWith("https://")) {
+				url = new URL(value)
+			} else {
+				url = new URL(`https://${value}`)
+			}
+
+			const pathSegments = url.pathname.split("/").filter(Boolean)
+			if (pathSegments.length > 0) {
+				const firstSegment = pathSegments[0]
+				if (firstSegment && firstSegment !== "status" && firstSegment !== "i") {
+					return firstSegment
+				}
+			}
+		} catch {
+			const match = value.match(/(?:x\.com|twitter\.com)\/([^/\s?#]+)/i)
+			const handle = match?.[1]
+			if (handle && handle !== "status") {
+				return handle
+			}
+		}
+	}
+
+	if (
+		value.includes("/") &&
+		!lowerValue.includes("x.com") &&
+		!lowerValue.includes("twitter.com")
+	) {
+		const parts = value.split("/").filter(Boolean)
+		const firstPart = parts[0]
+		if (firstPart) {
+			return firstPart
+		}
+	}
+
+	return value
+}
+
+/**
+ * Extracts LinkedIn handle from various input formats (URLs, handles with @, etc.).
+ */
+export function parseLinkedInHandle(input: string): string {
+	if (!input.trim()) return ""
+
+	let value = input.trim()
+
+	if (value.startsWith("@")) {
+		value = value.slice(1)
+	}
+
+	const lowerValue = value.toLowerCase()
+	if (lowerValue.includes("linkedin.com")) {
+		try {
+			let url: URL
+			if (value.startsWith("http://") || value.startsWith("https://")) {
+				url = new URL(value)
+			} else {
+				url = new URL(`https://${value}`)
+			}
+
+			const pathMatch = url.pathname.match(/\/(in|pub)\/([^/\s?#]+)/i)
+			const handle = pathMatch?.[2]
+			if (handle) {
+				return handle
+			}
+		} catch {
+			const match = value.match(/linkedin\.com\/(?:in|pub)\/([^/\s?#]+)/i)
+			const handle = match?.[1]
+			if (handle) {
+				return handle
+			}
+		}
+	}
+
+	if (value.includes("/in/") || value.includes("/pub/")) {
+		const match = value.match(/\/(?:in|pub)\/([^/\s?#]+)/i)
+		const handle = match?.[1]
+		if (handle) {
+			return handle
+		}
+	}
+
+	return value
+}
+
+/**
+ * Converts X/Twitter handle to full profile URL.
+ */
+export function toXProfileUrl(handle: string): string {
+	if (!handle.trim()) return ""
+	return `https://x.com/${handle.trim()}`
+}
+
+/**
+ * Converts LinkedIn handle to full profile URL.
+ */
+export function toLinkedInProfileUrl(handle: string): string {
+	if (!handle.trim()) return ""
+	return `https://linkedin.com/in/${handle.trim()}`
+}
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 139923e8..17f8dc4c 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -2,6 +2,19 @@ import { withSentryConfig } from "@sentry/nextjs"
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
+	transpilePackages: [
+		"@tiptap/core",
+		"@tiptap/react",
+		"@tiptap/pm",
+		"@tiptap/starter-kit",
+		"@tiptap/extension-placeholder",
+		"@tiptap/extension-link",
+		"@tiptap/extension-image",
+		"@tiptap/extension-task-list",
+		"@tiptap/extension-task-item",
+		"@tiptap/suggestion",
+		"@tiptap/markdown",
+	],
 	experimental: {
 		viewTransition: true,
 		turbopackFileSystemCacheForDev: true,
diff --git a/apps/web/package.json b/apps/web/package.json
index eb744d8e..27ca7aa4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,13 +15,15 @@
     "postdeploy": "bun run sentry:sourcemaps"
   },
   "dependencies": {
-    "@ai-sdk/google": "^2.0.0-beta.13",
-    "@ai-sdk/react": "2.0.0-beta.24",
+    "@ai-sdk/google": "^3.0.9",
+    "@ai-sdk/react": "^3.0.39",
+    "@ai-sdk/xai": "^3.0.23",
     "@better-fetch/fetch": "^1.1.18",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/react": "^0.27.0",
     "@opennextjs/cloudflare": "^1.12.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
@@ -48,8 +50,19 @@
     "@tanstack/react-query-devtools": "^5.84.2",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
+    "@tiptap/core": "^3.15.3",
+    "@tiptap/extension-image": "^3.15.3",
+    "@tiptap/extension-link": "^3.15.3",
+    "@tiptap/extension-placeholder": "^3.15.3",
+    "@tiptap/extension-task-item": "^3.15.3",
+    "@tiptap/extension-task-list": "^3.15.3",
+    "@tiptap/markdown": "^3.15.3",
+    "@tiptap/pm": "^3.15.3",
+    "@tiptap/react": "^3.15.3",
+    "@tiptap/starter-kit": "^3.15.3",
+    "@tiptap/suggestion": "^3.15.3",
     "@types/dompurify": "^3.2.0",
-    "ai": "5.0.0-beta.24",
+    "ai": "^6.0.35",
     "autumn-js": "0.0.116",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -85,6 +98,7 @@
     "streamdown": "^1.1.6",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.4",
+    "use-debounce": "^10.1.0",
     "vaul": "^1.1.2",
     "zustand": "^5.0.7"
   },
diff --git a/apps/web/utils/url-helpers.ts b/apps/web/utils/url-helpers.ts
deleted file mode 100644
index 3a9ef5de..00000000
--- a/apps/web/utils/url-helpers.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export const isValidUrl = (url: string): boolean => {
-	try {
-		new URL(url)
-		return true
-	} catch {
-		return false
-	}
-}
-
-export const normalizeUrl = (url: string): string => {
-	if (!url.trim()) return ""
-	if (url.startsWith("http://") || url.startsWith("https://")) {
-		return url
-	}
-	return `https://${url}`
-}
-
-export const isTwitterUrl = (url: string): boolean => {
-	const normalizedUrl = url.toLowerCase()
-	return (
-		normalizedUrl.includes("twitter.com") || normalizedUrl.includes("x.com")
-	)
-}
-
-export const isLinkedInProfileUrl = (url: string): boolean => {
-	const normalizedUrl = url.toLowerCase()
-	return (
-		normalizedUrl.includes("linkedin.com/in/") &&
-		!normalizedUrl.includes("linkedin.com/company/")
-	)
-}
-
-export const collectValidUrls = (
-	linkedinProfile: string,
-	otherLinks: string[],
-): string[] => {
-	const urls: string[] = []
-
-	if (linkedinProfile.trim()) {
-		const normalizedLinkedIn = normalizeUrl(linkedinProfile.trim())
-		if (
-			isValidUrl(normalizedLinkedIn) &&
-			isLinkedInProfileUrl(normalizedLinkedIn)
-		) {
-			urls.push(normalizedLinkedIn)
-		}
-	}
-
-	otherLinks
-		.filter((link) => link.trim())
-		.forEach((link) => {
-			const normalizedLink = normalizeUrl(link.trim())
-			if (isValidUrl(normalizedLink) && !isTwitterUrl(normalizedLink)) {
-				urls.push(normalizedLink)
-			}
-		})
-
-	return urls
-}