Add omnibar (⌘K) and sequence completion modal

Features:
- Command palette (⌘K) with fuzzy search across actions
- Sequence completion modal shows available actions while typing sequences
- Keywords/synonyms for better search (e.g., "co2" matches "CO₂", "back" matches "Prev")
- Search matches group names (e.g., "hum right" finds Humidity in Right Y-Axis)

Fixes:
- Gate scroll zoom behind meta+scroll to prevent accidental zooms
- Increase sequence timeout to 2000ms for more comfortable input
- Show unassigned actions in shortcuts modal (actions without keybindings)
- Fix remove button being occluded by adjacent hotkeys (z-index)
- Add info icon to "None" explaining it only applies to right Y-axis
- Close omnibar on Escape/blur properly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ryan-williams

www/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/react": "^0.27.13",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@observablehq/plot": "^0.6.17",
-    "@rdub/use-hotkeys": "github:runsascoded/use-hotkeys#c62903e7efc6aa123a9da6b18e429ca32da31c43",
+    "@rdub/use-hotkeys": "github:runsascoded/use-hotkeys#4b1828f197bef38c2df2481f7f0af20b4e72f72d",
     "@rdub/use-url-params": "^0.1.2",
     "@tanstack/react-query": "^5.83.0",
     "d3": "^7.9.0",

www/pnpm-lock.yaml

@@ -1,9 +1,10 @@
 import { KeyboardShortcutsProvider, ShortcutsModal, useKeyboardShortcutsContext } from '@rdub/use-hotkeys'
 import { useUrlParam } from '@rdub/use-url-params'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AwairChart } from './components/AwairChart'
 import { DevicePoller, type DeviceDataResult } from './components/DevicePoller'
+import { Omnibar } from './components/Omnibar'
 import { HOTKEY_DESCRIPTIONS, HOTKEY_GROUPS, ShortcutsModalContent } from './components/ShortcutsModalContent'
 import { ThemeToggle } from './components/ThemeToggle'
 import { ThemeProvider } from './contexts/ThemeContext'
@@ -16,8 +17,14 @@ import './App.scss'
 function AppContent() {
   const [isOgMode] = useUrlParam('og', boolParam)
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
+  const [omnibarOpen, setOmnibarOpen] = useState(false)
   const openShortcuts = useCallback(() => setShortcutsOpen(true), [])
   const closeShortcuts = useCallback(() => setShortcutsOpen(false), [])
+  const toggleOmnibar = useCallback(() => setOmnibarOpen(prev => !prev), [])
+  const closeOmnibar = useCallback(() => setOmnibarOpen(false), [])
+
+  // Ref for executing actions from omnibar
+  const handlersRef = useRef<Record<string, () => void>>({})
 
   // Access keyboard shortcuts from context (state lives in KeyboardShortcutsProvider)
   const shortcutsState = useKeyboardShortcutsContext()
@@ -179,6 +186,8 @@ function AppContent() {
             setTimeRange={setTimeRange}
             isOgMode={isOgMode}
             onOpenShortcuts={openShortcuts}
+            onOpenOmnibar={toggleOmnibar}
+            handlersRef={handlersRef}
           />
         )}
       </main>
@@ -201,6 +210,17 @@ function AppContent() {
           )}
         </ShortcutsModal>
       )}
+      {/* Omnibar (command palette) */}
+      {!isOgMode && (
+        <Omnibar
+          isOpen={omnibarOpen}
+          onClose={closeOmnibar}
+          onExecute={(actionId) => {
+            const handler = handlersRef.current[actionId]
+            if (handler) handler()
+          }}
+        />
+      )}
     </div>
   )
 }

www/src/App.tsx

@@ -1,9 +1,10 @@
 import { useUrlParam } from '@rdub/use-url-params'
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import React, { useState, useMemo, useCallback, useEffect, useRef, type MutableRefObject } from 'react'
 import Plot from 'react-plotly.js'
 import { ChartControls, metricConfig, getRangeFloor } from './ChartControls'
 import { CustomLegend } from './CustomLegend'
 import { DataTable } from './DataTable'
+import { SequenceModal } from './SequenceModal'
 import { TIME_WINDOWS, getWindowForDuration } from '../hooks/useDataAggregation'
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts'
 import { useLatestMode } from '../hooks/useLatestMode'
@@ -47,9 +48,11 @@ interface Props {
   setTimeRange: (range: { timestamp: Date | null; duration: number }) => void
   isOgMode?: boolean
   onOpenShortcuts?: () => void
+  onOpenOmnibar?: () => void
+  handlersRef?: MutableRefObject<Record<string, () => void>>
 }
 
-export const AwairChart = React.memo(function AwairChart({ deviceDataResults, summary, devices, selectedDeviceIds, onDeviceSelectionChange, timeRange: timeRangeFromProps, setTimeRange: setTimeRangeFromProps, isOgMode = false, onOpenShortcuts }: Props) {
+export const AwairChart = React.memo(function AwairChart({ deviceDataResults, summary, devices, selectedDeviceIds, onDeviceSelectionChange, timeRange: timeRangeFromProps, setTimeRange: setTimeRangeFromProps, isOgMode = false, onOpenShortcuts, onOpenOmnibar, handlersRef }: Props) {
 
   // Combine data from all devices for time range calculations and bounds checking
   // Sorted newest-first for efficient latest record access
@@ -96,6 +99,7 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
 
   // Refs for handling programmatic updates
   const ignoreNextRelayoutRef = useRef(false)
+  const plotContainerRef = useRef<HTMLDivElement>(null)
 
   // Compute window size for buffer calculation (before useTimeRangeParam)
   const windowMinutes = useMemo(() => {
@@ -284,7 +288,7 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
   }, [setXAxisRange, getAllDeviceBounds, formatForPlotly])
 
   // Register keyboard shortcuts (keymap managed by context, handlers defined here)
-  const { pendingKeys, isAwaitingSequence, timeoutStartedAt, sequenceTimeout } = useKeyboardShortcuts({
+  const { pendingKeys, isAwaitingSequence, timeoutStartedAt, sequenceTimeout, handlers } = useKeyboardShortcuts({
     metrics,
     xAxisRange,
     setXAxisRange,
@@ -296,6 +300,7 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
     handleAllClick,
     setIgnoreNextPanCheck,
     openShortcutsModal: onOpenShortcuts || noop,
+    openOmnibar: onOpenOmnibar || noop,
     devices,
     selectedDeviceIds,
     setSelectedDeviceIds: onDeviceSelectionChange,
@@ -307,6 +312,13 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
     tableLastPage: tableNavHandlers?.lastPage,
   })
 
+  // Update handlersRef for omnibar to use
+  useEffect(() => {
+    if (handlersRef) {
+      handlersRef.current = handlers
+    }
+  }, [handlersRef, handlers])
+
   // Handle responsive plot height and viewport width using matchMedia
   useEffect(() => {
     const mobileQuery = window.matchMedia('(max-width: 767px) or (max-height: 599px)')
@@ -330,6 +342,23 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
     }
   }, [])
 
+  // Gate scroll zoom behind meta+scroll to avoid accidental zooms while scrolling page
+  useEffect(() => {
+    const container = plotContainerRef.current
+    if (!container) return
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only allow scroll zoom if meta key is pressed
+      if (!e.metaKey && !e.ctrlKey) {
+        e.stopPropagation()
+      }
+    }
+
+    // Use capture phase to intercept before plotly sees it
+    container.addEventListener('wheel', handleWheel, { capture: true })
+    return () => container.removeEventListener('wheel', handleWheel, { capture: true })
+  }, [])
+
   // Theme-aware plot colors
   const computePlotColors = useCallback(() => {
     const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
@@ -685,36 +714,15 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
     }
   }, [selectedDeviceIdForTable, selectedWindow, deviceDataResults])
 
-  // Format pending keys for display
-  const formatPendingKeys = () => {
-    return pendingKeys.map(combo => {
-      let key = combo.key.toUpperCase()
-      if (combo.modifiers.shift) key = `⇧${key}`
-      if (combo.modifiers.ctrl) key = `⌃${key}`
-      if (combo.modifiers.alt) key = `⌥${key}`
-      if (combo.modifiers.meta) key = `⌘${key}`
-      return key
-    }).join(' ')
-  }
-
   return (
     <div className={`awair-chart${isOgMode ? ' og-mode' : ''}`}>
-      {/* Sequence indicator */}
-      {isAwaitingSequence && pendingKeys.length > 0 && (
-        <div className="sequence-indicator">
-          <kbd>{formatPendingKeys()}</kbd>
-          <span className="sequence-waiting">…</span>
-          {timeoutStartedAt && (
-            <div
-              className="sequence-timeout-bar"
-              style={{
-                animationDuration: `${sequenceTimeout}ms`,
-              }}
-              key={timeoutStartedAt}
-            />
-          )}
-        </div>
-      )}
+      {/* Sequence modal (omnibar-style with completions) */}
+      <SequenceModal
+        pendingKeys={pendingKeys}
+        isAwaitingSequence={isAwaitingSequence}
+        timeoutStartedAt={timeoutStartedAt}
+        sequenceTimeout={sequenceTimeout}
+      />
       {/* OG mode title overlay */}
       {isOgMode && (
         <div className="og-title" style={{ color: plotColors.textColor }}>
@@ -723,6 +731,7 @@ export const AwairChart = React.memo(function AwairChart({ deviceDataResults, su
         </div>
       )}
       <div
+        ref={plotContainerRef}
         className="plot-container"
         onMouseEnter={() => setHoverState(null)}
       >