diff --git a/CLAUDE.md b/CLAUDE.md
index d14d0c1a2d..f8ef919576 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -186,6 +186,19 @@ A single `app.intent` YAML file at a project root is the source of truth one alt
 
 **The general platform line this enshrines:** authoring artifacts (`.edm`, `.model`, `.form`, `.report`, `.intent`) get **workspace editors + an explicit Generate**; only runtime artifacts (`.roles`, `.bpmn`, `.csvim`, `.table`, jobs, listeners, …) get **synchronizers**. Applying the synchronizer hammer to an authoring artifact generates into the registry where no modeler, Projects view, or template can use it — that mistake was made once and reverted; the inventory of synchronizers (grep `extends BaseSynchronizer`) deliberately contains no authoring formats.
 
+## Harmonia runtime UI (`template-application-ui-harmonia-java` + `template-form-builder-harmonia`)
+
+A second runtime UI stack, parallel to the AngularJS/BlimpKit one: generated apps 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 two stacks coexist by URL. `template-application-ui-harmonia-java` (registered on `platform-templates` as "Application - UI (Harmonia) - Java") mirrors `template-application-ui-angular-java` and 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 1.24.1, Lucide 1.8.0, chart.js 4.4.3 — is embedded as **webjars** via `components/resources/application-core` (Pinecone Router has no webjar, so it is vendored under `application-core/.../vendor/`, license-excluded). Developed on PR [#6078](https://github.com/eclipse-dirigible/dirigible/pull/6078).
+
+**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` `code` is framework-neutral now.** `template-form-builder-harmonia` runs the `.form` `code` as the body of `formController(ctx)` (`ctx.{model, params, http, task, notify, close}`), **not** AngularJS `$scope`/`$http`. Existing AngularJS `.form` code must be migrated; `FormIntentGenerator` emitting the neutral form is a follow-up.
+- **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".
+
 ## Native applications (`engine-native-apps`)
 
 User projects can declare a `*.nativeapp` JSON file that turns an external web server — local OS process or remote HTTP(S) endpoint — into a first-class Dirigible artefact, reverse-proxied under `/services/native-apps-proxy/v1/<basePath>/...` with optional Dirigible-managed authentication and role-based access. The whole feature lives in `components/engine/engine-native-apps`.
diff --git a/HARMONIA_RUNTIME_PLAN.md b/HARMONIA_RUNTIME_PLAN.md
new file mode 100644
index 0000000000..05cf0b6f61
--- /dev/null
+++ b/HARMONIA_RUNTIME_PLAN.md
@@ -0,0 +1,421 @@
+# Dirigible runtime on AlpineJS + Harmonia — research & plan
+
+Research and implementation plan for a parallel, fully-embedded runtime UI stack.
+Framework swap only; behaviour parity.
+
+## Goal
+
+Keep the **IDE** (Workbench, Monaco editors, entity/form/intent modelers) on **AngularJS + BlimpKit**.
+Move the **runtime** — generated *and* custom apps, plus their **shell/dashboard**, views, forms and
+BPM task forms — onto a self-contained **AlpineJS + Harmonia** stack, with SAP-icons replaced by
+Harmonia/Unicons, and the whole stack **built into the fat jar** exactly as AngularJS + BlimpKit is
+today. No new behaviour — same flows, same REST backend, same artifacts.
+
+## Verdict
+
+Feasible, and the architecture already permits it — but it is a large, multi-phase initiative, not a
+re-skin. The single biggest lever is that the platform's view↔shell contract is a **framework-agnostic
+message protocol** (`postMessage` hubs) plus **JSON / plain-JS registration**. Keep that protocol as
+the invariant and you can swap *both ends* (shell and views) to Harmonia while the IDE keeps running on
+Angular — and the two stacks can coexist during transition.
+
+The real work is in three places: (1) reimplementing the runtime **shell/renderers** (the *receiving*
+end of the hubs) in Harmonia, (2) a full **view template set** at parity, and (3) a Harmonia **forms**
+runtime. Plus embedding + icons + a couple of genuine Harmonia gaps (split panes).
+
+> **Update after studying the reference implementation.** Two assumptions above are now corrected by a
+> working sample (see the new section **"Reference implementation: codbex-athena-app"** below):
+> Harmonia **does** ship a split component (`x-h-split`) — the split-pane gap is closed — and a full,
+> reusable **Harmonia runtime dashboard/shell already exists** in that repo (sidebar + toolbar +
+> breadcrumb + responsive collapse + theming + a `fetch`-based entity client + a 422 error-mapping form
+> base). That collapses the single biggest cost (Workstream 3 / Phase 1) from "build from scratch" to
+> "adopt and adapt." It also reveals a **different shell architecture** than this plan assumed — a
+> single-page, client-side-routed SPA served as a plain Dirigible web resource, **not** the
+> iframe-per-view + `postMessage`-hub seam. Read that section before committing to the phasing.
+
+## Reference implementation: codbex-athena-app
+
+`github.com/codbex/codbex-athena-app` (the `codbex-athena-app/` project inside it) is a **complete,
+working Alpine + Harmonia runtime application** built exactly the way this initiative needs — and per the
+direction *its dashboard/shell can be adopted directly*, not re-derived. It is a Dirigible project
+(`project.json` with a `guid` + git dependency on `codbex-invoices`; served as a web resource under
+`/services/web/codbex-athena-app/`) and it ships, in its own `.claude/skills/`, an 88 KB Harmonia
+component reference and an Alpine-architecture guide that together encode the conventions below. Treat
+this repo as the canonical pattern source for Workstreams 1–5.
+
+### What it proves / changes vs. the original plan
+
+1. **Split panes are NOT a gap.** Harmonia ships `x-h-split` + `x-h-split-panel`, and athena uses it for
+   the **shell layout itself** — the sidebar/main division is a horizontal split. Real usage from its
+   `index.html`:
+   ```html
+   <div x-h-split class="size-full" data-orientation="horizontal" data-variant="border">
+     <div x-h-split-panel :data-hidden="hiddenPanels.left" data-max="256" data-min="200"
+          data-locked="true" data-gutterless="true" x-ref="sidebarPanel"> … sidebar … </div>
+     <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"`
+   (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:
+   use `x-h-split`.
+
+2. **The runtime dashboard/shell already exists and is reusable.** `js/components/layout/appShell.js` is
+   a single `Alpine.data('app', …)` component providing everything Workstream 3 lists: sidebar nav
+   (`x-h-sidebar` + `x-for` over a `nav` array), a top `x-h-toolbar` with `x-h-breadcrumb` trail derived
+   from the route, a notifications popover, an avatar `x-h-menu` with a light/dark/auto theme submenu, and
+   **responsive collapse** driven by `Harmonia.getBreakpointListener((isNarrow)=>…, 1024)` that physically
+   re-parents the sidebar into an `x-h-sheet` drawer below 1024 px. Adopt this file as the starting shell;
+   the per-app parts that change are just the `nav`, `routeTitles`, and `sections` maps.
+
+3. **The shell architecture is a client-routed SPA, not the iframe+hub seam.** This is the biggest
+   architectural divergence from the plan. athena has **no iframes and no `postMessage` hubs**. It is one
+   HTML page; **Pinecone Router** (v7.5.0, **hash mode**, `basePath: '/services/web/<project>'`) declares
+   routes as `<template x-route="/customers" x-handler="App.routes.customers"
+   x-template.target.app="./views/customers.html">` and renders the matched **view fragment** into a
+   single `<div id="app">`. Each view's root element is an `Alpine.data(...)` page component whose `init()`
+   runs on entry and `destroy()` on exit — fresh per-visit state for free. Implication: this model
+   **replaces `resources-dashboard` wholesale** for Harmonia apps rather than slotting Harmonia views into
+   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.
+
+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`,
+     `credentials: 'same-origin'`, a structured `ApiError` (`httpStatus`, `errorType`, `errorCauses[]`),
+     status→errorType mapping, and **named base URLs** pointing straight at the **generated Java REST
+     controllers**: `/services/java/<module>/gen/<pkg>/api/<entity>` (e.g.
+     `/services/java/codbex-partners/gen/codbex_partners/api/customers`). This is exactly the REST surface
+     the EDM/intent generators emit — confirming the backend is reused unchanged.
+   - `js/services/apiError.js` — a **user-safe, localizable** message catalog keyed by `errorType`, plus a
+     per-field catalog keyed by 422 cause type (`NotNull`, `Pattern`, `Email`, `Size`, `Duplicate`, …).
+     The dev-facing `errorMessage` is logged to console only, never shown. This is the i18n seam: "swap
+     the flat maps for a locale lookup in one place."
+   - `js/services/formValidation.js` — a tiny schema validator (`required/minLength/min/max/email/pattern`)
+     returning `{ errors, valid }`; client-side pre-validation before the server round-trip.
+
+### Conventions to carry into the templates (Workstreams 4 & 5)
+
+- **`window.App = { services, routes, utils }`** global namespace (CDN/no-build style); stores via
+  `Alpine.store(...)`; pages via `Alpine.data(...)`; services are framework-agnostic (no Alpine inside).
+  Registration uses `document.addEventListener('alpine:init', …, { once: true })`.
+- **Page-base mixins** spread into every page component: `basePage()` (just `refreshIcons()`) and
+  `baseFormPage()` which adds the whole server-error UX — `applyApiError(err)` routes 422
+  `ValidationError` into per-field `errors` (honoring a per-page `fieldMap` for name mismatches) and
+  everything else into a localized banner; `mapCauses()`, `applyLoadError()`, `scrollToSummary()`,
+  `returnToParam()`/`navigateBack()` for `?returnTo=` deep-link continuation. **Caveat from the file:**
+  do **not** put ES6 getters in a spread mixin — the spread invokes them once and breaks Alpine
+  reactivity; define getters directly on the page component.
+- **List-view pattern** (`customersPage.js`) is a self-contained client-side **state machine**
+  (`loading | error | empty | no-results | default`) with search, multi-column tri-state sort
+  (`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.
+- **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.
+
+### Embedding facts (Workstream 1)
+
+- **Script load order is load-bearing** and documented in athena's `index.html`: (1) Pinecone Router
+  plugin, (2) app code via `defer` in document order — `app.js` namespace first, then `utils → services →
+  stores → router/handlers → appShell → page components`, (3) **Alpine LAST**, then **Harmonia**
+  (the IIFE bundle auto-starts Alpine — *do not call `Alpine.start()` yourself*), (4) Lucide. Cache-bust
+  query strings (`?v=N`) are used per file.
+- athena pulls Alpine `3.15`, `@codbex/harmonia@1.24.1` (js+css), Pinecone `7.5.0`, Lucide from **unpkg
+  CDN**. For the fat jar these become **webjars or vendored `dist/`** (the plan's preferred option) — the
+  CSP/offline requirement makes CDN a non-starter in-product, but the file layout is otherwise identical.
+- Harmonia's CSS is a **fixed, curated Tailwind subset** (spacing 0–12, semantic colors only, `sm/md/lg/xl`
+  only, no arbitrary values, no hue scales). There is **no build step**, so unknown utilities silently
+  render as nothing. Generated templates must stay inside the allow-list or use inline `style=`/CSS
+  variables. Theming is via CSS variables (`--primary`, `--background`, …) and
+  `Harmonia.setColorScheme('light|dark|auto')` (persisted to `localStorage` under
+  `codbex.harmonia.colorMode`) — this is the concrete **theming bridge** for Workstream 4/Phase 4.
+
+### Reconciling the two shell models (key decision)
+
+The plan's seam was "framework-agnostic `postMessage` hubs + iframe-per-view," letting a Harmonia view run
+inside the Angular shell and vice-versa during transition. The reference app instead is a **self-contained
+SPA** with client-side routing and direct `fetch` to the generated controllers — simpler, faster, and
+already built, but it does **not** speak the platform hub protocol and does **not** embed in the Angular
+dashboard. Two viable paths, to decide before Phase 1:
+
+- **(A) Adopt the athena SPA model** as the runtime dashboard (recommended by the evidence): generated apps
+  become standalone Harmonia SPAs served at `/services/web/<project>/`, replacing the Angular
+  `resources-dashboard` for those apps. Fastest route to parity; loses in-Angular-shell coexistence and the
+  hub protocol. Phase 0 spike changes to "stand up the athena shell against a generated module's REST API."
+- **(B) Keep the hub/iframe seam** from the original plan and *borrow* athena's component patterns, entity
+  client, form base, and `x-h-split` usage into hub-aware Harmonia views. Preserves coexistence and the
+  conformance-tested protocol; forgoes the ready-made shell (re-implements Workstream 3 around the hubs).
+
+Either way, athena supplies the components, the split usage, the `fetch` entity client → generated Java
+controllers, the error/i18n catalog, the form-error mapping, and the list-view state machine. The choice
+is only about the **shell boundary**, not the view internals.
+
+## How the platform is wired today
+
+Two shells, not one. The **IDE shell** (`shell-ide`) and the **runtime/app dashboard**
+(`resources-dashboard` + the shared shell pieces in `platform-core`) are *both* AngularJS + BlimpKit
+today. Each **view is its own HTML page loaded in an iframe**; it talks to its host shell only through
+hubs and registers via plain manifests. That iframe boundary is what makes a per-stack swap possible.
+
+**The invariant contract (keep):**
+- `postMessage` hubs: Dialog / Notification / Layout / Theming / Message
+- Views register via `.extension` JSON + `getView()` / `getPerspective()` returning plain objects
+- Params via `data-parameters` on the iframe (`getViewParameters()`)
+- `platform-links` = server-side `<meta>` → script/css bundle injection (per category)
+- REST backend (`/services/java/.../<Entity>Controller`) and the EDM/intent generators
+
+**AngularJS-bound (needs a Harmonia twin):**
+- **BlimpKit** — all `bk-*` directives
+- **Shell renderers** — `shell.js` / `layout.js` / `dialogs.js` (the things that *draw* dialogs,
+  windows, tabs, regions)
+- **EntityService** — Angular provider over `$http`
+- **LocaleService** + the `| t` filter
+- **platformSplit** — the `<split>` resizable panes
+
+### Reuse map
+
+| Platform capability | Reusable as-is? | Notes for the Harmonia stack |
+|---|---|---|
+| Dialog/Notification/Layout/Theming/Message hubs (*sender side*) | ✔ agnostic | Plain ES6 classes over `postMessage`; instantiate from Alpine directly. |
+| View / perspective / extension registration | ✔ agnostic | `.extension` JSON + a `getView()` module; shell only reads the returned object. |
+| `getViewParameters()` / iframe `data-parameters` | ✔ agnostic | Same utility works in any framework. |
+| `platform-links` injector | ✔ agnostic | Add categories (`harmonia-view/-perspective/-shell`) bundling Alpine+Harmonia+hubs, not Angular. |
+| EDM / intent / DAO / REST generators & Java backend | ✔ agnostic | Emit `.model`/`.form`/`.java` — UI-neutral. Only UI *template selection* changes. |
+| i18n | ~ partial | `i18next` is already global & agnostic; only the Angular `LocaleService`/`| t` wrapper is replaced (call `i18next.t()` + an Alpine helper). |
+| EntityService | ~ trivial port | Re-express the same REST calls as a plain `fetch` client. |
+| Shell renderers, BlimpKit, split panes | → reimplement | The bulk of the effort — see workstreams 1, 3, 5. |
+
+## Harmonia: fit & gaps
+
+`@codbex/harmonia` (MIT, v1.24.x) — "46+ components for Alpine.js". Alpine `^3.15` peer dep; Tailwind-
+built CSS shipped as `dist/harmonia.css`; dual **UMD** (`harmonia.min.js`) + **ESM** bundles; "no build
+step — just drop it in" (CDN/script-tag friendly); CSS-variable theming with a theme generator; deps
+`@floating-ui/dom`, `nouislider`; default icon set (Unicons-style).
+
+| Generated UI need | BlimpKit today | Harmonia | |
+|---|---|---|---|
+| Data table | `bk-table` | Table | ✔ |
+| Text / number / date / checkbox / select | `bk-input`, `bk-select`, `bk-checkbox` | Input, Input Number, Date Picker, Checkbox, Select | ✔ |
+| Button / toolbar | `bk-button`, `bk-toolbar` | Button, Toolbar | ✔ |
+| Dialog / window / popover / menu / list | `bk-dialog`, `bk-popover`, `bk-menu`, `bk-list` | Dialog, Popover, Menu, List | ✔ |
+| Pagination / notifications / tabs / badge / sidebar | bk equivalents | Pagination, Notifications, Tabs, Badge, Sidebar | ✔ |
+| **Split / resizable panes** (master-detail + shell layout) | `platformSplit` `<split>` | `x-h-split` + `x-h-split-panel` | ✔ (was thought a gap — see reference impl) |
+| Color input | `bk-input type=color` | native `<input type=color>` | minor |
+| Scrollbar styling | `bk-scrollbar` | native/CSS | minor |
+| Message page (empty-state) | `bk-message-page` | compose from primitives | minor |
+
+Component coverage is strong. The split-pane "gap" that earlier framings (and this table's first draft)
+flagged is **not real**: Harmonia ships `x-h-split`/`x-h-split-panel` and the reference app uses it for
+both master-detail *and* the shell layout (see "Reference implementation: codbex-athena-app"). No
+`platformSplit` port is needed.
+
+## Target architecture
+
+- **Keep (Angular):** the IDE — `shell-ide`, Monaco editors, entity/form/intent modelers, all Workbench
+  perspectives. Untouched. BlimpKit stays for the IDE.
+- **Keep (shared, agnostic):** the hub *protocol*, the `.extension`/`getView()` registry, the
+  `platform-links` injector, `getViewParameters`, REST endpoints, and every model-layer generator.
+- **Build (Harmonia):** a runtime **Harmonia Dashboard** (shell + renderers), a runtime platform layer
+  (i18n/entity/util), a generated-view **template set**, a **forms** runtime, icon migration, and the
+  embedded asset bundle.
+
+Because both shells speak the same hub protocol, a Harmonia view can run in the Angular shell (useful
+for incremental bring-up) and an Angular view could run in the Harmonia shell — the swap is per-stack,
+not all-or-nothing.
+
+## Workstreams
+
+Effort: S / M / L / XL (relative, not estimates).
+
+| # | Workstream | Effort | What it entails |
+|---|---|---|---|
+| 1 | **Embed the stack** | M | Webjars (or vendored `dist/`) for `alpinejs` + `@codbex/harmonia` (js+css) + Unicons; new `platform-links` categories `harmonia-view/-perspective/-shell` bundling Alpine+Harmonia+the (reused) hub scripts and *excluding* Angular/BlimpKit. Node toolchain already a build prereq. |
+| 2 | **Runtime platform layer** | M | Plain-JS `EntityClient` (fetch, same REST surface as `EntityService`); an i18n helper over the already-global `i18next` (+ an Alpine magic like `$t`); conventions for using the hubs + `getViewParameters` from Alpine. Port the new `process-tasks` directive to an Alpine component. |
+| 3 | **Harmonia Dashboard (shell)** | XL | The crux. Reimplement the runtime shell as Alpine+Harmonia: perspective host, layout (regions/tabs/**split**), and the *receiving* renderers for `showAlert/showDialog/showWindow/showBusy`, notifications, theming application, and view iframe hosting — all listening on the existing hub topics so it hosts any view. Resolve the split-pane gap here. |
+| 4 | **Generated view template set** | XL | New module `template-application-ui-harmonia-java` mirroring `template-application-ui-angular-java`'s `getSources()`/collections, re-skinning every view (list, manage, master-list/-manage, detail, main-details, dialogs, report/-table/-chart/-file, perspective, navigation) to Alpine+Harmonia on `EntityClient`+i18n+hubs. Same Velocity model/params — only template files + the platform-links category differ. |
+| 5 | **Forms runtime** | L | A Harmonia counterpart to `template-form-builder-angularjs` so runtime forms — including **BPM task forms** — render in Harmonia from the same `.form` artifact. The form-builder *editor* stays in the IDE (Angular); only the generated runtime form changes. |
+| 6 | **Icons → Lucide + Harmonia built-ins** | M | Map `sap-icon--*` usages and perspective SVGs to Harmonia's built-in `x-h-icon.*` set + Lucide (`<i data-lucide="…">`), per the reference app — *not* Unicons (revised). Embed the Lucide UMD + the (already-bundled) Harmonia glyphs; re-run `lucide.createIcons()` on `pinecone:end`/after DOM-mutating actions. Unicons remain available (`/services/web/resources/unicons/...`) if a model references them. |
+| 7 | **Generation wiring** | S | Register the new template in `service-generate`; add a stack choice to the EDM/intent generation recipe (the intent `.settings` already selects templates per type). Generators are reused — they're at the model layer. |
+| 8 | **Parity tests + docs** | L | Selenide ITs that drive the Harmonia runtime through the same flows as the Angular ITs (CRUD, filter, dropdowns, master-detail, dialogs, task surfacing, forms). CLAUDE.md notes for the new stack + the protocol contract. |
+
+## Phasing
+
+**Chosen path: (A) adopt the athena SPA shell.** The runtime becomes a self-contained Alpine + Harmonia
+single-page app, served as a plain Dirigible web resource at `/services/web/<project>/`, routed
+client-side by Pinecone (hash mode), talking directly over `fetch` to the generated Java controllers.
+This **replaces `resources-dashboard`** for generated/custom apps; the IDE stays AngularJS + BlimpKit.
+Consequences of this choice that reshape the phasing:
+
+- **What's dropped:** the iframe-per-view model, the `postMessage` hub *receiving* renderers, and the
+  hub-protocol conformance test. Coexistence is no longer "Harmonia views inside the Angular shell" — the
+  two stacks coexist by living at **different URLs** (IDE shell vs. per-app SPA), not via a shared seam.
+- **What gets cheaper:** the old Phase-1 crux (build shell + renderers + layout + split from scratch) is
+  now "adopt and parameterize athena's `appShell.js`." Split, breadcrumb, responsive drawer, theming menu,
+  entity client, error/i18n catalog and form-error mapping are **already written** — they move from
+  "build" to "extract + harden."
+- **What's de-risked earliest:** because no generator work is needed to stand up a real app, the spike
+  validates embedding + REST parity + the full shell in one shot.
+
+0. **Spike — stand up the athena shell against a real generated module.** Vendor Alpine `3.15` +
+   `@codbex/harmonia` + Pinecone `7.5.0` + Lucide as **webjars** (no CDN — CSP/offline), with the
+   load order athena documents (plugins → app code by `defer` document-order → Alpine → Harmonia → Lucide;
+   no `Alpine.start()`). Copy athena's `index.html` shell, `appShell.js`, `api.js`, `apiError.js`,
+   `baseFormPage`/`basePage`, `formValidation.js`; point a named base URL at an **existing generated
+   module's** controllers (e.g. `/services/java/<module>/gen/<pkg>/api/<entity>`); hand-write **one list
+   view + one create/edit form view** against the real REST API; serve at `/services/web/<project>/`.
+   Validates webjar embedding, the `x-h-split` shell, `fetch`→generated-controller parity, theming, and
+   the 422 error-mapping form base — **with zero generator/template work.** De-risks everything cheaply.
+1. **Productize the runtime shell.** Turn athena's `appShell.js` into a **reusable, embeddable Harmonia
+   dashboard** where the per-app parts (`nav`, `routeTitles`, `sections`, branding) are config/generated,
+   not hand-edited. Finalize the **theming bridge** (platform theme switch ↔
+   `Harmonia.setColorScheme('light|dark|auto')` + CSS-variable tokens), the responsive sidebar↔`x-h-sheet`
+   drawer, and breadcrumb derivation. End state: a generated app boots into this shell and renders the
+   Phase-0 views. (Replaces Workstream 3's from-scratch build.)
+2. **Full view template set.** New module `template-application-ui-harmonia-java` mirroring
+   `template-application-ui-angular-java`: generate every view type into `gen/` as **Harmonia view
+   fragments + `<template x-route>` declarations + `Alpine.data` page components**, built on the
+   list-view **state machine** (`loading|error|empty|no-results|default`, search, tri-state sort,
+   client pagination) and `baseFormPage`. Same Velocity model/params — only the template files and the
+   embedding category differ.
+3. **Forms + process tasks.** Harmonia form runtime rendering from the same `.form` artifact (incl. **BPM
+   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;
+   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
+   the EDM/intent recipe. Build the Selenide parity suite — **note the selectors change**: a hash-routed
+   SPA with no iframes (assert on `x-h-*` DOM at `/services/web/<project>/#/...`, not iframe/BlimpKit
+   selectors). Docs + CLAUDE.md notes for the new stack.
+
+## Key decisions & risks
+
+- **Split/resizable panes** — RESOLVED: Harmonia's `x-h-split` covers master-detail *and* the shell
+  (proven in the reference app). Use it directly; no port or third-party lib.
+- **Shell model — SPA vs. hub/iframe seam** — the reference dashboard is a self-contained client-routed
+  SPA (Pinecone, no hubs/iframes), not the hub-protocol view model this plan assumed. Pick path (A) adopt
+  the athena shell or (B) keep the seam and borrow athena's patterns. Decide before Phase 1 — see
+  "Reconciling the two shell models."
+- **Theming bridge** — map the platform's theme switching (ThemingHub) onto Harmonia's CSS-variable
+  themes so light/dark parity holds.
+- **Embedding model** — webjar of prebuilt `dist/` (like the BlimpKit webjar) vs. a Tailwind build step
+  in the Maven build. Webjar is simplest and keeps the IDE's BlimpKit path untouched.
+- **Coexistence (under path A)** — the two stacks coexist by **URL**, not a shared seam: the IDE stays on
+  the Angular shell while each generated/custom app is a standalone Harmonia SPA at
+  `/services/web/<project>/`. No hub-protocol conformance test is needed; the contract that must not drift
+  is instead the **REST surface** of the generated controllers the SPA's entity client calls.
+- **Two stacks to maintain** — until the Angular runtime templates are retired, every runtime UI change
+  risks needing both. Keep behaviour parity strict to limit divergence.
+- **Forms are runtime artifacts** — easy to forget; task forms must render in Harmonia or the BPM flows
+  break under the new shell.
+
+## Explicitly out of scope
+
+- The **IDE** itself — Workbench, Monaco editors, entity/form/intent modelers, git/database/operations
+  perspectives — stays AngularJS + BlimpKit.
+- The **model-layer generators** (EDM/intent/DAO/REST) and the **Java backend** — reused unchanged; this
+  is a UI-layer initiative only.
+- No new runtime features or behaviour — strict parity with the current generated/custom app experience.
+
+## Implementation status (built & verified)
+
+Delivered on branch `feat/harmonia-runtime-template` (PR #6078), path **(A) — the self-contained SPA**.
+Every increment was generation-verified against a real model and, where the backend was reachable,
+exercised with a live REST round-trip.
+
+### Modules
+
+- **`components/template/template-application-ui-harmonia-java`** — the SPA UI generator (mirrors
+  `template-application-ui-angular-java`). Registered on `platform-templates` as *"Application - UI
+  (Harmonia) - Java"*; composes the reused `template-application-rest-java` sources with the Harmonia
+  UI source set. Generates a single Alpine.js + Harmonia SPA per app, served at
+  `/services/web/<project>/gen/<model>/index.html`, client-routed by Pinecone (hash mode), talking to
+  the generated Java controllers over a `fetch` client.
+- **`components/template/template-form-builder-harmonia`** — the runtime form generator (mirrors
+  `template-form-builder-angularjs`). Registered as *"Harmonia Generator from Form Model"* (extension
+  `form`). Renders a `.form` artifact as a standalone Harmonia page + runs the **neutral
+  `formController(ctx)`** contract (see below). The intent recipe's `form` template can point here.
+- **`components/resources/application-core`** (existing) — bumped `harmonia.version` 1.4.2 → 1.24.1 and
+  now the home of the embedded stack.
+
+### View types & shell (all generated + verified)
+
+list · manage (CRUD + create/edit form on `baseFormPage` with 422→field mapping, relationship
+dropdowns, client validation) · setting (manage reused, grouped under Settings) · master-detail
+(`x-h-split`: master list + selected record's detail panels via a runtime registry; details reuse the
+manage form with FK + returnTo preset) · reports (table + chart.js bar/line/pie/doughnut/polarArea/radar)
+· process-task surfacing (inline inbox popovers gated on `hasProcess`) · **built-in shell sections**
+Process Inbox (`/inbox`) and Documents (`/documents`).
+
+### Embedding (Phase 1 — no CDN)
+
+Alpine `3.15.11`, Harmonia `1.24.1`, 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.
+
+### Runtime contracts (the invariants future work must keep)
+
+- **REST path** — `restBase` = `/services/java/<project>/gen/<javaGenFolderName>/api`; each entity page
+  uses a **relative** `apiPath` = `/<javaPerspectiveName>/<Entity>Controller` and lets the fetch client
+  prepend `restBase` exactly once. Use the **Java-sanitised** `javaGenFolderName`/`javaPerspectiveName`
+  (e.g. `sales-order` → `sales_order`), not the raw names — the backend lives under the sanitised
+  package. Absolute URLs (relationship dropdowns) pass `{ baseUrl: '' }`, which the client honours
+  (`opts.baseUrl !== undefined`, *not* truthiness — `''` is a valid "prepend nothing").
+- **Neutral form contract** — a `.form`'s `code` is the body of `formController(ctx)` with
+  `ctx.{model, params, http, task:{id,processInstanceId,complete()}, notify, close}`. (AngularJS
+  `$scope`/`$http` `.form` code must be migrated; `FormIntentGenerator` should emit this — follow-up.)
+- **Master-detail registry** — each detail registers its metadata via `App.registerDetail(<master>, …)`
+  so masters render detail panels without enumerating details at generation time.
+- **Process tasks** — the `processTasks` Alpine store fetches `/services/inbox/tasks` (assignee+groups),
+  buckets by `processInstanceId`, claims + opens the task `formKey` in an app-wide dialog.
+- **Dates** — forms convert HTML date/datetime/time widget values to the backend `java.time` format on
+  submit (`toPayload`: empty→null, datetime→ISO instant, time→pass-through) and back for edit display
+  (`toDateInput`), matching the Angular stack's `new Date(value)` behaviour.
+
+### Fixes surfaced during live testing
+
+- `resolveBaseUrl` honoured `{ baseUrl: '' }` (was falsy → doubled URLs).
+- Sanitised gen-folder/perspective in `restBase`/`apiPath` (hyphenated model names).
+- Master-detail panel `apiPath` made relative (was absolute → doubled URL) + null-master fetch guard.
+- Date/time widget value conversion (Jackson `Instant` rejected the raw `datetime-local` string).
+- **Intent glue (`template-application-events-java`)**: rollup/notification/integration/job handlers
+  used class-level `@Listener`/`@Scheduled` (now `@Target(METHOD)` only) → `javac` "annotation
+  interface not applicable". Converted to the self-describing `@Component implements
+  MessageHandler/JobHandler` style (matching the Trigger template). *(This fix is unrelated to the UI
+  layer but ships on the same branch.)*
+
+### Follow-ups (not blocking)
+
+- **Next to exercise: intent glue runtime** — process triggers starting a process on a new `Loan`
+  (etc.), then the started `ProcessId` surfacing the user's tasks inline via the process-task popovers
+  and completing through the Harmonia task form. The handler-style `javac` fix above unblocked the glue
+  from compiling; the end-to-end trigger → process-start → task → complete flow is the next thing to
+  verify live.
+- `FormIntentGenerator` to emit the neutral `formController(ctx)` code; migrate existing AngularJS task
+  forms.
+- Feed-driven form widgets (combobox/select/radio), documents/table/stepIndicator.
+- Server-side paging/search for lists and relationship dropdowns (currently first-page).
+- Theming bridge (platform theme ↔ `Harmonia.setColorScheme`); icons fully to Harmonia built-ins.
+- Parity Selenide ITs against the hash-routed SPA (`x-h-*` DOM, no iframe/BlimpKit selectors).
+- Optional `harmonia-view` platform-links category to inject the asset tags instead of hard-coding them.
+
+---
+
+Sources: code analysis of `platform-core` (hubs, locale, view/perspective, platform-links),
+`resources-dashboard` (EntityService), the `template-application-ui-angular-java` templates and
+`service-generate`; Harmonia from `github.com/codbex/harmonia`, the `@codbex/harmonia` package metadata,
+and codbex.com/harmonia.
diff --git a/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/generator/IntentSettings.java b/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/generator/IntentSettings.java
index a2436c1059..6093d7a0d5 100644
--- a/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/generator/IntentSettings.java
+++ b/components/engine/engine-intent/src/main/java/org/eclipse/dirigible/components/intent/generator/IntentSettings.java
@@ -105,6 +105,9 @@ public static IntentSettings parse(String json) {
      */
     public static IntentSettings scaffold(IntentModel model) {
         IntentSettings settings = new IntentSettings();
+        // The full-stack UI template is named explicitly here (DAO + REST + UI). Default is the
+        // AngularJS + BlimpKit stack; to generate the Alpine.js + Harmonia SPA instead, set this to
+        // "template-application-ui-harmonia-java/template/template.js". One explicit default, no alias.
         settings.generation.put("model", new Recipe("template-application-angular-java/template/template.js",
                 orderedMap("tablePrefix", "", "dataSource", "DefaultDB")));
         settings.generation.put("glue", new Recipe("template-application-events-java/template/template.js", new LinkedHashMap<>()));
diff --git a/components/group/group-templates/pom.xml b/components/group/group-templates/pom.xml
index c5573cb289..7230918bc3 100644
--- a/components/group/group-templates/pom.xml
+++ b/components/group/group-templates/pom.xml
@@ -91,6 +91,10 @@
             <groupId>org.eclipse.dirigible</groupId>
             <artifactId>dirigible-components-template-application-ui-angular-v2</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.eclipse.dirigible</groupId>
+            <artifactId>dirigible-components-template-application-ui-harmonia-java</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.eclipse.dirigible</groupId>
             <artifactId>dirigible-components-template-database-access</artifactId>
@@ -119,6 +123,10 @@
             <groupId>org.eclipse.dirigible</groupId>
             <artifactId>dirigible-components-template-form-builder-angularjs</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.eclipse.dirigible</groupId>
+            <artifactId>dirigible-components-template-form-builder-harmonia</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.eclipse.dirigible</groupId>
             <artifactId>dirigible-components-template-hello-world</artifactId>
diff --git a/components/pom.xml b/components/pom.xml
index cc7bb21178..caa165e945 100644
--- a/components/pom.xml
+++ b/components/pom.xml
@@ -273,6 +273,7 @@
         <module>template/template-application-ui-angular</module>
         <module>template/template-application-ui-angular-java</module>
         <module>template/template-application-ui-angular-v2</module>
+        <module>template/template-application-ui-harmonia-java</module>
         <module>template/template-bpm</module>
         <module>template/template-camel</module>
         <module>template/template-camel-cron-route</module>
@@ -282,6 +283,7 @@
         <module>template/template-database-view</module>
         <module>template/template-form</module>
         <module>template/template-form-builder-angularjs</module>
+        <module>template/template-form-builder-harmonia</module>
         <module>template/template-hello-world</module>
         <module>template/template-react</module>
         <module>template/template-html</module>
@@ -1553,6 +1555,11 @@
                 <artifactId>dirigible-components-template-application-ui-angular-v2</artifactId>
                 <version>${project.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.eclipse.dirigible</groupId>
+                <artifactId>dirigible-components-template-application-ui-harmonia-java</artifactId>
+                <version>${project.version}</version>
+            </dependency>
             <dependency>
                 <groupId>org.eclipse.dirigible</groupId>
                 <artifactId>dirigible-components-template-database-access</artifactId>
@@ -1598,6 +1605,11 @@
                 <artifactId>dirigible-components-template-form-builder-angularjs</artifactId>
                 <version>${project.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.eclipse.dirigible</groupId>
+                <artifactId>dirigible-components-template-form-builder-harmonia</artifactId>
+                <version>${project.version}</version>
+            </dependency>
             <dependency>
                 <groupId>org.eclipse.dirigible</groupId>
                 <artifactId>dirigible-components-template-hello-world</artifactId>
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/vendor/pinecone-router.min.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/vendor/pinecone-router.min.js
new file mode 100644
index 0000000000..499bd305c9
--- /dev/null
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/vendor/pinecone-router.min.js
@@ -0,0 +1,4 @@
+(()=>{var K1=(b)=>`Invalid expression type. Expression: ${b}`,E=(b)=>`Can't find an element with target ID: ${b}`,P=(b)=>`Route already exists: ${b}`;var Z1=(b)=>`x-${b} must be used on the same template as x-route`,f=(b)=>`Path: ${b} was not found`;function I(b){if(b.tagName!=="TEMPLATE")throw new TypeError("Directives can only be used on template elements.")}function L(b){if(I(b),b._x_PineconeRouter_route===void 0)throw new TypeError(Z1("template"))}function V(b){if(typeof b!="object"||!Array.isArray(b))throw new TypeError(K1(b))}var H={hash:!1,basePath:"",globalHandlers:[],handleClicks:!0,targetID:void 0,preload:!1,fetchOptions:{},pushState:!0},R=(b)=>{return H={...H,...b},H};var A=(b,J,j)=>{if(b.indexOf(J)===-1)return j;let z=b[b.indexOf(J)+1];if(!z)return j;if(J==="target"){let $=z.match(/([a-z0-9_-]+)/);if($)return $[1]}return z},C=(b)=>{if(b=="notfound"||H.hash)return b;if(!b.startsWith(H.basePath))b=H.basePath+b;return b},U=(b)=>{return/^\[.*\]$|^Array\(.*\)$/.test(b.trim())},x=(b,J)=>{let j=b??J??"",z=document.getElementById(j);if(j&&!z)throw new ReferenceError(E(j));return z??void 0},v=new Set,g=(b,J,j,z)=>{let $=b.getAttribute("x-run:on")||b.getAttribute("x-run.once:on");if($&&!z.evaluate(b,$))return;let M=b.id||j+J;if(b.hasAttribute("x-run.once")||b.hasAttribute("x-run.once:on")){if(v.has(M))return;v.add(M)}let Q=document.createElement("script");return Array.from(b.attributes).forEach((Z)=>Q.setAttribute(Z.name,Z.value)),Q.textContent=b.textContent,Q};var O=new Set,S=new Map,N=new Map,w=new Map,d=(b,J)=>{document.dispatchEvent(new CustomEvent("pinecone:fetch-error",{detail:{error:b,url:J}}))},m=(b,J,j,z,$)=>{if(O.has(j))return;O.add(j);let M=J.content,q=Array(M.childElementCount),Q=Array.from(M.children);for(let Z=0;Z<Q.length;Z++){if(q[Z]=Q[Z].cloneNode(!0),b.addScopeToNode(q[Z],{},J),z)b.addScopeToNode(q[Z],b.$data(q[Z]),z);if(q[Z].tagName==="SCRIPT"){let K=g(q[Z],Z,j,b);if(K)q[Z]=K;else q[Z].remove()}}b.mutateDom(()=>{if(z)z.replaceChildren(...q);else J.after(...q);q.forEach((Z)=>{b.initTree(Z)})}),J._x_PineconeRouter_template=q,J._x_PineconeRouter_templateUrls=$,J._x_PineconeRouter_undoTemplate=()=>{b.mutateDom(()=>{q.forEach((Z)=>{b.destroyTree(Z),Z.remove()})}),delete J._x_PineconeRouter_template},b.nextTick(()=>O.delete(j))},y=(b)=>{b._x_PineconeRouter_undoTemplate?.(),delete b._x_PineconeRouter_undoTemplate},c=async(b,J,j,z,$)=>{if(J._x_PineconeRouter_templateUrls!=null&&J._x_PineconeRouter_templateUrls!=z)y(J),J.innerHTML="";if(J._x_PineconeRouter_template)return;if(J.content.childElementCount){m(b,J,j,$,z);return}if(z)return o(z,J).then(()=>m(b,J,j,$,z))},h=(b,J)=>{return b.map((j)=>j.replace(/:([^/.]+)/g,(z,$)=>J[$]||$))},u=async(b,J="high")=>{if(b=C(b),S.has(b))return S.get(b);if(N.has(b))return N.get(b);let j=fetch(b,{...H.fetchOptions,priority:J}).then((z)=>{if(!z.ok)return d(z.statusText,b),"";return z.text()}).then((z)=>{if(z)S.set(b,z);return N.delete(b),z||""}).catch((z)=>{if(z instanceof TypeError)d(z.message,b);return""});return N.set(b,j),j},p=(b,J)=>{w.set(b,J)},n=()=>{for(let[b,J]of w){if(J)o(b,J,"low");else b.map((j)=>u(j,"low"));w.delete(b)}},o=(b,J,j="high")=>Promise.all(b.map((z)=>u(z,j))).then((z)=>{J.innerHTML=z.join("")});var $1=(b,J)=>{b.directive("template",(j,{expression:z,modifiers:$},{evaluate:M,cleanup:q,Alpine:Q,effect:Z})=>{L(j);let K=x(A($,"target"),H.targetID),G=j._x_PineconeRouter_route,Y,F=$.includes("interpolate"),X=J.routes.get(G);if(X._template_element=j,z!=""){if(!U(z))z=`['${z}']`;let W=M(z);if(V(W),Y=W,!F&&(H.preload||$.includes("preload")))p(Y,j);X.templates=Y}let B=(W)=>{if(J.context.route?.path===G){if(W&&F)W=h(W,J.context.params);c(Q,j,G,W,K).then(()=>{J.loading=!1})}else y(j)},D=Z(()=>B(Y));q(()=>{j._x_PineconeRouter_undoTemplate?.(),X.templates=[],Q.release(D)})})},i=$1;var q1=(b,J)=>{b.directive("handler",(j,{expression:z,modifiers:$},{evaluate:M,cleanup:q})=>{if(!U(z))z=`[${z}]`;let Q=M(z);V(Q);let Z=Q;for(let G=0;G<Z.length;G++)Z[G]=Z[G].bind(b.$data(j));let K;if($.includes("global"))H.globalHandlers=Z;else{L(j);let G=j._x_PineconeRouter_route;K=J.routes.get(G),K.handlers=Z}q(()=>{if($.includes("global"))H.globalHandlers=[];else K.handlers=[]})}).before("template")},s=q1;var G1=(b,J)=>{b.directive("route",(j,{expression:z,value:$},{cleanup:M})=>{let q=H.hash?z:C(z);if(I(j),q!="notfound")J.add(q,{name:$});j._x_PineconeRouter_route=q,M(()=>{j.removeAttribute("x-template"),j.removeAttribute("x-handler"),J.remove(q)})}).before("handler")},a=G1;var l=()=>{return{entries:[],index:0,canGoBack:function(){return this.index>0},back:function(){this.to(this.index-1)},canGoForward:function(){return this.index<this.entries.length-1},forward:function(){this.to(this.index+1)},to:function(b){if(b in this.entries)this.router?.navigate(this.entries[b],!1,!1,b)},push:function(b,J){if(this.index<this.entries.length-1)this.entries=this.entries.slice(0,this.index+1);if(this.entries.push(b),this.index=this.entries.length-1,J)this.pushState(b)},pushState:function(b){if(!H.pushState)return;let J=H.hash&&!b.startsWith("#")?"#"+b:b,j={path:J};history.pushState(j,"",J)},setRouter(b){this.router=b}}};var H1=(b,{templates:J=[],handlers:j=[],name:z}={})=>({pattern:M1(b),name:z||b,templates:J,handlers:j,path:b,match($){let M=this.pattern.exec($);if(M)return{...M.groups}}});function M1(b){let j=b.split("/").filter(Boolean).map((z)=>{if(!z.startsWith(":"))return"/"+z;let[,$,M,q]=z.match(/^:(\w+)([?+*]?)(?:\.(.+))?$/)||[],Q=M==="*"||M==="+",Z=M==="?"||M==="*",G=`(?<${$}>${Q?Z?".*?":".+":"[^/]+?"})`,Y=q?`\\.${q}`:"",F=G+Y;if(Z)return`(?:/${F})?`;return`/${F}`}).join("");return new RegExp(`^${j}/?$`,"i")}var k=H1;var T=(b,J,j)=>{return{path:b,params:J,route:j}};async function r(b,J,j){let z;return new Promise(async($,M)=>{j.signal.addEventListener("abort",()=>M());for(let q of b){if(j.signal.aborted)return;let Q={...J,data:z};try{z=await q(Q,j)}catch(Z){M(Z)}}$()})}var t=(b,J,j)=>{let z=k("notfound",{handlers:[(K)=>console.error(new ReferenceError(f(K.path)))],name:"notfound"}),$=new Map([["notfound",z]]),M=T(j,{}),q=null,Q=!1,Z={name:b,version:J,history:l(),routes:$,context:M,get loading(){return Q},set loading(K){if(Q==K)return;Q=K,document.dispatchEvent(new Event(K?"pinecone:start":"pinecone:end"))},settings:(K)=>R(K),add:function(K,G){if(K!="notfound"){if(!H.hash)K=C(K);if(this.routes.has(K))throw new Error(P(K))}let Y;if(G.templates?.length){Y=document.createElement("template"),Y._x_PineconeRouter_route=K;let F="x-template";if(G.targetID)F+=` .target.${G.targetID}`;if(G.interpolate)F+=" .interpolate";if(G.preload)F+=" .preload";Y.setAttribute("x-template",JSON.stringify(G.templates)),document.body.appendChild(Y)}this.routes.set(K,k(K,{...G,preload:G.preload||H.preload}))},remove:function(K){let G=this.routes.get(K);if(G?._template_element){let Y=G._template_element;Y._x_PineconeRouter_undoTemplate?.(),Y.remove(),G._template_element=void 0}return this.routes.delete(K)},navigate:async function(K,G,Y,F){if(q)q.abort();q=new AbortController,this.loading=!0,K=C(K);let X=K.split("?")[0]||"/",{route:B,params:D}=this.match(X),W=T(X,D,B),_=H.globalHandlers.concat(B.handlers);if(_.length)try{await r(_,W,q)}catch(Y1){this.loading=!1;return}if(F!=null)this.history.index=F,this.history.pushState(K);else if(Y||K!=this.context.path)this.history.push(K,!G&&!Y);if(!B.templates)this.loading=!1;this.context=W},match:function(K){let G=this.routes.get("notfound"),Y={};for(let[F,X]of this.routes){let B=X.match(K);if(B){Y=B,G=X;break}}return{route:G,params:Y}}};return Z.history.setRouter(Z),Z};var e=(b)=>{window.document.body.addEventListener("click",(J)=>{if(J.ctrlKey||J.metaKey||J.altKey||J.shiftKey||J.button||J.defaultPrevented)return;let j=J.target.closest("a");if(!j)return;if(H.handleClicks===!1&&!j.hasAttribute("x-link")||j.hasAttribute("data-native")||j.hasAttribute("native"))return;let z=j.getAttribute("href"),$=j.getAttribute("target");if(z&&(!$||/^_?self$/i.test($)))b.navigate(z),J.preventDefault()})};var j1="pinecone-router",J1="7.5.0";var Q1=function(b){let J=()=>{return H.hash?location.hash.substring(1):location.pathname},j=b.reactive(t(j1,J1,J()));window.PineconeRouter=j,document.addEventListener("alpine:initialized",()=>{j.navigate(J(),!1,!0)}),window.addEventListener("popstate",()=>{j.navigate(H.hash?window.location.hash.substring(1):window.location.pathname,!0)}),e(j),document.addEventListener("pinecone:end",()=>b.nextTick(n),{once:!0}),i(b,j),s(b,j),a(b,j),b.$router=j,b.magic("router",()=>j),b.magic("history",()=>j.history),b.magic("params",()=>j.context.params)},z1=Q1;document.addEventListener("alpine:init",()=>{window.Alpine.plugin(z1)});})();
+
+//# debugId=AF9BC6439E29207164756E2164756E21
+//# sourceMappingURL=router.min.js.map
diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Integration.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Integration.java.template
index 7eac7672e1..38880d6114 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Integration.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Integration.java.template
@@ -3,9 +3,9 @@ package gen.events;
 import java.util.HashMap;
 import java.util.Map;
 
+import org.eclipse.dirigible.sdk.component.Component;
 import org.eclipse.dirigible.sdk.core.Configurations;
 import org.eclipse.dirigible.sdk.http.HttpClient;
-import org.eclipse.dirigible.sdk.messaging.Listener;
 import org.eclipse.dirigible.sdk.messaging.ListenerKind;
 import org.eclipse.dirigible.sdk.messaging.MessageHandler;
 import org.eclipse.dirigible.sdk.utils.Json;
@@ -17,9 +17,19 @@ import org.eclipse.dirigible.sdk.utils.Json;
  * application. The event payload (the entity JSON) is sent as the request body. The target URL comes
  * from the intent (a literal or a configuration value).
  */
-@Listener(name = "${projectName}-${perspective}-${entity}${topicSuffix}", kind = ListenerKind.TOPIC)
+@Component
 public class ${className}Integration implements MessageHandler {
 
+    @Override
+    public String destination() {
+        return "${projectName}-${perspective}-${entity}${topicSuffix}";
+    }
+
+    @Override
+    public ListenerKind kind() {
+        return ListenerKind.TOPIC;
+    }
+
     @Override
     public void onMessage(String message) {
         String url = ${urlExpression};
diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Job.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Job.java.template
index 8359374c11..014d6ae53f 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Job.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Job.java.template
@@ -5,9 +5,9 @@ import java.util.List;
 import java.util.Map;
 
 import org.eclipse.dirigible.components.data.store.java.repository.Criteria;
+import org.eclipse.dirigible.sdk.component.Component;
 import org.eclipse.dirigible.sdk.core.Configurations;
 import org.eclipse.dirigible.sdk.job.JobHandler;
-import org.eclipse.dirigible.sdk.job.Scheduled;
 import org.eclipse.dirigible.sdk.mail.Mail;
 
 import gen.${javaGenFolderName}.data.${javaPerspective}.${entity}Entity;
@@ -23,9 +23,14 @@ import gen.${javaGenFolderName}.data.${load.javaTargetPerspective}.${load.target
  * Generated from the intent schedules block - do not edit; it is re-generated with the application.
  * The sender address comes from the DIRIGIBLE_MAIL_SENDER configuration.
  */
-@Scheduled(expression = "${cron}")
+@Component
 public class ${className}Job implements JobHandler {
 
+    @Override
+    public String cron() {
+        return "${cron}";
+    }
+
     @Override
     public void run() {
         List<${entity}Entity> rows = new ${entity}Repository().findAll(${criteriaExpression});
diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Notification.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Notification.java.template
index 36a519a5b3..05974a2890 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Notification.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Notification.java.template
@@ -4,9 +4,9 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
+import org.eclipse.dirigible.sdk.component.Component;
 import org.eclipse.dirigible.sdk.core.Configurations;
 import org.eclipse.dirigible.sdk.mail.Mail;
-import org.eclipse.dirigible.sdk.messaging.Listener;
 import org.eclipse.dirigible.sdk.messaging.ListenerKind;
 import org.eclipse.dirigible.sdk.messaging.MessageHandler;
 import org.eclipse.dirigible.sdk.utils.Json;
@@ -24,9 +24,19 @@ import gen.${javaGenFolderName}.data.${load.javaTargetPerspective}.${load.target
  * application. Binds to the topic the ${entity} repository publishes the event to. The sender
  * address comes from the DIRIGIBLE_MAIL_SENDER configuration.
  */
-@Listener(name = "${projectName}-${perspective}-${entity}${topicSuffix}", kind = ListenerKind.TOPIC)
+@Component
 public class ${className}Notification implements MessageHandler {
 
+    @Override
+    public String destination() {
+        return "${projectName}-${perspective}-${entity}${topicSuffix}";
+    }
+
+    @Override
+    public ListenerKind kind() {
+        return ListenerKind.TOPIC;
+    }
+
     @Override
     public void onMessage(String message) {
         ${entity}Entity entity = Json.parse(message, ${entity}Entity.class);
diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Rollup.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Rollup.java.template
index e9ac07f919..b871e18ac2 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Rollup.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Rollup.java.template
@@ -1,7 +1,7 @@
 package gen.events;
 
 import org.eclipse.dirigible.components.data.store.java.repository.Criteria;
-import org.eclipse.dirigible.sdk.messaging.Listener;
+import org.eclipse.dirigible.sdk.component.Component;
 import org.eclipse.dirigible.sdk.messaging.ListenerKind;
 import org.eclipse.dirigible.sdk.messaging.MessageHandler;
 import org.eclipse.dirigible.sdk.utils.Json;
@@ -18,9 +18,19 @@ import gen.${javaGenFolderName}.data.${javaParentPerspective}.${parentEntity}Rep
  * On each ${childEntity} event the count for the affected parent is recomputed from the store (so it
  * self-heals); under heavy write concurrency it is eventually consistent, not transactionally exact.
  */
-@Listener(name = "${projectName}-${childPerspective}-${childEntity}${topicSuffix}", kind = ListenerKind.TOPIC)
+@Component
 public class ${className} implements MessageHandler {
 
+    @Override
+    public String destination() {
+        return "${projectName}-${childPerspective}-${childEntity}${topicSuffix}";
+    }
+
+    @Override
+    public ListenerKind kind() {
+        return ListenerKind.TOPIC;
+    }
+
     @Override
     public void onMessage(String message) {
         ${childEntity}Entity entity = Json.parse(message, ${childEntity}Entity.class);
diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
new file mode 100644
index 0000000000..cf9ed7ab71
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -0,0 +1,106 @@
+# template-application-ui-harmonia-java
+
+Generation template for the **Alpine.js + Harmonia** runtime UI stack — the SPA
+counterpart to `template-application-ui-angular-java`. Same model, same Velocity
+parameters, same reused Java REST/DAO backend (`template-application-rest-java`);
+only the generated UI layer differs.
+
+See the design rationale and phasing in the repo-root `HARMONIA_RUNTIME_PLAN.md`
+("Reference implementation: codbex-athena-app" and "Phasing"). The reusable shell
+assets here are adopted from `github.com/codbex/codbex-athena-app`.
+
+## Status: functional
+
+Registers as a `platform-templates` extension and generates a complete runnable
+Harmonia SPA: the shell + all core view types (list, manage, setting, master-detail,
+reports), built-in Process Inbox + Documents sections, and inline process-task
+surfacing. Generation is verified against real models (`DependsOnIT`, `sales-order`,
+`sample-intent-model`) with live CRUD, relationship dropdowns, master→detail filtering
+and form date handling. Remaining items are refinements — see the checklist + the
+repo-root `HARMONIA_RUNTIME_PLAN.md` "Implementation status" + "Follow-ups".
+
+## Architecture (how it differs from the Angular module)
+
+The Angular module generates **one iframe perspective per entity**, each registered
+via `.extension` + `view.js` + `controller.js` and hosted by the platform dashboard
+over the `postMessage` hub protocol.
+
+This module generates a **single client-routed SPA** (no iframes, no hubs):
+
+```
+gen/{{genFolderName}}/
+  index.html                         # aggregate shell: x-h-split layout, sidebar,
+                                     #   breadcrumb, <template x-route> per entity,
+                                     #   page-component <script> tags  (generated once)
+  css/app.css                        # copy
+  js/app.js                          # copy   — window.App namespace
+  js/config.js                       # GENERATED — projectName, basePath, restBase
+  js/services/api.js                 # copy   — fetch client + ApiError
+  js/services/apiError.js            # copy   — localizable user-safe error catalog
+  js/services/formValidation.js      # copy   — schema validator
+  js/components/layout/appShell.js   # copy   — the reusable dashboard (Alpine.data 'app')
+  js/components/pages/basePage.js     # copy
+  js/components/pages/baseFormPage.js # copy   — 422 errorCauses -> per-field mapping
+  js/components/pages/{persp}/{Entity}ListPage.js  # GENERATED per LIST entity
+  views/{persp}/{entity}-list.html   # GENERATED per LIST entity (Harmonia fragment)
+  views/_notfound.html               # copy
+```
+
+Static shared assets use `action: "copy"` (verbatim; only the path is Mustache-processed).
+The one project-specific shell file is `js/config.js` (`action: "generate"`) so the
+verbatim assets can read their wiring from `window.App.config` instead of being
+Velocity-processed (which would collide with `$`-sigils in the JS).
+
+## Generation wiring
+
+- `template/template.extension` — registers on `platform-templates`.
+- `template/template.js` — entry; merges `template-application-rest-java` sources
+  with `template/ui/template.js`.
+- `template/ui/template.js` — aggregates the per-view source collectors.
+- `template/ui/shell.js` — the SPA shell + static assets (above).
+- `template/ui/list.js` — LIST/PRIMARY entities -> page component + view fragment.
+- `template/ui/navigation.js` — placeholder (nav currently folded into index.html).
+
+Velocity model vars (per-entity collections, same as the Angular module):
+`$name`, `$perspectiveName`, `$properties[]` (`$property.name`, `.dataName`,
+`.widgetType`, `.widgetIsMajor`, `.dataAutoIncrement`), `$projectName`, `${tprefix}`,
+`${primaryKeysString}`, `$hasProcess`. The aggregate `index.html` is generated with
+no `collection`, so `$models` = `model.entities`.
+
+## Parity checklist (TODO)
+
+| View type | Angular collection | Status |
+|---|---|---|
+| list | `uiListModels` | ✅ skeleton (read-only list page + view) |
+| manage | `uiManageModels` | ✅ CRUD list + shared create/edit form (/create, /:id/edit) on baseFormPage — relationship dropdowns, client validation, 422 field mapping, delete-confirm |
+| master-list + detail | `uiListMasterModels` / `uiListDetailsModels` | ✅ master page (x-h-split: list + detail panels) + registry-driven detail panels |
+| master-manage + detail | `uiManageMasterModels` / `uiManageDetailsModels` | ✅ same master page; masters reuse the manage form for create/edit, details get a routed form (FK preset) |
+| main-details | (within master) | ⬜ stub |
+| setting | `uiSettingModels` | ✅ reuses the manage CRUD templates, grouped under a "Settings" sidebar section |
+| report / report-chart / report-table | `uiReportTableModels` / `uiReportChartModels` | ✅ table page (data table + CSV export) + chart page (chart.js bar/line/pie/doughnut/polarArea/radar) against the Java report controller; Reports sidebar group |
+| navigation (generated nav data) | `uiNavigations` | ⬜ folded into index.html for now |
+| dialogs (filter/window) | per view | ⬜ |
+| forms + BPM task forms | (separate module) | ✅ `template-form-builder-harmonia` renders a `.form` as a Harmonia page via the neutral `formController(ctx)` contract; BPM task forms complete via `ctx.task.complete()` |
+| **Process Inbox** (built-in) | — | ✅ built-in /inbox view: the user's BPM tasks (assignee+groups) via the processTasks store, claim+open the task form |
+| **Documents** (built-in) | — | ✅ built-in /documents view: CMS folder browser (/services/js/documents/api) — navigate, download, create folder, upload, delete |
+| 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.1` + Lucide `1.8.0` are **webjars** bundled via
+  `components/resources/application-core` (its `harmonia.version` was bumped 1.4.2 → 1.24.1 in the
+  root pom), served version-less through webjars-locator at `/webjars/...` (public).
+- Pinecone Router has no published webjar, so its `router.min.js` is **vendored** under
+  `application-core/.../vendor/` and served at `/services/web/application-core/vendor/`
+  (license-excluded in the root pom).
+- The generated `index.html` references only these local URLs — no unpkg/jsdelivr (CSP/offline).
+
+Other open items:
+- **config.js `restBase`:** verified in Phase 0 — `/services/java/<project>/gen/<modelFile>/api`,
+  each entity at `<restBase>/<perspective-lowercased>/<Entity>Controller` (GET list/$limit/$offset,
+  GET /{id}, POST, PUT /{id}, DELETE /{id}). Page components use a relative `apiPath` so api.* prepends
+  restBase; relationship dropdowns call the absolute `widgetDropdownControllerUrl` with `{ baseUrl: '' }`.
+- **`platform-links` category:** optional — could add a `harmonia-view` category to inject the asset
+  tags instead of hard-coding them in the shell `index.html`.
+- **Generation recipe:** register the stack choice in `service-generate` / the intent recipe.
+- **Parity ITs:** Selenide against the hash-routed SPA (`x-h-*` DOM, no iframe/BlimpKit selectors).
+- **In-browser render:** still unverified here (no headless browser); all HTTP layers are proven.
diff --git a/components/template/template-application-ui-harmonia-java/pom.xml b/components/template/template-application-ui-harmonia-java/pom.xml
new file mode 100644
index 0000000000..933d6f1207
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/pom.xml
@@ -0,0 +1,24 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.eclipse.dirigible</groupId>
+        <artifactId>dirigible-components-parent</artifactId>
+        <version>14.0.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
+    </parent>
+
+    <name>Components - Template - Application - UI - Harmonia - Java</name>
+    <artifactId>dirigible-components-template-application-ui-harmonia-java</artifactId>
+    <packaging>jar</packaging>
+
+    <properties>
+        <profile.content.phase>generate-sources</profile.content.phase>
+        <content.repository.name>template-application-ui-harmonia-java</content.repository.name>
+        <content.project.name>template-application-ui-harmonia-java</content.project.name>
+
+        <license.header.location>../generation-header.txt</license.header.location>
+    </properties>
+
+</project>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/project.json b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/project.json
new file mode 100644
index 0000000000..76f80de3e5
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/project.json
@@ -0,0 +1,5 @@
+{
+    "guid": "template-application-ui-harmonia-java",
+    "dependencies": [],
+    "actions": []
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.extension b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.extension
new file mode 100644
index 0000000000..d9b3bfe23e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.extension
@@ -0,0 +1,5 @@
+{
+    "module": "template-application-ui-harmonia-java/template/template.js",
+    "extensionPoint": "platform-templates",
+    "description": "Application Template - UI (Harmonia) - Java"
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.js
new file mode 100644
index 0000000000..5edc42380e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.js
@@ -0,0 +1,62 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+import * as restTemplateManager from "template-application-rest-java/template/template";
+import * as uiTemplate from "template-application-ui-harmonia-java/template/ui/template";
+import * as generateUtils from "service-generate/template/generateUtils";
+import * as parameterUtils from "service-generate/template/parameterUtils";
+
+export function generate(model, parameters) {
+    model = JSON.parse(model).model;
+    let templateSources = getTemplate(parameters).sources;
+    parameters.javaRuntime = true;
+    parameterUtils.process(model, parameters)
+    return generateUtils.generateFiles(model, parameters, templateSources);
+};
+
+export function getTemplate(parameters) {
+    let restTemplate = restTemplateManager.getTemplate(parameters);
+
+    let templateSources = [
+        ...restTemplate.sources,
+        ...uiTemplate.getSources(parameters)
+    ];
+
+    let templateParameters = getTemplateParameters();
+    templateParameters = templateParameters.concat(restTemplate.parameters);
+
+    return {
+        name: "Application - UI (Harmonia) - Java",
+        description: "Application With UI (Alpine.js + Harmonia SPA), Java REST APIs and DAOs",
+        extension: "model",
+        sources: templateSources,
+        parameters: templateParameters
+    };
+};
+
+function getTemplateParameters() {
+    return [
+        {
+            name: "brand",
+            label: "Brand",
+            placeholder: "Enter Brand"
+        },
+        {
+            name: "brandUrl",
+            label: "Brand URL",
+            placeholder: "Enter Brand URL"
+        },
+        {
+            name: "title",
+            label: "Title",
+            placeholder: "Enter Title"
+        },
+        {
+            name: "description",
+            label: "Description",
+            placeholder: "Enter Description"
+        }
+    ];
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/list.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/list.js
new file mode 100644
index 0000000000..a885292a4e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/list.js
@@ -0,0 +1,40 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * List view (LIST layout, PRIMARY entities) — Harmonia SPA variant.
+ *
+ * Unlike the Angular module (one iframe perspective per entity, registered via
+ * .extension + view.js + controller.js), the Harmonia runtime is a single SPA:
+ * each entity contributes two generated artefacts that the shell wires together —
+ *   1. an Alpine.data page component (the list state machine on the fetch client),
+ *   2. a Harmonia view fragment rendered into #app on navigation.
+ * The <template x-route> declaration itself is emitted once into index.html (the
+ * aggregate shell loops the model), so there is no separate per-entity route file.
+ *
+ * Collection `uiListModels` = entities with layoutType === "LIST" && type === "PRIMARY".
+ * Velocity model vars available per entity: $name, $properties[], $property.dataName,
+ * $property.widgetType, $property.widgetIsMajor, $property.dataAutoIncrement,
+ * $perspectiveName, $projectName, ${tprefix}, $hasProcess, ${primaryKeysString}.
+ */
+export function getSources(parameters) {
+    return [
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/list/page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}ListPage.js",
+            collection: "uiListModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/list/view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-list.html",
+            collection: "uiListModels"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/manage.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/manage.js
new file mode 100644
index 0000000000..09653c45b7
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/manage.js
@@ -0,0 +1,60 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Manage view (MANAGE layout, PRIMARY entities) — Harmonia SPA variant.
+ *
+ * In the Angular module a MANAGE perspective is a list table plus inline
+ * create/edit/delete dialogs. The SPA splits that into routed pages (the athena
+ * pattern): per MANAGE entity it emits
+ *   1. a CRUD list page component + view (New / Edit / Delete + delete-confirm),
+ *   2. a SHARED create/edit form page component + view, built on baseFormPage so
+ *      422 ValidationError causes map onto per-field errors.
+ *
+ * The shell wires three routes per entity (see ui/shell/index.html.template):
+ *   /{name}             -> {name}-manage-list.html   (x-data {name}ManageListPage)
+ *   /{name}/create      -> {name}-form.html          (x-data {name}FormPage)
+ *   /{name}/{id}/edit   -> {name}-form.html          (same view; page reads :id)
+ *
+ * Collection `uiManageModels` = layoutType === "MANAGE" && type === "PRIMARY".
+ * Per-entity Velocity vars additionally include, for relationship DROPDOWNs:
+ * $property.widgetDropdownControllerUrl, $property.widgetDropDownKey,
+ * $property.widgetDropDownValue, $property.widgetDropDownMultiSelect; plus the
+ * form flags $property.isRequiredProperty / isCalculatedProperty / isReadOnlyProperty /
+ * auditType / dataAutoIncrement, and the entity-level $dataName / $primaryKeysString.
+ */
+export function getSources(parameters) {
+    return [
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}ManageListPage.js",
+            collection: "uiManageModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-manage-list.html",
+            collection: "uiManageModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}FormPage.js",
+            collection: "uiManageModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-form.html",
+            collection: "uiManageModels"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/masterDetail.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/masterDetail.js
new file mode 100644
index 0000000000..bf34049f1c
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/masterDetail.js
@@ -0,0 +1,90 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Master-detail view types — Harmonia SPA variant.
+ *
+ * Master entities (LIST_MASTER / MANAGE_MASTER, PRIMARY) get a master page at /<Master>:
+ * an x-h-split with the master record list on the left and, for the selected master, its
+ * editable form plus one detail panel per dependent entity on the right.
+ *
+ * Detail entities (LIST_DETAILS / MANAGE_DETAILS, DEPENDENT) do NOT get their own list
+ * route; instead each emits:
+ *   - a registration (<Detail>.detail.js) that calls App.registerDetail(<masterEntity>, {...})
+ *     so the master page can render a generic detailPanel for it (decoupled — masters never
+ *     enumerate their details at generation time), and
+ *   - a routed create/edit form (reusing the manage form templates) at /<Detail>/create and
+ *     /<Detail>/{id}/edit, which the detail panel navigates to with the FK + returnTo preset.
+ *
+ * The detail list is filtered to its master via the generated controller's
+ * `?<masterEntityId>=<id>` query (masterEntityId = the FK property; masterEntity = the master
+ * entity name — both set by parameterUtils for MANAGE_DETAILS/LIST_DETAILS entities).
+ */
+export function getSources(parameters) {
+    // A master gets: the master page (list + detail orchestration) AND the manage form
+    // (reused for its own routed create/edit at /<Master>/create and /<Master>/{id}/edit).
+    const masterPage = (collection) => ([
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/master/master-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}MasterPage.js",
+            collection
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-master.html",
+            collection
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}FormPage.js",
+            collection
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-form.html",
+            collection
+        }
+    ]);
+
+    const detail = (collection) => ([
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/master/detail-register.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}.detail.js",
+            collection
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}FormPage.js",
+            collection
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-form.html",
+            collection
+        }
+    ]);
+
+    return [
+        ...masterPage("uiManageMasterModels"),
+        ...masterPage("uiListMasterModels"),
+        ...detail("uiManageDetailsModels"),
+        ...detail("uiListDetailsModels")
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/navigation.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/navigation.js
new file mode 100644
index 0000000000..35d4c57ca3
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/navigation.js
@@ -0,0 +1,19 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Navigation — in the Angular module this emits a perspective-group .extension per
+ * navigation node (consumed by the IDE/dashboard shell). In the Harmonia SPA there
+ * is no extension-point registry: the sidebar nav is data inside appShell's
+ * `nav` array, assembled in index.html from the model.
+ *
+ * TODO (Phase 1/2): emit a generated `js/nav.js` (or a JSON include) holding the
+ * { route, label, icon } entries per navigation node, which appShell.js reads
+ * instead of its hard-coded demo array. For now the skeleton folds nav into the
+ * aggregate index.html (see ui/shell/index.html.template), so this collector is a
+ * no-op placeholder that keeps the aggregator wiring honest.
+ */
+export const getSources = () => ([]);
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/report.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/report.js
new file mode 100644
index 0000000000..7684239b2b
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/report.js
@@ -0,0 +1,48 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Report view types — Harmonia SPA variant. Report entities (type REPORT) run server-side through
+ * the generated Java report controller (template-application-rest-java's reportFileEntity:
+ * GET / -> rows as column->value maps, POST /search filter, POST /export CSV). The report
+ * perspective is "Reports", so the page apiPath resolves to <restBase>/reports/<Name>Controller.
+ *
+ *   - REPORT_TABLE  (uiReportTableModels) -> a data table.
+ *   - REPORT_BAR/LINE/PIE/DOUGHNUT/POLARAREA/RADAR (uiReportChartModels) -> a chart.js chart,
+ *     labelled by the report's primary-key column with one dataset per other column.
+ */
+export function getSources(parameters) {
+    return [
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report/table-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}ReportPage.js",
+            collection: "uiReportTableModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-report.html",
+            collection: "uiReportTableModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report/chart-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}ReportPage.js",
+            collection: "uiReportChartModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-report.html",
+            collection: "uiReportChartModels"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/setting.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/setting.js
new file mode 100644
index 0000000000..8de9c1100d
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/setting.js
@@ -0,0 +1,47 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Setting view (SETTING entities) — nomenclature / configuration entities (e.g. Country, City).
+ *
+ * Settings get the same CRUD treatment as a MANAGE entity, so this reuses the `manage` view
+ * templates verbatim against the `uiSettingModels` collection (entities with type === "SETTING").
+ * Their perspective resolves to "Settings", so the generated controller path the page components
+ * derive — <restBase>/settings/<Entity>Controller — matches the backend the REST template emits,
+ * and the shell groups them under a "Settings" sidebar section (see ui/shell/index.html.template).
+ */
+export function getSources(parameters) {
+    return [
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}ManageListPage.js",
+            collection: "uiSettingModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-manage-list.html",
+            collection: "uiSettingModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-page.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/components/pages/{{perspectiveName}}/{{name}}FormPage.js",
+            collection: "uiSettingModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/{{perspectiveName}}/{{name}}-form.html",
+            collection: "uiSettingModels"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/shell.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/shell.js
new file mode 100644
index 0000000000..1565a253bf
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/shell.js
@@ -0,0 +1,119 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Shell sources — the reusable Alpine.js + Harmonia runtime dashboard.
+ *
+ * These files are the directly-adopted dashboard from codbex-athena-app (see
+ * HARMONIA_RUNTIME_PLAN.md, "Reference implementation"). They are app-wide and
+ * model-independent, so they are emitted ONCE per generated app with action "copy"
+ * (verbatim content; only the destination path is Mustache-processed).
+ *
+ * The single exception is index.html, which is the aggregate SPA entry: it must
+ * enumerate every entity's <template x-route> and sidebar nav entry, so it is
+ * generated ONCE over the whole model (no `collection` => generateUtils exposes
+ * `parameters.models = model.entities` to Velocity).
+ *
+ * TODO (Phase 1): vendor Alpine 3.15 + @codbex/harmonia + Pinecone 7.5 + Lucide as
+ * webjars and reference them from index.html instead of unpkg CDN (CSP/offline).
+ */
+export function getSources() {
+    return [
+        // Aggregate SPA entry — generated once over the full model.
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/index.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/index.html"
+        },
+        // The one project-specific shell file: the runtime config (REST base, SPA
+        // basePath, project name). Generated so the verbatim assets below can stay
+        // model-independent and read their wiring from `window.App.config`.
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/config.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/js/config.js"
+        },
+        // Static, model-independent shell assets — copied verbatim.
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/app.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/app.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/services/api.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/services/api.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/services/apiError.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/services/apiError.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/services/formValidation.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/services/formValidation.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/layout/appShell.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/layout/appShell.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/pages/basePage.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/pages/basePage.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/detailPanel.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/detailPanel.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/stores/processTasks.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/stores/processTasks.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/pages/baseFormPage.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/pages/baseFormPage.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/css/app.css.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/css/app.css"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/notfound.html.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/views/_notfound.html"
+        },
+        // Built-in shell sections (transferred from the dashboard): Process Inbox + Documents.
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/pages/inboxPage.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/pages/inboxPage.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/inbox.html.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/views/_inbox.html"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/js/components/pages/documentsPage.js.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/js/components/pages/documentsPage.js"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/documents.html.template",
+            action: "copy",
+            rename: "gen/{{genFolderName}}/views/_documents.html"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/template.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/template.js
new file mode 100644
index 0000000000..6547e48981
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/template.js
@@ -0,0 +1,37 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+// SPA shell — static, app-wide assets copied verbatim (the reusable Harmonia dashboard,
+// adapted from codbex-athena-app: appShell, fetch entity client, error/i18n catalog,
+// page-base mixins, form validation). See ui/shell/*.
+import * as shellTemplate from "template-application-ui-harmonia-java/template/ui/shell";
+
+// Per view-type generators (Velocity over the model's UI collections).
+import * as listTemplate from "template-application-ui-harmonia-java/template/ui/list";
+import * as manageTemplate from "template-application-ui-harmonia-java/template/ui/manage";
+import * as settingTemplate from "template-application-ui-harmonia-java/template/ui/setting";
+import * as masterDetailTemplate from "template-application-ui-harmonia-java/template/ui/masterDetail";
+import * as reportTemplate from "template-application-ui-harmonia-java/template/ui/report";
+import * as navigation from "template-application-ui-harmonia-java/template/ui/navigation";
+
+// The Harmonia form runtime (.form artifacts incl. BPM task forms) is its own module:
+// template-form-builder-harmonia (the intent recipe's `form` template).
+
+export function getSources(parameters) {
+    return [
+        {
+            location: "/template-application-ui-harmonia-java/ui/translations.json.template",
+            action: "translate",
+        },
+        ...shellTemplate.getSources(parameters),
+        ...listTemplate.getSources(parameters),
+        ...manageTemplate.getSources(parameters),
+        ...settingTemplate.getSources(parameters),
+        ...masterDetailTemplate.getSources(parameters),
+        ...reportTemplate.getSources(parameters),
+        ...navigation.getSources(parameters),
+    ];
+};
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
new file mode 100644
index 0000000000..9e6c2a3e5c
--- /dev/null
+++ 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
@@ -0,0 +1,112 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * List page component for ${name} — the athena list state machine
+ * (loading | error | empty | no-results | default) on the fetch entity client,
+ * with search, tri-state column sort and client-side pagination.
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}ListPage', () => ({
+    ...basePage(),
+    state: 'loading',
+    items: [],
+    error: null,
+    searchTerm: '',
+    sortColumn: null,
+    sortDirection: null,
+    currentPage: 1,
+    pageSize: 10,
+
+    // Controller path for ${name}, relative to App.config.restBase
+    // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+
+    async init() {
+      await this.load();
+    },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      this.currentPage = 1;
+      try {
+        // TODO (Phase 2): use the controller's $limit/$offset + /count for server-side paging.
+        this.items = await App.services.api.get(this.apiPath);
+        this.state = this.items.length === 0 ? 'empty' : 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not load ${name}.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    get displayState() {
+      if (this.state === 'loading') return 'loading';
+      if (this.state === 'error')   return 'error';
+      if (this.items.length === 0)  return 'empty';
+      if (this.searchTerm && this.filteredItems.length === 0) return 'no-results';
+      return 'default';
+    },
+
+    get filteredItems() {
+      if (!this.searchTerm) return this.items;
+      const q = this.searchTerm.toLowerCase();
+      return this.items.filter(it => Object.values(it).some(v =>
+        v != null && String(v).toLowerCase().includes(q)));
+    },
+
+    get sortedItems() {
+      if (!this.sortColumn) return this.filteredItems;
+      const col = this.sortColumn;
+      const dir = this.sortDirection;
+      return [...this.filteredItems].sort((a, b) => {
+        let va = a[col] ?? '';
+        let vb = b[col] ?? '';
+        if (typeof va === 'string') va = va.toLowerCase();
+        if (typeof vb === 'string') vb = vb.toLowerCase();
+        if (va < vb) return dir === 'asc' ? -1 : 1;
+        if (va > vb) return dir === 'asc' ?  1 : -1;
+        return 0;
+      });
+    },
+
+    get totalPages() {
+      return Math.max(1, Math.ceil(this.sortedItems.length / this.pageSize));
+    },
+
+    get paginatedItems() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      return this.sortedItems.slice(start, start + this.pageSize);
+    },
+
+    onSearchChange() { this.currentPage = 1; this.refreshIcons(); },
+    clearSearch()    { this.searchTerm = ''; this.currentPage = 1; this.refreshIcons(); },
+
+    cycleSort(column) {
+      if (this.sortColumn !== column) {
+        this.sortColumn = column;
+        this.sortDirection = 'asc';
+      } else if (this.sortDirection === 'asc') {
+        this.sortDirection = 'desc';
+      } else {
+        this.sortColumn = null;
+        this.sortDirection = null;
+      }
+      this.currentPage = 1;
+      this.refreshIcons();
+    },
+
+    isSortedAsc(col)  { return this.sortColumn === col && this.sortDirection === 'asc'; },
+    isSortedDesc(col) { return this.sortColumn === col && this.sortDirection === 'desc'; },
+    isUnsorted(col)   { return this.sortColumn !== col; },
+
+    goPage(n) {
+      this.currentPage = Math.max(1, Math.min(n, this.totalPages));
+      this.refreshIcons();
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..6410906e68
--- /dev/null
+++ 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
@@ -0,0 +1,109 @@
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  List view fragment for ${name}. Rendered into #app by Pinecone on /${name}.
+  Its root x-data binds the generated ${name}ListPage component.
+-->
+<div x-data="${name}ListPage" class="vbox size-full">
+
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>${name}</span>
+    <div x-h-toolbar-spacer></div>
+    <div x-h-input-group data-size="sm">
+      <input x-h-input.group type="text" placeholder="Search ${name}..."
+             x-model="searchTerm" @input="onSearchChange()" />
+      <div x-h-input-group-addon data-align="inline-start">
+        <svg x-h-icon.search class="size-4" role="img" aria-label="search"></svg>
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading -->
+  <div x-show="displayState === 'loading'" class="p-4">
+    <div x-h-spinner></div>
+  </div>
+
+  <!-- Error -->
+  <div x-show="displayState === 'error'" x-h-info-page class="p-4">
+    <div x-h-info-page-header>
+      <div x-h-info-page-media.icon>
+        <svg x-h-icon.circle-error role="img" aria-label="error"></svg>
+      </div>
+      <div x-h-info-page-title>Could not load</div>
+      <div x-h-info-page-description x-text="error"></div>
+    </div>
+    <div x-h-info-page-content>
+      <button x-h-button data-variant="primary" @click="load()">Retry</button>
+    </div>
+  </div>
+
+  <!-- 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" data-lucide="inbox"></i></div>
+      <div x-h-info-page-title>No ${name} yet</div>
+      <div x-h-info-page-description>There is nothing to show here.</div>
+    </div>
+  </div>
+
+  <!-- Data -->
+  <div x-show="displayState === 'default' || displayState === 'no-results'" class="p-4 vbox gap-3">
+    <div x-h-table-container.scroll data-border="true" style="max-height: 70vh">
+      <table x-h-table data-borders="rows">
+        <thead x-h-table-header>
+          <tr x-h-table-row>
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+            <th x-h-table-head scope="col" data-hoverable="true" data-activable="true" @click="cycleSort('${property.name}')">
+              <div class="hbox items-center justify-between">
+                ${property.name}
+                <i role="img" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></i>
+                <i role="img" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></i>
+                <i role="img" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></i>
+              </div>
+            </th>
+#end
+#end
+#if($hasProcess)
+            <th x-h-table-head scope="col"></th>
+#end
+          </tr>
+        </thead>
+        <tbody x-h-table-body>
+          <tr x-show="displayState === 'no-results'" x-h-table-row>
+            <td x-h-table-cell>No matching ${name}.</td>
+          </tr>
+          <template x-for="row in paginatedItems" :key="row.${primaryKeysString}">
+            <tr x-h-table-row data-hoverable="true">
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+              <td x-h-table-cell x-text="row.${property.name}"></td>
+#end
+#end
+#if($hasProcess)
+              <td x-h-table-cell data-row-actions>
+                <button x-show="$store.processTasks.getTasks(row).length" x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Pending tasks">
+                  <i role="img" data-lucide="inbox"></i><span x-text="$store.processTasks.getTasks(row).length"></span>
+                </button>
+                <div x-show="$store.processTasks.getTasks(row).length" x-h-popover data-innerclicks="true">
+                  <ul x-h-menu>
+                    <template x-for="task in $store.processTasks.getTasks(row)" :key="task.id">
+                      <li x-h-menu-item @click="$store.processTasks.openTask(task)" x-text="task.name"></li>
+                    </template>
+                  </ul>
+                </div>
+              </td>
+#end
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <nav x-h-pagination x-show="totalPages > 1">
+      <button x-h-pagination-prev @click="goPage(currentPage - 1)" :disabled="currentPage === 1">Previous</button>
+      <span x-h-pagination-item x-text="currentPage + ' / ' + totalPages"></span>
+      <button x-h-pagination-next @click="goPage(currentPage + 1)" :disabled="currentPage === totalPages">Next</button>
+    </nav>
+  </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/manage/form-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/form-page.js.template
new file mode 100644
index 0000000000..81547f2298
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-page.js.template
@@ -0,0 +1,198 @@
+#set($dollar = '$')
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Create/Edit form page for ${name}. One component serves both routes:
+ *   /${name}/create        -> create mode (empty form)
+ *   /${name}/{id}/edit     -> edit mode (loads the record by primary key)
+ * Built on baseFormPage: a 422 ValidationError from the REST controller is mapped
+ * onto per-field `errors` (see mapCauses), everything else into a banner.
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}FormPage', () => ({
+    ...baseFormPage(),
+
+    // empty-form | loading | ready | saving | validation-error | save-failure | load-failure
+    state: 'ready',
+    mode: 'create',          // 'create' | 'edit'
+    id: null,
+
+    // Form model — one entry per editable property (auto-increment PK excluded).
+    form: {
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement)
+#if($property.widgetType == "CHECKBOX")
+      ${property.name}: false,
+#elseif($property.widgetType == "NUMBER")
+      ${property.name}: null,
+#else
+      ${property.name}: '',
+#end
+#end
+#end
+    },
+
+    // Relationship dropdown options: [{ value, text }].
+#foreach($property in $properties)
+#if($property.widgetType == "DROPDOWN")
+    options${property.name}: [],
+#end
+#end
+
+    get isEdit() { return this.mode === 'edit'; },
+    get errorCount() { return Object.keys(this.errors).filter(k => this.errors[k]).length; },
+
+    // Controller path for ${name}, relative to App.config.restBase
+    // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+
+    async init() {
+      // The edit route is /${name}/{id}/edit — Pinecone exposes the param as `id`.
+      const params = (window.PineconeRouter.context && window.PineconeRouter.context.params) || {};
+      this.id = params.id ?? null;
+      this.mode = this.id != null ? 'edit' : 'create';
+
+#if($hasDropdowns)
+      await this.loadOptions();
+#end
+
+      if (this.isEdit) {
+        this.state = 'loading';
+        try {
+          const record = await App.services.api.get(this.apiPath + '/' + encodeURIComponent(this.id));
+          // Copy only known form fields so server-only props don't leak into the body.
+          for (const key of Object.keys(this.form)) {
+            if (record[key] !== undefined) this.form[key] = record[key];
+          }
+          // Date/time widgets need the HTML input format, not the backend's full ISO value.
+#foreach($property in $properties)
+#if($property.isDateType)
+          if (this.form.${property.name}) this.form.${property.name} = this.toDateInput(this.form.${property.name}, '${property.widgetType}');
+#end
+#end
+          this.state = 'ready';
+        } catch (e) {
+          this.applyLoadError(e, { fallbackMessage: 'Could not load the ${name} record.' });
+        }
+      } else {
+        // Prefill any form field whose name is supplied as a query param — used by
+        // master-detail "Add" to preset the FK to the master (e.g. ?Customer=3).
+        for (const key of Object.keys(this.form)) {
+          const v = this.queryParam(key);
+          if (v !== null) this.form[key] = v;
+        }
+        this.state = 'empty-form';
+      }
+      this.refreshIcons();
+    },
+
+#if($hasDropdowns)
+    async loadOptions() {
+#foreach($property in $properties)
+#if($property.widgetType == "DROPDOWN")
+      try {
+        // TODO (Phase 2): paginate/search large option sets (the Angular module
+        // lazy-loads + server-filters). Skeleton fetches the first page.
+        const rows${property.name} = await App.services.api.get('${property.widgetDropdownControllerUrl}', { baseUrl: '' });
+        this.options${property.name} = (rows${property.name} || []).map(e => ({
+          value: e.${property.widgetDropDownKey},
+          text: e.${property.widgetDropDownValue}
+        }));
+      } catch (e) {
+        console.error('[${name}FormPage] failed to load options for ${property.name}', e);
+      }
+#end
+#end
+    },
+
+    optionText(options, value) {
+      const found = (options || []).find(o => o.value === value);
+      return found ? found.text : value;
+    },
+#end
+
+    // Client-side schema (mirrors NOT NULL / format constraints). The server remains
+    // the source of truth — its 422 causes are mapped via baseFormPage.applyApiError.
+    validationSchema() {
+      return {
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && !$property.isCalculatedProperty && $property.isRequiredProperty == "true")
+        ${property.name}: [{ rule: 'required', message: 'This field is required.' }],
+#elseif(!$property.dataAutoIncrement && !$property.isCalculatedProperty && $property.widgetType == "EMAIL")
+        ${property.name}: [{ rule: 'email', message: 'Enter a valid email address.' }],
+#end
+#end
+      };
+    },
+
+    validate() {
+      const { errors, valid } = FormValidation.validate(this.form, this.validationSchema());
+      this.errors = errors;
+      return valid;
+    },
+
+    async save() {
+      if (!this.validate()) {
+        this.state = 'validation-error';
+        this.scrollToSummary();
+        return;
+      }
+      this.state = 'saving';
+      try {
+        const payload = this.toPayload();
+        if (this.isEdit) {
+          await App.services.api.put(this.apiPath + '/' + encodeURIComponent(this.id), payload);
+        } else {
+          await App.services.api.post(this.apiPath, payload);
+        }
+        this.navigateBack('/${name}');
+      } catch (e) {
+        this.applyApiError(e, {
+          fallbackMessage: this.isEdit ? 'Could not update the ${name} record.'
+                                       : 'Could not create the ${name} record.'
+        });
+      }
+    },
+
+    // Backend ISO temporal -> the value an HTML date/time input expects (by widget), so an
+    // edited record's dates populate the fields. e.g. "2026-06-09T16:04:00Z" -> "2026-06-09T16:04".
+    toDateInput(value, widget) {
+      const s = String(value);
+      switch (widget) {
+        case 'DATE': return s.slice(0, 10);
+        case 'DATETIME-LOCAL': return s.slice(0, 16);
+        case 'TIME': return s.slice(0, 5);
+        case 'MONTH': return s.slice(0, 7);
+        default: return s;
+      }
+    },
+
+    // Build the request body, converting date/time widgets to what the backend (java.time.*
+    // via Jackson) expects: an HTML date/datetime-local value (local, no zone) becomes a full
+    // ISO instant (…Z) so an Instant/Timestamp field parses — matching the AngularJS stack's
+    // `new Date(value)` conversion. A value that isn't a valid Date (e.g. a bare TIME "16:04")
+    // is passed through unchanged so a LocalTime field still parses it.
+    toPayload() {
+      const payload = { ...this.form };
+#foreach($property in $properties)
+#if($property.isDateType)
+      if (payload.${property.name} === '' || payload.${property.name} == null) {
+        payload.${property.name} = null;   // empty date -> null (Jackson can't parse '' as a temporal)
+      } else {
+        const _d${property.name} = new Date(payload.${property.name});
+        if (!isNaN(_d${property.name}.getTime())) payload.${property.name} = _d${property.name}.toISOString();
+      }
+#end
+#end
+      return payload;
+    },
+
+    cancel() {
+      this.navigateBack('/${name}');
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..5838e2a074
--- /dev/null
+++ 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
@@ -0,0 +1,129 @@
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Create/Edit form fragment for ${name}. Rendered into #app on /${name}/create
+  and /${name}/{id}/edit; its root x-data binds the generated ${name}FormPage.
+-->
+<div x-data="${name}FormPage" class="vbox size-full">
+
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title x-text="isEdit ? 'Edit ${name}' : 'New ${name}'"></span>
+  </div>
+
+  <!-- Load failure (edit) -->
+  <div x-show="state === 'load-failure'" x-h-info-page class="p-4">
+    <div x-h-info-page-header>
+      <div x-h-info-page-media.icon>
+        <svg x-h-icon.circle-error role="img" aria-label="error"></svg>
+      </div>
+      <div x-h-info-page-title>Could not load</div>
+      <div x-h-info-page-description x-text="loadFailureMessage"></div>
+    </div>
+    <div x-h-info-page-content>
+      <button x-h-button data-variant="outline" @click="cancel()">Back</button>
+    </div>
+  </div>
+
+  <!-- Loading (edit) -->
+  <div x-show="state === 'loading'" class="p-4"><div x-h-spinner></div></div>
+
+  <!-- Form -->
+  <form x-show="state !== 'loading' && state !== 'load-failure'" @submit.prevent="save()"
+        class="vbox gap-4 p-4" style="max-width: 720px;">
+
+    <!-- Error summary banner: save failure or unmatched 422 causes -->
+    <div x-show="saveFailureMessage || errors.__summary" x-h-alert data-variant="negative" role="alert">
+      <svg x-h-icon.circle-error role="img" aria-label="error"></svg>
+      <div x-h-alert-title>Could not save</div>
+      <div x-h-alert-description>
+        <span x-show="saveFailureMessage" x-text="saveFailureMessage"></span>
+        <span x-show="errors.__summary" x-text="errors.__summary"></span>
+      </div>
+    </div>
+
+    <div x-h-field-group>
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement)
+#set($readonly = ($property.isCalculatedProperty == "true" || $property.isReadOnlyProperty == "true" || ($property.auditType && $property.auditType != "NONE")))
+      <!-- ${property.name} (${property.widgetType}) -->
+      <div x-h-field>
+#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>
+          <label x-h-label for="f_${property.name}">${property.name}#if($property.isRequiredProperty == "true") *#end</label>
+        </div>
+#else
+        <label x-h-label for="f_${property.name}">${property.name}#if($property.isRequiredProperty == "true") *#end</label>
+#if($property.widgetType == "DROPDOWN")
+        <div x-h-select#if($readonly) data-disabled="true"#end>
+          <input x-h-select-input id="f_${property.name}" x-model="form.${property.name}"
+                 :aria-invalid="!!errors.${property.name}"
+                 placeholder="Select ${property.name}..." />
+          <button x-h-select-clear></button>
+          <div x-h-select-content>
+            <template x-for="opt in options${property.name}" :key="opt.value">
+              <div x-h-select-option="opt.text" :data-value="opt.value"></div>
+            </template>
+          </div>
+        </div>
+#elseif($property.widgetType == "NUMBER")
+        <div x-h-input-number>
+          <input type="number" id="f_${property.name}" x-model.number="form.${property.name}"
+                 :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+        </div>
+#elseif($property.widgetType == "TEXTAREA")
+        <textarea x-h-textarea id="f_${property.name}" rows="4" x-model="form.${property.name}"
+                  :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end></textarea>
+#elseif($property.widgetType == "COLOR")
+        <input x-h-input type="color" id="f_${property.name}" x-model="form.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "EMAIL")
+        <input x-h-input type="email" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "URL")
+        <input x-h-input type="url" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "TEL")
+        <input x-h-input type="tel" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "DATE")
+        <!-- TODO (Phase 4): upgrade to x-h-date-picker -->
+        <input x-h-input type="date" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "DATETIME-LOCAL")
+        <input x-h-input type="datetime-local" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "TIME")
+        <input x-h-input type="time" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "MONTH")
+        <input x-h-input type="month" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#elseif($property.widgetType == "WEEK")
+        <input x-h-input type="week" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#else
+        <input x-h-input type="text" id="f_${property.name}" x-model="form.${property.name}"
+               :aria-invalid="!!errors.${property.name}"#if($readonly) readonly#end />
+#end
+#end
+        <p x-h-field-error x-show="errors.${property.name}" x-text="errors.${property.name}"></p>
+#if($property.description)
+        <p x-h-field-description data-hide-on-error="true">${property.description}</p>
+#end
+      </div>
+#end
+#end
+    </div>
+
+    <div x-h-toolbar.footer>
+      <div x-h-toolbar-spacer></div>
+      <button type="button" x-h-button data-variant="transparent" @click="cancel()" :disabled="state === 'saving'">Cancel</button>
+      <button type="submit" x-h-button data-variant="primary" :disabled="state === 'saving'">
+        <span x-show="state === 'saving'" x-h-spinner></span>
+        <span x-text="isEdit ? 'Save' : 'Create'"></span>
+      </button>
+    </div>
+  </form>
+
+</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
new file mode 100644
index 0000000000..f8187f4d65
--- /dev/null
+++ 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
@@ -0,0 +1,127 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Manage list page for ${name} — the list state machine plus CRUD navigation
+ * (New / Edit) and inline Delete with a confirmation dialog. Create/Edit happen
+ * on the routed ${name}FormPage (/${name}/create, /${name}/{id}/edit).
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}ManageListPage', () => ({
+    ...basePage(),
+    state: 'loading',
+    items: [],
+    error: null,
+    searchTerm: '',
+    sortColumn: null,
+    sortDirection: null,
+    currentPage: 1,
+    pageSize: 10,
+
+    // Delete confirmation.
+    deleteOpen: false,
+    deleteTarget: null,
+    deleteBusy: false,
+    deleteError: '',
+
+    // Controller path for ${name}, relative to App.config.restBase
+    // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+
+    async init() {
+      await this.load();
+    },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      this.currentPage = 1;
+      try {
+        this.items = await App.services.api.get(this.apiPath);
+        this.state = this.items.length === 0 ? 'empty' : 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not load ${name}.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    get displayState() {
+      if (this.state === 'loading') return 'loading';
+      if (this.state === 'error')   return 'error';
+      if (this.items.length === 0)  return 'empty';
+      if (this.searchTerm && this.filteredItems.length === 0) return 'no-results';
+      return 'default';
+    },
+
+    get filteredItems() {
+      if (!this.searchTerm) return this.items;
+      const q = this.searchTerm.toLowerCase();
+      return this.items.filter(it => Object.values(it).some(v =>
+        v != null && String(v).toLowerCase().includes(q)));
+    },
+
+    get sortedItems() {
+      if (!this.sortColumn) return this.filteredItems;
+      const col = this.sortColumn, dir = this.sortDirection;
+      return [...this.filteredItems].sort((a, b) => {
+        let va = a[col] ?? '', vb = b[col] ?? '';
+        if (typeof va === 'string') va = va.toLowerCase();
+        if (typeof vb === 'string') vb = vb.toLowerCase();
+        if (va < vb) return dir === 'asc' ? -1 : 1;
+        if (va > vb) return dir === 'asc' ?  1 : -1;
+        return 0;
+      });
+    },
+
+    get totalPages() { return Math.max(1, Math.ceil(this.sortedItems.length / this.pageSize)); },
+    get paginatedItems() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      return this.sortedItems.slice(start, start + this.pageSize);
+    },
+
+    onSearchChange() { this.currentPage = 1; this.refreshIcons(); },
+    clearSearch()    { this.searchTerm = ''; this.currentPage = 1; this.refreshIcons(); },
+
+    cycleSort(column) {
+      if (this.sortColumn !== column) { this.sortColumn = column; this.sortDirection = 'asc'; }
+      else if (this.sortDirection === 'asc') { this.sortDirection = 'desc'; }
+      else { this.sortColumn = null; this.sortDirection = null; }
+      this.currentPage = 1;
+      this.refreshIcons();
+    },
+    isSortedAsc(col)  { return this.sortColumn === col && this.sortDirection === 'asc'; },
+    isSortedDesc(col) { return this.sortColumn === col && this.sortDirection === 'desc'; },
+    isUnsorted(col)   { return this.sortColumn !== col; },
+
+    goPage(n) { this.currentPage = Math.max(1, Math.min(n, this.totalPages)); this.refreshIcons(); },
+
+    newEntity()  { window.PineconeRouter.navigate('/${name}/create'); },
+    editEntity(row) { window.PineconeRouter.navigate('/${name}/' + encodeURIComponent(row.${primaryKeysString}) + '/edit'); },
+
+    askDelete(row) {
+      this.deleteTarget = row;
+      this.deleteError = '';
+      this.deleteOpen = true;
+    },
+
+    async confirmDelete() {
+      if (!this.deleteTarget) return;
+      this.deleteBusy = true;
+      this.deleteError = '';
+      try {
+        await App.services.api.delete(this.apiPath + '/' + encodeURIComponent(this.deleteTarget.${primaryKeysString}));
+        this.deleteOpen = false;
+        this.deleteTarget = null;
+        await this.load();
+      } catch (e) {
+        this.deleteError = App.services.apiErrors.messageFor(e, 'Could not delete the ${name} record.');
+      } finally {
+        this.deleteBusy = false;
+      }
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..b42cdb0854
--- /dev/null
+++ 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
@@ -0,0 +1,142 @@
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Manage (CRUD) list fragment for ${name}. Rendered into #app on /${name}.
+  Root x-data binds the generated ${name}ManageListPage.
+-->
+<div x-data="${name}ManageListPage" class="vbox size-full">
+
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>${name}</span>
+    <div x-h-toolbar-spacer></div>
+    <div x-h-input-group data-size="sm">
+      <input x-h-input.group type="text" placeholder="Search ${name}..."
+             x-model="searchTerm" @input="onSearchChange()" />
+      <div x-h-input-group-addon data-align="inline-start">
+        <svg x-h-icon.search class="size-4" role="img" aria-label="search"></svg>
+      </div>
+    </div>
+    <button x-h-button data-variant="primary" @click="newEntity()">
+      <i role="img" data-lucide="plus"></i>
+      <span>New</span>
+    </button>
+  </div>
+
+  <!-- Loading -->
+  <div x-show="displayState === 'loading'" class="p-4"><div x-h-spinner></div></div>
+
+  <!-- Error -->
+  <div x-show="displayState === 'error'" x-h-info-page class="p-4">
+    <div x-h-info-page-header>
+      <div x-h-info-page-media.icon><svg x-h-icon.circle-error role="img" aria-label="error"></svg></div>
+      <div x-h-info-page-title>Could not load</div>
+      <div x-h-info-page-description x-text="error"></div>
+    </div>
+    <div x-h-info-page-content>
+      <button x-h-button data-variant="primary" @click="load()">Retry</button>
+    </div>
+  </div>
+
+  <!-- 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" data-lucide="inbox"></i></div>
+      <div x-h-info-page-title>No ${name} yet</div>
+      <div x-h-info-page-description>Get started by creating the first record.</div>
+    </div>
+    <div x-h-info-page-content>
+      <button x-h-button data-variant="primary" @click="newEntity()">New ${name}</button>
+    </div>
+  </div>
+
+  <!-- Data -->
+  <div x-show="displayState === 'default' || displayState === 'no-results'" class="p-4 vbox gap-3">
+    <div x-h-table-container.scroll data-border="true" style="max-height: 70vh">
+      <table x-h-table data-borders="rows">
+        <thead x-h-table-header>
+          <tr x-h-table-row>
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+            <th x-h-table-head scope="col" data-hoverable="true" data-activable="true" @click="cycleSort('${property.name}')">
+              <div class="hbox items-center justify-between">
+                ${property.name}
+                <i role="img" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></i>
+                <i role="img" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></i>
+                <i role="img" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></i>
+              </div>
+            </th>
+#end
+#end
+            <th x-h-table-head scope="col"></th>
+          </tr>
+        </thead>
+        <tbody x-h-table-body>
+          <tr x-show="displayState === 'no-results'" x-h-table-row>
+            <td x-h-table-cell>No matching ${name}.</td>
+          </tr>
+          <template x-for="row in paginatedItems" :key="row.${primaryKeysString}">
+            <tr x-h-table-row data-hoverable="true">
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+              <td x-h-table-cell x-text="row.${property.name}"></td>
+#end
+#end
+              <td x-h-table-cell data-row-actions>
+#if($hasProcess)
+                <button x-show="$store.processTasks.getTasks(row).length" x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Pending tasks">
+                  <i role="img" data-lucide="inbox"></i><span x-text="$store.processTasks.getTasks(row).length"></span>
+                </button>
+                <div x-show="$store.processTasks.getTasks(row).length" x-h-popover data-innerclicks="true">
+                  <ul x-h-menu>
+                    <template x-for="task in $store.processTasks.getTasks(row)" :key="task.id">
+                      <li x-h-menu-item @click="$store.processTasks.openTask(task)" x-text="task.name"></li>
+                    </template>
+                  </ul>
+                </div>
+#end
+                <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions">
+                  <i role="img" data-lucide="ellipsis"></i>
+                </button>
+                <ul x-h-menu data-align="bottom-end">
+                  <li x-h-menu-item @click="editEntity(row)">Edit</li>
+                  <li x-h-menu-separator></li>
+                  <li x-h-menu-item data-variant="negative" @click="askDelete(row)">Delete</li>
+                </ul>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <nav x-h-pagination x-show="totalPages > 1">
+      <button x-h-pagination-prev @click="goPage(currentPage - 1)" :disabled="currentPage === 1">Previous</button>
+      <span x-h-pagination-item x-text="currentPage + ' / ' + totalPages"></span>
+      <button x-h-pagination-next @click="goPage(currentPage + 1)" :disabled="currentPage === totalPages">Next</button>
+    </nav>
+  </div>
+
+  <!-- Delete confirmation -->
+  <div x-h-dialog-overlay :data-open="deleteOpen">
+    <div x-h-dialog>
+      <div x-h-dialog-header>
+        <h2 x-h-dialog-title>Delete ${name}</h2>
+        <p x-h-dialog-description>This action cannot be undone.</p>
+        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"></button>
+      </div>
+      <div x-h-dialog-content>
+        <p>Are you sure you want to delete this record?</p>
+        <div x-show="deleteError" x-h-alert data-variant="negative" role="alert" class="mt-2">
+          <div x-h-alert-description x-text="deleteError"></div>
+        </div>
+      </div>
+      <div x-h-dialog-footer>
+        <button x-h-button data-variant="outline" @click="deleteOpen = false" :disabled="deleteBusy">Cancel</button>
+        <button x-h-button data-variant="negative" @click="confirmDelete()" :disabled="deleteBusy">
+          <span x-show="deleteBusy" x-h-spinner></span>
+          <span>Delete</span>
+        </button>
+      </div>
+    </div>
+  </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/master/detail-register.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/detail-register.js.template
new file mode 100644
index 0000000000..be1908812f
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/detail-register.js.template
@@ -0,0 +1,26 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Registers ${name} as a detail of its master (${masterEntity}) so the master page can render
+ * a generic detailPanel for it. Runs at load (App + App.config are already defined). The detail's
+ * own create/edit form is the routed ${name}FormPage (reused manage form).
+ */
+App.registerDetail('${masterEntity}', {
+  entity: '${name}',
+  label: '${name}',
+  apiPath: '/${javaPerspectiveName}/${name}Controller',
+  masterEntityId: '${masterEntityId}',
+  primaryKey: '${primaryKeysString}',
+  returnTo: '/${masterEntity}',
+  columns: [
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor && $property.name != $masterEntityId)
+    { name: '${property.name}' },
+#end
+#end
+  ],
+});
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
new file mode 100644
index 0000000000..3a1f67b8c4
--- /dev/null
+++ 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
@@ -0,0 +1,83 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Master page for ${name}: a list of master records (left), and for the selected record its
+ * detail panels (right). Create/Edit/Delete of the master itself route to the reused
+ * ${name}FormPage (/${name}/create, /${name}/{id}/edit). Detail panels are discovered from the
+ * runtime registry (App.detailsFor('${name}')) so masters and details stay decoupled.
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}MasterPage', () => ({
+    ...basePage(),
+
+    // <restBase>/<perspective>/<Entity>Controller (the master's own controller).
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+
+    state: 'loading',          // loading | error | empty | default
+    masters: [],
+    error: null,
+    searchTerm: '',
+    selected: null,
+    detailDefs: [],
+
+    deleteOpen: false,
+    deleteTarget: null,
+    deleteBusy: false,
+
+    async init() {
+      this.detailDefs = App.detailsFor('${name}');
+      await this.load();
+    },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        this.masters = await App.services.api.get(this.apiPath);
+        this.state = this.masters.length === 0 ? 'empty' : 'default';
+        // Keep the current selection if it still exists, else clear.
+        if (this.selected) {
+          this.selected = this.masters.find(m => m.${primaryKeysString} === this.selected.${primaryKeysString}) || null;
+        }
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not load ${name}.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    get filteredMasters() {
+      if (!this.searchTerm) return this.masters;
+      const q = this.searchTerm.toLowerCase();
+      return this.masters.filter(m => Object.values(m).some(v => v != null && String(v).toLowerCase().includes(q)));
+    },
+
+    get selectedId() { return this.selected ? this.selected.${primaryKeysString} : null; },
+    isSelected(row) { return this.selected && row.${primaryKeysString} === this.selected.${primaryKeysString}; },
+    selectRow(row) { this.selected = row; this.refreshIcons(); },
+
+    newMaster()  { window.PineconeRouter.navigate('/${name}/create'); },
+    editMaster(row) { window.PineconeRouter.navigate('/${name}/' + encodeURIComponent(row.${primaryKeysString}) + '/edit'); },
+
+    askDelete(row) { this.deleteTarget = row; this.deleteOpen = true; },
+    async confirmDelete() {
+      if (!this.deleteTarget) return;
+      this.deleteBusy = true;
+      try {
+        await App.services.api.delete(this.apiPath + '/' + encodeURIComponent(this.deleteTarget.${primaryKeysString}));
+        if (this.selected && this.selected.${primaryKeysString} === this.deleteTarget.${primaryKeysString}) this.selected = null;
+        this.deleteOpen = false;
+        this.deleteTarget = null;
+        await this.load();
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not delete the ${name} record.');
+      } finally {
+        this.deleteBusy = false;
+      }
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..eeb908b8b8
--- /dev/null
+++ 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
@@ -0,0 +1,174 @@
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Master-detail view for ${name}: master list (left) + the selected record's detail panels
+  (right), via x-h-split. Root x-data binds the generated ${name}MasterPage; detail panels are
+  generic detailPanel components driven by the runtime registry (App.detailsFor).
+-->
+<div x-data="${name}MasterPage" class="vbox size-full">
+
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>${name}</span>
+    <div x-h-toolbar-spacer></div>
+    <div x-h-input-group data-size="sm">
+      <input x-h-input.group type="text" placeholder="Search ${name}..." x-model="searchTerm" @input="refreshIcons()" />
+      <div x-h-input-group-addon data-align="inline-start"><svg x-h-icon.search class="size-4" role="img" aria-label="search"></svg></div>
+    </div>
+    <button x-h-button data-variant="primary" @click="newMaster()"><i role="img" data-lucide="plus"></i><span>New</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>
+
+  <div x-show="state === 'default' || state === 'empty'" x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+
+    <!-- Master list -->
+    <div x-h-split-panel data-default-size="35" data-min="280">
+      <div x-h-table-container.scroll class="size-full">
+        <table x-h-table data-borders="rows">
+          <thead x-h-table-header>
+            <tr x-h-table-row>
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+              <th x-h-table-head scope="col">${property.name}</th>
+#end
+#end
+              <th x-h-table-head scope="col"></th>
+            </tr>
+          </thead>
+          <tbody x-h-table-body>
+            <tr x-show="filteredMasters.length === 0" x-h-table-row><td x-h-table-cell>No ${name}.</td></tr>
+            <template x-for="row in filteredMasters" :key="row.${primaryKeysString}">
+              <tr x-h-table-row data-hoverable="true" :data-state="isSelected(row) ? 'selected' : ''" @click="selectRow(row)">
+#foreach($property in $properties)
+#if(!$property.dataAutoIncrement && $property.widgetIsMajor)
+                <td x-h-table-cell x-text="row.${property.name}"></td>
+#end
+#end
+                <td x-h-table-cell data-row-actions>
+#if($hasProcess)
+                  <button x-show="$store.processTasks.getTasks(row).length" x-h-button x-h-popover-trigger data-variant="transparent" data-size="icon-sm" aria-label="Pending tasks">
+                    <i role="img" data-lucide="inbox"></i><span x-text="$store.processTasks.getTasks(row).length"></span>
+                  </button>
+                  <div x-show="$store.processTasks.getTasks(row).length" x-h-popover data-innerclicks="true">
+                    <ul x-h-menu>
+                      <template x-for="task in $store.processTasks.getTasks(row)" :key="task.id">
+                        <li x-h-menu-item @click="$store.processTasks.openTask(task)" x-text="task.name"></li>
+                      </template>
+                    </ul>
+                  </div>
+#end
+                  <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><i role="img" data-lucide="ellipsis"></i></button>
+                  <ul x-h-menu data-align="bottom-end">
+                    <li x-h-menu-item @click="editMaster(row)">Edit</li>
+                    <li x-h-menu-separator></li>
+                    <li x-h-menu-item data-variant="negative" @click="askDelete(row)">Delete</li>
+                  </ul>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Detail area for the selected master -->
+    <div x-h-split-panel>
+      <div x-show="!selectedId" x-h-info-page class="p-4">
+        <div x-h-info-page-header>
+          <div x-h-info-page-media.icon><svg x-h-icon.circle-info role="img" aria-label="info"></svg></div>
+          <div x-h-info-page-title>Select a ${name}</div>
+          <div x-h-info-page-description>Choose a record on the left to see and manage its details.</div>
+        </div>
+      </div>
+
+      <div x-show="selectedId" class="vbox gap-4 p-4 overflow-auto">
+        <div x-h-toolbar data-variant="transparent" data-size="sm">
+          <span x-h-toolbar-title x-text="'${name} #' + selectedId"></span>
+          <div x-h-toolbar-spacer></div>
+          <button x-h-button data-variant="outline" data-size="sm" @click="editMaster(selected)">Edit ${name}</button>
+        </div>
+
+        <div x-show="detailDefs.length === 0" x-h-text.muted>This ${name} has no detail collections.</div>
+
+        <!-- One detail panel per registered detail; re-keyed on selection so it reloads. -->
+        <template x-for="d in detailDefs" :key="d.entity + ':' + selectedId">
+          <div x-data="detailPanel(d, selectedId)" x-h-card>
+            <div x-h-card-header>
+              <h3 x-h-card-title x-text="d.label"></h3>
+              <div x-h-card-action>
+                <button x-h-button data-variant="primary" data-size="sm" @click="addRow()"><i role="img" data-lucide="plus"></i><span>Add</span></button>
+              </div>
+            </div>
+            <div x-h-card-content>
+              <div x-show="state === 'loading'"><div x-h-spinner></div></div>
+              <div x-show="state === 'error'" x-h-text.muted x-text="error"></div>
+              <div x-show="state === 'empty'" x-h-text.muted>No records yet.</div>
+              <div x-show="state === 'default'" x-h-table-container.scroll style="max-height: 320px">
+                <table x-h-table data-borders="rows">
+                  <thead x-h-table-header>
+                    <tr x-h-table-row>
+                      <template x-for="col in def.columns" :key="col.name">
+                        <th x-h-table-head scope="col" x-text="col.name"></th>
+                      </template>
+                      <th x-h-table-head scope="col"></th>
+                    </tr>
+                  </thead>
+                  <tbody x-h-table-body>
+                    <template x-for="row in rows" :key="row[def.primaryKey]">
+                      <tr x-h-table-row data-hoverable="true">
+                        <template x-for="col in def.columns" :key="col.name">
+                          <td x-h-table-cell x-text="row[col.name]"></td>
+                        </template>
+                        <td x-h-table-cell data-row-actions>
+                          <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Row actions"><i role="img" data-lucide="ellipsis"></i></button>
+                          <ul x-h-menu data-align="bottom-end">
+                            <li x-h-menu-item @click="editRow(row)">Edit</li>
+                            <li x-h-menu-separator></li>
+                            <li x-h-menu-item data-variant="negative" @click="askDelete(row)">Delete</li>
+                          </ul>
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Detail delete confirmation -->
+            <div x-h-dialog-overlay :data-open="deleteOpen">
+              <div x-h-dialog>
+                <div x-h-dialog-header>
+                  <h2 x-h-dialog-title x-text="'Delete ' + def.label"></h2>
+                  <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"></button>
+                </div>
+                <div x-h-dialog-content><p>Are you sure? This cannot be undone.</p></div>
+                <div x-h-dialog-footer>
+                  <button x-h-button data-variant="outline" @click="deleteOpen = false" :disabled="deleteBusy">Cancel</button>
+                  <button x-h-button data-variant="negative" @click="confirmDelete()" :disabled="deleteBusy"><span x-show="deleteBusy" x-h-spinner></span><span>Delete</span></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <!-- Master delete confirmation -->
+  <div x-h-dialog-overlay :data-open="deleteOpen">
+    <div x-h-dialog>
+      <div x-h-dialog-header>
+        <h2 x-h-dialog-title>Delete ${name}</h2>
+        <button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"></button>
+      </div>
+      <div x-h-dialog-content><p>Are you sure you want to delete this ${name}? This cannot be undone.</p></div>
+      <div x-h-dialog-footer>
+        <button x-h-button data-variant="outline" @click="deleteOpen = false" :disabled="deleteBusy">Cancel</button>
+        <button x-h-button data-variant="negative" @click="confirmDelete()" :disabled="deleteBusy"><span x-show="deleteBusy" x-h-spinner></span><span>Delete</span></button>
+      </div>
+    </div>
+  </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/chart-page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-page.js.template
new file mode 100644
index 0000000000..30eac3d4a3
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-page.js.template
@@ -0,0 +1,47 @@
+#set($dollar = '$')
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/* Report chart page for ${name}: rows from the report controller rendered as a chart.js chart. */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}ReportPage', () => ({
+    ...basePage(),
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+    state: 'loading',   // loading | error | empty | default
+    error: null,
+    _chart: null,
+
+    async init() { await this.load(); },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        const rows = await App.services.api.get(this.apiPath);
+        this.state = rows.length === 0 ? 'empty' : 'default';
+        if (rows.length) this.$nextTick(() => this.render(rows));
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not run the ${name} report.');
+        this.state = 'error';
+      }
+    },
+
+    render(rows) {
+      const type =
+#if($layoutType == "REPORT_BAR")'bar'#elseif($layoutType == "REPORT_LINE")'line'#elseif($layoutType == "REPORT_PIE")'pie'#elseif($layoutType == "REPORT_DOUGHNUT")'doughnut'#elseif($layoutType == "REPORT_POLARAREA")'polarArea'#elseif($layoutType == "REPORT_RADAR")'radar'#else'bar'#end;
+      const labels = rows.map(e => e.#foreach($property in $properties)#if($property.dataPrimaryKey)${property.name}#end#end);
+      const datasets = [
+#foreach($property in $properties)
+#if(!$property.dataPrimaryKey)
+        { label: #if($property.widgetLabel)'${property.widgetLabel}'#else'${property.name}'#end, data: rows.map(e => e.${property.name}), borderWidth: 1#if($layoutType == "REPORT_LINE"), fill: true#end },
+#end
+#end
+      ];
+      if (this._chart) this._chart.destroy();
+      this._chart = new Chart(this.$refs.canvas, { type, data: { labels, datasets } });
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..f15c18c896
--- /dev/null
+++ 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
@@ -0,0 +1,14 @@
+<!-- Generated by Eclipse Dirigible. Report chart view for ${name} (chart.js). -->
+<div x-data="${name}ReportPage" class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>${name}</span>
+    <div x-h-toolbar-spacer></div>
+    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" data-lucide="refresh-cw"></i><span>Refresh</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>
+  <div x-show="state === 'empty'" x-h-text.muted class="p-4">The ${name} report returned no rows.</div>
+  <div x-show="state === 'default'" class="p-4" style="position: relative; height: 70vh;">
+    <canvas x-ref="canvas"></canvas>
+  </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-page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-page.js.template
new file mode 100644
index 0000000000..15781d9348
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-page.js.template
@@ -0,0 +1,53 @@
+#set($dollar = '$')
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/* Report table page for ${name}: rows from the generated report controller, rendered as a table. */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('${name}ReportPage', () => ({
+    ...basePage(),
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
+    rows: [],
+    state: 'loading',   // loading | error | empty | default
+    error: null,
+
+    async init() { await this.load(); },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        this.rows = await App.services.api.get(this.apiPath);
+        this.state = this.rows.length === 0 ? 'empty' : 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not run the ${name} report.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    async exportCsv() {
+      try {
+        const data = await App.services.api.post(this.apiPath + '/export', {});
+        const csv = Array.isArray(data) ? toCsv(data) : '';
+        const blob = new Blob([csv], { type: 'text/csv' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = '${name}.csv';
+        a.click();
+        URL.revokeObjectURL(a.href);
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Export failed.');
+      }
+      function toCsv(rows) {
+        if (!rows.length) return '';
+        const cols = Object.keys(rows[0]);
+        const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
+        return [cols.join(',')].concat(rows.map(r => cols.map(c => esc(r[c])).join(','))).join('\n');
+      }
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..2749ad8b79
--- /dev/null
+++ 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
@@ -0,0 +1,40 @@
+<!-- Generated by Eclipse Dirigible. Report table view for ${name}. -->
+<div x-data="${name}ReportPage" class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>${name}</span>
+    <div x-h-toolbar-spacer></div>
+    <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" data-lucide="refresh-cw"></i><span>Refresh</span></button>
+    <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><i role="img" data-lucide="download"></i><span>Export</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>
+  <div x-show="state === 'empty'" x-h-info-page class="p-4">
+    <div x-h-info-page-header>
+      <div x-h-info-page-media.icon><svg x-h-icon.circle-info role="img" aria-label="info"></svg></div>
+      <div x-h-info-page-title>No data</div>
+      <div x-h-info-page-description>The ${name} report returned no rows.</div>
+    </div>
+  </div>
+  <div x-show="state === 'default'" class="p-4">
+    <div x-h-table-container.scroll data-border="true" style="max-height: 75vh">
+      <table x-h-table data-borders="both">
+        <thead x-h-table-header>
+          <tr x-h-table-row>
+#foreach($property in $properties)
+            <th x-h-table-head scope="col">#if($property.widgetLabel)${property.widgetLabel}#else${property.name}#end</th>
+#end
+          </tr>
+        </thead>
+        <tbody x-h-table-body>
+          <template x-for="(row, i) in rows" :key="i">
+            <tr x-h-table-row data-hoverable="true">
+#foreach($property in $properties)
+              <td x-h-table-cell x-text="row.${property.name}"></td>
+#end
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </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/css/app.css.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/css/app.css.template
new file mode 100644
index 0000000000..651a5e1946
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/css/app.css.template
@@ -0,0 +1,13 @@
+/*
+ * App-level overrides on top of Harmonia's compiled CSS.
+ * Theme via CSS variables (see HARMONIA_RUNTIME_PLAN.md "Theming via CSS Variables").
+ * Adopted from codbex-athena-app (css/app.css).
+ */
+html, body { height: 100%; margin: 0; }
+
+[x-cloak] { display: none !important; }
+
+/* TODO (Phase 4): brand tokens + light/dark parity bridged from the platform theme. */
+:root {
+  /* --primary: oklch(0.55 0.22 260); */
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/documents.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/documents.html.template
new file mode 100644
index 0000000000..3a9041f83e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/documents.html.template
@@ -0,0 +1,81 @@
+<!-- Generated by Eclipse Dirigible. Built-in Documents view (CMS folder browser). -->
+<div x-data="documentsPage" class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>Documents</span>
+    <div x-h-toolbar-spacer></div>
+    <button x-h-button data-variant="outline" data-size="sm" @click="newFolderOpen = true; newFolderName = ''"><i role="img" data-lucide="folder-plus"></i><span>New folder</span></button>
+    <label x-h-button data-variant="outline" data-size="sm" style="cursor:pointer;">
+      <i role="img" data-lucide="upload"></i><span>Upload</span>
+      <input type="file" multiple class="hidden" @change="upload($event)" />
+    </label>
+  </div>
+
+  <!-- Breadcrumb -->
+  <nav x-h-breadcrumb data-overflow="scroll" class="px-4">
+    <ol x-h-breadcrumb-list>
+      <template x-for="(c, i) in crumbs" :key="c.path">
+        <li x-h-breadcrumb-item>
+          <button x-show="i < crumbs.length - 1" x-h-breadcrumb-link @click="load(c.path)" x-text="c.label"></button>
+          <span x-show="i === crumbs.length - 1" x-h-breadcrumb-page x-text="c.label"></span>
+        </li>
+      </template>
+    </ol>
+  </nav>
+
+  <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>
+
+  <div x-show="state === 'default'" class="p-4">
+    <div x-show="folder.children.length === 0" x-h-text.muted>This folder is empty.</div>
+    <div x-h-table-container.scroll data-border="true" x-show="folder.children.length" style="max-height: 74vh">
+      <table x-h-table data-borders="rows">
+        <thead x-h-table-header>
+          <tr x-h-table-row><th x-h-table-head scope="col">Name</th><th x-h-table-head scope="col">Type</th><th x-h-table-head scope="col"></th></tr>
+        </thead>
+        <tbody x-h-table-body>
+          <template x-for="item in folder.children" :key="item.path">
+            <tr x-h-table-row data-hoverable="true">
+              <th x-h-table-head scope="row">
+                <button x-h-button data-variant="link" @click="open(item)">
+                  <i role="img" :data-lucide="isFolder(item) ? 'folder' : 'file'"></i>
+                  <span x-text="item.name"></span>
+                </button>
+              </th>
+              <td x-h-table-cell x-text="isFolder(item) ? 'Folder' : 'File'"></td>
+              <td x-h-table-cell data-row-actions>
+                <a x-show="!isFolder(item)" x-h-button data-variant="transparent" data-size="icon-sm" :href="downloadUrl(item)" target="_blank" aria-label="Download"><i role="img" data-lucide="download"></i></a>
+                <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askDelete(item)" aria-label="Delete"><svg x-h-icon.trash role="img" aria-label="delete"></svg></button>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- 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>New folder</h2><button x-h-dialog-close @click="newFolderOpen = false" aria-label="Close"></button></div>
+      <div x-h-dialog-content>
+        <div x-h-field><label x-h-label for="nf">Folder name</label><input x-h-input id="nf" type="text" x-model="newFolderName" @keydown.enter="createFolder()" /></div>
+      </div>
+      <div x-h-dialog-footer>
+        <button x-h-button data-variant="outline" @click="newFolderOpen = false" :disabled="busy">Cancel</button>
+        <button x-h-button data-variant="primary" @click="createFolder()" :disabled="busy">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete dialog -->
+  <div x-h-dialog-overlay :data-open="deleteOpen">
+    <div x-h-dialog>
+      <div x-h-dialog-header><h2 x-h-dialog-title>Delete</h2><button x-h-dialog-close @click="deleteOpen = false" aria-label="Close"></button></div>
+      <div x-h-dialog-content><p>Delete <strong x-text="deleteTarget && deleteTarget.name"></strong>? This cannot be undone.</p></div>
+      <div x-h-dialog-footer>
+        <button x-h-button data-variant="outline" @click="deleteOpen = false" :disabled="busy">Cancel</button>
+        <button x-h-button data-variant="negative" @click="confirmDelete()" :disabled="busy">Delete</button>
+      </div>
+    </div>
+  </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/inbox.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/inbox.html.template
new file mode 100644
index 0000000000..140881d942
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/inbox.html.template
@@ -0,0 +1,52 @@
+<!-- Generated by Eclipse Dirigible. Built-in Process Inbox view (the user's BPM tasks). -->
+<div x-data="inboxPage" class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>Inbox</span>
+    <span x-h-badge data-variant="information" x-text="tasks.length"></span>
+    <div x-h-toolbar-spacer></div>
+    <div x-h-input-group data-size="sm">
+      <input x-h-input.group type="text" placeholder="Search tasks..." x-model="searchTerm" @input="refreshIcons()" />
+      <div x-h-input-group-addon data-align="inline-start"><svg x-h-icon.search class="size-4" role="img" aria-label="search"></svg></div>
+    </div>
+    <button x-h-button data-variant="outline" data-size="sm" @click="refresh()"><i role="img" data-lucide="refresh-cw"></i><span>Refresh</span></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><svg x-h-icon.circle-info role="img" aria-label="info"></svg></div>
+      <div x-h-info-page-title>No tasks</div>
+      <div x-h-info-page-description>You have no pending tasks.</div>
+    </div>
+  </div>
+
+  <div x-show="filtered.length" class="p-4">
+    <div x-h-table-container.scroll data-border="true" style="max-height: 78vh">
+      <table x-h-table data-borders="rows">
+        <thead x-h-table-header>
+          <tr x-h-table-row>
+            <th x-h-table-head scope="col">Task</th>
+            <th x-h-table-head scope="col">Process</th>
+            <th x-h-table-head scope="col">Reference</th>
+            <th x-h-table-head scope="col">Assignment</th>
+            <th x-h-table-head scope="col"></th>
+          </tr>
+        </thead>
+        <tbody x-h-table-body>
+          <template x-for="task in filtered" :key="task.id">
+            <tr x-h-table-row data-hoverable="true">
+              <th x-h-table-head scope="row" x-text="task.name"></th>
+              <td x-h-table-cell x-text="task.processDefinitionName"></td>
+              <td x-h-table-cell x-text="task.processInstanceBusinessKey"></td>
+              <td x-h-table-cell>
+                <span x-h-badge :data-variant="task.mine ? 'positive' : 'outline'" x-text="task.mine ? 'Assigned to me' : 'Available'"></span>
+              </td>
+              <td x-h-table-cell data-row-actions>
+                <button x-h-button data-variant="primary" data-size="sm" @click="open(task)" x-text="task.mine ? 'Open' : 'Claim & open'"></button>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </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
new file mode 100644
index 0000000000..e078813b10
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Aggregate SPA entry for the Harmonia runtime. Generated once over the whole model;
+  the entities are looped below (the no-collection generate exposes them as "models")
+  for the sidebar nav, the route declarations, and the page-component script tags.
+
+  Assets are embedded in the fat jar (Phase 1), NOT loaded from a CDN — for CSP/offline:
+    - Alpine + Harmonia are webjars (org.webjars.npm:alpinejs / codbex__harmonia, pulled by
+      components/resources/application-core), served version-less via webjars-locator at /webjars/.
+    - Lucide is a webjar too (org.webjars.npm:lucide via application-core).
+    - Pinecone Router has no published webjar, so it is vendored under application-core/vendor
+      and served at /services/web/application-core/vendor/.
+  Script load order is load-bearing: plugins -> app code (defer, document order) -> Alpine -> Harmonia -> Lucide.
+-->
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+
+    <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
+    <link href="./css/app.css" rel="stylesheet" />
+  </head>
+
+  <body class="vbox size-full" x-data="app">
+
+    <div x-h-sheet-overlay="isOpen">
+      <div x-h-sheet data-align="left" x-ref="overlay"></div>
+    </div>
+
+    <div x-h-split class="size-full" data-orientation="horizontal" data-variant="border">
+
+      <!-- Sidebar panel -->
+      <div x-h-split-panel :data-hidden="hiddenPanels.left" data-max="256" data-min="200"
+           data-locked="true" data-gutterless="true" x-ref="sidebarPanel">
+        <div x-h-sidebar x-ref="sidebar">
+          <div x-h-sidebar-header>
+            <div class="hbox items-center gap-2 p-1">
+              <span class="font-bold">${projectName}</span>
+            </div>
+          </div>
+          <div x-h-sidebar-content>
+            <div x-h-sidebar-group>
+              <div x-h-sidebar-group-label>Application</div>
+              <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="isActive('/inbox')" @click="navigate('/inbox')">
+                      <i role="img" data-lucide="inbox"></i><span>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" data-lucide="folder"></i><span>Documents</span>
+                    </button>
+                  </li>
+                </ul>
+                <ul x-h-sidebar-menu>
+                  <!-- TODO (Phase 2): drive from a generated nav (see appShell `nav`). Skeleton
+                       enumerates top-level PRIMARY entities (list / manage / master) directly. -->
+#foreach($entity in $models)
+#if(($entity.layoutType == "LIST" || $entity.layoutType == "MANAGE" || $entity.layoutType == "LIST_MASTER" || $entity.layoutType == "MANAGE_MASTER") && $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" data-lucide="list"></i>
+                      <span>${entity.name}</span>
+                    </button>
+                  </li>
+#end
+#end
+                </ul>
+              </div>
+            </div>
+#set($hasSettings = false)
+#foreach($entity in $models)#if($entity.type == "SETTING")#set($hasSettings = true)#end#end
+#if($hasSettings)
+            <div x-h-sidebar-group>
+              <div x-h-sidebar-group-label>Settings</div>
+              <div x-h-sidebar-group-content>
+                <ul x-h-sidebar-menu>
+#foreach($entity in $models)
+#if($entity.type == "SETTING")
+                  <li x-h-sidebar-menu-item>
+                    <button x-h-sidebar-menu-button :data-active="isActive('/${entity.name}')" @click="navigate('/${entity.name}')">
+                      <i role="img" data-lucide="settings"></i>
+                      <span>${entity.name}</span>
+                    </button>
+                  </li>
+#end
+#end
+                </ul>
+              </div>
+            </div>
+#end
+#set($hasReports = false)
+#foreach($entity in $models)#if($entity.type == "REPORT")#set($hasReports = true)#end#end
+#if($hasReports)
+            <div x-h-sidebar-group>
+              <div x-h-sidebar-group-label>Reports</div>
+              <div x-h-sidebar-group-content>
+                <ul x-h-sidebar-menu>
+#foreach($entity in $models)
+#if($entity.type == "REPORT")
+                  <li x-h-sidebar-menu-item>
+                    <button x-h-sidebar-menu-button :data-active="isActive('/${entity.name}')" @click="navigate('/${entity.name}')">
+                      <i role="img" data-lucide="bar-chart-3"></i>
+                      <span>${entity.name}</span>
+                    </button>
+                  </li>
+#end
+#end
+                </ul>
+              </div>
+            </div>
+#end
+          </div>
+        </div>
+      </div>
+
+      <!-- Main panel -->
+      <div x-h-split-panel>
+        <div class="vbox size-full">
+          <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" data-lucide="menu"></i>
+            </button>
+            <nav x-h-breadcrumb data-overflow="scroll"
+                 :data-variant="hiddenPanels.left ? 'outline' : 'default'" data-size="md">
+              <ol x-h-breadcrumb-list>
+                <li x-h-breadcrumb-item>
+                  <span x-show="isDashboard" x-h-breadcrumb-page aria-label="Home">
+                    <svg x-h-icon.home class="size-4" role="img" aria-label="Home"></svg>
+                  </span>
+                  <button x-show="!isDashboard" x-h-breadcrumb-link @click="navigate('/dashboard')" aria-label="Home">
+                    <svg x-h-icon.home class="size-4" role="img" aria-label="Home"></svg>
+                  </button>
+                </li>
+                <template x-for="(crumb, i) in breadcrumbTrail" :key="i">
+                  <li x-h-breadcrumb-item>
+                    <button x-show="crumb.route" x-h-breadcrumb-link @click="navigate(crumb.route)" x-text="crumb.label"></button>
+                    <span x-show="!crumb.route" x-h-breadcrumb-page x-text="crumb.label"></span>
+                  </li>
+                </template>
+              </ol>
+            </nav>
+            <div x-h-toolbar-spacer></div>
+          </div>
+
+          <div id="app" class="size-full overflow-auto flex-1">
+            <!-- Pinecone Router renders the matched view fragment here. -->
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- App-wide BPM task form dialog (driven by the processTasks store). The generated task form
+         completes the task and the store re-fetches on close so badges drop the finished task. -->
+    <div x-h-dialog-overlay :data-open="$store.processTasks.formOpen">
+      <div x-h-dialog style="width: 92vw; max-width: 1100px;">
+        <div x-h-dialog-header>
+          <h2 x-h-dialog-title x-text="$store.processTasks.formTitle"></h2>
+          <button x-h-dialog-close @click="$store.processTasks.closeForm()" aria-label="Close"></button>
+        </div>
+        <div x-h-dialog-content>
+          <iframe x-show="$store.processTasks.formOpen" :src="$store.processTasks.formUrl"
+                  title="Task form" style="width:100%; height:70vh; border:0;"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <!-- Routes (Pinecone reads these from the document). -->
+    <!-- Built-in shell sections (always present): Process Inbox + Documents. -->
+    <template x-route="/inbox" x-template.target.app="./views/_inbox.html"></template>
+    <template x-route="/documents" x-template.target.app="./views/_documents.html"></template>
+    <!-- LIST entities: one read-only list route each. -->
+#foreach($entity in $models)
+#if($entity.layoutType == "LIST" && $entity.type == "PRIMARY")
+    <template x-route="/${entity.name}" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-list.html"></template>
+#end
+#end
+    <!-- MANAGE entities: CRUD list + shared create/edit form (same view for create + :id/edit). -->
+#foreach($entity in $models)
+#if($entity.layoutType == "MANAGE" && $entity.type == "PRIMARY")
+    <template x-route="/${entity.name}" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-manage-list.html"></template>
+    <template x-route="/${entity.name}/create" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+    <template x-route="/${entity.name}/:id/edit" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+#end
+#end
+    <!-- SETTING entities: same CRUD list + form, grouped under the Settings perspective. -->
+#foreach($entity in $models)
+#if($entity.type == "SETTING")
+    <template x-route="/${entity.name}" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-manage-list.html"></template>
+    <template x-route="/${entity.name}/create" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+    <template x-route="/${entity.name}/:id/edit" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+#end
+#end
+    <!-- MASTER entities: master-detail page (list + selected record's detail panels) + own form. -->
+#foreach($entity in $models)
+#if(($entity.layoutType == "MANAGE_MASTER" || $entity.layoutType == "LIST_MASTER") && $entity.type == "PRIMARY")
+    <template x-route="/${entity.name}" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-master.html"></template>
+    <template x-route="/${entity.name}/create" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+    <template x-route="/${entity.name}/:id/edit" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+#end
+#end
+    <!-- DETAIL entities: only a routed create/edit form (listed inside their master's panels). -->
+#foreach($entity in $models)
+#if(($entity.layoutType == "MANAGE_DETAILS" || $entity.layoutType == "LIST_DETAILS") && $entity.type == "DEPENDENT")
+    <template x-route="/${entity.name}/create" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+    <template x-route="/${entity.name}/:id/edit" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-form.html"></template>
+#end
+#end
+    <!-- REPORT entities: a table or chart page. -->
+#foreach($entity in $models)
+#if($entity.type == "REPORT")
+    <template x-route="/${entity.name}" x-template.target.app="./views/${entity.perspectiveName}/${entity.name}-report.html"></template>
+#end
+#end
+    <template x-route="notfound" x-template.target.app="./views/_notfound.html"></template>
+
+    <!-- 1. Plugins (vendored, no CDN) -->
+    <script src="/services/web/application-core/vendor/pinecone-router.min.js"></script>
+
+    <!-- 2. App code (defer keeps document order) -->
+    <script src="./js/app.js" defer></script>
+    <script src="./js/config.js" defer></script>
+    <script src="./js/services/api.js" defer></script>
+    <script src="./js/services/apiError.js" defer></script>
+    <script src="./js/services/formValidation.js" defer></script>
+    <script src="./js/components/layout/appShell.js" defer></script>
+    <script src="./js/components/pages/basePage.js" defer></script>
+    <script src="./js/components/pages/baseFormPage.js" defer></script>
+    <script src="./js/components/detailPanel.js" defer></script>
+    <script src="./js/stores/processTasks.js" defer></script>
+    <script src="./js/components/pages/inboxPage.js" defer></script>
+    <script src="./js/components/pages/documentsPage.js" defer></script>
+#foreach($entity in $models)
+#if($entity.layoutType == "LIST" && $entity.type == "PRIMARY")
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}ListPage.js" defer></script>
+#end
+#if(($entity.layoutType == "MANAGE" && $entity.type == "PRIMARY") || $entity.type == "SETTING")
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}ManageListPage.js" defer></script>
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}FormPage.js" defer></script>
+#end
+#if(($entity.layoutType == "MANAGE_MASTER" || $entity.layoutType == "LIST_MASTER") && $entity.type == "PRIMARY")
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}MasterPage.js" defer></script>
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}FormPage.js" defer></script>
+#end
+#if(($entity.layoutType == "MANAGE_DETAILS" || $entity.layoutType == "LIST_DETAILS") && $entity.type == "DEPENDENT")
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}.detail.js" defer></script>
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}FormPage.js" defer></script>
+#end
+#if($entity.type == "REPORT")
+    <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}ReportPage.js" defer></script>
+#end
+#end
+
+    <!-- 3. Alpine LAST (Harmonia bundle auto-starts Alpine — do NOT call Alpine.start()) -->
+    <script defer src="/webjars/alpinejs/dist/cdn.min.js"></script>
+    <script src="/webjars/codbex__harmonia/dist/harmonia.min.js"></script>
+
+    <!-- 4. Lucide icons (webjar) -->
+    <script src="/webjars/lucide/dist/umd/lucide.min.js"></script>
+    <!-- 5. Chart.js (webjar) — used by REPORT_BAR/LINE/PIE/... chart pages -->
+    <script src="/webjars/chart.js/dist/chart.umd.js"></script>
+    <script>
+      document.addEventListener('alpine:initialized', () => {
+        if (window.lucide) window.lucide.createIcons();
+      }, { once: true });
+      document.addEventListener('pinecone:end', () => {
+        if (window.lucide) window.lucide.createIcons();
+      });
+    </script>
+  </body>
+
+</html>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/app.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/app.js.template
new file mode 100644
index 0000000000..4c0d2a3f8b
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/app.js.template
@@ -0,0 +1,18 @@
+window.App = {
+  services: {},
+  routes: {},
+  utils: {},
+  config: {},
+
+  // Master-detail registry. Each generated detail entity registers its metadata here
+  // under its master entity's name; a master page renders one detail panel per entry,
+  // so masters and details stay decoupled (no cross-entity generation). See
+  // js/components/detailPanel.js and the master view.
+  details: {},
+  registerDetail(masterEntity, def) {
+    (this.details[masterEntity] = this.details[masterEntity] || []).push(def);
+  },
+  detailsFor(masterEntity) {
+    return this.details[masterEntity] || [];
+  },
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/detailPanel.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/detailPanel.js.template
new file mode 100644
index 0000000000..c98f6e42aa
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/detailPanel.js.template
@@ -0,0 +1,74 @@
+/**
+ * detailPanel — generic master-detail child panel (metadata-driven, no per-detail code).
+ *
+ * A master page renders one of these per registered detail (App.detailsFor(master)),
+ * passing the panel definition and the selected master id. The panel lists that detail's
+ * rows filtered to the master via the controller's `?<masterEntityId>=<id>` query (which
+ * the generated REST controller supports for MANAGE_DETAILS/LIST_DETAILS), supports delete,
+ * and routes create/edit to the detail's own generated form page (FK + returnTo preset).
+ *
+ * `def` shape (from App.registerDetail): { entity, apiPath, masterEntityId, label,
+ *   columns: [{ name }], returnTo }. apiPath is relative to App.config.restBase (the api client
+ *   prepends it), so detail calls pass no baseUrl override.
+ */
+function detailPanel(def, masterId) {
+  return {
+    ...basePage(),
+    def,
+    masterId,
+    rows: [],
+    state: 'loading',     // loading | error | empty | default
+    error: null,
+    deleteOpen: false,
+    deleteTarget: null,
+    deleteBusy: false,
+
+    async init() {
+      await this.load();
+    },
+
+    async load() {
+      // No master selected yet — don't fetch (avoids a ?<fk>=null call).
+      if (this.masterId == null) { this.rows = []; this.state = 'empty'; return; }
+      this.state = 'loading';
+      this.error = null;
+      try {
+        // The detail controller filters by the master FK query param (apiPath is relative to restBase).
+        const q = '?' + encodeURIComponent(this.def.masterEntityId) + '=' + encodeURIComponent(this.masterId);
+        this.rows = await App.services.api.get(this.def.apiPath + q);
+        this.state = this.rows.length === 0 ? 'empty' : 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not load ' + this.def.label + '.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    // Create/edit route to the detail's own form page, carrying the FK + a returnTo back here.
+    addRow() {
+      const q = '?' + encodeURIComponent(this.def.masterEntityId) + '=' + encodeURIComponent(this.masterId)
+              + '&returnTo=' + encodeURIComponent(this.def.returnTo);
+      window.PineconeRouter.navigate('/' + this.def.entity + '/create' + q);
+    },
+    editRow(row) {
+      const q = '?returnTo=' + encodeURIComponent(this.def.returnTo);
+      window.PineconeRouter.navigate('/' + this.def.entity + '/' + encodeURIComponent(row[this.def.primaryKey]) + '/edit' + q);
+    },
+
+    askDelete(row) { this.deleteTarget = row; this.deleteOpen = true; },
+    async confirmDelete() {
+      if (!this.deleteTarget) return;
+      this.deleteBusy = true;
+      try {
+        await App.services.api.delete(this.def.apiPath + '/' + encodeURIComponent(this.deleteTarget[this.def.primaryKey]));
+        this.deleteOpen = false;
+        this.deleteTarget = null;
+        await this.load();
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not delete.');
+      } finally {
+        this.deleteBusy = false;
+      }
+    },
+  };
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/layout/appShell.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/layout/appShell.js.template
new file mode 100644
index 0000000000..847187beef
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/layout/appShell.js.template
@@ -0,0 +1,103 @@
+/**
+ * Adopted from codbex-athena-app (js/components/layout/appShell.js).
+ *
+ * The reusable Harmonia runtime dashboard: sidebar nav, route-derived breadcrumb,
+ * responsive sidebar<->x-h-sheet drawer collapse, theme menu. Model-independent —
+ * its only project-specific input is App.config (js/config.js).
+ *
+ * TODO (Phase 1/2): the `nav` / `routeTitles` / `sections` maps are currently a
+ * demo placeholder. They should be generated from the model (one entry per
+ * navigation node / list perspective) — see template/ui/navigation.js.
+ */
+document.addEventListener('alpine:init', () => {
+  window.PineconeRouter.settings({
+    basePath: (App.config && App.config.basePath) || '',
+    hash: true
+  });
+
+  Alpine.data('app', () => ({
+    hiddenPanels: { left: true },
+    isOpen: false,
+    currentPath: '',
+
+    // TODO (Phase 2): generate from the model.
+    nav: [],
+    routeTitles: {},
+    sections: {},
+
+    init() {
+      const getPath = () => {
+        const p = window.PineconeRouter.context?.path || '/';
+        return p === '/' ? '/dashboard' : p;
+      };
+      this.currentPath = getPath();
+      window.addEventListener('popstate', () => {
+        this.currentPath = getPath();
+        this.refreshIcons();
+      });
+      document.addEventListener('pinecone:end', () => {
+        this.currentPath = getPath();
+        this.refreshIcons();
+      });
+
+      this._bp = Harmonia.getBreakpointListener((isNarrow) => {
+        this.hiddenPanels.left = isNarrow;
+        if (isNarrow) {
+          this.$refs.overlay.appendChild(this.$refs.sidebar);
+        } else {
+          this.$refs.sidebarPanel.appendChild(this.$refs.sidebar);
+        }
+      }, 1024);
+
+      this.refreshIcons();
+    },
+
+    destroy() {
+      if (this._bp) this._bp.remove();
+    },
+
+    get pageTitle() {
+      return this.routeTitles[this.currentPath] || 'Application';
+    },
+
+    get isDashboard() {
+      return this.currentPath === '/' || this.currentPath === '/dashboard';
+    },
+
+    // Section-level crumbs after Home (Home is rendered separately as the icon).
+    get breadcrumbTrail() {
+      if (this.isDashboard) return [];
+      const segments = this.currentPath.split('/').filter(Boolean);
+      const top = segments[0];
+      const crumbs = [];
+      const sectionLabel = this.sections[top];
+      if (sectionLabel) crumbs.push({ label: sectionLabel, route: '/' + top });
+      const isSection = segments.length === 1;
+      if (isSection) {
+        if (crumbs.length) crumbs[crumbs.length - 1].route = null;
+      } else {
+        crumbs.push({ label: this.pageTitle, route: null });
+      }
+      return crumbs;
+    },
+
+    isActive(route) { return this.currentPath === route; },
+
+    navigate(route) {
+      window.PineconeRouter.navigate(route);
+      this.closeSideNav();
+    },
+
+    openSideNav() { this.isOpen = true; },
+
+    closeSideNav() {
+      if (window.matchMedia('(max-width: 1024px)').matches) this.isOpen = false;
+    },
+
+    refreshIcons() {
+      if (window.lucide && typeof window.lucide.createIcons === 'function') {
+        window.lucide.createIcons();
+      }
+    },
+  }));
+}, { once: true });
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/baseFormPage.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/baseFormPage.js.template
new file mode 100644
index 0000000000..8dd73833f6
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/baseFormPage.js.template
@@ -0,0 +1,122 @@
+/**
+ * Adopted from codbex-athena-app (js/components/pages/baseFormPage.js).
+ *
+ * baseFormPage — mixin for form page components. Extends basePage — spread this
+ * instead of basePage in form pages.
+ *
+ * Provides: errors, saveFailureMessage, loadFailureMessage, unmatchedCauses,
+ *           fieldMap, clearError, scrollToSummary, navigateBack, refreshIcons,
+ *           applyApiError, mapCauses, applyLoadError.
+ *
+ * NOTE: Do NOT put ES6 getters in this object — the spread operator invokes
+ * them at spread-time and copies the result as a plain value, breaking Alpine
+ * reactivity. Define getters (e.g. errorCount) directly on the page component.
+ */
+function baseFormPage() {
+  return {
+    ...basePage(),
+
+    errors: {},
+    saveFailureMessage: '',
+    loadFailureMessage: '',
+    // 422 causes that could not be matched to a form field. Surfaced in the
+    // summary so they are never silently dropped.
+    unmatchedCauses: [],
+    // Per-page override: maps a backend errorCauses[].field name to this page's
+    // `errors` key when they differ.
+    fieldMap: {},
+
+    clearError(field) {
+      if (this.errors[field]) this.errors[field] = '';
+      if (this.errors.__summary) this.errors.__summary = '';
+      this.unmatchedCauses = [];
+    },
+
+    /**
+     * Central catch handler for save()/submit. Selects UX by errorType:
+     *  - ValidationError (422) -> map causes onto field errors + summary
+     *  - everything else       -> generic save-failure banner (localized)
+     * Tolerates non-ApiError values.
+     */
+    applyApiError(err, { fallbackMessage, formState } = {}) {
+      if (err && err.isApiError && err.errorType === 'ValidationError') {
+        this.mapCauses(err.errorCauses);
+        this.state = 'validation-error';
+        this.scrollToSummary();
+        return;
+      }
+      this.saveFailureMessage = App.services.apiErrors.messageFor(err, fallbackMessage);
+      this.state = formState || 'save-failure';
+      this.scrollToSummary();
+    },
+
+    /** Build this.errors (+ summary) from 422 errorCauses, honoring fieldMap. */
+    mapCauses(causes) {
+      const apiErrors = App.services.apiErrors;
+      const errors = {};
+      const unmatched = [];
+      for (const cause of (causes || [])) {
+        let key = null;
+        if (cause.field && Object.prototype.hasOwnProperty.call(this.fieldMap, cause.field)) {
+          key = this.fieldMap[cause.field];                 // deliberate mapping
+        } else if (cause.field && Object.prototype.hasOwnProperty.call(this.form, cause.field)) {
+          key = cause.field;                                // direct 1:1 form field
+        }
+        if (key) {
+          errors[key] = apiErrors.fieldMessageFor(cause);
+        } else {
+          unmatched.push(cause);
+        }
+      }
+      this.unmatchedCauses = unmatched;
+      if (unmatched.length) {
+        errors.__summary = `${unmatched.length} additional ${unmatched.length === 1 ? 'error' : 'errors'} occurred.`;
+      }
+      this.errors = errors;
+    },
+
+    /** Catch handler for edit-page init() load failures -> load-failure page. */
+    applyLoadError(err, { fallbackMessage } = {}) {
+      this.loadFailureMessage = App.services.apiErrors.messageFor(err, fallbackMessage);
+      this.state = 'load-failure';
+    },
+
+    scrollToSummary() {
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const container = document.getElementById('app');
+            if (container) container.scrollTop = 0;
+          });
+        });
+      });
+    },
+
+    // Raw query string from the current URL. With hash routing the query lives in the
+    // hash (e.g. #/Detail/create?Customer=3&returnTo=/Customer), not location.search.
+    queryString() {
+      if (window.location.hash.includes('?')) return window.location.hash.split('?')[1];
+      if (window.location.search) return window.location.search.slice(1);
+      return '';
+    },
+
+    // A single query param value, or null.
+    queryParam(name) {
+      try {
+        return new URLSearchParams(this.queryString()).get(name);
+      } catch (_) {
+        return null;
+      }
+    },
+
+    // Read a validated `returnTo` from the current URL (must be an in-app path).
+    returnToParam() {
+      const ret = this.queryParam('returnTo');
+      return ret && ret.startsWith('/') ? ret : '';
+    },
+
+    navigateBack(defaultRoute) {
+      window.PineconeRouter.navigate(this.returnToParam() || defaultRoute);
+    },
+  };
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/basePage.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/basePage.js.template
new file mode 100644
index 0000000000..f68b88f463
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/basePage.js.template
@@ -0,0 +1,22 @@
+/**
+ * Adopted from codbex-athena-app (js/components/pages/basePage.js).
+ *
+ * basePage — mixin for every page component.
+ *
+ * Usage:
+ *   Alpine.data('myPage', () => ({
+ *     ...basePage(),
+ *     // page-specific members
+ *   }));
+ */
+function basePage() {
+  return {
+    refreshIcons() {
+      this.$nextTick(() => {
+        if (window.lucide && typeof window.lucide.createIcons === 'function') {
+          window.lucide.createIcons();
+        }
+      });
+    },
+  };
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/documentsPage.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/documentsPage.js.template
new file mode 100644
index 0000000000..627198319d
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/documentsPage.js.template
@@ -0,0 +1,97 @@
+/**
+ * documentsPage — the built-in Documents view (transferred from the dashboard shell). A CMS folder
+ * browser over /services/js/documents/api/documents.js: list a folder, navigate into subfolders,
+ * download files, create folders, upload files, delete. Folders vs files: type === 'cmis:folder'.
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('documentsPage', () => ({
+    ...basePage(),
+    base: '/services/js/documents/api/documents.js',
+    folder: { name: 'root', path: '/', children: [] },
+    state: 'loading',   // loading | error | default
+    error: null,
+
+    newFolderOpen: false,
+    newFolderName: '',
+    deleteOpen: false,
+    deleteTarget: null,
+    busy: false,
+
+    async init() { await this.load('/'); },
+
+    async load(path) {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        this.folder = await App.services.api.get(this.base + '?path=' + encodeURIComponent(path), { baseUrl: '' });
+        this.state = 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not list the folder.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    isFolder(item) { return item && item.type === 'cmis:folder'; },
+    downloadUrl(item) { return this.base + '/download?path=' + encodeURIComponent(item.path); },
+
+    open(item) {
+      if (this.isFolder(item)) this.load(item.path);
+      else window.open(this.downloadUrl(item), '_blank');
+    },
+
+    get crumbs() {
+      const parts = (this.folder.path || '/').split('/').filter(Boolean);
+      let acc = '';
+      const list = [{ label: 'root', path: '/' }];
+      for (const p of parts) { acc += '/' + p; list.push({ label: p, path: acc }); }
+      return list;
+    },
+
+    async createFolder() {
+      if (!this.newFolderName.trim()) return;
+      this.busy = true;
+      try {
+        await App.services.api.post(this.base + '/folder', { parentFolder: this.folder.path, name: this.newFolderName.trim() }, { baseUrl: '' });
+        this.newFolderOpen = false;
+        this.newFolderName = '';
+        await this.load(this.folder.path);
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not create the folder.');
+      } finally { this.busy = false; }
+    },
+
+    askDelete(item) { this.deleteTarget = item; this.deleteOpen = true; },
+    async confirmDelete() {
+      if (!this.deleteTarget) return;
+      this.busy = true;
+      try {
+        await App.services.api.delete(this.base + '?path=' + encodeURIComponent(this.deleteTarget.path), { baseUrl: '' });
+        this.deleteOpen = false; this.deleteTarget = null;
+        await this.load(this.folder.path);
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not delete.');
+      } finally { this.busy = false; }
+    },
+
+    // Upload is multipart, so it bypasses the JSON api client and uses fetch with FormData.
+    async upload(event) {
+      const files = event.target.files;
+      if (!files || !files.length) return;
+      this.busy = true;
+      try {
+        const fd = new FormData();
+        for (const f of files) fd.append('file', f, f.name);
+        const r = await fetch(this.base + '?path=' + encodeURIComponent(this.folder.path), {
+          method: 'POST', body: fd, credentials: 'same-origin',
+        });
+        if (!r.ok) throw new Error('upload failed: ' + r.status);
+        event.target.value = '';
+        await this.load(this.folder.path);
+      } catch (e) {
+        this.error = 'Upload failed.';
+        console.error(e);
+      } finally { this.busy = false; }
+    },
+  }));
+}, { once: true });
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/inboxPage.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/inboxPage.js.template
new file mode 100644
index 0000000000..58d1b645ac
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/inboxPage.js.template
@@ -0,0 +1,28 @@
+/**
+ * inboxPage — the built-in Process Inbox view (transferred from the dashboard shell). Lists the
+ * current user's BPM tasks (assignee + candidate groups) from the shared processTasks store and
+ * opens a task's form via the same store (claim-if-needed + app-wide form dialog).
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('inboxPage', () => ({
+    ...basePage(),
+    searchTerm: '',
+
+    init() {
+      // The store self-loads at startup; refresh on entry so the list is current.
+      Alpine.store('processTasks').refresh().then(() => this.refreshIcons());
+    },
+
+    get tasks() { return Alpine.store('processTasks').tasks; },
+
+    get filtered() {
+      const q = this.searchTerm.trim().toLowerCase();
+      if (!q) return this.tasks;
+      return this.tasks.filter(t => [t.name, t.processDefinitionName, t.processInstanceBusinessKey, t.assignee]
+        .some(v => v && String(v).toLowerCase().includes(q)));
+    },
+
+    open(task) { Alpine.store('processTasks').openTask(task); },
+    refresh() { Alpine.store('processTasks').refresh().then(() => this.refreshIcons()); },
+  }));
+}, { once: true });
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/config.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/config.js.template
new file mode 100644
index 0000000000..f3f4d3b5ec
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/config.js.template
@@ -0,0 +1,27 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Runtime configuration for the generated Harmonia SPA. The static shell assets
+ * (api.js, appShell.js) read their project-specific wiring from here so they can
+ * stay model-independent / copied verbatim.
+ */
+App.config = {
+  projectName: '${projectName}',
+
+  // SPA base path for Pinecone Router (hash mode). The app is served as a web
+  // resource at /services/web/<project>/.
+  basePath: '/services/web/${projectName}',
+
+  // Base URL for the generated Java REST controllers this SPA talks to. Verified
+  // in Phase 0 against template-application-rest-java output: each entity's
+  // controller lives at <restBase>/<javaPerspectiveName>/<Entity>Controller
+  // (e.g. /services/java/orders-app/gen/edm/api/orders/OrdersController), exposing
+  // GET (list, $limit/$offset), GET /{id}, POST, PUT /{id}, DELETE /{id}.
+  // NB: uses javaGenFolderName (the Java-sanitised gen folder, e.g. sales-order -> sales_order),
+  // matching the package the DAO/REST templates emit — NOT the raw genFolderName.
+  restBase: '/services/java/${projectName}/gen/${javaGenFolderName}/api'
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/api.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/api.js.template
new file mode 100644
index 0000000000..14a646a3d6
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/api.js.template
@@ -0,0 +1,117 @@
+/**
+ * Adopted from codbex-athena-app (js/services/api.js).
+ *
+ * ApiError — rich error thrown by api.request() for any non-OK response or
+ * transport failure. Extends Error so legacy `err.message` access keeps working,
+ * but `err.message` is the DEVELOPER-facing text and MUST NOT be shown to the
+ * end-user. UI code selects localized text via App.services.apiErrors.
+ *
+ * Error body contract:
+ *   { errorType, errorMessage, errorCauses: [{ errorType, errorMessage, field }] }
+ */
+class ApiError extends Error {
+  constructor({ httpStatus, errorType, errorMessage, errorCauses } = {}) {
+    super(errorMessage || String(httpStatus || ''));
+    this.name = 'ApiError';
+    this.isApiError = true;
+    this.httpStatus = httpStatus || 0;          // 0 == transport/network failure
+    this.errorType = errorType || null;
+    this.errorMessage = errorMessage || '';     // dev-facing — never shown to user
+    this.errorCauses = Array.isArray(errorCauses) ? errorCauses : [];
+  }
+}
+
+App.services.ApiError = ApiError;
+
+App.services.api = {
+  // Base URL for this application's generated REST controllers. Read from the
+  // generated config (js/config.js) so this file stays model-independent.
+  get baseUrl() {
+    return (App.config && App.config.restBase) || '/services/ts/app/gen/api';
+  },
+
+  // Base URLs for OTHER backend modules, referenced by a logical name via
+  // request(method, url, body, { base: 'name' }). Populate per app as needed.
+  baseUrls: {},
+
+  // Resolve the base URL for a request from its options:
+  //   { baseUrl: '…' } explicit override  >  { base: 'name' } named module  >  default.
+  resolveBaseUrl(opts = {}) {
+    // Note: check for `undefined`, not truthiness — `{ baseUrl: '' }` is a valid
+    // override meaning "the url is already absolute, prepend nothing".
+    if (opts.baseUrl !== undefined) return opts.baseUrl;
+    if (opts.base) {
+      const named = this.baseUrls[opts.base];
+      if (!named) throw new Error(`[api] unknown base '${opts.base}' — add it to App.services.api.baseUrls`);
+      return named;
+    }
+    return this.baseUrl;
+  },
+
+  // Canonical HTTP status -> errorType, so errorType is always populated even
+  // when the server omits a structured body.
+  typeFromStatus(status) {
+    switch (status) {
+      case 400: return 'BadRequest';
+      case 401: return 'Unauthorized';
+      case 403: return 'InsufficientPermission';
+      case 404: return 'NotFound';
+      case 422: return 'ValidationError';
+      case 502: return 'UpstreamError';
+      default:  return 'InternalServerError';
+    }
+  },
+
+  // request(method, url, body, opts?) — opts selects the base URL for this call:
+  //   { baseUrl } explicit override, or { base } named entry in baseUrls.
+  async request(method, url, body, opts = {}) {
+    const baseUrl = this.resolveBaseUrl(opts);
+
+    let r;
+    try {
+      r = await fetch(`${baseUrl}${url}`, {
+        method,
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+        body: body ? JSON.stringify(body) : undefined,
+        credentials: 'same-origin'
+      });
+    } catch (e) {
+      const err = new ApiError({ httpStatus: 0, errorType: 'NetworkError', errorMessage: e.message });
+      console.error(`[api] ${method} ${baseUrl}${url} failed:`, err.errorMessage);
+      throw err;
+    }
+
+    if (r.ok) {
+      return r.status === 204 ? null : r.json();
+    }
+
+    // Non-OK: read the body ONCE as text, then attempt to parse the structured error.
+    const raw = await r.text().catch(() => '');
+    let parsed = null;
+    if (raw) {
+      try { parsed = JSON.parse(raw); } catch (_) { /* non-JSON body */ }
+    }
+
+    const err = parsed && typeof parsed === 'object'
+      ? new ApiError({
+          httpStatus: r.status,
+          errorType: parsed.errorType || parsed.code || this.typeFromStatus(r.status),
+          errorMessage: parsed.errorMessage || parsed.message || r.statusText,
+          errorCauses: parsed.errorCauses,
+        })
+      : new ApiError({
+          httpStatus: r.status,
+          errorType: this.typeFromStatus(r.status),
+          errorMessage: raw || r.statusText,
+        });
+
+    console.error(`[api] ${method} ${baseUrl}${url} -> ${err.httpStatus} ${err.errorType}:`, err.errorMessage, err.errorCauses);
+    throw err;
+  },
+
+  // Thin verb helpers over request(). `opts` selects the base URL (see request).
+  get(url, opts)        { return this.request('GET', url, undefined, opts); },
+  post(url, body, opts) { return this.request('POST', url, body, opts); },
+  put(url, body, opts)  { return this.request('PUT', url, body, opts); },
+  delete(url, opts)     { return this.request('DELETE', url, undefined, opts); },
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/apiError.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/apiError.js.template
new file mode 100644
index 0000000000..8bdb1b5698
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/apiError.js.template
@@ -0,0 +1,59 @@
+/**
+ * Adopted from codbex-athena-app (js/services/apiError.js).
+ *
+ * apiErrors — localized, user-safe message catalog for API errors.
+ *
+ * The server's `errorMessage` is developer-facing and MUST NOT be shown to the
+ * end-user (it is logged to the console by api.js). The UI selects what to
+ * display based on `errorType` via the resolvers below.
+ *
+ * Designed for later i18n: swap the flat maps for a locale lookup in one place.
+ */
+(function (root) {
+  const App = root.App = root.App || {};
+  App.services = App.services || {};
+
+  App.services.apiErrors = {
+    // Top-level errorType -> user-facing message.
+    messages: {
+      BadRequest:             'The request could not be completed. Please review your input.',
+      ValidationError:        'Please correct the highlighted fields.',
+      Unauthorized:           'Your session has ended. Please sign in again.',
+      InsufficientPermission: 'You do not have permission to perform this action.',
+      TokenExpired:           'Your session has expired. Please sign in again.',
+      NotFound:               'The requested item could not be found.',
+      UpstreamError:          'A dependent service is unavailable. Please try again shortly.',
+      InternalServerError:    'Something went wrong on our end. Please try again.',
+      NetworkError:           'Unable to reach the server. Check your connection and try again.',
+    },
+
+    // 422 cause errorType -> per-field message. Extend as backend cause types appear.
+    fieldMessages: {
+      NotNull:   'This field is required.',
+      Required:  'This field is required.',
+      NotEmpty:  'This field is required.',
+      Future:    'Date must be in the future.',
+      Past:      'Date must be in the past.',
+      Pattern:   'This value has an invalid format.',
+      Email:     'Enter a valid email address.',
+      Size:      'This value has an invalid length.',
+      Min:       'This value is too small.',
+      Max:       'This value is too large.',
+      Duplicate: 'This value already exists.',
+    },
+
+    default: 'Something went wrong. Please try again.',
+
+    /** Top-level, user-safe message for an error. `fallback` overrides the catalog default. */
+    messageFor(err, fallback) {
+      const type = err && err.errorType;
+      return (type && this.messages[type]) || fallback || this.default;
+    },
+
+    /** Per-field message for a single 422 errorCauses[] entry. */
+    fieldMessageFor(cause) {
+      const type = cause && cause.errorType;
+      return (type && this.fieldMessages[type]) || this.default;
+    },
+  };
+})(window);
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/formValidation.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/formValidation.js.template
new file mode 100644
index 0000000000..d187e451b1
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/services/formValidation.js.template
@@ -0,0 +1,49 @@
+/**
+ * Adopted from codbex-athena-app (js/services/formValidation.js).
+ *
+ * FormValidation — simple schema-based form validator.
+ *
+ * Schema shape:
+ *   {
+ *     fieldName: [
+ *       { rule: 'required',  message: 'Field is required.' },
+ *       { rule: 'minLength', value: 2,       message: 'At least 2 chars.' },
+ *       { rule: 'pattern',   value: '^\\d+$', message: 'Digits only.' },
+ *     ]
+ *   }
+ *
+ * Built-in rules: required, minLength, maxLength, min, max, email, pattern.
+ * Returns: { errors: { field: 'msg' }, valid: boolean }. First failing rule wins.
+ */
+(function (root) {
+  const trim = v => (v == null ? '' : String(v).trim());
+
+  function applyRule(rule, value, cfg) {
+    switch (rule) {
+      case 'required':  return trim(value) !== '';
+      case 'minLength': return trim(value).length >= cfg.value;
+      case 'maxLength': return trim(value).length <= cfg.value;
+      case 'min':       return !isNaN(value) && Number(value) >= cfg.value;
+      case 'max':       return !isNaN(value) && Number(value) <= cfg.value;
+      case 'email':     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trim(value));
+      case 'pattern':   return new RegExp(cfg.value, cfg.flags || '').test(trim(value));
+      default:          return true; // unknown rules pass silently
+    }
+  }
+
+  function validate(data, schema) {
+    const errors = {};
+    for (const [field, fieldRules] of Object.entries(schema)) {
+      const value = data[field];
+      for (const cfg of fieldRules) {
+        if (!applyRule(cfg.rule, value, cfg)) {
+          errors[field] = cfg.message;
+          break; // first failing rule wins
+        }
+      }
+    }
+    return { errors, valid: Object.keys(errors).length === 0 };
+  }
+
+  root.FormValidation = { validate };
+})(window);
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/stores/processTasks.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/stores/processTasks.js.template
new file mode 100644
index 0000000000..d0c410815b
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/stores/processTasks.js.template
@@ -0,0 +1,93 @@
+/**
+ * processTasks — surfaces a record's BPM user tasks as in-context actions, the Harmonia/Alpine
+ * counterpart of the dashboard's ProcessTasks module. A process-aware entity carries a
+ * system-managed ProcessId (the started process-instance id, written back by the intent process
+ * trigger); the current user's actionable inbox tasks are fetched once and bucketed by
+ * processInstanceId, so any view — list, manage, or a master-detail pane — surfaces the tasks for a
+ * given record by matching entity.ProcessId === task.processInstanceId.
+ *
+ * It is a global Alpine store so every generated view reads it the same way:
+ *   $store.processTasks.getTasks(row)        -> the record's actionable tasks
+ *   $store.processTasks.openTask(task)       -> claim if needed, then open the task form
+ * The task form is opened in the app-wide dialog wired in index.html; on close the store re-fetches.
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.store('processTasks', {
+    byProcessId: {},
+    tasks: [],          // flat list of all the user's tasks (assignee + groups) — the Inbox view
+    loaded: false,
+    formOpen: false,
+    formUrl: '',
+    formTitle: '',
+
+    init() {
+      this.load();
+    },
+
+    async load() {
+      try {
+        const [mine, groups] = await Promise.all([
+          App.services.api.get('/services/inbox/tasks?type=assignee&limit=100', { baseUrl: '' }),
+          App.services.api.get('/services/inbox/tasks?type=groups&limit=100', { baseUrl: '' }),
+        ]);
+        const map = {};
+        const flat = [];
+        const seen = new Set();
+        const collect = (tasks, isMine) => (tasks || []).forEach((t) => {
+          if (seen.has(t.id)) return;
+          seen.add(t.id);
+          t.mine = isMine;
+          flat.push(t);
+          // Only process-bound tasks bucket for in-record surfacing; all tasks show in the Inbox.
+          if (t.processInstanceId) (map[t.processInstanceId] = map[t.processInstanceId] || []).push(t);
+        });
+        collect(mine, true);
+        collect(groups, false);
+        this.byProcessId = map;
+        this.tasks = flat;
+        this.loaded = true;
+      } catch (e) {
+        this.byProcessId = {};
+        this.tasks = [];
+        console.error('processTasks: unable to load inbox tasks', e);
+      }
+    },
+
+    refresh() { return this.load(); },
+
+    getTasks(entity) {
+      return (entity && entity.ProcessId && this.byProcessId[entity.ProcessId]) || [];
+    },
+
+    async openTask(task) {
+      // A candidate (group) task must be claimed for the user before its form opens.
+      if (!task.mine) {
+        try {
+          await App.services.api.post('/services/inbox/tasks/' + task.id, { action: 'CLAIM' }, { baseUrl: '' });
+          task.mine = true;
+          this.load();
+        } catch (e) {
+          console.error('processTasks: unable to claim task', e);
+          return;
+        }
+      }
+      if (!task.formKey) {
+        console.warn('processTasks: task has no formKey', task);
+        return;
+      }
+      const sep = task.formKey.indexOf('?') >= 0 ? '&' : '?';
+      this.formUrl = task.formKey + sep + 'taskId=' + encodeURIComponent(task.id)
+                   + '&processInstanceId=' + encodeURIComponent(task.processInstanceId);
+      this.formTitle = task.name || 'Task';
+      this.formOpen = true;
+    },
+
+    // Called when the task-form dialog closes; the generated task form completes the task itself,
+    // so a re-fetch drops the finished task from the originating view's badge.
+    closeForm() {
+      this.formOpen = false;
+      this.formUrl = '';
+      this.refresh();
+    },
+  });
+}, { once: true });
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/notfound.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/notfound.html.template
new file mode 100644
index 0000000000..b64213b14a
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/notfound.html.template
@@ -0,0 +1,12 @@
+<!-- Generated by Eclipse Dirigible. Fallback view for unmatched routes. -->
+<div x-data class="size-full" style="display:flex; align-items:center; justify-content:center;">
+  <div x-h-info-page>
+    <div x-h-info-page-header>
+      <div x-h-info-page-media.icon>
+        <svg x-h-icon.circle-unknown role="img" aria-label="not found"></svg>
+      </div>
+      <div x-h-info-page-title>Page not found</div>
+      <div x-h-info-page-description>The page you are looking for does not exist.</div>
+    </div>
+  </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
new file mode 100644
index 0000000000..68ad078f4d
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template
@@ -0,0 +1,68 @@
+{
+    "aria": {
+        "showHide": "show/hide {{name}} options",
+        "options": "{{name}} options",
+        "tableRowMenu": "Table Row Menu",
+        "tableRowMenuBtn": "Table Row Menu Button",
+        "headerMenu": "Header Menu",
+        "headerMenuBtn": "Header Menu Button",
+        "addEntity": "add entity",
+        "editEntity": "edit entity",
+        "deleteEntity": "delete entity"
+    },
+    "state": {
+        "busy": "Loading..."
+    },
+    "messages": {
+        "error" : {
+            "incorrectInput": "Incorrect Input",
+            "loading": "Encounterd an error while loading",
+            "unableToCreate": "Unable to create {{name}}: '{{message}}'",
+            "unableToUpdate": "Unable to update {{name}}: '{{message}}'",
+            "unableToDelete": "Unable to delete {{name}}: '{{message}}'",
+            "unableToLoad": "Unable to load data: '{{message}}'",
+            "unableToLF": "Unable to list/filter {{name}}: '{{message}}'",
+            "unableToCount": "Unable to count {{name}}: '{{message}}'",
+            "pattern": "The value doesn't match the required pattern: {{rule}}",
+            "lengthMinMax": "Value must be between {{min}} and {{max}} characters long",
+            "lengthMin": "Value must not be less than {{min}} characters",
+            "lengthMax": "Value must not be more than {{max}} characters"
+        },
+        "propertySuccessfullyCreated": "{{name}} successfully created",
+        "propertySuccessfullyUpdated": "{{name}} successfully updated",
+        "inputSearch": "Search {{name}}...",
+        "inputEnter": "Enter {{name}}...",
+        "noData": "No data available.",
+        "deleteConfirm": "Are you sure you want to delete {{name}}? This action cannot be undone.",
+        "detailSelectRecord": "Select a record to get a list of it's details."
+    },
+    "defaults": {
+        "yes": "Yes",
+        "no": "No",
+        "add": "Add",
+        "refresh": "Refresh",
+        "to": "To {{text}}",
+        "from": "From {{text}}",
+        "filter": "Filter",
+        "print": "Print",
+        "reset": "Reset",
+        "create": "Create",
+        "edit": "Edit",
+        "update": "Update",
+        "delete": "Delete",
+        "cancel": "Cancel",
+        "items": "Items",
+        "description": "Description",
+        "formGrpFilter": "{{name}} Filter",
+        "formHeadSelect": "{{name}} Details",
+        "formHeadCreate": "Create {{name}}",
+        "formHeadUpdate": "Update {{name}}",
+        "reportTitle": "{{name}} Report",
+        "reportFilter": "Report Filter",
+        "viewDetails": "View Details",
+        "deleteTitle": "Delete {{name}}?",
+        "loadMore": "Load More..."
+    },
+    "extName": "{{content}}",
+    "t": {}
+}
\ No newline at end of file
diff --git a/components/template/template-form-builder-harmonia/README.md b/components/template/template-form-builder-harmonia/README.md
new file mode 100644
index 0000000000..9921431bc1
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/README.md
@@ -0,0 +1,62 @@
+# template-form-builder-harmonia
+
+Runtime form generator for the **Alpine.js + Harmonia** stack — the counterpart to
+`template-form-builder-angularjs`. Given a `.form` artifact it generates a standalone
+Harmonia form page (`gen/<genFolder>/forms/<form>/index.html` + `form.js`), used for
+app forms and **BPM task forms** (opened by the `processTasks` store of
+`template-application-ui-harmonia-java`).
+
+Registered on `platform-templates` (extension `form`), so it appears in the Generate
+picker and can be selected as the intent recipe's `form` template
+(`generation.form.templateId` in `<intent>.settings`).
+
+## The neutral `formController(ctx)` contract (read this first)
+
+A `.form`'s `code` block in the AngularJS runtime is written against `$scope` / `$http`,
+which an Alpine/Harmonia runtime cannot execute. This module therefore defines a
+**framework-neutral contract**: the `code` is the **body of `formController(ctx)`** and
+uses `ctx` instead of Angular globals:
+
+| ctx member | purpose |
+|---|---|
+| `ctx.model` | the reactive form model (bound to each widget's `x-model="model.<key>"`) |
+| `ctx.params` | parsed query params (`taskId`, `processInstanceId`, an entity id, …) |
+| `ctx.http` | the platform fetch client (`get/post/put/delete`; pass `{ baseUrl: '' }` for an absolute URL such as a generated controller or `/services/...`) |
+| `ctx.task` | `{ id, processInstanceId, complete(variables?) }` — `complete()` POSTs to `/services/inbox/tasks/{id}` |
+| `ctx.notify(msg)` | show a status message on the form |
+| `ctx.close()` | ask a hosting SPA dialog to close (no-op standalone) |
+
+The code attaches button handlers onto `ctx`; a widget `button`'s `callback` names the
+handler, invoked via the page's `run()`:
+
+```js
+// neutral .form code (body of formController(ctx))
+ctx.onApproveClicked = async () => {
+  await ctx.http.put(`/services/.../requests/${ctx.params.taskId}/approve`, {}, { baseUrl: '' });
+  await ctx.task.complete();
+  ctx.notify('Request approved');
+  ctx.close();
+};
+```
+
+> **Migration:** existing `.form` files with AngularJS `code` must have that code
+> rewritten to this contract to run under Harmonia. **Follow-up:** update
+> `FormIntentGenerator` (engine-intent) to emit neutral handlers instead of the current
+> `$scope` stubs, so intent-generated task forms render in Harmonia out of the box.
+
+## Status (v1)
+
+- **Widgets rendered:** header, paragraph, line, spacer, link, input-textfield,
+  input-textarea, input-number, input-checkbox, input-date, input-datetime-local,
+  input-time, input-color, button, and one level of `container-hbox` / `container-vbox`.
+- **Fallback:** any other `controlId` (image, input-documents, input-combobox/select/radio
+  with feeds, table, stepIndicator, progress) renders as a labelled text input with a TODO.
+- **Assets:** reuses the co-generated SPA shell's `app.js` / `config.js` / `api.js` /
+  `apiError.js` (`../../js/...`) + the Harmonia/Alpine/Lucide webjars — so a form is
+  generated alongside `template-application-ui-harmonia-java` output.
+
+## Follow-ups
+- Feed-driven widgets (combobox/select/radio with `feeds`), documents, table, stepIndicator.
+- `FormIntentGenerator` neutral-code emission + task-form migration.
+- A close/refresh handshake with the host dialog (`harmonia.form.close` postMessage is sent;
+  the SPA shell could listen and close + refresh proactively).
diff --git a/components/template/template-form-builder-harmonia/pom.xml b/components/template/template-form-builder-harmonia/pom.xml
new file mode 100644
index 0000000000..68191dd157
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/pom.xml
@@ -0,0 +1,24 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.eclipse.dirigible</groupId>
+        <artifactId>dirigible-components-parent</artifactId>
+        <version>14.0.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
+    </parent>
+
+    <name>Components - Template - Form Builder - Harmonia</name>
+    <artifactId>dirigible-components-template-form-builder-harmonia</artifactId>
+    <packaging>jar</packaging>
+
+    <properties>
+        <profile.content.phase>generate-sources</profile.content.phase>
+        <content.repository.name>template-form-builder-harmonia</content.repository.name>
+        <content.project.name>template-form-builder-harmonia</content.project.name>
+
+        <license.header.location>../generation-header.txt</license.header.location>
+    </properties>
+
+</project>
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/project.json b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/project.json
new file mode 100644
index 0000000000..811034b181
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/project.json
@@ -0,0 +1,5 @@
+{
+    "guid": "template-form-builder-harmonia",
+    "dependencies": [],
+    "actions": []
+}
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.extension b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.extension
new file mode 100644
index 0000000000..8a91017685
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.extension
@@ -0,0 +1,5 @@
+{
+    "module": "template-form-builder-harmonia/template/template.js",
+    "extensionPoint": "platform-templates",
+    "description": "The generator template from form to Harmonia (Alpine.js) format"
+}
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.js b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.js
new file mode 100644
index 0000000000..19c3ee1ed5
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.js
@@ -0,0 +1,44 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+import * as generateUtils from "service-generate/template/generateUtils";
+
+export function generate(model, parameters) {
+    const templateModel = JSON.parse(model);
+    const templateSources = getTemplate(parameters).sources;
+    // The form's `code` is the body of the neutral formController(ctx) — indent it for embedding.
+    if (templateModel.code) {
+        templateModel.code = templateModel.code.split("\n").map(e => `    ${e}`).join('\n');
+    }
+    return generateUtils.generateGeneric(templateModel, parameters, templateSources);
+};
+
+export function getTemplate(parameters) {
+    return {
+        name: "Harmonia Generator from Form Model",
+        description: "Alpine.js + Harmonia Form Model Generator Template",
+        extension: "form",
+        sources: [
+            {
+                location: "/template-form-builder-harmonia/ui/translations.json.template",
+                path: "translations/en-US/translations.json",
+                action: "translate",
+            },
+            {
+                location: "/template-form-builder-harmonia/ui/form.js.template",
+                action: "generate",
+                rename: "gen/{{genFolderName}}/forms/{{fileName}}/form.js",
+                engine: "velocity",
+            },
+            {
+                location: "/template-form-builder-harmonia/ui/index.html.template",
+                action: "generate",
+                rename: "gen/{{genFolderName}}/forms/{{fileName}}/index.html",
+                engine: "velocity",
+            },
+        ],
+        parameters: []
+    };
+}
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/form.js.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/form.js.template
new file mode 100644
index 0000000000..6488872b18
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/form.js.template
@@ -0,0 +1,92 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Neutral form controller contract (the Harmonia replacement for the AngularJS $scope/$http code).
+ * The .form's `code` block is the BODY of this function and receives a single `ctx`:
+ *   ctx.model    - the reactive form model (bound to the widgets' x-model)
+ *   ctx.params   - parsed query params (e.g. taskId, processInstanceId, an entity id)
+ *   ctx.http     - the platform fetch client (get/post/put/delete; pass { baseUrl: '' } for an
+ *                  absolute URL such as a generated controller or an /services/... endpoint)
+ *   ctx.task     - { id, processInstanceId, complete(variables?) } for BPM task forms; complete()
+ *                  posts to /services/inbox/tasks/{id} and the host dialog refreshes on close
+ *   ctx.notify(message)  - surface a status message on the form
+ *   ctx.close()          - ask a hosting SPA dialog to close (no-op standalone)
+ * The code attaches its button handlers onto ctx (e.g. ctx.onApproveClicked = () => {...}); a
+ * button's `callback` names the handler, invoked via run().
+ */
+function formController(ctx) {
+${code}
+}
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('harmoniaForm', () => ({
+    model: {},
+    state: 'ready',          // ready | submitting | success | error
+    message: '',
+    _ctx: null,
+
+    init() {
+      const qs = location.hash.includes('?') ? location.hash.split('?')[1] : location.search.slice(1);
+      const params = Object.fromEntries(new URLSearchParams(qs));
+      const self = this;
+      this._ctx = {
+        model: this.model,
+        params,
+        http: App.services.api,
+        task: {
+          id: params.taskId || null,
+          processInstanceId: params.processInstanceId || null,
+          complete(variables) {
+            return App.services.api.post('/services/inbox/tasks/' + params.taskId,
+              { action: 'COMPLETE', data: variables || self.model }, { baseUrl: '' });
+          },
+        },
+        notify(message) { self.message = message; },
+        close() {
+          try {
+            if (window.parent && window.parent !== window) {
+              window.parent.postMessage({ type: 'harmonia.form.close' }, '*');
+            }
+          } catch (e) { /* standalone: nothing to close */ }
+        },
+      };
+      try {
+        if (typeof formController === 'function') formController(this._ctx);
+      } catch (e) {
+        console.error('[form] controller error', e);
+      }
+      this.refreshIcons();
+    },
+
+    // Invoke a handler the controller attached to ctx; tolerates a trailing "()" in the .form callback.
+    run(callback) {
+      const name = String(callback || '').replace(/\(\s*\)$/, '').trim();
+      const fn = this._ctx && this._ctx[name];
+      if (typeof fn === 'function') return fn();
+      console.warn('[form] no handler for callback', callback);
+    },
+
+    // Generic submit for forms declaring a metadata URL and no explicit handler.
+    async submit() {
+      const url = '${metadata.url}';
+      if (!url) return;
+      this.state = 'submitting';
+      try {
+        await App.services.api.post(url, this.model, { baseUrl: '' });
+        this.state = 'success';
+        this.message = 'Submitted.';
+      } catch (e) {
+        this.state = 'error';
+        this.message = App.services.apiErrors.messageFor(e, 'Submit failed.');
+      }
+    },
+
+    refreshIcons() {
+      this.$nextTick(() => { if (window.lucide && window.lucide.createIcons) window.lucide.createIcons(); });
+    },
+  }));
+}, { once: true });
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
new file mode 100644
index 0000000000..1d651a7249
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -0,0 +1,114 @@
+#macro(leaf $el)
+#if($el.controlId == "header")
+        <h1 x-h-text.h3 class="mb-2">$!el.label</h1>
+#elseif($el.controlId == "paragraph")
+        <p x-h-text>$!el.label</p>
+#elseif($el.controlId == "line")
+        <hr x-h-separator />
+#elseif($el.controlId == "spacer")
+        <div class="flex-1"></div>
+#elseif($el.controlId == "link")
+        <a x-h-button data-variant="link" href="$!el.url">$!el.label</a>
+#elseif($el.controlId == "input-textarea")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <textarea x-h-textarea id="$el.id" rows="4" x-model="model.$el.model"#if($el.readonly) readonly#end></textarea>
+        </div>
+#elseif($el.controlId == "input-number")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <div x-h-input-number><input type="number" id="$el.id" x-model.number="model.$el.model"#if($el.readonly) readonly#end /></div>
+        </div>
+#elseif($el.controlId == "input-checkbox")
+        <div x-h-field data-orientation="horizontal">
+          <span x-h-checkbox><input type="checkbox" id="$el.id" x-model="model.$el.model"#if($el.readonly) disabled#end /></span>
+          <label x-h-label for="$el.id">$!el.label</label>
+        </div>
+#elseif($el.controlId == "input-date")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <input x-h-input type="date" id="$el.id" x-model="model.$el.model"#if($el.readonly) readonly#end />
+        </div>
+#elseif($el.controlId == "input-datetime-local")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <input x-h-input type="datetime-local" id="$el.id" x-model="model.$el.model"#if($el.readonly) readonly#end />
+        </div>
+#elseif($el.controlId == "input-time")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <input x-h-input type="time" id="$el.id" x-model="model.$el.model"#if($el.readonly) readonly#end />
+        </div>
+#elseif($el.controlId == "input-color")
+        <div x-h-field>
+          <label x-h-label for="$el.id">$!el.label</label>
+          <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>$!el.label</button>
+#else
+        <!-- TODO (forms v2): widget '$!el.controlId' not yet rendered in Harmonia -->
+        <div x-h-field>
+          <label x-h-label for="$!el.id">$!el.label</label>
+          <input x-h-input type="text" id="$!el.id" x-model="model.$!el.model"#if($el.readonly) readonly#end />
+        </div>
+#end
+#end
+<!DOCTYPE html>
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Standalone Harmonia (Alpine.js) runtime form, rendered from a .form artifact. Opened directly or
+  in a dialog/iframe (e.g. a BPM task form via the processTasks store). Its logic comes from the
+  neutral formController(ctx) contract in form.js (NOT AngularJS $scope/$http).
+  v1 renders header/paragraph/line/spacer/link/textfield/textarea/number/checkbox/date/datetime/
+  time/color/button + one level of container-hbox/vbox. Other widgets fall back to a text input.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>$!metadata.title</title>
+    <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
+    <style>[x-cloak]{display:none!important}</style>
+  </head>
+  <body class="p-4" x-data="harmoniaForm" x-cloak>
+    <form class="vbox gap-4" style="max-width: 720px;" @submit.prevent="submit()">
+      <div x-show="message" x-h-alert data-variant="information" role="status">
+        <div x-h-alert-description x-text="message"></div>
+      </div>
+      <div x-h-field-group>
+#foreach($element in $form)
+#if($element.controlId == "container-hbox")
+        <div class="hbox gap-3 items-end">
+#foreach($child in $element.children)
+#leaf($child)
+#end
+        </div>
+#elseif($element.controlId == "container-vbox")
+        <div class="vbox gap-3">
+#foreach($child in $element.children)
+#leaf($child)
+#end
+        </div>
+#else
+#leaf($element)
+#end
+#end
+      </div>
+    </form>
+
+    <!-- App namespace + fetch client, reused from the co-generated SPA shell (this form lives at
+         gen/<genFolder>/forms/<form>/, the shell js at gen/<genFolder>/js/ — i.e. ../../js). -->
+    <script src="../../js/app.js"></script>
+    <script src="../../js/config.js"></script>
+    <script src="../../js/services/api.js"></script>
+    <script src="../../js/services/apiError.js"></script>
+    <script src="./form.js"></script>
+    <script defer src="/webjars/alpinejs/dist/cdn.min.js"></script>
+    <script src="/webjars/codbex__harmonia/dist/harmonia.min.js"></script>
+    <script src="/webjars/lucide/dist/umd/lucide.min.js"></script>
+    <script>
+      document.addEventListener('alpine:initialized', () => { if (window.lucide) window.lucide.createIcons(); }, { once: true });
+    </script>
+  </body>
+</html>
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/translations.json.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/translations.json.template
new file mode 100644
index 0000000000..86fdba51a3
--- /dev/null
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/translations.json.template
@@ -0,0 +1,17 @@
+{
+    "aria": {
+        "showHide": "show/hide {{element}} options",
+        "options": "{{element}} options"
+    },
+    "default": {
+        "viewName": "{{name}} Form"
+    },
+    "dialogs": {
+        "successTitle": "Submited",
+        "errorTitle": "Submit failed",
+        "feedErrorTitle": "Feed request failed",
+        "feedError": "Could not retrive data from feed '{{feed}}'. See console for more information.",
+        "successMsg": "Form submited successfully!"
+    },
+    "t": {}
+}
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index 7ae192b7f2..7490466617 100644
--- a/pom.xml
+++ b/pom.xml
@@ -241,7 +241,7 @@
         <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>1.4.2</harmonia.version>
+        <harmonia.version>1.24.1</harmonia.version>
         <opensans.version>5.2.7</opensans.version>
         <lucide.version>1.8.0</lucide.version>
         <!-- Tests -->
@@ -583,6 +583,9 @@
                                 <exclude>
                                     **/src/main/resources/META-INF/dirigible/platform-core/ui/**
                                 </exclude>
+                                <exclude>
+                                    **/src/main/resources/META-INF/dirigible/application-core/vendor/**
+                                </exclude>
                                 <exclude>
                                     **/src/main/resources/META-INF/dirigible/view-terminal/js/**
                                 </exclude>