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/components/groups/LogControls/LogControls.test.tsx

@@ -132,6 +132,20 @@ describe("LogControls", () => {
     expect(onToggleAllLevels).toHaveBeenCalledTimes(1);
   });
 
+  it("reflects level visibility via aria-pressed", () => {
+    renderWithMantine(
+      <LogControls {...baseProps} visibleLevels={someVisible} />,
+    );
+    expect(screen.getByRole("button", { name: "debug" })).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+    expect(screen.getByRole("button", { name: "warning" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+  });
+
   it("invokes onToggleLevel when a level button is clicked", async () => {
     const user = userEvent.setup();
     const onToggleLevel = vi.fn();

clients/web/src/components/groups/LogControls/LogControls.tsx

@@ -4,12 +4,11 @@ import {
   Group,
   Select,
   Stack,
-  Text,
   TextInput,
   Title,
-  UnstyledButton,
 } from "@mantine/core";
 import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
+import { FilterToggleButton } from "../../elements/FilterToggleButton/FilterToggleButton";
 
 const LOG_LEVELS: LoggingLevel[] = [
   "debug",
@@ -102,24 +101,15 @@ export function LogControls({
         </SubtleButton>
       </Group>
       <Stack gap="xs">
-        {LOG_LEVELS.map((level) => {
-          const style = LEVEL_COLORS[level];
-          const active = visibleLevels[level];
-          return (
-            <UnstyledButton
-              key={level}
-              w="100%"
-              p="sm"
-              variant="listItem"
-              bg={active ? "var(--mantine-primary-color-light)" : undefined}
-              onClick={() => onToggleLevel(level, !active)}
-            >
-              <Text c={style.c} ta="center" fw={500}>
-                {level}
-              </Text>
-            </UnstyledButton>
-          );
-        })}
+        {LOG_LEVELS.map((level) => (
+          <FilterToggleButton
+            key={level}
+            label={level}
+            color={LEVEL_COLORS[level].c}
+            active={visibleLevels[level]}
+            onToggle={(visible) => onToggleLevel(level, visible)}
+          />
+        ))}
       </Stack>
     </Stack>
   );