fix(web): filter toggle hover as border, not background (#1460) (#1461)

* fix(web): filter toggle hover as border, not background (#1460)

The Logging/History/Network filter toggles used the same
--mantine-primary-color-light background for both their hover and their
active (toggled-on) state, so clicking a button to turn it off while the
cursor was still over it looked like a no-op — the hover background
masked the removal of the active background.

- Add a shared FilterToggleButton element used by LogControls,
  NetworkControls, and MessageDirectionFilter, replacing the duplicated
  UnstyledButton + inline `bg={active ? … : undefined}` in each.
- Add a `filterToggle` UnstyledButton theme variant + `.filter-toggle`
  rules: hover is now a thin border (reserved via a transparent 1px
  border so it doesn't shift layout); the active state is the filled
  background, keyed off `aria-pressed="true"`.
- This leaves the `.list-item` selectable rows (Prompts/Apps/Tools/
  Resources lists, section headers) untouched — they keep their
  hover-fill since they aren't toggles.
- Add `aria-pressed` to the Logging level toggles (previously missing).

Tests + stories cover the active/hover distinction via aria-pressed for
FilterToggleButton and all three controls.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): move filter-toggle border to CSS so :hover actually shows (#1460)

The previous attempt set the reserved `1px solid transparent` border via
the theme's `styles` callback, which Mantine emits as an *inline* style.
Inline styles outrank stylesheet `:hover` rules, so
`.filter-toggle:hover { border-color }` never applied — hovering showed
no border at all (verified in a real browser via Playwright).

Move the border (and border-radius) out of the inline theme styles into
the `.filter-toggle` class in App.css, so `:hover` can override the
transparent border-color. The active fill (`[aria-pressed="true"]`) was
already correct.

Verified with real Playwright page.hover: inactive+hover now shows a
1px --inspector-brand-primary border, active shows the fill, active+hover
shows both, all distinct. Story play functions assert the active fill and
the reserved transparent border (the hover border can't be asserted in the
synthetic-event test runner, so it's documented as Playwright-verified).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/App.css

@@ -192,6 +192,30 @@
   background-color: var(--mantine-primary-color-light);
 }
 
+/* ── Filter toggle buttons (Logging / History / Network) ─────────
+ *
+ * Shared by the FilterToggleButton element. Unlike `.list-item`, hover is a
+ * thin border rather than a background fill, and the active (on) state is the
+ * filled background. Keeping the two states distinct means toggling a button
+ * off while the cursor is still over it is immediately visible, instead of the
+ * hover background masking the removal of the active background (issue #1460).
+ * The 1px transparent border is reserved here (not as an inline style in the
+ * theme variant — inline styles outrank stylesheet `:hover` rules) so the hover
+ * border doesn't shift layout. */
+
+.filter-toggle {
+  border: 1px solid transparent;
+  border-radius: var(--mantine-radius-md);
+}
+
+.filter-toggle:hover {
+  border-color: var(--inspector-brand-primary);
+}
+
+.filter-toggle[aria-pressed="true"] {
+  background-color: var(--mantine-primary-color-light);
+}
+
 /* ── Select / Autocomplete dropdown / option (dark mode) ─────────
  *
  * Select and Autocomplete each render with their own static selector