From ddca4cc488590ba95d6821a9aef57e349ceadcf4 Mon Sep 17 00:00:00 2001
From: StanZGenchev <stan.genchev@codbex.com>
Date: Fri, 11 Sep 2026 16:34:41 +0300
Subject: [PATCH 1/2] Fixed #7352 and refactored Harmonia use

Signed-off-by: StanZGenchev <stan.genchev@codbex.com>
---
 .claude/docs/harmonia-ui.md                   |  78 +--
 .claude/docs/shells.md                        |   2 +-
 DATABASE_SHELL_PLAN.md                        |  10 +-
 HARMONIA_2_MIGRATION.md                       | 193 -------
 HARMONIA_RUNTIME_PLAN.md                      |  33 +-
 .../intent/parser/IntentParser.java           |  24 +
 .../intent/parser/WidgetSizeIntentTest.java   |  94 ++++
 .../application-core/i18n/bg-BG/shell.json    |   8 +-
 .../application-core/i18n/en-US/shell.json    |  10 +-
 .../application-core/shell/css/app.css        |  21 +-
 .../shell/js/components/layout/appShell.js    |   3 +
 .../shell/js/stores/notifications.js          |  28 +-
 .../application-core/shell/js/stores/theme.js |  45 +-
 .../shell/views/_documents.html               |  50 +-
 .../application-core/shell/views/_inbox.html  |  24 +-
 .../META-INF/dirigible/admin/index.html       | 114 +++--
 .../META-INF/dirigible/admin/js/appShell.js   |   3 +
 .../dirigible/admin/views/_settings.html      |  55 +-
 .../META-INF/dirigible/application/index.html | 136 ++---
 .../dirigible/application/js/appShell.js      |   3 +
 .../application/views/_dashboard.html         |  45 +-
 .../application/views/_settings.html          |  79 +--
 .../META-INF/dirigible/builder/css/app.css    |  38 +-
 .../META-INF/dirigible/builder/index.html     |  84 ++--
 .../META-INF/dirigible/builder/js/appShell.js |   3 +
 .../META-INF/dirigible/database/index.html    |  64 +--
 .../dirigible/database/views/_explorer.html   |   4 +-
 .../dirigible/database/views/_sql.html        |   9 +-
 .../META-INF/dirigible/home/index.html        |  38 +-
 .../META-INF/dirigible/home/js/home.js        |  38 +-
 .../META-INF/dirigible/monitoring/index.html  |  82 +--
 .../dirigible/monitoring/views/_jobs.html     |  31 +-
 .../dirigible/monitoring/views/_logs.html     |  30 +-
 .../monitoring/views/_messaging.html          |  13 +-
 .../dirigible/monitoring/views/_overview.html | 155 +++---
 .../monitoring/views/_processes.html          | 114 +++--
 .../dirigible/monitoring/views/_system.html   | 156 +++---
 .../META-INF/dirigible/partner/index.html     | 114 +++--
 .../META-INF/dirigible/partner/js/appShell.js |   3 +
 .../dirigible/partner/views/_settings.html    |  55 +-
 .../META-INF/dirigible/personal/index.html    | 124 ++---
 .../dirigible/personal/js/appShell.js         |   3 +
 .../dirigible/personal/views/_settings.html   |  55 +-
 .../resources/static/tenant-selection.html    |  78 ++-
 .../README.md                                 |   7 +-
 .../reference/alpinejs/SKILL.md               |   2 +
 .../ui/admin/admin-index.html.template        |  51 +-
 .../ui/my/my-calendar-view.html.template      |   6 +-
 .../ui/my/my-document-view.html.template      |  94 ++--
 .../ui/my/my-form-view.html.template          |  24 +-
 .../ui/my/my-list-view.html.template          |  10 +-
 .../partner-document-view.html.template       |  30 +-
 .../partner/partner-form-view.html.template   |  22 +-
 .../partner/partner-list-view.html.template   |   8 +-
 .../calendar/calendar-view.html.template      |   6 +-
 .../document/document-view.html.template      | 160 +++---
 .../ui/perspective/list/page.js.template      |  14 +
 .../ui/perspective/list/view.html.template    |  50 +-
 .../manage/form-view.html.template            |  68 +--
 .../perspective/manage/list-page.js.template  |  13 +
 .../manage/list-view.html.template            |  81 +--
 .../master/master-page.js.template            |  13 +
 .../master/master-view.html.template          |  78 +--
 .../report-file/index.html.template           |  63 ++-
 .../report-file/report.js.template            |  22 +-
 .../report/chart-view.html.template           |   4 +-
 .../report/table-view.html.template           |   6 +-
 .../slots/slots-view.html.template            |   6 +-
 .../ui/shell/dashboard.html.template          |  49 +-
 .../ui/shell/index.html.template              | 138 ++---
 .../ui/shell/settings.html.template           |  17 +-
 .../ui/translations.json.template             |   2 +-
 .../ui/index.html.template                    |  41 +-
 .../template-html/index.html.template         |  11 +-
 npm/test/src/form.js                          |   2 +-
 pom.xml                                       |  10 +-
 .../tests/api/HarmoniaContractIT.java         | 476 ++++++++++++++++++
 .../tests/api/IntentEmissionCoverageIT.java   |  10 +-
 .../tests/ui/tests/MonitoringShellIT.java     | 119 ++++-
 79 files changed, 2504 insertions(+), 1558 deletions(-)
 delete mode 100644 HARMONIA_2_MIGRATION.md
 create mode 100644 components/engine/engine-intent/src/test/java/org/eclipse/dirigible/components/intent/parser/WidgetSizeIntentTest.java
 create mode 100644 tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaContractIT.java

diff --git a/.claude/docs/harmonia-ui.md b/.claude/docs/harmonia-ui.md
index 14f920ff10d..944a019a225 100644
--- a/.claude/docs/harmonia-ui.md
+++ b/.claude/docs/harmonia-ui.md
@@ -1,38 +1,46 @@
 ## Harmonia runtime UI (`template-application-ui-harmonia-java` + `template-form-builder-harmonia`)
 
-The runtime UI stack for generated applications: they render as a self-contained **Alpine.js + Harmonia SPA** (client-routed by Pinecone in hash mode, no iframes/`postMessage` hubs), served at `/services/web/<project>/gen/<model>/index.html`, talking to the **reused** generated Java REST controllers over a `fetch` client. The AngularJS IDE is untouched; the application layer now ships this stack only. `template-application-ui-harmonia-java` (registered on `platform-templates` as "Application - UI (Harmonia) - Java") emits the view types (list, manage, setting, master-detail, reports) + built-in **Process Inbox** (`/inbox`) and **Documents** (`/documents`) shell sections + inline process-task surfacing; `template-form-builder-harmonia` ("Harmonia Generator from Form Model", extension `form`) is the runtime form generator. The whole stack — Alpine 3.15.11, Harmonia 2.6.0, Lucide 1.8.0 — is embedded as **webjars** via `components/resources/application-core` (report charts use Harmonia's own native `x-h-chart-*` SVG charts; the `chart.js` webjar was dropped with the AngularJS dashboard shell) (incl. Pinecone Router — `org.webjars.npm:pinecone-router`, served version-less at `/webjars/pinecone-router/dist/router.min.js`; it was vendored until the 7.5.2 webjar existed). Developed on PR [#6078](https://github.com/eclipse-dirigible/dirigible/pull/6078).
-
-**Component reference:** the full codbex-harmonia directive catalog (all `x-h-*` components incl. the `x-h-select` combobox contract, theming, layout) lives **upstream** — the docs site <https://codbex.com/harmonia/> and the agent-readable skill <https://github.com/codbex/harmonia/blob/main/skills/harmonia/SKILL.md> (formerly mirrored in-repo under `reference/harmonia/`; that copy was removed to avoid drift — always consult the upstream, version-matched to `harmonia.version` in the root `pom.xml`). [`.../reference/alpinejs/`](components/template/template-application-ui-harmonia-java/reference/alpinejs/) still covers the Alpine patterns (routing, page components), mirrored from `codbex-athena-app`, the reference app this stack was adopted from. Read them before changing Harmonia markup.
-
-**Detailed guides:** [`components/template/template-application-ui-harmonia-java/README.md`](components/template/template-application-ui-harmonia-java/README.md) (the SPA shell, view-type parity checklist, the master-detail detail registry, process-tasks store) and [`components/template/template-form-builder-harmonia/README.md`](components/template/template-form-builder-harmonia/README.md) (the neutral `formController(ctx)` contract). The repo-root [`HARMONIA_RUNTIME_PLAN.md`](HARMONIA_RUNTIME_PLAN.md) is the design doc + implementation status. **Gotchas that already burned someone — read before changing the templates:**
-
-- **REST path must use the Java-sanitised names.** `restBase` is `/services/java/<project>/gen/${javaGenFolderName}/api` and each page's `apiPath` is the **relative** `/${javaPerspectiveName}/<Entity>Controller`; the fetch client prepends `restBase` exactly once. Use `javaGenFolderName`/`javaPerspectiveName` (e.g. `sales-order` → `sales_order`), **not** the raw `genFolderName`/lowercased perspective — the generated backend lives under the sanitised Java package. (Phase 0/1 only passed because `edm` needs no sanitising.)
-- **`{ baseUrl: '' }` means "URL is absolute, prepend nothing".** The fetch client checks `opts.baseUrl !== undefined`, not truthiness — passing `''` with a relative path (or omitting it with an absolute path) is the classic doubled-URL bug (`/api/services/java/.../api/...`). Entity pages use a relative `apiPath` and **no** override; absolute URLs (relationship dropdowns, the detail registry) pass `{ baseUrl: '' }`.
-- **Date/time widgets need conversion both ways.** The form `toPayload()` turns an HTML `date`/`datetime-local` value into a full ISO instant (`…Z`) so a Jackson `java.time.Instant`/`Timestamp` field binds (empty→`null`, a bare `TIME` passes through); `toDateInput()` slices the backend's ISO value back to what the widget expects on edit. Mirrors the AngularJS stack's `new Date(value)`.
-- **Master-detail is registry-driven.** A master page renders one `detailPanel` per `App.detailsFor(<master>)` entry; each detail self-registers via `App.registerDetail(...)` (relative `apiPath`), so masters never enumerate details at generation time. The detail list filters via the controller's `?<masterEntityId>=<id>` query (built into the reused rest-java controller for `*_DETAILS` layouts).
-- **The `.form` runs the existing AngularJS `code` via compat shims, and the page is self-contained.** `template-form-builder-harmonia` runs the `.form` `code` as the body of `formController(ctx)` (`ctx.{model, params, http, task, notify, close}`) and defines `$scope`/`$http`/`NotificationHub`/`DialogHub` shims so intent-generated AngularJS `.form` code runs **unchanged** (no migration needed). The page loads only `form.js` + its own minimal fetch client (no `window.App`), because a BPM task form opens standalone in an iframe where the SPA shell assets are absent — an earlier `../../js/...` reference 404'd and left `App` undefined.
-- **A standalone page must bootstrap `App.config.projectName` before loading `i18n.js`, or every module-authored label silently stays English.** `i18n.js` reads the project namespace off `App.config.projectName` — which only the SPA shell sets — and without it fetches just the platform `application-core` chrome catalog, so the page's own `<tprefix>.t.*` keys never resolve. The failure is invisible: the baked English literals render, no console error, and every shell page around the iframe IS translated. Both standalone pages (the report page and, since [#6692](https://github.com/eclipse-dirigible/dirigible/issues/6692), the task form) therefore set it in a one-line inline script before the `<script src=".../services/i18n.js">`. Two more rules the task-form conversion paid for: a value that is MATCHED against data (a status step's `label`, compared to the record's status) stays untranslated and gets a separate translated `title`, and an authored label must be escaped where it is interpolated into a `T()` call — **both the literal and the key derived from it**, since `translationId` strips only spaces and `_ . :`, so an apostrophe would close the JS string and break the whole Alpine expression.
-- **Intent glue handlers are self-describing `@Component`s, not class-level `@Listener`/`@Scheduled`.** Those SDK annotations are `@Target(METHOD)`; the rollup/notification/integration/job templates in `template-application-events-java` were converted to `@Component implements MessageHandler/JobHandler` with `destination()`/`kind()`/`cron()` (matching the Trigger template) — class-level use fails `javac` with "annotation interface not applicable".
-- **The full-stack model template MUST merge the schema layer.** `template.js` = `template-application-schema` + REST-java + Harmonia UI. The client-Java `JavaEntityManager` only *registers* an `@Entity` against an existing table — it never CREATES one; `TableCreateProcessor` (the schema sync) does. Drop the schema and a freshly generated app has **no tables** → CRUD + CSVIM seeds fail ("Table metadata was not found for table [...]"). It only *looked* fine when a prior AngularJS/schema generation had already created them ("table kept in place").
-- **Process trigger writes its process stamp via a targeted update (no event, no full row).** Starting a process on `onCreate` writes the instance id back; doing it through the normal `update()` republishes `<entity>-updated` and spuriously fires every onUpdate reaction (e.g. the member-email notification fired the instant a loan was created) — and even the silent `updateWithoutEvent()` was a **full-row merge of the trigger's stale snapshot**, which raced concurrent writes (line items recalculating the header totals milliseconds after create, a start-step status set) and silently reverted them. The trigger writes it with one `repository.updateProperties(id, {"ProcessIds": …, "ProcessId": processId})` — an SDK `JavaRepository`/`JavaEntityStore` HQL mutation touching only the named columns; no audit stamping, no events, nothing else to clobber, while the generated repository's own bookkeeping on that path (the `history:` trail entry attributed to SYSTEM, the stored `label:` Name) still runs. What must NOT run is a gate that can REFUSE it: the generated repository skips `enforceChecks` for a targeted write that touches only **platform-owned** columns (`SYSTEM_PROPERTIES` = `ProcessId`, `ProcessIds`; `touchesAuthoredColumn(values)`), because a document check has no opinion about which process handles the record and the instance is already running by then — an unbalanced or item-less document that records its process beats one that does not. Everything a person or a workflow authors keeps the gate. **Everything that can happen before the start does**, because the stamp IS the at-most-once guard and the two commits are independent: the minted `businessKeyStrategy` value is persisted BEFORE `Process.start` (the instance is started with that key), and every process variable — the `__entityUrl`/`__entityId` locators, the FK locators, `__personalUser` — rides the **start payload** rather than a `setVariable` afterwards (they are all known up front; a process without a wait state runs to its end inside `start`, and a `setVariable` against a finished instance throws). The write-back is then the only post-start step: a `null` instance id (the platform swallows a failed start) is logged and not written, and if the write does not land — the row was deleted, or it threw — the just-started instance is **cancelled** (`Process.cancel`) and the failure re-thrown, because a running instance no record points at is invisible to the application while its user tasks still reach an inbox (#6815). The trigger guard is **per process**: `ProcessStamps.has(entity.ProcessIds, "<Process>")` over the `ProcessIds` column's `Process=instanceId` pairs (#6862). A record can legitimately be the subject of several flows — "on create, identify it; when identified, run dunning" is what the `onTransition` trigger axis invites — and the old record-wide `ProcessId != null && !isBlank()` guard made every process indistinguishable from every other, so the follow-up flow silently never started for a record the first flow had already stamped. `ProcessId` stays as the most recent instance, which is what the task UI correlates on; a `wait` and an `abortOn` read their OWN instance out of `ProcessIds` (`ProcessStamps.idFor`) instead. A record carrying only the legacy `ProcessId` counts as already handled — today's behaviour, so an upgrade cannot start a second instance of a flow that is already running. An empty string still must not count as "already started" (a form sends one for an untouched system field).
-- **Documents/CMS path contract (`/services/documents`, `engine-cms`'s `DocumentsEndpoint`).** Java since the GraalJS backend was retired — the old `/services/js/documents/api/documents.js` is **gone**, and with it the `?path=/` 400 quirk (`/` now lists the root, as does omitting the parameter). Still true: the CMS query layer does **not** decode an encoded slash, so build `?path=` with **literal slashes** — encode each segment, not the whole path (`p.split('/').map(encodeURIComponent).join('/')`); a blanket `encodeURIComponent` turns `/`→`%2F` and every subfolder/file 400s. Rename is `PUT {path,name}`; delete is `DELETE` with a JSON body of absolute paths; create a folder with `POST /folder {parentFolder,name}`; upload is multipart under the part name `file`; preview/download are `GET /preview|/download?path=`; zip is `GET|POST /zip?path=`. `__internal` is never listed or addressable (403), and `__EXPORTS` needs ADMINISTRATOR/OPERATOR. Both UIs (the AngularJS `documents/js/documents.js` perspective and the shared Harmonia `application-core/shell/.../documentsPage.js`) speak exactly this contract; content types can be overridden by contributing a `DocumentContentTypeResolver` bean (the Java replacement for the `ui-documents-content-type` extension point).
-- **Edit forms: match the value to the input shape (dates + comboboxes).** The Java REST controller serializes `java.time` via Jackson as **arrays** (`LocalDate` → `[y,m,d]`, `LocalDateTime` → `[y,m,d,h,mi,s,ns]`) and `Instant` as a **numeric epoch** — NOT ISO strings — so the form's `toDateInput()` handles arrays/numbers/strings (a naive `String(v).slice()` yields garbage → empty date controls on edit). And a relationship FK comes back as a **number** while an option's `data-value` is a string (HTML attribute), so the value must be **stringified on load** (`form.X = String(record.X)`) or the `x-h-select` matches no option and renders empty on edit — the same `String(...)` the codbex-athena-app edit pages use.
-- **Combobox = the Harmonia `x-h-select` contract; the Harmonia skill is the primary source of truth** (<https://github.com/codbex/harmonia/blob/main/skills/harmonia/SKILL.md>, version-matched to `harmonia.version` in the root pom) — existing code is only an example, and an example that contradicts the skill is wrong. `x-model` on `x-h-select-input` holds the VALUE (the option `data-value`, a string); the directive hides that input and appends a visible `button[role=combobox]` trigger (`data-slot="select-input"`) showing the matched option's label — Selenide finders and CSS target the button, and note the search's generated input also carries `role=combobox`. Use `data-filter="contains"` + an in-dropdown `x-h-select-search` for searchable pickers; options go via `x-for` with `:data-value="String(opt.value)"` **inside an `x-h-select-list`** under `x-h-select-content` — the list owns the `role=listbox`, padding and vertical scrolling (the content is `overflow-hidden`), so options placed directly in the content render clipped with no scrollbar. Clearing a selection is `data-clearable="true"` on `x-h-select` (re-clicking the selected option clears it). A `disabled` `x-h-select-input` disables the trigger with it, but the generated form still renders a **context-locked** parent FK as something else entirely (`<template x-if>` around the whole `x-h-select`) — showing the referenced record's label beats a greyed-out combobox.
-- **A parent FK implied by the navigation context renders locked, not free (#6551).** When a child is created or edited from inside its parent — a master's detail panel, a create-from flow — the opening URL names the parent FK (`?<Fk>=<id>`), and the generated manage form renders that relation as the referenced record's label, read-only (`isContextLocked(name)` / `contextLabel(value, options)` on `baseFormPage`), never as a dropdown that could re-point the record mid-flow. The shared `detailPanel` therefore carries the master FK on **edit/preview** as well as create — on edit it presets nothing (the record is authoritative), it only declares the context. A form opened with no such param (the entity's own top-level create) keeps free selection. This supersedes #6513's blanket hide of `relationshipType="COMPOSITION"`: showing which parent the record is filed under is the point; hiding the field only removed the affordance.
-- **A generated page never shows `e.message`; the shared `apiErrors` gate is the only path from a REST error body to a banner.** `ApiError.message` is the developer-facing text (`api.js`), and with `spring.web.error.include-message=always` a 500 carries the raw Hibernate/JDBC sentence - #7151 was that sentence presented as a refusal, naming a form field on the strength of a fault. `App.services.apiErrors.refusalText` quotes the server only for a 400/409 that is one short sentence without markup; `refusalMessageFor(e, fallback)` is the banner one-liner, `namedProperty` + `messageWithLabels` the per-field pair (`baseFormPage.applyApiError`, mirrored on the my/partner form + document pages and the line dialogs). It took five rounds to reach every surface (#7062, #7151, #7152, #7242, #7263 - the admin page, the my/partner list + calendar loads, the standalone report page and the task form were each missed once), so `IntentEmissionCoverageIT` now walks EVERY emitted `.js`/`.html` under `gen/` and fails on `(e && e.message)` / `String(e.message`. A standalone page (admin, report, task form) loads `/services/web/application-core/shell/js/services/apiError.js` by absolute URL - it depends on nothing but `window.App` - and hands the gate an `{ httpStatus, errorMessage }` shaped like `ApiError`; a raw `fetch` never reaches the banner directly. The developer-facing text goes to `console.error`, on the admin surface too: an administrator is one keystroke from it, and the server log holds it anyway.
-- **Theme goes through Harmonia's own colour-scheme API — do not hand-toggle `.dark`.** `harmonia.min.js` manages the `.dark` class itself from `window.Harmonia.get/setColorScheme('light'|'dark'|'auto')`, persisted to localStorage key `codbex.harmonia.colorMode`; its default is `auto` (follow the OS). The shell's top-right switch (`appShell.js toggleTheme()`) calls `Harmonia.setColorScheme`, and a head bootstrap defaults the key to `light` on first run. Because **every** page loads harmonia.min.js and reads the same key, the shell and the standalone form/report iframes all theme consistently — this is why the task form no longer renders dark on a light shell (an earlier custom `dirigible.harmonia.theme` key + manual `.dark` toggle only fixed the shell, not the iframes). Settings is pinned to the **sidebar footer** (bottom-left, like codbex-athena-app); Reports is a single entry **discovered at runtime** (a `reports` store walks the project registry tree for `*/reports/*/index.html`, since intent reports are standalone pages in a separate gen folder the shell can't see at generation time). The intent recipe defaults (`IntentSettings.scaffold`) point model/form/report at the Harmonia templates; glue stays the neutral client-Java template.
-
-- **Velocity vs Alpine `$` is the #1 trap in the Harmonia shell templates.** The shell's `index.html.template` and `dashboardPage.js.template` are **generated via Velocity** (they use `$models`/`$entity`/`$appIcon`), and Velocity parses `$`-references **everywhere — including inside HTML comments and JS string bodies**. An Alpine magic like `$store`/`$notifications`/`$nextTick` is fine as a *bare reference* (undefined → Velocity passes it through literally), but the moment it's followed by a **method call with args or trailing statements** Velocity tries to parse it and the generation 500s with `Encountered "..."`. Three real burns: `$store.processTasks.openTask(n.task); n.unread=false` in an `@click` (fixed by moving the logic to an `appShell.openNotification(n)` method and calling that), `$notifications.add({ template:'toast', data:{ message, variant } })` **in an HTML comment** (Velocity choked on `{ message,…}` — reworded the comment), and `$store...filter(r => r.dashboard !== false)` in a getter (escaped via `#set($dollar='$')` + `${dollar}store`, the same trick `report.js.template` uses for `$limit`/`$nextTick`). Rule: in a Velocity-generated file keep `$store.x` to bare refs / no-arg calls, escape with `${dollar}` for anything richer, or move it into a copied (non-Velocity) JS file / an appShell method.
-- **Put cross-scope shell state in an Alpine *store*, not the `app` component.** `theme` lived on the `app` component (`x-data="app"`) and its toolbar `x-show="theme !== 'dark'"` threw **"theme is not defined" on every load** — eager `x-show` evaluation in a scope Alpine hadn't resolved yet (other `app` props on the same toolbar were fine; only the eager ones failed, intermittently). Moved it to `$store.theme` (`{ value, toggle() }`, backed by `Harmonia.set/getColorScheme`); stores resolve from any scope at any time, like `$store.notifications`/`currentUser`/`reports`/`processTasks`. (This **supersedes the `appShell.toggleTheme()` note above**.)
-- **Embedded iframes (report/form preview, task form, dashboard report tiles) only theme at load.** Harmonia applies the shared `codbex.harmonia.colorMode` key when the iframe loads; toggling the shell theme afterwards left them stale until a full refresh. Fix in **every** standalone/embeddable page — `report-file/index.html`, form-builder `ui/index.html`, **and the per-project Harmonia shell `ui/shell/index.html` itself** (it is embedded in the application-shell iframe and in the FK "Add new" dialog, and hosts the list/manage/master-detail/document views, so the one listener makes all of them follow a parent theme switch): a `storage` event listener (it fires in same-origin iframes when the **parent** changes localStorage) that calls `Harmonia.setColorScheme`. **Do NOT gate on `Harmonia.getColorScheme() !== scheme`** — it reads the same key which already holds the new value, so it always skips and nothing re-applies; track a module-level `lastApplied` scheme instead (re-apply once, no echo loop).
-- **An icon carrying an Alpine directive must be `<svg x-h-lucide>`, never `<i>`.** Harmonia refuses the combination *by throwing* — `"x-show" cannot be used on a <i> placeholder, because the element is replaced by the rendered svg and the binding would be lost` — and the exception is **not local to the icon**: it aborts the enclosing `x-for`, so every item after the first renders with no name, no id, no icon and unevaluated bindings. That is how the tenant picker (`security-oauth2/.../static/tenant-selection.html`) shipped a list that showed only its first tile, invisible until it was rendered with real data. Two corollaries from the same page: prefer `x-if` over `x-show` on an element Harmonia also styles (they fight over `display`), and give a branding logo an `@error` handler so an unresolved one hides instead of leaving the browser's broken-image glyph.
-- **`x-show` only hides — Alpine still evaluates the inner bindings.** The master-detail detail pane is `x-show="selected"`, but before a row is selected `selected` is null and `x-text="displayValue(selected.Email)"` threw `Cannot read properties of null`. Use optional chaining (`selected?.<field>`) in the property panes (list/manage/master). Same reason the report-tile preview iframes are `<template x-if>` not `x-show`.
-- **Split-panel sizing is `data-size` (a `%` or px), NOT `data-default-size`** — `data-default-size` isn't referenced anywhere in harmonia 2.1.0 (silently 50/50). Both panes need it (`data-size="60%"` + `data-size="40%"`). To collapse a pane until needed (detail-pane-until-selection), bind `:data-hidden="!selected"` on the panel — the same mechanism the sidebar's collapse uses.
-- **`x-h-field` stretches every DIRECT child to full width, so a bare `x-h-checkbox` renders as an empty text box.** The default (vertical) orientation adds `vbox [&>*]:w-full`, and the checkbox's own bordered square (`aspect-square border bg-input-inner size-5`) becomes a full-width bordered rectangle — visually identical to an empty text input. That is #7103: a `type: boolean` field "rendered as a text input" on the generated personal form while the emitted markup was a correct `x-h-checkbox` all along, so grepping the template for the CHECKBOX branch proved nothing and the widget mapping was never at fault. Put the checkbox — or any intrinsically-sized control — inside a wrapper (`<div class="hbox items-center gap-3">`, which absorbs the stretch) or set `data-orientation="horizontal"` on the field. The power `manage/form-view` and `template-form-builder-harmonia` always did; the personal/partner/admin form views and every item/prompt dialog did not.
-- **`x-h-toolbar-title` bakes in `whitespace-nowrap text-ellipsis overflow-hidden`** — in a flex toolbar an entity title shrank to "Bo…"/"Mem…". Add `class="shrink-0"` to entity-name titles (list/manage/master/form/report) so they keep their natural width; leave the *dynamic* inbox titles truncating.
-- **The shell is richer than the original skeleton (all model/runtime-driven):** a **home Dashboard** (`/` and `/dashboard`, `dashboardPage` + `_dashboard.html`) with report-attached KPI widget tiles (`reports[].widget`) + custom widget tiles (`widgets:`) and a per-report preview tile (the report page in `?preview=1` mode — toolbar/pagination hidden, 5 rows) — there are no auto per-entity record-count tiles; **sidebar sections** Application / Entities / **Reports** (one entry per runtime-discovered report, selecting sets `$store.reports.selected` and opens it embedded on `/reports`); a route-derived **breadcrumb** (`navLabels` from a generated `window.__harmoniaNav` map so the entity crumb matches the sidebar); and a top-right **user menu** (name from `/services/js/platform-core/services/user-name.js`, logout → `/logout`), **notifications bell** (the `notifications` store; `processTasks.syncTasks()` surfaces BPM tasks as bell items, the store polls every 30s + on `pinecone:end` so they appear without a manual refresh), and the **theme** switch. Settings still pinned to the sidebar footer.
-- **`widgetSize` is now a plain integer column count (3/4/6/12), not a Fundamental CSS class.** The entity editor stores the number; Harmonia maps it to `grid-column: span N` (12 → `col-span-full`) on a 12-col form grid. Migration caveat: old `.edm` files with the legacy `fd-col-md--2 fd-col--3` string render a broken width class.
-- **Form typography conventions (generated views).** Read-only / system fields (`isReadOnlyProperty` — `ProcessId`, audit columns, `uuid`, any `readOnly: true` field — and audit) render in a headerless **`x-h-card`** above the action buttons (a framed details block like the master-detail card, no title), NOT as editable inputs: `x-h-card` > `x-h-card-content` with a `grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2`; each field a `vbox gap-0` with label `class="text-xs text-muted-foreground"` and value `class="text-sm"`, shown on edit and only when the value is populated. Wired in `manage/form-view` + `document/document-view` (master-detail reuses the manage form). **Document layout roles.** In a document (header-items) entity, a field with intent `documentTitle: true` → `widgetType="DOCUMENT_NUMBER"` renders in the form **title** (`'<DocLabel>'.toUpperCase() + ' ' + form.<number>`, e.g. "SALES INVOICE 00001231"), and a to-one relation with `documentStatus: true` → `widgetType="DOCUMENT_STATUS"` renders as a read-only **`x-h-badge` pill** in the title bar (text resolved from its dropdown options, colour from `statusVariant(text)` — a keyword→variant map: draft→outline, approved/accepted/active→positive, issued/sent→information, cancel/reject→negative, pending→warning). Both are pulled from the editable grid; the status keeps its dropdown lookup metadata so the pill can resolve the id→name. For secondary/muted labels (e.g. the document totals footer) use **`text-secondary-foreground`**, not `text-secondary` (the bare token is the surface colour, not the on-surface text colour — labels using it render near-invisible).
-- **The model-independent shell runtime is SHARED, not copied per project.** It lives once at `/services/web/application-core/shell/` (`components/resources/application-core/.../application-core/shell/`: `app.js`, `services/*`, `stores/*`, `components/layout/appShell.js`, base/page components, `css/app.css`, and the Inbox/Documents/Reports/notfound views). The generated per-project shell and the application shell both load it from there by absolute URL; `template-application-ui-harmonia-java` only **generates** the model-specific files (`index.html`, `config.js`, `dashboardPage.js`, `_settings.html`, `_dashboard.html`, per-entity pages). Do NOT re-add per-project copies of the shared files (`shell.js` no longer emits them). PR [#6094](https://github.com/eclipse-dirigible/dirigible/pull/6094).
-- **A BPM task's name travels with its translation key — the shell never derives one.** The Inbox, the notification bell and the app-wide task-form dialog are shared by every deployed app, so they cannot know which module's catalog holds a task's name: an Approve button stayed English on an otherwise fully translated app (#6522). So the generated `.bpmn` declares its module's catalog once, on the `<process>` element (`<flowable:property name="taskLabelCatalog" value="<project>:<model>-model.processes"/>`, minted by `IntentNaming.processTaskCatalog`), and `BpmInboxEndpoint` serves every task a `nameKey`/`processDefinitionNameKey` composed from it plus the BPMN id — which IS the authored step / process name, i.e. exactly how the catalog keys it. Read off the deployment-cached `BpmnModel`, resolved once per definition per request. Everything is decided at generation time; the client only renders `T(task.nameKey, task.name)` through the one rule on the `processTasks` store (`taskName` / `processName` / `taskLabel`) and adds the namespaces its tasks reference via `AppI18nAddNamespaces`. A process that declares no catalog (a hand-authored BPMN) keys nothing and renders the raw BPMN name, as before. **Do not reintroduce the per-project `processTaskKeys` reverse map** that `config.js` used to bake — it could only ever translate tasks from the hosting project, and two mechanisms for one label is how the shell surfaces got missed in the first place.
+The runtime UI stack for generated applications: they render as a self-contained **Alpine.js + Harmonia SPA** (client-routed by Pinecone in hash mode, no iframes/`postMessage` hubs), served at `/services/web/<project>/gen/<model>/index.html`, talking to the **reused** generated Java REST controllers over a `fetch` client. The AngularJS IDE is untouched; the application layer ships this stack only. `template-application-ui-harmonia-java` (registered on `platform-templates` as "Application - UI (Harmonia) - Java") emits the view types (list, manage, setting, master-detail, document, calendar, slots, reports) + built-in **Process Inbox** (`/inbox`) and **Documents** (`/documents`) shell sections + inline process-task surfacing; `template-form-builder-harmonia` ("Harmonia Generator from Form Model", extension `form`) is the runtime form generator. The stack is embedded as **webjars** via `components/resources/application-core` (`harmonia.version`, `alpinejs.version`, `lucide.version`, `pinecone-router.version`, `i18next.version` in the root `pom.xml`), served version-less through webjars-locator at `/webjars/<name>/dist/...`; a version bump is a pom-only change. Report charts use Harmonia's native `x-h-chart-*` SVG charts.
 
+### The Harmonia rules live upstream - the skill is the rule set
+
+**Do not write Harmonia markup from memory or from the examples already in this repo.** The single source of truth for every `x-h-*` directive, attribute, modifier, variant and utility class is the Harmonia skill, version-matched to `harmonia.version`:
+
+- Install it as a Claude Code plugin: `/plugin marketplace add codbex/harmonia` then `/plugin install harmonia@codbex`. The same files ship inside the `codbex__harmonia` webjar under `skills/harmonia/` (`SKILL.md`, `references/<component>.md`, `references/utility-classes.md`, `references/migration.md`) and in the `codbex/harmonia` repo.
+- Before a version bump read `references/migration.md` (breaking changes by version) and the CHANGELOG; before touching a component read its reference; before using a utility class confirm it is in `references/utility-classes.md` - a class Harmonia does not ship silently does nothing (use an inline `style` for a one-off value, a rule in the module's own `css/app.css` when several sites share it). Where an example in this repo contradicts the skill, the example is wrong.
+- Harmonia's example apps (`docs/public/templates/{granite-erp,onyx-chat,quartz-docs,slate,ember}` in the Harmonia repo) show the canonical composition of an app shell: sidebar destinations are `x-h-sidebar-menu-nav`, every icon is `<svg x-h-lucide role="presentation" data-lucide="...">`, dialogs pad through `x-h-dialog-content`, cards through their slots, the theme control is a Light / Dark / Auto radio menu.
+
+`HarmoniaContractIT` (`tests-integrations`, HTTP-only, in the PR smoke gate) is the guard: it reads the directive registry out of the webjar's `dist/harmonia.min.js` and the class allowlist out of its `skills/harmonia/references/utility-classes.md`, then scans every Harmonia shell page and the rendered output of the generated-app templates for an unregistered `x-h-*`, a non-shipped class, an `<i x-h-lucide>` placeholder or an unknown button/badge variant. A failure names the resource and the token.
+
+### Dirigible-specific facts the skill cannot know
+
+- **One shared shell runtime, never copied per project.** It lives once at `/services/web/application-core/shell/` (`components/resources/application-core/.../application-core/shell/`: `app.js`, `services/*`, `stores/*`, `components/layout/appShell.js`, base/page components, `css/app.css`, the Inbox/Documents/Reports/notfound views). The generated per-project shell and the platform shells (`resources-application`, `-admin`, `-personal`, `-partner`, `-monitoring`, `-database`, `-builder`, `-home`, the tenant picker in `security-oauth2`) load it by absolute URL; `template-application-ui-harmonia-java` only **generates** the model-specific files (`index.html`, `config.js`, `dashboardPage.js`, `_settings.html`, `_dashboard.html`, per-entity pages). Do NOT re-add per-project copies of the shared files.
+- **Theme = Harmonia's colour-scheme API, three modes.** Harmonia persists the selection under `codbex.harmonia.colorMode` (default `auto`, the OS scheme), applies the `.dark` class itself and keeps every same-origin frame and browser tab in sync itself - nothing in this repo seeds the key or listens to `storage` events, and nothing may toggle `.dark` by hand. The shared `$store.theme` (`shell/js/stores/theme.js`) exposes `mode` (`light|dark|auto`, a getter/setter over `Harmonia.get/setColorScheme`) and `icon`, and re-syncs through `Harmonia.addColorSchemeListener((scheme, mode) => ...)`; every toolbar carries the same control - an icon button that is an `x-h-menu-trigger.dropdown` opening three `x-h-menu-radio-item`s bound to `$store.theme.mode`. Pages that load no shell runtime (home, tenant picker) carry the same getter/setter locally.
+- **Toasts go through the public `$notifications` magic.** A magic lives on an Alpine component scope, so the root component that renders the `x-h-notification-overlay` hands it to the shared store once at init (`Alpine.store('notifications').attachToaster(this.$notifications)`); `announce()` records the bell entry first and raises the toast through `add({ template: 'toast', position, timeout, data })`. Never reach into Harmonia's private `_h_notifications` store.
+- **`format.js` (`window.HarmoniaFormat`) stays the date/number engine**, not `x-h-date-format`: it preserves Java `DecimalFormat`/`DateTimeFormatter` pattern semantics and is dependency-free for the BPM task-form iframe. `HarmoniaDateFormatIT` asserts the `x-h-date-picker-popup="HarmoniaFormat.pickerConfig()"` contract. `window.HarmoniaFormat`, `window.HarmoniaCalendar` and `window.HarmoniaBranding` are Dirigible globals that only share the word; Harmonia itself sets only `window.Harmonia`.
+- **`codbex.harmonia.language` is shared as a localStorage key only.** Dirigible drives i18next through its own `shell/js/services/i18n.js` and does not load `harmonia-i18next.min.js`, so `x-h-translate`, `$t` and `$i18n` are unavailable in the shells; use `T(key, fallback)`.
+- **Velocity vs Alpine `$` is the #1 trap in the generated shell templates.** `index.html.template` and `dashboardPage.js.template` are rendered by Velocity, which parses `$`-references everywhere - inside HTML comments and JS string bodies too. An Alpine magic like `$store`/`$notifications`/`$nextTick` is fine as a bare reference, but a method call with arguments or trailing statements makes Velocity choke (`Encountered "..."`). Keep `$store.x` to bare refs / no-arg calls, escape with `#set($dollar='$')` + `${dollar}store` for anything richer, or move the logic into a copied (non-Velocity) JS file or an appShell method.
+- **Put cross-scope shell state in an Alpine store, not the `app` component.** An eager `x-show` on a toolbar element evaluated before the `app` scope resolved threw "theme is not defined" intermittently; stores (`$store.theme`, `$store.notifications`, `$store.currentUser`, `$store.reports`, `$store.processTasks`) resolve from any scope at any time.
+- **`x-show` only hides - Alpine still evaluates the inner bindings.** Use optional chaining (`selected?.<field>`) in property panes that render before a selection exists, and `<template x-if>` for embedded preview iframes.
+- **Authored labels are escaped for every JS/Alpine interpolation (#7294).** `ModelParameterProcessor` produces `widgetLabelJs`; the templates set `$plabel`/`$clabel`/`$elabel` from it and use it in every `T(...)` argument, `:placeholder`, column/label map and chart series name. Never substitute the raw `widgetLabel` inside an expression: an apostrophe would close the JS string and break the whole Alpine expression.
+- **A boolean field's checkbox sits in a plain box** (`<div class="hbox items-center gap-3"><span x-h-checkbox>...`) because an `x-h-field` stretches a direct child to full width (#7103); `IntentEmissionCoverageIT` asserts the wrapper on the power and the personal form.
+- **Read-only / system fields render in a headerless `x-h-card` above the action buttons** (`x-h-card` > `x-h-card-content` with a `grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2`; label `text-xs text-muted-foreground`, value `text-sm`; shown on edit and only when populated) - wired in `manage/form-view` + `document/document-view`. **Document layout roles:** a field with intent `documentTitle: true` -> `widgetType="DOCUMENT_NUMBER"` renders in the form title, a to-one with `documentStatus: true` -> `widgetType="DOCUMENT_STATUS"` renders as a read-only `x-h-badge` pill in the title bar (`statusVariant(text)` maps keywords to the badge variants).
+- **`widgetSize` is a plain integer column count 1..12** (the intent's `size:`, validated at parse), mapped to `sm:col-span-N` on the 12-column form grid. Old `.edm` files with the legacy Fundamental string (`fd-col-md--2 fd-col--3`) render a broken width class.
+- **The document conversation thread** (`documentItemsLayout: chat`) is `x-h-bubble` messages (`data-align` by author, `warning` variant for an internal memo) in a `role="log"` container, with an `x-h-input-group` composer whose textarea keeps `x-model="chatDraft"` and whose send button calls `sendMessage(chatDraft)` - both asserted by `IntentEmissionCoverageIT` and walked by the Playwright `my.js` flow.
+- **The shell is model/runtime-driven:** a home Dashboard (`/`, `/dashboard`) with report-attached KPI widget tiles + custom widget tiles + per-report preview tiles (no auto per-entity record-count tiles); sidebar sections Application / Entities / Reports (reports are discovered at runtime by the `reports` store); a route-derived breadcrumb (`navLabels` from the generated `window.__harmoniaNav`); a user menu, the notifications bell (the `notifications` store; `processTasks.syncTasks()` surfaces BPM tasks, polled every 30 s + on `pinecone:end`) and the theme menu; Settings pinned to the sidebar footer.
+
+### Generated-app contracts (not Harmonia, but the templates depend on them)
+
+- **REST path must use the Java-sanitised names.** `restBase` is `/services/java/<project>/gen/${javaGenFolderName}/api` and each page's `apiPath` is the **relative** `/${javaPerspectiveName}/<Entity>Controller`; the fetch client prepends `restBase` exactly once. Use `javaGenFolderName`/`javaPerspectiveName` (e.g. `sales-order` -> `sales_order`), not the raw `genFolderName`/lowercased perspective.
+- **`{ baseUrl: '' }` means "URL is absolute, prepend nothing".** The fetch client checks `opts.baseUrl !== undefined`, not truthiness - passing `''` with a relative path (or omitting it with an absolute path) is the classic doubled-URL bug. Entity pages use a relative `apiPath` and no override; absolute URLs (relationship dropdowns, the detail registry) pass `{ baseUrl: '' }`.
+- **Date/time widgets need conversion both ways.** `toPayload()` turns an HTML `date`/`datetime-local` value into a full ISO instant so a Jackson `java.time.Instant`/`Timestamp` field binds (empty -> `null`, a bare `TIME` passes through); `toDateInput()` slices the backend's value back - and the Java controller serializes `java.time` as **arrays** (`LocalDate` -> `[y,m,d]`, `LocalDateTime` -> `[y,m,d,h,mi,s,ns]`) and `Instant` as a numeric epoch, so `toDateInput()` handles arrays/numbers/strings. A relationship FK comes back as a **number** while an option's `data-value` is a string: stringify on load (`form.X = String(record.X)`) or the `x-h-select` matches no option.
+- **Master-detail is registry-driven.** A master page renders one `detailPanel` per `App.detailsFor(<master>)` entry; each detail self-registers via `App.registerDetail(...)` (relative `apiPath`); the detail list filters via the controller's `?<masterEntityId>=<id>` query.
+- **A parent FK implied by the navigation context renders locked, not free (#6551).** When the opening URL names the parent FK (`?<Fk>=<id>`), the form renders that relation as the referenced record's label, read-only (`isContextLocked(name)` / `contextLabel(value, options)` on `baseFormPage`); the shared `detailPanel` carries the master FK on edit/preview as well as create.
+- **The `.form` runs the existing AngularJS `code` via compat shims, and the page is self-contained.** `template-form-builder-harmonia` runs the `.form` `code` as the body of `formController(ctx)` and defines `$scope`/`$http`/`NotificationHub`/`DialogHub` shims; the page loads only `form.js` + its own minimal fetch client, because a BPM task form opens standalone in an iframe where the SPA shell assets are absent.
+- **A standalone page must bootstrap `App.config.projectName` before loading `i18n.js`**, or every module-authored label silently stays English (the report page and the task form set it in a one-line inline script). A value MATCHED against data (a status step's `label`) stays untranslated and gets a separate translated `title`.
+- **A generated page never shows `e.message`; the shared `apiErrors` gate is the only path from a REST error body to a banner** (`refusalText` / `refusalMessageFor` / `namedProperty` + `messageWithLabels`; standalone pages load `shell/js/services/apiError.js` by absolute URL). `IntentEmissionCoverageIT` walks every emitted `.js`/`.html` under `gen/` and fails on `(e && e.message)` / `String(e.message`.
+- **Intent glue handlers are self-describing `@Component`s, not class-level `@Listener`/`@Scheduled`** (those SDK annotations are `@Target(METHOD)`).
+- **The full-stack model template MUST merge the schema layer** (`template.js` = `template-application-schema` + REST-java + Harmonia UI): the client-Java `JavaEntityManager` only registers an `@Entity` against an existing table, `TableCreateProcessor` creates it.
+- **The process trigger writes its process stamp via a targeted update (no event, no full row)**: `repository.updateProperties(id, {"ProcessIds": ..., "ProcessId": processId})` after `Process.start`, with the minted `businessKeyStrategy` value persisted before the start and every process variable riding the start payload; a `null` instance id is logged and not written; a failed write-back cancels the just-started instance (#6815); the guard is per process over `ProcessIds` (`ProcessStamps.has`, #6862) and the generated repository skips `enforceChecks` for a targeted write that touches only platform-owned columns.
+- **Documents/CMS path contract (`/services/documents`, `engine-cms`'s `DocumentsEndpoint`).** The CMS query layer does not decode an encoded slash, so build `?path=` with literal slashes (`p.split('/').map(encodeURIComponent).join('/')`). Rename is `PUT {path,name}`; delete is `DELETE` with a JSON body of absolute paths; create a folder with `POST /folder {parentFolder,name}`; upload is multipart under `file`; preview/download are `GET /preview|/download?path=`; zip is `GET|POST /zip?path=`. `__internal` is never listed (403), `__EXPORTS` needs ADMINISTRATOR/OPERATOR. Content types can be overridden with a `DocumentContentTypeResolver` bean.
+- **A BPM task's name travels with its translation key - the shell never derives one.** The generated `.bpmn` declares its module's catalog once on the `<process>` element (`taskLabelCatalog`, minted by `IntentNaming.processTaskCatalog`); `BpmInboxEndpoint` serves every task a `nameKey`/`processDefinitionNameKey`; the client renders `T(task.nameKey, task.name)` through the `processTasks` store. Do not reintroduce a per-project `processTaskKeys` reverse map.
diff --git a/.claude/docs/shells.md b/.claude/docs/shells.md
index d9f89d45dd6..0fc20a8f562 100644
--- a/.claude/docs/shells.md
+++ b/.claude/docs/shells.md
@@ -13,7 +13,7 @@ The loop: chat → `POST /services/ide/intent/agent` → **re-validate the propo
 **The one button** (`js/services/pipeline.js`, the `publish` store) runs save → **Problems baseline** → `/intent/generate` (which generates the models AND the code from them in that one call, reporting each recipe's outcome in `codeGenerations`) → publisher → healthcheck poll + **Problems diff filtered to `/<project>`**. That diff is the only honest "published clean" signal — publishing is synchronous but reports nothing about what the synchronizers made of the artefacts, so a client-Java compile error or a failed CSVIM seed surfaces there and nowhere else. The success panel's "try it here" links are **discovered** (`platform-shells`, plus the app's own perspective path from `application-perspectives`) — never assembled from a guessed `gen/<model>` convention, which would 404 the moment a template changed its layout.
 
 Gotchas this shell paid for (all confirmed by `IntentBuilderShellIT`):
-- **Never put an Alpine binding on `<i x-h-lucide>`.** The plugin REPLACES the `<i>` with the rendered svg, so a binding would be lost — it throws instead, and the uncaught throw **aborts Alpine's walk over everything below it** (the toolbar rendered, the whole split pane did not). Use an `<svg x-h-lucide>` placeholder for any `:data-lucide` / `:class` / `x-show`.
+- **Every icon is an `<svg x-h-lucide>` placeholder.** The Lucide plugin renders an svg in place, so an Alpine binding (`:data-lucide` / `:class` / `x-show`) stays live; a replaced placeholder such as `<i>` throws instead, and the uncaught throw **aborts Alpine's walk over everything below it** (the toolbar rendered, the whole split pane did not). `HarmoniaContractIT` refuses any `<i x-h-lucide>`; for everything else Harmonia the upstream skill is the rule set (see `.claude/docs/harmonia-ui.md`).
 - **The idempotent creates answer `304`, and `response.ok` is 2xx-only.** `POST /workspaces/{ws}` and `.../{ws}/{project}` return 201 the first time and **304 NOT MODIFIED** afterwards, so a naive `!response.ok` throw makes the *second* save fail while the first succeeded. The fetch helper takes an `alsoOk: [304]`.
 - **The workspace may not exist at all** on an instance where the user never opened the IDE; creating a project inside a missing workspace answers 404, so `ensureProject` creates the workspace first.
 - The agent endpoint can make three upstream calls, each **streamed** with adaptive thinking (so there is no fixed per-call ceiling to multiply; the server's outer bound is 10 minutes per call) — the client timeout is **20 minutes**, with a staged typing indicator.
diff --git a/DATABASE_SHELL_PLAN.md b/DATABASE_SHELL_PLAN.md
index 560be4de8d9..08af1186cc2 100644
--- a/DATABASE_SHELL_PLAN.md
+++ b/DATABASE_SHELL_PLAN.md
@@ -12,11 +12,11 @@ this plan clones.
 
 ### Corrections to this plan, found while building it
 
-- **The bump is to 2.9.0, not 2.10.0.** 2.10.0 is published on npm but has no webjar on Maven
-  Central, and 2.9.0 carries every breaking change that mattered (the tree rewrite included). The
-  2.10.0 delta — a cross-origin iframe crash fix and an inverted `getBreakpointListener` third
-  argument — is a follow-up; when its webjar lands, the six shells calling that listener must pass
-  `true`.
+- **The bump was to 2.9.0 at the time (2.10.0 had no webjar yet); the platform has since moved on to
+  3.1.2.** The `getBreakpointListener` third argument is deliberately left at its default
+  (`topFrame = false`): the listener then measures the frame it runs in, which is what the CSS
+  breakpoint variants resolve against, so the shells calling it pass nothing. (An earlier note here
+  asked them to pass `true`; Harmonia's own docs argue the opposite, and the docs win.)
 - **The `data-disabled` sweep was a bug fix, not a rename.** `data-disabled` on a root `x-h-select`
   never did anything, even on 2.6.0: it was always a per-*option* attribute, and the whole control
   is disabled through native `disabled` on `x-h-select-input`. Preview-mode and read-only dropdowns
diff --git a/HARMONIA_2_MIGRATION.md b/HARMONIA_2_MIGRATION.md
deleted file mode 100644
index 57a1ead0ad2..00000000000
--- a/HARMONIA_2_MIGRATION.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# Harmonia 1.24.2 -> 2.x migration plan
-
-Migration of the Harmonia UI library consumed by the Dirigible platform from
-`1.24.2` to `2.1.0`. This document is the working plan; keep it in sync as
-phases land.
-
-## Current state
-
-- Version pin: `pom.xml` `<harmonia.version>` = `2.1.0`.
-- The webjar is a dependency of exactly one module -
-  `components/resources/application-core` (`org.webjars.npm:codbex__harmonia`),
-  served from the classpath at `/webjars/codbex__harmonia/dist/...`. No dist
-  files are vendored; the shell runtime is shared, not copied per project.
-- Consumers: `components/template/template-application-ui-harmonia-java`
-  (bulk of the `x-h-*` usage), `components/template/template-form-builder-harmonia`,
-  `components/resources/application-core` (shared shell runtime), and
-  `components/resources/resources-application` (live application shell).
-- `codbex__harmonia:2.1.0` is published on Maven Central and resolves. The webjar
-  keeps `dist/harmonia.min.js` + `dist/harmonia.css` (existing tags keep
-  resolving) and ships the opt-in `dist/harmonia-lucide.*` and
-  `dist/harmonia-i18next.*` bundles plus a `skills/` directory.
-
-## Version history relevant to us
-
-- **2.0.0** - the only release with breaking changes (see below).
-- **2.0.1-2.0.3** - fixes; 2.0.3 was the first we adopted (Phase 1).
-- **2.1.0** - NO breaking changes. Adds an opt-in i18next plugin, two app
-  templates (Granite ERP, Onyx Chat), badge/avatar/sidebar enhancements, and a
-  Lucide-plugin enhancement (see Phase 2). Safe to bump straight from 2.0.3.
-
-## Harmonia 2.0.0 breaking changes (baseline for the whole migration)
-
-1. Date/time pickers refactored to use standard model values (`YYYY-MM-DD` for
-   the date picker) instead of custom formats.
-2. Icon rendering changed from a modifier to the reactive `data-icon` attribute:
-   `x-h-icon.home` -> `x-h-icon data-icon="home"`.
-3. Utility class `absolute-fit` renamed to `position-fit`.
-4. Built-in icons renamed: `info.svg` -> `circle-info.svg`,
-   `warning.svg` -> `circle-warning.svg`.
-5. Form validation now defers to `:user-invalid` instead of `:invalid`; opt back
-   into on-load validation with `data-validate="immediate"` on an ancestor.
-
-## What 2.x newly delivers (adopt, do not reinvent)
-
-- Native charts: `x-h-chart-{line,bar,doughnut,pie,scatter}`.
-- Lucide lifecycle directive `x-h-lucide` (opt-in bundle; drop-in for `data-lucide`).
-- New components: `datetime-picker`, `file-upload`, `rating`, `slot-picker`,
-  inline calendar; enhanced popover/progress/sidebar/calendar/badge/avatar.
-- Locale-aware `x-h-date-format` + shared intl engine.
-- Opt-in i18next plugin (`x-h-translate`, `$t`/`$i18n`) - the shell already has
-  its own i18n, so this is not needed for the migration.
-- New utility classes/tokens: `col-span-*`, `row-span-*`, `line-clamp-*`,
-  `position-fit`/`position-center`, `text-2xs`, `self-*`, `h-mask`/`v-mask`,
-  `tabular-nums`, extended sizing scales, standard palette.
-- Generated, shipped agent skill under `skills/harmonia/` (package now ships it).
-
----
-
-## Phase 1 - bump + mechanical sweep - DONE (committed 429f4de, then bumped to 2.1.0)
-
-1. `<harmonia.version>` -> `2.1.0` (was bumped to 2.0.3 first, now 2.1.0).
-2. Migrated the Harmonia built-in icons from `x-h-icon.<name>` to the reactive
-   `x-h-icon data-icon="<name>"` form (34 sites). Icons that never existed in
-   Harmonia were fixed: `upload` -> built-in `import`; `inbox`/`eye` -> Lucide.
-   (`x-h-info-page-media.icon` still exists in 2.x - left as is.)
-3. Refreshed the vendored `template-application-ui-harmonia-java/reference/harmonia/`
-   skill from the 2.1.0-shipped `skills/harmonia/`. (Since removed - the skill is now
-   consulted upstream at <https://github.com/codbex/harmonia/blob/main/skills/harmonia/SKILL.md>
-   / <https://codbex.com/harmonia/> to avoid drift.)
-4. Synced version strings in `CLAUDE.md` and `HARMONIA_RUNTIME_PLAN.md`
-   (`data-size` split note re-verified - still accurate in 2.1.0).
-5. Also fixed a pre-existing bug found during runtime verification: the
-   standalone generated report page (`report-file/index.html.template`) loaded
-   `report.js` (which formats via `window.HarmoniaFormat`) but never `format.js`,
-   so `HarmoniaFormat` was undefined in the report iframe. Added the `format.js`
-   include; also dropped `defer` on `format.js` in the shells.
-
-Runtime-verified on a 2.x instance: 2.x loads, shell + generated Sales Invoice
-app render, all migrated icons render as SVG, generated output carries the 2.0
-`data-icon` form only.
-
-## Phase 2 - dark-mode cleanup + Lucide
-
-### Dark-mode
-
-Harmonia auto-persists the color scheme to localStorage and auto-syncs it across
-all same-origin iframes and other browser tabs/windows (see the Harmonia
-dark-mode skill). The custom plumbing is therefore redundant.
-
-1. Delete the custom cross-iframe `storage` listeners (generated shell template,
-   plus the copies in the `report-file` and form-builder templates).
-2. Keep exactly one color-scheme toggle, in the shell only (live
-   `resources-application/.../application/index.html` toolbar and the generated
-   `ui/shell/index.html.template` toolbar). Remove any theme toggle/logic that
-   leaked into embedded perspective iframes - the shell button propagates
-   automatically. The toggle's sun/moon icon is a Lucide icon that flips with
-   state, so render it with the `<svg x-h-lucide>` + `x-show` pattern (see below).
-3. Slim `application-core/.../shell/js/stores/theme.js` to thin wrappers over
-   `Harmonia.getColorScheme()/setColorScheme()` (optionally
-   `addColorSchemeListener`); drop manual DOM/class/sync code. Reconsider the
-   first-run "force light" bootstrap - Harmonia defaults to `auto` and persists
-   the last choice.
-
-### Lucide (~109 `data-lucide` sites) - NOT a blind sweep
-
-Load the opt-in `/webjars/codbex__harmonia/dist/harmonia-lucide.min.js` bundle in
-every shell/standalone page, AFTER the Lucide UMD (it needs `window.lucide`).
-KEEP the Lucide webjar - Harmonia does not bundle Lucide. Then remove the manual
-`lucide.createIcons()` / `refreshIcons()` wiring (`x-h-lucide` renders on init
-and inside dynamically loaded fragments / `x-for` / `x-if` / router views).
-
-Migration depends on whether the icon is static or changes at runtime. Two rules
-from the 2.1.0 Lucide plugin:
-
-- **`<i x-h-lucide>` (or any non-svg tag) is REPLACED by the rendered `<svg>`.**
-  Combining it with any other Alpine directive (`x-show`, `:class`, `@click`, ...)
-  now THROWS a descriptive error (the only exception is `:data-lucide`, whose
-  bound name is consumed at render time). So a static `<i role="img"
-  data-lucide="home">` just gets ` x-h-lucide` added.
-- **`<svg x-h-lucide>` is rendered IN PLACE**, so Alpine directives on it survive.
-  Use this form whenever the placeholder also carries `x-show` / `:class` / etc.
-- **The icon name is read ONCE.** `x-h-lucide` does NOT re-render when a bound
-  `:data-lucide` value changes. Any current `:data-lucide="expr"` + `refreshIcons()`
-  toggle (e.g. the report chart/table button `table-2` <-> `bar-chart-3`) must
-  become either two `<svg x-h-lucide>` elements toggled with `x-show`, or an
-  element re-created via `x-if`/`template` so the directive runs again. A blind
-  `data-lucide` -> `x-h-lucide` sweep would FREEZE these on their first value.
-
-So, concretely:
-- Static `data-lucide` on a directive-free placeholder: add `x-h-lucide` (keep `<i>`).
-- Placeholder that also has another Alpine directive, or whose name toggles: use
-  `<svg x-h-lucide>` (+ `x-show` for a toggle pair), or `x-if`-recreate.
-- Remove `createIcons()`/`refreshIcons()` calls and their `@click="...; refreshIcons()"` hooks.
-
-## Phase 3 - mandatory Harmonia component adoption
-
-Rule: if a Harmonia component exists, use it. No native-HTML or bespoke
-substitutes. All picker models match the native `<input>` value they replace, so
-the existing `x-model="form.X"` bindings and `format.js.toDateInput()` shapes stay
-compatible (verify each on the running app).
-
-1. Date -> `x-h-date-picker` (compound: root + `-trigger` + `-popup`; `x-model` on
-   the popup). Model `YYYY-MM-DD` (== native `type="date"`).
-2. Datetime -> `x-h-datetime-picker` (root + `-trigger` + `-popup`; `x-model` on
-   the popup). Model ISO with `T` separator `YYYY-MM-DDTHH:mm[:ss]`
-   (== native `type="datetime-local"`).
-3. Time -> `x-h-time-picker` (root + `-input` + `-popup`; `x-model` on the input).
-   Model `HH:MM[:SS]`, 24h (== native `type="time"`).
-
-   Sites (native `<input x-h-input type="date|datetime-local|time">` today):
-   `document-view` (form fields + inline draft rows), `manage/form-view`,
-   `report-file/index` filters, form-builder `ui/index`.
-
-4. Number: the correct pattern is `<div x-h-input-number><input type="number"></div>`
-   (already used in most places). Wrap the one bare `<input type="number">` in
-   `manage/form-view.html.template`.
-5. Sweep for any other native/bespoke control with a Harmonia equivalent
-   (e.g. file upload -> `x-h-file-upload`).
-
-## Dropped
-
-- Replacing `application-core/.../shell/js/services/format.js` with the 2.x intl
-  engine. Reversed by #6193 (unify date/number formatting behind one
-  configurable source): the custom module intentionally preserves Java
-  `DecimalFormat`/`DateTimeFormatter` pattern semantics (per-field scale,
-  instance-level separators, dependency-free for the BPM iframe). `x-h-date-format`
-  is `Intl`-based and cannot reproduce those. At most, use `x-h-date-format` for
-  pure-locale display where Java-pattern semantics are not required (marginal).
-
-## Deferred / coordinate
-
-- Chart.js -> native `x-h-chart-*`. The report/chart/dashboard/KPI stack was
-  built very recently on Chart.js (#6137 `reports[].chart`, #6133/#6136/#6140).
-  Migrating means reworking fresh code, and two gaps stand: `polarArea`/`radar`
-  have no native `x-h-chart-*` equivalent, and `printChart()` canvas->PNG depends
-  on a `<canvas>` the native components may not expose. The Chart.js webjar lives
-  in `components/resources/resources-resources/pom.xml` (`chart.js.version` in
-  root `pom.xml`); only droppable if both report surfaces fully migrate. Do this
-  as a separate, coordinated PR.
-  **Done (#6590):** the Harmonia reports run on the native `x-h-chart-*` charts and
-  the AngularJS report surface was removed with the Dashboard shell (#6589), so the
-  Chart.js webjar and its version property are gone.
-
-## Verification
-
-Build the platform (needs `JAVA_HOME` -> corretto-21; install the root pom first
-if building modules with `-pl`, else `${harmonia.version}` resolves from the
-stale installed parent), launch an instance, and drive the Harmonia app shell + a
-generated app (e.g. `dirigiblelabs/sample-intent-multi-model`): shell theme
-toggle (verify iframe/tab propagation), list / manage / master-detail / document
-perspectives, dialogs, forms (validation timing + pickers), split panels, reports
-(icons + charts + number formatting). Watch the known Selenide UI IT flakiness
-and the split-panel FOUC/`data-size` behavior.
diff --git a/HARMONIA_RUNTIME_PLAN.md b/HARMONIA_RUNTIME_PLAN.md
index 66c7442f328..dbad407eb4e 100644
--- a/HARMONIA_RUNTIME_PLAN.md
+++ b/HARMONIA_RUNTIME_PLAN.md
@@ -62,8 +62,8 @@ this repo as the canonical pattern source for Workstreams 1–5.
      <div x-h-split-panel> … main … </div>
    </div>
    ```
-   Documented attributes: `data-orientation="horizontal|vertical"` (h is default), `data-default-size`
-   (percentages, panels should sum to 100), `data-min` / `data-max` (px clamps), `data-locked="true"`
+   Documented attributes: `data-orientation="horizontal|vertical"` (h is default), `data-size`
+   (a percentage or px per panel; the sizes should sum to 100%), `data-min` / `data-max` (px clamps), `data-locked="true"`
    (non-resizable pane), `data-gutterless="true"` (hide the drag handle), `data-variant="border"`,
    `:data-hidden` (collapse a pane reactively). This covers **both** uses the plan flagged — master-detail
    views *and* shell layout — so the `platformSplit` port is unnecessary. Decision in Phase 1 is resolved:
@@ -88,13 +88,14 @@ this repo as the canonical pattern source for Workstreams 1–5.
    the existing Angular shell over the hub protocol. The two models are mutually exclusive per app; choose
    deliberately (see "Reconciling the two shell models" below).
 
-4. **Icons are Lucide + Harmonia built-ins, not Unicons.** athena loads `lucide` UMD and uses
-   `<i data-lucide="file-text">` for nav/content icons plus Harmonia's built-in `x-h-icon.*` set
-   (`.home`, `.bell`, `.close`, `.circle-info`, `.search`, `.edit`, `.trash`, ~30 glyphs — no Lucide
-   dependency for those). It re-runs `lucide.createIcons()` on `alpine:initialized` and every
-   `pinecone:end` (and pages call a `refreshIcons()` mixin after DOM-mutating actions, since injected
-   markup isn't auto-processed). Workstream 6 should re-scope from "→ Unicons" to "→ Lucide + Harmonia
-   built-ins" unless Unicons is a hard brand requirement.
+4. **Icons are Lucide + Harmonia built-ins, not Unicons.** athena loads the `lucide` UMD and uses
+   `<svg x-h-lucide data-lucide="file-text">` placeholders for nav/content icons plus Harmonia's
+   built-in `x-h-icon data-icon="..."` set (`home`, `bell`, `close`, `circle-info`, `search`, `edit`,
+   `trash`, ~40 glyphs — no Lucide dependency for those). The `harmonia-lucide` plugin renders each
+   placeholder when Alpine initializes it, in router-swapped views and `x-for` loops alike, so there is
+   no `lucide.createIcons()` pass anywhere (the `refreshIcons()` mixin is a kept-for-compatibility
+   no-op). Workstream 6 should re-scope from "→ Unicons" to "→ Lucide + Harmonia built-ins" unless
+   Unicons is a hard brand requirement.
 
 5. **The "EntityClient" and i18n/error layers already exist** (Workstream 2 is largely written):
    - `js/services/api.js` — a plain `fetch` client `App.services.api` with `get/post/put/delete`,
@@ -127,7 +128,8 @@ this repo as the canonical pattern source for Workstreams 1–5.
   (`asc → desc → none` via `cycleSort`), and client pagination with an ellipsis `pageNumbers` builder.
   This is the parity target for the generated `list` / `master-list` templates.
 - **Toasts** are an `Alpine.store('toasts')` queue rendered through `x-h-notification-overlay` templates;
-  the richer `$notifications.add({ template, data, timeout })` magic is also available.
+  the public `$notifications.add({ id, template, position, timeout, data, sound })` magic is the way to
+  raise one (Dirigible's shared `notifications` store is handed it once at shell init via `attachToaster`).
 - **Empty/error states** use `x-h-info-page` (icon/title/description/actions) — the answer to the plan's
   "message page (empty-state)" minor gap. Dashboards use `x-h-tile` + the `tile-*`/`grid-cols-1..12`
   utilities.
@@ -300,7 +302,7 @@ Consequences of this choice that reshape the phasing:
    task forms**, completing via `/services/inbox/tasks/{id}` and self-closing), plus the Alpine
    `entity-process-tasks` equivalent gated on the `hasProcess`/`ProcessId` flag.
 4. **Icons, theming, polish.** Migrate `sap-icon--*`/perspective SVGs to **Lucide + Harmonia built-ins**
-   (re-run `lucide.createIcons()` on `pinecone:end`/after DOM mutations); finalize the theme bridge;
+   (`<svg x-h-lucide>` placeholders rendered by the `harmonia-lucide` plugin); finalize the theme bridge;
    empty-states via `x-h-info-page`; scrollbars; and an audit that all generated markup stays inside
    Harmonia's curated Tailwind subset (no arbitrary/hue/`>12` utilities).
 5. **Wire generation + parity ITs.** Register the template in `service-generate`; add the stack choice to
@@ -369,10 +371,11 @@ Process Inbox (`/inbox`) and Documents (`/documents`).
 
 ### Embedding (Phase 1 — no CDN)
 
-Alpine `3.15.11`, Harmonia `2.1.0`, Lucide `1.8.0`, chart.js `4.4.3` are **webjars** (served
-version-less via webjars-locator at `/webjars/...`); Pinecone Router (no webjar) is **vendored** under
-`application-core/.../vendor/` (license-excluded). The generated `index.html` references only these
-local URLs.
+Alpine `3.16.3`, Harmonia `3.1.2`, Lucide `1.20.0` and Pinecone Router `7.6.0` are **webjars** (served
+version-less via webjars-locator at `/webjars/...`; the versions are the `*.version` properties in the
+root pom). The chart.js webjar was dropped with the AngularJS dashboard shell (reports use Harmonia's
+native `x-h-chart-*`), and the once-vendored Pinecone Router copy under `application-core/.../vendor/`
+is gone. The generated `index.html` references only these local URLs.
 
 ### Runtime contracts (the invariants future work must keep)
 
diff --git a/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/parser/IntentParser.java b/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/parser/IntentParser.java
index 76219d19260..29a07e1e865 100644
--- a/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/parser/IntentParser.java
+++ b/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/parser/IntentParser.java
@@ -3859,10 +3859,34 @@ private static Set<String> validateEntities(IntentModel model, Set<String> usesA
                        .isEmpty()) {
                 validatePhases(entity, issues);
             }
+            validateWidgetSizes(entity, issues);
         }
         return entityNames;
     }
 
+    /**
+     * A field's or a to-one relation's {@code size:} is a column count on the form's 12-column grid -
+     * emitted as the property's {@code widgetSize} and rendered by the Harmonia form as
+     * {@code sm:col-span-<n>}. Only 1..12 exist there: any other number renders a class Harmonia never
+     * ships, so the control silently falls back to the grid's default width while the intent looks
+     * authored.
+     */
+    private static void validateWidgetSizes(EntityIntent entity, List<String> issues) {
+        for (FieldIntent field : entity.getFields()) {
+            validateWidgetSize(entity, "field [" + field.getName() + "]", field.getSize(), issues);
+        }
+        for (RelationIntent relation : entity.getRelations()) {
+            validateWidgetSize(entity, "relation [" + relation.getName() + "]", relation.getSize(), issues);
+        }
+    }
+
+    private static void validateWidgetSize(EntityIntent entity, String subject, Integer size, List<String> issues) {
+        if (size != null && (size < 1 || size > 12)) {
+            issues.add("entity [" + entity.getName() + "] " + subject + " declares size " + size
+                    + " - a form width is a column count between 1 and 12");
+        }
+    }
+
     /**
      * An entity's declared enrichment {@code phases:} (#6929) - the names its listeners announce and a
      * consumer binds with {@code event: { onPhase: <Entity>, phase: <name> }}.
diff --git a/components/engine/engine-intent/src/test/java/org/eclipse/dirigible/components/intent/parser/WidgetSizeIntentTest.java b/components/engine/engine-intent/src/test/java/org/eclipse/dirigible/components/intent/parser/WidgetSizeIntentTest.java
new file mode 100644
index 00000000000..f432ee78b6b
--- /dev/null
+++ b/components/engine/engine-intent/src/test/java/org/eclipse/dirigible/components/intent/parser/WidgetSizeIntentTest.java
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2010-2026 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors SPDX-License-Identifier: EPL-2.0
+ */
+package org.eclipse.dirigible.components.intent.parser;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import org.eclipse.dirigible.components.intent.model.EntityIntent;
+import org.eclipse.dirigible.components.intent.model.IntentModel;
+import org.junit.jupiter.api.Test;
+
+/**
+ * A field's or a to-one relation's {@code size:} is a column count on the form's 12-column grid;
+ * the Harmonia form renders it as {@code sm:col-span-<n>}, a class that exists for 1..12 only. Any
+ * other number used to reach the templates unchecked and render a width class Harmonia never ships.
+ */
+class WidgetSizeIntentTest {
+
+    private static final String ORDERS = """
+            name: orders
+            entities:
+              - name: Customer
+                fields:
+                  - { name: id, type: integer, primaryKey: true, generated: true }
+                  - { name: name, type: string }
+              - name: Order
+                fields:
+                  - { name: id, type: integer, primaryKey: true, generated: true }
+                  - { name: number, type: string, size: 4 }
+                  - { name: note, type: string }
+                relations:
+                  - { name: customer, kind: manyToOne, to: Customer, size: 8 }
+            """;
+
+    @Test
+    void aSizeWithinTheGridParses() {
+        IntentModel model = IntentParser.parse(ORDERS);
+
+        EntityIntent order = entity(model, "Order");
+        assertEquals(4, order.getFields()
+                             .get(1)
+                             .getSize());
+        assertEquals(8, order.getRelations()
+                             .get(0)
+                             .getSize());
+    }
+
+    @Test
+    void aFieldSizeAboveTheGridIsRefusedNamingTheField() {
+        IntentValidationException ex =
+                assertThrows(IntentValidationException.class, () -> IntentParser.parse(ORDERS.replace("size: 4", "size: 20")));
+
+        assertTrue(ex.getIssues()
+                     .contains("entity [Order] field [number] declares size 20 - a form width is a column count between 1 and 12"),
+                () -> String.valueOf(ex.getIssues()));
+    }
+
+    @Test
+    void aRelationSizeBelowTheGridIsRefusedNamingTheRelation() {
+        IntentValidationException ex =
+                assertThrows(IntentValidationException.class, () -> IntentParser.parse(ORDERS.replace("size: 8", "size: 0")));
+
+        assertTrue(ex.getIssues()
+                     .contains("entity [Order] relation [customer] declares size 0 - a form width is a column count between 1 and 12"),
+                () -> String.valueOf(ex.getIssues()));
+    }
+
+    @Test
+    void anAbsentSizeStaysUnset() {
+        IntentModel model = IntentParser.parse(ORDERS);
+
+        assertNull(entity(model, "Order").getFields()
+                                         .get(2)
+                                         .getSize(),
+                "no size authored means no widgetSize emitted - the form keeps its default width");
+    }
+
+    private static EntityIntent entity(IntentModel model, String name) {
+        return model.getEntities()
+                    .stream()
+                    .filter(e -> name.equals(e.getName()))
+                    .findFirst()
+                    .orElseThrow();
+    }
+}
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
index 9fb067fa7d7..15ed0164c0a 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
@@ -19,6 +19,12 @@
       "user": "Потребител",
       "logout": "Изход"
     },
+    "theme": {
+      "title": "Тема",
+      "light": "Светла",
+      "dark": "Тъмна",
+      "auto": "Автоматично"
+    },
     "actAs": {
       "start": "Действай като...",
       "enter": "Въвеждай от името на...",
@@ -118,7 +124,6 @@
       "total": "Общо",
       "prev": "Предишна",
       "next": "Следваща",
-      "pageOf": "Страница {{page}} / {{total}}",
       "any": "всички",
       "yes": "да",
       "no": "не",
@@ -133,6 +138,7 @@
       "hint": "Страницата, която търсите, не съществува."
     },
     "settings": {
+      "title": "Настройки",
       "selectSetting": "Изберете настройка",
       "selectSettingHint": "Изберете конфигурационен обект отляво, за да го управлявате тук.",
       "configFor": "Конфигурация и номенклатури за {{name}}.",
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
index ce89989ea21..43139c3abc6 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
@@ -19,6 +19,12 @@
       "user": "User",
       "logout": "Log out"
     },
+    "theme": {
+      "title": "Theme",
+      "light": "Light",
+      "dark": "Dark",
+      "auto": "Auto"
+    },
     "actAs": {
       "start": "Act as...",
       "enter": "Enter data as...",
@@ -116,9 +122,8 @@
       "noData": "No data",
       "noRows": "The {{name}} report returned no rows.",
       "total": "Total",
-      "prev": "Prev",
+      "prev": "Previous",
       "next": "Next",
-      "pageOf": "Page {{page}} / {{total}}",
       "any": "any",
       "yes": "yes",
       "no": "no",
@@ -133,6 +138,7 @@
       "hint": "The page you are looking for does not exist."
     },
     "settings": {
+      "title": "Settings",
       "selectSetting": "Select a setting",
       "selectSettingHint": "Choose a configuration entity on the left to manage it here.",
       "configFor": "Configuration & nomenclature for {{name}}.",
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/css/app.css b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/css/app.css
index 8f27b21c38d..e69ea9e8319 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/css/app.css
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/css/app.css
@@ -24,20 +24,15 @@ html, body { height: 100%; margin: 0; }
 }
 
 /*
- * Cap Harmonia dialogs to the viewport and scroll their body.
- * Harmonia's x-h-dialog is centred (top/left 50% + translate) with no max-height and
- * no internal overflow, so a tall form dialog - e.g. the document line-item editor with
- * many fields - grows past the screen and its header and Save/Cancel footer bleed off the
- * top and bottom edges, unreachable. Capping the dialog and letting the content region
- * (x-h-dialog-content) scroll keeps the header and footer pinned and on screen. Keyed on
- * Harmonia's stable data-slot so it applies to every dialog on every shell.
+ * Cap Harmonia dialogs to the viewport.
+ * A non-fullscreen x-h-dialog is centred (top/left 50% + translate) with no max-height of
+ * its own, so a tall form dialog - e.g. the document line-item editor with many fields -
+ * would grow past the screen and push its header and Save/Cancel footer off the top and
+ * bottom edges, unreachable. The cap keeps them on screen; the body scrolls because
+ * x-h-dialog-content is the dialog's one scrolling region (Harmonia gives it
+ * flex-1 min-h-0 overflow-y-auto itself). Keyed on Harmonia's stable data-slot so it
+ * applies to every dialog on every shell.
  */
 [data-slot="dialog"] {
   max-height: calc(100vh - 2rem);
 }
-
-[data-slot="dialog"] [x-h-dialog-content] {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
index 213c12537a5..86dd9e303c3 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
@@ -42,6 +42,9 @@ document.addEventListener('alpine:init', () => {
 
     init() {
       this.navLabels = window.__harmoniaNav || {};
+      // The toast overlay is rendered by this component, so it lends its $notifications magic to
+      // the shared store - a store has no component scope of its own to reach the magic from.
+      Alpine.store('notifications').attachToaster(this.$notifications);
       try { this.embedded = new URLSearchParams(window.location.search).has('embedded'); } catch (e) { /* no URL */ }
       if (this.embedded) this.hiddenPanels.left = true;
       const getPath = () => {
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/notifications.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/notifications.js
index 73b85be5ef9..3b5c5450e29 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/notifications.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/notifications.js
@@ -44,28 +44,42 @@ document.addEventListener('alpine:init', () => {
       });
     },
 
+    /**
+     * Harmonia's `$notifications` magic, handed over by the page's root component (see
+     * attachToaster). It is the public toast API and it lives on an Alpine component scope, which a
+     * store never has - so the shell attaches it once at init, the way the Harmonia example apps do.
+     */
+    _toaster: null,
+
+    /**
+     * Attach the `$notifications` magic of the component that renders the toast overlay (the shared
+     * shell, the builder). Until a page attaches one, announce() only records the bell entry.
+     */
+    attachToaster(notifications) {
+      this._toaster = notifications && typeof notifications.add === 'function' ? notifications : null;
+    },
+
     /**
      * Record the entry in the bell AND show it as a transient toast. Use this for the OUTCOME of
      * something the user just did; plain add() stays for background arrivals (a new task) that must
      * not interrupt.
      *
-     * The toast overlay is Harmonia's (`_h_notifications`, driven by the `toast` template in the
-     * shell's index.html). Missing overlay / missing template is not a reason to lose the message:
-     * the bell entry is written first, so the worst case is the pre-#7073 behaviour rather than a
-     * broken page.
+     * The toast renders through the `toast` template every shell declares in its
+     * x-h-notification-overlay. A missing toaster / overlay / template is not a reason to lose the
+     * message: the bell entry is written first, so the worst case is the pre-#7073 behaviour rather
+     * than a broken page.
      */
     announce(n) {
       n = n || {};
       this.add(n);
+      if (!this._toaster) return;
       const variant = n.variant || 'information';
       const text = [n.title, n.description].filter(Boolean).join(' - ');
       try {
-        const toasts = window.Alpine && Alpine.store('_h_notifications');
-        if (!toasts || typeof toasts.push !== 'function') return;
         // A refusal has to be READ; a success only has to be seen. Same reason the variant is
         // carried through: the overlay template picks the icon from it.
         const timeout = (variant === 'negative' || variant === 'warning') ? 12000 : 5000;
-        toasts.push(undefined, 'toast', 'top-right', timeout, { message: text, variant });
+        this._toaster.add({ template: 'toast', position: 'top-right', timeout, data: { message: text, variant } });
       } catch (e) {
         console.warn('notifications: could not raise the toast for "' + text + '"', e);
       }
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/theme.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/theme.js
index 991a4c90345..44af84170bf 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/theme.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/theme.js
@@ -12,24 +12,47 @@
 /*
  * Generated by Eclipse Dirigible based on model and template.
  *
- * theme store — the shell's light/dark switch. A global store (not a component property) so the
- * toolbar toggle resolves from any scope. Backed by Harmonia's colour-scheme API, which persists the
- * choice to the shared localStorage key and applies the `.dark` class; the standalone form/report
- * iframes read the same key (and re-apply on the storage event) so everything themes consistently.
+ * theme store — the shell's colour-scheme control (light | dark | auto). A global store (not a
+ * component property) so the toolbar control resolves from any scope. Backed by Harmonia's
+ * colour-scheme API: `mode` is the user's selection - Harmonia persists it to the shared
+ * `codbex.harmonia.colorMode` key, applies the `.dark` class and keeps every same-origin frame and
+ * browser tab in sync itself - and `scheme` is what is on screen right now (`auto` resolved against
+ * the OS). The colour-scheme listener keeps both in step when the change is made elsewhere: another
+ * frame, another tab, or the OS flipping while `auto` is selected.
  */
 document.addEventListener('alpine:init', () => {
   Alpine.store('theme', {
-    value: 'light',   // 'light' | 'dark'
+    _mode: 'auto',    // 'light' | 'dark' | 'auto' — the selection
+    scheme: 'light',  // 'light' | 'dark' — the scheme applied right now
 
     init() {
-      try {
-        this.value = (window.Harmonia && Harmonia.getColorScheme() === 'dark') ? 'dark' : 'light';
-      } catch (e) { this.value = 'light'; }
+      if (!window.Harmonia) return;
+      this._mode = Harmonia.getColorScheme();
+      this.scheme = this.resolve(this._mode);
+      Harmonia.addColorSchemeListener((scheme, mode) => {
+        this.scheme = scheme;
+        if (mode) this._mode = mode;
+      });
     },
 
-    toggle() {
-      this.value = this.value === 'dark' ? 'light' : 'dark';
-      if (window.Harmonia) Harmonia.setColorScheme(this.value);
+    get mode() { return this._mode; },
+
+    set mode(value) {
+      if (value !== 'light' && value !== 'dark' && value !== 'auto') return;
+      this._mode = value;
+      this.scheme = this.resolve(value);
+      if (window.Harmonia) Harmonia.setColorScheme(value);
+    },
+
+    // The toolbar control's icon: the selection when it is explicit, the resolved scheme otherwise.
+    get icon() {
+      if (this._mode === 'auto') return 'sun-moon';
+      return this.scheme === 'dark' ? 'moon' : 'sun';
+    },
+
+    resolve(mode) {
+      if (mode === 'light' || mode === 'dark') return mode;
+      return window.Harmonia ? Harmonia.getSystemColorScheme() : 'light';
     },
   });
 }, { once: true });
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
index a9931ff0230..ee17ef6c9e3 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
@@ -22,9 +22,9 @@
     <!-- Section caption, unified with the entity/inbox titles (text-2xl semibold); the breadcrumb
          below it is the in-folder path navigator (root = Home). -->
     <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasBack()" @click="goBack()" aria-label="Back"><i role="img" x-h-lucide data-lucide="arrow-left"></i></button>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasForward()" @click="goForward()" aria-label="Forward"><i role="img" x-h-lucide data-lucide="arrow-right"></i></button>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="refresh()" aria-label="Refresh"><i role="img" x-h-lucide data-lucide="refresh-cw"></i></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasBack()" @click="goBack()" aria-label="Back"><svg role="presentation" x-h-lucide data-lucide="arrow-left"></svg></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasForward()" @click="goForward()" aria-label="Forward"><svg role="presentation" x-h-lucide data-lucide="arrow-right"></svg></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="refresh()" aria-label="Refresh"><svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg></button>
     <nav x-h-breadcrumb data-overflow="scroll" class="px-1">
       <ol x-h-breadcrumb-list>
         <template x-for="(c, i) in breadcrumbs" :key="c.path + ':' + i">
@@ -36,13 +36,13 @@
       </ol>
     </nav>
     <div x-h-toolbar-spacer></div>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" :aria-pressed="search.show" @click="toggleSearch()" aria-label="Find item"><i role="img" x-h-lucide data-lucide="search"></i></button>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askNewFolder()" aria-label="New folder"><i role="img" x-h-lucide data-lucide="folder-plus"></i></button>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askAccess(null)" :aria-label="T('application-core:shell.documents.manageAccess', 'Manage access')" :title="T('application-core:shell.documents.manageAccess', 'Manage access')"><i role="img" x-h-lucide data-lucide="shield"></i></button>
-    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!anySelected()" @click="askDeleteSelected()" aria-label="Delete selected"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
-    <a x-h-button data-variant="transparent" data-size="icon-sm" :href="zipUrl()" target="_blank" aria-label="Download folder as zip"><i role="img" x-h-lucide data-lucide="folder-down"></i></a>
-    <button x-h-menu-trigger.dropdown x-h-button data-variant="transparent" data-size="icon-sm" aria-label="Upload"><i role="img" x-h-lucide data-lucide="upload"></i></button>
-    <ul x-h-menu data-align="bottom-end">
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :aria-pressed="search.show" @click="toggleSearch()" aria-label="Find item"><svg role="presentation" x-h-lucide data-lucide="search"></svg></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askNewFolder()" aria-label="New folder"><svg role="presentation" x-h-lucide data-lucide="folder-plus"></svg></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askAccess(null)" :aria-label="T('application-core:shell.documents.manageAccess', 'Manage access')" :title="T('application-core:shell.documents.manageAccess', 'Manage access')"><svg role="presentation" x-h-lucide data-lucide="shield"></svg></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!anySelected()" @click="askDeleteSelected()" aria-label="Delete selected"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
+    <a x-h-button data-variant="transparent" data-size="icon-sm" :href="zipUrl()" target="_blank" aria-label="Download folder as zip"><svg role="presentation" x-h-lucide data-lucide="folder-down"></svg></a>
+    <button x-h-menu-trigger.dropdown x-h-button data-variant="transparent" data-size="icon-sm" aria-label="Upload"><svg role="presentation" x-h-lucide data-lucide="upload"></svg></button>
+    <ul x-h-menu aria-label="Upload" data-align="bottom-end">
       <li x-h-menu-item @click="triggerUpload(false)" x-text="T('application-core:shell.documents.uploadFiles', 'Upload files')"></li>
       <li x-h-menu-item @click="triggerUpload(true)" x-text="T('application-core:shell.documents.uploadZip', 'Upload zip contents')"></li>
     </ul>
@@ -52,14 +52,14 @@
   <!-- Search-in-folder bar (toggled) -->
   <div x-show="search.show" class="px-4 pb-2">
     <div x-h-input-group data-size="sm">
-      <div x-h-input-group-addon data-align="inline-start"><svg x-h-icon data-icon="search" class="size-4" role="img" aria-label="search"></svg></div>
       <input x-h-input.group type="search" :placeholder="T('application-core:shell.documents.findInFolder', 'Find in folder')" x-model="search.filterBy" @input="clearSelection(); refreshIcons()" />
+      <div x-h-input-group-addon data-align="inline-start"><svg x-h-icon data-icon="search" class="size-4" role="presentation"></svg></div>
     </div>
   </div>
 
   <div x-show="state === 'error'" x-h-alert data-variant="negative" role="alert" class="m-4"><div x-h-alert-description x-text="error"></div></div>
 
-  <div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+  <div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master: file/folder list (with drag-and-drop upload) -->
     <div x-h-split-panel data-size="20%" data-min="340">
@@ -95,12 +95,12 @@
                   </td>
                   <th x-h-table-head scope="row">
                     <button x-h-button data-variant="link" class="justify-start" @click="onRowClick(item)">
-                      <i role="img" x-h-lucide :data-lucide="fileIcon(item)"></i><span x-text="item.name"></span>
+                      <svg role="presentation" x-h-lucide :data-lucide="fileIcon(item)"></svg><span x-text="item.name"></span>
                     </button>
                   </th>
                   <td x-h-table-cell data-row-actions>
-                    <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Item actions"><i role="img" x-h-lucide data-lucide="ellipsis"></i></button>
-                    <ul x-h-menu data-align="bottom-end">
+                    <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Item actions"><svg role="presentation" x-h-lucide data-lucide="ellipsis"></svg></button>
+                    <ul x-h-menu aria-label="Item actions" data-align="bottom-end">
                       <li x-show="isDocument(item)" x-h-menu-item @click="copyLink(item)" x-text="T('application-core:shell.documents.copyLink', 'Copy link')"></li>
                       <li x-h-menu-item @click="askRename(item)" x-text="T('application-core:shell.documents.rename', 'Rename')"></li>
                       <li x-show="isDocument(item)" x-h-menu-item @click="window.open(downloadUrl(item), '_blank')" x-text="T('application-core:shell.documents.download', 'Download')"></li>
@@ -144,7 +144,7 @@
         <!-- Empty / not previewable -->
         <div x-show="!selectedFile || !canPreview" x-h-info-page class="p-4">
           <div x-h-info-page-header>
-            <div x-h-info-page-media.icon><i x-h-lucide data-lucide="eye" role="img" aria-label="preview"></i></div>
+            <div x-h-info-page-media.icon><svg x-h-lucide data-lucide="eye" role="img" aria-label="preview"></svg></div>
             <div x-h-info-page-title x-text="T('application-core:shell.documents.filePreview', 'File Preview')"></div>
             <div x-h-info-page-description x-text="(selectedFile && !canPreview) ? T('application-core:shell.documents.cannotPreview', 'This file cannot be previewed.') : T('application-core:shell.documents.previewHint', 'Click on a file to see its preview.')"></div>
           </div>
@@ -156,7 +156,7 @@
   <!-- New folder dialog -->
   <div x-h-dialog-overlay :data-open="newFolderOpen">
     <div x-h-dialog>
-      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.newFolder', 'New folder')"></h2><button x-h-dialog-close @click="newFolderOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button></div>
+      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.newFolder', 'New folder')"></h2><button x-h-dialog-close @click="newFolderOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button></div>
       <div x-h-dialog-content>
         <div x-h-field>
           <label x-h-label for="nf" x-text="T('application-core:shell.documents.folderName', 'Folder name')"></label>
@@ -177,7 +177,7 @@
     <div x-h-dialog>
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess', 'Manage access')"></h2>
-        <button x-h-dialog-close @click="accessOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="accessOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <p class="text-sm text-muted-foreground mb-3">
@@ -197,8 +197,8 @@ <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess',
             <template x-for="g in access.own" :key="g.method + ':' + g.role">
               <div class="hbox items-center gap-2 py-1">
                 <span x-h-badge data-variant="outline" x-text="g.method"></span>
-                <span class="text-sm grow" x-text="g.role"></span>
-                <button x-h-button data-variant="transparent" data-size="icon-sm" @click="removeGrant(g)" :disabled="busy" aria-label="Remove"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                <span class="text-sm flex-1" x-text="g.role"></span>
+                <button x-h-button data-variant="transparent" data-size="icon-sm" @click="removeGrant(g)" :disabled="busy" aria-label="Remove"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
               </div>
             </template>
           </div>
@@ -208,9 +208,9 @@ <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess',
           <div class="mb-3">
             <div class="text-xs text-muted-foreground mb-1" x-text="T('application-core:shell.documents.accessInherited', 'Inherited from a parent folder')"></div>
             <template x-for="g in access.inherited" :key="'i' + g.path + g.method + g.role">
-              <div class="hbox items-center gap-2 py-1 opacity-60">
+              <div class="hbox items-center gap-2 py-1 opacity-50">
                 <span x-h-badge data-variant="outline" x-text="g.method"></span>
-                <span class="text-sm grow" x-text="g.role"></span>
+                <span class="text-sm flex-1" x-text="g.role"></span>
                 <span class="text-xs text-muted-foreground" x-text="g.path"></span>
               </div>
             </template>
@@ -218,7 +218,7 @@ <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess',
         </template>
 
         <div class="hbox items-end gap-2">
-          <div x-h-field class="grow">
+          <div x-h-field class="flex-1">
             <label x-h-label for="acr" x-text="T('application-core:shell.documents.accessRole', 'Role')"></label>
             <input x-h-input id="acr" type="text" x-model="accessDraft.role" @keydown.enter="addGrant()" :placeholder="T('application-core:shell.documents.accessRolePlaceholder', 'Role name...')" />
           </div>
@@ -243,7 +243,7 @@ <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess',
   <!-- Rename dialog -->
   <div x-h-dialog-overlay :data-open="renameOpen">
     <div x-h-dialog>
-      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.rename', 'Rename')"></h2><button x-h-dialog-close @click="renameOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button></div>
+      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.rename', 'Rename')"></h2><button x-h-dialog-close @click="renameOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button></div>
       <div x-h-dialog-content>
         <div x-h-field>
           <label x-h-label for="rn" x-text="T('application-core:shell.documents.newName', 'New name')"></label>
@@ -261,7 +261,7 @@ <h2 x-h-dialog-title x-text="T('application-core:shell.documents.manageAccess',
   <!-- Delete dialog -->
   <div x-h-dialog-overlay :data-open="deleteOpen">
     <div x-h-dialog>
-      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.delete', 'Delete')"></h2><button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button></div>
+      <div x-h-dialog-header><h2 x-h-dialog-title x-text="T('application-core:shell.documents.delete', 'Delete')"></h2><button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button></div>
       <div x-h-dialog-content>
         <p x-show="deleteTargets.length === 1">Delete <strong x-text="deleteTargets[0] && deleteTargets[0].name"></strong>? This cannot be undone.</p>
         <p x-show="deleteTargets.length > 1">Delete <strong x-text="deleteTargets.length"></strong> items? This cannot be undone.</p>
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
index 5840910360f..22cf06472af 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
@@ -22,29 +22,29 @@
     <span x-show="lastUpdated" x-h-text.muted x-text="T('application-core:shell.inbox.updated', 'Updated {{time}}', { time: fmtTime(lastUpdated) })"></span>
     <button x-h-button data-variant="transparent" data-size="icon-sm" :aria-pressed="autoRefresh"
             @click="toggleAuto()" :aria-label="autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'">
-      <svg x-h-lucide role="img" data-lucide="pause" x-show="autoRefresh"></svg>
-      <svg x-h-lucide role="img" data-lucide="play" x-show="!autoRefresh"></svg>
+      <svg x-h-lucide role="presentation" data-lucide="pause" x-show="autoRefresh"></svg>
+      <svg x-h-lucide role="presentation" data-lucide="play" x-show="!autoRefresh"></svg>
     </button>
-    <button x-h-button data-variant="outline" data-size="sm" @click="refresh()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('application-core:shell.inbox.refresh', 'Refresh')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="refresh()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg><span x-text="T('application-core:shell.inbox.refresh', 'Refresh')"></span></button>
   </div>
 
   <!-- Act-as (delegated entry): while armed this Inbox serves the ACTING identity's tasks, so the
        real user's own assigned tasks are absent. Say it, and say how many — an empty list under a
        forgotten arming reads as a broken process (#6694). -->
   <div x-show="actAs.acting" x-cloak class="hbox items-center gap-2 px-3 py-1.5 text-sm"
-       style="background: var(--color-warning, #b45309); color: #fff;">
-    <i role="img" x-h-lucide data-lucide="user-round-cog"></i>
+       style="background: var(--warning); color: var(--warning-foreground);">
+    <svg role="presentation" x-h-lucide data-lucide="user-round-cog"></svg>
     <span x-text="actAs.hiddenTasks
         ? T('application-core:shell.inbox.actAsHidden', 'Acting as {{person}} — {{count}} of your own tasks are hidden', { person: actAs.acting, count: actAs.hiddenTasks })
         : T('application-core:shell.inbox.actAsServing', 'Acting as {{person}} — this Inbox serves their tasks, not yours', { person: actAs.acting })"></span>
     <div class="flex-1"></div>
     <button x-h-button data-size="sm" data-variant="outline" @click="exitActAs()"
-            style="border-color:#fff; color:#fff; background:transparent;">
+            style="border-color: var(--warning-foreground); color: var(--warning-foreground); background: transparent;">
       <span x-text="T('application-core:shell.actAs.exit', 'Exit')"></span>
     </button>
   </div>
 
-  <div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+  <div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master: the task list -->
     <div x-h-split-panel data-size="20%" data-min="280">
@@ -59,14 +59,14 @@
           <button x-h-button data-variant="outline" data-size="icon-sm" class="shrink-0" @click="toggleSort()"
                   :aria-label="sortDir === 'desc' ? T('application-core:shell.inbox.sortNewestFirst', 'Newest first') : T('application-core:shell.inbox.sortOldestFirst', 'Oldest first')"
                   :title="sortDir === 'desc' ? T('application-core:shell.inbox.sortNewestFirst', 'Newest first') : T('application-core:shell.inbox.sortOldestFirst', 'Oldest first')">
-            <svg x-h-lucide role="img" data-lucide="arrow-down-wide-narrow" x-show="sortDir === 'desc'"></svg>
-            <svg x-h-lucide role="img" data-lucide="arrow-up-narrow-wide" x-show="sortDir === 'asc'"></svg>
+            <svg x-h-lucide role="presentation" data-lucide="arrow-down-wide-narrow" x-show="sortDir === 'desc'"></svg>
+            <svg x-h-lucide role="presentation" data-lucide="arrow-up-narrow-wide" x-show="sortDir === 'asc'"></svg>
           </button>
         </div>
 
         <div x-show="filtered.length === 0" x-h-info-page class="p-4">
           <div x-h-info-page-header>
-            <div x-h-info-page-media.icon><i x-h-lucide data-lucide="inbox" role="img" aria-label="inbox"></i></div>
+            <div x-h-info-page-media.icon><svg x-h-lucide data-lucide="inbox" role="img" aria-label="inbox"></svg></div>
             <div x-h-info-page-title x-text="T('application-core:shell.inbox.noTasks', 'No tasks')"></div>
             <div x-h-info-page-description x-text="actAs.acting
                 ? T('application-core:shell.inbox.noTasksActAsHint', 'You are acting as {{person}} and this list is theirs. Exit to see your own tasks.', { person: actAs.acting })
@@ -124,12 +124,12 @@
         <div x-show="selected && !selected.mine" class="vbox gap-3 items-start p-4">
           <div x-h-info-page>
             <div x-h-info-page-header>
-              <div x-h-info-page-media.icon><i x-h-lucide data-lucide="inbox" role="img" aria-label="inbox"></i></div>
+              <div x-h-info-page-media.icon><svg x-h-lucide data-lucide="inbox" role="img" aria-label="inbox"></svg></div>
               <div x-h-info-page-title x-text="T('application-core:shell.inbox.claimTask', 'Claim this task')"></div>
               <div x-h-info-page-description x-text="T('application-core:shell.inbox.claimHint', 'This task is available to your group. Claim it to open and complete its form.')"></div>
             </div>
           </div>
-          <button x-h-button data-variant="primary" :disabled="busy" @click="claim(selected)"><i role="img" x-h-lucide data-lucide="hand"></i><span x-text="T('application-core:shell.inbox.claimOpen', 'Claim & open')"></span></button>
+          <button x-h-button data-variant="primary" :disabled="busy" @click="claim(selected)"><svg role="presentation" x-h-lucide data-lucide="hand"></svg><span x-text="T('application-core:shell.inbox.claimOpen', 'Claim & open')"></span></button>
         </div>
 
         <!-- Claimed + has a form: render the standalone form inline. -->
diff --git a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/index.html b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/index.html
index ef2dc8fa13d..1d93572f7a2 100644
--- a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/index.html
+++ b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/index.html
@@ -34,12 +34,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -69,7 +63,7 @@
                     <span class="truncate font-medium" x-text="projectionLabel()"></span>
                     <span class="truncate text-xs font-normal" x-text="projectionSubtitle()"></span>
                   </div>
-                  <i x-h-lucide role="img" data-lucide="chevrons-up-down"></i>
+                  <svg x-h-lucide role="presentation" data-lucide="chevrons-up-down"></svg>
                 </button>
                 <ul x-h-menu aria-label="Projections" data-align="bottom-start">
                   <div x-h-menu-label x-text="T('application-core:shell.projections.title', 'Applications')"></div>
@@ -77,10 +71,10 @@
                     <li x-h-menu-item @click="selectProjection(p)">
                       <template x-if="isSvgIcon(p.icon)"><svg x-h-icon :data-link="p.icon" class="size-4" role="presentation"></svg></template>
                       <template x-if="isImageIcon(p.icon)"><img :src="p.icon" alt="" class="size-4" /></template>
-                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><i role="img" x-h-lucide :data-lucide="p.icon || 'box'"></i></template>
+                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><svg role="presentation" x-h-lucide :data-lucide="p.icon || 'box'"></svg></template>
                       <span class="flex-1" x-text="p.tkey ? T(p.tkey, p.label) : p.label"></span>
-                      <!-- svg placeholder: x-show on an <i x-h-lucide> is lost when the i is replaced by the svg -->
-                      <svg x-h-lucide x-show="projectionId === p.id" role="img" data-lucide="check"></svg>
+                      <!-- svg placeholder: an Alpine binding (here x-show) only survives on an svg, which is rendered in place -->
+                      <svg x-h-lucide x-show="projectionId === p.id" role="presentation" data-lucide="check"></svg>
                     </li>
                   </template>
                 </ul>
@@ -89,7 +83,7 @@
             <template x-if="projections.length <= 1">
               <div class="hbox items-center gap-2 p-1">
                 <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-                <div class="vbox gap-0">
+                <div class="vbox">
                   <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                   <span x-show="$store.branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="$store.branding.subtitle"></span>
                 </div>
@@ -106,8 +100,8 @@
                   <!-- The shell is task-first (inherited from the shell family copy): the Inbox IS the home page - a personal task
                        ("Fill & confirm your July timesheet") is how work arrives here. -->
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
-                      <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
+                      <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
                     </button>
                   </li>
                 </ul>
@@ -127,10 +121,10 @@
                   <ul x-h-sidebar-menu>
                     <template x-for="item in group.items" :key="item.id">
                       <li x-h-sidebar-menu-item>
-                        <button x-h-sidebar-menu-button :data-active="isAppActive(item)" @click="openApp(item)">
+                        <button x-h-sidebar-menu-nav :data-active="isAppActive(item)" @click="openApp(item)">
                           <template x-if="isSvgIcon(item.icon)"><svg x-h-icon :data-link="item.icon" class="size-4" role="presentation"></svg></template>
                           <template x-if="isImageIcon(item.icon)"><img :src="item.icon" alt="" class="size-4" /></template>
-                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><i role="img" x-h-lucide :data-lucide="item.icon || 'box'"></i></template>
+                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><svg role="presentation" x-h-lucide :data-lucide="item.icon || 'box'"></svg></template>
                           <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
                         </button>
                       </li>
@@ -143,13 +137,15 @@
 
           <!-- Settings pinned to the footer; it aggregates every app's SETTING entities. -->
           <div x-h-sidebar-footer>
-            <ul x-h-sidebar-menu>
-              <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
-                <button x-h-sidebar-menu-button :data-active="settingsMode" @click="openSettings()">
-                  <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
-                </button>
-              </li>
-            </ul>
+            <nav :aria-label="T('application-core:shell.nav.settings', 'Settings')">
+              <ul x-h-sidebar-menu>
+                <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
+                  <button x-h-sidebar-menu-nav :data-active="settingsMode" @click="openSettings()">
+                    <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -160,28 +156,43 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title x-text="T('application-core:shell.nav.administration', 'Administration')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <!-- Theme: light / dark / auto through the shared `theme` store. Harmonia applies the saved
+                 colour scheme (or the OS scheme in auto mode) itself and keeps every same-origin frame
+                 and tab in sync. -->
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <!-- Notifications: the bell shows the unread count; the popover lists them. -->
             <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-              <i role="img" x-h-lucide data-lucide="bell"></i>
-              <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
-                    style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
+              <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
+              <template x-if="$store.notifications.unreadCount"><span x-h-badge-indicator data-variant="negative" x-text="$store.notifications.unreadCount"></span></template>
             </button>
-            <div class="w-80" x-h-popover data-innerclicks="true">
+            <div class="w-xs" x-h-popover data-innerclicks="true">
               <div x-h-toolbar data-size="sm">
                 <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications') + ' (' + $store.notifications.unreadCount + ')'"></span>
                 <div x-h-toolbar-spacer></div>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                        title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                        title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
               </div>
               <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm" x-text="T('application-core:shell.notifications.caughtUp', 'You\u2019re all caught up.')"></div>
               <ol x-show="$store.notifications.items.length" x-h-notification-list>
@@ -201,34 +212,35 @@ <h1 x-h-notification-title x-text="n.title"></h1>
             <!-- Logged-in user: avatar; the dropdown shows the user name and Log out. -->
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
                    launchpad renders, minus this one (the shared `shells` store). -->
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- svg placeholder: rendered in place, so the bound :data-lucide stays live (a replaced placeholder reads it once). -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
           </div>
@@ -253,7 +265,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processTasks.formTitle)"></h2>
-          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
@@ -269,7 +281,7 @@ <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processT
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
-          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.customActions.dialogOpen" :src="$store.customActions.dialogUrl"
@@ -281,10 +293,10 @@ <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
     <!-- Confirmation for an `endpoint` custom action (a generate / create-from): the POST mutates
          data the moment it fires, so the user gets an explicit chance to cancel before it runs. -->
     <div x-h-dialog-overlay :data-open="$store.customActions.confirmOpen">
-      <div x-h-dialog data-size="sm" role="alertdialog">
+      <div x-h-dialog role="alertdialog">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.customActions.confirmAction.label) || T('application-core:shell.customActions.confirmTitle', 'Run action')"></h2>
-          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <p x-h-text.muted x-text="T('application-core:shell.customActions.confirmBody', 'Run {{name}} for the selected record? This creates or changes data.', { name: ($store.customActions.confirmAction && $store.customActions.confirmAction.label) || '' })"></p>
@@ -309,7 +321,7 @@ <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.custo
         <div x-h-dialog data-prompt-dialog>
           <div x-h-dialog-header>
             <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('application-core:shell.customActions.promptTitle', 'Run action')"></h2>
-            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div x-h-dialog-content>
             <div x-show="s.promptError" x-h-alert data-variant="negative" role="alert">
@@ -320,10 +332,10 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                 <div x-h-field :style="['NUMBER','CHECKBOX','DATE'].includes(col.widget) ? '' : 'grid-column: 1 / -1'">
                   <label x-h-label x-text="col.tkey ? T(col.tkey, col.label) : col.label"></label>
                   <template x-if="col.widget === 'DROPDOWN'">
-                    <div x-h-select data-filter="contains">
+                    <div x-h-select>
                       <input x-h-select-input x-model="s.promptValues[col.name]" :placeholder="T('application-core:shell.customActions.promptSelect', 'Select...')" />
                       <div x-h-select-content>
-                        <div x-h-select-search></div>
+                        <div x-h-select-search data-filter="contains"></div>
                         <div x-h-select-list>
                           <template x-for="opt in s.promptOptionsFor(col.name)" :key="opt.value">
                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -339,7 +351,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                     <div class="hbox items-center"><span x-h-checkbox><input type="checkbox" x-model="s.promptValues[col.name]" /></span></div>
                   </template>
                   <template x-if="col.widget === 'DATE'">
-                    <div x-h-date-picker.table>
+                    <div x-h-date-picker>
                       <input type="text" :placeholder="HarmoniaFormat.dateHint()" />
                       <button x-h-date-picker-trigger aria-label="Choose date"></button>
                       <div x-h-date-picker-popup="HarmoniaFormat.pickerConfig()" x-model="s.promptValues[col.name]"></div>
diff --git a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/js/appShell.js b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/js/appShell.js
index 3571b08a39e..24e837c14f6 100644
--- a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/js/appShell.js
+++ b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/js/appShell.js
@@ -191,6 +191,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async init() {
+      // This component renders the toast overlay, so it lends its $notifications magic to the
+      // shared store (a store has no component scope of its own to reach the magic from).
+      Alpine.store('notifications').attachToaster(this.$notifications);
       const projectionsLoaded = this.loadProjections();
       try {
         const res = await fetch(PERSPECTIVES_URL, { headers: { 'Accept': 'application/json' } });
diff --git a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/views/_settings.html b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/views/_settings.html
index 404254d971a..b442751525e 100644
--- a/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/views/_settings.html
+++ b/components/resources/resources-admin/src/main/resources/META-INF/dirigible/admin/views/_settings.html
@@ -6,33 +6,36 @@
   while visible - an inline x-show=display:none block measures 0x0 and ignores data-size). No own
   x-data: it inherits the shell's `app` component (settingsItems / selectSetting / settingsUrl).
 -->
-<div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+<div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
   <div x-h-split-panel data-size="25%" data-min="200">
     <div class="vbox gap-2 p-3">
       <span x-h-text.muted class="text-sm" x-text="T('application-core:shell.settings.configAll', 'Configuration and nomenclature across all applications.')"></span>
-      <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
-           data-language preference. Selecting it renders the local detail page on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'region-language' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'region-language' })">
-        <i role="img" x-h-lucide data-lucide="globe"></i>
-        <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
-      </button>
-      <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
-           per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'tenant-configuration' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'tenant-configuration' })">
-        <i role="img" x-h-lucide data-lucide="sliders-horizontal"></i>
-        <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
-      </button>
-      <template x-for="item in visibleSettingsItems()" :key="item.id">
-        <button x-h-button data-variant="outline" class="justify-start"
-                :data-state="isSettingActive(item) ? 'selected' : ''" @click="selectSetting(item)">
-          <i role="img" x-h-lucide data-lucide="settings"></i>
-          <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
-        </button>
-      </template>
+      <ul x-h-list :aria-label="T('application-core:shell.settings.title', 'Settings')">
+        <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
+             data-language preference. Selecting it renders the local detail page on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'region-language' })" @click="selectSetting({ id: 'region-language' })">
+            <svg role="presentation" x-h-lucide data-lucide="globe"></svg>
+            <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
+          </button>
+        </li>
+        <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
+             per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'tenant-configuration' })" @click="selectSetting({ id: 'tenant-configuration' })">
+            <svg role="presentation" x-h-lucide data-lucide="sliders-horizontal"></svg>
+            <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
+          </button>
+        </li>
+        <template x-for="item in visibleSettingsItems()" :key="item.id">
+          <li x-h-list-item>
+            <button x-h-list-item-button :aria-current="isSettingActive(item)" @click="selectSetting(item)">
+              <svg role="presentation" x-h-lucide data-lucide="settings"></svg>
+              <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
+            </button>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
   <div x-h-split-panel data-size="75%" style="position: relative;">
@@ -88,7 +91,7 @@
           <input x-h-input x-model="$store.formats.number" placeholder="### ### ### ##0.00" />
         </div>
         <div class="hbox gap-2">
-          <button x-h-button data-variant="emphasized" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
+          <button x-h-button data-variant="primary" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
           <button x-h-button data-variant="outline" @click="$store.formats.reset()" x-text="T('application-core:shell.settings.resetDefaults', 'Reset to defaults')"></button>
         </div>
         <template x-if="languageWarnings().length > 0">
@@ -132,7 +135,7 @@
               </div>
             </template>
             <div class="hbox gap-2">
-              <button x-h-button data-variant="emphasized" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
+              <button x-h-button data-variant="primary" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
               <button x-h-button data-variant="outline" @click="loadTenantConfig()" x-text="T('application-core:shell.settings.reload', 'Reload')"></button>
             </div>
           </div>
diff --git a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/index.html b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/index.html
index 8479b1d35e1..6569a1d104b 100644
--- a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/index.html
+++ b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/index.html
@@ -34,12 +34,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -69,7 +63,7 @@
                     <span class="truncate font-medium" x-text="projectionLabel()"></span>
                     <span class="truncate text-xs font-normal" x-text="projectionSubtitle()"></span>
                   </div>
-                  <i x-h-lucide role="img" data-lucide="chevrons-up-down"></i>
+                  <svg x-h-lucide role="presentation" data-lucide="chevrons-up-down"></svg>
                 </button>
                 <ul x-h-menu aria-label="Projections" data-align="bottom-start">
                   <div x-h-menu-label x-text="T('application-core:shell.projections.title', 'Applications')"></div>
@@ -77,10 +71,10 @@
                     <li x-h-menu-item @click="selectProjection(p)">
                       <template x-if="isSvgIcon(p.icon)"><svg x-h-icon :data-link="p.icon" class="size-4" role="presentation"></svg></template>
                       <template x-if="isImageIcon(p.icon)"><img :src="p.icon" alt="" class="size-4" /></template>
-                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><i role="img" x-h-lucide :data-lucide="p.icon || 'box'"></i></template>
+                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><svg role="presentation" x-h-lucide :data-lucide="p.icon || 'box'"></svg></template>
                       <span class="flex-1" x-text="p.tkey ? T(p.tkey, p.label) : p.label"></span>
-                      <!-- svg placeholder: x-show on an <i x-h-lucide> is lost when the i is replaced by the svg -->
-                      <svg x-h-lucide x-show="projectionId === p.id" role="img" data-lucide="check"></svg>
+                      <!-- svg placeholder: an Alpine binding (here x-show) only survives on an svg, which is rendered in place -->
+                      <svg x-h-lucide x-show="projectionId === p.id" role="presentation" data-lucide="check"></svg>
                     </li>
                   </template>
                 </ul>
@@ -89,7 +83,7 @@
             <template x-if="projections.length <= 1">
               <div class="hbox items-center gap-2 p-1">
                 <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-                <div class="vbox gap-0">
+                <div class="vbox">
                   <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                   <span x-show="$store.branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="$store.branding.subtitle"></span>
                 </div>
@@ -104,18 +98,18 @@
               <div x-h-sidebar-group-content>
                 <ul x-h-sidebar-menu>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/dashboard')" @click="navigate('/dashboard')">
-                      <i role="img" x-h-lucide data-lucide="layout-dashboard"></i><span x-text="T('application-core:shell.nav.dashboard', 'Dashboard')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/dashboard')" @click="navigate('/dashboard')">
+                      <svg role="presentation" x-h-lucide data-lucide="layout-dashboard"></svg><span x-text="T('application-core:shell.nav.dashboard', 'Dashboard')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/inbox')" @click="navigate('/inbox')">
-                      <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/inbox')" @click="navigate('/inbox')">
+                      <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/documents')" @click="navigate('/documents')">
-                      <i role="img" x-h-lucide data-lucide="folder"></i><span x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/documents')" @click="navigate('/documents')">
+                      <svg role="presentation" x-h-lucide data-lucide="folder"></svg><span x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
                     </button>
                   </li>
                 </ul>
@@ -135,10 +129,10 @@
                   <ul x-h-sidebar-menu>
                     <template x-for="item in group.items" :key="item.id">
                       <li x-h-sidebar-menu-item>
-                        <button x-h-sidebar-menu-button :data-active="isAppActive(item)" @click="openApp(item)">
+                        <button x-h-sidebar-menu-nav :data-active="isAppActive(item)" @click="openApp(item)">
                           <template x-if="isSvgIcon(item.icon)"><svg x-h-icon :data-link="item.icon" class="size-4" role="presentation"></svg></template>
                           <template x-if="isImageIcon(item.icon)"><img :src="item.icon" alt="" class="size-4" /></template>
-                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><i role="img" x-h-lucide :data-lucide="item.icon || 'box'"></i></template>
+                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><svg role="presentation" x-h-lucide :data-lucide="item.icon || 'box'"></svg></template>
                           <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
                         </button>
                       </li>
@@ -156,8 +150,8 @@
                 <ul x-h-sidebar-menu>
                   <template x-for="r in visibleReports()" :key="r.url">
                     <li x-h-sidebar-menu-item>
-                      <button x-h-sidebar-menu-button :data-active="isReportActive(r)" @click="openReport(r)">
-                        <i role="img" x-h-lucide data-lucide="bar-chart-3"></i><span x-text="$store.reports.displayLabel(r)"></span>
+                      <button x-h-sidebar-menu-nav :data-active="isReportActive(r)" @click="openReport(r)">
+                        <svg role="presentation" x-h-lucide data-lucide="chart-column"></svg><span x-text="$store.reports.displayLabel(r)"></span>
                       </button>
                     </li>
                   </template>
@@ -168,13 +162,15 @@
 
           <!-- Settings pinned to the footer; it aggregates every app's SETTING entities. -->
           <div x-h-sidebar-footer>
-            <ul x-h-sidebar-menu>
-              <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
-                <button x-h-sidebar-menu-button :data-active="settingsMode" @click="openSettings()">
-                  <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
-                </button>
-              </li>
-            </ul>
+            <nav :aria-label="T('application-core:shell.nav.settings', 'Settings')">
+              <ul x-h-sidebar-menu>
+                <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
+                  <button x-h-sidebar-menu-nav :data-active="settingsMode" @click="openSettings()">
+                    <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -185,28 +181,43 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title x-text="T('application-core:shell.nav.applications', 'Applications')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <!-- Theme: light / dark / auto through the shared `theme` store. Harmonia applies the saved
+                 colour scheme (or the OS scheme in auto mode) itself and keeps every same-origin frame
+                 and tab in sync. -->
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <!-- Notifications: the bell shows the unread count; the popover lists them. -->
             <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-              <i role="img" x-h-lucide data-lucide="bell"></i>
-              <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
-                    style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
+              <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
+              <template x-if="$store.notifications.unreadCount"><span x-h-badge-indicator data-variant="negative" x-text="$store.notifications.unreadCount"></span></template>
             </button>
-            <div class="w-80" x-h-popover data-innerclicks="true">
+            <div class="w-xs" x-h-popover data-innerclicks="true">
               <div x-h-toolbar data-size="sm">
                 <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications') + ' (' + $store.notifications.unreadCount + ')'"></span>
                 <div x-h-toolbar-spacer></div>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                        title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                        title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
               </div>
               <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm" x-text="T('application-core:shell.notifications.caughtUp', 'You\u2019re all caught up.')"></div>
               <ol x-show="$store.notifications.items.length" x-h-notification-list>
@@ -226,26 +237,28 @@ <h1 x-h-notification-title x-text="n.title"></h1>
             <!-- Logged-in user: avatar; the dropdown shows the user name and Log out. -->
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Act as (delegated entry) - the Applications-shell entry point: arm the acting
                    identity here, then land in the My shell as that person (where the banner rules). -->
               <template x-if="actAs.entitled && !actAs.acting">
                 <li x-h-menu-item @click="actAsDialog = true">
-                  <i role="img" x-h-lucide data-lucide="user-round-cog"></i> <span x-text="T('application-core:shell.actAs.enter', 'Enter data as...')"></span>
+                  <svg role="presentation" x-h-lucide data-lucide="user-round-cog"></svg> <span x-text="T('application-core:shell.actAs.enter', 'Enter data as...')"></span>
                 </li>
               </template>
               <template x-if="actAs.acting">
                 <li x-h-menu-item @click="disarmActAs()">
-                  <i role="img" x-h-lucide data-lucide="user-round-x"></i> <span x-text="T('application-core:shell.actAs.stop', 'Stop acting as') + ' ' + actAs.acting"></span>
+                  <svg role="presentation" x-h-lucide data-lucide="user-round-x"></svg> <span x-text="T('application-core:shell.actAs.stop', 'Stop acting as') + ' ' + actAs.acting"></span>
                 </li>
               </template>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
@@ -253,20 +266,19 @@ <h1 x-h-notification-title x-text="n.title"></h1>
               <div x-h-menu-separator></div>
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- svg placeholder: rendered in place, so the bound :data-lucide stays live (a replaced placeholder reads it once). -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
           </div>
@@ -275,8 +287,8 @@ <h1 x-h-notification-title x-text="n.title"></h1>
                back office, so it is shown here too - loud, persistent, with the deadline it expires
                at and a one-click exit. Its absence here is what let an arming be forgotten (#6694). -->
           <div x-show="actAs.acting" x-cloak class="hbox items-center gap-2 px-3 py-1.5 text-sm"
-               style="background: var(--color-warning, #b45309); color: #fff;">
-            <i role="img" x-h-lucide data-lucide="user-round-cog"></i>
+               style="background: var(--warning); color: #fff;">
+            <svg role="presentation" x-h-lucide data-lucide="user-round-cog"></svg>
             <span>
               <span x-text="T('application-core:shell.actAs.bannerActing', 'Acting as')"></span>
               <b x-text="actAs.acting"></b>
@@ -310,7 +322,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processTasks.formTitle)"></h2>
-          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
@@ -326,7 +338,7 @@ <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processT
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
-          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.customActions.dialogOpen" :src="$store.customActions.dialogUrl"
@@ -338,10 +350,10 @@ <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
     <!-- Confirmation for an `endpoint` custom action (a generate / create-from): the POST mutates
          data the moment it fires, so the user gets an explicit chance to cancel before it runs. -->
     <div x-h-dialog-overlay :data-open="$store.customActions.confirmOpen">
-      <div x-h-dialog data-size="sm" role="alertdialog">
+      <div x-h-dialog role="alertdialog">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.customActions.confirmAction.label) || T('application-core:shell.customActions.confirmTitle', 'Run action')"></h2>
-          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <p x-h-text.muted x-text="T('application-core:shell.customActions.confirmBody', 'Run {{name}} for the selected record? This creates or changes data.', { name: ($store.customActions.confirmAction && $store.customActions.confirmAction.label) || '' })"></p>
@@ -366,7 +378,7 @@ <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.custo
         <div x-h-dialog data-prompt-dialog>
           <div x-h-dialog-header>
             <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('application-core:shell.customActions.promptTitle', 'Run action')"></h2>
-            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div x-h-dialog-content>
             <div x-show="s.promptError" x-h-alert data-variant="negative" role="alert">
@@ -377,10 +389,10 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                 <div x-h-field :style="['NUMBER','CHECKBOX','DATE'].includes(col.widget) ? '' : 'grid-column: 1 / -1'">
                   <label x-h-label x-text="col.tkey ? T(col.tkey, col.label) : col.label"></label>
                   <template x-if="col.widget === 'DROPDOWN'">
-                    <div x-h-select data-filter="contains">
+                    <div x-h-select>
                       <input x-h-select-input x-model="s.promptValues[col.name]" :placeholder="T('application-core:shell.customActions.promptSelect', 'Select...')" />
                       <div x-h-select-content>
-                        <div x-h-select-search></div>
+                        <div x-h-select-search data-filter="contains"></div>
                         <div x-h-select-list>
                           <template x-for="opt in s.promptOptionsFor(col.name)" :key="opt.value">
                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -396,7 +408,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                     <div class="hbox items-center"><span x-h-checkbox><input type="checkbox" x-model="s.promptValues[col.name]" /></span></div>
                   </template>
                   <template x-if="col.widget === 'DATE'">
-                    <div x-h-date-picker.table>
+                    <div x-h-date-picker>
                       <input type="text" :placeholder="HarmoniaFormat.dateHint()" />
                       <button x-h-date-picker-trigger aria-label="Choose date"></button>
                       <div x-h-date-picker-popup="HarmoniaFormat.pickerConfig()" x-model="s.promptValues[col.name]"></div>
@@ -427,7 +439,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
       <div x-h-dialog style="max-width: 460px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T('application-core:shell.actAs.title', 'Act as another person')"></h2>
-          <button x-h-dialog-close @click="actAsDialog = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="actAsDialog = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content class="vbox gap-2">
           <p class="text-sm" x-h-text.muted
diff --git a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/js/appShell.js b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/js/appShell.js
index 116248b758f..8357620d0c3 100644
--- a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/js/appShell.js
+++ b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/js/appShell.js
@@ -378,6 +378,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async init() {
+      // This component renders the toast overlay, so it lends its $notifications magic to the
+      // shared store (a store has no component scope of its own to reach the magic from).
+      Alpine.store('notifications').attachToaster(this.$notifications);
       this.loadActAs(); // fire-and-forget: the menu entry appears when the state arrives
       // The arming expires server-side; re-read it when the tab comes back so the banner is not
       // still claiming an identity the platform has already dropped.
diff --git a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_dashboard.html b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_dashboard.html
index b7fd99fff05..f17e8ce89b4 100644
--- a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_dashboard.html
+++ b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_dashboard.html
@@ -22,7 +22,7 @@ <h1 class="text-2xl font-bold" x-text="T('application-core:shell.nav.dashboard',
          Clicking a tile opens the full report. Values come from the shared reports store. -->
     <div class="vbox gap-3" x-show="dashKpiReports().length > 0" x-cloak>
       <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <i role="img" x-h-lucide data-lucide="gauge" class="size-4"></i><span x-text="T('application-core:shell.dashboard.kpis', 'Key Indicators')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="gauge" class="size-4"></svg><span x-text="T('application-core:shell.dashboard.kpis', 'Key Indicators')"></span>
       </div>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <template x-for="r in dashKpiReports()" :key="r.name">
@@ -32,7 +32,7 @@ <h1 class="text-2xl font-bold" x-text="T('application-core:shell.nav.dashboard',
                @keydown.enter.prevent="openReport(r)">
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide :data-lucide="r.widget.icon" class="size-4"></i><span x-text="$store.reports.widgetLabel(r)"></span>
+                <svg role="presentation" x-h-lucide :data-lucide="r.widget.icon" class="size-4"></svg><span x-text="$store.reports.widgetLabel(r)"></span>
               </div>
             </div>
             <div x-h-card-content>
@@ -45,28 +45,29 @@ <h1 class="text-2xl font-bold" x-text="T('application-core:shell.nav.dashboard',
                 </div>
               </template>
               <template x-if="r.widget.kind === 'list'">
-                <div class="overflow-x-auto">
+                <div>
                   <template x-if="!$store.reports.widgetState(r).loaded"><div x-h-skeleton class="w-full h-9"></div></template>
                   <p x-show="$store.reports.widgetState(r).error" x-h-text.muted class="text-3xl font-bold">—</p>
-                  <table x-show="$store.reports.widgetState(r).loaded && !$store.reports.widgetState(r).error" class="w-full text-sm">
-                    <thead>
-                      <tr>
-                        <template x-for="c in $store.reports.widgetColumns(r)" :key="c.alias">
-                          <th class="py-1 pr-3 text-left font-semibold text-muted-foreground"
-                              :class="$store.reports.widgetAlignClass(c)" x-text="c.label"></th>
-                        </template>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <template x-for="(row, i) in $store.reports.widgetRows(r)" :key="i">
-                        <tr>
+                  <div x-show="$store.reports.widgetState(r).loaded && !$store.reports.widgetState(r).error" x-h-table-container>
+                    <table x-h-table>
+                      <thead x-h-table-header>
+                        <tr x-h-table-row>
                           <template x-for="c in $store.reports.widgetColumns(r)" :key="c.alias">
-                            <td class="py-1 pr-3" :class="$store.reports.widgetAlignClass(c)" x-text="$store.reports.widgetCellText(r, row, c)"></td>
+                            <th x-h-table-head scope="col" :class="$store.reports.widgetAlignClass(c)" x-text="c.label"></th>
                           </template>
                         </tr>
-                      </template>
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody x-h-table-body>
+                        <template x-for="(row, i) in $store.reports.widgetRows(r)" :key="i">
+                          <tr x-h-table-row>
+                            <template x-for="c in $store.reports.widgetColumns(r)" :key="c.alias">
+                              <td x-h-table-cell :class="$store.reports.widgetAlignClass(c)" x-text="$store.reports.widgetCellText(r, row, c)"></td>
+                            </template>
+                          </tr>
+                        </template>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </template>
             </div>
@@ -79,7 +80,7 @@ <h1 class="text-2xl font-bold" x-text="T('application-core:shell.nav.dashboard',
          above; the sidebar Reports section still lists them all). -->
     <div class="vbox gap-3" x-show="dashPreviewReports().length > 0" x-cloak>
       <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <i role="img" x-h-lucide data-lucide="bar-chart-3" class="size-4"></i><span x-text="T('application-core:shell.nav.reports', 'Reports')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="T('application-core:shell.nav.reports', 'Reports')"></span>
       </div>
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
         <template x-for="r in dashPreviewReports()" :key="r.url">
@@ -87,12 +88,12 @@ <h1 class="text-2xl font-bold" x-text="T('application-core:shell.nav.dashboard',
             <div x-h-card-header>
               <h3 x-h-card-title class="hbox items-center gap-2 cursor-pointer"
                   @click="openReport(r)">
-                <i role="img" x-h-lucide data-lucide="bar-chart-3" class="size-4"></i><span x-text="$store.reports.displayLabel(r)"></span>
+                <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="$store.reports.displayLabel(r)"></span>
               </h3>
               <div x-h-card-action>
                 <button x-h-button data-variant="transparent" data-size="icon-sm"
                         @click="openReport(r)" aria-label="Open report">
-                  <i role="img" x-h-lucide data-lucide="arrow-up-right"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="arrow-up-right"></svg>
                 </button>
               </div>
             </div>
diff --git a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_settings.html b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_settings.html
index ca490939e00..3919955725b 100644
--- a/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_settings.html
+++ b/components/resources/resources-application/src/main/resources/META-INF/dirigible/application/views/_settings.html
@@ -13,41 +13,44 @@
      every other view routed into #app (_dashboard/_inbox/_documents/_reports) and the per-project
      settings view. -->
 <div class="vbox size-full">
-<div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+<div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
   <div x-h-split-panel data-size="25%" data-min="200">
     <div class="vbox gap-2 p-3">
       <span x-h-text.muted class="text-sm" x-text="T('application-core:shell.settings.configAll', 'Configuration and nomenclature across all applications.')"></span>
-      <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
-           data-language preference. Selecting it renders the local detail page on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'region-language' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'region-language' })">
-        <i role="img" x-h-lucide data-lucide="globe"></i>
-        <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
-      </button>
-      <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
-           per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'tenant-configuration' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'tenant-configuration' })">
-        <i role="img" x-h-lucide data-lucide="sliders-horizontal"></i>
-        <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
-      </button>
-      <!-- Document Numbering: a built-in settings entry - the per-tenant document-number counters
-           (engine-numbering). Selecting it renders the local detail on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'document-numbering' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'document-numbering' })">
-        <i role="img" x-h-lucide data-lucide="hash"></i>
-        <span x-text="T('application-core:shell.settings.numbering', 'Document Numbering')"></span>
-      </button>
-      <template x-for="item in visibleSettingsItems()" :key="item.id">
-        <button x-h-button data-variant="outline" class="justify-start"
-                :data-state="isSettingActive(item) ? 'selected' : ''" @click="selectSetting(item)">
-          <i role="img" x-h-lucide data-lucide="settings"></i>
-          <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
-        </button>
-      </template>
+      <ul x-h-list :aria-label="T('application-core:shell.settings.title', 'Settings')">
+        <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
+             data-language preference. Selecting it renders the local detail page on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'region-language' })" @click="selectSetting({ id: 'region-language' })">
+            <svg role="presentation" x-h-lucide data-lucide="globe"></svg>
+            <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
+          </button>
+        </li>
+        <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
+             per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'tenant-configuration' })" @click="selectSetting({ id: 'tenant-configuration' })">
+            <svg role="presentation" x-h-lucide data-lucide="sliders-horizontal"></svg>
+            <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
+          </button>
+        </li>
+        <!-- Document Numbering: a built-in settings entry - the per-tenant document-number counters
+             (engine-numbering). Selecting it renders the local detail on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'document-numbering' })" @click="selectSetting({ id: 'document-numbering' })">
+            <svg role="presentation" x-h-lucide data-lucide="hash"></svg>
+            <span x-text="T('application-core:shell.settings.numbering', 'Document Numbering')"></span>
+          </button>
+        </li>
+        <template x-for="item in visibleSettingsItems()" :key="item.id">
+          <li x-h-list-item>
+            <button x-h-list-item-button :aria-current="isSettingActive(item)" @click="selectSetting(item)">
+              <svg role="presentation" x-h-lucide data-lucide="settings"></svg>
+              <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
+            </button>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
   <div x-h-split-panel data-size="75%" style="position: relative;">
@@ -103,7 +106,7 @@
           <input x-h-input x-model="$store.formats.number" placeholder="### ### ### ##0.00" />
         </div>
         <div class="hbox gap-2">
-          <button x-h-button data-variant="emphasized" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
+          <button x-h-button data-variant="primary" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
           <button x-h-button data-variant="outline" @click="$store.formats.reset()" x-text="T('application-core:shell.settings.resetDefaults', 'Reset to defaults')"></button>
         </div>
         <template x-if="languageWarnings().length > 0">
@@ -147,7 +150,7 @@
               </div>
             </template>
             <div class="hbox gap-2">
-              <button x-h-button data-variant="emphasized" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
+              <button x-h-button data-variant="primary" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
               <button x-h-button data-variant="outline" @click="loadTenantConfig()" x-text="T('application-core:shell.settings.reload', 'Reload')"></button>
             </div>
           </div>
@@ -189,23 +192,23 @@
                      whole list is off-screen); it lights up only when the row's edits differ from
                      what was loaded, and only what changed is written. -->
                 <div class="hbox gap-2 items-end">
-                  <div class="vbox gap-0" style="width: 10rem;">
+                  <div class="vbox" style="width: 10rem;">
                     <span x-h-text.muted class="text-xs" x-text="T('application-core:shell.settings.numberingPrefix', 'Prefix')"></span>
                     <input x-h-input x-model="row.prefix" />
                   </div>
-                  <div class="vbox gap-0" style="width: 7rem;">
+                  <div class="vbox" style="width: 7rem;">
                     <span x-h-text.muted class="text-xs" x-text="T('application-core:shell.settings.numberingSize', 'Total width')"></span>
                     <input x-h-input type="number" min="1" max="40" x-model="row.size" />
                   </div>
                   <!-- The base row of a PARTITIONED series is only the shape template new partitions
                        inherit - allocation always draws from a partition row - so it offers no Next. -->
                   <template x-if="!numberingIsShapeTemplate(row)">
-                    <div class="vbox gap-0" style="width: 9rem;">
+                    <div class="vbox" style="width: 9rem;">
                       <span x-h-text.muted class="text-xs" x-text="T('application-core:shell.settings.numberingNext', 'Next')"></span>
                       <input x-h-input type="number" min="1" x-model="row.next" />
                     </div>
                   </template>
-                  <button x-h-button data-variant="emphasized" data-size="sm"
+                  <button x-h-button data-variant="primary" data-size="sm"
                           :disabled="row.saving || !numberingDirty(row)"
                           @click="saveNumberingRow(row)"
                           x-text="T('application-core:shell.settings.save', 'Save')"></button>
diff --git a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/css/app.css b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/css/app.css
index 46ec49bc212..ebc17d85c6c 100644
--- a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/css/app.css
+++ b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/css/app.css
@@ -42,22 +42,22 @@ body {
 
 .builder-message.user {
   align-self: flex-end;
-  background: var(--color-primary, #3584e4);
-  color: var(--color-primary-foreground, #ffffff);
+  background: var(--primary);
+  color: var(--primary-foreground);
 }
 
 .builder-message.assistant,
 .builder-message.note {
   align-self: flex-start;
-  background: var(--color-muted, #f1f3f5);
-  color: var(--color-foreground, #1d2d3e);
+  background: var(--muted);
+  color: var(--foreground);
 }
 
 .builder-message.error {
   align-self: stretch;
   max-width: 100%;
-  background: var(--color-negative-muted, #fdeaea);
-  color: var(--color-negative, #a51d2d);
+  background: color-mix(in oklab, var(--negative) 15%, var(--background));
+  color: var(--negative);
 }
 
 /* A requirement the intent could not express. Deliberately NOT styled like the assistant's prose:
@@ -66,13 +66,13 @@ body {
 .builder-message.boundary {
   align-self: stretch;
   max-width: 100%;
-  background: var(--color-warning-muted, #fdf3e0);
-  color: var(--color-foreground, #1d2d3e);
-  border-left: 3px solid var(--color-warning, #e9a319);
+  background: color-mix(in oklab, var(--warning) 15%, var(--background));
+  color: var(--foreground);
+  border-left: 3px solid var(--warning);
 }
 
 .builder-thinking {
-  color: var(--color-muted-foreground, #6a6d70);
+  color: var(--muted-foreground);
 }
 
 .builder-welcome {
@@ -91,7 +91,7 @@ body {
 
 .builder-composer {
   padding: 0.75rem;
-  border-top: 1px solid var(--color-border, #e5e5e5);
+  border-top: 1px solid var(--border);
   align-items: flex-end;
 }
 
@@ -108,16 +108,16 @@ body {
 .builder-issues {
   padding: 0.75rem;
   border-radius: 0.5rem;
-  background: var(--color-negative-muted, #fdeaea);
-  color: var(--color-negative, #a51d2d);
+  background: color-mix(in oklab, var(--negative) 15%, var(--background));
+  color: var(--negative);
   overflow-wrap: anywhere;
 }
 
 .builder-warnings {
   padding: 0.75rem;
   border-radius: 0.5rem;
-  background: var(--color-warning-muted, #fdf3e3);
-  color: var(--color-warning, #b45309);
+  background: color-mix(in oklab, var(--warning) 15%, var(--background));
+  color: var(--warning);
   overflow-wrap: anywhere;
 }
 
@@ -149,19 +149,19 @@ body {
   margin: 0.75rem 0 0.25rem 0;
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--color-foreground, #1d2d3e);
+  color: var(--foreground);
 }
 
 .builder-diagrams .intent-diagram {
   width: 100%;
   overflow: auto;
-  border: 1px solid var(--color-border, #e5e5e5);
+  border: 1px solid var(--border);
   border-radius: 0.5rem;
-  background: var(--color-card, #ffffff);
+  background: var(--card);
 }
 
 .builder-diagrams .intent-diagram-empty {
-  color: var(--color-muted-foreground, #6a6d70);
+  color: var(--muted-foreground);
   font-style: italic;
   font-size: 0.875rem;
 }
diff --git a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/index.html b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/index.html
index 9b944b9e788..20f40f0c587 100644
--- a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/index.html
+++ b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/index.html
@@ -38,11 +38,6 @@
     <link href="/services/web/platform-core/ui/styles/fonts.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
 
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
 
     <!-- mxGraph: the canvas renders with the same engine the EDM / BPMN modelers and the Intent
          Editor use. Classic globals, so it loads before anything that draws. -->
@@ -65,20 +60,20 @@
              project behind an app is a technical detail the user never has to name or manage. -->
         <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="sm" class="ml-2">
           <span x-text="$store.intent.appName || T('builder:builder.apps.untitled', 'New app')"></span>
-          <i role="img" x-h-lucide data-lucide="chevrons-up-down"></i>
+          <svg role="presentation" x-h-lucide data-lucide="chevrons-up-down"></svg>
         </button>
         <ul x-h-menu aria-label="Apps" data-align="bottom-start">
           <div x-h-menu-label x-text="T('builder:builder.apps.title', 'Your apps')"></div>
           <template x-for="project in $store.intent.apps" :key="project">
             <li x-h-menu-item @click="openApp(project)">
-              <i role="img" x-h-lucide data-lucide="layout-grid"></i>
+              <svg role="presentation" x-h-lucide data-lucide="layout-grid"></svg>
               <span class="flex-1" x-text="project"></span>
-              <svg x-h-lucide x-show="$store.intent.project === project" role="img" data-lucide="check"></svg>
+              <svg x-h-lucide x-show="$store.intent.project === project" role="presentation" data-lucide="check"></svg>
             </li>
           </template>
           <div x-h-menu-separator></div>
           <li x-h-menu-item @click="newApp()">
-            <i role="img" x-h-lucide data-lucide="plus"></i>
+            <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
             <span x-text="T('builder:builder.apps.new', 'New app')"></span>
           </li>
         </ul>
@@ -91,34 +86,47 @@
           <!-- An <svg> placeholder, not an <i>: x-h-lucide REPLACES an <i> with the rendered svg, so
                any Alpine binding on it would be lost - the plugin throws rather than lose it, and an
                uncaught throw here aborts Alpine's walk over everything below. -->
-          <svg x-h-lucide role="img" :data-lucide="$store.publish.running ? 'loader-circle' : 'rocket'"
+          <svg x-h-lucide role="presentation" :data-lucide="$store.publish.running ? 'loader-circle' : 'rocket'"
                :class="$store.publish.running ? 'animate-spin' : ''"></svg>
           <span x-text="$store.publish.running ? $store.publish.activity : T('builder:builder.publish', 'Publish')"></span>
         </button>
 
         <button x-h-button data-variant="transparent" data-size="icon-sm" @click="toggleSource()"
                 :title="T('builder:builder.source.view', 'View source')" aria-label="View source">
-          <i role="img" x-h-lucide data-lucide="file-code-2"></i>
+          <svg role="presentation" x-h-lucide data-lucide="file-code-2"></svg>
         </button>
 
-        <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-          <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-          <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+        <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+          <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
         </button>
+        <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+          <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+            <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+            <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+          </li>
+          <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+            <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+            <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+          </li>
+          <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+            <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+            <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+          </li>
+        </ul>
 
         <!-- Notifications: the bell shows the unread count; the popover lists them. -->
         <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-          <i role="img" x-h-lucide data-lucide="bell"></i>
+          <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
           <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
                 style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
         </button>
-        <div class="w-80" x-h-popover data-innerclicks="true">
+        <div class="w-xs" x-h-popover data-innerclicks="true">
           <div x-h-toolbar data-size="sm">
             <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications')"></span>
             <div x-h-toolbar-spacer></div>
             <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                    title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                    title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
           </div>
           <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm"
                x-text="T('application-core:shell.notifications.caughtUp', 'You’re all caught up.')"></div>
@@ -138,34 +146,36 @@ <h1 x-h-notification-title x-text="n.title"></h1>
         <!-- Logged-in user: avatar; the dropdown shows the user name and Log out. -->
         <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                 :aria-label="$store.currentUser.name || 'Account'">
-          <i role="img" x-h-lucide data-lucide="circle-user"></i>
+          <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
         </button>
         <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-          <div x-h-tile class="mb-1">
-            <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-            <div x-h-tile-content>
-              <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+          <li role="presentation">
+            <div x-h-tile class="mb-1">
+              <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+              <div x-h-tile-content>
+                <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              </div>
             </div>
-          </div>
+          </li>
           <div x-h-menu-separator></div>
           <!-- Switch shells without the detour through Home: the same `platform-shells` list the
                launchpad renders, minus this one (the shared `shells` store). -->
           <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
           <li x-h-menu-item @click="$store.shells.openHome()">
-            <i role="img" x-h-lucide data-lucide="house"></i>
+            <svg role="presentation" x-h-lucide data-lucide="house"></svg>
             <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
           </li>
           <template x-for="shell in $store.shells.items" :key="shell.id">
             <li x-h-menu-item @click="$store.shells.open(shell)">
               <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
                    :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-              <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+              <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
               <span x-text="shell.label"></span>
             </li>
           </template>
           <div x-h-menu-separator></div>
           <li x-h-menu-item data-variant="negative" @click="logout()">
-            <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+            <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
           </li>
         </ul>
       </div>
@@ -173,8 +183,8 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <!-- The assistant needs a server-side API key; without one this shell can do nothing, so the
            notice is persistent rather than a transient bubble. -->
       <div x-show="$store.conversation.notConfigured" x-cloak class="hbox items-center gap-2 px-3 py-1.5 text-sm"
-           style="background: var(--color-warning, #b45309); color: #fff;">
-        <i role="img" x-h-lucide data-lucide="triangle-alert"></i>
+           style="background: var(--warning); color: var(--warning-foreground);">
+        <svg role="presentation" x-h-lucide data-lucide="triangle-alert"></svg>
         <span x-text="T('builder:builder.notConfigured', 'The AI assistant is not configured on this instance. Set DIRIGIBLE_INTENT_AI_API_KEY on the server and reload this page.')"></span>
       </div>
 
@@ -210,7 +220,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
 
               <template x-if="$store.conversation.busy">
                 <div class="builder-message assistant builder-thinking hbox items-center gap-2">
-                  <i role="img" x-h-lucide data-lucide="loader-circle" class="animate-spin"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="loader-circle" class="animate-spin"></svg>
                   <span x-text="$store.conversation.phase"></span>
                 </div>
               </template>
@@ -224,7 +234,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
               <button x-h-button data-variant="primary" data-size="icon" @click="send()"
                       :disabled="$store.conversation.busy || !$store.conversation.input.trim()"
                       aria-label="Send" title="Send">
-                <i role="img" x-h-lucide data-lucide="send-horizontal"></i>
+                <svg role="presentation" x-h-lucide data-lucide="send-horizontal"></svg>
               </button>
             </div>
           </div>
@@ -242,7 +252,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
                 <ul class="vbox gap-2">
                   <template x-for="step in $store.publish.steps" :key="step.key">
                     <li class="hbox items-center gap-2 text-sm" :class="step.status === 'pending' ? 'opacity-50' : ''">
-                      <svg x-h-lucide role="img" :data-lucide="stepIcon(step.status)"
+                      <svg x-h-lucide role="presentation" :data-lucide="stepIcon(step.status)"
                            :class="step.status === 'running' ? 'animate-spin' : ''"></svg>
                       <span x-text="step.label"></span>
                       <span x-show="step.detail" x-h-text.muted x-text="step.detail"></span>
@@ -278,12 +288,12 @@ <h1 x-h-notification-title x-text="n.title"></h1>
                   <div class="hbox gap-2 flex-wrap">
                     <a x-show="$store.publish.appUrl" x-h-button data-variant="primary" data-size="sm"
                        :href="$store.publish.appUrl" target="_blank" rel="noopener">
-                      <i role="img" x-h-lucide data-lucide="external-link"></i>
+                      <svg role="presentation" x-h-lucide data-lucide="external-link"></svg>
                       <span x-text="$store.intent.appName"></span>
                     </a>
                     <template x-for="shell in $store.publish.shells" :key="shell.id">
                       <a x-h-button data-variant="outline" data-size="sm" :href="shell.path" target="_blank" rel="noopener">
-                        <i role="img" x-h-lucide data-lucide="external-link"></i>
+                        <svg role="presentation" x-h-lucide data-lucide="external-link"></svg>
                         <span x-text="shell.label"></span>
                       </a>
                     </template>
@@ -314,7 +324,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
                 <ul class="vbox gap-2">
                   <template x-for="step in $store.publish.steps" :key="step.key">
                     <li class="hbox items-center gap-2 text-sm" :class="step.status === 'pending' ? 'opacity-50' : ''">
-                      <svg x-h-lucide role="img" :data-lucide="stepIcon(step.status)"></svg>
+                      <svg x-h-lucide role="presentation" :data-lucide="stepIcon(step.status)"></svg>
                       <span x-text="step.label"></span>
                     </li>
                   </template>
@@ -331,7 +341,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
 
                 <div x-show="$store.publish.problems.length" class="builder-issues vbox gap-2">
                   <template x-for="problem in $store.publish.problems" :key="problem.id">
-                    <div class="vbox gap-0">
+                    <div class="vbox">
                       <span class="text-sm font-medium" x-text="problem.location"></span>
                       <span class="text-sm" x-text="problem.cause"></span>
                       <span class="text-xs" x-h-text.muted x-text="problem.category"></span>
@@ -378,7 +388,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <div x-h-dialog style="width: 92vw; max-width: 900px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T('builder:builder.source.title', 'app.intent')"></h2>
-          <button x-h-dialog-close @click="sourceOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="sourceOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <pre class="builder-source" x-text="$store.intent.yaml || T('builder:builder.source.emptyText', 'Nothing yet.')"></pre>
diff --git a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/js/appShell.js b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/js/appShell.js
index 52bddcf4616..bc1a013ec75 100644
--- a/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/js/appShell.js
+++ b/components/resources/resources-builder/src/main/resources/META-INF/dirigible/builder/js/appShell.js
@@ -31,6 +31,9 @@ document.addEventListener('alpine:init', () => {
     ],
 
     async init() {
+      // This component renders the toast overlay, so it lends its $notifications magic to the
+      // shared store (a store has no component scope of its own to reach the magic from).
+      Alpine.store('notifications').attachToaster(this.$notifications);
       const intent = Alpine.store('intent');
       // Fire-and-forget: the "not configured" banner appears as soon as the answer arrives, without
       // holding up the rest of the shell.
diff --git a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/index.html b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/index.html
index 3d6baa569e0..ccf16cb5067 100644
--- a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/index.html
+++ b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/index.html
@@ -22,12 +22,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -47,7 +41,7 @@
           <div x-h-sidebar-header>
             <div class="hbox items-center gap-2 p-1">
               <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-              <div class="vbox gap-0">
+              <div class="vbox">
                 <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                 <span x-h-text.muted class="text-xs leading-tight" x-text="T('database:shell.title', 'Database')"></span>
               </div>
@@ -60,14 +54,14 @@
               <div x-h-sidebar-group-content>
                 <ul x-h-sidebar-menu>
                   <li x-h-sidebar-menu-item>
-                    <button id="database-nav-explorer" x-h-sidebar-menu-button :data-active="isActive('/explorer')" @click="navigate('/explorer')">
-                      <i role="img" x-h-lucide data-lucide="database"></i>
+                    <button id="database-nav-explorer" x-h-sidebar-menu-nav :data-active="isActive('/explorer')" @click="navigate('/explorer')">
+                      <svg role="presentation" x-h-lucide data-lucide="database"></svg>
                       <span class="flex-1" x-text="T('database:shell.nav.explorer', 'Explorer')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="database-nav-sql" x-h-sidebar-menu-button :data-active="isActive('/sql')" @click="navigate('/sql')">
-                      <i role="img" x-h-lucide data-lucide="square-terminal"></i>
+                    <button id="database-nav-sql" x-h-sidebar-menu-nav :data-active="isActive('/sql')" @click="navigate('/sql')">
+                      <svg role="presentation" x-h-lucide data-lucide="square-terminal"></svg>
                       <span class="flex-1" x-text="T('database:shell.nav.sql', 'SQL Console')"></span>
                     </button>
                   </li>
@@ -81,7 +75,7 @@
             <ul x-h-sidebar-menu>
               <li x-h-sidebar-menu-item>
                 <a x-h-sidebar-menu-button href="/services/web/shell-ide/" target="_blank" rel="noopener">
-                  <i role="img" x-h-lucide data-lucide="external-link"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="external-link"></svg>
                   <span x-text="T('database:shell.nav.workbench', 'Open in Workbench')"></span>
                 </a>
               </li>
@@ -96,46 +90,60 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title class="shrink-0" x-text="T('database:shell.title', 'Database')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
                    launchpad renders, minus this one (the shared `shells` store). -->
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- An svg placeholder is rendered in place, so the bound :data-lucide stays reactive. -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg>
                 <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
diff --git a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_explorer.html b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_explorer.html
index 22f515851a3..51fecea04fa 100644
--- a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_explorer.html
+++ b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_explorer.html
@@ -12,7 +12,7 @@
     <span x-h-toolbar-title class="shrink-0" x-text="T('database:explorer.title', 'Explorer')"></span>
     <div x-h-toolbar-spacer></div>
 
-    <div x-h-select data-filter="contains" class="w-64" x-show="state.datasources.length">
+    <div x-h-select class="w-3xs" x-show="state.datasources.length">
       <!-- x-model on x-h-select-input holds the VALUE; the input displays the matched option's
            label. It writes straight onto the store, so the handler only reacts to the change. -->
       <input x-h-select-input id="database-datasource" x-model="state.datasource"
@@ -47,7 +47,7 @@
     </div>
   </div>
 
-  <div x-show="state.datasources.length" x-h-split class="bk-stretch flex-1"
+  <div x-show="state.datasources.length" x-h-split class="flex-1"
        data-orientation="horizontal" data-variant="border">
 
     <!-- The metadata tree -->
diff --git a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_sql.html b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_sql.html
index 726f6ed3bac..ab05d423ff0 100644
--- a/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_sql.html
+++ b/components/resources/resources-database/src/main/resources/META-INF/dirigible/database/views/_sql.html
@@ -11,7 +11,7 @@
     <span x-h-toolbar-title class="shrink-0" x-text="T('database:sql.title', 'SQL Console')"></span>
     <div x-h-toolbar-spacer></div>
 
-    <div x-h-select data-filter="contains" class="w-64" x-show="$store.explorer.datasources.length">
+    <div x-h-select class="w-3xs" x-show="$store.explorer.datasources.length">
       <input x-h-select-input id="database-sql-datasource" x-model="$store.explorer.datasource"
              @change="$store.explorer.onDatasourceChanged()"
              :aria-label="T('database:explorer.datasource', 'Datasource')"
@@ -27,7 +27,7 @@
 
     <button id="database-sql-run" x-h-button data-variant="primary" data-size="sm" @click="run()"
             :disabled="!datasource || !state.statement.trim() || state.running">
-      <span x-show="state.running" x-h-spinner data-size="sm"></span>
+      <template x-if="state.running"><span x-h-spinner class="size-4"></span></template>
       <svg x-h-lucide role="presentation" x-show="!state.running" data-lucide="play" class="size-4"></svg>
       <span x-text="T('database:sql.run', 'Run')"></span>
     </button>
@@ -37,12 +37,12 @@
     </button>
   </div>
 
-  <div x-h-split class="bk-stretch flex-1" data-orientation="vertical" data-variant="border">
+  <div x-h-split class="flex-1" data-orientation="vertical" data-variant="border">
 
     <!-- The statement -->
     <div x-h-split-panel data-size="40%" data-min="120">
       <div class="vbox size-full p-2">
-        <textarea id="database-sql-statement" class="size-full font-mono text-sm rounded-md border border-border bg-transparent p-2"
+        <textarea id="database-sql-statement" x-h-textarea class="size-full font-mono text-sm"
                   spellcheck="false"
                   :placeholder="T('database:sql.placeholder', 'SELECT * FROM ...   (Ctrl/Cmd+Enter to run)')"
                   :aria-label="T('database:sql.title', 'SQL Console')"
@@ -103,7 +103,6 @@
     <div x-h-dialog>
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('database:sql.confirmTitle', 'Run a write statement?')"></h2>
-        <p x-h-dialog-description></p>
         <button x-h-dialog-close @click="confirmOpen = false" :aria-label="T('database:explorer.close', 'Close')">
           <svg x-h-lucide role="presentation" data-lucide="x"></svg>
         </button>
diff --git a/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/index.html b/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/index.html
index 990b4a1ba47..067fe5a38cc 100644
--- a/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/index.html
+++ b/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/index.html
@@ -31,12 +31,6 @@
     <title>Home</title>
 
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
     <style>
       .home-entry { text-decoration: none; color: inherit; }
       /* The arrow is the "this is a link" affordance - it slides in on hover/keyboard focus. */
@@ -56,20 +50,32 @@
     <div x-h-toolbar data-variant="transparent" x-cloak>
       <div class="hbox items-center gap-2 p-1">
         <img x-show="branding.logo" :src="branding.logo" :alt="branding.name" class="size-5" />
-        <div class="vbox gap-0">
+        <div class="vbox">
           <span class="font-bold leading-tight" x-text="branding.name"></span>
           <span x-show="branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="branding.subtitle"></span>
         </div>
       </div>
       <div x-h-toolbar-spacer></div>
-      <button x-h-button data-variant="transparent" data-size="icon-sm" @click="toggleTheme()"
-              :aria-label="dark ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-        <svg x-h-lucide x-show="!dark" role="img" data-lucide="moon"></svg>
-        <svg x-h-lucide x-show="dark" role="img" data-lucide="sun"></svg>
+      <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm" aria-label="Theme" title="Theme">
+        <svg x-h-lucide role="presentation" :data-lucide="themeIcon"></svg>
       </button>
+      <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+        <li x-h-menu-radio-item="'light'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+          <span>Light</span>
+        </li>
+        <li x-h-menu-radio-item="'dark'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+          <span>Dark</span>
+        </li>
+        <li x-h-menu-radio-item="'auto'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+          <span>Auto</span>
+        </li>
+      </ul>
       <span class="text-sm text-muted-foreground px-2" x-show="userName" x-text="userName"></span>
       <button x-h-button data-variant="transparent" data-size="sm" @click="logout()">
-        <i role="img" x-h-lucide data-lucide="log-out"></i> <span>Log out</span>
+        <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span>Log out</span>
       </button>
     </div>
 
@@ -94,12 +100,12 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
           <template x-for="s in primaryShells" :key="s.id">
             <a class="home-entry home-tile vbox gap-3 rounded-lg border border-border bg-card p-5" :href="s.path">
               <span class="home-tile-icon hbox items-center justify-center rounded-md bg-muted size-11 flex-none">
-                <i role="img" x-h-lucide :data-lucide="s.icon || iconFor(s.id)" class="size-5"></i>
+                <svg role="presentation" x-h-lucide :data-lucide="s.icon || iconFor(s.id)" class="size-5"></svg>
               </span>
               <span class="vbox min-w-0" style="gap: .15rem;">
                 <span class="hbox items-center gap-2 text-lg font-semibold">
                   <span x-text="s.label"></span>
-                  <i role="img" x-h-lucide data-lucide="arrow-right" class="home-entry-arrow size-4"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="arrow-right" class="home-entry-arrow size-4"></svg>
                 </span>
                 <span class="text-sm text-muted-foreground" x-text="s.description || descriptionFor(s.id)"></span>
               </span>
@@ -112,13 +118,13 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
              style="margin-top: 2rem; padding-top: 1rem; gap: .25rem;">
           <template x-for="s in secondaryShells" :key="s.id">
             <a class="home-entry hbox items-center gap-3 rounded-md p-3 hover:bg-muted" :href="s.path">
-              <i role="img" x-h-lucide :data-lucide="s.icon || iconFor(s.id)" class="size-4 text-muted-foreground flex-none"></i>
+              <svg role="presentation" x-h-lucide :data-lucide="s.icon || iconFor(s.id)" class="size-4 text-muted-foreground flex-none"></svg>
               <span class="text-sm font-medium flex-none" x-text="s.label"></span>
               <!-- The description is the first thing to give up room on a narrow window. -->
               <span class="text-sm text-muted-foreground truncate hidden sm:block"
                     x-text="s.description || descriptionFor(s.id)"></span>
               <span class="flex-1"></span>
-              <i role="img" x-h-lucide data-lucide="arrow-right" class="home-entry-arrow size-4 text-muted-foreground flex-none"></i>
+              <svg role="presentation" x-h-lucide data-lucide="arrow-right" class="home-entry-arrow size-4 text-muted-foreground flex-none"></svg>
             </a>
           </template>
         </div>
diff --git a/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/js/home.js b/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/js/home.js
index e1e1205613a..0ab204e02b0 100644
--- a/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/js/home.js
+++ b/components/resources/resources-home/src/main/resources/META-INF/dirigible/home/js/home.js
@@ -61,7 +61,8 @@ document.addEventListener('alpine:init', () => {
         userName: '',
         shells: [],
         loaded: false,
-        dark: false,
+        _themeMode: 'auto',   // 'light' | 'dark' | 'auto' - the selection
+        themeScheme: 'light', // the scheme applied right now
 
         async init() {
             const b = window.PlatformBranding || (window.top && window.top.PlatformBranding) || {};
@@ -72,7 +73,7 @@ document.addEventListener('alpine:init', () => {
                 const link = document.querySelector('link[rel="icon"]');
                 if (link) link.href = favicon;
             }
-            try { this.dark = window.Harmonia && Harmonia.getColorScheme() === 'dark'; } catch (e) { this.dark = false; }
+            this.initTheme();
             await Promise.all([this.loadUser(), this.loadShells()]);
             this.loaded = true;
         },
@@ -115,9 +116,36 @@ document.addEventListener('alpine:init', () => {
         iconFor(id) { return ICONS[id] || 'box'; },
         descriptionFor(id) { return DESCRIPTIONS[id] || ''; },
 
-        toggleTheme() {
-            this.dark = !this.dark;
-            if (window.Harmonia) Harmonia.setColorScheme(this.dark ? 'dark' : 'light');
+        // Harmonia owns the colour scheme: it persists the selection, applies the `.dark` class and
+        // keeps every same-origin frame and tab in sync. The listener keeps this control in step
+        // when the change is made elsewhere, or when the OS flips while `auto` is selected.
+        initTheme() {
+            if (!window.Harmonia) return;
+            this._themeMode = Harmonia.getColorScheme();
+            this.themeScheme = this.resolveScheme(this._themeMode);
+            Harmonia.addColorSchemeListener((scheme, mode) => {
+                this.themeScheme = scheme;
+                if (mode) this._themeMode = mode;
+            });
+        },
+
+        get themeMode() { return this._themeMode; },
+
+        set themeMode(value) {
+            if (value !== 'light' && value !== 'dark' && value !== 'auto') return;
+            this._themeMode = value;
+            this.themeScheme = this.resolveScheme(value);
+            if (window.Harmonia) Harmonia.setColorScheme(value);
+        },
+
+        get themeIcon() {
+            if (this._themeMode === 'auto') return 'sun-moon';
+            return this.themeScheme === 'dark' ? 'moon' : 'sun';
+        },
+
+        resolveScheme(mode) {
+            if (mode === 'light' || mode === 'dark') return mode;
+            return window.Harmonia ? Harmonia.getSystemColorScheme() : 'light';
         },
 
         logout() { window.location.replace('/logout'); },
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/index.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/index.html
index d9a7e3836f7..789f0917c59 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/index.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/index.html
@@ -22,12 +22,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -47,7 +41,7 @@
           <div x-h-sidebar-header>
             <div class="hbox items-center gap-2 p-1">
               <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-              <div class="vbox gap-0">
+              <div class="vbox">
                 <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                 <span x-h-text.muted class="text-xs leading-tight" x-text="T('monitoring:shell.title', 'Monitoring')"></span>
               </div>
@@ -60,8 +54,8 @@
               <div x-h-sidebar-group-content>
                 <ul x-h-sidebar-menu>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-overview" x-h-sidebar-menu-button :data-active="isActive('/overview')" @click="navigate('/overview')">
-                      <i role="img" x-h-lucide data-lucide="activity"></i>
+                    <button id="monitoring-nav-overview" x-h-sidebar-menu-nav :data-active="isActive('/overview')" @click="navigate('/overview')">
+                      <svg role="presentation" x-h-lucide data-lucide="activity"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.overview', 'Overview')"></span>
                       <!-- The problem count doubles as the shell's alarm: it is visible from every page. -->
                       <span x-show="$store.overview.problemCount > 0" x-h-badge data-variant="negative"
@@ -69,32 +63,32 @@
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-processes" x-h-sidebar-menu-button :data-active="isActive('/processes')" @click="navigate('/processes')">
-                      <i role="img" x-h-lucide data-lucide="workflow"></i>
+                    <button id="monitoring-nav-processes" x-h-sidebar-menu-nav :data-active="isActive('/processes')" @click="navigate('/processes')">
+                      <svg role="presentation" x-h-lucide data-lucide="workflow"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.processes', 'Processes')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-jobs" x-h-sidebar-menu-button :data-active="isActive('/jobs')" @click="navigate('/jobs')">
-                      <i role="img" x-h-lucide data-lucide="alarm-clock"></i>
+                    <button id="monitoring-nav-jobs" x-h-sidebar-menu-nav :data-active="isActive('/jobs')" @click="navigate('/jobs')">
+                      <svg role="presentation" x-h-lucide data-lucide="alarm-clock"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.jobs', 'Jobs')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-logs" x-h-sidebar-menu-button :data-active="isActive('/logs')" @click="navigate('/logs')">
-                      <i role="img" x-h-lucide data-lucide="scroll-text"></i>
+                    <button id="monitoring-nav-logs" x-h-sidebar-menu-nav :data-active="isActive('/logs')" @click="navigate('/logs')">
+                      <svg role="presentation" x-h-lucide data-lucide="scroll-text"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.logs', 'Logs')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-messaging" x-h-sidebar-menu-button :data-active="isActive('/messaging')" @click="navigate('/messaging')">
-                      <i role="img" x-h-lucide data-lucide="mails"></i>
+                    <button id="monitoring-nav-messaging" x-h-sidebar-menu-nav :data-active="isActive('/messaging')" @click="navigate('/messaging')">
+                      <svg role="presentation" x-h-lucide data-lucide="mails"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.messaging', 'Messaging')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button id="monitoring-nav-system" x-h-sidebar-menu-button :data-active="isActive('/system')" @click="navigate('/system')">
-                      <i role="img" x-h-lucide data-lucide="server"></i>
+                    <button id="monitoring-nav-system" x-h-sidebar-menu-nav :data-active="isActive('/system')" @click="navigate('/system')">
+                      <svg role="presentation" x-h-lucide data-lucide="server"></svg>
                       <span class="flex-1" x-text="T('monitoring:shell.nav.system', 'System')"></span>
                     </button>
                   </li>
@@ -108,14 +102,14 @@
             <ul x-h-sidebar-menu>
               <li x-h-sidebar-menu-item>
                 <a x-h-sidebar-menu-button href="/services/web/shell-ide/" target="_blank" rel="noopener">
-                  <i role="img" x-h-lucide data-lucide="external-link"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="external-link"></svg>
                   <span x-text="T('monitoring:shell.nav.workbench', 'Open in Workbench')"></span>
                 </a>
               </li>
             </ul>
             <!-- Which build this is - the first question about an instance, so it is on every page.
                  The System page carries the rest of it (commit, type, providers, engines). -->
-            <div id="monitoring-build" class="px-2 pb-1 pt-0.5" x-show="$store.version.summary" x-cloak>
+            <div id="monitoring-build" class="px-2 pb-1 pt-1" x-show="$store.version.summary" x-cloak>
               <span x-h-text.muted class="text-xs" :title="$store.version.tooltip"
                     x-text="$store.version.summary"></span>
             </div>
@@ -129,46 +123,60 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title class="shrink-0" x-text="T('monitoring:shell.title', 'Monitoring')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
                    launchpad renders, minus this one (the shared `shells` store). -->
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- An svg placeholder is rendered in place, so the bound :data-lucide stays reactive. -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg>
                 <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_jobs.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_jobs.html
index ad91ee7360a..0ebad1ef90f 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_jobs.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_jobs.html
@@ -14,8 +14,9 @@
           :data-variant="state.actionResult ? state.actionResult.variant : 'outline'"
           x-text="state.actionResult ? state.actionResult.text : ''"></span>
     <div x-h-toolbar-spacer></div>
-    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :data-loading="state.loading">
-      <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :disabled="state.loading">
+      <template x-if="state.loading"><span x-h-spinner class="size-4"></span></template>
+      <svg role="presentation" x-h-lucide data-lucide="refresh-cw" x-show="!state.loading"></svg>
       <span x-text="T('monitoring:overview.refresh', 'Refresh')"></span>
     </button>
   </div>
@@ -35,7 +36,7 @@
 
         <table x-h-table x-show="!state.loading && state.items.length" x-cloak>
           <thead x-h-table-header>
-            <tr>
+            <tr x-h-table-row>
               <th x-h-table-head scope="col" x-text="T('monitoring:jobs.colName', 'Job')"></th>
               <th x-h-table-head scope="col" x-text="T('monitoring:jobs.colSchedule', 'Schedule')"></th>
               <th x-h-table-head scope="col" x-text="T('monitoring:jobs.colStatus', 'Last run')"></th>
@@ -47,7 +48,7 @@
               <tr x-h-table-row data-hoverable="true" class="cursor-pointer"
                   :data-state="state.selectedName === job.name ? 'selected' : ''" @click="state.select(job)">
                 <td x-h-table-cell>
-                  <div class="vbox gap-0">
+                  <div class="vbox">
                     <span x-text="job.name"></span>
                     <span x-show="!job.enabled" x-h-text.muted class="text-xs"
                           x-text="T('monitoring:jobs.disabled', 'Disabled')"></span>
@@ -55,23 +56,23 @@
                 </td>
                 <td x-h-table-cell><code class="text-xs" x-text="job.expression"></code></td>
                 <td x-h-table-cell>
-                  <div class="vbox gap-0">
+                  <div class="vbox">
                     <span x-h-badge :data-variant="statusVariant(job.status)" class="self-start" x-text="job.status"></span>
                     <span x-h-text.muted class="text-xs" x-text="timeText(job.executedAt)"></span>
                   </div>
                 </td>
-                <td x-h-table-cell class="text-end" @click.stop>
+                <td x-h-table-cell class="text-right" @click.stop>
                   <div class="hbox items-center justify-end gap-1">
                     <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.openTrigger(job)"
                             :aria-label="T('monitoring:jobs.trigger', 'Run now')" :title="T('monitoring:jobs.trigger', 'Run now')">
-                      <i role="img" x-h-lucide data-lucide="play"></i>
+                      <svg role="presentation" x-h-lucide data-lucide="play"></svg>
                     </button>
                     <button x-h-button data-variant="transparent" data-size="icon-sm"
                             @click="state.setEnabled(job, !job.enabled)"
                             :aria-label="job.enabled ? 'Disable' : 'Enable'"
                             :title="job.enabled ? T('monitoring:jobs.disable', 'Disable') : T('monitoring:jobs.enable', 'Enable')">
-                      <svg x-h-lucide x-show="job.enabled" role="img" data-lucide="pause"></svg>
-                      <svg x-h-lucide x-show="!job.enabled" role="img" data-lucide="power"></svg>
+                      <svg x-h-lucide x-show="job.enabled" role="presentation" data-lucide="pause"></svg>
+                      <svg x-h-lucide x-show="!job.enabled" role="presentation" data-lucide="power"></svg>
                     </button>
                   </div>
                 </td>
@@ -90,7 +91,7 @@
             <span x-h-toolbar-title class="shrink-0" x-text="state.selected.name"></span>
             <div x-h-toolbar-spacer></div>
             <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.selectedName = ''"
-                    aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+                    aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div class="flex-1 min-h-0 overflow-auto p-3">
             <div x-show="state.logsLoading" x-cloak class="vbox gap-2">
@@ -100,7 +101,7 @@
                  x-text="T('monitoring:jobs.noLogs', 'This job has not run yet.')"></div>
             <table x-h-table x-show="!state.logsLoading && logEntries.length" x-cloak>
               <thead x-h-table-header>
-                <tr>
+                <tr x-h-table-row>
                   <th x-h-table-head scope="col" x-text="T('monitoring:jobs.colTriggered', 'Triggered')"></th>
                   <th x-h-table-head scope="col" x-text="T('monitoring:jobs.colStatus', 'Status')"></th>
                   <!-- The tenant column stays visible: the job-log service does not scope its reads,
@@ -135,7 +136,7 @@
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('monitoring:jobs.triggerTitle', 'Run {{job}} now', { job: state.triggerJobName })"></h2>
         <button x-h-dialog-close @click="state.closeTrigger()" aria-label="Close">
-          <i role="img" x-h-lucide data-lucide="x"></i>
+          <svg role="presentation" x-h-lucide data-lucide="x"></svg>
         </button>
       </div>
       <div x-h-dialog-content class="vbox gap-3">
@@ -152,8 +153,10 @@ <h2 x-h-dialog-title x-text="T('monitoring:jobs.triggerTitle', 'Run {{job}} now'
       <div x-h-dialog-footer>
         <button x-h-button data-variant="transparent" @click="state.closeTrigger()"
                 x-text="T('application-core:shell.defaults.cancel', 'Cancel')"></button>
-        <button x-h-button data-variant="primary" :data-loading="state.triggering" @click="state.trigger()"
-                x-text="T('monitoring:jobs.trigger', 'Run now')"></button>
+        <button x-h-button data-variant="primary" :disabled="state.triggering" @click="state.trigger()">
+          <template x-if="state.triggering"><span x-h-spinner class="size-4"></span></template>
+          <span x-text="T('monitoring:jobs.trigger', 'Run now')"></span>
+        </button>
       </div>
     </div>
   </div>
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_logs.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_logs.html
index 2ccfc658da8..d8263a6fe37 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_logs.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_logs.html
@@ -19,18 +19,18 @@
       <div class="hbox items-center gap-2">
         <span x-h-badge :data-variant="state.connected ? 'positive' : 'negative'"
               x-text="state.connected ? T('monitoring:logs.connected', 'Connected') : T('monitoring:logs.disconnected', 'Disconnected')"></span>
-        <div class="w-56 shrink-0">
+        <div class="shrink-0" style="width: 14rem">
           <input x-h-input type="search" x-model="state.search"
                  :placeholder="T('monitoring:logs.search', 'Filter messages')" />
         </div>
         <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.togglePause()"
                 :title="state.paused ? T('monitoring:overview.resume', 'Resume') : T('monitoring:overview.pause', 'Pause')"
                 :aria-label="state.paused ? 'Resume' : 'Pause'">
-          <svg x-h-lucide x-show="!state.paused" role="img" data-lucide="pause"></svg>
-          <svg x-h-lucide x-show="state.paused" role="img" data-lucide="play"></svg>
+          <svg x-h-lucide x-show="!state.paused" role="presentation" data-lucide="pause"></svg>
+          <svg x-h-lucide x-show="state.paused" role="presentation" data-lucide="play"></svg>
         </button>
         <button x-h-button data-variant="outline" data-size="sm" @click="state.clear()">
-          <i role="img" x-h-lucide data-lucide="eraser"></i>
+          <svg role="presentation" x-h-lucide data-lucide="eraser"></svg>
           <span x-text="T('monitoring:logs.clear', 'Clear')"></span>
         </button>
       </div>
@@ -43,13 +43,13 @@
       <div class="hbox items-center gap-3 px-3 pb-2">
         <template x-for="level in ['ERROR', 'WARN', 'INFO', 'DEBUG', 'TRACE']" :key="level">
           <label class="hbox items-center gap-1 text-xs cursor-pointer">
-            <input x-h-checkbox type="checkbox" :checked="state.levels[level]" @change="state.toggleLevel(level)" />
+            <span x-h-checkbox><input type="checkbox" :checked="state.levels[level]" @change="state.toggleLevel(level)" /></span>
             <span x-text="level"></span>
           </label>
         </template>
         <div class="flex-1"></div>
         <label class="hbox items-center gap-1 text-xs cursor-pointer">
-          <input x-h-checkbox type="checkbox" x-model="autoScroll" />
+          <span x-h-checkbox><input type="checkbox" x-model="autoScroll" /></span>
           <span x-text="T('monitoring:logs.autoScroll', 'Follow')"></span>
         </label>
       </div>
@@ -61,7 +61,7 @@
           <div class="hbox items-start gap-2 py-0.5">
             <span class="shrink-0 text-muted-foreground" x-text="timeText(record.timestamp)"></span>
             <span x-h-badge class="shrink-0" :data-variant="levelVariant(record.level)" x-text="record.level"></span>
-            <span class="whitespace-pre-wrap break-all" x-text="record.message"></span>
+            <span class="whitespace-pre-wrap wrap-anywhere" x-text="record.message"></span>
           </div>
         </template>
         <!-- Nudge the view to the newest record after each render pass. -->
@@ -80,11 +80,11 @@
           </div>
           <div x-show="!state.filesLoading && !state.files.length" x-cloak x-h-text.muted class="p-2 text-sm"
                x-text="T('monitoring:logs.noFiles', 'No log files.')"></div>
-          <ul x-h-list>
+          <ul x-h-list :aria-label="T('monitoring:logs.files', 'Files')">
             <template x-for="file in state.files" :key="file">
-              <li x-h-list-item class="cursor-pointer" :data-selected="state.selectedFile === file"
-                  @click="state.selectFile(file)">
-                <span x-text="file"></span>
+              <li x-h-list-item>
+                <button x-h-list-item-button :aria-current="state.selectedFile === file"
+                        @click="state.selectFile(file)" x-text="file"></button>
               </li>
             </template>
           </ul>
@@ -98,12 +98,12 @@
             <div x-h-toolbar-spacer></div>
             <a x-h-button data-variant="transparent" data-size="sm" :href="downloadUrl(state.selectedFile)"
                target="_blank" rel="noopener">
-              <i role="img" x-h-lucide data-lucide="download"></i>
+              <svg role="presentation" x-h-lucide data-lucide="download"></svg>
               <span x-text="T('monitoring:logs.download', 'Download')"></span>
             </a>
             <button x-h-button data-variant="transparent" data-size="icon-sm"
                     @click="state.selectFile(state.selectedFile)" aria-label="Reload">
-              <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+              <svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg>
             </button>
           </div>
           <div class="flex-1 min-h-0 overflow-auto p-3">
@@ -114,10 +114,10 @@
                  window upwards on demand rather than re-reading. -->
             <button x-show="state.hasMoreAbove" x-cloak x-h-button data-variant="outline" data-size="sm"
                     class="mb-2" @click="state.showMore()">
-              <i role="img" x-h-lucide data-lucide="chevron-up"></i>
+              <svg role="presentation" x-h-lucide data-lucide="chevron-up"></svg>
               <span x-text="T('monitoring:logs.loadMore', 'Load earlier lines')"></span>
             </button>
-            <pre class="font-mono text-xs whitespace-pre-wrap break-all" x-text="state.fileTail"></pre>
+            <pre class="font-mono text-xs whitespace-pre-wrap wrap-anywhere" x-text="state.fileTail"></pre>
           </div>
         </div>
       </div>
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_messaging.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_messaging.html
index f51d0774076..dc60a34076c 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_messaging.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_messaging.html
@@ -16,8 +16,9 @@
     <span x-show="state.summary" x-cloak x-h-badge :data-variant="state.summary && state.summary.started ? 'positive' : 'negative'"
           x-text="state.summary ? state.summary.brokerName : ''"></span>
     <div x-h-toolbar-spacer></div>
-    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :data-loading="state.loading">
-      <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :disabled="state.loading">
+      <template x-if="state.loading"><span x-h-spinner class="size-4"></span></template>
+      <svg role="presentation" x-h-lucide data-lucide="refresh-cw" x-show="!state.loading"></svg>
       <span x-text="T('monitoring:overview.refresh', 'Refresh')"></span>
     </button>
   </div>
@@ -38,7 +39,7 @@ <h2 class="text-sm font-semibold" x-text="T('monitoring:messaging.queues', 'Queu
                x-text="T('monitoring:messaging.noQueues', 'No queues.')"></div>
           <table x-h-table x-show="state.queues.length">
             <thead x-h-table-header>
-              <tr>
+              <tr x-h-table-row>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colName', 'Name')"></th>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colPending', 'Pending')"></th>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colConsumers', 'Consumers')"></th>
@@ -67,7 +68,7 @@ <h2 class="text-sm font-semibold" x-text="T('monitoring:messaging.queues', 'Queu
           <h2 class="text-sm font-semibold" x-text="T('monitoring:messaging.topics', 'Topics')"></h2>
           <table x-h-table>
             <thead x-h-table-header>
-              <tr>
+              <tr x-h-table-row>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colName', 'Name')"></th>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colConsumers', 'Consumers')"></th>
                 <th x-h-table-head scope="col" x-text="T('monitoring:messaging.colEnqueued', 'Enqueued')"></th>
@@ -96,7 +97,7 @@ <h2 class="text-sm font-semibold" x-text="T('monitoring:messaging.topics', 'Topi
           <span x-h-toolbar-title class="shrink-0" x-text="state.selectedQueue"></span>
           <div x-h-toolbar-spacer></div>
           <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.clearSelection()"
-                  aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+                  aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div class="flex-1 min-h-0 overflow-auto p-3 vbox gap-3">
           <div x-show="state.messagesLoading" x-cloak><div x-h-spinner></div></div>
@@ -114,7 +115,7 @@ <h2 class="text-sm font-semibold" x-text="T('monitoring:messaging.topics', 'Topi
                 </div>
               </div>
               <div x-h-card-content>
-                <pre class="font-mono text-xs whitespace-pre-wrap break-all" x-text="shorten(message.body)"></pre>
+                <pre class="font-mono text-xs whitespace-pre-wrap wrap-anywhere" x-text="shorten(message.body)"></pre>
                 <p x-show="message.bodyTruncated" x-h-text.muted class="text-xs"
                    x-text="T('monitoring:messaging.truncated', 'The payload is truncated.')"></p>
               </div>
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_overview.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_overview.html
index c84af56e39b..b633ad4382a 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_overview.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_overview.html
@@ -20,11 +20,12 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
         <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.togglePause()"
                 :title="state.paused ? T('monitoring:overview.resume', 'Resume auto-refresh') : T('monitoring:overview.pause', 'Pause auto-refresh')"
                 :aria-label="state.paused ? 'Resume auto-refresh' : 'Pause auto-refresh'">
-          <svg x-h-lucide x-show="!state.paused" role="img" data-lucide="pause"></svg>
-          <svg x-h-lucide x-show="state.paused" role="img" data-lucide="play"></svg>
+          <svg x-h-lucide x-show="!state.paused" role="presentation" data-lucide="pause"></svg>
+          <svg x-h-lucide x-show="state.paused" role="presentation" data-lucide="play"></svg>
         </button>
-        <button x-h-button data-variant="outline" data-size="sm" @click="state.refresh()" :data-loading="state.refreshing">
-          <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+        <button x-h-button data-variant="outline" data-size="sm" @click="state.refresh()" :disabled="state.refreshing">
+          <template x-if="state.refreshing"><span x-h-spinner class="size-4"></span></template>
+          <svg role="presentation" x-h-lucide data-lucide="refresh-cw" x-show="!state.refreshing"></svg>
           <span x-text="T('monitoring:overview.refresh', 'Refresh')"></span>
         </button>
       </div>
@@ -32,7 +33,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
 
     <!-- First load: skeletons rather than an empty page that looks like "nothing is wrong". -->
     <div x-show="state.loading" x-cloak class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <template x-for="i in 4" :key="i"><div x-h-skeleton class="h-24 w-full"></div></template>
+      <template x-for="i in 4" :key="i"><div x-h-skeleton class="w-full" style="height: 6rem"></div></template>
     </div>
 
     <!-- The all-clear. Shown only once every source has been read and none of them counted anything. -->
@@ -41,7 +42,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
         <span x-h-avatar class="rounded-full" data-variant="positive">
           <svg x-h-icon data-icon="circle-success" role="img" aria-label="ok"></svg>
         </span>
-        <div class="vbox gap-0">
+        <div class="vbox">
           <span class="font-medium" x-text="T('monitoring:overview.allClear', 'Nothing needs attention')"></span>
           <span x-h-text.muted class="text-sm"
                 x-text="T('monitoring:overview.allClearHint', 'Synchronization, jobs and processes are all in a good state.')"></span>
@@ -55,7 +56,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="heart-pulse" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="heart-pulse" class="size-4"></svg>
             <span x-text="T('monitoring:overview.health', 'Health')"></span>
           </div>
         </div>
@@ -73,7 +74,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="plug-zap" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="plug-zap" class="size-4"></svg>
             <span x-text="T('monitoring:overview.readiness', 'Readiness')"></span>
           </div>
         </div>
@@ -90,7 +91,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="file-warning" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="file-warning" class="size-4"></svg>
             <span x-text="T('monitoring:overview.artefacts', 'Artefacts in error')"></span>
           </div>
         </div>
@@ -103,7 +104,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="alarm-clock" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="alarm-clock" class="size-4"></svg>
             <span x-text="T('monitoring:overview.jobs', 'Failed jobs')"></span>
           </div>
         </div>
@@ -116,7 +117,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="workflow" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="workflow" class="size-4"></svg>
             <span x-text="T('monitoring:overview.incidents', 'Process incidents')"></span>
           </div>
         </div>
@@ -131,7 +132,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="database" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="database" class="size-4"></svg>
             <span x-text="T('monitoring:overview.pools', 'Database pools')"></span>
           </div>
         </div>
@@ -153,7 +154,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:overview.title', 'Overview'
       <div x-h-card>
         <div x-h-card-header>
           <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-            <i role="img" x-h-lucide data-lucide="mails" class="size-4"></i>
+            <svg role="presentation" x-h-lucide data-lucide="mails" class="size-4"></svg>
             <span x-text="T('monitoring:overview.broker', 'Broker backlog')"></span>
           </div>
         </div>
@@ -178,85 +179,91 @@ <h2 x-h-card-title x-text="T('monitoring:overview.synchronizersTitle', 'Failed s
       </div>
     </div>
 
-    <div x-show="state.failedArtefacts.length" x-cloak x-h-card>
-      <div x-h-card-header>
+    <div x-show="state.failedArtefacts.length" x-cloak x-h-card class="overflow-hidden">
+      <div x-h-card-header class="border-b">
         <h2 x-h-card-title x-text="T('monitoring:overview.artefactsTitle', 'Artefacts that did not synchronize')"></h2>
       </div>
-      <div x-h-card-content class="overflow-x-auto">
-        <table x-h-table>
-          <thead x-h-table-header>
-            <tr>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colProject', 'Project')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colLocation', 'Location')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colPhase', 'Phase')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colError', 'Error')"></th>
-            </tr>
-          </thead>
-          <tbody x-h-table-body>
-            <template x-for="artefact in state.failedArtefacts" :key="artefact.type + artefact.location + artefact.name">
+      <div x-h-card-content.flush>
+        <div x-h-table-container>
+          <table x-h-table>
+            <thead x-h-table-header data-bordered="horizontal">
               <tr x-h-table-row>
-                <td x-h-table-cell x-text="projectOf(artefact.location)"></td>
-                <td x-h-table-cell x-text="artefact.location"></td>
-                <td x-h-table-cell><span x-h-badge data-variant="negative" x-text="(artefact.phase || '') + ' · ' + artefact.status"></span></td>
-                <td x-h-table-cell :title="artefact.error" x-text="shorten(artefact.error)"></td>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colProject', 'Project')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colLocation', 'Location')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colPhase', 'Phase')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colError', 'Error')"></th>
               </tr>
-            </template>
-          </tbody>
-        </table>
+            </thead>
+            <tbody x-h-table-body>
+              <template x-for="artefact in state.failedArtefacts" :key="artefact.type + artefact.location + artefact.name">
+                <tr x-h-table-row>
+                  <td x-h-table-cell x-text="projectOf(artefact.location)"></td>
+                  <td x-h-table-cell x-text="artefact.location"></td>
+                  <td x-h-table-cell><span x-h-badge data-variant="negative" x-text="(artefact.phase || '') + ' · ' + artefact.status"></span></td>
+                  <td x-h-table-cell :title="artefact.error" x-text="shorten(artefact.error)"></td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
 
-    <div x-show="state.failedJobs.length" x-cloak x-h-card>
-      <div x-h-card-header>
+    <div x-show="state.failedJobs.length" x-cloak x-h-card class="overflow-hidden">
+      <div x-h-card-header class="border-b">
         <h2 x-h-card-title x-text="T('monitoring:overview.jobsTitle', 'Failed job executions')"></h2>
       </div>
-      <div x-h-card-content class="overflow-x-auto">
-        <table x-h-table>
-          <thead x-h-table-header>
-            <tr>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colJob', 'Job')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colExecuted', 'Last run')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colMessage', 'Message')"></th>
-            </tr>
-          </thead>
-          <tbody x-h-table-body>
-            <template x-for="job in state.failedJobs" :key="job.name">
+      <div x-h-card-content.flush>
+        <div x-h-table-container>
+          <table x-h-table>
+            <thead x-h-table-header data-bordered="horizontal">
               <tr x-h-table-row>
-                <td x-h-table-cell x-text="job.name"></td>
-                <td x-h-table-cell x-text="executedAtText(job)"></td>
-                <td x-h-table-cell :title="job.message" x-text="shorten(job.message)"></td>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colJob', 'Job')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colExecuted', 'Last run')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colMessage', 'Message')"></th>
               </tr>
-            </template>
-          </tbody>
-        </table>
+            </thead>
+            <tbody x-h-table-body>
+              <template x-for="job in state.failedJobs" :key="job.name">
+                <tr x-h-table-row>
+                  <td x-h-table-cell x-text="job.name"></td>
+                  <td x-h-table-cell x-text="executedAtText(job)"></td>
+                  <td x-h-table-cell :title="job.message" x-text="shorten(job.message)"></td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
 
-    <div x-show="state.incidents.length" x-cloak x-h-card>
-      <div x-h-card-header>
+    <div x-show="state.incidents.length" x-cloak x-h-card class="overflow-hidden">
+      <div x-h-card-header class="border-b">
         <h2 x-h-card-title x-text="T('monitoring:overview.incidentsTitle', 'Stuck process instances')"></h2>
       </div>
-      <div x-h-card-content class="overflow-x-auto">
-        <table x-h-table>
-          <thead x-h-table-header>
-            <tr>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colProcess', 'Process')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colBusinessKey', 'Business key')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colJobs', 'Dead-letter jobs')"></th>
-              <th x-h-table-head scope="col" x-text="T('monitoring:overview.colMessage', 'Message')"></th>
-            </tr>
-          </thead>
-          <tbody x-h-table-body>
-            <template x-for="incident in state.incidents" :key="incident.id">
+      <div x-h-card-content.flush>
+        <div x-h-table-container>
+          <table x-h-table>
+            <thead x-h-table-header data-bordered="horizontal">
               <tr x-h-table-row>
-                <td x-h-table-cell x-text="incident.definition"></td>
-                <td x-h-table-cell x-text="incident.businessKey"></td>
-                <td x-h-table-cell x-text="incident.jobCount"></td>
-                <td x-h-table-cell :title="incident.message" x-text="shorten(incident.message)"></td>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colProcess', 'Process')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colBusinessKey', 'Business key')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colJobs', 'Dead-letter jobs')"></th>
+                <th x-h-table-head scope="col" x-text="T('monitoring:overview.colMessage', 'Message')"></th>
               </tr>
-            </template>
-          </tbody>
-        </table>
+            </thead>
+            <tbody x-h-table-body>
+              <template x-for="incident in state.incidents" :key="incident.id">
+                <tr x-h-table-row>
+                  <td x-h-table-cell x-text="incident.definition"></td>
+                  <td x-h-table-cell x-text="incident.businessKey"></td>
+                  <td x-h-table-cell x-text="incident.jobCount"></td>
+                  <td x-h-table-cell :title="incident.message" x-text="shorten(incident.message)"></td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
 
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_processes.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_processes.html
index 47c9df9e1bc..2c83457c243 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_processes.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_processes.html
@@ -15,12 +15,13 @@
     <button x-h-button data-size="sm" :data-variant="state.mode === 'historic' ? 'primary' : 'transparent'"
             @click="state.setMode('historic')" x-text="T('monitoring:processes.historic', 'Completed')"></button>
     <div x-h-toolbar-spacer></div>
-    <div class="w-64 shrink-0">
+    <div class="w-3xs shrink-0">
       <input x-h-input type="search" x-model="state.filter"
              :placeholder="T('monitoring:processes.search', 'Search process, business key or id')" />
     </div>
-    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :data-loading="state.loading">
-      <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+    <button x-h-button data-variant="outline" data-size="sm" @click="state.load()" :disabled="state.loading">
+      <template x-if="state.loading"><span x-h-spinner class="size-4"></span></template>
+      <svg role="presentation" x-h-lucide data-lucide="refresh-cw" x-show="!state.loading"></svg>
       <span x-text="T('monitoring:overview.refresh', 'Refresh')"></span>
     </button>
   </div>
@@ -41,7 +42,7 @@
 
         <table x-h-table x-show="!state.loading && state.visibleInstances.length" x-cloak>
           <thead x-h-table-header>
-            <tr>
+            <tr x-h-table-row>
               <th x-h-table-head scope="col" x-text="T('monitoring:processes.colProcess', 'Process')"></th>
               <th x-h-table-head scope="col" x-text="T('monitoring:overview.colBusinessKey', 'Business key')"></th>
               <th x-h-table-head scope="col" x-text="T('monitoring:processes.colStarted', 'Started')"></th>
@@ -73,7 +74,7 @@
             <div x-h-toolbar-spacer></div>
             <button x-h-button data-variant="transparent" data-size="icon-sm" @click="state.clearSelection()"
                     aria-label="Close" :title="T('monitoring:processes.close', 'Close')">
-              <i role="img" x-h-lucide data-lucide="x"></i>
+              <svg role="presentation" x-h-lucide data-lucide="x"></svg>
             </button>
           </div>
 
@@ -83,14 +84,15 @@
               <span x-h-badge data-variant="negative"
                     x-text="T('monitoring:processes.stuck', 'Stuck: {{count}} dead-letter job(s)', { count: state.incidents.length })"></span>
               <div class="flex-1"></div>
-              <button x-h-button data-variant="outline" data-size="sm" :data-loading="state.acting"
+              <button x-h-button data-variant="outline" data-size="sm" :disabled="state.acting"
                       @click="state.act('RETRY')">
-                <i role="img" x-h-lucide data-lucide="rotate-cw"></i>
+                <template x-if="state.acting"><span x-h-spinner class="size-4"></span></template>
+                <svg role="presentation" x-h-lucide data-lucide="rotate-cw" x-show="!state.acting"></svg>
                 <span x-text="T('monitoring:processes.retry', 'Retry')"></span>
               </button>
-              <button x-h-button data-variant="outline" data-size="sm" :data-loading="state.acting"
+              <button x-h-button data-variant="outline" data-size="sm" :disabled="state.acting"
                       @click="state.act('SKIP')">
-                <i role="img" x-h-lucide data-lucide="skip-forward"></i>
+                <svg role="presentation" x-h-lucide data-lucide="skip-forward"></svg>
                 <span x-text="T('monitoring:processes.skip', 'Skip step')"></span>
               </button>
             </div>
@@ -105,49 +107,62 @@
                   x-text="state.actionResult ? state.actionResult.text : ''"></span>
           </div>
 
+          <!-- Every tab lives in its own x-h-tab-item; each tab names the panel it controls and the
+               panel names the tab that labels it (the Harmonia tabs contract). -->
           <div x-h-tabs data-orientation="horizontal" class="flex-1 min-h-0">
             <div x-h-tab-bar data-size="sm">
               <div x-h-tab-list>
-                <button x-h-tab :aria-selected="tab === 'diagram'" @click="selectTab('diagram')"
-                        x-text="T('monitoring:processes.tabDiagram', 'Diagram')"></button>
-                <button x-h-tab :aria-selected="tab === 'variables'" @click="selectTab('variables')"
-                        x-text="T('monitoring:processes.tabVariables', 'Variables')"></button>
-                <button x-h-tab x-show="state.mode === 'active'" :aria-selected="tab === 'tasks'"
-                        @click="selectTab('tasks')" x-text="T('monitoring:processes.tabTasks', 'Tasks')"></button>
-              </div>
-              <div class="flex-1"></div>
-              <template x-if="tab === 'diagram'">
-                <div class="hbox items-center gap-1 pr-1">
-                  <button x-h-button data-variant="transparent" data-size="icon-sm" @click="zoomOut()" aria-label="Zoom out">
-                    <i role="img" x-h-lucide data-lucide="zoom-out"></i>
-                  </button>
-                  <button x-h-button data-variant="transparent" data-size="icon-sm" @click="zoomIn()" aria-label="Zoom in">
-                    <i role="img" x-h-lucide data-lucide="zoom-in"></i>
-                  </button>
-                  <button x-h-button data-variant="transparent" data-size="icon-sm" @click="fit()" aria-label="Fit">
-                    <i role="img" x-h-lucide data-lucide="maximize"></i>
-                  </button>
+                <div x-h-tab-item>
+                  <button id="monitoring-process-tab-diagram" x-h-tab aria-controls="monitoring-process-panel-diagram"
+                          :aria-selected="tab === 'diagram'" @click="selectTab('diagram')"
+                          x-text="T('monitoring:processes.tabDiagram', 'Diagram')"></button>
                 </div>
-              </template>
+                <div x-h-tab-item>
+                  <button id="monitoring-process-tab-variables" x-h-tab aria-controls="monitoring-process-panel-variables"
+                          :aria-selected="tab === 'variables'" @click="selectTab('variables')"
+                          x-text="T('monitoring:processes.tabVariables', 'Variables')"></button>
+                </div>
+                <div x-h-tab-item x-show="state.mode === 'active'">
+                  <button id="monitoring-process-tab-tasks" x-h-tab aria-controls="monitoring-process-panel-tasks"
+                          :aria-selected="tab === 'tasks'" @click="selectTab('tasks')"
+                          x-text="T('monitoring:processes.tabTasks', 'Tasks')"></button>
+                </div>
+              </div>
+              <!-- The zoom controls act on the diagram, so they show with its tab only. -->
+              <div x-h-tab-list-actions.end x-show="tab === 'diagram'">
+                <button x-h-tab-list-action data-variant="transparent" @click="zoomOut()" aria-label="Zoom out">
+                  <svg role="presentation" x-h-lucide data-lucide="zoom-out"></svg>
+                </button>
+                <button x-h-tab-list-action data-variant="transparent" @click="zoomIn()" aria-label="Zoom in">
+                  <svg role="presentation" x-h-lucide data-lucide="zoom-in"></svg>
+                </button>
+                <button x-h-tab-list-action data-variant="transparent" @click="fit()" aria-label="Fit">
+                  <svg role="presentation" x-h-lucide data-lucide="maximize"></svg>
+                </button>
+              </div>
             </div>
 
             <!-- The diagram is rendered into its container by the page component; the container only
                  exists while its tab is open, because the visualizer measures it on load. -->
-            <template x-if="tab === 'diagram'">
-              <div class="flex-1 min-h-0">
-                <div x-show="diagramError" x-cloak x-h-text.muted class="p-3 text-sm" x-text="diagramError"></div>
-                <div x-ref="diagram" class="monitoring-bpmn size-full"></div>
-              </div>
-            </template>
+            <div id="monitoring-process-panel-diagram" x-h-tabs-content aria-labelledby="monitoring-process-tab-diagram"
+                 :hidden="tab !== 'diagram'" tabindex="-1" class="flex-1 min-h-0">
+              <template x-if="tab === 'diagram'">
+                <div class="size-full">
+                  <div x-show="diagramError" x-cloak x-h-text.muted class="p-3 text-sm" x-text="diagramError"></div>
+                  <div x-ref="diagram" class="monitoring-bpmn size-full"></div>
+                </div>
+              </template>
+            </div>
 
             <!-- Variables (read-only - editing them is Workbench territory) -->
-            <template x-if="tab === 'variables'">
-              <div class="flex-1 min-h-0 overflow-auto p-3">
-                <div x-show="!state.variables.length" x-h-text.muted class="text-sm"
-                     x-text="T('monitoring:processes.noVariables', 'This instance carries no variables.')"></div>
-                <table x-h-table x-show="state.variables.length">
+            <div id="monitoring-process-panel-variables" x-h-tabs-content aria-labelledby="monitoring-process-tab-variables"
+                 :hidden="tab !== 'variables'" tabindex="-1" class="flex-1 min-h-0 overflow-auto p-3">
+              <div x-show="!state.variables.length" x-h-text.muted class="text-sm"
+                   x-text="T('monitoring:processes.noVariables', 'This instance carries no variables.')"></div>
+              <div x-h-table-container x-show="state.variables.length">
+                <table x-h-table>
                   <thead x-h-table-header>
-                    <tr>
+                    <tr x-h-table-row>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colName', 'Name')"></th>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colType', 'Type')"></th>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colValue', 'Value')"></th>
@@ -164,16 +179,17 @@
                   </tbody>
                 </table>
               </div>
-            </template>
+            </div>
 
             <!-- Open user tasks -->
-            <template x-if="tab === 'tasks'">
-              <div class="flex-1 min-h-0 overflow-auto p-3">
-                <div x-show="!state.tasks.length" x-h-text.muted class="text-sm"
-                     x-text="T('monitoring:processes.noTasks', 'No open user tasks.')"></div>
-                <table x-h-table x-show="state.tasks.length">
+            <div id="monitoring-process-panel-tasks" x-h-tabs-content aria-labelledby="monitoring-process-tab-tasks"
+                 :hidden="tab !== 'tasks'" tabindex="-1" class="flex-1 min-h-0 overflow-auto p-3">
+              <div x-show="!state.tasks.length" x-h-text.muted class="text-sm"
+                   x-text="T('monitoring:processes.noTasks', 'No open user tasks.')"></div>
+              <div x-h-table-container x-show="state.tasks.length">
+                <table x-h-table>
                   <thead x-h-table-header>
-                    <tr>
+                    <tr x-h-table-row>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colTask', 'Task')"></th>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colAssignee', 'Assignee')"></th>
                       <th x-h-table-head scope="col" x-text="T('monitoring:processes.colCandidates', 'Candidates')"></th>
@@ -190,7 +206,7 @@
                   </tbody>
                 </table>
               </div>
-            </template>
+            </div>
           </div>
 
         </div>
diff --git a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_system.html b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_system.html
index 089649ac9f6..7b390990cdb 100644
--- a/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_system.html
+++ b/components/resources/resources-monitoring/src/main/resources/META-INF/dirigible/monitoring/views/_system.html
@@ -16,7 +16,7 @@ <h1 class="text-2xl font-bold" x-text="T('monitoring:system.title', 'System')"><
         <p x-h-text.muted x-text="T('monitoring:system.subtitle', 'The build this instance runs, and the Java virtual machine running it.')"></p>
       </div>
       <button x-h-button data-variant="outline" data-size="sm" @click="state.refresh()">
-        <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+        <svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg>
         <span x-text="T('monitoring:overview.refresh', 'Refresh')"></span>
       </button>
     </div>
@@ -30,29 +30,29 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
       </div>
       <div x-h-card-content class="vbox gap-4">
         <div class="grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2 lg:grid-cols-3">
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.product', 'Product')"></span>
             <span class="text-sm" x-text="orDash(version.productName)"></span>
           </div>
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.version', 'Version')"></span>
             <span class="text-sm font-medium" x-text="orDash(version.productVersion)"></span>
           </div>
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.commit', 'Commit')"></span>
             <a x-show="version.commitUrl" class="text-sm underline" :href="version.commitUrl"
                target="_blank" rel="noopener noreferrer" x-text="version.commitShort"></a>
             <span x-show="!version.commitUrl" class="text-sm" x-text="orDash(version.commitShort)"></span>
           </div>
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.instance', 'Instance')"></span>
             <span class="text-sm" x-text="orDash(version.instanceName)"></span>
           </div>
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.repository', 'Repository')"></span>
             <span class="text-sm" x-text="orDash(version.value('repositoryProvider'))"></span>
           </div>
-          <div class="vbox gap-0">
+          <div class="vbox">
             <span class="text-xs text-muted-foreground" x-text="T('monitoring:system.database', 'Database')"></span>
             <span class="text-sm" x-text="orDash(version.value('databaseProvider'))"></span>
           </div>
@@ -71,7 +71,7 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
     </div>
 
     <div x-show="state.loading" x-cloak class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <template x-for="i in 4" :key="i"><div x-h-skeleton class="h-24 w-full"></div></template>
+      <template x-for="i in 4" :key="i"><div x-h-skeleton class="w-full" style="height: 6rem"></div></template>
     </div>
 
     <div x-show="!state.loading && state.error" x-cloak x-h-text.muted class="text-sm"
@@ -85,7 +85,7 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
           <div x-h-card>
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide data-lucide="cpu" class="size-4"></i>
+                <svg role="presentation" x-h-lucide data-lucide="cpu" class="size-4"></svg>
                 <span x-text="T('monitoring:system.cpu', 'CPU')"></span>
               </div>
             </div>
@@ -99,7 +99,7 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
           <div x-h-card>
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide data-lucide="memory-stick" class="size-4"></i>
+                <svg role="presentation" x-h-lucide data-lucide="memory-stick" class="size-4"></svg>
                 <span x-text="T('monitoring:system.heap', 'Heap')"></span>
               </div>
             </div>
@@ -114,7 +114,7 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
           <div x-h-card>
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide data-lucide="layers" class="size-4"></i>
+                <svg role="presentation" x-h-lucide data-lucide="layers" class="size-4"></svg>
                 <span x-text="T('monitoring:system.threads', 'Threads')"></span>
               </div>
             </div>
@@ -131,11 +131,11 @@ <h2 x-h-card-title x-text="T('monitoring:system.build', 'Build')"></h2>
           <div x-h-card>
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide data-lucide="server" class="size-4"></i>
+                <svg role="presentation" x-h-lucide data-lucide="server" class="size-4"></svg>
                 <span x-text="T('monitoring:system.runtime', 'Runtime')"></span>
               </div>
             </div>
-            <div x-h-card-content class="vbox gap-0">
+            <div x-h-card-content class="vbox">
               <p class="text-lg font-semibold" x-text="uptime(state.metrics.runtime.uptimeMillis)"></p>
               <span x-h-text.muted class="text-xs" x-text="state.metrics.runtime.vmName"></span>
               <span x-h-text.muted class="text-xs"
@@ -165,58 +165,62 @@ <h2 x-h-card-title x-text="T('monitoring:system.cpuOverTime', 'CPU while this pa
         </div>
 
         <!-- Memory pools -->
-        <div x-h-card>
-          <div x-h-card-header>
+        <div x-h-card class="overflow-hidden">
+          <div x-h-card-header class="border-b">
             <h2 x-h-card-title x-text="T('monitoring:system.pools', 'Memory pools')"></h2>
           </div>
-          <div x-h-card-content class="overflow-x-auto">
-            <table x-h-table>
-              <thead x-h-table-header>
-                <tr>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colPool', 'Pool')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colUsed', 'Used')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colCommitted', 'Committed')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colMax', 'Max')"></th>
-                </tr>
-              </thead>
-              <tbody x-h-table-body>
-                <template x-for="pool in state.metrics.memory.pools" :key="pool.name">
+          <div x-h-card-content.flush>
+            <div x-h-table-container>
+              <table x-h-table>
+                <thead x-h-table-header data-bordered="horizontal">
                   <tr x-h-table-row>
-                    <td x-h-table-cell x-text="pool.name"></td>
-                    <td x-h-table-cell x-text="mb(pool.usage.used)"></td>
-                    <td x-h-table-cell x-text="mb(pool.usage.committed)"></td>
-                    <td x-h-table-cell x-text="mb(pool.usage.max)"></td>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colPool', 'Pool')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colUsed', 'Used')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colCommitted', 'Committed')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colMax', 'Max')"></th>
                   </tr>
-                </template>
-              </tbody>
-            </table>
+                </thead>
+                <tbody x-h-table-body>
+                  <template x-for="pool in state.metrics.memory.pools" :key="pool.name">
+                    <tr x-h-table-row>
+                      <td x-h-table-cell x-text="pool.name"></td>
+                      <td x-h-table-cell x-text="mb(pool.usage.used)"></td>
+                      <td x-h-table-cell x-text="mb(pool.usage.committed)"></td>
+                      <td x-h-table-cell x-text="mb(pool.usage.max)"></td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
 
         <!-- Garbage collectors -->
-        <div x-h-card>
-          <div x-h-card-header>
+        <div x-h-card class="overflow-hidden">
+          <div x-h-card-header class="border-b">
             <h2 x-h-card-title x-text="T('monitoring:system.gc', 'Garbage collection')"></h2>
           </div>
-          <div x-h-card-content class="overflow-x-auto">
-            <table x-h-table>
-              <thead x-h-table-header>
-                <tr>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colCollector', 'Collector')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colCollections', 'Collections')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colTime', 'Time')"></th>
-                </tr>
-              </thead>
-              <tbody x-h-table-body>
-                <template x-for="collector in state.metrics.gc" :key="collector.name">
+          <div x-h-card-content.flush>
+            <div x-h-table-container>
+              <table x-h-table>
+                <thead x-h-table-header data-bordered="horizontal">
                   <tr x-h-table-row>
-                    <td x-h-table-cell x-text="collector.name"></td>
-                    <td x-h-table-cell x-text="collector.collectionCount.toLocaleString()"></td>
-                    <td x-h-table-cell x-text="collector.collectionTimeMillis.toLocaleString() + ' ms'"></td>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colCollector', 'Collector')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colCollections', 'Collections')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colTime', 'Time')"></th>
                   </tr>
-                </template>
-              </tbody>
-            </table>
+                </thead>
+                <tbody x-h-table-body>
+                  <template x-for="collector in state.metrics.gc" :key="collector.name">
+                    <tr x-h-table-row>
+                      <td x-h-table-cell x-text="collector.name"></td>
+                      <td x-h-table-cell x-text="collector.collectionCount.toLocaleString()"></td>
+                      <td x-h-table-cell x-text="collector.collectionTimeMillis.toLocaleString() + ' ms'"></td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
 
@@ -238,37 +242,39 @@ <h2 x-h-card-title x-text="group.title"></h2>
         </template>
 
         <!-- Live threads -->
-        <div x-h-card>
-          <div x-h-card-header>
+        <div x-h-card class="overflow-hidden">
+          <div x-h-card-header class="border-b">
             <div class="hbox items-center gap-3">
               <h2 x-h-card-title class="flex-1" x-text="T('monitoring:system.threadList', 'Live threads')"></h2>
-              <div class="w-56 shrink-0">
+              <div class="shrink-0" style="width: 14rem">
                 <input x-h-input type="search" x-model="state.threadFilter"
                        :placeholder="T('monitoring:system.threadFilter', 'Filter by name or state')" />
               </div>
             </div>
           </div>
-          <div x-h-card-content class="overflow-x-auto">
-            <table x-h-table>
-              <thead x-h-table-header>
-                <tr>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colThread', 'Thread')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colState', 'State')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colCpuTime', 'CPU time')"></th>
-                  <th x-h-table-head scope="col" x-text="T('monitoring:system.colLock', 'Waiting on')"></th>
-                </tr>
-              </thead>
-              <tbody x-h-table-body>
-                <template x-for="thread in state.visibleThreads" :key="thread.id">
+          <div x-h-card-content.flush>
+            <div x-h-table-container>
+              <table x-h-table>
+                <thead x-h-table-header data-bordered="horizontal">
                   <tr x-h-table-row>
-                    <td x-h-table-cell x-text="thread.name"></td>
-                    <td x-h-table-cell x-text="thread.state"></td>
-                    <td x-h-table-cell x-text="cpuTime(thread.cpuTimeNanos)"></td>
-                    <td x-h-table-cell x-text="thread.lockOwnerName ? thread.lockOwnerName : (thread.lockName || '')"></td>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colThread', 'Thread')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colState', 'State')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colCpuTime', 'CPU time')"></th>
+                    <th x-h-table-head scope="col" x-text="T('monitoring:system.colLock', 'Waiting on')"></th>
                   </tr>
-                </template>
-              </tbody>
-            </table>
+                </thead>
+                <tbody x-h-table-body>
+                  <template x-for="thread in state.visibleThreads" :key="thread.id">
+                    <tr x-h-table-row>
+                      <td x-h-table-cell x-text="thread.name"></td>
+                      <td x-h-table-cell x-text="thread.state"></td>
+                      <td x-h-table-cell x-text="cpuTime(thread.cpuTimeNanos)"></td>
+                      <td x-h-table-cell x-text="thread.lockOwnerName ? thread.lockOwnerName : (thread.lockName || '')"></td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
 
diff --git a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/index.html b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/index.html
index 45f4d641c21..fb27a7417ac 100644
--- a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/index.html
+++ b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/index.html
@@ -34,12 +34,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -69,7 +63,7 @@
                     <span class="truncate font-medium" x-text="projectionLabel()"></span>
                     <span class="truncate text-xs font-normal" x-text="projectionSubtitle()"></span>
                   </div>
-                  <i x-h-lucide role="img" data-lucide="chevrons-up-down"></i>
+                  <svg x-h-lucide role="presentation" data-lucide="chevrons-up-down"></svg>
                 </button>
                 <ul x-h-menu aria-label="Projections" data-align="bottom-start">
                   <div x-h-menu-label x-text="T('application-core:shell.projections.title', 'Applications')"></div>
@@ -77,10 +71,10 @@
                     <li x-h-menu-item @click="selectProjection(p)">
                       <template x-if="isSvgIcon(p.icon)"><svg x-h-icon :data-link="p.icon" class="size-4" role="presentation"></svg></template>
                       <template x-if="isImageIcon(p.icon)"><img :src="p.icon" alt="" class="size-4" /></template>
-                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><i role="img" x-h-lucide :data-lucide="p.icon || 'box'"></i></template>
+                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><svg role="presentation" x-h-lucide :data-lucide="p.icon || 'box'"></svg></template>
                       <span class="flex-1" x-text="p.tkey ? T(p.tkey, p.label) : p.label"></span>
-                      <!-- svg placeholder: x-show on an <i x-h-lucide> is lost when the i is replaced by the svg -->
-                      <svg x-h-lucide x-show="projectionId === p.id" role="img" data-lucide="check"></svg>
+                      <!-- svg placeholder: an Alpine binding (here x-show) only survives on an svg, which is rendered in place -->
+                      <svg x-h-lucide x-show="projectionId === p.id" role="presentation" data-lucide="check"></svg>
                     </li>
                   </template>
                 </ul>
@@ -89,7 +83,7 @@
             <template x-if="projections.length <= 1">
               <div class="hbox items-center gap-2 p-1">
                 <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-                <div class="vbox gap-0">
+                <div class="vbox">
                   <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                   <span x-show="$store.branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="$store.branding.subtitle"></span>
                 </div>
@@ -106,8 +100,8 @@
                   <!-- The shell is task-first (inherited from the My shell copy; partner-scoped Inbox is a later phase): the Inbox IS the home page - a personal task
                        ("Fill & confirm your July timesheet") is how work arrives here. -->
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
-                      <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
+                      <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
                     </button>
                   </li>
                 </ul>
@@ -127,10 +121,10 @@
                   <ul x-h-sidebar-menu>
                     <template x-for="item in group.items" :key="item.id">
                       <li x-h-sidebar-menu-item>
-                        <button x-h-sidebar-menu-button :data-active="isAppActive(item)" @click="openApp(item)">
+                        <button x-h-sidebar-menu-nav :data-active="isAppActive(item)" @click="openApp(item)">
                           <template x-if="isSvgIcon(item.icon)"><svg x-h-icon :data-link="item.icon" class="size-4" role="presentation"></svg></template>
                           <template x-if="isImageIcon(item.icon)"><img :src="item.icon" alt="" class="size-4" /></template>
-                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><i role="img" x-h-lucide :data-lucide="item.icon || 'box'"></i></template>
+                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><svg role="presentation" x-h-lucide :data-lucide="item.icon || 'box'"></svg></template>
                           <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
                         </button>
                       </li>
@@ -143,13 +137,15 @@
 
           <!-- Settings pinned to the footer; it aggregates every app's SETTING entities. -->
           <div x-h-sidebar-footer>
-            <ul x-h-sidebar-menu>
-              <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
-                <button x-h-sidebar-menu-button :data-active="settingsMode" @click="openSettings()">
-                  <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
-                </button>
-              </li>
-            </ul>
+            <nav :aria-label="T('application-core:shell.nav.settings', 'Settings')">
+              <ul x-h-sidebar-menu>
+                <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
+                  <button x-h-sidebar-menu-nav :data-active="settingsMode" @click="openSettings()">
+                    <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -160,28 +156,43 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title x-text="T('application-core:shell.nav.partnerPortal', 'Partner Portal')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <!-- Theme: light / dark / auto through the shared `theme` store. Harmonia applies the saved
+                 colour scheme (or the OS scheme in auto mode) itself and keeps every same-origin frame
+                 and tab in sync. -->
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <!-- Notifications: the bell shows the unread count; the popover lists them. -->
             <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-              <i role="img" x-h-lucide data-lucide="bell"></i>
-              <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
-                    style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
+              <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
+              <template x-if="$store.notifications.unreadCount"><span x-h-badge-indicator data-variant="negative" x-text="$store.notifications.unreadCount"></span></template>
             </button>
-            <div class="w-80" x-h-popover data-innerclicks="true">
+            <div class="w-xs" x-h-popover data-innerclicks="true">
               <div x-h-toolbar data-size="sm">
                 <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications') + ' (' + $store.notifications.unreadCount + ')'"></span>
                 <div x-h-toolbar-spacer></div>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                        title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                        title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
               </div>
               <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm" x-text="T('application-core:shell.notifications.caughtUp', 'You\u2019re all caught up.')"></div>
               <ol x-show="$store.notifications.items.length" x-h-notification-list>
@@ -201,34 +212,35 @@ <h1 x-h-notification-title x-text="n.title"></h1>
             <!-- Logged-in user: avatar; the dropdown shows the user name and Log out. -->
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
                    launchpad renders, minus this one (the shared `shells` store). -->
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- svg placeholder: rendered in place, so the bound :data-lucide stays live (a replaced placeholder reads it once). -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
           </div>
@@ -253,7 +265,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processTasks.formTitle)"></h2>
-          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
@@ -269,7 +281,7 @@ <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processT
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
-          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.customActions.dialogOpen" :src="$store.customActions.dialogUrl"
@@ -281,10 +293,10 @@ <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
     <!-- Confirmation for an `endpoint` custom action (a generate / create-from): the POST mutates
          data the moment it fires, so the user gets an explicit chance to cancel before it runs. -->
     <div x-h-dialog-overlay :data-open="$store.customActions.confirmOpen">
-      <div x-h-dialog data-size="sm" role="alertdialog">
+      <div x-h-dialog role="alertdialog">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.customActions.confirmAction.label) || T('application-core:shell.customActions.confirmTitle', 'Run action')"></h2>
-          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <p x-h-text.muted x-text="T('application-core:shell.customActions.confirmBody', 'Run {{name}} for the selected record? This creates or changes data.', { name: ($store.customActions.confirmAction && $store.customActions.confirmAction.label) || '' })"></p>
@@ -309,7 +321,7 @@ <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.custo
         <div x-h-dialog data-prompt-dialog>
           <div x-h-dialog-header>
             <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('application-core:shell.customActions.promptTitle', 'Run action')"></h2>
-            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div x-h-dialog-content>
             <div x-show="s.promptError" x-h-alert data-variant="negative" role="alert">
@@ -320,10 +332,10 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                 <div x-h-field :style="['NUMBER','CHECKBOX','DATE'].includes(col.widget) ? '' : 'grid-column: 1 / -1'">
                   <label x-h-label x-text="col.tkey ? T(col.tkey, col.label) : col.label"></label>
                   <template x-if="col.widget === 'DROPDOWN'">
-                    <div x-h-select data-filter="contains">
+                    <div x-h-select>
                       <input x-h-select-input x-model="s.promptValues[col.name]" :placeholder="T('application-core:shell.customActions.promptSelect', 'Select...')" />
                       <div x-h-select-content>
-                        <div x-h-select-search></div>
+                        <div x-h-select-search data-filter="contains"></div>
                         <div x-h-select-list>
                           <template x-for="opt in s.promptOptionsFor(col.name)" :key="opt.value">
                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -339,7 +351,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                     <div class="hbox items-center"><span x-h-checkbox><input type="checkbox" x-model="s.promptValues[col.name]" /></span></div>
                   </template>
                   <template x-if="col.widget === 'DATE'">
-                    <div x-h-date-picker.table>
+                    <div x-h-date-picker>
                       <input type="text" :placeholder="HarmoniaFormat.dateHint()" />
                       <button x-h-date-picker-trigger aria-label="Choose date"></button>
                       <div x-h-date-picker-popup="HarmoniaFormat.pickerConfig()" x-model="s.promptValues[col.name]"></div>
diff --git a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/js/appShell.js b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/js/appShell.js
index 092d6c9dd62..2dddf6590b9 100644
--- a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/js/appShell.js
+++ b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/js/appShell.js
@@ -191,6 +191,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async init() {
+      // This component renders the toast overlay, so it lends its $notifications magic to the
+      // shared store (a store has no component scope of its own to reach the magic from).
+      Alpine.store('notifications').attachToaster(this.$notifications);
       const projectionsLoaded = this.loadProjections();
       try {
         const res = await fetch(PERSPECTIVES_URL, { headers: { 'Accept': 'application/json' } });
diff --git a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/views/_settings.html b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/views/_settings.html
index 404254d971a..b442751525e 100644
--- a/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/views/_settings.html
+++ b/components/resources/resources-partner/src/main/resources/META-INF/dirigible/partner/views/_settings.html
@@ -6,33 +6,36 @@
   while visible - an inline x-show=display:none block measures 0x0 and ignores data-size). No own
   x-data: it inherits the shell's `app` component (settingsItems / selectSetting / settingsUrl).
 -->
-<div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+<div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
   <div x-h-split-panel data-size="25%" data-min="200">
     <div class="vbox gap-2 p-3">
       <span x-h-text.muted class="text-sm" x-text="T('application-core:shell.settings.configAll', 'Configuration and nomenclature across all applications.')"></span>
-      <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
-           data-language preference. Selecting it renders the local detail page on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'region-language' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'region-language' })">
-        <i role="img" x-h-lucide data-lucide="globe"></i>
-        <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
-      </button>
-      <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
-           per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'tenant-configuration' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'tenant-configuration' })">
-        <i role="img" x-h-lucide data-lucide="sliders-horizontal"></i>
-        <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
-      </button>
-      <template x-for="item in visibleSettingsItems()" :key="item.id">
-        <button x-h-button data-variant="outline" class="justify-start"
-                :data-state="isSettingActive(item) ? 'selected' : ''" @click="selectSetting(item)">
-          <i role="img" x-h-lucide data-lucide="settings"></i>
-          <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
-        </button>
-      </template>
+      <ul x-h-list :aria-label="T('application-core:shell.settings.title', 'Settings')">
+        <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
+             data-language preference. Selecting it renders the local detail page on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'region-language' })" @click="selectSetting({ id: 'region-language' })">
+            <svg role="presentation" x-h-lucide data-lucide="globe"></svg>
+            <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
+          </button>
+        </li>
+        <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
+             per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'tenant-configuration' })" @click="selectSetting({ id: 'tenant-configuration' })">
+            <svg role="presentation" x-h-lucide data-lucide="sliders-horizontal"></svg>
+            <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
+          </button>
+        </li>
+        <template x-for="item in visibleSettingsItems()" :key="item.id">
+          <li x-h-list-item>
+            <button x-h-list-item-button :aria-current="isSettingActive(item)" @click="selectSetting(item)">
+              <svg role="presentation" x-h-lucide data-lucide="settings"></svg>
+              <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
+            </button>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
   <div x-h-split-panel data-size="75%" style="position: relative;">
@@ -88,7 +91,7 @@
           <input x-h-input x-model="$store.formats.number" placeholder="### ### ### ##0.00" />
         </div>
         <div class="hbox gap-2">
-          <button x-h-button data-variant="emphasized" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
+          <button x-h-button data-variant="primary" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
           <button x-h-button data-variant="outline" @click="$store.formats.reset()" x-text="T('application-core:shell.settings.resetDefaults', 'Reset to defaults')"></button>
         </div>
         <template x-if="languageWarnings().length > 0">
@@ -132,7 +135,7 @@
               </div>
             </template>
             <div class="hbox gap-2">
-              <button x-h-button data-variant="emphasized" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
+              <button x-h-button data-variant="primary" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
               <button x-h-button data-variant="outline" @click="loadTenantConfig()" x-text="T('application-core:shell.settings.reload', 'Reload')"></button>
             </div>
           </div>
diff --git a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/index.html b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/index.html
index dd3c24a308a..1cdbc846108 100644
--- a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/index.html
+++ b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/index.html
@@ -34,12 +34,6 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="/services/web/application-core/shell/css/app.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -69,7 +63,7 @@
                     <span class="truncate font-medium" x-text="projectionLabel()"></span>
                     <span class="truncate text-xs font-normal" x-text="projectionSubtitle()"></span>
                   </div>
-                  <i x-h-lucide role="img" data-lucide="chevrons-up-down"></i>
+                  <svg x-h-lucide role="presentation" data-lucide="chevrons-up-down"></svg>
                 </button>
                 <ul x-h-menu aria-label="Projections" data-align="bottom-start">
                   <div x-h-menu-label x-text="T('application-core:shell.projections.title', 'Applications')"></div>
@@ -77,10 +71,10 @@
                     <li x-h-menu-item @click="selectProjection(p)">
                       <template x-if="isSvgIcon(p.icon)"><svg x-h-icon :data-link="p.icon" class="size-4" role="presentation"></svg></template>
                       <template x-if="isImageIcon(p.icon)"><img :src="p.icon" alt="" class="size-4" /></template>
-                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><i role="img" x-h-lucide :data-lucide="p.icon || 'box'"></i></template>
+                      <template x-if="!isSvgIcon(p.icon) && !isImageIcon(p.icon)"><svg role="presentation" x-h-lucide :data-lucide="p.icon || 'box'"></svg></template>
                       <span class="flex-1" x-text="p.tkey ? T(p.tkey, p.label) : p.label"></span>
-                      <!-- svg placeholder: x-show on an <i x-h-lucide> is lost when the i is replaced by the svg -->
-                      <svg x-h-lucide x-show="projectionId === p.id" role="img" data-lucide="check"></svg>
+                      <!-- svg placeholder: an Alpine binding (here x-show) only survives on an svg, which is rendered in place -->
+                      <svg x-h-lucide x-show="projectionId === p.id" role="presentation" data-lucide="check"></svg>
                     </li>
                   </template>
                 </ul>
@@ -89,7 +83,7 @@
             <template x-if="projections.length <= 1">
               <div class="hbox items-center gap-2 p-1">
                 <img :src="$store.branding.logo" :alt="$store.branding.name" class="size-5" />
-                <div class="vbox gap-0">
+                <div class="vbox">
                   <span class="font-bold leading-tight" x-text="$store.branding.name"></span>
                   <span x-show="$store.branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="$store.branding.subtitle"></span>
                 </div>
@@ -106,8 +100,8 @@
                   <!-- The Personal shell is task-first: the Inbox IS the home page - a personal task
                        ("Fill & confirm your July timesheet") is how work arrives here. -->
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
-                      <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isBuiltinActive('/inbox') || isBuiltinActive('/')" @click="navigate('/inbox')">
+                      <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
                     </button>
                   </li>
                 </ul>
@@ -127,10 +121,10 @@
                   <ul x-h-sidebar-menu>
                     <template x-for="item in group.items" :key="item.id">
                       <li x-h-sidebar-menu-item>
-                        <button x-h-sidebar-menu-button :data-active="isAppActive(item)" @click="openApp(item)">
+                        <button x-h-sidebar-menu-nav :data-active="isAppActive(item)" @click="openApp(item)">
                           <template x-if="isSvgIcon(item.icon)"><svg x-h-icon :data-link="item.icon" class="size-4" role="presentation"></svg></template>
                           <template x-if="isImageIcon(item.icon)"><img :src="item.icon" alt="" class="size-4" /></template>
-                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><i role="img" x-h-lucide :data-lucide="item.icon || 'box'"></i></template>
+                          <template x-if="!isSvgIcon(item.icon) && !isImageIcon(item.icon)"><svg role="presentation" x-h-lucide :data-lucide="item.icon || 'box'"></svg></template>
                           <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
                         </button>
                       </li>
@@ -143,13 +137,15 @@
 
           <!-- Settings pinned to the footer; it aggregates every app's SETTING entities. -->
           <div x-h-sidebar-footer>
-            <ul x-h-sidebar-menu>
-              <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
-                <button x-h-sidebar-menu-button :data-active="settingsMode" @click="openSettings()">
-                  <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
-                </button>
-              </li>
-            </ul>
+            <nav :aria-label="T('application-core:shell.nav.settings', 'Settings')">
+              <ul x-h-sidebar-menu>
+                <li x-h-sidebar-menu-item x-show="visibleSettingsItems().length > 0">
+                  <button x-h-sidebar-menu-nav :data-active="settingsMode" @click="openSettings()">
+                    <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -160,28 +156,43 @@
           <div x-h-toolbar data-variant="transparent" x-cloak>
             <button x-show="hiddenPanels.left" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <span x-h-toolbar-title x-text="T('application-core:shell.nav.personal', 'Personal')"></span>
             <div x-h-toolbar-spacer></div>
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <!-- Theme: light / dark / auto through the shared `theme` store. Harmonia applies the saved
+                 colour scheme (or the OS scheme in auto mode) itself and keeps every same-origin frame
+                 and tab in sync. -->
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
             <!-- Notifications: the bell shows the unread count; the popover lists them. -->
             <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-              <i role="img" x-h-lucide data-lucide="bell"></i>
-              <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
-                    style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
+              <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
+              <template x-if="$store.notifications.unreadCount"><span x-h-badge-indicator data-variant="negative" x-text="$store.notifications.unreadCount"></span></template>
             </button>
-            <div class="w-80" x-h-popover data-innerclicks="true">
+            <div class="w-xs" x-h-popover data-innerclicks="true">
               <div x-h-toolbar data-size="sm">
                 <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications') + ' (' + $store.notifications.unreadCount + ')'"></span>
                 <div x-h-toolbar-spacer></div>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                        title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                        title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
               </div>
               <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm" x-text="T('application-core:shell.notifications.caughtUp', 'You\u2019re all caught up.')"></div>
               <ol x-show="$store.notifications.items.length" x-h-notification-list>
@@ -201,26 +212,28 @@ <h1 x-h-notification-title x-text="n.title"></h1>
             <!-- Logged-in user: avatar; the dropdown shows the user name and Log out. -->
             <button id="user-menu-trigger" x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <!-- Act as (delegated entry): entitled users arm an acting identity; while armed the
                    personal surfaces and the Inbox serve that person's world (the banner rules). -->
               <template x-if="actAs.entitled && !actAs.acting">
                 <li x-h-menu-item @click="actAsDialog = true">
-                  <i role="img" x-h-lucide data-lucide="user-round-cog"></i> <span x-text="T('application-core:shell.actAs.start', 'Act as...')"></span>
+                  <svg role="presentation" x-h-lucide data-lucide="user-round-cog"></svg> <span x-text="T('application-core:shell.actAs.start', 'Act as...')"></span>
                 </li>
               </template>
               <template x-if="actAs.acting">
                 <li x-h-menu-item @click="disarmActAs()">
-                  <i role="img" x-h-lucide data-lucide="user-round-x"></i> <span x-text="T('application-core:shell.actAs.stop', 'Stop acting as') + ' ' + actAs.acting"></span>
+                  <svg role="presentation" x-h-lucide data-lucide="user-round-x"></svg> <span x-text="T('application-core:shell.actAs.stop', 'Stop acting as') + ' ' + actAs.acting"></span>
                 </li>
               </template>
               <!-- Switch shells without the detour through Home: the same `platform-shells` list the
@@ -228,20 +241,19 @@ <h1 x-h-notification-title x-text="n.title"></h1>
               <div x-h-menu-separator></div>
               <div x-h-menu-label x-text="T('application-core:shell.switch.title', 'Switch to')"></div>
               <li x-h-menu-item @click="$store.shells.openHome()">
-                <i role="img" x-h-lucide data-lucide="house"></i>
+                <svg role="presentation" x-h-lucide data-lucide="house"></svg>
                 <span x-text="T('application-core:shell.switch.home', 'Home')"></span>
               </li>
               <template x-for="shell in $store.shells.items" :key="shell.id">
                 <li x-h-menu-item @click="$store.shells.open(shell)">
-                  <!-- svg, not <i>: the Lucide plugin REPLACES the element it upgrades, so a bound
-                       :data-lucide on an <i> throws and aborts Alpine's walk over the rest of the menu. -->
-                  <svg x-h-lucide role="img" :data-lucide="$store.shells.iconFor(shell)"></svg>
+                  <!-- svg placeholder: rendered in place, so the bound :data-lucide stays live (a replaced placeholder reads it once). -->
+                  <svg x-h-lucide role="presentation" :data-lucide="$store.shells.iconFor(shell)"></svg>
                   <span x-text="shell.label"></span>
                 </li>
               </template>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
           </div>
@@ -249,8 +261,8 @@ <h1 x-h-notification-title x-text="n.title"></h1>
           <!-- Act-as (delegated entry) banner: loud and persistent while armed - every entry below
                is recorded in the acting person's name (the audit log keeps the real user). -->
           <div x-show="actAs.acting" x-cloak class="hbox items-center gap-2 px-3 py-1.5 text-sm"
-               style="background: var(--color-warning, #b45309); color: #fff;">
-            <i role="img" x-h-lucide data-lucide="user-round-cog"></i>
+               style="background: var(--warning); color: #fff;">
+            <svg role="presentation" x-h-lucide data-lucide="user-round-cog"></svg>
             <span>
               <span x-text="T('application-core:shell.actAs.bannerActing', 'Acting as')"></span>
               <b x-text="actAs.acting"></b>
@@ -284,7 +296,7 @@ <h1 x-h-notification-title x-text="n.title"></h1>
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processTasks.formTitle)"></h2>
-          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
@@ -300,7 +312,7 @@ <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processT
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
-          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.customActions.dialogOpen" :src="$store.customActions.dialogUrl"
@@ -312,10 +324,10 @@ <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
     <!-- Confirmation for an `endpoint` custom action (a generate / create-from): the POST mutates
          data the moment it fires, so the user gets an explicit chance to cancel before it runs. -->
     <div x-h-dialog-overlay :data-open="$store.customActions.confirmOpen">
-      <div x-h-dialog data-size="sm" role="alertdialog">
+      <div x-h-dialog role="alertdialog">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.customActions.confirmAction.label) || T('application-core:shell.customActions.confirmTitle', 'Run action')"></h2>
-          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <p x-h-text.muted x-text="T('application-core:shell.customActions.confirmBody', 'Run {{name}} for the selected record? This creates or changes data.', { name: ($store.customActions.confirmAction && $store.customActions.confirmAction.label) || '' })"></p>
@@ -340,7 +352,7 @@ <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.custo
         <div x-h-dialog data-prompt-dialog>
           <div x-h-dialog-header>
             <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('application-core:shell.customActions.promptTitle', 'Run action')"></h2>
-            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div x-h-dialog-content>
             <div x-show="s.promptError" x-h-alert data-variant="negative" role="alert">
@@ -351,10 +363,10 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                 <div x-h-field :style="['NUMBER','CHECKBOX','DATE'].includes(col.widget) ? '' : 'grid-column: 1 / -1'">
                   <label x-h-label x-text="col.tkey ? T(col.tkey, col.label) : col.label"></label>
                   <template x-if="col.widget === 'DROPDOWN'">
-                    <div x-h-select data-filter="contains">
+                    <div x-h-select>
                       <input x-h-select-input x-model="s.promptValues[col.name]" :placeholder="T('application-core:shell.customActions.promptSelect', 'Select...')" />
                       <div x-h-select-content>
-                        <div x-h-select-search></div>
+                        <div x-h-select-search data-filter="contains"></div>
                         <div x-h-select-list>
                           <template x-for="opt in s.promptOptionsFor(col.name)" :key="opt.value">
                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -370,7 +382,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
                     <div class="hbox items-center"><span x-h-checkbox><input type="checkbox" x-model="s.promptValues[col.name]" /></span></div>
                   </template>
                   <template x-if="col.widget === 'DATE'">
-                    <div x-h-date-picker.table>
+                    <div x-h-date-picker>
                       <input type="text" :placeholder="HarmoniaFormat.dateHint()" />
                       <button x-h-date-picker-trigger aria-label="Choose date"></button>
                       <div x-h-date-picker-popup="HarmoniaFormat.pickerConfig()" x-model="s.promptValues[col.name]"></div>
@@ -400,7 +412,7 @@ <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('appl
       <div x-h-dialog style="max-width: 460px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T('application-core:shell.actAs.title', 'Act as another person')"></h2>
-          <button x-h-dialog-close @click="actAsDialog = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="actAsDialog = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content class="vbox gap-2">
           <p class="text-sm" x-h-text.muted
diff --git a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/js/appShell.js b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/js/appShell.js
index 16ecdec84c7..e93dbeae91f 100644
--- a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/js/appShell.js
+++ b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/js/appShell.js
@@ -236,6 +236,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async init() {
+      // This component renders the toast overlay, so it lends its $notifications magic to the
+      // shared store (a store has no component scope of its own to reach the magic from).
+      Alpine.store('notifications').attachToaster(this.$notifications);
       this.loadActAs(); // fire-and-forget: the banner/menu appear when the state arrives
       // The arming expires server-side; re-read it when the tab comes back so the banner is not
       // still claiming an identity the platform has already dropped.
diff --git a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/views/_settings.html b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/views/_settings.html
index 404254d971a..b442751525e 100644
--- a/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/views/_settings.html
+++ b/components/resources/resources-personal/src/main/resources/META-INF/dirigible/personal/views/_settings.html
@@ -6,33 +6,36 @@
   while visible - an inline x-show=display:none block measures 0x0 and ignores data-size). No own
   x-data: it inherits the shell's `app` component (settingsItems / selectSetting / settingsUrl).
 -->
-<div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+<div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
   <div x-h-split-panel data-size="25%" data-min="200">
     <div class="vbox gap-2 p-3">
       <span x-h-text.muted class="text-sm" x-text="T('application-core:shell.settings.configAll', 'Configuration and nomenclature across all applications.')"></span>
-      <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
-           data-language preference. Selecting it renders the local detail page on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'region-language' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'region-language' })">
-        <i role="img" x-h-lucide data-lucide="globe"></i>
-        <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
-      </button>
-      <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
-           per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
-      <button x-h-button data-variant="outline" class="justify-start"
-              :data-state="isSettingActive({ id: 'tenant-configuration' }) ? 'selected' : ''"
-              @click="selectSetting({ id: 'tenant-configuration' })">
-        <i role="img" x-h-lucide data-lucide="sliders-horizontal"></i>
-        <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
-      </button>
-      <template x-for="item in visibleSettingsItems()" :key="item.id">
-        <button x-h-button data-variant="outline" class="justify-start"
-                :data-state="isSettingActive(item) ? 'selected' : ''" @click="selectSetting(item)">
-          <i role="img" x-h-lucide data-lucide="settings"></i>
-          <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
-        </button>
-      </template>
+      <ul x-h-list :aria-label="T('application-core:shell.settings.title', 'Settings')">
+        <!-- Region & Language: a built-in settings entry (not from an app) - the platform-wide
+             data-language preference. Selecting it renders the local detail page on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'region-language' })" @click="selectSetting({ id: 'region-language' })">
+            <svg role="presentation" x-h-lucide data-lucide="globe"></svg>
+            <span x-text="T('application-core:shell.settings.regionLanguage', 'Region & Language')"></span>
+          </button>
+        </li>
+        <!-- Tenant Configuration: a built-in settings entry (not from an app) - the predefined,
+             per-tenant-overridable properties (branding). Selecting it renders the local detail on the right. -->
+        <li x-h-list-item>
+          <button x-h-list-item-button :aria-current="isSettingActive({ id: 'tenant-configuration' })" @click="selectSetting({ id: 'tenant-configuration' })">
+            <svg role="presentation" x-h-lucide data-lucide="sliders-horizontal"></svg>
+            <span x-text="T('application-core:shell.settings.tenantConfig', 'Tenant Configuration')"></span>
+          </button>
+        </li>
+        <template x-for="item in visibleSettingsItems()" :key="item.id">
+          <li x-h-list-item>
+            <button x-h-list-item-button :aria-current="isSettingActive(item)" @click="selectSetting(item)">
+              <svg role="presentation" x-h-lucide data-lucide="settings"></svg>
+              <span x-text="item.tkey ? T(item.tkey, item.label) : item.label"></span>
+            </button>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
   <div x-h-split-panel data-size="75%" style="position: relative;">
@@ -88,7 +91,7 @@
           <input x-h-input x-model="$store.formats.number" placeholder="### ### ### ##0.00" />
         </div>
         <div class="hbox gap-2">
-          <button x-h-button data-variant="emphasized" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
+          <button x-h-button data-variant="primary" @click="$store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
           <button x-h-button data-variant="outline" @click="$store.formats.reset()" x-text="T('application-core:shell.settings.resetDefaults', 'Reset to defaults')"></button>
         </div>
         <template x-if="languageWarnings().length > 0">
@@ -132,7 +135,7 @@
               </div>
             </template>
             <div class="hbox gap-2">
-              <button x-h-button data-variant="emphasized" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
+              <button x-h-button data-variant="primary" @click="saveTenantConfig()" x-text="T('application-core:shell.settings.save', 'Save')"></button>
               <button x-h-button data-variant="outline" @click="loadTenantConfig()" x-text="T('application-core:shell.settings.reload', 'Reload')"></button>
             </div>
           </div>
diff --git a/components/security/security-oauth2/src/main/resources/static/tenant-selection.html b/components/security/security-oauth2/src/main/resources/static/tenant-selection.html
index debbcc61b58..38f7e23add0 100644
--- a/components/security/security-oauth2/src/main/resources/static/tenant-selection.html
+++ b/components/security/security-oauth2/src/main/resources/static/tenant-selection.html
@@ -31,12 +31,6 @@
     <title>Select a tenant</title>
 
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
-
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
     <style>
       /* The tenant rows are framed tiles that lift towards the brand colour, like the Home tiles. */
       .tenant-tile { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; text-align: left; }
@@ -58,20 +52,32 @@
       <div class="hbox items-center gap-2 p-1">
         <img x-show="branding.logo" :src="branding.logo" :alt="branding.name" class="size-5"
              @error="branding.logo = ''" />
-        <div class="vbox gap-0">
+        <div class="vbox">
           <span class="font-bold leading-tight" x-text="branding.name"></span>
           <span x-show="branding.subtitle" class="text-xs text-muted-foreground leading-tight" x-text="branding.subtitle"></span>
         </div>
       </div>
       <div x-h-toolbar-spacer></div>
-      <button x-h-button data-variant="transparent" data-size="icon-sm" @click="toggleTheme()"
-              :aria-label="dark ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-        <svg x-h-lucide x-show="!dark" role="img" data-lucide="moon"></svg>
-        <svg x-h-lucide x-show="dark" role="img" data-lucide="sun"></svg>
+      <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm" aria-label="Theme" title="Theme">
+        <svg x-h-lucide role="presentation" :data-lucide="themeIcon"></svg>
       </button>
+      <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+        <li x-h-menu-radio-item="'light'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+          <span>Light</span>
+        </li>
+        <li x-h-menu-radio-item="'dark'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+          <span>Dark</span>
+        </li>
+        <li x-h-menu-radio-item="'auto'" name="theme" x-model="themeMode">
+          <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+          <span>Auto</span>
+        </li>
+      </ul>
       <span class="text-sm text-muted-foreground px-2" x-show="userName" x-text="userName"></span>
       <button x-h-button data-variant="transparent" data-size="sm" @click="logout()">
-        <svg x-h-lucide role="img" data-lucide="log-out"></svg> <span>Log out</span>
+        <svg x-h-lucide role="presentation" data-lucide="log-out"></svg> <span>Log out</span>
       </button>
     </div>
 
@@ -86,11 +92,11 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
         </p>
 
         <div x-show="loading" class="hbox items-center gap-2 text-sm text-muted-foreground" style="margin-top: 2.5rem;">
-          <svg x-h-lucide role="img" data-lucide="loader-circle" class="size-4"></svg>
+          <svg x-h-lucide role="presentation" data-lucide="loader-circle" class="size-4"></svg>
           <span>Loading your tenants...</span>
         </div>
 
-        <div x-show="error" role="alert" class="rounded-md border border-destructive p-4 text-sm"
+        <div x-show="error" role="alert" class="rounded-md border border-negative p-4 text-sm"
              style="margin-top: 2.5rem;">
           <span x-text="error"></span>
         </div>
@@ -101,13 +107,13 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
                     :disabled="!tenant.provisionedHere || busy" @click="select(tenant)"
                     :aria-current="tenant.id === selectedTenantId ? 'true' : 'false'">
               <span class="tenant-tile-icon hbox items-center justify-center rounded-md bg-muted size-11 flex-none">
-                  <svg x-h-lucide role="img" data-lucide="building-2" class="size-5"></svg>
+                  <svg x-h-lucide role="presentation" data-lucide="building-2" class="size-5"></svg>
               </span>
               <span class="vbox min-w-0 flex-1" style="gap: .15rem;">
                 <span class="hbox items-center gap-2 text-lg font-semibold">
                   <span x-text="tenant.name || tenant.id"></span>
                   <template x-if="selectedTenantId && tenant.id === selectedTenantId">
-                    <span x-h-badge data-variant="secondary">Current</span>
+                    <span x-h-badge>Current</span>
                   </template>
                 </span>
                 <!-- The id is only worth a line of its own when it is not what the name already says. -->
@@ -117,7 +123,7 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
                   Being prepared. Try again in a few minutes.
                 </span>
               </span>
-              <svg x-h-lucide role="img" data-lucide="arrow-right" class="size-4 text-muted-foreground flex-none"
+              <svg x-h-lucide role="presentation" data-lucide="arrow-right" class="size-4 text-muted-foreground flex-none"
                    x-show="tenant.provisionedHere"></svg>
             </button>
           </template>
@@ -149,7 +155,8 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
               loading: true,
               busy: false,
               error: '',
-              dark: false,
+              _themeMode: 'auto',   // 'light' | 'dark' | 'auto' - the selection
+              themeScheme: 'light', // the scheme applied right now
 
               async init() {
                   const b = window.PlatformBranding || (window.top && window.top.PlatformBranding) || {};
@@ -159,7 +166,7 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
                       const link = document.querySelector('link[rel="icon"]');
                       if (link) link.href = favicon;
                   }
-                  try { this.dark = window.Harmonia && Harmonia.getColorScheme() === 'dark'; } catch (e) { this.dark = false; }
+                  this.initTheme();
                   await Promise.all([this.loadUser(), this.loadTenants()]);
                   this.loading = false;
               },
@@ -236,9 +243,36 @@ <h1 class="text-3xl font-bold leading-tight tracking-tight" style="margin-top: .
               // only place that has to know where home is.
               goHome() { window.location.assign('/home'); },
 
-              toggleTheme() {
-                  this.dark = !this.dark;
-                  if (window.Harmonia) Harmonia.setColorScheme(this.dark ? 'dark' : 'light');
+              // Harmonia owns the colour scheme: it persists the selection, applies the `.dark` class
+              // and keeps every same-origin frame and tab in sync. The listener keeps this control in
+              // step when the change is made elsewhere, or when the OS flips while `auto` is selected.
+              initTheme() {
+                  if (!window.Harmonia) return;
+                  this._themeMode = Harmonia.getColorScheme();
+                  this.themeScheme = this.resolveScheme(this._themeMode);
+                  Harmonia.addColorSchemeListener((scheme, mode) => {
+                      this.themeScheme = scheme;
+                      if (mode) this._themeMode = mode;
+                  });
+              },
+
+              get themeMode() { return this._themeMode; },
+
+              set themeMode(value) {
+                  if (value !== 'light' && value !== 'dark' && value !== 'auto') return;
+                  this._themeMode = value;
+                  this.themeScheme = this.resolveScheme(value);
+                  if (window.Harmonia) Harmonia.setColorScheme(value);
+              },
+
+              get themeIcon() {
+                  if (this._themeMode === 'auto') return 'sun-moon';
+                  return this.themeScheme === 'dark' ? 'moon' : 'sun';
+              },
+
+              resolveScheme(mode) {
+                  if (mode === 'light' || mode === 'dark') return mode;
+                  return window.Harmonia ? Harmonia.getSystemColorScheme() : 'light';
               },
 
               logout() { window.location.replace('/logout'); },
diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 6b1296c3288..11358f5e1bf 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -151,9 +151,10 @@ Three things about it are deliberate and easy to get wrong:
 | process tasks | gated on `hasProcess` / `ProcessId` | ✅ processTasks Alpine store (inbox fetch + claim + bucket by processInstanceId) + inline popover in list/manage/master rows + app-wide task-form dialog |
 
 Asset embedding (Phase 1 — DONE, verified end-to-end against a live app):
-- Alpine `3.15.11` + Harmonia `1.24.2` + Lucide `1.8.0` are **webjars** bundled via
-  `components/resources/application-core` (`harmonia.version` in the root pom; `1.24.2` carries the
-  `x-h-select` dropdown fix), served version-less through webjars-locator at `/webjars/...` (public).
+- Alpine `3.16.3` + Harmonia `3.1.2` + Lucide `1.20.0` are **webjars** bundled via
+  `components/resources/application-core` (`alpinejs.version` / `harmonia.version` / `lucide.version`
+  in the root pom), served version-less through webjars-locator at `/webjars/...` (public). The
+  Harmonia rules live in the upstream skill - see `.claude/docs/harmonia-ui.md`.
 - Pinecone Router is the `org.webjars.npm:pinecone-router` **webjar** (pulled by
   `application-core`), served version-less at `/webjars/pinecone-router/dist/router.min.js`
   (the package `main`, a self-registering IIFE). It was previously vendored — there was no webjar
diff --git a/components/template/template-application-ui-harmonia-java/reference/alpinejs/SKILL.md b/components/template/template-application-ui-harmonia-java/reference/alpinejs/SKILL.md
index bb124899a24..8959f76816c 100644
--- a/components/template/template-application-ui-harmonia-java/reference/alpinejs/SKILL.md
+++ b/components/template/template-application-ui-harmonia-java/reference/alpinejs/SKILL.md
@@ -3,6 +3,8 @@ name: alpinejs
 description: Architect non-trivial Alpine.js applications — deciding between x-data and Alpine.store(), organizing pages/views as components, structuring folders and JS modules, integrating routers like Pinecone Router, and handling both build-step and CDN-only setups. Use this skill whenever the user asks about Alpine.js project structure, file organization, "best practices," scaling beyond a one-page demo, where to put business logic, how to organize stores/components, routing in Alpine, SPA-style page modules, "x-data vs store," CDN versus bundler trade-offs, or how to migrate inline x-data into proper JS modules — even if they don't say "architecture" explicitly. Don't trigger for simple syntax questions or single-component how-tos that have nothing to do with structure.
 ---
 > Reference copied from **codbex/codbex-athena-app** (`.claude/skills/`) for the Harmonia runtime UI work in this repo. Source of truth lives in that project; keep in sync when Harmonia changes.
+>
+> Two things in it do NOT apply to this repo: icons are rendered by the `x-h-lucide` plugin, so never call `lucide.createIcons()` (the `alpine:initialized` example below is athena's older pattern), and every Harmonia component follows the upstream Harmonia skill, not the snippets here (see `.claude/docs/harmonia-ui.md`).
 
 
 # Alpine.js Application Architecture
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/admin/admin-index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/admin/admin-index.html.template
index 858b50cc448..4e351520de2 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/admin/admin-index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/admin/admin-index.html.template
@@ -20,30 +20,33 @@
 <body x-data="adminApp" x-cloak class="hbox size-full">
 
     <!-- Entity navigation: every entity of the module, no grouping, no opinions. -->
-    <aside class="vbox gap-1 p-3 border-e overflow-y-auto shrink-0" style="width: 15rem;">
+    <aside class="vbox gap-1 p-3 border-r overflow-y-auto shrink-0" style="width: 15rem;">
         <div class="hbox items-center gap-2 pb-2">
-            <svg x-h-lucide role="img" data-lucide="wrench" class="size-4"></svg>
+            <svg x-h-lucide role="presentation" data-lucide="wrench" class="size-4"></svg>
             <span class="font-semibold" x-text="config.title"></span>
         </div>
-        <template x-for="e in config.entities" :key="e.name">
-            <button type="button" x-h-button :data-variant="selected && selected.name === e.name ? 'secondary' : 'transparent'"
-                    class="justify-start" @click="select(e)">
-                <span x-text="e.label"></span>
-            </button>
-        </template>
+        <ul x-h-list aria-label="Entities">
+            <template x-for="e in config.entities" :key="e.name">
+                <li x-h-list-item>
+                    <button type="button" x-h-list-item-button :aria-current="selected && selected.name === e.name" @click="select(e)">
+                        <span x-text="e.label"></span>
+                    </button>
+                </li>
+            </template>
+        </ul>
     </aside>
 
     <!-- The selected entity: flat table + record editor. -->
-    <main class="vbox grow overflow-hidden" x-show="selected">
+    <main class="vbox flex-1 overflow-hidden" x-show="selected">
         <div x-h-toolbar>
             <span x-h-toolbar-title x-text="selected ? selected.label : ''"></span>
-            <span class="text-sm opacity-70" x-text="total + ' record(s)'"></span>
-            <span class="grow"></span>
+            <span class="text-sm opacity-75" x-text="total + ' record(s)'"></span>
+            <span class="flex-1"></span>
             <button type="button" x-h-button data-variant="transparent" @click="load()" aria-label="Refresh">
-                <svg x-h-lucide role="img" data-lucide="refresh-cw" class="size-4"></svg>
+                <svg x-h-lucide role="presentation" data-lucide="refresh-cw" class="size-4"></svg>
             </button>
             <button type="button" x-h-button data-variant="primary" @click="startCreate()">
-                <svg x-h-lucide role="img" data-lucide="plus" class="size-4"></svg> New
+                <svg x-h-lucide role="presentation" data-lucide="plus" class="size-4"></svg> New
             </button>
         </div>
 
@@ -52,31 +55,33 @@
         </div>
 
         <!-- Every column, raw. Row click opens the editor. -->
-        <div class="grow overflow-auto p-3" x-show="!editing">
+        <div class="flex-1 overflow-auto p-3" x-show="!editing">
+            <div x-h-table-container>
             <table x-h-table>
-                <thead>
-                    <tr>
+                <thead x-h-table-header>
+                    <tr x-h-table-row>
                         <template x-for="p in (selected ? selected.properties : [])" :key="p.name">
                             <th x-h-table-head scope="col"><span x-text="p.name"></span></th>
                         </template>
                         <th x-h-table-head scope="col"></th>
                     </tr>
                 </thead>
-                <tbody>
+                <tbody x-h-table-body>
                     <template x-for="row in rows" :key="rowKey(row)">
                         <tr x-h-table-row data-hoverable="true" @click="startEdit(row)">
                             <template x-for="p in selected.properties" :key="p.name">
                                 <td x-h-table-cell><span class="admin-cell inline-block" x-text="display(p, row[p.name])"></span></td>
                             </template>
-                            <td x-h-table-cell class="text-end" @click.stop>
+                            <td x-h-table-cell class="text-right" @click.stop>
                                 <button type="button" x-h-button data-variant="transparent" aria-label="Delete" @click="remove(row)">
-                                    <svg x-h-lucide role="img" data-lucide="trash-2" class="size-4"></svg>
+                                    <svg x-h-lucide role="presentation" data-lucide="trash-2" class="size-4"></svg>
                                 </button>
                             </td>
                         </tr>
                     </template>
                 </tbody>
             </table>
+            </div>
             <div class="hbox items-center gap-2 pt-3" x-show="total > limit">
                 <button type="button" x-h-button data-variant="outline" :disabled="offset === 0" @click="page(-1)">Previous</button>
                 <span class="text-sm" x-text="(offset + 1) + ' - ' + Math.min(offset + limit, total) + ' of ' + total"></span>
@@ -85,20 +90,20 @@
         </div>
 
         <!-- The flat record editor: every column an input; read-only/system columns visible but disabled. -->
-        <div class="grow overflow-auto p-4" x-show="editing">
+        <div class="flex-1 overflow-auto p-4" x-show="editing">
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" style="max-width: 60rem;">
                 <template x-for="p in (selected ? selected.properties : [])" :key="p.name">
                     <div x-h-field x-show="!(isNew && p.pk)">
                         <label x-h-label :for="'a_' + p.name">
                             <span x-text="p.name"></span>
                             <span class="text-negative" x-show="p.required && !p.readonly">*</span>
-                            <span class="opacity-60 text-xs" x-show="p.fk" x-text="'-> ' + p.fk"></span>
+                            <span class="opacity-50 text-xs" x-show="p.fk" x-text="'-> ' + p.fk"></span>
                         </label>
                         <template x-if="p.lookup">
-                            <div x-h-select data-filter="contains">
+                            <div x-h-select>
                                 <input x-h-select-input :id="'a_' + p.name" x-model="draft[p.name]" :disabled="p.readonly" :placeholder="'Select ' + p.name + '...'" />
                                 <div x-h-select-content>
-                                    <div x-h-select-search></div>
+                                    <div x-h-select-search data-filter="contains"></div>
                                     <div x-h-select-list>
                                         <template x-for="opt in (options[p.name] || [])" :key="opt.value">
                                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-calendar-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-calendar-view.html.template
index 588d074633e..7fd09af5133 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-calendar-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-calendar-view.html.template
@@ -11,11 +11,11 @@
     <!-- The calendar is an ADDITIONAL browse page and owns /my/${name}; the personal list lives at
          /my/${name}/list and carries the mirror switch back here. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goList()">
-      <i role="img" x-h-lucide data-lucide="table"></i>
+      <svg role="presentation" x-h-lucide data-lucide="table"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.list', 'List')"></span>
     </button>
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
   </div>
@@ -24,7 +24,7 @@
   <div x-show="state === 'error'" class="p-4" x-h-text.muted x-text="error"></div>
 
   <!-- Calendar (own events only - served by the scoped MyController) -->
-  <div x-show="state === 'default'" class="bk-stretch" style="flex: 1; min-height: 0; padding: 0.5rem;">
+  <div x-show="state === 'default'" style="flex: 1; min-height: 0; padding: 0.5rem;">
     <div x-h-calendar="calCfg" style="height: 100%; min-height: 560px;"
          @event-click="onEventClick" @date-click="onDateClick"></div>
   </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-view.html.template
index d7039ae2fd7..7b439fa4dd0 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-view.html.template
@@ -47,7 +47,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-12 gap-4" style="max-width: 900px">
 #foreach($property in $properties)
 #if(!$property.dataAutoIncrement && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE") && $property.name != "Name" && $property.name != "$!{personalProperty}" && $property.isReadOnlyProperty != "true" && $property.widgetType != "DOCUMENT_STATUS" && !($property.widgetType == "DOCUMENT_NUMBER" && $property.numberSeries) && $property.aggregate != "true")
-      <div x-h-field class="#if($property.widgetType == "MULTISELECT")col-span-full#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
+      <div x-h-field class="#if($property.widgetType =="MULTISELECT")col-span-12#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
 ## A CHECKBOX carries its label BESIDE it, inside the branch below - not above, as every
 ## other control does.
 #if($property.widgetType != "CHECKBOX")
@@ -56,10 +56,10 @@
         </label>
 #end
 #if($property.widgetType == "DROPDOWN")
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -70,10 +70,10 @@
 #elseif($property.widgetType == "MULTISELECT")
         <!-- Subset (intent `kind: subset`): the bound ARRAY model puts the select in
              multiple mode - the csv is split on load and joined back on save. -->
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -136,45 +136,53 @@
 
 #if($documentItemsLayout == "chat")
     <!-- Conversation thread (chat items) - the personal document renders the SAME chat the power
-         document does (bubbles + composer through the personal items controller), never the generic
-         line-items table. Own vs other alignment keys on the audit CreatedBy vs the logged-in user;
-         an internal memo is tinted distinctly. Composed from shipped Harmonia primitives (inline
-         styles + theme vars - see the power document view for why); the x-h-chat component family
-         will own this styling once it ships. -->
+         document does (x-h-bubble messages + an input-group composer through the personal items
+         controller), never the generic line-items table. Own vs other alignment keys on the audit
+         CreatedBy vs the logged-in user (own = right, primary; other = left, outline); an internal memo
+         is a warning bubble with an Internal badge, so it can't be mistaken for a shared reply. -->
     <div class="vbox gap-2" style="max-width: 900px" x-show="itemsEnabled">
       <div x-h-toolbar data-variant="transparent" data-size="sm">
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
       </div>
       <div x-show="itemsError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemsError"></div></div>
-      <div class="vbox gap-3 w-full rounded-control border border-input bg-input-inner p-4" style="max-height: 28rem; overflow-y: auto" role="log" aria-live="polite">
+      <!-- The thread is a live region so a new message is announced; it caps its height and scrolls on
+           its own (no max-h utility of this size exists). -->
+      <div class="vbox gap-2 w-full" style="max-height: 28rem; overflow-y: auto" role="log" aria-live="polite">
         <template x-for="(row, idx) in items" :key="row[itemsDef.primaryKey] != null ? row[itemsDef.primaryKey] : idx">
-          <div class="vbox gap-1" style="max-width: 85%"
-               :style="row.CreatedBy === $store.currentUser.name ? 'align-self:flex-end;align-items:flex-end' : 'align-self:flex-start;align-items:flex-start'">
-            <div class="hbox items-baseline gap-2">
-              <span class="text-foreground text-xs font-medium" x-text="row.CreatedBy || T('$projectName:${tprefix}.defaults.system', 'System')"></span>
-              <span class="text-muted-foreground text-xs" x-text="window.HarmoniaFormat.value(row.CreatedAt, true)"></span>
+          <div x-h-bubble style="max-width: 85%"
+               :data-align="row.CreatedBy === $store.currentUser.name ? 'right' : 'left'"
+               :data-variant="#if($chatInternalProperty)row.${chatInternalProperty} ? 'warning' : (#end(row.CreatedBy === $store.currentUser.name ? 'primary' : 'outline')#if($chatInternalProperty))#end">
+            <div x-h-bubble-header>
+              <span x-text="row.CreatedBy || T('$projectName:${tprefix}.defaults.system', 'System')"></span>
+              <!-- A <time> in the bubble header is de-emphasised by the component on every variant. -->
+              <time x-text="window.HarmoniaFormat.value(row.CreatedAt, true)"></time>
 #if($chatInternalProperty)
-              <span x-show="row.${chatInternalProperty}" x-h-badge data-variant="warning" x-text="T('$projectName:${tprefix}.defaults.internal', 'Internal')"></span>
+              <!-- outline, not warning: the memo's bubble is already the warning colour. -->
+              <span x-show="row.${chatInternalProperty}" x-h-badge data-variant="outline" x-text="T('$projectName:${tprefix}.defaults.internal', 'Internal')"></span>
 #end
             </div>
-            <div class="text-sm" style="border-radius: 0.5rem; padding: 0.5rem 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere"
-                 :style="#if($chatInternalProperty)row.${chatInternalProperty} ? 'background:var(--muted);color:var(--foreground)' : (#end(row.CreatedBy === $store.currentUser.name ? 'background:var(--primary);color:var(--primary-foreground)' : 'background:var(--secondary);color:var(--secondary-foreground)')#if($chatInternalProperty))#end"
-                 x-text="row.${chatBodyProperty}"></div>
+            <div x-h-bubble-content class="whitespace-pre-wrap wrap-anywhere" x-text="row.${chatBodyProperty}"></div>
           </div>
         </template>
         <div x-show="items.length === 0" x-h-text.muted class="p-2" x-text="T('$projectName:${tprefix}.messages.noData', 'No messages yet.')"></div>
       </div>
 #if(!$personalReadOnly)
-      <div class="vbox gap-2"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end>
+      <!-- Composer: Enter sends (the hint says so); the send button also submits. -->
+      <div#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end>
+        <div x-h-input-group>
+          <textarea x-h-textarea.group rows="2" x-model="chatDraft" @keydown.enter.prevent="sendMessage(chatDraft)" :disabled="chatSending" :aria-label="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message')" :placeholder="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message...')"></textarea>
+          <div x-h-input-group-addon data-align="block-end" class="border-t">
 #if($chatInternalProperty)
-        <label class="hbox items-center gap-2 text-sm">
-          <span x-h-switch data-size="sm"><input type="checkbox" x-model="chatInternal" /></span>
-          <span x-text="T('$projectName:${tprefix}.defaults.internalNote', 'Internal note (not visible to the requester)')"></span>
-        </label>
+            <label class="hbox items-center gap-2 text-sm">
+              <span x-h-switch data-size="sm"><input type="checkbox" x-model="chatInternal" /></span>
+              <span x-text="T('$projectName:${tprefix}.defaults.internalNote', 'Internal note (not visible to the requester)')"></span>
+            </label>
 #end
-        <div class="hbox items-end gap-2 w-full">
-          <textarea x-h-textarea rows="1" class="grow" x-model="chatDraft" @keydown.enter.prevent="sendMessage(chatDraft)" :disabled="chatSending" :aria-label="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message')" :placeholder="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message...')"></textarea>
-          <button type="button" x-h-button data-variant="primary" @click="sendMessage(chatDraft)" :disabled="chatSending || !chatDraft.trim()" :aria-label="T('$projectName:${tprefix}.defaults.send', 'Send')"><i role="img" x-h-lucide data-lucide="send"></i></button>
+            <span x-h-input-group-text class="ml-auto hidden text-xs md:flex" x-text="T('$projectName:${tprefix}.defaults.enterToSend', 'Enter to send')"></span>
+            <button type="button" x-h-button.addon data-size="icon-sm" data-variant="primary" class="rounded-full" @click="sendMessage(chatDraft)" :disabled="chatSending || !chatDraft.trim()" :aria-label="T('$projectName:${tprefix}.defaults.send', 'Send')">
+              <svg x-h-lucide role="presentation" data-lucide="arrow-up"></svg>
+            </button>
+          </div>
         </div>
       </div>
 #end
@@ -189,13 +197,13 @@
         <div x-h-toolbar-spacer></div>
 #if(!$personalReadOnly)
         <button x-h-button data-variant="primary" data-size="sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="openItem(null)">
-          <i role="img" x-h-lucide data-lucide="plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
         </button>
         <!-- Fill Month: one dialog fill -> a line per working day. Offered only when the line item
              carries an editable plain DATE column (the fill target). -->
         <button x-h-button data-variant="outline" data-size="sm" x-show="#if($immutableStatusProperty || $immutableAlways || $periodLock)mutable && #{end}fillDateColumn()" @click="openFillMonth()">
-          <i role="img" x-h-lucide data-lucide="calendar-plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="calendar-plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span>
         </button>
 #end
@@ -211,13 +219,13 @@
         <div x-h-toolbar-spacer></div>
 #if(!$personalReadOnly)
         <button x-h-button data-variant="primary" data-size="sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="openItem(null)">
-          <i role="img" x-h-lucide data-lucide="plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
         </button>
         <!-- Fill Month: one dialog fill -> a line per working day. Offered only when the line item
              carries an editable plain DATE column (the fill target). -->
         <button x-h-button data-variant="outline" data-size="sm" x-show="#if($immutableStatusProperty || $immutableAlways || $periodLock)mutable && #{end}fillDateColumn()" @click="openFillMonth()">
-          <i role="img" x-h-lucide data-lucide="calendar-plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="calendar-plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span>
         </button>
 #end
@@ -243,12 +251,12 @@
                 </template>
 #if(!$personalReadOnly)
                 <td x-h-table-cell class="text-right">
-                  <button x-h-button data-variant="transparent" data-size="icon-sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end aria-label="Delete" @click.stop="deleteItem(row)"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                  <button x-h-button data-variant="transparent" data-size="icon-sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end aria-label="Delete" @click.stop="deleteItem(row)"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
                 </td>
 #end
               </tr>
             </template>
-            <tr x-show="items.length === 0">
+            <tr x-h-table-row x-show="items.length === 0">
               <td x-h-table-cell :colspan="tableColumns().length#if(!$personalReadOnly) + 1#end" class="text-center" x-text="T('$projectName:${tprefix}.messages.noData', 'No line items yet.')"></td>
             </tr>
           </tbody>
@@ -300,10 +308,10 @@
           <div x-h-card>
             <div x-h-card-header class="hbox items-center">
               <span x-h-card-title x-text="child.label"></span>
-              <div class="grow"></div>
+              <div class="flex-1"></div>
 #if(!$personalReadOnly)
               <button x-h-button data-variant="primary" data-size="sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="addChild(child)">
-                <i role="img" x-h-lucide data-lucide="plus"></i>
+                <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
                 <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
               </button>
 #end
@@ -347,13 +355,13 @@
 
     <div class="hbox gap-2" style="max-width: 900px">
 #if($personalReadOnly)
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()"
               x-text="T('$projectName:${tprefix}.defaults.back', 'Back')"></button>
 #else
       <button x-h-button data-variant="negative" x-show="mode === 'edit'#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="deleteOpen = true"
               x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete')"></button>
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()" :disabled="saving"
               x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button x-h-button data-variant="primary"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="save()" :disabled="saving">
@@ -369,7 +377,7 @@
     <div x-h-dialog style="width: 92vw; max-width: 640px;">
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="(itemMode === 'fill' ? T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month') + ' - ' : '') + (itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}')"></h2>
-        <button type="button" x-h-dialog-close @click="itemDialog = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="itemDialog = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <div x-show="itemError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemError"></div></div>
@@ -385,10 +393,10 @@
                    rejection to the server. -->
               <label x-h-label><span x-text="T(col.tkey, col.label)"></span><span x-show="col.required &amp;&amp; !col.readonly" class="text-negative"> *</span></label>
               <template x-if="!col.readonly && col.lookup">
-                <div x-h-select data-filter="contains">
+                <div x-h-select>
                   <input x-h-select-input x-model="draft[col.name]" :aria-invalid="itemFieldError === col.name" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select {{name}}...', { name: T(col.tkey, col.label) })" />
                   <div x-h-select-content>
-                    <div x-h-select-search></div>
+                    <div x-h-select-search data-filter="contains"></div>
                     <div x-h-select-list>
                       <template x-for="opt in (itemOptions[col.name] || [])" :key="opt.value">
                         <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -441,10 +449,10 @@
 
   <!-- Delete confirmation (nested inside the overlay so it hides when closed). -->
   <div x-h-dialog-overlay :data-open="deleteOpen">
-    <div x-h-dialog data-size="sm">
+    <div x-h-dialog>
       <div x-h-dialog-header>
         <span x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + '?'"></span>
-        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content><p x-h-text.muted x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure? This cannot be undone.')"></p></div>
       <div x-h-dialog-footer>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-form-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-form-view.html.template
index 43e92422eaf..a62f62235db 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-form-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-form-view.html.template
@@ -49,7 +49,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-12 gap-4" style="max-width: 900px">
 #foreach($property in $properties)
 #if(!$property.dataAutoIncrement && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE") && $property.name != "Name" && $property.name != $skipOwnerFk && $property.name != $skipParentFk && $property.isReadOnlyProperty != "true" && $property.widgetType != "DOCUMENT_STATUS")
-      <div x-h-field class="#if($property.widgetType == "MULTISELECT")col-span-full#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
+      <div x-h-field class="#if($property.widgetType =="MULTISELECT")col-span-12#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
 ## A CHECKBOX carries its label BESIDE it, inside the branch below - not above, as every
 ## other control does.
 #if($property.widgetType != "CHECKBOX")
@@ -58,10 +58,10 @@
         </label>
 #end
 #if($property.widgetType == "DROPDOWN")
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -72,10 +72,10 @@
 #elseif($property.widgetType == "MULTISELECT")
         <!-- Subset (intent `kind: subset`): the bound ARRAY model puts the select in
              multiple mode - the csv is split on load and joined back on save. -->
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -150,7 +150,7 @@
       <div x-h-card-content class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
 #foreach($property in $properties)
 #if($property.isReadOnlyProperty == "true" && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE"))
-        <div class="vbox gap-0" x-show="form.${property.name} != null &amp;&amp; form.${property.name} !== ''">
+        <div class="vbox" x-show="form.${property.name} != null &amp;&amp; form.${property.name} !== ''">
           <span class="text-xs text-muted-foreground" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end')"></span>
           <span class="text-sm" x-text="form.${property.name}"></span>
         </div>
@@ -168,10 +168,10 @@
           <div x-h-card>
             <div x-h-card-header class="hbox items-center">
               <span x-h-card-title x-text="child.label"></span>
-              <div class="grow"></div>
+              <div class="flex-1"></div>
 #if(!$personalReadOnly)
               <button x-h-button data-variant="primary" data-size="sm" @click="addChild(child)">
-                <i role="img" x-h-lucide data-lucide="plus"></i>
+                <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
                 <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
               </button>
 #end
@@ -215,13 +215,13 @@
 
     <div class="hbox gap-2" style="max-width: 900px">
 #if($personalReadOnly)
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()"
               x-text="T('$projectName:${tprefix}.defaults.back', 'Back')"></button>
 #else
       <button x-h-button data-variant="negative" x-show="mode === 'edit'#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="deleteOpen = true"
               x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete')"></button>
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()" :disabled="saving"
               x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button x-h-button data-variant="primary"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="save()" :disabled="saving">
@@ -235,10 +235,10 @@
   <!-- Delete confirmation. The dialog MUST be nested inside the overlay (not a sibling) or it is
        not hidden when closed - it would show its "Delete?" body on the New page. -->
   <div x-h-dialog-overlay :data-open="deleteOpen">
-    <div x-h-dialog data-size="sm">
+    <div x-h-dialog>
       <div x-h-dialog-header>
         <span x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + '?'"></span>
-        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content><p x-h-text.muted x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure? This cannot be undone.')"></p></div>
       <div x-h-dialog-footer>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-list-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-list-view.html.template
index be997c80915..8af4e85d49f 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-list-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-list-view.html.template
@@ -11,22 +11,22 @@
     <!-- The entity also renders on a personal calendar, which owns /my/${name}; this list lives at
          /my/${name}/list. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goCalendar()">
-      <i role="img" x-h-lucide data-lucide="calendar"></i>
+      <svg role="presentation" x-h-lucide data-lucide="calendar"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span>
     </button>
 #end
 #if(!$personalReadOnly)
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
 #end
     <!-- Export the own rows as CSV / print them (Save as PDF via the browser dialog). -->
     <button x-h-button data-variant="outline" data-size="sm" :disabled="items.length === 0" @click="exportCsv()">
-      <i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
     </button>
     <button x-h-button data-variant="outline" data-size="sm" :disabled="items.length === 0" @click="printList()">
-      <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
     </button>
   </div>
 
@@ -35,7 +35,7 @@
   <div x-show="state === 'empty'" class="p-4" x-h-text.muted
        x-text="T('$projectName:${tprefix}.messages.noData', 'No records yet.')"></div>
 
-  <div x-show="state === 'default'" x-h-table-container.scroll class="bk-stretch">
+  <div x-show="state === 'default'" x-h-table-container.scroll>
     <table x-h-table data-borders="rows">
       <thead x-h-table-header>
         <tr x-h-table-row>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-document-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-document-view.html.template
index 586786d29af..02bccdb80aa 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-document-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-document-view.html.template
@@ -47,7 +47,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-12 gap-4" style="max-width: 900px">
 #foreach($property in $properties)
 #if(!$property.dataAutoIncrement && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE") && $property.name != "Name" && $property.name != "$!{partnerProperty}" && $property.isReadOnlyProperty != "true" && $property.widgetType != "DOCUMENT_STATUS" && !($property.widgetType == "DOCUMENT_NUMBER" && $property.numberSeries) && $property.aggregate != "true")
-      <div x-h-field class="#if($property.widgetType == "MULTISELECT")col-span-full#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
+      <div x-h-field class="#if($property.widgetType =="MULTISELECT")col-span-12#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
 ## A CHECKBOX carries its label BESIDE it, inside the branch below - not above, as every
 ## other control does.
 #if($property.widgetType != "CHECKBOX")
@@ -56,10 +56,10 @@
         </label>
 #end
 #if($property.widgetType == "DROPDOWN")
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -70,10 +70,10 @@
 #elseif($property.widgetType == "MULTISELECT")
         <!-- Subset (intent `kind: subset`): the bound ARRAY model puts the select in
              multiple mode - the csv is split on load and joined back on save. -->
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -143,7 +143,7 @@
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
         <div x-h-toolbar-spacer></div>
         <button x-h-button data-variant="primary" data-size="sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="openItem(null)">
-          <i role="img" x-h-lucide data-lucide="plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
         </button>
       </div>
@@ -157,7 +157,7 @@
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
         <div x-h-toolbar-spacer></div>
         <button x-h-button data-variant="primary" data-size="sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="openItem(null)">
-          <i role="img" x-h-lucide data-lucide="plus"></i>
+          <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
           <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
         </button>
       </div>
@@ -179,11 +179,11 @@
                   <td x-h-table-cell :class="col.number ? 'text-right' : ''" x-text="displayItem(row, col)"></td>
                 </template>
                 <td x-h-table-cell class="text-right">
-                  <button x-h-button data-variant="transparent" data-size="icon-sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end aria-label="Delete" @click.stop="deleteItem(row)"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                  <button x-h-button data-variant="transparent" data-size="icon-sm"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end aria-label="Delete" @click.stop="deleteItem(row)"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
                 </td>
               </tr>
             </template>
-            <tr x-show="items.length === 0">
+            <tr x-h-table-row x-show="items.length === 0">
               <td x-h-table-cell :colspan="tableColumns().length + 1" class="text-center" x-text="T('$projectName:${tprefix}.messages.noData', 'No line items yet.')"></td>
             </tr>
           </tbody>
@@ -217,7 +217,7 @@
     <div class="hbox gap-2" style="max-width: 900px">
       <button x-h-button data-variant="negative" x-show="mode === 'edit'#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="deleteOpen = true"
               x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete')"></button>
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()" :disabled="saving"
               x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button x-h-button data-variant="primary"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="save()" :disabled="saving">
@@ -232,7 +232,7 @@
     <div x-h-dialog style="width: 92vw; max-width: 640px;">
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></h2>
-        <button type="button" x-h-dialog-close @click="itemDialog = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="itemDialog = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <div x-show="itemError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemError"></div></div>
@@ -247,10 +247,10 @@
                    rejection to the server. -->
               <label x-h-label><span x-text="T(col.tkey, col.label)"></span><span x-show="col.required &amp;&amp; !col.readonly" class="text-negative"> *</span></label>
               <template x-if="!col.readonly && col.lookup">
-                <div x-h-select data-filter="contains">
+                <div x-h-select>
                   <input x-h-select-input x-model="draft[col.name]" :aria-invalid="itemFieldError === col.name" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select {{name}}...', { name: T(col.tkey, col.label) })" />
                   <div x-h-select-content>
-                    <div x-h-select-search></div>
+                    <div x-h-select-search data-filter="contains"></div>
                     <div x-h-select-list>
                       <template x-for="opt in (itemOptions[col.name] || [])" :key="opt.value">
                         <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -295,10 +295,10 @@
 
   <!-- Delete confirmation (nested inside the overlay so it hides when closed). -->
   <div x-h-dialog-overlay :data-open="deleteOpen">
-    <div x-h-dialog data-size="sm">
+    <div x-h-dialog>
       <div x-h-dialog-header>
         <span x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + '?'"></span>
-        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content><p x-h-text.muted x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure? This cannot be undone.')"></p></div>
       <div x-h-dialog-footer>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-form-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-form-view.html.template
index d46285361e9..ae49895ec11 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-form-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-form-view.html.template
@@ -49,7 +49,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-12 gap-4" style="max-width: 900px">
 #foreach($property in $properties)
 #if(!$property.dataAutoIncrement && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE") && $property.name != "Name" && $property.name != $skipOwnerFk && $property.name != $skipParentFk && $property.isReadOnlyProperty != "true" && $property.widgetType != "DOCUMENT_STATUS")
-      <div x-h-field class="#if($property.widgetType == "MULTISELECT")col-span-full#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
+      <div x-h-field class="#if($property.widgetType =="MULTISELECT")col-span-12#elseif($property.widgetSize && $property.widgetSize != "")sm:col-span-${property.widgetSize}#{else}sm:col-span-6#end"#visibleGate($property) :data-invalid="fieldError === '${property.name}'">
 ## A CHECKBOX carries its label BESIDE it, inside the branch below - not above, as every
 ## other control does.
 #if($property.widgetType != "CHECKBOX")
@@ -58,10 +58,10 @@
         </label>
 #end
 #if($property.widgetType == "DROPDOWN")
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -72,10 +72,10 @@
 #elseif($property.widgetType == "MULTISELECT")
         <!-- Subset (intent `kind: subset`): the bound ARRAY model puts the select in
              multiple mode - the csv is split on load and joined back on save. -->
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input x-model="form.${property.name}" :aria-invalid="fieldError === '${property.name}'" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select #if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in (options['${property.name}'] || [])" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -150,7 +150,7 @@
       <div x-h-card-content class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
 #foreach($property in $properties)
 #if($property.isReadOnlyProperty == "true" && !$property.sensitiveProperty && $property.name != "ProcessId" && !$property.isHiddenProperty && (!$property.auditType || $property.auditType == "NONE"))
-        <div class="vbox gap-0" x-show="form.${property.name} != null &amp;&amp; form.${property.name} !== ''">
+        <div class="vbox" x-show="form.${property.name} != null &amp;&amp; form.${property.name} !== ''">
           <span class="text-xs text-muted-foreground" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '#if($property.widgetLabel)${property.widgetLabelJs}#else${property.name}#end')"></span>
           <span class="text-sm" x-text="form.${property.name}"></span>
         </div>
@@ -168,9 +168,9 @@
           <div x-h-card>
             <div x-h-card-header class="hbox items-center">
               <span x-h-card-title x-text="child.label"></span>
-              <div class="grow"></div>
+              <div class="flex-1"></div>
               <button x-h-button data-variant="primary" data-size="sm" @click="addChild(child)">
-                <i role="img" x-h-lucide data-lucide="plus"></i>
+                <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
                 <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
               </button>
             </div>
@@ -214,7 +214,7 @@
     <div class="hbox gap-2" style="max-width: 900px">
       <button x-h-button data-variant="negative" x-show="mode === 'edit'#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="deleteOpen = true"
               x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete')"></button>
-      <div class="grow"></div>
+      <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" @click="goBack()" :disabled="saving"
               x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button x-h-button data-variant="primary"#if($immutableStatusProperty || $immutableAlways || $periodLock) x-show="mutable"#end @click="save()" :disabled="saving">
@@ -227,10 +227,10 @@
   <!-- Delete confirmation. The dialog MUST be nested inside the overlay (not a sibling) or it is
        not hidden when closed - it would show its "Delete?" body on the New page. -->
   <div x-h-dialog-overlay :data-open="deleteOpen">
-    <div x-h-dialog data-size="sm">
+    <div x-h-dialog>
       <div x-h-dialog-header>
         <span x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + '?'"></span>
-        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content><p x-h-text.muted x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure? This cannot be undone.')"></p></div>
       <div x-h-dialog-footer>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-list-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-list-view.html.template
index b4b029243b5..75da8cdaf64 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-list-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/partner/partner-list-view.html.template
@@ -8,15 +8,15 @@
     <span x-h-toolbar-title class="shrink-0" x-text="'My ' + T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')"></span>
     <div x-h-toolbar-spacer></div>
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
     <!-- Export the own rows as CSV / print them (Save as PDF via the browser dialog). -->
     <button x-h-button data-variant="outline" data-size="sm" :disabled="items.length === 0" @click="exportCsv()">
-      <i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
     </button>
     <button x-h-button data-variant="outline" data-size="sm" :disabled="items.length === 0" @click="printList()">
-      <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
     </button>
   </div>
 
@@ -25,7 +25,7 @@
   <div x-show="state === 'empty'" class="p-4" x-h-text.muted
        x-text="T('$projectName:${tprefix}.messages.noData', 'No records yet.')"></div>
 
-  <div x-show="state === 'default'" x-h-table-container.scroll class="bk-stretch">
+  <div x-show="state === 'default'" x-h-table-container.scroll>
     <table x-h-table data-borders="rows">
       <thead x-h-table-header>
         <tr x-h-table-row>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/calendar/calendar-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/calendar/calendar-view.html.template
index 2388c0eae56..c4e223d1aba 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/calendar/calendar-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/calendar/calendar-view.html.template
@@ -20,11 +20,11 @@
     <!-- The calendar is an ADDITIONAL browse page: this switches to the entity's own layout (its list /
          master / document list) at /${name}/list, which carries the mirror switch back here. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goList()">
-      <i role="img" x-h-lucide data-lucide="table"></i>
+      <svg role="presentation" x-h-lucide data-lucide="table"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.list', 'List')"></span>
     </button>
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
   </div>
@@ -42,7 +42,7 @@
   </div>
 
   <!-- Calendar -->
-  <div x-show="state === 'default'" class="bk-stretch" style="flex: 1; min-height: 0; padding: 0.5rem;">
+  <div x-show="state === 'default'" style="flex: 1; min-height: 0; padding: 0.5rem;">
     <div x-h-calendar="calCfg" style="height: 100%; min-height: 560px;"
          @event-click="onEventClick" @date-click="onDateClick"></div>
   </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
index 668215f154d..8e9486a3625 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
@@ -50,7 +50,7 @@
          button here the URL is knowledge the user has to type. Edit/preview only - a record that is
          not saved yet has no id to filter by. -->
 #foreach($scopedCalendar in $scopedCalendars)
-    <button type="button" x-h-button data-variant="outline" data-size="sm" class="shrink-0" x-show="isEdit || isPreview" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', id)"><i role="img" x-h-lucide data-lucide="calendar-days"></i><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
+    <button type="button" x-h-button data-variant="outline" data-size="sm" class="shrink-0" x-show="isEdit || isPreview" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', id)"><svg role="presentation" x-h-lucide data-lucide="calendar-days"></svg><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
 #end
 #end
     <button type="button" x-h-button data-variant="transparent" @click="backToList()" x-text="T('$projectName:${tprefix}.defaults.backToList', 'Back to list')"></button>
@@ -70,7 +70,7 @@
 
   <div x-show="state !== 'loading' && state !== 'load-failure'" class="hbox gap-6 py-6 px-8 w-full items-start">
     <!-- Main content column -->
-    <div class="vbox gap-6 grow min-w-0" style="max-width: 56rem;">
+    <div class="vbox gap-6 flex-1 min-w-0" style="max-width: 56rem;">
 
     <!-- ===== Header form (the aggregate totals are excluded here — shown in the footer) ===== -->
     <form @submit.prevent="save()" class="vbox gap-4 w-full">
@@ -102,7 +102,7 @@
 #if($property.widgetSize)#set($span = $property.widgetSize)#else#set($span = "6")#end
 #if($property.widgetType == "TEXTAREA" || $property.widgetType == "CHECKBOX" || $property.widgetType == "MULTISELECT")#set($span = "12")#end
 #if($lookup)#set($span = "12")#end
-      <div x-h-field#if($span == "12") class="col-span-full"#else class="sm:col-span-${span}"#end#visibleGate($property) :data-invalid="!!errors.${property.name}">
+      <div x-h-field#if($span == "12") class="col-span-12"#else class="sm:col-span-${span}"#end#visibleGate($property) :data-invalid="!!errors.${property.name}">
 #if($property.widgetType == "CHECKBOX")
         <div class="hbox items-center gap-3">
           <span x-h-checkbox><input type="checkbox" id="f_${property.name}" x-model="form.${property.name}"#if($readonly) disabled#end /></span>
@@ -115,10 +115,10 @@
         <!-- Non-setting association: combobox + Add new (opens the target's own create page in an iframe
              dialog) + Refresh, all on one full-width row. -->
         <div class="hbox gap-1 items-center">
-          <div x-h-select data-filter="contains" class="grow">
+          <div x-h-select class="flex-1">
             <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}" :aria-invalid="!!errors.${property.name}" :disabled="isPreview" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
             <div x-h-select-content>
-              <div x-h-select-search></div>
+              <div x-h-select-search data-filter="contains"></div>
               <div x-h-select-list>
                 <template x-for="opt in options${property.name}" :key="opt.value">
                   <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -126,14 +126,14 @@
               </div>
             </div>
           </div>
-          <button type="button" x-h-button data-variant="outline" class="shrink-0" x-show="!isPreview" @click="addRelated('${property.name}', '${property.widgetDropdownControllerUrl}', '${property.relationshipEntityName}')"><i x-h-lucide data-lucide="plus" class="size-4"></i> New ${property.relationshipEntityName}</button>
-          <button type="button" x-h-button data-variant="transparent" class="shrink-0" x-show="!isPreview" aria-label="Refresh" @click="loadOptions()"><i x-h-lucide data-lucide="refresh-cw" class="size-4"></i></button>
+          <button type="button" x-h-button data-variant="outline" class="shrink-0" x-show="!isPreview" @click="addRelated('${property.name}', '${property.widgetDropdownControllerUrl}', '${property.relationshipEntityName}')"><svg role="presentation" x-h-lucide data-lucide="plus" class="size-4"></svg> New ${property.relationshipEntityName}</button>
+          <button type="button" x-h-button data-variant="transparent" class="shrink-0" x-show="!isPreview" aria-label="Refresh" @click="loadOptions()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw" class="size-4"></svg></button>
         </div>
 #else
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}" :aria-invalid="!!errors.${property.name}"#if($readonly) disabled#else :disabled="isPreview"#end :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in options${property.name}" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -148,10 +148,10 @@
              load, joined on save); Refresh reloads the options - deliberately no "New" button, the
              add-dialog return path writes a single value. -->
         <div class="hbox gap-1 items-center">
-          <div x-h-select data-filter="contains" class="grow">
+          <div x-h-select class="flex-1">
             <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}" :aria-invalid="!!errors.${property.name}" :disabled="isPreview" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
             <div x-h-select-content>
-              <div x-h-select-search></div>
+              <div x-h-select-search data-filter="contains"></div>
               <div x-h-select-list>
                 <template x-for="opt in options${property.name}" :key="opt.value">
                   <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -214,56 +214,54 @@
     </form>
 
 #if($documentItemsLayout == "chat")
-    <!-- ===== Conversation thread (chat items) — bubbles + composer, only once the document exists.
-         Own vs other alignment keys on the audit CreatedBy vs the logged-in user; an internal memo is
-         tinted distinctly (bg-muted + an Internal badge) so it can't be mistaken for a reply shared
-         with the requester.
-         TODO(harmonia): once @codbex/harmonia ships the x-h-chat component family (x-h-chat /
-         x-h-chat-message[-author|-timestamp|-body] / x-h-chat-composer), replace this hand-rolled
-         thread + composer with those directives. This version is composed from primitives already in
-         the shipped Harmonia webjar so it works before that component lands. -->
+    <!-- ===== Conversation thread (chat items) - x-h-bubble messages + an input-group composer, only
+         once the document exists. Own vs other alignment keys on the audit CreatedBy vs the logged-in
+         user (own = right, primary; other = left, outline); an internal memo is a warning bubble with
+         an Internal badge, so it can't be mistaken for a reply shared with the requester. ===== -->
     <div class="vbox gap-2 w-full" x-show="itemsEnabled">
       <div x-h-toolbar data-variant="transparent">
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
       </div>
       <div x-show="itemsError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemsError"></div></div>
 
-      <!-- Load-bearing visuals (alignment, bubble colours, wrapping, scroll) use inline styles +
-           semantic CSS vars rather than utility classes: the shipped Harmonia webjar's prebuilt CSS
-           only contains classes its own source scanned, so a utility not in that bundle would silently
-           no-op. Inline styles + theme vars (var(--primary) etc., defined in the webjar's globals.css)
-           are robust. The x-h-chat swap-in (TODO above) will own this styling as a real component. -->
-      <div class="vbox gap-3 w-full rounded-control border border-input bg-input-inner p-4" style="max-height: 28rem; overflow-y: auto" role="log" aria-live="polite">
+      <!-- The thread is a live region so a new message is announced; it caps its height and scrolls on
+           its own (no max-h utility of this size exists). -->
+      <div class="vbox gap-2 w-full" style="max-height: 28rem; overflow-y: auto" role="log" aria-live="polite">
         <template x-for="(row, idx) in items" :key="row[itemsDef.primaryKey] != null ? row[itemsDef.primaryKey] : idx">
-          <div class="vbox gap-1" style="max-width: 85%"
-               :style="row.CreatedBy === $store.currentUser.name ? 'align-self:flex-end;align-items:flex-end' : 'align-self:flex-start;align-items:flex-start'">
-            <div class="hbox items-baseline gap-2">
-              <span class="text-foreground text-xs font-medium" x-text="row.CreatedBy || T('$projectName:${tprefix}.defaults.system', 'System')"></span>
-              <span class="text-muted-foreground text-xs" x-text="window.HarmoniaFormat.value(row.CreatedAt, true)"></span>
+          <div x-h-bubble style="max-width: 85%"
+               :data-align="row.CreatedBy === $store.currentUser.name ? 'right' : 'left'"
+               :data-variant="#if($chatInternalProperty)row.${chatInternalProperty} ? 'warning' : (#end(row.CreatedBy === $store.currentUser.name ? 'primary' : 'outline')#if($chatInternalProperty))#end">
+            <div x-h-bubble-header>
+              <span x-text="row.CreatedBy || T('$projectName:${tprefix}.defaults.system', 'System')"></span>
+              <!-- A <time> in the bubble header is de-emphasised by the component on every variant. -->
+              <time x-text="window.HarmoniaFormat.value(row.CreatedAt, true)"></time>
 #if($chatInternalProperty)
-              <span x-show="row.${chatInternalProperty}" x-h-badge data-variant="warning" x-text="T('$projectName:${tprefix}.defaults.internal', 'Internal')"></span>
+              <!-- outline, not warning: the memo's bubble is already the warning colour. -->
+              <span x-show="row.${chatInternalProperty}" x-h-badge data-variant="outline" x-text="T('$projectName:${tprefix}.defaults.internal', 'Internal')"></span>
 #end
             </div>
-            <div class="text-sm" style="border-radius: 0.5rem; padding: 0.5rem 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere"
-                 :style="#if($chatInternalProperty)row.${chatInternalProperty} ? 'background:var(--muted);color:var(--foreground)' : (#end(row.CreatedBy === $store.currentUser.name ? 'background:var(--primary);color:var(--primary-foreground)' : 'background:var(--secondary);color:var(--secondary-foreground)')#if($chatInternalProperty))#end"
-                 x-text="row.${chatBodyProperty}"></div>
+            <div x-h-bubble-content class="whitespace-pre-wrap wrap-anywhere" x-text="row.${chatBodyProperty}"></div>
           </div>
         </template>
         <div x-show="items.length === 0" x-h-text.muted class="p-2" x-text="T('$projectName:${tprefix}.messages.noData', 'No messages yet.')"></div>
       </div>
 
-      <!-- Composer: Enter sends; the send button also submits. (x-h-chat-composer will add Shift+Enter
-           newline handling once it ships.) -->
-      <div class="vbox gap-2" x-show="!isPreview">
+      <!-- Composer: Enter sends (the hint says so); the send button also submits. Hidden in preview. -->
+      <div x-show="!isPreview">
+        <div x-h-input-group>
+          <textarea x-h-textarea.group rows="2" x-model="chatDraft" @keydown.enter.prevent="sendMessage(chatDraft)" :disabled="chatSending" :aria-label="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message')" :placeholder="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message...')"></textarea>
+          <div x-h-input-group-addon data-align="block-end" class="border-t">
 #if($chatInternalProperty)
-        <label class="hbox items-center gap-2 text-sm">
-          <span x-h-switch data-size="sm"><input type="checkbox" x-model="chatInternal" /></span>
-          <span x-text="T('$projectName:${tprefix}.defaults.internalNote', 'Internal note (not visible to the requester)')"></span>
-        </label>
+            <label class="hbox items-center gap-2 text-sm">
+              <span x-h-switch data-size="sm"><input type="checkbox" x-model="chatInternal" /></span>
+              <span x-text="T('$projectName:${tprefix}.defaults.internalNote', 'Internal note (not visible to the requester)')"></span>
+            </label>
 #end
-        <div class="hbox items-end gap-2 w-full">
-          <textarea x-h-textarea rows="1" class="grow" x-model="chatDraft" @keydown.enter.prevent="sendMessage(chatDraft)" :disabled="chatSending" :aria-label="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message')" :placeholder="T('$projectName:${tprefix}.defaults.writeMessage', 'Write a message...')"></textarea>
-          <button type="button" x-h-button data-variant="primary" @click="sendMessage(chatDraft)" :disabled="chatSending || !chatDraft.trim()" :aria-label="T('$projectName:${tprefix}.defaults.send', 'Send')"><i role="img" x-h-lucide data-lucide="send"></i></button>
+            <span x-h-input-group-text class="ml-auto hidden text-xs md:flex" x-text="T('$projectName:${tprefix}.defaults.enterToSend', 'Enter to send')"></span>
+            <button type="button" x-h-button.addon data-size="icon-sm" data-variant="primary" class="rounded-full" @click="sendMessage(chatDraft)" :disabled="chatSending || !chatDraft.trim()" :aria-label="T('$projectName:${tprefix}.defaults.send', 'Send')">
+              <svg x-h-lucide role="presentation" data-lucide="arrow-up"></svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -276,10 +274,10 @@
       <div x-h-toolbar data-variant="transparent">
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
         <div x-h-toolbar-spacer></div>
-        <button type="button" x-h-button data-variant="primary" data-size="sm" x-show="!isPreview" @click="openRowDialog(null)"><i role="img" x-h-lucide data-lucide="plus"></i><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
+        <button type="button" x-h-button data-variant="primary" data-size="sm" x-show="!isPreview" @click="openRowDialog(null)"><svg role="presentation" x-h-lucide data-lucide="plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
         <!-- Fill Month: one dialog fill -> a line per working day. Offered only when the line item
              carries an editable plain DATE column (the fill target). -->
-        <button type="button" x-h-button data-variant="outline" data-size="sm" x-show="!isPreview && fillDateColumn()" @click="openFillDialog()"><i role="img" x-h-lucide data-lucide="calendar-plus"></i><span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span></button>
+        <button type="button" x-h-button data-variant="outline" data-size="sm" x-show="!isPreview && fillDateColumn()" @click="openFillDialog()"><svg role="presentation" x-h-lucide data-lucide="calendar-plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span></button>
       </div>
       <div x-show="itemsError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemsError"></div></div>
       <div x-h-calendar="itemsCalCfg" style="height: 420px" @event-click="onItemsEventClick" @date-click="onItemsDateClick"></div>
@@ -290,10 +288,10 @@
       <div x-h-toolbar data-variant="transparent">
         <span x-h-toolbar-title class="shrink-0" x-text="itemsDef ? T(itemsDef.tkey, '${documentItemsLabel}') : '${documentItemsLabel}'"></span>
         <div x-h-toolbar-spacer></div>
-        <button type="button" x-h-button data-variant="primary" data-size="sm" x-show="!isPreview" @click="openRowDialog(null)"><i role="img" x-h-lucide data-lucide="plus"></i><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
+        <button type="button" x-h-button data-variant="primary" data-size="sm" x-show="!isPreview" @click="openRowDialog(null)"><svg role="presentation" x-h-lucide data-lucide="plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
         <!-- Fill Month: one dialog fill -> a line per working day. Offered only when the line item
              carries an editable plain DATE column (the fill target). -->
-        <button type="button" x-h-button data-variant="outline" data-size="sm" x-show="!isPreview && fillDateColumn()" @click="openFillDialog()"><i role="img" x-h-lucide data-lucide="calendar-plus"></i><span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span></button>
+        <button type="button" x-h-button data-variant="outline" data-size="sm" x-show="!isPreview && fillDateColumn()" @click="openFillDialog()"><svg role="presentation" x-h-lucide data-lucide="calendar-plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month')"></span></button>
       </div>
       <div x-show="itemsError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="itemsError"></div></div>
 
@@ -325,7 +323,7 @@
               </template>
               <td x-h-table-cell data-row-actions x-show="!isPreview" @click.stop>
                 <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions">
-                  <i role="img" x-h-lucide data-lucide="ellipsis"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="ellipsis"></svg>
                 </button>
                 <ul x-h-menu data-align="bottom-end">
                   <li x-h-menu-item @click="openRowDialog(row)" x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></li>
@@ -335,7 +333,7 @@
               </td>
             </tr>
           </template>
-          <tr x-show="items.length === 0">
+          <tr x-h-table-row x-show="items.length === 0">
             <td x-h-table-cell :colspan="tableColumns.length + (isPreview ? 0 : 1)" class="text-center" x-text="T('$projectName:${tprefix}.messages.noData', 'No line items yet.')"></td>
           </tr>
         </tbody>
@@ -370,7 +368,7 @@
         <div x-h-card-header>
           <h3 x-h-card-title x-text="T(d.tkey, d.label)"></h3>
           <div x-h-card-action x-show="masterId && (!isPreview || def.locksWithMaster === false) && !def.files">
-            <button x-h-button data-variant="primary" data-size="sm" @click="addRow()"><i role="img" x-h-lucide data-lucide="plus"></i><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
+            <button x-h-button data-variant="primary" data-size="sm" @click="addRow()"><svg role="presentation" x-h-lucide data-lucide="plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
           </div>
         </div>
         <div x-h-card-content>
@@ -397,7 +395,7 @@
                   <input type="file" multiple class="hidden" x-ref="fileInput" @change="onFilePick(${dollar}event)" :disabled="uploading" />
                   <button type="button" x-h-button data-variant="outline" data-size="sm" :disabled="uploading" @click="${dollar}refs.fileInput.click()">
                     <span x-show="uploading" x-h-spinner></span>
-                    <i x-show="!uploading" role="img" x-h-lucide data-lucide="upload"></i>
+                    <svg x-show="!uploading" role="presentation" x-h-lucide data-lucide="upload"></svg>
                     <span x-text="uploading ? T('$projectName:${tprefix}.defaults.uploading', 'Uploading…') : T('$projectName:${tprefix}.defaults.upload', 'Upload')"></span>
                   </button>
                 </div>
@@ -405,7 +403,7 @@
               <template x-if="rows.length === 0">
                 <div x-h-info-page>
                   <div x-h-info-page-header>
-                    <div x-h-info-page-media.icon><i role="img" x-h-lucide data-lucide="paperclip"></i></div>
+                    <div x-h-info-page-media.icon><svg role="presentation" x-h-lucide data-lucide="paperclip"></svg></div>
                     <div x-h-info-page-title x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopies', 'No copies yet') : T('$projectName:${tprefix}.messages.noFiles', 'No attachments')"></div>
                     <div x-h-info-page-description x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopiesHint', 'A copy is stored automatically when the document is issued.') : T('$projectName:${tprefix}.messages.noFilesHint', 'Upload files to attach them to this document.')"></div>
                   </div>
@@ -415,17 +413,17 @@
                 <div class="vbox gap-2">
                   <template x-for="row in rows" :key="row[def.primaryKey]">
                     <div x-h-card class="hbox items-center gap-3 p-3">
-                      <i role="img" x-h-lucide data-lucide="file-text" class="shrink-0"></i>
-                      <div class="vbox gap-0 grow min-w-0">
+                      <svg role="presentation" x-h-lucide data-lucide="file-text" class="shrink-0"></svg>
+                      <div class="vbox flex-1 min-w-0">
                         <span class="text-sm truncate" x-text="row.FileName"></span>
                         <span class="text-xs text-muted-foreground" x-text="fileSizeText(row)"></span>
                       </div>
                       <template x-if="filesReadOnly">
-                        <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><i role="img" x-h-lucide data-lucide="printer"></i></a>
+                        <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><svg role="presentation" x-h-lucide data-lucide="printer"></svg></a>
                       </template>
-                      <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><i role="img" x-h-lucide data-lucide="download"></i></a>
+                      <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><svg role="presentation" x-h-lucide data-lucide="download"></svg></a>
                       <template x-if="!isPreview &amp;&amp; !filesReadOnly">
-                        <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="askDelete(row)" aria-label="Remove"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                        <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="askDelete(row)" aria-label="Remove"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
                       </template>
                     </div>
                   </template>
@@ -456,7 +454,7 @@
                       </td>
                     </template>
                     <td x-h-table-cell data-row-actions x-show="!isPreview || def.locksWithMaster === false">
-                      <button x-h-button data-variant="transparent" data-size="sm" aria-label="Delete" @click="askDelete(row)"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                      <button x-h-button data-variant="transparent" data-size="sm" aria-label="Delete" @click="askDelete(row)"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
                     </td>
                   </tr>
                 </template>
@@ -471,7 +469,7 @@
           <div x-h-dialog>
             <div x-h-dialog-header>
               <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + ' ' + T(def.tkey, def.label)"></h2>
-              <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+              <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
             </div>
             <div x-h-dialog-content><p x-text="T('$projectName:${tprefix}.messages.deleteItemsRecalc', 'Are you sure? This cannot be undone. The document totals will be recalculated.')"></p></div>
             <div x-h-dialog-footer>
@@ -518,7 +516,7 @@
                       </td>
                     </template>
                     <td x-h-table-cell data-row-actions>
-                      <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><i role="img" x-h-lucide data-lucide="external-link"></i></button>
+                      <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><svg role="presentation" x-h-lucide data-lucide="external-link"></svg></button>
                     </td>
                   </tr>
                 </template>
@@ -535,7 +533,7 @@
       <!-- Actionable BPM user-task buttons (edit only, hidden in read-only preview), left-aligned. -->
       <template x-for="task in $store.processTasks.getTasks(form)" :key="task.id">
         <button type="button" x-h-button data-variant="primary" x-show="!isPreview" @click="$store.processTasks.openTask(task)">
-          <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+          <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
         </button>
       </template>
 #end
@@ -545,12 +543,12 @@
            language when several exist. Stays available in preview (printing is read-only). -->
       <button type="button" x-h-button data-variant="outline" x-show="isEdit || isPreview" :disabled="printBusy" @click="openPrint()">
         <span x-show="printBusy" x-h-spinner></span>
-        <svg x-h-lucide role="img" data-lucide="printer" x-show="!printBusy"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+        <svg x-h-lucide role="presentation" data-lucide="printer" x-show="!printBusy"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
       </button>
 #if($duplicable)
       <!-- Built-in Duplicate action: clones this document (header + items) into a new draft and opens it. -->
       <button type="button" x-h-button data-variant="outline" x-show="isEdit || isPreview" :disabled="state === 'saving'" @click="duplicate()">
-        <i role="img" x-h-lucide data-lucide="copy"></i><span x-text="T('$projectName:${tprefix}.defaults.duplicate', 'Duplicate')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="copy"></svg><span x-text="T('$projectName:${tprefix}.defaults.duplicate', 'Duplicate')"></span>
       </button>
 #end
       <!-- Developer-contributed per-record actions for this document (customActions extension point).
@@ -566,12 +564,12 @@
       <!-- Preview footer: Close + Edit instead of Cancel + Save. -->
       <button type="button" x-h-button data-variant="transparent" x-show="isPreview" @click="backToList()" x-text="T('$projectName:${tprefix}.defaults.close', 'Close')"></button>
       <button type="button" x-h-button data-variant="primary" x-show="isPreview#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="goEdit()">
-        <i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span>
       </button>
       <button type="button" x-h-button data-variant="transparent" x-show="!isPreview" @click="backToList()" :disabled="state === 'saving'" x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button type="button" x-h-button data-variant="primary" x-show="!isPreview" :disabled="state === 'saving'" @click="save()">
         <span x-show="state === 'saving'" x-h-spinner></span>
-        <svg x-h-lucide role="img" data-lucide="save" x-show="state !== 'saving'"></svg><span x-text="isEdit ? T('$projectName:${tprefix}.defaults.update', 'Save') : T('$projectName:${tprefix}.defaults.create', 'Create')"></span>
+        <svg x-h-lucide role="presentation" data-lucide="save" x-show="state !== 'saving'"></svg><span x-text="isEdit ? T('$projectName:${tprefix}.defaults.update', 'Save') : T('$projectName:${tprefix}.defaults.create', 'Create')"></span>
       </button>
     </div>
     </div>
@@ -592,12 +590,12 @@
 #foreach($property in $properties)
 #if(($property.isReadOnlyProperty == "true" || ($property.auditType && $property.auditType != "NONE")) && !$property.isHiddenProperty)
 #if($property.widgetLabel)#set($rolabel = $property.widgetLabelJs)#else#set($rolabel = $property.name)#end
-            <div class="vbox gap-0" x-show="form.${property.name} !== null && form.${property.name} !== undefined && form.${property.name} !== ''">
+            <div class="vbox" x-show="form.${property.name} !== null && form.${property.name} !== undefined && form.${property.name} !== ''">
               <span class="text-xs text-muted-foreground" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${rolabel}')"></span>
 #if($property.widgetType == "DROPDOWN")
-              <span class="text-sm break-all" x-text="(options${property.name}.find(o => String(o.value) === String(form.${property.name})) || {}).text || form.${property.name}"></span>
+              <span class="text-sm wrap-anywhere" x-text="(options${property.name}.find(o => String(o.value) === String(form.${property.name})) || {}).text || form.${property.name}"></span>
 #else
-              <span class="text-sm break-all" x-text="form.${property.name}"></span>
+              <span class="text-sm wrap-anywhere" x-text="form.${property.name}"></span>
 #end
             </div>
 #end
@@ -638,12 +636,12 @@
         <div x-h-card-content>
           <div class="vbox gap-3">
             <template x-for="entry in history" :key="entry.GUID">
-              <div class="vbox gap-0">
+              <div class="vbox">
                 <div class="hbox items-center gap-2">
                   <span class="text-xs font-medium" x-text="historyLabel(entry.Property)"></span>
                   <span x-h-badge data-variant="outline" x-show="entry.Source === 'SYSTEM'" x-text="T('$projectName:${tprefix}.defaults.system', 'System')"></span>
                 </div>
-                <span class="text-sm break-all">
+                <span class="text-sm wrap-anywhere">
                   <span class="text-muted-foreground line-through" x-show="entry.OldValue" x-text="entry.OldValue"></span>
                   <span x-show="entry.OldValue"> &rarr; </span>
                   <span x-text="historyValue(entry.NewValue)"></span>
@@ -665,7 +663,7 @@
     <div x-h-dialog>
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="draftMode === 'edit' ? T('$projectName:${tprefix}.defaults.edit', 'Edit line') : (draftMode === 'fill' ? T('$projectName:${tprefix}.defaults.fillMonth', 'Fill Month') : T('$projectName:${tprefix}.defaults.add', 'Add line'))"></h2>
-        <button x-h-dialog-close @click="closeRowDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="closeRowDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <div x-show="draftError" x-h-alert data-variant="negative" role="alert"><div x-h-alert-description x-text="draftError"></div></div>
@@ -684,10 +682,10 @@
               <label x-h-label><span x-text="T(col.tkey, col.label)"></span><span x-show="col.required &amp;&amp; !col.readonly" class="text-negative"> *</span></label>
               <template x-if="!col.readonly && col.widget === 'DROPDOWN'">
                 <div>
-                  <div x-h-select data-filter="contains">
+                  <div x-h-select>
                     <input x-h-select-input x-model="draft[col.name]" :aria-invalid="draftFieldError === col.name" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select...', { name: '' })" />
                     <div x-h-select-content>
-                      <div x-h-select-search></div>
+                      <div x-h-select-search data-filter="contains"></div>
                       <div x-h-select-list>
                         <!-- dialogOptionsFor: the Depends-On-filtered set when active, else the full set. -->
                         <template x-for="opt in dialogOptionsFor(col.name)" :key="opt.value">
@@ -698,8 +696,8 @@
                   </div>
                   <!-- Non-setting association: Add new (opens the target's create page in a dialog) + Refresh. -->
                   <div class="hbox gap-1 mt-1" x-show="col.lookup && col.lookup.creatable && !col.readonly">
-                    <button type="button" x-h-button data-variant="outline" @click="addRelatedItem(col)"><i x-h-lucide data-lucide="plus" class="size-4"></i> <span x-text="T('$projectName:${tprefix}.defaults.newTitle', 'New {{name}}', { name: col.lookup && col.lookup.entity })"></span></button>
-                    <button type="button" x-h-button data-variant="transparent" aria-label="Refresh" @click="refreshItemOptions(col)"><i x-h-lucide data-lucide="refresh-cw" class="size-4"></i></button>
+                    <button type="button" x-h-button data-variant="outline" @click="addRelatedItem(col)"><svg role="presentation" x-h-lucide data-lucide="plus" class="size-4"></svg> <span x-text="T('$projectName:${tprefix}.defaults.newTitle', 'New {{name}}', { name: col.lookup && col.lookup.entity })"></span></button>
+                    <button type="button" x-h-button data-variant="transparent" aria-label="Refresh" @click="refreshItemOptions(col)"><svg role="presentation" x-h-lucide data-lucide="refresh-cw" class="size-4"></svg></button>
                   </div>
                 </div>
               </template>
@@ -707,10 +705,10 @@
                 <!-- Subset line column: multiple mode comes from the ARRAY draft value (openDraft
                      splits the stored csv; draftPayload joins it back). dialogOptionsFor honours a
                      static `where:` filter; a subset relation carries no Depends-On cascade. -->
-                <div x-h-select data-filter="contains">
+                <div x-h-select>
                   <input x-h-select-input x-model="draft[col.name]" :aria-invalid="draftFieldError === col.name" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select...', { name: '' })" />
                   <div x-h-select-content>
-                    <div x-h-select-search></div>
+                    <div x-h-select-search data-filter="contains"></div>
                     <div x-h-select-list>
                       <template x-for="opt in dialogOptionsFor(col.name)" :key="opt.value">
                         <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -781,7 +779,7 @@
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.deleteLine', 'Delete line')"></h2>
         <p x-h-dialog-description x-text="T('$projectName:${tprefix}.messages.deleteLineConfirm', 'Delete this line item? This cannot be undone.')"></p>
-        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-footer>
         <button x-h-button data-variant="transparent" @click="deleteOpen = false" x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
@@ -797,13 +795,13 @@
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></h2>
         <p x-h-dialog-description x-text="T('$projectName:${tprefix}.messages.printLanguage', 'Choose the template language.')"></p>
-        <button x-h-dialog-close @click="printLangOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="printLangOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <div class="vbox gap-2">
           <template x-for="lang in printLanguages" :key="lang.code">
             <button type="button" x-h-button data-variant="outline" @click="printLangOpen = false; printDoc(lang.code)">
-              <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="lang.name"></span>
+              <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="lang.name"></span>
             </button>
           </template>
         </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
index 326a4013399..65581ba8c6c 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
@@ -190,6 +190,20 @@ document.addEventListener('alpine:init', () => {
       this.refreshIcons();
     },
 
+    // The page numbers the pager shows: first, last and the current page's neighbours, '...' over
+    // each gap - at most 7 entries, so a long list never renders a link per page.
+    pageWindow() {
+      const total = this.totalPages, current = this.currentPage;
+      if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+      const start = Math.max(2, current - 1), end = Math.min(total - 1, current + 1);
+      const pages = [1];
+      if (start > 2) pages.push('...');
+      for (let p = start; p <= end; p++) pages.push(p);
+      if (end < total - 1) pages.push('...');
+      pages.push(total);
+      return pages;
+    },
+
     // ----- Export / print: the FULL filtered+sorted set (not the current page), cells resolved
     // exactly like the table (FK labels, formatted dates) via the shared basePage helpers.
     exportColumns: [
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
index da20506959d..cbb1ca041e2 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
@@ -24,23 +24,23 @@
     <!-- The entity also renders on a calendar (intent `view: calendar|range`), which owns /${name};
          this list lives at /${name}/list. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goCalendar()">
-      <i role="img" x-h-lucide data-lucide="calendar"></i><span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="calendar"></svg><span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span>
     </button>
 #end
 #if($slotsView)
     <!-- The entity also renders as a slot picker (intent `view: slots`), which owns /${name};
          this browse page lives at /${name}/list. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goSlots()">
-      <i role="img" x-h-lucide data-lucide="clock"></i>
+      <svg role="presentation" x-h-lucide data-lucide="clock"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.slots', 'Slots')"></span>
     </button>
 #end
     <!-- Export the filtered rows as CSV / print them (Save as PDF via the browser dialog). -->
     <button x-h-button data-variant="outline" data-size="sm" :disabled="filteredItems.length === 0" @click="exportCsv()">
-      <i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
     </button>
     <button x-h-button data-variant="outline" data-size="sm" :disabled="filteredItems.length === 0" @click="printList()">
-      <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
     </button>
     <!-- Developer-contributed page actions for this view (customActions extension point). -->
     <template x-for="action in $store.customActions.getActions(caView, 'page')" :key="action.id">
@@ -72,7 +72,7 @@
   <!-- Empty -->
   <div x-show="displayState === 'empty'" x-h-info-page class="p-4">
     <div x-h-info-page-header>
-      <div x-h-info-page-media.icon><i role="img" x-h-lucide data-lucide="inbox"></i></div>
+      <div x-h-info-page-media.icon><svg role="presentation" x-h-lucide data-lucide="inbox"></svg></div>
       <div x-h-info-page-title x-text="T('$projectName:${tprefix}.messages.noDataYet', 'No ${name} yet', { name: T('$projectName:${tprefix}.t.${dataName}', '${name}') })"></div>
       <div x-h-info-page-description x-text="T('$projectName:${tprefix}.messages.noData', 'There is nothing to show here.')"></div>
     </div>
@@ -81,7 +81,7 @@
   <!-- Data: master-detail — the table shows only the major columns; selecting a row reveals the
        record's full property list (and its actionable process tasks) in the right-hand pane. -->
   <div x-show="displayState === 'default' || displayState === 'no-results'"
-       x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+       x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master: the records table -->
     <div x-h-split-panel data-size="60%" data-min="320">
@@ -95,9 +95,9 @@
                 <th x-h-table-head scope="col" data-hoverable="true" data-activable="true"#if($property.isFloatType) class="text-right"#end#visibleGate($property) @click="cycleSort('${property.name}')">
                   <div class="hbox items-center justify-between">
                     <span x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${property.name}')"></span>
-                    <svg x-h-lucide role="img" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></svg>
-                    <svg x-h-lucide role="img" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></svg>
-                    <svg x-h-lucide role="img" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></svg>
                   </div>
                 </th>
 #end
@@ -134,11 +134,29 @@
           </table>
         </div>
 
-        <div class="hbox items-center gap-2 p-2" x-show="totalPages > 1">
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="currentPage <= 1" @click="goPage(currentPage - 1)"><i role="img" x-h-lucide data-lucide="chevron-left"></i><span x-text="T('$projectName:${tprefix}.defaults.previous', 'Prev')"></span></button>
-          <span x-h-text.muted x-text="T('$projectName:${tprefix}.defaults.pageOf', 'Page {{page}} / {{total}}', { page: currentPage, total: totalPages })"></span>
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="currentPage >= totalPages" @click="goPage(currentPage + 1)"><span x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span><i role="img" x-h-lucide data-lucide="chevron-right"></i></button>
-        </div>
+## Pager: first / last / the current page's neighbours with an ellipsis over each gap (pageWindow).
+        <nav x-h-pagination class="w-fit! p-2" x-show="totalPages > 1">
+          <ul x-h-pagination-content>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.previous href="#" :aria-label="T('$projectName:${tprefix}.defaults.previous', 'Previous')" :aria-disabled="currentPage <= 1" :tabindex="currentPage <= 1 ? -1 : 0" @click.prevent="if (currentPage > 1) goPage(currentPage - 1)">
+                <svg x-h-lucide role="presentation" data-lucide="chevron-left"></svg>
+                <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.previous', 'Previous')"></span>
+              </a>
+            </li>
+            <template x-for="(p, i) in pageWindow()" :key="i">
+              <li x-h-pagination-item>
+                <template x-if="p === '...'"><span x-h-pagination-ellipsis></span></template>
+                <template x-if="p !== '...'"><a x-h-pagination-link="currentPage === p" href="#" @click.prevent="goPage(p)" x-text="p"></a></template>
+              </li>
+            </template>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.next href="#" :aria-label="T('$projectName:${tprefix}.defaults.next', 'Next')" :aria-disabled="currentPage >= totalPages" :tabindex="currentPage >= totalPages ? -1 : 0" @click.prevent="if (currentPage < totalPages) goPage(currentPage + 1)">
+                <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span>
+                <svg x-h-lucide role="presentation" data-lucide="chevron-right"></svg>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
 
@@ -163,7 +181,7 @@
         <div x-show="$store.processTasks.getTasks(selected).length" class="hbox gap-2 flex-wrap px-4 pt-4 pb-2">
           <template x-for="task in $store.processTasks.getTasks(selected)" :key="task.id">
             <button x-h-button data-variant="primary" data-size="sm" @click="$store.processTasks.openTask(task)">
-              <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+              <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
             </button>
           </template>
         </div>
@@ -189,7 +207,7 @@
 #if(!$property.dataAutoIncrement && !$property.isHiddenProperty)
 #if($property.widgetLabel)#set($plabel = $property.widgetLabelJs)#else#set($plabel = $property.name)#end
 #if($property.isDateType)#set($isDate = "true")#else#set($isDate = "false")#end
-          <div class="vbox gap-0"#visibleGate($property)>
+          <div class="vbox"#visibleGate($property)>
             <span x-h-text.muted class="text-xs" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${plabel}')"></span>
 #if($property.widgetType == "DOCUMENT_STATUS")
             <span><span x-h-badge :data-variant="statusVariant(lookupText('${property.name}', selected?.${property.name}))" x-show="lookupText('${property.name}', selected?.${property.name})" x-text="lookupText('${property.name}', selected?.${property.name})"></span></span>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
index ab6c9abf21d..d251ef4ba5e 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
@@ -45,7 +45,7 @@
          button here the URL is knowledge the user has to type. Edit/preview only - a record that is
          not saved yet has no id to filter by. -->
 #foreach($scopedCalendar in $scopedCalendars)
-    <button type="button" x-h-button data-variant="outline" data-size="sm" class="shrink-0" x-show="isEdit || isPreview" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', id)"><i role="img" x-h-lucide data-lucide="calendar-days"></i><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
+    <button type="button" x-h-button data-variant="outline" data-size="sm" class="shrink-0" x-show="isEdit || isPreview" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', id)"><svg role="presentation" x-h-lucide data-lucide="calendar-days"></svg><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
 #end
 #end
     <button type="button" x-h-button data-variant="transparent" @click="navigateBack('/${name}')" x-text="T('$projectName:${tprefix}.defaults.backToList', 'Back to list')"></button>
@@ -74,7 +74,7 @@
   <div x-show="state !== 'loading' && state !== 'load-failure'"
         class="hbox gap-6 py-6 px-8 w-full items-start">
     <!-- Main content column -->
-    <div class="vbox gap-4 grow min-w-0" style="max-width: 42rem;">
+    <div class="vbox gap-4 flex-1 min-w-0" style="max-width: 42rem;">
 
     <!-- The header form holds the editable fields only. The Save button lives in the footer below
          (outside this form, beneath the detail panels) so the footer can sit at the very bottom; it
@@ -121,7 +121,7 @@
 #if($property.widgetType == "TEXTAREA" || $property.widgetType == "CHECKBOX" || $property.widgetType == "MULTISELECT")#set($span = "12")#end
 #if($lookup)#set($span = "12")#end
       <!-- ${property.name} (${property.widgetType}) -->
-      <div x-h-field#if($span == "12") class="col-span-full"#else class="sm:col-span-${span}"#end#visibleGate($property) :data-invalid="!!errors.${property.name}">
+      <div x-h-field#if($span == "12") class="col-span-12"#else class="sm:col-span-${span}"#end#visibleGate($property) :data-invalid="!!errors.${property.name}">
 #if($property.widgetType == "CHECKBOX")
         <div class="hbox items-center gap-3">
           <span x-h-checkbox>
@@ -153,10 +153,10 @@
         <template x-if="!isContextLocked('${property.name}')">
 #if($lookup)
         <div class="hbox gap-1 items-center">
-          <div x-h-select data-filter="contains" class="grow">
+          <div x-h-select class="flex-1">
             <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}" :aria-invalid="!!errors.${property.name}" :disabled="isPreview" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
             <div x-h-select-content>
-              <div x-h-select-search></div>
+              <div x-h-select-search data-filter="contains"></div>
               <div x-h-select-list>
                 <template x-for="opt in options${property.name}" :key="opt.value">
                   <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -164,16 +164,16 @@
               </div>
             </div>
           </div>
-          <button type="button" x-h-button data-variant="outline" class="shrink-0" x-show="!isPreview" @click="addRelated('${property.name}', '${property.widgetDropdownAppUrl}', '${property.relationshipEntityName}')"><i x-h-lucide data-lucide="plus" class="size-4"></i> <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>&nbsp;<span x-text="T('$projectName:${tprefix}.t.${property.relationshipEntityName}', '${property.relationshipEntityName}')"></span></button>
-          <button type="button" x-h-button data-variant="transparent" class="shrink-0" x-show="!isPreview" aria-label="Refresh" @click="loadOptions()"><i x-h-lucide data-lucide="refresh-cw" class="size-4"></i></button>
+          <button type="button" x-h-button data-variant="outline" class="shrink-0" x-show="!isPreview" @click="addRelated('${property.name}', '${property.widgetDropdownAppUrl}', '${property.relationshipEntityName}')"><svg role="presentation" x-h-lucide data-lucide="plus" class="size-4"></svg> <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>&nbsp;<span x-text="T('$projectName:${tprefix}.t.${property.relationshipEntityName}', '${property.relationshipEntityName}')"></span></button>
+          <button type="button" x-h-button data-variant="transparent" class="shrink-0" x-show="!isPreview" aria-label="Refresh" @click="loadOptions()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw" class="size-4"></svg></button>
         </div>
 #else
-        <div x-h-select data-filter="contains">
+        <div x-h-select>
           <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}"
                  :aria-invalid="!!errors.${property.name}"#if($readonly) disabled#else :disabled="isPreview"#end
                  :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
           <div x-h-select-content>
-            <div x-h-select-search></div>
+            <div x-h-select-search data-filter="contains"></div>
             <div x-h-select-list>
               <template x-for="opt in options${property.name}" :key="opt.value">
                 <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -191,10 +191,10 @@
              deliberately no "New" button - the add-dialog return path writes a single value, and a
              lookup this widget targets is curated, not grown mid-form. -->
         <div class="hbox gap-1 items-center">
-          <div x-h-select data-filter="contains" class="grow">
+          <div x-h-select class="flex-1">
             <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}" :aria-invalid="!!errors.${property.name}" :disabled="isPreview" :placeholder="T('$projectName:${tprefix}.messages.inputSelect', 'Select ${label}...', { name: T('$projectName:${tprefix}.t.${property.dataName}', '${label}') })" />
             <div x-h-select-content>
-              <div x-h-select-search></div>
+              <div x-h-select-search data-filter="contains"></div>
               <div x-h-select-list>
                 <template x-for="opt in options${property.name}" :key="opt.value">
                   <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -286,7 +286,7 @@
           <div x-h-card-header>
             <h3 x-h-card-title x-text="d.label"></h3>
             <div x-h-card-action x-show="(!isPreview || def.locksWithMaster === false) && !def.files">
-              <button type="button" x-h-button data-variant="primary" data-size="sm" @click="addRow()"><i role="img" x-h-lucide data-lucide="plus"></i><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
+              <button type="button" x-h-button data-variant="primary" data-size="sm" @click="addRow()"><svg role="presentation" x-h-lucide data-lucide="plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span></button>
             </div>
           </div>
           <div x-h-card-content>
@@ -313,7 +313,7 @@
                     <input type="file" multiple class="hidden" x-ref="fileInput" @change="onFilePick(${dollar}event)" :disabled="uploading" />
                     <button type="button" x-h-button data-variant="outline" data-size="sm" :disabled="uploading" @click="${dollar}refs.fileInput.click()">
                       <span x-show="uploading" x-h-spinner></span>
-                      <i x-show="!uploading" role="img" x-h-lucide data-lucide="upload"></i>
+                      <svg x-show="!uploading" role="presentation" x-h-lucide data-lucide="upload"></svg>
                       <span x-text="uploading ? T('$projectName:${tprefix}.defaults.uploading', 'Uploading…') : T('$projectName:${tprefix}.defaults.upload', 'Upload')"></span>
                     </button>
                   </div>
@@ -321,7 +321,7 @@
                 <template x-if="rows.length === 0">
                   <div x-h-info-page>
                     <div x-h-info-page-header>
-                      <div x-h-info-page-media.icon><i role="img" x-h-lucide data-lucide="paperclip"></i></div>
+                      <div x-h-info-page-media.icon><svg role="presentation" x-h-lucide data-lucide="paperclip"></svg></div>
                       <div x-h-info-page-title x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopies', 'No copies yet') : T('$projectName:${tprefix}.messages.noFiles', 'No attachments')"></div>
                       <div x-h-info-page-description x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopiesHint', 'A copy is stored automatically when the document is issued.') : T('$projectName:${tprefix}.messages.noFilesHint', 'Upload files to attach them to this record.')"></div>
                     </div>
@@ -331,17 +331,17 @@
                   <div class="vbox gap-2">
                     <template x-for="row in rows" :key="row[def.primaryKey]">
                       <div x-h-card class="hbox items-center gap-3 p-3">
-                        <i role="img" x-h-lucide data-lucide="file-text" class="shrink-0"></i>
-                        <div class="vbox gap-0 grow min-w-0">
+                        <svg role="presentation" x-h-lucide data-lucide="file-text" class="shrink-0"></svg>
+                        <div class="vbox flex-1 min-w-0">
                           <span class="text-sm truncate" x-text="row.FileName"></span>
                           <span class="text-xs text-muted-foreground" x-text="fileSizeText(row)"></span>
                         </div>
                         <template x-if="filesReadOnly">
-                          <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><i role="img" x-h-lucide data-lucide="printer"></i></a>
+                          <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><svg role="presentation" x-h-lucide data-lucide="printer"></svg></a>
                         </template>
-                        <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><i role="img" x-h-lucide data-lucide="download"></i></a>
+                        <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><svg role="presentation" x-h-lucide data-lucide="download"></svg></a>
                         <template x-if="!isPreview &amp;&amp; !filesReadOnly">
-                          <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="askDelete(row)" aria-label="Remove"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+                          <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="askDelete(row)" aria-label="Remove"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
                         </template>
                       </div>
                     </template>
@@ -372,7 +372,7 @@
                         </td>
                       </template>
                       <td x-h-table-cell data-row-actions x-show="!isPreview || def.locksWithMaster === false">
-                        <button type="button" x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><i role="img" x-h-lucide data-lucide="ellipsis"></i></button>
+                        <button type="button" x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><svg role="presentation" x-h-lucide data-lucide="ellipsis"></svg></button>
                         <ul x-h-menu data-align="bottom-end">
                           <li x-h-menu-item @click="previewRow(row)" x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></li>
                           <li x-h-menu-item @click="editRow(row)" x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></li>
@@ -393,7 +393,7 @@
             <div x-h-dialog>
               <div x-h-dialog-header>
                 <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete') + ' ' + T(def.tkey, def.label)"></h2>
-                <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+                <button type="button" x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
               </div>
               <div x-h-dialog-content><p x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure you want to delete {{name}}? This action cannot be undone.', { name: T(def.tkey, def.label) })"></p></div>
               <div x-h-dialog-footer>
@@ -442,7 +442,7 @@
                         </td>
                       </template>
                       <td x-h-table-cell data-row-actions>
-                        <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><i role="img" x-h-lucide data-lucide="external-link"></i></button>
+                        <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><svg role="presentation" x-h-lucide data-lucide="external-link"></svg></button>
                       </td>
                     </tr>
                   </template>
@@ -462,7 +462,7 @@
       <!-- Actionable BPM user-task buttons (edit only, hidden in read-only preview), left-aligned. -->
       <template x-for="task in $store.processTasks.getTasks(form)" :key="task.id">
         <button type="button" x-h-button data-variant="primary" x-show="!isPreview" @click="$store.processTasks.openTask(task)">
-          <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+          <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
         </button>
       </template>
 #end
@@ -474,18 +474,18 @@
       <span class="text-sm text-secondary-foreground" x-show="printError" x-text="printError"></span>
       <button type="button" x-h-button data-variant="outline" x-show="(isEdit || isPreview) &amp;&amp; id" :disabled="printBusy" @click="openPrint()">
         <span x-show="printBusy" x-h-spinner></span>
-        <svg x-h-lucide role="img" data-lucide="printer" x-show="!printBusy"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+        <svg x-h-lucide role="presentation" data-lucide="printer" x-show="!printBusy"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
       </button>
 #end
       <!-- Preview footer: Close + Edit instead of Cancel + Save. -->
       <button type="button" x-h-button data-variant="transparent" x-show="isPreview" @click="cancel()" x-text="T('$projectName:${tprefix}.defaults.close', 'Close')"></button>
       <button type="button" x-h-button data-variant="primary" x-show="isPreview#if($immutableStatusProperty || $immutableAlways || $periodLock) &amp;&amp; mutable#end" @click="goEdit()">
-        <i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span>
       </button>
       <button type="button" x-h-button data-variant="transparent" x-show="!isPreview" @click="cancel()" :disabled="state === 'saving'" x-text="T('$projectName:${tprefix}.defaults.cancel', 'Cancel')"></button>
       <button type="button" x-h-button data-variant="primary" x-show="!isPreview" :disabled="state === 'saving'" @click="save()">
         <span x-show="state === 'saving'" x-h-spinner></span>
-        <svg x-h-lucide role="img" data-lucide="save" x-show="state !== 'saving'"></svg><span x-text="isEdit ? T('$projectName:${tprefix}.defaults.update', 'Save') : T('$projectName:${tprefix}.defaults.create', 'Create')"></span>
+        <svg x-h-lucide role="presentation" data-lucide="save" x-show="state !== 'saving'"></svg><span x-text="isEdit ? T('$projectName:${tprefix}.defaults.update', 'Save') : T('$projectName:${tprefix}.defaults.create', 'Create')"></span>
       </button>
     </div>
     </div>
@@ -506,14 +506,14 @@
 #foreach($property in $properties)
 #if(($property.isReadOnlyProperty == "true" || ($property.auditType && $property.auditType != "NONE")) && !$property.isHiddenProperty)
 #if($property.widgetLabel)#set($rolabel = $property.widgetLabelJs)#else#set($rolabel = $property.name)#end
-            <div class="vbox gap-0" x-show="form.${property.name} !== null && form.${property.name} !== undefined && form.${property.name} !== ''">
+            <div class="vbox" x-show="form.${property.name} !== null && form.${property.name} !== undefined && form.${property.name} !== ''">
               <span class="text-xs text-muted-foreground" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${rolabel}')"></span>
 #if($property.widgetType == "DROPDOWN")
-              <span class="text-sm break-all" x-text="(options${property.name}.find(o => String(o.value) === String(form.${property.name})) || {}).text || form.${property.name}"></span>
+              <span class="text-sm wrap-anywhere" x-text="(options${property.name}.find(o => String(o.value) === String(form.${property.name})) || {}).text || form.${property.name}"></span>
 #elseif($property.widgetType == "MULTISELECT")
-              <span class="text-sm break-all" x-text="(Array.isArray(form.${property.name}) ? form.${property.name} : String(form.${property.name} || '').split(',')).filter(v => v !== '').map(v => (options${property.name}.find(o => String(o.value) === String(v).trim()) || {}).text || v).join(', ')"></span>
+              <span class="text-sm wrap-anywhere" x-text="(Array.isArray(form.${property.name}) ? form.${property.name} : String(form.${property.name} || '').split(',')).filter(v => v !== '').map(v => (options${property.name}.find(o => String(o.value) === String(v).trim()) || {}).text || v).join(', ')"></span>
 #else
-              <span class="text-sm break-all" x-text="form.${property.name}"></span>
+              <span class="text-sm wrap-anywhere" x-text="form.${property.name}"></span>
 #end
             </div>
 #end
@@ -530,12 +530,12 @@
         <div x-h-card-content>
           <div class="vbox gap-3">
             <template x-for="entry in history" :key="entry.GUID">
-              <div class="vbox gap-0">
+              <div class="vbox">
                 <div class="hbox items-center gap-2">
                   <span class="text-xs font-medium" x-text="historyLabel(entry.Property)"></span>
                   <span x-h-badge data-variant="outline" x-show="entry.Source === 'SYSTEM'" x-text="T('$projectName:${tprefix}.defaults.system', 'System')"></span>
                 </div>
-                <span class="text-sm break-all">
+                <span class="text-sm wrap-anywhere">
                   <span class="text-muted-foreground line-through" x-show="entry.OldValue" x-text="entry.OldValue"></span>
                   <span x-show="entry.OldValue"> &rarr; </span>
                   <span x-text="historyValue(entry.NewValue)"></span>
@@ -559,13 +559,13 @@
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></h2>
         <p x-h-dialog-description x-text="T('$projectName:${tprefix}.messages.printLanguage', 'Choose the template language.')"></p>
-        <button x-h-dialog-close @click="printLangOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="printLangOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <div class="vbox gap-2">
           <template x-for="lang in printLanguages" :key="lang.code">
             <button type="button" x-h-button data-variant="outline" @click="printLangOpen = false; printDoc(lang.code)">
-              <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="lang.name"></span>
+              <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="lang.name"></span>
             </button>
           </template>
         </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
index 0869843fbad..e524954fbb0 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
@@ -296,6 +296,19 @@ document.addEventListener('alpine:init', () => {
     isUnsorted(col)   { return this.sortColumn !== col; },
 
     goPage(n) { this.currentPage = Math.max(1, Math.min(n, this.totalPages)); this.refreshIcons(); },
+    // The page numbers the pager shows: first, last and the current page's neighbours, '...' over
+    // each gap - at most 7 entries, so a long list never renders a link per page.
+    pageWindow() {
+      const total = this.totalPages, current = this.currentPage;
+      if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+      const start = Math.max(2, current - 1), end = Math.min(total - 1, current + 1);
+      const pages = [1];
+      if (start > 2) pages.push('...');
+      for (let p = start; p <= end; p++) pages.push(p);
+      if (end < total - 1) pages.push('...');
+      pages.push(total);
+      return pages;
+    },
 
     // ----- Export / print: the FULL filtered+sorted set (not the current page), cells resolved
     // exactly like the table (FK labels, formatted dates) via the shared basePage helpers.
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
index ce0233c9a77..5e67240fcda 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
@@ -24,7 +24,7 @@
     <!-- The entity also renders on a calendar (intent `view: calendar|range`), which owns /${name};
          this browse page lives at /${name}/list. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goCalendar()">
-      <i role="img" x-h-lucide data-lucide="calendar"></i>
+      <svg role="presentation" x-h-lucide data-lucide="calendar"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span>
     </button>
 #end
@@ -32,20 +32,20 @@
     <!-- The entity also renders as a slot picker (intent `view: slots`), which owns /${name};
          this browse page lives at /${name}/list. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goSlots()">
-      <i role="img" x-h-lucide data-lucide="clock"></i>
+      <svg role="presentation" x-h-lucide data-lucide="clock"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.slots', 'Slots')"></span>
     </button>
 #end
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
     <!-- Export the filtered rows as CSV / print them (Save as PDF via the browser dialog). -->
     <button x-h-button data-variant="outline" data-size="sm" :disabled="sortedItems.length === 0" @click="exportCsv()">
-      <i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
     </button>
     <button x-h-button data-variant="outline" data-size="sm" :disabled="sortedItems.length === 0" @click="printList()">
-      <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
     </button>
     <!-- Developer-contributed page actions for this view (customActions extension point). -->
     <template x-for="action in $store.customActions.getActions(caView, 'page')" :key="action.id">
@@ -73,7 +73,7 @@
   <!-- Empty -->
   <div x-show="displayState === 'empty'" x-h-info-page class="p-4">
     <div x-h-info-page-header>
-      <div x-h-info-page-media.icon><i role="img" x-h-lucide data-lucide="inbox"></i></div>
+      <div x-h-info-page-media.icon><svg role="presentation" x-h-lucide data-lucide="inbox"></svg></div>
       <div x-h-info-page-title x-text="T('$projectName:${tprefix}.messages.noDataYet', 'No ${menuLabel} yet', { name: T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}') })"></div>
       <div x-h-info-page-description x-text="T('$projectName:${tprefix}.messages.getStarted', 'Get started by creating the first record.')"></div>
     </div>
@@ -85,7 +85,7 @@
   <!-- Data: master-detail — the table shows only the major columns; selecting a row reveals the
        record's full property list (and its actionable process tasks) in the right-hand pane. -->
   <div x-show="displayState === 'default' || displayState === 'no-results'"
-       x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+       x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master: the records table -->
     <div x-h-split-panel data-size="60%" data-min="320">
@@ -98,7 +98,7 @@
              tree of any depth from data; folding these six copies into one is a worthwhile
              follow-up, but it is a behaviour change and not part of the 2.9 API migration.) -->
         <div x-show="treeVisible" x-h-table-container.scroll class="flex-1" data-border="true">
-          <ul x-h-tree class="p-2">
+          <ul x-h-tree class="p-2" :aria-label="T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')">
               <template x-for="n1 in childrenOf(null)" :key="n1.${primaryKeysString}">
                 <li x-h-tree-item="true" :aria-selected="isSelected(n1)" @tree-item-click.self="selectRow(n1)">
                   <div x-h-tree-row>
@@ -184,9 +184,9 @@
                 <th x-h-table-head scope="col" data-hoverable="true" data-activable="true"#if($property.isNumberType && $property.widgetType != "DROPDOWN" && $property.widgetType != "DOCUMENT_STATUS") class="text-right"#end#visibleGate($property) @click="cycleSort('${property.name}')">
                   <div class="hbox items-center justify-between">
                     <span x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${property.name}')"></span>
-                    <svg x-h-lucide role="img" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></svg>
-                    <svg x-h-lucide role="img" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></svg>
-                    <svg x-h-lucide role="img" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></svg>
+                    <svg x-h-lucide role="presentation" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></svg>
                   </div>
                 </th>
 #end
@@ -201,7 +201,7 @@
                 <template x-for="col in filterColumns" :key="col.name">
                   <th x-h-table-head scope="col" :class="col.number ? 'text-right' : ''">
                     <select x-show="col.type === 'fk'" x-model="columnFilters[col.name]" @change="applyServerFilter()"
-                            class="w-full text-sm rounded-md border border-border bg-transparent px-2 py-1">
+                            class="w-full text-sm rounded-md border border-border px-2 py-1">
                       <option value="" x-text="T('$projectName:${tprefix}.defaults.all', 'All')"></option>
                       <template x-for="opt in optionsForFilter(col.name)" :key="opt.value">
                         <option :value="opt.value" x-text="opt.text"></option>
@@ -226,13 +226,13 @@
                            type="text"
                            @input.debounce.400ms="applyServerFilter()"
                            :placeholder="T('$projectName:${tprefix}.defaults.filter', 'Filter…')"
-                           class="w-full text-sm rounded-md border border-border bg-transparent px-2 py-1" />
+                           class="w-full text-sm rounded-md border border-border px-2 py-1" />
                   </th>
                 </template>
                 <th x-h-table-head scope="col" class="text-center">
-                  <button type="button" x-show="hasActiveColumnFilters" @click="clearColumnFilters()"
-                          :title="T('$projectName:${tprefix}.defaults.clearFilters', 'Clear filters')" class="text-muted-foreground hover:text-foreground">
-                    <i role="img" x-h-lucide data-lucide="filter-x" class="size-4"></i>
+                  <button type="button" x-h-button data-variant="transparent" data-size="icon-sm" x-show="hasActiveColumnFilters" @click="clearColumnFilters()"
+                          :title="T('$projectName:${tprefix}.defaults.clearFilters', 'Clear filters')" :aria-label="T('$projectName:${tprefix}.defaults.clearFilters', 'Clear filters')">
+                    <svg role="presentation" x-h-lucide data-lucide="funnel-x" class="size-4"></svg>
                   </button>
                 </th>
               </tr>
@@ -265,7 +265,7 @@
 #end
                   <td x-h-table-cell data-row-actions @click.stop>
                     <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions">
-                      <i role="img" x-h-lucide data-lucide="ellipsis"></i>
+                      <svg role="presentation" x-h-lucide data-lucide="ellipsis"></svg>
                     </button>
                     <ul x-h-menu data-align="bottom-end">
                       <li x-h-menu-item @click="previewEntity(row)" x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></li>
@@ -288,11 +288,30 @@
           </table>
         </div>
 
-        <div#if($hierarchyProperty) x-show="!treeVisible"#end class="hbox items-center gap-2 p-2" x-show="totalPages > 1">
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="currentPage <= 1" @click="goPage(currentPage - 1)"><i role="img" x-h-lucide data-lucide="chevron-left"></i><span x-text="T('$projectName:${tprefix}.defaults.previous', 'Prev')"></span></button>
-          <span x-h-text.muted x-text="T('$projectName:${tprefix}.defaults.pageOf', 'Page {{page}} / {{total}}', { page: currentPage, total: totalPages })"></span>
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="currentPage >= totalPages" @click="goPage(currentPage + 1)"><span x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span><i role="img" x-h-lucide data-lucide="chevron-right"></i></button>
-        </div>
+## Pager: first / last / the current page's neighbours with an ellipsis over each gap (pageWindow).
+## A hierarchical entity hides it while the (unpaged) tree is showing - one x-show, both conditions.
+        <nav x-h-pagination class="w-fit! p-2" x-show="#if($hierarchyProperty)!treeVisible && #{end}totalPages > 1">
+          <ul x-h-pagination-content>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.previous href="#" :aria-label="T('$projectName:${tprefix}.defaults.previous', 'Previous')" :aria-disabled="currentPage <= 1" :tabindex="currentPage <= 1 ? -1 : 0" @click.prevent="if (currentPage > 1) goPage(currentPage - 1)">
+                <svg x-h-lucide role="presentation" data-lucide="chevron-left"></svg>
+                <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.previous', 'Previous')"></span>
+              </a>
+            </li>
+            <template x-for="(p, i) in pageWindow()" :key="i">
+              <li x-h-pagination-item>
+                <template x-if="p === '...'"><span x-h-pagination-ellipsis></span></template>
+                <template x-if="p !== '...'"><a x-h-pagination-link="currentPage === p" href="#" @click.prevent="goPage(p)" x-text="p"></a></template>
+              </li>
+            </template>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.next href="#" :aria-label="T('$projectName:${tprefix}.defaults.next', 'Next')" :aria-disabled="currentPage >= totalPages" :tabindex="currentPage >= totalPages ? -1 : 0" @click.prevent="if (currentPage < totalPages) goPage(currentPage + 1)">
+                <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span>
+                <svg x-h-lucide role="presentation" data-lucide="chevron-right"></svg>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
 
@@ -316,17 +335,17 @@
                to the selected record. The filter is a query parameter on the calendar's own route,
                so without a button here the URL is knowledge the user has to type. -->
 #foreach($scopedCalendar in $scopedCalendars)
-          <button x-h-button data-variant="outline" data-size="sm" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', selectedId)"><i role="img" x-h-lucide data-lucide="calendar-days"></i><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', selectedId)"><svg role="presentation" x-h-lucide data-lucide="calendar-days"></svg><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
 #end
 #end
-          <button x-h-button data-variant="outline" data-size="sm" @click="previewEntity(selected)"><i role="img" x-h-lucide data-lucide="eye"></i><span x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></span></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="previewEntity(selected)"><svg role="presentation" x-h-lucide data-lucide="eye"></svg><span x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></span></button>
 #if($immutableStatusProperty || $immutableAlways)
           <!-- Edit/Delete are disabled for an immutable record (the controller would 409). -->
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="isRowImmutable(selected)" :title="isRowImmutable(selected) ? T('$projectName:${tprefix}.messages.immutable', 'This record is read-only in its current status - corrections go through the workflow.') : null" @click="editEntity(selected)"><i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
-          <button x-h-button data-variant="transparent" data-size="sm" :disabled="isRowImmutable(selected)" @click="askDelete(selected)" aria-label="Delete"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+          <button x-h-button data-variant="outline" data-size="sm" :disabled="isRowImmutable(selected)" :title="isRowImmutable(selected) ? T('$projectName:${tprefix}.messages.immutable', 'This record is read-only in its current status - corrections go through the workflow.') : null" @click="editEntity(selected)"><svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
+          <button x-h-button data-variant="transparent" data-size="sm" :disabled="isRowImmutable(selected)" @click="askDelete(selected)" aria-label="Delete"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
 #else
-          <button x-h-button data-variant="outline" data-size="sm" @click="editEntity(selected)"><i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
-          <button x-h-button data-variant="transparent" data-size="sm" @click="askDelete(selected)" aria-label="Delete"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="editEntity(selected)"><svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
+          <button x-h-button data-variant="transparent" data-size="sm" @click="askDelete(selected)" aria-label="Delete"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
 #end
         </div>
 
@@ -335,7 +354,7 @@
         <div x-show="$store.processTasks.getTasks(selected).length" class="hbox gap-2 flex-wrap px-4 pt-4 pb-2">
           <template x-for="task in $store.processTasks.getTasks(selected)" :key="task.id">
             <button x-h-button data-variant="primary" data-size="sm" @click="$store.processTasks.openTask(task)">
-              <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+              <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
             </button>
           </template>
         </div>
@@ -365,7 +384,7 @@
 #if(!$property.dataAutoIncrement && !$property.isHiddenProperty)
 #if($property.widgetLabel)#set($plabel = $property.widgetLabelJs)#else#set($plabel = $property.name)#end
 #if($property.isDateType)#set($isDate = "true")#else#set($isDate = "false")#end
-          <div class="vbox gap-0"#visibleGate($property)>
+          <div class="vbox"#visibleGate($property)>
             <span x-h-text.muted class="text-xs" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${plabel}')"></span>
 #if($property.widgetType == "DOCUMENT_STATUS")
             <span><span x-h-badge :data-variant="statusVariant(lookupText('${property.name}', selected?.${property.name}))" x-show="lookupText('${property.name}', selected?.${property.name})" x-text="lookupText('${property.name}', selected?.${property.name})"></span></span>
@@ -394,7 +413,7 @@
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.deleteTitle', 'Delete ${entityLabel}', { name: T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}') })"></h2>
         <p x-h-dialog-description></p>
-        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content>
         <p x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure you want to delete this record?', { name: T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}') })"></p>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-page.js.template
index da81147896d..c2d37c712b8 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-page.js.template
@@ -103,6 +103,19 @@ document.addEventListener('alpine:init', () => {
       return this.filteredMasters.slice(start, start + this.pageSize);
     },
     goPage(n) { this.page = Math.max(1, Math.min(n, this.pageCount)); this.refreshIcons(); },
+    // The page numbers the pager shows: first, last and the current page's neighbours, '...' over
+    // each gap - at most 7 entries, so a long list never renders a link per page.
+    pageWindow() {
+      const total = this.pageCount, current = this.page;
+      if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+      const start = Math.max(2, current - 1), end = Math.min(total - 1, current + 1);
+      const pages = [1];
+      if (start > 2) pages.push('...');
+      for (let p = start; p <= end; p++) pages.push(p);
+      if (end < total - 1) pages.push('...');
+      pages.push(total);
+      return pages;
+    },
 
     get filteredMasters() {
       if (!this.searchTerm) return this.masters;
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
index d10fe34e666..52139d5726b 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
@@ -21,20 +21,20 @@
 #if($calendarView)
     <!-- The entity also renders on a calendar (intent `view: calendar|range`), which owns /${name};
          this master page lives at /${name}/list. -->
-    <button x-h-button data-variant="outline" data-size="sm" @click="goCalendar()"><i role="img" x-h-lucide data-lucide="calendar"></i><span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="goCalendar()"><svg role="presentation" x-h-lucide data-lucide="calendar"></svg><span x-text="T('$projectName:${tprefix}.defaults.calendar', 'Calendar')"></span></button>
 #end
 #if($slotsView)
     <!-- The entity also renders as a slot picker (intent `view: slots`), which owns /${name};
          this master page lives at /${name}/list. -->
-    <button x-h-button data-variant="outline" data-size="sm" @click="goSlots()"><i role="img" x-h-lucide data-lucide="clock"></i><span x-text="T('$projectName:${tprefix}.defaults.slots', 'Slots')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="goSlots()"><svg role="presentation" x-h-lucide data-lucide="clock"></svg><span x-text="T('$projectName:${tprefix}.defaults.slots', 'Slots')"></span></button>
 #end
-    <button x-h-button data-variant="primary" @click="newMaster()"><i role="img" x-h-lucide data-lucide="plus"></i><span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span></button>
+    <button x-h-button data-variant="primary" @click="newMaster()"><svg role="presentation" x-h-lucide data-lucide="plus"></svg><span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span></button>
     <!-- Export the filtered rows as CSV / print them (Save as PDF via the browser dialog). -->
     <button x-h-button data-variant="outline" data-size="sm" :disabled="filteredMasters.length === 0" @click="exportCsv()">
-      <i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span>
     </button>
     <button x-h-button data-variant="outline" data-size="sm" :disabled="filteredMasters.length === 0" @click="printList()">
-      <i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
+      <svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span>
     </button>
     <!-- Developer-contributed page actions for this view (customActions extension point). -->
     <template x-for="action in $store.customActions.getActions(caView, 'page')" :key="action.id">
@@ -49,7 +49,7 @@
     <div x-h-alert-description x-text="error"></div>
   </div>
 
-  <div x-show="state === 'default' || state === 'empty'" x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+  <div x-show="state === 'default' || state === 'empty'" x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master list (fills the whole width until a record is selected) -->
     <div x-h-split-panel data-size="60%" data-min="280">
@@ -90,7 +90,7 @@
 #end
 #end
                 <td x-h-table-cell data-row-actions @click.stop>
-                  <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><i role="img" x-h-lucide data-lucide="ellipsis"></i></button>
+                  <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><svg role="presentation" x-h-lucide data-lucide="ellipsis"></svg></button>
                   <ul x-h-menu data-align="bottom-end">
                     <li x-h-menu-item @click="previewMaster(row)" x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></li>
 #if($immutableStatusProperty || $immutableAlways)
@@ -111,11 +111,29 @@
           </tbody>
         </table>
       </div>
-      <div class="hbox items-center gap-2 p-2" x-show="(state === 'default' || state === 'empty') && pageCount > 1">
-        <button x-h-button data-variant="outline" data-size="sm" :disabled="page <= 1" @click="goPage(page - 1)"><i role="img" x-h-lucide data-lucide="chevron-left"></i><span x-text="T('$projectName:${tprefix}.defaults.previous', 'Prev')"></span></button>
-        <span x-h-text.muted x-text="T('$projectName:${tprefix}.defaults.pageOf', 'Page {{page}} / {{total}}', { page: page, total: pageCount })"></span>
-        <button x-h-button data-variant="outline" data-size="sm" :disabled="page >= pageCount" @click="goPage(page + 1)"><span x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span><i role="img" x-h-lucide data-lucide="chevron-right"></i></button>
-      </div>
+## Pager: first / last / the current page's neighbours with an ellipsis over each gap (pageWindow).
+      <nav x-h-pagination class="w-fit! p-2" x-show="(state === 'default' || state === 'empty') && pageCount > 1">
+        <ul x-h-pagination-content>
+          <li x-h-pagination-item>
+            <a x-h-pagination-link.previous href="#" :aria-label="T('$projectName:${tprefix}.defaults.previous', 'Previous')" :aria-disabled="page <= 1" :tabindex="page <= 1 ? -1 : 0" @click.prevent="if (page > 1) goPage(page - 1)">
+              <svg x-h-lucide role="presentation" data-lucide="chevron-left"></svg>
+              <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.previous', 'Previous')"></span>
+            </a>
+          </li>
+          <template x-for="(p, i) in pageWindow()" :key="i">
+            <li x-h-pagination-item>
+              <template x-if="p === '...'"><span x-h-pagination-ellipsis></span></template>
+              <template x-if="p !== '...'"><a x-h-pagination-link="page === p" href="#" @click.prevent="goPage(p)" x-text="p"></a></template>
+            </li>
+          </template>
+          <li x-h-pagination-item>
+            <a x-h-pagination-link.next href="#" :aria-label="T('$projectName:${tprefix}.defaults.next', 'Next')" :aria-disabled="page >= pageCount" :tabindex="page >= pageCount ? -1 : 0" @click.prevent="if (page < pageCount) goPage(page + 1)">
+              <span x-h-pagination-link-label x-text="T('$projectName:${tprefix}.defaults.next', 'Next')"></span>
+              <svg x-h-lucide role="presentation" data-lucide="chevron-right"></svg>
+            </a>
+          </li>
+        </ul>
+      </nav>
     </div>
 
     <!-- Detail area — hidden (0%) until a master record is selected, then ~40%. -->
@@ -137,17 +155,17 @@
                to the selected record. The filter is a query parameter on the calendar's own route,
                so without a button here the URL is knowledge the user has to type. -->
 #foreach($scopedCalendar in $scopedCalendars)
-          <button x-h-button data-variant="outline" data-size="sm" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', selectedId)"><i role="img" x-h-lucide data-lucide="calendar-days"></i><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="openScopedCalendar('${scopedCalendar.entity}', '${scopedCalendar.scopeProperty}', selectedId)"><svg role="presentation" x-h-lucide data-lucide="calendar-days"></svg><span x-text="T('$projectName:${tprefix}.t.${scopedCalendar.dataName}_plural', '${scopedCalendar.label}')"></span></button>
 #end
 #end
-          <button x-h-button data-variant="outline" data-size="sm" @click="previewMaster(selected)"><i role="img" x-h-lucide data-lucide="eye"></i><span x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></span></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="previewMaster(selected)"><svg role="presentation" x-h-lucide data-lucide="eye"></svg><span x-text="T('$projectName:${tprefix}.defaults.preview', 'Preview')"></span></button>
 #if($immutableStatusProperty || $immutableAlways)
           <!-- Edit/Delete are disabled for an immutable record (the controller would 409). -->
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="isRowImmutable(selected)" :title="isRowImmutable(selected) ? T('$projectName:${tprefix}.messages.immutable', 'This record is read-only in its current status - corrections go through the workflow.') : null" @click="editMaster(selected)"><i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
-          <button x-h-button data-variant="transparent" data-size="sm" :disabled="isRowImmutable(selected)" @click="askDelete(selected)" aria-label="Delete"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+          <button x-h-button data-variant="outline" data-size="sm" :disabled="isRowImmutable(selected)" :title="isRowImmutable(selected) ? T('$projectName:${tprefix}.messages.immutable', 'This record is read-only in its current status - corrections go through the workflow.') : null" @click="editMaster(selected)"><svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
+          <button x-h-button data-variant="transparent" data-size="sm" :disabled="isRowImmutable(selected)" @click="askDelete(selected)" aria-label="Delete"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
 #else
-          <button x-h-button data-variant="outline" data-size="sm" @click="editMaster(selected)"><i role="img" x-h-lucide data-lucide="pencil"></i><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
-          <button x-h-button data-variant="transparent" data-size="sm" @click="askDelete(selected)" aria-label="Delete"><i role="img" x-h-lucide data-lucide="trash-2"></i></button>
+          <button x-h-button data-variant="outline" data-size="sm" @click="editMaster(selected)"><svg role="presentation" x-h-lucide data-lucide="pencil"></svg><span x-text="T('$projectName:${tprefix}.defaults.edit', 'Edit')"></span></button>
+          <button x-h-button data-variant="transparent" data-size="sm" @click="askDelete(selected)" aria-label="Delete"><svg role="presentation" x-h-lucide data-lucide="trash-2"></svg></button>
 #end
         </div>
 
@@ -156,7 +174,7 @@
         <div x-show="$store.processTasks.getTasks(selected).length" class="hbox gap-2 flex-wrap">
           <template x-for="task in $store.processTasks.getTasks(selected)" :key="task.id">
             <button x-h-button data-variant="primary" data-size="sm" @click="$store.processTasks.openTask(task)">
-              <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+              <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
             </button>
           </template>
         </div>
@@ -189,9 +207,9 @@
 #if($property.widgetLabel)#set($plabel = $property.widgetLabelJs)#else#set($plabel = $property.name)#end
 #if($property.isDateType)#set($isDate = "true")#else#set($isDate = "false")#end
 #if($property.isReadOnlyProperty == "true" || ($property.auditType && $property.auditType != "NONE"))
-              <div class="vbox gap-0" x-show="selected?.${property.name} !== null && selected?.${property.name} !== undefined && selected?.${property.name} !== ''">
+              <div class="vbox" x-show="selected?.${property.name} !== null && selected?.${property.name} !== undefined && selected?.${property.name} !== ''">
 #else
-              <div class="vbox gap-0"#visibleGate($property)>
+              <div class="vbox"#visibleGate($property)>
 #end
                 <span x-h-text.muted class="text-xs" x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${plabel}')"></span>
 #if($property.widgetType == "DOCUMENT_STATUS")
@@ -239,7 +257,7 @@
                   <template x-if="rows.length === 0">
                     <div x-h-info-page>
                       <div x-h-info-page-header>
-                        <div x-h-info-page-media.icon><i role="img" x-h-lucide data-lucide="paperclip"></i></div>
+                        <div x-h-info-page-media.icon><svg role="presentation" x-h-lucide data-lucide="paperclip"></svg></div>
                         <div x-h-info-page-title x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopies', 'No copies yet') : T('$projectName:${tprefix}.messages.noFiles', 'No attachments')"></div>
                         <div x-h-info-page-description x-text="filesReadOnly ? T('$projectName:${tprefix}.messages.noCopiesHint', 'A copy is stored automatically when the document is issued.') : T('$projectName:${tprefix}.messages.noFilesHint', 'Files are managed from the record’s Edit form.')"></div>
                       </div>
@@ -249,15 +267,15 @@
                     <div class="vbox gap-2">
                       <template x-for="row in rows" :key="row[def.primaryKey]">
                         <div x-h-card class="hbox items-center gap-3 p-3">
-                          <i role="img" x-h-lucide data-lucide="file-text" class="shrink-0"></i>
-                          <div class="vbox gap-0 grow min-w-0">
+                          <svg role="presentation" x-h-lucide data-lucide="file-text" class="shrink-0"></svg>
+                          <div class="vbox flex-1 min-w-0">
                             <span class="text-sm truncate" x-text="row.FileName"></span>
                             <span class="text-xs text-muted-foreground" x-text="fileSizeText(row)"></span>
                           </div>
                           <template x-if="filesReadOnly">
-                            <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><i role="img" x-h-lucide data-lucide="printer"></i></a>
+                            <a x-h-button data-variant="transparent" data-size="sm" :href="openHref(row)" target="_blank" rel="noopener" aria-label="Print"><svg role="presentation" x-h-lucide data-lucide="printer"></svg></a>
                           </template>
-                          <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><i role="img" x-h-lucide data-lucide="download"></i></a>
+                          <a x-h-button data-variant="transparent" data-size="sm" :href="downloadHref(row)" target="_blank" rel="noopener" aria-label="Download"><svg role="presentation" x-h-lucide data-lucide="download"></svg></a>
                         </div>
                       </template>
                     </div>
@@ -293,10 +311,10 @@
                         <td x-h-table-cell data-row-actions>
                           <template x-for="task in $store.processTasks.getTasks(row)" :key="task.id">
                             <button x-h-button data-variant="primary" data-size="sm" @click="$store.processTasks.openTask(task)">
-                              <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="$store.processTasks.taskName(task)"></span>
+                              <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="$store.processTasks.taskName(task)"></span>
                             </button>
                           </template>
-                          <button x-h-button data-variant="transparent" data-size="sm" aria-label="Preview" @click="previewRow(row)"><i role="img" x-h-lucide data-lucide="eye"></i></button>
+                          <button x-h-button data-variant="transparent" data-size="sm" aria-label="Preview" @click="previewRow(row)"><svg role="presentation" x-h-lucide data-lucide="eye"></svg></button>
                         </td>
                       </tr>
                     </template>
@@ -343,7 +361,7 @@
                           </td>
                         </template>
                         <td x-h-table-cell data-row-actions>
-                          <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><i role="img" x-h-lucide data-lucide="external-link"></i></button>
+                          <button type="button" x-h-button data-variant="transparent" data-size="sm" @click="openRow(row)" :aria-label="T('$projectName:${tprefix}.defaults.open', 'Open')"><svg role="presentation" x-h-lucide data-lucide="external-link"></svg></button>
                         </td>
                       </tr>
                     </template>
@@ -362,7 +380,7 @@
     <div x-h-dialog>
       <div x-h-dialog-header>
         <h2 x-h-dialog-title x-text="T('$projectName:${tprefix}.defaults.deleteTitle', 'Delete ${name}?', { name: T('$projectName:${tprefix}.t.${dataName}', '${name}') })"></h2>
-        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
       </div>
       <div x-h-dialog-content><p x-text="T('$projectName:${tprefix}.messages.deleteConfirm', 'Are you sure you want to delete this ${name}? This cannot be undone.', { name: T('$projectName:${tprefix}.t.${dataName}', '${name}') })"></p></div>
       <div x-h-dialog-footer>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
index 59af4aee60e..4f691e3090f 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
@@ -3,8 +3,9 @@
   Generated by Eclipse Dirigible based on model and template.
   Standalone Alpine.js + Harmonia report page for ${name}, rendered from a .report artifact. Opened
   directly (its own URL under gen/<genFolder>/reports/<name>/); queries the generated Java report
-  controller via the self-contained client in report.js. Light by default (shares the shell's theme
-  key in localStorage); dark when a `dark` class is on the root.
+  controller via the self-contained client in report.js. Follows the platform colour scheme: Harmonia
+  applies the saved choice - or the OS scheme in `auto` mode - itself, in sync with the shell that
+  embeds it.
 -->
 <html lang="en">
   <head>
@@ -14,8 +15,9 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <style>
       /* Theme `html` too (Harmonia only styles `body`) so the full page surface follows the theme.
-         harmonia.min.js (below) applies the shared `codbex.harmonia.colorMode` the shell set, so this
-         standalone report matches the shell's light/dark choice. */
+         harmonia.min.js (below) applies the saved colour scheme - or the OS scheme in `auto` mode -
+         itself and keeps every same-origin frame and tab in sync, so this standalone report matches
+         the shell that embeds it. */
       html, body { height: 100%; background-color: var(--background); color: var(--foreground); }
       [x-cloak] { display: none !important; }
     </style>
@@ -29,18 +31,18 @@
         <div x-h-toolbar-spacer></div>
 #if($chart)
         <button x-h-button data-variant="outline" data-size="sm" @click="toggleView()">
-          <svg x-h-lucide role="img" data-lucide="table-2" x-show="view === 'chart'"></svg>
-          <svg x-h-lucide role="img" data-lucide="bar-chart-3" x-show="view !== 'chart'"></svg>
+          <svg x-h-lucide role="presentation" data-lucide="table-2" x-show="view === 'chart'"></svg>
+          <svg x-h-lucide role="presentation" data-lucide="chart-column" x-show="view !== 'chart'"></svg>
           <span x-text="view === 'chart' ? T('application-core:shell.report.table', 'Table') : T('application-core:shell.report.chart', 'Chart')"></span>
         </button>
 #end
         <button x-h-button data-variant="outline" data-size="sm" @click="showFilters = !showFilters; refreshIcons()">
-          <i role="img" x-h-lucide data-lucide="filter"></i><span x-text="T('application-core:shell.report.filters', 'Filters')"></span>
+          <svg role="presentation" x-h-lucide data-lucide="filter"></svg><span x-text="T('application-core:shell.report.filters', 'Filters')"></span>
           <span x-show="activeFilterCount > 0" x-h-badge data-variant="information" x-text="activeFilterCount"></span>
         </button>
-        <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('application-core:shell.report.refresh', 'Refresh')"></span></button>
-        <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('application-core:shell.report.export', 'Export')"></span></button>
-        <button x-h-button data-variant="outline" data-size="sm" @click="printReport()"><i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('application-core:shell.report.print', 'Print')"></span></button>
+        <button x-h-button data-variant="outline" data-size="sm" @click="load()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg><span x-text="T('application-core:shell.report.refresh', 'Refresh')"></span></button>
+        <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('application-core:shell.report.export', 'Export')"></span></button>
+        <button x-h-button data-variant="outline" data-size="sm" @click="printReport()"><svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('application-core:shell.report.print', 'Print')"></span></button>
       </div>
 
       <!-- Declared report parameters (the .report `parameters` block - e.g. the balance report's
@@ -48,7 +50,7 @@
            uses the parameter's server-side default. Renders nothing for parameter-less reports. -->
       <div x-show="!preview && reportParams.length" class="hbox items-end gap-2 mx-4 flex-wrap">
         <template x-for="p in reportParams" :key="p.name">
-          <div class="vbox gap-0">
+          <div class="vbox">
             <label class="text-xs text-muted-foreground" x-text="paramLabel(p.name)"></label>
             <template x-if="p.kind === 'date'">
               <div x-h-date-picker>
@@ -65,7 +67,7 @@
             </template>
           </div>
         </template>
-        <button x-h-button data-size="sm" @click="applyFilters()"><i role="img" x-h-lucide data-lucide="check"></i><span x-text="T('application-core:shell.report.apply', 'Apply')"></span></button>
+        <button x-h-button data-size="sm" @click="applyFilters()"><svg role="presentation" x-h-lucide data-lucide="check"></svg><span x-text="T('application-core:shell.report.apply', 'Apply')"></span></button>
       </div>
 
       <!-- Per-column filters, typed from the report metadata: date -> range, number -> range,
@@ -75,7 +77,7 @@
         <div x-h-card-content class="vbox gap-3">
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-2">
             <template x-for="col in reportColumns" :key="col.key">
-              <div class="vbox gap-0">
+              <div class="vbox">
                 <label class="text-xs text-muted-foreground" x-text="col.key"></label>
                 <template x-if="col.kind === 'date'">
                   <div class="hbox gap-1 items-center">
@@ -118,8 +120,8 @@
             </template>
           </div>
           <div class="hbox gap-2">
-            <button x-h-button data-size="sm" @click="applyFilters()"><i role="img" x-h-lucide data-lucide="check"></i><span x-text="T('application-core:shell.report.apply', 'Apply')"></span></button>
-            <button x-h-button data-variant="outline" data-size="sm" @click="clearFilters()"><i role="img" x-h-lucide data-lucide="x"></i><span x-text="T('application-core:shell.report.clear', 'Clear')"></span></button>
+            <button x-h-button data-size="sm" @click="applyFilters()"><svg role="presentation" x-h-lucide data-lucide="check"></svg><span x-text="T('application-core:shell.report.apply', 'Apply')"></span></button>
+            <button x-h-button data-variant="outline" data-size="sm" @click="clearFilters()"><svg role="presentation" x-h-lucide data-lucide="x"></svg><span x-text="T('application-core:shell.report.clear', 'Clear')"></span></button>
           </div>
         </div>
       </div>
@@ -161,7 +163,7 @@
 #if($kind == 'balance')
             <!-- Balance totals: the summed SUM columns, shown only when the whole result fits on
                  one page (the debit/credit equality check the accountant reads off the footer). -->
-            <tfoot x-show="showTotals">
+            <tfoot x-h-table-footer x-show="showTotals">
               <tr x-h-table-row>
                 <template x-for="(col, ci) in columns" :key="ci">
                   <td x-h-table-cell class="font-semibold" :class="alignClass(col)" x-text="ci === 0 ? T('application-core:shell.report.total', 'Total') : totalText(col)"></td>
@@ -172,11 +174,30 @@
           </table>
         </div>
 
-        <div x-show="!preview" class="hbox items-center gap-2">
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="page <= 1" @click="prev()"><i role="img" x-h-lucide data-lucide="chevron-left"></i><span x-text="T('application-core:shell.report.prev', 'Prev')"></span></button>
-          <span x-h-text.muted x-text="T('application-core:shell.report.pageOf', 'Page {{page}} / {{total}}', { page: page, total: totalPages })"></span>
-          <button x-h-button data-variant="outline" data-size="sm" :disabled="page >= totalPages" @click="next()"><span x-text="T('application-core:shell.report.next', 'Next')"></span><i role="img" x-h-lucide data-lucide="chevron-right"></i></button>
-        </div>
+        <!-- Pager: first / last / the current page's neighbours with an ellipsis over each gap
+             (pageWindow); every page change re-queries the server. Hidden in the dashboard preview. -->
+        <nav x-h-pagination class="w-fit!" x-show="!preview && totalPages > 1">
+          <ul x-h-pagination-content>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.previous href="#" :aria-label="T('application-core:shell.report.prev', 'Previous')" :aria-disabled="page <= 1" :tabindex="page <= 1 ? -1 : 0" @click.prevent="if (page > 1) goPage(page - 1)">
+                <svg x-h-lucide role="presentation" data-lucide="chevron-left"></svg>
+                <span x-h-pagination-link-label x-text="T('application-core:shell.report.prev', 'Previous')"></span>
+              </a>
+            </li>
+            <template x-for="(p, i) in pageWindow()" :key="i">
+              <li x-h-pagination-item>
+                <template x-if="p === '...'"><span x-h-pagination-ellipsis></span></template>
+                <template x-if="p !== '...'"><a x-h-pagination-link="page === p" href="#" @click.prevent="goPage(p)" x-text="p"></a></template>
+              </li>
+            </template>
+            <li x-h-pagination-item>
+              <a x-h-pagination-link.next href="#" :aria-label="T('application-core:shell.report.next', 'Next')" :aria-disabled="page >= totalPages" :tabindex="page >= totalPages ? -1 : 0" @click.prevent="if (page < totalPages) goPage(page + 1)">
+                <span x-h-pagination-link-label x-text="T('application-core:shell.report.next', 'Next')"></span>
+                <svg x-h-lucide role="presentation" data-lucide="chevron-right"></svg>
+              </a>
+            </li>
+          </ul>
+        </nav>
 #if($chart)
         </div>
 #end
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template
index 6a4be4685d3..61167d0f6db 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template
@@ -306,8 +306,26 @@ document.addEventListener('alpine:init', () => {
     },
 
     get totalPages() { return Math.max(1, Math.ceil(this.count / this.limit)); },
-    next() { if (this.page < this.totalPages) { this.page++; this.load(); } },
-    prev() { if (this.page > 1) { this.page--; this.load(); } },
+    // Server-side paging: a page change re-queries; the clamp keeps a stale pager click in range.
+    goPage(n) {
+      const page = Math.max(1, Math.min(n, this.totalPages));
+      if (page === this.page) return;
+      this.page = page;
+      this.load();
+    },
+    // The page numbers the pager shows: first, last and the current page's neighbours, '...' over
+    // each gap - at most 7 entries, so a long report never renders a link per page.
+    pageWindow() {
+      const total = this.totalPages, current = this.page;
+      if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+      const start = Math.max(2, current - 1), end = Math.min(total - 1, current + 1);
+      const pages = [1];
+      if (start > 2) pages.push('...');
+      for (let p = start; p <= end; p++) pages.push(p);
+      if (end < total - 1) pages.push('...');
+      pages.push(total);
+      return pages;
+    },
 
     // Export the FULL result set (POST /export returns all rows) as CSV.
     async exportCsv() {
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
index 3406b009c1a..853ef3b0b14 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
@@ -5,8 +5,8 @@
   <div x-h-toolbar data-variant="transparent">
     <span x-h-toolbar-title class="text-2xl font-semibold tracking-tight">${name}</span>
     <div x-h-toolbar-spacer></div>
-    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
-    <button x-h-button data-variant="outline" data-size="sm" @click="printChart()"><i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="printChart()"><svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span></button>
   </div>
   <div x-show="state === 'loading'" class="p-4"><div x-h-spinner></div></div>
   <div x-show="state === 'error'" x-h-alert data-variant="negative" role="alert" class="m-4"><div x-h-alert-description x-text="error"></div></div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
index ce857a9c09f..831018f6b8f 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
@@ -3,9 +3,9 @@
   <div x-h-toolbar data-variant="transparent">
     <span x-h-toolbar-title class="text-2xl font-semibold tracking-tight">${name}</span>
     <div x-h-toolbar-spacer></div>
-    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
-    <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span></button>
-    <button x-h-button data-variant="outline" data-size="sm" @click="printReport()"><i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><svg role="presentation" x-h-lucide data-lucide="download"></svg><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="printReport()"><svg role="presentation" x-h-lucide data-lucide="printer"></svg><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span></button>
   </div>
   <div x-show="state === 'loading'" class="p-4"><div x-h-spinner></div></div>
   <div x-show="state === 'error'" x-h-alert data-variant="negative" role="alert" class="m-4"><div x-h-alert-description x-text="error"></div></div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/slots/slots-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/slots/slots-view.html.template
index f573404689e..6650a8b7f34 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/slots/slots-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/slots/slots-view.html.template
@@ -17,11 +17,11 @@
     <!-- The picker is an ADDITIONAL browse page: this switches to the entity's own layout (its list /
          master / document list) at /${name}/list, which carries the mirror switch back here. -->
     <button x-h-button data-variant="outline" data-size="sm" @click="goList()">
-      <i role="img" x-h-lucide data-lucide="table"></i>
+      <svg role="presentation" x-h-lucide data-lucide="table"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.list', 'List')"></span>
     </button>
     <button x-h-button data-variant="primary" @click="newEntity()">
-      <i role="img" x-h-lucide data-lucide="plus"></i>
+      <svg role="presentation" x-h-lucide data-lucide="plus"></svg>
       <span x-text="T('$projectName:${tprefix}.defaults.new', 'New')"></span>
     </button>
   </div>
@@ -36,7 +36,7 @@
     </div>
   </div>
 
-  <div x-show="state === 'default'" class="bk-stretch" style="flex: 1; min-height: 0; padding: 0.5rem; overflow: auto;">
+  <div x-show="state === 'default'" style="flex: 1; min-height: 0; padding: 0.5rem; overflow: auto;">
     <!--
       Harmonia 2.5+ - the slot picker renders only the day grid; the date-navigation toolbar is composed
       here from the x-h-slot-picker-* control directives (they must be descendants of x-h-slot-picker).
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
index e816f68616d..30a4c0808a1 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
@@ -12,14 +12,14 @@
          tile opens the full report. -->
     <div class="vbox gap-3" x-show="kpis.length > 0 || customKpis.length > 0" x-cloak>
       <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <i role="img" x-h-lucide data-lucide="gauge" class="size-4"></i><span x-text="T('application-core:shell.dashboard.kpis', 'Key Indicators')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="gauge" class="size-4"></svg><span x-text="T('application-core:shell.dashboard.kpis', 'Key Indicators')"></span>
       </div>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <template x-for="w in customKpis" :key="w.name">
           <div x-h-card>
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide :data-lucide="w.icon" class="size-4"></i><span x-text="T(w.tkey, w.label)"></span>
+                <svg role="presentation" x-h-lucide :data-lucide="w.icon" class="size-4"></svg><span x-text="T(w.tkey, w.label)"></span>
               </div>
             </div>
             <div x-h-card-content>
@@ -36,7 +36,7 @@
                @click="openReport(r)" @keydown.enter.prevent="openReport(r)">
             <div x-h-card-header>
               <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <i role="img" x-h-lucide :data-lucide="r.widget.icon" class="size-4"></i><span x-text="$store.reports.widgetLabel(r)"></span>
+                <svg role="presentation" x-h-lucide :data-lucide="r.widget.icon" class="size-4"></svg><span x-text="$store.reports.widgetLabel(r)"></span>
               </div>
             </div>
             <div x-h-card-content>
@@ -49,28 +49,29 @@
                 </div>
               </template>
               <template x-if="r.widget.kind === 'list'">
-                <div class="overflow-x-auto">
+                <div>
                   <template x-if="!kpiState(r).loaded"><div x-h-skeleton class="w-full h-9"></div></template>
                   <p x-show="kpiState(r).error" x-h-text.muted class="text-3xl font-bold">—</p>
-                  <table x-show="kpiState(r).loaded && !kpiState(r).error" class="w-full text-sm">
-                    <thead>
-                      <tr>
-                        <template x-for="c in kpiColumns(r)" :key="c.alias">
-                          <th class="py-1 pr-3 text-left font-semibold text-muted-foreground"
-                              :class="kpiAlignClass(c)" x-text="c.label"></th>
-                        </template>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <template x-for="(row, i) in kpiRows(r)" :key="i">
-                        <tr>
+                  <div x-show="kpiState(r).loaded && !kpiState(r).error" x-h-table-container>
+                    <table x-h-table>
+                      <thead x-h-table-header>
+                        <tr x-h-table-row>
                           <template x-for="c in kpiColumns(r)" :key="c.alias">
-                            <td class="py-1 pr-3" :class="kpiAlignClass(c)" x-text="kpiCellText(r, row, c)"></td>
+                            <th x-h-table-head scope="col" :class="kpiAlignClass(c)" x-text="c.label"></th>
                           </template>
                         </tr>
-                      </template>
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody x-h-table-body>
+                        <template x-for="(row, i) in kpiRows(r)" :key="i">
+                          <tr x-h-table-row>
+                            <template x-for="c in kpiColumns(r)" :key="c.alias">
+                              <td x-h-table-cell :class="kpiAlignClass(c)" x-text="kpiCellText(r, row, c)"></td>
+                            </template>
+                          </tr>
+                        </template>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </template>
             </div>
@@ -87,7 +88,7 @@
           <div x-h-card>
             <div x-h-card-header>
               <h3 x-h-card-title class="hbox items-center gap-2">
-                <i role="img" x-h-lucide :data-lucide="w.icon" class="size-4"></i><span x-text="T(w.tkey, w.label)"></span>
+                <svg role="presentation" x-h-lucide :data-lucide="w.icon" class="size-4"></svg><span x-text="T(w.tkey, w.label)"></span>
               </h3>
             </div>
             <div x-h-card-content class="vbox gap-2">
@@ -103,18 +104,18 @@
     <!-- Reports -->
     <div class="vbox gap-3" x-show="reports.length > 0" x-cloak>
       <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <i role="img" x-h-lucide data-lucide="bar-chart-3" class="size-4"></i><span x-text="T('application-core:shell.nav.reports', 'Reports')"></span>
+        <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="T('application-core:shell.nav.reports', 'Reports')"></span>
       </div>
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
         <template x-for="r in reports" :key="r.url">
           <div x-h-card>
             <div x-h-card-header>
               <h3 x-h-card-title class="hbox items-center gap-2 cursor-pointer" @click="openReport(r)">
-                <i role="img" x-h-lucide data-lucide="bar-chart-3" class="size-4"></i><span x-text="$store.reports.displayLabel(r)"></span>
+                <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="$store.reports.displayLabel(r)"></span>
               </h3>
               <div x-h-card-action>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="openReport(r)" aria-label="Open report">
-                  <i role="img" x-h-lucide data-lucide="arrow-up-right"></i>
+                  <svg role="presentation" x-h-lucide data-lucide="arrow-up-right"></svg>
                 </button>
               </div>
             </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index f3804b342f7..5e2ca5f4de6 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -31,15 +31,10 @@
     <!-- PapaParse — CSV parsing for the Documents File Preview pane (served version-less by webjars). -->
     <script src="/webjars/papaparse/papaparse.min.js"></script>
 
-    <!-- Default Harmonia's colour scheme to light on first run (its own default is "auto" = follow
-         the OS). Harmonia (loaded below) reads this key on every page and manages the `.dark` class
-         itself, so the shell and the standalone form/report iframes stay in sync. The toolbar switch
-         changes it via Harmonia.setColorScheme(). -->
-    <script>
-      (function () {
-        try { if (!localStorage.getItem('codbex.harmonia.colorMode')) localStorage.setItem('codbex.harmonia.colorMode', 'light'); } catch (e) { /* no storage */ }
-      })();
-    </script>
+    <!-- Colour scheme: Harmonia (loaded below) applies the saved choice - or the OS scheme in `auto`
+         mode - itself on every page and keeps every same-origin frame and tab in sync, so the shell and
+         the standalone form/report iframes need no seeding here. The toolbar's theme menu writes the
+         choice through the shared theme store (Harmonia.setColorScheme). -->
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -64,7 +59,7 @@
 #if($appIcon.contains("/") || $appIcon.contains("."))
               <img src="${appIcon}" alt="${appTitle}" class="size-5" />
 #else
-              <i role="img" x-h-lucide data-lucide="${appIcon}" class="size-5 text-primary"></i>
+              <svg role="presentation" x-h-lucide data-lucide="${appIcon}" class="size-5 text-primary"></svg>
 #end
               <span class="font-bold"#if($appDescription && $appDescription != '') title="${appDescription}"#end>${appTitle}</span>
             </div>
@@ -76,18 +71,18 @@
               <div x-h-sidebar-group-content>
                 <ul x-h-sidebar-menu>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isDashboard" @click="navigate('/dashboard')">
-                      <i role="img" x-h-lucide data-lucide="layout-dashboard"></i><span x-text="T('application-core:shell.nav.dashboard', 'Dashboard')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isDashboard" @click="navigate('/dashboard')">
+                      <svg role="presentation" x-h-lucide data-lucide="layout-dashboard"></svg><span x-text="T('application-core:shell.nav.dashboard', 'Dashboard')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isActive('/inbox')" @click="navigate('/inbox')">
-                      <i role="img" x-h-lucide data-lucide="inbox"></i><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isActive('/inbox')" @click="navigate('/inbox')">
+                      <svg role="presentation" x-h-lucide data-lucide="inbox"></svg><span x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
                     </button>
                   </li>
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isActive('/documents')" @click="navigate('/documents')">
-                      <i role="img" x-h-lucide data-lucide="folder"></i><span x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
+                    <button x-h-sidebar-menu-nav :data-active="isActive('/documents')" @click="navigate('/documents')">
+                      <svg role="presentation" x-h-lucide data-lucide="folder"></svg><span x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
                     </button>
                   </li>
                 </ul>
@@ -104,8 +99,8 @@
 #foreach($entity in $models)
 #if($entity.personalProperty)
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isActive('/my/${entity.name}')" @click="navigate('/my/${entity.name}')">
-                      <i role="img" x-h-lucide data-lucide="#if($entity.iconName && $entity.iconName != '')${entity.iconName}#{else}user#end"></i>
+                    <button x-h-sidebar-menu-nav :data-active="isActive('/my/${entity.name}')" @click="navigate('/my/${entity.name}')">
+                      <svg role="presentation" x-h-lucide data-lucide="#if($entity.iconName && $entity.iconName != '')${entity.iconName}#{else}user#end"></svg>
                       <span x-text="'My ' + T('$projectName:${tprefix}.t.${entity.dataName}_plural', navLabel('#if($entity.menuLabel && $entity.menuLabel != '')${entity.menuLabel}#{else}${entity.name}#end'))"></span>
                     </button>
                   </li>
@@ -126,8 +121,8 @@
 #foreach($entity in $models)
 #if(($entity.layoutType == "LIST" || $entity.layoutType == "MANAGE" || $entity.layoutType == "LIST_MASTER" || $entity.layoutType == "MANAGE_MASTER" || $entity.layoutType == "MANAGE_DOCUMENT") && $entity.type == "PRIMARY")
                   <li x-h-sidebar-menu-item>
-                    <button x-h-sidebar-menu-button :data-active="isActive('/${entity.name}')" @click="navigate('/${entity.name}')">
-                      <i role="img" x-h-lucide data-lucide="#if($entity.iconName && $entity.iconName != '')${entity.iconName}#{else}list#end"></i>
+                    <button x-h-sidebar-menu-nav :data-active="isActive('/${entity.name}')" @click="navigate('/${entity.name}')">
+                      <svg role="presentation" x-h-lucide data-lucide="#if($entity.iconName && $entity.iconName != '')${entity.iconName}#{else}list#end"></svg>
                       <span x-text="T('$projectName:${tprefix}.t.${entity.dataName}_plural', navLabel('#if($entity.menuLabel && $entity.menuLabel != '')${entity.menuLabel}#{else}${entity.name}#end'))"></span>
                     </button>
                   </li>
@@ -147,8 +142,8 @@
                 <ul x-h-sidebar-menu>
                   <template x-for="r in $store.reports.items" :key="r.url">
                     <li x-h-sidebar-menu-item>
-                      <button x-h-sidebar-menu-button :data-active="isActive('/reports') && $store.reports.selected && $store.reports.selected.url === r.url" @click="$store.reports.selected = r; navigate('/reports')">
-                        <i role="img" x-h-lucide data-lucide="bar-chart-3"></i><span x-text="${dollar}store.reports.displayLabel(r)"></span>
+                      <button x-h-sidebar-menu-nav :data-active="isActive('/reports') && $store.reports.selected && $store.reports.selected.url === r.url" @click="$store.reports.selected = r; navigate('/reports')">
+                        <svg role="presentation" x-h-lucide data-lucide="chart-column"></svg><span x-text="${dollar}store.reports.displayLabel(r)"></span>
                       </button>
                     </li>
                   </template>
@@ -161,13 +156,15 @@
 #if($hasSettings)
           <!-- Settings pinned to the sidebar footer (bottom-left), like codbex-athena-app. -->
           <div x-h-sidebar-footer>
-            <ul x-h-sidebar-menu>
-              <li x-h-sidebar-menu-item>
-                <button x-h-sidebar-menu-button :data-active="isActive('/settings')" @click="navigate('/settings')">
-                  <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
-                </button>
-              </li>
-            </ul>
+            <nav :aria-label="T('application-core:shell.nav.settings', 'Settings')">
+              <ul x-h-sidebar-menu>
+                <li x-h-sidebar-menu-item>
+                  <button x-h-sidebar-menu-nav :data-active="isActive('/settings')" @click="navigate('/settings')">
+                    <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
 #end
         </div>
@@ -181,7 +178,7 @@
           <div x-h-toolbar data-variant="transparent" x-cloak x-show="!embedded">
             <button x-show="hiddenPanels.left && !embedded" x-h-button data-variant="transparent"
                     aria-label="Navigation" @click="openSideNav()" data-size="icon">
-              <i role="img" x-h-lucide data-lucide="menu"></i>
+              <svg role="presentation" x-h-lucide data-lucide="menu"></svg>
             </button>
             <nav x-h-breadcrumb data-overflow="scroll"
                  :data-variant="hiddenPanels.left ? 'outline' : 'default'" data-size="md">
@@ -204,29 +201,43 @@
             </nav>
             <div x-h-toolbar-spacer></div>
 
-            <!-- Light/dark theme switch (a visible Lucide sun/moon). Backed by Harmonia's own
-                 colour-scheme API, so every page — including the standalone form/report iframes that
-                 load harmonia.min.js — honours the same choice. -->
-            <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.theme.toggle()"
-                    :aria-label="$store.theme.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'" title="Toggle theme">
-              <svg x-h-lucide x-show="$store.theme.value !== 'dark'" role="img" data-lucide="moon"></svg>
-              <svg x-h-lucide x-show="$store.theme.value === 'dark'" role="img" data-lucide="sun"></svg>
+            <!-- Theme: light / dark / auto, a radio menu over the shared theme store's `mode`; the trigger
+                 icon follows the store. Backed by Harmonia's own colour-scheme API, so every page -
+                 including the standalone form/report iframes that load harmonia.min.js - honours the
+                 same choice. -->
+            <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
+                    :aria-label="T('application-core:shell.theme.title', 'Theme')" :title="T('application-core:shell.theme.title', 'Theme')">
+              <svg x-h-lucide role="presentation" :data-lucide="$store.theme.icon"></svg>
             </button>
+            <ul x-h-menu aria-label="Theme" data-align="bottom-end">
+              <li x-h-menu-radio-item="'light'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun"></svg>
+                <span x-text="T('application-core:shell.theme.light', 'Light')"></span>
+              </li>
+              <li x-h-menu-radio-item="'dark'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="moon"></svg>
+                <span x-text="T('application-core:shell.theme.dark', 'Dark')"></span>
+              </li>
+              <li x-h-menu-radio-item="'auto'" name="theme" x-model="$store.theme.mode">
+                <svg role="presentation" x-h-lucide data-lucide="sun-moon"></svg>
+                <span x-text="T('application-core:shell.theme.auto', 'Auto')"></span>
+              </li>
+            </ul>
 
-            <!-- Notifications: the bell shows the unread count (absolutely positioned so the count
-                 pill never widens the button into its neighbours); the popover lists them. -->
+            <!-- Notifications: the bell carries the unread count as a badge indicator anchored to its
+                 corner (so the count never widens the button into its neighbours); the popover lists them. -->
             <button x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Notifications" class="relative">
-              <i role="img" x-h-lucide data-lucide="bell"></i>
-              <!-- Small count badge tucked into the bell's bottom-right corner (doesn't cover the icon). -->
-              <span x-show="$store.notifications.unreadCount > 0" class="absolute" x-text="$store.notifications.unreadCount"
-                    style="right:-2px; bottom:-2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#e01b24; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700;"></span>
+              <svg role="presentation" x-h-lucide data-lucide="bell"></svg>
+              <template x-if="$store.notifications.unreadCount > 0">
+                <span x-h-badge-indicator data-variant="negative" x-text="$store.notifications.unreadCount"></span>
+              </template>
             </button>
-            <div class="w-80" x-h-popover data-innerclicks="true">
+            <div class="w-xs" x-h-popover data-innerclicks="true">
               <div x-h-toolbar data-size="sm">
                 <span x-h-toolbar-title class="shrink-0" x-text="T('application-core:shell.notifications.title', 'Notifications') + ' (' + $store.notifications.unreadCount + ')'"></span>
                 <div x-h-toolbar-spacer></div>
                 <button x-h-button data-variant="transparent" data-size="icon-sm" @click="$store.notifications.markAllRead()"
-                        title="Mark all as read" aria-label="Mark all as read"><i role="img" x-h-lucide data-lucide="check-check"></i></button>
+                        title="Mark all as read" aria-label="Mark all as read"><svg role="presentation" x-h-lucide data-lucide="check-check"></svg></button>
               </div>
               <div x-show="$store.notifications.items.length === 0" x-h-text.muted class="p-3 text-sm" x-text="T('application-core:shell.notifications.caughtUp', 'You\u2019re all caught up.')"></div>
               <ol x-show="$store.notifications.items.length" x-h-notification-list>
@@ -246,18 +257,21 @@
             <!-- Logged-in user: a Lucide avatar; the dropdown shows the user name and Log out. -->
             <button x-h-button x-h-menu-trigger.dropdown data-variant="transparent" data-size="icon-sm"
                     :aria-label="$store.currentUser.name || 'Account'">
-              <i role="img" x-h-lucide data-lucide="circle-user"></i>
+              <svg role="presentation" x-h-lucide data-lucide="circle-user"></svg>
             </button>
             <ul x-h-menu aria-label="User menu" data-align="bottom-end">
-              <div x-h-tile class="mb-1">
-                <div x-h-tile-media><i role="img" x-h-lucide data-lucide="circle-user" class="size-6"></i></div>
-                <div x-h-tile-content>
-                  <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+              <!-- A ul only takes li children: the identity tile rides in a presentational one. -->
+              <li role="presentation">
+                <div x-h-tile class="mb-1">
+                  <div x-h-tile-media><svg role="presentation" x-h-lucide data-lucide="circle-user" class="size-6"></svg></div>
+                  <div x-h-tile-content>
+                    <div x-h-tile-title x-text="$store.currentUser.name || T('application-core:shell.user.user', 'User')"></div>
+                  </div>
                 </div>
-              </div>
+              </li>
               <div x-h-menu-separator></div>
               <li x-h-menu-item data-variant="negative" @click="$store.currentUser.logout()">
-                <i role="img" x-h-lucide data-lucide="log-out"></i> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
+                <svg role="presentation" x-h-lucide data-lucide="log-out"></svg> <span x-text="T('application-core:shell.user.logout', 'Log out')"></span>
               </li>
             </ul>
           </div>
@@ -276,7 +290,7 @@
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="T($store.processTasks.formTitleKey, $store.processTasks.formTitle)"></h2>
-          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
@@ -292,7 +306,7 @@
       <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.customActions.dialogTitle"></h2>
-          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.closeDialog()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <iframe x-show="$store.customActions.dialogOpen" :src="$store.customActions.dialogUrl"
@@ -304,10 +318,10 @@
     <!-- Confirmation for an `endpoint` custom action (a generate / create-from): the POST mutates
          data the moment it fires, so the user gets an explicit chance to cancel before it runs. -->
     <div x-h-dialog-overlay :data-open="$store.customActions.confirmOpen">
-      <div x-h-dialog data-size="sm" role="alertdialog">
+      <div x-h-dialog role="alertdialog">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="($store.customActions.confirmAction && $store.customActions.confirmAction.label) || T('application-core:shell.customActions.confirmTitle', 'Run action')"></h2>
-          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.customActions.cancelConfirm()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
         <div x-h-dialog-content>
           <p x-h-text.muted x-text="T('application-core:shell.customActions.confirmBody', 'Run {{name}} for the selected record? This creates or changes data.', { name: ($store.customActions.confirmAction && $store.customActions.confirmAction.label) || '' })"></p>
@@ -332,7 +346,7 @@
         <div x-h-dialog data-prompt-dialog>
           <div x-h-dialog-header>
             <h2 x-h-dialog-title x-text="(s.promptAction && s.promptAction.label) || T('application-core:shell.customActions.promptTitle', 'Run action')"></h2>
-            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+            <button x-h-dialog-close @click="s.cancelPrompt()" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
           </div>
           <div x-h-dialog-content>
             <div x-show="s.promptError" x-h-alert data-variant="negative" role="alert">
@@ -343,10 +357,10 @@
                 <div x-h-field :style="['NUMBER','CHECKBOX','DATE'].includes(col.widget) ? '' : 'grid-column: 1 / -1'">
                   <label x-h-label x-text="col.tkey ? T(col.tkey, col.label) : col.label"></label>
                   <template x-if="col.widget === 'DROPDOWN'">
-                    <div x-h-select data-filter="contains">
+                    <div x-h-select>
                       <input x-h-select-input x-model="s.promptValues[col.name]" :placeholder="T('application-core:shell.customActions.promptSelect', 'Select...')" />
                       <div x-h-select-content>
-                        <div x-h-select-search></div>
+                        <div x-h-select-search data-filter="contains"></div>
                         <div x-h-select-list>
                           <template x-for="opt in s.promptOptionsFor(col.name)" :key="opt.value">
                             <div x-h-select-option="opt.text" :data-value="String(opt.value)"></div>
@@ -682,12 +696,12 @@
          routes it to the opener, which refreshes that field's options and selects the new record.
          Bare/assignment $store access only (Velocity passes it through; no method-call escaping). -->
     <div x-h-dialog-overlay :data-open="$store.related.open">
-      <div x-h-dialog data-size="lg">
+      <div x-h-dialog style="width: 92vw; max-width: 1100px;">
         <div x-h-dialog-header>
           <h2 x-h-dialog-title x-text="$store.related.title"></h2>
-          <button x-h-dialog-close @click="$store.related.open = false" aria-label="Close"><i role="img" x-h-lucide data-lucide="x"></i></button>
+          <button x-h-dialog-close @click="$store.related.open = false" aria-label="Close"><svg role="presentation" x-h-lucide data-lucide="x"></svg></button>
         </div>
-        <div x-h-dialog-content class="p-0">
+        <div x-h-dialog-content.flush>
           <iframe x-show="$store.related.open" :src="$store.related.src" title="Add new" style="width:100%; height:70vh; border:0;"></iframe>
         </div>
       </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template
index 9189c9df7c6..81f71b7f8a3 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template
@@ -9,7 +9,7 @@
     <span x-h-toolbar-title x-text="T('application-core:shell.nav.settings', 'Settings')"></span>
   </div>
 
-  <div x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+  <div x-h-split class="flex-1" data-orientation="horizontal" data-variant="border">
 
     <!-- Master: the setting entities -->
     <div x-h-split-panel data-size="25%" data-min="200">
@@ -50,19 +50,22 @@
           <input x-h-input x-model="${dollar}store.formats.number" placeholder="#[[### ### ### ##0.00]]#" />
         </div>
         <div class="hbox gap-2">
-          <button x-h-button data-variant="emphasized" @click="${dollar}store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
+          <button x-h-button data-variant="primary" @click="${dollar}store.formats.apply()" x-text="T('application-core:shell.settings.apply', 'Apply')"></button>
           <button x-h-button data-variant="outline" @click="${dollar}store.formats.reset()" x-text="T('application-core:shell.settings.resetDefaults', 'Reset to defaults')"></button>
         </div>
         <span x-h-text.muted x-text="T('application-core:shell.settings.configFor', 'Configuration and nomenclature for ${projectName}.', { name: '${projectName}' })"></span>
+        <ul x-h-list :aria-label="T('application-core:shell.nav.settings', 'Settings')">
 #foreach($entity in $models)
 #if($entity.type == "SETTING")
-        <button x-h-button data-variant="outline" class="justify-start"
-                :data-state="selected === '${entity.name}' ? 'selected' : ''"
-                @click="select('${entity.name}', './views/${entity.perspectiveName}/${entity.name}-manage-list.html')">
-          <i role="img" x-h-lucide data-lucide="settings"></i><span x-text="T('$projectName:${tprefix}.t.${entity.dataName}', '${entity.name}')"></span>
-        </button>
+          <li x-h-list-item>
+            <button x-h-list-item-button :aria-current="selected === '${entity.name}'"
+                    @click="select('${entity.name}', './views/${entity.perspectiveName}/${entity.name}-manage-list.html')">
+              <svg role="presentation" x-h-lucide data-lucide="settings"></svg><span x-text="T('$projectName:${tprefix}.t.${entity.dataName}', '${entity.name}')"></span>
+            </button>
+          </li>
 #end
 #end
+        </ul>
       </div>
     </div>
 
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template
index 61ecf37459e..2a2c1a18ff6 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template
@@ -57,6 +57,7 @@
         "internal": "Internal",
         "internalNote": "Internal note (not visible to the requester)",
         "writeMessage": "Write a message...",
+        "enterToSend": "Enter to send",
         "upload": "Upload",
         "uploading": "Uploading…",
         "add": "Add",
@@ -103,7 +104,6 @@
         "reportFilter": "Report Filter",
         "viewDetails": "View Details",
         "deleteTitle": "Delete {{name}}?",
-        "pageOf": "Page {{page}} / {{total}}",
         "newTitle": "New {{name}}",
         "deleteLine": "Delete line",
         "loadMore": "Load More..."
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
index adc040e26db..c55e34a560d 100644
--- a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -6,6 +6,11 @@
 #set($SQ = "'")
 #set($BS = '\')
 #set($ESCSQ = "${BS}${SQ}")
+## A .form button's "state" is a BlimpKit vocabulary; only a Harmonia x-h-button variant may reach
+## data-variant (an unknown value is silently the default look there, so it is never passed through).
+## The three BlimpKit-only states map to their Harmonia counterparts, the rest share their names.
+#set($buttonVariantAliases = {"emphasized": "primary", "ghost": "outline", "attention": "warning"})
+#set($buttonVariants = ["primary", "positive", "negative", "warning", "information", "outline", "transparent", "link"])
 ## Every author-facing label resolves through this form's own catalog (i18n/<locale>/<form>.form.json,
 ## key <tprefix>.t.<id>), falling back to the English literal baked in here. The id was assigned to
 ## the model by the catalog-emitting generation pass, so nothing is derived at runtime - and a label
@@ -20,28 +25,28 @@
              A relation.field control's model is the resolver-set name/value variable, so e.g. listing
              `customer.name` shows the customer's name here rather than the raw FK id. A number is
              formatted with its pattern (grouped, fixed decimals); other values render as-is. -->
-        <div class="vbox gap-0">
+        <div class="vbox">
           <span x-h-text.muted class="text-xs"#tlabel($el)>$!el.label</span>
 #if($el.controlId == "input-number")
-          <span x-h-text class="text-sm break-words" x-text="fmtNumber(model.$el.model, '$!el.pattern')"></span>
+          <span x-h-text class="text-sm wrap-break-word" x-text="fmtNumber(model.$el.model, '$!el.pattern')"></span>
 #elseif($el.controlId == "input-date" || $el.controlId == "input-datetime-local" || $el.controlId == "input-time" || $el.controlId == "input-month")
-          <span x-h-text class="text-sm break-words" x-text="fmtDate(model.$el.model, '$el.controlId')"></span>
+          <span x-h-text class="text-sm wrap-break-word" x-text="fmtDate(model.$el.model, '$el.controlId')"></span>
 #else
-          <span x-h-text class="text-sm break-words" x-text="(model.$el.model === null || model.$el.model === undefined || model.$el.model === '') ? '—' : model.$el.model"></span>
+          <span x-h-text class="text-sm wrap-break-word" x-text="(model.$el.model === null || model.$el.model === undefined || model.$el.model === '') ? '—' : model.$el.model"></span>
 #end
         </div>
 #elseif($el.controlId == "header")
-        <h1 x-h-text.h3 class="mb-2 col-span-full text-2xl font-semibold tracking-tight"#tlabel($el)>$!el.label</h1>
+        <h1 x-h-text.h3 class="mb-2 col-span-12 text-2xl font-semibold tracking-tight"#tlabel($el)>$!el.label</h1>
 #elseif($el.controlId == "paragraph")
-        <p x-h-text class="col-span-full"#tlabel($el)>$!el.label</p>
+        <p x-h-text class="col-span-12"#tlabel($el)>$!el.label</p>
 #elseif($el.controlId == "line")
-        <hr x-h-separator class="col-span-full" />
+        <hr x-h-separator class="col-span-12" />
 #elseif($el.controlId == "spacer")
         <div class="flex-1"></div>
 #elseif($el.controlId == "link")
         <a x-h-button data-variant="link" href="$!el.url"#tlabel($el)>$!el.label</a>
 #elseif($el.controlId == "input-textarea")
-        <div x-h-field class="col-span-full">
+        <div x-h-field class="col-span-12">
           <label x-h-label for="$el.id"#tlabel($el)>$!el.label</label>
           <textarea x-h-textarea id="$el.id" rows="4" x-model="model.$el.model"#if($el.readonly) readonly#end></textarea>
         </div>
@@ -64,12 +69,12 @@
                appends a span that owns the interaction), so an unselectable relation renders as text.
                On a task form the read-only branch above already claimed it; this is the non-task case,
                where there is no process context and the model holds whatever the form was given. -->
-          <span x-h-text class="text-sm break-words" x-text="relationLabel('$el.model')"></span>
+          <span x-h-text class="text-sm wrap-break-word" x-text="relationLabel('$el.model')"></span>
 #else
-          <div x-h-select data-filter="contains">
+          <div x-h-select>
             <input x-h-select-input id="$el.id" x-model="model.$el.model" />
             <div x-h-select-content>
-              <div x-h-select-search></div>
+              <div x-h-select-search data-filter="contains"></div>
               <div x-h-select-list>
                 <template x-for="opt in (relationOptions['$el.model'] || [])" :key="opt.value">
                   <div x-h-select-option="opt.label" :data-value="String(opt.value)"></div>
@@ -134,7 +139,7 @@
           <input x-h-input type="color" id="$el.id" x-model="model.$el.model"#if($el.readonly) readonly#end />
         </div>
 #elseif($el.controlId == "button")
-        <button x-h-button#if($el.type == "emphasized") data-variant="primary"#elseif($el.type) data-variant="$el.type"#end type="button"#if($el.callback) @click="run('$el.callback')"#elseif($el.isSubmit) @click="submit()"#end#tlabel($el)>$!el.label</button>
+        <button x-h-button#if($buttonVariantAliases.containsKey($el.type)) data-variant="$buttonVariantAliases.get($el.type)"#elseif($buttonVariants.contains($el.type)) data-variant="$el.type"#end type="button"#if($el.callback) @click="run('$el.callback')"#elseif($el.isSubmit) @click="submit()"#end#tlabel($el)>$!el.label</button>
 #else
         <!-- TODO (forms v2): widget '$!el.controlId' not yet rendered in Harmonia -->
         <div x-h-field>
@@ -203,13 +208,13 @@
         <div x-h-card-content style="flex: 1 1 auto; display: flex; flex-direction: column;">
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-3">
 #if($metadata.steps && $metadata.steps.size() > 0)
-        <hr class="col-span-full mb-4" style="border: none; border-top: 1px solid var(--border);" />
+        <hr class="col-span-12 mb-4" style="border: none; border-top: 1px solid var(--border);" />
         <!-- Document status flow, extracted from the intent (the bound entity's function: EntityStatus
              relation -> the status entity's non-terminal seeds, in order). Read-only (non-interactive);
              active step = the current status name (model.$metadata.statusVar).
              `label` stays the untranslated seed name because it is what the record's status value is
              MATCHED against; `title` is the same name resolved through the catalog and is what shows. -->
-        <nav x-h-step-indicator="([#foreach($s in $metadata.steps){ label: '$s.label.replace($SQ, $ESCSQ)' }#if($foreach.hasNext), #end#end]).findIndex(s => s.label === model.${metadata.statusVar}) + 1" data-orientation="horizontal" class="col-span-full mb-4">
+        <nav x-h-step-indicator="([#foreach($s in $metadata.steps){ label: '$s.label.replace($SQ, $ESCSQ)' }#if($foreach.hasNext), #end#end]).findIndex(s => s.label === model.${metadata.statusVar}) + 1" data-orientation="horizontal" class="col-span-12 mb-4">
           <template x-for="(step, i) in [#foreach($s in $metadata.steps){ label: '$s.label.replace($SQ, $ESCSQ)', title: #if($s.translation)T('${projectName}:${tprefix}.t.${s.translation.replace($SQ, $ESCSQ)}', '$s.label.replace($SQ, $ESCSQ)')#{else}'$s.label.replace($SQ, $ESCSQ)'#end, description: #if($s.description)'$s.description.replace($SQ, $ESCSQ)'#{else}''#end }#if($foreach.hasNext), #end#end]" :key="step.label">
             <div x-h-step-indicator-item="i + 1">
               <button x-h-step-indicator-trigger data-non-interactive="true" type="button">
@@ -223,13 +228,13 @@
             </div>
           </template>
         </nav>
-        <hr class="col-span-full mb-4" style="border: none; border-top: 1px solid var(--border);" />
+        <hr class="col-span-12 mb-4" style="border: none; border-top: 1px solid var(--border);" />
 #end
 #foreach($element in $form)
 #if($element.controlId == "container-hbox")
 ## action row: rendered as the bottom-pinned footer below (outside the detail grid)
 #elseif($element.controlId == "container-vbox")
-        <div class="vbox gap-3 col-span-full">
+        <div class="vbox gap-3 col-span-12">
 #foreach($child in $element.children)
 #leaf($child)
 #end
@@ -254,13 +259,13 @@
       <div x-h-field-group>
 #foreach($element in $form)
 #if($element.controlId == "container-hbox")
-        <div class="hbox gap-3 items-end col-span-full mt-2">
+        <div class="hbox gap-3 items-end col-span-12 mt-2">
 #foreach($child in $element.children)
 #leaf($child)
 #end
         </div>
 #elseif($element.controlId == "container-vbox")
-        <div class="vbox gap-3 col-span-full">
+        <div class="vbox gap-3 col-span-12">
 #foreach($child in $element.children)
 #leaf($child)
 #end
diff --git a/components/template/template-html/src/main/resources/META-INF/dirigible/template-html/index.html.template b/components/template/template-html/src/main/resources/META-INF/dirigible/template-html/index.html.template
index 2cf32c54549..d72993876cf 100644
--- a/components/template/template-html/src/main/resources/META-INF/dirigible/template-html/index.html.template
+++ b/components/template/template-html/src/main/resources/META-INF/dirigible/template-html/index.html.template
@@ -16,8 +16,9 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <style>
       /* Harmonia themes `body`; theme `html` too so the area below short content is not left with
-         the browser default. The light/dark choice itself is applied by harmonia.min.js from the
-         shared `codbex.harmonia.colorMode` key, so this page follows the platform theme. */
+         the browser default. The colour scheme itself is applied by harmonia.min.js - the saved
+         choice, or the OS scheme in `auto` mode - which keeps every same-origin frame and tab in
+         sync, so this page follows the platform theme with no script of its own. */
       html { background-color: var(--background); color: var(--foreground); }
       body { min-height: 100vh; }
       [x-cloak] { display: none !important; }
@@ -28,7 +29,7 @@
 
     <div x-h-toolbar>
       <span x-h-toolbar-title class="shrink-0">Explore</span>
-      <div x-h-select class="w-56">
+      <div x-h-select style="width: 14rem">
         <input x-h-select-input x-model="selected" placeholder="Choose a collection" />
         <div x-h-select-content>
           <div x-h-select-list>
@@ -40,7 +41,7 @@
       </div>
       <div class="flex-1"></div>
       <button x-h-button data-variant="transparent" data-size="icon-sm" aria-label="Reload" @click="load()">
-        <i role="img" x-h-lucide data-lucide="refresh-cw"></i>
+        <svg role="presentation" x-h-lucide data-lucide="refresh-cw"></svg>
       </button>
     </div>
 
@@ -69,7 +70,7 @@
                 </template>
               </tr>
             </template>
-            <tr x-show="rows.length === 0">
+            <tr x-h-table-row x-show="rows.length === 0">
               <td x-h-table-cell :colspan="columns().length" class="text-center">No data</td>
             </tr>
           </tbody>
diff --git a/npm/test/src/form.js b/npm/test/src/form.js
index 19b3c1eafe0..34202c70d4a 100644
--- a/npm/test/src/form.js
+++ b/npm/test/src/form.js
@@ -16,7 +16,7 @@ export async function fillField(page, field, value, opts = {}) {
   await input.fill(String(value));
 }
 
-// The x-h-select directive hides its input and builds a span[role=combobox] trigger
+// The x-h-select directive hides its input and builds a button[role=combobox] trigger
 // labelled by the field label; options carry role=option.
 export async function pickDropdown(page, relation, optionText) {
   // Anchored prefix match: the combobox accessible name is the label plus the placeholder or
diff --git a/pom.xml b/pom.xml
index f0c64917c5f..c99dc939e9a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -251,12 +251,12 @@
         <ag-grid.version>27.1.0</ag-grid.version>
         <papaparse.version>5.5.3</papaparse.version>
         <bpmn-visualization.version>0.47.0</bpmn-visualization.version>
-        <i18next.version>25.3.0</i18next.version>
-        <alpinejs.version>3.15.11</alpinejs.version>
-        <harmonia.version>2.14.2</harmonia.version>
+        <i18next.version>26.3.6</i18next.version>
+        <alpinejs.version>3.16.3</alpinejs.version>
+        <harmonia.version>3.1.2</harmonia.version>
         <opensans.version>5.2.7</opensans.version>
-        <lucide.version>1.8.0</lucide.version>
-        <pinecone-router.version>7.5.2</pinecone-router.version>
+        <lucide.version>1.20.0</lucide.version>
+        <pinecone-router.version>7.6.0</pinecone-router.version>
         <!-- Tests -->
         <testcontainers.version>2.0.5</testcontainers.version>
         <selenide.version>7.18.1</selenide.version>
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaContractIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaContractIT.java
new file mode 100644
index 00000000000..e059b9d4ea2
--- /dev/null
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaContractIT.java
@@ -0,0 +1,476 @@
+/*
+ * Copyright (c) 2010-2026 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors SPDX-License-Identifier: EPL-2.0
+ */
+package org.eclipse.dirigible.integration.tests.api;
+
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import java.io.File;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
+import java.util.ArrayList;
+import java.util.Enumeration;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+import java.util.jar.JarEntry;
+import java.util.jar.JarFile;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+import org.eclipse.dirigible.components.ide.template.service.model.GeneratedFile;
+import org.eclipse.dirigible.components.ide.template.service.model.ModelGenerationService;
+import org.eclipse.dirigible.components.ide.workspace.domain.Project;
+import org.eclipse.dirigible.components.ide.workspace.domain.Workspace;
+import org.eclipse.dirigible.components.ide.workspace.service.WorkspaceService;
+import org.eclipse.dirigible.tests.base.IntegrationTest;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+
+/**
+ * Every Harmonia surface conforms to the pinned Harmonia release, as the release itself describes
+ * it.
+ *
+ * <p>
+ * Harmonia fails in one way nothing else catches: a directive it does not register, a utility class
+ * it does not ship, a button variant it does not know or an icon placeholder it replaces (so the
+ * Alpine bindings on it throw) all render SOMETHING - the element stays unstyled, the class does
+ * nothing, the variant falls back to the default look - and no console, no server log and no DOM
+ * assertion says so. An audit found dozens of such tokens across the shells and the generated
+ * application templates, all of them green through every build.
+ *
+ * <p>
+ * So the contract is read out of the pinned webjar rather than restated here: the directive
+ * registry out of {@code dist/harmonia.min.js} (plus the Lucide plugin), the utility allowlist out
+ * of the skill's {@code references/utility-classes.md}, both shipped inside the jar the platform
+ * serves. A Harmonia bump that removes a directive or a class fails this test naming the page and
+ * the token, instead of quietly degrading a page somewhere in the fleet.
+ *
+ * <p>
+ * Two kinds of input: every Harmonia page on the classpath (the platform shells, the shared shell
+ * views, the tenant picker) and the RENDERED output of the generated-application templates over the
+ * {@code ModelGenerationIT} fixtures - rendered, so Velocity noise never reaches the scan and what
+ * is checked is what a generated application really serves.
+ */
+class HarmoniaContractIT extends IntegrationTest {
+
+    /** Classpath patterns of the Harmonia pages; a page is one that carries at least one directive. */
+    private static final List<String> PAGE_PATTERNS =
+            List.of("classpath*:META-INF/dirigible/application/**/*.html", "classpath*:META-INF/dirigible/admin/**/*.html",
+                    "classpath*:META-INF/dirigible/personal/**/*.html", "classpath*:META-INF/dirigible/partner/**/*.html",
+                    "classpath*:META-INF/dirigible/monitoring/**/*.html", "classpath*:META-INF/dirigible/database/**/*.html",
+                    "classpath*:META-INF/dirigible/builder/**/*.html", "classpath*:META-INF/dirigible/home/**/*.html",
+                    "classpath*:META-INF/dirigible/application-core/shell/views/*.html", "classpath*:static/tenant-selection.html");
+
+    /** The shared shell runtime's stylesheet, loaded by every shell and every generated application. */
+    private static final String CORE_CSS = "META-INF/dirigible/application-core/shell/css/app.css";
+
+    /** Fewer pages than this means a pattern stopped matching, not that the fleet shrank. */
+    private static final int MINIMUM_PAGES = 20;
+
+    /** The template rendering the full application stack. */
+    private static final String TEMPLATE_APPLICATION = "template-application-ui-harmonia-java/template/template.js";
+
+    /** The template rendering a form. */
+    private static final String TEMPLATE_FORM = "template-form-builder-harmonia/template/template.js";
+
+    /** The template rendering a standalone report. */
+    private static final String TEMPLATE_REPORT = "template-application-ui-harmonia-java/template/template-report-file.js";
+
+    /** The project every fixture is rendered in. */
+    private static final String PROJECT = "harmonia-contract";
+
+    /** One fixture rendered with one template. */
+    private record Case(String fixture, String templateId) {
+    }
+
+    /** The fixtures whose rendered pages are scanned: every view family the templates emit. */
+    private static final List<Case> CASES =
+            List.of(new Case("sales-order.model", TEMPLATE_APPLICATION), new Case("views.model", TEMPLATE_APPLICATION),
+                    new Case("leave-request.form", TEMPLATE_FORM), new Case("revenue.report", TEMPLATE_REPORT));
+
+    /** A directive name as the bundle registers it, {@code "h-button"}. */
+    private static final Pattern REGISTERED_DIRECTIVE = Pattern.compile("\"(h-[a-z][a-z0-9-]*)\"");
+
+    /**
+     * A directive as a page writes it, modifier and value excluded: {@code x-h-text.muted} is read as
+     * {@code h-text}.
+     */
+    private static final Pattern USED_DIRECTIVE = Pattern.compile("\\bx-(h-[a-z][a-z0-9-]*)");
+
+    /** A fenced code block of the utility reference. */
+    private static final Pattern FENCED_BLOCK = Pattern.compile("```\\n(.*?)\\n```", Pattern.DOTALL);
+
+    /** A class selector in a stylesheet, {@code .name}. */
+    private static final Pattern CSS_CLASS = Pattern.compile("\\.(-?[_a-zA-Z][\\w-]*)");
+
+    private static final Pattern HTML_COMMENT = Pattern.compile("<!--.*?-->", Pattern.DOTALL);
+
+    private static final Pattern STYLE_BLOCK = Pattern.compile("<style[^>]*>(.*?)</style>", Pattern.DOTALL);
+
+    private static final Pattern CSS_COMMENT = Pattern.compile("/\\*.*?\\*/", Pattern.DOTALL);
+
+    /**
+     * A static class attribute - not {@code :class}, not {@code x-bind:class}, not {@code data-class}.
+     */
+    private static final Pattern STATIC_CLASS = Pattern.compile("(?<![:\\w-])class=\"([^\"]*)\"");
+
+    /** A bound class attribute, whose expression holds the classes as quoted strings. */
+    private static final Pattern BOUND_CLASS = Pattern.compile("(?::|x-bind:)class=\"([^\"]*)\"");
+
+    private static final Pattern QUOTED = Pattern.compile("'([^']*)'");
+
+    /**
+     * A comparison operator right before or right after a quoted string: the string is a value, not a
+     * class.
+     */
+    private static final Pattern COMPARISON_BEFORE = Pattern.compile("[=!]==?\\s*$");
+
+    private static final Pattern COMPARISON_AFTER = Pattern.compile("^\\s*[=!]==?");
+
+    /** A Lucide placeholder on an element the plugin replaces - every Alpine binding on it throws. */
+    private static final Pattern REPLACED_PLACEHOLDER = Pattern.compile("<i\\b[^>]*\\bx-h-lucide\\b");
+
+    private static final Pattern TAG = Pattern.compile("<(\\w+)\\b([^>]*)>");
+
+    /** A static variant attribute inside a tag's attribute list. */
+    private static final Pattern STATIC_VARIANT = Pattern.compile("(?<![:\\w-])data-variant=\"([^\"]*)\"");
+
+    private static final Set<String> BUTTON_VARIANTS =
+            Set.of("default", "primary", "positive", "negative", "warning", "information", "outline", "transparent", "link");
+
+    private static final Set<String> BADGE_VARIANTS = Set.of("primary", "positive", "negative", "warning", "information", "outline");
+
+    /** The breakpoint prefixes the utility reference declares for its responsive sections. */
+    private static final List<String> BREAKPOINTS = List.of("sm", "md", "lg", "xl");
+
+    @Autowired
+    private WorkspaceService workspaceService;
+
+    @Autowired
+    private ModelGenerationService modelGenerationService;
+
+    /** What the pinned release ships: the directive names and the utility classes. */
+    private record Contract(Set<String> directives, Set<String> classes) {
+    }
+
+    /**
+     * One test method on purpose: the base class discards the application context after each method,
+     * and every finding names its page and its token, which is what a diagnosis needs.
+     */
+    @Test
+    void everyHarmoniaSurfaceUsesOnlyWhatThePinnedReleaseShips() throws IOException {
+        Contract contract = readContract();
+        Set<String> coreClasses = cssClasses(readClasspath(CORE_CSS));
+
+        List<String> problems = new ArrayList<>();
+        int pages = 0;
+        PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
+        for (String pattern : PAGE_PATTERNS) {
+            for (Resource resource : resolver.getResources(pattern)) {
+                String content = read(resource);
+                if (!content.contains("x-h-")) {
+                    continue; // not a Harmonia page (an AngularJS perspective sharing the folder name)
+                }
+                pages++;
+                Set<String> defined = new HashSet<>(coreClasses);
+                defined.addAll(cssClasses(readClasspath(moduleStylesheet(resource))));
+                problems.addAll(check(resource.getURL()
+                                              .getPath(),
+                        content, contract, defined));
+            }
+        }
+        assertTrue(pages >= MINIMUM_PAGES, "Only " + pages + " Harmonia pages were found on the classpath - has a shell moved?");
+
+        for (Case testCase : CASES) {
+            problems.addAll(checkRendered(testCase, contract, coreClasses));
+        }
+
+        assertTrue(problems.isEmpty(), () -> "Harmonia " + problems.size() + " contract violation(s):\n" + String.join("\n", problems));
+    }
+
+    /**
+     * Renders one fixture and scans every page it produced, with the stylesheets it produced as the
+     * page-defined classes.
+     */
+    private List<String> checkRendered(Case testCase, Contract contract, Set<String> coreClasses) throws IOException {
+        String workspace = ("harmonia-contract-" + testCase.fixture()).replaceAll("[^a-z0-9-]", "-");
+        String fixture = readClasspath("ModelGenerationIT/" + testCase.fixture());
+        assertTrue(fixture != null, "Missing fixture ModelGenerationIT/" + testCase.fixture());
+        seed(workspace, testCase.fixture(), fixture);
+        List<GeneratedFile> rendered =
+                modelGenerationService.render(workspace, PROJECT, testCase.fixture(), testCase.templateId(), new LinkedHashMap<>());
+
+        Set<String> defined = new HashSet<>(coreClasses);
+        for (GeneratedFile file : rendered) {
+            if (file.path()
+                    .endsWith(".css")) {
+                defined.addAll(cssClasses(file.content()));
+            }
+        }
+        List<String> problems = new ArrayList<>();
+        int pages = 0;
+        for (GeneratedFile file : rendered) {
+            if (file.path()
+                    .endsWith(".html")) {
+                pages++;
+                problems.addAll(check(testCase.fixture() + " -> " + file.path(), file.content(), contract, defined));
+            }
+        }
+        if (pages == 0) {
+            problems.add("[" + testCase.fixture() + " with " + testCase.templateId() + "] rendered no page at all");
+        }
+        return problems;
+    }
+
+    /** Every violation on one page, each naming the page and the token. */
+    private static List<String> check(String page, String rawContent, Contract contract, Set<String> definedClasses) {
+        String content = HTML_COMMENT.matcher(rawContent)
+                                     .replaceAll("");
+        Set<String> defined = new HashSet<>(definedClasses);
+        Matcher style = STYLE_BLOCK.matcher(content);
+        while (style.find()) {
+            defined.addAll(cssClasses(style.group(1)));
+        }
+        List<String> problems = new ArrayList<>();
+
+        Matcher directive = USED_DIRECTIVE.matcher(content);
+        Set<String> reported = new HashSet<>();
+        while (directive.find()) {
+            String name = directive.group(1);
+            if (!contract.directives()
+                         .contains(name)
+                    && reported.add(name)) {
+                problems.add(page + ": x-" + name + " is not a directive the pinned Harmonia registers");
+            }
+        }
+
+        if (REPLACED_PLACEHOLDER.matcher(content)
+                                .find()) {
+            problems.add(page + ": an <i x-h-lucide> placeholder - the Lucide plugin replaces the element, so every Alpine binding on it"
+                    + " throws and aborts the walk; use <svg x-h-lucide>");
+        }
+
+        Matcher staticClass = STATIC_CLASS.matcher(content);
+        while (staticClass.find()) {
+            for (String token : staticClass.group(1)
+                                           .trim()
+                                           .split("\\s+")) {
+                checkClass(page, token, contract, defined, problems);
+            }
+        }
+        Matcher boundClass = BOUND_CLASS.matcher(content);
+        while (boundClass.find()) {
+            String expression = boundClass.group(1);
+            Matcher quoted = QUOTED.matcher(expression);
+            while (quoted.find()) {
+                if (COMPARISON_BEFORE.matcher(expression.substring(0, quoted.start()))
+                                     .find()
+                        || COMPARISON_AFTER.matcher(expression.substring(quoted.end()))
+                                           .find()) {
+                    continue; // a compared value, not a class
+                }
+                for (String token : quoted.group(1)
+                                          .trim()
+                                          .split("\\s+")) {
+                    checkClass(page, token, contract, defined, problems);
+                }
+            }
+        }
+
+        Matcher tag = TAG.matcher(content);
+        while (tag.find()) {
+            String attributes = tag.group(2);
+            Matcher variant = STATIC_VARIANT.matcher(attributes);
+            if (!variant.find()) {
+                continue;
+            }
+            if (attributes.matches("(?s).*\\bx-h-button\\b.*") && !BUTTON_VARIANTS.contains(variant.group(1))) {
+                problems.add(page + ": x-h-button data-variant=\"" + variant.group(1) + "\" is not a Harmonia button variant");
+            }
+            if (attributes.matches("(?s).*\\bx-h-badge\\b.*") && !BADGE_VARIANTS.contains(variant.group(1))) {
+                problems.add(page + ": x-h-badge data-variant=\"" + variant.group(1) + "\" is not a Harmonia badge variant");
+            }
+        }
+        return problems;
+    }
+
+    /**
+     * A class is fine when the release ships it or the page / its module / the shared runtime defines
+     * it.
+     */
+    private static void checkClass(String page, String token, Contract contract, Set<String> defined, List<String> problems) {
+        if (token.isEmpty() || contract.classes()
+                                       .contains(token)
+                || defined.contains(token)) {
+            return;
+        }
+        problems.add(page + ": class [" + token + "] is neither a utility the pinned Harmonia ships nor a class this page defines");
+    }
+
+    /**
+     * Reads the contract out of the {@code codbex__harmonia} webjar on the test classpath: the
+     * directive registry from the two bundles and the utility allowlist from the skill's reference.
+     */
+    private static Contract readContract() throws IOException {
+        Map<String, String> entries = readWebjar(
+                List.of("/dist/harmonia.min.js", "/dist/harmonia-lucide.min.js", "/skills/harmonia/references/utility-classes.md"));
+        Set<String> directives = new HashSet<>();
+        for (String bundle : List.of("/dist/harmonia.min.js", "/dist/harmonia-lucide.min.js")) {
+            Matcher registered = REGISTERED_DIRECTIVE.matcher(entries.get(bundle));
+            while (registered.find()) {
+                directives.add(registered.group(1));
+            }
+        }
+        assertTrue(directives.size() > 200,
+                "Only " + directives.size() + " directives read out of the Harmonia bundle - has its shape changed?");
+        return new Contract(directives, utilityClasses(entries.get("/skills/harmonia/references/utility-classes.md")));
+    }
+
+    /**
+     * The utility reference lists five fenced blocks: the classes taking the {@code !} suffix, the
+     * classes taking a min-width breakpoint prefix, the classes taking a max-width one, Harmonia's own
+     * utilities and the Tailwind subset. Each block is recognised by a token it is known to hold, so a
+     * reordered document fails here rather than silently accepting the wrong classes.
+     */
+    private static Set<String> utilityClasses(String reference) {
+        List<List<String>> blocks = new ArrayList<>();
+        Matcher block = FENCED_BLOCK.matcher(reference);
+        while (block.find()) {
+            blocks.add(List.of(block.group(1)
+                                    .trim()
+                                    .split("\\s+")));
+        }
+        assertTrue(blocks.size() == 5, "utility-classes.md holds " + blocks.size() + " code blocks, not the five the parser knows");
+        List<String> important = blocks.get(0);
+        List<String> responsive = blocks.get(1);
+        List<String> maxResponsive = blocks.get(2);
+        List<String> harmoniaSpecific = blocks.get(3);
+        List<String> tailwind = blocks.get(4);
+        assertTrue(
+                important.contains("w-full") && responsive.contains("grid-cols-1") && maxResponsive.contains("rounded-none")
+                        && harmoniaSpecific.contains("hbox") && tailwind.contains("wrap-anywhere"),
+                "utility-classes.md changed shape - its code blocks are not in the order the parser reads them");
+
+        Set<String> classes = new HashSet<>(harmoniaSpecific);
+        classes.addAll(tailwind);
+        for (String name : important) {
+            classes.add(name + "!");
+        }
+        for (String breakpoint : BREAKPOINTS) {
+            for (String name : responsive) {
+                classes.add(breakpoint + ":" + name);
+            }
+            for (String name : maxResponsive) {
+                classes.add("max-" + breakpoint + ":" + name);
+            }
+        }
+        return classes;
+    }
+
+    /**
+     * Reads entries out of the {@code codbex__harmonia} webjar found on {@code java.class.path}. Its
+     * resource paths carry the version, so an entry is located by its tail rather than named outright.
+     */
+    private static Map<String, String> readWebjar(List<String> tails) throws IOException {
+        for (String entry : System.getProperty("java.class.path")
+                                  .split(File.pathSeparator)) {
+            if (!new File(entry).getName()
+                                .startsWith("codbex__harmonia")) {
+                continue;
+            }
+            Map<String, String> found = new HashMap<>();
+            try (JarFile jar = new JarFile(entry)) {
+                Enumeration<JarEntry> entries = jar.entries();
+                while (entries.hasMoreElements()) {
+                    JarEntry candidate = entries.nextElement();
+                    for (String tail : tails) {
+                        if (candidate.getName()
+                                     .endsWith(tail)) {
+                            try (InputStream content = jar.getInputStream(candidate)) {
+                                found.put(tail, new String(content.readAllBytes(), StandardCharsets.UTF_8));
+                            }
+                        }
+                    }
+                }
+            }
+            for (String tail : tails) {
+                assertTrue(found.containsKey(tail), "The codbex__harmonia webjar [" + entry + "] carries no " + tail);
+            }
+            return found;
+        }
+        throw new IllegalStateException("The codbex__harmonia webjar is not on the test classpath");
+    }
+
+    /**
+     * The stylesheet of the module a page belongs to: {@code META-INF/dirigible/<module>/css/app.css},
+     * the shared runtime's own living one level deeper. A page outside a module (the tenant picker) has
+     * none.
+     */
+    private static String moduleStylesheet(Resource resource) throws IOException {
+        String path = resource.getURL()
+                              .getPath();
+        int start = path.indexOf("META-INF/dirigible/");
+        if (start < 0) {
+            return null;
+        }
+        String module = path.substring(start + "META-INF/dirigible/".length())
+                            .split("/")[0];
+        return "META-INF/dirigible/" + module + ("application-core".equals(module) ? "/shell" : "") + "/css/app.css";
+    }
+
+    private static Set<String> cssClasses(String stylesheet) {
+        Set<String> classes = new HashSet<>();
+        if (stylesheet == null) {
+            return classes;
+        }
+        Matcher selector = CSS_CLASS.matcher(CSS_COMMENT.matcher(stylesheet)
+                                                        .replaceAll(""));
+        while (selector.find()) {
+            classes.add(selector.group(1));
+        }
+        return classes;
+    }
+
+    /**
+     * Seeds a fixture into the case's own project, creating the workspace and the project as needed.
+     */
+    private void seed(String workspace, String fixture, String content) {
+        Workspace workspaceObject = workspaceService.existsWorkspace(workspace) ? workspaceService.getWorkspace(workspace)
+                : workspaceService.createWorkspace(workspace);
+        Project projectObject = workspaceObject.getProject(PROJECT);
+        if (projectObject == null || !projectObject.exists()) {
+            projectObject = workspaceObject.createProject(PROJECT);
+        }
+        projectObject.createFile(fixture, content.getBytes(StandardCharsets.UTF_8));
+    }
+
+    private static String read(Resource resource) throws IOException {
+        try (InputStream content = resource.getInputStream()) {
+            return new String(content.readAllBytes(), StandardCharsets.UTF_8);
+        }
+    }
+
+    /** A classpath resource's content, or {@code null} when there is no such resource. */
+    private static String readClasspath(String path) throws IOException {
+        if (path == null) {
+            return null;
+        }
+        try (InputStream content = HarmoniaContractIT.class.getClassLoader()
+                                                           .getResourceAsStream(path)) {
+            return content == null ? null : new String(content.readAllBytes(), StandardCharsets.UTF_8);
+        }
+    }
+}
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEmissionCoverageIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEmissionCoverageIT.java
index 62f9b9e8c8c..620ceba2c51 100644
--- a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEmissionCoverageIT.java
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEmissionCoverageIT.java
@@ -568,7 +568,7 @@ class IntentEmissionCoverageIT extends IntegrationTest {
                   - { name: Status, kind: manyToOne, to: EntryStatus, function: EntityStatus, init: 1 }
 
               # documentItemsLayout: chat - the document master's line-items child renders as a
-              # conversation thread (x-h-chat bubbles + a composer) instead of the editable table;
+              # conversation thread (x-h-bubble messages + a composer) instead of the editable table;
               # the body maps to the messageBody field, author/timestamp to the child's audit columns.
               # The personal owner makes it a personal root too: the PERSONAL document must render
               # the SAME chat thread (never the generic items table), through the personal items
@@ -2856,15 +2856,15 @@ private void assertEmission() {
 
         // documentItemsLayout: chat - the .model marker is resolved (body property from the child's
         // messageBody field), and the Harmonia document view + page render the items pane as an
-        // x-h-chat thread with an append-message composer instead of the editable table.
+        // x-h-bubble thread with an append-message composer instead of the editable table.
         String intentModel = contentOf("emission.model");
         assertTrue(intentModel.contains("\"documentItemsLayout\": \"chat\""), "documentItemsLayout: chat must reach the .model");
         assertTrue(intentModel.contains("\"chatBodyProperty\": \"Body\""), "the chat body property must be resolved into the .model");
         assertTrue(intentModel.contains("\"chatInternalProperty\": \"Internal\""),
                 "the chat internal-flag property must be resolved into the .model");
-        // The thread is composed from shipped Harmonia primitives (a role="log" bubble list + a
-        // textarea composer bound to chatDraft) - the x-h-chat component is a later swap-in (TODO in
-        // the template), so assert the primitives that render the chat, not that directive.
+        // The thread is composed from shipped Harmonia components (a role="log" list of x-h-bubble
+        // messages + an input-group composer whose textarea binds chatDraft), so assert the
+        // primitives that render the chat rather than one directive.
         String ticketDoc = contentOf("gen/emission/views/Ticket/Ticket-document.html");
         assertTrue(ticketDoc.contains("role=\"log\""),
                 "documentItemsLayout: chat must emit the conversation thread (role=log) into the document view");
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/MonitoringShellIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/MonitoringShellIT.java
index aa872a8b1dd..54362d79902 100644
--- a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/MonitoringShellIT.java
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/MonitoringShellIT.java
@@ -9,19 +9,39 @@
  */
 package org.eclipse.dirigible.integration.tests.ui.tests;
 
+import static com.codeborne.selenide.CollectionCondition.size;
+import static com.codeborne.selenide.Condition.attribute;
+import static com.codeborne.selenide.Condition.visible;
+import static io.restassured.RestAssured.given;
+
+import java.nio.charset.StandardCharsets;
+import java.time.Duration;
+
 import org.eclipse.dirigible.commons.config.Configuration;
+import org.eclipse.dirigible.components.initializers.synchronizer.SynchronizationProcessor;
+import org.eclipse.dirigible.repository.api.IRepository;
+import org.eclipse.dirigible.repository.api.IRepositoryStructure;
 import org.eclipse.dirigible.tests.base.UserInterfaceIntegrationTest;
 import org.eclipse.dirigible.tests.framework.browser.HtmlElementType;
+import org.eclipse.dirigible.tests.framework.restassured.RestAssuredExecutor;
+import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.test.annotation.DirtiesContext;
 
+import com.codeborne.selenide.Selenide;
+
+import io.restassured.http.ContentType;
+
 /**
  * Smoke test for the Monitoring shell. It asserts what only a real browser can: that the Harmonia +
  * Alpine bootstrap completed and each page rendered content produced by its store.
  * <p>
- * This matters more than it looks - a single mistake in the markup (an Alpine binding on an
- * {@code <i x-h-lucide>}, for instance) aborts Alpine's walk with no DOM or server-side symptom,
- * and every binding below that node silently stays raw markup.
+ * This matters more than it looks - a single mistake in the markup (an Alpine binding on a Lucide
+ * placeholder the plugin replaces, or a tab strip missing the structure Harmonia requires) aborts
+ * Alpine's walk with no DOM or server-side symptom, and every binding below that node silently
+ * stays raw markup.
  * <p>
  * The page roots carry a stable id, so the assertions hold whether or not the instance happens to
  * have processes, jobs or queues deployed.
@@ -38,6 +58,34 @@ public class MonitoringShellIT extends UserInterfaceIntegrationTest {
      */
     private static final String DIRIGIBLE_PRODUCT_NAME = "DIRIGIBLE_PRODUCT_NAME";
 
+    private static final String PROCESS_PROJECT = "monitoring-shell-it";
+
+    private static final String PROCESS_KEY = "monitoring-shell-it-process";
+
+    private static final String BUSINESS_KEY = PROCESS_KEY + "-key";
+
+    private static final String BPMN_REGISTRY_PATH = IRepositoryStructure.PATH_REGISTRY_PUBLIC + "/" + PROCESS_PROJECT + "/process.bpmn";
+
+    /** The instance list is a store poll away from the page render, so it gets its own budget. */
+    private static final Duration INSTANCE_LIST_TIMEOUT = Duration.ofSeconds(30);
+
+    @Autowired
+    private IRepository repository;
+
+    @Autowired
+    private SynchronizationProcessor synchronizationProcessor;
+
+    @Autowired
+    private RestAssuredExecutor restAssuredExecutor;
+
+    @AfterEach
+    void removeDeployedProcess() {
+        if (repository.hasResource(BPMN_REGISTRY_PATH)) {
+            repository.removeResource(BPMN_REGISTRY_PATH);
+            synchronizationProcessor.forceProcessSynchronizers();
+        }
+    }
+
     @Test
     void overviewRendersTheInstanceState() {
         ide.openPath(MONITORING_PATH);
@@ -64,6 +112,37 @@ void everySectionIsReachable() {
         openSection("system", "The build this instance runs, and the Java virtual machine running it.");
     }
 
+    /**
+     * The instance detail's tab strip only exists once an instance is selected, so no read-only walk
+     * ever reaches it - and Harmonia 3 throws on a tab strip whose tabs are not wrapped in
+     * {@code x-h-tab-item} or name no panel, which leaves the whole detail pane unrendered. A tiny
+     * process with one user task is deployed and started, then selected on the Processes page.
+     * <p>
+     * The same walk asserts the sidebar contract: the active destination announces itself with
+     * {@code aria-current="page"}, which is what {@code x-h-sidebar-menu-nav} derives from the
+     * {@code data-active} flag the shell binds.
+     */
+    @Test
+    void processesRenderTheSelectedInstanceTabs() {
+        deployProcess();
+        startProcess();
+
+        ide.openPath(MONITORING_PATH);
+        browser.clickOnElementById("monitoring-nav-processes");
+        Selenide.$(By.id("monitoring-nav-processes"))
+                .shouldHave(attribute("aria-current", "page"));
+
+        Selenide.$(By.xpath("//*[@id='monitoring-processes-page']//td[normalize-space(.)='" + BUSINESS_KEY + "']"))
+                .shouldBe(visible, INSTANCE_LIST_TIMEOUT)
+                .click();
+        Selenide.$$(By.cssSelector("#monitoring-processes-page [x-h-tab-item]"))
+                .shouldHave(size(3));
+        Selenide.$(By.id("monitoring-process-tab-variables"))
+                .click();
+        Selenide.$(By.id("monitoring-process-panel-variables"))
+                .shouldBe(visible);
+    }
+
     /**
      * The build is the first thing asked of an instance ("what is deployed here?"), so it is asserted
      * on its own: the System page's card, filled from {@code /services/core/version}.
@@ -94,4 +173,38 @@ private void openSection(String section, String expectedText) {
         browser.clickOnElementById("monitoring-nav-" + section);
         browser.assertElementExistsByIdAndContainsText("monitoring-" + section + "-page", expectedText);
     }
+
+    /**
+     * Publishes a one-user-task process straight into the registry and lets the synchronizers deploy
+     * it.
+     */
+    private void deployProcess() {
+        String bpmn = """
+                <?xml version="1.0" encoding="UTF-8"?>
+                <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
+                             xmlns:flowable="http://flowable.org/bpmn"
+                             targetNamespace="http://www.flowable.org/processdef">
+                  <process id="%s" name="Monitoring shell approval" isExecutable="true">
+                    <startEvent id="start"/>
+                    <sequenceFlow id="f1" sourceRef="start" targetRef="approve"/>
+                    <userTask id="approve" name="Approve" flowable:candidateGroups="ADMINISTRATOR"/>
+                    <sequenceFlow id="f2" sourceRef="approve" targetRef="end"/>
+                    <endEvent id="end"/>
+                  </process>
+                </definitions>
+                """.formatted(PROCESS_KEY);
+        repository.createResource(BPMN_REGISTRY_PATH, bpmn.getBytes(StandardCharsets.UTF_8), false, "application/xml", true);
+        synchronizationProcessor.forceProcessSynchronizers();
+    }
+
+    /** Starts an instance that parks on the user task, so the Processes page lists it as running. */
+    private void startProcess() {
+        String body = "{\"processDefinitionKey\":\"" + PROCESS_KEY + "\",\"businessKey\":\"" + BUSINESS_KEY + "\",\"parameters\":\"{}\"}";
+        restAssuredExecutor.execute(() -> given().contentType(ContentType.JSON)
+                                                 .body(body)
+                                                 .when()
+                                                 .post("/services/bpm/bpm-processes/instance")
+                                                 .then()
+                                                 .statusCode(200));
+    }
 }

From 4c3205c04543ec8a78476c0b55433195c0f4ca01 Mon Sep 17 00:00:00 2001
From: StanZGenchev <stan.genchev@codbex.com>
Date: Fri, 11 Sep 2026 18:20:22 +0300
Subject: [PATCH 2/2] Restored vue webjar pins

Signed-off-by: StanZGenchev <stan.genchev@codbex.com>
---
 pom.xml | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/pom.xml b/pom.xml
index d93ac614113..2e164096824 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1056,32 +1056,37 @@
                 <artifactId>strnum</artifactId>
                 <version>2.3.0</version>
             </dependency>
-            <!-- via codbex__harmonia (${harmonia.version}) -->
+            <!-- The Harmonia stack (harmonia.version, alpinejs.version, lucide.version,
+                 pinecone-router.version, i18next.version) is bumped as one. When Harmonia is updated,
+                 update the pins below as well: read the ranges the new webjars declare (their poms) and
+                 pin the stable version each range means. Maven reads npm's "<X.Y.0-0" upper bound as
+                 "below X.Y.0", so an unpinned range can land on a pre-release. -->
+            <!-- via alpinejs (${alpinejs.version}): [3.5.40,3.6.0-0) -->
             <dependency>
                 <groupId>org.webjars.npm</groupId>
-                <artifactId>floating-ui__dom</artifactId>
-                <version>1.8.0</version>
+                <artifactId>vue__reactivity</artifactId>
+                <version>3.5.42</version>
             </dependency>
             <dependency>
                 <groupId>org.webjars.npm</groupId>
-                <artifactId>floating-ui__core</artifactId>
-                <version>1.8.0</version>
+                <artifactId>vue__shared</artifactId>
+                <version>3.5.42</version>
             </dependency>
+            <!-- via codbex__harmonia (${harmonia.version}): [1.8.0,2.0.0-0) -->
             <dependency>
                 <groupId>org.webjars.npm</groupId>
-                <artifactId>floating-ui__utils</artifactId>
-                <version>0.2.12</version>
+                <artifactId>floating-ui__dom</artifactId>
+                <version>1.8.0</version>
             </dependency>
-            <!-- via i18next (${i18next.version}); regenerator-runtime through babel__runtime -->
             <dependency>
                 <groupId>org.webjars.npm</groupId>
-                <artifactId>babel__runtime</artifactId>
-                <version>8.0.0-alpha.6</version>
+                <artifactId>floating-ui__core</artifactId>
+                <version>1.8.0</version>
             </dependency>
             <dependency>
                 <groupId>org.webjars.npm</groupId>
-                <artifactId>regenerator-runtime</artifactId>
-                <version>0.14.1</version>
+                <artifactId>floating-ui__utils</artifactId>
+                <version>0.2.12</version>
             </dependency>
         </dependencies>
     </dependencyManagement>