fix(site): ensure 100% Lighthouse accessibility/SEO and IsItAgentReady markdown/WebMCP compliance

Author: codercatdev

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">

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

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>

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,
 			"",

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>
 

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",
+			);
 		});
 	});
 });