diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index 75c4d902..5a20f17a 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -1,239 +1,358 @@
 ---
+// ChatModal.astro — Persistent Right-Side Resizable "Ask Agent" Drawer (Desktop resizable side panel, Mobile full-screen drawer)
 ---
 
-<div id="ai-chat-widget">
-	<!-- Floating Trigger Button -->
-	<button
-		type="button"
-		id="ai-chat-open-btn"
-		class="fixed bottom-6 right-6 z-50 flex items-center gap-2.5 rounded-full bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground shadow-lg hover:opacity-90 transition-all hover:scale-105 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-		aria-label="Open Agent AJ"
+<aside
+	id="aj-agent-drawer"
+	class="hidden fixed top-0 right-0 bottom-0 z-50 w-full md:w-[var(--aj-drawer-width,420px)] flex-col border-l border-border bg-card text-foreground shadow-2xl select-none md:select-auto"
+	aria-label="Ask Agent AJ"
+>
+	<!-- Desktop Left-Edge Drag Resize Handle -->
+	<div
+		id="aj-drawer-resize-handle"
+		class="hidden md:flex absolute left-0 top-0 bottom-0 w-2 -translate-x-1/2 cursor-col-resize items-center justify-center group z-20"
+		title="Drag to resize Ask Agent panel"
+		aria-hidden="true"
 	>
-		<img src="/icon.svg" alt="" class="size-5 object-contain" width="20" height="20" />
-		<span>Ask Agent AJ</span>
-	</button>
+		<div class="h-full w-0.5 bg-transparent group-hover:bg-primary/60 group-active:bg-primary transition-colors"></div>
+	</div>
+
+	<!-- Drawer Header (Matches Sanity Docs "ASK AGENT" bar) -->
+	<header class="flex items-center justify-between border-b border-border px-4 py-3.5 bg-background/60 shrink-0">
+		<div class="flex items-center gap-2.5 min-w-0">
+			<span class="font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
+				ASK AGENT
+			</span>
+			<span
+				id="aj-drawer-telemetry-pill"
+				class="hidden truncate rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-medium text-primary"
+				title="Cloudflare Clairic Extraction Telemetry"
+			></span>
+		</div>
 
-	<!-- Modal Backdrop & Window -->
+		<div class="flex items-center gap-1">
+			<!-- New Conversation / Clear Button (Compose Icon) -->
+			<button
+				type="button"
+				id="aj-drawer-new-btn"
+				class="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
+				title="New conversation"
+				aria-label="New conversation"
+			>
+				<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+					<path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path>
+				</svg>
+			</button>
+
+			<!-- Close Drawer Button -->
+			<button
+				type="button"
+				id="aj-drawer-close-btn"
+				class="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
+				title="Close Ask Agent"
+				aria-label="Close Ask Agent"
+			>
+				<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<line x1="18" y1="6" x2="6" y2="18"></line>
+					<line x1="6" y1="6" x2="18" y2="18"></line>
+				</svg>
+			</button>
+		</div>
+	</header>
+
+	<!-- Messages Container -->
 	<div
-		id="ai-chat-modal"
-		class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs transition-opacity"
-		role="dialog"
-		aria-modal="true"
-		aria-labelledby="ai-chat-title"
+		id="ai-chat-messages"
+		class="flex-1 overflow-y-auto px-4 py-5 flex flex-col gap-5 text-sm select-text"
 	>
-		<div class="relative flex flex-col w-full max-w-2xl h-[640px] max-h-[90vh] rounded-2xl border border-border bg-card shadow-2xl overflow-hidden">
-			<!-- Header -->
-			<header class="flex items-center justify-between border-b border-border px-5 py-3.5 bg-muted/40">
-				<div class="flex items-center gap-3">
-					<img
-						src="/icon.svg"
-						alt="Agent AJ Logo"
-						class="size-8 rounded-lg object-contain bg-primary/10 p-1"
-						width="32"
-						height="32"
-					/>
-					<div>
-						<h2 id="ai-chat-title" class="text-sm font-bold tracking-tight">Agent AJ</h2>
-						<p class="text-[11px] text-muted-foreground">Grounded in Sanity Content Lake & Workers AI</p>
-					</div>
-				</div>
-				<button
-					type="button"
-					id="ai-chat-close-btn"
-					class="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
-					aria-label="Close dialog"
-				>
-					<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<line x1="18" y1="6" x2="6" y2="18"></line>
-						<line x1="6" y1="6" x2="18" y2="18"></line>
-					</svg>
-				</button>
-			</header>
-
-			<!-- Messages Container -->
-			<div id="ai-chat-messages" class="flex-1 overflow-y-auto p-4 sm:p-5 flex flex-col gap-4 text-sm">
-				<!-- Welcome / Prompt chips -->
-				<div id="ai-chat-welcome" class="flex flex-col gap-3 my-auto text-center items-center py-6">
-					<img src="/icon.svg" alt="Agent AJ" class="size-14 rounded-2xl object-contain bg-primary/10 p-2 shadow-sm" width="56" height="56" />
-					<h3 class="font-semibold text-base">Hi, I'm Agent AJ!</h3>
-					<p class="text-xs text-muted-foreground max-w-sm">
-						I query live CodingCat.dev podcasts, tutorials, and transcripts. Ask me anything or select a quick request:
-					</p>
-					<div class="flex flex-wrap gap-2 justify-center max-w-md pt-2">
-						<button
-							type="button"
-							class="ai-prompt-chip inline-flex items-center gap-1.5 text-xs px-3.5 py-2 rounded-full border border-border bg-card hover:bg-accent text-foreground cursor-pointer transition-all font-medium shadow-2xs hover:scale-105"
-							data-prompt="What is the latest podcast episode?"
-						>
-							<svg class="size-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
-								<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-								<line x1="12" x2="12" y1="19" y2="22"></line>
-							</svg>
-							<span>Latest podcast</span>
-						</button>
-						<button
-							type="button"
-							class="ai-prompt-chip inline-flex items-center gap-1.5 text-xs px-3.5 py-2 rounded-full border border-border bg-card hover:bg-accent text-foreground cursor-pointer transition-all font-medium shadow-2xs hover:scale-105"
-							data-prompt="What is the latest blog post?"
-						>
-							<svg class="size-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-								<polyline points="14 2 14 8 20 8"></polyline>
-								<line x1="16" y1="13" x2="8" y2="13"></line>
-								<line x1="16" y1="17" x2="8" y2="17"></line>
-							</svg>
-							<span>Latest blog post</span>
-						</button>
-						<button
-							type="button"
-							class="ai-prompt-chip inline-flex items-center gap-1.5 text-xs px-3.5 py-2 rounded-full border border-border bg-card hover:bg-accent text-foreground cursor-pointer transition-all font-medium shadow-2xs hover:scale-105"
-							data-prompt="What are the top videos on CodingCat.dev?"
-						>
-							<svg class="size-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<polygon points="23 7 16 12 23 17 23 7"></polygon>
-								<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
-							</svg>
-							<span>Top videos</span>
-						</button>
-						<button
-							type="button"
-							class="ai-prompt-chip inline-flex items-center gap-1.5 text-xs px-3.5 py-2 rounded-full border border-border bg-card hover:bg-accent text-foreground cursor-pointer transition-all font-medium shadow-2xs hover:scale-105"
-							data-prompt="Tell me a programming dad joke!"
-						>
-							<svg class="size-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<circle cx="12" cy="12" r="10"></circle>
-								<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
-								<line x1="9" x2="9.01" y1="9" y2="9"></line>
-								<line x1="15" x2="15.01" y1="9" y2="9"></line>
-							</svg>
-							<span>Coding joke</span>
-						</button>
-					</div>
+		<!-- Welcome / Initial State -->
+		<div id="ai-chat-welcome" class="flex flex-col gap-4 my-auto py-6">
+			<div class="flex items-center gap-2.5">
+				<img src="/icon.svg" alt="Agent AJ" class="size-8 rounded-lg object-contain bg-primary/10 p-1" width="32" height="32" />
+				<div>
+					<h3 class="font-semibold text-sm text-foreground">Agent AJ</h3>
+					<p class="text-[11px] text-muted-foreground">Sanity Content Lake • Cloudflare Clairic</p>
 				</div>
 			</div>
-
-			<!-- Predefined Quick Request Buttons (Sticky Bar) -->
-			<div class="flex items-center gap-1.5 px-3 sm:px-4 py-2 border-t border-border/40 bg-muted/20 overflow-x-auto no-scrollbar">
-				<span class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider shrink-0 mr-1">Quick:</span>
+			<p class="text-sm text-muted-foreground leading-relaxed">
+				Ask anything about CodingCat.dev podcasts, tutorials, guests, or transcripts. This panel stays open as you browse episodes.
+			</p>
+			<div class="flex flex-col items-start gap-2 pt-1">
 				<button
 					type="button"
-					class="ai-prompt-chip shrink-0 inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border border-border bg-card hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors font-medium shadow-2xs"
+					class="ai-prompt-chip inline-flex items-center gap-2 rounded-full border border-border bg-background/60 hover:bg-accent px-3.5 py-1.5 text-[11px] font-mono uppercase tracking-wider text-foreground transition-colors cursor-pointer"
 					data-prompt="What is the latest podcast episode?"
 				>
-					<svg class="size-3 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
-						<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-						<line x1="12" x2="12" y1="19" y2="22"></line>
-					</svg>
-					<span>Latest podcast</span>
+					LATEST PODCAST EPISODE
 				</button>
 				<button
 					type="button"
-					class="ai-prompt-chip shrink-0 inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border border-border bg-card hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors font-medium shadow-2xs"
+					class="ai-prompt-chip inline-flex items-center gap-2 rounded-full border border-border bg-background/60 hover:bg-accent px-3.5 py-1.5 text-[11px] font-mono uppercase tracking-wider text-foreground transition-colors cursor-pointer"
 					data-prompt="What is the latest blog post?"
 				>
-					<svg class="size-3 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-						<polyline points="14 2 14 8 20 8"></polyline>
-						<line x1="16" y1="13" x2="8" y2="13"></line>
-						<line x1="16" y1="17" x2="8" y2="17"></line>
-					</svg>
-					<span>Latest blog post</span>
+					LATEST BLOG POST
 				</button>
 				<button
 					type="button"
-					class="ai-prompt-chip shrink-0 inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border border-border bg-card hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors font-medium shadow-2xs"
+					class="ai-prompt-chip inline-flex items-center gap-2 rounded-full border border-border bg-background/60 hover:bg-accent px-3.5 py-1.5 text-[11px] font-mono uppercase tracking-wider text-foreground transition-colors cursor-pointer"
 					data-prompt="What are the top videos on CodingCat.dev?"
 				>
-					<svg class="size-3 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<polygon points="23 7 16 12 23 17 23 7"></polygon>
-						<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
-					</svg>
-					<span>Top videos</span>
+					TOP YOUTUBE VIDEOS
 				</button>
 				<button
 					type="button"
-					class="ai-prompt-chip shrink-0 inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border border-border bg-card hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors font-medium shadow-2xs"
+					class="ai-prompt-chip inline-flex items-center gap-2 rounded-full border border-border bg-background/60 hover:bg-accent px-3.5 py-1.5 text-[11px] font-mono uppercase tracking-wider text-foreground transition-colors cursor-pointer"
 					data-prompt="Tell me a programming dad joke!"
 				>
-					<svg class="size-3 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<circle cx="12" cy="12" r="10"></circle>
-						<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
-						<line x1="9" x2="9.01" y1="9" y2="9"></line>
-						<line x1="15" x2="15.01" y1="9" y2="9"></line>
-					</svg>
-					<span>Coding joke</span>
+					PROGRAMMING DAD JOKE
 				</button>
 			</div>
-
-			<!-- Input Form -->
-			<form id="ai-chat-form" class="border-t border-border p-3 sm:p-4 bg-card flex items-center gap-2">
-				<input
-					type="text"
-					id="ai-chat-input"
-					placeholder="Ask Agent AJ about CodingCat.dev..."
-					class="flex-1 rounded-xl border border-input bg-background px-4 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all"
-					autocomplete="off"
-				/>
-				<button
-					type="submit"
-					id="ai-chat-send-btn"
-					class="rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground hover:opacity-90 disabled:opacity-50 transition-all cursor-pointer"
-				>
-					Send
-				</button>
-			</form>
 		</div>
 	</div>
-</div>
+
+	<!-- Input Footer (Matches Sanity Docs boxed input + Enter/Shift+Enter + circular up arrow) -->
+	<form
+		id="ai-chat-form"
+		class="border-t border-border p-3 bg-background/40 flex flex-col gap-2 shrink-0"
+	>
+		<div class="rounded-lg border border-border bg-background focus-within:border-primary/60 focus-within:ring-1 focus-within:ring-primary/40 transition-all p-2.5">
+			<label for="ai-chat-input" class="sr-only">Ask anything about CodingCat.dev</label>
+			<textarea
+				id="ai-chat-input"
+				rows="2"
+				placeholder="Ask anything about CodingCat.dev..."
+				class="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none leading-relaxed"
+			></textarea>
+		</div>
+		<div class="flex items-center justify-between px-0.5">
+			<span class="font-mono text-[11px] text-muted-foreground">
+				Enter to send, Shift+Enter for a new line
+			</span>
+			<button
+				type="submit"
+				id="ai-chat-send-btn"
+				class="size-7 rounded-full bg-foreground text-background hover:opacity-90 disabled:opacity-40 flex items-center justify-center transition-opacity cursor-pointer shrink-0"
+				aria-label="Send message"
+			>
+				<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<line x1="12" y1="19" x2="12" y2="5"></line>
+					<polyline points="5 12 12 5 19 12"></polyline>
+				</svg>
+			</button>
+		</div>
+	</form>
+</aside>
+
+<!-- Synchronous pre-paint script so the drawer survives across navigations without flicker -->
+<script is:inline>
+	(function () {
+		try {
+			var savedWidth = localStorage.getItem("cc_aj_drawer_width");
+			var widthPx = savedWidth ? Math.min(Math.max(parseInt(savedWidth, 10) || 420, 320), 780) : 420;
+			document.documentElement.style.setProperty("--aj-drawer-width", widthPx + "px");
+
+			var isOpen = localStorage.getItem("cc_aj_drawer_open") === "true";
+			var isDesktop = window.innerWidth >= 768;
+			var forceMobileOpen = sessionStorage.getItem("cc_aj_mobile_open") === "true";
+
+			if (isOpen && (isDesktop || forceMobileOpen)) {
+				var drawer = document.getElementById("aj-agent-drawer");
+				if (drawer) {
+					drawer.classList.remove("hidden");
+					drawer.classList.add("flex");
+					document.documentElement.classList.add("aj-drawer-open");
+				}
+				if (forceMobileOpen) {
+					sessionStorage.removeItem("cc_aj_mobile_open");
+				}
+			}
+		} catch (e) {}
+	})();
+</script>
 
 <script>
-	const openBtn = document.getElementById("ai-chat-open-btn");
-	const closeBtn = document.getElementById("ai-chat-close-btn");
-	const modal = document.getElementById("ai-chat-modal");
+	interface StoredMessage {
+		role: "user" | "assistant";
+		text: string;
+		telemetry?: string;
+		timestamp: number;
+	}
+
+	interface RecentAskItem {
+		prompt: string;
+		timestamp: number;
+	}
+
+	const STORAGE_OPEN_KEY = "cc_aj_drawer_open";
+	const STORAGE_WIDTH_KEY = "cc_aj_drawer_width";
+	const STORAGE_MESSAGES_KEY = "cc_aj_messages";
+	const STORAGE_RECENT_ASKS_KEY = "cc_aj_recent_asks";
+
+	const drawer = document.getElementById("aj-agent-drawer");
+	const resizeHandle = document.getElementById("aj-drawer-resize-handle");
+	const closeBtn = document.getElementById("aj-drawer-close-btn");
+	const newChatBtn = document.getElementById("aj-drawer-new-btn");
+	const headerTelemetryPill = document.getElementById("aj-drawer-telemetry-pill");
 	const form = document.getElementById("ai-chat-form") as HTMLFormElement | null;
-	const input = document.getElementById("ai-chat-input") as HTMLInputElement | null;
+	const input = document.getElementById("ai-chat-input") as HTMLTextAreaElement | null;
 	const sendBtn = document.getElementById("ai-chat-send-btn") as HTMLButtonElement | null;
 	const messagesContainer = document.getElementById("ai-chat-messages");
 	const welcomeContainer = document.getElementById("ai-chat-welcome");
 
 	let isStreaming = false;
+	let storedMessages: StoredMessage[] = [];
 
-	function openModal() {
-		if (modal) {
-			modal.classList.remove("hidden");
-			input?.focus();
+	function loadStoredMessages(): StoredMessage[] {
+		try {
+			const raw = localStorage.getItem(STORAGE_MESSAGES_KEY);
+			if (!raw) return [];
+			const parsed = JSON.parse(raw);
+			return Array.isArray(parsed) ? parsed.slice(-30) : [];
+		} catch {
+			return [];
 		}
 	}
 
-	function closeModal() {
-		if (modal) {
-			modal.classList.add("hidden");
+	function saveStoredMessages() {
+		try {
+			localStorage.setItem(
+				STORAGE_MESSAGES_KEY,
+				JSON.stringify(storedMessages.slice(-30)),
+			);
+		} catch {}
+	}
+
+	function recordRecentAsk(prompt: string) {
+		try {
+			const raw = localStorage.getItem(STORAGE_RECENT_ASKS_KEY);
+			const list: RecentAskItem[] = raw ? JSON.parse(raw) : [];
+			const filtered = Array.isArray(list)
+				? list.filter((item) => item.prompt.toLowerCase() !== prompt.toLowerCase())
+				: [];
+			filtered.unshift({ prompt, timestamp: Date.now() });
+			localStorage.setItem(
+				STORAGE_RECENT_ASKS_KEY,
+				JSON.stringify(filtered.slice(0, 6)),
+			);
+		} catch {}
+	}
+
+	function setDrawerOpen(open: boolean, initialPrompt?: string) {
+		if (!drawer) return;
+		if (open) {
+			drawer.classList.remove("hidden");
+			drawer.classList.add("flex");
+			document.documentElement.classList.add("aj-drawer-open");
+			try {
+				localStorage.setItem(STORAGE_OPEN_KEY, "true");
+			} catch {}
+			if (initialPrompt && input) {
+				input.value = initialPrompt;
+				submitPrompt(initialPrompt);
+			} else {
+				setTimeout(() => input?.focus(), 30);
+			}
+		} else {
+			drawer.classList.add("hidden");
+			drawer.classList.remove("flex");
+			document.documentElement.classList.remove("aj-drawer-open");
+			try {
+				localStorage.setItem(STORAGE_OPEN_KEY, "false");
+			} catch {}
 		}
+		window.dispatchEvent(
+			new CustomEvent("aj-drawer-change", { detail: { open } }),
+		);
 	}
 
-	openBtn?.addEventListener("click", openModal);
-	closeBtn?.addEventListener("click", closeModal);
+	function toggleDrawer() {
+		const isOpen = drawer && !drawer.classList.contains("hidden");
+		setDrawerOpen(!isOpen);
+	}
 
-	modal?.addEventListener("click", (e) => {
-		if (e.target === modal) {
-			closeModal();
+	// Expose global APIs for SearchModal, Header, and pages
+	(
+		window as unknown as {
+			openAgentAjModal?: (prompt?: string) => void;
+			openAgentAjDrawer?: (prompt?: string) => void;
+			toggleAgentAjDrawer?: () => void;
 		}
-	});
+	).openAgentAjModal = (prompt?: string) => setDrawerOpen(true, prompt);
+	(
+		window as unknown as {
+			openAgentAjDrawer?: (prompt?: string) => void;
+		}
+	).openAgentAjDrawer = (prompt?: string) => setDrawerOpen(true, prompt);
+	(
+		window as unknown as {
+			toggleAgentAjDrawer?: () => void;
+		}
+	).toggleAgentAjDrawer = toggleDrawer;
+
+	closeBtn?.addEventListener("click", () => setDrawerOpen(false));
 
-	window.addEventListener("keydown", (e) => {
-		if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) {
-			closeModal();
+	newChatBtn?.addEventListener("click", () => {
+		storedMessages = [];
+		saveStoredMessages();
+		if (messagesContainer) {
+			Array.from(messagesContainer.children).forEach((child) => {
+				if (child.id !== "ai-chat-welcome") {
+					child.remove();
+				}
+			});
 		}
+		welcomeContainer?.classList.remove("hidden");
+		headerTelemetryPill?.classList.add("hidden");
+		input?.focus();
 	});
 
+	// Desktop Drag Resizing
+	if (resizeHandle && drawer) {
+		let isResizing = false;
+
+		resizeHandle.addEventListener("pointerdown", (e: PointerEvent) => {
+			if (window.innerWidth < 768) return;
+			isResizing = true;
+			resizeHandle.setPointerCapture(e.pointerId);
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+		});
+
+		resizeHandle.addEventListener("pointermove", (e: PointerEvent) => {
+			if (!isResizing) return;
+			const newWidth = Math.min(
+				Math.max(window.innerWidth - e.clientX, 320),
+				Math.min(780, window.innerWidth - 280),
+			);
+			document.documentElement.style.setProperty(
+				"--aj-drawer-width",
+				`${newWidth}px`,
+			);
+			try {
+				localStorage.setItem(STORAGE_WIDTH_KEY, String(Math.round(newWidth)));
+			} catch {}
+		});
+
+		const stopResize = (e: PointerEvent) => {
+			if (!isResizing) return;
+			isResizing = false;
+			try {
+				resizeHandle.releasePointerCapture(e.pointerId);
+			} catch {}
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+		};
+
+		resizeHandle.addEventListener("pointerup", stopResize);
+		resizeHandle.addEventListener("pointercancel", stopResize);
+	}
+
 	document.querySelectorAll(".ai-prompt-chip").forEach((chip) => {
 		chip.addEventListener("click", () => {
 			const prompt = chip.getAttribute("data-prompt");
-			if (prompt && input) {
-				input.value = prompt;
-				form?.dispatchEvent(new Event("submit", { cancelable: true }));
+			if (prompt) {
+				submitPrompt(prompt);
 			}
 		});
 	});
@@ -271,30 +390,6 @@
 			colorClass: "text-[#FF0000]",
 			svg: '<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z"/></svg>',
 		},
-		{
-			key: "pocketCasts",
-			label: "Pocket Casts",
-			colorClass: "text-[#F43E37]",
-			svg: '<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm0 3.6c4.639 0 8.4 3.761 8.4 8.4h-2.1c0-3.48-2.82-6.3-6.3-6.3S5.7 8.52 5.7 12s2.82 6.3 6.3 6.3v2.1c-4.639 0-8.4-3.761-8.4-8.4S7.361 3.6 12 3.6zm0 3.45c2.734 0 4.95 2.216 4.95 4.95h-2.1c0-1.574-1.276-2.85-2.85-2.85S9.15 10.426 9.15 12s1.276 2.85 2.85 2.85v2.1c-2.734 0-4.95-2.216-4.95-4.95S9.266 7.05 12 7.05z"/></svg>',
-		},
-		{
-			key: "castbox",
-			label: "Castbox",
-			colorClass: "text-[#F55B23]",
-			svg: '<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-4.5 9.5a1 1 0 0 1 2 0v5a1 1 0 0 1-2 0v-5zm3.5-3a1 1 0 0 1 2 0v11a1 1 0 0 1-2 0v-11zm3.5 2a1 1 0 0 1 2 0v7a1 1 0 0 1-2 0v-7zm3.5 2.5a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm-14 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2z"/></svg>',
-		},
-		{
-			key: "castro",
-			label: "Castro",
-			colorClass: "text-[#00B265]",
-			svg: '<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.5a7.5 7.5 0 0 1 6.364 11.47l-2.12-1.474a4.92 4.92 0 1 0-8.488 0l-2.12 1.474A7.5 7.5 0 0 1 12 4.5zm0 4.8a2.7 2.7 0 1 1 0 5.4 2.7 2.7 0 0 1 0-5.4z"/></svg>',
-		},
-		{
-			key: "overcast",
-			label: "Overcast",
-			colorClass: "text-[#FC7E0F]",
-			svg: '<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M12 2.25c-5.376 0-9.75 4.374-9.75 9.75s4.374 9.75 9.75 9.75 9.75-4.374 9.75-9.75S17.376 2.25 12 2.25zm0 1.5c4.55 0 8.25 3.7 8.25 8.25 0 2.91-1.515 5.475-3.795 6.945l-.915-2.07c1.62-.99 2.71-2.775 2.71-4.875 0-3.31-2.69-6-6-6s-6 2.69-6 6c0 2.1 1.09 3.885 2.71 4.875l-.915 2.07C5.765 17.475 4.25 14.91 4.25 12c0-4.55 3.7-8.25 8.25-8.25zm0 5.25a3 3 0 0 1 1.32 5.69l1.43 4.81h-1.6l-.8-2.69h-.7l-.8 2.69H9.25l1.43-4.81A3 3 0 0 1 12 9z"/></svg>',
-		},
 		{
 			key: "rss",
 			label: "RSS",
@@ -308,7 +403,6 @@
 	}
 
 	function renderRichAssistantContent(container: HTMLElement, rawText: string) {
-		// Extract podcast provider metadata trailer if present
 		const providerMap = new Map<string, Record<string, string>>();
 		const providerItems: Array<{
 			title: string;
@@ -332,14 +426,16 @@
 			} catch {}
 		}
 
-		// Clean up any localhost, trailer, or malformed url artifacts
 		let cleanedText = stripProviderTrailer(rawText)
 			.replace(/http:\/\/localhost:\d+/g, "")
-			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g, "[$1]($2)")
+			.replace(
+				/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g,
+				"[$1]($2)",
+			)
 			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]/g, "[$1]($1)");
 
-		// Extract YouTube links
-		const ytRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|live\/))([\w-]{11})/gi;
+		const ytRegex =
+			/(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|live\/))([\w-]{11})/gi;
 		const youtubeIds = new Set<string>();
 		let ytMatch: RegExpExecArray | null;
 		while ((ytMatch = ytRegex.exec(cleanedText)) !== null) {
@@ -348,9 +444,13 @@
 			}
 		}
 
-		// Extract Internal Episode / Post Links
-		const internalLinkRegex = /\[([^\]]+)\]\(((\/(?:podcast|post)\/[a-zA-Z0-9_\-]+))\)/gi;
-		const internalLinks: Array<{ title: string; url: string; type: "podcast" | "post" }> = [];
+		const internalLinkRegex =
+			/\[([^\]]+)\]\(((\/(?:podcast|post)\/[a-zA-Z0-9_\-]+))\)/gi;
+		const internalLinks: Array<{
+			title: string;
+			url: string;
+			type: "podcast" | "post";
+		}> = [];
 		let intMatch: RegExpExecArray | null;
 		while ((intMatch = internalLinkRegex.exec(cleanedText)) !== null) {
 			const linkUrl = intMatch[2];
@@ -361,12 +461,13 @@
 			}
 		}
 
-		// Ensure podcast items from tool results that were mentioned are included in internalLinks
 		for (const pItem of providerItems) {
 			if (
 				!internalLinks.some((l) => l.url === pItem.url) &&
 				(internalLinks.length === 0 ||
-					cleanedText.toLowerCase().includes(pItem.title.toLowerCase().slice(0, 24)))
+					cleanedText
+						.toLowerCase()
+						.includes(pItem.title.toLowerCase().slice(0, 24)))
 			) {
 				internalLinks.push({
 					title: pItem.title,
@@ -376,55 +477,46 @@
 			}
 		}
 
-		// Convert markdown formatting to safe HTML
 		let html = escapeHtml(cleanedText);
-
-		// Bold: **text**
 		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-		// Bullet list: - text
-		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
-		// Markdown links: [Title](url)
+		html = html.replace(
+			/^[ \t]*-[ \t]+(.*)$/gm,
+			"<li class='ml-4 list-disc'>$1</li>",
+		);
+		// Internal links navigate in the same tab so the user can bounce between podcasts while the drawer stays open
 		html = html.replace(
 			/\[([^\]]+)\]\(([^)]+)\)/g,
-			"<a href='$2' class='text-primary font-medium hover:underline inline-flex items-center gap-0.5' target='_blank' rel='noopener noreferrer'>$1<svg class='size-3 inline opacity-70' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'></path><polyline points='15 3 21 3 21 9'></polyline><line x1='10' y1='14' x2='21' y2='3'></line></svg></a>",
+			(_match, label, href) => {
+				const isInternal = href.startsWith("/");
+				return isInternal
+					? `<a href='${href}' class='aj-internal-nav text-primary font-medium underline underline-offset-2 hover:opacity-80'>${label}</a>`
+					: `<a href='${href}' class='text-primary font-medium underline underline-offset-2 hover:opacity-80' target='_blank' rel='noopener noreferrer'>${label}</a>`;
+			},
 		);
 
-		// Naked YouTube URLs
 		html = html.replace(
 			/(https?:\/\/(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|live\/))[\w-]+[^\s<]*)/gi,
 			"<a href='$1' class='text-primary font-medium hover:underline' target='_blank' rel='noopener noreferrer'>$1</a>",
 		);
 
-		// Newlines to <br> or <p>
-		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
+		html = html.replace(/\n\n/g, "<div class='h-2.5'></div>");
 		html = html.replace(/\n/g, "<br />");
 
-		// Build Cards Section
 		let cardsHtml = "";
 
-		// 1. YouTube Preview Cards
 		if (youtubeIds.size > 0) {
-			cardsHtml += `<div class="mt-3 flex flex-col gap-2.5">`;
+			cardsHtml += `<div class="mt-3 flex flex-col gap-2">`;
 			for (const ytId of youtubeIds) {
 				const thumbUrl = `https://img.youtube.com/vi/${ytId}/mqdefault.jpg`;
 				const ytUrl = `https://www.youtube.com/watch?v=${ytId}`;
 				cardsHtml += `
-					<a href="${ytUrl}" target="_blank" rel="noopener noreferrer" class="group relative flex flex-col sm:flex-row items-center gap-3 p-2.5 rounded-xl border border-border bg-card/80 hover:bg-accent/60 transition-all hover:scale-[1.01] hover:shadow-md overflow-hidden text-left no-underline">
-						<div class="relative shrink-0 w-full sm:w-36 h-24 sm:h-20 rounded-lg overflow-hidden bg-black/20 flex items-center justify-center">
-							<img src="${thumbUrl}" alt="YouTube Preview" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity" loading="lazy" />
-							<div class="absolute inset-0 flex items-center justify-center bg-black/25 group-hover:bg-black/10 transition-colors">
-								<div class="size-8 rounded-full bg-red-600/90 text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
-									<svg class="size-4 ml-0.5 fill-current" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-								</div>
-							</div>
+					<a href="${ytUrl}" target="_blank" rel="noopener noreferrer" class="group relative flex items-center gap-3 p-2 rounded-xl border border-border bg-background/60 hover:bg-accent/60 transition-all overflow-hidden text-left no-underline">
+						<div class="relative shrink-0 w-24 h-14 rounded-lg overflow-hidden bg-black/20 flex items-center justify-center">
+							<img src="${thumbUrl}" alt="YouTube Preview" class="w-full h-full object-cover" loading="lazy" />
 						</div>
-						<div class="flex-1 min-w-0 py-0.5">
-							<div class="inline-flex items-center gap-1.5 text-[10px] uppercase font-bold tracking-wider text-red-500 mb-0.5">
-								<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
-								YouTube Video
-							</div>
-							<div class="text-xs font-semibold text-foreground truncate group-hover:text-primary transition-colors">Watch on YouTube</div>
-							<div class="text-[11px] text-muted-foreground truncate">youtube.com/watch?v=${ytId}</div>
+						<div class="flex-1 min-w-0">
+							<div class="text-[10px] uppercase font-bold tracking-wider text-red-500">YouTube Video</div>
+							<div class="text-xs font-semibold text-foreground truncate group-hover:text-primary">Watch on YouTube</div>
 						</div>
 					</a>
 				`;
@@ -432,24 +524,23 @@
 			cardsHtml += `</div>`;
 		}
 
-		// 2. Clickable Episode / Post Cards (+ Podcast Host Provider Logos)
 		if (internalLinks.length > 0) {
-			cardsHtml += `<div class="mt-2.5 flex flex-col gap-2">`;
+			cardsHtml += `<div class="mt-3 flex flex-col gap-2">`;
 			for (const link of internalLinks) {
 				const isPodcast = link.type === "podcast";
 				const linksForEp = providerMap.get(link.url);
 				let providerBadgesHtml = "";
 				if (isPodcast && linksForEp) {
-					const badges = PROVIDER_CONFIG.filter((p) => Boolean(linksForEp[p.key]))
+					const badges = PROVIDER_CONFIG.filter((p) =>
+						Boolean(linksForEp[p.key]),
+					)
 						.map(
 							(p) => `
 								<a
 									href="${escapeHtml(linksForEp[p.key])}"
 									target="_blank"
 									rel="noopener noreferrer"
-									title="Listen on ${p.label}"
-									aria-label="Listen on ${p.label}"
-									class="inline-flex items-center gap-1 rounded-md border border-border/70 bg-background/80 px-2 py-1 text-[11px] font-medium text-foreground hover:bg-accent hover:border-primary/40 transition-colors no-underline"
+									class="inline-flex items-center gap-1 rounded-md border border-border/70 bg-background/80 px-2 py-0.5 text-[10px] font-medium text-foreground hover:bg-accent transition-colors no-underline"
 								>
 									<span class="${p.colorClass}">${p.svg}</span>
 									<span>${p.label}</span>
@@ -459,8 +550,7 @@
 						.join("");
 					if (badges) {
 						providerBadgesHtml = `
-							<div class="mt-2 pt-2 border-t border-border/60 flex flex-wrap items-center gap-1.5">
-								<span class="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mr-1">Listen on:</span>
+							<div class="mt-2 pt-2 border-t border-border/60 flex flex-wrap items-center gap-1">
 								${badges}
 							</div>
 						`;
@@ -468,25 +558,13 @@
 				}
 
 				cardsHtml += `
-					<div class="flex flex-col p-3 rounded-xl border border-border bg-card/90 hover:border-primary/40 transition-all shadow-2xs text-left">
-						<a href="${link.url}" class="group flex items-center justify-between gap-3 no-underline">
-							<div class="flex items-center gap-2.5 min-w-0">
-								<div class="size-8 rounded-lg ${isPodcast ? "bg-purple-500/10 text-purple-600 dark:text-purple-400" : "bg-blue-500/10 text-blue-600 dark:text-blue-400"} flex items-center justify-center shrink-0">
-									${
-										isPodcast
-											? '<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>'
-											: '<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>'
-									}
-								</div>
-								<div class="min-w-0">
-									<div class="text-xs font-semibold text-foreground group-hover:text-primary transition-colors truncate">${escapeHtml(link.title)}</div>
-									<div class="text-[10px] text-muted-foreground uppercase tracking-wider">${isPodcast ? "Podcast Episode" : "Blog Post"} • CodingCat.dev</div>
-								</div>
-							</div>
-							<div class="shrink-0 text-xs font-medium text-primary flex items-center gap-1 group-hover:translate-x-0.5 transition-transform">
-								<span>View</span>
-								<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+					<div class="flex flex-col p-2.5 rounded-xl border border-border bg-background/70 hover:border-primary/50 transition-all text-left">
+						<a href="${link.url}" class="aj-internal-nav group flex items-center justify-between gap-2.5 no-underline">
+							<div class="min-w-0">
+								<div class="text-xs font-semibold text-foreground group-hover:text-primary transition-colors truncate">${escapeHtml(link.title)}</div>
+								<div class="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">${isPodcast ? "Podcast Episode" : "Blog Post"}</div>
 							</div>
+							<span class="shrink-0 text-xs font-medium text-primary">Open →</span>
 						</a>
 						${providerBadgesHtml}
 					</div>
@@ -498,48 +576,100 @@
 		container.innerHTML = html + cardsHtml;
 	}
 
-	function appendMessage(role: "user" | "assistant", initialText = ""): HTMLElement {
-		if (welcomeContainer) {
-			welcomeContainer.classList.add("hidden");
-		}
+	function appendMessageElement(
+		role: "user" | "assistant",
+		initialText = "",
+		telemetryText?: string,
+	): { contentEl: HTMLElement; telemetryEl?: HTMLElement } {
+		welcomeContainer?.classList.add("hidden");
 
 		const msgDiv = document.createElement("div");
-		msgDiv.className = `flex flex-col gap-1 max-w-[85%] ${
-			role === "user"
-				? "ml-auto bg-primary text-primary-foreground rounded-2xl rounded-tr-xs px-4 py-2.5"
-				: "mr-auto bg-muted/60 text-foreground rounded-2xl rounded-tl-xs px-4 py-2.5 border border-border"
-		}`;
-
-		if (role === "assistant") {
-			const badge = document.createElement("div");
-			badge.className = "flex items-center gap-1.5 text-[11px] font-semibold text-primary mb-0.5";
-			badge.innerHTML = `<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" /><span>Agent AJ</span>`;
-			msgDiv.appendChild(badge);
+		if (role === "user") {
+			msgDiv.className =
+				"ml-auto max-w-[85%] rounded-lg border border-border bg-muted/80 px-3.5 py-2 text-sm text-foreground";
+			const contentDiv = document.createElement("div");
+			contentDiv.textContent = initialText;
+			msgDiv.appendChild(contentDiv);
+			messagesContainer?.appendChild(msgDiv);
+			return { contentEl: contentDiv };
 		}
 
+		msgDiv.className = "flex flex-col gap-1.5 w-full text-foreground";
+
+		const telemetryEl = document.createElement("div");
+		telemetryEl.className =
+			"font-mono text-[10px] text-primary/90 flex items-center gap-1.5";
+		if (telemetryText) {
+			telemetryEl.textContent = telemetryText;
+		} else {
+			telemetryEl.classList.add("hidden");
+		}
+		msgDiv.appendChild(telemetryEl);
+
 		const contentDiv = document.createElement("div");
-		contentDiv.className = "leading-relaxed text-sm";
+		contentDiv.className = "leading-relaxed text-sm text-foreground/95";
 		contentDiv.textContent = initialText;
 
 		msgDiv.appendChild(contentDiv);
 		messagesContainer?.appendChild(msgDiv);
-		messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
+		messagesContainer?.scrollTo({
+			top: messagesContainer.scrollHeight,
+			behavior: "smooth",
+		});
 
-		return contentDiv;
+		return { contentEl: contentDiv, telemetryEl };
 	}
 
-	form?.addEventListener("submit", async (e) => {
-		e.preventDefault();
-		if (!input) return;
-		const prompt = input.value.trim();
+	// Restore conversation history from localStorage across page navigations
+	function hydrateStoredConversation() {
+		storedMessages = loadStoredMessages();
+		if (storedMessages.length === 0) return;
+
+		welcomeContainer?.classList.add("hidden");
+		for (const msg of storedMessages) {
+			const { contentEl } = appendMessageElement(
+				msg.role,
+				msg.role === "user" ? msg.text : "",
+				msg.telemetry,
+			);
+			if (msg.role === "assistant") {
+				renderRichAssistantContent(contentEl, msg.text);
+			}
+			if (msg.telemetry && headerTelemetryPill) {
+				headerTelemetryPill.textContent = msg.telemetry;
+				headerTelemetryPill.classList.remove("hidden");
+			}
+		}
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	}
+
+	hydrateStoredConversation();
+
+	async function submitPrompt(rawPrompt: string) {
+		const prompt = rawPrompt.trim();
 		if (!prompt || isStreaming) return;
 
-		input.value = "";
+		if (input) input.value = "";
 		isStreaming = true;
 		if (sendBtn) sendBtn.disabled = true;
 
-		appendMessage("user", prompt);
-		const assistantContent = appendMessage("assistant", "Thinking...");
+		recordRecentAsk(prompt);
+		storedMessages.push({
+			role: "user",
+			text: prompt,
+			timestamp: Date.now(),
+		});
+		saveStoredMessages();
+
+		appendMessageElement("user", prompt);
+		const { contentEl: assistantContent, telemetryEl } = appendMessageElement(
+			"assistant",
+			"Thinking...",
+		);
+
+		let telemetryLabel = "";
 
 		try {
 			const res = await fetch("/api/chat", {
@@ -548,11 +678,27 @@
 				body: JSON.stringify({ prompt }),
 			});
 
+			const extSource = res.headers.get("x-aj-extraction-source");
+			const extIntent = res.headers.get("x-aj-intent");
+			const extLatency = res.headers.get("x-aj-extraction-latency-ms");
+			if (extSource && extIntent) {
+				telemetryLabel = `⚡ ${extSource}: ${extIntent} (${extLatency ?? "0"}ms)`;
+				if (telemetryEl) {
+					telemetryEl.textContent = telemetryLabel;
+					telemetryEl.classList.remove("hidden");
+				}
+				if (headerTelemetryPill) {
+					headerTelemetryPill.textContent = telemetryLabel;
+					headerTelemetryPill.classList.remove("hidden");
+				}
+			}
+
 			if (!res.ok) {
 				const errorJson = (await res.json().catch(() => ({}))) as {
 					error?: string;
 				};
-				assistantContent.textContent = `Error: ${errorJson.error || "Failed to generate answer"}`;
+				const errText = `Error: ${errorJson.error || "Failed to generate answer"}`;
+				assistantContent.textContent = errText;
 				return;
 			}
 
@@ -570,14 +716,25 @@
 				if (done) break;
 				const chunk = decoder.decode(value, { stream: true });
 				accumulatedText += chunk;
-				// Render progressive text during streaming (without metadata trailer)
 				assistantContent.textContent = stripProviderTrailer(accumulatedText);
-				messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
+				messagesContainer?.scrollTo({
+					top: messagesContainer.scrollHeight,
+					behavior: "smooth",
+				});
 			}
 
-			// On complete stream finish: render full rich content with cards & links
 			renderRichAssistantContent(assistantContent, accumulatedText);
-			messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
+			storedMessages.push({
+				role: "assistant",
+				text: accumulatedText,
+				telemetry: telemetryLabel || undefined,
+				timestamp: Date.now(),
+			});
+			saveStoredMessages();
+			messagesContainer?.scrollTo({
+				top: messagesContainer.scrollHeight,
+				behavior: "smooth",
+			});
 		} catch (err) {
 			assistantContent.textContent = `Connection error: ${err instanceof Error ? err.message : String(err)}`;
 		} finally {
@@ -585,5 +742,20 @@
 			if (sendBtn) sendBtn.disabled = false;
 			input?.focus();
 		}
+	}
+
+	// Enter to send, Shift+Enter for newline
+	input?.addEventListener("keydown", (e: KeyboardEvent) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			submitPrompt(input.value);
+		}
+	});
+
+	form?.addEventListener("submit", (e) => {
+		e.preventDefault();
+		if (input) {
+			submitPrompt(input.value);
+		}
 	});
 </script>
diff --git a/apps/site/src/components/Header.astro b/apps/site/src/components/Header.astro
index 1071824c..8459e84b 100644
--- a/apps/site/src/components/Header.astro
+++ b/apps/site/src/components/Header.astro
@@ -13,6 +13,7 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 ---
 
 <header
+	id="site-header"
 	class="fixed left-0 right-0 top-0 z-40 flex items-center justify-between px-6 py-4 shadow-md bg-background"
 >
 	<div class="flex items-center gap-4">
@@ -31,22 +32,25 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 			id="search-header-trigger"
 			data-track="search_open"
 			data-track-label="header_search"
-			class="inline-flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors border border-border/60 cursor-pointer"
+			class="inline-flex items-center justify-between gap-3 rounded-full px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors border border-border/70 cursor-pointer"
 			aria-label="Search CodingCat.dev (⌘K)"
 		>
-			<svg
-				class="size-4"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<circle cx="11" cy="11" r="8"></circle>
-				<path d="m21 21-4.3-4.3"></path>
-			</svg>
+			<span class="inline-flex items-center gap-1.5">
+				<svg
+					class="size-3.5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<circle cx="11" cy="11" r="8"></circle>
+					<path d="m21 21-4.3-4.3"></path>
+				</svg>
+				<span class="hidden sm:inline font-mono text-[11px] uppercase tracking-wider text-foreground">Search</span>
+			</span>
 			<span class="hidden md:inline-flex items-center text-[10px] font-mono bg-muted text-foreground px-1.5 py-0.5 rounded border border-border">⌘K</span>
 		</button>
 		<ThemeToggle />
diff --git a/apps/site/src/components/SearchModal.astro b/apps/site/src/components/SearchModal.astro
index e0dad2b2..d6d3a45b 100644
--- a/apps/site/src/components/SearchModal.astro
+++ b/apps/site/src/components/SearchModal.astro
@@ -1,23 +1,24 @@
 ---
-// SearchModal.astro — Accessible semantic search modal dialog
+// SearchModal.astro — Command-palette search modal with "Ask agent" as first item, Recently Asked, Recently Viewed, and Sanity Semantic Search
 ---
 
 <dialog
 	id="search-modal"
-	class="fixed inset-0 m-auto z-50 w-full max-w-2xl rounded-2xl border border-border bg-card p-0 shadow-2xl backdrop:bg-black/60 backdrop:backdrop-blur-xs text-foreground max-h-[85vh] flex-col overflow-hidden transition-all duration-150 open:flex"
+	closedby="any"
+	class="fixed inset-0 m-auto z-50 w-full max-w-2xl rounded-xl border border-border bg-card p-0 shadow-2xl backdrop:bg-black/65 backdrop:backdrop-blur-xs text-foreground max-h-[82vh] flex-col overflow-hidden transition-all duration-150 open:flex"
 	aria-labelledby="search-modal-title"
 >
-	<!-- Modal Header & Search Bar -->
+	<!-- Top Search Input Bar -->
 	<form
+		id="search-modal-form"
 		action="/search"
 		method="GET"
-		class="flex items-center border-b border-border px-4 py-3 gap-3 bg-muted/20"
+		class="flex items-center border-b border-border px-4 py-3.5 gap-3 bg-card"
 		toolname="search_content"
 		tooldescription="Search CodingCat.dev web development tutorials, blog posts, and podcasts"
-		onsubmit="return false"
 	>
 		<svg
-			class="size-5 shrink-0 text-muted-foreground"
+			class="size-4 shrink-0 text-muted-foreground"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -31,7 +32,7 @@
 		</svg>
 
 		<label for="search-modal-input" id="search-modal-title" class="sr-only">
-			Search CodingCat.dev
+			Search in CodingCat.dev
 		</label>
 
 		<input
@@ -39,8 +40,8 @@
 			id="search-modal-input"
 			name="q"
 			autocomplete="off"
-			placeholder="Search posts, podcasts, authors... (⌘K)"
-			class="w-full bg-transparent text-base md:text-lg placeholder:text-muted-foreground focus:outline-none"
+			placeholder="Search in CodingCat.dev..."
+			class="w-full bg-transparent text-sm md:text-base placeholder:text-muted-foreground focus:outline-none"
 			toolparamdescription="Search keyword or technical topic"
 		/>
 
@@ -56,7 +57,7 @@
 		<button
 			type="button"
 			id="search-modal-clear"
-			class="hidden text-muted-foreground hover:text-foreground size-6 items-center justify-center rounded-md"
+			class="hidden text-muted-foreground hover:text-foreground size-6 items-center justify-center rounded-md cursor-pointer"
 			aria-label="Clear query"
 		>
 			<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -69,100 +70,179 @@
 		<button
 			type="button"
 			id="search-modal-close"
-			class="rounded-md border border-border px-2 py-0.5 text-xs font-semibold text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+			class="rounded border border-border px-2 py-0.5 font-mono text-[10px] font-semibold uppercase text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
 			aria-label="Close search"
 		>
 			ESC
 		</button>
 	</form>
 
-	<!-- Content Type Filter Pills -->
-	<div class="flex items-center gap-1.5 border-b border-border/50 px-4 py-2 text-xs overflow-x-auto bg-muted/10">
-		<span class="text-muted-foreground font-medium uppercase tracking-wider text-[11px] mr-1">Filter:</span>
-		<button
-			type="button"
-			class="modal-filter-pill active-modal-pill rounded-full px-2.5 py-0.5 font-medium border border-border bg-primary text-primary-foreground transition-colors cursor-pointer"
-			data-type="all"
-		>
-			All
-		</button>
-		<button
-			type="button"
-			class="modal-filter-pill rounded-full px-2.5 py-0.5 font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
-			data-type="post"
-		>
-			Posts
-		</button>
-		<button
-			type="button"
-			class="modal-filter-pill rounded-full px-2.5 py-0.5 font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
-			data-type="podcast"
-		>
-			Podcasts
-		</button>
-		<button
-			type="button"
-			class="modal-filter-pill rounded-full px-2.5 py-0.5 font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
-			data-type="author"
-		>
-			Authors
-		</button>
-		<button
-			type="button"
-			class="modal-filter-pill rounded-full px-2.5 py-0.5 font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
-			data-type="guest"
+	<!-- Scrollable Command Palette Body -->
+	<div class="flex-1 overflow-y-auto px-2 py-2.5 min-h-[280px] flex flex-col gap-3">
+		<!-- FIRST ITEM (ALWAYS TOP): ✨ Ask agent -->
+		<div class="px-1">
+			<button
+				type="button"
+				id="modal-mode-ai"
+				data-nav-index="0"
+				class="modal-nav-item w-full flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium text-foreground hover:bg-accent focus:bg-accent focus:outline-none transition-colors cursor-pointer group"
+			>
+				<div class="flex items-center gap-3 min-w-0">
+					<!-- Sparkles / Ask Agent Icon -->
+					<svg
+						class="size-4 shrink-0 text-primary"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
+						<path d="M20 3v4"></path>
+						<path d="M22 5h-4"></path>
+						<path d="M4 17v2"></path>
+						<path d="M5 18H3"></path>
+					</svg>
+					<span class="truncate">
+						Ask agent<span id="modal-ask-agent-query" class="text-primary font-semibold"></span>
+					</span>
+				</div>
+				<span class="shrink-0 font-mono text-[10px] uppercase tracking-wider text-muted-foreground group-hover:text-foreground">
+					Agent AJ →
+				</span>
+			</button>
+		</div>
+
+		<!-- Filter Bar (shown when user is typing a search query) -->
+		<div
+			id="modal-filter-bar"
+			class="hidden items-center justify-between gap-2 px-3 py-1.5 border-y border-border/50 text-xs"
 		>
-			Guests
-		</button>
-	</div>
+			<div class="flex items-center gap-1.5 overflow-x-auto">
+				<span class="text-muted-foreground font-mono uppercase tracking-wider text-[10px] mr-1">Filter:</span>
+				<button
+					type="button"
+					class="modal-filter-pill active-modal-pill rounded-full px-2.5 py-0.5 text-[11px] font-medium border border-border bg-primary text-primary-foreground transition-colors cursor-pointer"
+					data-type="all"
+				>
+					All
+				</button>
+				<button
+					type="button"
+					class="modal-filter-pill rounded-full px-2.5 py-0.5 text-[11px] font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
+					data-type="post"
+				>
+					Posts
+				</button>
+				<button
+					type="button"
+					class="modal-filter-pill rounded-full px-2.5 py-0.5 text-[11px] font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
+					data-type="podcast"
+				>
+					Podcasts
+				</button>
+				<button
+					type="button"
+					class="modal-filter-pill rounded-full px-2.5 py-0.5 text-[11px] font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
+					data-type="author"
+				>
+					Authors
+				</button>
+				<button
+					type="button"
+					class="modal-filter-pill rounded-full px-2.5 py-0.5 text-[11px] font-medium border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
+					data-type="guest"
+				>
+					Guests
+				</button>
+			</div>
+			<span
+				id="modal-clairic-badge"
+				class="hidden shrink-0 rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-medium text-primary"
+			></span>
+		</div>
 
-	<!-- Body: Results or Suggestion States -->
-	<div class="flex-1 overflow-y-auto p-3 min-h-[220px]">
-		<!-- Initial Empty State -->
-		<div id="modal-state-initial" class="flex flex-col items-center justify-center py-10 text-center">
-			<p class="text-sm text-muted-foreground mb-4">
-				Start typing to search tutorials, podcast episodes, authors, and guests.
-			</p>
-			<div class="flex flex-wrap justify-center items-center gap-1.5 max-w-md">
-				<span class="text-xs text-muted-foreground">Try:</span>
-				{
-					["Astro", "Cloudflare", "Sanity", "Next.js", "AI"].map((tag) => (
-						<button
-							type="button"
-							class="modal-tag-suggestion text-xs px-2 py-0.5 rounded-md border border-border bg-muted/40 hover:bg-accent transition-colors cursor-pointer"
-							data-tag={tag}
-						>
-							{tag}
-						</button>
-					))
-				}
+		<!-- INITIAL STATE (When search input is empty: Recently Asked + Recently Viewed + Search Suggestions) -->
+		<div id="modal-state-initial" class="flex flex-col gap-4 px-1 pb-2">
+			<!-- RECENTLY ASKED -->
+			<div id="modal-recently-asked-section" class="hidden flex-col gap-1">
+				<div class="px-3 py-1 font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+					RECENTLY ASKED
+				</div>
+				<div id="modal-recently-asked-list" class="flex flex-col gap-0.5"></div>
+			</div>
+
+			<!-- RECENTLY VIEWED -->
+			<div id="modal-recently-viewed-section" class="hidden flex-col gap-1">
+				<div class="px-3 py-1 font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+					RECENTLY VIEWED
+				</div>
+				<div id="modal-recently-viewed-list" class="flex flex-col gap-0.5"></div>
+			</div>
+
+			<!-- SEARCH SUGGESTIONS -->
+			<div class="flex flex-col gap-1">
+				<div class="px-3 py-1 font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+					SEARCH SUGGESTIONS
+				</div>
+				<div class="flex flex-col gap-0.5">
+					{
+						[
+							{ label: "Latest podcast episodes", query: "latest podcast" },
+							{ label: "Sanity Content Lake & Studio", query: "Sanity" },
+							{ label: "Cloudflare Workers & AI", query: "Cloudflare" },
+							{ label: "Astro & Modern Web", query: "Astro" },
+						].map((item) => (
+							<button
+								type="button"
+								class="modal-tag-suggestion flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-foreground/90 hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
+								data-tag={item.query}
+							>
+								<svg
+									class="size-3.5 shrink-0 text-muted-foreground"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<circle cx="11" cy="11" r="8" />
+									<path d="m21 21-4.3-4.3" />
+								</svg>
+								<span>{item.label}</span>
+							</button>
+						))
+					}
+				</div>
 			</div>
 		</div>
 
 		<!-- No Results State -->
-		<div id="modal-state-empty" class="hidden flex flex-col items-center justify-center py-12 text-center">
+		<div id="modal-state-empty" class="hidden flex-col items-center justify-center py-10 text-center px-4">
 			<p class="text-sm font-semibold text-foreground mb-1" id="modal-empty-msg">No results found</p>
-			<p class="text-xs text-muted-foreground">Try broader search terms or check spelling.</p>
+			<p class="text-xs text-muted-foreground">
+				Press <kbd class="font-mono bg-muted px-1.5 py-0.5 rounded border border-border">↵</kbd> on <strong>Ask agent</strong> above to ask Agent AJ directly.
+			</p>
 		</div>
 
-		<!-- Results List -->
+		<!-- Search Results List -->
 		<ul
 			id="modal-results-list"
-			class="hidden flex flex-col gap-1.5 list-none m-0 p-0"
+			class="hidden flex-col gap-1 list-none m-0 px-1"
 			role="listbox"
-			aria-label="Search suggestions"
-		>
-		</ul>
+			aria-label="Search results"
+		></ul>
 	</div>
 
 	<!-- Footer with Keyboard Hints -->
-	<div class="flex items-center justify-between border-t border-border px-4 py-2 text-[11px] text-muted-foreground bg-muted/20">
+	<div class="flex items-center justify-between gap-2 border-t border-border px-4 py-2 text-[11px] text-muted-foreground bg-muted/20">
 		<div class="flex items-center gap-3">
 			<span><kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">↑</kbd> <kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">↓</kbd> navigate</span>
 			<span><kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">↵</kbd> select</span>
 			<span><kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">esc</kbd> close</span>
 		</div>
-		<span id="modal-results-count" class="font-medium text-xs"></span>
+		<span id="modal-results-count" class="font-mono text-[11px]"></span>
 	</div>
 </dialog>
 
@@ -177,38 +257,226 @@
 		date?: string;
 	}
 
+	interface ClairicExtractionInfo {
+		model: string;
+		intent: string;
+		contentType: string;
+		searchQuery: string | null;
+		source: "clairic" | "fastpath";
+		confidence: number;
+		latencyMs: number;
+	}
+
 	interface ApiResponse {
 		query: string;
 		type?: string;
 		total: number;
 		hits: SearchHit[];
 		semantic: boolean;
+		extraction?: ClairicExtractionInfo;
 	}
 
+	interface RecentAskItem {
+		prompt: string;
+		timestamp: number;
+	}
+
+	interface RecentlyViewedItem {
+		title: string;
+		href: string;
+		section: string;
+		timestamp: number;
+	}
+
+	const STORAGE_RECENT_ASKS_KEY = "cc_aj_recent_asks";
+	const STORAGE_RECENT_VIEWED_KEY = "cc_recently_viewed";
+
 	const modal = document.getElementById("search-modal") as HTMLDialogElement | null;
+	const form = document.getElementById("search-modal-form") as HTMLFormElement | null;
 	const input = document.getElementById("search-modal-input") as HTMLInputElement | null;
 	const clearBtn = document.getElementById("search-modal-clear");
 	const closeBtn = document.getElementById("search-modal-close");
 	const spinner = document.getElementById("search-modal-spinner");
-	const resultsList = document.getElementById("modal-results-list");
+	const askAgentBtn = document.getElementById("modal-mode-ai");
+	const askAgentQuerySpan = document.getElementById("modal-ask-agent-query");
+	const filterBar = document.getElementById("modal-filter-bar");
+	const clairicBadge = document.getElementById("modal-clairic-badge");
 	const initialView = document.getElementById("modal-state-initial");
 	const emptyView = document.getElementById("modal-state-empty");
 	const emptyMsg = document.getElementById("modal-empty-msg");
+	const resultsList = document.getElementById("modal-results-list");
 	const countView = document.getElementById("modal-results-count");
+	const recentlyAskedSection = document.getElementById("modal-recently-asked-section");
+	const recentlyAskedList = document.getElementById("modal-recently-asked-list");
+	const recentlyViewedSection = document.getElementById("modal-recently-viewed-section");
+	const recentlyViewedList = document.getElementById("modal-recently-viewed-list");
 
 	let currentType = "all";
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let abortController: AbortController | null = null;
-	let activeIndex = -1;
+	let activeIndex = 0; // 0 = "Ask agent" button, 1..N = search results
 	let currentHits: SearchHit[] = [];
 
-	function openModal() {
+	// Track current page in Recently Viewed if it's a content page
+	function recordCurrentPageView() {
+		try {
+			const path = window.location.pathname;
+			if (
+				!path.startsWith("/podcast/") &&
+				!path.startsWith("/post/") &&
+				!path.startsWith("/author/") &&
+				!path.startsWith("/guest/")
+			) {
+				return;
+			}
+			const rawTitle = document.title.replace(/\s*[|–-]\s*CodingCat\.dev.*$/i, "").trim();
+			if (!rawTitle) return;
+
+			const section = path.startsWith("/podcast/")
+				? "Podcasts"
+				: path.startsWith("/post/")
+					? "Blog"
+					: path.startsWith("/author/")
+						? "Authors"
+						: "Guests";
+
+			const raw = localStorage.getItem(STORAGE_RECENT_VIEWED_KEY);
+			const list: RecentlyViewedItem[] = raw ? JSON.parse(raw) : [];
+			const filtered = Array.isArray(list)
+				? list.filter((item) => item.href !== path)
+				: [];
+			filtered.unshift({
+				title: rawTitle,
+				href: path,
+				section,
+				timestamp: Date.now(),
+			});
+			localStorage.setItem(
+				STORAGE_RECENT_VIEWED_KEY,
+				JSON.stringify(filtered.slice(0, 4)),
+			);
+		} catch {}
+	}
+
+	recordCurrentPageView();
+
+	function formatRelativeTime(timestamp: number): string {
+		const diffSec = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+		if (diffSec < 60) return "just now";
+		const diffMin = Math.floor(diffSec / 60);
+		if (diffMin < 60) return `${diffMin}m ago`;
+		const diffHr = Math.floor(diffMin / 60);
+		if (diffHr < 24) return `${diffHr}h ago`;
+		const diffDays = Math.floor(diffHr / 24);
+		return `${diffDays}d ago`;
+	}
+
+	function escapeHtml(text: string): string {
+		return text
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+
+	function renderRecentSections() {
+		// 1. Recently Asked
+		try {
+			const rawAsks = localStorage.getItem(STORAGE_RECENT_ASKS_KEY);
+			const asks: RecentAskItem[] = rawAsks ? JSON.parse(rawAsks) : [];
+			if (recentlyAskedSection && recentlyAskedList) {
+				if (Array.isArray(asks) && asks.length > 0) {
+					recentlyAskedList.innerHTML = "";
+					for (const item of asks.slice(0, 3)) {
+						const btn = document.createElement("button");
+						btn.type = "button";
+						btn.className =
+							"flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-foreground/90 hover:bg-accent hover:text-foreground transition-colors cursor-pointer w-full";
+						btn.innerHTML = `
+							<svg class="size-3.5 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+							</svg>
+							<span class="truncate">${escapeHtml(item.prompt)}, <span class="text-muted-foreground text-xs">${formatRelativeTime(item.timestamp)}</span></span>
+						`;
+						btn.addEventListener("click", () => {
+							triggerAskAgent(item.prompt);
+						});
+						recentlyAskedList.appendChild(btn);
+					}
+					recentlyAskedSection.classList.remove("hidden");
+					recentlyAskedSection.classList.add("flex");
+				} else {
+					recentlyAskedSection.classList.add("hidden");
+					recentlyAskedSection.classList.remove("flex");
+				}
+			}
+		} catch {}
+
+		// 2. Recently Viewed
+		try {
+			const rawViewed = localStorage.getItem(STORAGE_RECENT_VIEWED_KEY);
+			const viewed: RecentlyViewedItem[] = rawViewed ? JSON.parse(rawViewed) : [];
+			if (recentlyViewedSection && recentlyViewedList) {
+				if (Array.isArray(viewed) && viewed.length > 0) {
+					recentlyViewedList.innerHTML = "";
+					for (const item of viewed.slice(0, 3)) {
+						const link = document.createElement("a");
+						link.href = item.href;
+						link.className =
+							"flex items-center gap-3 rounded-lg px-3 py-2 text-left hover:bg-accent transition-colors no-underline group";
+						link.innerHTML = `
+							<div class="size-7 rounded-md border border-border bg-muted/40 flex items-center justify-center shrink-0 text-primary">
+								<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+									<polyline points="14 2 14 8 20 8"></polyline>
+								</svg>
+							</div>
+							<div class="min-w-0 flex-1">
+								<div class="text-sm font-medium text-foreground group-hover:text-primary truncate">${escapeHtml(item.title)}</div>
+								<div class="text-[11px] text-muted-foreground truncate">${escapeHtml(item.section)} &gt; ${escapeHtml(item.title)}</div>
+							</div>
+						`;
+						recentlyViewedList.appendChild(link);
+					}
+					recentlyViewedSection.classList.remove("hidden");
+					recentlyViewedSection.classList.add("flex");
+				} else {
+					recentlyViewedSection.classList.add("hidden");
+					recentlyViewedSection.classList.remove("flex");
+				}
+			}
+		} catch {}
+	}
+
+	function triggerAskAgent(promptOverride?: string) {
+		const q = (promptOverride ?? input?.value ?? "").trim();
+		closeModal();
+		const win = window as unknown as {
+			openAgentAjDrawer?: (prompt?: string) => void;
+			openAgentAjModal?: (prompt?: string) => void;
+		};
+		if (win.openAgentAjDrawer) {
+			win.openAgentAjDrawer(q || undefined);
+		} else if (win.openAgentAjModal) {
+			win.openAgentAjModal(q || undefined);
+		}
+	}
+
+	function openModal(initialQuery?: string) {
 		if (!modal) return;
+		renderRecentSections();
 		if (!modal.open) {
 			modal.showModal();
 			document.body.style.overflow = "hidden";
-			setTimeout(() => input?.focus(), 50);
 		}
+		if (typeof initialQuery === "string" && input) {
+			input.value = initialQuery;
+			handleInput();
+		} else {
+			highlightActive(0);
+		}
+		setTimeout(() => input?.focus(), 40);
 	}
 
 	function closeModal() {
@@ -219,8 +487,12 @@
 		}
 	}
 
-	// Expose to window for triggers from header or buttons
-	(window as unknown as { openSearchModal?: () => void }).openSearchModal = openModal;
+	(window as unknown as { openSearchModal?: (q?: string) => void }).openSearchModal =
+		openModal;
+
+	askAgentBtn?.addEventListener("click", () => {
+		triggerAskAgent();
+	});
 
 	// Global keyboard shortcuts (⌘K or Ctrl+K)
 	document.addEventListener("keydown", (e) => {
@@ -255,22 +527,59 @@
 	function getBadgeClasses(type: string): { label: string; badgeClass: string } {
 		switch (type) {
 			case "post":
-				return { label: "Post", badgeClass: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20" };
+				return {
+					label: "Post",
+					badgeClass:
+						"bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+				};
 			case "podcast":
-				return { label: "Podcast", badgeClass: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20" };
+				return {
+					label: "Podcast",
+					badgeClass:
+						"bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
+				};
 			case "author":
-				return { label: "Author", badgeClass: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20" };
+				return {
+					label: "Author",
+					badgeClass:
+						"bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+				};
 			case "guest":
-				return { label: "Guest", badgeClass: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" };
+				return {
+					label: "Guest",
+					badgeClass:
+						"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+				};
 			default:
-				return { label: type || "Content", badgeClass: "bg-secondary text-secondary-foreground border-border" };
+				return {
+					label: type || "Content",
+					badgeClass: "bg-secondary text-secondary-foreground border-border",
+				};
 		}
 	}
 
+	function highlightActive(index: number) {
+		activeIndex = index;
+		if (askAgentBtn) {
+			if (index === 0) {
+				askAgentBtn.classList.add("bg-accent");
+			} else {
+				askAgentBtn.classList.remove("bg-accent");
+			}
+		}
+		const items = document.querySelectorAll(".search-result-item");
+		items.forEach((item, i) => {
+			if (i + 1 === index) {
+				item.classList.add("bg-accent", "border-primary/40");
+				item.scrollIntoView({ block: "nearest" });
+			} else {
+				item.classList.remove("bg-accent", "border-primary/40");
+			}
+		});
+	}
+
 	function renderHits(hits: SearchHit[]) {
 		currentHits = hits;
-		activeIndex = -1;
-
 		if (!resultsList) return;
 		resultsList.innerHTML = "";
 
@@ -283,16 +592,16 @@
 			li.innerHTML = `
 				<a
 					href="${hit.href}"
-					data-index="${idx}"
-					class="search-result-item flex flex-col gap-1 rounded-xl p-3 hover:bg-accent transition-colors focus:bg-accent focus:outline-none cursor-pointer border border-transparent hover:border-border"
+					data-index="${idx + 1}"
+					class="search-result-item flex flex-col gap-1 rounded-lg px-3 py-2.5 hover:bg-accent transition-colors focus:bg-accent focus:outline-none cursor-pointer border border-transparent"
 				>
 					<div class="flex items-center justify-between gap-2">
-						<span class="font-semibold text-sm line-clamp-1 text-foreground">${hit.title}</span>
+						<span class="font-medium text-sm line-clamp-1 text-foreground">${escapeHtml(hit.title)}</span>
 						<span class="inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold ${badge.badgeClass}">
 							${badge.label}
 						</span>
 					</div>
-					${hit.excerpt ? `<p class="text-xs text-muted-foreground line-clamp-1">${hit.excerpt}</p>` : ""}
+					${hit.excerpt ? `<p class="text-xs text-muted-foreground line-clamp-1">${escapeHtml(hit.excerpt)}</p>` : ""}
 				</a>
 			`;
 
@@ -300,61 +609,82 @@
 		});
 
 		resultsList.classList.remove("hidden");
+		resultsList.classList.add("flex");
 		initialView?.classList.add("hidden");
 		emptyView?.classList.add("hidden");
-	}
-
-	function highlightActive(index: number) {
-		const items = document.querySelectorAll(".search-result-item");
-		items.forEach((item, i) => {
-			if (i === index) {
-				item.classList.add("bg-accent", "border-primary/40");
-				item.scrollIntoView({ block: "nearest" });
-			} else {
-				item.classList.remove("bg-accent", "border-primary/40");
-			}
-		});
+		emptyView?.classList.remove("flex");
+		highlightActive(0);
 	}
 
 	async function performSearch(q: string, type: string) {
 		const trimmed = q.trim();
+		if (askAgentQuerySpan) {
+			askAgentQuerySpan.textContent = trimmed ? `: "${trimmed}"` : "";
+		}
+
 		if (!trimmed || trimmed.length < 2) {
-			if (resultsList) resultsList.classList.add("hidden");
-			if (emptyView) emptyView.classList.add("hidden");
-			if (initialView) initialView.classList.remove("hidden");
+			resultsList?.classList.add("hidden");
+			resultsList?.classList.remove("flex");
+			emptyView?.classList.add("hidden");
+			emptyView?.classList.remove("flex");
+			filterBar?.classList.add("hidden");
+			filterBar?.classList.remove("flex");
+			initialView?.classList.remove("hidden");
+			clairicBadge?.classList.add("hidden");
 			if (countView) countView.textContent = "";
 			if (spinner) spinner.classList.add("hidden");
 			currentHits = [];
+			highlightActive(0);
 			return;
 		}
 
+		filterBar?.classList.remove("hidden");
+		filterBar?.classList.add("flex");
+
 		if (abortController) abortController.abort();
 		abortController = new AbortController();
 
 		if (spinner) spinner.classList.remove("hidden");
 
 		try {
-			const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}&type=${encodeURIComponent(type)}`, {
-				signal: abortController.signal,
-			});
+			const res = await fetch(
+				`/api/search?q=${encodeURIComponent(trimmed)}&type=${encodeURIComponent(type)}`,
+				{
+					signal: abortController.signal,
+				},
+			);
 
 			if (!res.ok) throw new Error("Search failed");
 			const data = (await res.json()) as ApiResponse;
 
 			if (spinner) spinner.classList.add("hidden");
 
+			if (clairicBadge) {
+				if (data.extraction) {
+					clairicBadge.classList.remove("hidden");
+					clairicBadge.textContent = `⚡ ${data.extraction.source}: ${data.extraction.intent} (${data.extraction.latencyMs}ms)`;
+				} else {
+					clairicBadge.classList.add("hidden");
+				}
+			}
+
 			if (data.hits && data.hits.length > 0) {
 				renderHits(data.hits);
-				if (countView) countView.textContent = `${data.total} result${data.total === 1 ? "" : "s"}`;
+				if (countView)
+					countView.textContent = `${data.total} result${data.total === 1 ? "" : "s"}`;
 			} else {
-				if (resultsList) resultsList.classList.add("hidden");
-				if (initialView) initialView.classList.add("hidden");
+				resultsList?.classList.add("hidden");
+				resultsList?.classList.remove("flex");
+				initialView?.classList.add("hidden");
 				if (emptyView) {
 					emptyView.classList.remove("hidden");
-					if (emptyMsg) emptyMsg.textContent = `No results found for "${trimmed}"`;
+					emptyView.classList.add("flex");
+					if (emptyMsg)
+						emptyMsg.textContent = `No results found for "${trimmed}"`;
 				}
 				if (countView) countView.textContent = "0 results";
 				currentHits = [];
+				highlightActive(0);
 			}
 		} catch (err: unknown) {
 			if (err instanceof Error && err.name === "AbortError") return;
@@ -366,11 +696,14 @@
 	function handleInput() {
 		const val = input?.value ?? "";
 		if (clearBtn) clearBtn.classList.toggle("hidden", !val);
+		if (askAgentQuerySpan) {
+			askAgentQuerySpan.textContent = val.trim() ? `: "${val.trim()}"` : "";
+		}
 
 		if (debounceTimer) clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			performSearch(val, currentType);
-		}, 200);
+		}, 180);
 	}
 
 	input?.addEventListener("input", handleInput);
@@ -383,21 +716,31 @@
 		}
 	});
 
-	// Arrow key navigation inside input
+	// Keyboard navigation: 0 is "Ask agent", 1..N are search results
 	input?.addEventListener("keydown", (e) => {
-		if (currentHits.length === 0) return;
-
+		const totalItems = 1 + currentHits.length;
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
-			activeIndex = (activeIndex + 1) % currentHits.length;
-			highlightActive(activeIndex);
+			highlightActive((activeIndex + 1) % totalItems);
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
-			activeIndex = (activeIndex - 1 + currentHits.length) % currentHits.length;
-			highlightActive(activeIndex);
-		} else if (e.key === "Enter" && activeIndex >= 0 && currentHits[activeIndex]) {
+			highlightActive((activeIndex - 1 + totalItems) % totalItems);
+		} else if (e.key === "Enter") {
 			e.preventDefault();
-			window.location.href = currentHits[activeIndex].href;
+			if (activeIndex === 0) {
+				triggerAskAgent();
+			} else if (currentHits[activeIndex - 1]) {
+				window.location.href = currentHits[activeIndex - 1].href;
+			}
+		}
+	});
+
+	form?.addEventListener("submit", (e) => {
+		e.preventDefault();
+		if (activeIndex === 0) {
+			triggerAskAgent();
+		} else if (currentHits[activeIndex - 1]) {
+			window.location.href = currentHits[activeIndex - 1].href;
 		}
 	});
 
@@ -405,10 +748,18 @@
 	document.querySelectorAll(".modal-filter-pill").forEach((pill) => {
 		pill.addEventListener("click", () => {
 			document.querySelectorAll(".modal-filter-pill").forEach((p) => {
-				p.classList.remove("active-modal-pill", "bg-primary", "text-primary-foreground");
+				p.classList.remove(
+					"active-modal-pill",
+					"bg-primary",
+					"text-primary-foreground",
+				);
 				p.classList.add("bg-card", "text-foreground");
 			});
-			pill.classList.add("active-modal-pill", "bg-primary", "text-primary-foreground");
+			pill.classList.add(
+				"active-modal-pill",
+				"bg-primary",
+				"text-primary-foreground",
+			);
 			pill.classList.remove("bg-card", "text-foreground");
 
 			currentType = pill.getAttribute("data-type") || "all";
diff --git a/apps/site/src/lib/structured-data.ts b/apps/site/src/lib/structured-data.ts
index 28214c43..0a1dfdfb 100644
--- a/apps/site/src/lib/structured-data.ts
+++ b/apps/site/src/lib/structured-data.ts
@@ -49,6 +49,14 @@ export function websiteSchema(origin: string): Node {
 		name: SITE_NAME,
 		url: origin,
 		publisher: { "@id": orgId(origin) },
+		potentialAction: {
+			"@type": "SearchAction",
+			target: {
+				"@type": "EntryPoint",
+				urlTemplate: `${origin}/search?q={search_term_string}`,
+			},
+			"query-input": "required name=search_term_string",
+		},
 	};
 }
 
diff --git a/apps/site/src/pages/api/chat.ts b/apps/site/src/pages/api/chat.ts
index 68085a76..7de29248 100644
--- a/apps/site/src/pages/api/chat.ts
+++ b/apps/site/src/pages/api/chat.ts
@@ -12,9 +12,297 @@ import {
 
 export const prerender = false;
 
+export const CLAIRIC_MODEL_ID = "@cf/cloudflare/clairic";
+
+export type ExtractedChatIntent =
+	| "recent_content"
+	| "top_videos"
+	| "topic_search"
+	| "author_lookup"
+	| "joke_or_kb";
+
+export interface ClairicExtractedParameters {
+	intent: ExtractedChatIntent;
+	contentType: "all" | "podcast" | "post" | "author" | "guest";
+	searchQuery: string | null;
+	limit: number;
+	confidence: number;
+	pNull: number;
+	source: "clairic" | "fastpath";
+	latencyMs: number;
+	clairicError?: string;
+}
+
 const SANITY_CONTEXT_MCP_URL =
 	"https://api.sanity.io/v1/context/organizations/ovF2qiKSO/mcp/agent-aj-mcp";
 
+function unwrapClairicField(
+	answers: Record<string, any> | undefined,
+	key: string,
+): { value: any; confidence: number; pNull: number } {
+	const entry = answers?.[key];
+	if (
+		entry &&
+		typeof entry === "object" &&
+		("value" in entry || "confidence" in entry || "p_null" in entry)
+	) {
+		return {
+			value: entry.value,
+			confidence: typeof entry.confidence === "number" ? entry.confidence : 1,
+			pNull: typeof entry.p_null === "number" ? entry.p_null : 0,
+		};
+	}
+	return {
+		value: entry,
+		confidence: entry != null ? 0.9 : 0,
+		pNull: entry != null ? 0 : 1,
+	};
+}
+
+function normalizeContentType(
+	raw: unknown,
+	promptLower: string,
+): "all" | "podcast" | "post" | "author" | "guest" {
+	const val = typeof raw === "string" ? raw.toLowerCase().trim() : "";
+	if (val.includes("podcast") || val.includes("episode")) {
+		return "podcast";
+	}
+	if (val.includes("post") || val.includes("blog") || val.includes("article")) {
+		return "post";
+	}
+	if (val.includes("author") || val.includes("host")) {
+		return "author";
+	}
+	if (val.includes("guest")) {
+		return "guest";
+	}
+
+	if (/\b(?:podcast|podcasts|episode|episodes)\b/.test(promptLower)) {
+		return "podcast";
+	}
+	if (
+		/\b(?:blog|post|posts|article|articles|tutorial|tutorials)\b/.test(
+			promptLower,
+		)
+	) {
+		return "post";
+	}
+	if (/\b(?:author|authors|host|hosts)\b/.test(promptLower)) {
+		return "author";
+	}
+	if (/\b(?:guest|guests)\b/.test(promptLower)) {
+		return "guest";
+	}
+	return "all";
+}
+
+function normalizeIntent(
+	rawIntent: unknown,
+	promptLower: string,
+	searchQuery: string | null,
+): ExtractedChatIntent | null {
+	if (/\b(?:joke|jokes|dad joke|funny|humor|jeff dean)\b/.test(promptLower)) {
+		return "joke_or_kb";
+	}
+	if (
+		/\b(?:top video|top videos|popular video|popular videos|most viewed|youtube video|youtube videos)\b/.test(
+			promptLower,
+		)
+	) {
+		return "top_videos";
+	}
+	if (
+		(/^(?:the\s+)?(?:latest|newest|most\s+recent|recent|what'?s\s+new)[?!.]*$/i.test(
+			promptLower,
+		) ||
+			(/\b(?:latest|newest|most recent|recent)\b/.test(promptLower) &&
+				/\b(?:podcast|podcasts|episode|episodes|blog|post|posts|article|articles|content|show|shows)\b/.test(
+					promptLower,
+				))) &&
+		!searchQuery
+	) {
+		return "recent_content";
+	}
+
+	const val =
+		typeof rawIntent === "string" ? rawIntent.toLowerCase().trim() : "";
+	if (val.includes("joke") || val.includes("kb") || val.includes("knowledge")) {
+		return "joke_or_kb";
+	}
+	if (val.includes("top_video") || val.includes("video")) {
+		return "top_videos";
+	}
+	if (val.includes("recent") || val.includes("latest")) {
+		return "recent_content";
+	}
+	if (val.includes("author")) {
+		return "author_lookup";
+	}
+	if (val.includes("topic") || val.includes("search")) {
+		return "topic_search";
+	}
+
+	return null;
+}
+
+function extractFallbackTopicQuery(prompt: string): string | null {
+	const cleaned = prompt
+		.replace(
+			/^(?:what|which|do you have|can you find|find|search|show me|list|recommend|tell me about|are there|any)\s+/i,
+			"",
+		)
+		.replace(
+			/\b(?:podcasts?|episodes?|blog\s+posts?|posts?|articles?|tutorials?|videos?|on\s+codingcat(?:\.dev)?|codingcat(?:\.dev)?|about|on|for|with|featuring|by)\b/gi,
+			" ",
+		)
+		.replace(/[?!.,;:"']/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+	return cleaned.length >= 2 ? cleaned : null;
+}
+
+export async function extractIntentWithClairic(
+	prompt: string,
+	aiBinding?: unknown,
+): Promise<ClairicExtractedParameters | null> {
+	const startMs = Date.now();
+	const trimmed = prompt.trim();
+	if (!trimmed) {
+		return null;
+	}
+	const promptLower = trimmed.toLowerCase();
+	let clairicErrorMsg: string | undefined;
+
+	if (aiBinding && typeof (aiBinding as any).run === "function") {
+		try {
+			const response = await (aiBinding as any).run(CLAIRIC_MODEL_ID, {
+				model: "clairic",
+				state: trimmed,
+				fields: {
+					intent: {
+						type: "text",
+						instructions:
+							"Classify user intent as exactly one of: 'recent_content' (asking for latest, newest, or recent podcasts, episodes, blog posts, or articles), 'top_videos' (asking for top videos or popular YouTube episodes), 'joke_or_kb' (asking for a joke, programming dad joke, Git joke, SQL joke, Jeff Dean fact, or knowledge base entry), 'author_lookup' (searching for an author profile), or 'topic_search' (searching for podcasts, posts, tutorials, or guests about a specific topic, technology, or person).",
+					},
+					content_type: {
+						type: "text",
+						instructions:
+							"Content type filter if specified by the user: 'podcast', 'post', 'author', 'guest', or 'all'.",
+					},
+					search_query: {
+						type: "text",
+						instructions:
+							"The specific topic, technology, framework, guest name, or keywords to search for (e.g. 'Sanity', 'SvelteKit', 'Guillermo Rauch', 'Next.js'). Leave null if asking only for latest/recent content, top videos, or a random joke.",
+					},
+					limit: {
+						type: "number",
+						decimals: 0,
+						instructions:
+							"Number of items requested by the user (default 5, max 10).",
+					},
+				},
+			});
+
+			const answers =
+				response?.answers ||
+				response?.result?.answers ||
+				(response && typeof response === "object" ? response : undefined);
+			const intentField = unwrapClairicField(answers, "intent");
+			const typeField = unwrapClairicField(answers, "content_type");
+			const queryField = unwrapClairicField(answers, "search_query");
+			const limitField = unwrapClairicField(answers, "limit");
+
+			const rawSearchQuery =
+				queryField.pNull < 0.6 &&
+				typeof queryField.value === "string" &&
+				queryField.value.trim().length > 0 &&
+				queryField.value.trim().toLowerCase() !== "null"
+					? queryField.value.trim()
+					: null;
+
+			const resolvedIntent = normalizeIntent(
+				intentField.value,
+				promptLower,
+				rawSearchQuery,
+			);
+
+			if (
+				resolvedIntent &&
+				intentField.confidence >= 0.5 &&
+				intentField.pNull < 0.6
+			) {
+				const contentType = normalizeContentType(typeField.value, promptLower);
+				const searchQuery =
+					resolvedIntent === "topic_search" ||
+					resolvedIntent === "author_lookup"
+						? rawSearchQuery || extractFallbackTopicQuery(trimmed)
+						: rawSearchQuery;
+				const parsedLimit = Number(limitField.value);
+				const limit =
+					Number.isFinite(parsedLimit) && parsedLimit >= 1
+						? Math.min(Math.round(parsedLimit), 10)
+						: 5;
+
+				return {
+					intent: resolvedIntent,
+					contentType,
+					searchQuery,
+					limit,
+					confidence: intentField.confidence,
+					pNull: intentField.pNull,
+					source: "clairic",
+					latencyMs: Date.now() - startMs,
+				};
+			}
+		} catch (clairicErr) {
+			clairicErrorMsg =
+				clairicErr instanceof Error ? clairicErr.message : String(clairicErr);
+			console.warn(
+				"[Chat API Clairic extraction warning, using deterministic fast-path]",
+				clairicErrorMsg,
+			);
+		}
+	}
+
+	// Deterministic fast-path for unambiguous prompts when Workers AI binding is absent or preview model is unreachable
+	const deterministicIntent = normalizeIntent(null, promptLower, null);
+	if (deterministicIntent) {
+		return {
+			intent: deterministicIntent,
+			contentType: normalizeContentType(null, promptLower),
+			searchQuery:
+				deterministicIntent === "topic_search" ||
+				deterministicIntent === "author_lookup"
+					? extractFallbackTopicQuery(trimmed)
+					: null,
+			limit: 5,
+			confidence: 0.95,
+			pNull: 0,
+			source: "fastpath",
+			latencyMs: Date.now() - startMs,
+			...(clairicErrorMsg ? { clairicError: clairicErrorMsg } : {}),
+		};
+	}
+
+	const fallbackTopic = extractFallbackTopicQuery(trimmed);
+	if (fallbackTopic) {
+		const contentType = normalizeContentType(null, promptLower);
+		return {
+			intent: contentType === "author" ? "author_lookup" : "topic_search",
+			contentType,
+			searchQuery: fallbackTopic,
+			limit: 5,
+			confidence: 0.85,
+			pNull: 0,
+			source: "fastpath",
+			latencyMs: Date.now() - startMs,
+			...(clairicErrorMsg ? { clairicError: clairicErrorMsg } : {}),
+		};
+	}
+
+	return null;
+}
+
 export const OPTIONS: APIRoute = async () => {
 	return new Response(null, {
 		status: 204,
@@ -142,14 +430,25 @@ export const GET: APIRoute = async ({ request }) => {
 	const cfEnv = env as unknown as Record<string, unknown> | undefined;
 
 	let mcpDiagnostic: Record<string, unknown> = {};
+	let clairicDiagnostic: Record<string, unknown> = {};
 	if (verify) {
-		const { client, tools, error } = await connectSanityContextMcp(cfEnv);
+		const [mcpRes, clairicRes] = await Promise.all([
+			connectSanityContextMcp(cfEnv),
+			extractIntentWithClairic(
+				"Do you have any podcast episodes about Sanity?",
+				cfEnv?.AI,
+			),
+		]);
+		const { client, tools, error } = mcpRes;
 		const toolNames = Object.keys(tools);
 		mcpDiagnostic = {
 			mcpConnected: toolNames.length > 0,
 			mcpTools: toolNames,
 			...(error ? { mcpError: error } : {}),
 		};
+		clairicDiagnostic = {
+			clairicExtraction: clairicRes,
+		};
 		if (client) {
 			try {
 				await client.close();
@@ -162,7 +461,10 @@ export const GET: APIRoute = async ({ request }) => {
 			status: "ready",
 			name: "Agent AJ",
 			model: "@cf/meta/llama-3.3-70b-instruct-fp8-fast",
+			extractionModel: CLAIRIC_MODEL_ID,
+			cascadeArchitecture: "extract-route-synthesize",
 			mcp: SANITY_CONTEXT_MCP_URL,
+			...clairicDiagnostic,
 			...mcpDiagnostic,
 		}),
 		{
@@ -227,60 +529,15 @@ export const POST: APIRoute = async ({ request }) => {
 		content: m.content,
 	}));
 
+	const latestUserMessage =
+		[...coreMessages]
+			.reverse()
+			.find((m) => m.role === "user")
+			?.content?.trim() || "";
+
 	let mcpClient: Awaited<ReturnType<typeof createMCPClient>> | undefined;
 
 	try {
-		const collectedMcpOutputs: Array<{ toolName: string; text: string }> = [];
-		const { client: connectedMcpClient, tools: rawMcpTools } =
-			await connectSanityContextMcp(cfEnv);
-		mcpClient = connectedMcpClient;
-
-		const mcpGroqTool = rawMcpTools.groq_query;
-		let initialContextOutline = "";
-		let cachedInitialContextResult: unknown;
-
-		// Pre-fetch initial_context from the Sanity Context MCP endpoint if available
-		// so Agent AJ immediately knows the Knowledge Base IDs, entry paths, and instructions on Step 1.
-		if (typeof rawMcpTools.initial_context?.execute === "function") {
-			try {
-				cachedInitialContextResult = await rawMcpTools.initial_context.execute(
-					{},
-					{} as any,
-				);
-				initialContextOutline = extractMcpText(cachedInitialContextResult);
-			} catch (initCtxErr) {
-				console.warn("[Chat API initial_context prefetch warning]", initCtxErr);
-			}
-		}
-
-		// Wrap all MCP tools so they are exposed to streamText AND their outputs are captured for fallback synthesis
-		const wrappedMcpTools: Record<string, any> = {};
-		for (const [toolName, mcpTool] of Object.entries(rawMcpTools)) {
-			if (!mcpTool || typeof mcpTool !== "object") {
-				continue;
-			}
-			const origExecute = (mcpTool as any).execute;
-			if (typeof origExecute === "function") {
-				wrappedMcpTools[toolName] = {
-					...mcpTool,
-					execute: async (args: any, options: any) => {
-						const res =
-							toolName === "initial_context" &&
-							cachedInitialContextResult !== undefined
-								? cachedInitialContextResult
-								: await origExecute(args, options);
-						const text = extractMcpText(res);
-						if (text && !(res as any)?.isError) {
-							collectedMcpOutputs.push({ toolName, text });
-						}
-						return res;
-					},
-				};
-			} else {
-				wrappedMcpTools[toolName] = mcpTool;
-			}
-		}
-
 		// Configure Sanity client (fall back to public 'production' dataset when no read token is present or dataset is missing)
 		const configuredDataset =
 			(cfEnv?.PUBLIC_SANITY_DATASET as string) || "production";
@@ -389,275 +646,99 @@ export const POST: APIRoute = async ({ request }) => {
 			return normalized;
 		};
 
-		const tools: Record<string, any> = {
-			...wrappedMcpTools,
-			search_content: tool({
-				description:
-					"Search CodingCat.dev articles, podcast episodes, authors, and transcripts using hybrid semantic search and keyword ranking. ALWAYS use this tool first when asked to find, recommend, or query podcasts, articles, or topics (e.g. 'Sanity', 'Firebase', 'Next.js', 'AI', 'web dev').",
-				inputSchema: jsonSchema<{
-					query: string;
-					type?: "all" | "podcast" | "post" | "author" | "guest";
-				}>({
-					type: "object",
-					properties: {
-						query: {
-							type: "string",
-							description:
-								"Search terms, topic, or question (e.g. 'Sanity', 'SvelteKit', 'AI SaaS').",
-						},
-						type: {
-							type: "string",
-							description:
-								"Optional content type filter: 'all', 'podcast', 'post', 'author', 'guest'. Defaults to 'all'.",
-							enum: ["all", "podcast", "post", "author", "guest"],
-						},
-					},
-					required: ["query"],
-				}),
-				execute: async ({ query, type }) => {
-					const filterType = type && type !== "all" ? type : null;
-					let results: any[] = [];
-					try {
-						const res = await sanityClient.fetch(semanticSearchQuery, {
-							searchTerm: query,
-							type: filterType,
-						});
-						if (Array.isArray(res) && res.length > 0) {
-							results = res;
-						}
-					} catch (semanticErr) {
-						console.warn(
-							"[search_content semantic error, falling back]",
-							semanticErr,
-						);
-					}
-
-					if (!results.length) {
-						try {
-							const fallback = await sanityClient.fetch(
-								textSearchFallbackQuery,
-								{
-									searchTerm: query,
-									type: filterType,
-								},
-							);
-							if (Array.isArray(fallback)) {
-								results = fallback;
-							}
-						} catch (fallbackErr) {
-							console.error("[search_content text error]", fallbackErr);
-						}
-					}
+		// 1. Step 1 (Extract): Run Clairic extraction cascade on user prompt
+		const extracted = await extractIntentWithClairic(
+			latestUserMessage,
+			cfEnv?.AI,
+		);
 
-					return normalizeAndCollectItems(results.slice(0, 10));
-				},
-			}),
-			get_recent_content: tool({
-				description:
-					"Retrieve the most recently published podcast episodes or blog articles on CodingCat.dev. ALWAYS use this tool first when asked for 'latest podcast', 'recent episodes', 'latest blog post', or 'new articles'.",
-				inputSchema: jsonSchema<{
-					type?: "all" | "podcast" | "post";
-					limit?: number;
-				}>({
-					type: "object",
-					properties: {
-						type: {
-							type: "string",
-							description:
-								"Filter by content type: 'all', 'podcast', or 'post'. Defaults to 'all'.",
-							enum: ["all", "podcast", "post"],
-						},
-						limit: {
-							type: "integer",
-							description: "Number of items to return (default: 5, max: 10).",
-						},
-					},
-				}),
-				execute: async ({ type, limit }) => {
-					const rawType = type ? String(type).toLowerCase() : "all";
+		// 2. Step 2 (Route & Pre-fetch): Execute deterministic Sanity lookup when intent does not require remote KB MCP
+		if (extracted && extracted.intent !== "joke_or_kb") {
+			const count = Math.min(Math.max(Number(extracted.limit) || 5, 1), 10);
+			try {
+				if (extracted.intent === "recent_content") {
 					const types =
-						rawType.includes("podcast") || rawType.includes("episode")
+						extracted.contentType === "podcast"
 							? ["podcast"]
-							: rawType.includes("post") ||
-									rawType.includes("article") ||
-									rawType.includes("blog")
+							: extracted.contentType === "post"
 								? ["post"]
 								: ["podcast", "post"];
-					const count = Math.min(Math.max(Number(limit) || 5, 1), 10);
-					try {
-						const recent = await sanityClient.fetch(
-							`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...$limit]{
-								title,
-								_type,
-								"slug": slug.current,
-								date,
-								excerpt,
-								youtube,
-								listenLinks,
-								"spotifyLink": spotify.link
-							}`,
-							{ types, limit: count },
-						);
-						return normalizeAndCollectItems(recent || []);
-					} catch (err) {
-						console.error("[get_recent_content error]", err);
-						return [];
-					}
-				},
-			}),
-			groq_query: tool({
-				description:
-					"Execute a read-only GROQ query against the CodingCat.dev Sanity dataset. Document types are 'podcast', 'post', 'author', 'guest', and 'sponsor'. Content documents use 'date' (NOT 'publishedAt'), 'title', '\"slug\": slug.current', 'excerpt', and 'youtube'.",
-				inputSchema: jsonSchema<{ query: string }>({
-					type: "object",
-					properties: {
-						query: {
-							type: "string",
-							description:
-								"Valid GROQ query (e.g. *[_type == 'podcast' && defined(slug.current)] | order(date desc)[0...5]{title, _type, 'slug': slug.current, date, excerpt, youtube}).",
-						},
-					},
-					required: ["query"],
-				}),
-				execute: async ({ query }: { query: string }) => {
-					let cleanQuery = query.trim();
-					if (!cleanQuery.startsWith("*") && !cleanQuery.startsWith("count(")) {
-						cleanQuery = `*[${cleanQuery}]`;
-					}
-					// Heal common LLM schema/syntax mismatches:
-					// 1. Heal _type == "episode" / "podcastEpisode" -> "podcast", "article" / "blog" -> "post"
-					cleanQuery = cleanQuery
-						.replace(
-							/(_type\s*==\s*["'])(?:episode|episodes|podcastEpisode|podcast_episode)(["'])/gi,
-							"$1podcast$2",
-						)
-						.replace(
-							/(_type\s*==\s*["'])(?:article|articles|blog|blogPost|posts)(["'])/gi,
-							"$1post$2",
-						);
-					// 2. Heal publishedAt -> date (CodingCat.dev schema uses `date`)
-					cleanQuery = cleanQuery.replace(/\bpublishedAt\b/g, "date");
-					// 3. Heal [a, b] match "..." -> (a match "..." || b match "...")
-					cleanQuery = cleanQuery.replace(
-						/\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s+match\s+([^)]+\))/g,
-						"($1 match $3 || $2 match $3)",
+					const recent = await sanityClient.fetch(
+						`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...$limit]{
+							title,
+							_type,
+							"slug": slug.current,
+							date,
+							excerpt,
+							youtube,
+							listenLinks,
+							"spotifyLink": spotify.link
+						}`,
+						{ types, limit: count },
 					);
-					// 4. Heal text::query("...") -> "*...*"
-					cleanQuery = cleanQuery.replace(
-						/text::query\((["'])(.*?)\1\)/g,
-						"$1*$2*$1",
+					if (Array.isArray(recent) && recent.length > 0) {
+						normalizeAndCollectItems(recent);
+					}
+				} else if (extracted.intent === "top_videos") {
+					const topVideos = await sanityClient.fetch(
+						`*[_type in ["podcast", "post"] && defined(slug.current) && defined(youtube)] | order(coalesce(statistics.youtube.viewCount, 0) desc, date desc)[0...$limit]{
+							title,
+							_type,
+							"slug": slug.current,
+							date,
+							excerpt,
+							youtube,
+							listenLinks,
+							"spotifyLink": spotify.link
+						}`,
+						{ limit: count },
 					);
-					// 5. Remove filter [_score > 0]
-					cleanQuery = cleanQuery.replace(/\[_score\s*>\s*0\]/g, "");
-
-					if (mcpGroqTool?.execute) {
-						try {
-							const mcpResult = await mcpGroqTool.execute(
-								{ query: cleanQuery },
-								{} as any,
-							);
-							const parsed =
-								typeof mcpResult === "string"
-									? JSON.parse(mcpResult)
-									: mcpResult;
-							const results =
-								parsed?.result ||
-								(Array.isArray(parsed?.content) && parsed.content[0]?.text
-									? JSON.parse(parsed.content[0].text)?.result
-									: null);
-							const arr = Array.isArray(results)
-								? results
-								: results && typeof results === "object"
-									? [results]
-									: [];
-							if (arr.length > 0) {
-								return normalizeAndCollectItems(arr);
-							}
-						} catch {}
+					if (Array.isArray(topVideos) && topVideos.length > 0) {
+						normalizeAndCollectItems(topVideos);
 					}
-
-					// Direct Sanity fetch with healed query
+				} else if (
+					(extracted.intent === "topic_search" ||
+						extracted.intent === "author_lookup") &&
+					extracted.searchQuery
+				) {
+					const filterType =
+						extracted.contentType && extracted.contentType !== "all"
+							? extracted.contentType
+							: null;
+					let searchResults: any[] = [];
 					try {
-						const directResult = await sanityClient.fetch(cleanQuery);
-						const normalizedDirect = Array.isArray(directResult)
-							? directResult
-							: directResult !== null && typeof directResult === "object"
-								? [directResult]
-								: [];
-
-						if (normalizedDirect.length > 0) {
-							return normalizeAndCollectItems(normalizedDirect);
-						}
-
-						// If query ordered by date desc (e.g. asking for latest podcast/post) and returned empty, fallback to recent content query
-						if (/order\s*\(\s*date\s+desc/i.test(cleanQuery)) {
-							const typeMatch = cleanQuery.match(
-								/_type\s*==\s*["']([a-zA-Z0-9_-]+)["']/,
-							);
-							const targetTypes =
-								typeMatch?.[1] === "post"
-									? ["post"]
-									: typeMatch?.[1] === "podcast"
-										? ["podcast"]
-										: ["podcast", "post"];
-							const recentFallback = await sanityClient.fetch(
-								`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...5]{
-									title,
-									_type,
-									"slug": slug.current,
-									date,
-									excerpt,
-									youtube,
-									listenLinks,
-									"spotifyLink": spotify.link
-								}`,
-								{ types: targetTypes },
-							);
-							if (Array.isArray(recentFallback) && recentFallback.length > 0) {
-								return normalizeAndCollectItems(recentFallback);
-							}
+						const semRes = await sanityClient.fetch(semanticSearchQuery, {
+							searchTerm: extracted.searchQuery,
+							type: filterType,
+						});
+						if (Array.isArray(semRes) && semRes.length > 0) {
+							searchResults = semRes;
 						}
-
-						// If still empty and query was a search for a keyword, extract keyword and run semantic search
-						const matchTerm = cleanQuery.match(
-							/match\s+["']\*?([a-zA-Z0-9_-]+)\*?["']/,
-						);
-						if (matchTerm?.[1]) {
-							const keyword = matchTerm[1];
-							const typeMatch = cleanQuery.match(
-								/_type\s*==\s*["']([a-zA-Z0-9_-]+)["']/,
-							);
-							const filterType = typeMatch?.[1] || null;
-							const semanticResults = await sanityClient.fetch(
-								semanticSearchQuery,
+					} catch {}
+					if (!searchResults.length) {
+						try {
+							const textRes = await sanityClient.fetch(
+								textSearchFallbackQuery,
 								{
-									searchTerm: keyword,
+									searchTerm: extracted.searchQuery,
 									type: filterType,
 								},
 							);
-							if (
-								Array.isArray(semanticResults) &&
-								semanticResults.length > 0
-							) {
-								return normalizeAndCollectItems(semanticResults.slice(0, 10));
+							if (Array.isArray(textRes) && textRes.length > 0) {
+								searchResults = textRes;
 							}
-						}
-
-						return [];
-					} catch (directErr) {
-						console.error("[groq_query direct error]", directErr);
-						return {
-							error:
-								directErr instanceof Error
-									? directErr.message
-									: String(directErr),
-						};
+						} catch {}
 					}
-				},
-			}),
-		};
+					if (searchResults.length > 0) {
+						normalizeAndCollectItems(searchResults.slice(0, 10));
+					}
+				}
+			} catch (prefetchErr) {
+				console.warn("[Chat API Clairic route prefetch warning]", prefetchErr);
+			}
+		}
 
-		// 2. Setup AI Model (prefer OpenRouter when configured, fallback to Workers AI)
+		// Setup AI Model (prefer OpenRouter when configured, fallback to Workers AI)
 		const openRouterApiKey =
 			(cfEnv?.OPENROUTER_API_KEY as string | undefined) ||
 			process.env.OPENROUTER_API_KEY;
@@ -667,14 +748,10 @@ export const POST: APIRoute = async ({ request }) => {
 			const openrouter = createOpenRouter({
 				apiKey: openRouterApiKey,
 			});
-			// Use meta-llama/llama-3.3-70b-instruct or deepseek/deepseek-chat via OpenRouter
 			model = openrouter("meta-llama/llama-3.3-70b-instruct");
 		} else {
 			const aiBinding = cfEnv?.AI;
 			if (!aiBinding) {
-				if (mcpClient) {
-					await mcpClient.close();
-				}
 				return new Response(
 					JSON.stringify({
 						error:
@@ -693,31 +770,386 @@ export const POST: APIRoute = async ({ request }) => {
 			model = workersai("@cf/meta/llama-3.1-8b-instruct");
 		}
 
-		// 3. Stream model response with multi-step tool calling
-		const systemPrompt =
-			"You are Agent AJ, the CodingCat.dev mascot and intelligent AI assistant. Answer user queries about CodingCat.dev podcasts, tutorials, articles, authors, transcripts, and our Sanity Context Knowledge Base (including AJ Knowledge Jokes).\n\n" +
-			"SEARCH & TOOL INSTRUCTIONS:\n" +
-			"- KNOWLEDGE BASE & JOKES (`knowledge_base_read` / `initial_context`): When asked for a joke, programming dad joke, Git joke, SQL/database joke, Jeff Dean fact, legendary software engineering story, or coding culture humor, ALWAYS use the `knowledge_base_read` tool (and `initial_context` first if you need to see the knowledge base ID and entry paths) to read the actual entries from the Sanity Context Knowledge Base (`AJ Knowlege Jokes`) and share the real jokes/entries retrieved from it!\n" +
-			"- RECENT CONTENT (`get_recent_content`): ALWAYS use the `get_recent_content` tool first when asked for 'latest podcast', 'recent episodes', 'latest blog post', or 'new articles'.\n" +
-			"- TOPIC SEARCH (`search_content`): ALWAYS use the `search_content` tool when asked to find, recommend, or query podcasts, posts, or articles on any topic, technology, or question (e.g. 'Sanity', 'Firebase', 'Next.js', 'AI', 'web dev'). It performs hybrid semantic and keyword search across all episodes, posts, and transcripts.\n" +
-			"- TOP VIDEOS: When asked for 'top videos' or popular video podcasts, search for high-profile episodes with video recordings (e.g. episodes featuring Guillermo Rauch, Rich Harris, Lee Robinson, or recent GenAI/MCP video podcasts) and provide their YouTube links alongside CodingCat.dev episode links.\n" +
-			"- PRECISE GROQ (`groq_query`): Use `groq_query` only for precise lookups when searching for specific author profiles (e.g. *[_type == 'author' && title match '*Alex*']).\n" +
-			"- CRITICAL: ALWAYS execute tools by invoking them via function calls. NEVER output raw JSON or code blocks in your text describing tool calls instead of executing them.\n" +
-			'- Once you have retrieved the final content (either from `knowledge_base_read` for knowledge base entries or from `search_content`/`get_recent_content` for episodes and posts), synthesize it into an engaging, helpful response. For podcasts and posts, list the relevant titles, brief descriptions, and markdown links using relative paths (e.g. [Episode Title](/podcast/slug) or [Post Title](/post/slug)). When an exact YouTube URL is present in the tool results (e.g. item.youtube), include that exact URL on its own line (e.g. https://www.youtube.com/watch?v=VIDEO_ID or https://youtu.be/VIDEO_ID). NEVER invent placeholder strings like "https://www.youtube.com/watch?v=VIDEO_ID", localhost URLs, or malformed URL brackets like ["/slug"](http://localhost:3000/slug).' +
-			(initialContextOutline
-				? `\n\nSANITY CONTEXT MCP INITIAL CONTEXT OUTLINE:\n${initialContextOutline}`
-				: "");
-
-		const result = streamText({
-			model,
-			system: systemPrompt,
-			messages: coreMessages,
-			tools,
-			stopWhen: isStepCount(8),
-			onError: ({ error }) => {
-				console.error("[StreamText Internal Error]", error);
-			},
-		});
+		const collectedMcpOutputs: Array<{ toolName: string; text: string }> = [];
+		const useFastPathSynthesis =
+			collectedToolItems.length > 0 && extracted?.intent !== "joke_or_kb";
+		const cascadeMode = useFastPathSynthesis ? "clairic-fastpath" : "tool-loop";
+
+		let result: ReturnType<typeof streamText>;
+
+		if (useFastPathSynthesis) {
+			// Single-pass tool-free synthesis: skips remote MCP connection and tool-calling loops
+			const preFetchedJson = JSON.stringify(
+				collectedToolItems.slice(0, 8),
+				null,
+				2,
+			);
+			result = streamText({
+				model,
+				system:
+					"You are Agent AJ, the CodingCat.dev mascot and intelligent AI assistant. " +
+					"Cloudflare's Clairic extraction model (@cf/cloudflare/clairic) has already extracted the user's query parameters and retrieved the matching CodingCat.dev content below. " +
+					"Synthesize these retrieved items into a concise, engaging, helpful response. " +
+					"For podcasts and posts, list the relevant titles, brief descriptions, and markdown links using relative paths (e.g. [Episode Title](/podcast/slug) or [Post Title](/post/slug)). " +
+					"When an exact YouTube URL is present in the retrieved items (item.youtube), include that exact URL on its own line (e.g. https://www.youtube.com/watch?v=VIDEO_ID or https://youtu.be/VIDEO_ID). " +
+					'NEVER invent placeholder strings like "https://www.youtube.com/watch?v=VIDEO_ID", localhost URLs, or malformed URL brackets.',
+				messages: [
+					...coreMessages,
+					{
+						role: "user",
+						content: `Extracted Parameters (${extracted?.source}): ${JSON.stringify(
+							{
+								intent: extracted?.intent,
+								contentType: extracted?.contentType,
+								searchQuery: extracted?.searchQuery,
+							},
+						)}\n\nRetrieved CodingCat.dev Content:\n${preFetchedJson}\n\nPlease answer the user's request directly using this retrieved content.`,
+					},
+				],
+				onError: ({ error }) => {
+					console.error("[StreamText Clairic Fastpath Error]", error);
+				},
+			});
+		} else {
+			// Connect to Sanity Context MCP only when needed (e.g. knowledge_base_read for jokes or complex multi-tool queries)
+			const { client: connectedMcpClient, tools: rawMcpTools } =
+				await connectSanityContextMcp(cfEnv);
+			mcpClient = connectedMcpClient;
+
+			const mcpGroqTool = rawMcpTools.groq_query;
+			let initialContextOutline = "";
+			let cachedInitialContextResult: unknown;
+
+			if (typeof rawMcpTools.initial_context?.execute === "function") {
+				try {
+					cachedInitialContextResult =
+						await rawMcpTools.initial_context.execute({}, {} as any);
+					initialContextOutline = extractMcpText(cachedInitialContextResult);
+				} catch (initCtxErr) {
+					console.warn(
+						"[Chat API initial_context prefetch warning]",
+						initCtxErr,
+					);
+				}
+			}
+
+			const wrappedMcpTools: Record<string, any> = {};
+			for (const [toolName, mcpTool] of Object.entries(rawMcpTools)) {
+				if (!mcpTool || typeof mcpTool !== "object") {
+					continue;
+				}
+				const origExecute = (mcpTool as any).execute;
+				if (typeof origExecute === "function") {
+					wrappedMcpTools[toolName] = {
+						...mcpTool,
+						execute: async (args: any, options: any) => {
+							const res =
+								toolName === "initial_context" &&
+								cachedInitialContextResult !== undefined
+									? cachedInitialContextResult
+									: await origExecute(args, options);
+							const text = extractMcpText(res);
+							if (text && !(res as any)?.isError) {
+								collectedMcpOutputs.push({ toolName, text });
+							}
+							return res;
+						},
+					};
+				} else {
+					wrappedMcpTools[toolName] = mcpTool;
+				}
+			}
+
+			const tools: Record<string, any> = {
+				...wrappedMcpTools,
+				search_content: tool({
+					description:
+						"Search CodingCat.dev articles, podcast episodes, authors, and transcripts using hybrid semantic search and keyword ranking. ALWAYS use this tool first when asked to find, recommend, or query podcasts, articles, or topics (e.g. 'Sanity', 'Firebase', 'Next.js', 'AI', 'web dev').",
+					inputSchema: jsonSchema<{
+						query: string;
+						type?: "all" | "podcast" | "post" | "author" | "guest";
+					}>({
+						type: "object",
+						properties: {
+							query: {
+								type: "string",
+								description:
+									"Search terms, topic, or question (e.g. 'Sanity', 'SvelteKit', 'AI SaaS').",
+							},
+							type: {
+								type: "string",
+								description:
+									"Optional content type filter: 'all', 'podcast', 'post', 'author', 'guest'. Defaults to 'all'.",
+								enum: ["all", "podcast", "post", "author", "guest"],
+							},
+						},
+						required: ["query"],
+					}),
+					execute: async ({ query, type }) => {
+						const filterType = type && type !== "all" ? type : null;
+						let results: any[] = [];
+						try {
+							const res = await sanityClient.fetch(semanticSearchQuery, {
+								searchTerm: query,
+								type: filterType,
+							});
+							if (Array.isArray(res) && res.length > 0) {
+								results = res;
+							}
+						} catch (semanticErr) {
+							console.warn(
+								"[search_content semantic error, falling back]",
+								semanticErr,
+							);
+						}
+
+						if (!results.length) {
+							try {
+								const fallback = await sanityClient.fetch(
+									textSearchFallbackQuery,
+									{
+										searchTerm: query,
+										type: filterType,
+									},
+								);
+								if (Array.isArray(fallback)) {
+									results = fallback;
+								}
+							} catch (fallbackErr) {
+								console.error("[search_content text error]", fallbackErr);
+							}
+						}
+
+						return normalizeAndCollectItems(results.slice(0, 10));
+					},
+				}),
+				get_recent_content: tool({
+					description:
+						"Retrieve the most recently published podcast episodes or blog articles on CodingCat.dev. ALWAYS use this tool first when asked for 'latest podcast', 'recent episodes', 'latest blog post', or 'new articles'.",
+					inputSchema: jsonSchema<{
+						type?: "all" | "podcast" | "post";
+						limit?: number;
+					}>({
+						type: "object",
+						properties: {
+							type: {
+								type: "string",
+								description:
+									"Filter by content type: 'all', 'podcast', or 'post'. Defaults to 'all'.",
+								enum: ["all", "podcast", "post"],
+							},
+							limit: {
+								type: "integer",
+								description: "Number of items to return (default: 5, max: 10).",
+							},
+						},
+					}),
+					execute: async ({ type, limit }) => {
+						const rawType = type ? String(type).toLowerCase() : "all";
+						const types =
+							rawType.includes("podcast") || rawType.includes("episode")
+								? ["podcast"]
+								: rawType.includes("post") ||
+										rawType.includes("article") ||
+										rawType.includes("blog")
+									? ["post"]
+									: ["podcast", "post"];
+						const count = Math.min(Math.max(Number(limit) || 5, 1), 10);
+						try {
+							const recent = await sanityClient.fetch(
+								`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...$limit]{
+									title,
+									_type,
+									"slug": slug.current,
+									date,
+									excerpt,
+									youtube,
+									listenLinks,
+									"spotifyLink": spotify.link
+								}`,
+								{ types, limit: count },
+							);
+							return normalizeAndCollectItems(recent || []);
+						} catch (err) {
+							console.error("[get_recent_content error]", err);
+							return [];
+						}
+					},
+				}),
+				groq_query: tool({
+					description:
+						"Execute a read-only GROQ query against the CodingCat.dev Sanity dataset. Document types are 'podcast', 'post', 'author', 'guest', and 'sponsor'. Content documents use 'date' (NOT 'publishedAt'), 'title', '\"slug\": slug.current', 'excerpt', and 'youtube'.",
+					inputSchema: jsonSchema<{ query: string }>({
+						type: "object",
+						properties: {
+							query: {
+								type: "string",
+								description:
+									"Valid GROQ query (e.g. *[_type == 'podcast' && defined(slug.current)] | order(date desc)[0...5]{title, _type, 'slug': slug.current, date, excerpt, youtube}).",
+							},
+						},
+						required: ["query"],
+					}),
+					execute: async ({ query }: { query: string }) => {
+						let cleanQuery = query.trim();
+						if (
+							!cleanQuery.startsWith("*") &&
+							!cleanQuery.startsWith("count(")
+						) {
+							cleanQuery = `*[${cleanQuery}]`;
+						}
+						cleanQuery = cleanQuery
+							.replace(
+								/(_type\s*==\s*["'])(?:episode|episodes|podcastEpisode|podcast_episode)(["'])/gi,
+								"$1podcast$2",
+							)
+							.replace(
+								/(_type\s*==\s*["'])(?:article|articles|blog|blogPost|posts)(["'])/gi,
+								"$1post$2",
+							);
+						cleanQuery = cleanQuery.replace(/\bpublishedAt\b/g, "date");
+						cleanQuery = cleanQuery.replace(
+							/\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s+match\s+([^)]+\))/g,
+							"($1 match $3 || $2 match $3)",
+						);
+						cleanQuery = cleanQuery.replace(
+							/text::query\((["'])(.*?)\1\)/g,
+							"$1*$2*$1",
+						);
+						cleanQuery = cleanQuery.replace(/\[_score\s*>\s*0\]/g, "");
+
+						if (mcpGroqTool?.execute) {
+							try {
+								const mcpResult = await mcpGroqTool.execute(
+									{ query: cleanQuery },
+									{} as any,
+								);
+								const parsed =
+									typeof mcpResult === "string"
+										? JSON.parse(mcpResult)
+										: mcpResult;
+								const results =
+									parsed?.result ||
+									(Array.isArray(parsed?.content) && parsed.content[0]?.text
+										? JSON.parse(parsed.content[0].text)?.result
+										: null);
+								const arr = Array.isArray(results)
+									? results
+									: results && typeof results === "object"
+										? [results]
+										: [];
+								if (arr.length > 0) {
+									return normalizeAndCollectItems(arr);
+								}
+							} catch {}
+						}
+
+						try {
+							const directResult = await sanityClient.fetch(cleanQuery);
+							const normalizedDirect = Array.isArray(directResult)
+								? directResult
+								: directResult !== null && typeof directResult === "object"
+									? [directResult]
+									: [];
+
+							if (normalizedDirect.length > 0) {
+								return normalizeAndCollectItems(normalizedDirect);
+							}
+
+							if (/order\s*\(\s*date\s+desc/i.test(cleanQuery)) {
+								const typeMatch = cleanQuery.match(
+									/_type\s*==\s*["']([a-zA-Z0-9_-]+)["']/,
+								);
+								const targetTypes =
+									typeMatch?.[1] === "post"
+										? ["post"]
+										: typeMatch?.[1] === "podcast"
+											? ["podcast"]
+											: ["podcast", "post"];
+								const recentFallback = await sanityClient.fetch(
+									`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...5]{
+										title,
+										_type,
+										"slug": slug.current,
+										date,
+										excerpt,
+										youtube,
+										listenLinks,
+										"spotifyLink": spotify.link
+									}`,
+									{ types: targetTypes },
+								);
+								if (
+									Array.isArray(recentFallback) &&
+									recentFallback.length > 0
+								) {
+									return normalizeAndCollectItems(recentFallback);
+								}
+							}
+
+							const matchTerm = cleanQuery.match(
+								/match\s+["']\*?([a-zA-Z0-9_-]+)\*?["']/,
+							);
+							if (matchTerm?.[1]) {
+								const keyword = matchTerm[1];
+								const typeMatch = cleanQuery.match(
+									/_type\s*==\s*["']([a-zA-Z0-9_-]+)["']/,
+								);
+								const filterType = typeMatch?.[1] || null;
+								const semanticResults = await sanityClient.fetch(
+									semanticSearchQuery,
+									{
+										searchTerm: keyword,
+										type: filterType,
+									},
+								);
+								if (
+									Array.isArray(semanticResults) &&
+									semanticResults.length > 0
+								) {
+									return normalizeAndCollectItems(semanticResults.slice(0, 10));
+								}
+							}
+
+							return [];
+						} catch (directErr) {
+							console.error("[groq_query direct error]", directErr);
+							return {
+								error:
+									directErr instanceof Error
+										? directErr.message
+										: String(directErr),
+							};
+						}
+					},
+				}),
+			};
+
+			const systemPrompt =
+				"You are Agent AJ, the CodingCat.dev mascot and intelligent AI assistant. Answer user queries about CodingCat.dev podcasts, tutorials, articles, authors, transcripts, and our Sanity Context Knowledge Base (including AJ Knowledge Jokes).\n\n" +
+				"SEARCH & TOOL INSTRUCTIONS:\n" +
+				"- KNOWLEDGE BASE & JOKES (`knowledge_base_read` / `initial_context`): When asked for a joke, programming dad joke, Git joke, SQL/database joke, Jeff Dean fact, legendary software engineering story, or coding culture humor, ALWAYS use the `knowledge_base_read` tool (and `initial_context` first if you need to see the knowledge base ID and entry paths) to read the actual entries from the Sanity Context Knowledge Base (`AJ Knowlege Jokes`) and share the real jokes/entries retrieved from it!\n" +
+				"- RECENT CONTENT (`get_recent_content`): ALWAYS use the `get_recent_content` tool first when asked for 'latest podcast', 'recent episodes', 'latest blog post', or 'new articles'.\n" +
+				"- TOPIC SEARCH (`search_content`): ALWAYS use the `search_content` tool when asked to find, recommend, or query podcasts, posts, or articles on any topic, technology, or question (e.g. 'Sanity', 'Firebase', 'Next.js', 'AI', 'web dev'). It performs hybrid semantic and keyword search across all episodes, posts, and transcripts.\n" +
+				"- TOP VIDEOS: When asked for 'top videos' or popular video podcasts, search for high-profile episodes with video recordings (e.g. episodes featuring Guillermo Rauch, Rich Harris, Lee Robinson, or recent GenAI/MCP video podcasts) and provide their YouTube links alongside CodingCat.dev episode links.\n" +
+				"- PRECISE GROQ (`groq_query`): Use `groq_query` only for precise lookups when searching for specific author profiles (e.g. *[_type == 'author' && title match '*Alex*']).\n" +
+				"- CRITICAL: ALWAYS execute tools by invoking them via function calls. NEVER output raw JSON or code blocks in your text describing tool calls instead of executing them.\n" +
+				'- Once you have retrieved the final content (either from `knowledge_base_read` for knowledge base entries or from `search_content`/`get_recent_content` for episodes and posts), synthesize it into an engaging, helpful response. For podcasts and posts, list the relevant titles, brief descriptions, and markdown links using relative paths (e.g. [Episode Title](/podcast/slug) or [Post Title](/post/slug)). When an exact YouTube URL is present in the tool results (e.g. item.youtube), include that exact URL on its own line (e.g. https://www.youtube.com/watch?v=VIDEO_ID or https://youtu.be/VIDEO_ID). NEVER invent placeholder strings like "https://www.youtube.com/watch?v=VIDEO_ID", localhost URLs, or malformed URL brackets like ["/slug"](http://localhost:3000/slug).' +
+				(initialContextOutline
+					? `\n\nSANITY CONTEXT MCP INITIAL CONTEXT OUTLINE:\n${initialContextOutline}`
+					: "");
+
+			result = streamText({
+				model,
+				system: systemPrompt,
+				messages: coreMessages,
+				tools,
+				stopWhen: isStepCount(8),
+				onError: ({ error }) => {
+					console.error("[StreamText Internal Error]", error);
+				},
+			});
+		}
 
 		// Pipe text stream through TransformStream with explicit error surface
 		const transformStream = new TransformStream();
@@ -876,6 +1308,11 @@ export const POST: APIRoute = async ({ request }) => {
 				"content-type": "text/plain; charset=utf-8",
 				"access-control-allow-origin": "*",
 				"cache-control": "no-cache",
+				"x-aj-extraction-model": CLAIRIC_MODEL_ID,
+				"x-aj-cascade-mode": cascadeMode,
+				"x-aj-intent": extracted?.intent || "unknown",
+				"x-aj-extraction-source": extracted?.source || "none",
+				"x-aj-extraction-latency-ms": String(extracted?.latencyMs ?? 0),
 			},
 		});
 	} catch (err) {
diff --git a/apps/site/src/pages/api/search.ts b/apps/site/src/pages/api/search.ts
index 1da87f12..0ae9bebb 100644
--- a/apps/site/src/pages/api/search.ts
+++ b/apps/site/src/pages/api/search.ts
@@ -1,9 +1,15 @@
+import { env } from "cloudflare:workers";
 import type { APIRoute } from "astro";
 import {
 	semanticSearchQuery,
 	textSearchFallbackQuery,
 } from "@/lib/sanity/queries";
 import { resolveHref } from "@/lib/sanity/resolve-href";
+import {
+	CLAIRIC_MODEL_ID,
+	type ClairicExtractedParameters,
+	extractIntentWithClairic,
+} from "./chat";
 
 export interface SearchResultItem {
 	id: string;
@@ -22,6 +28,7 @@ export interface SearchResponse {
 	total: number;
 	hits: SearchResultItem[];
 	semantic: boolean;
+	extraction?: ClairicExtractedParameters & { model: string };
 }
 
 export const GET: APIRoute = async ({ url, locals }) => {
@@ -45,41 +52,109 @@ export const GET: APIRoute = async ({ url, locals }) => {
 		});
 	}
 
+	const cfEnv = env as unknown as Record<string, unknown> | undefined;
+	const extracted = await extractIntentWithClairic(query, cfEnv?.AI);
+	const effectiveType =
+		filterType !== "all"
+			? filterType
+			: extracted?.contentType && extracted.contentType !== "all"
+				? extracted.contentType
+				: null;
+	const effectiveSearchTerm = extracted?.searchQuery || query;
+
 	const params = {
-		searchTerm: query,
-		type: filterType === "all" ? null : filterType,
+		searchTerm: effectiveSearchTerm,
+		type: effectiveType,
 	};
 
 	let rawHits: any[] = [];
 	let isSemantic = false;
 
+	// 0. If Clairic extracted a 'recent_content' or 'top_videos' intent, fetch directly
+	if (extracted?.intent === "recent_content") {
+		try {
+			const recentTypes =
+				effectiveType === "podcast"
+					? ["podcast"]
+					: effectiveType === "post"
+						? ["post"]
+						: ["podcast", "post"];
+			const recentResult = await locals.sanity.fetchPublished(
+				`*[_type in $types && defined(slug.current)] | order(date desc, _createdAt desc)[0...20]{
+					_id,
+					_type,
+					title,
+					"slug": slug.current,
+					excerpt,
+					date
+				}`,
+				{ types: recentTypes },
+			);
+			if (Array.isArray(recentResult) && recentResult.length > 0) {
+				rawHits = recentResult;
+				isSemantic = true;
+			}
+		} catch {}
+	} else if (extracted?.intent === "top_videos") {
+		try {
+			const topVideoResult = await locals.sanity.fetchPublished(
+				`*[_type in ["podcast", "post"] && defined(slug.current) && defined(youtube)] | order(coalesce(statistics.youtube.viewCount, 0) desc, date desc)[0...20]{
+					_id,
+					_type,
+					title,
+					"slug": slug.current,
+					excerpt,
+					date
+				}`,
+				{},
+			);
+			if (Array.isArray(topVideoResult) && topVideoResult.length > 0) {
+				rawHits = topVideoResult;
+				isSemantic = true;
+			}
+		} catch {}
+	}
+
 	// 1. Attempt Sanity native dataset embeddings semantic search
-	try {
-		const result = await locals.sanity.fetchPublished(
-			semanticSearchQuery,
-			params,
-		);
-		if (Array.isArray(result)) {
-			rawHits = result;
-			isSemantic = true;
+	if (rawHits.length === 0) {
+		try {
+			const result = await locals.sanity.fetchPublished(
+				semanticSearchQuery,
+				params,
+			);
+			if (Array.isArray(result)) {
+				rawHits = result;
+				isSemantic = true;
+			}
+		} catch (semanticError) {
+			// Log debug info and fall back to token-matching GROQ search
+			console.warn(
+				"[Sanity Search] Semantic search unavailable or embeddings pending, falling back to text match:",
+				semanticError instanceof Error ? semanticError.message : semanticError,
+			);
 		}
-	} catch (semanticError) {
-		// Log debug info and fall back to token-matching GROQ search
-		console.warn(
-			"[Sanity Search] Semantic search unavailable or embeddings pending, falling back to text match:",
-			semanticError instanceof Error ? semanticError.message : semanticError,
-		);
 	}
 
 	// 2. If semantic query errored or yielded empty, try the text-match query
-	if (!isSemantic) {
+	if (!isSemantic || rawHits.length === 0) {
 		try {
 			const fallbackResult = await locals.sanity.fetchPublished(
 				textSearchFallbackQuery,
 				params,
 			);
-			if (Array.isArray(fallbackResult)) {
+			if (Array.isArray(fallbackResult) && fallbackResult.length > 0) {
 				rawHits = fallbackResult;
+			} else if (effectiveSearchTerm !== query) {
+				const rawFallback = await locals.sanity.fetchPublished(
+					textSearchFallbackQuery,
+					{
+						searchTerm: query,
+						type: filterType === "all" ? null : filterType,
+					},
+				);
+				if (Array.isArray(rawFallback)) {
+					rawHits = rawFallback;
+				}
 			}
 		} catch (fallbackError) {
 			console.error("[Sanity Search] Search query failed:", fallbackError);
@@ -126,6 +201,14 @@ export const GET: APIRoute = async ({ url, locals }) => {
 		total: hits.length,
 		hits,
 		semantic: isSemantic,
+		...(extracted
+			? {
+					extraction: {
+						model: CLAIRIC_MODEL_ID,
+						...extracted,
+					},
+				}
+			: {}),
 	};
 
 	return new Response(JSON.stringify(response), {
@@ -133,6 +216,10 @@ export const GET: APIRoute = async ({ url, locals }) => {
 		headers: {
 			"Content-Type": "application/json",
 			"Cache-Control": "public, max-age=60, s-maxage=300",
+			"x-aj-extraction-model": CLAIRIC_MODEL_ID,
+			"x-aj-extraction-source": extracted?.source || "none",
+			"x-aj-intent": extracted?.intent || "unknown",
+			"x-aj-extraction-latency-ms": String(extracted?.latencyMs ?? 0),
 		},
 	});
 };
diff --git a/apps/site/src/pages/search.astro b/apps/site/src/pages/search.astro
index 3b8c8981..79785207 100644
--- a/apps/site/src/pages/search.astro
+++ b/apps/site/src/pages/search.astro
@@ -11,7 +11,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 	<div
 		id="search-container"
-		class="w-full flex flex-col gap-6 my-8 md:my-10"
+		class="w-full flex flex-col gap-5 my-8 md:my-10"
 	>
 		<header class="flex flex-col gap-2">
 			<h1 class="text-3xl font-bold tracking-tight md:text-5xl">
@@ -23,39 +23,73 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		</header>
 
 		<!-- Search Input Bar -->
-		<div class="relative w-full max-w-3xl">
-			<label for="search-input" class="sr-only">Search</label>
-			<div class="relative flex items-center">
-				<div class="absolute left-3.5 text-muted-foreground pointer-events-none" aria-hidden="true">
-					<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<circle cx="11" cy="11" r="8"></circle>
-						<path d="m21 21-4.3-4.3"></path>
-					</svg>
+		<div class="flex flex-col gap-2 w-full max-w-4xl">
+			<form id="search-page-form" class="relative w-full" onsubmit="return false">
+				<label for="search-input" class="sr-only">Search</label>
+				<div class="relative flex items-center">
+					<div class="absolute left-3.5 text-muted-foreground pointer-events-none" aria-hidden="true">
+						<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="11" cy="11" r="8"></circle>
+							<path d="m21 21-4.3-4.3"></path>
+						</svg>
+					</div>
+					<input
+						type="search"
+						id="search-input"
+						name="q"
+						autocomplete="off"
+						placeholder="Search in CodingCat.dev..."
+						class="w-full rounded-xl border border-input bg-card pl-11 pr-12 py-3.5 text-base md:text-lg shadow-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all"
+					/>
+					<button
+						type="button"
+						id="search-clear-btn"
+						class="hidden absolute right-3 size-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+						aria-label="Clear search query"
+					>
+						<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="18" y1="6" x2="6" y2="18"></line>
+							<line x1="6" y1="6" x2="18" y2="18"></line>
+						</svg>
+					</button>
 				</div>
-				<input
-					type="search"
-					id="search-input"
-					name="q"
-					autocomplete="off"
-					placeholder="Search for your purr-fect thing!"
-					class="w-full rounded-xl border border-input bg-card pl-11 pr-10 py-3.5 text-base md:text-lg shadow-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all"
-				/>
-				<button
-					type="button"
-					id="search-clear-btn"
-					class="hidden absolute right-3 size-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-					aria-label="Clear search query"
-				>
-					<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<line x1="18" y1="6" x2="6" y2="18"></line>
-						<line x1="6" y1="6" x2="18" y2="18"></line>
+			</form>
+
+			<!-- First Item: ✨ Ask agent (Opens persistent right-side Agent AJ Drawer) -->
+			<button
+				type="button"
+				id="search-mode-ai-btn"
+				class="w-full flex items-center justify-between gap-3 rounded-xl border border-border bg-card hover:bg-accent px-4 py-3 text-left text-sm font-medium text-foreground transition-colors cursor-pointer shadow-2xs group"
+			>
+				<div class="flex items-center gap-3 min-w-0">
+					<svg
+						class="size-4 shrink-0 text-primary"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
+						<path d="M20 3v4"></path>
+						<path d="M22 5h-4"></path>
+						<path d="M4 17v2"></path>
+						<path d="M5 18H3"></path>
 					</svg>
-				</button>
-			</div>
+					<span class="truncate">
+						Ask agent<span id="search-ask-agent-query" class="text-primary font-semibold"></span>
+					</span>
+				</div>
+				<span class="shrink-0 font-mono text-[11px] uppercase tracking-wider text-muted-foreground group-hover:text-foreground">
+					Open Drawer →
+				</span>
+			</button>
 		</div>
 
 		<!-- Content Type Filters -->
-		<div class="flex flex-wrap items-center gap-2 pt-1" role="toolbar" aria-label="Filter results by content type">
+		<div id="search-filter-toolbar" class="flex flex-wrap items-center gap-2 pt-1" role="toolbar" aria-label="Filter results by content type">
 			<span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mr-1">
 				Filter:
 			</span>
@@ -97,13 +131,16 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		</div>
 
 		<!-- Status & Summary Line -->
-		<div id="search-status-bar" class="flex items-center justify-between text-xs text-muted-foreground min-h-5">
+		<div id="search-status-bar" class="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground min-h-5 max-w-4xl">
 			<span id="search-count-text"></span>
-			<span id="search-powered-by" class="text-[11px] opacity-75">Sanity Semantic Search</span>
+			<div class="flex items-center gap-2">
+				<span id="search-clairic-pill" class="hidden rounded-full border border-primary/30 bg-primary/10 px-2.5 py-0.5 font-mono text-[11px] font-semibold text-primary"></span>
+				<span id="search-powered-by" class="text-[11px] opacity-75">Sanity Semantic Search • Clairic</span>
+			</div>
 		</div>
 
 		<!-- Empty State: Ready to Search (Initial) -->
-		<div id="state-ready" class="flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-dashed border-border/80 bg-card/40 my-4">
+		<div id="state-ready" class="flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-dashed border-border/80 bg-card/40 my-4 max-w-4xl">
 			<div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
 				<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<circle cx="11" cy="11" r="8"></circle>
@@ -112,7 +149,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			</div>
 			<h2 class="text-lg font-semibold mb-1">Ready to explore?</h2>
 			<p class="text-sm text-muted-foreground max-w-md mb-6">
-				Type a query above to search articles, podcasts, authors, and guests across the CodingCat.dev catalog.
+				Type a query above to search articles, podcasts, authors, and guests — or click <strong>Ask agent</strong> to open the persistent Agent AJ side drawer.
 			</p>
 			<div class="flex flex-wrap justify-center items-center gap-2 max-w-lg">
 				<span class="text-xs text-muted-foreground">Popular topics:</span>
@@ -131,7 +168,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		</div>
 
 		<!-- Loading State -->
-		<div id="state-loading" class="hidden flex flex-col items-center justify-center p-12 text-center my-4">
+		<div id="state-loading" class="hidden flex flex-col items-center justify-center p-12 text-center my-4 max-w-4xl">
 			<div class="inline-block size-8 animate-spin rounded-full border-2 border-solid border-primary border-r-transparent mb-3" role="status">
 				<span class="sr-only">Loading...</span>
 			</div>
@@ -139,7 +176,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		</div>
 
 		<!-- State: Error / Unavailable -->
-		<div id="state-error" class="hidden flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-border bg-card my-4">
+		<div id="state-error" class="hidden flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-border bg-card my-4 max-w-4xl">
 			<div class="size-12 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600 dark:text-amber-400 mb-3">
 				<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<circle cx="12" cy="12" r="10"></circle>
@@ -162,7 +199,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		</div>
 
 		<!-- State: No Results Found -->
-		<div id="state-no-results" class="hidden flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-border bg-card my-4">
+		<div id="state-no-results" class="hidden flex flex-col items-center justify-center p-8 md:p-12 text-center rounded-2xl border border-border bg-card my-4 max-w-4xl">
 			<div class="size-12 rounded-full bg-muted flex items-center justify-center text-muted-foreground mb-3">
 				<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<circle cx="11" cy="11" r="8"></circle>
@@ -172,7 +209,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			</div>
 			<h2 class="text-lg font-semibold mb-1">No results found</h2>
 			<p class="text-sm text-muted-foreground max-w-md" id="no-results-text">
-				We could not find any matches for your query. Try searching for different keywords or checking for spelling errors.
+				We could not find any matches for your query. Try searching for different keywords or click "Ask agent" above.
 			</p>
 		</div>
 
@@ -199,11 +236,22 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		total: number;
 		hits: SearchHit[];
 		semantic: boolean;
+		extraction?: {
+			model: string;
+			source: "clairic" | "fastpath";
+			intent: string;
+			contentType?: string;
+			searchQuery: string;
+			latencyMs: number;
+		};
 	}
 
 	const input = document.getElementById("search-input") as HTMLInputElement | null;
 	const clearBtn = document.getElementById("search-clear-btn");
 	const statusCount = document.getElementById("search-count-text");
+	const askAgentBtn = document.getElementById("search-mode-ai-btn");
+	const askAgentQuerySpan = document.getElementById("search-ask-agent-query");
+	const clairicPill = document.getElementById("search-clairic-pill");
 
 	const stateReady = document.getElementById("state-ready");
 	const stateLoading = document.getElementById("state-loading");
@@ -225,6 +273,14 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		if (resultsList) resultsList.classList.toggle("hidden", state !== "results");
 	}
 
+	askAgentBtn?.addEventListener("click", () => {
+		const q = input?.value.trim() || "";
+		const win = window as unknown as {
+			openAgentAjDrawer?: (prompt?: string) => void;
+		};
+		win.openAgentAjDrawer?.(q || undefined);
+	});
+
 	function getBadgeInfo(type: string): { label: string; badgeClass: string; iconSvg: string } {
 		switch (type) {
 			case "post":
@@ -295,9 +351,13 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 	async function performSearch(query: string, type: string) {
 		const trimmed = query.trim();
+		if (askAgentQuerySpan) {
+			askAgentQuerySpan.textContent = trimmed ? `: "${trimmed}"` : "";
+		}
 		if (!trimmed || trimmed.length < 2) {
 			showState("ready");
 			if (statusCount) statusCount.textContent = "";
+			if (clairicPill) clairicPill.classList.add("hidden");
 			return;
 		}
 
@@ -321,9 +381,14 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			const data = (await res.json()) as ApiResponse;
 			const hits = data.hits || [];
 
+			if (clairicPill && data.extraction) {
+				clairicPill.textContent = `⚡ ${data.extraction.source}: ${data.extraction.intent} (${data.extraction.latencyMs}ms)`;
+				clairicPill.classList.remove("hidden");
+			}
+
 			if (hits.length === 0) {
 				if (noResultsText) {
-					noResultsText.textContent = `No matches found for "${trimmed}". Try different keywords or broad search terms.`;
+					noResultsText.textContent = `No matches found for "${trimmed}". Click "Ask agent" above to ask Agent AJ in the side drawer.`;
 				}
 				if (statusCount) {
 					statusCount.textContent = "0 results found";
@@ -352,6 +417,9 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		if (clearBtn) {
 			clearBtn.classList.toggle("hidden", !val);
 		}
+		if (askAgentQuerySpan) {
+			askAgentQuerySpan.textContent = val.trim() ? `: "${val.trim()}"` : "";
+		}
 
 		const url = new URL(window.location.href);
 		if (val.trim()) {
@@ -408,14 +476,21 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		});
 	});
 
-	// Check if URL has ?q=
+	// Check if URL has ?q= or ?mode=ai
 	const initialParams = new URLSearchParams(window.location.search);
 	const initialQuery = initialParams.get("q");
+	const initialMode = initialParams.get("mode");
 	if (initialQuery && input) {
 		input.value = initialQuery;
 		currentQuery = initialQuery;
 		if (clearBtn) clearBtn.classList.remove("hidden");
 		performSearch(initialQuery, selectedType);
+		if (initialMode === "ai") {
+			const win = window as unknown as {
+				openAgentAjDrawer?: (prompt?: string) => void;
+			};
+			win.openAgentAjDrawer?.(initialQuery);
+		}
 	} else {
 		showState("ready");
 	}
diff --git a/apps/site/src/styles/global.css b/apps/site/src/styles/global.css
index c5adcbf5..3cccca5c 100644
--- a/apps/site/src/styles/global.css
+++ b/apps/site/src/styles/global.css
@@ -211,3 +211,13 @@
 	font-size: 0.875rem;
 	line-height: 1;
 }
+
+/* Desktop Right-Side Resizable Ask Agent Drawer layout shift */
+@media (min-width: 768px) {
+	html.aj-drawer-open body {
+		padding-right: var(--aj-drawer-width, 420px);
+	}
+	html.aj-drawer-open #site-header {
+		right: var(--aj-drawer-width, 420px);
+	}
+}
diff --git a/apps/site/tests/tier1-features.test.mjs b/apps/site/tests/tier1-features.test.mjs
index a04b5cd6..7cf45e02 100644
--- a/apps/site/tests/tier1-features.test.mjs
+++ b/apps/site/tests/tier1-features.test.mjs
@@ -1764,5 +1764,122 @@ describe("Tier 1 - Feature Coverage", () => {
 				"Must strip client-only modal loading skeleton from Markdown",
 			);
 		});
+
+		it("7.20 Agent AJ /api/chat integrates Cloudflare Clairic (@cf/cloudflare/clairic) extraction cascade and fastpath fallback", async () => {
+			const chatModule = loadModule("src/pages/api/chat.ts");
+			assert.equal(chatModule.CLAIRIC_MODEL_ID, "@cf/cloudflare/clairic");
+			assert.equal(typeof chatModule.extractIntentWithClairic, "function");
+
+			// 1. Verify GET /api/chat advertises Clairic extraction model
+			const statusRes = await chatModule.GET({
+				request: new Request("https://codingcat.dev/api/chat"),
+			});
+			assert.equal(statusRes.status, 200);
+			const statusData = await statusRes.json();
+			assert.equal(statusData.extractionModel, "@cf/cloudflare/clairic");
+			assert.equal(statusData.cascadeArchitecture, "extract-route-synthesize");
+
+			// 2. Verify Clairic extraction with mocked Workers AI binding
+			let invokedModel = null;
+			let invokedPayload = null;
+			const mockAiBinding = {
+				async run(modelId, payload) {
+					invokedModel = modelId;
+					invokedPayload = payload;
+					return {
+						answers: {
+							intent: {
+								value: "topic_search",
+								confidence: 0.96,
+								p_null: 0.01,
+							},
+							content_type: {
+								value: "podcast",
+								confidence: 0.92,
+								p_null: 0.02,
+							},
+							search_query: {
+								value: "Sanity CMS",
+								confidence: 0.98,
+								p_null: 0.01,
+							},
+							limit: {
+								value: 4,
+								confidence: 0.89,
+								p_null: 0.05,
+							},
+						},
+					};
+				},
+			};
+
+			const extracted = await chatModule.extractIntentWithClairic(
+				"Find me 4 podcast episodes about Sanity CMS",
+				mockAiBinding,
+			);
+			assert.equal(invokedModel, "@cf/cloudflare/clairic");
+			assert.equal(
+				invokedPayload.state,
+				"Find me 4 podcast episodes about Sanity CMS",
+			);
+			assert.ok(invokedPayload.fields.intent);
+			assert.equal(extracted.source, "clairic");
+			assert.equal(extracted.intent, "topic_search");
+			assert.equal(extracted.contentType, "podcast");
+			assert.equal(extracted.searchQuery, "Sanity CMS");
+			assert.equal(extracted.limit, 4);
+			assert.equal(extracted.confidence, 0.96);
+
+			// 3. Verify deterministic fastpath fallback when AI binding is absent
+			const fastRecent = await chatModule.extractIntentWithClairic(
+				"What is the latest podcast episode?",
+			);
+			assert.equal(fastRecent.source, "fastpath");
+			assert.equal(fastRecent.intent, "recent_content");
+			assert.equal(fastRecent.contentType, "podcast");
+
+			const fastJoke = await chatModule.extractIntentWithClairic(
+				"Tell me a programming dad joke!",
+			);
+			assert.equal(fastJoke.source, "fastpath");
+			assert.equal(fastJoke.intent, "joke_or_kb");
+
+			// 4. Verify Search API and Search/Chat Modals expose Clairic telemetry & Search <-> AI switcher
+			const searchApiSource = fs.readFileSync(
+				path.resolve(SRC_DIR, "pages/api/search.ts"),
+				"utf-8",
+			);
+			assert.ok(searchApiSource.includes("extractIntentWithClairic"));
+			assert.ok(searchApiSource.includes("x-aj-extraction-source"));
+
+			const searchModalSource = fs.readFileSync(
+				path.resolve(SRC_DIR, "components/SearchModal.astro"),
+				"utf-8",
+			);
+			assert.ok(searchModalSource.includes('closedby="any"'));
+			assert.ok(searchModalSource.includes("modal-mode-ai"));
+			assert.ok(searchModalSource.includes("RECENTLY ASKED"));
+			assert.ok(searchModalSource.includes("RECENTLY VIEWED"));
+			assert.ok(searchModalSource.includes("modal-clairic-badge"));
+
+			const chatDrawerSource = fs.readFileSync(
+				path.resolve(SRC_DIR, "components/ChatModal.astro"),
+				"utf-8",
+			);
+			assert.ok(chatDrawerSource.includes("aj-agent-drawer"));
+			assert.ok(chatDrawerSource.includes("aj-drawer-resize-handle"));
+			assert.ok(chatDrawerSource.includes("cc_aj_drawer_open"));
+			assert.ok(
+				!chatDrawerSource.includes('id="ai-chat-open-btn"'),
+				"Must remove floating bottom-right Ask Agent AJ button",
+			);
+
+			const searchPageSource = fs.readFileSync(
+				path.resolve(SRC_DIR, "pages/search.astro"),
+				"utf-8",
+			);
+			assert.ok(searchPageSource.includes("search-mode-ai-btn"));
+			assert.ok(searchPageSource.includes("search-clairic-pill"));
+		});
 	});
 });