diff --git a/alembic/versions/2026_09_27_settings_status.py b/alembic/versions/2026_09_27_settings_status.py
new file mode 100644
index 000000000..8d78c23b7
--- /dev/null
+++ b/alembic/versions/2026_09_27_settings_status.py
@@ -0,0 +1,52 @@
+"""api_keys test status, notification_channels delivery status, proxies without mode
+
+Revision ID: 5d2e9a8c1b47
+Revises: a1f4c7d20e93
+Create Date: 2026-09-27
+"""
+
+from collections.abc import Sequence
+
+import sqlalchemy as sa
+
+from alembic import op
+
+revision: str = "5d2e9a8c1b47"
+down_revision: str | None = "a1f4c7d20e93"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "api_keys", sa.Column("last_test_at", sa.DateTime(timezone=True), nullable=True)
+    )
+    op.add_column("api_keys", sa.Column("last_test_ok", sa.Boolean(), nullable=True))
+    op.add_column(
+        "api_keys", sa.Column("last_test_message", sa.String(length=500), nullable=True)
+    )
+    op.add_column(
+        "notification_channels",
+        sa.Column("last_sent_at", sa.DateTime(timezone=True), nullable=True),
+    )
+    op.add_column(
+        "notification_channels", sa.Column("last_sent_ok", sa.Boolean(), nullable=True)
+    )
+    op.add_column(
+        "notification_channels",
+        sa.Column("last_sent_message", sa.String(length=500), nullable=True),
+    )
+    op.drop_column("proxies", "mode")
+
+
+def downgrade() -> None:
+    op.add_column(
+        "proxies",
+        sa.Column("mode", sa.String(), nullable=False, server_default="single"),
+    )
+    op.drop_column("notification_channels", "last_sent_message")
+    op.drop_column("notification_channels", "last_sent_ok")
+    op.drop_column("notification_channels", "last_sent_at")
+    op.drop_column("api_keys", "last_test_message")
+    op.drop_column("api_keys", "last_test_ok")
+    op.drop_column("api_keys", "last_test_at")
diff --git a/api/app/api/v1/api_keys.py b/api/app/api/v1/api_keys.py
index defece03e..89976559d 100644
--- a/api/app/api/v1/api_keys.py
+++ b/api/app/api/v1/api_keys.py
@@ -89,7 +89,11 @@ async def list_providers(
     _current_user: CurrentSuperuser,
     service: Annotated[APIKeyService, Depends(get_api_key_service)],
 ):
-    return await service.list_providers()
+    providers = await service.list_providers()
+    return [
+        p.model_copy(update={"testable": p.provider in API_KEY_TESTERS})
+        for p in providers
+    ]
 
 
 @router.get("", response_model=list[APIKeyRead])
@@ -161,13 +165,15 @@ async def test_api_key(
         return {
             "provider": api_key.provider,
             "success": False,
-            "message": f"No test available for {api_key.provider.value}",
+            "message": f"No key test for {api_key.provider.value}.",
         }
 
     key_value = try_decrypt(api_key.key_value) or api_key.key_value
     try:
         result = await tester(key_value, api_key.key_meta)
-        return {"provider": api_key.provider, "success": True, **result}
     except Exception as e:
         message = str(e).replace(key_value, MASK) if key_value else str(e)
+        await service.record_test(api_key, False, message)
         return {"provider": api_key.provider, "success": False, "message": message}
+    await service.record_test(api_key, True, result.get("message", ""))
+    return {"provider": api_key.provider, "success": True, **result}
diff --git a/api/app/api/v1/users.py b/api/app/api/v1/users.py
index 9b1014ff6..509ca1f7f 100644
--- a/api/app/api/v1/users.py
+++ b/api/app/api/v1/users.py
@@ -2,12 +2,21 @@ from typing import Annotated
 from uuid import UUID
 
 from fastapi import APIRouter, Depends, HTTPException, Query, status
+from sqlalchemy.exc import IntegrityError
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlmodel import select
 
 from app.api.deps import CurrentSuperuser, CurrentUser
 from app.core.database import get_session
-from shared.models.user import User, UserRead, UserSummary
+from app.core.security import hash_password
+from app.utils.validation import validate_password_strength, validate_username
+from shared.models.user import (
+    User,
+    UserAdminCreate,
+    UserAdminUpdate,
+    UserRead,
+    UserSummary,
+)
 
 router = APIRouter(prefix="/users", tags=["users"])
 
@@ -34,11 +43,78 @@ async def list_users(
     skip: Annotated[int, Query(ge=0, le=1_000_000)] = 0,
     limit: Annotated[int, Query(ge=1, le=500)] = 100,
 ):
-    query = select(User).offset(skip).limit(limit)
+    query = select(User).order_by(User.created_at).offset(skip).limit(limit)
     result = await session.execute(query)
     return result.scalars().all()
 
 
+@router.post("", response_model=UserRead, status_code=status.HTTP_201_CREATED)
+async def create_user(
+    data: UserAdminCreate,
+    session: Annotated[AsyncSession, Depends(get_session)],
+    current_user: CurrentSuperuser,  # noqa: ARG001
+):
+    username = data.username.strip()
+    email = data.email.strip().lower()
+    try:
+        validate_username(username)
+        validate_password_strength(data.password, user_inputs=[email, username])
+    except ValueError as e:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail=str(e)
+        ) from e
+    if "@" not in email:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Enter a valid email address.",
+        )
+    taken = await session.scalar(
+        select(User).where((User.email == email) | (User.username == username))
+    )
+    if taken is not None:
+        field = "email" if taken.email == email else "username"
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT,
+            detail=f"A user with this {field} exists.",
+        )
+    user = User(
+        email=email,
+        username=username,
+        hashed_password=hash_password(data.password),
+        is_superuser=data.is_superuser,
+    )
+    session.add(user)
+    await session.commit()
+    await session.refresh(user)
+    return user
+
+
+@router.patch("/{user_id}", response_model=UserRead)
+async def update_user(
+    user_id: UUID,
+    data: UserAdminUpdate,
+    session: Annotated[AsyncSession, Depends(get_session)],
+    current_user: CurrentSuperuser,
+):
+    if user_id == current_user.id:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="The signed-in account cannot change its own role or status.",
+        )
+    user = await session.get(User, user_id)
+    if user is None:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND, detail="User not found"
+        )
+    if data.is_active is not None:
+        user.is_active = data.is_active
+    if data.is_superuser is not None:
+        user.is_superuser = data.is_superuser
+    await session.commit()
+    await session.refresh(user)
+    return user
+
+
 @router.get("/{user_id}", response_model=UserRead)
 async def get_user(
     user_id: str,
@@ -94,7 +170,15 @@ async def delete_user(
             detail="User not found",
         )
 
+    username = user.username
     await session.delete(user)
-    await session.commit()
+    try:
+        await session.commit()
+    except IntegrityError as e:
+        await session.rollback()
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT,
+            detail=f"{username} created records on this instance. Disable the account instead.",
+        ) from e
 
-    return {"message": f"User {user.username} deleted"}
+    return {"message": f"User {username} deleted"}
diff --git a/api/app/services/instance_settings.py b/api/app/services/instance_settings.py
index 62e1a509e..f3cb29fa8 100644
--- a/api/app/services/instance_settings.py
+++ b/api/app/services/instance_settings.py
@@ -9,6 +9,11 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.core.crypto import encrypt_secret, try_decrypt
 from shared.definitions.mode_features import VALID_MODES, capabilities_for
+from shared.definitions.retention import (
+    KEEP_FOREVER,
+    SCAN_RETENTION_DAYS,
+    SCREENSHOT_RETENTION_DAYS,
+)
 from shared.enums.instance import AIProvider
 from shared.http import get_async_client
 from shared.logging import get_logger
@@ -65,6 +70,15 @@ async def _admit_on_change(changed: bool) -> None:
         logger.warning("scan admission dispatch failed", exc_info=True)
 
 
+def _check_window(label: str, days: int, allowed: tuple[int, ...]) -> None:
+    if days not in allowed:
+        choices = ", ".join(str(d) for d in allowed if d != KEEP_FOREVER)
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"{label} retention must be {choices} days, or {KEEP_FOREVER} to keep forever.",
+        )
+
+
 class InstanceSettingsService:
     def __init__(self, session: AsyncSession):
         self.session = session
@@ -124,7 +138,13 @@ class InstanceSettingsService:
         settings = await self.get_or_create()
 
         if data.instance_name is not None:
-            settings.instance_name = data.instance_name
+            name = data.instance_name.strip()
+            if not name:
+                raise HTTPException(
+                    status_code=status.HTTP_400_BAD_REQUEST,
+                    detail="Instance name is required.",
+                )
+            settings.instance_name = name[:120]
         if data.timezone is not None:
             try:
                 ZoneInfo(data.timezone)
@@ -140,8 +160,16 @@ class InstanceSettingsService:
                 raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=msg)
             settings.mode = data.mode
         if data.scan_history_retention_days is not None:
+            _check_window(
+                "Scan history", data.scan_history_retention_days, SCAN_RETENTION_DAYS
+            )
             settings.scan_history_retention_days = data.scan_history_retention_days
         if data.screenshot_retention_days is not None:
+            _check_window(
+                "Screenshot",
+                data.screenshot_retention_days,
+                SCREENSHOT_RETENTION_DAYS,
+            )
             settings.screenshot_retention_days = data.screenshot_retention_days
         if data.cert_recheck_enabled is not None:
             settings.cert_recheck_enabled = data.cert_recheck_enabled
diff --git a/api/app/services/notification_channel.py b/api/app/services/notification_channel.py
index 5bb7b8970..88e405b93 100644
--- a/api/app/services/notification_channel.py
+++ b/api/app/services/notification_channel.py
@@ -152,6 +152,9 @@ def _to_read(channel: NotificationChannel) -> NotificationChannelRead:
         last_test_at=channel.last_test_at,
         last_test_ok=channel.last_test_ok,
         last_test_message=channel.last_test_message,
+        last_sent_at=channel.last_sent_at,
+        last_sent_ok=channel.last_sent_ok,
+        last_sent_message=channel.last_sent_message,
     )
 
 
diff --git a/api/app/services/proxy.py b/api/app/services/proxy.py
index f2c7e4082..c6a740f28 100644
--- a/api/app/services/proxy.py
+++ b/api/app/services/proxy.py
@@ -7,13 +7,12 @@ from uuid import UUID
 
 import httpx
 from fastapi import HTTPException, status
-from sqlalchemy import select, text, update
+from sqlalchemy import func, select, text, update
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.core.crypto import encrypt_secret
 from shared.http import get_async_client
 from shared.models.proxy import (
-    PROXY_MODES,
     PROXY_SCHEMES,
     Proxy,
     ProxyCreate,
@@ -23,6 +22,7 @@ from shared.models.proxy import (
     ProxyTestResult,
     ProxyUpdate,
 )
+from shared.models.scan_context import ScanContext
 from shared.services.proxy_resolve import (
     build_proxy_url as _build_url,
 )
@@ -42,18 +42,13 @@ _TCP_TIMEOUT = 6.0
 _MIN_PORT = 1
 _MAX_PORT = 65535
 _DEFAULT_LOCK_KEY = 0x70726F78
+_MAX_TESTED = 10
 
 
 def _bad(detail: str) -> HTTPException:
     return HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=detail)
 
 
-def _validate_mode(mode: str) -> None:
-    if mode not in PROXY_MODES:
-        msg = f"Invalid mode. Must be one of {', '.join(PROXY_MODES)}."
-        raise _bad(msg)
-
-
 def _validate_endpoints(endpoints: list[ProxyEndpoint]) -> None:
     if not endpoints:
         msg = "At least one endpoint is required."
@@ -77,10 +72,11 @@ def _endpoint_key(ep: ProxyEndpoint) -> tuple:
 
 
 def _mask_url(ep: ProxyEndpoint) -> str:
+    authority = host_port(ep.host, ep.port)
     if ep.username:
         cred = f"{ep.username}:{MASK}@" if ep.password else f"{ep.username}@"
-        return f"{ep.scheme}://{cred}{ep.host}:{ep.port}"
-    return f"{ep.scheme}://{ep.host}:{ep.port}"
+        return f"{ep.scheme}://{cred}{authority}"
+    return f"{ep.scheme}://{authority}"
 
 
 def _endpoint_to_read(ep: ProxyEndpoint) -> ProxyEndpointRead:
@@ -99,21 +95,46 @@ def _encrypt_endpoints(endpoints: list[ProxyEndpoint]) -> str:
     return encrypt_secret(json.dumps(payload))
 
 
+def _summarize(
+    endpoints: list[ProxyEndpoint], results: list[ProxyTestResult]
+) -> ProxyTestResult:
+    if len(results) == 1:
+        return results[0]
+    passed = [r for r in results if r.success]
+    if len(passed) == len(results):
+        return ProxyTestResult(
+            success=True,
+            message=f"All {len(results)} endpoints carried the request.",
+            latency_ms=max(r.latency_ms or 0 for r in passed),
+            reachable=True,
+        )
+    failed = next(i for i, r in enumerate(results) if not r.success)
+    ep = endpoints[failed]
+    return ProxyTestResult(
+        success=False,
+        message=(
+            f"{len(passed)} of {len(results)} endpoints carried the request. "
+            f"{host_port(ep.host, ep.port)}: {results[failed].message}"
+        ),
+        reachable=all(r.reachable for r in results),
+    )
+
+
 class ProxyService:
     def __init__(self, session: AsyncSession):
         self.session = session
 
-    def to_read(self, proxy: Proxy) -> ProxyRead:
+    def to_read(self, proxy: Proxy, contexts: int = 0) -> ProxyRead:
         endpoints = _load_endpoints(proxy)
         return ProxyRead(
             id=proxy.id,
             name=proxy.name,
             description=proxy.description,
-            mode=proxy.mode,
             is_active=proxy.is_active,
             is_default=proxy.is_default,
             endpoints=[_endpoint_to_read(e) for e in endpoints],
             endpoint_count=proxy.endpoint_count,
+            contexts=contexts,
             created_at=proxy.created_at,
             updated_at=proxy.updated_at,
             last_test_at=proxy.last_test_at,
@@ -121,24 +142,37 @@ class ProxyService:
             last_test_message=proxy.last_test_message,
         )
 
+    async def _read(self, proxy: Proxy) -> ProxyRead:
+        used = await self.session.scalar(
+            select(func.count()).where(ScanContext.proxy_id == proxy.id)
+        )
+        return self.to_read(proxy, int(used or 0))
+
     async def list(self) -> list[ProxyRead]:
         result = await self.session.execute(
             select(Proxy).order_by(Proxy.is_default.desc(), Proxy.updated_at.desc())
         )
-        return [self.to_read(p) for p in result.scalars().all()]
+        used = dict(
+            (
+                await self.session.execute(
+                    select(ScanContext.proxy_id, func.count())
+                    .where(ScanContext.proxy_id.is_not(None))
+                    .group_by(ScanContext.proxy_id)
+                )
+            ).all()
+        )
+        return [self.to_read(p, used.get(p.id, 0)) for p in result.scalars().all()]
 
     async def get(self, id: UUID) -> ProxyRead:
         proxy = await self._get_or_404(id)
-        return self.to_read(proxy)
+        return await self._read(proxy)
 
     async def create(self, data: ProxyCreate, created_by: UUID) -> ProxyRead:
-        _validate_mode(data.mode)
         _validate_endpoints(data.endpoints)
 
         proxy = Proxy(
             name=data.name,
             description=data.description,
-            mode=data.mode,
             is_active=data.is_active,
             is_default=data.is_default,
             endpoints_encrypted=_encrypt_endpoints(data.endpoints),
@@ -151,7 +185,7 @@ class ProxyService:
             await self._unset_other_defaults(proxy.id)
         await self.session.commit()
         await self.session.refresh(proxy)
-        return self.to_read(proxy)
+        return await self._read(proxy)
 
     async def update(self, id: UUID, data: ProxyUpdate) -> ProxyRead:
         proxy = await self._get_or_404(id)
@@ -160,9 +194,6 @@ class ProxyService:
             proxy.name = data.name
         if data.description is not None:
             proxy.description = data.description
-        if data.mode is not None:
-            _validate_mode(data.mode)
-            proxy.mode = data.mode
         if data.is_active is not None:
             proxy.is_active = data.is_active
 
@@ -181,10 +212,15 @@ class ProxyService:
             await self._unset_other_defaults(proxy.id)
         await self.session.commit()
         await self.session.refresh(proxy)
-        return self.to_read(proxy)
+        return await self._read(proxy)
 
     async def delete(self, id: UUID) -> bool:
         proxy = await self._get_or_404(id)
+        await self.session.execute(
+            update(ScanContext)
+            .where(ScanContext.proxy_id == proxy.id)
+            .values(proxy_id=None)
+        )
         await self.session.delete(proxy)
         await self.session.commit()
         return True
@@ -197,7 +233,7 @@ class ProxyService:
         proxy.updated_at = utc_now()
         await self.session.commit()
         await self.session.refresh(proxy)
-        return self.to_read(proxy)
+        return await self._read(proxy)
 
     async def test(self, id: UUID) -> ProxyTestResult:
         proxy = await self._get_or_404(id)
@@ -208,14 +244,27 @@ class ProxyService:
                 ProxyTestResult(success=False, message="No endpoints configured."),
             )
 
-        ep = endpoints[0]
-        url = _build_url(ep)
-        result = await self._probe(ep, url)
-        return await self._persist_test(proxy, result)
+        tested = endpoints[:_MAX_TESTED]
+        results = await asyncio.gather(
+            *(self._probe(ep, _build_url(ep)) for ep in tested)
+        )
+        return await self._persist_test(proxy, _summarize(tested, results))
 
-    async def resolve_proxy_url(self, proxy_id: UUID) -> str | None:
-        proxy = await self.session.get(Proxy, proxy_id)
-        return _resolve_proxy_url(proxy)
+    async def scan_proxy(self, context: ScanContext | None) -> Proxy | None:
+        """The context's proxy, or the default proxy for a scan without a context."""
+        if context is None:
+            result = await self.session.execute(
+                select(Proxy).where(
+                    Proxy.is_default.is_(True), Proxy.is_active.is_(True)
+                )
+            )
+            return result.scalars().first()
+        if context.proxy_id is None:
+            return None
+        return await self.session.get(Proxy, context.proxy_id)
+
+    async def scan_proxy_url(self, context: ScanContext | None) -> str | None:
+        return _resolve_proxy_url(await self.scan_proxy(context))
 
     def _merge_endpoints(
         self, proxy: Proxy, incoming: list[ProxyEndpoint]
diff --git a/api/app/services/scan.py b/api/app/services/scan.py
index 6e1d14940..bab406417 100644
--- a/api/app/services/scan.py
+++ b/api/app/services/scan.py
@@ -321,11 +321,7 @@ class ScanService:
         if context_id is not None:
             context = await self._get_context(context_id, project_id)
 
-        proxy_url = None
-        if context is not None and context.proxy_id is not None:
-            proxy_url = await ProxyService(self.session).resolve_proxy_url(
-                context.proxy_id
-            )
+        proxy_url = await ProxyService(self.session).scan_proxy_url(context)
         return engine, context, proxy_url
 
     @staticmethod
@@ -477,14 +473,8 @@ class ScanService:
             h.get("name") for h in (extra_headers or []) if h.get("name")
         ]
 
-        proxy_name = None
-        if context is not None and context.proxy_id is not None:
-            try:
-                proxy_name = (
-                    await ProxyService(self.session).get(context.proxy_id)
-                ).name
-            except HTTPException:
-                proxy_name = None
+        proxy = await ProxyService(self.session).scan_proxy(context)
+        proxy_name = proxy.name if proxy is not None and proxy.is_active else None
 
         summary = PreviewSummary(
             auth_summary=_auth_summary(auth, extra_headers),
diff --git a/api/app/services/vuln_template.py b/api/app/services/vuln_template.py
index 32b4869e5..ea9bf02b5 100644
--- a/api/app/services/vuln_template.py
+++ b/api/app/services/vuln_template.py
@@ -215,9 +215,13 @@ class VulnTemplateService:
         fired = await self.session.scalar(
             select(func.count(func.distinct(Vulnerability.template_id)))
         )
+        callback = await self.session.scalar(
+            select(func.count(VulnTemplate.id)).where(VulnTemplate.needs_oast.is_(True))
+        )
         return TemplateLibraryStats(
             ready=total > 0,
             total=total,
+            callback=int(callback or 0),
             official=by_origin.get(TemplateOrigin.OFFICIAL.value, 0),
             custom=by_origin.get(TemplateOrigin.CUSTOM.value, 0),
             by_severity=[
@@ -274,6 +278,8 @@ class VulnTemplateService:
         )
         if f.fired:
             query = query.where(hits.c.findings > 0)
+        if f.callback:
+            query = query.where(VulnTemplate.needs_oast.is_(True))
         if f.new_since is not None:
             query = query.where(
                 VulnTemplate.origin == TemplateOrigin.OFFICIAL.value,
diff --git a/frontend/src/lib/api/users.ts b/frontend/src/lib/api/users.ts
index 5c0df0887..f1e7d8117 100644
--- a/frontend/src/lib/api/users.ts
+++ b/frontend/src/lib/api/users.ts
@@ -12,6 +12,19 @@ export interface UserAccount {
 	is_active: boolean;
 	is_superuser: boolean;
 	totp_enabled: boolean;
+	created_at: string;
+}
+
+export interface UserAccountCreate {
+	username: string;
+	email: string;
+	password: string;
+	is_superuser: boolean;
+}
+
+export interface UserAccountUpdate {
+	is_active?: boolean;
+	is_superuser?: boolean;
 }
 
 const cache = new Map<string, Promise<UserSummary>>();
@@ -21,6 +34,18 @@ export const usersApi = {
 		return api.get<UserAccount[]>('/users?limit=500');
 	},
 
+	create(data: UserAccountCreate): Promise<UserAccount> {
+		return api.post<UserAccount>('/users', data);
+	},
+
+	update(userId: string, data: UserAccountUpdate): Promise<UserAccount> {
+		return api.patch<UserAccount>(`/users/${userId}`, data);
+	},
+
+	remove(userId: string): Promise<void> {
+		return api.delete(`/users/${userId}`);
+	},
+
 	getSummary(userId: string): Promise<UserSummary> {
 		const cached = cache.get(userId);
 		if (cached) return cached;
diff --git a/frontend/src/lib/components/arsenal/callback-server-sheet.svelte b/frontend/src/lib/components/arsenal/callback-server-sheet.svelte
new file mode 100644
index 000000000..3c8b07476
--- /dev/null
+++ b/frontend/src/lib/components/arsenal/callback-server-sheet.svelte
@@ -0,0 +1,334 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import CircleXIcon from '@lucide/svelte/icons/circle-x';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
+	import LoadingButton from '$lib/components/loading-button.svelte';
+	import { oastApi } from '$lib/api/oast';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { ROUTES } from '$lib/config/routes';
+	import {
+		CALLBACK_SERVER,
+		DEFAULT_WAIT_SECONDS,
+		OAST_MODES,
+		OAST_MODE_HELP,
+		OAST_MODE_LABELS,
+		OastMode,
+		PUBLIC_ACK,
+		WAIT_STEPS
+	} from '$lib/config/oast';
+	import { relativeTime } from '$lib/utilities/dates';
+	import type { OastRead, OastTest } from '$lib/types/oast';
+
+	interface Props {
+		open: boolean;
+		settings: OastRead | null;
+		onSaved: (row: OastRead) => void;
+	}
+
+	let { open = $bindable(), settings, onSaved }: Props = $props();
+
+	const LABEL = 'text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase';
+
+	let mode = $state<OastMode>(OastMode.OFF);
+	let server = $state('');
+	let wait = $state(0);
+	let acknowledged = $state(false);
+	let serverError = $state<string | null>(null);
+	let saving = $state(false);
+	let testing = $state(false);
+	let result = $state<OastTest | null>(null);
+	let resetOpen = $state(false);
+	let resetting = $state(false);
+
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const dirty = $derived(
+		!!settings &&
+			(mode !== settings.mode ||
+				server.trim() !== (settings.server ?? '') ||
+				wait !== settings.wait_seconds ||
+				acknowledged !== settings.public_acknowledged)
+	);
+	const blocked = $derived(
+		mode === OastMode.SELF_HOSTED && !server.trim()
+			? 'Server domain not set'
+			: mode === OastMode.PUBLIC && !acknowledged
+				? 'Public server not accepted'
+				: null
+	);
+	const canTest = $derived(
+		!!settings && settings.mode !== OastMode.OFF && !settings.reason && !dirty
+	);
+	const canReset = $derived(
+		!!settings &&
+			(settings.mode !== OastMode.OFF ||
+				!!settings.server ||
+				settings.token_set ||
+				settings.public_acknowledged ||
+				settings.wait_seconds !== DEFAULT_WAIT_SECONDS)
+	);
+
+	$effect(() => {
+		if (open && settings) {
+			mode = settings.mode as OastMode;
+			server = settings.server ?? '';
+			wait = settings.wait_seconds;
+			acknowledged = settings.public_acknowledged;
+			serverError = null;
+			result = null;
+		}
+	});
+
+	function waitLabel(seconds: number): string {
+		if (seconds === 0) return 'No wait';
+		if (seconds < 60) return `${seconds} seconds`;
+		const minutes = seconds / 60;
+		return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
+	}
+
+	async function save() {
+		saving = true;
+		try {
+			const row = await oastApi.update({
+				mode,
+				server: server.trim(),
+				wait_seconds: wait,
+				public_acknowledged: acknowledged
+			});
+			onSaved(row);
+			result = null;
+			toast.success(`${CALLBACK_SERVER} saved`);
+		} catch (e) {
+			const message = e instanceof Error ? e.message : `${CALLBACK_SERVER} not saved`;
+			if (mode === OastMode.SELF_HOSTED) serverError = message;
+			else toast.error(message);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function test() {
+		testing = true;
+		try {
+			result = await oastApi.test();
+		} catch (e) {
+			result = {
+				ok: false,
+				detail: e instanceof Error ? e.message : 'Request failed.',
+				address: null,
+				status_code: null
+			};
+		} finally {
+			testing = false;
+		}
+	}
+
+	async function reset() {
+		resetting = true;
+		try {
+			const row = await oastApi.reset();
+			onSaved(row);
+			resetOpen = false;
+			toast.success(`${CALLBACK_SERVER} reset`);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : `${CALLBACK_SERVER} not reset`);
+		} finally {
+			resetting = false;
+		}
+	}
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Content side="right" class="flex w-full flex-col gap-0 p-0 sm:max-w-md">
+		<Sheet.Header class="border-b px-5 py-4">
+			<Sheet.Title>{CALLBACK_SERVER}</Sheet.Title>
+			{#if settings}
+				<Sheet.Description class="tabular-nums">
+					{settings.checks.toLocaleString()} checks need a callback
+				</Sheet.Description>
+			{/if}
+		</Sheet.Header>
+
+		{#if settings}
+			<ScrollArea class="min-h-0 flex-1">
+				<div class="flex flex-col divide-y px-5">
+					<section class="flex flex-col gap-2.5 py-5">
+						<h3 class={LABEL}>Mode</h3>
+						<ToggleGroup.Root
+							type="single"
+							variant="outline"
+							value={mode}
+							onValueChange={(v) => v && (mode = v as OastMode)}
+							disabled={!isAdmin || saving}
+							class="w-fit"
+							aria-label="Mode"
+						>
+							{#each OAST_MODES as option (option)}
+								<ToggleGroup.Item value={option} class="h-9 px-3 text-sm font-normal">
+									{OAST_MODE_LABELS[option]}
+								</ToggleGroup.Item>
+							{/each}
+						</ToggleGroup.Root>
+						{#if mode !== OastMode.PUBLIC}
+							<p class="text-xs text-muted-foreground">{OAST_MODE_HELP[mode]}</p>
+						{/if}
+						{#if settings.reason && settings.mode !== OastMode.OFF && !dirty}
+							<p class="text-xs text-warning">{settings.reason}</p>
+						{/if}
+					</section>
+
+					{#if mode === OastMode.SELF_HOSTED}
+						<section class="flex flex-col gap-2.5 py-5">
+							<h3 class={LABEL}>Server</h3>
+							<Input
+								placeholder="oast.example.com"
+								bind:value={server}
+								oninput={() => (serverError = null)}
+								autocomplete="off"
+								spellcheck={false}
+								disabled={!isAdmin || saving}
+								aria-label="Server domain"
+								aria-invalid={serverError ? true : undefined}
+								class="font-mono text-xs"
+							/>
+							{#if serverError}
+								<p class="text-xs text-destructive">{serverError}</p>
+							{/if}
+							<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+								<span class="text-muted-foreground">Token</span>
+								<span>{settings.token_set ? 'Set' : 'Not set'}</span>
+								<a
+									href={ROUTES.settings('api-keys')}
+									class="text-primary transition-colors hover:text-foreground"
+								>
+									API keys
+								</a>
+							</div>
+						</section>
+					{/if}
+
+					{#if mode === OastMode.PUBLIC}
+						<section class="flex flex-col gap-2.5 py-5">
+							<h3 class={LABEL}>Public server</h3>
+							<div class="flex items-start gap-2 text-xs">
+								<TriangleAlertIcon class="mt-px size-3.5 shrink-0 text-warning" />
+								<span>{PUBLIC_ACK}</span>
+							</div>
+							<label class="flex w-fit cursor-pointer items-center gap-2 text-sm" for="oast-ack">
+								<Checkbox
+									id="oast-ack"
+									checked={acknowledged}
+									disabled={!isAdmin || saving}
+									onCheckedChange={(v) => (acknowledged = v === true)}
+								/>
+								Accepted for every scan
+							</label>
+							<p class="font-mono text-2xs text-muted-foreground">
+								{settings.public_servers.join(' · ')}
+							</p>
+						</section>
+					{/if}
+
+					{#if mode !== OastMode.OFF}
+						<section class="flex flex-col gap-2.5 py-5">
+							<h3 class={LABEL}>Wait after each out-of-band batch</h3>
+							<Select.Root
+								type="single"
+								value={String(wait)}
+								onValueChange={(v) => v !== undefined && (wait = Number(v))}
+								disabled={!isAdmin || saving}
+							>
+								<Select.Trigger class="h-9 w-44" aria-label="Wait">
+									{waitLabel(wait)}
+								</Select.Trigger>
+								<Select.Content>
+									{#each WAIT_STEPS as step (step)}
+										<Select.Item value={String(step)} label={waitLabel(step)}>
+											{waitLabel(step)}
+										</Select.Item>
+									{/each}
+								</Select.Content>
+							</Select.Root>
+						</section>
+					{/if}
+
+					{#if result && !dirty}
+						<section class="flex items-start gap-2 py-4 text-sm">
+							{#if result.ok}
+								<CheckIcon class="mt-0.5 size-4 shrink-0 text-success" />
+							{:else}
+								<CircleXIcon class="mt-0.5 size-4 shrink-0 text-destructive" />
+							{/if}
+							<span class="wrap-anywhere">{result.detail}</span>
+						</section>
+					{/if}
+
+					{#if settings.interactions > 0}
+						<section class="py-4 text-xs text-muted-foreground tabular-nums">
+							{settings.interactions.toLocaleString()}
+							{settings.interactions === 1 ? 'finding' : 'findings'} with a callback
+							{#if settings.last_interaction_at}
+								· most recent {relativeTime(settings.last_interaction_at)}
+							{/if}
+						</section>
+					{/if}
+				</div>
+			</ScrollArea>
+
+			<div class="flex flex-wrap items-center gap-2 border-t px-5 py-3">
+				<LoadingButton
+					loading={saving}
+					loadingLabel="Saving"
+					disabled={!isAdmin || !dirty || !!blocked}
+					onclick={save}
+				>
+					Save
+				</LoadingButton>
+				<LoadingButton
+					variant="outline"
+					loading={testing}
+					loadingLabel="Testing"
+					disabled={!isAdmin || !canTest}
+					onclick={test}
+				>
+					Test server
+				</LoadingButton>
+				<span class="flex-1"></span>
+				<Button
+					variant="ghost"
+					class="text-muted-foreground"
+					disabled={!isAdmin || !canReset}
+					onclick={() => (resetOpen = true)}
+				>
+					Reset
+				</Button>
+			</div>
+			{#if blocked && dirty}
+				<p class="border-t px-5 py-2.5 text-xs text-muted-foreground">{blocked}</p>
+			{:else if !isAdmin}
+				<p class="border-t px-5 py-2.5 text-xs text-muted-foreground">
+					Editable by administrators.
+				</p>
+			{/if}
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>
+
+<ConfirmDialog
+	open={resetOpen}
+	title="Reset {CALLBACK_SERVER.toLowerCase()}"
+	description="The server, the token and the public-server acceptance are removed."
+	confirmLabel="Reset"
+	destructive
+	loading={resetting}
+	onOpenChange={(v) => (resetOpen = v)}
+	onConfirm={reset}
+/>
diff --git a/frontend/src/lib/components/arsenal/nuclei-library.svelte b/frontend/src/lib/components/arsenal/nuclei-library.svelte
index 06035ceb1..d493fbffc 100644
--- a/frontend/src/lib/components/arsenal/nuclei-library.svelte
+++ b/frontend/src/lib/components/arsenal/nuclei-library.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import { page as route } from '$app/state';
+	import { replaceState } from '$app/navigation';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import Download from '@lucide/svelte/icons/download';
 	import FilePlus from '@lucide/svelte/icons/file-plus';
@@ -11,6 +13,7 @@
 	import Trash2 from '@lucide/svelte/icons/trash-2';
 	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
 	import Upload from '@lucide/svelte/icons/upload';
+	import X from '@lucide/svelte/icons/x';
 	import * as Card from '$lib/components/ui/card';
 	import * as Select from '$lib/components/ui/select';
 	import { Badge } from '$lib/components/ui/badge';
@@ -27,6 +30,11 @@
 	import SeverityMark from '$lib/components/scans/results/vulnerabilities/severity-mark.svelte';
 	import * as ToggleGroup from '$lib/components/ui/toggle-group';
 	import TemplateSheet from './template-sheet.svelte';
+	import CallbackServerSheet from './callback-server-sheet.svelte';
+	import { oastApi } from '$lib/api/oast';
+	import { CALLBACK_PANEL, PANEL_PARAM } from '$lib/config/routes';
+	import { CALLBACK_SERVER, OAST_MODE_LABELS, OastMode } from '$lib/config/oast';
+	import type { OastRead } from '$lib/types/oast';
 	import { vulnTemplatesApi } from '$lib/api/vulnerabilities';
 	import SelectionDeleteBar from '$lib/components/selection-delete-bar.svelte';
 	import { Checkbox } from '$lib/components/ui/checkbox';
@@ -72,6 +80,9 @@
 	let origin = $state(ALL);
 	let set = $state(ALL);
 	let onlyNew = $state(false);
+	let onlyCallback = $state(false);
+	let oast = $state<OastRead | null>(null);
+	let callbackOpen = $state(false);
 	let seenAt = $state<string | null>(null);
 	let reqId = 0;
 
@@ -159,6 +170,7 @@
 		const org = origin === ALL ? [] : [origin];
 		const chosen = set === ALL ? [] : [set];
 		const newSince = onlyNew ? seenAt : null;
+		const callback = onlyCallback;
 		untrack(() => {
 			filter = {
 				...filter,
@@ -167,11 +179,42 @@
 				origins: org,
 				sets: chosen,
 				new_since: newSince,
+				callback,
 				offset: 0
 			};
 		});
 	});
 
+	const callbackState = $derived(
+		!oast || oast.mode === OastMode.OFF ? 'off' : oast.reason ? 'blocked' : 'on'
+	);
+	const CALLBACK_DOT: Record<string, string> = {
+		on: 'bg-success',
+		blocked: 'bg-warning',
+		off: 'bg-muted-foreground/40'
+	};
+
+	onMount(() => {
+		void oastApi
+			.get()
+			.then((row) => (oast = row))
+			.catch(() => (oast = null));
+		if (route.url.searchParams.get(PANEL_PARAM) === CALLBACK_PANEL) callbackOpen = true;
+	});
+
+	$effect(() => {
+		if (callbackOpen) return;
+		const params = untrack(() => new URLSearchParams(route.url.searchParams));
+		if (params.get(PANEL_PARAM) !== CALLBACK_PANEL) return;
+		params.delete(PANEL_PARAM);
+		const qs = params.toString();
+		try {
+			replaceState(qs ? `?${qs}` : location.pathname, {});
+		} catch {
+			// ignore
+		}
+	});
+
 	async function sync() {
 		syncing = true;
 		try {
@@ -258,7 +301,14 @@
 		{#if stats?.last_synced_at}
 			<Card.Description>Synced {relativeTime(stats.last_synced_at)}</Card.Description>
 		{/if}
-		<Card.Action class="flex items-center gap-2">
+		<Card.Action class="flex flex-wrap items-center justify-end gap-2">
+			<Button variant="outline" size="sm" class="gap-2" onclick={() => (callbackOpen = true)}>
+				<span class="size-2 shrink-0 rounded-full {CALLBACK_DOT[callbackState]}"></span>
+				{CALLBACK_SERVER}
+				<span class="text-muted-foreground">
+					{callbackState === 'on' && oast ? OAST_MODE_LABELS[oast.mode as OastMode] : 'Off'}
+				</span>
+			</Button>
 			<input
 				bind:this={fileInput}
 				type="file"
@@ -343,6 +393,19 @@
 					</span>
 					<span class="text-xs text-muted-foreground">{TEMPLATE_ORIGIN_LABELS.custom}</span>
 				</div>
+				{#if stats.callback > 0}
+					<button
+						type="button"
+						class="-mx-2 -my-1 flex flex-col rounded-md px-2 py-1 text-left transition-colors hover:bg-muted/60 aria-pressed:bg-muted"
+						aria-pressed={onlyCallback}
+						onclick={() => (onlyCallback = !onlyCallback)}
+					>
+						<span class="font-mono text-sm leading-6 tabular-nums">
+							{stats.callback.toLocaleString()}
+						</span>
+						<span class="text-xs text-muted-foreground">Need a callback</span>
+					</button>
+				{/if}
 				<div class="flex min-w-64 flex-1 flex-col gap-2">
 					<SeverityBar counts={severityCounts} height="h-1.5" />
 					<div class="flex flex-wrap gap-x-4 gap-y-1">
@@ -419,6 +482,18 @@
 				</ToggleGroup.Item>
 			</ToggleGroup.Root>
 		{/if}
+		{#if onlyCallback}
+			<Button
+				variant="secondary"
+				size="sm"
+				class="h-9 gap-1.5"
+				aria-label="Clear the need a callback filter"
+				onclick={() => (onlyCallback = false)}
+			>
+				Need a callback
+				<X class="size-3.5" />
+			</Button>
+		{/if}
 		<Button
 			variant="outline"
 			size="icon"
@@ -616,3 +691,5 @@
 	}}
 	onClear={() => picked.clear()}
 />
+
+<CallbackServerSheet bind:open={callbackOpen} settings={oast} onSaved={(row) => (oast = row)} />
diff --git a/frontend/src/lib/components/bounty-hub/settings-sheet.svelte b/frontend/src/lib/components/bounty-hub/settings-sheet.svelte
new file mode 100644
index 000000000..61d2d5c4f
--- /dev/null
+++ b/frontend/src/lib/components/bounty-hub/settings-sheet.svelte
@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import { bountyProgramsApi } from '$lib/api/bounty-programs';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { ROUTES, routeLabels } from '$lib/config/routes';
+	import { SYNC_INTERVAL_LABELS } from '$lib/config/bounty-programs';
+	import { relativeTime, untilTime } from '$lib/utilities/dates';
+	import type {
+		BountyEventSpec,
+		BountySettings,
+		BountySettingsUpdate,
+		BountyVocabulary
+	} from '$lib/types/bounty-program';
+
+	interface Props {
+		open: boolean;
+		onSaved?: (settings: BountySettings) => void;
+	}
+
+	let { open = $bindable(), onSaved }: Props = $props();
+
+	const LABEL = 'text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase';
+	const OFF = 'off';
+
+	let settings = $state<BountySettings | null>(null);
+	let vocabulary = $state<BountyVocabulary | null>(null);
+	let loadError = $state<string | null>(null);
+	let saving = $state(false);
+
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const connectable = $derived((settings?.platforms ?? []).filter((p) => p.api_provider));
+	const specs = $derived<BountyEventSpec[]>(
+		(settings?.notifiable_events ?? [])
+			.map((kind) => vocabulary?.events.find((e) => e.kind === kind))
+			.filter((e): e is BountyEventSpec => Boolean(e))
+	);
+
+	async function load() {
+		try {
+			[settings, vocabulary] = await Promise.all([
+				bountyProgramsApi.settings(),
+				bountyProgramsApi.vocabulary()
+			]);
+			loadError = null;
+		} catch (e) {
+			loadError = e instanceof Error ? e.message : 'Request failed.';
+		}
+	}
+
+	$effect(() => {
+		if (open) void load();
+	});
+
+	function schedule(interval: string, last: string | null, next: string | null): string {
+		const parts: string[] = [];
+		if (last) parts.push(`Last ${relativeTime(last)}`);
+		if (interval !== OFF && next)
+			parts.push(untilTime(next) ? `Next ${untilTime(next)}` : 'Overdue');
+		return parts.join(' · ');
+	}
+
+	async function save(patch: BountySettingsUpdate, label: string) {
+		saving = true;
+		try {
+			settings = await bountyProgramsApi.saveSettings(patch);
+			onSaved?.(settings);
+			toast.success(`${label} saved`);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : `${label} not saved`);
+			await load();
+		} finally {
+			saving = false;
+		}
+	}
+
+	function toggleEvent(kind: string, on: boolean) {
+		const current = settings?.notify_events ?? [];
+		const next = on ? [...current, kind] : current.filter((k) => k !== kind);
+		void save({ notify_events: [...new Set(next)] }, 'Alerts');
+	}
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Content side="right" class="flex w-full flex-col gap-0 p-0 sm:max-w-md">
+		<Sheet.Header class="border-b px-5 py-4">
+			<Sheet.Title>{routeLabels['bounty-hub']} settings</Sheet.Title>
+		</Sheet.Header>
+
+		{#if loadError && !settings}
+			<div class="flex flex-col items-start gap-3 px-5 py-6 text-sm">
+				<p class="text-muted-foreground">{loadError}</p>
+				<Button variant="outline" size="sm" onclick={load}>Retry</Button>
+			</div>
+		{:else if !settings}
+			<div class="flex flex-col gap-3 px-5 py-6">
+				<Skeleton class="h-4 w-32" />
+				<Skeleton class="h-9 w-full" />
+				<Skeleton class="h-9 w-full" />
+			</div>
+		{:else}
+			<ScrollArea class="min-h-0 flex-1">
+				<div class="flex flex-col divide-y px-5">
+					<section class="flex flex-col gap-3 py-5">
+						<h3 class={LABEL}>Platforms</h3>
+						{#each connectable as platform (platform.platform)}
+							<div class="flex items-center justify-between gap-4 text-sm">
+								<span class="font-medium">{platform.label}</span>
+								{#if platform.configured}
+									<span class="text-xs text-muted-foreground tabular-nums">
+										{platform.programs.toLocaleString()} programs
+										{#if platform.private_programs > 0}
+											· {platform.private_programs.toLocaleString()} private
+										{/if}
+									</span>
+								{:else}
+									<a
+										href={ROUTES.settings('api-keys')}
+										class="text-xs text-primary transition-colors hover:text-foreground"
+									>
+										Add key
+									</a>
+								{/if}
+							</div>
+						{/each}
+					</section>
+
+					<section class="flex flex-col gap-4 py-5">
+						<h3 class={LABEL}>Sync</h3>
+						<div class="flex items-start justify-between gap-4">
+							<div class="flex min-w-0 flex-col gap-0.5">
+								<span class="text-sm font-medium">Platform APIs</span>
+								<span class="text-xs text-muted-foreground">
+									{schedule(settings.sync_interval, settings.last_synced_at, settings.next_sync_at)}
+								</span>
+							</div>
+							<Select.Root
+								type="single"
+								value={settings.sync_interval}
+								onValueChange={(v) => v && save({ sync_interval: v }, 'Platform sync')}
+								disabled={!isAdmin || saving}
+							>
+								<Select.Trigger class="h-9 w-40 shrink-0" aria-label="Platform API interval">
+									{SYNC_INTERVAL_LABELS[settings.sync_interval] ?? settings.sync_interval}
+								</Select.Trigger>
+								<Select.Content>
+									{#each Object.entries(SYNC_INTERVAL_LABELS) as [value, label] (value)}
+										<Select.Item {value} {label}>{label}</Select.Item>
+									{/each}
+								</Select.Content>
+							</Select.Root>
+						</div>
+						<div class="flex items-start justify-between gap-4">
+							<div class="flex min-w-0 flex-col gap-0.5">
+								<span class="text-sm font-medium">Public feed</span>
+								<span class="text-xs text-muted-foreground">
+									{schedule(
+										settings.feed_interval,
+										settings.feed_synced_at,
+										settings.feed_next_sync_at
+									)}
+								</span>
+								<a
+									href={settings.feed_url}
+									target="_blank"
+									rel="noreferrer noopener"
+									class="w-fit text-xs text-muted-foreground transition-colors hover:text-foreground"
+								>
+									{settings.feed_source} · {settings.feed_license}
+								</a>
+							</div>
+							<Select.Root
+								type="single"
+								value={settings.feed_interval}
+								onValueChange={(v) => v && save({ feed_interval: v }, 'Feed sync')}
+								disabled={!isAdmin || saving}
+							>
+								<Select.Trigger class="h-9 w-40 shrink-0" aria-label="Public feed interval">
+									{SYNC_INTERVAL_LABELS[settings.feed_interval] ?? settings.feed_interval}
+								</Select.Trigger>
+								<Select.Content>
+									{#each Object.entries(SYNC_INTERVAL_LABELS) as [value, label] (value)}
+										<Select.Item {value} {label}>{label}</Select.Item>
+									{/each}
+								</Select.Content>
+							</Select.Root>
+						</div>
+					</section>
+
+					<section class="flex flex-col gap-3 py-5">
+						<h3 class={LABEL}>Alerts</h3>
+						<label class="flex items-start justify-between gap-4" for="bounty-notify">
+							<span class="flex min-w-0 flex-col gap-0.5">
+								<span class="text-sm font-medium">Program changes</span>
+								<span class="text-xs text-muted-foreground">
+									Inbox and channels subscribed to Program changes
+								</span>
+							</span>
+							<Switch
+								id="bounty-notify"
+								checked={settings.notify}
+								disabled={!isAdmin || saving}
+								onCheckedChange={(v) => save({ notify: v }, 'Alerts')}
+							/>
+						</label>
+						{#if settings.notify}
+							<div class="flex flex-col divide-y rounded-lg border">
+								{#each specs as spec (spec.kind)}
+									<label
+										class="flex items-start justify-between gap-4 px-3 py-2.5"
+										for="bounty-event-{spec.kind}"
+									>
+										<span class="flex min-w-0 flex-col gap-0.5">
+											<span class="text-sm">{spec.label}</span>
+											<span class="text-xs text-muted-foreground">{spec.description}</span>
+										</span>
+										<Switch
+											id="bounty-event-{spec.kind}"
+											checked={settings.notify_events.includes(spec.kind)}
+											disabled={!isAdmin || saving}
+											onCheckedChange={(v) => toggleEvent(spec.kind, v)}
+										/>
+									</label>
+								{/each}
+							</div>
+						{/if}
+						<p class="text-xs text-muted-foreground tabular-nums">
+							{settings.events_recorded.toLocaleString()} changes recorded ·
+							<a
+								href={ROUTES.settings('notifications')}
+								class="text-primary transition-colors hover:text-foreground"
+							>
+								Notification channels
+							</a>
+						</p>
+					</section>
+				</div>
+			</ScrollArea>
+			{#if !isAdmin}
+				<p class="border-t px-5 py-2.5 text-xs text-muted-foreground">
+					Editable by administrators.
+				</p>
+			{/if}
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>
diff --git a/frontend/src/lib/components/bounty-hub/watching-tab.svelte b/frontend/src/lib/components/bounty-hub/watching-tab.svelte
index 1d8fc62bd..8c0c48706 100644
--- a/frontend/src/lib/components/bounty-hub/watching-tab.svelte
+++ b/frontend/src/lib/components/bounty-hub/watching-tab.svelte
@@ -9,7 +9,6 @@
 	import { SUBMISSION_STATE_LABELS } from '$lib/config/bounty-programs';
 	import { bountyVocabulary } from '$lib/stores/bounty-vocabulary.svelte';
 	import { SubmissionState } from '$lib/types/bounty-program';
-	import { ROUTES } from '$lib/config/routes';
 	import { relativeTime } from '$lib/utilities/dates';
 	import {
 		WatchStatus,
@@ -91,7 +90,14 @@
 			{:else}
 				<span>Certificate stream not running. Check that the ct-stream service is up.</span>
 			{/if}
-			<a href={ROUTES.settings('bounty-hub')} class="hover:underline">Details</a>
+			{#if stream.last_error}
+				<span class="text-destructive">
+					{stream.last_error}
+					{#if stream.last_error_at}
+						<span class="text-muted-foreground">· {relativeTime(stream.last_error_at)}</span>
+					{/if}
+				</span>
+			{/if}
 		</div>
 	{/if}
 
diff --git a/frontend/src/lib/components/contexts/proxy-section.svelte b/frontend/src/lib/components/contexts/proxy-section.svelte
index b79b62206..001aa5bcb 100644
--- a/frontend/src/lib/components/contexts/proxy-section.svelte
+++ b/frontend/src/lib/components/contexts/proxy-section.svelte
@@ -88,7 +88,7 @@
 	{/if}
 
 	<a
-		href={ROUTES.settings()}
+		href={ROUTES.settings('proxies')}
 		class="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
 	>
 		Manage proxies in Settings
diff --git a/frontend/src/lib/components/onboarding/step-notifications.svelte b/frontend/src/lib/components/onboarding/step-notifications.svelte
index 4dcc9334f..2f0510dd8 100644
--- a/frontend/src/lib/components/onboarding/step-notifications.svelte
+++ b/frontend/src/lib/components/onboarding/step-notifications.svelte
@@ -22,14 +22,11 @@
 	import { ONBOARDING_NOTIFICATION_PROVIDERS as PROVIDERS } from '$lib/config/notification-providers';
 	import type { StepProps } from '$lib/types/onboarding';
 	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
-	import { Capability } from '$lib/config/capabilities';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	let { next, setFooter }: StepProps = $props();
 	const categories = $derived(
-		NOTIF_CATEGORIES.filter(
-			(c) => c.value !== 'watch' || capabilitiesStore.has(Capability.PROGRAM_WATCHES)
-		)
+		NOTIF_CATEGORIES.filter((c) => !c.capability || capabilitiesStore.has(c.capability))
 	);
 
 	interface ChannelDraft {
diff --git a/frontend/src/lib/components/onboarding/step-proxy.svelte b/frontend/src/lib/components/onboarding/step-proxy.svelte
index 9dd932ffd..2ce12472d 100644
--- a/frontend/src/lib/components/onboarding/step-proxy.svelte
+++ b/frontend/src/lib/components/onboarding/step-proxy.svelte
@@ -153,7 +153,6 @@
 		if (!endpoints) return null;
 		const created = await proxiesApi.create({
 			name: `${data.instanceName || 'reNgine'} Proxy`,
-			mode: choice === 'single' ? 'rotating' : 'single',
 			is_active: true,
 			is_default: asDefault,
 			endpoints
diff --git a/frontend/src/lib/components/scans/launch/launch-context-form.svelte b/frontend/src/lib/components/scans/launch/launch-context-form.svelte
index 974e7527e..e9295ad7a 100644
--- a/frontend/src/lib/components/scans/launch/launch-context-form.svelte
+++ b/frontend/src/lib/components/scans/launch/launch-context-form.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { toast } from 'svelte-sonner';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
@@ -19,6 +19,8 @@
 	} from '$lib/components/contexts/context-form';
 	import { scanContextsStore } from '$lib/stores/scan-contexts.svelte';
 	import { projectsStore } from '$lib/stores/projects.svelte';
+	import { proxiesStore } from '$lib/stores/proxies.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
 	import { DEFAULT_SCAN_CONTEXT, type ScanContextCreate } from '$lib/types/scan-context';
 
 	interface Props {
@@ -46,6 +48,18 @@
 
 	let validation = $derived(validateDraft(draft));
 
+	$effect(() => {
+		if (auth.user?.is_superuser && !proxiesStore.hasFetched) untrack(() => proxiesStore.fetch());
+	});
+
+	let proxyPreset = false;
+	$effect(() => {
+		const fallback = proxiesStore.defaultId;
+		if (proxyPreset || !proxiesStore.hasFetched) return;
+		proxyPreset = true;
+		if (fallback && !draft.proxy_id) untrack(() => (draft.proxy_id = fallback));
+	});
+
 	function seed(): ScanContextCreate {
 		const d = DEFAULT_SCAN_CONTEXT();
 		d.name = targetValue ? `${targetValue} scope` : '';
diff --git a/frontend/src/lib/components/settings/api-key-provider-card.svelte b/frontend/src/lib/components/settings/api-key-provider-card.svelte
deleted file mode 100644
index a66b423e1..000000000
--- a/frontend/src/lib/components/settings/api-key-provider-card.svelte
+++ /dev/null
@@ -1,413 +0,0 @@
-<script lang="ts">
-	import { APIProvider, type APIKeyRead, type ProviderInfo } from '$lib/types/api-key';
-	import { getProviderIcon } from '$lib/config/icons';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Popover from '$lib/components/ui/popover/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Spinner } from '$lib/components/ui/spinner/index.js';
-	import LoadingButton from '$lib/components/loading-button.svelte';
-	import FormField from '$lib/components/form-field.svelte';
-	import { writeClipboard } from '$lib/utilities/clipboard';
-	import { toast } from 'svelte-sonner';
-	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-	import PlusIcon from '@lucide/svelte/icons/plus';
-	import Pencil from '@lucide/svelte/icons/pencil';
-	import Trash2Icon from '@lucide/svelte/icons/trash-2';
-	import FlaskConicalIcon from '@lucide/svelte/icons/flask-conical';
-	import ActivityIcon from '@lucide/svelte/icons/activity';
-	import KeyIcon from '@lucide/svelte/icons/key';
-	import UserIcon from '@lucide/svelte/icons/user';
-	import EyeIcon from '@lucide/svelte/icons/eye';
-	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
-	import CopyIcon from '@lucide/svelte/icons/copy';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
-	import { formatDate } from '$lib/utilities';
-
-	interface Props {
-		provider: ProviderInfo;
-		apiKey: APIKeyRead | undefined;
-		testing: boolean;
-		onToggle: (provider: APIProvider, enabled: boolean) => void;
-		onAdd: (provider: APIProvider) => void;
-		onTest: (provider: APIProvider, keyId: string) => void;
-		onDelete: (provider: APIProvider) => void;
-		onReveal: (keyId: string) => Promise<string>;
-		onEditSave: (provider: APIProvider, keyValue: string, username: string) => Promise<boolean>;
-	}
-
-	let {
-		provider,
-		apiKey,
-		testing,
-		onToggle,
-		onAdd,
-		onTest,
-		onDelete,
-		onReveal,
-		onEditSave
-	}: Props = $props();
-
-	const Icon = $derived(getProviderIcon(provider.icon));
-	const isConfigured = $derived(!!apiKey);
-
-	let revealedKeyValue = $state<string | null>(null);
-	let revealLoading = $state(false);
-	let revealError = $state(false);
-	let copied = $state(false);
-
-	let editOpen = $state(false);
-	let editKeyValue = $state('');
-	let editUsername = $state('');
-	let editSaving = $state(false);
-	let editShowKey = $state(false);
-
-	function resetReveal() {
-		revealedKeyValue = null;
-		revealLoading = false;
-		revealError = false;
-		copied = false;
-	}
-
-	async function reveal(keyId: string) {
-		revealedKeyValue = null;
-		revealError = false;
-		revealLoading = true;
-		try {
-			revealedKeyValue = await onReveal(keyId);
-		} catch {
-			revealError = true;
-		} finally {
-			revealLoading = false;
-		}
-	}
-
-	async function copyKey(value: string) {
-		if (await writeClipboard(value)) {
-			copied = true;
-			setTimeout(() => (copied = false), 2000);
-		} else {
-			toast.error('Copy failed');
-		}
-	}
-
-	function resetEdit() {
-		editKeyValue = '';
-		editUsername = '';
-		editSaving = false;
-		editShowKey = false;
-	}
-
-	async function saveEdit() {
-		editSaving = true;
-		try {
-			if (await onEditSave(provider.provider, editKeyValue.trim(), editUsername.trim())) {
-				editOpen = false;
-			}
-		} finally {
-			editSaving = false;
-		}
-	}
-</script>
-
-<Card.Root
-	class="relative transition-all duration-200 {isConfigured
-		? 'ring-1 ring-border'
-		: 'border-dashed opacity-75 hover:opacity-100'}"
->
-	<Card.Content class="p-5">
-		<div class="flex items-start justify-between gap-3">
-			<div class="flex items-start gap-3 min-w-0">
-				<div class="shrink-0 rounded-lg border bg-muted p-2.5">
-					<Icon class="size-[18px] text-muted-foreground" />
-				</div>
-				<div class="min-w-0">
-					<div class="flex items-center gap-2">
-						<h4 class="font-medium text-sm">{provider.name}</h4>
-						<a
-							href={provider.docs_url}
-							target="_blank"
-							rel="noopener noreferrer"
-							class="text-muted-foreground hover:text-foreground transition-colors"
-						>
-							<ExternalLinkIcon class="size-3.5" />
-						</a>
-					</div>
-					<p class="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-						{provider.description}
-					</p>
-				</div>
-			</div>
-
-			{#if apiKey}
-				<Switch
-					checked={apiKey.is_enabled}
-					onCheckedChange={(checked) => onToggle(provider.provider, checked)}
-				/>
-			{/if}
-		</div>
-
-		{#if apiKey}
-			<Separator class="my-3" />
-
-			<div class="space-y-3">
-				{#if provider.requires_username && apiKey.key_meta?.username}
-					<div class="flex items-center gap-2">
-						<UserIcon class="size-3.5 text-muted-foreground shrink-0" />
-						<code class="text-xs font-mono text-muted-foreground truncate">
-							{apiKey.key_meta.username}
-						</code>
-					</div>
-				{/if}
-				<div class="flex items-center gap-2">
-					<KeyIcon class="size-3.5 text-muted-foreground shrink-0" />
-					<code class="text-xs font-mono text-muted-foreground truncate">
-						{apiKey.key_value_masked}
-					</code>
-
-					<Popover.Root
-						onOpenChange={(open) => {
-							if (open) reveal(apiKey.id);
-							else resetReveal();
-						}}
-					>
-						<Popover.Trigger>
-							{#snippet child({ props })}
-								<Button
-									{...props}
-									variant="ghost"
-									size="icon"
-									class="size-7 shrink-0 text-muted-foreground hover:text-foreground"
-									aria-label="Reveal key"
-								>
-									<EyeIcon class="size-3.5" />
-								</Button>
-							{/snippet}
-						</Popover.Trigger>
-						<Popover.Content class="w-80" align="start">
-							<div class="space-y-3">
-								<div class="flex items-center justify-between">
-									<Label class="text-xs font-medium">API key</Label>
-									{#if revealedKeyValue}
-										<Button
-											variant="ghost"
-											size="icon"
-											class="size-7 text-muted-foreground hover:text-foreground"
-											onclick={() => copyKey(revealedKeyValue ?? '')}
-										>
-											{#if copied}
-												<CheckIcon class="size-3.5 text-foreground" />
-											{:else}
-												<CopyIcon class="size-3.5" />
-											{/if}
-										</Button>
-									{/if}
-								</div>
-								{#if revealLoading}
-									<div class="flex items-center justify-center py-3">
-										<Spinner class="size-4" />
-									</div>
-								{:else if revealedKeyValue}
-									<code
-										class="block text-xs font-mono text-foreground bg-muted px-3 py-2.5 rounded-md break-all select-all leading-relaxed"
-									>
-										{revealedKeyValue}
-									</code>
-								{:else if revealError}
-									<div class="flex items-center justify-between gap-2">
-										<p class="text-xs text-muted-foreground">Key not loaded</p>
-										<Button
-											variant="outline"
-											size="sm"
-											class="h-7 px-2 text-xs"
-											onclick={() => reveal(apiKey.id)}
-										>
-											<RefreshCwIcon class="size-3 mr-1" />
-											Retry
-										</Button>
-									</div>
-								{/if}
-							</div>
-						</Popover.Content>
-					</Popover.Root>
-
-					{#if apiKey.is_enabled}
-						<Badge variant="secondary" class="h-5 text-2xs px-1.5 shrink-0">Active</Badge>
-					{:else}
-						<Badge
-							variant="secondary"
-							class="h-5 text-2xs px-1.5 bg-muted text-muted-foreground border-0 shrink-0"
-						>
-							Disabled
-						</Badge>
-					{/if}
-				</div>
-
-				<div class="flex items-center gap-4 text-xs text-muted-foreground">
-					<Tooltip.Root>
-						<Tooltip.Trigger>
-							{#snippet child({ props })}
-								<span {...props} class="flex items-center gap-1">
-									<ActivityIcon class="size-3" />
-									{apiKey.usage_counter} calls
-								</span>
-							{/snippet}
-						</Tooltip.Trigger>
-						<Tooltip.Content>API calls</Tooltip.Content>
-					</Tooltip.Root>
-
-					{#if apiKey.last_used_at}
-						<span>Last used {formatDate(apiKey.last_used_at)}</span>
-					{:else}
-						<span>Unused</span>
-					{/if}
-				</div>
-
-				<div class="flex items-center gap-1.5 pt-1">
-					<Popover.Root
-						open={editOpen}
-						onOpenChange={(open) => {
-							if (open) {
-								editOpen = true;
-								editKeyValue = '';
-								editUsername = (apiKey.key_meta?.username as string) ?? '';
-							} else {
-								editOpen = false;
-								resetEdit();
-							}
-						}}
-					>
-						<Popover.Trigger>
-							{#snippet child({ props })}
-								<Button {...props} variant="ghost" size="sm" class="h-7 px-2 text-xs">
-									<Pencil class="size-3 mr-1" />
-									Edit
-								</Button>
-							{/snippet}
-						</Popover.Trigger>
-						<Popover.Content class="w-80" align="start">
-							<div class="space-y-3">
-								<div>
-									<h4 class="text-sm font-medium">Update API key</h4>
-								</div>
-								{#if provider.requires_username}
-									<FormField label="Username">
-										{#snippet children({ id })}
-											<Input
-												{id}
-												type="text"
-												bind:value={editUsername}
-												placeholder="Account username"
-												disabled={editSaving}
-												class="h-8 text-xs"
-											/>
-										{/snippet}
-									</FormField>
-								{/if}
-								<FormField label="New API key">
-									{#snippet children({ id })}
-										<div class="relative">
-											<Input
-												{id}
-												type={editShowKey ? 'text' : 'password'}
-												bind:value={editKeyValue}
-												placeholder="API key"
-												disabled={editSaving}
-												class="h-8 text-xs pr-8"
-											/>
-											<Button
-												variant="ghost"
-												size="icon"
-												class="absolute right-1 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-												aria-label={editShowKey ? 'Hide key' : 'Show key'}
-												aria-pressed={editShowKey}
-												onclick={() => (editShowKey = !editShowKey)}
-											>
-												{#if editShowKey}
-													<EyeOffIcon class="size-3.5" />
-												{:else}
-													<EyeIcon class="size-3.5" />
-												{/if}
-											</Button>
-										</div>
-									{/snippet}
-								</FormField>
-								<LoadingButton
-									size="sm"
-									class="w-full h-8 text-xs"
-									loading={editSaving}
-									loadingLabel="Saving"
-									disabled={!editKeyValue.trim() ||
-										(provider.requires_username && !editUsername.trim())}
-									onclick={saveEdit}
-								>
-									Update key
-								</LoadingButton>
-							</div>
-						</Popover.Content>
-					</Popover.Root>
-
-					<Tooltip.Root>
-						<Tooltip.Trigger>
-							{#snippet child({ props })}
-								<Button
-									{...props}
-									variant="ghost"
-									size="sm"
-									class="h-7 px-2 text-xs"
-									disabled={testing}
-									onclick={() => onTest(provider.provider, apiKey.id)}
-								>
-									{#if testing}
-										<Spinner class="size-3 mr-1" />
-									{:else}
-										<FlaskConicalIcon class="size-3 mr-1" />
-									{/if}
-									Test
-								</Button>
-							{/snippet}
-						</Tooltip.Trigger>
-						<Tooltip.Content>Test key</Tooltip.Content>
-					</Tooltip.Root>
-
-					<div class="flex-1"></div>
-
-					<Tooltip.Root>
-						<Tooltip.Trigger>
-							{#snippet child({ props })}
-								<Button
-									{...props}
-									variant="ghost"
-									size="sm"
-									class="h-7 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
-									onclick={() => onDelete(provider.provider)}
-								>
-									<Trash2Icon class="size-3" />
-								</Button>
-							{/snippet}
-						</Tooltip.Trigger>
-						<Tooltip.Content>Remove API key</Tooltip.Content>
-					</Tooltip.Root>
-				</div>
-			</div>
-		{:else}
-			<div class="mt-4">
-				<Button
-					variant="outline"
-					size="sm"
-					class="w-full h-8 text-xs"
-					onclick={() => onAdd(provider.provider)}
-				>
-					<PlusIcon class="size-3.5 mr-1.5" />
-					Add API key
-				</Button>
-			</div>
-		{/if}
-	</Card.Content>
-</Card.Root>
diff --git a/frontend/src/lib/components/settings/api-keys-panel.svelte b/frontend/src/lib/components/settings/api-keys-panel.svelte
index 16079fff2..9a16a6c4a 100644
--- a/frontend/src/lib/components/settings/api-keys-panel.svelte
+++ b/frontend/src/lib/components/settings/api-keys-panel.svelte
@@ -1,71 +1,96 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
-	import { apiKeysApi } from '$lib/api/api-keys';
-	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
-	import { providerAllowed } from '$lib/config/capabilities';
-	import { APIProvider, type APIKeyRead, type ProviderInfo } from '$lib/types/api-key';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import LoadingButton from '$lib/components/loading-button.svelte';
-	import DeleteConfirmationDialog from '$lib/components/delete-confirmation-dialog.svelte';
-	import FormField from '$lib/components/form-field.svelte';
-	import ApiKeyProviderCard from './api-key-provider-card.svelte';
-	import { toast } from 'svelte-sonner';
 	import { SvelteMap } from 'svelte/reactivity';
+	import { toast } from 'svelte-sonner';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import CopyIcon from '@lucide/svelte/icons/copy';
 	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
 	import EyeIcon from '@lucide/svelte/icons/eye';
 	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
-	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
+	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
+	import MoreVerticalIcon from '@lucide/svelte/icons/more-vertical';
+	import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
 	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Popover from '$lib/components/ui/popover/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { Spinner } from '$lib/components/ui/spinner/index.js';
+	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
 	import EmptyState from '$lib/components/empty-state.svelte';
+	import FormField from '$lib/components/form-field.svelte';
+	import Hint from '$lib/components/hint.svelte';
+	import LoadingButton from '$lib/components/loading-button.svelte';
+	import { apiKeysApi } from '$lib/api/api-keys';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
+	import { providerAllowed } from '$lib/config/capabilities';
+	import { writeClipboard } from '$lib/utilities/clipboard';
+	import { relativeTime } from '$lib/utilities/dates';
+	import type { APIKeyRead, ProviderInfo } from '$lib/types/api-key';
+	import { ProviderGroup } from '$lib/config/api-keys';
+	import { BODY_ROW, GROUP_ROW, HEAD_ROW, KEY_COL } from './columns';
+	import { CHECK_DOT, checkState, type CheckState } from './status';
+
+	const GROUP_ORDER = Object.values(ProviderGroup);
+
+	const STATUS_LABEL: Record<CheckState, string> = {
+		ok: 'Valid',
+		failed: 'Rejected',
+		untested: 'Not tested',
+		off: 'Disabled'
+	};
 
 	let providers = $state<ProviderInfo[]>([]);
-	let configuredKeys = new SvelteMap<string, APIKeyRead>();
-	let isLoading = $state(true);
+	const keys = new SvelteMap<string, APIKeyRead>();
+	let loading = $state(true);
 	let loadError = $state<string | null>(null);
+	let testing = $state<string | null>(null);
 
-	let addDialogOpen = $state(false);
-	let addDialogProvider = $state<APIProvider | null>(null);
-	let addDialogKeyValue = $state('');
-	let addDialogUsername = $state('');
-	let addDialogSaving = $state(false);
-	let addShowKey = $state(false);
-	let addUsernameInput = $state<HTMLInputElement | null>(null);
-	let addKeyInput = $state<HTMLInputElement | null>(null);
+	let editing = $state<ProviderInfo | null>(null);
+	let dialogOpen = $state(false);
+	let keyValue = $state('');
+	let username = $state('');
+	let showKey = $state(false);
+	let saving = $state(false);
+	let usernameInput = $state<HTMLInputElement | null>(null);
+	let keyInput = $state<HTMLInputElement | null>(null);
 
-	$effect(() => {
-		if (addDialogOpen) {
-			tick().then(() => (addUsernameInput ?? addKeyInput)?.focus());
+	let removing = $state<ProviderInfo | null>(null);
+	let deleting = $state(false);
+
+	let revealed = $state<string | null>(null);
+	let revealFailed = $state(false);
+	let copied = $state(false);
+
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const replacing = $derived(editing ? keys.has(editing.provider) : false);
+	const canSave = $derived(
+		!saving && !!keyValue.trim() && (!editing?.requires_username || !!username.trim() || replacing)
+	);
+	const groups = $derived.by(() => {
+		const out: { group: string; label: string; items: ProviderInfo[] }[] = [];
+		for (const provider of providers) {
+			let entry = out.find((g) => g.group === provider.group);
+			if (!entry) {
+				entry = { group: provider.group, label: provider.group_label, items: [] };
+				out.push(entry);
+			}
+			entry.items.push(provider);
 		}
+		return out.sort(
+			(a, b) =>
+				GROUP_ORDER.indexOf(a.group as ProviderGroup) -
+				GROUP_ORDER.indexOf(b.group as ProviderGroup)
+		);
 	});
+	const setCount = $derived(providers.filter((p) => keys.has(p.provider)).length);
 
-	let addRequiresUsername = $derived(
-		!!providers.find((p) => p.provider === addDialogProvider)?.requires_username
-	);
-	let addCanSave = $derived(
-		!addDialogSaving &&
-			!!addDialogKeyValue.trim() &&
-			(!addRequiresUsername || !!addDialogUsername.trim())
-	);
-
-	let deleteDialogOpen = $state(false);
-	let deletingProvider = $state<APIProvider | null>(null);
-	let deletingKeyId = $state<string | null>(null);
-	let isDeleting = $state(false);
-
-	let testingKeyId = $state<string | null>(null);
-
-	let testDialogOpen = $state(false);
-	let testDialogKeyId = $state<string | null>(null);
-	let testDialogProvider = $state<APIProvider | null>(null);
-
-	async function fetchData() {
-		isLoading = true;
+	async function load() {
+		loading = true;
 		loadError = null;
 		try {
 			const [providerList, keyList] = await Promise.all([
@@ -73,367 +98,415 @@
 				apiKeysApi.list()
 			]);
 			providers = providerList.filter((p) => providerAllowed(capabilitiesStore.mode, p.provider));
-			configuredKeys.clear();
-			for (const k of keyList) configuredKeys.set(k.provider, k);
+			keys.clear();
+			for (const key of keyList) keys.set(key.provider, key);
 		} catch (e) {
 			loadError = e instanceof Error ? e.message : 'API keys not loaded';
-			toast.error(loadError);
 		} finally {
-			isLoading = false;
-		}
-	}
-
-	function openAddDialog(provider: APIProvider) {
-		addDialogProvider = provider;
-		addDialogKeyValue = '';
-		addDialogUsername = '';
-		addShowKey = false;
-		addDialogOpen = true;
-	}
-
-	async function handleAdd() {
-		if (!addDialogProvider || !addDialogKeyValue.trim()) {
-			toast.error('API key is required');
-			return;
-		}
-
-		const addMeta = providers.find((p) => p.provider === addDialogProvider);
-		if (addMeta?.requires_username && !addDialogUsername.trim()) {
-			toast.error('Username is required');
-			return;
-		}
-
-		addDialogSaving = true;
-		try {
-			const created = await apiKeysApi.create({
-				provider: addDialogProvider,
-				key_value: addDialogKeyValue.trim(),
-				...(addMeta?.requires_username ? { key_meta: { username: addDialogUsername.trim() } } : {})
-			});
-			configuredKeys.set(created.provider, created);
-			const meta = providers.find((p) => p.provider === addDialogProvider);
-			toast.success(`${meta?.name ?? 'Provider'} API key added`);
-			await refreshProviders();
-			addDialogOpen = false;
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'API key not added');
-		} finally {
-			addDialogSaving = false;
-		}
-	}
-
-	async function handleEditSave(
-		provider: APIProvider,
-		keyValue: string,
-		username: string
-	): Promise<boolean> {
-		const key = configuredKeys.get(provider);
-		if (!key || !keyValue) {
-			toast.error('API key is required');
-			return false;
-		}
-
-		const editMeta = providers.find((p) => p.provider === provider);
-		if (editMeta?.requires_username && !username) {
-			toast.error('Username is required');
-			return false;
-		}
-
-		try {
-			const updated = await apiKeysApi.update(key.id, {
-				key_value: keyValue,
-				...(editMeta?.requires_username ? { key_meta: { username } } : {})
-			});
-			configuredKeys.set(updated.provider, updated);
-			toast.success('API key updated');
-			return true;
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'API key not updated');
-			return false;
-		}
-	}
-
-	async function handleToggle(provider: APIProvider, enabled: boolean) {
-		const key = configuredKeys.get(provider);
-		if (!key) return;
-
-		try {
-			const updated = await apiKeysApi.update(key.id, { is_enabled: enabled });
-			configuredKeys.set(updated.provider, updated);
-			await refreshProviders();
-			toast.success(`${key.meta.name} ${enabled ? 'enabled' : 'disabled'}`);
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'API key not updated');
-		}
-	}
-
-	function openDeleteDialog(provider: APIProvider) {
-		const key = configuredKeys.get(provider);
-		if (!key) return;
-		deletingProvider = provider;
-		deletingKeyId = key.id;
-		deleteDialogOpen = true;
-	}
-
-	async function handleDelete() {
-		if (!deletingKeyId || !deletingProvider) return;
-
-		isDeleting = true;
-		try {
-			await apiKeysApi.delete(deletingKeyId);
-			configuredKeys.delete(deletingProvider);
-			await refreshProviders();
-			toast.success('API key removed');
-			deleteDialogOpen = false;
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'API key not removed');
-		} finally {
-			isDeleting = false;
-		}
-	}
-
-	function openTestDialog(provider: APIProvider, keyId: string) {
-		testDialogKeyId = keyId;
-		testDialogProvider = provider;
-		testDialogOpen = true;
-	}
-
-	async function handleTest(keyId: string) {
-		testingKeyId = keyId;
-		try {
-			const result = await apiKeysApi.test(keyId);
-			if (result.success) {
-				toast.success(result.message);
-			} else {
-				toast.error(result.message);
-			}
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'Test failed');
-		} finally {
-			testingKeyId = null;
-		}
-	}
-
-	async function handleReveal(keyId: string): Promise<string> {
-		const result = await apiKeysApi.reveal(keyId);
-		return result.key_value;
-	}
-
-	async function refreshProviders() {
-		try {
-			providers = (await apiKeysApi.listProviders()).filter((p) =>
-				providerAllowed(capabilitiesStore.mode, p.provider)
-			);
-		} catch {
-			/* empty */
+			loading = false;
 		}
 	}
 
 	onMount(() => {
-		fetchData();
+		if (isAdmin) void load();
+		else loading = false;
 	});
+
+	function stateOf(provider: ProviderInfo): CheckState {
+		const key = keys.get(provider.provider);
+		if (!key) return 'off';
+		return checkState(key.is_enabled, key.last_test_ok);
+	}
+
+	async function openDialog(provider: ProviderInfo) {
+		editing = provider;
+		keyValue = '';
+		username = String(keys.get(provider.provider)?.key_meta?.username ?? '');
+		showKey = false;
+		dialogOpen = true;
+		await tick();
+		(provider.requires_username && !username ? usernameInput : keyInput)?.focus();
+	}
+
+	async function saveKey() {
+		const provider = editing;
+		if (!provider || !canSave) return;
+		saving = true;
+		const meta = provider.requires_username ? { key_meta: { username: username.trim() } } : {};
+		try {
+			const existing = keys.get(provider.provider);
+			const stored = existing
+				? await apiKeysApi.update(existing.id, { key_value: keyValue.trim(), ...meta })
+				: await apiKeysApi.create({
+						provider: provider.provider,
+						key_value: keyValue.trim(),
+						...meta
+					});
+			keys.set(stored.provider, stored);
+			toast.success(`${provider.name} key ${existing ? 'replaced' : 'added'}`);
+			dialogOpen = false;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : `${provider.name} key not saved`);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function test(provider: ProviderInfo) {
+		const key = keys.get(provider.provider);
+		if (!key) return;
+		testing = provider.provider;
+		try {
+			const result = await apiKeysApi.test(key.id);
+			keys.set(provider.provider, {
+				...key,
+				last_test_at: new Date().toISOString(),
+				last_test_ok: result.success,
+				last_test_message: result.message
+			});
+			if (result.success) toast.success(result.message);
+			else toast.error(result.message);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Key not tested');
+		} finally {
+			testing = null;
+		}
+	}
+
+	async function setEnabled(provider: ProviderInfo, enabled: boolean) {
+		const key = keys.get(provider.provider);
+		if (!key) return;
+		try {
+			keys.set(provider.provider, await apiKeysApi.update(key.id, { is_enabled: enabled }));
+			toast.success(`${provider.name} key ${enabled ? 'enabled' : 'disabled'}`);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Key not updated');
+		}
+	}
+
+	async function remove() {
+		const provider = removing;
+		const key = provider ? keys.get(provider.provider) : undefined;
+		if (!provider || !key) return;
+		deleting = true;
+		try {
+			await apiKeysApi.delete(key.id);
+			keys.delete(provider.provider);
+			toast.success(`${provider.name} key removed`);
+			removing = null;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Key not removed');
+		} finally {
+			deleting = false;
+		}
+	}
+
+	async function reveal(key: APIKeyRead) {
+		revealed = null;
+		revealFailed = false;
+		try {
+			revealed = (await apiKeysApi.reveal(key.id)).key_value;
+		} catch {
+			revealFailed = true;
+		}
+	}
+
+	async function copy() {
+		if (revealed && (await writeClipboard(revealed))) {
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} else {
+			toast.error('Copy failed');
+		}
+	}
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start justify-between">
-		<div>
-			<h2 class="text-lg font-semibold tracking-tight">API keys</h2>
-			<p class="text-sm text-muted-foreground">
-				Keys for external intelligence providers. Shared by every project.
-			</p>
-		</div>
-		<Badge variant="outline" class="text-xs">
-			{configuredKeys.size} / {providers.length} configured
-		</Badge>
-	</div>
-
-	<Separator />
-
-	{#if isLoading}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-			{#each Array(6) as _, i (i)}
-				<Card.Root>
-					<Card.Content class="p-5">
-						<div class="flex items-start gap-3">
-							<Skeleton class="size-10 rounded-lg" />
-							<div class="flex-1 space-y-2">
-								<Skeleton class="h-5 w-28" />
-								<Skeleton class="h-4 w-full" />
-								<Skeleton class="h-4 w-3/4" />
-							</div>
+{#if !isAdmin}
+	<EmptyState compact icon={KeyRoundIcon} title="API keys are managed by administrators" />
+{:else if loading}
+	<Card.Root class="gap-3 p-4">
+		<Skeleton class="h-8 w-full" />
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-10 w-full" />
+	</Card.Root>
+{:else if loadError}
+	<EmptyState compact icon={TriangleAlertIcon} title="API keys not loaded" description={loadError}>
+		<Button variant="outline" size="sm" onclick={load}>
+			<RotateCwIcon class="size-3.5" />
+			Retry
+		</Button>
+	</EmptyState>
+{:else}
+	<Card.Root class="gap-0 overflow-hidden py-0">
+		<div class="@container/keys w-full" role="table" aria-label="API keys">
+			<div class={HEAD_ROW} role="row">
+				<div class={KEY_COL.provider}>Provider</div>
+				<div class={KEY_COL.key}>Key</div>
+				<div class={KEY_COL.status}>Status</div>
+				<div class={KEY_COL.tested}>Last tested</div>
+				<div class="{KEY_COL.actions} normal-case tracking-normal tabular-nums">
+					{setCount} of {providers.length} set
+				</div>
+			</div>
+			{#each groups as group (group.group)}
+				<div class={GROUP_ROW} role="row">{group.label}</div>
+				{#each group.items as provider (provider.provider)}
+					{@const key = keys.get(provider.provider)}
+					{@const check = stateOf(provider)}
+					<div class={BODY_ROW} role="row">
+						<div class="{KEY_COL.provider} flex flex-col">
+							<span class="flex items-center gap-1.5 text-sm leading-5 font-medium">
+								{provider.name}
+								<a
+									href={provider.docs_url}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="text-muted-foreground transition-colors hover:text-foreground"
+									aria-label="{provider.name} documentation"
+								>
+									<ExternalLinkIcon class="size-3" />
+								</a>
+							</span>
+							<span class="text-2xs text-muted-foreground">{provider.description}</span>
 						</div>
-					</Card.Content>
-				</Card.Root>
+						<div class={KEY_COL.key}>
+							{#if key}
+								<div class="flex items-center gap-1">
+									<span class="flex min-w-0 flex-col">
+										<code class="truncate font-mono text-xs text-muted-foreground">
+											{key.key_value_masked}
+										</code>
+										{#if key.key_meta?.username}
+											<code class="truncate font-mono text-2xs text-muted-foreground">
+												{key.key_meta.username}
+											</code>
+										{/if}
+									</span>
+									<Popover.Root
+										onOpenChange={(open) => {
+											if (open) void reveal(key);
+											else revealed = null;
+										}}
+									>
+										<Popover.Trigger>
+											{#snippet child({ props })}
+												<Button
+													{...props}
+													variant="ghost"
+													size="icon"
+													class="size-7 text-muted-foreground"
+													aria-label="Reveal {provider.name} key"
+												>
+													<EyeIcon class="size-3.5" />
+												</Button>
+											{/snippet}
+										</Popover.Trigger>
+										<Popover.Content class="w-80" align="start">
+											{#if revealed}
+												<div class="flex items-start gap-2">
+													<code
+														class="min-w-0 flex-1 rounded-md bg-muted px-2.5 py-2 font-mono text-xs break-all select-all"
+													>
+														{revealed}
+													</code>
+													<Button
+														variant="ghost"
+														size="icon"
+														class="size-7 shrink-0"
+														aria-label="Copy key"
+														onclick={copy}
+													>
+														{#if copied}<CheckIcon class="size-3.5" />{:else}<CopyIcon
+																class="size-3.5"
+															/>{/if}
+													</Button>
+												</div>
+											{:else if revealFailed}
+												<p class="text-xs text-muted-foreground">Key not loaded.</p>
+											{:else}
+												<div class="flex justify-center py-2"><Spinner class="size-4" /></div>
+											{/if}
+										</Popover.Content>
+									</Popover.Root>
+								</div>
+							{:else}
+								<span class="text-xs text-muted-foreground">Not set</span>
+							{/if}
+						</div>
+						<div class={KEY_COL.status}>
+							{#if key}
+								<Hint text={check === 'failed' ? key.last_test_message : null}>
+									{#snippet child(props)}
+										<span {...props} class="inline-flex items-center gap-2 text-sm">
+											{#if testing === provider.provider}
+												<Spinner class="size-3" />
+												<span class="text-muted-foreground">Testing</span>
+											{:else}
+												<span class="size-2 shrink-0 rounded-full {CHECK_DOT[check]}"></span>
+												<span
+													class={check === 'ok' || check === 'failed'
+														? ''
+														: 'text-muted-foreground'}
+												>
+													{STATUS_LABEL[check]}
+												</span>
+											{/if}
+										</span>
+									{/snippet}
+								</Hint>
+							{:else}
+								<span class="inline-flex items-center gap-2 text-sm text-muted-foreground">
+									<span class="size-2 shrink-0 rounded-full {CHECK_DOT.off}"></span>
+									Not set
+								</span>
+							{/if}
+						</div>
+						<div class="{KEY_COL.tested} text-xs text-muted-foreground tabular-nums">
+							{key?.last_test_at ? relativeTime(key.last_test_at) : 'Never'}
+						</div>
+						<div class={KEY_COL.actions}>
+							{#if key}
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger>
+										{#snippet child({ props })}
+											<Button {...props} variant="ghost" size="icon" class="size-7">
+												<MoreVerticalIcon class="size-4" />
+												<span class="sr-only">{provider.name} key actions</span>
+											</Button>
+										{/snippet}
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="end">
+										{#if provider.testable}
+											<DropdownMenu.Item
+												disabled={testing !== null || !key.is_enabled}
+												onSelect={() => test(provider)}
+											>
+												Test
+											</DropdownMenu.Item>
+										{/if}
+										<DropdownMenu.Item onSelect={() => openDialog(provider)}>
+											Replace key
+										</DropdownMenu.Item>
+										<DropdownMenu.Item onSelect={() => setEnabled(provider, !key.is_enabled)}>
+											{key.is_enabled ? 'Disable' : 'Enable'}
+										</DropdownMenu.Item>
+										<DropdownMenu.Separator />
+										<DropdownMenu.Item variant="destructive" onSelect={() => (removing = provider)}>
+											Remove
+										</DropdownMenu.Item>
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
+							{:else}
+								<Button
+									variant="outline"
+									size="sm"
+									class="h-7"
+									onclick={() => openDialog(provider)}
+								>
+									Add key
+								</Button>
+							{/if}
+						</div>
+					</div>
+				{/each}
 			{/each}
 		</div>
-	{:else if loadError}
-		<EmptyState
-			compact
-			icon={TriangleAlertIcon}
-			title="API keys not loaded"
-			description={loadError}
-		>
-			<Button variant="outline" size="sm" onclick={fetchData}>
-				<RefreshCwIcon class="mr-1.5 size-3.5" />
-				Retry
-			</Button>
-		</EmptyState>
-	{:else}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-			{#each providers as provider (provider.provider)}
-				<ApiKeyProviderCard
-					{provider}
-					apiKey={configuredKeys.get(provider.provider)}
-					testing={testingKeyId === configuredKeys.get(provider.provider)?.id}
-					onToggle={handleToggle}
-					onAdd={openAddDialog}
-					onTest={openTestDialog}
-					onDelete={openDeleteDialog}
-					onReveal={handleReveal}
-					onEditSave={handleEditSave}
-				/>
-			{/each}
-		</div>
-	{/if}
-</div>
+	</Card.Root>
+{/if}
 
-<Dialog.Root bind:open={addDialogOpen}>
+<Dialog.Root bind:open={dialogOpen}>
 	<Dialog.Content class="sm:max-w-md">
 		<Dialog.Header>
-			<Dialog.Title>Add API key</Dialog.Title>
-			<Dialog.Description>
-				{#if addDialogProvider}
-					{@const meta = providers.find((p) => p.provider === addDialogProvider)}
-					{#if meta}
-						<a
-							href={meta.docs_url}
-							target="_blank"
-							rel="noopener noreferrer"
-							class="inline-flex items-center gap-1 text-primary hover:underline"
-						>
-							Get a {meta.name} key <ExternalLinkIcon class="size-3" />
-						</a>
-					{/if}
-				{/if}
-			</Dialog.Description>
+			<Dialog.Title>
+				{editing ? `${replacing ? 'Replace' : 'Add'} ${editing.name} key` : 'API key'}
+			</Dialog.Title>
+			{#if editing}
+				<Dialog.Description>
+					<a
+						href={editing.docs_url}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center gap-1 text-primary transition-colors hover:text-foreground"
+					>
+						{editing.name} documentation <ExternalLinkIcon class="size-3" />
+					</a>
+				</Dialog.Description>
+			{/if}
 		</Dialog.Header>
-
 		<form
+			class="flex flex-col gap-4"
 			onsubmit={(e) => {
 				e.preventDefault();
-				if (addCanSave) handleAdd();
+				void saveKey();
 			}}
 		>
-			<div class="space-y-4 py-2">
-				{#if addRequiresUsername}
-					<FormField label="Username">
-						{#snippet children({ id })}
-							<Input
-								{id}
-								type="text"
-								bind:ref={addUsernameInput}
-								bind:value={addDialogUsername}
-								placeholder="Account username"
-								disabled={addDialogSaving}
-							/>
-						{/snippet}
-					</FormField>
-				{/if}
-				<FormField label="API key">
+			{#if editing?.requires_username}
+				<FormField label="Username">
 					{#snippet children({ id })}
-						<div class="relative">
-							<Input
-								{id}
-								type={addShowKey ? 'text' : 'password'}
-								bind:ref={addKeyInput}
-								bind:value={addDialogKeyValue}
-								placeholder="API key"
-								disabled={addDialogSaving}
-								class="pr-10"
-							/>
-							<Button
-								type="button"
-								variant="ghost"
-								size="icon"
-								class="absolute right-1.5 top-1/2 size-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-								aria-label={addShowKey ? 'Hide key' : 'Show key'}
-								aria-pressed={addShowKey}
-								onclick={() => (addShowKey = !addShowKey)}
-							>
-								{#if addShowKey}
-									<EyeOffIcon class="size-4" />
-								{:else}
-									<EyeIcon class="size-4" />
-								{/if}
-							</Button>
-						</div>
+						<Input
+							{id}
+							bind:ref={usernameInput}
+							bind:value={username}
+							autocomplete="off"
+							disabled={saving}
+						/>
 					{/snippet}
 				</FormField>
-			</div>
-
+			{/if}
+			<FormField label="API key">
+				{#snippet children({ id })}
+					<div class="relative">
+						<Input
+							{id}
+							type={showKey ? 'text' : 'password'}
+							bind:ref={keyInput}
+							bind:value={keyValue}
+							autocomplete="off"
+							spellcheck={false}
+							class="pr-10 font-mono text-xs"
+							disabled={saving}
+						/>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon"
+							class="absolute top-1/2 right-1.5 size-7 -translate-y-1/2 text-muted-foreground"
+							aria-label={showKey ? 'Hide key' : 'Show key'}
+							aria-pressed={showKey}
+							onclick={() => (showKey = !showKey)}
+						>
+							{#if showKey}<EyeOffIcon class="size-4" />{:else}<EyeIcon class="size-4" />{/if}
+						</Button>
+					</div>
+				{/snippet}
+			</FormField>
 			<Dialog.Footer>
 				<Button
 					type="button"
 					variant="outline"
-					onclick={() => (addDialogOpen = false)}
-					disabled={addDialogSaving}
+					disabled={saving}
+					onclick={() => (dialogOpen = false)}
 				>
 					Cancel
 				</Button>
-				<LoadingButton
-					type="submit"
-					loading={addDialogSaving}
-					loadingLabel="Saving"
-					disabled={!addCanSave}
-				>
-					Add key
+				<LoadingButton type="submit" loading={saving} loadingLabel="Saving" disabled={!canSave}>
+					{replacing ? 'Replace key' : 'Add key'}
 				</LoadingButton>
 			</Dialog.Footer>
 		</form>
 	</Dialog.Content>
 </Dialog.Root>
 
-<DeleteConfirmationDialog
-	bind:open={deleteDialogOpen}
+<ConfirmDialog
+	open={removing !== null}
 	title="Remove API key"
-	description={deletingProvider
-		? `The ${providers.find((p) => p.provider === deletingProvider)?.name ?? 'provider'} key is removed.`
-		: ''}
+	description={removing ? `The ${removing.name} key is removed.` : ''}
 	confirmLabel="Remove"
-	{isDeleting}
-	onOpenChange={(open) => (deleteDialogOpen = open)}
-	onConfirm={handleDelete}
+	destructive
+	loading={deleting}
+	onOpenChange={(open) => {
+		if (!open) removing = null;
+	}}
+	onConfirm={remove}
 />
-
-<Dialog.Root bind:open={testDialogOpen}>
-	<Dialog.Content class="sm:max-w-md">
-		<Dialog.Header>
-			<Dialog.Title>Test API key</Dialog.Title>
-			<Dialog.Description>
-				One call is made against the
-				{providers.find((p) => p.provider === testDialogProvider)?.name ?? 'provider'} quota.
-			</Dialog.Description>
-		</Dialog.Header>
-		<Dialog.Footer>
-			<Button
-				variant="outline"
-				onclick={() => (testDialogOpen = false)}
-				disabled={testingKeyId !== null}
-			>
-				Cancel
-			</Button>
-			<LoadingButton
-				loading={testingKeyId !== null}
-				loadingLabel="Testing"
-				onclick={async () => {
-					if (testDialogKeyId) {
-						testDialogOpen = false;
-						await handleTest(testDialogKeyId);
-					}
-				}}
-			>
-				Test
-			</LoadingButton>
-		</Dialog.Footer>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/lib/components/settings/bounty-hub-panel.svelte b/frontend/src/lib/components/settings/bounty-hub-panel.svelte
deleted file mode 100644
index cfdccdd61..000000000
--- a/frontend/src/lib/components/settings/bounty-hub-panel.svelte
+++ /dev/null
@@ -1,276 +0,0 @@
-<script lang="ts">
-	import { Skeleton } from '$lib/components/ui/skeleton';
-	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
-	import { toast } from 'svelte-sonner';
-	import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
-	import * as Select from '$lib/components/ui/select';
-	import { Switch } from '$lib/components/ui/switch';
-	import EmptyState from '$lib/components/empty-state.svelte';
-	import SectionHead from '$lib/components/section-head.svelte';
-	import CertificateStreamCard from './certificate-stream-card.svelte';
-	import ConnectAlert from '$lib/components/bounty-hub/connect-alert.svelte';
-	import { bountyProgramsApi } from '$lib/api/bounty-programs';
-	import {
-		EVENT_TONE,
-		EVENT_TONE_BG,
-		SYNC_INTERVAL_LABELS,
-		assetIcon
-	} from '$lib/config/bounty-programs';
-	import { ROUTES } from '$lib/config/routes';
-	import { relativeTime } from '$lib/utilities/dates';
-	import type {
-		BountyEventSpec,
-		BountySettings,
-		BountyVocabulary
-	} from '$lib/types/bounty-program';
-
-	let settings = $state<BountySettings | null>(null);
-	let vocabulary = $state<BountyVocabulary | null>(null);
-	let loading = $state(true);
-	let loadError = $state<string | null>(null);
-	let saving = $state(false);
-
-	async function load() {
-		loading = true;
-		try {
-			[settings, vocabulary] = await Promise.all([
-				bountyProgramsApi.settings(),
-				bountyProgramsApi.vocabulary()
-			]);
-			loadError = null;
-		} catch (error) {
-			loadError = error instanceof Error ? error.message : 'Request failed.';
-			toast.error(error instanceof Error ? error.message : 'Bounty Hub settings not loaded');
-		} finally {
-			loading = false;
-		}
-	}
-
-	$effect(() => {
-		void load();
-	});
-
-	const platforms = $derived(settings?.platforms ?? []);
-	const connected = $derived(platforms.filter((p) => p.configured));
-	const fedPlatforms = $derived(platforms.filter((p) => p.has_feed));
-
-	const specs = $derived<BountyEventSpec[]>(
-		(settings?.notifiable_events ?? [])
-			.map((kind) => vocabulary?.events.find((e) => e.kind === kind))
-			.filter((e): e is BountyEventSpec => Boolean(e))
-	);
-
-	async function save(patch: Parameters<typeof bountyProgramsApi.saveSettings>[0]) {
-		saving = true;
-		try {
-			settings = await bountyProgramsApi.saveSettings(patch);
-		} catch (error) {
-			toast.error(error instanceof Error ? error.message : 'Settings not saved');
-			await load();
-		} finally {
-			saving = false;
-		}
-	}
-
-	function toggleEvent(kind: string, on: boolean) {
-		const current = settings?.notify_events ?? [];
-		const next = on ? [...current, kind] : current.filter((k) => k !== kind);
-		void save({ notify_events: [...new Set(next)] });
-	}
-</script>
-
-{#if loading}
-	<div class="flex flex-col gap-6" aria-busy="true">
-		{#each Array(3) as _, i (i)}
-			<div class="flex flex-col gap-3 rounded-xl border p-4">
-				<Skeleton class="h-4 w-40" />
-				<Skeleton class="h-3 w-64 max-w-full" />
-				<div class="flex flex-col gap-2 pt-1">
-					{#each Array(3) as _, j (j)}
-						<div class="flex items-center justify-between gap-3">
-							<Skeleton class="h-4 w-48 max-w-full" />
-							<Skeleton class="h-5 w-9 rounded-full" />
-						</div>
-					{/each}
-				</div>
-			</div>
-		{/each}
-	</div>
-{:else if settings}
-	<div class="flex flex-col gap-6">
-		<CertificateStreamCard />
-		<ConnectAlert {platforms} />
-		<Card.Root class="gap-0 py-0">
-			<div class="border-b p-4">
-				<SectionHead title="Platform APIs" count={`${connected.length} connected`}>
-					{#if settings.last_synced_at}
-						<span>Last synced {relativeTime(settings.last_synced_at)}</span>
-					{/if}
-					{#if settings.next_sync_at}
-						<span>Next {relativeTime(settings.next_sync_at)}</span>
-					{/if}
-				</SectionHead>
-			</div>
-
-			{#each connected as platform (platform.platform)}
-				<div class="flex flex-wrap items-center justify-between gap-4 border-b px-4 py-2.5 text-sm">
-					<span class="font-medium">{platform.label}</span>
-					<span class="text-xs text-muted-foreground">
-						{platform.programs.toLocaleString()} programs
-						{#if platform.private_programs > 0}
-							· {platform.private_programs.toLocaleString()} private
-						{/if}
-					</span>
-				</div>
-			{/each}
-
-			<div class="flex flex-wrap items-center justify-between gap-4 p-4">
-				<div class="flex min-w-0 flex-col gap-0.5">
-					<span class="text-sm font-medium">Sync interval</span>
-				</div>
-				<Select.Root
-					type="single"
-					value={settings.sync_interval}
-					onValueChange={(v) => v && save({ sync_interval: v })}
-				>
-					<Select.Trigger class="w-44 shrink-0">
-						{SYNC_INTERVAL_LABELS[settings.sync_interval] ?? settings.sync_interval}
-					</Select.Trigger>
-					<Select.Content>
-						{#each Object.entries(SYNC_INTERVAL_LABELS) as [value, label] (value)}
-							<Select.Item {value}>{label}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-
-			{#if settings.sync_interval === 'off'}
-				<div class="border-t px-4 py-2.5 text-xs text-muted-foreground">
-					Programs update on manual refresh only.
-				</div>
-			{/if}
-		</Card.Root>
-
-		<Card.Root class="gap-0 py-0">
-			<div class="border-b p-4">
-				<SectionHead title="Public program feed" count={`${settings.feed_programs} programs`}>
-					{#if settings.feed_synced_at}
-						<span>Last synced {relativeTime(settings.feed_synced_at)}</span>
-					{/if}
-					{#if settings.feed_next_sync_at}
-						<span>Next {relativeTime(settings.feed_next_sync_at)}</span>
-					{/if}
-				</SectionHead>
-			</div>
-
-			{#each fedPlatforms as platform (platform.platform)}
-				<div class="flex flex-wrap items-center justify-between gap-4 border-b px-4 py-2.5 text-sm">
-					<span class="font-medium">{platform.label}</span>
-					<span class="text-xs text-muted-foreground">
-						{platform.feed_programs.toLocaleString()} programs
-					</span>
-				</div>
-			{/each}
-
-			<div class="flex flex-wrap items-center justify-between gap-4 p-4">
-				<div class="flex min-w-0 flex-col gap-0.5">
-					<span class="text-sm font-medium">Sync interval</span>
-					<span class="text-xs text-muted-foreground">
-						From
-						<a
-							href={settings.feed_url}
-							target="_blank"
-							rel="noreferrer noopener"
-							class="underline hover:text-foreground"
-						>
-							{settings.feed_source}
-						</a>
-						under {settings.feed_license}. Public programs only.
-					</span>
-				</div>
-				<Select.Root
-					type="single"
-					value={settings.feed_interval}
-					onValueChange={(v) => v && save({ feed_interval: v })}
-				>
-					<Select.Trigger class="w-44 shrink-0">
-						{SYNC_INTERVAL_LABELS[settings.feed_interval] ?? settings.feed_interval}
-					</Select.Trigger>
-					<Select.Content>
-						{#each Object.entries(SYNC_INTERVAL_LABELS) as [value, label] (value)}
-							<Select.Item {value}>{label}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-		</Card.Root>
-
-		<Card.Root class="gap-0 py-0">
-			<div class="border-b p-4">
-				<SectionHead title="Notifications" count={`${settings.events_recorded} recorded`}>
-					<a href={ROUTES.settings('notifications')} class="hover:underline">
-						Channels
-						<ExternalLinkIcon class="inline size-3" />
-					</a>
-				</SectionHead>
-			</div>
-
-			<div class="flex flex-wrap items-center justify-between gap-4 p-4">
-				<div class="flex min-w-0 flex-col gap-0.5">
-					<span class="text-sm font-medium">Notify on program changes</span>
-					<span class="text-xs text-muted-foreground">
-						Sent to the inbox and every notification channel.
-					</span>
-				</div>
-				<Switch
-					checked={settings.notify}
-					disabled={saving}
-					onCheckedChange={(v) => save({ notify: v })}
-				/>
-			</div>
-
-			{#if settings.notify}
-				<div class="border-t">
-					{#each specs as spec (spec.kind)}
-						{@const Icon = assetIcon(spec.icon)}
-						{@const on = settings.notify_events.includes(spec.kind)}
-						<div class="flex items-center justify-between gap-4 border-b px-4 py-3 last:border-b-0">
-							<div class="flex min-w-0 items-start gap-3">
-								<span
-									class="flex size-7 shrink-0 items-center justify-center rounded-md {EVENT_TONE_BG[
-										spec.tone
-									] ?? 'bg-muted'}"
-								>
-									<Icon class="size-3.5 {EVENT_TONE[spec.tone] ?? 'text-muted-foreground'}" />
-								</span>
-								<div class="flex min-w-0 flex-col gap-0.5">
-									<span class="text-sm">{spec.label}</span>
-									<span class="text-xs text-muted-foreground">{spec.description}</span>
-								</div>
-							</div>
-							<Switch
-								checked={on}
-								disabled={saving}
-								onCheckedChange={(v) => toggleEvent(spec.kind, v)}
-							/>
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="border-t px-4 py-2.5 text-xs text-muted-foreground">
-					Changes are recorded in the Updates tab. Nothing is sent.
-				</div>
-			{/if}
-		</Card.Root>
-	</div>
-{:else}
-	<EmptyState
-		icon={TriangleAlert}
-		title="Bounty Hub settings not loaded"
-		description={loadError ?? undefined}
-	>
-		<Button variant="outline" size="sm" onclick={() => void load()}>Retry</Button>
-	</EmptyState>
-{/if}
diff --git a/frontend/src/lib/components/settings/certificate-stream-card.svelte b/frontend/src/lib/components/settings/certificate-stream-card.svelte
deleted file mode 100644
index 94a8379ad..000000000
--- a/frontend/src/lib/components/settings/certificate-stream-card.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import SectionHead from '$lib/components/section-head.svelte';
-	import { watchesApi } from '$lib/api/watches';
-	import { STREAM_POLL_MS } from '$lib/config/watch';
-	import { relativeTime } from '$lib/utilities/dates';
-	import type { StreamStatus } from '$lib/types/watch';
-
-	let stream = $state<StreamStatus | null>(null);
-	let failed = $state(false);
-	let timer: ReturnType<typeof setInterval> | null = null;
-
-	async function load() {
-		try {
-			stream = await watchesApi.stream();
-			failed = false;
-		} catch {
-			failed = true;
-		}
-	}
-
-	$effect(() => {
-		void load();
-		timer = setInterval(() => void load(), STREAM_POLL_MS);
-		return () => {
-			if (timer) clearInterval(timer);
-		};
-	});
-
-	const version = $derived(
-		stream?.version?.replace(/^certspotter version /, 'certspotter ').split(' (')[0]
-	);
-	const streamState = $derived.by(() => {
-		if (failed || !stream) return { label: 'Status not read', tone: 'text-muted-foreground' };
-		if (!stream.reachable) return { label: 'Not running', tone: 'text-destructive' };
-		if (stream.running) return { label: 'Connected', tone: 'text-success' };
-		return { label: 'Idle', tone: 'text-muted-foreground' };
-	});
-</script>
-
-<Card.Root class="gap-0 py-0">
-	<div class="border-b p-4">
-		<SectionHead title="Certificate stream" count={version}>
-			<span>Certificate transparency for the watched apexes</span>
-		</SectionHead>
-	</div>
-	<div class="grid grid-cols-2 gap-px bg-border sm:grid-cols-4">
-		<div class="flex flex-col gap-0.5 bg-card px-4 py-3">
-			<span class="text-2xs tracking-wide text-muted-foreground uppercase">Stream</span>
-			<span class="text-sm font-medium {streamState.tone}">{streamState.label}</span>
-		</div>
-		<div class="flex flex-col gap-0.5 bg-card px-4 py-3">
-			<span class="text-2xs tracking-wide text-muted-foreground uppercase">Watched apexes</span>
-			<span class="text-sm font-medium tabular-nums">{stream ? stream.items : 'Not read'}</span>
-		</div>
-		<div class="flex flex-col gap-0.5 bg-card px-4 py-3">
-			<span class="text-2xs tracking-wide text-muted-foreground uppercase">Last certificate</span>
-			<span class="text-sm font-medium">
-				{#if !stream}
-					Not read
-				{:else}
-					{stream.last_certificate_at ? relativeTime(stream.last_certificate_at) : 'None yet'}
-				{/if}
-			</span>
-		</div>
-		<div class="flex flex-col gap-0.5 bg-card px-4 py-3">
-			<span class="text-2xs tracking-wide text-muted-foreground uppercase">Since start</span>
-			<span class="text-sm font-medium tabular-nums">
-				{#if !stream}
-					Not read
-				{:else}
-					{stream.certificates_seen}
-					{stream.certificates_seen === 1 ? 'certificate' : 'certificates'}
-					{#if stream.started_at}
-						<span class="text-xs font-normal text-muted-foreground">
-							· {relativeTime(stream.started_at)}
-						</span>
-					{/if}
-				{/if}
-			</span>
-		</div>
-	</div>
-	{#if stream?.last_error}
-		<div class="border-t px-4 py-2.5 text-xs text-destructive">
-			{stream.last_error}
-			{#if stream.last_error_at}
-				<span class="text-muted-foreground">· {relativeTime(stream.last_error_at)}</span>
-			{/if}
-		</div>
-	{:else if failed}
-		<div class="border-t px-4 py-2.5 text-xs text-muted-foreground">
-			The API did not respond. Check that the api service is running.
-		</div>
-	{:else if stream && !stream.reachable}
-		<div class="border-t px-4 py-2.5 text-xs text-muted-foreground">
-			The ct-stream service has not reported. Check that it is running.
-		</div>
-	{/if}
-</Card.Root>
diff --git a/frontend/src/lib/components/settings/columns.ts b/frontend/src/lib/components/settings/columns.ts
new file mode 100644
index 000000000..17c2930ad
--- /dev/null
+++ b/frontend/src/lib/components/settings/columns.ts
@@ -0,0 +1,40 @@
+export const KEY_COL = {
+	provider: 'min-w-0 flex-1',
+	key: 'hidden w-[190px] shrink-0 @2xl/keys:block',
+	status: 'w-[112px] shrink-0',
+	tested: 'hidden w-[104px] shrink-0 @xl/keys:block',
+	actions: 'flex w-[84px] shrink-0 justify-end'
+} as const;
+
+export const PROXY_COL = {
+	proxy: 'min-w-0 flex-1',
+	endpoint: 'hidden w-[230px] shrink-0 @2xl/proxies:block',
+	contexts: 'hidden w-[96px] shrink-0 @xl/proxies:block',
+	status: 'w-[128px] shrink-0',
+	actions: 'flex w-8 shrink-0 justify-end'
+} as const;
+
+export const CHANNEL_COL = {
+	channel: 'min-w-0 flex-1',
+	events: 'hidden w-[190px] shrink-0 @2xl/channels:block',
+	level: 'hidden w-[150px] shrink-0 @xl/channels:block',
+	delivery: 'w-[140px] shrink-0',
+	actions: 'flex w-8 shrink-0 justify-end'
+} as const;
+
+export const USER_COL = {
+	user: 'min-w-0 flex-1',
+	role: 'w-[104px] shrink-0',
+	twoFactor: 'hidden w-[104px] shrink-0 @xl/users:block',
+	created: 'hidden w-[120px] shrink-0 @2xl/users:block',
+	actions: 'flex w-8 shrink-0 justify-end'
+} as const;
+
+export const HEAD_ROW =
+	'flex items-center gap-4 border-b bg-muted/20 px-4 py-2 text-2xs font-medium tracking-wide text-muted-foreground uppercase';
+
+export const BODY_ROW =
+	'flex items-center gap-4 border-b border-border/60 px-4 py-2.5 last:border-b-0';
+
+export const GROUP_ROW =
+	'border-b border-border/60 bg-muted/10 px-4 pt-3 pb-1.5 text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase';
diff --git a/frontend/src/lib/components/settings/instance-settings-panel.svelte b/frontend/src/lib/components/settings/instance-settings-panel.svelte
index c5abdabe4..467714cbd 100644
--- a/frontend/src/lib/components/settings/instance-settings-panel.svelte
+++ b/frontend/src/lib/components/settings/instance-settings-panel.svelte
@@ -1,385 +1,239 @@
 <script lang="ts">
-	import { ROUTES } from '$lib/config/routes';
-	import { onMount } from 'svelte';
-	import { beforeNavigate, goto } from '$app/navigation';
-	import { instanceSettingsStore } from '$lib/stores/instanceSettings.svelte';
-	import UnsavedChangesDialog from '$lib/components/unsaved-changes-dialog.svelte';
-	import {
-		INSTANCE_MODES,
-		MODE_LABELS,
-		DEFAULT_INSTANCE_MODE,
-		coerceInstanceMode
-	} from '$lib/config/capabilities';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import EmptyState from '$lib/components/empty-state.svelte';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import { Spinner } from '$lib/components/ui/spinner/index.js';
+	import { onMount, untrack } from 'svelte';
 	import { toast } from 'svelte-sonner';
-	import { AUTOMATIC, CONCURRENT_SCAN_CHOICES } from '$lib/config/scan-admission';
-	import SparklesIcon from '@lucide/svelte/icons/sparkles';
 	import CircleAlertIcon from '@lucide/svelte/icons/circle-alert';
 	import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import EmptyState from '$lib/components/empty-state.svelte';
+	import SectionHead from '$lib/components/section-head.svelte';
+	import SettingRow from './setting-row.svelte';
+	import TimezonePicker from './timezone-picker.svelte';
+	import { instanceSettingsStore } from '$lib/stores/instanceSettings.svelte';
+	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { INSTANCE_MODES, MODE_LABELS, coerceInstanceMode } from '$lib/config/capabilities';
+	import { AUTOMATIC, CONCURRENT_SCAN_CHOICES } from '$lib/config/scan-admission';
+	import { SCAN_RETENTION, SCREENSHOT_RETENTION, retentionLabel } from '$lib/config/retention';
+	import type { InstanceSettingsUpdate } from '$lib/types/instance-settings';
 
-	const TIMEZONES = [
-		'UTC',
-		'America/New_York',
-		'America/Chicago',
-		'America/Denver',
-		'America/Los_Angeles',
-		'America/Sao_Paulo',
-		'Europe/London',
-		'Europe/Paris',
-		'Europe/Berlin',
-		'Europe/Moscow',
-		'Asia/Dubai',
-		'Asia/Kolkata',
-		'Asia/Singapore',
-		'Asia/Shanghai',
-		'Asia/Tokyo',
-		'Australia/Sydney'
-	];
-
-	const SCAN_RETENTION = [
-		{ value: '30', label: '30 days' },
-		{ value: '60', label: '60 days' },
-		{ value: '90', label: '90 days' },
-		{ value: '180', label: '180 days' },
-		{ value: '365', label: '1 year' }
-	];
-
-	const SCREENSHOT_RETENTION = [
-		{ value: '7', label: '7 days' },
-		{ value: '14', label: '14 days' },
-		{ value: '30', label: '30 days' },
-		{ value: '60', label: '60 days' },
-		{ value: '90', label: '90 days' }
-	];
-
-	let isLoading = $state(true);
-	let loadFailed = $state(false);
+	let loading = $state(true);
 	let saving = $state(false);
+	let name = $state('');
 
-	let instanceName = $state('reNgine');
-	let timezone = $state('UTC');
-	let mode = $state<string>(DEFAULT_INSTANCE_MODE);
-	let scanRetention = $state('90');
-	let screenshotRetention = $state('30');
-	let certRecheck = $state(false);
-	let concurrentScans = $state(String(AUTOMATIC));
+	const settings = $derived(instanceSettingsStore.settings);
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const locked = $derived(!isAdmin || saving);
 
-	let zoneOptions = $derived.by(() => {
-		const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
-		if (local && !TIMEZONES.includes(local)) return [local, ...TIMEZONES];
-		return TIMEZONES;
-	});
-
-	let automaticLabel = $derived.by(() => {
-		const auto = instanceSettingsStore.settings?.concurrent_scans_auto;
-		return auto ? `Automatic · ${auto}` : 'Automatic';
-	});
-	let concurrencyOptions = $derived([
+	const automaticLabel = $derived(
+		settings?.concurrent_scans_auto ? `Automatic · ${settings.concurrent_scans_auto}` : 'Automatic'
+	);
+	const concurrency = $derived([
 		{ value: String(AUTOMATIC), label: automaticLabel },
 		...CONCURRENT_SCAN_CHOICES.map((n) => ({ value: String(n), label: String(n) }))
 	]);
 
-	let modePlaceholder = $derived(
-		INSTANCE_MODES.find((m) => m.value === mode)?.label ?? MODE_LABELS[DEFAULT_INSTANCE_MODE]
-	);
-	let snapshot = $state<string | null>(null);
-
-	function currentState() {
-		return JSON.stringify({
-			instanceName: instanceName.trim(),
-			timezone,
-			mode,
-			scanRetention,
-			screenshotRetention,
-			certRecheck,
-			concurrentScans
-		});
+	async function load() {
+		loading = true;
+		await instanceSettingsStore.fetch();
+		loading = false;
 	}
 
-	let isDirty = $derived(snapshot !== null && currentState() !== snapshot);
+	onMount(() => {
+		if (instanceSettingsStore.hasFetched) loading = false;
+		else void load();
+	});
 
-	function hydrate() {
-		const s = instanceSettingsStore.settings;
-		if (!s) return;
-		instanceName = s.instance_name;
-		timezone = s.timezone;
-		mode = coerceInstanceMode(s.mode);
-		scanRetention = String(s.scan_history_retention_days);
-		screenshotRetention = String(s.screenshot_retention_days);
-		certRecheck = s.cert_recheck_enabled;
-		concurrentScans = String(s.concurrent_scans);
-		snapshot = currentState();
-	}
+	$effect(() => {
+		const current = settings?.instance_name;
+		if (current !== undefined) untrack(() => (name = current));
+	});
 
-	async function handleSave() {
-		if (!instanceSettingsStore.settings) {
-			toast.error('Settings not loaded. Retry before saving.');
-			return;
-		}
-		if (!instanceName.trim()) {
-			toast.error('Instance name is required');
-			return;
-		}
+	async function save(patch: InstanceSettingsUpdate, label: string) {
 		saving = true;
 		try {
-			const updated = await instanceSettingsStore.update({
-				instance_name: instanceName.trim(),
-				timezone,
-				mode,
-				scan_history_retention_days: Number(scanRetention),
-				screenshot_retention_days: Number(screenshotRetention),
-				cert_recheck_enabled: certRecheck,
-				concurrent_scans: Number(concurrentScans)
-			});
-			if (updated) {
-				hydrate();
-				toast.success('Settings saved');
-			}
+			const updated = await instanceSettingsStore.update(patch);
+			if (!updated) return;
+			capabilitiesStore.setMode(updated.mode);
+			capabilitiesStore.setInstanceName(updated.instance_name);
+			toast.success(`${label} saved`);
 		} finally {
 			saving = false;
 		}
 	}
 
-	async function load() {
-		isLoading = true;
-		loadFailed = false;
-		if (!instanceSettingsStore.hasFetched) await instanceSettingsStore.fetch();
-		if (instanceSettingsStore.settings) hydrate();
-		else loadFailed = true;
-		isLoading = false;
-	}
-
-	onMount(load);
-
-	let showLeaveDialog = $state(false);
-	let pendingNav: (() => void) | null = $state(null);
-	let allowNavigation = $state(false);
-
-	beforeNavigate((nav) => {
-		if (allowNavigation) {
-			allowNavigation = false;
+	function commitName() {
+		if (!settings) return;
+		const next = name.trim();
+		if (next === settings.instance_name) return;
+		if (!next) {
+			name = settings.instance_name;
+			toast.error('Instance name is required');
 			return;
 		}
-		if (!isDirty || saving || pendingNav) return;
-		nav.cancel();
-		pendingNav = () => {
-			allowNavigation = true;
-			if (nav.to) goto(nav.to.url);
-		};
-		showLeaveDialog = true;
-	});
-
-	$effect(() => {
-		if (typeof window === 'undefined') return;
-		function onBeforeUnload(e: BeforeUnloadEvent) {
-			if (!isDirty || saving) return;
-			e.preventDefault();
-		}
-		window.addEventListener('beforeunload', onBeforeUnload);
-		return () => window.removeEventListener('beforeunload', onBeforeUnload);
-	});
+		void save({ instance_name: next }, 'Instance name');
+	}
 </script>
 
-<div class="space-y-6">
-	<div>
-		<h2 class="text-lg font-semibold tracking-tight">General</h2>
-		<p class="text-sm text-muted-foreground">
-			Instance identity, scan concurrency, retention windows and AI analysis.
-		</p>
-	</div>
+{#if loading && !settings}
+	<Card.Root class="gap-3 p-5">
+		<Skeleton class="h-4 w-24" />
+		<Skeleton class="h-9 w-full" />
+		<Skeleton class="h-9 w-full" />
+		<Skeleton class="h-9 w-full" />
+	</Card.Root>
+{:else if !settings}
+	<EmptyState compact icon={CircleAlertIcon} title="Settings not loaded">
+		<Button variant="outline" size="sm" onclick={load}>
+			<RotateCwIcon class="size-3.5" />
+			Retry
+		</Button>
+	</EmptyState>
+{:else}
+	<Card.Root class="gap-0 overflow-hidden py-0">
+		<div class="px-5 pt-4 pb-2"><SectionHead title="Instance" /></div>
+		<SettingRow
+			label="Name"
+			help="Shown in browser tab titles"
+			for="instance-name"
+			class="border-t-0"
+		>
+			<Input
+				id="instance-name"
+				bind:value={name}
+				maxlength={120}
+				autocomplete="off"
+				class="h-9 w-60"
+				disabled={locked}
+				onblur={commitName}
+				onkeydown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
+			/>
+		</SettingRow>
+		<SettingRow label="Time zone" help="Schedules and What's new dates" for="instance-timezone">
+			<TimezonePicker
+				id="instance-timezone"
+				value={settings.timezone}
+				disabled={locked}
+				onChange={(zone) => save({ timezone: zone }, 'Time zone')}
+			/>
+		</SettingRow>
+		<SettingRow
+			label="Mode"
+			help="Bug bounty adds Bounty Hub, program watches and recon presets"
+			for="instance-mode"
+		>
+			<Select.Root
+				type="single"
+				value={coerceInstanceMode(settings.mode)}
+				onValueChange={(v) => v && v !== settings.mode && save({ mode: v }, 'Mode')}
+				disabled={locked}
+			>
+				<Select.Trigger id="instance-mode" class="h-9 w-60">
+					{MODE_LABELS[coerceInstanceMode(settings.mode)]}
+				</Select.Trigger>
+				<Select.Content>
+					{#each INSTANCE_MODES as mode (mode.value)}
+						<Select.Item value={mode.value} label={mode.label}>{mode.label}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</SettingRow>
 
-	<Separator />
+		<div class="border-t px-5 pt-4 pb-2"><SectionHead title="Scanning" /></div>
+		<SettingRow
+			label="Concurrent scans"
+			help="Scans past the limit wait in launch order"
+			for="instance-concurrency"
+			class="border-t-0"
+		>
+			<Select.Root
+				type="single"
+				value={String(settings.concurrent_scans)}
+				onValueChange={(v) =>
+					v !== undefined &&
+					Number(v) !== settings.concurrent_scans &&
+					save({ concurrent_scans: Number(v) }, 'Concurrent scans')}
+				disabled={locked}
+			>
+				<Select.Trigger id="instance-concurrency" class="h-9 w-60">
+					{concurrency.find((o) => o.value === String(settings.concurrent_scans))?.label ??
+						settings.concurrent_scans}
+				</Select.Trigger>
+				<Select.Content>
+					{#each concurrency as option (option.value)}
+						<Select.Item value={option.value} label={option.label}>{option.label}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</SettingRow>
+		<SettingRow
+			label="Re-check certificates"
+			help="Refreshes certificate expiry between scans"
+			for="instance-cert-recheck"
+		>
+			<Switch
+				id="instance-cert-recheck"
+				checked={settings.cert_recheck_enabled}
+				disabled={locked}
+				onCheckedChange={(v) => save({ cert_recheck_enabled: v }, 'Certificate re-check')}
+			/>
+		</SettingRow>
 
-	{#if isLoading}
-		<div class="space-y-4">
-			<Skeleton class="h-40 w-full rounded-xl" />
-			<Skeleton class="h-40 w-full rounded-xl" />
-		</div>
-	{:else if loadFailed}
-		<EmptyState class="py-16" icon={CircleAlertIcon} title="Settings not loaded">
-			<Button onclick={load} class="gap-2">
-				<RotateCwIcon class="size-4" />
-				Retry
-			</Button>
-		</EmptyState>
-	{:else}
-		<Card.Root>
-			<Card.Header>
-				<Card.Title class="text-base">Instance</Card.Title>
-				<Card.Description>Name, time zone and mode.</Card.Description>
-			</Card.Header>
-			<Card.Content class="space-y-5">
-				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-					<div class="space-y-1.5">
-						<Label class="text-xs" for="instance-name">Instance name</Label>
-						<Input
-							id="instance-name"
-							bind:value={instanceName}
-							placeholder="reNgine"
-							class="h-9"
-							disabled={saving}
-						/>
-					</div>
-					<div class="space-y-1.5">
-						<Label class="text-xs">Time zone</Label>
-						<Select.Root type="single" bind:value={timezone}>
-							<Select.Trigger class="h-9 w-full text-sm">{timezone}</Select.Trigger>
-							<Select.Content>
-								{#each zoneOptions as tz (tz)}
-									<Select.Item value={tz} label={tz}>{tz}</Select.Item>
-								{/each}
-							</Select.Content>
-						</Select.Root>
-					</div>
-				</div>
+		<div class="border-t px-5 pt-4 pb-2"><SectionHead title="Retention" /></div>
+		<SettingRow
+			label="Scan history"
+			help="Excludes the newest run of each target"
+			for="instance-scan-retention"
+			class="border-t-0"
+		>
+			<Select.Root
+				type="single"
+				value={String(settings.scan_history_retention_days)}
+				onValueChange={(v) =>
+					v !== undefined &&
+					Number(v) !== settings.scan_history_retention_days &&
+					save({ scan_history_retention_days: Number(v) }, 'Scan history retention')}
+				disabled={locked}
+			>
+				<Select.Trigger id="instance-scan-retention" class="h-9 w-60">
+					{retentionLabel(SCAN_RETENTION, String(settings.scan_history_retention_days))}
+				</Select.Trigger>
+				<Select.Content>
+					{#each SCAN_RETENTION as option (option.value)}
+						<Select.Item value={option.value} label={option.label}>{option.label}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</SettingRow>
+		<SettingRow label="Screenshots and response bodies" for="instance-evidence-retention">
+			<Select.Root
+				type="single"
+				value={String(settings.screenshot_retention_days)}
+				onValueChange={(v) =>
+					v !== undefined &&
+					Number(v) !== settings.screenshot_retention_days &&
+					save({ screenshot_retention_days: Number(v) }, 'Evidence retention')}
+				disabled={locked}
+			>
+				<Select.Trigger id="instance-evidence-retention" class="h-9 w-60">
+					{retentionLabel(SCREENSHOT_RETENTION, String(settings.screenshot_retention_days))}
+				</Select.Trigger>
+				<Select.Content>
+					{#each SCREENSHOT_RETENTION as option (option.value)}
+						<Select.Item value={option.value} label={option.label}>{option.label}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</SettingRow>
 
-				<div class="space-y-1.5">
-					<Label class="text-xs">Mode</Label>
-					<Select.Root type="single" bind:value={mode}>
-						<Select.Trigger class="h-9 w-full text-sm sm:w-72">{modePlaceholder}</Select.Trigger>
-						<Select.Content>
-							{#each INSTANCE_MODES as m (m.value)}
-								<Select.Item value={m.value} label={m.label}>{m.label}</Select.Item>
-							{/each}
-						</Select.Content>
-					</Select.Root>
-					<p class="text-xs text-muted-foreground">
-						Sets which integrations and scoping options appear.
-					</p>
-				</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header>
-				<Card.Title class="text-base">Data retention</Card.Title>
-				<Card.Description>Runs and their evidence are pruned daily.</Card.Description>
-			</Card.Header>
-			<Card.Content>
-				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-					<div class="space-y-1.5">
-						<Label class="text-xs">Scan history</Label>
-						<Select.Root type="single" bind:value={scanRetention}>
-							<Select.Trigger class="h-9 w-full text-sm">
-								{SCAN_RETENTION.find((o) => o.value === scanRetention)?.label ?? '90 days'}
-							</Select.Trigger>
-							<Select.Content>
-								{#each SCAN_RETENTION as o (o.value)}
-									<Select.Item value={o.value} label={o.label}>{o.label}</Select.Item>
-								{/each}
-							</Select.Content>
-						</Select.Root>
-					</div>
-					<div class="space-y-1.5">
-						<Label class="text-xs">Screenshots and response bodies</Label>
-						<Select.Root type="single" bind:value={screenshotRetention}>
-							<Select.Trigger class="h-9 w-full text-sm">
-								{SCREENSHOT_RETENTION.find((o) => o.value === screenshotRetention)?.label ??
-									'30 days'}
-							</Select.Trigger>
-							<Select.Content>
-								{#each SCREENSHOT_RETENTION as o (o.value)}
-									<Select.Item value={o.value} label={o.label}>{o.label}</Select.Item>
-								{/each}
-							</Select.Content>
-						</Select.Root>
-					</div>
-				</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header>
-				<Card.Title class="text-base">Scans</Card.Title>
-				<Card.Description>Scans past the limit wait in launch order.</Card.Description>
-			</Card.Header>
-			<Card.Content>
-				<div class="space-y-1.5">
-					<Label class="text-xs">Concurrent scans</Label>
-					<Select.Root type="single" bind:value={concurrentScans}>
-						<Select.Trigger class="h-9 w-full text-sm sm:w-72">
-							{concurrencyOptions.find((o) => o.value === concurrentScans)?.label ??
-								concurrentScans}
-						</Select.Trigger>
-						<Select.Content>
-							{#each concurrencyOptions as o (o.value)}
-								<Select.Item value={o.value} label={o.label}>{o.label}</Select.Item>
-							{/each}
-						</Select.Content>
-					</Select.Root>
-					<p class="text-xs text-muted-foreground">
-						Automatic follows the stage slots of the running scan workers.
-					</p>
-				</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header>
-				<Card.Title class="text-base">Between scans</Card.Title>
-				<Card.Description
-					>Opens one TLS connection to each web asset every few hours to refresh certificate expiry.</Card.Description
-				>
-			</Card.Header>
-			<Card.Content>
-				<div class="flex items-center justify-between gap-4">
-					<Label class="text-xs" for="cert-recheck">Re-check certificates</Label>
-					<Switch id="cert-recheck" bind:checked={certRecheck} />
-				</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header>
-				<div class="flex items-center gap-2">
-					<SparklesIcon class="size-4 text-foreground" />
-					<Card.Title class="text-base">AI</Card.Title>
-				</div>
-				<Card.Description>Model connection, feature opt-ins and cost.</Card.Description>
-			</Card.Header>
-			<Card.Content>
-				<Button variant="outline" size="sm" href={ROUTES.ai()}>
-					<SparklesIcon class="mr-1.5 size-3.5" />
-					Open AI page
-				</Button>
-			</Card.Content>
-		</Card.Root>
-
-		<div class="flex items-center justify-end gap-3">
-			{#if isDirty}
-				<span class="text-xs text-muted-foreground">Unsaved changes</span>
-			{/if}
-			<Button onclick={handleSave} disabled={saving || !isDirty}>
-				{#if saving}
-					<Spinner class="mr-2" />
-					Saving
-				{:else}
-					Save changes
-				{/if}
-			</Button>
-		</div>
-	{/if}
-</div>
-
-<UnsavedChangesDialog
-	bind:open={showLeaveDialog}
-	onOpenChange={(o) => {
-		showLeaveDialog = o;
-		if (!o) pendingNav = null;
-	}}
-	onConfirm={() => {
-		showLeaveDialog = false;
-		const resume = pendingNav;
-		pendingNav = null;
-		resume?.();
-	}}
-/>
+		{#if !isAdmin}
+			<div class="border-t px-5 py-2.5 text-xs text-muted-foreground">
+				Editable by administrators.
+			</div>
+		{/if}
+	</Card.Root>
+{/if}
diff --git a/frontend/src/lib/components/settings/notification-channels-panel.svelte b/frontend/src/lib/components/settings/notification-channels-panel.svelte
index e5786a57f..0addbe327 100644
--- a/frontend/src/lib/components/settings/notification-channels-panel.svelte
+++ b/frontend/src/lib/components/settings/notification-channels-panel.svelte
@@ -1,58 +1,64 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import BellIcon from '@lucide/svelte/icons/bell';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+	import EyeIcon from '@lucide/svelte/icons/eye';
+	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+	import FlaskConicalIcon from '@lucide/svelte/icons/flask-conical';
+	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
+	import MoreVerticalIcon from '@lucide/svelte/icons/more-vertical';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { Spinner } from '$lib/components/ui/spinner/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
+	import EmptyState from '$lib/components/empty-state.svelte';
+	import FormField from '$lib/components/form-field.svelte';
+	import Hint from '$lib/components/hint.svelte';
+	import LoadingButton from '$lib/components/loading-button.svelte';
 	import { notificationChannelsStore } from '$lib/stores/notificationChannels.svelte';
-	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
-	import { Capability } from '$lib/config/capabilities';
 	import { notificationChannelsApi } from '$lib/api/notificationChannels';
+	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { settingsActions } from '$lib/stores/settings-actions.svelte';
 	import {
-		NOTIF_CATEGORIES,
-		NOTIF_SEVERITIES,
-		defaultNotificationPreference,
-		type NotificationChannelRead,
-		type NotificationPreference,
-		type NotifProvider
-	} from '$lib/types/notification-channel';
+		CHANNEL_LEVELS,
+		DEFAULT_CHANNEL_LEVEL,
+		channelEventsFor
+	} from '$lib/config/notification-events';
 	import {
 		NOTIFICATION_PROVIDERS as PROVIDERS,
 		notificationProviderMeta as metaFor,
 		type ProviderMeta
 	} from '$lib/config/notification-providers';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
-	import * as InputGroup from '$lib/components/ui/input-group/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import { Spinner } from '$lib/components/ui/spinner/index.js';
-	import DeleteConfirmationDialog from '$lib/components/delete-confirmation-dialog.svelte';
-	import SelectionDeleteBar from '$lib/components/selection-delete-bar.svelte';
-	import LoadingButton from '$lib/components/loading-button.svelte';
-	import FormField from '$lib/components/form-field.svelte';
-	import { toast } from 'svelte-sonner';
-	import BellIcon from '@lucide/svelte/icons/bell';
-	import PlusIcon from '@lucide/svelte/icons/plus';
-	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-	import Pencil from '@lucide/svelte/icons/pencil';
-	import Trash2Icon from '@lucide/svelte/icons/trash-2';
-	import FlaskConicalIcon from '@lucide/svelte/icons/flask-conical';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import CircleXIcon from '@lucide/svelte/icons/circle-x';
-	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
-	import EyeIcon from '@lucide/svelte/icons/eye';
-	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
-	import { formatDate } from '$lib/utilities';
-	import { SvelteSet } from 'svelte/reactivity';
+	import {
+		defaultNotificationPreference,
+		type NotificationChannelRead,
+		type NotificationPreference,
+		type NotifProvider
+	} from '$lib/types/notification-channel';
+	import { relativeTime } from '$lib/utilities/dates';
+	import { BODY_ROW, CHANNEL_COL, HEAD_ROW } from './columns';
+	import { CHECK_DOT, type CheckState } from './status';
 
-	let isLoading = $state(true);
+	let loading = $state(true);
+	let loadFailed = $state(false);
 	let testingId = $state<string | null>(null);
 
 	let dialogOpen = $state(false);
@@ -66,76 +72,89 @@
 	let revealed = $state<Record<string, boolean>>({});
 	let saving = $state(false);
 	let testingDraft = $state(false);
-
 	let nameError = $state('');
-	let categoryError = $state('');
+	let eventsError = $state('');
 	let fieldErrors = $state<Record<string, string>>({});
 
-	let deleteOpen = $state(false);
-	let deletingChannel = $state<NotificationChannelRead | null>(null);
-	let isDeleting = $state(false);
+	let removing = $state<NotificationChannelRead | null>(null);
+	let deleting = $state(false);
 
-	let channels = $derived(notificationChannelsStore.channels);
-	const picked = new SvelteSet<string>();
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const channels = $derived(notificationChannelsStore.channels);
+	const events = $derived(channelEventsFor((c) => capabilitiesStore.has(c)));
+	const formMeta = $derived(metaFor(formProvider));
+	const levelLabel = $derived(
+		CHANNEL_LEVELS.find((l) => l.value === formPref.min_severity)?.label ?? CHANNEL_LEVELS[0].label
+	);
+	const allEvents = $derived(events.every((e) => formPref.types.includes(e.type)));
 
-	function toggleCheck(id: string) {
-		if (picked.has(id)) picked.delete(id);
-		else picked.add(id);
+	async function load() {
+		loading = true;
+		await notificationChannelsStore.fetch();
+		loadFailed = !notificationChannelsStore.hasFetched;
+		loading = false;
+	}
+
+	onMount(() => {
+		if (!isAdmin) loading = false;
+		else if (notificationChannelsStore.hasFetched) loading = false;
+		else void load();
+	});
+
+	function eventSummary(channel: NotificationChannelRead): string {
+		const chosen = events.filter((e) => channel.events?.types?.includes(e.type));
+		if (chosen.length === events.length) return 'All events';
+		if (chosen.length === 0) return 'No events';
+		if (chosen.length <= 2) return chosen.map((e) => e.label).join(', ');
+		return `${chosen.length} of ${events.length} events`;
+	}
+
+	function levelOf(channel: NotificationChannelRead): string {
+		const value = channel.events?.min_severity ?? DEFAULT_CHANNEL_LEVEL;
+		return CHANNEL_LEVELS.find((l) => l.value === value)?.label ?? value;
+	}
+
+	function delivery(channel: NotificationChannelRead): {
+		check: CheckState;
+		label: string;
+		message: string | null;
+	} {
+		if (!channel.is_active) return { check: 'off', label: 'Disabled', message: null };
+		if (channel.last_sent_at) {
+			return {
+				check: channel.last_sent_ok ? 'ok' : 'failed',
+				label: channel.last_sent_ok
+					? `Sent ${relativeTime(channel.last_sent_at)}`
+					: `Failed ${relativeTime(channel.last_sent_at)}`,
+				message: channel.last_sent_ok ? null : channel.last_sent_message
+			};
+		}
+		if (channel.last_test_at) {
+			return {
+				check: channel.last_test_ok ? 'ok' : 'failed',
+				label: `Tested ${relativeTime(channel.last_test_at)}`,
+				message: channel.last_test_ok ? null : channel.last_test_message
+			};
+		}
+		return { check: 'untested', label: 'Nothing sent', message: null };
 	}
-	let formMeta = $derived(metaFor(formProvider));
-	let severityLabel = $derived(
-		NOTIF_SEVERITIES.find((s) => s.value === formPref.min_severity)?.label ?? 'Everything'
-	);
-	let twoColumnFields = $derived(formMeta.fields.length > 2);
-	const categories = $derived(
-		NOTIF_CATEGORIES.filter(
-			(c) => c.value !== 'watch' || capabilitiesStore.has(Capability.PROGRAM_WATCHES)
-		)
-	);
-	let allCategories = $derived(formPref.types.length === categories.length);
 
 	function applyDefaults(meta: ProviderMeta) {
-		const cfg: Record<string, unknown> = {};
-		for (const f of meta.fields) {
-			if (f.default !== undefined) cfg[f.key] = f.default;
+		const config: Record<string, unknown> = {};
+		for (const field of meta.fields) {
+			if (field.default !== undefined) config[field.key] = field.default;
 		}
-		formConfig = cfg;
+		formConfig = config;
 		formMasked = {};
 	}
 
 	function clearErrors() {
 		nameError = '';
-		categoryError = '';
+		eventsError = '';
 		fieldErrors = {};
 		revealed = {};
 	}
 
-	function toggleAllCategories() {
-		formPref = {
-			...formPref,
-			types: allCategories ? [] : categories.map((c) => c.value)
-		};
-		if (categoryError) categoryError = '';
-	}
-
-	async function handleTestDraft() {
-		const config = buildConfig();
-		if (config === null) {
-			toast.error('Complete the connection fields');
-			return;
-		}
-		testingDraft = true;
-		try {
-			const result = await notificationChannelsApi.testConfig({ provider: formProvider, config });
-			if (result.success) toast.success(result.message);
-			else toast.error(result.message);
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'Test failed');
-		} finally {
-			testingDraft = false;
-		}
-	}
-
 	function openAdd() {
 		editingId = null;
 		formProvider = PROVIDERS[0].provider;
@@ -147,31 +166,30 @@
 		dialogOpen = true;
 	}
 
-	function openEdit(c: NotificationChannelRead) {
-		editingId = c.id;
-		formProvider = c.provider as NotifProvider;
-		formName = c.name;
-		formActive = c.is_active;
+	function openEdit(channel: NotificationChannelRead) {
+		editingId = channel.id;
+		formProvider = channel.provider as NotifProvider;
+		formName = channel.name;
+		formActive = channel.is_active;
 		formConfig = {};
 		formMasked = {};
-		const meta = metaFor(c.provider);
-		for (const f of meta.fields) {
-			if (f.kind === 'secret') {
-				formMasked[f.key] = (c.config_masked[f.key] ?? '') !== '';
-			} else if (c.config_masked[f.key] !== undefined) {
-				formConfig[f.key] = c.config_masked[f.key];
-			} else if (f.default !== undefined) {
-				formConfig[f.key] = f.default;
+		for (const field of metaFor(channel.provider).fields) {
+			if (field.kind === 'secret') {
+				formMasked[field.key] = (channel.config_masked[field.key] ?? '') !== '';
+			} else if (channel.config_masked[field.key] !== undefined) {
+				formConfig[field.key] = channel.config_masked[field.key];
+			} else if (field.default !== undefined) {
+				formConfig[field.key] = field.default;
 			}
 		}
-		formPref = { ...defaultNotificationPreference(), ...c.events };
+		formPref = { ...defaultNotificationPreference(), ...channel.events };
 		clearErrors();
 		dialogOpen = true;
 	}
 
-	function setProvider(v: string) {
-		formProvider = v as NotifProvider;
-		applyDefaults(metaFor(v));
+	function setProvider(value: string) {
+		formProvider = value as NotifProvider;
+		applyDefaults(metaFor(value));
 		fieldErrors = {};
 	}
 
@@ -185,65 +203,51 @@
 		}
 	}
 
-	function toggleCategory(value: string, on: boolean) {
-		const set = new SvelteSet(formPref.types);
-		if (on) set.add(value);
-		else set.delete(value);
-		formPref = { ...formPref, types: [...set] };
-		if (categoryError) categoryError = '';
+	function toggleEvent(type: string, on: boolean) {
+		const rest = formPref.types.filter((t) => t !== type);
+		formPref = { ...formPref, types: on ? [...rest, type] : rest };
+		eventsError = '';
+	}
+
+	function toggleAll() {
+		formPref = { ...formPref, types: allEvents ? [] : events.map((e) => e.type) };
+		eventsError = '';
 	}
 
 	function buildConfig(): Record<string, unknown> | null {
 		const out: Record<string, unknown> = {};
 		const errors: Record<string, string> = {};
-		for (const f of formMeta.fields) {
-			const raw = formConfig[f.key];
-			if (f.kind === 'bool') {
-				out[f.key] = raw === undefined ? (f.default ?? false) : !!raw;
+		for (const field of formMeta.fields) {
+			const raw = formConfig[field.key];
+			if (field.kind === 'bool') {
+				out[field.key] = raw === undefined ? (field.default ?? false) : !!raw;
 				continue;
 			}
-			if (f.kind === 'number') {
+			if (field.kind === 'number') {
 				if (raw === '' || raw === undefined) {
-					if (f.default !== undefined) out[f.key] = Number(f.default);
-					else if (f.required) errors[f.key] = `${f.label} is required`;
+					if (field.default !== undefined) out[field.key] = Number(field.default);
+					else if (field.required) errors[field.key] = `${field.label} is required`;
 					continue;
 				}
 				const n = Number(raw);
-				if (!Number.isFinite(n)) errors[f.key] = `${f.label} must be a number`;
-				else out[f.key] = n;
+				if (!Number.isFinite(n)) errors[field.key] = `${field.label} must be a number`;
+				else out[field.key] = n;
 				continue;
 			}
-			const val = String(raw ?? '').trim();
-			if (val) {
-				out[f.key] = val;
-			} else if (f.kind === 'secret' && editingId) {
-				continue;
-			} else if (f.required) {
-				errors[f.key] = `${f.label} is required`;
-			}
+			const value = String(raw ?? '').trim();
+			if (value) out[field.key] = value;
+			else if (field.kind === 'secret' && editingId) continue;
+			else if (field.required) errors[field.key] = `${field.label} is required`;
 		}
 		fieldErrors = errors;
 		return Object.keys(errors).length > 0 ? null : out;
 	}
 
-	async function handleSave() {
-		nameError = '';
-		categoryError = '';
-		let invalid = false;
-		if (!formName.trim()) {
-			nameError = 'Channel name is required';
-			invalid = true;
-		}
-		if (formPref.types.length === 0) {
-			categoryError = 'Select at least one notification category';
-			invalid = true;
-		}
+	async function save() {
+		nameError = formName.trim() ? '' : 'Channel name is required';
+		eventsError = formPref.types.length ? '' : 'Select at least one event';
 		const config = buildConfig();
-		if (config === null || invalid) {
-			toast.error('Correct the highlighted fields');
-			return;
-		}
-
+		if (config === null || nameError || eventsError) return;
 		saving = true;
 		try {
 			if (editingId) {
@@ -254,7 +258,7 @@
 					events: formPref
 				});
 				if (updated) {
-					toast.success('Channel updated');
+					toast.success('Channel saved');
 					dialogOpen = false;
 				}
 			} else {
@@ -275,10 +279,25 @@
 		}
 	}
 
-	async function handleTest(id: string) {
-		testingId = id;
+	async function testDraft() {
+		const config = buildConfig();
+		if (config === null) return;
+		testingDraft = true;
 		try {
-			const result = await notificationChannelsStore.test(id);
+			const result = await notificationChannelsApi.testConfig({ provider: formProvider, config });
+			if (result.success) toast.success(result.message);
+			else toast.error(result.message);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Test not sent');
+		} finally {
+			testingDraft = false;
+		}
+	}
+
+	async function test(channel: NotificationChannelRead) {
+		testingId = channel.id;
+		try {
+			const result = await notificationChannelsStore.test(channel.id);
 			if (!result) return;
 			if (result.success) toast.success(result.message);
 			else toast.error(result.message);
@@ -287,195 +306,135 @@
 		}
 	}
 
-	function openDelete(c: NotificationChannelRead) {
-		deletingChannel = c;
-		deleteOpen = true;
+	async function setActive(channel: NotificationChannelRead, active: boolean) {
+		const updated = await notificationChannelsStore.update(channel.id, { is_active: active });
+		if (updated) toast.success(`Channel ${active ? 'enabled' : 'disabled'}`);
 	}
 
-	async function handleDelete() {
-		if (!deletingChannel) return;
-		isDeleting = true;
+	async function remove() {
+		const channel = removing;
+		if (!channel) return;
+		deleting = true;
 		try {
-			const ok = await notificationChannelsStore.remove(deletingChannel.id);
-			if (ok) {
+			if (await notificationChannelsStore.remove(channel.id)) {
 				toast.success('Channel removed');
-				deleteOpen = false;
+				removing = null;
 			}
 		} finally {
-			isDeleting = false;
+			deleting = false;
 		}
 	}
 
-	function summaryLine(c: NotificationChannelRead): string {
-		const n = c.events?.types?.length ?? 0;
-		return `${n} categor${n === 1 ? 'y' : 'ies'}`;
-	}
-
-	onMount(async () => {
-		if (!notificationChannelsStore.hasFetched) await notificationChannelsStore.fetch();
-		isLoading = false;
+	$effect(() => {
+		if (!isAdmin) return;
+		settingsActions.set(addAction);
+		return () => settingsActions.clear(addAction);
 	});
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start justify-between">
-		<div>
-			<h2 class="text-lg font-semibold tracking-tight">Notifications</h2>
-			<p class="text-sm text-muted-foreground">Scan events sent to external channels.</p>
-		</div>
+{#snippet addAction()}
+	<Button size="sm" onclick={openAdd}>
+		<PlusIcon class="size-4" />
+		Add channel
+	</Button>
+{/snippet}
+
+{#if !isAdmin}
+	<EmptyState compact icon={BellIcon} title="Notifications are managed by administrators" />
+{:else if loading}
+	<Card.Root class="gap-3 p-4">
+		<Skeleton class="h-8 w-full" />
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-10 w-full" />
+	</Card.Root>
+{:else if loadFailed}
+	<EmptyState compact icon={TriangleAlertIcon} title="Notification channels not loaded">
+		<Button variant="outline" size="sm" onclick={load}>
+			<RotateCwIcon class="size-3.5" />
+			Retry
+		</Button>
+	</EmptyState>
+{:else if channels.length === 0}
+	<EmptyState
+		icon={BellIcon}
+		title="No notification channels"
+		description={PROVIDERS.map((p) => p.name).join(', ')}
+	>
 		<Button size="sm" onclick={openAdd}>
-			<PlusIcon class="mr-1.5 size-4" />
+			<PlusIcon class="size-4" />
 			Add channel
 		</Button>
-	</div>
-
-	<Separator />
-
-	{#if isLoading}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-			{#each Array(3) as _, i (i)}
-				<Card.Root>
-					<Card.Content class="p-5">
-						<div class="flex items-start gap-3">
-							<Skeleton class="size-10 rounded-lg" />
-							<div class="flex-1 space-y-2">
-								<Skeleton class="h-5 w-28" />
-								<Skeleton class="h-4 w-full" />
-							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/each}
-		</div>
-	{:else if channels.length === 0}
-		<Card.Root class="border-dashed">
-			<Card.Content class="flex flex-col items-center justify-center gap-3 py-16 text-center">
-				<BellIcon class="size-10 text-muted-foreground/40" />
-				<div class="space-y-1">
-					<p class="text-sm font-medium">No notification channels</p>
-					<p class="text-xs text-muted-foreground">
-						{PROVIDERS.map((p) => p.name).join(', ')}
-					</p>
-				</div>
-				<Button size="sm" variant="outline" onclick={openAdd}>
-					<PlusIcon class="mr-1.5 size-4" />
-					Add channel
-				</Button>
-			</Card.Content>
-		</Card.Root>
-	{:else}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+	</EmptyState>
+{:else}
+	<Card.Root class="gap-0 overflow-hidden py-0">
+		<div class="@container/channels w-full" role="table" aria-label="Notification channels">
+			<div class={HEAD_ROW} role="row">
+				<div class={CHANNEL_COL.channel}>Channel</div>
+				<div class={CHANNEL_COL.events}>Events</div>
+				<div class={CHANNEL_COL.level}>Minimum level</div>
+				<div class={CHANNEL_COL.delivery}>Last delivery</div>
+				<div class={CHANNEL_COL.actions}></div>
+			</div>
 			{#each channels as channel (channel.id)}
 				{@const meta = metaFor(channel.provider)}
-				{@const Icon = meta.icon}
-				<Card.Root
-					class="relative transition-all duration-200 {channel.is_active
-						? 'ring-1 ring-border'
-						: 'border-dashed opacity-75'}"
-				>
-					<Card.Content class="p-5">
-						<div class="flex items-start justify-between gap-3">
-							<div class="flex min-w-0 items-start gap-3">
-								<div class="flex h-10 shrink-0 items-center">
-									<Checkbox
-										checked={picked.has(channel.id)}
-										onCheckedChange={() => toggleCheck(channel.id)}
-										aria-label="Select {channel.name}"
-									/>
-								</div>
-								<div class="shrink-0 rounded-lg border bg-muted p-2.5">
-									<Icon class="size-[18px] text-muted-foreground" />
-								</div>
-								<div class="min-w-0">
-									<h4 class="truncate text-sm font-medium">{channel.name}</h4>
-									<p class="mt-0.5 text-xs text-muted-foreground">{meta.name}</p>
-								</div>
-							</div>
-							<Switch
-								checked={channel.is_active}
-								onCheckedChange={(checked) =>
-									notificationChannelsStore.update(channel.id, { is_active: checked }).then((u) => {
-										if (u) toast.success(checked ? 'Channel enabled' : 'Channel disabled');
-									})}
-							/>
-						</div>
-
-						<Separator class="my-3" />
-
-						<div class="space-y-2">
-							{#each meta.fields.filter((f) => f.kind !== 'bool') as f (f.key)}
-								<div class="flex items-center gap-2 text-xs">
-									<span class="shrink-0 text-muted-foreground">{f.label}</span>
-									<code class="truncate font-mono text-muted-foreground"
-										>{String(channel.config_masked[f.key] ?? '—')}</code
-									>
-								</div>
-							{/each}
-							<div class="flex flex-wrap items-center gap-2 pt-1">
-								<Badge variant="secondary" class="h-5 border-0 px-1.5 text-2xs">
-									{summaryLine(channel)}
-								</Badge>
-								{#if channel.last_test_at}
-									<span class="flex items-center gap-1 text-xs text-muted-foreground">
-										{#if channel.last_test_ok}
-											<CheckIcon class="size-3 text-foreground" />
-										{:else}
-											<CircleXIcon class="size-3 text-destructive" />
-										{/if}
-										{formatDate(channel.last_test_at)}
-									</span>
-								{/if}
-							</div>
-						</div>
-
-						<div class="mt-3 flex items-center gap-1.5">
-							<Button
-								variant="ghost"
-								size="sm"
-								class="h-7 px-2 text-xs"
-								onclick={() => openEdit(channel)}
-							>
-								<Pencil class="mr-1 size-3" />
-								Edit
-							</Button>
-							<Button
-								variant="ghost"
-								size="sm"
-								class="h-7 px-2 text-xs"
-								disabled={testingId === channel.id}
-								onclick={() => handleTest(channel.id)}
-							>
-								{#if testingId === channel.id}
-									<Spinner class="mr-1 size-3" />
-								{:else}
-									<FlaskConicalIcon class="mr-1 size-3" />
-								{/if}
-								Test
-							</Button>
-							<div class="flex-1"></div>
-							<Tooltip.Root>
-								<Tooltip.Trigger>
-									{#snippet child({ props })}
-										<Button
-											{...props}
-											variant="ghost"
-											size="sm"
-											class="h-7 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
-											onclick={() => openDelete(channel)}
-										>
-											<Trash2Icon class="size-3" />
-										</Button>
-									{/snippet}
-								</Tooltip.Trigger>
-								<Tooltip.Content>Remove channel</Tooltip.Content>
-							</Tooltip.Root>
-						</div>
-					</Card.Content>
-				</Card.Root>
+				{@const sent = delivery(channel)}
+				<div class="{BODY_ROW} {channel.is_active ? '' : 'text-muted-foreground'}" role="row">
+					<div class="{CHANNEL_COL.channel} flex flex-col">
+						<span class="text-sm leading-5 font-medium wrap-anywhere">{channel.name}</span>
+						<span class="text-2xs text-muted-foreground">{meta.name}</span>
+					</div>
+					<div class="{CHANNEL_COL.events} text-sm">{eventSummary(channel)}</div>
+					<div class="{CHANNEL_COL.level} text-sm">{levelOf(channel)}</div>
+					<div class={CHANNEL_COL.delivery}>
+						<Hint text={sent.message}>
+							{#snippet child(props)}
+								<span {...props} class="inline-flex items-center gap-2 text-sm">
+									{#if testingId === channel.id}
+										<Spinner class="size-3" />
+										<span class="text-muted-foreground">Sending</span>
+									{:else}
+										<span class="size-2 shrink-0 rounded-full {CHECK_DOT[sent.check]}"></span>
+										<span class={sent.check === 'failed' ? '' : 'text-muted-foreground'}>
+											{sent.label}
+										</span>
+									{/if}
+								</span>
+							{/snippet}
+						</Hint>
+					</div>
+					<div class={CHANNEL_COL.actions}>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<Button {...props} variant="ghost" size="icon" class="size-7">
+										<MoreVerticalIcon class="size-4" />
+										<span class="sr-only">{channel.name} actions</span>
+									</Button>
+								{/snippet}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item
+									disabled={testingId !== null || !channel.is_active}
+									onSelect={() => test(channel)}
+								>
+									Send test
+								</DropdownMenu.Item>
+								<DropdownMenu.Item onSelect={() => openEdit(channel)}>Edit</DropdownMenu.Item>
+								<DropdownMenu.Item onSelect={() => setActive(channel, !channel.is_active)}>
+									{channel.is_active ? 'Disable' : 'Enable'}
+								</DropdownMenu.Item>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item variant="destructive" onSelect={() => (removing = channel)}>
+									Remove
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</div>
 			{/each}
 		</div>
-	{/if}
-</div>
+	</Card.Root>
+{/if}
 
 <Dialog.Root bind:open={dialogOpen}>
 	<Dialog.Content
@@ -485,7 +444,6 @@
 	>
 		<Dialog.Header class="p-6 pb-4">
 			<Dialog.Title>{editingId ? 'Edit channel' : 'Add channel'}</Dialog.Title>
-			<Dialog.Description>Connection and events.</Dialog.Description>
 		</Dialog.Header>
 
 		<Separator />
@@ -507,7 +465,7 @@
 							{#each PROVIDERS as p (p.provider)}
 								{@const PIcon = p.icon}
 								<Label
-									class="group/provider flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm font-normal text-muted-foreground transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring/50 hover:bg-muted/60 hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:shadow-xs"
+									class="group/provider flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm font-normal text-muted-foreground transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring/50 hover:bg-muted/60 hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground"
 									data-active={formProvider === p.provider}
 								>
 									<RadioGroup.Item value={p.provider} class="sr-only" disabled={saving} />
@@ -528,33 +486,18 @@
 			{/if}
 
 			<ScrollArea class="min-h-0">
-				<div class="space-y-6 p-6">
-					{#if editingId}
-						{@const FIcon = formMeta.icon}
-						<div class="flex items-center gap-3 rounded-lg border bg-muted/30 px-3 py-2.5">
-							<span
-								class="flex size-8 shrink-0 items-center justify-center rounded-md border bg-background text-primary"
-							>
-								<FIcon class="size-4" />
-							</span>
-							<div class="min-w-0">
-								<p class="truncate text-sm font-medium">{formMeta.name}</p>
-								<p class="text-xs text-muted-foreground">Provider is read-only.</p>
-							</div>
-						</div>
-					{/if}
-
-					<section class="space-y-4">
+				<div class="flex flex-col gap-6 p-6">
+					<section class="flex flex-col gap-4">
 						<div class="flex items-center justify-between gap-3">
-							<h4 class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase">
-								Connection
-							</h4>
+							<h3 class="text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+								{editingId ? formMeta.name : 'Connection'}
+							</h3>
 							{#if formMeta.help}
 								<a
 									href={formMeta.help.url}
 									target="_blank"
 									rel="noopener noreferrer"
-									class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+									class="inline-flex items-center gap-1 text-xs text-primary transition-colors hover:text-foreground"
 								>
 									{formMeta.help.label}<ExternalLinkIcon class="size-3" />
 								</a>
@@ -569,34 +512,33 @@
 									placeholder="{formMeta.name} alerts"
 									disabled={saving}
 									aria-invalid={!!nameError}
-									oninput={() => {
-										if (nameError) nameError = '';
-									}}
+									oninput={() => (nameError = '')}
 								/>
 							{/snippet}
 						</FormField>
 
-						<div class="grid gap-4 {twoColumnFields ? 'sm:grid-cols-2' : ''}">
+						<div class="grid gap-4 {formMeta.fields.length > 2 ? 'sm:grid-cols-2' : ''}">
 							{#each formMeta.fields as field (field.key)}
 								{#if field.kind === 'bool'}
-									<div
+									<label
 										class="flex items-center justify-between rounded-md border px-3 py-2 sm:col-span-2"
+										for="channel-{field.key}"
 									>
-										<Label class="text-sm font-normal">{field.label}</Label>
+										<span class="text-sm">{field.label}</span>
 										<Switch
+											id="channel-{field.key}"
 											checked={formConfig[field.key] === undefined
 												? !!field.default
 												: !!formConfig[field.key]}
 											onCheckedChange={(v) => setField(field.key, v)}
 											disabled={saving}
 										/>
-									</div>
+									</label>
 								{:else if field.kind === 'secret'}
 									{@const stored = !!editingId && formMasked[field.key]}
 									<FormField
 										label={field.label}
 										error={fieldErrors[field.key]}
-										description={stored ? 'A value is stored. Leave blank to keep it.' : undefined}
 										class="sm:col-span-2"
 									>
 										{#snippet children({ id })}
@@ -610,9 +552,7 @@
 													value={formConfig[field.key] === undefined
 														? ''
 														: String(formConfig[field.key])}
-													placeholder={stored
-														? 'Leave blank to keep the current value'
-														: (field.placeholder ?? '')}
+													placeholder={stored ? 'Stored' : (field.placeholder ?? '')}
 													autocomplete="off"
 													class="font-mono text-xs"
 													disabled={saving}
@@ -627,11 +567,7 @@
 														onclick={() =>
 															(revealed = { ...revealed, [field.key]: !revealed[field.key] })}
 													>
-														{#if revealed[field.key]}
-															<EyeOffIcon />
-														{:else}
-															<EyeIcon />
-														{/if}
+														{#if revealed[field.key]}<EyeOffIcon />{:else}<EyeIcon />{/if}
 													</InputGroup.Button>
 												</InputGroup.Addon>
 											</InputGroup.Root>
@@ -662,63 +598,59 @@
 
 					<Separator />
 
-					<section class="space-y-3">
+					<section class="flex flex-col gap-3">
 						<div class="flex items-center justify-between gap-3">
-							<h4 class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase">
+							<h3 class="text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase">
 								Events
-							</h4>
-							<div class="flex items-center gap-2 text-xs text-muted-foreground">
-								<span class="tabular-nums">{formPref.types.length} of {categories.length}</span>
-								<Button
-									variant="link"
-									size="sm"
-									class="h-auto px-0 text-xs"
-									onclick={toggleAllCategories}
-									disabled={saving}
-								>
-									{allCategories ? 'Clear all' : 'Select all'}
-								</Button>
-							</div>
+							</h3>
+							<Button
+								variant="link"
+								size="sm"
+								class="h-auto px-0 text-xs"
+								onclick={toggleAll}
+								disabled={saving}
+							>
+								{allEvents ? 'Clear all' : 'Select all'}
+							</Button>
 						</div>
-
 						<div
-							class="divide-y overflow-hidden rounded-lg border {categoryError
+							class="divide-y overflow-hidden rounded-lg border {eventsError
 								? 'border-destructive'
 								: ''}"
 						>
-							{#each categories as cat (cat.value)}
+							{#each events as event (event.type)}
 								<Label
 									class="flex cursor-pointer items-center gap-3 px-3 py-2.5 font-normal transition-colors hover:bg-muted/40"
 								>
 									<Checkbox
-										checked={formPref.types.includes(cat.value)}
-										onCheckedChange={(v) => toggleCategory(cat.value, v === true)}
+										checked={formPref.types.includes(event.type)}
+										onCheckedChange={(v) => toggleEvent(event.type, v === true)}
 										disabled={saving}
 									/>
-									<span class="min-w-0 flex-1">
-										<span class="block text-sm font-medium">{cat.label}</span>
-										<span class="block text-xs text-muted-foreground">{cat.hint}</span>
+									<span class="flex min-w-0 flex-1 flex-col">
+										<span class="text-sm font-medium">{event.label}</span>
+										<span class="text-xs text-muted-foreground">{event.hint}</span>
 									</span>
 								</Label>
 							{/each}
 						</div>
-						{#if categoryError}<p class="text-xs text-destructive">{categoryError}</p>{/if}
+						{#if eventsError}<p class="text-xs text-destructive">{eventsError}</p>{/if}
 
 						<div class="flex flex-wrap items-center justify-between gap-3 pt-1">
-							<div class="space-y-0.5">
-								<Label class="text-sm">Minimum severity</Label>
-								<p class="text-xs text-muted-foreground">Events below this level are not sent.</p>
-							</div>
+							<Label for="channel-level" class="text-sm">Minimum level</Label>
 							<Select.Root
 								type="single"
 								value={formPref.min_severity}
-								onValueChange={(v) => (formPref = { ...formPref, min_severity: v ?? 'info' })}
+								onValueChange={(v) =>
+									(formPref = { ...formPref, min_severity: v ?? DEFAULT_CHANNEL_LEVEL })}
 								disabled={saving}
 							>
-								<Select.Trigger class="w-full text-sm sm:w-56">{severityLabel}</Select.Trigger>
+								<Select.Trigger id="channel-level" class="w-full sm:w-56">
+									{levelLabel}
+								</Select.Trigger>
 								<Select.Content>
-									{#each NOTIF_SEVERITIES as s (s.value)}
-										<Select.Item value={s.value} label={s.label}>{s.label}</Select.Item>
+									{#each CHANNEL_LEVELS as level (level.value)}
+										<Select.Item value={level.value} label={level.label}>{level.label}</Select.Item>
 									{/each}
 								</Select.Content>
 							</Select.Root>
@@ -731,59 +663,44 @@
 		<Separator />
 
 		<div class="flex flex-wrap items-center justify-between gap-3 bg-muted/30 p-4">
-			<Label class="cursor-pointer gap-3">
-				<Switch checked={formActive} onCheckedChange={(v) => (formActive = v)} disabled={saving} />
-				<span class="space-y-0.5">
-					<span class="block text-sm font-medium">Active</span>
-					<span class="hidden text-xs font-normal text-muted-foreground sm:block">
-						A disabled channel sends nothing.
-					</span>
-				</span>
+			<Label class="cursor-pointer gap-3" for="channel-active">
+				<Switch
+					id="channel-active"
+					checked={formActive}
+					onCheckedChange={(v) => (formActive = v)}
+					disabled={saving}
+				/>
+				<span class="text-sm font-medium">Active</span>
 			</Label>
 			<div class="flex items-center gap-2">
 				{#if !editingId}
-					<Button
-						variant="ghost"
-						onclick={handleTestDraft}
-						disabled={saving || testingDraft}
-						class="gap-1.5"
-					>
-						{#if testingDraft}
-							<Spinner class="size-4" />
-						{:else}
-							<FlaskConicalIcon class="size-4" />
-						{/if}
+					<Button variant="ghost" onclick={testDraft} disabled={saving || testingDraft}>
+						{#if testingDraft}<Spinner class="size-4" />{:else}<FlaskConicalIcon
+								class="size-4"
+							/>{/if}
 						Send test
 					</Button>
 				{/if}
 				<Button variant="outline" onclick={() => (dialogOpen = false)} disabled={saving}>
 					Cancel
 				</Button>
-				<LoadingButton onclick={handleSave} loading={saving} loadingLabel="Saving">
-					{editingId ? 'Save changes' : 'Add channel'}
+				<LoadingButton onclick={save} loading={saving} loadingLabel="Saving">
+					{editingId ? 'Save channel' : 'Add channel'}
 				</LoadingButton>
 			</div>
 		</div>
 	</Dialog.Content>
 </Dialog.Root>
 
-<DeleteConfirmationDialog
-	bind:open={deleteOpen}
+<ConfirmDialog
+	open={removing !== null}
 	title="Remove channel"
-	description={`Channel ${deletingChannel?.name ?? ''} is removed.`}
+	description={removing ? `Channel ${removing.name} is removed.` : ''}
 	confirmLabel="Remove"
-	{isDeleting}
-	onOpenChange={(o) => (deleteOpen = o)}
-	onConfirm={handleDelete}
-/>
-
-<SelectionDeleteBar
-	ids={[...picked]}
-	noun="channel"
-	remove={async (id) => {
-		await notificationChannelsApi.remove(id);
-		notificationChannelsStore.drop(id);
+	destructive
+	loading={deleting}
+	onOpenChange={(open) => {
+		if (!open) removing = null;
 	}}
-	onDone={() => picked.clear()}
-	onClear={() => picked.clear()}
+	onConfirm={remove}
 />
diff --git a/frontend/src/lib/components/settings/oast-panel.svelte b/frontend/src/lib/components/settings/oast-panel.svelte
deleted file mode 100644
index e87b61871..000000000
--- a/frontend/src/lib/components/settings/oast-panel.svelte
+++ /dev/null
@@ -1,401 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { beforeNavigate, goto } from '$app/navigation';
-	import { toast } from 'svelte-sonner';
-	import SatelliteDishIcon from '@lucide/svelte/icons/satellite-dish';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import CircleXIcon from '@lucide/svelte/icons/circle-x';
-	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
-	import { Badge, type BadgeVariant } from '$lib/components/ui/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
-	import FormField from '$lib/components/form-field.svelte';
-	import LoadingButton from '$lib/components/loading-button.svelte';
-	import UnsavedChangesDialog from '$lib/components/unsaved-changes-dialog.svelte';
-	import { oastApi } from '$lib/api/oast';
-	import { ROUTES } from '$lib/config/routes';
-	import {
-		DEFAULT_WAIT_SECONDS,
-		MAX_WAIT_SECONDS,
-		OAST_MODES,
-		OAST_MODE_HELP,
-		OAST_MODE_LABELS,
-		OastMode,
-		PUBLIC_ACK,
-		WAIT_STEPS
-	} from '$lib/config/oast';
-	import { relativeTime } from '$lib/utilities/dates';
-	import type { OastRead, OastTest } from '$lib/types/oast';
-
-	let settings = $state<OastRead | null>(null);
-	let loading = $state(true);
-	let error = $state<string | null>(null);
-	let serverError = $state<string | null>(null);
-	let saving = $state(false);
-	let testing = $state(false);
-	let resetOpen = $state(false);
-	let resetting = $state(false);
-	let result = $state<OastTest | null>(null);
-
-	let mode = $state<OastMode>(OastMode.OFF);
-	let server = $state('');
-	let wait = $state(DEFAULT_WAIT_SECONDS);
-	let acknowledged = $state(false);
-
-	let ModeIcon = $derived(
-		!settings || settings.mode === OastMode.OFF ? CircleXIcon : SatelliteDishIcon
-	);
-	let tone = $derived<BadgeVariant>(
-		!settings || settings.reason
-			? 'outline'
-			: settings.mode === OastMode.PUBLIC
-				? 'warning'
-				: 'success'
-	);
-	let dirty = $derived(
-		!!settings &&
-			(mode !== settings.mode ||
-				server.trim() !== (settings.server ?? '') ||
-				wait !== settings.wait_seconds ||
-				acknowledged !== settings.public_acknowledged)
-	);
-	let blocked = $derived(
-		mode === OastMode.SELF_HOSTED && !server.trim()
-			? 'Set the server first.'
-			: mode === OastMode.PUBLIC && !acknowledged
-				? 'Accept the public server first.'
-				: null
-	);
-	let canTest = $derived(
-		!!settings && settings.mode !== OastMode.OFF && !settings.reason && !dirty
-	);
-	let canReset = $derived(
-		!!settings &&
-			(settings.mode !== OastMode.OFF ||
-				!!settings.server ||
-				settings.token_set ||
-				settings.public_acknowledged ||
-				settings.wait_seconds !== DEFAULT_WAIT_SECONDS)
-	);
-
-	function apply(row: OastRead) {
-		settings = row;
-		mode = row.mode as OastMode;
-		server = row.server ?? '';
-		wait = row.wait_seconds;
-		acknowledged = row.public_acknowledged;
-		serverError = null;
-	}
-
-	async function load() {
-		loading = true;
-		try {
-			apply(await oastApi.get());
-			error = null;
-		} catch (e) {
-			error = e instanceof Error ? e.message : 'Request failed.';
-		} finally {
-			loading = false;
-		}
-	}
-
-	onMount(load);
-
-	let showLeaveDialog = $state(false);
-	let pendingNav: (() => void) | null = $state(null);
-	let allowNavigation = $state(false);
-
-	beforeNavigate((nav) => {
-		if (allowNavigation) {
-			allowNavigation = false;
-			return;
-		}
-		if (!dirty || saving || pendingNav) return;
-		nav.cancel();
-		pendingNav = () => {
-			allowNavigation = true;
-			if (nav.to) goto(nav.to.url);
-		};
-		showLeaveDialog = true;
-	});
-
-	async function save() {
-		saving = true;
-		try {
-			apply(
-				await oastApi.update({
-					mode,
-					server: server.trim(),
-					wait_seconds: wait,
-					public_acknowledged: acknowledged
-				})
-			);
-			result = null;
-			toast.success('Out-of-band settings saved');
-		} catch (e) {
-			const message = e instanceof Error ? e.message : 'Settings not saved';
-			if (mode === OastMode.SELF_HOSTED) serverError = message;
-			else toast.error(message);
-		} finally {
-			saving = false;
-		}
-	}
-
-	async function test() {
-		testing = true;
-		try {
-			result = await oastApi.test();
-		} catch (e) {
-			result = {
-				ok: false,
-				detail: e instanceof Error ? e.message : 'Request failed.',
-				address: null,
-				status_code: null
-			};
-		} finally {
-			testing = false;
-		}
-	}
-
-	async function reset() {
-		resetting = true;
-		try {
-			apply(await oastApi.reset());
-			result = null;
-			resetOpen = false;
-			toast.success('Out-of-band settings cleared');
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'Settings not cleared');
-		} finally {
-			resetting = false;
-		}
-	}
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-start gap-3">
-			<span class="flex h-5 items-center">
-				<ModeIcon class="size-5 shrink-0 text-muted-foreground" />
-			</span>
-			<div class="flex min-w-0 flex-col gap-1">
-				<Card.Title>Out-of-band testing</Card.Title>
-				<Card.Description>
-					{#if settings?.checks}
-						{settings.checks.toLocaleString()} checks confirm a finding through a callback to a server
-						outside the target.
-					{:else}
-						Checks that confirm a finding through a callback to a server outside the target.
-					{/if}
-				</Card.Description>
-			</div>
-			{#if settings}
-				<Badge variant={tone} class="ml-auto shrink-0">
-					{settings.reason ? 'Off' : OAST_MODE_LABELS[settings.mode as OastMode]}
-				</Badge>
-			{/if}
-		</div>
-	</Card.Header>
-
-	<Card.Content class="flex flex-col gap-5">
-		{#if loading}
-			<Skeleton class="h-40 w-full" />
-		{:else if error}
-			<p class="text-sm text-destructive">{error}</p>
-			<Button variant="outline" size="sm" class="w-fit" onclick={() => load()}>Try again</Button>
-		{:else if settings}
-			<div class="flex flex-col gap-2">
-				<Label>Mode</Label>
-				<ToggleGroup.Root
-					type="single"
-					value={mode}
-					onValueChange={(v) => {
-						if (v) mode = v as OastMode;
-					}}
-					variant="outline"
-					class="w-fit"
-					aria-label="Out-of-band mode"
-				>
-					{#each OAST_MODES as option (option)}
-						<ToggleGroup.Item value={option} class="h-9 px-3 text-sm font-normal">
-							{OAST_MODE_LABELS[option]}
-						</ToggleGroup.Item>
-					{/each}
-				</ToggleGroup.Root>
-				<p class="text-sm text-muted-foreground">{OAST_MODE_HELP[mode]}</p>
-				{#if settings.reason && settings.mode !== OastMode.OFF && !dirty}
-					<p class="text-sm text-warning">{settings.reason}</p>
-				{/if}
-			</div>
-
-			{#if mode === OastMode.SELF_HOSTED}
-				<FormField label="Server domain" for="oast-server" error={serverError ?? undefined}>
-					{#snippet children({ id })}
-						<Input
-							{id}
-							placeholder="oast.example.com"
-							bind:value={server}
-							oninput={() => (serverError = null)}
-							autocomplete="off"
-							spellcheck="false"
-						/>
-					{/snippet}
-				</FormField>
-				<div class="flex flex-wrap items-center gap-2 text-sm">
-					<span class="text-muted-foreground">Token</span>
-					{#if settings.token_set}
-						<Badge variant="success" class="gap-1"><CheckIcon class="size-3" />Set</Badge>
-					{:else}
-						<Badge variant="outline">Not set</Badge>
-					{/if}
-					<a href={ROUTES.settings('api-keys')} class="font-medium text-primary hover:underline">
-						{settings.token_set ? 'Replace it under API keys' : 'Add it under API keys'}
-					</a>
-					<span class="text-muted-foreground">A server without authentication needs no token.</span>
-				</div>
-			{/if}
-
-			{#if mode === OastMode.PUBLIC}
-				<div class="flex flex-col gap-2 rounded-md border border-warning/40 bg-warning/5 p-3">
-					<div class="flex items-start gap-2">
-						<span class="flex h-5 items-center">
-							<TriangleAlertIcon class="size-4 shrink-0 text-warning" />
-						</span>
-						<p class="text-sm">{PUBLIC_ACK}</p>
-					</div>
-					<Label class="flex w-fit cursor-pointer items-center gap-2 text-sm font-normal">
-						<Checkbox checked={acknowledged} onCheckedChange={(v) => (acknowledged = v === true)} />
-						<span>Accepted for every scan on this instance</span>
-					</Label>
-					<p class="text-xs text-muted-foreground">
-						Servers in rotation: {settings.public_servers.join(', ')}
-					</p>
-				</div>
-			{/if}
-
-			{#if mode !== OastMode.OFF}
-				<div class="flex flex-col gap-2">
-					<Label for="oast-wait">Wait for a callback</Label>
-					<div class="flex flex-wrap items-center gap-2">
-						<Select.Root
-							type="single"
-							value={String(wait)}
-							onValueChange={(v) => (wait = Number(v))}
-						>
-							<Select.Trigger id="oast-wait" class="h-9 w-40">
-								{wait === 0 ? 'No extra wait' : `${wait}s`}
-							</Select.Trigger>
-							<Select.Content>
-								{#each WAIT_STEPS as step (step)}
-									<Select.Item value={String(step)}>
-										{step === 0 ? 'No extra wait' : `${step}s`}
-									</Select.Item>
-								{/each}
-							</Select.Content>
-						</Select.Root>
-						<span class="text-sm text-muted-foreground">
-							Paid once at the end of each out-of-band batch, up to {MAX_WAIT_SECONDS}s.
-						</span>
-					</div>
-				</div>
-			{/if}
-
-			<Separator />
-
-			<div class="flex flex-wrap items-center gap-2">
-				<LoadingButton
-					loading={saving}
-					loadingLabel="Saving"
-					disabled={!dirty || !!blocked}
-					onclick={save}
-				>
-					Save
-				</LoadingButton>
-				<LoadingButton
-					variant="outline"
-					loading={testing}
-					loadingLabel="Testing"
-					disabled={!canTest}
-					onclick={test}
-				>
-					Test server
-				</LoadingButton>
-				{#if dirty}
-					<span class="text-xs text-muted-foreground">Unsaved changes</span>
-				{/if}
-				<span class="flex-1"></span>
-				<Button
-					variant="ghost"
-					class="text-muted-foreground"
-					disabled={!canReset}
-					onclick={() => (resetOpen = true)}
-				>
-					Reset
-				</Button>
-			</div>
-
-			{#if blocked}
-				<p class="text-sm text-muted-foreground">{blocked}</p>
-			{:else if dirty}
-				<p class="text-sm text-muted-foreground">Save to test the server.</p>
-			{:else if settings.mode === OastMode.OFF}
-				<p class="text-sm text-muted-foreground">Choose Self-hosted or Public to test a server.</p>
-			{/if}
-
-			{#if result && !dirty}
-				<div class="flex items-start gap-2 text-sm">
-					<span class="flex h-5 items-center">
-						{#if result.ok}
-							<CheckIcon class="size-4 shrink-0 text-success" />
-						{:else}
-							<CircleXIcon class="size-4 shrink-0 text-destructive" />
-						{/if}
-					</span>
-					<span>{result.detail}</span>
-				</div>
-			{/if}
-
-			{#if settings.interactions > 0}
-				<p class="text-sm text-muted-foreground">
-					{settings.interactions.toLocaleString()} findings carry a callback.
-					{#if settings.last_interaction_at}
-						Most recent {relativeTime(settings.last_interaction_at)}.
-					{/if}
-				</p>
-			{/if}
-		{/if}
-	</Card.Content>
-</Card.Root>
-
-<ConfirmDialog
-	open={resetOpen}
-	title="Reset out-of-band testing"
-	description="The server, the token and the public-server acceptance are removed."
-	confirmLabel="Reset"
-	destructive
-	loading={resetting}
-	onOpenChange={(open) => (resetOpen = open)}
-	onConfirm={reset}
-/>
-
-<UnsavedChangesDialog
-	open={showLeaveDialog}
-	onOpenChange={(o) => {
-		showLeaveDialog = o;
-		if (!o) pendingNav = null;
-	}}
-	onConfirm={() => {
-		showLeaveDialog = false;
-		const resume = pendingNav;
-		pendingNav = null;
-		resume?.();
-	}}
-/>
diff --git a/frontend/src/lib/components/settings/proxies-panel.svelte b/frontend/src/lib/components/settings/proxies-panel.svelte
index aa11228c5..5e35b08db 100644
--- a/frontend/src/lib/components/settings/proxies-panel.svelte
+++ b/frontend/src/lib/components/settings/proxies-panel.svelte
@@ -1,51 +1,43 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { SvelteSet } from 'svelte/reactivity';
-	import { proxiesStore } from '$lib/stores/proxies.svelte';
-	import {
-		PROXY_SCHEMES,
-		PROXY_MODES,
-		PROXY_SCHEME_LABELS,
-		PROXY_MODE_LABELS,
-		type ProxyRead,
-		type ProxyEndpoint
-	} from '$lib/types/proxy';
-	import { MASK } from '$lib/constants';
+	import { toast } from 'svelte-sonner';
+	import MoreVerticalIcon from '@lucide/svelte/icons/more-vertical';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
+	import RouteIcon from '@lucide/svelte/icons/route';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+	import XIcon from '@lucide/svelte/icons/x';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Select from '$lib/components/ui/select/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 	import { Spinner } from '$lib/components/ui/spinner/index.js';
-	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
-	import DeleteConfirmationDialog from '$lib/components/delete-confirmation-dialog.svelte';
-	import SelectionDeleteBar from '$lib/components/selection-delete-bar.svelte';
-	import { proxiesApi } from '$lib/api/proxies';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import LoadingButton from '$lib/components/loading-button.svelte';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
+	import EmptyState from '$lib/components/empty-state.svelte';
 	import FormField from '$lib/components/form-field.svelte';
-	import { toast } from 'svelte-sonner';
-	import RouteIcon from '@lucide/svelte/icons/route';
-	import PlusIcon from '@lucide/svelte/icons/plus';
-	import Pencil from '@lucide/svelte/icons/pencil';
-	import Trash2Icon from '@lucide/svelte/icons/trash-2';
-	import FlaskConicalIcon from '@lucide/svelte/icons/flask-conical';
-	import StarIcon from '@lucide/svelte/icons/star';
-	import XIcon from '@lucide/svelte/icons/x';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import CircleXIcon from '@lucide/svelte/icons/circle-x';
-	import { formatDate } from '$lib/utilities';
+	import Hint from '$lib/components/hint.svelte';
+	import LoadingButton from '$lib/components/loading-button.svelte';
+	import { proxiesStore } from '$lib/stores/proxies.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { settingsActions } from '$lib/stores/settings-actions.svelte';
+	import { MASK } from '$lib/constants';
+	import { relativeTime } from '$lib/utilities/dates';
+	import {
+		PROXY_SCHEMES,
+		PROXY_SCHEME_LABELS,
+		type ProxyEndpoint,
+		type ProxyRead
+	} from '$lib/types/proxy';
+	import { BODY_ROW, HEAD_ROW, PROXY_COL } from './columns';
+	import { CHECK_DOT, checkState, type CheckState } from './status';
 
-	let isLoading = $state(true);
-	let testingId = $state<string | null>(null);
-	let settingDefaultId = $state<string | null>(null);
+	type Scheme = (typeof PROXY_SCHEMES)[number];
 
 	interface EndpointRow {
 		scheme: string;
@@ -53,627 +45,465 @@
 		port: string;
 		username: string;
 		password: string;
-		masked: boolean;
+		stored: boolean;
 	}
 
-	function blankRow(): EndpointRow {
-		return { scheme: 'http', host: '', port: '8080', username: '', password: '', masked: false };
-	}
+	const STATUS_LABEL: Record<CheckState, string> = {
+		ok: 'Reachable',
+		failed: 'Failed',
+		untested: 'Not tested',
+		off: 'Disabled'
+	};
+
+	let loading = $state(true);
+	let loadFailed = $state(false);
+	let testing = $state<string | null>(null);
 
 	let dialogOpen = $state(false);
-	let editingId = $state<string | null>(null);
-	let formName = $state('');
-	let formDescription = $state('');
-	let formMode = $state('single');
-	let formActive = $state(true);
-	let formDefault = $state(false);
-	let formRows = $state<EndpointRow[]>([blankRow()]);
+	let editing = $state<ProxyRead | null>(null);
+	let name = $state('');
+	let description = $state('');
+	let asDefault = $state(false);
+	let rows = $state<EndpointRow[]>([]);
 	let saving = $state(false);
 
-	let deleteOpen = $state(false);
-	let deletingProxy = $state<ProxyRead | null>(null);
-	let isDeleting = $state(false);
+	let removing = $state<ProxyRead | null>(null);
+	let deleting = $state(false);
 
-	let proxies = $derived(proxiesStore.proxies);
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const proxies = $derived(proxiesStore.proxies);
 
-	function openAdd() {
-		editingId = null;
-		formName = '';
-		formDescription = '';
-		formMode = 'single';
-		formActive = true;
-		formDefault = proxies.length === 0;
-		formRows = [blankRow()];
+	function blank(): EndpointRow {
+		return { scheme: 'http', host: '', port: '8080', username: '', password: '', stored: false };
+	}
+
+	async function load() {
+		loading = true;
+		await proxiesStore.fetch();
+		loadFailed = !proxiesStore.hasFetched;
+		loading = false;
+	}
+
+	onMount(() => {
+		if (!isAdmin) loading = false;
+		else if (proxiesStore.hasFetched) loading = false;
+		else void load();
+	});
+
+	function openDialog(proxy: ProxyRead | null) {
+		editing = proxy;
+		name = proxy?.name ?? '';
+		description = proxy?.description ?? '';
+		asDefault = proxy ? proxy.is_default : proxies.length === 0;
+		rows = proxy?.endpoints.length
+			? proxy.endpoints.map((e) => ({
+					scheme: e.scheme,
+					host: e.host,
+					port: String(e.port),
+					username: e.username ?? '',
+					password: '',
+					stored: e.has_password
+				}))
+			: [blank()];
 		dialogOpen = true;
 	}
 
-	function openEdit(p: ProxyRead) {
-		editingId = p.id;
-		formName = p.name;
-		formDescription = p.description ?? '';
-		formMode = p.mode;
-		formActive = p.is_active;
-		formDefault = p.is_default;
-		formRows = p.endpoints.map((e) => ({
-			scheme: e.scheme,
-			host: e.host,
-			port: String(e.port),
-			username: e.username ?? '',
-			password: '',
-			masked: e.has_password
-		}));
-		if (formRows.length === 0) formRows = [blankRow()];
-		dialogOpen = true;
-	}
-
-	function addRow() {
-		formRows = [...formRows, blankRow()];
-	}
-
-	function removeRow(i: number) {
-		formRows = formRows.filter((_, idx) => idx !== i);
-		if (formRows.length === 0) formRows = [blankRow()];
-	}
-
-	function setRow(i: number, key: keyof EndpointRow, value: string) {
-		const rows = formRows.map((r) => ({ ...r }));
-		(rows[i] as Record<string, unknown>)[key] = value;
-		if (key === 'password') rows[i].masked = false;
-		formRows = rows;
-	}
-
-	function buildEndpoints(): ProxyEndpoint[] | null {
+	function endpoints(): ProxyEndpoint[] | null {
 		const out: ProxyEndpoint[] = [];
-		for (const r of formRows) {
-			const host = r.host.trim();
-			const port = Math.trunc(Number(r.port));
-			if (!host || !Number.isFinite(port) || port <= 0) continue;
-			const username = r.username.trim() || null;
-			let password: string | null;
-			if (r.password) password = r.password;
-			else if (r.masked) password = MASK;
-			else password = null;
-			out.push({ scheme: r.scheme, host, port, username, password });
+		for (const row of rows) {
+			const host = row.host.trim();
+			const port = Math.trunc(Number(row.port));
+			if (!host || !Number.isFinite(port) || port < 1 || port > 65535) return null;
+			out.push({
+				scheme: row.scheme,
+				host,
+				port,
+				username: row.username.trim() || null,
+				password: row.password ? row.password : row.stored ? MASK : null
+			});
 		}
-		return out.length > 0 ? out : null;
+		return out.length ? out : null;
 	}
 
-	async function handleSave() {
-		if (!formName.trim()) {
+	async function save() {
+		const parsed = endpoints();
+		if (!name.trim()) {
 			toast.error('Proxy name is required');
 			return;
 		}
-		const endpoints = buildEndpoints();
-		if (!endpoints) {
-			toast.error('Add at least one endpoint with a host and port');
+		if (!parsed) {
+			toast.error('Each endpoint needs a host and a port between 1 and 65535');
 			return;
 		}
-
 		saving = true;
 		try {
-			if (editingId) {
-				const updated = await proxiesStore.update(editingId, {
-					name: formName.trim(),
-					description: formDescription.trim() || null,
-					mode: formMode,
-					is_active: formActive,
-					is_default: formDefault,
-					endpoints
-				});
-				if (updated) {
-					toast.success('Proxy updated');
-					dialogOpen = false;
-				}
-			} else {
-				const created = await proxiesStore.create({
-					name: formName.trim(),
-					description: formDescription.trim() || null,
-					mode: formMode,
-					is_active: formActive,
-					is_default: formDefault,
-					endpoints
-				});
-				if (created) {
-					toast.success('Proxy added');
-					dialogOpen = false;
-				}
+			const body = {
+				name: name.trim(),
+				description: description.trim() || null,
+				is_default: asDefault,
+				endpoints: parsed
+			};
+			const saved = editing
+				? await proxiesStore.update(editing.id, body)
+				: await proxiesStore.create({ ...body, is_active: true });
+			if (saved) {
+				if (asDefault) await proxiesStore.fetch();
+				toast.success(editing ? 'Proxy saved' : 'Proxy added');
+				dialogOpen = false;
 			}
 		} finally {
 			saving = false;
 		}
 	}
 
-	// `reachable` is on the test result, not on the stored row, so the middle state lives here
-	const reachedOnly = new SvelteSet<string>();
-	const picked = new SvelteSet<string>();
-
-	function toggleCheck(id: string) {
-		if (picked.has(id)) picked.delete(id);
-		else picked.add(id);
-	}
-
-	async function handleTest(id: string) {
-		testingId = id;
+	async function test(proxy: ProxyRead) {
+		testing = proxy.id;
 		try {
-			const result = await proxiesStore.test(id);
+			const result = await proxiesStore.test(proxy.id);
 			if (!result) return;
 			if (result.success) {
-				reachedOnly.delete(id);
-				const ms = result.latency_ms != null ? ` (${result.latency_ms} ms)` : '';
+				const ms = result.latency_ms != null ? ` · ${result.latency_ms} ms` : '';
 				toast.success(`${result.message}${ms}`);
-			} else if (result.reachable) {
-				reachedOnly.add(id);
-				toast.warning(result.message);
 			} else {
-				reachedOnly.delete(id);
 				toast.error(result.message);
 			}
 		} finally {
-			testingId = null;
+			testing = null;
 		}
 	}
 
-	async function handleSetDefault(id: string) {
-		settingDefaultId = id;
-		try {
-			const updated = await proxiesStore.setDefault(id);
-			if (updated) toast.success('Default proxy updated');
-		} finally {
-			settingDefaultId = null;
-		}
+	async function setActive(proxy: ProxyRead, active: boolean) {
+		const updated = await proxiesStore.update(proxy.id, { is_active: active });
+		if (updated) toast.success(`Proxy ${active ? 'enabled' : 'disabled'}`);
 	}
 
-	function openDelete(p: ProxyRead) {
-		deletingProxy = p;
-		deleteOpen = true;
+	async function makeDefault(proxy: ProxyRead) {
+		const updated = await proxiesStore.setDefault(proxy.id);
+		if (updated) toast.success(`${proxy.name} is the default proxy`);
 	}
 
-	async function handleDelete() {
-		if (!deletingProxy) return;
-		isDeleting = true;
+	async function remove() {
+		const proxy = removing;
+		if (!proxy) return;
+		deleting = true;
 		try {
-			const ok = await proxiesStore.remove(deletingProxy.id);
-			if (ok) {
+			if (await proxiesStore.remove(proxy.id)) {
 				toast.success('Proxy removed');
-				deleteOpen = false;
+				removing = null;
 			}
 		} finally {
-			isDeleting = false;
+			deleting = false;
 		}
 	}
 
-	onMount(async () => {
-		if (!proxiesStore.hasFetched) await proxiesStore.fetch();
-		isLoading = false;
+	function removeDescription(proxy: ProxyRead): string {
+		const direct =
+			proxy.contexts === 1
+				? ' 1 scan context using it sends traffic direct.'
+				: proxy.contexts > 1
+					? ` ${proxy.contexts} scan contexts using it send traffic direct.`
+					: '';
+		return `Proxy ${proxy.name} is removed.${direct}`;
+	}
+
+	$effect(() => {
+		if (!isAdmin) return;
+		settingsActions.set(addAction);
+		return () => settingsActions.clear(addAction);
 	});
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start justify-between">
-		<div>
-			<h2 class="text-lg font-semibold tracking-tight">Proxies</h2>
-			<p class="text-sm text-muted-foreground">Proxies for scan traffic.</p>
-		</div>
-		<Button size="sm" onclick={openAdd}>
-			<PlusIcon class="mr-1.5 size-4" />
+{#snippet addAction()}
+	<Button size="sm" onclick={() => openDialog(null)}>
+		<PlusIcon class="size-4" />
+		Add proxy
+	</Button>
+{/snippet}
+
+{#if !isAdmin}
+	<EmptyState compact icon={RouteIcon} title="Proxies are managed by administrators" />
+{:else if loading}
+	<Card.Root class="gap-3 p-4">
+		<Skeleton class="h-8 w-full" />
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-10 w-full" />
+	</Card.Root>
+{:else if loadFailed}
+	<EmptyState compact icon={TriangleAlertIcon} title="Proxies not loaded">
+		<Button variant="outline" size="sm" onclick={load}>
+			<RotateCwIcon class="size-3.5" />
+			Retry
+		</Button>
+	</EmptyState>
+{:else if proxies.length === 0}
+	<EmptyState icon={RouteIcon} title="No proxies">
+		<Button size="sm" onclick={() => openDialog(null)}>
+			<PlusIcon class="size-4" />
 			Add proxy
 		</Button>
-	</div>
-
-	<Separator />
-
-	{#if isLoading}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-			{#each Array(3) as _, i (i)}
-				<Card.Root>
-					<Card.Content class="p-5">
-						<div class="flex items-start gap-3">
-							<Skeleton class="size-10 rounded-lg" />
-							<div class="flex-1 space-y-2">
-								<Skeleton class="h-5 w-28" />
-								<Skeleton class="h-4 w-full" />
-							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/each}
-		</div>
-	{:else if proxies.length === 0}
-		<Card.Root class="border-dashed">
-			<Card.Content class="flex flex-col items-center justify-center gap-3 py-16 text-center">
-				<RouteIcon class="size-10 text-muted-foreground/40" />
-				<div class="space-y-1">
-					<p class="text-sm font-medium">No proxies</p>
-				</div>
-				<Button size="sm" variant="outline" onclick={openAdd}>
-					<PlusIcon class="mr-1.5 size-4" />
-					Add proxy
-				</Button>
-			</Card.Content>
-		</Card.Root>
-	{:else}
-		<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+	</EmptyState>
+{:else}
+	<Card.Root class="gap-0 overflow-hidden py-0">
+		<div class="@container/proxies w-full" role="table" aria-label="Proxies">
+			<div class={HEAD_ROW} role="row">
+				<div class={PROXY_COL.proxy}>Proxy</div>
+				<div class={PROXY_COL.endpoint}>Endpoint</div>
+				<div class={PROXY_COL.contexts}>Contexts</div>
+				<div class={PROXY_COL.status}>Status</div>
+				<div class={PROXY_COL.actions}></div>
+			</div>
 			{#each proxies as proxy (proxy.id)}
-				<Card.Root
-					class="relative transition-all duration-200 {proxy.is_active
-						? 'ring-1 ring-border'
-						: 'border-dashed opacity-75'}"
-				>
-					<Card.Content class="p-5">
-						<div class="flex items-start justify-between gap-3">
-							<div class="flex min-w-0 items-start gap-3">
-								<div class="flex h-10 shrink-0 items-center">
-									<Checkbox
-										checked={picked.has(proxy.id)}
-										onCheckedChange={() => toggleCheck(proxy.id)}
-										aria-label="Select {proxy.name}"
-									/>
-								</div>
-								<div class="shrink-0 rounded-lg bg-muted p-2.5">
-									<RouteIcon class="size-5 text-foreground" />
-								</div>
-								<div class="min-w-0">
-									<div class="flex items-center gap-2">
-										<h4 class="truncate text-sm font-medium">{proxy.name}</h4>
-										{#if proxy.is_default}
-											<Badge variant="secondary" class="h-5 shrink-0 border-0 px-1.5 text-2xs"
-												>Default</Badge
-											>
-										{/if}
-									</div>
-									<p class="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
-										{proxy.description ||
-											`${PROXY_MODE_LABELS[proxy.mode as (typeof PROXY_MODES)[number]] ?? proxy.mode} · ${proxy.endpoint_count} endpoint${proxy.endpoint_count === 1 ? '' : 's'}`}
-									</p>
-								</div>
-							</div>
-							<Switch
-								checked={proxy.is_active}
-								onCheckedChange={(checked) =>
-									proxiesStore.update(proxy.id, { is_active: checked }).then((u) => {
-										if (u) toast.success(checked ? 'Proxy enabled' : 'Proxy disabled');
-									})}
-							/>
-						</div>
-
-						<Separator class="my-3" />
-
-						<div class="space-y-2">
-							{#each proxy.endpoints.slice(0, 3) as ep, i (`${i}:${ep.url_masked}`)}
-								<code class="block truncate font-mono text-xs text-muted-foreground"
-									>{ep.url_masked}</code
-								>
-							{/each}
-							{#if proxy.endpoint_count > 3}
-								<p class="text-xs text-muted-foreground">+{proxy.endpoint_count - 3} more</p>
+				{@const check = checkState(proxy.is_active, proxy.last_test_ok)}
+				<div class="{BODY_ROW} {proxy.is_active ? '' : 'text-muted-foreground'}" role="row">
+					<div class="{PROXY_COL.proxy} flex flex-col">
+						<span class="flex items-center gap-2 text-sm leading-5 font-medium">
+							<span class="wrap-anywhere">{proxy.name}</span>
+							{#if proxy.is_default}
+								<Badge variant="secondary" class="h-5 px-1.5 text-2xs">Default</Badge>
 							{/if}
-						</div>
-
-						{#if proxy.last_test_at}
-							{@const reachedNotVerified = !proxy.last_test_ok && reachedOnly.has(proxy.id)}
-							<div class="mt-3 flex flex-col gap-0.5 text-xs">
-								<span class="flex items-center gap-1.5">
-									{#if proxy.last_test_ok}
-										<CheckIcon class="size-3 text-foreground" />
-										<span class="text-muted-foreground"
-											>Tested {formatDate(proxy.last_test_at)}</span
-										>
-									{:else if reachedNotVerified}
-										<TriangleAlertIcon class="size-3 text-warning" />
-										<span class="text-warning">Reachable, not verified</span>
-										<span class="text-muted-foreground">· {formatDate(proxy.last_test_at)}</span>
+						</span>
+						<span class="text-2xs text-muted-foreground">
+							{proxy.description ||
+								(proxy.endpoint_count > 1
+									? `Pool of ${proxy.endpoint_count} endpoints`
+									: 'Single endpoint')}
+						</span>
+					</div>
+					<div class="{PROXY_COL.endpoint} flex min-w-0 flex-col">
+						<code class="truncate font-mono text-xs text-muted-foreground">
+							{proxy.endpoints[0]?.url_masked ?? ''}
+						</code>
+						{#if proxy.endpoint_count > 1}
+							<span class="text-2xs text-muted-foreground">
+								+{proxy.endpoint_count - 1} more
+							</span>
+						{/if}
+					</div>
+					<div class="{PROXY_COL.contexts} text-sm tabular-nums">
+						{proxy.contexts || '—'}
+					</div>
+					<div class="{PROXY_COL.status} flex flex-col">
+						<Hint text={check === 'failed' ? proxy.last_test_message : null}>
+							{#snippet child(props)}
+								<span {...props} class="inline-flex items-center gap-2 text-sm">
+									{#if testing === proxy.id}
+										<Spinner class="size-3" />
+										<span class="text-muted-foreground">Testing</span>
 									{:else}
-										<CircleXIcon class="size-3 text-destructive" />
-										<span class="text-muted-foreground"
-											>Tested {formatDate(proxy.last_test_at)}</span
+										<span class="size-2 shrink-0 rounded-full {CHECK_DOT[check]}"></span>
+										<span
+											class={check === 'ok' || check === 'failed' ? '' : 'text-muted-foreground'}
 										>
+											{STATUS_LABEL[check]}
+										</span>
 									{/if}
 								</span>
-								{#if proxy.last_test_message}
-									<span class="pl-[18px] break-words text-muted-foreground">
-										{proxy.last_test_message}
-									</span>
-								{/if}
-							</div>
+							{/snippet}
+						</Hint>
+						{#if proxy.last_test_at && testing !== proxy.id}
+							<span class="pl-4 text-2xs text-muted-foreground tabular-nums">
+								{relativeTime(proxy.last_test_at)}
+							</span>
 						{/if}
-
-						<div class="mt-3 flex items-center gap-1.5">
-							<Tooltip.Root>
-								<Tooltip.Trigger>
-									{#snippet child({ props })}
-										<Button
-											{...props}
-											variant="ghost"
-											size="sm"
-											class="h-7 px-2 text-xs"
-											onclick={() => openEdit(proxy)}
-										>
-											<Pencil class="mr-1 size-3" />
-											Edit
-										</Button>
-									{/snippet}
-								</Tooltip.Trigger>
-								<Tooltip.Content>Edit proxy</Tooltip.Content>
-							</Tooltip.Root>
-
-							<Tooltip.Root>
-								<Tooltip.Trigger>
-									{#snippet child({ props })}
-										<Button
-											{...props}
-											variant="ghost"
-											size="sm"
-											class="h-7 px-2 text-xs"
-											disabled={testingId === proxy.id}
-											onclick={() => handleTest(proxy.id)}
-										>
-											{#if testingId === proxy.id}
-												<Spinner class="mr-1 size-3" />
-											{:else}
-												<FlaskConicalIcon class="mr-1 size-3" />
-											{/if}
-											Test
-										</Button>
-									{/snippet}
-								</Tooltip.Trigger>
-								<Tooltip.Content>Test reachability</Tooltip.Content>
-							</Tooltip.Root>
-
-							{#if !proxy.is_default}
-								<Tooltip.Root>
-									<Tooltip.Trigger>
-										{#snippet child({ props })}
-											<Button
-												{...props}
-												variant="ghost"
-												size="sm"
-												class="h-7 px-2 text-xs"
-												disabled={settingDefaultId === proxy.id}
-												onclick={() => handleSetDefault(proxy.id)}
-											>
-												{#if settingDefaultId === proxy.id}
-													<Spinner class="mr-1 size-3" />
-												{:else}
-													<StarIcon class="mr-1 size-3" />
-												{/if}
-												Default
-											</Button>
-										{/snippet}
-									</Tooltip.Trigger>
-									<Tooltip.Content>Set as default</Tooltip.Content>
-								</Tooltip.Root>
-							{/if}
-
-							<div class="flex-1"></div>
-
-							<Tooltip.Root>
-								<Tooltip.Trigger>
-									{#snippet child({ props })}
-										<Button
-											{...props}
-											variant="ghost"
-											size="sm"
-											class="h-7 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
-											onclick={() => openDelete(proxy)}
-										>
-											<Trash2Icon class="size-3" />
-										</Button>
-									{/snippet}
-								</Tooltip.Trigger>
-								<Tooltip.Content>Remove proxy</Tooltip.Content>
-							</Tooltip.Root>
-						</div>
-					</Card.Content>
-				</Card.Root>
+					</div>
+					<div class={PROXY_COL.actions}>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<Button {...props} variant="ghost" size="icon" class="size-7">
+										<MoreVerticalIcon class="size-4" />
+										<span class="sr-only">{proxy.name} actions</span>
+									</Button>
+								{/snippet}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item
+									disabled={testing !== null || !proxy.is_active}
+									onSelect={() => test(proxy)}
+								>
+									Test
+								</DropdownMenu.Item>
+								<DropdownMenu.Item onSelect={() => openDialog(proxy)}>Edit</DropdownMenu.Item>
+								{#if !proxy.is_default}
+									<DropdownMenu.Item
+										disabled={!proxy.is_active}
+										onSelect={() => makeDefault(proxy)}
+									>
+										Set as default
+									</DropdownMenu.Item>
+								{/if}
+								<DropdownMenu.Item onSelect={() => setActive(proxy, !proxy.is_active)}>
+									{proxy.is_active ? 'Disable' : 'Enable'}
+								</DropdownMenu.Item>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item variant="destructive" onSelect={() => (removing = proxy)}>
+									Remove
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</div>
 			{/each}
 		</div>
-	{/if}
-</div>
+	</Card.Root>
+{/if}
 
 <Dialog.Root bind:open={dialogOpen}>
 	<Dialog.Content class="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl">
-		<Dialog.Header class="px-6 pt-6 pb-2">
-			<Dialog.Title>{editingId ? 'Edit proxy' : 'Add proxy'}</Dialog.Title>
-			<Dialog.Description>
-				One or more endpoints. Passwords are not shown after saving.
-			</Dialog.Description>
+		<Dialog.Header class="px-6 pt-6 pb-4">
+			<Dialog.Title>{editing ? 'Edit proxy' : 'Add proxy'}</Dialog.Title>
 		</Dialog.Header>
-
-		<ScrollArea class="flex-1">
-			<div class="space-y-5 px-6 py-4">
-				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+		<ScrollArea
+			class="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]]:max-h-[calc(85vh-10rem)]"
+		>
+			<div class="flex flex-col gap-5 px-6 pb-5">
+				<div class="grid gap-4 sm:grid-cols-2">
 					<FormField label="Name">
+						{#snippet children({ id })}
+							<Input {id} bind:value={name} maxlength={120} disabled={saving} />
+						{/snippet}
+					</FormField>
+					<FormField label="Description">
 						{#snippet children({ id })}
 							<Input
 								{id}
-								bind:value={formName}
-								placeholder="Residential pool"
-								class="h-9"
+								bind:value={description}
+								maxlength={500}
+								placeholder="Optional"
 								disabled={saving}
 							/>
 						{/snippet}
 					</FormField>
-					<div class="space-y-1.5">
-						<Label class="text-xs">Mode</Label>
-						<Select.Root type="single" bind:value={formMode}>
-							<Select.Trigger class="h-9 w-full text-sm"
-								>{PROXY_MODE_LABELS[formMode as (typeof PROXY_MODES)[number]] ??
-									'Single'}</Select.Trigger
-							>
-							<Select.Content>
-								{#each PROXY_MODES as m (m)}
-									<Select.Item value={m} label={PROXY_MODE_LABELS[m]}
-										>{PROXY_MODE_LABELS[m]}</Select.Item
-									>
-								{/each}
-							</Select.Content>
-						</Select.Root>
-					</div>
 				</div>
 
-				<FormField label="Description" description="Optional">
-					{#snippet children({ id })}
-						<Input
-							{id}
-							bind:value={formDescription}
-							placeholder="Description"
-							class="h-9"
-							disabled={saving}
-						/>
-					{/snippet}
-				</FormField>
-
-				<Separator />
-
-				<div class="space-y-3">
-					<Label class="text-xs">Endpoints</Label>
-					{#each formRows as row, i (i)}
-						<div class="space-y-3 rounded-lg border bg-muted/30 p-3">
-							<div class="grid grid-cols-1 gap-2.5 sm:grid-cols-[6.5rem_1fr_5.5rem_auto]">
-								<div class="space-y-1">
-									<Label class="text-2xs uppercase tracking-wide text-muted-foreground"
-										>Scheme</Label
-									>
-									<Select.Root
-										type="single"
-										value={row.scheme}
-										onValueChange={(v) => setRow(i, 'scheme', v ?? 'http')}
-									>
-										<Select.Trigger class="h-9 w-full text-sm"
-											>{PROXY_SCHEME_LABELS[row.scheme as (typeof PROXY_SCHEMES)[number]] ??
-												'HTTP'}</Select.Trigger
-										>
-										<Select.Content>
-											{#each PROXY_SCHEMES as s (s)}
-												<Select.Item value={s} label={PROXY_SCHEME_LABELS[s]}
-													>{PROXY_SCHEME_LABELS[s]}</Select.Item
-												>
-											{/each}
-										</Select.Content>
-									</Select.Root>
-								</div>
-								<div class="space-y-1">
-									<Label class="text-2xs uppercase tracking-wide text-muted-foreground">Host</Label>
-									<Input
-										value={row.host}
-										placeholder="gate.provider.com"
-										class="h-9 font-mono text-xs"
-										autocomplete="off"
-										oninput={(e) => setRow(i, 'host', e.currentTarget.value)}
-									/>
-								</div>
-								<div class="space-y-1">
-									<Label class="text-2xs uppercase tracking-wide text-muted-foreground">Port</Label>
-									<Input
-										type="number"
-										min="1"
-										max="65535"
-										value={row.port}
-										placeholder="8080"
-										class="h-9 font-mono text-xs"
-										oninput={(e) => setRow(i, 'port', e.currentTarget.value)}
-									/>
-								</div>
-								<div class="flex items-end">
-									<Button
-										variant="ghost"
-										size="icon"
-										class="h-9 w-9 shrink-0 text-muted-foreground hover:text-destructive"
-										disabled={formRows.length === 1}
-										onclick={() => removeRow(i)}
-										aria-label="Remove endpoint"
-									>
-										<XIcon class="size-4" />
-									</Button>
-								</div>
-							</div>
-							<div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
-								<div class="space-y-1">
-									<Label class="text-2xs uppercase tracking-wide text-muted-foreground"
-										>Username</Label
-									>
-									<Input
-										value={row.username}
-										placeholder="Optional"
-										class="h-9 font-mono text-xs"
-										autocomplete="off"
-										oninput={(e) => setRow(i, 'username', e.currentTarget.value)}
-									/>
-								</div>
-								<div class="space-y-1">
-									<Label class="text-2xs uppercase tracking-wide text-muted-foreground"
-										>Password</Label
-									>
-									<Input
-										type="password"
-										value={row.password}
-										placeholder={row.masked ? 'Leave blank to keep the current value' : 'Optional'}
-										class="h-9 font-mono text-xs"
-										autocomplete="off"
-										oninput={(e) => setRow(i, 'password', e.currentTarget.value)}
-									/>
-								</div>
-							</div>
+				<div class="flex flex-col gap-2">
+					<div class="flex items-baseline justify-between gap-3">
+						<span class="text-sm font-medium">Endpoints</span>
+						{#if rows.length > 1}
+							<span class="text-xs text-muted-foreground">
+								Each scan uses one endpoint from the pool
+							</span>
+						{/if}
+					</div>
+					<div class="overflow-hidden rounded-lg border">
+						<div
+							class="hidden grid-cols-[6.5rem_minmax(0,1fr)_5rem_minmax(0,0.8fr)_minmax(0,0.8fr)_2rem] gap-2 border-b bg-muted/20 px-3 py-2 text-2xs font-medium tracking-wide text-muted-foreground uppercase sm:grid"
+						>
+							<span>Scheme</span>
+							<span>Host</span>
+							<span>Port</span>
+							<span>Username</span>
+							<span>Password</span>
+							<span></span>
 						</div>
-					{/each}
+						{#each rows as row, i (i)}
+							<div
+								class="grid grid-cols-2 gap-2 border-b border-border/60 px-3 py-2 last:border-b-0 sm:grid-cols-[6.5rem_minmax(0,1fr)_5rem_minmax(0,0.8fr)_minmax(0,0.8fr)_2rem]"
+							>
+								<Select.Root
+									type="single"
+									value={row.scheme}
+									onValueChange={(v) => v && (row.scheme = v)}
+								>
+									<Select.Trigger class="h-9 w-full" aria-label="Scheme">
+										{PROXY_SCHEME_LABELS[row.scheme as Scheme] ?? row.scheme}
+									</Select.Trigger>
+									<Select.Content>
+										{#each PROXY_SCHEMES as scheme (scheme)}
+											<Select.Item value={scheme} label={PROXY_SCHEME_LABELS[scheme]}>
+												{PROXY_SCHEME_LABELS[scheme]}
+											</Select.Item>
+										{/each}
+									</Select.Content>
+								</Select.Root>
+								<Input
+									bind:value={row.host}
+									placeholder="gate.provider.com"
+									aria-label="Host"
+									autocomplete="off"
+									class="h-9 font-mono text-xs"
+								/>
+								<Input
+									bind:value={row.port}
+									type="number"
+									min="1"
+									max="65535"
+									aria-label="Port"
+									class="h-9 font-mono text-xs"
+								/>
+								<Input
+									bind:value={row.username}
+									placeholder="Optional"
+									aria-label="Username"
+									autocomplete="off"
+									class="h-9 font-mono text-xs"
+								/>
+								<Input
+									bind:value={row.password}
+									type="password"
+									placeholder={row.stored ? 'Stored' : 'Optional'}
+									aria-label="Password"
+									autocomplete="new-password"
+									class="h-9 font-mono text-xs"
+								/>
+								<Button
+									variant="ghost"
+									size="icon"
+									class="size-9 text-muted-foreground"
+									disabled={rows.length === 1}
+									aria-label="Remove endpoint"
+									onclick={() => (rows = rows.filter((_, idx) => idx !== i))}
+								>
+									<XIcon class="size-4" />
+								</Button>
+							</div>
+						{/each}
+					</div>
 					<Button
 						variant="ghost"
 						size="sm"
-						class="h-8 gap-1.5 text-muted-foreground"
-						onclick={addRow}
+						class="w-fit text-muted-foreground"
+						onclick={() => (rows = [...rows, blank()])}
 					>
 						<PlusIcon class="size-3.5" />
 						Add endpoint
 					</Button>
 				</div>
 
-				<Separator />
-
-				<div class="flex items-center justify-between rounded-lg border px-4 py-3">
-					<div class="space-y-0.5">
-						<Label class="text-sm font-medium">Set as default</Label>
-						<p class="text-xs text-muted-foreground">
-							Used by contexts that do not choose a proxy.
-						</p>
-					</div>
-					<Switch
-						checked={formDefault}
-						onCheckedChange={(v) => (formDefault = v)}
-						disabled={saving}
-					/>
-				</div>
+				<label
+					class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border px-4 py-3"
+					for="proxy-default"
+				>
+					<span class="flex flex-col gap-0.5">
+						<span class="text-sm font-medium">Default proxy</span>
+						<span class="text-xs text-muted-foreground">
+							Used by scans launched without a scan context. Preselected for new scan contexts.
+						</span>
+					</span>
+					<Switch id="proxy-default" bind:checked={asDefault} disabled={saving} />
+				</label>
 			</div>
 		</ScrollArea>
-
 		<Dialog.Footer class="border-t px-6 py-4">
-			<Button variant="outline" onclick={() => (dialogOpen = false)} disabled={saving}
-				>Cancel</Button
-			>
-			<LoadingButton onclick={handleSave} loading={saving} loadingLabel="Saving">
-				{editingId ? 'Save changes' : 'Add proxy'}
+			<Button variant="outline" disabled={saving} onclick={() => (dialogOpen = false)}>
+				Cancel
+			</Button>
+			<LoadingButton loading={saving} loadingLabel="Saving" onclick={save}>
+				{editing ? 'Save proxy' : 'Add proxy'}
 			</LoadingButton>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
 
-<DeleteConfirmationDialog
-	bind:open={deleteOpen}
+<ConfirmDialog
+	open={removing !== null}
 	title="Remove proxy"
-	description={`Proxy ${deletingProxy?.name ?? ''} is removed. Contexts using it send traffic directly.`}
+	description={removing ? removeDescription(removing) : ''}
 	confirmLabel="Remove"
-	{isDeleting}
-	onOpenChange={(o) => (deleteOpen = o)}
-	onConfirm={handleDelete}
-/>
-
-<SelectionDeleteBar
-	ids={[...picked]}
-	noun="proxy"
-	nounPlural="proxies"
-	remove={async (id) => {
-		await proxiesApi.remove(id);
-		proxiesStore.drop(id);
+	destructive
+	loading={deleting}
+	onOpenChange={(open) => {
+		if (!open) removing = null;
 	}}
-	onDone={() => picked.clear()}
-	onClear={() => picked.clear()}
+	onConfirm={remove}
 />
diff --git a/frontend/src/lib/components/settings/setting-row.svelte b/frontend/src/lib/components/settings/setting-row.svelte
new file mode 100644
index 000000000..a740aeccf
--- /dev/null
+++ b/frontend/src/lib/components/settings/setting-row.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '$lib/utils';
+
+	interface Props {
+		label: string;
+		help?: string;
+		for?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { label, help, for: target, class: className, children }: Props = $props();
+</script>
+
+<div
+	class={cn(
+		'grid grid-cols-1 gap-2 border-t border-border/60 px-5 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:gap-6',
+		className
+	)}
+>
+	<div class="flex min-w-0 flex-col gap-0.5">
+		{#if target}
+			<label for={target} class="text-sm leading-5 font-medium">{label}</label>
+		{:else}
+			<span class="text-sm leading-5 font-medium">{label}</span>
+		{/if}
+		{#if help}
+			<span class="text-xs text-muted-foreground">{help}</span>
+		{/if}
+	</div>
+	<div class="flex shrink-0 items-center gap-2">
+		{@render children()}
+	</div>
+</div>
diff --git a/frontend/src/lib/components/settings/status.ts b/frontend/src/lib/components/settings/status.ts
new file mode 100644
index 000000000..81401d726
--- /dev/null
+++ b/frontend/src/lib/components/settings/status.ts
@@ -0,0 +1,15 @@
+export type CheckState = 'ok' | 'failed' | 'untested' | 'off';
+
+export const CHECK_DOT: Record<CheckState, string> = {
+	ok: 'bg-success',
+	failed: 'bg-destructive',
+	untested: 'bg-muted-foreground/60',
+	off: 'bg-muted-foreground/30'
+};
+
+export function checkState(enabled: boolean, ok: boolean | null): CheckState {
+	if (!enabled) return 'off';
+	if (ok === true) return 'ok';
+	if (ok === false) return 'failed';
+	return 'untested';
+}
diff --git a/frontend/src/lib/components/settings/timezone-picker.svelte b/frontend/src/lib/components/settings/timezone-picker.svelte
new file mode 100644
index 000000000..6dd09c711
--- /dev/null
+++ b/frontend/src/lib/components/settings/timezone-picker.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import * as Command from '$lib/components/ui/command/index.js';
+	import * as Popover from '$lib/components/ui/popover/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+
+	interface Props {
+		value: string;
+		id?: string;
+		disabled?: boolean;
+		onChange: (zone: string) => void;
+	}
+
+	let { value, id, disabled = false, onChange }: Props = $props();
+
+	let open = $state(false);
+
+	const zones = $derived.by(() => {
+		const all = ['UTC', ...Intl.supportedValuesOf('timeZone').filter((z) => z !== 'UTC')];
+		return value && !all.includes(value) ? [value, ...all] : all;
+	});
+
+	function pick(zone: string) {
+		open = false;
+		if (zone !== value) onChange(zone);
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger {disabled}>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				{id}
+				variant="outline"
+				role="combobox"
+				aria-expanded={open}
+				class="h-9 w-60 justify-between font-normal"
+			>
+				<span class="truncate">{value}</span>
+				<ChevronsUpDownIcon class="size-4 shrink-0 text-muted-foreground" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-72 p-0" align="end">
+		<Command.Root>
+			<Command.Input placeholder="Search time zones" />
+			<Command.List class="max-h-none overflow-visible">
+				<Command.Empty>No time zone</Command.Empty>
+				<ScrollArea class="[&_[data-slot=scroll-area-viewport]]:max-h-72">
+					<Command.Group>
+						{#each zones as zone (zone)}
+							<Command.Item value={zone} onSelect={() => pick(zone)}>
+								<span class="flex-1 truncate">{zone}</span>
+								{#if zone === value}
+									<CheckIcon class="size-4 text-primary" />
+								{/if}
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				</ScrollArea>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/frontend/src/lib/components/settings/users-panel.svelte b/frontend/src/lib/components/settings/users-panel.svelte
new file mode 100644
index 000000000..f2bf79b3c
--- /dev/null
+++ b/frontend/src/lib/components/settings/users-panel.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import EyeIcon from '@lucide/svelte/icons/eye';
+	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+	import MoreVerticalIcon from '@lucide/svelte/icons/more-vertical';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+	import UsersIcon from '@lucide/svelte/icons/users';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import ConfirmDialog from '$lib/components/confirm-dialog.svelte';
+	import EmptyState from '$lib/components/empty-state.svelte';
+	import FormField from '$lib/components/form-field.svelte';
+	import LoadingButton from '$lib/components/loading-button.svelte';
+	import { usersApi, type UserAccount } from '$lib/api/users';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { settingsActions } from '$lib/stores/settings-actions.svelte';
+	import { ROLE_LABELS, roleLabel } from '$lib/config/users';
+	import { formatDate } from '$lib/utilities';
+	import { BODY_ROW, HEAD_ROW, USER_COL } from './columns';
+
+	const ADMIN = 'admin';
+	const MEMBER = 'member';
+
+	let users = $state<UserAccount[]>([]);
+	let loading = $state(true);
+	let loadError = $state<string | null>(null);
+
+	let dialogOpen = $state(false);
+	let username = $state('');
+	let email = $state('');
+	let password = $state('');
+	let showPassword = $state(false);
+	let role = $state(MEMBER);
+	let saving = $state(false);
+
+	let removing = $state<UserAccount | null>(null);
+	let deleting = $state(false);
+
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
+	const selfId = $derived(auth.user?.id ?? null);
+	const canSave = $derived(!saving && !!username.trim() && !!email.trim() && password.length > 0);
+
+	async function load() {
+		loading = true;
+		loadError = null;
+		try {
+			users = await usersApi.list();
+		} catch (e) {
+			loadError = e instanceof Error ? e.message : 'Users not loaded';
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		if (isAdmin) void load();
+		else loading = false;
+	});
+
+	function openAdd() {
+		username = '';
+		email = '';
+		password = '';
+		showPassword = false;
+		role = MEMBER;
+		dialogOpen = true;
+	}
+
+	async function create() {
+		if (!canSave) return;
+		saving = true;
+		try {
+			const created = await usersApi.create({
+				username: username.trim(),
+				email: email.trim(),
+				password,
+				is_superuser: role === ADMIN
+			});
+			users = [...users, created];
+			toast.success(`User ${created.username} added`);
+			dialogOpen = false;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'User not added');
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function update(user: UserAccount, patch: { is_active?: boolean; is_superuser?: boolean }) {
+		try {
+			const updated = await usersApi.update(user.id, patch);
+			users = users.map((u) => (u.id === updated.id ? updated : u));
+			if (patch.is_active !== undefined) {
+				toast.success(`User ${user.username} ${patch.is_active ? 'enabled' : 'disabled'}`);
+			} else {
+				toast.success('Role saved');
+			}
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'User not updated');
+		}
+	}
+
+	async function remove() {
+		const user = removing;
+		if (!user) return;
+		deleting = true;
+		try {
+			await usersApi.remove(user.id);
+			users = users.filter((u) => u.id !== user.id);
+			toast.success(`User ${user.username} removed`);
+			removing = null;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'User not removed');
+			removing = null;
+		} finally {
+			deleting = false;
+		}
+	}
+
+	$effect(() => {
+		if (!isAdmin) return;
+		settingsActions.set(addAction);
+		return () => settingsActions.clear(addAction);
+	});
+</script>
+
+{#snippet addAction()}
+	<Button size="sm" onclick={openAdd}>
+		<PlusIcon class="size-4" />
+		Add user
+	</Button>
+{/snippet}
+
+{#if !isAdmin}
+	<EmptyState compact icon={UsersIcon} title="Users are managed by administrators" />
+{:else if loading}
+	<Card.Root class="gap-3 p-4">
+		<Skeleton class="h-8 w-full" />
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-10 w-full" />
+	</Card.Root>
+{:else if loadError}
+	<EmptyState compact icon={TriangleAlertIcon} title="Users not loaded" description={loadError}>
+		<Button variant="outline" size="sm" onclick={load}>
+			<RotateCwIcon class="size-3.5" />
+			Retry
+		</Button>
+	</EmptyState>
+{:else}
+	<Card.Root class="gap-0 overflow-hidden py-0">
+		<div class="@container/users w-full" role="table" aria-label="Users">
+			<div class={HEAD_ROW} role="row">
+				<div class={USER_COL.user}>User</div>
+				<div class={USER_COL.role}>Role</div>
+				<div class={USER_COL.twoFactor}>Two-factor</div>
+				<div class={USER_COL.created}>Added</div>
+				<div class={USER_COL.actions}></div>
+			</div>
+			{#each users as user (user.id)}
+				{@const isSelf = user.id === selfId}
+				<div class="{BODY_ROW} {user.is_active ? '' : 'text-muted-foreground'}" role="row">
+					<div class="{USER_COL.user} flex flex-col">
+						<span class="flex items-center gap-2 text-sm leading-5 font-medium">
+							<span class="wrap-anywhere">{user.username}</span>
+							{#if isSelf}
+								<Badge variant="secondary" class="h-5 px-1.5 text-2xs">Signed in</Badge>
+							{/if}
+							{#if !user.is_active}
+								<Badge variant="outline" class="h-5 px-1.5 text-2xs">Disabled</Badge>
+							{/if}
+						</span>
+						<span class="text-2xs text-muted-foreground wrap-anywhere">{user.email}</span>
+					</div>
+					<div class="{USER_COL.role} text-sm">{roleLabel(user.is_superuser)}</div>
+					<div class="{USER_COL.twoFactor} text-sm">
+						{#if user.totp_enabled}
+							On
+						{:else}
+							<span class="text-muted-foreground">Off</span>
+						{/if}
+					</div>
+					<div class="{USER_COL.created} text-xs text-muted-foreground tabular-nums">
+						{formatDate(user.created_at)}
+					</div>
+					<div class={USER_COL.actions}>
+						{#if !isSelf}
+							<DropdownMenu.Root>
+								<DropdownMenu.Trigger>
+									{#snippet child({ props })}
+										<Button {...props} variant="ghost" size="icon" class="size-7">
+											<MoreVerticalIcon class="size-4" />
+											<span class="sr-only">{user.username} actions</span>
+										</Button>
+									{/snippet}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content align="end">
+									<DropdownMenu.Item
+										onSelect={() => update(user, { is_superuser: !user.is_superuser })}
+									>
+										{user.is_superuser
+											? `Make ${ROLE_LABELS.member.toLowerCase()}`
+											: 'Make administrator'}
+									</DropdownMenu.Item>
+									<DropdownMenu.Item onSelect={() => update(user, { is_active: !user.is_active })}>
+										{user.is_active ? 'Disable' : 'Enable'}
+									</DropdownMenu.Item>
+									<DropdownMenu.Separator />
+									<DropdownMenu.Item variant="destructive" onSelect={() => (removing = user)}>
+										Remove
+									</DropdownMenu.Item>
+								</DropdownMenu.Content>
+							</DropdownMenu.Root>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</Card.Root>
+{/if}
+
+<Dialog.Root bind:open={dialogOpen}>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>Add user</Dialog.Title>
+		</Dialog.Header>
+		<form
+			class="flex flex-col gap-4"
+			onsubmit={(e) => {
+				e.preventDefault();
+				void create();
+			}}
+		>
+			<FormField label="Username">
+				{#snippet children({ id })}
+					<Input {id} bind:value={username} autocomplete="off" maxlength={50} disabled={saving} />
+				{/snippet}
+			</FormField>
+			<FormField label="Email">
+				{#snippet children({ id })}
+					<Input {id} type="email" bind:value={email} autocomplete="off" disabled={saving} />
+				{/snippet}
+			</FormField>
+			<FormField label="Password">
+				{#snippet children({ id })}
+					<div class="relative">
+						<Input
+							{id}
+							type={showPassword ? 'text' : 'password'}
+							bind:value={password}
+							autocomplete="new-password"
+							class="pr-10"
+							disabled={saving}
+						/>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon"
+							class="absolute top-1/2 right-1.5 size-7 -translate-y-1/2 text-muted-foreground"
+							aria-label={showPassword ? 'Hide password' : 'Show password'}
+							aria-pressed={showPassword}
+							onclick={() => (showPassword = !showPassword)}
+						>
+							{#if showPassword}<EyeOffIcon class="size-4" />{:else}<EyeIcon class="size-4" />{/if}
+						</Button>
+					</div>
+				{/snippet}
+			</FormField>
+			<FormField label="Role">
+				{#snippet children({ id })}
+					<Select.Root type="single" bind:value={role} disabled={saving}>
+						<Select.Trigger {id} class="w-full">
+							{role === ADMIN ? ROLE_LABELS.admin : ROLE_LABELS.member}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value={MEMBER} label={ROLE_LABELS.member}
+								>{ROLE_LABELS.member}</Select.Item
+							>
+							<Select.Item value={ADMIN} label={ROLE_LABELS.admin}>{ROLE_LABELS.admin}</Select.Item>
+						</Select.Content>
+					</Select.Root>
+				{/snippet}
+			</FormField>
+			<Dialog.Footer>
+				<Button
+					type="button"
+					variant="outline"
+					disabled={saving}
+					onclick={() => (dialogOpen = false)}
+				>
+					Cancel
+				</Button>
+				<LoadingButton type="submit" loading={saving} loadingLabel="Adding" disabled={!canSave}>
+					Add user
+				</LoadingButton>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+<ConfirmDialog
+	open={removing !== null}
+	title="Remove user"
+	description={removing ? `User ${removing.username} is removed.` : ''}
+	confirmLabel="Remove"
+	destructive
+	loading={deleting}
+	onOpenChange={(open) => {
+		if (!open) removing = null;
+	}}
+	onConfirm={remove}
+/>
diff --git a/frontend/src/lib/config/command-palette.ts b/frontend/src/lib/config/command-palette.ts
index 6a21fd289..316a22591 100644
--- a/frontend/src/lib/config/command-palette.ts
+++ b/frontend/src/lib/config/command-palette.ts
@@ -28,6 +28,7 @@ import Radar from '@lucide/svelte/icons/radar';
 import Target from '@lucide/svelte/icons/target';
 
 import type { IconComponent } from './icons';
+import { CALLBACK_SERVER } from './oast';
 import { Capability, type CapabilityKey } from './capabilities';
 import { ROUTES, routeLabels, SETTINGS_SECTIONS } from './routes';
 import { SURFACE_ORDER } from './surface';
@@ -223,8 +224,7 @@ function destinations(): Destination[] {
 		label: `${routeLabels.settings} · ${routeLabels[section] ?? section}`,
 		href: ROUTES.settings(section),
 		icon: Settings2,
-		keywords: section.replace(/-/g, ' '),
-		capability: section === 'bounty-hub' ? Capability.BOUNTY_PLATFORMS : undefined
+		keywords: section.replace(/-/g, ' ')
 	}));
 
 	return [
@@ -341,6 +341,21 @@ function destinations(): Destination[] {
 			keywords: 'programs watching platforms',
 			capability: Capability.BOUNTY_PROGRAMS
 		},
+		{
+			id: 'page:bounty-hub-settings',
+			label: `${routeLabels['bounty-hub']} · ${routeLabels.settings}`,
+			href: ROUTES.bountyHubSettings(),
+			icon: Award,
+			keywords: 'program sync feed interval alerts',
+			capability: Capability.BOUNTY_PROGRAMS
+		},
+		{
+			id: 'page:callback-server',
+			label: `${routeLabels.arsenal} · ${CALLBACK_SERVER}`,
+			href: ROUTES.callbackServer(),
+			icon: Settings2,
+			keywords: 'out-of-band oast interactsh callback'
+		},
 		...settings
 	];
 }
diff --git a/frontend/src/lib/config/notification-events.ts b/frontend/src/lib/config/notification-events.ts
new file mode 100644
index 000000000..0423be0d9
--- /dev/null
+++ b/frontend/src/lib/config/notification-events.ts
@@ -0,0 +1,73 @@
+import { Capability, type CapabilityKey } from '$lib/config/capabilities';
+
+// mirrors shared/definitions/notification_events.py
+export interface ChannelEvent {
+	type: string;
+	label: string;
+	hint: string;
+	capability: CapabilityKey | null;
+}
+
+export const CHANNEL_EVENTS: ChannelEvent[] = [
+	{
+		type: 'scan',
+		label: 'Scan results',
+		hint: 'Run digest, failed runs, exposures and exploit intelligence changes',
+		capability: null
+	},
+	{
+		type: 'vulnerability',
+		label: 'New vulnerabilities',
+		hint: 'New findings and inferred software CVEs',
+		capability: null
+	},
+	{
+		type: 'integration',
+		label: 'Program changes',
+		hint: 'Scope and status changes on bug bounty programs',
+		capability: Capability.BOUNTY_PROGRAMS
+	},
+	{
+		type: 'watch',
+		label: 'Program watches',
+		hint: 'New in-scope assets on a watched program',
+		capability: Capability.PROGRAM_WATCHES
+	},
+	{
+		type: 'new_checks',
+		label: 'New checks',
+		hint: 'Library additions and follow-up run results',
+		capability: null
+	},
+	{
+		type: 'system',
+		label: 'Reports and exports',
+		hint: 'Ready or failed',
+		capability: null
+	},
+	{
+		type: 'target',
+		label: 'Enrichment',
+		hint: 'Failed WHOIS and BGP lookups',
+		capability: null
+	}
+];
+
+export const DEFAULT_CHANNEL_EVENTS: string[] = CHANNEL_EVENTS.map((event) => event.type);
+
+export interface ChannelLevel {
+	value: string;
+	label: string;
+}
+
+export const CHANNEL_LEVELS: ChannelLevel[] = [
+	{ value: 'info', label: 'All events' },
+	{ value: 'warning', label: 'Warning and critical' },
+	{ value: 'error', label: 'Critical only' }
+];
+
+export const DEFAULT_CHANNEL_LEVEL = 'info';
+
+export function channelEventsFor(has: (capability: CapabilityKey) => boolean): ChannelEvent[] {
+	return CHANNEL_EVENTS.filter((event) => !event.capability || has(event.capability));
+}
diff --git a/frontend/src/lib/config/oast.ts b/frontend/src/lib/config/oast.ts
index c21b517c2..2005bab44 100644
--- a/frontend/src/lib/config/oast.ts
+++ b/frontend/src/lib/config/oast.ts
@@ -7,6 +7,8 @@ export enum OastMode {
 
 export const OAST_MODES: OastMode[] = [OastMode.OFF, OastMode.SELF_HOSTED, OastMode.PUBLIC];
 
+export const CALLBACK_SERVER = 'Callback server';
+
 export const OAST_MODE_LABELS: Record<OastMode, string> = {
 	[OastMode.OFF]: 'Off',
 	[OastMode.SELF_HOSTED]: 'Self-hosted',
@@ -14,7 +16,7 @@ export const OAST_MODE_LABELS: Record<OastMode, string> = {
 };
 
 export const OAST_MODE_HELP: Record<OastMode, string> = {
-	[OastMode.OFF]: 'Checks that need a callback run against the response alone.',
+	[OastMode.OFF]: 'Checks that need a callback are skipped.',
 	[OastMode.SELF_HOSTED]:
 		'An interactsh server this instance operates. Callbacks reach that server.',
 	[OastMode.PUBLIC]:
diff --git a/frontend/src/lib/config/retention.ts b/frontend/src/lib/config/retention.ts
new file mode 100644
index 000000000..ded7fb348
--- /dev/null
+++ b/frontend/src/lib/config/retention.ts
@@ -0,0 +1,31 @@
+export interface RetentionOption {
+	value: string;
+	label: string;
+}
+
+// mirrors shared/definitions/retention.py:KEEP_FOREVER
+export const KEEP_FOREVER = '0';
+
+// mirrors shared/definitions/retention.py:SCAN_RETENTION_DAYS
+export const SCAN_RETENTION: RetentionOption[] = [
+	{ value: '30', label: '30 days' },
+	{ value: '60', label: '60 days' },
+	{ value: '90', label: '90 days' },
+	{ value: '180', label: '180 days' },
+	{ value: '365', label: '1 year' },
+	{ value: KEEP_FOREVER, label: 'Keep forever' }
+];
+
+// mirrors shared/definitions/retention.py:SCREENSHOT_RETENTION_DAYS
+export const SCREENSHOT_RETENTION: RetentionOption[] = [
+	{ value: '7', label: '7 days' },
+	{ value: '14', label: '14 days' },
+	{ value: '30', label: '30 days' },
+	{ value: '60', label: '60 days' },
+	{ value: '90', label: '90 days' },
+	{ value: KEEP_FOREVER, label: 'Keep forever' }
+];
+
+export function retentionLabel(options: RetentionOption[], value: string): string {
+	return options.find((o) => o.value === value)?.label ?? `${value} days`;
+}
diff --git a/frontend/src/lib/config/routes.ts b/frontend/src/lib/config/routes.ts
index daf71df30..b81a460e1 100644
--- a/frontend/src/lib/config/routes.ts
+++ b/frontend/src/lib/config/routes.ts
@@ -42,9 +42,9 @@ export const routeLabels: Record<string, string> = {
 	general: 'General',
 	'api-keys': 'API keys',
 	proxies: 'Proxies',
-	oast: 'Out-of-band testing',
 	notifications: 'Notifications',
 	ai: 'AI',
+	users: 'Users',
 
 	profile: 'Profile'
 };
@@ -53,17 +53,25 @@ export const SETTINGS_SECTIONS = [
 	'general',
 	'api-keys',
 	'proxies',
-	'oast',
 	'notifications',
-	'bounty-hub',
-	'ai'
+	'ai',
+	'users'
 ] as const;
 export type SettingsSection = (typeof SETTINGS_SECTIONS)[number];
+export const ADMIN_SETTINGS: readonly SettingsSection[] = [
+	'api-keys',
+	'proxies',
+	'notifications',
+	'users'
+];
 
 export const BOUNTY_HUB_TABS = ['watching', 'programs', 'updates'] as const;
 export type BountyHubTab = (typeof BOUNTY_HUB_TABS)[number];
 
 export const ARSENAL_TABS = ['nuclei', 'wordlists', 'threat-intel'] as const;
+export const PANEL_PARAM = 'panel';
+export const CALLBACK_PANEL = 'callback-server';
+export const BOUNTY_SETTINGS_PANEL = 'settings';
 export const EXPOSURE_TABS = ['exposures', 'rules', 'dismissed'] as const;
 export type ExposureTab = (typeof EXPOSURE_TABS)[number];
 export const REPORT_TABS = ['reports', 'templates', 'themes', 'typefaces', 'branding'] as const;
@@ -127,6 +135,8 @@ export const ROUTES = {
 	},
 	schedules: '/automation/schedules',
 	arsenal: (tab?: ArsenalTab) => (tab ? `/arsenal?tab=${tab}` : '/arsenal'),
+	callbackServer: () => `/arsenal?${PANEL_PARAM}=${CALLBACK_PANEL}`,
+	bountyHubSettings: () => `/bounty-hub?${PANEL_PARAM}=${BOUNTY_SETTINGS_PANEL}`,
 	bountyHub: (handle?: string, platform?: string) =>
 		handle ? `/bounty-hub?program=${handle}&platform=${platform ?? 'hackerone'}` : '/bounty-hub',
 	bountyHubTab: (tab: BountyHubTab) => `/bounty-hub?tab=${tab}`,
diff --git a/frontend/src/lib/config/users.ts b/frontend/src/lib/config/users.ts
new file mode 100644
index 000000000..8717c1944
--- /dev/null
+++ b/frontend/src/lib/config/users.ts
@@ -0,0 +1,8 @@
+export const ROLE_LABELS = {
+	admin: 'Administrator',
+	member: 'Standard user'
+} as const;
+
+export function roleLabel(isSuperuser: boolean): string {
+	return isSuperuser ? ROLE_LABELS.admin : ROLE_LABELS.member;
+}
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
index 0e424dd93..f4351aa1c 100644
--- a/frontend/src/lib/constants.ts
+++ b/frontend/src/lib/constants.ts
@@ -1,5 +1,7 @@
 export const MASK = '••••••••';
 
+export const PRODUCT_NAME = 'reNgine';
+
 export const SELECT_NONE = '__none__';
 
 export const ACTIVITY_TICK_MS = 20_000;
diff --git a/frontend/src/lib/stores/capabilities.svelte.ts b/frontend/src/lib/stores/capabilities.svelte.ts
index 67386ab9b..1f4a2f400 100644
--- a/frontend/src/lib/stores/capabilities.svelte.ts
+++ b/frontend/src/lib/stores/capabilities.svelte.ts
@@ -5,10 +5,12 @@ import {
 	DEFAULT_INSTANCE_MODE,
 	type CapabilityKey
 } from '$lib/config/capabilities';
+import { PRODUCT_NAME } from '$lib/constants';
 
 function createCapabilitiesStore() {
 	let mode = $state<string>(DEFAULT_INSTANCE_MODE);
 	let capabilities = $state<string[]>(capabilitiesForMode(DEFAULT_INSTANCE_MODE));
+	let instanceName = $state(PRODUCT_NAME);
 	let hasFetched = $state(false);
 	let loading = false;
 
@@ -19,6 +21,9 @@ function createCapabilitiesStore() {
 		get capabilities() {
 			return capabilities;
 		},
+		get instanceName() {
+			return instanceName;
+		},
 		get hasFetched() {
 			return hasFetched;
 		},
@@ -29,6 +34,9 @@ function createCapabilitiesStore() {
 			mode = next;
 			capabilities = capabilitiesForMode(next);
 		},
+		setInstanceName(next: string) {
+			instanceName = next.trim() || PRODUCT_NAME;
+		},
 		async fetch() {
 			if (loading) return;
 			loading = true;
@@ -36,6 +44,7 @@ function createCapabilitiesStore() {
 				const s = await instanceSettingsApi.get();
 				mode = coerceInstanceMode(s.mode);
 				capabilities = s.capabilities ?? capabilitiesForMode(s.mode);
+				instanceName = s.instance_name?.trim() || PRODUCT_NAME;
 				hasFetched = true;
 			} catch {
 			} finally {
@@ -45,6 +54,7 @@ function createCapabilitiesStore() {
 		reset() {
 			mode = DEFAULT_INSTANCE_MODE;
 			capabilities = capabilitiesForMode(DEFAULT_INSTANCE_MODE);
+			instanceName = PRODUCT_NAME;
 			hasFetched = false;
 		}
 	};
diff --git a/frontend/src/lib/stores/proxies.svelte.ts b/frontend/src/lib/stores/proxies.svelte.ts
index 2bd7a18e1..c82ebcaa4 100644
--- a/frontend/src/lib/stores/proxies.svelte.ts
+++ b/frontend/src/lib/stores/proxies.svelte.ts
@@ -17,6 +17,9 @@ function createProxiesStore() {
 		get hasFetched() {
 			return hasFetched;
 		},
+		get defaultId(): string | null {
+			return proxies.find((p) => p.is_default && p.is_active)?.id ?? null;
+		},
 
 		async fetch() {
 			if (isLoading) return;
diff --git a/frontend/src/lib/stores/settings-actions.svelte.ts b/frontend/src/lib/stores/settings-actions.svelte.ts
new file mode 100644
index 000000000..dc497e2a3
--- /dev/null
+++ b/frontend/src/lib/stores/settings-actions.svelte.ts
@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+
+let current = $state<Snippet | null>(null);
+
+export const settingsActions = {
+	get snippet() {
+		return current;
+	},
+	set(snippet: Snippet) {
+		current = snippet;
+	},
+	clear(snippet: Snippet) {
+		if (current === snippet) current = null;
+	}
+};
diff --git a/frontend/src/lib/types/api-key.ts b/frontend/src/lib/types/api-key.ts
index e1815628d..f366024a9 100644
--- a/frontend/src/lib/types/api-key.ts
+++ b/frontend/src/lib/types/api-key.ts
@@ -28,6 +28,9 @@ export interface APIKeyRead {
 	is_enabled: boolean;
 	usage_counter: number;
 	last_used_at: string | null;
+	last_test_at: string | null;
+	last_test_ok: boolean | null;
+	last_test_message: string | null;
 	created_at: string;
 	updated_at: string;
 	meta: ProviderMeta;
@@ -44,6 +47,7 @@ export interface ProviderInfo {
 	group_label: string;
 	configured: boolean;
 	is_enabled: boolean;
+	testable: boolean;
 }
 
 export interface APIKeyCreate {
diff --git a/frontend/src/lib/types/notification-channel.ts b/frontend/src/lib/types/notification-channel.ts
index bc6346105..7357bb8b4 100644
--- a/frontend/src/lib/types/notification-channel.ts
+++ b/frontend/src/lib/types/notification-channel.ts
@@ -1,3 +1,10 @@
+import {
+	CHANNEL_EVENTS,
+	CHANNEL_LEVELS,
+	DEFAULT_CHANNEL_EVENTS,
+	DEFAULT_CHANNEL_LEVEL
+} from '$lib/config/notification-events';
+
 export const NOTIF_PROVIDERS = [
 	'slack',
 	'discord',
@@ -10,27 +17,14 @@ export const NOTIF_PROVIDERS = [
 
 export type NotifProvider = (typeof NOTIF_PROVIDERS)[number];
 
-export const NOTIF_CATEGORIES = [
-	{ value: 'scan', label: 'Scans', hint: 'Started, completed, failed' },
-	{ value: 'vulnerability', label: 'Vulnerabilities', hint: 'New findings by severity' },
-	{ value: 'target', label: 'Targets and assets', hint: 'Imports, new assets and endpoints' },
-	{ value: 'security', label: 'Security alerts', hint: 'Logins, account changes' },
-	{ value: 'system', label: 'System', hint: 'Updates and platform health' },
-	{ value: 'integration', label: 'Integrations', hint: 'API key and webhook failures' },
-	{ value: 'resource', label: 'Resources', hint: 'Storage and quota limits' },
-	{ value: 'watch', label: 'Program watches', hint: 'New in-scope assets on a watched program' },
-	{
-		value: 'new_checks',
-		label: 'New checks',
-		hint: 'New checks in the library and what they found'
-	}
-] as const;
+export const NOTIF_CATEGORIES = CHANNEL_EVENTS.map((event) => ({
+	value: event.type,
+	label: event.label,
+	hint: event.hint,
+	capability: event.capability
+}));
 
-export const NOTIF_SEVERITIES = [
-	{ value: 'info', label: 'Info and above' },
-	{ value: 'warning', label: 'Warning and above' },
-	{ value: 'error', label: 'Errors only' }
-] as const;
+export const NOTIF_SEVERITIES = CHANNEL_LEVELS;
 
 export interface NotificationPreference {
 	types: string[];
@@ -49,6 +43,9 @@ export interface NotificationChannelRead {
 	last_test_at: string | null;
 	last_test_ok: boolean | null;
 	last_test_message: string | null;
+	last_sent_at: string | null;
+	last_sent_ok: boolean | null;
+	last_sent_message: string | null;
 }
 
 export interface NotificationChannelCreate {
@@ -67,8 +64,5 @@ export interface NotificationChannelUpdate {
 }
 
 export function defaultNotificationPreference(): NotificationPreference {
-	return {
-		types: ['scan', 'vulnerability', 'target', 'security', 'system', 'watch', 'new_checks'],
-		min_severity: 'info'
-	};
+	return { types: [...DEFAULT_CHANNEL_EVENTS], min_severity: DEFAULT_CHANNEL_LEVEL };
 }
diff --git a/frontend/src/lib/types/proxy.ts b/frontend/src/lib/types/proxy.ts
index dc98941b9..dc94525ee 100644
--- a/frontend/src/lib/types/proxy.ts
+++ b/frontend/src/lib/types/proxy.ts
@@ -1,5 +1,4 @@
 export const PROXY_SCHEMES = ['http', 'https', 'socks5'] as const;
-export const PROXY_MODES = ['single', 'rotating'] as const;
 
 export const PROXY_SCHEME_LABELS: Record<(typeof PROXY_SCHEMES)[number], string> = {
 	http: 'HTTP',
@@ -7,11 +6,6 @@ export const PROXY_SCHEME_LABELS: Record<(typeof PROXY_SCHEMES)[number], string>
 	socks5: 'SOCKS5'
 };
 
-export const PROXY_MODE_LABELS: Record<(typeof PROXY_MODES)[number], string> = {
-	single: 'Single',
-	rotating: 'Rotating'
-};
-
 export interface ProxyEndpoint {
 	scheme: string;
 	host: string;
@@ -33,11 +27,11 @@ export interface ProxyRead {
 	id: string;
 	name: string;
 	description: string | null;
-	mode: string;
 	is_active: boolean;
 	is_default: boolean;
 	endpoints: ProxyEndpointRead[];
 	endpoint_count: number;
+	contexts: number;
 	created_at: string;
 	updated_at: string;
 	last_test_at: string | null;
@@ -48,7 +42,6 @@ export interface ProxyRead {
 export interface ProxyCreate {
 	name: string;
 	description?: string | null;
-	mode?: string;
 	is_active?: boolean;
 	is_default?: boolean;
 	endpoints: ProxyEndpoint[];
@@ -57,7 +50,6 @@ export interface ProxyCreate {
 export interface ProxyUpdate {
 	name?: string;
 	description?: string | null;
-	mode?: string;
 	is_active?: boolean;
 	is_default?: boolean;
 	endpoints?: ProxyEndpoint[] | null;
diff --git a/frontend/src/lib/types/vuln-template.ts b/frontend/src/lib/types/vuln-template.ts
index f6fede542..8f2871431 100644
--- a/frontend/src/lib/types/vuln-template.ts
+++ b/frontend/src/lib/types/vuln-template.ts
@@ -32,6 +32,7 @@ export interface TemplateFilter {
 	sets: string[];
 	tags: string[];
 	fired: boolean;
+	callback: boolean;
 	new_since: string | null;
 	limit: number;
 	offset: number;
@@ -46,6 +47,7 @@ export function emptyTemplateFilter(): TemplateFilter {
 		sets: [],
 		tags: [],
 		fired: false,
+		callback: false,
 		new_since: null,
 		limit: 50,
 		offset: 0
@@ -103,6 +105,7 @@ export interface TemplateLibraryStats {
 	sets: TemplateSetSpec[];
 	tags: SelectionBreakdown[];
 	fired: number;
+	callback: number;
 	new: number;
 	seen_at: string | null;
 	last_synced_at: string | null;
diff --git a/frontend/src/lib/utilities/dates.test.ts b/frontend/src/lib/utilities/dates.test.ts
index ef32bba6e..073b3bb3e 100644
--- a/frontend/src/lib/utilities/dates.test.ts
+++ b/frontend/src/lib/utilities/dates.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, afterEach, beforeEach, vi } from 'vitest';
-import { relativeTime, relativeTimeLong, uptime } from './dates';
+import { relativeTime, relativeTimeLong, untilTime, uptime } from './dates';
 
 const NOW = new Date('2026-09-11T12:00:00Z');
 const ago = (minutes: number) => new Date(NOW.getTime() - minutes * 60_000).toISOString();
@@ -105,3 +105,19 @@ describe('uptime', () => {
 		expect(relativeTime(ago(3 * HOUR))).toBe(`${uptime(ago(3 * HOUR))} ago`);
 	});
 });
+
+describe('untilTime', () => {
+	it('reads a future moment in the same buckets', () => {
+		expect(untilTime(ago(-5 * HOUR))).toBe('in 5h');
+		expect(untilTime(ago(-2 * DAY))).toBe('in 2d');
+	});
+
+	it('reads a moment under a minute away', () => {
+		expect(untilTime(new Date(NOW.getTime() + 20_000).toISOString())).toBe('in under a minute');
+	});
+
+	it('returns null once the moment has passed', () => {
+		expect(untilTime(ago(35))).toBeNull();
+		expect(untilTime(null)).toBeNull();
+	});
+});
diff --git a/frontend/src/lib/utilities/dates.ts b/frontend/src/lib/utilities/dates.ts
index 91844922b..0f045e5bf 100644
--- a/frontend/src/lib/utilities/dates.ts
+++ b/frontend/src/lib/utilities/dates.ts
@@ -42,6 +42,20 @@ export function relativeTimeLong(timestamp: string | Date | null | undefined): s
 	return `${e.count} ${e.long}${e.count === 1 ? '' : 's'} ago`;
 }
 
+/** Time until a future moment, as "in 5h", or null once it has passed. */
+export function untilTime(timestamp: string | Date | null | undefined): string | null {
+	if (!timestamp) return null;
+	const then = new Date(timestamp).getTime();
+	if (Number.isNaN(then)) return null;
+	const minutes = Math.floor((then - Date.now()) / 60000);
+	if (minutes < 0) return null;
+	for (const [per, short] of UNITS) {
+		const count = Math.floor(minutes / per);
+		if (count >= 1) return `in ${count}${short}`;
+	}
+	return 'in under a minute';
+}
+
 /** How long something has been running, as "3h" or "under a minute". */
 export function uptime(timestamp: string | Date | null | undefined): string {
 	const e = elapsed(timestamp);
diff --git a/frontend/src/lib/utilities/page-title.ts b/frontend/src/lib/utilities/page-title.ts
new file mode 100644
index 000000000..30c90b738
--- /dev/null
+++ b/frontend/src/lib/utilities/page-title.ts
@@ -0,0 +1,5 @@
+import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
+
+export function pageTitle(label: string): string {
+	return `${label} · ${capabilitiesStore.instanceName}`;
+}
diff --git a/frontend/src/routes/(app)/agents/+page.svelte b/frontend/src/routes/(app)/agents/+page.svelte
index 0ac28c7ad..c8a6b9cac 100644
--- a/frontend/src/routes/(app)/agents/+page.svelte
+++ b/frontend/src/routes/(app)/agents/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { browser } from '$app/environment';
 	import { untrack } from 'svelte';
 	import PlusIcon from '@lucide/svelte/icons/plus';
@@ -91,7 +92,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.agents} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.agents)}</title></svelte:head>
 
 <div class="flex flex-col gap-5">
 	<div class="flex flex-wrap items-end justify-between gap-3">
diff --git a/frontend/src/routes/(app)/arsenal/+page.svelte b/frontend/src/routes/(app)/arsenal/+page.svelte
index f05b6b813..a841b532c 100644
--- a/frontend/src/routes/(app)/arsenal/+page.svelte
+++ b/frontend/src/routes/(app)/arsenal/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -42,7 +43,7 @@
 	});
 </script>
 
-<svelte:head><title>{routeLabels.arsenal} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.arsenal)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div>
diff --git a/frontend/src/routes/(app)/automation/+page.svelte b/frontend/src/routes/(app)/automation/+page.svelte
index f7885ea85..51ee5954d 100644
--- a/frontend/src/routes/(app)/automation/+page.svelte
+++ b/frontend/src/routes/(app)/automation/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { ROUTES, routeLabels } from '$lib/config/routes';
 	onMount(() => goto(ROUTES.scans));
 </script>
 
-<svelte:head><title>{routeLabels.automation} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.automation)}</title></svelte:head>
diff --git a/frontend/src/routes/(app)/automation/contexts/+page.svelte b/frontend/src/routes/(app)/automation/contexts/+page.svelte
index e7c8d4a62..1c5402504 100644
--- a/frontend/src/routes/(app)/automation/contexts/+page.svelte
+++ b/frontend/src/routes/(app)/automation/contexts/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { goto } from '$app/navigation';
@@ -211,7 +212,7 @@
 	const total = $derived(scanContextsStore.contexts.length);
 </script>
 
-<svelte:head><title>{routeLabels.contexts} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.contexts)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div class="flex flex-wrap items-start justify-between gap-4">
diff --git a/frontend/src/routes/(app)/automation/contexts/[id]/+page.svelte b/frontend/src/routes/(app)/automation/contexts/[id]/+page.svelte
index 112a78b1e..493a7aac1 100644
--- a/frontend/src/routes/(app)/automation/contexts/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/automation/contexts/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { onMount, untrack } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { page } from '$app/state';
@@ -122,6 +123,18 @@
 		if (!proxiesStore.hasFetched) untrack(() => proxiesStore.fetch());
 	});
 
+	let proxyPreset = false;
+	$effect(() => {
+		const fallback = proxiesStore.defaultId;
+		if (!isNew || !draft || proxyPreset || !proxiesStore.hasFetched) return;
+		proxyPreset = true;
+		if (fallback && !draft.proxy_id) {
+			untrack(() => {
+				if (draft) draft.proxy_id = fallback;
+			});
+		}
+	});
+
 	$effect(() => {
 		const project = projectsStore.activeProject;
 		const id = contextId;
@@ -187,6 +200,7 @@
 		const templateKey = page.url.searchParams.get('template');
 		const template = contextTemplate(templateKey);
 		draft = templateDraft(templateKey);
+		proxyPreset = false;
 		loaded = null;
 		baseline = '';
 		touchedSecrets.clear();
@@ -349,7 +363,7 @@
 	}
 </script>
 
-<svelte:head><title>{loaded?.name ?? routeLabels.contexts} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(loaded?.name ?? routeLabels.contexts)}</title></svelte:head>
 
 {#snippet form()}
 	<section class="form">
diff --git a/frontend/src/routes/(app)/automation/engines/+page.svelte b/frontend/src/routes/(app)/automation/engines/+page.svelte
index b095adc37..b744aae80 100644
--- a/frontend/src/routes/(app)/automation/engines/+page.svelte
+++ b/frontend/src/routes/(app)/automation/engines/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { goto } from '$app/navigation';
@@ -274,7 +275,7 @@
 	const selectable = $derived(scanEnginesStore.engines.filter((e) => !e.builtin).length);
 </script>
 
-<svelte:head><title>{routeLabels.engines} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.engines)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div class="flex flex-wrap items-start justify-between gap-4">
diff --git a/frontend/src/routes/(app)/automation/schedules/+page.svelte b/frontend/src/routes/(app)/automation/schedules/+page.svelte
index 7ab6757a4..0975d8d3f 100644
--- a/frontend/src/routes/(app)/automation/schedules/+page.svelte
+++ b/frontend/src/routes/(app)/automation/schedules/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import { untrack } from 'svelte';
 	import { toast } from 'svelte-sonner';
@@ -126,7 +127,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.schedules} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.schedules)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div class="flex items-start justify-between">
diff --git a/frontend/src/routes/(app)/bounty-hub/+page.svelte b/frontend/src/routes/(app)/bounty-hub/+page.svelte
index a774b87f0..5d72241d5 100644
--- a/frontend/src/routes/(app)/bounty-hub/+page.svelte
+++ b/frontend/src/routes/(app)/bounty-hub/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
+	import SettingsIcon from '@lucide/svelte/icons/settings';
 	import SparklesIcon from '@lucide/svelte/icons/sparkles';
 	import TargetIcon from '@lucide/svelte/icons/target';
 	import { toast } from 'svelte-sonner';
-	import { goto } from '$app/navigation';
+	import { goto, replaceState } from '$app/navigation';
 	import { page } from '$app/state';
 	import * as Card from '$lib/components/ui/card';
 	import EmptyState from '$lib/components/empty-state.svelte';
@@ -20,6 +22,7 @@
 	import ProgramSheet from '$lib/components/bounty-hub/program-sheet.svelte';
 	import WatchingTab from '$lib/components/bounty-hub/watching-tab.svelte';
 	import WatchSheet from '$lib/components/bounty-hub/watch-sheet.svelte';
+	import SettingsSheet from '$lib/components/bounty-hub/settings-sheet.svelte';
 	import { watchesApi } from '$lib/api/watches';
 	import { watchesStore } from '$lib/stores/watches.svelte';
 	import { bountyVocabulary } from '$lib/stores/bounty-vocabulary.svelte';
@@ -31,7 +34,14 @@
 		REFRESH_POLL_MS,
 		SYNC_INTERVAL_LABELS
 	} from '$lib/config/bounty-programs';
-	import { BOUNTY_HUB_TABS, ROUTES, type BountyHubTab } from '$lib/config/routes';
+	import {
+		BOUNTY_HUB_TABS,
+		BOUNTY_SETTINGS_PANEL,
+		PANEL_PARAM,
+		ROUTES,
+		routeLabels,
+		type BountyHubTab
+	} from '$lib/config/routes';
 	import { projectsStore } from '$lib/stores/projects.svelte';
 	import { relativeTime } from '$lib/utilities/dates';
 	import type {
@@ -58,6 +68,20 @@
 	let watchTab = $state<'hosts' | 'activity'>('hosts');
 	let deepLinkedWatch = $state<string | null>(null);
 	let stream = $state<StreamStatus | null>(null);
+	let settingsOpen = $state(page.url.searchParams.get(PANEL_PARAM) === BOUNTY_SETTINGS_PANEL);
+
+	$effect(() => {
+		if (settingsOpen) return;
+		const params = untrack(() => new URLSearchParams(page.url.searchParams));
+		if (params.get(PANEL_PARAM) !== BOUNTY_SETTINGS_PANEL) return;
+		params.delete(PANEL_PARAM);
+		const qs = params.toString();
+		try {
+			replaceState(qs ? `?${qs}` : location.pathname, {});
+		} catch {
+			// ignore
+		}
+	});
 
 	const projectId = $derived(projectsStore.activeProject?.id);
 	const filterKey = $derived(JSON.stringify(filters));
@@ -255,12 +279,12 @@
 	}
 </script>
 
-<svelte:head><title>Bounty Hub · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels['bounty-hub'])}</title></svelte:head>
 
-<div class="flex flex-col gap-4 p-4">
+<div class="flex flex-col gap-4">
 	<div class="flex flex-wrap items-end justify-between gap-3">
 		<div class="flex flex-col gap-1">
-			<h1 class="text-xl font-semibold">Bounty Hub</h1>
+			<h1 class="text-2xl font-semibold tracking-tight">{routeLabels['bounty-hub']}</h1>
 			<p class="text-sm text-muted-foreground">
 				{#if status}
 					{status.programs.toLocaleString()} programs across {status.platforms.filter(
@@ -273,9 +297,13 @@
 						· synced {relativeTime(status.last_synced_at)}
 					{/if}
 					·
-					<a href={ROUTES.settings('bounty-hub')} class="hover:underline">
+					<button
+						type="button"
+						class="transition-colors hover:text-foreground"
+						onclick={() => (settingsOpen = true)}
+					>
 						{SYNC_INTERVAL_LABELS[status.sync_interval] ?? status.sync_interval}
-					</a>
+					</button>
 				{:else}
 					Bug bounty programs and their scope
 				{/if}
@@ -291,6 +319,10 @@
 				<RefreshCwIcon class="mr-2 size-3.5" />
 				Refresh all platforms
 			</LoadingButton>
+			<Button variant="outline" size="sm" onclick={() => (settingsOpen = true)}>
+				<SettingsIcon class="size-4" />
+				Settings
+			</Button>
 		</div>
 	</div>
 
@@ -401,3 +433,5 @@
 		}}
 	/>
 {/if}
+
+<SettingsSheet bind:open={settingsOpen} onSaved={() => void loadStatus()} />
diff --git a/frontend/src/routes/(app)/bounty-hub/[platform]/+page.svelte b/frontend/src/routes/(app)/bounty-hub/[platform]/+page.svelte
index 7066e1f42..c1bd6cfeb 100644
--- a/frontend/src/routes/(app)/bounty-hub/[platform]/+page.svelte
+++ b/frontend/src/routes/(app)/bounty-hub/[platform]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack, tick } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { goto } from '$app/navigation';
@@ -39,7 +40,7 @@
 	import { bountyProgramsApi } from '$lib/api/bounty-programs';
 	import { bountyVocabulary } from '$lib/stores/bounty-vocabulary.svelte';
 	import { breadcrumbStore } from '$lib/stores/breadcrumbs.svelte';
-	import { ROUTES } from '$lib/config/routes';
+	import { ROUTES, routeLabels } from '$lib/config/routes';
 	import { REFRESH_POLLS, REFRESH_POLL_MS } from '$lib/config/bounty-programs';
 	import {
 		REPORT_PAGE_SIZE,
@@ -371,7 +372,7 @@
 	}
 </script>
 
-<svelte:head><title>{label} · Bounty Hub · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(`${label} · ${routeLabels['bounty-hub']}`)}</title></svelte:head>
 <svelte:window onkeydown={onKey} />
 
 {#snippet sortHead(text: string, key: ReportSort, cls: string)}
diff --git a/frontend/src/routes/(app)/connectors/+page.svelte b/frontend/src/routes/(app)/connectors/+page.svelte
index b5f38548d..e63decc08 100644
--- a/frontend/src/routes/(app)/connectors/+page.svelte
+++ b/frontend/src/routes/(app)/connectors/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -107,12 +108,12 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.connectors} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.connectors)}</title></svelte:head>
 
-<div class="space-y-6 p-4 md:p-6">
+<div class="space-y-6">
 	<header class="flex flex-wrap items-start justify-between gap-4">
 		<div class="min-w-0">
-			<h1 class="text-xl font-semibold">{routeLabels.connectors}</h1>
+			<h1 class="text-2xl font-semibold tracking-tight">{routeLabels.connectors}</h1>
 		</div>
 		<Button size="sm" onclick={() => (newOpen = true)}>
 			<PlusIcon class="size-4" />
diff --git a/frontend/src/routes/(app)/dashboard/+page.svelte b/frontend/src/routes/(app)/dashboard/+page.svelte
index 72b205e98..1596da4dd 100644
--- a/frontend/src/routes/(app)/dashboard/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { ROUTES, routeLabels } from '$lib/config/routes';
 	import { SURFACE, SurfaceDimension } from '$lib/config/surface';
 	import { untrack } from 'svelte';
@@ -168,7 +169,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.dashboard} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.dashboard)}</title></svelte:head>
 
 <div class="flex flex-col gap-6">
 	<div class="flex flex-wrap items-end justify-between gap-4">
diff --git a/frontend/src/routes/(app)/exposures/+page.svelte b/frontend/src/routes/(app)/exposures/+page.svelte
index d9c898b7b..09afdf302 100644
--- a/frontend/src/routes/(app)/exposures/+page.svelte
+++ b/frontend/src/routes/(app)/exposures/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -44,7 +45,7 @@
 	});
 </script>
 
-<svelte:head><title>{routeLabels.exposures} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.exposures)}</title></svelte:head>
 
 <div class="space-y-6">
 	<h1 class="text-2xl font-semibold tracking-tight">{routeLabels.exposures}</h1>
diff --git a/frontend/src/routes/(app)/notes/+page.svelte b/frontend/src/routes/(app)/notes/+page.svelte
index 9d03f8aaa..d7a98994c 100644
--- a/frontend/src/routes/(app)/notes/+page.svelte
+++ b/frontend/src/routes/(app)/notes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import { untrack } from 'svelte';
 	import Search from '@lucide/svelte/icons/search';
@@ -119,7 +120,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.notes} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.notes)}</title></svelte:head>
 
 <div class="space-y-6">
 	<h1 class="text-2xl font-semibold tracking-tight">Notes</h1>
diff --git a/frontend/src/routes/(app)/profile/+page.svelte b/frontend/src/routes/(app)/profile/+page.svelte
index 04994b4d2..1bd0f9fd0 100644
--- a/frontend/src/routes/(app)/profile/+page.svelte
+++ b/frontend/src/routes/(app)/profile/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { ROLE_LABELS, roleLabel } from '$lib/config/users';
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import { auth } from '$lib/stores/auth.svelte';
 	import ChangeUsernameCard from '$lib/components/profile/change-username-card.svelte';
@@ -16,7 +18,7 @@
 	import { getInitials } from '$lib/utilities';
 </script>
 
-<svelte:head><title>{routeLabels.profile} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.profile)}</title></svelte:head>
 
 <div class="container max-w-5xl mx-auto space-y-6">
 	<h1 class="text-2xl font-semibold tracking-tight">Account and security</h1>
@@ -37,7 +39,7 @@
 						<div class="flex items-baseline gap-2 mb-0.5">
 							<h2 class="text-xl font-semibold">{auth.user?.username}</h2>
 							{#if auth.user?.is_superuser}
-								<Badge variant="secondary" class="h-5 text-xs px-2">Administrator</Badge>
+								<Badge variant="secondary" class="h-5 text-xs px-2">{ROLE_LABELS.admin}</Badge>
 							{/if}
 						</div>
 						<div class="flex items-center gap-3 text-sm text-muted-foreground">
@@ -89,7 +91,7 @@
 				<div class="space-y-1">
 					<p class="text-sm font-medium text-muted-foreground">Account type</p>
 					<p class="text-sm">
-						{auth.user?.is_superuser ? 'Administrator' : 'Standard user'}
+						{roleLabel(auth.user?.is_superuser ?? false)}
 					</p>
 				</div>
 
diff --git a/frontend/src/routes/(app)/remote-control/+page.svelte b/frontend/src/routes/(app)/remote-control/+page.svelte
index 91a726a8c..549e53e57 100644
--- a/frontend/src/routes/(app)/remote-control/+page.svelte
+++ b/frontend/src/routes/(app)/remote-control/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -112,9 +113,9 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels['remote-control']} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels['remote-control'])}</title></svelte:head>
 
-<div class="flex flex-col gap-4 p-4 md:p-6">
+<div class="flex flex-col gap-4">
 	<h1 class="sr-only">{routeLabels['remote-control']}</h1>
 
 	{#if !status}
diff --git a/frontend/src/routes/(app)/reports/+page.svelte b/frontend/src/routes/(app)/reports/+page.svelte
index 1114ef45a..a308a2218 100644
--- a/frontend/src/routes/(app)/reports/+page.svelte
+++ b/frontend/src/routes/(app)/reports/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -195,7 +196,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.reports} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.reports)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div class="flex flex-wrap items-start justify-between gap-3">
diff --git a/frontend/src/routes/(app)/reports/templates/[id]/+page.svelte b/frontend/src/routes/(app)/reports/templates/[id]/+page.svelte
index 16bb4d68a..36a730f65 100644
--- a/frontend/src/routes/(app)/reports/templates/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/reports/templates/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
@@ -162,7 +163,7 @@
 	}
 </script>
 
-<svelte:head><title>{name || 'Report template'} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(name || 'Report template')}</title></svelte:head>
 
 {#if !template}
 	<div class="space-y-4">
diff --git a/frontend/src/routes/(app)/scans/+page.svelte b/frontend/src/routes/(app)/scans/+page.svelte
index 157f1f192..9760f9620 100644
--- a/frontend/src/routes/(app)/scans/+page.svelte
+++ b/frontend/src/routes/(app)/scans/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import { page } from '$app/state';
 	import { toast } from 'svelte-sonner';
@@ -72,7 +73,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.scans} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.scans)}</title></svelte:head>
 
 <div class="flex flex-col gap-4">
 	<h1 class="sr-only">Scans</h1>
diff --git a/frontend/src/routes/(app)/settings/+layout.svelte b/frontend/src/routes/(app)/settings/+layout.svelte
index 9346dc205..47f3405f1 100644
--- a/frontend/src/routes/(app)/settings/+layout.svelte
+++ b/frontend/src/routes/(app)/settings/+layout.svelte
@@ -4,15 +4,20 @@
 	import Settings2Icon from '@lucide/svelte/icons/settings-2';
 	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
 	import RouteIcon from '@lucide/svelte/icons/route';
-	import SatelliteDishIcon from '@lucide/svelte/icons/satellite-dish';
 	import BellIcon from '@lucide/svelte/icons/bell';
-	import AwardIcon from '@lucide/svelte/icons/award';
 	import CpuIcon from '@lucide/svelte/icons/cpu';
+	import UsersIcon from '@lucide/svelte/icons/users';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import { ROUTES, routeLabels, SETTINGS_SECTIONS, type SettingsSection } from '$lib/config/routes';
-	import { capabilitiesStore } from '$lib/stores/capabilities.svelte';
-	import { Capability } from '$lib/config/capabilities';
+	import {
+		ADMIN_SETTINGS,
+		ROUTES,
+		routeLabels,
+		SETTINGS_SECTIONS,
+		type SettingsSection
+	} from '$lib/config/routes';
+	import { auth } from '$lib/stores/auth.svelte';
+	import { settingsActions } from '$lib/stores/settings-actions.svelte';
 	import type { IconComponent } from '$lib/config/icons';
 
 	let { children } = $props();
@@ -21,46 +26,50 @@
 		general: Settings2Icon,
 		'api-keys': KeyRoundIcon,
 		proxies: RouteIcon,
-		oast: SatelliteDishIcon,
 		notifications: BellIcon,
-		'bounty-hub': AwardIcon,
-		ai: CpuIcon
+		ai: CpuIcon,
+		users: UsersIcon
 	};
 
+	const isAdmin = $derived(auth.user?.is_superuser ?? false);
 	const sections = $derived(
-		SETTINGS_SECTIONS.filter(
-			(section) => section !== 'bounty-hub' || capabilitiesStore.has(Capability.BOUNTY_PROGRAMS)
-		)
+		SETTINGS_SECTIONS.filter((section) => isAdmin || !ADMIN_SETTINGS.includes(section))
 	);
 	const active = $derived(
 		sections.find((section) => page.url.pathname.startsWith(ROUTES.settings(section))) ?? ''
 	);
 </script>
 
-<div class="space-y-6">
+<div class="flex flex-col gap-6">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">{routeLabels.settings}</h1>
 		<p class="mt-1 text-sm text-muted-foreground">Instance-wide configuration</p>
 	</div>
 
-	<Tabs.Root
-		value={active}
-		onValueChange={(v) => {
-			if (v && v !== active) goto(ROUTES.settings(v as SettingsSection));
-		}}
-	>
-		<ScrollArea orientation="horizontal" class="w-full sm:w-fit">
-			<Tabs.List>
-				{#each sections as section (section)}
-					{@const Icon = ICONS[section]}
-					<Tabs.Trigger value={section} class="gap-1.5">
-						<Icon class="size-4" />
-						{routeLabels[section]}
-					</Tabs.Trigger>
-				{/each}
-			</Tabs.List>
-		</ScrollArea>
-	</Tabs.Root>
+	<div class="flex flex-wrap items-center justify-between gap-3">
+		<Tabs.Root
+			value={active}
+			onValueChange={(v) => {
+				if (v && v !== active) goto(ROUTES.settings(v as SettingsSection));
+			}}
+			class="min-w-0"
+		>
+			<ScrollArea orientation="horizontal" class="w-full sm:w-fit">
+				<Tabs.List>
+					{#each sections as section (section)}
+						{@const Icon = ICONS[section]}
+						<Tabs.Trigger value={section} class="gap-1.5">
+							<Icon class="size-4" />
+							{routeLabels[section]}
+						</Tabs.Trigger>
+					{/each}
+				</Tabs.List>
+			</ScrollArea>
+		</Tabs.Root>
+		{#if settingsActions.snippet}
+			<div class="flex items-center gap-2">{@render settingsActions.snippet()}</div>
+		{/if}
+	</div>
 
 	{@render children()}
 </div>
diff --git a/frontend/src/routes/(app)/settings/+page.svelte b/frontend/src/routes/(app)/settings/+page.svelte
index 7c4ff2f83..bda885456 100644
--- a/frontend/src/routes/(app)/settings/+page.svelte
+++ b/frontend/src/routes/(app)/settings/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { ROUTES, routeLabels } from '$lib/config/routes';
 	onMount(() => goto(ROUTES.settings('general')));
 </script>
 
-<svelte:head><title>{routeLabels.settings} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.settings)}</title></svelte:head>
diff --git a/frontend/src/routes/(app)/settings/ai/+page.svelte b/frontend/src/routes/(app)/settings/ai/+page.svelte
index 838b6360c..97cfae06b 100644
--- a/frontend/src/routes/(app)/settings/ai/+page.svelte
+++ b/frontend/src/routes/(app)/settings/ai/+page.svelte
@@ -1,70 +1,82 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import * as Alert from '$lib/components/ui/alert/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import ShieldAlertIcon from '@lucide/svelte/icons/shield-alert';
-	import FlaskConicalIcon from '@lucide/svelte/icons/flask-conical';
+	import { toast } from 'svelte-sonner';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import CircleXIcon from '@lucide/svelte/icons/circle-x';
+	import CpuIcon from '@lucide/svelte/icons/cpu';
 	import EyeIcon from '@lucide/svelte/icons/eye';
 	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
-	import PanelHead from '$lib/components/panel-head.svelte';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import EmptyState from '$lib/components/empty-state.svelte';
+	import FormField from '$lib/components/form-field.svelte';
+	import Hint from '$lib/components/hint.svelte';
 	import LoadingButton from '$lib/components/loading-button.svelte';
+	import PanelHead from '$lib/components/panel-head.svelte';
+	import SettingRow from '$lib/components/settings/setting-row.svelte';
 	import { ai } from '$lib/stores/ai.svelte';
 	import { auth } from '$lib/stores/auth.svelte';
 	import { routeLabels } from '$lib/config/routes';
 	import { relativeTime } from '$lib/utilities/dates';
-	import { toast } from 'svelte-sonner';
 	import type { AiTestResult } from '$lib/types/ai';
 
-	let provider = $state('anthropic');
+	const ANTHROPIC = 'anthropic';
+
+	let dialogOpen = $state(false);
+	let provider = $state(ANTHROPIC);
 	let model = $state('');
 	let fastModel = $state('');
 	let workspaceId = $state('');
 	let apiKey = $state('');
 	let showKey = $state(false);
 	let testing = $state(false);
+	let draftResult = $state<AiTestResult | null>(null);
 	let result = $state<AiTestResult | null>(null);
-	let loaded = $state(false);
 
 	const status = $derived(ai.status);
 	const catalog = $derived(ai.catalog);
 	const isAdmin = $derived(auth.user?.is_superuser ?? false);
 	const providerSpec = $derived(catalog?.providers.find((p) => p.key === provider));
-	const isAnthropic = $derived(provider === 'anthropic');
+	const stored = $derived(catalog?.providers.find((p) => p.key === status?.provider));
 
 	$effect(() => {
 		untrack(() => void ai.fetch());
 	});
 
-	$effect(() => {
-		const current = status;
-		if (!current || loaded) return;
-		loaded = true;
-		provider = current.provider ?? 'anthropic';
-		model = current.model ?? '';
-		fastModel = current.fast_model ?? '';
-		workspaceId = current.workspace_id ?? '';
-	});
+	function modelLabel(spec: typeof stored, id: string | null): string {
+		if (!id) return 'Not set';
+		return spec?.models.find((m) => m.id === id)?.label ?? id;
+	}
+
+	function openEdit() {
+		provider = status?.provider ?? ANTHROPIC;
+		model = status?.model ?? '';
+		fastModel = status?.fast_model ?? '';
+		workspaceId = status?.workspace_id ?? '';
+		apiKey = '';
+		showKey = false;
+		draftResult = null;
+		dialogOpen = true;
+	}
 
 	function pickProvider(value: string) {
+		if (!value || value === provider) return;
 		provider = value;
 		const spec = catalog?.providers.find((p) => p.key === value);
 		model = spec?.models[0]?.id ?? '';
 		fastModel = spec?.models.at(-1)?.id ?? model;
 	}
 
-	async function test() {
+	async function testDraft() {
 		testing = true;
-		result = await ai.test({
+		draftResult = await ai.test({
 			provider,
 			model,
 			api_key: apiKey.trim() || undefined,
@@ -73,32 +85,40 @@
 		testing = false;
 	}
 
+	async function testStored() {
+		testing = true;
+		result = await ai.test({ provider: status?.provider ?? ANTHROPIC });
+		testing = false;
+	}
+
 	async function save() {
 		const ok = await ai.save({
 			provider,
 			model,
 			fast_model: fastModel,
-			workspace_id: workspaceId.trim(),
+			workspace_id: provider === ANTHROPIC ? workspaceId.trim() : '',
 			api_key: apiKey.trim() || undefined
 		});
 		if (ok) {
-			apiKey = '';
-			toast.success('Saved');
+			toast.success('Connection saved');
+			result = null;
+			dialogOpen = false;
 		}
 	}
 
 	async function setEnabled(value: boolean) {
-		const ok = await ai.save({ enabled: value });
-		if (ok) toast.success(value ? 'AI enabled' : 'AI disabled');
+		if (await ai.save({ enabled: value })) toast.success(value ? 'AI enabled' : 'AI disabled');
 	}
 
-	async function setFeature(key: string, value: boolean) {
-		await ai.save({ features: { [key]: value } });
+	async function setFeature(key: string, label: string, value: boolean) {
+		if (await ai.save({ features: { [key]: value } })) {
+			toast.success(`${label} ${value ? 'enabled' : 'disabled'}`);
+		}
 	}
 
 	async function clearCache() {
 		const removed = await ai.clearCache();
-		toast.success(`${removed} cached narratives removed`);
+		toast.success(`${removed.toLocaleString()} cached narratives removed`);
 	}
 
 	function money(value: number | null): string {
@@ -106,247 +126,289 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.ai} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.ai)}</title></svelte:head>
 
-<div class="space-y-6">
-	<div class="flex flex-wrap items-start justify-between gap-3">
-		<div>
-			<h2 class="text-lg font-semibold tracking-tight">{routeLabels.ai}</h2>
-			<p class="mt-1 max-w-2xl text-sm text-muted-foreground">
-				Model connection, feature opt-ins and usage for report narratives
-			</p>
-		</div>
-		{#if status}
-			<div class="flex items-center gap-3 rounded-md border px-3 py-2">
-				<span class="text-sm">{status.enabled ? 'On' : 'Off'}</span>
-				<Switch
-					checked={status.enabled}
-					disabled={!isAdmin || !status.configured}
-					onCheckedChange={setEnabled}
-				/>
+{#if ai.isLoading && !status}
+	<Card.Root class="gap-3 p-5">
+		<Skeleton class="h-4 w-24" />
+		<Skeleton class="h-9 w-full" />
+		<Skeleton class="h-9 w-full" />
+	</Card.Root>
+{:else if !status}
+	<EmptyState compact icon={CpuIcon} title="AI settings not loaded">
+		<Button variant="outline" size="sm" onclick={() => ai.fetch(true)}>Retry</Button>
+	</EmptyState>
+{:else}
+	<div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
+		<Card.Root class="gap-0 overflow-hidden py-0">
+			<div id="ai-connection" class="scroll-mt-20"></div>
+			<PanelHead title="Connection">
+				<label class="flex items-center gap-2 text-sm text-foreground" for="ai-enabled">
+					Enabled
+					<Switch
+						id="ai-enabled"
+						checked={status.enabled}
+						disabled={!isAdmin || !status.configured || ai.isSaving}
+						onCheckedChange={setEnabled}
+					/>
+				</label>
+			</PanelHead>
+			<SettingRow label="Provider" class="border-t-0">
+				<span class="text-sm">{stored?.label ?? 'Not set'}</span>
+			</SettingRow>
+			<SettingRow label="Model">
+				<span class="text-sm">{modelLabel(stored, status.model)}</span>
+			</SettingRow>
+			<SettingRow label="Fast model" help="Asset judgement, finding explanations and attack paths">
+				<span class="text-sm">{modelLabel(stored, status.fast_model)}</span>
+			</SettingRow>
+			<SettingRow label="API key">
+				<code class="font-mono text-xs text-muted-foreground">
+					{status.key_masked ?? 'Not set'}
+				</code>
+			</SettingRow>
+			{#if status.provider === ANTHROPIC}
+				<SettingRow label="Workspace ID">
+					<code class="font-mono text-xs text-muted-foreground">
+						{status.workspace_id || 'Not set'}
+					</code>
+				</SettingRow>
+			{/if}
+			<div class="flex flex-wrap items-center gap-2 border-t px-5 py-3">
+				<Button variant="outline" size="sm" disabled={!isAdmin} onclick={openEdit}>
+					Edit connection
+				</Button>
+				<LoadingButton
+					variant="ghost"
+					size="sm"
+					loading={testing && !dialogOpen}
+					loadingLabel="Testing"
+					disabled={!isAdmin || !status.configured || testing}
+					onclick={testStored}
+				>
+					Test connection
+				</LoadingButton>
+				{#if result}
+					<span class="flex min-w-0 items-center gap-1.5 text-xs">
+						{#if result.success}
+							<CheckIcon class="size-3.5 shrink-0 text-success" />
+						{:else}
+							<CircleXIcon class="size-3.5 shrink-0 text-destructive" />
+						{/if}
+						<span class="wrap-anywhere">{result.message}</span>
+					</span>
+				{/if}
 			</div>
-		{/if}
+
+			<div id="ai-features" class="scroll-mt-20"></div>
+			<div class="border-t px-5 pt-4 pb-2">
+				<h2 class="text-2xs font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+					Features
+				</h2>
+			</div>
+			{#each catalog?.features ?? [] as feature, i (feature.key)}
+				<SettingRow
+					label={feature.label}
+					help={feature.help}
+					for="ai-feature-{feature.key}"
+					class={i === 0 ? 'border-t-0' : ''}
+				>
+					<Switch
+						id="ai-feature-{feature.key}"
+						checked={status.features[feature.key] ?? feature.default}
+						disabled={!isAdmin || ai.isSaving}
+						onCheckedChange={(v) => setFeature(feature.key, feature.label, v)}
+					/>
+				</SettingRow>
+			{/each}
+			{#if !isAdmin}
+				<div class="border-t px-5 py-2.5 text-xs text-muted-foreground">
+					Editable by administrators.
+				</div>
+			{/if}
+		</Card.Root>
+
+		<Card.Root class="h-fit gap-0 overflow-hidden py-0">
+			<div id="ai-usage" class="scroll-mt-20"></div>
+			<PanelHead title="Usage">
+				{#if status.usage.since}
+					<span>Since {relativeTime(status.usage.since)}</span>
+				{/if}
+			</PanelHead>
+			<dl class="divide-y text-sm">
+				<div class="flex items-baseline justify-between px-5 py-2.5">
+					<dt class="text-muted-foreground">Reports written</dt>
+					<dd class="tabular-nums">{status.usage.reports.toLocaleString()}</dd>
+				</div>
+				<div class="flex items-baseline justify-between px-5 py-2.5">
+					<dt class="text-muted-foreground">Model calls</dt>
+					<dd class="tabular-nums">{status.usage.calls.toLocaleString()}</dd>
+				</div>
+				<div class="flex items-baseline justify-between px-5 py-2.5">
+					<dt class="text-muted-foreground">Served from cache</dt>
+					<dd class="tabular-nums">{status.usage.cached.toLocaleString()}</dd>
+				</div>
+				<div class="flex items-baseline justify-between px-5 py-2.5">
+					<dt class="text-muted-foreground">Tokens in / out</dt>
+					<dd class="tabular-nums">
+						{status.usage.input_tokens.toLocaleString()} / {status.usage.output_tokens.toLocaleString()}
+					</dd>
+				</div>
+				<div class="flex items-baseline justify-between px-5 py-2.5">
+					<dt class="text-muted-foreground">Estimated spend</dt>
+					<dd class="tabular-nums">{money(status.usage.cost_usd)}</dd>
+				</div>
+				<div class="flex items-center justify-between gap-3 px-5 py-2">
+					<dt class="text-muted-foreground">Cached narratives</dt>
+					<dd class="flex items-center gap-2 tabular-nums">
+						{status.cached_narratives.toLocaleString()}
+						<Hint text="Cleared narratives are rewritten and billed on the next report">
+							{#snippet child(props)}
+								<span {...props} class="inline-flex">
+									<Button
+										variant="ghost"
+										size="sm"
+										class="h-7 px-2"
+										disabled={!isAdmin || !status.cached_narratives}
+										onclick={clearCache}
+									>
+										Clear
+									</Button>
+								</span>
+							{/snippet}
+						</Hint>
+					</dd>
+				</div>
+			</dl>
+		</Card.Root>
 	</div>
+{/if}
 
-	{#if ai.isLoading && !status}
-		<Skeleton class="h-64 w-full" />
-	{:else if status}
-		<Alert.Root variant="destructive">
-			<ShieldAlertIcon />
-			<Alert.Title>Scan data is sent to the configured provider</Alert.Title>
-			<Alert.Description>
-				A computed summary of each scan is sent: counts, severity totals, check names and detected
-				conditions. Request and response bodies, credentials and scan context headers are not sent.
-			</Alert.Description>
-		</Alert.Root>
-
-		<div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
-			<Card.Root class="gap-0 py-0">
-				<div id="ai-connection" class="scroll-mt-20"></div>
-				<PanelHead title="Connection" description="Provider and model used for narratives" />
-				<div class="space-y-5 px-5 py-5">
-					<div class="space-y-2">
-						<Label class="text-xs">Provider</Label>
-						<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
-							{#each catalog?.providers ?? [] as item (item.key)}
-								<button
-									type="button"
-									class="rounded-md border px-3 py-2 text-sm transition-colors data-[active=true]:border-primary data-[active=true]:bg-muted"
-									data-active={provider === item.key}
-									disabled={!isAdmin}
-									onclick={() => pickProvider(item.key)}
-								>
-									{item.label}
-								</button>
-							{/each}
-						</div>
-					</div>
-
-					<div class="grid gap-4 sm:grid-cols-2">
-						<div class="space-y-1.5">
-							<Label class="text-xs" for="ai-key">API key</Label>
-							<div class="relative">
-								<Input
-									id="ai-key"
-									type={showKey ? 'text' : 'password'}
-									bind:value={apiKey}
-									placeholder={status.key_masked ?? providerSpec?.key_hint ?? 'API key'}
-									autocomplete="off"
-									disabled={!isAdmin}
-									class="h-9 pr-9 font-mono text-xs"
-								/>
-								<button
-									type="button"
-									class="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
-									onclick={() => (showKey = !showKey)}
-									aria-label={showKey ? 'Hide key' : 'Show key'}
-								>
-									{#if showKey}<EyeOffIcon class="size-4" />{:else}<EyeIcon class="size-4" />{/if}
-								</button>
-							</div>
-							{#if status.configured}
-								<p class="text-xs text-muted-foreground">
-									A key is stored. An empty field keeps it.
-								</p>
-							{/if}
-						</div>
-
-						{#if isAnthropic}
-							<div class="space-y-1.5">
-								<Label class="text-xs" for="ai-workspace">Workspace ID</Label>
-								<Input
-									id="ai-workspace"
-									bind:value={workspaceId}
-									disabled={!isAdmin}
-									class="h-9 font-mono text-xs"
-								/>
-								<p class="text-xs text-muted-foreground">
-									Required for keys not scoped to a workspace.
-								</p>
-							</div>
-						{/if}
-
-						<div class="space-y-1.5">
-							<Label class="text-xs">Model for narrative</Label>
-							<Select.Root type="single" bind:value={model}>
-								<Select.Trigger class="h-9 w-full" disabled={!isAdmin}>
-									{providerSpec?.models.find((m) => m.id === model)?.label ??
-										(model || 'Choose a model')}
-								</Select.Trigger>
-								<Select.Content>
-									{#each providerSpec?.models ?? [] as item (item.id)}
-										<Select.Item value={item.id}>
-											<span class="flex flex-col items-start gap-0.5">
-												<span>{item.label}</span>
-												{#if item.input_per_mtok}
-													<span class="text-xs text-muted-foreground">
-														${item.input_per_mtok} in / ${item.output_per_mtok} out per million tokens
-													</span>
-												{/if}
-											</span>
-										</Select.Item>
-									{/each}
-								</Select.Content>
-							</Select.Root>
-						</div>
-
-						<div class="space-y-1.5">
-							<Label class="text-xs">Model for per-check explanations</Label>
-							<Select.Root type="single" bind:value={fastModel}>
-								<Select.Trigger class="h-9 w-full" disabled={!isAdmin}>
-									{providerSpec?.models.find((m) => m.id === fastModel)?.label ??
-										(fastModel || 'Choose a model')}
-								</Select.Trigger>
-								<Select.Content>
-									{#each providerSpec?.models ?? [] as item (item.id)}
-										<Select.Item value={item.id}>{item.label}</Select.Item>
-									{/each}
-								</Select.Content>
-							</Select.Root>
-							<p class="text-xs text-muted-foreground">Written once per check and cached.</p>
-						</div>
-					</div>
-
-					{#if result}
-						<Alert.Root variant={result.success ? 'default' : 'destructive'}>
-							{#if result.success}<CheckIcon />{:else}<CircleXIcon />{/if}
-							<Alert.Title>{result.success ? 'Connected' : 'Connection failed'}</Alert.Title>
-							<Alert.Description class="wrap-anywhere">{result.message}</Alert.Description>
-						</Alert.Root>
-					{/if}
-
-					<div class="flex items-center gap-2">
-						<LoadingButton variant="outline" loading={testing} disabled={!isAdmin} onclick={test}>
-							<FlaskConicalIcon class="mr-1.5 size-3.5" />
-							Test connection
-						</LoadingButton>
-						<LoadingButton loading={ai.isSaving} disabled={!isAdmin} onclick={save}>
-							Save
-						</LoadingButton>
-					</div>
-					{#if !isAdmin}
-						<p class="text-xs text-muted-foreground">Editable by administrators only.</p>
-					{/if}
-				</div>
-
-				<Separator />
-
-				<div id="ai-features" class="scroll-mt-20"></div>
-				<PanelHead title="Features" description="Opt in per report" />
-				<div class="space-y-4 px-5 py-5">
-					{#each catalog?.features ?? [] as feature (feature.key)}
-						<div class="flex items-start justify-between gap-4">
-							<div class="space-y-0.5">
-								<span class="text-sm font-medium">{feature.label}</span>
-								<p class="text-xs text-muted-foreground">{feature.help}</p>
-							</div>
-							<Switch
-								checked={status.features[feature.key] ?? feature.default}
-								disabled={!isAdmin}
-								onCheckedChange={(v) => setFeature(feature.key, v)}
-							/>
-						</div>
-					{/each}
-				</div>
-			</Card.Root>
-
-			<div class="space-y-5">
-				<Card.Root class="gap-0 py-0">
-					<div id="ai-usage" class="scroll-mt-20"></div>
-					<PanelHead title="Usage" description="All reports on this instance" />
-					<div class="divide-y">
-						<div class="flex items-baseline justify-between px-5 py-3">
-							<span class="text-sm text-muted-foreground">Reports written</span>
-							<span class="font-medium">{status.usage.reports.toLocaleString()}</span>
-						</div>
-						<div class="flex items-baseline justify-between px-5 py-3">
-							<span class="text-sm text-muted-foreground">Model calls</span>
-							<span class="font-medium">{status.usage.calls.toLocaleString()}</span>
-						</div>
-						<div class="flex items-baseline justify-between px-5 py-3">
-							<span class="text-sm text-muted-foreground">Served from cache</span>
-							<span class="font-medium">{status.usage.cached.toLocaleString()}</span>
-						</div>
-						<div class="flex items-baseline justify-between px-5 py-3">
-							<span class="text-sm text-muted-foreground">Tokens in / out</span>
-							<span class="font-medium">
-								{status.usage.input_tokens.toLocaleString()} / {status.usage.output_tokens.toLocaleString()}
-							</span>
-						</div>
-						<div class="flex items-baseline justify-between px-5 py-3">
-							<span class="text-sm text-muted-foreground">Estimated spend</span>
-							<span class="font-medium">{money(status.usage.cost_usd)}</span>
-						</div>
-						{#if status.usage.since}
-							<div class="px-5 py-2.5 text-xs text-muted-foreground">
-								Since {relativeTime(status.usage.since)}
-							</div>
-						{/if}
-					</div>
-				</Card.Root>
-
-				<Card.Root class="gap-0 py-0">
-					<PanelHead title="Cached narratives" />
-					<div class="space-y-3 px-5 py-4">
-						<div class="flex items-baseline justify-between">
-							<span class="text-sm text-muted-foreground">Cached</span>
-							<Badge variant="secondary">{status.cached_narratives.toLocaleString()}</Badge>
-						</div>
-						<p class="text-xs text-muted-foreground">
-							Cleared narratives are rewritten and billed on the next report.
-						</p>
+<Dialog.Root bind:open={dialogOpen}>
+	<Dialog.Content class="sm:max-w-lg">
+		<Dialog.Header>
+			<Dialog.Title>Edit connection</Dialog.Title>
+		</Dialog.Header>
+		<div class="flex flex-col gap-4">
+			<FormField label="Provider">
+				{#snippet children({ id })}
+					<ToggleGroup.Root
+						{id}
+						type="single"
+						variant="outline"
+						value={provider}
+						onValueChange={pickProvider}
+						class="w-fit flex-wrap"
+						aria-label="Provider"
+					>
+						{#each catalog?.providers ?? [] as item (item.key)}
+							<ToggleGroup.Item value={item.key} class="h-9 px-3 text-sm font-normal">
+								{item.label}
+							</ToggleGroup.Item>
+						{/each}
+					</ToggleGroup.Root>
+				{/snippet}
+			</FormField>
+			<FormField label="API key">
+				{#snippet children({ id })}
+					<div class="relative">
+						<Input
+							{id}
+							type={showKey ? 'text' : 'password'}
+							bind:value={apiKey}
+							placeholder={status?.key_masked ?? providerSpec?.key_hint ?? ''}
+							autocomplete="off"
+							class="pr-10 font-mono text-xs"
+						/>
 						<Button
-							variant="outline"
-							size="sm"
-							class="w-full"
-							disabled={!isAdmin || !status.cached_narratives}
-							onclick={clearCache}
+							type="button"
+							variant="ghost"
+							size="icon"
+							class="absolute top-1/2 right-1.5 size-7 -translate-y-1/2 text-muted-foreground"
+							aria-label={showKey ? 'Hide key' : 'Show key'}
+							aria-pressed={showKey}
+							onclick={() => (showKey = !showKey)}
 						>
-							Clear cache
+							{#if showKey}<EyeOffIcon class="size-4" />{:else}<EyeIcon class="size-4" />{/if}
 						</Button>
 					</div>
-				</Card.Root>
+				{/snippet}
+			</FormField>
+			{#if provider === ANTHROPIC}
+				<FormField label="Workspace ID" description="Required for keys not scoped to a workspace">
+					{#snippet children({ id })}
+						<Input {id} bind:value={workspaceId} autocomplete="off" class="font-mono text-xs" />
+					{/snippet}
+				</FormField>
+			{/if}
+			<div class="grid gap-4 sm:grid-cols-2">
+				<FormField label="Model">
+					{#snippet children({ id })}
+						<Select.Root type="single" bind:value={model}>
+							<Select.Trigger {id} class="w-full">
+								{providerSpec?.models.find((m) => m.id === model)?.label ?? 'Not set'}
+							</Select.Trigger>
+							<Select.Content>
+								{#each providerSpec?.models ?? [] as item (item.id)}
+									<Select.Item value={item.id} label={item.label}>
+										<span class="flex flex-col items-start gap-0.5">
+											<span>{item.label}</span>
+											{#if item.input_per_mtok}
+												<span class="text-xs text-muted-foreground">
+													${item.input_per_mtok} in · ${item.output_per_mtok} out per million tokens
+												</span>
+											{/if}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/snippet}
+				</FormField>
+				<FormField label="Fast model">
+					{#snippet children({ id })}
+						<Select.Root type="single" bind:value={fastModel}>
+							<Select.Trigger {id} class="w-full">
+								{providerSpec?.models.find((m) => m.id === fastModel)?.label ?? 'Not set'}
+							</Select.Trigger>
+							<Select.Content>
+								{#each providerSpec?.models ?? [] as item (item.id)}
+									<Select.Item value={item.id} label={item.label}>{item.label}</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/snippet}
+				</FormField>
 			</div>
+			{#if draftResult}
+				<p class="flex items-start gap-1.5 text-xs">
+					{#if draftResult.success}
+						<CheckIcon class="mt-px size-3.5 shrink-0 text-success" />
+					{:else}
+						<CircleXIcon class="mt-px size-3.5 shrink-0 text-destructive" />
+					{/if}
+					<span class="wrap-anywhere">{draftResult.message}</span>
+				</p>
+			{/if}
 		</div>
-	{/if}
-</div>
+		<Dialog.Footer class="gap-2 sm:justify-between">
+			<LoadingButton
+				variant="ghost"
+				loading={testing && dialogOpen}
+				loadingLabel="Testing"
+				disabled={testing || ai.isSaving}
+				onclick={testDraft}
+			>
+				Test
+			</LoadingButton>
+			<div class="flex gap-2">
+				<Button variant="outline" disabled={ai.isSaving} onclick={() => (dialogOpen = false)}>
+					Cancel
+				</Button>
+				<LoadingButton loading={ai.isSaving} loadingLabel="Saving" onclick={save}>
+					Save connection
+				</LoadingButton>
+			</div>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(app)/settings/api-keys/+page.svelte b/frontend/src/routes/(app)/settings/api-keys/+page.svelte
index d2f0abd92..f4fa959c5 100644
--- a/frontend/src/routes/(app)/settings/api-keys/+page.svelte
+++ b/frontend/src/routes/(app)/settings/api-keys/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import ApiKeysPanel from '$lib/components/settings/api-keys-panel.svelte';
 </script>
 
-<svelte:head><title>{routeLabels['api-keys']} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels['api-keys'])}</title></svelte:head>
 
 <ApiKeysPanel />
diff --git a/frontend/src/routes/(app)/settings/bounty-hub/+page.svelte b/frontend/src/routes/(app)/settings/bounty-hub/+page.svelte
index b46aaf417..59173519f 100644
--- a/frontend/src/routes/(app)/settings/bounty-hub/+page.svelte
+++ b/frontend/src/routes/(app)/settings/bounty-hub/+page.svelte
@@ -1,16 +1,6 @@
 <script lang="ts">
-	import { routeLabels } from '$lib/config/routes';
-	import BountyHubPanel from '$lib/components/settings/bounty-hub-panel.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { ROUTES } from '$lib/config/routes';
+	onMount(() => goto(ROUTES.bountyHubSettings(), { replaceState: true }));
 </script>
-
-<svelte:head><title>{routeLabels['bounty-hub']} · reNgine</title></svelte:head>
-
-<div class="space-y-6">
-	<div class="max-w-2xl">
-		<h2 class="text-lg font-semibold tracking-tight">Bounty Hub</h2>
-		<p class="mt-1 text-sm text-muted-foreground">
-			Program sources and the events recorded when a program changes.
-		</p>
-	</div>
-	<BountyHubPanel />
-</div>
diff --git a/frontend/src/routes/(app)/settings/general/+page.svelte b/frontend/src/routes/(app)/settings/general/+page.svelte
index 9a294e73a..aea587317 100644
--- a/frontend/src/routes/(app)/settings/general/+page.svelte
+++ b/frontend/src/routes/(app)/settings/general/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import InstanceSettingsPanel from '$lib/components/settings/instance-settings-panel.svelte';
 </script>
 
-<svelte:head><title>{routeLabels.general} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.general)}</title></svelte:head>
 
 <InstanceSettingsPanel />
diff --git a/frontend/src/routes/(app)/settings/notifications/+page.svelte b/frontend/src/routes/(app)/settings/notifications/+page.svelte
index 0a78debec..fe418a0cf 100644
--- a/frontend/src/routes/(app)/settings/notifications/+page.svelte
+++ b/frontend/src/routes/(app)/settings/notifications/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import NotificationChannelsPanel from '$lib/components/settings/notification-channels-panel.svelte';
 </script>
 
-<svelte:head><title>{routeLabels.notifications} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.notifications)}</title></svelte:head>
 
 <NotificationChannelsPanel />
diff --git a/frontend/src/routes/(app)/settings/oast/+page.svelte b/frontend/src/routes/(app)/settings/oast/+page.svelte
index 2ea32b893..fa8c3a347 100644
--- a/frontend/src/routes/(app)/settings/oast/+page.svelte
+++ b/frontend/src/routes/(app)/settings/oast/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { routeLabels } from '$lib/config/routes';
-	import OastPanel from '$lib/components/settings/oast-panel.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { ROUTES } from '$lib/config/routes';
+	onMount(() => goto(ROUTES.callbackServer(), { replaceState: true }));
 </script>
-
-<svelte:head><title>{routeLabels.oast} · reNgine</title></svelte:head>
-
-<OastPanel />
diff --git a/frontend/src/routes/(app)/settings/proxies/+page.svelte b/frontend/src/routes/(app)/settings/proxies/+page.svelte
index 200a5fb90..8e636a95d 100644
--- a/frontend/src/routes/(app)/settings/proxies/+page.svelte
+++ b/frontend/src/routes/(app)/settings/proxies/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { routeLabels } from '$lib/config/routes';
 	import ProxiesPanel from '$lib/components/settings/proxies-panel.svelte';
 </script>
 
-<svelte:head><title>{routeLabels.proxies} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.proxies)}</title></svelte:head>
 
 <ProxiesPanel />
diff --git a/frontend/src/routes/(app)/settings/users/+page.svelte b/frontend/src/routes/(app)/settings/users/+page.svelte
new file mode 100644
index 000000000..535ea3a61
--- /dev/null
+++ b/frontend/src/routes/(app)/settings/users/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { routeLabels } from '$lib/config/routes';
+	import { pageTitle } from '$lib/utilities/page-title';
+	import UsersPanel from '$lib/components/settings/users-panel.svelte';
+</script>
+
+<svelte:head><title>{pageTitle(routeLabels.users)}</title></svelte:head>
+
+<UsersPanel />
diff --git a/frontend/src/routes/(app)/surface/[dimension]/+page.svelte b/frontend/src/routes/(app)/surface/[dimension]/+page.svelte
index 90a127b89..73fdc2bc7 100644
--- a/frontend/src/routes/(app)/surface/[dimension]/+page.svelte
+++ b/frontend/src/routes/(app)/surface/[dimension]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import { untrack } from 'svelte';
@@ -53,7 +54,7 @@
 	}
 </script>
 
-<svelte:head><title>{spec?.label ?? routeLabels.surface} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(spec?.label ?? routeLabels.surface)}</title></svelte:head>
 
 {#if !spec}
 	<EmptyState title="Unknown dimension">
diff --git a/frontend/src/routes/(app)/surface/correlation/+page.svelte b/frontend/src/routes/(app)/surface/correlation/+page.svelte
index 6d92ee112..3b7cdbb8d 100644
--- a/frontend/src/routes/(app)/surface/correlation/+page.svelte
+++ b/frontend/src/routes/(app)/surface/correlation/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import CorrelationTab from '$lib/components/scans/results/correlation/correlation-tab.svelte';
 	import ScopeStrip from '$lib/components/surface/scope-strip.svelte';
@@ -27,7 +28,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.correlation} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.correlation)}</title></svelte:head>
 
 <div class="space-y-6">
 	<div class="flex flex-col gap-1">
diff --git a/frontend/src/routes/(app)/surface/cve/+page.svelte b/frontend/src/routes/(app)/surface/cve/+page.svelte
index 2e1bb93a9..9e2ed55f6 100644
--- a/frontend/src/routes/(app)/surface/cve/+page.svelte
+++ b/frontend/src/routes/(app)/surface/cve/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { goto } from '$app/navigation';
 	import { untrack } from 'svelte';
 	import Bug from '@lucide/svelte/icons/bug';
@@ -172,7 +173,7 @@
 	);
 </script>
 
-<svelte:head><title>{routeLabels.cves} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.cves)}</title></svelte:head>
 
 <svelte:window onkeydown={onKey} />
 
diff --git a/frontend/src/routes/(app)/surface/cve/[cve]/+page.svelte b/frontend/src/routes/(app)/surface/cve/[cve]/+page.svelte
index 522ae0715..27ebe8d14 100644
--- a/frontend/src/routes/(app)/surface/cve/[cve]/+page.svelte
+++ b/frontend/src/routes/(app)/surface/cve/[cve]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { untrack } from 'svelte';
 	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
@@ -82,7 +83,7 @@
 		`${n.toLocaleString()} ${n === 1 ? one : many}`;
 </script>
 
-<svelte:head><title>{cve || routeLabels.cves} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(cve || routeLabels.cves)}</title></svelte:head>
 
 <div class="space-y-6">
 	<a
diff --git a/frontend/src/routes/(app)/targets/+page.svelte b/frontend/src/routes/(app)/targets/+page.svelte
index 8c3dec400..041f1e42e 100644
--- a/frontend/src/routes/(app)/targets/+page.svelte
+++ b/frontend/src/routes/(app)/targets/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { untrack } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { targetsStore } from '$lib/stores/targets.svelte';
@@ -673,7 +674,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels.targets} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels.targets)}</title></svelte:head>
 
 <svelte:window onkeydown={onKey} />
 
diff --git a/frontend/src/routes/(app)/targets/[id]/+page.svelte b/frontend/src/routes/(app)/targets/[id]/+page.svelte
index 986e128de..04ec52d31 100644
--- a/frontend/src/routes/(app)/targets/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/targets/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { goto, replaceState } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -850,7 +851,7 @@
 	}
 </script>
 
-<svelte:head><title>{target?.target_value ?? routeLabels.targets} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(target?.target_value ?? routeLabels.targets)}</title></svelte:head>
 
 <svelte:window onkeydown={onKeydown} />
 
diff --git a/frontend/src/routes/(app)/whats-new/+page.svelte b/frontend/src/routes/(app)/whats-new/+page.svelte
index facde9cab..837c8d352 100644
--- a/frontend/src/routes/(app)/whats-new/+page.svelte
+++ b/frontend/src/routes/(app)/whats-new/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pageTitle } from '$lib/utilities/page-title';
 	import { page } from '$app/state';
 	import { goto, replaceState } from '$app/navigation';
 	import { untrack } from 'svelte';
@@ -903,7 +904,7 @@
 	}
 </script>
 
-<svelte:head><title>{routeLabels['whats-new']} · reNgine</title></svelte:head>
+<svelte:head><title>{pageTitle(routeLabels['whats-new'])}</title></svelte:head>
 
 <svelte:window onkeydown={onKey} />
 
diff --git a/shared/definitions/ai.py b/shared/definitions/ai.py
index 0377d07e7..1cfe31ed6 100644
--- a/shared/definitions/ai.py
+++ b/shared/definitions/ai.py
@@ -173,32 +173,22 @@ AI_FEATURES: tuple[AIFeature, ...] = (
     AIFeature(
         "report_narrative",
         "Report narrative",
-        "Writes the executive summary, risk narrative and remediation plan.",
+        "Executive summary, risk narrative and remediation plan. Sends the target, "
+        "counts, check names and the web assets named on attack paths.",
         True,
     ),
-    AIFeature(
-        "report_findings",
-        "Finding explanations",
-        "Explains what a check means for this estate. Cached per check.",
-        False,
-    ),
     AIFeature(
         "asset_judgement",
         "Asset judgement",
-        "Reads hostnames and page titles after a scan and flags exposures with a reason. "
-        "Response bodies are not sent.",
+        "Flags exposures after a scan, with a reason. Sends web asset names, status "
+        "codes, page titles and technologies.",
         False,
     ),
     AIFeature(
         "rule_suggestions",
         "Rule suggestions",
-        "Proposes exposure rules from judgement results. Each is held for review.",
-        False,
-    ),
-    AIFeature(
-        "attack_paths",
-        "Attack path narrative",
-        "Describes how observed weaknesses chain together.",
+        "Proposes exposure rules from judgement results, each held for review. Sends "
+        "web asset names and judgement reasons.",
         False,
     ),
 )
diff --git a/shared/definitions/notification_events.py b/shared/definitions/notification_events.py
new file mode 100644
index 000000000..647338c4e
--- /dev/null
+++ b/shared/definitions/notification_events.py
@@ -0,0 +1,74 @@
+"""Event types a notification channel subscribes to, and its minimum level."""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+
+from shared.definitions.mode_features import CAP_BOUNTY_PROGRAMS, CAP_PROGRAM_WATCHES
+from shared.enums.notification import NotificationSeverity, NotificationType
+
+
+@dataclass(frozen=True)
+class ChannelEvent:
+    type: str
+    label: str
+    hint: str
+    capability: str | None = None
+
+
+CHANNEL_EVENTS: tuple[ChannelEvent, ...] = (
+    ChannelEvent(
+        NotificationType.SCAN.value,
+        "Scan results",
+        "Run digest, failed runs, exposures and exploit intelligence changes",
+    ),
+    ChannelEvent(
+        NotificationType.VULNERABILITY.value,
+        "New vulnerabilities",
+        "New findings and inferred software CVEs",
+    ),
+    ChannelEvent(
+        NotificationType.INTEGRATION.value,
+        "Program changes",
+        "Scope and status changes on bug bounty programs",
+        CAP_BOUNTY_PROGRAMS,
+    ),
+    ChannelEvent(
+        NotificationType.WATCH.value,
+        "Program watches",
+        "New in-scope assets on a watched program",
+        CAP_PROGRAM_WATCHES,
+    ),
+    ChannelEvent(
+        NotificationType.NEW_CHECKS.value,
+        "New checks",
+        "Library additions and follow-up run results",
+    ),
+    ChannelEvent(
+        NotificationType.SYSTEM.value,
+        "Reports and exports",
+        "Ready or failed",
+    ),
+    ChannelEvent(
+        NotificationType.TARGET.value,
+        "Enrichment",
+        "Failed WHOIS and BGP lookups",
+    ),
+)
+
+DEFAULT_CHANNEL_EVENTS: tuple[str, ...] = tuple(event.type for event in CHANNEL_EVENTS)
+
+
+@dataclass(frozen=True)
+class ChannelLevel:
+    value: str
+    label: str
+
+
+CHANNEL_LEVELS: tuple[ChannelLevel, ...] = (
+    ChannelLevel(NotificationSeverity.INFO.value, "All events"),
+    ChannelLevel(NotificationSeverity.WARNING.value, "Warning and critical"),
+    ChannelLevel(NotificationSeverity.ERROR.value, "Critical only"),
+)
+
+DEFAULT_CHANNEL_LEVEL = NotificationSeverity.INFO.value
diff --git a/shared/definitions/oast.py b/shared/definitions/oast.py
index f642305dc..c6014d31c 100644
--- a/shared/definitions/oast.py
+++ b/shared/definitions/oast.py
@@ -33,7 +33,7 @@ OAST_MODE_LABELS: dict[str, str] = {
 }
 
 OAST_MODE_HELP: dict[str, str] = {
-    OastMode.OFF.value: "Checks that need a callback run against the response alone.",
+    OastMode.OFF.value: "Checks that need a callback are skipped.",
     OastMode.SELF_HOSTED.value: (
         "An interactsh server this instance operates. Callbacks reach that server."
     ),
diff --git a/shared/definitions/retention.py b/shared/definitions/retention.py
index 897fe5c3a..61ade56ec 100644
--- a/shared/definitions/retention.py
+++ b/shared/definitions/retention.py
@@ -4,6 +4,10 @@ from pathlib import Path
 
 KEEP_FOREVER = 0
 
+SCAN_RETENTION_DAYS: tuple[int, ...] = (30, 60, 90, 180, 365, KEEP_FOREVER)
+
+SCREENSHOT_RETENTION_DAYS: tuple[int, ...] = (7, 14, 30, 60, 90, KEEP_FOREVER)
+
 MAX_SCANS_PER_RUN = 200
 
 KEEP_NEWEST_PER_TARGET = True
diff --git a/shared/enums/proxy.py b/shared/enums/proxy.py
index 405ad1ce2..1eeab2c64 100644
--- a/shared/enums/proxy.py
+++ b/shared/enums/proxy.py
@@ -1,11 +1,6 @@
 from enum import Enum
 
 
-class ProxyMode(Enum):
-    SINGLE = "single"
-    ROTATING = "rotating"
-
-
 class ProxyProtocol(Enum):
     HTTP = "http"
     HTTPS = "https"
diff --git a/shared/models/api_key.py b/shared/models/api_key.py
index a09e3bd64..e2b7ec72f 100644
--- a/shared/models/api_key.py
+++ b/shared/models/api_key.py
@@ -104,6 +104,9 @@ class APIKey(SQLModel, table=True):
     is_enabled: bool = Field(default=True)
     usage_counter: int = Field(default=0)
     last_used_at: datetime | None = Field(default=None)
+    last_test_at: datetime | None = Field(default=None)
+    last_test_ok: bool | None = Field(default=None)
+    last_test_message: str | None = Field(default=None, max_length=500)
     created_at: datetime = Field(default_factory=utc_now)
     updated_at: datetime = Field(default_factory=utc_now)
 
@@ -128,6 +131,9 @@ class APIKeyRead(BaseModel):
     is_enabled: bool
     usage_counter: int
     last_used_at: datetime | None
+    last_test_at: datetime | None = None
+    last_test_ok: bool | None = None
+    last_test_message: str | None = None
     created_at: datetime
     updated_at: datetime
     meta: dict
@@ -144,3 +150,4 @@ class ProviderInfo(BaseModel):
     group_label: str
     configured: bool = False
     is_enabled: bool = False
+    testable: bool = False
diff --git a/shared/models/notification_channel.py b/shared/models/notification_channel.py
index 95c1b70d7..f9128fcce 100644
--- a/shared/models/notification_channel.py
+++ b/shared/models/notification_channel.py
@@ -7,27 +7,22 @@ from sqlalchemy import Column
 from sqlalchemy.types import JSON
 from sqlmodel import Field, SQLModel
 
-from shared.enums.notification import NotificationSeverity, NotificationType
+from shared.definitions.notification_events import (
+    DEFAULT_CHANNEL_EVENTS,
+    DEFAULT_CHANNEL_LEVEL,
+)
 from shared.enums.notification_channel import NotificationProvider
 from shared.utils.datetime import utc_now
 from shared.utils.validation import clean_name, clean_optional_name
 
 PROVIDERS = tuple(p.value for p in NotificationProvider)
 
-DEFAULT_PREFERENCE_TYPES = [
-    NotificationType.SCAN.value,
-    NotificationType.VULNERABILITY.value,
-    NotificationType.TARGET.value,
-    NotificationType.SECURITY.value,
-    NotificationType.SYSTEM.value,
-    NotificationType.WATCH.value,
-    NotificationType.NEW_CHECKS.value,
-]
+DEFAULT_PREFERENCE_TYPES = list(DEFAULT_CHANNEL_EVENTS)
 
 
 class NotificationPreference(BaseModel):
     types: list[str] = Field(default_factory=lambda: list(DEFAULT_PREFERENCE_TYPES))
-    min_severity: str = NotificationSeverity.INFO.value
+    min_severity: str = DEFAULT_CHANNEL_LEVEL
 
 
 class NotificationChannel(SQLModel, table=True):
@@ -45,6 +40,9 @@ class NotificationChannel(SQLModel, table=True):
     last_test_at: datetime | None = Field(default=None)
     last_test_ok: bool | None = Field(default=None)
     last_test_message: str | None = Field(default=None)
+    last_sent_at: datetime | None = Field(default=None)
+    last_sent_ok: bool | None = Field(default=None)
+    last_sent_message: str | None = Field(default=None, max_length=500)
 
 
 class NotificationChannelCreate(BaseModel):
@@ -78,6 +76,9 @@ class NotificationChannelRead(BaseModel):
     last_test_at: datetime | None
     last_test_ok: bool | None
     last_test_message: str | None
+    last_sent_at: datetime | None = None
+    last_sent_ok: bool | None = None
+    last_sent_message: str | None = None
 
 
 class NotificationChannelTestConfig(BaseModel):
diff --git a/shared/models/proxy.py b/shared/models/proxy.py
index e87377982..537d6a2a1 100644
--- a/shared/models/proxy.py
+++ b/shared/models/proxy.py
@@ -5,11 +5,10 @@ from functools import partial
 from pydantic import BaseModel, field_validator
 from sqlmodel import Field, SQLModel
 
-from shared.enums.proxy import ProxyMode, ProxyProtocol
+from shared.enums.proxy import ProxyProtocol
 from shared.utils.datetime import utc_now
 from shared.utils.validation import clean_name, clean_optional_name
 
-PROXY_MODES = tuple(m.value for m in ProxyMode)
 PROXY_SCHEMES = tuple(p.value for p in ProxyProtocol)
 
 
@@ -27,7 +26,6 @@ class Proxy(SQLModel, table=True):
     id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
     name: str = Field(max_length=120)
     description: str | None = Field(default=None, max_length=500)
-    mode: str = Field(default=ProxyMode.SINGLE.value)
     is_active: bool = Field(default=True)
     is_default: bool = Field(default=False)
     endpoints_encrypted: str
@@ -52,7 +50,6 @@ class ProxyEndpointRead(BaseModel):
 class ProxyCreate(BaseModel):
     name: str
     description: str | None = None
-    mode: str = ProxyMode.SINGLE.value
     is_active: bool = True
     is_default: bool = False
     endpoints: list[ProxyEndpoint] = Field(min_length=1)
@@ -63,7 +60,6 @@ class ProxyCreate(BaseModel):
 class ProxyUpdate(BaseModel):
     name: str | None = None
     description: str | None = None
-    mode: str | None = None
     is_active: bool | None = None
     is_default: bool | None = None
     endpoints: list[ProxyEndpoint] | None = None
@@ -75,11 +71,11 @@ class ProxyRead(BaseModel):
     id: uuid.UUID
     name: str
     description: str | None
-    mode: str
     is_active: bool
     is_default: bool
     endpoints: list[ProxyEndpointRead]
     endpoint_count: int
+    contexts: int = 0
     created_at: datetime
     updated_at: datetime
     last_test_at: datetime | None
diff --git a/shared/models/user.py b/shared/models/user.py
index 3120b60d3..732fb9660 100644
--- a/shared/models/user.py
+++ b/shared/models/user.py
@@ -35,6 +35,18 @@ class UserCreate(SQLModel):
     password: str
 
 
+class UserAdminCreate(SQLModel):
+    email: str
+    username: str
+    password: str
+    is_superuser: bool = False
+
+
+class UserAdminUpdate(SQLModel):
+    is_active: bool | None = None
+    is_superuser: bool | None = None
+
+
 class UserRead(UserBase):
     id: uuid.UUID
     totp_enabled: bool = False
diff --git a/shared/models/vuln_template.py b/shared/models/vuln_template.py
index 905e5d04d..80b29aff5 100644
--- a/shared/models/vuln_template.py
+++ b/shared/models/vuln_template.py
@@ -141,6 +141,7 @@ class TemplateFilter(BaseModel):
     sets: list[str] = PydanticField(default_factory=list, max_length=40)
     tags: list[str] = PydanticField(default_factory=list, max_length=40)
     fired: bool = False
+    callback: bool = False
     new_since: datetime | None = None
     limit: int = PydanticField(default=50, ge=1, le=200)
     offset: int = PydanticField(default=0, ge=0, le=1_000_000)
@@ -221,6 +222,7 @@ class TemplateLibraryStats(BaseModel):
     sets: list[TemplateSetSpec] = PydanticField(default_factory=list)
     tags: list[SelectionBreakdown] = PydanticField(default_factory=list)
     fired: int = 0
+    callback: int = 0
     new: int = 0
     seen_at: datetime | None = None
     last_synced_at: datetime | None = None
diff --git a/shared/services/api_key/async_api_key.py b/shared/services/api_key/async_api_key.py
index 2dd1932e6..4eb2ce6b7 100644
--- a/shared/services/api_key/async_api_key.py
+++ b/shared/services/api_key/async_api_key.py
@@ -62,6 +62,9 @@ class APIKeyService:
             is_enabled=api_key.is_enabled,
             usage_counter=api_key.usage_counter,
             last_used_at=api_key.last_used_at,
+            last_test_at=api_key.last_test_at,
+            last_test_ok=api_key.last_test_ok,
+            last_test_message=api_key.last_test_message,
             created_at=api_key.created_at,
             updated_at=api_key.updated_at,
             meta=API_PROVIDER_META.get(api_key.provider, {}),
@@ -144,6 +147,9 @@ class APIKeyService:
 
         if data.key_value is not None:
             api_key.key_value = encrypt_secret(data.key_value)
+            api_key.last_test_at = None
+            api_key.last_test_ok = None
+            api_key.last_test_message = None
         if data.is_enabled is not None:
             api_key.is_enabled = data.is_enabled
         if data.key_meta is not None:
@@ -155,6 +161,13 @@ class APIKeyService:
         await self.session.refresh(api_key)
         return self._to_read(api_key)
 
+    async def record_test(self, api_key: APIKey, ok: bool, message: str) -> None:
+        api_key.last_test_at = utc_now()
+        api_key.last_test_ok = ok
+        api_key.last_test_message = message[:500]
+        self.session.add(api_key)
+        await self.session.commit()
+
     async def delete_key(self, key_id: str) -> None:
         api_key = await self._get_key_or_404(key_id)
         await self.session.delete(api_key)
diff --git a/shared/services/new_checks.py b/shared/services/new_checks.py
index 9632e64ac..9cdb8b7a6 100644
--- a/shared/services/new_checks.py
+++ b/shared/services/new_checks.py
@@ -25,7 +25,6 @@ from shared.definitions.vulnerabilities import SUPPRESSED_STATES, TemplateOrigin
 from shared.enums.scan import SCAN_OPEN_STATUSES, ScanScope, ScanStatus
 from shared.logging import get_logger
 from shared.models.instance_settings import InstanceSettings
-from shared.models.proxy import Proxy
 from shared.models.scan import Scan
 from shared.models.scan_context import ScanContext
 from shared.models.scan_engine import ScanEngine
@@ -37,7 +36,7 @@ from shared.services import locks
 from shared.services.celery_dispatch import dispatch_scan_run
 from shared.services.focused import focused_overrides
 from shared.services.launch_plan import AdHocEngine
-from shared.services.proxy_resolve import resolve_proxy_url
+from shared.services.proxy_resolve import scan_proxy_url
 from shared.services.scan_factory import build_scan_row
 from shared.services.scan_resolve import merge_engine_context
 from shared.services.scan_surface import split
@@ -218,9 +217,7 @@ def build_run(
     )
     if context is not None and context.project_id != target.project_id:
         context = None
-    proxy_url = None
-    if context is not None and context.proxy_id is not None:
-        proxy_url = resolve_proxy_url(session.get(Proxy, context.proxy_id))
+    proxy_url = scan_proxy_url(session, context)
 
     overrides = focused_overrides(FOLLOW_UP_STAGES)
     overrides[_VULN_STAGE] = {
diff --git a/shared/services/notifier.py b/shared/services/notifier.py
index 16a2baa10..e0fc74fd5 100644
--- a/shared/services/notifier.py
+++ b/shared/services/notifier.py
@@ -7,8 +7,8 @@ import re
 from urllib.parse import quote
 
 import apprise
-from sqlalchemy import select
-from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import Engine, bindparam, select, update
+from sqlalchemy.ext.asyncio import AsyncEngine, AsyncSession
 from sqlalchemy.orm import Session
 
 from shared.enums.api_key import APIProvider
@@ -20,6 +20,7 @@ from shared.enums.notification_channel import (
 from shared.http import get_sync_client
 from shared.models.notification_channel import NotificationChannel
 from shared.utils.crypto import try_decrypt
+from shared.utils.datetime import utc_now
 
 logger = logging.getLogger(__name__)
 
@@ -190,7 +191,8 @@ def _fan_out(
     *,
     explicit: bool = False,
     attach: str | None = None,
-) -> None:
+) -> list[tuple]:
+    sent = []
     for t in targets:
         if not explicit and not wants(t["pref"], ntype, severity):
             continue
@@ -199,6 +201,57 @@ def _fan_out(
         )
         if not ok:
             logger.warning("dispatch to channel '%s' failed: %s", t["name"], msg)
+        sent.append((t["id"], ok, msg))
+    return sent
+
+
+_CHANNELS = NotificationChannel.__table__
+_RECORD_DELIVERY = (
+    update(_CHANNELS)
+    .where(_CHANNELS.c.id == bindparam("cid"))
+    .values(
+        last_sent_at=bindparam("at"),
+        last_sent_ok=bindparam("ok"),
+        last_sent_message=bindparam("msg"),
+    )
+)
+
+
+def _delivery_rows(sent: list[tuple]) -> list[dict]:
+    now = utc_now()
+    return [
+        {"cid": cid, "at": now, "ok": ok, "msg": (msg or "")[:500]}
+        for cid, ok, msg in sent
+    ]
+
+
+def _record_sync(session: Session, sent: list[tuple]) -> None:
+    """Writes on its own connection, outside the caller's transaction."""
+    if not sent:
+        return
+    try:
+        bind = session.get_bind()
+        if isinstance(bind, Engine):
+            with bind.begin() as conn:
+                conn.execute(_RECORD_DELIVERY, _delivery_rows(sent))
+        else:
+            session.execute(_RECORD_DELIVERY, _delivery_rows(sent))
+    except Exception:
+        logger.warning("channel delivery status not recorded", exc_info=True)
+
+
+async def _record_async(session: AsyncSession, sent: list[tuple]) -> None:
+    if not sent:
+        return
+    try:
+        bind = session.bind
+        if isinstance(bind, AsyncEngine):
+            async with bind.begin() as conn:
+                await conn.execute(_RECORD_DELIVERY, _delivery_rows(sent))
+        else:
+            await session.execute(_RECORD_DELIVERY, _delivery_rows(sent))
+    except Exception:
+        logger.warning("channel delivery status not recorded", exc_info=True)
 
 
 def _channel_query(channel_ids=None):
@@ -225,7 +278,7 @@ def dispatch_sync(
     targets = _channels_to_targets(list(rows))
     _shared_bot_targets(targets, SyncAPIKeyService(session).get_key_for_provider)
     if targets:
-        _fan_out(
+        sent = _fan_out(
             targets,
             ntype,
             severity,
@@ -234,6 +287,7 @@ def dispatch_sync(
             explicit=bool(channel_ids),
             attach=attach,
         )
+        _record_sync(session, sent)
 
 
 async def dispatch_async(
@@ -253,7 +307,7 @@ async def dispatch_async(
     if targets:
         token = await APIKeyService(session).get_key_for_provider(APIProvider.TELEGRAM)
         _shared_bot_targets(targets, lambda _provider: token)
-        await asyncio.to_thread(
+        sent = await asyncio.to_thread(
             _fan_out,
             targets,
             ntype,
@@ -263,3 +317,4 @@ async def dispatch_async(
             explicit=bool(channel_ids),
             attach=attach,
         )
+        await _record_async(session, sent)
diff --git a/shared/services/proxy_resolve.py b/shared/services/proxy_resolve.py
index b4e5180fb..6e12a9650 100644
--- a/shared/services/proxy_resolve.py
+++ b/shared/services/proxy_resolve.py
@@ -1,8 +1,12 @@
 import json
+import secrets
 from urllib.parse import urlsplit
 
+from sqlalchemy import select
+
 from shared.models.proxy import Proxy, ProxyEndpoint
 from shared.utils.crypto import decrypt_stored
+from shared.utils.net import host_port
 
 
 def load_proxy_endpoints(proxy: Proxy) -> list[ProxyEndpoint]:
@@ -35,16 +39,37 @@ def proxy_env(proxy_url: str | None) -> dict[str, str] | None:
 
 
 def build_proxy_url(ep: ProxyEndpoint) -> str:
+    authority = host_port(ep.host, ep.port)
     if ep.username:
         cred = f"{ep.username}:{ep.password}@" if ep.password else f"{ep.username}@"
-        return f"{ep.scheme}://{cred}{ep.host}:{ep.port}"
-    return f"{ep.scheme}://{ep.host}:{ep.port}"
+        return f"{ep.scheme}://{cred}{authority}"
+    return f"{ep.scheme}://{authority}"
 
 
 def resolve_proxy_url(proxy: Proxy | None) -> str | None:
+    """One endpoint per scan, drawn from the pool when the proxy holds several."""
     if proxy is None or not proxy.is_active:
         return None
     endpoints = load_proxy_endpoints(proxy)
     if not endpoints:
         return None
-    return build_proxy_url(endpoints[0])
+    return build_proxy_url(secrets.choice(endpoints))
+
+
+def default_proxy(session) -> Proxy | None:
+    return (
+        session.execute(
+            select(Proxy).where(Proxy.is_default.is_(True), Proxy.is_active.is_(True))
+        )
+        .scalars()
+        .first()
+    )
+
+
+def scan_proxy_url(session, context) -> str | None:
+    """The context's proxy, or the default proxy for a scan without a context."""
+    if context is None:
+        return resolve_proxy_url(default_proxy(session))
+    if context.proxy_id is None:
+        return None
+    return resolve_proxy_url(session.get(Proxy, context.proxy_id))
diff --git a/shared/services/scan_factory.py b/shared/services/scan_factory.py
index 210d6b847..ed023bb00 100644
--- a/shared/services/scan_factory.py
+++ b/shared/services/scan_factory.py
@@ -3,7 +3,7 @@ import uuid
 from shared.enums.scan import ScanScope, ScanStatus
 from shared.models.scan import Scan
 from shared.services import target_seeds
-from shared.services.proxy_resolve import resolve_proxy_url
+from shared.services.proxy_resolve import scan_proxy_url
 from shared.services.scan_resolve import (
     ResolvedScanConfig,
     _mask_auth,
@@ -75,7 +75,6 @@ def build_scan_for_target_sync(
     intensity: str | None = None,
 ) -> Scan:
     """Resolve engine/context/target on a sync Session and flush a PENDING Scan."""
-    from shared.models.proxy import Proxy  # noqa: PLC0415
     from shared.models.scan_context import ScanContext  # noqa: PLC0415
     from shared.models.scan_engine import ScanEngine  # noqa: PLC0415
     from shared.models.target import Target  # noqa: PLC0415
@@ -97,9 +96,7 @@ def build_scan_for_target_sync(
         msg = "target not found"
         raise ScanFactoryError(msg)
 
-    proxy_url = None
-    if context is not None and context.proxy_id is not None:
-        proxy_url = resolve_proxy_url(session.get(Proxy, context.proxy_id))
+    proxy_url = scan_proxy_url(session, context)
 
     resolved = merge_engine_context(
         engine,
diff --git a/shared/services/watch_sync.py b/shared/services/watch_sync.py
index cf4871890..eed50a991 100644
--- a/shared/services/watch_sync.py
+++ b/shared/services/watch_sync.py
@@ -70,7 +70,7 @@ from shared.services.focused import focused_overrides
 from shared.services.launch_plan import AdHocEngine
 from shared.services.notification_sync import SyncNotificationPublisher
 from shared.services.notifier import dispatch_sync
-from shared.services.proxy_resolve import resolve_proxy_url
+from shared.services.proxy_resolve import scan_proxy_url
 from shared.services.proxy_sync import census_in_flight
 from shared.services.scan_factory import build_scan_row
 from shared.services.scan_resolve import merge_engine_context
@@ -424,11 +424,7 @@ def build_probe_scan(
     if engine is None:
         engine = AdHocEngine(name=label)
     context = context_of(session, watch)
-    proxy_url = None
-    if context is not None and context.proxy_id is not None:
-        from shared.models.proxy import Proxy  # noqa: PLC0415
-
-        proxy_url = resolve_proxy_url(session.get(Proxy, context.proxy_id))
+    proxy_url = scan_proxy_url(session, context)
     resolved = merge_engine_context(
         engine,
         context,
diff --git a/tests/api/test_settings_admin.py b/tests/api/test_settings_admin.py
new file mode 100644
index 000000000..3d2bd6f4d
--- /dev/null
+++ b/tests/api/test_settings_admin.py
@@ -0,0 +1,302 @@
+from __future__ import annotations
+
+import json
+import uuid
+from types import SimpleNamespace
+
+import pytest
+import sqlalchemy as sa
+from fastapi import HTTPException
+
+from app.api.v1.api_keys import list_providers
+from app.api.v1.users import create_user, delete_user, update_user
+from app.services.instance_settings import InstanceSettingsService, _check_window
+from app.services.proxy import ProxyService, _summarize
+from shared.definitions.retention import KEEP_FOREVER, SCAN_RETENTION_DAYS
+from shared.enums.api_key import APIProvider
+from shared.models.api_key import APIKey, APIKeyUpdate
+from shared.models.instance_settings import InstanceSettingsUpdate
+from shared.models.notification_channel import NotificationChannel
+from shared.models.project import Project
+from shared.models.proxy import Proxy, ProxyEndpoint, ProxyTestResult
+from shared.models.scan_context import ScanContext
+from shared.models.user import User, UserAdminCreate, UserAdminUpdate
+from shared.services.api_key.async_api_key import APIKeyService
+from shared.services.notifier import _RECORD_DELIVERY, _delivery_rows
+from shared.services.proxy_resolve import resolve_proxy_url
+
+pytestmark = pytest.mark.api
+
+STRONG = "Vq7#mT9!pLx2@wRz"
+
+
+@pytest.fixture
+def flush_only(session, monkeypatch):
+    monkeypatch.setattr(session, "commit", session.flush)
+    return session
+
+
+async def _admin(estate) -> User:
+    return await estate.session.get(User, estate.user_id)
+
+
+async def _member(session, *, superuser: bool = False) -> User:
+    tag = uuid.uuid4().hex[:8]
+    user = User(
+        username=f"ops{tag}",
+        email=f"ops{tag}@test.local",
+        hashed_password="x",
+        is_superuser=superuser,
+    )
+    session.add(user)
+    await session.flush()
+    return user
+
+
+def _proxy(name: str, endpoints: list[dict], *, default: bool, created_by) -> Proxy:
+    return Proxy(
+        name=name,
+        is_active=True,
+        is_default=default,
+        endpoints_encrypted=json.dumps(endpoints),
+        endpoint_count=len(endpoints),
+        created_by=created_by,
+    )
+
+
+# ---------- users ----------
+
+
+async def test_an_admin_creates_an_account_with_a_role(estate, flush_only):
+    tag = uuid.uuid4().hex[:8]
+    user = await create_user(
+        UserAdminCreate(
+            email=f"New{tag}@Test.local",
+            username=f"new{tag}",
+            password=STRONG,
+            is_superuser=True,
+        ),
+        session=flush_only,
+        current_user=await _admin(estate),
+    )
+    assert user.is_superuser
+    assert user.email == f"new{tag}@test.local"
+
+
+async def test_a_taken_username_is_refused(estate, flush_only):
+    taken = await _member(flush_only)
+    with pytest.raises(HTTPException) as err:
+        await create_user(
+            UserAdminCreate(
+                email="other@test.local", username=taken.username, password=STRONG
+            ),
+            session=flush_only,
+            current_user=await _admin(estate),
+        )
+    assert err.value.status_code == 409
+
+
+async def test_the_signed_in_account_cannot_disable_itself(estate, flush_only):
+    admin = await _admin(estate)
+    with pytest.raises(HTTPException) as err:
+        await update_user(
+            admin.id,
+            UserAdminUpdate(is_active=False),
+            session=flush_only,
+            current_user=admin,
+        )
+    assert err.value.status_code == 400
+
+
+async def test_an_admin_disables_and_demotes_another_account(estate, flush_only):
+    other = await _member(flush_only, superuser=True)
+    updated = await update_user(
+        other.id,
+        UserAdminUpdate(is_active=False, is_superuser=False),
+        session=flush_only,
+        current_user=await _admin(estate),
+    )
+    assert not updated.is_active
+    assert not updated.is_superuser
+
+
+async def test_an_account_that_owns_records_is_not_deleted(estate, flush_only):
+    owner = await _member(flush_only)
+    flush_only.add(
+        Project(
+            id=uuid.uuid4(),
+            name="Owned",
+            slug=f"owned-{owner.id.hex[:8]}",
+            created_by=owner.id,
+        )
+    )
+    await flush_only.flush()
+    with pytest.raises(HTTPException) as err:
+        await delete_user(
+            str(owner.id), session=flush_only, current_user=await _admin(estate)
+        )
+    assert err.value.status_code == 409
+    assert "Disable the account" in err.value.detail
+
+
+# ---------- api keys ----------
+
+
+async def test_a_key_test_is_stored_and_a_new_key_clears_it(estate, flush_only):
+    key = APIKey(provider=APIProvider.VIEWDNS, key_value="first")
+    flush_only.add(key)
+    await flush_only.flush()
+    service = APIKeyService(flush_only)
+
+    await service.record_test(key, True, "API Key is valid.")
+    read = service._to_read(key)
+    assert read.last_test_ok is True
+    assert read.last_test_message == "API Key is valid."
+
+    read = await service.update_key(str(key.id), APIKeyUpdate(key_value="second"))
+    assert read.last_test_at is None
+    assert read.last_test_ok is None
+
+
+async def test_providers_state_which_keys_can_be_tested(estate, flush_only):
+    providers = {
+        p.provider: p
+        for p in await list_providers(
+            _current_user=await _admin(estate), service=APIKeyService(flush_only)
+        )
+    }
+    assert providers[APIProvider.VIEWDNS].testable
+    assert providers[APIProvider.TELEGRAM].testable
+    assert not providers[APIProvider.CHAOS].testable
+
+
+# ---------- proxies ----------
+
+
+async def test_a_scan_without_a_context_uses_the_default_proxy(estate, flush_only):
+    fallback = _proxy(
+        "fallback",
+        [{"scheme": "http", "host": "10.0.0.9", "port": 3128}],
+        default=True,
+        created_by=estate.user_id,
+    )
+    chosen = _proxy(
+        "chosen",
+        [{"scheme": "socks5", "host": "10.0.0.7", "port": 1080}],
+        default=False,
+        created_by=estate.user_id,
+    )
+    flush_only.add_all([fallback, chosen])
+    await flush_only.flush()
+    service = ProxyService(flush_only)
+
+    assert await service.scan_proxy_url(None) == "http://10.0.0.9:3128"
+    assert (
+        await service.scan_proxy_url(SimpleNamespace(proxy_id=chosen.id))
+        == "socks5://10.0.0.7:1080"
+    )
+    assert await service.scan_proxy_url(SimpleNamespace(proxy_id=None)) is None
+
+
+def test_a_pool_hands_each_scan_one_of_its_endpoints():
+    pool = SimpleNamespace(
+        name="pool",
+        is_active=True,
+        endpoints_encrypted=json.dumps(
+            [
+                {"scheme": "http", "host": "10.0.0.1", "port": 8080},
+                {"scheme": "http", "host": "10.0.0.2", "port": 8080},
+                {"scheme": "http", "host": "2001:db8::5", "port": 8080},
+            ]
+        ),
+    )
+    urls = {resolve_proxy_url(pool) for _ in range(60)}
+    assert urls <= {
+        "http://10.0.0.1:8080",
+        "http://10.0.0.2:8080",
+        "http://[2001:db8::5]:8080",
+    }
+    assert len(urls) > 1
+
+
+def test_a_pool_test_names_the_endpoint_that_failed():
+    endpoints = [
+        ProxyEndpoint(scheme="http", host="10.0.0.1", port=8080),
+        ProxyEndpoint(scheme="http", host="10.0.0.2", port=8080),
+    ]
+    result = _summarize(
+        endpoints,
+        [
+            ProxyTestResult(success=True, message="Proxy reachable.", latency_ms=90),
+            ProxyTestResult(success=False, message="Connection failed: refused"),
+        ],
+    )
+    assert not result.success
+    assert result.message.startswith("1 of 2 endpoints carried the request.")
+    assert "10.0.0.2:8080" in result.message
+
+
+async def test_a_deleted_proxy_leaves_its_contexts_direct(estate, flush_only):
+    doomed = _proxy(
+        "doomed",
+        [{"scheme": "http", "host": "10.0.0.3", "port": 8080}],
+        default=False,
+        created_by=estate.user_id,
+    )
+    flush_only.add(doomed)
+    await flush_only.flush()
+    context = ScanContext(
+        project_id=estate.project_id,
+        created_by=estate.user_id,
+        name="through doomed",
+        proxy_id=doomed.id,
+    )
+    flush_only.add(context)
+    await flush_only.flush()
+
+    listed = {p.id: p for p in await ProxyService(flush_only).list()}
+    assert listed[doomed.id].contexts == 1
+
+    await ProxyService(flush_only).delete(doomed.id)
+    await flush_only.refresh(context)
+    assert context.proxy_id is None
+
+
+# ---------- notifications ----------
+
+
+async def test_a_delivery_is_recorded_on_the_channel(estate, session):
+    channel = NotificationChannel(
+        name="soc", provider="slack", config_encrypted="", created_by=estate.user_id
+    )
+    session.add(channel)
+    await session.flush()
+    await session.execute(
+        _RECORD_DELIVERY, _delivery_rows([(channel.id, False, "HTTP 500.")])
+    )
+    row = (
+        await session.execute(
+            sa.select(
+                NotificationChannel.last_sent_ok, NotificationChannel.last_sent_message
+            ).where(NotificationChannel.id == channel.id)
+        )
+    ).one()
+    assert row == (False, "HTTP 500.")
+
+
+# ---------- general ----------
+
+
+def test_a_retention_window_must_be_an_offered_one():
+    _check_window("Scan history", KEEP_FOREVER, SCAN_RETENTION_DAYS)
+    with pytest.raises(HTTPException) as err:
+        _check_window("Scan history", 45, SCAN_RETENTION_DAYS)
+    assert err.value.status_code == 400
+
+
+async def test_a_blank_instance_name_is_refused(estate, flush_only):
+    with pytest.raises(HTTPException) as err:
+        await InstanceSettingsService(flush_only).update(
+            InstanceSettingsUpdate(instance_name="   ")
+        )
+    assert err.value.status_code == 400
diff --git a/tests/grammar/test_settings_mirrors.py b/tests/grammar/test_settings_mirrors.py
new file mode 100644
index 000000000..77cadb611
--- /dev/null
+++ b/tests/grammar/test_settings_mirrors.py
@@ -0,0 +1,70 @@
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+import pytest
+
+from shared.definitions.notification_events import (
+    CHANNEL_EVENTS,
+    CHANNEL_LEVELS,
+    DEFAULT_CHANNEL_LEVEL,
+)
+from shared.definitions.retention import (
+    KEEP_FOREVER,
+    SCAN_RETENTION_DAYS,
+    SCREENSHOT_RETENTION_DAYS,
+)
+from shared.enums.notification import NotificationType
+from shared.models.notification_channel import DEFAULT_PREFERENCE_TYPES
+
+pytestmark = pytest.mark.grammar
+
+EVENTS = Path("/app/frontend-config/notification-events.ts")
+RETENTION = Path("/app/frontend-config/retention.ts")
+
+
+def _events_mirror() -> list[tuple[str, str, str, str | None]]:
+    found = re.findall(
+        r"type: '([^']+)',\s*label: '([^']+)',\s*hint: '([^']+)',\s*"
+        r"capability: (?:Capability\.(\w+)|null)",
+        EVENTS.read_text(),
+    )
+    return [(t, label, hint, cap.lower() or None) for t, label, hint, cap in found]
+
+
+def test_channel_events_mirror():
+    assert _events_mirror() == [
+        (e.type, e.label, e.hint, e.capability) for e in CHANNEL_EVENTS
+    ]
+
+
+def test_channel_levels_mirror():
+    text = EVENTS.read_text()
+    found = re.findall(r"\{ value: '([^']+)', label: '([^']+)' \}", text)
+    assert found == [(level.value, level.label) for level in CHANNEL_LEVELS]
+    assert f"DEFAULT_CHANNEL_LEVEL = '{DEFAULT_CHANNEL_LEVEL}'" in text
+
+
+def test_every_offered_event_is_one_the_product_sends():
+    offered = {e.type for e in CHANNEL_EVENTS}
+    assert NotificationType.SECURITY.value not in offered
+    assert NotificationType.RESOURCE.value not in offered
+    assert set(DEFAULT_PREFERENCE_TYPES) == offered
+
+
+def _days(name: str) -> list[int]:
+    block = re.search(
+        rf"export const {name}: RetentionOption\[\] = \[(.*?)\];",
+        RETENTION.read_text(),
+        re.S,
+    )
+    assert block, f"{name} is missing from the mirror"
+    values = re.findall(r"value: (?:'(\d+)'|KEEP_FOREVER)", block.group(1))
+    return [int(v) if v else KEEP_FOREVER for v in values]
+
+
+def test_retention_mirror():
+    assert f"KEEP_FOREVER = '{KEEP_FOREVER}'" in RETENTION.read_text()
+    assert _days("SCAN_RETENTION") == list(SCAN_RETENTION_DAYS)
+    assert _days("SCREENSHOT_RETENTION") == list(SCREENSHOT_RETENTION_DAYS)