From 2887cd40077bd780014454f60884b00952d4803f Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 00:06:12 +0300
Subject: [PATCH 01/22] feat(template): Alpine.js + Harmonia runtime UI
 template (list + manage)

Adds `template-application-ui-harmonia-java`, a parallel runtime UI stack that
generates a self-contained Alpine.js + Harmonia SPA (client-routed via Pinecone,
no iframes/hubs) from the same `.model` as the Angular template, reusing the
Java REST/DAO backend unchanged.

- New generation template registered on `platform-templates` (appears in the EDM
  Generate picker as "Application - UI (Harmonia) - Java"). Composes the reused
  `template-application-rest-java` sources with a Harmonia UI source set.
- View types: read-only `list`, and `manage` (CRUD list + shared create/edit form
  on a `baseFormPage` with 422 ValidationError -> per-field mapping, relationship
  dropdowns, client validation, delete-confirm). Other view types stubbed.
- Reusable shell adopted from codbex-athena-app: x-h-split layout, sidebar,
  breadcrumb, responsive drawer, fetch entity client, error/i18n catalog.
- Phase 1 embedding: Alpine 3.15.11 + Harmonia 1.24.1 + Lucide served as webjars
  via application-core (harmonia.version bumped 1.4.2 -> 1.24.1); Pinecone Router
  vendored (no webjar) under application-core/vendor (license-excluded). The
  generated index.html references only local assets, no CDN.
- HARMONIA_RUNTIME_PLAN.md: research + phasing. IntentSettings: comment noting the
  intent model recipe names the template explicitly (Angular default today).

Verified end-to-end against a live app from a real model (DependsOnIT/edm.model):
generation succeeds, the SPA is served at /services/web/<project>/, and a CRUD
round-trip + relationship dropdowns hit the generated controllers.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 HARMONIA_RUNTIME_PLAN.md                      | 338 ++++++++++++++++++
 .../intent/generator/IntentSettings.java      |   3 +
 components/group/group-templates/pom.xml      |   4 +
 components/pom.xml                            |   6 +
 .../vendor/pinecone-router.min.js             |   4 +
 .../README.md                                 | 100 ++++++
 .../pom.xml                                   |  24 ++
 .../project.json                              |   5 +
 .../template/template.extension               |   5 +
 .../template/template.js                      |  62 ++++
 .../template/ui/list.js                       |  40 +++
 .../template/ui/manage.js                     |  60 ++++
 .../template/ui/navigation.js                 |  19 +
 .../template/ui/shell.js                      |  88 +++++
 .../template/ui/template.js                   |  44 +++
 .../ui/perspective/list/page.js.template      | 112 ++++++
 .../ui/perspective/list/view.html.template    |  92 +++++
 .../perspective/manage/form-page.js.template  | 152 ++++++++
 .../manage/form-view.html.template            | 129 +++++++
 .../perspective/manage/list-page.js.template  | 127 +++++++
 .../manage/list-view.html.template            | 130 +++++++
 .../ui/shell/css/app.css.template             |  13 +
 .../ui/shell/index.html.template              | 161 +++++++++
 .../ui/shell/js/app.js.template               |   6 +
 .../js/components/layout/appShell.js.template | 103 ++++++
 .../components/pages/baseFormPage.js.template | 112 ++++++
 .../js/components/pages/basePage.js.template  |  22 ++
 .../ui/shell/js/config.js.template            |  25 ++
 .../ui/shell/js/services/api.js.template      | 117 ++++++
 .../ui/shell/js/services/apiError.js.template |  59 +++
 .../js/services/formValidation.js.template    |  49 +++
 .../ui/shell/notfound.html.template           |  12 +
 .../ui/translations.json.template             |  68 ++++
 pom.xml                                       |   5 +-
 34 files changed, 2295 insertions(+), 1 deletion(-)
 create mode 100644 HARMONIA_RUNTIME_PLAN.md
 create mode 100644 components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/vendor/pinecone-router.min.js
 create mode 100644 components/template/template-application-ui-harmonia-java/README.md
 create mode 100644 components/template/template-application-ui-harmonia-java/pom.xml
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/project.json
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.extension
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/list.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/manage.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/navigation.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/shell.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/template.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/css/app.css.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/app.js.template
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/config.js.template
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/notfound.html.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/translations.json.template

diff --git a/HARMONIA_RUNTIME_PLAN.md b/HARMONIA_RUNTIME_PLAN.md
new file mode 100644
index 00000000000..c566239c5c8
--- /dev/null
+++ b/HARMONIA_RUNTIME_PLAN.md
@@ -0,0 +1,338 @@
+# 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.
+
+---
+
+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 a2436c1059b..6093d7a0d5f 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 c5573cb289c..15ecb931e69 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>
diff --git a/components/pom.xml b/components/pom.xml
index c4385c5c853..21d7b94df8f 100644
--- a/components/pom.xml
+++ b/components/pom.xml
@@ -274,6 +274,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>
@@ -1559,6 +1560,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>
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 00000000000..499bd305c9d
--- /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-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
new file mode 100644
index 00000000000..4b01fdf373c
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -0,0 +1,100 @@
+# 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: skeleton (Phase 2 start)
+
+This module **builds and registers** as a `platform-templates` extension and
+generates a runnable — but partial — Harmonia SPA: the shell + one view type
+(`list`). The remaining view types are stubbed as a parity checklist.
+
+## 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` | ⬜ stub |
+| master-manage + detail | `uiManageMasterModels` / `uiManageDetailsModels` | ⬜ stub |
+| main-details | (within master) | ⬜ stub |
+| setting | `uiSettingModels` | ⬜ stub |
+| report / report-chart / report-table | `uiReportChartModels` / `uiReportTableModels` | ⬜ stub |
+| navigation (generated nav data) | `uiNavigations` | ⬜ folded into index.html for now |
+| dialogs (filter/window) | per view | ⬜ |
+| forms + BPM task forms | (Phase 3) | ⬜ |
+| process tasks (`entity-process-tasks`) | gated on `hasProcess` | ⬜ |
+
+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 00000000000..933d6f12073
--- /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 00000000000..76f80de3e53
--- /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 00000000000..d9b3bfe23e1
--- /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 00000000000..5edc42380e6
--- /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 00000000000..a885292a4e3
--- /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 00000000000..09653c45b7a
--- /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/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 00000000000..35d4c57ca3e
--- /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/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 00000000000..1ed00726bab
--- /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,88 @@
+/*
+ * 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/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"
+        }
+    ];
+};
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 00000000000..16e8803403c
--- /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,44 @@
+/*
+ * 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 navigation from "template-application-ui-harmonia-java/template/ui/navigation";
+
+// TODO (Phase 2 — full parity): wire the remaining view types, mirroring the Angular
+// module's collections. Each is a thin source-collector that emits Harmonia view
+// fragments + Alpine.data page components + <template x-route> declarations.
+// import * as masterDetailsListTemplate from "template-application-ui-harmonia-java/template/ui/masterDetailsList";
+// import * as masterDetailsManageTemplate from "template-application-ui-harmonia-java/template/ui/masterDetailsManage";
+// import * as settingTemplate from "template-application-ui-harmonia-java/template/ui/setting";
+// import * as reportTemplate from "template-application-ui-harmonia-java/template/ui/report";
+// import * as reportChartTemplate from "template-application-ui-harmonia-java/template/ui/reportChart";
+// import * as reportTableTemplate from "template-application-ui-harmonia-java/template/ui/reportTable";
+
+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),
+        ...navigation.getSources(parameters),
+        // TODO (Phase 2): ...masterDetailsListTemplate.getSources(parameters),
+        // TODO (Phase 2): ...masterDetailsManageTemplate.getSources(parameters),
+        // TODO (Phase 2): ...settingTemplate.getSources(parameters),
+        // TODO (Phase 3): ...reportTemplate.getSources(parameters),
+        // TODO (Phase 3): ...reportChartTemplate.getSources(parameters),
+        // TODO (Phase 3): ...reportTableTemplate.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 00000000000..3c062cc0940
--- /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: '/${perspectiveName.toLowerCase()}/${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 00000000000..34bffb3c6e1
--- /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,92 @@
+<!--
+  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
+          </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
+            </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 00000000000..3fa9cf1c1a6
--- /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,152 @@
+#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: '/${perspectiveName.toLowerCase()}/${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];
+          }
+          this.state = 'ready';
+        } catch (e) {
+          this.applyLoadError(e, { fallbackMessage: 'Could not load the ${name} record.' });
+        }
+      } else {
+        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 {
+        if (this.isEdit) {
+          await App.services.api.put(this.apiPath + '/' + encodeURIComponent(this.id), this.form);
+        } else {
+          await App.services.api.post(this.apiPath, this.form);
+        }
+        this.navigateBack('/${name}');
+      } catch (e) {
+        this.applyApiError(e, {
+          fallbackMessage: this.isEdit ? 'Could not update the ${name} record.'
+                                       : 'Could not create the ${name} record.'
+        });
+      }
+    },
+
+    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 00000000000..5838e2a074d
--- /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 00000000000..27365c2e463
--- /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: '/${perspectiveName.toLowerCase()}/${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 00000000000..2caec101fcf
--- /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,130 @@
+<!--
+  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>
+                <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/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 00000000000..651a5e19466
--- /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/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 00000000000..208ecd007b3
--- /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,161 @@
+<!DOCTYPE html>
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Aggregate SPA entry for the Harmonia runtime. Generated once over the whole model:
+  $models holds model.entities, looped below for routes, nav and page-component scripts.
+
+  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>
+                  <!-- TODO (Phase 2): drive from a generated nav (see appShell `nav`). Skeleton
+                       enumerates LIST + MANAGE PRIMARY entities directly. -->
+#foreach($entity in $models)
+#if(($entity.layoutType == "LIST" || $entity.layoutType == "MANAGE") && $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>
+          </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>
+
+    <!-- Routes (Pinecone reads these from the document). -->
+    <!-- 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
+    <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>
+#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")
+    <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
+#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>
+    <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 00000000000..49e4068639b
--- /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,6 @@
+window.App = {
+  services: {},
+  routes: {},
+  utils: {},
+  config: {}
+};
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 00000000000..847187beef4
--- /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 00000000000..80ea4d22ece
--- /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,112 @@
+/**
+ * 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;
+          });
+        });
+      });
+    },
+
+    // Read a validated `returnTo` from the current URL. With hash routing the
+    // query lives in the hash, not window.location.search — check the hash first.
+    returnToParam() {
+      let qs = '';
+      if (window.location.hash.includes('?')) qs = window.location.hash.split('?')[1];
+      else if (window.location.search) qs = window.location.search.slice(1);
+      try {
+        const ret = new URLSearchParams(qs).get('returnTo');
+        if (ret && ret.startsWith('/')) return ret;
+      } catch (_) {}
+      return '';
+    },
+
+    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 00000000000..f68b88f4631
--- /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/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 00000000000..92beffff665
--- /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,25 @@
+/*
+ * 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>/<perspective-lowercased>/<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}.
+  restBase: '/services/java/${projectName}/gen/${genFolderName}/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 00000000000..14a646a3d6b
--- /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 00000000000..8bdb1b5698e
--- /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 00000000000..d187e451b1d
--- /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/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 00000000000..b64213b14aa
--- /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 00000000000..68ad078f4d3
--- /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/pom.xml b/pom.xml
index 7ae192b7f2f..7490466617f 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>

From c81f167649f7d5b48260624ab9b126399fa976cf Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 00:13:35 +0300
Subject: [PATCH 02/22] feat(template): Harmonia setting view type + fix
 index.html model dump

- Add `setting` view type: SETTING entities (e.g. Country/City) reuse the manage
  CRUD templates against the uiSettingModels collection, grouped under a "Settings"
  sidebar section with their own routes; their derived controller path
  (<restBase>/settings/<Entity>Controller) matches the generated backend.
- Fix: the shell index.html header comment contained a bare `$models` Velocity
  reference, which rendered the entire entity object graph into a comment in every
  generated app. Reworded to prose.

Verified live: generating DependsOnIT/edm.model now produces Country/City CRUD UI
(list + form pages + views), a Settings sidebar group, and /Country|/City routes;
the header no longer dumps the model.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |  2 +-
 .../template/ui/setting.js                    | 47 +++++++++++++++++++
 .../template/ui/template.js                   |  2 +
 .../ui/shell/index.html.template              | 36 ++++++++++++--
 4 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/setting.js

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 4b01fdf373c..504c30934c5 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -72,7 +72,7 @@ no `collection`, so `$models` = `model.entities`.
 | master-list + detail | `uiListMasterModels` / `uiListDetailsModels` | ⬜ stub |
 | master-manage + detail | `uiManageMasterModels` / `uiManageDetailsModels` | ⬜ stub |
 | main-details | (within master) | ⬜ stub |
-| setting | `uiSettingModels` | ⬜ stub |
+| setting | `uiSettingModels` | ✅ reuses the manage CRUD templates, grouped under a "Settings" sidebar section |
 | report / report-chart / report-table | `uiReportChartModels` / `uiReportTableModels` | ⬜ stub |
 | navigation (generated nav data) | `uiNavigations` | ⬜ folded into index.html for now |
 | dialogs (filter/window) | per view | ⬜ |
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 00000000000..8de9c1100de
--- /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/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
index 16e8803403c..ab574f144d8 100644
--- 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
@@ -12,6 +12,7 @@ import * as shellTemplate from "template-application-ui-harmonia-java/template/u
 // 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 navigation from "template-application-ui-harmonia-java/template/ui/navigation";
 
 // TODO (Phase 2 — full parity): wire the remaining view types, mirroring the Angular
@@ -33,6 +34,7 @@ export function getSources(parameters) {
         ...shellTemplate.getSources(parameters),
         ...listTemplate.getSources(parameters),
         ...manageTemplate.getSources(parameters),
+        ...settingTemplate.getSources(parameters),
         ...navigation.getSources(parameters),
         // TODO (Phase 2): ...masterDetailsListTemplate.getSources(parameters),
         // TODO (Phase 2): ...masterDetailsManageTemplate.getSources(parameters),
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index 208ecd007b3..8f55c64c695 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <!--
   Generated by Eclipse Dirigible based on model and template.
-  Aggregate SPA entry for the Harmonia runtime. Generated once over the whole model:
-  $models holds model.entities, looped below for routes, nav and page-component scripts.
+  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
@@ -61,6 +62,27 @@
                 </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
           </div>
         </div>
       </div>
@@ -117,6 +139,14 @@
     <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
     <template x-route="notfound" x-template.target.app="./views/_notfound.html"></template>
 
@@ -136,7 +166,7 @@
 #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")
+#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

From f6ba905d1d7db2801d9f420edb68351ffdb7eda4 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 08:11:42 +0300
Subject: [PATCH 03/22] feat(template): Harmonia master-detail view type + fix
 sanitized REST paths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Master-detail (MANAGE_MASTER/LIST_MASTER + MANAGE_DETAILS/LIST_DETAILS):
- Master entities get a master page at /<Master> — an x-h-split with the master
  record list (left) and, for the selected record, its detail panels (right).
  Masters reuse the manage form for their own routed create/edit.
- Details are decoupled via a runtime registry: each detail emits a registration
  (App.registerDetail(<master>, {...})) so a master renders one generic detailPanel
  per detail without enumerating them at generation time. The panel lists rows
  filtered to the master via the controller's ?<masterEntityId>=<id> query (built
  into the reused rest-java controller), with delete + routed create/edit (FK + a
  returnTo preset; baseFormPage now prefills any form field from a matching query
  param).
- New: detailPanel.js (shell), masterDetail.js collector, master-page/-view +
  detail-register templates; App.details registry; index.html wires master nav,
  routes and detail registration/form scripts.

Fix (surfaced by the hyphenated `sales-order` model): the generated SPA built
its REST base from the raw genFolderName/lowercased perspective, but the Java
backend lives under the *sanitised* package (sales-order -> sales_order). config.js
restBase now uses ${javaGenFolderName} and every page's apiPath uses
${javaPerspectiveName} — matching the DAO/REST templates. Phase 0/1 worked only
because `edm` needed no sanitising.

Verified live against sales-order.model: master Customer + two CustomerPayment
details created through the controllers, and the detail panel's filtered fetch
(?Customer=1) returns exactly that master's payments.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |   4 +-
 .../template/ui/masterDetail.js               |  90 ++++++++++
 .../template/ui/shell.js                      |   5 +
 .../template/ui/template.js                   |  21 +--
 .../ui/perspective/list/page.js.template      |   2 +-
 .../perspective/manage/form-page.js.template  |   8 +-
 .../perspective/manage/list-page.js.template  |   2 +-
 .../master/detail-register.js.template        |  26 +++
 .../master/master-page.js.template            |  83 +++++++++
 .../master/master-view.html.template          | 162 ++++++++++++++++++
 .../ui/shell/index.html.template              |  28 ++-
 .../ui/shell/js/app.js.template               |  14 +-
 .../js/components/detailPanel.js.template     |  71 ++++++++
 .../components/pages/baseFormPage.js.template |  30 ++--
 .../ui/shell/js/config.js.template            |   6 +-
 15 files changed, 517 insertions(+), 35 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/masterDetail.js
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 504c30934c5..908c6cf62ec 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -69,8 +69,8 @@ no `collection`, so `$models` = `model.entities`.
 |---|---|---|
 | 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` | ⬜ stub |
-| master-manage + detail | `uiManageMasterModels` / `uiManageDetailsModels` | ⬜ stub |
+| 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 | `uiReportChartModels` / `uiReportTableModels` | ⬜ stub |
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 00000000000..bf34049f1c2
--- /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/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
index 1ed00726bab..2ad28d3f6c9 100644
--- 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
@@ -69,6 +69,11 @@ export function getSources() {
             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/components/pages/baseFormPage.js.template",
             action: "copy",
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
index ab574f144d8..aa45244615a 100644
--- 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
@@ -13,17 +13,12 @@ import * as shellTemplate from "template-application-ui-harmonia-java/template/u
 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 navigation from "template-application-ui-harmonia-java/template/ui/navigation";
 
-// TODO (Phase 2 — full parity): wire the remaining view types, mirroring the Angular
-// module's collections. Each is a thin source-collector that emits Harmonia view
-// fragments + Alpine.data page components + <template x-route> declarations.
-// import * as masterDetailsListTemplate from "template-application-ui-harmonia-java/template/ui/masterDetailsList";
-// import * as masterDetailsManageTemplate from "template-application-ui-harmonia-java/template/ui/masterDetailsManage";
-// import * as settingTemplate from "template-application-ui-harmonia-java/template/ui/setting";
-// import * as reportTemplate from "template-application-ui-harmonia-java/template/ui/report";
-// import * as reportChartTemplate from "template-application-ui-harmonia-java/template/ui/reportChart";
-// import * as reportTableTemplate from "template-application-ui-harmonia-java/template/ui/reportTable";
+// TODO (Phase 3 — reports & forms): report / report-chart / report-table view types, plus the
+// Harmonia form runtime (.form artifacts incl. BPM task forms). Each is a thin source-collector
+// emitting Harmonia view fragments + Alpine.data page components + <template x-route> declarations.
 
 export function getSources(parameters) {
     return [
@@ -35,12 +30,8 @@ export function getSources(parameters) {
         ...listTemplate.getSources(parameters),
         ...manageTemplate.getSources(parameters),
         ...settingTemplate.getSources(parameters),
+        ...masterDetailTemplate.getSources(parameters),
         ...navigation.getSources(parameters),
-        // TODO (Phase 2): ...masterDetailsListTemplate.getSources(parameters),
-        // TODO (Phase 2): ...masterDetailsManageTemplate.getSources(parameters),
-        // TODO (Phase 2): ...settingTemplate.getSources(parameters),
-        // TODO (Phase 3): ...reportTemplate.getSources(parameters),
-        // TODO (Phase 3): ...reportChartTemplate.getSources(parameters),
-        // TODO (Phase 3): ...reportTableTemplate.getSources(parameters),
+        // TODO (Phase 3 — reports): report / report-chart / report-table view types.
     ];
 };
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
index 3c062cc0940..9e6c2a3e5c3 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
@@ -23,7 +23,7 @@ document.addEventListener('alpine:init', () => {
 
     // Controller path for ${name}, relative to App.config.restBase
     // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
-    apiPath: '/${perspectiveName.toLowerCase()}/${name}Controller',
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
 
     async init() {
       await this.load();
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
index 3fa9cf1c1a6..d1f4380582f 100644
--- 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
@@ -48,7 +48,7 @@ document.addEventListener('alpine:init', () => {
 
     // Controller path for ${name}, relative to App.config.restBase
     // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
-    apiPath: '/${perspectiveName.toLowerCase()}/${name}Controller',
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
 
     async init() {
       // The edit route is /${name}/{id}/edit — Pinecone exposes the param as `id`.
@@ -73,6 +73,12 @@ document.addEventListener('alpine:init', () => {
           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();
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
index 27365c2e463..f8187f4d65b 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-page.js.template
@@ -29,7 +29,7 @@ document.addEventListener('alpine:init', () => {
 
     // Controller path for ${name}, relative to App.config.restBase
     // (the default base api.* prepends): <restBase>/<perspective>/<Entity>Controller.
-    apiPath: '/${perspectiveName.toLowerCase()}/${name}Controller',
+    apiPath: '/${javaPerspectiveName}/${name}Controller',
 
     async init() {
       await this.load();
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 00000000000..5c2ca0f7c26
--- /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: App.config.restBase + '/${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 00000000000..3a1f67b8c4b
--- /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 00000000000..29fcfe6d0ec
--- /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,162 @@
+<!--
+  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>
+                  <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/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index 8f55c64c695..63a47ec9c01 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -48,9 +48,9 @@
               <div x-h-sidebar-group-content>
                 <ul x-h-sidebar-menu>
                   <!-- TODO (Phase 2): drive from a generated nav (see appShell `nav`). Skeleton
-                       enumerates LIST + MANAGE PRIMARY entities directly. -->
+                       enumerates top-level PRIMARY entities (list / manage / master) directly. -->
 #foreach($entity in $models)
-#if(($entity.layoutType == "LIST" || $entity.layoutType == "MANAGE") && $entity.type == "PRIMARY")
+#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>
@@ -147,6 +147,21 @@
     <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
     <template x-route="notfound" x-template.target.app="./views/_notfound.html"></template>
 
@@ -162,6 +177,7 @@
     <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>
 #foreach($entity in $models)
 #if($entity.layoutType == "LIST" && $entity.type == "PRIMARY")
     <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}ListPage.js" defer></script>
@@ -170,6 +186,14 @@
     <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
 #end
 
     <!-- 3. Alpine LAST (Harmonia bundle auto-starts Alpine — do NOT call Alpine.start()) -->
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
index 49e4068639b..4c0d2a3f8bb 100644
--- 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
@@ -2,5 +2,17 @@ window.App = {
   services: {},
   routes: {},
   utils: {},
-  config: {}
+  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 00000000000..53ede3d227c
--- /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,71 @@
+/**
+ * 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 }.
+ */
+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() {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        // The detail controller filters by the master FK query param.
+        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/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
index 80ea4d22ece..8dd73833f68 100644
--- 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
@@ -92,19 +92,29 @@ function baseFormPage() {
       });
     },
 
-    // Read a validated `returnTo` from the current URL. With hash routing the
-    // query lives in the hash, not window.location.search — check the hash first.
-    returnToParam() {
-      let qs = '';
-      if (window.location.hash.includes('?')) qs = window.location.hash.split('?')[1];
-      else if (window.location.search) qs = window.location.search.slice(1);
-      try {
-        const ret = new URLSearchParams(qs).get('returnTo');
-        if (ret && ret.startsWith('/')) return ret;
-      } catch (_) {}
+    // 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/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
index 92beffff665..f3f4d3b5eca 100644
--- 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
@@ -18,8 +18,10 @@ App.config = {
 
   // 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>/<perspective-lowercased>/<Entity>Controller
+  // 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}.
-  restBase: '/services/java/${projectName}/gen/${genFolderName}/api'
+  // 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'
 };

From 08a7da08b39e27cc9108f4c675cc6c8870b73236 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 08:29:47 +0300
Subject: [PATCH 04/22] feat(template): Harmonia process-task surfacing
 (entity-process-tasks equivalent)

Surfaces a process-aware record's BPM user tasks inline, the Alpine/Harmonia
counterpart of the dashboard ProcessTasks module:
- New `processTasks` Alpine store: fetches the current user's inbox tasks
  (/services/inbox/tasks ?type=assignee + ?type=groups), buckets by
  processInstanceId, claims candidate tasks (POST /services/inbox/tasks/{id}
  {action:CLAIM}), and opens the task's formKey in an app-wide dialog (iframe),
  re-fetching on close so completed tasks drop off.
- Generated list / manage / master rows render an inline inbox popover (task
  count + menu) gated on $hasProcess, matching the record via
  entity.ProcessId === task.processInstanceId.
- Shell wires the store script + the task-form dialog into index.html.

Verified: the store + dialog are emitted and wired; gating is correct (a
non-process model emits zero task markup); the inbox endpoints the store calls
respond 200. Full surfacing of a live task needs a process-enabled model
(deferred to combined testing).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |  2 +-
 .../template/ui/shell.js                      |  5 ++
 .../ui/perspective/list/view.html.template    | 17 ++++
 .../manage/list-view.html.template            | 12 +++
 .../master/master-view.html.template          | 12 +++
 .../ui/shell/index.html.template              | 16 ++++
 .../shell/js/stores/processTasks.js.template  | 87 +++++++++++++++++++
 7 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 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

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 908c6cf62ec..97d7335a7e6 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -77,7 +77,7 @@ no `collection`, so `$models` = `model.entities`.
 | navigation (generated nav data) | `uiNavigations` | ⬜ folded into index.html for now |
 | dialogs (filter/window) | per view | ⬜ |
 | forms + BPM task forms | (Phase 3) | ⬜ |
-| process tasks (`entity-process-tasks`) | gated on `hasProcess` | ⬜ |
+| 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
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
index 2ad28d3f6c9..3ca15677a76 100644
--- 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
@@ -74,6 +74,11 @@ export function getSources() {
             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",
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
index 34bffb3c6e1..6410906e684 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
@@ -62,6 +62,9 @@
               </div>
             </th>
 #end
+#end
+#if($hasProcess)
+            <th x-h-table-head scope="col"></th>
 #end
           </tr>
         </thead>
@@ -75,6 +78,20 @@
 #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>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
index 2caec101fcf..b42cdb08544 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
@@ -81,6 +81,18 @@
 #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>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
index 29fcfe6d0ec..eeb908b8b85 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
@@ -47,6 +47,18 @@
 #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>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index 63a47ec9c01..6d2f15b47c2 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -125,6 +125,21 @@
 
     </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). -->
     <!-- LIST entities: one read-only list route each. -->
 #foreach($entity in $models)
@@ -178,6 +193,7 @@
     <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>
 #foreach($entity in $models)
 #if($entity.layoutType == "LIST" && $entity.type == "PRIMARY")
     <script src="./js/components/pages/${entity.perspectiveName}/${entity.name}ListPage.js" defer></script>
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 00000000000..28e5189eae9
--- /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,87 @@
+/**
+ * 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: {},
+    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 seen = new Set();
+        const collect = (tasks, isMine) => (tasks || []).forEach((t) => {
+          if (!t.processInstanceId || seen.has(t.id)) return;
+          seen.add(t.id);
+          t.mine = isMine;
+          (map[t.processInstanceId] = map[t.processInstanceId] || []).push(t);
+        });
+        collect(mine, true);
+        collect(groups, false);
+        this.byProcessId = map;
+        this.loaded = true;
+      } catch (e) {
+        this.byProcessId = {};
+        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 });

From a00ac358e7063e8488eb5f32d409bf42bded214d Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 08:40:17 +0300
Subject: [PATCH 05/22] feat(template): Harmonia forms runtime
 (template-form-builder-harmonia)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New module — the Alpine.js + Harmonia counterpart of template-form-builder-angularjs.
Given a .form artifact it generates a standalone Harmonia form page
(gen/<genFolder>/forms/<form>/index.html + form.js), for app forms and BPM task
forms (opened by the processTasks store). Registered on platform-templates
(extension "form") so it shows in the Generate picker and can be the intent
recipe's `form` template.

Neutral form-controller contract (the decided replacement for AngularJS $scope/$http):
the .form `code` is the body of formController(ctx), with ctx.{model, params, http,
task:{id,processInstanceId,complete()}, notify, close}. Button `callback`s name
handlers attached to ctx, invoked via the page's run(). BPM task forms complete via
ctx.task.complete() -> POST /services/inbox/tasks/{id}.

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. Reuses the co-generated SPA shell's app/config/api/apiError
(../../js) + the Harmonia/Alpine/Lucide webjars.

Verified live: registers as "Harmonia Generator from Form Model"; generating the
BPMLeaveRequestIT .form produces a Harmonia page (header + textfield + two date
inputs bound to model.*, Approve/Decline buttons with data-variant + run()) and the
formController(ctx) wrapper. Documented follow-ups: migrate existing AngularJS .form
code to the ctx contract and have FormIntentGenerator emit it; feed-driven/complex
widgets.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components/group/group-templates/pom.xml      |   4 +
 components/pom.xml                            |   6 +
 .../template-form-builder-harmonia/README.md  |  62 ++++++++++
 .../template-form-builder-harmonia/pom.xml    |  24 ++++
 .../project.json                              |   5 +
 .../template/template.extension               |   5 +
 .../template/template.js                      |  44 +++++++
 .../ui/form.js.template                       |  92 ++++++++++++++
 .../ui/index.html.template                    | 114 ++++++++++++++++++
 .../ui/translations.json.template             |  17 +++
 10 files changed, 373 insertions(+)
 create mode 100644 components/template/template-form-builder-harmonia/README.md
 create mode 100644 components/template/template-form-builder-harmonia/pom.xml
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/project.json
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.extension
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/template/template.js
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/form.js.template
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
 create mode 100644 components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/translations.json.template

diff --git a/components/group/group-templates/pom.xml b/components/group/group-templates/pom.xml
index 15ecb931e69..7230918bc3a 100644
--- a/components/group/group-templates/pom.xml
+++ b/components/group/group-templates/pom.xml
@@ -123,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 21d7b94df8f..571239fe4bc 100644
--- a/components/pom.xml
+++ b/components/pom.xml
@@ -284,6 +284,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>
@@ -1610,6 +1611,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/template/template-form-builder-harmonia/README.md b/components/template/template-form-builder-harmonia/README.md
new file mode 100644
index 00000000000..9921431bc10
--- /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 00000000000..68191dd1579
--- /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 00000000000..811034b1814
--- /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 00000000000..8a910176858
--- /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 00000000000..19c3ee1ed5a
--- /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 00000000000..6488872b189
--- /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 00000000000..1d651a72493
--- /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 00000000000..86fdba51a30
--- /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

From 4e57d0aab615a247aea9829115a0dfd791659f01 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 08:50:05 +0300
Subject: [PATCH 06/22] feat(template): Harmonia report view types (table +
 chart)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Report entities (type REPORT) run server-side via the generated Java report
controller (reportFileEntity: GET / rows, POST /search, POST /export). New report.js
collector emits, per report:
- REPORT_TABLE (uiReportTableModels): a <Name>ReportPage + table view — data table over
  the report rows with a Refresh and a client-side CSV Export.
- REPORT_BAR/LINE/PIE/DOUGHNUT/POLARAREA/RADAR (uiReportChartModels): a chart page that
  renders the rows with chart.js (already a bundled webjar, /webjars/chart.js/dist/
  chart.umd.js), labelled by the report's primary-key column with one dataset per other
  column — mirroring the Angular report-chart mapping.

Both resolve <restBase>/reports/<Name>Controller (javaPerspectiveName). index.html adds
report routes, a Reports sidebar group, the page scripts and the chart.js tag.

Verified non-breaking: a non-report model generates cleanly (201) with the chart.js
tag present and no Reports group emitted. Full table/chart runtime needs a
report-bearing model (intent-produced) — covered in combined testing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |  2 +-
 .../template/ui/report.js                     | 48 +++++++++++++++++
 .../template/ui/template.js                   |  8 +--
 .../perspective/report/chart-page.js.template | 47 ++++++++++++++++
 .../report/chart-view.html.template           | 14 +++++
 .../perspective/report/table-page.js.template | 53 +++++++++++++++++++
 .../report/table-view.html.template           | 40 ++++++++++++++
 .../ui/shell/index.html.template              | 32 +++++++++++
 8 files changed, 239 insertions(+), 5 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/report.js
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 97d7335a7e6..7c63774eef4 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -73,7 +73,7 @@ no `collection`, so `$models` = `model.entities`.
 | 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 | `uiReportChartModels` / `uiReportTableModels` | ⬜ stub |
+| 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 | (Phase 3) | ⬜ |
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 00000000000..7684239b2be
--- /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/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
index aa45244615a..6547e48981c 100644
--- 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
@@ -14,11 +14,11 @@ import * as listTemplate from "template-application-ui-harmonia-java/template/ui
 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";
 
-// TODO (Phase 3 — reports & forms): report / report-chart / report-table view types, plus the
-// Harmonia form runtime (.form artifacts incl. BPM task forms). Each is a thin source-collector
-// emitting Harmonia view fragments + Alpine.data page components + <template x-route> declarations.
+// 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 [
@@ -31,7 +31,7 @@ export function getSources(parameters) {
         ...manageTemplate.getSources(parameters),
         ...settingTemplate.getSources(parameters),
         ...masterDetailTemplate.getSources(parameters),
+        ...reportTemplate.getSources(parameters),
         ...navigation.getSources(parameters),
-        // TODO (Phase 3 — reports): report / report-chart / report-table view types.
     ];
 };
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 00000000000..30eac3d4a33
--- /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 00000000000..f15c18c896d
--- /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 00000000000..15781d93486
--- /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 00000000000..2749ad8b791
--- /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/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index 6d2f15b47c2..70185af3a24 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -78,6 +78,27 @@
                     </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>
@@ -177,6 +198,12 @@
     <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>
 
@@ -210,6 +237,9 @@
     <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()) -->
@@ -218,6 +248,8 @@
 
     <!-- 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();

From a3c81b2c8a1efd064d4e16b16b1f8d632052953a Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 08:55:11 +0300
Subject: [PATCH 07/22] feat(template): transfer Process Inbox + Documents to
 the Harmonia shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old dashboard shell's built-in Process Inbox and Documents perspectives, ported
as always-present sections of every generated Harmonia app (their backends — the
platform inbox + CMS APIs — are reused unchanged):

- Process Inbox (/inbox): lists the user's BPM tasks (assignee + candidate groups)
  via the shared processTasks store (extended with a flat `tasks` list), with
  search and claim-&-open into the app-wide task-form dialog.
- Documents (/documents): a CMS folder browser over /services/js/documents/api —
  navigate folders, download files, create folder, multipart upload, delete, with a
  path breadcrumb. Folders vs files via type === 'cmis:folder'.

Wired as static shell assets: a built-in "Inbox"/"Documents" sidebar group, the
/inbox + /documents routes, and the page scripts — emitted for every app.

Verified live: both views + page components serve; index.html routes/nav/scripts
present; the inbox (/services/inbox/tasks) and documents (/services/js/documents/api)
endpoints respond 200.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |  2 +
 .../template/ui/shell.js                      | 21 ++++
 .../ui/shell/documents.html.template          | 81 ++++++++++++++++
 .../ui/shell/inbox.html.template              | 52 ++++++++++
 .../ui/shell/index.html.template              | 17 ++++
 .../pages/documentsPage.js.template           | 97 +++++++++++++++++++
 .../js/components/pages/inboxPage.js.template | 28 ++++++
 .../shell/js/stores/processTasks.js.template  | 10 +-
 8 files changed, 306 insertions(+), 2 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/documents.html.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/inbox.html.template
 create mode 100644 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
 create mode 100644 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

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 7c63774eef4..899aeb36850 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -77,6 +77,8 @@ no `collection`, so `$models` = `model.entities`.
 | navigation (generated nav data) | `uiNavigations` | ⬜ folded into index.html for now |
 | dialogs (filter/window) | per view | ⬜ |
 | forms + BPM task forms | (Phase 3) | ⬜ |
+| **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):
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
index 3ca15677a76..1565a253bfd 100644
--- 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
@@ -93,6 +93,27 @@ export function getSources() {
             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/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 00000000000..3a9041f83e1
--- /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 00000000000..140881d9421
--- /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
index 70185af3a24..e078813b109 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -46,6 +46,18 @@
             <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. -->
@@ -162,6 +174,9 @@
     </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")
@@ -221,6 +236,8 @@
     <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>
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 00000000000..627198319db
--- /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 00000000000..58d1b645ac3
--- /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/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
index 28e5189eae9..d0c410815bc 100644
--- 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
@@ -14,6 +14,7 @@
 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: '',
@@ -30,19 +31,24 @@ document.addEventListener('alpine:init', () => {
           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 (!t.processInstanceId || seen.has(t.id)) return;
+          if (seen.has(t.id)) return;
           seen.add(t.id);
           t.mine = isMine;
-          (map[t.processInstanceId] = map[t.processInstanceId] || []).push(t);
+          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);
       }
     },

From 77153244d85a8391fd193d717b1553445142312f Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 12:53:27 +0300
Subject: [PATCH 08/22] fix(template): intent glue handlers use self-describing
 @Component, not class-level @Listener/@Scheduled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rollup, notification, integration and schedule glue templates put @Listener /
@Scheduled on the class, but those annotations are @Target(METHOD) only (the SDK moved
to method-level + self-describing interfaces). javac rejected the generated classes
with "annotation interface not applicable to this kind of declaration", so engine-java
failed to compile gen/events/*.java and the app's client-Java sync broke.

Align them with the working Trigger template's self-describing style:
- Rollup / Notification / Integration: @Component implements MessageHandler with
  destination() + kind() instead of class-level @Listener(name=, kind=).
- Job: @Component implements JobHandler with cron() instead of class-level
  @Scheduled(expression=).
(Webhook's @Controller is @Target(TYPE) — fine; Resolver is a JavaDelegate — fine.)

Verified live against dirigiblelabs/sample-intent-model: intent generate 200, glue
generate 201, BookLoanCountRollupOnDelete + all gen/events classes now compile clean
(no "annotation interface not applicable"), and the handlers register without
instantiation errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../events/Integration.java.template               | 14 ++++++++++++--
 .../events/Job.java.template                       |  9 +++++++--
 .../events/Notification.java.template              | 14 ++++++++++++--
 .../events/Rollup.java.template                    | 14 ++++++++++++--
 4 files changed, 43 insertions(+), 8 deletions(-)

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 7eac7672e18..38880d61148 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 8359374c112..014d6ae53fc 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 36a519a5b31..05974a2890b 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 e9ac07f9194..b871e18ac20 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);

From ccc89258afaa2fe7edddc18b1ba6e6a9380b3de1 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 13:14:32 +0300
Subject: [PATCH 09/22] fix(template): Harmonia forms convert date/time widgets
 to the backend temporal format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A datetime-local/date/time input value (local, no zone) was POSTed raw, so a
java.time.Instant/Timestamp field failed Jackson binding ("Cannot deserialize
java.time.Instant from String 2026-06-09T16:04") — the form-create 400 the user hit.

form-page now converts both directions (matching the AngularJS stack's new Date(value)):
- toPayload() (create/edit submit): empty date -> null; an HTML date/datetime value ->
  a full ISO instant (…Z) via new Date().toISOString() so Instant/Timestamp parse; a
  bare TIME ("16:04", not a valid Date) passes through so a LocalTime field still parses.
- toDateInput() (edit load): the backend's full ISO value -> the value the HTML widget
  expects (DATE 0..10, DATETIME-LOCAL 0..16, TIME 0..5, MONTH 0..7) so an edited record's
  dates populate the fields.

Both generate per date-type property (uses a per-field temp var to avoid clashes).
Verified at generation against dirigiblelabs/sample-intent-model (Member.JoinedAt):
MemberFormPage emits the correct toPayload + toDateInput.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../perspective/manage/form-page.js.template  | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

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
index d1f4380582f..81547f22982 100644
--- 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
@@ -68,6 +68,12 @@ document.addEventListener('alpine:init', () => {
           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.' });
@@ -137,10 +143,11 @@ document.addEventListener('alpine:init', () => {
       }
       this.state = 'saving';
       try {
+        const payload = this.toPayload();
         if (this.isEdit) {
-          await App.services.api.put(this.apiPath + '/' + encodeURIComponent(this.id), this.form);
+          await App.services.api.put(this.apiPath + '/' + encodeURIComponent(this.id), payload);
         } else {
-          await App.services.api.post(this.apiPath, this.form);
+          await App.services.api.post(this.apiPath, payload);
         }
         this.navigateBack('/${name}');
       } catch (e) {
@@ -151,6 +158,39 @@ document.addEventListener('alpine:init', () => {
       }
     },
 
+    // 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}');
     },

From dc4167fe47d581e3d8cee726ed406003f13378cb Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 13:27:05 +0300
Subject: [PATCH 10/22] fix(template): master-detail panel doubled REST path +
 null-master fetch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The detail registration baked an ABSOLUTE apiPath (App.config.restBase + ...), but
detailPanel calls api.get(def.apiPath + q) without a baseUrl override, so the client
prepended restBase again — producing /…/api/services/java/…/api/member/LoanController
(404). Make the detail apiPath relative ('/<perspective>/<Entity>Controller') like the
entity pages, so restBase is prepended exactly once.

Also guard detailPanel.load(): skip the fetch when no master is selected (masterId ==
null) so it no longer fires a wasted ?<fk>=null request before a row is picked.

Verified at generation against sample-intent-model: Loan.detail.js now registers
apiPath '/member/LoanController' (relative) -> resolves to a single
/services/java/lib/gen/library/api/member/LoanController?Member=<id>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ui/perspective/master/detail-register.js.template      | 2 +-
 .../ui/shell/js/components/detailPanel.js.template         | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

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
index 5c2ca0f7c26..be1908812fc 100644
--- 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
@@ -12,7 +12,7 @@
 App.registerDetail('${masterEntity}', {
   entity: '${name}',
   label: '${name}',
-  apiPath: App.config.restBase + '/${javaPerspectiveName}/${name}Controller',
+  apiPath: '/${javaPerspectiveName}/${name}Controller',
   masterEntityId: '${masterEntityId}',
   primaryKey: '${primaryKeysString}',
   returnTo: '/${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
index 53ede3d227c..c98f6e42aa8 100644
--- 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
@@ -8,7 +8,8 @@
  * 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 }.
+ *   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 {
@@ -27,10 +28,12 @@ function detailPanel(def, masterId) {
     },
 
     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.
+        // 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';

From 9a499ae3d601c80d7ff34661403030310bd4e9f1 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Wed, 24 Jun 2026 13:39:06 +0300
Subject: [PATCH 11/22] =?UTF-8?q?docs:=20Harmonia=20runtime=20UI=20?=
 =?UTF-8?q?=E2=80=94=20implementation=20status,=20CLAUDE.md=20guide,=20REA?=
 =?UTF-8?q?DME=20refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Consolidates documentation now that the stack is functional (Loan create/edit,
master-detail, dropdowns, dates all working):

- HARMONIA_RUNTIME_PLAN.md: new "Implementation status (built & verified)" section —
  the two modules, view types + shell sections, the embedding, the runtime contracts
  (REST path sanitisation, {baseUrl:''} semantics, neutral form contract, detail
  registry, processTasks store, date conversion), the fixes surfaced during live
  testing, and follow-ups (next up: intent glue runtime — trigger -> process-start ->
  task -> complete).
- CLAUDE.md: a "Harmonia runtime UI" module section with the gotchas future work must
  keep (Java-sanitised REST paths, {baseUrl:''} = prepend-nothing, two-way date
  conversion, registry-driven master-detail, neutral .form code, self-describing glue
  handlers) + pointers to the module READMEs and the plan doc.
- template README: status -> functional; forms row -> done via template-form-builder-harmonia.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CLAUDE.md                                     | 13 +++
 HARMONIA_RUNTIME_PLAN.md                      | 83 +++++++++++++++++++
 .../README.md                                 | 14 ++--
 3 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index d14d0c1a2d5..f8ef919576f 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
index c566239c5c8..05cf0b6f61e 100644
--- a/HARMONIA_RUNTIME_PLAN.md
+++ b/HARMONIA_RUNTIME_PLAN.md
@@ -330,6 +330,89 @@ Consequences of this choice that reshape the phasing:
   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),
diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 899aeb36850..cf9ed7ab716 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -9,11 +9,15 @@ 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: skeleton (Phase 2 start)
+## Status: functional
 
-This module **builds and registers** as a `platform-templates` extension and
-generates a runnable — but partial — Harmonia SPA: the shell + one view type
-(`list`). The remaining view types are stubbed as a parity checklist.
+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)
 
@@ -76,7 +80,7 @@ no `collection`, so `$models` = `model.entities`.
 | 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 | (Phase 3) | ⬜ |
+| 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 |

From ac558205702a4deb5099041baf20b3f88febb07a Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 00:54:26 +0300
Subject: [PATCH 12/22] test(intent): assert self-describing @Component glue
 handlers

Follow-up to the glue handlers switching from class-level @Listener/@Scheduled
to self-describing @Component beans (destination()/kind()/cron()). Update the
IntentEngineIT assertions accordingly: notification/integration/rollup triggers
check @Component + the destination() return value; the job checks @Component +
implements JobHandler + the cron() return value. Fixes the PR #6078 CI failure.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../integration/tests/api/IntentEngineIT.java | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
index 949d886114f..da865b64737 100644
--- a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
@@ -382,13 +382,14 @@ void glue_template_generates_the_trigger_and_resolver_handlers() {
         assertTrue(resolver.contains("execution.setVariable(\"customer_creditLimit\""), "the resolver should set the resolved variable");
         assertTrue(resolver.contains("entity.CreditLimit"), "the resolver should read the target field");
 
-        // The notification (onUpdate: Order) is an @Listener that sends mail when an Order is updated -
+        // The notification (onUpdate: Order) is a self-describing @Component MessageHandler that sends mail
+        // when an Order is updated -
         // exercises the generateUtils.js "notifications" collection case end to end.
         String notification = contentOf("gen/events/OrderUpdatedNotification.java");
         assertTrue(notification.contains("class OrderUpdatedNotification implements MessageHandler"),
                 "the notification should be a message-handling listener (PascalCased class name)");
-        assertTrue(notification.contains("@Listener(name = \"intent-test-Order-Order-updated\""),
-                "an onUpdate notification should bind to the entity's -updated topic");
+        assertTrue(notification.contains("@Component") && notification.contains("return \"intent-test-Order-Order-updated\""),
+                "an onUpdate notification (self-describing @Component MessageHandler) should bind the entity's -updated topic via destination()");
         assertTrue(notification.contains("Mail.send("), "the notification should send via the SDK Mail API");
         assertTrue(notification.contains("String to = \"ops@example.com\""), "a literal recipient should be emitted as a literal");
         assertTrue(notification.contains("import gen.orders.data.order.OrderEntity"),
@@ -407,10 +408,13 @@ void glue_template_generates_the_trigger_and_resolver_handlers() {
         assertTrue(notification.contains("\"Order \" + entity.Id + \" for \" + (customer == null ? null : customer.Name)"),
                 "the subject should interpolate the relation.field against the loaded related entity");
 
-        // The schedule is a @Scheduled JobHandler that queries via a typed Criteria and notifies per row.
+        // The schedule is a self-describing @Component JobHandler (cron()) that queries via a typed
+        // Criteria and notifies per row.
         String job = contentOf("gen/events/StaleOrdersJob.java");
-        assertTrue(job.contains("@Scheduled(expression = \"0 0 9 * * ?\")") && job.contains("class StaleOrdersJob implements JobHandler"),
-                "the schedule should generate a @Scheduled JobHandler");
+        assertTrue(
+                job.contains("@Component") && job.contains("class StaleOrdersJob implements JobHandler")
+                        && job.contains("return \"0 0 9 * * ?\""),
+                "the schedule should generate a self-describing @Component JobHandler whose cron() returns the expression");
         assertTrue(job.contains("new OrderRepository().findAll(Criteria.create().lt(\"OrderDate\", java.time.LocalDate.now()))"),
                 "the job should query the entity with a typed Criteria built from the where clause");
         assertTrue(job.contains("for (OrderEntity entity : rows)"), "the job should iterate the matching rows");
@@ -420,12 +424,13 @@ void glue_template_generates_the_trigger_and_resolver_handlers() {
                 "the per-row notify should load the one-hop related entity");
         assertTrue(job.contains("Mail.send("), "the job should notify per row via the SDK Mail API");
 
-        // The integration is an @Listener that forwards the entity JSON to an external endpoint.
+        // The integration is a self-describing @Component MessageHandler that forwards the entity JSON to
+        // an external endpoint.
         String integration = contentOf("gen/events/PushOrderToWarehouseIntegration.java");
         assertTrue(integration.contains("class PushOrderToWarehouseIntegration implements MessageHandler"),
                 "the integration should be a message-handling listener");
-        assertTrue(integration.contains("@Listener(name = \"intent-test-Order-Order\""),
-                "an onCreate integration should bind to the entity's base (create) topic");
+        assertTrue(integration.contains("@Component") && integration.contains("return \"intent-test-Order-Order\""),
+                "an onCreate integration (self-describing @Component MessageHandler) should bind the entity's base topic via destination()");
         assertTrue(integration.contains("String url = Configurations.get(\"WAREHOUSE_URL\")"),
                 "an @config: URL should resolve through the configuration at run time");
         assertTrue(
@@ -443,13 +448,14 @@ void glue_template_generates_the_trigger_and_resolver_handlers() {
                         && webhook.contains("new OrderRepository().save(entity)"),
                 "the webhook should deserialize the payload and save it through the repository");
 
-        // Rollups: two @Listeners (child create/delete) that recompute the parent counter via Criteria.
+        // Rollups: two self-describing @Component MessageHandlers (child create/delete) that recompute the
+        // parent counter via Criteria.
         // Together with the assertions above, this proves the full declarative-glue catalog - triggers,
         // resolvers, notifications, schedules, integrations, inbound webhooks and rollups - is generated
         // from a single app.intent.
         String rollupCreate = contentOf("gen/events/CustomerOrderCountRollupOnCreate.java");
         assertTrue(
-                rollupCreate.contains("@Listener(name = \"intent-test-Order-Order\"")
+                rollupCreate.contains("@Component") && rollupCreate.contains("return \"intent-test-Order-Order\"")
                         && rollupCreate.contains(
                                 "new OrderRepository().findAll(Criteria.create().eq(\"Customer\", entity.Customer)).size()")
                         && rollupCreate.contains("parent.OrderCount = count"),
@@ -519,7 +525,8 @@ void rollup_generates_create_and_delete_listeners_that_recompute_the_parent_coun
         String onCreate = contentOf("gen/events/MemberLoanCountRollupOnCreate.java");
         assertTrue(onCreate.contains("class MemberLoanCountRollupOnCreate implements MessageHandler"),
                 "the create-side rollup listener should be generated");
-        assertTrue(onCreate.contains("@Listener(name = \"intent-test-Loan-Loan\""), "the create listener binds the child's base topic");
+        assertTrue(onCreate.contains("@Component") && onCreate.contains("return \"intent-test-Loan-Loan\""),
+                "the create listener (self-describing @Component) binds the child's base topic via destination()");
         assertTrue(onCreate.contains("MemberEntity parent = parents.findById(entity.Member)"),
                 "it should load the parent via the child's FK");
         assertTrue(
@@ -528,8 +535,8 @@ void rollup_generates_create_and_delete_listeners_that_recompute_the_parent_coun
                 "it should recompute the count via a typed Criteria and write it to the parent counter");
 
         String onDelete = contentOf("gen/events/MemberLoanCountRollupOnDelete.java");
-        assertTrue(onDelete.contains("@Listener(name = \"intent-test-Loan-Loan-deleted\""),
-                "the delete listener binds the child's -deleted topic");
+        assertTrue(onDelete.contains("@Component") && onDelete.contains("return \"intent-test-Loan-Loan-deleted\""),
+                "the delete listener binds the child's -deleted topic via destination()");
     }
 
     @Test

From 571b288314b0c7029ddb8508d880f682ff8134fd Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 00:54:35 +0300
Subject: [PATCH 13/22] fix(intent,template): start process when ProcessId
 arrives empty, not just null

A new record's process never started when the form submitted ProcessId as an
empty string: the trigger guard checked `ProcessId != null`, and "" != null, so
it bailed before Process.start. Two complementary fixes:

- Trigger.java.template: treat a blank ProcessId as "not started yet"
  (`ProcessId != null && !ProcessId.isBlank()`), robust to any client.
- Harmonia form-page toPayload(): convert empty-string fields to null (matching
  the AngularJS contract of omitting untouched fields), so a system-managed
  back-reference like ProcessId is sent as null on create and the trigger fires;
  a populated value still round-trips on edit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../events/Trigger.java.template              |  5 ++++-
 .../perspective/manage/form-page.js.template  | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
index a3da169819b..48df3b9aa9f 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
@@ -45,7 +45,10 @@ public class ${process}Trigger implements MessageHandler {
             return;
         }
         ${entity}Entity entity = repository.findById(created.${keyProperty});
-        if (entity == null || entity.ProcessId != null) {
+        // Start at most once. Treat a blank ProcessId as "not started yet": some clients send an
+        // empty string for an untouched system field rather than null, and "" != null would
+        // otherwise trip this guard and the process would never start.
+        if (entity == null || (entity.ProcessId != null && !entity.ProcessId.isBlank())) {
             return;
         }
 #if(${guardExpression} != "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-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
index 81547f22982..772082d6dbf 100644
--- 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
@@ -171,18 +171,23 @@ document.addEventListener('alpine:init', () => {
       }
     },
 
-    // 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.
+    // Build the request body.
+    //  1. Empty fields -> null (an untouched field is "not provided", matching the AngularJS stack
+    //     which omits untouched fields). Critically this keeps a system-managed back-reference such
+    //     as ProcessId null on create, so a process trigger's `ProcessId != null` guard fires (an
+    //     empty string would trip it and the process would never start); on edit a populated value
+    //     round-trips unchanged.
+    //  2. Date/time widgets -> the backend java.time format: an HTML date/datetime value (local, no
+    //     zone) becomes a full ISO instant (…Z) so an Instant/Timestamp binds; a bare TIME ("16:04",
+    //     not a valid Date) passes through so a LocalTime still parses.
     toPayload() {
       const payload = { ...this.form };
+      for (const _k of Object.keys(payload)) {
+        if (payload[_k] === '') payload[_k] = null;
+      }
 #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 {
+      if (payload.${property.name} != null) {
         const _d${property.name} = new Date(payload.${property.name});
         if (!isNaN(_d${property.name}.getTime())) payload.${property.name} = _d${property.name}.toISOString();
       }

From a5b3d5a5f9b7abc7ccae66e7ac09b3789f2a7d96 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 00:59:16 +0300
Subject: [PATCH 14/22] fix(intent): don't fire onUpdate when a process trigger
 stamps ProcessId
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Starting a process on onCreate writes the new process-instance id back onto the
entity via repository.update(), which republished "<entity>-updated" and
spuriously fired every onUpdate reaction — e.g. the notification emailing the
member the instant the loan was created, before any review happened.

The back-reference is a system write, not a user edit, so it must not emit a
lifecycle event. Generate a no-event update on the DAO (updateWithoutEvent,
persists via super.update without the Producer.sendToTopic) and have the
process trigger use it for the ProcessId write-back. Update IntentEngineIT to
assert the silent update.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../data/Repository.java.template                      | 10 ++++++++++
 .../events/Trigger.java.template                       |  4 +++-
 .../integration/tests/api/IntentEngineIT.java          |  3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/template/template-application-dao-java/src/main/resources/META-INF/dirigible/template-application-dao-java/data/Repository.java.template b/components/template/template-application-dao-java/src/main/resources/META-INF/dirigible/template-application-dao-java/data/Repository.java.template
index 1332cc35d04..5fefd1150ff 100644
--- a/components/template/template-application-dao-java/src/main/resources/META-INF/dirigible/template-application-dao-java/data/Repository.java.template
+++ b/components/template/template-application-dao-java/src/main/resources/META-INF/dirigible/template-application-dao-java/data/Repository.java.template
@@ -50,6 +50,16 @@ public class ${name}Repository extends JavaRepository<${name}Entity> {
         return updated;
     }
 
+    /**
+     * Persists changes WITHOUT publishing the "-updated" event. Intended for system-managed
+     * back-references — e.g. an intent process trigger writing ProcessId back onto the entity that
+     * started it. Going through {@link #update} would re-publish "${name}-updated" and spuriously
+     * re-fire onUpdate reactions (notifications, roll-ups, integrations) for a change the user never made.
+     */
+    public ${name}Entity updateWithoutEvent(${name}Entity entity) {
+        return super.update(entity);
+    }
+
     @Override
     public void delete(${name}Entity entity) {
         super.delete(entity);
diff --git a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
index 48df3b9aa9f..80be68144fd 100644
--- a/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
+++ b/components/template/template-application-events-java/src/main/resources/META-INF/dirigible/template-application-events-java/events/Trigger.java.template
@@ -64,6 +64,8 @@ public class ${process}Trigger implements MessageHandler {
         String businessKey = String.valueOf(entity.${businessKeyProperty});
         String processId = Process.start("${process}", businessKey, message);
         entity.ProcessId = processId;
-        repository.update(entity);
+        // Persist the back-reference WITHOUT publishing "-updated": this is a system write, not a user
+        // edit, so it must not re-fire onUpdate reactions (e.g. the notification that emails the member).
+        repository.updateWithoutEvent(entity);
     }
 }
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
index da865b64737..6a64413bac1 100644
--- a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEngineIT.java
@@ -606,7 +606,8 @@ void process_trigger_business_key_strategy_timestamp_mints_and_persists_the_fiel
                 "a timestamp strategy should mint a yyyyMMddHHmmss value into the flagged field when blank");
         assertTrue(trigger.contains("String businessKey = String.valueOf(entity.Number);"),
                 "the business key must be the minted number field");
-        assertTrue(trigger.contains("repository.update(entity)"), "the minted number must be persisted via the existing update");
+        assertTrue(trigger.contains("repository.updateWithoutEvent(entity)"),
+                "the minted number and ProcessId must be persisted via the silent update (no spurious -updated event)");
     }
 
     @Test

From 36dfb7a92472090f3ec32e67c4fb51b840188a4e Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:10:19 +0300
Subject: [PATCH 15/22] fix(template): Harmonia BPM task form runs standalone
 (self-contained + AngularJS-compat)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening a BPM task form in Harmonia hit three bugs:

1. Claim failed with "Unexpected end of JSON input": the claim endpoint returns
   a 200 with an empty body, and api.request() called r.json() unconditionally.
   Read the body as text first and only parse when non-empty (the claim actually
   succeeded — hence it showed claimed after a refresh).

2. The form 404'd on the SPA shell assets (js/app.js, config.js, services/api.js)
   and left "App is not defined": the standalone form page referenced the shell
   via fragile relative paths, but a task form is opened directly (iframe/dialog),
   not inside the shell. Make the form self-contained — it now loads only form.js
   (which carries its own minimal fetch client, harmoniaHttp) plus the
   Harmonia/Alpine/Lucide webjars, and no longer depends on window.App.

3. "no handler for callback onApproveClicked()": intent-generated .form code is
   AngularJS idiom ($scope/$http/NotificationHub/DialogHub); inlined into
   formController(ctx), $scope was undefined so attaching the handler threw and
   was swallowed. Add compatibility shims in formController that map those legacy
   globals onto ctx, so the existing .form code runs unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ui/shell/js/services/api.js.template      |  8 +-
 .../template-form-builder-harmonia/README.md  | 32 ++++++--
 .../ui/form.js.template                       | 75 +++++++++++++++++--
 .../ui/index.html.template                    |  9 +--
 4 files changed, 101 insertions(+), 23 deletions(-)

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
index 14a646a3d6b..0407499ea64 100644
--- 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
@@ -82,7 +82,13 @@ App.services.api = {
     }
 
     if (r.ok) {
-      return r.status === 204 ? null : r.json();
+      // A success can carry an empty body (204, or a 200 from an action endpoint such as task
+      // claim/complete). Reading r.json() on an empty body throws "Unexpected end of JSON input",
+      // so read text first and only parse when there's something to parse.
+      if (r.status === 204) return null;
+      const text = await r.text();
+      if (!text) return null;
+      try { return JSON.parse(text); } catch (_) { return text; }
     }
 
     // Non-OK: read the body ONCE as text, then attempt to parse the structured error.
diff --git a/components/template/template-form-builder-harmonia/README.md b/components/template/template-form-builder-harmonia/README.md
index 9921431bc10..31340267054 100644
--- a/components/template/template-form-builder-harmonia/README.md
+++ b/components/template/template-form-builder-harmonia/README.md
@@ -39,10 +39,22 @@ ctx.onApproveClicked = async () => {
 };
 ```
 
-> **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.
+### AngularJS `.form` compatibility (no rewrite required)
+
+`.form` artifacts authored against the AngularJS form-builder (e.g. the ones the intent's
+`FormIntentGenerator` emits) use `$scope` / `$http` / `NotificationHub` / `DialogHub`.
+Rather than force a rewrite, `form.js` defines **compatibility shims** inside
+`formController(ctx)` that map those onto `ctx`:
+
+| legacy global | shimmed to |
+|---|---|
+| `$scope` | `ctx` (so `$scope.model` and `$scope.onXClicked = fn` land on `ctx`) |
+| `$http.{get,post,put,delete}` | `ctx.http.*`, returning an AngularJS-style `{ data }` promise (rejects with `{ data: { message }, status }`) |
+| `NotificationHub().show({title,description})` | `ctx.notify(...)` |
+| `DialogHub().closeWindow()` | `ctx.close()` |
+
+So an intent-generated task form (`$scope.onApproveClicked = …; $http.post('/services/bpm/…')`)
+runs unchanged. New forms can still be authored directly against the neutral `ctx`.
 
 ## Status (v1)
 
@@ -51,12 +63,16 @@ ctx.onApproveClicked = async () => {
   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.
+- **Assets (self-contained):** the page loads only `form.js` + the Harmonia/Alpine/Lucide
+  webjars. `form.js` carries its own minimal fetch client (`harmoniaHttp`), so the form does
+  **not** depend on the SPA shell's `window.App`. This matters because a BPM task form is
+  opened standalone (an iframe/dialog with `?taskId=&processInstanceId=`), where the shell
+  assets are not present at a predictable relative path (an earlier `../../js/...` reference
+  404'd and left `App` undefined).
 
 ## Follow-ups
 - Feed-driven widgets (combobox/select/radio with `feeds`), documents, table, stepIndicator.
-- `FormIntentGenerator` neutral-code emission + task-form migration.
+- Optionally have `FormIntentGenerator` emit neutral `ctx` handlers directly (the compat
+  shims make this optional rather than required).
 - 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/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
index 6488872b189..2f5a1a19820 100644
--- 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
@@ -9,16 +9,75 @@
  * 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.http     - a self-contained fetch client (get/post/put/delete); URLs are absolute
+ *                  (e.g. 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)
+ *
+ * This page is STANDALONE — a BPM task form is opened directly (an iframe/dialog with
+ * ?taskId=&processInstanceId=), not inside the SPA shell, so it must not depend on the shell's
+ * window.App. It carries its own minimal fetch client (harmoniaHttp) instead.
+ *
  * The code attaches its button handlers onto ctx (e.g. ctx.onApproveClicked = () => {...}); a
- * button's `callback` names the handler, invoked via run().
+ * button's `callback` names the handler, invoked via run(). For .form artifacts authored against
+ * the AngularJS form-builder ($scope / $http / NotificationHub / DialogHub), compatibility shims
+ * below map those onto ctx so the same code runs unchanged here.
  */
+
+// Self-contained fetch client (no window.App): every form URL is absolute (/services/...).
+const harmoniaHttp = {
+  async request(method, url, body) {
+    const r = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      body: body != null ? JSON.stringify(body) : undefined,
+      credentials: 'same-origin',
+    });
+    if (!r.ok) {
+      const text = await r.text().catch(() => '');
+      let message = text;
+      try { const j = JSON.parse(text); message = j.errorMessage || j.message || text; } catch (_) { /* non-JSON */ }
+      const err = new Error(message || (r.status + ' ' + r.statusText));
+      err.httpStatus = r.status;
+      throw err;
+    }
+    // A success can carry an empty body (204, or a 200 from an action endpoint such as task
+    // complete) — don't call r.json() on it, that throws "Unexpected end of JSON input".
+    if (r.status === 204) return null;
+    const text = await r.text();
+    if (!text) return null;
+    try { return JSON.parse(text); } catch (_) { return text; }
+  },
+  get(url)        { return this.request('GET', url, undefined); },
+  post(url, body) { return this.request('POST', url, body); },
+  put(url, body)  { return this.request('PUT', url, body); },
+  delete(url)     { return this.request('DELETE', url, undefined); },
+};
+
 function formController(ctx) {
+#[[
+  // --- AngularJS form-builder compatibility shims ---------------------------------------------
+  // Map the legacy $scope / $http / NotificationHub / DialogHub surface a .form's `code` may use
+  // onto the neutral ctx, so AngularJS-authored forms run unchanged in this standalone runtime.
+  const $scope = ctx;                 // $scope.model and $scope.onXClicked = fn land on ctx
+  $scope.model = ctx.model;
+  const wrap = (p) => p.then((d) => ({ data: d }))
+                       .catch((e) => { throw { data: { message: e && e.message }, status: e && e.httpStatus }; });
+  const $http = {
+    get:    (url)       => wrap(ctx.http.get(url)),
+    post:   (url, data) => wrap(ctx.http.post(url, data)),
+    put:    (url, data) => wrap(ctx.http.put(url, data)),
+    delete: (url)       => wrap(ctx.http.delete(url)),
+  };
+  function NotificationHub() {
+    return { show: (o) => ctx.notify(((o && o.title) ? o.title + ': ' : '') + ((o && o.description) || '')) };
+  }
+  function DialogHub() {
+    return { closeWindow: () => ctx.close(), close: () => ctx.close() };
+  }
+]]#
 ${code}
 }
 
@@ -36,13 +95,13 @@ document.addEventListener('alpine:init', () => {
       this._ctx = {
         model: this.model,
         params,
-        http: App.services.api,
+        http: harmoniaHttp,
         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: '' });
+            return harmoniaHttp.post('/services/inbox/tasks/' + params.taskId,
+              { action: 'COMPLETE', data: variables || self.model });
           },
         },
         notify(message) { self.message = message; },
@@ -76,12 +135,12 @@ document.addEventListener('alpine:init', () => {
       if (!url) return;
       this.state = 'submitting';
       try {
-        await App.services.api.post(url, this.model, { baseUrl: '' });
+        await harmoniaHttp.post(url, this.model);
         this.state = 'success';
         this.message = 'Submitted.';
       } catch (e) {
         this.state = 'error';
-        this.message = App.services.apiErrors.messageFor(e, 'Submit failed.');
+        this.message = (e && e.message) || 'Submit failed.';
       }
     },
 
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
index 1d651a72493..152884288ee 100644
--- a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -97,12 +97,9 @@
       </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>
+    <!-- Standalone form: form.js is self-contained (its own fetch client), so it does NOT depend on
+         the SPA shell's window.App. A BPM task form is opened directly (iframe/dialog), where the
+         shell assets are not present at a predictable relative path. -->
     <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>

From 70a69b048d92068109302ff4d3aa4ea9098d8307 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:26:39 +0300
Subject: [PATCH 16/22] feat(template): Harmonia Process Inbox Outlook-style +
 fix Documents
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inbox: rebuild the built-in /inbox as an Outlook-style master-detail (mirrors the
dashboard redesign #6064/#6068) instead of a flat table — a resizable x-h-split
with the task list on the left and, on the right, the selected task's claim action
and its form rendered inline in an <iframe> (the form is self-contained, so it
embeds cleanly). Adds an auto-refresh toggle, last-updated stamp, and clears the
selection + re-fetches when a form completes (harmonia.form.close postMessage).

Documents: it did not work at all — every operation went through a root listing of
GET <base>?path=/, which the CMS backend rejects with 400 ("null has no such
function getName"). Align with the dashboard js/documents.js contract:
  - list the root with NO ?path= param (folder.path comes back as "/");
  - navigate/download/delete by each child's absolute .path;
  - DELETE sends a JSON body of paths (not ?path=).
So New folder, Upload, Delete, navigation and download now work.

Also wire the harmonia.form.close postMessage into the processTasks store so the
app-wide task-form dialog (list/manage/master row popovers) closes + refreshes on
completion (previously only the X button closed it).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |   4 +-
 .../ui/shell/inbox.html.template              | 124 ++++++++++++------
 .../pages/documentsPage.js.template           |  26 +++-
 .../js/components/pages/inboxPage.js.template |  82 +++++++++++-
 .../shell/js/stores/processTasks.js.template  |   4 +
 5 files changed, 186 insertions(+), 54 deletions(-)

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index cf9ed7ab716..7c96c5c23ee 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -81,8 +81,8 @@ no `collection`, so `$models` = `model.entities`.
 | 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 Inbox** (built-in) | — | ✅ built-in /inbox view: **Outlook-style master-detail** (resizable `x-h-split`) — task list (assignee+groups) on the left, the selected task's form inline (`<iframe>`) on the right, claim-before-open, auto-refresh toggle; mirrors the dashboard redesign #6064/#6068 |
+| **Documents** (built-in) | — | ✅ built-in /documents view: CMS folder browser (/services/js/documents/api) — navigate, download, create folder, upload, delete. Root is listed with **no `?path=`** (a `?path=/` 400s); delete sends a JSON body of absolute paths — matching the dashboard `js/documents.js` contract |
 | 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):
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
index 140881d9421..12d12a8c0eb 100644
--- 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
@@ -1,52 +1,98 @@
-<!-- Generated by Eclipse Dirigible. Built-in Process Inbox view (the user's BPM tasks). -->
+<!-- Generated by Eclipse Dirigible. Built-in Process Inbox — Outlook-style master-detail: the
+     user's BPM tasks on the left, the selected task's form inline on the right (mirrors the
+     dashboard Process Inbox redesigned in #6064/#6068). -->
 <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>
+    <span x-show="lastUpdated" x-h-text.muted x-text="'Updated ' + fmtTime(lastUpdated)"></span>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :aria-pressed="autoRefresh"
+            @click="toggleAuto()" :aria-label="autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'">
+      <i role="img" :data-lucide="autoRefresh ? 'pause' : 'play'"></i>
+    </button>
     <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 x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+
+    <!-- Master: the task list -->
+    <div x-h-split-panel data-default-size="32" data-min="280">
+      <div class="vbox size-full">
+        <div class="p-2">
+          <div x-h-input-group data-size="sm">
+            <input x-h-input.group type="text" placeholder="Filter 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>
+        </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.inbox role="img" aria-label="inbox"></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" x-h-table-container.scroll class="flex-1">
+          <table x-h-table data-borders="rows">
+            <tbody x-h-table-body>
+              <template x-for="task in filtered" :key="task.id">
+                <tr x-h-table-row data-hoverable="true" :data-state="isSelected(task) ? 'selected' : ''" @click="select(task)" style="cursor:pointer;">
+                  <td x-h-table-cell>
+                    <div class="vbox gap-1">
+                      <span class="font-medium" x-text="task.processDefinitionName ? task.processDefinitionName + ' — ' + task.name : task.name"></span>
+                      <span x-h-text.muted class="text-xs">
+                        <span x-h-badge :data-variant="task.mine ? 'positive' : 'outline'" data-size="sm" x-text="task.mine ? 'Mine' : 'Available'"></span>
+                        <span x-show="task.processInstanceBusinessKey" x-text="' · Ref ' + task.processInstanceBusinessKey"></span>
+                        <span x-show="task.createTime" x-text="' · ' + fmtTime(task.createTime)"></span>
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </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>
+    <!-- Detail: the selected task, its claim action, and the form inline -->
+    <div x-h-split-panel>
+      <div x-show="!selected" 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 task selected</div>
+          <div x-h-info-page-description>Select a task from the list to claim it or open its form.</div>
+        </div>
+      </div>
+
+      <div x-show="selected" class="vbox size-full">
+        <div x-h-toolbar data-variant="transparent">
+          <span x-h-toolbar-title x-text="selected ? (selected.processDefinitionName ? selected.processDefinitionName + ' — ' + selected.name : selected.name) : ''"></span>
+          <div x-h-toolbar-spacer></div>
+          <span x-show="selected && selected.processInstanceBusinessKey" x-h-badge data-variant="information" x-text="selected ? ('Ref ' + selected.processInstanceBusinessKey) : ''"></span>
+          <span x-h-badge :data-variant="selected && selected.mine ? 'positive' : 'outline'" x-text="selected && selected.mine ? 'Assigned to me' : 'Available'"></span>
+        </div>
+
+        <!-- A candidate (group) task must be claimed before its form can be completed. -->
+        <div x-show="selected && !selected.mine" class="vbox gap-3 items-start p-4">
+          <div x-h-info-page>
+            <div x-h-info-page-header>
+              <div x-h-info-page-media.icon><svg x-h-icon.inbox role="img" aria-label="inbox"></svg></div>
+              <div x-h-info-page-title>Claim this task</div>
+              <div x-h-info-page-description>This task is available to your group. Claim it to open and complete its form.</div>
+            </div>
+          </div>
+          <button x-h-button data-variant="primary" :disabled="busy" @click="claim(selected)"><i role="img" data-lucide="hand"></i><span>Claim &amp; open</span></button>
+        </div>
+
+        <!-- Claimed + has a form: render the standalone form inline. -->
+        <template x-if="selected && selected.mine && selected.formKey">
+          <iframe :src="formSrc(selected)" title="Task form" class="flex-1" style="width:100%; border:0;"></iframe>
+        </template>
+        <div x-show="selected && selected.mine && !selected.formKey" x-h-text.muted class="p-4">This task has no form.</div>
+      </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/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
index 627198319db..327745e15f5 100644
--- 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
@@ -1,7 +1,15 @@
 /**
- * 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'.
+ * documentsPage — the built-in Documents view: a CMS folder browser over
+ * /services/js/documents/api/documents.js (the same backend the dashboard documents view uses).
+ *
+ * API contract (mirrors the dashboard's js/documents.js):
+ *   - list root  : GET <base>            (NO ?path= — the root must be listed with no path param;
+ *                  GET <base>?path=/ returns 400 "null has no such function getName")
+ *   - list folder: GET <base>?path=<folder.path>   (each child carries an absolute .path)
+ *   - new folder : POST <base>/folder { parentFolder: <folder.path>, name }
+ *   - upload     : POST <base>?path=<folder.path>  (multipart/form-data)
+ *   - delete     : DELETE <base> with a JSON body of absolute paths  [ "<item.path>", ... ]
+ *   - download   : GET <base>/download?path=<item.path>
  */
 document.addEventListener('alpine:init', () => {
   Alpine.data('documentsPage', () => ({
@@ -17,13 +25,16 @@ document.addEventListener('alpine:init', () => {
     deleteTarget: null,
     busy: false,
 
-    async init() { await this.load('/'); },
+    async init() { await this.load(''); },
 
+    // path '' (or '/') lists the root with NO query param; a real subfolder is listed by its path.
     async load(path) {
       this.state = 'loading';
       this.error = null;
       try {
-        this.folder = await App.services.api.get(this.base + '?path=' + encodeURIComponent(path), { baseUrl: '' });
+        const isRoot = !path || path === '/';
+        const url = isRoot ? this.base : this.base + '?path=' + encodeURIComponent(path);
+        this.folder = await App.services.api.get(url, { baseUrl: '' });
         this.state = 'default';
       } catch (e) {
         this.error = App.services.apiErrors.messageFor(e, 'Could not list the folder.');
@@ -43,7 +54,7 @@ document.addEventListener('alpine:init', () => {
     get crumbs() {
       const parts = (this.folder.path || '/').split('/').filter(Boolean);
       let acc = '';
-      const list = [{ label: 'root', path: '/' }];
+      const list = [{ label: 'root', path: '' }];   // root crumb lists with no path param
       for (const p of parts) { acc += '/' + p; list.push({ label: p, path: acc }); }
       return list;
     },
@@ -66,7 +77,8 @@ document.addEventListener('alpine:init', () => {
       if (!this.deleteTarget) return;
       this.busy = true;
       try {
-        await App.services.api.delete(this.base + '?path=' + encodeURIComponent(this.deleteTarget.path), { baseUrl: '' });
+        // DELETE takes a JSON body: the array of absolute object paths to remove.
+        await App.services.api.request('DELETE', this.base, [this.deleteTarget.path], { baseUrl: '' });
         this.deleteOpen = false; this.deleteTarget = null;
         await this.load(this.folder.path);
       } catch (e) {
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
index 58d1b645ac3..6c324de33b3 100644
--- 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
@@ -1,16 +1,36 @@
 /**
- * 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).
+ * inboxPage — the built-in Process Inbox, an Outlook-style master-detail (the Harmonia counterpart
+ * of the dashboard Process Inbox, #6064/#6068). The current user's BPM tasks (assignee + candidate
+ * groups) come from the shared processTasks store; selecting a task shows it on the right, where a
+ * candidate task is claimed first and a claimed task's form is rendered inline in an <iframe>. When
+ * the form completes it posts `harmonia.form.close`; we drop the selection and re-fetch.
  */
 document.addEventListener('alpine:init', () => {
   Alpine.data('inboxPage', () => ({
     ...basePage(),
     searchTerm: '',
+    selectedId: null,
+    autoRefresh: false,
+    lastUpdated: null,
+    busy: false,
+    _timer: null,
+    _onMessage: null,
 
     init() {
       // The store self-loads at startup; refresh on entry so the list is current.
-      Alpine.store('processTasks').refresh().then(() => this.refreshIcons());
+      this.refresh();
+      this._onMessage = (e) => {
+        if (e && e.data && e.data.type === 'harmonia.form.close') {
+          this.selectedId = null;
+          this.refresh();
+        }
+      };
+      window.addEventListener('message', this._onMessage);
+    },
+
+    destroy() {
+      if (this._onMessage) window.removeEventListener('message', this._onMessage);
+      this.stopAuto();
     },
 
     get tasks() { return Alpine.store('processTasks').tasks; },
@@ -22,7 +42,57 @@ document.addEventListener('alpine:init', () => {
         .some(v => v && String(v).toLowerCase().includes(q)));
     },
 
-    open(task) { Alpine.store('processTasks').openTask(task); },
-    refresh() { Alpine.store('processTasks').refresh().then(() => this.refreshIcons()); },
+    get selected() { return this.tasks.find(t => t.id === this.selectedId) || null; },
+    isSelected(task) { return task.id === this.selectedId; },
+    select(task) { this.selectedId = task.id; this.refreshIcons(); },
+
+    // The standalone form URL (task.formKey) + the task context it needs to complete itself.
+    formSrc(task) {
+      if (!task || !task.formKey) return '';
+      const sep = task.formKey.indexOf('?') >= 0 ? '&' : '?';
+      return task.formKey + sep + 'taskId=' + encodeURIComponent(task.id)
+           + '&processInstanceId=' + encodeURIComponent(task.processInstanceId || '');
+    },
+
+    async claim(task) {
+      this.busy = true;
+      try {
+        await App.services.api.post('/services/inbox/tasks/' + task.id, { action: 'CLAIM' }, { baseUrl: '' });
+        await this.refresh();
+        this.selectedId = task.id; // keep the selection after the list re-fetches
+      } catch (e) {
+        console.error('inbox: unable to claim task', e);
+      } finally {
+        this.busy = false;
+      }
+    },
+
+    async refresh() {
+      await Alpine.store('processTasks').refresh();
+      this.lastUpdated = new Date();
+      // A completed task drops out of the list — clear a stale selection.
+      if (this.selectedId && !this.tasks.some(t => t.id === this.selectedId)) this.selectedId = null;
+      this.refreshIcons();
+    },
+
+    toggleAuto() {
+      this.autoRefresh = !this.autoRefresh;
+      if (this.autoRefresh) {
+        this._timer = setInterval(() => {
+          // Self-clean if the view was swapped out (no Alpine destroy hook for intervals).
+          if (!this.$root || !this.$root.isConnected) return this.stopAuto();
+          this.refresh();
+        }, 15000);
+      } else {
+        this.stopAuto();
+      }
+    },
+
+    stopAuto() { if (this._timer) { clearInterval(this._timer); this._timer = null; } },
+
+    fmtTime(t) {
+      if (!t) return '';
+      try { return new Date(t).toLocaleString(); } catch (_) { return String(t); }
+    },
   }));
 }, { 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/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
index d0c410815bc..079f4a47b91 100644
--- 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
@@ -22,6 +22,10 @@ document.addEventListener('alpine:init', () => {
 
     init() {
       this.load();
+      // A task form (opened in the app-wide dialog) asks its host to close when it completes.
+      window.addEventListener('message', (e) => {
+        if (e && e.data && e.data.type === 'harmonia.form.close' && this.formOpen) this.closeForm();
+      });
     },
 
     async load() {

From 9d8629852ac836a6a81fbba58ad14c9d0c58be37 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:40:09 +0300
Subject: [PATCH 17/22] feat(intent): default the intent generators to the
 Harmonia stack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scaffold the model and form recipes to the Alpine.js + Harmonia templates
(template-application-ui-harmonia-java + template-form-builder-harmonia) instead
of AngularJS + BlimpKit; glue stays the framework-neutral client-Java template.
The standalone report-file UI stays the AngularJS perspective for now (there is no
Harmonia report-file template yet) — its Java backend is framework-neutral, so the
recipe flips to Harmonia once that template lands (TODO noted in code).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../intent/generator/IntentSettings.java         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

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 6093d7a0d5f..4949ea586a4 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,13 +105,19 @@ 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",
+        // The full-stack UI template is named explicitly here (DAO + REST + UI). Default is now the
+        // Alpine.js + Harmonia SPA stack (a self-describing client-Java backend whose @Entity classes
+        // create the tables, plus the Harmonia SPA UI); to generate the AngularJS + BlimpKit stack
+        // instead, set this to "template-application-angular-java/template/template.js". The glue
+        // template is framework-neutral (annotated client-Java), shared by both stacks.
+        settings.generation.put("model", new Recipe("template-application-ui-harmonia-java/template/template.js",
                 orderedMap("tablePrefix", "", "dataSource", "DefaultDB")));
         settings.generation.put("glue", new Recipe("template-application-events-java/template/template.js", new LinkedHashMap<>()));
-        settings.generation.put("form", new Recipe("template-form-builder-angularjs/template/template.js", new LinkedHashMap<>()));
+        settings.generation.put("form", new Recipe("template-form-builder-harmonia/template/template.js", new LinkedHashMap<>()));
+        // TODO(harmonia): the standalone report-file UI is still the AngularJS perspective — there is
+        // no Harmonia "template-report-file" template yet. Its Java backend (reportFileEntity
+        // Repository + Controller) is framework-neutral, so when the Harmonia report-file template
+        // lands, switch this to "template-application-ui-harmonia-java/template/template-report-file.js".
         settings.generation.put("report",
                 new Recipe("template-application-ui-angular-java/template/template-report-file.js", new LinkedHashMap<>()));
 

From 1f2673a39db51f761122a6ae43d274fc0d76ea13 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:40:09 +0300
Subject: [PATCH 18/22] =?UTF-8?q?feat(template):=20Harmonia=20shell=20?=
 =?UTF-8?q?=E2=80=94=20light=20theme=20+=20switcher,=20single=20Settings/R?=
 =?UTF-8?q?eports=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Theme: Harmonia is light by default (its :root tokens) and dark via a `dark` class
on the document root. Hardcode the default to light with a FOUC-free head bootstrap,
and add an Appearance switcher in the sidebar (the counterpart of the dashboard's
BlimpKit theme menu) that toggles light/dark and persists the choice to localStorage.

Navigation: Settings and Reports are now SINGLE sidebar entries (not one item per
setting/report entity, which flooded the sidebar — there can be tens). Each opens a
generated landing page (_settings.html / _reports.html) listing its entities, which
still have their own CRUD/report routes. Only the most-used PRIMARY entities remain
as direct nav items — matching the dashboard's organization.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../template/ui/shell.js                      | 14 ++++
 .../ui/shell/index.html.template              | 67 ++++++++++++-------
 .../js/components/layout/appShell.js.template | 20 ++++++
 .../ui/shell/reports.html.template            | 18 +++++
 .../ui/shell/settings.html.template           | 18 +++++
 5 files changed, 113 insertions(+), 24 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/reports.html.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template

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
index 1565a253bfd..b6454fdbf9b 100644
--- 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
@@ -38,6 +38,20 @@ export function getSources() {
             engine: "velocity",
             rename: "gen/{{genFolderName}}/js/config.js"
         },
+        // Settings + Reports landing pages — generated once over the full model (no collection) so
+        // each lists its entities; reached via the single Settings / Reports sidebar entries.
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/settings.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/_settings.html"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/shell/reports.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/views/_reports.html"
+        },
         // Static, model-independent shell assets — copied verbatim.
         {
             location: "/template-application-ui-harmonia-java/ui/shell/js/app.js.template",
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index e078813b109..234ddea3efe 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -23,6 +23,18 @@
 
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
+
+    <!-- Theme bootstrap — runs before first paint to avoid a flash. Harmonia is light by default
+         (its :root tokens) and dark when a `dark` class is on the root. The default is HARDCODED to
+         light for now; the Appearance switcher in the sidebar persists the user's choice to
+         localStorage, and this restores it on load. (TODO: make the default configurable.) -->
+    <script>
+      (function () {
+        var theme = 'light'; // hardcoded default for now
+        try { theme = localStorage.getItem('dirigible.harmonia.theme') || theme; } catch (e) { /* no storage */ }
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+      })();
+    </script>
   </head>
 
   <body class="vbox size-full" x-data="app">
@@ -72,50 +84,49 @@
 #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>
+#set($hasReports = false)
+#foreach($entity in $models)#if($entity.type == "REPORT")#set($hasReports = true)#end#end
+#if($hasSettings || $hasReports)
+                <!-- Settings and Reports are SINGLE entries (not one item per setting/report) — each
+                     opens a landing page listing its items. There can be tens of them, so they must
+                     not flood the sidebar; only the most-used (primary) entities are listed above. -->
                 <ul x-h-sidebar-menu>
-#foreach($entity in $models)
-#if($entity.type == "SETTING")
+#if($hasSettings)
                   <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 x-h-sidebar-menu-button :data-active="isActive('/settings')" @click="navigate('/settings')">
+                      <i role="img" data-lucide="settings"></i><span>Settings</span>
                     </button>
                   </li>
 #end
+#if($hasReports)
+                  <li x-h-sidebar-menu-item>
+                    <button x-h-sidebar-menu-button :data-active="isActive('/reports')" @click="navigate('/reports')">
+                      <i role="img" data-lucide="bar-chart-3"></i><span>Reports</span>
+                    </button>
+                  </li>
 #end
                 </ul>
+#end
               </div>
             </div>
-#end
-#set($hasReports = false)
-#foreach($entity in $models)#if($entity.type == "REPORT")#set($hasReports = true)#end#end
-#if($hasReports)
+            <!-- Appearance: light/dark theme switcher (Harmonia counterpart of the dashboard's
+                 BlimpKit theme menu). Persists to localStorage; default is light (see head bootstrap). -->
             <div x-h-sidebar-group>
-              <div x-h-sidebar-group-label>Reports</div>
+              <div x-h-sidebar-group-label>Appearance</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 x-h-sidebar-menu-button @click="toggleTheme()"
+                            :aria-label="theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'">
+                      <i role="img" data-lucide="palette"></i>
+                      <span x-text="theme === 'dark' ? 'Light theme' : 'Dark theme'"></span>
                     </button>
                   </li>
-#end
-#end
                 </ul>
               </div>
             </div>
-#end
           </div>
         </div>
       </div>
@@ -177,6 +188,14 @@
     <!-- 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>
+#if($hasSettings)
+    <!-- Settings landing: lists the setting entities (each still has its own CRUD route below). -->
+    <template x-route="/settings" x-template.target.app="./views/_settings.html"></template>
+#end
+#if($hasReports)
+    <!-- Reports landing: lists the report entities (each still has its own report route below). -->
+    <template x-route="/reports" x-template.target.app="./views/_reports.html"></template>
+#end
     <!-- LIST entities: one read-only list route each. -->
 #foreach($entity in $models)
 #if($entity.layoutType == "LIST" && $entity.type == "PRIMARY")
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
index 847187beef4..235c156616f 100644
--- 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
@@ -15,10 +15,13 @@ document.addEventListener('alpine:init', () => {
     hash: true
   });
 
+  const THEME_KEY = 'dirigible.harmonia.theme';
+
   Alpine.data('app', () => ({
     hiddenPanels: { left: true },
     isOpen: false,
     currentPath: '',
+    theme: 'light',   // hardcoded default for now (see the head bootstrap in index.html)
 
     // TODO (Phase 2): generate from the model.
     nav: [],
@@ -26,6 +29,8 @@ document.addEventListener('alpine:init', () => {
     sections: {},
 
     init() {
+      this.theme = this._readTheme();
+      this.applyTheme();
       const getPath = () => {
         const p = window.PineconeRouter.context?.path || '/';
         return p === '/' ? '/dashboard' : p;
@@ -81,6 +86,21 @@ document.addEventListener('alpine:init', () => {
       return crumbs;
     },
 
+    // --- Theme (light default; dark = a `dark` class on the document root, Harmonia's convention) ---
+    _readTheme() {
+      try { return localStorage.getItem(THEME_KEY) || 'light'; } catch (e) { return 'light'; }
+    },
+    applyTheme() {
+      document.documentElement.classList.toggle('dark', this.theme === 'dark');
+      this.refreshIcons();
+    },
+    setTheme(theme) {
+      this.theme = theme;
+      try { localStorage.setItem(THEME_KEY, theme); } catch (e) { /* no storage */ }
+      this.applyTheme();
+    },
+    toggleTheme() { this.setTheme(this.theme === 'dark' ? 'light' : 'dark'); },
+
     isActive(route) { return this.currentPath === route; },
 
     navigate(route) {
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/reports.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/reports.html.template
new file mode 100644
index 00000000000..d28a1d0d873
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/reports.html.template
@@ -0,0 +1,18 @@
+<!-- Generated by Eclipse Dirigible. Reports landing page: one link per report entity. Generated once
+     over the whole model (no collection) so the report list is baked in; reached via the single
+     "Reports" sidebar entry — there can be tens of reports, so they must not each be a nav item. -->
+<div x-data class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>Reports</span>
+  </div>
+  <div class="vbox gap-2 p-4" style="max-width: 560px;">
+    <span x-h-text.muted>Reports for ${projectName}.</span>
+#foreach($entity in $models)
+#if($entity.type == "REPORT")
+    <button x-h-button data-variant="outline" class="justify-start" @click="window.PineconeRouter.navigate('/${entity.name}')">
+      <i role="img" data-lucide="bar-chart-3"></i><span>${entity.name}</span>
+    </button>
+#end
+#end
+  </div>
+</div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template
new file mode 100644
index 00000000000..6a9afd7fccb
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/settings.html.template
@@ -0,0 +1,18 @@
+<!-- Generated by Eclipse Dirigible. Settings landing page: one link per setting entity. Generated
+     once over the whole model (no collection) so the setting list is baked in; reached via the single
+     "Settings" sidebar entry, keeping the individual settings out of the main navigation. -->
+<div x-data class="vbox size-full">
+  <div x-h-toolbar data-variant="transparent">
+    <span x-h-toolbar-title>Settings</span>
+  </div>
+  <div class="vbox gap-2 p-4" style="max-width: 560px;">
+    <span x-h-text.muted>Configuration &amp; nomenclature for ${projectName}.</span>
+#foreach($entity in $models)
+#if($entity.type == "SETTING")
+    <button x-h-button data-variant="outline" class="justify-start" @click="window.PineconeRouter.navigate('/${entity.name}')">
+      <i role="img" data-lucide="settings"></i><span>${entity.name}</span>
+    </button>
+#end
+#end
+  </div>
+</div>

From c20406665922782dd90bdfac8a1c901c44f7e6c7 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:48:11 +0300
Subject: [PATCH 19/22] feat(template,intent): Harmonia standalone report-file
 template + make it the default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the Harmonia counterpart of the AngularJS report-file template, so a standalone
.report generates a Harmonia report UI:

- template/template-report-file.js ("Application Report - Table - Harmonia") — clones
  the AngularJS -java entry (same model processing + generateGeneric, same reportModels
  / generateReportModels collections) but points at the Harmonia UI sources.
- template/ui/reportFile.js — reuses the framework-neutral Java backend verbatim
  (reportFileEntity Repository + Controller + default roles + project.json) and swaps the
  AngularJS perspective for a self-contained Harmonia page.
- ui/perspective/report-file/{index.html,report.js} — a standalone Alpine + Harmonia page
  (its own fetch client; light-themed like the shell) under gen/<genFolder>/reports/<name>/:
  queries the Java report controller (GET list with $limit/$offset, GET /count, POST
  /export), renders a table with pagination + CSV export.
- template-report-file.extension registers it on platform-templates.

With the template in place, flip the intent `report` recipe default to it
(IntentSettings.scaffold) — so model, form and report all default to Harmonia; glue stays
the framework-neutral client-Java template.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../intent/generator/IntentSettings.java      |  9 +-
 .../README.md                                 |  3 +-
 .../template/template-report-file.extension   |  5 +
 .../template/template-report-file.js          | 98 +++++++++++++++++++
 .../template/ui/reportFile.js                 | 57 +++++++++++
 .../report-file/index.html.template           | 82 ++++++++++++++++
 .../report-file/report.js.template            | 92 +++++++++++++++++
 7 files changed, 340 insertions(+), 6 deletions(-)
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.extension
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/reportFile.js
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
 create mode 100644 components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template

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 4949ea586a4..22e839e597f 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
@@ -114,12 +114,11 @@ public static IntentSettings scaffold(IntentModel model) {
                 orderedMap("tablePrefix", "", "dataSource", "DefaultDB")));
         settings.generation.put("glue", new Recipe("template-application-events-java/template/template.js", new LinkedHashMap<>()));
         settings.generation.put("form", new Recipe("template-form-builder-harmonia/template/template.js", new LinkedHashMap<>()));
-        // TODO(harmonia): the standalone report-file UI is still the AngularJS perspective — there is
-        // no Harmonia "template-report-file" template yet. Its Java backend (reportFileEntity
-        // Repository + Controller) is framework-neutral, so when the Harmonia report-file template
-        // lands, switch this to "template-application-ui-harmonia-java/template/template-report-file.js".
+        // Standalone report-file UI: the Harmonia page (self-contained Alpine page over the same
+        // framework-neutral Java report backend). The AngularJS equivalent is
+        // "template-application-ui-angular-java/template/template-report-file.js".
         settings.generation.put("report",
-                new Recipe("template-application-ui-angular-java/template/template-report-file.js", new LinkedHashMap<>()));
+                new Recipe("template-application-ui-harmonia-java/template/template-report-file.js", new LinkedHashMap<>()));
 
         Map<String, ArtefactOverride> triggers = new LinkedHashMap<>();
         for (ProcessIntent process : model.getProcesses()) {
diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index 7c96c5c23ee..b941bc43de0 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -77,7 +77,8 @@ no `collection`, so `$models` = `model.entities`.
 | 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 |
+| report / report-chart / report-table | `uiReportTableModels` / `uiReportChartModels` | ✅ in-SPA table page (data table + CSV export) + chart page (chart.js bar/line/pie/doughnut/polarArea/radar) against the Java report controller |
+| **standalone report** (a `.report` file) | `reportModels` / `generateReportModels` | ✅ `template/template-report-file.js` ("Application Report - Table - Harmonia"): reuses the framework-neutral Java backend (reportFileEntity Repository + Controller) and generates a self-contained Harmonia page (`gen/<genFolder>/reports/<name>/`: index.html + report.js — list with `$limit`/`$offset`, count, pagination, CSV export). This is the intent recipe's `report` default |
 | 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()` |
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.extension b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.extension
new file mode 100644
index 00000000000..50abeaf38d8
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.extension
@@ -0,0 +1,5 @@
+{
+    "module": "template-application-ui-harmonia-java/template/template-report-file.js",
+    "extensionPoint": "platform-templates",
+    "description": "Application Template - Report - Table - Harmonia"
+}
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.js
new file mode 100644
index 00000000000..88f1fb41094
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/template-report-file.js
@@ -0,0 +1,98 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Standalone report from a .report file — Harmonia variant of
+ * template-application-ui-angular-java/template/template-report-file.js. The Java backend
+ * (reportFileEntity Repository + Controller) is framework-neutral and reused verbatim; only the
+ * UI differs: a self-contained Alpine.js + Harmonia page instead of the AngularJS perspective.
+ */
+import * as reportFileTemplate from "template-application-ui-harmonia-java/template/ui/reportFile";
+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);
+    let templateSources = getTemplate(parameters).sources;
+    model?.columns?.forEach(e => {
+        const parsedDataType = parameterUtils.parseDataTypes(e.type);
+        e.typeJava = parsedDataType.java;
+        e.typeTypescript = parsedDataType.ts;
+        if (e.typeTypescript === "Date") {
+            model.hasDates = true;
+        }
+    });
+    model?.parameters?.forEach(e => {
+        const parsedDataType = parameterUtils.parseDataTypes(e.type);
+        e.typeJava = parsedDataType.java;
+        e.typeTypescript = parsedDataType.ts;
+        model?.conditions?.forEach(c => {
+            if (c.right === `:${e.name}` && e.typeTypescript === 'string' && c.operation === 'LIKE') {
+                e.isLikeCondition = true;
+            }
+        });
+    });
+    model.queryLines = model.query.split("\n");
+    // The report SQL pre-escaped as a single Java string literal so the generated Java repository
+    // can embed it verbatim.
+    model.queryJava = JSON.stringify(model.query);
+    if (parameters.extensionPoint === undefined) {
+        parameters.extensionPoint = parameters.projectName;
+    }
+    if (parameters.name === undefined) {
+        parameters.name = model.name;
+    }
+    parameters.perspectiveName = 'Reports'; // ID of the Reports perspective
+    // The Java DAO / controller packages and folders use sanitized (lowercase) identifiers, matching
+    // the entity Java templates and the URL the generated report UI controller targets.
+    parameters.javaGenFolderName = parameterUtils.sanitizeJavaIdentifier(parameters.genFolderName);
+    parameters.javaPerspectiveName = parameterUtils.sanitizeJavaIdentifier(parameters.perspectiveName);
+
+    parameters.roles = [];
+
+    if (model.security && model.security.generateDefaultRoles === "true") {
+        const roleData = {};
+        roleData["entityName"] = model.name;
+
+        if (model.security.roleRead && model.security.roleRead != "") {
+            roleData["roleRead"] = model.security.roleRead;
+        }
+
+        if (model.security.roleWrite && model.security.roleWrite != "") {
+            roleData["roleWrite"] = model.security.roleWrite;
+        }
+
+        parameters.roles.push(roleData);
+    }
+
+    return generateUtils.generateGeneric(model, parameters, templateSources);
+};
+
+export function getTemplate(parameters) {
+    return {
+        name: "Application Report - Table - Harmonia",
+        description: "Application Table Report - Alpine.js + Harmonia UI, Java backend",
+        extension: "report",
+        sources: reportFileTemplate.getSources(),
+        parameters: [
+            {
+                name: "extensionPoint",
+                label: "Extension Point",
+                placeholder: "Enter Extension Point, if not provided defaults to the project name",
+                required: false
+            },
+            {
+                name: "brand",
+                label: "Brand",
+                placeholder: "Enter Brand"
+            },
+            {
+                name: "title",
+                label: "Title",
+                placeholder: "Enter Title"
+            }]
+    };
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/reportFile.js b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/reportFile.js
new file mode 100644
index 00000000000..8eae29781b1
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/template/ui/reportFile.js
@@ -0,0 +1,57 @@
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Sources for a standalone .report — Harmonia variant. The backend (reportFileEntity Repository +
+ * Controller + default roles + project.json) is identical to the AngularJS report-file template
+ * (it is framework-neutral Java); only the UI differs — a self-contained Alpine.js + Harmonia page
+ * (index.html + report.js) under gen/<genFolder>/reports/<name>/, in place of the AngularJS
+ * perspective. The page queries the generated Java report controller directly.
+ */
+export function getSources() {
+    return [
+        // --- Framework-neutral Java backend (same as the AngularJS report-file template) ---
+        {
+            location: "/template-application-dao-java/data/reportFileEntity.java.template",
+            action: "generate",
+            rename: "gen/{{javaGenFolderName}}/data/{{javaPerspectiveName}}/{{name}}Repository.java",
+            engine: "velocity",
+            collection: "reportModels"
+        }, {
+            location: "/template-application-rest-java/api/reportFileEntity.java.template",
+            action: "generate",
+            rename: "gen/{{javaGenFolderName}}/api/{{javaPerspectiveName}}/{{name}}Controller.java",
+            engine: "velocity",
+            collection: "reportModels"
+        }, {
+            location: "/template-application-rest-java/roles/default-roles.roles.template",
+            action: "generate",
+            rename: "gen/{{javaGenFolderName}}/roles/default-roles.roles",
+            engine: "velocity",
+            collection: "reportModels"
+        }, {
+            location: "/template-application-rest-java/project.json.mjs",
+            action: "generate",
+            rename: "project.json",
+            engine: "javascript"
+        },
+        // --- Harmonia UI: a self-contained report page ---
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/reports/{{name}}/index.html",
+            collection: "generateReportModels"
+        },
+        {
+            location: "/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template",
+            action: "generate",
+            engine: "velocity",
+            rename: "gen/{{genFolderName}}/reports/{{name}}/report.js",
+            collection: "generateReportModels"
+        }
+    ];
+};
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
new file mode 100644
index 00000000000..78ffb9bbb9e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!--
+  Generated by Eclipse Dirigible based on model and template.
+  Standalone Alpine.js + Harmonia report page for ${name}, rendered from a .report artifact. Opened
+  directly (its own URL under gen/<genFolder>/reports/<name>/); queries the generated Java report
+  controller via the self-contained client in report.js. Light by default (shares the shell's theme
+  key in localStorage); dark when a `dark` class is on the root.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+    <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
+    <style>[x-cloak]{display:none!important}</style>
+    <script>
+      (function () {
+        var theme = 'light';
+        try { theme = localStorage.getItem('dirigible.harmonia.theme') || theme; } catch (e) { /* no storage */ }
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+      })();
+    </script>
+  </head>
+  <body class="vbox size-full" x-data="reportPage" x-cloak>
+    <div class="vbox size-full">
+      <div x-h-toolbar data-variant="transparent">
+        <span x-h-toolbar-title>${name}</span>
+        <span x-show="state === 'default'" x-h-badge data-variant="information" x-text="count + ' rows'"></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="vbox gap-2 p-4 flex-1 overflow-auto">
+        <div x-h-table-container.scroll data-border="true">
+          <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 class="hbox items-center gap-2">
+          <button x-h-button data-variant="outline" data-size="sm" :disabled="page <= 1" @click="prev()"><i role="img" data-lucide="chevron-left"></i><span>Prev</span></button>
+          <span x-h-text.muted x-text="'Page ' + page + ' / ' + totalPages"></span>
+          <button x-h-button data-variant="outline" data-size="sm" :disabled="page >= totalPages" @click="next()"><span>Next</span><i role="img" data-lucide="chevron-right"></i></button>
+        </div>
+      </div>
+    </div>
+
+    <script src="./report.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-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template
new file mode 100644
index 00000000000..8bab0de904e
--- /dev/null
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/report.js.template
@@ -0,0 +1,92 @@
+#set($dollar = '$')
+/*
+ * Generated by Eclipse Dirigible based on model and template.
+ *
+ * Do not modify the content as it may be re-generated again.
+ */
+
+/*
+ * Standalone report page for ${name}. Queries the generated Java report controller
+ * (reportFileEntity): GET / (rows, with limit/offset), GET /count, POST /export (all rows). Carries
+ * its own minimal fetch client so the page is self-contained (not part of the SPA shell).
+ */
+const reportHttp = {
+  async get(url) {
+    const r = await fetch(url, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const t = await r.text();
+    return t ? JSON.parse(t) : null;
+  },
+  async post(url, body) {
+    const r = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      body: JSON.stringify(body || {}),
+      credentials: 'same-origin',
+    });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const t = await r.text();
+    return t ? JSON.parse(t) : null;
+  },
+};
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('reportPage', () => ({
+    apiBase: '/services/java/${projectName}/gen/${javaGenFolderName}/api/${javaPerspectiveName}/${name}Controller',
+    rows: [],
+    state: 'loading',   // loading | error | empty | default
+    error: null,
+    page: 1,
+    limit: 20,
+    count: 0,
+
+    async init() { await this.load(); },
+
+    async load() {
+      this.state = 'loading';
+      this.error = null;
+      try {
+        const offset = (this.page - 1) * this.limit;
+        const rows = await reportHttp.get(this.apiBase + '?${dollar}limit=' + this.limit + '&${dollar}offset=' + offset);
+        this.rows = rows || [];
+        try {
+          const c = await reportHttp.get(this.apiBase + '/count');
+          this.count = (c && c.count != null) ? c.count : this.rows.length;
+        } catch (e) { this.count = this.rows.length; }
+        this.state = this.rows.length ? 'default' : 'empty';
+      } catch (e) {
+        this.error = (e && e.message) || 'Could not run the ${name} report.';
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
+
+    get totalPages() { return Math.max(1, Math.ceil(this.count / this.limit)); },
+    next() { if (this.page < this.totalPages) { this.page++; this.load(); } },
+    prev() { if (this.page > 1) { this.page--; this.load(); } },
+
+    // Export the FULL result set (POST /export returns all rows) as CSV.
+    async exportCsv() {
+      try {
+        const data = await reportHttp.post(this.apiBase + '/export', {});
+        const rows = Array.isArray(data) ? data : [];
+        if (!rows.length) return;
+        const cols = Object.keys(rows[0]);
+        const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
+        const csv = [cols.join(',')].concat(rows.map(r => cols.map(c => esc(r[c])).join(','))).join('\n');
+        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 = (e && e.message) || 'Export failed.';
+      }
+    },
+
+    refreshIcons() {
+      this.${dollar}nextTick(() => { if (window.lucide && window.lucide.createIcons) window.lucide.createIcons(); });
+    },
+  }));
+}, { once: true });

From a6a579ad950a7bc9b25712ab151e05a9e98921f7 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 01:53:47 +0300
Subject: [PATCH 20/22] fix(template): Harmonia standalone pages follow the
 shell theme (no dark page on a light shell)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A BPM task form opened from the inbox rendered dark on the light shell. The form/report
pages open standalone in an iframe, and Harmonia themes `body` (not `html`); the form's
body is only as tall as its content, so the uncovered `html` area showed the browser
default — dark on a dark-mode OS. Two fixes on the standalone form + report pages:

- theme the `html` element (background/foreground from the Harmonia tokens) so the whole
  page surface follows the theme, and give the body a min-height so it fills the iframe;
- apply the shell's theme bootstrap (light by default, restoring the localStorage choice)
  so the iframe'd page matches the shell — Harmonia is light at :root, dark via a `dark`
  class, and a standalone document must set the class itself.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../report-file/index.html.template            |  6 +++++-
 .../ui/index.html.template                     | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
index 78ffb9bbb9e..b23bfde4f6b 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
@@ -12,7 +12,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${name}</title>
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
-    <style>[x-cloak]{display:none!important}</style>
+    <style>
+      /* Theme `html` too (Harmonia only styles `body`) so the full page surface follows the theme. */
+      html, body { height: 100%; background-color: var(--background); color: var(--foreground); }
+      [x-cloak] { display: none !important; }
+    </style>
     <script>
       (function () {
         var theme = 'light';
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
index 152884288ee..a8fcd406927 100644
--- a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -69,7 +69,23 @@
     <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>
+    <style>
+      /* Harmonia styles `body` (not `html`) with the themed background; this form's body is only as
+         tall as its content, so without theming `html` too the page showed the browser default —
+         dark on a dark-mode OS — even on the light shell. */
+      html { background-color: var(--background); color: var(--foreground); }
+      body { min-height: 100vh; }
+      [x-cloak] { display: none !important; }
+    </style>
+    <!-- Follow the shell's theme (light by default; Harmonia is light at :root, dark via a `dark`
+         class). The form is opened standalone in an iframe, so it must apply the theme itself. -->
+    <script>
+      (function () {
+        var theme = 'light';
+        try { theme = localStorage.getItem('dirigible.harmonia.theme') || theme; } catch (e) { /* no storage */ }
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+      })();
+    </script>
   </head>
   <body class="p-4" x-data="harmoniaForm" x-cloak>
     <form class="vbox gap-4" style="max-width: 720px;" @submit.prevent="submit()">

From db95e4c4687cad324b247c819ade5c9d84e09cbb Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 02:04:30 +0300
Subject: [PATCH 21/22] fix(template): Harmonia full-stack must include the
 database schema (create the tables)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Harmonia model template merged only the REST-java backend + Harmonia UI, omitting the
schema layer. But nothing else creates the physical tables: the client-Java JavaEntityManager
only *registers* an @Entity against an existing table (the log shows "Registered ... -> table",
never "Created table") — TableCreateProcessor creates tables from the schema's .table artefacts.
So a freshly generated Harmonia app had no tables; CRUD and CSVIM seeds failed
("Table metadata was not found for table [LIBRARY_GENRE]"). It only appeared to work when a
prior AngularJS/schema generation had already created the tables (kept in place across restarts).

Merge template-application-schema sources (as the AngularJS full-stack template does) and dedupe
the shared parameters. Now the Harmonia stack generates the .table/.schema artefacts and the
tables are created on sync.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../template/template.js                      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

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
index 5edc42380e6..aa953d33d5a 100644
--- 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
@@ -3,6 +3,7 @@
  *
  * Do not modify the content as it may be re-generated again.
  */
+import * as schemaTemplateManager from "template-application-schema/template/template";
 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";
@@ -17,15 +18,30 @@ export function generate(model, parameters) {
 };
 
 export function getTemplate(parameters) {
+    // The database schema (.table/.schema artefacts) is REQUIRED: it is what actually creates the
+    // physical tables (TableCreateProcessor). The client-Java layer only maps an @Entity to an
+    // existing table (JavaEntityManager registers, it does not CREATE), so without the schema a
+    // freshly-generated app has no tables and CRUD / CSVIM seeds fail. The AngularJS full-stack
+    // template includes the schema for the same reason.
+    let schemaTemplate = schemaTemplateManager.getTemplate(parameters);
     let restTemplate = restTemplateManager.getTemplate(parameters);
 
     let templateSources = [
+        ...schemaTemplate.sources,
         ...restTemplate.sources,
         ...uiTemplate.getSources(parameters)
     ];
 
-    let templateParameters = getTemplateParameters();
-    templateParameters = templateParameters.concat(restTemplate.parameters);
+    let templateParameters = getTemplateParameters()
+        .concat(schemaTemplate.parameters)
+        .concat(restTemplate.parameters);
+    // Dedupe shared parameters (tablePrefix, dataSource, …) by name so the Generate dialog shows each once.
+    const seenParameterNames = new Set();
+    templateParameters = templateParameters.filter(p => {
+        if (!p || seenParameterNames.has(p.name)) return false;
+        seenParameterNames.add(p.name);
+        return true;
+    });
 
     return {
         name: "Application - UI (Harmonia) - Java",

From ddd5d9aa88e8bb24366d0668f2d12a07521b8efa Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Thu, 25 Jun 2026 02:28:00 +0300
Subject: [PATCH 22/22] feat(template): full Document Storage in Harmonia
 (Outlook master-detail + File Preview)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebuild the built-in /documents view from a basic browser into the full Document Storage
experience of the dashboard's AngularJS documents perspective, as an Outlook-style
master-detail:

- Left: file/folder list — file-type icons, multi-select checkboxes (select-all), row
  overflow menu (copy link, rename, download, delete), drag-and-drop upload, empty state.
- Right: File Preview pane — CSV rendered as a table via PapaParse (added to the shell as a
  webjar), other types in an <iframe> over the /preview endpoint, with a can-preview check
  that excludes model/code artifacts; loading + "cannot be previewed" states.
- Toolbar: back/forward history, breadcrumbs, search-in-folder toggle, new folder, delete
  selected, download folder as zip, upload menu (files / unpack zip contents).
- Dialogs: new folder, rename, delete (single + multi).

All operations go through the CMS REST API exactly as the dashboard does
(/services/js/documents/api/documents.js): root listed with no ?path=, navigate by path,
POST /folder, PUT {path,name} rename, DELETE with a JSON body of paths, multipart upload
(+ /zip for unpack), GET /download + /zip + /preview.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../README.md                                 |   2 +-
 .../ui/shell/documents.html.template          | 200 +++++++++---
 .../ui/shell/index.html.template              |   3 +
 .../pages/documentsPage.js.template           | 298 ++++++++++++++----
 4 files changed, 392 insertions(+), 111 deletions(-)

diff --git a/components/template/template-application-ui-harmonia-java/README.md b/components/template/template-application-ui-harmonia-java/README.md
index b941bc43de0..867ca226606 100644
--- a/components/template/template-application-ui-harmonia-java/README.md
+++ b/components/template/template-application-ui-harmonia-java/README.md
@@ -83,7 +83,7 @@ no `collection`, so `$models` = `model.entities`.
 | 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: **Outlook-style master-detail** (resizable `x-h-split`) — task list (assignee+groups) on the left, the selected task's form inline (`<iframe>`) on the right, claim-before-open, auto-refresh toggle; mirrors the dashboard redesign #6064/#6068 |
-| **Documents** (built-in) | — | ✅ built-in /documents view: CMS folder browser (/services/js/documents/api) — navigate, download, create folder, upload, delete. Root is listed with **no `?path=`** (a `?path=/` 400s); delete sends a JSON body of absolute paths — matching the dashboard `js/documents.js` contract |
+| **Documents** (built-in) | — | ✅ built-in /documents view: full **Document Storage** as an Outlook-style master-detail (file list + **File Preview** pane — CSV→table via PapaParse, other types→`<iframe>` over `/preview`). Back/forward history, breadcrumbs, search-in-folder, new folder, rename, single + multi-select delete, download (file + folder zip), copy link, file-type icons, upload (files + unpack-zip, button and drag-and-drop). Root is listed with **no `?path=`** (a `?path=/` 400s); delete sends a JSON body of absolute paths; rename is `PUT {path,name}` — matching the dashboard `js/documents.js` contract |
 | 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):
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
index 3a9041f83e1..ea90ff4163f 100644
--- 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
@@ -1,55 +1,138 @@
-<!-- Generated by Eclipse Dirigible. Built-in Documents view (CMS folder browser). -->
+<!-- Generated by Eclipse Dirigible. Built-in Document Storage — Outlook-style master-detail (the
+     Harmonia counterpart of the dashboard documents perspective): file/folder list on the left,
+     File Preview on the right. Back/forward, breadcrumbs, search, new folder, rename, delete
+     (single + multi), download (file + folder zip), copy link, upload (files + unpack zip, button
+     and drag-and-drop), file-type icons. -->
 <div x-data="documentsPage" class="vbox size-full">
+
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title>Documents</span>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasBack()" @click="goBack()" aria-label="Back"><i role="img" data-lucide="arrow-left"></i></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasForward()" @click="goForward()" aria-label="Forward"><i role="img" data-lucide="arrow-right"></i></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="refresh()" aria-label="Refresh"><i role="img" data-lucide="refresh-cw"></i></button>
+    <nav x-h-breadcrumb data-overflow="scroll" class="px-1">
+      <ol x-h-breadcrumb-list>
+        <template x-for="(c, i) in breadcrumbs" :key="c.path + ':' + i">
+          <li x-h-breadcrumb-item>
+            <button x-show="i < breadcrumbs.length - 1" x-h-breadcrumb-link @click="openFolder(c.path)" x-text="c.name"></button>
+            <span x-show="i === breadcrumbs.length - 1" x-h-breadcrumb-page x-text="c.name"></span>
+          </li>
+        </template>
+      </ol>
+    </nav>
     <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>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :aria-pressed="search.show" @click="toggleSearch()" aria-label="Find item"><i role="img" data-lucide="search"></i></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" @click="askNewFolder()" aria-label="New folder"><i role="img" data-lucide="folder-plus"></i></button>
+    <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!anySelected()" @click="askDeleteSelected()" aria-label="Delete selected"><i role="img" data-lucide="trash-2"></i></button>
+    <a x-h-button data-variant="transparent" data-size="icon-sm" :href="zipUrl()" target="_blank" aria-label="Download folder as zip"><i role="img" data-lucide="folder-down"></i></a>
+    <button x-h-menu-trigger.dropdown x-h-button data-variant="transparent" data-size="icon-sm" aria-label="Upload"><i role="img" data-lucide="upload"></i></button>
+    <ul x-h-menu data-align="bottom-end">
+      <li x-h-menu-item @click="triggerUpload(false)">Upload files</li>
+      <li x-h-menu-item @click="triggerUpload(true)">Upload zip contents</li>
+    </ul>
+    <input type="file" x-ref="fileInput" class="hidden" multiple @change="onFilesPicked($event)" />
   </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>
+  <!-- Search-in-folder bar (toggled) -->
+  <div x-show="search.show" class="px-4 pb-2">
+    <div x-h-input-group data-size="sm">
+      <div x-h-input-group-addon data-align="inline-start"><svg x-h-icon.search class="size-4" role="img" aria-label="search"></svg></div>
+      <input x-h-input.group type="search" placeholder="Find in folder" x-model="search.filterBy" @input="clearSelection(); refreshIcons()" />
+    </div>
+  </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'" 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 x-h-split class="bk-stretch flex-1" data-orientation="horizontal" data-variant="border">
+
+    <!-- Master: file/folder list (with drag-and-drop upload) -->
+    <div x-h-split-panel data-default-size="50" data-min="340">
+      <div class="vbox size-full" style="position: relative;" @dragover="onDragOver($event)" @dragleave="onDragLeave()" @drop="onDrop($event)">
+        <div x-show="showDropZone" x-h-info-page class="size-full" style="position:absolute; inset:0; z-index:5; background:var(--background); opacity:0.96;">
+          <div x-h-info-page-header>
+            <div x-h-info-page-media.icon><svg x-h-icon.upload role="img" aria-label="upload"></svg></div>
+            <div x-h-info-page-title>Drop files here</div>
+          </div>
+        </div>
+
+        <div x-show="state === 'loading'" class="p-4"><div x-h-spinner></div></div>
+
+        <div x-show="state === 'default'" x-h-table-container.scroll class="flex-1">
+          <table x-h-table data-borders="rows">
+            <thead x-h-table-header>
+              <tr x-h-table-row>
+                <th x-h-table-head scope="col" style="width:2.5rem;">
+                  <span x-h-checkbox><input type="checkbox" aria-label="Select all" x-model="selection.allSelected" @change="selectAllChanged()" /></span>
+                </th>
+                <th x-h-table-head scope="col">Name</th>
+                <th x-h-table-head scope="col"></th>
+              </tr>
+            </thead>
+            <tbody x-h-table-body>
+              <tr x-show="filteredChildren.length === 0" x-h-table-row>
+                <td x-h-table-cell colspan="3" x-text="search.filterBy ? 'No items match your search.' : 'This folder is empty.'"></td>
+              </tr>
+              <template x-for="item in filteredChildren" :key="item.path || item.name">
+                <tr x-h-table-row data-hoverable="true" :data-state="selectedFile && selectedFile.name === item.name ? 'selected' : ''">
+                  <td x-h-table-cell>
+                    <span x-h-checkbox><input type="checkbox" :aria-label="'Select ' + item.name" x-model="item.selected" @change="selectionChanged()" @click.stop /></span>
+                  </td>
+                  <th x-h-table-head scope="row">
+                    <button x-h-button data-variant="link" class="justify-start" @click="onRowClick(item)">
+                      <i role="img" :data-lucide="fileIcon(item)"></i><span x-text="item.name"></span>
+                    </button>
+                  </th>
+                  <td x-h-table-cell data-row-actions>
+                    <button x-h-menu-trigger.dropdown x-h-table-cell-button aria-label="Item actions"><i role="img" data-lucide="ellipsis"></i></button>
+                    <ul x-h-menu data-align="bottom-end">
+                      <li x-show="isDocument(item)" x-h-menu-item @click="copyLink(item)">Copy link</li>
+                      <li x-h-menu-item @click="askRename(item)">Rename</li>
+                      <li x-show="isDocument(item)" x-h-menu-item @click="window.open(downloadUrl(item), '_blank')">Download</li>
+                      <li x-h-menu-separator></li>
+                      <li x-h-menu-item data-variant="negative" @click="askDeleteSingle(item)">Delete</li>
+                    </ul>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Detail: File Preview -->
+    <div x-h-split-panel data-default-size="50">
+      <div class="vbox size-full">
+        <!-- CSV → table -->
+        <div x-show="selectedFile && canPreview && !previewLoading && previewType === 'csv'" x-h-table-container.scroll class="flex-1">
+          <table x-h-table data-borders="both">
+            <thead x-h-table-header>
+              <tr x-h-table-row>
+                <template x-for="(h, i) in csv.headers" :key="i"><th x-h-table-head scope="col" x-text="h"></th></template>
+              </tr>
+            </thead>
+            <tbody x-h-table-body>
+              <template x-for="(row, ri) in csv.rows" :key="ri">
+                <tr x-h-table-row>
+                  <template x-for="(cell, ci) in row" :key="ci"><td x-h-table-cell x-text="cell"></td></template>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <!-- Other types → iframe over /preview -->
+        <iframe x-show="selectedFile && canPreview && !previewLoading && previewType === 'web'"
+                :src="previewUrl" @load="onPreviewLoaded()" title="File preview" class="flex-1" style="width:100%; border:0;"></iframe>
+        <!-- Loading -->
+        <div x-show="selectedFile && canPreview && previewLoading" class="p-4"><div x-h-spinner></div></div>
+        <!-- Empty / not previewable -->
+        <div x-show="!selectedFile || !canPreview" x-h-info-page class="p-4">
+          <div x-h-info-page-header>
+            <div x-h-info-page-media.icon><svg x-h-icon.eye role="img" aria-label="preview"></svg></div>
+            <div x-h-info-page-title>File Preview</div>
+            <div x-h-info-page-description x-text="(selectedFile && !canPreview) ? 'This file cannot be previewed.' : 'Click on a file to see its preview.'"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -58,7 +141,11 @@
     <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 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()" placeholder="Enter folder name..." />
+        </div>
+        <div x-show="newFolderError" x-h-alert data-variant="negative" role="alert" class="mt-2"><div x-h-alert-description x-text="newFolderError"></div></div>
       </div>
       <div x-h-dialog-footer>
         <button x-h-button data-variant="outline" @click="newFolderOpen = false" :disabled="busy">Cancel</button>
@@ -67,11 +154,32 @@
     </div>
   </div>
 
+  <!-- Rename dialog -->
+  <div x-h-dialog-overlay :data-open="renameOpen">
+    <div x-h-dialog>
+      <div x-h-dialog-header><h2 x-h-dialog-title>Rename</h2><button x-h-dialog-close @click="renameOpen = false" aria-label="Close"></button></div>
+      <div x-h-dialog-content>
+        <div x-h-field>
+          <label x-h-label for="rn">New name</label>
+          <input x-h-input id="rn" type="text" x-model="renameName" @keydown.enter="doRename()" />
+        </div>
+        <div x-show="renameError" x-h-alert data-variant="negative" role="alert" class="mt-2"><div x-h-alert-description x-text="renameError"></div></div>
+      </div>
+      <div x-h-dialog-footer>
+        <button x-h-button data-variant="outline" @click="renameOpen = false" :disabled="busy">Cancel</button>
+        <button x-h-button data-variant="primary" @click="doRename()" :disabled="busy">Rename</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-content>
+        <p x-show="deleteTargets.length === 1">Delete <strong x-text="deleteTargets[0] && deleteTargets[0].name"></strong>? This cannot be undone.</p>
+        <p x-show="deleteTargets.length > 1">Delete <strong x-text="deleteTargets.length"></strong> items? This cannot be undone.</p>
+      </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>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
index 234ddea3efe..786c896d52c 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/index.html.template
@@ -24,6 +24,9 @@
     <link href="/webjars/codbex__harmonia/dist/harmonia.css" rel="stylesheet" />
     <link href="./css/app.css" rel="stylesheet" />
 
+    <!-- PapaParse — CSV parsing for the Documents File Preview pane (served version-less by webjars). -->
+    <script src="/webjars/papaparse/papaparse.min.js"></script>
+
     <!-- Theme bootstrap — runs before first paint to avoid a flash. Harmonia is light by default
          (its :root tokens) and dark when a `dark` class is on the root. The default is HARDCODED to
          light for now; the Appearance switcher in the sidebar persists the user's choice to
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
index 327745e15f5..df701502378 100644
--- 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
@@ -1,109 +1,279 @@
 /**
- * documentsPage — the built-in Documents view: a CMS folder browser over
- * /services/js/documents/api/documents.js (the same backend the dashboard documents view uses).
+ * documentsPage — the built-in Documents view: a full Document Storage browser (the Harmonia
+ * counterpart of the dashboard's AngularJS documents perspective), over the CMS REST API
+ * /services/js/documents/api/documents.js. Outlook-style master-detail: a file/folder list on the
+ * left and a File Preview pane on the right (CSV → table via PapaParse, other types → an <iframe>
+ * over /preview). Features: back/forward history, breadcrumbs, search-in-folder, new folder,
+ * rename, single + multi-select delete, download (file + folder zip), copy link, file-type icons,
+ * upload (files + "unpack zip", via button and drag-and-drop).
  *
- * API contract (mirrors the dashboard's js/documents.js):
- *   - list root  : GET <base>            (NO ?path= — the root must be listed with no path param;
- *                  GET <base>?path=/ returns 400 "null has no such function getName")
- *   - list folder: GET <base>?path=<folder.path>   (each child carries an absolute .path)
- *   - new folder : POST <base>/folder { parentFolder: <folder.path>, name }
- *   - upload     : POST <base>?path=<folder.path>  (multipart/form-data)
- *   - delete     : DELETE <base> with a JSON body of absolute paths  [ "<item.path>", ... ]
- *   - download   : GET <base>/download?path=<item.path>
+ * API contract (matches the dashboard's js/documents.js and the api/documents.js routes):
+ *   - list root  : GET <base>                 (NO ?path= — GET <base>?path=/ returns 400)
+ *   - list folder: GET <base>?path=<path>      (children carry name/type/path; type cmis:folder|cmis:document)
+ *   - new folder : POST <base>/folder { parentFolder, name }
+ *   - rename     : PUT  <base> { path, name }
+ *   - delete     : DELETE <base> with a JSON body of absolute paths [ ... ]
+ *   - upload     : POST <base>?path=<folder>  (multipart) ; unpack zip: POST <base>/zip?path=<folder>
+ *   - download   : GET <base>/download?path=<path>      ; folder zip: GET <base>/zip?path=<folder>
+ *   - preview    : GET <base>/preview?path=<path>       (served with the file's content type)
  */
 document.addEventListener('alpine:init', () => {
+  const UNKNOWN_ICON = 'file';
+  const FILE_ICONS = {
+    'file-code': ['js', 'mjs', 'ts', 'json', 'css', 'less', 'scss', 'html', 'xhtml', 'xml', 'java', 'py', 'sh'],
+    'file-text': ['txt', 'md', 'pdf', 'doc', 'docx', 'odt', 'rtf'],
+    'image': ['ico', 'bmp', 'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],
+    'file-archive': ['zip', 'bzip2', 'gzip', 'tar', 'wim', 'xz', '7z', 'rar'],
+    'file-spreadsheet': ['xls', 'xlsx', 'ods', 'csv'],
+  };
+  // Model/code artifacts the server cannot meaningfully preview.
+  const NO_PREVIEW = ['edm', 'dsm', 'bpmn', 'job', 'xsjob', 'calculationview', 'websocket', 'listener',
+    'extensionpoint', 'extension', 'table', 'view', 'access', 'roles', 'csvim', 'camel', 'form', 'gen',
+    'model', 'schema', 'dsm'];
+
   Alpine.data('documentsPage', () => ({
     ...basePage(),
     base: '/services/js/documents/api/documents.js',
     folder: { name: 'root', path: '/', children: [] },
-    state: 'loading',   // loading | error | default
+    breadcrumbs: [{ name: 'Home', path: '' }],
+    state: 'loading',      // loading | error | default
     error: null,
 
-    newFolderOpen: false,
-    newFolderName: '',
-    deleteOpen: false,
-    deleteTarget: null,
+    selectedFile: null,
+    canPreview: false,
+    previewType: 'web',    // web | csv
+    previewLoading: false,
+    previewUrl: 'about:blank',
+    csv: { headers: [], rows: [] },
+
+    search: { show: false, filterBy: '' },
+    selection: { allSelected: false },
     busy: false,
+    showDropZone: false,
+    unpackZips: false,
+
+    newFolderOpen: false, newFolderName: '', newFolderError: null,
+    renameOpen: false, renameName: '', renameTarget: null, renameError: null,
+    deleteOpen: false, deleteTargets: [],
 
-    async init() { await this.load(''); },
+    _hist: { idx: -1, state: [] },
+
+    init() { this.openFolder(''); },
+
+    // ----- data access -----
+    async getFolder(path) {
+      // Treat '' and '/' as the root, which MUST be listed with no path param.
+      const isRoot = !path || path === '/';
+      const url = isRoot ? this.base : this.base + '?path=' + encodeURIComponent(path);
+      return App.services.api.get(url, { baseUrl: '' });
+    },
 
-    // path '' (or '/') lists the root with NO query param; a real subfolder is listed by its path.
-    async load(path) {
+    async loadFolder(path) {
       this.state = 'loading';
       this.error = null;
       try {
-        const isRoot = !path || path === '/';
-        const url = isRoot ? this.base : this.base + '?path=' + encodeURIComponent(path);
-        this.folder = await App.services.api.get(url, { baseUrl: '' });
+        this.setCurrentFolder(await this.getFolder(path));
         this.state = 'default';
       } catch (e) {
-        this.error = App.services.apiErrors.messageFor(e, 'Could not list the folder.');
+        this.error = App.services.apiErrors.messageFor(e, 'Could not open 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); },
+    openFolder(path) { this._histPush(path); this.loadFolder(path); },
+
+    setCurrentFolder(data) {
+      this.folder = data || { name: 'root', path: '/', children: [] };
+      if (!Array.isArray(this.folder.children)) this.folder.children = [];
+      this.parseBreadcrumbs(this.folder.path);
+      this.clearSelection();
+    },
+
+    async refresh() {
+      this.error = null;
+      try {
+        const keep = this.selectedFile && this.selectedFile.name;
+        const data = await this.getFolder(this.folder.path);
+        this.folder = data || this.folder;
+        if (!Array.isArray(this.folder.children)) this.folder.children = [];
+        this.parseBreadcrumbs(this.folder.path);
+        this.selection.allSelected = false;
+        if (keep && !this.folder.children.some(c => c.name === keep)) this.setSelectedFile(null);
+        this.state = 'default';
+      } catch (e) {
+        this.error = App.services.apiErrors.messageFor(e, 'Could not refresh the folder.');
+        this.state = 'error';
+      }
+      this.refreshIcons();
+    },
 
-    open(item) {
-      if (this.isFolder(item)) this.load(item.path);
-      else window.open(this.downloadUrl(item), '_blank');
+    // ----- history -----
+    _histPush(path) {
+      const h = this._hist;
+      if (h.idx >= 0) h.state.length = h.idx + 1;
+      h.state.push(path);
+      h.idx++;
     },
+    hasBack() { return this._hist.idx > 0; },
+    hasForward() { return this._hist.idx < this._hist.state.length - 1; },
+    goBack() { if (this.hasBack()) this.loadFolder(this._hist.state[--this._hist.idx]); },
+    goForward() { if (this.hasForward()) this.loadFolder(this._hist.state[++this._hist.idx]); },
 
-    get crumbs() {
-      const parts = (this.folder.path || '/').split('/').filter(Boolean);
+    // ----- breadcrumbs (Home navigates to the no-path root) -----
+    parseBreadcrumbs(path) {
+      const parts = String(path || '/').split('/').filter(Boolean);
+      const crumbs = [{ name: 'Home', path: '' }];
       let acc = '';
-      const list = [{ label: 'root', path: '' }];   // root crumb lists with no path param
-      for (const p of parts) { acc += '/' + p; list.push({ label: p, path: acc }); }
-      return list;
+      for (const p of parts) { acc += '/' + p; crumbs.push({ name: p, path: acc }); }
+      this.breadcrumbs = crumbs;
     },
 
+    // ----- helpers -----
+    isFolder(item) { return item && item.type === 'cmis:folder'; },
+    isDocument(item) { return item && item.type === 'cmis:document'; },
+    // Absolute path of a child of the current folder (mirrors the dashboard getFullPath).
+    fullPath(name) { return (this.folder.path ? this.folder.path + '/' + name : name).replace(/\/\//g, '/'); },
+    ext(name) { return name.substring(name.lastIndexOf('.') + 1).toLowerCase(); },
+    fileIcon(item) {
+      if (this.isFolder(item)) return 'folder';
+      const e = this.ext(item.name);
+      const hit = Object.entries(FILE_ICONS).find(([, exts]) => exts.indexOf(e) >= 0);
+      return hit ? hit[0] : UNKNOWN_ICON;
+    },
+    downloadUrl(item) { return this.base + '/download?path=' + encodeURIComponent(this.fullPath(item.name)); },
+    zipUrl() { return this.base + '/zip?path=' + encodeURIComponent(this.folder.path); },
+
+    // ----- list / selection -----
+    get filteredChildren() {
+      const q = (this.search.filterBy || '').trim().toLowerCase();
+      let items = (this.folder.children || []).slice();
+      if (q) items = items.filter(i => i.name.toLowerCase().includes(q));
+      items.sort((a, b) => (a.type !== b.type) ? (a.type === 'cmis:folder' ? -1 : 1) : a.name.localeCompare(b.name));
+      return items;
+    },
+    onRowClick(item) {
+      if (this.isFolder(item)) this.openFolder(this.fullPath(item.name));
+      else { this.clearSelection(); this.setSelectedFile(item); }
+    },
+    clearSelection() {
+      this.setSelectedFile(null);
+      this.selection.allSelected = false;
+      (this.folder.children || []).forEach(i => { i.selected = false; });
+    },
+    selectAllChanged() { (this.folder.children || []).forEach(i => { i.selected = this.selection.allSelected; }); },
+    selectionChanged() {
+      const c = this.folder.children || [];
+      this.selection.allSelected = c.length > 0 && c.every(i => i.selected);
+    },
+    anySelected() { return (this.folder.children || []).some(i => i.selected); },
+    toggleSearch() { this.search.show = !this.search.show; if (!this.search.show) this.search.filterBy = ''; this.refreshIcons(); },
+
+    // ----- preview -----
+    canPreviewFile(name) { this.canPreview = NO_PREVIEW.indexOf(this.ext(name)) < 0; return this.canPreview; },
+    setSelectedFile(file) {
+      if (file === null) { this.selectedFile = null; return; }
+      this.selectedFile = file;
+      if (this.canPreviewFile(file.name)) this.runPreview();
+    },
+    runPreview() {
+      this.previewLoading = true;
+      this.csv.headers = []; this.csv.rows = [];
+      const self = this;
+      if (this.selectedFile.name.toLowerCase().endsWith('.csv') && window.Papa) {
+        this.previewType = 'csv';
+        window.Papa.parse(this.downloadUrl(this.selectedFile), {
+          download: true, header: true, skipEmptyLines: true,
+          delimitersToGuess: [',', '\t', '|', ';'],
+          complete: (res) => {
+            self.csv.headers = res.meta.fields || [];
+            self.csv.rows = (res.data || []).map(r => self.csv.headers.map(h => r[h]));
+            self.previewLoading = false;
+            self.refreshIcons();
+          },
+          error: () => { self.previewLoading = false; },
+        });
+      } else {
+        this.previewType = 'web';
+        this.previewUrl = this.base + '/preview?path=' + encodeURIComponent(this.fullPath(this.selectedFile.name));
+        // previewLoading is cleared by the iframe's @load.
+      }
+    },
+    onPreviewLoaded() { this.previewLoading = false; },
+
+    async copyLink(item) {
+      const url = window.location.origin + this.base + '/preview?path=' + encodeURIComponent(this.fullPath(item.name));
+      try { await navigator.clipboard.writeText(url); } catch (e) { console.error('documents: copy link failed', e); }
+    },
+
+    // ----- new folder -----
+    askNewFolder() { this.newFolderName = ''; this.newFolderError = null; this.newFolderOpen = true; },
     async createFolder() {
       if (!this.newFolderName.trim()) return;
-      this.busy = true;
+      this.busy = true; this.newFolderError = null;
       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; }
+        this.newFolderOpen = false; this.newFolderName = '';
+        await this.refresh();
+      } catch (e) { this.newFolderError = App.services.apiErrors.messageFor(e, 'Could not create the folder.'); }
+      finally { this.busy = false; }
+    },
+
+    // ----- rename -----
+    askRename(item) { this.renameTarget = item; this.renameName = item.name; this.renameError = null; this.renameOpen = true; },
+    async doRename() {
+      if (!this.renameName.trim() || !this.renameTarget) return;
+      this.busy = true; this.renameError = null;
+      try {
+        await App.services.api.request('PUT', this.base, { path: this.fullPath(this.renameTarget.name), name: this.renameName.trim() }, { baseUrl: '' });
+        this.renameOpen = false; this.renameTarget = null;
+        await this.refresh();
+      } catch (e) { this.renameError = App.services.apiErrors.messageFor(e, 'Rename failed.'); }
+      finally { this.busy = false; }
     },
 
-    askDelete(item) { this.deleteTarget = item; this.deleteOpen = true; },
+    // ----- delete -----
+    askDeleteSingle(item) { this.deleteTargets = [item]; this.deleteOpen = true; },
+    askDeleteSelected() { this.deleteTargets = (this.folder.children || []).filter(i => i.selected); if (this.deleteTargets.length) this.deleteOpen = true; },
     async confirmDelete() {
-      if (!this.deleteTarget) return;
+      if (!this.deleteTargets.length) return;
       this.busy = true;
       try {
-        // DELETE takes a JSON body: the array of absolute object paths to remove.
-        await App.services.api.request('DELETE', this.base, [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; }
+        const paths = this.deleteTargets.map(i => this.fullPath(i.name));
+        await App.services.api.request('DELETE', this.base, paths, { baseUrl: '' });
+        this.deleteOpen = false; this.deleteTargets = [];
+        await this.refresh();
+      } catch (e) { this.error = App.services.apiErrors.messageFor(e, 'Could not delete.'); this.deleteOpen = false; }
+      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;
+    // ----- upload (button + drag&drop), with optional zip unpacking -----
+    triggerUpload(unpackZip) { this.unpackZips = !!unpackZip; this.$refs.fileInput.click(); },
+    async onFilesPicked(ev) { await this.uploadFiles(ev.target.files); ev.target.value = ''; },
+    async uploadFiles(files) {
       if (!files || !files.length) return;
-      this.busy = true;
+      this.busy = true; this.error = null;
       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; }
+        for (const f of files) {
+          const fd = new FormData();
+          fd.append('file', f, f.name);
+          const url = (this.unpackZips && f.name.toLowerCase().endsWith('.zip'))
+            ? this.base + '/zip?path=' + encodeURIComponent(this.folder.path)
+            : this.base + '?path=' + encodeURIComponent(this.folder.path);
+          const r = await fetch(url, { method: 'POST', body: fd, credentials: 'same-origin', headers: { 'X-Requested-With': 'Fetch' } });
+          if (!r.ok) throw new Error('upload failed: ' + r.status);
+        }
+        await this.refresh();
+      } catch (e) { this.error = 'Upload failed.'; console.error(e); }
+      finally { this.busy = false; this.unpackZips = false; }
+    },
+    onDragOver(e) { e.preventDefault(); this.showDropZone = true; },
+    onDragLeave() { this.showDropZone = false; },
+    async onDrop(e) {
+      e.preventDefault();
+      this.showDropZone = false;
+      this.unpackZips = false;
+      if (e.dataTransfer && e.dataTransfer.files) await this.uploadFiles(e.dataTransfer.files);
     },
   }));
 }, { once: true });