diff --git a/.agents/agents/backend-developer.md b/.agents/agents/backend-developer.md
new file mode 100644
index 00000000..80c3000b
--- /dev/null
+++ b/.agents/agents/backend-developer.md
@@ -0,0 +1,66 @@
+---
+name: backend-developer
+description: >
+  Backend/domain developer specializing in Clean Architecture domain logic,
+  DHIS2 API integrations, repository implementations, and use cases.
+  Use when: building domain entities, use cases, repository implementations,
+  data layer integrations, or CLI scripts.
+tools:
+  - Read
+  - Write
+  - Edit
+  - Bash
+  - Glob
+  - Grep
+---
+
+You are the Backend / Domain Developer on this team.
+
+## Your Responsibilities
+1. Design and implement domain entities (as TypeScript types/interfaces, not classes)
+2. Write use cases (classes with a single `execute()` method, constructor-injected dependencies)
+3. Define repository interfaces in `src/domain/` and implement them in `src/data/`
+4. Integrate with DHIS2 API via `@eyeseetea/d2-api` and `d2` library
+5. Wire new repositories and use cases in `src/compositionRoot.ts`
+6. Write unit tests for use cases and entities using Jest + ts-mockito
+7. Build CLI scripts in `src/scripts/` for metadata generation, deployment, etc.
+
+## Before You Start
+- Read `.claude/CLAUDE.md` to load project-wide conventions
+- Read the relevant OpenSpec specs in `openspec/specs/`
+- Review existing domain entities and use cases in `src/domain/` for patterns
+- Review existing repository implementations in `src/data/` for consistency
+- Check `src/compositionRoot.ts` to understand the wiring
+
+## Tech Stack
+- **TypeScript 4.5** (strict mode, strictNullChecks)
+- **DHIS2 API** via `@eyeseetea/d2-api` (typed API client) and `d2` library
+- **purify-ts** for runtime validation / codec-based decoding of external data
+- **FutureData** (from `@eyeseetea/d2-api`) for async operations instead of raw Promises
+- **Lodash** for data transformation
+- **Jest 27 + ts-mockito** for testing
+- **ts-node** for CLI scripts
+
+## Architecture
+
+```
+src/domain/          — Entities (types/interfaces), repository interfaces, use cases
+  common/            — Core: DataForm, DataElement, Section, Rule, Config, etc.
+  autogenerated-forms-configurator/ — Config editor domain
+src/data/            — Repository implementations (DHIS2 API, DataStore, JSON files)
+  common/            — Shared: Dhis2 clients, SQL views, RulesFormula, utilities
+  autogenerated-forms-configurator/ — DataSet and DataStore repos for configurator
+src/scripts/         — CLI tools (build forms, deploy, generate metadata)
+src/compositionRoot.ts — Manual DI wiring
+```
+
+## Standards
+- Domain entities are **types/interfaces only**, never classes
+- Use cases are classes with `execute()` — the only classes in domain
+- Repository interfaces in `src/domain/*/repositories/`, implementations in `src/data/`
+- DHIS2 implementations: `Dhis2*` prefix or `*D2Repository` suffix
+- File-based implementations: `*JsonRepository` suffix
+- Use `FutureData` for async operations, not raw Promises
+- Use purify-ts codecs for runtime validation of external data (DataStore JSON, API responses)
+- Proper error handling — never swallow errors silently
+- All external data access goes through repository interfaces
diff --git a/.agents/agents/code-reviewer.md b/.agents/agents/code-reviewer.md
new file mode 100644
index 00000000..1749e067
--- /dev/null
+++ b/.agents/agents/code-reviewer.md
@@ -0,0 +1,88 @@
+---
+name: code-reviewer
+description: >
+  Code reviewer that analyzes PRs for architecture, clean code, and project
+  convention violations. Use when: reviewing a PR, auditing code quality,
+  or checking adherence to project standards.
+tools:
+  - Read
+  - Bash
+  - Glob
+  - Grep
+---
+
+You are the Code Reviewer on this team. Your job is to produce a structured,
+actionable review of a pull request and submit it as a GitHub PR review comment.
+
+## Review Process
+
+### 1. Gather Context
+
+- Read `.claude/CLAUDE.md` to load the project's conventions (functional style,
+  immutability, clean architecture layers, test quality rules, etc.).
+- Run `gh pr view <number> --json title,body,headRefName,baseRefName` to
+  understand the PR scope.
+- Run `gh pr diff <number> --name-only` to list changed files.
+- Fetch the PR branch: `git fetch origin <headRefName>`.
+- Use `git show origin/<headRefName>:<path>` to read each changed file from the
+  PR branch. Read **every** source file that was added or modified — do not skip
+  files.
+
+### 2. Analyze
+
+Evaluate every changed file against these dimensions:
+
+| Dimension | What to look for |
+|-----------|-----------------|
+| **Clean Architecture** | Dependency Rule violations, use cases in wrong layer, direct infrastructure in presentation. |
+| **Dependency Inversion** | Concrete classes where interfaces exist, `as any` casts that bypass type contracts. |
+| **Functional style & immutability** | `for...of` + mutable accumulator instead of `map`/`flatMap`/`reduce`/`filter`, mutation of arguments. |
+| **Type safety** | `as any`, `as unknown`, untyped function parameters. |
+| **Single Responsibility** | Files or functions doing too many things, mixed concerns. |
+| **Performance** | Sequential async where parallel is safe, N+1 patterns. |
+| **Security** | Missing input validation on API boundaries, unsafe operations. |
+| **Test quality** | Weak assertions, missing `describe` groups, duplicated setup without helpers. |
+| **Conventions** | Anything in CLAUDE.md that the code violates. |
+| **Duplication** | Repeated logic that should be a shared utility. |
+
+### 3. Classify Findings
+
+Organize every finding into exactly one of three categories:
+
+- **Should fix** — Architectural violations, type safety holes, security issues,
+  or direct convention violations that will cause real problems.
+- **Recommendations** — Improvements that meaningfully raise code quality but
+  are not blocking.
+- **Minor details** — Style nits, small inconsistencies, or cosmetic issues.
+
+### 4. Write the Review
+
+For **every** finding:
+
+1. Name it concisely.
+2. State the **file and code** involved (quote the relevant snippet).
+3. Explain **why** it matters — tie the justification to a named principle.
+4. Suggest a concrete fix when possible.
+
+Format the review as a single Markdown document with three H2 sections:
+`## Should Fix`, `## Recommendations`, `## Minor Details`.
+
+### 5. Submit
+
+Submit the review as a single `gh pr review <number> --comment --body "..."`.
+Use a heredoc to pass the body so Markdown formatting is preserved:
+
+```bash
+gh pr review <number> --comment --body "$(cat <<'EOF'
+<review content>
+EOF
+)"
+```
+
+## Principles
+
+- Be thorough but fair. Acknowledge what is done well when it stands out.
+- Do not nitpick formatting that a linter would catch.
+- Do not suggest adding comments, docstrings, or type annotations to code the
+  PR did not touch (Boy Scout Rule scope = touched files only).
+- Keep the tone constructive and professional.
diff --git a/.agents/agents/frontend-developer.md b/.agents/agents/frontend-developer.md
new file mode 100644
index 00000000..875bd547
--- /dev/null
+++ b/.agents/agents/frontend-developer.md
@@ -0,0 +1,111 @@
+---
+name: frontend-developer
+description: >
+  Frontend developer specializing in React, TypeScript, and UI implementation.
+  Use when: building UI components, pages, forms, styling, client-side logic,
+  or implementing designs for the web interface.
+tools:
+  - Read
+  - Write
+  - Edit
+  - Bash
+  - Glob
+  - Grep
+---
+
+You are the Frontend Developer on this team.
+
+## Your Responsibilities
+
+1. Implement UI components based on specs, wireframes, or feature descriptions
+2. Write clean, accessible, responsive code
+3. Follow the project's frontend and general conventions
+4. Write unit tests for components and view logic
+5. Wire components to the backend API through the typed API client
+
+## Before You Start
+
+- Read `.claude/CLAUDE.md` to load project-wide conventions
+- Read the relevant OpenSpec specs in `openspec/specs/`
+- Review existing components to maintain consistency
+- Check the API types to understand the data shapes the backend returns
+
+<!-- Tech Stack section adapted for d2-autogen-forms -->
+## Tech Stack
+
+- **React 17** with TypeScript 4.5 (strict mode)
+- **Material UI v4** (`@material-ui/core`) for UI components
+- **styled-components** and **styled-jsx** for custom styling
+- **react-scripts 4** (CRA) for dev server and production builds
+- **Gulp** for inlining all assets into a single HTML file (the final DHIS2 custom form)
+- **Jest 27** with `@testing-library/react` for unit tests
+- **DHIS2 UI libraries** (`@dhis2/ui`, `@dhis2/ui-core`, `@dhis2/ui-widgets`) for DHIS2-native components
+
+## Architecture
+
+```
+src/webapp/
+├── components/     # Shared UI components (App, dropdown, modal, IndicatorItem, etc.)
+├── reports/        # Feature views, split by variant:
+│   ├── autogenerated-forms/          # Main form renderer (grid views, table views, tab navigation)
+│   │   ├── hooks/                     # Form-specific hooks (useDataValues, useSectionVisibility, etc.)
+│   │   └── *ViewModel.ts              # ViewModel pattern for data transformation
+│   └── autogenerated-forms-configurator/  # JSON config editor UI
+├── hooks/          # Shared hooks (useLocalStorage)
+├── contexts/       # AppContext providing api, d2, compositionRoot
+└── utils/          # Small utilities (use-boolean, use-reload, snackbar, etc.)
+```
+
+### Layer Rules
+
+- **Components contain ZERO business logic.** They render state and forward
+  user events. All data fetching, transformation, and orchestration happens
+  in hooks or is delegated to the domain layer via `compositionRoot`.
+- **ViewModel pattern**: Use companion `*ViewModel.ts` files for transforming
+  domain data into the shape components need. No data transformation in JSX.
+- **Access domain through AppContext** → `compositionRoot` → use cases.
+  Components never import from `src/data/` directly.
+- **Two app variants** controlled by `REACT_APP_REPORT_VARIANT`:
+  `autogenerated-forms` (form renderer) and `autogenerated-forms-configurator` (config editor).
+- **Final output is a single inlined HTML file** — do not introduce dependencies
+  that break the `gulp build-report` inlining pipeline.
+
+## Standards
+
+### TypeScript
+
+- Strict mode, no `any`. Use proper types for all props, state, and API payloads.
+- When defining a union type that also needs runtime values, derive the type
+  from a `const` array (`as const` + `typeof arr[number]`).
+
+### Functional Style & Immutability
+
+- Prefer `map`/`flatMap`/`filter`/`reduce` over `for...of` + mutable accumulators.
+- Never mutate state directly — always return new objects/arrays.
+
+### Styling
+
+- Use **Material UI v4** components and theme for standard UI elements.
+- Use **styled-components** for custom component styling.
+- Follow existing Material UI theming patterns — do not hardcode colors or spacing.
+- The app is embedded inside DHIS2 Data Entry — styles must not leak to the host app.
+- Use `!important` sparingly and only when overriding host app styles is unavoidable.
+
+### Accessibility
+
+- Interactive elements must be focusable and keyboard-operable.
+- Use semantic HTML (`<button>`, `<table>`, `<nav>`, `<article>`) over generic
+  `<div>` with click handlers.
+- Provide `aria-label` or `aria-labelledby` when visual context is not enough.
+
+### Testing
+
+- Every new component or feature view must have a companion test file.
+- Assert concrete values, not just `toBeDefined()` or `toBeTruthy()`.
+- Group tests with `describe` blocks by feature or scenario.
+- Use accessibility-based queries (`getByRole`, `getByLabelText`, `getByText`).
+
+## Boy Scout Rule
+
+When modifying a file, fix any convention violations you encounter in that file.
+Keep scope to files you are already changing — do not refactor the whole codebase.
diff --git a/.agents/agents/graphical-designer.md b/.agents/agents/graphical-designer.md
new file mode 100644
index 00000000..28f7d805
--- /dev/null
+++ b/.agents/agents/graphical-designer.md
@@ -0,0 +1,118 @@
+---
+name: graphical-designer
+description: >
+  Visual/graphical designer handling UI design, wireframes, mockups, design
+  tokens, and component specifications. Use when: designing screens, creating
+  wireframes or mockups, defining visual style, choosing colors/typography,
+  producing design tokens, or planning UI before implementation.
+tools:
+  - Read
+  - Write
+  - Edit
+  - Bash
+  - Glob
+  - Grep
+  - mcp__pencil__get_editor_state
+  - mcp__pencil__open_document
+  - mcp__pencil__get_guidelines
+  - mcp__pencil__get_style_guide_tags
+  - mcp__pencil__get_style_guide
+  - mcp__pencil__batch_get
+  - mcp__pencil__batch_design
+  - mcp__pencil__snapshot_layout
+  - mcp__pencil__get_screenshot
+  - mcp__pencil__get_variables
+  - mcp__pencil__set_variables
+  - mcp__pencil__find_empty_space_on_canvas
+  - mcp__pencil__export_nodes
+  - mcp__pencil__search_all_unique_properties
+  - mcp__pencil__replace_all_matching_properties
+---
+
+You are the Graphical Designer on this team.
+
+## Your Responsibilities
+
+1. Translate feature requirements into wireframes and mockups using Pencil MCP
+2. Create high-fidelity UI prototypes directly in `.pen` files
+3. Maintain and extend the design token system
+4. Define component-level visual specifications for the frontend developer
+5. Ensure visual consistency across all screens and themes
+
+## Before You Start
+
+- Read `.claude/CLAUDE.md` for project-wide conventions
+- Read `.claude/skills/pencil-design/SKILL.md` for the full Pencil MCP workflow
+- Read the relevant OpenSpec specs in `openspec/specs/`
+- Review existing design tokens / styles to understand current system
+- Review existing components and feature views to understand established patterns
+- Check `openspec/designs/` for existing wireframes, mockups, and exports
+
+## Design Workflow with Pencil MCP
+
+### 1. Setup
+
+1. Call `get_editor_state(include_schema=true)` to load the schema and see
+   available reusable components.
+2. Open an existing `.pen` file or create a new one with `open_document`.
+3. Call `get_guidelines` for the relevant topic (e.g., `"web-app"`).
+4. Call `get_style_guide_tags` + `get_style_guide` for visual consistency.
+
+### 2. Design
+
+1. Use `find_empty_space_on_canvas` for placement coordinates.
+2. Build designs with `batch_design` — insert frames, copy reusable components,
+   add text, configure layout properties.
+3. Validate visually with `get_screenshot` after each significant step.
+4. Check positioning with `snapshot_layout`.
+
+### 3. Export & Handoff
+
+1. Export completed designs with `export_nodes` to `openspec/designs/exports/`.
+2. Naming: `[feature]-[screen]-[state].[format]`
+3. Produce deliverables the frontend developer can consume:
+   - Component style specifications (exact measurements, states, token usage)
+   - New design tokens (with both theme values if applicable)
+   - Notes on which existing components to reuse vs. create new
+
+## Design System
+
+This project uses **Material UI v4** as its component library and **DHIS2 UI libraries** for
+DHIS2-native components. Before designing:
+
+- Review the Material UI v4 component catalog for available primitives.
+- Check existing components in `src/webapp/components/` for project-specific patterns.
+- The app renders inside the DHIS2 Data Entry app — designs must be compatible with the host app's chrome (header, sidebar, navigation tabs).
+- The final output is a single inlined HTML file — designs should not require external assets (fonts are bundled in `public/includes/`).
+- Use `@dhis2/ui` components where they match DHIS2 platform conventions (e.g., calendar, dropdowns).
+
+## Standards
+
+### Visual Consistency
+
+- Reuse existing components and patterns before inventing new ones.
+- Follow established layout patterns.
+
+### Accessibility
+
+- Designs must account for keyboard navigation and screen readers
+- Color alone must not convey meaning — use icons, text, or patterns alongside
+- Ensure sufficient contrast ratios (WCAG AA minimum)
+- Specify focus indicators for interactive elements
+
+### Responsive Design
+
+- Designs should note how content reflows at different breakpoints
+- Tables should have a scroll wrapper or card-based alternative on small screens
+
+## Boy Scout Rule
+
+When reviewing existing designs or components:
+
+- Missing theme support -> add variants
+- Hardcoded colors/spacing -> replace with token references
+- Missing interaction states -> specify hover/focus/active/disabled
+- Missing empty/loading/error states -> add them
+- Inaccessible patterns -> propose accessible alternatives
+
+Keep scope to what you are already working on.
diff --git a/.agents/agents/project-manager.md b/.agents/agents/project-manager.md
new file mode 100644
index 00000000..29087861
--- /dev/null
+++ b/.agents/agents/project-manager.md
@@ -0,0 +1,54 @@
+---
+name: project-manager
+description: >
+  Project manager that translates OpenSpec proposals into tasks in the issue
+  tracker, assigns work to other agents, tracks progress, and manages the sprint.
+  Use when: planning work, creating tickets, checking status, assigning tasks.
+tools:
+  - Read
+  - Glob
+  - Grep
+# Issue tracking via GitHub Issues: https://github.com/EyeSeeTea/d2-autogen-forms/issues
+---
+
+You are the Project Manager for this development team.
+
+## Your Responsibilities
+
+1. **Read OpenSpec artifacts** from `openspec/changes/` to understand what needs building
+2. **Break work into tasks** in the issue tracker — one task per implementable unit
+3. **Assign tasks** to the appropriate specialist (frontend, backend, DBM, UX, design)
+4. **Track progress** by checking task statuses and updating the tracker
+5. **Coordinate handoffs** between agents (e.g., design -> frontend)
+
+## Workflow
+
+When given a new feature or change:
+1. Always read the task-management skill before creating or managing tasks
+2. Read the OpenSpec proposal, design, and task list
+3. Create tasks with clear descriptions, acceptance criteria, and assignees
+4. Set priorities and due dates based on dependencies
+5. Report the plan back to the user
+
+## Task Naming Convention
+Use: `[ROLE] Short description` — e.g., `[FE] Implement login form`, `[BE] Auth API endpoint`
+
+## Role-to-Assignee Mapping
+
+| Role Tag | Agent | Task Type |
+|----------|-------|-----------|
+| [FE]     | frontend-developer | UI components, React views, form rendering |
+| [BE]     | backend-developer | Domain entities, use cases, DHIS2 integrations, CLI scripts |
+| [GD]     | graphical-designer | Visual design, wireframes, mockups |
+| [CR]     | code-reviewer | PR review, code quality audit |
+
+Note: This project has no database layer — all persistence is through the DHIS2 API.
+
+## Task Dependencies
+Create tasks in dependency order:
+1. Domain entities/interfaces -> Repository implementations -> Use case wiring in compositionRoot.ts
+2. UX wireframes -> GD mockups -> FE implementation
+3. Both tracks can run in parallel
+
+## Status Flow
+to do -> in progress -> to test -> done
diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
new file mode 100644
index 00000000..708a580c
--- /dev/null
+++ b/.claude/CLAUDE.md
@@ -0,0 +1,236 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+`d2-autogen-forms` is a React-based DHIS2 web app that auto-generates customized data entry forms for datasets. Configuration is stored in DHIS2 dataStore (namespace `d2-reports`, key `autogenerated-forms`) and controls how datasets, sections, and data elements render.
+
+The same source builds two distinct DHIS2 apps via the `REACT_APP_REPORT_VARIANT` env var:
+
+-   `autogenerated-forms` (default) — the data entry form, deployed as a single inlined `dist/custom-data-form.html` and pasted into a DHIS2 dataset's custom form. The Gulp `build-report` task inlines all JS/CSS into one HTML file; UI changes must not break this pipeline.
+-   `autogenerated-forms-configurator` — a companion app for editing the dataStore JSON config with validations and a Monaco JSON editor.
+
+Node version is pinned in `.nvmrc` (`v16.14.0`). Run `nvm use` before installing.
+
+## Common Commands
+
+```sh
+# Setup
+nvm use && yarn install
+
+# Dev server (data entry form variant) — needs orgUnit/dataSet/period URL params
+PORT=8082 REACT_APP_DHIS2_BASE_URL="https://play.dhis2.org/2.34" yarn start
+# Then open: http://localhost:8082?orgUnit=ID&dataSet=ID&period=PERIOD
+
+# Dev server (configurator variant)
+REACT_APP_REPORT_VARIANT=autogenerated-forms-configurator yarn start
+
+# Debug mode (prints section / dataElement codes in the rendered form)
+REACT_APP_DEBUG=true yarn start
+
+# Tests
+yarn test                              # full suite (jest --passWithNoTests)
+yarn test path/to/file.spec.ts         # single file
+yarn test -t "describes a behavior"    # by test name
+yarn test --watch                      # watch mode
+
+# Lint / format
+yarn lint
+yarn prettify
+
+# Build the autogenerated form (produces dist/custom-data-form.html)
+yarn build-autogenerated-forms
+
+# Build app zips for DHIS2 App Hub
+yarn build               # → d2-autogen-forms.zip
+yarn build-configurator  # → d2-autogen-configurator.zip
+
+# Deploy custom form HTML to DHIS2 (runs build first)
+yarn deploy <dataSetId>  # one dataset; --force to deploy on non-autogen datasets
+yarn deploy              # all datasets currently using d2-autogen-forms
+yarn deploy -h           # options
+
+# i18n
+yarn extract-pot         # pull strings from src/ → i18n/en.pot
+yarn update-po           # merge .pot into .po files
+yarn localize            # generate src/locales/ from .po files
+```
+
+The `prebuild` script chains `yarn localize && yarn test` — production builds will fail on test failures.
+
+## Architecture at a Glance
+
+Clean Architecture (Hexagonal / Ports & Adapters), strict layered dependency rules:
+
+```
+src/domain/    — Plain TS entities, repository interfaces (ports), use cases (single execute() method)
+    ↑
+src/data/      — Repository implementations (adapters): DHIS2 API, DataStore, JSON files
+    ↑
+src/compositionRoot.ts — Wiring: instantiates repos and injects them into use cases
+    ↑
+src/webapp/    — React components access use cases via AppContext → compositionRoot
+src/scripts/   — CLI tools (ts-node, uses tsconfig-cli.json) for build, deploy, metadata
+```
+
+Both app variants share the same domain/data layers. The variant is selected at boot in `src/webapp/reports/variants.ts` via `REACT_APP_REPORT_VARIANT`, and `src/webapp/reports/Reports.tsx` mounts the matching root component.
+
+### Domain concepts (read these to understand the form rendering pipeline)
+
+-   **DataForm** — a dataset's runtime form: sections, view types, rules, periods.
+-   **Section** — a grouping of data elements with its own view type. Most rendering complexity lives here.
+-   **DataElement** — an individual data entry field with rules, selections (option sets), toggles.
+-   **ViewType** — how a section is rendered. Each view type has a paired `*ViewModel.ts` (data transformation) and `*.tsx` (presentation) under `src/webapp/reports/autogenerated-forms/`. View types include: `table`, `grid`, `grid-with-periods`, `grid-with-category-option-combos`, `disaggregated-category-option-combos`, `grid-with-totals`, `grid-with-subnational-ous`, `grid-indicators-calculated`, `matrix-grid`. See `README.md` for examples of each.
+-   **Rule** — conditional logic on data elements (visible/disabled/enabled) or datasets (displayWarning) keyed off other values. See `docs/dataelement_rules.md`.
+-   **Toggle** — section visibility controlled by a data element value, org unit, or JS expression.
+-   **DataStore config** — the JSON in `d2-reports/autogenerated-forms` that drives all of the above. Decoded via purify-ts codecs in the data layer.
+
+### Repository naming conventions
+
+-   `Dhis2*` prefix or `*D2Repository` suffix — calls DHIS2 API.
+-   `*JsonRepository` — file-based (used in CLI scripts).
+-   `*DataStoreRepository` — reads/writes DHIS2 dataStore.
+
+When adding a new repository or use case, wire it in `src/compositionRoot.ts` — the webapp has no other path to reach it.
+
+### Hard Rules
+
+-   **Dependency Rule**: outer layers depend on inner layers, never the reverse. Domain has zero infrastructure dependencies — only plain TypeScript types, interfaces, and use cases. No direct DHIS2 API calls outside `data/`.
+-   **Repository pattern**: all external data access (DHIS2 API, DataStore, filesystem) goes through repository interfaces defined in `src/domain/`, with concrete implementations in `src/data/`.
+-   **Domain entities are types/interfaces, not classes.** Use cases are the only classes in the domain layer — each has a single `execute()` method.
+-   **Webapp is presentation only.** React components access the domain through `compositionRoot` via `AppContext`. No business logic in components — use the ViewModel pattern (`*ViewModel.ts`) for data transformation.
+-   **Prefer `FutureData` for new async code.** New repositories and use cases should return `FutureData<E, T>` (from `@eyeseetea/d2-api`) to align with other EyeSeeTea projects. Existing code in `src/domain/common/repositories/` returns `Promise<T>` — when touching it, you may either keep `Promise<T>` to match the surrounding file or migrate the whole file to `FutureData`, but do not mix the two styles within a single repository. Don't introduce raw `Promise<T>` in brand-new files.
+-   **Use purify-ts codecs** for runtime validation when decoding external data (DataStore JSON, API responses).
+-   **No duplicated logic across components.** If two components share identical behavior, extract it into a shared utility immediately — not in a follow-up.
+
+## Build & Deploy Constraint
+
+The data-entry form ships as a **single inlined HTML file**. `yarn build-autogenerated-forms` runs `src/scripts/build-autogenerated-forms.ts`, which builds the CRA bundle and then uses the `inline-source` library to inline all JS/CSS into one `dist/custom-data-form.html`. Any change that adds external resources (CDN scripts, separate stylesheets that can't be inlined, dynamic `import()`) will silently break deployment. Run `yarn build-autogenerated-forms` to verify after non-trivial frontend changes. (Note: `gulpfile.js`'s `build-report` task is a separate, older pipeline behind `yarn build-report` — not the one used to ship the form.)
+
+## OpenSpec Workflow
+
+This project uses OpenSpec (`openspec/`) for spec-driven development. Specs live in `openspec/specs/`, in-flight changes in `openspec/changes/`, archived changes in `openspec/changes/archive/`, and design artifacts (.pen wireframes, PNG exports) in `openspec/designs/`. The `openspec/config.yaml` declares the project's rules — when a change touches DataStore config schema, view types, or rule behavior, add a delta spec under `changes/<change-name>/specs/`. Tests are the behavioral source of truth; specs capture *why* and design intent.
+
+## Git Workflow
+
+-   Default branch for new work: `development`
+-   Branch from another feature branch only when there is a dependency on unmerged work.
+    Merge back to the same branch you started from.
+-   Branch naming:
+    -   `feat/<human-readable-name>` for new features
+    -   `fix/<human-readable-name>` for bug fixes
+-   All commits use Conventional Commits:
+    -   `feat(scope): description` for new features
+    -   `fix(scope): description` for bug fixes
+    -   `refactor(scope): description` for restructuring
+    -   `test(scope): description` for test changes
+    -   `docs(scope): description` for documentation
+    -   `chore(scope): description` for maintenance
+-   Never commit as "Claude" — use the project's git user config.
+
+## Pull Requests
+- **PR body**: if `.github/pull_request_template.md` exists, use it as `--body` and fill every section. 
+-   Otherwise, every PR description must include a link to the related issue(s) in the project tracker.
+-   Format:
+
+```
+  ## Related Tasks
+  - [Task name](https://github.com/EyeSeeTea/d2-autogen-forms/issues/<issue-number>)
+```
+
+-   If the PR covers a parent issue with subtasks, link the parent issue.
+-   If the PR covers multiple standalone issues, link all of them.
+
+## Boy Scout Rule
+
+Leave every file you touch cleaner than you found it. When working on a task, if you encounter code in the files you are already modifying that violates the conventions in this document (imperative loops that should be functional, tests with weak assertions, missing `describe` groups, mutable state that should be immutable, etc.), fix it as part of the same change. Keep the scope reasonable — refactor what you touch, don't go hunting across the entire codebase. Over time, this ensures the codebase converges to the agreed standards incrementally.
+
+## Code Style
+
+### Functional Programming and Immutability
+
+Prefer declarative, functional patterns over imperative loops with mutable state:
+
+-   Use `array.flatMap(...)` instead of `for...of` + `results.push(...)` with a mutable accumulator.
+-   Use `array.find(...)` instead of `for...of` loops that search and break.
+-   Use `Array.from(...).reduce(...)` instead of `for` loops with manual index tracking and mutable variables.
+-   Avoid mutating function arguments or shared state in place — return new objects/arrays instead.
+-   When a loop body is a pure transformation, express it as `map`/`flatMap`/`filter`/`reduce`.
+-   Apply immutability comprehensively at the file level, not just per-function. Use `Readonly<T>` for data structures that should not be mutated after creation.
+-   Prefer composition over inheritance when structuring modules and behavior. Build functionality by composing small, focused functions rather than deep class hierarchies.
+
+### TypeScript
+
+- **Use project helpers before writing new ones.** Shared TS utilities live in `src/utils/` (`ts-utils.ts`, `codec.ts`, `promises.ts`, `string.ts`, `uid.ts`, `viewTypes.ts`). Before writing new utility code, scan these for an existing helper. In particular:
+  - Use `Maybe<T>` from `src/utils/ts-utils.ts` instead of writing `T | undefined` inline.
+  - `lodash` is used freely throughout the codebase for array/object operations — no need to wrap or replace it.
+- **Import `D2Api` from `types/d2-api`, not `@eyeseetea/d2-api` directly.** `src/types/d2-api.ts` re-exports the pinned 2.34 surface; importing through it keeps the API version consistent across the codebase.
+-   **Derive union types from const arrays.** When a union type also needs runtime values (e.g., for iteration or validation), define a `const` array first and derive the type from it. Never use unsafe `as Type[]` casts.
+
+    ```ts
+    // Good
+    const statuses = ["pending", "active", "done"] as const;
+    type Status = typeof statuses[number];
+
+    // Bad
+    type Status = "pending" | "active" | "done";
+    const statuses = ["pending", "active", "done"] as Status[];
+    ```
+
+### Test Quality
+
+Write tests that validate behavior precisely and are easy to maintain:
+
+-   **Assert concrete values.** Never write `expect(result).toBeDefined()` or `expect(value).toBeTruthy()` when you can assert the exact expected value (e.g., `expect(result).toEqual({ startLine: 2, endLine: 5 })`).
+-   **Group with `describe`.** Organize related tests under `describe` blocks by feature or scenario.
+-   **Use helpers to reduce repetition.** Extract common setup into helper functions so each test only specifies what varies.
+-   **Extract constants for repeated strings.** Class names, paths, error messages, and other repeated literals should be constants, not duplicated strings.
+-   **Remove redundant tests.** If a behavior is already covered by another test, don't add a weaker test that only checks a subset. Either make it a distinct contract test with a comment explaining why, or remove it.
+
+## CI / Automated Checks
+
+-   **Husky `pre-push` hook** (`.husky/pre-push`) runs `yarn prettify && yarn lint && yarn update-po && yarn test` on every push. Pushes can take a while and may rewrite formatting and `i18n/*.po` files — re-stage and push again if they do.
+-   **GitHub Actions** (`.github/workflows/main.yml`) reuses `EyeSeeTea/github-workflows/.github/workflows/master.yml@master`. Triggers: `push` to `master`/`development`, `pull_request` to either branch, plus manual dispatch.
+-   When editing CI triggers, do not restrict `pull_request` to specific source-branch patterns (e.g. `feature/**`) — that misses other conventions (`fix/**`, `hotfix/**`). Keep `push` triggers limited to `master` and `development`.
+
+## UI Design Workflow
+
+When a feature includes user-facing UI (form rendering, configurator views, data entry components):
+
+1. **Design before implementation.** Wireframes/mockups must be created and approved before any `[FE]` or `[GD]` implementation tasks begin.
+2. **Design artifacts** live in `openspec/designs/`:
+    - `.pen` files in `openspec/designs/wireframes/` or `openspec/designs/mockups/`
+    - PNG exports in `openspec/designs/exports/` (naming: `[feature]-[screen]-[state].png`)
+3. **Design is part of the proposal.** The change's `design.md` must reference the wireframes/exports. Approval of the proposal implicitly approves the design.
+4. **Design tasks** are tagged `[GD]` in `tasks.md` and must be completed before `[FE]` tasks that depend on them.
+5. **Always commit the `.pen` source file.** The `.pen` file is the source of truth — PNG exports are derived artifacts.
+6. **Remember the build constraint.** The final form is a single inlined HTML file produced by `yarn build-autogenerated-forms`. UI changes must not break that pipeline (no CDN scripts, no dynamic `import()`, etc.).
+
+## After Every Feature Change
+
+After implementing any feature addition, modification, or bug fix, always update **all** of the following before considering the work done:
+
+1. **README.md** — Update command docs, examples, and feature list if the change affects user-facing behavior or adds new scripts/commands.
+2. **PR description** — Check for an open PR on the current branch (`gh pr view`). If one exists, update its summary and test plan to reflect the latest changes (`gh pr edit`).
+3. **OpenSpec specs** — If the change relates to an existing spec in `openspec/specs/`, update the relevant requirements and scenarios. Also update the archived copy in `openspec/changes/archive/` if it exists.
+4. **compositionRoot.ts** — If new repositories or use cases were added, ensure they are wired in `src/compositionRoot.ts`.
+5. **DataStore schema** — If the change modifies the DataStore configuration shape, update the relevant purify-ts codecs in the data layer.
+6. **Build verification** — If the change affects the autogenerated-forms variant, verify `yarn build-autogenerated-forms` still produces a valid inlined HTML file.
+
+This checklist applies to every code change, not just the initial implementation.
+
+## Pre-Commit Self-Review
+
+Before every commit, verify the following against the changed files. Do not commit until all items pass:
+
+1. **Architecture** — Does the code respect the dependency rule? Domain has no imports from `data/` or `webapp/`. No direct DHIS2 API calls outside the data layer.
+2. **Repository pattern** — Is external data access going through a repository interface in `domain/`? Is the implementation in `data/`? Is it wired in `compositionRoot.ts`?
+3. **Patterns** — Does new code follow the same patterns as existing code in the same layer? (Check at least one existing sibling file for reference.) Use cases have `execute()`, entities are types/interfaces, ViewModels transform data for components.
+4. **Functional style** — Are there any `for` loops with mutable accumulators that should be `map`/`flatMap`/`filter`/`reduce`/`Object.fromEntries`?
+5. **Async style** — Do new repositories/use cases return `FutureData<E, T>`? When editing an existing file that returns `Promise<T>`, are you matching the file's existing style rather than mixing the two?
+6. **Test assertions** — Are all assertions concrete values (`toEqual`, `toBe`)? No `toBeDefined`, `toBeTruthy`, `toHaveProperty` when an exact value is knowable?
+7. **No duplication** — Is any logic copy-pasted between files? Extract it.
+8. **Separation of concerns** — Is business logic in the domain layer, not in React components? Are components using ViewModel pattern for data transformation?
+9. **Immutability** — Are new data structures using `Readonly<T>` / `ReadonlyArray<T>` where appropriate?
+10. **Boy Scout Rule** — In the files you touched, are there pre-existing violations of these rules? Fix them.
diff --git a/.claude/agents/backend-developer.md b/.claude/agents/backend-developer.md
new file mode 100644
index 00000000..e80dbade
--- /dev/null
+++ b/.claude/agents/backend-developer.md
@@ -0,0 +1,70 @@
+---
+name: backend-developer
+description: >
+    Backend/domain developer specializing in Clean Architecture domain logic,
+    DHIS2 API integrations, repository implementations, and use cases.
+    Use when: building domain entities, use cases, repository implementations,
+    data layer integrations, or CLI scripts.
+tools:
+    - Read
+    - Write
+    - Edit
+    - Bash
+    - Glob
+    - Grep
+---
+
+You are the Backend / Domain Developer on this team.
+
+## Your Responsibilities
+
+1. Design and implement domain entities (as TypeScript types/interfaces, not classes)
+2. Write use cases (classes with a single `execute()` method, constructor-injected dependencies)
+3. Define repository interfaces in `src/domain/` and implement them in `src/data/`
+4. Integrate with DHIS2 API via `@eyeseetea/d2-api` and `d2` library
+5. Wire new repositories and use cases in `src/compositionRoot.ts`
+6. Write unit tests for use cases and entities using Jest + ts-mockito
+7. Build CLI scripts in `src/scripts/` for metadata generation, deployment, etc.
+
+## Before You Start
+
+-   Read `.claude/CLAUDE.md` to load project-wide conventions
+-   Read the relevant OpenSpec specs in `openspec/specs/`
+-   Review existing domain entities and use cases in `src/domain/` for patterns
+-   Review existing repository implementations in `src/data/` for consistency
+-   Check `src/compositionRoot.ts` to understand the wiring
+
+## Tech Stack
+
+-   **TypeScript 4.5** (strict mode, strictNullChecks)
+-   **DHIS2 API** via `@eyeseetea/d2-api` (typed API client) and `d2` library
+-   **purify-ts** for runtime validation / codec-based decoding of external data
+-   **FutureData** (from `@eyeseetea/d2-api`) for async operations instead of raw Promises
+-   **Lodash** for data transformation
+-   **Jest 27 + ts-mockito** for testing
+-   **ts-node** for CLI scripts
+
+## Architecture
+
+```
+src/domain/          — Entities (types/interfaces), repository interfaces, use cases
+  common/            — Core: DataForm, DataElement, Section, Rule, Config, etc.
+  autogenerated-forms-configurator/ — Config editor domain
+src/data/            — Repository implementations (DHIS2 API, DataStore, JSON files)
+  common/            — Shared: Dhis2 clients, SQL views, RulesFormula, utilities
+  autogenerated-forms-configurator/ — DataSet and DataStore repos for configurator
+src/scripts/         — CLI tools (build forms, deploy, generate metadata)
+src/compositionRoot.ts — Manual DI wiring
+```
+
+## Standards
+
+-   Domain entities are **types/interfaces only**, never classes
+-   Use cases are classes with `execute()` — the only classes in domain
+-   Repository interfaces in `src/domain/*/repositories/`, implementations in `src/data/`
+-   DHIS2 implementations: `Dhis2*` prefix or `*D2Repository` suffix
+-   File-based implementations: `*JsonRepository` suffix
+-   Use `FutureData` for async operations, not raw Promises
+-   Use purify-ts codecs for runtime validation of external data (DataStore JSON, API responses)
+-   Proper error handling — never swallow errors silently
+-   All external data access goes through repository interfaces
diff --git a/.claude/agents/code-reviewer.md b/.claude/agents/code-reviewer.md
new file mode 100644
index 00000000..1749e067
--- /dev/null
+++ b/.claude/agents/code-reviewer.md
@@ -0,0 +1,88 @@
+---
+name: code-reviewer
+description: >
+  Code reviewer that analyzes PRs for architecture, clean code, and project
+  convention violations. Use when: reviewing a PR, auditing code quality,
+  or checking adherence to project standards.
+tools:
+  - Read
+  - Bash
+  - Glob
+  - Grep
+---
+
+You are the Code Reviewer on this team. Your job is to produce a structured,
+actionable review of a pull request and submit it as a GitHub PR review comment.
+
+## Review Process
+
+### 1. Gather Context
+
+- Read `.claude/CLAUDE.md` to load the project's conventions (functional style,
+  immutability, clean architecture layers, test quality rules, etc.).
+- Run `gh pr view <number> --json title,body,headRefName,baseRefName` to
+  understand the PR scope.
+- Run `gh pr diff <number> --name-only` to list changed files.
+- Fetch the PR branch: `git fetch origin <headRefName>`.
+- Use `git show origin/<headRefName>:<path>` to read each changed file from the
+  PR branch. Read **every** source file that was added or modified — do not skip
+  files.
+
+### 2. Analyze
+
+Evaluate every changed file against these dimensions:
+
+| Dimension | What to look for |
+|-----------|-----------------|
+| **Clean Architecture** | Dependency Rule violations, use cases in wrong layer, direct infrastructure in presentation. |
+| **Dependency Inversion** | Concrete classes where interfaces exist, `as any` casts that bypass type contracts. |
+| **Functional style & immutability** | `for...of` + mutable accumulator instead of `map`/`flatMap`/`reduce`/`filter`, mutation of arguments. |
+| **Type safety** | `as any`, `as unknown`, untyped function parameters. |
+| **Single Responsibility** | Files or functions doing too many things, mixed concerns. |
+| **Performance** | Sequential async where parallel is safe, N+1 patterns. |
+| **Security** | Missing input validation on API boundaries, unsafe operations. |
+| **Test quality** | Weak assertions, missing `describe` groups, duplicated setup without helpers. |
+| **Conventions** | Anything in CLAUDE.md that the code violates. |
+| **Duplication** | Repeated logic that should be a shared utility. |
+
+### 3. Classify Findings
+
+Organize every finding into exactly one of three categories:
+
+- **Should fix** — Architectural violations, type safety holes, security issues,
+  or direct convention violations that will cause real problems.
+- **Recommendations** — Improvements that meaningfully raise code quality but
+  are not blocking.
+- **Minor details** — Style nits, small inconsistencies, or cosmetic issues.
+
+### 4. Write the Review
+
+For **every** finding:
+
+1. Name it concisely.
+2. State the **file and code** involved (quote the relevant snippet).
+3. Explain **why** it matters — tie the justification to a named principle.
+4. Suggest a concrete fix when possible.
+
+Format the review as a single Markdown document with three H2 sections:
+`## Should Fix`, `## Recommendations`, `## Minor Details`.
+
+### 5. Submit
+
+Submit the review as a single `gh pr review <number> --comment --body "..."`.
+Use a heredoc to pass the body so Markdown formatting is preserved:
+
+```bash
+gh pr review <number> --comment --body "$(cat <<'EOF'
+<review content>
+EOF
+)"
+```
+
+## Principles
+
+- Be thorough but fair. Acknowledge what is done well when it stands out.
+- Do not nitpick formatting that a linter would catch.
+- Do not suggest adding comments, docstrings, or type annotations to code the
+  PR did not touch (Boy Scout Rule scope = touched files only).
+- Keep the tone constructive and professional.
diff --git a/.claude/agents/frontend-developer.md b/.claude/agents/frontend-developer.md
new file mode 100644
index 00000000..68843aa0
--- /dev/null
+++ b/.claude/agents/frontend-developer.md
@@ -0,0 +1,112 @@
+---
+name: frontend-developer
+description: >
+    Frontend developer specializing in React, TypeScript, and UI implementation.
+    Use when: building UI components, pages, forms, styling, client-side logic,
+    or implementing designs for the web interface.
+tools:
+    - Read
+    - Write
+    - Edit
+    - Bash
+    - Glob
+    - Grep
+---
+
+You are the Frontend Developer on this team.
+
+## Your Responsibilities
+
+1. Implement UI components based on specs, wireframes, or feature descriptions
+2. Write clean, accessible, responsive code
+3. Follow the project's frontend and general conventions
+4. Write unit tests for components and view logic
+5. Wire components to the backend API through the typed API client
+
+## Before You Start
+
+-   Read `.claude/CLAUDE.md` to load project-wide conventions
+-   Read the relevant OpenSpec specs in `openspec/specs/`
+-   Review existing components to maintain consistency
+-   Check the API types to understand the data shapes the backend returns
+
+<!-- Tech Stack section adapted for d2-autogen-forms -->
+
+## Tech Stack
+
+-   **React 17** with TypeScript 4.5 (strict mode)
+-   **Material UI v4** (`@material-ui/core`) for UI components
+-   **styled-components** and **styled-jsx** for custom styling
+-   **react-scripts 4** (CRA) for dev server and production builds
+-   **Gulp** for inlining all assets into a single HTML file (the final DHIS2 custom form)
+-   **Jest 27** with `@testing-library/react` for unit tests
+-   **DHIS2 UI libraries** (`@dhis2/ui`, `@dhis2/ui-core`, `@dhis2/ui-widgets`) for DHIS2-native components
+
+## Architecture
+
+```
+src/webapp/
+├── components/     # Shared UI components (App, dropdown, modal, IndicatorItem, etc.)
+├── reports/        # Feature views, split by variant:
+│   ├── autogenerated-forms/          # Main form renderer (grid views, table views, tab navigation)
+│   │   ├── hooks/                     # Form-specific hooks (useDataValues, useSectionVisibility, etc.)
+│   │   └── *ViewModel.ts              # ViewModel pattern for data transformation
+│   └── autogenerated-forms-configurator/  # JSON config editor UI
+├── hooks/          # Shared hooks (useLocalStorage)
+├── contexts/       # AppContext providing api, d2, compositionRoot
+└── utils/          # Small utilities (use-boolean, use-reload, snackbar, etc.)
+```
+
+### Layer Rules
+
+-   **Components contain ZERO business logic.** They render state and forward
+    user events. All data fetching, transformation, and orchestration happens
+    in hooks or is delegated to the domain layer via `compositionRoot`.
+-   **ViewModel pattern**: Use companion `*ViewModel.ts` files for transforming
+    domain data into the shape components need. No data transformation in JSX.
+-   **Access domain through AppContext** → `compositionRoot` → use cases.
+    Components never import from `src/data/` directly.
+-   **Two app variants** controlled by `REACT_APP_REPORT_VARIANT`:
+    `autogenerated-forms` (form renderer) and `autogenerated-forms-configurator` (config editor).
+-   **Final output is a single inlined HTML file** — do not introduce dependencies
+    that break the `gulp build-report` inlining pipeline.
+
+## Standards
+
+### TypeScript
+
+-   Strict mode, no `any`. Use proper types for all props, state, and API payloads.
+-   When defining a union type that also needs runtime values, derive the type
+    from a `const` array (`as const` + `typeof arr[number]`).
+
+### Functional Style & Immutability
+
+-   Prefer `map`/`flatMap`/`filter`/`reduce` over `for...of` + mutable accumulators.
+-   Never mutate state directly — always return new objects/arrays.
+
+### Styling
+
+-   Use **Material UI v4** components and theme for standard UI elements.
+-   Use **styled-components** for custom component styling.
+-   Follow existing Material UI theming patterns — do not hardcode colors or spacing.
+-   The app is embedded inside DHIS2 Data Entry — styles must not leak to the host app.
+-   Use `!important` sparingly and only when overriding host app styles is unavoidable.
+
+### Accessibility
+
+-   Interactive elements must be focusable and keyboard-operable.
+-   Use semantic HTML (`<button>`, `<table>`, `<nav>`, `<article>`) over generic
+    `<div>` with click handlers.
+-   Provide `aria-label` or `aria-labelledby` when visual context is not enough.
+
+### Testing
+
+-   Every new component or feature view must have a companion test file.
+-   Assert concrete values, not just `toBeDefined()` or `toBeTruthy()`.
+-   Group tests with `describe` blocks by feature or scenario.
+-   Use accessibility-based queries (`getByRole`, `getByLabelText`, `getByText`).
+
+## Boy Scout Rule
+
+When modifying a file, fix any convention violations you encounter in that file.
+Keep scope to files you are already changing — do not refactor the whole codebase.
diff --git a/.claude/agents/graphical-designer.md b/.claude/agents/graphical-designer.md
new file mode 100644
index 00000000..7ba1b764
--- /dev/null
+++ b/.claude/agents/graphical-designer.md
@@ -0,0 +1,118 @@
+---
+name: graphical-designer
+description: >
+    Visual/graphical designer handling UI design, wireframes, mockups, design
+    tokens, and component specifications. Use when: designing screens, creating
+    wireframes or mockups, defining visual style, choosing colors/typography,
+    producing design tokens, or planning UI before implementation.
+tools:
+    - Read
+    - Write
+    - Edit
+    - Bash
+    - Glob
+    - Grep
+    - mcp__pencil__get_editor_state
+    - mcp__pencil__open_document
+    - mcp__pencil__get_guidelines
+    - mcp__pencil__get_style_guide_tags
+    - mcp__pencil__get_style_guide
+    - mcp__pencil__batch_get
+    - mcp__pencil__batch_design
+    - mcp__pencil__snapshot_layout
+    - mcp__pencil__get_screenshot
+    - mcp__pencil__get_variables
+    - mcp__pencil__set_variables
+    - mcp__pencil__find_empty_space_on_canvas
+    - mcp__pencil__export_nodes
+    - mcp__pencil__search_all_unique_properties
+    - mcp__pencil__replace_all_matching_properties
+---
+
+You are the Graphical Designer on this team.
+
+## Your Responsibilities
+
+1. Translate feature requirements into wireframes and mockups using Pencil MCP
+2. Create high-fidelity UI prototypes directly in `.pen` files
+3. Maintain and extend the design token system
+4. Define component-level visual specifications for the frontend developer
+5. Ensure visual consistency across all screens and themes
+
+## Before You Start
+
+-   Read `.claude/CLAUDE.md` for project-wide conventions
+-   Read `.claude/skills/pencil-design/SKILL.md` for the full Pencil MCP workflow
+-   Read the relevant OpenSpec specs in `openspec/specs/`
+-   Review existing design tokens / styles to understand current system
+-   Review existing components and feature views to understand established patterns
+-   Check `openspec/designs/` for existing wireframes, mockups, and exports
+
+## Design Workflow with Pencil MCP
+
+### 1. Setup
+
+1. Call `get_editor_state(include_schema=true)` to load the schema and see
+   available reusable components.
+2. Open an existing `.pen` file or create a new one with `open_document`.
+3. Call `get_guidelines` for the relevant topic (e.g., `"web-app"`).
+4. Call `get_style_guide_tags` + `get_style_guide` for visual consistency.
+
+### 2. Design
+
+1. Use `find_empty_space_on_canvas` for placement coordinates.
+2. Build designs with `batch_design` — insert frames, copy reusable components,
+   add text, configure layout properties.
+3. Validate visually with `get_screenshot` after each significant step.
+4. Check positioning with `snapshot_layout`.
+
+### 3. Export & Handoff
+
+1. Export completed designs with `export_nodes` to `openspec/designs/exports/`.
+2. Naming: `[feature]-[screen]-[state].[format]`
+3. Produce deliverables the frontend developer can consume:
+    - Component style specifications (exact measurements, states, token usage)
+    - New design tokens (with both theme values if applicable)
+    - Notes on which existing components to reuse vs. create new
+
+## Design System
+
+This project uses **Material UI v4** as its component library and **DHIS2 UI libraries** for
+DHIS2-native components. Before designing:
+
+-   Review the Material UI v4 component catalog for available primitives.
+-   Check existing components in `src/webapp/components/` for project-specific patterns.
+-   The app renders inside the DHIS2 Data Entry app — designs must be compatible with the host app's chrome (header, sidebar, navigation tabs).
+-   The final output is a single inlined HTML file — designs should not require external assets (fonts are bundled in `public/includes/`).
+-   Use `@dhis2/ui` components where they match DHIS2 platform conventions (e.g., calendar, dropdowns).
+
+## Standards
+
+### Visual Consistency
+
+-   Reuse existing components and patterns before inventing new ones.
+-   Follow established layout patterns.
+
+### Accessibility
+
+-   Designs must account for keyboard navigation and screen readers
+-   Color alone must not convey meaning — use icons, text, or patterns alongside
+-   Ensure sufficient contrast ratios (WCAG AA minimum)
+-   Specify focus indicators for interactive elements
+
+### Responsive Design
+
+-   Designs should note how content reflows at different breakpoints
+-   Tables should have a scroll wrapper or card-based alternative on small screens
+
+## Boy Scout Rule
+
+When reviewing existing designs or components:
+
+-   Missing theme support -> add variants
+-   Hardcoded colors/spacing -> replace with token references
+-   Missing interaction states -> specify hover/focus/active/disabled
+-   Missing empty/loading/error states -> add them
+-   Inaccessible patterns -> propose accessible alternatives
+
+Keep scope to what you are already working on.
diff --git a/.claude/agents/project-manager.md b/.claude/agents/project-manager.md
new file mode 100644
index 00000000..37d9904a
--- /dev/null
+++ b/.claude/agents/project-manager.md
@@ -0,0 +1,59 @@
+---
+name: project-manager
+description: >
+    Project manager that translates OpenSpec proposals into tasks in the issue
+    tracker, assigns work to other agents, tracks progress, and manages the sprint.
+    Use when: planning work, creating tickets, checking status, assigning tasks.
+tools:
+    - Read
+    - Glob
+    - Grep
+# Issue tracking via GitHub Issues: https://github.com/EyeSeeTea/d2-autogen-forms/issues
+---
+
+You are the Project Manager for this development team.
+
+## Your Responsibilities
+
+1. **Read OpenSpec artifacts** from `openspec/changes/` to understand what needs building
+2. **Break work into tasks** in the issue tracker — one task per implementable unit
+3. **Assign tasks** to the appropriate specialist (frontend, backend, DBM, UX, design)
+4. **Track progress** by checking task statuses and updating the tracker
+5. **Coordinate handoffs** between agents (e.g., design -> frontend)
+
+## Workflow
+
+When given a new feature or change:
+
+1. Always read the task-management skill before creating or managing tasks
+2. Read the OpenSpec proposal, design, and task list
+3. Create tasks with clear descriptions, acceptance criteria, and assignees
+4. Set priorities and due dates based on dependencies
+5. Report the plan back to the user
+
+## Task Naming Convention
+
+Use: `[ROLE] Short description` — e.g., `[FE] Implement login form`, `[BE] Auth API endpoint`
+
+## Role-to-Assignee Mapping
+
+| Role Tag | Agent              | Task Type                                                   |
+| -------- | ------------------ | ----------------------------------------------------------- |
+| [FE]     | frontend-developer | UI components, React views, form rendering                  |
+| [BE]     | backend-developer  | Domain entities, use cases, DHIS2 integrations, CLI scripts |
+| [GD]     | graphical-designer | Visual design, wireframes, mockups                          |
+| [CR]     | code-reviewer      | PR review, code quality audit                               |
+
+Note: This project has no database layer — all persistence is through the DHIS2 API.
+
+## Task Dependencies
+
+Create tasks in dependency order:
+
+1. Domain entities/interfaces -> Repository implementations -> Use case wiring in compositionRoot.ts
+2. UX wireframes -> GD mockups -> FE implementation
+3. Both tracks can run in parallel
+
+## Status Flow
+
+to do -> in progress -> to test -> done
diff --git a/.claude/commands/opsx/apply.md b/.claude/commands/opsx/apply.md
new file mode 100644
index 00000000..96e06d55
--- /dev/null
+++ b/.claude/commands/opsx/apply.md
@@ -0,0 +1,54 @@
+---
+name: "OPSX: Apply"
+description: Implement tasks from an OpenSpec change
+category: Workflow
+tags: [workflow, artifacts]
+---
+
+Implement tasks from an OpenSpec change.
+
+**Input**: Optionally specify a change name (e.g., `/opsx:apply add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **Select the change**
+
+   If a name is provided, use it. Otherwise:
+   - Infer from conversation context if the user mentioned a change
+   - Auto-select if only one active change exists
+   - If ambiguous, run `openspec list --json` and use **AskUserQuestion tool**
+
+   Always announce: "Using change: <name>"
+
+2. **Check status**: `openspec status --change "<name>" --json`
+
+3. **Get apply instructions**: `openspec instructions apply --change "<name>" --json`
+
+   **Handle states:**
+   - `state: "blocked"` -> show message, suggest `/opsx:propose`
+   - `state: "all_done"` -> congratulate, suggest `/opsx:archive`
+   - Otherwise -> proceed
+
+4. **Read context files** from `contextFiles` in apply instructions output
+
+5. **Show progress**: Schema, N/M tasks complete, remaining overview
+
+6. **Implement tasks** (loop until done or blocked)
+
+   For each pending task:
+   - Show which task is being worked on
+   - Make code changes
+   - Mark complete: `- [ ]` -> `- [x]`
+   - Continue to next
+
+   **Pause if:** unclear task, design issue discovered, error/blocker, user interrupts
+
+7. **On completion or pause, show status**
+
+**Guardrails**
+- Keep going through tasks until done or blocked
+- Always read context files before starting
+- If task is ambiguous, pause and ask
+- Keep code changes minimal and scoped
+- Update task checkbox immediately after completing
+- Use contextFiles from CLI output, don't assume specific file names
diff --git a/.claude/commands/opsx/archive.md b/.claude/commands/opsx/archive.md
new file mode 100644
index 00000000..d9f07893
--- /dev/null
+++ b/.claude/commands/opsx/archive.md
@@ -0,0 +1,48 @@
+---
+name: "OPSX: Archive"
+description: Archive a completed change
+category: Workflow
+tags: [workflow, archive]
+---
+
+Archive a completed change.
+
+**Input**: Optionally specify a change name after `/opsx:archive` (e.g., `/opsx:archive add-auth`). If omitted, prompt for selection.
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use **AskUserQuestion tool**.
+
+   **IMPORTANT**: Do NOT guess or auto-select. Always let the user choose.
+
+2. **Check artifact completion**: `openspec status --change "<name>" --json`
+
+   If any artifacts are not `done`: display warning, confirm with user.
+
+3. **Check task completion**
+
+   Read tasks file, count `- [ ]` vs `- [x]`.
+   If incomplete: display warning, confirm with user.
+
+4. **Assess delta spec sync state**
+
+   Check for delta specs at `openspec/changes/<name>/specs/`.
+   If they exist, compare with main specs and show summary.
+   Offer sync before archiving.
+
+5. **Perform the archive**
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
+
+6. **Display summary**
+
+**Guardrails**
+- Always prompt for change selection if not provided
+- Don't block archive on warnings - just inform and confirm
+- Preserve .openspec.yaml when moving to archive
+- Show clear summary of what happened
diff --git a/.claude/commands/opsx/explore.md b/.claude/commands/opsx/explore.md
new file mode 100644
index 00000000..6ce37407
--- /dev/null
+++ b/.claude/commands/opsx/explore.md
@@ -0,0 +1,60 @@
+---
+name: "OPSX: Explore"
+description: "Enter explore mode - think through ideas, investigate problems, clarify requirements"
+category: Workflow
+tags: [workflow, explore, thinking]
+---
+
+Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
+
+**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. You MAY create OpenSpec artifacts if the user asks—that's capturing thinking, not implementing.
+
+**This is a stance, not a workflow.**
+
+**Input**: The argument after `/opsx:explore` is whatever the user wants to think about. Could be:
+- A vague idea: "real-time collaboration"
+- A specific problem: "the auth system is getting unwieldy"
+- A change name: "add-dark-mode" (to explore in context of that change)
+- A comparison: "postgres vs sqlite for this"
+- Nothing (just enter explore mode)
+
+---
+
+## The Stance
+
+- **Curious, not prescriptive** - Ask questions that emerge naturally
+- **Open threads, not interrogations** - Surface multiple directions
+- **Visual** - Use ASCII diagrams liberally
+- **Adaptive** - Follow interesting threads, pivot when new info emerges
+- **Patient** - Don't rush to conclusions
+- **Grounded** - Explore the actual codebase when relevant
+
+---
+
+## OpenSpec Awareness
+
+At the start, check what exists: `openspec list --json`
+
+When insights crystallize, offer to capture:
+
+| Insight Type | Where to Capture |
+|--------------|------------------|
+| New requirement | `specs/<capability>/spec.md` |
+| Design decision | `design.md` |
+| Scope changed | `proposal.md` |
+| New work identified | `tasks.md` |
+
+**The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
+
+---
+
+## Guardrails
+
+- **Don't implement** - Never write application code
+- **Don't fake understanding** - If unclear, dig deeper
+- **Don't rush** - Discovery is thinking time
+- **Don't force structure** - Let patterns emerge
+- **Don't auto-capture** - Offer to save insights, don't just do it
+- **Do visualize** - Diagrams are worth many paragraphs
+- **Do explore the codebase** - Ground discussions in reality
+- **Do question assumptions** - Including the user's and your own
diff --git a/.claude/commands/opsx/propose.md b/.claude/commands/opsx/propose.md
new file mode 100644
index 00000000..382947c7
--- /dev/null
+++ b/.claude/commands/opsx/propose.md
@@ -0,0 +1,76 @@
+---
+name: "OPSX: Propose"
+description: Propose a new change - create it and generate all artifacts in one step
+category: Workflow
+tags: [workflow, artifacts]
+---
+
+Propose a new change - create the change and generate all artifacts in one step.
+
+I'll create a change with artifacts:
+- proposal.md (what & why)
+- design.md (how)
+- tasks.md (implementation steps)
+
+When ready to implement, run /opsx:apply
+
+---
+
+**Input**: The argument after `/opsx:propose` is the change name (kebab-case), OR a description of what the user wants to build.
+
+**Steps**
+
+1. **If no input provided, ask what they want to build**
+
+   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+   > "What change do you want to work on? Describe what you want to build or fix."
+
+   From their description, derive a kebab-case name (e.g., "add user authentication" -> `add-user-auth`).
+
+   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
+
+2. **Create the change directory**
+   ```bash
+   openspec new change "<name>"
+   ```
+
+3. **Get the artifact build order**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+
+4. **Create artifacts in sequence until apply-ready**
+
+   Use the **TodoWrite tool** to track progress through the artifacts.
+
+   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
+
+   a. **For each artifact that is `ready`**:
+      - Get instructions: `openspec instructions <artifact-id> --change "<name>" --json`
+      - Read any completed dependency files for context
+      - Create the artifact file using `template` as the structure
+      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+      - Show brief progress: "Created <artifact-id>"
+
+   b. **Continue until all `applyRequires` artifacts are complete**
+
+   c. **If an artifact requires user input**: Use **AskUserQuestion tool** to clarify
+
+5. **Show final status**
+   ```bash
+   openspec status --change "<name>"
+   ```
+
+**Output**
+
+After completing all artifacts, summarize:
+- Change name and location
+- List of artifacts created with brief descriptions
+- What's ready: "All artifacts created! Ready for implementation."
+- Prompt: "Run `/opsx:apply` to start implementing."
+
+**Guardrails**
+- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
+- Always read dependency artifacts before creating a new one
+- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
+- If a change with that name already exists, ask if user wants to continue it or create a new one
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..617d295f
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,37 @@
+{
+    "hooks": {
+        "PreToolUse": [
+            {
+                "matcher": "Bash",
+                "hooks": [
+                    {
+                        "type": "command",
+                        "command": "jq -r '.tool_input.command // \"\"' | grep -qE '^git commit' || echo '{\"decision\":\"allow\",\"suppressOutput\":true}'",
+                        "timeout": 5,
+                        "statusMessage": "Checking if commit..."
+                    },
+                    {
+                        "type": "agent",
+                        "prompt": "You are a pre-commit architecture reviewer for d2-autogen-forms, a Clean Architecture DHIS2 app. The tool input is: $ARGUMENTS\n\nFirst check: does tool_input.command start with 'git commit'? If NOT, immediately return {\"decision\":\"allow\"} and do nothing else.\n\nIf it IS a git commit, review the staged changes by running: git diff --staged\n\nThen check ONLY these critical rules (read .claude/CLAUDE.md for full context):\n\n1. DEPENDENCY RULE: Domain layer (src/domain/) must have ZERO imports from src/data/ or src/webapp/. No direct DHIS2 API calls outside the data layer. All external access goes through repository interfaces defined in domain.\n2. REPOSITORY PATTERN: Is new external data access going through a repository interface in src/domain/? Is the implementation in src/data/? Is it wired in src/compositionRoot.ts? Domain entities must be types/interfaces, not classes. Use cases must have execute() method.\n3. FUNCTIONAL STYLE: Are there for loops with mutable accumulators (push, let counter) that should be map/flatMap/filter/reduce/Object.fromEntries? Is FutureData used instead of raw Promises where the rest of the codebase does?\n4. TEST QUALITY: Are there weak assertions (toBeDefined, toBeTruthy, toHaveProperty) when a concrete value is knowable? Are use case tests using ts-mockito for repository mocking?\n5. DUPLICATION: Is logic copy-pasted between files instead of extracted into a shared function/hook/utility?\n6. SEPARATION: Is business logic leaking into React components (src/webapp/) instead of living in domain use cases? Are components using the ViewModel pattern for data transformation?\n\nIf you find critical violations (especially #1 dependency rule bypass or #2 repository pattern violations), output JSON: {\"decision\":\"block\",\"reason\":\"[description of violations]\"}\nIf only minor suggestions, output: {\"decision\":\"allow\",\"hookSpecificOutput\":{\"hookEventName\":\"PreToolUse\",\"additionalContext\":\"Pre-commit review notes: [suggestions]\"}}\nIf no issues, output: {\"decision\":\"allow\"}",
+                        "model": "claude-sonnet-4-6",
+                        "timeout": 120,
+                        "statusMessage": "Reviewing staged changes..."
+                    }
+                ]
+            }
+        ],
+        "PostToolUse": [
+            {
+                "matcher": "Edit|Write",
+                "hooks": [
+                    {
+                        "type": "command",
+                        "command": "file=$(jq -r '.tool_input.file_path // empty'); [ -z \"$file\" ] && exit 0; case \"$file\" in *.ts|*.tsx|*.js|*.jsx|*.json|*.css) cd \"$CLAUDE_PROJECT_DIR\" && npx --no-install prettier --write --log-level=error \"$file\" 2>/dev/null || true ;; esac",
+                        "timeout": 30,
+                        "statusMessage": "Running prettier..."
+                    }
+                ]
+            }
+        ]
+    }
+}
diff --git a/.claude/settings.local.json.template b/.claude/settings.local.json.template
new file mode 100644
index 00000000..e45c36af
--- /dev/null
+++ b/.claude/settings.local.json.template
@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:www.npmjs.com)",
+      "Bash(openspec:*)",
+      "Bash(npx openspec:*)",
+      "Bash(gh api:*)",
+      "Bash(gh pr:*)"
+    ]
+  }
+}
diff --git a/.claude/skills/openspec-apply-change/SKILL.md b/.claude/skills/openspec-apply-change/SKILL.md
new file mode 100644
index 00000000..8a202cf6
--- /dev/null
+++ b/.claude/skills/openspec-apply-change/SKILL.md
@@ -0,0 +1,136 @@
+---
+name: openspec-apply-change
+description: Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.2.0"
+---
+
+Implement tasks from an OpenSpec change.
+
+**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **Select the change**
+
+   If a name is provided, use it. Otherwise:
+   - Infer from conversation context if the user mentioned a change
+   - Auto-select if only one active change exists
+   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
+
+   Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
+
+2. **Check status to understand the schema**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used (e.g., "spec-driven")
+   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
+
+3. **Get apply instructions**
+
+   ```bash
+   openspec instructions apply --change "<name>" --json
+   ```
+
+   This returns:
+   - Context file paths (varies by schema - could be proposal/specs/design/tasks or spec/tests/implementation/docs)
+   - Progress (total, complete, remaining)
+   - Task list with status
+   - Dynamic instruction based on current state
+
+   **Handle states:**
+   - If `state: "blocked"` (missing artifacts): show message, suggest using openspec-continue-change
+   - If `state: "all_done"`: congratulate, suggest archive
+   - Otherwise: proceed to implementation
+
+4. **Read context files**
+
+   Read the files listed in `contextFiles` from the apply instructions output.
+   The files depend on the schema being used:
+   - **spec-driven**: proposal, specs, design, tasks
+   - Other schemas: follow the contextFiles from CLI output
+
+5. **Show current progress**
+
+   Display:
+   - Schema being used
+   - Progress: "N/M tasks complete"
+   - Remaining tasks overview
+   - Dynamic instruction from CLI
+
+6. **Implement tasks (loop until done or blocked)**
+
+   For each pending task:
+   - Show which task is being worked on
+   - Make the code changes required
+   - Keep changes minimal and focused
+   - Mark task complete in the tasks file: `- [ ]` -> `- [x]`
+   - Continue to next task
+
+   **Pause if:**
+   - Task is unclear -> ask for clarification
+   - Implementation reveals a design issue -> suggest updating artifacts
+   - Error or blocker encountered -> report and wait for guidance
+   - User interrupts
+
+7. **On completion or pause, show status**
+
+   Display:
+   - Tasks completed this session
+   - Overall progress: "N/M tasks complete"
+   - If all done: suggest archive
+   - If paused: explain why and wait for guidance
+
+**Output During Implementation**
+
+```
+## Implementing: <change-name> (schema: <schema-name>)
+
+Working on task 3/7: <task description>
+[...implementation happening...]
+Task complete
+
+Working on task 4/7: <task description>
+[...implementation happening...]
+Task complete
+```
+
+**Output On Completion**
+
+```
+## Implementation Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 7/7 tasks complete
+
+### Completed This Session
+- [x] Task 1
+- [x] Task 2
+...
+
+All tasks complete! You can archive this change with `/opsx:archive`.
+```
+
+**Guardrails**
+- Keep going through tasks until done or blocked
+- Always read context files before starting (from the apply instructions output)
+- If task is ambiguous, pause and ask before implementing
+- If implementation reveals issues, pause and suggest artifact updates
+- Keep code changes minimal and scoped to each task
+- Update task checkbox immediately after completing each task
+- Pause on errors, blockers, or unclear requirements - don't guess
+- Use contextFiles from CLI output, don't assume specific file names
+
+**Fluid Workflow Integration**
+
+This skill supports the "actions on a change" model:
+
+- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
+- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.claude/skills/openspec-archive-change/SKILL.md b/.claude/skills/openspec-archive-change/SKILL.md
new file mode 100644
index 00000000..763fe5dd
--- /dev/null
+++ b/.claude/skills/openspec-archive-change/SKILL.md
@@ -0,0 +1,97 @@
+---
+name: openspec-archive-change
+description: Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.2.0"
+---
+
+Archive a completed change in the experimental workflow.
+
+**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
+
+   Show only active changes (not already archived).
+   Include the schema used for each change if available.
+
+   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
+
+2. **Check artifact completion status**
+
+   Run `openspec status --change "<name>" --json` to check artifact completion.
+
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used
+   - `artifacts`: List of artifacts with their status (`done` or other)
+
+   **If any artifacts are not `done`:**
+   - Display warning listing incomplete artifacts
+   - Use **AskUserQuestion tool** to confirm user wants to proceed
+   - Proceed if user confirms
+
+3. **Check task completion status**
+
+   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
+
+   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
+
+   **If incomplete tasks found:**
+   - Display warning showing count of incomplete tasks
+   - Use **AskUserQuestion tool** to confirm user wants to proceed
+   - Proceed if user confirms
+
+   **If no tasks file exists:** Proceed without task-related warning.
+
+4. **Assess delta spec sync state**
+
+   Check for delta specs at `openspec/changes/<name>/specs/`. If none exist, proceed without sync prompt.
+
+   **If delta specs exist:**
+   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
+   - Determine what changes would be applied (adds, modifications, removals, renames)
+   - Show a combined summary before prompting
+
+   **Prompt options:**
+   - If changes needed: "Sync now (recommended)", "Archive without syncing"
+   - If already synced: "Archive now", "Sync anyway", "Cancel"
+
+5. **Perform the archive**
+
+   Create the archive directory if it doesn't exist:
+   ```bash
+   mkdir -p openspec/changes/archive
+   ```
+
+   Generate target name using current date: `YYYY-MM-DD-<change-name>`
+
+   **Check if target already exists:**
+   - If yes: Fail with error, suggest renaming existing archive or using different date
+   - If no: Move the change directory to archive
+
+   ```bash
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
+
+6. **Display summary**
+
+   Show archive completion summary including:
+   - Change name
+   - Schema that was used
+   - Archive location
+   - Spec sync status (synced / sync skipped / no delta specs)
+   - Note about any warnings (incomplete artifacts/tasks)
+
+**Guardrails**
+- Always prompt for change selection if not provided
+- Use artifact graph (openspec status --json) for completion checking
+- Don't block archive on warnings - just inform and confirm
+- Preserve .openspec.yaml when moving to archive (it moves with the directory)
+- Show clear summary of what happened
diff --git a/.claude/skills/openspec-explore/SKILL.md b/.claude/skills/openspec-explore/SKILL.md
new file mode 100644
index 00000000..b9feea71
--- /dev/null
+++ b/.claude/skills/openspec-explore/SKILL.md
@@ -0,0 +1,147 @@
+---
+name: openspec-explore
+description: Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.2.0"
+---
+
+Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
+
+**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first and create a change proposal. You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
+
+**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
+
+---
+
+## The Stance
+
+- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
+- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
+- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
+- **Adaptive** - Follow interesting threads, pivot when new information emerges
+- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
+- **Grounded** - Explore the actual codebase when relevant, don't just theorize
+
+---
+
+## What You Might Do
+
+Depending on what the user brings, you might:
+
+**Explore the problem space**
+- Ask clarifying questions that emerge from what they said
+- Challenge assumptions
+- Reframe the problem
+- Find analogies
+
+**Investigate the codebase**
+- Map existing architecture relevant to the discussion
+- Find integration points
+- Identify patterns already in use
+- Surface hidden complexity
+
+**Compare options**
+- Brainstorm multiple approaches
+- Build comparison tables
+- Sketch tradeoffs
+- Recommend a path (if asked)
+
+**Visualize**
+```
+Use ASCII diagrams liberally:
+system diagrams, state machines,
+data flows, architecture sketches,
+dependency graphs, comparison tables
+```
+
+**Surface risks and unknowns**
+- Identify what could go wrong
+- Find gaps in understanding
+- Suggest spikes or investigations
+
+---
+
+## OpenSpec Awareness
+
+You have full context of the OpenSpec system. Use it naturally, don't force it.
+
+### Check for context
+
+At the start, quickly check what exists:
+```bash
+openspec list --json
+```
+
+This tells you:
+- If there are active changes
+- Their names, schemas, and status
+- What the user might be working on
+
+### When no change exists
+
+Think freely. When insights crystallize, you might offer:
+
+- "This feels solid enough to start a change. Want me to create a proposal?"
+- Or keep exploring - no pressure to formalize
+
+### When a change exists
+
+If the user mentions a change or you detect one is relevant:
+
+1. **Read existing artifacts for context**
+   - `openspec/changes/<name>/proposal.md`
+   - `openspec/changes/<name>/design.md`
+   - `openspec/changes/<name>/tasks.md`
+   - etc.
+
+2. **Reference them naturally in conversation**
+
+3. **Offer to capture when decisions are made**
+
+   | Insight Type | Where to Capture |
+   |--------------|------------------|
+   | New requirement discovered | `specs/<capability>/spec.md` |
+   | Design decision made | `design.md` |
+   | Scope changed | `proposal.md` |
+   | New work identified | `tasks.md` |
+
+4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
+
+---
+
+## What You Don't Have To Do
+
+- Follow a script
+- Ask the same questions every time
+- Produce a specific artifact
+- Reach a conclusion
+- Stay on topic if a tangent is valuable
+- Be brief (this is thinking time)
+
+---
+
+## Ending Discovery
+
+There's no required ending. Discovery might:
+
+- **Flow into a proposal**: "Ready to start? I can create a change proposal."
+- **Result in artifact updates**: "Updated design.md with these decisions"
+- **Just provide clarity**: User has what they need, moves on
+- **Continue later**: "We can pick this up anytime"
+
+---
+
+## Guardrails
+
+- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
+- **Don't fake understanding** - If something is unclear, dig deeper
+- **Don't rush** - Discovery is thinking time, not task time
+- **Don't force structure** - Let patterns emerge naturally
+- **Don't auto-capture** - Offer to save insights, don't just do it
+- **Do visualize** - A good diagram is worth many paragraphs
+- **Do explore the codebase** - Ground discussions in reality
+- **Do question assumptions** - Including the user's and your own
diff --git a/.claude/skills/openspec-propose/SKILL.md b/.claude/skills/openspec-propose/SKILL.md
new file mode 100644
index 00000000..ed1f4e33
--- /dev/null
+++ b/.claude/skills/openspec-propose/SKILL.md
@@ -0,0 +1,110 @@
+---
+name: openspec-propose
+description: Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.2.0"
+---
+
+Propose a new change - create the change and generate all artifacts in one step.
+
+I'll create a change with artifacts:
+- proposal.md (what & why)
+- design.md (how)
+- tasks.md (implementation steps)
+
+When ready to implement, run /opsx:apply
+
+---
+
+**Input**: The user's request should include a change name (kebab-case) OR a description of what they want to build.
+
+**Steps**
+
+1. **If no clear input provided, ask what they want to build**
+
+   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+   > "What change do you want to work on? Describe what you want to build or fix."
+
+   From their description, derive a kebab-case name (e.g., "add user authentication" -> `add-user-auth`).
+
+   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
+
+2. **Create the change directory**
+   ```bash
+   openspec new change "<name>"
+   ```
+   This creates a scaffolded change at `openspec/changes/<name>/` with `.openspec.yaml`.
+
+3. **Get the artifact build order**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to get:
+   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
+   - `artifacts`: list of all artifacts with their status and dependencies
+
+4. **Create artifacts in sequence until apply-ready**
+
+   Use the **TodoWrite tool** to track progress through the artifacts.
+
+   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
+
+   a. **For each artifact that is `ready` (dependencies satisfied)**:
+      - Get instructions:
+        ```bash
+        openspec instructions <artifact-id> --change "<name>" --json
+        ```
+      - The instructions JSON includes:
+        - `context`: Project background (constraints for you - do NOT include in output)
+        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+        - `template`: The structure to use for your output file
+        - `instruction`: Schema-specific guidance for this artifact type
+        - `outputPath`: Where to write the artifact
+        - `dependencies`: Completed artifacts to read for context
+      - Read any completed dependency files for context
+      - Create the artifact file using `template` as the structure
+      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+      - Show brief progress: "Created <artifact-id>"
+
+   b. **Continue until all `applyRequires` artifacts are complete**
+      - After creating each artifact, re-run `openspec status --change "<name>" --json`
+      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+      - Stop when all `applyRequires` artifacts are done
+
+   c. **If an artifact requires user input** (unclear context):
+      - Use **AskUserQuestion tool** to clarify
+      - Then continue with creation
+
+5. **Show final status**
+   ```bash
+   openspec status --change "<name>"
+   ```
+
+**Output**
+
+After completing all artifacts, summarize:
+- Change name and location
+- List of artifacts created with brief descriptions
+- What's ready: "All artifacts created! Ready for implementation."
+- Prompt: "Run `/opsx:apply` or ask me to implement to start working on the tasks."
+
+**Artifact Creation Guidelines**
+
+- Follow the `instruction` field from `openspec instructions` for each artifact type
+- The schema defines what each artifact should contain - follow it
+- Read dependency artifacts for context before creating new ones
+- Use `template` as the structure for your output file - fill in its sections
+- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
+  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
+  - These guide what you write, but should never appear in the output
+
+**Guardrails**
+- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
+- Always read dependency artifacts before creating a new one
+- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
+- If a change with that name already exists, ask if user wants to continue it or create a new one
+- Verify each artifact file exists after writing before proceeding to next
diff --git a/.claude/skills/pencil-design/SKILL.md b/.claude/skills/pencil-design/SKILL.md
new file mode 100644
index 00000000..1bb6c540
--- /dev/null
+++ b/.claude/skills/pencil-design/SKILL.md
@@ -0,0 +1,90 @@
+---
+name: pencil-design
+description: >
+  Design skill using Pencil MCP for wireframes, mockups, and UI prototypes.
+  Use when the user asks to design a screen, create a wireframe, produce a
+  mockup, sketch a layout, or plan a UI before implementing it.
+---
+
+# UI Design with Pencil MCP
+
+## About Pencil MCP
+
+Pencil is a visual design tool accessed via MCP tools. It works with `.pen`
+files and provides direct programmatic access to create, read, and modify
+design nodes (frames, text, shapes, components, images). No GUI interaction
+is needed — you design entirely through tool calls.
+
+## Available Tools
+
+| Tool                           | Purpose                                                    |
+|--------------------------------|------------------------------------------------------------|
+| `get_editor_state`             | Get the active `.pen` file, selection, and available components |
+| `open_document`                | Open an existing `.pen` file or create a new one (`"new"`) |
+| `get_guidelines`               | Get design rules for a topic (web-app, mobile-app, etc.)   |
+| `get_style_guide_tags`         | Discover available style guide tags for inspiration         |
+| `get_style_guide`              | Get a style guide by tags or name                          |
+| `batch_get`                    | Read nodes by pattern search or node IDs                   |
+| `batch_design`                 | Insert, copy, update, replace, move, delete, or generate image nodes |
+| `snapshot_layout`              | Check computed layout rectangles of nodes                  |
+| `get_screenshot`               | Take a screenshot of a node for visual validation          |
+| `get_variables`                | Read variables and themes defined in the file              |
+| `set_variables`                | Add or update variables                                    |
+| `find_empty_space_on_canvas`   | Find empty canvas space for placing new designs            |
+| `export_nodes`                 | Export nodes to PNG/JPEG/WEBP/PDF                          |
+| `search_all_unique_properties` | Find all unique property values in a node tree             |
+| `replace_all_matching_properties` | Bulk-replace properties across a node tree              |
+
+## Design Workflow
+
+### 1. Prepare
+
+1. Call `get_editor_state(include_schema=true)` to load the schema and see
+   available components.
+2. If no `.pen` file is open, call `open_document("new")` to create one, or
+   `open_document(path)` to open an existing one.
+3. Call `get_guidelines(topic)` for the relevant topic (e.g., `"web-app"`).
+4. Call `get_style_guide_tags` then `get_style_guide(tags)` for visual
+   inspiration and consistency.
+
+### 2. Design
+
+1. Call `find_empty_space_on_canvas` to find placement coordinates.
+2. Use `batch_design` to create frames, insert components, add text, etc.
+   - Keep to ~25 operations per call maximum.
+   - Use the component IDs from `get_editor_state` to copy reusable components.
+3. Periodically call `get_screenshot` to visually validate your work.
+4. Use `snapshot_layout` to verify positioning and dimensions.
+
+### 3. Export
+
+1. Use `export_nodes` to export completed designs to `openspec/designs/exports/`.
+2. Follow the naming convention: `[feature]-[screen]-[state].[format]`
+
+## Design Output Directories
+
+```
+openspec/designs/
+├── wireframes/          # .pen files for low-fidelity layouts
+├── mockups/             # .pen files for high-fidelity visuals
+└── exports/             # Exported images (PNG/SVG/PDF)
+```
+
+## Integration with Project Design System
+
+<!-- ADAPT: Replace with your project's actual design system details -->
+Before designing, read the project's styles source file to understand existing
+tokens (colors, spacing, typography, shadows, radii). Reuse existing tokens.
+Use `get_variables` / `set_variables` to align Pencil variables with the
+project's design tokens when possible.
+
+## Export Naming Convention
+
+```
+[feature]-[screen]-[state].[format]
+```
+
+Examples:
+- `dashboard-overview-default.png`
+- `settings-profile-loading.png`
+- `auth-login-error-states.svg`
diff --git a/.claude/skills/playwright-cli/SKILL.md b/.claude/skills/playwright-cli/SKILL.md
new file mode 100644
index 00000000..96a5b7e8
--- /dev/null
+++ b/.claude/skills/playwright-cli/SKILL.md
@@ -0,0 +1,183 @@
+---
+name: playwright-cli
+description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
+allowed-tools: Bash(playwright-cli:*)
+---
+
+# Browser Automation with playwright-cli
+
+## Quick start
+
+```bash
+# open new browser
+playwright-cli open
+# navigate to a page
+playwright-cli goto https://playwright.dev
+# interact with the page using refs from the snapshot
+playwright-cli click e15
+playwright-cli type "page.click"
+playwright-cli press Enter
+# take a screenshot (rarely used, as snapshot is more common)
+playwright-cli screenshot
+# close the browser
+playwright-cli close
+```
+
+## Commands
+
+### Core
+
+```bash
+playwright-cli open
+playwright-cli open https://example.com/
+playwright-cli goto https://playwright.dev
+playwright-cli type "search query"
+playwright-cli click e3
+playwright-cli dblclick e7
+playwright-cli fill e5 "user@example.com"
+playwright-cli drag e2 e8
+playwright-cli hover e4
+playwright-cli select e9 "option-value"
+playwright-cli upload ./document.pdf
+playwright-cli check e12
+playwright-cli uncheck e12
+playwright-cli snapshot
+playwright-cli snapshot --filename=after-click.yaml
+playwright-cli eval "document.title"
+playwright-cli eval "el => el.textContent" e5
+playwright-cli dialog-accept
+playwright-cli dialog-accept "confirmation text"
+playwright-cli dialog-dismiss
+playwright-cli resize 1920 1080
+playwright-cli close
+```
+
+### Navigation
+
+```bash
+playwright-cli go-back
+playwright-cli go-forward
+playwright-cli reload
+```
+
+### Keyboard
+
+```bash
+playwright-cli press Enter
+playwright-cli press ArrowDown
+playwright-cli keydown Shift
+playwright-cli keyup Shift
+```
+
+### Mouse
+
+```bash
+playwright-cli mousemove 150 300
+playwright-cli mousedown
+playwright-cli mousedown right
+playwright-cli mouseup
+playwright-cli mouseup right
+playwright-cli mousewheel 0 100
+```
+
+### Save as
+
+```bash
+playwright-cli screenshot
+playwright-cli screenshot e5
+playwright-cli screenshot --filename=page.png
+playwright-cli pdf --filename=page.pdf
+```
+
+### Tabs
+
+```bash
+playwright-cli tab-list
+playwright-cli tab-new
+playwright-cli tab-new https://example.com/page
+playwright-cli tab-close
+playwright-cli tab-close 2
+playwright-cli tab-select 0
+```
+
+### Storage
+
+```bash
+playwright-cli state-save
+playwright-cli state-save auth.json
+playwright-cli state-load auth.json
+
+# Cookies
+playwright-cli cookie-list
+playwright-cli cookie-list --domain=example.com
+playwright-cli cookie-get session_id
+playwright-cli cookie-set session_id abc123
+playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure
+playwright-cli cookie-delete session_id
+playwright-cli cookie-clear
+
+# LocalStorage
+playwright-cli localstorage-list
+playwright-cli localstorage-get theme
+playwright-cli localstorage-set theme dark
+playwright-cli localstorage-delete theme
+playwright-cli localstorage-clear
+
+# SessionStorage
+playwright-cli sessionstorage-list
+playwright-cli sessionstorage-get step
+playwright-cli sessionstorage-set step 3
+playwright-cli sessionstorage-delete step
+playwright-cli sessionstorage-clear
+```
+
+### Network
+
+```bash
+playwright-cli route "**/*.jpg" --status=404
+playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
+playwright-cli route-list
+playwright-cli unroute "**/*.jpg"
+playwright-cli unroute
+```
+
+### DevTools
+
+```bash
+playwright-cli console
+playwright-cli console warning
+playwright-cli network
+playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
+playwright-cli tracing-start
+playwright-cli tracing-stop
+playwright-cli video-start
+playwright-cli video-stop video.webm
+```
+
+## Open parameters
+```bash
+playwright-cli open --browser=chrome
+playwright-cli open --browser=firefox
+playwright-cli open --browser=webkit
+playwright-cli open --browser=msedge
+playwright-cli open --extension
+playwright-cli open --persistent
+playwright-cli open --profile=/path/to/profile
+playwright-cli open --config=my-config.json
+playwright-cli close
+playwright-cli delete-data
+```
+
+## Browser Sessions
+
+```bash
+playwright-cli -s=mysession open example.com --persistent
+playwright-cli -s=mysession open example.com --profile=/path/to/profile
+playwright-cli -s=mysession click e6
+playwright-cli -s=mysession close
+playwright-cli -s=mysession delete-data
+
+playwright-cli list
+playwright-cli close-all
+playwright-cli kill-all
+```
diff --git a/.claude/skills/task-management/SKILL.md b/.claude/skills/task-management/SKILL.md
new file mode 100644
index 00000000..f8206110
--- /dev/null
+++ b/.claude/skills/task-management/SKILL.md
@@ -0,0 +1,87 @@
+---
+name: task-management
+description: >
+    Project management skill for creating and managing tasks in the issue tracker
+    from OpenSpec artifacts. Use whenever creating tasks, updating status, planning
+    sprints, or coordinating work between development agents. Trigger on any
+    mention of tickets, tasks, sprint planning, or project tracking.
+---
+
+# Issue Tracker Task Management
+
+This project uses **GitHub Issues** for task tracking.
+
+-   Repository: https://github.com/EyeSeeTea/d2-autogen-forms
+-   Use `gh` CLI for creating and managing issues
+
+## Creating Tasks from OpenSpec
+
+When given an OpenSpec change proposal:
+
+1. Read `openspec/changes/<change-name>/tasks.md` for the task breakdown
+2. Read `openspec/changes/<change-name>/design.md` for technical context
+3. For each task, create a GitHub Issue with:
+    - **Title**: `[ROLE] Task description`
+    - **Body**: Include acceptance criteria from the spec
+    - **Labels**: Role tag (`fe`, `be`, `gd`), feature name, priority
+    - **Assignee**: Map to the appropriate agent role
+    - **Milestone**: Sprint or release milestone if applicable
+
+### Creating Issues via CLI
+
+```bash
+# Simple issue
+gh issue create --title "[FE] Implement form grid view" --body "..." --label "fe,feature-name"
+
+# With assignee and milestone
+gh issue create --title "[BE] Add DataStore repository" --body "..." --label "be,feature-name" --assignee "@me" --milestone "v1.5"
+
+# List issues for a feature
+gh issue list --label "feature-name"
+
+# Update issue status
+gh issue close <number>
+gh issue reopen <number>
+```
+
+## Role-to-Assignee Mapping
+
+| Role Tag | Agent              | Task Type                                                   |
+| -------- | ------------------ | ----------------------------------------------------------- |
+| [FE]     | frontend-developer | UI components, React views, form rendering                  |
+| [BE]     | backend-developer  | Domain entities, use cases, DHIS2 integrations, CLI scripts |
+| [GD]     | graphical-designer | Visual design, wireframes, mockups                          |
+| [CR]     | code-reviewer      | PR review, code quality audit                               |
+
+Note: No database role — all persistence is through the DHIS2 API.
+
+## Task Dependencies
+
+Create tasks in dependency order:
+
+1. Domain entities/interfaces -> Repository implementations -> compositionRoot.ts wiring -> Use cases
+2. UX wireframes -> GD mockups -> FE implementation
+3. Both tracks can run in parallel
+
+## Task Structure Strategy
+
+Choose the structure based on feature complexity:
+
+**Simple features** (roughly 5 or fewer tasks):
+
+-   Create ONE parent issue named: `[Feature name] - Brief description`
+-   Create subtasks as a checklist in the parent issue body
+-   Or create linked child issues referencing the parent
+
+**Complex features** (more than 5 tasks, or multiple parallel tracks):
+
+-   Create multiple standalone issues
+-   Every issue title MUST include the feature name as a prefix so they can be filtered together
+-   Format: `[Feature name] [ROLE] Task description`
+-   Use a shared GitHub label for the feature to group them
+
+When in doubt, prefer the simple approach (parent + checklist).
+
+## Status Flow
+
+`open` -> `in progress` (assign yourself) -> `closed` (via PR merge or `gh issue close`)
diff --git a/.gitignore b/.gitignore
index 6cc2fb35..9d24e15b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,8 +38,5 @@ bak
 NOTES*
 datastore
 
-# Claude
-.claude/
-
-# OpenSpec (changes are local, specs are committed)
-openspec/changes/
\ No newline at end of file
+# Claude Code local settings (per-user permissions, not shared)
+.claude/settings.local.json
diff --git a/i18n/en.pot b/i18n/en.pot
index 86396a0a..c362abae 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-03-31T17:32:04.356Z\n"
-"PO-Revision-Date: 2026-03-31T17:32:04.356Z\n"
+"POT-Creation-Date: 2026-04-29T13:49:21.934Z\n"
+"PO-Revision-Date: 2026-04-29T13:49:21.934Z\n"
 
 msgid "Mark all notifications as read"
 msgstr ""
@@ -119,6 +119,27 @@ msgstr ""
 msgid "? This action cannot be undone."
 msgstr ""
 
+msgid "Create new constant"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Short name"
+msgstr ""
+
+msgid "Auto-filled from name. Max {{max}} characters."
+msgstr ""
+
+msgid "Code"
+msgstr ""
+
+msgid "Auto-filled from name"
+msgstr ""
+
+msgid "Description"
+msgstr ""
+
 msgid "Select dataset"
 msgstr ""
 
@@ -139,3 +160,31 @@ msgstr ""
 
 msgid "Configuration saved"
 msgstr ""
+
+msgid "Name is required"
+msgstr ""
+
+msgid "Short name is required"
+msgstr ""
+
+msgid "Short name must be {{max}} characters or fewer"
+msgstr ""
+
+msgid "Code is required"
+msgstr ""
+
+msgid "Description is required"
+msgstr ""
+
+msgid "Open dialog to define a new constant"
+msgstr ""
+
+msgctxt "ADD authority."
+msgid ""
+"You do not have permission to create constants. Ask your administrator for "
+"the F_CONSTANT"
+msgstr ""
+
+msgctxt "ADD authority"
+msgid "Requires F_CONSTANT"
+msgstr ""
diff --git a/i18n/es.po b/i18n/es.po
index 3a677274..2a0a5ab5 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2026-03-31T17:32:04.356Z\n"
+"POT-Creation-Date: 2026-04-29T13:49:21.934Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -119,6 +119,27 @@ msgstr ""
 msgid "? This action cannot be undone."
 msgstr ""
 
+msgid "Create new constant"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Short name"
+msgstr ""
+
+msgid "Auto-filled from name. Max {{max}} characters."
+msgstr ""
+
+msgid "Code"
+msgstr ""
+
+msgid "Auto-filled from name"
+msgstr ""
+
+msgid "Description"
+msgstr ""
+
 msgid "Select dataset"
 msgstr ""
 
@@ -139,3 +160,31 @@ msgstr ""
 
 msgid "Configuration saved"
 msgstr ""
+
+msgid "Name is required"
+msgstr ""
+
+msgid "Short name is required"
+msgstr ""
+
+msgid "Short name must be {{max}} characters or fewer"
+msgstr ""
+
+msgid "Code is required"
+msgstr ""
+
+msgid "Description is required"
+msgstr ""
+
+msgid "Open dialog to define a new constant"
+msgstr ""
+
+msgctxt "ADD authority."
+msgid ""
+"You do not have permission to create constants. Ask your administrator for "
+"the F_CONSTANT"
+msgstr ""
+
+msgctxt "ADD authority"
+msgid "Requires F_CONSTANT"
+msgstr ""
diff --git a/i18n/fr.po b/i18n/fr.po
index 481435da..60d2064c 100644
--- a/i18n/fr.po
+++ b/i18n/fr.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2026-03-31T17:32:04.356Z\n"
+"POT-Creation-Date: 2026-04-29T13:49:21.934Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -119,6 +119,27 @@ msgstr ""
 msgid "? This action cannot be undone."
 msgstr ""
 
+msgid "Create new constant"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Short name"
+msgstr ""
+
+msgid "Auto-filled from name. Max {{max}} characters."
+msgstr ""
+
+msgid "Code"
+msgstr ""
+
+msgid "Auto-filled from name"
+msgstr ""
+
+msgid "Description"
+msgstr ""
+
 msgid "Select dataset"
 msgstr ""
 
@@ -139,3 +160,31 @@ msgstr ""
 
 msgid "Configuration saved"
 msgstr ""
+
+msgid "Name is required"
+msgstr ""
+
+msgid "Short name is required"
+msgstr ""
+
+msgid "Short name must be {{max}} characters or fewer"
+msgstr ""
+
+msgid "Code is required"
+msgstr ""
+
+msgid "Description is required"
+msgstr ""
+
+msgid "Open dialog to define a new constant"
+msgstr ""
+
+msgctxt "ADD authority."
+msgid ""
+"You do not have permission to create constants. Ask your administrator for "
+"the F_CONSTANT"
+msgstr ""
+
+msgctxt "ADD authority"
+msgid "Requires F_CONSTANT"
+msgstr ""
diff --git a/i18n/ru.po b/i18n/ru.po
index 2fdb6444..aadadd66 100644
--- a/i18n/ru.po
+++ b/i18n/ru.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2026-03-31T17:32:04.356Z\n"
+"POT-Creation-Date: 2026-04-29T13:49:21.934Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -120,6 +120,27 @@ msgstr ""
 msgid "? This action cannot be undone."
 msgstr ""
 
+msgid "Create new constant"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Short name"
+msgstr ""
+
+msgid "Auto-filled from name. Max {{max}} characters."
+msgstr ""
+
+msgid "Code"
+msgstr ""
+
+msgid "Auto-filled from name"
+msgstr ""
+
+msgid "Description"
+msgstr ""
+
 msgid "Select dataset"
 msgstr ""
 
@@ -140,3 +161,31 @@ msgstr ""
 
 msgid "Configuration saved"
 msgstr ""
+
+msgid "Name is required"
+msgstr ""
+
+msgid "Short name is required"
+msgstr ""
+
+msgid "Short name must be {{max}} characters or fewer"
+msgstr ""
+
+msgid "Code is required"
+msgstr ""
+
+msgid "Description is required"
+msgstr ""
+
+msgid "Open dialog to define a new constant"
+msgstr ""
+
+msgctxt "ADD authority."
+msgid ""
+"You do not have permission to create constants. Ask your administrator for "
+"the F_CONSTANT"
+msgstr ""
+
+msgctxt "ADD authority"
+msgid "Requires F_CONSTANT"
+msgstr ""
diff --git a/opencode.json b/opencode.json
new file mode 100644
index 00000000..7d8ccdfc
--- /dev/null
+++ b/opencode.json
@@ -0,0 +1,80 @@
+{
+    "$schema": "https://opencode.ai/config.json",
+    "agent": {
+        "project-manager": {
+            "description": "Project manager that translates OpenSpec proposals into tasks in the issue tracker, assigns work to other agents, tracks progress, and manages the sprint. Use when: planning work, creating tickets, checking status, assigning tasks.",
+            "mode": "primary",
+            "prompt": "{file:.agents/agents/project-manager.md}",
+            "tools": {
+                "Read": true,
+                "Glob": true,
+                "Grep": true
+            }
+        },
+        "backend-developer": {
+            "description": "Backend/domain developer specializing in Clean Architecture domain logic, DHIS2 API integrations, repository implementations, and use cases. Use when: building domain entities, use cases, repository implementations, data layer integrations, or CLI scripts.",
+            "mode": "subagent",
+            "prompt": "{file:.agents/agents/backend-developer.md}",
+            "tools": {
+                "Read": true,
+                "Write": true,
+                "Edit": true,
+                "Bash": true,
+                "Glob": true,
+                "Grep": true
+            }
+        },
+        "frontend-developer": {
+            "description": "Frontend developer specializing in React, TypeScript, and UI implementation. Use when: building UI components, pages, forms, styling, client-side logic, or implementing designs for the web interface.",
+            "mode": "subagent",
+            "prompt": "{file:.agents/agents/frontend-developer.md}",
+            "tools": {
+                "Read": true,
+                "Write": true,
+                "Edit": true,
+                "Bash": true,
+                "Glob": true,
+                "Grep": true
+            }
+        },
+        "graphical-designer": {
+            "description": "Visual/graphical designer handling UI design, wireframes, mockups, design tokens, and component specifications. Use when: designing screens, creating wireframes or mockups, defining visual style, choosing colors/typography, producing design tokens, or planning UI before implementation.",
+            "mode": "subagent",
+            "prompt": "{file:.agents/agents/graphical-designer.md}",
+            "tools": {
+                "Read": true,
+                "Write": true,
+                "Edit": true,
+                "Bash": true,
+                "Glob": true,
+                "Grep": true,
+                "mcp__pencil__get_editor_state": true,
+                "mcp__pencil__open_document": true,
+                "mcp__pencil__get_guidelines": true,
+                "mcp__pencil__get_style_guide_tags": true,
+                "mcp__pencil__get_style_guide": true,
+                "mcp__pencil__batch_get": true,
+                "mcp__pencil__batch_design": true,
+                "mcp__pencil__snapshot_layout": true,
+                "mcp__pencil__get_screenshot": true,
+                "mcp__pencil__get_variables": true,
+                "mcp__pencil__set_variables": true,
+                "mcp__pencil__find_empty_space_on_canvas": true,
+                "mcp__pencil__export_nodes": true,
+                "mcp__pencil__search_all_unique_properties": true,
+                "mcp__pencil__replace_all_matching_properties": true
+            }
+        },
+        "code-reviewer": {
+            "description": "Code reviewer that analyzes PRs for architecture, clean code, and project convention violations. Use when: reviewing a PR, auditing code quality, or checking adherence to project standards.",
+            "mode": "subagent",
+            "prompt": "{file:.agents/agents/code-reviewer.md}",
+            "tools": {
+                "Read": true,
+                "Glob": true,
+                "Grep": true,
+                "Bash": true
+            }
+        }
+    }
+}
diff --git a/openspec/changes/.gitkeep b/openspec/changes/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openspec/changes/inline-constant-creation/.openspec.yaml b/openspec/changes/inline-constant-creation/.openspec.yaml
new file mode 100644
index 00000000..9b8557a6
--- /dev/null
+++ b/openspec/changes/inline-constant-creation/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-04-06
diff --git a/openspec/changes/inline-constant-creation/design.md b/openspec/changes/inline-constant-creation/design.md
new file mode 100644
index 00000000..c6475cf9
--- /dev/null
+++ b/openspec/changes/inline-constant-creation/design.md
@@ -0,0 +1,92 @@
+## Context
+
+The Configurator (`src/webapp/reports/autogenerated-forms-configurator/`) edits the DataStore configuration as raw JSON in a Monaco editor (`Editor.tsx`). The editor already triggers Monaco's suggest widget on empty-line Enter (`useAutogenEditor.ts`), and loads a JSON schema (`autogenConfigSchema`) derived from `DataStoreConfigCodec.schema()`. The JSON schema is disabled above 100 KB (large-file mode) — but Monaco's `registerCompletionItemProvider` works independently of the schema pipeline and will continue to function.
+
+The `Constant` entity and `ConstantRepository` already exist (used by `ImportConstantTranslationsUseCase`). The entity shape (`id`, `name`, `shortName`, `code`, `description`, `value`, `translations`) already matches DHIS2's canonical constant metadata; no entity changes are needed. We use `Constant` as the sole type for both reads and writes: new entries are built with `id: ""` (sentinel for "not yet assigned") and `translations: []` (empty by design — translation entry will come in a follow-up). `ConstantRepository.save` splits its input on `id === ""` and routes new entries through the server-assigned-UID path.
+
+## Goals / Non-Goals
+
+**Goals**
+
+-   Provide a Monaco-integrated "Create new constant" entry for any `code` string nested under a `texts` object.
+-   One-click create-and-link: the new constant's code ends up in the editor at the cursor without the user copy-pasting.
+-   Work in large-file mode where the JSON schema is off.
+-   Gate creation on the DHIS2 `F_CONSTANT_ADD` authority.
+
+**Non-Goals**
+
+-   Browsing or filtering existing constants in the autocomplete.
+-   Editing or deleting existing constants from the Configurator.
+-   Per-locale translation entry in the dialog (deferred — see proposal TODO).
+-   Autocompleting `code` fields outside `texts` (e.g., `dataElement.code`, `categoryOptionCombo.code`) — their completion sources are different metadata. Out of scope here.
+-   Replacing the Monaco editor with a visual form builder.
+
+## Decisions
+
+### 1. Monaco `CompletionItemProvider` vs custom dropdown overlay
+
+**Choice**: Register a Monaco `CompletionItemProvider` for the `json` language and filter activations by JSON path.
+
+**Why**: Using Monaco's own provider keeps styling, keyboard navigation, and lifecycle consistent with the rest of the editor — no floating popovers to position or dismiss manually. The provider fires on every trigger character and keystroke; we return completions only when the cursor's JSON path matches `texts.*.code`.
+
+**Alternative considered**: Custom overlay positioned above the cursor — rejected due to duplication with Monaco's built-in widget and fragility around scroll/resize.
+
+### 2. Path matching: tokenize the JSON, walk back from the cursor
+
+**Choice**: On each completion invocation, walk backwards from the cursor through the JSON text to reconstruct the property path. Match if the path ends with `code` and at least one ancestor key equals `texts`.
+
+**Why**: Monaco's JSON language service doesn't expose the JSON AST publicly. Re-parsing the entire document on each keystroke is expensive on large files. Walking backwards tokenwise from the cursor is bounded and fast.
+
+**Alternative considered**: Parse the whole JSON on every call — acceptable for small files but unusable in large-file mode.
+
+### 3. Auto-derivation for `code` and `shortName`
+
+**Choice**: As the user types `name`, derive:
+
+-   `code` = `upperSnake(name)` (editable, user can override)
+-   `shortName` = first 50 chars of `upperSnake(name)` (editable, user can override)
+
+Derivation stops the moment the user manually edits either field (tracked by a "dirty" flag per field).
+
+**Why**: Matches the DHIS2 Maintenance app's behavior. `upperSnake` is the convention used for translation-key constants throughout the project.
+
+### 4. `value` is fixed at `0`, no UI field
+
+**Choice**: DHIS2 requires `value` as a number, but constants used as translation keys don't carry a meaningful numeric value. The dialog does not expose a `value` field — it always submits `value: 0`.
+
+**Why**: Eliminates a confusing input (users would ask "what do I put here?"), keeps the dialog compact, and matches how translation-key constants are modelled downstream.
+
+### 5. Cursor insertion via Monaco `executeEdits`
+
+**Choice**: On successful creation, call `editor.executeEdits` with a `Range` covering the current string value at the cursor, replacing it with the new `code`. The editor ref is captured in `Editor.tsx` and exposed via an `EditorApi` callback.
+
+**Why**: We already own the editor reference. `executeEdits` is transactional (single undo step) and re-applies validation automatically. This removes the copy-paste step entirely.
+
+**Alternative considered**: Clipboard + snackbar — rejected; doesn't meet the task's "one-step" goal.
+
+### 6. Permission check via DHIS2 current user authorities
+
+**Choice**: Expose the current user's authorities through `AppContext` (fetched once at startup). The Monaco provider and dialog read the flag synchronously.
+
+**Why**: `api.currentUser` already returns the authorities list. Caching it in `AppContext` avoids per-keystroke network calls.
+
+**UX**: When `F_CONSTANT_ADD` is absent, the "Create new constant" completion item still appears but is tagged with `tags: [CompletionItemTag.Deprecated]` and a hover message explaining the missing authority. Selecting it is a no-op. The dialog itself cannot be opened in this state.
+
+### 7. Large-file mode behaviour
+
+**Choice**: The completion provider is registered once in `Editor.tsx` regardless of file size. On large files (`isLargeFile === true`) the Configurator additionally disables Monaco's JSON-worker `completionItems` contribution via `setModeConfiguration`.
+
+**Why**: The JSON worker scrapes the document for string values and offers them as completions. On a 7,000-line config that floods the suggest widget with hundreds of duplicate codes, drowning out our single "Create new constant" entry. Disabling the worker's completion contribution leaves only our provider's entry visible while preserving every other JSON service feature (folding, hovers, formatting, etc.).
+
+### 8. Provider returns a single "Create new constant" entry, no existing-constants list
+
+**Choice**: The provider does not list existing DHIS2 constants. Its only contribution is the create entry.
+
+**Why**: A "browse existing constants" autocomplete sounds appealing but in practice the list reaches hundreds or thousands of entries, fights Monaco's fuzzy filter on large files, and adds an opt-in `prefix` config field most users would not discover. Removing it makes the behaviour uniform across config sizes and removes a class of UX edge cases (filter pruning, dedup against existing item with the same code, API caching). Users who want to reference an existing constant can copy from elsewhere in the doc.
+
+## Risks / Trade-offs
+
+-   **[Path detection]** Malformed JSON while the user is typing may cause the backward walk to miss the ancestor. Mitigation: on parse failure, suppress the suggestion entirely — the create entry only appears when the path is unambiguously eligible.
+-   **[Code uniqueness]** The DHIS2 API will reject a `POST` with a duplicate code. Handled by the dialog's failure path (per-field error, dialog stays open).
+-   **[Authorities caching]** If an admin grants `F_CONSTANT_ADD` mid-session, the user must reload to see the create option enabled. Acceptable — this is not a hot path.
+-   **[Monaco provider lifecycle]** Registering a provider multiple times (React re-mounts) leaks listeners. Mitigation: dispose the returned `IDisposable` (and any pending `setTimeout`) in the effect cleanup.
diff --git a/openspec/changes/inline-constant-creation/proposal.md b/openspec/changes/inline-constant-creation/proposal.md
new file mode 100644
index 00000000..77f26727
--- /dev/null
+++ b/openspec/changes/inline-constant-creation/proposal.md
@@ -0,0 +1,32 @@
+## Why
+
+Text fields in the Autogen Configurator accept either a literal string or a constant reference (`{ "code": "..." }`). Projects that need translations rely almost exclusively on constants, but creating one today forces the user to leave the Configurator, open the DHIS2 Maintenance app, create the constant, copy the code, return, and paste it in — high friction, and typos in the pasted code silently break the form. The fix: when the cursor lands on a `code` string in a `texts` block, Monaco's autocomplete contributes a "Create new constant" entry that opens an inline dialog and inserts the saved constant's code into the editor on success.
+
+## What Changes
+
+-   Register a Monaco `CompletionItemProvider` scoped to any `code` property nested under a `texts` object (`texts.header.code`, `texts.footer.code`, `texts.rowTotals.code`, etc.). The provider contributes a single entry: "Create new constant".
+-   Selecting the entry opens a new `CreateConstantDialog`.
+-   `CreateConstantDialog` fields: `name` (required), `shortName` (required, auto-filled from name, editable, max 50 chars), `code` (required, auto-filled from name, editable), `description` (required). The `value` field is not shown — the dialog always submits `value: 0` (numeric value is irrelevant for translation-key constants). `translations: []` is submitted today; per-locale translation entry is a follow-up.
+-   On successful save the new constant's `code` is written back into the editor at the original cursor position. On failure the dialog stays open with an inline error.
+-   Tag the "Create new constant" entry as deprecated (and disable the dialog's "Save" action) when the current user lacks the DHIS2 authority `F_CONSTANT_ADD`.
+-   On large configurations (`isLargeFile === true`), Monaco's JSON-worker `completionItems` contribution is disabled so the create entry isn't drowned out by the document-string scraper.
+
+## Capabilities
+
+### New Capabilities
+
+-   `inline-constant-creation`: a Monaco-integrated entry point for creating a DHIS2 constant inline from any `texts.*.code` cursor position.
+
+### Modified Capabilities
+
+_(none — no existing spec-level requirements change)_
+
+## Impact
+
+-   **Domain layer**: `Constant` entity already matched the DHIS2 shape and is the only type used throughout. New entries are represented by a `Constant` with `id: ""` and `translations: []`. New `CreateConstantUseCase.execute(constant)` returns `Promise<void>` and wraps `ConstantRepository.save([constant], { post: true, export: false })`. `ConstantSaveError` is a tagged discriminated type carrying structured `ErrorReportEntry[]` so per-field errors survive to the UI.
+-   **Data layer**: `ConstantRepository` exposes only `save(constants, options)`. `save` internally splits the input array on `id === ""` — new entries are POSTed without an `id` field (DHIS2 assigns the UID server-side); existing entries keep the pre-fetch-then-merge flow.
+-   **Webapp layer**: new Monaco completion provider registered in `Editor.tsx`. New `CreateConstantDialog` with a `useCreateConstantForm` hook owning state, validation, and save. `Editor.tsx` disables the JSON-worker `completionItems` contribution while `isLargeFile` is `true`.
+-   **Composition root**: wire `CreateConstantUseCase`.
+-   **Permissions**: read `F_CONSTANT_ADD` from the current user's authorities (already exposed by `@eyeseetea/d2-api`); gate the "Create new constant" completion item.
+-   **Build**: no change to `gulp build-report` — configurator-only feature.
+-   **Dependencies**: no new external dependencies.
diff --git a/openspec/changes/inline-constant-creation/specs/inline-constant-creation/spec.md b/openspec/changes/inline-constant-creation/specs/inline-constant-creation/spec.md
new file mode 100644
index 00000000..14e8c1c3
--- /dev/null
+++ b/openspec/changes/inline-constant-creation/specs/inline-constant-creation/spec.md
@@ -0,0 +1,105 @@
+## ADDED Requirements
+
+### Requirement: Autocomplete for `code` fields nested under `texts`
+
+The Configurator SHALL provide Monaco autocomplete suggestions whenever the cursor is positioned on a string value of a property named `code` that is nested (at any depth) under a property named `texts`. The `code` property MUST be nested under an intermediate object (e.g., `texts.header.code`, `texts.rowTotals.code`); a direct `texts.code` is not eligible.
+
+#### Scenario: Cursor on `texts.header.code`
+
+-   **WHEN** the cursor is inside the string value of `texts.header.code` in the JSON editor
+-   **THEN** the Monaco suggest widget SHALL open with a single "Create new constant" entry
+
+#### Scenario: Cursor on a non-`texts` `code` field
+
+-   **WHEN** the cursor is inside the string value of a `code` property that is NOT nested under `texts` (e.g., `dataElement.code`)
+-   **THEN** the Configurator SHALL NOT contribute inline-constant-creation suggestions
+
+#### Scenario: Cursor on a deeply nested `code` under `texts`
+
+-   **WHEN** the cursor is inside `texts.rowTotals.code` or any other `texts.*.code` path at any depth
+-   **THEN** the autocomplete SHALL behave the same as for top-level `texts.header.code`
+
+### Requirement: Create-new entry in autocomplete
+
+The autocomplete SHALL contribute a single "Create new constant" entry whenever it is eligible.
+
+#### Scenario: Entry is the only contribution
+
+-   **WHEN** the autocomplete opens on an eligible field
+-   **THEN** the inline-constant-creation provider SHALL contribute exactly one entry: "Create new constant"
+
+#### Scenario: User selects "Create new constant"
+
+-   **WHEN** the user selects the "Create new constant" entry
+-   **THEN** the Create Constant dialog SHALL open
+-   **AND** the cursor position at the time of selection SHALL be recorded for later insertion
+
+### Requirement: Create Constant dialog fields
+
+The Create Constant dialog SHALL collect: `name` (required), `shortName` (required, max 50 characters), `code` (required), and `description` (required). The dialog SHALL additionally emit `id: ""` (DHIS2 will assign it on save), `value: 0` (fixed — the numeric value is not meaningful for translation-key constants and is not editable in the UI), and `translations: []` (translation entry is deliberately out of scope for this change and will be added in a follow-up).
+
+#### Scenario: `shortName` auto-derivation
+
+-   **WHEN** the user types a `name` in the dialog and has not manually edited the `shortName` field
+-   **THEN** `shortName` SHALL be auto-filled as the upper-snake-case of `name`, truncated to 50 characters
+
+#### Scenario: `code` auto-derivation
+
+-   **WHEN** the user types a `name` and has not manually edited the `code` field
+-   **THEN** `code` SHALL be auto-filled as the upper-snake-case of `name` (no prefix, no truncation)
+
+#### Scenario: User overrides an auto-derived field
+
+-   **WHEN** the user manually edits `shortName` or `code`
+-   **THEN** subsequent changes to `name` SHALL NOT overwrite the manually-edited field
+
+#### Scenario: Value is fixed at zero
+
+-   **WHEN** the Create Constant dialog saves a new constant
+-   **THEN** the submitted constant SHALL have `value: 0` regardless of any other input (no `value` field is shown in the UI)
+
+### Requirement: Constant persistence via DHIS2 API
+
+On dialog save, the system SHALL persist the new constant to DHIS2 metadata via `ConstantRepository.save([constant], { post: true, export: false })`, where `constant.id === ""` signals "new entry" and `constant.translations === []` (DHIS2 assigns the UID server-side).
+
+#### Scenario: Successful creation inserts code in editor
+
+-   **WHEN** the dialog is saved and the DHIS2 API confirms the constant was created
+-   **THEN** the editor SHALL replace the string value at the recorded cursor position with the new `code`
+-   **AND** the dialog SHALL close
+
+#### Scenario: Duplicate code
+
+-   **WHEN** the DHIS2 API rejects creation because the `code` already exists
+-   **THEN** the dialog SHALL remain open and display an inline error identifying the duplicate code field
+
+#### Scenario: API failure
+
+-   **WHEN** the DHIS2 API returns any other error during creation
+-   **THEN** the dialog SHALL remain open and display the error message
+-   **AND** the editor content SHALL be unchanged
+
+### Requirement: Permission gating for constant creation
+
+The "Create new constant" affordance SHALL be gated on the current user holding the DHIS2 authority `F_CONSTANT_ADD`.
+
+#### Scenario: User lacks `F_CONSTANT_ADD`
+
+-   **WHEN** the current user does not hold the `F_CONSTANT_ADD` authority
+-   **THEN** the "Create new constant" autocomplete entry SHALL be marked deprecated with an explanatory hover message
+-   **AND** the Create Constant dialog cannot be opened
+
+#### Scenario: User holds `F_CONSTANT_ADD`
+
+-   **WHEN** the current user holds the `F_CONSTANT_ADD` authority
+-   **THEN** the "Create new constant" entry SHALL be selectable and opens the dialog
+
+### Requirement: Large-file mode compatibility
+
+Inline constant creation SHALL remain fully functional when the Configurator is in large-file mode (JSON schema validation disabled). To prevent Monaco's JSON-worker `completionItems` contribution from flooding the suggest widget on large files, the Configurator SHALL disable that contribution while `isLargeFile` is `true`.
+
+#### Scenario: Large configuration file
+
+-   **WHEN** the loaded configuration exceeds 100 KB and `isLargeFile` is `true`
+-   **THEN** the autocomplete provider SHALL still open on eligible `texts.*.code` fields
+-   **AND** creation SHALL still insert the new code into the editor on success
diff --git a/openspec/changes/inline-constant-creation/tasks.md b/openspec/changes/inline-constant-creation/tasks.md
new file mode 100644
index 00000000..4edf648e
--- /dev/null
+++ b/openspec/changes/inline-constant-creation/tasks.md
@@ -0,0 +1,59 @@
+## 1. Design
+
+-   [x] 1.1 [GD] Accept `openspec/designs/exports/image.png` (from ClickUp task 869ckzqxc) as the approved mockup for the autocomplete flow
+-   [x] 1.2 [GD] Wireframe the Create Constant dialog in `openspec/designs/wireframes/create-constant-dialog.pen` — fields: name, shortName, code, description, error state, disabled-by-permission state
+-   [x] 1.3 [GD] Export `openspec/designs/exports/create-constant-dialog-default.png` and `create-constant-dialog-error.png`
+
+## 2. Domain Layer
+
+-   [x] 2.1 [BE] Align `Constant` entity with the DHIS2 shape — already matched; `Constant` is the only type used (new entries carry `id: ""` and `translations: []`)
+-   [x] 2.2 [BE] `ConstantRepository.save(constants: Constant[], options)`; internal implementation splits on `id === ""` (new entries are POSTed with server-assigned UID; existing entries keep the pre-fetch-then-merge flow)
+-   [x] 2.3 [BE] Add code/shortName derivation utilities in `src/domain/common/entities/Constant.ts`: `deriveCode(name)`, `deriveShortName(name)` — pure, functional, deterministic
+-   [x] 2.4 [BE] Add `ConstantSaveError` as a tagged discriminated type in `src/domain/common/entities/ConstantSaveError.ts` with `isConstantSaveError` / `fieldError` helpers; carries structured `ErrorReportEntry[]` so the dialog can surface per-field errors
+-   [x] 2.5 [BE] Create `CreateConstantUseCase` in `src/domain/common/usecases/CreateConstantUseCase.ts` with `execute(constant: Constant)` returning `Promise<void>`; wraps `repository.save([constant])` and throws a `ConstantSaveError` on failure
+-   [x] 2.6 [BE] Unit test derivation utilities: standard names, special characters, consecutive underscores collapsed, shortName length cap at 50
+-   [x] 2.7 [BE] Unit test `CreateConstantUseCase`: delegates to `save` with the right options; throws structured field errors; falls back to single-message error when only `errorMessage` is set
+
+## 3. Data Layer
+
+-   [x] 3.1 [BE] Update `ConstantD2Repository.save` to split input into existing-vs-new; existing entries keep the pre-fetch-by-id merge, new entries go straight into the POST payload (no `id` field → DHIS2 assigns it server-side)
+-   [x] 3.2 [BE] Wire `CreateConstantUseCase` in `src/compositionRoot.ts` under `constants.create`
+-   [x] 3.3 [BE] Current user authorities exposed on `Config.currentUser.authorities` (populated by `Dhis2ConfigRepository.getCurrentUser` via `/me/authorization`). Helper `canCreateConstants(user)` in `src/domain/common/entities/User.ts`
+
+## 4. Monaco Completion Provider
+
+-   [x] 4.1 [FE] `registerInlineConstantCompletions(editor, monaco, options)` added in `src/webapp/reports/autogenerated-forms-configurator/monaco/registerInlineConstantCompletions.ts`
+-   [x] 4.2 [FE] JSON-path backward walker in `monaco/jsonPathAtCursor.ts`; returns the path or undefined
+-   [x] 4.3 [FE] Activation gate `isInlineConstantCodePosition` requires path ending in `code`, length ≥ 3, and `texts` as an ancestor at least two levels above
+-   [x] 4.4 [FE] Provider contributes a single "Create new constant" entry with `sortText: "0"`; `command` fires with the cursor `Range` so the Configurator can open the dialog
+-   [x] 4.5 [FE] If the user lacks `F_CONSTANT_ADD`, the entry is tagged `Deprecated` with a detail message and no command attached (no-op on selection)
+-   [x] 4.6 [FE] Provider registered in `Editor.tsx` via a `useEffect`; the `IDisposable` and any pending `setTimeout` are disposed on unmount and when `dataSetCode` / options change
+-   [x] 4.7 [FE] On large files (`isLargeFile === true`), `Editor.tsx` disables Monaco's JSON-worker `completionItems` contribution via `setModeConfiguration` so the create entry isn't drowned out by document-string scraping
+
+## 5. Create Constant Dialog
+
+-   [x] 5.1 [FE] `CreateConstantDialog.tsx` — uses `ConfirmationDialog` + MUI `TextField`s for the four fields
+-   [x] 5.2 [FE] `useCreateConstantForm` hook owns state, validation, and save side-effects; the component is presentation-only
+-   [x] 5.3 [FE] Auto-derivation wired: `shortName` via `deriveShortName(name)`, `code` via `deriveCode(name)`; per-field dirty flags stop derivation once the user edits
+-   [x] 5.4 [FE] Validation: name required, shortName required and ≤ 50 chars, code required, description required. No `value` field — dialog always submits `value: 0`
+-   [x] 5.5 [FE] On Save: calls `compositionRoot.constants.create(constant)`; on success, Configurator invokes `editorApi.insertAtRange` via the stored `Range`
+-   [x] 5.6 [FE] On failure: dialog stays open; per-field errors land on the matching form field, other errors show at the top
+
+## 6. Integration with Configurator
+
+-   [x] 6.1 [FE] `CreateConstantDialog` mounted in `Configurator.tsx`; open/close state driven by the "Create new" completion command and the dialog's own Save/Cancel
+-   [x] 6.2 [FE] Pending range tracked in `Configurator.tsx` so the editor can insert the new code at the original cursor position on save success
+
+## 7. Internationalisation
+
+-   [x] 7.1 [FE] All user-visible strings in `CreateConstantDialog` and the Monaco completion items wrapped in `i18n.t(...)`
+-   [x] 7.2 [FE] Run `yarn extract-pot && yarn update-po && yarn localize` to refresh `.po` files and locale JSON — **user action** (needs review of the generated `.po` diff and human translation of the new keys before merge)
+
+## 8. Specs & Verification
+
+-   [ ] 8.1 [BE] Confirm spec matches implementation before running `/opsx:archive` — recheck after the UI is smoke-tested
+-   [x] 8.2 [CR] `yarn lint` clean
+-   [x] 8.3 [CR] `yarn test` passes — full suite including `Constant.spec.ts`, `CreateConstantUseCase.spec.ts`, `Dhis2DataStoreDataForm.spec.ts`, `jsonPathAtCursor.spec.ts`
+-   [x] 8.4 [CR] `yarn build configurator` produces a valid build — **user action**
+-   [x] 8.5 [CR] `yarn build-autogenerated-forms` unaffected — **user action**
+-   [x] 8.6 [CR] Manual smoke test in the dev server: autocomplete on `texts.header.code`, create a constant, verify insertion; repeat with a user lacking `F_CONSTANT_ADD`; repeat on a large config (>100 KB) — **user action**
diff --git a/openspec/designs/exports/.gitkeep b/openspec/designs/exports/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openspec/designs/mockups/.gitkeep b/openspec/designs/mockups/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openspec/designs/wireframes/.gitkeep b/openspec/designs/wireframes/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openspec/specs/.gitkeep b/openspec/specs/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openspec/specs/inline-constant-creation/spec.md b/openspec/specs/inline-constant-creation/spec.md
new file mode 100644
index 00000000..af22a8dc
--- /dev/null
+++ b/openspec/specs/inline-constant-creation/spec.md
@@ -0,0 +1,75 @@
+## Purpose
+
+Allow the Configurator user to create a DHIS2 constant inline while editing a `texts.*.code` value, without leaving the editor.
+
+## Requirements
+
+### Requirement: Autocomplete for `code` fields nested under `texts`
+
+The Configurator SHALL provide Monaco autocomplete suggestions whenever the cursor is positioned on a string value of a property named `code` that is nested (at any depth) under a property named `texts`. A direct `texts.code` is not eligible — the `code` property must be nested under an intermediate object (e.g., `texts.header.code`, `texts.footer.code`, `texts.rowTotals.code`).
+
+#### Scenario: Cursor on a `texts.*.code` value
+
+-   **WHEN** the cursor is inside the string value of any `texts.*.code` path
+-   **THEN** the Monaco suggest widget SHALL open and contribute a single "Create new constant" entry
+
+#### Scenario: Cursor outside `texts.*.code`
+
+-   **WHEN** the cursor is inside any string value that is not a `texts.*.code`
+-   **THEN** the inline-constant-creation provider SHALL contribute no entries
+
+### Requirement: Create Constant dialog fields
+
+The Create Constant dialog SHALL collect: `name` (required), `shortName` (required, max 50 characters), `code` (required), and `description` (required). The dialog SHALL submit `id: ""` (DHIS2 assigns the UID server-side), `value: 0` (fixed; not editable), and `translations: []` (translation entry is a follow-up).
+
+#### Scenario: Auto-derivation of `shortName` and `code` from `name`
+
+-   **WHEN** the user types a `name` and has not manually edited `shortName` or `code`
+-   **THEN** `shortName` SHALL be the upper-snake-case of `name`, truncated to 50 characters
+-   **AND** `code` SHALL be the upper-snake-case of `name` (no truncation)
+
+#### Scenario: Manual edits override auto-derivation
+
+-   **WHEN** the user manually edits `shortName` or `code`
+-   **THEN** subsequent changes to `name` SHALL NOT overwrite the manually-edited field
+
+### Requirement: Constant persistence via DHIS2 API
+
+On dialog save, the system SHALL POST the new constant to DHIS2 via `ConstantRepository.save([constant], { post: true, export: false })`. On success the editor inserts the new `code` at the recorded cursor position. On failure (duplicate code, validation error, network error) the dialog stays open and surfaces the error.
+
+#### Scenario: Successful creation
+
+-   **WHEN** the API confirms the constant was created
+-   **THEN** the editor SHALL insert the new `code` at the recorded cursor position
+-   **AND** the dialog SHALL close
+
+#### Scenario: Per-field error from the API
+
+-   **WHEN** the API returns a typed error attributable to a specific field (e.g., duplicate `code`)
+-   **THEN** the dialog SHALL remain open and surface the message under the matching form field
+
+#### Scenario: General error from the API
+
+-   **WHEN** the API returns an error not attributable to a specific field
+-   **THEN** the dialog SHALL remain open and surface the message at the top of the form
+-   **AND** the editor content SHALL be unchanged
+
+### Requirement: Permission gating
+
+The "Create new constant" affordance SHALL be gated on the current user holding the DHIS2 authority `F_CONSTANT_ADD` (or `ALL`).
+
+#### Scenario: User lacks the authority
+
+-   **WHEN** the current user does not hold `F_CONSTANT_ADD`
+-   **THEN** the autocomplete entry SHALL be marked deprecated with the message "Requires F_CONSTANT_ADD authority"
+-   **AND** selecting it SHALL be a no-op
+
+### Requirement: Large-file mode compatibility
+
+Inline constant creation SHALL function on configurations of any size. On configurations classified as large (`isLargeFile` is `true`, i.e., size > 100 KB), the Configurator SHALL disable Monaco's JSON-worker `completionItems` contribution to keep the suggest widget focused on the create entry.
+
+#### Scenario: Large configuration file
+
+-   **WHEN** `isLargeFile` is `true`
+-   **THEN** the autocomplete provider SHALL still open on eligible `texts.*.code` fields
+-   **AND** the JSON-worker SHALL NOT contribute additional suggestions
diff --git a/src/compositionRoot.ts b/src/compositionRoot.ts
index e037c54f..611ecd6b 100644
--- a/src/compositionRoot.ts
+++ b/src/compositionRoot.ts
@@ -16,6 +16,7 @@ import { GetDataSetsUseCase } from "./domain/autogenerated-forms-configurator/us
 import { GetFormConfigUseCase } from "./domain/autogenerated-forms-configurator/usecases/GetFormConfigUseCase";
 import { SaveFormConfigUseCase } from "./domain/autogenerated-forms-configurator/usecases/SaveFormConfigUseCase";
 import { ImportConstantTranslationsUseCase } from "./domain/common/usecases/ImportConstantTranslationsUseCase";
+import { CreateConstantUseCase } from "./domain/common/usecases/CreateConstantUseCase";
 import { ConstantD2Repository } from "./data/ConstantD2Repository";
 import { ImportConstantJsonRepository } from "./data/ImportConstantJsonRepository";
 import { DataElementD2Repository } from "./data/DataElementD2Repository";
@@ -67,6 +68,7 @@ export function getCompositionRoot(api: D2Api) {
                 dataElementRepository,
                 exportDataElementConfigRepository
             ),
+            create: new CreateConstantUseCase(constantRepository),
         }),
         dataSet: getExecute({
             validate: new ValidateDatasetRulesUseCase(ruleRepository),
diff --git a/src/data/ConstantD2Repository.ts b/src/data/ConstantD2Repository.ts
index 0f8520a1..57bfe210 100644
--- a/src/data/ConstantD2Repository.ts
+++ b/src/data/ConstantD2Repository.ts
@@ -1,38 +1,75 @@
 import _ from "lodash";
 
-import { D2Api, MetadataResponse } from "../types/d2-api";
+import { D2Api, D2Constant, MetadataResponse, PartialModel } from "../types/d2-api";
 import { Constant } from "../domain/common/entities/Constant";
 import { getImportModeFromOptions, SaveOptions } from "../domain/common/entities/SaveOptions";
-import { Stats } from "../domain/common/entities/Stats";
+import { ErrorReportEntry, Stats } from "../domain/common/entities/Stats";
 import { ConstantRepository } from "../domain/common/repositories/ConstantRepository";
 import { promiseMap } from "../utils/promises";
 import { getErrorFromResponse } from "./common/utils/d2-api";
 import { writeFileSync } from "fs";
 
+const POST_CHUNK_SIZE = 100;
+
 export class ConstantD2Repository implements ConstantRepository {
     constructor(private api: D2Api) {}
 
-    async get(): Promise<Constant[]> {
-        const { objects: constants } = await this.api.models.constants
-            .get({ fields: constantFields, paging: false })
-            .getData();
+    async save(constants: Constant[], options: SaveOptions): Promise<Stats> {
+        if (constants.length === 0) return Stats.empty();
+
+        const constantsToSave = await this.buildConstantPayload(constants);
+        if (constantsToSave.length === 0) return Stats.empty();
+
+        const importMode = getImportModeFromOptions(options.post);
+        const chunkStats = await promiseMap(_.chunk(constantsToSave, POST_CHUNK_SIZE), async chunk => {
+            const d2PostResponse: Dhis2Response = await this.api.metadata
+                .post({ constants: chunk }, { importMode })
+                .getData();
+            const response = d2PostResponse.response ?? d2PostResponse;
+            return new Stats({
+                created: response.stats.created,
+                updated: response.stats.updated,
+                ignored: response.stats.ignored,
+                deleted: response.stats.deleted,
+                errorMessage: getErrorFromResponse(response.typeReports),
+                errorReports: extractErrorReports(response.typeReports),
+            });
+        });
 
-        return constants;
+        if (options.export) {
+            writeFileSync("constants.json", JSON.stringify({ constants: constantsToSave }, null, 4));
+        }
+        return Stats.combine(chunkStats);
     }
 
-    async save(constants: Constant[], options: SaveOptions): Promise<Stats> {
-        const ids = constants.map(constant => constant.id);
-        const result = await promiseMap(_.chunk(ids, 100), async constantIds => {
+    private async buildConstantPayload(constants: readonly Constant[]): Promise<PartialModel<D2Constant>[]> {
+        const existingConstants = constants.filter(constant => constant.id !== "");
+        const newConstants = constants.filter(constant => constant.id === "");
+
+        const newPayloads: PartialModel<D2Constant>[] = newConstants.map(constant => ({
+            code: constant.code,
+            description: constant.description,
+            name: constant.name,
+            shortName: constant.shortName,
+            value: constant.value,
+            translations: constant.translations,
+        }));
+
+        if (existingConstants.length === 0) return newPayloads;
+
+        const ids = existingConstants.map(constant => constant.id);
+        const existingResult = await promiseMap(_.chunk(ids, POST_CHUNK_SIZE), async constantIds => {
             const d2Response = await this.api.metadata
                 .get({ constants: { fields: { $owner: true }, filter: { id: { in: constantIds } } } })
                 .getData();
 
-            const constantsToSave = constantIds.map(constantId => {
+            return constantIds.map(constantId => {
                 const existingConstant = d2Response.constants.find(d2Constant => d2Constant.id === constantId);
-                const constant = constants.find(constant => constant.id === constantId);
+                const constant = existingConstants.find(constant => constant.id === constantId);
                 if (!constant) {
-                    throw Error(`Cannot found constant: ${constantId}`);
+                    throw Error(`Cannot find constant: ${constantId}`);
                 }
+
                 return {
                     ...(existingConstant || {}),
                     id: constant.id,
@@ -43,41 +80,24 @@ export class ConstantD2Repository implements ConstantRepository {
                     translations: constant.translations,
                 };
             });
-
-            const d2PostResponse: Dhis2Response = await this.api.metadata
-                .post({ constants: constantsToSave }, { importMode: getImportModeFromOptions(options.post) })
-                .getData();
-            const response = d2PostResponse.response ? d2PostResponse.response : d2PostResponse;
-            const stats = new Stats({
-                created: response.stats.created,
-                updated: response.stats.updated,
-                ignored: response.stats.ignored,
-                deleted: response.stats.deleted,
-                errorMessage: getErrorFromResponse(response.typeReports),
-            });
-            return { stats: stats, constants: constantsToSave };
         });
-        const allStats = result.flatMap(result => result.stats);
-        if (options.export) {
-            writeFileSync(
-                "constants.json",
-                JSON.stringify({ constants: result.flatMap(result => result.constants) }, null, 4)
-            );
-        }
-        return Stats.combine(allStats);
+
+        return [...existingResult.flat(), ...newPayloads];
     }
 }
 
+function extractErrorReports(typeReports: MetadataResponse["typeReports"]): ErrorReportEntry[] {
+    return typeReports.flatMap(typeReport =>
+        (typeReport.objectReports ?? []).flatMap(objectReport =>
+            (objectReport.errorReports ?? []).map(errorReport => ({
+                message: errorReport.message,
+                errorCode: errorReport.errorCode,
+                errorProperty: errorReport.errorProperty,
+            }))
+        )
+    );
+}
+
 type Dhis2Response = MetadataResponse & {
     response?: { stats: MetadataResponse["stats"]; typeReports: MetadataResponse["typeReports"] };
 };
-
-const constantFields = {
-    id: true,
-    name: true,
-    code: true,
-    description: true,
-    shortName: true,
-    translations: true,
-    value: true,
-};
diff --git a/src/data/common/Dhis2ConfigRepository.ts b/src/data/common/Dhis2ConfigRepository.ts
index fd36cc90..b055f733 100644
--- a/src/data/common/Dhis2ConfigRepository.ts
+++ b/src/data/common/Dhis2ConfigRepository.ts
@@ -80,6 +80,7 @@ export class Dhis2ConfigRepository implements ConfigRepository {
                 fields: {
                     id: true,
                     displayName: true,
+                    authorities: true,
                     dataViewOrganisationUnits: {
                         id: true,
                         code: true,
@@ -101,6 +102,7 @@ export class Dhis2ConfigRepository implements ConfigRepository {
             name: d2User.displayName,
             orgUnits: d2User.dataViewOrganisationUnits,
             userGroups: d2User.userGroups,
+            authorities: d2User.authorities,
             ...d2User.userCredentials,
         };
     }
diff --git a/src/domain/common/entities/Constant.ts b/src/domain/common/entities/Constant.ts
index 0a3b971f..181cde74 100644
--- a/src/domain/common/entities/Constant.ts
+++ b/src/domain/common/entities/Constant.ts
@@ -12,3 +12,20 @@ export type Constant = {
     translations: Translation[];
     value: number;
 };
+
+export const shortNameMaxLength = 50;
+
+export function deriveShortName(name: string): string {
+    return toUpperSnake(name).slice(0, shortNameMaxLength);
+}
+
+export function deriveCode(name: string): string {
+    return toUpperSnake(name);
+}
+
+function toUpperSnake(input: string): string {
+    return input
+        .replace(/[^a-zA-Z0-9]+/g, "_")
+        .replace(/^_+|_+$/g, "")
+        .toUpperCase();
+}
diff --git a/src/domain/common/entities/ConstantSaveError.ts b/src/domain/common/entities/ConstantSaveError.ts
new file mode 100644
index 00000000..6c84f461
--- /dev/null
+++ b/src/domain/common/entities/ConstantSaveError.ts
@@ -0,0 +1,27 @@
+import { Constant } from "./Constant";
+import { ErrorReportEntry } from "./Stats";
+import { Maybe } from "../../../utils/ts-utils";
+
+export type ConstantField = keyof Pick<Constant, "name" | "shortName" | "code" | "description">;
+
+export type ConstantSaveError = {
+    readonly _tag: "ConstantSaveError";
+    readonly reports: ReadonlyArray<ErrorReportEntry>;
+    readonly message: string;
+};
+
+export function constantSaveError(reports: ReadonlyArray<ErrorReportEntry>): ConstantSaveError {
+    return {
+        _tag: "ConstantSaveError",
+        reports,
+        message: reports.map(report => report.message).join("\n") || "Unknown error",
+    };
+}
+
+export function isConstantSaveError(value: unknown): value is ConstantSaveError {
+    return typeof value === "object" && value !== null && (value as { _tag?: unknown })._tag === "ConstantSaveError";
+}
+
+export function fieldError(error: ConstantSaveError, field: ConstantField): Maybe<string> {
+    return error.reports.find(report => report.errorProperty === field)?.message;
+}
diff --git a/src/domain/common/entities/Stats.ts b/src/domain/common/entities/Stats.ts
index 5d14f138..3b917a52 100644
--- a/src/domain/common/entities/Stats.ts
+++ b/src/domain/common/entities/Stats.ts
@@ -1,9 +1,16 @@
+export type ErrorReportEntry = {
+    message: string;
+    errorCode: string;
+    errorProperty: string;
+};
+
 type StatsAttrs = {
     created: number;
     ignored: number;
     updated: number;
     deleted: number;
     errorMessage: string;
+    errorReports?: readonly ErrorReportEntry[];
 };
 
 export class Stats {
@@ -12,6 +19,7 @@ export class Stats {
     public readonly updated: number;
     public readonly deleted: number;
     public readonly errorMessage: string;
+    public readonly errorReports: readonly ErrorReportEntry[];
 
     constructor(attrs: StatsAttrs) {
         this.created = attrs.created;
@@ -19,21 +27,25 @@ export class Stats {
         this.updated = attrs.updated;
         this.deleted = attrs.deleted;
         this.errorMessage = attrs.errorMessage;
+        this.errorReports = attrs.errorReports ?? [];
     }
 
     static combine(stats: Stats[]): Stats {
-        return stats.reduce((acum, stat) => {
-            return {
-                errorMessage: `${acum.errorMessage}${stat.errorMessage}`,
-                created: acum.created + stat.created,
-                ignored: acum.ignored + stat.ignored,
-                updated: acum.updated + stat.updated,
-                deleted: acum.deleted + stat.deleted,
-            };
-        }, Stats.empty());
+        return stats.reduce(
+            (acum, stat) =>
+                new Stats({
+                    errorMessage: [acum.errorMessage, stat.errorMessage].filter(Boolean).join("\n"),
+                    created: acum.created + stat.created,
+                    ignored: acum.ignored + stat.ignored,
+                    updated: acum.updated + stat.updated,
+                    deleted: acum.deleted + stat.deleted,
+                    errorReports: [...acum.errorReports, ...stat.errorReports],
+                }),
+            Stats.empty()
+        );
     }
 
     static empty(): Stats {
-        return { deleted: 0, errorMessage: "", created: 0, ignored: 0, updated: 0 };
+        return new Stats({ deleted: 0, errorMessage: "", created: 0, ignored: 0, updated: 0 });
     }
 }
diff --git a/src/domain/common/entities/User.ts b/src/domain/common/entities/User.ts
index fcc860e8..93fe8e57 100644
--- a/src/domain/common/entities/User.ts
+++ b/src/domain/common/entities/User.ts
@@ -8,4 +8,11 @@ export interface User {
     orgUnits: OrgUnit[];
     userRoles: NamedRef[];
     userGroups: NamedRef[];
+    authorities: ReadonlyArray<string>;
+}
+
+export const CONSTANT_ADD_AUTHORITY = "F_CONSTANT_ADD";
+
+export function canCreateConstants(user: User): boolean {
+    return user.authorities.includes("ALL") || user.authorities.includes(CONSTANT_ADD_AUTHORITY);
 }
diff --git a/src/domain/common/entities/__tests__/Constant.spec.ts b/src/domain/common/entities/__tests__/Constant.spec.ts
new file mode 100644
index 00000000..8373f564
--- /dev/null
+++ b/src/domain/common/entities/__tests__/Constant.spec.ts
@@ -0,0 +1,37 @@
+import { deriveCode, deriveShortName, shortNameMaxLength } from "../Constant";
+
+describe("Constant", () => {
+    describe("deriveShortName", () => {
+        it("converts a plain name to upper snake case", () => {
+            expect(deriveShortName("Footnote National Policies")).toBe("FOOTNOTE_NATIONAL_POLICIES");
+        });
+
+        it("replaces special characters with underscores", () => {
+            expect(deriveShortName("my-header (v2)")).toBe("MY_HEADER_V2");
+        });
+
+        it("collapses consecutive separators", () => {
+            expect(deriveShortName("a   b__c--d")).toBe("A_B_C_D");
+        });
+
+        it("trims leading and trailing separators", () => {
+            expect(deriveShortName("  __hello__  ")).toBe("HELLO");
+        });
+
+        it("truncates long names to the shortName max length", () => {
+            const longName = "a".repeat(shortNameMaxLength + 20);
+            expect(deriveShortName(longName).length).toBe(shortNameMaxLength);
+        });
+    });
+
+    describe("deriveCode", () => {
+        it("converts a plain name to upper snake case", () => {
+            expect(deriveCode("Footnote National Policies")).toBe("FOOTNOTE_NATIONAL_POLICIES");
+        });
+
+        it("is not truncated unlike shortName", () => {
+            const longName = "a".repeat(100);
+            expect(deriveCode(longName).length).toBe(100);
+        });
+    });
+});
diff --git a/src/domain/common/entities/__tests__/configFixtures.ts b/src/domain/common/entities/__tests__/configFixtures.ts
index 032b5c0c..cf02c890 100644
--- a/src/domain/common/entities/__tests__/configFixtures.ts
+++ b/src/domain/common/entities/__tests__/configFixtures.ts
@@ -11,6 +11,7 @@ export const config: Config = {
         orgUnits: orgUnits,
         userRoles: [],
         userGroups: [],
+        authorities: [],
     },
     sqlViews: undefined,
     pairedDataElementsByDataSet: undefined,
diff --git a/src/domain/common/repositories/ConstantRepository.ts b/src/domain/common/repositories/ConstantRepository.ts
index 7cf95c1f..9c3fafb1 100644
--- a/src/domain/common/repositories/ConstantRepository.ts
+++ b/src/domain/common/repositories/ConstantRepository.ts
@@ -3,6 +3,5 @@ import { SaveOptions } from "../entities/SaveOptions";
 import { Stats } from "../entities/Stats";
 
 export interface ConstantRepository {
-    get(): Promise<Constant[]>;
     save(constants: Constant[], options: SaveOptions): Promise<Stats>;
 }
diff --git a/src/domain/common/usecases/CreateConstantUseCase.ts b/src/domain/common/usecases/CreateConstantUseCase.ts
new file mode 100644
index 00000000..f911cb3a
--- /dev/null
+++ b/src/domain/common/usecases/CreateConstantUseCase.ts
@@ -0,0 +1,17 @@
+import { Constant } from "../entities/Constant";
+import { constantSaveError } from "../entities/ConstantSaveError";
+import { ConstantRepository } from "../repositories/ConstantRepository";
+
+export class CreateConstantUseCase {
+    constructor(private constantRepository: ConstantRepository) {}
+
+    async execute(input: Constant): Promise<void> {
+        const stats = await this.constantRepository.save([input], { post: true, export: false });
+        if (stats.errorReports.length > 0) {
+            throw constantSaveError(stats.errorReports);
+        }
+        if (stats.errorMessage) {
+            throw constantSaveError([{ message: stats.errorMessage, errorCode: "", errorProperty: "" }]);
+        }
+    }
+}
diff --git a/src/domain/common/usecases/__tests__/CreateConstantUseCase.spec.ts b/src/domain/common/usecases/__tests__/CreateConstantUseCase.spec.ts
new file mode 100644
index 00000000..2cef2106
--- /dev/null
+++ b/src/domain/common/usecases/__tests__/CreateConstantUseCase.spec.ts
@@ -0,0 +1,86 @@
+import { anything, deepEqual, instance, mock, verify, when } from "ts-mockito";
+import { CreateConstantUseCase } from "../CreateConstantUseCase";
+import { Constant } from "../../entities/Constant";
+import { ConstantRepository } from "../../repositories/ConstantRepository";
+import { ConstantD2Repository } from "../../../../data/ConstantD2Repository";
+import { isConstantSaveError } from "../../entities/ConstantSaveError";
+import { Stats } from "../../entities/Stats";
+
+let mockConstantRepository: ConstantRepository;
+
+const newConstant: Constant = {
+    id: "",
+    name: "Footnote National Policies",
+    shortName: "FOOTNOTE_NATIONAL_POLICIES",
+    code: "MAL_FOOTNOTE_NATIONAL_POLICIES",
+    description: "Policy notes",
+    value: 0,
+    translations: [],
+};
+
+const okStats = new Stats({ created: 1, updated: 0, ignored: 0, deleted: 0, errorMessage: "" });
+
+describe("CreateConstantUseCase", () => {
+    beforeEach(() => {
+        mockConstantRepository = mock<ConstantRepository>(ConstantD2Repository);
+    });
+
+    it("delegates to ConstantRepository.save with post=true and resolves on success", async () => {
+        when(mockConstantRepository.save(anything(), anything())).thenResolve(okStats);
+        const useCase = new CreateConstantUseCase(instance(mockConstantRepository));
+
+        await useCase.execute(newConstant);
+
+        verify(mockConstantRepository.save(deepEqual([newConstant]), deepEqual({ post: true, export: false }))).once();
+    });
+
+    it("throws ConstantSaveError exposing structured field errors when the import fails", async () => {
+        const failStats = new Stats({
+            created: 0,
+            updated: 0,
+            ignored: 1,
+            deleted: 0,
+            errorMessage: "Property `code` requires unique value",
+            errorReports: [
+                {
+                    message: "Property `code` requires unique value",
+                    errorCode: "E5003",
+                    errorProperty: "code",
+                },
+            ],
+        });
+        when(mockConstantRepository.save(anything(), anything())).thenResolve(failStats);
+        const useCase = new CreateConstantUseCase(instance(mockConstantRepository));
+
+        const thrown = await useCase.execute(newConstant).then(
+            () => undefined,
+            (error: unknown) => error
+        );
+        expect(isConstantSaveError(thrown)).toBe(true);
+        if (!isConstantSaveError(thrown)) return;
+        expect(thrown.reports).toEqual([
+            { message: "Property `code` requires unique value", errorCode: "E5003", errorProperty: "code" },
+        ]);
+    });
+
+    it("falls back to a single-entry ConstantSaveError when only errorMessage is set", async () => {
+        const failStats = new Stats({
+            created: 0,
+            updated: 0,
+            ignored: 1,
+            deleted: 0,
+            errorMessage: "Constant code already exists",
+        });
+        when(mockConstantRepository.save(anything(), anything())).thenResolve(failStats);
+        const useCase = new CreateConstantUseCase(instance(mockConstantRepository));
+
+        const thrown = await useCase.execute(newConstant).then(
+            () => undefined,
+            (error: unknown) => error
+        );
+        expect(isConstantSaveError(thrown)).toBe(true);
+        if (!isConstantSaveError(thrown)) return;
+        expect(thrown.message).toBe("Constant code already exists");
+        expect(thrown.reports).toEqual([{ message: "Constant code already exists", errorCode: "", errorProperty: "" }]);
+    });
+});
diff --git a/src/webapp/reports/autogenerated-forms-configurator/Configurator.tsx b/src/webapp/reports/autogenerated-forms-configurator/Configurator.tsx
index 6b8697fb..5f10c5eb 100644
--- a/src/webapp/reports/autogenerated-forms-configurator/Configurator.tsx
+++ b/src/webapp/reports/autogenerated-forms-configurator/Configurator.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { Button, makeStyles } from "@material-ui/core";
 import { DataSetFilter } from "./DataSetFilter";
-import { Editor } from "./Editor";
+import { Editor, EditorApi } from "./Editor";
 import i18n from "@eyeseetea/d2-ui-components/locales";
 import { useConfigurator } from "./hooks/useConfigurator";
 import logo from "../../components/share/logo-eyeseetea.png";
@@ -10,12 +10,25 @@ import { ConfirmationDialog } from "@eyeseetea/d2-ui-components";
 import { useBooleanState } from "../../utils/use-boolean";
 import { useFilters } from "./hooks/useFilters";
 import { LoadingOverlay } from "../../components/loading-overlay/LoadingOverlay";
+import { useAppContext } from "../../contexts/app-context";
+import { canCreateConstants } from "../../../domain/common/entities/User";
+import { CreateConstantDialog } from "./CreateConstantDialog";
+import { InlineConstantCompletionsOptions } from "./monaco/registerInlineConstantCompletions";
+import { IRange } from "./monaco/types";
+import { Maybe } from "../../../utils/ts-utils";
 
 const AutogeneratedFormConfigurator: React.FC = () => {
+    const { config } = useAppContext();
+    const canCreate = useMemo(() => canCreateConstants(config.currentUser), [config.currentUser]);
+
     const [isCreateConfigDialogOpen, { enable: openCreateConfigDialog, disable: closeCreateConfigDialog }] =
         useBooleanState(false);
     const [isDeleteConfigDialogOpen, { enable: openDeleteConfigDialog, disable: closeDeleteConfigDialog }] =
         useBooleanState(false);
+    const [isCreateConstantDialogOpen, setCreateConstantDialogOpen] = useState(false);
+    const [pendingRange, setPendingRange] = useState<Maybe<IRange>>();
+
+    const editorApiRef = useRef<EditorApi | null>(null);
 
     const {
         configValue,
@@ -38,6 +51,34 @@ const AutogeneratedFormConfigurator: React.FC = () => {
     const { dataSets: dataSetItems, newDataSets: newDataSetItems } = useFilters(dataSetCode, updateLoadingState);
     const classes = useStyles();
 
+    const handleRequestCreateConstant = useCallback<InlineConstantCompletionsOptions["onRequestCreate"]>(args => {
+        setPendingRange(args.range);
+        setCreateConstantDialogOpen(true);
+    }, []);
+
+    const handleCreateConstantSuccess = useCallback(
+        (code: string) => {
+            if (pendingRange) {
+                editorApiRef.current?.insertAtRange(pendingRange, code);
+            }
+            setCreateConstantDialogOpen(false);
+            setPendingRange(undefined);
+        },
+        [pendingRange]
+    );
+
+    const inlineConstantsOptions = useMemo<InlineConstantCompletionsOptions>(
+        () => ({
+            canCreate,
+            onRequestCreate: handleRequestCreateConstant,
+        }),
+        [canCreate, handleRequestCreateConstant]
+    );
+
+    const handleEditorReady = useCallback((api: EditorApi) => {
+        editorApiRef.current = api;
+    }, []);
+
     return (
         <Container>
             <LoadingOverlay isLoading={isLoading} text={i18n.t("Loading...")} />
@@ -60,6 +101,8 @@ const AutogeneratedFormConfigurator: React.FC = () => {
                 dataSetCode={dataSetCode}
                 updateConfigValue={updateConfigValue}
                 updateJsonValidity={updateJsonValidity}
+                inlineConstantsOptions={inlineConstantsOptions}
+                onEditorReady={handleEditorReady}
             />
 
             <ButtonGroup>
@@ -76,6 +119,13 @@ const AutogeneratedFormConfigurator: React.FC = () => {
                 )}
             </ButtonGroup>
 
+            <CreateConstantDialog
+                open={isCreateConstantDialogOpen}
+                canCreate={canCreate}
+                onClose={() => setCreateConstantDialogOpen(false)}
+                onSuccess={handleCreateConstantSuccess}
+            />
+
             <ConfirmationDialog
                 open={isCreateConfigDialogOpen}
                 title={i18n.t("Add new data form configuration")}
diff --git a/src/webapp/reports/autogenerated-forms-configurator/CreateConstantDialog.tsx b/src/webapp/reports/autogenerated-forms-configurator/CreateConstantDialog.tsx
new file mode 100644
index 00000000..7a2656a1
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/CreateConstantDialog.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import styled from "styled-components";
+import { TextField } from "@material-ui/core";
+import { ConfirmationDialog } from "@eyeseetea/d2-ui-components";
+import i18n from "@eyeseetea/d2-ui-components/locales";
+import { shortNameMaxLength } from "../../../domain/common/entities/Constant";
+import { useCreateConstantForm } from "./hooks/useCreateConstantForm";
+
+type CreateConstantDialogProps = {
+    open: boolean;
+    canCreate: boolean;
+    onClose: () => void;
+    onSuccess: (code: string) => void;
+};
+
+export const CreateConstantDialog: React.FC<CreateConstantDialogProps> = React.memo(props => {
+    const { open, canCreate, onClose } = props;
+    const form = useCreateConstantForm(props);
+
+    return (
+        <ConfirmationDialog
+            open={open}
+            title={i18n.t("Create new constant")}
+            cancelText={i18n.t("Cancel")}
+            saveText={i18n.t("Save")}
+            disableSave={form.disableSave}
+            onClose={onClose}
+            onCancel={onClose}
+            onSave={form.onSave}
+            fullWidth
+            maxWidth="sm"
+        >
+            <Form>
+                {!canCreate && (
+                    <ErrorMessage>
+                        {i18n.t(
+                            "You do not have permission to create constants. Ask your administrator for the F_CONSTANT_ADD authority."
+                        )}
+                    </ErrorMessage>
+                )}
+                {form.generalError && <ErrorMessage>{form.generalError}</ErrorMessage>}
+
+                <TextField
+                    label={i18n.t("Name")}
+                    value={form.name}
+                    onChange={event => form.onNameChange(event.target.value)}
+                    error={Boolean(form.fieldErrors.name)}
+                    helperText={form.fieldErrors.name}
+                    required
+                    fullWidth
+                    disabled={!canCreate || form.isSaving}
+                />
+                <TextField
+                    label={i18n.t("Short name")}
+                    value={form.shortName}
+                    onChange={event => form.onShortNameChange(event.target.value)}
+                    error={Boolean(form.fieldErrors.shortName)}
+                    helperText={
+                        form.fieldErrors.shortName ??
+                        i18n.t("Auto-filled from name. Max {{max}} characters.", { max: shortNameMaxLength })
+                    }
+                    required
+                    fullWidth
+                    inputProps={{ maxLength: shortNameMaxLength }}
+                    disabled={!canCreate || form.isSaving}
+                />
+                <TextField
+                    label={i18n.t("Code")}
+                    value={form.code}
+                    onChange={event => form.onCodeChange(event.target.value)}
+                    error={Boolean(form.fieldErrors.code)}
+                    helperText={form.fieldErrors.code ?? i18n.t("Auto-filled from name")}
+                    required
+                    fullWidth
+                    disabled={!canCreate || form.isSaving}
+                />
+                <TextField
+                    label={i18n.t("Description")}
+                    value={form.description}
+                    onChange={event => form.onDescriptionChange(event.target.value)}
+                    error={Boolean(form.fieldErrors.description)}
+                    helperText={form.fieldErrors.description}
+                    required
+                    multiline
+                    minRows={2}
+                    fullWidth
+                    disabled={!canCreate || form.isSaving}
+                />
+            </Form>
+        </ConfirmationDialog>
+    );
+});
+
+const Form = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 0;
+`;
+
+const ErrorMessage = styled.div`
+    padding: 0.5rem 1rem;
+    background-color: #ffebee;
+    color: #c62828;
+    border: 1px solid #ef9a9a;
+    border-radius: 4px;
+    font-size: 0.875rem;
+`;
diff --git a/src/webapp/reports/autogenerated-forms-configurator/Editor.tsx b/src/webapp/reports/autogenerated-forms-configurator/Editor.tsx
index 4643b389..5c938cf5 100644
--- a/src/webapp/reports/autogenerated-forms-configurator/Editor.tsx
+++ b/src/webapp/reports/autogenerated-forms-configurator/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback } from "react";
+import React, { useEffect, useRef, useCallback, useState } from "react";
 import styled from "styled-components";
 import MonacoEditor, { Monaco, loader } from "@monaco-editor/react";
 import { CircularProgress } from "material-ui";
@@ -8,18 +8,31 @@ import { Code } from "../../../domain/common/entities/Base";
 import i18n from "../../../locales";
 import { DEFAULT_JSON_VALUE } from "./hooks/useConfigurator";
 import { useAutogenEditor } from "./hooks/useAutogenEditor";
+import {
+    InlineConstantCompletionsOptions,
+    registerInlineConstantCompletions,
+} from "./monaco/registerInlineConstantCompletions";
+import { CodeEditor, IRange } from "./monaco/types";
+
+export type EditorApi = {
+    insertAtRange: (range: IRange, text: string) => void;
+};
 
 export type EditorProps = {
     dataSetCode: Code;
     configValue: string;
     updateConfigValue: (value: string) => void;
     updateJsonValidity: (isValid: boolean) => void;
+    inlineConstantsOptions?: InlineConstantCompletionsOptions;
+    onEditorReady?: (api: EditorApi) => void;
 };
 
 export const Editor: React.FC<EditorProps> = React.memo(props => {
-    const { dataSetCode, configValue } = props;
+    const { dataSetCode, configValue, inlineConstantsOptions, onEditorReady } = props;
 
     const valueGetter = useRef<Monaco>();
+    const [editorInstance, setEditorInstance] = useState<CodeEditor>();
+    const [monacoInstance, setMonacoInstance] = useState<Monaco>();
 
     const { isProcessing, error } = useJsonProcessor();
     const { editorOptions, isLargeFile, handleChange, handleEditorDidMount, handleEditorValidation } = useAutogenEditor(
@@ -36,6 +49,18 @@ export const Editor: React.FC<EditorProps> = React.memo(props => {
                 };
 
                 monaco.languages.json.jsonDefaults.setDiagnosticsOptions(diagnosticOptions);
+                monaco.languages.json.jsonDefaults.setModeConfiguration({
+                    documentFormattingEdits: true,
+                    documentRangeFormattingEdits: true,
+                    completionItems: !isLargeFile,
+                    hovers: true,
+                    documentSymbols: true,
+                    tokens: true,
+                    colors: true,
+                    foldingRanges: true,
+                    diagnostics: !isLargeFile,
+                    selectionRanges: true,
+                });
             })
             .catch(error => console.error("Monaco initialization error:", error));
     }, [dataSetCode, isLargeFile]);
@@ -44,6 +69,27 @@ export const Editor: React.FC<EditorProps> = React.memo(props => {
         valueGetter.current = _valueGetter;
     }, []);
 
+    const handleMount = useCallback(
+        (editor: CodeEditor, monaco: Monaco) => {
+            setEditorInstance(editor);
+            setMonacoInstance(monaco);
+            handleEditorDidMount(editor, monaco);
+            onEditorReady?.({
+                insertAtRange: (range, text) => {
+                    editor.executeEdits("inline-constants", [{ range, text, forceMoveMarkers: true }]);
+                    editor.focus();
+                },
+            });
+        },
+        [handleEditorDidMount, onEditorReady]
+    );
+
+    useEffect(() => {
+        if (!editorInstance || !monacoInstance || !inlineConstantsOptions) return;
+        const disposer = registerInlineConstantCompletions(editorInstance, monacoInstance, inlineConstantsOptions);
+        return () => disposer.dispose();
+    }, [editorInstance, monacoInstance, inlineConstantsOptions]);
+
     if (error)
         return (
             <ErrorContainer>
@@ -77,7 +123,7 @@ export const Editor: React.FC<EditorProps> = React.memo(props => {
                 options={editorOptions}
                 onValidate={handleEditorValidation}
                 beforeMount={handleEditorBeforeMount}
-                onMount={handleEditorDidMount}
+                onMount={handleMount}
             />
         </EditorContainer>
     );
diff --git a/src/webapp/reports/autogenerated-forms-configurator/hooks/useAutogenEditor.ts b/src/webapp/reports/autogenerated-forms-configurator/hooks/useAutogenEditor.ts
index f0510876..aaf9f44d 100644
--- a/src/webapp/reports/autogenerated-forms-configurator/hooks/useAutogenEditor.ts
+++ b/src/webapp/reports/autogenerated-forms-configurator/hooks/useAutogenEditor.ts
@@ -3,6 +3,7 @@ import { Monaco } from "@monaco-editor/react";
 import { EditorProps } from "../Editor";
 import { useJsonProcessor } from "./useJsonProcessor";
 import { DEFAULT_JSON_VALUE } from "./useConfigurator";
+import { CodeEditor } from "../monaco/types";
 import { Maybe } from "../../../../utils/ts-utils";
 
 type Marker = Record<string, unknown>;
@@ -14,7 +15,7 @@ type AutogenEditorState = {
     editorOptions: Monaco["options"];
     isLargeFile: boolean;
     handleChange: (value: Maybe<string>) => void;
-    handleEditorDidMount: (editor: Monaco["editor"], monaco: Monaco) => void;
+    handleEditorDidMount: (editor: CodeEditor, monaco: Monaco) => void;
     handleEditorValidation: (markers: Marker[]) => void;
     processingError: Maybe<string>;
 };
@@ -50,6 +51,7 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
             folding: !isHugeFile,
             lineNumbers: "on" as const,
             renderWhitespace: isLargeFile ? ("none" as const) : ("selection" as const),
+            quickSuggestions: { other: true, comments: false, strings: true },
             ...(isHugeFile && {
                 renderValidationDecorations: "off" as const,
                 occurrencesHighlight: false,
@@ -86,7 +88,7 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
                     return;
                 }
 
-                if (jsonContent.length > LARGE_FILE_SIZE) {
+                if (calculateFileSizeInKB(jsonContent) > LARGE_FILE_SIZE) {
                     try {
                         JSON.parse(jsonContent);
                         updateJsonValidity(true);
@@ -130,7 +132,7 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
     );
 
     const handleEditorDidMount = useCallback(
-        (editor: Monaco["editor"], monaco: Monaco) => {
+        (editor: CodeEditor, monaco: Monaco) => {
             if (isLargeFile) {
                 editor.updateOptions({
                     smoothScrolling: false,
@@ -139,8 +141,8 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
                 });
             }
 
-            const fileSize = configValue?.length || 0;
-            if (fileSize < HUGE_FILE_SIZE) {
+            const fileSizeKB = calculateFileSizeInKB(configValue || "");
+            if (fileSizeKB < HUGE_FILE_SIZE) {
                 editor.onKeyUp((e: { keyCode: number }) => {
                     try {
                         const position = editor.getPosition();
@@ -175,7 +177,7 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
                 }, validationDebounceMs);
             });
         },
-        [isLargeFile, configValue?.length, validationDebounceMs, updateJsonValidity]
+        [isLargeFile, configValue, validationDebounceMs, updateJsonValidity]
     );
 
     const handleEditorValidation = useCallback(
@@ -214,10 +216,4 @@ export function useAutogenEditor(props: AutogenEditorProps): AutogenEditorState
 const LARGE_FILE_SIZE = 100; // 100KB
 const HUGE_FILE_SIZE = 500; // 500KB
 
-function calculateFileSizeInKB(input: string): number {
-    const encoder = new TextEncoder();
-    const sizeInBytes = encoder.encode(input).length;
-    const sizeInKB = sizeInBytes / 1024;
-
-    return sizeInKB;
-}
+const calculateFileSizeInKB = (input: string): number => new TextEncoder().encode(input).length / 1024;
diff --git a/src/webapp/reports/autogenerated-forms-configurator/hooks/useCreateConstantForm.ts b/src/webapp/reports/autogenerated-forms-configurator/hooks/useCreateConstantForm.ts
new file mode 100644
index 00000000..e702b404
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/hooks/useCreateConstantForm.ts
@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useState } from "react";
+import i18n from "@eyeseetea/d2-ui-components/locales";
+import { Constant, deriveCode, deriveShortName, shortNameMaxLength } from "../../../../domain/common/entities/Constant";
+import { ConstantField, fieldError, isConstantSaveError } from "../../../../domain/common/entities/ConstantSaveError";
+import { Maybe } from "../../../../utils/ts-utils";
+import { useAppContext } from "../../../contexts/app-context";
+
+export type CreateConstantFormProps = {
+    open: boolean;
+    canCreate: boolean;
+    onSuccess: (code: string) => void;
+};
+
+export type CreateConstantFormState = {
+    name: string;
+    shortName: string;
+    code: string;
+    description: string;
+    fieldErrors: Partial<Record<ConstantField, string>>;
+    generalError: Maybe<string>;
+    isSaving: boolean;
+    disableSave: boolean;
+    onNameChange: (value: string) => void;
+    onShortNameChange: (value: string) => void;
+    onCodeChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onSave: () => Promise<void>;
+};
+
+export function useCreateConstantForm(props: CreateConstantFormProps): CreateConstantFormState {
+    const { open, canCreate, onSuccess } = props;
+    const { compositionRoot } = useAppContext();
+
+    const [name, setName] = useState("");
+    const [shortName, setShortName] = useState("");
+    const [shortNameDirty, setShortNameDirty] = useState(false);
+    const [code, setCode] = useState("");
+    const [codeDirty, setCodeDirty] = useState(false);
+    const [description, setDescription] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const [generalError, setGeneralError] = useState<Maybe<string>>();
+    const [fieldErrors, setFieldErrors] = useState<Partial<Record<ConstantField, string>>>({});
+
+    useEffect(() => {
+        if (!open) {
+            setName("");
+            setShortName("");
+            setShortNameDirty(false);
+            setCode("");
+            setCodeDirty(false);
+            setDescription("");
+            setIsSaving(false);
+            setGeneralError(undefined);
+            setFieldErrors({});
+        }
+    }, [open]);
+
+    const onNameChange = useCallback(
+        (next: string) => {
+            setName(next);
+            if (!shortNameDirty) setShortName(deriveShortName(next));
+            if (!codeDirty) setCode(deriveCode(next));
+        },
+        [shortNameDirty, codeDirty]
+    );
+
+    const onShortNameChange = useCallback((next: string) => {
+        setShortNameDirty(true);
+        setShortName(next);
+    }, []);
+
+    const onCodeChange = useCallback((next: string) => {
+        setCodeDirty(true);
+        setCode(next);
+    }, []);
+
+    const onDescriptionChange = useCallback((next: string) => {
+        setDescription(next);
+    }, []);
+
+    const validate = useCallback((): boolean => {
+        const messages: Record<ConstantField, Maybe<string>> = {
+            name: name.trim() ? undefined : i18n.t("Name is required"),
+            shortName: !shortName.trim()
+                ? i18n.t("Short name is required")
+                : shortName.length > shortNameMaxLength
+                ? i18n.t("Short name must be {{max}} characters or fewer", { max: shortNameMaxLength })
+                : undefined,
+            code: code.trim() ? undefined : i18n.t("Code is required"),
+            description: description.trim() ? undefined : i18n.t("Description is required"),
+        };
+        const errors = Object.fromEntries(
+            Object.entries(messages).filter(([, value]) => value !== undefined)
+        ) as Partial<Record<ConstantField, string>>;
+        setFieldErrors(errors);
+        return Object.keys(errors).length === 0;
+    }, [name, shortName, code, description]);
+
+    const onSave = useCallback(async () => {
+        setGeneralError(undefined);
+        if (!validate()) return;
+
+        const constant: Constant = {
+            id: "",
+            name: name.trim(),
+            shortName: shortName.trim(),
+            code: code.trim(),
+            description: description.trim(),
+            value: 0,
+            translations: [],
+        };
+
+        setIsSaving(true);
+        try {
+            await compositionRoot.constants.create(constant);
+            onSuccess(constant.code);
+        } catch (error) {
+            if (isConstantSaveError(error)) {
+                const saveError = error;
+                const fields: ReadonlyArray<ConstantField> = ["name", "shortName", "code", "description"];
+                const fieldUpdates = Object.fromEntries(
+                    fields
+                        .map(field => [field, fieldError(saveError, field)] as const)
+                        .filter(([, message]) => message !== undefined)
+                );
+                if (Object.keys(fieldUpdates).length > 0) {
+                    setFieldErrors(prev => ({ ...prev, ...fieldUpdates }));
+                } else {
+                    setGeneralError(saveError.message);
+                }
+            } else {
+                setGeneralError(error instanceof Error ? error.message : String(error));
+            }
+        } finally {
+            setIsSaving(false);
+        }
+    }, [validate, name, shortName, code, description, compositionRoot.constants, onSuccess]);
+
+    return {
+        name,
+        shortName,
+        code,
+        description,
+        fieldErrors,
+        generalError,
+        isSaving,
+        disableSave: !canCreate || isSaving,
+        onNameChange,
+        onShortNameChange,
+        onCodeChange,
+        onDescriptionChange,
+        onSave,
+    };
+}
diff --git a/src/webapp/reports/autogenerated-forms-configurator/monaco/__tests__/jsonPathAtCursor.spec.ts b/src/webapp/reports/autogenerated-forms-configurator/monaco/__tests__/jsonPathAtCursor.spec.ts
new file mode 100644
index 00000000..c2384683
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/monaco/__tests__/jsonPathAtCursor.spec.ts
@@ -0,0 +1,74 @@
+import { getJsonPathAtCursor, isInlineConstantCodePosition } from "../jsonPathAtCursor";
+
+describe("getJsonPathAtCursor", () => {
+    it("returns the path for a top-level string value", () => {
+        const text = `{"header": "|"}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["header"]);
+    });
+
+    it("returns the path inside a nested object", () => {
+        const text = `{"texts": {"header": {"code": "|"}}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["texts", "header", "code"]);
+    });
+
+    it("returns undefined when the cursor is outside any string", () => {
+        const text = `{"a": 1, |}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toBeUndefined();
+    });
+
+    it("returns undefined when the cursor is inside a key, not a value", () => {
+        const text = `{"texts": {"co|de": "x"}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toBeUndefined();
+    });
+
+    it("handles sibling objects correctly", () => {
+        const text = `{"tabs": {}, "texts": {"rowTotals": {"code": "|"}}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["texts", "rowTotals", "code"]);
+    });
+});
+
+describe("isInlineConstantCodePosition", () => {
+    it.each([
+        [`{"texts": {"header": {"code": "|"}}}`, true],
+        [`{"texts": {"footer": {"code": "|"}}}`, true],
+        [`{"texts": {"rowTotals": {"code": "|"}}}`, true],
+        [`{"texts": {"deep": {"nested": {"code": "|"}}}}`, true],
+        [`{"dataElement": {"code": "|"}}`, false],
+        [`{"texts": {"header": {"name": "|"}}}`, false],
+        [`{"texts": {"code": "|"}}`, false],
+    ])("%s → %s", (template, expected) => {
+        expect(isInlineConstantCodePosition(template, template.indexOf("|"))).toBe(expected);
+    });
+});
+
+describe("getJsonPathAtCursor — edge cases", () => {
+    it("handles strings with escaped quotes", () => {
+        const text = `{"texts": {"header": {"label": "a\\"b", "code": "|"}}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["texts", "header", "code"]);
+    });
+
+    it("handles deeply nested objects", () => {
+        const text = `{"a":{"b":{"c":{"d":{"e":{"texts":{"x":{"code":"|"}}}}}}}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["a", "b", "c", "d", "e", "texts", "x", "code"]);
+    });
+
+    it("returns the path even when the surrounding JSON is malformed (trailing comma)", () => {
+        const text = `{"texts": {"header": {"code": "|",}}}`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["texts", "header", "code"]);
+    });
+
+    it("returns the path even when the surrounding JSON is mid-typed and unbalanced", () => {
+        const text = `{"texts": {"header": {"code": "|"`;
+        expect(getJsonPathAtCursor(text, text.indexOf("|"))).toEqual(["texts", "header", "code"]);
+    });
+});
+
+describe("isInlineConstantCodePosition — array under texts", () => {
+    // The walker skips array ancestors (it only collects keys of enclosing
+    // objects), so `texts -> [...]` does not surface "texts" as an ancestor.
+    // Documented here so a future change can revisit it intentionally.
+    it("does not currently surface `texts` when `code` is inside an array element", () => {
+        const text = `{"texts": [{"code": "|"}]}`;
+        expect(isInlineConstantCodePosition(text, text.indexOf("|"))).toBe(false);
+    });
+});
diff --git a/src/webapp/reports/autogenerated-forms-configurator/monaco/jsonPathAtCursor.ts b/src/webapp/reports/autogenerated-forms-configurator/monaco/jsonPathAtCursor.ts
new file mode 100644
index 00000000..f226c0bc
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/monaco/jsonPathAtCursor.ts
@@ -0,0 +1,141 @@
+/**
+ * Returns the JSON property path of the string value at `offset` in `text`,
+ * or `undefined` if the offset is not inside a string value.
+ *
+ * The walker is intentionally forgiving — it handles partial/invalid JSON
+ * (as typed while editing) by walking backward from the cursor and never
+ * looking forward. It is not a full JSON parser; it only answers
+ * "what is the path of the string I am inside?".
+ *
+ * Example: for input {"a": {"b": "x|"}} (cursor after x), returns ["a", "b"].
+ */
+export function getJsonPathAtCursor(text: string, offset: number): string[] | undefined {
+    if (!isInsideStringValue(text, offset)) return undefined;
+    const stringStart = findEnclosingStringStart(text, offset);
+    if (stringStart === -1) return undefined;
+
+    const immediateKey = findKeyBefore(text, stringStart);
+    if (immediateKey === undefined) return undefined;
+
+    const ancestors = collectAncestorKeys(text, stringStart);
+    return [...ancestors, immediateKey];
+}
+
+export function isInlineConstantCodePosition(text: string, offset: number): boolean {
+    const path = getJsonPathAtCursor(text, offset);
+    if (!path || path.length < 3) return false;
+    if (path[path.length - 1] !== "code") return false;
+    return path.slice(0, -2).includes("texts");
+}
+
+function isInsideStringValue(text: string, offset: number): boolean {
+    let inString = false;
+    let escaped = false;
+    for (let i = 0; i < offset; i++) {
+        const ch = text[i];
+        if (escaped) {
+            escaped = false;
+            continue;
+        }
+        if (ch === "\\") {
+            escaped = true;
+            continue;
+        }
+        if (ch === '"') inString = !inString;
+    }
+    return inString;
+}
+
+function findEnclosingStringStart(text: string, offset: number): number {
+    let escaped = false;
+    let stringStart = -1;
+    for (let i = 0; i < offset; i++) {
+        const ch = text[i];
+        if (escaped) {
+            escaped = false;
+            continue;
+        }
+        if (ch === "\\") {
+            escaped = true;
+            continue;
+        }
+        if (ch === '"') {
+            stringStart = stringStart === -1 ? i : -1;
+        }
+    }
+    return stringStart;
+}
+
+function findKeyBefore(text: string, stringStart: number): string | undefined {
+    let i = skipWhitespaceBackward(text, stringStart - 1);
+    if (i < 0 || text[i] !== ":") return undefined;
+    i = skipWhitespaceBackward(text, i - 1);
+    if (i < 0 || text[i] !== '"') return undefined;
+    return readStringEndingAt(text, i);
+}
+
+function collectAncestorKeys(text: string, fromOffset: number): string[] {
+    const keys: string[] = [];
+    let i = fromOffset - 1;
+    let depth = 0;
+    while (i >= 0) {
+        const ch = text[i];
+        if (ch === '"') {
+            const stringStart = findMatchingOpenQuote(text, i);
+            i = stringStart - 1;
+            continue;
+        }
+        if (ch === "}" || ch === "]") {
+            depth++;
+            i--;
+            continue;
+        }
+        if (ch === "{" || ch === "[") {
+            if (depth > 0) {
+                depth--;
+                i--;
+                continue;
+            }
+            if (ch === "{") {
+                const parentKey = findKeyBefore(text, i);
+                if (parentKey === undefined) return keys;
+                keys.unshift(parentKey);
+            }
+            i--;
+            continue;
+        }
+        i--;
+    }
+    return keys;
+}
+
+function findMatchingOpenQuote(text: string, closingQuoteIndex: number): number {
+    let i = closingQuoteIndex - 1;
+    while (i >= 0) {
+        if (text[i] === '"' && !isEscaped(text, i)) return i;
+        i--;
+    }
+    return 0;
+}
+
+function readStringEndingAt(text: string, closingQuoteIndex: number): string | undefined {
+    const openingQuote = findMatchingOpenQuote(text, closingQuoteIndex);
+    if (openingQuote >= closingQuoteIndex) return undefined;
+    return text.slice(openingQuote + 1, closingQuoteIndex);
+}
+
+function skipWhitespaceBackward(text: string, fromIndex: number): number {
+    let i = fromIndex;
+    while (i >= 0 && /\s/.test(text[i] ?? "")) i--;
+    return i;
+}
+
+function isEscaped(text: string, index: number): boolean {
+    let backslashes = 0;
+    let i = index - 1;
+    while (i >= 0 && text[i] === "\\") {
+        backslashes++;
+        i--;
+    }
+    return backslashes % 2 === 1;
+}
diff --git a/src/webapp/reports/autogenerated-forms-configurator/monaco/registerInlineConstantCompletions.ts b/src/webapp/reports/autogenerated-forms-configurator/monaco/registerInlineConstantCompletions.ts
new file mode 100644
index 00000000..d6080262
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/monaco/registerInlineConstantCompletions.ts
@@ -0,0 +1,102 @@
+import i18n from "@eyeseetea/d2-ui-components/locales";
+import { Maybe } from "../../../../utils/ts-utils";
+import { isInlineConstantCodePosition } from "./jsonPathAtCursor";
+import { CodeEditor, CompletionItem, IRange, Monaco, Position, TextModel } from "./types";
+
+export type CreateNewConstantTrigger = (args: { range: IRange }) => void;
+
+export type InlineConstantCompletionsOptions = {
+    canCreate: boolean;
+    onRequestCreate: CreateNewConstantTrigger;
+};
+
+type Disposer = { dispose: () => void };
+
+export function registerInlineConstantCompletions(
+    codeEditor: CodeEditor,
+    monaco: Monaco,
+    options: InlineConstantCompletionsOptions
+): Disposer {
+    const commandId = codeEditor.addCommand(0, (_accessor: unknown, ...args: unknown[]) => {
+        const payload = args[0] as { range: IRange };
+        options.onRequestCreate(payload);
+    });
+
+    const providerDisposable = monaco.languages.registerCompletionItemProvider("json", {
+        triggerCharacters: ['"', "_"],
+        provideCompletionItems: (model: TextModel, position: Position) => {
+            if (model !== codeEditor.getModel()) return { suggestions: [] };
+
+            const fullText = model.getValue();
+            const offset = model.getOffsetAt(position);
+            if (!isInlineConstantCodePosition(fullText, offset)) return { suggestions: [] };
+
+            const word = model.getWordUntilPosition(position);
+            const range: IRange = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: word.startColumn,
+                endColumn: word.endColumn,
+            };
+
+            return { suggestions: [buildCreateNewItem({ range, monaco, canCreate: options.canCreate, commandId })] };
+        },
+    });
+
+    let wasEligible = false;
+    let pendingTrigger: Maybe<ReturnType<typeof setTimeout>>;
+    const cursorDisposable = codeEditor.onDidChangeCursorPosition(() => {
+        const model = codeEditor.getModel();
+        const position = codeEditor.getPosition();
+        if (!model || !position) {
+            wasEligible = false;
+            return;
+        }
+        const offset = model.getOffsetAt(position);
+        const isEligible = isInlineConstantCodePosition(model.getValue(), offset);
+        if (isEligible && !wasEligible) {
+            pendingTrigger = setTimeout(() => {
+                pendingTrigger = undefined;
+                codeEditor.trigger("inline-constants", "editor.action.triggerSuggest", {});
+            }, 0);
+        }
+        wasEligible = isEligible;
+    });
+
+    return {
+        dispose: () => {
+            if (pendingTrigger !== undefined) {
+                clearTimeout(pendingTrigger);
+                pendingTrigger = undefined;
+            }
+            providerDisposable.dispose();
+            cursorDisposable?.dispose();
+        },
+    };
+}
+
+function buildCreateNewItem(params: {
+    range: IRange;
+    monaco: Monaco;
+    canCreate: boolean;
+    commandId: Maybe<string>;
+}): CompletionItem {
+    const { range, monaco, canCreate, commandId } = params;
+    const label = i18n.t("Create new constant");
+    const base: CompletionItem = {
+        label,
+        kind: monaco.languages.CompletionItemKind.Event,
+        insertText: "",
+        range,
+        sortText: "0",
+        detail: canCreate
+            ? i18n.t("Open dialog to define a new constant")
+            : i18n.t("Requires F_CONSTANT_ADD authority"),
+    };
+
+    if (canCreate && commandId) {
+        return { ...base, command: { id: commandId, title: label, arguments: [{ range }] } };
+    }
+
+    return { ...base, tags: [monaco.languages.CompletionItemTag.Deprecated] };
+}
diff --git a/src/webapp/reports/autogenerated-forms-configurator/monaco/types.ts b/src/webapp/reports/autogenerated-forms-configurator/monaco/types.ts
new file mode 100644
index 00000000..4f4311ca
--- /dev/null
+++ b/src/webapp/reports/autogenerated-forms-configurator/monaco/types.ts
@@ -0,0 +1,74 @@
+// Minimal structural interfaces for the subset of monaco-editor we use.
+// monaco-editor itself is not installed as a package — it is loaded at runtime
+// by @monaco-editor/react's loader. These types let us replace `any` in our
+// own code without taking on monaco-editor as a devDependency.
+
+import type { Monaco } from "@monaco-editor/react";
+import { Maybe } from "../../../../utils/ts-utils";
+
+export type { Monaco };
+
+export type IRange = {
+    startLineNumber: number;
+    endLineNumber: number;
+    startColumn: number;
+    endColumn: number;
+};
+
+export type Position = {
+    readonly lineNumber: number;
+    readonly column: number;
+};
+
+export type WordAtPosition = {
+    word: string;
+    startColumn: number;
+    endColumn: number;
+};
+
+export type TextModel = {
+    getValue(): string;
+    getValueInRange(range: IRange): string;
+    getOffsetAt(position: Position): number;
+    getWordUntilPosition(position: Position): WordAtPosition;
+    getWordAtPosition(position: Position): Maybe<WordAtPosition>;
+    getLineContent(line: number): string;
+};
+
+export type CodeEditor = {
+    getModel(): Maybe<TextModel>;
+    getPosition(): Maybe<Position>;
+    addCommand(
+        keybinding: number,
+        handler: (context: unknown, ...args: unknown[]) => void,
+        context?: string
+    ): Maybe<string>;
+    onDidChangeCursorPosition(listener: () => void): { dispose(): void };
+    onDidChangeModelContent(listener: () => void): { dispose(): void };
+    onKeyUp(listener: (e: { keyCode: number }) => void): { dispose(): void };
+    trigger(source: string, handlerId: string, payload?: unknown): void;
+    executeEdits(
+        source: string,
+        edits: ReadonlyArray<{ range: IRange; text: string; forceMoveMarkers?: boolean }>
+    ): boolean;
+    focus(): void;
+    updateOptions(options: Record<string, unknown>): void;
+};
+
+export type CompletionItem = {
+    label: string;
+    kind: number;
+    insertText: string;
+    range: IRange;
+    detail?: string;
+    documentation?: string;
+    sortText?: string;
+    filterText?: string;
+    preselect?: boolean;
+    tags?: number[];
+    command?: { id: string; title: string; arguments?: unknown[] };
+};
+
+export type CompletionList = {
+    suggestions: CompletionItem[];
+};