feat(search): refresh global search UI and align qa/docs updates

2026-04-02 10:49:35 +02:00
parent 5699bc6c5b
commit 5d07236758
35 changed files with 504 additions and 213 deletions
--- a/.agents/checks/quality-gates.json
+++ b/.agents/checks/quality-gates.json
@@ -50,7 +50,7 @@
      "type": "fast",
      "name": "Docs link integrity",
      "command": "bin/docs-link-check.sh",
-      "note": "Default scanner excludes .agents/runs/** to avoid historical artifact false positives."
+      "note": "Default scanner excludes .agents/runs/** to avoid historical artifact false positives. qa-required also enforces bin/docs-drift-check.sh as QG-008 supplement."
    },
    {
      "id": "QG-009",
--- a/.agents/skills/core-guardrails/references/quality-gates.md
+++ b/.agents/skills/core-guardrails/references/quality-gates.md
@@ -37,7 +37,10 @@ Erwartung: jeweils `0`.
 1. `bin/docs-link-check.sh`
   - prueft Doku-Links in `README.md`, `docs/**`, `.agents/skills/**` und `.agents/**`
   - `.agents/runs/**` ist standardmaessig ausgeschlossen (historische Artefakte)
-2. `bin/codex-skills-sync.sh --check`
+2. `bin/docs-drift-check.sh`
+   - prueft bekannte Legacy-Drifts (entfernte Config-Pfade/Constants, obsolete Search-Marker)
+   - prueft Setup-Vertrag fuer `config/config.php.example` in den Kern-Onboarding-Dokus
+3. `bin/codex-skills-sync.sh --check`
   - prueft Drift zwischen Repo-Skills und `~/.codex/skills`

 ## Berichtspflicht
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -26,6 +26,7 @@ Full workflow definition: `.agents/workflow.md` | Guard catalog: `.agents/checks

 ```bash
 # Start dev environment
+cp config/config.php.example config/config.php
 docker compose up --build -d
 # App: http://localhost:8080 | phpMyAdmin: http://localhost:8081

@@ -212,7 +213,7 @@ Required/optional enforcement is defined in `.agents/checks/enforcement-policy.j
 | QG-002 | PHPStan level 5 | `vendor/bin/phpstan analyse -c phpstan.neon` |
 | QG-003 | Architecture Contract | `vendor/bin/phpunit tests/Architecture/CoreStarterkitContractTest.php` |
 | QG-006 | PHP Style | `vendor/bin/php-cs-fixer fix --config=tools/php-cs-fixer/.php-cs-fixer.dist.php --dry-run --diff --verbose` |
-| QG-008 | Docs link integrity | `bin/docs-link-check.sh` |
+| QG-008 | Docs link + drift integrity | `bin/docs-link-check.sh` (plus `bin/docs-drift-check.sh` via `bin/qa-required.sh`) |
 | QG-009 | Codex skills sync | `bin/codex-skills-sync.sh --check` |

 Additional non-blocking gates: QG-004 structural checks, QG-005 JS smoke, QG-007 composer-unused. See gate catalog + enforcement policy for details.
--- a/README.md
+++ b/README.md
@@ -35,18 +35,24 @@ Der Fokus liegt auf klarer Rollen-/Rechtestruktur, Tenant-Scope und einer konsis
 cp .env.example .env
 ```

-2. Container starten
+2. Config-Template fuer den App-Bootstrap anlegen
+
+```bash
+cp config/config.php.example config/config.php
+```
+
+3. Container starten

 ```bash
 docker compose up --build -d
 ```

-3. App oeffnen
+4. App oeffnen

 - App: [http://localhost:8080](http://localhost:8080)
 - phpMyAdmin: [http://localhost:8081](http://localhost:8081)

-4. Container stoppen
+5. Container stoppen

 ```bash
 docker compose down
@@ -55,6 +61,7 @@ docker compose down
 Alternativ ueber den Dev-Orchestrator:

 ```bash
+cp config/config.php.example config/config.php
 bin/dev init
 bin/dev up
 bin/dev down
@@ -122,7 +129,7 @@ Initiale DB-Settings (Seed):

 ## Projektstruktur

- `/config` Konfiguration (Routen, Settings, Themes, Assets)
+- `/config` Konfiguration (Routen, Assets, Themes, Module + ENV-Bootstrap)
 - `/db/init` Datenbankschema + Seeds
 - `/lib` Backend-Code (`Repository`, `Service`, `Http`, `Support`)
 - `/pages` Action-Layer + Views pro Route
--- a/bin/docs-drift-check.sh
+++ b/bin/docs-drift-check.sh
@@ -0,0 +1,56 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+script_dir="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+repo_root="$(cd -- "${script_dir}/.." && pwd)"
+cd "${repo_root}"
+
+scan_targets=(README.md CLAUDE.md docs .agents)
+scan_globs=(-g '*.md' -g '*.json' -g '!.agents/runs/**')
+
+fail=0
+
+check_legacy_pattern() {
+  local pattern="$1"
+  local label="$2"
+  local matches
+  matches="$(rg -n --pcre2 "${pattern}" "${scan_targets[@]}" "${scan_globs[@]}" || true)"
+  if [[ -n "${matches}" ]]; then
+    echo "[FAIL] ${label}"
+    echo "${matches}"
+    fail=1
+  fi
+}
+
+check_legacy_pattern 'config/settings\.php' 'Legacy docs reference to config/settings.php found'
+check_legacy_pattern 'config/router\.php' 'Legacy docs reference to config/router.php found'
+check_legacy_pattern '\bAPP_ROUTE_DEFINITIONS\b' 'Legacy docs reference to APP_ROUTE_DEFINITIONS found'
+check_legacy_pattern '\bAPP_PUBLIC_PATHS\b' 'Legacy docs reference to APP_PUBLIC_PATHS found'
+check_legacy_pattern 'data-search-key' 'Legacy global-search aside marker (data-search-key) found'
+
+if [[ ! -f config/config.php.example ]]; then
+  echo "[FAIL] Missing setup template: config/config.php.example"
+  fail=1
+fi
+
+required_setup_docs=(
+  README.md
+  docs/howto-docker-lokal.md
+  docs/tutorial-01-erste-schritte.md
+  docs/tutorial-03-setup-und-erster-login.md
+  docs/howto-lokale-entwicklung.md
+)
+
+for doc in "${required_setup_docs[@]}"; do
+  if ! rg -q 'config/config\.php\.example' "${doc}"; then
+    echo "[FAIL] Missing setup contract reference in ${doc}: config/config.php.example"
+    fail=1
+  fi
+done
+
+if [[ ${fail} -ne 0 ]]; then
+  echo "[FAIL] docs drift checks failed"
+  exit 1
+fi
+
+echo "[OK] docs drift checks passed"
--- a/bin/qa-required.sh
+++ b/bin/qa-required.sh
@@ -38,6 +38,9 @@ run_step "QG-006 PHP Style Check" \
 run_step "QG-008 Docs link integrity" \
  bin/docs-link-check.sh

+run_step "QG-008 Docs drift contract" \
+  bin/docs-drift-check.sh
+
 run_step "QG-009 Codex skills sync" \
  bin/codex-skills-sync.sh --check

--- a/db/init/init.sql
+++ b/db/init/init.sql
@@ -456,6 +456,15 @@ CREATE TABLE IF NOT EXISTS `user_custom_field_value_options` (
  CONSTRAINT `fk_ucfvo_option` FOREIGN KEY (`option_id`) REFERENCES `tenant_custom_field_options` (`id`) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

+CREATE TABLE IF NOT EXISTS `module_migrations` (
+  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
+  `module_id` VARCHAR(64) NOT NULL,
+  `filename` VARCHAR(255) NOT NULL,
+  `applied_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uq_module_migration` (`module_id`, `filename`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `user_api_tokens` (
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
  `uuid` CHAR(36) NOT NULL,
--- a/docs/howto-docker-lokal.md
+++ b/docs/howto-docker-lokal.md
@@ -1,6 +1,6 @@
 # Docker lokal

-Letzte Aktualisierung: 2026-03-06
+Letzte Aktualisierung: 2026-04-01

 ## Ziel

@@ -11,7 +11,7 @@ Diese Anleitung bringt die Anwendung lokal schnell und stabil zum Laufen.
 - Docker Desktop (oder Docker Engine + Compose)
 - Port `8080` (App) und `8081` (phpMyAdmin) sind frei

-## Start in 4 Schritten
+## Start in 5 Schritten

 1. ENV-Datei anlegen:

@@ -19,17 +19,23 @@ Diese Anleitung bringt die Anwendung lokal schnell und stabil zum Laufen.
 cp .env.example .env
 ```

-2. Container bauen und starten:
+2. Config-Template fuer den App-Bootstrap anlegen:
+
+```bash
+cp config/config.php.example config/config.php
+```
+
+3. Container bauen und starten:

 ```bash
 docker compose up --build -d
 ```

-3. Anwendung öffnen:
+4. Anwendung öffnen:
   - App: `http://localhost:8080`
   - phpMyAdmin: `http://localhost:8081`

-4. Logs prüfen (optional):
+5. Logs prüfen (optional):

 ```bash
 docker compose logs -f nginx php
--- a/docs/howto-gitea-required-checks.md
+++ b/docs/howto-gitea-required-checks.md
@@ -20,7 +20,7 @@ QA-Pflichtchecks fuer CoreCore in Gitea vorbereiten, ohne sie sofort als Merge-B
 - `QG-002` PHPStan
 - `QG-003` Architecture Core Contract
 - `QG-006` PHP Style Check
- `QG-008` Docs link integrity
+- `QG-008` Docs link integrity + Drift-Contract (`docs-link-check` + `docs-drift-check`)
 - `QG-009` Codex skills sync

 ## Phase-1 Setup (noch nicht blockend)
--- a/docs/howto-globale-suche.md
+++ b/docs/howto-globale-suche.md
@@ -1,6 +1,6 @@
 # Globale Suche erweitern

-Letzte Aktualisierung: 2026-03-06
+Letzte Aktualisierung: 2026-04-01

 ## Ziel

@@ -25,6 +25,7 @@ Provider:
 - UI-Meta (Icons/URLs): `SearchUiMetaProvider`
 - Mapping: `SearchItemMapperProvider`
 - Spezialquellen (`docs`, `hotkeys`): `SearchSpecialResourceProvider`
+- Modul-Erweiterungen: `SearchResourceProvider` via Modul-Manifest `search_resources`

 ## Laufzeitpfad

@@ -45,8 +46,8 @@ Provider:
 4. Mapping ergänzen:
   - `mapPreviewItem()`
   - `mapResultItem()`
-5. Aside-Eintrag in `templates/partials/app-main-aside.phtml` ergänzen (`data-search-key`).
-6. i18n-Labels prüfen.
+5. Bei Modul-Resources: Provider-Klasse in `module.php` unter `search_resources` registrieren.
+6. i18n-Labels pruefen.

 ## Wichtige Regeln

--- a/docs/howto-lokale-entwicklung.md
+++ b/docs/howto-lokale-entwicklung.md
@@ -8,6 +8,14 @@ Kompakter Tagesworkflow für Entwicklung, Tests und schema-nahe Änderungen.

 ## First-Time Workflow

+Einmalig vor dem ersten Start:
+
+```bash
+cp config/config.php.example config/config.php
+```
+
+Dann:
+
 ```bash
 bin/dev init
 ```
@@ -19,6 +27,8 @@ bin/dev init
 3. `module:sync`
 4. `doctor`

+Hinweis: `bin/dev init` erzeugt aktuell **nicht** automatisch `config/config.php`.
+
 ## Start/Stop

 ```bash
--- a/docs/reference-cli-commands.md
+++ b/docs/reference-cli-commands.md
@@ -147,6 +147,8 @@ bin/dev qa-required
 bin/dev qa-extended
 ```

+Voraussetzung fuer den ersten App-Start: `config/config.php` muss vorhanden sein (einmalig aus `config/config.php.example` kopieren).
+
 `bin/dev console ...` delegiert intern auf `docker compose exec -T php php bin/console ...`.
 `bin/dev qa` ist ein Alias fuer `bin/dev qa-required`.

--- a/docs/reference-entwickler-checkliste.md
+++ b/docs/reference-entwickler-checkliste.md
@@ -1,6 +1,6 @@
 # Entwickler-Checkliste

-Letzte Aktualisierung: 2026-03-24
+Letzte Aktualisierung: 2026-04-01

 ## Ziel

@@ -79,6 +79,7 @@ Kurze Definition of Done vor Merge.
 - [ ] Keine First-party CLI-Warnings/Notices/Deprecations im Runtime-Sync (Vendor-Warnings sind nur temporaer toleriert und muessen gezaehlt sichtbar sein)
 - [ ] bei Docs-/Skills-Aenderungen: `docker compose exec php vendor/bin/phpunit tests/Architecture/CodexSkillReferenceContractTest.php`
 - [ ] `bin/docs-link-check.sh` (QG-008, scannt standardmaessig ohne `.agents/runs/**`)
+- [ ] `bin/docs-drift-check.sh` (QG-008-Zusatz, blockt Legacy-Referenzen + fehlenden Setup-Vertrag)
 - [ ] `bin/codex-skills-sync.sh --check` (QG-009)
 - [ ] bei JS-Änderungen: Browser-Smoke mit DevTools-Console (keine JS-Errors)
 - [ ] bei API-Änderungen: `docs/openapi.yaml` aktualisiert
--- a/docs/reference-konfiguration.md
+++ b/docs/reference-konfiguration.md
@@ -1,10 +1,12 @@
 # Konfiguration (ENV-Variablen)

-Letzte Aktualisierung: 2026-03-25
+Letzte Aktualisierung: 2026-04-01

 Alle Konfiguration erfolgt über Umgebungsvariablen in der `.env`-Datei.
 Vorlage: `.env.example` — niemals echte Credentials committen.

+Setup-Vertrag (Source of Truth): Fuer den Boot wird `config/config.php` benoetigt; die Datei wird aus `config/config.php.example` abgeleitet. Diese Seite und `web/index.php` sind die massgeblichen Referenzen dafuer.
+
 ---

 ## App
--- a/docs/tutorial-01-erste-schritte.md
+++ b/docs/tutorial-01-erste-schritte.md
@@ -1,6 +1,6 @@
 # Erste Schritte

-Letzte Aktualisierung: 2026-03-06
+Letzte Aktualisierung: 2026-04-01

 ## Ziel

@@ -16,10 +16,12 @@ Diese Seite bringt neue Entwickler in unter 45 Minuten zu einem lauffähigen lok

 ```bash
 cp .env.example .env
+cp config/config.php.example config/config.php
 docker compose up --build -d
 ```

 > Alle ENV-Variablen sind dokumentiert in /docs/reference-konfiguration.md.
+> `config/config.php` ist Pflicht fuer den App-Bootstrap und wird einmalig aus `config/config.php.example` erzeugt.
 > docker compose up startet auch den globalen Scheduler-Runner (Service scheduler) im Hintergrund.

 Danach erreichbar:
--- a/docs/tutorial-03-setup-und-erster-login.md
+++ b/docs/tutorial-03-setup-und-erster-login.md
@@ -1,6 +1,6 @@
 # Setup und erster Login

-Letzte Aktualisierung: 2026-03-06
+Letzte Aktualisierung: 2026-04-01

 ## Ziel

@@ -17,6 +17,7 @@ Lokal starten, einloggen, Basisfunktion prüfen.

 ```bash
 cp .env.example .env
+cp config/config.php.example config/config.php
 docker compose up --build -d
 ```

--- a/lib/Support/Search/SearchItemMapperProvider.php
+++ b/lib/Support/Search/SearchItemMapperProvider.php
@@ -6,11 +6,14 @@ class SearchItemMapperProvider
 {
    public static function mapPreviewItem(string $key, array $data, string $query): ?array
    {
+        $subtitle = '';
+
        if ($key === 'users') {
            $label = trim(($data['first_name'] ?? '') . ' ' . ($data['last_name'] ?? ''));
-            $email = trim((string) ($data['email'] ?? ''));
-            if ($email !== '') {
-                $label = $label === '' ? $email : ($label . ' — ' . $email);
+            $subtitle = trim((string) ($data['email'] ?? ''));
+            if ($label === '' && $subtitle !== '') {
+                $label = $subtitle;
+                $subtitle = '';
            }
            $url = lurl('admin/users/edit/' . ($data['uuid'] ?? '')) . '?search=' . urlencode($query);
        } elseif ($key === 'permissions') {
@@ -22,7 +25,7 @@ class SearchItemMapperProvider
            $status = trim((string) ($data['last_run_status'] ?? ''));
            $label = $jobLabel !== '' ? $jobLabel : $jobKey;
            if ($status !== '') {
-                $label = trim($label . ' — ' . strtoupper($status));
+                $subtitle = strtoupper($status);
            }
            $url = lurl('admin/scheduled-jobs/edit/' . ($data['id'] ?? '')) . '?search=' . urlencode($query);
        } elseif ($key === 'mail-log') {
@@ -30,9 +33,14 @@ class SearchItemMapperProvider
            $subject = trim((string) ($data['subject'] ?? ''));
            $status = trim((string) ($data['status'] ?? ''));
            $label = $subject !== '' ? $subject : $toEmail;
+            $subtitleParts = [];
            if ($status !== '') {
-                $label = trim($label . ' — ' . strtoupper($status));
+                $subtitleParts[] = strtoupper($status);
            }
+            if ($toEmail !== '' && $subject !== '') {
+                $subtitleParts[] = $toEmail;
+            }
+            $subtitle = implode(' — ', $subtitleParts);
            $url = lurl('admin/mail-log/view/' . ($data['id'] ?? '')) . '?search=' . urlencode($query);
        } elseif ($key === 'pages') {
            $label = (string) ($data['slug'] ?? '');
@@ -46,7 +54,12 @@ class SearchItemMapperProvider
            return null;
        }

-        return ['label' => $label, 'url' => $url];
+        $item = ['label' => $label, 'url' => $url];
+        if ($subtitle !== '') {
+            $item['subtitle'] = $subtitle;
+        }
+
+        return $item;
    }

    public static function mapResultItem(string $key, string $label, array $data): ?array
--- a/lib/Support/SearchConfig.php
+++ b/lib/Support/SearchConfig.php
@@ -106,7 +106,14 @@ class SearchConfig
        if ($provider !== null) {
            $mapped = $provider->mapResultItem($key, $data);
            if ($mapped !== null) {
-                return ['label' => $mapped['title'], 'url' => $mapped['url']];
+                $item = ['label' => $mapped['title'], 'url' => $mapped['url']];
+                if (isset($mapped['subtitle']) && $mapped['subtitle'] !== '') {
+                    $item['subtitle'] = $mapped['subtitle'];
+                }
+                if (isset($mapped['icon']) && $mapped['icon'] !== '') {
+                    $item['icon'] = $mapped['icon'];
+                }
+                return $item;
            }
            return null;
        }
--- a/modules/audit/lib/Module/Audit/Providers/AuditSearchResourceProvider.php
+++ b/modules/audit/lib/Module/Audit/Providers/AuditSearchResourceProvider.php
@@ -14,14 +14,14 @@ final class AuditSearchResourceProvider implements SearchResourceProvider
        return [
            'api-audit' => [
                'label' => t('API audit'),
-                'permission' => 'api_audit.view',
+                'permission' => 'audit.api.view',
                'count_sql' => "select count(*) from api_audit_log where (request_id like ? escape '\\\\' or path like ? escape '\\\\' or error_code like ? escape '\\\\' or ip like ? escape '\\\\')",
                'preview_sql' => "select id, request_id, method, path, status_code, created_at from api_audit_log where (request_id like ? escape '\\\\' or path like ? escape '\\\\' or error_code like ? escape '\\\\' or ip like ? escape '\\\\') order by created_at desc limit ?",
                'result_sql' => "select id, request_id, method, path, status_code, created_at from api_audit_log where (request_id like ? escape '\\\\' or path like ? escape '\\\\' or error_code like ? escape '\\\\' or ip like ? escape '\\\\') order by created_at desc",
            ],
            'system-audit' => [
                'label' => t('System audit'),
-                'permission' => 'system_audit.view',
+                'permission' => 'audit.system.view',
                'count_sql' => "select count(*) from system_audit_log where (request_id like ? escape '\\\\' or event_type like ? escape '\\\\' or error_code like ? escape '\\\\' or path like ? escape '\\\\')",
                'preview_sql' => "select id, request_id, event_type, outcome, created_at from system_audit_log where (request_id like ? escape '\\\\' or event_type like ? escape '\\\\' or error_code like ? escape '\\\\' or path like ? escape '\\\\') order by created_at desc limit ?",
                'result_sql' => "select id, request_id, event_type, outcome, created_at from system_audit_log where (request_id like ? escape '\\\\' or event_type like ? escape '\\\\' or error_code like ? escape '\\\\' or path like ? escape '\\\\') order by created_at desc",
@@ -60,21 +60,27 @@ final class AuditSearchResourceProvider implements SearchResourceProvider
        $method = strtoupper(trim((string) ($row['method'] ?? '')));
        $path = trim((string) ($row['path'] ?? ''));
        $statusCode = (int) ($row['status_code'] ?? 0);
-        $requestId = trim((string) ($row['request_id'] ?? ''));
+        $createdAt = trim((string) ($row['created_at'] ?? ''));

        $title = trim($method . ' ' . $path);
        if ($title === '') {
-            $title = $requestId;
+            $title = trim((string) ($row['request_id'] ?? ''));
        }
        if ($title === '') {
            return null;
        }

-        $subtitle = trim(($statusCode > 0 ? (string) $statusCode : '') . ($requestId !== '' ? ' — ' . $requestId : ''));
+        $subtitleParts = [];
+        if ($statusCode > 0) {
+            $subtitleParts[] = (string) $statusCode;
+        }
+        if ($createdAt !== '') {
+            $subtitleParts[] = $createdAt;
+        }

        return [
            'title' => $title,
-            'subtitle' => $subtitle,
+            'subtitle' => implode(' — ', $subtitleParts),
            'url' => lurl('admin/api-audit/view/' . ($row['id'] ?? '')),
            'icon' => 'bi-shield-check',
        ];
@@ -88,18 +94,24 @@ final class AuditSearchResourceProvider implements SearchResourceProvider
    {
        $eventType = trim((string) ($row['event_type'] ?? ''));
        $outcome = strtolower(trim((string) ($row['outcome'] ?? '')));
-        $requestId = trim((string) ($row['request_id'] ?? ''));
+        $createdAt = trim((string) ($row['created_at'] ?? ''));

-        $title = $eventType !== '' ? $eventType : $requestId;
+        $title = $eventType !== '' ? $eventType : trim((string) ($row['request_id'] ?? ''));
        if ($title === '') {
            return null;
        }

-        $subtitle = trim(($outcome !== '' ? strtoupper($outcome) : '') . ($requestId !== '' ? ' — ' . $requestId : ''));
+        $subtitleParts = [];
+        if ($outcome !== '') {
+            $subtitleParts[] = strtoupper($outcome);
+        }
+        if ($createdAt !== '') {
+            $subtitleParts[] = $createdAt;
+        }

        return [
            'title' => $title,
-            'subtitle' => $subtitle,
+            'subtitle' => implode(' — ', $subtitleParts),
            'url' => lurl('admin/system-audit/view/' . ($row['id'] ?? '')),
            'icon' => 'bi-journal-lock',
        ];
--- a/modules/audit/tests/Module/Audit/Providers/AuditSearchResourceProviderTest.php
+++ b/modules/audit/tests/Module/Audit/Providers/AuditSearchResourceProviderTest.php
@@ -38,8 +38,8 @@ class AuditSearchResourceProviderTest extends TestCase
    {
        $resources = $this->provider->resources();

-        $this->assertSame('api_audit.view', $resources['api-audit']['permission']);
-        $this->assertSame('system_audit.view', $resources['system-audit']['permission']);
+        $this->assertSame('audit.api.view', $resources['api-audit']['permission']);
+        $this->assertSame('audit.system.view', $resources['system-audit']['permission']);
    }

    public function testMapApiAuditItem(): void
@@ -50,6 +50,7 @@ class AuditSearchResourceProviderTest extends TestCase
            'path' => '/api/v1/users',
            'status_code' => 201,
            'request_id' => 'req-abc',
+            'created_at' => '2026-03-15 10:30:00',
        ];

        $result = $this->provider->mapResultItem('api-audit', $row);
@@ -57,7 +58,7 @@ class AuditSearchResourceProviderTest extends TestCase
        $this->assertNotNull($result);
        $this->assertSame('POST /api/v1/users', $result['title']);
        $this->assertStringContains('201', $result['subtitle']);
-        $this->assertStringContains('req-abc', $result['subtitle']);
+        $this->assertStringContains('2026-03-15 10:30:00', $result['subtitle']);
        $this->assertSame('bi-shield-check', $result['icon']);
        $this->assertStringContainsString('admin/api-audit/view/42', $result['url']);
    }
@@ -88,6 +89,7 @@ class AuditSearchResourceProviderTest extends TestCase
            'event_type' => 'admin.settings.update',
            'outcome' => 'success',
            'request_id' => 'req-xyz',
+            'created_at' => '2026-03-15 11:00:00',
        ];

        $result = $this->provider->mapResultItem('system-audit', $row);
@@ -95,6 +97,7 @@ class AuditSearchResourceProviderTest extends TestCase
        $this->assertNotNull($result);
        $this->assertSame('admin.settings.update', $result['title']);
        $this->assertStringContains('SUCCESS', $result['subtitle']);
+        $this->assertStringContains('2026-03-15 11:00:00', $result['subtitle']);
        $this->assertSame('bi-journal-lock', $result['icon']);
        $this->assertStringContainsString('admin/system-audit/view/99', $result['url']);
    }
--- a/templates/partials/app-search-dialog.phtml
+++ b/templates/partials/app-search-dialog.phtml
@@ -11,11 +11,10 @@
  data-app-component="global-search"
  data-search-endpoint="<?php e(lurl('admin/search/data')); ?>"
  data-search-results-page="<?php e(lurl('search')); ?>"
-  aria-labelledby="app-search-dialog-title"
+  aria-label="<?php e(t('Search')); ?>"
 >
  <article class="app-dialog-lg app-search-dialog">
    <header class="app-search-dialog-header">
-      <h2 id="app-search-dialog-title" class="visually-hidden"><?php e(t('Search')); ?></h2>
      <form class="app-search-dialog-form" autocomplete="off">
        <i class="bi bi-search app-search-dialog-icon" aria-hidden="true"></i>
        <input
@@ -23,26 +22,24 @@
          name="search-dialog-input"
          id="search-dialog-input"
          class="app-search-dialog-input"
-          placeholder="<?php e(t('Search...')); ?>"
+          placeholder="<?php e(t('Search users, tenants, pages...')); ?>"
          aria-label="<?php e(t('Search')); ?>"
          aria-autocomplete="list"
          aria-controls="app-search-dialog-results"
          autocomplete="off"
        >
-        <kbd class="app-search-dialog-shortcut" data-search-shortcut aria-hidden="true"></kbd>
      </form>
      <button type="button" class="close" data-app-search-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
    </header>
    <div class="app-search-dialog-body">
      <div class="app-search-dialog-empty-state" data-search-dialog-empty data-no-results-text="<?php e(t('No results found')); ?>">
-        <p class="muted"><?php e(t('To start searching, type in the search field.')); ?></p>
-        <small class="muted" data-search-empty-hint-template="<?php e(t('Tip: Use {shortcut} to focus search quickly.')); ?>"></small>
+        <p class="muted"><?php e(t('Users, tenants, departments, roles and more')); ?></p>
      </div>
      <div class="app-search-dialog-loading" data-search-dialog-loading hidden>
        <p class="muted" aria-live="polite"><?php e(t('Searching...')); ?></p>
      </div>
      <div class="app-search-dialog-error" data-search-dialog-error hidden>
-        <p class="muted"><?php e(t('Search failed. Please try again.')); ?></p>
+        <p class="muted" aria-live="assertive"><?php e(t('Search failed. Please try again.')); ?></p>
      </div>
      <ul
        id="app-search-dialog-results"
@@ -58,8 +55,10 @@
        <?php e(t('View all results')); ?>
        <i class="bi bi-arrow-right" aria-hidden="true"></i>
      </a>
-      <span class="app-search-dialog-footer-hint muted">
-        <kbd>Esc</kbd> <?php e(t('to close')); ?>
+      <span class="app-search-dialog-footer-hint muted" aria-hidden="true">
+        <kbd>↑↓</kbd> <?php e(t('navigate')); ?>
+        <kbd>↵</kbd> <?php e(t('open')); ?>
+        <kbd>Esc</kbd> <?php e(t('close')); ?>
      </span>
    </footer>
  </article>
--- a/web/css/base/variables.base.css
+++ b/web/css/base/variables.base.css
@@ -57,18 +57,18 @@
  --app-blockquote-background-color: var(
    --app-form-element-active-background-color
  );
-  --list-tabs-border: var(--app-border);
-  --list-tabs-active: var(--app-primary);
-  --list-tabs-muted: var(--app-muted-color);
-  --tabs-border: var(--app-border);
-  --tabs-active: var(--app-primary);
-  --tabs-muted: var(--app-muted-color);
-  --tooltip-bg: var(--app-card-background-color);
-  --tooltip-color: var(--app-color);
-  --tooltip-border: var(--app-border);
-  --tooltip-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
-  --tooltip-radius: 8px;
-  --tooltip-offset: 8px;
+  --app-list-tabs-border: var(--app-border);
+  --app-list-tabs-active: var(--app-primary);
+  --app-list-tabs-muted: var(--app-muted-color);
+  --app-tabs-border: var(--app-border);
+  --app-tabs-active: var(--app-primary);
+  --app-tabs-muted: var(--app-muted-color);
+  --app-tooltip-bg: var(--app-card-background-color);
+  --app-tooltip-color: var(--app-color);
+  --app-tooltip-border: var(--app-border);
+  --app-tooltip-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  --app-tooltip-radius: 8px;
+  --app-tooltip-offset: 8px;
  --app-badge-background-color: coral;
  --app-empty-border-color: var(--app-muted-border-color);
  --app-empty-bg: var(--app-card-background-color);
@@ -239,6 +239,7 @@
  --app-form-element-active-border-color: var(--app-primary-border);
  --app-form-element-focus-color: var(--app-primary-border);
  --app-form-element-disabled-opacity: 0.5;
+  --app-form-element-disabled-background-color: #f0f2f5;
  --app-form-element-readonly-background-color: #f4f7fb;
  --app-form-element-readonly-border-color: #d6deea;
  --app-form-element-readonly-color: #2f3440;
@@ -248,6 +249,8 @@
  --app-form-element-invalid-focus-color: var(
    --app-form-element-invalid-active-border-color
  );
+  --app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
+    var(--app-form-element-invalid-focus-color);
  --app-form-element-valid-border-color: rgb(76, 154.5, 137.5);
  --app-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
  --app-form-element-valid-focus-color: var(
@@ -306,8 +309,6 @@
  --app-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
  --app-progress-background-color: #dfe3eb;
  --app-progress-color: var(--app-primary-background);
-  --app-tooltip-background-color: var(--app-contrast-background);
-  --app-tooltip-color: var(--app-contrast-inverse);
  --app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
@@ -499,6 +500,7 @@
    --app-form-element-active-border-color: var(--app-primary-border);
    --app-form-element-focus-color: var(--app-primary-border);
    --app-form-element-disabled-opacity: 0.5;
+    --app-form-element-disabled-background-color: #1e2430;
    --app-form-element-readonly-background-color: #242c3a;
    --app-form-element-readonly-border-color: #3a4458;
    --app-form-element-readonly-color: #d7dde8;
@@ -508,6 +510,8 @@
    --app-form-element-invalid-focus-color: var(
      --app-form-element-invalid-active-border-color
    );
+    --app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
+      var(--app-form-element-invalid-focus-color);
    --app-form-element-valid-border-color: #2a7b6f;
    --app-form-element-valid-active-border-color: rgb(22, 137, 105.5);
    --app-form-element-valid-focus-color: var(
@@ -554,8 +558,6 @@
    --app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
    --app-progress-background-color: #202632;
    --app-progress-color: var(--app-primary-background);
-    --app-tooltip-background-color: var(--app-contrast-background);
-    --app-tooltip-color: var(--app-contrast-inverse);
    --app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }
@@ -736,6 +738,7 @@
  --app-form-element-active-border-color: var(--app-primary-border);
  --app-form-element-focus-color: var(--app-primary-border);
  --app-form-element-disabled-opacity: 0.5;
+  --app-form-element-disabled-background-color: #1e2430;
  --app-form-element-readonly-background-color: #242c3a;
  --app-form-element-readonly-border-color: #3a4458;
  --app-form-element-readonly-color: #d7dde8;
@@ -745,6 +748,8 @@
  --app-form-element-invalid-focus-color: var(
    --app-form-element-invalid-active-border-color
  );
+  --app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
+    var(--app-form-element-invalid-focus-color);
  --app-form-element-valid-border-color: #2a7b6f;
  --app-form-element-valid-active-border-color: rgb(22, 137, 105.5);
  --app-form-element-valid-focus-color: var(
@@ -803,8 +808,6 @@
  --app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
  --app-progress-background-color: #202632;
  --app-progress-color: var(--app-primary-background);
-  --app-tooltip-background-color: var(--app-contrast-background);
-  --app-tooltip-color: var(--app-contrast-inverse);
  --app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
--- a/web/css/base/variables.contrast.css
+++ b/web/css/base/variables.contrast.css
@@ -19,7 +19,7 @@ html[data-contrast="high"][data-theme="light"],
  --app-accordion-border-color: white;
  --app-card-background-color: #ffffff;
  --app-blockquote-border-color: var(--app-muted-border-color);
-  --app-tooltip-background-color: #000;
+  --app-tooltip-bg: #000;
  --app-tooltip-color: #fff;
  --app-action-success-background: #0f5f00;
  --app-action-success-border: #0f5f00;
@@ -54,7 +54,7 @@ html[data-contrast="high"][data-theme^="dark"],
  --app-accordion-border-color: black;
  --app-card-background-color: #000000;
  --app-blockquote-border-color: var(--app-muted-border-color);
-  --app-tooltip-background-color: #fff;
+  --app-tooltip-bg: #fff;
  --app-tooltip-color: #0b0f14;
  --app-action-success-background: #0f5f00;
  --app-action-success-border: #0f5f00;
--- a/web/css/components/app-dialog.css
+++ b/web/css/components/app-dialog.css
@@ -50,20 +50,28 @@
  /* ── Close icon ──────────────────────────────────────────────────────── */
  dialog > article .close,
  dialog > article :is(a, button)[rel="prev"] {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    margin-top: calc(var(--app-spacing) * -1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    min-height: 2rem;
+    width: 2rem;
+    height: 2rem;
+    margin-top: calc(var(--app-spacing) * -0.5);
    margin-bottom: var(--app-spacing);
    margin-left: auto;
    border: none;
+    border-radius: var(--app-border-radius);
    background-image: var(--app-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
-    transition: opacity var(--app-transition);
+    cursor: pointer;
+    transition:
+      opacity var(--app-transition),
+      background var(--app-transition);
  }

  dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
@@ -71,6 +79,18 @@
    opacity: 1;
  }

+  dialog > article .close:hover,
+  dialog > article :is(a, button)[rel="prev"]:hover {
+    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+  }
+
+  dialog > article .close:focus-visible,
+  dialog > article :is(a, button)[rel="prev"]:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+    opacity: 1;
+  }
+
  /* ── Mobile: stack buttons vertically ────────────────────────────────── */
  @media (max-width: 576px) {
    dialog > article > footer,
--- a/web/css/components/app-list-tabs.css
+++ b/web/css/components/app-list-tabs.css
@@ -4,7 +4,7 @@
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--app-spacing);
-  border-bottom: 1px solid var(--list-tabs-border);
+  border-bottom: 1px solid var(--app-list-tabs-border);
 }

 .app-list-tabs button,
@@ -12,7 +12,7 @@
  background: transparent;
  border: 0;
  padding: 5px 10px 5px 10px;
-  color: var(--list-tabs-muted);
+  color: var(--app-list-tabs-muted);
  cursor: pointer;
  font-weight: var(--font-medium);
  border-bottom: 2px solid transparent;
@@ -29,6 +29,6 @@
 .app-list-tabs button.is-active,
 .app-list-tabs a.is-active {
  color: var(--app-color);
-  border-color: var(--list-tabs-active);
+  border-color: var(--app-list-tabs-active);
 }
 }
--- a/web/css/components/app-search.css
+++ b/web/css/components/app-search.css
@@ -30,10 +30,6 @@
    gap: 0.5rem;
  }

-  .app-search-dialog-header h2 {
-    margin: 0;
-  }
-
  .app-search-dialog-form {
    display: flex;
    align-items: center;
@@ -66,18 +62,6 @@
    border-color: transparent;
  }

-  .app-search-dialog-shortcut {
-    border: 1px solid var(--app-border);
-    border-radius: 4px;
-    background: var(--app-card-background-color);
-    color: var(--app-muted-color);
-    font-size: var(--text-xs);
-    line-height: var(--leading-none);
-    padding: 0.15rem 0.35rem;
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-
  .app-search-dialog-header .close {
    flex-shrink: 0;
  }
@@ -107,10 +91,6 @@
    margin: 0 0 0.25rem;
  }

-  .app-search-dialog-empty-state small {
-    display: block;
-  }
-
  /* ── Results list ────────────────────────────────────────────────────── */

  .app-search-dialog-results {
@@ -129,31 +109,20 @@
  .app-search-dialog-category-heading {
    display: flex;
    align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--app-muted-color);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
-    margin-bottom: 5px;
+    padding: 0.25rem 0.75rem;
  }

-  .app-search-dialog-category-heading .bi {
-    font-size: var(--text-sm);
-  }
-
-  .app-search-dialog-category-count {
-    margin-left: auto;
-    font-size: 10px; /* icon-font metric — intentional px */
-    padding: 1px 4px;
-    min-width: 18px;
-    text-align: center;
-    border-radius: 999px;
-    background: var(--app-accordion-border-color);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    height: 18px;
+  .app-search-dialog-category-heading::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--app-border);
  }

  /* ── Individual result items ─────────────────────────────────────────── */
@@ -162,8 +131,9 @@
    list-style: none;
    padding: 0;
    margin: 0;
+    display: flex;
    flex-direction: column;
-    gap: 5px;
+    gap: 2px;
  }

  .app-search-dialog-item {
@@ -174,14 +144,45 @@
  }

  .app-search-dialog-item a {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
    color: var(--app-color);
    text-decoration: none;
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--app-border-radius);
+  }
+
+  .app-search-dialog-item-icon {
+    color: var(--app-muted-color);
+    font-size: var(--text-base);
+    flex-shrink: 0;
+  }
+
+  .app-search-dialog-item-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .app-search-dialog-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-    border-radius: var(--app-border-radius);
+  }
+
+  .app-search-dialog-item-subtitle {
+    font-size: var(--text-sm);
+    color: var(--app-muted-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .app-search-dialog-item mark {
+    padding: 0;
+    border-radius: 2px;
  }

  .app-search-dialog-item:hover,
@@ -193,16 +194,19 @@
    color: var(--app-primary);
  }

-  /* ── Category "view all" link ────────────────────────────────────────── */
+  /* ── "View all" item (last item in category) ─────────────────────────── */

-  .app-search-dialog-category-view-all {
-    font-size: var(--text-xs);
-    color: var(--app-primary);
-    text-decoration: none;
+  .app-search-dialog-item-view-all a {
+    color: var(--app-muted-color);
  }

-  .app-search-dialog-category-view-all:hover {
-    text-decoration: underline;
+  .app-search-dialog-item-view-all .app-search-dialog-item-title {
+    font-size: var(--text-sm);
+  }
+
+  .app-search-dialog-item-view-all:hover a,
+  .app-search-dialog-item-view-all.app-search-dialog-item-active a {
+    color: var(--app-primary);
  }

  /* ── Footer ──────────────────────────────────────────────────────────── */
@@ -223,6 +227,14 @@
    text-decoration: underline;
  }

+  .app-search-dialog-footer-hint kbd {
+    margin-right: 0.15rem;
+  }
+
+  .app-search-dialog-footer-hint kbd:not(:first-child) {
+    margin-left: 0.5rem;
+  }
+
  /* ── Mobile ──────────────────────────────────────────────────────────── */

  @media (max-width: 576px) {
--- a/web/css/components/app-tabs.css
+++ b/web/css/components/app-tabs.css
@@ -27,7 +27,7 @@
    position: relative;
    display: flex;
    align-items: stretch;
-    border-bottom: 1px solid var(--tabs-border);
+    border-bottom: 1px solid var(--app-tabs-border);
  }

  /* Chevron scroll buttons — ghost icons, visible only on overflow.
@@ -36,7 +36,7 @@
  .app-tabs-nav-wrap > .app-tabs-chevron {
    --app-background-color: transparent;
    --app-border-color: transparent;
-    --app-color: var(--tabs-muted);
+    --app-color: var(--app-tabs-muted);
    --app-box-shadow: none;
    flex: 0 0 auto;
    display: none;
@@ -45,7 +45,7 @@
    border: none;
    border-radius: 50%;
    background: transparent;
-    color: var(--tabs-muted);
+    color: var(--app-tabs-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-none);
    width: 24px;
@@ -119,7 +119,7 @@
  /* ------------------------------------------------------------------ */
  .app-tabs-nav {
    display: flex;
-    border-bottom: 1px solid var(--tabs-border); /* No-JS fallback border */
+    border-bottom: 1px solid var(--app-tabs-border); /* No-JS fallback border */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-start: 2px;
@@ -148,7 +148,7 @@
    background: transparent;
    border: 0;
    padding: 5px 10px 5px 10px;
-    color: var(--tabs-muted) !important;
+    color: var(--app-tabs-muted) !important;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-decoration: none;
@@ -169,7 +169,7 @@
  .app-tabs-nav a.is-active {
    --app-color: inherit;
    color: var(--app-color) !important;
-    border-color: var(--tabs-active);
+    border-color: var(--app-tabs-active);
  }

  .app-tabs-nav button.has-invalid,
--- a/web/css/components/app-tooltips.css
+++ b/web/css/components/app-tooltips.css
@@ -17,11 +17,11 @@

 [data-tooltip]::after {
  content: attr(data-tooltip);
-  background: var(--tooltip-bg);
-  color: var(--tooltip-color);
-  border: 1px solid var(--tooltip-border);
-  border-radius: var(--tooltip-radius);
-  box-shadow: var(--tooltip-shadow);
+  background: var(--app-tooltip-bg);
+  color: var(--app-tooltip-color);
+  border: 1px solid var(--app-tooltip-border);
+  border-radius: var(--app-tooltip-radius);
+  box-shadow: var(--app-tooltip-shadow);
  font-size: var(--text-xs);
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
@@ -31,9 +31,9 @@
  content: '';
  width: 8px;
  height: 8px;
-  background: var(--tooltip-bg);
-  border-left: 1px solid var(--tooltip-border);
-  border-top: 1px solid var(--tooltip-border);
+  background: var(--app-tooltip-bg);
+  border-left: 1px solid var(--app-tooltip-border);
+  border-top: 1px solid var(--app-tooltip-border);
  transform: rotate(45deg);
 }

@@ -51,11 +51,11 @@
 }

 [data-tooltip]::after {
-  transform: translate(var(--tooltip-offset), -50%);
+  transform: translate(var(--app-tooltip-offset), -50%);
 }

 [data-tooltip]::before {
-  transform: translate(calc(var(--tooltip-offset) - 4px), -50%) rotate(45deg);
+  transform: translate(calc(var(--app-tooltip-offset) - 4px), -50%) rotate(45deg);
 }

 [data-tooltip][data-tooltip-pos="top"]::after,
@@ -63,7 +63,7 @@
  bottom: 100%;
  left: 50%;
  top: auto;
-  transform: translate(-50%, calc(-1 * var(--tooltip-offset)));
+  transform: translate(-50%, calc(-1 * var(--app-tooltip-offset)));
 }

 [data-tooltip][data-tooltip-pos="top"]::before,
@@ -71,33 +71,33 @@
  bottom: 100%;
  left: 50%;
  top: auto;
-  transform: translate(-50%, calc(-1 * (var(--tooltip-offset) - 2px))) rotate(45deg);
+  transform: translate(-50%, calc(-1 * (var(--app-tooltip-offset) - 2px))) rotate(45deg);
 }

 [data-tooltip][data-tooltip-pos="bottom"]::after {
  top: 100%;
  left: 50%;
-  transform: translate(-50%, var(--tooltip-offset));
+  transform: translate(-50%, var(--app-tooltip-offset));
 }

 [data-tooltip][data-tooltip-pos="bottom"]::before {
  top: 100%;
  left: 50%;
-  transform: translate(-50%, calc(var(--tooltip-offset) - 2px)) rotate(45deg);
+  transform: translate(-50%, calc(var(--app-tooltip-offset) - 2px)) rotate(45deg);
 }

 [data-tooltip][data-tooltip-pos="left"]::after {
  top: 50%;
  right: 100%;
  left: auto;
-  transform: translate(calc(-1 * var(--tooltip-offset)), -50%);
+  transform: translate(calc(-1 * var(--app-tooltip-offset)), -50%);
 }

 [data-tooltip][data-tooltip-pos="left"]::before {
  top: 50%;
  right: 100%;
  left: auto;
-  transform: translate(calc(-1 * (var(--tooltip-offset) - 2px)), -50%) rotate(45deg);
+  transform: translate(calc(-1 * (var(--app-tooltip-offset) - 2px)), -50%) rotate(45deg);
 }

@media (prefers-reduced-motion: reduce) {
--- a/web/css/layout/app-shell.css
+++ b/web/css/layout/app-shell.css
@@ -88,7 +88,7 @@
  }

  kbd {
-    --app-font-weight: bolder;
+    --app-font-weight: var(--font-bold);
  }

  :where(select, textarea),
--- a/web/css/layout/app-sidebar.css
+++ b/web/css/layout/app-sidebar.css
@@ -210,11 +210,12 @@
  .app-sidebar a {
    color: inherit;
    display: block;
-    padding: 3px var(--app-spacing);
+    padding: 0.375rem var(--app-spacing);
    border-radius: 0;
    margin: 0;
    border-left: var(--app-sidebar-border-width) solid transparent;
    width: 100%;
+    font-size: var(--text-base);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
@@ -286,7 +287,7 @@
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--text-base);
-    font-weight: var(--font-normal);
+    font-weight: var(--font-regular);
    position: relative;
    top: 2px;
  }
--- a/web/css/layout/app-topbar.css
+++ b/web/css/layout/app-topbar.css
@@ -26,9 +26,8 @@
    --app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
    --app-topbar-muted: var(--app-form-element-placeholder-color);
    --app-topbar-bg: var(--app-background-color);
-    padding-block-start: 0;
-    padding-left: var(--app-spacing);
-    padding-right: var(--app-spacing);
+    padding-block: 0.375rem;
+    padding-inline: var(--app-spacing);
    margin-bottom: var(--app-topbar-margin-bottom);
    color: var(--app-contrast);
    border-bottom: var(--app-topbar-divider);
@@ -71,7 +70,7 @@
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
-    max-width: min(24rem, 50vw);
+    max-width: min(20rem, 50vw);
    width: 100%;
    padding: 0.3rem 0.65rem;
    border: var(--app-border-width) solid var(--app-border);
@@ -93,6 +92,11 @@
    border-color: var(--app-primary);
  }

+  .app-topbar-search-trigger:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+  }
+
  .app-topbar-search-trigger .bi {
    font-size: var(--text-sm);
    flex-shrink: 0;
@@ -139,35 +143,70 @@
  }

  .app-header details.dropdown > summary:not([role]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    min-height: 2.25rem;
    border: none;
    height: auto;
    padding: var(--app-topbar-item-padding);
-    border-radius: 0;
+    border-radius: var(--app-border-radius);
    background: transparent;
+    color: var(--app-topbar-muted);
+    cursor: pointer;
+    transition:
+      background var(--app-transition),
+      color var(--app-transition);
  }

-  /* .app-header details.dropdown > summary:not([role]):after {
-  display: none;
-} */
-
  .app-topbar-left > li > a,
-  .app-topbar-right > li > a {
-    padding: var(--app-topbar-item-padding);
-    color: var(--app-topbar-muted);
-    display: block;
-    margin: 0;
-  }
-
+  .app-topbar-right > li > a,
  .app-topbar-left button,
  .app-topbar-right button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    min-height: 2.25rem;
    padding: var(--app-topbar-item-padding);
-    color: var(--app-topbar-muted);
-    display: block;
    margin: 0;
-    background: transparent;
    border: none;
-    border-radius: 0;
+    border-radius: var(--app-border-radius);
+    background: transparent;
+    color: var(--app-topbar-muted);
+    cursor: pointer;
+    transition:
+      background var(--app-transition),
+      color var(--app-transition);
  }
+
+  .app-topbar-left > li > a:hover,
+  .app-topbar-right > li > a:hover,
+  .app-topbar-left button:hover,
+  .app-topbar-right button:hover,
+  .app-header details.dropdown > summary:not([role]):hover {
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    color: var(--app-color);
+  }
+
+  .app-topbar-left > li > a:active,
+  .app-topbar-right > li > a:active,
+  .app-topbar-left button:active,
+  .app-topbar-right button:active,
+  .app-header details.dropdown > summary:not([role]):active {
+    background: color-mix(in srgb, var(--app-contrast) 12%, transparent);
+  }
+
+  .app-topbar-left > li > a:focus-visible,
+  .app-topbar-right > li > a:focus-visible,
+  .app-topbar-left button:focus-visible,
+  .app-topbar-right button:focus-visible,
+  .app-header details.dropdown > summary:not([role]):focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+  }
+
  .app-header #global-back.is-disabled,
  .app-header #global-forward.is-disabled {
    opacity: 0.4;
@@ -189,6 +228,21 @@

  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
    cursor: pointer;
+    transition:
+      border-color var(--app-transition),
+      color var(--app-transition);
+  }
+
+  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip:hover {
+    border-color: var(--app-primary);
+    color: var(--app-color);
+  }
+
+  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+    border-color: var(--app-primary);
+    color: var(--app-color);
  }

  .app-topbar-tenant-name {
@@ -201,8 +255,8 @@
    white-space: nowrap;
  }

-  .app-topbar-user-menu > summary {
-    color: var(--app-topbar-muted);
+  .app-topbar-user-menu > summary:hover {
+    color: var(--app-color);
  }

  .app-topbar-menu-list {
@@ -257,7 +311,7 @@
    padding: 0.375rem 0.5rem;
    overflow: hidden;
    border: 0;
-    border-radius: 3px;
+    border-radius: var(--app-border-radius);
    background: transparent;
    color: var(--app-dropdown-color);
    font: inherit;
@@ -274,12 +328,18 @@
    display: block;
  }

+  .app-topbar-menu-list li > a:hover,
+  .app-topbar-menu-list li > a:focus-visible,
  .app-topbar-menu-list li > button:hover,
-  .app-topbar-menu-list li > button:focus,
  .app-topbar-menu-list li > button:focus-visible {
    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
  }

+  .app-topbar-menu-list li > a.active {
+    color: var(--app-primary);
+    font-weight: var(--font-medium);
+  }
+
  .app-topbar-menu-list li > button.app-topbar-menu-with-hotkey {
    display: grid;
    grid-template-columns: 1fr auto;
--- a/web/css/pages/app-error.css
+++ b/web/css/pages/app-error.css
@@ -12,13 +12,13 @@
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
-  color: var(--color-text-muted);
+  color: var(--app-muted-color);
 }

 .error-page__message {
  margin-top: 1rem;
  font-size: var(--text-lg);
-  color: var(--color-text);
+  color: var(--app-color);
 }

 .error-page__back {
@@ -27,10 +27,10 @@
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
  text-decoration: none;
-  border: 1px solid var(--color-border);
-  border-radius: 0.375rem;
-  color: var(--color-text);
-  background: var(--color-bg-surface);
+  border: 1px solid var(--app-muted-border-color);
+  border-radius: var(--app-border-radius);
+  color: var(--app-color);
+  background: var(--app-card-background-color);
 }

 .error-page__back:hover {
--- a/web/css/pages/app-login.css
+++ b/web/css/pages/app-login.css
@@ -807,7 +807,7 @@
    justify-content: flex-start;
    text-align: left;
    font-weight: var(--font-bold);
-    color: var(--app-text);
+    color: var(--app-color);
  }

  .login-tenant-context-text {
--- a/web/css/vendor-overrides/editorjs.css
+++ b/web/css/vendor-overrides/editorjs.css
@@ -54,7 +54,7 @@ table.tc-table {
 }

 .tc-cell {
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--app-muted-border-color);
 }

 .ce-toolbar__actions {
--- a/web/js/components/app-global-search.js
+++ b/web/js/components/app-global-search.js
@@ -42,8 +42,6 @@ export function initGlobalSearch(root = document, options = {}) {
  const footerEl = dialog.querySelector('[data-search-dialog-footer]');
  const viewAllLink = dialog.querySelector('[data-search-dialog-view-all]');
  const closeButton = dialog.querySelector('[data-app-search-dialog-close]');
-  const shortcutEl = dialog.querySelector('[data-search-shortcut]');
-  const emptyHintEl = dialog.querySelector('[data-search-empty-hint-template]');
  const triggerButton = document.querySelector('[data-app-search-trigger]');
  const triggerShortcutEl = document.querySelector('[data-search-trigger-shortcut]');

@@ -57,17 +55,13 @@ export function initGlobalSearch(root = document, options = {}) {
  let pending = null;
  let activeIndex = -1;
  let flatItems = [];
+  let abortController = null;

  const shortcutLabel = /(Mac|iPhone|iPad|iPod)/i.test(navigator.platform || navigator.userAgent)
    ? '⌘K'
    : 'Ctrl+K';

-  if (shortcutEl) {shortcutEl.textContent = shortcutLabel;}
  if (triggerShortcutEl) {triggerShortcutEl.textContent = shortcutLabel;}
-  if (emptyHintEl) {
-    const template = emptyHintEl.getAttribute('data-search-empty-hint-template') || '';
-    emptyHintEl.textContent = template.replace('{shortcut}', shortcutLabel);
-  }

  // --- State management ---

@@ -119,14 +113,14 @@ export function initGlobalSearch(root = document, options = {}) {

      const heading = document.createElement('div');
      heading.classList.add('app-search-dialog-category-heading');
-      heading.innerHTML = `<i class="bi ${iconForKey(category.key)}" aria-hidden="true"></i> <span>${escapeHtml(category.label || category.key)}</span> <span class="app-search-dialog-category-count">${category.count}</span>`;
+      heading.textContent = category.label || category.key;
      group.appendChild(heading);

-      if (Array.isArray(category.items) && category.items.length > 0) {
      const list = document.createElement('ul');
      list.classList.add('app-search-dialog-category-items');
      list.setAttribute('role', 'group');

+      if (Array.isArray(category.items) && category.items.length > 0) {
        category.items.forEach((item) => {
          if (!item || !item.url) {return;}
          const li = document.createElement('li');
@@ -137,25 +131,61 @@ export function initGlobalSearch(root = document, options = {}) {

          const link = document.createElement('a');
          link.href = item.url;
-          link.textContent = item.label || '';
          link.tabIndex = -1;
+
+          const itemIcon = item.icon || iconForKey(category.key);
+          const icon = document.createElement('i');
+          icon.className = `bi ${safeCssClass(itemIcon)} app-search-dialog-item-icon`;
+          icon.setAttribute('aria-hidden', 'true');
+          link.appendChild(icon);
+
+          const textWrap = document.createElement('span');
+          textWrap.classList.add('app-search-dialog-item-text');
+          const titleEl = document.createElement('span');
+          titleEl.classList.add('app-search-dialog-item-title');
+          highlightText(titleEl, item.label || '', query);
+          textWrap.appendChild(titleEl);
+          if (item.subtitle) {
+            const subtitleEl = document.createElement('span');
+            subtitleEl.classList.add('app-search-dialog-item-subtitle');
+            highlightText(subtitleEl, item.subtitle, query);
+            textWrap.appendChild(subtitleEl);
+          }
+          link.appendChild(textWrap);
+
          li.appendChild(link);
          list.appendChild(li);

          flatItems.push(li);
          itemIndex++;
        });
+      }
+
+      if (category.url && category.count > (category.items?.length || 0)) {
+        const viewLi = document.createElement('li');
+        viewLi.classList.add('app-search-dialog-item', 'app-search-dialog-item-view-all');
+        const viewLink = document.createElement('a');
+        viewLink.href = category.url;
+        viewLink.tabIndex = -1;
+
+        const viewIcon = document.createElement('i');
+        viewIcon.className = 'bi bi-arrow-right app-search-dialog-item-icon';
+        viewIcon.setAttribute('aria-hidden', 'true');
+        viewLink.appendChild(viewIcon);
+
+        const viewText = document.createElement('span');
+        viewText.classList.add('app-search-dialog-item-text');
+        const viewTitle = document.createElement('span');
+        viewTitle.classList.add('app-search-dialog-item-title');
+        viewTitle.textContent = `${category.label || category.key} — ${category.count}`;
+        viewText.appendChild(viewTitle);
+        viewLink.appendChild(viewText);
+
+        viewLi.appendChild(viewLink);
+        list.appendChild(viewLi);
+      }

      group.appendChild(list);
-      }
-
-      if (category.url && category.count > 0) {
-        const viewCategoryLink = document.createElement('a');
-        viewCategoryLink.classList.add('app-search-dialog-category-view-all');
-        viewCategoryLink.href = category.url;
-        viewCategoryLink.innerHTML = `${escapeHtml(category.label || category.key)} <i class="bi bi-arrow-right" aria-hidden="true"></i>`;
-        group.appendChild(viewCategoryLink);
-      }

      resultsEl.appendChild(group);
    });
@@ -182,12 +212,16 @@ export function initGlobalSearch(root = document, options = {}) {
  // --- Fetch ---

  const fetchResults = async (value) => {
+    if (abortController) {abortController.abort();}
+    abortController = new AbortController();
+    const { signal } = abortController;
+
    setState('loading');
    const url = new URL(endpoint.toString());
    url.searchParams.set('q', value);

    try {
-      const response = await fetch(url.toString(), { headers: { 'Accept': 'application/json' } });
+      const response = await fetch(url.toString(), { headers: { 'Accept': 'application/json' }, signal });
      if (!response.ok) {
        warnOnce('FETCH_FAILED', `Global search failed: ${response.status} ${response.statusText}`, { module: 'global-search' });
        setState('error');
@@ -201,6 +235,7 @@ export function initGlobalSearch(root = document, options = {}) {
        setState('error');
      }
    } catch (err) {
+      if (err.name === 'AbortError') {return;}
      warnOnce('FETCH_ERROR', 'Global search fetch error', { module: 'global-search', err });
      setState('error');
    }
@@ -212,14 +247,6 @@ export function initGlobalSearch(root = document, options = {}) {
    if (dialog.open) {return;}
    dialog.showModal();
    setState('empty');
-    if (emptyStateEl) {
-      const p = emptyStateEl.querySelector('p');
-      if (p) {
-        p.textContent = emptyHintEl
-          ? ''
-          : (dialog.dataset.emptyText || '');
-      }
-    }
    resetEmptyState();
    window.requestAnimationFrame(() => {
      if (input) {
@@ -280,6 +307,8 @@ export function initGlobalSearch(root = document, options = {}) {
  const onInput = () => {
    const value = input.value.trim();
    if (value.length < minLength) {
+      if (pending) {window.clearTimeout(pending); pending = null;}
+      if (abortController) {abortController.abort(); abortController = null;}
      setState('empty');
      resetEmptyState();
      resultsEl.innerHTML = '';
@@ -386,6 +415,7 @@ export function initGlobalSearch(root = document, options = {}) {

  const destroy = () => {
    if (pending) {window.clearTimeout(pending);}
+    if (abortController) {abortController.abort();}
    if (input) {
      input.removeEventListener('input', onInput);
      input.removeEventListener('keydown', onInputKeydown);
@@ -410,3 +440,30 @@ function escapeHtml(text) {
  div.appendChild(document.createTextNode(text));
  return div.innerHTML;
 }
+
+function safeCssClass(value) {
+  return String(value).replace(/[^a-z0-9_-]/gi, '');
+}
+
+function highlightText(el, text, query) {
+  if (!query || query.length < 2) {
+    el.textContent = text;
+    return;
+  }
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const parts = text.split(new RegExp(`(${escaped})`, 'gi'));
+  if (parts.length === 1) {
+    el.textContent = text;
+    return;
+  }
+  const queryLower = query.toLowerCase();
+  parts.forEach((part) => {
+    if (part.toLowerCase() === queryLower) {
+      const mark = document.createElement('mark');
+      mark.textContent = part;
+      el.appendChild(mark);
+    } else if (part !== '') {
+      el.appendChild(document.createTextNode(part));
+    }
+  });
+}