chore: release v0.6.4

chat_action was stored in two places — the model column and config JSON —
and dispatch_helpers unconditionally overrode the config value with the
column. The frontend only ever wrote the JSON path, so the UI choice
silently had no effect on outgoing chat actions.

Make the column the single source of truth: frontend sends chat_action
top-level, dispatch_helpers reads from the column, and a one-time
backfill migrates existing config values to the column and strips the
legacy key.

Also fix a long-standing race where the keepalive's bare sleep(4) +
finally cancel could fire one last sendChatAction after the response
already arrived, leaving a phantom indicator for ~5s. Replace with a
stop event + wait_for so callers can signal stop cleanly via the new
stop_keepalive helper.

.claude/docs/entity-relationships.md

@@ -1,8 +1,8 @@
 # Entity Relationships
 
-```
+```text
 ServiceProvider → type: "immich" (inferred capabilities: notifications, commands)
-NotificationTracker → provider_id, collection_ids, scan_interval, batch_duration, enabled
+NotificationTracker → provider_id, collection_ids, scan_interval, adaptive_max_skip, filters, default_tracking_config_id, default_template_config_id, enabled
 NotificationTrackerTarget → notification_tracker_id, target_id, tracking_config_id, template_config_id, quiet_hours, enabled
 TrackingConfig → provider_type, event flags, scheduling rules
 TemplateConfig → provider_type, Jinja2 template slots per event type

RELEASE_NOTES.md

@@ -1,24 +1,19 @@
-# v0.5.1 (2026-04-24)
+# v0.6.4 (2026-04-27)
 
-Extends the Immich scheduled/memory dispatch shipped in v0.5.0 with a per-album fan-out mode and rich multi-album templates, adds "Reset to default" tooling and an inline preview modal for notification / command templates, and introduces a `none` listener mode for Telegram bots (safer default for shared-token deployments). Also fixes an infinite-recursion bug in the notification dispatcher that was breaking test dispatch for periodic / scheduled / memory slots.
+Fixes Telegram chat actions: the indicator the user picks in the UI is now actually sent, and the phantom "typing…" bubble that lingered for ~5s after a notification arrived is gone.
 
-## Features
+## User-facing changes
 
-- **Per-album Immich dispatch for scheduled / memory slots** — honors the new `{kind}_collection_mode` on `TrackingConfig`: `per_collection` fans out one event per album, `combined` pools assets as before. Combined mode now attaches `album_name` / `album_url` / `album_public_url` to each asset so templates can attribute rows to their source album. Default `scheduled_assets` and `memory_mode` templates render a multi-album header with an inline album list and per-row album link. The cron and test-dispatch paths now share a single `build_immich_dispatch_events` helper ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
-- **"Reset to default" for template slots** — new per-slot and whole-template reset buttons on notification and command template configs, backed by `GET /*-template-configs/defaults` endpoints. Confirmations use the app's `ConfirmModal` instead of `window.confirm` ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
-- **Inline template preview + deep-link edit** — tracking-configs "Preview template" now opens an inline preview modal with locale tabs instead of navigating away. The Edit button deep-links with `?edit_slot=<name>` so the destination auto-opens the config and scrolls to the requested slot ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
-- **Telegram bot `none` listener mode** — third option alongside polling and webhook. Disables both long-polling and webhook delivery; useful when another instance owns the listener or the bot is send-only. Switching into `none` unschedules polling and unregisters the active webhook so Telegram stops delivering updates ([be15463](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/be15463)).
+### Bug Fixes
 
-## Bug Fixes
+- **Telegram chat action UI choice now respected:** `chat_action` was stored in two places — the model column and the config JSON — and dispatch unconditionally overrode the config value with the column. The frontend only ever wrote the JSON path, so picking "upload_photo" / "record_voice" / etc. in the UI silently had no effect on outgoing chat actions. The column is now the single source of truth: the frontend sends `chat_action` top-level, dispatch reads from the column, and a one-time migration backfills existing config values into the column and strips the legacy key ([72dd611](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/72dd611))
+- **Phantom Telegram chat-action indicator:** a long-standing race in the keepalive loop (bare `sleep(4)` + `finally cancel`) could fire one last `sendChatAction` after the response had already arrived, leaving a "typing…" / "uploading…" bubble in the chat for ~5 seconds. Replaced with a stop event + `wait_for` so callers signal stop cleanly via the new `stop_keepalive` helper ([72dd611](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/72dd611))
 
-- Fix `NotificationDispatcher._session_ctx` infinite recursion when no shared `aiohttp.ClientSession` was passed — broke test dispatch for periodic / scheduled / memory slots (cron path was unaffected) ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
-- `telegram-bots /chats/{id}/test` now resolves `chat.language_override` / `language_code` instead of using the raw `?locale` query param, matching the resolution the tracker-target test endpoint already used ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
-- Default `scheduled_assets` template no longer emits a blank line between the header and the first asset when the multi-album branch is taken ([b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f)).
+## Development / Internal
 
-## Upgrade Notes
+### Database
 
-- **New Telegram bots default to `none`** (safer when multiple bridges share a token). Existing bots upgraded from a pre-`update_mode` schema keep `polling`, so their behavior is unchanged. When creating a new bot, explicitly switch to `polling` or `webhook` if you want it to receive updates.
-- A new `{kind}_collection_mode` field was added to `TrackingConfig` for Immich scheduled/memory slots. Existing trackers keep the previous `combined` behavior by default; switch to `per_collection` per-tracker to opt in to one-event-per-album fan-out.
+- **Migration:** new one-shot migration moves `chat_action` from `notification_target.config` JSON into the dedicated column on existing rows, then deletes the legacy key from config. No action required — runs automatically on backend start ([72dd611](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/72dd611))
 
 ---
 
@@ -27,7 +22,6 @@ Extends the Immich scheduled/memory dispatch shipped in v0.5.0 with a per-album
 
 | Hash                                                                                     | Message                                                              | Author           |
 |------------------------------------------------------------------------------------------|----------------------------------------------------------------------|------------------|
-| [b61394f](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/b61394f) | feat(immich): per-album scheduled/memory dispatch + template tooling | alexei.dolgolyov |
-| [be15463](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/be15463) | feat(telegram): add 'none' listener mode for bots                    | alexei.dolgolyov |
+| [72dd611](https://git.dolgolyov-family.by/alexei.dolgolyov/notify-bridge/commit/72dd611) | fix(telegram): respect chat_action UI choice, drop phantom indicator | alexei.dolgolyov |
 
 </details>

design-mockups/README.md

@@ -0,0 +1,161 @@
+# Notify Bridge — Redesign Mockups
+
+**Start here:** open [`index.html`](./index.html) for the chooser. Three full directions to pick between, plus a side-by-side comparison table.
+
+**Direction chosen: Aurora / Glass** (2026-04-25). Continuing to mock additional surfaces in this language; original three-way chooser kept for reference.
+
+| File | Option | Mood |
+| --- | --- | --- |
+| [`index.html`](./index.html) | **Chooser** | Compare all three side by side |
+| [`dashboard.html`](./dashboard.html) | A · Bridge / Control Room | Editorial broadcast console — phosphor lime on deep ink, italic Fraunces, hairlines, scanlines |
+| [`dashboard-aurora.html`](./dashboard-aurora.html) | **B · Aurora / Glass** ✓ | Frosted-glass panels over a vivid aurora gradient — visionOS / Stripe-modern |
+| [`dashboard-bento.html`](./dashboard-bento.html) | C · Bento / Modular | Mixed-size colorful tiles in a tight grid — Apple Keynote / Linear blog energy |
+| [`aurora-tracker.html`](./aurora-tracker.html) | **Aurora · Tracker detail** | Form + live preview + event log — stress-tests glass on form-heavy surfaces |
+
+All three are self-contained HTML — no build step. Each has its own theme toggle in the top-right.
+
+---
+
+## Quick comparison
+
+| Trait | A · Bridge | B · Aurora | C · Bento |
+| --- | --- | --- | --- |
+| Mood | Editorial / operator | Premium / atmospheric | Playful / confident |
+| Default theme | Dark (Console) | Dark (Aurora) | Light (Daylight) |
+| Accent | Phosphor lime `#d4ff3a` | Lavender + orchid + mint | Violet · mint · coral · honey |
+| Surface | Hairline-rule modules | Frosted-glass panels | Solid-color tiles |
+| Display font | Fraunces (serif) | Newsreader (serif) | Manrope (sans) |
+| Density | High · for power users | Medium · breathable | Medium · airy |
+| Best for | Pro operators · self-hosters | Showroom · public-facing | Mainstream · cross-audience |
+| Risk | Niche taste · heavy mood | Glass trend may date | Color discipline matters |
+
+---
+
+## What all three share (the UX, not the paint)
+
+These additions are the same across every option — pick a *look*, not a different *product*:
+
+1. **Live ticker / "live" pill** — always-running awareness of the last events without forcing focus
+2. **Stats with deltas + sparklines or trend chart** — numbers always have context
+3. **Editorial hero** with current-state sentence + big throughput readout
+4. **Signal stream with routing trail** — every event shows Tracker → Target → Template inline (today: 3 clicks to find this)
+5. **Provider deck** — throughput, last-seen, pulse status, idle/warn/live indicators
+6. **Pulse chart** (heatmap in A, area waves in B/C) — finally answers "when is this thing busiest?"
+7. **Active wires panel** — Sankey-style Source → Channel routes with live counts
+8. **Compose / new-tracker CTA** — single entry to a 4-step wizard (provider → tracker → template → target)
+9. **Two-theme system** — committed light + dark per option, no lukewarm middle "system"
+
+---
+
+## Implementation cost (rough)
+
+| Option | New deps | New components | Migration risk |
+| --- | --- | --- | --- |
+| A · Bridge | Fraunces + Instrument Sans + JetBrains Mono fonts | Ticker, sparklines, signal-stream-with-trail, heatmap, routes panel | Low — mostly token swap + the 5 new components |
+| B · Aurora | Newsreader + Geist + Geist Mono fonts | Same as A + heavy backdrop-filter / glass system | Medium — `backdrop-filter` perf needs review on long lists; gradient bg can hurt low-end devices |
+| C · Bento | Manrope + JetBrains Mono fonts | Same UX components, but tile-grid layout system + bold-color discipline (color governance matters more) | Low-Medium — tile spans need a discipline, and 8-color palette needs guardrails so devs don't pick colors freely |
+
+All three keep the existing Svelte 5 architecture, $state cache system, and route structure unchanged. **Migration is ~3 weeks** for any one of them to land dashboard + provider list + tracker detail.
+
+---
+
+## What's NOT in any mockup yet
+
+If a direction lands, these surfaces still need design before implementation:
+
+- Tracker detail page (timeline + config editor + live preview)
+- Template editor (Jinja2 sandbox + side-by-side preview)
+- Provider list + provider detail
+- Target detail (channel inbox + delivery history)
+- Bot console (chat-style interaction log for Telegram/Matrix/Email)
+- Setup wizard (first-run experience)
+- Mobile pass — current mockups are desktop-first
+
+---
+
+## Original design rationale (Option A)
+
+Below is the original "Bridge / Control Room" rationale, kept for reference.
+
+### Direction: "Bridge / Control Room"
+
+The product is literally a **signal operator's console** — it listens for events on one side (Immich, Gitea, RSS, GitHub, …) and dispatches them to channels on the other (Telegram, Matrix, Email, ntfy, …). The current UI hides that fact behind generic SaaS-dashboard chrome (teal accent, dot-grid bg, card-with-glow). The redesign leans hard into what the product *is*.
+
+References that were in the room while designing this:
+
+- **Bloomberg Terminal** — dense numerical clarity, monospace numerals, ticker bars
+- **Linear / Vercel** — restraint, hairline rules, type-as-interface
+- **Editorial print** (Bloomberg Businessweek, Fast Company) — italic display serif as a counterpoint to mono data
+- **Broadcast control rooms** — pulsing live indicators, "ON AIR" markers, scanline atmosphere
+- **Phosphor monitors** — the signature lime accent, not the third teal-purple SaaS template
+
+---
+
+## Design language
+
+| Token | Choice | Why |
+| --- | --- | --- |
+| **Display** | Fraunces (variable, italic-capable serif) | Editorial gravitas; italic em-tags inside headlines feel printed, not pasted |
+| **Body** | Instrument Sans | Modern, neutral, slightly geometric — pairs well with a serif without fighting it |
+| **Data** | JetBrains Mono | Tabular numerals everywhere stats appear |
+| **Primary accent** | `#d4ff3a` phosphor lime | Distinctive — far from the SaaS teal/purple gravity well; reads as "signal" |
+| **Secondary signal** | warm coral, calm blue, amber warn, rose error | Used sparingly; one per event class |
+| **Surfaces** | Deep ink `#07080b` → `#161a25` | High-contrast console feel; light theme inverts to "broadsheet" cream |
+| **Hairlines** | 1px borders everywhere instead of shadows | Editorial precision; cards sit *in* the page, not floating over it |
+| **Scanlines + vignette** | Faint overlay | Console atmosphere without crossing into kitsch |
+
+---
+
+## What's actually new (UX, not just paint)
+
+The mockup isn't just a re-skin — these are concrete proposed additions:
+
+1. **"On Air" ticker bar** — a always-running marquee of the last 6–10 events at the very top. Pauses on hover. Keeps you peripherally aware of activity without forcing you to look at the dashboard.
+2. **Stats with sparklines** — every counter shows a 24h trend inline. Numbers without context are useless.
+3. **Editorial hero** — the title is a *sentence about the current state*, not a label. "Tonight, *everything* is flowing" with live numbers in the body. This is opinionated and might feel too much for some — easy to swap to a label-style header.
+4. **Signal stream** — replaces the existing event timeline. Adds the **routing trail** for each event (Tracker → Target → Template) so you can see at a glance where a signal went, not just *that* it happened. This is the killer feature; right now you have to click through three pages to trace one event.
+5. **"On watch" provider deck** — replaces the silent provider list with throughput-per-provider, last-seen, pulse status. Click-to-trace.
+6. **7-day pulse heatmap** — finally answers "when is this thing busiest?". Useful for planning maintenance windows.
+7. **Active wires panel** — Sankey-style "Source → Channel" route summary with throughput counts. Makes the *bridge* visible.
+8. **Compose band** — bottom of dashboard. A single CTA to start a new tracker with a 4-step wizard (provider → tracker → template → target), or paste a webhook URL and let the system infer.
+9. **Live clock + uptime** — pinned in the ticker. Operators know what time it is and how stable they've been.
+10. **Two-theme system** — Console (dark, default for most operators) + Broadsheet (light, warm cream, deep ink). Skips the generic "system theme" three-way; commits to two beautiful options instead of three mediocre ones.
+
+---
+
+## Things to push back on
+
+These are choices I'd specifically want feedback on before implementing:
+
+- **Phosphor lime as primary** — it's bold and very on-brand for "signal," but it's far from the current teal. Worth knowing if you have any brand attachment to teal.
+- **Italic Fraunces inside headlines** — distinctive, but could feel "too magazine" for a self-hosted ops tool. Easy to swap for plain Fraunces or even drop the serif entirely and lean fully on Instrument Sans + JetBrains Mono.
+- **Editorial sentence-style headers** vs. label-style headers — same trade-off as above.
+- **Hairline borders instead of cards-on-cards** — current UI uses elevated cards with glow shadows. The redesign uses flat sectioned modules with 1px rules. Read denser, less "soft."
+- **Sidebar grouping** — I collapsed the current 6-group nav into 3 sections (Overview / Routing / Operators). Some of your nested groups (notification-trackers vs command-trackers) merge into a single "Trackers" entry; click-through reveals tabs. Reduces vertical noise but loses one click of directness.
+- **No emoji / no MDI icon backgrounds** — the current UI uses lots of `mdi*` icon chips. The redesign uses thin custom SVG strokes. Cohesive but more work to maintain (would suggest a curated icon set rather than the full MDI library).
+
+---
+
+## What's NOT in this mockup yet
+
+If the direction lands, these are the next surfaces to design before any implementation:
+
+- **Tracker detail page** — single-tracker timeline + config editor + live preview
+- **Template editor** — code-editor surface with the Jinja2 sandbox preview side-by-side
+- **Provider list / detail** — currently a grid of cards; would become a tabular operator's list
+- **Target detail** — channel inbox view with delivery history per target
+- **Bot console** — Telegram/Matrix/Email bots get a chat-style interaction log
+- **Setup wizard** — first-run experience matching the same aesthetic
+- **Mobile** — current mockup is desktop-only; the design language needs a mobile-first pass before shipping
+
+---
+
+## Implementation notes (if approved)
+
+- Migration is mostly a **CSS token swap** plus selective component refactors. The Svelte 5 architecture and `$state` cache system don't need to change.
+- New fonts: add `@fontsource-variable/fraunces` and `@fontsource-variable/instrument-sans`. Drop `dm-sans`.
+- Replace `app.css` `@theme` block with the new token set.
+- The ticker, sparklines, heatmap, and routes panel are all net-new components — budget those separately.
+- Custom SVG icon set: pick ~30 icons we actually use, ship them as a single sprite. Drop the runtime MDI lookup.
+
+Estimate to first-shippable: **2–3 focused weeks** (one designer-pair sprint) to land dashboard + provider list + tracker detail with the new language. Rest of pages can roll over the following month without breaking the old screens.

design-mockups/index.html

@@ -0,0 +1,565 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Notify Bridge — Redesign Options</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=JetBrains+Mono:wght@300..600&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap" rel="stylesheet">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #0b0c10;
+    --surface: #14151c;
+    --rule: #232531;
+    --rule-strong: #353846;
+    --fg: #f0eee8;
+    --fg-dim: #b0b3bd;
+    --mute: #6f7280;
+  }
+  html, body { background: var(--bg); color: var(--fg); }
+  body {
+    font-family: 'Manrope', system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100vh;
+    padding: 56px 32px 80px;
+    background:
+      radial-gradient(40vw 40vw at 18% 10%, rgba(184, 167, 255, 0.12), transparent 60%),
+      radial-gradient(35vw 30vw at 88% 90%, rgba(126, 232, 196, 0.10), transparent 60%),
+      var(--bg);
+  }
+
+  .wrap { max-width: 1240px; margin: 0 auto; }
+
+  .head {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 56px;
+    padding-bottom: 28px;
+    border-bottom: 1px solid var(--rule);
+  }
+  .brand {
+    font-family: 'Newsreader', serif;
+    font-weight: 400;
+    font-size: 28px;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+  .brand em {
+    font-style: italic;
+    background: linear-gradient(135deg, #b8a7ff, #ff9ec4);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  .brand small { display: block; margin-top: 6px; color: var(--mute); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
+  .meta {
+    text-align: right;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    color: var(--mute);
+    letter-spacing: 0.13em;
+    text-transform: uppercase;
+  }
+  .meta b { color: var(--fg); font-weight: 500; }
+
+  .intro {
+    max-width: 720px;
+    margin-bottom: 48px;
+  }
+  .intro h1 {
+    font-family: 'Newsreader', serif;
+    font-weight: 400;
+    font-size: 56px;
+    line-height: 1.0;
+    letter-spacing: -0.03em;
+    margin-bottom: 18px;
+  }
+  .intro h1 em {
+    font-style: italic;
+    background: linear-gradient(135deg, #c8f078, #b8a7ff);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  .intro p {
+    font-size: 16px;
+    color: var(--fg-dim);
+    line-height: 1.6;
+    max-width: 560px;
+  }
+
+  .options {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+  @media (max-width: 980px) { .options { grid-template-columns: 1fr; } }
+
+  .option {
+    background: var(--surface);
+    border: 1px solid var(--rule);
+    border-radius: 24px;
+    overflow: hidden;
+    transition: transform .25s cubic-bezier(.4,.4,0,1), border-color .25s;
+    text-decoration: none; color: inherit;
+    display: flex; flex-direction: column;
+  }
+  .option:hover {
+    transform: translateY(-4px);
+    border-color: var(--rule-strong);
+  }
+  .option__preview {
+    height: 220px;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  /* Option A — Bridge / Console */
+  .preview--a {
+    background: #07080b;
+    color: #ece8df;
+  }
+  .preview--a::before {
+    content: '';
+    position: absolute; inset: 0;
+    background-image: repeating-linear-gradient(
+      0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px
+    );
+  }
+  .preview--a .lime {
+    position: absolute; left: 24px; top: 24px;
+    background: #d4ff3a; color: #07080b;
+    padding: 4px 9px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
+    font-weight: 700;
+  }
+  .preview--a .num {
+    position: absolute; right: 24px; top: 24px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 32px; color: #d4ff3a; font-weight: 500;
+    letter-spacing: -0.02em;
+  }
+  .preview--a .title {
+    position: absolute; left: 24px; bottom: 56px;
+    font-family: 'Newsreader', serif;
+    font-style: italic; font-size: 38px;
+    color: #d4ff3a;
+    letter-spacing: -0.02em;
+    line-height: 0.95;
+  }
+  .preview--a .title b {
+    font-style: normal; color: #ece8df; font-weight: 400;
+  }
+  .preview--a .rule {
+    position: absolute; left: 24px; right: 24px; bottom: 36px;
+    height: 1px; background: rgba(255,255,255,0.12);
+  }
+  .preview--a .stream {
+    position: absolute; left: 24px; bottom: 14px; right: 24px;
+    display: flex; align-items: center; gap: 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px; color: rgba(255,255,255,0.6);
+  }
+  .preview--a .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: #d4ff3a; box-shadow: 0 0 6px #d4ff3a;
+  }
+
+  /* Option B — Aurora */
+  .preview--b {
+    background: #050613;
+    color: #f3f1ff;
+    overflow: hidden;
+  }
+  .preview--b::before {
+    content: '';
+    position: absolute; inset: -20%;
+    background:
+      radial-gradient(40% 40% at 20% 30%, rgba(184, 167, 255, 0.7), transparent 60%),
+      radial-gradient(35% 35% at 80% 25%, rgba(255, 158, 196, 0.6), transparent 60%),
+      radial-gradient(50% 35% at 75% 85%, rgba(126, 232, 196, 0.5), transparent 60%);
+    filter: blur(40px) saturate(140%);
+  }
+  .preview--b .glass {
+    position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px;
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(20px) saturate(150%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 18px;
+    overflow: hidden;
+    padding: 22px;
+  }
+  .preview--b .pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.1);
+    font-size: 10px; color: #b8a7ff;
+    font-weight: 500;
+  }
+  .preview--b .pill::before {
+    content: '';
+    width: 6px; height: 6px; border-radius: 50%;
+    background: #7ee8c4; box-shadow: 0 0 6px #7ee8c4;
+  }
+  .preview--b .title {
+    font-family: 'Newsreader', serif;
+    font-style: italic; font-size: 34px;
+    margin-top: 12px;
+    background: linear-gradient(135deg, #ff9ec4, #b8a7ff 60%, #8ec9ff);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+  .preview--b .title b {
+    font-style: normal; color: #f3f1ff;
+    background: none; -webkit-text-fill-color: #f3f1ff;
+  }
+  .preview--b .row {
+    margin-top: 14px;
+    display: flex; gap: 8px;
+  }
+  .preview--b .chip {
+    padding: 5px 10px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.08);
+    font-size: 10px;
+    border: 1px solid rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.85);
+  }
+  .preview--b .chip b { font-weight: 600; }
+
+  /* Option C — Bento */
+  .preview--c {
+    background: #f4f3ef;
+    color: #0c0d11;
+    padding: 14px;
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 8px;
+  }
+  .preview--c .b-tile {
+    border-radius: 14px;
+    padding: 12px;
+    display: flex; flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    position: relative;
+    font-size: 10px;
+  }
+  .preview--c .b-violet { background: #6d4ce6; color: white; grid-row: span 2; }
+  .preview--c .b-mint   { background: #c8f078; color: #1a2e0c; }
+  .preview--c .b-coral  { background: #ff6f5b; color: white; }
+  .preview--c .b-honey  { background: #ffd23a; color: #2a1f00; }
+  .preview--c .b-ink    { background: #0c0d11; color: white; }
+  .preview--c .b-tile .lab {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
+    opacity: 0.7; font-weight: 500;
+  }
+  .preview--c .b-tile .num {
+    font-size: 28px; font-weight: 700;
+    letter-spacing: -0.04em; line-height: 1;
+  }
+  .preview--c .b-violet .num { font-size: 36px; }
+  .preview--c .b-tile .num small {
+    font-size: 14px; opacity: 0.6;
+  }
+  .preview--c .b-tile .cap {
+    font-size: 9px; opacity: 0.85; line-height: 1.3;
+    margin-top: 2px;
+  }
+
+  /* Option content */
+  .option__body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
+  .option__kicker {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10.5px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--mute);
+    margin-bottom: 10px;
+    font-weight: 500;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .option__kicker .badge {
+    background: var(--rule);
+    color: var(--fg);
+    padding: 2px 7px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+  }
+  .option__title {
+    font-family: 'Newsreader', serif;
+    font-weight: 400;
+    font-size: 26px;
+    letter-spacing: -0.02em;
+    line-height: 1.05;
+    margin-bottom: 12px;
+  }
+  .option__title em {
+    font-style: italic;
+    color: var(--fg-dim);
+  }
+  .option__desc {
+    font-size: 13.5px;
+    color: var(--fg-dim);
+    line-height: 1.55;
+    margin-bottom: 18px;
+    flex: 1;
+  }
+  .option__tags {
+    display: flex; gap: 6px; flex-wrap: wrap;
+    margin-bottom: 18px;
+  }
+  .option__tag {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    color: var(--fg-dim);
+    background: var(--rule);
+    padding: 3px 8px;
+    border-radius: 999px;
+    letter-spacing: 0.04em;
+  }
+  .option__cta {
+    display: inline-flex; align-items: center; gap: 8px;
+    color: var(--fg);
+    font-size: 13px; font-weight: 600;
+    border-top: 1px solid var(--rule);
+    padding-top: 16px;
+  }
+  .option__cta svg { width: 14px; height: 14px; transition: transform .2s; }
+  .option:hover .option__cta svg { transform: translateX(4px); }
+
+  .vs {
+    margin-top: 80px;
+    border-top: 1px solid var(--rule);
+    padding-top: 56px;
+  }
+  .vs h2 {
+    font-family: 'Newsreader', serif;
+    font-weight: 400;
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    margin-bottom: 28px;
+  }
+  .vs h2 em { font-style: italic; color: var(--fg-dim); }
+  .vs__table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface);
+    border: 1px solid var(--rule);
+    border-radius: 16px;
+    overflow: hidden;
+    font-size: 13px;
+  }
+  .vs__table th, .vs__table td {
+    padding: 14px 18px;
+    text-align: left;
+    border-bottom: 1px solid var(--rule);
+  }
+  .vs__table tr:last-child td { border-bottom: 0; }
+  .vs__table th {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10.5px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--mute);
+    font-weight: 500;
+    background: rgba(255,255,255,0.02);
+  }
+  .vs__table td:first-child {
+    font-weight: 600;
+    color: var(--fg);
+  }
+  .vs__table td { color: var(--fg-dim); }
+  .vs__table .a { color: #d4ff3a; }
+  .vs__table .b { color: #b8a7ff; }
+  .vs__table .c { color: #c8f078; }
+
+  .foot {
+    margin-top: 80px;
+    text-align: center;
+    color: var(--mute);
+    font-size: 11.5px;
+    font-family: 'JetBrains Mono', monospace;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+</style>
+</head>
+<body>
+<div class="wrap">
+
+  <header class="head">
+    <div class="brand">
+      Notify <em>Bridge</em>
+      <small>Redesign · 3 directions</small>
+    </div>
+    <div class="meta">
+      Drafted <b>Apr 25, 2026</b><br>
+      For review · pick one
+    </div>
+  </header>
+
+  <section class="intro">
+    <h1>Three directions, one <em>product</em>.</h1>
+    <p>
+      Each option is a real, working dashboard you can open and click around. They share the same data,
+      the same product, and the same set of UX ideas — but commit to different aesthetic universes.
+      Open any, then come back here to compare.
+    </p>
+    <p style="margin-top: 18px; padding: 12px 18px; border-left: 2px solid #b8a7ff; background: rgba(184,167,255,0.08); border-radius: 0 12px 12px 0; font-size: 14px;">
+      <strong style="color:#b8a7ff">Decided · Aurora.</strong>
+      Ongoing surfaces in the chosen language:
+      <a href="aurora-tracker.html" style="color:#b8a7ff;font-weight:600;text-decoration:underline;text-underline-offset:3px;">Tracker detail →</a>
+    </p>
+  </section>
+
+  <section class="options">
+
+    <a class="option" href="dashboard.html">
+      <div class="option__preview preview--a">
+        <span class="lime">● ON AIR</span>
+        <span class="num">2 814</span>
+        <div class="title"><b>Tonight,</b><br>everything is <em>flowing.</em></div>
+        <div class="rule"></div>
+        <div class="stream">
+          <span class="dot"></span><span>02:14 · IMMICH · 14 ASSETS → @FAMILY</span>
+        </div>
+      </div>
+      <div class="option__body">
+        <div class="option__kicker">Option A <span class="badge">existing</span></div>
+        <h3 class="option__title">Bridge <em>· Control Room</em></h3>
+        <p class="option__desc">
+          Editorial broadcast-console. Phosphor-lime accents on deep ink, hairline rules,
+          monospace numerals, italic Fraunces serif against JetBrains Mono. Atmospheric scanlines,
+          live ticker bar. Built for operators who want density and signal-room energy.
+        </p>
+        <div class="option__tags">
+          <span class="option__tag">phosphor-lime</span>
+          <span class="option__tag">Fraunces</span>
+          <span class="option__tag">hairlines</span>
+          <span class="option__tag">dense</span>
+        </div>
+        <div class="option__cta">
+          Open mockup
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </div>
+      </div>
+    </a>
+
+    <a class="option" href="dashboard-aurora.html">
+      <div class="option__preview preview--b">
+        <div class="glass">
+          <span class="pill">Live · all systems nominal</span>
+          <div class="title"><b>Tonight,</b><br><em>everything</em> flows.</div>
+          <div class="row">
+            <span class="chip"><b>2 814</b> sent</span>
+            <span class="chip"><b>99.7%</b> ok</span>
+          </div>
+        </div>
+      </div>
+      <div class="option__body">
+        <div class="option__kicker">Option B <span class="badge" style="background:#b8a7ff;color:#0a0a0a">new</span></div>
+        <h3 class="option__title">Aurora <em>· Glass</em></h3>
+        <p class="option__desc">
+          Vivid aurora gradient base, frosted-glass panels, soft pastel accents — lavender, orchid,
+          mint, coral. Newsreader serif headlines with gradient italics. Premium, modern, visionOS /
+          Stripe-modern. Rounded, breathable, animated.
+        </p>
+        <div class="option__tags">
+          <span class="option__tag">aurora gradient</span>
+          <span class="option__tag">frosted glass</span>
+          <span class="option__tag">Newsreader</span>
+          <span class="option__tag">premium</span>
+        </div>
+        <div class="option__cta">
+          Open mockup
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </div>
+      </div>
+    </a>
+
+    <a class="option" href="dashboard-bento.html">
+      <div class="option__preview preview--c">
+        <div class="b-tile b-violet">
+          <span class="lab">Top provider</span>
+          <div>
+            <div class="num">1942</div>
+            <div class="cap">Immich · 8 trackers</div>
+          </div>
+        </div>
+        <div class="b-tile b-mint">
+          <span class="lab">Trackers</span>
+          <div class="num">12<small>/14</small></div>
+        </div>
+        <div class="b-tile b-honey">
+          <span class="lab">Targets</span>
+          <div class="num">19</div>
+        </div>
+        <div class="b-tile b-coral">
+          <span class="lab">Failures</span>
+          <div class="num">02</div>
+        </div>
+        <div class="b-tile b-ink">
+          <span class="lab">Live</span>
+          <div class="num" style="color:#c8f078">●</div>
+        </div>
+      </div>
+      <div class="option__body">
+        <div class="option__kicker">Option C <span class="badge" style="background:#c8f078;color:#1a2e0c">new</span></div>
+        <h3 class="option__title">Bento <em>· Modular</em></h3>
+        <p class="option__desc">
+          Mixed-size colorful tiles in a tight grid. Each module commits to one role and one bold color
+          — violet, mint, coral, honey, cobalt. Manrope sans + JetBrains Mono. Apple Keynote / Linear
+          blog energy. Playful but disciplined. Ships with day + night.
+        </p>
+        <div class="option__tags">
+          <span class="option__tag">bento grid</span>
+          <span class="option__tag">bold color</span>
+          <span class="option__tag">Manrope</span>
+          <span class="option__tag">playful</span>
+        </div>
+        <div class="option__cta">
+          Open mockup
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </div>
+      </div>
+    </a>
+
+  </section>
+
+  <section class="vs">
+    <h2>Side <em>by side</em></h2>
+    <table class="vs__table">
+      <thead>
+        <tr>
+          <th>Trait</th>
+          <th><span class="a">A · Bridge</span></th>
+          <th><span class="b">B · Aurora</span></th>
+          <th><span class="c">C · Bento</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>Mood</td><td>Editorial / operator</td><td>Premium / atmospheric</td><td>Playful / confident</td></tr>
+        <tr><td>Default theme</td><td>Dark (Console)</td><td>Dark (Aurora)</td><td>Light (Daylight)</td></tr>
+        <tr><td>Accent</td><td>Phosphor lime <code style="background:#d4ff3a;color:#07080b;padding:2px 6px;border-radius:4px;font-family:JetBrains Mono;font-size:11px">#d4ff3a</code></td><td>Lavender + orchid + mint</td><td>Violet · mint · coral · honey</td></tr>
+        <tr><td>Surface</td><td>Hairline-rule modules</td><td>Frosted-glass panels</td><td>Solid-color tiles</td></tr>
+        <tr><td>Display font</td><td>Fraunces (variable serif)</td><td>Newsreader (variable serif)</td><td>Manrope (geometric sans)</td></tr>
+        <tr><td>Data font</td><td>JetBrains Mono</td><td>Geist Mono</td><td>JetBrains Mono</td></tr>
+        <tr><td>Density</td><td>High · for power users</td><td>Medium · breathable</td><td>Medium · airy</td></tr>
+        <tr><td>Risk</td><td>Niche taste · heavy mood</td><td>Trendy glass may date</td><td>Color discipline matters</td></tr>
+        <tr><td>Best for</td><td>Pro operators · self-hosters</td><td>Showroom · public-facing</td><td>Mainstream · cross-audience</td></tr>
+      </tbody>
+    </table>
+  </section>
+
+  <div class="foot">Notify Bridge · v0.5.2 · drafted by Claude</div>
+</div>
+</body>
+</html>

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "notify-bridge-frontend",
-	"version": "0.1.0",
+	"version": "0.6.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "notify-bridge-frontend",
-			"version": "0.1.0",
+			"version": "0.6.1",
 			"dependencies": {
 				"@codemirror/autocomplete": "^6.18.0",
 				"@codemirror/lang-html": "^6.4.11",
@@ -15,7 +15,10 @@
 				"@codemirror/theme-one-dark": "^6.1.3",
 				"@codemirror/view": "^6.40.0",
 				"@fontsource/dm-sans": "^5.2.8",
+				"@fontsource/geist-mono": "^5.2.7",
+				"@fontsource/geist-sans": "^5.2.5",
 				"@fontsource/jetbrains-mono": "^5.2.8",
+				"@fontsource/newsreader": "^5.2.10",
 				"@mdi/js": "^7.4.47",
 				"codemirror": "^6.0.2"
 			},
@@ -612,6 +615,22 @@
 				"url": "https://github.com/sponsors/ayuhito"
 			}
 		},
+		"node_modules/@fontsource/geist-mono": {
+			"version": "5.2.7",
+			"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz",
+			"integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource/geist-sans": {
+			"version": "5.2.5",
+			"resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
+			"integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@fontsource/jetbrains-mono": {
 			"version": "5.2.8",
 			"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
@@ -620,6 +639,14 @@
 				"url": "https://github.com/sponsors/ayuhito"
 			}
 		},
+		"node_modules/@fontsource/newsreader": {
+			"version": "5.2.10",
+			"resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz",
+			"integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A==",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@internationalized/date": {
 			"version": "3.12.0",
 			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
@@ -1437,7 +1464,7 @@
 			}
 		},
 		"node_modules/@types/cookie": {
-			"version": "0.6.0",
+			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
 			"dev": true
@@ -1560,7 +1587,7 @@
 			}
 		},
 		"node_modules/cookie": {
-			"version": "0.6.0",
+			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
 			"dev": true,
@@ -2865,11 +2892,26 @@
 			"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
 			"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA=="
 		},
+		"@fontsource/geist-mono": {
+			"version": "5.2.7",
+			"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz",
+			"integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg=="
+		},
+		"@fontsource/geist-sans": {
+			"version": "5.2.5",
+			"resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
+			"integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A=="
+		},
 		"@fontsource/jetbrains-mono": {
 			"version": "5.2.8",
 			"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
 			"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ=="
 		},
+		"@fontsource/newsreader": {
+			"version": "5.2.10",
+			"resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz",
+			"integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A=="
+		},
 		"@internationalized/date": {
 			"version": "3.12.0",
 			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
@@ -3375,7 +3417,7 @@
 			}
 		},
 		"@types/cookie": {
-			"version": "0.6.0",
+			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
 			"dev": true
@@ -3460,7 +3502,7 @@
 			}
 		},
 		"cookie": {
-			"version": "0.6.0",
+			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
 			"dev": true

frontend/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "notify-bridge-frontend",
 	"private": true,
-	"version": "0.5.1",
+	"version": "0.6.4",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -35,7 +35,10 @@
 		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "^6.40.0",
 		"@fontsource/dm-sans": "^5.2.8",
+		"@fontsource/geist-mono": "^5.2.7",
+		"@fontsource/geist-sans": "^5.2.5",
 		"@fontsource/jetbrains-mono": "^5.2.8",
+		"@fontsource/newsreader": "^5.2.10",
 		"@mdi/js": "^7.4.47",
 		"codemirror": "^6.0.2"
 	}

frontend/src/app.css

@@ -1,41 +1,80 @@
-@import '@fontsource/dm-sans/300.css';
-@import '@fontsource/dm-sans/400.css';
-@import '@fontsource/dm-sans/500.css';
-@import '@fontsource/dm-sans/600.css';
-@import '@fontsource/dm-sans/700.css';
-@import '@fontsource/jetbrains-mono/400.css';
-@import '@fontsource/jetbrains-mono/500.css';
-@import '@fontsource/jetbrains-mono/600.css';
+@import '@fontsource/geist-sans/300.css';
+@import '@fontsource/geist-sans/400.css';
+@import '@fontsource/geist-sans/500.css';
+@import '@fontsource/geist-sans/600.css';
+@import '@fontsource/geist-sans/700.css';
+@import '@fontsource/geist-mono/400.css';
+@import '@fontsource/geist-mono/500.css';
+@import '@fontsource/geist-mono/600.css';
+@import '@fontsource/newsreader/300-italic.css';
+@import '@fontsource/newsreader/400.css';
+@import '@fontsource/newsreader/400-italic.css';
+@import '@fontsource/newsreader/500.css';
+@import '@fontsource/newsreader/500-italic.css';
+@import '@fontsource/newsreader/600.css';
 @import 'tailwindcss';
 
 @theme {
-	--color-background: #f8f9fb;
-	--color-foreground: #1a1a2e;
-	--color-muted: #eef0f4;
-	--color-muted-foreground: #525866;
-	--color-border: #e2e4ea;
-	--color-primary: #0d9488;
-	--color-primary-foreground: #ffffff;
-	--color-accent: #eef0f4;
-	--color-accent-foreground: #1a1a2e;
-	--color-destructive: #ef4444;
-	--color-card: #ffffff;
-	--color-card-foreground: #1a1a2e;
-	--color-success-bg: #ecfdf5;
-	--color-success-fg: #059669;
-	--color-warning-bg: #fffbeb;
-	--color-warning-fg: #d97706;
-	--color-error-bg: #fef2f2;
-	--color-error-fg: #dc2626;
-	--color-glow: rgba(13, 148, 136, 0.15);
-	--color-glow-strong: rgba(13, 148, 136, 0.3);
-	--color-sidebar: #ffffff;
-	--color-sidebar-active: rgba(13, 148, 136, 0.08);
-	--font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
-	--radius: 0.625rem;
-	/* Layered z-index scale — refer to these instead of ad-hoc numbers.
-	   Ordered: base < sticky < dropdown < overlay < modal < tooltip < toast */
+	/* === AURORA: dark default ("Aurora") === */
+	--color-background: #050613;
+	--color-background-deep: #02030a;
+	--color-foreground: #f3f1ff;
+	--color-muted: rgba(255, 255, 255, 0.04);
+	--color-muted-foreground: #b6b2d4;
+	--color-border: rgba(255, 255, 255, 0.08);
+
+	/* Glass surfaces — replace solid card */
+	--color-glass: rgba(255, 255, 255, 0.04);
+	--color-glass-strong: rgba(255, 255, 255, 0.07);
+	--color-glass-elev: rgba(255, 255, 255, 0.10);
+	--color-highlight: rgba(255, 255, 255, 0.14);
+	--color-input-bg: rgba(255, 255, 255, 0.04);
+	--color-rule-strong: rgba(255, 255, 255, 0.16);
+
+	/* Accent palette — soft pastel constellation */
+	--color-primary: #b8a7ff;       /* lavender — main accent */
+	--color-primary-foreground: #02030a;
+	--color-orchid: #ff9ec4;
+	--color-mint:   #7ee8c4;
+	--color-citrus: #f0e16a;
+	--color-coral:  #ff8a78;
+	--color-sky:    #8ec9ff;
+
+	--color-accent: rgba(255, 255, 255, 0.07);
+	--color-accent-foreground: #f3f1ff;
+	--color-destructive: #ff8a78;
+
+	/* Card mapping (kept for backward compat with components that read --color-card) */
+	--color-card: rgba(255, 255, 255, 0.04);
+	--color-card-foreground: #f3f1ff;
+
+	/* Status surfaces */
+	--color-success-bg: rgba(126, 232, 196, 0.12);
+	--color-success-fg: #7ee8c4;
+	--color-warning-bg: rgba(240, 225, 106, 0.12);
+	--color-warning-fg: #f0e16a;
+	--color-error-bg:   rgba(255, 138, 120, 0.12);
+	--color-error-fg:   #ff8a78;
+
+	/* Glow tokens — used for focus rings, hover halos */
+	--color-glow:        rgba(184, 167, 255, 0.20);
+	--color-glow-strong: rgba(184, 167, 255, 0.45);
+
+	/* Sidebar tokens */
+	--color-sidebar: rgba(255, 255, 255, 0.04);
+	--color-sidebar-active: rgba(255, 255, 255, 0.10);
+
+	/* Shadow recipe for floating glass */
+	--shadow-card: 0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 60px -20px rgba(0,0,0,0.6);
+
+	/* Typography */
+	--font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
+	--font-display: 'Newsreader', ui-serif, Georgia, serif;
+
+	--radius: 1rem;
+
+	/* z-index scale (unchanged) */
 	--z-base: 1;
 	--z-sticky: 10;
 	--z-dropdown: 30;
@@ -45,30 +84,56 @@
 	--z-toast: 70;
 }
 
-/* Dark theme overrides */
+/* === AURORA: light theme ("Pearl") overrides === */
+[data-theme="light"] {
+	--color-background: #f5f3ff;
+	--color-background-deep: #ede9fe;
+	--color-foreground: #1a1530;
+	--color-muted: rgba(20, 15, 60, 0.04);
+	--color-muted-foreground: #3a3560;
+	--color-border: rgba(20, 15, 60, 0.08);
+
+	--color-glass: rgba(255, 255, 255, 0.55);
+	--color-glass-strong: rgba(255, 255, 255, 0.65);
+	--color-glass-elev: rgba(255, 255, 255, 0.80);
+	--color-highlight: rgba(255, 255, 255, 0.9);
+	--color-input-bg: rgba(255, 255, 255, 0.85);
+	--color-rule-strong: rgba(20, 15, 60, 0.16);
+
+	--color-primary: #6d4ce0;
+	--color-primary-foreground: #ffffff;
+	--color-orchid: #d63384;
+	--color-mint:   #008a64;
+	--color-citrus: #a07a00;
+	--color-coral:  #e0512f;
+	--color-sky:    #1f6fcc;
+
+	--color-accent: rgba(20, 15, 60, 0.04);
+	--color-accent-foreground: #1a1530;
+	--color-destructive: #e0512f;
+
+	--color-card: rgba(255, 255, 255, 0.55);
+	--color-card-foreground: #1a1530;
+
+	--color-success-bg: rgba(0, 138, 100, 0.10);
+	--color-success-fg: #008a64;
+	--color-warning-bg: rgba(160, 122, 0, 0.10);
+	--color-warning-fg: #a07a00;
+	--color-error-bg:   rgba(224, 81, 47, 0.10);
+	--color-error-fg:   #e0512f;
+
+	--color-glow:        rgba(109, 76, 224, 0.18);
+	--color-glow-strong: rgba(109, 76, 224, 0.40);
+
+	--color-sidebar: rgba(255, 255, 255, 0.55);
+	--color-sidebar-active: rgba(255, 255, 255, 0.85);
+
+	--shadow-card: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 40px -16px rgba(80, 50, 180, 0.18);
+}
+
+/* Legacy alias — many components still read [data-theme="dark"] */
 [data-theme="dark"] {
-	--color-background: #0c0e14;
-	--color-foreground: #e4e6ed;
-	--color-muted: #1a1d28;
-	--color-muted-foreground: #8b8fa4;
-	--color-border: #252836;
-	--color-primary: #14b8a6;
-	--color-primary-foreground: #0c0e14;
-	--color-accent: #1a1d28;
-	--color-accent-foreground: #e4e6ed;
-	--color-destructive: #f87171;
-	--color-card: #13151e;
-	--color-card-foreground: #e4e6ed;
-	--color-success-bg: #052e16;
-	--color-success-fg: #34d399;
-	--color-warning-bg: #422006;
-	--color-warning-fg: #fbbf24;
-	--color-error-bg: #450a0a;
-	--color-error-fg: #f87171;
-	--color-glow: rgba(20, 184, 166, 0.12);
-	--color-glow-strong: rgba(20, 184, 166, 0.25);
-	--color-sidebar: #10121a;
-	--color-sidebar-active: rgba(20, 184, 166, 0.1);
+	/* defaults already match :root — no overrides needed, declaration kept for color-scheme */
 }
 
 body {
@@ -78,68 +143,146 @@ body {
 	transition: background-color 0.3s ease, color 0.3s ease;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	letter-spacing: -0.005em;
+	min-height: 100vh;
+	overflow-x: hidden;
 }
 
-/* Subtle background pattern */
+/* === Aurora atmosphere — vivid blurred blobs behind everything === */
 body::before {
+	content: '';
+	position: fixed;
+	inset: -20vh -10vw;
+	background:
+		radial-gradient(40vw 40vw at 12% 18%, rgba(184, 167, 255, 0.55), transparent 60%),
+		radial-gradient(35vw 35vw at 88% 22%, rgba(255, 158, 196, 0.45), transparent 60%),
+		radial-gradient(50vw 35vw at 78% 88%, rgba(126, 232, 196, 0.40), transparent 60%),
+		radial-gradient(40vw 30vw at 6% 92%, rgba(142, 201, 255, 0.42), transparent 60%);
+	filter: blur(60px) saturate(140%);
+	pointer-events: none;
+	z-index: -2;
+	animation: aurora-drift 28s ease-in-out infinite alternate;
+}
+
+body::after {
 	content: '';
 	position: fixed;
 	inset: 0;
 	z-index: -1;
-	opacity: 0.4;
-	background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);
-	background-size: 32px 32px;
+	background: radial-gradient(circle at 50% 50%, transparent 30%, var(--color-background-deep) 100%);
 	pointer-events: none;
+	opacity: 0.7;
 }
 
-/* Form controls */
+@keyframes aurora-drift {
+	from { transform: translate(0, 0) scale(1); }
+	to   { transform: translate(-2%, 1%) scale(1.05); }
+}
+
+[data-theme="light"] body::before { opacity: 0.85; }
+
+/* Form controls — Aurora-native defaults */
 input, select, textarea {
 	color: var(--color-foreground);
-	background-color: var(--color-background);
-	border-color: var(--color-border);
+	background-color: var(--color-input-bg);
+	border: 1px solid var(--color-rule-strong);
+	border-radius: 0.625rem;
 	font-family: var(--font-sans);
-	transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Default text inputs / search / textarea: comfortable padding.
+   `<input type="checkbox">` and `<input type="radio">` are excluded so
+   they keep their native compact sizing. Any explicit `padding`/`p-*`
+   utility from a callsite still wins. */
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
+textarea {
+	padding: 0.55rem 0.85rem;
+	font-size: 0.875rem;
+}
+
+select {
+	padding: 0.55rem 2.2rem 0.55rem 0.85rem;
+	font-size: 0.875rem;
+	appearance: none;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6c92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
+	background-repeat: no-repeat;
+	background-position: right 0.75rem center;
+	background-size: 12px;
+}
+
+input:hover:not(:focus-visible):not([disabled]),
+select:hover:not(:focus-visible):not([disabled]),
+textarea:hover:not(:focus-visible):not([disabled]) {
+	border-color: var(--color-rule-strong);
+	background-color: var(--color-glass-strong);
 }
 
 input:focus-visible, select:focus-visible, textarea:focus-visible {
 	outline: none;
 	border-color: var(--color-primary);
-	box-shadow: 0 0 0 3px var(--color-glow), 0 0 12px var(--color-glow);
+	box-shadow: 0 0 0 3px var(--color-glow);
 }
 
-button:focus-visible {
+input::placeholder, textarea::placeholder {
+	color: var(--color-muted-foreground);
+}
+
+button:focus-visible, a:focus-visible {
 	outline: 2px solid var(--color-primary);
 	outline-offset: 2px;
-	border-radius: 0.375rem;
+	border-radius: 0.5rem;
 }
 
-a:focus-visible {
-	outline: 2px solid var(--color-primary);
-	outline-offset: 2px;
-	border-radius: 0.375rem;
-}
-
-/* Override browser autofill styles in dark mode */
+/* Override browser autofill in dark mode */
 [data-theme="dark"] input:-webkit-autofill,
 [data-theme="dark"] input:-webkit-autofill:hover,
 [data-theme="dark"] input:-webkit-autofill:focus,
 [data-theme="dark"] select:-webkit-autofill {
-	-webkit-box-shadow: 0 0 0 1000px #13151e inset !important;
-	-webkit-text-fill-color: #e4e6ed !important;
-	caret-color: #e4e6ed;
+	-webkit-box-shadow: 0 0 0 1000px #0d0e1c inset !important;
+	-webkit-text-fill-color: #f3f1ff !important;
+	caret-color: #f3f1ff;
 }
 
-/* Color scheme for native controls */
 [data-theme="dark"] { color-scheme: dark; }
 [data-theme="light"] { color-scheme: light; }
 
 /* Scrollbar styling */
-::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: var(--color-rule-strong); border-radius: 999px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); }
 
-/* Animations */
+/* === Glass surface utility — used by cards, panels, sidebar === */
+.glass {
+	background: var(--color-glass);
+	backdrop-filter: blur(28px) saturate(160%);
+	-webkit-backdrop-filter: blur(28px) saturate(160%);
+	border: 1px solid var(--color-border);
+	border-radius: 22px;
+	box-shadow: var(--shadow-card);
+	position: relative;
+}
+.glass::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	pointer-events: none;
+	background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+	opacity: 0.4;
+}
+.glass-strong {
+	background: var(--color-glass-strong);
+}
+.glass-elev {
+	background: var(--color-glass-elev);
+}
+
+/* Selection */
+::selection { background: var(--color-primary); color: var(--color-primary-foreground); }
+
+/* === Animations === */
 @keyframes fadeSlideIn {
 	from { opacity: 0; }
 	to { opacity: 1; }
@@ -160,6 +303,48 @@ a:focus-visible {
 	to { opacity: 1; }
 }
 
+@keyframes aurora-rise {
+	from { opacity: 0; transform: translateY(14px); }
+	to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes aurora-pulse-glow-mint {
+	0%, 100% {
+		box-shadow:
+			0 0 4px color-mix(in srgb, var(--color-mint) 60%, transparent),
+			0 0 0 0 color-mix(in srgb, var(--color-mint) 0%, transparent);
+	}
+	50% {
+		box-shadow:
+			0 0 10px color-mix(in srgb, var(--color-mint) 80%, transparent),
+			0 0 0 4px color-mix(in srgb, var(--color-mint) 25%, transparent);
+	}
+}
+@keyframes aurora-pulse-glow-citrus {
+	0%, 100% {
+		box-shadow:
+			0 0 4px color-mix(in srgb, var(--color-citrus) 60%, transparent),
+			0 0 0 0 color-mix(in srgb, var(--color-citrus) 0%, transparent);
+	}
+	50% {
+		box-shadow:
+			0 0 10px color-mix(in srgb, var(--color-citrus) 80%, transparent),
+			0 0 0 4px color-mix(in srgb, var(--color-citrus) 25%, transparent);
+	}
+}
+@keyframes aurora-pulse-glow-coral {
+	0%, 100% {
+		box-shadow:
+			0 0 4px color-mix(in srgb, var(--color-coral) 60%, transparent),
+			0 0 0 0 color-mix(in srgb, var(--color-coral) 0%, transparent);
+	}
+	50% {
+		box-shadow:
+			0 0 10px color-mix(in srgb, var(--color-coral) 80%, transparent),
+			0 0 0 4px color-mix(in srgb, var(--color-coral) 25%, transparent);
+	}
+}
+
 .animate-fade-slide-in {
 	animation: fadeSlideIn 0.4s ease-out forwards;
 }
@@ -178,9 +363,13 @@ a:focus-visible {
 	animation: countUp 0.5s ease-out both;
 }
 
+.animate-rise {
+	animation: aurora-rise 0.6s cubic-bezier(.2,.7,.2,1) both;
+}
+
 /* Stagger children utility */
 .stagger-children > * {
-	animation: fadeSlideIn 0.4s ease-out forwards;
+	animation: aurora-rise 0.55s cubic-bezier(.2,.7,.2,1) both;
 }
 .stagger-children > *:nth-child(1) { animation-delay: 0ms; }
 .stagger-children > *:nth-child(2) { animation-delay: 60ms; }
@@ -193,10 +382,14 @@ a:focus-visible {
 	font-family: var(--font-mono);
 }
 
+.font-display {
+	font-family: var(--font-display);
+}
+
 /* Card highlight for cross-entity navigation */
 @keyframes cardHighlight {
 	0%, 100% { box-shadow: none; }
-	25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
+	25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px var(--color-glow-strong); }
 }
 
 /* Dim overlay behind highlighted card */
@@ -213,3 +406,56 @@ a:focus-visible {
 .nav-dim-overlay.active {
 	opacity: 1;
 }
+
+/* Live pulse dot — for "live" / armed indicators.
+   Pulse is a self-contained box-shadow glow on the dot. No transform,
+   no pseudo-element — the dot's own bounding box never changes, so
+   ancestors with overflow:hidden can only clip the (decorative) glow,
+   never the dot itself. */
+.aurora-pulse {
+	width: 8px; height: 8px;
+	border-radius: 50%;
+	background: var(--color-mint);
+	display: inline-block;
+	flex-shrink: 0;
+	animation: aurora-pulse-glow-mint 1.6s ease-in-out infinite;
+}
+.aurora-pulse.warn {
+	background: var(--color-citrus);
+	animation-name: aurora-pulse-glow-citrus;
+}
+.aurora-pulse.error {
+	background: var(--color-coral);
+	animation-name: aurora-pulse-glow-coral;
+}
+.aurora-pulse.idle {
+	background: var(--color-muted-foreground);
+	box-shadow: none;
+	opacity: 0.5;
+	animation: none;
+}
+
+/* === Reduced-motion: kill drift, pulses, shimmers, stagger entrances === */
+@media (prefers-reduced-motion: reduce) {
+	body::before { animation: none !important; }
+	.animate-fade-slide-in,
+	.animate-shimmer,
+	.animate-pulse-glow,
+	.animate-count-up,
+	.animate-rise,
+	.stagger-children > *,
+	.aurora-pulse,
+	.aurora-pulse.warn,
+	.aurora-pulse.error {
+		animation: none !important;
+	}
+	.stat-card,
+	.paginator-btn,
+	.signal-row,
+	.provider-row {
+		transition: none !important;
+	}
+	* {
+		scroll-behavior: auto !important;
+	}
+}

frontend/src/app.d.ts

@@ -0,0 +1,16 @@
+// Ambient type declarations for SvelteKit + project-level build-time globals.
+
+declare global {
+	/** App version, injected from frontend/package.json at build time. */
+	const __APP_VERSION__: string;
+
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

frontend/src/app.html

@@ -5,6 +5,23 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>Notify Bridge</title>
+		<script>
+			// Resolve theme before first paint to avoid dark→light FOUC on hard reload.
+			(function () {
+				try {
+					var saved = localStorage.getItem('theme');
+					var resolved =
+						saved === 'light' || saved === 'dark'
+							? saved
+							: window.matchMedia('(prefers-color-scheme: dark)').matches
+								? 'dark'
+								: 'light';
+					document.documentElement.setAttribute('data-theme', resolved);
+				} catch (_) {
+					document.documentElement.setAttribute('data-theme', 'light');
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

frontend/src/lib/components/Button.svelte

@@ -21,10 +21,10 @@
 		class?: string;
 	} = $props();
 
-	const baseClasses = 'inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors disabled:opacity-50';
+	const baseClasses = 'aurora-btn inline-flex items-center justify-center gap-2 font-medium transition-all disabled:opacity-50 disabled:pointer-events-none';
 	const sizeClasses: Record<string, string> = {
-		sm: 'px-2.5 py-1 text-xs',
-		md: 'px-4 py-2',
+		sm: 'aurora-btn--sm',
+		md: 'aurora-btn--md',
 	};
 	const variantClasses: Record<string, string> = {
 		primary: 'btn-primary',
@@ -49,37 +49,72 @@
 {/if}
 
 <style>
-	.btn-primary {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
+	.aurora-btn {
+		border-radius: 12px;
+		letter-spacing: -0.005em;
+		cursor: pointer;
+		font-family: inherit;
+		white-space: nowrap;
 	}
-	.btn-primary:hover:not(:disabled) {
-		opacity: 0.9;
+	.aurora-btn--sm {
+		padding: 0 0.95rem;
+		height: 34px;
+		font-size: 0.82rem;
+	}
+	.aurora-btn--md {
+		padding: 0 1.15rem;
+		height: 40px;
+		font-size: 0.875rem;
 	}
 
+	/* Primary — gradient lavender→orchid pill, the page's main CTA. */
+	.btn-primary {
+		background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
+		color: white;
+		border: 0;
+		box-shadow:
+			0 6px 20px -8px var(--color-glow-strong),
+			inset 0 1px 0 rgba(255, 255, 255, 0.35);
+		font-weight: 600;
+	}
+	.btn-primary:hover:not(:disabled) {
+		transform: translateY(-1px);
+		box-shadow:
+			0 10px 28px -10px var(--color-glow-strong),
+			inset 0 1px 0 rgba(255, 255, 255, 0.4);
+	}
+	.btn-primary:active:not(:disabled) { transform: translateY(0); }
+
 	.btn-secondary {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
-		border: 1px solid var(--color-border);
+		border: 1px solid var(--color-rule-strong);
 	}
 	.btn-secondary:hover:not(:disabled) {
-		opacity: 0.8;
+		background: var(--color-glass-elev);
+		border-color: var(--color-rule-strong);
 	}
 
 	.btn-danger {
 		background: var(--color-error-fg);
 		color: white;
+		border: 0;
+		font-weight: 600;
+		box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--color-error-fg) 50%, transparent);
 	}
 	.btn-danger:hover:not(:disabled) {
-		opacity: 0.9;
+		transform: translateY(-1px);
+		box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--color-error-fg) 60%, transparent);
 	}
 
 	.btn-ghost {
 		background: transparent;
 		color: var(--color-muted-foreground);
+		border: 1px solid transparent;
 	}
 	.btn-ghost:hover:not(:disabled) {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
+		border-color: var(--color-border);
 	}
 </style>

frontend/src/lib/components/Card.svelte

@@ -1,30 +1,55 @@
 <script lang="ts">
-	let { children, class: className = '', hover = false, entityId = undefined, ...rest } = $props<{
-		children: import('svelte').Snippet;
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
 		class?: string;
 		hover?: boolean;
 		entityId?: number | string;
-		[key: string]: any;
-	}>();
+		[key: string]: unknown;
+	}
+
+	let { children, class: className = '', hover = false, entityId = undefined, ...rest }: Props = $props();
 </script>
 
 <div
 	class="card-component {hover ? 'card-hover' : ''} {className}"
-	style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem;"
 	data-entity-id={entityId}
 	{...rest}
 >
-	{@render children()}
+	<div class="card-component__inner">
+		{@render children()}
+	</div>
 </div>
 
 <style>
 	.card-component {
-		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+		position: relative;
+		background: var(--color-glass);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
+		border: 1px solid var(--color-border);
+		border-radius: 22px;
+		box-shadow: var(--shadow-card);
+		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
+		overflow: hidden;
+	}
+	.card-component::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.card-component__inner {
+		position: relative;
+		z-index: 1;
+		padding: 1.25rem 1.4rem;
 	}
-
 	.card-hover:hover {
-		border-color: var(--color-primary);
-		box-shadow: 0 4px 16px var(--color-glow), 0 0 0 1px var(--color-glow);
+		border-color: var(--color-rule-strong);
+		transform: translateY(-2px);
 	}
 </style>

frontend/src/lib/components/CollapsibleSlot.svelte

@@ -21,7 +21,7 @@
 	const STATUS_MAP: Record<string, { icon: string; color: string; bg: string }> = {
 		empty: { icon: 'mdiCircleOutline', color: 'var(--color-muted-foreground)', bg: 'transparent' },
 		valid: { icon: 'mdiCheckCircle', color: 'var(--color-success-fg)', bg: 'var(--color-success-bg)' },
-		warning: { icon: 'mdiAlert', color: '#d97706', bg: 'rgba(217, 119, 6, 0.1)' },
+		warning: { icon: 'mdiAlert', color: 'var(--color-warning-fg)', bg: 'var(--color-warning-bg)' },
 		error: { icon: 'mdiAlertCircle', color: 'var(--color-error-fg)', bg: 'var(--color-error-bg)' },
 	};
 	const statusConfig = $derived(STATUS_MAP[status]);

frontend/src/lib/components/EntitySelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	export interface EntityItem {
 		value: string | number;
@@ -34,8 +35,8 @@
 	let open = $state(false);
 	let query = $state('');
 	let highlightIdx = $state(0);
-	let inputEl: HTMLInputElement;
-	let listEl: HTMLDivElement;
+	let inputEl = $state<HTMLInputElement | undefined>();
+	let listEl = $state<HTMLDivElement | undefined>();
 
 	const selected = $derived(items.find(i => String(i.value) === String(value)));
 
@@ -121,55 +122,57 @@
 	<span class="es-trigger-arrow"><MdiIcon name="mdiChevronDown" size={14} /></span>
 </button>
 
-<!-- Palette overlay -->
+<!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
 {#if open}
-	<div class="ep-overlay" onclick={closePalette} role="presentation"></div>
+	<div use:portal class="es-portal-root">
+		<div class="ep-overlay" onclick={closePalette} role="presentation"></div>
 
-	<div class="ep-container">
-		<div class="ep-search-row">
-			<MdiIcon name="mdiMagnify" size={18} />
-			<input
-				bind:this={inputEl}
-				bind:value={query}
-				placeholder={selected ? selected.label : placeholder}
-				class="ep-input"
-				type="text"
-				autocomplete="off"
-				spellcheck="false"
-				onkeydown={handleKeydown}
-			/>
-			<kbd class="ep-kbd">ESC</kbd>
-		</div>
+		<div class="ep-container">
+			<div class="ep-search-row">
+				<MdiIcon name="mdiMagnify" size={18} />
+				<input
+					bind:this={inputEl}
+					bind:value={query}
+					placeholder={selected ? selected.label : placeholder}
+					class="ep-input"
+					type="text"
+					autocomplete="off"
+					spellcheck="false"
+					onkeydown={handleKeydown}
+				/>
+				<kbd class="ep-kbd">ESC</kbd>
+			</div>
 
-		<div class="ep-list" bind:this={listEl} role="listbox">
-			{#if filtered.length === 0}
-				<div class="ep-empty">{t('common.noMatches')}</div>
-			{:else}
-				{#each filtered as item, i}
-					<button
-						class="ep-item"
-						class:ep-highlight={i === highlightIdx && !item.disabled}
-						class:ep-current={String(item.value) === String(value)}
-						class:ep-disabled={item.disabled}
-						role="option"
-						aria-selected={String(item.value) === String(value)}
-						aria-disabled={item.disabled || undefined}
-						onclick={() => selectItem(item)}
-						onmouseenter={() => highlightIdx = i}
-						type="button"
-					>
-						{#if item.icon}
-							<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
-						{/if}
-						<span class="ep-item-label">{item.label}</span>
-						{#if item.disabled && item.disabledHint}
-							<span class="ep-item-hint">{item.disabledHint}</span>
-						{:else if item.desc}
-							<span class="ep-item-desc">{item.desc}</span>
-						{/if}
-					</button>
-				{/each}
-			{/if}
+			<div class="ep-list" bind:this={listEl} role="listbox">
+				{#if filtered.length === 0}
+					<div class="ep-empty">{t('common.noMatches')}</div>
+				{:else}
+					{#each filtered as item, i}
+						<button
+							class="ep-item"
+							class:ep-highlight={i === highlightIdx && !item.disabled}
+							class:ep-current={String(item.value) === String(value)}
+							class:ep-disabled={item.disabled}
+							role="option"
+							aria-selected={String(item.value) === String(value)}
+							aria-disabled={item.disabled || undefined}
+							onclick={() => selectItem(item)}
+							onmouseenter={() => highlightIdx = i}
+							type="button"
+						>
+							{#if item.icon}
+								<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
+							{/if}
+							<span class="ep-item-label">{item.label}</span>
+							{#if item.disabled && item.disabledHint}
+								<span class="ep-item-hint">{item.disabledHint}</span>
+							{:else if item.desc}
+								<span class="ep-item-desc">{item.desc}</span>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -181,23 +184,25 @@
 		align-items: center;
 		gap: 0.5rem;
 		width: 100%;
-		padding: 0.375rem 0.75rem;
-		border: 1px solid var(--color-border);
-		border-radius: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 0.625rem;
 		font-size: 0.875rem;
-		background: var(--color-background);
+		background: var(--color-input-bg);
 		color: var(--color-foreground);
-		transition: border-color 0.15s;
+		transition: border-color 0.15s, background 0.15s;
 		text-align: left;
 		cursor: pointer;
+		font-family: inherit;
 	}
 	.es-trigger.es-sm {
-		padding: 0.25rem 0.5rem;
-		font-size: 0.75rem;
-		gap: 0.375rem;
+		padding: 0.3rem 0.55rem;
+		font-size: 0.8rem;
+		gap: 0.4rem;
 	}
 	.es-trigger:hover {
-		border-color: var(--color-primary);
+		background: var(--color-glass-strong);
+		border-color: var(--color-rule-strong);
 	}
 	.es-trigger-icon {
 		flex-shrink: 0;
@@ -217,41 +222,63 @@
 		color: var(--color-muted-foreground);
 	}
 
-	/* Overlay */
-	.ep-overlay {
+	/* Portal root — escapes any backdrop-filter ancestor */
+	.es-portal-root {
 		position: fixed;
 		inset: 0;
 		z-index: 9998;
-		background: rgba(0, 0, 0, 0.4);
-		backdrop-filter: blur(2px);
+		pointer-events: none;
 	}
 
-	/* Palette container */
+	/* Overlay */
+	.ep-overlay {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(8px) saturate(120%);
+		-webkit-backdrop-filter: blur(8px) saturate(120%);
+	}
+
+	/* Palette container — high opacity for legibility */
 	.ep-container {
-		position: fixed;
+		pointer-events: auto;
+		position: absolute;
 		top: min(20vh, 120px);
 		left: 50%;
 		transform: translateX(-50%);
-		z-index: 9999;
-		width: min(460px, 90vw);
+		z-index: 1;
+		width: min(480px, 92vw);
 		max-height: 60vh;
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.75rem;
-		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+		background: var(--ep-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 16px;
+		box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
+		--ep-solid-bg: #131520;
+	}
+	:global([data-theme="light"]) .ep-container { --ep-solid-bg: #fafafe; }
+	.ep-container::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
 	}
 
 	/* Search row */
 	.ep-search-row {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.625rem 0.875rem;
+		gap: 0.6rem;
+		padding: 0.85rem 1rem;
 		border-bottom: 1px solid var(--color-border);
 		color: var(--color-muted-foreground);
+		position: relative;
+		z-index: 1;
 	}
 	.ep-input {
 		flex: 1;
@@ -261,14 +288,16 @@
 		font-size: 0.9rem;
 		color: var(--color-foreground);
 		padding: 0;
+		font-family: inherit;
 	}
+	.ep-input::placeholder { color: var(--color-muted-foreground); }
 	.ep-kbd {
-		font-size: 0.55rem;
+		font-size: 0.62rem;
 		font-family: var(--font-mono);
-		padding: 0.1rem 0.3rem;
-		border-radius: 0.2rem;
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
+		padding: 0.2rem 0.45rem;
+		border-radius: 6px;
+		background: var(--color-glass-strong);
+		color: var(--color-foreground);
 		border: 1px solid var(--color-border);
 	}
 
@@ -276,10 +305,12 @@
 	.ep-list {
 		overflow-y: auto;
 		scrollbar-width: thin;
-		padding: 0.25rem 0;
+		padding: 0.35rem;
+		position: relative;
+		z-index: 1;
 	}
 	.ep-empty {
-		padding: 1rem;
+		padding: 1.25rem;
 		text-align: center;
 		color: var(--color-muted-foreground);
 		font-size: 0.85rem;
@@ -289,20 +320,26 @@
 	.ep-item {
 		display: flex;
 		align-items: center;
-		gap: 0.625rem;
+		gap: 0.65rem;
 		width: 100%;
-		padding: 0.5rem 0.875rem;
-		border: none;
+		padding: 0.55rem 0.75rem;
+		border: 1px solid transparent;
 		background: transparent;
 		color: var(--color-foreground);
-		font-size: 0.875rem;
+		font-size: 0.88rem;
 		cursor: pointer;
 		text-align: left;
-		transition: background 0.1s;
-		border-left: 3px solid transparent;
+		transition: background 0.12s, border-color 0.12s;
+		border-radius: 10px;
+		font-family: inherit;
 	}
 	.ep-item:hover, .ep-item.ep-highlight {
-		background: var(--color-muted);
+		background: rgba(255, 255, 255, 0.06);
+		border-color: var(--color-rule-strong);
+	}
+	:global([data-theme="light"]) .ep-item:hover,
+	:global([data-theme="light"]) .ep-item.ep-highlight {
+		background: rgba(20, 15, 60, 0.05);
 	}
 	.ep-item.ep-disabled {
 		opacity: 0.4;
@@ -310,9 +347,14 @@
 	}
 	.ep-item.ep-disabled:hover {
 		background: transparent;
+		border-color: transparent;
 	}
 	.ep-item.ep-current {
-		border-left-color: var(--color-primary);
+		background: linear-gradient(135deg,
+			color-mix(in srgb, var(--color-primary) 14%, transparent),
+			color-mix(in srgb, var(--color-orchid) 14%, transparent));
+		border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
+		box-shadow: inset 0 1px 0 var(--color-highlight);
 	}
 	.ep-item-icon {
 		flex-shrink: 0;
@@ -320,19 +362,30 @@
 		align-items: center;
 		justify-content: center;
 		color: var(--color-muted-foreground);
+		width: 28px; height: 28px;
+		border-radius: 8px;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
 	}
 	.ep-item.ep-current .ep-item-icon {
 		color: var(--color-primary);
+		background: var(--color-glass-elev);
 	}
 	.ep-item-label {
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		font-weight: 500;
 	}
 	.ep-item-desc {
-		font-size: 0.75rem;
+		font-size: 0.7rem;
+		font-family: var(--font-mono);
 		color: var(--color-muted-foreground);
+		padding: 0.12rem 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

frontend/src/lib/components/EventChart.svelte

@@ -2,6 +2,7 @@
 	import { t } from '$lib/i18n';
 	import { parseDate } from '$lib/api';
 	import MdiIcon from './MdiIcon.svelte';
+	import { portal } from '$lib/portal';
 
 	interface DayData {
 		date: string;
@@ -13,11 +14,11 @@
 	const EVENT_TYPES = ['assets_added', 'assets_removed', 'collection_renamed', 'collection_deleted', 'sharing_changed'] as const;
 
 	const COLORS: Record<string, string> = {
-		assets_added: '#059669',
-		assets_removed: '#ef4444',
-		collection_renamed: '#6366f1',
-		collection_deleted: '#dc2626',
-		sharing_changed: '#f59e0b',
+		assets_added: 'var(--color-mint)',
+		assets_removed: 'var(--color-coral)',
+		collection_renamed: 'var(--color-primary)',
+		collection_deleted: 'var(--color-error-fg)',
+		sharing_changed: 'var(--color-citrus)',
 	};
 
 	const LABELS: Record<string, string> = {
@@ -128,28 +129,26 @@
 </div>
 
 {#if tooltip}
-	<div
-		class="chart-tooltip"
-		style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);"
-	>
-		{#each tooltip.text.split('\n') as line}
-			<div>{line}</div>
-		{/each}
+	<div use:portal>
+		<div
+			class="chart-tooltip"
+			style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);"
+		>
+			{#each tooltip.text.split('\n') as line}
+				<div>{line}</div>
+			{/each}
+		</div>
 	</div>
 {/if}
 
 <style>
 	.chart-wrapper {
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.75rem;
-		padding: 1.25rem;
-		margin-bottom: 1.5rem;
-		transition: border-color 0.2s;
-	}
-	.chart-wrapper:hover {
-		border-color: var(--color-primary);
-		box-shadow: 0 0 16px var(--color-glow);
+		/* Outer chrome lives on the parent panel — keep this transparent so
+		   we don't get a double border / nested card look. */
+		background: transparent;
+		border: 0;
+		padding: 0;
+		margin-bottom: 0;
 	}
 	.chart-header {
 		display: flex;
@@ -248,16 +247,21 @@
 		border-radius: 50%;
 		flex-shrink: 0;
 	}
-	.chart-tooltip {
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		font-size: 0.7rem;
+	/* Tooltip is portalled to <body>, so use :global to make the style
+	   apply regardless of DOM location. */
+	:global(.chart-tooltip) {
+		--ct-solid-bg: #131520;
+		background: var(--ct-solid-bg);
+		color: var(--color-foreground);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 10px;
+		padding: 0.55rem 0.8rem;
+		font-size: 0.72rem;
 		font-family: var(--font-mono);
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+		box-shadow: var(--shadow-card), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
 		pointer-events: none;
 		white-space: nowrap;
 		line-height: 1.5;
 	}
+	:global([data-theme="light"] .chart-tooltip) { --ct-solid-bg: #fafafe; }
 </style>

frontend/src/lib/components/Hint.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import { portal } from '$lib/portal';
+
 	let { text = '' } = $props<{ text: string }>();
 	let visible = $state(false);
 	let tooltipStyle = $state('');
-	let btnEl: HTMLButtonElement;
+	let btnEl = $state<HTMLButtonElement | undefined>();
+	const tooltipId = `hint-${Math.random().toString(36).slice(2, 9)}`;
 
 	function show() {
 		if (!btnEl) return;
@@ -12,7 +15,7 @@
 		let left = rect.left + rect.width / 2 - tooltipWidth / 2;
 		if (left < 8) left = 8;
 		if (left + tooltipWidth > window.innerWidth - 8) left = window.innerWidth - tooltipWidth - 8;
-		tooltipStyle = `position:fixed; z-index:99999; bottom:${window.innerHeight - rect.top + 8}px; left:${left}px; width:${tooltipWidth}px;`;
+		tooltipStyle = `position:fixed; z-index:9999; bottom:${window.innerHeight - rect.top + 8}px; left:${left}px; width:${tooltipWidth}px;`;
 	}
 
 	function hide() {
@@ -21,9 +24,7 @@
 </script>
 
 <button type="button" bind:this={btnEl}
-	class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[11px] font-bold leading-none
-		border border-[var(--color-border)] bg-[var(--color-muted)] text-[var(--color-muted-foreground)]
-		hover:bg-[var(--color-border)] hover:text-[var(--color-foreground)]
+	class="hint-btn inline-flex items-center justify-center w-4 h-4 rounded-full text-[11px] font-bold leading-none
 		focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]
 		transition-colors cursor-help align-middle ml-2 flex-shrink-0"
 	onmouseenter={show}
@@ -31,12 +32,41 @@
 	onfocus={show}
 	onblur={hide}
 	aria-label={text}
+	aria-describedby={visible ? tooltipId : undefined}
 	title={text}
 	tabindex="0"
 >?</button>
 
 {#if visible}
-	<div role="tooltip" style="{tooltipStyle} background:var(--color-card); color:var(--color-foreground); border:1px solid var(--color-border); box-shadow:0 10px 30px rgba(0,0,0,0.3); padding:0.625rem 0.75rem; border-radius:0.5rem; font-size:0.8125rem; white-space:normal; line-height:1.625; pointer-events:none;">
-		{text}
+	<div use:portal>
+		<div id={tooltipId} role="tooltip" style={tooltipStyle} class="hint-tooltip">
+			{text}
+		</div>
 	</div>
 {/if}
+
+<style>
+	.hint-btn {
+		border: 1px solid var(--color-border);
+		background: var(--color-glass-strong);
+		color: var(--color-muted-foreground);
+	}
+	.hint-btn:hover {
+		background: var(--color-glass-elev);
+		color: var(--color-foreground);
+		border-color: var(--color-rule-strong);
+	}
+	.hint-tooltip {
+		background: var(--hint-solid-bg, #131520);
+		color: var(--color-foreground);
+		border: 1px solid var(--color-rule-strong);
+		box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
+		padding: 0.7rem 0.85rem;
+		border-radius: 12px;
+		font-size: 0.8125rem;
+		white-space: normal;
+		line-height: 1.55;
+		pointer-events: none;
+	}
+	:global([data-theme="light"]) .hint-tooltip { --hint-solid-bg: #fafafe; }
+</style>

frontend/src/lib/components/IconGridSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	export interface GridItem {
 		value: string | number;
@@ -27,8 +28,8 @@
 
 	let open = $state(false);
 	let search = $state('');
-	let triggerEl: HTMLButtonElement;
-	let searchEl: HTMLInputElement;
+	let triggerEl = $state<HTMLButtonElement | undefined>();
+	let searchEl = $state<HTMLInputElement | undefined>();
 	let popupStyle = $state('');
 
 	const showSearch = $derived(items.length > 4);
@@ -90,36 +91,39 @@
 </button>
 
 {#if open}
-	<!-- Backdrop -->
-	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
-		role="presentation" onclick={() => open = false}></div>
+	<!-- Backdrop + popup are portalled to <body> so they escape any
+	     backdrop-filter / transform ancestor that would otherwise act
+	     as the containing block for `position: fixed`. -->
+	<div use:portal class="icon-grid-portal-root">
+		<div class="icon-grid-backdrop"
+			role="presentation" onclick={() => open = false}></div>
 
-	<!-- Popup grid -->
-	<div style="{popupStyle} width: {columns * 160 + 16}px;"
-		class="icon-grid-popup">
-		{#if showSearch}
-			<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
-				class="icon-grid-search" type="text" autocomplete="off"
-				onkeydown={handleKeydown} />
-		{/if}
-		<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
-			{#each filtered as item}
-				<button type="button"
-					class="icon-grid-cell"
-					class:active={String(item.value) === String(value)}
-					role="option"
-					aria-selected={String(item.value) === String(value)}
-					onclick={() => select(item)}>
-					<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
-					<span class="icon-grid-cell-label">{item.label}</span>
-					{#if item.desc}
-						<span class="icon-grid-cell-desc">{item.desc}</span>
-					{/if}
-				</button>
-			{/each}
-			{#if filtered.length === 0}
-				<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">{t('common.noMatches')}</div>
+		<div style="{popupStyle} width: {columns * 160 + 16}px;"
+			class="icon-grid-popup">
+			{#if showSearch}
+				<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
+					class="icon-grid-search" type="text" autocomplete="off"
+					onkeydown={handleKeydown} />
 			{/if}
+			<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
+				{#each filtered as item}
+					<button type="button"
+						class="icon-grid-cell"
+						class:active={String(item.value) === String(value)}
+						role="option"
+						aria-selected={String(item.value) === String(value)}
+						onclick={() => select(item)}>
+						<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
+						<span class="icon-grid-cell-label">{item.label}</span>
+						{#if item.desc}
+							<span class="icon-grid-cell-desc">{item.desc}</span>
+						{/if}
+					</button>
+				{/each}
+				{#if filtered.length === 0}
+					<div class="icon-grid-empty">{t('common.noMatches')}</div>
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -132,20 +136,21 @@
 		width: 100%;
 		padding: 0.5rem 0.75rem;
 		border: 1px solid var(--color-border);
-		border-radius: 0.375rem;
+		border-radius: 0.625rem;
 		font-size: 0.875rem;
-		background: var(--color-background);
+		background: var(--color-input-bg);
 		color: var(--color-foreground);
-		transition: border-color 0.15s, box-shadow 0.15s;
+		transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
 		text-align: left;
 	}
 	.icon-grid-trigger:hover:not(.disabled) {
-		border-color: var(--color-primary);
+		border-color: var(--color-rule-strong);
+		background: var(--color-glass-strong);
 	}
 	.icon-grid-compact {
-		padding: 0.25rem 0.5rem;
+		padding: 0.3rem 0.55rem;
 		gap: 0.3rem;
-		font-size: 0.875rem;
+		font-size: 0.85rem;
 	}
 	.icon-grid-compact .icon-grid-trigger-label {
 		flex: none;
@@ -165,57 +170,93 @@
 		color: var(--color-muted-foreground);
 		transition: transform 0.15s;
 	}
+
+	/* Portal root — drains the popup out of any backdrop-filter ancestor.
+	   Position: fixed isolates the stacking context at the root level. */
+	.icon-grid-portal-root {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		pointer-events: none;
+	}
+	.icon-grid-backdrop {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+	}
 	.icon-grid-popup {
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+		pointer-events: auto;
+		/* Solid surface — popups need legibility, not glass translucency. */
+		--igs-solid-bg: #131520;
+		background: var(--igs-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 14px;
+		box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
 		padding: 0.5rem;
 		max-height: 320px;
 		overflow-y: auto;
 		scrollbar-width: thin;
 	}
+	:global([data-theme="light"]) .icon-grid-popup { --igs-solid-bg: #fafafe; }
+	.icon-grid-popup::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
 	.icon-grid-search {
 		width: 100%;
-		padding: 0.375rem 0.5rem;
-		margin-bottom: 0.375rem;
-		border: none;
-		border-bottom: 1px solid var(--color-border);
-		border-radius: 0;
-		background: transparent;
+		padding: 0.45rem 0.6rem;
+		margin-bottom: 0.4rem;
+		border: 1px solid var(--color-border);
+		border-radius: 8px;
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
 		font-size: 0.8rem;
 		outline: none;
+		font-family: inherit;
+	}
+	.icon-grid-search:focus {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-glow);
 	}
 	.icon-grid {
 		display: grid;
 		gap: 0.375rem;
+		position: relative;
+		z-index: 1;
 	}
 	.icon-grid-cell {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.25rem;
-		padding: 0.625rem 0.375rem;
-		border-radius: 0.375rem;
-		border: 2px solid transparent;
+		gap: 0.3rem;
+		padding: 0.7rem 0.45rem;
+		border-radius: 10px;
+		border: 1px solid transparent;
 		background: transparent;
 		color: var(--color-foreground);
 		cursor: pointer;
 		transition: all 0.15s;
 		text-align: center;
+		font-family: inherit;
 	}
 	.icon-grid-cell:hover {
-		background: var(--color-muted);
-		transform: scale(1.03);
+		background: var(--color-glass-strong);
+		border-color: var(--color-border);
 	}
 	.icon-grid-cell.active {
+		background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-orchid) 18%, transparent));
 		border-color: var(--color-primary);
-		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		box-shadow: inset 0 1px 0 var(--color-highlight), 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
 	}
 	.icon-grid-cell-icon {
 		color: var(--color-muted-foreground);
 	}
+	.icon-grid-cell:hover .icon-grid-cell-icon { color: var(--color-foreground); }
 	.icon-grid-cell.active .icon-grid-cell-icon {
 		color: var(--color-primary);
 	}
@@ -229,4 +270,11 @@
 		color: var(--color-muted-foreground);
 		line-height: 1.2;
 	}
+	.icon-grid-empty {
+		grid-column: 1 / -1;
+		text-align: center;
+		padding: 0.85rem;
+		color: var(--color-muted-foreground);
+		font-size: 0.75rem;
+	}
 </style>

frontend/src/lib/components/IconPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getMdiPath, getAllMdiNames } from '$lib/mdi-lookup.svelte';
+	import { portal } from '$lib/portal';
 
 	let { value = '', onselect } = $props<{
 		value: string;
@@ -34,7 +35,14 @@
 	function toggleOpen() {
 		if (!open && buttonEl) {
 			const rect = buttonEl.getBoundingClientRect();
-			dropdownStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; left:${rect.left}px;`;
+			const popupWidth = 320; // 20rem
+			const popupHeight = 320;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const top = spaceBelow > popupHeight + 16
+				? rect.bottom + 4
+				: Math.max(8, rect.top - popupHeight - 4);
+			const left = Math.min(rect.left, window.innerWidth - popupWidth - 16);
+			dropdownStyle = `position:fixed; z-index:9999; top:${top}px; left:${Math.max(8, left)}px;`;
 		}
 		open = !open;
 		if (!open) search = '';
@@ -58,36 +66,158 @@
 
 <div class="inline-block">
 	<button type="button" bind:this={buttonEl} onclick={toggleOpen}
-		class="flex items-center justify-center gap-1 px-2 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] hover:bg-[var(--color-muted)] transition-colors">
+		class="icon-picker-trigger">
 		{#if value && getMdiPath(value)}
 			<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(value)} /></svg>
 		{:else}
-			<span class="text-[var(--color-muted-foreground)] text-xs">Icon</span>
+			<span class="icon-picker-placeholder">Icon</span>
 		{/if}
-		<span class="text-xs text-[var(--color-muted-foreground)]">▼</span>
+		<span class="icon-picker-caret">▾</span>
 	</button>
 </div>
 
 {#if open}
-	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
-		role="presentation"
-		onclick={() => { open = false; search = ''; }}></div>
+	<!-- Portal popup so it escapes any backdrop-filter / transform ancestor
+	     that would otherwise act as the containing block for position:fixed. -->
+	<div use:portal class="ip-portal-root">
+		<div class="ip-backdrop"
+			role="presentation"
+			onclick={() => { open = false; search = ''; }}></div>
 
-	<div style="{dropdownStyle} width: 20rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); padding: 0.75rem;"
-		class="">
-		<input type="text" bind:value={search} placeholder="Search icons..."
-			class="w-full px-2 py-1 mb-2 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
-		<div style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; max-height: 14rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;">
-			<button type="button" onclick={() => select('')}
-				class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] text-xs text-[var(--color-muted-foreground)]"
-				title="No icon">✕</button>
-			{#each filtered as iconName}
-				<button type="button" onclick={() => select(iconName)}
-					class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] {value === iconName ? 'bg-[var(--color-accent)]' : ''}"
-					title={iconName.replace('mdi', '')}>
-					<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
-				</button>
-			{/each}
+		<div style={dropdownStyle} class="ip-popup">
+			<input type="text" bind:value={search} placeholder="Search icons..."
+				class="ip-search" autocomplete="off" />
+			<div class="ip-grid">
+				<button type="button" onclick={() => select('')}
+					class="ip-cell ip-cell--clear"
+					title="No icon">✕</button>
+				{#each filtered as iconName}
+					<button type="button" onclick={() => select(iconName)}
+						class="ip-cell {value === iconName ? 'is-active' : ''}"
+						title={iconName.replace('mdi', '')}>
+						<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
+					</button>
+				{/each}
+			</div>
 		</div>
 	</div>
 {/if}
+
+<style>
+	.icon-picker-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.45rem 0.7rem;
+		border-radius: 0.625rem;
+		border: 1px solid var(--color-border);
+		background: var(--color-input-bg);
+		color: var(--color-foreground);
+		font-size: 0.85rem;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.icon-picker-trigger:hover {
+		background: var(--color-glass-strong);
+		border-color: var(--color-rule-strong);
+	}
+	.icon-picker-placeholder {
+		color: var(--color-muted-foreground);
+		font-size: 0.78rem;
+	}
+	.icon-picker-caret {
+		color: var(--color-muted-foreground);
+		font-size: 0.7rem;
+	}
+
+	/* Portal root — drains the popup out of any backdrop-filter ancestor */
+	.ip-portal-root {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		pointer-events: none;
+	}
+	.ip-backdrop {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+	}
+	.ip-popup {
+		pointer-events: auto;
+		width: 20rem;
+		--ip-solid-bg: #131520;
+		background: var(--ip-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 14px;
+		box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
+		padding: 0.65rem;
+		position: relative;
+	}
+	:global([data-theme="light"]) .ip-popup { --ip-solid-bg: #fafafe; }
+	.ip-popup::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.ip-search {
+		width: 100%;
+		padding: 0.45rem 0.6rem;
+		margin-bottom: 0.5rem;
+		border: 1px solid var(--color-border);
+		border-radius: 8px;
+		background: var(--color-glass-strong);
+		color: var(--color-foreground);
+		font-size: 0.82rem;
+		outline: none;
+		font-family: inherit;
+		position: relative;
+		z-index: 1;
+	}
+	.ip-search:focus {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-glow);
+	}
+	.ip-grid {
+		display: grid;
+		grid-template-columns: repeat(8, 1fr);
+		gap: 0.25rem;
+		max-height: 14rem;
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: thin;
+		position: relative;
+		z-index: 1;
+	}
+	.ip-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		aspect-ratio: 1;
+		border-radius: 8px;
+		border: 1px solid transparent;
+		background: transparent;
+		color: var(--color-foreground);
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.ip-cell:hover {
+		background: var(--color-glass-strong);
+		border-color: var(--color-border);
+	}
+	.ip-cell.is-active {
+		background: linear-gradient(135deg,
+			color-mix(in srgb, var(--color-primary) 18%, transparent),
+			color-mix(in srgb, var(--color-orchid) 18%, transparent));
+		border-color: var(--color-primary);
+		color: var(--color-primary);
+		box-shadow: inset 0 1px 0 var(--color-highlight);
+	}
+	.ip-cell--clear {
+		color: var(--color-muted-foreground);
+		font-size: 0.75rem;
+	}
+</style>

frontend/src/lib/components/JinjaEditor.svelte

@@ -84,23 +84,54 @@
 				}
 			}),
 			EditorView.lineWrapping,
-			EditorView.theme({
-				'&': { fontSize: '13px', fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace" },
-				'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '8px' },
-				'.cm-editor': { borderRadius: '0.375rem', border: '1px solid var(--color-border)' },
-				'.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '0px' },
-				'.cm-error-line': { backgroundColor: 'rgba(239, 68, 68, 0.2)', outline: '1px solid rgba(239, 68, 68, 0.4)' },
-				'.ͼc': { color: '#e879f9' },
-				'.ͼd': { color: '#38bdf8' },
-				'.ͼ5': { color: '#6b7280' },
-				'.cm-tooltip-autocomplete': {
-					border: '1px solid var(--color-border)',
-					borderRadius: '0.375rem',
-					fontSize: '12px',
-				},
-			}),
 		];
+		// Apply oneDark first so its syntax-token colors are kept,
+		// then override with our Aurora-aware theme so background,
+		// borders, and gutters match the rest of the design.
 		if (isDark) extensions.push(oneDark);
+		extensions.push(EditorView.theme({
+			'&': {
+				fontSize: '13px',
+				fontFamily: 'var(--font-mono)',
+				backgroundColor: 'var(--color-input-bg) !important',
+				borderRadius: '14px',
+				border: '1px solid var(--color-rule-strong)',
+				color: 'var(--color-foreground)',
+				overflow: 'hidden',
+			},
+			'.cm-editor': { backgroundColor: 'transparent !important', borderRadius: '14px' },
+			'.cm-scroller': { backgroundColor: 'transparent !important' },
+			'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '12px 14px', caretColor: 'var(--color-primary)' },
+			'.cm-gutters': {
+				backgroundColor: 'transparent',
+				color: 'var(--color-muted-foreground)',
+				borderRight: '1px solid var(--color-border)',
+			},
+			'.cm-activeLineGutter': { backgroundColor: 'var(--color-glass-strong)' },
+			'.cm-activeLine': { backgroundColor: 'var(--color-glass-strong)' },
+			'.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
+			'.cm-selectionBackground, ::selection': { backgroundColor: 'var(--color-glass-elev) !important' },
+			'&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--color-glow) !important' },
+			'.cm-focused': { outline: 'none' },
+			'&.cm-focused': { borderColor: 'var(--color-primary)', boxShadow: '0 0 0 3px var(--color-glow)' },
+			'.cm-error-line': { backgroundColor: 'rgba(255, 138, 120, 0.18)', outline: '1px solid rgba(255, 138, 120, 0.4)' },
+			'.ͼc': { color: 'var(--color-orchid)' },
+			'.ͼd': { color: 'var(--color-sky)' },
+			'.ͼ5': { color: 'var(--color-muted-foreground)' },
+			'.cm-tooltip-autocomplete': {
+				background: 'color-mix(in srgb, var(--color-background) 92%, transparent)',
+				backdropFilter: 'blur(28px) saturate(160%)',
+				border: '1px solid var(--color-rule-strong)',
+				borderRadius: '12px',
+				fontSize: '12px',
+				boxShadow: '0 12px 30px -12px rgba(0,0,0,0.4)',
+				overflow: 'hidden',
+			},
+			'.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+				backgroundColor: 'var(--color-glass-elev)',
+				color: 'var(--color-primary)',
+			},
+		}));
 		if (placeholder) extensions.push(cmPlaceholder(placeholder));
 		return extensions;
 	}

frontend/src/lib/components/LocaleSelector.svelte

@@ -1,48 +1,10 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { LOCALE_CATALOG, getLocaleMeta, type LocaleMeta } from '$lib/locales';
+	import EntitySelect, { type EntityItem } from './EntitySelect.svelte';
 
-	interface LocaleMeta {
-		code: string;
-		name: string;       // English name
-		native: string;     // Native script
-		rtl?: boolean;
-	}
-
-	const CATALOG: LocaleMeta[] = [
-		{ code: 'en', name: 'English',    native: 'English' },
-		{ code: 'ru', name: 'Russian',    native: 'Русский' },
-		{ code: 'de', name: 'German',     native: 'Deutsch' },
-		{ code: 'fr', name: 'French',     native: 'Français' },
-		{ code: 'es', name: 'Spanish',    native: 'Español' },
-		{ code: 'it', name: 'Italian',    native: 'Italiano' },
-		{ code: 'pt', name: 'Portuguese', native: 'Português' },
-		{ code: 'pl', name: 'Polish',     native: 'Polski' },
-		{ code: 'nl', name: 'Dutch',      native: 'Nederlands' },
-		{ code: 'sv', name: 'Swedish',    native: 'Svenska' },
-		{ code: 'fi', name: 'Finnish',    native: 'Suomi' },
-		{ code: 'no', name: 'Norwegian',  native: 'Norsk' },
-		{ code: 'da', name: 'Danish',     native: 'Dansk' },
-		{ code: 'cs', name: 'Czech',      native: 'Čeština' },
-		{ code: 'hu', name: 'Hungarian',  native: 'Magyar' },
-		{ code: 'ro', name: 'Romanian',   native: 'Română' },
-		{ code: 'el', name: 'Greek',      native: 'Ελληνικά' },
-		{ code: 'tr', name: 'Turkish',    native: 'Türkçe' },
-		{ code: 'uk', name: 'Ukrainian',  native: 'Українська' },
-		{ code: 'be', name: 'Belarusian', native: 'Беларуская' },
-		{ code: 'bg', name: 'Bulgarian',  native: 'Български' },
-		{ code: 'sr', name: 'Serbian',    native: 'Српски' },
-		{ code: 'ar', name: 'Arabic',     native: 'العربية', rtl: true },
-		{ code: 'he', name: 'Hebrew',     native: 'עברית',   rtl: true },
-		{ code: 'fa', name: 'Persian',    native: 'فارسی',   rtl: true },
-		{ code: 'zh', name: 'Chinese',    native: '中文' },
-		{ code: 'ja', name: 'Japanese',   native: '日本語' },
-		{ code: 'ko', name: 'Korean',     native: '한국어' },
-		{ code: 'hi', name: 'Hindi',      native: 'हिन्दी' },
-		{ code: 'vi', name: 'Vietnamese', native: 'Tiếng Việt' },
-		{ code: 'th', name: 'Thai',       native: 'ไทย' },
-		{ code: 'id', name: 'Indonesian', native: 'Bahasa Indonesia' },
-	];
+	const CATALOG: LocaleMeta[] = LOCALE_CATALOG;
 
 	// Locales that ship with default notification & command templates.
 	const SHIPPED = new Set(['en', 'ru']);
@@ -76,11 +38,7 @@
 	}
 
 	function meta(code: string): LocaleMeta {
-		return CATALOG.find(l => l.code === code) ?? {
-			code,
-			name: code.toUpperCase(),
-			native: code.toUpperCase(),
-		};
+		return getLocaleMeta(code);
 	}
 
 	function remove(code: string) {
@@ -109,79 +67,48 @@
 
 	// --- Add flow ----------------------------------------------------------
 
-	let addOpen = $state(false);
-	let addQuery = $state('');
-	let addInputEl = $state<HTMLInputElement | null>(null);
-	let highlightIdx = $state(0);
-
 	// Valid BCP 47-ish: 2–3 letter primary, optional '-' subtag(s) 2-8 chars.
 	const CUSTOM_RE = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/i;
 
 	const selectedSet = $derived(new Set(codes));
 
-	const suggestions = $derived.by(() => {
-		const q = addQuery.trim().toLowerCase();
-		const available = CATALOG.filter(l => !selectedSet.has(l.code));
-		if (!q) return available;
-		return available.filter(l =>
-			l.code.includes(q)
-			|| l.name.toLowerCase().includes(q)
-			|| l.native.toLowerCase().includes(q),
-		);
-	});
+	/**
+	 * Catalog languages not yet selected, surfaced through EntitySelect.
+	 * Native name is the label so the user sees their own script; the
+	 * English name + code lives in the description for searchability.
+	 */
+	const addItems = $derived<EntityItem[]>(
+		CATALOG
+			.filter(l => !selectedSet.has(l.code))
+			.map(l => ({
+				value: l.code,
+				label: l.native,
+				desc: `${l.name} · ${l.code.toUpperCase()}`,
+			})),
+	);
 
-	const canAddCustom = $derived.by(() => {
-		const q = addQuery.trim().toLowerCase();
-		if (!q) return false;
-		if (!CUSTOM_RE.test(q)) return false;
-		if (selectedSet.has(q)) return false;
-		// Skip "custom" entry when it matches an existing catalog entry exactly.
-		if (CATALOG.some(l => l.code === q)) return false;
+	let customCode = $state('');
+	const customCodeValid = $derived.by(() => {
+		const c = customCode.trim().toLowerCase();
+		if (!c || !CUSTOM_RE.test(c)) return false;
+		if (selectedSet.has(c)) return false;
+		if (CATALOG.some(l => l.code === c)) return false;
 		return true;
 	});
 
-	function openAdd() {
-		addOpen = true;
-		addQuery = '';
-		highlightIdx = 0;
-		requestAnimationFrame(() => addInputEl?.focus());
-	}
-
-	function closeAdd() {
-		addOpen = false;
-		addQuery = '';
-	}
-
-	function addCode(code: string) {
-		const c = code.trim().toLowerCase();
+	function addCode(code: string | number | null) {
+		if (code === null) return;
+		const c = String(code).trim().toLowerCase();
 		if (!c) return;
 		commit([...codes, c]);
-		addQuery = '';
-		highlightIdx = 0;
-		requestAnimationFrame(() => addInputEl?.focus());
 	}
 
-	function onAddKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') { closeAdd(); return; }
-		const total = suggestions.length + (canAddCustom ? 1 : 0);
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			highlightIdx = Math.min(highlightIdx + 1, Math.max(0, total - 1));
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			highlightIdx = Math.max(highlightIdx - 1, 0);
-		} else if (e.key === 'Enter') {
-			e.preventDefault();
-			if (highlightIdx < suggestions.length) {
-				addCode(suggestions[highlightIdx].code);
-			} else if (canAddCustom) {
-				addCode(addQuery);
-			}
-		}
+	function addCustom() {
+		if (!customCodeValid) return;
+		addCode(customCode);
+		customCode = '';
 	}
 
-	$effect(() => { addQuery; highlightIdx = 0; });
-
 	// --- Drag & drop -------------------------------------------------------
 
 	let dragCode = $state<string | null>(null);
@@ -329,77 +256,39 @@
 		</ul>
 	{/if}
 
-	<!-- Add zone -->
-	<div class="ls-add" class:ls-add-open={addOpen}>
-		{#if !addOpen}
-			<button type="button" class="ls-add-trigger" onclick={openAdd}>
-				<MdiIcon name="mdiPlus" size={14} />
-				<span>{t('locales.add')}</span>
-			</button>
-		{:else}
-			<div class="ls-add-panel">
-				<div class="ls-add-input-row">
-					<MdiIcon name="mdiMagnify" size={14} />
-					<input
-						bind:this={addInputEl}
-						bind:value={addQuery}
-						onkeydown={onAddKeydown}
-						onblur={() => setTimeout(() => { if (addOpen && !addQuery) closeAdd(); }, 150)}
-						placeholder={t('locales.searchPlaceholder')}
-						class="ls-add-input"
-						autocomplete="off"
-						spellcheck="false"
-						type="text"
-					/>
-					<button type="button" class="ls-icon-btn" onclick={closeAdd} aria-label={t('common.cancel')}>
-						<MdiIcon name="mdiClose" size={14} />
-					</button>
-				</div>
-
-				<div class="ls-add-list" role="listbox">
-					{#each suggestions as s, i (s.code)}
-						<button
-							type="button"
-							role="option"
-							aria-selected={i === highlightIdx}
-							class="ls-sugg"
-							class:ls-sugg-hl={i === highlightIdx}
-							onmouseenter={() => highlightIdx = i}
-							onmousedown={(e) => { e.preventDefault(); addCode(s.code); }}
-						>
-							<span class="ls-sugg-native" dir={s.rtl ? 'rtl' : 'ltr'} lang={s.code}>{s.native}</span>
-							<span class="ls-sugg-name">{s.name}</span>
-							<span class="ls-sugg-code">{s.code}</span>
-							{#if SHIPPED.has(s.code)}
-								<span class="ls-sugg-shipped" title={t('locales.shippedHint')}>
-									<MdiIcon name="mdiPackageVariantClosedCheck" size={10} />
-								</span>
-							{/if}
-						</button>
-					{/each}
-
-					{#if canAddCustom}
-						<button
-							type="button"
-							role="option"
-							aria-selected={highlightIdx === suggestions.length}
-							class="ls-sugg ls-sugg-custom"
-							class:ls-sugg-hl={highlightIdx === suggestions.length}
-							onmouseenter={() => highlightIdx = suggestions.length}
-							onmousedown={(e) => { e.preventDefault(); addCode(addQuery); }}
-						>
-							<MdiIcon name="mdiPlusCircleOutline" size={14} />
-							<span class="ls-sugg-custom-label">{t('locales.addCustom')}</span>
-							<span class="ls-sugg-code">{addQuery.trim().toLowerCase()}</span>
-						</button>
-					{/if}
-
-					{#if suggestions.length === 0 && !canAddCustom}
-						<div class="ls-sugg-empty">{t('locales.noSuggestions')}</div>
-					{/if}
-				</div>
+	<!-- Add zone — EntitySelect for catalog languages, separate input for custom BCP-47 codes -->
+	<div class="ls-add">
+		<div class="ls-add-row">
+			<div class="ls-add-picker">
+				<EntitySelect
+					items={addItems}
+					value={null}
+					placeholder={t('locales.add')}
+					size="sm"
+					onselect={addCode}
+				/>
 			</div>
-		{/if}
+			<div class="ls-add-custom">
+				<input
+					type="text"
+					bind:value={customCode}
+					onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustom(); } }}
+					placeholder={t('locales.customPlaceholder')}
+					class="ls-add-custom-input"
+					autocomplete="off"
+					spellcheck="false"
+				/>
+				<button
+					type="button"
+					class="ls-add-custom-btn"
+					disabled={!customCodeValid}
+					onclick={addCustom}
+					title={t('locales.addCustom')}
+				>
+					<MdiIcon name="mdiPlus" size={14} />
+				</button>
+			</div>
+		</div>
 	</div>
 
 	<p class="ls-hint">
@@ -630,125 +519,60 @@
 	.ls-add {
 		margin-top: 0.125rem;
 	}
-	.ls-add-trigger {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.75rem;
-		font-weight: 500;
-		border: 1px dashed var(--color-border);
-		border-radius: 0.375rem;
-		background: transparent;
-		color: var(--color-muted-foreground);
-		cursor: pointer;
-		transition: border-color 0.15s, color 0.15s, background 0.15s;
-	}
-	.ls-add-trigger:hover {
-		border-color: var(--color-primary);
-		border-style: solid;
-		color: var(--color-primary);
-		background: color-mix(in srgb, var(--color-primary) 5%, transparent);
-	}
-
-	.ls-add-panel {
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		background: var(--color-background);
-		overflow: hidden;
-		animation: ls-pop 0.15s ease-out;
-	}
-	@keyframes ls-pop {
-		from { opacity: 0; transform: translateY(-2px); }
-		to   { opacity: 1; transform: translateY(0); }
-	}
-	.ls-add-input-row {
+	.ls-add-row {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.375rem 0.625rem;
-		border-bottom: 1px solid var(--color-border);
-		color: var(--color-muted-foreground);
+		flex-wrap: wrap;
 	}
-	.ls-add-input {
+	.ls-add-picker {
 		flex: 1;
+		min-width: 12rem;
+	}
+	.ls-add-custom {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.15rem 0.15rem 0.15rem 0.55rem;
+		border: 1px dashed var(--color-border);
+		border-radius: 0.5rem;
+		background: transparent;
+	}
+	.ls-add-custom-input {
+		width: 6rem;
 		border: none;
 		outline: none;
 		background: transparent;
-		font-size: 0.8rem;
-		color: var(--color-foreground);
-		padding: 0.125rem 0;
-		min-width: 0;
-	}
-
-	.ls-add-list {
-		max-height: 14rem;
-		overflow-y: auto;
-		scrollbar-width: thin;
-	}
-	.ls-sugg {
-		display: grid;
-		grid-template-columns: 1fr auto auto auto;
-		align-items: center;
-		gap: 0.625rem;
-		width: 100%;
-		padding: 0.375rem 0.625rem;
-		border: none;
-		background: transparent;
-		color: var(--color-foreground);
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.1s;
-	}
-	.ls-sugg.ls-sugg-hl {
-		background: var(--color-muted);
-	}
-	.ls-sugg-native {
-		font-size: 0.9rem;
-		font-weight: 500;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.ls-sugg-name {
-		font-size: 0.7rem;
-		color: var(--color-muted-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		white-space: nowrap;
-	}
-	.ls-sugg-code {
 		font-family: var(--font-mono);
-		font-size: 0.7rem;
-		padding: 0.05rem 0.375rem;
-		border-radius: 0.25rem;
-		background: var(--color-muted);
+		font-size: 0.75rem;
+		color: var(--color-foreground);
+		padding: 0.25rem 0;
+	}
+	.ls-add-custom-input::placeholder {
 		color: var(--color-muted-foreground);
+		opacity: 0.7;
 	}
-	.ls-sugg.ls-sugg-hl .ls-sugg-code {
-		background: color-mix(in srgb, var(--color-primary) 15%, var(--color-muted));
-	}
-	.ls-sugg-shipped {
+	.ls-add-custom-btn {
 		display: inline-flex;
 		align-items: center;
-		color: var(--color-primary);
-		opacity: 0.85;
-	}
-
-	.ls-sugg-custom {
-		border-top: 1px dashed var(--color-border);
-		color: var(--color-primary);
-	}
-	.ls-sugg-custom-label {
-		font-size: 0.75rem;
-		font-weight: 500;
-	}
-
-	.ls-sugg-empty {
-		padding: 0.75rem;
-		font-size: 0.75rem;
-		text-align: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		padding: 0;
+		border: none;
+		background: transparent;
+		border-radius: 0.25rem;
 		color: var(--color-muted-foreground);
+		cursor: pointer;
+		transition: background 0.12s, color 0.12s;
+	}
+	.ls-add-custom-btn:hover:not(:disabled) {
+		background: var(--color-muted);
+		color: var(--color-primary);
+	}
+	.ls-add-custom-btn:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
 	}
 
 	/* ---- Hint --------------------------------------------------------- */

frontend/src/lib/components/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
@@ -11,7 +11,7 @@
 	}>();
 
 	let visible = $state(false);
-	let panelEl: HTMLDivElement;
+	let panelEl = $state<HTMLDivElement | undefined>();
 	let previouslyFocused: HTMLElement | null = null;
 
 	const uniqueId = `modal-${Math.random().toString(36).slice(2, 9)}`;
@@ -74,86 +74,143 @@
 <svelte:window onkeydown={open ? handleKeydown : undefined} />
 
 {#if open}
-	<div
-		class="modal-backdrop"
-		class:visible
-		style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;"
-		onclick={onclose}
-		onkeydown={handleBackdropKeydown}
-		role="presentation"
-	>
+	<div use:portal class="modal-portal-root">
 		<div
-			bind:this={panelEl}
-			class="modal-panel"
+			class="modal-backdrop"
 			class:visible
-			role="dialog"
-			aria-modal="true"
-			aria-labelledby="modal-title-{uniqueId}"
-			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
-			onclick={(e) => e.stopPropagation()}
+			onclick={onclose}
+			onkeydown={handleBackdropKeydown}
+			role="button"
+			tabindex="-1"
+			aria-label={t('common.close')}
 		>
-			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem;">
-				<h3 id="modal-title-{uniqueId}" style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
-				<button class="modal-close" onclick={onclose} aria-label={t('common.close')}>
-					<MdiIcon name="mdiClose" size={18} />
-				</button>
-			</div>
-			<div style="padding: 0 1.5rem 1.5rem; overflow-y: auto;">
-				{@render children()}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				bind:this={panelEl}
+				class="modal-panel"
+				class:visible
+				role="dialog"
+				tabindex="-1"
+				aria-modal="true"
+				aria-labelledby="modal-title-{uniqueId}"
+				onclick={(e) => e.stopPropagation()}
+			>
+				<div class="modal-head">
+					<h3 id="modal-title-{uniqueId}" class="modal-title">{title}</h3>
+					<button class="modal-close" onclick={onclose} aria-label={t('common.close')}>
+						<MdiIcon name="mdiClose" size={18} />
+					</button>
+				</div>
+				<div class="modal-body">
+					{@render children()}
+				</div>
 			</div>
 		</div>
 	</div>
 {/if}
 
 <style>
+	.modal-portal-root {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+	}
+
 	.modal-backdrop {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		background: rgba(0, 0, 0, 0);
 		backdrop-filter: blur(0px);
 		transition: background 0.25s ease, backdrop-filter 0.25s ease;
 	}
 
 	.modal-backdrop.visible {
-		background: rgba(0, 0, 0, 0.5);
-		backdrop-filter: blur(4px);
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(8px) saturate(120%);
+		-webkit-backdrop-filter: blur(8px) saturate(120%);
 	}
 
 	.modal-panel {
+		--modal-solid-bg: #131520;
+		background: var(--modal-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 18px;
+		width: 100%;
+		max-width: 32rem;
+		max-height: 80vh;
+		margin: 1rem;
+		display: flex;
+		flex-direction: column;
 		opacity: 0;
 		transform: translateY(12px) scale(0.97);
 		transition: opacity 0.25s ease, transform 0.25s ease;
 		box-shadow:
-			0 8px 32px rgba(0, 0, 0, 0.12),
-			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+			var(--shadow-card),
+			0 30px 80px -20px rgba(0, 0, 0, 0.6);
+		position: relative;
+		overflow: hidden;
+	}
+	.modal-panel::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
 	}
 
-	:global([data-theme="dark"]) .modal-panel {
-		box-shadow:
-			0 8px 32px rgba(0, 0, 0, 0.4),
-			0 0 48px var(--color-glow),
-			0 0 0 1px rgba(255, 255, 255, 0.03) inset;
-	}
+	:global([data-theme="light"]) .modal-panel { --modal-solid-bg: #fafafe; }
 
 	.modal-panel.visible {
 		opacity: 1;
 		transform: translateY(0) scale(1);
 	}
 
+	.modal-head {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.4rem 1.5rem 1rem;
+	}
+
+	.modal-title {
+		font-family: var(--font-display);
+		font-weight: 400;
+		font-size: 1.4rem;
+		letter-spacing: -0.02em;
+		color: var(--color-foreground);
+		margin: 0;
+	}
+
+	.modal-body {
+		position: relative;
+		z-index: 1;
+		padding: 0 1.5rem 1.5rem;
+		overflow-y: auto;
+	}
+
 	.modal-close {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border-radius: 0.5rem;
-		border: none;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 10px;
+		border: 1px solid transparent;
 		background: transparent;
 		color: var(--color-muted-foreground);
 		cursor: pointer;
-		transition: all 0.2s ease;
+		transition: all 0.15s ease;
 	}
 
 	.modal-close:hover {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
+		border-color: var(--color-border);
 		color: var(--color-foreground);
 	}
 </style>

frontend/src/lib/components/MultiEntitySelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	export interface MultiEntityItem {
 		value: string;
@@ -26,8 +27,8 @@
 	let open = $state(false);
 	let query = $state('');
 	let highlightIdx = $state(0);
-	let inputEl: HTMLInputElement;
-	let listEl: HTMLDivElement;
+	let inputEl = $state<HTMLInputElement | undefined>();
+	let listEl = $state<HTMLDivElement | undefined>();
 
 	const selectedItems = $derived(items.filter(i => (values || []).includes(i.value)));
 
@@ -110,56 +111,58 @@
 	</button>
 </div>
 
-<!-- Palette overlay -->
+<!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
 {#if open}
-	<div class="mes-overlay" onclick={closePalette} role="presentation"></div>
+	<div use:portal class="mes-portal-root">
+		<div class="mes-overlay" onclick={closePalette} role="presentation"></div>
 
-	<div class="mes-container">
-		<div class="mes-search-row">
-			<MdiIcon name="mdiMagnify" size={18} />
-			<input
-				bind:this={inputEl}
-				bind:value={query}
-				placeholder={t('common.search')}
-				class="mes-input"
-				type="text"
-				autocomplete="off"
-				spellcheck="false"
-				onkeydown={handleKeydown}
-			/>
-			<span class="mes-count">{(values || []).length}/{items.length}</span>
-			<kbd class="mes-kbd">ESC</kbd>
-		</div>
+		<div class="mes-container">
+			<div class="mes-search-row">
+				<MdiIcon name="mdiMagnify" size={18} />
+				<input
+					bind:this={inputEl}
+					bind:value={query}
+					placeholder={t('common.search')}
+					class="mes-input"
+					type="text"
+					autocomplete="off"
+					spellcheck="false"
+					onkeydown={handleKeydown}
+				/>
+				<span class="mes-count">{(values || []).length}/{items.length}</span>
+				<kbd class="mes-kbd">ESC</kbd>
+			</div>
 
-		<div class="mes-list" bind:this={listEl} role="listbox">
-			{#if filtered.length === 0}
-				<div class="mes-empty">{t('common.noMatches')}</div>
-			{:else}
-				{#each filtered as item, i}
-					{@const checked = (values || []).includes(item.value)}
-					<button
-						class="mes-item"
-						class:mes-highlight={i === highlightIdx}
-						class:mes-checked={checked}
-						role="option"
-						aria-selected={checked}
-						onclick={() => toggleItem(item)}
-						onmouseenter={() => highlightIdx = i}
-						type="button"
-					>
-						<span class="mes-item-check">
-							<MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} />
-						</span>
-						{#if item.icon}
-							<span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span>
-						{/if}
-						<span class="mes-item-label">{item.label}</span>
-						{#if item.desc}
-							<span class="mes-item-desc">{item.desc}</span>
-						{/if}
-					</button>
-				{/each}
-			{/if}
+			<div class="mes-list" bind:this={listEl} role="listbox">
+				{#if filtered.length === 0}
+					<div class="mes-empty">{t('common.noMatches')}</div>
+				{:else}
+					{#each filtered as item, i}
+						{@const checked = (values || []).includes(item.value)}
+						<button
+							class="mes-item"
+							class:mes-highlight={i === highlightIdx}
+							class:mes-checked={checked}
+							role="option"
+							aria-selected={checked}
+							onclick={() => toggleItem(item)}
+							onmouseenter={() => highlightIdx = i}
+							type="button"
+						>
+							<span class="mes-item-check">
+								<MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} />
+							</span>
+							{#if item.icon}
+								<span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span>
+							{/if}
+							<span class="mes-item-label">{item.label}</span>
+							{#if item.desc}
+								<span class="mes-item-desc">{item.desc}</span>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -233,32 +236,42 @@
 		flex-shrink: 0;
 	}
 
-	/* Overlay */
-	.mes-overlay {
+	/* Portal root */
+	.mes-portal-root {
 		position: fixed;
 		inset: 0;
 		z-index: 9998;
-		background: rgba(0, 0, 0, 0.4);
-		backdrop-filter: blur(2px);
+		pointer-events: none;
+	}
+	.mes-overlay {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(8px) saturate(120%);
+		-webkit-backdrop-filter: blur(8px) saturate(120%);
 	}
 
-	/* Palette container */
+	/* Palette container — solid background for legibility */
 	.mes-container {
-		position: fixed;
+		pointer-events: auto;
+		position: absolute;
 		top: min(20vh, 120px);
 		left: 50%;
 		transform: translateX(-50%);
-		z-index: 9999;
-		width: min(460px, 90vw);
+		z-index: 1;
+		width: min(480px, 92vw);
 		max-height: 60vh;
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.75rem;
-		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+		background: var(--mes-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 16px;
+		box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
+		--mes-solid-bg: #131520;
 	}
+	:global([data-theme="light"]) .mes-container { --mes-solid-bg: #fafafe; }
 
 	.mes-search-row {
 		display: flex;
@@ -319,7 +332,11 @@
 		transition: background 0.1s;
 	}
 	.mes-item:hover, .mes-item.mes-highlight {
-		background: var(--color-muted);
+		background: rgba(255, 255, 255, 0.06);
+	}
+	:global([data-theme="light"]) .mes-item:hover,
+	:global([data-theme="light"]) .mes-item.mes-highlight {
+		background: rgba(20, 15, 60, 0.05);
 	}
 	.mes-item-check {
 		flex-shrink: 0;

frontend/src/lib/components/NavIcon.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * Thin-stroke SVG icon set for navigation surfaces.
+	 *
+	 * Mirrors the visual language of the Aurora design mockups — soft outline
+	 * glyphs at 1.6px stroke. Falls back to MdiIcon for any name we don't
+	 * have a hand-drawn version of, so the existing navEntries config keeps
+	 * working unchanged.
+	 */
+	import MdiIcon from './MdiIcon.svelte';
+
+	interface Props {
+		name: string;
+		size?: number;
+	}
+
+	const { name, size = 18 }: Props = $props();
+</script>
+
+{#if name === 'mdiViewDashboard'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
+{:else if name === 'mdiServer'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+{:else if name === 'mdiBellOutline' || name === 'mdiBell'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
+{:else if name === 'mdiConsoleLine'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>
+{:else if name === 'mdiRobotOutline' || name === 'mdiRobot'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="6" width="16" height="14" rx="3"/><circle cx="9" cy="12" r="1.2"/><circle cx="15" cy="12" r="1.2"/><path d="M8 17c1.5 1 6.5 1 8 0M12 3v3"/></svg>
+{:else if name === 'mdiTarget'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
+{:else if name === 'mdiCogOutline' || name === 'mdiCog'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
+{:else if name === 'mdiRadar'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8"/><path d="M12 4v3M12 17v3M4 12h3M17 12h3"/></svg>
+{:else if name === 'mdiFileDocumentEdit'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M14 2v6h6"/><path d="M18 14l3 3-5 5h-3v-3z"/></svg>
+{:else if name === 'mdiCodeBracesBox'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 8a2 2 0 0 0-2 2v1.5a1 1 0 0 1-1 1 1 1 0 0 1 1 1V15a2 2 0 0 0 2 2M15 8a2 2 0 0 1 2 2v1.5a1 1 0 0 0 1 1 1 1 0 0 0-1 1V15a2 2 0 0 1-2 2"/></svg>
+{:else if name === 'mdiPlayCircleOutline'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M10 9l5 3-5 3z" fill="currentColor"/></svg>
+{:else if name === 'mdiSendCircle' || name === 'mdiSend'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg>
+{:else if name === 'mdiEmailOutline'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>
+{:else if name === 'mdiMatrix'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="3" height="18"/><rect x="18" y="3" width="3" height="18"/><path d="M6 6h2M6 18h2M16 6h2M16 18h2"/></svg>
+{:else if name === 'mdiWebhook'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/><circle cx="12" cy="5" r="3"/><path d="M12 8l-4 7M15 18H9M16 8l4 7"/></svg>
+{:else if name === 'mdiChat'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+{:else if name === 'mdiSlack'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="3" height="9" rx="1.5"/><rect x="14" y="9" width="7" height="3" rx="1.5"/><rect x="12" y="14" width="3" height="7" rx="1.5"/><rect x="3" y="12" width="7" height="3" rx="1.5"/></svg>
+{:else if name === 'mdiBullhorn'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v3a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 8a5 5 0 0 1 0 8M19 5a9 9 0 0 1 0 14"/></svg>
+{:else if name === 'mdiBackupRestore'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/><path d="M12 7v5l3 2"/></svg>
+{:else if name === 'mdiAccountGroup'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2 21a7 7 0 0 1 14 0"/><circle cx="17" cy="6" r="3"/><path d="M22 18a5 5 0 0 0-5-5"/></svg>
+{:else if name === 'mdiChevronRight'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
+{:else if name === 'mdiChevronLeft'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
+{:else if name === 'mdiChevronDown'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+{:else if name === 'mdiMagnify'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+{:else if name === 'mdiLogout'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
+{:else if name === 'mdiKeyVariant'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 13l9-9 2 2-2 2 2 2-3 3-2-2"/></svg>
+{:else if name === 'mdiApi'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7 16V9a2 2 0 1 1 4 0v7M7 13h4M14 9v7M17 9v7"/></svg>
+{:else if name === 'mdiWeatherNight'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+{:else if name === 'mdiWeatherSunny'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>
+{:else if name === 'mdiDesktopTowerMonitor'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="14" height="10" rx="1"/><path d="M9 14v3M6 17h6"/><rect x="18" y="4" width="4" height="16" rx="1"/></svg>
+{:else if name === 'mdiFilterOff'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l18 18M22 3H6l3.4 4.4M14 13v8l-4-2v-4"/></svg>
+{:else if name === 'mdiDotsHorizontal'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><circle cx="6" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="18" cy="12" r="1.6"/></svg>
+{:else if name === 'mdiPulse'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
+{:else if name === 'mdiPlus'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+{:else if name === 'mdiArrowRight'}
+	<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+{:else}
+	<MdiIcon {name} {size} />
+{/if}

frontend/src/lib/components/PageHeader.svelte

@@ -1,21 +1,222 @@
 <script lang="ts">
-	let { title, description = '', children } = $props<{
+	import type { Snippet } from 'svelte';
+
+	export interface HeaderPill {
+		label: string;
+		tone?: 'mint' | 'sky' | 'orchid' | 'coral' | 'citrus' | 'primary';
+		icon?: string;
+	}
+
+	interface Props {
 		title: string;
+		/** Italic-emphasized word(s) appended to the title with a gradient. */
+		emphasis?: string;
+		/** Body text under the title. */
 		description?: string;
-		children?: import('svelte').Snippet;
-	}>();
+		/** Small label above the title (breadcrumb / section). */
+		crumb?: string;
+		/** Right-side count meter — e.g. "12 providers". */
+		count?: number | string;
+		/** Label under the count, e.g. "providers". */
+		countLabel?: string;
+		/** Status pills shown beneath the description. */
+		pills?: HeaderPill[];
+		/** Primary actions (buttons) — rendered top-right next to the meter. */
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		emphasis = '',
+		description = '',
+		crumb = '',
+		count,
+		countLabel = '',
+		pills = [],
+		children,
+	}: Props = $props();
+
+	const toneColors: Record<NonNullable<HeaderPill['tone']>, string> = {
+		mint: 'var(--color-mint)',
+		sky: 'var(--color-sky)',
+		orchid: 'var(--color-orchid)',
+		coral: 'var(--color-coral)',
+		citrus: 'var(--color-citrus)',
+		primary: 'var(--color-primary)',
+	};
 </script>
 
-<div class="flex items-center justify-between mb-8">
-	<div class="animate-fade-slide-in">
-		<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
-		{#if description}
-			<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
-		{/if}
-	</div>
-	{#if children}
-		<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
-			{@render children()}
+<section class="subpage-hero">
+	<div class="subpage-hero__row">
+		<div class="subpage-hero__main">
+			{#if crumb}
+				<div class="subpage-hero__crumb">{crumb}</div>
+			{/if}
+			<h2 class="subpage-hero__title">
+				{title}{#if emphasis}&nbsp;<em>{emphasis}</em>{/if}
+			</h2>
+			{#if description}
+				<p class="subpage-hero__sub">{description}</p>
+			{/if}
+			{#if pills.length > 0}
+				<div class="subpage-hero__pills">
+					{#each pills as p}
+						<span class="subpage-hero__pill">
+							<span class="subpage-hero__pill-dot" style="background: {toneColors[p.tone ?? 'primary']}"></span>
+							{p.label}
+						</span>
+					{/each}
+				</div>
+			{/if}
 		</div>
-	{/if}
-</div>
+
+		<div class="subpage-hero__side">
+			{#if count !== undefined}
+				<div class="subpage-hero__meter">
+					<div class="subpage-hero__meter-value font-mono">{count}</div>
+					{#if countLabel}
+						<div class="subpage-hero__meter-label">{countLabel}</div>
+					{/if}
+				</div>
+			{/if}
+			{#if children}
+				<div class="subpage-hero__actions">{@render children()}</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+<style>
+	.subpage-hero {
+		position: relative;
+		background: var(--color-glass);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
+		border: 1px solid var(--color-border);
+		border-radius: 22px;
+		box-shadow: var(--shadow-card);
+		padding: 1.4rem 1.6rem 1.5rem;
+		margin-bottom: 1.5rem;
+		overflow: hidden;
+	}
+	.subpage-hero::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.subpage-hero__row {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: stretch;
+		justify-content: space-between;
+		gap: 1.5rem;
+		flex-wrap: wrap;
+		min-height: 100%;
+	}
+	.subpage-hero__main { min-width: 0; flex: 1; }
+
+	.subpage-hero__crumb {
+		font-family: var(--font-mono);
+		font-size: 0.62rem;
+		color: var(--color-muted-foreground);
+		letter-spacing: 0.18em;
+		text-transform: uppercase;
+		margin-bottom: 0.55rem;
+		font-weight: 500;
+	}
+	.subpage-hero__title {
+		font-family: var(--font-display);
+		font-weight: 400;
+		font-size: 2.15rem;
+		line-height: 1.05;
+		letter-spacing: -0.025em;
+		color: var(--color-foreground);
+		margin: 0;
+	}
+	.subpage-hero__title em {
+		font-style: italic;
+		background: linear-gradient(135deg, var(--color-orchid), var(--color-primary) 60%, var(--color-sky));
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+	.subpage-hero__sub {
+		font-size: 0.88rem;
+		color: var(--color-muted-foreground);
+		margin: 0.55rem 0 0;
+		line-height: 1.55;
+		max-width: 60ch;
+	}
+	.subpage-hero__pills {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+		margin-top: 0.85rem;
+	}
+	.subpage-hero__pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.22rem 0.65rem;
+		border-radius: 999px;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
+		font-size: 0.7rem;
+		color: var(--color-muted-foreground);
+		font-weight: 500;
+	}
+	.subpage-hero__pill-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.subpage-hero__side {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		flex-shrink: 0;
+	}
+	.subpage-hero__meter {
+		text-align: right;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		justify-content: center;
+	}
+	.subpage-hero__actions {
+		margin-top: auto;
+		padding-top: 0.95rem;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+	}
+	.subpage-hero__meter-value {
+		font-size: 2.15rem;
+		font-weight: 500;
+		color: var(--color-foreground);
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		letter-spacing: -0.025em;
+	}
+	.subpage-hero__meter-label {
+		font-size: 0.62rem;
+		text-transform: uppercase;
+		letter-spacing: 0.16em;
+		color: var(--color-muted-foreground);
+		margin-top: 0.4rem;
+		font-weight: 500;
+	}
+
+	@media (max-width: 640px) {
+		.subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }
+		.subpage-hero__title { font-size: 1.7rem; }
+		.subpage-hero__row { flex-direction: column; align-items: stretch; }
+		.subpage-hero__side { justify-content: space-between; }
+	}
+</style>

frontend/src/lib/components/SearchPalette.svelte

@@ -26,7 +26,9 @@
 	let query = $state('');
 	let activeIndex = $state(0);
 	let loading = $state(false);
-	let inputEl: HTMLInputElement;
+	let inputEl = $state<HTMLInputElement | undefined>();
+	const listboxId = 'sp-listbox';
+	const optionId = (idx: number) => `sp-option-${idx}`;
 
 	// Expose openPalette to parent via callback
 	$effect(() => { onopen?.(openPalette); });
@@ -206,7 +208,7 @@
 
 {#if open}
 	<!-- Backdrop -->
-	<div class="sp-backdrop" onclick={closePalette} role="presentation"></div>
+	<div class="sp-backdrop" onclick={closePalette} onkeydown={(e) => { if (e.key === 'Escape') closePalette(); }} role="button" tabindex="-1" aria-label={t('searchPalette.close')}></div>
 
 	<!-- Palette -->
 	<div class="sp-container">
@@ -218,11 +220,16 @@
 				placeholder={t('searchPalette.placeholder')}
 				class="sp-input"
 				type="text"
+				role="combobox"
+				aria-expanded={flatResults.length > 0}
+				aria-controls={listboxId}
+				aria-activedescendant={flatResults.length > 0 ? optionId(activeIndex) : undefined}
+				aria-autocomplete="list"
 			/>
 			<kbd class="sp-kbd">ESC</kbd>
 		</div>
 
-		<div class="sp-results">
+		<div class="sp-results" id={listboxId} role="listbox">
 			{#if loading}
 				<div class="sp-empty">
 					<div class="w-4 h-4 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
@@ -239,9 +246,12 @@
 						<MdiIcon name={group.icon} size={14} />
 						{group.label}
 					</div>
-					{#each group.items as item, i}
+					{#each group.items as item}
 						{@const flatIdx = flatIndexMap.get(item) ?? -1}
 						<button
+							id={optionId(flatIdx)}
+							role="option"
+							aria-selected={flatIdx === activeIndex}
 							class="sp-item"
 							class:sp-active={flatIdx === activeIndex}
 							onclick={() => navigateTo(item)}
@@ -271,129 +281,175 @@
 		position: fixed;
 		top: 0; left: 0; right: 0; bottom: 0;
 		z-index: 9998;
-		background: rgba(0, 0, 0, 0.5);
-		backdrop-filter: blur(4px);
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(8px) saturate(120%);
+		-webkit-backdrop-filter: blur(8px) saturate(120%);
 	}
 	.sp-container {
 		position: fixed;
-		top: 20vh;
+		top: 18vh;
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 9999;
-		width: min(500px, 90vw);
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.75rem;
-		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+		width: min(640px, 92vw);
+		--sp-solid-bg: #131520;
+		background: var(--sp-solid-bg);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 18px;
+		box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6);
 		overflow: hidden;
 	}
+	:global([data-theme="light"]) .sp-container { --sp-solid-bg: #fafafe; }
+	.sp-container::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
 	.sp-input-row {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem 1rem;
+		gap: 0.65rem;
+		padding: 0.95rem 1.15rem;
 		border-bottom: 1px solid var(--color-border);
 		color: var(--color-muted-foreground);
+		position: relative;
+		z-index: 1;
 	}
 	.sp-input {
 		flex: 1;
 		border: none;
 		outline: none;
 		background: transparent;
-		font-size: 0.9rem;
+		font-size: 0.95rem;
 		color: var(--color-foreground);
+		font-family: var(--font-sans);
+		letter-spacing: -0.005em;
 	}
+	.sp-input::placeholder { color: var(--color-muted-foreground); }
 	.sp-kbd {
-		font-size: 0.6rem;
+		font-size: 0.62rem;
 		font-family: var(--font-mono);
-		padding: 0.15rem 0.35rem;
-		border-radius: 0.25rem;
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
+		padding: 0.2rem 0.45rem;
+		border-radius: 6px;
+		background: var(--color-glass-strong);
+		color: var(--color-foreground);
 		border: 1px solid var(--color-border);
 	}
 	.sp-results {
-		max-height: 50vh;
+		max-height: 52vh;
 		overflow-y: auto;
 		scrollbar-width: thin;
-		padding: 0.25rem;
+		padding: 0.35rem;
+		position: relative;
+		z-index: 1;
 	}
 	.sp-empty {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
-		padding: 2rem;
+		gap: 0.55rem;
+		padding: 2.5rem 2rem;
 		color: var(--color-muted-foreground);
 		font-size: 0.85rem;
 	}
 	.sp-group-header {
 		display: flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.65rem;
+		gap: 0.45rem;
+		padding: 0.6rem 0.85rem 0.35rem;
+		font-size: 0.6rem;
 		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: 0.04em;
+		letter-spacing: 0.16em;
 		color: var(--color-muted-foreground);
 		font-family: var(--font-mono);
-		margin-top: 0.25rem;
+	}
+	.sp-group-header::after {
+		content: '';
+		flex: 1;
+		height: 1px;
+		background: var(--color-border);
+		margin-left: 0.35rem;
 	}
 	.sp-item {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.65rem;
 		width: 100%;
-		padding: 0.5rem 0.75rem;
-		border-radius: 0.375rem;
-		border: none;
+		padding: 0.55rem 0.85rem;
+		border-radius: 10px;
+		border: 1px solid transparent;
 		background: transparent;
 		color: var(--color-foreground);
-		font-size: 0.85rem;
+		font-size: 0.88rem;
 		cursor: pointer;
 		text-align: left;
-		transition: background 0.1s;
+		transition: background 0.12s, border-color 0.12s;
+		font-family: var(--font-sans);
 	}
 	.sp-item:hover, .sp-item.sp-active {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
+		border-color: var(--color-border);
+	}
+	.sp-item.sp-active {
+		background: linear-gradient(135deg,
+			color-mix(in srgb, var(--color-primary) 14%, transparent),
+			color-mix(in srgb, var(--color-orchid) 14%, transparent));
+		border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
+		box-shadow: inset 0 1px 0 var(--color-highlight);
 	}
 	.sp-item-icon {
 		flex-shrink: 0;
 		color: var(--color-muted-foreground);
+		width: 28px; height: 28px;
+		display: grid; place-items: center;
+		border-radius: 8px;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
 	}
 	.sp-item.sp-active .sp-item-icon {
 		color: var(--color-primary);
+		background: var(--color-glass-elev);
 	}
 	.sp-item-name {
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		font-weight: 500;
 	}
 	.sp-item-detail {
 		font-size: 0.7rem;
 		font-family: var(--font-mono);
 		color: var(--color-muted-foreground);
-		padding: 0.1rem 0.35rem;
+		padding: 0.12rem 0.5rem;
 		border-radius: 9999px;
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
 		white-space: nowrap;
 	}
 	.sp-footer {
 		display: flex;
 		gap: 1rem;
-		padding: 0.5rem 1rem;
+		padding: 0.6rem 1.15rem;
 		border-top: 1px solid var(--color-border);
 		font-size: 0.65rem;
 		color: var(--color-muted-foreground);
+		position: relative;
+		z-index: 1;
+		background: var(--color-glass-strong);
 	}
 	.sp-footer kbd {
 		font-family: var(--font-mono);
-		padding: 0.05rem 0.25rem;
-		border-radius: 0.2rem;
-		background: var(--color-muted);
+		padding: 0.1rem 0.35rem;
+		border-radius: 5px;
+		background: var(--color-glass);
 		border: 1px solid var(--color-border);
-		font-size: 0.6rem;
+		font-size: 0.62rem;
+		color: var(--color-foreground);
 	}
 </style>

frontend/src/lib/components/Snackbar.svelte

@@ -3,6 +3,7 @@
 	import { getSnacks, removeSnack, type Snack } from '$lib/stores/snackbar.svelte';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	const snacks = $derived(getSnacks());
 
@@ -31,10 +32,7 @@
 </script>
 
 {#if snacks.length > 0}
-	<div
-		style="position: fixed; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; width: 90%; max-width: 26rem; pointer-events: none;"
-		class="snackbar-container"
-	>
+	<div use:portal class="snackbar-container">
 		{#each snacks as snack (snack.id)}
 			<div
 				in:fly={{ y: 40, duration: 300 }}
@@ -66,6 +64,16 @@
 
 <style>
 	.snackbar-container {
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 90%;
+		max-width: 26rem;
+		pointer-events: none;
 		bottom: 5rem;
 	}
 	@media (min-width: 768px) {
@@ -75,20 +83,21 @@
 	}
 
 	.snack-item {
+		--snack-solid-bg: #131520;
 		pointer-events: auto;
 		display: flex;
 		align-items: flex-start;
 		gap: 0.625rem;
-		padding: 0.75rem 1rem;
-		border-radius: 0.75rem;
+		padding: 0.85rem 1rem;
+		border-radius: 14px;
 		border-left: 3px solid var(--snack-accent);
-		background: var(--color-card);
-		border-top: 1px solid var(--color-border);
-		border-right: 1px solid var(--color-border);
-		border-bottom: 1px solid var(--color-border);
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
-		backdrop-filter: blur(12px);
+		background: var(--snack-solid-bg);
+		border-top: 1px solid var(--color-rule-strong);
+		border-right: 1px solid var(--color-rule-strong);
+		border-bottom: 1px solid var(--color-rule-strong);
+		box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
 	}
+	:global([data-theme="light"]) .snack-item { --snack-solid-bg: #fafafe; }
 
 	:global([data-theme="dark"]) .snack-item {
 		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--snack-accent) 10%, transparent);

frontend/src/lib/components/TimezoneSelector.svelte

@@ -2,6 +2,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	let {
 		value = $bindable<string>('UTC'),
@@ -172,18 +173,12 @@
 
 	$effect(() => { query; highlightIdx = 0; });
 
-	// Close on outside click
-	function onDocClick(e: MouseEvent) {
-		if (!open) return;
-		const target = e.target as Node;
-		if (panelEl && !panelEl.contains(target)) closePicker();
-	}
-	onMount(() => {
-		document.addEventListener('mousedown', onDocClick);
-	});
-	onDestroy(() => {
-		document.removeEventListener('mousedown', onDocClick);
-	});
+	/**
+	 * The panel is portalled to <body> to escape Card's overflow:hidden +
+	 * backdrop-filter (which would otherwise clip and stacking-trap the
+	 * dropdown). Outside-click is detected via the dedicated overlay div
+	 * rather than a document listener, so we don't need a global handler.
+	 */
 </script>
 
 <div class="tz-root">
@@ -217,83 +212,87 @@
 	</button>
 
 	{#if open}
-		<div class="tz-panel" bind:this={panelEl} role="listbox">
-			<!-- Search -->
-			<div class="tz-search-row">
-				<MdiIcon name="mdiMagnify" size={14} />
-				<input
-					bind:this={inputEl}
-					bind:value={query}
-					onkeydown={onKeydown}
-					placeholder={t('timezone.searchPlaceholder')}
-					class="tz-search"
-					autocomplete="off"
-					spellcheck="false"
-					type="text"
-				/>
-				<kbd class="tz-kbd">ESC</kbd>
-			</div>
+		<div use:portal class="tz-portal-root">
+			<div class="tz-overlay" onclick={closePicker} role="presentation"></div>
 
-			<!-- Quick picks -->
-			{#if !query}
-				<div class="tz-quick">
-					<button
-						type="button"
-						class="tz-quick-btn"
-						class:tz-quick-active={value === detectedTz}
-						onclick={() => selectTz(detectedTz)}
-					>
-						<MdiIcon name="mdiCrosshairsGps" size={12} />
-						<span class="tz-quick-label">{t('timezone.detect')}</span>
-						<span class="tz-quick-val">{detectedTz}</span>
-					</button>
-					<button
-						type="button"
-						class="tz-quick-btn"
-						class:tz-quick-active={value === 'UTC' || value === 'Etc/UTC'}
-						onclick={() => selectTz('UTC')}
-					>
-						<MdiIcon name="mdiEarth" size={12} />
-						<span class="tz-quick-label">{t('timezone.utc')}</span>
-						<span class="tz-quick-val">UTC+00</span>
-					</button>
+			<div class="tz-panel" bind:this={panelEl} role="listbox">
+				<!-- Search -->
+				<div class="tz-search-row">
+					<MdiIcon name="mdiMagnify" size={14} />
+					<input
+						bind:this={inputEl}
+						bind:value={query}
+						onkeydown={onKeydown}
+						placeholder={t('timezone.searchPlaceholder')}
+						class="tz-search"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+					/>
+					<kbd class="tz-kbd">ESC</kbd>
 				</div>
-			{/if}
 
-			<!-- Grouped list -->
-			<div class="tz-list">
-				{#if filtered.length === 0}
-					<div class="tz-empty">{t('timezone.noMatches')}</div>
-				{:else}
-					{#each groups as g (g.region)}
-						<div class="tz-group">
-							<div class="tz-group-head">
-								<span class="tz-group-name">{g.region}</span>
-								<span class="tz-group-count">{g.items.length}</span>
-							</div>
-							{#each g.items as tz (tz)}
-								{@const parts = splitTz(tz)}
-								{@const idx = flat.indexOf(tz)}
-								{@const hl = idx === highlightIdx}
-								{@const sel = tz === value}
-								<button
-									type="button"
-									role="option"
-									aria-selected={sel}
-									class="tz-opt"
-									class:tz-opt-hl={hl}
-									class:tz-opt-sel={sel}
-									onmouseenter={() => (highlightIdx = idx)}
-									onclick={() => selectTz(tz)}
-								>
-									<span class="tz-opt-city">{parts.city}</span>
-									<span class="tz-opt-iana">{tz}</span>
-									<span class="tz-opt-offset">{fmtOffset(tz)}</span>
-								</button>
-							{/each}
-						</div>
-					{/each}
+				<!-- Quick picks -->
+				{#if !query}
+					<div class="tz-quick">
+						<button
+							type="button"
+							class="tz-quick-btn"
+							class:tz-quick-active={value === detectedTz}
+							onclick={() => selectTz(detectedTz)}
+						>
+							<MdiIcon name="mdiCrosshairsGps" size={12} />
+							<span class="tz-quick-label">{t('timezone.detect')}</span>
+							<span class="tz-quick-val">{detectedTz}</span>
+						</button>
+						<button
+							type="button"
+							class="tz-quick-btn"
+							class:tz-quick-active={value === 'UTC' || value === 'Etc/UTC'}
+							onclick={() => selectTz('UTC')}
+						>
+							<MdiIcon name="mdiEarth" size={12} />
+							<span class="tz-quick-label">{t('timezone.utc')}</span>
+							<span class="tz-quick-val">UTC+00</span>
+						</button>
+					</div>
 				{/if}
+
+				<!-- Grouped list -->
+				<div class="tz-list">
+					{#if filtered.length === 0}
+						<div class="tz-empty">{t('timezone.noMatches')}</div>
+					{:else}
+						{#each groups as g (g.region)}
+							<div class="tz-group">
+								<div class="tz-group-head">
+									<span class="tz-group-name">{g.region}</span>
+									<span class="tz-group-count">{g.items.length}</span>
+								</div>
+								{#each g.items as tz (tz)}
+									{@const parts = splitTz(tz)}
+									{@const idx = flat.indexOf(tz)}
+									{@const hl = idx === highlightIdx}
+									{@const sel = tz === value}
+									<button
+										type="button"
+										role="option"
+										aria-selected={sel}
+										class="tz-opt"
+										class:tz-opt-hl={hl}
+										class:tz-opt-sel={sel}
+										onmouseenter={() => (highlightIdx = idx)}
+										onclick={() => selectTz(tz)}
+									>
+										<span class="tz-opt-city">{parts.city}</span>
+										<span class="tz-opt-iana">{tz}</span>
+										<span class="tz-opt-offset">{fmtOffset(tz)}</span>
+									</button>
+								{/each}
+							</div>
+						{/each}
+					{/if}
+				</div>
 			</div>
 		</div>
 	{/if}
@@ -408,35 +407,66 @@
 		align-items: center;
 	}
 
-	/* ---- Panel -------------------------------------------------------- */
-	.tz-panel {
+	/* ---- Portal + overlay (escapes Card's overflow:hidden / backdrop-filter) ---- */
+	.tz-portal-root {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		pointer-events: none;
+	}
+	.tz-overlay {
 		position: absolute;
-		top: calc(100% + 0.375rem);
-		left: 0;
-		right: 0;
-		z-index: 20;
-		background: var(--color-card, var(--color-background));
-		border: 1px solid var(--color-border);
-		border-radius: 0.625rem;
-		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+		inset: 0;
+		pointer-events: auto;
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(8px) saturate(120%);
+		-webkit-backdrop-filter: blur(8px) saturate(120%);
+	}
+
+	/* ---- Panel (centered modal palette) -------------------------------- */
+	.tz-panel {
+		pointer-events: auto;
+		position: absolute;
+		top: min(20vh, 120px);
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 1;
+		width: min(540px, 92vw);
+		max-height: min(60vh, 30rem);
+		background: var(--tz-solid-bg);
+		border: 1px solid var(--color-rule-strong, var(--color-border));
+		border-radius: 16px;
+		box-shadow: var(--shadow-card, 0 18px 40px rgba(0, 0, 0, 0.35)),
+		            0 24px 48px -16px rgba(0, 0, 0, 0.55);
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
-		max-height: 26rem;
 		animation: tz-pop 0.15s ease-out;
+		--tz-solid-bg: #131520;
+	}
+	:global([data-theme="light"]) .tz-panel { --tz-solid-bg: #fafafe; }
+	.tz-panel::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight, transparent), transparent 30%);
+		opacity: 0.4;
 	}
 	@keyframes tz-pop {
-		from { opacity: 0; transform: translateY(-3px); }
-		to   { opacity: 1; transform: translateY(0); }
+		from { opacity: 0; transform: translate(-50%, -3px); }
+		to   { opacity: 1; transform: translate(-50%, 0); }
 	}
 
 	.tz-search-row {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
+		padding: 0.85rem 1rem;
 		border-bottom: 1px solid var(--color-border);
 		color: var(--color-muted-foreground);
+		position: relative;
+		z-index: 1;
 	}
 	.tz-search {
 		flex: 1;
@@ -464,6 +494,8 @@
 		padding: 0.5rem 0.625rem;
 		border-bottom: 1px solid var(--color-border);
 		flex-wrap: wrap;
+		position: relative;
+		z-index: 1;
 	}
 	.tz-quick-btn {
 		display: inline-flex;
@@ -498,8 +530,13 @@
 
 	.tz-list {
 		overflow-y: auto;
-		padding: 0.25rem 0;
+		/* No top padding — the sticky group head is at top:0 of the
+		   scroll container, so any padding-top would let scrolling
+		   items leak into the gap above the sticky header. */
+		padding: 0 0 0.25rem;
 		scrollbar-width: thin;
+		position: relative;
+		z-index: 1;
 	}
 	.tz-empty {
 		padding: 1rem;
@@ -523,7 +560,7 @@
 		color: var(--color-muted-foreground);
 		position: sticky;
 		top: 0;
-		background: var(--color-card, var(--color-background));
+		background: var(--tz-solid-bg);
 		border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
 		z-index: 1;
 	}

frontend/src/lib/i18n/en.json

@@ -4,6 +4,10 @@
 		"tagline": "Service notifications"
 	},
 	"nav": {
+		"sectionOverview": "Overview",
+		"sectionRouting": "Routing",
+		"sectionOperators": "Operators",
+		"sectionSystem": "System",
 		"dashboard": "Dashboard",
 		"providers": "Providers",
 		"notificationTrackers": "Notif. Trackers",
@@ -103,11 +107,46 @@
 		"last14days": "Last 14 days",
 		"event": "event",
 		"events": "events",
-		"noChartData": "No event data yet"
+		"noChartData": "No event data yet",
+		"live": "Live",
+		"attention": "Attention",
+		"heroPrefix": "Tonight,",
+		"heroEmphasis": "everything",
+		"heroSuffix": "is flowing.",
+		"heroSummary": "{providers} providers listening, {armed} of {total} trackers armed, {throughput} events dispatched across {targets} targets in 24h.",
+		"throughput24h": "throughput · 24h",
+		"eventsShort": "events",
+		"armedShort": "armed",
+		"providersShort": "providers",
+		"targetsShort": "targets",
+		"trackersShort": "trackers",
+		"streamTitle": "Signal",
+		"streamEmphasis": "stream",
+		"eventsLabel": "events",
+		"onWatchTitle": "On",
+		"onWatchEmphasis": "watch",
+		"noProviders": "No providers yet.",
+		"addProvider": "Add provider",
+		"addProviderHint": "Connect a service to start tracking",
+		"pulseTitle": "Pulse",
+		"pulseEmphasis": "· last 14 days",
+		"pulseSub": "Events grouped by day",
+		"wiresTitle": "Active",
+		"wiresEmphasis": "wires",
+		"wiresSub": "routes",
+		"composeTitle": "Pick a source. Choose a channel.",
+		"composeEmphasis": "Compose the wire.",
+		"composeSub": "Walk from provider → tracker → template → target. Or paste a webhook URL and we'll infer the rest.",
+		"viewTrackers": "View trackers",
+		"newTracker": "New tracker",
+		"eventsTotal": "Events"
 	},
 	"providers": {
-		"title": "Providers",
-		"description": "Manage service provider connections",
+		"title": "Service",
+		"titleEmphasis": "providers",
+		"description": "Connect to external services and webhooks. Each provider feeds events into trackers, which dispatch notifications across your channels.",
+		"typeSingular": "type",
+		"typePlural": "types",
 		"addProvider": "Add Provider",
 		"cancel": "Cancel",
 		"type": "Provider Type",
@@ -192,7 +231,10 @@
 		"cleared": "Payload history cleared"
 	},
 	"notificationTracker": {
-		"title": "Notification Trackers",
+		"title": "Notification",
+		"titleEmphasis": "trackers",
+		"armed": "armed",
+		"paused": "paused",
 		"description": "Monitor albums for changes",
 		"newTracker": "New Tracker",
 		"cancel": "Cancel",
@@ -204,6 +246,9 @@
 		"selectAlbums": "Select albums...",
 		"repositories": "Repositories",
 		"selectRepositories": "Select repositories...",
+		"userAllowlist": "Only from users",
+		"userBlocklist": "Exclude users",
+		"selectUsers": "Pick users...",
 		"boards": "Boards",
 		"selectBoards": "Select boards...",
 		"upsDevices": "UPS Devices",
@@ -250,7 +295,8 @@
 		"descending": "Descending",
 		"quietHoursStart": "Quiet hours start",
 		"quietHoursEnd": "Quiet hours end",
-		"batchDuration": "Batch duration (seconds)",
+		"adaptiveMaxSkip": "Adaptive polling cap",
+		"adaptiveMaxSkipPlaceholder": "Off (blank or 0)",
 		"defaultTrackingConfig": "Default tracking config",
 		"defaultTemplateConfig": "Default template config",
 		"linkedTargets": "targets",
@@ -303,6 +349,11 @@
 		"albumDeleted": "Album deleted"
 	},
 	"targets": {
+		"titleEmphasis": "channel",
+		"titleEmphasisAll": "channels",
+		"receiver": "receiver",
+		"receivers": "receivers",
+		"channelsCount": "channels",
 		"title": "Targets",
 		"description": "Notification delivery destinations",
 		"descTelegram": "Telegram chat destinations for notifications",
@@ -371,6 +422,8 @@
 		"receiverDisabled": "Receiver disabled"
 	},
 	"users": {
+		"titleEmphasis": "& access",
+		"countLabel": "users",
 		"title": "Users",
 		"description": "Manage user accounts (admin only)",
 		"addUser": "Add User",
@@ -388,6 +441,8 @@
 		"noUsers": "No users found"
 	},
 	"telegramBot": {
+		"titleEmphasis": "telegram",
+		"countLabel": "bots",
 		"title": "Telegram Bots",
 		"description": "Register and manage Telegram bots",
 		"addBot": "Add Bot",
@@ -464,6 +519,8 @@
 		"webhookFailed": "Failed to register webhook"
 	},
 	"trackingConfig": {
+		"titleEmphasis": "configs",
+		"countLabel": "configs",
 		"title": "Tracking Configs",
 		"description": "Define what events and assets to react to",
 		"newConfig": "New Config",
@@ -569,8 +626,11 @@
 		"nextDay": "next day"
 	},
 	"templateConfig": {
+		"titleEmphasis": "templates",
+		"countLabel": "templates",
 		"title": "Template Configs",
 		"description": "Define how notification messages are formatted",
+		"language": "Language",
 		"providerType": "Service Provider Type",
 		"newConfig": "New Config",
 		"name": "Name",
@@ -688,6 +748,7 @@
 		"album_shared": "Whether album is shared"
 	},
 	"settings": {
+		"titleEmphasis": "options",
 		"title": "Settings",
 		"description": "Global application settings",
 		"general": "General",
@@ -755,7 +816,7 @@
 		"trackingConfig": "Controls which events trigger notifications and how assets are filtered.",
 		"templateConfig": "Controls the message format. Uses default templates if not set.",
 		"scanInterval": "How often to poll the provider for changes, in seconds. Lower = faster detection but more API calls.",
-		"batchDuration": "Time to accumulate changes before dispatching notifications. 0 = send immediately.",
+		"adaptiveMaxSkip": "Reduces polling when the tracker is idle, to save load on the upstream server. Leave blank or set to 0 for snappy notifications — every tick runs at the configured interval. Set to 2 to allow up to 2× slower polling after ~5 min of silence, or 4 for up to 4× slower polling after ~15 min. Activity resets back to the base rate immediately.",
 		"defaultTrackingConfig": "Applied to all linked targets unless overridden per target.",
 		"defaultTemplateConfig": "Applied to all linked targets unless overridden per target.",
 		"defaultCount": "How many results to return when the user doesn't specify a count (1-20).",
@@ -764,6 +825,8 @@
 		"rateLimits": "Cooldown in seconds between uses of each command category per chat. 0 = no limit."
 	},
 	"matrixBot": {
+		"titleEmphasis": "matrix",
+		"countLabel": "bots",
 		"title": "Matrix Bots",
 		"description": "Matrix homeserver connections for room notifications",
 		"addBot": "Add Matrix Bot",
@@ -780,6 +843,8 @@
 		"operationFailed": "Operation failed"
 	},
 	"emailBot": {
+		"titleEmphasis": "email",
+		"countLabel": "accounts",
 		"title": "Email Bots",
 		"description": "SMTP email senders for notifications",
 		"addBot": "Add Email Bot",
@@ -799,6 +864,8 @@
 		"operationFailed": "Operation failed"
 	},
 	"cmdTemplateConfig": {
+		"titleEmphasis": "templates",
+		"countLabel": "templates",
 		"title": "Command Templates",
 		"description": "Customize command response messages with Jinja2 templates",
 		"newConfig": "New Config",
@@ -811,6 +878,8 @@
 		"commandResponsesHint": "Leave a slot empty to use the default hardcoded response."
 	},
 	"commandConfig": {
+		"titleEmphasis": "configs",
+		"countLabel": "configs",
 		"title": "Command Configs",
 		"description": "Define command settings for Telegram bot interactions",
 		"newConfig": "New Config",
@@ -833,6 +902,7 @@
 		"noTemplate": "Default (hardcoded)"
 	},
 	"commandTracker": {
+		"titleEmphasis": "trackers",
 		"title": "Command Trackers",
 		"description": "Manage command trackers and their listeners",
 		"newTracker": "New Tracker",
@@ -874,6 +944,7 @@
 		"empty": "No languages selected. Add one below to start authoring templates.",
 		"add": "Add language",
 		"searchPlaceholder": "Search or type a code (e.g. de-CH)…",
+		"customPlaceholder": "or de-CH",
 		"addCustom": "Add custom code",
 		"noSuggestions": "No matches. Type a valid locale code (2–3 letters).",
 		"primary": "Primary",
@@ -1115,6 +1186,8 @@
 		"close": "close"
 	},
 	"actions": {
+		"titleEmphasis": "automations",
+		"countLabel": "actions",
 		"title": "Actions",
 		"description": "Scheduled mutations on external services",
 		"addAction": "Add Action",
@@ -1172,6 +1245,7 @@
 		"triggerScheduled": "scheduled"
 	},
 	"backup": {
+		"titleEmphasis": "& restore",
 		"title": "Backup & Restore",
 		"description": "Export and import your configuration, or set up automatic backups",
 		"export": "Export Configuration",

frontend/src/lib/i18n/ru.json

@@ -4,6 +4,10 @@
 		"tagline": "Уведомления о сервисах"
 	},
 	"nav": {
+		"sectionOverview": "Обзор",
+		"sectionRouting": "Маршрутизация",
+		"sectionOperators": "Операторы",
+		"sectionSystem": "Система",
 		"dashboard": "Главная",
 		"providers": "Провайдеры",
 		"notificationTrackers": "Трекеры увед.",
@@ -103,11 +107,46 @@
 		"last14days": "Последние 14 дней",
 		"event": "событие",
 		"events": "событий",
-		"noChartData": "Нет данных о событиях"
+		"noChartData": "Нет данных о событиях",
+		"live": "В эфире",
+		"attention": "Внимание",
+		"heroPrefix": "Сегодня",
+		"heroEmphasis": "всё",
+		"heroSuffix": "идёт по плану.",
+		"heroSummary": "{providers} провайдеров на связи, {armed} из {total} трекеров активны, {throughput} событий доставлено в {targets} каналов за сутки.",
+		"throughput24h": "пропускная способность · 24ч",
+		"eventsShort": "событий",
+		"armedShort": "активны",
+		"providersShort": "провайдеров",
+		"targetsShort": "каналов",
+		"trackersShort": "трекеров",
+		"streamTitle": "Поток",
+		"streamEmphasis": "сигналов",
+		"eventsLabel": "событий",
+		"onWatchTitle": "На",
+		"onWatchEmphasis": "слежении",
+		"noProviders": "Пока нет провайдеров.",
+		"addProvider": "Добавить",
+		"addProviderHint": "Подключите сервис, чтобы начать слежение",
+		"pulseTitle": "Пульс",
+		"pulseEmphasis": "· 14 дней",
+		"pulseSub": "События по дням",
+		"wiresTitle": "Активные",
+		"wiresEmphasis": "линии",
+		"wiresSub": "маршрутов",
+		"composeTitle": "Выберите источник, выберите канал.",
+		"composeEmphasis": "Свяжите.",
+		"composeSub": "Проведите путь от провайдера → трекер → шаблон → цель. Или вставьте webhook URL — остальное мы определим сами.",
+		"viewTrackers": "К трекерам",
+		"newTracker": "Новый трекер",
+		"eventsTotal": "Событий"
 	},
 	"providers": {
-		"title": "Провайдеры",
-		"description": "Управление подключениями к сервисам",
+		"title": "Сервисные",
+		"titleEmphasis": "провайдеры",
+		"description": "Подключения к внешним сервисам и вебхукам. Каждый провайдер кормит трекеры событиями, которые рассылаются по вашим каналам.",
+		"typeSingular": "тип",
+		"typePlural": "типов",
 		"addProvider": "Добавить провайдер",
 		"cancel": "Отмена",
 		"type": "Тип провайдера",
@@ -192,6 +231,9 @@
 		"cleared": "История запросов очищена"
 	},
 	"notificationTracker": {
+		"titleEmphasis": "трекеры",
+		"armed": "активны",
+		"paused": "на паузе",
 		"title": "Трекеры уведомлений",
 		"description": "Отслеживание изменений в альбомах",
 		"newTracker": "Новый трекер",
@@ -204,6 +246,9 @@
 		"selectAlbums": "Выберите альбомы...",
 		"repositories": "Репозитории",
 		"selectRepositories": "Выберите репозитории...",
+		"userAllowlist": "Только от пользователей",
+		"userBlocklist": "Исключить пользователей",
+		"selectUsers": "Выберите пользователей...",
 		"boards": "Доски",
 		"selectBoards": "Выберите доски...",
 		"upsDevices": "ИБП устройства",
@@ -250,7 +295,8 @@
 		"descending": "По убыванию",
 		"quietHoursStart": "Тихие часы начало",
 		"quietHoursEnd": "Тихие часы конец",
-		"batchDuration": "Длительность пакета (секунды)",
+		"adaptiveMaxSkip": "Предел адаптивного опроса",
+		"adaptiveMaxSkipPlaceholder": "Выкл. (пусто или 0)",
 		"defaultTrackingConfig": "Конфигурация отслеживания по умолчанию",
 		"defaultTemplateConfig": "Шаблон уведомлений по умолчанию",
 		"linkedTargets": "получатели",
@@ -303,6 +349,11 @@
 		"albumDeleted": "Альбом удалён"
 	},
 	"targets": {
+		"titleEmphasis": "канал",
+		"titleEmphasisAll": "каналы",
+		"receiver": "получатель",
+		"receivers": "получателей",
+		"channelsCount": "каналов",
 		"title": "Получатели",
 		"description": "Адреса доставки уведомлений",
 		"descTelegram": "Чаты Telegram для доставки уведомлений",
@@ -371,6 +422,8 @@
 		"receiverDisabled": "Получатель отключён"
 	},
 	"users": {
+		"titleEmphasis": "и доступ",
+		"countLabel": "пользователей",
 		"title": "Пользователи",
 		"description": "Управление аккаунтами (только админ)",
 		"addUser": "Добавить пользователя",
@@ -388,6 +441,8 @@
 		"noUsers": "Пользователи не найдены"
 	},
 	"telegramBot": {
+		"titleEmphasis": "telegram",
+		"countLabel": "ботов",
 		"title": "Telegram боты",
 		"description": "Регистрация и управление Telegram ботами",
 		"addBot": "Добавить бота",
@@ -464,6 +519,8 @@
 		"webhookFailed": "Не удалось зарегистрировать webhook"
 	},
 	"trackingConfig": {
+		"titleEmphasis": "конфигурации",
+		"countLabel": "конфигураций",
 		"title": "Конфигурации отслеживания",
 		"description": "Определите, на какие события и файлы реагировать",
 		"newConfig": "Новая конфигурация",
@@ -569,8 +626,11 @@
 		"nextDay": "след. день"
 	},
 	"templateConfig": {
+		"titleEmphasis": "шаблоны",
+		"countLabel": "шаблонов",
 		"title": "Конфигурации шаблонов",
 		"description": "Определите формат уведомлений",
+		"language": "Язык",
 		"providerType": "Тип сервис-провайдера",
 		"newConfig": "Новая конфигурация",
 		"name": "Название",
@@ -688,6 +748,7 @@
 		"album_shared": "Общий альбом"
 	},
 	"settings": {
+		"titleEmphasis": "параметры",
 		"title": "Настройки",
 		"description": "Глобальные настройки приложения",
 		"general": "Общие",
@@ -755,7 +816,7 @@
 		"trackingConfig": "Управляет тем, какие события вызывают уведомления и как фильтруются ассеты.",
 		"templateConfig": "Управляет форматом сообщений. Используются шаблоны по умолчанию, если не задано.",
 		"scanInterval": "Как часто опрашивать провайдер на предмет изменений (в секундах). Меньше = быстрее обнаружение, но больше запросов к API.",
-		"batchDuration": "Время накопления изменений перед отправкой уведомлений. 0 = отправлять сразу.",
+		"adaptiveMaxSkip": "Снижает частоту опроса, когда отслеживание простаивает — уменьшает нагрузку на сервер-источник. Оставьте пустым или 0, чтобы уведомления приходили без задержки: каждый тик выполняется с заданным интервалом. Значение 2 позволит замедлять опрос до 2× после ~5 мин простоя, а 4 — до 4× после ~15 мин. Любая активность сразу возвращает базовую частоту.",
 		"defaultTrackingConfig": "Применяется ко всем привязанным получателям, если не переопределено.",
 		"defaultTemplateConfig": "Применяется ко всем привязанным получателям, если не переопределено.",
 		"defaultCount": "Сколько результатов возвращать, если пользователь не указал количество (1-20).",
@@ -764,6 +825,8 @@
 		"rateLimits": "Кулдаун в секундах между использованиями команд в каждом чате. 0 = без ограничений."
 	},
 	"matrixBot": {
+		"titleEmphasis": "matrix",
+		"countLabel": "ботов",
 		"title": "Matrix боты",
 		"description": "Подключения к Matrix серверам для уведомлений в комнаты",
 		"addBot": "Добавить Matrix бот",
@@ -780,6 +843,8 @@
 		"operationFailed": "Операция не удалась"
 	},
 	"emailBot": {
+		"titleEmphasis": "email",
+		"countLabel": "учётных записей",
 		"title": "Email боты",
 		"description": "SMTP отправители для уведомлений по email",
 		"addBot": "Добавить Email бот",
@@ -799,6 +864,8 @@
 		"operationFailed": "Операция не удалась"
 	},
 	"cmdTemplateConfig": {
+		"titleEmphasis": "шаблоны",
+		"countLabel": "шаблонов",
 		"title": "Шаблоны команд",
 		"description": "Настройте ответы команд с помощью Jinja2 шаблонов",
 		"newConfig": "Новый шаблон",
@@ -811,6 +878,8 @@
 		"commandResponsesHint": "Оставьте слот пустым, чтобы использовать ответ по умолчанию."
 	},
 	"commandConfig": {
+		"titleEmphasis": "конфигурации",
+		"countLabel": "конфигураций",
 		"title": "Конфигурации команд",
 		"description": "Настройки команд для взаимодействия с Telegram-ботами",
 		"newConfig": "Новая конфигурация",
@@ -833,6 +902,7 @@
 		"noTemplate": "По умолчанию (встроенный)"
 	},
 	"commandTracker": {
+		"titleEmphasis": "трекеры",
 		"title": "Трекеры команд",
 		"description": "Управление трекерами команд и их слушателями",
 		"newTracker": "Новый трекер",
@@ -874,6 +944,7 @@
 		"empty": "Языки не выбраны. Добавьте язык ниже, чтобы начать редактирование шаблонов.",
 		"add": "Добавить язык",
 		"searchPlaceholder": "Найти или ввести код (например de-CH)…",
+		"customPlaceholder": "или de-CH",
 		"addCustom": "Добавить свой код",
 		"noSuggestions": "Ничего не найдено. Введите код локали (2–3 буквы).",
 		"primary": "Основной",
@@ -1115,6 +1186,8 @@
 		"close": "закрыть"
 	},
 	"actions": {
+		"titleEmphasis": "автоматизации",
+		"countLabel": "действий",
 		"title": "Действия",
 		"description": "Запланированные операции над внешними сервисами",
 		"addAction": "Добавить действие",
@@ -1172,6 +1245,7 @@
 		"triggerScheduled": "по расписанию"
 	},
 	"backup": {
+		"titleEmphasis": "и восстановление",
 		"title": "Резервное копирование",
 		"description": "Экспорт и импорт конфигурации, настройка автоматических бэкапов",
 		"export": "Экспорт конфигурации",

frontend/src/lib/locales.ts

@@ -0,0 +1,55 @@
+/**
+ * Shared locale catalog used by LocaleSelector (settings) and the
+ * template editors (notification & command). Single source of truth so
+ * native names and metadata stay consistent across pickers.
+ */
+
+export interface LocaleMeta {
+	code: string;
+	name: string;       // English name
+	native: string;     // Native script
+	rtl?: boolean;
+}
+
+export const LOCALE_CATALOG: LocaleMeta[] = [
+	{ code: 'en', name: 'English',    native: 'English' },
+	{ code: 'ru', name: 'Russian',    native: 'Русский' },
+	{ code: 'de', name: 'German',     native: 'Deutsch' },
+	{ code: 'fr', name: 'French',     native: 'Français' },
+	{ code: 'es', name: 'Spanish',    native: 'Español' },
+	{ code: 'it', name: 'Italian',    native: 'Italiano' },
+	{ code: 'pt', name: 'Portuguese', native: 'Português' },
+	{ code: 'pl', name: 'Polish',     native: 'Polski' },
+	{ code: 'nl', name: 'Dutch',      native: 'Nederlands' },
+	{ code: 'sv', name: 'Swedish',    native: 'Svenska' },
+	{ code: 'fi', name: 'Finnish',    native: 'Suomi' },
+	{ code: 'no', name: 'Norwegian',  native: 'Norsk' },
+	{ code: 'da', name: 'Danish',     native: 'Dansk' },
+	{ code: 'cs', name: 'Czech',      native: 'Čeština' },
+	{ code: 'hu', name: 'Hungarian',  native: 'Magyar' },
+	{ code: 'ro', name: 'Romanian',   native: 'Română' },
+	{ code: 'el', name: 'Greek',      native: 'Ελληνικά' },
+	{ code: 'tr', name: 'Turkish',    native: 'Türkçe' },
+	{ code: 'uk', name: 'Ukrainian',  native: 'Українська' },
+	{ code: 'be', name: 'Belarusian', native: 'Беларуская' },
+	{ code: 'bg', name: 'Bulgarian',  native: 'Български' },
+	{ code: 'sr', name: 'Serbian',    native: 'Српски' },
+	{ code: 'ar', name: 'Arabic',     native: 'العربية', rtl: true },
+	{ code: 'he', name: 'Hebrew',     native: 'עברית',   rtl: true },
+	{ code: 'fa', name: 'Persian',    native: 'فارسی',   rtl: true },
+	{ code: 'zh', name: 'Chinese',    native: '中文' },
+	{ code: 'ja', name: 'Japanese',   native: '日本語' },
+	{ code: 'ko', name: 'Korean',     native: '한국어' },
+	{ code: 'hi', name: 'Hindi',      native: 'हिन्दी' },
+	{ code: 'vi', name: 'Vietnamese', native: 'Tiếng Việt' },
+	{ code: 'th', name: 'Thai',       native: 'ไทย' },
+	{ code: 'id', name: 'Indonesian', native: 'Bahasa Indonesia' },
+];
+
+export function getLocaleMeta(code: string): LocaleMeta {
+	return LOCALE_CATALOG.find(l => l.code === code) ?? {
+		code,
+		name: code.toUpperCase(),
+		native: code.toUpperCase(),
+	};
+}

frontend/src/lib/portal.ts

@@ -0,0 +1,35 @@
+/**
+ * Svelte action that re-parents a node to document.body (or any selector).
+ *
+ * Use this for popups / dropdowns / tooltips that rely on
+ * `position: fixed` positioning. Any ancestor with `backdrop-filter`,
+ * `transform`, `filter`, `perspective`, `contain: paint`, or
+ * `will-change: transform` becomes the containing block for fixed
+ * descendants — which silently breaks viewport-relative positioning.
+ *
+ * Portalling sidesteps that by detaching the node from the component
+ * tree and appending it to a target outside any such ancestor.
+ *
+ * Usage:
+ *   <div use:portal>...</div>          // → document.body
+ *   <div use:portal={'#root'}>...</div> // → custom selector
+ */
+export type PortalTarget = string | HTMLElement;
+
+export function portal(node: HTMLElement, target: PortalTarget = 'body') {
+	function attach(t: PortalTarget) {
+		const el = typeof t === 'string' ? document.querySelector(t) : t;
+		if (el instanceof HTMLElement) el.appendChild(node);
+	}
+
+	attach(target);
+
+	return {
+		update(newTarget: PortalTarget) {
+			attach(newTarget);
+		},
+		destroy() {
+			node.parentNode?.removeChild(node);
+		},
+	};
+}

frontend/src/lib/providers/gitea.ts

@@ -56,5 +56,20 @@ export const giteaDescriptor: ProviderDescriptor = {
 		desc: () => '',
 	},
 
+	userFilters: [
+		{
+			key: 'senders',
+			label: 'notificationTracker.userAllowlist',
+			placeholder: 'notificationTracker.selectUsers',
+			icon: 'mdiAccountCheck',
+		},
+		{
+			key: 'exclude_senders',
+			label: 'notificationTracker.userBlocklist',
+			placeholder: 'notificationTracker.selectUsers',
+			icon: 'mdiAccountOff',
+		},
+	],
+
 	webhookUrlPattern: '/api/webhooks/gitea/{token}',
 };

frontend/src/lib/providers/immich.ts

@@ -55,7 +55,7 @@ export const immichDescriptor: ProviderDescriptor = {
 	],
 
 	extraTrackingFields: [
-		{ key: 'max_assets_to_show', label: 'trackingConfig.maxAssets', type: 'number', min: 0, max: 50, defaultValue: 5, hint: 'hints.maxAssets' },
+		{ key: 'max_assets_to_show', label: 'trackingConfig.maxAssets', type: 'number', min: 0, max: 50, defaultValue: 10, hint: 'hints.maxAssets' },
 		{ key: 'assets_order_by', label: 'trackingConfig.sortBy', type: 'grid-select', gridItems: 'sortByItems', gridColumns: 2, defaultValue: 'none' },
 		{ key: 'assets_order', label: 'trackingConfig.sortOrder', type: 'grid-select', gridItems: 'sortOrderItems', gridColumns: 2, defaultValue: 'descending' },
 	],

frontend/src/lib/providers/types.ts

@@ -120,6 +120,25 @@ export interface CollectionMeta {
 	desc: (col: any) => string;
 }
 
+// ── User-identity filters (TrackerForm) ──────────────────────────────
+
+/**
+ * Declares a filter that picks user identities from the provider's known
+ * senders. Rendered as a MultiEntitySelect populated from the provider's
+ * `/users` endpoint. The picked values are stored as `string[]` under
+ * `tracker.filters[key]`.
+ */
+export interface UserFilterMeta {
+	/** Filter key inside `tracker.filters` (e.g. "senders", "exclude_senders"). */
+	key: string;
+	/** i18n key for the label rendered above the picker. */
+	label: string;
+	/** i18n key for the picker placeholder. */
+	placeholder: string;
+	/** MDI icon shown on chips and dropdown rows. */
+	icon: string;
+}
+
 // ── Main descriptor ──────────────────────────────────────────────────
 
 export interface ProviderDescriptor {
@@ -153,6 +172,8 @@ export interface ProviderDescriptor {
 	// ── Collections / Trackers ──
 	/** Null means this provider has no collections (e.g. scheduler). */
 	collectionMeta: CollectionMeta | null;
+	/** Sender allowlist / blocklist pickers shown on the tracker form. */
+	userFilters?: UserFilterMeta[];
 	/** Whether this provider is webhook-based (hides scan_interval). */
 	webhookBased?: boolean;
 

frontend/src/lib/stores/topbar-action.svelte.ts

@@ -0,0 +1,35 @@
+/**
+ * Page-scoped primary action for the global topbar CTA.
+ *
+ * Each route declares its own primary action ("Add Provider",
+ * "New Tracker", etc.) by calling `topbarAction.set({...})`
+ * inside its `onMount`, and clears it on teardown. The layout
+ * reads `topbarAction.current` and renders the button.
+ *
+ * Falls back to the default "New tracker" CTA when no action is
+ * registered (set by the layout itself).
+ */
+export interface TopbarAction {
+	/** Visible label, e.g. "Add Provider". */
+	label: string;
+	/** Optional href — renders as <a>. Mutually exclusive with onclick. */
+	href?: string;
+	/** Optional click handler — renders as <button>. */
+	onclick?: () => void;
+	/** Optional MDI/NavIcon name for the leading glyph (default: mdiPlus). */
+	icon?: string;
+}
+
+let action = $state<TopbarAction | null>(null);
+
+export const topbarAction = {
+	get current(): TopbarAction | null {
+		return action;
+	},
+	set(next: TopbarAction | null) {
+		action = next;
+	},
+	clear() {
+		action = null;
+	},
+};

frontend/src/lib/types.ts

@@ -80,7 +80,7 @@ export interface Tracker {
 	provider_id: number;
 	collection_ids: string[];
 	scan_interval: number;
-	batch_duration: number;
+	adaptive_max_skip: number | null;
 	default_tracking_config_id: number | null;
 	default_template_config_id: number | null;
 	enabled: boolean;
@@ -106,6 +106,7 @@ export interface NotificationTarget {
 	name: string;
 	icon: string;
 	config: Record<string, any>;
+	chat_action?: string | null;
 	chat_name?: string;
 	receiver_count: number;
 	receivers: TargetReceiver[];

frontend/src/routes/+layout.svelte

@@ -7,10 +7,10 @@
 	import { cubicOut } from 'svelte/easing';
 	import { api } from '$lib/api';
 	import { getAuth, loadUser, logout } from '$lib/auth.svelte';
-	import { t, getLocale, setLocale, type Locale } from '$lib/i18n';
+	import { t, getLocale, setLocale } from '$lib/i18n';
 	import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
 	import Modal from '$lib/components/Modal.svelte';
-	import MdiIcon from '$lib/components/MdiIcon.svelte';
+	import NavIcon from '$lib/components/NavIcon.svelte';
 	import Snackbar from '$lib/components/Snackbar.svelte';
 	import SearchPalette from '$lib/components/SearchPalette.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
@@ -21,6 +21,7 @@
 		matrixBotsCache, targetsCache,
 	} from '$lib/stores/caches.svelte';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
 	import { providerDefaultIcon } from '$lib/grid-items';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 
@@ -37,6 +38,11 @@
 	let providerFilterValue = $state(globalProviderFilter.id ?? 0);
 	let _syncingFilter = false;
 
+	// Reserve the provider-filter row from first paint until the cache resolves.
+	// Without this, the row appears mid-paint and pushes nav items down on every
+	// hard reload — the most visible "jump" the user reported.
+	let showProviderFilter = $derived(allProviders.length >= 1 || providersCache.fetchedAt === 0);
+
 	// Sync filter value → store
 	$effect(() => {
 		const v = providerFilterValue;
@@ -77,7 +83,24 @@
 		} catch (err: any) { pwdMsg = err.message; pwdSuccess = false; snackError(err.message); }
 	}
 
-	let collapsed = $state(false);
+	// Read persisted UI state synchronously so first paint already matches the
+	// user's last session — otherwise the sidebar visibly snaps from expanded
+	// to collapsed (and groups slide open) right after mount.
+	function readPersistedCollapsed(): boolean {
+		if (typeof localStorage === 'undefined') return false;
+		return localStorage.getItem('sidebar_collapsed') === 'true';
+	}
+	function readPersistedExpandedGroups(): Record<string, boolean> {
+		if (typeof localStorage === 'undefined') return {};
+		try {
+			const saved = localStorage.getItem('nav_expanded');
+			return saved ? JSON.parse(saved) : {};
+		} catch {
+			return {};
+		}
+	}
+
+	let collapsed = $state(readPersistedCollapsed());
 	let isMac = $derived(typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent));
 
 	// Nav counts — computed reactively from caches + global provider filter
@@ -201,8 +224,21 @@
 		: baseNavEntries
 	);
 
+	/**
+	 * Section labels above groups of nav entries — emitted in the template
+	 * before the entry whose key matches a map below. Mirrors the Aurora
+	 * mockup's "Overview / Routing / Operators / System" section rhythm
+	 * without breaking the existing collapsible-group structure.
+	 */
+	const SECTION_BREAKS: Record<string, string> = {
+		'nav.dashboard': 'nav.sectionOverview',
+		'nav.notification': 'nav.sectionRouting',
+		'nav.bots': 'nav.sectionOperators',
+		'nav.settings': 'nav.sectionSystem',
+	};
+
 	// Track which groups are expanded (persisted in localStorage)
-	let expandedGroups = $state<Record<string, boolean>>({});
+	let expandedGroups = $state<Record<string, boolean>>(readPersistedExpandedGroups());
 
 	function toggleGroup(key: string) {
 		expandedGroups = { ...expandedGroups, [key]: !expandedGroups[key] };
@@ -218,13 +254,20 @@
 		});
 	}
 
-	// Mobile: flatten nav for bottom bar (first 4 + "More" button)
-	const mobileNavItems = $derived<NavItem[]>([
-		{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
-		{ href: '/notification-trackers', key: 'nav.notification', icon: 'mdiBellOutline' },
-		{ href: '/command-trackers', key: 'nav.commands', icon: 'mdiConsoleLine' },
-		{ href: '/targets', key: 'nav.targets', icon: 'mdiTarget' },
-	]);
+	// Mobile bottom-nav derives its 4 primary slots from baseNavEntries by key
+	// lookup. Adding a new top-level nav entry doesn't break this list, and
+	// renaming a key fails loudly via the assertion below — keeping desktop
+	// and mobile nav structure in sync without manual duplication.
+	const MOBILE_PRIMARY_KEYS = ['nav.dashboard', 'nav.notification', 'nav.commands', 'nav.targets'] as const;
+	const mobileNavItems = $derived<NavItem[]>(
+		MOBILE_PRIMARY_KEYS.map(key => {
+			const entry = baseNavEntries.find(e => e.key === key);
+			if (!entry) return null;
+			return isGroup(entry)
+				? { href: entry.children[0]?.href ?? '/', key: entry.key, icon: entry.icon }
+				: entry;
+		}).filter((x): x is NavItem => x !== null)
+	);
 
 	// "More" panel mirrors the full desktop sidebar tree so every subnode is
 	// reachable on mobile (previously it was a flat hand-picked list that
@@ -241,13 +284,8 @@
 
 	onMount(async () => {
 		initTheme();
-		if (typeof localStorage !== 'undefined') {
-			collapsed = localStorage.getItem('sidebar_collapsed') === 'true';
-			try {
-				const saved = localStorage.getItem('nav_expanded');
-				if (saved) expandedGroups = JSON.parse(saved);
-			} catch (e) { console.warn('Failed to parse nav_expanded:', e); }
-		}
+		// `collapsed` and `expandedGroups` are now hydrated synchronously in
+		// their $state initializers above to avoid a post-mount layout snap.
 		await loadUser();
 		if (!auth.user && !isAuthPage) {
 			redirecting = true;
@@ -346,36 +384,41 @@
 		</div>
 	</div>
 {:else if auth.user}
-	<div class="flex h-screen">
+	<div class="app-shell">
 		<!-- Sidebar -->
 		<aside
 			class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
-			style="background: var(--color-sidebar); border-right: 1px solid var(--color-border); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);"
 		>
 			<!-- Header -->
-			<div class="flex items-center {collapsed ? 'justify-center p-2.5' : 'justify-between px-5 py-4'}" style="border-bottom: 1px solid var(--color-border);">
+			<div class="sidebar-header flex items-center {collapsed ? 'justify-center p-3' : 'justify-between px-5 py-5'}">
 				{#if !collapsed}
-					<div class="animate-fade-slide-in">
-						<h1 class="text-base font-semibold tracking-tight flex items-center gap-1.5" style="color: var(--color-foreground);">
-							{#if globalProviderFilter.provider}
-								<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
-							{/if}
-							<span><span style="color: var(--color-primary);">Notify</span> Bridge</span>
-						</h1>
-						<p class="text-[0.7rem] text-[var(--color-muted-foreground)] mt-0.5 tracking-wide uppercase">{t('app.tagline')}</p>
+					<div class="animate-fade-slide-in flex items-center gap-3">
+						<div class="brand-orb"></div>
+						<div class="brand-text">
+							<h1 class="brand-name">
+								{#if globalProviderFilter.provider}
+									<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={14} /></span>
+								{/if}
+								Notify Bridge
+							</h1>
+							<p class="brand-version font-mono">v{__APP_VERSION__}</p>
+						</div>
 					</div>
-				{:else if globalProviderFilter.provider}
-					<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
+				{:else}
+					<div class="brand-orb brand-orb--small"></div>
 				{/if}
 				<button onclick={toggleSidebar}
-					class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
-					title={collapsed ? t('common.expand') : t('common.collapse')}>
-					<MdiIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
+					class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
+					title={collapsed ? t('common.expand') : t('common.collapse')}
+					aria-label={collapsed ? t('common.expand') : t('common.collapse')}>
+					<NavIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
 				</button>
 			</div>
 
-			<!-- Global provider filter -->
-			{#if allProviders.length >= 1}
+			<!-- Global provider filter — kept rendered during the initial cache
+			     fetch (fetchedAt === 0) so the row doesn't pop in mid-paint and
+			     push the nav down. Hides only once we confirm zero providers. -->
+			{#if showProviderFilter}
 				<div class="{collapsed ? 'px-2 py-1' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
 					{#if collapsed}
 						<button onclick={() => {
@@ -384,8 +427,9 @@
 							providerFilterValue = ids[(idx + 1) % ids.length];
 						}}
 							class="provider-filter-btn flex items-center justify-center w-full py-1.5 rounded-lg text-sm transition-all duration-200"
-							title={globalProviderFilter.provider?.name || t('common.allProviders')}>
-							<MdiIcon name={globalProviderFilter.provider ? providerDefaultIcon(globalProviderFilter.provider) : 'mdiFilterOff'} size={16} />
+							title={globalProviderFilter.provider?.name || t('common.allProviders')}
+							aria-label={globalProviderFilter.provider?.name || t('common.allProviders')}>
+							<NavIcon name={globalProviderFilter.provider ? providerDefaultIcon(globalProviderFilter.provider) : 'mdiFilterOff'} size={16} />
 						</button>
 					{:else}
 						<IconGridSelect items={providerFilterItems} bind:value={providerFilterValue} columns={Math.min(providerFilterItems.length, 3)} compact />
@@ -393,22 +437,12 @@
 				</div>
 			{/if}
 
-			<!-- Search button -->
-			<div class="{collapsed ? 'px-2 py-1.5' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
-				<button onclick={() => openSearch?.()}
-					class="search-btn flex items-center gap-2 w-full {collapsed ? 'justify-center px-2' : 'px-2.5'} py-1.5 rounded-lg text-sm transition-all duration-200"
-					title={t('searchPalette.placeholder')}>
-					<MdiIcon name="mdiMagnify" size={16} />
-					{#if !collapsed}
-						<span class="flex-1 text-left text-xs">{t('searchPalette.placeholder')}</span>
-						<kbd class="text-[0.6rem] font-mono px-1 py-0.5 rounded" style="background: var(--color-background); border: 1px solid var(--color-border);">{isMac ? '⌘' : 'Ctrl '}K</kbd>
-					{/if}
-				</button>
-			</div>
-
 			<!-- Nav -->
 			<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
 				{#each navEntries as entry}
+					{#if SECTION_BREAKS[entry.key] && !collapsed}
+						<div class="nav-section-label">{t(SECTION_BREAKS[entry.key])}</div>
+					{/if}
 					{#if isGroup(entry)}
 						<!-- Group header -->
 						<button
@@ -419,11 +453,11 @@
 							{#if isGroupActive(entry) && !expandedGroups[entry.key]}
 								<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
 							{/if}
-							<MdiIcon name={entry.icon} size={18} />
+							<NavIcon name={entry.icon} size={18} />
 							{#if !collapsed}
 								<span class="truncate flex-1">{t(entry.key)}</span>
 								<span class="nav-chevron" style="display: inline-flex; transition: transform 0.2s ease; transform: rotate({expandedGroups[entry.key] ? '90deg' : '0deg'});">
-									<MdiIcon name="mdiChevronRight" size={14} />
+									<NavIcon name="mdiChevronRight" size={14} />
 								</span>
 							{/if}
 						</button>
@@ -438,7 +472,7 @@
 										{#if isActive(child.href)}
 											<div class="active-indicator" style="position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
 										{/if}
-										<MdiIcon name={child.icon} size={15} />
+										<NavIcon name={child.icon} size={15} />
 										<span class="truncate flex-1">{t(child.key)}</span>
 										{#if child.countKey && navCounts[child.countKey]}
 											<span class="nav-badge-sm">{navCounts[child.countKey]}</span>
@@ -457,7 +491,7 @@
 							{#if isActive(entry.href)}
 								<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
 							{/if}
-							<MdiIcon name={entry.icon} size={18} />
+							<NavIcon name={entry.icon} size={18} />
 							{#if !collapsed}
 								<span class="truncate flex-1">{t(entry.key)}</span>
 								{#if entry.countKey && navCounts[entry.countKey]}
@@ -470,61 +504,54 @@
 			</nav>
 
 			<!-- Footer -->
-			<div style="border-top: 1px solid var(--color-border);">
-				<!-- Theme & Language -->
-				<div class="flex {collapsed ? 'flex-col items-center gap-1 p-2' : 'gap-1.5 px-4 py-2.5'}">
-					<button onclick={toggleLocale}
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs font-medium transition-all duration-200"
-						title={t('common.language')}>
-						{getLocale().toUpperCase()}
-					</button>
-					<button onclick={cycleTheme}
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
-						title={t('common.theme')}>
-						<MdiIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
-					</button>
-					<a href="/docs" target="_blank" rel="noopener noreferrer"
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
-						title={t('common.apiDocs')}>
-						<MdiIcon name="mdiApi" size={14} />
-					</a>
-				</div>
-
-				<!-- User info -->
-				<div class="p-2.5" style="border-top: 1px solid var(--color-border);">
-					{#if collapsed}
+			<div class="sidebar-foot">
+				{#if collapsed}
+					<div class="flex flex-col items-center gap-1.5 py-3">
+						<a href="/docs" target="_blank" rel="noopener noreferrer"
+							class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
+							title={t('common.apiDocs')}
+							aria-label={t('common.apiDocs')}>
+							<NavIcon name="mdiApi" size={14} />
+						</a>
 						<button onclick={logout}
-							class="sidebar-icon-btn w-full flex justify-center py-2 rounded-lg transition-all duration-200"
-							title={t('nav.logout')}>
-							<MdiIcon name="mdiLogout" size={16} />
+							class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
+							title={t('nav.logout')}
+							aria-label={t('nav.logout')}>
+							<NavIcon name="mdiLogout" size={16} />
 						</button>
-					{:else}
-						<div class="px-1.5">
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-2.5">
-									<div class="w-7 h-7 rounded-full flex items-center justify-center text-[0.7rem] font-semibold"
-										style="background: var(--color-primary); color: var(--color-primary-foreground);">
-										{auth.user.username[0].toUpperCase()}
-									</div>
-									<div>
-										<p class="text-sm font-medium">{auth.user.username}</p>
-										<p class="text-[0.65rem] tracking-wide uppercase" style="color: var(--color-muted-foreground);">{auth.user.role}</p>
-									</div>
-								</div>
-								<button onclick={logout}
-									class="sidebar-icon-btn p-1.5 rounded-lg transition-all duration-200"
-									title={t('nav.logout')}>
-									<MdiIcon name="mdiLogout" size={15} />
-								</button>
+					</div>
+				{:else}
+					<div class="user-card">
+						<div class="user-card__main">
+							<div class="user-avatar">
+								{auth.user.username[0].toUpperCase()}
 							</div>
-							<button onclick={() => showPasswordForm = true}
-								class="change-pwd-link text-[0.7rem] mt-1.5 transition-colors duration-200 flex items-center gap-1">
-								<MdiIcon name="mdiKeyVariant" size={12} />
-								{t('common.changePassword')}
+							<div class="user-card__text min-w-0">
+								<p class="user-card__name truncate">{auth.user.username}</p>
+								<p class="user-card__role">{auth.user.role}</p>
+							</div>
+							<span class="user-card__chip" title={t('dashboard.live')}></span>
+						</div>
+						<div class="user-card__actions">
+							<button onclick={() => showPasswordForm = true} class="user-card__btn"
+								title={t('common.changePassword')}
+								aria-label={t('common.changePassword')}>
+								<NavIcon name="mdiKeyVariant" size={13} />
+								<span>{t('common.changePassword')}</span>
+							</button>
+							<a href="/docs" target="_blank" rel="noopener noreferrer"
+								class="user-card__btn" title={t('common.apiDocs')}
+								aria-label={t('common.apiDocs')}>
+								<NavIcon name="mdiApi" size={13} />
+							</a>
+							<button onclick={logout} class="user-card__btn user-card__btn--danger"
+								title={t('nav.logout')}
+								aria-label={t('nav.logout')}>
+								<NavIcon name="mdiLogout" size={13} />
 							</button>
 						</div>
-					{/if}
-				</div>
+					</div>
+				{/if}
 			</div>
 		</aside>
 
@@ -534,18 +561,18 @@
 				<a href={item.href} aria-label={t(item.key)}
 					class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
 					style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
-					<MdiIcon name={item.icon} size={20} />
+					<NavIcon name={item.icon} size={20} />
 				</a>
 			{/each}
 			<button onclick={() => openSearch?.()} aria-label={t('searchPalette.placeholder')}
 				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
 				style="color: var(--color-muted-foreground);">
-				<MdiIcon name="mdiMagnify" size={20} />
+				<NavIcon name="mdiMagnify" size={20} />
 			</button>
 			<button onclick={() => mobileMoreOpen = !mobileMoreOpen} aria-label={t('nav.more')}
 				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
 				style="color: {mobileMoreOpen ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
-				<MdiIcon name="mdiDotsHorizontal" size={20} />
+				<NavIcon name="mdiDotsHorizontal" size={20} />
 			</button>
 		</nav>
 
@@ -553,7 +580,7 @@
 		{#if mobileMoreOpen}
 			<div class="mobile-more-backdrop" style="position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);"
 				onclick={closeMobileMore} role="presentation"></div>
-			<div class="mobile-more-panel" style="position: fixed; bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 50; background: var(--color-sidebar); border-top: 1px solid var(--color-border); border-radius: 1rem 1rem 0 0; padding: 1rem; max-height: calc(70vh - env(safe-area-inset-bottom, 0px)); overflow-y: auto;"
+			<div class="mobile-more-panel"
 				transition:slide={{ duration: 200, easing: cubicOut }}>
 				{#if allProviders.length >= 1}
 					<div class="mb-3 pb-3" style="border-bottom: 1px solid var(--color-border);">
@@ -566,7 +593,7 @@
 							<div>
 								<div class="flex items-center gap-1.5 px-1 pb-1.5 text-[0.65rem] font-semibold uppercase tracking-wider"
 									style="color: var(--color-muted-foreground);">
-									<MdiIcon name={entry.icon} size={13} />
+									<NavIcon name={entry.icon} size={13} />
 									<span>{t(entry.key)}</span>
 								</div>
 								<div class="grid grid-cols-3 gap-2">
@@ -575,7 +602,7 @@
 											class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200 relative"
 											style="color: {isActive(child.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(child.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
 										>
-											<MdiIcon name={child.icon} size={20} />
+											<NavIcon name={child.icon} size={20} />
 											<span class="text-xs text-center leading-tight">{t(child.key)}</span>
 											{#if child.countKey && navCounts[child.countKey]}
 												<span class="nav-badge-sm" style="position: absolute; top: 0.25rem; right: 0.25rem;">{navCounts[child.countKey]}</span>
@@ -589,7 +616,7 @@
 								class="flex items-center gap-2 p-3 rounded-lg transition-all duration-200 relative"
 								style="color: {isActive(entry.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(entry.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
 							>
-								<MdiIcon name={entry.icon} size={18} />
+								<NavIcon name={entry.icon} size={18} />
 								<span class="text-sm flex-1">{t(entry.key)}</span>
 								{#if entry.countKey && navCounts[entry.countKey]}
 									<span class="nav-badge">{navCounts[entry.countKey]}</span>
@@ -601,7 +628,7 @@
 						<button onclick={() => { closeMobileMore(); logout(); }}
 							class="flex items-center gap-2 p-3 w-full rounded-lg transition-all duration-200"
 							style="color: var(--color-muted-foreground);">
-							<MdiIcon name="mdiLogout" size={18} />
+							<NavIcon name="mdiLogout" size={18} />
 							<span class="text-sm">{t('nav.logout')}</span>
 						</button>
 					</div>
@@ -610,10 +637,30 @@
 		{/if}
 
 		<!-- Main content -->
-		<main class="flex-1 overflow-auto md:pb-0"
+		<main class="main-col flex-1 overflow-auto md:pb-0"
 			style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
+
+			<!-- Always-visible topbar — search + utilities + primary CTA -->
+			<div class="topbar">
+				<div class="topbar-glass">
+					<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
+						<NavIcon name="mdiMagnify" size={16} />
+						<span class="topbar-search__text">{t('searchPalette.placeholder')}</span>
+						<span class="topbar-search__kbd font-mono">{isMac ? '⌘' : 'Ctrl '}K</span>
+					</button>
+					<button type="button" class="topbar-icon-btn" onclick={cycleTheme}
+						title={t('common.theme')} aria-label={t('common.theme')}>
+						<NavIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={16} />
+					</button>
+					<button type="button" class="topbar-icon-btn" onclick={toggleLocale}
+						title={t('common.language')} aria-label={t('common.language')}>
+						<span class="topbar-locale font-mono">{getLocale().toUpperCase()}</span>
+					</button>
+				</div>
+			</div>
+
 			{#key page.url.pathname}
-				<div class="max-w-5xl mx-auto p-4 md:p-8" in:fade={{ duration: 200, delay: 50 }}>
+				<div class="pb-4 md:pb-8" style="padding-top: 12px;" in:fade={{ duration: 200, delay: 50 }}>
 					{@render children()}
 				</div>
 			{/key}
@@ -663,44 +710,103 @@
 <SearchPalette onopen={(fn) => openSearch = fn} />
 
 <style>
-	@media (max-width: 767px) {
-		.mobile-nav { display: flex !important; }
-		.mobile-more-panel a:hover,
-		.mobile-more-panel button:hover {
-			background: var(--color-muted);
-		}
+	/* === AURORA SHELL === */
+	.app-shell {
+		display: flex;
+		min-height: 100vh;
+		padding: 18px;
+		gap: 18px;
 	}
 
-	/* Provider filter chips */
-	.provider-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.2rem 0.4rem;
-		border-radius: 0.375rem;
+	/* === SIDEBAR — frosted glass rail === */
+	.sidebar {
+		background: var(--color-glass);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
 		border: 1px solid var(--color-border);
-		background: transparent;
-		color: var(--color-muted-foreground);
-		cursor: pointer;
-		transition: all 0.15s;
+		border-radius: 22px;
+		box-shadow: var(--shadow-card);
+		position: sticky;
+		top: 18px;
+		height: calc(100vh - 36px);
+		overflow: hidden;
+		transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	.sidebar::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+		z-index: 0;
+	}
+	.sidebar > * { position: relative; z-index: 1; }
+	.sidebar-header {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	/* Brand — snapped to Aurora mockup: bold sans wordmark + mono version */
+	.brand-text { line-height: 1.1; min-width: 0; }
+	.brand-name {
+		font-family: var(--font-sans);
+		font-weight: 600;
+		font-size: 0.95rem;
+		letter-spacing: -0.01em;
+		color: var(--color-foreground);
+		margin: 0;
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
 		white-space: nowrap;
 	}
-	.provider-chip:hover {
-		border-color: var(--color-primary);
-		color: var(--color-primary);
+	.brand-mark__icon {
+		display: inline-flex;
+		align-items: center;
 	}
-	.provider-chip.active {
-		border-color: var(--color-primary);
-		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-		color: var(--color-primary);
+	.brand-version {
+		font-size: 0.65rem;
+		color: var(--color-muted-foreground);
+		margin: 3px 0 0;
+		letter-spacing: 0.02em;
+		font-weight: 500;
 	}
+	.brand-orb {
+		width: 32px; height: 32px;
+		border-radius: 11px;
+		background: conic-gradient(from 220deg, var(--color-primary), var(--color-orchid), var(--color-mint), var(--color-primary));
+		box-shadow: 0 4px 14px var(--color-glow);
+		position: relative;
+		flex-shrink: 0;
+	}
+	.brand-orb::after {
+		content: '';
+		position: absolute; inset: 4px;
+		border-radius: 7px;
+		background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6), transparent 50%);
+	}
+	.brand-orb--small { width: 26px; height: 26px; border-radius: 9px; }
+
+	/* User avatar */
+	.user-avatar {
+		width: 30px; height: 30px;
+		border-radius: 50%;
+		display: grid; place-items: center;
+		background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
+		color: white;
+		font-weight: 600;
+		font-size: 0.78rem;
+		box-shadow: 0 0 0 2px var(--color-glass) inset;
+	}
+
 	.provider-filter-btn {
 		color: var(--color-muted-foreground);
 		background: transparent;
 	}
 	.provider-filter-btn:hover {
-		color: var(--color-primary);
-		background: var(--color-muted);
+		color: var(--color-foreground);
+		background: var(--color-glass-strong);
 	}
 
 	/* Sidebar icon button (toggle, logout) */
@@ -709,88 +815,289 @@
 		background: transparent;
 	}
 	.sidebar-icon-btn:hover {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
 	}
 
-	/* Search button */
-	.search-btn {
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
-		border: 1px solid var(--color-border);
-	}
-	.search-btn:hover {
-		border-color: var(--color-primary);
-		color: var(--color-foreground);
-	}
-
-	/* Nav links (top-level items, group headers, group children) */
+	/* Nav links — soft glass hovers, gradient bar on active.
+	   Snapped from the Aurora dashboard mockup. */
 	.nav-link {
 		color: var(--color-muted-foreground);
 		background: transparent;
-		font-weight: 400;
+		font-weight: 450;
+		border-radius: 12px !important;
+		font-size: 13.5px;
+		letter-spacing: -0.005em;
 	}
 	.nav-link:not(.active):hover {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
 	}
 	.nav-link.active {
-		color: var(--color-primary);
+		color: var(--color-foreground);
 		font-weight: 500;
+		background: var(--color-glass-elev);
+		box-shadow: inset 0 1px 0 var(--color-highlight), 0 4px 18px -8px var(--color-glow);
 	}
 	.nav-link.active-bg {
-		background: var(--color-sidebar-active);
+		background: var(--color-glass-elev);
 	}
 
-	/* Footer pill buttons (locale, theme) */
-	.footer-pill {
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
+	/* Sidebar footer card */
+	.sidebar-foot {
+		padding: 0.85rem 0.85rem 1rem;
 	}
-	.footer-pill:hover {
+	.user-card {
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
+		border-radius: 14px;
+		padding: 0.75rem 0.85rem 0.6rem;
+		box-shadow: inset 0 1px 0 var(--color-highlight);
+	}
+	.user-card__main {
+		display: flex; align-items: center; gap: 0.7rem;
+	}
+	.user-card__text { line-height: 1.15; }
+	.user-card__name {
+		font-size: 0.82rem;
+		font-weight: 500;
 		color: var(--color-foreground);
-		box-shadow: 0 0 8px var(--color-glow);
+		margin: 0;
+	}
+	.user-card__role {
+		font-size: 0.6rem;
+		color: var(--color-muted-foreground);
+		margin: 2px 0 0;
+		text-transform: uppercase;
+		letter-spacing: 0.13em;
+	}
+	.user-card__chip {
+		margin-left: auto;
+		width: 8px; height: 8px;
+		border-radius: 50%;
+		background: var(--color-mint);
+		box-shadow: 0 0 8px var(--color-mint);
+		flex-shrink: 0;
+	}
+	.user-card__actions {
+		display: flex; gap: 0.3rem;
+		margin-top: 0.65rem;
+		padding-top: 0.55rem;
+		border-top: 1px solid var(--color-border);
+	}
+	.user-card__btn {
+		display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
+		padding: 0.35rem 0.55rem;
+		flex: 1;
+		font-size: 0.65rem;
+		color: var(--color-muted-foreground);
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 7px;
+		cursor: pointer;
+		transition: all 0.15s;
+		font-family: inherit;
+		text-decoration: none;
+	}
+	.user-card__btn span {
+		max-width: 90px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.user-card__btn:not(.user-card__btn--danger):not(:has(span)) { flex: 0 0 auto; }
+	.user-card__btn:hover {
+		background: var(--color-glass-elev);
+		color: var(--color-foreground);
+	}
+	.user-card__btn--danger:hover {
+		background: var(--color-error-bg);
+		color: var(--color-error-fg);
 	}
 
-	/* Change password link */
-	.change-pwd-link {
+	/* Section labels above each nav group */
+	.nav-section-label {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+		font-size: 0.6rem;
+		font-weight: 600;
+		letter-spacing: 0.18em;
+		text-transform: uppercase;
 		color: var(--color-muted-foreground);
+		padding: 0.85rem 0.85rem 0.4rem;
+		font-family: var(--font-mono);
 	}
-	.change-pwd-link:hover {
-		color: var(--color-primary);
+	.nav-section-label::after {
+		content: '';
+		flex: 1;
+		height: 1px;
+		background: var(--color-border);
 	}
 
 	/* Primary action button (password form submit) */
 	.primary-btn {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
+		background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
+		color: white;
+		border: 0;
+		box-shadow: 0 6px 20px -8px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
 	}
 	.primary-btn:hover {
-		box-shadow: 0 0 16px var(--color-glow-strong);
+		transform: translateY(-1px);
+		box-shadow: 0 8px 24px -6px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
 	}
 
 	.nav-badge {
 		font-size: 0.6rem;
-		font-weight: 600;
-		padding: 0.1rem 0.4rem;
+		font-weight: 500;
+		padding: 0.12rem 0.45rem;
 		border-radius: 9999px;
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
+		background: var(--color-glass-elev);
+		color: var(--color-foreground);
 		font-family: var(--font-mono);
 		line-height: 1.2;
 		min-width: 1.2rem;
 		text-align: center;
+		border: 1px solid var(--color-border);
+	}
+	.nav-link.active .nav-badge {
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		border-color: transparent;
 	}
 	.nav-badge-sm {
 		font-size: 0.55rem;
-		font-weight: 600;
-		padding: 0.05rem 0.35rem;
+		font-weight: 500;
+		padding: 0.06rem 0.4rem;
 		border-radius: 9999px;
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-muted-foreground);
 		font-family: var(--font-mono);
 		line-height: 1.2;
 		min-width: 1rem;
 		text-align: center;
 	}
+
+	/* === TOPBAR — always-visible search + utility row === */
+	.main-col {
+		display: flex;
+		flex-direction: column;
+	}
+	.topbar {
+		position: sticky;
+		top: 0;
+		z-index: 30;
+		flex-shrink: 0;
+	}
+	.topbar-glass {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.6rem 0.5rem 0.85rem;
+		background: var(--color-glass);
+		backdrop-filter: blur(14px) saturate(150%);
+		-webkit-backdrop-filter: blur(14px) saturate(150%);
+		border: 1px solid var(--color-border);
+		border-radius: 18px;
+		box-shadow: var(--shadow-card);
+		position: relative;
+	}
+	.topbar-glass::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.topbar-search {
+		flex: 1;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.65rem;
+		padding: 0.55rem 0.85rem;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
+		border-radius: 12px;
+		color: var(--color-muted-foreground);
+		font-size: 0.85rem;
+		font-family: inherit;
+		cursor: text;
+		transition: all 0.15s;
+		text-align: left;
+	}
+	.topbar-search:hover {
+		background: var(--color-glass-elev);
+		border-color: var(--color-rule-strong);
+	}
+	.topbar-search__text {
+		flex: 1;
+		text-align: left;
+	}
+	.topbar-search__kbd {
+		font-size: 0.65rem;
+		padding: 2px 7px;
+		border-radius: 6px;
+		background: var(--color-glass);
+		border: 1px solid var(--color-border);
+		color: var(--color-foreground);
+	}
+	.topbar-icon-btn {
+		width: 36px; height: 36px;
+		display: grid; place-items: center;
+		border-radius: 12px;
+		border: 1px solid var(--color-border);
+		background: var(--color-glass-strong);
+		color: var(--color-muted-foreground);
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.topbar-icon-btn:hover {
+		background: var(--color-glass-elev);
+		color: var(--color-foreground);
+	}
+	.topbar-locale {
+		font-size: 0.65rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+	}
+
+	@media (max-width: 720px) {
+		.topbar-search__kbd { display: none; }
+	}
+
+	/* Mobile bottom-nav */
+	@media (max-width: 767px) {
+		.app-shell {
+			padding: 0;
+			gap: 0;
+		}
+		.sidebar {
+			border-radius: 0;
+			border: 0;
+			border-right: 1px solid var(--color-border);
+		}
+		.mobile-nav { display: flex !important; }
+		.mobile-more-panel {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
+			z-index: 50;
+			background: var(--mobile-more-bg, rgba(19, 21, 32, 0.92));
+			backdrop-filter: blur(12px) saturate(150%);
+			-webkit-backdrop-filter: blur(12px) saturate(150%);
+			border-top: 1px solid var(--color-rule-strong);
+			padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 1rem calc(1rem + env(safe-area-inset-left, 0px));
+			overflow-y: auto;
+			overscroll-behavior: contain;
+		}
+		:global([data-theme="light"]) .mobile-more-panel { --mobile-more-bg: rgba(250, 250, 254, 0.92); }
+		.mobile-more-panel a:hover,
+		.mobile-more-panel button:hover {
+			background: var(--color-glass-strong);
+		}
+		.topbar { display: none; }
+	}
 </style>

frontend/src/routes/actions/+page.svelte

@@ -68,6 +68,16 @@
 	})());
 
 	onMount(load);
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'mint' | 'citrus' }> = [];
+		const enabled = actions.filter((a: Action) => a.enabled).length;
+		const disabled = actions.length - enabled;
+		if (enabled > 0) pills.push({ label: `${enabled} ${t('notificationTracker.armed')}`, tone: 'mint' });
+		if (disabled > 0) pills.push({ label: `${disabled} ${t('notificationTracker.paused')}`, tone: 'citrus' });
+		return pills;
+	});
+
 	async function load() {
 		try {
 			await Promise.all([
@@ -171,7 +181,15 @@
 	}
 </script>
 
-<PageHeader title={t('actions.title')} description={t('actions.description')}>
+<PageHeader
+	title={t('actions.title')}
+	emphasis={t('actions.titleEmphasis')}
+	description={t('actions.description')}
+	crumb="Routing · Automation"
+	count={actions.length}
+	countLabel={t('actions.countLabel')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('actions.addAction')}
 	</Button>
@@ -196,14 +214,14 @@
 		{#if error}<ErrorBanner message={error} />{/if}
 		<form onsubmit={save} class="space-y-3">
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('actions.provider')}</label>
+				<div class="block text-sm font-medium mb-1">{t('actions.provider')}</div>
 				<EntitySelect items={providerItems} bind:value={form.provider_id}
 					placeholder={t('actions.selectProvider')} disabled={!!editing} />
 			</div>
 
 			{#if actionTypes.length > 0}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('actions.actionType')}</label>
+				<div class="block text-sm font-medium mb-1">{t('actions.actionType')}</div>
 				{#if !editing}
 					<div class="space-y-1">
 						{#each actionTypes as at}
@@ -233,7 +251,7 @@
 			</div>
 
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('actions.schedule')}</label>
+				<div class="block text-sm font-medium mb-1">{t('actions.schedule')}</div>
 				<div class="flex gap-2 items-center mb-2">
 					<label class="flex items-center gap-1 text-sm">
 						<input type="radio" name="schedule_type" value="interval" bind:group={form.schedule_type} class="accent-[var(--color-primary)]" />

frontend/src/routes/actions/RuleEditor.svelte

@@ -153,8 +153,8 @@
 	{#if showAddForm}
 		<div class="border border-[var(--color-border)] rounded-md p-3 space-y-2 bg-[var(--color-muted)]/30">
 			<div>
-				<label class="block text-xs font-medium mb-1">{t('actions.ruleName')}</label>
-				<input bind:value={newRule.name} placeholder={t('actions.ruleNamePlaceholder')}
+				<label for="rule-name-new" class="block text-xs font-medium mb-1">{t('actions.ruleName')}</label>
+				<input id="rule-name-new" bind:value={newRule.name} placeholder={t('actions.ruleNamePlaceholder')}
 					class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 			</div>
 
@@ -189,8 +189,8 @@
 			{#if expandedRule === rule.id}
 				<div class="mt-2 pt-2 border-t border-[var(--color-border)] space-y-2">
 					<div>
-						<label class="block text-xs font-medium mb-1">{t('actions.ruleName')}</label>
-						<input bind:value={rule.name}
+						<label for="rule-name-{rule.id}" class="block text-xs font-medium mb-1">{t('actions.ruleName')}</label>
+						<input id="rule-name-{rule.id}" bind:value={rule.name}
 							class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 					</div>
 
@@ -219,7 +219,7 @@
 		<!-- Person selector -->
 		{#if personItems.length > 0}
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.persons')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.persons')}</div>
 			<MultiEntitySelect items={personItems}
 				bind:values={ruleConfig.criteria.person_ids}
 				placeholder={t('actions.addPerson')}
@@ -231,7 +231,7 @@
 
 		<!-- Person excludes -->
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.excludePersons')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.excludePersons')}</div>
 			<MultiEntitySelect items={personItems}
 				bind:values={ruleConfig.criteria.exclude_person_ids}
 				placeholder={t('actions.addExcludePerson')}
@@ -244,14 +244,14 @@
 
 		<!-- Smart search query -->
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.searchQuery')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.searchQuery')}</div>
 			<input bind:value={ruleConfig.criteria.query} placeholder={t('actions.searchQueryPlaceholder')}
 				class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 		</div>
 
 		<!-- Asset type -->
 		<div class="flex items-center gap-3">
-			<label class="text-xs font-medium">{t('actions.assetType')}:</label>
+			<span class="text-xs font-medium">{t('actions.assetType')}:</span>
 			{#each ['all', 'image', 'video'] as at}
 				<label class="flex items-center gap-1 text-xs">
 					<input type="radio"
@@ -266,12 +266,12 @@
 		<!-- Date range -->
 		<div class="flex gap-2">
 			<div class="flex-1">
-				<label class="block text-xs font-medium mb-1">{t('actions.dateFrom')}</label>
+				<div class="block text-xs font-medium mb-1">{t('actions.dateFrom')}</div>
 				<input type="date" bind:value={ruleConfig.criteria.date_from}
 					class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 			</div>
 			<div class="flex-1">
-				<label class="block text-xs font-medium mb-1">{t('actions.dateTo')}</label>
+				<div class="block text-xs font-medium mb-1">{t('actions.dateTo')}</div>
 				<input type="date" bind:value={ruleConfig.criteria.date_to}
 					class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 			</div>
@@ -290,7 +290,7 @@
 
 		{#if albumItems.length > 0}
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.selectAlbum')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.selectAlbum')}</div>
 			<MultiEntitySelect items={albumItems}
 				bind:values={ruleConfig.target_album_ids}
 				placeholder={t('actions.selectAlbumPlaceholder')}
@@ -301,7 +301,7 @@
 		</div>
 		{:else}
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.albumId')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.albumId')}</div>
 			<input bind:value={ruleConfig.target_album_id}
 				class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)] font-mono" />
 		</div>
@@ -314,7 +314,7 @@
 
 		{#if ruleConfig.create_album_if_missing}
 		<div>
-			<label class="block text-xs font-medium mb-1">{t('actions.newAlbumName')}</label>
+			<div class="block text-xs font-medium mb-1">{t('actions.newAlbumName')}</div>
 			<input bind:value={ruleConfig.create_album_name}
 				class="w-full px-2 py-1.5 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
 		</div>

frontend/src/routes/bots/EmailBotTab.svelte

@@ -86,7 +86,14 @@
 	}
 </script>
 
-<PageHeader title={t('emailBot.title')} description={t('emailBot.description')}>
+<PageHeader
+	title={t('emailBot.title')}
+	emphasis={t('emailBot.titleEmphasis')}
+	description={t('emailBot.description')}
+	crumb="Operators · Bots"
+	count={emailBots.length}
+	countLabel={t('emailBot.countLabel')}
+>
 	<Button size="sm" onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}>
 		{showEmailForm ? t('common.cancel') : t('emailBot.addBot')}
 	</Button>

frontend/src/routes/bots/MatrixBotTab.svelte

@@ -84,7 +84,14 @@
 	}
 </script>
 
-<PageHeader title={t('matrixBot.title')} description={t('matrixBot.description')}>
+<PageHeader
+	title={t('matrixBot.title')}
+	emphasis={t('matrixBot.titleEmphasis')}
+	description={t('matrixBot.description')}
+	crumb="Operators · Bots"
+	count={matrixBots.length}
+	countLabel={t('matrixBot.countLabel')}
+>
 	<Button size="sm" onclick={() => { showMatrixForm ? (showMatrixForm = false, editingMatrix = null) : openNewMatrix(); }}>
 		{showMatrixForm ? t('common.cancel') : t('matrixBot.addBot')}
 	</Button>

frontend/src/routes/bots/TelegramBotTab.svelte

@@ -285,7 +285,14 @@
 	}
 </script>
 
-<PageHeader title={t('telegramBot.title')} description={t('telegramBot.description')}>
+<PageHeader
+	title={t('telegramBot.title')}
+	emphasis={t('telegramBot.titleEmphasis')}
+	description={t('telegramBot.description')}
+	crumb="Operators · Bots"
+	count={bots.length}
+	countLabel={t('telegramBot.countLabel')}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('telegramBot.addBot')}
 	</Button>

frontend/src/routes/command-configs/+page.svelte

@@ -80,6 +80,14 @@
 	let hasCommands = $derived(providerCommands.length > 0);
 
 	onMount(load);
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'sky' }> = [];
+		const types = new Set(configs.map(c => c.provider_type)).size;
+		if (types > 0) pills.push({ label: `${types} ${types === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
+
 	async function load() {
 		try {
 			await Promise.all([
@@ -102,6 +110,27 @@
 		editing = null;
 		showForm = true;
 	}
+
+	// Re-pick the command-template config when the provider type changes.
+	// The previously-selected id may belong to a different provider type and
+	// would no longer appear in the filtered EntitySelect, leaving it empty.
+	let _prevProviderType = $state('');
+	$effect(() => {
+		if (showForm && form.provider_type && form.provider_type !== _prevProviderType) {
+			_prevProviderType = form.provider_type;
+			if (editing === null) {
+				const currentTpl = cmdTemplateConfigs.find(
+					(c) => c.id === form.command_template_config_id,
+				);
+				if (!currentTpl || currentTpl.provider_type !== form.provider_type) {
+					const first = cmdTemplateConfigs.find(
+						(c) => c.provider_type === form.provider_type,
+					);
+					form.command_template_config_id = first?.id ?? null;
+				}
+			}
+		}
+	});
 	function editConfig(cfg: CommandConfig) {
 		form = {
 			name: cfg.name,
@@ -161,7 +190,15 @@
 	}
 </script>
 
-<PageHeader title={t('commandConfig.title')} description={t('commandConfig.description')}>
+<PageHeader
+	title={t('commandConfig.title')}
+	emphasis={t('commandConfig.titleEmphasis')}
+	description={t('commandConfig.description')}
+	crumb="Routing · Commands"
+	count={configs.length}
+	countLabel={t('commandConfig.countLabel')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('commandConfig.newConfig')}
 	</Button>
@@ -183,7 +220,7 @@
 			</div>
 
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('commandConfig.providerType')}</label>
+				<div class="block text-sm font-medium mb-1">{t('commandConfig.providerType')}</div>
 				{#if !editing}
 					<IconGridSelect items={providerTypeItems()} bind:value={form.provider_type} columns={2} />
 				{:else}
@@ -208,30 +245,30 @@
 			</div>
 
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('commandConfig.responseTemplate')}</label>
+				<div class="block text-sm font-medium mb-1">{t('commandConfig.responseTemplate')}</div>
 				<EntitySelect items={templateItems} bind:value={form.command_template_config_id} placeholder={t('commandConfig.responseTemplate')} />
 			</div>
 
 			<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
 				<div>
-					<label class="block text-xs mb-1">{t('commandConfig.responseMode')}</label>
+					<div class="block text-xs mb-1">{t('commandConfig.responseMode')}</div>
 					<IconGridSelect items={responseModeItems(t)} bind:value={form.response_mode} columns={2} compact />
 				</div>
 				<div>
-					<label class="block text-xs mb-1">{t('commandConfig.defaultCount')}</label>
-					<input type="number" bind:value={form.default_count} min="1" max="20"
+					<label for="cfg-default-count" class="block text-xs mb-1">{t('commandConfig.defaultCount')}</label>
+					<input id="cfg-default-count" type="number" bind:value={form.default_count} min="1" max="20"
 						class="w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]" />
 				</div>
 				<div>
-					<label class="block text-xs mb-1">{t('commandConfig.searchCooldown')}</label>
-					<input type="number" bind:value={form.rate_limits.search} min="0" max="300"
+					<label for="cfg-search-cooldown" class="block text-xs mb-1">{t('commandConfig.searchCooldown')}</label>
+					<input id="cfg-search-cooldown" type="number" bind:value={form.rate_limits.search} min="0" max="300"
 						class="w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]" />
 				</div>
 			</div>
 
 			<div class="w-1/2 sm:w-1/4">
-				<label class="block text-xs mb-1">{t('commandConfig.defaultCooldown')}</label>
-				<input type="number" bind:value={form.rate_limits.default} min="0" max="300"
+				<label for="cfg-default-cooldown" class="block text-xs mb-1">{t('commandConfig.defaultCooldown')}</label>
+				<input id="cfg-default-cooldown" type="number" bind:value={form.rate_limits.default} min="0" max="300"
 					class="w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]" />
 			</div>
 			{:else}

frontend/src/routes/command-template-configs/+page.svelte

@@ -7,6 +7,7 @@
 	import { sanitizePreview } from '$lib/sanitize';
 	import { commandTemplateConfigsCache, supportedLocalesCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
 	import IconPicker from '$lib/components/IconPicker.svelte';
@@ -19,6 +20,8 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import JinjaEditor from '$lib/components/JinjaEditor.svelte';
 	import CollapsibleSlot from '$lib/components/CollapsibleSlot.svelte';
+	import EntitySelect, { type EntityItem } from '$lib/components/EntitySelect.svelte';
+	import { getLocaleMeta } from '$lib/locales';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
@@ -40,6 +43,7 @@
 	}
 
 	let LOCALES = $derived(supportedLocalesCache.items);
+	let primaryLocale = $derived(LOCALES[0] || 'en');
 
 	let allCmdTplConfigs = $state<CmdTemplateConfig[]>([]);
 	let filterText = $state('');
@@ -72,7 +76,18 @@
 	});
 	let varsRef = $state<Record<string, any>>({});
 	let showVarsFor = $state<string | null>(null);
-	let activeLocale = $state<string>('en');
+	let activeLocale = $state<string>('');
+	const localeItems = $derived<EntityItem[]>(LOCALES.map((code, i) => {
+		const m = getLocaleMeta(code);
+		return {
+			value: code,
+			label: m.native,
+			desc: i === 0 ? `${code.toUpperCase()} · ${t('locales.primary')}` : code.toUpperCase(),
+		};
+	}));
+	$effect(() => {
+		if (!activeLocale && LOCALES.length > 0) activeLocale = primaryLocale;
+	});
 	let expandedSlots = $state<Set<string>>(new Set());
 	let slotFilter = $state('');
 	let showPreviewFor = $state<Set<string>>(new Set());
@@ -140,6 +155,13 @@
 
 	onMount(load);
 
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'sky' }> = [];
+		const types = new Set(configs.map(c => c.provider_type)).size;
+		if (types > 0) pills.push({ label: `${types} ${types === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
+
 	async function load() {
 		try {
 			const [cfgs, caps, vars] = await Promise.all([
@@ -207,7 +229,7 @@
 		if (typesWithCmdSlots.length > 0) form.provider_type = typesWithCmdSlots[0];
 		editing = null;
 		showForm = true;
-		activeLocale = 'en';
+		activeLocale = primaryLocale;
 		slotPreview = {};
 		slotErrors = {};
 		expandedSlots = new Set();
@@ -230,7 +252,7 @@
 		};
 		editing = c.id;
 		showForm = true;
-		activeLocale = 'en';
+		activeLocale = primaryLocale;
 		slotPreview = {};
 		slotErrors = {};
 		expandedSlots = new Set();
@@ -324,7 +346,7 @@
 		};
 		editing = null;
 		showForm = true;
-		activeLocale = 'en';
+		activeLocale = primaryLocale;
 		slotPreview = {};
 		slotErrors = {};
 		expandedSlots = new Set();
@@ -355,11 +377,18 @@
 	}
 </script>
 
-<PageHeader title={t('cmdTemplateConfig.title')} description={t('cmdTemplateConfig.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+<PageHeader
+	title={t('cmdTemplateConfig.title')}
+	emphasis={t('cmdTemplateConfig.titleEmphasis')}
+	description={t('cmdTemplateConfig.description')}
+	crumb="Routing · Commands"
+	count={configs.length}
+	countLabel={t('cmdTemplateConfig.countLabel')}
+	pills={headerPills}
+>
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('cmdTemplateConfig.newConfig')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}<Loading />{:else}
@@ -385,7 +414,7 @@
 
 		{#if !editing}
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</label>
+			<div class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</div>
 			<IconGridSelect items={providerTypeItemsFn()} bind:value={form.provider_type} columns={2} />
 		</div>
 		{:else}
@@ -399,15 +428,19 @@
 			<legend class="text-sm font-medium px-1">{t('cmdTemplateConfig.commandResponses')}</legend>
 			<p class="text-xs text-[var(--color-muted-foreground)] mb-2">{t('cmdTemplateConfig.commandResponsesHint')}</p>
 
-			<!-- Locale tabs -->
-			<div class="flex items-center gap-1 mb-3 border-b border-[var(--color-border)]">
-				{#each LOCALES as loc}
-					<button type="button"
-						class="px-3 py-1.5 text-xs font-medium rounded-t-md transition-colors {activeLocale === loc ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]' : 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]'}"
-						onclick={() => { activeLocale = loc; refreshAllPreviews(); }}>
-						{loc.toUpperCase()}
-					</button>
-				{/each}
+			<!-- Language picker -->
+			<div class="flex items-center gap-2 mb-3">
+				<span class="text-xs font-medium text-[var(--color-muted-foreground)] shrink-0">
+					{t('templateConfig.language')}
+				</span>
+				<div class="flex-1 max-w-xs">
+					<EntitySelect
+						items={localeItems}
+						value={activeLocale}
+						size="sm"
+						onselect={(v) => { activeLocale = (v as string) || primaryLocale; refreshAllPreviews(); }}
+					/>
+				</div>
 				{#if form.provider_type}
 					<button type="button" onclick={resetAllToDefaults}
 						title={t('templateConfig.resetAllToDefaults')}
@@ -469,7 +502,7 @@
 
 						{#if slotErrors[slot.name]}
 							{#if slotErrorTypes[slot.name] === 'undefined'}
-								<p class="mt-1 text-xs" style="color: #d97706;">⚠ {t('common.undefinedVar')}: {slotErrors[slot.name]}</p>
+								<p class="mt-1 text-xs" style="color: var(--color-warning-fg);">⚠ {t('common.undefinedVar')}: {slotErrors[slot.name]}</p>
 							{:else}
 								<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.name]}{slotErrorLines[slot.name] ? ` (${t('common.line')} ${slotErrorLines[slot.name]})` : ''}</p>
 							{/if}

frontend/src/routes/command-trackers/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { api } from '$lib/api';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
 	import { t } from '$lib/i18n';
 	import { providersCache, telegramBotsCache, commandConfigsCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
@@ -72,7 +73,24 @@
 		.filter((c: any) => !globalProviderFilter.providerType || c.provider_type === globalProviderFilter.providerType)
 		.map((c: any) => ({ value: c.id, label: c.name, icon: c.icon || 'mdiCog', desc: c.provider_type })));
 
-	onMount(load);
+	onMount(() => {
+		topbarAction.set({
+			label: t('commandTracker.newTracker'),
+			onclick: () => { showForm ? (showForm = false, editing = null) : openNew(); },
+		});
+		load();
+	});
+	onDestroy(() => topbarAction.clear());
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'citrus' }> = [];
+		const armed = trackers.filter((tr: { enabled?: boolean }) => tr.enabled).length;
+		const paused = trackers.length - armed;
+		if (armed > 0) pills.push({ label: `${armed} ${t('notificationTracker.armed')}`, tone: 'mint' });
+		if (paused > 0) pills.push({ label: `${paused} ${t('notificationTracker.paused')}`, tone: 'citrus' });
+		return pills;
+	});
+
 	async function load() {
 		try {
 			[allCmdTrackers] = await Promise.all([
@@ -95,6 +113,26 @@
 		editing = null;
 		showForm = true;
 	}
+
+	// Re-pick the command config when the provider changes. The previously
+	// selected id may belong to a different provider type and would no longer
+	// appear in the filtered EntitySelect, leaving the selector empty.
+	let _prevProviderId = $state(0);
+	$effect(() => {
+		if (showForm && form.provider_id && form.provider_id !== _prevProviderId) {
+			_prevProviderId = form.provider_id;
+			if (editing === null) {
+				const ptype = providers.find(p => p.id === form.provider_id)?.type || '';
+				if (ptype) {
+					const currentCfg = commandConfigs.find(c => c.id === form.command_config_id);
+					if (!currentCfg || currentCfg.provider_type !== ptype) {
+						const first = commandConfigs.find(c => c.provider_type === ptype);
+						form.command_config_id = first?.id ?? 0;
+					}
+				}
+			}
+		}
+	});
 	function editTracker(trk: any) {
 		form = {
 			name: trk.name,
@@ -226,7 +264,15 @@
 	}
 </script>
 
-<PageHeader title={t('commandTracker.title')} description={t('commandTracker.description')}>
+<PageHeader
+	title={t('commandTracker.title')}
+	emphasis={t('commandTracker.titleEmphasis')}
+	description={t('commandTracker.description')}
+	crumb="Routing · Commands"
+	count={trackers.length}
+	countLabel={t('dashboard.trackersShort')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('commandTracker.newTracker')}
 	</Button>
@@ -248,12 +294,12 @@
 			</div>
 
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('commandTracker.provider')}</label>
+				<div class="block text-sm font-medium mb-1">{t('commandTracker.provider')}</div>
 				<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('commandTracker.selectProvider')} />
 			</div>
 
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('commandTracker.commandConfig')}</label>
+				<div class="block text-sm font-medium mb-1">{t('commandTracker.commandConfig')}</div>
 				<EntitySelect items={configItems} bind:value={form.command_config_id} placeholder={t('commandTracker.selectCommandConfig')} />
 			</div>
 

frontend/src/routes/notification-trackers/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { api, parseDate } from '$lib/api';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
 	import { t, getLocale } from '$lib/i18n';
 	import { providersCache, targetsCache, trackingConfigsCache, templateConfigsCache, capabilitiesCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
@@ -45,6 +46,7 @@
 	let trackingConfigs = $derived(trackingConfigsCache.items);
 	let templateConfigs = $derived(templateConfigsCache.items);
 	let collections = $state<Record<string, any>[]>([]);
+	let users = $state<{ id: string; name: string }[]>([]);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
 	let collectionFilter = $state('');
@@ -62,7 +64,8 @@
 	// Tracker form
 	const defaultForm = () => ({
 		name: '', icon: '', provider_id: 0, collection_ids: [] as string[],
-		scan_interval: 60, batch_duration: 0,
+		scan_interval: 60,
+		adaptive_max_skip: null as number | null,
 		default_tracking_config_id: 0, default_template_config_id: 0,
 		filters: {} as Record<string, any>,
 	});
@@ -125,7 +128,25 @@
 		return base;
 	});
 
-	onMount(load);
+	onMount(() => {
+		topbarAction.set({
+			label: t('notificationTracker.newTracker'),
+			onclick: () => { showForm ? (showForm = false, editing = null) : openNew(); },
+		});
+		load();
+	});
+	onDestroy(() => topbarAction.clear());
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'coral' | 'citrus' }> = [];
+		const armed = notificationTrackers.filter(t => t.enabled).length;
+		const paused = notificationTrackers.length - armed;
+		if (armed > 0) pills.push({ label: `${armed} ${t('notificationTracker.armed')}`, tone: 'mint' });
+		if (paused > 0) pills.push({ label: `${paused} ${t('notificationTracker.paused')}`, tone: 'citrus' });
+		const providerCount = new Set(notificationTrackers.map(t => t.provider_id)).size;
+		if (providerCount > 0) pills.push({ label: `${providerCount} ${providerCount === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
 
 	async function load() {
 		loadError = '';
@@ -147,22 +168,38 @@
 		try { collections = await api(`/providers/${form.provider_id}/collections`); } catch (e) { console.warn('Failed to load collections:', e); collections = []; }
 	}
 
+	async function loadUsers() {
+		if (!form.provider_id) { users = []; return; }
+		// Skip the fetch when the descriptor has no user filters — saves a
+		// pointless round-trip for providers like Immich/Scheduler.
+		const desc = getDescriptor(selectedProviderType);
+		if (!desc?.userFilters || desc.userFilters.length === 0) { users = []; return; }
+		try { users = await api(`/providers/${form.provider_id}/users`); }
+		catch (e) { console.warn('Failed to load users:', e); users = []; }
+	}
+
 	let _prevProviderId = $state(0);
 	$effect(() => {
 		if (showForm && form.provider_id && form.provider_id !== _prevProviderId) {
 			_prevProviderId = form.provider_id;
 			loadCollections();
-			// Auto-select first available tracking/template config for this provider when creating
+			loadUsers();
+			// Re-pick tracking/template configs for the new provider type. The
+			// previously-selected ids may belong to a different provider type
+			// and therefore no longer appear in the filtered EntitySelect list,
+			// which would render the selector as empty.
 			if (editing === null) {
 				const ptype = providers.find(p => p.id === form.provider_id)?.type || '';
 				if (ptype) {
-					if (!form.default_tracking_config_id) {
+					const currentTc = trackingConfigs.find(c => c.id === form.default_tracking_config_id);
+					if (!currentTc || currentTc.provider_type !== ptype) {
 						const first = trackingConfigs.find(c => c.provider_type === ptype);
-						if (first) form.default_tracking_config_id = first.id;
+						form.default_tracking_config_id = first?.id ?? 0;
 					}
-					if (!form.default_template_config_id) {
+					const currentTpl = templateConfigs.find(c => c.id === form.default_template_config_id);
+					if (!currentTpl || currentTpl.provider_type !== ptype) {
 						const first = templateConfigs.find(c => c.provider_type === ptype);
-						if (first) form.default_template_config_id = first.id;
+						form.default_template_config_id = first?.id ?? 0;
 					}
 				}
 			}
@@ -173,21 +210,24 @@
 		form = defaultForm();
 		// Auto-select first provider if any
 		if (providers.length > 0) form.provider_id = providers[0].id;
-		editing = null; showForm = true; collections = []; previousCollectionIds = [];
+		editing = null; showForm = true; collections = []; users = []; previousCollectionIds = [];
 	}
 
 	async function edit(trk: Tracker) {
 		form = {
 			name: trk.name, icon: trk.icon || '', provider_id: trk.provider_id,
 			collection_ids: [...(trk.collection_ids || [])],
-			scan_interval: trk.scan_interval, batch_duration: trk.batch_duration ?? 0,
+			scan_interval: trk.scan_interval,
+			adaptive_max_skip: trk.adaptive_max_skip ?? null,
 			default_tracking_config_id: trk.default_tracking_config_id ?? 0,
 			default_template_config_id: trk.default_template_config_id ?? 0,
 			filters: trk.filters || {},
 		};
 		previousCollectionIds = [...(trk.collection_ids || [])];
 		editing = trk.id; showForm = true;
-		if (form.provider_id) await loadCollections();
+		if (form.provider_id) {
+			await Promise.all([loadCollections(), loadUsers()]);
+		}
 	}
 
 	async function save(e: SubmitEvent) {
@@ -223,6 +263,12 @@
 				...form,
 				default_tracking_config_id: form.default_tracking_config_id || null,
 				default_template_config_id: form.default_template_config_id || null,
+				// Empty string, 0, or null all mean "disable adaptive polling".
+				// Coerce to null so the DB column stays NULL rather than 0.
+				adaptive_max_skip:
+					form.adaptive_max_skip && form.adaptive_max_skip > 1
+						? form.adaptive_max_skip
+						: null,
 			};
 			if (editing) {
 				await api(`/notification-trackers/${editing}`, { method: 'PUT', body: JSON.stringify(payload) });
@@ -408,7 +454,15 @@
 	}
 </script>
 
-<PageHeader title={t('notificationTracker.title')} description={t('notificationTracker.description')}>
+<PageHeader
+	title={t('notificationTracker.title')}
+	emphasis={t('notificationTracker.titleEmphasis')}
+	description={t('notificationTracker.description')}
+	crumb="Routing · Notification"
+	count={notificationTrackers.length}
+	countLabel={t('dashboard.trackersShort')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('notificationTracker.cancel') : t('notificationTracker.newTracker')}
 	</Button>
@@ -425,6 +479,7 @@
 		bind:form
 		{providerItems}
 		{collections}
+		{users}
 		bind:collectionFilter
 		trackingConfigItems={trackingConfigs.filter(c => !selectedProviderType || c.provider_type === selectedProviderType).map(c => ({ value: c.id, label: c.name, icon: (c as any).icon || 'mdiCog' }))}
 		templateConfigItems={templateConfigs.filter(c => !selectedProviderType || c.provider_type === selectedProviderType).map(c => ({ value: c.id, label: c.name, icon: (c as any).icon || 'mdiFileDocumentEdit' }))}
@@ -464,6 +519,7 @@
 {:else if !showForm}
 	<div class="space-y-3 stagger-children">
 		{#each notificationTrackers as tracker (tracker.id)}
+			{@const trkDesc = getDescriptor(getProviderType(tracker))}
 			<Card hover entityId={tracker.id}>
 				<div class="flex items-center justify-between">
 					<div>
@@ -476,7 +532,9 @@
 						<CrossLink href="/providers" icon="mdiServer" label={getProviderName(tracker.provider_id)} entityId={tracker.provider_id} />
 						</div>
 						<p class="text-sm text-[var(--color-muted-foreground)]">
-							{(tracker.collection_ids || []).length} {getCollectionLabel(tracker)} · {t('notificationTracker.every')} {tracker.scan_interval}s · {(tracker.tracker_targets || []).length} {t('notificationTracker.linkedTargets')}
+							{(tracker.collection_ids || []).length} {getCollectionLabel(tracker)} ·
+							{#if !trkDesc?.webhookBased}{t('notificationTracker.every')} {tracker.scan_interval}s ·{/if}
+							{(tracker.tracker_targets || []).length} {t('notificationTracker.linkedTargets')}
 						</p>
 					</div>
 					<div class="flex items-center gap-1 flex-wrap justify-end">

frontend/src/routes/notification-trackers/LinkedTargetsSection.svelte

@@ -129,13 +129,13 @@
 					<div class="px-2.5 pb-2.5" in:slide={{ duration: 150 }}>
 						<div class="grid grid-cols-2 gap-2">
 							<div>
-								<label class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t('trackingConfig.title')}</label>
+								<div class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t('trackingConfig.title')}</div>
 								<EntitySelect items={trackingConfigItems} value={tt.tracking_config_id}
 									placeholder={t('common.noneDefault')} size="sm" allowNone noneLabel={t('common.noneDefault')}
 									onselect={(v) => onupdateLink(tt, 'tracking_config_id', Number(v) || null)} />
 							</div>
 							<div>
-								<label class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t('templateConfig.title')}</label>
+								<div class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t('templateConfig.title')}</div>
 								<EntitySelect items={templateConfigItems} value={tt.template_config_id}
 									placeholder={t('common.noneDefault')} size="sm" allowNone noneLabel={t('common.noneDefault')}
 									onselect={(v) => onupdateLink(tt, 'template_config_id', Number(v) || null)} />

frontend/src/routes/notification-trackers/TrackerForm.svelte

@@ -16,13 +16,14 @@
 			provider_id: number;
 			collection_ids: string[];
 			scan_interval: number;
-			batch_duration: number;
+			adaptive_max_skip: number | null;
 			default_tracking_config_id: number;
 			default_template_config_id: number;
 			filters: Record<string, any>;
 		};
 		providerItems: { value: number; label: string; icon: string; desc: string }[];
 		collections: any[];
+		users?: { id: string; name: string }[];
 		collectionFilter?: string;
 		trackingConfigItems?: { value: number; label: string; icon: string }[];
 		templateConfigItems?: { value: number; label: string; icon: string }[];
@@ -40,6 +41,7 @@
 		form = $bindable(),
 		providerItems,
 		collections,
+		users = [],
 		collectionFilter = $bindable(),
 		trackingConfigItems = [],
 		templateConfigItems = [],
@@ -97,12 +99,12 @@
 			</div>
 		</div>
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</label>
+			<div class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</div>
 			<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('notificationTracker.selectServer')} />
 		</div>
 		{#if !isScheduler && colMeta && collections.length > 0}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t(colMeta.label)}</label>
+				<div class="block text-sm font-medium mb-1">{t(colMeta.label)}</div>
 				<MultiEntitySelect
 					items={collections.map(col => ({
 						value: col.id,
@@ -116,6 +118,21 @@
 			</div>
 		{/if}
 
+		{#if descriptor?.userFilters && descriptor.userFilters.length > 0}
+			{@const userItems = users.map(u => ({ value: u.id, label: u.name }))}
+			{#each descriptor.userFilters as uf (uf.key)}
+				<div>
+					<div class="block text-sm font-medium mb-1">{t(uf.label)}</div>
+					<MultiEntitySelect
+						items={userItems.map(i => ({ ...i, icon: uf.icon }))}
+						values={form.filters[uf.key] || []}
+						onchange={(vals) => form.filters = { ...form.filters, [uf.key]: vals }}
+						placeholder={t(uf.placeholder)}
+					/>
+				</div>
+			{/each}
+		{/if}
+
 		{#if isScheduler}
 			<!-- Schedule type -->
 			<fieldset class="border border-[var(--color-border)] rounded-md p-3">
@@ -168,19 +185,19 @@
 					class="text-xs text-[var(--color-primary)] hover:underline mt-1">+ {t('notificationTracker.addVariable')}</button>
 			</fieldset>
 		{:else}
+		{#if !isWebhook}
 		<div class="grid grid-cols-2 gap-3">
-			{#if !isWebhook}
 			<div>
 				<label for="trk-interval" class="block text-sm font-medium mb-1">{t('notificationTracker.scanInterval')}<Hint text={t('hints.scanInterval')} /></label>
 				<input id="trk-interval" type="number" bind:value={form.scan_interval} min="10" max="3600" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 			</div>
-			{/if}
 			<div>
-				<label for="trk-batch" class="block text-sm font-medium mb-1">{t('notificationTracker.batchDuration')}<Hint text={t('hints.batchDuration')} /></label>
-				<input id="trk-batch" type="number" bind:value={form.batch_duration} min="0" max="3600" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				<label for="trk-adaptive" class="block text-sm font-medium mb-1">{t('notificationTracker.adaptiveMaxSkip')}<Hint text={t('hints.adaptiveMaxSkip')} /></label>
+				<input id="trk-adaptive" type="number" bind:value={form.adaptive_max_skip} min="0" max="10" placeholder={t('notificationTracker.adaptiveMaxSkipPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 			</div>
 		</div>
 		{/if}
+		{/if}
 
 		<!-- Default configs -->
 		{#if trackingConfigItems.length > 0 || templateConfigItems.length > 0}
@@ -208,7 +225,10 @@
 			<span style="color: var(--color-primary);"><MdiIcon name="mdiInformationOutline" size={16} /></span>
 			<div class="flex-1 text-xs">
 				<p style="color: var(--color-muted-foreground);">{t('notificationTracker.featureDiscovery')}</p>
-				<a href="/tracking-configs" class="inline-flex items-center gap-1 text-[var(--color-primary)] hover:underline mt-1">
+				<a href={form.default_tracking_config_id
+					? `/tracking-configs?edit=${form.default_tracking_config_id}`
+					: '/tracking-configs'}
+					class="inline-flex items-center gap-1 text-[var(--color-primary)] hover:underline mt-1">
 					<MdiIcon name="mdiArrowRight" size={12} />
 					{t('notificationTracker.openTrackingConfig')}
 				</a>

frontend/src/routes/providers/+page.svelte

@@ -19,6 +19,8 @@
 
 	const gridItemSources: Record<string, () => any[]> = { webhookAuthModeItems };
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
+	import { onDestroy } from 'svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
@@ -54,7 +56,28 @@
 
 	let health = $state<Record<number, boolean | null>>({});
 
-	onMount(load);
+	// Status pill row for the page header — derived from health probes.
+	const headerPills = $derived.by(() => {
+		const onlineCount = Object.values(health).filter(v => v === true).length;
+		const offlineCount = Object.values(health).filter(v => v === false).length;
+		const checkingCount = Math.max(0, providers.length - onlineCount - offlineCount);
+		const typeCount = new Set(providers.map(p => p.type)).size;
+		const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'coral' | 'citrus' }> = [];
+		if (onlineCount > 0) pills.push({ label: `${onlineCount} ${t('providers.online')}`, tone: 'mint' });
+		if (offlineCount > 0) pills.push({ label: `${offlineCount} ${t('providers.offline')}`, tone: 'coral' });
+		if (checkingCount > 0 && providers.length > 0) pills.push({ label: `${checkingCount} ${t('providers.checking')}`, tone: 'citrus' });
+		if (typeCount > 0) pills.push({ label: `${typeCount} ${typeCount === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
+
+	onMount(() => {
+		topbarAction.set({
+			label: t('providers.addProvider'),
+			onclick: () => { showForm ? (showForm = false, editing = null) : openNew(); },
+		});
+		load();
+	});
+	onDestroy(() => topbarAction.clear());
 	async function load() {
 		try {
 			await providersCache.fetch(true);
@@ -146,7 +169,15 @@
 	}
 </script>
 
-<PageHeader title={t('providers.title')} description={t('providers.description')}>
+<PageHeader
+	title={t('providers.title')}
+	emphasis={t('providers.titleEmphasis')}
+	description={t('providers.description')}
+	crumb="Service · Connections"
+	count={providers.length}
+	countLabel={t('dashboard.providersShort')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('providers.cancel') : t('providers.addProvider')}
 	</Button>
@@ -171,7 +202,7 @@
 		<ErrorBanner message={error} />
 		<form onsubmit={save} class="space-y-3">
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('providers.type')}</label>
+				<div class="block text-sm font-medium mb-1">{t('providers.type')}</div>
 				{#if !editing}
 					<IconGridSelect items={providerTypeItems()} bind:value={form.type} columns={2} />
 				{:else}
@@ -216,7 +247,7 @@
 			{/each}
 			{#if descriptor?.webhookUrlPattern && editing}
 			<div class="bg-[var(--color-muted)] rounded-md p-3">
-				<label class="block text-sm font-medium mb-1">{t('providers.webhookUrl')}</label>
+				<div class="block text-sm font-medium mb-1">{t('providers.webhookUrl')}</div>
 				<code class="text-xs select-all break-all">{descriptor.webhookUrlPattern.replace('{token}', providers.find(p => p.id === editing)?.webhook_token ?? '')}</code>
 				<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('providers.webhookUrlHint')}</p>
 			</div>

frontend/src/routes/providers/new/+page.svelte

@@ -78,7 +78,7 @@
 <Card>
 	<div class="space-y-4">
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('providers.type')}</label>
+			<div class="block text-sm font-medium mb-1">{t('providers.type')}</div>
 			<IconGridSelect items={providerTypeItems()} bind:value={form.type} columns={2} />
 		</div>
 		<div>

frontend/src/routes/settings/+page.svelte

@@ -93,7 +93,12 @@
 	}
 </script>
 
-<PageHeader title={t('settings.title')} description={t('settings.description')} />
+<PageHeader
+	title={t('settings.title')}
+	emphasis={t('settings.titleEmphasis')}
+	description={t('settings.description')}
+	crumb="System · Configuration"
+/>
 
 {#if !loaded}
 	<Loading />

frontend/src/routes/settings/backup/+page.svelte

@@ -292,7 +292,12 @@
 	}
 </script>
 
-<PageHeader title={t('backup.title')} description={t('backup.description')} />
+<PageHeader
+	title={t('backup.title')}
+	emphasis={t('backup.titleEmphasis')}
+	description={t('backup.description')}
+	crumb="System · Maintenance"
+/>
 
 {#if !loaded}
 	<Loading />
@@ -338,7 +343,7 @@
 			<!-- Categories -->
 			<div class="mb-4">
 				<div class="flex items-center gap-2 mb-2">
-					<label class="text-xs font-medium">{t('backup.categories')}</label>
+					<span class="text-xs font-medium">{t('backup.categories')}</span>
 					<button class="text-xs underline" style="color: var(--color-primary);" onclick={toggleAll}>
 						{allSelected ? t('backup.deselectAll') : t('backup.selectAll')}
 					</button>
@@ -355,7 +360,7 @@
 
 			<!-- Secrets mode -->
 			<div class="mb-4">
-				<label class="block text-xs font-medium mb-2">{t('backup.secretsMode')}</label>
+				<div class="block text-xs font-medium mb-2">{t('backup.secretsMode')}</div>
 				<div class="flex flex-col gap-1.5">
 					<label class="flex items-center gap-1.5 text-xs">
 						<input type="radio" bind:group={exportSecrets} value="exclude" />
@@ -453,7 +458,7 @@
 
 				<!-- Conflict mode -->
 				<div class="mb-4">
-					<label class="block text-xs font-medium mb-2">{t('backup.conflictMode')}</label>
+					<div class="block text-xs font-medium mb-2">{t('backup.conflictMode')}</div>
 					<div class="flex flex-col gap-1.5">
 						<label class="flex items-center gap-1.5 text-xs">
 							<input type="radio" bind:group={importConflict} value="skip" />
@@ -523,8 +528,8 @@
 				{#if scheduledSettings.backup_scheduled_enabled === 'true'}
 					<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
 						<div>
-							<label class="block text-xs font-medium mb-1">{t('backup.interval')}</label>
-							<select bind:value={scheduledSettings.backup_scheduled_interval_hours}
+							<label for="backup-interval" class="block text-xs font-medium mb-1">{t('backup.interval')}</label>
+							<select id="backup-interval" bind:value={scheduledSettings.backup_scheduled_interval_hours}
 								class="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
 								<option value="6">6 {t('backup.hours')}</option>
 								<option value="12">12 {t('backup.hours')}</option>
@@ -535,8 +540,8 @@
 							</select>
 						</div>
 						<div>
-							<label class="block text-xs font-medium mb-1">{t('backup.secretsMode')}</label>
-							<select bind:value={scheduledSettings.backup_secrets_mode}
+							<label for="backup-secrets-mode" class="block text-xs font-medium mb-1">{t('backup.secretsMode')}</label>
+							<select id="backup-secrets-mode" bind:value={scheduledSettings.backup_secrets_mode}
 								class="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
 								<option value="exclude">{t('backup.secretsExclude')}</option>
 								<option value="masked">{t('backup.secretsMasked')}</option>
@@ -544,8 +549,8 @@
 							</select>
 						</div>
 						<div>
-							<label class="block text-xs font-medium mb-1">{t('backup.retention')}</label>
-							<select bind:value={scheduledSettings.backup_retention_count}
+							<label for="backup-retention" class="block text-xs font-medium mb-1">{t('backup.retention')}</label>
+							<select id="backup-retention" bind:value={scheduledSettings.backup_retention_count}
 								class="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
 								<option value="3">3</option>
 								<option value="5">5</option>
@@ -651,6 +656,7 @@
 		onclick={() => postRestoreModalOpen = false}
 		onkeydown={(e) => { if (e.key === 'Escape') postRestoreModalOpen = false; }}
 		role="presentation">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div role="dialog" aria-modal="true" aria-labelledby="post-restore-title" tabindex="-1"
 			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.4);"
 			onclick={(e) => e.stopPropagation()}>

frontend/src/routes/targets/+page.svelte

@@ -6,6 +6,7 @@
 	import { t, getLocale } from '$lib/i18n';
 	import { targetsCache, telegramBotsCache, emailBotsCache, matrixBotsCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
@@ -134,7 +135,7 @@
 	let loadError = $state('');
 	let showTelegramSettings = $state(false);
 	let confirmDelete = $state<NotificationTarget | null>(null);
-	let formEl: HTMLElement;
+	let formEl = $state<HTMLElement | undefined>();
 
 	async function scrollToForm() {
 		await tick();
@@ -165,6 +166,20 @@
 	// ── Data loading ──
 
 	onMount(load);
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'orchid' }> = [];
+		if (activeType) {
+			// Tab-filtered: show count of receivers for the active type only.
+			const total = targets.reduce((acc, t) => acc + (t.receiver_count || 0), 0);
+			if (total > 0) pills.push({ label: `${total} ${total === 1 ? t('targets.receiver') : t('targets.receivers')}`, tone: 'mint' });
+		} else {
+			const types = new Set(targets.map(t => t.type)).size;
+			if (types > 0) pills.push({ label: `${types} ${t('targets.channelsCount')}`, tone: 'sky' });
+		}
+		return pills;
+	});
+
 	async function load() {
 		try {
 			await Promise.all([
@@ -214,7 +229,7 @@
 			max_media_to_send: c.max_media_to_send ?? 50, max_media_per_group: c.max_media_per_group ?? 10,
 			media_delay: c.media_delay ?? 500, max_asset_size: c.max_asset_size ?? 50,
 			disable_url_preview: c.disable_url_preview ?? false, send_large_photos_as_documents: c.send_large_photos_as_documents ?? false,
-			ai_captions: c.ai_captions ?? false, chat_action: c.chat_action ?? 'typing',
+			ai_captions: c.ai_captions ?? false, chat_action: tgt.chat_action ?? c.chat_action ?? 'typing',
 			// discord/slack
 			username: c.username || '',
 			// ntfy
@@ -253,7 +268,7 @@
 					max_media_to_send: form.max_media_to_send, max_media_per_group: form.max_media_per_group,
 					media_delay: form.media_delay, max_asset_size: form.max_asset_size,
 					disable_url_preview: form.disable_url_preview, send_large_photos_as_documents: form.send_large_photos_as_documents,
-					ai_captions: form.ai_captions, chat_action: form.chat_action || undefined,
+					ai_captions: form.ai_captions,
 				};
 			} else if (formType === 'webhook') {
 				config = { ai_captions: form.ai_captions };
@@ -269,10 +284,12 @@
 				config = { child_target_ids: form.child_target_ids };
 			}
 
+			const body: Record<string, any> = { name: form.name, icon: form.icon, config };
+			if (formType === 'telegram') body.chat_action = form.chat_action || null;
 			if (editing) {
-				await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
+				await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify(body) });
 			} else {
-				await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, name: form.name, icon: form.icon, config }) });
+				await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, ...body }) });
 			}
 			showForm = false;
 			editing = null;
@@ -418,11 +435,18 @@
 	}
 </script>
 
-<PageHeader title={activeType ? `${t('targets.title')} — ${activeType.charAt(0).toUpperCase() + activeType.slice(1)}` : t('targets.title')} description={activeType ? t(TYPE_DESC_KEYS[activeType]) : t('targets.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+<PageHeader
+	title={activeType ? activeType.charAt(0).toUpperCase() + activeType.slice(1) : t('targets.title')}
+	emphasis={activeType ? t('targets.titleEmphasis') : t('targets.titleEmphasisAll')}
+	description={activeType ? t(TYPE_DESC_KEYS[activeType]) : t('targets.description')}
+	crumb="Routing · Targets"
+	count={targets.length}
+	countLabel={t('dashboard.targetsShort')}
+	pills={headerPills}
+>
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('targets.cancel') : t('targets.addTarget')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}<Loading />{:else}

frontend/src/routes/targets/TargetForm.svelte

@@ -79,7 +79,7 @@
 	<form onsubmit={onsave} class="space-y-4">
 		{#if !activeType}
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('targets.type')}</label>
+			<div class="block text-sm font-medium mb-1">{t('targets.type')}</div>
 			<IconGridSelect items={typeGridItems} bind:value={formType} columns={4} />
 		</div>
 		{/if}
@@ -92,7 +92,7 @@
 		</div>
 		{#if formType === 'telegram'}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</label>
+				<div class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</div>
 				<EntitySelect items={telegramBotItems} bind:value={form.bot_id} placeholder={t('telegramBot.selectBot')} />
 				{#if telegramBotCount === 0}
 					<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noBots')} <a href="/bots?tab=telegram" class="underline">→</a></p>
@@ -124,7 +124,7 @@
 						<input id="tgt-maxsize" type="number" bind:value={form.max_asset_size} min="1" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 					</div>
 					<div class="col-span-2">
-						<label class="block text-xs mb-1">{t('targets.chatAction')}</label>
+						<div class="block text-xs mb-1">{t('targets.chatAction')}</div>
 						<IconGridSelect items={chatActionItems} bind:value={form.chat_action} columns={4} compact />
 					</div>
 					<label class="flex items-center gap-2 text-sm col-span-2"><input type="checkbox" bind:checked={form.disable_url_preview} /> {t('targets.disableUrlPreview')}</label>
@@ -151,7 +151,7 @@
 			</div>
 		{:else if formType === 'email'}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</label>
+				<div class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</div>
 				<EntitySelect items={emailBotItems} bind:value={form.email_bot_id} placeholder={t('targets.selectEmailBot')} />
 				{#if emailBotCount === 0}
 					<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('emailBot.noBots')} <a href="/bots?tab=email" class="underline">→</a></p>
@@ -159,7 +159,7 @@
 			</div>
 		{:else if formType === 'matrix'}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</label>
+				<div class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</div>
 				<EntitySelect items={matrixBotItems} bind:value={form.matrix_bot_id} placeholder={t('targets.selectMatrixBot')} />
 				{#if matrixBotCount === 0}
 					<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('matrixBot.noBots')} <a href="/bots?tab=matrix" class="underline">→</a></p>
@@ -168,7 +168,7 @@
 		{:else if formType === 'broadcast'}
 			{@const childIds = (form.child_target_ids || []).map(String)}
 			<div>
-				<label class="block text-sm font-medium mb-1">{t('targets.selectChildTargets')}</label>
+				<div class="block text-sm font-medium mb-1">{t('targets.selectChildTargets')}</div>
 				<MultiEntitySelect
 					items={broadcastChildItems?.map(i => ({ value: String(i.value), label: i.label, icon: i.icon, desc: i.desc })) ?? []}
 					values={childIds}

frontend/src/routes/template-configs/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { api, getBlockedBy, type BlockedByDetail } from '$lib/api';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
 	import BlockedByModal from '$lib/components/BlockedByModal.svelte';
 	import { t } from '$lib/i18n';
 	import { sanitizePreview } from '$lib/sanitize';
@@ -20,6 +21,8 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import JinjaEditor from '$lib/components/JinjaEditor.svelte';
 	import CollapsibleSlot from '$lib/components/CollapsibleSlot.svelte';
+	import EntitySelect, { type EntityItem } from '$lib/components/EntitySelect.svelte';
+	import { getLocaleMeta } from '$lib/locales';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
@@ -70,7 +73,24 @@
 	let showPreviewFor = $state<Set<string>>(new Set());
 
 	let LOCALES = $derived(supportedLocalesCache.items);
-	let activeLocale = $state<string>('en');
+	let primaryLocale = $derived(LOCALES[0] || 'en');
+	let activeLocale = $state<string>('');
+	const localeItems = $derived<EntityItem[]>(LOCALES.map((code, i) => {
+		const m = getLocaleMeta(code);
+		return {
+			value: code,
+			label: m.native,
+			desc: i === 0 ? `${code.toUpperCase()} · ${t('locales.primary')}` : code.toUpperCase(),
+		};
+	}));
+	/**
+	 * Promote primary to be the active locale once the supported-locales
+	 * cache loads (covers initial mount before openNew/edit ran). Without
+	 * this, opening a form before fetch resolves would stay on '' / 'en'.
+	 */
+	$effect(() => {
+		if (!activeLocale && LOCALES.length > 0) activeLocale = primaryLocale;
+	});
 
 	function toggleSlot(key: string) {
 		const next = new Set(expandedSlots);
@@ -207,7 +227,22 @@
 		]},
 	]);
 
-	onMount(load);
+	onMount(() => {
+		topbarAction.set({
+			label: t('templateConfig.newConfig'),
+			onclick: () => { showForm ? (showForm = false, editing = null) : openNew(); },
+		});
+		load();
+	});
+	onDestroy(() => topbarAction.clear());
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'sky' }> = [];
+		const types = new Set(configs.map(c => c.provider_type)).size;
+		if (types > 0) pills.push({ label: `${types} ${types === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
+
 	async function load() {
 		try {
 			[, varsRef] = await Promise.all([
@@ -256,7 +291,7 @@
 	function openNew() {
 		form = defaultForm();
 		if (providerTypes.length > 0) form.provider_type = providerTypes[0];
-		editing = null; showForm = true; activeLocale = 'en'; slotPreview = {}; slotErrors = {}; dateFormatPreview = {}; expandedSlots = new Set(); showPreviewFor = new Set(); slotFilter = '';
+		editing = null; showForm = true; activeLocale = primaryLocale; slotPreview = {}; slotErrors = {}; dateFormatPreview = {}; expandedSlots = new Set(); showPreviewFor = new Set(); slotFilter = '';
 		refreshDateFormatPreview();
 	}
 	function edit(c: TemplateConfig) {
@@ -269,7 +304,7 @@
 			date_format: c.date_format || '%d.%m.%Y, %H:%M UTC',
 			date_only_format: c.date_only_format || '%d.%m.%Y',
 		};
-		editing = c.id; showForm = true; activeLocale = 'en';
+		editing = c.id; showForm = true; activeLocale = primaryLocale;
 		slotPreview = {}; slotErrors = {}; dateFormatPreview = {};
 		expandedSlots = new Set(); showPreviewFor = new Set(); slotFilter = '';
 		setTimeout(() => refreshAllPreviews(), 100);
@@ -356,7 +391,7 @@
 		};
 		editing = null;
 		showForm = true;
-		activeLocale = 'en';
+		activeLocale = primaryLocale;
 		slotPreview = {};
 		slotErrors = {};
 		setTimeout(() => refreshAllPreviews(), 100);
@@ -379,7 +414,15 @@
 	}
 </script>
 
-<PageHeader title={t('templateConfig.title')} description={t('templateConfig.description')}>
+<PageHeader
+	title={t('templateConfig.title')}
+	emphasis={t('templateConfig.titleEmphasis')}
+	description={t('templateConfig.description')}
+	crumb="Routing · Notification"
+	count={configs.length}
+	countLabel={t('templateConfig.countLabel')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('templateConfig.newConfig')}
 	</Button>
@@ -408,7 +451,7 @@
 
 		{#if !editing}
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</label>
+			<div class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</div>
 			<IconGridSelect items={providerTypeItems()} bind:value={form.provider_type} columns={2} />
 		</div>
 		{:else}
@@ -419,19 +462,23 @@
 		{/if}
 
 		<div class="flex items-center gap-2">
-			<label class="text-sm font-medium">{t('templateConfig.previewAs')}:</label>
+			<span class="text-sm font-medium">{t('templateConfig.previewAs')}:</span>
 			<IconGridSelect items={previewTargetTypeItems()} bind:value={previewTargetType} columns={2} />
 		</div>
 
-		<!-- Locale tabs -->
-		<div class="flex items-center gap-1 mb-3 border-b border-[var(--color-border)]">
-			{#each LOCALES as loc}
-				<button type="button"
-					class="px-3 py-1.5 text-xs font-medium rounded-t-md transition-colors {activeLocale === loc ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]' : 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]'}"
-					onclick={() => { activeLocale = loc; refreshAllPreviews(); }}>
-					{loc.toUpperCase()}
-				</button>
-			{/each}
+		<!-- Language picker -->
+		<div class="flex items-center gap-2 mb-3">
+			<span class="text-xs font-medium text-[var(--color-muted-foreground)] shrink-0">
+				{t('templateConfig.language')}
+			</span>
+			<div class="flex-1 max-w-xs">
+				<EntitySelect
+					items={localeItems}
+					value={activeLocale}
+					size="sm"
+					onselect={(v) => { activeLocale = (v as string) || primaryLocale; refreshAllPreviews(); }}
+				/>
+			</div>
 			{#if form.provider_type}
 				<button type="button" onclick={resetAllToDefaults}
 					title={t('templateConfig.resetAllToDefaults')}
@@ -460,9 +507,9 @@
 						{#if slot.isDateFormat}
 							<div>
 								<div class="flex items-center justify-between mb-1">
-									<label class="text-xs text-[var(--color-muted-foreground)]">{slot.description || t(`templateConfig.${slot.label}`, slot.label)}</label>
+									<label for="datefmt-{slot.key}" class="text-xs text-[var(--color-muted-foreground)]">{slot.description || t(`templateConfig.${slot.label}`, slot.label)}</label>
 								</div>
-								<input value={(form as any)[slot.key]}
+								<input id="datefmt-{slot.key}" value={(form as any)[slot.key]}
 									oninput={(e: Event) => { (form as any)[slot.key] = (e.target as HTMLInputElement).value; clearTimeout(validateTimers['_fmt']); validateTimers['_fmt'] = setTimeout(refreshAllPreviews, 600); refreshDateFormatPreview(); }}
 									class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
 								{#if dateFormatPreview[slot.key]}
@@ -508,7 +555,7 @@
 
 								{#if slotErrors[slot.key]}
 									{#if slotErrorTypes[slot.key] === 'undefined'}
-										<p class="mt-1 text-xs" style="color: #d97706;">⚠ {t('common.undefinedVar')}: {slotErrors[slot.key]}</p>
+										<p class="mt-1 text-xs" style="color: var(--color-warning-fg);">⚠ {t('common.undefinedVar')}: {slotErrors[slot.key]}</p>
 									{:else}
 										<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.key]}{slotErrorLines[slot.key] ? ` (${t('common.line')} ${slotErrorLines[slot.key]})` : ''}</p>
 									{/if}

frontend/src/routes/tracking-configs/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { api, getBlockedBy, type BlockedByDetail } from '$lib/api';
+	import { topbarAction } from '$lib/stores/topbar-action.svelte';
 	import BlockedByModal from '$lib/components/BlockedByModal.svelte';
 	import { t } from '$lib/i18n';
 	import { trackingConfigsCache } from '$lib/stores/caches.svelte';
@@ -190,11 +191,43 @@
 	let form: Record<string, any> = $state(defaultForm());
 	let descriptor = $derived(getDescriptor(form.provider_type));
 
-	onMount(load);
+	onMount(() => {
+		topbarAction.set({
+			label: t('trackingConfig.newConfig'),
+			onclick: () => { showForm ? (showForm = false, editing = null) : openNew(); },
+		});
+		load();
+	});
+	onDestroy(() => topbarAction.clear());
+
+	const headerPills = $derived.by(() => {
+		const pills: Array<{ label: string; tone: 'sky' }> = [];
+		const types = new Set(configs.map(c => c.provider_type)).size;
+		if (types > 0) pills.push({ label: `${types} ${types === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
+		return pills;
+	});
 	async function load() {
 		try { await trackingConfigsCache.fetch(true); }
 		catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; highlightFromUrl(); }
+		finally { loaded = true; highlightFromUrl(); _openEditFromUrl(); }
+	}
+
+	// Cross-page deep-link: ``/tracking-configs?edit=<id>`` auto-opens that
+	// config in edit mode. Used by the Notification Tracker form's "Open
+	// Tracking Config" link so users land directly on the right editor
+	// instead of the generic list. Strips the param afterwards so a browser
+	// refresh doesn't re-open the modal.
+	function _openEditFromUrl() {
+		if (typeof window === 'undefined') return;
+		const params = new URLSearchParams(window.location.search);
+		const editId = params.get('edit');
+		if (!editId) return;
+		const match = allConfigs.find(c => String(c.id) === editId);
+		if (match) edit(match);
+		params.delete('edit');
+		const qs = params.toString();
+		const cleanUrl = window.location.pathname + (qs ? '?' + qs : '');
+		window.history.replaceState(null, '', cleanUrl);
 	}
 
 	function openNew() { form = defaultForm(); editing = null; showForm = true; }
@@ -230,7 +263,15 @@
 	}
 </script>
 
-<PageHeader title={t('trackingConfig.title')} description={t('trackingConfig.description')}>
+<PageHeader
+	title={t('trackingConfig.title')}
+	emphasis={t('trackingConfig.titleEmphasis')}
+	description={t('trackingConfig.description')}
+	crumb="Routing · Notification"
+	count={configs.length}
+	countLabel={t('trackingConfig.countLabel')}
+	pills={headerPills}
+>
 	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('trackingConfig.newConfig')}
 	</Button>
@@ -253,7 +294,7 @@
 		</div>
 
 		<div>
-			<label class="block text-sm font-medium mb-1">{t('trackingConfig.providerType')}</label>
+			<div class="block text-sm font-medium mb-1">{t('trackingConfig.providerType')}</div>
 			{#if !editing}
 				<IconGridSelect items={providerTypeItems()} bind:value={form.provider_type} columns={2} />
 			{:else}

frontend/src/routes/users/+page.svelte

@@ -89,7 +89,14 @@
 	}
 </script>
 
-<PageHeader title={t('users.title')} description={t('users.description')}>
+<PageHeader
+	title={t('users.title')}
+	emphasis={t('users.titleEmphasis')}
+	description={t('users.description')}
+	crumb="System · Access"
+	count={users.length}
+	countLabel={t('users.countLabel')}
+>
 	<Button size="sm" onclick={() => showForm = !showForm}>
 		{showForm ? t('users.cancel') : t('users.addUser')}
 	</Button>

frontend/vite.config.ts

@@ -1,9 +1,18 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+const pkg = JSON.parse(
+	readFileSync(fileURLToPath(new URL('./package.json', import.meta.url)), 'utf8'),
+);
 
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit()],
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version),
+	},
 	server: {
 		port: 5175,
 		proxy: {

packages/core/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "notify-bridge-core"
-version = "0.5.1"
+version = "0.6.4"
 description = "Core library for Notify Bridge — service provider abstractions, models, notifications, and templates"
 requires-python = ">=3.12"
 dependencies = [

packages/core/src/notify_bridge_core/notifications/telegram/client.py

@@ -6,12 +6,46 @@ import asyncio
 import json
 import logging
 import mimetypes
+import re
 from dataclasses import dataclass
 from typing import Any, Callable
 
 import aiohttp
 from aiohttp import FormData
 
+# Telegram 429 / flood-control retry settings. Telegram returns
+# ``parameters.retry_after`` for rate limits; we honor it up to a cap so a
+# pathological value can't park the dispatcher for minutes.
+_TG_429_MAX_ATTEMPTS = 4
+_TG_429_MAX_WAIT_S = 60
+_RETRY_AFTER_RE = re.compile(r"retry after (\d+)", re.IGNORECASE)
+
+
+def _extract_retry_after(result: dict[str, Any]) -> int | None:
+    """Return the retry_after seconds from a Telegram error response.
+
+    Prefers the structured ``parameters.retry_after`` field; falls back to
+    parsing the human-readable description (``"Too Many Requests: retry
+    after N"``) which Telegram has been known to return without the
+    structured field on some endpoints.
+    """
+    params = result.get("parameters") or {}
+    ra = params.get("retry_after")
+    if isinstance(ra, (int, float)) and ra > 0:
+        return int(ra)
+    desc = str(result.get("description", ""))
+    m = _RETRY_AFTER_RE.search(desc)
+    if m:
+        try:
+            return int(m.group(1))
+        except ValueError:
+            return None
+    return None
+
+
+def _is_rate_limited(status: int, result: dict[str, Any]) -> bool:
+    return status == 429 or result.get("error_code") == 429
+
 from .cache import TelegramFileCache
 from .media import (
     TELEGRAM_API_BASE_URL,
@@ -193,40 +227,58 @@ class TelegramClient:
         thumbhash: str | None,
     ) -> NotificationResult:
         """Multipart-upload ``data`` to Telegram and cache the returned file_id."""
-        form = FormData()
-        form.add_field("chat_id", chat_id)
-        form.add_field(kind.form_field, data, filename=filename, content_type=content_type)
-        form.add_field("parse_mode", parse_mode)
-        if caption:
-            form.add_field("caption", caption)
-        if reply_to_message_id:
-            form.add_field("reply_parameters", json.dumps({"message_id": reply_to_message_id}))
+        def _build_form() -> FormData:
+            f = FormData()
+            f.add_field("chat_id", chat_id)
+            f.add_field(kind.form_field, data, filename=filename, content_type=content_type)
+            f.add_field("parse_mode", parse_mode)
+            if caption:
+                f.add_field("caption", caption)
+            if reply_to_message_id:
+                f.add_field("reply_parameters", json.dumps({"message_id": reply_to_message_id}))
+            return f
 
         telegram_url = f"{TELEGRAM_API_BASE_URL}{self._token}/{kind.api_method}"
-        try:
-            async with self._session.post(telegram_url, data=form) as response:
-                result = await response.json()
-                if response.status == 200 and result.get("ok"):
-                    res = result.get("result", {})
-                    file_id = kind.file_id_from_result(res)
-                    if file_id and cache and cache_key:
-                        await cache.async_set(
-                            cache_key, file_id, kind.cache_type,
-                            thumbhash=thumbhash, size=len(data),
+        for attempt in range(1, _TG_429_MAX_ATTEMPTS + 1):
+            try:
+                async with self._session.post(telegram_url, data=_build_form()) as response:
+                    result = await response.json()
+                    if response.status == 200 and result.get("ok"):
+                        res = result.get("result", {})
+                        file_id = kind.file_id_from_result(res)
+                        if file_id and cache and cache_key:
+                            await cache.async_set(
+                                cache_key, file_id, kind.cache_type,
+                                thumbhash=thumbhash, size=len(data),
+                            )
+                        return {"success": True, "message_id": res.get("message_id")}
+
+                    if _is_rate_limited(response.status, result) and attempt < _TG_429_MAX_ATTEMPTS:
+                        retry_after = _extract_retry_after(result) or 1
+                        wait_s = min(retry_after + 1, _TG_429_MAX_WAIT_S)
+                        _LOGGER.warning(
+                            "Telegram %s 429 (retry_after=%ds, attempt %d/%d) bytes=%d — sleeping %ds",
+                            kind.api_method, retry_after, attempt, _TG_429_MAX_ATTEMPTS,
+                            len(data), wait_s,
                         )
-                    return {"success": True, "message_id": res.get("message_id")}
+                        await asyncio.sleep(wait_s)
+                        continue
+
+                    _LOGGER.error(
+                        "Telegram %s failed: status=%s code=%s desc=%r bytes=%d",
+                        kind.api_method, response.status, result.get("error_code"),
+                        result.get("description", "Unknown"), len(data),
+                    )
+                    return {"success": False, "error": result.get("description", "Unknown Telegram error")}
+            except aiohttp.ClientError as err:
                 _LOGGER.error(
-                    "Telegram %s failed: status=%s code=%s desc=%r bytes=%d",
-                    kind.api_method, response.status, result.get("error_code"),
-                    result.get("description", "Unknown"), len(data),
+                    "Telegram %s transport error (bytes=%d): %s",
+                    kind.api_method, len(data), err, exc_info=True,
                 )
-                return {"success": False, "error": result.get("description", "Unknown Telegram error")}
-        except aiohttp.ClientError as err:
-            _LOGGER.error(
-                "Telegram %s transport error (bytes=%d): %s",
-                kind.api_method, len(data), err, exc_info=True,
-            )
-            return {"success": False, "error": str(err)}
+                return {"success": False, "error": str(err)}
+        # All attempts exhausted via 429 — should be unreachable, but keep
+        # an explicit error path so we never return None.
+        return {"success": False, "error": "Telegram rate limit: max retries exhausted"}
 
     async def send_notification(
         self,
@@ -299,12 +351,7 @@ class TelegramClient:
                 send_large_photos_as_documents,
             )
         finally:
-            if typing_task:
-                typing_task.cancel()
-                try:
-                    await typing_task
-                except asyncio.CancelledError:
-                    pass
+            await self.stop_keepalive(typing_task)
 
     async def send_message(
         self,
@@ -368,20 +415,53 @@ class TelegramClient:
             return False
 
     def start_chat_action_keepalive(self, chat_id: str, action: str = "typing") -> asyncio.Task:
-        """Repeatedly post ``action`` every 4s until the returned task is cancelled.
+        """Repeatedly post ``action`` every 4s until stopped.
 
         Telegram chat actions expire after ~5s, so callers that want the hint
         to persist through longer work (fetching assets, multi-chunk uploads)
-        need a keep-alive. Cancel the task in a ``finally`` to stop it.
+        need a keep-alive.
+
+        The returned task carries an attached ``stop_event`` (``asyncio.Event``).
+        Stop cleanly via :meth:`stop_keepalive` — setting the event before
+        cancellation prevents the loop from firing one last ``sendChatAction``
+        after the caller's final user-visible message, which would otherwise
+        leave a phantom indicator hanging for ~5s.
         """
+        stop_event = asyncio.Event()
+
         async def action_loop() -> None:
             try:
-                while True:
+                while not stop_event.is_set():
                     await self.send_chat_action(chat_id, action)
-                    await asyncio.sleep(4)
+                    try:
+                        await asyncio.wait_for(stop_event.wait(), timeout=4)
+                    except asyncio.TimeoutError:
+                        pass  # 4s elapsed, refresh the action
             except asyncio.CancelledError:
                 pass
-        return asyncio.create_task(action_loop())
+
+        task: asyncio.Task = asyncio.create_task(action_loop())
+        task.stop_event = stop_event  # type: ignore[attr-defined]
+        return task
+
+    @staticmethod
+    async def stop_keepalive(task: asyncio.Task | None) -> None:
+        """Stop a keepalive task started by :meth:`start_chat_action_keepalive`.
+
+        Sets the attached stop event before cancelling so the loop won't
+        fire another ``sendChatAction`` after the caller's final message
+        landed at Telegram.
+        """
+        if task is None:
+            return
+        stop_event = getattr(task, "stop_event", None)
+        if stop_event is not None:
+            stop_event.set()
+        task.cancel()
+        try:
+            await task
+        except asyncio.CancelledError:
+            pass
 
     async def _send_photo(
         self, chat_id: str, url: str | None, caption: str | None = None,
@@ -526,12 +606,10 @@ class TelegramClient:
                 all_message_ids.append(result.get("message_id"))
                 continue
 
-            # Multi-item: download all, build form, send media group
-            form = FormData()
-            form.add_field("chat_id", chat_id)
-            if reply_to_message_id and chunk_idx == 0:
-                form.add_field("reply_parameters", json.dumps({"message_id": reply_to_message_id}))
-
+            # Multi-item: download all, build form, send media group.
+            # Attachments are recorded separately so we can rebuild FormData on
+            # 429 retry — aiohttp.FormData is single-use after a request.
+            attachments: list[tuple[str, bytes, str, str]] = []  # (name, data, filename, content_type)
             media_json = []
             upload_idx = 0
             # Track cache info per media_json entry (in order) so we can map
@@ -646,7 +724,7 @@ class TelegramClient:
                     attach_name = f"file{upload_idx}"
                     ct = item.get("content_type") or ("image/jpeg" if media_type == "photo" else "video/mp4")
                     ext = "jpg" if media_type == "photo" else "mp4"
-                    form.add_field(attach_name, data, filename=f"media_{idx}.{ext}", content_type=ct)
+                    attachments.append((attach_name, data, f"media_{idx}.{ext}", ct))
                     mij = {"type": media_type, "media": f"attach://{attach_name}"}
                     upload_idx += 1
                     # Record cache key so we can store file_id from response
@@ -674,59 +752,86 @@ class TelegramClient:
                 )
                 continue
 
-            form.add_field("media", json.dumps(media_json))
             telegram_url = f"{TELEGRAM_API_BASE_URL}{self._token}/sendMediaGroup"
 
-            try:
-                async with self._session.post(telegram_url, data=form) as response:
-                    result = await response.json()
-                    if response.status == 200 and result.get("ok"):
-                        result_msgs = result.get("result", [])
-                        all_message_ids.extend(msg.get("message_id") for msg in result_msgs)
+            def _build_form() -> FormData:
+                f = FormData()
+                f.add_field("chat_id", chat_id)
+                if reply_to_message_id and chunk_idx == 0:
+                    f.add_field("reply_parameters", json.dumps({"message_id": reply_to_message_id}))
+                for name, payload, filename, ct in attachments:
+                    f.add_field(name, payload, filename=filename, content_type=ct)
+                f.add_field("media", json.dumps(media_json))
+                return f
+
+            chunk_failed_result: dict[str, Any] | None = None
+            for attempt in range(1, _TG_429_MAX_ATTEMPTS + 1):
+                try:
+                    async with self._session.post(telegram_url, data=_build_form()) as response:
+                        result = await response.json()
+                        if response.status == 200 and result.get("ok"):
+                            result_msgs = result.get("result", [])
+                            all_message_ids.extend(msg.get("message_id") for msg in result_msgs)
+
+                            # Cache file_ids from response — map by position
+                            cache_entries: list[tuple[str, str, str, str | None, int | None]] = []
+                            for i, msg in enumerate(result_msgs):
+                                if i >= len(media_cache_info):
+                                    break
+                                info = media_cache_info[i]
+                                if info is None:
+                                    continue  # was a cache hit, skip
+                                ck, mt, th, sz = info
+                                file_id = None
+                                if msg.get("photo"):
+                                    file_id = msg["photo"][-1].get("file_id")
+                                elif msg.get("video"):
+                                    file_id = msg["video"].get("file_id")
+                                elif msg.get("document"):
+                                    file_id = msg["document"].get("file_id")
+                                if file_id:
+                                    cache_entries.append((ck, file_id, mt, th, sz))
+                            if cache_entries:
+                                # All entries in a chunk share the same cache backend
+                                eff_cache = self._get_cache_for_key(cache_entries[0][0], is_asset_cache_key(cache_entries[0][0]))
+                                if eff_cache:
+                                    await eff_cache.async_set_many(cache_entries)
+                            break  # chunk succeeded
+
+                        if _is_rate_limited(response.status, result) and attempt < _TG_429_MAX_ATTEMPTS:
+                            retry_after = _extract_retry_after(result) or 1
+                            wait_s = min(retry_after + 1, _TG_429_MAX_WAIT_S)
+                            _LOGGER.warning(
+                                "Telegram sendMediaGroup 429 (retry_after=%ds, attempt %d/%d) chunk=%d/%d items=%d — sleeping %ds",
+                                retry_after, attempt, _TG_429_MAX_ATTEMPTS,
+                                chunk_idx + 1, len(chunks), len(media_json), wait_s,
+                            )
+                            await asyncio.sleep(wait_s)
+                            continue
 
-                        # Cache file_ids from response — map by position
-                        cache_entries: list[tuple[str, str, str, str | None, int | None]] = []
-                        for i, msg in enumerate(result_msgs):
-                            if i >= len(media_cache_info):
-                                break
-                            info = media_cache_info[i]
-                            if info is None:
-                                continue  # was a cache hit, skip
-                            ck, mt, th, sz = info
-                            file_id = None
-                            if msg.get("photo"):
-                                file_id = msg["photo"][-1].get("file_id")
-                            elif msg.get("video"):
-                                file_id = msg["video"].get("file_id")
-                            elif msg.get("document"):
-                                file_id = msg["document"].get("file_id")
-                            if file_id:
-                                cache_entries.append((ck, file_id, mt, th, sz))
-                        if cache_entries:
-                            # All entries in a chunk share the same cache backend
-                            eff_cache = self._get_cache_for_key(cache_entries[0][0], is_asset_cache_key(cache_entries[0][0]))
-                            if eff_cache:
-                                await eff_cache.async_set_many(cache_entries)
-                    else:
                         _LOGGER.error(
                             "Telegram sendMediaGroup failed: status=%s code=%s desc=%r chunk=%d/%d items=%d",
                             response.status, result.get("error_code"),
                             result.get("description", "Unknown"),
                             chunk_idx + 1, len(chunks), len(media_json),
                         )
-                        return {
+                        chunk_failed_result = {
                             "success": False,
                             "error": result.get("description", "Unknown"),
                             "error_code": result.get("error_code"),
                             "failed_at_chunk": chunk_idx + 1,
                         }
-            except aiohttp.ClientError as err:
-                _LOGGER.error(
-                    "Telegram sendMediaGroup transport error on chunk %d/%d (%d items): %s",
-                    chunk_idx + 1, len(chunks), len(media_json), err,
-                    exc_info=True,
-                )
-                return {"success": False, "error": str(err), "failed_at_chunk": chunk_idx + 1}
+                        break
+                except aiohttp.ClientError as err:
+                    _LOGGER.error(
+                        "Telegram sendMediaGroup transport error on chunk %d/%d (%d items): %s",
+                        chunk_idx + 1, len(chunks), len(media_json), err,
+                        exc_info=True,
+                    )
+                    return {"success": False, "error": str(err), "failed_at_chunk": chunk_idx + 1}
+
+            if chunk_failed_result is not None:
+                return chunk_failed_result
 
         # Distinguish "posted something" from "posted nothing" so the caller
         # can surface an ERROR when a command produced a caption reply but no
@@ -829,12 +934,41 @@ class TelegramClient:
 
     async def set_my_commands(
         self, commands: list[dict[str, str]], language_code: str | None = None,
+        scope: dict[str, Any] | None = None,
     ) -> dict[str, Any]:
-        """Register bot commands with BotFather API."""
+        """Register bot commands with BotFather API.
+
+        ``scope`` is a Telegram BotCommandScope object (e.g.
+        ``{"type": "chat", "chat_id": 123}``). When provided, the
+        registration applies only to that scope. ``language_code`` and
+        ``scope`` may be combined to localize per-scope.
+        """
         url = f"{TELEGRAM_API_BASE_URL}{self._token}/setMyCommands"
         payload: dict[str, Any] = {"commands": commands}
         if language_code:
             payload["language_code"] = language_code
+        if scope:
+            payload["scope"] = scope
+        try:
+            async with self._session.post(url, json=payload) as resp:
+                data = await resp.json()
+                if data.get("ok"):
+                    return {"success": True}
+                return {"success": False, "error": data.get("description", "Unknown error")}
+        except aiohttp.ClientError as err:
+            return {"success": False, "error": str(err)}
+
+    async def delete_my_commands(
+        self, language_code: str | None = None,
+        scope: dict[str, Any] | None = None,
+    ) -> dict[str, Any]:
+        """Clear bot commands for the given scope/language via BotFather API."""
+        url = f"{TELEGRAM_API_BASE_URL}{self._token}/deleteMyCommands"
+        payload: dict[str, Any] = {}
+        if language_code:
+            payload["language_code"] = language_code
+        if scope:
+            payload["scope"] = scope
         try:
             async with self._session.post(url, json=payload) as resp:
                 data = await resp.json()

packages/core/src/notify_bridge_core/providers/gitea/client.py

@@ -150,6 +150,40 @@ class GiteaClient:
             _LOGGER.warning("Failed to fetch commits for %s/%s: %s", owner, repo, err)
         return []
 
+    async def get_users(self, limit: int = 200) -> list[dict[str, Any]]:
+        """List users known to the Gitea instance via /users/search.
+
+        ``/users/search`` with an empty ``q`` returns all users the
+        authenticated token can see, paginated. We cap at ``limit`` to avoid
+        unbounded memory on large instances; the picker only needs enough to
+        cover senders that may appear in webhook payloads.
+        """
+        users: list[dict[str, Any]] = []
+        page = 1
+        per_page = min(50, limit)
+        while len(users) < limit:
+            try:
+                async with self._session.get(
+                    f"{self._url}/api/v1/users/search",
+                    headers=self._headers,
+                    params={"page": str(page), "limit": str(per_page)},
+                ) as response:
+                    if response.status != 200:
+                        _LOGGER.warning("Failed to fetch users: HTTP %s", response.status)
+                        break
+                    body = await response.json()
+                    items = body.get("data", []) if isinstance(body, dict) else body
+                    if not items:
+                        break
+                    users.extend(items)
+                    if len(items) < per_page:
+                        break
+                    page += 1
+            except aiohttp.ClientError as err:
+                _LOGGER.warning("Failed to fetch users: %s", err)
+                break
+        return users[:limit]
+
 
 class GiteaApiError(Exception):
     """Raised when a Gitea API call fails."""

packages/server/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "notify-bridge-server"
-version = "0.5.1"
+version = "0.6.4"
 description = "Standalone Notify Bridge server — FastAPI REST API with SQLite database"
 requires-python = ">=3.12"
 dependencies = [

packages/server/src/notify_bridge_server/api/notification_trackers.py

@@ -37,7 +37,7 @@ class NotificationTrackerCreate(BaseModel):
     icon: str = ""
     collection_ids: list[str] = []
     scan_interval: int = 60
-    batch_duration: int = 0
+    adaptive_max_skip: int | None = None
     default_tracking_config_id: int | None = None
     default_template_config_id: int | None = None
     enabled: bool = True
@@ -48,7 +48,11 @@ class NotificationTrackerUpdate(BaseModel):
     icon: str | None = None
     collection_ids: list[str] | None = None
     scan_interval: int | None = None
-    batch_duration: int | None = None
+    # int | None is ambiguous for partial updates — we can't distinguish
+    # "clear the field" from "don't touch". Callers send this via
+    # model_dump(exclude_unset=True), so an omitted key leaves the value
+    # alone and an explicit null clears it back to the adaptive-off default.
+    adaptive_max_skip: int | None = None
     default_tracking_config_id: int | None = None
     default_template_config_id: int | None = None
     enabled: bool | None = None
@@ -125,7 +129,7 @@ def _build_tracker_response(
         "provider_id": t.provider_id,
         "collection_ids": t.collection_ids,
         "scan_interval": t.scan_interval,
-        "batch_duration": t.batch_duration,
+        "adaptive_max_skip": t.adaptive_max_skip,
         "default_tracking_config_id": t.default_tracking_config_id,
         "default_template_config_id": t.default_template_config_id,
         "enabled": t.enabled,
@@ -149,7 +153,10 @@ async def create_notification_tracker(
     await session.commit()
     await session.refresh(tracker)
     if tracker.enabled:
-        await schedule_tracker(tracker.id, tracker.scan_interval)
+        await schedule_tracker(
+            tracker.id, tracker.scan_interval,
+            adaptive_max_skip=tracker.adaptive_max_skip,
+        )
     await reschedule_immich_dispatch_jobs()
     return await _tracker_response(session, tracker)
 
@@ -178,7 +185,10 @@ async def update_notification_tracker(
     await session.commit()
     await session.refresh(tracker)
     if tracker.enabled:
-        await schedule_tracker(tracker.id, tracker.scan_interval)
+        await schedule_tracker(
+            tracker.id, tracker.scan_interval,
+            adaptive_max_skip=tracker.adaptive_max_skip,
+        )
     else:
         await unschedule_tracker(tracker.id)
     await reschedule_immich_dispatch_jobs()
@@ -270,7 +280,7 @@ async def _tracker_response(session: AsyncSession, t: NotificationTracker) -> di
         "provider_id": t.provider_id,
         "collection_ids": t.collection_ids,
         "scan_interval": t.scan_interval,
-        "batch_duration": t.batch_duration,
+        "adaptive_max_skip": t.adaptive_max_skip,
         "default_tracking_config_id": t.default_tracking_config_id,
         "default_template_config_id": t.default_template_config_id,
         "enabled": t.enabled,

packages/server/src/notify_bridge_server/api/providers.py

@@ -12,7 +12,7 @@ import aiohttp
 
 from ..auth.dependencies import get_current_user
 from ..database.engine import get_session
-from ..database.models import ServiceProvider, User
+from ..database.models import EventLog, ServiceProvider, User
 from ..services import (
     make_immich_provider, make_gitea_provider, make_planka_provider,
     make_nut_provider, make_google_photos_provider, list_provider_collections,
@@ -398,6 +398,62 @@ async def list_collections(
     return await list_provider_collections(provider)
 
 
+@router.get("/{provider_id}/users")
+async def list_provider_users(
+    provider_id: int,
+    user: User = Depends(get_current_user),
+    session: AsyncSession = Depends(get_session),
+) -> list[dict[str, str]]:
+    """Return user identities for sender allowlist/blocklist pickers.
+
+    Two sources are merged so the picker is useful both before and after the
+    first webhook arrives:
+
+    - **Provider API** (primary): Gitea's ``/users/search`` returns instance
+      users the api_token can see. Skipped when no api_token is set.
+    - **Past senders** (fallback): distinct ``sender`` values from
+      ``EventLog.details`` for this provider, so pre-existing trackers stay
+      filterable even if the API call fails or is unconfigured.
+    """
+    provider = await _get_user_provider(session, provider_id, user.id)
+
+    users_by_id: dict[str, str] = {}
+
+    # 1. Try the provider API.
+    if provider.type == "gitea" and (provider.config or {}).get("api_token"):
+        from notify_bridge_core.providers.gitea.client import GiteaClient
+        http_session = await get_http_session()
+        client = GiteaClient(
+            http_session,
+            provider.config.get("url", ""),
+            provider.config.get("api_token", ""),
+        )
+        try:
+            for u in await client.get_users():
+                login = u.get("login", "")
+                if isinstance(login, str) and login:
+                    users_by_id[login] = u.get("full_name") or login
+        except Exception:
+            _LOGGER.warning("Failed to fetch Gitea users via API", exc_info=True)
+
+    # 2. Merge in past senders (covers users not visible to the API token, or
+    #    cases where the API call fails).
+    result = await session.exec(
+        select(EventLog.details).where(EventLog.provider_id == provider.id)
+    )
+    for details in result.all():
+        if not isinstance(details, dict):
+            continue
+        sender = details.get("sender", "")
+        if isinstance(sender, str) and sender and sender not in users_by_id:
+            users_by_id[sender] = sender
+
+    return [
+        {"id": login, "name": name}
+        for login, name in sorted(users_by_id.items(), key=lambda kv: kv[0].lower())
+    ]
+
+
 @router.get("/{provider_id}/albums/{album_id}/shared-links")
 async def get_album_shared_links(
     provider_id: int,

packages/server/src/notify_bridge_server/api/target_receivers.py

@@ -11,7 +11,11 @@ from sqlmodel.ext.asyncio.session import AsyncSession
 from ..auth.dependencies import get_current_user
 from ..database.engine import get_session
 from ..database.models import NotificationTarget, TargetReceiver, User
-from ..services.notifier import send_to_receiver
+from ..services.notifier import (
+    _get_test_message,
+    resolve_telegram_chat_locale,
+    send_to_receiver,
+)
 from .helpers import get_owned_entity
 
 _LOGGER = logging.getLogger(__name__)
@@ -130,14 +134,28 @@ async def test_receiver(
     user: User = Depends(get_current_user),
     session: AsyncSession = Depends(get_session),
 ):
-    """Send a test notification to a single receiver."""
+    """Send a test notification to a single receiver.
+
+    For Telegram targets, locale resolution goes through the shared
+    ``resolve_telegram_chat_locale`` helper so the per-chat ``language_override``
+    set in the bot manager is respected here too — previously this endpoint
+    only consulted ``receiver.locale`` and ignored chat-side overrides.
+    """
     target = await _get_user_target(session, target_id, user.id)
     receiver = await session.get(TargetReceiver, receiver_id)
     if not receiver or receiver.target_id != target_id:
         raise HTTPException(status_code=404, detail="Receiver not found")
 
-    from ..services.notifier import _get_test_message
-    effective_locale = getattr(receiver, 'locale', '') or locale
+    if target.type == "telegram":
+        effective_locale = await resolve_telegram_chat_locale(
+            session,
+            bot_id=target.config.get("bot_id"),
+            chat_id=receiver.config.get("chat_id"),
+            receiver=receiver,
+            fallback=locale,
+        )
+    else:
+        effective_locale = (getattr(receiver, "locale", "") or locale)[:2].lower()
     message = _get_test_message(effective_locale, target.type)
     return await send_to_receiver(target, dict(receiver.config), message)
 

packages/server/src/notify_bridge_server/api/telegram_bots.py

@@ -10,11 +10,11 @@ from sqlmodel.ext.asyncio.session import AsyncSession
 from notify_bridge_core.notifications.telegram.client import TelegramClient
 
 from ..auth.dependencies import get_current_user
-from ..commands.handler import register_commands_with_telegram
+from ..commands.handler import register_commands_with_telegram, sync_chat_command_binding
 from ..commands.webhook import register_webhook, unregister_webhook
 from ..database.engine import get_session
 from ..database.models import AppSetting, NotificationTarget, TargetReceiver, TelegramBot, TelegramChat, User
-from ..services.notifier import _get_test_message
+from ..services.notifier import _get_test_message, resolve_telegram_chat_locale
 from ..services.telegram_poller import schedule_bot_polling, unschedule_bot_polling
 from .app_settings import get_setting
 from .helpers import get_owned_entity
@@ -300,26 +300,14 @@ async def test_chat(
 ):
     """Send a test message to a chat via the bot.
 
-    Locale resolution: prefer the chat row's ``language_override`` (explicit
-    user choice in the UI), fall back to Telegram's ``language_code`` sent
-    with the chat, and only use the ``?locale=`` query param if neither is
-    set. Otherwise users who set RU on a chat would still see an EN test.
+    Locale resolution is delegated to ``resolve_telegram_chat_locale`` so this
+    endpoint, the per-receiver fan-out, and the target receiver test all
+    apply the same priority order (override → language_code → fallback).
     """
     bot = await _get_user_bot(session, bot_id, user.id)
-    chat_row = (await session.exec(
-        select(TelegramChat).where(
-            TelegramChat.bot_id == bot_id,
-            TelegramChat.chat_id == chat_id,
-        )
-    )).first()
-    effective_locale = locale
-    if chat_row:
-        chat_locale = (
-            getattr(chat_row, 'language_override', '') or
-            getattr(chat_row, 'language_code', '') or ''
-        )
-        if chat_locale:
-            effective_locale = chat_locale[:2].lower()
+    effective_locale = await resolve_telegram_chat_locale(
+        session, bot_id=bot_id, chat_id=chat_id, fallback=locale,
+    )
     from ..services.http_session import get_http_session
     message = _get_test_message(effective_locale, "telegram")
     http = await get_http_session()
@@ -347,11 +335,37 @@ async def update_chat(
     if not chat or chat.bot_id != bot_id:
         raise HTTPException(status_code=404, detail="Chat not found")
     updates = body.model_dump(exclude_unset=True)
+    # Track whether anything changed that affects the chat-scoped command
+    # binding registered with Telegram (so the per-chat language_override
+    # actually takes effect on the bot's command list, not just the reply
+    # locale). We push it inline rather than via the debounced auto-sync
+    # so the user sees the change reflected on Telegram immediately —
+    # Telegram clients still cache the menu until the next "/" or chat
+    # re-open, but the source of truth is correct from the moment save
+    # returns.
+    sync_relevant_keys = {"language_override", "commands_enabled"}
+    needs_sync = any(
+        key in updates and getattr(chat, key) != value
+        for key, value in updates.items()
+        if key in sync_relevant_keys
+    )
     for key, value in updates.items():
         setattr(chat, key, value)
     session.add(chat)
     await session.commit()
     await session.refresh(chat)
+    if needs_sync:
+        bot = await session.get(TelegramBot, bot_id)
+        if bot is not None:
+            try:
+                await sync_chat_command_binding(bot, chat)
+            except Exception:
+                # Telegram-side failure shouldn't block the save — the
+                # debounced bot-wide sync will retry on the next change.
+                _LOGGER.warning(
+                    "Inline command sync failed for bot=%d chat=%s",
+                    bot_id, chat.chat_id, exc_info=True,
+                )
     return _chat_response(chat)
 
 

packages/server/src/notify_bridge_server/api/tracking_configs.py

@@ -31,7 +31,7 @@ class TrackingConfigCreate(BaseModel):
     notify_favorites_only: bool = False
     include_tags: bool = True
     include_asset_details: bool = False
-    max_assets_to_show: int = 5
+    max_assets_to_show: int = 10
     assets_order_by: str = "none"
     assets_order: str = "descending"
     periodic_enabled: bool = False

packages/server/src/notify_bridge_server/api/webhooks.py

@@ -28,6 +28,7 @@ from ..database.models import (
     WebhookPayloadLog,
 )
 from ..services.dispatch_helpers import (
+    apply_tracking_display_filters,
     event_allowed_by_config,
     get_app_timezone,
     load_link_data,
@@ -207,9 +208,13 @@ async def _dispatch_webhook_event(
             # Dispatch to targets
             from ..services.http_session import get_http_session
             dispatcher = NotificationDispatcher(session=await get_http_session())
-            target_configs = _build_target_configs(event, link_data, provider_config, app_tz)
-            if target_configs:
-                results = await dispatcher.dispatch(event, target_configs)
+            for tc, target_configs in _build_target_groups(event, link_data, provider_config, app_tz):
+                if not target_configs:
+                    continue
+                shaped_event = apply_tracking_display_filters(event, tc)
+                if shaped_event is None:
+                    continue
+                results = await dispatcher.dispatch(shaped_event, target_configs)
                 for r in results:
                     if r.get("success"):
                         dispatched += 1
@@ -551,21 +556,27 @@ async def generic_webhook(token: str, request: Request):
     return {"ok": True, "dispatched": dispatched}
 
 
-def _build_target_configs(
+def _build_target_groups(
     event: ServiceEvent,
     link_data: list[dict[str, Any]],
     provider_config: dict[str, Any],
     app_tz: str = "UTC",
-) -> list[TargetConfig]:
-    """Build TargetConfig objects for dispatch, applying tracking config filters."""
-    target_configs: list[TargetConfig] = []
+) -> list[tuple[Any, list[TargetConfig]]]:
+    """Build TargetConfigs for dispatch, grouped by their TrackingConfig.
+
+    Targets sharing a TrackingConfig dispatch together so a single
+    ``apply_tracking_display_filters`` pass can shape one event for the
+    whole group; targets with different TCs may see differently-shaped
+    events (e.g. one with favorites_only, one without).
+    """
+    groups: dict[int, tuple[Any, list[TargetConfig]]] = {}
     for ld in link_data:
         tc = ld["tracking_config"]
         if tc and not event_allowed_by_config(event, tc, app_tz):
             continue
 
         tmpl = ld["template_config"]
-        target_configs.append(TargetConfig(
+        target_cfg = TargetConfig(
             type=ld["target_type"],
             config=ld["target_config"],
             template_slots=ld["template_slots"],
@@ -575,5 +586,9 @@ def _build_target_configs(
             provider_internal_url=provider_config.get("url", ""),
             provider_external_url=provider_config.get("url", ""),
             receivers=ld["receivers"],
-        ))
-    return target_configs
+        )
+        key = id(tc) if tc is not None else 0
+        if key not in groups:
+            groups[key] = (tc, [])
+        groups[key][1].append(target_cfg)
+    return list(groups.values())

packages/server/src/notify_bridge_server/commands/handler.py

@@ -25,6 +25,7 @@ from ..database.models import (
     NotificationTracker,
     ServiceProvider,
     TelegramBot,
+    TelegramChat,
 )
 from .base import CommandResponse
 from .parser import parse_command
@@ -483,8 +484,87 @@ async def send_media_group(
         )
 
 
+def _normalize_locale(raw: str | None) -> str:
+    """Mirror the locale normalization used by the message handler."""
+    locale = (raw or "")[:2].lower()
+    if locale not in ("en", "ru"):
+        locale = "en"
+    return locale
+
+
+def _build_command_list(
+    enabled: list[str], templates: dict[str, dict[str, str]], locale: str,
+) -> list[dict[str, str]]:
+    commands: list[dict[str, str]] = []
+    for cmd in enabled:
+        desc = _resolve_template(templates, f"desc_{cmd}", locale) or cmd
+        commands.append({"command": cmd, "description": desc})
+    return commands
+
+
+async def sync_chat_command_binding(bot: TelegramBot, chat: TelegramChat) -> bool:
+    """Push Telegram's per-chat command binding for a single chat.
+
+    Used for immediate refresh when the user toggles a chat's
+    ``language_override`` or ``commands_enabled`` flag — avoids the
+    30 s debounce of the bot-wide sync. Only touches the chat-scoped
+    binding (one Telegram API call); global per-language registrations
+    stay untouched. The bot-wide sync (``register_commands_with_telegram``)
+    remains the source of truth for everything else.
+
+    Returns ``True`` when Telegram acknowledged the change.
+    """
+    from ..services.http_session import get_http_session
+    http = await get_http_session()
+    client = TelegramClient(http, bot.token)
+
+    scope = {"type": "chat", "chat_id": chat.chat_id}
+
+    # Chat is opted out of commands → ensure no chat-scoped override
+    # lingers. Telegram returns ok=true even if there was nothing to
+    # delete, so this is safe to call unconditionally.
+    if not chat.commands_enabled or not chat.language_override:
+        result = await client.delete_my_commands(scope=scope)
+        if not result.get("success"):
+            _LOGGER.warning(
+                "delete_my_commands(immediate) failed bot=%d chat=%s: %s",
+                bot.id, chat.chat_id, result.get("error"),
+            )
+        return bool(result.get("success"))
+
+    # Override active → resolve the command list for this bot in the
+    # override locale and push it scoped to this chat.
+    ctx_tuples, templates_by_config_id = await _resolve_command_context(bot)
+    enabled, _ = _merge_enabled_commands(ctx_tuples)
+    templates = _merge_all_templates(templates_by_config_id)
+    override_locale = _normalize_locale(chat.language_override)
+    commands = _build_command_list(enabled, templates, override_locale)
+
+    result = await client.set_my_commands(commands, scope=scope)
+    if not result.get("success"):
+        _LOGGER.warning(
+            "set_my_commands(immediate) failed bot=%d chat=%s locale=%s: %s",
+            bot.id, chat.chat_id, override_locale, result.get("error"),
+        )
+    return bool(result.get("success"))
+
+
 async def register_commands_with_telegram(bot: TelegramBot) -> bool:
-    """Register enabled commands with Telegram BotFather API via TelegramClient."""
+    """Register enabled commands with Telegram BotFather API via TelegramClient.
+
+    Registration happens at three levels:
+
+    1. Default (no scope, no language) — fallback for any user.
+    2. Per-language (no scope, ``language_code=en|ru``) — Telegram picks
+       based on the *user's* Telegram client language.
+    3. Per-chat (``scope=BotCommandScopeChat``) — when a chat has
+       ``language_override`` set, register chat-scoped commands so the
+       override takes effect regardless of each user's Telegram client
+       language. This is the only level Telegram honors for "this chat
+       should use RU even though the user's Telegram is in EN" — the
+       per-language registration alone is keyed on the client locale,
+       not on any per-chat preference we store.
+    """
     ctx_tuples, templates_by_config_id = await _resolve_command_context(bot)
     enabled, _ = _merge_enabled_commands(ctx_tuples)
     templates = _merge_all_templates(templates_by_config_id)
@@ -494,12 +574,9 @@ async def register_commands_with_telegram(bot: TelegramBot) -> bool:
     client = TelegramClient(http, bot.token)
     success = False
 
-    # Register per-locale commands
+    # Register per-locale commands (keyed on user's Telegram client language)
     for locale in ("en", "ru"):
-        commands = []
-        for cmd in enabled:
-            desc = _resolve_template(templates, f"desc_{cmd}", locale) or cmd
-            commands.append({"command": cmd, "description": desc})
+        commands = _build_command_list(enabled, templates, locale)
         result = await client.set_my_commands(commands, language_code=locale)
         if result.get("success"):
             success = True
@@ -507,13 +584,56 @@ async def register_commands_with_telegram(bot: TelegramBot) -> bool:
             _LOGGER.warning("Failed to register commands for locale '%s': %s", locale, result.get("error"))
 
     # Register default (no language_code) with EN descriptions
-    en_commands = []
-    for cmd in enabled:
-        desc = _resolve_template(templates, f"desc_{cmd}", "en") or cmd
-        en_commands.append({"command": cmd, "description": desc})
+    en_commands = _build_command_list(enabled, templates, "en")
     result = await client.set_my_commands(en_commands)
     if result.get("success"):
         _LOGGER.info("Registered %d commands for bot @%s (all locales)", len(en_commands), bot.bot_username)
         success = True
 
+    # Per-chat overrides: apply chat-scoped commands so language_override
+    # wins over the user's Telegram client language. For chats with
+    # commands enabled but no override, clear any prior chat-scoped
+    # binding so they fall back to the per-language registration above.
+    engine = get_engine()
+    async with AsyncSession(engine) as session:
+        chat_result = await session.exec(
+            select(TelegramChat).where(
+                TelegramChat.bot_id == bot.id,
+                TelegramChat.commands_enabled == True,  # noqa: E712 — SQLModel needs == for column comparison
+            )
+        )
+        chats = list(chat_result.all())
+
+    override_count = 0
+    for chat in chats:
+        scope = {"type": "chat", "chat_id": chat.chat_id}
+        if chat.language_override:
+            override_locale = _normalize_locale(chat.language_override)
+            commands = _build_command_list(enabled, templates, override_locale)
+            result = await client.set_my_commands(commands, scope=scope)
+            if result.get("success"):
+                override_count += 1
+            else:
+                _LOGGER.warning(
+                    "Failed to register chat-scoped commands for bot=%d chat=%s locale=%s: %s",
+                    bot.id, chat.chat_id, override_locale, result.get("error"),
+                )
+        else:
+            # Clear any stale chat-scoped binding from a previous override
+            # so this chat falls back to the per-language registration.
+            # Telegram returns ok=true even when nothing was set; safe to
+            # call unconditionally.
+            result = await client.delete_my_commands(scope=scope)
+            if not result.get("success"):
+                _LOGGER.debug(
+                    "delete_my_commands for bot=%d chat=%s returned: %s",
+                    bot.id, chat.chat_id, result.get("error"),
+                )
+
+    if override_count:
+        _LOGGER.info(
+            "Applied %d per-chat command override(s) for bot @%s",
+            override_count, bot.bot_username,
+        )
+
     return success

packages/server/src/notify_bridge_server/database/migrations.py

@@ -71,11 +71,14 @@ async def migrate_schema(engine: AsyncEngine) -> None:
         tracker_table = "notification_tracker" if await _has_table(conn, "notification_tracker") else "tracker"
 
         if await _has_table(conn, tracker_table):
-            if not await _has_column(conn, tracker_table, "batch_duration"):
+            # NULL default = adaptive polling disabled for existing trackers.
+            # Operators who want the old back-off behavior can set a positive
+            # value per tracker from the UI.
+            if not await _has_column(conn, tracker_table, "adaptive_max_skip"):
                 await conn.execute(
-                    text(f"ALTER TABLE {tracker_table} ADD COLUMN batch_duration INTEGER DEFAULT 0")
+                    text(f"ALTER TABLE {tracker_table} ADD COLUMN adaptive_max_skip INTEGER")
                 )
-                logger.info("Added batch_duration column to %s table", tracker_table)
+                logger.info("Added adaptive_max_skip column to %s table", tracker_table)
 
         # Add enriched fields to event_log if missing
         if await _has_table(conn, "event_log"):
@@ -194,6 +197,21 @@ async def migrate_schema(engine: AsyncEngine) -> None:
                 )
                 logger.info("Added filters column to %s table", tracker_table)
 
+        # Drop legacy batch_duration column from notification_tracker.
+        # The field was removed from the SQLModel class but the column still
+        # exists as NOT NULL in older DBs, so INSERTs from the new code fail
+        # with "NOT NULL constraint failed: notification_tracker.batch_duration".
+        if await _has_table(conn, tracker_table):
+            if await _has_column(conn, tracker_table, "batch_duration"):
+                _assert_ident(tracker_table, "table")
+                await conn.execute(
+                    text(f"ALTER TABLE {tracker_table} DROP COLUMN batch_duration")
+                )
+                logger.info(
+                    "Dropped legacy batch_duration column from %s table",
+                    tracker_table,
+                )
+
         # Add Gitea tracking flags to tracking_config if missing
         if await _has_table(conn, "tracking_config"):
             gitea_flags = [
@@ -1373,6 +1391,40 @@ async def migrate_performance_indexes(engine: AsyncEngine) -> None:
                 )
 
 
+async def migrate_chat_action_to_column(engine: AsyncEngine) -> None:
+    """Move ``chat_action`` from ``config`` JSON to the dedicated column.
+
+    Earlier versions of the frontend stored ``chat_action`` inside
+    ``notification_target.config``; the dedicated ``chat_action`` column
+    was rarely set or held a stale default. The dispatcher's resolver
+    overrode the config value with the (stale) column, so a user's UI
+    choice silently had no effect on outgoing chat actions.
+
+    This backfill takes the config value as authoritative (it's what the
+    UI was writing) and copies it to the column, then strips it from
+    config so the column becomes the single source of truth. Idempotent:
+    a second run finds nothing to migrate.
+    """
+    async with engine.begin() as conn:
+        if not await _has_table(conn, "notification_target"):
+            return
+        if not await _has_column(conn, "notification_target", "chat_action"):
+            return
+        # Copy config["chat_action"] → column where present.
+        await conn.execute(text(
+            "UPDATE notification_target "
+            "SET chat_action = json_extract(config, '$.chat_action') "
+            "WHERE json_extract(config, '$.chat_action') IS NOT NULL"
+        ))
+        # Strip the legacy key so the column is unambiguous going forward.
+        await conn.execute(text(
+            "UPDATE notification_target "
+            "SET config = json_remove(config, '$.chat_action') "
+            "WHERE json_extract(config, '$.chat_action') IS NOT NULL"
+        ))
+        logger.info("Migrated chat_action from config JSON to column where present")
+
+
 # ---------------------------------------------------------------------------
 # Schema version tracking — lightweight alternative to Alembic while the
 # hand-rolled idempotent migrations remain the source of truth. Gives

packages/server/src/notify_bridge_server/database/models.py

@@ -173,7 +173,7 @@ class TrackingConfig(SQLModel, table=True):
     # Asset display
     include_tags: bool = Field(default=True)
     include_asset_details: bool = Field(default=False)
-    max_assets_to_show: int = Field(default=5)
+    max_assets_to_show: int = Field(default=10)
     assets_order_by: str = Field(default="none")
     assets_order: str = Field(default="descending")
 
@@ -320,7 +320,12 @@ class NotificationTracker(SQLModel, table=True):
     collection_ids: list[str] = Field(default_factory=list, sa_column=Column(JSON))
     filters: dict[str, Any] = Field(default_factory=dict, sa_column=Column(JSON))
     scan_interval: int = Field(default=60)
-    batch_duration: int = Field(default=0)  # seconds to accumulate events before dispatch (0=immediate)
+    # Cap on the adaptive-polling skip factor (see services/scheduler.py).
+    # None or 0 disables adaptive back-off entirely — every scheduled tick
+    # runs. Positive values (2..N) enable skipping up to (N-1) out of N ticks
+    # once the tracker has been idle long enough. Per-tracker so an operator
+    # can opt a latency-sensitive tracker out of the global heuristic.
+    adaptive_max_skip: int | None = Field(default=None)
     default_tracking_config_id: int | None = Field(default=None, foreign_key="tracking_config.id")
     default_template_config_id: int | None = Field(default=None, foreign_key="template_config.id")
     enabled: bool = Field(default=True)

packages/server/src/notify_bridge_server/main.py

@@ -75,6 +75,7 @@ async def lifespan(app: FastAPI):
         migrate_notification_slot_locale,
         migrate_user_token_version,
         migrate_performance_indexes,
+        migrate_chat_action_to_column,
         migrate_schema_version,
     )
     from .database.snapshot import snapshot_and_prune
@@ -98,6 +99,7 @@ async def lifespan(app: FastAPI):
     await migrate_notification_slot_locale(engine)
     await migrate_user_token_version(engine)
     await migrate_performance_indexes(engine)
+    await migrate_chat_action_to_column(engine)
     await migrate_schema_version(engine)
     from .database.seeds import seed_all
     await seed_all()

packages/server/src/notify_bridge_server/services/backup_schema.py

@@ -116,7 +116,6 @@ class NotificationTrackerData(BaseModel):
     collection_ids: list[str] = []
     filters: dict[str, Any] = {}
     scan_interval: int = 60
-    batch_duration: int = 0
     default_tracking_config_id: int | None = None
     default_template_config_id: int | None = None
     enabled: bool = True

packages/server/src/notify_bridge_server/services/backup_service.py

@@ -294,7 +294,6 @@ async def export_backup(
                 id=nt.id, provider_id=nt.provider_id, name=nt.name,
                 icon=nt.icon, collection_ids=nt.collection_ids,
                 filters=nt.filters, scan_interval=nt.scan_interval,
-                batch_duration=nt.batch_duration,
                 default_tracking_config_id=nt.default_tracking_config_id,
                 default_template_config_id=nt.default_template_config_id,
                 enabled=nt.enabled, targets=targets,
@@ -733,7 +732,6 @@ async def import_backup(
                 user_id=user_id, provider_id=provider_id,
                 name=name, icon=nt.icon, collection_ids=nt.collection_ids,
                 filters=nt.filters, scan_interval=nt.scan_interval,
-                batch_duration=nt.batch_duration,
                 default_tracking_config_id=_map_id(id_map, "tracking_configs", nt.default_tracking_config_id),
                 default_template_config_id=_map_id(id_map, "template_configs", nt.default_template_config_id),
                 enabled=nt.enabled,

packages/server/src/notify_bridge_server/services/dispatch_helpers.py

@@ -2,15 +2,18 @@
 
 from __future__ import annotations
 
+import dataclasses
 import logging
+import random
 from datetime import datetime, time, timezone
-from typing import Any
+from typing import Any, Callable
 from zoneinfo import ZoneInfo, ZoneInfoNotFoundError
 
 from sqlmodel import select
 from sqlmodel.ext.asyncio.session import AsyncSession
 
 from notify_bridge_core.models.events import ServiceEvent
+from notify_bridge_core.models.media import MediaAsset
 from notify_bridge_core.notifications.receiver import Receiver, build_receiver
 
 from ..database.models import (
@@ -137,6 +140,143 @@ def event_allowed_by_config(
     return flag_map.get(event_type, True)
 
 
+# --- Display-time filters driven by TrackingConfig -------------------------
+#
+# These transform a ServiceEvent so the dispatched notification reflects the
+# user's per-tracker "asset display" preferences. Event-tracking flags (which
+# events fire at all) live in ``event_allowed_by_config`` above; the filters
+# here only reshape an already-allowed event.
+
+# Asset.extra keys stripped when ``include_asset_details=False``. These are
+# the enrichment fields the default templates render as prose (city/country,
+# ⭐ rating, ❤️ favorite). ``thumbhash``/``file_size``/``playback_size``/
+# ``owner_id``/``cache_key`` stay — they are load-bearing for media send and
+# caching, not user-facing prose.
+_ASSET_DETAIL_KEYS: tuple[str, ...] = (
+    "city", "country", "state",
+    "latitude", "longitude",
+    "is_favorite", "rating",
+)
+
+
+def _sort_key_for(order_by: str) -> Callable[[MediaAsset], Any] | None:
+    if order_by == "date":
+        return lambda a: a.created_at
+    if order_by == "name":
+        return lambda a: a.filename.lower()
+    if order_by == "rating":
+        # None ratings sort last regardless of direction.
+        return lambda a: (
+            a.extra.get("rating") is None,
+            a.extra.get("rating") or 0,
+        )
+    return None
+
+
+def _sort_assets(
+    assets: list[MediaAsset],
+    order_by: str,
+    order: str,
+) -> list[MediaAsset]:
+    """Sort MediaAssets by the configured key/direction.
+
+    ``order_by="none"`` preserves the input order (the provider's own
+    ordering, usually detection order). ``"random"`` shuffles in place
+    on a copy so repeated renders of the same event aren't identical.
+    """
+    if order_by in ("none", "") or len(assets) < 2:
+        return list(assets)
+    if order_by == "random":
+        shuffled = list(assets)
+        random.shuffle(shuffled)
+        return shuffled
+    key_fn = _sort_key_for(order_by)
+    if key_fn is None:
+        return list(assets)
+    return sorted(assets, key=key_fn, reverse=(order == "descending"))
+
+
+def _transform_asset(
+    asset: MediaAsset,
+    *,
+    strip_details: bool,
+    strip_tags: bool,
+) -> MediaAsset:
+    """Return a copy of ``asset`` with details and/or tags removed."""
+    new_extra = asset.extra
+    new_description = asset.description
+    new_tags = asset.tags
+    if strip_details:
+        new_extra = {k: v for k, v in asset.extra.items() if k not in _ASSET_DETAIL_KEYS}
+        new_description = None
+    if strip_tags:
+        new_tags = []
+    return dataclasses.replace(
+        asset,
+        description=new_description,
+        tags=list(new_tags) if new_tags is not asset.tags else asset.tags,
+        extra=new_extra,
+    )
+
+
+def apply_tracking_display_filters(
+    event: ServiceEvent,
+    tc: TrackingConfig | None,
+) -> ServiceEvent | None:
+    """Apply per-tracker display preferences to an already-allowed event.
+
+    Semantics:
+      * ``notify_favorites_only`` + ``assets_order_by`` + ``max_assets_to_show``
+        only apply to ``ASSETS_ADDED`` events — the album-change path. Scheduled
+        / periodic / memory events have their own limits and ordering
+        (``scheduled_limit``, ``scheduled_order_by``, etc.), so reapplying the
+        album-change cap would wrongly truncate them.
+      * ``include_tags`` and ``include_asset_details`` apply to every event
+        that carries assets, since they control rendering irrespective of
+        how the assets were selected.
+
+    Returns:
+        A new ``ServiceEvent`` with filters applied, or ``None`` if the event
+        should be dropped entirely (``notify_favorites_only=True`` and none of
+        the added assets are favorites).
+    """
+    if tc is None:
+        return event
+
+    assets = list(event.added_assets)
+    new_added_count = event.added_count
+    is_change_event = event.event_type.value == "assets_added"
+
+    if is_change_event:
+        if tc.notify_favorites_only:
+            assets = [a for a in assets if a.extra.get("is_favorite")]
+            new_added_count = len(assets)
+            if not assets:
+                return None
+        assets = _sort_assets(assets, tc.assets_order_by, tc.assets_order)
+        if tc.max_assets_to_show >= 0:
+            assets = assets[: tc.max_assets_to_show]
+
+    strip_details = not tc.include_asset_details
+    strip_tags = not tc.include_tags
+    if (strip_details or strip_tags) and assets:
+        assets = [
+            _transform_asset(a, strip_details=strip_details, strip_tags=strip_tags)
+            for a in assets
+        ]
+
+    new_extra = event.extra
+    if strip_tags and "people" in event.extra:
+        new_extra = {k: v for k, v in event.extra.items() if k != "people"}
+
+    return dataclasses.replace(
+        event,
+        added_assets=assets,
+        added_count=new_added_count,
+        extra=new_extra,
+    )
+
+
 async def _resolve_target(
     session: AsyncSession,
     target: NotificationTarget,
@@ -186,7 +326,11 @@ async def _resolve_target(
         receivers.append(build_receiver(target.type, dict(r.config), locale))
 
     target_config = dict(target.config)
-    # Inject chat_action for Telegram targets
+    # chat_action lives on the model column — single source of truth.
+    # Strip any legacy/stale value from config so an old config-stored value
+    # can't shadow the user's UI choice. When the column is unset, leave the
+    # key absent so the dispatcher's "typing" fallback applies.
+    target_config.pop("chat_action", None)
     if hasattr(target, 'chat_action') and target.chat_action:
         target_config["chat_action"] = target.chat_action
     # Inject bot credentials for bot-backed target types

packages/server/src/notify_bridge_server/services/manual_dispatch.py

@@ -166,11 +166,25 @@ async def dispatch_test_notification(
         }
 
     # Dispatch each event to the same target (per-album fan-out sends N messages).
+    # Apply display filters so the test notification matches production behavior
+    # for ``favorites_only``, ``include_tags``, ``include_asset_details``, etc.
+    from .dispatch_helpers import apply_tracking_display_filters
+
     url_cache, asset_cache = await _get_telegram_caches()
     dispatcher = NotificationDispatcher(url_cache=url_cache, asset_cache=asset_cache)
     all_results: list[dict[str, Any]] = []
     for event in events:
-        results = await dispatcher.dispatch(event, [target_cfg])
+        shaped_event = apply_tracking_display_filters(event, tracking_config)
+        if shaped_event is None:
+            all_results.append({
+                "success": False,
+                "error": (
+                    "Event suppressed by tracking config (favorites_only is on "
+                    "but no added assets are favorites)."
+                ),
+            })
+            continue
+        results = await dispatcher.dispatch(shaped_event, [target_cfg])
         if results:
             all_results.append(results[0])
 

packages/server/src/notify_bridge_server/services/notifier.py

@@ -43,6 +43,62 @@ def _get_test_message(locale: str, target_type: str) -> str:
     return msgs.get(target_type, msgs.get("webhook", "Test"))
 
 
+def pick_telegram_locale(
+    *,
+    receiver_locale: str = "",
+    chat_override: str = "",
+    chat_language_code: str = "",
+    fallback: str = "en",
+) -> str:
+    """Pick the effective 2-letter locale for a Telegram chat.
+
+    Priority (highest first):
+        1. ``receiver_locale``     — explicit per-receiver override on a target.
+        2. ``chat_override``       — explicit ``TelegramChat.language_override``
+                                     set in the bot/chat manager UI.
+        3. ``chat_language_code``  — Telegram-provided ``language_code``.
+        4. ``fallback``            — caller-supplied default (e.g. query param).
+
+    All inputs are coerced to lowercase 2-letter codes.
+    """
+    for candidate in (receiver_locale, chat_override, chat_language_code, fallback):
+        if candidate:
+            return candidate[:2].lower()
+    return "en"
+
+
+async def resolve_telegram_chat_locale(
+    session: AsyncSession,
+    *,
+    bot_id: int | None,
+    chat_id: str | int | None,
+    receiver: TargetReceiver | None = None,
+    fallback: str = "en",
+) -> str:
+    """Look up a Telegram chat and resolve its effective locale.
+
+    Single source of truth for "what language should I send to this chat in?".
+    Used by every Telegram test/preview path (bot test_chat, target test
+    receiver, per-receiver fan-out) so they stay in lockstep.
+    """
+    from ..database.models import TelegramChat
+
+    chat_row = None
+    if bot_id and chat_id:
+        chat_row = (await session.exec(
+            select(TelegramChat).where(
+                TelegramChat.bot_id == bot_id,
+                TelegramChat.chat_id == str(chat_id),
+            )
+        )).first()
+    return pick_telegram_locale(
+        receiver_locale=getattr(receiver, "locale", "") if receiver else "",
+        chat_override=getattr(chat_row, "language_override", "") if chat_row else "",
+        chat_language_code=getattr(chat_row, "language_code", "") if chat_row else "",
+        fallback=fallback,
+    )
+
+
 async def _load_receivers(target_id: int) -> list[dict]:
     """Load enabled receivers for a target from DB."""
     engine = get_engine()
@@ -343,9 +399,12 @@ async def _send_telegram_test_per_receiver(
         if not recv_rows:
             return {"success": False, "error": "No receivers configured"}
 
-        # Resolve per-receiver locale
+        # Batch-load TelegramChat rows so per-receiver locale picks don't
+        # round-trip the DB N times. Priority resolution then runs through the
+        # shared pick_telegram_locale() helper so single-shot test endpoints
+        # and this fan-out agree on the same rules.
         chat_ids = [str(r.config.get("chat_id", "")) for r in recv_rows if r.config.get("chat_id")]
-        chat_locale_map: dict[str, str] = {}
+        chat_row_map: dict[str, TelegramChat] = {}
         if bot_id and chat_ids:
             chat_rows = (await session.exec(
                 select(TelegramChat).where(
@@ -353,13 +412,7 @@ async def _send_telegram_test_per_receiver(
                     TelegramChat.chat_id.in_(chat_ids),
                 )
             )).all()
-            for chat in chat_rows:
-                override = (
-                    getattr(chat, "language_override", "") or
-                    getattr(chat, "language_code", "") or ""
-                )
-                if override:
-                    chat_locale_map[chat.chat_id] = override[:2].lower()
+            chat_row_map = {chat.chat_id: chat for chat in chat_rows}
 
     http = await get_http_session()
     client = TelegramClient(http, bot_token)
@@ -374,9 +427,14 @@ async def _send_telegram_test_per_receiver(
         chat_id = str(r.config.get("chat_id", ""))
         if not chat_id:
             return None
-        explicit = getattr(r, "locale", "") or ""
-        locale = explicit or chat_locale_map.get(chat_id) or default_locale
-        message = _get_test_message(locale[:2].lower(), "telegram")
+        chat_row = chat_row_map.get(chat_id)
+        locale = pick_telegram_locale(
+            receiver_locale=getattr(r, "locale", "") or "",
+            chat_override=getattr(chat_row, "language_override", "") if chat_row else "",
+            chat_language_code=getattr(chat_row, "language_code", "") if chat_row else "",
+            fallback=default_locale,
+        )
+        message = _get_test_message(locale, "telegram")
         async with sem:
             return await client.send_message(
                 chat_id=chat_id,

packages/server/src/notify_bridge_server/services/scheduled_dispatch.py

@@ -42,6 +42,7 @@ from ..database.models import (
     TrackingConfig,
 )
 from .dispatch_helpers import (
+    apply_tracking_display_filters,
     event_allowed_by_config,
     get_app_timezone,
     load_link_data,
@@ -251,7 +252,9 @@ async def dispatch_scheduled_for_tracker(
         # event_allowed_by_config, which inspects event timestamp. Per-event
         # rebuilding also lets a per-link override disable one kind while
         # keeping others live.
-        target_configs: list[TargetConfig] = []
+        # Group target configs by TrackingConfig identity so each unique TC
+        # gets its own ``apply_tracking_display_filters`` pass before dispatch.
+        groups: dict[int, tuple[TrackingConfig | None, list[TargetConfig]]] = {}
         async with AsyncSession(engine) as session:
             for ld in link_data:
                 tc = ld["tracking_config"] or default_tc
@@ -275,7 +278,7 @@ async def dispatch_scheduled_for_tracker(
                 locale_map = {s.locale: s.template for s in slot_rows}
                 template_slots = {EventType.SCHEDULED_MESSAGE.value: locale_map}
 
-                target_configs.append(TargetConfig(
+                target_cfg = TargetConfig(
                     type=ld["target_type"],
                     config=ld["target_config"],
                     template_slots=template_slots,
@@ -287,20 +290,36 @@ async def dispatch_scheduled_for_tracker(
                     provider_internal_url=provider_config.get("url", ""),
                     provider_external_url=provider_config.get("external_domain", ""),
                     receivers=ld["receivers"],
-                ))
+                )
+                key = id(tc) if tc is not None else 0
+                if key not in groups:
+                    groups[key] = (tc, [])
+                groups[key][1].append(target_cfg)
 
-        if not target_configs:
+        if not groups:
             _LOGGER.info(
                 "Scheduled %s for tracker %d (collection=%r): no targets after filtering",
                 kind, tracker_id, event.collection_name,
             )
             continue
 
+        total_targets = sum(len(tg[1]) for tg in groups.values())
         _LOGGER.info(
-            "Dispatching scheduled %s for tracker %d (collection=%r) to %d link(s)",
-            kind, tracker_id, event.collection_name, len(target_configs),
+            "Dispatching scheduled %s for tracker %d (collection=%r) to %d link(s) across %d group(s)",
+            kind, tracker_id, event.collection_name, total_targets, len(groups),
         )
-        results = await dispatcher.dispatch(event, target_configs)
+        results: list = []
+        dispatched_any = False
+        for tc, target_configs in groups.values():
+            if not target_configs:
+                continue
+            shaped_event = apply_tracking_display_filters(event, tc)
+            if shaped_event is None:
+                continue
+            results.extend(await dispatcher.dispatch(shaped_event, target_configs))
+            dispatched_any = True
+        if not dispatched_any:
+            continue
         any_sent = True
 
         successes = sum(1 for r in results if isinstance(r, dict) and r.get("success"))
@@ -322,7 +341,7 @@ async def dispatch_scheduled_for_tracker(
                     "timezone": app_tz,
                     "collection_mode": collection_mode,
                     "status": "sent",
-                    "targets_dispatched": len(target_configs),
+                    "targets_dispatched": total_targets,
                     "targets_succeeded": successes,
                 },
             ))

packages/server/src/notify_bridge_server/services/scheduler.py

@@ -49,21 +49,44 @@ _scheduler: AsyncIOScheduler | None = None
 # than one tick — but the steady-state HTTP cost for a fleet of idle
 # trackers drops by ~75%.
 #
+# Opt-in per tracker via the ``adaptive_max_skip`` column:
+#   * NULL or 0 → adaptive polling disabled, every tick runs (default)
+#   * 2         → skip at most 1-in-2 ticks after long idle
+#   * 3, 4, ... → up to (N-1)-in-N skipping
 # Thresholds are intentionally conservative: a tracker polling every 30 s
 # needs 5 min of silence before we halve its effective rate, and 15 min
-# before we quarter it. Any caller can disable adaptive behavior by passing
-# ``adaptive=False`` in the tracker filters dict (checked in ``_poll_tracker``).
+# before we quarter it.
 # ---------------------------------------------------------------------------
 
 _ADAPTIVE_HALVE_THRESHOLD = 10      # consecutive empty ticks → 1-in-2
 _ADAPTIVE_QUARTER_THRESHOLD = 30    # consecutive empty ticks → 1-in-4
-_ADAPTIVE_MAX_SKIP = 4              # hard cap on skip factor
 
 # Per-tracker adaptive state, keyed by tracker_id. Rebuilt on process
 # restart — a short warmup period is fine and avoids persisting what is
 # effectively a performance heuristic.
 _adaptive_state: dict[int, dict[str, int]] = {}
 
+# Per-tracker cap on the skip factor, mirrored from the DB column at
+# schedule time. Absence of an entry (or 0) means adaptive polling is off
+# for that tracker — ``_adaptive_should_skip`` returns False immediately.
+_adaptive_max_skip: dict[int, int] = {}
+
+
+def set_adaptive_max_skip(tracker_id: int, max_skip: int | None) -> None:
+    """Register/clear the adaptive cap for a tracker.
+
+    Called by the scheduling helpers so the tick-fast-path in
+    ``_adaptive_should_skip`` doesn't need to re-query the DB. Values ≤ 1
+    disable back-off for the tracker — every scheduled tick runs.
+    """
+    if max_skip and max_skip > 1:
+        _adaptive_max_skip[tracker_id] = int(max_skip)
+    else:
+        _adaptive_max_skip.pop(tracker_id, None)
+    # Opting in/out mid-session should drop any prior counters so the
+    # new behavior applies from the next tick, not N ticks later.
+    _adaptive_state.pop(tracker_id, None)
+
 
 def _compute_jitter(interval_seconds: int) -> int:
     """Return a jitter bound (in seconds) suitable for an IntervalTrigger.
@@ -355,6 +378,8 @@ async def _load_tracker_jobs() -> None:
 
     tz = await _load_app_timezone()
 
+    from notify_bridge_core.providers.capabilities import get_capabilities
+
     for tracker in trackers:
         job_id = f"tracker_{tracker.id}"
         if scheduler.get_job(job_id):
@@ -363,6 +388,18 @@ async def _load_tracker_jobs() -> None:
         ptype = provider_types.get(tracker.provider_id, "")
         filters = tracker.filters or {}
 
+        # Webhook-based providers receive events via inbound HTTP — there is
+        # nothing to poll. Scheduling an interval job for them just wakes up
+        # check_tracker every scan_interval seconds to immediately return,
+        # wasting CPU and DB queries for no work.
+        caps = get_capabilities(ptype) if ptype else None
+        if caps and caps.webhook_based:
+            _LOGGER.debug(
+                "Skipping interval scheduling for webhook tracker %d (%s, type=%s)",
+                tracker.id, tracker.name, ptype,
+            )
+            continue
+
         # Scheduler providers can use cron triggers
         if ptype == "scheduler" and filters.get("schedule_type") == "cron":
             cron_expr = filters.get("cron_expression", "")
@@ -387,9 +424,11 @@ async def _load_tracker_jobs() -> None:
             replace_existing=True,
             max_instances=1,
         )
+        set_adaptive_max_skip(tracker.id, tracker.adaptive_max_skip)
         _LOGGER.info(
-            "Scheduled tracker %d (%s) every %ds (jitter ±%ds)",
+            "Scheduled tracker %d (%s) every %ds (jitter ±%ds, adaptive_max_skip=%s)",
             tracker.id, tracker.name, tracker.scan_interval, jitter,
+            tracker.adaptive_max_skip,
         )
 
 
@@ -425,23 +464,64 @@ def _add_cron_job(
     )
 
 
+async def _is_webhook_tracker(tracker_id: int) -> bool:
+    """Return True iff the tracker's provider type is webhook-based.
+
+    Looks up provider type once via the capabilities registry. Used by
+    ``schedule_tracker`` to short-circuit interval scheduling.
+    """
+    from sqlmodel import select
+    from sqlmodel.ext.asyncio.session import AsyncSession
+    from notify_bridge_core.providers.capabilities import get_capabilities
+    from ..database.engine import get_engine
+    from ..database.models import NotificationTracker, ServiceProvider as ServiceProviderModel
+
+    async with AsyncSession(get_engine()) as session:
+        tracker = await session.get(NotificationTracker, tracker_id)
+        if tracker is None:
+            return False
+        provider = await session.get(ServiceProviderModel, tracker.provider_id)
+        if provider is None:
+            return False
+        caps = get_capabilities(provider.type)
+        return bool(caps and caps.webhook_based)
+
+
 async def schedule_tracker(
     tracker_id: int,
     interval: int,
     cron_expression: str | None = None,
+    adaptive_max_skip: int | None = None,
 ) -> None:
-    """Add or update a scheduler job for a tracker."""
+    """Add or update a scheduler job for a tracker.
+
+    ``adaptive_max_skip`` mirrors the DB column and is registered with the
+    adaptive module-state so tick-time skip decisions don't re-query the DB.
+    Pass ``None`` or ``0`` to disable back-off for the tracker.
+
+    Webhook-based providers receive events via inbound HTTP and have nothing
+    to poll, so this no-ops for them — preventing scan_interval from creating
+    useless wakeups via the API create/update path.
+    """
     scheduler = get_scheduler()
     job_id = f"tracker_{tracker_id}"
 
     # A reschedule typically follows a config edit or enable/disable flip —
     # drop adaptive back-off so the first tick after the change runs promptly.
     reset_adaptive_state(tracker_id)
+    set_adaptive_max_skip(tracker_id, adaptive_max_skip)
 
     # Remove existing job first to allow trigger type changes
     if scheduler.get_job(job_id):
         scheduler.remove_job(job_id)
 
+    # Webhook-based providers don't poll — skip job creation entirely.
+    if await _is_webhook_tracker(tracker_id):
+        _LOGGER.debug(
+            "Skipping interval scheduling for webhook tracker %d", tracker_id,
+        )
+        return
+
     if cron_expression:
         try:
             tz = await _load_app_timezone()
@@ -461,7 +541,8 @@ async def schedule_tracker(
         replace_existing=True,
     )
     _LOGGER.info(
-        "Scheduled tracker %d every %ds (jitter ±%ds)", tracker_id, interval, jitter,
+        "Scheduled tracker %d every %ds (jitter ±%ds, adaptive_max_skip=%s)",
+        tracker_id, interval, jitter, adaptive_max_skip,
     )
 
 
@@ -470,6 +551,7 @@ async def unschedule_tracker(tracker_id: int) -> None:
     scheduler = get_scheduler()
     job_id = f"tracker_{tracker_id}"
     reset_adaptive_state(tracker_id)
+    _adaptive_max_skip.pop(tracker_id, None)
     if scheduler.get_job(job_id):
         scheduler.remove_job(job_id)
         _LOGGER.info("Unscheduled tracker %d", tracker_id)
@@ -478,10 +560,12 @@ async def unschedule_tracker(tracker_id: int) -> None:
 def _adaptive_should_skip(tracker_id: int) -> bool:
     """Return True when the adaptive heuristic says to skip this tick.
 
-    Run-length skip: if we're in 1-in-K mode, skip (K-1) ticks between each
-    real poll. Stateless about the *current* tick counter except for the
-    ``tick_counter`` we bump here.
+    Short-circuits to False for trackers without a registered cap (adaptive
+    off). Otherwise: if we're in 1-in-K mode, skip (K-1) ticks between each
+    real poll.
     """
+    if tracker_id not in _adaptive_max_skip:
+        return False
     state = _adaptive_state.get(tracker_id)
     if not state:
         return False
@@ -494,7 +578,14 @@ def _adaptive_should_skip(tracker_id: int) -> bool:
 
 
 def _adaptive_update(tracker_id: int, events_detected: int) -> None:
-    """Update the adaptive counter after a real tick ran."""
+    """Update the adaptive counter after a real tick ran.
+
+    No-op when the tracker has adaptive polling disabled — otherwise we'd
+    build up empty counters for trackers that will never use them.
+    """
+    cap = _adaptive_max_skip.get(tracker_id)
+    if not cap or cap <= 1:
+        return
     state = _adaptive_state.setdefault(
         tracker_id, {"empty_count": 0, "skip_every": 1, "tick_counter": 0}
     )
@@ -510,20 +601,22 @@ def _adaptive_update(tracker_id: int, events_detected: int) -> None:
         return
 
     state["empty_count"] = state.get("empty_count", 0) + 1
+    target_quarter = min(cap, 4)
     if (
         state["empty_count"] >= _ADAPTIVE_QUARTER_THRESHOLD
-        and state["skip_every"] < _ADAPTIVE_MAX_SKIP
+        and state["skip_every"] < target_quarter
     ):
-        state["skip_every"] = _ADAPTIVE_MAX_SKIP
+        state["skip_every"] = target_quarter
         _LOGGER.info(
-            "Adaptive polling: tracker %d idle for %d ticks, skipping 3 of 4",
+            "Adaptive polling: tracker %d idle for %d ticks, skipping %d of %d",
             tracker_id, state["empty_count"],
+            target_quarter - 1, target_quarter,
         )
     elif (
         state["empty_count"] >= _ADAPTIVE_HALVE_THRESHOLD
-        and state["skip_every"] < 2
+        and state["skip_every"] < min(cap, 2)
     ):
-        state["skip_every"] = 2
+        state["skip_every"] = min(cap, 2)
         _LOGGER.info(
             "Adaptive polling: tracker %d idle for %d ticks, skipping every other",
             tracker_id, state["empty_count"],
@@ -535,7 +628,8 @@ def reset_adaptive_state(tracker_id: int) -> None:
 
     Used by API callers that make changes requiring the tracker to run
     promptly on the next scheduled tick (enable/disable, config edits,
-    manual "check now" actions).
+    manual "check now" actions). Does NOT clear the configured cap — use
+    ``set_adaptive_max_skip(..., None)`` for that.
     """
     _adaptive_state.pop(tracker_id, None)
 

packages/server/src/notify_bridge_server/services/telegram_send.py

@@ -19,7 +19,6 @@ this module just guarantees every caller gets a properly-wired client.
 
 from __future__ import annotations
 
-import asyncio
 import contextlib
 from typing import Any, AsyncIterator, Callable
 
@@ -144,6 +143,4 @@ async def telegram_chat_action(
     try:
         yield
     finally:
-        task.cancel()
-        with contextlib.suppress(asyncio.CancelledError):
-            await task
+        await client.stop_keepalive(task)

packages/server/src/notify_bridge_server/services/watcher.py

@@ -22,6 +22,7 @@ from ..database.models import (
     ServiceProvider,
 )
 from .dispatch_helpers import (
+    apply_tracking_display_filters,
     event_allowed_by_config,
     get_app_timezone,
     load_link_data,
@@ -382,16 +383,18 @@ async def check_tracker(tracker_id: int) -> dict[str, Any]:
                 event.event_type.value, event.collection_name,
                 event.added_count, event.removed_count,
             )
-            target_configs = []
+            # Group targets by tracking-config identity so each unique TC
+            # gets one event-transform pass; targets sharing a TC dispatch
+            # together (preserves the gather-fan-out inside the dispatcher).
+            groups: dict[int, tuple[Any, list[TargetConfig]]] = {}
             for ld in link_data:
-                # Apply per-link event filtering from tracking config
                 tc = ld["tracking_config"]
                 if tc and not event_allowed_by_config(event, tc, app_tz):
                     _LOGGER.info("  Skipped by tracking config filter")
                     continue
 
                 tmpl = ld["template_config"]
-                target_configs.append(TargetConfig(
+                target_cfg = TargetConfig(
                     type=ld["target_type"],
                     config=ld["target_config"],
                     template_slots=ld["template_slots"],
@@ -401,10 +404,22 @@ async def check_tracker(tracker_id: int) -> dict[str, Any]:
                     provider_internal_url=provider_config.get("url", ""),
                     provider_external_url=provider_config.get("external_domain", ""),
                     receivers=ld["receivers"],
-                ))
+                )
+                key = id(tc) if tc is not None else 0
+                if key not in groups:
+                    groups[key] = (tc, [])
+                groups[key][1].append(target_cfg)
 
-            if target_configs:
-                results = await dispatcher.dispatch(event, target_configs)
+            for tc, target_configs in groups.values():
+                if not target_configs:
+                    continue
+                shaped_event = apply_tracking_display_filters(event, tc)
+                if shaped_event is None:
+                    _LOGGER.info(
+                        "  Event suppressed by display filters (favorites_only)",
+                    )
+                    continue
+                results = await dispatcher.dispatch(shaped_event, target_configs)
                 for r in results:
                     if r.get("success"):
                         _LOGGER.info("  Notification sent successfully")