diff --git a/apps/web/app/(app)/page.tsx b/apps/web/app/(app)/page.tsx
index 6d336fa35..5c88b5065 100644
--- a/apps/web/app/(app)/page.tsx
+++ b/apps/web/app/(app)/page.tsx
@@ -13,6 +13,7 @@ import { useQueryState } from "nuqs"
 import { Header, PublicHeader } from "@/components/header"
 import { MobileBottomNav } from "@/components/bottom-nav"
 import { ChatSidebar, HomeChatComposer } from "@/components/chat"
+import type { ChatAttachmentDraft } from "@/components/chat/attachments"
 import { DashboardView } from "@/components/dashboard-view"
 import { MemoriesGrid } from "@/components/memories-grid"
 import { GraphLayoutView } from "@/components/graph-layout-view"
@@ -166,6 +167,9 @@ export default function NewPage() {
 	const [queuedChatProject, setQueuedChatProject] = useState<string | null>(
 		null,
 	)
+	const [queuedChatAttachments, setQueuedChatAttachments] = useState<
+		ChatAttachmentDraft[] | null
+	>(null)
 	const [queuedHighlightContent, setQueuedHighlightContent] = useState<
 		string | null
 	>(null)
@@ -494,6 +498,7 @@ export default function NewPage() {
 			setQueuedChatModel(null)
 			setQueuedChatReasoningEffort(null)
 			setQueuedChatProject(null)
+			setQueuedChatAttachments(null)
 			setQueuedMessageSource("highlight")
 			void setViewMode("chat")
 		},
@@ -506,12 +511,14 @@ export default function NewPage() {
 			model: ModelId,
 			projectId: string,
 			reasoningEffort: ReasoningEffort,
+			attachments?: ChatAttachmentDraft[],
 		) => {
 			setQueuedHighlightContent(null)
 			setQueuedChatSeed(message)
 			setQueuedChatModel(model)
 			setQueuedChatReasoningEffort(reasoningEffort)
 			setQueuedChatProject(projectId)
+			setQueuedChatAttachments(attachments ?? null)
 			setQueuedMessageSource("home")
 			void setViewMode("chat")
 		},
@@ -523,6 +530,7 @@ export default function NewPage() {
 		setQueuedChatModel(null)
 		setQueuedChatReasoningEffort(null)
 		setQueuedChatProject(null)
+		setQueuedChatAttachments(null)
 		setQueuedHighlightContent(null)
 		setQueuedMessageSource("highlight")
 	}, [])
@@ -572,17 +580,17 @@ export default function NewPage() {
 	const isDashboardShell =
 		viewMode === "dashboard" || (viewMode === "graph" && isMobile)
 	const isGraphMode = viewMode === "graph"
-	const showBottomNav = isMobile && !!session
+	const showBottomNav = isMobile && !!session && !isChatView
 
 	return (
 		<HotkeysProvider>
 			<div
 				className={cn(
 					"relative flex min-h-dvh flex-col bg-[#05080D]",
-					isGraphMode && "h-dvh overflow-hidden",
+					(isGraphMode || isChatView) && "h-dvh overflow-hidden",
 					showBottomNav &&
 						!isGraphMode &&
-						"pb-[calc(5.5rem+env(safe-area-inset-bottom))]",
+						"pb-[calc(4rem+env(safe-area-inset-bottom))]",
 				)}
 			>
 				{showNovaBackdrop && (
@@ -642,6 +650,7 @@ export default function NewPage() {
 											queuedHighlightContent={queuedHighlightContent}
 											onConsumeQueuedMessage={consumeQueuedChat}
 											queuedMessageSource={queuedMessageSource}
+											queuedAttachments={queuedChatAttachments}
 											initialSelectedModel={queuedChatModel}
 											initialReasoningEffort={queuedChatReasoningEffort}
 											initialChatProject={queuedChatProject}
@@ -761,7 +770,7 @@ export default function NewPage() {
 						className={cn(
 							"pointer-events-none fixed inset-x-0 z-30",
 							showBottomNav
-								? "bottom-[4.25rem]"
+								? "bottom-[calc(4rem+env(safe-area-inset-bottom))]"
 								: "bottom-0 bg-gradient-to-t from-black via-black/40 to-transparent pt-12",
 						)}
 					>
diff --git a/apps/web/components/bottom-nav.tsx b/apps/web/components/bottom-nav.tsx
index c611de5a2..cf0a39716 100644
--- a/apps/web/components/bottom-nav.tsx
+++ b/apps/web/components/bottom-nav.tsx
@@ -55,11 +55,11 @@ export function MobileBottomNav({ onAddMemory, onOpenSearch }: BottomNavProps) {
 		<nav
 			aria-label="Primary"
 			className={cn(
-				"fixed inset-x-0 bottom-[calc(0.75rem+env(safe-area-inset-bottom))] z-40 flex justify-center px-3 md:hidden",
+				"fixed inset-x-0 bottom-0 z-40 border-t border-white/[0.08] bg-[#0A0E14]/85 shadow-[0_-8px_24px_rgba(0,0,0,0.35)] backdrop-blur-xl md:hidden",
 				dmSansClassName(),
 			)}
 		>
-			<div className="flex w-full items-center justify-around rounded-full border border-[#161F2C] bg-muted/95 px-2.5 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.55)] backdrop-blur-xl">
+			<div className="flex items-center justify-around px-1 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
 				<NavTab
 					label="Home"
 					icon={Home}
@@ -76,10 +76,10 @@ export function MobileBottomNav({ onAddMemory, onOpenSearch }: BottomNavProps) {
 					type="button"
 					aria-label="Open chat"
 					onClick={() => void setViewMode("chat")}
-					className="group relative flex size-11 shrink-0 items-center justify-center self-center rounded-full outline-none transition-transform hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-[#4BA0FA]/50"
+					className="group relative flex size-11 shrink-0 items-center justify-center rounded-full shadow-[0_0_18px_rgba(75,160,250,0.35)] outline-none transition-transform hover:scale-[1.04] focus-visible:ring-2 focus-visible:ring-[#4BA0FA]/60 active:scale-95"
 				>
 					<NovaOrb
-						size={42}
+						size={40}
 						className="pointer-events-none blur-[1px]! transition-transform group-hover:scale-105"
 					/>
 				</button>
@@ -172,13 +172,13 @@ function NavTabButton({
 			aria-current={active ? "page" : undefined}
 			onClick={onClick}
 			className={cn(
-				"flex shrink-0 flex-col items-center gap-1 rounded-full px-3 py-1.5 outline-none transition-colors",
+				"flex flex-1 flex-col items-center gap-1 rounded-lg py-1 outline-none transition-colors active:scale-95",
 				active ? "text-white" : "text-[#737373] hover:text-white",
 			)}
 			{...props}
 		>
 			{children}
-			<span className="text-[10px] font-medium leading-none">{label}</span>
+			<span className="text-[11px] font-medium leading-none">{label}</span>
 		</button>
 	)
 }
diff --git a/apps/web/components/chat/attachments.ts b/apps/web/components/chat/attachments.ts
new file mode 100644
index 000000000..c627c3030
--- /dev/null
+++ b/apps/web/components/chat/attachments.ts
@@ -0,0 +1,82 @@
+export const CHAT_ATTACHMENT_ACCEPT =
+	"image/*,.pdf,application/pdf,.doc,.docx,.txt,.md,.mdx,.markdown,text/markdown"
+
+export const CHAT_ATTACHMENT_MAX_BYTES = 50 * 1024 * 1024
+
+const SUPPORTED_EXTENSIONS = new Set([
+	".pdf",
+	".doc",
+	".docx",
+	".txt",
+	".md",
+	".mdx",
+	".markdown",
+])
+
+export type ChatAttachment = {
+	id: string
+	documentId?: string
+	filename: string
+	mediaType: string
+	size: number
+	saveToMemory: boolean
+	status: "ready" | "processing" | "failed"
+	url?: string
+	contentPreview?: string
+}
+
+export type ChatAttachmentDraftStatus =
+	| "queued"
+	| "uploading"
+	| "uploaded"
+	| "error"
+
+export type ChatAttachmentDraft = {
+	id: string
+	file: File
+	saveToMemory: boolean
+	status: ChatAttachmentDraftStatus
+	errorMessage?: string
+	uploaded?: ChatAttachment
+}
+
+export type ChatAttachmentMessageMetadata = {
+	attachments?: ChatAttachment[]
+}
+
+export function isAcceptedChatAttachment(file: File): boolean {
+	if (file.size > CHAT_ATTACHMENT_MAX_BYTES) return false
+	const name = file.name.toLowerCase()
+	const ext = name.includes(".") ? name.slice(name.lastIndexOf(".")) : ""
+	if (SUPPORTED_EXTENSIONS.has(ext)) return true
+	if (file.type.startsWith("image/")) return true
+	if (file.type === "application/pdf") return true
+	if (file.type === "text/markdown") return true
+	return false
+}
+
+export function chatAttachmentKey(file: File): string {
+	return `${file.name}:${file.size}:${file.lastModified}`
+}
+
+export function createChatAttachmentDraft(file: File): ChatAttachmentDraft {
+	return {
+		id: crypto.randomUUID(),
+		file,
+		saveToMemory: true,
+		status: "queued",
+	}
+}
+
+export function formatAttachmentSize(size: number): string {
+	if (size < 1024) return `${size} B`
+	const kb = size / 1024
+	if (kb < 1024) return `${kb.toFixed(1)} KB`
+	return `${(kb / 1024).toFixed(1)} MB`
+}
+
+export function getChatMessageAttachments(metadata: unknown): ChatAttachment[] {
+	const attachments = (metadata as ChatAttachmentMessageMetadata | undefined)
+		?.attachments
+	return Array.isArray(attachments) ? attachments : []
+}
diff --git a/apps/web/components/chat/home-chat-composer.tsx b/apps/web/components/chat/home-chat-composer.tsx
index 5e78fbb8e..7f9d28af5 100644
--- a/apps/web/components/chat/home-chat-composer.tsx
+++ b/apps/web/components/chat/home-chat-composer.tsx
@@ -8,6 +8,14 @@ import { cn } from "@lib/utils"
 import type { ModelId } from "@/lib/models"
 import { SpaceSelector } from "@/components/space-selector"
 import { AUTO_CHAT_SPACE_ID } from "@/lib/chat-auto-space"
+import { toast } from "sonner"
+import {
+	chatAttachmentKey,
+	CHAT_ATTACHMENT_ACCEPT,
+	createChatAttachmentDraft,
+	type ChatAttachmentDraft,
+	isAcceptedChatAttachment,
+} from "./attachments"
 import { ReasoningSelector } from "./reasoning-selector"
 import { getDefaultReasoningEffort, type ReasoningEffort } from "@/lib/models"
 
@@ -20,13 +28,17 @@ export function HomeChatComposer({
 		model: ModelId,
 		projectId: string,
 		reasoningEffort: ReasoningEffort,
+		attachments?: ChatAttachmentDraft[],
 	) => void
 	className?: string
 }) {
 	const [input, setInput] = useState("")
-	const [selectedModel, setSelectedModel] = useState<ModelId>("gemini-2.5-pro")
+	const [attachmentDrafts, setAttachmentDrafts] = useState<
+		ChatAttachmentDraft[]
+	>([])
+	const [selectedModel, setSelectedModel] = useState<ModelId>("grok-4.3")
 	const [reasoningEffort, setReasoningEffort] = useState<ReasoningEffort>(
-		getDefaultReasoningEffort("gemini-2.5-pro"),
+		getDefaultReasoningEffort("grok-4.3"),
 	)
 	const { selectedProject } = useProject()
 	const [chatSpaceProjects, setChatSpaceProjects] = useState<string[]>([
@@ -40,15 +52,18 @@ export function HomeChatComposer({
 
 	const send = useCallback(() => {
 		const t = input.trim()
-		if (!t) return
+		if (!t && attachmentDrafts.length === 0) return
 		onStartChat(
 			t,
 			selectedModel,
 			chatSpaceProjects[0] ?? selectedProject,
 			reasoningEffort,
+			attachmentDrafts,
 		)
 		setInput("")
+		setAttachmentDrafts([])
 	}, [
+		attachmentDrafts,
 		chatSpaceProjects,
 		input,
 		onStartChat,
@@ -57,6 +72,51 @@ export function HomeChatComposer({
 		selectedProject,
 	])
 
+	const handleAddAttachmentFiles = useCallback(
+		(files: FileList | File[]) => {
+			const incoming = Array.from(files)
+			const accepted = incoming.filter(isAcceptedChatAttachment)
+			const rejected = incoming.length - accepted.length
+			if (rejected > 0) {
+				toast.error(
+					rejected === 1
+						? "One attachment is not supported or is over 50MB"
+						: `${rejected} attachments are not supported or are over 50MB`,
+				)
+			}
+			if (accepted.length === 0) return
+
+			const existingKeys = new Set(
+				attachmentDrafts.map((item) => chatAttachmentKey(item.file)),
+			)
+			const nextItems: ChatAttachmentDraft[] = []
+			let duplicateCount = 0
+			for (const file of accepted) {
+				const key = chatAttachmentKey(file)
+				if (existingKeys.has(key)) {
+					duplicateCount++
+					continue
+				}
+				existingKeys.add(key)
+				nextItems.push(createChatAttachmentDraft(file))
+			}
+			if (duplicateCount > 0) {
+				toast.message(
+					duplicateCount === 1
+						? "Skipped duplicate attachment"
+						: `Skipped ${duplicateCount} duplicate attachments`,
+				)
+			}
+			if (nextItems.length === 0) return
+			setAttachmentDrafts((prev) => [...prev, ...nextItems])
+		},
+		[attachmentDrafts],
+	)
+
+	const handleRemoveAttachment = useCallback((id: string) => {
+		setAttachmentDrafts((prev) => prev.filter((item) => item.id !== id))
+	}, [])
+
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter" && !e.shiftKey) {
 			e.preventDefault()
@@ -66,7 +126,7 @@ export function HomeChatComposer({
 
 	return (
 		<div className={cn(className)}>
-			<div className="mx-auto w-full max-w-[720px] px-4 pt-1 pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6">
+			<div className="mx-auto w-full max-w-[720px] px-4 pt-1 pb-2 md:pb-6">
 				<ChatInput
 					value={input}
 					onChange={(e) => setInput(e.target.value)}
@@ -74,27 +134,34 @@ export function HomeChatComposer({
 					onStop={() => {}}
 					onKeyDown={handleKeyDown}
 					isResponding={false}
+					attachments={attachmentDrafts}
+					onAddAttachmentFiles={handleAddAttachmentFiles}
+					onRemoveAttachment={handleRemoveAttachment}
+					canSend={input.trim().length > 0 || attachmentDrafts.length > 0}
+					attachmentAccept={CHAT_ATTACHMENT_ACCEPT}
 					showStatusStrip={false}
 					stackedToolbar={
-						<>
-							<ChatModelSelector
-								selectedModel={selectedModel}
-								onModelChange={handleModelChange}
-								minimal
-							/>
-							<ReasoningSelector
-								value={reasoningEffort}
-								onChange={setReasoningEffort}
-							/>
-							<SpaceSelector
-								selectedProjects={chatSpaceProjects}
-								onValueChange={setChatSpaceProjects}
-								variant="insideOut"
-								includeAuto
-								hideCount
-								triggerClassName="h-auto min-h-0 max-w-[min(160px,35vw)] rounded-full border border-[#161F2C] bg-[#000000] px-3 py-1.5 shadow-none hover:bg-[#05080D]"
-							/>
-						</>
+						<ChatModelSelector
+							selectedModel={selectedModel}
+							onModelChange={handleModelChange}
+							minimal
+						/>
+					}
+					toolbarTrailing={
+						<ReasoningSelector
+							value={reasoningEffort}
+							onChange={setReasoningEffort}
+						/>
+					}
+					toolbarEnd={
+						<SpaceSelector
+							selectedProjects={chatSpaceProjects}
+							onValueChange={setChatSpaceProjects}
+							variant="insideOut"
+							includeAuto
+							hideCount
+							triggerClassName="h-auto min-h-0 max-w-[min(160px,35vw)] gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 shadow-none hover:bg-white/5"
+						/>
 					}
 				/>
 			</div>
diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 5ee10396c..a19daa1e3 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -7,6 +7,7 @@ import { useQueryState } from "nuqs"
 import type { UIMessage } from "@ai-sdk/react"
 import { motion } from "motion/react"
 import { useChat } from "@ai-sdk/react"
+import { isWebSearchToolName } from "@/lib/chat-web-search-tools"
 import { DefaultChatTransport } from "ai"
 import NovaOrb from "@/components/nova/nova-orb"
 import { Button } from "@ui/components/button"
@@ -19,6 +20,7 @@ import {
 } from "@ui/components/sheet"
 import { ScrollArea } from "@ui/components/scroll-area"
 import {
+	ArrowLeftIcon,
 	Check,
 	ChevronDownIcon,
 	HistoryIcon,
@@ -57,8 +59,47 @@ import { useViewMode } from "@/lib/view-mode-context"
 import { threadParam } from "@/lib/search-params"
 import { AUTO_CHAT_SPACE_ID } from "@/lib/chat-auto-space"
 import { ChatEmptyStatePlaceholder } from "./chat-empty-state"
+import { toast } from "sonner"
+import {
+	chatAttachmentKey,
+	CHAT_ATTACHMENT_ACCEPT,
+	createChatAttachmentDraft,
+	type ChatAttachment,
+	type ChatAttachmentDraft,
+	isAcceptedChatAttachment,
+} from "./attachments"
+import { cacheFileBlob, removeCachedFile } from "@/lib/file-cache"
 import { ReasoningSelector } from "./reasoning-selector"
 
+type ChatMessageSendSource = "typed" | "suggested" | "highlight" | "home"
+
+const DISCARD_ATTACHMENT_MAX_ATTEMPTS = 15
+const DISCARD_ATTACHMENT_RETRY_MS = 2000
+
+type RawChatAttachmentResponse = Partial<ChatAttachment> & {
+	attachment?: Partial<ChatAttachment>
+}
+
+function normalizeChatAttachmentResponse(
+	data: RawChatAttachmentResponse,
+	draft: ChatAttachmentDraft,
+): ChatAttachment {
+	const attachment = data.attachment ?? data
+	const id = attachment.id ?? attachment.documentId ?? draft.id
+	return {
+		id,
+		documentId: attachment.documentId,
+		filename: attachment.filename ?? draft.file.name,
+		mediaType:
+			(attachment.mediaType ?? draft.file.type) || "application/octet-stream",
+		size: attachment.size ?? draft.file.size,
+		saveToMemory: attachment.saveToMemory ?? draft.saveToMemory,
+		status: attachment.status ?? "ready",
+		url: attachment.url,
+		contentPreview: attachment.contentPreview,
+	}
+}
+
 export function ChatLaunchFab({
 	onOpen,
 	isMobile,
@@ -106,6 +147,7 @@ type QueuedChatMessage = {
 	text: string
 	model: ModelId
 	reasoningEffort: ReasoningEffort
+	attachments?: ChatAttachment[]
 }
 
 const CHAT_QUEUE_LIMIT = 3
@@ -133,6 +175,7 @@ export function ChatSidebar({
 	queuedHighlightContent,
 	onConsumeQueuedMessage,
 	queuedMessageSource = "highlight",
+	queuedAttachments = null,
 	initialSelectedModel = null,
 	initialReasoningEffort = null,
 	initialChatProject = null,
@@ -145,6 +188,7 @@ export function ChatSidebar({
 	queuedHighlightContent?: string | null
 	onConsumeQueuedMessage?: () => void
 	queuedMessageSource?: "highlight" | "home"
+	queuedAttachments?: ChatAttachmentDraft[] | null
 	initialSelectedModel?: ModelId | null
 	initialReasoningEffort?: ReasoningEffort | null
 	initialChatProject?: string | null
@@ -154,12 +198,15 @@ export function ChatSidebar({
 	const isMobile = useIsMobile()
 	const isPageDesktop = layout === "page" && !isMobile
 	const [input, setInput] = useState("")
+	const [attachmentDrafts, setAttachmentDrafts] = useState<
+		ChatAttachmentDraft[]
+	>([])
 	const [selectedModel, setSelectedModel] = useState<ModelId>(
-		initialSelectedModel ?? "claude-sonnet-4.6",
+		initialSelectedModel ?? "grok-4.3",
 	)
 	const [reasoningEffort, setReasoningEffort] = useState<ReasoningEffort>(
 		initialReasoningEffort ??
-			getDefaultReasoningEffort(initialSelectedModel ?? "claude-sonnet-4.6"),
+			getDefaultReasoningEffort(initialSelectedModel ?? "grok-4.3"),
 	)
 	const selectedModelRef = useRef(selectedModel)
 	selectedModelRef.current = selectedModel
@@ -222,6 +269,12 @@ export function ChatSidebar({
 	const awaitingHighlightInjectionRef = useRef(false)
 	const pendingHighlightMessageRef = useRef<UIMessage[] | null>(null)
 	const targetHighlightChatIdRef = useRef<string | null>(null)
+	const pendingRequestAttachmentsRef = useRef<ChatAttachment[]>([])
+	const uploadPromisesRef = useRef<Map<string, Promise<ChatAttachment>>>(
+		new Map(),
+	)
+	const abortControllersRef = useRef<Map<string, AbortController>>(new Map())
+	const discardedDraftIdsRef = useRef<Set<string>>(new Set())
 	const { selectedProject } = useProject()
 	const [chatSpaceProjects, setChatSpaceProjects] = useState<string[]>([
 		initialChatProject ?? AUTO_CHAT_SPACE_ID,
@@ -300,9 +353,18 @@ export function ChatSidebar({
 					const sendSettings = pendingSendSettingsRef.current
 					pendingSendSettingsRef.current = null
 
+					// Tool parts (incl. Anthropic server-side web search) don't round-trip
+					// through convertToModelMessages and cause tool_use/tool_result mismatches.
+					const sanitizedMessages = messages.map((m) => ({
+						...m,
+						parts: (m.parts ?? []).filter(
+							(p) => !p.type.startsWith("tool-") && p.type !== "dynamic-tool",
+						),
+					}))
+
 					return {
 						body: {
-							messages,
+							messages: sanitizedMessages,
 							metadata: {
 								chatId: chatIdRef.current,
 								projectId: selectedProjectRef.current,
@@ -316,6 +378,9 @@ export function ChatSidebar({
 								reasoningEffort:
 									sendSettings?.reasoningEffort ?? reasoningEffortRef.current,
 								truncateFromMessageId: truncateFromMessageIdRef.current,
+								...(pendingRequestAttachmentsRef.current.length > 0 && {
+									attachments: pendingRequestAttachmentsRef.current,
+								}),
 							},
 						},
 					}
@@ -408,6 +473,258 @@ export function ChatSidebar({
 		[clearError],
 	)
 
+	const setAttachmentDraftState = useCallback(
+		(id: string, patch: Partial<ChatAttachmentDraft>) => {
+			setAttachmentDrafts((prev) =>
+				prev.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+			)
+		},
+		[],
+	)
+
+	const discardUploadedAttachment = useCallback(
+		(documentId: string) => {
+			void removeCachedFile(documentId)
+
+			const run = async (attempt: number): Promise<void> => {
+				try {
+					const response = await fetch(
+						`${chatApiBase}/chat/attachments/${documentId}`,
+						{
+							method: "DELETE",
+							credentials: "include",
+						},
+					)
+
+					if (
+						response.status === 409 &&
+						attempt < DISCARD_ATTACHMENT_MAX_ATTEMPTS
+					) {
+						setTimeout(() => {
+							void run(attempt + 1)
+						}, DISCARD_ATTACHMENT_RETRY_MS)
+						return
+					}
+
+					if (!response.ok && response.status !== 404) {
+						console.warn("Failed to discard chat attachment", {
+							documentId,
+							status: response.status,
+						})
+					}
+				} catch (error) {
+					if (attempt < DISCARD_ATTACHMENT_MAX_ATTEMPTS) {
+						setTimeout(() => {
+							void run(attempt + 1)
+						}, DISCARD_ATTACHMENT_RETRY_MS)
+						return
+					}
+					console.warn("Failed to discard chat attachment", {
+						documentId,
+						error,
+					})
+				}
+			}
+
+			void run(1)
+		},
+		[chatApiBase],
+	)
+
+	const uploadAttachmentDraft = useCallback(
+		(
+			draft: ChatAttachmentDraft,
+			chatIdForUpload: string,
+		): Promise<ChatAttachment> => {
+			if (draft.status === "uploaded" && draft.uploaded) {
+				return Promise.resolve(draft.uploaded)
+			}
+
+			const inflight = uploadPromisesRef.current.get(draft.id)
+			if (inflight) return inflight
+
+			const uploadPromise = (async (): Promise<ChatAttachment> => {
+				const controller = new AbortController()
+				abortControllersRef.current.set(draft.id, controller)
+
+				setAttachmentDraftState(draft.id, {
+					status: "uploading",
+					errorMessage: undefined,
+				})
+
+				const formData = new FormData()
+				formData.append("file", draft.file)
+				formData.append("threadId", chatIdForUpload)
+				formData.append("projectId", selectedProjectRef.current)
+				formData.append("saveToMemory", String(draft.saveToMemory))
+
+				try {
+					const response = await fetch(`${chatApiBase}/chat/attachments`, {
+						method: "POST",
+						body: formData,
+						credentials: "include",
+						signal: controller.signal,
+					})
+
+					if (!response.ok) {
+						let message = "Failed to upload attachment"
+						try {
+							const error = (await response.json()) as {
+								error?: string
+								message?: string
+							}
+							message = error.error ?? error.message ?? message
+						} catch {
+							// keep the fallback error
+						}
+						throw new Error(message)
+					}
+
+					const data = (await response.json()) as RawChatAttachmentResponse
+					const attachment = normalizeChatAttachmentResponse(data, draft)
+
+					abortControllersRef.current.delete(draft.id)
+
+					if (discardedDraftIdsRef.current.has(draft.id)) {
+						discardedDraftIdsRef.current.delete(draft.id)
+						if (attachment.documentId) {
+							discardUploadedAttachment(attachment.documentId)
+						}
+						return attachment
+					}
+
+					if (attachment.documentId) {
+						void cacheFileBlob(
+							attachment.documentId,
+							draft.file,
+							draft.file.type,
+						)
+					}
+					setAttachmentDraftState(draft.id, {
+						status: "uploaded",
+						uploaded: attachment,
+					})
+					return attachment
+				} catch (error) {
+					abortControllersRef.current.delete(draft.id)
+					uploadPromisesRef.current.delete(draft.id)
+
+					if (error instanceof DOMException && error.name === "AbortError") {
+						throw error
+					}
+
+					if (discardedDraftIdsRef.current.has(draft.id)) {
+						discardedDraftIdsRef.current.delete(draft.id)
+						throw error
+					}
+
+					const message =
+						error instanceof Error
+							? error.message
+							: "Failed to upload attachment"
+					setAttachmentDraftState(draft.id, {
+						status: "error",
+						errorMessage: message,
+					})
+					throw error
+				}
+			})()
+
+			uploadPromisesRef.current.set(draft.id, uploadPromise)
+			return uploadPromise
+		},
+		[chatApiBase, discardUploadedAttachment, setAttachmentDraftState],
+	)
+
+	const uploadAttachmentDrafts = useCallback(
+		async (drafts: ChatAttachmentDraft[], chatIdForUpload: string) => {
+			const uploaded: ChatAttachment[] = []
+			for (const draft of drafts) {
+				uploaded.push(await uploadAttachmentDraft(draft, chatIdForUpload))
+			}
+			return uploaded
+		},
+		[uploadAttachmentDraft],
+	)
+
+	const handleAddAttachmentFiles = useCallback(
+		(files: FileList | File[]) => {
+			const incoming = Array.from(files)
+			const accepted = incoming.filter(isAcceptedChatAttachment)
+			const rejected = incoming.length - accepted.length
+			if (rejected > 0) {
+				toast.error(
+					rejected === 1
+						? "One attachment is not supported or is over 50MB"
+						: `${rejected} attachments are not supported or are over 50MB`,
+				)
+			}
+			if (accepted.length === 0) return
+
+			const existingKeys = new Set(
+				attachmentDrafts.map((item) => chatAttachmentKey(item.file)),
+			)
+			const nextItems: ChatAttachmentDraft[] = []
+			let duplicateCount = 0
+			for (const file of accepted) {
+				const key = chatAttachmentKey(file)
+				if (existingKeys.has(key)) {
+					duplicateCount++
+					continue
+				}
+				existingKeys.add(key)
+				nextItems.push(createChatAttachmentDraft(file))
+			}
+			if (duplicateCount > 0) {
+				toast.message(
+					duplicateCount === 1
+						? "Skipped duplicate attachment"
+						: `Skipped ${duplicateCount} duplicate attachments`,
+				)
+			}
+			if (nextItems.length === 0) return
+			setAttachmentDrafts((prev) => [...prev, ...nextItems])
+
+			for (const draft of nextItems) {
+				void uploadAttachmentDraft(draft, currentChatId).catch(() => {
+					// Upload errors are reflected on the draft state unless the draft was removed.
+				})
+			}
+		},
+		[attachmentDrafts, currentChatId, uploadAttachmentDraft],
+	)
+
+	const handleRemoveAttachment = useCallback(
+		(id: string) => {
+			const draft = attachmentDrafts.find((item) => item.id === id)
+			discardedDraftIdsRef.current.add(id)
+
+			const controller = abortControllersRef.current.get(id)
+			if (controller) {
+				controller.abort()
+				abortControllersRef.current.delete(id)
+			}
+			uploadPromisesRef.current.delete(id)
+
+			const documentId = draft?.uploaded?.documentId
+			if (draft?.status === "uploaded" && documentId) {
+				discardUploadedAttachment(documentId)
+			}
+
+			setAttachmentDrafts((prev) => prev.filter((item) => item.id !== id))
+		},
+		[attachmentDrafts, discardUploadedAttachment],
+	)
+
+	const handleRetryAttachment = useCallback(
+		(id: string) => {
+			const draft = attachmentDrafts.find((item) => item.id === id)
+			if (!draft) return
+			void uploadAttachmentDraft(draft, currentChatId)
+		},
+		[attachmentDrafts, currentChatId, uploadAttachmentDraft],
+	)
+
 	useEffect(() => {
 		if (pendingThreadLoad && currentChatId === pendingThreadLoad.id) {
 			setMessages(pendingThreadLoad.messages)
@@ -441,65 +758,138 @@ export function ChatSidebar({
 		}
 	}, [])
 
-	const handleSend = () => {
-		const text = input.trim()
-		if (!text) return
+	const submitChatMessage = useCallback(
+		async (
+			text: string,
+			source: ChatMessageSendSource,
+			drafts = attachmentDrafts,
+		): Promise<boolean> => {
+			const trimmed = text.trim()
+			if (!trimmed && drafts.length === 0) return false
 
-		if (status === "submitted" || status === "streaming") {
-			if (messageQueue.length >= CHAT_QUEUE_LIMIT) return
+			const hasBusy = drafts.some(
+				(d) => d.status === "uploading" || d.status === "queued",
+			)
+			if (hasBusy) return false
+			const hasErrored = drafts.some((d) => d.status === "error")
+			if (hasErrored) return false
 
-			setMessageQueue((prev) => {
-				if (prev.length >= CHAT_QUEUE_LIMIT) return prev
-				return [
-					...prev,
-					{
-						id: generateId(),
-						text,
-						model: selectedModel,
-						reasoningEffort,
-					},
-				]
-			})
-			setInput("")
-			analytics.chatMessageSent({ source: "typed" })
-			userJustSentRef.current = true
-			scrollToBottom()
-			return
-		}
+			const chatIdForSend = threadId ?? fallbackChatId
 
-		truncateFromMessageIdRef.current = null
-		if (!threadId) setThreadId(fallbackChatId)
-		analytics.chatMessageSent({ source: "typed" })
-		pendingResponseModelsRef.current.push(selectedModel)
-		sendMessage({ text })
-		setInput("")
-		userJustSentRef.current = true
-		scrollToBottom()
-	}
+			try {
+				const uploadedAttachments =
+					drafts.length > 0
+						? await uploadAttachmentDrafts(drafts, chatIdForSend)
+						: []
+				const messageText = trimmed || "Analyze the attached file(s)."
+				const isRespondingNow = status === "submitted" || status === "streaming"
+
+				if (isRespondingNow) {
+					if (messageQueue.length >= CHAT_QUEUE_LIMIT) return false
+					setMessageQueue((prev) => {
+						if (prev.length >= CHAT_QUEUE_LIMIT) return prev
+						return [
+							...prev,
+							{
+								id: generateId(),
+								text: messageText,
+								model: selectedModel,
+								reasoningEffort,
+								attachments: uploadedAttachments,
+							},
+						]
+					})
+					analytics.chatMessageSent({
+						source,
+						attachment_count: uploadedAttachments.length,
+						saved_attachment_count: uploadedAttachments.filter(
+							(attachment) => attachment.saveToMemory,
+						).length,
+						temporary_attachment_count: uploadedAttachments.filter(
+							(attachment) => !attachment.saveToMemory,
+						).length,
+					})
+					setInput("")
+					setAttachmentDrafts([])
+					uploadPromisesRef.current.clear()
+					abortControllersRef.current.clear()
+					discardedDraftIdsRef.current.clear()
+					userJustSentRef.current = true
+					scrollToBottom()
+					return true
+				}
 
-	const handleSuggestedQuestion = useCallback(
-		(suggestion: string) => {
-			if (status === "submitted" || status === "streaming") return
-			truncateFromMessageIdRef.current = null
-			if (!threadId) setThreadId(fallbackChatId)
-			analytics.chatSuggestedQuestionClicked()
-			analytics.chatMessageSent({ source: "suggested" })
-			pendingResponseModelsRef.current.push(selectedModel)
-			sendMessage({ text: suggestion })
-			userJustSentRef.current = true
-			scrollToBottom()
+				truncateFromMessageIdRef.current = null
+				if (!threadId) setThreadId(fallbackChatId)
+				pendingRequestAttachmentsRef.current = uploadedAttachments
+				analytics.chatMessageSent({
+					source,
+					attachment_count: uploadedAttachments.length,
+					saved_attachment_count: uploadedAttachments.filter(
+						(attachment) => attachment.saveToMemory,
+					).length,
+					temporary_attachment_count: uploadedAttachments.filter(
+						(attachment) => !attachment.saveToMemory,
+					).length,
+				})
+
+				setInput("")
+				setAttachmentDrafts([])
+				uploadPromisesRef.current.clear()
+				abortControllersRef.current.clear()
+				discardedDraftIdsRef.current.clear()
+				userJustSentRef.current = true
+				scrollToBottom()
+				pendingResponseModelsRef.current.push(selectedModel)
+
+				void sendMessage({
+					text: messageText,
+					metadata:
+						uploadedAttachments.length > 0
+							? { attachments: uploadedAttachments }
+							: undefined,
+				}).finally(() => {
+					pendingRequestAttachmentsRef.current = []
+				})
+
+				return true
+			} catch (error) {
+				pendingRequestAttachmentsRef.current = []
+				toast.error("Failed to send message", {
+					description:
+						error instanceof Error ? error.message : "Please try again.",
+				})
+				return false
+			}
 		},
 		[
+			attachmentDrafts,
 			fallbackChatId,
+			messageQueue.length,
+			reasoningEffort,
+			scrollToBottom,
+			selectedModel,
 			sendMessage,
 			setThreadId,
 			status,
 			threadId,
-			scrollToBottom,
-			selectedModel,
+			uploadAttachmentDrafts,
 		],
 	)
 
+	const handleSend = () => {
+		void submitChatMessage(input, "typed")
+	}
+
+	const handleSuggestedQuestion = useCallback(
+		(suggestion: string) => {
+			if (status === "submitted" || status === "streaming") return
+			analytics.chatSuggestedQuestionClicked()
+			void submitChatMessage(suggestion, "suggested", [])
+		},
+		[status, submitChatMessage],
+	)
+
 	const handleRegenerateFromUserMessage = useCallback(
 		(
 			messageId: string,
@@ -624,6 +1014,13 @@ export function ChatSidebar({
 		setThreadId(null)
 		setFallbackChatId(newChatId)
 		setInput("")
+		setAttachmentDrafts([])
+		for (const controller of abortControllersRef.current.values()) {
+			controller.abort()
+		}
+		abortControllersRef.current.clear()
+		discardedDraftIdsRef.current.clear()
+		uploadPromisesRef.current.clear()
 		setMessageQueue([])
 		pendingResponseModelsRef.current = []
 		seenAssistantMessageIdsRef.current = new Set()
@@ -677,11 +1074,14 @@ export function ChatSidebar({
 						}) => ({
 							id: m.id,
 							role: m.role,
-							// Strip tool parts — persisted format doesn't round-trip through
-							// convertToModelMessages correctly and causes tool_use/tool_result
-							// mismatch errors. Text history is sufficient for context.
+							// Strip tool parts (they break convertToModelMessages with tool_use/tool_result
+							// mismatches); keep text/reasoning + source parts so citations survive reload.
 							parts: (m.parts || []).filter(
-								(p) => p.type === "text" || p.type === "reasoning",
+								(p) =>
+									p.type === "text" ||
+									p.type === "reasoning" ||
+									p.type === "source-url" ||
+									p.type === "source-document",
 							),
 							metadata: m.metadata,
 							createdAt: new Date(m.createdAt),
@@ -791,9 +1191,9 @@ export function ChatSidebar({
 				return
 			}
 			sentQueuedMessageRef.current = queuedMessage
-			analytics.chatMessageSent({ source: queuedMessageSource })
 
 			if (queuedHighlightContent) {
+				analytics.chatMessageSent({ source: queuedMessageSource })
 				truncateFromMessageIdRef.current = null
 				// Start a fresh thread for highlight-based chats to avoid overwriting existing conversations
 				const newChatId = generateId()
@@ -825,12 +1225,23 @@ export function ChatSidebar({
 					},
 				]
 			} else {
-				truncateFromMessageIdRef.current = null
-				if (!threadId) setThreadId(fallbackChatId)
-				queuedDispatchInFlightRef.current = true
-				queuedDispatchSawResponseRef.current = false
-				pendingResponseModelsRef.current.push(selectedModel)
-				sendMessage({ text: queuedMessage })
+				if (queuedAttachments?.length) {
+					setAttachmentDrafts(queuedAttachments)
+				}
+				void submitChatMessage(
+					queuedMessage,
+					queuedMessageSource,
+					queuedAttachments ?? [],
+				).then((sent) => {
+					if (!sent) {
+						setInput(queuedMessage)
+						if (queuedAttachments?.length) {
+							setAttachmentDrafts(queuedAttachments)
+						}
+					}
+					onConsumeQueuedMessage?.()
+				})
+				return
 			}
 			onConsumeQueuedMessage?.()
 		}
@@ -839,16 +1250,15 @@ export function ChatSidebar({
 		queuedMessage,
 		queuedHighlightContent,
 		queuedMessageSource,
+		queuedAttachments,
 		initialSelectedModel,
 		initialReasoningEffort,
 		selectedModel,
 		reasoningEffort,
 		status,
-		sendMessage,
 		onConsumeQueuedMessage,
-		fallbackChatId,
 		setThreadId,
-		threadId,
+		submitChatMessage,
 	])
 
 	// Inject the pending highlight assistant message once the new Chat instance is ready.
@@ -935,7 +1345,16 @@ export function ChatSidebar({
 				? prev.slice(1)
 				: prev.filter((item) => item.id !== nextMessage.id),
 		)
-		sendMessage({ text: nextMessage.text })
+		pendingRequestAttachmentsRef.current = nextMessage.attachments ?? []
+		void sendMessage({
+			text: nextMessage.text,
+			metadata:
+				nextMessage.attachments && nextMessage.attachments.length > 0
+					? { attachments: nextMessage.attachments }
+					: undefined,
+		}).finally(() => {
+			pendingRequestAttachmentsRef.current = []
+		})
 		userJustSentRef.current = true
 		scrollToBottom()
 	}, [
@@ -1064,6 +1483,35 @@ export function ChatSidebar({
 	const isStackedInput = layout === "page"
 	const showHeaderRow = !isPageDesktop || isMobile || !isStackedInput
 	const isResponding = status === "submitted" || status === "streaming"
+	const isWebSearching =
+		isResponding &&
+		(() => {
+			const last = messages[messages.length - 1]
+			if (!last || last.role !== "assistant") return false
+			const parts = last.parts ?? []
+			const searching = parts.some(
+				(p) =>
+					(p.type === "dynamic-tool" &&
+						isWebSearchToolName((p as { toolName?: string }).toolName ?? "")) ||
+					(p.type.startsWith("tool-") &&
+						isWebSearchToolName(p.type.slice("tool-".length))),
+			)
+			const hasText = parts.some(
+				(p) => p.type === "text" && (p as { text?: string }).text?.trim(),
+			)
+			return searching && !hasText
+		})()
+	const hasBusyAttachment = attachmentDrafts.some(
+		(attachment) =>
+			attachment.status === "uploading" || attachment.status === "queued",
+	)
+	const hasErroredAttachment = attachmentDrafts.some(
+		(attachment) => attachment.status === "error",
+	)
+	const canSendMessage =
+		(input.trim().length > 0 || attachmentDrafts.length > 0) &&
+		!hasBusyAttachment &&
+		!hasErroredAttachment
 	const showInputStatusStrip =
 		!isStackedInput || isResponding || messages.length > 0
 	const isQueueFull = messageQueue.length >= CHAT_QUEUE_LIMIT
@@ -1332,6 +1780,16 @@ export function ChatSidebar({
 					)}
 				>
 					<div className="mr-2 flex min-w-0 flex-1 items-center gap-2">
+						{isMobile && (
+							<button
+								type="button"
+								onClick={() => _setIsChatOpen(false)}
+								aria-label="Back"
+								className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-[#161F2C] bg-black text-[#FAFAFA] transition-colors hover:bg-[#161F2C]"
+							>
+								<ArrowLeftIcon className="size-5" />
+							</button>
+						)}
 						{!isStackedInput && (
 							<>
 								<ChatModelSelector
@@ -1385,9 +1843,8 @@ export function ChatSidebar({
 						className={
 							messages.length > 0
 								? cn(
-										"flex flex-col space-y-3 min-h-full justify-end",
+										"flex flex-col space-y-3 min-h-full justify-end pb-4",
 										isPageDesktop || isMobile ? "pt-2" : "pt-14",
-										isStackedInput && "px-4",
 									)
 								: ""
 						}
@@ -1435,11 +1892,6 @@ export function ChatSidebar({
 								)}
 							</div>
 						))}
-						{(status === "submitted" || status === "streaming") && (
-							<div className="flex gap-2">
-								<SuperLoader label="Thinking…" />
-							</div>
-						)}
 					</div>
 				</div>
 
@@ -1462,8 +1914,7 @@ export function ChatSidebar({
 				<div
 					role="alert"
 					className={cn(
-						"mb-2 rounded-lg bg-amber-950/40 px-3 py-2 text-sm text-amber-50/95",
-						isPageDesktop ? "mx-0" : "mx-4",
+						"mx-4 mb-2 rounded-lg bg-amber-950/40 px-3 py-2 text-sm text-amber-50/95",
 						dmSansClassName(),
 					)}
 				>
@@ -1515,7 +1966,7 @@ export function ChatSidebar({
 					"shrink-0",
 					isStackedInput &&
 						(isMobile
-							? "px-4 pb-2"
+							? "px-4 pb-[max(0.5rem,env(safe-area-inset-bottom))]"
 							: "px-4 pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6"),
 				)}
 			>
@@ -1526,16 +1977,24 @@ export function ChatSidebar({
 					onStop={handleStop}
 					onKeyDown={handleKeyDown}
 					isResponding={isResponding}
+					attachments={attachmentDrafts}
+					onAddAttachmentFiles={handleAddAttachmentFiles}
+					onRemoveAttachment={handleRemoveAttachment}
+					onRetryAttachment={handleRetryAttachment}
+					canSend={canSendMessage}
+					attachmentAccept={CHAT_ATTACHMENT_ACCEPT}
 					sendDisabled={isResponding && isQueueFull}
 					sendDisabledTooltip={`Queue is full (${CHAT_QUEUE_LIMIT} max)`}
 					activeStatus={
 						isResponding && isQueueFull
 							? `Queue full (${CHAT_QUEUE_LIMIT} max)`
-							: status === "submitted"
-								? "Thinking…"
-								: status === "streaming"
-									? "Structuring response…"
-									: "Waiting for input…"
+							: isWebSearching
+								? "Searching the web…"
+								: status === "submitted"
+									? "Thinking…"
+									: status === "streaming"
+										? "Thinking…"
+										: "Waiting for input…"
 					}
 					queuedMessages={messageQueue}
 					showStatusStrip={showInputStatusStrip}
@@ -1545,25 +2004,31 @@ export function ChatSidebar({
 					}
 					stackedToolbar={
 						isStackedInput ? (
-							<>
-								<ChatModelSelector
-									selectedModel={selectedModel}
-									onModelChange={handleModelChange}
-									minimal
-								/>
-								<ReasoningSelector
-									value={reasoningEffort}
-									onChange={setReasoningEffort}
-								/>
-								<SpaceSelector
-									selectedProjects={chatSpaceProjects}
-									onValueChange={setChatSpaceProjects}
-									variant="insideOut"
-									includeAuto
-									hideCount
-									triggerClassName="h-auto min-h-0 max-w-[min(160px,35vw)] rounded-full border border-[#161F2C] bg-[#000000] px-3 py-1.5 shadow-none hover:bg-[#05080D]"
-								/>
-							</>
+							<ChatModelSelector
+								selectedModel={selectedModel}
+								onModelChange={handleModelChange}
+								minimal
+							/>
+						) : undefined
+					}
+					toolbarTrailing={
+						isStackedInput ? (
+							<ReasoningSelector
+								value={reasoningEffort}
+								onChange={setReasoningEffort}
+							/>
+						) : undefined
+					}
+					toolbarEnd={
+						isStackedInput ? (
+							<SpaceSelector
+								selectedProjects={chatSpaceProjects}
+								onValueChange={setChatSpaceProjects}
+								variant="insideOut"
+								includeAuto
+								hideCount
+								triggerClassName="h-auto min-h-0 max-w-[min(160px,35vw)] gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 shadow-none hover:bg-white/5"
+							/>
 						) : undefined
 					}
 				/>
diff --git a/apps/web/components/chat/input/index.tsx b/apps/web/components/chat/input/index.tsx
index 36ceb9b97..d655d6572 100644
--- a/apps/web/components/chat/input/index.tsx
+++ b/apps/web/components/chat/input/index.tsx
@@ -1,12 +1,28 @@
 "use client"
 
-import { BrainIcon, ChevronUpIcon, ZapIcon } from "lucide-react"
+import {
+	BrainIcon,
+	CheckIcon,
+	ChevronUpIcon,
+	Loader2Icon,
+	PaperclipIcon,
+	RotateCcwIcon,
+	XIcon,
+	ZapIcon,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog"
 import NovaOrb from "@/components/nova/nova-orb"
+import { SuperLoader } from "@/components/superloader"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
 import { type ReactNode, useEffect, useRef, useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
 import { SendButton, StopButton } from "./actions"
+import {
+	CHAT_ATTACHMENT_ACCEPT,
+	type ChatAttachmentDraft,
+	formatAttachmentSize,
+} from "../attachments"
 import { type ModelId, modelNames, type ReasoningEffort } from "@/lib/models"
 
 export interface QueuedChatMessagePreview {
@@ -31,8 +47,18 @@ interface ChatInputProps {
 	onExpandedChange?: (expanded: boolean) => void
 	/** Model + space controls on one row with send; textarea full-width above */
 	stackedToolbar?: ReactNode
+	/** Trailing controls rendered after the attach button (e.g. reasoning) */
+	toolbarTrailing?: ReactNode
+	/** Controls rendered just left of the send button (e.g. space selector) */
+	toolbarEnd?: ReactNode
 	/** Nova status row + chain-of-thought toggle (off for e.g. home composer) */
 	showStatusStrip?: boolean
+	attachments?: ChatAttachmentDraft[]
+	onAddAttachmentFiles?: (files: FileList | File[]) => void
+	onRemoveAttachment?: (id: string) => void
+	onRetryAttachment?: (id: string) => void
+	canSend?: boolean
+	attachmentAccept?: string
 }
 
 export default function ChatInput({
@@ -49,17 +75,27 @@ export default function ChatInput({
 	chainOfThoughtComponent,
 	onExpandedChange,
 	stackedToolbar,
+	toolbarTrailing,
+	toolbarEnd,
 	showStatusStrip = true,
+	attachments = [],
+	onAddAttachmentFiles,
+	onRemoveAttachment,
+	onRetryAttachment,
+	canSend,
+	attachmentAccept = CHAT_ATTACHMENT_ACCEPT,
 }: ChatInputProps) {
 	const [isMultiline, setIsMultiline] = useState(false)
 	const [isExpanded, setIsExpanded] = useState(false)
+	const [isDraggingFiles, setIsDraggingFiles] = useState(false)
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
-	const isSendDisabled = !value.trim() || sendDisabled
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	const dragDepthRef = useRef(0)
+	const canSubmit = canSend ?? value.trim().length > 0
+	const isSendDisabled = !canSubmit || sendDisabled
 	const hasQueuedPreview = queuedMessages.length > 0
 	const resolvedSendDisabledTooltip =
-		sendDisabled && value.trim()
-			? sendDisabledTooltip
-			: "Type a message to send"
+		sendDisabled && canSubmit ? sendDisabledTooltip : "Type a message to send"
 
 	useEffect(() => {
 		if (!showStatusStrip && isExpanded) {
@@ -81,12 +117,101 @@ export default function ChatInput({
 		setIsMultiline(textarea.scrollHeight > 52)
 	}
 
+	const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files = e.target.files
+		if (files?.length) onAddAttachmentFiles?.(files)
+		e.target.value = ""
+	}
+
+	const canAttachFiles = Boolean(onAddAttachmentFiles) && !isResponding
+	const hasDraggedFiles = (e: React.DragEvent) =>
+		Array.from(e.dataTransfer.types).includes("Files")
+
+	const handleDragEnter = (e: React.DragEvent) => {
+		if (!hasDraggedFiles(e)) return
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current += 1
+		if (canAttachFiles) setIsDraggingFiles(true)
+	}
+
+	const handleDragOver = (e: React.DragEvent) => {
+		if (!hasDraggedFiles(e)) return
+		e.preventDefault()
+		e.stopPropagation()
+		e.dataTransfer.dropEffect = canAttachFiles ? "copy" : "none"
+	}
+
+	const handleDragLeave = (e: React.DragEvent) => {
+		if (!hasDraggedFiles(e)) return
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+		if (dragDepthRef.current === 0) setIsDraggingFiles(false)
+	}
+
+	const handleDrop = (e: React.DragEvent) => {
+		if (!hasDraggedFiles(e)) return
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current = 0
+		setIsDraggingFiles(false)
+		const files = e.dataTransfer.files
+		if (canAttachFiles && files.length) onAddAttachmentFiles?.(files)
+	}
+
+	const showAttachments = attachments.length > 0
+
+	const attachmentTray = showAttachments ? (
+		<div className="scrollbar-none flex max-w-full gap-2 overflow-x-auto px-0 pb-1 sm:px-1">
+			{attachments.map((attachment) => {
+				return (
+					<AttachmentPreviewChip
+						key={attachment.id}
+						attachment={attachment}
+						onRemove={onRemoveAttachment}
+						onRetry={onRetryAttachment}
+					/>
+				)
+			})}
+		</div>
+	) : null
+
+	const attachmentButton = onAddAttachmentFiles ? (
+		<>
+			<input
+				ref={fileInputRef}
+				type="file"
+				multiple
+				accept={attachmentAccept}
+				onChange={handleFileSelect}
+				className="hidden"
+			/>
+			<button
+				type="button"
+				onClick={() => fileInputRef.current?.click()}
+				disabled={isResponding}
+				className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-white/45 transition-colors hover:bg-white/5 hover:text-white/80 disabled:cursor-not-allowed disabled:opacity-50"
+				aria-label="Attach files"
+				title="Attach files"
+			>
+				<PaperclipIcon className="size-4" />
+			</button>
+		</>
+	) : null
+
+	const dropOverlay = isDraggingFiles ? (
+		<div className="pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-lg border border-dashed border-[#4B5563] bg-black/70 text-sm font-medium text-fg-primary backdrop-blur-sm">
+			Drop files to attach
+		</div>
+	) : null
+
 	return (
 		<motion.div
 			className={cn("relative z-20!")}
 			animate={{
 				padding: showStatusStrip ? (isExpanded ? "16px" : "0") : "0",
-				margin: showStatusStrip ? (isExpanded ? "0" : "16px") : "0",
+				margin: "0",
 				borderRadius: showStatusStrip
 					? isExpanded
 						? "0 0 12px 12px"
@@ -133,10 +258,16 @@ export default function ChatInput({
 						disabled={!chainOfThoughtComponent}
 					>
 						<div className="flex items-center gap-3">
-							<NovaOrb size={24} className="blur-[1px]! z-10" />
-							<p className={cn("text-[#525D6E]", dmSansClassName())}>
-								{activeStatus || "Waiting for input..."}
-							</p>
+							{isResponding ? (
+								<SuperLoader label={activeStatus || "Thinking…"} />
+							) : (
+								<>
+									<NovaOrb size={24} className="blur-[1px]! z-10" />
+									<p className={cn("text-[#525D6E]", dmSansClassName())}>
+										{activeStatus || "Waiting for input..."}
+									</p>
+								</>
+							)}
 						</div>
 						{chainOfThoughtComponent && (
 							<ChevronUpIcon
@@ -195,7 +326,16 @@ export default function ChatInput({
 				</>
 			) : null}
 			{stackedToolbar ? (
-				<div className="relative z-30 flex flex-col gap-2 rounded-xl bg-surface-card/60 backdrop-blur-md p-2 shadow-[0_16px_48px_rgba(0,0,0,0.34)] transition-all duration-200 focus-within:ring-1 focus-within:ring-fg-primary/10">
+				<fieldset
+					aria-label="Chat input with file drop zone"
+					onDragEnter={handleDragEnter}
+					onDragOver={handleDragOver}
+					onDragLeave={handleDragLeave}
+					onDrop={handleDrop}
+					className="relative z-30 m-0 flex min-w-0 flex-col gap-2 rounded-xl border-0 bg-surface-card/60 p-2 shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-md transition-all duration-200 focus-within:ring-1 focus-within:ring-fg-primary/10"
+				>
+					{dropOverlay}
+					{attachmentTray}
 					<textarea
 						ref={textareaRef}
 						value={value}
@@ -207,12 +347,15 @@ export default function ChatInput({
 						rows={1}
 					/>
 					<div className="flex items-center gap-2">
-						<div className="flex min-w-0 flex-1 items-center gap-2">
+						<div className="flex min-w-0 flex-1 items-center gap-1.5">
 							{stackedToolbar}
+							{attachmentButton}
+							{toolbarTrailing}
 						</div>
 						<div className="flex shrink-0 items-center gap-1.5">
+							{toolbarEnd}
 							{isResponding && <StopButton onClick={onStop} />}
-							{(!isResponding || value.trim()) && (
+							{(!isResponding || canSubmit) && (
 								<SendButton
 									onClick={onSend}
 									disabled={isSendDisabled}
@@ -221,14 +364,21 @@ export default function ChatInput({
 							)}
 						</div>
 					</div>
-				</div>
+				</fieldset>
 			) : (
-				<div
+				<fieldset
+					aria-label="Chat input with file drop zone"
+					onDragEnter={handleDragEnter}
+					onDragOver={handleDragOver}
+					onDragLeave={handleDragLeave}
+					onDrop={handleDrop}
 					className={cn(
-						"flex items-end gap-2 rounded-xl bg-surface-card/60 backdrop-blur-md p-2 shadow-[0_16px_48px_rgba(0,0,0,0.34)] transition-all duration-200 focus-within:ring-1 focus-within:ring-fg-primary/10",
+						"relative m-0 flex min-w-0 flex-col gap-2 rounded-xl border-0 bg-surface-card/60 p-2 shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-md transition-all duration-200 focus-within:ring-1 focus-within:ring-fg-primary/10",
 						isMultiline && "flex-col",
 					)}
 				>
+					{dropOverlay}
+					{attachmentTray}
 					<textarea
 						ref={textareaRef}
 						value={value}
@@ -239,9 +389,10 @@ export default function ChatInput({
 						style={{ minHeight: "36px" }}
 						rows={1}
 					/>
-					<div className="flex items-center gap-1.5 transition-all duration-200">
+					<div className="flex w-full items-center justify-end gap-2 transition-all duration-200">
+						{attachmentButton}
 						{isResponding && <StopButton onClick={onStop} />}
-						{(!isResponding || value.trim()) && (
+						{(!isResponding || canSubmit) && (
 							<SendButton
 								onClick={onSend}
 								disabled={isSendDisabled}
@@ -249,8 +400,197 @@ export default function ChatInput({
 							/>
 						)}
 					</div>
-				</div>
+				</fieldset>
 			)}
 		</motion.div>
 	)
 }
+
+function AttachmentPreviewChip({
+	attachment,
+	onRemove,
+	onRetry,
+}: {
+	attachment: ChatAttachmentDraft
+	onRemove?: (id: string) => void
+	onRetry?: (id: string) => void
+}) {
+	const [objectUrl, setObjectUrl] = useState<string | null>(null)
+	const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+	const isUploading = attachment.status === "uploading"
+	const isUploaded = attachment.status === "uploaded"
+	const isError = attachment.status === "error"
+	const isImage = attachment.file.type.startsWith("image/")
+	const extension = getAttachmentExtension(attachment.file)
+
+	useEffect(() => {
+		if (!isImage) {
+			setObjectUrl(null)
+			return
+		}
+
+		const url = URL.createObjectURL(attachment.file)
+		setObjectUrl(url)
+		return () => URL.revokeObjectURL(url)
+	}, [attachment.file, isImage])
+
+	const statusLabel = isError
+		? attachment.errorMessage || "Upload failed"
+		: isUploading
+			? "Uploading..."
+			: isUploaded
+				? "Uploaded"
+				: formatAttachmentSize(attachment.file.size)
+
+	return (
+		<>
+			<div
+				className={cn(
+					"group relative flex h-11 w-[min(280px,calc(100vw-4.5rem))] shrink-0 items-center gap-2 overflow-hidden rounded-xl border border-[#1A1D22] bg-[#050607] px-2 text-sm text-fg-primary shadow-[0_6px_18px_rgba(0,0,0,0.22)] transition-colors hover:border-[#30343B] hover:bg-[#080A0D] focus-within:border-[#30343B] sm:w-auto sm:min-w-[220px] sm:max-w-[300px] sm:hover:border-[#2261CA66] sm:hover:bg-[#041127] sm:focus-within:border-[#2261CA66] sm:focus-within:bg-[#041127]",
+					isImage && objectUrl && "cursor-pointer",
+					isError && "border-red-400/40 bg-red-950/20 hover:border-red-400/50",
+				)}
+				title={statusLabel}
+			>
+				<button
+					type="button"
+					onClick={() => isImage && objectUrl && setIsPreviewOpen(true)}
+					disabled={!isImage || !objectUrl}
+					className={cn(
+						"relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-[#242832] bg-black",
+						isImage && objectUrl && "cursor-pointer hover:border-[#4B5563]",
+						(!isImage || !objectUrl) && "cursor-default",
+					)}
+					aria-label={
+						isImage ? `Preview ${attachment.file.name}` : attachment.file.name
+					}
+				>
+					{isImage && objectUrl ? (
+						<img
+							src={objectUrl}
+							alt=""
+							className="size-full object-cover"
+							draggable={false}
+						/>
+					) : (
+						<DocumentFileGlyph label={extension} />
+					)}
+					{isUploading || isUploaded ? (
+						<div className="absolute inset-0 flex items-center justify-center bg-black/60">
+							{isUploading ? (
+								<Loader2Icon className="size-3.5 animate-spin text-[#C8D1DC]" />
+							) : (
+								<CheckIcon className="size-3.5 text-emerald-400" />
+							)}
+						</div>
+					) : null}
+				</button>
+				<div className="min-w-0 flex-1 pr-1">
+					<div
+						className="truncate font-medium leading-none text-fg-primary"
+						title={attachment.file.name}
+					>
+						{attachment.file.name}
+					</div>
+					<div className="mt-1 truncate text-[11px] leading-none text-fg-faint">
+						{statusLabel}
+					</div>
+				</div>
+				<div className="hidden shrink-0 items-center gap-1 opacity-0 transition-opacity sm:flex sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+					{isError ? (
+						<button
+							type="button"
+							onClick={(event) => {
+								event.stopPropagation()
+								onRetry?.(attachment.id)
+							}}
+							className="flex size-7 shrink-0 items-center justify-center rounded-md border border-[#242832] bg-black text-fg-faint transition-colors hover:border-[#3A4049] hover:bg-[#111418] hover:text-fg-primary"
+							aria-label={`Retry ${attachment.file.name}`}
+							title={statusLabel}
+						>
+							<RotateCcwIcon className="size-3.5" />
+						</button>
+					) : null}
+				</div>
+				<button
+					type="button"
+					onClick={(event) => {
+						event.stopPropagation()
+						onRemove?.(attachment.id)
+					}}
+					disabled={isUploading}
+					className="flex size-7 shrink-0 items-center justify-center rounded-md text-fg-faint transition-colors hover:bg-[#111418] hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-50"
+					aria-label={`Remove ${attachment.file.name}`}
+				>
+					<XIcon className="size-4" />
+				</button>
+			</div>
+			<Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+				<DialogContent
+					showCloseButton={false}
+					className="w-[calc(100vw-32px)] max-w-none gap-0 overflow-hidden rounded-xl border border-[#1D222A] bg-[#050607] p-0 text-fg-primary shadow-[0_24px_80px_rgba(0,0,0,0.65)] sm:w-[min(92vw,980px)] sm:max-w-[980px]"
+				>
+					<DialogTitle className="sr-only">
+						Preview {attachment.file.name}
+					</DialogTitle>
+					<div className="flex min-h-0 flex-col">
+						<div className="grid min-w-0 grid-cols-[minmax(0,1fr)_32px] items-center gap-2 border-[#171B22] border-b px-3 py-2 sm:px-4 sm:py-3">
+							<div className="min-w-0">
+								<p className="truncate font-medium text-fg-primary text-sm">
+									{attachment.file.name}
+								</p>
+								<p className="mt-0.5 text-[11px] text-fg-faint">
+									{formatAttachmentSize(attachment.file.size)}
+								</p>
+							</div>
+							<button
+								type="button"
+								onClick={() => setIsPreviewOpen(false)}
+								className="flex size-8 items-center justify-center rounded-md text-fg-faint transition-colors hover:bg-[#111418] hover:text-fg-primary focus:outline-none focus:ring-2 focus:ring-[#3374FF]/40"
+							>
+								<XIcon className="size-4" />
+								<span className="sr-only">Close preview</span>
+							</button>
+						</div>
+						<div className="grid h-[min(58dvh,380px)] place-items-center bg-black px-4 py-5 sm:h-[min(76dvh,680px)] sm:px-6 sm:py-6">
+							{objectUrl ? (
+								<img
+									src={objectUrl}
+									alt={attachment.file.name}
+									className="block max-h-full max-w-full rounded-lg object-contain"
+									draggable={false}
+								/>
+							) : null}
+						</div>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	)
+}
+
+function DocumentFileGlyph({ label }: { label: string }) {
+	return (
+		<div className="relative flex size-6 items-end justify-center rounded-[4px] border border-[#30343B] bg-[#07090C] pb-1">
+			<div className="absolute right-0 top-0 size-2.5 border-[#30343B] border-b border-l bg-black" />
+			<span className="max-w-[22px] truncate text-[8px] font-bold uppercase leading-none text-[#AAB2BD]">
+				{label}
+			</span>
+		</div>
+	)
+}
+
+function getAttachmentExtension(file: File): string {
+	const name = file.name
+	const dotIndex = name.lastIndexOf(".")
+	if (dotIndex > -1 && dotIndex < name.length - 1) {
+		const extension = name.slice(dotIndex + 1).toLowerCase()
+		if (extension === "md" || extension === "markdown") return "MD"
+		if (extension === "pdf") return "PDF"
+		return extension.slice(0, 3)
+	}
+	if (file.type === "text/markdown") return "MD"
+	if (file.type.includes("pdf")) return "PDF"
+	if (file.type.startsWith("text/")) return "TXT"
+	return "FILE"
+}
diff --git a/apps/web/components/chat/message/agent-message.tsx b/apps/web/components/chat/message/agent-message.tsx
index c1666f389..1b7f69a82 100644
--- a/apps/web/components/chat/message/agent-message.tsx
+++ b/apps/web/components/chat/message/agent-message.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react"
 import type { UIMessage } from "@ai-sdk/react"
 import { Streamdown } from "streamdown"
 import {
@@ -52,48 +52,205 @@ type SourceUrlPart = {
 	title?: string
 }
 
-function WebSourcesGroup({ sources }: { sources: SourceUrlPart[] }) {
+function sourceHost(url: string): string {
+	try {
+		return new URL(url).hostname.replace(/^www\./, "")
+	} catch {
+		return url
+	}
+}
+
+function faviconUrl(host: string): string {
+	return `https://www.google.com/s2/favicons?sz=64&domain=${host}`
+}
+
+function isWebSearchPart(part: { type: string; toolName?: string }): boolean {
+	if (part.type === "dynamic-tool") {
+		return isWebSearchToolName(part.toolName ?? "")
+	}
+	if (part.type.startsWith("tool-")) {
+		return isWebSearchToolName(part.type.slice("tool-".length))
+	}
+	return false
+}
+
+function CitationLink({
+	href,
+	label,
+	source,
+}: {
+	href: string
+	label: string
+	source?: SourceUrlPart
+}) {
+	const url = source?.url ?? href
+	const host = sourceHost(url)
+	const rawTitle = source?.title?.trim()
+	const hasTitle =
+		!!rawTitle && rawTitle !== host && !/^https?:\/\//i.test(rawTitle)
+	let path = ""
+	try {
+		path = new URL(url).pathname.replace(/\/$/, "")
+	} catch {}
+	return (
+		<span className="group/cite relative inline">
+			<a
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+				className="text-blue-400 no-underline hover:text-blue-300"
+			>
+				{label}
+			</a>
+			<span className="pointer-events-none absolute bottom-full left-1/2 z-[1000] hidden -translate-x-1/2 pb-1.5 group-hover/cite:block">
+				<a
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="pointer-events-auto block w-64 overflow-hidden rounded-lg border border-white/10 bg-[#0B0F16]/95 p-2.5 no-underline shadow-[0_12px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl"
+				>
+					<span className="flex items-center gap-2">
+						<img
+							src={faviconUrl(host)}
+							alt=""
+							className="size-4 shrink-0 rounded bg-white/10"
+							loading="lazy"
+							referrerPolicy="no-referrer"
+						/>
+						<span className="truncate text-xs font-medium text-white/85">
+							{host}
+						</span>
+					</span>
+					{hasTitle ? (
+						<span className="mt-1.5 block line-clamp-2 text-xs leading-snug text-white/60">
+							{rawTitle}
+						</span>
+					) : path ? (
+						<span className="mt-1 block truncate text-[11px] text-white/35">
+							{path}
+						</span>
+					) : null}
+				</a>
+			</span>
+		</span>
+	)
+}
+
+function makeMarkdownComponents(sources: SourceUrlPart[]) {
+	return {
+		a: ({ href, children }: { href?: string; children?: ReactNode }) => {
+			const label =
+				typeof children === "string"
+					? children
+					: Array.isArray(children)
+						? children.join("")
+						: ""
+			const match = label.match(/^\[?(\d+)\]?$/)
+			if (match && href) {
+				const n = Number(match[1])
+				const source = sources.find((s) => s.url === href) ?? sources[n - 1]
+				return <CitationLink href={href} label={label} source={source} />
+			}
+			return (
+				<a
+					href={href}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="text-blue-400 hover:underline"
+				>
+					{children}
+				</a>
+			)
+		},
+	}
+}
+
+function WebSourcesPill({ sources }: { sources: SourceUrlPart[] }) {
 	const [expanded, setExpanded] = useState(false)
+	const ref = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (!expanded) return
+		const onDown = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				setExpanded(false)
+			}
+		}
+		document.addEventListener("mousedown", onDown)
+		return () => document.removeEventListener("mousedown", onDown)
+	}, [expanded])
+
 	if (sources.length === 0) return null
 
+	const faviconHosts: string[] = []
+	for (const s of sources) {
+		const host = sourceHost(s.url)
+		if (!faviconHosts.includes(host)) faviconHosts.push(host)
+		if (faviconHosts.length >= 3) break
+	}
+	const count = sources.length
+
 	return (
-		<div className="rounded-lg border border-[#1E2128] bg-[#0D121A] text-xs my-1 overflow-hidden">
+		<div ref={ref} className="relative">
 			<button
 				type="button"
-				onClick={() => setExpanded(!expanded)}
-				className={cn(
-					"flex items-center gap-2 w-full px-3 py-2 cursor-pointer hover:bg-[#141922] transition-colors",
-					expanded && "border-b border-[#1E2128]",
-				)}
+				onClick={() => setExpanded((v) => !v)}
+				className="flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] py-1 pr-2.5 pl-1.5 text-xs text-white/65 transition-colors hover:bg-white/[0.08] hover:text-white/80"
+				aria-expanded={expanded}
+				aria-label={`${count} web ${count === 1 ? "source" : "sources"}`}
 			>
-				<GlobeIcon className="size-3 shrink-0 text-emerald-400" />
-				<span className="font-medium text-emerald-400">
-					Web sources
-					<span className="text-white/40 font-normal ml-1">
-						({sources.length})
-					</span>
+				<span className="flex -space-x-1.5">
+					{faviconHosts.length > 0 ? (
+						faviconHosts.map((host) => (
+							<img
+								key={host}
+								src={faviconUrl(host)}
+								alt=""
+								className="size-4 rounded-full border border-[#0B0F16] bg-white/10 object-cover"
+								loading="lazy"
+								referrerPolicy="no-referrer"
+							/>
+						))
+					) : (
+						<GlobeIcon className="size-3.5 text-emerald-400" />
+					)}
 				</span>
-				{expanded ? (
-					<ChevronDownIcon className="size-3 text-white/30 shrink-0 ml-auto" />
-				) : (
-					<ChevronRightIcon className="size-3 text-white/30 shrink-0 ml-auto" />
-				)}
+				<span>{count === 1 ? "1 source" : `${count} sources`}</span>
 			</button>
 			{expanded && (
-				<ul className="px-3 py-2 space-y-1.5 list-none">
-					{sources.map((s) => (
-						<li key={s.sourceId}>
-							<a
-								href={s.url}
-								target="_blank"
-								rel="noopener noreferrer"
-								className="text-blue-400 hover:underline break-all"
-							>
-								{s.title?.trim() || s.url}
-							</a>
-						</li>
-					))}
-				</ul>
+				<div className="absolute bottom-full left-0 z-[1000] mb-2 w-[min(22rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-white/10 bg-[#0B0F16]/95 p-1.5 shadow-[0_12px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl">
+					<ul className="max-h-72 list-none space-y-0.5 overflow-y-auto">
+						{sources.map((s) => {
+							const host = sourceHost(s.url)
+							return (
+								<li key={s.sourceId}>
+									<a
+										href={s.url}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="flex items-start gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-white/[0.06]"
+									>
+										<img
+											src={faviconUrl(host)}
+											alt=""
+											className="mt-0.5 size-4 shrink-0 rounded-full bg-white/10"
+											loading="lazy"
+											referrerPolicy="no-referrer"
+										/>
+										<span className="min-w-0">
+											<span className="block truncate text-white/80">
+												{s.title?.trim() || host}
+											</span>
+											<span className="block truncate text-[11px] text-white/40">
+												{host}
+											</span>
+										</span>
+									</a>
+								</li>
+							)
+						})}
+					</ul>
+				</div>
 			)}
 		</div>
 	)
@@ -210,6 +367,23 @@ function ToolCallDisplay({ part }: { part: ToolCallDisplayPart }) {
 	if (toolName === "bash") {
 		return <BashToolDisplay part={part} />
 	}
+	if (isWebSearchToolName(toolName)) {
+		if (part.state === "output-available") return null
+		if (part.state === "error" || part.state === "output-error") {
+			return (
+				<div className="my-1 flex items-center gap-2 text-xs text-red-400/80">
+					<GlobeIcon className="size-3.5 shrink-0" />
+					<span>Web search failed</span>
+				</div>
+			)
+		}
+		return (
+			<div className="my-1 flex items-center gap-2 text-xs text-white/50">
+				<Loader2 className="size-3.5 shrink-0 animate-spin text-emerald-400/80" />
+				<span>Searching the web…</span>
+			</div>
+		)
+	}
 	const meta =
 		TOOL_META[toolName] ??
 		(isWebSearchToolName(toolName)
@@ -342,6 +516,27 @@ export function AgentMessage({
 		.filter((part) => part.type === "text")
 		.map((part) => part.text)
 		.join(" ")
+	const webSources = (() => {
+		const seen = new Set<string>()
+		const out: SourceUrlPart[] = []
+		for (const part of message.parts) {
+			if (part.type !== "source-url") continue
+			const source = part as SourceUrlPart
+			if (seen.has(source.url)) continue
+			seen.add(source.url)
+			out.push(source)
+		}
+		return out
+	})()
+	const hasAssistantText = message.parts.some(
+		(p) => p.type === "text" && (p as { text?: string }).text?.trim(),
+	)
+	const sourceKey = webSources.map((s) => s.url).join("|")
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed by stable source urls
+	const markdownComponents = useMemo(
+		() => makeMarkdownComponents(webSources),
+		[sourceKey],
+	)
 	const responseModelLabel = responseModel
 		? `${modelNames[responseModel].name} ${modelNames[responseModel].version}`
 		: null
@@ -358,24 +553,10 @@ export function AgentMessage({
 
 					{message.parts.map((part, partIndex) => {
 						if (part.type === "source-url") {
-							if (
-								partIndex > 0 &&
-								message.parts[partIndex - 1]?.type === "source-url"
-							) {
-								return null
-							}
-							const sources: SourceUrlPart[] = []
-							for (let j = partIndex; j < message.parts.length; j++) {
-								const p = message.parts[j]
-								if (!p || p.type !== "source-url") break
-								sources.push(p as SourceUrlPart)
-							}
-							return (
-								<WebSourcesGroup
-									key={`${message.id}-web-sources-${partIndex}`}
-									sources={sources}
-								/>
-							)
+							return null
+						}
+						if (isWebSearchPart(part)) {
+							return null
 						}
 						if (part.type === "source-document") {
 							const doc = part as {
@@ -400,12 +581,30 @@ export function AgentMessage({
 							)
 						}
 						if (part.type === "text") {
+							// Skip fragments mid-run — source-url citations split one answer into
+							// many text parts; rendering each separately tears markdown (lists etc.).
+							let prev = partIndex - 1
+							while (prev >= 0 && message.parts[prev]?.type === "source-url") {
+								prev--
+							}
+							if (prev >= 0 && message.parts[prev]?.type === "text") {
+								return null
+							}
+							let runText = ""
+							for (let j = partIndex; j < message.parts.length; j++) {
+								const p = message.parts[j]
+								if (p?.type === "text") runText += p.text
+								else if (p?.type === "source-url") continue
+								else break
+							}
 							return (
 								<div
 									key={`${message.id}-${partIndex}`}
 									className="text-sm text-white/90 chat-markdown-content"
 								>
-									<Streamdown>{part.text}</Streamdown>
+									<Streamdown components={markdownComponents}>
+										{runText}
+									</Streamdown>
 								</div>
 							)
 						}
@@ -448,29 +647,41 @@ export function AgentMessage({
 					})}
 				</div>
 			</div>
-			<div className="flex min-h-7 items-center gap-2">
-				<MessageActions
-					messageId={message.id}
-					messageText={messageText}
-					isLastMessage={isLastAgentMessage}
-					isHovered={isHovered}
-					copiedMessageId={copiedMessageId}
-					messageFeedback={messageFeedback}
-					onCopy={onCopy}
-					onLike={onLike}
-					onDislike={onDislike}
-				/>
-				{responseModelLabel && (
-					<span
-						className={cn(
-							"text-[10px] leading-none text-white/25 transition-opacity duration-200",
-							isHovered ? "opacity-100" : "opacity-0",
-						)}
-					>
-						{responseModelLabel}
-					</span>
-				)}
-			</div>
+			{hasAssistantText && (
+				<div className="flex min-h-7 items-center gap-2">
+					<MessageActions
+						messageId={message.id}
+						messageText={messageText}
+						isLastMessage={isLastAgentMessage}
+						isHovered={isHovered}
+						copiedMessageId={copiedMessageId}
+						messageFeedback={messageFeedback}
+						onCopy={onCopy}
+						onLike={onLike}
+						onDislike={onDislike}
+					/>
+					{webSources.length > 0 && (
+						<div
+							className={cn(
+								"transition-opacity duration-200",
+								isHovered || isLastAgentMessage ? "opacity-100" : "opacity-0",
+							)}
+						>
+							<WebSourcesPill sources={webSources} />
+						</div>
+					)}
+					{responseModelLabel && (
+						<span
+							className={cn(
+								"text-[10px] leading-none text-white/25 transition-opacity duration-200",
+								isHovered ? "opacity-100" : "opacity-0",
+							)}
+						>
+							{responseModelLabel}
+						</span>
+					)}
+				</div>
+			)}
 		</div>
 	)
 }
diff --git a/apps/web/components/chat/message/user-message.tsx b/apps/web/components/chat/message/user-message.tsx
index 476ceb7d7..9fcb16060 100644
--- a/apps/web/components/chat/message/user-message.tsx
+++ b/apps/web/components/chat/message/user-message.tsx
@@ -2,7 +2,7 @@
 
 import { memo, useEffect, useRef, useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
-import { Copy, Check, PencilIcon, PencilOffIcon } from "lucide-react"
+import { Check, Copy, FileIcon, PencilIcon, PencilOffIcon } from "lucide-react"
 import type { UIMessage } from "@ai-sdk/react"
 import ChatModelSelector from "../model-selector"
 import { ReasoningSelector } from "../reasoning-selector"
@@ -12,6 +12,7 @@ import {
 	type ModelId,
 	type ReasoningEffort,
 } from "@/lib/models"
+import { formatAttachmentSize, getChatMessageAttachments } from "../attachments"
 
 interface UserMessageProps {
 	message: UIMessage
@@ -45,6 +46,7 @@ export const UserMessage = memo(function UserMessage({
 		.filter((part) => part.type === "text")
 		.map((part) => part.text)
 		.join(" ")
+	const attachments = getChatMessageAttachments(message.metadata)
 
 	const startEditing = () => {
 		setDraft(text)
@@ -71,7 +73,31 @@ export const UserMessage = memo(function UserMessage({
 	}, [isEditing])
 
 	return (
-		<div className="flex flex-col items-end w-full">
+		<div className="flex w-full flex-col items-end">
+			{attachments.length > 0 ? (
+				<div className="mb-2 flex w-full max-w-[80%] flex-col items-end gap-1.5">
+					{attachments.map((attachment) => (
+						<div
+							key={attachment.id}
+							className="flex max-w-full min-w-0 items-center gap-2 rounded-lg border border-[#303949] bg-[#0D121A]/80 px-2.5 py-2 text-left shadow-[0_6px_18px_rgba(0,0,0,0.18)]"
+						>
+							<div className="flex size-7 shrink-0 items-center justify-center rounded-md bg-[#111A27]">
+								<FileIcon className="size-3.5 text-[#8FC3FF]" />
+							</div>
+							<div className="min-w-0">
+								<div className="truncate text-xs font-medium text-white">
+									{attachment.filename}
+								</div>
+								<div className="truncate text-[11px] text-white/50">
+									{formatAttachmentSize(attachment.size)}
+									{" | "}
+									{attachment.saveToMemory ? "Saved" : "Chat only"}
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			) : null}
 			<AnimatePresence mode="popLayout" initial={false}>
 				{isEditing ? (
 					<motion.div
@@ -126,7 +152,9 @@ export const UserMessage = memo(function UserMessage({
 						transition={{ duration: 0.18, ease: "easeOut" }}
 						className="max-w-[80%] origin-top-right rounded-[12px] bg-[#1B1F24] p-3 px-[14px]"
 					>
-						<p className="text-sm text-white whitespace-pre-wrap">{text}</p>
+						{text ? (
+							<p className="text-sm text-white whitespace-pre-wrap">{text}</p>
+						) : null}
 					</motion.div>
 				)}
 			</AnimatePresence>
diff --git a/apps/web/components/chat/model-selector.tsx b/apps/web/components/chat/model-selector.tsx
index 65208ca57..ca9935ee7 100644
--- a/apps/web/components/chat/model-selector.tsx
+++ b/apps/web/components/chat/model-selector.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
+import { AnimatePresence, motion } from "motion/react"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
 import { dmSansClassName } from "@/lib/fonts"
@@ -44,8 +45,7 @@ export default function ChatModelSelector({
 	const selectedModel = selectedModelProp ?? internalModel
 	const currentModelData = modelNames[selectedModel]
 	const selectedModelLabel = `${currentModelData.name} ${currentModelData.version}`
-	const selectedItemClass =
-		"border border-[#267BF1]/35 bg-[#0A1A3A] text-white shadow-[inset_0_0_0_1px_rgba(75,160,250,0.08)]"
+	const selectedItemClass = "bg-white/[0.06] text-white"
 
 	const handleModelSelect = (modelId: ModelId) => {
 		if (onModelChange) {
@@ -61,18 +61,23 @@ export default function ChatModelSelector({
 		<button
 			type="button"
 			className={cn(
-				"flex max-w-[min(100%,220px)] min-w-0 shrink cursor-pointer items-center gap-1.5 rounded-full border border-white/15 bg-black px-3 py-1.5 text-[13px] text-white transition-colors hover:border-white/30 hover:bg-white/5",
+				"flex max-w-[min(100%,220px)] min-w-0 shrink cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[13px] text-white/80 transition-colors hover:bg-white/5",
 				dmSansClassName(),
 			)}
 			onClick={() => setIsOpen(!isOpen)}
 			aria-expanded={isOpen}
 			aria-label={`Model: ${selectedModelLabel}`}
 		>
-			<p className="min-w-0 truncate text-left text-white">
+			<p className="min-w-0 truncate text-left text-white/80">
 				{currentModelData.name}{" "}
-				<span className="text-white/55">{currentModelData.version}</span>
+				<span className="text-white/40">{currentModelData.version}</span>
 			</p>
-			<ChevronDownIcon className="size-3.5 shrink-0 text-white/55" />
+			<ChevronDownIcon
+				className={cn(
+					"size-3.5 shrink-0 text-white/40 transition-transform duration-200",
+					isOpen && "rotate-180",
+				)}
+			/>
 		</button>
 	) : (
 		<Button
@@ -89,7 +94,12 @@ export default function ChatModelSelector({
 				{currentModelData.name}{" "}
 				<span className="text-white/55">{currentModelData.version}</span>
 			</p>
-			<ChevronDownIcon className="size-4 text-white/55" />
+			<ChevronDownIcon
+				className={cn(
+					"size-4 text-white/55 transition-transform duration-200",
+					isOpen && "rotate-180",
+				)}
+			/>
 		</Button>
 	)
 
@@ -103,66 +113,82 @@ export default function ChatModelSelector({
 		>
 			{trigger}
 
-			{isOpen && (
-				<div
-					className={cn(
-						"isolate absolute left-0 z-[1000] w-[min(18rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-white/15 bg-black p-1 shadow-[0_18px_48px_rgba(0,0,0,0.55)]",
-						dropdownDirection === "up" ? "bottom-full mb-2" : "top-full mt-2",
-					)}
-				>
-					<div className="space-y-1">
-						{models.map((model) => {
-							const modelData = modelNames[model.id]
-							const isSelected = selectedModel === model.id
-							return (
-								<button
-									key={model.id}
-									type="button"
-									className={cn(
-										"flex w-full cursor-pointer items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-left transition-colors",
-										isSelected
-											? selectedItemClass
-											: "text-white hover:bg-white/10",
-									)}
-									onClick={() => handleModelSelect(model.id)}
-									onKeyDown={(e) =>
-										e.key === "Enter" && handleModelSelect(model.id)
-									}
-								>
-									<div className="min-w-0 flex-1">
-										<div
-											className={cn(
-												"truncate text-sm font-medium",
-												isSelected ? "text-white" : "text-white",
-											)}
-										>
-											{modelData.name}{" "}
-											<span
+			<AnimatePresence>
+				{isOpen && (
+					<motion.div
+						initial={{
+							opacity: 0,
+							scale: 0.96,
+							y: dropdownDirection === "up" ? 6 : -6,
+						}}
+						animate={{ opacity: 1, scale: 1, y: 0 }}
+						exit={{
+							opacity: 0,
+							scale: 0.96,
+							y: dropdownDirection === "up" ? 6 : -6,
+						}}
+						transition={{ duration: 0.16, ease: [0.16, 1, 0.3, 1] }}
+						className={cn(
+							"isolate absolute left-0 z-[1000] w-[min(18rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-white/10 bg-[#0B0F16]/95 p-1.5 shadow-[0_12px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl",
+							dropdownDirection === "up"
+								? "bottom-full mb-2 origin-bottom"
+								: "top-full mt-2 origin-top",
+						)}
+					>
+						<div className="space-y-1">
+							{models.map((model) => {
+								const modelData = modelNames[model.id]
+								const isSelected = selectedModel === model.id
+								return (
+									<button
+										key={model.id}
+										type="button"
+										className={cn(
+											"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-left transition-colors",
+											isSelected
+												? selectedItemClass
+												: "text-white hover:bg-white/[0.06]",
+										)}
+										onClick={() => handleModelSelect(model.id)}
+										onKeyDown={(e) =>
+											e.key === "Enter" && handleModelSelect(model.id)
+										}
+									>
+										<div className="min-w-0 flex-1">
+											<div
 												className={cn(
-													isSelected ? "text-[#8DBDFF]" : "text-white/55",
+													"truncate text-sm font-medium",
+													isSelected ? "text-white" : "text-white",
 												)}
 											>
-												{modelData.version}
-											</span>
-										</div>
-										<div
-											className={cn(
-												"mt-0.5 truncate text-xs",
-												isSelected ? "text-white/60" : "text-white/45",
-											)}
-										>
-											{model.description}
+												{modelData.name}{" "}
+												<span
+													className={cn(
+														isSelected ? "text-[#8DBDFF]" : "text-white/40",
+													)}
+												>
+													{modelData.version}
+												</span>
+											</div>
+											<div
+												className={cn(
+													"mt-0.5 truncate text-xs",
+													isSelected ? "text-white/50" : "text-white/40",
+												)}
+											>
+												{model.description}
+											</div>
 										</div>
-									</div>
-									{isSelected && (
-										<CheckIcon className="size-4 shrink-0 text-[#8DBDFF]" />
-									)}
-								</button>
-							)
-						})}
-					</div>
-				</div>
-			)}
+										{isSelected && (
+											<CheckIcon className="size-4 shrink-0 text-[#8DBDFF]" />
+										)}
+									</button>
+								)
+							})}
+						</div>
+					</motion.div>
+				)}
+			</AnimatePresence>
 		</div>
 	)
 }
diff --git a/apps/web/components/chat/reasoning-selector.tsx b/apps/web/components/chat/reasoning-selector.tsx
index a02fc4fa4..c0ceb2271 100644
--- a/apps/web/components/chat/reasoning-selector.tsx
+++ b/apps/web/components/chat/reasoning-selector.tsx
@@ -1,13 +1,7 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react"
-import {
-	BrainIcon,
-	CheckIcon,
-	ChevronDownIcon,
-	MoreHorizontalIcon,
-	ZapIcon,
-} from "lucide-react"
+import { AnimatePresence, motion } from "motion/react"
+import { BrainIcon, ZapIcon } from "lucide-react"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
 import { reasoningOptions, type ReasoningEffort } from "@/lib/models"
@@ -20,124 +14,60 @@ interface ReasoningSelectorProps {
 	dropdownDirection?: "up" | "down"
 }
 
+const iconVariants = {
+	initial: (toThinking: boolean) => ({
+		y: toThinking ? "-110%" : "110%",
+		opacity: 0,
+	}),
+	animate: { y: "0%", opacity: 1 },
+	exit: (toThinking: boolean) => ({
+		y: toThinking ? "110%" : "-110%",
+		opacity: 0,
+	}),
+}
+
 export function ReasoningSelector({
 	value,
 	onChange,
-	variant = "pill",
 	disabled = false,
-	dropdownDirection = "up",
 }: ReasoningSelectorProps) {
-	const [isOpen, setIsOpen] = useState(false)
-	const containerRef = useRef<HTMLDivElement>(null)
-	const selected = reasoningOptions.find((option) => option.id === value)
-	const SelectedIcon = value === "thinking" ? BrainIcon : ZapIcon
-	const selectedLabel = selected?.label ?? "Reasoning"
-	const selectedItemClass =
-		"border border-[#267BF1]/35 bg-[#0A1A3A] text-white shadow-[inset_0_0_0_1px_rgba(75,160,250,0.08)]"
-
-	useEffect(() => {
-		if (!isOpen) return
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				containerRef.current &&
-				!containerRef.current.contains(event.target as Node)
-			) {
-				setIsOpen(false)
-			}
-		}
-		document.addEventListener("mousedown", handleClickOutside)
-		return () => document.removeEventListener("mousedown", handleClickOutside)
-	}, [isOpen])
-
-	const handleSelect = (next: ReasoningEffort) => {
-		onChange(next)
-		setIsOpen(false)
-	}
+	const toThinking = value === "thinking"
+	const Icon = toThinking ? BrainIcon : ZapIcon
+	const selectedLabel =
+		reasoningOptions.find((option) => option.id === value)?.label ?? "Reasoning"
+	const nextValue: ReasoningEffort = toThinking ? "instant" : "thinking"
 
 	return (
-		<div
-			ref={containerRef}
+		<button
+			type="button"
+			disabled={disabled}
+			onClick={() => onChange(nextValue)}
 			className={cn(
-				"relative flex shrink-0 items-center",
-				isOpen ? "z-[1000]" : "z-10",
+				"group flex shrink-0 cursor-pointer items-center rounded-md px-1.5 py-1 text-xs text-white/80 transition-colors hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50",
+				dmSansClassName(),
 			)}
+			title={`Reasoning: ${selectedLabel} — click to switch`}
+			aria-label={`Reasoning: ${selectedLabel}. Click to switch.`}
 		>
-			<button
-				type="button"
-				disabled={disabled}
-				onClick={() => setIsOpen((open) => !open)}
-				className={cn(
-					"cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-					variant === "icon"
-						? "rounded p-1.5 hover:bg-white/10"
-						: "flex size-9 items-center justify-center gap-1.5 rounded-full border border-white/15 bg-black px-0 py-1.5 text-xs text-white hover:border-white/30 hover:bg-white/5 sm:size-auto sm:justify-start sm:px-2.5",
-					dmSansClassName(),
-				)}
-				title={`Reasoning: ${selectedLabel}`}
-				aria-label={`Reasoning: ${selectedLabel}`}
-				aria-expanded={isOpen}
-			>
-				{variant === "icon" ? (
-					<MoreHorizontalIcon className="size-3.5 text-white/50 hover:text-white/80" />
-				) : (
-					<>
-						<SelectedIcon className="size-3.5 shrink-0 text-white/65" />
-						<span className="hidden text-white sm:inline">
-							{selected?.label}
-						</span>
-						<ChevronDownIcon className="hidden size-3.5 shrink-0 text-white/55 sm:block" />
-					</>
-				)}
-			</button>
-
-			{isOpen && (
-				<div
-					className={cn(
-						"isolate absolute left-0 z-[1000] w-[min(14rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-white/15 bg-black p-1 shadow-[0_18px_48px_rgba(0,0,0,0.55)]",
-						dropdownDirection === "up" ? "bottom-full mb-2" : "top-full mt-2",
-					)}
-				>
-					<div className="space-y-1">
-						{reasoningOptions.map((option) => {
-							const Icon = option.id === "thinking" ? BrainIcon : ZapIcon
-							const isSelected = option.id === value
-							return (
-								<button
-									key={option.id}
-									type="button"
-									onClick={() => handleSelect(option.id)}
-									className={cn(
-										"flex w-full cursor-pointer items-center gap-2.5 rounded-lg border border-transparent px-3 py-2.5 text-left transition-colors",
-										isSelected
-											? selectedItemClass
-											: "text-white hover:bg-white/10",
-									)}
-								>
-									<Icon
-										className={cn(
-											"size-4 shrink-0",
-											isSelected ? "text-[#8DBDFF]" : "text-white/65",
-										)}
-									/>
-									<div className="min-w-0 flex-1">
-										<div
-											className={cn(
-												"text-sm font-medium",
-												isSelected ? "text-white" : "text-white",
-											)}
-										>
-											{option.label}
-										</div>
-									</div>
-									{isSelected && (
-										<CheckIcon className="size-4 shrink-0 text-[#8DBDFF]" />
-									)}
-								</button>
-							)
-						})}
-					</div>
-				</div>
-			)}
-		</div>
+			<span className="relative flex size-3.5 shrink-0 items-center justify-center overflow-hidden">
+				<AnimatePresence initial={false} mode="popLayout" custom={toThinking}>
+					<motion.span
+						key={value}
+						custom={toThinking}
+						variants={iconVariants}
+						initial="initial"
+						animate="animate"
+						exit="exit"
+						transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+						className="absolute inset-0 flex items-center justify-center"
+					>
+						<Icon className="size-3.5 text-white/45 transition-colors group-hover:text-white/70" />
+					</motion.span>
+				</AnimatePresence>
+			</span>
+			<span className="ml-0 max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-200 group-hover:ml-1 group-hover:max-w-[88px] group-hover:opacity-100">
+				{selectedLabel}
+			</span>
+		</button>
 	)
 }
diff --git a/apps/web/components/document-modal/content/image-preview.tsx b/apps/web/components/document-modal/content/image-preview.tsx
index 9fe544743..7d9aac6bd 100644
--- a/apps/web/components/document-modal/content/image-preview.tsx
+++ b/apps/web/components/document-modal/content/image-preview.tsx
@@ -1,31 +1,60 @@
 "use client"
 
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { cn } from "@lib/utils"
+import { getCachedFileBlob } from "@/lib/file-cache"
 
 interface ImagePreviewProps {
 	url: string
 	title?: string | null
+	documentId?: string | null
 }
 
-export function ImagePreview({ url, title }: ImagePreviewProps) {
+export function ImagePreview({ url, title, documentId }: ImagePreviewProps) {
 	const [imageError, setImageError] = useState(false)
 	const [isLoading, setIsLoading] = useState(true)
 	const [retryKey, setRetryKey] = useState(0)
+	const [activeSrc, setActiveSrc] = useState(url)
+	const objectUrlRef = useRef<string | null>(null)
+
+	useEffect(() => {
+		return () => {
+			if (objectUrlRef.current) {
+				URL.revokeObjectURL(objectUrlRef.current)
+				objectUrlRef.current = null
+			}
+		}
+	}, [])
 
-	// On first failure, wait briefly then force a re-render with a new key to
-	// retry the fetch (covers transient R2 timing issues).
-	// On second failure, give up and show the error state.
 	const handleImageError = useCallback(() => {
 		if (retryKey === 0) {
 			setTimeout(() => setRetryKey(1), 500)
 			return
 		}
+
+		if (retryKey === 1 && documentId) {
+			getCachedFileBlob(documentId).then((blob) => {
+				if (blob) {
+					if (objectUrlRef.current) {
+						URL.revokeObjectURL(objectUrlRef.current)
+					}
+					const objUrl = URL.createObjectURL(blob)
+					objectUrlRef.current = objUrl
+					setActiveSrc(objUrl)
+					setRetryKey(2)
+				} else {
+					setImageError(true)
+					setIsLoading(false)
+				}
+			})
+			return
+		}
+
 		setImageError(true)
 		setIsLoading(false)
-	}, [retryKey])
+	}, [retryKey, documentId])
 
-	if (imageError || !url) {
+	if (imageError || !activeSrc) {
 		return (
 			<div className="flex items-center justify-center h-full text-[#737373]">
 				<p>Failed to load image</p>
@@ -43,7 +72,7 @@ export function ImagePreview({ url, title }: ImagePreviewProps) {
 			<div
 				className="absolute inset-0 bg-cover bg-center"
 				style={{
-					backgroundImage: `url(${url})`,
+					backgroundImage: `url(${activeSrc})`,
 					filter: "blur(100px)",
 					transform: "scale(1.1)",
 					opacity: isLoading ? 0.5 : 1,
@@ -52,7 +81,7 @@ export function ImagePreview({ url, title }: ImagePreviewProps) {
 			<div className="absolute inset-0 bg-black/30" />
 			<img
 				key={retryKey}
-				src={url}
+				src={activeSrc}
 				alt={title || "Image preview"}
 				className={cn(
 					"relative max-w-full max-h-full size-auto object-contain z-10",
diff --git a/apps/web/components/document-modal/content/index.tsx b/apps/web/components/document-modal/content/index.tsx
index 81f29b298..8e1c9a11e 100644
--- a/apps/web/components/document-modal/content/index.tsx
+++ b/apps/web/components/document-modal/content/index.tsx
@@ -88,7 +88,13 @@ export function DocumentContent({
 
 	switch (contentType) {
 		case "image":
-			return <ImagePreview url={document.url ?? ""} title={document.title} />
+			return (
+				<ImagePreview
+					url={document.url ?? ""}
+					title={document.title}
+					documentId={document.id}
+				/>
+			)
 
 		case "tweet":
 			return (
diff --git a/apps/web/components/document-modal/content/pdf.tsx b/apps/web/components/document-modal/content/pdf.tsx
index e633db86c..ca8d6f90c 100644
--- a/apps/web/components/document-modal/content/pdf.tsx
+++ b/apps/web/components/document-modal/content/pdf.tsx
@@ -1,23 +1,55 @@
 "use client"
 
 import { Document, Page, pdfjs } from "react-pdf"
-import { useCallback, useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import "react-pdf/dist/Page/AnnotationLayer.css"
 import "react-pdf/dist/Page/TextLayer.css"
+import { getCachedFileBlob } from "@/lib/file-cache"
 
-// Configure PDF.js worker to use local package
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
 	"pdfjs-dist/build/pdf.worker.min.mjs",
 	import.meta.url,
 ).toString()
 
+type FileSource = string | { url: string; withCredentials: boolean } | null
+
 interface PdfViewerProps {
 	url: string | null | undefined
 	documentId?: string | null
 }
 
 export function PdfViewer({ url, documentId }: PdfViewerProps) {
-	const fileSource = useMemo(() => {
+	const [cachedUrl, setCachedUrl] = useState<string | null>(null)
+	const [cacheChecked, setCacheChecked] = useState(false)
+	const objectUrlRef = useRef<string | null>(null)
+
+	useEffect(() => {
+		let revoked = false
+		if (!documentId) {
+			setCacheChecked(true)
+			return
+		}
+
+		getCachedFileBlob(documentId).then((blob) => {
+			if (revoked) return
+			if (blob) {
+				const objUrl = URL.createObjectURL(blob)
+				objectUrlRef.current = objUrl
+				setCachedUrl(objUrl)
+			}
+			setCacheChecked(true)
+		})
+
+		return () => {
+			revoked = true
+			if (objectUrlRef.current) {
+				URL.revokeObjectURL(objectUrlRef.current)
+				objectUrlRef.current = null
+			}
+		}
+	}, [documentId])
+
+	const remoteFileSource: FileSource = useMemo(() => {
 		if (!url) return null
 		try {
 			if (new URL(url).hostname === "www.googleapis.com" && documentId) {
@@ -32,12 +64,34 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
 		return url
 	}, [url, documentId])
 
+	const backendProxySource: FileSource = useMemo(() => {
+		if (!documentId) return null
+		const base =
+			process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
+		return { url: `${base}/v3/file-proxy/${documentId}`, withCredentials: true }
+	}, [documentId])
+
 	const [numPages, setNumPages] = useState<number | null>(null)
 	const [loading, setLoading] = useState(true)
 	const [error, setError] = useState<string | null>(null)
-	const [retryKey, setRetryKey] = useState(0)
+	const [failedSources, setFailedSources] = useState(0)
+
+	const fileSource = useMemo((): FileSource => {
+		if (cachedUrl) return cachedUrl
+		if (failedSources === 0) return remoteFileSource
+		if (failedSources === 1 && backendProxySource) return backendProxySource
+		return null
+	}, [cachedUrl, failedSources, remoteFileSource, backendProxySource])
 
-	if (!url) {
+	if (!cacheChecked) {
+		return (
+			<div className="flex items-center justify-center h-full text-gray-400">
+				Loading PDF…
+			</div>
+		)
+	}
+
+	if (!url && !cachedUrl) {
 		return (
 			<div className="flex items-center justify-center h-full text-gray-400">
 				No PDF URL provided
@@ -51,24 +105,26 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
 		setError(null)
 	}
 
-	// On first failure, wait briefly then force a re-mount of the Document
-	// component to retry (covers transient R2 timing issues).
-	// On second failure, give up and show the error state.
-	const onDocumentLoadError = useCallback(
-		(err: Error) => {
-			if (retryKey === 0) {
-				setTimeout(() => {
-					setRetryKey(1)
-					setLoading(true)
-					setError(null)
-				}, 500)
-				return
-			}
+	function onDocumentLoadError(err: Error) {
+		if (cachedUrl) {
 			setError(err.message || "Failed to load PDF")
 			setLoading(false)
-		},
-		[retryKey],
-	)
+			return
+		}
+
+		const nextFailed = failedSources + 1
+		const hasMoreSources =
+			(nextFailed === 1 && backendProxySource !== null) || nextFailed < 1
+
+		if (hasMoreSources) {
+			setFailedSources(nextFailed)
+			setLoading(true)
+			setError(null)
+		} else {
+			setError(err.message || "Failed to load PDF")
+			setLoading(false)
+		}
+	}
 
 	return (
 		<div className="flex flex-col size-full overflow-hidden scrollbar-thin">
@@ -82,35 +138,33 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
 					Error: {error}
 				</div>
 			)}
-			<div className="flex-1 overflow-auto w-full">
-				<Document
-					key={retryKey}
-					file={
-						fileSource ||
-						"https://corsproxy.io/?" +
-							encodeURIComponent("http://www.pdf995.com/samples/pdf.pdf")
-					}
-					onLoadSuccess={onDocumentLoadSuccess}
-					onLoadError={onDocumentLoadError}
-					loading={null}
-					className="w-full"
-				>
-					{numPages && (
-						<div className="flex flex-col items-center gap-4 py-4 w-full">
-							{Array.from(new Array(numPages), (_, index) => (
-								<Page
-									key={`page_${index + 1}`}
-									pageNumber={index + 1}
-									renderTextLayer
-									renderAnnotationLayer
-									className="shadow-lg"
-									width={630}
-								/>
-							))}
-						</div>
-					)}
-				</Document>
-			</div>
+			{fileSource && (
+				<div className="flex-1 overflow-auto w-full">
+					<Document
+						key={`${failedSources}-${cachedUrl ? "cache" : "remote"}`}
+						file={fileSource}
+						onLoadSuccess={onDocumentLoadSuccess}
+						onLoadError={onDocumentLoadError}
+						loading={null}
+						className="w-full"
+					>
+						{numPages && (
+							<div className="flex flex-col items-center gap-4 py-4 w-full">
+								{Array.from(new Array(numPages), (_, index) => (
+									<Page
+										key={`page_${index + 1}`}
+										pageNumber={index + 1}
+										renderTextLayer
+										renderAnnotationLayer
+										className="shadow-lg"
+										width={630}
+									/>
+								))}
+							</div>
+						)}
+					</Document>
+				</div>
+			)}
 		</div>
 	)
 }
diff --git a/apps/web/components/select-spaces-modal.tsx b/apps/web/components/select-spaces-modal.tsx
index 528a2f862..7198d435d 100644
--- a/apps/web/components/select-spaces-modal.tsx
+++ b/apps/web/components/select-spaces-modal.tsx
@@ -3,7 +3,7 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from "react"
 import Image from "next/image"
 import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
-import { Dialog, DialogContent } from "@repo/ui/components/dialog"
+import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog"
 import { Drawer, DrawerContent, DrawerTitle } from "@repo/ui/components/drawer"
 import { cn } from "@lib/utils"
 import { useIsMobile } from "@hooks/use-mobile"
@@ -1128,14 +1128,14 @@ export function SelectSpacesModal({
 			>
 				<div className="flex items-start justify-between gap-4 px-4 pt-4">
 					<div className="pl-1 space-y-1 flex-1">
-						<p
+						<DialogTitle
 							className={cn(
 								"font-semibold text-[#fafafa]",
 								dmSans125ClassName(),
 							)}
 						>
 							Select Space
-						</p>
+						</DialogTitle>
 						<p className="text-[#737373] font-medium text-[14px] leading-[1.35]">
 							{isBulkDeleteMode
 								? "Choose spaces to permanently delete"
diff --git a/apps/web/components/superloader.tsx b/apps/web/components/superloader.tsx
index 5cac100f5..2c40152f3 100644
--- a/apps/web/components/superloader.tsx
+++ b/apps/web/components/superloader.tsx
@@ -47,7 +47,7 @@ export function SuperLoader({
 		<output
 			aria-label={label}
 			className={`inline-flex flex-row items-center gap-2 ${className}`}
-			style={{ width: size + 10 }}
+			style={{ minWidth: size + 10 }}
 		>
 			<motion.svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -87,7 +87,7 @@ export function SuperLoader({
 			</motion.svg>
 
 			<span
-				className="text-xs font-medium text-slate-500"
+				className="whitespace-nowrap text-xs font-medium text-slate-500"
 				style={{ fontSize: size * 0.25 }}
 			>
 				{label}
diff --git a/apps/web/globals.css b/apps/web/globals.css
index 9ab81965f..ecacedf5d 100644
--- a/apps/web/globals.css
+++ b/apps/web/globals.css
@@ -190,6 +190,16 @@
 	padding-left: 0.25rem;
 }
 
+/* Loose lists wrap item content in <p> whose top margin detaches the bullet */
+.chat-markdown-content li > p:first-child {
+	margin-top: 0;
+}
+
+/* Model spams `---` between every section; headings already separate them */
+.chat-markdown-content hr {
+	display: none;
+}
+
 .shadow-inside-out {
 	box-shadow:
 		inset 0 2px 4px rgba(0, 0, 0, 0.3),
diff --git a/apps/web/hooks/use-document-mutations.ts b/apps/web/hooks/use-document-mutations.ts
index bc048415f..05d9680b1 100644
--- a/apps/web/hooks/use-document-mutations.ts
+++ b/apps/web/hooks/use-document-mutations.ts
@@ -7,28 +7,25 @@ import {
 } from "@tanstack/react-query"
 import { toast } from "sonner"
 import { $fetch } from "@lib/api"
-import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
-import type { z } from "zod"
 import { useAuth } from "@lib/auth-context"
 import { analytics } from "@/lib/analytics"
 
-type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
+/** Pull the human-readable message out of a $fetch error (handles `{error}`/`{message}`/string). */
+function fetchErrorMessage(err: unknown, fallback: string): string {
+	if (typeof err === "string") return err
+	if (err && typeof err === "object") {
+		const e = err as { error?: unknown; message?: unknown }
+		if (typeof e.error === "string") return e.error
+		if (typeof e.message === "string") return e.message
+	}
+	return fallback
+}
 
 interface DocumentWithId {
 	id?: string
 	customId?: string | null
 }
 
-interface DocumentsQueryData {
-	documents: DocumentWithId[]
-	totalCount: number
-}
-
-type InfiniteQueryData = {
-	pages: DocumentsResponse[]
-	pageParams: number[]
-}
-
 interface UseDocumentMutationsOptions {
 	onClose?: () => void
 }
@@ -566,7 +563,9 @@ export function useDocumentMutations({
 			})
 
 			if (response.error) {
-				throw new Error(response.error?.message || "Failed to delete document")
+				throw new Error(
+					fetchErrorMessage(response.error, "Failed to delete document"),
+				)
 			}
 
 			return response.data
@@ -606,7 +605,9 @@ export function useDocumentMutations({
 			})
 
 			if (response.error) {
-				throw new Error(response.error?.message || "Failed to delete documents")
+				throw new Error(
+					fetchErrorMessage(response.error, "Failed to delete documents"),
+				)
 			}
 
 			return response.data
diff --git a/apps/web/lib/analytics.ts b/apps/web/lib/analytics.ts
index 132ebeb33..f9f1dfeeb 100644
--- a/apps/web/lib/analytics.ts
+++ b/apps/web/lib/analytics.ts
@@ -122,6 +122,9 @@ export const analytics = {
 	// chat analytics
 	chatMessageSent: (props: {
 		source: "typed" | "suggested" | "highlight" | "home"
+		attachment_count?: number
+		saved_attachment_count?: number
+		temporary_attachment_count?: number
 	}) => safeCapture("chat_message_sent", props),
 
 	chatSuggestedQuestionClicked: () =>
diff --git a/apps/web/lib/file-cache.ts b/apps/web/lib/file-cache.ts
new file mode 100644
index 000000000..d503d0e5f
--- /dev/null
+++ b/apps/web/lib/file-cache.ts
@@ -0,0 +1,51 @@
+import { createStore, get, set, del } from "idb-keyval"
+
+const fileCacheStore = createStore("supermemory-file-cache", "blobs")
+
+interface CachedFile {
+	blob: Blob
+	mimeType: string
+}
+
+export async function cacheFileBlob(
+	documentId: string,
+	blob: Blob,
+	mimeType: string,
+): Promise<void> {
+	try {
+		await set(
+			documentId,
+			{ blob, mimeType } satisfies CachedFile,
+			fileCacheStore,
+		)
+	} catch {
+		// Storage full or unavailable — non-critical, skip silently
+	}
+}
+
+export async function getCachedFileBlob(
+	documentId: string,
+): Promise<Blob | null> {
+	try {
+		const cached = await get<CachedFile>(documentId, fileCacheStore)
+		return cached?.blob ?? null
+	} catch {
+		return null
+	}
+}
+
+export async function getCachedFileUrl(
+	documentId: string,
+): Promise<string | null> {
+	const blob = await getCachedFileBlob(documentId)
+	if (!blob) return null
+	return URL.createObjectURL(blob)
+}
+
+export async function removeCachedFile(documentId: string): Promise<void> {
+	try {
+		await del(documentId, fileCacheStore)
+	} catch {
+		// non-critical
+	}
+}
diff --git a/apps/web/lib/models.tsx b/apps/web/lib/models.tsx
index c704ddad2..5d3479efb 100644
--- a/apps/web/lib/models.tsx
+++ b/apps/web/lib/models.tsx
@@ -1,4 +1,9 @@
 export const models = [
+	{
+		id: "grok-4.3",
+		name: "Grok 4.3",
+		description: "xAI's latest model",
+	},
 	{
 		id: "gpt-5.1",
 		name: "GPT 5.1",
@@ -20,6 +25,7 @@ export type ModelId = (typeof models)[number]["id"]
 export type ReasoningEffort = "instant" | "thinking"
 
 export const modelNames: Record<ModelId, { name: string; version: string }> = {
+	"grok-4.3": { name: "Grok", version: "4.3" },
 	"gpt-5.1": { name: "GPT", version: "5.1" },
 	"claude-sonnet-4.6": { name: "Claude", version: "4.6" },
 	"gemini-2.5-pro": { name: "Gemini", version: "3 Pro" },