mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-12 08:24:41 +00:00
Kpa-clawbot
50676d5e65
## Summary Fixes the broken **Filter by node** input on the Live page. The previous implementation used a native `<datalist>` (no consistent styling, no real autocomplete UX), only applied on `change` (Enter), and mutated `location.hash` on commit — which the SPA router treated as a navigation, triggering a full re-init. ## What changed - **Markup** (`public/live.js`): replaces the `<datalist>` with a styled custom `#liveNodeFilterDropdown` and adds combobox/listbox ARIA wiring. - **Styling** (`public/live.css`): new `.live-node-filter-input` rules use `color-mix` on `var(--text)` for the background and `var(--border)` / `var(--text)` for border + foreground — fully theme-aware. Dropdown uses `var(--surface-1)` + `var(--border)`. - **Behavior**: 200 ms debounced `/api/nodes/search` call as the user types. Suggestions render with name + 8-char pubkey prefix. Clicking a suggestion (`mousedown` so it beats blur) sets the filter to the pubkey. - **No reload**: `applyFilterFromInput` and the clear button now use `history.replaceState` instead of mutating `location.hash`, so the SPA router never re-runs and the page never reloads. Enter is `preventDefault`-ed and either selects the highlighted suggestion or commits the typed text. - **Keyboard**: ArrowUp/Down navigate suggestions, Esc closes, Enter selects. ## TDD Per `AGENTS.md`, the failing E2E test landed first (commit `74f3e92`), then the fix made it green (commit `a5c5c65`). The test file `test-1110-live-filter.js` (and an integrated block in `test-e2e-playwright.js`) asserts: 1. The input's computed `background-color` is **not** hardcoded white when `data-theme="dark"` is set. 2. The input is not vastly larger than the surrounding toolbar row. 3. Typing `"te"` shows a visible `#liveNodeFilterDropdown` with at least one `.live-node-filter-option`. 4. Clicking a suggestion sets `_liveGetNodeFilterKeys()` to a non-empty list **without** reloading the page (verified via a `window.__m` marker that survives) and **without** navigating away from `#/live`. 5. Pressing **Enter** in the filter input never reloads or navigates. ### How to run the E2E ``` go build -o /tmp/corescope-server ./cmd/server /tmp/corescope-server -port 13581 -db test-fixtures/e2e-fixture.db -public public & CHROMIUM_PATH=/usr/bin/chromium-browser BASE_URL=http://localhost:13581 \ node test-1110-live-filter.js # 4/4 passed ``` ## Acceptance criteria from #1110 - [x] Filter input visually matches Live page toolbar (theme-aware bg, border, padding) - [x] Typing 1+ characters shows dropdown of matching node names - [x] Selecting a suggestion filters the live feed immediately - [x] Clearing input restores unfiltered view - [x] No page reload on any interaction with the input - [x] E2E test asserts: type → suggestions appear → click suggestion → feed filters → no navigation Fixes #1110 --------- Co-authored-by: Kpa-clawbot <kpa-clawbot@users.noreply.github.com>
