diff --git a/gearbox/internal/framework/templates/layouts/base.templ b/gearbox/internal/framework/templates/layouts/base.templ
index d2d00dc..f89b4e0 100644
--- a/gearbox/internal/framework/templates/layouts/base.templ
+++ b/gearbox/internal/framework/templates/layouts/base.templ
@@ -442,16 +442,18 @@ templ Base(title string, user *models.User, currentPath ...string) {
 				background: rgba(100, 116, 139, 0.5);
 			}
 
-			/* Initial sidebar state from localStorage */
+			/* Initial sidebar state from localStorage. The header now spans
+			   the full viewport width and sits ABOVE the sidebar so the
+			   HeaderSearch input centers on the viewport (issue #92).
+			   That means we only need to adjust the sidebar width and the
+			   main-content left margin; the header `left` no longer
+			   tracks sidebar width. */
 			.sidebar-initially-collapsed #sidebar {
 				width: 4rem;
 			}
 			.sidebar-initially-collapsed #main-content {
 				margin-left: 4rem;
 			}
-			.sidebar-initially-collapsed header {
-				left: 4rem;
-			}
 			.sidebar-initially-collapsed .sidebar-text {
 				opacity: 0;
 			}
@@ -473,6 +475,28 @@ templ Base(title string, user *models.User, currentPath ...string) {
 			     contain only an <svg> child after my own padding rules
 			     normalize them; CSS just packs naturally-sized buttons
 			     together with flex-wrap. */
+			/* HeaderSearch compact-expanded overlay (below md). The
+			   #header-search-row is `hidden md:flex` in markup; when the
+			   user taps the magnifying-glass compact button on a phone,
+			   header-search.js adds .header-search-expanded which uses
+			   ID+class specificity to override `display:none` and pin
+			   the row below the header as a full-width sheet. */
+			@media (max-width: 767px) {
+				#header-search-row.header-search-expanded {
+					display: flex !important;
+					position: fixed;
+					top: 55px;
+					left: 4rem;
+					right: 0.5rem;
+					margin: 0.5rem;
+					z-index: 41;
+					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+				}
+				.dark #header-search-row.header-search-expanded {
+					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+				}
+			}
+
 			@media (max-width: 767px) {
 				#header-page-content.filters-open {
 					display: flex;
@@ -483,7 +507,7 @@ templ Base(title string, user *models.User, currentPath ...string) {
 					gap: 0.5rem;
 					position: fixed;
 					top: 55px;
-					left: 4rem;
+					left: 4rem; /* header now spans full width; sheet still avoids the sidebar */
 					right: 0;
 					padding: 0.75rem 1rem;
 					background-color: #ffffff;
@@ -577,9 +601,8 @@ templ Base(title string, user *models.User, currentPath ...string) {
 				#main-content {
 					margin-left: 4rem;
 				}
-				header {
-					left: 4rem;
-				}
+				/* Header now spans the full viewport (left:0), so it does
+				   not need a phone-specific left offset. */
 				/* Center the nav icons just like .sidebar-collapsed does. */
 				#sidebar .nav-link {
 					justify-content: center;
@@ -866,11 +889,23 @@ templ Base(title string, user *models.User, currentPath ...string) {
 			});
 
 			function toggleSidebar() {
+				// Header now spans full viewport width and lives ABOVE the
+				// sidebar (issue #92), so it no longer tracks sidebar width.
+				// We only flip the sidebar/main-content classes here.
+				// Two pairs of icon elements need to be kept in sync:
+				//   - `sidebar-icon-{collapse,expand}` — hidden shim
+				//     inside the sidebar, kept so legacy lookups still
+				//     resolve to something.
+				//   - `sidebar-icon-{collapse,expand}-header` — the
+				//     VISIBLE icons inside the new header toggle.
+				// Updating only the shim left the visible icon stuck
+				// (Copilot review).
 				const sidebar = document.getElementById('sidebar');
 				const mainContent = document.getElementById('main-content');
-				const header = document.querySelector('header');
 				const iconCollapse = document.getElementById('sidebar-icon-collapse');
 				const iconExpand = document.getElementById('sidebar-icon-expand');
+				const iconCollapseHeader = document.getElementById('sidebar-icon-collapse-header');
+				const iconExpandHeader = document.getElementById('sidebar-icon-expand-header');
 				const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
 
 				if (isCollapsed) {
@@ -878,24 +913,20 @@ templ Base(title string, user *models.User, currentPath ...string) {
 					sidebar.classList.add('sidebar-expanded');
 					mainContent.classList.remove('ml-16');
 					mainContent.classList.add('ml-64');
-					if (header) {
-						header.style.left = '16rem'; // 64 * 4px = 256px = 16rem
-					}
-					// Show collapse icon, hide expand icon
-					if (iconCollapse) iconCollapse.classList.remove('hidden');
-					if (iconExpand) iconExpand.classList.add('hidden');
+					if (iconCollapse)       iconCollapse.classList.remove('hidden');
+					if (iconExpand)         iconExpand.classList.add('hidden');
+					if (iconCollapseHeader) iconCollapseHeader.classList.remove('hidden');
+					if (iconExpandHeader)   iconExpandHeader.classList.add('hidden');
 					localStorage.setItem('sidebarCollapsed', 'false');
 				} else {
 					sidebar.classList.add('sidebar-collapsed');
 					sidebar.classList.remove('sidebar-expanded');
 					mainContent.classList.add('ml-16');
 					mainContent.classList.remove('ml-64');
-					if (header) {
-						header.style.left = '4rem'; // 16 * 4px = 64px = 4rem
-					}
-					// Show expand icon, hide collapse icon
-					if (iconCollapse) iconCollapse.classList.add('hidden');
-					if (iconExpand) iconExpand.classList.remove('hidden');
+					if (iconCollapse)       iconCollapse.classList.add('hidden');
+					if (iconExpand)         iconExpand.classList.remove('hidden');
+					if (iconCollapseHeader) iconCollapseHeader.classList.add('hidden');
+					if (iconExpandHeader)   iconExpandHeader.classList.remove('hidden');
 					localStorage.setItem('sidebarCollapsed', 'true');
 				}
 			}
@@ -904,9 +935,12 @@ templ Base(title string, user *models.User, currentPath ...string) {
 				const isCollapsed = getSidebarState();
 				const sidebar = document.getElementById('sidebar');
 				const mainContent = document.getElementById('main-content');
-				const header = document.querySelector('header');
 				const iconCollapse = document.getElementById('sidebar-icon-collapse');
 				const iconExpand = document.getElementById('sidebar-icon-expand');
+				// Visible header-button icons — see toggleSidebar()
+				// for context on why both pairs are tracked.
+				const iconCollapseHeader = document.getElementById('sidebar-icon-collapse-header');
+				const iconExpandHeader = document.getElementById('sidebar-icon-expand-header');
 
 				// IMPORTANT: apply the correct sidebar/main-content classes
 				// BEFORE removing the .sidebar-initially-collapsed pin from
@@ -929,23 +963,19 @@ templ Base(title string, user *models.User, currentPath ...string) {
 						sidebar.classList.remove('sidebar-expanded');
 						mainContent.classList.add('ml-16');
 						mainContent.classList.remove('ml-64');
-						if (header) {
-							header.style.left = '4rem';
-						}
-						// Show expand icon, hide collapse icon
-						if (iconCollapse) iconCollapse.classList.add('hidden');
-						if (iconExpand) iconExpand.classList.remove('hidden');
+						if (iconCollapse)       iconCollapse.classList.add('hidden');
+						if (iconExpand)         iconExpand.classList.remove('hidden');
+						if (iconCollapseHeader) iconCollapseHeader.classList.add('hidden');
+						if (iconExpandHeader)   iconExpandHeader.classList.remove('hidden');
 					} else {
 						sidebar.classList.remove('sidebar-collapsed');
 						sidebar.classList.add('sidebar-expanded');
 						mainContent.classList.remove('ml-16');
 						mainContent.classList.add('ml-64');
-						if (header) {
-							header.style.left = '16rem';
-						}
-						// Show collapse icon, hide expand icon
-						if (iconCollapse) iconCollapse.classList.remove('hidden');
-						if (iconExpand) iconExpand.classList.add('hidden');
+						if (iconCollapse)       iconCollapse.classList.remove('hidden');
+						if (iconExpand)         iconExpand.classList.add('hidden');
+						if (iconCollapseHeader) iconCollapseHeader.classList.remove('hidden');
+						if (iconExpandHeader)   iconExpandHeader.classList.add('hidden');
 					}
 				}
 
@@ -1376,6 +1406,12 @@ templ Base(title string, user *models.User, currentPath ...string) {
 		<script src="/static/js/common/box-selector.js" defer></script>
 		<script src="/static/js/common/keymap.js" defer></script>
 		<script src="/static/js/common/focus-trap.js" defer></script>
+		<!-- gear-commands.js exposes window.gearbox.{commands,filter} —
+		     must load BEFORE header-search.js which consumes both
+		     APIs, and before any per-gear page script that registers
+		     against them. -->
+		<script src="/static/js/common/gear-commands.js" defer></script>
+		<script src="/static/js/common/header-search.js" defer></script>
 		<script src="/static/js/common/command-palette.js" defer></script>
 		<script src="/static/js/common/shortcut-help.js" defer></script>
 		<script src="/static/js/common/info-tooltip.js" defer></script>
@@ -1390,9 +1426,15 @@ templ Base(title string, user *models.User, currentPath ...string) {
 					{ children... }
 				</main>
 			} else {
+				<!-- Header is rendered FIRST (full-width, fixed top) so the
+				     HeaderSearch input centers on the viewport rather than
+				     the content area (issue #92). The sidebar sits below
+				     the header via top:55px; #main-content keeps its left
+				     margin for the sidebar plus the same pt-[57px] header
+				     spacer it always had. -->
+				@Header(getPath(currentPath))
 				@Sidebar(user, getPath(currentPath))
 				<div id="main-content" class="main-content ml-64 min-h-screen flex flex-col pt-[57px]">
-					@Header(getPath(currentPath))
 					<main class="flex-1 p-6">
 						{ children... }
 					</main>
@@ -1773,26 +1815,23 @@ templ AlertDialog() {
 }
 
 templ Sidebar(user *models.User, currentPath string) {
-	<aside id="sidebar" class="sidebar sidebar-expanded fixed left-0 top-0 h-full bg-white dark:bg-slate-950 text-gray-800 dark:text-white z-50 flex flex-col shadow-xl border-r border-gray-200 dark:border-slate-800">
-		<!-- Logo + Toggle (Linear / Notion pattern: collapse button at top
-		     where it's most predictable, freeing the footer for user
-		     identity + settings). -->
-		<div class="flex items-center px-3 h-[56px] border-b border-gray-200 dark:border-slate-700 gap-2 flex-shrink-0">
-			<a href="/" class="flex items-center gap-2 min-w-0 flex-1 group">
-				<img src="/favicon.svg" alt="Gearbox Logo" class="w-8 h-8 flex-shrink-0"/>
-				<span class="sidebar-text font-bold text-lg whitespace-nowrap group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Gearbox</span>
-			</a>
-			<button id="sidebar-toggle-btn" onclick="toggleSidebar()" class="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-700 rounded transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex-shrink-0" title="Toggle Sidebar">
-				<svg id="sidebar-icon-collapse" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-					<line x1="9" y1="3" x2="9" y2="21"></line>
-					<polyline points="15 8 12 12 15 16"></polyline>
-				</svg>
-				<svg id="sidebar-icon-expand" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-					<line x1="9" y1="3" x2="9" y2="21"></line>
-					<polyline points="13 8 16 12 13 16"></polyline>
-				</svg>
+	<!-- Sidebar starts BELOW the full-width header (top:55px). It used
+	     to be top-0 with the header offset by left-64; now the header
+	     spans the viewport so it sits above the sidebar (issue #92).
+	     The Gearbox logo + collapse toggle moved into the header itself,
+	     so the sidebar starts directly with the nav. -->
+	<aside id="sidebar" class="sidebar sidebar-expanded fixed left-0 top-[55px] bottom-0 bg-white dark:bg-slate-950 text-gray-800 dark:text-white z-40 flex flex-col shadow-xl border-r border-gray-200 dark:border-slate-800">
+		<!-- Hidden legacy sidebar-header DOM. The real logo + collapse
+		     toggle moved into the global header, but a couple of JS
+		     paths (toggleSidebar / applySidebarState) and old templates
+		     still target `#sidebar-toggle-btn`, `#sidebar-icon-collapse`,
+		     `#sidebar-icon-expand`. Keeping a hidden shim here lets the
+		     existing class-toggle code keep working without per-call-site
+		     edits. -->
+		<div class="hidden">
+			<button id="sidebar-toggle-btn" type="button" tabindex="-1" aria-hidden="true" onclick="toggleSidebar()">
+				<svg id="sidebar-icon-collapse" class="w-5 h-5"></svg>
+				<svg id="sidebar-icon-expand" class="w-5 h-5 hidden"></svg>
 			</button>
 		</div>
 
@@ -2351,40 +2390,93 @@ templ renderIntegrationLink(name string, currentPath string) {
 
 templ Header(currentPath string) {
 	{{ active, hasActive := auth.GetSelectedBoxFromContext(ctx) }}
-	<header class="fixed top-0 right-0 left-64 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 z-40 transition-all duration-300">
-		<div class="flex items-center px-6 h-[55px] gap-3">
-			<!-- Box switcher chip (rendered when boxes are configured) -->
-			@boxSwitcherChip()
-			<!-- Breadcrumb title: gear name (chip shows the box). Hidden
-			     below md to reclaim space for the controls. -->
-			@HeaderBreadcrumb(currentPath)
-			<!-- Filters toggle. Only visible below md, when the page's
-			     controls are hidden and need to be reached via a popover. -->
-			<button
-				id="header-filters-btn"
-				type="button"
-				class="md:hidden inline-flex items-center gap-1.5 px-2.5 h-[30px] text-sm rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
-				onclick="toggleHeaderFilters()"
-				aria-expanded="false"
-				aria-controls="header-page-content"
-				title="Show page filters"
-			>
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M6 12h12M10 20h4"></path>
-				</svg>
-				<span>Filters</span>
-			</button>
-			<!-- Slot for the page's refresh button (if any) below md. JS
-			     in header-refresh-shortcut.js detects #refresh-btn after
-			     page-header hoist and clone-mirrors it here so the user
-			     doesn't have to open the Filters sheet just to refresh.
-			     Empty above md and on pages without a refresh button. -->
-			<div id="header-refresh-slot" class="md:hidden flex items-center"></div>
-			<!-- Page controls. Above md: inline flex row inside the header.
-			     Below md: hidden by default, popped out as a sheet below
-			     the header when #header-filters-btn is toggled. -->
-			<div id="header-page-content" class="hidden md:flex items-center flex-1 min-w-0">
-				<!-- Page-specific content will be injected here via JavaScript -->
+	<!-- Full-width header. Spans the entire viewport (left:0 right:0)
+	     and sits ABOVE the sidebar so the HeaderSearch input centers
+	     on the viewport rather than the content area (issue #92).
+	     Grid columns: 1fr | auto | 1fr — chip+breadcrumb on the left,
+	     HeaderSearch in the visual center, per-page controls on the
+	     right. The auto-sized middle is also the viewport center. -->
+	<header class="fixed top-0 inset-x-0 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 z-50">
+		<!-- Grid: left column absorbs all the slack (`minmax(0, 1fr)`)
+		     so the right toolbar never has to clip while the left
+		     side sits there with wasted empty space (issue #92
+		     follow-up). The right column is `minmax(max-content, 1fr)`
+		     — its full natural width is the floor, so it always fits;
+		     beyond that it shares free space evenly with the left so
+		     the search stays visually centered when there's room.
+		     The auto-sized center column carries the search box and
+		     stays at its content width across modes. -->
+		<div class="grid grid-cols-[minmax(0,1fr)_auto_minmax(max-content,1fr)] items-center px-3 h-[55px] gap-3">
+			<!-- LEFT: gearbox identity + box context.
+			     The logo + sidebar collapse toggle live here now (they
+			     used to be in the sidebar's own header bar). Keeps the
+			     "first row" of chrome at consistent height across the
+			     entire viewport rather than splitting between sidebar
+			     and content header. -->
+			<div class="flex items-center gap-2 min-w-0">
+				<a href="/" class="flex items-center gap-2 min-w-0 group flex-shrink-0">
+					<img src="/favicon.svg" alt="Gearbox Logo" class="w-8 h-8 flex-shrink-0"/>
+					<span class="hidden sm:inline font-bold text-lg whitespace-nowrap text-gray-800 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Gearbox</span>
+				</a>
+				<button
+					id="sidebar-toggle-btn-header"
+					type="button"
+					onclick="toggleSidebar()"
+					class="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-700 rounded transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex-shrink-0"
+					title="Toggle Sidebar"
+					aria-label="Toggle Sidebar"
+				>
+					<svg id="sidebar-icon-collapse-header" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+						<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+						<line x1="9" y1="3" x2="9" y2="21"></line>
+						<polyline points="15 8 12 12 15 16"></polyline>
+					</svg>
+					<svg id="sidebar-icon-expand-header" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+						<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+						<line x1="9" y1="3" x2="9" y2="21"></line>
+						<polyline points="13 8 16 12 13 16"></polyline>
+					</svg>
+				</button>
+				<!-- Box switcher chip (rendered when boxes are configured) -->
+				@boxSwitcherChip()
+				<!-- Breadcrumb title: gear name (chip shows the box).
+				     Hidden below md to reclaim space for the search +
+				     controls. -->
+				@HeaderBreadcrumb(currentPath)
+			</div>
+
+			<!-- CENTER: unified search / filter / command-palette input.
+			     Anchored in the auto-sized middle column so it visually
+			     centers on the viewport (the 1fr|auto|1fr grid puts the
+			     auto column at the viewport center regardless of left or
+			     right content widths). -->
+			@HeaderSearch()
+
+			<!-- RIGHT: page-specific toolbar + mobile filter-sheet trigger.
+			     `#header-page-content` is hoisted into by every gear via
+			     the page-header.js helper. The Filters pill toggles the
+			     mobile sheet on phones; the refresh slot mirrors the
+			     page's refresh button so the user doesn't have to open
+			     the sheet just to refresh. -->
+			<div class="flex items-center justify-end gap-2 min-w-0">
+				<button
+					id="header-filters-btn"
+					type="button"
+					class="md:hidden inline-flex items-center gap-1.5 px-2.5 h-[30px] text-sm rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
+					onclick="toggleHeaderFilters()"
+					aria-expanded="false"
+					aria-controls="header-page-content"
+					title="Show page filters"
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M6 12h12M10 20h4"></path>
+					</svg>
+					<span>Filters</span>
+				</button>
+				<div id="header-refresh-slot" class="md:hidden flex items-center"></div>
+				<div id="header-page-content" class="hidden md:flex items-center min-w-0 gap-2">
+					<!-- Page-specific content injected here by page-header.js -->
+				</div>
 			</div>
 		</div>
 	</header>
@@ -2401,6 +2493,107 @@ templ Header(currentPath string) {
 	@boxSwitcherPalette()
 }
 
+// HeaderSearch is the unified search / filter / command-palette input.
+// One text input drives three behaviours, chosen by what the user types:
+//   - empty / search mode: the same hint chips appear on every page —
+//     "/ to search · Cmd+K for palette" — overlaid on the input. There
+//     is no per-gear placeholder; gears that want to react to keystrokes
+//     register a filter callback via window.gearbox.filter (see
+//     common/gear-commands.js) and the controller dispatches each input
+//     event to it. With no filter callback registered, Enter falls back
+//     to a DuckDuckGo web search.
+//   - leading `>` (typed manually or inserted by Cmd+K): palette mode.
+//     The slide-down `#header-search-panel` opens just below the input and
+//     ranks boxes / gears / settings pages / global actions / per-gear
+//     commands. Backspace from `>` (last character) drops back to search
+//     mode and closes the panel.
+//
+// Mobile / narrow viewports: below md the input collapses to a magnifying-
+// glass button anchored to the right; clicking it expands the input as a
+// full-row overlay below the header. Keyboard `/` always focuses regardless.
+templ HeaderSearch() {
+	<div id="header-search" class="w-full relative">
+		<!-- Compact magnifying-glass trigger shown below md (the input
+		     itself is hidden at narrow widths). Tapping it un-collapses
+		     the input into an overlay row beneath the header. -->
+		<button
+			id="header-search-compact"
+			type="button"
+			class="md:hidden inline-flex items-center justify-center w-[34px] h-[34px] rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700"
+			title="Search · Cmd/Ctrl+K"
+			aria-label="Open search"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
+			</svg>
+		</button>
+
+		<!-- The full input row. Visual style is deliberately identical
+		     whether the input is empty, focused, or in palette mode —
+		     only the inner content (icon + hint chips vs. `>` text)
+		     changes. No focus ring on the wrapper since that was
+		     adding 2px of perceived width on focus.
+
+		     Hint chips overlay the input via absolute positioning
+		     inside the input wrapper, so when the user clicks/focuses
+		     the box, the chips fade out and the full input width is
+		     available for typing — they're not a separate flex slot
+		     to the right of the input anymore. -->
+		<div id="header-search-row" class="hidden md:flex items-center gap-2 px-3 h-[34px] rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800">
+			<svg id="header-search-icon-search" class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
+			</svg>
+			<!-- Input + overlay wrapper. min-w sizes the row at lg+ so
+			     the hint chips fit inside the input area cleanly
+			     (~10px gap between the magnifier and the chips); at
+			     md the wrapper shrinks since the chips are display:none
+			     and the box doesn't need to be as wide. -->
+			<div class="relative flex-1 min-w-[8rem] lg:min-w-[13rem]">
+				<input
+					id="header-search-input"
+					type="text"
+					class="peer w-full bg-transparent text-sm text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none border-0"
+					placeholder=" "
+					autocomplete="off"
+					aria-label="Search, filter, or run a command"
+					aria-haspopup="listbox"
+					aria-expanded="false"
+					aria-controls="header-search-panel"
+				/>
+				<!-- Hint chips overlay. Absolute positioned at the
+				     right edge of the input wrapper, so they appear
+				     visually INSIDE the input. CSS-only visibility:
+				     `peer-placeholder-shown:opacity-100 peer-focus:opacity-0`
+				     means visible iff the input is empty AND not
+				     focused. Hidden below lg via `hidden lg:flex`
+				     so the box shrinks on narrow viewports. -->
+				<div
+					id="header-search-hint"
+					aria-hidden="true"
+					class="hidden lg:flex absolute inset-y-0 right-0 items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 pointer-events-none opacity-0 peer-placeholder-shown:opacity-100 peer-focus:opacity-0 transition-opacity"
+				>
+					<kbd class="inline-flex items-center justify-center min-w-[1.25rem] h-[1.25rem] px-1 rounded border border-gray-300 dark:border-slate-500 bg-gray-50 dark:bg-slate-900 text-[0.7rem] font-sans font-medium text-gray-600 dark:text-gray-300">/</kbd>
+					<span>to search</span>
+					<span class="text-gray-300 dark:text-gray-600">·</span>
+					<kbd class="inline-flex items-center justify-center h-[1.25rem] px-1.5 rounded border border-gray-300 dark:border-slate-500 bg-gray-50 dark:bg-slate-900 text-[0.7rem] font-sans font-medium text-gray-600 dark:text-gray-300">Cmd K</kbd>
+					<span>{ "for" } palette</span>
+				</div>
+			</div>
+			<button
+				id="header-search-clear"
+				type="button"
+				class="invisible text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0"
+				title="Clear"
+				aria-label="Clear search"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+				</svg>
+			</button>
+		</div>
+	</div>
+}
+
 // HeaderBreadcrumb renders the compact page-title slot next to the chip.
 // The chip already shows the active box (with status dot + dropdown
 // chevron), so this only renders the current gear name — repeating the
@@ -2477,42 +2670,39 @@ templ boxSwitcherPalette() {
 	@ShortcutHelp()
 }
 
-// CommandPalette is the unified Cmd/Ctrl+K palette. The chip and `g b`
-// also open this. Catalog (boxes + gears) is rendered as JSON islands so
-// the palette opens instantly on first keypress without a fetch.
+// CommandPalette renders the slide-down panel that sits beneath the
+// HeaderSearch input. There is NO dedicated input anymore (issue #92):
+// the header-search input is the palette's input too. The panel only
+// exists in palette mode (when the input value starts with `>`, or
+// Cmd/Ctrl+K is pressed which prepends `>`).
+//
+// Anchored visually under the HeaderSearch box: `position: absolute`
+// inside the header element so it slides down from the same column.
+// No backdrop blur and no full-viewport overlay — the rest of the page
+// remains visible and interactive (VS Code pattern).
 templ CommandPalette() {
 	{{ boxes := auth.GetAllBoxesFromContext(ctx) }}
 	{{ active, _ := auth.GetSelectedBoxFromContext(ctx) }}
 	<div
 		id="cmdk-overlay"
-		class="fixed inset-0 z-[70] hidden bg-black/40 backdrop-blur-sm"
+		class="hidden"
 		data-active-box-id={ activeBoxIDForChip(active, active != nil) }
-		role="dialog"
-		aria-modal="true"
-		aria-labelledby="cmdk-title"
+		aria-hidden="true"
+	></div>
+	<div
+		id="header-search-panel"
+		class="hidden fixed top-[55px] z-[60] rounded-b-xl bg-white dark:bg-slate-800 shadow-2xl border border-t-0 border-gray-200 dark:border-slate-700 overflow-hidden flex flex-col"
+		role="listbox"
+		aria-label="Command palette"
 	>
-		<div class="cmdk-panel absolute left-1/2 -translate-x-1/2 top-[12vh] w-[640px] max-w-[92vw] max-h-[76vh] flex flex-col rounded-xl bg-white dark:bg-slate-800 shadow-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
-			<h2 id="cmdk-title" class="sr-only">Command palette</h2>
-			<div class="flex items-center gap-2 px-3 py-2.5 border-b border-gray-200 dark:border-slate-700 flex-shrink-0">
-				<svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
-				</svg>
-				<input
-					id="cmdk-input"
-					type="search"
-					placeholder="Type a command, box, or gear…"
-					aria-label="Command palette search"
-					aria-controls="cmdk-list"
-					autocomplete="off"
-					class="flex-1 bg-transparent text-sm text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none border-0"
-				/>
-				<kbd class="hidden sm:inline-flex items-center px-1.5 h-5 text-[10px] font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-700 rounded">esc</kbd>
-			</div>
-			<div id="cmdk-list" role="listbox" class="flex-1 min-h-0 overflow-y-auto py-1 sidebar-overlay-scroll"></div>
-			<div class="flex items-center justify-between px-3 py-1.5 border-t border-gray-200 dark:border-slate-700 text-[11px] text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-slate-900/40 flex-shrink-0">
-				<span><kbd class="font-mono">↑↓</kbd> navigate · <kbd class="font-mono">↵</kbd> select · <kbd class="font-mono">ctrl+↵</kbd> keep open</span>
-				<span>Press <kbd class="font-mono">?</kbd> to see all shortcuts</span>
-			</div>
+		<div id="header-search-breadcrumb" class="hidden flex items-center gap-2 px-3 py-1.5 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/40 text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
+			<!-- Breadcrumb for nested palette pages (e.g. when a command
+			     drills into a submenu). Populated by command-palette.js. -->
+		</div>
+		<div id="cmdk-list" class="flex-1 min-h-0 overflow-y-auto py-1 sidebar-overlay-scroll max-h-[64vh]"></div>
+		<div class="flex items-center justify-between px-3 py-1.5 border-t border-gray-200 dark:border-slate-700 text-[11px] text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-slate-900/40 flex-shrink-0">
+			<span><kbd class="font-mono">↑↓</kbd> navigate · <kbd class="font-mono">↵</kbd> select · <kbd class="font-mono">ctrl+↵</kbd> keep open</span>
+			<span>Press <kbd class="font-mono">?</kbd> to see all shortcuts</span>
 		</div>
 	</div>
 	<!-- Catalog JSON islands. Hidden text/json scripts; not executed, just
@@ -2522,33 +2712,23 @@ templ CommandPalette() {
 	@templ.Raw("<script type=\"application/json\" id=\"cmdk-pages\">" + encodePagesJSON(ctx) + "</script>")
 }
 
-// ShortcutHelp is the `?`-opens overlay listing every global shortcut.
-// Frosted-glass look per issue #66: full-viewport dark blurred backdrop
-// with a translucent content panel sitting on top.
+// ShortcutHelp is the `?`-opens shortcut reference. Issue #92 redesign:
+// full-window smoked-glass — no panel, no border, no card. Shortcuts
+// render directly on the blurred backdrop in centered columns. Press
+// `?` again or Esc to close.
 templ ShortcutHelp() {
 	<div
 		id="shortcuts-help-overlay"
-		class="fixed inset-0 z-[75] hidden bg-black/50 backdrop-blur-md flex items-center justify-center p-6"
+		class="fixed inset-0 z-[75] hidden bg-black/70 backdrop-blur-md flex flex-col items-center justify-center p-8"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="shortcuts-help-title"
 	>
-		<div class="shortcuts-help-panel relative w-full max-w-2xl rounded-2xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden" tabindex="-1">
-			<div class="flex items-center justify-between px-5 py-3 border-b border-white/10">
-				<h2 id="shortcuts-help-title" class="text-white font-medium tracking-wide">Keyboard shortcuts</h2>
-				<button
-					type="button"
-					onclick="closeShortcutHelp()"
-					class="text-white/60 hover:text-white transition-colors"
-					aria-label="Close"
-				>
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-					</svg>
-				</button>
-			</div>
-			<div id="shortcuts-help-list" class="px-2 py-2 max-h-[60vh] overflow-y-auto"></div>
+		<div class="flex-shrink-0 mb-10 text-center">
+			<h2 id="shortcuts-help-title" class="text-2xl font-semibold tracking-wide text-white/90">Keyboard shortcuts</h2>
+			<p class="mt-2 text-sm text-white/50">Press <kbd class="inline-flex items-center justify-center h-5 px-2 mx-1 rounded border border-white/20 bg-white/10 text-white/80 text-xs font-mono">Esc</kbd> or <kbd class="inline-flex items-center justify-center h-5 px-2 mx-1 rounded border border-white/20 bg-white/10 text-white/80 text-xs font-mono">?</kbd> to close</p>
 		</div>
+		<div id="shortcuts-help-list" class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-1 overflow-y-auto max-h-[70vh]" tabindex="-1"></div>
 	</div>
 }
 
diff --git a/gearbox/internal/framework/templates/pages/alerts.templ b/gearbox/internal/framework/templates/pages/alerts.templ
index 658c266..ff7c112 100644
--- a/gearbox/internal/framework/templates/pages/alerts.templ
+++ b/gearbox/internal/framework/templates/pages/alerts.templ
@@ -12,14 +12,9 @@ templ AlertsPage(user *models.User, servers []models.BoxConfig, perms *models.Us
 		<div id="page-header-source" class="hidden">
 			<div class="flex-1"></div>
 			<div class="flex items-center space-x-3">
-				<!-- Search input -->
-				<input
-					type="text"
-					id="alert-search"
-					placeholder="Search alerts..."
-					oninput="filterAlerts(this.value)"
-					class="w-48 h-[38px] px-3 py-1.5 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-				/>
+				<!-- Search input moved to the global HeaderSearch
+				     (issue #92). filterAlerts() is wired through a
+				     window.gearbox.filter.register call by alerts.js. -->
 				<!-- Status filter -->
 				<select
 					id="status-filter"
@@ -354,6 +349,39 @@ templ AlertsPage(user *models.User, servers []models.BoxConfig, perms *models.Us
 				refreshAlertsData();
 				initSSE();
 			}
+
+			// HeaderSearch + command palette wiring (issue #92).
+			if (window.gearbox && window.gearbox.filter) {
+				window.gearbox.filter.register({
+					placeholder: 'Search alerts…',
+					onInput: function (q) { if (typeof filterAlerts === 'function') filterAlerts(q || ''); },
+					onClear: function () { if (typeof filterAlerts === 'function') filterAlerts(''); },
+				});
+			}
+			if (window.gearbox && window.gearbox.commands) {
+				const cmds = window.gearbox.commands;
+				const statusSel = document.getElementById('status-filter');
+				if (statusSel) {
+					Array.from(statusSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'alerts.status.' + opt.value,
+							label: 'Status: ' + opt.text,
+							subtitle: 'Show ' + opt.text.toLowerCase(),
+							group: 'Alerts',
+							run: function () {
+								statusSel.value = opt.value;
+								if (typeof changeStatusFilter === 'function') changeStatusFilter(opt.value);
+							},
+						});
+					});
+				}
+				cmds.register({
+					id: 'alerts.refresh',
+					label: 'Refresh alerts',
+					group: 'Alerts',
+					run: function () { if (typeof refreshAlertsData === 'function') refreshAlertsData(); },
+				});
+			}
 		});
 
 		// Clean up SSE on page unload
diff --git a/gearbox/internal/framework/templates/pages/certificates.templ b/gearbox/internal/framework/templates/pages/certificates.templ
index 7b3a1b0..eb60d29 100644
--- a/gearbox/internal/framework/templates/pages/certificates.templ
+++ b/gearbox/internal/framework/templates/pages/certificates.templ
@@ -532,6 +532,16 @@ templ Certificates(user *models.User, servers []models.BoxConfig, perms *models.
 			setupPageHeader();
 			loadCertificates();
 			initSSE();
+
+			// Command palette wiring (issue #92).
+			if (window.gearbox && window.gearbox.commands) {
+				window.gearbox.commands.register({
+					id: 'certificates.refresh',
+					label: 'Refresh certificate list',
+					group: 'Certificates',
+					run: function () { if (typeof loadCertificates === 'function') loadCertificates(); },
+				});
+			}
 		});
 
 		// Cleanup on page unload
diff --git a/gearbox/internal/framework/templates/pages/logs.templ b/gearbox/internal/framework/templates/pages/logs.templ
index a82b130..2c78cea 100644
--- a/gearbox/internal/framework/templates/pages/logs.templ
+++ b/gearbox/internal/framework/templates/pages/logs.templ
@@ -11,7 +11,14 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 
 		<!-- Hidden container for page header content - will be moved to main header via JS.
 		     Title + box selector are now in the global header breadcrumb +
-		     chip; this slot only carries page-specific controls. -->
+		     chip; this slot only carries page-specific controls.
+
+		     The filter input itself has moved to the global HeaderSearch
+		     (issue #92); this template still renders the source / lines /
+		     severity selects and the action buttons. Logs registers its
+		     own filter + commands via window.gearbox in the page script
+		     below so the search bar drives filterLogs() and the palette
+		     drives every other toolbar action. -->
 		<div id="page-header-source" class="hidden">
 			<!-- Right side spacer pushes controls to the far right of the header -->
 			<div class="flex-1"></div>
@@ -39,26 +46,8 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 					</select>
 				}
 
-				<!-- Filter input and severity -->
-				<div class="relative">
-					<input
-						type="text"
-						id="filter-input"
-						placeholder="Filter..."
-						class="h-[38px] w-32 px-3 py-1.5 pr-8 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						oninput="filterLogs()"
-					/>
-					<button
-						type="button"
-						id="filter-clear"
-						class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden"
-						onclick="clearLogFilter()"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-						</svg>
-					</button>
-				</div>
+				<!-- Severity select (kept here; filterLogs() also reads it).
+				     The text filter input moved to the global HeaderSearch. -->
 				<select
 					id="severity-filter"
 					class="h-[38px] px-3 py-1.5 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -457,10 +446,14 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 			}
 		}
 
-		// Filter a single line element
+		// Filter state. The text filter used to live in a #filter-input
+		// element on this page; it's now driven by the global
+		// HeaderSearch (issue #92). __logFilterQuery is updated by the
+		// gear-registered filter callback in DOMContentLoaded below, and
+		// filterLogs() / filterSingleLine() read from it instead.
+		let __logFilterQuery = '';
 		function filterSingleLine(lineEl) {
-			const input = document.getElementById('filter-input');
-			const filter = input ? input.value.toLowerCase() : '';
+			const filter = __logFilterQuery;
 			const severityFilter = document.getElementById('severity-filter');
 			const severityValue = severityFilter ? severityFilter.value : 'all';
 
@@ -752,19 +745,14 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 		}
 
 		function filterLogs() {
-			const input = document.getElementById('filter-input');
-			const filter = input.value.toLowerCase();
+			// __logFilterQuery is maintained by the HeaderSearch
+			// filter registration in DOMContentLoaded (lower-cased on
+			// write). filterSingleLine() reads both that and the
+			// severity dropdown.
+			const filter = __logFilterQuery;
 			const severityFilter = document.getElementById('severity-filter').value;
 			const container = document.getElementById('log-container');
 			const lines = container.getElementsByClassName('log-line');
-			const clearBtn = document.getElementById('filter-clear');
-
-			// Show/hide clear button
-			if (filter.length > 0) {
-				clearBtn.classList.remove('hidden');
-			} else {
-				clearBtn.classList.add('hidden');
-			}
 
 			for (let line of lines) {
 				const textMatch = filter === '' || line.textContent.toLowerCase().includes(filter);
@@ -786,11 +774,11 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 		}
 
 		function clearLogFilter() {
-			const input = document.getElementById('filter-input');
-			input.value = '';
-			document.getElementById('filter-clear').classList.add('hidden');
+			// Programmatic-clear path. The HeaderSearch's own clear
+			// button calls this through the filter registration's
+			// onClear handler.
+			__logFilterQuery = '';
 			filterLogs();
-			input.focus();
 		}
 
 		function escapeHtml(text) {
@@ -1053,6 +1041,87 @@ templ Logs(user *models.User, servers []models.BoxConfig) {
 
 			// Initialize SSE for real-time log streaming
 			initSSE();
+
+			// Register with the unified HeaderSearch + command palette
+			// (issue #92). Each keystroke in search mode updates the
+			// internal __logFilterQuery and re-runs filterLogs(); the
+			// command palette gets entries for every toolbar button so
+			// they're all reachable via Cmd+K → ">" → fuzzy search.
+			if (window.gearbox && window.gearbox.filter) {
+				window.gearbox.filter.register({
+					placeholder: 'Filter log lines…',
+					onInput: function (q) {
+						__logFilterQuery = (q || '').toLowerCase();
+						filterLogs();
+					},
+					onClear: function () {
+						__logFilterQuery = '';
+						filterLogs();
+					},
+				});
+			}
+			if (window.gearbox && window.gearbox.commands) {
+				const cmds = window.gearbox.commands;
+				// Log source — one entry per server-side option. If
+				// the user adds a third log type in the future this
+				// loop picks it up automatically.
+				const logSel = document.getElementById('log-select');
+				if (logSel) {
+					Array.from(logSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'logs.source.' + opt.value,
+							label: 'Log source: ' + opt.text,
+							subtitle: 'Switch the log feed to ' + opt.text.toLowerCase(),
+							group: 'Logs',
+							run: function () {
+								logSel.value = opt.value;
+								if (typeof onLogSourceChange === 'function') onLogSourceChange();
+							},
+						});
+					});
+				}
+				// Line counts — exposed as palette entries so the user
+				// can keyboard-pick "200" without opening the dropdown.
+				const linesSel = document.getElementById('lines-select');
+				if (linesSel) {
+					Array.from(linesSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'logs.lines.' + opt.value,
+							label: 'Show ' + opt.text + ' lines',
+							subtitle: 'Fetch the last ' + opt.text + ' log lines',
+							group: 'Logs',
+							run: function () {
+								linesSel.value = opt.value;
+								if (typeof loadLogs === 'function') loadLogs();
+							},
+						});
+					});
+				}
+				// Severity — same pattern.
+				const sevSel = document.getElementById('severity-filter');
+				if (sevSel) {
+					Array.from(sevSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'logs.severity.' + opt.value,
+							label: 'Severity: ' + opt.text,
+							subtitle: 'Show only ' + opt.text.toLowerCase() + ' lines',
+							group: 'Logs',
+							run: function () {
+								sevSel.value = opt.value;
+								if (typeof filterLogs === 'function') filterLogs();
+							},
+						});
+					});
+				}
+				cmds.register({ id: 'logs.refresh',    label: 'Refresh logs',      group: 'Logs',
+					subtitle: 'Re-fetch the log feed', run: function () { if (typeof manualRefresh === 'function') manualRefresh(); }});
+				cmds.register({ id: 'logs.copy',       label: 'Copy logs',          group: 'Logs',
+					subtitle: 'Copy currently-visible lines to the clipboard', run: function () { if (typeof copyLogs === 'function') copyLogs(); }});
+				cmds.register({ id: 'logs.download',   label: 'Download logs',      group: 'Logs',
+					subtitle: 'Save visible lines as a .log file', run: function () { if (typeof downloadLogs === 'function') downloadLogs(); }});
+				cmds.register({ id: 'logs.fullscreen', label: 'Toggle fullscreen',  group: 'Logs',
+					subtitle: 'Cycle: normal → browser fullscreen → true fullscreen', run: function () { if (typeof toggleFullscreen === 'function') toggleFullscreen(); }});
+			}
 		});
 
 		// Clean up SSE on page unload
diff --git a/gearbox/internal/framework/templates/pages/metrics.templ b/gearbox/internal/framework/templates/pages/metrics.templ
index 3b3bccc..c1e5526 100644
--- a/gearbox/internal/framework/templates/pages/metrics.templ
+++ b/gearbox/internal/framework/templates/pages/metrics.templ
@@ -2822,6 +2822,27 @@ templ Metrics(user *models.User, servers []models.BoxConfig) {
 			if (slider) {
 				slider.addEventListener('input', updateResolutionLabel);
 			}
+
+			// Command palette wiring (issue #92).
+			if (window.gearbox && window.gearbox.commands) {
+				const cmds = window.gearbox.commands;
+				cmds.register({
+					id: 'metrics.toggle-edit',
+					label: 'Toggle edit mode',
+					subtitle: 'Enter drag-to-arrange + resize mode for chart tiles',
+					group: 'Metrics',
+					run: function () {
+						const btn = document.getElementById('metrics-edit-toggle');
+						if (btn) btn.click();
+					},
+				});
+				cmds.register({
+					id: 'metrics.refresh',
+					label: 'Refresh metrics',
+					group: 'Metrics',
+					run: function () { if (typeof loadHistoryData === 'function') loadHistoryData(); },
+				});
+			}
 		});
 
 		// Cleanup on page unload
diff --git a/gearbox/internal/framework/templates/pages/os_updates.templ b/gearbox/internal/framework/templates/pages/os_updates.templ
index b90d95e..89a5618 100644
--- a/gearbox/internal/framework/templates/pages/os_updates.templ
+++ b/gearbox/internal/framework/templates/pages/os_updates.templ
@@ -200,18 +200,15 @@ templ OSUpdatesPage(data OSUpdatesPageData) {
 										</button>
 									}
 								}
-								<span class="datagrid-search-wrap">
-									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
-									</svg>
-									<input
-										type="search"
-										id="pkg-search"
-										placeholder="Search packages..."
-										class="h-[38px] pr-3 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-56"
-										autocomplete="off"
-									/>
-								</span>
+								<!-- #pkg-search moved to the global HeaderSearch
+								     (issue #92). The element is kept here as a
+								     hidden input so the Tabulator-backed
+								     datagrid (createDataGrid({searchInput:
+								     '#pkg-search'})) can still latch onto it;
+								     a window.gearbox.filter registration in
+								     os-updates-page.js writes to .value and
+								     dispatches 'input' on every keystroke. -->
+								<input type="search" id="pkg-search" class="hidden" autocomplete="off"/>
 								<select
 									id="pkg-view-filter"
 									onchange="onPkgViewFilterChange(this.value)"
diff --git a/gearbox/internal/framework/templates/pages/overview.templ b/gearbox/internal/framework/templates/pages/overview.templ
index 832cf4b..fd38fa6 100644
--- a/gearbox/internal/framework/templates/pages/overview.templ
+++ b/gearbox/internal/framework/templates/pages/overview.templ
@@ -36,26 +36,12 @@ templ Overview(user *models.User, servers []models.BoxConfig) {
 					<option value="active">Active Only</option>
 					<option value="disabled">Disabled Only</option>
 				</select>
-				<!-- Global text filter -->
-				<div class="relative">
-					<input
-						type="text"
-						id="global-backend-filter"
-						placeholder="Filter backends..."
-						class="h-[38px] w-40 px-3 py-1.5 pr-8 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						oninput="applyGlobalFilters()"
-					/>
-					<button
-						type="button"
-						id="global-filter-clear"
-						class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden"
-						onclick="clearGlobalFilter()"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-						</svg>
-					</button>
-				</div>
+				<!-- Global text filter moved to the HeaderSearch
+				     (issue #92). applyGlobalFilters() now reads the
+				     query from __backendFilterQuery, set by a
+				     window.gearbox.filter registration in
+				     static/js/haproxy_dashboard/overview.js (or inline
+				     overview script). -->
 				<!-- Manual refresh button with SSE status indicator -->
 				<button
 					id="refresh-btn"
@@ -386,19 +372,14 @@ templ Overview(user *models.User, servers []models.BoxConfig) {
 			setTimeout(() => icon.classList.remove('animate-spin'), 1000);
 		}
 
-		// Global filter functions
+		// Global filter functions. Text query now flows through the
+		// HeaderSearch (issue #92); applyGlobalFilters() reads it from
+		// __backendFilterQuery instead of an on-page input.
+		let __backendFilterQuery = '';
 		function applyGlobalFilters() {
-			const textFilter = document.getElementById('global-backend-filter').value.toLowerCase();
+			const textFilter = __backendFilterQuery;
 			const healthFilter = document.getElementById('global-health-filter').value;
 			const disabledFilter = document.getElementById('global-disabled-filter').value;
-			const clearBtn = document.getElementById('global-filter-clear');
-
-			// Show/hide clear button
-			if (textFilter.length > 0) {
-				clearBtn.classList.remove('hidden');
-			} else {
-				clearBtn.classList.add('hidden');
-			}
 
 			// Apply filters to all backend cards across all containers
 			document.querySelectorAll('.backend-card').forEach(card => {
@@ -431,16 +412,10 @@ templ Overview(user *models.User, servers []models.BoxConfig) {
 		}
 
 		function clearGlobalFilter() {
-			const input = document.getElementById('global-backend-filter');
+			__backendFilterQuery = '';
 			const select = document.getElementById('global-health-filter');
-			const clearBtn = document.getElementById('global-filter-clear');
-
-			input.value = '';
-			select.value = 'all';
-			clearBtn.classList.add('hidden');
-
+			if (select) select.value = 'all';
 			applyGlobalFilters();
-			input.focus();
 		}
 
 		// Certificate warning functions
@@ -597,18 +572,67 @@ templ Overview(user *models.User, servers []models.BoxConfig) {
 			// Move page header content to main header
 			setupPageHeader();
 
-			// Restore global filters from localStorage
+			// HeaderSearch + command palette wiring (issue #92).
+			// Register BEFORE replaying the saved filter so setValue()'s
+			// dispatch flows through the registered onInput and keeps
+			// __backendFilterQuery in sync (Copilot review).
+			if (window.gearbox && window.gearbox.filter) {
+				window.gearbox.filter.register({
+					placeholder: 'Filter backends…',
+					onInput: function (q) {
+						__backendFilterQuery = (q || '').toLowerCase();
+						applyGlobalFilters();
+					},
+					onClear: function () { __backendFilterQuery = ''; applyGlobalFilters(); },
+				});
+			}
+
+			// Restore global filters from localStorage. The text query
+			// flows through HeaderSearch → registered onInput now; the
+			// health select is still a per-page dropdown.
 			const savedTextFilter = localStorage.getItem('global-text-filter') || '';
 			const savedHealthFilter = localStorage.getItem('global-health-filter') || 'all';
-			const textInput = document.getElementById('global-backend-filter');
 			const healthSelect = document.getElementById('global-health-filter');
 
-			if (textInput && savedTextFilter) {
-				textInput.value = savedTextFilter;
+			if (savedTextFilter && window.HeaderSearch) {
+				window.HeaderSearch.setValue(savedTextFilter);
 			}
 			if (healthSelect && savedHealthFilter) {
 				healthSelect.value = savedHealthFilter;
 			}
+			if (window.gearbox && window.gearbox.commands) {
+				const cmds = window.gearbox.commands;
+				const hSel = document.getElementById('global-health-filter');
+				if (hSel) {
+					Array.from(hSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'haproxy.health.' + opt.value,
+							label: 'Health: ' + opt.text,
+							subtitle: 'Filter backends by aggregate health',
+							group: 'HAProxy',
+							run: function () { hSel.value = opt.value; applyGlobalFilters(); },
+						});
+					});
+				}
+				const dSel = document.getElementById('global-disabled-filter');
+				if (dSel) {
+					Array.from(dSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'haproxy.disabled.' + opt.value,
+							label: 'Disabled: ' + opt.text,
+							subtitle: 'Filter by enabled/disabled state',
+							group: 'HAProxy',
+							run: function () { dSel.value = opt.value; applyGlobalFilters(); },
+						});
+					});
+				}
+				cmds.register({
+					id: 'haproxy.refresh',
+					label: 'Refresh HAProxy view',
+					group: 'HAProxy',
+					run: function () { if (typeof manualRefresh === 'function') manualRefresh(); },
+				});
+			}
 
 			// Restore server selection using global ServerSelector (sessionStorage for tab isolation)
 			const serverSelector = document.getElementById('server-selector');
diff --git a/gearbox/internal/framework/templates/pages/services.templ b/gearbox/internal/framework/templates/pages/services.templ
index 8d4147e..efb1b7a 100644
--- a/gearbox/internal/framework/templates/pages/services.templ
+++ b/gearbox/internal/framework/templates/pages/services.templ
@@ -28,26 +28,10 @@ templ Services(user *models.User, servers []models.BoxConfig) {
 					<option value="active">Active Only</option>
 					<option value="inactive">Inactive Only</option>
 				</select>
-				<!-- Text filter -->
-				<div class="relative">
-					<input
-						type="text"
-						id="service-filter"
-						placeholder="Filter services..."
-						class="h-[38px] w-48 px-3 py-1.5 pr-8 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						oninput="applyFilters()"
-					/>
-					<button
-						type="button"
-						id="filter-clear"
-						class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden"
-						onclick="clearFilter()"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-						</svg>
-					</button>
-				</div>
+				<!-- Text filter moved to the global HeaderSearch
+				     (issue #92). applyFilters() now reads from a
+				     JS-managed __serviceFilterQuery updated by the
+				     window.gearbox.filter registration below. -->
 				<!-- Refresh button with SSE status indicator (color changes based on connection) -->
 				<button
 					id="refresh-btn"
@@ -549,18 +533,14 @@ templ Services(user *models.User, servers []models.BoxConfig) {
 			}
 		}
 
-		// Apply filters
+		// Text filter is driven by the global HeaderSearch (issue #92).
+		// __serviceFilterQuery is updated by a window.gearbox.filter
+		// registration in DOMContentLoaded; the status dropdown still
+		// lives in the per-page toolbar.
+		let __serviceFilterQuery = '';
 		function applyFilters() {
-			const textFilter = document.getElementById('service-filter').value.toLowerCase();
+			const textFilter = __serviceFilterQuery;
 			const statusFilter = document.getElementById('status-filter').value;
-			const clearBtn = document.getElementById('filter-clear');
-
-			// Show/hide clear button
-			if (textFilter.length > 0) {
-				clearBtn.classList.remove('hidden');
-			} else {
-				clearBtn.classList.add('hidden');
-			}
 
 			document.querySelectorAll('.service-card').forEach(function(card) {
 				const name = card.getAttribute('data-service-name').toLowerCase();
@@ -580,11 +560,8 @@ templ Services(user *models.User, servers []models.BoxConfig) {
 		}
 
 		function clearFilter() {
-			var input = document.getElementById('service-filter');
-			input.value = '';
-			document.getElementById('filter-clear').classList.add('hidden');
+			__serviceFilterQuery = '';
 			applyFilters();
-			input.focus();
 		}
 
 		function manualRefresh() {
@@ -633,6 +610,42 @@ templ Services(user *models.User, servers []models.BoxConfig) {
 
 			loadServices();
 			initSSE();
+
+			// HeaderSearch + command palette wiring (issue #92).
+			if (window.gearbox && window.gearbox.filter) {
+				window.gearbox.filter.register({
+					placeholder: 'Filter services…',
+					onInput: function (q) {
+						__serviceFilterQuery = (q || '').toLowerCase();
+						applyFilters();
+					},
+					onClear: function () { __serviceFilterQuery = ''; applyFilters(); },
+				});
+			}
+			if (window.gearbox && window.gearbox.commands) {
+				const cmds = window.gearbox.commands;
+				const statusSel = document.getElementById('status-filter');
+				if (statusSel) {
+					Array.from(statusSel.options).forEach(function (opt) {
+						cmds.register({
+							id: 'services.status.' + opt.value,
+							label: 'Show: ' + opt.text,
+							subtitle: 'Filter services by status',
+							group: 'Services',
+							run: function () {
+								statusSel.value = opt.value;
+								applyFilters();
+							},
+						});
+					});
+				}
+				cmds.register({
+					id: 'services.refresh',
+					label: 'Refresh services',
+					group: 'Services',
+					run: function () { manualRefresh(); },
+				});
+			}
 		});
 
 		// Clean up SSE on page unload
diff --git a/gearbox/internal/gears/bx/pages.templ b/gearbox/internal/gears/bx/pages.templ
index bb9a58e..3ea65a1 100644
--- a/gearbox/internal/gears/bx/pages.templ
+++ b/gearbox/internal/gears/bx/pages.templ
@@ -62,19 +62,12 @@ templ pageHeader(total int) {
 			}
 		</p>
 		if total > 0 {
-			<div class="datagrid-search-wrap w-72">
-				<svg class="datagrid-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
-				</svg>
-				<input
-					type="search"
-					id="bx-search"
-					placeholder="Search boxes…"
-					aria-label="Search boxes"
-					autocomplete="off"
-					class="w-full"
-				/>
-			</div>
+			<!-- #bx-search moved to the global HeaderSearch (issue #92).
+			     Hidden input kept so the Tabulator-backed datagrid
+			     (createDataGrid({searchInput: '#bx-search'})) still
+			     latches onto it; bx-page.js dispatches an `input`
+			     event each time HeaderSearch fires. -->
+			<input type="search" id="bx-search" class="hidden" autocomplete="off"/>
 			<select
 				id="bx-view-filter"
 				aria-label="Filter boxes view"
diff --git a/gearbox/internal/gears/home/pages.templ b/gearbox/internal/gears/home/pages.templ
index b096cec..d8cdce1 100644
--- a/gearbox/internal/gears/home/pages.templ
+++ b/gearbox/internal/gears/home/pages.templ
@@ -138,42 +138,11 @@ templ IndexPage(d IndexPageData) {
 				</div>
 			</div>
 
-			<!-- Center: search bar. Takes the remaining horizontal space and
-			     caps at max-w-xl so it doesn't dominate wide viewports.
-			     Press '/' anywhere to focus; bookmark-search on Enter when
-			     the query matches a tile name.
-
-			     Placeholder is a pseudo-overlay (not the native
-			     `placeholder` attribute) so we can render a real <kbd>
-			     keycap inside it, GitHub-style: "Type / to search". The
-			     input has `peer` + a single-space placeholder; the
-			     overlay sibling shows only while the input is empty
-			     (`peer-placeholder-shown`) and not focused (`peer-focus:`
-			     hides it). pointer-events-none on the overlay so clicks
-			     pass through to the input. -->
-			<form id="home-search" action="https://duckduckgo.com/" method="get" target="_blank" class="flex-1 mx-4 min-w-0">
-				<div class="relative max-w-xl mx-auto">
-					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 z-10 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-					</svg>
-					<input
-						id="home-search-input"
-						name="q"
-						type="text"
-						placeholder=" "
-						class="peer w-full pl-9 pr-3 h-[34px] rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-						autocomplete="off"
-					/>
-					<div
-						aria-hidden="true"
-						class="absolute left-9 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-sm text-gray-400 dark:text-gray-500 pointer-events-none opacity-0 peer-placeholder-shown:opacity-100 peer-focus:opacity-0 transition-opacity"
-					>
-						<span>Type</span>
-						<kbd class="inline-flex items-center justify-center min-w-[1.25rem] h-[1.25rem] px-1 rounded border border-gray-300 dark:border-slate-500 bg-gray-50 dark:bg-slate-800 text-[0.7rem] font-sans font-medium text-gray-600 dark:text-gray-300 shadow-sm">/</kbd>
-						<span>to search</span>
-					</div>
-				</div>
-			</form>
+			<!-- Search box is now the global HeaderSearch in the page chrome
+			     (issue #92). Home registers a filter via
+			     window.gearbox.filter.register in home.js: every keystroke
+			     hides non-matching tiles, and Enter either opens a matching
+			     tile or falls back to DuckDuckGo. -->
 
 			<!-- Right: management controls. Buttons with .home-edit-only are
 			     hidden until the user enters edit mode (home.js toggles). -->
diff --git a/gearbox/static/js/bx/bx-page.js b/gearbox/static/js/bx/bx-page.js
index ba8fc8d..4d34891 100644
--- a/gearbox/static/js/bx/bx-page.js
+++ b/gearbox/static/js/bx/bx-page.js
@@ -259,6 +259,48 @@
     // Expose for the inline onchange="" handler.
     window.bxOnViewFilterChange = applyViewFilter;
 
+    // HeaderSearch + palette wiring (issue #92). #bx-search is hidden;
+    // we proxy the global search keystrokes to it so the existing
+    // datagrid filter pipeline keeps working unchanged.
+    if (window.gearbox && window.gearbox.filter) {
+        const bxSearch = document.getElementById('bx-search');
+        window.gearbox.filter.register({
+            placeholder: 'Search boxes…',
+            onInput: function (q) {
+                if (!bxSearch) return;
+                bxSearch.value = q || '';
+                bxSearch.dispatchEvent(new Event('input', { bubbles: true }));
+            },
+            onClear: function () {
+                if (!bxSearch) return;
+                bxSearch.value = '';
+                bxSearch.dispatchEvent(new Event('input', { bubbles: true }));
+            },
+        });
+    }
+    if (window.gearbox && window.gearbox.commands) {
+        const cmds = window.gearbox.commands;
+        const viewSel = document.getElementById('bx-view-filter');
+        if (viewSel) {
+            Array.from(viewSel.options).forEach(function (opt) {
+                cmds.register({
+                    id: 'bx.view.' + opt.value,
+                    label: 'View: ' + opt.text,
+                    subtitle: 'Filter boxes by status',
+                    group: 'Bx',
+                    run: function () { viewSel.value = opt.value; applyViewFilter(opt.value); },
+                });
+            });
+        }
+        cmds.register({
+            id: 'bx.add',
+            label: 'Add box…',
+            subtitle: 'Open the new-box dialog',
+            group: 'Bx',
+            run: function () { window.location.assign('/settings/boxes/new'); },
+        });
+    }
+
     /* -------------------------------------------------------------- *
      * Live status updates via SSE
      * -------------------------------------------------------------- */
diff --git a/gearbox/static/js/common/command-palette.js b/gearbox/static/js/common/command-palette.js
index 00c84e5..5f1975a 100644
--- a/gearbox/static/js/common/command-palette.js
+++ b/gearbox/static/js/common/command-palette.js
@@ -1,33 +1,35 @@
 /**
- * Command Palette — Cmd/Ctrl+K to open, search to filter, ↵ to select.
+ * Command Palette — slide-down panel anchored to the HeaderSearch input
+ * (issue #92 redesign).
  *
- * Subsumes the old box-switcher dialog: the palette is the single entry
- * point for "go to box X", "go to gear Y", and a small set of quick
- * actions (theme toggle, sidebar toggle, reorder sidebar, show shortcuts,
- * log out).
+ * No dedicated input anymore: the unified header-search input drives the
+ * palette. When its value starts with `>`, the panel below opens and
+ * lists boxes / gears / settings pages / global actions / per-gear
+ * commands ranked against the substring after `>`. Backspace from a
+ * single-`>` value closes the panel (handled by header-search.js).
  *
- * Catalog source: server-rendered JSON islands inside CommandPalette()
- * (#cmdk-boxes, #cmdk-gears) so first open is instant and survives offline.
- * Live status (the box dot) is hydrated from /bx/api/status and kept in
- * sync via SSE, exactly like the legacy switcher.
+ * Visuals:
+ *   - position: fixed, just below the header (top: 55px), horizontally
+ *     centered on the HeaderSearch input. No backdrop blur, no dim —
+ *     the rest of the page stays visible and interactive (VS Code).
+ *   - Width matches the search input (clamped to its computed width).
  *
  * Special interactions:
- *   - Enter on a Box   → switch to that box and close.
- *   - Ctrl+Enter on a Box → switch box, KEEP the palette open with the
- *                           input cleared, so the user can immediately
- *                           drill to a gear within that box.
- *   - Enter on a Gear  → navigate.
- *   - Enter on Action  → invoke the action's handler.
+ *   - Enter on Box → switch to that box and close. Ctrl+Enter keeps the
+ *     palette open with the active box flipped (rapid drill-down).
+ *   - Enter on Gear / Page → navigate.
+ *   - Enter on Action / per-gear Command → invoke handler.
  *
- * Recents: each successful selection pushes onto a localStorage list, capped
- * at 5 entries. Empty until the user picks something.
+ * Per-gear commands come from window.gearbox.commands.list() (registered
+ * via window.gearbox.commands.register in each gear's page script).
+ *
+ * Recents: last 5 picks of any kind, stored in localStorage.
  */
 (function () {
     'use strict';
 
     const RECENTS_KEY = 'gearbox-cmdk-recents';
     const RECENTS_MAX = 5;
-    const SVG_NS = 'http://www.w3.org/2000/svg';
 
     const STATUS_DOT_CLASSES = {
         green:   'bg-green-500 ring-1 ring-inset ring-green-600/40',
@@ -40,12 +42,13 @@
     /* -------------------------------------------------------------- *
      * Catalog
      * -------------------------------------------------------------- */
-    let boxes = [];   // [{id, name}]
-    let gears = [];   // [{name, label, path, enabled}]
-    let pages = [];   // [{name, label, path}]   (settings + profile pages, perm-filtered)
-    let actions = []; // [{id, label, subtitle?, run(), kbd?}]
+    let boxes = [];
+    let gears = [];
+    let pages = [];
+    let actions = [];
     const statusByBox = new Map();
     let activeBoxID = '';
+    let catalogLoaded = false;
 
     function loadJSONIsland(id) {
         const node = document.getElementById(id);
@@ -61,55 +64,33 @@
         const overlay = document.getElementById('cmdk-overlay');
         if (overlay) activeBoxID = overlay.dataset.activeBoxId || '';
         actions = buildActions();
+        catalogLoaded = true;
     }
 
     /* -------------------------------------------------------------- *
-     * Quick actions
+     * Quick actions (global)
      * -------------------------------------------------------------- */
     function buildActions() {
-        const list = [];
-        list.push({
-            id: 'theme:light', label: 'Theme: Light',
-            subtitle: 'Force the light theme for this device',
-            run: function () { if (typeof setTheme === 'function') setTheme('light'); },
-        });
-        list.push({
-            id: 'theme:dark', label: 'Theme: Dark',
-            subtitle: 'Force the dark theme for this device',
-            run: function () { if (typeof setTheme === 'function') setTheme('dark'); },
-        });
-        list.push({
-            id: 'theme:system', label: 'Theme: System',
-            subtitle: 'Match the OS theme preference',
-            run: function () { if (typeof setTheme === 'function') setTheme('system'); },
-        });
-        list.push({
-            id: 'sidebar:toggle', label: 'Toggle sidebar',
-            subtitle: 'Collapse or expand the navigation sidebar',
-            run: function () { if (typeof toggleSidebar === 'function') toggleSidebar(); },
-        });
-        list.push({
-            id: 'sidebar:reorder', label: 'Reorder sidebar',
-            subtitle: 'Enter drag-to-reorder mode for the gear list',
-            run: function () { if (typeof toggleSidebarEditMode === 'function') toggleSidebarEditMode(); },
-        });
-        list.push({
-            id: 'shortcuts:show', label: 'Show keyboard shortcuts',
-            subtitle: 'Open the shortcut reference', kbd: '?',
-            run: function () { if (typeof window.openShortcutHelp === 'function') window.openShortcutHelp(); },
-        });
-        list.push({
-            id: 'logout', label: 'Log out',
-            subtitle: 'End the current session',
-            run: function () {
-                const f = document.createElement('form');
-                f.method = 'POST';
-                f.action = '/logout';
-                document.body.appendChild(f);
-                f.submit();
-            },
-        });
-        return list;
+        return [
+            { id: 'theme:light',     label: 'Theme: Light',     subtitle: 'Force the light theme for this device',
+              run: function () { if (typeof setTheme === 'function') setTheme('light'); } },
+            { id: 'theme:dark',      label: 'Theme: Dark',      subtitle: 'Force the dark theme for this device',
+              run: function () { if (typeof setTheme === 'function') setTheme('dark'); } },
+            { id: 'theme:system',    label: 'Theme: System',    subtitle: 'Match the OS theme preference',
+              run: function () { if (typeof setTheme === 'function') setTheme('system'); } },
+            { id: 'sidebar:toggle',  label: 'Toggle sidebar',   subtitle: 'Collapse or expand the navigation sidebar',
+              run: function () { if (typeof toggleSidebar === 'function') toggleSidebar(); } },
+            { id: 'sidebar:reorder', label: 'Reorder sidebar',  subtitle: 'Enter drag-to-reorder mode for the gear list',
+              run: function () { if (typeof toggleSidebarEditMode === 'function') toggleSidebarEditMode(); } },
+            { id: 'shortcuts:show',  label: 'Show keyboard shortcuts', subtitle: 'Open the shortcut reference', kbd: '?',
+              run: function () { if (typeof window.openShortcutHelp === 'function') window.openShortcutHelp(); } },
+            { id: 'logout',          label: 'Log out',          subtitle: 'End the current session',
+              run: function () {
+                  const f = document.createElement('form');
+                  f.method = 'POST'; f.action = '/logout';
+                  document.body.appendChild(f); f.submit();
+              } },
+        ];
     }
 
     /* -------------------------------------------------------------- *
@@ -127,22 +108,17 @@
         const list = loadRecents();
         const filtered = list.filter(function (e) { return e.id !== entry.id; });
         filtered.unshift({ id: entry.id, kind: entry.kind });
-        const capped = filtered.slice(0, RECENTS_MAX);
-        try { localStorage.setItem(RECENTS_KEY, JSON.stringify(capped)); }
-        catch (_) { /* localStorage may be disabled */ }
+        try { localStorage.setItem(RECENTS_KEY, JSON.stringify(filtered.slice(0, RECENTS_MAX))); }
+        catch (_) {}
     }
     function getRecentItems() {
-        const recent = loadRecents();
-        const out = [];
-        recent.forEach(function (r) {
-            const item = lookupItem(r.kind, r.id);
-            if (item) out.push(item);
-        });
-        return out;
+        return loadRecents()
+            .map(function (r) { return lookupItem(r.kind, r.id); })
+            .filter(Boolean);
     }
 
     /* -------------------------------------------------------------- *
-     * Item lookup
+     * Item factories
      * -------------------------------------------------------------- */
     function gearItems() {
         return gears
@@ -160,6 +136,16 @@
             return { kind: 'action', id: a.id, label: a.label, subtitle: a.subtitle || '', kbd: a.kbd || '', action: a };
         });
     }
+    function gearCommandItems() {
+        if (!window.gearbox || !window.gearbox.commands) return [];
+        return window.gearbox.commands.list().map(function (c) {
+            return {
+                kind: 'gear-command', id: 'cmd:' + c.id, label: c.label,
+                subtitle: c.subtitle || '', kbd: c.kbd || '', group: c.group || 'Page',
+                command: c,
+            };
+        });
+    }
     function lookupItem(kind, id) {
         switch (kind) {
             case 'gear': {
@@ -182,6 +168,12 @@
                 if (!a) return null;
                 return { kind: 'action', id: id, label: a.label, subtitle: a.subtitle || '', kbd: a.kbd || '', action: a };
             }
+            case 'gear-command': {
+                // gear-command lookup intentionally skipped — these are
+                // page-scoped and won't survive recents across navigation
+                // anyway. Returning null filters the recent entry.
+                return null;
+            }
         }
         return null;
     }
@@ -196,11 +188,8 @@
         if (l === q) return 1000;
         const idx = l.indexOf(q);
         if (idx === 0) return 800;
-        if (idx > 0 && (l[idx - 1] === ' ' || l[idx - 1] === '/' || l[idx - 1] === '-')) {
-            return 700;
-        }
+        if (idx > 0 && (l[idx - 1] === ' ' || l[idx - 1] === '/' || l[idx - 1] === '-')) return 700;
         if (idx !== -1) return 500 - idx;
-        // Subsequence fallback.
         let li = 0;
         for (let qi = 0; qi < q.length; qi++) {
             const c = q[qi];
@@ -212,8 +201,11 @@
     }
 
     /* -------------------------------------------------------------- *
-     * Render helpers
+     * Render
      * -------------------------------------------------------------- */
+    let cursor = 0;
+    let lastVisible = [];
+
     function makeStatusDot(level) {
         const dot = document.createElement('span');
         dot.className = 'inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 ' +
@@ -221,19 +213,17 @@
         return dot;
     }
     function makeKindBadge(kind) {
-        // Simple, accessible kind glyph — colored bullet, no SVG.
-        const badge = document.createElement('span');
-        badge.className = 'inline-block w-2 h-2 rounded-sm flex-shrink-0 ' +
-            (kind === 'gear' ? 'bg-blue-400 dark:bg-blue-500' : 'bg-gray-300 dark:bg-gray-600');
-        return badge;
+        const cls = (
+            kind === 'gear' ? 'bg-blue-400 dark:bg-blue-500' :
+            kind === 'gear-command' ? 'bg-emerald-400 dark:bg-emerald-500' :
+            kind === 'page' ? 'bg-purple-400 dark:bg-purple-500' :
+            'bg-gray-300 dark:bg-gray-600'
+        );
+        const b = document.createElement('span');
+        b.className = 'inline-block w-2 h-2 rounded-sm flex-shrink-0 ' + cls;
+        return b;
     }
 
-    /* -------------------------------------------------------------- *
-     * Render
-     * -------------------------------------------------------------- */
-    let cursor = 0;
-    let lastVisible = [];
-
     function buildSection(title, items) {
         if (items.length === 0) return null;
         const section = document.createElement('div');
@@ -292,7 +282,11 @@
                 paintCursor();
             }
         });
-        row.addEventListener('click', function (e) {
+        row.addEventListener('mousedown', function (e) {
+            // mousedown not click — click fires after blur on the input,
+            // which would race with our re-render. mousedown lets us
+            // capture the pick before the focus-leave repaints empty.
+            e.preventDefault();
             const idx = lastVisible.indexOf(item);
             if (idx >= 0) cursor = idx;
             pick({ keepOpen: !!(e.ctrlKey || e.metaKey) });
@@ -310,7 +304,6 @@
             row.classList.toggle('dark:bg-slate-700', isCursor);
             row.setAttribute('aria-selected', isCursor ? 'true' : 'false');
             if (isCursor) {
-                // Auto-scroll to keep cursor in view.
                 const top = row.offsetTop;
                 const height = row.offsetHeight;
                 if (top < listEl.scrollTop) {
@@ -331,21 +324,44 @@
             .map(function (x) { return x.item; });
     }
 
+    function groupByGearCommands(items) {
+        // Group gear-command items by their `group` field. Returns an
+        // object keyed by group name → items[].
+        const out = {};
+        items.forEach(function (it) {
+            const g = (it.command && it.command.group) || 'Page';
+            if (!out[g]) out[g] = [];
+            out[g].push(it);
+        });
+        return out;
+    }
+
     function render() {
         const listEl = document.getElementById('cmdk-list');
-        const input = document.getElementById('cmdk-input');
-        if (!listEl || !input) return;
-        const q = (input.value || '').trim();
+        if (!listEl) return;
+        if (!catalogLoaded) loadCatalog();
+
+        const q = (window.HeaderSearch && window.HeaderSearch.getQuery() || '').trim();
         while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
         lastVisible = [];
 
-        const sections = [
-            { title: 'Recent', items: q ? [] : getRecentItems() },
-            { title: 'Boxes', items: rankItems(boxItems(), q) },
-            { title: 'Gears', items: rankItems(gearItems(), q) },
-            { title: 'Settings', items: rankItems(pageItems(), q) },
-            { title: 'Actions', items: rankItems(actionItems(), q) },
-        ];
+        const sections = [];
+
+        // Gear-scoped commands are grouped by their `group` so a page
+        // with multiple categories of commands (e.g. "Logs: source"
+        // vs "Logs: actions") can split itself sensibly.
+        const gearCmds = rankItems(gearCommandItems(), q);
+        const groups = groupByGearCommands(gearCmds);
+        Object.keys(groups).forEach(function (groupName) {
+            sections.push({ title: groupName, items: groups[groupName] });
+        });
+
+        if (!q) sections.unshift({ title: 'Recent', items: getRecentItems() });
+        sections.push({ title: 'Boxes',    items: rankItems(boxItems(), q) });
+        sections.push({ title: 'Gears',    items: rankItems(gearItems(), q) });
+        sections.push({ title: 'Settings', items: rankItems(pageItems(), q) });
+        sections.push({ title: 'Actions',  items: rankItems(actionItems(), q) });
+
         sections.forEach(function (s) {
             const block = buildSection(s.title, s.items);
             if (block) {
@@ -365,28 +381,62 @@
     }
 
     /* -------------------------------------------------------------- *
-     * Open / close / pick
+     * Open / close / position
      * -------------------------------------------------------------- */
-    let trap = null;
+    function panel() { return document.getElementById('header-search-panel'); }
+
+    function position() {
+        const p = panel();
+        const wrap = document.getElementById('header-search');
+        if (!p || !wrap) return;
+        const rect = wrap.getBoundingClientRect();
+
+        // Width: at least MIN_W so the list stays readable, at most
+        // MAX_W so it doesn't dominate wide monitors, and never wider
+        // than the viewport. Decoupled from the search wrap's own
+        // width, which on narrow viewports collapses to a 34px
+        // magnifying-glass button (issue #92 follow-up: the palette
+        // used to inherit that 34px and become an unusable strip).
+        const MIN_W = 360;
+        const MAX_W = 640;
+        const margin = 16;                       // 8px gutter each side
+        const available = window.innerWidth - margin;
+        const width = Math.min(MAX_W, Math.max(MIN_W, rect.width), available);
+
+        // Anchor centered on the search input, then clamp so the panel
+        // stays inside the viewport (relevant when the input is a tiny
+        // compact button sitting near the right edge on a phone).
+        let left = rect.left + rect.width / 2 - width / 2;
+        left = Math.max(margin / 2, Math.min(left, window.innerWidth - width - margin / 2));
+
+        p.style.left  = left + 'px';
+        p.style.width = width + 'px';
+        p.style.top   = (rect.bottom + 6) + 'px';
+    }
+
+    function isOpen() {
+        const p = panel();
+        return !!(p && !p.classList.contains('hidden'));
+    }
+
     function open() {
-        const overlay = document.getElementById('cmdk-overlay');
-        const input = document.getElementById('cmdk-input');
-        if (!overlay || !input) return;
-        loadCatalog();
-        overlay.classList.remove('hidden');
+        const p = panel();
+        if (!p) return;
+        if (!catalogLoaded) loadCatalog();
         cursor = 0;
-        input.value = '';
+        p.classList.remove('hidden');
+        position();
         render();
-        if (!trap) trap = window.createFocusTrap(overlay.querySelector('.cmdk-panel') || overlay);
-        trap.activate(input);
     }
     function close() {
-        const overlay = document.getElementById('cmdk-overlay');
-        if (!overlay) return;
-        overlay.classList.add('hidden');
-        if (trap) trap.deactivate();
+        const p = panel();
+        if (!p) return;
+        p.classList.add('hidden');
     }
 
+    /* -------------------------------------------------------------- *
+     * Pick
+     * -------------------------------------------------------------- */
     function pick(opts) {
         opts = opts || {};
         const item = lastVisible[cursor];
@@ -395,47 +445,51 @@
             case 'box':
                 pushRecent(item);
                 if (opts.keepOpen) {
-                    // Switch box without leaving — write the cookie via a
-                    // background request, then re-render so the gear list
-                    // reflects the new active box. Subsequent gear pick
-                    // will navigate to the right place.
                     activeBoxID = item.box.id;
-                    const input = document.getElementById('cmdk-input');
-                    if (input) input.value = '';
+                    if (window.HeaderSearch) window.HeaderSearch.setValue('>');
                     cursor = 0;
                     render();
                     fetch('/?box_id=' + encodeURIComponent(item.box.id), {
                         credentials: 'same-origin',
                         headers: { 'Accept': 'application/json' },
                         redirect: 'manual',
-                    }).catch(function () { /* best-effort */ });
+                    }).catch(function () {});
                     return;
                 }
-                window.switchBox(item.box.id, '/home');
-                close();
+                exitAndDo(function () { window.switchBox(item.box.id, '/home'); });
                 return;
             case 'gear':
                 pushRecent(item);
-                close();
-                window.location.assign(item.gear.path);
+                exitAndDo(function () { window.location.assign(item.gear.path); });
                 return;
             case 'page':
                 pushRecent(item);
-                close();
-                window.location.assign(item.page.path);
+                exitAndDo(function () { window.location.assign(item.page.path); });
                 return;
             case 'action':
                 pushRecent(item);
-                close();
-                if (item.action && typeof item.action.run === 'function') {
-                    setTimeout(item.action.run, 0);
-                }
+                exitAndDo(function () {
+                    if (item.action && typeof item.action.run === 'function') item.action.run();
+                });
+                return;
+            case 'gear-command':
+                // Per-page commands don't go in recents (the page may
+                // not be the same on next visit). Run and close.
+                exitAndDo(function () {
+                    if (item.command && typeof item.command.run === 'function') item.command.run();
+                });
                 return;
         }
     }
 
+    function exitAndDo(fn) {
+        if (window.HeaderSearch) window.HeaderSearch.exitPaletteMode();
+        close();
+        setTimeout(fn, 0);
+    }
+
     /* -------------------------------------------------------------- *
-     * Status sync (boxes)
+     * Status sync (boxes — unchanged from the prior implementation)
      * -------------------------------------------------------------- */
     function applyStatus(s) {
         if (!s || !s.box_id) return;
@@ -448,8 +502,7 @@
                     (STATUS_DOT_CLASSES[level] || STATUS_DOT_CLASSES.unknown);
             }
         }
-        const overlay = document.getElementById('cmdk-overlay');
-        if (overlay && !overlay.classList.contains('hidden')) render();
+        if (isOpen()) render();
     }
     function fetchStatus() {
         fetch('/bx/api/status', { credentials: 'same-origin' })
@@ -457,7 +510,7 @@
             .then(function (data) {
                 if (!data || !Array.isArray(data.rows)) return;
                 data.rows.forEach(applyStatus);
-            }).catch(function () { /* best-effort */ });
+            }).catch(function () {});
     }
     let evt = null;
     function subscribeSSE() {
@@ -480,49 +533,71 @@
     }
 
     /* -------------------------------------------------------------- *
-     * Wiring
+     * Wiring — drive open/close from HeaderSearch mode + Enter from
+     * the input itself (palette mode preempts header-search.dispatchSubmit).
      * -------------------------------------------------------------- */
     function init() {
-        const overlay = document.getElementById('cmdk-overlay');
-        const input = document.getElementById('cmdk-input');
-        if (!overlay || !input) return;
-
-        overlay.addEventListener('click', function (e) {
-            if (e.target === overlay) close();
+        if (!window.HeaderSearch) {
+            // header-search.js failed to load; nothing to attach.
+            return;
+        }
+        window.HeaderSearch.onModeChange(function (mode) {
+            if (mode === 'palette') open(); else close();
         });
-
-        input.addEventListener('input', function () {
+        window.HeaderSearch.onQueryChange(function () {
+            if (!isOpen()) return;
             cursor = 0;
             render();
         });
-        input.addEventListener('keydown', function (e) {
-            if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                cursor = Math.min(cursor + 1, lastVisible.length - 1);
-                paintCursor();
-            } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                cursor = Math.max(cursor - 1, 0);
-                paintCursor();
-            } else if (e.key === 'Enter') {
-                e.preventDefault();
-                pick({ keepOpen: e.ctrlKey || e.metaKey });
-            } else if (e.key === 'Escape') {
-                e.preventDefault();
-                close();
-            }
+
+        const input = document.getElementById('header-search-input');
+        if (input) {
+            input.addEventListener('keydown', function (e) {
+                if (!isOpen()) return;
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    cursor = Math.min(cursor + 1, lastVisible.length - 1);
+                    paintCursor();
+                } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    cursor = Math.max(cursor - 1, 0);
+                    paintCursor();
+                } else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    pick({ keepOpen: e.ctrlKey || e.metaKey });
+                }
+            });
+        }
+
+        // Reposition on viewport changes so the panel stays glued to
+        // the search box.
+        window.addEventListener('resize', function () { if (isOpen()) position(); });
+        window.addEventListener('scroll', function () { if (isOpen()) position(); }, true);
+
+        // Click outside → close. Click on the panel itself doesn't bubble
+        // through (we handle that via the row's own mousedown handler).
+        document.addEventListener('mousedown', function (e) {
+            if (!isOpen()) return;
+            const p = panel();
+            const wrap = document.getElementById('header-search');
+            if (p && p.contains(e.target)) return;
+            if (wrap && wrap.contains(e.target)) return;
+            // Outside click: drop palette mode (also closes the panel).
+            window.HeaderSearch.exitPaletteMode();
         });
 
+        // Live updates when a gear registers commands while the panel
+        // is open (e.g. lazy page-init wins the race).
+        if (window.gearbox && window.gearbox.commands) {
+            window.gearbox.commands.onChange(function () { if (isOpen()) render(); });
+        }
+
+        // `g b` legacy shortcut: still works, but now just enters
+        // palette mode (Cmd+K's job).
         const km = window.GearboxKeymap;
         let gPressed = false;
         let gTimer = 0;
         document.addEventListener('keydown', function (e) {
-            // Cmd/Ctrl+K — open from anywhere (also inside text inputs).
-            if (e.key === 'k' && km && km.isMeta(e) && !e.shiftKey && !e.altKey) {
-                e.preventDefault();
-                if (overlay.classList.contains('hidden')) open(); else close();
-                return;
-            }
             if (!km || km.isTypingTarget(e.target)) return;
             if (e.key === 'g' && !km.isMeta(e) && !e.altKey) {
                 gPressed = true;
@@ -533,7 +608,7 @@
             if (gPressed && e.key === 'b') {
                 e.preventDefault();
                 gPressed = false;
-                open();
+                window.HeaderSearch.enterPaletteMode();
             }
         });
 
@@ -541,11 +616,17 @@
         subscribeSSE();
     }
 
-    // Public entry points.
-    window.openCommandPalette = open;
-    window.closeCommandPalette = close;
-    // Back-compat: the chip's onclick handler still calls openBoxSwitcher().
-    window.openBoxSwitcher = open;
+    /* -------------------------------------------------------------- *
+     * Public surface
+     * -------------------------------------------------------------- */
+    window.openCommandPalette = function () {
+        if (window.HeaderSearch) window.HeaderSearch.enterPaletteMode();
+    };
+    window.closeCommandPalette = function () {
+        if (window.HeaderSearch) window.HeaderSearch.exitPaletteMode();
+    };
+    // Box-switcher chip still calls openBoxSwitcher() — keep the alias.
+    window.openBoxSwitcher = window.openCommandPalette;
 
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', init);
diff --git a/gearbox/static/js/common/gear-commands.js b/gearbox/static/js/common/gear-commands.js
new file mode 100644
index 0000000..38814f9
--- /dev/null
+++ b/gearbox/static/js/common/gear-commands.js
@@ -0,0 +1,170 @@
+/**
+ * gear-commands — per-page command palette + filter registration (issue #92).
+ *
+ * Two related APIs hang off `window.gearbox`:
+ *
+ *   window.gearbox.filter.register({
+ *     placeholder: 'Filter logs…',
+ *     onInput: (query) => { ... },      // every keystroke in search mode
+ *     onSubmit: (query) => { ... },     // optional: Enter pressed
+ *     onClear:  () => { ... },          // optional: clear button pressed
+ *   })
+ *
+ *   window.gearbox.commands.register({
+ *     id:       'logs.copy',            // stable id; replaces an earlier
+ *                                       //   registration with the same id
+ *     label:    'Copy logs to clipboard',
+ *     subtitle: 'Copy currently-visible log lines',  // optional
+ *     group:    'Logs',                 // section label in the palette
+ *     kbd:      'c',                    // optional hint
+ *     run:      () => { ... },          // invoked when the user picks it
+ *   })
+ *
+ * Both registrations are scoped to the current page: navigating away
+ * (turbo-style or full reload) drops them. Each gear's page script
+ * should call register() during DOMContentLoaded; clearForPage() is
+ * also exposed for explicit cleanup if a gear renders nested SPAs.
+ *
+ * Listeners can subscribe to changes via:
+ *   window.gearbox.commands.onChange(callback)
+ *   window.gearbox.filter.onChange(callback)
+ * The header-search + command-palette controllers use this to re-render
+ * when a gear registers commands after the palette has already opened.
+ */
+(function () {
+    'use strict';
+
+    const ns = window.gearbox = window.gearbox || {};
+
+    /* -------------------------------------------------------------- *
+     * Commands registry
+     * -------------------------------------------------------------- */
+    const commandList = [];       // ordered insertion; later wins on dupe id
+    const commandListeners = [];  // [(cmds) => void]
+
+    function notifyCommands() {
+        for (let i = 0; i < commandListeners.length; i++) {
+            try { commandListeners[i](commandList.slice()); }
+            catch (e) { console.error('gear-commands: listener threw', e); }
+        }
+    }
+
+    function registerCommand(cmd) {
+        if (!cmd || !cmd.id || !cmd.label || typeof cmd.run !== 'function') {
+            console.warn('gear-commands.register: invalid command', cmd);
+            return function () {};
+        }
+        // Replace any existing entry with the same id so a page can
+        // re-register on hot-reload without piling up dupes.
+        const idx = commandList.findIndex(function (c) { return c.id === cmd.id; });
+        const entry = {
+            id:       cmd.id,
+            label:    cmd.label,
+            subtitle: cmd.subtitle || '',
+            group:    cmd.group || 'Page',
+            kbd:      cmd.kbd || '',
+            run:      cmd.run,
+        };
+        if (idx >= 0) commandList[idx] = entry;
+        else commandList.push(entry);
+        notifyCommands();
+        return function unregister() {
+            const i = commandList.findIndex(function (c) { return c.id === entry.id; });
+            if (i >= 0) {
+                commandList.splice(i, 1);
+                notifyCommands();
+            }
+        };
+    }
+
+    function clearCommands() {
+        if (commandList.length === 0) return;
+        commandList.length = 0;
+        notifyCommands();
+    }
+
+    function getCommands() {
+        return commandList.slice();
+    }
+
+    function runCommandById(id) {
+        const cmd = commandList.find(function (c) { return c.id === id; });
+        if (!cmd) return false;
+        try { cmd.run(); } catch (e) { console.error('command run failed', e); }
+        return true;
+    }
+
+    function onCommandsChange(fn) {
+        if (typeof fn !== 'function') return function () {};
+        commandListeners.push(fn);
+        return function () {
+            const i = commandListeners.indexOf(fn);
+            if (i >= 0) commandListeners.splice(i, 1);
+        };
+    }
+
+    ns.commands = {
+        register: registerCommand,
+        clear:    clearCommands,
+        list:     getCommands,
+        run:      runCommandById,
+        onChange: onCommandsChange,
+    };
+
+    /* -------------------------------------------------------------- *
+     * Filter registry — only one filter is active at a time.
+     * -------------------------------------------------------------- */
+    let filterEntry = null;
+    const filterListeners = [];
+
+    function notifyFilter() {
+        for (let i = 0; i < filterListeners.length; i++) {
+            try { filterListeners[i](filterEntry); }
+            catch (e) { console.error('gear-commands.filter: listener threw', e); }
+        }
+    }
+
+    function registerFilter(opts) {
+        if (!opts || typeof opts.onInput !== 'function') {
+            console.warn('gear-commands.filter.register: missing onInput', opts);
+            return function () {};
+        }
+        filterEntry = {
+            placeholder: opts.placeholder || 'Filter…',
+            onInput:     opts.onInput,
+            onSubmit:    typeof opts.onSubmit === 'function' ? opts.onSubmit : null,
+            onClear:     typeof opts.onClear  === 'function' ? opts.onClear  : null,
+        };
+        notifyFilter();
+        return function clearThisFilter() {
+            if (filterEntry && filterEntry.onInput === opts.onInput) {
+                filterEntry = null;
+                notifyFilter();
+            }
+        };
+    }
+
+    function clearFilter() {
+        if (!filterEntry) return;
+        filterEntry = null;
+        notifyFilter();
+    }
+
+    function getFilter() { return filterEntry; }
+
+    function onFilterChange(fn) {
+        if (typeof fn !== 'function') return function () {};
+        filterListeners.push(fn);
+        return function () {
+            const i = filterListeners.indexOf(fn);
+            if (i >= 0) filterListeners.splice(i, 1);
+        };
+    }
+
+    ns.filter = {
+        register: registerFilter,
+        clear:    clearFilter,
+        current:  getFilter,
+        onChange: onFilterChange,
+    };
+})();
diff --git a/gearbox/static/js/common/header-search.js b/gearbox/static/js/common/header-search.js
new file mode 100644
index 0000000..d43d03a
--- /dev/null
+++ b/gearbox/static/js/common/header-search.js
@@ -0,0 +1,415 @@
+/**
+ * header-search — controller for the unified search / filter / palette
+ * input (issue #92).
+ *
+ * One text input drives three behaviours, picked by the current value:
+ *
+ *   - empty + no `>` prefix: idle. Shows the hint chips ("/ to search ·
+ *     Cmd K for palette"). On focus, hint is hidden.
+ *
+ *   - non-empty + no `>` prefix: SEARCH/FILTER mode. If a gear has
+ *     registered a filter via window.gearbox.filter.register, each
+ *     keystroke fires onInput(query) and Enter (optionally) fires
+ *     onSubmit(query). If no filter is registered, Enter falls back to
+ *     opening a DuckDuckGo search in a new tab (preserves the old home
+ *     gear behaviour).
+ *
+ *   - leading `>`: PALETTE mode. The slide-down panel
+ *     (#header-search-panel, defined in command-palette.js / base.templ)
+ *     opens beneath the input and ranks boxes / gears / settings pages
+ *     / global actions / per-gear commands using the substring after
+ *     the `>`. Backspace from a value of `>` (last char) drops back to
+ *     search mode and closes the panel.
+ *
+ * Keyboard:
+ *   `/`            anywhere → focus the input (skip if already typing).
+ *   `Cmd/Ctrl+K`   anywhere → focus the input and prepend `>` if absent.
+ *   `Esc`          from input → if palette mode, exit palette + clear;
+ *                                else blur. Universal-Esc handler in
+ *                                shortcut-help.js continues to handle
+ *                                cases when focus is elsewhere.
+ *
+ * The visual chevron icon to the left of the input swaps between a
+ * magnifying glass (search mode) and a chevron-right (palette mode).
+ *
+ * Public surface (used by other modules):
+ *   window.HeaderSearch.focus()
+ *   window.HeaderSearch.enterPaletteMode()   // prepend `>` and focus
+ *   window.HeaderSearch.exitPaletteMode()    // clear value, close panel
+ *   window.HeaderSearch.isPaletteMode()
+ *   window.HeaderSearch.getQuery()           // input value w/o `>` prefix
+ *   window.HeaderSearch.setValue(str)        // programmatic write
+ *   window.HeaderSearch.onModeChange(fn)
+ *   window.HeaderSearch.onQueryChange(fn)
+ *   window.HeaderSearch.onSubmit(fn)         // user pressed Enter
+ *   window.HeaderSearch.onEscape(fn)         // user pressed Esc in input
+ */
+(function () {
+    'use strict';
+
+    const PALETTE_PREFIX = '>';
+    const DDG_BASE = 'https://duckduckgo.com/';
+    const QUERY_PARAM = 'q';
+
+    /* -------------------------------------------------------------- *
+     * DOM references (resolved on init).
+     * -------------------------------------------------------------- */
+    let input = null;
+    let clearBtn = null;
+    let iconSearch = null;
+    let compactBtn = null;
+    let row = null;
+    let wrap = null;
+
+    /* -------------------------------------------------------------- *
+     * Event listeners
+     * -------------------------------------------------------------- */
+    const modeListeners = [];
+    const queryListeners = [];
+    const submitListeners = [];
+    const escapeListeners = [];
+    let lastMode = 'search'; // 'search' | 'palette'
+
+    function notify(list, arg) {
+        for (let i = 0; i < list.length; i++) {
+            try { list[i](arg); }
+            catch (e) { console.error('header-search listener threw', e); }
+        }
+    }
+
+    function currentMode() {
+        if (!input) return 'search';
+        return input.value.charAt(0) === PALETTE_PREFIX ? 'palette' : 'search';
+    }
+
+    function currentQuery() {
+        if (!input) return '';
+        const v = input.value;
+        return v.charAt(0) === PALETTE_PREFIX ? v.slice(1) : v;
+    }
+
+    /* -------------------------------------------------------------- *
+     * Filter registration. Gear-specific placeholders were removed per
+     * issue #92 follow-up: the input reads identically on every page
+     * (magnifier + hint chips), so registrations only matter for the
+     * onInput/onSubmit/onClear callbacks. We still call repaint() so
+     * the active-filter state can drive future visual cues.
+     * -------------------------------------------------------------- */
+    function applyFilterRegistration(_filter) {
+        if (!input) return;
+        repaint();
+    }
+
+    /* -------------------------------------------------------------- *
+     * Visual mode swap.
+     *
+     * The hint chips overlay the input via absolute positioning and
+     * use Tailwind's `peer-placeholder-shown:opacity-100 peer-focus:
+     * opacity-0` to drive their own visibility — they appear only
+     * when the input is empty AND not focused. No JS needed for them.
+     *
+     * What this function still owns:
+     *   - Magnifier icon: hidden (visibility:hidden) in palette mode
+     *     so the `>` character is the only affordance, but
+     *     space-preserved so the row width doesn't change.
+     *   - Clear button: visible iff the input has content; uses
+     *     `invisible` not `hidden` so its slot is always reserved
+     *     (otherwise the row would grow by ~24px on first keystroke).
+     *   - aria-expanded mirror for the palette panel.
+     *   - mode-change notifications for the palette controller.
+     *
+     * The wrapper has no focus ring, so the box looks identical
+     * across idle / focused / typing / palette states.
+     * -------------------------------------------------------------- */
+    function repaint() {
+        if (!input) return;
+        const mode = currentMode();
+        const empty = input.value.length === 0;
+
+        if (iconSearch) {
+            iconSearch.classList.toggle('invisible', mode === 'palette');
+        }
+
+        if (clearBtn) {
+            clearBtn.classList.remove('hidden');
+            clearBtn.classList.toggle('invisible', empty);
+        }
+
+        input.setAttribute('aria-expanded', mode === 'palette' ? 'true' : 'false');
+
+        if (mode !== lastMode) {
+            lastMode = mode;
+            notify(modeListeners, mode);
+        }
+    }
+
+    /* -------------------------------------------------------------- *
+     * Search-mode dispatch — fan-out to active filter callback.
+     * -------------------------------------------------------------- */
+    function dispatchSearchInput() {
+        const q = currentQuery();
+        notify(queryListeners, q);
+        if (currentMode() !== 'search') return;
+        const filter = window.gearbox && window.gearbox.filter && window.gearbox.filter.current();
+        if (filter && typeof filter.onInput === 'function') {
+            try { filter.onInput(q); }
+            catch (e) { console.error('filter.onInput threw', e); }
+        }
+    }
+
+    function dispatchSubmit() {
+        const q = currentQuery();
+        notify(submitListeners, q);
+        if (currentMode() !== 'search') return;
+        const filter = window.gearbox && window.gearbox.filter && window.gearbox.filter.current();
+        if (filter && typeof filter.onSubmit === 'function') {
+            try { filter.onSubmit(q); }
+            catch (e) { console.error('filter.onSubmit threw', e); }
+            return;
+        }
+        // Fallback: no gear-registered filter, no submit handler. Open
+        // DuckDuckGo in a new tab (preserves the old home-page behaviour
+        // so the search bar still works on any gear that doesn't take it
+        // over). Empty query: just blur.
+        const trimmed = q.trim();
+        if (!trimmed) {
+            input.blur();
+            return;
+        }
+        const target = DDG_BASE + '?' + new URLSearchParams({ [QUERY_PARAM]: trimmed }).toString();
+        window.open(target, '_blank', 'noopener');
+        clear();
+    }
+
+    /* -------------------------------------------------------------- *
+     * Public mode / value mutators
+     * -------------------------------------------------------------- */
+    function enterPaletteMode() {
+        if (!input) return;
+        if (input.value.charAt(0) !== PALETTE_PREFIX) {
+            input.value = PALETTE_PREFIX + input.value;
+        }
+        focus(/*selectAll*/ false);
+        // Position caret at end so further typing extends the query.
+        try { input.setSelectionRange(input.value.length, input.value.length); }
+        catch (_) {}
+        repaint();
+        dispatchSearchInput();
+    }
+
+    function exitPaletteMode() {
+        if (!input) return;
+        if (input.value.charAt(0) === PALETTE_PREFIX) {
+            input.value = '';
+            repaint();
+            dispatchSearchInput();
+        }
+    }
+
+    function clear() {
+        if (!input) return;
+        input.value = '';
+        repaint();
+        // Fire exactly one filter callback. Earlier this called both
+        // dispatchSearchInput() (→ filter.onInput('')) AND
+        // dispatchClear() (→ filter.onClear()), so most gears
+        // re-filtered twice and any side-effectful onClear would
+        // run alongside the empty-query path (Copilot review).
+        // Prefer onClear if the gear registered one; otherwise fall
+        // back to the standard empty-query dispatch.
+        notify(queryListeners, '');
+        const filter = window.gearbox && window.gearbox.filter && window.gearbox.filter.current();
+        if (filter && typeof filter.onClear === 'function') {
+            try { filter.onClear(); }
+            catch (e) { console.error('filter.onClear threw', e); }
+        } else if (filter && typeof filter.onInput === 'function') {
+            try { filter.onInput(''); }
+            catch (e) { console.error('filter.onInput threw', e); }
+        }
+    }
+
+    function focus(selectAll) {
+        if (!input) return;
+        if (window.matchMedia('(max-width: 767px)').matches) expandCompact();
+        input.focus();
+        if (selectAll && typeof input.select === 'function') input.select();
+    }
+
+    function setValue(v) {
+        if (!input) return;
+        input.value = v == null ? '' : String(v);
+        repaint();
+        dispatchSearchInput();
+    }
+
+    /* -------------------------------------------------------------- *
+     * Mobile compact / expanded toggle.
+     *
+     * Below md (<768px) the row is `hidden md:flex` in markup, so it's
+     * display:none by default and only the magnifying-glass compact
+     * button shows. expandCompact()/collapseCompact() flip a single
+     * marker class — `header-search-expanded` — that pairs with a CSS
+     * rule below (in base.templ <style>) to override `hidden` and
+     * surface the row as an overlay sheet under the header.
+     *
+     * Earlier versions toggled `flex`/`hidden` directly, but that
+     * overrode the responsive `md:flex` and stuck the row visible
+     * even when the viewport widened back above md.
+     * -------------------------------------------------------------- */
+    function expandCompact() {
+        if (!row) return;
+        row.classList.add('header-search-expanded');
+    }
+    function collapseCompact() {
+        if (!row) return;
+        if (!window.matchMedia('(max-width: 767px)').matches) return;
+        row.classList.remove('header-search-expanded');
+    }
+
+    /* -------------------------------------------------------------- *
+     * Wiring
+     * -------------------------------------------------------------- */
+    function init() {
+        input       = document.getElementById('header-search-input');
+        clearBtn    = document.getElementById('header-search-clear');
+        iconSearch  = document.getElementById('header-search-icon-search');
+        compactBtn  = document.getElementById('header-search-compact');
+        row         = document.getElementById('header-search-row');
+        wrap        = document.getElementById('header-search');
+        if (!input) return;
+
+        if (window.gearbox && window.gearbox.filter) {
+            applyFilterRegistration(window.gearbox.filter.current());
+            window.gearbox.filter.onChange(applyFilterRegistration);
+        }
+
+        input.addEventListener('input', function () {
+            repaint();
+            dispatchSearchInput();
+        });
+
+        input.addEventListener('focus', repaint);
+        input.addEventListener('blur', function () {
+            // Defer repaint a tick so click on the panel (which steals
+            // focus briefly) doesn't mark the hint visible immediately.
+            setTimeout(repaint, 0);
+        });
+
+        input.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') {
+                if (currentMode() === 'palette') return; // palette handles its own Enter
+                e.preventDefault();
+                dispatchSubmit();
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                if (currentMode() === 'palette') {
+                    exitPaletteMode();
+                    return;
+                }
+                if (input.value.length > 0) {
+                    clear();
+                    return;
+                }
+                notify(escapeListeners);
+                input.blur();
+                collapseCompact();
+                return;
+            }
+            if (e.key === 'Backspace' && input.value === PALETTE_PREFIX) {
+                // Drop out of palette mode cleanly on the last-character
+                // backspace (caret would otherwise leave an empty input
+                // and we'd repaint to search mode anyway, but the panel
+                // close needs to be deterministic).
+                e.preventDefault();
+                exitPaletteMode();
+                return;
+            }
+        });
+
+        if (clearBtn) {
+            clearBtn.addEventListener('click', function (e) {
+                e.preventDefault();
+                clear();
+                focus(false);
+            });
+        }
+
+        if (compactBtn) {
+            compactBtn.addEventListener('click', function (e) {
+                e.preventDefault();
+                expandCompact();
+                input.focus();
+            });
+        }
+
+        // Compact-mode: clicking outside the search collapses the row.
+        // Check the .header-search-expanded marker rather than the
+        // `hidden` class — the row's templ markup is `hidden md:flex`,
+        // so it ALWAYS carries `hidden` and the old check effectively
+        // disabled the outside-click collapse (Copilot review). The
+        // overlay state is driven by the marker class, not by toggling
+        // `hidden` directly.
+        document.addEventListener('click', function (e) {
+            if (!window.matchMedia('(max-width: 767px)').matches) return;
+            if (!row || !row.classList.contains('header-search-expanded')) return;
+            if (wrap && wrap.contains(e.target)) return;
+            // Don't collapse while the palette panel is the click target.
+            const panel = document.getElementById('header-search-panel');
+            if (panel && panel.contains(e.target)) return;
+            collapseCompact();
+        });
+        window.addEventListener('resize', function () {
+            if (window.matchMedia('(min-width: 768px)').matches) {
+                // md+ always shows the row via the `hidden md:flex`
+                // responsive rule — no JS toggling needed. We just
+                // clear the compact-overlay marker so a fresh narrow→
+                // wide transition leaves the row in its normal slot.
+                if (row) row.classList.remove('header-search-expanded');
+            } else if (document.activeElement !== input) {
+                collapseCompact();
+            }
+        });
+
+        const km = window.GearboxKeymap;
+        document.addEventListener('keydown', function (e) {
+            // Cmd/Ctrl+K — focus + enter palette mode from anywhere.
+            if (km && km.isMeta(e) && !e.shiftKey && !e.altKey && (e.key === 'k' || e.key === 'K')) {
+                e.preventDefault();
+                enterPaletteMode();
+                return;
+            }
+            // `/` — focus the input. Skip when the user is already
+            // typing somewhere (form fields, contentEditable).
+            if (e.key === '/' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                if (km && km.isTypingTarget(e.target)) return;
+                e.preventDefault();
+                focus(true);
+                return;
+            }
+        });
+
+        repaint();
+    }
+
+    window.HeaderSearch = {
+        focus: focus,
+        enterPaletteMode: enterPaletteMode,
+        exitPaletteMode: exitPaletteMode,
+        isPaletteMode: function () { return currentMode() === 'palette'; },
+        getQuery: currentQuery,
+        setValue: setValue,
+        clear: clear,
+        onModeChange: function (fn) { if (typeof fn === 'function') modeListeners.push(fn); },
+        onQueryChange: function (fn) { if (typeof fn === 'function') queryListeners.push(fn); },
+        onSubmit: function (fn) { if (typeof fn === 'function') submitListeners.push(fn); },
+        onEscape: function (fn) { if (typeof fn === 'function') escapeListeners.push(fn); },
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
diff --git a/gearbox/static/js/common/shortcut-help.js b/gearbox/static/js/common/shortcut-help.js
index 14f04e0..be479e4 100644
--- a/gearbox/static/js/common/shortcut-help.js
+++ b/gearbox/static/js/common/shortcut-help.js
@@ -1,35 +1,43 @@
 /**
- * Shortcut Help — "?" overlay with the global keyboard shortcut reference.
+ * Shortcut Help — `?`-opens reference (issue #92 redesign).
  *
- * Smoked-glass styling per the issue: full-viewport backdrop, blurred
- * background; content panel uses bg-white/5 + backdrop-blur so the page
- * behind shows through. Open with `?` (Shift+/) from anywhere except
- * inside a text input. Close with `?`, Esc, or click outside.
+ * Now a full-window smoked-glass overlay (no panel, no card, no border).
+ * Shortcuts render in centered two-column grid directly on the blurred
+ * backdrop. Close with `?`, `Esc`, or click anywhere on the backdrop.
  *
- * The shortcut list is data-driven so future additions don't need to
- * touch the HTML — extend SHORTCUTS and the table re-renders on open.
+ * Also owns the universal-Esc handler: priority order top-to-bottom is
+ *   1. A per-modal handler already called preventDefault → bail.
+ *   2. A visible dialog → close the topmost (covers cmdk, alert,
+ *      confirm, prompt, plus the mobile Filters sheet and sidebar
+ *      context menu).
+ *   3. A gear is in edit mode (a `.gear-cog-btn[aria-pressed="true"]`)
+ *      → click the cog to exit.
+ *   4. A focusable control has focus → blur.
+ *   5. Fall through to history.back() as a last resort.
+ *
+ * Note: `/`-to-focus-the-page-filter is no longer here. The unified
+ * HeaderSearch input owns the `/` shortcut and dispatches keystrokes
+ * to whatever filter the current gear registered via
+ * window.gearbox.filter.register (see common/gear-commands.js).
  */
 (function () {
     'use strict';
 
-    // `join` controls the visual separator between kbd chips for
-    // multi-key shortcuts: '+' for a chord (press together), 'then' for
-    // a sequence (press in order), '/' for "either of these keys".
-    // Single-key rows leave `join` unset and render no separator.
+    // Multi-key separator: '+' = press together, 'then' = press in
+    // sequence, '/' = either. Single-key rows leave join unset.
     const SHORTCUTS = [
-        { keys: ['?'],                    label: 'Show this help' },
-        { keys: ['Cmd/Ctrl', 'K'],        label: 'Open command palette',                              join: '+' },
-        { keys: ['g', 'b'],               label: 'Switch box (palette)',                              join: 'then' },
-        { keys: ['/'],                    label: 'Focus the page search input' },
-        { keys: ['Esc'],                  label: 'Close dialog · exit edit mode · blur input · go back' },
-        { keys: ['↑', '↓'],               label: 'Navigate dialog items',                             join: '/' },
-        { keys: ['↵'],                    label: 'Select highlighted item' },
-        { keys: ['Tab'],                  label: 'Cycle focus within a dialog' },
-        { keys: ['Ctrl+↵'],               label: 'In palette: switch box but keep palette open' },
+        { keys: ['?'],                  label: 'Show this help' },
+        { keys: ['/'],                  label: 'Focus the search bar' },
+        { keys: ['Cmd/Ctrl', 'K'],      label: 'Open command palette',                                 join: '+' },
+        { keys: ['>'],                  label: 'In search bar: switch to palette mode' },
+        { keys: ['g', 'b'],             label: 'Open palette (legacy chord)',                          join: 'then' },
+        { keys: ['Esc'],                label: 'Close dialog · exit edit mode · clear search · go back' },
+        { keys: ['↑', '↓'],             label: 'Navigate palette items',                               join: '/' },
+        { keys: ['↵'],                  label: 'Select / run highlighted item' },
+        { keys: ['Tab'],                label: 'Cycle focus within a dialog' },
+        { keys: ['Ctrl+↵'],             label: 'In palette: switch box but keep palette open' },
     ];
 
-    let trap = null;
-
     function renderShortcuts() {
         const list = document.getElementById('shortcuts-help-list');
         if (!list) return;
@@ -37,9 +45,9 @@
         const km = window.GearboxKeymap;
         SHORTCUTS.forEach(function (s) {
             const row = document.createElement('div');
-            row.className = 'flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg hover:bg-white/5 transition-colors';
+            row.className = 'flex items-center justify-between gap-3 px-2 py-2 border-b border-white/5 last:border-b-0';
             const label = document.createElement('span');
-            label.className = 'text-sm text-white/90';
+            label.className = 'text-sm text-white/85';
             label.textContent = s.label;
             row.appendChild(label);
 
@@ -48,14 +56,13 @@
             s.keys.forEach(function (k, i) {
                 if (i > 0 && s.join) {
                     const sep = document.createElement('span');
-                    sep.className = 'text-[10px] text-white/50 px-0.5';
+                    sep.className = 'text-[10px] text-white/40 px-0.5';
                     sep.textContent = s.join;
                     keys.appendChild(sep);
                 }
                 const kbd = document.createElement('kbd');
                 kbd.className = 'inline-flex items-center justify-center min-w-[1.75rem] px-2 h-6 text-[11px] font-mono ' +
                     'text-white/90 bg-white/10 border border-white/20 rounded';
-                // Map common labels to the right symbol on macOS.
                 if (km && km.isMacOS() && k === 'Cmd/Ctrl') {
                     kbd.textContent = '⌘';
                 } else if (k === 'Cmd/Ctrl') {
@@ -70,20 +77,37 @@
         });
     }
 
+    let returnFocusEl = null;
+
     function open() {
         const overlay = document.getElementById('shortcuts-help-overlay');
         if (!overlay) return;
         renderShortcuts();
+        // Remember whoever had focus so we can hand it back on close.
+        returnFocusEl = document.activeElement;
         overlay.classList.remove('hidden');
-        const panel = overlay.querySelector('.shortcuts-help-panel');
-        if (!trap) trap = window.createFocusTrap(panel || overlay);
-        trap.activate(panel || overlay);
+        // The overlay is role="dialog" aria-modal="true"; move focus
+        // into it so the dialog is announced by screen readers and
+        // subsequent Tab/Esc keystrokes land here, not on the page
+        // behind. The overlay has no interactive controls (clicking
+        // anywhere closes), so a single focusable container is enough
+        // — no formal trap needed (Copilot a11y review).
+        overlay.setAttribute('tabindex', '-1');
+        try { overlay.focus({ preventScroll: true }); }
+        catch (_) { overlay.focus(); }
     }
     function close() {
         const overlay = document.getElementById('shortcuts-help-overlay');
         if (!overlay) return;
         overlay.classList.add('hidden');
-        if (trap) trap.deactivate();
+        // Restore focus to whatever opened the overlay (typically the
+        // page body or a button), so keyboard users don't get dumped
+        // back at the top of the document.
+        if (returnFocusEl && typeof returnFocusEl.focus === 'function') {
+            try { returnFocusEl.focus({ preventScroll: true }); }
+            catch (_) { returnFocusEl.focus(); }
+        }
+        returnFocusEl = null;
     }
 
     function init() {
@@ -91,18 +115,15 @@
         if (!overlay) return;
 
         overlay.addEventListener('click', function (e) {
-            if (e.target === overlay) close();
-        });
-        overlay.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                close();
-            }
+            // Click anywhere on the backdrop closes the help — there
+            // is no panel and no close button. The shortcut rows
+            // themselves are non-interactive text so clicking them
+            // is treated as backdrop, too.
+            close();
         });
 
         const km = window.GearboxKeymap;
         document.addEventListener('keydown', function (e) {
-            // `?` (Shift+/) — global. Skipped when typing in inputs.
             if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
                 if (km && km.isTypingTarget(e.target)) return;
                 e.preventDefault();
@@ -110,22 +131,9 @@
             }
         });
 
-        // `Esc` — universal "back out" key. Priority order, top wins:
-        //   1. A per-modal handler already called preventDefault — bail.
-        //      (cmdk input, shortcuts-help overlay, etc.)
-        //   2. A dialog is open — close the topmost one. Catches the
-        //      pre-existing list (cmdk/help/confirm/prompt/alert) plus
-        //      every `[role="dialog"]` that lacks its own Esc handler.
-        //   3. A gear is in edit mode (a `.gear-cog-btn` is pressed) —
-        //      click the cog to exit. Home, Metrics, and future gears.
-        //   4. A focusable control has focus — blur it. Lets the user
-        //      `/`→type→Esc→Esc to bounce back to the previous gear.
-        //   5. Fall through to `history.back()` as a last resort.
-        //
-        // Browsers dropped native Esc-as-back because of accidental
-        // form-data loss; the priority chain above mirrors that intent
-        // by handling every "back out of something on the page" case
-        // before nav is even considered.
+        // Universal Esc handler — unchanged behaviour from the prior
+        // implementation, just kept here since this file already owns
+        // the help overlay's open state.
         function isBlurrableTarget(el) {
             if (!el) return false;
             const tag = el.tagName;
@@ -141,10 +149,6 @@
             return true;
         }
         function visibleDialogs() {
-            // Anything tagged as a dialog/modal by ARIA. Backstops:
-            // a couple of legacy overlays that don't carry role yet
-            // (#cmdk-overlay does carry it; the narrow-viewport
-            // Filters sheet and the sidebar context menu don't).
             const out = [];
             document.querySelectorAll('[role="dialog"], [aria-modal="true"]').forEach(function (el) {
                 if (isVisible(el)) out.push(el);
@@ -158,10 +162,6 @@
             return out;
         }
         function pickTopDialog(list) {
-            // Highest z-index wins; ties broken by DOM order (later =
-            // on top in the painting model). Crude but good enough —
-            // we just need to avoid closing a dialog underneath an
-            // open one.
             let top = null;
             let topZ = -Infinity;
             let topIdx = -1;
@@ -177,11 +177,6 @@
             return top;
         }
         function clickCloseButton(dialog) {
-            // Try to invoke any existing close button so per-modal
-            // cleanup (state resets, focus restoration, persistence)
-            // runs. Selector list covers every close-button convention
-            // I found in the templates: aria-label, generic data-*,
-            // and the per-modal `data-<name>-close|dismiss` flavour.
             const buttons = dialog.querySelectorAll('button, [role="button"], a');
             for (let i = 0; i < buttons.length; i++) {
                 const btn = buttons[i];
@@ -209,16 +204,17 @@
             if (list.length === 0) return false;
             const top = pickTopDialog(list);
             if (!top) return false;
-            // Special-case the narrow-viewport Filters sheet: it has
-            // a dedicated toggler that also flips header layout state.
             if (top.id === 'header-page-content' &&
                 typeof window.toggleHeaderFilters === 'function') {
                 window.toggleHeaderFilters();
                 return true;
             }
+            // Help overlay has no close button — handle directly.
+            if (top.id === 'shortcuts-help-overlay') {
+                close();
+                return true;
+            }
             if (clickCloseButton(top)) return true;
-            // Last resort: just hide it. Better than letting Esc fall
-            // through to history.back() with a modal still on screen.
             top.classList.add('hidden');
             return true;
         }
@@ -231,8 +227,6 @@
         document.addEventListener('keydown', function (e) {
             if (e.key !== 'Escape') return;
             if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
-            // A per-modal handler already consumed it (cmdk, help,
-            // icon-picker, etc. all call preventDefault).
             if (e.defaultPrevented) return;
             if (closeTopmostDialog()) { e.preventDefault(); return; }
             if (exitGearEditMode())   { e.preventDefault(); return; }
@@ -242,63 +236,11 @@
                 e.preventDefault();
                 return;
             }
-            // Same-origin back nav only — `document.referrer` is empty
-            // on direct loads, so checking history.length > 1 is the
-            // best proxy we have in-browser.
             if (window.history.length > 1) {
                 e.preventDefault();
                 window.history.back();
             }
         });
-
-        // `/` — focus the page's primary search/filter input if one
-        // exists. Universal "start searching" convention (GitHub, Linear,
-        // Slack). The candidate list is in priority order: each page is
-        // expected to have *one* primary filter, and the first existing
-        // match wins. Pages that have no filter (Metrics, Settings)
-        // simply do nothing on `/`. The Home page wires its own `/`
-        // handler in static/js/gears/home.js; it fires first and the
-        // isTypingTarget guard below makes this listener bail once its
-        // input is focused, so there's no double-trigger.
-        const FILTER_CANDIDATES = [
-            '#bx-search',              // Bx fleet
-            '#pkg-search',             // OS Updates packages
-            '#filter-input',           // Logs
-            '#alert-search',           // Alerts
-            '#service-filter',         // Services
-            '#global-backend-filter',  // HAProxy overview (backends)
-            '#blocked-ip-search',      // Security dashboard
-            '#viz-filter',             // Traffic visualization
-            '#search-entity',          // Disabled entities (admin)
-            '#home-search-input',      // Home bookmark search (also bound by home.js)
-        ];
-        document.addEventListener('keydown', function (e) {
-            if (e.key !== '/') return;
-            if (km && km.isTypingTarget(e.target)) return;
-            for (let i = 0; i < FILTER_CANDIDATES.length; i++) {
-                const el = document.querySelector(FILTER_CANDIDATES[i]);
-                if (!el) continue;
-                e.preventDefault();
-                // If the target sits inside #header-page-content and the
-                // viewport is below md, the page-toolbar is hidden behind
-                // the Filters pill. Pop the sheet open first so the focus
-                // call lands on something visible.
-                const headerContent = document.getElementById('header-page-content');
-                const narrow = window.matchMedia('(max-width: 767px)').matches;
-                if (narrow && headerContent && headerContent.contains(el) &&
-                    !headerContent.classList.contains('filters-open') &&
-                    typeof window.toggleHeaderFilters === 'function') {
-                    window.toggleHeaderFilters();
-                }
-                // Defer focus so the popover paints before focus moves —
-                // focusing a display:none element silently fails.
-                setTimeout(function () {
-                    el.focus();
-                    if (typeof el.select === 'function') el.select();
-                }, 0);
-                return;
-            }
-        });
     }
 
     window.openShortcutHelp = open;
diff --git a/gearbox/static/js/gears/home.js b/gearbox/static/js/gears/home.js
index ea208e1..64134de 100644
--- a/gearbox/static/js/gears/home.js
+++ b/gearbox/static/js/gears/home.js
@@ -1299,55 +1299,89 @@
     });
   }
 
-  /* --- Search bar — '/' to focus, bookmark-search on Enter --- */
-
-  const searchForm = document.getElementById("home-search");
-  const searchInput = document.getElementById("home-search-input");
-
-  if (searchInput) {
-    document.addEventListener("keydown", (ev) => {
-      if (ev.key !== "/") return;
-      const tag = (document.activeElement && document.activeElement.tagName) || "";
-      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-      ev.preventDefault();
-      searchInput.focus();
-      searchInput.select();
+  /* --- Search bar — drives tile-search via the global HeaderSearch
+         input (issue #92). Each keystroke fades non-matching tiles;
+         Enter opens the first matching tile, or falls back to a
+         DuckDuckGo search when nothing on the page matches. --- */
+
+  function applyTileFilter(rawQuery) {
+    const q = (rawQuery || "").trim().toLowerCase();
+    const items = grid.querySelectorAll(".grid-stack-item");
+    items.forEach((item) => {
+      if (!q) {
+        item.style.opacity = "";
+        item.style.pointerEvents = "";
+        item.style.filter = "";
+        return;
+      }
+      const nameEl = item.querySelector(".home-tile-name");
+      const name = (nameEl?.textContent || item.dataset.tileName || "").toLowerCase();
+      const host = (item.dataset.tileUrl || "").toLowerCase();
+      const hit = name.includes(q) || host.includes(q);
+      // Don't actually unmount tiles — that would force GridStack to
+      // re-layout. Just fade non-matches so the user sees what they're
+      // typing toward without losing the board's spatial memory.
+      item.style.opacity = hit ? "" : "0.18";
+      item.style.pointerEvents = hit ? "" : "none";
+      item.style.filter = hit ? "" : "grayscale(0.6)";
     });
   }
 
-  if (searchForm) {
-    // Always preventDefault on submit and dispatch via window.open. The
-    // page's CSP enforces `form-action 'self'`, which blocks the native
-    // form submission to https://duckduckgo.com — the new tab opens to
-    // about:blank instead of the search results page (issue: "search bar
-    // doesn't work; opens a new tab at 'about:blank'"). window.open
-    // isn't governed by form-action, so it goes through cleanly. As a
-    // bonus, the bookmark-search and web-search paths now share the
-    // same dispatch helper.
-    const SEARCH_BASE = searchForm.action || "https://duckduckgo.com/";
-    const QUERY_PARAM = searchInput?.name || "q";
-    searchForm.addEventListener("submit", (ev) => {
-      ev.preventDefault();
-      const raw = (searchInput && searchInput.value.trim()) || "";
-      if (!raw) return;
-      const q = raw.toLowerCase();
-
-      // Bookmark-search: if any tile's display name contains the query,
-      // open the first match instead of doing a web search.
-      let matched = null;
-      grid.querySelectorAll(".home-tile-name").forEach((el) => {
-        if (matched) return;
-        if (el.textContent.toLowerCase().includes(q)) {
-          const a = el.closest("a[data-tile-link]");
-          if (a) matched = a.href;
-        }
-      });
+  if (window.gearbox && window.gearbox.filter) {
+    window.gearbox.filter.register({
+      placeholder: "Filter or search…",
+      onInput: applyTileFilter,
+      onClear: () => applyTileFilter(""),
+      onSubmit: (rawQuery) => {
+        const raw = (rawQuery || "").trim();
+        if (!raw) return;
+        // Bookmark-jump: if any visible tile matches, open it. Otherwise
+        // fall through to DuckDuckGo. We re-check matches here rather
+        // than reusing applyTileFilter's state in case the user submits
+        // before the fade settles.
+        const q = raw.toLowerCase();
+        let matched = null;
+        grid.querySelectorAll(".home-tile-name").forEach((el) => {
+          if (matched) return;
+          if (el.textContent.toLowerCase().includes(q)) {
+            const a = el.closest("a[data-tile-link]");
+            if (a) matched = a.href;
+          }
+        });
+        const target = matched
+          ? matched
+          : "https://duckduckgo.com/?" + new URLSearchParams({ q: raw }).toString();
+        window.open(target, "_blank", "noopener");
+        // Clear the input (the HeaderSearch onClear will also un-fade).
+        if (window.HeaderSearch) window.HeaderSearch.clear();
+      },
+    });
+  }
 
-      const target = matched
-        ? matched
-        : SEARCH_BASE + "?" + new URLSearchParams({ [QUERY_PARAM]: raw }).toString();
-      window.open(target, "_blank", "noopener");
-      searchInput.value = "";
+  // Home-gear commands surfaced through the command palette (>+text or
+  // Cmd+K). Adding a tile and toggling the edit cog are common enough to
+  // earn a palette entry; landing-page toggle is power-user but still
+  // discoverable here.
+  if (window.gearbox && window.gearbox.commands) {
+    window.gearbox.commands.register({
+      id: "home.add-tile",
+      label: "Add tile",
+      subtitle: "Open the new-tile dialog",
+      group: "Home",
+      run: () => {
+        const btn = document.getElementById("home-add-tile");
+        if (btn) btn.click();
+      },
+    });
+    window.gearbox.commands.register({
+      id: "home.toggle-edit",
+      label: "Toggle edit mode",
+      subtitle: "Enter drag-to-arrange + tile-edit mode",
+      group: "Home",
+      run: () => {
+        const btn = document.getElementById("home-edit-toggle");
+        if (btn) btn.click();
+      },
     });
   }
 
diff --git a/gearbox/static/js/os-updates/os-updates-page.js b/gearbox/static/js/os-updates/os-updates-page.js
index 32a5a61..87cf35f 100644
--- a/gearbox/static/js/os-updates/os-updates-page.js
+++ b/gearbox/static/js/os-updates/os-updates-page.js
@@ -188,6 +188,59 @@ document.addEventListener('DOMContentLoaded', function() {
 			setTimeout(autoCheckForUpdates, 500);
 		}
 	}
+
+	// HeaderSearch wiring (issue #92). #pkg-search is now a hidden
+	// input that the Tabulator datagrid latches onto via its searchInput
+	// option; the global HeaderSearch dispatches `input` events on it so
+	// the existing datagrid filter pipeline keeps working unchanged.
+	if (window.gearbox && window.gearbox.filter) {
+		const pkgSearch = document.getElementById('pkg-search');
+		window.gearbox.filter.register({
+			placeholder: 'Search packages…',
+			onInput: function (q) {
+				if (!pkgSearch) return;
+				pkgSearch.value = q || '';
+				pkgSearch.dispatchEvent(new Event('input', { bubbles: true }));
+			},
+			onClear: function () {
+				if (!pkgSearch) return;
+				pkgSearch.value = '';
+				pkgSearch.dispatchEvent(new Event('input', { bubbles: true }));
+			},
+		});
+	}
+	if (window.gearbox && window.gearbox.commands) {
+		const cmds = window.gearbox.commands;
+		const viewSel = document.getElementById('pkg-view-filter');
+		if (viewSel) {
+			Array.from(viewSel.options).forEach(function (opt) {
+				cmds.register({
+					id: 'osupdates.view.' + opt.value,
+					label: 'View: ' + opt.text,
+					subtitle: 'Filter the package list',
+					group: 'OS Updates',
+					run: function () {
+						viewSel.value = opt.value;
+						if (typeof onPkgViewFilterChange === 'function') onPkgViewFilterChange(opt.value);
+					},
+				});
+			});
+		}
+		cmds.register({
+			id: 'osupdates.check',
+			label: 'Check for updates',
+			subtitle: 'Run apt update on the active host',
+			group: 'OS Updates',
+			run: function () { if (typeof checkForUpdates === 'function') checkForUpdates(); },
+		});
+		cmds.register({
+			id: 'osupdates.install-package',
+			label: 'Install package…',
+			subtitle: 'Open the apt-install dialog',
+			group: 'OS Updates',
+			run: function () { if (typeof showAptInstallModal === 'function') showAptInstallModal(); },
+		});
+	}
 });
 
 // Central Escape key handler — closes whichever modal is currently visible.
diff --git a/gearbox/static/js/traffic/traffic-visualization.js b/gearbox/static/js/traffic/traffic-visualization.js
index 0b86e9f..aa964df 100644
--- a/gearbox/static/js/traffic/traffic-visualization.js
+++ b/gearbox/static/js/traffic/traffic-visualization.js
@@ -2440,3 +2440,33 @@ const zoomOutBtn = document.getElementById('zoom-out-btn');
 if (zoomOutBtn) {
 	zoomOutBtn.addEventListener('click', zoomOut);
 }
+
+// Command palette wiring (issue #92). Traffic has no text filter — the
+// existing #viz-filter dropdown stays — but every dropdown option and
+// every action button gets a palette entry so keyboard-only operators
+// can drive the page via Cmd+K → `>`.
+if (window.gearbox && window.gearbox.commands) {
+	const cmds = window.gearbox.commands;
+	if (vizFilterSelect) {
+		Array.from(vizFilterSelect.options).forEach(function (opt) {
+			cmds.register({
+				id: 'traffic.view.' + opt.value,
+				label: 'View: ' + opt.text,
+				subtitle: 'Filter the topology by traffic class',
+				group: 'Traffic',
+				run: function () {
+					vizFilterSelect.value = opt.value;
+					if (typeof changeVizFilter === 'function') changeVizFilter(opt.value);
+				},
+			});
+		});
+	}
+	cmds.register({ id: 'traffic.reset',   label: 'Reset visualization',  group: 'Traffic',
+		subtitle: 'Re-center and re-fit the network graph',
+		run: function () { if (typeof resetVisualization === 'function') resetVisualization(); }});
+	cmds.register({ id: 'traffic.physics', label: 'Toggle physics',       group: 'Traffic',
+		subtitle: 'Stop or resume the force-directed layout',
+		run: function () { if (typeof togglePhysics === 'function') togglePhysics(); }});
+	cmds.register({ id: 'traffic.refresh', label: 'Refresh traffic data', group: 'Traffic',
+		run: function () { if (typeof refreshTrafficData === 'function') refreshTrafficData(true); }});
+}