fix(alerts/ui): page header, scroll, title preview, bell badge polish

Visual regressions surfaced during browser smoke:

1. Page headers — `SectionHeader` renders as 12px uppercase gray (a
   section divider, not a page title). Replace with proper h2 title
   + inline subtitle (`N firing · N total` etc.) and right-aligned
   actions, styled from `alerts-page.module.css`.

2. Undefined `--space-*` tokens — the project (and `@cameleer/design-system`)
   has never shipped `--space-sm|md|lg|xl`, even though many modules
   (SensitiveKeysPage, alerts CSS, …) reference them. The fallback
   to `initial` silently collapsed gaps/paddings to 0. Define the
   scale in `ui/src/index.css` so every consumer picks it up.

3. List scrolling — DataTable was using default pagination, but with
   no flex sizing the whole page scrolled. Add `fillHeight` and raise
   `pageSize`/list `limit` to 200 so the table gets sticky header +
   internal scroll + pinned pagination footer (Gmail-style). True
   cursor-based infinite scroll needs a backend change (filed as
   follow-up — `/alerts` only accepts `limit` today).

4. Title column clipping — `.titlePreview` used `white-space: nowrap`
   + fixed `max-width`, truncating message mid-UUID. Switch to a
   2-line `-webkit-line-clamp` so full context is visible.

5. Notification bell badge invisible — `NotificationBell.module.css`
   referenced undefined tokens (`--fg`, `--hover-bg`, `--bg`,
   `--muted`). Map to real DS tokens (`--text-primary`, `--bg-hover`,
   `#fff`, `--text-muted`). The admin user currently sees no badge
   because the backend `/alerts/unread-count` returns 0 (read
   receipts) — that's data, not UI.

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

ui/src/pages/Alerts/SilencesPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { BellOff } from 'lucide-react';
 import {
-  Button, FormField, Input, SectionHeader, useToast, DataTable,
+  Button, FormField, Input, useToast, DataTable,
   EmptyState, ConfirmDialog, MonoText,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -92,9 +92,12 @@ export default function SilencesPage() {
 
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader>Alert silences</SectionHeader>
-      </div>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>Alert silences</h2>
+          <span className={css.pageSubtitle}>{rows.length} active</span>
+        </div>
+      </header>
 
       <section className={sectionStyles.section}>
         <div
@@ -139,11 +142,12 @@ export default function SilencesPage() {
           description="Nothing is currently silenced in this environment."
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertSilenceResponse & { id: string }>
             columns={columns}
             data={rows.map((s) => ({ ...s, id: s.id ?? '' }))}
             flush
+            fillHeight
           />
         </div>
       )}