@@ -119,8 +119,10 @@ straight off the CDN. `/mcp` is a public, read-only MCP server (streamable HTTP,
 session state) whose tools read those same asset files through the Worker's `ASSETS` binding — so
 the MCP answers and the pages cannot drift apart.
 
+`search` is the front door: a question in plain words, ranked over everything the site knows.
 The tool that earns its keep is `check_attribute_names`: give it the attribute keys a codebase
-emits and it reports which are deprecated, renamed, or absent from the registry.
+emits and it reports which are deprecated, renamed, or absent from the registry. `/agents` is the
+human-readable version of this section, with install snippets per client and prompts to paste.
 
 ## Severity
 
 
@@ -0,0 +1,287 @@
+---
+/**
+ * The command palette: ⌘K (or `/`) from any page, results grouped by kind as
+ * you type, arrow keys and Enter. Loads the search index on first open and
+ * shares the ranking with /search, so a query lands on the same row either
+ * way. Without JavaScript the header field is still a form that submits to
+ * /search.
+ */
+---
+
+<dialog id="palette" class="palette" aria-label="Search">
+	<div class="mx-auto mt-[12vh] w-[min(40rem,calc(100%-2rem))] overflow-hidden rounded-xl border border-rule bg-surface shadow-2xl">
+		<label class="flex h-12 items-center gap-3 border-b border-rule px-4">
+			<svg class="h-4 w-4 shrink-0 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true">
+				<circle cx="11" cy="11" r="7" />
+				<path d="M20 20l-3.5-3.5" />
+			</svg>
+			<input
+				id="palette-input"
+				type="text"
+				placeholder="Search attributes, metrics, requirements, OTLP…"
+				autocomplete="off"
+				autocorrect="off"
+				spellcheck="false"
+				aria-controls="palette-list"
+				aria-autocomplete="list"
+				role="combobox"
+				aria-expanded="true"
+				class="h-full w-full bg-transparent font-mono text-[14px] text-ink outline-none placeholder:font-sans placeholder:text-faint"
+			/>
+			<kbd class="hidden shrink-0 rounded border border-rule px-1.5 py-0.5 font-mono text-[10px] text-muted sm:inline">esc</kbd>
+		</label>
+
+		<div id="palette-list" role="listbox" class="max-h-[min(60vh,32rem)] overflow-y-auto overscroll-contain py-1.5"></div>
+
+		<div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-rule px-4 py-2 text-[11px] text-faint">
+			<span><kbd class="font-mono">↑↓</kbd> move</span>
+			<span><kbd class="font-mono">↵</kbd> open</span>
+			<span class="hidden sm:inline">
+				Prefix with <code class="code-chip">attr:</code> <code class="code-chip">metric:</code>
+				<code class="code-chip">spec:</code> <code class="code-chip">otlp:</code> to narrow
+			</span>
+			<a href="/agents" class="ml-auto no-underline hover:underline">Use with your agent →</a>
+		</div>
+	</div>
+</dialog>
+
+<script>
+	import {
+		GROUP_LABEL,
+		STATIC_PAGES,
+		TYPE_RANK,
+		highlight,
+		index,
+		loadIndex,
+		recentQueries,
+		rememberQuery,
+		search,
+		type Indexed,
+	} from "../lib/search-client.ts"
+
+	const dialog = document.getElementById("palette") as HTMLDialogElement
+	const input = document.getElementById("palette-input") as HTMLInputElement
+	const list = document.getElementById("palette-list") as HTMLElement
+	const trigger = document.querySelector<HTMLInputElement>("[data-palette-trigger]")
+	const kbd = document.querySelector<HTMLElement>("[data-palette-kbd]")
+
+	if (kbd && !/Mac|iPhone|iPad/.test(navigator.platform)) kbd.textContent = "Ctrl K"
+
+	let entries: Indexed[] | null = null
+	let selected = 0
+	let rows: HTMLElement[] = []
+	const PAGES = STATIC_PAGES.map(index)
+	const PER_GROUP = 6
+	const TOTAL = 28
+
+	const open = (seed = "") => {
+		if (dialog.open) return
+		dialog.showModal()
+		document.body.style.overflow = "hidden"
+		input.value = seed
+		render()
+		input.focus()
+		input.select()
+		if (!entries) {
+			loadIndex().then((loaded) => {
+				entries = loaded
+				if (dialog.open) render()
+			})
+		}
+	}
+
+	const close = () => {
+		dialog.close()
+		document.body.style.overflow = ""
+	}
+
+	const el = (tag: string, className: string, text?: string) => {
+		const node = document.createElement(tag)
+		node.className = className
+		if (text !== undefined) node.textContent = text
+		return node
+	}
+
+	const heading = (label: string) => el("div", "eyebrow px-4 pt-3 pb-1", label)
+
+	const row = (entry: Indexed, terms: readonly string[]) => {
+		const a = document.createElement("a")
+		a.href = entry.url
+		a.setAttribute("role", "option")
+		a.className =
+			"palette-row mx-1.5 flex items-baseline gap-x-3 rounded-lg px-2.5 py-1.5 no-underline transition-colors hover:bg-elevated aria-selected:bg-elevated"
+		const id = el("span", entry.type === "page" || entry.type === "domain" ? "shrink-0 text-[13.5px] font-medium text-ink" : "shrink-0 font-mono text-[13px] font-medium text-ink")
+		id.innerHTML = highlight(entry.id, terms)
+		a.append(id)
+		if (entry.renamedTo) a.append(el("span", "shrink-0 font-mono text-[12px] text-muted", `→ ${entry.renamedTo}`))
+		const text = el("span", "min-w-0 truncate text-[12.5px] text-muted")
+		text.innerHTML = highlight(entry.text, terms)
+		a.append(text)
+		if (entry.meta && entry.type !== "page") {
+			const meta = el("span", "ml-auto hidden shrink-0 font-mono text-[10.5px] text-faint sm:inline", entry.meta.split(" · ")[0] ?? "")
+			a.append(meta)
+		}
+		a.addEventListener("click", () => rememberQuery(input.value))
+		return a
+	}
+
+	const linkRow = (label: string, href: string, hint: string) => {
+		const a = document.createElement("a")
+		a.href = href
+		a.setAttribute("role", "option")
+		a.className =
+			"palette-row mx-1.5 flex items-baseline gap-x-3 rounded-lg px-2.5 py-1.5 text-[13px] no-underline transition-colors hover:bg-elevated aria-selected:bg-elevated"
+		a.append(el("span", "text-ink", label), el("span", "text-[12px] text-muted", hint))
+		return a
+	}
+
+	const select = (i: number) => {
+		if (rows.length === 0) return
+		selected = (i + rows.length) % rows.length
+		rows.forEach((r, n) => r.setAttribute("aria-selected", String(n === selected)))
+		rows[selected]?.scrollIntoView({ block: "nearest" })
+	}
+
+	function render() {
+		const raw = input.value.trim()
+		list.replaceChildren()
+
+		if (raw === "") {
+			const recent = recentQueries()
+			if (recent.length > 0) {
+				list.append(heading("Recent"))
+				for (const q of recent) {
+					const b = document.createElement("button")
+					b.type = "button"
+					b.setAttribute("role", "option")
+					b.className =
+						"palette-row mx-1.5 flex w-[calc(100%-0.75rem)] items-baseline gap-x-3 rounded-lg px-2.5 py-1.5 text-left font-mono text-[13px] text-ink transition-colors hover:bg-elevated aria-selected:bg-elevated"
+					b.textContent = q
+					b.addEventListener("click", () => {
+						input.value = q
+						render()
+						input.focus()
+					})
+					list.append(b)
+				}
+			}
+			list.append(heading("Pages"))
+			for (const page of PAGES) list.append(row(page, []))
+			list.append(heading("Try"))
+			for (const [q, hint] of [
+				["http status", "an attribute by what it holds"],
+				["db.statement", "a deprecated name, and what replaced it"],
+				["spec: retry", "what the specification requires"],
+				["metric: memory usage", "instruments and units"],
+			] as const) {
+				const b = document.createElement("button")
+				b.type = "button"
+				b.setAttribute("role", "option")
+				b.className =
+					"palette-row mx-1.5 flex w-[calc(100%-0.75rem)] items-baseline gap-x-3 rounded-lg px-2.5 py-1.5 text-left transition-colors hover:bg-elevated aria-selected:bg-elevated"
+				b.append(el("span", "font-mono text-[13px] text-ink", q), el("span", "text-[12px] text-muted", hint))
+				b.addEventListener("click", () => {
+					input.value = q
+					render()
+					input.focus()
+				})
+				list.append(b)
+			}
+		} else if (!entries) {
+			list.append(el("p", "m-0 px-4 py-6 text-center text-[13px] text-muted", "Loading the index…"))
+		} else {
+			const result = search(entries, raw, { limit: 400 })
+			const groups = new Map<string, Indexed[]>()
+			let shown = 0
+			for (const hit of result.hits) {
+				const bucket = groups.get(hit.type) ?? []
+				if (bucket.length >= PER_GROUP || shown >= TOTAL) continue
+				bucket.push(hit)
+				groups.set(hit.type, bucket)
+				shown++
+			}
+			const ordered = [...groups.entries()].sort(([a], [b]) => (TYPE_RANK[a] ?? 9) - (TYPE_RANK[b] ?? 9))
+			for (const [type, hits] of ordered) {
+				const count = result.perType[type] ?? hits.length
+				list.append(heading(`${GROUP_LABEL[type] ?? type}${count > hits.length ? ` · ${count}` : ""}`))
+				for (const hit of hits) list.append(row(hit, result.query.terms))
+			}
+			if (result.total === 0) {
+				list.append(el("p", "m-0 px-4 py-6 text-center text-[13px] text-muted", "Nothing matches. Fewer words, or a different spelling?"))
+			}
+			if (result.total > shown || result.total > 0) {
+				list.append(heading(""))
+				list.append(
+					linkRow(
+						result.total > shown ? `All ${result.total} results` : "Open in search",
+						`/search?q=${encodeURIComponent(raw)}`,
+						"with filters and full descriptions",
+					),
+				)
+			}
+		}
+
+		rows = Array.from(list.querySelectorAll<HTMLElement>(".palette-row"))
+		selected = 0
+		select(0)
+	}
+
+	input.addEventListener("input", render)
+
+	input.addEventListener("keydown", (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault()
+			select(selected + 1)
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault()
+			select(selected - 1)
+		} else if (event.key === "Enter") {
+			event.preventDefault()
+			const target = rows[selected]
+			if (target) {
+				rememberQuery(input.value)
+				target.click()
+			} else if (input.value.trim()) {
+				rememberQuery(input.value)
+				location.href = `/search?q=${encodeURIComponent(input.value.trim())}`
+			}
+		}
+	})
+
+	dialog.addEventListener("close", () => {
+		document.body.style.overflow = ""
+	})
+	// A click on the backdrop lands on the dialog itself, not on the panel.
+	dialog.addEventListener("click", (event) => {
+		if (event.target === dialog) close()
+	})
+
+	// The header field is a real form for no-JS readers; with JS it is the trigger.
+	if (trigger) {
+		trigger.addEventListener("focus", () => {
+			trigger.blur()
+			open()
+		})
+		trigger.addEventListener("click", () => open())
+	}
+
+	document.addEventListener("keydown", (event) => {
+		const target = event.target as HTMLElement | null
+		const typing = target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)
+		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+			event.preventDefault()
+			dialog.open ? close() : open()
+			return
+		}
+		// `/` is the reflex on any reference site. On /search and /attributes it
+		// goes to the page's own field, which has filters the palette does not.
+		if (event.key === "/" && !typing && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			const field = document.getElementById("q")
+			event.preventDefault()
+			if (field instanceof HTMLInputElement) {
+				field.focus()
+				field.select()
+			} else open()
+		}
+	})
+</script>
@@ -2,6 +2,7 @@
 import "../styles/global.css"
 import MapleMark from "../components/MapleMark.astro"
 import SemconvMark from "../components/SemconvMark.astro"
+import Palette from "../components/Palette.astro"
 import { SITE } from "../lib/site.ts"
 
 interface Props {
@@ -21,6 +22,7 @@ const nav = [
 	{ href: "/spec", label: "Spec" },
 	{ href: "/otlp", label: "OTLP" },
 	{ href: "/diff", label: "Compare" },
+	{ href: "/agents", label: "Agents" },
 	{ href: "/about", label: "About" },
 ]
 const isActive = (href: string) => (href === "/" ? path === "/" : path.startsWith(href))
@@ -94,18 +96,21 @@ const isActive = (href: string) => (href === "/" ? path === "/" : path.startsWit
 							id="site-search"
 							type="search"
 							name="q"
-							placeholder="Search everything"
+							placeholder="Search"
+							data-palette-trigger
 							aria-label="Search"
 							autocomplete="off"
 							spellcheck="false"
 							class="h-full w-full bg-transparent pl-7 pr-7 text-xs text-ink outline-none placeholder:text-muted"
 						/>
-						<kbd class="pointer-events-none absolute right-2 hidden font-mono text-[10px] font-medium tracking-widest text-muted/70 sm:inline">/</kbd>
+						<kbd class="pointer-events-none absolute right-2 hidden font-mono text-[10px] font-medium tracking-widest text-muted/70 sm:inline" data-palette-kbd>⌘K</kbd>
 					</label>
 				</form>
 			</div>
 		</header>
 
+		<Palette />
+
 		<main id="main" tabindex="-1" class:list={["mx-auto px-5 py-10 outline-none", wide ? "max-w-[86rem]" : "max-w-[62rem]"]}>
 			<slot />
 		</main>
@@ -153,19 +158,6 @@ const isActive = (href: string) => (href === "/" ? path === "/" : path.startsWit
 				</div>
 			</div>
 		</footer>
-		<script>
-			// `/` focuses search, the reflex on any reference site.
-			document.addEventListener("keydown", (event) => {
-				const target = event.target as HTMLElement | null
-				if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return
-				if (target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return
-				const field = document.getElementById("q") ?? document.getElementById("site-search")
-				if (!(field instanceof HTMLInputElement)) return
-				event.preventDefault()
-				field.focus()
-				field.select()
-			})
-		</script>
 	</body>
 </html>