From 9f5a9e580c8ebd207475e8bc3d2052ef783e1846 Mon Sep 17 00:00:00 2001
From: "vorflux[bot]" <249966464+vorflux[bot]@users.noreply.github.com>
Date: Sat, 23 May 2026 08:47:19 -0700
Subject: [PATCH 1/6] fix: graph controls gap on compact viewports + model
 selector z-index (#982)

Co-authored-by: Vorflux AI <noreply@vorflux.com>
Co-authored-by: Vedant Mahajan <vedant.04.mahajan@gmail.com>
---
 apps/web/components/chat/model-selector.tsx   |  2 +-
 packages/memory-graph/package.json            |  2 +-
 .../memory-graph/src/components/legend.tsx    |  4 --
 .../src/components/memory-graph.tsx           | 52 ++++++++++---------
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/apps/web/components/chat/model-selector.tsx b/apps/web/components/chat/model-selector.tsx
index a9dd2d45..07465e7b 100644
--- a/apps/web/components/chat/model-selector.tsx
+++ b/apps/web/components/chat/model-selector.tsx
@@ -90,7 +90,7 @@ export default function ChatModelSelector({
 	return (
 		<div
 			ref={containerRef}
-			className="relative flex min-w-0 shrink items-center gap-2"
+			className="relative z-10 flex min-w-0 shrink items-center gap-2"
 		>
 			{trigger}
 
diff --git a/packages/memory-graph/package.json b/packages/memory-graph/package.json
index fcb2667e..7d537b7d 100644
--- a/packages/memory-graph/package.json
+++ b/packages/memory-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@supermemory/memory-graph",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Interactive graph visualization component for Supermemory - visualize and explore your memory connections",
   "type": "module",
   "main": "./src/index.tsx",
diff --git a/packages/memory-graph/src/components/legend.tsx b/packages/memory-graph/src/components/legend.tsx
index 0290226e..724efdd7 100644
--- a/packages/memory-graph/src/components/legend.tsx
+++ b/packages/memory-graph/src/components/legend.tsx
@@ -200,11 +200,7 @@ export const Legend = memo(function Legend({
 	const connectionCount = edges.length
 
 	const outerStyle: React.CSSProperties = {
-		position: "absolute",
-		zIndex: 20,
 		overflow: "hidden",
-		bottom: 16,
-		left: 16,
 		width: 214,
 	}
 
diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index 110a0194..ed5ec094 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -642,11 +642,15 @@ export function MemoryGraph({
 		justifyContent: "center",
 	}
 
-	const navControlsStyle: React.CSSProperties = {
+	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: isCompactViewport ? 148 : 72,
+		bottom: 16,
 		left: 16,
-		zIndex: 15,
+		zIndex: 20,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		gap: 8,
 	}
 
 	return (
@@ -703,28 +707,26 @@ export function MemoryGraph({
 					/>
 				)}
 
-				<div>
-					{containerSize.width > 0 && (
-						<div style={navControlsStyle}>
-							<NavigationControls
-								nodes={nodes}
-								compact={isCompactViewport}
-								onAutoFit={handleAutoFit}
-								onCenter={handleCenter}
-								onZoomIn={handleZoomIn}
-								onZoomOut={handleZoomOut}
-								zoomLevel={zoomDisplay}
-								colors={colors}
-							/>
-						</div>
-					)}
-					<Legend
-						colors={colors}
-						edges={edges}
-						isLoading={isLoading}
-						nodes={nodes}
-					/>
-				</div>
+				{containerSize.width > 0 && (
+					<div style={bottomLeftStackStyle}>
+						<NavigationControls
+							nodes={nodes}
+							compact={isCompactViewport}
+							onAutoFit={handleAutoFit}
+							onCenter={handleCenter}
+							onZoomIn={handleZoomIn}
+							onZoomOut={handleZoomOut}
+							zoomLevel={zoomDisplay}
+							colors={colors}
+						/>
+						<Legend
+							colors={colors}
+							edges={edges}
+							isLoading={isLoading}
+							nodes={nodes}
+						/>
+					</div>
+				)}
 			</div>
 		</div>
 	)

From 670d8bf76e30f89152080ab29a74dd4c952a0518 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Sun, 24 May 2026 00:19:52 +0530
Subject: [PATCH 2/6] enable timeline memory selection (#990)

---
 apps/web/components/memories-grid.tsx |   3 +
 apps/web/components/timeline-view.tsx | 239 ++++++++++++++++++++------
 2 files changed, 190 insertions(+), 52 deletions(-)

diff --git a/apps/web/components/memories-grid.tsx b/apps/web/components/memories-grid.tsx
index d2f93d54..a4e7f1ba 100644
--- a/apps/web/components/memories-grid.tsx
+++ b/apps/web/components/memories-grid.tsx
@@ -775,6 +775,9 @@ export function MemoriesGrid({
 							hasNextPage={hasNextPage}
 							isFetchingNextPage={isFetchingNextPage}
 							onLoadMore={loadMoreDocuments}
+							isSelectionMode={isSelectionMode}
+							selectedDocumentIds={selectedDocumentIds}
+							onToggleSelection={onToggleSelection}
 						/>
 					) : (
 						<Masonry
diff --git a/apps/web/components/timeline-view.tsx b/apps/web/components/timeline-view.tsx
index 53213d3f..ce5d512a 100644
--- a/apps/web/components/timeline-view.tsx
+++ b/apps/web/components/timeline-view.tsx
@@ -7,7 +7,7 @@ import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
 import { SyncLogoIcon } from "@ui/assets/icons"
 import { DocumentIcon } from "@/components/document-icon"
-import { ChevronDownIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon } from "lucide-react"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -100,6 +100,39 @@ function getPreviewText(doc: DocumentWithMemories): string {
 	return doc.summary || doc.content || doc.title || ""
 }
 
+function isTemporaryId(id: string | null | undefined): boolean {
+	if (!id) return false
+	return id.startsWith("temp-") || id.startsWith("temp-file-")
+}
+
+function SelectionBox({
+	isSelected,
+	isPartial = false,
+}: {
+	isSelected: boolean
+	isPartial?: boolean
+}) {
+	return (
+		<span
+			className={cn(
+				"flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
+				isSelected
+					? "border-[#369BFD] bg-[#369BFD]"
+					: isPartial
+						? "border-[#369BFD] bg-[#369BFD]/20"
+						: "border-[#737373] bg-transparent",
+			)}
+			aria-hidden
+		>
+			{isSelected ? (
+				<CheckIcon className="size-3 text-white" strokeWidth={3} />
+			) : isPartial ? (
+				<span className="h-0.5 w-2 rounded-full bg-[#369BFD]" />
+			) : null}
+		</span>
+	)
+}
+
 // ─── Grouped data structures ─────────────────────────────────────────────────
 
 type TypeGroup = { categoryInfo: CategoryInfo; docs: DocumentWithMemories[] }
@@ -126,7 +159,7 @@ function groupDocuments(
 	}
 
 	return periodOrder.map((label) => {
-		const docs = periodMap.get(label)!
+		const docs = periodMap.get(label) ?? []
 		const categoryMap = new Map<
 			string,
 			{ info: CategoryInfo; docs: DocumentWithMemories[] }
@@ -144,9 +177,9 @@ function groupDocuments(
 
 		return {
 			label,
-			typeGroups: categoryOrder.map((key) => {
-				const entry = categoryMap.get(key)!
-				return { categoryInfo: entry.info, docs: entry.docs }
+			typeGroups: categoryOrder.flatMap((key) => {
+				const entry = categoryMap.get(key)
+				return entry ? [{ categoryInfo: entry.info, docs: entry.docs }] : []
 			}),
 		}
 	})
@@ -157,10 +190,16 @@ function groupDocuments(
 function TimelineCard({
 	doc,
 	onOpenDocument,
+	isSelectionMode = false,
+	isSelected = false,
+	onToggleSelection,
 	indent = false,
 }: {
 	doc: DocumentWithMemories
 	onOpenDocument: (doc: DocumentWithMemories) => void
+	isSelectionMode?: boolean
+	isSelected?: boolean
+	onToggleSelection?: (doc: DocumentWithMemories) => void
 	indent?: boolean
 }) {
 	const preview = getPreviewText(doc)
@@ -168,19 +207,37 @@ function TimelineCard({
 		? doc.type.charAt(0).toUpperCase() + doc.type.slice(1).replace(/_/g, " ")
 		: "Document"
 	const totalMemories = doc.memoryEntries.length
+	const canSelect = !isTemporaryId(doc.id) && !isTemporaryId(doc.customId)
+
+	const handleClick = () => {
+		if (isSelectionMode && canSelect) {
+			onToggleSelection?.(doc)
+			return
+		}
+		onOpenDocument(doc)
+	}
 
 	return (
 		<button
 			type="button"
 			className={cn(
-				"w-full text-left px-4 py-3 cursor-pointer transition-colors",
+				"relative w-full text-left px-4 py-3 cursor-pointer transition-colors",
 				indent
 					? "bg-transparent hover:bg-white/[0.04]"
 					: "rounded-2xl border border-[#252B35] bg-[#1B1F24] hover:bg-[#21262D]",
+				isSelectionMode && canSelect && "pl-10",
+				isSelectionMode && isSelected && "border-[#369BFD]/70 bg-[#00173C]/45",
 				dmSansClassName(),
 			)}
-			onClick={() => onOpenDocument(doc)}
+			onClick={handleClick}
+			aria-pressed={isSelectionMode ? isSelected : undefined}
 		>
+			{isSelectionMode && canSelect && (
+				<span className="absolute left-4 top-4">
+					<SelectionBox isSelected={isSelected} />
+				</span>
+			)}
+
 			{/* Type label */}
 			<div className="flex items-center gap-1.5 mb-2">
 				<DocumentIcon
@@ -243,15 +300,23 @@ function GroupCard({
 	isExpanded,
 	onToggle,
 	onOpenDocument,
+	isSelectionMode,
+	selectedDocumentIds,
+	onToggleSelection,
 	expandKey,
 }: {
 	group: TypeGroup
 	isExpanded: boolean
 	onToggle: () => void
 	onOpenDocument: (doc: DocumentWithMemories) => void
+	isSelectionMode: boolean
+	selectedDocumentIds: Set<string>
+	onToggleSelection?: (documentId: string) => void
 	expandKey: string
 }) {
-	const firstDoc = group.docs[0]!
+	const firstDoc = group.docs[0]
+	if (!firstDoc) return null
+
 	const preview = getPreviewText(firstDoc)
 	const count = group.docs.length
 	const { label, singularLabel } = group.categoryInfo
@@ -260,59 +325,101 @@ function GroupCard({
 		(sum, d) => sum + d.memoryEntries.length,
 		0,
 	)
+	const selectableDocs = group.docs.filter(
+		(doc) => !isTemporaryId(doc.id) && !isTemporaryId(doc.customId) && doc.id,
+	)
+	const selectedCount = selectableDocs.filter(
+		(doc) => doc.id && selectedDocumentIds.has(doc.id),
+	).length
+	const isGroupSelected =
+		selectableDocs.length > 0 && selectedCount === selectableDocs.length
+	const isGroupPartial = selectedCount > 0 && !isGroupSelected
+
+	const handleGroupSelect = () => {
+		for (const doc of selectableDocs) {
+			if (!doc.id) continue
+			const shouldToggle = isGroupSelected
+				? selectedDocumentIds.has(doc.id)
+				: !selectedDocumentIds.has(doc.id)
+			if (shouldToggle) onToggleSelection?.(doc.id)
+		}
+	}
 
 	return (
 		<div>
-			<button
-				type="button"
+			<div
 				className={cn(
-					"w-full text-left rounded-2xl px-4 py-3 cursor-pointer transition-colors",
-					"border border-[#252B35] bg-[#1B1F24] hover:bg-[#21262D]",
-					"flex items-center justify-between gap-3",
+					"flex w-full items-stretch rounded-2xl border border-[#252B35] bg-[#1B1F24] transition-colors hover:bg-[#21262D]",
 					isExpanded && "rounded-b-none border-b-transparent",
-					dmSansClassName(),
+					isSelectionMode &&
+						(isGroupSelected || isGroupPartial) &&
+						"border-[#369BFD]/70 bg-[#00173C]/45",
 				)}
-				onClick={onToggle}
-				aria-expanded={isExpanded}
 			>
-				<div className="flex items-center gap-2.5 min-w-0 flex-1">
-					<DocumentIcon
-						type={firstDoc.type}
-						source={firstDoc.source ?? undefined}
-						url={firstDoc.url ?? undefined}
-						className="size-3.5 shrink-0 opacity-60"
-					/>
-					<span className="text-[13px] text-white/75 font-medium whitespace-nowrap shrink-0">
-						{countLabel}
-					</span>
-					{preview && (
-						<span className="text-[12px] text-white/35 truncate">
-							· {preview}
-						</span>
-					)}
-					{totalMemories > 0 && (
-						<span
-							className="text-[11px] font-medium shrink-0 ml-auto"
-							style={{
-								background:
-									"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
-								backgroundClip: "text",
-								WebkitBackgroundClip: "text",
-								WebkitTextFillColor: "transparent",
-							}}
-						>
-							{totalMemories}
-						</span>
-					)}
-				</div>
+				{isSelectionMode && selectableDocs.length > 0 && (
+					<button
+						type="button"
+						className="flex shrink-0 items-start px-4 py-4 cursor-pointer"
+						onClick={handleGroupSelect}
+						aria-label={isGroupSelected ? "Deselect group" : "Select group"}
+						aria-pressed={isGroupSelected}
+					>
+						<SelectionBox
+							isSelected={isGroupSelected}
+							isPartial={isGroupPartial}
+						/>
+					</button>
+				)}
 
-				<ChevronDownIcon
+				<button
+					type="button"
 					className={cn(
-						"size-3.5 text-white/20 shrink-0 transition-transform duration-200",
-						isExpanded && "rotate-180",
+						"flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 py-3 pr-4 text-left",
+						isSelectionMode && selectableDocs.length > 0 ? "pl-0" : "pl-4",
+						dmSansClassName(),
 					)}
-				/>
-			</button>
+					onClick={onToggle}
+					aria-expanded={isExpanded}
+				>
+					<div className="flex items-center gap-2.5 min-w-0 flex-1">
+						<DocumentIcon
+							type={firstDoc.type}
+							source={firstDoc.source ?? undefined}
+							url={firstDoc.url ?? undefined}
+							className="size-3.5 shrink-0 opacity-60"
+						/>
+						<span className="text-[13px] text-white/75 font-medium whitespace-nowrap shrink-0">
+							{countLabel}
+						</span>
+						{preview && (
+							<span className="text-[12px] text-white/35 truncate">
+								· {preview}
+							</span>
+						)}
+						{totalMemories > 0 && (
+							<span
+								className="text-[11px] font-medium shrink-0 ml-auto"
+								style={{
+									background:
+										"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+									backgroundClip: "text",
+									WebkitBackgroundClip: "text",
+									WebkitTextFillColor: "transparent",
+								}}
+							>
+								{totalMemories}
+							</span>
+						)}
+					</div>
+
+					<ChevronDownIcon
+						className={cn(
+							"size-3.5 text-white/20 shrink-0 transition-transform duration-200",
+							isExpanded && "rotate-180",
+						)}
+					/>
+				</button>
+			</div>
 
 			{isExpanded && (
 				<div
@@ -324,6 +431,11 @@ function GroupCard({
 							key={doc.id}
 							doc={doc}
 							onOpenDocument={onOpenDocument}
+							isSelectionMode={isSelectionMode}
+							isSelected={doc.id ? selectedDocumentIds.has(doc.id) : false}
+							onToggleSelection={(doc) => {
+								if (doc.id) onToggleSelection?.(doc.id)
+							}}
 							indent
 						/>
 					))}
@@ -341,6 +453,9 @@ interface TimelineViewProps {
 	hasNextPage?: boolean
 	isFetchingNextPage?: boolean
 	onLoadMore?: () => void
+	isSelectionMode?: boolean
+	selectedDocumentIds?: Set<string>
+	onToggleSelection?: (documentId: string) => void
 }
 
 export function TimelineView({
@@ -349,6 +464,9 @@ export function TimelineView({
 	hasNextPage,
 	isFetchingNextPage,
 	onLoadMore,
+	isSelectionMode = false,
+	selectedDocumentIds = new Set(),
+	onToggleSelection,
 }: TimelineViewProps) {
 	const [now] = useState(() => new Date())
 	const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set())
@@ -378,6 +496,12 @@ export function TimelineView({
 	}, [])
 
 	const periodGroups = groupDocuments(documents, now)
+	const handleTimelineCardSelection = useCallback(
+		(doc: DocumentWithMemories) => {
+			if (doc.id) onToggleSelection?.(doc.id)
+		},
+		[onToggleSelection],
+	)
 
 	return (
 		<div
@@ -399,11 +523,19 @@ export function TimelineView({
 							const expandKey = `${period.label}::${group.categoryInfo.key}`
 
 							if (group.docs.length === 1) {
+								const doc = group.docs[0]
+								if (!doc) return null
+
 								return (
 									<TimelineCard
 										key={expandKey}
-										doc={group.docs[0]!}
+										doc={doc}
 										onOpenDocument={onOpenDocument}
+										isSelectionMode={isSelectionMode}
+										isSelected={
+											doc.id ? selectedDocumentIds.has(doc.id) : false
+										}
+										onToggleSelection={handleTimelineCardSelection}
 									/>
 								)
 							}
@@ -416,6 +548,9 @@ export function TimelineView({
 									isExpanded={expandedGroups.has(expandKey)}
 									onToggle={() => toggleGroup(expandKey)}
 									onOpenDocument={onOpenDocument}
+									isSelectionMode={isSelectionMode}
+									selectedDocumentIds={selectedDocumentIds}
+									onToggleSelection={onToggleSelection}
 								/>
 							)
 						})}

From a8d36df38e8321ebd8e71969485a4537721a2b18 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Sun, 24 May 2026 00:24:17 +0530
Subject: [PATCH 3/6] Improve quick note editor interactions & fix filter chips
 responsiveness (#989)

---
 apps/web/components/memories-grid.tsx         |  18 +-
 apps/web/components/quick-note-card.tsx       | 400 +++++++++++++-----
 .../web/components/text-editor/extensions.tsx |  30 +-
 apps/web/components/text-editor/index.tsx     |  24 +-
 .../components/text-editor/slash-command.tsx  |   2 +-
 5 files changed, 356 insertions(+), 118 deletions(-)

diff --git a/apps/web/components/memories-grid.tsx b/apps/web/components/memories-grid.tsx
index a4e7f1ba..29d8b0e8 100644
--- a/apps/web/components/memories-grid.tsx
+++ b/apps/web/components/memories-grid.tsx
@@ -394,11 +394,14 @@ export function MemoriesGrid({
 		return items
 	}, [documents, isMobile, hasQuickNote, isSelectionMode, selectedDocumentIds])
 
-	// Stable key for Masonry based on document IDs, not item values
+	// Reset Masonry when the actual rendered item set changes. Masonic caches
+	// positions by index, so mobile removing the quick note must remount it.
 	const masonryKey = useMemo(() => {
-		const docIds = documents.map((d) => d.id).join(",")
-		return `masonry-${documents.length}-${docIds}-${isChatOpen}-${hasQuickNote}`
-	}, [documents, isChatOpen, hasQuickNote])
+		const itemIds = masonryItems.map((item) => item.id).join(",")
+		return `masonry-${isMobile ? "mobile" : "desktop"}-${masonryItems.length}-${itemIds}-${isChatOpen}`
+	}, [masonryItems, isChatOpen, isMobile])
+
+	const getMasonryItemKey = useCallback((item: MasonryItem) => item.id, [])
 
 	const isLoadingMore = isFetchingNextPage
 
@@ -542,9 +545,9 @@ export function MemoriesGrid({
 			{!isEmpty && !isSelectionMode && (
 				<div
 					id="filter-pills"
-					className="flex items-center justify-between gap-4 mb-3 pr-2"
+					className="mb-3 flex flex-col gap-2 pr-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4"
 				>
-					<div className="flex flex-wrap items-center gap-1.5">
+					<div className="order-2 flex w-full min-w-0 flex-wrap items-center gap-1.5 sm:order-1">
 						<Button
 							className={cn(
 								dmSansClassName(),
@@ -577,7 +580,7 @@ export function MemoriesGrid({
 							</Button>
 						))}
 					</div>
-					<div className="flex items-center gap-2 shrink-0">
+					<div className="order-1 flex shrink-0 items-center gap-2 self-end sm:order-2 sm:self-start">
 						{/* View mode toggle — segmented control */}
 						<div
 							role="tablist"
@@ -784,6 +787,7 @@ export function MemoriesGrid({
 							key={masonryKey}
 							items={masonryItems}
 							render={renderMasonryItem}
+							itemKey={getMasonryItemKey}
 							columnGutter={0}
 							rowGutter={0}
 							columnWidth={260}
diff --git a/apps/web/components/quick-note-card.tsx b/apps/web/components/quick-note-card.tsx
index bb727734..922ee12c 100644
--- a/apps/web/components/quick-note-card.tsx
+++ b/apps/web/components/quick-note-card.tsx
@@ -1,11 +1,14 @@
 "use client"
 
-import { useRef, useCallback } from "react"
+import { useRef, useCallback, useEffect, useMemo, useState } from "react"
+import { createPortal } from "react-dom"
+import { AnimatePresence, motion } from "motion/react"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
-import { Maximize2, Plus, Loader2 } from "lucide-react"
+import { Maximize2, Plus, Loader2, X } from "lucide-react"
 import { useProject } from "@/stores"
 import { useQuickNoteDraft } from "@/stores/quick-note-draft"
+import { TextEditor } from "./text-editor"
 
 interface QuickNoteCardProps {
 	onSave: (content: string) => void
@@ -13,33 +16,74 @@ interface QuickNoteCardProps {
 	isSaving?: boolean
 }
 
+type NoteRect = {
+	left: number
+	top: number
+	width: number
+	height: number
+}
+
+function getExpandedRect(source: NoteRect): NoteRect {
+	const viewportWidth = window.innerWidth
+	const viewportHeight = window.innerHeight
+	const margin = viewportWidth < 768 ? 16 : 32
+	const availableWidth = viewportWidth - source.left - margin
+	const availableHeight = viewportHeight - source.top - margin
+	const width = Math.min(1008, Math.max(source.width, availableWidth))
+	const height = Math.min(720, Math.max(source.height, availableHeight))
+
+	return {
+		left: source.left,
+		top: source.top,
+		width,
+		height,
+	}
+}
+
 export function QuickNoteCard({
 	onSave,
 	onMaximize,
 	isSaving = false,
 }: QuickNoteCardProps) {
-	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const cardRef = useRef<HTMLDivElement>(null)
+	const wasSavingRef = useRef(isSaving)
 	const { selectedProject } = useProject()
 	const { draft, setDraft } = useQuickNoteDraft(selectedProject)
+	const [isExpanded, setIsExpanded] = useState(false)
+	const [sourceRect, setSourceRect] = useState<NoteRect | null>(null)
+	const [targetRect, setTargetRect] = useState<NoteRect | null>(null)
+	const [expandedInitialContent, setExpandedInitialContent] = useState<
+		string | undefined
+	>(undefined)
+	const [isMounted, setIsMounted] = useState(false)
 
 	const handleChange = useCallback(
-		(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-			setDraft(e.target.value)
+		(content: string) => {
+			setDraft(content)
 		},
 		[setDraft],
 	)
 
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-			if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-				e.preventDefault()
-				if (draft.trim() && !isSaving) {
-					onSave(draft)
-				}
-			}
-		},
-		[draft, isSaving, onSave],
-	)
+	const handleExpand = useCallback(() => {
+		const rect = cardRef.current?.getBoundingClientRect()
+		if (!rect) return
+
+		const nextSourceRect = {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height: rect.height,
+		}
+
+		setSourceRect(nextSourceRect)
+		setTargetRect(getExpandedRect(nextSourceRect))
+		setExpandedInitialContent(draft || undefined)
+		setIsExpanded(true)
+	}, [draft])
+
+	const handleClose = useCallback(() => {
+		setIsExpanded(false)
+	}, [])
 
 	const handleSaveClick = useCallback(() => {
 		if (draft.trim() && !isSaving) {
@@ -48,112 +92,278 @@ export function QuickNoteCard({
 	}, [draft, isSaving, onSave])
 
 	const handleMaximizeClick = useCallback(() => {
+		setIsExpanded(false)
 		onMaximize(draft)
 	}, [draft, onMaximize])
 
 	const canSave = draft.trim().length > 0 && !isSaving
+	const previewText = useMemo(() => {
+		const trimmed = draft.trim()
+		if (!trimmed) return null
+		return trimmed.replace(/\s+/g, " ")
+	}, [draft])
+
+	useEffect(() => {
+		setIsMounted(true)
+	}, [])
+
+	useEffect(() => {
+		if (!isExpanded || !sourceRect) return
+
+		const handleResize = () => setTargetRect(getExpandedRect(sourceRect))
+		window.addEventListener("resize", handleResize)
+		return () => window.removeEventListener("resize", handleResize)
+	}, [isExpanded, sourceRect])
+
+	useEffect(() => {
+		if (!isExpanded) return
+
+		const previousOverflow = document.body.style.overflow
+		document.body.style.overflow = "hidden"
+
+		const handleGlobalKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				e.preventDefault()
+				handleClose()
+			}
+		}
+
+		document.addEventListener("keydown", handleGlobalKeyDown)
+
+		return () => {
+			document.body.style.overflow = previousOverflow
+			document.removeEventListener("keydown", handleGlobalKeyDown)
+		}
+	}, [isExpanded, handleClose])
+
+	useEffect(() => {
+		if (wasSavingRef.current && !isSaving && draft.trim().length === 0) {
+			setIsExpanded(false)
+		}
+		wasSavingRef.current = isSaving
+	}, [draft, isSaving])
 
 	return (
-		<div
-			className="bg-[#1B1F24] rounded-[22px] p-1"
-			style={{
-				boxShadow:
-					"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
-			}}
-		>
+		<>
 			<div
-				id="quick-note-inner"
-				className="bg-[#0B1017] rounded-[18px] p-3 relative"
+				ref={cardRef}
+				className="bg-[#1B1F24] rounded-[22px] p-1"
 				style={{
-					boxShadow: "inset 1.421px 1.421px 4.263px 0 rgba(11, 15, 21, 0.4)",
+					boxShadow:
+						"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
 				}}
 			>
-				<button
-					type="button"
-					onClick={handleMaximizeClick}
-					className="absolute top-3 right-3 text-[#737373] hover:text-white transition-colors cursor-pointer"
-					aria-label="Expand to full screen"
-				>
-					<Maximize2 className="size-[14px]" />
-				</button>
-
-				<textarea
-					ref={textareaRef}
-					value={draft}
-					onChange={handleChange}
-					onKeyDown={handleKeyDown}
-					placeholder="Start writing..."
-					disabled={isSaving}
-					className={cn(
-						dmSansClassName(),
-						"w-full h-[120px] bg-transparent resize-none outline-none text-[12px] leading-normal text-white placeholder:text-[#737373] pr-5 disabled:opacity-50",
-					)}
-				/>
-
 				<div
-					id="quick-note-action-bar"
-					className="bg-[#1B1F24] rounded-[8px] px-2 py-1.5 flex items-center justify-center gap-8 w-full"
+					id="quick-note-inner"
+					className="bg-[#0B1017] rounded-[18px] p-3 relative"
 					style={{
-						boxShadow:
-							"0 4px 20px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.1)",
+						boxShadow: "inset 1.421px 1.421px 4.263px 0 rgba(11, 15, 21, 0.4)",
 					}}
 				>
 					<button
 						type="button"
-						onClick={handleSaveClick}
-						disabled={!canSave}
-						className={cn(
-							"flex items-center gap-1.5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-						)}
+						onClick={handleMaximizeClick}
+						className="absolute top-3 right-3 text-[#737373] hover:text-white transition-colors cursor-pointer"
+						aria-label="Open full screen note"
 					>
-						<span className="flex items-center gap-1.5">
-							{isSaving ? (
-								<Loader2 className="size-2 animate-spin text-[#fafafa]" />
-							) : (
-								<Plus className="size-2 text-[#fafafa]" />
-							)}
-							<span
-								className={cn(
-									dmSansClassName(),
-									"text-[10px] font-medium text-[#fafafa]",
-								)}
-							>
-								{isSaving ? "Saving..." : "Save note"}
-							</span>
-						</span>
+						<Maximize2 className="size-[14px]" />
+					</button>
 
-						<span
-							className={cn(
-								"bg-[rgba(33,33,33,0.5)] border border-[rgba(115,115,115,0.2)] rounded px-1 py-0.5 flex items-center gap-1 h-4",
-							)}
-						>
-							<svg
-								className="size-[10px]"
-								viewBox="0 0 9 9"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<title>Command Key</title>
-								<path
-									d="M6.67 0.42C6.34 0.42 6.02 0.55 5.78 0.78C5.55 1.02 5.42 1.34 5.42 1.67V6.67C5.42 7 5.55 7.32 5.78 7.55C6.02 7.78 6.34 7.92 6.67 7.92C7 7.92 7.32 7.78 7.55 7.55C7.78 7.32 7.92 7 7.92 6.67C7.92 6.34 7.78 6.02 7.55 5.78C7.32 5.55 7 5.42 6.67 5.42H1.67C1.34 5.42 1.02 5.55 0.78 5.78C0.55 6.02 0.42 6.34 0.42 6.67C0.42 7 0.55 7.32 0.78 7.55C1.02 7.78 1.34 7.92 1.67 7.92C2 7.92 2.32 7.78 2.55 7.55C2.78 7.32 2.92 7 2.92 6.67V1.67C2.92 1.34 2.78 1.02 2.55 0.78C2.32 0.55 2 0.42 1.67 0.42C1.34 0.42 1.02 0.55 0.78 0.78C0.55 1.02 0.42 1.34 0.42 1.67C0.42 2 0.55 2.32 0.78 2.55C1.02 2.78 1.34 2.92 1.67 2.92H6.67C7 2.92 7.32 2.78 7.55 2.55C7.78 2.32 7.92 2 7.92 1.67C7.92 1.34 7.78 1.02 7.55 0.78C7.32 0.55 7 0.42 6.67 0.42Z"
-									stroke="#737373"
-									strokeWidth="0.833333"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								/>
-							</svg>
+					<button
+						type="button"
+						onClick={handleExpand}
+						disabled={isSaving}
+						className="w-full h-[120px] cursor-text text-left disabled:cursor-not-allowed disabled:opacity-50"
+						aria-label="Expand quick note"
+					>
+						<span className="flex h-full flex-col pr-5">
 							<span
 								className={cn(
 									dmSansClassName(),
-									"text-[10px] font-medium text-[#737373]",
+									"line-clamp-4 text-[12px] leading-normal text-[#D7DEE8]",
+									!previewText && "text-[#737373]",
 								)}
 							>
-								Enter
+								{previewText ?? "Start writing..."}
 							</span>
 						</span>
 					</button>
+
+					<div
+						id="quick-note-action-bar"
+						className="bg-[#1B1F24] rounded-[8px] px-2 py-1.5 flex items-center justify-center gap-8 w-full"
+						style={{
+							boxShadow:
+								"0 4px 20px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.1)",
+						}}
+					>
+						<button
+							type="button"
+							onClick={handleSaveClick}
+							disabled={!canSave}
+							className={cn(
+								"flex items-center gap-1.5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+							)}
+						>
+							<span className="flex items-center gap-1.5">
+								{isSaving ? (
+									<Loader2 className="size-2 animate-spin text-[#fafafa]" />
+								) : (
+									<Plus className="size-2 text-[#fafafa]" />
+								)}
+								<span
+									className={cn(
+										dmSansClassName(),
+										"text-[10px] font-medium text-[#fafafa]",
+									)}
+								>
+									{isSaving ? "Saving..." : "Save note"}
+								</span>
+							</span>
+
+							<span
+								className={cn(
+									"bg-[rgba(33,33,33,0.5)] border border-[rgba(115,115,115,0.2)] rounded px-1 py-0.5 flex items-center gap-1 h-4",
+								)}
+							>
+								<svg
+									className="size-[10px]"
+									viewBox="0 0 9 9"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<title>Command Key</title>
+									<path
+										d="M6.67 0.42C6.34 0.42 6.02 0.55 5.78 0.78C5.55 1.02 5.42 1.34 5.42 1.67V6.67C5.42 7 5.55 7.32 5.78 7.55C6.02 7.78 6.34 7.92 6.67 7.92C7 7.92 7.32 7.78 7.55 7.55C7.78 7.32 7.92 7 7.92 6.67C7.92 6.34 7.78 6.02 7.55 5.78C7.32 5.55 7 5.42 6.67 5.42H1.67C1.34 5.42 1.02 5.55 0.78 5.78C0.55 6.02 0.42 6.34 0.42 6.67C0.42 7 0.55 7.32 0.78 7.55C1.02 7.78 1.34 7.92 1.67 7.92C2 7.92 2.32 7.78 2.55 7.55C2.78 7.32 2.92 7 2.92 6.67V1.67C2.92 1.34 2.78 1.02 2.55 0.78C2.32 0.55 2 0.42 1.67 0.42C1.34 0.42 1.02 0.55 0.78 0.78C0.55 1.02 0.42 1.34 0.42 1.67C0.42 2 0.55 2.32 0.78 2.55C1.02 2.78 1.34 2.92 1.67 2.92H6.67C7 2.92 7.32 2.78 7.55 2.55C7.78 2.32 7.92 2 7.92 1.67C7.92 1.34 7.78 1.02 7.55 0.78C7.32 0.55 7 0.42 6.67 0.42Z"
+										stroke="#737373"
+										strokeWidth="0.833333"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									/>
+								</svg>
+								<span
+									className={cn(
+										dmSansClassName(),
+										"text-[10px] font-medium text-[#737373]",
+									)}
+								>
+									Enter
+								</span>
+							</span>
+						</button>
+					</div>
 				</div>
 			</div>
-		</div>
+
+			{isMounted &&
+				createPortal(
+					<AnimatePresence>
+						{isExpanded && sourceRect && targetRect && (
+							<div className="fixed inset-0 z-[100]">
+								<motion.button
+									type="button"
+									aria-label="Close quick note"
+									className="absolute inset-0 cursor-default bg-[#05080D]/60 backdrop-blur-md"
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									exit={{ opacity: 0 }}
+									transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+									onClick={handleClose}
+								/>
+
+								<motion.div
+									role="dialog"
+									aria-modal="true"
+									aria-label="New quick note"
+									className="absolute overflow-hidden rounded-[22px] bg-[#1B1F24] p-1"
+									initial={sourceRect}
+									animate={targetRect}
+									exit={sourceRect}
+									transition={{
+										type: "spring",
+										stiffness: 420,
+										damping: 42,
+										mass: 0.9,
+									}}
+									style={{
+										boxShadow:
+											"0 28px 80px rgba(0, 0, 0, 0.55), 0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
+									}}
+								>
+									<div
+										className="flex size-full flex-col rounded-[18px] bg-[#0B1017]"
+										style={{
+											boxShadow:
+												"inset 1.421px 1.421px 4.263px 0 rgba(11, 15, 21, 0.4)",
+										}}
+									>
+										<header className="flex shrink-0 justify-end border-b border-[#202A36]/70 px-5 py-4 md:px-7">
+											<div className="flex items-center gap-2">
+												<button
+													type="button"
+													onClick={handleMaximizeClick}
+													className="flex size-8 items-center justify-center rounded-full text-[#737373] transition-colors hover:bg-white/5 hover:text-white cursor-pointer"
+													aria-label="Open full screen note"
+												>
+													<Maximize2 className="size-4" />
+												</button>
+												<button
+													type="button"
+													onClick={handleClose}
+													className="flex size-8 items-center justify-center rounded-full text-[#737373] transition-colors hover:bg-white/5 hover:text-white cursor-pointer"
+													aria-label="Close quick note"
+												>
+													<X className="size-4" />
+												</button>
+											</div>
+										</header>
+
+										<div className="min-h-0 flex-1 overflow-auto px-5 py-5 md:px-7 md:py-6">
+											<TextEditor
+												content={expandedInitialContent}
+												onContentChange={handleChange}
+												onSubmit={handleSaveClick}
+												debounceMs={0}
+												autoFocus
+												placeholder="Start writing..."
+											/>
+										</div>
+
+										<footer className="flex shrink-0 justify-center border-t border-[#202A36]/70 px-4 py-4">
+											<button
+												type="button"
+												onClick={handleSaveClick}
+												disabled={!canSave}
+												className={cn(
+													"bg-[#1B1F24] rounded-[8px] px-4 py-2.5 flex items-center justify-center gap-1.5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+												)}
+												style={{
+													boxShadow:
+														"0 4px 20px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.1)",
+												}}
+											>
+												{isSaving ? (
+													<Loader2 className="size-2 animate-spin text-[#fafafa]" />
+												) : (
+													<Plus className="size-2 text-[#fafafa]" />
+												)}
+												<span
+													className={cn(
+														dmSansClassName(),
+														"text-[14px] font-medium text-[#fafafa]",
+													)}
+												>
+													{isSaving ? "Saving..." : "Save note"}
+												</span>
+											</button>
+										</footer>
+									</div>
+								</motion.div>
+							</div>
+						)}
+					</AnimatePresence>,
+					document.body,
+				)}
+		</>
 	)
 }
diff --git a/apps/web/components/text-editor/extensions.tsx b/apps/web/components/text-editor/extensions.tsx
index 9db26c2b..cefbac18 100644
--- a/apps/web/components/text-editor/extensions.tsx
+++ b/apps/web/components/text-editor/extensions.tsx
@@ -6,9 +6,13 @@ 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 DEFAULT_PLACEHOLDER = 'Write, paste anything or type "/" for commands...'
+
+function createPlaceholder(placeholderText = DEFAULT_PLACEHOLDER) {
+	return Placeholder.configure({
+		placeholder: placeholderText,
+	})
+}
 
 const taskList = TaskList.configure({
 	HTMLAttributes: {
@@ -82,11 +86,15 @@ const starterKit = StarterKit.configure({
 	gapcursor: false,
 })
 
-export const defaultExtensions = [
-	starterKit,
-	placeholder,
-	link,
-	image,
-	taskList,
-	taskItem,
-]
+export function createDefaultExtensions(placeholderText?: string) {
+	return [
+		starterKit,
+		createPlaceholder(placeholderText),
+		link,
+		image,
+		taskList,
+		taskItem,
+	]
+}
+
+export const defaultExtensions = createDefaultExtensions()
diff --git a/apps/web/components/text-editor/index.tsx b/apps/web/components/text-editor/index.tsx
index 687c8065..58bd375a 100644
--- a/apps/web/components/text-editor/index.tsx
+++ b/apps/web/components/text-editor/index.tsx
@@ -4,30 +4,36 @@ 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 { useRef, useEffect, useCallback, useMemo } from "react"
+import { createDefaultExtensions } 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,
 	debounceMs = 500,
+	autoFocus = false,
+	placeholder,
 }: {
 	content: string | undefined
 	onContentChange: (content: string) => void
 	onSubmit: () => void
 	debounceMs?: number
+	autoFocus?: boolean
+	placeholder?: string
 }) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const editorRef = useRef<Editor | null>(null)
 	const onSubmitRef = useRef(onSubmit)
 	const hasUserEditedRef = useRef(false)
+	const extensions = useMemo(
+		() => [...createDefaultExtensions(placeholder), slashCommand, Markdown],
+		[placeholder],
+	)
 
 	useEffect(() => {
 		onSubmitRef.current = onSubmit
@@ -92,6 +98,16 @@ export function TextEditor({
 		}
 	}, [editor, initialContent])
 
+	useEffect(() => {
+		if (!editor || !autoFocus) return
+
+		const id = window.setTimeout(() => {
+			editor.commands.focus("end")
+		}, 0)
+
+		return () => window.clearTimeout(id)
+	}, [editor, autoFocus])
+
 	const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
 		const target = e.target as HTMLElement
 		if (target.closest(".ProseMirror")) {
diff --git a/apps/web/components/text-editor/slash-command.tsx b/apps/web/components/text-editor/slash-command.tsx
index 3b6f3a33..846b8792 100644
--- a/apps/web/components/text-editor/slash-command.tsx
+++ b/apps/web/components/text-editor/slash-command.tsx
@@ -111,7 +111,7 @@ function CommandMenu({
 	if (!mounted) return null
 
 	return createPortal(
-		<div ref={refs.setFloating} style={floatingStyles} className="z-50">
+		<div ref={refs.setFloating} style={floatingStyles} className="z-[120]">
 			<CommandList
 				items={items}
 				command={command}

From d30e53fc1c56f5f85ecb34edb69df2ef8c0c6156 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Sun, 24 May 2026 14:20:27 +0530
Subject: [PATCH 4/6] fix timeline responsiveness (#997)

---
 apps/web/components/memories-grid.tsx |  18 +-
 apps/web/components/timeline-view.tsx | 248 ++++++++++++++++++--------
 2 files changed, 184 insertions(+), 82 deletions(-)

diff --git a/apps/web/components/memories-grid.tsx b/apps/web/components/memories-grid.tsx
index 29d8b0e8..6d2f1038 100644
--- a/apps/web/components/memories-grid.tsx
+++ b/apps/web/components/memories-grid.tsx
@@ -641,27 +641,29 @@ export function MemoriesGrid({
 					id="selection-toolbar"
 					className={cn(
 						dmSansClassName(),
-						"flex items-center justify-between gap-3 mb-3 mr-2 px-3 py-2 rounded-full border border-[#2261CA33] bg-[#00173C]/40",
+						"flex items-center justify-between gap-1.5 mb-3 mr-2 px-2.5 py-2 rounded-full border border-[#2261CA33] bg-[#00173C]/40 sm:gap-3 sm:px-3",
 					)}
 				>
-					<div className="flex items-center gap-2 min-w-0">
+					<div className="flex min-w-0 shrink items-center gap-1.5 sm:gap-2">
 						<span className="flex items-center gap-1.5 text-xs text-[#FAFAFA] font-medium shrink-0">
 							<span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-[#369BFD] text-[#0B0F14] text-[11px] font-semibold">
 								{selectedDocumentIds.size}
 							</span>
-							{selectedDocumentIds.size === 1 ? "selected" : "selected"}
+							<span className="hidden sm:inline">
+								{selectedDocumentIds.size === 1 ? "selected" : "selected"}
+							</span>
 						</span>
 						{selectedDocumentIds.size === 0 && (
-							<span className="text-xs text-[#737373] truncate">
+							<span className="hidden truncate text-xs text-[#737373] sm:inline">
 								Tap documents to select
 							</span>
 						)}
 					</div>
-					<div className="flex items-center gap-1 shrink-0">
+					<div className="flex min-w-0 shrink-0 items-center gap-0.5 sm:gap-1">
 						<button
 							type="button"
 							className={cn(
-								"text-xs px-2.5 h-7 rounded-full transition-colors cursor-pointer",
+								"h-7 rounded-full px-2 text-xs transition-colors cursor-pointer sm:px-2.5",
 								allVisibleSelected
 									? "text-[#737373] hover:text-white"
 									: "text-[#FAFAFA] hover:bg-white/5",
@@ -675,7 +677,7 @@ export function MemoriesGrid({
 						<button
 							type="button"
 							className={cn(
-								"flex items-center gap-1 text-xs px-3 h-7 rounded-full transition-colors cursor-pointer",
+								"flex h-7 items-center gap-1 rounded-full px-2 text-xs transition-colors cursor-pointer sm:px-3",
 								selectedDocumentIds.size === 0 || isBulkDeleting
 									? "text-[#737373]/60 cursor-not-allowed"
 									: "text-red-400 hover:text-red-300 hover:bg-red-500/10",
@@ -695,7 +697,7 @@ export function MemoriesGrid({
 						<button
 							type="button"
 							aria-label="Exit selection mode"
-							className="flex items-center gap-1 text-xs px-3 h-7 rounded-full text-[#737373] hover:text-white hover:bg-white/5 transition-colors cursor-pointer"
+							className="flex h-7 items-center gap-1 rounded-full px-2 text-xs text-[#737373] transition-colors hover:text-white hover:bg-white/5 cursor-pointer sm:px-3"
 							onClick={onClearSelection}
 						>
 							<XIcon className="size-3" />
diff --git a/apps/web/components/timeline-view.tsx b/apps/web/components/timeline-view.tsx
index ce5d512a..18437d77 100644
--- a/apps/web/components/timeline-view.tsx
+++ b/apps/web/components/timeline-view.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useEffect, useRef, useCallback } from "react"
+import { AnimatePresence, motion } from "motion/react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
 import { cn } from "@lib/utils"
@@ -194,6 +195,7 @@ function TimelineCard({
 	isSelected = false,
 	onToggleSelection,
 	indent = false,
+	isLast = false,
 }: {
 	doc: DocumentWithMemories
 	onOpenDocument: (doc: DocumentWithMemories) => void
@@ -201,6 +203,7 @@ function TimelineCard({
 	isSelected?: boolean
 	onToggleSelection?: (doc: DocumentWithMemories) => void
 	indent?: boolean
+	isLast?: boolean
 }) {
 	const preview = getPreviewText(doc)
 	const typeLabel = doc.type
@@ -221,11 +224,13 @@ function TimelineCard({
 		<button
 			type="button"
 			className={cn(
-				"relative w-full text-left px-4 py-3 cursor-pointer transition-colors",
+				"relative w-full text-left px-3 py-3 cursor-pointer transition-colors sm:px-4",
 				indent
-					? "bg-transparent hover:bg-white/[0.04]"
-					: "rounded-2xl border border-[#252B35] bg-[#1B1F24] hover:bg-[#21262D]",
-				isSelectionMode && canSelect && "pl-10",
+					? "bg-[#121820] hover:bg-[#17202A]"
+					: "rounded-xl border border-[#252B35] bg-[#1B1F24] hover:bg-[#21262D] sm:rounded-2xl",
+				indent && !isLast && "border-b border-[#252B35]/70",
+				indent && isLast && "rounded-b-xl sm:rounded-b-2xl",
+				isSelectionMode && canSelect && "pl-14 sm:pl-16",
 				isSelectionMode && isSelected && "border-[#369BFD]/70 bg-[#00173C]/45",
 				dmSansClassName(),
 			)}
@@ -233,7 +238,7 @@ function TimelineCard({
 			aria-pressed={isSelectionMode ? isSelected : undefined}
 		>
 			{isSelectionMode && canSelect && (
-				<span className="absolute left-4 top-4">
+				<span className="absolute left-5 top-4 z-10">
 					<SelectionBox isSelected={isSelected} />
 				</span>
 			)}
@@ -346,20 +351,27 @@ function GroupCard({
 	}
 
 	return (
-		<div>
+		<div
+			className={cn(
+				"overflow-hidden rounded-xl border border-[#252B35] bg-[#1B1F24] sm:rounded-2xl",
+				isSelectionMode &&
+					(isGroupSelected || isGroupPartial) &&
+					"border-[#369BFD]/70 bg-[#00173C]/45",
+			)}
+		>
 			<div
 				className={cn(
-					"flex w-full items-stretch rounded-2xl border border-[#252B35] bg-[#1B1F24] transition-colors hover:bg-[#21262D]",
-					isExpanded && "rounded-b-none border-b-transparent",
+					"flex w-full items-stretch transition-colors hover:bg-[#21262D]",
+					isExpanded && "border-b border-[#252B35]",
 					isSelectionMode &&
 						(isGroupSelected || isGroupPartial) &&
-						"border-[#369BFD]/70 bg-[#00173C]/45",
+						"bg-[#00173C]/45",
 				)}
 			>
 				{isSelectionMode && selectableDocs.length > 0 && (
 					<button
 						type="button"
-						className="flex shrink-0 items-start px-4 py-4 cursor-pointer"
+						className="flex w-14 shrink-0 cursor-pointer items-start justify-center py-4 sm:w-16"
 						onClick={handleGroupSelect}
 						aria-label={isGroupSelected ? "Deselect group" : "Select group"}
 						aria-pressed={isGroupSelected}
@@ -374,14 +386,16 @@ function GroupCard({
 				<button
 					type="button"
 					className={cn(
-						"flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 py-3 pr-4 text-left",
-						isSelectionMode && selectableDocs.length > 0 ? "pl-0" : "pl-4",
+						"flex min-w-0 flex-1 cursor-pointer items-start justify-between gap-2 py-3 pr-3 text-left sm:items-center sm:gap-3 sm:pr-4",
+						isSelectionMode && selectableDocs.length > 0
+							? "pl-1"
+							: "pl-3 sm:pl-4",
 						dmSansClassName(),
 					)}
 					onClick={onToggle}
 					aria-expanded={isExpanded}
 				>
-					<div className="flex items-center gap-2.5 min-w-0 flex-1">
+					<div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2.5 gap-y-1">
 						<DocumentIcon
 							type={firstDoc.type}
 							source={firstDoc.source ?? undefined}
@@ -392,13 +406,13 @@ function GroupCard({
 							{countLabel}
 						</span>
 						{preview && (
-							<span className="text-[12px] text-white/35 truncate">
+							<span className="basis-full text-[12px] leading-relaxed text-white/35 line-clamp-2 sm:basis-auto sm:truncate sm:leading-normal">
 								· {preview}
 							</span>
 						)}
 						{totalMemories > 0 && (
 							<span
-								className="text-[11px] font-medium shrink-0 ml-auto"
+								className="shrink-0 text-[11px] font-medium sm:ml-auto"
 								style={{
 									background:
 										"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
@@ -414,33 +428,55 @@ function GroupCard({
 
 					<ChevronDownIcon
 						className={cn(
-							"size-3.5 text-white/20 shrink-0 transition-transform duration-200",
+							"mt-0.5 size-3.5 text-white/20 shrink-0 transition-transform duration-200 sm:mt-0",
 							isExpanded && "rotate-180",
 						)}
 					/>
 				</button>
 			</div>
 
-			{isExpanded && (
-				<div
-					id={`group-${expandKey}`}
-					className="border border-t-0 border-[#252B35] rounded-b-2xl overflow-hidden divide-y divide-[#252B35]"
-				>
-					{group.docs.map((doc) => (
-						<TimelineCard
-							key={doc.id}
-							doc={doc}
-							onOpenDocument={onOpenDocument}
-							isSelectionMode={isSelectionMode}
-							isSelected={doc.id ? selectedDocumentIds.has(doc.id) : false}
-							onToggleSelection={(doc) => {
-								if (doc.id) onToggleSelection?.(doc.id)
-							}}
-							indent
-						/>
-					))}
-				</div>
-			)}
+			<AnimatePresence initial={false}>
+				{isExpanded && (
+					<motion.div
+						id={`group-${expandKey}`}
+						className="overflow-hidden bg-[#121820] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+						initial={{ height: 0, opacity: 0, y: -4 }}
+						animate={{ height: "auto", opacity: 1, y: 0 }}
+						exit={{ height: 0, opacity: 0, y: -3 }}
+						transition={{
+							height: { duration: 0.28, ease: [0.4, 0, 0.2, 1] },
+							opacity: { duration: 0.18 },
+							y: { duration: 0.22, ease: [0.4, 0, 0.2, 1] },
+						}}
+					>
+						{group.docs.map((doc, index) => (
+							<motion.div
+								key={doc.id}
+								initial={{ opacity: 0, y: -4 }}
+								animate={{ opacity: 1, y: 0 }}
+								exit={{ opacity: 0, y: -3 }}
+								transition={{
+									duration: 0.18,
+									delay: Math.min(index * 0.025, 0.12),
+									ease: [0.4, 0, 0.2, 1],
+								}}
+							>
+								<TimelineCard
+									doc={doc}
+									onOpenDocument={onOpenDocument}
+									isSelectionMode={isSelectionMode}
+									isSelected={doc.id ? selectedDocumentIds.has(doc.id) : false}
+									onToggleSelection={(doc) => {
+										if (doc.id) onToggleSelection?.(doc.id)
+									}}
+									indent
+									isLast={index === group.docs.length - 1}
+								/>
+							</motion.div>
+						))}
+					</motion.div>
+				)}
+			</AnimatePresence>
 		</div>
 	)
 }
@@ -506,57 +542,121 @@ export function TimelineView({
 	return (
 		<div
 			className={cn(
-				"w-full max-w-[780px] mx-auto py-4 pb-12 space-y-6",
+				"w-full max-w-[820px] mx-auto py-3 pb-12 space-y-5 sm:py-4 sm:space-y-7",
 				dmSansClassName(),
 			)}
 		>
-			{periodGroups.map((period) => (
-				<div key={period.label} className="grid grid-cols-[88px_1fr] gap-x-4">
-					<div className="pt-3 text-right shrink-0">
-						<span className="text-[10px] text-white/30 font-medium uppercase tracking-[0.15em] leading-none">
-							{period.label}
-						</span>
-					</div>
+			{periodGroups.map((period, periodIndex) => {
+				const periodHasExpandedGroup = period.typeGroups.some((group) =>
+					expandedGroups.has(`${period.label}::${group.categoryInfo.key}`),
+				)
 
-					<div className="space-y-1.5 min-w-0">
-						{period.typeGroups.map((group) => {
-							const expandKey = `${period.label}::${group.categoryInfo.key}`
+				return (
+					<div
+						key={period.label}
+						className="grid grid-cols-[22px_minmax(0,1fr)] gap-x-2 gap-y-2 sm:grid-cols-[96px_24px_minmax(0,1fr)] sm:gap-x-3 sm:gap-y-0"
+					>
+						<div className="col-start-2 row-start-1 shrink-0 pt-0 sm:col-start-1 sm:row-start-1 sm:pt-3 sm:text-right">
+							<span className="inline-flex rounded-full border border-[#252B35] bg-[#0D121A] px-2.5 py-1 text-[10px] font-medium uppercase leading-none tracking-[0.15em] text-white/45 sm:border-transparent sm:bg-transparent sm:px-0 sm:py-0 sm:text-white/30">
+								{period.label}
+							</span>
+						</div>
 
-							if (group.docs.length === 1) {
-								const doc = group.docs[0]
-								if (!doc) return null
+						<div className="relative col-start-1 row-start-1 row-span-2 flex justify-center sm:col-start-2 sm:row-start-1 sm:row-span-1">
+							<div
+								className={cn(
+									"absolute top-4 bottom-[-20px] w-px bg-[#1F2835] sm:top-5 sm:bottom-[-28px]",
+									periodIndex === periodGroups.length - 1 && "bottom-2",
+								)}
+							/>
+							<motion.div
+								className={cn(
+									"absolute top-4 bottom-[-20px] w-px origin-top bg-linear-to-b from-[#369BFD] via-[#369BFD]/70 to-transparent sm:top-5 sm:bottom-[-28px]",
+									periodIndex === periodGroups.length - 1 && "bottom-2",
+								)}
+								initial={false}
+								animate={{
+									scaleY: periodHasExpandedGroup ? 1 : 0,
+									opacity: periodHasExpandedGroup ? 1 : 0,
+								}}
+								transition={{ duration: 0.34, ease: [0.4, 0, 0.2, 1] }}
+							/>
+							<motion.div
+								className="relative mt-1.5 flex size-3 items-center justify-center rounded-full border border-[#369BFD]/35 bg-[#0D121A] shadow-[0_0_0_4px_rgba(54,155,253,0.06)] sm:mt-3"
+								initial={false}
+								animate={{
+									borderColor: periodHasExpandedGroup
+										? "rgba(54,155,253,0.8)"
+										: "rgba(54,155,253,0.35)",
+									boxShadow: periodHasExpandedGroup
+										? "0 0 0 7px rgba(54,155,253,0.09)"
+										: "0 0 0 4px rgba(54,155,253,0.06)",
+								}}
+								transition={{ duration: 0.28, ease: [0.4, 0, 0.2, 1] }}
+							>
+								<AnimatePresence>
+									{periodHasExpandedGroup && (
+										<motion.div
+											className="absolute inset-[-6px] rounded-full border border-[#369BFD]/35"
+											initial={{ scale: 0.6, opacity: 0.8 }}
+											animate={{ scale: 1.45, opacity: 0 }}
+											exit={{ opacity: 0 }}
+											transition={{
+												duration: 0.52,
+												ease: [0.2, 0.8, 0.2, 1],
+											}}
+										/>
+									)}
+								</AnimatePresence>
+								<motion.div
+									className="size-1.5 rounded-full bg-[#369BFD]"
+									initial={false}
+									animate={{ scale: periodHasExpandedGroup ? 1.15 : 1 }}
+									transition={{ duration: 0.24, ease: [0.4, 0, 0.2, 1] }}
+								/>
+							</motion.div>
+						</div>
+
+						<div className="col-start-2 row-start-2 min-w-0 space-y-1.5 sm:col-start-3 sm:row-start-1">
+							{period.typeGroups.map((group) => {
+								const expandKey = `${period.label}::${group.categoryInfo.key}`
+
+								if (group.docs.length === 1) {
+									const doc = group.docs[0]
+									if (!doc) return null
+
+									return (
+										<TimelineCard
+											key={expandKey}
+											doc={doc}
+											onOpenDocument={onOpenDocument}
+											isSelectionMode={isSelectionMode}
+											isSelected={
+												doc.id ? selectedDocumentIds.has(doc.id) : false
+											}
+											onToggleSelection={handleTimelineCardSelection}
+										/>
+									)
+								}
 
 								return (
-									<TimelineCard
+									<GroupCard
 										key={expandKey}
-										doc={doc}
+										group={group}
+										expandKey={expandKey}
+										isExpanded={expandedGroups.has(expandKey)}
+										onToggle={() => toggleGroup(expandKey)}
 										onOpenDocument={onOpenDocument}
 										isSelectionMode={isSelectionMode}
-										isSelected={
-											doc.id ? selectedDocumentIds.has(doc.id) : false
-										}
-										onToggleSelection={handleTimelineCardSelection}
+										selectedDocumentIds={selectedDocumentIds}
+										onToggleSelection={onToggleSelection}
 									/>
 								)
-							}
-
-							return (
-								<GroupCard
-									key={expandKey}
-									group={group}
-									expandKey={expandKey}
-									isExpanded={expandedGroups.has(expandKey)}
-									onToggle={() => toggleGroup(expandKey)}
-									onOpenDocument={onOpenDocument}
-									isSelectionMode={isSelectionMode}
-									selectedDocumentIds={selectedDocumentIds}
-									onToggleSelection={onToggleSelection}
-								/>
-							)
-						})}
+							})}
+						</div>
 					</div>
-				</div>
-			))}
+				)
+			})}
 
 			<div ref={sentinelRef} className="h-1" />
 		</div>

From ee9c579e39a6cd09a63b3c07fd08f93ff65c01dd Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Mon, 25 May 2026 10:19:07 +0530
Subject: [PATCH 5/6] add team management in nova account settings (#984)

Co-authored-by: ved015 <vedant.04.mahajan@gmail.com>
Co-authored-by: Mahesh Sanikommu <maheshthedev@gmail.com>
---
 apps/web/components/settings/account.tsx | 971 ++++++++++++++++++++---
 packages/lib/auth-context.tsx            |   9 +
 packages/ui/components/dialog.tsx        |   2 +-
 3 files changed, 892 insertions(+), 90 deletions(-)

diff --git a/apps/web/components/settings/account.tsx b/apps/web/components/settings/account.tsx
index 57d1264b..5ec84e59 100644
--- a/apps/web/components/settings/account.tsx
+++ b/apps/web/components/settings/account.tsx
@@ -3,6 +3,7 @@
 import { dmSans125ClassName } from "@/lib/fonts"
 import { cn } from "@lib/utils"
 import { useAuth } from "@lib/auth-context"
+import { authClient } from "@lib/auth"
 import { useOrgSummaries } from "@/hooks/use-org-summaries"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
 import {
@@ -12,9 +13,41 @@ import {
 	type PlanType,
 } from "@/hooks/use-token-usage"
 import { Popover, PopoverContent, PopoverTrigger } from "@ui/components/popover"
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@ui/components/select"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@ui/components/dropdown-menu"
+import { Dialog, DialogContent, DialogTitle } from "@ui/components/dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { useCustomer } from "autumn-js/react"
-import { Check, LoaderIcon, ChevronDown, Building2, Users } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useMutation, useQuery } from "@tanstack/react-query"
+import {
+	Check,
+	LoaderIcon,
+	ChevronDown,
+	Building2,
+	Users,
+	UserPlus,
+	Mail,
+	MoreHorizontal,
+	UserMinus,
+	X,
+	Tag,
+	Plus,
+} from "lucide-react"
+import { useMemo, useRef, useState } from "react"
+import { toast } from "sonner"
+import { useContainerTags } from "@/hooks/use-container-tags"
+import { PopoverAnchor } from "@ui/components/popover"
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
 	return (
@@ -69,6 +102,21 @@ const ROLE_LABELS: Record<string, string> = {
 	member: "Member",
 }
 
+type InviteRole = "admin" | "member"
+
+function getErrorMessage(error: unknown, fallback: string) {
+	if (error instanceof Error && error.message) return error.message
+	if (
+		error &&
+		typeof error === "object" &&
+		"message" in error &&
+		typeof error.message === "string"
+	) {
+		return error.message
+	}
+	return fallback
+}
+
 function formatRole(role: string): string {
 	const r = role?.toLowerCase() ?? ""
 	if (ROLE_LABELS[r]) return ROLE_LABELS[r]
@@ -93,6 +141,17 @@ function RolePill({ role }: { role: string }) {
 	)
 }
 
+function isPendingInvitation(invitation: {
+	status?: string
+	expiresAt?: Date | string
+}) {
+	if (invitation.status && invitation.status.toLowerCase() !== "pending") {
+		return false
+	}
+	if (!invitation.expiresAt) return true
+	return new Date(invitation.expiresAt).getTime() > Date.now()
+}
+
 function resolveOrgPlan(
 	orgId: string,
 	isCurrent: boolean,
@@ -106,10 +165,45 @@ function resolveOrgPlan(
 }
 
 export default function Account() {
-	const { user, org, organizations: allOrgs, setActiveOrg } = useAuth()
+	const {
+		user,
+		org,
+		organizations: allOrgs,
+		setActiveOrg,
+		refetchActiveOrg,
+	} = useAuth()
 	const autumn = useCustomer()
 	const [switchingOrgId, setSwitchingOrgId] = useState<string | null>(null)
 	const [orgMenuOpen, setOrgMenuOpen] = useState(false)
+	const [inviteDialogOpen, setInviteDialogOpen] = useState(false)
+	const [inviteEmail, setInviteEmail] = useState("")
+	const [inviteRole, setInviteRole] = useState<InviteRole>("member")
+	const [inviteAccessType, setInviteAccessType] = useState<
+		"full" | "restricted"
+	>("full")
+	const [inviteAssignments, setInviteAssignments] = useState<
+		{ containerTag: string; permission: "read" | "write" }[]
+	>([])
+	const [tagQuery, setTagQuery] = useState("")
+	const [tagDropdownOpen, setTagDropdownOpen] = useState(false)
+	const tagInputRef = useRef<HTMLInputElement>(null)
+	const tagAnchorRef = useRef<HTMLDivElement>(null)
+	const { allProjects: allContainerTags } = useContainerTags()
+
+	const selectedTagSet = new Set(inviteAssignments.map((a) => a.containerTag))
+	const filteredTags = useMemo(() => {
+		const available = (allContainerTags ?? [])
+			.map((t) => t.containerTag)
+			.filter((t) => !selectedTagSet.has(t))
+		if (!tagQuery) return available
+		return available.filter((t) =>
+			t.toLowerCase().includes(tagQuery.toLowerCase()),
+		)
+	}, [allContainerTags, selectedTagSet, tagQuery])
+
+	const showAccessType = inviteRole === "member"
+	const showTagPicker =
+		inviteRole === "member" && inviteAccessType === "restricted"
 	const canSwitchOrg = (allOrgs?.length ?? 0) > 1
 	const { data: orgSummaries } = useOrgSummaries()
 
@@ -127,6 +221,167 @@ export default function Account() {
 
 	const { currentPlan } = useTokenUsage(autumn)
 
+	const activeMemberRoleQuery = useQuery({
+		queryKey: ["organization", org?.id, "active-member-role"],
+		queryFn: async () => {
+			if (!org?.id) return null
+			const result = await authClient.organization.getActiveMemberRole({
+				query: { organizationId: org.id },
+			})
+			if (result.error) {
+				throw new Error(result.error.message ?? "Failed to load team role")
+			}
+			return result.data?.role ?? null
+		},
+		enabled: !!org?.id,
+		retry: false,
+	})
+
+	const currentMember = useMemo(
+		() => org?.members?.find((member) => member.userId === user?.id) ?? null,
+		[org?.members, user?.id],
+	)
+	const isSingleMemberPersonalOrg =
+		(org?.members?.length ?? 0) <= 1 &&
+		(!org?.members?.[0]?.userId || org.members[0].userId === user?.id)
+	const currentRole = isSingleMemberPersonalOrg
+		? "owner"
+		: (
+				activeMemberRoleQuery.data ??
+				currentMember?.role ??
+				"member"
+			).toLowerCase()
+	const canManageTeam = currentRole === "owner" || currentRole === "admin"
+	const isOwner = currentRole === "owner"
+
+	const pendingInvitations = useMemo(
+		() => (org?.invitations ?? []).filter(isPendingInvitation),
+		[org?.invitations],
+	)
+
+	const resetInviteForm = () => {
+		setInviteEmail("")
+		setInviteRole("member")
+		setInviteAccessType("full")
+		setInviteAssignments([])
+		setTagQuery("")
+	}
+
+	const inviteMemberMutation = useMutation({
+		mutationFn: async () => {
+			if (!org?.id) throw new Error("No active organization")
+			const email = inviteEmail.trim().toLowerCase()
+			if (!email) throw new Error("Enter an email address")
+			const isRestricted =
+				inviteRole === "member" && inviteAccessType === "restricted"
+			const result = await authClient.organization.inviteMember({
+				email,
+				role: inviteRole,
+				organizationId: org.id,
+				resend: true,
+				...(isRestricted && inviteAssignments.length > 0
+					? {
+							data: {
+								accessType: "restricted",
+								containerTags: inviteAssignments,
+							},
+						}
+					: {}),
+			})
+			if (result.error) {
+				throw new Error(result.error.message ?? "Failed to invite teammate")
+			}
+			return result.data
+		},
+		onSuccess: async (invitation) => {
+			resetInviteForm()
+			setInviteDialogOpen(false)
+			await refetchActiveOrg()
+			toast.success("Invitation sent", {
+				description: invitation?.email
+					? `${invitation.email} can now join ${org?.name ?? "your organization"}.`
+					: undefined,
+			})
+		},
+		onError: (error) => {
+			toast.error(getErrorMessage(error, "Failed to invite teammate"))
+		},
+	})
+
+	const updateMemberRoleMutation = useMutation({
+		mutationFn: async ({
+			memberId,
+			role,
+		}: {
+			memberId: string
+			role: InviteRole
+		}) => {
+			if (!org?.id) throw new Error("No active organization")
+			const result = await authClient.organization.updateMemberRole({
+				memberId,
+				role,
+				organizationId: org.id,
+			})
+			if (result.error) {
+				throw new Error(result.error.message ?? "Failed to update role")
+			}
+			return result.data
+		},
+		onSuccess: async () => {
+			await refetchActiveOrg()
+			toast.success("Role updated")
+		},
+		onError: (error) => {
+			toast.error(getErrorMessage(error, "Failed to update role"))
+		},
+	})
+
+	const removeMemberMutation = useMutation({
+		mutationFn: async (memberIdOrEmail: string) => {
+			if (!org?.id) throw new Error("No active organization")
+			const result = await authClient.organization.removeMember({
+				memberIdOrEmail,
+				organizationId: org.id,
+			})
+			if (result.error) {
+				throw new Error(result.error.message ?? "Failed to remove member")
+			}
+			return result.data
+		},
+		onSuccess: async () => {
+			await refetchActiveOrg()
+			toast.success("Member removed")
+		},
+		onError: (error) => {
+			toast.error(getErrorMessage(error, "Failed to remove member"))
+		},
+	})
+
+	const cancelInvitationMutation = useMutation({
+		mutationFn: async (invitationId: string) => {
+			const result = await authClient.organization.cancelInvitation({
+				invitationId,
+			})
+			if (result.error) {
+				throw new Error(result.error.message ?? "Failed to cancel invitation")
+			}
+			return result.data
+		},
+		onSuccess: async () => {
+			await refetchActiveOrg()
+			toast.success("Invitation canceled")
+		},
+		onError: (error) => {
+			toast.error(getErrorMessage(error, "Failed to cancel invitation"))
+		},
+	})
+
+	const handleInviteSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault()
+		if (!canManageTeam || inviteMemberMutation.isPending) return
+		inviteMemberMutation.mutate()
+	}
+
 	const planByOrgId = useMemo(() => {
 		const map = new Map<string, PlanType>()
 		for (const summary of orgSummaries ?? []) {
@@ -318,118 +573,656 @@ export default function Account() {
 			</section>
 
 			<section id="team-members" className="flex flex-col gap-4">
-				<div className="flex items-center justify-between px-2">
-					<SectionTitle>Team members</SectionTitle>
-					{(org?.members?.length ?? 0) > 0 && (
-						<span
+				<div className="flex flex-wrap items-center justify-between gap-3 px-2">
+					<div className="flex flex-col gap-1">
+						<SectionTitle>Team members</SectionTitle>
+						<p
 							className={cn(
 								dmSans125ClassName(),
-								"text-[13px] tracking-[-0.13px] text-[#737373] tabular-nums pr-1",
+								"text-[13px] tracking-[-0.13px] text-[#737373] px-2",
 							)}
 						>
-							{org?.members?.length}{" "}
-							{org?.members?.length === 1 ? "member" : "members"}
-						</span>
-					)}
+							Invite people into {org?.name ?? "your organization"} and manage
+							their access.
+						</p>
+					</div>
+					<div className="flex items-center gap-3">
+						{(org?.members?.length ?? 0) > 0 && (
+							<span
+								className={cn(
+									dmSans125ClassName(),
+									"text-[13px] tracking-[-0.13px] text-[#737373] tabular-nums",
+								)}
+							>
+								{org?.members?.length}{" "}
+								{org?.members?.length === 1 ? "member" : "members"}
+							</span>
+						)}
+						{canManageTeam && (
+							<button
+								type="button"
+								onClick={() => setInviteDialogOpen(true)}
+								disabled={!org?.id}
+								className={cn(
+									dmSans125ClassName(),
+									"inline-flex h-9 items-center justify-center gap-2 rounded-full bg-[#14161A] px-4 text-[13px] font-semibold text-[#FAFAFA] shadow-inside-out transition-colors hover:bg-[#121820] disabled:cursor-not-allowed disabled:opacity-45",
+								)}
+							>
+								<UserPlus className="size-3.5" />
+								Invite member
+							</button>
+						)}
+					</div>
 				</div>
 				<SettingsCard>
-					{org?.members && org.members.length > 0 ? (
-						<ul className="flex flex-col">
-							{[...org.members]
-								.sort((a, b) => {
-									const rolePriority = (r: string) =>
-										r === "owner" ? 0 : r === "admin" ? 1 : 2
-									const diff =
-										rolePriority(a.role.toLowerCase()) -
-										rolePriority(b.role.toLowerCase())
-									if (diff !== 0) return diff
-									return (a.user?.name ?? "").localeCompare(b.user?.name ?? "")
-								})
-								.map((m, idx) => {
-									const isYou = m.userId === user?.id
-									const name = m.user?.name ?? m.user?.email ?? "Unknown"
-									return (
+					<div className="flex flex-col gap-5">
+						{!canManageTeam && (
+							<div className="flex items-center gap-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] p-3">
+								<div className="size-9 rounded-full bg-white/[0.04] flex items-center justify-center shrink-0">
+									<Users className="size-4 text-[#737373]" />
+								</div>
+								<p
+									className={cn(
+										dmSans125ClassName(),
+										"text-[13px] tracking-[-0.13px] text-[#737373]",
+									)}
+								>
+									Only organization owners and admins can invite teammates or
+									change roles.
+								</p>
+							</div>
+						)}
+
+						{pendingInvitations.length > 0 && (
+							<div className="flex flex-col gap-2">
+								<p
+									className={cn(
+										dmSans125ClassName(),
+										"text-[11px] uppercase tracking-[0.12em] text-[#737373] font-mono",
+									)}
+								>
+									Pending invitations
+								</p>
+								<ul className="flex flex-col rounded-[12px] border border-white/[0.05] overflow-hidden">
+									{pendingInvitations.map((invitation) => (
 										<li
-											key={m.id}
-											className={cn(
-												"flex items-center gap-3 py-2.5",
-												idx > 0 && "border-t border-white/[0.04]",
-											)}
+											key={invitation.id}
+											className="flex items-center gap-3 px-3 py-2.5 border-t border-white/[0.04] first:border-t-0 bg-white/[0.015]"
 										>
-											<Avatar className="size-9 shrink-0 bg-[#0D121A]">
-												<AvatarImage
-													src={m.user?.image ?? ""}
-													alt={name}
-													className="object-cover"
-												/>
-												<AvatarFallback className="bg-transparent text-white text-[13px] font-medium">
-													{(name.charAt(0) || "U").toUpperCase()}
-												</AvatarFallback>
-											</Avatar>
-											<div className="flex-1 min-w-0 flex flex-col gap-0.5">
-												<div className="flex items-center gap-2 min-w-0">
-													<span
-														className={cn(
-															dmSans125ClassName(),
-															"font-medium text-[14px] tracking-[-0.14px] text-[#FAFAFA] truncate",
-														)}
+											<div className="size-9 rounded-full bg-[#0D121A] flex items-center justify-center shrink-0">
+												<Mail className="size-4 text-[#737373]" />
+											</div>
+											<div className="min-w-0 flex-1">
+												<p
+													className={cn(
+														dmSans125ClassName(),
+														"truncate text-[14px] font-medium tracking-[-0.14px] text-[#FAFAFA]",
+													)}
+												>
+													{invitation.email}
+												</p>
+												<p
+													className={cn(
+														dmSans125ClassName(),
+														"text-[12px] tracking-[-0.12px] text-[#737373]",
+													)}
+												>
+													Invited as {formatRole(invitation.role)}
+												</p>
+											</div>
+											{canManageTeam && (
+												<div className="flex shrink-0 items-center gap-1">
+													<button
+														type="button"
+														disabled={cancelInvitationMutation.isPending}
+														onClick={() =>
+															cancelInvitationMutation.mutate(invitation.id)
+														}
+														className="flex size-8 items-center justify-center rounded-[8px] text-[#8A5247] hover:bg-[#1A0F0C]/60 hover:text-[#C73B1B] disabled:opacity-50"
+														aria-label={`Cancel invitation for ${invitation.email}`}
+														title="Cancel invitation"
 													>
-														{name}
-													</span>
-													{isYou && (
+														<X className="size-4" />
+													</button>
+												</div>
+											)}
+										</li>
+									))}
+								</ul>
+							</div>
+						)}
+
+						{org?.members && org.members.length > 0 ? (
+							<ul className="flex flex-col">
+								{[...org.members]
+									.sort((a, b) => {
+										const rolePriority = (r: string) =>
+											r === "owner" ? 0 : r === "admin" ? 1 : 2
+										const diff =
+											rolePriority(a.role.toLowerCase()) -
+											rolePriority(b.role.toLowerCase())
+										if (diff !== 0) return diff
+										return (a.user?.name ?? "").localeCompare(
+											b.user?.name ?? "",
+										)
+									})
+									.map((m, idx) => {
+										const isYou = m.userId === user?.id
+										const memberRole = m.role.toLowerCase()
+										const name = m.user?.name ?? m.user?.email ?? "Unknown"
+										const canEditMember =
+											canManageTeam && !isYou && memberRole !== "owner"
+										return (
+											<li
+												key={m.id}
+												className={cn(
+													"flex items-center gap-3 py-2.5",
+													idx > 0 && "border-t border-white/[0.04]",
+												)}
+											>
+												<Avatar className="size-9 shrink-0 bg-[#0D121A]">
+													<AvatarImage
+														src={m.user?.image ?? ""}
+														alt={name}
+														className="object-cover"
+													/>
+													<AvatarFallback className="bg-transparent text-white text-[13px] font-medium">
+														{(name.charAt(0) || "U").toUpperCase()}
+													</AvatarFallback>
+												</Avatar>
+												<div className="flex-1 min-w-0 flex flex-col gap-0.5">
+													<div className="flex items-center gap-2 min-w-0">
 														<span
 															className={cn(
 																dmSans125ClassName(),
-																"text-[10.5px] uppercase tracking-[0.1em] text-[#737373] font-mono",
+																"font-medium text-[14px] tracking-[-0.14px] text-[#FAFAFA] truncate",
 															)}
 														>
-															You
+															{name}
+														</span>
+														{isYou && (
+															<span
+																className={cn(
+																	dmSans125ClassName(),
+																	"text-[10.5px] uppercase tracking-[0.1em] text-[#737373] font-mono",
+																)}
+															>
+																You
+															</span>
+														)}
+													</div>
+													{m.user?.email && (
+														<span
+															className={cn(
+																dmSans125ClassName(),
+																"text-[12px] tracking-[-0.12px] text-[#737373] truncate",
+															)}
+														>
+															{m.user.email}
 														</span>
 													)}
 												</div>
-												{m.user?.email && (
+												{canEditMember ? (
+													<Select
+														value={memberRole}
+														onValueChange={(value) => {
+															if (value === memberRole) return
+															updateMemberRoleMutation.mutate({
+																memberId: m.id,
+																role: value as InviteRole,
+															})
+														}}
+													>
+														<SelectTrigger className="h-8 w-[112px] rounded-[8px] border-white/[0.08] bg-[#0D0F14] text-[#FAFAFA]">
+															<SelectValue />
+														</SelectTrigger>
+														<SelectContent>
+															<SelectItem value="member">Member</SelectItem>
+															<SelectItem value="admin">Admin</SelectItem>
+														</SelectContent>
+													</Select>
+												) : (
+													<RolePill role={m.role} />
+												)}
+												{canEditMember && (
+													<DropdownMenu>
+														<DropdownMenuTrigger asChild>
+															<button
+																type="button"
+																className="flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[#737373] hover:bg-white/[0.05] hover:text-[#FAFAFA]"
+																aria-label={`Team actions for ${name}`}
+															>
+																<MoreHorizontal className="size-4" />
+															</button>
+														</DropdownMenuTrigger>
+														<DropdownMenuContent align="end" className="w-44">
+															<DropdownMenuItem
+																className="text-[#C73B1B] focus:text-[#C73B1B]"
+																onSelect={() =>
+																	removeMemberMutation.mutate(m.id)
+																}
+																disabled={
+																	removeMemberMutation.isPending || !isOwner
+																}
+															>
+																<UserMinus className="size-4" />
+																Remove member
+															</DropdownMenuItem>
+														</DropdownMenuContent>
+													</DropdownMenu>
+												)}
+											</li>
+										)
+									})}
+							</ul>
+						) : (
+							<div className="flex items-center gap-3 py-2">
+								<div className="size-9 rounded-full bg-white/[0.04] flex items-center justify-center shrink-0">
+									<Users className="size-4 text-[#737373]" />
+								</div>
+								<div className="flex flex-col">
+									<span
+										className={cn(
+											dmSans125ClassName(),
+											"font-medium text-[14px] tracking-[-0.14px] text-[#FAFAFA]",
+										)}
+									>
+										Just you for now
+									</span>
+									<span
+										className={cn(
+											dmSans125ClassName(),
+											"text-[12px] tracking-[-0.12px] text-[#737373]",
+										)}
+									>
+										Invite teammates to start collaborating.
+									</span>
+								</div>
+							</div>
+						)}
+					</div>
+				</SettingsCard>
+			</section>
+
+			<Dialog
+				open={inviteDialogOpen}
+				onOpenChange={(open) => {
+					setInviteDialogOpen(open)
+					if (!open && !inviteMemberMutation.isPending) {
+						resetInviteForm()
+					}
+				}}
+			>
+				<DialogContent
+					showCloseButton={false}
+					className="sm:max-w-[480px] border-none bg-[#1B1F24] p-0 gap-0 rounded-[22px] overflow-hidden"
+				>
+					<div className="flex items-start justify-between gap-3 px-6 pt-6 pb-4">
+						<div className="flex flex-col gap-1">
+							<DialogTitle
+								className={cn(
+									dmSans125ClassName(),
+									"text-[18px] font-semibold tracking-[-0.18px] text-[#FAFAFA]",
+								)}
+							>
+								Invite teammate
+							</DialogTitle>
+							<p
+								className={cn(
+									dmSans125ClassName(),
+									"text-[13px] tracking-[-0.13px] text-[#737373]",
+								)}
+							>
+								Send an invitation to join your organization.
+							</p>
+						</div>
+						<DialogPrimitive.Close
+							className="flex size-7 shrink-0 items-center justify-center rounded-full border border-[rgba(115,115,115,0.2)] bg-[#0D121A] transition-opacity hover:opacity-100 focus:outline-hidden"
+							style={{
+								boxShadow: "inset 1.313px 1.313px 3.938px 0px rgba(0,0,0,0.7)",
+							}}
+						>
+							<X className="size-4" stroke="#737373" />
+							<span className="sr-only">Close</span>
+						</DialogPrimitive.Close>
+					</div>
+
+					<form onSubmit={handleInviteSubmit} className="flex flex-col">
+						<div className="flex flex-col gap-5 px-6">
+							{/* Email */}
+							<div className="flex flex-col gap-1.5">
+								<label
+									htmlFor="team-invite-email"
+									className={cn(
+										dmSans125ClassName(),
+										"text-[13px] font-medium text-[#FAFAFA]",
+									)}
+								>
+									Email
+								</label>
+								<div className="relative min-w-0">
+									<Mail className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#525D6E]" />
+									<input
+										id="team-invite-email"
+										type="email"
+										value={inviteEmail}
+										onChange={(event) => setInviteEmail(event.target.value)}
+										placeholder="colleague@company.com"
+										autoComplete="email"
+										className={cn(
+											dmSans125ClassName(),
+											"h-10 w-full rounded-[10px] border border-white/[0.06] bg-white/[0.02] pl-9 pr-3 text-[14px] text-[#FAFAFA] placeholder:text-[#525D6E] outline-none transition-colors focus:border-[#2261CA33]",
+										)}
+									/>
+								</div>
+							</div>
+
+							{/* Role */}
+							<div className="flex flex-col gap-1.5">
+								<p
+									className={cn(
+										dmSans125ClassName(),
+										"text-[13px] font-medium text-[#FAFAFA]",
+									)}
+								>
+									Role
+								</p>
+								<Select
+									value={inviteRole}
+									onValueChange={(value) => {
+										const role = value as InviteRole
+										setInviteRole(role)
+										if (role === "admin") {
+											setInviteAccessType("full")
+											setInviteAssignments([])
+										}
+									}}
+								>
+									<SelectTrigger className="h-9 w-full rounded-[10px] border-white/[0.08] bg-[#0D0F14] text-[#FAFAFA]">
+										<SelectValue />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="member">Member</SelectItem>
+										<SelectItem value="admin">Admin</SelectItem>
+									</SelectContent>
+								</Select>
+							</div>
+
+							{/* Access type (only for Member) */}
+							{showAccessType && (
+								<div className="flex flex-col gap-1.5">
+									<p
+										className={cn(
+											dmSans125ClassName(),
+											"text-[13px] font-medium text-[#FAFAFA]",
+										)}
+									>
+										Access
+									</p>
+									<div className="grid grid-cols-2 gap-2">
+										{(["full", "restricted"] as const).map((type) => {
+											const selected = inviteAccessType === type
+											return (
+												<button
+													key={type}
+													type="button"
+													onClick={() => {
+														setInviteAccessType(type)
+														if (type === "full") setInviteAssignments([])
+													}}
+													className={cn(
+														dmSans125ClassName(),
+														"flex items-center justify-center h-9 rounded-[10px] border text-[13px] font-medium transition-colors cursor-pointer",
+														selected
+															? "border-white/10 bg-[#14161A] text-[#FAFAFA] shadow-inside-out"
+															: "border-[#161F2C] bg-[#0D121A] text-[#737373] hover:bg-[#14161A] hover:text-[#FAFAFA]",
+													)}
+												>
+													{type === "full" ? "Full Access" : "Restricted"}
+												</button>
+											)
+										})}
+									</div>
+								</div>
+							)}
+
+							{/* Container tag picker (only for Restricted) */}
+							{showTagPicker && (
+								<div className="flex flex-col gap-2">
+									<p
+										className={cn(
+											dmSans125ClassName(),
+											"text-[13px] font-medium text-[#FAFAFA]",
+										)}
+									>
+										Spaces
+									</p>
+
+									<Popover
+										open={
+											tagDropdownOpen &&
+											(filteredTags.length > 0 ||
+												(tagQuery.trim().length > 0 &&
+													!selectedTagSet.has(tagQuery.trim())))
+										}
+										onOpenChange={setTagDropdownOpen}
+									>
+										<PopoverAnchor asChild>
+											<div
+												ref={tagAnchorRef}
+												className={cn(
+													"relative flex items-center w-full h-10",
+													"rounded-[10px] border border-white/[0.06] bg-white/[0.02]",
+													"transition-colors focus-within:border-[#2261CA33]",
+												)}
+											>
+												<input
+													ref={tagInputRef}
+													type="text"
+													value={tagQuery}
+													onChange={(e) => {
+														setTagQuery(e.target.value)
+														if (!tagDropdownOpen) setTagDropdownOpen(true)
+													}}
+													onClick={() => setTagDropdownOpen(true)}
+													onFocus={() => setTagDropdownOpen(true)}
+													placeholder="Search or create spaces..."
+													className={cn(
+														dmSans125ClassName(),
+														"h-full w-full bg-transparent pl-3 pr-8 text-[13px] text-[#FAFAFA] placeholder:text-[#525D6E] outline-none",
+													)}
+												/>
+												<ChevronDown
+													className={cn(
+														"absolute right-3 top-1/2 -translate-y-1/2 size-3.5 text-[#525D6E] pointer-events-none transition-transform",
+														tagDropdownOpen && "rotate-180",
+													)}
+												/>
+											</div>
+										</PopoverAnchor>
+										<PopoverContent
+											align="start"
+											sideOffset={4}
+											className="w-[var(--radix-popover-trigger-width)] p-1 max-h-[200px] overflow-y-auto bg-[#1B1F24] border border-white/[0.08] rounded-[10px] shadow-[0px_4px_16px_rgba(0,0,0,0.4)]"
+											onOpenAutoFocus={(e) => e.preventDefault()}
+											onPointerDownOutside={(e) => {
+												if (tagAnchorRef.current?.contains(e.target as Node)) {
+													e.preventDefault()
+												}
+											}}
+										>
+											{filteredTags.map((tag) => (
+												<button
+													key={tag}
+													type="button"
+													onClick={() => {
+														if (!selectedTagSet.has(tag)) {
+															setInviteAssignments([
+																...inviteAssignments,
+																{ containerTag: tag, permission: "read" },
+															])
+														}
+														setTagQuery("")
+														setTagDropdownOpen(false)
+													}}
+													onMouseDown={(e) => e.preventDefault()}
+													className={cn(
+														dmSans125ClassName(),
+														"flex items-center gap-2 w-full h-8 px-3 text-[13px] text-[#FAFAFA] rounded-[8px] cursor-pointer hover:bg-white/[0.06]",
+													)}
+												>
+													<Tag className="size-3.5 text-[#525D6E]" />
+													{tag}
+												</button>
+											))}
+											{tagQuery.trim().length > 0 &&
+												!selectedTagSet.has(tagQuery.trim()) &&
+												!(allContainerTags ?? []).some(
+													(t) =>
+														t.containerTag.toLowerCase() ===
+														tagQuery.trim().toLowerCase(),
+												) && (
+													<button
+														type="button"
+														onClick={() => {
+															const sanitized = tagQuery.trim()
+															if (!selectedTagSet.has(sanitized)) {
+																setInviteAssignments([
+																	...inviteAssignments,
+																	{
+																		containerTag: sanitized,
+																		permission: "read",
+																	},
+																])
+															}
+															setTagQuery("")
+															setTagDropdownOpen(false)
+														}}
+														onMouseDown={(e) => e.preventDefault()}
+														className={cn(
+															dmSans125ClassName(),
+															"flex items-center gap-2 w-full h-8 px-3 text-[13px] text-[#8FC8FF] rounded-[8px] cursor-pointer hover:bg-white/[0.06]",
+														)}
+													>
+														<Plus className="size-3.5" />
+														Create &ldquo;{tagQuery.trim()}&rdquo;
+													</button>
+												)}
+										</PopoverContent>
+									</Popover>
+
+									{/* Selected tags */}
+									{inviteAssignments.length > 0 && (
+										<div className="flex flex-col rounded-[10px] border border-white/[0.06] overflow-hidden">
+											{inviteAssignments.map((a) => (
+												<div
+													key={a.containerTag}
+													className="flex items-center gap-2 px-3 py-2 border-b border-white/[0.04] last:border-0 bg-white/[0.015]"
+												>
+													<button
+														type="button"
+														onClick={() =>
+															setInviteAssignments(
+																inviteAssignments.filter(
+																	(t) => t.containerTag !== a.containerTag,
+																),
+															)
+														}
+														className="text-[#525D6E] hover:text-[#C73B1B] transition-colors shrink-0"
+													>
+														<X className="size-3.5" />
+													</button>
 													<span
 														className={cn(
 															dmSans125ClassName(),
-															"text-[12px] tracking-[-0.12px] text-[#737373] truncate",
+															"text-[13px] text-[#FAFAFA] truncate min-w-0 flex-1",
 														)}
 													>
-														{m.user.email}
+														{a.containerTag}
 													</span>
-												)}
-											</div>
-											<RolePill role={m.role} />
-										</li>
-									)
-								})}
-						</ul>
-					) : (
-						<div className="flex items-center gap-3 py-2">
-							<div className="size-9 rounded-full bg-white/[0.04] flex items-center justify-center shrink-0">
-								<Users className="size-4 text-[#737373]" />
-							</div>
-							<div className="flex flex-col">
-								<span
-									className={cn(
-										dmSans125ClassName(),
-										"font-medium text-[14px] tracking-[-0.14px] text-[#FAFAFA]",
+													<div className="grid grid-cols-2 gap-1 shrink-0">
+														{(["read", "write"] as const).map((perm) => {
+															const active = a.permission === perm
+															return (
+																<button
+																	key={perm}
+																	type="button"
+																	onClick={() =>
+																		setInviteAssignments(
+																			inviteAssignments.map((t) =>
+																				t.containerTag === a.containerTag
+																					? { ...t, permission: perm }
+																					: t,
+																			),
+																		)
+																	}
+																	className={cn(
+																		dmSans125ClassName(),
+																		"h-7 px-3 rounded-[8px] border text-[12px] font-medium transition-colors cursor-pointer capitalize",
+																		active
+																			? "border-white/10 bg-[#14161A] text-[#FAFAFA] shadow-inside-out"
+																			: "border-[#161F2C] bg-[#0D121A] text-[#737373] hover:bg-[#14161A] hover:text-[#FAFAFA]",
+																	)}
+																>
+																	{perm}
+																</button>
+															)
+														})}
+													</div>
+												</div>
+											))}
+										</div>
 									)}
-								>
-									Just you for now
-								</span>
-								<span
-									className={cn(
-										dmSans125ClassName(),
-										"text-[12px] tracking-[-0.12px] text-[#737373]",
+
+									{inviteAssignments.length === 0 && (
+										<p
+											className={cn(
+												dmSans125ClassName(),
+												"text-[12px] text-[#525D6E]",
+											)}
+										>
+											Select at least one space
+										</p>
 									)}
-								>
-									Invite teammates from your organization settings.
-								</span>
-							</div>
+								</div>
+							)}
 						</div>
-					)}
-				</SettingsCard>
-			</section>
+
+						<div className="flex justify-end gap-2 px-6 py-4 mt-5">
+							<button
+								type="button"
+								onClick={() => setInviteDialogOpen(false)}
+								className={cn(
+									dmSans125ClassName(),
+									"h-9 rounded-full border border-[#161F2C] bg-[#0D121A] px-4 text-[13px] font-medium text-[#737373] transition-colors hover:bg-[#14161A] hover:text-white",
+								)}
+							>
+								Cancel
+							</button>
+							<button
+								type="submit"
+								disabled={
+									!inviteEmail.trim() ||
+									!org?.id ||
+									inviteMemberMutation.isPending ||
+									(showTagPicker && inviteAssignments.length === 0)
+								}
+								className={cn(
+									dmSans125ClassName(),
+									"inline-flex h-9 items-center justify-center gap-2 rounded-full bg-[#14161A] px-4 text-[13px] font-semibold text-[#FAFAFA] shadow-inside-out transition-colors hover:bg-[#121820] disabled:cursor-not-allowed disabled:opacity-45",
+								)}
+							>
+								{inviteMemberMutation.isPending ? (
+									<LoaderIcon className="size-4 animate-spin" />
+								) : (
+									<UserPlus className="size-4" />
+								)}
+								Send invite
+							</button>
+						</div>
+					</form>
+				</DialogContent>
+			</Dialog>
 		</div>
 	)
 }
diff --git a/packages/lib/auth-context.tsx b/packages/lib/auth-context.tsx
index 838a74e6..48562813 100644
--- a/packages/lib/auth-context.tsx
+++ b/packages/lib/auth-context.tsx
@@ -28,6 +28,7 @@ interface AuthContextType {
 	setActiveOrg: (orgSlug: string) => Promise<void>
 	clearActiveOrg: () => void
 	updateOrgMetadata: (partial: Record<string, unknown>) => void
+	refetchActiveOrg: () => Promise<Organization | null>
 	refetchOrganizations: () => Promise<unknown>
 }
 
@@ -81,6 +82,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 		})
 	}, [])
 
+	const refetchActiveOrg = useCallback(async () => {
+		const full = await authClient.organization.getFullOrganization()
+		const nextOrg = full?.data ?? null
+		setOrg(nextOrg)
+		return nextOrg
+	}, [])
+
 	useEffect(() => {
 		if (isSessionPending) return
 
@@ -198,6 +206,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 				setActiveOrg,
 				clearActiveOrg,
 				updateOrgMetadata,
+				refetchActiveOrg,
 				refetchOrganizations,
 			}}
 		>
diff --git a/packages/ui/components/dialog.tsx b/packages/ui/components/dialog.tsx
index b40fabba..87d295c1 100644
--- a/packages/ui/components/dialog.tsx
+++ b/packages/ui/components/dialog.tsx
@@ -36,7 +36,7 @@ function DialogOverlay({
 	return (
 		<DialogPrimitive.Overlay
 			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-[4px]",
 				className,
 			)}
 			data-slot="dialog-overlay"

From 480f19a6fe22aaf25b7575579bde08d6b871b600 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Mon, 25 May 2026 10:28:58 +0530
Subject: [PATCH 6/6] feat(dashboard): Add "Pick up where you left off"
 personalization panel (#935)

Co-authored-by: ved015 <vedant.04.mahajan@gmail.com>
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Ishaan Gupta <ishaanxgupta@users.noreply.github.com>
---
 apps/web/app/(app)/page.tsx            |  16 +-
 apps/web/app/auth/connect/page.tsx     |  11 +
 apps/web/components/dashboard-view.tsx | 550 ++++++++++++++++++++++++-
 apps/web/lib/plugin-catalog.ts         |   6 +
 apps/web/lib/plugin-space.ts           |  44 ++
 5 files changed, 620 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/(app)/page.tsx b/apps/web/app/(app)/page.tsx
index fd2fd171..02ba09ab 100644
--- a/apps/web/app/(app)/page.tsx
+++ b/apps/web/app/(app)/page.tsx
@@ -60,6 +60,7 @@ import {
 	type IntegrationParamValue,
 } from "@/lib/search-params"
 import { getChatSpaceDisplayLabel } from "@/lib/chat-space-label"
+import { getToolDocumentSpace } from "@/lib/plugin-space"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -106,7 +107,7 @@ export default function NewPage() {
 	const isMobile = useIsMobile()
 	const { user, session } = useAuth()
 
-	const { selectedProject, selectedProjects } = useProject()
+	const { selectedProject, selectedProjects, setSelectedProject } = useProject()
 	const selectedProjectTag = selectedProjects[0]
 	const { allProjects } = useContainerTags()
 	const dashboardSpaceLabel = useMemo(
@@ -408,6 +409,18 @@ export default function NewPage() {
 		[setDocId],
 	)
 
+	const handleOpenToolDocument = useCallback(
+		(document: DocumentWithMemories, pluginClientId: string) => {
+			const documentSpace = getToolDocumentSpace(document, pluginClientId)
+			if (documentSpace) {
+				setSelectedProject(documentSpace)
+			}
+			handleOpenDocument(document)
+			void setViewMode("list")
+		},
+		[handleOpenDocument, setSelectedProject, setViewMode],
+	)
+
 	// Separate from handleOpenDocument because the graph view only has a document ID,
 	// not the full document object. The modal will fetch the document via the docId
 	// query param, so there may be a brief loading state (unlike handleOpenDocument
@@ -712,6 +725,7 @@ export default function NewPage() {
 										onNavigateToMemories={() => void setViewMode("list")}
 										onNavigateToGraph={() => void setViewMode("graph")}
 										onOpenDocument={handleOpenDocument}
+										onOpenToolDocument={handleOpenToolDocument}
 										onHighlightsChat={handleHighlightsChat}
 										onHighlightsShowRelated={handleHighlightsShowRelated}
 										onResetHighlights={handleResetHighlights}
diff --git a/apps/web/app/auth/connect/page.tsx b/apps/web/app/auth/connect/page.tsx
index 609c6e9a..37f61d3d 100644
--- a/apps/web/app/auth/connect/page.tsx
+++ b/apps/web/app/auth/connect/page.tsx
@@ -90,6 +90,17 @@ const PLUGIN_INFO: Record<string, PluginInfo> = {
 		],
 		icon: "/images/plugins/cursor.svg",
 	},
+	codex: {
+		name: "OpenAI Codex",
+		description:
+			"Persistent memory for OpenAI Codex CLI. Remembers your coding context, patterns, and decisions across sessions.",
+		features: [
+			"Auto-recalls relevant context before each prompt",
+			"Captures coding decisions and patterns automatically",
+			"Builds persistent user profile across projects",
+		],
+		icon: "/images/plugins/codex.svg",
+	},
 }
 
 function getPluginName(client: string): string {
diff --git a/apps/web/components/dashboard-view.tsx b/apps/web/components/dashboard-view.tsx
index 64f601fb..0230626c 100644
--- a/apps/web/components/dashboard-view.tsx
+++ b/apps/web/components/dashboard-view.tsx
@@ -7,12 +7,14 @@ import { $fetch } from "@lib/api"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import { useQuery } from "@tanstack/react-query"
 import { useRouter } from "next/navigation"
+import Image from "next/image"
 import {
 	ArrowRight,
 	ExternalLink,
 	FileText,
 	Lightbulb,
 	Link2,
+	Plug,
 	RotateCcw,
 	SearchIcon,
 	Terminal,
@@ -37,6 +39,7 @@ import {
 	usePersonalization,
 	type Profession,
 } from "@/hooks/use-personalization"
+import { normalizePluginClientId } from "@/lib/plugin-catalog"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -329,6 +332,468 @@ const PLUGIN_STATIC = [
 	},
 ] as const
 
+// Plugin catalog for tool usage display - maps plugin IDs to display names and icons
+const PLUGIN_DISPLAY_CATALOG: Record<
+	string,
+	{ name: string; icon: string | null; type: "Plugin" }
+> = {
+	claude_code: {
+		name: "Claude Code",
+		icon: "/images/plugins/claude-code.svg",
+		type: "Plugin",
+	},
+	opencode: {
+		name: "OpenCode",
+		icon: "/images/plugins/opencode.svg",
+		type: "Plugin",
+	},
+	openclaw: {
+		name: "OpenClaw",
+		icon: "/images/plugins/openclaw.svg",
+		type: "Plugin",
+	},
+	hermes: {
+		name: "Hermes",
+		icon: "/images/plugins/hermes.svg",
+		type: "Plugin",
+	},
+	codex: {
+		name: "OpenAI Codex",
+		icon: "/mcp-supported-tools/codex.png",
+		type: "Plugin",
+	},
+}
+
+// Types for tool usage
+interface ToolUsageItem {
+	id: string
+	name: string
+	type: "Plugin" | "MCP"
+	icon: string | null
+	lastUsedAt: Date | null
+	hasBeenUsed: boolean
+	connectedAt: Date | null
+	lastDocumentTitle: string | null
+	lastDocumentId: string | null
+	lastDocumentPreview: string | null
+	lastDocument: DocumentWithMemories | null
+}
+
+type ToolUsageApiKey = {
+	id: string
+	name: string
+	createdAt: string
+	lastRequest: string | null
+	metadata: string
+}
+
+function toValidDate(value: string | Date | null | undefined): Date | null {
+	if (!value) return null
+	const date = new Date(value)
+	return Number.isNaN(date.getTime()) ? null : date
+}
+
+function compactText(value: string): string {
+	return value.replace(/\s+/g, " ").trim()
+}
+
+function getDocumentText(document: DocumentWithMemories): string {
+	return typeof document.content === "string" ? document.content : ""
+}
+
+function toMetadataRecord(value: unknown): Record<string, unknown> | null {
+	if (!value) return null
+	if (typeof value === "object" && !Array.isArray(value)) {
+		return value as Record<string, unknown>
+	}
+	if (typeof value !== "string") return null
+
+	try {
+		const parsed = JSON.parse(value)
+		return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+			? (parsed as Record<string, unknown>)
+			: null
+	} catch {
+		return null
+	}
+}
+
+function getDocumentMetadataRecords(
+	document: DocumentWithMemories,
+): Record<string, unknown>[] {
+	const records = [toMetadataRecord(document.metadata)]
+
+	for (const entry of document.memoryEntries ?? []) {
+		records.push(
+			toMetadataRecord(entry.metadata),
+			toMetadataRecord(entry.sourceMetadata),
+		)
+	}
+
+	return records.filter((record): record is Record<string, unknown> => !!record)
+}
+
+function hasClaudeCodeContainer(document: DocumentWithMemories): boolean {
+	const containerTags =
+		(document as { containerTags?: string[] }).containerTags ?? []
+	if (containerTags.some((tag) => tag.startsWith("claudecode_"))) return true
+
+	return (document.memoryEntries ?? []).some((entry) =>
+		entry.spaceContainerTag?.startsWith("claudecode_"),
+	)
+}
+
+function getPluginClientFromDocument(
+	document: DocumentWithMemories,
+): string | null {
+	for (const metadata of getDocumentMetadataRecords(document)) {
+		const metadataClient =
+			typeof metadata.sm_client === "string"
+				? metadata.sm_client
+				: typeof metadata.sm_internal_plugin_client === "string"
+					? metadata.sm_internal_plugin_client
+					: typeof metadata.sm_internal_mcp_client_name === "string"
+						? metadata.sm_internal_mcp_client_name
+						: null
+		if (metadataClient) return normalizePluginClientId(metadataClient)
+
+		if (metadata.sm_source === "claude-code-plugin") return "claude_code"
+	}
+
+	if (hasClaudeCodeContainer(document)) return "claude_code"
+
+	const content = getDocumentText(document)
+	const title = document.title ?? ""
+	if (
+		/\[Session\s+[^\]]+\]/i.test(content) ||
+		/\[SAVE:[^\]]+\]/i.test(content)
+	) {
+		return "codex"
+	}
+	if (/\bCodex\b/i.test(title)) return "codex"
+
+	return null
+}
+
+function getDocumentPreview(document: DocumentWithMemories): string | null {
+	const summary =
+		typeof document.summary === "string" ? compactText(document.summary) : ""
+	if (summary) return summary
+
+	const content = getDocumentText(document)
+	if (!content) return document.title?.trim() || null
+
+	const transcriptTurns = Array.from(
+		content.matchAll(
+			/\d+\.\s+\[(user|assistant)\]\s*([\s\S]*?)(?=\d+\.\s+\[(?:user|assistant|tool|system)\]|---|\[\/?[A-Za-z]|$)/gi,
+		),
+	)
+		.slice(0, 2)
+		.map((match) => {
+			const role = match[1] === "assistant" ? "Assistant" : "You"
+			const text = compactText(match[2] ?? "")
+			return text ? `${role}: ${text}` : null
+		})
+		.filter(Boolean)
+
+	if (transcriptTurns.length > 0) return transcriptTurns.join(" · ")
+
+	const cleaned = compactText(
+		content
+			.replace(/\[Session\s+[^\]]+\]/gi, "")
+			.replace(/\[SAVE:[^\]]+\]/gi, "")
+			.replace(/\[\/SAVE\]/gi, ""),
+	)
+	return cleaned || document.title?.trim() || null
+}
+
+function getToolDocumentTitle(document: DocumentWithMemories): string {
+	return document.title?.trim() || "Recent conversation"
+}
+
+// Parse API keys to extract tool usage data
+function parseToolUsage(
+	apiKeys: ToolUsageApiKey[],
+	recentMcpDocuments: DocumentWithMemories[] = [],
+): ToolUsageItem[] {
+	const toolMap = new Map<string, ToolUsageItem>()
+	let latestMcpClientName: string | null = null
+	let latestMcpDocumentAt: Date | null = null
+
+	const latestDocPerPlugin = new Map<
+		string,
+		{
+			title: string
+			id: string
+			at: Date
+			preview: string | null
+			document: DocumentWithMemories
+		}
+	>()
+
+	for (const key of apiKeys) {
+		let meta: Record<string, unknown> = {}
+		try {
+			meta = key.metadata ? JSON.parse(key.metadata) : {}
+		} catch {
+			continue
+		}
+
+		const smType = meta.sm_type as string | undefined
+		const smClient = meta.sm_client as string | undefined
+		const smSource = meta.sm_source as string | undefined
+		const smKind = meta.sm_kind as string | undefined
+
+		// Plugin keys
+		if (smType === "plugin_auth" && smClient) {
+			const normalizedClient = normalizePluginClientId(smClient)
+			const catalog = PLUGIN_DISPLAY_CATALOG[normalizedClient]
+			const existingItem = toolMap.get(`plugin_${normalizedClient}`)
+			const lastUsed =
+				toValidDate(key.lastRequest) ?? toValidDate(key.createdAt)
+			const existingLastUsed = existingItem?.lastUsedAt
+
+			// Keep the most recent usage
+			if (
+				!existingItem ||
+				(lastUsed &&
+					(!existingLastUsed ||
+						lastUsed.getTime() > existingLastUsed.getTime()))
+			) {
+				toolMap.set(`plugin_${normalizedClient}`, {
+					id: `plugin_${normalizedClient}`,
+					name: catalog?.name ?? smClient,
+					type: "Plugin",
+					icon: catalog?.icon ?? null,
+					lastUsedAt: lastUsed,
+					hasBeenUsed: !!key.lastRequest,
+					connectedAt: toValidDate(key.createdAt),
+					lastDocumentTitle: null,
+					lastDocumentId: null,
+					lastDocumentPreview: null,
+					lastDocument: null,
+				})
+			}
+		}
+
+		// MCP keys
+		if (smSource === "mcp" || smKind === "mcp_oauth_exchange") {
+			const existingItem = toolMap.get("mcp")
+			const lastUsed =
+				toValidDate(key.lastRequest) ?? toValidDate(key.createdAt)
+			const existingLastUsed = existingItem?.lastUsedAt
+
+			// Keep the most recent usage
+			if (
+				!existingItem ||
+				(lastUsed &&
+					(!existingLastUsed ||
+						lastUsed.getTime() > existingLastUsed.getTime()))
+			) {
+				toolMap.set("mcp", {
+					id: "mcp",
+					name: "Supermemory MCP",
+					type: "MCP",
+					icon: null,
+					lastUsedAt: lastUsed,
+					hasBeenUsed: !!key.lastRequest,
+					connectedAt: toValidDate(key.createdAt),
+					lastDocumentTitle: null,
+					lastDocumentId: null,
+					lastDocumentPreview: null,
+					lastDocument: null,
+				})
+			}
+		}
+	}
+
+	for (const doc of recentMcpDocuments) {
+		const metadataRecords = getDocumentMetadataRecords(doc)
+		const clientName =
+			metadataRecords
+				.map((record) => record.sm_internal_mcp_client_name)
+				.find((value): value is string => typeof value === "string") ?? null
+		const pluginClient = getPluginClientFromDocument(doc)
+		const isMcpDocument =
+			doc.source === "mcp" ||
+			metadataRecords.some(
+				(record) => record.sm_internal_event_from === "mcp",
+			) ||
+			!!clientName
+		const isPluginDocument = !!pluginClient && pluginClient !== "mcp"
+
+		if (!isMcpDocument && !isPluginDocument) continue
+
+		const createdAt = toValidDate(doc.createdAt)
+		if (
+			isMcpDocument &&
+			clientName &&
+			clientName !== "unknown" &&
+			(!latestMcpDocumentAt ||
+				(createdAt && createdAt.getTime() > latestMcpDocumentAt.getTime()))
+		) {
+			latestMcpClientName = clientName
+			latestMcpDocumentAt = createdAt
+		}
+
+		if (isMcpDocument) {
+			const existingItem = toolMap.get("mcp")
+			const existingLastUsed = existingItem?.lastUsedAt
+			if (
+				!existingItem ||
+				(createdAt &&
+					(!existingLastUsed ||
+						createdAt.getTime() > existingLastUsed.getTime()))
+			) {
+				toolMap.set("mcp", {
+					id: "mcp",
+					name:
+						clientName && clientName !== "unknown"
+							? clientName
+							: "Supermemory MCP",
+					type: "MCP",
+					icon: null,
+					lastUsedAt: createdAt,
+					hasBeenUsed: true,
+					connectedAt: toolMap.get("mcp")?.connectedAt ?? null,
+					lastDocumentTitle: doc.title?.trim() || null,
+					lastDocumentId: doc.id ?? null,
+					lastDocumentPreview: getDocumentPreview(doc),
+					lastDocument: doc,
+				})
+			}
+		}
+
+		if (pluginClient && createdAt && doc.id) {
+			const existing = latestDocPerPlugin.get(pluginClient)
+			if (!existing || createdAt.getTime() > existing.at.getTime()) {
+				latestDocPerPlugin.set(pluginClient, {
+					title: getToolDocumentTitle(doc),
+					id: doc.id,
+					at: createdAt,
+					preview: getDocumentPreview(doc),
+					document: doc,
+				})
+			}
+		}
+	}
+
+	if (latestMcpClientName) {
+		const existingItem = toolMap.get("mcp")
+		if (existingItem) {
+			toolMap.set("mcp", {
+				...existingItem,
+				name: latestMcpClientName,
+			})
+		}
+	}
+
+	// Attach latest document info to plugin items where available from MCP documents
+	for (const [, item] of toolMap) {
+		if (item.type === "Plugin" && !item.lastDocumentTitle) {
+			const pluginId = item.id.replace(/^plugin_/, "")
+			const docInfo = latestDocPerPlugin.get(pluginId)
+			if (docInfo) {
+				item.lastDocumentTitle = docInfo.title
+				item.lastDocumentId = docInfo.id
+				item.lastDocumentPreview = docInfo.preview
+				item.lastDocument = docInfo.document
+			}
+		}
+	}
+
+	// Sort by lastUsedAt (most recent first), then by hasBeenUsed
+	return Array.from(toolMap.values()).sort((a, b) => {
+		// Items that have been used come first
+		if (a.hasBeenUsed !== b.hasBeenUsed) {
+			return a.hasBeenUsed ? -1 : 1
+		}
+		// Then sort by recency
+		if (!a.lastUsedAt && !b.lastUsedAt) return 0
+		if (!a.lastUsedAt) return 1
+		if (!b.lastUsedAt) return -1
+		return b.lastUsedAt.getTime() - a.lastUsedAt.getTime()
+	})
+}
+
+// Format relative time for tool usage
+function formatToolUsageTime(date: Date | null, hasBeenUsed: boolean): string {
+	if (!hasBeenUsed) return "Never used"
+	if (!date) return "Connected"
+	const diffMs = Date.now() - date.getTime()
+	const diffMins = Math.floor(diffMs / (1000 * 60))
+	const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+	const diffDays = Math.floor(diffHours / 24)
+	if (diffMins < 1) return "Just now"
+	if (diffMins < 60) return `${diffMins}m ago`
+	if (diffHours < 24) return `${diffHours}h ago`
+	if (diffDays === 1) return "Yesterday"
+	if (diffDays < 7) return `${diffDays}d ago`
+	return date.toLocaleDateString()
+}
+
+function ToolUsageRecentRow({
+	item,
+	onOpenPlugins,
+	onOpenToolDocument,
+}: {
+	item: ToolUsageItem
+	onOpenPlugins: () => void
+	onOpenToolDocument: (
+		document: DocumentWithMemories,
+		pluginClientId: string,
+	) => void
+}) {
+	const pluginClientId = item.id.replace(/^plugin_/, "")
+
+	return (
+		<li>
+			<button
+				type="button"
+				onClick={() => {
+					if (item.lastDocument) {
+						onOpenToolDocument(item.lastDocument, pluginClientId)
+						return
+					}
+					onOpenPlugins()
+				}}
+				className="group flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-all hover:bg-surface-hover hover:py-2.5"
+			>
+				<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-card ring-1 ring-surface-border group-hover:bg-[#182333] transition-colors">
+					{item.icon ? (
+						<Image
+							src={item.icon}
+							alt={item.name}
+							width={14}
+							height={14}
+							className="size-3.5"
+						/>
+					) : item.type === "MCP" ? (
+						<MCPIcon className="size-3.5" />
+					) : (
+						<Plug className="size-3.5 text-fg-subtle" />
+					)}
+				</div>
+				<div className="min-w-0 flex-1">
+					<div className="flex min-w-0 items-center gap-2">
+						<span className="min-w-0 flex-1 truncate text-sm text-fg-muted group-hover:text-white transition-colors">
+							{item.lastDocumentTitle ?? "No saved memory yet"}
+						</span>
+						<span className="shrink-0 text-[10px] text-fg-faint">
+							{formatToolUsageTime(item.lastUsedAt, item.hasBeenUsed)}
+						</span>
+					</div>
+					{item.lastDocumentPreview ? (
+						<p className="mt-0 max-h-0 overflow-hidden text-[11px] leading-snug text-fg-subtle opacity-0 transition-all duration-200 line-clamp-2 group-hover:mt-1 group-hover:max-h-9 group-hover:opacity-100">
+							{item.lastDocumentPreview}
+						</p>
+					) : null}
+				</div>
+			</button>
+		</li>
+	)
+}
+
 function RecommendedPluginsCard({
 	profession,
 	setProfession,
@@ -643,6 +1108,7 @@ export function DashboardView({
 	onNavigateToMemories: _onNavigateToMemories,
 	onNavigateToGraph,
 	onOpenDocument,
+	onOpenToolDocument,
 	onHighlightsChat,
 	onHighlightsShowRelated,
 	onResetHighlights,
@@ -659,12 +1125,16 @@ export function DashboardView({
 	onNavigateToMemories: () => void
 	onNavigateToGraph: () => void
 	onOpenDocument: (document: DocumentWithMemories) => void
+	onOpenToolDocument: (
+		document: DocumentWithMemories,
+		pluginClientId: string,
+	) => void
 	onHighlightsChat: (highlightContent: string, userReply: string) => void
 	onHighlightsShowRelated: (query: string) => void
 	onResetHighlights: () => void
 	memoryOfDay: MemoryOfDay | null
 }) {
-	const { user } = useAuth()
+	const { user, org } = useAuth()
 	const { effectiveContainerTags } = useProject()
 	const _router = useRouter()
 	const { data: recentsData, isPending: isRecentsLoading } = useQuery({
@@ -684,7 +1154,7 @@ export function DashboardView({
 			return response.data as DocumentsResponse
 		},
 		staleTime: 60 * 1000,
-		enabled: !!user,
+		enabled: !!user && !!org?.id,
 	})
 
 	const { data: connections = [] } = useQuery({
@@ -710,6 +1180,58 @@ export function DashboardView({
 		enabled: !!user,
 	})
 
+	// Fetch API keys for tool usage tracking
+	const { data: apiKeysData } = useQuery({
+		queryKey: ["api-keys-tool-usage", org?.id],
+		queryFn: async () => {
+			const API_URL =
+				process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
+			const res = await fetch(`${API_URL}/v3/auth/keys`, {
+				credentials: "include",
+			})
+			if (!res.ok) return { keys: [] }
+			return (await res.json()) as {
+				keys: Array<{
+					id: string
+					name: string
+					createdAt: string
+					lastRequest: string | null
+					metadata: string
+				}>
+			}
+		},
+		staleTime: 5 * 60 * 1000,
+		enabled: !!user,
+	})
+
+	const { data: recentMcpDocumentsData } = useQuery({
+		queryKey: ["dashboard-tool-documents", org?.id],
+		queryFn: async (): Promise<DocumentsResponse> => {
+			const response = await $fetch("@post/documents/documents", {
+				body: {
+					page: 1,
+					limit: 50,
+					sort: "createdAt",
+					order: "desc",
+				},
+				disableValidation: true,
+			})
+			if (response.error) throw new Error(response.error?.message)
+			return response.data as DocumentsResponse
+		},
+		staleTime: 5 * 60 * 1000,
+		enabled: !!user,
+	})
+
+	const toolUsageItems = useMemo(
+		() =>
+			parseToolUsage(
+				apiKeysData?.keys ?? [],
+				recentMcpDocumentsData?.documents ?? [],
+			),
+		[apiKeysData, recentMcpDocumentsData],
+	)
+
 	const {
 		copy: personalizedCopy,
 		profession,
@@ -717,6 +1239,14 @@ export function DashboardView({
 	} = usePersonalization()
 
 	const recents = recentsData?.documents ?? []
+	const recentToolUsageItems = toolUsageItems
+		.filter((item) => item.type === "Plugin" && item.lastDocument)
+		.sort((a, b) => {
+			const aTime = toValidDate(a.lastDocument?.createdAt)?.getTime() ?? 0
+			const bTime = toValidDate(b.lastDocument?.createdAt)?.getTime() ?? 0
+			return bTime - aTime
+		})
+		.slice(0, 3)
 	const totalMemories = recentsData?.pagination?.totalItems ?? 0
 	const hasMcp = mcpData?.previousLogin ?? false
 	const connectedProviders = new Set(connections.map((c) => c.provider))
@@ -907,9 +1437,9 @@ export function DashboardView({
 					className="space-y-2"
 				>
 					<div className="flex gap-4">
-						<div className="flex-[3] min-w-0">
+						<div className="flex-[4] min-w-0">
 							<p className="text-[10px] font-medium uppercase tracking-[0.12em] text-fg-faint">
-								Recently saved
+								Recents
 							</p>
 						</div>
 						<div className="flex-[2] min-w-0 hidden sm:block">
@@ -920,7 +1450,7 @@ export function DashboardView({
 					</div>
 
 					<div className="flex gap-4 items-start">
-						<div className="flex-[3] min-w-0">
+						<div className="flex-[4] min-w-0">
 							{isRecentsLoading ? (
 								<ul
 									className="space-y-0.5"
@@ -941,8 +1471,16 @@ export function DashboardView({
 										</li>
 									))}
 								</ul>
-							) : recents.length > 0 ? (
+							) : recents.length > 0 || recentToolUsageItems.length > 0 ? (
 								<ul className="space-y-0.5">
+									{recentToolUsageItems.map((item) => (
+										<ToolUsageRecentRow
+											key={item.id}
+											item={item}
+											onOpenPlugins={onOpenPlugins}
+											onOpenToolDocument={onOpenToolDocument}
+										/>
+									))}
 									{recents.map((doc) => {
 										const isLink = !!doc.url
 										return (
diff --git a/apps/web/lib/plugin-catalog.ts b/apps/web/lib/plugin-catalog.ts
index b2c704b5..f94a4e92 100644
--- a/apps/web/lib/plugin-catalog.ts
+++ b/apps/web/lib/plugin-catalog.ts
@@ -147,3 +147,9 @@ const SPACE_TO_CATALOG_ID: Record<string, string> = {
 export function spacePluginIdToCatalogId(spacePluginId: string): string | null {
 	return SPACE_TO_CATALOG_ID[spacePluginId] ?? null
 }
+
+/** Normalize plugin client ids from API keys, metadata, and space ids. */
+export function normalizePluginClientId(client: string): string {
+	const trimmed = client.trim().toLowerCase()
+	return spacePluginIdToCatalogId(trimmed) ?? trimmed.replace(/-/g, "_")
+}
diff --git a/apps/web/lib/plugin-space.ts b/apps/web/lib/plugin-space.ts
index c2582ec3..b42a2fdc 100644
--- a/apps/web/lib/plugin-space.ts
+++ b/apps/web/lib/plugin-space.ts
@@ -1,3 +1,5 @@
+import { normalizePluginClientId } from "@/lib/plugin-catalog"
+
 export type PluginSpaceInfo = {
 	pluginId: "claude-code" | "openclaw" | "opencode" | "codex" | "amp"
 	label: string
@@ -131,6 +133,48 @@ export function detectPluginSource(
 	}
 }
 
+type DocumentSpaceCandidate = {
+	containerTags?: string[]
+	memoryEntries?: Array<{ spaceContainerTag?: string | null }> | null
+}
+
+function catalogIdForPluginSpace(
+	pluginId: PluginSpaceInfo["pluginId"],
+): string {
+	return pluginId.replace(/-/g, "_")
+}
+
+/** Resolve the best container tag for a tool/plugin document. */
+export function getToolDocumentSpace(
+	document: DocumentSpaceCandidate,
+	pluginClientId?: string | null,
+): string | null {
+	const containerTags = document.containerTags ?? []
+	const memorySpaceTags = (document.memoryEntries ?? [])
+		.map((entry) => entry.spaceContainerTag)
+		.filter((tag): tag is string => !!tag)
+	const allTags = [...containerTags, ...memorySpaceTags]
+
+	if (pluginClientId) {
+		const normalizedClient = normalizePluginClientId(pluginClientId)
+		for (const tag of allTags) {
+			const pluginSpace = detectPluginSpace(tag)
+			if (
+				pluginSpace &&
+				catalogIdForPluginSpace(pluginSpace.pluginId) === normalizedClient
+			) {
+				return tag
+			}
+		}
+	}
+
+	for (const tag of allTags) {
+		if (detectPluginSpace(tag)) return tag
+	}
+
+	return allTags[0] ?? null
+}
+
 export function detectPluginSpace(
 	containerTag: string,
 ): PluginSpaceInfo | null {