Merge pull request 'fix: optimisation, renamed values for DDTYPE to save space' (#285) from ddtype_rename into additional-validations-regex

Reviewed-on: #285

.agent/docs/dependency-updates.md

@@ -0,0 +1,19 @@
+# Dependency Updates Checklist
+
+Whenever any `package.json` (root, `client/`, or `sas/`) or lockfile is modified, run the same checks CI runs before pushing:
+
+1. **npm audit** (must be clean for prod deps):
+   ```bash
+   npm audit --omit=dev            # in repo root
+   cd sas && npm audit --omit=dev
+   cd ../client && npm audit --omit=dev
+   ```
+   Fix with `npm audit fix`, targeted `overrides` in `package.json`, or version bumps — never `npm audit fix --force` blindly, as it can introduce breaking changes.
+
+2. **License checker** (client only):
+   ```bash
+   cd client && npm run license-checker
+   ```
+   If a new dependency fails, either add its SPDX id to the `onlyAllow` list in `client/licenseChecker.js` (if the license is acceptable, e.g. permissive ones like `BlueOak-1.0.0`) or add the specific package to `excludePackages` with justification. Data Controller ships on-prem, so only OSI-approved permissive licenses are acceptable for production dependencies.
+
+Both checks run in `.gitea/workflows/build.yaml` (`Check audit` and `Licence checker` steps) and will fail the build if skipped locally.

.agent/docs/row-level-security.md

@@ -0,0 +1,225 @@
+# Row Level Security — Technical Deep Dive
+
+This document explains **how** Row Level Security (RLS) is implemented in the Data Controller backend. For the user-facing configuration guide, see [docs.datacontroller.io/row-level-security](https://docs.datacontroller.io/row-level-security/).
+
+## Overview
+
+RLS in Data Controller is implemented as **server-side WHERE clause generation**. No data leaves SAS without passing through a dynamically generated filter. The filter is built at runtime per request, based on:
+
+1. The requesting user's group memberships (SAS metadata groups + DC groups)
+2. The active rules in the `MPE_ROW_LEVEL_SECURITY` control table
+3. The access mode (VIEW / EDIT / download / upload)
+
+Because the filter is expressed as a standard SAS `WHERE` expression, it works against **any** engine — Base SAS datasets, database libraries (via implicit SQL pass-through pushdown), SPDE, CAS libnames, etc.
+
+## Request Flow
+
+```mermaid
+flowchart TD
+    A[Client request\nview / edit / download / upload] --> B{Service mode}
+    B -->|VIEW / EDIT / DLOAD| C["%mpe_filtermaster(mode, libds)"]
+    B -->|ULOAD stagedata.sas| C
+    C --> D["%mpe_getgroups()\nmetadata groups + MPE_GROUPS"]
+    D --> E{User in &mpeadmins?}
+    E -->|Yes| F[No RLS filter\n1=1]
+    E -->|No| G[Lookup active rules in\nMPE_ROW_LEVEL_SECURITY\nfor libref.table + user's groups]
+    G --> H{Rules found?}
+    H -->|No| F
+    H -->|Yes| I["%mp_filtergenerate()\nper group, OR'd together"]
+    I --> J[WHERE clause written\nto temp fileref]
+    F --> J
+    J --> K{Read or Write?}
+    K -->|Read\nviewdata / getdata / getrawdata| L["where %inc filtref;;\nrows filtered server-side"]
+    K -->|Write\nstagedata| M[Inverse filter\nwhere not( filtref )]
+    M --> N{badrecords > 0?}
+    N -->|Yes| O[Abort submission\nSecurity Problem]
+    N -->|No| P[Staging proceeds\nto approval workflow]
+```
+
+## Key Components
+
+| Component | Location | Role |
+|---|---|---|
+| `MPE_ROW_LEVEL_SECURITY` | `&mpelib` (DC control library) | The rule table (scope, group, libref, table, logic, subgroup, variable, operator, raw value, active flag) |
+| `%mpe_filtermaster()` | `sas/sasjs/macros/mpe_filtermaster.sas` | Master macro that assembles the full WHERE clause for a request |
+| `%mpe_getgroups()` | `sas/sasjs/macros/mpe_getgroups.sas` | Resolves group membership (metadata groups via `%dc_getusergroups` + `MPE_GROUPS` DC-internal groups) |
+| `%mp_filtergenerate()` | SASjs core | Converts a query table (logic/subgroup/variable/operator/value rows) into WHERE clause text |
+| `%mp_filtercheck()` | SASjs core | Validates rule syntax at *edit time* (defence against SAS code injection) |
+| `mpe_row_level_security_postedit.sas` | `sas/sasjs/services/hooks/` | Post-edit hook that runs `%mp_filtercheck` whenever the RLS table itself is edited |
+
+## The Modes
+
+`%mpe_filtermaster` accepts a `mode` parameter, and every service that surfaces data calls it with the appropriate mode:
+
+| Mode | Caller | Purpose |
+|---|---|---|
+| `VIEW` | `services/public/viewdata.sas`, `getchangeinfo.sas` | Read-only table viewer |
+| `EDIT` | `services/editors/getdata.sas` | The EDIT grid (adds "current records only" validity filtering) |
+| `DLOAD` | `services/public/getrawdata.sas` | Raw file downloads (RLS scope treated as `VIEW`) |
+| `ULOAD` | `services/editors/stagedata.sas` | **Upload validation** (RLS scope treated as `EDIT`) |
+
+Scope mapping: `DLOAD` requests match rules with `RLS_SCOPE in ('VIEW','ALL')`; `ULOAD` requests match rules with `RLS_SCOPE in ('EDIT','ALL')`.
+
+## Execution Flow of `%mpe_filtermaster`
+
+The macro writes the final WHERE expression to a temporary **fileref** (`outref`), line by line. (A fileref is used because a generated filter may exceed the 64k macro variable limit — and note that `%include` of a fileref is not allowed directly in a `proc sql` where clause, hence callers typically use it in a DATA step or data step view.)
+
+### 1. User-supplied filter (FILTER_RK)
+
+If the request includes a stored filter (`filter_rk > 0`), its clauses are read from `MPE_FILTERANYTABLE` / `MPE_FILTERSOURCE` and generated first via `%mp_filtergenerate`. RLS clauses are then **AND-ed on top** — a user filter can only ever narrow results, never widen them beyond RLS.
+
+### 2. Validity-date filtering (EDIT / DLOAD only)
+
+`MPE_TABLES` may define `VAR_TXFROM` / `VAR_TXTO` (SCD2-style validity variables) for the target table. Unless the user explicitly filtered on those variables, the macro appends:
+
+```
+("<current datetime>"dt < VAR_TXTO)
+```
+
+so that only current records are surfaced in the EDIT grid and downloads.
+
+### 3. Group resolution and admin bypass
+
+```sas
+%mpe_getgroups(user=%mf_getuser(), outds=work.groups)
+```
+
+Groups come from two sources, concatenated:
+
+* SAS metadata groups (Viya / EBI / Base-specific logic in `%dc_getusergroups`)
+* The `MPE_GROUPS` DC table (group assignments managed inside Data Controller)
+
+If the user is a member of the `&mpeadmins` group, **RLS is skipped entirely** — admins always see all rows.
+
+### 4. Rule extraction
+
+Non-admin users trigger a lookup of active, current rules:
+
+```sas
+create table work.&rlsds as
+  select rls_group, rls_group_logic, rls_subgroup_logic, rls_subgroup_id,
+         rls_variable_nm, rls_operator_nm, rls_raw_value
+  from &mpelib..mpe_row_level_security
+  where &dc_dttmtfmt. lt tx_to          /* only current (non-deleted) rules */
+    and rls_scope in ("&scopeval",'ALL')
+    and upcase(rls_group) in (select upcase(groupname) from work.groups)
+    and rls_libref = "<libref>" and rls_table = "<dsname>"
+    and rls_active = 1
+  order by rls_group, rls_subgroup_id;
+```
+
+### 5. Clause assembly
+
+If rules exist, they are appended to the fileref as `AND ( ... )`. Each **group** the user belongs to contributes one sub-filter, and the group-level sub-filters are joined with `OR`:
+
+```
+AND ( <group 1 filter> OR <group 2 filter> ... )
+```
+
+Each group's filter is produced by `%mp_filtergenerate`, which honours:
+
+* `RLS_GROUP_LOGIC` — how subgroups (identified by `RLS_SUBGROUP_ID`) are joined
+* `RLS_SUBGROUP_LOGIC` — how individual clauses within a subgroup are joined (AND/OR)
+
+So membership in multiple groups is **permissive** (OR): the user sees the union of rows permitted by each of their groups.
+
+### 6. Empty-filter fallback
+
+If nothing was written to the fileref (no stored filter, no validity vars, no matching RLS rules), the macro writes a literal `1=1` so the fileref can always be consumed as a valid WHERE expression. Absence of rules therefore means **no restriction** — RLS is opt-in per table/group.
+
+## How Callers Apply the Filter
+
+### Read path (viewdata.sas)
+
+```sas
+%mpe_filtermaster(VIEW, &libds, dclib=&mpelib, filter_rk=&filter_rk,
+  outref=filtref, outds=work.query)
+
+data work.viewdata;
+  set &libds;
+  where %inc filtref;;
+  if _n_ > &DC_MAXOBS_WEBVIEW then stop;
+run;
+```
+
+The fileref is `%include`d directly inside the `where` statement — the filter never passes through client-visible state, so it cannot be tampered with. For database libraries the WHERE expression is pushed down to the database by the SAS engine.
+
+### Write path (stagedata.sas) — inverse filter
+
+Uploads cannot be filtered; instead the filter is **inverted** and any submitted row matching the inverse is rejected:
+
+```sas
+%mpe_filtermaster(ULOAD, &libds, dclib=&mpelib, outref=filtref, ...)
+
+/* prepare inverse query */
+data _null_;
+  infile filtref end=eof;
+  file &tempref;
+  if _n_=1 then put 'where not(';
+  input;  put _infile_;
+  if eof then put ')';
+run;
+
+data work.badrecords;
+  set work.jsdata;      /* rows submitted by the user */
+  %inc &tempref/source2;;
+run;
+
+%mp_abort(iftrue=(%mf_nobs(work.badrecords)>0)
+  ,msg=%str(Security Problem - N unauthorised records submitted))
+```
+
+If even one submitted row falls outside the user's permitted row set, the entire staging request is aborted before any approval/apply step.
+
+## Incompatibility with REPLACE Load Type
+
+RLS with `EDIT` scope is **incompatible** with tables configured with `LOAD_TYPE=REPLACE` in `MPE_TABLES`. A REPLACE load wipes and reloads the entire target table, so row-level filtering of submitted records cannot be enforced meaningfully (the rows a user is *not* allowed to see would also be deleted). Backend validations therefore abort in both directions (see [issue #211](https://git.datacontroller.io/dc/dc/issues/211)):
+
+1. **`mpe_row_level_security_postedit.sas`** — aborts when activating a rule with `RLS_SCOPE in ('EDIT','ALL')` against a table whose current `MPE_TABLES` record has `LOADTYPE='REPLACE'`.
+2. **`mpe_tables_postedit.sas`** — aborts when setting `LOADTYPE='REPLACE'` on a table that already has active, current `RLS_SCOPE in ('EDIT','ALL')` rules in `MPE_ROW_LEVEL_SECURITY`.
+
+`VIEW`-scope rules remain compatible with REPLACE loads, since they only affect read paths.
+
+## Edit-Time Validation (Injection Defence)
+
+Because `RLS_RAW_VALUE` is free text that ends up inside a generated WHERE clause, it is a potential SAS code-injection vector. Mitigations:
+
+1. **`mpe_row_level_security_postedit.sas`** — a post-edit hook on the `MPE_ROW_LEVEL_SECURITY` table itself. Every newly staged rule (with `rls_active=1`) is grouped by target `libref.table` and run through `%mp_filtercheck(targetds=..., abort=YES)`, which compiles/tests each clause against the real target table and rejects the whole submission on invalid syntax (see [mp_filtercheck](https://core.sasjs.io/mp__filtercheck_8sas.html)).
+2. **Format rules** enforced by validation: character values must be single quoted, `IN`/`NOT IN` values must be bracketed, `BETWEEN` must contain `AND`.
+
+Additionally, editing `MPE_ROW_LEVEL_SECURITY` is itself a Data Controller table edit, so it goes through the normal approval workflow, audit trail (`MPE_AUDIT`), and can be column-restricted via [Column Level Security](https://docs.datacontroller.io/column-level-security/).
+
+## Worked Example
+
+Given these active rules (all for `MYLIB.MYDS`, `RLS_ACTIVE=1`):
+
+| SCOPE | GROUP | GROUP_LOGIC | SUBGRP_LOGIC | SUBGRP_ID | VAR | OP | VALUE |
+|---|---|---|---|---|---|---|---|
+| ALL | Group 1 | AND | AND | 1 | VAR_2 | IN | ('this','or') |
+| ALL | Group 1 | AND | AND | 1 | VAR_3 | < | 42 |
+| ALL | Group 2 | AND | AND | 1 | VAR_4 | CONTAINS | 'xyz' |
+
+A non-admin user in **both** groups, opening the VIEW page, gets a fileref containing:
+
+```
+AND ( (VAR_2 IN ('this','or') AND VAR_3 < 42) OR (VAR_4 CONTAINS 'xyz') )
+```
+
+resulting in:
+
+```sas
+data work.viewdata;
+  set mylib.myds;
+  where (VAR_2 IN ('this','or') AND VAR_3 < 42) OR (VAR_4 CONTAINS 'xyz');
+run;
+```
+
+The same user submitting an EDIT upload has the inverse applied to their staged rows; any row not matching the expression above aborts the submission.
+
+## Summary of Security Properties
+
+* **Enforced server-side** in every read service (VIEW/EDIT/DLOAD) and every write service (ULOAD via inverse filter).
+* **Admin bypass** is explicit (`&mpeadmins` group membership check).
+* **Multi-group semantics are OR** (union of permitted rows); rules within a group/subgroup are AND/OR per configuration.
+* **Fail-open by design**: if no rules match a table, it is unrestricted — RLS must be opted into per table.
+* **Injection-resistant**: values are validated with `%mp_filtercheck` at the time rules are edited, not at query time.

.agent/docs/testing.md

@@ -0,0 +1,21 @@
+# Testing
+
+Backend (SAS) tests are run with the sasjs CLI from the `sas/` directory.
+
+## Commands
+
+- Full deploy + test cycle: `npm run 4gl` (compiles, deploys to the 4gl target, runs makedata) then `sasjs test -t 4gl`.
+- Run tests only (no rebuild/redeploy): `sasjs test -t 4gl`.
+- Run a subset of tests: `sasjs test -t 4gl SOMESTRING` — the positional argument filters to matching tests (e.g. `sasjs test -t 4gl stagedata.test.3`).
+
+## Results
+
+- Test results: `sas/sasjsresults/testResults.json` / `.csv` / `.xml`
+- Individual test logs: `sas/sasjsresults/logs/<testsuite>.log` (e.g. `services_editors_stagedata.test.3.log`)
+- Coverage: `sas/sasjsresults/coverage.lcov`
+
+## Notes
+
+- Test source files live in `sas/sasjs/**`; `sas/sasjsbuild/` is generated build output — do not hand-edit it.
+- `sasjs test` executes tests against the deployed app, so run `npm run 4gl` first after changing any service/hook/test code.
+- Assertions are made with `%mp_assert()`; results are written to `work.test_results`.

.agent/skills/handsontable/SKILL.md

@@ -0,0 +1,606 @@
+---
+name: handsontable
+description: >
+  Use this skill whenever the user asks about Handsontable — a JavaScript data grid component with
+  spreadsheet-like UX. Triggers include: mentions of "handsontable", "HotTable", "data grid",
+  "@handsontable/react-wrapper", spreadsheet component in React/Angular/Vue, HyperFormula formulas
+  inside a grid, cell types (dropdown, checkbox, date, numeric) in a grid context, or questions
+  about Handsontable theming, plugins, hooks, configuration options, or column/row features. Also
+  trigger when the user wants to add an editable spreadsheet-like table to a web app, or asks about
+  copy/paste, sorting, filtering, frozen rows/columns, merged cells, or context menus in a grid.
+  This skill covers Handsontable used with any framework (React, Angular, Vue 3, vanilla JS) and
+  HyperFormula as the Formulas plugin engine inside Handsontable. Do NOT use this skill for
+  headless/standalone HyperFormula usage without Handsontable — that is covered by the separate
+  "hyperformula" skill.
+---
+
+# Handsontable
+
+Handsontable is a JavaScript **data grid component** (not a full spreadsheet application) that
+brings spreadsheet-like UX to web apps: cell editing, copy/paste, sorting, filtering, formulas,
+keyboard navigation, context menus, merged cells, frozen rows/columns, conditional formatting, data
+validation, pagination, and 400+ built-in formulas via HyperFormula.
+
+- **Latest version:** 17.1.0 (May 2026)
+- **Frameworks:** Vanilla JS/TS, React (`@handsontable/react-wrapper`), Angular (`@handsontable/angular-wrapper`), Vue 3 (`@handsontable/vue3`)
+- **React wrapper requires:** React 18+
+- **License:** Dual — free for non-commercial use (`licenseKey: 'non-commercial-and-evaluation'`), paid for commercial. Per-developer annual license, offline validation (no server connection). Tiers: Hobby (free, non-commercial), Trial (free 45 days), Standard (from $999/yr), Priority (from $1,299/yr), Enterprise (custom). See [Pricing](https://handsontable.com/pricing).
+
+Always check `references/docs-map.md` (in this skill folder) for the full organized link directory
+when you need to point the user to specific documentation or need to look up more info.
+
+### What this skill does NOT cover
+
+- **Standalone HyperFormula** (headless formula engine without a grid UI) — use the "hyperformula" skill instead.
+- **Other data grid libraries** (AG Grid, TanStack Table, etc.).
+- **Full spreadsheet applications** — Handsontable is a component you embed, not a standalone app like Google Sheets.
+
+---
+
+## React Quick Start (Recommended)
+
+### Install
+
+```bash
+npm install handsontable @handsontable/react-wrapper
+```
+
+### Minimal working example
+
+```jsx
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+import 'handsontable/styles/handsontable.min.css';
+import 'handsontable/styles/ht-theme-main.min.css';
+
+registerAllModules();
+
+const MyGrid = () => (
+  <HotTable
+    themeName="ht-theme-main"
+    data={[
+      ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
+      ['2019', 10, 11, 12, 13],
+      ['2020', 20, 11, 14, 13],
+      ['2021', 30, 15, 12, 13],
+    ]}
+    colHeaders={true}
+    rowHeaders={true}
+    height="auto"
+    autoWrapRow={true}
+    autoWrapCol={true}
+    licenseKey="non-commercial-and-evaluation"
+  />
+);
+
+export default MyGrid;
+```
+
+Key points:
+- `registerAllModules()` registers every built-in plugin. To reduce bundle size, import only what
+  you need — see [Modules guide](https://handsontable.com/docs/react-data-grid/modules/).
+- `height` is required (or the grid won't render). Use `"auto"`, a pixel number, or a CSS string.
+- All Handsontable configuration options are passed as props on `<HotTable>`.
+- Full installation guide: https://handsontable.com/docs/react-data-grid/installation/
+
+---
+
+## Vanilla JS Quick Start
+
+### Install
+
+```bash
+npm install handsontable
+```
+
+### CDN (jsDelivr)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />
+```
+
+To pin a specific version, add `@17.1` after `handsontable` in the URL (e.g.,
+`handsontable@17.1/dist/handsontable.full.min.js`).
+
+### Minimal working example
+
+```js
+import Handsontable from 'handsontable';
+import 'handsontable/styles/handsontable.min.css';
+import 'handsontable/styles/ht-theme-main.min.css';
+
+const container = document.getElementById('grid');
+
+new Handsontable(container, {
+  data: [
+    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
+    ['2019', 10, 11, 12, 13],
+    ['2020', 20, 11, 14, 13],
+    ['2021', 30, 15, 12, 13],
+  ],
+  colHeaders: true,
+  rowHeaders: true,
+  height: 'auto',
+  themeName: 'ht-theme-main',
+  autoWrapRow: true,
+  autoWrapCol: true,
+  licenseKey: 'non-commercial-and-evaluation',
+});
+```
+
+Full JS docs: https://handsontable.com/docs/javascript-data-grid/installation/
+
+---
+
+## Other Frameworks
+
+### Angular (v17–19)
+
+```bash
+npm install handsontable @handsontable/angular-wrapper
+```
+
+The Angular wrapper was modernized in Handsontable v17.1 to align with Angular 17–19, simplifying setup and reducing dependencies. Earlier Angular versions are no longer the target — upgrade Angular first if you're below v17.
+
+Docs: https://handsontable.com/docs/angular-data-grid/installation/
+
+### Vue 3
+
+```bash
+npm install handsontable @handsontable/vue3
+```
+
+Docs: https://handsontable.com/docs/react-data-grid/vue3-installation/
+
+All framework wrappers share the same version number as the core library and expose the same
+configuration options. The React examples in this skill translate directly — just use the
+framework's component syntax. Note: Vue 2 (`@handsontable/vue`) is deprecated — use Vue 3.
+
+---
+
+## Theming: Light / Dark / Auto
+
+Handsontable v15+ includes a built-in theme system. Three themes ship out of the box: **main**
+(default, spreadsheet-like), **horizon** (clean, analytics-focused), **classic** (legacy
+replacement).
+
+### CSS file approach (simplest)
+
+Import the base stylesheet plus a theme:
+
+```js
+import 'handsontable/styles/handsontable.min.css';
+import 'handsontable/styles/ht-theme-main.min.css';
+```
+
+Then set the theme on the grid:
+
+```jsx
+<HotTable themeName="ht-theme-main" /* ... */ />
+```
+
+**Dark mode:**
+- System preference (auto): `themeName="ht-theme-main-dark-auto"`
+- Forced dark: `themeName="ht-theme-main-dark"`
+
+Replace `main` with `horizon` or `classic` for other themes.
+
+### Theme API approach (runtime switching)
+
+```js
+import { mainTheme, registerTheme } from 'handsontable/themes';
+
+const theme = registerTheme(mainTheme)
+  .setColorScheme('auto')       // 'light' | 'dark' | 'auto'
+  .setDensityType('comfortable'); // 'compact' | 'default' | 'comfortable'
+```
+
+Then pass it as a prop:
+
+```jsx
+<HotTable theme={theme} /* ... */ />
+```
+
+### CDN theme files
+
+```html
+<!-- Theme CSS (includes light and dark mode support) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />
+```
+
+In v17, dark mode is controlled via `themeName` or the Theme API — there are no separate `-dark` or
+`-dark-auto` CSS files. Load the base theme CSS above and set the mode at runtime.
+
+For CSS variable customization, the Theme Builder, Figma design system, and 200+ design tokens, see:
+- [Themes guide](https://handsontable.com/docs/react-data-grid/themes/)
+- [Theme customization](https://handsontable.com/docs/react-data-grid/theme-customization/)
+- [Theme Builder tool](https://handsontable.com/theme-builder)
+
+---
+
+## Common Configuration Patterns
+
+All options below are passed as props on `<HotTable>` (React) or in the config object (vanilla JS).
+For the full options reference: https://handsontable.com/docs/react-data-grid/api/options/
+
+### Data binding
+
+```jsx
+// Array of arrays
+data={[['A1', 'B1'], ['A2', 'B2']]}
+
+// Array of objects
+data={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]}
+columns={[{ data: 'id' }, { data: 'name' }]}
+```
+
+Docs: https://handsontable.com/docs/react-data-grid/binding-to-data/
+
+### Column & row headers
+
+```jsx
+colHeaders={['ID', 'Name', 'Price']}  // custom labels, or {true} for A, B, C...
+rowHeaders={true}                      // 1, 2, 3... or pass an array
+```
+
+### Column types (cell types)
+
+Set via the `columns` array or `cells` function. Built-in types:
+
+- `text` (default), `numeric`, `date`, `time`, `checkbox`, `select`, `dropdown`,
+  `autocomplete`, `password`, `handsontable` (nested grid), `multiselect` (v17+)
+
+```jsx
+columns={[
+  { data: 'name', type: 'text' },
+  { data: 'price', type: 'numeric', numericFormat: { pattern: '$0,0.00' } },
+  { data: 'active', type: 'checkbox' },
+  { data: 'category', type: 'dropdown', source: ['A', 'B', 'C'] },
+]}
+```
+
+Full cell types reference: https://handsontable.com/docs/react-data-grid/cell-type/
+
+### Sorting & filtering
+
+```jsx
+columnSorting={true}        // single-column sort
+// or
+multiColumnSorting={true}   // multi-column sort
+
+filters={true}              // enable column filters
+dropdownMenu={true}         // column header menu with filter UI
+```
+
+### Frozen rows/columns
+
+```jsx
+fixedRowsTop={1}
+fixedRowsBottom={1}
+fixedColumnsStart={2}
+```
+
+### Other common options
+
+```jsx
+readOnly={true}                 // entire grid read-only (or per-cell/column)
+contextMenu={true}              // right-click menu
+mergeCells={[{ row: 0, col: 0, rowspan: 2, colspan: 2 }]}
+manualColumnResize={true}
+manualRowResize={true}
+stretchH="all"                  // stretch columns to fill width: 'none' | 'last' | 'all'
+```
+
+### Per-column config with HotColumn (React)
+
+```jsx
+import { HotTable, HotColumn } from '@handsontable/react-wrapper';
+
+<HotTable data={data} licenseKey="non-commercial-and-evaluation">
+  <HotColumn title="Name" data="name" />
+  <HotColumn title="Active" data="active" type="checkbox" />
+</HotTable>
+```
+
+Docs: https://handsontable.com/docs/react-data-grid/hot-column/
+
+---
+
+## HyperFormula Integration (Formulas Plugin)
+
+HyperFormula powers Handsontable's Formulas plugin, providing 400+ spreadsheet functions (SUM,
+AVERAGE, IF, VLOOKUP, etc.). This section covers using HyperFormula **inside** Handsontable only.
+
+### Install
+
+```bash
+npm install hyperformula
+```
+
+> **Note:** Starting in Handsontable v18, HyperFormula will no longer be bundled. Install it
+> separately and pass it to the Formulas plugin.
+
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/hyperformula/dist/hyperformula.full.min.js"></script>
+```
+
+### Simple setup (auto-created instance)
+
+Pass the `HyperFormula` class directly — Handsontable creates an instance automatically:
+
+```jsx
+import { HyperFormula } from 'hyperformula';
+
+<HotTable
+  data={[
+    ['10', '20', '=SUM(A1:B1)'],
+    ['30', '40', '=SUM(A2:B2)'],
+  ]}
+  formulas={{ engine: HyperFormula }}
+  colHeaders={true}
+  licenseKey="non-commercial-and-evaluation"
+/>
+```
+
+### External instance (for multi-sheet or shared engine)
+
+Create a HyperFormula instance with the `'internal-use-in-handsontable'` license key:
+
+```jsx
+import { HyperFormula } from 'hyperformula';
+
+const hfInstance = HyperFormula.buildEmpty({
+  licenseKey: 'internal-use-in-handsontable',
+});
+
+// Sheet 1
+<HotTable
+  data={data1}
+  formulas={{ engine: hfInstance, sheetName: 'Sheet1' }}
+  licenseKey="non-commercial-and-evaluation"
+/>
+
+// Sheet 2 — shares the same engine, enabling cross-sheet references
+<HotTable
+  data={data2}
+  formulas={{ engine: hfInstance, sheetName: 'Sheet2' }}
+  licenseKey="non-commercial-and-evaluation"
+/>
+```
+
+Cross-sheet formula example: `=SUM(Sheet1!A:A)`
+
+### Named expressions
+
+```jsx
+formulas={{
+  engine: HyperFormula,
+  namedExpressions: [
+    { name: 'TAX_RATE', expression: 0.21 },
+  ],
+}}
+```
+
+Use in cells: `=A1 * TAX_RATE`
+
+### Listening for formula changes
+
+```jsx
+<HotTable
+  formulas={{ engine: HyperFormula }}
+  afterFormulasValuesUpdate={(changes) => {
+    changes.forEach((c) => console.log(c.address, c.newValue));
+  }}
+/>
+```
+
+### Known limitations
+
+- Formulas don't work with nested object data.
+- Moving rows/columns with formulas requires the ManualRowMove / ManualColumnMove plugins (not IndexMapper).
+- `getSourceData()` operates on physical indexes; formulas use visual indexes.
+
+Full guide: https://handsontable.com/docs/react-data-grid/formula-calculation/
+HyperFormula functions list: https://hyperformula.handsontable.com/docs/guide/built-in-functions.html
+HyperFormula version compatibility table: https://handsontable.com/docs/react-data-grid/formula-calculation/#hyperformula-version-support
+
+---
+
+## Server-side data with DataProvider (v17.1+)
+
+The **DataProvider plugin** (new in v17.1) wires the grid up to a remote data source so rows are fetched, sorted, and mutated server-side instead of held in memory. Use it for datasets too large to load up front, or when the source of truth lives in a backend.
+
+The `dataProvider` option is an object with five required keys: a row-id resolver, a paginated `fetchRows` callback, and three mutation callbacks. For a read-only grid, stub the mutation callbacks with `async () => {}` — they must still be present.
+
+```jsx
+<HotTable
+  colHeaders={['ID', 'Name', 'Email']}
+  pagination={{ pageSize: 25 }}
+  columnSorting={true}
+  emptyDataState={true}
+  height={360}
+  licenseKey="non-commercial-and-evaluation"
+  dataProvider={{
+    // Required: how to extract a stable id from each row
+    rowId: 'id',
+
+    // Required: paginated fetch. `sort` is null when no column is sorted.
+    // Second arg carries an AbortSignal — pass it to fetch() so the plugin
+    // can cancel superseded requests when the user pages/sorts quickly.
+    async fetchRows({ page, pageSize, sort }, { signal }) {
+      const params = new URLSearchParams({ page, pageSize });
+      if (sort) {
+        // sort = { prop: string, order: 'asc' | 'desc' }
+        params.set('sortBy', sort.prop);
+        params.set('order', sort.order);
+      }
+      const res = await fetch(`/api/users?${params}`, { signal });
+      const { rows, totalRows } = await res.json();
+      return { rows, totalRows };
+    },
+
+    // Required. Stub with async () => {} if your grid is read-only.
+    // The plugin auto-refetches the current page after each callback resolves.
+    // See the plugin API ref for the exact payload shapes.
+    onRowsCreate: async () => {},
+    onRowsUpdate: async () => {},
+    onRowsRemove: async () => {},
+  }}
+/>
+```
+
+### Loading and error UI
+
+The plugin fires three hooks you can wire up as `<HotTable>` props for loading indicators and error surfaces:
+
+- `beforeDataProviderFetch(params)` — fires before each fetch. `params.skipLoading` is set when the plugin wants to suppress your loading indicator (e.g., during a quick refetch).
+- `afterDataProviderFetch(result)` — fires after a successful fetch.
+- `afterDataProviderFetchError(error)` — fires when `fetchRows` throws or returns a rejected promise.
+
+### Companion options
+
+The plugin is built to pair with `pagination` (paginates server-side), `columnSorting` (single-column server-side sort), and `emptyDataState` (loading + empty state UI). Enable all three when you use DataProvider.
+
+### Authoritative references
+
+- Guide: https://handsontable.com/docs/react-data-grid/server-side-data-fetching/
+- Recipe (REST API): https://handsontable.com/docs/react-data-grid/recipes/data-management/load-data-rest-api/
+- Plugin API: https://handsontable.com/docs/react-data-grid/api/data-provider/
+
+## Notifications (v17.1+)
+
+The **Notification plugin** (new in v17.1) shows non-blocking toast notifications anchored to the grid — useful for confirming saves, surfacing validation errors, or signaling background sync state. Enable with `notifications: true` and trigger via `hot.getPlugin('notifications').showMessage(...)`. See the plugin guide for placement, severity levels, and auto-dismiss timing: https://handsontable.com/docs/react-data-grid/notification/
+
+---
+
+## Events & Hooks
+
+Handsontable hooks are passed as props on `<HotTable>`:
+
+```jsx
+<HotTable
+  afterChange={(changes, source) => {
+    if (source !== 'loadData') {
+      console.log('Cell changed:', changes);
+    }
+  }}
+  beforeChange={(changes, source) => {
+    // Return false to cancel the edit
+  }}
+  afterSelection={(row, col, row2, col2) => {
+    console.log('Selected:', row, col, 'to', row2, col2);
+  }}
+/>
+```
+
+There are 100+ hooks available. Full reference: https://handsontable.com/docs/react-data-grid/api/hooks/
+
+Guide: https://handsontable.com/docs/react-data-grid/events-and-hooks/
+
+---
+
+## Accessing the Instance (Ref)
+
+Use a ref to call Handsontable's core methods:
+
+```jsx
+import { useRef } from 'react';
+
+const MyGrid = () => {
+  const hotRef = useRef(null);
+
+  const handleClick = () => {
+    const hot = hotRef.current?.hotInstance;
+    if (hot) {
+      console.log(hot.getData());       // get all data
+      hot.selectCell(0, 0);             // select a cell
+    }
+  };
+
+  return (
+    <>
+      <HotTable ref={hotRef} /* ...options */ />
+      <button onClick={handleClick}>Get Data</button>
+    </>
+  );
+};
+```
+
+Core API reference: https://handsontable.com/docs/react-data-grid/api/core/
+
+---
+
+## Performance & Large Datasets
+
+Handsontable virtualizes rendering automatically — only visible rows and columns are in the DOM, so
+grids with 10k–100k+ rows perform well out of the box. For bulk programmatic updates, wrap mutations
+in `batch()` to defer re-rendering until all changes are applied:
+
+```jsx
+hotRef.current.hotInstance.batch(() => {
+  // set many cells, add rows, etc.
+});
+```
+
+For further tuning (disabling auto-size, reducing plugin overhead), see:
+- [Performance guide](https://handsontable.com/docs/react-data-grid/performance/)
+- [Batch operations](https://handsontable.com/docs/react-data-grid/batch-operations/)
+- [Bundle size optimization](https://handsontable.com/docs/react-data-grid/bundle-size/)
+
+---
+
+## Recipes (v17+)
+
+Handsontable v17 introduced a Recipes section in the docs — ready-made patterns for common use cases
+(data validation workflows, dynamic column generation, etc.). Check the recipes index before building
+something from scratch: https://handsontable.com/docs/react-data-grid/recipes/
+
+---
+
+## Common Pitfalls
+
+- **Forgetting `height`**: The grid won't render without a `height` prop. Use `"auto"`, a pixel value, or a CSS string.
+- **Not filtering `loadData` in `afterChange`**: The `afterChange` hook fires on initial data load with `source === 'loadData'`. Always check the source to avoid infinite loops when syncing changes back to state.
+- **Using the old wrapper packages**: v17 removed `@handsontable/react` and `@handsontable/angular`. Use `@handsontable/react-wrapper` and `@handsontable/angular-wrapper`.
+- **Using legacy CSS imports**: `handsontable.full.min.css` was removed in v17. Use `handsontable/styles/handsontable.min.css` plus a theme file.
+- **Formulas with nested object data**: HyperFormula formulas don't work when `data` is an array of nested objects — use flat objects or arrays of arrays.
+- **ExportFile `columnHeaders` renamed**: In v17.1 the ExportFile plugin's `columnHeaders` option was renamed to `colHeaders` to match the table-level option. Update any `exportAsString` / `exportAsBlob` / `downloadFile` calls that pass `columnHeaders: ...`.
+
+---
+
+## Version Awareness
+
+Handsontable docs are versioned. The latest docs live at `/docs/react-data-grid/` (which redirects
+to the current version). To link to a specific version, use `/docs/17.0/react-data-grid/`.
+
+When helping a user, check which version they are on — breaking changes between major versions are
+common. Point them to the relevant migration guide if they're upgrading.
+
+For the full organized directory of documentation links, read `references/docs-map.md` in this
+skill's folder.
+
+### v17.1 changes (latest, May 2026)
+
+- **New plugins:** DataProvider (server-side row loading via `dataProvider` option), Notification (toast notifications).
+- **NestedHeaders rowspan:** column headers can now span multiple header rows.
+- **ExportFile:** XLSX export added; the `columnHeaders` option was renamed to `colHeaders` (see Common Pitfalls).
+- **Angular wrapper:** modernized for Angular 17–19; simpler setup, fewer deps.
+- **Touch:** long-press now opens the context menu on touch devices.
+- **TypeScript:** `dateFormat` option now accepts `Intl.DateTimeFormatOptions`.
+- No removals or deprecations in v17.1.
+
+### v17.0 Breaking Changes
+
+- Removed legacy wrapper packages (`@handsontable/react`, `@handsontable/angular`). Use
+  `@handsontable/react-wrapper` and `@handsontable/angular-wrapper`.
+- Removed legacy CSS (`handsontable.full.min.css`). Use `handsontable/styles/` imports.
+- Removed core-js from dependencies.
+- Removed the PersistentState plugin.
+- Deprecated bundled HyperFormula (will require separate install in v18).
+- Deprecated numbro.js, Pikaday, moment.js, DOMPurify — use native alternatives.
+
+Migration guide: https://handsontable.com/docs/react-data-grid/migration-from-16.2-to-17.0/

.agent/skills/handsontable/references/docs-map.md

@@ -0,0 +1,231 @@
+# Handsontable Documentation Map
+
+> Last verified: May 2026 · Aligned with Handsontable 17.1.0
+
+Organized link directory for all Handsontable and HyperFormula (in-grid) documentation. Use these
+to point users to the right page. Links default to the React docs; replace `react-data-grid` with
+`javascript-data-grid`, `angular-data-grid`, or prefix with `vue3-` for other frameworks.
+
+## Getting Started
+- Installation: https://handsontable.com/docs/react-data-grid/installation/
+- Demo: https://handsontable.com/docs/react-data-grid/demo/
+- Binding to data: https://handsontable.com/docs/react-data-grid/binding-to-data/
+- Server-side data fetching (DataProvider, v17.1+): https://handsontable.com/docs/react-data-grid/server-side-data-fetching/
+- Saving data: https://handsontable.com/docs/react-data-grid/saving-data/
+- Configuration options guide: https://handsontable.com/docs/react-data-grid/configuration-options/
+- Grid size: https://handsontable.com/docs/react-data-grid/grid-size/
+- Instance methods: https://handsontable.com/docs/react-data-grid/instance-methods/
+- Events and hooks: https://handsontable.com/docs/react-data-grid/events-and-hooks/
+- License key: https://handsontable.com/docs/react-data-grid/license-key/
+- Redux integration: https://handsontable.com/docs/react-data-grid/redux/
+
+## Styling & Themes
+- Themes guide: https://handsontable.com/docs/react-data-grid/themes/
+- Design system (Figma): https://handsontable.com/docs/react-data-grid/handsontable-design-system/
+- Theme customization (CSS vars, tokens): https://handsontable.com/docs/react-data-grid/theme-customization/
+- Legacy style (pre-v15): https://handsontable.com/docs/react-data-grid/legacy-style/
+- Theme Builder tool: https://handsontable.com/theme-builder
+- Figma Theme Generator: https://github.com/handsontable/handsontable-figma
+
+## Columns
+- HotColumn component (React): https://handsontable.com/docs/react-data-grid/hot-column/
+- Column headers: https://handsontable.com/docs/react-data-grid/column-header/
+- Column groups (nested headers): https://handsontable.com/docs/react-data-grid/column-groups/
+- Column hiding: https://handsontable.com/docs/react-data-grid/column-hiding/
+- Column moving: https://handsontable.com/docs/react-data-grid/column-moving/
+- Column freezing: https://handsontable.com/docs/react-data-grid/column-freezing/
+- Column widths: https://handsontable.com/docs/react-data-grid/column-width/
+- Column summary: https://handsontable.com/docs/react-data-grid/column-summary/
+- Column virtualization: https://handsontable.com/docs/react-data-grid/column-virtualization/
+- Column menu (dropdown): https://handsontable.com/docs/react-data-grid/column-menu/
+- Column filter: https://handsontable.com/docs/react-data-grid/column-filter/
+
+## Rows
+- Row headers: https://handsontable.com/docs/react-data-grid/row-header/
+- Row parent-child (nested rows): https://handsontable.com/docs/react-data-grid/row-parent-child/
+- Row hiding: https://handsontable.com/docs/react-data-grid/row-hiding/
+- Row moving: https://handsontable.com/docs/react-data-grid/row-moving/
+- Row freezing: https://handsontable.com/docs/react-data-grid/row-freezing/
+- Row heights: https://handsontable.com/docs/react-data-grid/row-height/
+- Row virtualization: https://handsontable.com/docs/react-data-grid/row-virtualization/
+- Rows sorting: https://handsontable.com/docs/react-data-grid/rows-sorting/
+- Rows pagination: https://handsontable.com/docs/react-data-grid/rows-pagination/
+- Row trimming: https://handsontable.com/docs/react-data-grid/row-trimming/
+- Row pre-populating: https://handsontable.com/docs/react-data-grid/row-prepopulating/
+
+## Cell Features
+- Clipboard (copy/paste): https://handsontable.com/docs/react-data-grid/basic-clipboard/
+- Selection: https://handsontable.com/docs/react-data-grid/selection/
+- Merge cells: https://handsontable.com/docs/react-data-grid/merge-cells/
+- Conditional formatting: https://handsontable.com/docs/react-data-grid/conditional-formatting/
+- Text alignment: https://handsontable.com/docs/react-data-grid/text-alignment/
+- Disabled cells: https://handsontable.com/docs/react-data-grid/disabled-cells/
+- Comments: https://handsontable.com/docs/react-data-grid/comments/
+- Autofill values: https://handsontable.com/docs/react-data-grid/autofill-values/
+- Formatting cells: https://handsontable.com/docs/react-data-grid/formatting-cells/
+
+## Cell Functions
+- Cell functions overview: https://handsontable.com/docs/react-data-grid/cell-function/
+- Cell renderer: https://handsontable.com/docs/react-data-grid/cell-renderer/
+- Cell editor: https://handsontable.com/docs/react-data-grid/cell-editor/
+- Cell validator: https://handsontable.com/docs/react-data-grid/cell-validator/
+- Custom cells (v17+): https://handsontable.com/docs/react-data-grid/custom-cells/
+
+## Cell Types
+- Cell type overview: https://handsontable.com/docs/react-data-grid/cell-type/
+- Numeric: https://handsontable.com/docs/react-data-grid/numeric-cell-type/
+- Date: https://handsontable.com/docs/react-data-grid/date-cell-type/
+- Time: https://handsontable.com/docs/react-data-grid/time-cell-type/
+- Checkbox: https://handsontable.com/docs/react-data-grid/checkbox-cell-type/
+- Select: https://handsontable.com/docs/react-data-grid/select-cell-type/
+- Dropdown: https://handsontable.com/docs/react-data-grid/dropdown-cell-type/
+- Autocomplete: https://handsontable.com/docs/react-data-grid/autocomplete-cell-type/
+- MultiSelect (v17+): https://handsontable.com/docs/react-data-grid/multiselect-cell-type/
+- Password: https://handsontable.com/docs/react-data-grid/password-cell-type/
+- Handsontable (nested grid): https://handsontable.com/docs/react-data-grid/handsontable-cell-type/
+
+## Formulas (HyperFormula in Handsontable)
+- Formula calculation guide: https://handsontable.com/docs/react-data-grid/formula-calculation/
+- Formulas plugin API: https://handsontable.com/docs/react-data-grid/api/formulas/
+- HyperFormula built-in functions list: https://hyperformula.handsontable.com/docs/guide/built-in-functions.html
+- HyperFormula configuration options: https://hyperformula.handsontable.com/docs/guide/configuration-options.html
+- HyperFormula custom functions: https://hyperformula.handsontable.com/docs/guide/custom-functions.html
+- HyperFormula named expressions: https://hyperformula.handsontable.com/docs/guide/cell-references.html#relative-references
+- HyperFormula license key: https://hyperformula.handsontable.com/docs/guide/license-key.html
+
+## Navigation
+- Keyboard shortcuts: https://handsontable.com/docs/react-data-grid/keyboard-shortcuts/
+- Custom shortcuts: https://handsontable.com/docs/react-data-grid/custom-shortcuts/
+- Focus scopes: https://handsontable.com/docs/react-data-grid/focus-scopes/
+- Searching values: https://handsontable.com/docs/react-data-grid/searching-values/
+
+## Accessibility
+- Accessibility guide: https://handsontable.com/docs/react-data-grid/accessibility/
+
+## Menus & Accessories
+- Context menu: https://handsontable.com/docs/react-data-grid/context-menu/
+- Undo and redo: https://handsontable.com/docs/react-data-grid/undo-redo/
+- Icon pack: https://handsontable.com/docs/react-data-grid/icon-pack/
+- Export to CSV: https://handsontable.com/docs/react-data-grid/export-to-csv/
+- Export to Excel/XLSX (v17.1+): https://handsontable.com/docs/react-data-grid/export-to-excel/
+- Notification (v17.1+): https://handsontable.com/docs/react-data-grid/notification/
+- Empty data state: https://handsontable.com/docs/react-data-grid/empty-data-state/
+
+## Dialog & Loading
+- Dialog: https://handsontable.com/docs/react-data-grid/dialog/
+- Loading indicator: https://handsontable.com/docs/react-data-grid/loading/
+
+## Internationalization
+- Language: https://handsontable.com/docs/react-data-grid/language/
+- Locale: https://handsontable.com/docs/react-data-grid/locale/
+- Layout direction (RTL/LTR): https://handsontable.com/docs/react-data-grid/layout-direction/
+- IME support: https://handsontable.com/docs/react-data-grid/ime-support/
+
+## Tools & Building
+- Modules (tree-shaking): https://handsontable.com/docs/react-data-grid/modules/
+- Custom plugins: https://handsontable.com/docs/react-data-grid/custom-plugins/
+- Custom builds: https://handsontable.com/docs/react-data-grid/custom-builds/
+- Testing: https://handsontable.com/docs/react-data-grid/testing/
+
+## Optimization
+- Batch operations: https://handsontable.com/docs/react-data-grid/batch-operations/
+- Performance: https://handsontable.com/docs/react-data-grid/performance/
+- Bundle size: https://handsontable.com/docs/react-data-grid/bundle-size/
+
+## Security
+- Security guide: https://handsontable.com/docs/react-data-grid/security/
+
+## API Reference
+- API overview: https://handsontable.com/docs/react-data-grid/api/
+- Core (instance methods): https://handsontable.com/docs/react-data-grid/api/core/
+- Hooks (all events): https://handsontable.com/docs/react-data-grid/api/hooks/
+- Configuration options (all props): https://handsontable.com/docs/react-data-grid/api/options/
+- Plugins index: https://handsontable.com/docs/react-data-grid/api/plugins/
+
+### Individual Plugin APIs
+- AutoColumnSize: https://handsontable.com/docs/react-data-grid/api/auto-column-size/
+- AutoRowSize: https://handsontable.com/docs/react-data-grid/api/auto-row-size/
+- Autofill: https://handsontable.com/docs/react-data-grid/api/autofill/
+- BindRowsWithHeaders: https://handsontable.com/docs/react-data-grid/api/bind-rows-with-headers/
+- CollapsibleColumns: https://handsontable.com/docs/react-data-grid/api/collapsible-columns/
+- ColumnSorting: https://handsontable.com/docs/react-data-grid/api/column-sorting/
+- ColumnSummary: https://handsontable.com/docs/react-data-grid/api/column-summary/
+- Comments: https://handsontable.com/docs/react-data-grid/api/comments/
+- ContextMenu: https://handsontable.com/docs/react-data-grid/api/context-menu/
+- CopyPaste: https://handsontable.com/docs/react-data-grid/api/copy-paste/
+- CustomBorders: https://handsontable.com/docs/react-data-grid/api/custom-borders/
+- DataProvider (v17.1+): https://handsontable.com/docs/react-data-grid/api/data-provider/
+- Dialog: https://handsontable.com/docs/react-data-grid/api/dialog/
+- DragToScroll: https://handsontable.com/docs/react-data-grid/api/drag-to-scroll/
+- DropdownMenu: https://handsontable.com/docs/react-data-grid/api/dropdown-menu/
+- EmptyDataState: https://handsontable.com/docs/react-data-grid/api/empty-data-state/
+- ExportFile: https://handsontable.com/docs/react-data-grid/api/export-file/
+- Filters: https://handsontable.com/docs/react-data-grid/api/filters/
+- Formulas: https://handsontable.com/docs/react-data-grid/api/formulas/
+- HiddenColumns: https://handsontable.com/docs/react-data-grid/api/hidden-columns/
+- HiddenRows: https://handsontable.com/docs/react-data-grid/api/hidden-rows/
+- Loading: https://handsontable.com/docs/react-data-grid/api/loading/
+- ManualColumnFreeze: https://handsontable.com/docs/react-data-grid/api/manual-column-freeze/
+- ManualColumnMove: https://handsontable.com/docs/react-data-grid/api/manual-column-move/
+- ManualColumnResize: https://handsontable.com/docs/react-data-grid/api/manual-column-resize/
+- ManualRowMove: https://handsontable.com/docs/react-data-grid/api/manual-row-move/
+- ManualRowResize: https://handsontable.com/docs/react-data-grid/api/manual-row-resize/
+- MergeCells: https://handsontable.com/docs/react-data-grid/api/merge-cells/
+- MultiColumnSorting: https://handsontable.com/docs/react-data-grid/api/multi-column-sorting/
+- NestedHeaders: https://handsontable.com/docs/react-data-grid/api/nested-headers/
+- NestedRows: https://handsontable.com/docs/react-data-grid/api/nested-rows/
+- Notification (v17.1+): https://handsontable.com/docs/react-data-grid/api/notification/
+- Pagination: https://handsontable.com/docs/react-data-grid/api/pagination/
+- Search: https://handsontable.com/docs/react-data-grid/api/search/
+- StretchColumns: https://handsontable.com/docs/react-data-grid/api/stretch-columns/
+- TrimRows: https://handsontable.com/docs/react-data-grid/api/trim-rows/
+- UndoRedo: https://handsontable.com/docs/react-data-grid/api/undo-redo/
+
+## Recipes (new in v17)
+- Recipes index: https://handsontable.com/docs/react-data-grid/recipes/
+- Load data from a REST API (DataProvider, v17.1+): https://handsontable.com/docs/react-data-grid/recipes/data-management/load-data-rest-api/
+
+## Upgrade & Migration
+- Changelog: https://handsontable.com/docs/react-data-grid/changelog/
+- Versioning policy: https://handsontable.com/docs/react-data-grid/versioning-policy/
+- Deprecation policy: https://handsontable.com/docs/react-data-grid/deprecation-policy/
+- Long Term Support (LTS): https://handsontable.com/docs/react-data-grid/long-term-support/
+- 16.2 → 17.0 migration: https://handsontable.com/docs/react-data-grid/migration-from-16.2-to-17.0/
+- 16.0 → 16.1 migration: https://handsontable.com/docs/react-data-grid/migration-from-16.0-to-16.1/
+- 15.3 → 16.0 migration: https://handsontable.com/docs/react-data-grid/migration-from-15.3-to-16.0/
+- 14.6 → 15.0 migration: https://handsontable.com/docs/react-data-grid/migration-from-14.6-to-15.0/
+
+## Other Framework Installation
+- JavaScript: https://handsontable.com/docs/javascript-data-grid/installation/
+- Angular: https://handsontable.com/docs/angular-data-grid/installation/
+- Vue 3: https://handsontable.com/docs/react-data-grid/vue3-installation/
+
+## SSR Examples (CodeSandbox)
+- Next.js: https://codesandbox.io/p/sandbox/kwnjph?file=https://handsontable.com/codesandbox-vm?example-dir=next.js&handsontable-version=17.1preview=true
+- Astro: https://codesandbox.io/p/sandbox/gnqcwn?file=https://handsontable.com/codesandbox-vm?example-dir=astro&handsontable-version=17.1preview=true
+- Remix: https://codesandbox.io/p/sandbox/njcjlq?file=https://handsontable.com/codesandbox-vm?example-dir=remix&handsontable-version=17.1preview=true
+- Nuxt: https://codesandbox.io/p/sandbox/r7qsjc?file=https://handsontable.com/codesandbox-vm?example-dir=nuxt&handsontable-version=17.1preview=true
+
+## CDN Links (jsDelivr) — latest
+- JS (full bundle): https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js
+- Base CSS: https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css
+- Theme Main: https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css
+- Theme Horizon: https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-horizon.min.css
+- Theme Classic: https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-classic.min.css
+- React wrapper: https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper/dist/react-handsontable.min.js
+- HyperFormula: https://cdn.jsdelivr.net/npm/hyperformula/dist/hyperformula.full.min.js
+
+Pin versions by adding `@17.1` after the package name (e.g., `handsontable@17.1`).
+
+## Package Registries
+- npm: https://www.npmjs.com/package/handsontable
+- NuGet: https://www.nuget.org/packages/handsontable
+
+## Community & Support
+- Developer Forum: https://forum.handsontable.com/
+- GitHub Issues: https://github.com/handsontable/handsontable/issues
+- Stack Overflow: https://stackoverflow.com/tags/handsontable
+- Commercial support: support@handsontable.com
+- Contact form: https://handsontable.com/contact
+- Blog / Release Notes: https://handsontable.com/blog/categories/release-notes
+- Download page: https://handsontable.com/download

.agent/skills/hyperformula/README.md

@@ -0,0 +1,85 @@
+# @handsontable/hyperformula-skill
+
+An agent skill for [**HyperFormula**](https://hyperformula.handsontable.com) — the headless, open-source TypeScript spreadsheet calculation engine. It gives any AI coding agent deep, task-oriented knowledge of HyperFormula so the agent can help you integrate, configure, and debug the engine faster.
+
+This package is the npm distribution of the `hyperformula` skill maintained in [`handsontable/handsontable-skills`](https://github.com/handsontable/handsontable-skills). The package version tracks the HyperFormula product version the skill targets (e.g. `3.3.0` targets HyperFormula 3.3.0).
+
+## What's in the package
+
+A self-contained skill — plain markdown, no runtime dependencies:
+
+```
+SKILL.md        ← entry point: concepts, routing, and a docs map (YAML frontmatter + body)
+references/     ← task-oriented deep-dives the agent reads on demand
+```
+
+`SKILL.md` follows the [Agent Skills](https://claude.com/blog/skills) layout (a YAML frontmatter block with `name`/`description`, followed by markdown instructions). Any agent that can load a skill — or simply read a folder of markdown instructions — can use it.
+
+## Install
+
+```bash
+npm install @handsontable/hyperformula-skill
+```
+
+The installed package lives at `node_modules/@handsontable/hyperformula-skill`. Resolve that path programmatically with:
+
+```bash
+node -p "require.resolve('@handsontable/hyperformula-skill/SKILL.md')"
+```
+
+Then make the skill available to your agent using whichever of the following matches it:
+
+### Claude Code
+
+Copy the package into a skills directory. User scope (available in every project):
+
+```bash
+cp -r node_modules/@handsontable/hyperformula-skill ~/.claude/skills/hyperformula
+```
+
+Or project scope, from your project root:
+
+```bash
+cp -r node_modules/@handsontable/hyperformula-skill .claude/skills/hyperformula
+```
+
+### Claude API
+
+Upload the package contents (`SKILL.md` + `references/`) to the [Skills API](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview).
+
+### OpenAI Codex
+
+Codex discovers [skills](https://developers.openai.com/codex/skills) as folders containing a `SKILL.md`, under `~/.agents/skills` (available in every repo) or `.agents/skills` in a repo (checked in for your team). Copy the package into one of those locations:
+
+```bash
+# User scope — available in every repo
+cp -r node_modules/@handsontable/hyperformula-skill ~/.agents/skills/hyperformula
+
+# Repo scope — from your project root
+cp -r node_modules/@handsontable/hyperformula-skill .agents/skills/hyperformula
+```
+
+Codex also follows symlinked skill folders, so you can instead link the installed package and let `npm install` keep it current:
+
+```bash
+ln -s "$PWD/node_modules/@handsontable/hyperformula-skill" ~/.agents/skills/hyperformula
+```
+
+### Any other agent
+
+Most coding agents support a skills, rules, or knowledge directory. Copy (or symlink) the package folder into it, for example:
+
+```bash
+# Replace <agent-skills-dir> with your agent's skills/knowledge directory
+cp -r node_modules/@handsontable/hyperformula-skill <agent-skills-dir>/hyperformula
+```
+
+If your agent reads a single instruction file rather than a folder, point it at `SKILL.md`; it links the files under `references/` so the agent can pull them in as needed. For RAG / vector-store setups, ingest `SKILL.md` together with every file under `references/` (the repository also publishes a pre-flattened `hyperformula-rag.md` for this case).
+
+## Other distribution formats
+
+The same skill source is also shipped as a drag-and-drop `.zip` (Cowork / Claude.ai web), a flattened `-rag.md` doc (RAG / vector stores), and a Claude Code plugin marketplace entry. See the [repository README](https://github.com/handsontable/handsontable-skills#readme) for details.
+
+## License
+
+MIT — see the [repository](https://github.com/handsontable/handsontable-skills/blob/main/LICENSE.txt). HyperFormula itself is separately licensed (GPLv3 or commercial); see the [licensing guide](https://hyperformula.handsontable.com/docs/guide/licensing.html).

.agent/skills/hyperformula/SKILL.md

@@ -0,0 +1,134 @@
+---
+name: hyperformula
+description: >
+  Use this skill when the user works with HyperFormula (HF) — a headless,
+  open-source TypeScript spreadsheet calculation engine. Use it when the user:
+  mentions HyperFormula or HF; wants to integrate Excel-like formulas into a
+  JS/TS app; evaluate formulas programmatically in a browser or Node.js;
+  simulate spreadsheet or Excel calculation behavior server-side; run
+  calculations over data parsed from XLSX files (e.g. via SheetJS) in code;
+  build a pricing engine, financial model, or what-if analysis in code; define
+  custom spreadsheet functions or named expressions outside of a UI context. Do
+  NOT use this skill for: general Excel questions unrelated to HF; general
+  Google Sheets questions; generic spreadsheet formula-syntax questions outside
+  an HF context; formulas used inside Handsontable (use the "handsontable"
+  skill instead).
+---
+
+# HyperFormula
+
+HyperFormula is a **headless, open-source TypeScript spreadsheet calculation engine** for embedding spreadsheet logic in any JavaScript/TypeScript application (browser or Node.js). ~420 built-in functions, dependency graph, undo/redo, i18n (17 languages). Dual-licensed: GPLv3 or commercial.
+
+- Docs: https://hyperformula.handsontable.com/
+- npm: https://www.npmjs.com/package/hyperformula
+- GitHub: https://github.com/handsontable/hyperformula
+
+## Where to go next
+
+Task-oriented references in `references/` (open the one that matches what the user is doing):
+
+- [`getting-started.md`](references/getting-started.md) — how to install, create an instance (`buildFromArray` / `buildFromSheets` / `buildEmpty`), and work with cell addresses. Open this for onboarding questions and first-run errors.
+- [`api-quickref.md`](references/api-quickref.md) — runnable examples for CRUD, rows/columns, sheets, exporting data, batching, named expressions, events, undo/redo, clipboard. Open this when implementing or debugging HF API calls.
+- [`custom-functions.md`](references/custom-functions.md) — extending HyperFormula via `FunctionPlugin`: minimal plugin, argument types, volatile functions, range arguments, returning arrays, error handling, aliases, localized names. Open this when adding or debugging custom spreadsheet functions.
+- [`configuration.md`](references/configuration.md) — `ConfigParams` options, Excel-compatibility preset, Google-Sheets preset, and config-related pitfalls (separator collisions, Node ICU, `precisionRounding` change in v3). Open this when tuning behavior or diagnosing locale issues.
+- [`vue3.md`](references/vue3.md) — Vue 3 integration: `markRaw` requirement, Composition API, Pinia/Vuex stores, `destroy()` on unmount. Open this when embedding HF in a Vue 3 app.
+- [`error-handling.md`](references/error-handling.md) — inspecting `CellError`, `ErrorType` enum, `getCellValueDetailedType`, common error causes (`#NAME?`, `#CYCLE!`, `#REF!`, …). Open this when a cell returns an error or you need to branch on result type.
+- [`general-pitfalls.md`](references/general-pitfalls.md) — cross-cutting gotchas: `destroy()` lifecycle, forcing literal strings, Excel-parity caveats, hard limits. Open this when results look wrong or memory grows unboundedly.
+
+Below this section is the **Documentation map** — the canonical directory of links to the official HyperFormula docs. Use it when pointing the user to authoritative material.
+
+## Documentation map
+
+All links resolve to `hyperformula.handsontable.com` unless noted.
+
+### Introduction
+- Welcome / Homepage: https://hyperformula.handsontable.com/
+- Demo: https://hyperformula.handsontable.com/docs/guide/demo.html
+
+### Overview
+- Quality (test coverage, CI): https://hyperformula.handsontable.com/docs/guide/quality.html
+- Supported browsers: https://hyperformula.handsontable.com/docs/guide/supported-browsers.html
+- Dependencies: https://hyperformula.handsontable.com/docs/guide/dependencies.html
+- Licensing (GPLv3 vs commercial): https://hyperformula.handsontable.com/docs/guide/licensing.html
+- Support: https://hyperformula.handsontable.com/docs/guide/support.html
+
+### Getting Started
+- Client-side installation: https://hyperformula.handsontable.com/docs/guide/client-side-installation.html
+- Server-side installation (Node.js): https://hyperformula.handsontable.com/docs/guide/server-side-installation.html
+- Basic usage: https://hyperformula.handsontable.com/docs/guide/basic-usage.html
+- Advanced usage: https://hyperformula.handsontable.com/docs/guide/advanced-usage.html
+- Configuration options guide: https://hyperformula.handsontable.com/docs/guide/configuration-options.html
+- License key setup: https://hyperformula.handsontable.com/docs/guide/license-key.html
+
+### Framework Integration
+- React: https://hyperformula.handsontable.com/docs/guide/integration-with-react.html
+- Vue: https://hyperformula.handsontable.com/docs/guide/integration-with-vue.html
+- Angular: https://hyperformula.handsontable.com/docs/guide/integration-with-angular.html
+- Svelte: https://hyperformula.handsontable.com/docs/guide/integration-with-svelte.html
+
+### Data Operations
+- Basic operations (CRUD): https://hyperformula.handsontable.com/docs/guide/basic-operations.html
+- Batch operations: https://hyperformula.handsontable.com/docs/guide/batch-operations.html
+- Clipboard operations: https://hyperformula.handsontable.com/docs/guide/clipboard-operations.html
+- Undo-redo: https://hyperformula.handsontable.com/docs/guide/undo-redo.html
+- Sorting data: https://hyperformula.handsontable.com/docs/guide/sorting-data.html
+
+### Formulas
+- Specifications and limits: https://hyperformula.handsontable.com/docs/guide/specifications-and-limits.html
+- Cell references (relative, absolute, mixed, cross-sheet): https://hyperformula.handsontable.com/docs/guide/cell-references.html
+- Types of values: https://hyperformula.handsontable.com/docs/guide/types-of-values.html
+- Types of errors: https://hyperformula.handsontable.com/docs/guide/types-of-errors.html
+- Types of operators: https://hyperformula.handsontable.com/docs/guide/types-of-operators.html
+- Order of precedence: https://hyperformula.handsontable.com/docs/guide/order-of-precendece.html
+- Built-in functions (full list, ~400): https://hyperformula.handsontable.com/docs/guide/built-in-functions.html
+- Volatile functions: https://hyperformula.handsontable.com/docs/guide/volatile-functions.html
+- Named expressions: https://hyperformula.handsontable.com/docs/guide/named-expressions.html
+- Array formulas / ARRAYFORMULA: https://hyperformula.handsontable.com/docs/guide/arrays.html
+
+### Internationalization
+- i18n features (17 languages): https://hyperformula.handsontable.com/docs/guide/i18n-features.html
+- Localizing function names: https://hyperformula.handsontable.com/docs/guide/localizing-functions.html
+- Date and time handling: https://hyperformula.handsontable.com/docs/guide/date-and-time-handling.html
+
+### Compatibility
+- Microsoft Excel compatibility: https://hyperformula.handsontable.com/docs/guide/compatibility-with-microsoft-excel.html
+- Google Sheets compatibility: https://hyperformula.handsontable.com/docs/guide/compatibility-with-google-sheets.html
+- Runtime differences (Excel & Sheets): https://hyperformula.handsontable.com/docs/guide/list-of-differences.html
+
+### Advanced Topics
+- Key concepts (AST, dependency graph, evaluation): https://hyperformula.handsontable.com/docs/guide/key-concepts.html
+- Dependency graph: https://hyperformula.handsontable.com/docs/guide/dependency-graph.html
+- Building & testing from source: https://hyperformula.handsontable.com/docs/guide/building.html
+- Custom functions (FunctionPlugin): https://hyperformula.handsontable.com/docs/guide/custom-functions.html
+- Performance: https://hyperformula.handsontable.com/docs/guide/performance.html
+- Known limitations: https://hyperformula.handsontable.com/docs/guide/known-limitations.html
+- File import: https://hyperformula.handsontable.com/docs/guide/file-import.html
+
+### Upgrade & Migration
+- Release notes / Changelog: https://hyperformula.handsontable.com/docs/guide/release-notes.html
+- 0.6 → 1.0 migration: https://hyperformula.handsontable.com/docs/guide/migration-from-0.6-to-1.0.html
+- 1.x → 2.0 migration: https://hyperformula.handsontable.com/docs/guide/migration-from-1.x-to-2.0.html
+- 2.x → 3.0 migration: https://hyperformula.handsontable.com/docs/guide/migration-from-2.x-to-3.0.html
+
+### API Reference
+- API overview: https://hyperformula.handsontable.com/docs/api/
+- HyperFormula class (all methods): https://hyperformula.handsontable.com/docs/api/classes/hyperformula.html
+- ConfigParams interface (all options): https://hyperformula.handsontable.com/docs/api/interfaces/configparams.html
+- Listeners interface (all events): https://hyperformula.handsontable.com/docs/api/interfaces/listeners.html
+
+### npm
+- npm page: https://www.npmjs.com/package/hyperformula
+
+### Community & Support
+- GitHub repo: https://github.com/handsontable/hyperformula
+- GitHub Issues: https://github.com/handsontable/hyperformula/issues
+- GitHub Discussions: https://github.com/handsontable/hyperformula/discussions
+- Developer Forum: https://forum.handsontable.com/
+- Commercial support: support@handsontable.com
+- Sales (commercial license): sales@handsontable.com
+- Contact form: https://handsontable.com/contact
+
+---
+
+> **Last updated: 2026-05-20 · Aligned with HyperFormula 3.3.0.**
+> If the user is on a newer release, confirm API shape against the latest docs (see the **Release notes** link above) before relying on this file.

.agent/skills/hyperformula/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@handsontable/hyperformula-skill",
+  "version": "3.3.0",
+  "description": "Agent skill for HyperFormula — the headless, open-source TypeScript spreadsheet calculation engine. Teaches AI coding agents how to integrate, configure, and debug HyperFormula.",
+  "license": "MIT",
+  "author": "Handsontable <hello@handsontable.com> (https://handsontable.com)",
+  "homepage": "https://github.com/handsontable/handsontable-skills#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/handsontable/handsontable-skills.git",
+    "directory": "skills/hyperformula"
+  },
+  "bugs": {
+    "url": "https://github.com/handsontable/handsontable-skills/issues"
+  },
+  "keywords": [
+    "agent-skill",
+    "claude-skill",
+    "claude",
+    "anthropic",
+    "ai",
+    "hyperformula",
+    "spreadsheet",
+    "formula-engine",
+    "handsontable"
+  ],
+  "files": [
+    "SKILL.md",
+    "references/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

.agent/skills/hyperformula/references/api-quickref.md

@@ -0,0 +1,147 @@
+# API Quick Reference
+
+Runnable examples for the most-used HyperFormula APIs. Authoritative docs:
+- Basic operations: https://hyperformula.handsontable.com/docs/guide/basic-operations.html
+- Batch operations: https://hyperformula.handsontable.com/docs/guide/batch-operations.html
+- Named expressions: https://hyperformula.handsontable.com/docs/guide/named-expressions.html
+- Clipboard operations: https://hyperformula.handsontable.com/docs/guide/clipboard-operations.html
+- Undo-redo: https://hyperformula.handsontable.com/docs/guide/undo-redo.html
+- Sorting data: https://hyperformula.handsontable.com/docs/guide/sorting-data.html
+- HyperFormula class (all methods): https://hyperformula.handsontable.com/docs/api/classes/hyperformula.html
+- Listeners (all events): https://hyperformula.handsontable.com/docs/api/interfaces/listeners.html
+
+## CRUD
+
+```ts
+// Write: string, number, or formula
+hf.setCellContents({ sheet: 0, col: 0, row: 0 }, 'Hello');
+hf.setCellContents({ sheet: 0, col: 1, row: 0 }, '=A1 & " World"');
+
+// Read
+hf.getCellValue({ sheet: 0, col: 1, row: 0 });    // computed result
+hf.getCellFormula({ sheet: 0, col: 1, row: 0 });  // '=A1 & " World"'
+hf.getCellType({ sheet: 0, col: 0, row: 0 });     // CellType.FORMULA | VALUE | EMPTY
+```
+
+## Rows and columns
+
+Second arg is `[startIndex, count]`, not a list of indexes.
+
+```ts
+hf.addRows(sheetId, [rowIndex, numberOfRows]);
+hf.removeRows(sheetId, [rowIndex, numberOfRows]);
+hf.addColumns(sheetId, [colIndex, numberOfColumns]);
+hf.removeColumns(sheetId, [colIndex, numberOfColumns]);
+```
+
+## Sheets
+
+```ts
+hf.addSheet('NewSheet');
+hf.removeSheet(sheetId);
+hf.renameSheet(sheetId, 'BetterName');
+hf.countSheets();
+hf.getSheetName(sheetId);
+hf.getSheetId('SheetName');
+hf.getSheetDimensions(sheetId); // → { width, height }
+```
+
+## Export data
+
+```ts
+hf.getSheetValues(sheetId);        // computed values as 2D array
+hf.getSheetSerialized(sheetId);    // formulas/raw values as 2D array
+hf.getAllSheetsValues();            // { SheetName: values[][] }
+hf.getAllSheetsSerialized();        // { SheetName: formulas[][] }
+```
+
+## Batch operations
+
+Every `setCellContents` call triggers a full dependency-graph recalculation. Always batch when writing more than one cell.
+
+```ts
+// Preferred: batch() — returns ExportedChange[]
+const changes = hf.batch(() => {
+  hf.setCellContents({ sheet: 0, col: 0, row: 0 }, '100');
+  hf.setCellContents({ sheet: 0, col: 0, row: 1 }, '200');
+  hf.addRows(0, [2, 1]);
+});
+// `changes` contains all cells that were recalculated.
+
+// For bulk imports (value writes only):
+hf.suspendEvaluation();
+// ... hundreds of setCellContents calls ...
+hf.resumeEvaluation();  // single recalc
+
+// PITFALL: structural ops (addRows/moveRows/...) during suspendEvaluation
+// have degraded performance. Use batch() when mixing structural + value writes.
+```
+
+## Sorting
+
+`setRowOrder` takes a **permutation array**, not a comparator. Compute the new index sequence externally, then pass it in.
+
+```ts
+// Sort rows by the value in column 0
+const rowCount = hf.getSheetDimensions(0).height;
+const indexes = Array.from({ length: rowCount }, (_, i) => i);
+indexes.sort((a, b) => {
+  const va = hf.getCellValue({ sheet: 0, col: 0, row: a }) as number;
+  const vb = hf.getCellValue({ sheet: 0, col: 0, row: b }) as number;
+  return va - vb;
+});
+hf.setRowOrder(0, indexes); // e.g. [2, 0, 1, 3]
+```
+
+## Named expressions
+
+Reusable names for values or formulas. Can be global or scoped to a sheet (local shadows global).
+
+```ts
+hf.addNamedExpression('TAX_RATE', '0.21');
+hf.addNamedExpression('TOTAL_REVENUE', '=SUM(Revenue!A:A)');
+
+hf.setCellContents({ sheet: 0, col: 0, row: 0 }, '=1000 * TAX_RATE');
+
+hf.listNamedExpressions(); // all registered names
+```
+
+## Custom functions
+
+See [custom-functions.md](custom-functions.md) — `FunctionPlugin`, argument types, volatile functions, range arguments, returning arrays, error handling, aliases, localized names.
+
+## Events
+
+Subscribe via `.on()` on the instance. Full list: https://hyperformula.handsontable.com/docs/api/interfaces/listeners.html
+
+```ts
+hf.on('valuesUpdated', (changes) => {
+  changes.forEach((c) => console.log(c.address, c.newValue));
+});
+
+hf.on('sheetAdded', (addedSheetName) => { /* ... */ });
+hf.on('sheetRemoved', (removedSheetName, removedSheetData) => { /* ... */ });
+hf.on('sheetRenamed', (oldName, newName) => { /* ... */ });
+```
+
+## Undo / redo
+
+```ts
+hf.undo();
+hf.redo();
+hf.isThereSomethingToUndo();
+hf.isThereSomethingToRedo();
+hf.clearUndoStack();
+```
+
+Configure depth via `undoLimit` in `ConfigParams` (see [configuration.md](configuration.md)).
+
+## Clipboard
+
+```ts
+hf.copy({ start: { sheet: 0, col: 0, row: 0 }, end: { sheet: 0, col: 1, row: 1 } });
+hf.cut ({ start: { sheet: 0, col: 0, row: 0 }, end: { sheet: 0, col: 1, row: 1 } });
+hf.paste({ sheet: 0, col: 5, row: 5 });
+hf.isClipboardEmpty();
+hf.clearClipboard();
+```

.agent/skills/hyperformula/references/configuration.md

@@ -0,0 +1,92 @@
+# Configuration
+
+`ConfigParams` + compatibility presets + config-specific pitfalls. Authoritative docs:
+- Configuration options guide: https://hyperformula.handsontable.com/docs/guide/configuration-options.html
+- ConfigParams (all options): https://hyperformula.handsontable.com/docs/api/interfaces/configparams.html
+- Excel compatibility: https://hyperformula.handsontable.com/docs/guide/compatibility-with-microsoft-excel.html
+- Google Sheets compatibility: https://hyperformula.handsontable.com/docs/guide/compatibility-with-google-sheets.html
+
+## ConfigParams highlights
+
+Pass as the second argument to any factory method.
+
+```ts
+const hf = HyperFormula.buildEmpty({
+  licenseKey: 'gpl-v3',           // required — 'gpl-v3' for open source
+  precisionRounding: 10,          // decimal rounding precision (default 10; was 14 before v3)
+  functionArgSeparator: ',',      // separator between function arguments
+  dateFormats: ['DD/MM/YYYY', 'DD-MM-YYYY'],
+  nullDate: { year: 1900, month: 1, day: 1 },
+  leapYear1900: false,            // Excel bug compat: treat 1900 as leap year
+  maxRows: 40000,                 // max rows per sheet (default 40000)
+  maxColumns: 18278,              // max columns per sheet (default 18278 = 'ZZZ')
+  undoLimit: 20,                  // undo history depth
+  maxPendingLazyTransformations: 1000, // v3.3+ — cap accumulated lazy transformations before cleanup
+});
+```
+
+## Excel compatibility preset
+
+```ts
+const hf = HyperFormula.buildEmpty({
+  licenseKey: 'gpl-v3',
+  useArrayArithmetic: true,
+  useWildcards: true,
+  evaluateNullToZero: true,
+  leapYear1900: true,     // Excel's intentional 1900 leap-year bug
+  ignoreWhiteSpace: 'any',
+  caseSensitive: false,
+  accentSensitive: true,
+});
+```
+
+## Google Sheets compatibility preset
+
+Defaults already match Google Sheets behavior (`leapYear1900: false`, `useArrayArithmetic: false`).
+
+```ts
+const hf = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' });
+```
+
+## Config-specific pitfalls
+
+### Vue 3
+
+Vue 3 requires wrapping the instance with `markRaw` — see [vue3.md](vue3.md) for the full integration guide (React / Angular / Svelte need no special handling).
+
+### `functionArgSeparator` vs `thousandSeparator` collision
+
+These two options **cannot share a character**. European locales that use `,` as thousand separator must change the argument separator:
+
+```ts
+const hf = HyperFormula.buildEmpty({
+  licenseKey: 'gpl-v3',
+  thousandSeparator: ',',
+  decimalSeparator: '.',
+  functionArgSeparator: ';',  // must differ from thousandSeparator
+});
+```
+
+### Node.js must have full ICU
+
+String comparisons (used in `MATCH`, `VLOOKUP`, sorting) can silently produce wrong results on Node.js < 13 or builds without full ICU. Verify at startup:
+
+```ts
+// Must report 'full' (or a detailed ICU version), not 'small'.
+console.log(process.versions.icu);
+```
+
+### Tuning `maxPendingLazyTransformations` (v3.3+)
+
+HyperFormula defers some structural transformations (row/column insertions, moves) and applies them lazily. In long-lived instances with heavy mutation throughput — bulk imports, frequent undo/redo, scripted batch edits — the pending queue can grow before cleanup. v3.3 fixed the unbounded-growth leak; this option lets you cap the queue explicitly. Lower values trade memory for more frequent flush work; the default is suitable for typical UI workloads.
+
+### `precisionRounding` default changed in v3
+
+Before v3 the default was `14`. It is now `10`. Calculations relying on the old precision need an explicit override:
+
+```ts
+const hf = HyperFormula.buildEmpty({
+  licenseKey: 'gpl-v3',
+  precisionRounding: 14,  // pre-v3 behavior
+});
+```

.agent/skills/hyperformula/references/custom-functions.md

@@ -0,0 +1,174 @@
+# Custom Functions
+
+Extend HyperFormula with your own functions via `FunctionPlugin`. Authoritative doc:
+- Custom functions guide: https://hyperformula.handsontable.com/docs/guide/custom-functions.html
+
+## Minimal plugin
+
+Register **before** creating any instance — functions registered after `buildFromArray` / `buildFromSheets` / `buildEmpty` won't be available.
+
+```ts
+import { HyperFormula, FunctionPlugin, FunctionArgumentType } from 'hyperformula';
+
+class MyPlugin extends FunctionPlugin {
+  greet(ast, state) {
+    return this.runFunction(
+      ast.args,
+      state,
+      this.metadata('GREET'),
+      (name) => `Hello, ${name}!`
+    );
+  }
+}
+
+MyPlugin.implementedFunctions = {
+  GREET: {
+    method: 'greet',
+    parameters: [{ argumentType: FunctionArgumentType.STRING }],
+  },
+};
+
+const translations = { enGB: { GREET: 'GREET' }, enUS: { GREET: 'GREET' } };
+
+// PITFALL: registration MUST happen before any instance is built.
+HyperFormula.registerFunctionPlugin(MyPlugin, translations);
+
+const hf = HyperFormula.buildFromArray(
+  [['World', '=GREET(A1)']],
+  { licenseKey: 'gpl-v3' }
+);
+console.log(hf.getCellValue({ sheet: 0, col: 1, row: 0 })); // "Hello, World!"
+```
+
+## Volatile functions
+
+Mark a function as volatile so it recalculates on every change (like `RAND` or `NOW`). Volatile functions are expensive in large sheets — use sparingly.
+
+```ts
+MyPlugin.implementedFunctions = {
+  RAND_ID: {
+    method: 'randId',
+    parameters: [],
+    isVolatile: true,
+  },
+};
+```
+
+## Argument types
+
+```ts
+import { FunctionArgumentType } from 'hyperformula';
+
+// FunctionArgumentType.NUMBER
+// FunctionArgumentType.STRING
+// FunctionArgumentType.BOOLEAN
+// FunctionArgumentType.NOERROR
+// FunctionArgumentType.SCALAR
+// FunctionArgumentType.RANGE       // accepts a cell range
+// FunctionArgumentType.ANY
+```
+
+Use `optionalArg: true`, `defaultValue`, and `minValue` / `maxValue` to validate arguments declaratively:
+
+```ts
+MyPlugin.implementedFunctions = {
+  CLAMP: {
+    method: 'clamp',
+    parameters: [
+      { argumentType: FunctionArgumentType.NUMBER },
+      { argumentType: FunctionArgumentType.NUMBER, optionalArg: true, defaultValue: 0 },
+      { argumentType: FunctionArgumentType.NUMBER, optionalArg: true, defaultValue: 100 },
+    ],
+  },
+};
+```
+
+## Range arguments
+
+Use `RANGE` argument type when the function takes a cell area. The callback receives the range as a 2D array.
+
+```ts
+class SumPositivesPlugin extends FunctionPlugin {
+  sumPositives(ast, state) {
+    return this.runFunction(
+      ast.args,
+      state,
+      this.metadata('SUM_POSITIVES'),
+      (range) => {
+        let total = 0;
+        for (const row of range.data) {
+          for (const v of row) if (typeof v === 'number' && v > 0) total += v;
+        }
+        return total;
+      }
+    );
+  }
+}
+
+SumPositivesPlugin.implementedFunctions = {
+  SUM_POSITIVES: {
+    method: 'sumPositives',
+    parameters: [{ argumentType: FunctionArgumentType.RANGE }],
+  },
+};
+```
+
+## Returning arrays
+
+Custom functions can return 2D arrays. **PITFALL:** result arrays don't auto-resize when upstream dependencies change — the footprint is fixed at first evaluation.
+
+```ts
+class SplitPlugin extends FunctionPlugin {
+  splitToRow(ast, state) {
+    return this.runFunction(
+      ast.args,
+      state,
+      this.metadata('SPLIT_ROW'),
+      (text, sep) => [text.split(sep)]  // 2D array: one row, N cols
+    );
+  }
+}
+```
+
+## Error handling
+
+Return a `CellError` to signal a formula error:
+
+```ts
+import { CellError, ErrorType } from 'hyperformula';
+
+class DividePlugin extends FunctionPlugin {
+  safeDivide(ast, state) {
+    return this.runFunction(
+      ast.args,
+      state,
+      this.metadata('SAFE_DIVIDE'),
+      (a, b) => (b === 0 ? new CellError(ErrorType.DIV_BY_ZERO) : a / b)
+    );
+  }
+}
+```
+
+## Aliases and localized names
+
+Expose one method under multiple function names, or localize:
+
+```ts
+MyPlugin.aliases = {
+  HELLO: 'GREET', // calling =HELLO(x) runs the greet() method
+};
+
+const translations = {
+  enGB: { GREET: 'GREET' },
+  plPL: { GREET: 'POWITAJ' }, // =POWITAJ("Świat") in Polish
+};
+HyperFormula.registerFunctionPlugin(MyPlugin, translations);
+```
+
+## Unregister / introspect
+
+```ts
+HyperFormula.unregisterFunctionPlugin(MyPlugin);
+HyperFormula.unregisterFunction('GREET');
+HyperFormula.getRegisteredFunctionNames('enGB');
+```

.agent/skills/hyperformula/references/error-handling.md

@@ -0,0 +1,69 @@
+# Error Handling
+
+Inspect cell values that may be errors, tell error types apart, and check value shape. Authoritative docs:
+- Types of errors: https://hyperformula.handsontable.com/docs/guide/types-of-errors.html
+- Types of values: https://hyperformula.handsontable.com/docs/guide/types-of-values.html
+
+## Always check `CellError` before using a result
+
+Cell values can be errors (`#DIV/0!`, `#VALUE!`, `#REF!`, etc.). Always test before using a result.
+
+```ts
+import { CellError, ErrorType } from 'hyperformula';
+
+const value = hf.getCellValue({ sheet: 0, col: 0, row: 0 });
+
+if (value instanceof CellError) {
+  // ErrorType enum: DIV_BY_ZERO, VALUE, REF, NAME, NUM, NA, CYCLE, ERROR
+  switch (value.type) {
+    case ErrorType.CYCLE:
+      console.log('Circular reference');
+      break;
+    case ErrorType.NAME:
+      // Usually: function not registered (check plugin registration or i18n language)
+      console.log('Unknown name:', value.message);
+      break;
+    default:
+      console.log('Error:', value.type, value.message);
+  }
+} else {
+  console.log('Value:', value);
+}
+```
+
+## `#CYCLE!` is HyperFormula-specific
+
+Standard spreadsheet apps report cycles differently. HyperFormula's `IF` also reports cycles for all branches, even unreachable ones — this can produce `#CYCLE!` in formulas that Excel or Sheets would evaluate.
+
+## Inspect value shape without catching errors
+
+```ts
+import { CellValueDetailedType } from 'hyperformula';
+
+hf.getCellValueDetailedType({ sheet: 0, col: 0, row: 0 });
+// → CellValueDetailedType.NUMBER | STRING | BOOLEAN | ERROR | EMPTY | ...
+```
+
+Use the detailed type when you need to distinguish e.g. number vs empty without touching the value.
+
+## Returning errors from custom functions
+
+Custom `FunctionPlugin` methods can return a `CellError` to surface a formula error. See [custom-functions.md](custom-functions.md) for the full pattern.
+
+```ts
+import { CellError, ErrorType } from 'hyperformula';
+
+return new CellError(ErrorType.DIV_BY_ZERO);
+```
+
+## Common causes
+
+| Error | Common cause |
+|---|---|
+| `#NAME?` | Function not registered (check `registerFunctionPlugin` order or `language` config) |
+| `#CYCLE!` | Circular reference — or an `IF` branch that *could* produce one |
+| `#REF!` | Deleted row/column broke a formula reference |
+| `#VALUE!` | Type mismatch — e.g. passing a string where a number is expected |
+| `#DIV/0!` | Division by zero, including empty cells coerced to 0 |
+| `#NUM!` | Out-of-range numeric result (e.g. `SQRT(-1)`) |
+| `#N/A` | Lookup miss (`MATCH`, `VLOOKUP`) or propagated from an upstream `#N/A` |

.agent/skills/hyperformula/references/general-pitfalls.md

@@ -0,0 +1,48 @@
+# General Pitfalls
+
+Cross-cutting gotchas that aren't tied to a specific API or config option. Authoritative docs:
+- Known limitations: https://hyperformula.handsontable.com/docs/guide/known-limitations.html
+- Built-in functions (full list): https://hyperformula.handsontable.com/docs/guide/built-in-functions.html
+- Runtime differences vs Excel/Sheets: https://hyperformula.handsontable.com/docs/guide/list-of-differences.html
+
+## Error handling
+
+See [error-handling.md](error-handling.md) — checking `CellError`, `ErrorType` enum, `getCellValueDetailedType`, common error causes.
+
+## Always call `destroy()` in long-running apps
+
+HyperFormula maintains internal data structures (dependency graph, address mapping) that are **not** garbage-collected until `destroy()` is called. Leaking instances in servers or SPAs accumulates memory.
+
+```ts
+hf.destroy();
+// After destroy() the instance is unusable — create a new one if needed.
+```
+
+v3.3 fixed two longstanding leak sources inside live instances — pending lazy transformations and undo/redo history were not being trimmed. If you maintain very long-lived instances with heavy mutation throughput, also see `maxPendingLazyTransformations` in [configuration.md](configuration.md) to bound the lazy-transformation queue. `destroy()` is still mandatory at teardown.
+
+## Force a string that looks like a formula
+
+Prefix with `'` (apostrophe) to store the literal text instead of evaluating.
+
+```ts
+// Stored as the literal string "=SUM(1,2)", not a formula:
+hf.setCellContents({ sheet: 0, col: 0, row: 0 }, "'=SUM(1,2)");
+```
+
+## Don't assume Excel parity
+
+~68% of Excel functions are covered. Runtime differences exist even for implemented functions. Before relying on behavior, check:
+
+- Full built-in list: https://hyperformula.handsontable.com/docs/guide/built-in-functions.html
+- Runtime differences: https://hyperformula.handsontable.com/docs/guide/list-of-differences.html
+
+## `licenseKey` is always required
+
+Every factory method (`buildFromArray`, `buildFromSheets`, `buildEmpty`) requires `licenseKey`. Use `'gpl-v3'` for open-source use or your commercial key.
+
+## Known hard limits
+
+- **Single workbook per instance** — no multi-workbook support.
+- No 3D references, dynamic arrays, async functions, structured references ("Tables"), or relative named expressions.
+- `IF` reports cycles for all branches, even unreachable ones.
+- Custom function result arrays don't auto-resize when dependencies change.

.agent/skills/hyperformula/references/getting-started.md

@@ -0,0 +1,82 @@
+# Getting Started
+
+Install, create an instance, read/write cells. Authoritative docs:
+- Client-side install: https://hyperformula.handsontable.com/docs/guide/client-side-installation.html
+- Server-side install: https://hyperformula.handsontable.com/docs/guide/server-side-installation.html
+- Basic usage: https://hyperformula.handsontable.com/docs/guide/basic-usage.html
+
+## Install
+
+### npm
+
+```bash
+npm install hyperformula
+```
+
+### CDN (jsDelivr, pinned version)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/hyperformula@3.2.0/dist/hyperformula.full.min.js"></script>
+```
+
+### Node.js
+
+Same npm install. Requires Node.js 13+ with full ICU for locale-aware string comparison.
+
+## Create an instance
+
+Every factory method requires `licenseKey`. Use `'gpl-v3'` for open-source use or your commercial key.
+
+### `buildFromArray` — single sheet from a 2D array
+
+```ts
+import { HyperFormula } from 'hyperformula';
+
+const hf = HyperFormula.buildFromArray(
+  [
+    ['10', '20', '=SUM(A1:B1)'],
+    ['30', '40', '=SUM(A2:B2)'],
+  ],
+  { licenseKey: 'gpl-v3' }
+);
+
+console.log(hf.getCellValue({ sheet: 0, col: 2, row: 0 })); // 30
+```
+
+### `buildFromSheets` — multi-sheet workbook
+
+```ts
+const hf = HyperFormula.buildFromSheets(
+  {
+    Revenue: [['100', '200', '=SUM(A1:B1)']],
+    Expenses: [['50', '=Revenue!C1 - A1']],
+  },
+  { licenseKey: 'gpl-v3' }
+);
+```
+
+Cross-sheet references use `SheetName!CellRef` syntax.
+
+### `buildEmpty` — start empty, add sheets later
+
+```ts
+const hf = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' });
+const sheetName = hf.addSheet('Data');
+const sheetId = hf.getSheetId(sheetName);
+
+hf.setCellContents({ sheet: sheetId, col: 0, row: 0 }, [
+  ['10', '20', '=SUM(A1:B1)'],
+]);
+```
+
+## Cell addresses
+
+All addresses use zero-indexed `{ sheet, col, row }`. Convert to/from A1 notation with built-in helpers:
+
+```ts
+hf.simpleCellAddressFromString('B3', 0);
+// → { sheet: 0, col: 1, row: 2 }
+
+hf.simpleCellAddressToString({ sheet: 0, col: 1, row: 2 }, 0);
+// → 'B3'
+```

.agent/skills/hyperformula/references/vue3.md

@@ -0,0 +1,72 @@
+# Vue 3
+
+HyperFormula + Vue 3 integration. Authoritative doc:
+- Vue integration guide: https://hyperformula.handsontable.com/docs/guide/integration-with-vue.html
+
+## Always wrap the instance with `markRaw`
+
+Vue 3's Composition API wraps objects in a reactive Proxy that intercepts property access and **corrupts HyperFormula's internal state**, causing silent data corruption or crashes. React, Angular, and Svelte need no special handling.
+
+```ts
+import { markRaw } from 'vue';
+import { HyperFormula } from 'hyperformula';
+
+const hf = markRaw(
+  HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' })
+);
+```
+
+Use the same wrapper no matter where the instance is held — `ref`, `reactive`, component state, a store (Pinia/Vuex), or a composable. If the raw HyperFormula instance ever reaches Vue's reactivity system, it must be marked.
+
+## Composition API example
+
+```ts
+import { onBeforeUnmount, ref } from 'vue';
+import { markRaw } from 'vue';
+import { HyperFormula } from 'hyperformula';
+
+export function useHyperFormula() {
+  const hf = markRaw(
+    HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' })
+  );
+
+  // Free internal data structures when the component unmounts.
+  onBeforeUnmount(() => hf.destroy());
+
+  const result = ref<unknown>(null);
+
+  function evaluate(formula: string) {
+    hf.setCellContents({ sheet: 0, col: 0, row: 0 }, formula);
+    result.value = hf.getCellValue({ sheet: 0, col: 0, row: 0 });
+  }
+
+  return { evaluate, result };
+}
+```
+
+## Pinia / Vuex store
+
+```ts
+import { defineStore } from 'pinia';
+import { markRaw } from 'vue';
+import { HyperFormula } from 'hyperformula';
+
+export const useCalcStore = defineStore('calc', {
+  state: () => ({
+    hf: markRaw(
+      HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' })
+    ),
+  }),
+});
+```
+
+## Cleanup
+
+HyperFormula's internal graph is **not** garbage-collected until `destroy()` is called. In SPAs this accumulates memory over time.
+
+```ts
+import { onBeforeUnmount } from 'vue';
+
+onBeforeUnmount(() => hf.destroy());
+// After destroy() the instance is unusable — create a new one if needed.
+```

.gitea/workflows/build.yaml

@@ -2,39 +2,53 @@ name: Build
 run-name: Running Lint Check and Licence checker on Pull Request
 on: [pull_request]
 
+env:
+  NODE_VERSION: '24.15.0'
+
 jobs:
   Build-and-ng-test:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Google Chrome
         run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
           apt-get update
-          apt-get install -y google-chrome-stable xvfb
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
 
       - name: Write .npmrc file
-        run: echo "$NPMRC" > client/.npmrc
+        run: echo "$NPMRC" >> client/.npmrc
         shell: bash
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - name: Lint check
-        run: npm run lint:check
-
       - name: Install dependencies
         run: |
           cd client
           # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
+      - name: Check audit
+        # Audit should fail and stop the CI on any vulnerability in root and sas, and on low+ in client
+        run: |
+          npm audit --omit=dev
+          cd ./sas
+          npm audit --omit=dev
+          cd ../client
+          npm audit --omit=dev
+
+      - name: Lint check
+        run: npm run lint:check
+
       - name: Licence checker
         run: |
           cd client
@@ -52,26 +66,33 @@ jobs:
 
   Build-and-test-development:
     runs-on: ubuntu-latest
-    needs: Build-production-and-ng-test
+    needs: Build-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
           touch client/.npmrc
           echo '${{ secrets.NPMRC}}' > client/.npmrc
 
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -86,17 +107,18 @@ jobs:
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready
 
       - name: Deploy mocked services
         run: |
@@ -106,12 +128,8 @@ jobs:
           sasjs cbd -t server-ci
           # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
 
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
       - name: Prepare and run frontend and cypress
+        timeout-minutes: 35
         run: |
           cd ./client
           mv ./cypress.env.example.json ./cypress.env.json
@@ -126,11 +144,14 @@ jobs:
           replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
           cat ./cypress.config.ts
           # Start frontend and run cypress
-          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          # timeout 1800: SIGTERM after 30 min so Cypress can flush video/screenshots
+          # before the outer timeout-minutes hard-kills the step (avoids silent multi-hour hangs)
+          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && timeout 1800 npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts,cypress/e2e/viewer-labels.cy.ts,cypress/e2e/viewbox.cy.ts"
 
       - name: Zip Cypress videos
         if: always()
         run: |
+          mkdir -p ./client/cypress/videos
           zip -r cypress-videos ./client/cypress/videos
 
       - name: Add cypress videos artifacts

.gitea/workflows/lighthouse.yaml

@@ -2,38 +2,31 @@ name: Lighthouse Checks
 run-name: Running Lighthouse Performance and Accessibility Checks on Pull Request
 on: [pull_request]
 
+env:
+  NODE_VERSION: '24.15.0'
+
 jobs:
   lighthouse:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [24.5.0]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Google Chrome
         run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
           apt-get update
-          apt-get install -y google-chrome-stable xvfb
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
 
-      - name: Install pm2 for process management
-        run: npm i -g pm2
+      - name: Install global packages
+        run: npm i -g pm2 @sasjs/cli wait-on
 
-      - name: Install @sasjs/cli
-        run: npm i -g @sasjs/cli
-
-      - name: Install wait-on globally
-        run: npm install -g wait-on
-
-      - name: Create .env file for sasjs/server
+      - name: Setup and start SASjs server
         run: |
           touch .env
           echo RUN_TIMES=js >> .env
@@ -41,15 +34,9 @@ jobs:
           echo CORS=enable >> .env
           echo WHITELIST=http://localhost:4200 >> .env
           cat .env
-
-      - name: Download sasjs/server package from github using curl
-        run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-
-      - name: Unzip downloaded package
-        run: unzip linux.zip
-
-      - name: Run sasjs server
-        run: pm2 start api-linux --wait-ready
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          pm2 start api-linux --wait-ready
 
       - name: Write .npmrc file
         run: echo "$NPMRC" > client/.npmrc
@@ -61,7 +48,10 @@ jobs:
         run: |
           cd client
           # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
           npm ci
           npm install -g replace-in-files-cli
 

.gitea/workflows/release.yaml

@@ -5,15 +5,20 @@ on:
     branches:
       - main
 
+env:
+  NODE_VERSION: '24.5.0'
+
 jobs:
   Build-production-and-ng-test:
     runs-on: ubuntu-latest
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
@@ -24,8 +29,7 @@ jobs:
         run: |
           apt-get update
           wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-          apt install -y ./google-chrome*.deb;
-          export CHROME_BIN=/usr/bin/google-chrome
+          apt install -y ./google-chrome*.deb
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -41,13 +45,13 @@ jobs:
           npm ci
 
       - name: Check audit
-        # Audit should fail and stop the CI if critical vulnerability found
+        # Audit should fail and stop the CI on any vulnerability in root and sas, and on low+ in client
         run: |
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
           cd ./sas
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
           cd ../client
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
 
       - name: Angular Tests
         run: |
@@ -63,25 +67,32 @@ jobs:
   Build-and-test-development:
     runs-on: ubuntu-latest
     needs: Build-production-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
           touch client/.npmrc
           echo '${{ secrets.NPMRC}}' > client/.npmrc
 
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -96,17 +107,18 @@ jobs:
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready
 
       - name: Deploy mocked services
         run: |
@@ -116,11 +128,6 @@ jobs:
           sasjs cbd -t server-ci
           # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
 
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
       - name: Prepare and run frontend and cypress
         run: |
           cd ./client
@@ -136,11 +143,12 @@ jobs:
           replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
           cat ./cypress.config.ts
           # Start frontend and run cypress
-          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts,cypress/e2e/viewer-labels.cy.ts"
 
       - name: Zip Cypress videos
         if: always()
         run: |
+          mkdir -p ./client/cypress/videos
           zip -r cypress-videos ./client/cypress/videos
 
       - name: Add cypress videos artifacts
@@ -153,12 +161,22 @@ jobs:
   release:
     runs-on: ubuntu-latest
     needs: [Build-production-and-ng-test, Build-and-test-development]
+    # The semantic-release step below uses the per-job token injected by Gitea
+    # Actions (secrets.GITEA_TOKEN). That token is scoped to THIS repository
+    # and its permissions are derived from this block.
+    #   contents: write -> push CHANGELOG.md / package.json commit + tag, and
+    #                      create the Release via the Gitea API.
+    # The TSDOC_TOKEN and CODE_DATACONTROLLER_IO secrets continue to be used
+    # because they target *different* servers (webdoc.datacontroller.io and
+    # code.datacontroller.io), not the Gitea API.
+    permissions:
+      contents: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
@@ -168,17 +186,11 @@ jobs:
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - name: Install packages
+      - name: Install system packages
         run: |
           apt-get update
-          apt-get install zip -y
-          # sasjs cli is used to compile & build the SAS services
+          apt-get install -y zip jq doxygen
           npm i -g @sasjs/cli
-          # jq is used to parse the release JSON
-          apt-get install jq -y
-          # doxygen is used for the SASJS docs
-          apt-get update
-          apt-get install doxygen -y
 
       - name: Frontend Preliminary Build
         description: We want to prevent creating empty release if frontend fails
@@ -191,12 +203,41 @@ jobs:
           npm run build
 
       - name: Create Empty Release (assets are posted later)
+        env:
+          # Use the ephemeral per-job token injected by Gitea Actions instead
+          # of a manually-managed PAT. This token always reports push=true on
+          # its own repo via the Gitea API, which is what the
+          # @saithodev/semantic-release-gitea verifyConditions step checks.
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+          GITEA_URL: ${{ gitea.server_url }}
         run: |
+          set -euo pipefail
           npm i
           npm i -g semantic-release
-          # We do a semantic-release DRY RUN to make the job fail if there are no changes to release
-          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.datacontroller.io semantic-release --dry-run | grep -q "There are no relevant changes, so no new version is released." && exit 1
-          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.datacontroller.io semantic-release
+
+          # We do a semantic-release DRY RUN to make the job fail if there are
+          # no changes to release. The previous implementation piped --dry-run
+          # into `grep`, which swallowed semantic-release's non-zero exit codes
+          # (e.g. auth/verifyConditions failures) — the real error then only
+          # surfaced from the second invocation. Capture output and inspect it
+          # so authentication failures fail the step cleanly with context.
+          echo "::group::semantic-release --dry-run"
+          DRY_EXIT=0
+          DRY_OUTPUT=$(semantic-release --dry-run 2>&1) || DRY_EXIT=$?
+          echo "$DRY_OUTPUT"
+          echo "::endgroup::"
+
+          if [ "$DRY_EXIT" -ne 0 ]; then
+            echo "::error::semantic-release dry-run failed (exit $DRY_EXIT). See log above; common cause is the Gitea token lacking push permission on this repo (verifyConditions of @saithodev/semantic-release-gitea)."
+            exit "$DRY_EXIT"
+          fi
+
+          if echo "$DRY_OUTPUT" | grep -q "There are no relevant changes, so no new version is released."; then
+            echo "::error::No releasable changes since last tag - aborting release job."
+            exit 1
+          fi
+
+          semantic-release
 
       - name: Frontend Build
         description: Must be created AFTER the release as the version (git tag) is used in the interface
@@ -270,17 +311,40 @@ jobs:
           surfer put --token ${{ secrets.CODE_DATACONTROLLER_IO }} --server code.datacontroller.io sasjsbuild/sasdocs/* /
 
       - name: Upload assets to release
+        env:
+          # Use the same ephemeral per-job Gitea Actions token that the
+          # "Create Empty Release" step uses for semantic-release. It is scoped
+          # to this repo and is granted write access via the workflow's
+          # `permissions:` block at the top of the file (see contents: write).
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
         run: |
-          RELEASE_ID=`curl -k 'https://git.datacontroller.io/api/v1/repos/dc/dc/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.id'`
-          RELEASE_BODY=`curl -k 'https://git.datacontroller.io/api/v1/repos/dc/dc/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.body'`
-          # Update body
-          curl --data '{"draft": false,"body":"'"$RELEASE_BODY\n\nFor installation instructions, please visit https://docs.datacontroller.io/"'"}' -X PATCH --header 'Content-Type: application/json' -k https://git.datacontroller.io/api/v1/repos/dc/dc/releases/$RELEASE_ID?access_token=${{ secrets.RELEASE_TOKEN }}
+          set -euo pipefail
+          # Send the token via Authorization header rather than ?access_token=
+          # (the query-string form is deprecated and leaks into access logs).
+          AUTH_HEADER="Authorization: token ${GITEA_TOKEN}"
+          BASE="${{ gitea.server_url }}/api/v1/repos/${{ gitea.repository }}"
+
+          RELEASE_JSON=$(curl -k --fail-with-body -sS -H "$AUTH_HEADER" "$BASE/releases/latest")
+          RELEASE_ID=$(echo "$RELEASE_JSON" | jq -r '.id')
+          RELEASE_BODY=$(echo "$RELEASE_JSON" | jq -r '.body')
+
+          # Update body (also confirms the token has contents:write on this repo)
+          curl -k --fail-with-body -sS -X PATCH \
+            -H "$AUTH_HEADER" \
+            -H 'Content-Type: application/json' \
+            --data "$(jq -n --arg body "$RELEASE_BODY"$'\n\nFor installation instructions, please visit https://docs.datacontroller.io/' \
+                        '{draft:false, body:$body}')" \
+            "$BASE/releases/$RELEASE_ID"
+
           # Upload assets
-          URL="https://git.datacontroller.io/api/v1/repos/dc/dc/releases/$RELEASE_ID/assets?access_token=${{ secrets.RELEASE_TOKEN }}"
-          curl -k $URL -F attachment=@frontend.zip
-          curl -k $URL -F attachment=@sas/demostream_sas9.sas
-          curl -k $URL -F attachment=@sas/viya.sas
-          curl -k $URL -F attachment=@sas/sasjs_server.json.zip
-          curl -k $URL -F attachment=@sas/sas9.sas
-          curl -k $URL -F attachment=@sas/viya_noweb.sas
-          curl -k $URL -F attachment=@sas/viya_noweb.json
+          URL="$BASE/releases/$RELEASE_ID/assets"
+          for f in frontend.zip \
+                   sas/demostream_sas9.sas \
+                   sas/viya.sas \
+                   sas/sasjs_server.json.zip \
+                   sas/sas9.sas \
+                   sas/viya_noweb.sas \
+                   sas/viya_noweb.json; do
+            echo "Uploading $f ..."
+            curl -k --fail-with-body -sS -H "$AUTH_HEADER" "$URL" -F "attachment=@$f"
+          done

.npmrc

@@ -1 +1,4 @@
 legacy-peer-deps=true
+ignore-scripts=true
+save-exact=true
+fund=false

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "Handsontable",
     "Licence",
     "SYSERRORTEXT",
     "SYSWARNINGTEXT",

AGENTS.md

@@ -0,0 +1,25 @@
+# Agent Instructions
+
+## Git
+
+Do NOT auto-commit. Never run `git commit` (or `git push`) unless the user explicitly asks. Leave changes in the working tree for the user to review and commit themselves.
+
+## Markdown files
+
+Do NOT hard-wrap Markdown files (no fixed-width line wrapping / carriage returns inside paragraphs). Each paragraph, list item, and heading should be a single logical line, regardless of length. Let the editor/viewer soft-wrap. This includes AGENTS.md itself.
+
+This is different from `.sas` files, where a maximum line length applies. The no-wrap rule applies to all `*.md` files in this repo (docs, READMEs, etc.).
+
+Rationale: hard-wrapped prose produces noisy diffs when sentences are edited and reflowed, and Markdown renderers already handle wrapping.
+
+## SAS files
+
+After creating or modifying any `.sas` files, run `sasjs lint` from the `sas/` directory and ensure the files you touched have no lint warnings (the repo currently has pre-existing warnings in other files, which can be ignored).
+
+## No external assets
+
+Data Controller must run entirely locally (offline / on-prem, no internet access). The built product must never fetch assets from remote servers — no external fonts, images, scripts, stylesheets, CDN links, or remote URLs in meta tags (e.g. `og:image`, `og:url`, `itemprop="image"`). All assets must be bundled and served locally.
+
+## The .agent folder
+
+Agent-related content lives in `.agent/`: technical/agent-facing documentation goes in `.agent/docs/` (not `docs/`), and skills in `.agent/skills/`. When writing explanatory or technical docs about the codebase, put them in `.agent/docs/`.

CHANGELOG.md

@@ -1,3 +1,225 @@
+# [7.11.0](https://git.datacontroller.io/dc/dc/compare/v7.10.1...v7.11.0) (2026-07-20)
+
+
+### Bug Fixes
+
+* audit-skipping syntax correction ([ad7efc9](https://git.datacontroller.io/dc/dc/commit/ad7efc90bc33c93383e17359d14c0605cded69a9))
+* **editor:** ignore cell validation on rows marked for delete ([70c5805](https://git.datacontroller.io/dc/dc/commit/70c5805743c8c6e61bc216f37cbe8cd4f0614c98))
+* explicit use of .sashdat in dc_casload ([6a95067](https://git.datacontroller.io/dc/dc/commit/6a95067618600d7b03b6af46bf3d74721e42c66a))
+* refactor mf_wordsinstr1butnotstr2 and added a wide table to test suite ([be94c68](https://git.datacontroller.io/dc/dc/commit/be94c68f354d0f9b1eb52213807d1874a74d9b8a))
+* retry the startup service request once before failing ([5391df8](https://git.datacontroller.io/dc/dc/commit/5391df8f04cf40205a600b23c207f97b6fdf5913))
+* run dc_casload for dq tables in getdata.  Closes [#264](https://git.datacontroller.io/dc/dc/issues/264). ([6b16f9b](https://git.datacontroller.io/dc/dc/commit/6b16f9b3647fca2e39d44544201ce972046e01a3))
+* updating tests, moving mpe_rowhash to core library ([c5f0e4f](https://git.datacontroller.io/dc/dc/commit/c5f0e4f106aa4e6a7c2a2fd0ebb2e85d1e7bee7b))
+
+
+### Features
+
+* bumping core to get the mp_rowhash definition, [#269](https://git.datacontroller.io/dc/dc/issues/269) ([f73f5e4](https://git.datacontroller.io/dc/dc/commit/f73f5e47ac38a305bac4ebd7eac48d1a3edf4a83))
+* new hash algorithm - allows 1000+ cols.  Closes [#269](https://git.datacontroller.io/dc/dc/issues/269) ([08947f0](https://git.datacontroller.io/dc/dc/commit/08947f0fc8458be098e3aaf769b1da7fadf480cb))
+
+## [7.10.1](https://git.datacontroller.io/dc/dc/compare/v7.10.0...v7.10.1) (2026-07-15)
+
+
+### Bug Fixes
+
+* **editor:** order validation rules by COLHEADERS, not cols[].VARNUM ([4c2aca3](https://git.datacontroller.io/dc/dc/commit/4c2aca34951d6d5c5cf2df69d5bf4256a9290d53))
+
+# [7.10.0](https://git.datacontroller.io/dc/dc/compare/v7.9.1...v7.10.0) (2026-07-13)
+
+
+### Bug Fixes
+
+* adapt column validation to vertical-array COLTYPE ([#253](https://git.datacontroller.io/dc/dc/issues/253)) ([3016750](https://git.datacontroller.io/dc/dc/commit/301675052fb5cbcb11f54c370ad7eda1d60461fd))
+* backend updates to bring back labels under [#240](https://git.datacontroller.io/dc/dc/issues/240) ([fb94840](https://git.datacontroller.io/dc/dc/commit/fb94840016f067fa3523a3539dd0616d8970eed0))
+* **editor:** normalise unpadded time strings on spreadsheet import ([7b4b4eb](https://git.datacontroller.io/dc/dc/commit/7b4b4ebeeb0e34ec5fcd5c485741d7bbddb43b7e))
+* **hot:** row rendering on resize, resolve blank whitespace ([c7ba025](https://git.datacontroller.io/dc/dc/commit/c7ba025d39aa9681ad51f239503e884fb26613e2))
+* including datadictionary descs in labels, [#240](https://git.datacontroller.io/dc/dc/issues/240) ([e7453a9](https://git.datacontroller.io/dc/dc/commit/e7453a9305263faf4d4f288d50977121353040c7))
+* pass variable formats to front-end in a vertical array instead of horizontal list ([691d6f2](https://git.datacontroller.io/dc/dc/commit/691d6f277ea87051f539681b34da2f39cade8fc3))
+* remove coltype from sasparams table, add it to cols table. ([8101400](https://git.datacontroller.io/dc/dc/commit/81014001ac4da6b8d262c72c65e0c657f186ec84))
+* trim leading/trailing whitespace from Excel header cells on upload ([2728dac](https://git.datacontroller.io/dc/dc/commit/2728dac873ab8c9fc44413f873e4730515ca0e21))
+* **va:** date filters refactor, support more dates ([df5c975](https://git.datacontroller.io/dc/dc/commit/df5c9758697d7481e67d20ed7ff81e9ce4e92ec0))
+* **va:** enable readOnly and hold filtering while editing ([82a254d](https://git.datacontroller.io/dc/dc/commit/82a254d22cb7aaf75aae7b332f0b07fc8bda3e44))
+* **va:** enable Upload button in va mode ([1beb3d4](https://git.datacontroller.io/dc/dc/commit/1beb3d490d0e7b8d5fa7985f121495ed62740cfe))
+* **va:** guard deferred contextMenu toggle against destroyed instance ([b5e9b25](https://git.datacontroller.io/dc/dc/commit/b5e9b2531924bec1a23c67d3ad0ca3f512a75655))
+
+
+### Features
+
+* adding DC_MAXOBS_WEBVIEW config item, closes [#258](https://git.datacontroller.io/dc/dc/issues/258) ([ba7b610](https://git.datacontroller.io/dc/dc/commit/ba7b61082d39767f9539a84de6742a1704573e81))
+* viewer/editor column label display toggle (?labels=true) ([25c12f2](https://git.datacontroller.io/dc/dc/commit/25c12f2b18adda09e6edc93eba263bd5ea0f7409))
+
+
+### Reverts
+
+* enable upload button in va mode ([0d7fd34](https://git.datacontroller.io/dc/dc/commit/0d7fd342970744489a2e6c6fb08f239fe853cb81))
+
+## [7.9.1](https://git.datacontroller.io/dc/dc/compare/v7.9.0...v7.9.1) (2026-06-30)
+
+
+### Bug Fixes
+
+* workflow file upload using action PAT ([a161670](https://git.datacontroller.io/dc/dc/commit/a161670b8656614f61d42ee673064ba8f010b71c))
+
+# [7.9.0](https://git.datacontroller.io/dc/dc/compare/v7.8.2...v7.9.0) (2026-06-29)
+
+
+### Bug Fixes
+
+* allow large retained key values.  Closes [#248](https://git.datacontroller.io/dc/dc/issues/248). ([6a30de3](https://git.datacontroller.io/dc/dc/commit/6a30de37cad21b7b94bf550ce7afbc804e6f0f90))
+* build issues ([#245](https://git.datacontroller.io/dc/dc/issues/245)) ([77b4bb3](https://git.datacontroller.io/dc/dc/commit/77b4bb310e62adb450805488fc69a132435d0eb7))
+* **ci:** bump Lighthouse to 13.4.0 ([47ba03e](https://git.datacontroller.io/dc/dc/commit/47ba03ec637113d8867372d64484927de9b645ff))
+* **dc-validator:** display date/time/datetime cells as raw ISO, locale-independent ([9ca5719](https://git.datacontroller.io/dc/dc/commit/9ca57193b4aafa1e7bf216301cdf197cea6ec4c9))
+* **editor:** await dynamic validation on paste; defer spinner ([ea03bde](https://git.datacontroller.io/dc/dc/commit/ea03bdecc5aaf917052add2c7e6fdc192b9974ce))
+* **editor:** cancelEdit will reset cell's valid state ([51071b4](https://git.datacontroller.io/dc/dc/commit/51071b463bb311c6db48c301daa8cc7dfd92144a))
+* **editor:** preserve commas in dropdown source values ([6af49cf](https://git.datacontroller.io/dc/dc/commit/6af49cf1fd8aa27cbf99f9514cca537339cdbf7e))
+* **editor:** retry initSetup when the Handsontable instance isn't ready ([53b7ee0](https://git.datacontroller.io/dc/dc/commit/53b7ee0cb23329fa4f9d6211ffe6b102053fade9))
+* **handsontable:** add exceljs ([38cb1e2](https://git.datacontroller.io/dc/dc/commit/38cb1e207b58822d71ef803e770a93bc7265bc1c))
+* **handsontable:** horizontal scrollbar in dropdown ([ac0bd10](https://git.datacontroller.io/dc/dc/commit/ac0bd102127ced6b6a908a7244f35002f22cb669))
+* **handsontable:** restore dark mode for v17 ([9d97bf7](https://git.datacontroller.io/dc/dc/commit/9d97bf7ea13199ab9dab10c5fc47e07b4751fb9a))
+* **handsontable:** update licenseChecker exclude buffers - exceljs dep ([12c7d30](https://git.datacontroller.io/dc/dc/commit/12c7d30894b5c3709b683189da6e52255ad0a3e7))
+* incrementing rk val ([7444209](https://git.datacontroller.io/dc/dc/commit/74442096bac1481a4992e5c97dac47c8d277cc3f))
+* **licensing:** add protocol info ([3668a74](https://git.datacontroller.io/dc/dc/commit/3668a7426fec078ad7939b5bc815d7ad920c0d62)), closes [#178](https://git.datacontroller.io/dc/dc/issues/178)
+* migrate handsontables to v17 ([1b73e35](https://git.datacontroller.io/dc/dc/commit/1b73e355b78a0039aa48f7a137095eb5470c08e2))
+* **mocks:** return dynamic cell values as OBJ to match new contract ([a15fdc4](https://git.datacontroller.io/dc/dc/commit/a15fdc401e6cdcf934a5d599f8b7c4d197e9d2d4))
+* removing display_value in SAS code ([9b18a45](https://git.datacontroller.io/dc/dc/commit/9b18a45d354ad617e590d62758ef761b01b3095a))
+* rule_type ([adc6424](https://git.datacontroller.io/dc/dc/commit/adc6424211a83fb03b267bf8fa6b6d9fa72f185b))
+* sending dynamic_values and dynamic_extended_values back as OBJ instead of ARR ([e859d33](https://git.datacontroller.io/dc/dc/commit/e859d3354e82f0faad53a0b8aa14ed66974cbffa))
+* upcasing RAW_VALUE, bumping core, fixing tests ([982d507](https://git.datacontroller.io/dc/dc/commit/982d507ae3ad2ccc08e65678956199cd54b696f2))
+* validate pasted values ([b661580](https://git.datacontroller.io/dc/dc/commit/b661580c604c2923b930911a1881aec7b06ecf23))
+* viewLibs now fires only once, libPromise shared between the calls ([dc4e07a](https://git.datacontroller.io/dc/dc/commit/dc4e07a692a5e839986abb69b17e51024c4cdc03))
+
+
+### Features
+
+* **edit-record:** use native date/time/datetime pickers ([2d29346](https://git.datacontroller.io/dc/dc/commit/2d29346cbf09ad057743e6f5ebea12f3257f246e))
+* **editor:** add READONLY, HIDDEN, ROUND and NUMBER_FORMAT validation rules ([4ea604f](https://git.datacontroller.io/dc/dc/commit/4ea604f9fbdd429108fe063b306ea376e756c107))
+* **editor:** migrate date/time/datetime to HOT 17 Intl cell types ([f70ea2f](https://git.datacontroller.io/dc/dc/commit/f70ea2fe712ff9a42bf47387f9f0aaa6d1a1f511))
+* **editor:** paste-validation overlay with cancel and confirm ([609731f](https://git.datacontroller.io/dc/dc/commit/609731ff99185a162614df13bde7afb1a2c3bbca))
+* **editor:** SAS VA data-driven content embed mode (?embed=va) ([ffa3ff9](https://git.datacontroller.io/dc/dc/commit/ffa3ff9c103d6d80677f4f67e7d53418f201f491))
+* **editor:** VA embed filter modes with pending UX ([ebe6972](https://git.datacontroller.io/dc/dc/commit/ebe6972dd7d38c5742ed7eb446e0448d98b2c8a7))
+* **editor:** validate autofilled cells; fix paste validation lag ([11ee49a](https://git.datacontroller.io/dc/dc/commit/11ee49a57a0bc7ccd59e91d5fe37bb5db1bf7d69))
+* **handsontable:** enable export plugin, add export menu items ([29aaa72](https://git.datacontroller.io/dc/dc/commit/29aaa72c6047bb309d325887ab602a9369a1ad74))
+* migration script for adding new validation rules under [#241](https://git.datacontroller.io/dc/dc/issues/241) ([9f84a58](https://git.datacontroller.io/dc/dc/commit/9f84a580fb762da8c1c796a35eb4f531df1caf13))
+* new validation rules in mpe_selectbox.  [#241](https://git.datacontroller.io/dc/dc/issues/241) ([2f5d3df](https://git.datacontroller.io/dc/dc/commit/2f5d3dfc387f02353601aaa844aaeabde3e9f3e5))
+
+
+### Reverts
+
+* eager-load feature modules instead of lazy-loading ([3429a7a](https://git.datacontroller.io/dc/dc/commit/3429a7a2a6ecfa6115394e1c842061cc68bf2be3))
+* **editor:** DISPLAY_VALUE change ([eb015d7](https://git.datacontroller.io/dc/dc/commit/eb015d712b01687f36ac92e38ab576a7c114b1ba))
+
+## [7.8.2](https://git.datacontroller.io/dc/dc/compare/v7.8.1...v7.8.2) (2026-05-20)
+
+
+### Bug Fixes
+
+* bumping ws package ([2382a55](https://git.datacontroller.io/dc/dc/commit/2382a559a5ac32b0f815776a90207650d5809ba6))
+* enabling version restore for non admin users ([5d889d8](https://git.datacontroller.io/dc/dc/commit/5d889d824cc2f8e4ea089cbb578453125dc4ba6c))
+
+## [7.8.1](https://git.datacontroller.io/dc/dc/compare/v7.8.0...v7.8.1) (2026-05-15)
+
+
+### Bug Fixes
+
+* **sasjs:** enable runAsTask ([f1a26e1](https://git.datacontroller.io/dc/dc/commit/f1a26e132eba7fa2ac64754940b52ea46c6619b3))
+
+# [7.8.0](https://git.datacontroller.io/dc/dc/compare/v7.7.3...v7.8.0) (2026-05-15)
+
+
+### Bug Fixes
+
+* enabling DSN=*ALL* in MPE_SECURITY ([7d94cb2](https://git.datacontroller.io/dc/dc/commit/7d94cb2ae4a3f6c1fa1011ae0fced7083a2f2793))
+* providing default values for RULE_ACTIVE on MPE_VALIDATIONS ([f031b4e](https://git.datacontroller.io/dc/dc/commit/f031b4eb8925397e60dcc739a721cfbbb6da8dff))
+* switch away from api usage for CASLIB metadata ([ce921a0](https://git.datacontroller.io/dc/dc/commit/ce921a032a8970b8078a463a41da884e1fa71bc3))
+* use correct debug param for runAsTask ([bb80476](https://git.datacontroller.io/dc/dc/commit/bb8047676749814d3b86eea666726dbe4bf5f270))
+
+
+### Features
+
+* add runAsTask config attribute parser ([1635bc9](https://git.datacontroller.io/dc/dc/commit/1635bc9c451bc221f386241007f594096f114b4f))
+* enabling *ALL* option by default in MPE_SECURITY (DSN col) ([93d4ab6](https://git.datacontroller.io/dc/dc/commit/93d4ab65acce7b5b35e448146f9893964ad2cca3))
+
+## [7.7.3](https://git.datacontroller.io/dc/dc/compare/v7.7.2...v7.7.3) (2026-05-12)
+
+
+### Bug Fixes
+
+* move cas session assign to settings.sas and abort when lib is unassigned ([65f0b97](https://git.datacontroller.io/dc/dc/commit/65f0b979a401277b3e070d409659ae3fae2ff8c0))
+
+## [7.7.2](https://git.datacontroller.io/dc/dc/compare/v7.7.1...v7.7.2) (2026-05-07)
+
+
+### Bug Fixes
+
+* **client:** bundle Metropolis font locally to satisfy CSP ([9546fcd](https://git.datacontroller.io/dc/dc/commit/9546fcd6312f3e81f746ef6e32ef398810ed434a))
+* **client:** clear angular build cache on font strip to avoid stale dist ([503cb08](https://git.datacontroller.io/dc/dc/commit/503cb08b2fa40397434189f9c20eff3358eb7010))
+* **client:** postinstall removal of Metropolis [@font-face](https://git.datacontroller.io/font-face) from @clr/ui ([e6397ce](https://git.datacontroller.io/dc/dc/commit/e6397cecc13afe2a9238bdfb2b4b9b81f38d055c))
+* **client:** serve text-security-disc font locally ([80ce80e](https://git.datacontroller.io/dc/dc/commit/80ce80ece40012e59c7cd0340b4aa9a9aca46443))
+* **editor:** preserve numeric type for SAS num cols with static SOFTSELECT/HARDSELECT ([05a3289](https://git.datacontroller.io/dc/dc/commit/05a328976ea3d1d6ef7559850369aa580f0d067f))
+
+## [7.7.1](https://git.datacontroller.io/dc/dc/compare/v7.7.0...v7.7.1) (2026-05-05)
+
+
+### Bug Fixes
+
+* **client:** bump adapter ([d26f7d2](https://git.datacontroller.io/dc/dc/commit/d26f7d2511008634124c7d6fde115abb43db9c43))
+* **sas:** bump cli ([d60029d](https://git.datacontroller.io/dc/dc/commit/d60029deae0ec21f3b8570461e2a4ca041d58f72))
+
+# [7.7.0](https://git.datacontroller.io/dc/dc/compare/v7.6.0...v7.7.0) (2026-05-04)
+
+
+### Bug Fixes
+
+* bump adapter to 4.16.6 ([1707f38](https://git.datacontroller.io/dc/dc/commit/1707f3802a97de8c659f1a88c92fc917e8a30615))
+* remove data:image/svg+xml CSP violation, use class instead changing style directly ([d66eb5d](https://git.datacontroller.io/dc/dc/commit/d66eb5dfc2dbb01f1e6c0c7d15fc2ad2a39dd829))
+* remove WORK, SASUSER and CASUSER as library options.  [#224](https://git.datacontroller.io/dc/dc/issues/224) ([ec66631](https://git.datacontroller.io/dc/dc/commit/ec66631a33aabb8ab2f92fe22c15440127085782))
+
+
+### Features
+
+* auto-save CAS tables [#224](https://git.datacontroller.io/dc/dc/issues/224) ([40d04a5](https://git.datacontroller.io/dc/dc/commit/40d04a53c4c00183116bdbd08397e0f2ffb1f578))
+* autoload CAS tables. [#224](https://git.datacontroller.io/dc/dc/issues/224) ([d5ebb01](https://git.datacontroller.io/dc/dc/commit/d5ebb01ce381f5f4ec06de041f3ab9e632c02e43))
+
+# [7.6.0](https://git.datacontroller.io/dc/dc/compare/v7.5.0...v7.6.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add label and tooltip for libref download, sanitise input ([52d5803](https://git.datacontroller.io/dc/dc/commit/52d58036a40e25847e900f9b04a77dbcc409c12b))
+
+
+### Features
+
+* configurable email alerts.  Closes [#217](https://git.datacontroller.io/dc/dc/issues/217) ([2ccf0d1](https://git.datacontroller.io/dc/dc/commit/2ccf0d11000129629a0665421135b7530af9892f))
+
+# [7.5.0](https://git.datacontroller.io/dc/dc/compare/v7.4.1...v7.5.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add workflow audits, update deps ([66e98a9](https://git.datacontroller.io/dc/dc/commit/66e98a96cbd092e762b94a04660f8e17ca003ceb))
+* allow CSV uploads with licence row limit ([5b260e4](https://git.datacontroller.io/dc/dc/commit/5b260e49153dd85bc0023ad94d8a5f57b8ffa6dc)), closes [#213](https://git.datacontroller.io/dc/dc/issues/213)
+* bumping cli and pinning versions in .npmrc ([80039f4](https://git.datacontroller.io/dc/dc/commit/80039f4876c8e09dc477678e1eff58329094c9e9))
+* guard CSV upload with fileUpload licence flag ([ed40df6](https://git.datacontroller.io/dc/dc/commit/ed40df62953c3055770b5cbf50738f4a48b943cd))
+* parse embed param from window.location.hash for hash router compatibility ([0269c24](https://git.datacontroller.io/dc/dc/commit/0269c2421db245f7f5405678605cb4d4587e2a67))
+* quote CSV char values.  Closes [#215](https://git.datacontroller.io/dc/dc/issues/215) ([d9980e8](https://git.datacontroller.io/dc/dc/commit/d9980e866d1a2fe7a731ff279d73accd35003e67))
+* resolve outer promise in parseCsvFile for non-WLATIN1 path ([4ee15e1](https://git.datacontroller.io/dc/dc/commit/4ee15e1b6e83f27f279fc345e6998452a8f64d7e))
+* use XLSX for CSV row truncation to handle new lines in values ([6d590c0](https://git.datacontroller.io/dc/dc/commit/6d590c050dcd593a73464fae5604f774f016b10d))
+
+
+### Features
+
+* add embed URL parameter to hide header and back button ([b0dc441](https://git.datacontroller.io/dc/dc/commit/b0dc441d681369e06eee58288dbdbb236f930bdc)), closes [#214](https://git.datacontroller.io/dc/dc/issues/214)
+* add target libref input to config download ([a89657b](https://git.datacontroller.io/dc/dc/commit/a89657b0b81b9c531f64c0dda2714b4eb16c4bc9)), closes [#212](https://git.datacontroller.io/dc/dc/issues/212)
+* export config service to allow dclib swapping.  Closes [#212](https://git.datacontroller.io/dc/dc/issues/212) ([326c26f](https://git.datacontroller.io/dc/dc/commit/326c26fddfa88a0dc4ca79d3bd0c77c4d807f37c))
+
+## [7.4.1](https://git.datacontroller.io/dc/dc/compare/v7.4.0...v7.4.1) (2026-03-12)
+
+
+### Bug Fixes
+
+* support for SASIOSNF engine (SNOW alias) plus meta assignment ([7694d1b](https://git.datacontroller.io/dc/dc/commit/7694d1b0fb2bd0407c8598147fbae87a00d889a8))
+
 # [7.4.0](https://git.datacontroller.io/dc/dc/compare/v7.3.0...v7.4.0) (2026-02-20)
 
 

CONTRIBUTING.md

@@ -16,6 +16,21 @@ Add `client/.npmrc` file with following content:
 //pylon.sheetjs.com:54111/:_authToken="TOKEN-GOES-HERE"
 ```
 
+In addition to the registry auth, the `@sheet/crypto` package is installed from a local tarball
+(`client/libraries/sheet-crypto.tgz`) rather than the registry. This tarball is not committed to
+the repo directly - only an encrypted copy is: `client/libraries/sheet-crypto.tgz.gpg`.
+
+Before running `npm i`/`npm ci` in `client`, you must decrypt it using the passphrase
+(stored as the `SHEET_PWD` CI secret - ask a repo maintainer if you don't have it):
+```bash
+cd client
+echo "YOUR_PASSPHRASE" | gpg --batch --yes --passphrase-fd 0 \
+  --output ./libraries/sheet-crypto.tgz \
+  --decrypt ./libraries/sheet-crypto.tgz.gpg
+
+npm i
+```
+
 [Handsontable](https://www.npmjs.com/package/handsontable)
 
 Licence should be inserted in the `client/src/index.html` file:
@@ -66,6 +81,15 @@ To remove the release, you need to do it with repo administration over at [https
 
 # Troubleshooting
 
+## `npm i` fails with ENOENT on `sheet-crypto.tgz`
+
+If `npm i`/`npm ci` in `client` fails with:
+```
+npm error enoent ENOENT: no such file or directory, open '.../client/libraries/sheet-crypto.tgz'
+```
+it means the encrypted `sheet-crypto.tgz.gpg` hasn't been decrypted yet. See
+[Dependencies that requires licences](#dependencies-that-requires-licences) above for how to decrypt it.
+
 ## Makedata service "could not create directory" error
 
 The dcpath folder should have its permissions set so that the system account (SYSUSERID) can both read and write to it.

README.md

@@ -51,7 +51,7 @@ This project includes automated Lighthouse performance and accessibility checks
 The Lighthouse CI workflow:
 1. Sets up the development environment with SASjs server and mocked services
 2. Builds and serves the Angular frontend
-3. Runs Lighthouse CI against key application pages
+3. Installs Chrome and runs `lhci autorun` (Lighthouse CI) against key pages
 4. Uploads results as artifacts for review
 
 To run Lighthouse checks locally:
@@ -61,4 +61,4 @@ npm install
 npm run lighthouse
 ```
 
-Configuration is in `client/lighthouserc.js`.
+Configuration is in `client/lighthouserc.js` (URL list, `desktop` preset, Chrome flags, assertions).

client/.prettierignore

@@ -0,0 +1,4 @@
+# Auto-generated at build time (node ./src/version.ts) — gitignored, never linted.
+# Formerly skipped via root .gitignore when prettier ran from the repo root;
+# now that lint runs from client/, prettier reads this CWD-local ignore instead.
+src/environments/version.ts

client/angular.json

@@ -25,6 +25,7 @@
           "options": {
             "allowedCommonJsDependencies": [
               "handsontable",
+              "exceljs",
               "core-js",
               "pikaday",
               "querystring",
@@ -62,11 +63,19 @@
               {
                 "glob": "**/*",
                 "input": "src/images",
-                "output": "images"
+                "output": "images",
+                "ignore": ["spinner.svg", "caret.svg"]
               }
             ],
             "styles": ["src/styles.scss"],
-            "scripts": ["node_modules/marked/marked.min.js"],
+            "scripts": [
+              "node_modules/marked/marked.min.js",
+              {
+                "input": "src/assets/va-early.js",
+                "bundleName": "va-early",
+                "inject": true
+              }
+            ],
             "webWorkerTsConfig": "tsconfig.worker.json",
             "main": "src/main.ts"
           },
@@ -148,5 +157,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

client/cypress.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  reporter: "mochawesome",
+  reporter: 'mochawesome',
 
   reporterOptions: {
-    reportDir: "cypress/results",
+    reportDir: 'cypress/results',
     overwrite: false,
     html: true,
-    json: false,
+    json: false
   },
   viewportHeight: 900,
   viewportWidth: 1600,
@@ -16,24 +16,32 @@ export default defineConfig({
   defaultCommandTimeout: 30000,
 
   env: {
-    hosturl: "http://localhost:4200",
-    appLocation: "",
-    site_id_SAS9: "70221618",
-    site_id_SASVIYA: "70253615",
-    site_id_SASJS: "123",
-    serverType: "SASJS",
-    libraryToOpenIncludes_SASVIYA: "viya",
-    libraryToOpenIncludes_SAS9: "dc",
-    libraryToOpenIncludes_SASJS: "dc",
+    hosturl: 'http://localhost:4200',
+    appLocation: '',
+    site_id_SAS9: '70221618',
+    site_id_SASVIYA: '70253615',
+    site_id_SASJS: '123',
+    serverType: 'SASJS',
+    libraryToOpenIncludes_SASVIYA: 'viya',
+    libraryToOpenIncludes_SAS9: 'dc',
+    libraryToOpenIncludes_SASJS: 'dc',
     debug: false,
     screenshotOnRunFailure: false,
     longerCommandTimeout: 50000,
-    testLicenceUserLimits: false,
+    testLicenceUserLimits: false
   },
 
   e2e: {
+    video: true,
     setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-  },
-});
+      // Pin the browser locale so locale-formatted cells (intl-date/time/datetime)
+      // render deterministically regardless of the runner's system locale.
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          launchOptions.args.push('--lang=en-GB')
+        }
+        return launchOptions
+      })
+    }
+  }
+})

client/cypress/e2e/coltype-delete-record.cy.ts

@@ -0,0 +1,132 @@
+// Marks this file as an ES module (rather than a global script) so its
+// top-level consts don't collide, under the TS type-checker, with the same
+// names declared in other spec files — see viewer-labels.cy.ts for the same
+// pattern.
+export {}
+
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+
+// Regression coverage for issue #253's vertical-array COLTYPE fix — see
+// getdata.sas now sends one COLTYPE JSON-object string per cols[] row (via
+// a LEFT JOIN keyed off the real dataset's columns), instead of one
+// comma-joined sasparams.COLTYPE string covering every column. Two things
+// are specifically at risk from that change and aren't covered elsewhere:
+//   1. `_____DELETE__THIS__RECORD_____` (the delete checkbox column) is a
+//      client-side-only concept — %mp_getcols never has a row for it, so
+//      it can no longer travel via cols[].COLTYPE at all. Its Yes/No
+//      dropdown rule is now hardcoded client-side (deleteRecordColumnRule.ts)
+//      — test 1 proves that hardcode actually renders end to end.
+//   2. Ordinary columns (e.g. SOME_DROPDOWN) still get their rule via the
+//      new per-row cols[].COLTYPE path — test 2 proves the migration didn't
+//      silently drop real columns' rules either.
+// Column positions below come from COLHEADERS in
+// sas/mocks/sasjs/services/editors/getdata.js:
+// "_____DELETE__THIS__RECORD_____,PRIMARY_KEY_FIELD,SOME_CHAR,SOME_DROPDOWN,..."
+// — childNodes[0] on a body <tr> is the row-header <th>, so childNodes[N+1]
+// is the Nth (0-indexed) column in that list.
+context('coltype vertical-array regression tests: ', function () {
+  this.beforeAll(() => {
+    cy.visit(`${hostUrl}/SASLogon/logout`)
+    cy.loginAndUpdateValidKey(true)
+  })
+
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+    visitPage('home')
+  })
+
+  it('1 | delete-record column renders its hardcoded Yes/No dropdown', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+    clickOnEdit()
+
+    cy.get('.ht_master tbody tr', { timeout: longerCommandTimeout }).then(
+      (rows: any) => {
+        // childNodes[1] = _____DELETE__THIS__RECORD_____ (1st column)
+        cy.get(rows[1].childNodes[1])
+          .click({ force: true })
+          .then(($td) => {
+            cy.get('.htAutocompleteArrow', { withinSubject: $td })
+              .should('exist')
+              .click({ force: true })
+
+            cy.get('.autocompleteEditor .htCore tbody td').should(
+              ($choices) => {
+                const texts = [...$choices].map((el) => el.innerText.trim())
+                expect(texts).to.deep.equal(['No', 'Yes'])
+              }
+            )
+          })
+      }
+    )
+  })
+
+  it('2 | an ordinary dropdown column (SOME_DROPDOWN) still gets its rule from cols[].COLTYPE', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+    clickOnEdit()
+
+    cy.get('.ht_master tbody tr', { timeout: longerCommandTimeout }).then(
+      (rows: any) => {
+        // childNodes[4] = SOME_DROPDOWN (4th column, 0-indexed as 3). This
+        // only holds if DcValidator emits rules in VARNUM order — see the
+        // "orders rules by VARNUM" regression test in dc-validator.spec.ts.
+        cy.get(rows[1].childNodes[4])
+          .click({ force: true })
+          .then(($td) => {
+            cy.get('.htAutocompleteArrow', { withinSubject: $td }).should(
+              'exist'
+            )
+          })
+      }
+    )
+  })
+})
+
+const clickOnEdit = (callback?: any) => {
+  cy.get('.btnCtrl button.btn-primary', { timeout: longerCommandTimeout })
+    .click()
+    .then(() => {
+      if (callback) callback()
+    })
+}
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let viyaLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            viyaLib = node
+            break
+          }
+        }
+
+        cy.get(viyaLib).within(() => {
+          cy.get('.clr-tree-node-content-container > button').click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+}
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}

client/cypress/e2e/csv-limited.cy.ts

@@ -0,0 +1,95 @@
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+const fixturePath = 'csvs/'
+
+context('csv file upload restriction (free tier): ', function () {
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+
+    cy.get('body').then(($body) => {
+      const usernameInput = $body.find('input.username')[0]
+
+      if (usernameInput && !Cypress.dom.isHidden(usernameInput)) {
+        cy.get('input.username').type(username)
+        cy.get('input.password').type(password)
+        cy.get('.login-group button').click()
+      }
+    })
+
+    cy.get('.app-loading', { timeout: longerCommandTimeout }).should(
+      'not.exist'
+    )
+
+    // Skip licensing page if presented - continue with free tier
+    cy.url().then((url) => {
+      if (url.includes('licensing')) {
+        cy.get('button').contains('Continue with free tier').click()
+      }
+    })
+
+    visitPage('home')
+  })
+
+  it('1 | File upload is restricted on free tier', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    // Click upload button - should show feature locked modal
+    cy.get('.buttonBar button:last-child').should('exist').click()
+
+    cy.get('.modal-title').should('contain', 'Locked Feature (File Upload)')
+  })
+})
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let targetLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            targetLib = node
+            break
+          }
+        }
+
+        cy.get(targetLib).within(() => {
+          cy.get('.clr-tree-node-content-container > button').click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+}
+
+const attachFile = (filename: string, callback?: any) => {
+  cy.get('.buttonBar button:last-child')
+    .should('exist')
+    .click()
+    .then(() => {
+      cy.get('input[type="file"]#file-upload')
+        .attachFile(`/${fixturePath}/${filename}`)
+        .then(() => {
+          if (callback) callback()
+        })
+    })
+}
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}

client/cypress/e2e/editor.cy.ts

@@ -115,7 +115,227 @@ context('editor tests: ', function () {
       })
     })
   })
+
+  // An invalid cell shouldn't block submission if its row
+  // is marked for delete
+  it('5 | Submits a delete-marked row with an invalid cell', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    clickOnEdit(() => {
+      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
+        timeout: longerCommandTimeout
+      }).then(() => {
+        cy.get('.ht_master tbody tr').then((rows: any) => {
+          // childNodes[5] = SOME_NUM (numeric) — feed it a non-numeric value
+          // to trigger HOT's native invalid mark.
+          cy.get(rows[1].childNodes[5])
+            .dblclick({ force: true })
+            .then(() => {
+              cy.focused()
+                .clear()
+                .type('not a number{enter}')
+                .then(() => {
+                  // childNodes[1] = _____DELETE__THIS__RECORD_____
+                  setDeleteFlag(rows[1].childNodes[1], 'Yes', () => {
+                    submitTable(() => {
+                      // Validation passed despite the invalid SOME_NUM cell:
+                      // the confirm-submit modal's Submit button is enabled
+                      // (validationDone === 1), not the "invalid values" abort.
+                      cy.get('#submitBtn', {
+                        timeout: longerCommandTimeout
                       })
+                        .should('exist')
+                        .should('not.be.disabled')
+                        .then(() => done())
+                    })
+                  })
+                })
+            })
+        })
+      })
+    })
+  })
+
+  // The delete exemption must not affect the uniqueness (primary key) check.
+  it('6 | Still blocks a duplicate primary key even on a delete-marked row', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    clickOnEdit(() => {
+      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
+        timeout: longerCommandTimeout
+      }).then(() => {
+        cy.get('.ht_master tbody tr').then((rows: any) => {
+          cy.get(rows[0].childNodes[2]).then((firstPk) => {
+            const duplicateValue = firstPk.text()
+
+            // childNodes[2] = PRIMARY_KEY_FIELD
+            cy.get(rows[1].childNodes[2])
+              .dblclick({ force: true })
+              .then(() => {
+                cy.focused()
+                  .clear()
+                  .type(`${duplicateValue}{enter}`)
+                  .then(() => {
+                    setDeleteFlag(rows[1].childNodes[1], 'Yes', () => {
+                      submitTable()
+
+                      cy.get('.duplicate-keys-modal', {
+                        timeout: longerCommandTimeout
+                      })
+                        .should('exist')
+                        .then(() => done())
+                    })
+                  })
+              })
+          })
+        })
+      })
+    })
+  })
+
+  // REGEX_HARD_COL/REGEX_SOFT_COL only exist un-stripped on MPE_X_NEW (see
+  // RULE_DEMO_COLS in the getdata.js mock) — MPE_X_TEST stays clean to
+  // match the excel fixtures.
+  it('7 | Blocks submission of a value that fails HARDREGEX', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_new')
+
+    clickOnEdit(() => {
+      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
+        timeout: longerCommandTimeout
+      }).then(() => {
+        scrollGridRight()
+
+        getCellByHeaderAndRow(1, 'REGEX_HARD_COL')
+          .dblclick({ force: true })
+          .then(() => {
+            cy.focused()
+              .clear()
+              .type('not-an-email{enter}')
+              .then(() => {
+                submitTable(() => {
+                  cy.get('.modal-body').then((modalBody: any) => {
+                    if (
+                      modalBody[0].innerHTML
+                        .toLowerCase()
+                        .includes(`invalid values are present`)
+                    ) {
+                      done()
+                    }
+                  })
+                })
+              })
+          })
+      })
+    })
+  })
+
+  it('8 | Warns (but still submits) a value that fails SOFTREGEX', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_new')
+
+    clickOnEdit(() => {
+      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
+        timeout: longerCommandTimeout
+      }).then(() => {
+        scrollGridRight()
+
+        getCellByHeaderAndRow(1, 'REGEX_SOFT_COL')
+          .dblclick({ force: true })
+          .then(() => {
+            cy.focused()
+              .clear()
+              .type('not a postcode{enter}')
+              .then(() => {
+                getCellByHeaderAndRow(1, 'REGEX_SOFT_COL').should(
+                  'have.class',
+                  'dc-warning-cell'
+                )
+
+                submitTable(() => {
+                  // Validation passed despite the SOFTREGEX warning: the
+                  // confirm-submit modal's Submit button is enabled
+                  // (validationDone === 1), not the "invalid values" abort.
+                  cy.get('#submitBtn', { timeout: longerCommandTimeout })
+                    .should('exist')
+                    .should('not.be.disabled')
+                    .then(() => done())
+                })
+              })
+          })
+      })
+    })
+  })
+})
+
+// Handsontable virtualizes columns — with 17 columns on MPE_X_NEW, only
+// the ones in the current viewport actually exist in the DOM. Scroll all
+// the way right so REGEX_HARD_COL/REGEX_SOFT_COL (the last two) render at
+// all. Same technique already used in excel.cy.ts. Must be called (and
+// re-settle) before any header/body query below, since scrolling replaces
+// the previously-rendered column nodes.
+const scrollGridRight = () => {
+  return cy
+    .get('#hotTable')
+    .find('div.ht_master.handsontable')
+    .find('div.wtHolder')
+    .scrollTo('right')
+}
+
+// Locates a body cell by its column's header text rather than a hardcoded
+// childNodes index. Handsontable's hiddenColumns plugin (e.g. HIDDEN_COL,
+// used by several demo columns ahead of REGEX_HARD_COL/REGEX_SOFT_COL in
+// COLHEADERS) removes a hidden column's cells from BOTH the header row and
+// every body row identically, so the header row's th index always lines up
+// with the same-position childNode in any body row — this sidesteps having
+// to know how many hidden columns precede the target. Re-queries both the
+// header and body row fresh each call (rather than accepting a pre-fetched
+// row) since virtualization/scrolling can replace either pane's nodes.
+//
+// The `.should()` retries until headerText actually shows up: Handsontable
+// re-renders virtualized columns asynchronously after a scroll event, on
+// its own schedule outside Cypress's command queue, so scrollTo() settling
+// does not mean the target column has been rendered yet.
+const getCellByHeaderAndRow = (rowIndex: number, headerText: string) => {
+  return cy
+    .get('.ht_clone_top .htCore thead tr th')
+    .should(($ths) => {
+      const texts = [...$ths].map((th) => th.innerText.trim())
+      expect(texts).to.include(headerText)
+    })
+    .then(($ths) => {
+      const index = [...$ths].findIndex(
+        (th) => th.innerText.trim() === headerText
+      )
+
+      return cy
+        .get('.ht_master tbody tr')
+        .then((rows: any) => rows[rowIndex].childNodes[index])
+        .then((cell) => cy.get(cell))
+    })
+}
+
+// Opens the _____DELETE__THIS__RECORD_____ dropdown editor on the given cell
+// and picks the given choice ('Yes'/'No') — same technique as
+// coltype-delete-record.cy.ts (arrow -> autocompleteEditor choice list).
+const setDeleteFlag = (
+  deleteCell: any,
+  value: 'Yes' | 'No',
+  callback?: any
+) => {
+  cy.get(deleteCell)
+    .click({ force: true })
+    .then(($td) => {
+      cy.get('.htAutocompleteArrow', { withinSubject: $td })
+        .should('exist')
+        .click({ force: true })
+
+      cy.get('.autocompleteEditor .htCore tbody td')
+        .contains(value)
+        .click({ force: true })
+        .then(() => {
+          if (callback) callback()
+        })
+    })
+}
 
 const clickOnEdit = (callback?: any) => {
   cy.get('.btnCtrl button.btn-primary', { timeout: longerCommandTimeout })

client/cypress/e2e/embed-va.cy.ts

@@ -0,0 +1,130 @@
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+
+// SAS Visual Analytics data-driven content embed mode (`?embed=va`):
+//  - chrome is hidden (same as embed=true),
+//  - the editor opens in edit mode immediately (not read-only),
+//  - the only action button is a single Submit below the grid (stubbed in v1),
+//  - the top button bar and Add Record are hidden.
+//
+// The detailed PK+label data-merge logic is covered by the VaMessagingService
+// unit spec; here we only assert the deterministic UI layout and that pushing a
+// VA postMessage does not break the page.
+context('embed=va (VA data-driven content) tests: ', function () {
+  this.beforeAll(() => {
+    cy.visit(`${hostUrl}/SASLogon/logout`)
+    cy.loginAndUpdateValidKey()
+  })
+
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+    visitPage('home')
+  })
+
+  it('1 | opens the editor in VA mode: chrome hidden, editable, single bottom Submit', () => {
+    openEditorInVaMode('mpe_x_test', () => {
+      // Chrome hidden (same as embed=true)
+      cy.get('header.app-header').should('not.exist')
+
+      // Grid present and in edit mode (read-only Filter/Edit/Upload bar absent)
+      cy.get('#hotTable', { timeout: longerCommandTimeout }).should('exist')
+      cy.get('.btnCtrl button').contains('Edit').should('not.exist')
+      cy.get('.btnCtrl button').contains('Filter').should('not.exist')
+
+      // Top edit-mode buttons hidden in VA mode
+      cy.get('.btnCtrl button.btn-outline-danger').should('not.exist') // Cancel
+      cy.get('.btnCtrl').contains('Add Row').should('not.exist')
+
+      // Bottom Add Record hidden
+      cy.contains('button', 'Add Record').should('not.exist')
+
+      // Exactly one Submit button, below the grid, disabled in v1
+      cy.get('button').filter(':contains("Submit")').should('have.length', 1)
+      cy.get('button').contains('Submit').should('be.disabled')
+    })
+  })
+
+  it('2 | accepts a VA postMessage and stays in VA mode', () => {
+    // A VA message drives column visibility + filtering; an empty/unmatched
+    // message reloads the editor (unfiltered) while preserving ?embed=va.
+    openEditorInVaMode('mpe_x_test', () => {
+      cy.window().then((win) => {
+        win.postMessage(
+          {
+            version: '1',
+            resultName: 'dd1',
+            rowCount: 0,
+            availableRowCount: 0,
+            data: [],
+            columns: [],
+            parameters: []
+          },
+          '*'
+        )
+      })
+
+      // Editor still loads in VA mode after the message (chrome hidden, grid up)
+      cy.get('#hotTable', { timeout: longerCommandTimeout }).should('exist')
+      cy.get('header.app-header').should('not.exist')
+      cy.get('button').contains('Submit').should('exist')
+    })
+  })
+})
+
+// Opens a table from the tree (which routes to #/editor/LIB.TABLE), then
+// re-visits the same route with ?embed=va so the app parses VA embed mode.
+const openEditorInVaMode = (tablename: string, callback?: any) => {
+  openTableFromTree(libraryToOpenIncludes, tablename)
+
+  cy.get('#hotTable', { timeout: longerCommandTimeout })
+    .should('exist')
+    .then(() => {
+      cy.url().then((url) => {
+        const separator = url.includes('?') ? '&' : '?'
+        cy.visit(`${url}${separator}embed=va`)
+        cy.get('.app-loading', { timeout: longerCommandTimeout }).should(
+          'not.exist'
+        )
+        if (callback) callback()
+      })
+    })
+}
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let viyaLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            viyaLib = node
+            break
+          }
+        }
+
+        cy.get(viyaLib).within(() => {
+          cy.get('.clr-tree-node-content-container > button').click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+}
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}

client/cypress/e2e/excel.cy.ts

@@ -386,6 +386,19 @@ context('excel tests: ', function () {
       })
   })
 
+  it('24 | Uploads Excel with leading whitespace in header row (should still succeed)', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    // Every header except the first has a leading space, matching a
+    // real-world defect from copy-pasting between spreadsheets/systems.
+    // Header matching must tolerate
+    // this rather than reporting the columns missing and aborting.
+    attachExcelFile('leading_whitespace_header_excel.xlsx', () => {
+      submitExcel()
+      rejectExcel(done)
+    })
+  })
+
   // Large files break Cypress
 
   // it ('? | Uploads Excel with size of 5MB', (done) => {
@@ -539,7 +552,9 @@ const checkResultOfFormulaUpload = (callback?: any) => {
 }
 
 const checkResultOfXLSUpload = (callback?: any) => {
-  cy.viewport(1280, 720)
+  // Config-default width — wide enough that the date/datetime/time columns are
+  // not virtualized away (the old 1280 width hid the trailing time columns).
+  cy.viewport(1600, 900)
   cy.get('#hotTable', { timeout: 30000 })
     .find('div.ht_master.handsontable')
     .find('div.wtHolder')
@@ -557,14 +572,15 @@ const checkResultOfXLSUpload = (callback?: any) => {
       expect(cell.innerText).to.equal('▼\nOption 1')
       cell = data[0].children[0].children[5]
       expect(cell.innerText).to.equal('42')
+      // Cells render the raw stored ISO string verbatim (locale-independent;
+      // see registerIntlCellTypes). date -> YYYY-MM-DD, datetime ->
+      // YYYY-MM-DD HH:mm:ss, time -> HH:mm:ss.
       cell = data[0].children[0].children[6]
-      expect(cell.innerText).to.equal('▼\n1960-02-12')
-      // When CI detached browser screen is smaller, below cells are not visible so test fails
-      // Commenting it out now until we figure out workaround
-      // cell = data[0].children[0].children[7]
-      // expect(cell.innerText).to.equal('▼\n1960-01-01 00:00:42')
-      // cell = data[0].children[0].children[8]
-      // expect(cell.innerText).to.equal('00:00:42')
+      expect(cell.innerText).to.equal('1960-02-12')
+      cell = data[0].children[0].children[7]
+      expect(cell.innerText).to.equal('1960-01-01 00:00:42')
+      cell = data[0].children[0].children[8]
+      expect(cell.innerText).to.equal('00:00:42')
 
       if (callback) callback()
     })

client/cypress/e2e/liveness.cy.ts

@@ -36,6 +36,38 @@ context('liveness tests: ', function () {
     })
   })
 
+  // Multiple concurrent DC instances can cause the startupservice request
+  // to time out even though a retry succeeds. Fail only the first
+  // startupservice call (any later ones, e.g. from other tests/reloads,
+  // pass through untouched) and confirm the app still reaches the nav tree
+  // instead of showing the startup error modal.
+  it('2 | Recovers from a failed startupservice request via the single retry', () => {
+    let startupServiceCallCount = 0
+
+    cy.intercept('POST', '**/SASjsApi/stp/execute*', (req) => {
+      const isStartupService = JSON.stringify(req.body || '').includes(
+        'startupservice'
+      )
+
+      if (isStartupService) startupServiceCallCount++
+
+      if (isStartupService && startupServiceCallCount === 1) {
+        req.reply({ statusCode: 503, body: 'Service unavailable' })
+      } else {
+        req.continue()
+      }
+    }).as('stpExecute')
+
+    visitPage('home')
+
+    cy.get('.nav-tree clr-tree > clr-tree-node', {
+      // Longer than the retry's own 0-3s pause on top of the normal timeout.
+      timeout: longerCommandTimeout + 3000
+    }).should('exist')
+
+    cy.get('.abortMsg').should('not.exist')
+  })
+
   /**
    * Thist part will be needed if we add more tests in future
    */

client/cypress/e2e/viewbox.cy.ts

@@ -41,17 +41,14 @@ context('editor tests: ', function () {
     cy.get('.viewbox-open').click()
     openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
 
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
+    cy.contains('.open-viewbox', viewbox_table, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    })
 
     checkColumns(columns, () => {
       done()
     })
-      }
-    })
   })
 
   it('2 | Add two viewboxes', (done) => {
@@ -78,48 +75,21 @@ context('editor tests: ', function () {
       libraryToOpenIncludes,
       viewboxes.map((viewbox) => viewbox.viewbox_table)
     )
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      let found = 0
-
-      for (let viewboxNode of viewboxNodes) {
-        for (let viewbox of viewboxes) {
-          if (
-            viewboxNode.innerText.toLowerCase().includes(viewbox.viewbox_table)
-          )
-            found++
-        }
-      }
-
-      if (found < viewboxes.length) return
-
-      cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
-        (viewboxNodes: any) => {
-          for (let viewboxNode of viewboxNodes) {
-            cy.get(viewboxNode).within(() => {
-              cy.get('.table-title').then((tableTitle) => {
-                const title = tableTitle[0].innerText
-                const viewbox = viewboxes.find((vb) =>
-                  title.toLowerCase().includes(vb.viewbox_table)
-                )
-
-                if (viewbox) {
-                  cy.get('.ht_master.handsontable .htCore thead tr').then(
-                    (viewboxColNodes: any) => {
-                      let allColsHtml = viewboxColNodes[0].innerHTML
-
-                      for (let col of viewbox?.columns) {
-                        if (!allColsHtml.includes(col)) return
-                      }
-
-                      done()
-                    }
-                  )
-                }
+    viewboxes.forEach((viewbox) => {
+      cy.contains('.open-viewbox', viewbox.viewbox_table, {
+        matchCase: false,
+        timeout: longerCommandTimeout
       })
     })
-          }
-        }
-      )
+
+    let result = 0
+
+    viewboxes.forEach((viewbox) => {
+      checkColumns(viewbox.columns, () => {
+        result++
+
+        if (result === viewboxes.length) done()
+      })
     })
   })
 
@@ -133,11 +103,10 @@ context('editor tests: ', function () {
     cy.get('.viewbox-open').click()
     openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
 
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
+    cy.contains('.open-viewbox', viewbox_table, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    })
 
     openViewboxConfig(viewbox_table)
 
@@ -148,8 +117,6 @@ context('editor tests: ', function () {
     checkColumns([...columns, ...additionalColumns], () => {
       done()
     })
-      }
-    })
   })
 
   it('4 | Add viewbox, add columns and reorder', (done) => {
@@ -162,11 +129,10 @@ context('editor tests: ', function () {
     cy.get('.viewbox-open').click()
     openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
 
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
+    cy.contains('.open-viewbox', viewbox_table, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    })
 
     openViewboxConfig(viewbox_table)
 
@@ -190,8 +156,6 @@ context('editor tests: ', function () {
         done()
       })
     })
-      }
-    })
   })
 
   it('5 | Add viewbox, add columns, reorder, remove column, add again', (done) => {
@@ -204,13 +168,12 @@ context('editor tests: ', function () {
     cy.get('.viewbox-open').click()
     openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
 
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
+    cy.contains('.open-viewbox', viewbox_table, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    })
 
-        viewboxNode.click()
+    openViewboxConfig(viewbox_table)
 
     removeAllColumns()
 
@@ -239,19 +202,14 @@ context('editor tests: ', function () {
           ],
           () => {
             addColumns([colToRemove], () => {
-                  checkColumns(
-                    [...columns, ...additionalColumns.reverse()],
-                    () => {
+              checkColumns([...columns, ...additionalColumns.reverse()], () => {
                 done()
-                    }
-                  )
+              })
             })
           }
         )
       })
     })
-      }
-    })
   })
 
   it('6 | Add viewboxes, reload and check url restored configuration', (done) => {
@@ -333,68 +291,68 @@ context('editor tests: ', function () {
     })
   })
 
-  // We will enable this test when we figure out how to mock filtering
-  // it('7 | Add viewboxes and filter', () => {
-  //   const viewboxes = ['mpe_x_test', 'mpe_validations']
+  // The base VIEW table and a viewbox on a different table must never
+  // share a filter dialog's cached state - each keeps its own entry in
+  // the globals filter cache (getFilterObjPath), keyed by viewboxId where
+  // one is present. Opened from the VIEW page specifically
+  // (rootParam === 'view') - the one branch where this previously broke,
+  // since a 'view'-page QueryComponent was always treated as the base
+  // table regardless of viewboxId.
+  it('7 | Base table filter and viewbox filter stay isolated from each other', () => {
+    const viewbox_table = 'mpe_audit'
 
-  //   openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+    visitPage('view/data')
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
 
-  //   cy.get('.viewbox-open').click()
-  //   openTableFromViewboxTree(libraryToOpenIncludes, viewboxes)
+    // Filter the base table.
+    openViewFilter()
+    setFilterWithValue('SOME_CHAR', 'this is dummy data', 'value', () => {
+      cy.get('app-query', { withinSubject: null }).should('not.exist')
 
-  //   cy.wait(1000)
+      // Open a viewbox on a *different* table and check its filter dialog
+      // does not show the base table's filter.
+      openViewViewboxes()
+      openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
+      closeViewboxModal()
 
-  //     closeViewboxModal()
+      // cy.contains retries until the viewbox's title actually shows the
+      // expected table name (it can render before its data/title loads),
+      // then .parents() walks back up to its container - avoids a
+      // one-shot .then() racing the title's own async update, which is
+      // what made this flaky in the first place.
+      cy.contains('.viewboxes-container .viewbox .table-title', viewbox_table, {
+        matchCase: false,
+        timeout: longerCommandTimeout
+      })
+        .parents('.viewbox')
+        .first()
+        .within(() => {
+          cy.get('clr-icon[shape="filter"]').click()
 
-  //     cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
-  //       (viewboxNodes: any) => {
-  //         for (let viewboxNode of viewboxNodes) {
-  //           cy.get(viewboxNode).within(() => {
-  //             cy.get('.table-title').then((title: any) => {
-  //               cy.get('.hot-spinner')
-  //                 .should('not.exist')
-  //                 .then(() => {
-  //                   cy.get('clr-icon[shape="filter"]').then((filterButton) => {
-  //                     filterButton[0].click()
-  //                   })
+          cy.get('.filter-modal code.language-sql', {
+            withinSubject: null
+          }).should(($code) => {
+            expect($code.text()).to.not.contain('SOME_CHAR')
+          })
 
-  //                   if (title[0].innerText.includes('MPE_X_TEST')) {
-  //                     setFilterWithValue(
-  //                       'SOME_CHAR',
-  //                       'this is dummy data',
-  //                       'value',
-  //                       () => {
-  //                         cy.get('app-query', { withinSubject: null })
-  //                           .should('not.exist')
-  //                           .get('.ht_master.handsontable tbody tr')
-  //                           .then((rowNodes) => {
-  //                             const tr = rowNodes[0]
+          // Reverse direction: filter the viewbox, then confirm
+          // re-opening the base table's own filter dialog still shows
+          // the base table's filter, not the viewbox's.
+          setFilterWithValue('LIBREF', 'sasdemo', 'value', () => {
+            cy.get('app-query', { withinSubject: null }).should('not.exist')
 
-  //                             expect(rowNodes).to.have.length(1)
-  //                             expect(tr.innerText).to.equal('0')
-  //                           })
-  //                       }
-  //                     )
-  //                   } else if (title[0].innerText.includes('MPE_VALIDATIONS')) {
-  //                     setFilterWithValue('BASE_COL', 'ALERT_LIB', 'value', () => {
-  //                       cy.get('app-query', { withinSubject: null })
-  //                         .should('not.exist')
-  //                         .get('.ht_master.handsontable tbody tr')
-  //                         .then((rowNodes) => {
-  //                           const tr = rowNodes[0]
+            openViewFilter()
 
-  //                           expect(rowNodes).to.have.length(1)
-  //                           expect(tr.innerText).to.contain('ALERT_LIB')
-  //                         })
-  //                     })
-  //                   }
-  //                 })
-  //             })
-  //           })
-  //         }
-  //       }
-  //     )
-  // })
+            cy.get('.filter-modal code.language-sql', {
+              withinSubject: null
+            }).should(($code) => {
+              expect($code.text()).to.contain('SOME_CHAR')
+              expect($code.text()).to.not.contain('LIBREF')
+            })
+          })
+        })
+    })
+  })
 })
 
 const removeAllColumns = () => {
@@ -407,32 +365,40 @@ const removeAllColumns = () => {
   )
 }
 
+// Asserts that at least one open viewbox currently shows exactly this
+// column list, in order. Uses a single .should() callback (synchronous
+// jQuery reads only, no nested cy.get()/.then()) so Cypress retries the
+// whole check against a fresh DOM snapshot until it passes or times out -
+// unlike .then(), which only ever sees one snapshot and, combined with an
+// early return on a mismatch, would silently never invoke the caller's
+// callback while Handsontable/the viewbox's data are still loading or
+// re-rendering asynchronously.
 const checkColumns = (columns: string[], callback: () => void) => {
-  cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
-    (viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        cy.get(viewboxNode).within(() => {
-          cy.get('.ht_master.handsontable thead tr th').then(
-            (viewboxColNodes: any) => {
-              console.log('viewboxColNode', viewboxColNodes)
-              console.log('columns', columns)
-              for (let i = 0; i < viewboxColNodes.length; i++) {
-                const col = columns[i] || ''
-                const colNode = viewboxColNodes[i]
+  cy.get('.viewboxes-container .viewbox', { withinSubject: null }).should(
+    ($viewboxNodes) => {
+      const matches = $viewboxNodes.toArray().some((viewboxNode) => {
+        // rowHeaders: true (viewboxes.component.ts) adds a leading, unlabeled
+        // corner <th> before the actual data columns - skip it, or every
+        // comparison is off by one against the row-header cell instead of
+        // the first real column.
+        const headerCells = Cypress.$(viewboxNode)
+          .find('.ht_master.handsontable thead tr th')
+          .toArray()
+          .slice(1)
 
-                if (
-                  !colNode.innerHTML.toLowerCase().includes(col.toLowerCase())
-                )
-                  return
-              }
-
-              callback()
-            }
+        return columns.every((col, i) =>
+          (headerCells[i]?.innerHTML || '')
+            .toLowerCase()
+            .includes(col.toLowerCase())
         )
       })
-      }
+
+      expect(matches, `a viewbox showing columns: ${columns.join(', ')}`).to.be
+        .true
     }
   )
+
+  cy.then(() => callback())
 }
 
 const closeViewboxModal = () => {
@@ -444,9 +410,7 @@ const removeColumn = (column: string) => {
 }
 
 const addColumns = (columns: string[], callback?: () => void) => {
-  for (let i = 0; i < columns.length; i++) {
-    const column = columns[i]
-
+  for (const column of columns) {
     cy.get('.cols-search input', { withinSubject: null }).type(column)
     cy.get('.cols-search .autocomplete-wrapper', { withinSubject: null })
       .first()
@@ -454,50 +418,80 @@ const addColumns = (columns: string[], callback?: () => void) => {
     cy.get('.cols-search .autocomplete-wrapper', { withinSubject: null })
       .first()
       .trigger('keydown', { key: 'Enter' })
-      .then(() => {
-        if (i === columns.length - 1 && callback) callback()
-      })
-  }
+
+    // Wait for the actual column box to render before moving on to the
+    // next column (or firing the callback) - selecting it doesn't add it
+    // to the DOM synchronously, and cy.get()'s own retry covers that gap
+    // instead of relying on a fixed cy.wait().
+    cy.get(`.col-box.column-${column}`, { timeout: longerCommandTimeout })
   }
 
-const openViewboxConfig = (viewbox_tablename: string) => {
-  cy.get('.open-viewbox').then((viewboxes: any) => {
-    for (let openViewbox of viewboxes) {
-      if (openViewbox.innerText.toLowerCase().includes(viewbox_tablename))
-        openViewbox.click()
+  if (callback) cy.then(() => callback())
 }
-  })
+
+// The VIEW page's "options" dropdown (viewer.component.html) - distinct
+// from the editor page's dedicated .viewbox-open button used by the
+// tests above, since test 7 runs on the VIEW page specifically.
+const openViewOptionsDropdown = () => {
+  cy.get('.filterSide', { withinSubject: null }).click()
+}
+
+const openViewFilter = () => {
+  openViewOptionsDropdown()
+  cy.get('[clrDropdownItem]', { withinSubject: null })
+    .contains('Filter')
+    .click()
+}
+
+const openViewViewboxes = () => {
+  openViewOptionsDropdown()
+  cy.get('[clrDropdownItem]', { withinSubject: null })
+    .contains('Viewboxes')
+    .click()
+}
+
+// cy.contains retries until a matching node appears/updates - the open
+// viewbox's own list entry can render before its table-name text has
+// actually loaded, so a one-shot .then() lookup here would race it.
+const openViewboxConfig = (viewbox_tablename: string) => {
+  cy.contains('.open-viewbox', viewbox_tablename, {
+    matchCase: false,
+    timeout: longerCommandTimeout
+  }).click()
 }
 
 const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
+  cy.get('.app-loading', { timeout: longerCommandTimeout }).should('not.exist')
+
+  // Small settle wait: right after a fresh visit (an extra navigation on
+  // top of beforeEach's own, e.g. test 7's visitPage('view/data')), the
+  // tree component can still be re-rendering, causing a node to be found
+  // then swapped out mid-click - same fix already proven in
+  // viewer-labels.cy.ts.
+  cy.wait(300)
+
+  const libraryNodeSelector = '.nav-tree clr-tree > clr-tree-node'
+  const libraryMatcher = new RegExp(libNameIncludes, 'i')
+
+  cy.contains(libraryNodeSelector, libraryMatcher, {
     timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (new RegExp(libNameIncludes).test(node.innerText.toLowerCase())) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container p').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
   })
+    .find('.clr-tree-node-content-container p')
+    .click()
+
+  // Re-query the library node fresh rather than reusing the reference
+  // from before the click above - expanding a library can replace its
+  // whole DOM subtree once its child tables load (that's what made the
+  // earlier cached-reference version of this helper flaky: Cypress
+  // detected the click's own side effect detaching the element it was
+  // still verifying actionability against).
+  cy.contains(libraryNodeSelector, libraryMatcher, {
+    timeout: longerCommandTimeout
+  }).within(() => {
+    cy.contains('.clr-treenode-link', tablename, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    }).click()
   })
 }
 

client/cypress/e2e/viewer-labels.cy.ts

@@ -0,0 +1,243 @@
+// Marks this file as an ES module (rather than a global script) so its
+// top-level consts don't collide, under the TS type-checker, with the same
+// names declared in other spec files — see e.g. download.cy.ts, which gets
+// this for free via a real import.
+export {}
+
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+
+// Viewer column-label display toggle (`?labels=true`): clients surfacing DC in
+// SAS Visual Analytics want column LABELs shown instead of NAMEs. Default
+// behavior (no param) must stay unchanged; the right-click context menu's
+// "Show labels"/"Show names" item is the in-app affordance, and it drives the
+// same URL param so state is shareable/refreshable. See mock data in
+// sas/mocks/sasjs/services/public/viewdata.js: MPE_X_TEST's SOME_CHAR/SOME_DATE
+// have LABELs that differ from NAME, and SOME_NUM has a blank LABEL (fallback
+// to NAME) — this spec exercises exactly that fixture.
+context('viewer column labels toggle tests: ', function () {
+  this.beforeAll(() => {
+    cy.visit(`${hostUrl}/SASLogon/logout`)
+    // forceLicenceKey=true: without it, loginAndUpdateValidKey() only
+    // generates key data and logs back out if no valid license already
+    // exists — it doesn't actually apply one (see commands.ts). Several
+    // specs call it with no argument and rely on an *earlier* spec in the
+    // same CI run having already forced a valid license onto the shared
+    // server first (csv.cy.ts, excel.cy.ts, etc.). This spec shouldn't
+    // depend on run order, so force it explicitly.
+    cy.loginAndUpdateValidKey(true)
+  })
+
+  this.beforeEach(() => {
+    // No re-login here: beforeAll's loginAndUpdateValidKey() already
+    // authenticated the session, and it persists across tests in this file
+    // (see filtering.cy.ts/csv.cy.ts for the same pattern). Re-typing into
+    // the login form would fail — it's hidden once already logged in.
+    cy.visit(hostUrl + appLocation)
+
+    // Visit 'home' first, matching filtering.cy.ts/csv.cy.ts/download.cy.ts —
+    // going straight to 'view/data' skips whatever startup-data fetch 'home'
+    // triggers, which passed locally (fast round-trips) but left the
+    // nav-tree empty in CI's slower environment.
+    visitPage('home')
+    visitPage('view/data')
+  })
+
+  it('1 | default (no param): headers show NAMEs', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    cy.get('#hotTable .ht_clone_top .htCore thead tr', {
+      timeout: longerCommandTimeout
+    }).should(($headerRow) => {
+      expect($headerRow[0].innerHTML).to.include('SOME_CHAR')
+      expect($headerRow[0].innerHTML).to.not.include('Some Character Column')
+    })
+  })
+
+  it('2 | ?labels=true: headers show LABELs, blank LABEL falls back to NAME', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+    appendUrlParam('labels=true')
+
+    cy.get('#hotTable .ht_clone_top .htCore thead tr', {
+      timeout: longerCommandTimeout
+    }).should(($headerRow) => {
+      const html = $headerRow[0].innerHTML
+      expect(html).to.include('Some Character Column')
+      expect(html).to.include('Some Date')
+      // SOME_NUM has a blank LABEL in the mock -> falls back to NAME
+      expect(html).to.include('SOME_NUM')
+    })
+  })
+
+  it('3 | context menu "Show labels"/"Show names" toggles headers and the URL', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    toggleColumnLabelsFromContextMenu('Show labels')
+
+    cy.url().should('include', 'labels=true')
+    cy.get('#hotTable .ht_clone_top .htCore thead tr', {
+      timeout: longerCommandTimeout
+    }).should(($headerRow) => {
+      expect($headerRow[0].innerHTML).to.include('Some Character Column')
+    })
+
+    toggleColumnLabelsFromContextMenu('Show names')
+
+    cy.url().should('not.include', 'labels=true')
+    cy.get('#hotTable .ht_clone_top .htCore thead tr', {
+      timeout: longerCommandTimeout
+    }).should(($headerRow) => {
+      expect($headerRow[0].innerHTML).to.include('SOME_CHAR')
+    })
+  })
+
+  it('4 | ?embed=va&labels=true: labels shown with embed chrome hidden', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+    appendUrlParam('embed=va&labels=true')
+
+    cy.get('header.app-header').should('not.exist')
+    cy.get('#hotTable .ht_clone_top .htCore thead tr', {
+      timeout: longerCommandTimeout
+    }).should(($headerRow) => {
+      expect($headerRow[0].innerHTML).to.include('Some Character Column')
+    })
+  })
+
+  it('5 | info dropdown: first line is NAME (in both toggle states)', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    // No assertion on the item's label text here: `info` has a custom
+    // `renderer`, so Handsontable never renders its `name` ("test info") as
+    // text at all — the renderer's own output (checked below) is the only
+    // real content.
+    openColumnDropdown('SOME_CHAR')
+    cy.get('.htDropdownMenu').should(($menu) => {
+      expect($menu.text()).to.match(/NAME: SOME_CHAR/)
+    })
+    cy.get('body').click(0, 0) // close menu
+
+    appendUrlParam('labels=true')
+
+    openColumnDropdown('Some Character Column')
+    cy.get('.htDropdownMenu').should(($menu) => {
+      // NAME is always shown first, even while headers display as LABEL
+      expect($menu.text()).to.match(/NAME: SOME_CHAR/)
+    })
+  })
+})
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}
+
+// Re-visits the current route with extra hash-query params appended, then
+// forces a real reload. Under hash routing (`useHash: true`), changing only
+// the URL's hash fragment is a same-document navigation — Angular Router
+// still reacts to it (which is enough for `useLabels`, read reactively from
+// `route.queryParams`), but `embed` is parsed once from `window.location.hash`
+// at app bootstrap (app.component.ts), so `?embed=va` only takes effect after
+// an actual reload.
+const appendUrlParam = (param: string) => {
+  cy.url().then((url) => {
+    const separator = url.includes('?') ? '&' : '?'
+    cy.visit(`${url}${separator}${param}`)
+    cy.reload()
+    cy.get('.app-loading', { timeout: longerCommandTimeout }).should(
+      'not.exist'
+    )
+  })
+}
+
+const openColumnDropdown = (headerText: string) => {
+  // Handsontable renders the sticky/frozen header via a separate clone pane
+  // (.ht_clone_top) for scroll behavior; the header row inside the main
+  // .ht_master pane is kept visibility:hidden (replaced visually by the
+  // clone). .ht_clone_top is the real, interactive one — confirmed via
+  // `document.querySelector('#hotTable .ht_clone_top thead').innerText` in
+  // a live browser session.
+  cy.get('#hotTable .ht_clone_top .htCore thead button.changeType', {
+    timeout: longerCommandTimeout
+  })
+    .parents('th')
+    .filter((_, th) => Cypress.$(th).text().includes(headerText))
+    .last()
+    .as('targetHeader')
+
+  // Click the header text first to select the column — the `info` item's
+  // renderer reads hot.getSelected() to decide which column to describe,
+  // so without an active selection it always shows "No info found".
+  cy.get('@targetHeader').click()
+  cy.get('@targetHeader').find('button.changeType').click({ force: true })
+}
+
+const toggleColumnLabelsFromContextMenu = (
+  menuItemText: 'Show labels' | 'Show names'
+) => {
+  cy.get('#hotTable .ht_master.handsontable .htCore tbody tr td', {
+    timeout: longerCommandTimeout
+  })
+    .first()
+    // force: true — the first body row can sit under an overlay clone's
+    // header/sort-icon layer, which fails Cypress's actionability check
+    // even though the cell is the real rightclick target underneath.
+    .rightclick({ force: true })
+
+  cy.get('.htContextMenu').contains(menuItemText).click()
+
+  cy.get('.app-loading', { timeout: longerCommandTimeout }).should('not.exist')
+}
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let viyaLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            viyaLib = node
+            break
+          }
+        }
+
+        cy.get(viyaLib).within(() => {
+          // Small settle wait: right after a fresh visit/reload, the tree
+          // component can still be re-rendering, causing this node to be
+          // found then swapped out mid-click ("disappeared from the page").
+          cy.wait(300)
+
+          cy.get(
+            '.clr-tree-node-content-container .clr-treenode-content p'
+          ).click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+
+  // Selecting the table triggers async SPA routing + a viewdata fetch;
+  // wait for the grid to actually render before any subsequent action
+  // (reading the URL, right-clicking, opening a header dropdown) — without
+  // this, callers can act while still on the intermediate library-only
+  // route or a not-yet-rendered grid. Waiting specifically for a header's
+  // dropdown button (not just the <tr> shell) confirms Handsontable has
+  // finished populating header cell contents, not just their DOM rows.
+  cy.get('#hotTable .ht_clone_top .htCore thead button.changeType', {
+    timeout: longerCommandTimeout
+  }).should('exist')
+}

client/cypress/fixtures/csvs/regular.csv

@@ -4,7 +4,11 @@ PRIMARY_KEY_FIELD,SOME_CHAR,SOME_DROPDOWN,SOME_NUM,SOME_DATE,SOME_DATETIME,SOME_
 2,even more dummy data,Option 3,42,12FEB1960,01JAN1960:00:00:42,0:02:22,3,44
 3,"It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:",Option 2,1613.001,27FEB1961,01JAN1960:00:07:03,0:00:44,3,44
 4,if you can fill the unforgiving minute,Option 1,1613.0011235,02AUG1971,29MAY1973:06:12:03,0:06:52,3,44
-1010,10 bottles of beer on the wall,Option 1,0.9153696885,04MAR1962,01JAN1960:12:47:55,0:01:40,92,76
+1010,"10 bottles of beer
+
+
+
+ on the wall",Option 1,0.9153696885,04MAR1962,01JAN1960:12:47:55,0:01:40,92,76
 1011,11 bottles of beer on the wall,Option 1,0.3531217558,29MAR1960,01JAN1960:03:33:24,0:01:03,80,29
 1012,12 bottles of beer on the wall,Option 1,0.6743748717,02AUG1962,01JAN1960:07:25:59,0:00:10,16,98
 1013,13 bottles of beer on the wall,Option 1,0.1305445992,11SEP1960,01JAN1960:13:51:32,0:00:35,73,15

client/cypress/support/commands.ts

@@ -23,21 +23,33 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-import 'cypress-file-upload';
+import 'cypress-file-upload'
 
 import { arrayBufferToBase64 } from './../util/helper-functions'
-import * as moment from 'moment'
+import moment from 'moment'
 
-const username = Cypress.env('username');
-const password = Cypress.env('password');
-const hostUrl = Cypress.env('hosturl');
-const appLocation = Cypress.env('appLocation');
+// These custom commands were added via Cypress.Commands.add() below but never
+// had a type augmentation, so every spec calling cy.loginAndUpdateValidKey()/
+// cy.isLoggedIn() had an unresolved-property error.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      isLoggedIn(callback: (exist: boolean) => void): Chainable<void>
+      loginAndUpdateValidKey(forceLicenceKey?: boolean): Chainable<void>
+    }
+  }
+}
+
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
 const longerCommandTimeout = Cypress.env('longerCommandTimeout')
 const site_id_SASJS = Cypress.env('site_id_SASJS')
 
 Cypress.Commands.add('isLoggedIn', (callback: (exist: boolean) => void) => {
-  cy.get('body').then($body => {
-    if ($body.find(".nav-tree").length > 0) {
+  cy.get('body').then(($body) => {
+    if ($body.find('.nav-tree').length > 0) {
       if (callback) callback(true)
     } else {
       if (callback) callback(false)
@@ -45,25 +57,29 @@ Cypress.Commands.add('isLoggedIn', (callback: (exist: boolean) => void) => {
   })
 })
 
-Cypress.Commands.add('loginAndUpdateValidKey', (forceLicenceKey: boolean = false) => {
-  cy.visit(hostUrl + appLocation);
+Cypress.Commands.add(
+  'loginAndUpdateValidKey',
+  (forceLicenceKey: boolean = false) => {
+    cy.visit(hostUrl + appLocation)
 
     cy.wait(2000)
 
-  cy.get('body').then($body =>{
-    const usernameInput = $body.find("input.username")[0]
+    cy.get('body').then(($body) => {
+      const usernameInput = $body.find('input.username')[0]
 
       if (usernameInput && !Cypress.dom.isHidden(usernameInput)) {
-      cy.get('input.username').type(username);
-      cy.get('input.password').type(password);
+        cy.get('input.username').type(username)
+        cy.get('input.password').type(password)
 
         cy.get('.login-group button').click()
       }
 
-    cy.get('.app-loading', {timeout: longerCommandTimeout}).should('not.exist').then(() => {
+      cy.get('.app-loading', { timeout: longerCommandTimeout })
+        .should('not.exist')
+        .then(() => {
           cy.wait(2000)
 
-      if ($body.find(".nav-tree").length > 0) {
+          if ($body.find('.nav-tree').length > 0) {
             /**
              * If licence key is already working, then skip rest of the function
              */
@@ -79,7 +95,12 @@ Cypress.Commands.add('loginAndUpdateValidKey', (forceLicenceKey: boolean = false
               demo: false
             }
 
-        return generateKeys(keyData.valid_until, keyData.number_of_users, keyData.hot_license_key, keyData.demo, (keysGen: any) => {
+            return generateKeys(
+              keyData.valid_until,
+              keyData.number_of_users,
+              keyData.hot_license_key,
+              keyData.demo,
+              (keysGen: any) => {
                 return acceptTermsIfPresented((result: boolean) => {
                   if (result) {
                     cy.wait(20000)
@@ -103,15 +124,22 @@ Cypress.Commands.add('loginAndUpdateValidKey', (forceLicenceKey: boolean = false
                     })
                   }
                 })
-        })
+              }
+            )
           }
         })
-  });
-});
+    })
+  }
+)
 
 const logout = (callback?: any) => {
-  cy.get('.header-actions .dropdown-toggle').click().then(() => {
-    cy.get('.header-actions .dropdown-menu > .separator').next().click().then(() => {
+  cy.get('.header-actions .dropdown-toggle')
+    .click()
+    .then(() => {
+      cy.get('.header-actions .dropdown-menu > .separator')
+        .next()
+        .click()
+        .then(() => {
           if (callback) callback()
         })
     })
@@ -132,8 +160,12 @@ const updateLicenseKeyQuick = (keys: any, callback: any) => {
 const acceptTermsIfPresented = (callback?: any) => {
   cy.url().then((url: string) => {
     if (url.includes('licensing/register')) {
-      cy.get('.card-block').scrollTo('bottom').then(() => {
-        cy.get('#checkbox1').click().then(() => {
+      cy.get('.card-block')
+        .scrollTo('bottom')
+        .then(() => {
+          cy.get('#checkbox1')
+            .click()
+            .then(() => {
               if (callback) callback(true)
             })
         })
@@ -151,23 +183,36 @@ const isLicensingPage = (callback: any) => {
 
 const inputLicenseKeyPage = (licenseKey: string, activationKey: string) => {
   cy.get('button').contains('Paste licence').click()
-  cy.get('.license-key-form textarea', {timeout: longerCommandTimeout}).invoke('val', licenseKey).trigger('input').should('not.be.undefined')
-  cy.get('.activation-key-form textarea', {timeout: longerCommandTimeout}).invoke('val', activationKey).trigger('input').should('not.be.undefined')
+  cy.get('.license-key-form textarea', { timeout: longerCommandTimeout })
+    .invoke('val', licenseKey)
+    .trigger('input')
+    .should('not.be.undefined')
+  cy.get('.activation-key-form textarea', { timeout: longerCommandTimeout })
+    .invoke('val', activationKey)
+    .trigger('input')
+    .should('not.be.undefined')
   cy.get('button.apply-keys').click()
 }
 
 const visitPage = (url: string) => {
-    cy.visit(`${hostUrl}${appLocation}/#/${url}`);
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
 }
-const generateKeys = async (valid_until: string, users_allowed: number, hot_license_key: string, demo: boolean, resultCallback?: any) => {
-  let keyPair = await window.crypto.subtle.generateKey({
-    name: "RSA-OAEP",
+const generateKeys = async (
+  valid_until: string,
+  users_allowed: number,
+  hot_license_key: string,
+  demo: boolean,
+  resultCallback?: any
+) => {
+  let keyPair = await window.crypto.subtle.generateKey(
+    {
+      name: 'RSA-OAEP',
       modulusLength: 2024,
       publicExponent: new Uint8Array([1, 0, 1]),
-    hash: "SHA-256"
+      hash: 'SHA-256'
     },
     true,
-    ["encrypt", "decrypt"]
+    ['encrypt', 'decrypt']
   )
 
   let licenseData = {
@@ -184,29 +229,38 @@ const generateKeys = async (valid_until: string, users_allowed: number, hot_lice
 
   console.log(encoded)
 
-  let cipher = await window.crypto.subtle.encrypt(
+  let cipher = await window.crypto.subtle
+    .encrypt(
       {
-      name: "RSA-OAEP"
+        name: 'RSA-OAEP'
       },
       keyPair.publicKey,
       encoded
-  ).then((value) => {
+    )
+    .then(
+      (value) => {
         return value
-  }, (err) => {
+      },
+      (err) => {
         console.log('Encrpyt error', err)
-  })
+      }
+    )
 
   if (!cipher) {
     alert('Encryptin keys failed')
     throw new Error('Encryptin keys failed')
   }
 
-  let privateKeyBytes = await window.crypto.subtle.exportKey('pkcs8', keyPair.privateKey)
+  let privateKeyBytes = await window.crypto.subtle.exportKey(
+    'pkcs8',
+    keyPair.privateKey
+  )
 
   let activationKey = await arrayBufferToBase64(privateKeyBytes)
   let licenseKey = await arrayBufferToBase64(cipher)
 
-  if (resultCallback) resultCallback({
+  if (resultCallback)
+    resultCallback({
       activationKey,
       licenseKey
     })

client/cypress/support/e2e.ts

@@ -20,4 +20,16 @@ import './commands'
 // require('./commands')
 
 import 'cypress-plugin-tab'
-import "cypress-real-events"
+import 'cypress-real-events'
+
+// Pin the locale
+Cypress.on('window:before:load', (win) => {
+  Object.defineProperty(win.navigator, 'language', {
+    value: 'en-GB',
+    configurable: true
+  })
+  Object.defineProperty(win.navigator, 'languages', {
+    value: ['en-GB'],
+    configurable: true
+  })
+})

client/licenseChecker.js

@@ -8,9 +8,9 @@ const check = (cwd) => {
         start: cwd,
         excludePrivatePackages: true,
         onlyAllow:
-          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
+          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;BlueOak-1.0.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
         excludePackages:
-          '@cds/city@1.1.0;@handsontable/angular-wrapper@16.0.1;handsontable@^16.0.1;handsontable@16.2.0;hyperformula@2.7.1;hyperformula@3.0.0;hyperformula@3.1.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1'
+          '@cds/city@1.1.0;@handsontable/angular-wrapper@16.0.1;@handsontable/angular-wrapper@17.1.0;@handsontable/angular-wrapper@18.0.0;handsontable@^16.0.1;handsontable@16.2.0;handsontable@17.1.0;handsontable@18.0.0;hyperformula@2.7.1;hyperformula@3.0.0;hyperformula@3.1.0;hyperformula@3.2.0;hyperformula@3.3.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1;buffers@0.1.1'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -17,13 +17,17 @@
     "deploy_viya": "rsync -avhe ssh ./dist/* --delete ${npm_config_account}@sas.4gl.io:/var/www/html/${npm_config_account}/dc/dev",
     "deploy_sasjs": "rsync -avhe ssh ./dist/* --delete root@${npm_config_account}.4gl.io:/var/www/html/dc/dev",
     "viyabuild": "cd build; ./viyabuild.sh",
-    "lint": "cd .. && npm run lint",
+    "lint": "npm run lint:fix",
+    "lint:fix": "npx prettier --write \"{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"cypress/e2e/*.cy.ts\"",
+    "lint:fix:silent": "npx prettier --log-level silent --write \"{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"cypress/e2e/*.cy.ts\"",
+    "lint:check": "npx prettier --check \"{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"cypress/e2e/*.cy.ts\"",
+    "lint:check:silent": "npx prettier --log-level silent --check \"{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"cypress/e2e/*.cy.ts\"",
     "test": "npx ng test",
     "test:headless": "npx ng test --no-watch --no-progress --browsers ChromeHeadlessCI",
     "watch": "ng test watch=true",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor protractor.config.js",
-    "postinstall": "node ./src/version.ts && npm run add-githook",
+    "postinstall": "node ./src/version.ts && npm run add-githook && node ./scripts/strip-clr-base64-fonts.mjs && node ./scripts/gen-hot-icons.mjs",
     "add-githook": "[ -d ../.git ] && git config core.hooksPath ./.git-hooks || true",
     "cypress": "cypress open",
     "cy:run": "cypress run",
@@ -37,43 +41,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.18",
-    "@angular/cdk": "^19.2.19",
-    "@angular/common": "^19.2.18",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.2.18",
-    "@angular/platform-browser": "^19.2.18",
-    "@angular/platform-browser-dynamic": "^19.2.18",
-    "@angular/router": "^19.2.18",
+    "@angular/animations": "^20.3.26",
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.26",
+    "@angular/compiler": "^20.3.26",
+    "@angular/core": "^20.3.26",
+    "@angular/forms": "^20.3.26",
+    "@angular/platform-browser": "^20.3.26",
+    "@angular/platform-browser-dynamic": "^20.3.26",
+    "@angular/router": "^20.3.26",
     "@cds/core": "^6.15.1",
     "@clr/angular": "file:libraries/clr-angular-17.9.0.tgz",
     "@clr/icons": "^13.0.2",
     "@clr/ui": "file:libraries/clr-ui-17.9.0.tgz",
-    "@handsontable/angular-wrapper": "16.0.1",
-    "@sasjs/adapter": "^4.16.3",
-    "@sasjs/utils": "^3.5.3",
+    "@handsontable/angular-wrapper": "^18.0.0",
+    "@sasjs/adapter": "^4.17.3",
+    "@sasjs/utils": "^3.5.9",
     "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/d3-graphviz": "^2.6.7",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
+    "browserify-cipher": "^1.0.1",
     "buffer": "^5.4.3",
-    "crypto-browserify": "^3.12.1",
+    "create-hash": "^1.2.0",
+    "create-hmac": "^1.1.7",
     "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
+    "exceljs": "^4.4.0",
     "fs-extra": "^7.0.1",
-    "handsontable": "^16.0.1",
+    "handsontable": "^18.0.0",
     "https-browserify": "1.0.0",
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",
     "jquery-datetimepicker": "^2.5.21",
-    "jsrsasign": "^11.1.0",
+    "jsrsasign": "11.1.1",
     "marked": "^5.0.0",
     "moment": "^2.30.1",
     "ngx-clipboard": "^16.0.0",
     "ngx-json-viewer": "file:libraries/ngx-json-viewer-3.2.1.tgz",
-    "nodejs": "0.0.0",
     "os-browserify": "0.3.0",
+    "randombytes": "^2.1.0",
     "rxjs": "^7.8.0",
     "save-svg-as-png": "^1.4.17",
     "stream-browserify": "3.0.0",
@@ -86,34 +93,37 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.19",
+    "@angular-devkit/build-angular": "^20.3.32",
     "@angular-eslint/builder": "19.8.1",
     "@angular-eslint/eslint-plugin": "19.8.1",
     "@angular-eslint/eslint-plugin-template": "19.8.1",
     "@angular-eslint/schematics": "19.8.1",
     "@angular-eslint/template-parser": "19.8.1",
-    "@angular/cli": "^19.2.19",
-    "@angular/compiler-cli": "^19.2.18",
+    "@angular/cli": "^20.3.32",
+    "@angular/compiler-cli": "^20.3.26",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@compodoc/compodoc": "^1.1.21",
+    "@compodoc/compodoc": "^2.0.0",
     "@cypress/webpack-preprocessor": "^5.17.1",
-    "@lhci/cli": "^0.12.0",
+    "@lhci/cli": "^0.15.1",
     "@types/core-js": "^2.5.5",
+    "@types/create-hash": "^1.2.6",
+    "@types/create-hmac": "^1.1.3",
     "@types/crypto-js": "^4.2.1",
     "@types/es6-shim": "^0.31.39",
     "@types/jasmine": "~5.1.4",
     "@types/lodash-es": "^4.17.3",
     "@types/marked": "^4.3.0",
     "@types/node": "12.20.50",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@types/randombytes": "^2.0.3",
+    "@typescript-eslint/eslint-plugin": "8.65.0",
+    "@typescript-eslint/parser": "8.65.0",
     "core-js": "^2.5.4",
-    "cypress": "12.17.1",
+    "cypress": "^15.19.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.8.1",
     "es6-shim": "^0.35.5",
-    "eslint": "^8.33.0",
+    "eslint": "8.57.1",
     "git-describe": "^4.0.4",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.3",
@@ -125,12 +135,22 @@
     "lodash-es": "^4.17.21",
     "mochawesome": "^7.1.3",
     "mutationobserver-shim": "^0.3.3",
+    "prettier": "3.8.4",
     "replace-in-file": "^6.3.5",
     "rimraf": "3.0.2",
     "ts-loader": "^9.2.8",
     "ts-node": "^3.3.0",
-    "typescript": "~5.8.3",
-    "wait-on": "^6.0.1",
+    "typescript": "~5.9.3",
+    "wait-on": "^9.0.10",
     "watch": "^1.0.2"
+  },
+  "overrides": {
+    "ajv": "8.18.0",
+    "uuid": "11.1.1",
+    "lighthouse": "13.4.0",
+    "exceljs": {
+      "archiver": "^8.0.0",
+      "unzipper": "^0.12.5"
+    }
   }
 }

client/scripts/gen-hot-icons.mjs

@@ -0,0 +1,69 @@
+import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from 'fs'
+import { resolve, join } from 'path'
+import { createRequire } from 'module'
+
+/**
+ * Generate static SVG assets + an SCSS partial that re-applies HOT v17 classic
+ * theme icons via real URLs (not data: URIs).
+ *
+ * Why: deployed app runs under CSP `img-src 'self'`. HOT v17's classic theme
+ * embeds icons as `data:image/svg+xml,...` in `-webkit-mask-image` rules, which
+ * the CSP blocks. We switch to `ht-theme-classic-no-icons.min.css` and re-add
+ * the icon rules pointing at same-origin SVG files emitted from this script.
+ *
+ * Inputs (HOT's own modules, so semantic names + selector list track upstream):
+ *   handsontable/themes/theme/classic                          → { classicTheme: { icons } }
+ *   handsontable/themes/static/variables/helpers/iconsMap      → iconsMap(icons, themePrefix)
+ *
+ * Outputs:
+ *   client/src/assets/hot-icons/<kebab-name>.svg
+ *   client/src/_hot-icons.scss
+ *
+ * Idempotent: clears the output dir and rewrites both outputs each run.
+ * Skips silently if handsontable isn't installed yet (pre-install runs).
+ */
+const require = createRequire(import.meta.url)
+
+const ASSETS_DIR = resolve('src/assets/hot-icons')
+const SCSS_OUT = resolve('src/_hot-icons.scss')
+const ASSET_URL_PREFIX = './assets/hot-icons/'
+
+const themePath = resolve('node_modules/handsontable/themes/theme/classic.js')
+const mapPath = resolve('node_modules/handsontable/themes/static/variables/helpers/iconsMap.js')
+
+if (!existsSync(themePath) || !existsSync(mapPath)) {
+  console.log('skip: handsontable theme modules not found (likely pre-install run)')
+  process.exit(0)
+}
+
+const { classicTheme } = require(themePath)
+const { iconsMap } = require(mapPath)
+
+const icons = classicTheme.icons
+const cssTemplate = iconsMap(icons, 'ht-theme-classic')
+
+const kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+rmSync(ASSETS_DIR, { recursive: true, force: true })
+mkdirSync(ASSETS_DIR, { recursive: true })
+
+const writeMap = {}
+for (const [name, dataUri] of Object.entries(icons)) {
+  if (typeof dataUri !== 'string' || !dataUri.startsWith('data:image/svg+xml')) continue
+  const decoded = decodeURIComponent(dataUri.replace(/^data:image\/svg\+xml(;charset=utf-8)?,/, ''))
+  const fname = kebab(name) + '.svg'
+  writeFileSync(join(ASSETS_DIR, fname), decoded)
+  writeMap[dataUri] = ASSET_URL_PREFIX + fname
+}
+
+let scss = cssTemplate
+for (const [uri, url] of Object.entries(writeMap)) {
+  scss = scss.split(`url("${uri}")`).join(`url("${url}")`)
+}
+
+const header = '/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.\n' +
+               '   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */\n\n'
+
+writeFileSync(SCSS_OUT, header + scss + '\n')
+
+console.log(`hot-icons: wrote ${Object.keys(writeMap).length} SVGs + ${SCSS_OUT}`)

client/scripts/strip-clr-base64-fonts.mjs

@@ -0,0 +1,59 @@
+import { readFileSync, writeFileSync, statSync, rmSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+/**
+ * Remove Clarity's Metropolis @font-face blocks from clr-ui.min.css.
+ *
+ * Why: Clarity ships Metropolis as base64 data: URLs. The deployed app
+ * runs under CSP `default-src 'self'` (no data: font-src), so every page
+ * logs a font-load failure for each weight. Firefox preemptively
+ * validates every parsed src against CSP even when a later @font-face
+ * supersedes the rule at render time, so the only way to silence the
+ * console is to remove the offending blocks from the parsed CSS.
+ *
+ * Our styles.scss declares the same family/weight/style with same-origin
+ * .woff files, so removing Clarity's blocks entirely is safe and leaves
+ * Metropolis fully functional.
+ *
+ * Idempotent: matches by font-family, so works on a fresh install or a
+ * file that's already been stripped on a previous run.
+ */
+const target = resolve('node_modules/@clr/ui/clr-ui.min.css')
+
+let css
+try {
+  css = readFileSync(target, 'utf8')
+} catch (err) {
+  if (err.code === 'ENOENT') {
+    console.log(`skip: ${target} not found (likely pre-install run)`)
+    process.exit(0)
+  }
+  throw err
+}
+
+const sizeBefore = statSync(target).size
+const blockRe = /@font-face\{[^}]*Metropolis[^}]*\}/g
+const matches = css.match(blockRe) ?? []
+
+if (matches.length === 0) {
+  console.log(`already stripped: ${target}`)
+  process.exit(0)
+}
+
+const stripped = css.replace(blockRe, '')
+writeFileSync(target, stripped)
+const sizeAfter = Buffer.byteLength(stripped)
+console.log(
+  `removed ${matches.length} Metropolis @font-face block(s) from clr-ui.min.css ` +
+    `(${sizeBefore} -> ${sizeAfter} bytes, saved ${sizeBefore - sizeAfter})`
+)
+
+// Webpack 5's persistent cache treats node_modules as immutable
+// (snapshot.module.managedPaths default), so in-place edits don't
+// invalidate cached entries. Drop the Angular build cache so the next
+// build re-reads our stripped clr-ui.min.css.
+const cacheDir = resolve('.angular/cache')
+if (existsSync(cacheDir)) {
+  rmSync(cacheDir, { recursive: true, force: true })
+  console.log(`cleared ${cacheDir} (webpack persistent cache)`)
+}

client/src/_hot-icons.scss

@@ -0,0 +1,238 @@
+/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.
+   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .pika-single .pika-next {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .pika-single .pika-prev {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-size-section__select-wrapper::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .changeType::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUISelectCaption::after,
+.htAutocompleteArrow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.ascending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.descending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/check.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput {
+  appearance: none;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenColumn::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenColumn::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenRow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenRow::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator::before,
+[class*=ht-theme-classic] .ht_nestingButton::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-off.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator.collapsed::before,
+[class*=ht-theme-classic] .ht_nestingButton.ht_nestingExpand::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-on.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUIRadio > input[type="radio"]::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/radio.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-chip-remove::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-notification__close::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-search-icon {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/search.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-item-selected input::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}

client/src/app/_globals.ts

@@ -55,6 +55,12 @@ export interface HandsontableStaticConfig {
  * Cached viyaApi collections, search and selected endpoint
  */
 export const globals: {
+  embed: boolean | 'va'
+  /**
+   * VA embed filter behavior: 'live' = auto-apply, 'confirm' = manual Apply.
+   * Defaults to 'live'; toggled by the Auto-apply checkbox in the editor.
+   */
+  vaApplyMode: 'live' | 'confirm'
   rootParam: string
   dcLib: string
   xlmaps: XLMapListItem[]
@@ -69,6 +75,8 @@ export const globals: {
   handsontable: HandsontableStaticConfig
   [key: string]: any
 } = {
+  embed: false,
+  vaApplyMode: 'live',
   rootParam: <string>'',
   dcLib: '',
   xlmaps: [],

client/src/app/app.component.html

@@ -1,18 +1,19 @@
 <div class="main-container">
-  <ng-container *ngIf="!router.url.includes('licensing')">
+  @if (!router.url.includes('licensing')) {
+    @if (freeTierBanner && (!licenseExpiringDays || licenseExpiringDays < 0)) {
       <div
-      *ngIf="
-        freeTierBanner && (!licenseExpiringDays || licenseExpiringDays < 0)
-      "
         class="alert alert-app-level alert-warning"
         id="demo-banner"
         role="alert"
       >
-      <ng-container *ngIf="licenceProblem.value === null">
+        @if (licenceProblem.value === null) {
           <div class="alert-items">
             <div class="alert-item static">
               <div class="alert-icon-wrapper">
-              <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
+                <cds-icon
+                  class="alert-icon"
+                  shape="warning-standard"
+                ></cds-icon>
               </div>
               <div class="alert-text">
                 Data Controller (FREE Tier) - to upgrade contact
@@ -20,34 +21,34 @@
               </div>
             </div>
           </div>
-
           <a routerLink="/licensing/update" class="update-key"
             >Update Licence Key</a
           >
-      </ng-container>
-
-      <ng-container *ngIf="licenceProblem.value !== null">
+        }
+        @if (licenceProblem.value !== null) {
           <div class="alert-items">
             <div class="alert-item static">
               <div class="alert-icon-wrapper">
-              <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
+                <cds-icon
+                  class="alert-icon"
+                  shape="warning-standard"
+                ></cds-icon>
               </div>
               <div class="alert-text">
                 Data Controller (FREE Tier) - Problem with licence
               </div>
             </div>
           </div>
-
           <a
             (click)="licenceProblemDetails(licenceProblem.value)"
             class="update-key cursor-pointer"
             >More details</a
           >
-      </ng-container>
+        }
       </div>
-
+    }
+    @if (licenseExpiringDays && !freeTierBanner) {
       <div
-      *ngIf="licenseExpiringDays && !freeTierBanner"
         class="alert alert-app-level alert-danger"
         id="demo-banner"
         role="alert"
@@ -57,7 +58,6 @@
             <div class="alert-icon-wrapper">
               <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
             </div>
-
             <div class="alert-text">
               This license key will expire in {{ licenseExpiringDays }}
               {{ licenseExpiringDays === 1 ? 'day' : 'days' }}. Please contact
@@ -67,17 +67,15 @@
             </div>
           </div>
         </div>
-
-      <a
-        *ngIf="!freeTierBanner"
-        routerLink="/licensing/update"
-        class="update-key"
+        @if (!freeTierBanner) {
+          <a routerLink="/licensing/update" class="update-key"
             >Update Licence Key</a
           >
+        }
       </div>
-
+    }
+    @if (appOverCapacity) {
       <div
-      *ngIf="appOverCapacity"
         class="alert alert-app-level alert-danger"
         id="demo-banner"
         role="alert"
@@ -87,26 +85,25 @@
             <div class="alert-icon-wrapper">
               <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
             </div>
-
             <div class="alert-text">
-            The registered number of users exceeds the limit specified for your
-            license. Please contact
+              The registered number of users exceeds the limit specified for
+              your license. Please contact
               <contact-link classes="color-white" />
               or your reseller to arrange additional licence for site id
               {{ syssite.getValue() }}.
             </div>
           </div>
         </div>
-
-      <a
-        *ngIf="!licenseExpiringDays && !freeTierBanner"
-        routerLink="/licensing/update"
-        class="update-key"
+        @if (!licenseExpiringDays && !freeTierBanner) {
+          <a routerLink="/licensing/update" class="update-key"
             >Update Licence Key</a
           >
+        }
       </div>
-  </ng-container>
+    }
+  }
 
+  @if (!embed) {
     <header class="app-header">
       <!-- <button
       *ngIf="
@@ -119,26 +116,22 @@
               >
               <span></span>
             </button> -->
-
-    <div
-      *ngIf="
+      @if (
         isMainRoute('view') ||
         (isMainRoute('home') && !router.url.includes('licensing'))
-      "
+      ) {
+        <div
           (click)="toggleSidebar()"
           type="button"
+          aria-label="Toggle sidebar"
           class="cursor-pointer select-none ml-10 d-flex clr-justify-content-center clr-align-items-center"
         >
-      <clr-icon size="24" shape="tree-view"></clr-icon>
+          <clr-icon size="24" shape="tree-view" aria-hidden="true"></clr-icon>
         </div>
-
+      }
       <div class="logo d-flex clr-align-items-center">
-      <a
-        *ngIf="!router.url.includes('deploy')"
-        href="#"
-        [routerLink]="['/']"
-        class="nav-link"
-      >
+        @if (!router.url.includes('deploy')) {
+          <a href="#" [routerLink]="['/']" class="nav-link">
             <img
               class="without-text d-block d-md-none"
               src="images/dc-logo.svg"
@@ -150,17 +143,16 @@
               alt="datacontroller logo"
             />
           </a>
-
-      <a *ngIf="router.url.includes('deploy')">
+        }
+        @if (router.url.includes('deploy')) {
+          <a>
             <span class="clr-icon header-logo ml-10"></span>
           </a>
+        }
       </div>
-
-    <ng-container
-      *ngIf="
+      @if (
         !router.url.includes('deploy') && !router.url.includes('licensing')
-      "
-    >
+      ) {
         <div class="header-nav d-flex d-sm-none">
           <clr-dropdown>
             <button
@@ -178,7 +170,6 @@
             </clr-dropdown-menu>
           </clr-dropdown>
         </div>
-
         <div class="header-nav d-none d-sm-flex">
           <a
             [routerLink]="['/view']"
@@ -207,18 +198,17 @@
             >REVIEW</a
           >
         </div>
-    </ng-container>
-
+      }
       <app-header-actions></app-header-actions>
     </header>
-  <nav
-    *ngIf="
-      router.url.includes('submitted') ||
+  }
+  @if (
+    !embed &&
+    (router.url.includes('submitted') ||
       router.url.includes('approve') ||
-      router.url.includes('history')
-    "
-    class="subnav"
-  >
+      router.url.includes('history'))
+  ) {
+    <nav class="subnav">
       <ul class="nav">
         <li class="nav-item">
           <a
@@ -247,24 +237,51 @@
         </li>
       </ul>
     </nav>
+  }
 
-  <app-alerts *ngIf="!errTop"></app-alerts>
+  @if (!errTop) {
+    <app-alerts></app-alerts>
+  }
   <app-requests-modal [(opened)]="requestsModal"></app-requests-modal>
   <app-excel-password-modal></app-excel-password-modal>
 
   <!-- <app-terms *ngIf="showRegistration"></app-terms> -->
 
-  <router-outlet *ngIf="startupDataLoaded"></router-outlet>
+  <!-- VA embed, back to Editor button -->
+  @if (embed === 'va' && vaEditorLibds && !isMainRoute('/editor')) {
+    <div class="va-back-bar">
+      <button
+        type="button"
+        class="btn btn-sm btn-primary"
+        (click)="backToEditor()"
+      >
+        <clr-icon
+          aria-hidden="true"
+          shape="caret"
+          dir="left"
+          size="16"
+        ></clr-icon>
+        Back to Edit table
+      </button>
+    </div>
+  }
+
+  @if (startupDataLoaded) {
+    <router-outlet></router-outlet>
+  }
 
   <app-login></app-login>
-  <app-alerts *ngIf="errTop"></app-alerts>
+  @if (errTop) {
+    <app-alerts></app-alerts>
+  }
+  @for (abort of sasjsAborts; track abort) {
     <app-info-modal
-    *ngFor="let abort of sasjsAborts"
       [data]="abort"
       [forceReload]="!startupDataLoaded && sasjsAborts.length === 1"
       (onConfirmModalClick)="closeAbortModal(abort.id!)"
     >
     </app-info-modal>
+  }
 
   <clr-modal
     appDragNdrop
@@ -287,17 +304,20 @@
 </div>
 
 <!-- App Loading Page -->
-<div *ngIf="!startupDataLoaded" class="app-loading">
+@if (!startupDataLoaded) {
+  <div class="app-loading">
     <img
       class="loading-logo"
       src="images/datacontroller.svg"
       alt="datacontroller logo"
     />
-
-  <div *ngIf="appActive === null" class="slider">
+    @if (appActive === null) {
+      <div class="slider">
         <div class="line"></div>
         <div class="subline inc"></div>
         <div class="subline dec"></div>
       </div>
+    }
   </div>
+}
 <!-- /App Loading Page -->

client/src/app/app.component.scss

@@ -0,0 +1,10 @@
+.va-back-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.35rem 0.6rem;
+  background: #fafafa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}

client/src/app/app.component.ts

@@ -11,6 +11,7 @@ import { Location } from '@angular/common'
 import '@clr/icons'
 import '@clr/icons/shapes/all-shapes'
 import { globals } from './_globals'
+import { parseEmbedParam } from './shared/utils/parse-embed-param'
 import moment from 'moment'
 import { EventService } from './services/event.service'
 import { AppService } from './services/app.service'
@@ -70,6 +71,7 @@ export class AppComponent {
 
   public syssite = this.appService.syssite
   public licenceState = this.licenceService.licenceState
+  public embed = globals.embed
 
   constructor(
     private appService: AppService,
@@ -143,6 +145,13 @@ export class AppComponent {
       }
     })
 
+    const hashQuery = window.location.hash.split('?')[1]
+    if (hashQuery && new URLSearchParams(hashQuery).get('embed') !== null) {
+      const embed = parseEmbedParam(hashQuery)
+      globals.embed = embed
+      this.embed = embed
+    }
+
     this.subscribeToShowAbortModal()
     this.subscribeToRequestsModal()
     this.subscribeToStartupData()
@@ -198,6 +207,7 @@ export class AppComponent {
       dcPath: getAppAttribute('dcPath') || '',
       debug: getAppAttribute('debug') === 'true' || false,
       useComputeApi: this.parseComputeApi(getAppAttribute('useComputeApi')),
+      runAsTask: getAppAttribute('runAsTask') === 'true' || false,
       contextName: getAppAttribute('contextName') || '',
       hotLicenceKey: getAppAttribute('hotLicenceKey') || ''
     }
@@ -342,4 +352,23 @@ export class AppComponent {
   public openLicencingPage() {
     this.router.navigateByUrl('/licensing/update')
   }
+
+  /** "lib.table" of the last-opened editor table (for the VA embed back button). */
+  get vaEditorLibds(): string {
+    const e = globals.editor
+    return e?.library && e?.table ? `${e.library}.${e.table}` : ''
+  }
+
+  /**
+   * VA embed only: returns to the editor for the last-opened table. Lets users
+   * who land on the stage/approve/review pages get back without knowing DC's
+   * page paths. `globals.embed` (set at app init) keeps the editor in VA mode.
+   */
+  public backToEditor(): void {
+    if (this.vaEditorLibds) {
+      this.router.navigate(['/editor/' + this.vaEditorLibds], {
+        queryParams: { embed: 'va' }
+      })
+    }
+  }
 }

client/src/app/app.d.ts

@@ -1,5 +1,4 @@
 declare module 'save-svg-as-png'
-declare module 'numbro/dist/languages.min'
 declare interface Navigator {
   msSaveBlob: (blob: any, defaultName?: string) => boolean
 }

client/src/app/deploy/deploy.component.html

@@ -1,14 +1,15 @@
-<div class="content-area position-relative">
+<main class="content-area position-relative">
   <div class="clr-row">
     <!-- T&C section -->
-    <div *ngIf="step === 0" id="TCS" class="card">
+    @if (step === 0) {
+      <div id="TCS" class="card">
         <div class="card-header">Terms and Conditions</div>
         <div class="card-block">
           <div class="card-text">
             <p class="mt-0">
-            The Demo version of Data Controller is free for EVALUATION purposes
-            only. Before proceeding with configuration, please confirm that you
-            have read, understood, and agreed to the
+              The Demo version of Data Controller is free for EVALUATION
+              purposes only. Before proceeding with configuration, please
+              confirm that you have read, understood, and agreed to the
               <a
                 href="https://docs.datacontroller.io/evaluation-licence-agreement"
                 target="_blank"
@@ -16,9 +17,7 @@
               >.
             </p>
           </div>
-
           <hr class="light" />
-
           <clr-checkbox-wrapper>
             <input clrCheckbox type="checkbox" (change)="termsAgreeChange()" />
             <label
@@ -30,9 +29,7 @@
               ></label
             >
           </clr-checkbox-wrapper>
-
           <!-- <hr />
-
                 <div class="clr-checkbox-wrapper">
                   <input
                     [(ngModel)]="autodeploy"
@@ -48,12 +45,15 @@
                   </div> -->
         </div>
       </div>
+    }
   </div>
   <!-- T&C section end -->
 
-  <ng-container *ngIf="step > 0" [ngSwitch]="true">
-    <ng-container *ngSwitchCase="sasJsConfig.serverType === ServerType.SasViya">
-      <div *ngIf="autodeploy" class="autodeploy-section card">
+  @if (step > 0) {
+    @switch (true) {
+      @case (sasJsConfig.serverType === ServerType.SasViya) {
+        @if (autodeploy) {
+          <div class="autodeploy-section card">
             <app-automatic-deploy
               [sasJs]="sasJs"
               [sasJsConfig]="sasJsConfig"
@@ -64,8 +64,9 @@
               (onNavigateToHome)="onNavigateToHome()"
             ></app-automatic-deploy>
           </div>
-
-      <div *ngIf="!autodeploy" id="mainbody" class="card">
+        }
+        @if (!autodeploy) {
+          <div id="mainbody" class="card">
             <app-manual-deploy
               [sasJs]="sasJs"
               [sasJsConfig]="sasJsConfig"
@@ -73,9 +74,9 @@
               (onNavigateToHome)="onNavigateToHome()"
             ></app-manual-deploy>
           </div>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="sasJsConfig.serverType === ServerType.Sasjs">
+        }
+      }
+      @case (sasJsConfig.serverType === ServerType.Sasjs) {
         <div class="autodeploy-section card">
           <app-sasjs-configurator
             [sasJs]="sasJs"
@@ -84,9 +85,8 @@
             (onNavigateToHome)="onNavigateToHome()"
           ></app-sasjs-configurator>
         </div>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="sasJsConfig.serverType === ServerType.Sas9">
+      }
+      @case (sasJsConfig.serverType === ServerType.Sas9) {
         <div class="autodeploy-section card">
           <app-sasjs-configurator
             [sasJs]="sasJs"
@@ -95,6 +95,7 @@
             (onNavigateToHome)="onNavigateToHome()"
           ></app-sasjs-configurator>
         </div>
-    </ng-container>
-  </ng-container>
-</div>
+      }
+    }
+  }
+</main>

client/src/app/deploy/sections/automatic/automatic.component.html

@@ -1,73 +1,62 @@
-<div *ngIf="autodeploying" class="auto-deploy">
+@if (autodeploying) {
+  <div class="auto-deploy">
     <div class="spinner-box">
-    <ng-container *ngIf="!autodeployDone">
+      @if (!autodeployDone) {
         <span class="spinner spinner-md"> Loading... </span>
         <p>Deploying...</p>
-    </ng-container>
-
-    <ng-container *ngIf="autodeployDone">
+      }
+      @if (autodeployDone) {
         <p class="m-0 align-self-start">Done</p>
         <hr class="w-100" />
-
-      <div
-        *ngIf="autoDeployStatus.deployServicePack !== null"
-        class="deploy-status-row"
-      >
+        @if (autoDeployStatus.deployServicePack !== null) {
+          <div class="deploy-status-row">
+            @if (autoDeployStatus.deployServicePack === true) {
               <clr-icon
-          *ngIf="autoDeployStatus.deployServicePack === true"
                 class="deploy-success"
                 shape="success-standard"
               ></clr-icon>
-        <clr-icon
-          *ngIf="!autoDeployStatus.deployServicePack === false"
-          class="deploy-error"
-          shape="times-circle"
-        ></clr-icon>
+            }
+            @if (!autoDeployStatus.deployServicePack === false) {
+              <clr-icon class="deploy-error" shape="times-circle"></clr-icon>
+            }
             <p>Deploy SAS Jobs</p>
           </div>
-
-      <div
-        *ngIf="autoDeployStatus.runMakeData !== null"
-        class="deploy-status-row"
-      >
+        }
+        @if (autoDeployStatus.runMakeData !== null) {
+          <div class="deploy-status-row">
+            @if (autoDeployStatus.runMakeData) {
               <clr-icon
-          *ngIf="autoDeployStatus.runMakeData"
                 class="deploy-success"
                 shape="success-standard"
               ></clr-icon>
-        <clr-icon
-          *ngIf="autoDeployStatus.runMakeData === false"
-          class="deploy-error"
-          shape="times-circle"
-        ></clr-icon>
+            }
+            @if (autoDeployStatus.runMakeData === false) {
+              <clr-icon class="deploy-error" shape="times-circle"></clr-icon>
+            }
             <p>Create database</p>
           </div>
-
+        }
         <hr class="w-100" />
-
         <div class="buttons">
           <button (click)="navigateToHome()" class="btn btn-primary mt-15 mr-0">
-          <clr-icon
-            *ngIf="
+            @if (
               autoDeployStatus.deployServicePack === false ||
               autoDeployStatus.runMakeData === false
-            "
-            class="deploy-error"
-            shape="times-circle"
-          ></clr-icon>
+            ) {
+              <clr-icon class="deploy-error" shape="times-circle"></clr-icon>
+            }
             LAUNCH
           </button>
-
           <button
-          (click)="downloadFile(makeDataResponse, 'create-database-log', 'txt')"
+            (click)="
+              downloadFile(makeDataResponse, 'create-database-log', 'txt')
+            "
             class="btn btn-primary-outline mt-15 mr-0"
           >
             Download log
           </button>
         </div>
-
         <hr class="w-100" />
-
         <div class="buttons">
           <button
             (click)="autodeploying = false; autodeployDone = false"
@@ -75,7 +64,6 @@
           >
             Close
           </button>
-
           <button
             (click)="openSasRequestsModal()"
             class="btn btn-primary-outline mt-15 mr-0 align-self-end"
@@ -83,9 +71,10 @@
             SAS Requests
           </button>
         </div>
-    </ng-container>
+      }
     </div>
   </div>
+}
 
 <h4 class="text-center my-15">Viya Deploy</h4>
 <hr />
@@ -106,21 +95,18 @@
 <label for="dcloc" class="mt-20 clr-control-label">SAS Admin group</label>
 <div class="mb-10 clr-control-container">
   <div class="clr-input-wrapper small-mt">
-    <select
-      *ngIf="!adminGroupsLoading"
-      clrSelect
-      name="options"
-      [(ngModel)]="selectedAdminGroup"
-    >
-      <option *ngFor="let adminGroup of adminGroups" [value]="adminGroup.id">
+    @if (!adminGroupsLoading) {
+      <select clrSelect name="options" [(ngModel)]="selectedAdminGroup">
+        @for (adminGroup of adminGroups; track adminGroup) {
+          <option [value]="adminGroup.id">
             {{ adminGroup.name }}
           </option>
+        }
       </select>
-    <clr-spinner
-      clrInline
-      class="spinner-sm"
-      *ngIf="adminGroupsLoading"
-    ></clr-spinner>
+    }
+    @if (adminGroupsLoading) {
+      <clr-spinner clrInline class="spinner-sm"></clr-spinner>
+    }
   </div>
 </div>
 
@@ -129,36 +115,34 @@
 >
 <div class="mb-10 clr-control-container">
   <div class="clr-input-wrapper small-mt">
+    @if (!computeContextsLoading) {
       <select
-      *ngIf="!computeContextsLoading"
         clrSelect
         name="options"
         (ngModelChange)="onComputeContextChange($event)"
         [(ngModel)]="selectedComputeContext"
       >
-      <option
-        *ngFor="let computeContext of computeContexts"
-        [value]="computeContext.id"
-      >
+        @for (computeContext of computeContexts; track computeContext) {
+          <option [value]="computeContext.id">
             {{ computeContext.name }}
           </option>
+        }
       </select>
-    <clr-spinner
-      clrInline
-      class="spinner-sm"
-      *ngIf="computeContextsLoading"
-    ></clr-spinner>
+    }
+    @if (computeContextsLoading) {
+      <clr-spinner clrInline class="spinner-sm"></clr-spinner>
+    }
   </div>
 </div>
 
-<ng-container *ngIf="runningAsUser">
+@if (runningAsUser) {
   <label for="dcloc" class="mt-20 clr-control-label">Running as user:</label>
   <div class="mb-10 clr-control-container">
     <div class="clr-input-wrapper">
       <p class="mt-0">{{ runningAsUser }}</p>
     </div>
   </div>
-</ng-container>
+}
 
 <!-- Keeping this for a reference in case future VIYA changes and starts allowing separate backend and frontend) -->
 

client/src/app/deploy/sections/automatic/automatic.component.ts

@@ -373,7 +373,7 @@ export class AutomaticComponent implements OnInit {
     let contextname = `&_contextname=${params.contextName}`
     let admin = `&admin=${params.admin}`
     let dcPath = `&dcpath=${params.dcPath}`
-    let debug = `&_debug=131`
+    let debug = this.sasService.getDebugUrlParam()
 
     let programUrl =
       serverUrl +

client/src/app/deploy/sections/manual/manual.component.html

@@ -13,7 +13,8 @@
   Client Details
 </div> -->
 
-  <div *ngIf="needsLogin" id="loginForm" class="d-none">
+  @if (needsLogin) {
+    <div id="loginForm" class="d-none">
       <p class="mb-10">Please log in first</p>
       <label for="username" class="clr-control-label">Username</label>
       <div class="mb-10 clr-control-container">
@@ -21,18 +22,17 @@
           <input type="text" id="username" class="clr-input" />
         </div>
       </div>
-
       <label for="password" class="clr-control-label">Password</label>
       <div class="mb-10 clr-control-container">
         <div class="clr-input-wrapper">
           <input type="password" id="password" class="clr-input" />
         </div>
       </div>
-
       <button class="btn btn-primary d-none" id="loginBtn">Log in</button>
     </div>
+  }
 
-  <ng-container *ngIf="!needsLogin">
+  @if (!needsLogin) {
     <form>
       <div class="clr-form-control">
         <label for="select-full" class="clr-control-label">Admin group</label>
@@ -45,17 +45,15 @@
               id="adminGroupsSelect"
               class="clr-select"
             >
-              <option
-                *ngFor="let adminGroup of adminGroups"
-                [value]="adminGroup.id"
-              >
+              @for (adminGroup of adminGroups; track adminGroup) {
+                <option [value]="adminGroup.id">
                   {{ adminGroup.name }}
                 </option>
+              }
             </select>
           </div>
         </div>
       </div>
-
       <div class="clr-form-control">
         <div [class.hidden]="contextsLoading">
           <label for="select-full" class="clr-control-label">Context</label>
@@ -67,15 +65,14 @@
                 name="selectedContext"
                 class="clr-select"
               >
-                <option
-                  *ngFor="let context of allContexts"
-                  [value]="context.name"
-                >
+                @for (context of allContexts; track context) {
+                  <option [value]="context.name">
                     {{ context.name }}
-                  <span *ngIf="(context.attributes | json) != '{}'"
-                    >( {{ context.attributes.sysUserId }} )</span
-                  >
+                    @if ((context.attributes | json) != '{}') {
+                      <span>( {{ context.attributes.sysUserId }} )</span>
+                    }
                   </option>
+                }
               </select>
             </div>
           </div>
@@ -88,14 +85,12 @@
             <clr-icon shape="play"></clr-icon>
           </button>
         </div>
-
         <div [class.hidden]="!contextsLoading" class="d-flex">
           <span class="spinner spinner-inline mr-10">
             Loading contexts...
           </span>
           <span> Loading contexts... </span>
         </div>
-
         <label for="dcloc" class="mt-20 clr-control-label">DC Loc</label>
         <div class="mb-10 clr-control-container">
           <div class="clr-input-wrapper">
@@ -110,7 +105,6 @@
             />
           </div>
         </div>
-
         <p class="mt-10">
           Select JSON file to upload (json build file preloaded):
         </p>
@@ -124,7 +118,6 @@
           <clr-icon shape="download"></clr-icon>
         </button> -->
         </div>
-
         <div class="mt-20 d-flex align-items-center">
           <button
             (click)="executeJson()"
@@ -135,13 +128,13 @@
           >
             SUBMIT JSON
           </button>
-          <span *ngIf="isJsonSubmitted">JSON Submitted Successfully</span>
-
+          @if (isJsonSubmitted) {
+            <span>JSON Submitted Successfully</span>
+          }
           <!-- <span *ngIf="executingScript" class="spinner spinner-inline ml-3">
         Loading...
       </span> -->
         </div>
-
         <p class="mt-10">Select SAS file to upload:</p>
         <div class="d-flex flex-column">
           <input
@@ -149,15 +142,15 @@
             (click)="clearUploadInput($event)"
             (change)="onSasFileChange($event); downloadFileBtn = true"
           />
+          @if (downloadFileBtn) {
             <button
-            *ngIf="downloadFileBtn"
               (click)="downloadSasPrecodeFile()"
               class="btn btn-sm btn-icon min-w-0 w-40"
             >
               <clr-icon shape="download"></clr-icon>
             </button>
+          }
         </div>
-
         <div class="mt-20 d-flex align-items-center">
           <button
             (click)="executeSAS()"
@@ -168,17 +161,14 @@
           >
             SUBMIT
           </button>
-
           <!-- <span *ngIf="executingScript" class="spinner spinner-inline ml-3">
       Loading...
     </span> -->
         </div>
       </div>
-
-      <ng-container *ngIf="jobLog.length > 0">
+      @if (jobLog.length > 0) {
         <p class="mb-0 mt-10">File execute completed</p>
         <hr />
-
         <div>
           <button
             (click)="downloadFile(jobLog, 'execute-script-log', 'txt')"
@@ -187,8 +177,7 @@
             Download log
           </button>
         </div>
-      </ng-container>
-
+      }
       <button
         [clrLoading]="createDatabaseLoading"
         (click)="createDatabase()"
@@ -196,52 +185,45 @@
       >
         Create Database
       </button>
-
-      <ng-container *ngIf="makeDataResponse.length > 0">
+      @if (makeDataResponse.length > 0) {
         <p class="mb-0 mt-10">Create Database Completed</p>
         <hr />
-
-        <div *ngIf="makeDataResponse.length > 0" class="log-wrapper">
+        @if (makeDataResponse.length > 0) {
+          <div class="log-wrapper">
             {{ makeDataResponse }}
           </div>
-
+        }
         <button (click)="navigateToHome()" class="btn btn-primary mt-15">
           Let's get started
         </button>
-
         <button
           (click)="downloadFile(makeDataResponse, 'create-database-log', 'txt')"
           class="btn btn-primary mt-15"
         >
           Download log
         </button>
-
         <button (click)="validateDeploy()" class="btn btn-primary mt-15">
           Validate
         </button>
-
-        <div
-          *ngIf="validationState !== 'none' || isValidating"
-          class="validation-bar"
-        >
-          <ng-container *ngIf="isValidating">
+        @if (validationState !== 'none' || isValidating) {
+          <div class="validation-bar">
+            @if (isValidating) {
               <span class="spinner spinner-inline mr-10">
                 Validating deploy...
               </span>
               <span> Validating deploy... </span>
-          </ng-container>
-
-          <ng-container *ngIf="!isValidating && validationState === 'error'">
+            }
+            @if (!isValidating && validationState === 'error') {
               <clr-icon shape="exclamation-circle" class="is-error"></clr-icon>
               <span> Validation failed </span>
-          </ng-container>
-
-          <ng-container *ngIf="!isValidating && validationState === 'success'">
+            }
+            @if (!isValidating && validationState === 'success') {
               <clr-icon shape="check-circle" class="is-success"></clr-icon>
               <span> Validation succeeded </span>
-          </ng-container>
+            }
           </div>
-      </ng-container>
+        }
+      }
     </form>
-  </ng-container>
+  }
 </div>

client/src/app/deploy/sections/manual/manual.component.ts

@@ -251,7 +251,7 @@ export class ManualComponent implements OnInit {
           this.selectedAdminGroup +
           '&DCPATH=' +
           this.dcPath +
-          '&_debug=131'
+          this.sasService.getDebugUrlParam()
 
       window.open(url, '_blank')
 

client/src/app/deploy/sections/sasjs-configurator/sasjs-configurator.component.html

@@ -1,6 +1,8 @@
-<div *ngIf="loading" class="thinProgress progresStatic progress loop">
+@if (loading) {
+  <div class="thinProgress progresStatic progress loop">
     <progress></progress>
   </div>
+}
 
 <h4 class="text-center my-15">Sasjs Deploy</h4>
 <hr class="light" />
@@ -45,12 +47,11 @@
 <label class="mt-20 clr-control-label">Data Controller Admin group</label>
 <clr-select-container class="mb-10 mt-0 w-50vw">
   <select [(ngModel)]="dcAdminGroup" clrSelect>
-    <option
-      *ngFor="let adminGroup of dcAdminGroupList"
-      [value]="adminGroup.GROUPNAME"
-    >
+    @for (adminGroup of dcAdminGroupList; track adminGroup) {
+      <option [value]="adminGroup.GROUPNAME">
         {{ adminGroup.GROUPNAME }} - {{ adminGroup.GROUPDESC }}
       </option>
+    }
   </select>
 </clr-select-container>
 

client/src/app/editor/components/edit-record/edit-record.component.html

@@ -84,6 +84,20 @@
                 status="warning"
               ></clr-icon>
 
+              <!-- SOFTREGEX: value doesn't match the expected pattern, but
+                   submission is still allowed (unlike HARDREGEX, which is
+                   surfaced via the existing invalid-data class below). -->
+              <clr-icon
+                *ngIf="
+                  !currentRecordErrors.includes(colIndex) &&
+                  currentRecordWarningCols.includes(col.key)
+                "
+                class="flex-unset position-absolute entry-input-left-offset"
+                shape="error-standard"
+                status="warning"
+                title="Value does not match the expected pattern"
+              ></clr-icon>
+
               <ng-container *ngSwitchCase="'numeric'">
                 <clr-input-container
                   *ngIf="
@@ -177,45 +191,45 @@
                 </div>
               </ng-container>
 
-              <clr-textarea-container class="date-field" *ngSwitchCase="'time'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-time'">
+                <input
+                  type="time"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                   [class.invalid-data]="
                     currentRecordInvalidCols.includes(col.key)
                   "
-                  [rows]="col.value.length > 80 ? 6 : 1"
-                  [(ngModel)]="currentRecord[col.key]"
-                  [class.not-char]="
-                    currentRecordValidator?.getRule(col.key)?.type
-                  "
-                ></textarea>
-                <clr-control-helper>HH:mm:ss</clr-control-helper>
-              </clr-textarea-container>
+                  [value]="currentRecord[col.key]"
+                  (change)="recordTimeChange($event, col.key)"
+                />
+              </div>
 
-              <div class="date-field" *ngSwitchCase="'date'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-datetime'">
+                <input
+                  type="datetime-local"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                   [class.invalid-data]="
                     currentRecordInvalidCols.includes(col.key)
                   "
-                  rows="1"
-                  cols="auto"
-                  class="not-char"
-                  [(ngModel)]="currentRecord[col.key]"
-                ></textarea>
-                <clr-date-container class="date-picker">
+                  [value]="toNativeDatetime(currentRecord[col.key])"
+                  (change)="recordDatetimeChange($event, col.key)"
+                />
+              </div>
+
+              <div class="date-field" *ngSwitchCase="'intl-date'">
                 <input
                   type="date"
-                    name="date"
-                    class="d-none"
-                    (clrDateChange)="recordDateChange($event, col.key)"
-                    clrDate
+                  class="date-input"
+                  [attr.aria-label]="col.key"
+                  [class.invalid-data]="
+                    currentRecordInvalidCols.includes(col.key)
+                  "
+                  [value]="currentRecord[col.key]"
+                  (change)="recordDateChange($event, col.key)"
                 />
-                </clr-date-container>
               </div>
               <div *ngSwitchCase="'autocomplete'">
                 <ng-container
@@ -255,6 +269,7 @@
         type="button"
         class="btn btn-outline focusable"
         tabindex="0"
+        aria-label="Previous record"
         (click)="onPreviousRecordClick()"
         [disabled]="currentRecordInvalidCols.length > 0"
       >
@@ -267,6 +282,7 @@
         type="button"
         class="btn btn-outline focusable"
         tabindex="0"
+        aria-label="Next record"
         (click)="onNextRecordClick()"
         [disabled]="currentRecordInvalidCols.length > 0"
       >

client/src/app/editor/components/edit-record/edit-record.component.ts

@@ -2,12 +2,12 @@ import { KeyValue } from '@angular/common'
 import {
   Component,
   EventEmitter,
+  HostListener,
   Input,
   OnInit,
   Output,
   ViewEncapsulation
 } from '@angular/core'
-import moment from 'moment'
 import { ValidateFilterSASResponse } from 'src/app/models/sas/validate-filter.model'
 import { QueryClause } from 'src/app/models/TableData'
 import { HelperService } from 'src/app/services/helper.service'
@@ -55,6 +55,7 @@ export class EditRecordComponent implements OnInit {
   @Output() onPreviousRecord: EventEmitter<any> = new EventEmitter<any>()
 
   public currentRecordInvalidCols: string[] = []
+  public currentRecordWarningCols: string[] = []
   public generateEditRecordUrlLoading: boolean = false
   public generatedRecordUrl: string | null = null
   public addRecordUrl: string | null = null
@@ -91,17 +92,72 @@ export class EditRecordComponent implements OnInit {
   }
 
   /**
-   * Fired when date field in the record change
-   * Function will parse date and format to string
-   * @param date picker value
+   * Fired when the native date picker (intl-date) changes. A native
+   * `<input type="date">` value is always ISO `YYYY-MM-DD`, so it is stored
+   * as-is. Mirrors recordTimeChange / recordDatetimeChange.
+   * @param event native <input type="date"> change event
    * @param colKey column name (key)
    */
-  recordDateChange(date: Date, colKey: string) {
-    let cellValidation = this.currentRecordValidator?.getRule(colKey)
-    let format = cellValidation ? cellValidation.dateFormat : ''
+  recordDateChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DD
+    if (!value || !this.currentRecord) return
+    this.currentRecord[colKey] = value
+    this.revalidateRecordCol(colKey, value)
+  }
 
-    if (this.currentRecord)
-      this.currentRecord[colKey] = moment(date).format(format)
+  /**
+   * Stored `YYYY-MM-DD HH:mm:ss` → native `<input type="datetime-local">` value
+   * `YYYY-MM-DDTHH:mm:ss`, so the picker opens at the current value.
+   */
+  toNativeDatetime(value: any): string {
+    if (typeof value !== 'string') return ''
+    return value.includes(' ') ? value.replace(' ', 'T') : value
+  }
+
+  /**
+   * Re-runs validation for a column after a native picker change (the picker
+   * handlers set the value programmatically, which does not fire the textarea's
+   * input handler). Mirrors recordInputChange's validate + state update.
+   */
+  private revalidateRecordCol(colName: string, value: any) {
+    const colRules = this.currentRecordValidator?.getRule(colName)
+
+    this.validateRecordCol(colRules, value).then((valid: boolean) =>
+      this.updateValidationState(colName, valid)
+    )
+
+    this.updateWarningState(colName, value)
+  }
+
+  /**
+   * Fired when the native time picker (intl-time) changes. Stores 24h
+   * `HH:mm:ss`, padding the seconds the browser may omit. Mirrors the
+   * IntlDatetimeEditor conversion used by the HOT grid.
+   * @param event native <input type="time"> change event
+   * @param colKey column name (key)
+   */
+  recordTimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // HH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const stored = value.length === 5 ? `${value}:00` : value
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
+  }
+
+  /**
+   * Fired when the native datetime picker (intl-datetime) changes. Converts the
+   * native `YYYY-MM-DDTHH:mm[:ss]` into SAS' stored `YYYY-MM-DD HH:mm:ss`,
+   * padding seconds. Mirrors the IntlDatetimeEditor conversion used by the grid.
+   * @param event native <input type="datetime-local"> change event
+   * @param colKey column name (key)
+   */
+  recordDatetimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DDTHH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const [date, time] = value.split('T')
+    const stored = `${date} ${time.length === 5 ? `${time}:00` : time}`
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
   }
 
   /**
@@ -120,6 +176,16 @@ export class EditRecordComponent implements OnInit {
     this.onRecordEditClose.emit()
   }
 
+  /**
+   * Close the modal on Escape (cancel, like the Close button). A native picker
+   * swallows the first Escape to dismiss itself, so the modal only closes once
+   * focus is back on the form.
+   */
+  @HostListener('document:keydown.escape')
+  onEscapeKey() {
+    this.closeRecordEdit()
+  }
+
   /**
    * Emitting output event when dropdown (autocomplete) input in any col change
    * @param colName column name (key)
@@ -159,6 +225,8 @@ export class EditRecordComponent implements OnInit {
           this.tryAutoPopulateNotNull(event, colName, colRules, value)
         }
       })
+
+      this.updateWarningState(colName, value)
     })
   }
 
@@ -175,6 +243,22 @@ export class EditRecordComponent implements OnInit {
     }
   }
 
+  /**
+   * Updates the SOFTREGEX warning columns list — the modal's equivalent of
+   * makeRegexWarningRenderer in the grid (see DcValidator.failsSoftRegex).
+   */
+  private updateWarningState(colName: string, value: any): void {
+    const failsSoftRegex =
+      this.currentRecordValidator?.failsSoftRegex(colName, value) ?? false
+    const index = this.currentRecordWarningCols.indexOf(colName)
+
+    if (!failsSoftRegex && index > -1) {
+      this.currentRecordWarningCols.splice(index, 1)
+    } else if (failsSoftRegex && index < 0) {
+      this.currentRecordWarningCols.push(colName)
+    }
+  }
+
   /**
    * Auto-populates NOTNULL default value when the field is empty and has a default
    */
@@ -202,6 +286,8 @@ export class EditRecordComponent implements OnInit {
     this.validateRecordCol(colRules, defaultValue).then((isValid: boolean) => {
       this.updateValidationState(colName, isValid)
     })
+
+    this.updateWarningState(colName, defaultValue)
   }
 
   onNextRecordClick() {
@@ -233,8 +319,9 @@ export class EditRecordComponent implements OnInit {
           if (obj.data === key) {
             if (
               obj.type === 'numeric' ||
-              obj.type === 'date' ||
-              obj.type === 'time'
+              obj.type === 'intl-date' ||
+              obj.type === 'intl-time' ||
+              obj.type === 'intl-datetime'
             ) {
               type = 'N'
             }

client/src/app/editor/components/upload-stater/upload-stater.component.html

@@ -1,7 +1,9 @@
 <div>
-  <p class="m-0" *ngFor="let state of processedStates; let i = index">
+  @for (state of processedStates; track state; let i = $index) {
+    <p class="m-0">
       {{ state }}
     </p>
+  }
 </div>
 <div class="text-center">
   <span class="spinner spinner-sm vertical-align-middle">Loading...</span>

client/src/app/editor/editor.component.html

@@ -1,4 +1,4 @@
-<div class="content-area d-flex clr-flex-column">
+<main class="content-area d-flex clr-flex-column">
   <clr-modal
     appFileDrop
     (fileOver)="fileOverBase($event)"
@@ -62,10 +62,8 @@
               </clr-radio-container>
             </div>
           </div>
-          <div
-            *ngIf="!excelFileParsing && !uploadLoading"
-            class="clr-col-md-3 filterBtn"
-          >
+          @if (!excelFileParsing && !uploadLoading) {
+            <div class="clr-col-md-3 filterBtn">
               <span class="filterBtn w-100">
                 <label
                   for="file-upload"
@@ -84,11 +82,10 @@
                 (change)="attachFile($event)"
               />
             </div>
+          }
 
-          <div
-            *ngIf="!excelFileParsing && !uploadLoading"
-            class="clr-col-md-3 editBtn"
-          >
+          @if (!excelFileParsing && !uploadLoading) {
+            <div class="clr-col-md-3 editBtn">
               <button
                 [disabled]="true"
                 class="btnView btn btn-sm btn-success profile-buttons w-100"
@@ -97,10 +94,11 @@
                 Upload
               </button>
             </div>
+          }
 
           <div class="clr-col-md-auto">
+            @if (excelUploadState !== 'Validating') {
               <button
-              *ngIf="excelUploadState !== 'Validating'"
                 type="button"
                 class="btn btn-primary mr-0"
                 (click)="showUploadModal = false"
@@ -108,19 +106,23 @@
               >
                 Close
               </button>
+            }
+            @if (excelUploadState === 'Validating-DQ') {
               <button
-              *ngIf="excelUploadState === 'Validating-DQ'"
                 type="button"
                 class="btn btn-primary mr-0"
                 (click)="showUploadModal = false"
               >
                 Skip
               </button>
+            }
           </div>
 
-          <div *ngIf="excelFileParsing" class="excel-parsing clr-col-md-12">
+          @if (excelFileParsing) {
+            <div class="excel-parsing clr-col-md-12">
               <app-upload-stater #uploadStater></app-upload-stater>
             </div>
+          }
         </div>
       </div>
     </div>
@@ -130,8 +132,8 @@
     </div>
   </clr-modal>
 
+  @if (currentEditRecordIndex > -1) {
     <app-edit-record
-    *ngIf="currentEditRecordIndex > -1"
       [currentRecord]="currentEditRecord"
       [recordAction]="recordAction"
       [libds]="libds"
@@ -150,11 +152,14 @@
       (onNextRecord)="onNextRecord()"
       (onPreviousRecord)="onPreviousRecord()"
     ></app-edit-record>
+  }
 
   <div #ht class="clr-flex-1">
-    <div *ngIf="!validationDone && submit" class="progresStatic progress loop">
+    @if (!validationDone && submit) {
+      <div class="progresStatic progress loop">
         <progress></progress>
       </div>
+    }
 
     <div
       appDragNdrop
@@ -164,25 +169,33 @@
       <div
         class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
       >
-        <div
-          *ngIf="tableTrue"
-          class="clr-col-12 clr-col-md-3 clr-col-lg-4 backBtn"
-        >
+        @if (tableTrue && !embed) {
+          <div class="clr-col-12 clr-col-md-3 clr-col-lg-4 backBtn">
             <span
               class="btn icon-collapse btn-sm btn-icon btn-dimmed"
               [routerLink]="['/home']"
             >
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
+              <clr-icon
+                aria-hidden="true"
+                shape="caret"
+                dir="left"
+                size="20"
+              ></clr-icon>
               <span class="text">Back to table selection</span>
             </span>
             <span
               (click)="viewboxManager()"
               class="btn icon-collapse btn-sm btn-icon btn-dimmed viewbox-open"
             >
-            <clr-icon shape="view-cards" size="20"></clr-icon>
+              <clr-icon
+                aria-hidden="true"
+                shape="view-cards"
+                size="20"
+              ></clr-icon>
               <span class="text">Viewboxes</span>
             </span>
           </div>
+        }
 
         <div
           class="clr-col-12 clr-col-md-5 clr-col-lg-4 d-flex flex-column align-items-center"
@@ -205,11 +218,13 @@
                 size="24"
               ></clr-icon>
 
+              @if (libdsParsed.tableName.includes('-FC')) {
                 <clr-icon
-                *ngIf="libdsParsed.tableName.includes('-FC')"
+                  aria-hidden="true"
                   shape="bolt"
                   class="color-yellow"
                 ></clr-icon>
+              }
 
               <span clrTooltipTrigger>
                 {{ libdsParsed.libName }}.<a
@@ -219,7 +234,7 @@
                 >
               </span>
 
-              <ng-container *ngIf="this.dsNote && this.dsNote.length > 0">
+              @if (this.dsNote && this.dsNote.length > 0) {
                 <clr-tooltip-content
                   clrPosition="bottom-left"
                   clrSize="lg"
@@ -227,64 +242,62 @@
                 >
                   {{ this.dsNote }}
                 </clr-tooltip-content>
-              </ng-container>
+              }
             </clr-tooltip>
 
-            <ng-container *ngIf="dataSource">
-              <ng-container *ngIf="!zeroFilterRows">
+            @if (dataSource) {
+              @if (!zeroFilterRows) {
                 ({{ dataSource.length | thousandSeparator: ',' }}
                 {{ dataSource.length === 1 ? 'row' : 'rows' }}, {{ cols.length
                 }}{{ cols.length === 1 ? ' col' : ' cols' }})
-              </ng-container>
-
-              <ng-container *ngIf="zeroFilterRows"> (0 rows) </ng-container>
-            </ng-container>
+              }
+              @if (zeroFilterRows) {
+                (0 rows)
+              }
+            }
           </h4>
         </div>
-        <div
-          *ngIf="tableTrue"
-          class="clr-col-12 clr-col-md-4 clr-col-lg-4 btnCtrl"
-        >
-          <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
+        @if (tableTrue) {
+          <div class="clr-col-12 clr-col-md-4 clr-col-lg-4 btnCtrl">
+            @if (hotTable.readOnly && !uploadPreview) {
+              @if (!isVaEmbed) {
                 <button
                   type="button"
                   class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
                   (click)="openQb()"
                 >
-              <clr-icon shape="filter"></clr-icon>
+                  <clr-icon aria-hidden="true" shape="filter"></clr-icon>
                   <span class="text">Filter</span>
                 </button>
-
+              }
               <button
                 type="button"
                 class="btn icon-collapse btn-sm btn-primary btn-block"
                 (click)="editTable()"
               >
-              <clr-icon shape="note"></clr-icon>
+                <clr-icon aria-hidden="true" shape="note"></clr-icon>
                 <span class="text">Edit</span>
               </button>
-
+              @if (!columnLevelSecurityFlag) {
                 <button
-              *ngIf="!columnLevelSecurityFlag"
                   (click)="onShowUploadModal()"
                   type="button"
                   class="btn icon-collapse btn-sm btn-success btn-block mr-0"
                 >
-              <clr-icon shape="upload"></clr-icon>
+                  <clr-icon aria-hidden="true" shape="upload"></clr-icon>
                   <span class="text">Upload</span>
                 </button>
-          </ng-container>
-
-          <ng-container *ngIf="!hotTable.readOnly && !uploadPreview">
+              }
+            }
+            @if (!hotTable.readOnly && !uploadPreview) {
               <button
                 type="button"
                 class="btn btn-sm btn-icon btn-outline-danger"
                 (click)="cancelEdit()"
               >
-              <clr-icon shape="times"></clr-icon>
+                <clr-icon aria-hidden="true" shape="times"></clr-icon>
                 <span>Cancel</span>
               </button>
-
               <clr-tooltip>
                 <button
                   clrTooltipTrigger
@@ -294,15 +307,16 @@
                   [class.dc-locked-control]="restrictions.restrictAddRow"
                   (click)="!restrictions.restrictAddRow ? addRow() : ''"
                 >
-                <clr-icon shape="plus" size="16"></clr-icon>Add Row
+                  <clr-icon aria-hidden="true" shape="plus" size="16"></clr-icon
+                  >Add Row
                 </button>
-
                 <clr-tooltip-content
                   clrPosition="bottom-left"
                   clrSize="lg"
                   *clrIfOpen
                 >
-                <span *ngIf="restrictions.restrictAddRow"
+                  @if (restrictions.restrictAddRow) {
+                    <span
                       >To unlock more than
                       {{ licenceState.value.editor_rows_allowed }}
                       {{
@@ -311,86 +325,88 @@
                           : 'rows'
                       }}, contact support&#64;datacontroller.io</span
                     >
+                  }
                 </clr-tooltip-content>
               </clr-tooltip>
-
               <button
                 type="button"
                 class="btn btn-sm btn-primary"
                 (click)="checkSave()"
               >
-              <clr-icon shape="check" size="20"></clr-icon>Submit
+                <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon
+                >Submit
               </button>
-          </ng-container>
-
-          <ng-container *ngIf="uploadPreview">
+            }
+            @if (uploadPreview) {
               <button
                 type="button"
                 class="btn btn-sm btn-icon btn-outline-danger btn-upload-preview"
                 (click)="discardSourceFile = true"
               >
-              <clr-icon shape="times"></clr-icon>
+                <clr-icon aria-hidden="true" shape="times"></clr-icon>
                 <span>Discard file</span>
               </button>
-
+              @if (hotTable.readOnly) {
                 <button
-              *ngIf="hotTable.readOnly"
                   type="button"
                   class="btn btn-sm btn-primary btn-upload-preview"
                   (click)="manualFileEditModal = true"
                 >
-              <clr-icon shape="note"></clr-icon>
+                  <clr-icon aria-hidden="true" shape="note"></clr-icon>
                   <span>Edit</span>
                 </button>
-
+              }
               <button
                 type="button"
                 class="btn btn-sm btn-success preview-submit"
                 (click)="submitExcel()"
                 [clrLoading]="uploadLoading"
               >
-              <clr-icon shape="check" size="20"></clr-icon>
+                <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon>
                 Submit
               </button>
-          </ng-container>
+            }
           </div>
-        <div
-          *ngIf="!['', ' '].includes(queryText)"
-          class="clr-col-md-12 infoBar"
-        >
+        }
+        @if (!['', ' '].includes(queryText)) {
+          <div class="clr-col-md-12 infoBar">
             <span
               >FILTER :
               <b>{{ queryText }}</b>
             </span>
           </div>
+        }
       </div>
       <div
         class="card-block p-0 clr-flex-1 background-transparent"
         [ngClass]="{ headerBarFilter: !['', ' '].includes(queryText) }"
       >
-        <div *ngIf="!tableTrue" class="card-text">
+        @if (!tableTrue) {
+          <div class="card-text">
             <div
               class="h-70vh d-flex justify-content-center flex-column align-items-center"
             >
-            <ng-container *ngIf="!getdataError">
+              @if (!getdataError) {
                 <span class="spinner"> Loading... </span>
-
                 <div class="mt-10">
                   <p cds-text="section">Loading table</p>
                 </div>
-            </ng-container>
-
-            <ng-container *ngIf="getdataError">
+              }
+              @if (getdataError) {
                 <span>
-                <clr-icon shape="error-standard" class="error-icon"></clr-icon>
+                  <clr-icon
+                    aria-hidden="true"
+                    shape="error-standard"
+                    class="error-icon"
+                  ></clr-icon>
                 </span>
-
                 <div class="mt-10">
                   <p cds-text="section">Loading table error</p>
                 </div>
-            </ng-container>
+              }
             </div>
           </div>
+        }
 
         <div
           class="card-text hotEditor h-100 d-flex clr-flex-column background-transparent"
@@ -418,9 +434,10 @@
           </div>
 
           <div>
-            <clr-tooltip
-              *ngIf="tableTrue && !restrictions.removeAddRecordButton"
-            >
+            @if (
+              tableTrue && !restrictions.removeAddRecordButton && !isVaEmbed
+            ) {
+              <clr-tooltip>
                 <button
                   clrTooltipTrigger
                   type="button"
@@ -430,16 +447,20 @@
                     !restrictions.restrictAddRow ? addRecordButtonClick() : ''
                   "
                 >
-                <clr-icon shape="plus" size="16"></clr-icon>
+                  <clr-icon
+                    aria-hidden="true"
+                    shape="plus"
+                    size="16"
+                  ></clr-icon>
                   Add Record
                 </button>
-
                 <clr-tooltip-content
                   clrPosition="top-right"
                   clrSize="lg"
                   *clrIfOpen
                 >
-                <span *ngIf="restrictions.restrictAddRow"
+                  @if (restrictions.restrictAddRow) {
+                    <span
                       >To unlock more than
                       {{ licenceState.value.editor_rows_allowed }}
                       {{
@@ -448,28 +469,86 @@
                           : 'rows'
                       }}, contact support&#64;datacontroller.io</span
                     >
+                  }
                 </clr-tooltip-content>
               </clr-tooltip>
-            <p
-              *ngIf="
+            }
+
+            <!-- VA data-driven content mode: filter controls only. Edit/Submit
+                use the normal top toolbar (same as embed=true). VA opens
+                read-only and filters live with the report; filtering
+                repopulates the grid, so it is held while editing (change shown
+                pending) and resumes on return to read-only. -->
+            @if (isVaEmbed) {
+              <div class="va-filter-controls w-100 mt-2-i">
+                <!-- Read-only: auto-apply toggle + manual Apply (confirm mode).
+                    Hidden while editing (filtering is held). -->
+                @if (hotTable.readOnly) {
+                  <label class="va-toggle">
+                    <input
+                      type="checkbox"
+                      [checked]="vaAutoApply"
+                      (change)="toggleVaAutoApply()"
+                    />
+                    Auto-apply VA filters
+                  </label>
+                  @if (!vaAutoApply) {
+                    <button
+                      [disabled]="
+                        vaFilterStatus !== 'pending' &&
+                        vaFilterStatus !== 'loading'
+                      "
+                      type="button"
+                      class="btn btn-sm btn-primary"
+                      (click)="applyPendingVaFilter()"
+                    >
+                      Apply filter
+                    </button>
+                  }
+                }
+                <!-- Edit mode: filtering is held so edits aren't wiped. -->
+                @if (!hotTable.readOnly) {
+                  <span class="va-disabled-text">
+                    VA filtering paused while editing
+                  </span>
+                }
+                <!-- Persistent live region (shown in both modes) so a filter
+                    change that arrives while editing is announced as pending. -->
+                <span class="va-filter-status" role="status" aria-live="polite">
+                  @if (vaFilterStatus === 'pending') {
+                    <span class="va-pending-text"> Filter change pending </span>
+                  }
+                  @if (vaFilterStatus === 'loading') {
+                    <span class="va-loading-text"> Loading filter… </span>
+                  }
+                </span>
+              </div>
+            }
+
+            @if (
               licenceState.value.editor_rows_allowed !== Infinity &&
               dataSource &&
               dataSource.length > licenceState.value.editor_rows_allowed
-              "
-              class="mt-2-i w-100 text-center"
-            >
+            ) {
+              <p class="mt-2-i w-100 text-center">
                 To display more than
                 {{ licenceState.value.editor_rows_allowed }} rows, contact
                 <contact-link />
               </p>
+            }
           </div>
           <!--<hr>
               <hot-table hotId="hotInstance" id="hotTable">
               </hot-table>-->
-          <div class="modal" *ngIf="submit">
+          @if (submit) {
+            <div class="modal">
               <!-- && validationDone should be in constraint, but validation is not correct on front end so it is comment -->
               <!-- TODO: fix validation in line above -->
-            <div class="modal-dialog modal-lg" role="dialog" aria-hidden="true">
+              <div
+                class="modal-dialog modal-lg"
+                role="dialog"
+                aria-hidden="true"
+              >
                 <div class="modal-content">
                   <div class="modal-header">
                     <button aria-label="Close" class="close" type="button">
@@ -482,12 +561,11 @@
                     </h3>
                   </div>
                   <div class="modal-body">
-                  <span
-                    *ngIf="
+                    @if (
                       totalRowsChanged > licenceState.value.submit_rows_limit &&
                       licenceState.value.submit_rows_limit !== Infinity
-                    "
-                    class="d-block w-100 text-center color-red"
+                    ) {
+                      <span class="d-block w-100 text-center color-red"
                         >Only
                         {{ licenceState.value.submit_rows_limit }}
                         {{
@@ -498,7 +576,9 @@
                         will be submitted. To remove the restriction, contact
                         support&#64;datacontroller.io</span
                       >
-                  <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
+                    }
+                    @if (tableTrue) {
+                      <div class="clr-offset-md-2 clr-col-md-8">
                         <div class="text-area-full-width">
                           <label for="formFields_8" class="mb-5 d-block"
                             >Message</label
@@ -529,6 +609,7 @@
                                 </div>
                               </div> -->
                       </div>
+                    }
                   </div>
                   <div class="modal-footer justify-content-center-i">
                     <button
@@ -546,7 +627,9 @@
                       type="button"
                       class="btn btn-sm btn-outline"
                       tabindex="0"
-                    (click)="cancelSubmit(); submit = false; validationDone = 0"
+                      (click)="
+                        cancelSubmit(); submit = false; validationDone = 0
+                      "
                     >
                       Cancel
                     </button>
@@ -554,6 +637,7 @@
                 </div>
               </div>
             </div>
+          }
 
           <clr-modal [(clrModalOpen)]="submitLimitNotice">
             <h3 class="modal-title">Notice</h3>
@@ -637,18 +721,19 @@
                 Duplicate values cannot be submitted for Primary Key columns
               </p>
               <p>Duplicates found:</p>
-              <span
-                class="d-block"
-                *ngFor="
-                  let duplicatePkIndex of duplicatePkIndexes;
-                  let i = index
-                "
-              >
+              @for (
+                duplicatePkIndex of duplicatePkIndexes;
+                track duplicatePkIndex;
+                let i = $index
+              ) {
+                <span class="d-block">
                   On row {{ duplicatePkIndex + 1 }}:
                   {{
-                  pkFields[duplicatePkIndex].replace('|', '') | pkSpaceSeparate
+                    pkFields[duplicatePkIndex].replace('|', '')
+                      | pkSpaceSeparate
                   }}
                 </span>
+              }
             </div>
             <div class="modal-footer">
               <button
@@ -666,9 +751,9 @@
               <p>
                 The following columns have values that exceed length limits:
               </p>
-              <p *ngFor="let cell of exceedCells">
-                {{ cell.col }}({{ cell.len }}), {{ cell.val }}
-              </p>
+              @for (cell of exceedCells; track cell) {
+                <p>{{ cell.col }}({{ cell.len }}), {{ cell.val }}</p>
+              }
             </div>
             <div class="modal-footer">
               <button
@@ -686,9 +771,10 @@
           </div> -->
     </div>
   </div>
-</div>
+</main>
 
-<div class="modal z-index-highest" *ngIf="nullVariables">
+@if (nullVariables) {
+  <div class="modal z-index-highest">
     <div class="modal-dialog" role="dialog" aria-hidden="true">
       <div class="modal-content">
         <div class="modal-header">
@@ -712,6 +798,7 @@
       </div>
     </div>
   </div>
+}
 
 <clr-modal
   [(clrModalOpen)]="filter"
@@ -724,7 +811,9 @@
     <span> {{ libds }} </span>
   </h3>
   <div class="modal-body">
-    <app-query #queryFilter *ngIf="filter"></app-query>
+    @if (filter) {
+      <app-query #queryFilter></app-query>
+    }
   </div>
   <div class="modal-footer">
     <button (click)="resetFilter()" type="button" class="btn btn-sm btn-link">
@@ -812,9 +901,9 @@
     />
   </div>
   <div class="modal-footer">
-    <p *ngIf="fileUnlockError" class="m-0 color-red">
-      Sorry that didn't work, try again.
-    </p>
+    @if (fileUnlockError) {
+      <p class="m-0 color-red">Sorry that didn't work, try again.</p>
+    }
     <button
       type="button"
       class="btn btn-sm btn-outline"
@@ -873,3 +962,17 @@
 </app-dataset-info>
 
 <app-viewboxes [(viewboxModal)]="viewboxes"></app-viewboxes>
+
+<app-confirm-modal
+  [open]="confirmModal.open"
+  [title]="confirmModal.title"
+  [message]="confirmModal.message"
+  (result)="onConfirmModalResult($event)"
+></app-confirm-modal>
+
+<app-bulk-validation-modal
+  [open]="bulkValidation.active"
+  [done]="bulkValidation.done"
+  [total]="bulkValidation.total"
+  (cancel)="cancelBulkValidation({ revert: true })"
+></app-bulk-validation-modal>

client/src/app/editor/editor.component.scss

@@ -0,0 +1,29 @@
+.va-filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  .va-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .va-pending-text {
+    font-style: italic;
+    color: #8a5200;
+  }
+}
+
+.va-loading-text {
+  font-style: italic;
+  color: #0072a3;
+}
+
+.va-disabled-text {
+  font-style: italic;
+  opacity: 0.7;
+}

client/src/app/editor/models/dynamicExtendedCellValidation.ts

@@ -1,13 +1,22 @@
 /**
- * Model for the dynamic cell validation in the editor
- * (sending whole row to the backend service and recieving data for the cell dropdown)
+ * Model for a row of `dynamic_values` returned by the getdynamiccolvals
+ * service (the dropdown source for the edited cell itself).
+ */
+export interface DynamicCellValidation {
+  DISPLAY_INDEX: number
+  RAW_VALUE: string | number
+}
+
+/**
+ * Model for a row of `dynamic_extended_values` returned by the
+ * getdynamiccolvals service (dropdown values for _other_ cells in the _same_
+ * row, mapped via DISPLAY_INDEX).
  */
 export interface DynamicExtendedCellValidation {
   DISPLAY_INDEX: number
   DISPLAY_TYPE: string
-  DISPLAY_VALUE: string
   EXTRA_COL_NAME: string
   RAW_VALUE_CHAR: string
   RAW_VALUE_NUM: number
-  FORCE_FLAG: number
+  FORCED_VALUE: number
 }

client/src/app/editor/utils/date.utils.ts

@@ -18,6 +18,22 @@ export const dateToTime = (date: Date) => {
   return timeStr
 }
 
+/**
+ * Normalises a 24-hour time STRING to zero-padded `HH:mm:ss`.
+ *
+ * The `intl-time` cell type (validator + native `<input type=time>` editor) is
+ * strict and rejects `H:mm[:ss]`, so such a value paints red and the editor
+ * opens empty. Pad the hour and default the seconds so the value validates.
+ *
+ * Non time-like input is returned unchanged.
+ */
+export const padTimeString = (value: string): string => {
+  const match = value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/)
+  if (!match) return value
+  const [, hours, minutes, seconds] = match
+  return `${hours.padStart(2, '0')}:${minutes}:${seconds ?? '00'}`
+}
+
 /**
  * Converts date object to the YYYY-MM-DD
  */

client/src/app/editor/utils/regex-warning-renderer.spec.ts

@@ -0,0 +1,131 @@
+import Handsontable from 'handsontable'
+import { makeRegexWarningRenderer } from './regex-warning-renderer'
+
+describe('makeRegexWarningRenderer', () => {
+  const buildHot = (data: any[]) => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data,
+      columns: [
+        { data: 'val', renderer: makeRegexWarningRenderer('^[A-Z]{3}$') },
+        { data: '_____DELETE__THIS__RECORD_____' }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    return { hot, container }
+  }
+
+  it('adds dc-warning-cell when the value fails the pattern', () => {
+    const { hot, container } = buildHot([
+      { val: 'abc', _____DELETE__THIS__RECORD_____: 'No' }
+    ])
+
+    const td = hot.getCell(0, 0)
+    expect(td?.classList.contains('dc-warning-cell')).toBeTrue()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('does not add dc-warning-cell when the value matches the pattern', () => {
+    const { hot, container } = buildHot([
+      { val: 'ABC', _____DELETE__THIS__RECORD_____: 'No' }
+    ])
+
+    const td = hot.getCell(0, 0)
+    expect(td?.classList.contains('dc-warning-cell')).toBeFalse()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('suppresses the warning on a row marked for delete, even though the value fails the pattern', () => {
+    const { hot, container } = buildHot([
+      { val: 'abc', _____DELETE__THIS__RECORD_____: 'Yes' }
+    ])
+
+    const td = hot.getCell(0, 0)
+    expect(td?.classList.contains('dc-warning-cell')).toBeFalse()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('does not add dc-warning-cell for a SAS special missing value', () => {
+    const { hot, container } = buildHot([
+      { val: '.a', _____DELETE__THIS__RECORD_____: 'No' }
+    ])
+
+    const td = hot.getCell(0, 0)
+    expect(td?.classList.contains('dc-warning-cell')).toBeFalse()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('does not throw and never warns on a malformed pattern', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ val: 'abc', _____DELETE__THIS__RECORD_____: 'No' }],
+      columns: [
+        { data: 'val', renderer: makeRegexWarningRenderer('[unterminated') },
+        { data: '_____DELETE__THIS__RECORD_____' }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+
+    expect(() => hot.render()).not.toThrow()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.classList.contains('dc-warning-cell')).toBeFalse()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('handles a PRX-delimited pattern with a case-insensitive flag, as authored for prxparse', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [
+        { val: 'this is dummy data', _____DELETE__THIS__RECORD_____: 'No' },
+        { val: 'THE WIND WAS BLOWING', _____DELETE__THIS__RECORD_____: 'No' },
+        { val: 'nothing relevant here', _____DELETE__THIS__RECORD_____: 'No' }
+      ],
+      columns: [
+        {
+          data: 'val',
+          renderer: makeRegexWarningRenderer('/\\b(the|data)\\b/i')
+        },
+        { data: '_____DELETE__THIS__RECORD_____' }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    expect(hot.getCell(0, 0)?.classList.contains('dc-warning-cell')).toBeFalse()
+    expect(hot.getCell(1, 0)?.classList.contains('dc-warning-cell')).toBeFalse()
+    expect(hot.getCell(2, 0)?.classList.contains('dc-warning-cell')).toBeTrue()
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('is display-only — the stored value is untouched', () => {
+    const { hot, container } = buildHot([
+      { val: 'abc', _____DELETE__THIS__RECORD_____: 'No' }
+    ])
+
+    expect(hot.getDataAtCell(0, 0)).toEqual('abc')
+
+    hot.destroy()
+    container.remove()
+  })
+})

client/src/app/editor/utils/regex-warning-renderer.ts

@@ -0,0 +1,54 @@
+import Handsontable from 'handsontable'
+import { isRegexRuleExempt } from '../../shared/dc-validator/utils/isRegexRuleExempt'
+import { parseRegexRule } from '../../shared/dc-validator/utils/parseRegexRule'
+
+/**
+ * Builds a display-only HOT renderer for SOFTREGEX: a value that fails the
+ * pattern gets a yellow `dc-warning-cell` class (styles.scss) instead of
+ * blocking submission — SOFTREGEX must never return false from the cell
+ * validator (that would paint htInvalid and block submit), so the warning
+ * lives purely at the render layer, same split as makeNumberFormatRenderer.
+ *
+ * Suppressed on rows marked for delete (_____DELETE__THIS__RECORD_____ =
+ * 'Yes') — a warning about data about to be removed is just noise.
+ *
+ * Falls back to no warning ever showing when the pattern itself is
+ * malformed, rather than breaking the cell.
+ */
+export const makeRegexWarningRenderer = (pattern?: string) => {
+  let regex: RegExp | null = null
+
+  try {
+    if (pattern) regex = parseRegexRule(pattern)
+  } catch (e) {
+    console.warn(`SOFTREGEX - invalid pattern, warning disabled: ${pattern}`)
+    regex = null
+  }
+
+  const baseRenderer = Handsontable.renderers.getRenderer('text')
+
+  return (
+    instance: any,
+    td: any,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: any
+  ) => {
+    baseRenderer(instance, td, row, col, prop, value, cellProperties)
+
+    const markedForDelete =
+      instance.getDataAtRowProp(row, '_____DELETE__THIS__RECORD_____') === 'Yes'
+
+    const failsPattern =
+      !!regex && !isRegexRuleExempt(value) && !regex.test(value.toString())
+
+    if (failsPattern && !markedForDelete) {
+      td.classList.add('dc-warning-cell')
+      td.title = 'Value does not match the expected pattern'
+    }
+
+    return td
+  }
+}

client/src/app/editor/utils/renderers.utils.spec.ts

@@ -0,0 +1,88 @@
+import Handsontable from 'handsontable'
+import { makeNumberFormatRenderer } from './renderers.utils'
+
+describe('makeNumberFormatRenderer', () => {
+  it('renders a numeric cell as EUR currency without changing the value', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    // Display is formatted as currency...
+    expect(td?.textContent).toContain('€')
+    expect(td?.textContent).toContain('1,025')
+    // ...but the stored value is untouched
+    expect(hot.getDataAtCell(0, 0)).toEqual(1025)
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('is overridden by numbro numericFormat (why DcValidator clears it for NUMBER_FORMAT cols)', () => {
+    // Regression note: on a `type: 'numeric'` column, a `numericFormat` makes
+    // HOT re-render via numbro and drop our currency symbol. DcValidator clears
+    // numericFormat on NUMBER_FORMAT columns so the Intl renderer wins.
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          numericFormat: { pattern: '0,0', culture: 'en-US' },
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('falls back to a plain number when options JSON is invalid', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer('not json')
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+})

client/src/app/editor/utils/renderers.utils.ts

@@ -1,3 +1,57 @@
+import Handsontable from 'handsontable'
+
+/**
+ * Builds a display-only HOT renderer that formats numeric cell values using
+ * Intl.NumberFormat. The stored/submitted value is never changed — only the
+ * rendered text. `ruleValue` is a JSON string of Intl.NumberFormat options
+ * (e.g. '{"style":"currency","currency":"EUR","minimumFractionDigits":2}').
+ *
+ * Falls back to the plain text renderer when the JSON is invalid, the options
+ * are rejected by Intl.NumberFormat, or the value is not a finite number.
+ */
+export const makeNumberFormatRenderer = (ruleValue?: string) => {
+  let formatter: Intl.NumberFormat | null = null
+
+  try {
+    const options = ruleValue ? JSON.parse(ruleValue) : {}
+    formatter = new Intl.NumberFormat(window.navigator.language, options)
+  } catch (e) {
+    console.warn(
+      `NUMBER_FORMAT - invalid Intl.NumberFormat options: ${ruleValue}`
+    )
+    formatter = null
+  }
+
+  const baseRenderer = Handsontable.renderers.getRenderer('text')
+
+  return (
+    instance: any,
+    td: any,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: any
+  ) => {
+    // Render via the base text renderer first to preserve cell styling/classes
+    // (readOnly, alignment, etc.), then override the displayed text.
+    baseRenderer(instance, td, row, col, prop, value, cellProperties)
+
+    const num = Number(value)
+    if (
+      formatter &&
+      value !== null &&
+      value !== undefined &&
+      value !== '' &&
+      !isNaN(num)
+    ) {
+      td.textContent = formatter.format(num)
+    }
+
+    return td
+  }
+}
+
 /**
  * Custom renderer for HOT cell
  * Used to show error icon

client/src/app/free-tier.config.ts

@@ -30,7 +30,7 @@ export const freeTierConfig: LicenceState = {
   lineage_daily_limit: 3,
   tables_in_library_limit: 35,
   viewbox: true,
-  fileUpload: true,
+  fileUpload: false,
   editRecord: true,
   addRecord: true
 }

client/src/app/group/group.component.html

@@ -1,6 +1,7 @@
 <app-sidebar class="sidebar-height">
   <clr-tree>
-    <clr-tree-node *ngIf="groups" class="search-node">
+    @if (groups) {
+      <clr-tree-node class="search-node">
         <div class="tree-search-wrapper">
           <input
             appStealFocus
@@ -12,22 +13,23 @@
             (keyup)="groupListOnFilter()"
             autocomplete="off"
           />
+          @if (searchLibTreeInput.value.length < 1) {
+            <clr-icon shape="search"></clr-icon>
+          }
+          @if (searchLibTreeInput.value.length > 0) {
             <clr-icon
-          *ngIf="searchLibTreeInput.value.length < 1"
-          shape="search"
-        ></clr-icon>
-        <clr-icon
-          *ngIf="searchLibTreeInput.value.length > 0"
               (click)="groupSearch = ''; groupListOnFilter()"
               shape="times"
             ></clr-icon>
+          }
         </div>
       </clr-tree-node>
+    }
 
-    <ng-container *ngFor="let group of groups">
+    @for (group of groups; track group) {
+      @if (!group['hidden']) {
         <clr-tree-node
           (click)="groupOnClick(group)"
-        *ngIf="!group['hidden']"
           [class.active]="group.GROUPURI === groupUri"
         >
           <p class="m-0 cursor-pointer list-padding">
@@ -35,16 +37,21 @@
             {{ group.GROUPNAME }}
           </p>
         </clr-tree-node>
-    </ng-container>
+      }
+    }
   </clr-tree>
 </app-sidebar>
 
 <div class="content-area">
-  <div *ngIf="loading" class="loadingSpinner">
+  @if (loading) {
+    <div class="loadingSpinner">
       <span class="spinner"> Loading... </span>
     </div>
-  <div *ngIf="groupMembers && !loading">
-    <div *ngIf="serverType !== ServerType.SasViya" class="clr-row">
+  }
+  @if (groupMembers && !loading) {
+    <div>
+      @if (serverType !== ServerType.SasViya) {
+        <div class="clr-row">
           <div class="clr-col-8">
             <table class="table group-info">
               <tbody>
@@ -64,60 +71,70 @@
             </table>
           </div>
         </div>
-
+      }
       <div class="clr-row">
         <div class="clr-col-8">
           <div class="card group-data">
-          <div *ngIf="serverType !== ServerType.SasViya">
+            @if (serverType !== ServerType.SasViya) {
+              <div>
                 <h3>MEMBERS ({{ groupMemberCount }})</h3>
-            <h5 *ngIf="groupMemberCount == 0">No Members Present</h5>
+                @if (groupMemberCount == 0) {
+                  <h5>No Members Present</h5>
+                }
                 <div class="table-container">
-              <table *ngIf="groupMemberCount != 0" class="table member-table">
+                  @if (groupMemberCount != 0) {
+                    <table class="table member-table">
                       <thead>
                         <tr>
-                    <ng-container *ngIf="serverType === ServerType.Sas9">
+                          @if (serverType === ServerType.Sas9) {
                             <td class="width-25"><b>NAME</b></td>
                             <td class="width-25"><b>EMAIL</b></td>
                             <td class="width-25"><b>CREATED</b></td>
                             <td class=""><b>UPDATED</b></td>
-                    </ng-container>
-
-                    <ng-container *ngIf="serverType === ServerType.Sasjs">
+                          }
+                          @if (serverType === ServerType.Sasjs) {
                             <td class="width-25"><b>ID</b></td>
                             <td class="width-25"><b>DISPLAY NAME</b></td>
                             <td class="width-25"><b>USER NAME</b></td>
-                    </ng-container>
+                          }
                         </tr>
                       </thead>
                       <tbody>
+                        @for (member of groupMembers; track member) {
                           <tr
                             [routerLink]="
-                      '/view/usernav/users/' + (member.URIMEM || member.ID)
+                              '/view/usernav/users/' +
+                              (member.URIMEM || member.ID)
                             "
-                    *ngFor="let member of groupMembers"
                           >
-                    <ng-container *ngIf="serverType === ServerType.Sas9">
+                            @if (serverType === ServerType.Sas9) {
                               <td class="">{{ member.MEMBERNAME }}</td>
                               <td class="">{{ member.EMAIL }}</td>
                               <td class="">{{ member.MEMBERCREATED }}</td>
                               <td class="">{{ member.MEMBERUPDATED }}</td>
-                    </ng-container>
-
-                    <ng-container *ngIf="serverType === ServerType.Sasjs">
+                            }
+                            @if (serverType === ServerType.Sasjs) {
                               <td class="">{{ member.ID }}</td>
                               <td class="">{{ member.DISPLAYNAME }}</td>
                               <td class="">{{ member.USERNAME }}</td>
-                    </ng-container>
+                            }
                           </tr>
+                        }
                       </tbody>
                     </table>
+                  }
                 </div>
               </div>
-          <div *ngIf="serverType === ServerType.SasViya">
+            }
+            @if (serverType === ServerType.SasViya) {
+              <div>
                 <h3>{{ groupName }}</h3>
-            <h5 *ngIf="groupMemberCount == 0">No Members Present</h5>
+                @if (groupMemberCount == 0) {
+                  <h5>No Members Present</h5>
+                }
                 <div class="table-container">
-              <table *ngIf="groupMemberCount != 0" class="table member-table">
+                  @if (groupMemberCount != 0) {
+                    <table class="table member-table">
                       <thead>
                         <tr>
                           <td>
@@ -126,19 +143,25 @@
                         </tr>
                       </thead>
                       <tbody>
+                        @for (member of groupMembers; track member) {
                           <tr
-                    [routerLink]="'/view/usernav/users/' + member.MEMBERID"
-                    *ngFor="let member of groupMembers"
+                            [routerLink]="
+                              '/view/usernav/users/' + member.MEMBERID
+                            "
                           >
                             <td class="">{{ member.MEMBERNAME }}</td>
                           </tr>
+                        }
                       </tbody>
                     </table>
+                  }
                 </div>
               </div>
+            }
             <br />
           </div>
         </div>
       </div>
     </div>
+  }
 </div>

client/src/app/home/home.component.html

@@ -1,6 +1,7 @@
 <app-sidebar>
   <clr-tree>
-    <clr-tree-node *ngIf="treeNodeLibraries?.length! > 0" class="search-node">
+    @if (treeNodeLibraries?.length! > 0) {
+      <clr-tree-node class="search-node">
         <div class="tree-search-wrapper">
           <input
             clrInput
@@ -12,23 +13,24 @@
             (keyup)="libraryOnFilter()"
             autocomplete="off"
           />
-
+          @if (searchLibTreeInput.value.length < 1) {
+            <clr-icon shape="search" aria-hidden="true"></clr-icon>
+          }
+          @if (searchLibTreeInput.value.length > 0) {
             <clr-icon
-          *ngIf="searchLibTreeInput.value.length < 1"
-          shape="search"
-        ></clr-icon>
-        <clr-icon
-          *ngIf="searchLibTreeInput.value.length > 0"
               (click)="librariesSearch = ''; libraryOnFilter()"
               shape="times"
+              aria-label="Clear libraries search"
             ></clr-icon>
+          }
         </div>
       </clr-tree-node>
+    }
 
-    <ng-container *ngFor="let library of treeNodeLibraries">
+    @for (library of treeNodeLibraries; track library) {
+      @if (!library['hidden']) {
         <clr-tree-node
           (click)="treeNodeClicked($event, library); lib = library.LIBRARYREF"
-        *ngIf="!library['hidden']"
           [(clrExpanded)]="library['expanded']"
           [clrLoading]="library['loadingTables'] && !library.tables"
           [class.clr-expanded]="library['expanded']"
@@ -40,11 +42,11 @@
             "
             class="m-0 cursor-pointer"
           >
-          <clr-icon shape="rack-server"></clr-icon>
+            <clr-icon shape="rack-server" aria-hidden="true"></clr-icon>
             {{ library.LIBRARYREF }}
           </p>
-
-        <clr-tree-node *ngIf="library['tables']" class="search-node">
+          @if (library['tables']) {
+            <clr-tree-node class="search-node">
               <div class="tree-search-wrapper">
                 <input
                   appStealFocus
@@ -56,26 +58,29 @@
                   (keyup)="treeOnFilter(library, 'tables')"
                   autocomplete="off"
                 />
-
+                @if (searchTreeInput.value.length < 1) {
+                  <clr-icon shape="search" aria-hidden="true"></clr-icon>
+                }
+                @if (searchTreeInput.value.length > 0) {
                   <clr-icon
-              *ngIf="searchTreeInput.value.length < 1"
-              shape="search"
-            ></clr-icon>
-            <clr-icon
-              *ngIf="searchTreeInput.value.length > 0"
                     (click)="
                       searchTreeInput.value = '';
                       library['searchString'] = '';
                       treeOnFilter(library, 'tables')
                     "
                     shape="times"
+                    aria-label="Clear tables search"
                   ></clr-icon>
+                }
               </div>
             </clr-tree-node>
-
-        <clr-tree-node
-          *ngFor="let libTable of library['tables']; let index = index"
-        >
+          }
+          @for (
+            libTable of library['tables'];
+            track libTable;
+            let index = $index
+          ) {
+            <clr-tree-node>
               <clr-tooltip
                 *ngVar="
                   index + 1 >
@@ -89,59 +94,65 @@
                   [class.dc-locked-control]="tableLocked"
                   [class.active]="libTabActive(library.LIBRARYREF, libTable)"
                 >
-              <ng-container [ngSwitch]="libTable.includes('-FC')">
-                <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
-                <clr-icon *ngSwitchCase="false" shape="table"></clr-icon>
-              </ng-container>
+                  @switch (libTable.includes('-FC')) {
+                    @case (true) {
+                      <clr-icon shape="bolt" aria-hidden="true"></clr-icon>
+                    }
+                    @case (false) {
+                      <clr-icon shape="table" aria-hidden="true"></clr-icon>
+                    }
+                  }
                   {{ libTable.replace('-FC', '') }}
                 </button>
-
-            <ng-container *ngIf="tableLocked">
+                @if (tableLocked) {
                   <clr-tooltip-content
                     clrPosition="bottom-right"
                     clrSize="lg"
                     *clrIfOpen
                   >
                     <span>
-                  To unlock all tables, contact support&#64;datacontroller.io
+                      To unlock all tables, contact
+                      support&#64;datacontroller.io
                     </span>
                   </clr-tooltip-content>
-            </ng-container>
+                }
               </clr-tooltip>
             </clr-tree-node>
+          }
         </clr-tree-node>
-    </ng-container>
+      }
+    }
   </clr-tree>
 </app-sidebar>
 
-<div class="content-area">
+<main class="content-area">
   <div class="card-block">
-    <div *ngIf="loading" class="spinner-wrapper-fullpage">
+    @if (loading) {
+      <div class="spinner-wrapper-fullpage">
         <div class="loadingSpinner">
           <span class="spinner"> Loading... </span>
         </div>
       </div>
+    }
 
-    <div *ngIf="!loading" class="no-table-selected">
+    @if (!loading) {
+      <div class="no-table-selected">
         <img
           src="images/select-table.png"
           class="select-table-icon"
           alt="select table icon"
         />
-      <p
-        *ngIf="treeNodeLibraries?.length! > 0"
-        class="text-center color-gray mt-10"
-        cds-text="section"
-      >
+        @if (treeNodeLibraries?.length! > 0) {
+          <p class="text-center color-gray mt-10" cds-text="section">
             Please select a table
           </p>
-      <p
-        *ngIf="treeNodeLibraries?.length! < 1"
-        class="text-center color-gray mt-10"
-        cds-text="section"
-      >
+        }
+        @if (treeNodeLibraries?.length! < 1) {
+          <p class="text-center color-gray mt-10" cds-text="section">
             No Editable Tables Configured
           </p>
+        }
       </div>
+    }
   </div>
-</div>
+</main>

client/src/app/licensing/licensing.component.html

@@ -34,6 +34,8 @@
         </p>
       </ng-container>
 
+      <p><strong>Protocol:</strong> {{ protocol }}</p>
+
       <p>
         <strong>SYSSITE:</strong>
         <span

client/src/app/licensing/licensing.component.ts

@@ -35,6 +35,10 @@ export class LicensingComponent implements OnInit {
   public activationKeyValue: string = ''
 
   public applyingKeys: boolean = false
+  public protocol: string =
+    location.protocol === 'https:'
+      ? 'HTTPS - secure connection'
+      : 'HTTP - insecure connection'
 
   public syssite = this.appService.syssite
   public currentLicenceKey = this.licenceService.licenceKey

client/src/app/lineage/lineage.component.html

@@ -1,6 +1,7 @@
 <app-sidebar (scrolledToBottom)="loadMoreLibraries()">
   <clr-tree>
-    <clr-tree-node *ngIf="libraryList" class="search-node">
+    @if (libraryList) {
+      <clr-tree-node class="search-node">
         <div class="tree-search-wrapper">
           <input
             appStealFocus
@@ -12,35 +13,38 @@
             (keyup)="libraryOnFilter()"
             autocomplete="off"
           />
+          @if (searchLibTreeInput.value.length < 1) {
+            <clr-icon shape="search"></clr-icon>
+          }
+          @if (searchLibTreeInput.value.length > 0) {
             <clr-icon
-          *ngIf="searchLibTreeInput.value.length < 1"
-          shape="search"
-        ></clr-icon>
-        <clr-icon
-          *ngIf="searchLibTreeInput.value.length > 0"
               (click)="librariesSearch = ''; libraryOnFilter()"
               shape="times"
             ></clr-icon>
+          }
         </div>
       </clr-tree-node>
+    }
 
-    <ng-container *ngFor="let library of libraryList">
+    @for (library of libraryList; track library) {
+      @if (!library['hidden'] && library['inForeground']) {
         <clr-tree-node
           (click)="treeNodeClicked($event, library, libraryList)"
-        *ngIf="!library['hidden'] && library['inForeground']"
           [(clrExpanded)]="library['expanded']"
           [clrLoading]="library['loadingTables'] && !library.tables"
           [class.clr-expanded]="library['expanded']"
         >
           <p
-          (click)="lib = library.LIBRARYID; libraryOnClick(lib || '', library)"
+            (click)="
+              lib = library.LIBRARYID; libraryOnClick(lib || '', library)
+            "
             class="m-0 cursor-pointer"
           >
             <clr-icon shape="rack-server"></clr-icon>
             {{ library.LIBRARYNAME }}
           </p>
-
-        <clr-tree-node *ngIf="library['tables']" class="search-node">
+          @if (library['tables']) {
+            <clr-tree-node class="search-node">
               <div class="tree-search-wrapper">
                 <input
                   appStealFocus
@@ -52,12 +56,11 @@
                   (keyup)="treeOnFilter(library, 'tables.TABLENAME')"
                   autocomplete="off"
                 />
+                @if (searchTreeInput.value.length < 1) {
+                  <clr-icon shape="search"></clr-icon>
+                }
+                @if (searchTreeInput.value.length > 0) {
                   <clr-icon
-              *ngIf="searchTreeInput.value.length < 1"
-              shape="search"
-            ></clr-icon>
-            <clr-icon
-              *ngIf="searchTreeInput.value.length > 0"
                     (click)="
                       searchTreeInput.value = '';
                       library['searchString'] = '';
@@ -65,12 +68,13 @@
                     "
                     shape="times"
                   ></clr-icon>
+                }
               </div>
             </clr-tree-node>
-
+          }
+          @for (libTable of library['tables']; track libTable) {
             <clr-tree-node
               (click)="treeNodeClicked($event, libTable, library['tables'])"
-          *ngFor="let libTable of library['tables']"
               [(clrExpanded)]="libTable['expanded']"
               [clrLoading]="libTable['loadingColumns'] && !libTable.columns"
               [class.clr-expanded]="libTable['expanded']"
@@ -83,8 +87,8 @@
                 <clr-icon shape="table"></clr-icon>
                 {{ libTable.TABLENAME }}
               </p>
-
-          <clr-tree-node *ngIf="libTable['columns']" class="search-node">
+              @if (libTable['columns']) {
+                <clr-tree-node class="search-node">
                   <div class="tree-search-wrapper">
                     <input
                       appStealFocus
@@ -96,12 +100,11 @@
                       (keyup)="treeOnFilter(libTable, 'columns.COLNAME')"
                       autocomplete="off"
                     />
+                    @if (searchTreeInput.value.length < 1) {
+                      <clr-icon shape="search"></clr-icon>
+                    }
+                    @if (searchTreeInput.value.length > 0) {
                       <clr-icon
-                *ngIf="searchTreeInput.value.length < 1"
-                shape="search"
-              ></clr-icon>
-              <clr-icon
-                *ngIf="searchTreeInput.value.length > 0"
                         (click)="
                           searchTreeInput.value = '';
                           libTable['searchString'] = '';
@@ -109,33 +112,40 @@
                         "
                         shape="times"
                       ></clr-icon>
+                    }
                   </div>
                 </clr-tree-node>
-
-          <clr-tree-node *ngFor="let libColumn of libTable['columns']">
+              }
+              @for (libColumn of libTable['columns']; track libColumn) {
+                <clr-tree-node>
                   <button
                     (click)="columnOnClick(libColumn, library, libTable)"
                     class="clr-treenode-link"
                     [class.column-active]="libColumnActive(libColumn.COLURI)"
                   >
                     <clr-icon shape="objects"></clr-icon>
-
                     {{ libColumn.COLNAME }}
                   </button>
                 </clr-tree-node>
+              }
             </clr-tree-node>
+          }
         </clr-tree-node>
-    </ng-container>
+      }
+    }
   </clr-tree>
 
-  <div *ngIf="librariesPaging" class="w-100 text-center">
+  @if (librariesPaging) {
+    <div class="w-100 text-center">
       <span class="spinner spinner-sm"> Loading... </span>
     </div>
+  }
 </app-sidebar>
 
 <div class="content-area">
   <div class="card">
-    <div *ngIf="!column && !table" class="no-table-selected">
+    @if (!column && !table) {
+      <div class="no-table-selected">
         <clr-icon
           shape="warning-standard"
           size="60"
@@ -145,24 +155,22 @@
           Please select a column or table
         </p>
       </div>
+    }
 
-    <ng-container *ngIf="column || table">
-      <div
-        *ngIf="!graphContainer"
-        class="card-header d-flex flex-column justify-content-center"
-      >
-        <h3
-          *ngIf="!currentLineagePathColumn && !currentLineagePathLibTable"
-          class="text-center pb-10"
-        >
+    @if (column || table) {
+      @if (!graphContainer) {
+        <div class="card-header d-flex flex-column justify-content-center">
+          @if (!currentLineagePathColumn && !currentLineagePathLibTable) {
+            <h3 class="text-center pb-10">
               {{
                 currentLineagePathColumn
                   ? currentLineagePathLibTable + '.' + currentLineagePathColumn
                   : currentLineagePathLibTable
               }}
             </h3>
+          }
         </div>
-
+      }
       <div class="card-block">
         <section
           class="form-block sw position-relative d-flex align-items-center"
@@ -170,18 +178,19 @@
           <div
             class="linage-title-wrapper d-flex align-items-center font-weight-bold position-absolute"
           >
-            <span *ngIf="lineageTableName.length > 0">
+            @if (lineageTableName.length > 0) {
+              <span>
                 {{ lineageTableName.split('.')[0] }}.<a
                   [routerLink]="'/view/data/' + lineageTableName"
                   >{{ lineageTableName.split('.')[1] }}</a
-              >{{ lineageColumnName.length > 0 ? '.' + lineageColumnName : '' }}
+                >{{
+                  lineageColumnName.length > 0 ? '.' + lineageColumnName : ''
+                }}
               </span>
+            }
           </div>
-
-          <div
-            *ngIf="graphContainer"
-            class="clr-col-md-12 text-center d-flex justify-content-end"
-          >
+          @if (graphContainer) {
+            <div class="clr-col-md-12 text-center d-flex justify-content-end">
               <button
                 (click)="limitDotDepth = true"
                 type="button"
@@ -189,7 +198,6 @@
               >
                 Limit depth
               </button>
-
               <!-- <button class="btn btn-outline" (click)='showSvg()'> Open in New Tab </button> -->
               <div class="btn-group direction d-block">
                 <div
@@ -208,7 +216,6 @@
                   />
                   <label>Backward</label>
                 </div>
-
                 <div
                   class="radio btn"
                   (click)="
@@ -226,7 +233,6 @@
                   <label>Forward</label>
                 </div>
               </div>
-
               <clr-dropdown class="mr-10">
                 <button
                   class="btn btn-info-outline"
@@ -236,21 +242,17 @@
                   Download
                   <clr-icon shape="caret down"></clr-icon>
                 </button>
-
                 <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                   <div (click)="downloadSVG()" clrDropdownItem>SVG</div>
                   <div (click)="downloadPNG()" clrDropdownItem>PNG</div>
                   <div (click)="downloadDot()" clrDropdownItem>Dot</div>
-                <div *ngIf="flatdata" (click)="downloadCSV()" clrDropdownItem>
-                  CSV
-                </div>
+                  @if (flatdata) {
+                    <div (click)="downloadCSV()" clrDropdownItem>CSV</div>
+                  }
                 </clr-dropdown-menu>
               </clr-dropdown>
-
-            <clr-checkbox-wrapper
-              *ngIf="column"
-              class="d-flex align-items-center"
-            >
+              @if (column) {
+                <clr-checkbox-wrapper class="d-flex align-items-center">
                   <input
                     type="checkbox"
                     (change)="generateGraph()"
@@ -260,24 +262,31 @@
                   />
                   <label>Refresh Cache</label>
                 </clr-checkbox-wrapper>
+              }
             </div>
+          }
         </section>
-
-        <div *ngIf="graphContainer" [class.mt-2]="tableFlag">
+        @if (graphContainer) {
+          <div [class.mt-2]="tableFlag">
             <div class="text-center">
-            <span *ngIf="graphLoading" class="spinner"> Loading... </span>
-
-            <div *ngIf="!graphLoading" class="position-relative">
+              @if (graphLoading) {
+                <span class="spinner"> Loading... </span>
+              }
+              @if (!graphLoading) {
+                <div class="position-relative">
                   <div class="graph-render-spinner">
-                <span *ngIf="graphRendering" class="spinner spinner-sm"></span>
+                    @if (graphRendering) {
+                      <span class="spinner spinner-sm"></span>
+                    }
                   </div>
-
                   <div id="graph"></div>
                 </div>
+              }
             </div>
           </div>
+        }
       </div>
-    </ng-container>
+    }
   </div>
 </div>
 

client/src/app/metadata/metadata.component.html

@@ -8,18 +8,18 @@
         [(ngModel)]="repository"
         (change)="updateSelectedRepository()"
       >
-        <option
-          *ngFor="let repository of repositories"
-          value="{{ repository }}"
-        >
+        @for (repository of repositories; track repository) {
+          <option value="{{ repository }}">
             {{ repository }}
           </option>
+        }
       </select>
     </clr-select-container>
   </div>
 
   <clr-tree>
-    <clr-tree-node *ngIf="metaDataList" class="search-node">
+    @if (metaDataList) {
+      <clr-tree-node class="search-node">
         <div class="tree-search-wrapper">
           <input
             appStealFocus
@@ -31,21 +31,22 @@
             (keyup)="metaListOnFilter()"
             autocomplete="off"
           />
+          @if (searchLibTreeInput.value.length < 1) {
+            <clr-icon shape="search"></clr-icon>
+          }
+          @if (searchLibTreeInput.value.length > 0) {
             <clr-icon
-          *ngIf="searchLibTreeInput.value.length < 1"
-          shape="search"
-        ></clr-icon>
-        <clr-icon
-          *ngIf="searchLibTreeInput.value.length > 0"
               (click)="metaDataSearch = ''; metaListOnFilter()"
               shape="times"
             ></clr-icon>
+          }
         </div>
       </clr-tree-node>
-    <ng-container *ngFor="let metaData of metaDataList">
+    }
+    @for (metaData of metaDataList; track metaData) {
+      @if (!metaData['hidden']) {
         <clr-tree-node
           (click)="treeNodeClicked($event, metaData, metaDataList)"
-        *ngIf="!metaData['hidden']"
           [(clrExpanded)]="metaData['expanded']"
           [clrLoading]="metaData['loadingTables'] && !metaData.tables"
         >
@@ -59,7 +60,8 @@
             {{ metaData.ID }}
           </p>
         </clr-tree-node>
-    </ng-container>
+      }
+    }
   </clr-tree>
 </app-sidebar>
 
@@ -67,7 +69,8 @@
   <div class="card background-transparent-i">
     <h3 class="color-gray">{{ assoTypeSelected }}</h3>
 
-    <div *ngIf="!loading && !metaObjectList" class="no-table-selected">
+    @if (!loading && !metaObjectList) {
+      <div class="no-table-selected">
         <clr-icon
           shape="warning-standard"
           size="60"
@@ -77,17 +80,28 @@
           Please select a type
         </p>
       </div>
+    }
 
-    <div class="loadingSpinner" *ngIf="loading">
+    @if (loading) {
+      <div class="loadingSpinner">
         <span class="spinner"> Loading... </span>
-      <div *ngIf="loading">
-        <h4 *ngIf="metatypesLoading">Loading metadata types</h4>
-        <h4 *ngIf="!metatypesLoading">Loading metadata objects</h4>
+        @if (loading) {
+          <div>
+            @if (metatypesLoading) {
+              <h4>Loading metadata types</h4>
+            }
+            @if (!metatypesLoading) {
+              <h4>Loading metadata objects</h4>
+            }
           </div>
+        }
       </div>
-    <div *ngIf="showData" class="clr-row clr-flex-grow-1">
+    }
+    @if (showData) {
+      <div class="clr-row clr-flex-grow-1">
         <div class="clr-col-6">
-        <div *ngIf="metaObjectList && !objectRoute" class="search-input">
+          @if (metaObjectList && !objectRoute) {
+            <div class="search-input">
               <input
                 clrInput
                 #searchObjTreeInput
@@ -98,15 +112,17 @@
                 autocomplete="off"
               />
             </div>
+          }
           <br />
-        <div *ngIf="!objectView" class="objects-col">
+          @if (!objectView) {
+            <div class="objects-col">
               <clr-accordion>
-            <ng-container *ngFor="let metaObject of metaObjectShowList">
+                @for (metaObject of metaObjectShowList; track metaObject) {
+                  @if (!metaObject['hidden']) {
                     <clr-accordion-panel
                       (clrAccordionPanelOpenChange)="
                         $event ? panelChange($event, metaObject) : ''
                       "
-                *ngIf="!metaObject['hidden']"
                     >
                       <clr-accordion-title
                         ><clr-icon shape="rack-server"></clr-icon>
@@ -114,7 +130,8 @@
                         <p class="float-right">{{ metaObject.ID }}</p>
                       </clr-accordion-title>
                       <clr-accordion-content *clrIfExpanded>
-                  <clr-tree *ngIf="showAcc" [clrLazy]="true">
+                        @if (showAcc) {
+                          <clr-tree [clrLazy]="true">
                             <clr-tree-node
                               *clrRecursiveFor="
                                 let entry of root$ | async;
@@ -127,31 +144,33 @@
                                 class="full-width"
                               >
                                 <div>
-                          <clr-icon
-                            *ngIf="!entry.count"
-                            shape="rack-server"
-                          ></clr-icon>
-                          <clr-icon
-                            *ngIf="entry.count"
-                            shape="block"
-                          ></clr-icon>
+                                  @if (!entry.count) {
+                                    <clr-icon shape="rack-server"></clr-icon>
+                                  }
+                                  @if (entry.count) {
+                                    <clr-icon shape="block"></clr-icon>
+                                  }
                                   {{ entry.display }}
                                 </div>
-
-                        <p class="float-right object-uri" *ngIf="!entry.count">
+                                @if (!entry.count) {
+                                  <p class="float-right object-uri">
                                     {{ entry.URI }}
                                   </p>
+                                }
                               </div>
                             </clr-tree-node>
                           </clr-tree>
+                        }
                       </clr-accordion-content>
                     </clr-accordion-panel>
-            </ng-container>
+                  }
+                }
               </clr-accordion>
             </div>
-
-        <div *ngIf="objectView" class="objects-col">
-          <ng-container *ngFor="let metaObject of metaObjectShowList">
+          }
+          @if (objectView) {
+            <div class="objects-col">
+              @for (metaObject of metaObjectShowList; track metaObject) {
                 <div class="cols-head">
                   <clr-icon shape="rack-server"></clr-icon>
                   <div class="object-text">
@@ -163,7 +182,8 @@
                     </p>
                   </div>
                 </div>
-            <clr-tree *ngIf="showAcc" [clrLazy]="true">
+                @if (showAcc) {
+                  <clr-tree [clrLazy]="true">
                     <clr-tree-node
                       *clrRecursiveFor="
                         let entry of root$ | async;
@@ -171,29 +191,36 @@
                       "
                       [clrExpandable]="true"
                     >
-                <div [class.object-header]="!entry.count" class="full-width">
+                      <div
+                        [class.object-header]="!entry.count"
+                        class="full-width"
+                      >
                         <div>
-                    <clr-icon
-                      *ngIf="!entry.count"
-                      shape="rack-server"
-                    ></clr-icon>
-                    <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                          @if (!entry.count) {
+                            <clr-icon shape="rack-server"></clr-icon>
+                          }
+                          @if (entry.count) {
+                            <clr-icon shape="block"></clr-icon>
+                          }
                           {{ entry.display }}
                         </div>
-
-                  <p class="float-right object-uri" *ngIf="!entry.count">
+                        @if (!entry.count) {
+                          <p class="float-right object-uri">
                             {{ entry.URI }}
                           </p>
+                        }
                       </div>
                     </clr-tree-node>
                   </clr-tree>
-          </ng-container>
+                }
+              }
             </div>
+          }
         </div>
-
         <div class="clr-col-6 text-center">
           <h3>{{ assoObjectSelected }}</h3>
-        <clr-datagrid class="datagrid-custom-footer" *ngIf="showTable">
+          @if (showTable) {
+            <clr-datagrid class="datagrid-custom-footer">
               <clr-dg-column>
                 TYPE
                 <clr-dg-string-filter
@@ -224,12 +251,15 @@
                   <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]"
                     >Attributes per page</clr-dg-page-size
                   >
-              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
+                  {{ pagination.firstItem + 1 }} -
+                  {{ pagination.lastItem + 1 }} of
                   {{ pagination.totalItems }} Attributes
                 </clr-dg-pagination>
               </clr-dg-footer>
             </clr-datagrid>
+          }
         </div>
       </div>
+    }
   </div>
 </div>

client/src/app/models/CellValidationSource.ts

@@ -1,9 +1,15 @@
+import {
+  DynamicCellValidation,
+  DynamicExtendedCellValidation
+} from '../editor/models/dynamicExtendedCellValidation'
+
 export interface CellValidationSource {
   col: number
   row: number
   strict: boolean
-  values: any[]
-  extended_values?: string[]
+  values: DynamicCellValidation[]
+  extended_values?: DynamicExtendedCellValidation[]
   hash: string
   count: number
+  pending?: Promise<void>
 }

client/src/app/models/TableData.ts

@@ -14,7 +14,8 @@ export interface ColumnDetail {
   LENGTH: number
   NAME: string
   TYPE: string
-  VARNUM: number
+  // No longer sent by viewdata.sas — optional for legacy responses.
+  VARNUM?: number
 }
 
 export interface Approver {
@@ -37,7 +38,6 @@ export interface MaxVarLength {
 
 export interface SASParam {
   COLHEADERS: string
-  COLTYPE: string
   DTTMVARS: string
   DTVARS: string
   CLS_FLAG: number

client/src/app/multi-dataset/multi-dataset.component.html

@@ -1,9 +1,12 @@
 <app-sidebar>
-  <div *ngIf="datasetsLoading" class="my-10-mx-auto text-center">
+  @if (datasetsLoading) {
+    <div class="my-10-mx-auto text-center">
       <clr-spinner clrMedium></clr-spinner>
     </div>
+  }
 
-  <div *ngIf="!parsedDatasets.length" class="text-center mb-10">
+  @if (!parsedDatasets.length) {
+    <div class="text-center mb-10">
       <button
         (click)="fileUploadInput.click()"
         id="browse-file"
@@ -21,9 +24,11 @@
         multiple
       />
     </div>
+  }
 
-  <ng-container *ngIf="parsedDatasets.length && !submittedCsvDatasets.length">
-    <div *ngIf="!excelsSubmitted" class="text-center mb-10">
+  @if (parsedDatasets.length && !submittedCsvDatasets.length) {
+    @if (!excelsSubmitted) {
+      <div class="text-center mb-10">
         <button (click)="onDiscard()" class="btn btn-danger btn-sm mr-10">
           Discard
         </button>
@@ -35,79 +40,75 @@
           Submit All
         </button>
       </div>
-
+    }
     <p cds-text="caption" class="ml-10 mb-10">Found tables:</p>
     <clr-tree>
-      <clr-tree-node *ngFor="let dataset of parsedDatasets">
+      @for (dataset of parsedDatasets; track dataset) {
+        <clr-tree-node>
           <button
             (click)="onParsedDatasetClick(dataset)"
             class="clr-treenode-link whitespace-nowrap d-flex clr-align-items-center"
             [class.active]="dataset.active"
           >
-          <ng-container *ngIf="dataset.submitResult">
+            @if (dataset.submitResult) {
+              @if (dataset.submitResult.error) {
+                <cds-icon status="danger" shape="exclamation-circle"></cds-icon>
+              }
+              @if (dataset.submitResult.success) {
+                <cds-icon status="success" shape="check-circle"></cds-icon>
+              }
+            }
+            @if (!dataset.submitResult) {
+              @if (dataset.datasource) {
+                @if (!(dataset.datasource.length && dataset.parseResult)) {
                   <cds-icon
-              *ngIf="dataset.submitResult.error"
                     status="danger"
                     shape="exclamation-circle"
                   ></cds-icon>
-            <cds-icon
-              *ngIf="dataset.submitResult.success"
-              status="success"
-              shape="check-circle"
-            ></cds-icon>
-          </ng-container>
-
-          <ng-container *ngIf="!dataset.submitResult">
-            <ng-container *ngIf="dataset.datasource">
-              <cds-icon
-                *ngIf="!(dataset.datasource.length && dataset.parseResult)"
-                status="danger"
-                shape="exclamation-circle"
-              ></cds-icon>
-              <cds-icon
-                *ngIf="dataset.datasource.length && dataset.parseResult"
-                shape="table"
-              ></cds-icon>
-            </ng-container>
-
-            <ng-container *ngIf="!dataset.datasource">
-              <cds-icon *ngIf="!dataset.parsingTable" shape="table"></cds-icon>
-
-              <clr-spinner *ngIf="dataset.parsingTable" clrSmall></clr-spinner>
-            </ng-container>
-          </ng-container>
-
+                }
+                @if (dataset.datasource.length && dataset.parseResult) {
+                  <cds-icon shape="table"></cds-icon>
+                }
+              }
+              @if (!dataset.datasource) {
+                @if (!dataset.parsingTable) {
+                  <cds-icon shape="table"></cds-icon>
+                }
+                @if (dataset.parsingTable) {
+                  <clr-spinner clrSmall></clr-spinner>
+                }
+              }
+            }
             <span class="ml-5"> {{ dataset.libds }} </span>
           </button>
         </clr-tree-node>
+      }
     </clr-tree>
-  </ng-container>
+  }
 
-  <ng-container *ngIf="submittedCsvDatasets.length">
+  @if (submittedCsvDatasets.length) {
     <p cds-text="caption" class="ml-10 mb-10 mt-10">Submitted tables:</p>
     <clr-tree>
-      <clr-tree-node *ngFor="let dataset of submittedCsvDatasets">
+      @for (dataset of submittedCsvDatasets; track dataset) {
+        <clr-tree-node>
           <button
             (click)="onSubmittedCsvDatasetClick(dataset)"
             class="clr-treenode-link whitespace-nowrap"
             [class.active]="dataset.active"
           >
-          <cds-icon
-            *ngIf="dataset.error"
-            status="danger"
-            shape="exclamation-circle"
-          ></cds-icon>
-          <cds-icon
-            *ngIf="dataset.success"
-            status="success"
-            shape="check-circle"
-          ></cds-icon>
+            @if (dataset.error) {
+              <cds-icon status="danger" shape="exclamation-circle"></cds-icon>
+            }
+            @if (dataset.success) {
+              <cds-icon status="success" shape="check-circle"></cds-icon>
+            }
             <cds-icon shape="table"></cds-icon>
             {{ dataset.libds }}
           </button>
         </clr-tree-node>
+      }
     </clr-tree>
-  </ng-container>
+  }
 
   <!-- <div *ngIf="librariesPaging" class="w-100 text-center">
   <span class="spinner spinner-sm"> Loading... </span>
@@ -122,11 +123,10 @@
       <p cds-text="section">Multi Dataset Load</p>
     </div>
 
-    <div
-      *ngIf="selectedFile === null && !submittingCsv"
-      class="no-table-selected pointer-events-none"
-    >
+    @if (selectedFile === null && !submittingCsv) {
+      <div class="no-table-selected pointer-events-none">
         <clr-icon
+          aria-hidden="true"
           shape="upload-cloud"
           size="40"
           class="is-info icon-dc-fill"
@@ -135,9 +135,10 @@
           Please upload a file
         </p>
       </div>
+    }
 
-    <ng-container *ngIf="selectedFile !== null || submittingCsv">
-      <ng-container *ngIf="!parsedDatasets.length && selectedFile !== null">
+    @if (selectedFile !== null || submittingCsv) {
+      @if (!parsedDatasets.length && selectedFile !== null) {
         <div class="d-flex clr-justify-content-center mt-15">
           <div class="dataset-input-wrapper">
             <p cds-text="secondary regular" class="mb-5">
@@ -159,12 +160,10 @@
             <p cds-text="secondary regular" class="mb-15">
               Paste or type the list of datasets to upload:
             </p>
-
             <clr-control-helper class="mb-5"
               >Each row is one dataset. We will automatically detect tables by
               the sheetname and populate if any.</clr-control-helper
             >
-
             <hot-table
               #hotInstanceUserDataset
               id="hotTableUserDataset"
@@ -172,7 +171,6 @@
               [settings]="hotUserDatasetsSettings"
             >
             </hot-table>
-
             <div class="dataset-selection-actions text-right mt-10">
               <button
                 (click)="onStartParsingFile()"
@@ -186,29 +184,24 @@
             </div>
           </div>
         </div>
-      </ng-container>
-
-      <ng-container
-        *ngIf="parsedDatasets.length && !submittedCsvDatasets.length"
-      >
-        <div
-          *ngIf="!activeParsedDataset"
-          class="no-table-selected pointer-events-none"
-        >
-          <ng-container *ngIf="fileLoadingState !== FileLoadingState.parsed">
+      }
+      @if (parsedDatasets.length && !submittedCsvDatasets.length) {
+        @if (!activeParsedDataset) {
+          <div class="no-table-selected pointer-events-none">
+            @if (fileLoadingState !== FileLoadingState.parsed) {
               <clr-icon
+                aria-hidden="true"
                 shape="process-on-vm"
                 size="40"
                 class="is-info icon-dc-fill"
               ></clr-icon>
-
               <p class="text-center color-gray mt-10" cds-text="section">
                 {{ fileLoadingState }}...
               </p>
-          </ng-container>
-
-          <ng-container *ngIf="fileLoadingState === FileLoadingState.parsed">
+            }
+            @if (fileLoadingState === FileLoadingState.parsed) {
               <clr-icon
+                aria-hidden="true"
                 shape="warning-standard"
                 size="40"
                 class="is-info icon-dc-fill"
@@ -216,47 +209,38 @@
               <p class="text-center color-gray mt-10" cds-text="section">
                 Please select a dataset on the left to review the data
               </p>
-          </ng-container>
+            }
           </div>
-
-        <ng-container *ngIf="activeParsedDataset">
+        }
+        @if (activeParsedDataset) {
+          @if (activeParsedDataset.submitResult) {
             <div
-            *ngIf="activeParsedDataset.submitResult"
               class="d-flex clr-justify-content-between p-10 mt-15 submission-results"
             >
               <div>
                 <p cds-text="secondary regular" class="mb-10">
                   Submit Status:
-                <span
-                  *ngIf="activeParsedDataset.submitResult?.success"
-                  class="color-green"
-                  ><strong>SUCCESS</strong></span
-                >
-                <span
-                  *ngIf="activeParsedDataset.submitResult?.error"
-                  class="color-red"
-                  ><strong>ERROR</strong></span
-                >
-              </p>
-              <p
-                *ngIf="activeParsedDataset.submitResult?.error"
-                cds-text="secondary regular"
-              >
-                Error details:
+                  @if (activeParsedDataset.submitResult.success) {
+                    <span class="color-green"><strong>SUCCESS</strong></span>
+                  }
+                  @if (activeParsedDataset.submitResult.error) {
+                    <span class="color-red"><strong>ERROR</strong></span>
+                  }
                 </p>
+                @if (activeParsedDataset.submitResult.error) {
+                  <p cds-text="secondary regular">Error details:</p>
+                }
               </div>
-
               <div>
+                @if (!submittingCsv && activeParsedDataset.submitResult.error) {
                   <button
-                *ngIf="
-                  !submittingCsv && activeParsedDataset.submitResult?.error
-                "
                     (click)="reSubmitTable(activeParsedDataset)"
                     class="btn btn-primary mt-10"
                     [clrLoading]="submitLoading"
                   >
                     Resubmit
                   </button>
+                }
                 <button
                   (click)="
                     downloadFile(
@@ -271,22 +255,19 @@
                 </button>
               </div>
             </div>
-
-          <div
-            *ngIf="activeParsedDataset.submitResult?.error"
-            class="error-field mt-15"
-          >
+          }
+          @if (activeParsedDataset.submitResult?.error) {
+            <div class="error-field mt-15">
               <div class="log-wrapper">
                 {{ activeParsedDataset.submitResult?.error | json }}
               </div>
             </div>
-
+          }
           <div class="d-flex clr-justify-content-between p-10 mt-15">
             <div>
               <p cds-text="secondary regular" class="mb-10">
                 Found in range:
-
-                <ng-container *ngIf="activeParsedDataset.parseResult">
+                @if (activeParsedDataset.parseResult) {
                   <strong
                     >"{{
                       activeParsedDataset.parseResult.rangeSheetRes?.sheetName
@@ -295,21 +276,18 @@
                         ?.rangeAddress
                     }}</strong
                   >
-                </ng-container>
-
-                <ng-container *ngIf="!activeParsedDataset.parseResult">
-                  <strong *ngIf="!activeParsedDataset.parsingTable"
-                    >No data found</strong
-                  >
-
-                  <span
-                    *ngIf="activeParsedDataset.parsingTable"
-                    class="d-flex clr-align-items-center"
-                  >
+                }
+                @if (!activeParsedDataset.parseResult) {
+                  @if (!activeParsedDataset.parsingTable) {
+                    <strong>No data found</strong>
+                  }
+                  @if (activeParsedDataset.parsingTable) {
+                    <span class="d-flex clr-align-items-center">
                       <strong>Searching for the data...</strong>
                       <clr-spinner class="ml-5" clrSmall></clr-spinner>
                     </span>
-                </ng-container>
+                  }
+                }
               </p>
               <p cds-text="secondary regular">
                 Dataset:
@@ -330,7 +308,6 @@
                 </strong>
               </p>
             </div>
-
             <div>
               <clr-toggle-wrapper>
                 <input
@@ -351,11 +328,11 @@
               </clr-toggle-wrapper>
             </div>
           </div>
-
-          <div *ngIf="isHotHidden" class="text-center w-100">
+          @if (isHotHidden) {
+            <div class="text-center w-100">
               <clr-spinner class="spinner-md"></clr-spinner>
             </div>
-
+          }
           <hot-table
             #hotInstanceMain
             id="hotTable"
@@ -363,15 +340,13 @@
             [settings]="hotMainTableSettings"
           >
           </hot-table>
-        </ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="submittedCsvDatasets.length">
-        <div
-          *ngIf="!activeSubmittedCsvDataset"
-          class="no-table-selected pointer-events-none"
-        >
+        }
+      }
+      @if (submittedCsvDatasets.length) {
+        @if (!activeSubmittedCsvDataset) {
+          <div class="no-table-selected pointer-events-none">
             <clr-icon
+              aria-hidden="true"
               shape="warning-standard"
               size="40"
               class="is-info icon-dc-fill"
@@ -380,9 +355,9 @@
               Please select a dataset on the left to review the submit results
             </p>
           </div>
-      </ng-container>
-
-      <ng-container *ngIf="activeSubmittedCsvDataset">
+        }
+      }
+      @if (activeSubmittedCsvDataset) {
         <div class="d-flex clr-justify-content-between p-10">
           <div>
             <p cds-text="secondary regular" class="mb-10">
@@ -405,23 +380,17 @@
             </p>
             <p cds-text="secondary regular" class="mb-10">
               Status:
-              <span
-                *ngIf="activeSubmittedCsvDataset.success"
-                class="color-green"
-                ><strong>SUCCESS</strong></span
-              >
-              <span *ngIf="activeSubmittedCsvDataset.error" class="color-red"
-                ><strong>ERROR</strong></span
-              >
-            </p>
-            <p
-              *ngIf="activeSubmittedCsvDataset.error"
-              cds-text="secondary regular"
-            >
-              Error details:
+              @if (activeSubmittedCsvDataset.success) {
+                <span class="color-green"><strong>SUCCESS</strong></span>
+              }
+              @if (activeSubmittedCsvDataset.error) {
+                <span class="color-red"><strong>ERROR</strong></span>
+              }
             </p>
+            @if (activeSubmittedCsvDataset.error) {
+              <p cds-text="secondary regular">Error details:</p>
+            }
           </div>
-
           <div>
             <button
               (click)="
@@ -436,14 +405,15 @@
             </button>
           </div>
         </div>
-
-        <div *ngIf="activeSubmittedCsvDataset.error" class="error-field mt-15">
+        @if (activeSubmittedCsvDataset.error) {
+          <div class="error-field mt-15">
             <div class="log-wrapper">
               {{ activeSubmittedCsvDataset.error | json }}
             </div>
           </div>
-      </ng-container>
-    </ng-container>
+        }
+      }
+    }
 
     <!-- <div>
                       <p
@@ -467,16 +437,14 @@
     {{ tablesToSubmit.length === 1 ? 'table' : 'tables' }} for approval
   </h3>
   <div class="modal-body">
-    <p
-      *ngIf="licenceState.value.submit_rows_limit !== Infinity"
-      cds-text="body"
-      class="licence-limit-notice mt-0 mb-15"
-    >
+    @if (licenceState.value.submit_rows_limit !== Infinity) {
+      <p cds-text="body" class="licence-limit-notice mt-0 mb-15">
         Due to current licence, only
         {{ licenceState.value.submit_rows_limit }} rows in each file will be
         submitted. To remove the restriction, contact
         support&#64;datacontroller.io.
       </p>
+    }
 
     <div class="text-area-full-width">
       <label for="formFields_8" class="mb-5 d-block">Message</label>

client/src/app/multi-dataset/multi-dataset.component.ts

@@ -22,10 +22,9 @@ import { ExcelRule } from '../models/TableData'
 import { HotTableInterface } from '../models/HotTable.interface'
 import { Col } from '../shared/dc-validator/models/col.model'
 import { SpreadsheetService } from '../services/spreadsheet.service'
-import Handsontable from 'handsontable'
+import Handsontable, { CellChange, ChangeSource } from 'handsontable'
 import { HotTableComponent } from '@handsontable/angular-wrapper'
 import { EditorsStageDataSASResponse } from '../models/sas/editors-stagedata.model'
-import { CellChange, ChangeSource } from 'handsontable/common'
 import { baseAfterGetColHeader } from '../shared/utils/hot.utils'
 import { ColumnSettings } from 'handsontable/settings'
 import { UploadFile } from '@sasjs/adapter'
@@ -160,14 +159,16 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
       filters: true,
       stretchH: 'all',
       afterGetColHeader: baseAfterGetColHeader,
-      modifyColWidth: this.maxWidthCheker
+      modifyColWidth: this.maxWidthCheker,
+      theme: 'ht-theme-classic'
     }
 
     // Exclude data from settings for HOT v16 - it will be loaded manually
     const { data, ...settingsWithoutData } = this.hotUserDatasets
     this.hotUserDatasetsSettings = {
       ...settingsWithoutData,
-      licenseKey: this.hotTableLicenseKey
+      licenseKey: this.hotTableLicenseKey,
+      theme: 'ht-theme-classic'
     }
   }
 
@@ -500,7 +501,9 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
             if (changes) {
               for (let change of changes) {
                 if (change && change[3]) {
-                  change[3] = change[3].toUpperCase()
+                  // CellValue is `unknown` in HOT 18 (was a concrete union before);
+                  // this column is always a dataset name string.
+                  change[3] = (change[3] as string).toUpperCase()
                 }
               }
             }
@@ -550,7 +553,9 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
   dynamicCellValidations() {
     if (!this.hotInstanceUserDataset) return
 
-    const hotData = this.hotInstanceUserDataset.getData()
+    // getData() returns unknown[][] in HOT 18 (was CellValue[][]); this grid's
+    // data is always library/table name strings.
+    const hotData = this.hotInstanceUserDataset.getData() as string[][]
 
     hotData.forEach((row, rowIndex) => {
       const library = row[0]
@@ -571,10 +576,12 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
 
     if (dataAtRow && dataAtRow[0] && dataAtRow[1]) {
       if (!this.matchedDatasets.includes(dataset)) {
+        // getCellMetaAtRow() returns Record<string, unknown>[] in HOT 18, so
+        // `.col` needs casting back to number for setCellMeta() (same below).
         cellMetaAtRow.forEach((cellMeta) => {
           this.hotInstanceUserDataset.setCellMeta(
             row,
-            cellMeta.col,
+            cellMeta.col as number,
             'className',
             'not-matched'
           )
@@ -583,7 +590,7 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
         cellMetaAtRow.forEach((cellMeta) => {
           this.hotInstanceUserDataset.setCellMeta(
             row,
-            cellMeta.col,
+            cellMeta.col as number,
             'className',
             ''
           )
@@ -593,7 +600,7 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
       cellMetaAtRow.forEach((cellMeta) => {
         this.hotInstanceUserDataset.setCellMeta(
           row,
-          cellMeta.col,
+          cellMeta.col as number,
           'className',
           ''
         )
@@ -989,7 +996,8 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
   private getDatasetsFromHot(): string[] {
     if (!this.hotInstanceUserDataset) return []
 
-    const hotData = this.hotInstanceUserDataset.getData()
+    // getData() returns unknown[][] in HOT 18; see dynamicCellValidations() above.
+    const hotData = this.hotInstanceUserDataset.getData() as string[][]
 
     return hotData
       .filter((row) => row[0]?.length && row[1]?.length)

client/src/app/query/query.component.html

@@ -30,20 +30,21 @@
         (ngModelChange)="setGroupLogic(groupLogic)"
         clrSelect
       >
-        <option
-          *ngFor="let logic of logicOperators"
-          [selected]="logicOperators[0]"
-        >
+        @for (logic of logicOperators; track logic) {
+          <option [selected]="logicOperators[0]">
             {{ logic }}
           </option>
+        }
       </select>
     </clr-select-container>
   </div>
   <div class="clr-col-md-10 mb-30">
     <pre class="line-numbers language-markup">
-      <div *ngIf="whereClauseLoading" class="progresStatic progress loop">
+      @if (whereClauseLoading) {
+        <div class="progresStatic progress loop">
           <progress></progress>
         </div>
+      }
 
       <code class="language-sql">{{whereClause}}</code>
     </pre>
@@ -55,66 +56,65 @@
     class="clauses-container clr-col-md-12"
     [class.clr-col-md-10]="clauses?.queryObj?.length > 1"
   >
-    <div *ngIf="clauses?.queryObj?.length > 1"></div>
+    @if (clauses?.queryObj?.length > 1) {
+      <div></div>
+    }
 
-    <div
-      class="clause-row"
-      *ngFor="let clause of clauses.queryObj; let clauseIndex = index"
-    >
+    @for (clause of clauses.queryObj; track clause; let clauseIndex = $index) {
+      <div class="clause-row">
         <div class="clr-row" [class.invalid-clause]="clause.invalidClause">
           <div class="clause-logic clr-col-md-2">
             <div class="select">
               <clr-select-container>
                 <label>Logic</label>
-
                 <select
                   [(ngModel)]="clause.clauseLogic"
                   (ngModelChange)="setLogic()"
                   [disabled]="clause.elements.length < 2"
                   clrSelect
                 >
-                <option
-                  *ngFor="let logic of logicOperators"
-                  [selected]="logicOperators[0]"
-                >
+                  @for (logic of logicOperators; track logic) {
+                    <option [selected]="logicOperators[0]">
                       {{ logic }}
                     </option>
+                  }
                 </select>
               </clr-select-container>
             </div>
-
             <br />
-
+            @if (innerWidth > 768) {
               <button
-            *ngIf="innerWidth > 768"
                 class="btn btn-primary btn-block mt-10"
                 (click)="addGroupClause()"
               >
                 <clr-icon shape="plus"></clr-icon>
                 <span>Group</span>
               </button>
+            }
           </div>
-
           <div class="clause-query clr-col-md-10">
+            @if (clauses.queryObj.length > 1) {
               <clr-icon
-            *ngIf="clauses.queryObj.length > 1"
                 (click)="removeGroupClause(clauseIndex)"
                 shape="times"
                 size="36"
                 class="remove-group-clause-button"
               ></clr-icon>
-
-          <div
-            class="clr-row"
-            *ngFor="let query of clause.elements; let queryIndex = index"
-            [class.invalid-clause]="query.invalidClause"
-          >
+            }
+            @for (
+              query of clause.elements;
+              track query;
+              let queryIndex = $index
+            ) {
+              <div class="clr-row" [class.invalid-clause]="query.invalidClause">
                 <!-- VARIABLE -->
                 <div class="variable-col form-group clr-col-md-3">
                   <div class="datalist-wrapper">
                     <app-soft-select
                       label="Variable"
-                  [id]="'select_vals_var_id' + queryIndex + '_' + clauseIndex"
+                      [id]="
+                        'select_vals_var_id' + queryIndex + '_' + clauseIndex
+                      "
                       [inputId]="'vals_var_id' + queryIndex + '_' + clauseIndex"
                       [emitOnlySelected]="true"
                       [(value)]="query.variable"
@@ -127,13 +127,14 @@
                         )
                       "
                     >
-                  <option *ngFor="let column of cols">
+                      @for (column of cols; track column) {
+                        <option>
                           {{ column.NAME }}
                         </option>
+                      }
                     </app-soft-select>
                   </div>
                 </div>
-
                 <!-- OPERATOR -->
                 <div class="operator-col form-group clr-col-md-3">
                   <clr-select-container>
@@ -141,15 +142,20 @@
                     <select
                       [(ngModel)]="query.operator"
                       (ngModelChange)="
-                    setVariableOperator(queryIndex, query.operator, clauseIndex)
+                        setVariableOperator(
+                          queryIndex,
+                          query.operator,
+                          clauseIndex
+                        )
                       "
                       clrSelect
                     >
-                  <option *ngFor="let opr of query.operators">{{ opr }}</option>
+                      @for (opr of query.operators; track opr) {
+                        <option>{{ opr }}</option>
+                      }
                     </select>
                   </clr-select-container>
                 </div>
-
                 <!-- VALUE -->
                 <div
                   *ngVar="
@@ -159,10 +165,8 @@
                   "
                   class="value-col form-group clr-col-md-3"
                 >
-              <div
-                *ngIf="query.operator === 'IN' || query.operator === 'NOT IN'"
-                class="checkbox-vals"
-              >
+                  @if (query.operator === 'IN' || query.operator === 'NOT IN') {
+                    <div class="checkbox-vals">
                       <button
                         (click)="
                           currentQueryIndex = queryIndex;
@@ -185,18 +189,16 @@
                       >
                       </ng-container>
                     </div>
-
-              <div
-                *ngIf="
+                  }
+                  @if (
                     query.operator !== 'BETWEEN' &&
                     query.operator !== 'IN' &&
                     query.operator !== 'NOT IN' &&
                     query.operator !== 'LIKE' &&
                     query.operator !== 'CONTAINS' &&
                     query.operator !== 'BEGINS_WITH'
-                "
-                class="single-field-vals"
-              >
+                  ) {
+                    <div class="single-field-vals">
                       <ng-container
                         *ngTemplateOutlet="
                           isDateTime && usePickers ? picker : notPicker;
@@ -211,8 +213,9 @@
                         <!-- Based on check above, here correct ng-template will be put (picker or dropdown) -->
                       </ng-container>
                     </div>
-
-              <div *ngIf="query.operator === 'BETWEEN'" class="range-vals">
+                  }
+                  @if (query.operator === 'BETWEEN') {
+                    <div class="range-vals">
                       <div class="from">
                         <ng-container
                           *ngTemplateOutlet="
@@ -230,7 +233,6 @@
                           <!-- Based on check above, here correct ng-template will be put (picker or dropdown) -->
                         </ng-container>
                       </div>
-
                       <div class="to">
                         <ng-container
                           *ngTemplateOutlet="
@@ -249,17 +251,14 @@
                         </ng-container>
                       </div>
                     </div>
-
-              <div
-                *ngIf="
+                  }
+                  @if (
                     query.operator === 'LIKE' ||
                     query.operator === 'BEGINS_WITH' ||
                     query.operator === 'CONTAINS'
-                "
-                class="contains-vals"
-              >
+                  ) {
+                    <div class="contains-vals">
                       <label class="clr-control-label">Value</label>
-
                       <input
                         class="input-val"
                         type="text"
@@ -269,18 +268,19 @@
                         "
                       />
                     </div>
+                  }
                 </div>
-
                 <div class="clause-buttons clr-col-md-2 btn-group">
                   <button
                     class="btn btn-warning btn-block"
                     (click)="removeClause(queryIndex, clauseIndex)"
-                [disabled]="clauses.queryObj[clauseIndex].elements.length === 1"
+                    [disabled]="
+                      clauses.queryObj[clauseIndex].elements.length === 1
+                    "
                   >
                     <clr-icon shape="minus"></clr-icon>
                     <span></span>
                   </button>
-
                   <button
                     class="btn btn-success btn-block"
                     (click)="addClause(clauseIndex)"
@@ -290,10 +290,12 @@
                   </button>
                 </div>
               </div>
+            }
           </div>
         </div>
         <br />
       </div>
+    }
   </div>
 </div>
 
@@ -305,8 +307,8 @@
   let-queryIndex="queryIndex"
   let-clauseIndex="clauseIndex"
 >
-  <ng-container [ngSwitch]="query.ddtype">
-    <ng-container *ngSwitchCase="'DATE'">
+  @switch (query.ddtype) {
+    @case ('DATE') {
       <app-soft-select
         label="Value"
         type="date"
@@ -328,9 +330,8 @@
         </option>
       </ng-container> -->
       </app-soft-select>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'DATETIME'">
+    }
+    @case ('DATETIME') {
       <app-soft-select
         label="Value"
         type="date"
@@ -353,7 +354,6 @@
       </option>
     </ng-container> -->
       </app-soft-select>
-
       <app-soft-select
         type="time"
         [disableSoftselect]="true"
@@ -375,9 +375,8 @@
     </option>
   </ng-container> -->
       </app-soft-select>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'TIME'">
+    }
+    @case ('TIME') {
       <app-soft-select
         label="Value"
         type="time"
@@ -399,8 +398,8 @@
     </option>
   </ng-container> -->
       </app-soft-select>
-    </ng-container>
-  </ng-container>
+    }
+  }
 </ng-template>
 
 <ng-template
@@ -425,19 +424,27 @@
       onAutocompleteLoadingMore($event, query.variable, queryIndex, clauseIndex)
     "
   >
-    <div *ngIf="!query.valueVariable">
-      <option [value]="column.unformatted" *ngFor="let column of query.values">
+    @if (!query.valueVariable) {
+      <div>
+        @for (column of query.values; track column) {
+          <option [value]="column.unformatted">
             {{ column.formatted.trim() }}
           </option>
+        }
       </div>
+    }
 
-    <div *ngIf="query.valueVariable">
-      <ng-container *ngFor="let column of cols">
-        <option [value]="column.NAME" *ngIf="column.TYPE === query.type">
+    @if (query.valueVariable) {
+      <div>
+        @for (column of cols; track column) {
+          @if (column.TYPE === query.type) {
+            <option [value]="column.NAME">
               {{ column.NAME }}
             </option>
-      </ng-container>
+          }
+        }
       </div>
+    }
   </app-soft-select>
 </ng-template>
 
@@ -466,9 +473,11 @@
         : false
     "
   >
-    <option [value]="column.formatted" *ngFor="let column of query.values">
+    @for (column of query.values; track column) {
+      <option [value]="column.formatted">
         {{ column.formatted }}
       </option>
+    }
   </app-soft-select>
 </ng-template>
 
@@ -487,15 +496,15 @@
   >
     <h3 class="modal-title">Select values</h3>
     <div class="modal-body">
-      <h5 *ngIf="!isArr(query.value)" class="no-values">
-        No values available.
-      </h5>
+      @if (!isArr(query.value)) {
+        <h5 class="no-values">No values available.</h5>
+      }
 
-      <section class="form-block" *ngIf="isArr(query.value)">
+      @if (isArr(query.value)) {
+        <section class="form-block">
           <clr-checkbox-container>
-          <clr-checkbox-wrapper
-            *ngFor="let column of query.values; let i = index"
-          >
+            @for (column of query.values; track column; let i = $index) {
+              <clr-checkbox-wrapper>
                 <input
                   type="checkbox"
                   clrCheckbox
@@ -504,13 +513,14 @@
                     setVariableValues($event, queryIndex, clauseIndex)
                   "
                 />
-
                 <label>
                   {{ column.formatted }}
                 </label>
               </clr-checkbox-wrapper>
+            }
           </clr-checkbox-container>
         </section>
+      }
     </div>
     <div class="modal-footer">
       <button

client/src/app/query/query.component.ts

@@ -22,6 +22,7 @@ import { QueryDateTime } from './models/QueryDateTime.model'
 import { isSpecialMissing } from '@sasjs/utils/input/validators'
 import { get } from 'lodash-es'
 import { OnLoadingMoreEvent } from '../shared/autocomplete/autocomplete.component'
+import { getFilterObjPath } from './utils/getFilterObjPath'
 
 registerLocaleData(localeEnGB)
 @Component({
@@ -251,17 +252,7 @@ export class QueryComponent
   public setToGlobals() {
     if (!this.caching) return
 
-    let objPath = ''
-
-    if (globals.rootParam === 'home' || globals.rootParam === 'editor') {
-      if (this.viewboxId) {
-        objPath = `viewboxes.${this.viewboxId}`
-      } else {
-        objPath = 'editor'
-      }
-    } else if (globals.rootParam === 'view') {
-      objPath = 'viewer'
-    }
+    const objPath = getFilterObjPath(globals.rootParam, this.viewboxId)
 
     get(globals, objPath).filter.groupLogic = this.groupLogic
     if (typeof this.whereClause === 'string') {
@@ -280,17 +271,7 @@ export class QueryComponent
   public getFromGlobals() {
     if (!this.caching) return
 
-    let objPath = ''
-
-    if (globals.rootParam === 'home' || globals.rootParam === 'editor') {
-      if (this.viewboxId) {
-        objPath = `viewboxes.${this.viewboxId}`
-      } else {
-        objPath = 'editor'
-      }
-    } else if (globals.rootParam === 'view') {
-      objPath = 'viewer'
-    }
+    const objPath = getFilterObjPath(globals.rootParam, this.viewboxId)
 
     if (get(globals, objPath).filter.cols.length > 0) {
       this.cols = JSON.parse(JSON.stringify(get(globals, objPath).filter.cols))
@@ -1051,22 +1032,23 @@ export class QueryComponent
     this.columnsSub = this.sasStoreService.columns.subscribe(
       (response: any) => {
         let cols = response.data.cols
+        const objPath = getFilterObjPath(globals.rootParam, this.viewboxId)
 
         if (globals.rootParam === 'home' || globals.rootParam === 'editor') {
           this.cols = cols
           let some = cols[0].NAME
           this.libds = response.libds
 
-          globals.editor.filter.cols = JSON.parse(JSON.stringify(cols))
+          get(globals, objPath).filter.cols = JSON.parse(JSON.stringify(cols))
         }
 
         if (globals.rootParam === 'view') {
-          if (globals.viewer.filter.cols.length < 1) {
+          if (get(globals, objPath).filter.cols.length < 1) {
             this.cols = cols
             let some = cols[0].NAME
             this.libds = response.libds
 
-            globals.viewer.filter.cols = JSON.parse(JSON.stringify(cols))
+            get(globals, objPath).filter.cols = JSON.parse(JSON.stringify(cols))
           }
         }
 
@@ -1077,20 +1059,12 @@ export class QueryComponent
     )
 
     this.valuesSub = this.sasStoreService.values.subscribe((res: any) => {
-      if (globals.rootParam === 'home' || globals.rootParam === 'editor') {
-        if (globals.editor.filter.vals.length < 1) {
+      const objPath = getFilterObjPath(globals.rootParam, this.viewboxId)
+
+      if (get(globals, objPath).filter.vals.length < 1) {
         this.vals = res.vals
 
-          globals.editor.filter.vals = JSON.parse(JSON.stringify(res.vals))
-        }
-      }
-
-      if (globals.rootParam === 'view') {
-        if (globals.viewer.filter.vals.length < 1) {
-          this.vals = res.vals
-
-          globals.viewer.filter.vals = JSON.parse(JSON.stringify(res.vals))
-        }
+        get(globals, objPath).filter.vals = JSON.parse(JSON.stringify(res.vals))
       }
     })
   }

client/src/app/query/utils/getFilterObjPath.spec.ts

@@ -0,0 +1,31 @@
+import { getFilterObjPath } from './getFilterObjPath'
+
+describe('getFilterObjPath', () => {
+  it("resolves to 'viewer' for the view page with no viewboxId (existing correct case)", () => {
+    expect(getFilterObjPath('view', undefined)).toEqual('viewer')
+  })
+
+  it("resolves to 'editor' for the editor page with no viewboxId", () => {
+    expect(getFilterObjPath('editor', undefined)).toEqual('editor')
+  })
+
+  it("resolves to 'editor' for the home page with no viewboxId (existing home/editor grouping)", () => {
+    expect(getFilterObjPath('home', undefined)).toEqual('editor')
+  })
+
+  it("resolves to 'viewboxes.<id>' when viewboxId is set on the view page - the actual bug (previously returned 'viewer')", () => {
+    expect(getFilterObjPath('view', 42)).toEqual('viewboxes.42')
+  })
+
+  it("resolves to 'viewboxes.<id>' when viewboxId is set on the editor page (already correct today)", () => {
+    expect(getFilterObjPath('editor', 42)).toEqual('viewboxes.42')
+  })
+
+  it("resolves to 'viewboxes.<id>' when viewboxId is set on the home page (already correct today)", () => {
+    expect(getFilterObjPath('home', 42)).toEqual('viewboxes.42')
+  })
+
+  it('resolves to an empty string for an unrecognized rootParam (matches existing fallthrough)', () => {
+    expect(getFilterObjPath('', undefined)).toEqual('')
+  })
+})

client/src/app/query/utils/getFilterObjPath.ts

@@ -0,0 +1,15 @@
+/**
+ * Resolves which bucket of the `globals` filter cache (_globals.ts) a
+ * QueryComponent instance should read/write. viewboxId is checked first,
+ * unconditionally.
+ */
+export const getFilterObjPath = (
+  rootParam: string,
+  viewboxId?: number
+): string => {
+  if (viewboxId) return `viewboxes.${viewboxId}`
+  if (rootParam === 'home' || rootParam === 'editor') return 'editor'
+  if (rootParam === 'view') return 'viewer'
+
+  return ''
+}

client/src/app/review/approve-details/approve-details.component.html

@@ -9,19 +9,21 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let key of keysArray">
+        @for (key of keysArray; track key) {
+          <tr>
             <td class="left">{{ key }}</td>
-          <td
-            *ngIf="key.includes('TABLE_ID')"
-            class="left link-it"
-            [routerLink]="'/stage/' + jsParams[key]"
-          >
+            @if (key.includes('TABLE_ID')) {
+              <td class="left link-it" [routerLink]="'/stage/' + jsParams[key]">
                 {{ jsParams[key] }}
               </td>
-          <td *ngIf="!key.includes('TABLE_ID')" class="left">
+            }
+            @if (!key.includes('TABLE_ID')) {
+              <td class="left">
                 {{ jsParams[key] }}
               </td>
+            }
           </tr>
+        }
       </tbody>
     </table>
   </div>
@@ -39,7 +41,8 @@
 <clr-modal [(clrModalOpen)]="tableFlag">
   <h3 class="modal-title">All Details</h3>
   <div class="modal-body">
-    <clr-tabs *ngIf="tableFlag">
+    @if (tableFlag) {
+      <clr-tabs>
         <clr-tab>
           <button clrTabLink>Submitted Table Details</button>
           <clr-tab-content *clrIfActive="true">
@@ -52,10 +55,12 @@
                   </tr>
                 </thead>
                 <tbody>
-                <tr *ngFor="let detail of submitArr">
+                  @for (detail of submitArr; track detail) {
+                    <tr>
                       <td class="left">{{ detail }}</td>
                       <td class="left">{{ submitDetails[detail] }}</td>
                     </tr>
+                  }
                 </tbody>
               </table>
             </div>
@@ -73,16 +78,19 @@
                   </tr>
                 </thead>
                 <tbody>
-                <tr *ngFor="let key of keysArray">
+                  @for (key of keysArray; track key) {
+                    <tr>
                       <td class="left">{{ key }}</td>
                       <td class="left">{{ jsParams[key] }}</td>
                     </tr>
+                  }
                 </tbody>
               </table>
             </div>
           </clr-tab-content>
         </clr-tab>
       </clr-tabs>
+    }
   </div>
   <div class="modal-footer">
     <button
@@ -130,18 +138,21 @@
 </clr-modal>
 
 <div class="content-area">
-  <div class="card" *ngIf="!submitted">
-    <div
-      class="card-header d-flex flex-column justify-content-center"
-      *ngIf="loaded"
-    >
-      <div class="card" *ngIf="loaded" class="mt-0">
+  @if (!submitted) {
+    <div class="card">
+      @if (loaded) {
+        <div class="card-header d-flex flex-column justify-content-center">
+          @if (loaded) {
+            <div class="card" class="mt-0">
               <div class="card-header p-0">
                 <div class="clr-row">
                   <div class="clr-col-md-4 approvalBack">
-              <span class="btn btn-outline m-0" (click)="goToApprovalsList()">
-                <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
-                approvals list
+                    <span
+                      class="btn btn-outline m-0"
+                      (click)="goToApprovalsList()"
+                    >
+                      <clr-icon shape="caret" dir="left" size="20"></clr-icon
+                      >Back to approvals list
                     </span>
                   </div>
                   <div class="clr-col-md-4 d-flex justify-content-center">
@@ -164,14 +175,16 @@
                 </p>
               </div>
               <div class="card-block p-0">
-          <div class="card-text" *ngIf="loaded">
+                @if (loaded) {
+                  <div class="card-text">
                     <div class="clr-row font-size-15">
                       <div class="clr-col-md-5">
-                <p *ngIf="!tableDetails" class="text-center font-size-18">
+                        @if (!tableDetails) {
+                          <p class="text-center font-size-18">
                             There are no details to show
                           </p>
-
-                <ng-container *ngIf="tableDetails">
+                        }
+                        @if (tableDetails) {
                           <div class="mt-15">
                             <span>Table Id:</span>
                             <strong
@@ -199,7 +212,7 @@
                               {{ tableDetails?.SUBMITTED_REASON_TXT }}
                             </span>
                           </div>
-                </ng-container>
+                        }
                       </div>
                       <div class="clr-col-md-7">
                         <div class="card-block d-flex justify-content-center">
@@ -236,7 +249,9 @@
                             class="btn btn-sm btn-success mr-5i"
                             (click)="approveTable()"
                             [disabled]="
-                      !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
+                              !loadingTable ||
+                              params?.ISAPPROVER === 'NO' ||
+                              noChanges
                             "
                           >
                             ACCEPT
@@ -246,12 +261,13 @@
                             class="btn btn-sm btn btn-danger mr-5i"
                             (click)="rejectOpen = true"
                             [disabled]="
-                      !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
+                              !loadingTable ||
+                              params?.ISAPPROVER === 'NO' ||
+                              noChanges
                             "
                           >
                             REJECT
                           </button>
-
                           <clr-toggle-container class="m-0 ml-20i">
                             <clr-toggle-wrapper>
                               <input
@@ -267,17 +283,19 @@
                             </clr-toggle-wrapper>
                           </clr-toggle-container>
                         </div>
-
                         <div
                           class="card-block d-flex clr-align-items-center clr-flex-column"
                         >
-                  <span *ngIf="diffsLimit" class="rows-notice">
+                          @if (diffsLimit) {
+                            <span class="rows-notice">
                               <clr-icon
                                 class="mb-5 color-orange"
                                 shape="exclamation-triangle"
                               ></clr-icon>
-                    Only the first 100 inserts, updates or deletes are displayed
+                              Only the first 100 inserts, updates or deletes are
+                              displayed
                             </span>
+                          }
                           <div class="clr-row">
                             <div
                               class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
@@ -300,95 +318,127 @@
                       </div>
                     </div>
                   </div>
+                }
               </div>
-
+              @if (!loadingTable) {
                 <div
-          *ngIf="!loadingTable"
                   class="h-24vh d-flex flex-column justify-content-center align-items-center"
                 >
                   <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable" class="mt-10">
+                  @if (!loadingTable) {
+                    <div class="mt-10">
                       <p cds-text="section">Loading table</p>
                     </div>
+                  }
                 </div>
-
+              }
               <div class="tableCont mt-0">
-          <p *ngIf="loadingTable && noChanges" class="text-center font-size-18">
+                @if (loadingTable && noChanges) {
+                  <p class="text-center font-size-18">
                     There are no changes to show
                   </p>
-
+                }
                 <table class="table">
                   <thead>
                     <tr class="d-flex">
-                <th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
+                      @for (col of rowHeader; track col) {
+                        <th class="left">{{ col }}</th>
+                      }
                     </tr>
                   </thead>
                   <tbody>
+                    @for (key of rowKeys; track key; let i = $index) {
                       <tr
                         class="d-flex"
-                *ngFor="let key of rowKeys; let i = index"
                         [ngClass]="{
                           addedRow: chArr[i] == 'added',
                           deletedRow: chArr[i] == 'deleted',
                           updatedRow: chArr[i] == 'updated'
                         }"
                       >
-                <ng-container *ngIf="chArr[i] === 'updated'">
+                        @if (chArr[i] === 'updated') {
+                          @for (
+                            col of rowKeys[i];
+                            track col;
+                            let chIndex = $index
+                          ) {
                             <td
                               class="left"
-                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                               [ngClass]="{
                                 'ch tooltip tooltip-md tooltip-top-right':
-                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
+                                  arrChanged[i][chIndex] == true &&
+                                  chArr[i] == 'updated'
                               }"
                             >
                               {{ diffTable.data[i][col] }}
-                    <span
-                      *ngIf="
-                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
-                      "
-                      class="tooltip-content"
-                      >Original value is: {{ arrOfChanges[i][chIndex] }}</span
+                              @if (
+                                arrChanged[i][chIndex] == true &&
+                                chArr[i] == 'updated'
+                              ) {
+                                <span class="tooltip-content"
+                                  >Original value is:
+                                  {{ arrOfChanges[i][chIndex] }}</span
                                 >
+                              }
                             </td>
-                </ng-container>
-                <ng-container *ngIf="chArr[i] !== 'updated'">
-                  <td
-                    class="left"
-                    *ngFor="let col of rowKeys[i]; let chIndex = index"
-                  >
+                          }
+                        }
+                        @if (chArr[i] !== 'updated') {
+                          @for (
+                            col of rowKeys[i];
+                            track col;
+                            let chIndex = $index
+                          ) {
+                            <td class="left">
                               {{ diffTable.data[i][col] }}
                             </td>
-                </ng-container>
+                          }
+                        }
                       </tr>
+                    }
                   </tbody>
                 </table>
               </div>
             </div>
+          }
         </div>
+      }
       <div class="overflow-auto mr-12">
+        @if (!loaded) {
           <div
-        *ngIf="!loaded"
             class="h-70vh d-flex justify-content-center flex-column align-items-center"
           >
-        <span class="spinner" *ngIf="!loaded"> Loading... </span>
-        <div *ngIf="!loaded">
+            @if (!loaded) {
+              <span class="spinner"> Loading... </span>
+            }
+            @if (!loaded) {
+              <div>
                 <h3>Loading preview</h3>
               </div>
+            }
+          </div>
+        }
       </div>
     </div>
-  </div>
+  }
 
   <!-- submitted  page layout -->
 
-  <div *ngIf="submitted">
-    <div class="d-flex flex-column justify-content-center" *ngIf="loaded">
-      <div class="card m-0" *ngIf="loaded">
+  @if (submitted) {
+    <div>
+      @if (loaded) {
+        <div class="d-flex flex-column justify-content-center">
+          @if (loaded) {
+            <div class="card m-0">
               <div class="card-header">
                 <div class="clr-row">
                   <div class="clr-col-md-4 approvalBack">
                     <span class="btn btn-outline" (click)="goToSubmitList()">
-                <cds-icon shape="angle" direction="left" size="20"></cds-icon
+                      <cds-icon
+                        shape="angle"
+                        direction="left"
+                        size="20"
+                      ></cds-icon
                       >Back to submitted list
                     </span>
                   </div>
@@ -414,7 +464,10 @@
                 <div class="clr-col-md-5">
                   <div class="mt-15">
                     <span>Table Id:</span>
-              <strong class="link-it" [routerLink]="'/stage/' + subObj.tableId">
+                    <strong
+                      class="link-it"
+                      [routerLink]="'/stage/' + subObj.tableId"
+                    >
                       <span> {{ subObj.tableId }}</span>
                     </strong>
                   </div>
@@ -456,17 +509,19 @@
                       </div>
                     </div>
                   </div>
-
                   <div
                     class="card-block d-flex clr-align-items-center clr-flex-column"
                   >
-              <span *ngIf="diffsLimit" class="rows-notice">
+                    @if (diffsLimit) {
+                      <span class="rows-notice">
                         <clr-icon
                           class="mb-5 color-orange"
                           shape="exclamation-triangle"
                         ></clr-icon>
-                Only the first 100 inserts, updates or deletes are displayed
+                        Only the first 100 inserts, updates or deletes are
+                        displayed
                       </span>
+                    }
                     <div class="clr-row">
                       <div
                         class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
@@ -486,7 +541,6 @@
                       </div>
                     </div>
                   </div>
-
                   <div class="card-block d-flex justify-content-center">
                     <clr-toggle-container class="m-0 ml-20-i">
                       <clr-toggle-wrapper>
@@ -505,77 +559,101 @@
                   </div>
                 </div>
               </div>
-
               <div class="card-block p-0 overflow-auto mr-12">
-          <div class="card-text" *ngIf="loaded"></div>
+                @if (loaded) {
+                  <div class="card-text"></div>
+                }
               </div>
-
+              @if (!loadingTable) {
                 <div
-          *ngIf="!loadingTable"
                   class="h-25vh d-flex flex-column justify-content-center align-items-center"
                 >
                   <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable" class="mt-10">
+                  @if (!loadingTable) {
+                    <div class="mt-10">
                       <p cds-text="section">Loading table</p>
                     </div>
+                  }
                 </div>
+              }
               <div class="tableCont">
                 <table class="table">
                   <thead>
                     <tr class="d-flex">
-                <th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
+                      @for (col of rowHeader; track col) {
+                        <th class="left">{{ col }}</th>
+                      }
                     </tr>
                   </thead>
                   <tbody>
+                    @for (key of rowKeys; track key; let i = $index) {
                       <tr
                         class="d-flex"
-                *ngFor="let key of rowKeys; let i = index"
                         [ngClass]="{
                           addedRow: chArr[i] == 'added',
                           deletedRow: chArr[i] == 'deleted',
                           updatedRow: chArr[i] == 'updated'
                         }"
                       >
-                <ng-container *ngIf="chArr[i] === 'updated'">
+                        @if (chArr[i] === 'updated') {
+                          @for (
+                            col of rowKeys[i];
+                            track col;
+                            let chIndex = $index
+                          ) {
                             <td
                               class="left"
-                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                               [ngClass]="{
                                 'ch tooltip tooltip-md tooltip-top-right':
-                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
+                                  arrChanged[i][chIndex] == true &&
+                                  chArr[i] == 'updated'
                               }"
                             >
                               {{ diffTable.data[i][col] }}
-                    <span
-                      *ngIf="
-                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
-                      "
-                      class="tooltip-content"
-                      >Original value is: {{ arrOfChanges[i][chIndex] }}</span
+                              @if (
+                                arrChanged[i][chIndex] == true &&
+                                chArr[i] == 'updated'
+                              ) {
+                                <span class="tooltip-content"
+                                  >Original value is:
+                                  {{ arrOfChanges[i][chIndex] }}</span
                                 >
+                              }
                             </td>
-                </ng-container>
-                <ng-container *ngIf="chArr[i] !== 'updated'">
-                  <td
-                    class="left"
-                    *ngFor="let col of rowKeys[i]; let chIndex = index"
-                  >
+                          }
+                        }
+                        @if (chArr[i] !== 'updated') {
+                          @for (
+                            col of rowKeys[i];
+                            track col;
+                            let chIndex = $index
+                          ) {
+                            <td class="left">
                               {{ diffTable.data[i][col] }}
                             </td>
-                </ng-container>
+                          }
+                        }
                       </tr>
+                    }
                   </tbody>
                 </table>
               </div>
             </div>
+          }
         </div>
-    <div class="card-block" *ngIf="!loaded">
+      }
+      @if (!loaded) {
+        <div class="card-block">
           <div class="loader">
             <span class="spinner"> Loading... </span>
-        <div *ngIf="!loaded">
+            @if (!loaded) {
+              <div>
                 <h3>Loading submitted table</h3>
               </div>
+            }
           </div>
         </div>
+      }
     </div>
+  }
 </div>

client/src/app/review/approve-details/approve-details.component.ts

@@ -1,4 +1,5 @@
 import { ActivatedRoute } from '@angular/router'
+import { sanitiseForSas } from '../../shared/utils/sanitise'
 import { SasStoreService } from '../../services/sas-store.service'
 import {
   Component,
@@ -136,7 +137,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
 
   public async rejecting() {
     this.rejectLoading = true
-    this.submitReason = this.submitReason.replace(/\n/g, '. ')
+    this.submitReason = sanitiseForSas(this.submitReason.replace(/\n/g, '. '))
 
     let rejParams = {
       STP_ACTION: 'REJECT_TABLE',

client/src/app/review/approve/approve.component.html

@@ -1,37 +1,44 @@
 <div class="content-area">
   <div class="card">
-    <div *ngIf="remained === 0" class="d-flex justify-content-center">
+    @if (remained === 0) {
+      <div class="d-flex justify-content-center">
         <div class="card-block noapprovals-info-wrapper">
           <clr-icon
             shape="warning-standard"
             size="60"
             class="is-info icon-dc-fill"
           ></clr-icon>
-        <h3 class="text-center color-gray">There are no approvals remaining</h3>
-      </div>
-    </div>
-    <div class="card-header" [ngClass]="{ noBorder: !loaded }">
-      <h3
-        class="center clr-col-md-12 text-center"
-        *ngIf="loaded && remained !== 0"
-      >
-        REVIEW
+          <h3 class="text-center color-gray">
+            There are no approvals remaining
           </h3>
-      <p
-        class="text-center font-weight-700 color-dark-gray"
-        *ngIf="loaded && remained !== 0"
-      >
+        </div>
+      </div>
+    }
+    <div class="card-header" [ngClass]="{ noBorder: !loaded }">
+      @if (loaded && remained !== 0) {
+        <h3 class="center clr-col-md-12 text-center">REVIEW</h3>
+      }
+      @if (loaded && remained !== 0) {
+        <p class="text-center font-weight-700 color-dark-gray">
           You have <span>{{ remained }} </span>approvals remaining
         </p>
+      }
     </div>
-    <div *ngIf="!loaded" class="approvals-list-wrapper">
-      <span class="spinner" *ngIf="!loaded"> Loading... </span>
-      <div *ngIf="!loaded">
+    @if (!loaded) {
+      <div class="approvals-list-wrapper">
+        @if (!loaded) {
+          <span class="spinner"> Loading... </span>
+        }
+        @if (!loaded) {
+          <div>
             <h3>Loading approvals list</h3>
           </div>
+        }
       </div>
+    }
     <div class="clr-col-md-12" ng-if="loaded">
-      <div *ngIf="approveList && remained !== 0">
+      @if (approveList && remained !== 0) {
+        <div>
           <clr-datagrid class="datagrid-compact datagrid-custom-footer">
             <clr-dg-column [clrDgField]="'submitter'">
               SUBMITTER
@@ -63,7 +70,6 @@
             </clr-dg-column>
             <clr-dg-column>ACTION</clr-dg-column>
             <clr-dg-column>DOWNLOAD</clr-dg-column>
-
             <clr-dg-row
               *clrDgItems="let approveItem of approveList; let i = index"
             >
@@ -86,23 +92,27 @@
                       size="24"
                       aria-hidden="true"
                     ></clr-icon>
-                  <span class="tooltip-content">Go to review page screen</span>
+                    <span class="tooltip-content"
+                      >Go to review page screen</span
+                    >
                   </a>
                   <a
                     class="column-center links tooltip tooltip-md tooltip-bottom-left color-red"
                     (click)="!approveItem.rejectLoading ? rejecting(i) : ''"
                   >
+                    @if (!approveItem.rejectLoading) {
                       <clr-icon
-                    *ngIf="!approveItem.rejectLoading"
                         shape="ban"
                         size="22"
                         aria-hidden="true"
                       ></clr-icon>
+                    }
+                    @if (approveItem.rejectLoading) {
                       <clr-spinner
-                    *ngIf="approveItem.rejectLoading"
                         [clrSmall]="true"
                         aria-hidden="true"
                       ></clr-spinner>
+                    }
                     <span class="tooltip-content">Reject</span>
                   </a>
                   <a
@@ -114,7 +124,9 @@
                       size="28"
                       aria-hidden="true"
                     ></clr-icon>
-                  <span class="tooltip-content">Go to staged data screen</span>
+                    <span class="tooltip-content"
+                      >Go to staged data screen</span
+                    >
                   </a>
                 </div>
               </clr-dg-cell>
@@ -131,18 +143,19 @@
                 </button>
               </clr-dg-cell>
             </clr-dg-row>
-
             <clr-dg-footer>
               <clr-dg-pagination #pagination [clrDgPageSize]="10">
                 <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
                   >Items per page</clr-dg-page-size
                 >
-              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
+                {{ pagination.firstItem + 1 }} -
+                {{ pagination.lastItem + 1 }} of
                 {{ pagination.totalItems }} approvals
               </clr-dg-pagination>
             </clr-dg-footer>
           </clr-datagrid>
         </div>
+      }
     </div>
   </div>
 </div>

client/src/app/review/history/history.component.html

@@ -1,12 +1,13 @@
 <div class="content-area">
+  @if (noData) {
     <div
-    *ngIf="noData"
       id="noDataContainer"
       class="card-block d-flex justify-content-center flex-column align-items-center"
     >
       <clr-icon shape="warning-standard" size="60" class="is-info"></clr-icon>
       <h3 class="text-center color-gray">There is no history to show</h3>
     </div>
+  }
   <clr-modal [(clrModalOpen)]="openModal" [clrModalSize]="'xl'">
     <h4 class="modal-title">Approval details</h4>
     <div class="modal-body">
@@ -18,16 +19,19 @@
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let col of tableTitles; let ind = index">
+          @for (col of tableTitles; track col; let ind = $index) {
+            <tr>
               <td class="left">{{ col }}</td>
               <td class="left">
+                @if (ind < 1) {
                   <a
-                *ngIf="ind < 1"
                     (click)="getTable(approveData[col])"
                     class="cursor-pointer table-link"
                     >{{ approveData[col] }}</a
                   >
-              <div *ngIf="ind < 2 && ind >= 1">
+                }
+                @if (ind < 2 && ind >= 1) {
+                  <div>
                     <a
                       (click)="getBaseTable(approveData[col])"
                       class="cursor-pointer table-link"
@@ -40,9 +44,13 @@
                       >EDIT</a
                     >
                   </div>
-              <span *ngIf="ind >= 2">{{ approveData[col] }}</span>
+                }
+                @if (ind >= 2) {
+                  <span>{{ approveData[col] }}</span>
+                }
               </td>
             </tr>
+          }
         </tbody>
       </table>
     </div>
@@ -58,33 +66,37 @@
     </div>
   </clr-modal>
 
+  @if (!loaded) {
     <div
-    *ngIf="!loaded"
       class="h-70vh d-flex justify-content-center flex-column align-items-center"
     >
-    <span class="spinner" *ngIf="!loaded"> Loading... </span>
-    <div *ngIf="!loaded">
+      @if (!loaded) {
+        <span class="spinner"> Loading... </span>
+      }
+      @if (!loaded) {
+        <div>
           <h3>Loading history</h3>
         </div>
+      }
     </div>
+  }
 
-  <div *ngIf="!noData && loaded" class="card">
+  @if (!noData && loaded) {
+    <div class="card">
       <div class="card-header">
-      <h3 class="center clr-col-md-12 text-center" *ngIf="loaded">HISTORY</h3>
-      <p
-        class="text-center font-weight-700 color-dark-gray"
-        *ngIf="licenceState.value.history_rows_allowed !== Infinity"
-      >
+        @if (loaded) {
+          <h3 class="center clr-col-md-12 text-center">HISTORY</h3>
+        }
+        @if (licenceState.value.history_rows_allowed !== Infinity) {
+          <p class="text-center font-weight-700 color-dark-gray">
             To unlock more than
             {{ licenceState.value.history_rows_allowed }} records, contact
             support&#64;datacontroller.io
           </p>
+        }
       </div>
-
-    <clr-datagrid
-      class="datagrid-history datagrid-custom-footer"
-      *ngIf="loaded"
-    >
+      @if (loaded) {
+        <clr-datagrid class="datagrid-history datagrid-custom-footer">
           <clr-dg-column [clrDgField]="'basetable'">
             BASE_TABLE
             <clr-dg-string-filter
@@ -128,7 +140,6 @@
             ></clr-dg-string-filter>
           </clr-dg-column>
           <clr-dg-column>DOWNLOAD</clr-dg-column>
-
           <clr-dg-row
             *clrDgItems="let historyItem of history"
             (click)="getApprIndex(historyItem)"
@@ -148,27 +159,33 @@
               }"
               >{{ historyItem.status }}</clr-dg-cell
             >
-        <clr-dg-cell class="verCenter">{{ historyItem.submitter }}</clr-dg-cell>
+            <clr-dg-cell class="verCenter">{{
+              historyItem.submitter
+            }}</clr-dg-cell>
             <clr-dg-cell class="verCenter">{{
               historyItem.submittedReason
             }}</clr-dg-cell>
-        <clr-dg-cell class="verCenter">{{ historyItem.submitted }}</clr-dg-cell>
-        <clr-dg-cell class="verCenter">{{ historyItem.reviewed }}</clr-dg-cell>
+            <clr-dg-cell class="verCenter">{{
+              historyItem.submitted
+            }}</clr-dg-cell>
+            <clr-dg-cell class="verCenter">{{
+              historyItem.reviewed
+            }}</clr-dg-cell>
             <clr-dg-cell class="verCenter p-0 d-flex justify-content-center">
               <button
                 aria-label="Download audit file"
                 class="btn btn-success"
-            (click)="download(historyItem.tableId); $event.stopPropagation()"
+                (click)="
+                  download(historyItem.tableId); $event.stopPropagation()
+                "
               >
                 <clr-icon shape="download"></clr-icon>
               </button>
             </clr-dg-cell>
           </clr-dg-row>
-
           <!-- Let's keep this part if in future we decide to do the paging instead of `load more` approach -->
           <!-- <clr-dg-footer class="d-flex justify-content-start">
                     <span>items per page</span>
-
                     <select class="mx-5" [(ngModel)]="itemsNum">
                       <option [ngValue]="3">3</option>
                       <option [ngValue]="5">5</option>
@@ -185,21 +202,23 @@
                     </clr-dg-pagination>
                   </clr-dg-footer> -->
         </clr-datagrid>
-
+      }
       <div
         class="load-more d-flex clr-justify-content-center clr-align-items-center"
       >
-      <button
-        *ngIf="
+        @if (
           this.licenceState.value.history_rows_allowed === Infinity &&
           rowsLeftToLoad > 0
-        "
+        ) {
+          <button
             (click)="loadData()"
             [clrLoading]="loadingMore"
             class="btn btn-success"
           >
             Load {{ rowsLeftToLoad }} more
           </button>
+        }
       </div>
     </div>
+  }
 </div>

client/src/app/review/submitter/submitter.component.html

@@ -1,10 +1,10 @@
 <div class="w-100">
-  <div *ngIf="!subReady" class="content-area">
-    <div *ngIf="!subReady" class="card">
-      <div
-        *ngIf="remained === 0 && loaded"
-        class="d-flex justify-content-center"
-      >
+  @if (!subReady) {
+    <div class="content-area">
+      @if (!subReady) {
+        <div class="card">
+          @if (remained === 0 && loaded) {
+            <div class="d-flex justify-content-center">
               <div
                 class="no-submitted-tables card-block d-flex justify-content-center flex-column align-items-center"
               >
@@ -18,30 +18,36 @@
                 </h3>
               </div>
             </div>
+          }
           <div class="card-header" [ngClass]="{ noBorder: !loaded }">
-        <h3 class="center clr-col-md-12 text-center" *ngIf="remained !== 0">
-          SUBMIT QUEUE
-        </h3>
-        <p
-          class="text-center font-weight-700 color-dark-gray"
-          *ngIf="loaded && remained !== 0"
-        >
+            @if (remained !== 0) {
+              <h3 class="center clr-col-md-12 text-center">SUBMIT QUEUE</h3>
+            }
+            @if (loaded && remained !== 0) {
+              <p class="text-center font-weight-700 color-dark-gray">
                 You have <span>{{ remained }} </span>submissions waiting to be
                 approved
               </p>
+            }
           </div>
-
+          @if (!loaded) {
             <div
-        *ngIf="!loaded"
               class="h-70vh d-flex justify-content-center flex-column align-items-center"
             >
-        <span class="spinner" *ngIf="!loaded"> Loading... </span>
-        <div *ngIf="!loaded">
+              @if (!loaded) {
+                <span class="spinner"> Loading... </span>
+              }
+              @if (!loaded) {
+                <div>
                   <h3>Loading submitted list</h3>
                 </div>
+              }
             </div>
-      <div class="clr-col-md-12" *ngIf="loaded">
-        <div *ngIf="submitterList && remained !== 0">
+          }
+          @if (loaded) {
+            <div class="clr-col-md-12">
+              @if (submitterList && remained !== 0) {
+                <div>
                   <clr-datagrid class="datagrid-compact datagrid-custom-footer">
                     <clr-dg-column>BASE TABLE</clr-dg-column>
                     <clr-dg-column [clrDgField]="'submitted'">
@@ -94,13 +100,14 @@
                         <button
                           class="btn btn-success"
                           aria-label="Download audit file for table record"
-                  (click)="download(sub.tableId); $event.stopPropagation()"
+                          (click)="
+                            download(sub.tableId); $event.stopPropagation()
+                          "
                         >
                           <clr-icon shape="download"></clr-icon>
                         </button>
                       </clr-dg-cell>
                     </clr-dg-row>
-
                     <clr-dg-footer>
                       <clr-dg-pagination #pagination [clrDgPageSize]="10">
                         <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
@@ -113,11 +120,17 @@
                     </clr-dg-footer>
                   </clr-datagrid>
                 </div>
+              }
             </div>
+          }
         </div>
+      }
     </div>
+  }
 
-  <div *ngIf="subReady">
+  @if (subReady) {
+    <div>
       <app-approve-details></app-approve-details>
     </div>
+  }
 </div>

client/src/app/role/role.component.html

@@ -1,6 +1,7 @@
 <app-sidebar class="sidebar-height">
   <clr-tree>
-    <clr-tree-node *ngIf="roles" class="search-node">
+    @if (roles) {
+      <clr-tree-node class="search-node">
         <div class="tree-search-wrapper">
           <input
             appStealFocus
@@ -12,21 +13,22 @@
             (keyup)="roleListOnFilter()"
             autocomplete="off"
           />
+          @if (searchLibTreeInput.value.length < 1) {
+            <clr-icon shape="search"></clr-icon>
+          }
+          @if (searchLibTreeInput.value.length > 0) {
             <clr-icon
-          *ngIf="searchLibTreeInput.value.length < 1"
-          shape="search"
-        ></clr-icon>
-        <clr-icon
-          *ngIf="searchLibTreeInput.value.length > 0"
               (click)="roleSearch = ''; roleListOnFilter()"
               shape="times"
             ></clr-icon>
+          }
         </div>
       </clr-tree-node>
-    <ng-container *ngFor="let role of roles">
+    }
+    @for (role of roles; track role) {
+      @if (!role['hidden']) {
         <clr-tree-node
           (click)="roleOnClick(role)"
-        *ngIf="!role['hidden']"
           [class.active]="role.ROLEURI === roleUri"
         >
           <p class="m-0 cursor-pointer list-padding">
@@ -34,15 +36,19 @@
             {{ role.ROLENAME }}
           </p>
         </clr-tree-node>
-    </ng-container>
+      }
+    }
   </clr-tree>
 </app-sidebar>
 
 <div class="content-area">
-  <div *ngIf="loading" class="loadingSpinner">
+  @if (loading) {
+    <div class="loadingSpinner">
       <span class="spinner"> Loading... </span>
     </div>
-  <div *ngIf="roleMembers && !loading">
+  }
+  @if (roleMembers && !loading) {
+    <div>
       <div class="clr-row">
         <div class="clr-col-8">
           <table class="table role-info">
@@ -63,15 +69,17 @@
           </table>
         </div>
       </div>
-
       <div class="clr-row">
         <div class="clr-col-8">
           <div class="card role-data">
             <div>
               <h3>MEMBERS ({{ roleMembersCount }})</h3>
-            <h5 *ngIf="roleMembersCount == 0">No Members Present</h5>
+              @if (roleMembersCount == 0) {
+                <h5>No Members Present</h5>
+              }
               <div class="table-container">
-              <table *ngIf="roleMembersCount != 0" class="table member-table">
+                @if (roleMembersCount != 0) {
+                  <table class="table member-table">
                     <thead>
                       <tr>
                         <td class="width-25"><b>NAME</b></td>
@@ -81,25 +89,30 @@
                       </tr>
                     </thead>
                     <tbody>
+                      @for (member of roleMembers; track member) {
                         <tr
                           [routerLink]="'/view/usernav/users/' + member.URIMEM"
-                    *ngFor="let member of roleMembers"
                         >
                           <td class="">{{ member.MEMBERNAME }}</td>
                           <td class="">{{ member.EMAIL }}</td>
                           <td class="">{{ member.MEMBERCREATED }}</td>
                           <td class="">{{ member.MEMBERUPDATED }}</td>
                         </tr>
+                      }
                     </tbody>
                   </table>
+                }
               </div>
             </div>
             <hr />
             <div>
               <h3>Groups ({{ roleGroupsCount }})</h3>
-            <h5 *ngIf="roleGroupsCount == 0">No Groups Present !</h5>
+              @if (roleGroupsCount == 0) {
+                <h5>No Groups Present !</h5>
+              }
               <div class="table-container">
-              <table *ngIf="roleGroupsCount != 0" class="table member-table">
+                @if (roleGroupsCount != 0) {
+                  <table class="table member-table">
                     <thead>
                       <tr>
                         <td class="width-25"><b>NAME</b></td>
@@ -109,17 +122,19 @@
                       </tr>
                     </thead>
                     <tbody>
+                      @for (group of roleGroups; track group) {
                         <tr
                           [routerLink]="'/view/usernav/groups/' + group.URIMEM"
-                    *ngFor="let group of roleGroups"
                         >
                           <td class="">{{ group.MEMBERNAME }}</td>
                           <td class="">{{ group.EMAIL }}</td>
                           <td class="">{{ group.MEMBERCREATED }}</td>
                           <td class="">{{ group.MEMBERUPDATED }}</td>
                         </tr>
+                      }
                     </tbody>
                   </table>
+                }
               </div>
             </div>
             <br />
@@ -127,4 +142,5 @@
         </div>
       </div>
     </div>
+  }
 </div>

client/src/app/services/app.service.spec.ts

@@ -0,0 +1,141 @@
+import { EventEmitter } from '@angular/core'
+import { BehaviorSubject, Subject } from 'rxjs'
+import { AppService } from './app.service'
+
+/**
+ * AppService's constructor subscribes to several emitters/subjects (see
+ * subscribe() and the persistSelectedTheme check) and startUpData() touches
+ * a handful of methods on each collaborator — these stubs cover exactly
+ * that surface, not the full real services (no TestBed/DI needed, same
+ * plain-instantiation-with-stubs precedent as va-filter.service.spec.ts).
+ */
+const buildDeps = () => {
+  const licenceService: any = {
+    isAppActivated: new BehaviorSubject<boolean | null>(null),
+    activation: jasmine.createSpy('activation').and.resolveTo(undefined)
+  }
+  const eventService: any = {
+    showInfoModal: jasmine.createSpy('showInfoModal'),
+    startupDataLoaded: jasmine.createSpy('startupDataLoaded'),
+    toggleDarkMode: jasmine.createSpy('toggleDarkMode')
+  }
+  const sasService: any = {
+    loadStartupServiceEmitter: new EventEmitter<any>(),
+    requestSiteIdEmitter: new EventEmitter<string>(),
+    request: jasmine.createSpy('request')
+  }
+  const loggerService: any = {
+    log: jasmine.createSpy('log')
+  }
+  const appSettingsService: any = {
+    settings: new BehaviorSubject({ persistSelectedTheme: false } as any)
+  }
+  const router: any = {
+    events: new Subject(),
+    url: '',
+    navigateByUrl: jasmine.createSpy('navigateByUrl')
+  }
+  const appStoreService: any = {
+    getDcAdapterSettings: () => undefined
+  }
+
+  return {
+    licenceService,
+    eventService,
+    sasService,
+    loggerService,
+    appSettingsService,
+    router,
+    appStoreService
+  }
+}
+
+const buildAppService = (deps: ReturnType<typeof buildDeps>) =>
+  new AppService(
+    deps.licenceService,
+    deps.eventService,
+    deps.sasService,
+    deps.loggerService,
+    deps.appSettingsService,
+    deps.router,
+    deps.appStoreService
+  )
+
+// Minimal valid startupservice payload — just enough to pass startUpData()'s
+// missing-props check (Globvars/Sasdatasets/Saslibs/XLMaps).
+const validStartupResponse = () => ({
+  adapterResponse: {
+    SYSSITE: 'SITE1',
+    globvars: [{ ISADMIN: false, DC_ADMIN_GROUP: '', DCLIB: 'DCLIB' }],
+    sasdatasets: [],
+    saslibs: {},
+    xlmaps: []
+  }
+})
+
+describe('AppService - startup retry', () => {
+  it('retries once and succeeds without showing the error modal when only the first attempt rejects', async () => {
+    const deps = buildDeps()
+    deps.sasService.request.and.returnValues(
+      Promise.reject('timeout'),
+      Promise.resolve(validStartupResponse())
+    )
+
+    const appService = buildAppService(deps)
+    // Keep the retry pause instant in tests — see STARTUP_RETRY_PLAN.md.
+    ;(appService as any).retryOptions = {
+      wait: () => Promise.resolve(),
+      random: () => 0
+    }
+
+    await appService.startUpData()
+
+    expect(deps.sasService.request).toHaveBeenCalledTimes(2)
+    expect(deps.eventService.showInfoModal).not.toHaveBeenCalled()
+    expect(deps.eventService.startupDataLoaded).toHaveBeenCalled()
+  })
+
+  it('shows the error modal once (not twice) when both attempts reject', async () => {
+    const deps = buildDeps()
+    deps.sasService.request.and.returnValues(
+      Promise.reject('timeout-1'),
+      Promise.reject('timeout-2')
+    )
+
+    const appService = buildAppService(deps)
+    ;(appService as any).retryOptions = {
+      wait: () => Promise.resolve(),
+      random: () => 0
+    }
+
+    await appService.startUpData()
+
+    expect(deps.sasService.request).toHaveBeenCalledTimes(2)
+    expect(deps.eventService.showInfoModal).toHaveBeenCalledTimes(1)
+    expect(deps.licenceService.isAppActivated.value).toBeFalse()
+  })
+
+  it('does not retry a response that arrives but is missing required properties', async () => {
+    const deps = buildDeps()
+    deps.sasService.request.and.resolveTo({
+      adapterResponse: {
+        SYSSITE: 'SITE1',
+        // globvars deliberately omitted
+        sasdatasets: [],
+        saslibs: {},
+        xlmaps: []
+      }
+    })
+
+    const appService = buildAppService(deps)
+    ;(appService as any).retryOptions = {
+      wait: () => Promise.resolve(),
+      random: () => 0
+    }
+
+    await appService.startUpData()
+
+    expect(deps.sasService.request).toHaveBeenCalledTimes(1)
+    expect(deps.eventService.showInfoModal).toHaveBeenCalledTimes(1)
+  })
+})

client/src/app/services/app.service.ts

@@ -11,11 +11,15 @@ import { AppSettingsService } from './app-settings.service'
 import { AppThemes } from '../models/AppSettings'
 import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapperResponse'
 import { AppStoreService } from './app-store.service'
+import { retryOnce, RetryOnceOptions } from '../shared/utils/retry-once'
 
 @Injectable()
 export class AppService {
   public syssite = new BehaviorSubject<string[] | null>(null)
   private environmentInfo: EnvironmentInfo = {}
+  // Overridable in tests to keep the retry pause instant — see
+  // retry-once.spec.ts and app.service.spec.ts.
+  private retryOptions: RetryOnceOptions = {}
 
   constructor(
     private licenceService: LicenceService,
@@ -82,8 +86,13 @@ export class AppService {
   public async startUpData() {
     let startupServiceError = false
 
-    await this.sasService
-      .request('public/startupservice', null)
+    // Retry once on failure — multiple concurrent DC instances (e.g. VA
+    // multi-page reports) can cause this request to time out even though a
+    // second attempt succeeds. See STARTUP_RETRY_PLAN.md.
+    await retryOnce(
+      () => this.sasService.request('public/startupservice', null),
+      this.retryOptions
+    )
       .then(async (res: RequestWrapperResponse) => {
         this.syssite.next([res.adapterResponse.SYSSITE])
 

client/src/app/services/helper.service.spec.ts

@@ -0,0 +1,48 @@
+import { HelperService } from './helper.service'
+
+describe('HelperService - convertArrayValues', () => {
+  let service: HelperService
+
+  beforeEach(() => {
+    // convertArrayValues does not touch any injected dependency
+    service = new HelperService(null as any)
+  })
+
+  it('returns an empty array for empty input', () => {
+    expect(service.convertArrayValues([], 'string')).toEqual([])
+    expect(service.convertArrayValues([], 'number')).toEqual([])
+  })
+
+  it('coerces values to numbers for the numeric path', () => {
+    expect(service.convertArrayValues(['1', '2', '3'], 'number')).toEqual([
+      1, 2, 3
+    ])
+  })
+
+  it('coerces values to strings for the string path', () => {
+    expect(service.convertArrayValues([1, 2, 3], 'string')).toEqual([
+      '1',
+      '2',
+      '3'
+    ])
+  })
+
+  // Regression: a RAW_VALUE / dropdown source value that itself contains a
+  // comma must stay a single item. Previously `array.toString().split(',')`
+  // joined the array and re-split on every comma, shattering one value into
+  // several. Same bug that hit display_value lists.
+  it('keeps a single value containing commas intact (string path)', () => {
+    expect(service.convertArrayValues(['Smith, John'], 'string')).toEqual([
+      'Smith, John'
+    ])
+  })
+
+  it('does not split multiple comma-containing values into individual items', () => {
+    const source = ['Smith, John', 'Doe, Jane', 'Plain']
+
+    const result = service.convertArrayValues(source, 'string')
+
+    expect(result).toEqual(['Smith, John', 'Doe, Jane', 'Plain'])
+    expect(result.length).toBe(3)
+  })
+})

client/src/app/services/helper.service.ts

@@ -280,7 +280,7 @@ export class HelperService {
         return array.map((value) => value * 1)
       }
       case 'string': {
-        return array.toString().split(',')
+        return array.map((value) => `${value}`)
       }
     }
   }

client/src/app/services/licence.service.ts

@@ -170,15 +170,15 @@ export class LicenceService {
           errString
         )}&force=true`
         this.licenceProblem.next(url)
-        this.router.navigateByUrl(url)
 
         setTimeout(() => {
-          return this.applicationActivation(
+          this.applicationActivation(
             this.freeTierLicenceData,
             variables,
             startup_site_id,
             true
           )
+          this.router.navigateByUrl(url)
         })
       }
     )

client/src/app/services/sas-store.service.ts

@@ -155,13 +155,23 @@ export class SasStoreService {
       .adapterResponse
   }
 
+  private libsPromise: Promise<any> | null = null
+
   /**
    *
    * @returns All libraries
    */
-  public async viewLibs() {
-    return (await this.sasService.request('public/viewlibs', null))
-      .adapterResponse
+  public viewLibs() {
+    if (!this.libsPromise) {
+      this.libsPromise = this.sasService
+        .request('public/viewlibs', null)
+        .then((res: any) => res.adapterResponse)
+        .catch((err: any) => {
+          this.libsPromise = null
+          throw err
+        })
+    }
+    return this.libsPromise
   }
 
   public async refreshLibInfo(libref: string) {

client/src/app/services/sas.service.ts

@@ -641,6 +641,23 @@ export class SasService {
     this.sasjsAdapter.setDebugState(state)
   }
 
+  /**
+   * Returns the `&_debug=...` URL segment honoring the live adapter
+   * config. Empty string when debug is off. `128` on the Viya WEB JES path
+   * with `runAsTask` enabled, `131` otherwise.
+   */
+  public getDebugUrlParam(): string {
+    const config = this.sasjsAdapter.getSasjsConfig()
+    if (!config.debug) return ''
+    const value =
+      config.serverType === ServerType.SasViya &&
+      config.useComputeApi === null &&
+      config.runAsTask === true
+        ? 128
+        : 131
+    return `&_debug=${value}`
+  }
+
   public getSasjsInstance() {
     return this.sasjsAdapter
   }

client/src/app/services/va-filter.service.spec.ts

@@ -0,0 +1,274 @@
+import { VaFilterService } from './va-filter.service'
+import { VaMessage } from './va-messaging.service'
+
+/**
+ * Minimal stand-in for HelperService.convertJsDateToSasDate using the real
+ * epoch math, so date/datetime assertions use the actual SAS internal values
+ * without pulling in HelperService's dependency graph (SasService etc.).
+ */
+class HelperServiceStub {
+  convertJsDateToSasDate(jsDate: Date, unit = 'days'): number {
+    const ms = Date.UTC(
+      jsDate.getFullYear(),
+      jsDate.getMonth(),
+      jsDate.getDate(),
+      jsDate.getHours(),
+      jsDate.getMinutes(),
+      jsDate.getSeconds()
+    )
+    const sasMs = ms + 315619200000
+    return unit === 'days'
+      ? Math.floor(Math.abs(sasMs / 86400000))
+      : sasMs / 1000
+  }
+}
+
+function msg(parameters: any[]): VaMessage {
+  return {
+    resultName: 'r',
+    rowCount: 0,
+    data: [],
+    columns: [],
+    parameters
+  } as VaMessage
+}
+
+describe('VaFilterService', () => {
+  let service: VaFilterService
+
+  // DC column metadata used by the metadata path. cellValidation[0] is the
+  // delete column and must be skipped by buildLabelToVarMap.
+  const cellValidation = [
+    { data: 'DEL' },
+    { data: 'SOME_CHAR' },
+    { data: 'SOME_NUM' },
+    { data: 'SOME_TIME' },
+    { data: 'SOME_DATE' },
+    { data: 'SOME_DATETIME' }
+  ]
+  const columnHeader = [
+    'Delete?',
+    'SOME_CHAR',
+    'SOME_NUM',
+    'SOME_TIME',
+    'SOME_DATE',
+    'SOME_DATETIME'
+  ]
+  const cols = [
+    { NAME: 'SOME_CHAR', DDTYPE: 'C' },
+    { NAME: 'SOME_NUM', DDTYPE: 'N' },
+    { NAME: 'SOME_TIME', DDTYPE: 'TIME' },
+    { NAME: 'SOME_DATE', DDTYPE: 'DATE' },
+    { NAME: 'SOME_DATETIME', DDTYPE: 'DATETIME' }
+  ]
+
+  beforeEach(() => {
+    service = new VaFilterService(new HelperServiceStub() as any)
+  })
+
+  const labelToVar = () =>
+    service.buildLabelToVarMap(cellValidation, columnHeader)
+
+  describe('buildLabelToVarMap', () => {
+    it('maps header and var name (case-insensitive), skipping the delete column', () => {
+      const map = labelToVar()
+      expect(map.get('some_char')).toBe('SOME_CHAR')
+      expect(map.get('some_num')).toBe('SOME_NUM')
+      expect(map.get('del')).toBeUndefined()
+      expect(map.get('delete?')).toBeUndefined()
+    })
+  })
+
+  describe('buildClauses (metadata path)', () => {
+    const build = (parameters: any[]) =>
+      service.buildClauses(msg(parameters), labelToVar(), cols)
+
+    it('builds a char equality clause, single-quote escaped', () => {
+      expect(build([{ label: 'SOME_CHAR', value: "O'Brien" }])).toEqual([
+        {
+          GROUP_LOGIC: 'AND',
+          SUBGROUP_LOGIC: 'AND',
+          SUBGROUP_ID: 0,
+          VARIABLE_NM: 'SOME_CHAR',
+          OPERATOR_NM: '=',
+          RAW_VALUE: "'O''Brien'"
+        }
+      ])
+    })
+
+    it('builds an IN clause for multiple values', () => {
+      const [clause] = build([{ label: 'SOME_CHAR', value: ['A', 'B'] }])
+      expect(clause.OPERATOR_NM).toBe('IN')
+      expect(clause.RAW_VALUE).toBe("('A','B')")
+    })
+
+    it('passes numeric values raw and drops non-numeric (injection guard)', () => {
+      expect(build([{ label: 'SOME_NUM', value: '10' }])[0].RAW_VALUE).toBe(
+        '10'
+      )
+      expect(build([{ label: 'SOME_NUM', value: 'abc' }])).toEqual([])
+    })
+
+    it('converts temporal values to SAS internal numbers', () => {
+      expect(
+        build([{ label: 'SOME_TIME', value: '0:00:02' }])[0].RAW_VALUE
+      ).toBe('2')
+      expect(
+        build([{ label: 'SOME_DATE', value: '01JUL1960' }])[0].RAW_VALUE
+      ).toBe('182')
+      expect(
+        build([{ label: 'SOME_DATETIME', value: '01JAN1960:00:06:05' }])[0]
+          .RAW_VALUE
+      ).toBe('365')
+    })
+
+    it('passes an already-internal (bare number) temporal value through raw', () => {
+      // VA sends the raw SAS internal value when the data item has no format.
+      expect(build([{ label: 'SOME_DATE', value: '182' }])[0].RAW_VALUE).toBe(
+        '182'
+      )
+      expect(
+        build([{ label: 'SOME_DATETIME', value: '365' }])[0].RAW_VALUE
+      ).toBe('365')
+      expect(build([{ label: 'SOME_TIME', value: '2' }])[0].RAW_VALUE).toBe('2')
+    })
+
+    it('parses ISO date shapes identically to DATE9 (VA sends no format)', () => {
+      const date9 = build([{ label: 'SOME_DATE', value: '01AUG1962' }])[0]
+        .RAW_VALUE
+      // The production symptom: YYMMDDS "2025/03/31" style must parse, not drop.
+      expect(
+        build([{ label: 'SOME_DATE', value: '1962-08-01' }])[0].RAW_VALUE
+      ).toBe(date9)
+      expect(
+        build([{ label: 'SOME_DATE', value: '1962/08/01' }])[0].RAW_VALUE
+      ).toBe(date9)
+      // A real production-format value must yield a clause (not be dropped).
+      expect(build([{ label: 'SOME_DATE', value: '2025/03/31' }])).toHaveSize(1)
+    })
+
+    it('resolves ambiguous slash dates day-first (never US), disambiguating by value', () => {
+      const iso = build([{ label: 'SOME_DATE', value: '2025-03-31' }])[0]
+        .RAW_VALUE
+      // 31 can only be a day -> both orders resolve to 2025-03-31.
+      expect(
+        build([{ label: 'SOME_DATE', value: '31/03/2025' }])[0].RAW_VALUE
+      ).toBe(iso) // day-first
+      expect(
+        build([{ label: 'SOME_DATE', value: '03/31/2025' }])[0].RAW_VALUE
+      ).toBe(iso) // value forces month-first
+      // Genuinely ambiguous (both <= 12): default DAY-first => 4th March, NOT 3rd April.
+      expect(
+        build([{ label: 'SOME_DATE', value: '04/03/2025' }])[0].RAW_VALUE
+      ).toBe(build([{ label: 'SOME_DATE', value: '2025-03-04' }])[0].RAW_VALUE)
+      // Impossible date is dropped, not rolled over.
+      expect(build([{ label: 'SOME_DATE', value: '31/02/2025' }])).toEqual([])
+    })
+
+    it('uses the column FMTNAME to resolve ambiguous dates (MMDDYY reads US month-first)', () => {
+      const iso = (v: string) =>
+        service.buildClauses(
+          msg([{ label: 'D', value: v }]),
+          new Map([['d', 'D']]),
+          [{ NAME: 'D', DDTYPE: 'DATE' }]
+        )[0]?.RAW_VALUE
+      const withFmt = (fmt: string, v: string) =>
+        service.buildClauses(
+          msg([{ label: 'D', value: v }]),
+          new Map([['d', 'D']]),
+          [{ NAME: 'D', DDTYPE: 'DATE', FMTNAME: fmt }]
+        )[0]?.RAW_VALUE
+      // 04/03/2025, both <= 12 (ambiguous): FMTNAME decides.
+      expect(withFmt('MMDDYY', '04/03/2025')).toBe(iso('2025-04-03')) // 3 April
+      expect(withFmt('DDMMYY', '04/03/2025')).toBe(iso('2025-03-04')) // 4 March
+      // Value still overrides a wrong FMTNAME: 31 can only be the day.
+      expect(withFmt('MMDDYY', '31/03/2025')).toBe(iso('2025-03-31'))
+      // Falls back to the full FORMAT (e.g. MMDDYY10.) when FMTNAME is blank.
+      const withFormat = service.buildClauses(
+        msg([{ label: 'D', value: '04/03/2025' }]),
+        new Map([['d', 'D']]),
+        [{ NAME: 'D', DDTYPE: 'DATE', FMTNAME: '', FORMAT: 'MMDDYY10.' }]
+      )[0]?.RAW_VALUE
+      expect(withFormat).toBe(iso('2025-04-03')) // 3 April, from FORMAT
+    })
+
+    it('parses ISO datetime shapes identically to SAS DATETIME', () => {
+      const sas = build([
+        { label: 'SOME_DATETIME', value: '01JAN1960:00:06:05' }
+      ])[0].RAW_VALUE
+      expect(
+        build([{ label: 'SOME_DATETIME', value: '1960-01-01T00:06:05' }])[0]
+          .RAW_VALUE
+      ).toBe(sas)
+      expect(
+        build([{ label: 'SOME_DATETIME', value: '1960-01-01 00:06:05' }])[0]
+          .RAW_VALUE
+      ).toBe(sas)
+    })
+
+    it('matches the column by label case-insensitively', () => {
+      expect(build([{ label: 'some_char', value: 'x' }])[0].VARIABLE_NM).toBe(
+        'SOME_CHAR'
+      )
+    })
+
+    it('skips params that are empty or do not map to a column', () => {
+      expect(build([{ label: 'SOME_CHAR', value: '' }])).toEqual([])
+      expect(build([{ label: 'NOT_A_COLUMN', value: 'x' }])).toEqual([])
+    })
+  })
+
+  describe('buildInitialClauses (no metadata, infer kind from value)', () => {
+    it('uses the VA label as the column and infers kinds by value shape', () => {
+      const clauses = service.buildInitialClauses(
+        msg([
+          { name: 'pr1', label: 'SOME_CHAR', dataType: 'string', value: 'x' },
+          { name: 'pr2', label: 'SOME_NUM', dataType: 'number', value: '10' },
+          { name: 'pr3', label: 'SOME_TIME', value: '0:00:02' },
+          { name: 'pr4', label: 'SOME_DATE', value: '01JUL1960' },
+          { name: 'pr5', label: 'SOME_DATETIME', value: '01JAN1960:00:06:05' }
+        ])
+      )
+      expect(clauses.map((c) => [c.VARIABLE_NM, c.RAW_VALUE])).toEqual([
+        ['SOME_CHAR', "'x'"],
+        ['SOME_NUM', '10'],
+        ['SOME_TIME', '2'],
+        ['SOME_DATE', '182'],
+        ['SOME_DATETIME', '365']
+      ])
+    })
+
+    it('infers ISO date/datetime shapes by value shape', () => {
+      const clauses = service.buildInitialClauses(
+        msg([
+          { name: 'pr1', label: 'SOME_DATE', value: '1960-07-01' },
+          { name: 'pr2', label: 'SOME_DATE2', value: '1960/07/01' },
+          { name: 'pr3', label: 'SOME_DTTM', value: '1960-01-01T00:06:05' }
+        ])
+      )
+      expect(clauses.map((c) => [c.VARIABLE_NM, c.RAW_VALUE])).toEqual([
+        ['SOME_DATE', '182'],
+        ['SOME_DATE2', '182'],
+        ['SOME_DTTM', '365']
+      ])
+    })
+  })
+
+  describe('signature', () => {
+    it('is case-insensitive on the column name (no reconcile reload)', () => {
+      const a = [
+        { VARIABLE_NM: 'some_char', OPERATOR_NM: '=', RAW_VALUE: "'x'" }
+      ] as any
+      const b = [
+        { VARIABLE_NM: 'SOME_CHAR', OPERATOR_NM: '=', RAW_VALUE: "'x'" }
+      ] as any
+      expect(service.signature(a)).toBe(service.signature(b))
+    })
+
+    it('changes when a value changes', () => {
+      const a = [{ VARIABLE_NM: 'SOME_CHAR', RAW_VALUE: "'x'" }] as any
+      const b = [{ VARIABLE_NM: 'SOME_CHAR', RAW_VALUE: "'y'" }] as any
+      expect(service.signature(a)).not.toBe(service.signature(b))
+    })
+  })
+})

client/src/app/services/va-filter.service.ts

@@ -0,0 +1,427 @@
+import { Injectable } from '@angular/core'
+import { HelperService } from './helper.service'
+import { VaMessage } from './va-messaging.service'
+import { QueryClause } from '../models/TableData'
+
+/** SAS data-type kind used to format a VA filter value into a DC RAW_VALUE. */
+type VaColumnKind = 'char' | 'numeric' | 'time' | 'date' | 'datetime'
+
+/**
+ * Translates SAS Visual Analytics data-driven content `parameters` into DC
+ * filter clauses. Independent of editor/HOT state — the editor passes the
+ * loaded column metadata in — so it is unit-testable on its own. Temporal
+ * values are converted to SAS internal numbers (matching DC's native filters)
+ * via the shared HelperService.
+ */
+@Injectable({ providedIn: 'root' })
+export class VaFilterService {
+  private static readonly SAS_MONTHS = [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JUL',
+    'AUG',
+    'SEP',
+    'OCT',
+    'NOV',
+    'DEC'
+  ]
+
+  constructor(private helperService: HelperService) {}
+
+  /** label/name (lower-cased) -> DC variable (prop) name, skipping the delete col. */
+  buildLabelToVarMap(
+    cellValidation: any[],
+    columnHeader: string[]
+  ): Map<string, string> {
+    const map = new Map<string, string>()
+    for (let i = 1; i < cellValidation.length; i++) {
+      const varName = cellValidation[i]?.data
+      if (!varName) continue
+      map.set(
+        (columnHeader[i] ?? varName).toString().trim().toLowerCase(),
+        varName
+      )
+      map.set(varName.toString().trim().toLowerCase(), varName)
+    }
+    return map
+  }
+
+  /**
+   * Translates VA `parameters` into DC filter clauses. Each parameter is matched
+   * to a DC column by label; a single value becomes `col = value`, multiple
+   * values become `col IN (...)`. Values are formatted for the column's SAS kind.
+   */
+  buildClauses(
+    msg: VaMessage,
+    labelToVar: Map<string, string>,
+    cols: any[]
+  ): QueryClause[] {
+    const clauses: QueryClause[] = []
+    for (const param of msg.parameters || []) {
+      if (!param || param.value === undefined || param.value === null) continue
+      const key = (param.label ?? param.name ?? '')
+        .toString()
+        .trim()
+        .toLowerCase()
+      // A VA param whose label isn't a DC column (beyond case, which is handled)
+      // simply doesn't map — skip it.
+      const varName = labelToVar.get(key)
+      if (!varName) continue
+
+      const col = this.findCol(varName, cols)
+      const kind = this.columnKind(col)
+      const order = this.dateOrderFromFmt(col?.FMTNAME || col?.FORMAT)
+      const rawValues = Array.isArray(param.value) ? param.value : [param.value]
+      // Format/validate every value for the column's SAS type. Numeric columns
+      // must receive a finite number (untrusted postMessage input is
+      // interpolated into a SAS WHERE clause, so a non-numeric value here would
+      // be an injection vector); temporal -> SAS internal number; char ->
+      // escaped. Invalid values are dropped.
+      const formatted = rawValues
+        .filter((v) => v !== undefined && v !== null && v !== '')
+        .map((v) => this.formatValueByKind(v, kind, order))
+        .filter((v): v is string => v !== null)
+      if (formatted.length === 0) continue
+      clauses.push(this.clause(varName, formatted))
+    }
+    return clauses
+  }
+
+  /**
+   * Pre-getdata variant used on the deferred initial load, when DC column
+   * metadata isn't available. Uses the VA `label` as the column name and infers
+   * the SAS kind from the value shape, so the clause matches what the metadata
+   * build later produces (no reconcile reload).
+   */
+  buildInitialClauses(msg: VaMessage): QueryClause[] {
+    const clauses: QueryClause[] = []
+    for (const param of msg.parameters || []) {
+      if (!param || param.value === undefined || param.value === null) continue
+      // The DC column name is the VA `label`; `name` is VA's internal id (pr###).
+      const varName = (param.label ?? param.name ?? '').toString().trim()
+      if (!varName) continue
+
+      const rawValues = Array.isArray(param.value) ? param.value : [param.value]
+      const nonEmpty = rawValues.filter(
+        (v) => v !== undefined && v !== null && v !== ''
+      )
+      if (nonEmpty.length === 0) continue
+
+      const formatted = nonEmpty
+        .map((v) =>
+          this.formatValueByKind(
+            v,
+            this.inferKindFromValue(String(v).trim(), param.dataType)
+          )
+        )
+        .filter((v): v is string => v !== null)
+      if (formatted.length === 0) continue
+      clauses.push(this.clause(varName, formatted))
+    }
+    return clauses
+  }
+
+  /**
+   * Stable signature of filter clauses for cross-reload dedup. VARIABLE_NM is
+   * upper-cased because the metadata-less deferred build uses VA's label case
+   * while the metadata build uses DC's stored column case — SAS WHERE clauses
+   * are case-insensitive, so those are the same filter and must not trigger a
+   * reconcile reload. A genuine value difference still changes the signature.
+   */
+  signature(clauses: QueryClause[]): string {
+    return JSON.stringify(
+      clauses.map((c) => ({
+        ...c,
+        VARIABLE_NM: (c.VARIABLE_NM ?? '').toString().toUpperCase()
+      }))
+    )
+  }
+
+  private clause(varName: string, formatted: string[]): QueryClause {
+    return {
+      GROUP_LOGIC: 'AND',
+      SUBGROUP_LOGIC: 'AND',
+      SUBGROUP_ID: 0,
+      VARIABLE_NM: varName,
+      OPERATOR_NM: formatted.length === 1 ? '=' : 'IN',
+      RAW_VALUE:
+        formatted.length === 1 ? formatted[0] : `(${formatted.join(',')})`
+    }
+  }
+
+  /** The loaded column spec whose NAME matches varName (case-insensitive). */
+  private findCol(varName: string, cols: any[]): any {
+    return (cols || []).find(
+      (x: any) =>
+        (x?.NAME ?? '').toString().toUpperCase() === varName.toUpperCase()
+    )
+  }
+
+  /**
+   * SAS data-type kind of a column spec. DDTYPE carries
+   * TIME/DATE/DATETIME in full, with C/N for CHARACTER/NUMERIC (legacy
+   * responses may still carry the full strings); checked DATETIME-before-DATE
+   * (substring).
+   */
+  private columnKind(col: any): VaColumnKind {
+    const ddtype = (col?.DDTYPE ?? '').toString().toUpperCase()
+    if (ddtype.includes('DATETIME')) return 'datetime'
+    if (ddtype.includes('DATE')) return 'date'
+    if (ddtype.includes('TIME')) return 'time'
+    if (
+      ddtype === 'N' ||
+      ddtype.includes('NUMERIC') ||
+      (col?.TYPE ?? '') === 'num'
+    ) {
+      return 'numeric'
+    }
+    return 'char'
+  }
+
+  /**
+   * Day/month/year order declared by a column's SAS format, used to resolve
+   * ambiguous numeric dates. Accepts either the base FMTNAME (e.g. `DDMMYY`) or
+   * the full FORMAT (e.g. `DDMMYY10.`) — the leading name is the same and is all
+   * that matters for order (width is irrelevant). This is the SOURCE column's
+   * format; the VA report can in principle display a different one, so
+   * value-based disambiguation (a group > 12 is the day) still takes precedence —
+   * this only decides the genuinely-ambiguous case. `undefined` when the format
+   * is absent, month-name (DATE*), or locale-dependent (NLDATE).
+   */
+  private dateOrderFromFmt(fmtname: any): 'YMD' | 'DMY' | 'MDY' | undefined {
+    const f = (fmtname ?? '').toString().toUpperCase()
+    if (/^MMDDYY/.test(f)) return 'MDY'
+    if (/^(DDMMYY|EURDF)/.test(f)) return 'DMY'
+    if (/^(YYMMDD|E8601DA|B8601DA)/.test(f)) return 'YMD'
+    return undefined
+  }
+
+  /**
+   * Infers a column's SAS kind from a VA value string (deferred load, no
+   * metadata). VA's temporal strings are distinctive — DATE9 `ddMMMyyyy` and ISO
+   * `yyyy-MM-dd`/`yyyy/MM/dd`, optionally with a `[ T:]HH:MM[:SS]` time part, and
+   * `H:MM:SS` — so they're detected by shape; otherwise fall back to the VA
+   * `dataType`.
+   */
+  private inferKindFromValue(value: string, dataType?: string): VaColumnKind {
+    const monName = String.raw`\d{1,2}[A-Za-z]{3}\d{2,4}`
+    const ymd = String.raw`\d{4}[-/.]\d{1,2}[-/.]\d{1,2}` // 4-digit year first
+    const dmy = String.raw`\d{1,2}[-/.]\d{1,2}[-/.]\d{4}` // 4-digit year last
+    const date = `${monName}|${ymd}|${dmy}`
+    if (new RegExp(`^(?:${date})[ T:]\\d{1,2}:\\d{2}(:\\d{2})?$`).test(value)) {
+      return 'datetime'
+    }
+    if (new RegExp(`^(?:${date})$`).test(value)) return 'date'
+    if (/^\d{1,2}:\d{2}(:\d{2})?(\.\d+)?$/.test(value)) return 'time'
+    if (dataType === 'number') return 'numeric'
+    return 'char'
+  }
+
+  /**
+   * Formats one VA filter value into a DC RAW_VALUE for the column kind, or null
+   * when invalid (dropped). Matches DC's native filters, which send the NUMERIC
+   * INTERNAL value (not SAS literals — those error out in the backend):
+   *  - numeric  -> finite number, raw (else null — injection guard)
+   *  - time     -> seconds since midnight   (VA: "0:00:02" -> 2)
+   *  - date     -> days since 1960-01-01    (VA: "01JUL1960" -> 182)
+   *  - datetime -> seconds since 1960-01-01 (VA: "01JAN1960:00:06:05" -> 365)
+   *  - char     -> single-quote escaped
+   * Temporal strings are regex-parsed (digits/letters/colons only), so a value
+   * either yields a finite number or is dropped — also the injection guard.
+   * Date/datetime reuse HelperService.convertJsDateToSasDate so the value is
+   * byte-identical to what DC's own pickers produce.
+   *
+   * A temporal value that is already a bare number is the SAS internal value
+   * itself (VA sends it unformatted when the data item carries no format / is
+   * used as a measure), so it is passed through raw. This is unambiguous because
+   * the only date formats in use (DATE9, ISO) always contain a letter or a
+   * separator — a plain integer is never a formatted date.
+   */
+  private formatValueByKind(
+    value: any,
+    kind: VaColumnKind,
+    order?: 'YMD' | 'DMY' | 'MDY'
+  ): string | null {
+    const s = String(value).trim()
+    if (s === '') return null
+    switch (kind) {
+      case 'numeric': {
+        const num = Number(s)
+        return Number.isFinite(num) ? `${num}` : null
+      }
+      case 'time': {
+        if (this.isBareNumber(s)) return `${Number(s)}`
+        const secs = this.timeToSeconds(s)
+        return secs === null ? null : `${secs}`
+      }
+      case 'date': {
+        if (this.isBareNumber(s)) return `${Number(s)}`
+        const d = this.parseDate(s, order)
+        return d
+          ? `${this.helperService.convertJsDateToSasDate(d, 'days')}`
+          : null
+      }
+      case 'datetime': {
+        if (this.isBareNumber(s)) return `${Number(s)}`
+        const d = this.parseDatetime(s, order)
+        return d
+          ? `${this.helperService.convertJsDateToSasDate(d, 'seconds')}`
+          : null
+      }
+      default:
+        return `'${s.replace(/'/g, "''")}'`
+    }
+  }
+
+  /** "H:MM[:SS][.f]" -> seconds since midnight, or null if not a valid time. */
+  private timeToSeconds(value: string): number | null {
+    if (!/^\d{1,2}:\d{2}(:\d{2})?(\.\d+)?$/.test(value)) return null
+    const p = value.split('.')[0].split(':')
+    const h = Number(p[0])
+    const m = Number(p[1])
+    const sec = p.length === 3 ? Number(p[2]) : 0
+    if (![h, m, sec].every(Number.isFinite)) return null
+    return h * 3600 + m * 60 + sec
+  }
+
+  /**
+   * VA date string -> local JS Date, or null. VA sends no format metadata, so the
+   * shape is sniffed. Accepted forms (separator may be `-`, `/`, or `.`):
+   *  - DATE9    "ddMMM[yy]yy" (e.g. 01AUG1962)
+   *  - ISO/YMD  "yyyy-MM-dd" (4-digit year first, e.g. 2025-03-31)
+   *  - year-last "dd/mm/yyyy" or "mm/dd/yyyy" (4-digit year last)
+   *
+   * Day/month order for the year-last form is resolved in priority order:
+   *   1. by value  — a group > 12 must be the day (ground truth);
+   *   2. by `order` — the column's declared FMTNAME order (DMY/MDY/YMD);
+   *   3. default DAY-FIRST — never US month-first — matching SAS's DDMMYY
+   *      default and non-US convention.
+   * `new Date(y, m-1, d)` is local, matching HelperService.convertJsDateToSasDate
+   * so the value is byte-identical to DC's own pickers. The constructed date is
+   * round-trip validated to reject impossible values (e.g. 31/02) rather than
+   * silently roll over.
+   */
+  private parseDate(value: string, order?: 'YMD' | 'DMY' | 'MDY'): Date | null {
+    return this.parseMonthNameDate(value) ?? this.parseNumericDate(value, order)
+  }
+
+  /** DATE9 "ddMMM[yy]yy" (e.g. 01AUG1962, 01AUG62) -> local Date, or null. */
+  private parseMonthNameDate(value: string): Date | null {
+    const m = /^(\d{1,2})([A-Za-z]{3})(\d{2}|\d{4})$/.exec(value)
+    if (!m) return null
+    const [, day, monthAbbr, year] = m
+    const monthIndex = VaFilterService.SAS_MONTHS.indexOf(
+      monthAbbr.toUpperCase()
+    )
+    if (monthIndex < 0) return null
+    return this.buildDate(this.fullYear(year), monthIndex + 1, Number(day))
+  }
+
+  /**
+   * Numeric date with `-`, `/`, or `.` separators -> local Date, or null:
+   *  - year-first "yyyy-MM-dd"  -> YMD directly;
+   *  - year-last  "dd/mm/yyyy" or "mm/dd/yyyy" -> day/month resolved by
+   *    resolveDayMonth (value, then column order, then day-first default).
+   * A 4-digit year (leading or trailing) is required to anchor the parse;
+   * an all-2-digit value (e.g. "03/04/05") is too ambiguous and is dropped.
+   */
+  private parseNumericDate(
+    value: string,
+    order?: 'YMD' | 'DMY' | 'MDY'
+  ): Date | null {
+    const m = /^(\d{1,4})[-/.](\d{1,2})[-/.](\d{1,4})$/.exec(value)
+    if (!m) return null
+    const [, first, middle, last] = m
+    const yearIsFirst = first.length === 4
+    const yearIsLast = last.length === 4
+
+    if (yearIsFirst) {
+      return this.buildDate(Number(first), Number(middle), Number(last))
+    }
+    if (!yearIsLast) return null
+
+    const { day, month } = this.resolveDayMonth(
+      Number(first),
+      Number(middle),
+      order
+    )
+    return this.buildDate(Number(last), month, day)
+  }
+
+  /**
+   * Resolves the day/month of a year-last date whose two leading groups (`a`,
+   * `b`) are in unknown order, in priority:
+   *   1. by value  — a group > 12 must be the day (ground truth);
+   *   2. by `order` — only MDY flips to month-first; DMY/YMD keep day-first;
+   *   3. default   — DAY-first (`a` is the day), never US month-first.
+   */
+  private resolveDayMonth(
+    a: number,
+    b: number,
+    order?: 'YMD' | 'DMY' | 'MDY'
+  ): { day: number; month: number } {
+    if (a > 12 && b <= 12) return { day: a, month: b }
+    if (b > 12 && a <= 12) return { day: b, month: a }
+    if (order === 'MDY') return { day: b, month: a }
+    return { day: a, month: b }
+  }
+
+  /** Local Date from 1-based month, round-trip validated (null if impossible). */
+  private buildDate(
+    year: number,
+    month: number,
+    day: number,
+    hours = 0,
+    minutes = 0,
+    seconds = 0
+  ): Date | null {
+    if (month < 1 || month > 12 || day < 1 || day > 31) return null
+    const d = new Date(year, month - 1, day, hours, minutes, seconds, 0)
+    // Reject rollovers (e.g. 31 Feb -> 3 Mar) so a bad value is dropped, not
+    // silently converted to the wrong SAS date.
+    if (
+      d.getFullYear() !== year ||
+      d.getMonth() !== month - 1 ||
+      d.getDate() !== day
+    ) {
+      return null
+    }
+    return d
+  }
+
+  /**
+   * VA datetime string -> local JS Date, or null. The date part is any shape
+   * accepted by parseDate; the time part is "HH:MM[:SS]". They are joined by the
+   * SAS ":" separator (e.g. 01JAN1960:05:13:03), an ISO "T", or a space
+   * (e.g. 2025-03-31T05:13:03, 2025-03-31 05:13:03).
+   */
+  private parseDatetime(
+    value: string,
+    order?: 'YMD' | 'DMY' | 'MDY'
+  ): Date | null {
+    const m = /^(.+?)[ T:](\d{1,2}:\d{2}(?::\d{2})?)$/.exec(value)
+    if (!m) return null
+    const date = this.parseDate(m[1], order)
+    if (!date) return null
+    const t = m[2].split(':')
+    date.setHours(Number(t[0]), Number(t[1]), Number(t[2] || 0), 0)
+    return date
+  }
+
+  /** True when the value is a bare (already-internal) SAS number: optional sign,
+   * digits, optional fraction. No letters/separators — so never a formatted date. */
+  private isBareNumber(value: string): boolean {
+    return /^-?\d+(\.\d+)?$/.test(value) && Number.isFinite(Number(value))
+  }
+
+  /** 2-digit SAS year -> 4-digit (SAS default cutoff: 00-19 -> 20xx, else 19xx). */
+  private fullYear(year: string): number {
+    if (year.length === 4) return Number(year)
+    const y = Number(year)
+    return y <= 19 ? 2000 + y : 1900 + y
+  }
+}

client/src/app/services/va-messaging.service.spec.ts

@@ -0,0 +1,102 @@
+import { VaMessagingService, VaMessage } from './va-messaging.service'
+
+// Sample message taken from the official SAS DDC docs (brush column included).
+const SAMPLE = {
+  version: '1',
+  resultName: 'dd40',
+  rowCount: 3,
+  availableRowCount: 3,
+  data: [
+    ['Finch', 95000.0, 0.4285],
+    ['Jones', 26000.0, 0.0],
+    ['Smith', 108000.0, 0.5]
+  ],
+  columns: [
+    { name: 'bi184', label: 'dealer', type: 'string' },
+    {
+      name: 'bi258',
+      label: 'sales',
+      type: 'number',
+      usage: 'quantitative',
+      aggregation: 'sum'
+    },
+    { name: 'ri1', type: 'number', usage: 'brush' }
+  ]
+}
+
+describe('VaMessagingService', () => {
+  let service: VaMessagingService
+
+  beforeEach(() => {
+    service = new VaMessagingService()
+  })
+
+  describe('parseMessage', () => {
+    it('parses a valid DDC message and defaults parameters to []', () => {
+      const msg = service.parseMessage({ data: SAMPLE } as MessageEvent)
+      expect(msg).not.toBeNull()
+      expect(msg!.resultName).toBe('dd40')
+      expect(msg!.rowCount).toBe(3)
+      expect(msg!.parameters).toEqual([])
+    })
+
+    it('returns null for unrelated / malformed messages', () => {
+      expect(service.parseMessage({ data: null } as MessageEvent)).toBeNull()
+      expect(
+        service.parseMessage({ data: 'hello' } as unknown as MessageEvent)
+      ).toBeNull()
+      expect(
+        service.parseMessage({ data: { columns: [] } } as MessageEvent)
+      ).toBeNull()
+    })
+  })
+
+  describe('dataColumns', () => {
+    it('excludes brush columns and keeps original indices', () => {
+      const msg = service.parseMessage({ data: SAMPLE } as MessageEvent)!
+      const cols = service.dataColumns(msg)
+      expect(cols.map((c) => c.column.name)).toEqual(['bi184', 'bi258'])
+      expect(cols.map((c) => c.index)).toEqual([0, 1])
+    })
+  })
+
+  describe('onData', () => {
+    const sameOrigin = window.location.origin
+
+    it('invokes the callback for valid messages and unsubscribes cleanly', () => {
+      const received: VaMessage[] = []
+      const off = service.onData((m) => received.push(m))
+
+      window.dispatchEvent(
+        new MessageEvent('message', { data: SAMPLE, origin: sameOrigin })
+      )
+      expect(received.length).toBe(1)
+      expect(received[0].resultName).toBe('dd40')
+
+      // unrelated traffic is ignored
+      window.dispatchEvent(
+        new MessageEvent('message', { data: { foo: 1 }, origin: sameOrigin })
+      )
+      expect(received.length).toBe(1)
+
+      off()
+      window.dispatchEvent(
+        new MessageEvent('message', { data: SAMPLE, origin: sameOrigin })
+      )
+      expect(received.length).toBe(1)
+    })
+
+    it('rejects messages from an untrusted origin', () => {
+      const received: VaMessage[] = []
+      service.onData((m) => received.push(m))
+
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: SAMPLE,
+          origin: 'https://evil.example.com'
+        })
+      )
+      expect(received.length).toBe(0)
+    })
+  })
+})