From 062506b18da5328c0e37974d04012361527cd4e1 Mon Sep 17 00:00:00 2001
From: Alex Patterson <alex@flipfeeds.com>
Date: Wed, 21 Oct 2026 00:41:51 -0400
Subject: [PATCH 1/5] feat(chat): integrate Cloudflare Clairic
 (@cf/cloudflare/clairic) extraction cascade for Agent AJ

---
 apps/site/src/components/ChatModal.astro |    2 +-
 apps/site/src/pages/api/chat.ts          | 1094 +++++++++++++++-------
 apps/site/tests/tier1-features.test.mjs  |   80 ++
 3 files changed, 842 insertions(+), 334 deletions(-)

diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index 75c4d902..aaa6216d 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -34,7 +34,7 @@
 					/>
 					<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>
+						<p class="text-[11px] text-muted-foreground">Grounded in Sanity Content Lake • Clairic & Workers AI</p>
 					</div>
 				</div>
 				<button
diff --git a/apps/site/src/pages/api/chat.ts b/apps/site/src/pages/api/chat.ts
index 68085a76..f9ed0a0f 100644
--- a/apps/site/src/pages/api/chat.ts
+++ b/apps/site/src/pages/api/chat.ts
@@ -12,9 +12,288 @@ 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;
+}
+
 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 (
+		/\b(?:latest|newest|most recent|recent)\b/.test(promptLower) &&
+		/\b(?:podcast|podcasts|episode|episodes|blog|post|posts|article|articles|content)\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();
+
+	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) {
+			console.warn(
+				"[Chat API Clairic extraction warning, using deterministic fast-path]",
+				clairicErr instanceof Error ? clairicErr.message : String(clairicErr),
+			);
+		}
+	}
+
+	// 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,
+		};
+	}
+
+	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,
+		};
+	}
+
+	return null;
+}
+
 export const OPTIONS: APIRoute = async () => {
 	return new Response(null, {
 		status: 204,
@@ -142,14 +421,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 +452,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 +520,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 +637,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 +739,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 +761,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 +1299,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/tests/tier1-features.test.mjs b/apps/site/tests/tier1-features.test.mjs
index a04b5cd6..19c2f5dd 100644
--- a/apps/site/tests/tier1-features.test.mjs
+++ b/apps/site/tests/tier1-features.test.mjs
@@ -1764,5 +1764,85 @@ 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");
+		});
 	});
 });

From ae2d2eb429f24454c73eb2faf10ec94116aa06d4 Mon Sep 17 00:00:00 2001
From: Alex Patterson <alex@flipfeeds.com>
Date: Wed, 21 Oct 2026 01:38:58 -0400
Subject: [PATCH 2/5] feat(site): add Clairic extraction & Search <-> Ask AI
 switcher to Search and Agent AJ

---
 apps/site/src/components/ChatModal.astro   | 104 ++++-
 apps/site/src/components/SearchModal.astro | 507 +++++++++++++++++----
 apps/site/src/pages/api/chat.ts            |  17 +-
 apps/site/src/pages/api/search.ts          | 123 ++++-
 apps/site/src/pages/search.astro           | 323 +++++++++++--
 apps/site/tests/tier1-features.test.mjs    |  23 +
 6 files changed, 943 insertions(+), 154 deletions(-)

diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index aaa6216d..66c45d05 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -37,17 +37,31 @@
 						<p class="text-[11px] text-muted-foreground">Grounded in Sanity Content Lake • Clairic & 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>
+				<div class="flex items-center gap-2">
+					<button
+						type="button"
+						id="ai-chat-switch-search-btn"
+						class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
+						title="Switch to Search"
+					>
+						<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="11" cy="11" r="8"></circle>
+							<path d="m21 21-4.3-4.3"></path>
+						</svg>
+						<span>Search</span>
+					</button>
+					<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>
+				</div>
 			</header>
 
 			<!-- Messages Container -->
@@ -191,6 +205,7 @@
 <script>
 	const openBtn = document.getElementById("ai-chat-open-btn");
 	const closeBtn = document.getElementById("ai-chat-close-btn");
+	const switchSearchBtn = document.getElementById("ai-chat-switch-search-btn");
 	const modal = document.getElementById("ai-chat-modal");
 	const form = document.getElementById("ai-chat-form") as HTMLFormElement | null;
 	const input = document.getElementById("ai-chat-input") as HTMLInputElement | null;
@@ -200,10 +215,15 @@
 
 	let isStreaming = false;
 
-	function openModal() {
+	function openModal(initialPrompt?: string) {
 		if (modal) {
 			modal.classList.remove("hidden");
-			input?.focus();
+			if (initialPrompt && input) {
+				input.value = initialPrompt;
+				form?.dispatchEvent(new Event("submit", { cancelable: true }));
+			} else {
+				input?.focus();
+			}
 		}
 	}
 
@@ -213,8 +233,28 @@
 		}
 	}
 
-	openBtn?.addEventListener("click", openModal);
+	(window as unknown as { openAgentAjModal?: (prompt?: string) => void }).openAgentAjModal = openModal;
+
+	openBtn?.addEventListener("click", () => openModal());
 	closeBtn?.addEventListener("click", closeModal);
+	switchSearchBtn?.addEventListener("click", () => {
+		const draft = input?.value.trim() || "";
+		closeModal();
+		const searchDialog = document.getElementById("search-modal") as HTMLDialogElement | null;
+		const searchInput = document.getElementById("modal-search-input") as HTMLInputElement | null;
+		if (searchDialog) {
+			if (!searchDialog.open) {
+				searchDialog.showModal();
+			}
+			if (searchInput) {
+				if (draft) {
+					searchInput.value = draft;
+					searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+				}
+				searchInput.focus();
+			}
+		}
+	});
 
 	modal?.addEventListener("click", (e) => {
 		if (e.target === modal) {
@@ -498,7 +538,10 @@
 		container.innerHTML = html + cardsHtml;
 	}
 
-	function appendMessage(role: "user" | "assistant", initialText = ""): HTMLElement {
+	function appendMessage(
+		role: "user" | "assistant",
+		initialText = "",
+	): { contentEl: HTMLElement; telemetryEl?: HTMLElement } {
 		if (welcomeContainer) {
 			welcomeContainer.classList.add("hidden");
 		}
@@ -510,11 +553,22 @@
 				: "mr-auto bg-muted/60 text-foreground rounded-2xl rounded-tl-xs px-4 py-2.5 border border-border"
 		}`;
 
+		let telemetryEl: HTMLElement | undefined;
+
 		if (role === "assistant") {
+			const badgeRow = document.createElement("div");
+			badgeRow.className = "flex flex-wrap items-center justify-between gap-2 mb-0.5";
+
 			const badge = document.createElement("div");
-			badge.className = "flex items-center gap-1.5 text-[11px] font-semibold text-primary mb-0.5";
+			badge.className = "flex items-center gap-1.5 text-[11px] font-semibold text-primary";
 			badge.innerHTML = `<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" /><span>Agent AJ</span>`;
-			msgDiv.appendChild(badge);
+
+			telemetryEl = document.createElement("span");
+			telemetryEl.className = "hidden rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-medium text-primary";
+
+			badgeRow.appendChild(badge);
+			badgeRow.appendChild(telemetryEl);
+			msgDiv.appendChild(badgeRow);
 		}
 
 		const contentDiv = document.createElement("div");
@@ -525,7 +579,7 @@
 		messagesContainer?.appendChild(msgDiv);
 		messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
 
-		return contentDiv;
+		return { contentEl: contentDiv, telemetryEl };
 	}
 
 	form?.addEventListener("submit", async (e) => {
@@ -539,7 +593,10 @@
 		if (sendBtn) sendBtn.disabled = true;
 
 		appendMessage("user", prompt);
-		const assistantContent = appendMessage("assistant", "Thinking...");
+		const { contentEl: assistantContent, telemetryEl } = appendMessage(
+			"assistant",
+			"Thinking...",
+		);
 
 		try {
 			const res = await fetch("/api/chat", {
@@ -548,6 +605,15 @@
 				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");
+			const cascadeMode = res.headers.get("x-aj-cascade-mode");
+			if (telemetryEl && extSource && extIntent) {
+				telemetryEl.textContent = `⚡ ${extSource}: ${extIntent} (${extLatency ?? "0"}ms • ${cascadeMode ?? "cascade"})`;
+				telemetryEl.classList.remove("hidden");
+			}
+
 			if (!res.ok) {
 				const errorJson = (await res.json().catch(() => ({}))) as {
 					error?: string;
diff --git a/apps/site/src/components/SearchModal.astro b/apps/site/src/components/SearchModal.astro
index e0dad2b2..29e8ad39 100644
--- a/apps/site/src/components/SearchModal.astro
+++ b/apps/site/src/components/SearchModal.astro
@@ -4,19 +4,21 @@
 
 <dialog
 	id="search-modal"
+	closedby="any"
 	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"
 	aria-labelledby="search-modal-title"
 >
 	<!-- Modal Header & Search 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"
 		toolname="search_content"
 		tooldescription="Search CodingCat.dev web development tutorials, blog posts, and podcasts"
-		onsubmit="return false"
 	>
 		<svg
+			id="search-modal-icon-search"
 			class="size-5 shrink-0 text-muted-foreground"
 			viewBox="0 0 24 24"
 			fill="none"
@@ -29,6 +31,14 @@
 			<circle cx="11" cy="11" r="8"></circle>
 			<path d="m21 21-4.3-4.3"></path>
 		</svg>
+		<img
+			id="search-modal-icon-ai"
+			src="/icon.svg"
+			alt=""
+			class="hidden size-5 shrink-0 object-contain"
+			width="20"
+			height="20"
+		/>
 
 		<label for="search-modal-input" id="search-modal-title" class="sr-only">
 			Search CodingCat.dev
@@ -44,6 +54,15 @@
 			toolparamdescription="Search keyword or technical topic"
 		/>
 
+		<!-- AI Submit Button (visible in AI mode) -->
+		<button
+			type="submit"
+			id="search-modal-ai-submit"
+			class="hidden shrink-0 rounded-lg bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground hover:opacity-90 transition-opacity cursor-pointer"
+		>
+			Ask AI
+		</button>
+
 		<!-- Loading spinner -->
 		<div
 			id="search-modal-spinner"
@@ -56,7 +75,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 +88,189 @@
 		<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-md border border-border px-2 py-0.5 text-xs font-semibold 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"
-		>
-			Guests
-		</button>
+	<!-- Mode Switcher (Search vs Ask AI) + Content Type Filter Pills -->
+	<div class="flex flex-wrap items-center justify-between gap-2 border-b border-border/50 px-4 py-2 text-xs bg-muted/10">
+		<!-- Segmented Mode Switcher -->
+		<div class="inline-flex items-center rounded-lg border border-border bg-background/80 p-0.5" role="group" aria-label="Search mode">
+			<button
+				type="button"
+				id="modal-mode-search"
+				class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
+				aria-pressed="true"
+			>
+				<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<circle cx="11" cy="11" r="8"></circle>
+					<path d="m21 21-4.3-4.3"></path>
+				</svg>
+				<span>Search</span>
+			</button>
+			<button
+				type="button"
+				id="modal-mode-ai"
+				class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer"
+				aria-pressed="false"
+			>
+				<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" />
+				<span>Ask AI (Clairic)</span>
+			</button>
+		</div>
+
+		<!-- Filter Pills (shown in Search mode) -->
+		<div id="modal-filter-bar" class="flex items-center gap-1.5 overflow-x-auto">
+			<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"
+			>
+				Guests
+			</button>
+		</div>
 	</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>
-					))
-				}
+	<!-- Body: Search Results OR AI Assistant View -->
+	<div class="flex-1 overflow-y-auto p-3 min-h-[240px]">
+		<!-- SEARCH VIEW -->
+		<div id="modal-search-view">
+			<!-- Switch-to-AI quick action bar when user has typed a query -->
+			<div id="modal-ask-ai-cta" class="hidden mb-2">
+				<button
+					type="button"
+					id="modal-ask-ai-cta-btn"
+					class="w-full flex items-center justify-between gap-2 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 px-3.5 py-2.5 text-left transition-colors cursor-pointer"
+				>
+					<div class="flex items-center gap-2.5 min-w-0">
+						<img src="/icon.svg" alt="" class="size-5 shrink-0 object-contain" width="20" height="20" />
+						<span class="text-xs font-semibold text-foreground truncate">
+							Ask Agent AJ (Clairic AI): <span id="modal-ask-ai-query" class="text-primary"></span>
+						</span>
+					</div>
+					<span class="shrink-0 text-[11px] font-semibold text-primary inline-flex items-center gap-1">
+						Switch to AI →
+					</span>
+				</button>
+			</div>
+
+			<!-- 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 — or switch to <strong>Ask AI</strong>.
+				</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", "latest podcast"].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>
+						))
+					}
+				</div>
 			</div>
-		</div>
 
-		<!-- No Results State -->
-		<div id="modal-state-empty" class="hidden flex flex-col items-center justify-center py-12 text-center">
-			<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>
+			<!-- No Results State -->
+			<div id="modal-state-empty" class="hidden flex flex-col items-center justify-center py-12 text-center">
+				<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 click "Switch to AI" above to ask Agent AJ.</p>
+			</div>
+
+			<!-- Results List -->
+			<ul
+				id="modal-results-list"
+				class="hidden flex flex-col gap-1.5 list-none m-0 p-0"
+				role="listbox"
+				aria-label="Search suggestions"
+			>
+			</ul>
 		</div>
 
-		<!-- Results List -->
-		<ul
-			id="modal-results-list"
-			class="hidden flex flex-col gap-1.5 list-none m-0 p-0"
-			role="listbox"
-			aria-label="Search suggestions"
-		>
-		</ul>
+		<!-- AI VIEW -->
+		<div id="modal-ai-view" class="hidden flex flex-col gap-3">
+			<!-- AI Welcome / Quick Prompts -->
+			<div id="modal-ai-welcome" class="flex flex-col items-center justify-center py-8 text-center gap-2.5">
+				<img src="/icon.svg" alt="Agent AJ" class="size-10 rounded-xl bg-primary/10 p-1.5 object-contain" width="40" height="40" />
+				<div class="text-sm font-semibold">Ask Agent AJ (Powered by Cloudflare Clairic & Workers AI)</div>
+				<p class="text-xs text-muted-foreground max-w-md">
+					Type a question above and press <kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">↵</kbd> or select a quick prompt:
+				</p>
+				<div class="flex flex-wrap justify-center gap-1.5 pt-1">
+					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What is the latest podcast episode?">Latest podcast</button>
+					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What is the latest blog post?">Latest blog post</button>
+					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What are the top videos on CodingCat.dev?">Top videos</button>
+					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="Tell me a programming dad joke!">Coding joke</button>
+				</div>
+			</div>
+
+			<!-- AI Telemetry Bar -->
+			<div id="modal-ai-telemetry" class="hidden flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary/25 bg-primary/5 px-3 py-1.5 text-[11px]">
+				<span id="modal-ai-telemetry-text" class="font-mono text-primary font-medium"></span>
+				<button
+					type="button"
+					id="modal-open-full-chat"
+					class="text-xs font-semibold text-foreground hover:text-primary underline cursor-pointer"
+				>
+					Open in full Chat →
+				</button>
+			</div>
+
+			<!-- AI Response Output -->
+			<div
+				id="modal-ai-output"
+				class="hidden rounded-xl border border-border bg-muted/40 p-4 text-sm leading-relaxed text-foreground"
+			></div>
+		</div>
 	</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">
+	<!-- Footer with Keyboard Hints & Clairic Telemetry Badge -->
+	<div class="flex flex-wrap 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">↵</kbd> select / ask</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>
+		<div class="flex items-center gap-2">
+			<span id="modal-clairic-badge" class="hidden rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-semibold text-primary"></span>
+			<span id="modal-results-count" class="font-medium text-xs"></span>
+		</div>
 	</div>
 </dialog>
 
@@ -177,15 +285,27 @@
 		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;
 	}
 
 	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");
@@ -195,20 +315,183 @@
 	const emptyView = document.getElementById("modal-state-empty");
 	const emptyMsg = document.getElementById("modal-empty-msg");
 	const countView = document.getElementById("modal-results-count");
-
+	const clairicBadge = document.getElementById("modal-clairic-badge");
+
+	const modeSearchBtn = document.getElementById("modal-mode-search");
+	const modeAiBtn = document.getElementById("modal-mode-ai");
+	const filterBar = document.getElementById("modal-filter-bar");
+	const searchView = document.getElementById("modal-search-view");
+	const aiView = document.getElementById("modal-ai-view");
+	const aiWelcome = document.getElementById("modal-ai-welcome");
+	const aiOutput = document.getElementById("modal-ai-output");
+	const aiTelemetry = document.getElementById("modal-ai-telemetry");
+	const aiTelemetryText = document.getElementById("modal-ai-telemetry-text");
+	const aiSubmitBtn = document.getElementById("search-modal-ai-submit");
+	const iconSearch = document.getElementById("search-modal-icon-search");
+	const iconAi = document.getElementById("search-modal-icon-ai");
+	const askAiCta = document.getElementById("modal-ask-ai-cta");
+	const askAiCtaBtn = document.getElementById("modal-ask-ai-cta-btn");
+	const askAiQuerySpan = document.getElementById("modal-ask-ai-query");
+	const openFullChatBtn = document.getElementById("modal-open-full-chat");
+
+	let currentMode: "search" | "ai" = "search";
 	let currentType = "all";
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let abortController: AbortController | null = null;
+	let aiAbortController: AbortController | null = null;
 	let activeIndex = -1;
 	let currentHits: SearchHit[] = [];
 
-	function openModal() {
+	function escapeHtml(text: string): string {
+		return text
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+
+	function stripProviderTrailer(text: string): string {
+		return text.replace(/\n?<!--AJ_PODCAST_PROVIDERS:[\s\S]*?(?:-->|$)/g, "");
+	}
+
+	function formatAiMarkdown(rawText: string): string {
+		const cleaned = stripProviderTrailer(rawText)
+			.replace(/http:\/\/localhost:\d+/g, "")
+			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g, "[$1]($2)");
+		let html = escapeHtml(cleaned);
+		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
+		html = html.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			"<a href='$2' class='text-primary font-semibold hover:underline'>$1</a>",
+		);
+		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
+		html = html.replace(/\n/g, "<br />");
+		return html;
+	}
+
+	function setMode(mode: "search" | "ai", autoRunAi = false) {
+		currentMode = mode;
+		const isAi = mode === "ai";
+
+		modeSearchBtn?.setAttribute("aria-pressed", String(!isAi));
+		modeAiBtn?.setAttribute("aria-pressed", String(isAi));
+
+		if (isAi) {
+			modeAiBtn?.classList.add("bg-primary", "text-primary-foreground", "shadow-2xs");
+			modeAiBtn?.classList.remove("text-muted-foreground");
+			modeSearchBtn?.classList.remove("bg-primary", "text-primary-foreground", "shadow-2xs");
+			modeSearchBtn?.classList.add("text-muted-foreground");
+		} else {
+			modeSearchBtn?.classList.add("bg-primary", "text-primary-foreground", "shadow-2xs");
+			modeSearchBtn?.classList.remove("text-muted-foreground");
+			modeAiBtn?.classList.remove("bg-primary", "text-primary-foreground", "shadow-2xs");
+			modeAiBtn?.classList.add("text-muted-foreground");
+		}
+
+		filterBar?.classList.toggle("hidden", isAi);
+		searchView?.classList.toggle("hidden", isAi);
+		aiView?.classList.toggle("hidden", !isAi);
+		aiSubmitBtn?.classList.toggle("hidden", !isAi);
+		iconSearch?.classList.toggle("hidden", isAi);
+		iconAi?.classList.toggle("hidden", !isAi);
+
+		if (input) {
+			input.placeholder = isAi
+				? "Ask Agent AJ anything about CodingCat.dev... (Press Enter)"
+				: "Search posts, podcasts, authors... (⌘K)";
+			input.focus();
+		}
+
+		if (isAi && autoRunAi && input?.value.trim()) {
+			runAiQuery(input.value.trim());
+		} else if (!isAi && input?.value.trim()) {
+			performSearch(input.value.trim(), currentType);
+		}
+	}
+
+	async function runAiQuery(prompt: string) {
+		const trimmed = prompt.trim();
+		if (!trimmed) return;
+
+		if (aiAbortController) aiAbortController.abort();
+		aiAbortController = new AbortController();
+
+		aiWelcome?.classList.add("hidden");
+		if (aiOutput) {
+			aiOutput.classList.remove("hidden");
+			aiOutput.textContent = "Agent AJ is thinking...";
+		}
+		if (spinner) spinner.classList.remove("hidden");
+		if (countView) countView.textContent = "Streaming AI...";
+
+		try {
+			const res = await fetch("/api/chat", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ prompt: trimmed }),
+				signal: aiAbortController.signal,
+			});
+
+			const source = res.headers.get("x-aj-extraction-source") || "clairic";
+			const cascadeMode = res.headers.get("x-aj-cascade-mode") || "clairic-fastpath";
+			const intent = res.headers.get("x-aj-intent") || "topic_search";
+			const latency = res.headers.get("x-aj-extraction-latency-ms") || "0";
+
+			if (aiTelemetry && aiTelemetryText) {
+				aiTelemetry.classList.remove("hidden");
+				aiTelemetryText.textContent = `⚡ @cf/cloudflare/clairic • source: ${source} • mode: ${cascadeMode} • intent: ${intent} (${latency}ms)`;
+			}
+			if (clairicBadge) {
+				clairicBadge.classList.remove("hidden");
+				clairicBadge.textContent = `⚡ ${source}: ${intent} (${latency}ms)`;
+			}
+
+			if (!res.ok || !res.body) {
+				if (aiOutput) aiOutput.textContent = "Failed to generate AI response.";
+				return;
+			}
+
+			let accumulated = "";
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				accumulated += decoder.decode(value, { stream: true });
+				if (aiOutput) {
+					aiOutput.textContent = stripProviderTrailer(accumulated);
+				}
+			}
+
+			if (aiOutput) {
+				aiOutput.innerHTML = formatAiMarkdown(accumulated);
+			}
+			if (countView) countView.textContent = "AI answer ready";
+		} catch (err: unknown) {
+			if (err instanceof Error && err.name === "AbortError") return;
+			if (aiOutput) {
+				aiOutput.textContent = `Error: ${err instanceof Error ? err.message : String(err)}`;
+			}
+		} finally {
+			if (spinner) spinner.classList.add("hidden");
+		}
+	}
+
+	function openModal(initialQuery?: string, mode: "search" | "ai" = "search") {
 		if (!modal) return;
 		if (!modal.open) {
 			modal.showModal();
 			document.body.style.overflow = "hidden";
-			setTimeout(() => input?.focus(), 50);
 		}
+		if (typeof initialQuery === "string" && input) {
+			input.value = initialQuery;
+			clearBtn?.classList.toggle("hidden", !initialQuery);
+		}
+		setMode(mode, mode === "ai" && Boolean(initialQuery));
+		setTimeout(() => input?.focus(), 50);
 	}
 
 	function closeModal() {
@@ -219,8 +502,41 @@
 		}
 	}
 
-	// Expose to window for triggers from header or buttons
-	(window as unknown as { openSearchModal?: () => void }).openSearchModal = openModal;
+	// Expose to window for triggers from header or ChatModal
+	(window as unknown as { openSearchModal?: (q?: string, mode?: "search" | "ai") => void }).openSearchModal = openModal;
+
+	modeSearchBtn?.addEventListener("click", () => setMode("search"));
+	modeAiBtn?.addEventListener("click", () => setMode("ai", true));
+	askAiCtaBtn?.addEventListener("click", () => setMode("ai", true));
+
+	openFullChatBtn?.addEventListener("click", () => {
+		const q = input?.value.trim() || "";
+		closeModal();
+		const win = window as unknown as { openAgentAjModal?: (prompt?: string) => void };
+		if (win.openAgentAjModal) {
+			win.openAgentAjModal(q);
+		} else {
+			document.getElementById("ai-chat-open-btn")?.click();
+		}
+	});
+
+	document.querySelectorAll(".modal-ai-chip").forEach((chip) => {
+		chip.addEventListener("click", () => {
+			const prompt = chip.getAttribute("data-prompt");
+			if (prompt && input) {
+				input.value = prompt;
+				clearBtn?.classList.remove("hidden");
+				runAiQuery(prompt);
+			}
+		});
+	});
+
+	form?.addEventListener("submit", (e) => {
+		e.preventDefault();
+		if (currentMode === "ai" && input?.value.trim()) {
+			runAiQuery(input.value.trim());
+		}
+	});
 
 	// Global keyboard shortcuts (⌘K or Ctrl+K)
 	document.addEventListener("keydown", (e) => {
@@ -322,12 +638,19 @@
 			if (resultsList) resultsList.classList.add("hidden");
 			if (emptyView) emptyView.classList.add("hidden");
 			if (initialView) initialView.classList.remove("hidden");
+			if (askAiCta) askAiCta.classList.add("hidden");
+			if (clairicBadge) clairicBadge.classList.add("hidden");
 			if (countView) countView.textContent = "";
 			if (spinner) spinner.classList.add("hidden");
 			currentHits = [];
 			return;
 		}
 
+		if (askAiCta && askAiQuerySpan) {
+			askAiQuerySpan.textContent = `"${trimmed}"`;
+			askAiCta.classList.remove("hidden");
+		}
+
 		if (abortController) abortController.abort();
 		abortController = new AbortController();
 
@@ -343,6 +666,15 @@
 
 			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"}`;
@@ -367,6 +699,15 @@
 		const val = input?.value ?? "";
 		if (clearBtn) clearBtn.classList.toggle("hidden", !val);
 
+		if (currentMode === "ai") {
+			if (!val.trim()) {
+				aiWelcome?.classList.remove("hidden");
+				aiOutput?.classList.add("hidden");
+				aiTelemetry?.classList.add("hidden");
+			}
+			return;
+		}
+
 		if (debounceTimer) clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			performSearch(val, currentType);
diff --git a/apps/site/src/pages/api/chat.ts b/apps/site/src/pages/api/chat.ts
index f9ed0a0f..7de29248 100644
--- a/apps/site/src/pages/api/chat.ts
+++ b/apps/site/src/pages/api/chat.ts
@@ -30,6 +30,7 @@ export interface ClairicExtractedParameters {
 	pNull: number;
 	source: "clairic" | "fastpath";
 	latencyMs: number;
+	clairicError?: string;
 }
 
 const SANITY_CONTEXT_MCP_URL =
@@ -111,10 +112,13 @@ function normalizeIntent(
 		return "top_videos";
 	}
 	if (
-		/\b(?:latest|newest|most recent|recent)\b/.test(promptLower) &&
-		/\b(?:podcast|podcasts|episode|episodes|blog|post|posts|article|articles|content)\b/.test(
+		(/^(?: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";
@@ -167,6 +171,7 @@ export async function extractIntentWithClairic(
 		return null;
 	}
 	const promptLower = trimmed.toLowerCase();
+	let clairicErrorMsg: string | undefined;
 
 	if (aiBinding && typeof (aiBinding as any).run === "function") {
 		try {
@@ -250,9 +255,11 @@ export async function extractIntentWithClairic(
 				};
 			}
 		} catch (clairicErr) {
+			clairicErrorMsg =
+				clairicErr instanceof Error ? clairicErr.message : String(clairicErr);
 			console.warn(
 				"[Chat API Clairic extraction warning, using deterministic fast-path]",
-				clairicErr instanceof Error ? clairicErr.message : String(clairicErr),
+				clairicErrorMsg,
 			);
 		}
 	}
@@ -273,6 +280,7 @@ export async function extractIntentWithClairic(
 			pNull: 0,
 			source: "fastpath",
 			latencyMs: Date.now() - startMs,
+			...(clairicErrorMsg ? { clairicError: clairicErrorMsg } : {}),
 		};
 	}
 
@@ -288,6 +296,7 @@ export async function extractIntentWithClairic(
 			pNull: 0,
 			source: "fastpath",
 			latencyMs: Date.now() - startMs,
+			...(clairicErrorMsg ? { clairicError: clairicErrorMsg } : {}),
 		};
 	}
 
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..56a6977e 100644
--- a/apps/site/src/pages/search.astro
+++ b/apps/site/src/pages/search.astro
@@ -22,40 +22,75 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			</p>
 		</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">
+		<!-- Search Input Bar & Mode Switcher -->
+		<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full max-w-4xl">
+			<form id="search-page-form" class="relative flex-1" 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 id="search-page-icon-search" 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>
+						<img id="search-page-icon-ai" src="/icon.svg" alt="" class="hidden size-5 object-contain" width="20" height="20" />
+					</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-24 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="submit"
+						id="search-ai-submit-btn"
+						class="hidden absolute right-10 rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:opacity-90 transition-opacity cursor-pointer"
+					>
+						Ask AI
+					</button>
+					<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>
+			</form>
+
+			<!-- Search vs Ask AI Mode Toggle -->
+			<div class="inline-flex items-center self-start sm:self-auto rounded-xl border border-border bg-card p-1 shadow-xs" role="group" aria-label="Search or AI mode">
+				<button
+					type="button"
+					id="search-mode-search-btn"
+					class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
+					aria-pressed="true"
+				>
+					<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 						<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 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"
-				/>
+					<span>Search</span>
+				</button>
 				<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"
+					id="search-mode-ai-btn"
+					class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer"
+					aria-pressed="false"
 				>
-					<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>
+					<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" />
+					<span>Ask AI (Clairic)</span>
 				</button>
 			</div>
 		</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,9 +132,35 @@ 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">
-			<span id="search-count-text"></span>
-			<span id="search-powered-by" class="text-[11px] opacity-75">Sanity Semantic Search</span>
+		<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">
+			<div class="flex items-center gap-2">
+				<span id="search-count-text"></span>
+				<button
+					type="button"
+					id="search-switch-to-ai-inline"
+					class="hidden text-xs font-semibold text-primary hover:underline cursor-pointer"
+				>
+					✨ Ask Agent AJ about this →
+				</button>
+			</div>
+			<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>
+
+		<!-- AI Mode Response Panel -->
+		<div id="search-ai-panel" class="hidden flex-col gap-3 max-w-4xl my-2">
+			<div id="search-ai-telemetry-bar" class="hidden flex flex-wrap items-center justify-between gap-2 rounded-xl border border-primary/25 bg-primary/5 px-4 py-2 text-xs">
+				<span id="search-ai-telemetry-text" class="font-mono text-primary font-semibold"></span>
+				<span class="text-[11px] text-muted-foreground">Extract → Route → Synthesize Cascade</span>
+			</div>
+			<div
+				id="search-ai-output"
+				class="rounded-2xl border border-border bg-card p-5 sm:p-6 shadow-xs text-sm sm:text-base leading-relaxed text-foreground"
+			>
+				Type a question above and press Enter (or click <strong>Ask AI</strong>) to get an AI answer grounded in the Sanity Content Lake.
+			</div>
 		</div>
 
 		<!-- Empty State: Ready to Search (Initial) -->
@@ -199,11 +260,32 @@ 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 searchPageForm = document.getElementById("search-page-form") as HTMLFormElement | null;
+	const searchIconEl = document.getElementById("search-page-icon-search");
+	const aiIconEl = document.getElementById("search-page-icon-ai");
+	const aiSubmitBtn = document.getElementById("search-ai-submit-btn");
+	const modeSearchBtn = document.getElementById("search-mode-search-btn");
+	const modeAiBtn = document.getElementById("search-mode-ai-btn");
+	const switchToAiInlineBtn = document.getElementById("search-switch-to-ai-inline");
+	const clairicPill = document.getElementById("search-clairic-pill");
+	const filterToolbar = document.getElementById("search-filter-toolbar");
+	const aiPanel = document.getElementById("search-ai-panel");
+	const aiTelemetryBar = document.getElementById("search-ai-telemetry-bar");
+	const aiTelemetryText = document.getElementById("search-ai-telemetry-text");
+	const aiOutput = document.getElementById("search-ai-output");
 
 	const stateReady = document.getElementById("state-ready");
 	const stateLoading = document.getElementById("state-loading");
@@ -214,17 +296,177 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 	let selectedType: string = "all";
 	let currentQuery: string = "";
+	let pageMode: "search" | "ai" = "search";
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let currentAbortController: AbortController | null = null;
+	let aiAbortController: AbortController | null = null;
 
-	function showState(state: "ready" | "loading" | "error" | "no-results" | "results") {
+	function showState(state: "ready" | "loading" | "error" | "no-results" | "results" | "ai") {
 		if (stateReady) stateReady.classList.toggle("hidden", state !== "ready");
 		if (stateLoading) stateLoading.classList.toggle("hidden", state !== "loading");
 		if (stateError) stateError.classList.toggle("hidden", state !== "error");
 		if (stateNoResults) stateNoResults.classList.toggle("hidden", state !== "no-results");
 		if (resultsList) resultsList.classList.toggle("hidden", state !== "results");
+		if (aiPanel) {
+			aiPanel.classList.toggle("hidden", state !== "ai");
+			aiPanel.classList.toggle("flex", state === "ai");
+		}
+	}
+
+	function escapeHtml(text: string): string {
+		return text
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+
+	function formatAiMarkdown(rawText: string): string {
+		const cleaned = rawText
+			.replace(/\n?<!--AJ_PODCAST_PROVIDERS:[\s\S]*?(?:-->|$)/g, "")
+			.replace(/http:\/\/localhost:\d+/g, "");
+		let html = escapeHtml(cleaned);
+		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
+		html = html.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			"<a href='$2' class='text-primary font-semibold hover:underline'>$1</a>",
+		);
+		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
+		html = html.replace(/\n/g, "<br />");
+		return html;
+	}
+
+	async function askSearchPageAi(prompt: string) {
+		const trimmed = prompt.trim();
+		if (!trimmed || !aiOutput) return;
+
+		if (aiAbortController) {
+			aiAbortController.abort();
+		}
+		aiAbortController = new AbortController();
+
+		showState("ai");
+		aiOutput.innerHTML = `<span class="text-muted-foreground animate-pulse">⚡ Extracting intent with @cf/cloudflare/clairic &amp; querying Sanity Content Lake...</span>`;
+		if (aiTelemetryBar) aiTelemetryBar.classList.add("hidden");
+
+		try {
+			const res = await fetch("/api/chat", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ prompt: trimmed }),
+				signal: aiAbortController.signal,
+			});
+
+			const extSource = res.headers.get("x-aj-extraction-source") || "clairic";
+			const extIntent = res.headers.get("x-aj-intent") || "topic_search";
+			const extLatency = res.headers.get("x-aj-extraction-latency-ms") || "0";
+			const cascadeMode = res.headers.get("x-aj-cascade-mode") || "clairic-fastpath";
+
+			if (aiTelemetryBar && aiTelemetryText) {
+				aiTelemetryText.textContent = `⚡ ${extSource.toUpperCase()} (${extLatency}ms) • intent=${extIntent} • mode=${cascadeMode}`;
+				aiTelemetryBar.classList.remove("hidden");
+			}
+			if (clairicPill) {
+				clairicPill.textContent = `⚡ ${extSource}: ${extIntent} (${extLatency}ms)`;
+				clairicPill.classList.remove("hidden");
+			}
+
+			if (!res.ok || !res.body) {
+				aiOutput.textContent = "Agent AJ is currently unavailable. Switch back to Search mode to browse results.";
+				return;
+			}
+
+			let accumulated = "";
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				accumulated += decoder.decode(value, { stream: true });
+				aiOutput.innerHTML = formatAiMarkdown(accumulated);
+			}
+		} catch (err: unknown) {
+			if (err instanceof Error && err.name === "AbortError") return;
+			aiOutput.textContent = "Connection error while contacting Agent AJ.";
+		}
 	}
 
+	function setPageMode(nextMode: "search" | "ai", autoTriggerAi = false) {
+		pageMode = nextMode;
+		const isAi = nextMode === "ai";
+
+		if (modeSearchBtn && modeAiBtn) {
+			modeSearchBtn.setAttribute("aria-pressed", String(!isAi));
+			modeAiBtn.setAttribute("aria-pressed", String(isAi));
+			modeSearchBtn.className = !isAi
+				? "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
+				: "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer";
+			modeAiBtn.className = isAi
+				? "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
+				: "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer";
+		}
+
+		if (searchIconEl && aiIconEl) {
+			searchIconEl.classList.toggle("hidden", isAi);
+			aiIconEl.classList.toggle("hidden", !isAi);
+		}
+		if (aiSubmitBtn) {
+			aiSubmitBtn.classList.toggle("hidden", !isAi);
+		}
+		if (filterToolbar) {
+			filterToolbar.classList.toggle("hidden", isAi);
+		}
+		if (switchToAiInlineBtn) {
+			switchToAiInlineBtn.classList.toggle("hidden", isAi || !currentQuery.trim());
+		}
+		if (input) {
+			input.placeholder = isAi
+				? "Ask Agent AJ anything (e.g. 'What is the latest podcast?')..."
+				: "Search for your purr-fect thing!";
+		}
+
+		const url = new URL(window.location.href);
+		if (isAi) {
+			url.searchParams.set("mode", "ai");
+		} else {
+			url.searchParams.delete("mode");
+		}
+		window.history.replaceState({}, "", url.toString());
+
+		if (isAi) {
+			if (statusCount) statusCount.textContent = "Ask AI (Clairic System-One Cascade)";
+			showState("ai");
+			if (autoTriggerAi && currentQuery.trim().length >= 2) {
+				askSearchPageAi(currentQuery);
+			}
+		} else {
+			if (currentQuery.trim().length >= 2) {
+				performSearch(currentQuery, selectedType);
+			} else {
+				showState("ready");
+			}
+		}
+	}
+
+	modeSearchBtn?.addEventListener("click", () => setPageMode("search"));
+	modeAiBtn?.addEventListener("click", () => setPageMode("ai", true));
+	switchToAiInlineBtn?.addEventListener("click", () => setPageMode("ai", true));
+
+	searchPageForm?.addEventListener("submit", (e) => {
+		e.preventDefault();
+		const val = input?.value.trim() ?? "";
+		if (!val) return;
+		currentQuery = val;
+		if (pageMode === "ai") {
+			askSearchPageAi(val);
+		} else {
+			performSearch(val, selectedType);
+		}
+	});
+
 	function getBadgeInfo(type: string): { label: string; badgeClass: string; iconSvg: string } {
 		switch (type) {
 			case "post":
@@ -298,6 +540,8 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		if (!trimmed || trimmed.length < 2) {
 			showState("ready");
 			if (statusCount) statusCount.textContent = "";
+			if (clairicPill) clairicPill.classList.add("hidden");
+			if (switchToAiInlineBtn) switchToAiInlineBtn.classList.add("hidden");
 			return;
 		}
 
@@ -321,9 +565,17 @@ 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 (switchToAiInlineBtn) {
+				switchToAiInlineBtn.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}". Try different keywords or switch to Ask AI (Clairic) above.`;
 				}
 				if (statusCount) {
 					statusCount.textContent = "0 results found";
@@ -361,6 +613,10 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		}
 		window.history.replaceState({}, "", url.toString());
 
+		if (pageMode === "ai") {
+			return;
+		}
+
 		if (debounceTimer) clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			performSearch(currentQuery, selectedType);
@@ -408,14 +664,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") {
+			setPageMode("ai", true);
+		} else {
+			performSearch(initialQuery, selectedType);
+		}
+	} else if (initialMode === "ai") {
+		setPageMode("ai", false);
 	} else {
 		showState("ready");
 	}
diff --git a/apps/site/tests/tier1-features.test.mjs b/apps/site/tests/tier1-features.test.mjs
index 19c2f5dd..f5818210 100644
--- a/apps/site/tests/tier1-features.test.mjs
+++ b/apps/site/tests/tier1-features.test.mjs
@@ -1843,6 +1843,29 @@ describe("Tier 1 - Feature Coverage", () => {
 			);
 			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("modal-clairic-badge"));
+
+			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"));
 		});
 	});
 });

From 01a35e670ab3d4ea4d9f86ce02add36d75a3d6df Mon Sep 17 00:00:00 2001
From: Alex Patterson <alex@flipfeeds.com>
Date: Wed, 21 Oct 2026 02:30:25 -0400
Subject: [PATCH 3/5] feat(site): replace floating AJ button with persistent
 resizable right drawer & SearchModal Ask agent item

---
 apps/site/src/components/ChatModal.astro   | 800 +++++++++++---------
 apps/site/src/components/Header.astro      |  32 +-
 apps/site/src/components/SearchModal.astro | 830 +++++++++++----------
 apps/site/src/lib/structured-data.ts       |   8 +
 apps/site/src/pages/search.astro           | 318 ++------
 apps/site/src/styles/global.css            |  10 +
 apps/site/tests/tier1-features.test.mjs    |  14 +
 7 files changed, 988 insertions(+), 1024 deletions(-)

diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index 66c45d05..5a20f17a 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -1,279 +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 • Clairic & Workers AI</p>
-					</div>
-				</div>
-				<div class="flex items-center gap-2">
-					<button
-						type="button"
-						id="ai-chat-switch-search-btn"
-						class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer"
-						title="Switch to Search"
-					>
-						<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							<circle cx="11" cy="11" r="8"></circle>
-							<path d="m21 21-4.3-4.3"></path>
-						</svg>
-						<span>Search</span>
-					</button>
-					<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>
-				</div>
-			</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 switchSearchBtn = document.getElementById("ai-chat-switch-search-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 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 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 openModal(initialPrompt?: string) {
-		if (modal) {
-			modal.classList.remove("hidden");
+	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;
-				form?.dispatchEvent(new Event("submit", { cancelable: true }));
+				submitPrompt(initialPrompt);
 			} else {
-				input?.focus();
+				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 } }),
+		);
 	}
 
-	function closeModal() {
-		if (modal) {
-			modal.classList.add("hidden");
-		}
+	function toggleDrawer() {
+		const isOpen = drawer && !drawer.classList.contains("hidden");
+		setDrawerOpen(!isOpen);
 	}
 
-	(window as unknown as { openAgentAjModal?: (prompt?: string) => void }).openAgentAjModal = openModal;
-
-	openBtn?.addEventListener("click", () => openModal());
-	closeBtn?.addEventListener("click", closeModal);
-	switchSearchBtn?.addEventListener("click", () => {
-		const draft = input?.value.trim() || "";
-		closeModal();
-		const searchDialog = document.getElementById("search-modal") as HTMLDialogElement | null;
-		const searchInput = document.getElementById("modal-search-input") as HTMLInputElement | null;
-		if (searchDialog) {
-			if (!searchDialog.open) {
-				searchDialog.showModal();
-			}
-			if (searchInput) {
-				if (draft) {
-					searchInput.value = draft;
-					searchInput.dispatchEvent(new Event("input", { bubbles: true }));
-				}
-				searchInput.focus();
-			}
+	// Expose global APIs for SearchModal, Header, and pages
+	(
+		window as unknown as {
+			openAgentAjModal?: (prompt?: string) => void;
+			openAgentAjDrawer?: (prompt?: string) => void;
+			toggleAgentAjDrawer?: () => void;
 		}
-	});
-
-	modal?.addEventListener("click", (e) => {
-		if (e.target === modal) {
-			closeModal();
+	).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);
 			}
 		});
 	});
@@ -311,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",
@@ -348,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;
@@ -372,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) {
@@ -388,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];
@@ -401,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,
@@ -416,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>
 				`;
@@ -472,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>
@@ -499,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>
 						`;
@@ -508,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>
@@ -538,66 +576,101 @@
 		container.innerHTML = html + cardsHtml;
 	}
 
-	function appendMessage(
+	function appendMessageElement(
 		role: "user" | "assistant",
 		initialText = "",
+		telemetryText?: string,
 	): { contentEl: HTMLElement; telemetryEl?: HTMLElement } {
-		if (welcomeContainer) {
-			welcomeContainer.classList.add("hidden");
-		}
+		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"
-		}`;
-
-		let telemetryEl: HTMLElement | undefined;
-
-		if (role === "assistant") {
-			const badgeRow = document.createElement("div");
-			badgeRow.className = "flex flex-wrap items-center justify-between gap-2 mb-0.5";
-
-			const badge = document.createElement("div");
-			badge.className = "flex items-center gap-1.5 text-[11px] font-semibold text-primary";
-			badge.innerHTML = `<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" /><span>Agent AJ</span>`;
+		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 };
+		}
 
-			telemetryEl = document.createElement("span");
-			telemetryEl.className = "hidden rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-medium text-primary";
+		msgDiv.className = "flex flex-col gap-1.5 w-full text-foreground";
 
-			badgeRow.appendChild(badge);
-			badgeRow.appendChild(telemetryEl);
-			msgDiv.appendChild(badgeRow);
+		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 { 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 { contentEl: assistantContent, telemetryEl } = appendMessage(
+		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", {
 				method: "POST",
@@ -608,17 +681,24 @@
 			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");
-			const cascadeMode = res.headers.get("x-aj-cascade-mode");
-			if (telemetryEl && extSource && extIntent) {
-				telemetryEl.textContent = `⚡ ${extSource}: ${extIntent} (${extLatency ?? "0"}ms • ${cascadeMode ?? "cascade"})`;
-				telemetryEl.classList.remove("hidden");
+			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;
 			}
 
@@ -636,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 {
@@ -651,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 29e8ad39..d6d3a45b 100644
--- a/apps/site/src/components/SearchModal.astro
+++ b/apps/site/src/components/SearchModal.astro
@@ -1,25 +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"
 	closedby="any"
-	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"
+	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"
 	>
 		<svg
-			id="search-modal-icon-search"
-			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,17 +30,9 @@
 			<circle cx="11" cy="11" r="8"></circle>
 			<path d="m21 21-4.3-4.3"></path>
 		</svg>
-		<img
-			id="search-modal-icon-ai"
-			src="/icon.svg"
-			alt=""
-			class="hidden size-5 shrink-0 object-contain"
-			width="20"
-			height="20"
-		/>
 
 		<label for="search-modal-input" id="search-modal-title" class="sr-only">
-			Search CodingCat.dev
+			Search in CodingCat.dev
 		</label>
 
 		<input
@@ -49,20 +40,11 @@
 			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"
 		/>
 
-		<!-- AI Submit Button (visible in AI mode) -->
-		<button
-			type="submit"
-			id="search-modal-ai-submit"
-			class="hidden shrink-0 rounded-lg bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground hover:opacity-90 transition-opacity cursor-pointer"
-		>
-			Ask AI
-		</button>
-
 		<!-- Loading spinner -->
 		<div
 			id="search-modal-spinner"
@@ -88,189 +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 cursor-pointer"
+			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>
 
-	<!-- Mode Switcher (Search vs Ask AI) + Content Type Filter Pills -->
-	<div class="flex flex-wrap items-center justify-between gap-2 border-b border-border/50 px-4 py-2 text-xs bg-muted/10">
-		<!-- Segmented Mode Switcher -->
-		<div class="inline-flex items-center rounded-lg border border-border bg-background/80 p-0.5" role="group" aria-label="Search mode">
-			<button
-				type="button"
-				id="modal-mode-search"
-				class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
-				aria-pressed="true"
-			>
-				<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-					<circle cx="11" cy="11" r="8"></circle>
-					<path d="m21 21-4.3-4.3"></path>
-				</svg>
-				<span>Search</span>
-			</button>
+	<!-- 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"
-				class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer"
-				aria-pressed="false"
-			>
-				<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" />
-				<span>Ask AI (Clairic)</span>
-			</button>
-		</div>
-
-		<!-- Filter Pills (shown in Search mode) -->
-		<div id="modal-filter-bar" class="flex items-center gap-1.5 overflow-x-auto">
-			<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"
+				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"
 			>
-				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"
-			>
-				Guests
+				<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>
-	</div>
 
-	<!-- Body: Search Results OR AI Assistant View -->
-	<div class="flex-1 overflow-y-auto p-3 min-h-[240px]">
-		<!-- SEARCH VIEW -->
-		<div id="modal-search-view">
-			<!-- Switch-to-AI quick action bar when user has typed a query -->
-			<div id="modal-ask-ai-cta" class="hidden mb-2">
+		<!-- 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"
+		>
+			<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"
-					id="modal-ask-ai-cta-btn"
-					class="w-full flex items-center justify-between gap-2 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 px-3.5 py-2.5 text-left transition-colors cursor-pointer"
+					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"
 				>
-					<div class="flex items-center gap-2.5 min-w-0">
-						<img src="/icon.svg" alt="" class="size-5 shrink-0 object-contain" width="20" height="20" />
-						<span class="text-xs font-semibold text-foreground truncate">
-							Ask Agent AJ (Clairic AI): <span id="modal-ask-ai-query" class="text-primary"></span>
-						</span>
-					</div>
-					<span class="shrink-0 text-[11px] font-semibold text-primary inline-flex items-center gap-1">
-						Switch to AI →
-					</span>
+					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>
 
-			<!-- 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 — or switch to <strong>Ask AI</strong>.
-				</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>
+		<!-- 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">
 					{
-						["Astro", "Cloudflare", "Sanity", "Next.js", "AI", "latest podcast"].map((tag) => (
+						[
+							{ 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 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}
+								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}
 							>
-								{tag}
+								<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>
-
-			<!-- No Results State -->
-			<div id="modal-state-empty" class="hidden flex flex-col items-center justify-center py-12 text-center">
-				<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 click "Switch to AI" above to ask Agent AJ.</p>
-			</div>
-
-			<!-- Results List -->
-			<ul
-				id="modal-results-list"
-				class="hidden flex flex-col gap-1.5 list-none m-0 p-0"
-				role="listbox"
-				aria-label="Search suggestions"
-			>
-			</ul>
 		</div>
 
-		<!-- AI VIEW -->
-		<div id="modal-ai-view" class="hidden flex flex-col gap-3">
-			<!-- AI Welcome / Quick Prompts -->
-			<div id="modal-ai-welcome" class="flex flex-col items-center justify-center py-8 text-center gap-2.5">
-				<img src="/icon.svg" alt="Agent AJ" class="size-10 rounded-xl bg-primary/10 p-1.5 object-contain" width="40" height="40" />
-				<div class="text-sm font-semibold">Ask Agent AJ (Powered by Cloudflare Clairic & Workers AI)</div>
-				<p class="text-xs text-muted-foreground max-w-md">
-					Type a question above and press <kbd class="font-mono bg-muted px-1 py-0.5 rounded border border-border">↵</kbd> or select a quick prompt:
-				</p>
-				<div class="flex flex-wrap justify-center gap-1.5 pt-1">
-					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What is the latest podcast episode?">Latest podcast</button>
-					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What is the latest blog post?">Latest blog post</button>
-					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="What are the top videos on CodingCat.dev?">Top videos</button>
-					<button type="button" class="modal-ai-chip text-xs px-3 py-1.5 rounded-full border border-border bg-card hover:bg-accent cursor-pointer font-medium" data-prompt="Tell me a programming dad joke!">Coding joke</button>
-				</div>
-			</div>
-
-			<!-- AI Telemetry Bar -->
-			<div id="modal-ai-telemetry" class="hidden flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary/25 bg-primary/5 px-3 py-1.5 text-[11px]">
-				<span id="modal-ai-telemetry-text" class="font-mono text-primary font-medium"></span>
-				<button
-					type="button"
-					id="modal-open-full-chat"
-					class="text-xs font-semibold text-foreground hover:text-primary underline cursor-pointer"
-				>
-					Open in full Chat →
-				</button>
-			</div>
-
-			<!-- AI Response Output -->
-			<div
-				id="modal-ai-output"
-				class="hidden rounded-xl border border-border bg-muted/40 p-4 text-sm leading-relaxed text-foreground"
-			></div>
+		<!-- No Results State -->
+		<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">
+				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>
+
+		<!-- Search Results List -->
+		<ul
+			id="modal-results-list"
+			class="hidden flex-col gap-1 list-none m-0 px-1"
+			role="listbox"
+			aria-label="Search results"
+		></ul>
 	</div>
 
-	<!-- Footer with Keyboard Hints & Clairic Telemetry Badge -->
-	<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-4 py-2 text-[11px] text-muted-foreground bg-muted/20">
+	<!-- Footer with Keyboard Hints -->
+	<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 / ask</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>
-		<div class="flex items-center gap-2">
-			<span id="modal-clairic-badge" class="hidden rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 font-mono text-[10px] font-semibold text-primary"></span>
-			<span id="modal-results-count" class="font-medium text-xs"></span>
-		</div>
+		<span id="modal-results-count" class="font-mono text-[11px]"></span>
 	</div>
 </dialog>
 
@@ -304,44 +276,101 @@
 		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 clairicBadge = document.getElementById("modal-clairic-badge");
+	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");
 
-	const modeSearchBtn = document.getElementById("modal-mode-search");
-	const modeAiBtn = document.getElementById("modal-mode-ai");
-	const filterBar = document.getElementById("modal-filter-bar");
-	const searchView = document.getElementById("modal-search-view");
-	const aiView = document.getElementById("modal-ai-view");
-	const aiWelcome = document.getElementById("modal-ai-welcome");
-	const aiOutput = document.getElementById("modal-ai-output");
-	const aiTelemetry = document.getElementById("modal-ai-telemetry");
-	const aiTelemetryText = document.getElementById("modal-ai-telemetry-text");
-	const aiSubmitBtn = document.getElementById("search-modal-ai-submit");
-	const iconSearch = document.getElementById("search-modal-icon-search");
-	const iconAi = document.getElementById("search-modal-icon-ai");
-	const askAiCta = document.getElementById("modal-ask-ai-cta");
-	const askAiCtaBtn = document.getElementById("modal-ask-ai-cta-btn");
-	const askAiQuerySpan = document.getElementById("modal-ask-ai-query");
-	const openFullChatBtn = document.getElementById("modal-open-full-chat");
-
-	let currentMode: "search" | "ai" = "search";
 	let currentType = "all";
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let abortController: AbortController | null = null;
-	let aiAbortController: AbortController | null = null;
-	let activeIndex = -1;
+	let activeIndex = 0; // 0 = "Ask agent" button, 1..N = search results
 	let currentHits: SearchHit[] = [];
 
+	// 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;")
@@ -351,147 +380,103 @@
 			.replace(/'/g, "&#039;");
 	}
 
-	function stripProviderTrailer(text: string): string {
-		return text.replace(/\n?<!--AJ_PODCAST_PROVIDERS:[\s\S]*?(?:-->|$)/g, "");
-	}
-
-	function formatAiMarkdown(rawText: string): string {
-		const cleaned = stripProviderTrailer(rawText)
-			.replace(/http:\/\/localhost:\d+/g, "")
-			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g, "[$1]($2)");
-		let html = escapeHtml(cleaned);
-		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
-		html = html.replace(
-			/\[([^\]]+)\]\(([^)]+)\)/g,
-			"<a href='$2' class='text-primary font-semibold hover:underline'>$1</a>",
-		);
-		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
-		html = html.replace(/\n/g, "<br />");
-		return html;
-	}
-
-	function setMode(mode: "search" | "ai", autoRunAi = false) {
-		currentMode = mode;
-		const isAi = mode === "ai";
-
-		modeSearchBtn?.setAttribute("aria-pressed", String(!isAi));
-		modeAiBtn?.setAttribute("aria-pressed", String(isAi));
-
-		if (isAi) {
-			modeAiBtn?.classList.add("bg-primary", "text-primary-foreground", "shadow-2xs");
-			modeAiBtn?.classList.remove("text-muted-foreground");
-			modeSearchBtn?.classList.remove("bg-primary", "text-primary-foreground", "shadow-2xs");
-			modeSearchBtn?.classList.add("text-muted-foreground");
-		} else {
-			modeSearchBtn?.classList.add("bg-primary", "text-primary-foreground", "shadow-2xs");
-			modeSearchBtn?.classList.remove("text-muted-foreground");
-			modeAiBtn?.classList.remove("bg-primary", "text-primary-foreground", "shadow-2xs");
-			modeAiBtn?.classList.add("text-muted-foreground");
-		}
-
-		filterBar?.classList.toggle("hidden", isAi);
-		searchView?.classList.toggle("hidden", isAi);
-		aiView?.classList.toggle("hidden", !isAi);
-		aiSubmitBtn?.classList.toggle("hidden", !isAi);
-		iconSearch?.classList.toggle("hidden", isAi);
-		iconAi?.classList.toggle("hidden", !isAi);
-
-		if (input) {
-			input.placeholder = isAi
-				? "Ask Agent AJ anything about CodingCat.dev... (Press Enter)"
-				: "Search posts, podcasts, authors... (⌘K)";
-			input.focus();
-		}
-
-		if (isAi && autoRunAi && input?.value.trim()) {
-			runAiQuery(input.value.trim());
-		} else if (!isAi && input?.value.trim()) {
-			performSearch(input.value.trim(), currentType);
-		}
-	}
-
-	async function runAiQuery(prompt: string) {
-		const trimmed = prompt.trim();
-		if (!trimmed) return;
-
-		if (aiAbortController) aiAbortController.abort();
-		aiAbortController = new AbortController();
-
-		aiWelcome?.classList.add("hidden");
-		if (aiOutput) {
-			aiOutput.classList.remove("hidden");
-			aiOutput.textContent = "Agent AJ is thinking...";
-		}
-		if (spinner) spinner.classList.remove("hidden");
-		if (countView) countView.textContent = "Streaming AI...";
-
+	function renderRecentSections() {
+		// 1. Recently Asked
 		try {
-			const res = await fetch("/api/chat", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ prompt: trimmed }),
-				signal: aiAbortController.signal,
-			});
-
-			const source = res.headers.get("x-aj-extraction-source") || "clairic";
-			const cascadeMode = res.headers.get("x-aj-cascade-mode") || "clairic-fastpath";
-			const intent = res.headers.get("x-aj-intent") || "topic_search";
-			const latency = res.headers.get("x-aj-extraction-latency-ms") || "0";
-
-			if (aiTelemetry && aiTelemetryText) {
-				aiTelemetry.classList.remove("hidden");
-				aiTelemetryText.textContent = `⚡ @cf/cloudflare/clairic • source: ${source} • mode: ${cascadeMode} • intent: ${intent} (${latency}ms)`;
-			}
-			if (clairicBadge) {
-				clairicBadge.classList.remove("hidden");
-				clairicBadge.textContent = `⚡ ${source}: ${intent} (${latency}ms)`;
-			}
-
-			if (!res.ok || !res.body) {
-				if (aiOutput) aiOutput.textContent = "Failed to generate AI response.";
-				return;
+			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 {}
 
-			let accumulated = "";
-			const reader = res.body.getReader();
-			const decoder = new TextDecoder();
-
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-				accumulated += decoder.decode(value, { stream: true });
-				if (aiOutput) {
-					aiOutput.textContent = stripProviderTrailer(accumulated);
+		// 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 {}
+	}
 
-			if (aiOutput) {
-				aiOutput.innerHTML = formatAiMarkdown(accumulated);
-			}
-			if (countView) countView.textContent = "AI answer ready";
-		} catch (err: unknown) {
-			if (err instanceof Error && err.name === "AbortError") return;
-			if (aiOutput) {
-				aiOutput.textContent = `Error: ${err instanceof Error ? err.message : String(err)}`;
-			}
-		} finally {
-			if (spinner) spinner.classList.add("hidden");
+	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, mode: "search" | "ai" = "search") {
+	function openModal(initialQuery?: string) {
 		if (!modal) return;
+		renderRecentSections();
 		if (!modal.open) {
 			modal.showModal();
 			document.body.style.overflow = "hidden";
 		}
 		if (typeof initialQuery === "string" && input) {
 			input.value = initialQuery;
-			clearBtn?.classList.toggle("hidden", !initialQuery);
+			handleInput();
+		} else {
+			highlightActive(0);
 		}
-		setMode(mode, mode === "ai" && Boolean(initialQuery));
-		setTimeout(() => input?.focus(), 50);
+		setTimeout(() => input?.focus(), 40);
 	}
 
 	function closeModal() {
@@ -502,40 +487,11 @@
 		}
 	}
 
-	// Expose to window for triggers from header or ChatModal
-	(window as unknown as { openSearchModal?: (q?: string, mode?: "search" | "ai") => void }).openSearchModal = openModal;
-
-	modeSearchBtn?.addEventListener("click", () => setMode("search"));
-	modeAiBtn?.addEventListener("click", () => setMode("ai", true));
-	askAiCtaBtn?.addEventListener("click", () => setMode("ai", true));
+	(window as unknown as { openSearchModal?: (q?: string) => void }).openSearchModal =
+		openModal;
 
-	openFullChatBtn?.addEventListener("click", () => {
-		const q = input?.value.trim() || "";
-		closeModal();
-		const win = window as unknown as { openAgentAjModal?: (prompt?: string) => void };
-		if (win.openAgentAjModal) {
-			win.openAgentAjModal(q);
-		} else {
-			document.getElementById("ai-chat-open-btn")?.click();
-		}
-	});
-
-	document.querySelectorAll(".modal-ai-chip").forEach((chip) => {
-		chip.addEventListener("click", () => {
-			const prompt = chip.getAttribute("data-prompt");
-			if (prompt && input) {
-				input.value = prompt;
-				clearBtn?.classList.remove("hidden");
-				runAiQuery(prompt);
-			}
-		});
-	});
-
-	form?.addEventListener("submit", (e) => {
-		e.preventDefault();
-		if (currentMode === "ai" && input?.value.trim()) {
-			runAiQuery(input.value.trim());
-		}
+	askAgentBtn?.addEventListener("click", () => {
+		triggerAskAgent();
 	});
 
 	// Global keyboard shortcuts (⌘K or Ctrl+K)
@@ -571,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 = "";
 
@@ -599,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>
 			`;
 
@@ -616,40 +609,37 @@
 		});
 
 		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");
-			if (askAiCta) askAiCta.classList.add("hidden");
-			if (clairicBadge) clairicBadge.classList.add("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;
 		}
 
-		if (askAiCta && askAiQuerySpan) {
-			askAiQuerySpan.textContent = `"${trimmed}"`;
-			askAiCta.classList.remove("hidden");
-		}
+		filterBar?.classList.remove("hidden");
+		filterBar?.classList.add("flex");
 
 		if (abortController) abortController.abort();
 		abortController = new AbortController();
@@ -657,9 +647,12 @@
 		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;
@@ -677,16 +670,21 @@
 
 			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;
@@ -698,20 +696,14 @@
 	function handleInput() {
 		const val = input?.value ?? "";
 		if (clearBtn) clearBtn.classList.toggle("hidden", !val);
-
-		if (currentMode === "ai") {
-			if (!val.trim()) {
-				aiWelcome?.classList.remove("hidden");
-				aiOutput?.classList.add("hidden");
-				aiTelemetry?.classList.add("hidden");
-			}
-			return;
+		if (askAgentQuerySpan) {
+			askAgentQuerySpan.textContent = val.trim() ? `: "${val.trim()}"` : "";
 		}
 
 		if (debounceTimer) clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			performSearch(val, currentType);
-		}, 200);
+		}, 180);
 	}
 
 	input?.addEventListener("input", handleInput);
@@ -724,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;
 		}
 	});
 
@@ -746,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/search.astro b/apps/site/src/pages/search.astro
index 56a6977e..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">
@@ -22,33 +22,25 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			</p>
 		</header>
 
-		<!-- Search Input Bar & Mode Switcher -->
-		<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full max-w-4xl">
-			<form id="search-page-form" class="relative flex-1" onsubmit="return false">
+		<!-- Search Input Bar -->
+		<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 id="search-page-icon-search" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<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>
-						<img id="search-page-icon-ai" src="/icon.svg" alt="" class="hidden size-5 object-contain" width="20" height="20" />
 					</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-24 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"
+						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="submit"
-						id="search-ai-submit-btn"
-						class="hidden absolute right-10 rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:opacity-90 transition-opacity cursor-pointer"
-					>
-						Ask AI
-					</button>
 					<button
 						type="button"
 						id="search-clear-btn"
@@ -63,30 +55,37 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 				</div>
 			</form>
 
-			<!-- Search vs Ask AI Mode Toggle -->
-			<div class="inline-flex items-center self-start sm:self-auto rounded-xl border border-border bg-card p-1 shadow-xs" role="group" aria-label="Search or AI mode">
-				<button
-					type="button"
-					id="search-mode-search-btn"
-					class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
-					aria-pressed="true"
-				>
-					<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<circle cx="11" cy="11" r="8"></circle>
-						<path d="m21 21-4.3-4.3"></path>
+			<!-- 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>
-					<span>Search</span>
-				</button>
-				<button
-					type="button"
-					id="search-mode-ai-btn"
-					class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer"
-					aria-pressed="false"
-				>
-					<img src="/icon.svg" alt="" class="size-3.5 object-contain" width="14" height="14" />
-					<span>Ask AI (Clairic)</span>
-				</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 -->
@@ -133,38 +132,15 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 		<!-- Status & Summary Line -->
 		<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">
-			<div class="flex items-center gap-2">
-				<span id="search-count-text"></span>
-				<button
-					type="button"
-					id="search-switch-to-ai-inline"
-					class="hidden text-xs font-semibold text-primary hover:underline cursor-pointer"
-				>
-					✨ Ask Agent AJ about this →
-				</button>
-			</div>
+			<span id="search-count-text"></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>
 
-		<!-- AI Mode Response Panel -->
-		<div id="search-ai-panel" class="hidden flex-col gap-3 max-w-4xl my-2">
-			<div id="search-ai-telemetry-bar" class="hidden flex flex-wrap items-center justify-between gap-2 rounded-xl border border-primary/25 bg-primary/5 px-4 py-2 text-xs">
-				<span id="search-ai-telemetry-text" class="font-mono text-primary font-semibold"></span>
-				<span class="text-[11px] text-muted-foreground">Extract → Route → Synthesize Cascade</span>
-			</div>
-			<div
-				id="search-ai-output"
-				class="rounded-2xl border border-border bg-card p-5 sm:p-6 shadow-xs text-sm sm:text-base leading-relaxed text-foreground"
-			>
-				Type a question above and press Enter (or click <strong>Ask AI</strong>) to get an AI answer grounded in the Sanity Content Lake.
-			</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>
@@ -173,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>
@@ -192,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>
@@ -200,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>
@@ -223,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>
@@ -233,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>
 
@@ -273,19 +249,9 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 	const input = document.getElementById("search-input") as HTMLInputElement | null;
 	const clearBtn = document.getElementById("search-clear-btn");
 	const statusCount = document.getElementById("search-count-text");
-	const searchPageForm = document.getElementById("search-page-form") as HTMLFormElement | null;
-	const searchIconEl = document.getElementById("search-page-icon-search");
-	const aiIconEl = document.getElementById("search-page-icon-ai");
-	const aiSubmitBtn = document.getElementById("search-ai-submit-btn");
-	const modeSearchBtn = document.getElementById("search-mode-search-btn");
-	const modeAiBtn = document.getElementById("search-mode-ai-btn");
-	const switchToAiInlineBtn = document.getElementById("search-switch-to-ai-inline");
+	const askAgentBtn = document.getElementById("search-mode-ai-btn");
+	const askAgentQuerySpan = document.getElementById("search-ask-agent-query");
 	const clairicPill = document.getElementById("search-clairic-pill");
-	const filterToolbar = document.getElementById("search-filter-toolbar");
-	const aiPanel = document.getElementById("search-ai-panel");
-	const aiTelemetryBar = document.getElementById("search-ai-telemetry-bar");
-	const aiTelemetryText = document.getElementById("search-ai-telemetry-text");
-	const aiOutput = document.getElementById("search-ai-output");
 
 	const stateReady = document.getElementById("state-ready");
 	const stateLoading = document.getElementById("state-loading");
@@ -296,175 +262,23 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 	let selectedType: string = "all";
 	let currentQuery: string = "";
-	let pageMode: "search" | "ai" = "search";
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let currentAbortController: AbortController | null = null;
-	let aiAbortController: AbortController | null = null;
 
-	function showState(state: "ready" | "loading" | "error" | "no-results" | "results" | "ai") {
+	function showState(state: "ready" | "loading" | "error" | "no-results" | "results") {
 		if (stateReady) stateReady.classList.toggle("hidden", state !== "ready");
 		if (stateLoading) stateLoading.classList.toggle("hidden", state !== "loading");
 		if (stateError) stateError.classList.toggle("hidden", state !== "error");
 		if (stateNoResults) stateNoResults.classList.toggle("hidden", state !== "no-results");
 		if (resultsList) resultsList.classList.toggle("hidden", state !== "results");
-		if (aiPanel) {
-			aiPanel.classList.toggle("hidden", state !== "ai");
-			aiPanel.classList.toggle("flex", state === "ai");
-		}
-	}
-
-	function escapeHtml(text: string): string {
-		return text
-			.replace(/&/g, "&amp;")
-			.replace(/</g, "&lt;")
-			.replace(/>/g, "&gt;")
-			.replace(/"/g, "&quot;")
-			.replace(/'/g, "&#039;");
-	}
-
-	function formatAiMarkdown(rawText: string): string {
-		const cleaned = rawText
-			.replace(/\n?<!--AJ_PODCAST_PROVIDERS:[\s\S]*?(?:-->|$)/g, "")
-			.replace(/http:\/\/localhost:\d+/g, "");
-		let html = escapeHtml(cleaned);
-		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
-		html = html.replace(
-			/\[([^\]]+)\]\(([^)]+)\)/g,
-			"<a href='$2' class='text-primary font-semibold hover:underline'>$1</a>",
-		);
-		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
-		html = html.replace(/\n/g, "<br />");
-		return html;
-	}
-
-	async function askSearchPageAi(prompt: string) {
-		const trimmed = prompt.trim();
-		if (!trimmed || !aiOutput) return;
-
-		if (aiAbortController) {
-			aiAbortController.abort();
-		}
-		aiAbortController = new AbortController();
-
-		showState("ai");
-		aiOutput.innerHTML = `<span class="text-muted-foreground animate-pulse">⚡ Extracting intent with @cf/cloudflare/clairic &amp; querying Sanity Content Lake...</span>`;
-		if (aiTelemetryBar) aiTelemetryBar.classList.add("hidden");
-
-		try {
-			const res = await fetch("/api/chat", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ prompt: trimmed }),
-				signal: aiAbortController.signal,
-			});
-
-			const extSource = res.headers.get("x-aj-extraction-source") || "clairic";
-			const extIntent = res.headers.get("x-aj-intent") || "topic_search";
-			const extLatency = res.headers.get("x-aj-extraction-latency-ms") || "0";
-			const cascadeMode = res.headers.get("x-aj-cascade-mode") || "clairic-fastpath";
-
-			if (aiTelemetryBar && aiTelemetryText) {
-				aiTelemetryText.textContent = `⚡ ${extSource.toUpperCase()} (${extLatency}ms) • intent=${extIntent} • mode=${cascadeMode}`;
-				aiTelemetryBar.classList.remove("hidden");
-			}
-			if (clairicPill) {
-				clairicPill.textContent = `⚡ ${extSource}: ${extIntent} (${extLatency}ms)`;
-				clairicPill.classList.remove("hidden");
-			}
-
-			if (!res.ok || !res.body) {
-				aiOutput.textContent = "Agent AJ is currently unavailable. Switch back to Search mode to browse results.";
-				return;
-			}
-
-			let accumulated = "";
-			const reader = res.body.getReader();
-			const decoder = new TextDecoder();
-
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-				accumulated += decoder.decode(value, { stream: true });
-				aiOutput.innerHTML = formatAiMarkdown(accumulated);
-			}
-		} catch (err: unknown) {
-			if (err instanceof Error && err.name === "AbortError") return;
-			aiOutput.textContent = "Connection error while contacting Agent AJ.";
-		}
-	}
-
-	function setPageMode(nextMode: "search" | "ai", autoTriggerAi = false) {
-		pageMode = nextMode;
-		const isAi = nextMode === "ai";
-
-		if (modeSearchBtn && modeAiBtn) {
-			modeSearchBtn.setAttribute("aria-pressed", String(!isAi));
-			modeAiBtn.setAttribute("aria-pressed", String(isAi));
-			modeSearchBtn.className = !isAi
-				? "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
-				: "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer";
-			modeAiBtn.className = isAi
-				? "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold bg-primary text-primary-foreground shadow-2xs transition-all cursor-pointer"
-				: "inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground transition-all cursor-pointer";
-		}
-
-		if (searchIconEl && aiIconEl) {
-			searchIconEl.classList.toggle("hidden", isAi);
-			aiIconEl.classList.toggle("hidden", !isAi);
-		}
-		if (aiSubmitBtn) {
-			aiSubmitBtn.classList.toggle("hidden", !isAi);
-		}
-		if (filterToolbar) {
-			filterToolbar.classList.toggle("hidden", isAi);
-		}
-		if (switchToAiInlineBtn) {
-			switchToAiInlineBtn.classList.toggle("hidden", isAi || !currentQuery.trim());
-		}
-		if (input) {
-			input.placeholder = isAi
-				? "Ask Agent AJ anything (e.g. 'What is the latest podcast?')..."
-				: "Search for your purr-fect thing!";
-		}
-
-		const url = new URL(window.location.href);
-		if (isAi) {
-			url.searchParams.set("mode", "ai");
-		} else {
-			url.searchParams.delete("mode");
-		}
-		window.history.replaceState({}, "", url.toString());
-
-		if (isAi) {
-			if (statusCount) statusCount.textContent = "Ask AI (Clairic System-One Cascade)";
-			showState("ai");
-			if (autoTriggerAi && currentQuery.trim().length >= 2) {
-				askSearchPageAi(currentQuery);
-			}
-		} else {
-			if (currentQuery.trim().length >= 2) {
-				performSearch(currentQuery, selectedType);
-			} else {
-				showState("ready");
-			}
-		}
 	}
 
-	modeSearchBtn?.addEventListener("click", () => setPageMode("search"));
-	modeAiBtn?.addEventListener("click", () => setPageMode("ai", true));
-	switchToAiInlineBtn?.addEventListener("click", () => setPageMode("ai", true));
-
-	searchPageForm?.addEventListener("submit", (e) => {
-		e.preventDefault();
-		const val = input?.value.trim() ?? "";
-		if (!val) return;
-		currentQuery = val;
-		if (pageMode === "ai") {
-			askSearchPageAi(val);
-		} else {
-			performSearch(val, selectedType);
-		}
+	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 } {
@@ -537,11 +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");
-			if (switchToAiInlineBtn) switchToAiInlineBtn.classList.add("hidden");
 			return;
 		}
 
@@ -569,13 +385,10 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 				clairicPill.textContent = `⚡ ${data.extraction.source}: ${data.extraction.intent} (${data.extraction.latencyMs}ms)`;
 				clairicPill.classList.remove("hidden");
 			}
-			if (switchToAiInlineBtn) {
-				switchToAiInlineBtn.classList.remove("hidden");
-			}
 
 			if (hits.length === 0) {
 				if (noResultsText) {
-					noResultsText.textContent = `No matches found for "${trimmed}". Try different keywords or switch to Ask AI (Clairic) above.`;
+					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";
@@ -604,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()) {
@@ -613,10 +429,6 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		}
 		window.history.replaceState({}, "", url.toString());
 
-		if (pageMode === "ai") {
-			return;
-		}
-
 		if (debounceTimer) clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			performSearch(currentQuery, selectedType);
@@ -672,13 +484,13 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 		input.value = initialQuery;
 		currentQuery = initialQuery;
 		if (clearBtn) clearBtn.classList.remove("hidden");
+		performSearch(initialQuery, selectedType);
 		if (initialMode === "ai") {
-			setPageMode("ai", true);
-		} else {
-			performSearch(initialQuery, selectedType);
+			const win = window as unknown as {
+				openAgentAjDrawer?: (prompt?: string) => void;
+			};
+			win.openAgentAjDrawer?.(initialQuery);
 		}
-	} else if (initialMode === "ai") {
-		setPageMode("ai", false);
 	} 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 f5818210..7cf45e02 100644
--- a/apps/site/tests/tier1-features.test.mjs
+++ b/apps/site/tests/tier1-features.test.mjs
@@ -1858,8 +1858,22 @@ describe("Tier 1 - Feature Coverage", () => {
 			);
 			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",

From dcb0b111ed8d1225d20089705f0c350c7a9fcadc Mon Sep 17 00:00:00 2001
From: Alex Patterson <alex@flipfeeds.com>
Date: Thu, 22 Oct 2026 01:12:59 -0400
Subject: [PATCH 4/5] fix(site): keep Ask Agent drawer persistently open across
 page changes via soft-nav and head pre-paint sync

---
 apps/site/src/components/ChatModal.astro      | 320 ++++++++++++++++--
 apps/site/src/components/Header.astro         |  27 ++
 apps/site/src/components/SearchModal.astro    |  23 +-
 .../site/src/components/TranscriptModal.astro |   7 +-
 apps/site/src/layouts/BaseLayout.astro        |  18 +
 apps/site/src/styles/global.css               |   8 +-
 6 files changed, 366 insertions(+), 37 deletions(-)

diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index 5a20f17a..33ef180f 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -1,16 +1,16 @@
 ---
-// ChatModal.astro — Persistent Right-Side Resizable "Ask Agent" Drawer (Desktop resizable side panel, Mobile full-screen drawer)
+// ChatModal.astro — Persistent Right-Side Resizable "Ask Agent" Drawer (Survives across page changes via soft-navigation + pre-paint storage sync)
 ---
 
 <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"
+	class="hidden fixed top-0 right-0 bottom-0 z-50 w-full sm:w-[var(--aj-drawer-width,420px)] flex-col border-l border-border bg-card text-foreground shadow-2xl select-none sm: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"
+		class="hidden sm: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"
 	>
@@ -152,20 +152,17 @@
 			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";
+			var isOpen =
+				localStorage.getItem("cc_aj_drawer_open") === "true" ||
+				sessionStorage.getItem("cc_aj_drawer_open") === "true";
 
-			if (isOpen && (isDesktop || forceMobileOpen)) {
+			if (isOpen) {
 				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");
 				}
+				document.documentElement.classList.add("aj-drawer-open");
 			}
 		} catch (e) {}
 	})();
@@ -202,10 +199,28 @@
 
 	let isStreaming = false;
 	let storedMessages: StoredMessage[] = [];
+	let loadedModuleScripts = new Set<string>();
+	document.querySelectorAll('script[type="module"][src]').forEach((s) => {
+		const src = s.getAttribute("src");
+		if (src) loadedModuleScripts.add(new URL(src, window.location.origin).pathname);
+	});
+
+	function isDrawerSavedOpen(): boolean {
+		try {
+			return (
+				localStorage.getItem(STORAGE_OPEN_KEY) === "true" ||
+				sessionStorage.getItem(STORAGE_OPEN_KEY) === "true"
+			);
+		} catch {
+			return false;
+		}
+	}
 
 	function loadStoredMessages(): StoredMessage[] {
 		try {
-			const raw = localStorage.getItem(STORAGE_MESSAGES_KEY);
+			const raw =
+				localStorage.getItem(STORAGE_MESSAGES_KEY) ||
+				sessionStorage.getItem(STORAGE_MESSAGES_KEY);
 			if (!raw) return [];
 			const parsed = JSON.parse(raw);
 			return Array.isArray(parsed) ? parsed.slice(-30) : [];
@@ -215,11 +230,12 @@
 	}
 
 	function saveStoredMessages() {
+		const serialized = JSON.stringify(storedMessages.slice(-30));
 		try {
-			localStorage.setItem(
-				STORAGE_MESSAGES_KEY,
-				JSON.stringify(storedMessages.slice(-30)),
-			);
+			localStorage.setItem(STORAGE_MESSAGES_KEY, serialized);
+		} catch {}
+		try {
+			sessionStorage.setItem(STORAGE_MESSAGES_KEY, serialized);
 		} catch {}
 	}
 
@@ -247,10 +263,13 @@
 			try {
 				localStorage.setItem(STORAGE_OPEN_KEY, "true");
 			} catch {}
+			try {
+				sessionStorage.setItem(STORAGE_OPEN_KEY, "true");
+			} catch {}
 			if (initialPrompt && input) {
 				input.value = initialPrompt;
 				submitPrompt(initialPrompt);
-			} else {
+			} else if (!initialPrompt) {
 				setTimeout(() => input?.focus(), 30);
 			}
 		} else {
@@ -260,23 +279,236 @@
 			try {
 				localStorage.setItem(STORAGE_OPEN_KEY, "false");
 			} catch {}
+			try {
+				sessionStorage.setItem(STORAGE_OPEN_KEY, "false");
+			} catch {}
 		}
 		window.dispatchEvent(
 			new CustomEvent("aj-drawer-change", { detail: { open } }),
 		);
 	}
 
+	function syncDrawerFromStorage() {
+		if (isDrawerSavedOpen()) {
+			drawer?.classList.remove("hidden");
+			drawer?.classList.add("flex");
+			document.documentElement.classList.add("aj-drawer-open");
+		}
+	}
+
+	// Ensure drawer open state is enforced on module execution and bfcache restore
+	syncDrawerFromStorage();
+	window.addEventListener("pageshow", syncDrawerFromStorage);
+	window.addEventListener("storage", (e) => {
+		if (e.key === STORAGE_OPEN_KEY) {
+			syncDrawerFromStorage();
+		}
+	});
+
 	function toggleDrawer() {
-		const isOpen = drawer && !drawer.classList.contains("hidden");
+		const isOpen =
+			document.documentElement.classList.contains("aj-drawer-open") ||
+			(drawer && !drawer.classList.contains("hidden"));
 		setDrawerOpen(!isOpen);
 	}
 
+	// Soft-navigation helper so page changes swap <main> without unmounting the Ask Agent drawer
+	let navAbortController: AbortController | null = null;
+
+	async function navigateInPlace(rawUrl: string | URL, pushState = true): Promise<boolean> {
+		try {
+			const targetUrl = new URL(rawUrl, window.location.origin);
+			if (targetUrl.origin !== window.location.origin) {
+				return false;
+			}
+			const path = targetUrl.pathname;
+			if (
+				path.startsWith("/api/") ||
+				path.startsWith("/oauth") ||
+				path.startsWith("/.well-known/") ||
+				/\.(xml|json|md|txt|png|jpg|jpeg|svg|ico|pdf|mp3)$/i.test(path)
+			) {
+				return false;
+			}
+
+			// If same pathname & search & only hash changed, let browser scroll to hash
+			if (
+				targetUrl.pathname === window.location.pathname &&
+				targetUrl.search === window.location.search &&
+				targetUrl.hash
+			) {
+				return false;
+			}
+
+			if (navAbortController) {
+				navAbortController.abort();
+			}
+			navAbortController = new AbortController();
+
+			const res = await fetch(targetUrl.href, {
+				headers: { Accept: "text/html" },
+				signal: navAbortController.signal,
+			});
+			if (!res.ok || !res.headers.get("content-type")?.includes("text/html")) {
+				window.location.href = targetUrl.href;
+				return true;
+			}
+
+			const html = await res.text();
+			const doc = new DOMParser().parseFromString(html, "text/html");
+			const newMain = doc.querySelector("main");
+			const currentMain = document.querySelector("main");
+
+			if (!newMain || !currentMain) {
+				window.location.href = targetUrl.href;
+				return true;
+			}
+
+			// Swap <main> content while keeping <aside id="aj-agent-drawer"> completely untouched
+			currentMain.replaceWith(newMain);
+
+			// Update document title & canonical URL
+			if (doc.title) {
+				document.title = doc.title;
+			}
+			const newCanonical = doc.querySelector('link[rel="canonical"]')?.getAttribute("href");
+			const curCanonical = document.querySelector('link[rel="canonical"]');
+			if (newCanonical && curCanonical) {
+				curCanonical.setAttribute("href", newCanonical);
+			}
+
+			// Update header nav active states
+			const newHeaderNav = doc.querySelector("#site-header nav");
+			const curHeaderNav = document.querySelector("#site-header nav");
+			if (newHeaderNav && curHeaderNav) {
+				curHeaderNav.innerHTML = newHeaderNav.innerHTML;
+			}
+
+			// Close SearchModal or mobile nav drawer if open
+			const searchDialog = document.getElementById("search-modal") as HTMLDialogElement | null;
+			if (searchDialog?.open) {
+				searchDialog.close();
+				document.body.style.overflow = "";
+			}
+			const mobileNav = document.getElementById("nav-drawer");
+			if (mobileNav && !mobileNav.hidden) {
+				mobileNav.hidden = true;
+				document.body.style.overflow = "";
+			}
+
+			if (pushState) {
+				window.history.pushState({}, "", targetUrl.href);
+			}
+			if (targetUrl.hash) {
+				const hashEl = document.querySelector(targetUrl.hash);
+				hashEl?.scrollIntoView();
+			} else {
+				window.scrollTo({ top: 0, behavior: "instant" as ScrollBehavior });
+			}
+
+			// Load any new page-level module scripts not yet loaded (e.g. search.astro, TranscriptModal)
+			doc.querySelectorAll('script[type="module"][src]').forEach((s) => {
+				const src = s.getAttribute("src");
+				if (!src) return;
+				const pathname = new URL(src, window.location.origin).pathname;
+				if (!loadedModuleScripts.has(pathname)) {
+					loadedModuleScripts.add(pathname);
+					const scriptEl = document.createElement("script");
+					scriptEl.type = "module";
+					scriptEl.src = src;
+					document.head.appendChild(scriptEl);
+				}
+			});
+
+			// Re-ensure drawer stays open if saved open
+			syncDrawerFromStorage();
+
+			// Notify page widgets (e.g. TranscriptModal, Recently Viewed tracker)
+			window.dispatchEvent(new CustomEvent("cc:page-load"));
+			return true;
+		} catch (err: unknown) {
+			if (err instanceof Error && err.name === "AbortError") {
+				return true;
+			}
+			return false;
+		}
+	}
+
+	// Intercept internal link clicks across the document so the drawer stays open without page reload
+	document.addEventListener("click", (e: MouseEvent) => {
+		if (
+			e.defaultPrevented ||
+			e.button !== 0 ||
+			e.metaKey ||
+			e.ctrlKey ||
+			e.shiftKey ||
+			e.altKey
+		) {
+			return;
+		}
+
+		const anchor = (e.target as Element | null)?.closest?.("a[href]") as HTMLAnchorElement | null;
+		if (!anchor) return;
+		if (
+			anchor.target &&
+			anchor.target !== "_self"
+		) {
+			return;
+		}
+		if (anchor.hasAttribute("download") || anchor.getAttribute("rel") === "external") {
+			return;
+		}
+
+		const href = anchor.getAttribute("href");
+		if (!href || href.startsWith("#") || href.startsWith("mailto:") || href.startsWith("tel:") || href.startsWith("javascript:")) {
+			return;
+		}
+
+		// Normalize any hardcoded codingcat.dev links inside the drawer to current origin
+		let resolvedHref = href;
+		if (anchor.closest("#aj-agent-drawer")) {
+			resolvedHref = href.replace(
+				/^https?:\/\/(?:www\.|dev\.)?codingcat\.dev(\/|$)/i,
+				"/",
+			);
+		}
+
+		let targetUrl: URL;
+		try {
+			targetUrl = new URL(resolvedHref, window.location.origin);
+		} catch {
+			return;
+		}
+
+		if (targetUrl.origin !== window.location.origin) {
+			return;
+		}
+
+		const path = targetUrl.pathname;
+		if (
+			path.startsWith("/api/") ||
+			path.startsWith("/oauth") ||
+			path.startsWith("/.well-known/") ||
+			/\.(xml|json|md|txt|png|jpg|jpeg|svg|ico|pdf|mp3)$/i.test(path)
+		) {
+			return;
+		}
+
+		e.preventDefault();
+		navigateInPlace(targetUrl, true);
+	});
+
+	window.addEventListener("popstate", () => {
+		navigateInPlace(window.location.href, false);
+	});
+
 	// Expose global APIs for SearchModal, Header, and pages
 	(
 		window as unknown as {
 			openAgentAjModal?: (prompt?: string) => void;
 			openAgentAjDrawer?: (prompt?: string) => void;
 			toggleAgentAjDrawer?: () => void;
+			navigateWithDrawer?: (url: string) => Promise<boolean>;
 		}
 	).openAgentAjModal = (prompt?: string) => setDrawerOpen(true, prompt);
 	(
@@ -289,6 +521,11 @@
 			toggleAgentAjDrawer?: () => void;
 		}
 	).toggleAgentAjDrawer = toggleDrawer;
+	(
+		window as unknown as {
+			navigateWithDrawer?: (url: string) => Promise<boolean>;
+		}
+	).navigateWithDrawer = (url: string) => navigateInPlace(url, true);
 
 	closeBtn?.addEventListener("click", () => setDrawerOpen(false));
 
@@ -312,7 +549,7 @@
 		let isResizing = false;
 
 		resizeHandle.addEventListener("pointerdown", (e: PointerEvent) => {
-			if (window.innerWidth < 768) return;
+			if (window.innerWidth < 640) return;
 			isResizing = true;
 			resizeHandle.setPointerCapture(e.pointerId);
 			document.body.style.cursor = "col-resize";
@@ -323,7 +560,7 @@
 			if (!isResizing) return;
 			const newWidth = Math.min(
 				Math.max(window.innerWidth - e.clientX, 320),
-				Math.min(780, window.innerWidth - 280),
+				Math.min(780, window.innerWidth - 240),
 			);
 			document.documentElement.style.setProperty(
 				"--aj-drawer-width",
@@ -402,6 +639,12 @@
 		return text.replace(/\n?<!--AJ_PODCAST_PROVIDERS:[\s\S]*?(?:-->|$)/g, "");
 	}
 
+	function normalizeInternalPath(url: string): string {
+		return url
+			.replace(/^https?:\/\/(?:www\.|dev\.)?codingcat\.dev(?=\/|$)/i, "")
+			.replace(/^https?:\/\/[a-z0-9-]+-codingcatdev-dev\.codingcatdev\.workers\.dev(?=\/|$)/i, "");
+	}
+
 	function renderRichAssistantContent(container: HTMLElement, rawText: string) {
 		const providerMap = new Map<string, Record<string, string>>();
 		const providerItems: Array<{
@@ -418,8 +661,9 @@
 				if (Array.isArray(parsed)) {
 					for (const item of parsed) {
 						if (item?.url && item?.listenLinks) {
-							providerMap.set(item.url, item.listenLinks);
-							providerItems.push(item);
+							const normUrl = normalizeInternalPath(item.url);
+							providerMap.set(normUrl, item.listenLinks);
+							providerItems.push({ ...item, url: normUrl });
 						}
 					}
 				}
@@ -428,6 +672,7 @@
 
 		let cleanedText = stripProviderTrailer(rawText)
 			.replace(/http:\/\/localhost:\d+/g, "")
+			.replace(/https?:\/\/(?:www\.|dev\.)?codingcat\.dev(?=\/)/gi, "")
 			.replace(
 				/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g,
 				"[$1]($2)",
@@ -445,7 +690,7 @@
 		}
 
 		const internalLinkRegex =
-			/\[([^\]]+)\]\(((\/(?:podcast|post)\/[a-zA-Z0-9_\-]+))\)/gi;
+			/\[([^\]]+)\]\(((\/(?:podcast|post)\/[a-zA-Z0-9_\-.]+))\)/gi;
 		const internalLinks: Array<{
 			title: string;
 			url: string;
@@ -483,10 +728,10 @@
 			/^[ \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,
-			(_match, label, href) => {
+			(_match, label, rawHref) => {
+				const href = normalizeInternalPath(rawHref);
 				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>`
@@ -661,6 +906,12 @@
 			text: prompt,
 			timestamp: Date.now(),
 		});
+		const assistantEntry: StoredMessage = {
+			role: "assistant",
+			text: "Thinking...",
+			timestamp: Date.now(),
+		};
+		storedMessages.push(assistantEntry);
 		saveStoredMessages();
 
 		appendMessageElement("user", prompt);
@@ -683,6 +934,7 @@
 			const extLatency = res.headers.get("x-aj-extraction-latency-ms");
 			if (extSource && extIntent) {
 				telemetryLabel = `⚡ ${extSource}: ${extIntent} (${extLatency ?? "0"}ms)`;
+				assistantEntry.telemetry = telemetryLabel;
 				if (telemetryEl) {
 					telemetryEl.textContent = telemetryLabel;
 					telemetryEl.classList.remove("hidden");
@@ -699,11 +951,15 @@
 				};
 				const errText = `Error: ${errorJson.error || "Failed to generate answer"}`;
 				assistantContent.textContent = errText;
+				assistantEntry.text = errText;
+				saveStoredMessages();
 				return;
 			}
 
 			if (!res.body) {
 				assistantContent.textContent = "No response stream received.";
+				assistantEntry.text = "No response stream received.";
+				saveStoredMessages();
 				return;
 			}
 
@@ -717,6 +973,8 @@
 				const chunk = decoder.decode(value, { stream: true });
 				accumulatedText += chunk;
 				assistantContent.textContent = stripProviderTrailer(accumulatedText);
+				assistantEntry.text = accumulatedText;
+				saveStoredMessages();
 				messagesContainer?.scrollTo({
 					top: messagesContainer.scrollHeight,
 					behavior: "smooth",
@@ -724,19 +982,17 @@
 			}
 
 			renderRichAssistantContent(assistantContent, accumulatedText);
-			storedMessages.push({
-				role: "assistant",
-				text: accumulatedText,
-				telemetry: telemetryLabel || undefined,
-				timestamp: Date.now(),
-			});
+			assistantEntry.text = accumulatedText;
 			saveStoredMessages();
 			messagesContainer?.scrollTo({
 				top: messagesContainer.scrollHeight,
 				behavior: "smooth",
 			});
 		} catch (err) {
-			assistantContent.textContent = `Connection error: ${err instanceof Error ? err.message : String(err)}`;
+			const errMsg = `Connection error: ${err instanceof Error ? err.message : String(err)}`;
+			assistantContent.textContent = errMsg;
+			assistantEntry.text = errMsg;
+			saveStoredMessages();
 		} finally {
 			isStreaming = false;
 			if (sendBtn) sendBtn.disabled = false;
diff --git a/apps/site/src/components/Header.astro b/apps/site/src/components/Header.astro
index 8459e84b..2e3d32a3 100644
--- a/apps/site/src/components/Header.astro
+++ b/apps/site/src/components/Header.astro
@@ -53,6 +53,28 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 			</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>
+		<button
+			type="button"
+			id="ask-agent-header-trigger"
+			class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-[11px] uppercase tracking-wider text-foreground hover:bg-accent transition-colors border border-border/70 cursor-pointer"
+			aria-label="Ask Agent AJ"
+		>
+			<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"
+				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>
+			</svg>
+			<span class="hidden sm:inline">Ask Agent</span>
+		</button>
 		<ThemeToggle />
 		<button
 			type="button"
@@ -116,11 +138,16 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 	const openButton = document.getElementById("nav-drawer-toggle");
 	const closeButton = document.getElementById("nav-drawer-close");
 	const searchTrigger = document.getElementById("search-header-trigger");
+	const askAgentTrigger = document.getElementById("ask-agent-header-trigger");
 
 	searchTrigger?.addEventListener("click", () => {
 		(window as unknown as { openSearchModal?: () => void }).openSearchModal?.();
 	});
 
+	askAgentTrigger?.addEventListener("click", () => {
+		(window as unknown as { toggleAgentAjDrawer?: () => void }).toggleAgentAjDrawer?.();
+	});
+
 	const setOpen = (open: boolean) => {
 		if (!drawer) {
 			return;
diff --git a/apps/site/src/components/SearchModal.astro b/apps/site/src/components/SearchModal.astro
index d6d3a45b..949e782a 100644
--- a/apps/site/src/components/SearchModal.astro
+++ b/apps/site/src/components/SearchModal.astro
@@ -359,6 +359,7 @@
 	}
 
 	recordCurrentPageView();
+	window.addEventListener("cc:page-load", recordCurrentPageView);
 
 	function formatRelativeTime(timestamp: number): string {
 		const diffSec = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
@@ -730,7 +731,16 @@
 			if (activeIndex === 0) {
 				triggerAskAgent();
 			} else if (currentHits[activeIndex - 1]) {
-				window.location.href = currentHits[activeIndex - 1].href;
+				const href = currentHits[activeIndex - 1].href;
+				closeModal();
+				const win = window as unknown as {
+					navigateWithDrawer?: (url: string) => Promise<boolean>;
+				};
+				if (win.navigateWithDrawer) {
+					win.navigateWithDrawer(href);
+				} else {
+					window.location.href = href;
+				}
 			}
 		}
 	});
@@ -740,7 +750,16 @@
 		if (activeIndex === 0) {
 			triggerAskAgent();
 		} else if (currentHits[activeIndex - 1]) {
-			window.location.href = currentHits[activeIndex - 1].href;
+			const href = currentHits[activeIndex - 1].href;
+			closeModal();
+			const win = window as unknown as {
+				navigateWithDrawer?: (url: string) => Promise<boolean>;
+			};
+			if (win.navigateWithDrawer) {
+				win.navigateWithDrawer(href);
+			} else {
+				window.location.href = href;
+			}
 		}
 	});
 
diff --git a/apps/site/src/components/TranscriptModal.astro b/apps/site/src/components/TranscriptModal.astro
index 23ed9500..175e83c4 100644
--- a/apps/site/src/components/TranscriptModal.astro
+++ b/apps/site/src/components/TranscriptModal.astro
@@ -197,7 +197,9 @@ const {
 		return `${m}:${s.toString().padStart(2, "0")}`;
 	}
 
-	document.querySelectorAll(".transcript-widget").forEach((widget) => {
+	function initTranscriptWidgets() {
+	document.querySelectorAll(".transcript-widget:not([data-initialized='true'])").forEach((widget) => {
+		widget.setAttribute("data-initialized", "true");
 		const openBtn = widget.querySelector(".transcript-open-btn") as HTMLButtonElement | null;
 		const modal = widget.querySelector(".transcript-modal") as HTMLDivElement | null;
 		const closeBtn = widget.querySelector(".transcript-close-btn") as HTMLButtonElement | null;
@@ -436,4 +438,7 @@ const {
 			}
 		});
 	});
+	}
+	initTranscriptWidgets();
+	window.addEventListener("cc:page-load", initTranscriptWidgets);
 </script>
diff --git a/apps/site/src/layouts/BaseLayout.astro b/apps/site/src/layouts/BaseLayout.astro
index cc13ff37..870f0d24 100644
--- a/apps/site/src/layouts/BaseLayout.astro
+++ b/apps/site/src/layouts/BaseLayout.astro
@@ -88,6 +88,24 @@ const graph = buildGraph([
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		{/* Before the stylesheet, so the theme class is applied without a flash. */}
 		<ThemeScript />
+		{/* Restore Ask Agent drawer state before body paint so it stays open across page changes 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" ||
+						sessionStorage.getItem("cc_aj_drawer_open") === "true";
+					if (isOpen) {
+						document.documentElement.classList.add("aj-drawer-open");
+					}
+				} catch (e) {}
+			})();
+		</script>
 		<Font cssVariable="--font-inter" preload />
 		<Font cssVariable="--font-nunito" />
 		<SocialMeta
diff --git a/apps/site/src/styles/global.css b/apps/site/src/styles/global.css
index 3cccca5c..ba7d8c2e 100644
--- a/apps/site/src/styles/global.css
+++ b/apps/site/src/styles/global.css
@@ -212,8 +212,12 @@
 	line-height: 1;
 }
 
-/* Desktop Right-Side Resizable Ask Agent Drawer layout shift */
-@media (min-width: 768px) {
+/* Persistent Right-Side Resizable Ask Agent Drawer */
+html.aj-drawer-open #aj-agent-drawer {
+	display: flex !important;
+}
+
+@media (min-width: 640px) {
 	html.aj-drawer-open body {
 		padding-right: var(--aj-drawer-width, 420px);
 	}

From 1062f0e86f49f2aabaad2827c2591b3985e1d50a Mon Sep 17 00:00:00 2001
From: Alex Patterson <alex@flipfeeds.com>
Date: Thu, 22 Oct 2026 01:59:53 -0400
Subject: [PATCH 5/5] fix(site): ensure 100% Lighthouse accessibility/SEO and
 IsItAgentReady markdown/WebMCP compliance

---
 apps/site/src/components/ChatModal.astro   |  7 +++-
 apps/site/src/components/Header.astro      |  4 +-
 apps/site/src/components/SearchModal.astro |  8 ++--
 apps/site/src/lib/html-to-markdown.ts      |  4 ++
 apps/site/src/pages/search.astro           | 13 ++++++-
 apps/site/tests/tier1-features.test.mjs    | 43 +++++++++++++++-------
 6 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/apps/site/src/components/ChatModal.astro b/apps/site/src/components/ChatModal.astro
index 33ef180f..96bfc514 100644
--- a/apps/site/src/components/ChatModal.astro
+++ b/apps/site/src/components/ChatModal.astro
@@ -4,6 +4,7 @@
 
 <aside
 	id="aj-agent-drawer"
+	data-markdown-ignore="true"
 	class="hidden fixed top-0 right-0 bottom-0 z-50 w-full sm:w-[var(--aj-drawer-width,420px)] flex-col border-l border-border bg-card text-foreground shadow-2xl select-none sm:select-auto"
 	aria-label="Ask Agent AJ"
 >
@@ -71,7 +72,7 @@
 			<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>
+					<div class="font-semibold text-sm text-foreground">Agent AJ</div>
 					<p class="text-[11px] text-muted-foreground">Sanity Content Lake • Cloudflare Clairic</p>
 				</div>
 			</div>
@@ -115,14 +116,18 @@
 	<form
 		id="ai-chat-form"
 		class="border-t border-border p-3 bg-background/40 flex flex-col gap-2 shrink-0"
+		toolname="ask_agent_aj"
+		tooldescription="Ask Agent AJ questions about CodingCat.dev podcasts, tutorials, guests, and transcripts"
 	>
 		<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"
+				name="prompt"
 				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"
+				toolparamdescription="Natural language question for Agent AJ"
 			></textarea>
 		</div>
 		<div class="flex items-center justify-between px-0.5">
diff --git a/apps/site/src/components/Header.astro b/apps/site/src/components/Header.astro
index 2e3d32a3..80adac87 100644
--- a/apps/site/src/components/Header.astro
+++ b/apps/site/src/components/Header.astro
@@ -32,7 +32,7 @@ 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-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"
+			class="inline-flex min-h-8 min-w-8 items-center justify-center sm: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)"
 		>
 			<span class="inline-flex items-center gap-1.5">
@@ -56,7 +56,7 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 		<button
 			type="button"
 			id="ask-agent-header-trigger"
-			class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-[11px] uppercase tracking-wider text-foreground hover:bg-accent transition-colors border border-border/70 cursor-pointer"
+			class="inline-flex min-h-8 min-w-8 items-center justify-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-[11px] uppercase tracking-wider text-foreground hover:bg-accent transition-colors border border-border/70 cursor-pointer"
 			aria-label="Ask Agent AJ"
 		>
 			<svg
diff --git a/apps/site/src/components/SearchModal.astro b/apps/site/src/components/SearchModal.astro
index 949e782a..12377e81 100644
--- a/apps/site/src/components/SearchModal.astro
+++ b/apps/site/src/components/SearchModal.astro
@@ -222,7 +222,7 @@
 		<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">
-				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.
+				Press <kbd class="font-mono bg-muted text-foreground px-1.5 py-0.5 rounded border border-border">↵</kbd> on <strong>Ask agent</strong> above to ask Agent AJ directly.
 			</p>
 		</div>
 
@@ -238,9 +238,9 @@
 	<!-- Footer with Keyboard Hints -->
 	<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>
+			<span><kbd class="font-mono bg-muted text-foreground px-1 py-0.5 rounded border border-border">↑</kbd> <kbd class="font-mono bg-muted text-foreground px-1 py-0.5 rounded border border-border">↓</kbd> navigate</span>
+			<span><kbd class="font-mono bg-muted text-foreground px-1 py-0.5 rounded border border-border">↵</kbd> select</span>
+			<span><kbd class="font-mono bg-muted text-foreground px-1 py-0.5 rounded border border-border">esc</kbd> close</span>
 		</div>
 		<span id="modal-results-count" class="font-mono text-[11px]"></span>
 	</div>
diff --git a/apps/site/src/lib/html-to-markdown.ts b/apps/site/src/lib/html-to-markdown.ts
index 087d1695..6561f4be 100644
--- a/apps/site/src/lib/html-to-markdown.ts
+++ b/apps/site/src/lib/html-to-markdown.ts
@@ -20,6 +20,10 @@ export function htmlToMarkdown(html: string, pageUrl?: string): string {
 		.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "")
 		.replace(/<svg\b[^<]*(?:(?!<\/svg>)<[^<]*)*<\/svg>/gi, "")
 		.replace(/<dialog\b[^<]*(?:(?!<\/dialog>)<[^<]*)*<\/dialog>/gi, "")
+		.replace(
+			/<aside\b[^>]*id=["']aj-agent-drawer["'][^>]*>[\s\S]*?<\/aside>/gi,
+			"",
+		)
 		.replace(
 			/<div[^>]*class=["'][^"']*transcript-widget[^"']*["'][^>]*>[\s\S]*?<\/footer>\s*<\/div>\s*<\/div>\s*<\/div>/gi,
 			"",
diff --git a/apps/site/src/pages/search.astro b/apps/site/src/pages/search.astro
index 79785207..ca832b2a 100644
--- a/apps/site/src/pages/search.astro
+++ b/apps/site/src/pages/search.astro
@@ -24,7 +24,15 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 
 		<!-- Search Input Bar -->
 		<div class="flex flex-col gap-2 w-full max-w-4xl">
-			<form id="search-page-form" class="relative w-full" onsubmit="return false">
+			<form
+				id="search-page-form"
+				action="/search"
+				method="GET"
+				class="relative w-full"
+				toolname="search_content"
+				tooldescription="Search CodingCat.dev web development tutorials, blog posts, and podcasts"
+				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">
@@ -40,6 +48,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 						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"
+						toolparamdescription="Search keyword or technical topic"
 					/>
 					<button
 						type="button"
@@ -135,7 +144,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 			<span id="search-count-text"></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>
+				<span id="search-powered-by" class="text-[11px]">Sanity Semantic Search • Clairic</span>
 			</div>
 		</div>
 
diff --git a/apps/site/tests/tier1-features.test.mjs b/apps/site/tests/tier1-features.test.mjs
index 7cf45e02..2f0cb89e 100644
--- a/apps/site/tests/tier1-features.test.mjs
+++ b/apps/site/tests/tier1-features.test.mjs
@@ -1735,24 +1735,29 @@ describe("Tier 1 - Feature Coverage", () => {
 				),
 			);
 
-			// 3. htmlToMarkdown strips client-only interactive transcript modal chrome
+			// 3. htmlToMarkdown strips client-only interactive transcript modal chrome and Ask Agent drawer
 			const { htmlToMarkdown } = loadModule("src/lib/html-to-markdown.ts");
 			const sampleHtml = `
-				<main>
-					<article>
-						<h1>Sample Episode</h1>
-						<div class="transcript-widget inline-block">
-							<button class="transcript-open-btn">View Transcript</button>
-							<div class="transcript-modal hidden">
-								<div>
-									<p>Fetching transcript from YouTube...</p>
-									<footer><span>Loading transcript...</span></footer>
+				<body>
+					<main>
+						<article>
+							<h1>Sample Episode</h1>
+							<div class="transcript-widget inline-block">
+								<button class="transcript-open-btn">View Transcript</button>
+								<div class="transcript-modal hidden">
+									<div>
+										<p>Fetching transcript from YouTube...</p>
+										<footer><span>Loading transcript...</span></footer>
+									</div>
 								</div>
 							</div>
-						</div>
-						<p>Real episode content.</p>
-					</article>
-				</main>
+							<p>Real episode content.</p>
+						</article>
+					</main>
+					<aside id="aj-agent-drawer" data-markdown-ignore="true">
+						<p>Ask anything about CodingCat.dev podcasts, tutorials, guests, or transcripts.</p>
+					</aside>
+				</body>
 			`;
 			const md = htmlToMarkdown(
 				sampleHtml,
@@ -1763,6 +1768,10 @@ describe("Tier 1 - Feature Coverage", () => {
 				!md.includes("Fetching transcript from YouTube"),
 				"Must strip client-only modal loading skeleton from Markdown",
 			);
+			assert.ok(
+				!md.includes("Ask anything about CodingCat.dev podcasts"),
+				"Must strip Ask Agent drawer from Markdown output",
+			);
 		});
 
 		it("7.20 Agent AJ /api/chat integrates Cloudflare Clairic (@cf/cloudflare/clairic) extraction cascade and fastpath fallback", async () => {
@@ -1869,6 +1878,7 @@ describe("Tier 1 - Feature Coverage", () => {
 			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('toolname="ask_agent_aj"'));
 			assert.ok(
 				!chatDrawerSource.includes('id="ai-chat-open-btn"'),
 				"Must remove floating bottom-right Ask Agent AJ button",
@@ -1880,6 +1890,11 @@ describe("Tier 1 - Feature Coverage", () => {
 			);
 			assert.ok(searchPageSource.includes("search-mode-ai-btn"));
 			assert.ok(searchPageSource.includes("search-clairic-pill"));
+			assert.ok(searchPageSource.includes('toolname="search_content"'));
+			assert.ok(
+				!searchPageSource.includes("opacity-75"),
+				"Must not reduce text-muted-foreground contrast with opacity-75",
+			);
 		});
 	});
 });