6.6 KiB
6.6 KiB
Slice 2: Visual Configuration
Status
In progress — component events and request-input authoring complete; response bindings and variables next
Objective
Allow an MVP project to be configured through the GUI without routine hand-editing of canonical JSON.
Dependencies
- Slice 1 component contracts
- Existing action, event, binding, variable, and Preview models
- Canonical top-level
project.bindingsdecision
In Scope
- Visual REST Action CRUD
- Component events, request input mappings, response bindings, variables, and page-load configuration
- Immediate synchronization with canonical project JSON
Out of Scope
- AI-generated configuration
- Chained actions, general orchestration, and advanced JSONPath authoring
Tasks
- Design a consistent, progressively disclosed workflow for editing actions, events, bindings, variables, and page-load behavior.
- Implement REST Action list, create, edit, duplicate, and reference-aware delete operations.
- Add method, URL, headers, query, path, and body controls for anonymous REST actions.
- Decide and implement the canonical timeout field before exposing a timeout control; the current schema and runtime use a fixed backend timeout.
- Keep Slice 2 authentication authoring anonymous-only and defer credential-backed authentication controls to Slice 3.
- Implement component event configuration for Button
onClick, including add/change/clear and dangling-reference diagnostics. - Implement request input authoring through executed REST request templates; do not write inert
ComponentEvent.inputMap. - Implement response source and component/variable target selection.
- Default new action-response bindings to
onSuccess. - Implement page-load action configuration for initial data population.
- Add variable declaration and default-value editing.
- Warn before deleting referenced actions, variables, or components. Action deletion is covered; variable and component deletion remain.
- Ensure every REST action visual edit immediately updates canonical JSON while invalid drafts remain local.
- Add slice-wide tests, examples, and documentation updates. Increment 1 coverage and a representative REST fixture are complete.
Implementation Order
- REST action authoring: Add canonical action CRUD, method/URL/request controls, local validation, diagnostics, reference-aware deletion warnings, focused tests, and a representative example project.
- Component events and request inputs: Configure Button
onClickfirst, then supportedonChangeevents and component/variable request templates. - Response bindings and variables: Author top-level
project.bindingswithonSuccessdefaults, supported response paths and targets, plus variable declarations/defaults. - Page-load actions: Add the minimum page lifecycle contract needed to execute configured
onLoadactions without introducing general orchestration. - Slice acceptance and hardening: Complete dangling-reference diagnostics, persistence/JSON synchronization coverage, representative examples, builds, schema validation, and manual workflows.
Each increment writes only canonical configuration into the shared project document. Preview execution values, loading flags, responses, errors, and variable values remain ephemeral runtime state.
Acceptance Criteria
- A user can build the workflow launcher without editing JSON.
- Actions, inputs, triggers, and response mappings can be configured visually.
- Initial dropdown/table population can be configured visually.
- Dangling references are reported before Preview execution.
- Visual and JSON editors remain synchronized and save/load preserves configuration.
Validation
- Standalone frontend TypeScript check passes. TypeScript 4.9 currently cannot parse the resolved
@types/node@26.1.0; the CRA production compile passes. - Frontend production build passes through the Button
onClickincrement. - Editor interaction and Preview dispatch tests pass through the Button
onClickincrement. - Increment 2 representative canonical JSON validates against the schema.
- Increment 1 manual REST action authoring and referenced-action deletion workflow passes.
- Manual workflow-launcher and dependent-data scenarios pass.
Risks and Open Questions
- Configuration UI needs progressive disclosure to remain manageable.
- Page-load support must not become a general workflow engine.
- Authentication controls must reference secrets without storing credential values.
Progress Log
- 2026-07-18: Restored project state from
CODEX.md,TASKS.md,MVP_SCOPE.md, and this plan. - Verified the clean
mainbranch against a freshly fetchedorigin/main; both point tob9697cc8b11bce806887d6e7a29098a308b0846a. - Re-ran the pre-change frontend baseline successfully: 7 suites and 433 tests passed.
- Audited the canonical action/event/binding model, Visual Editor, read-only Actions & Bindings Inspector, Preview execution path, schema validation, examples, and existing tests.
- Chose visual REST action authoring as the first coherent vertical increment.
- Completed canonical anonymous REST action creation, editing, duplication, and reference-aware deletion in Actions & Bindings.
- Added progressive request controls for method, endpoint URL, headers, query parameters, static path parameters, and request body; invalid drafts remain local and runtime state remains separate.
- Added action-definition, duplicate-ID, header-name, and path-template diagnostics plus referenced-deletion warnings.
- Added 23 focused tests plus
valid-visual-rest-actions.json. - Validation passed under Node 20/npm 10: 9 frontend suites / 456 tests, frontend production build, backend TypeScript build, and the 13-valid / 2-schema-invalid / 2-diagnostic-invalid schema matrix.
- Standalone
tsc --noEmitremains blocked by the existing TypeScript 4.9 /@types/node@26.1.0dependency mismatch; the application production build compiles successfully. - In-app browser automation could not start during implementation while Docker Desktop was not running. After Docker Desktop and the app were started, the user manually accepted Increment 1 on 2026-07-19, including a Button
onClickevent inserted through canonical JSON and the referenced-action deletion workflow.
Handoff
- Last completed: Increment 2 visual request-input authoring for component and variable values, with automated validation.
- Next action: Implement visual response bindings and variable authoring, defaulting new action-response bindings to
onSuccess. - Known blockers: Manual request-input acceptance remains pending. Standalone frontend
tscretains its recorded tooling limitation.