13 KiB
Slice 2: Visual Configuration
Status
Complete - explicitly signed off on 2026-07-31
Roadmap Alignment
This slice owns the Visual Configuration Workflows function and the remaining MVP component-property/presentation follow-ups in ROADMAP.md. The older roadmap's Steps 19 and 20 are implemented Slice 2 increments, not future milestones. Controlled action orchestration and Table pagination are post-MVP unless the approved boundary changes.
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
- Table pagination, sorting, filtering, editing, and other advanced Table behavior
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.
- Keep the fixed 30-second backend timeout as the documented v0.1.0 contract; defer a bounded canonical per-action timeout to proxy-policy work.
- 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
onSuccesswithout offering legacyonClickfor new records. - Implement page-load action configuration for initial data population.
- Add variable declaration and typed default-value editing.
- Warn before deleting referenced actions, variables, or components. Referenced component deletion requires explicit confirmation and preserves dangling references for diagnostics; manual acceptance passed on 2026-07-30.
- Ensure every REST action visual edit immediately updates canonical JSON while invalid drafts remain local.
- Correct action and response-binding diagnostics so page
onLoadcounts as a valid trigger and uses clear component-or-page-event wording. - Manually confirm the page
onLoadaction and binding no longer show false untriggered diagnostics. - Manually accept the implemented Actions & Bindings information architecture with clearer record boundaries, hierarchy, spacing, and summaries.
- Make the Preview page background grow with runtime output that exceeds design-time component height.
- Manually confirm runtime-populated Table rows remain inside the white Preview background and an empty result contracts it again.
- Complete audited MVP component-specific properties: JSON Viewer default JSON, Table column widths, input required semantics, and canonical basic appearance.
- Manually confirm those controls synchronize with JSON and render consistently on the canvas and in Preview.
- Add slice-wide tests, examples, and documentation updates; reconcile evidence and receive explicit final Slice 2 sign-off.
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 Actions & Bindings information-architecture increment.
- Editor interaction and Preview dispatch tests pass through the information-architecture increment (20 suites / 501 tests; focused ActionInspector suite 12 tests; focused Preview component suite 13 tests).
- The representative canonical JSON validates through the page-load increment.
- 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 the then-current handoff and task documents,
MVP_SCOPE.md, and this plan;ROADMAP.mdnow supersedes the legacy task inventory. - 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: Actions & Bindings information architecture and the fixed-timeout decision are implemented, validated, documented, and manually accepted.
- Next action: Begin the separately scoped Slice 2a request-reference usability work authorized after final Slice 2 sign-off.
- Known blockers: Standalone frontend
tscretains its recorded tooling limitation. - Current pushed baseline:
86ca42a Add page-load actions and component deletion safeguards. - Durable manual-test instructions and acceptance records:
TESTING.md.
Response Binding and Variable Increment
Implemented and audited through 2026-07-20 in the working tree:
- Visual canonical
project.bindingscreate, edit, and delete controls. - Existing REST action response selection with supported component and declared-variable targets.
- New bindings default to
onSuccessand cannot select legacyonClick; existing legacyonClickbindings are preserved and can migrate one-way toonSuccess. - New target choices exclude unsupported component properties and ambiguous duplicate component names.
- Visual variable declaration, rename, type, default value, description, and deletion controls with reference-aware warnings.
- No
action.responseMapping,ComponentEvent.inputMap, authentication, secrets, page-load execution, or runtime-state persistence was added. - Automated validation passes: 2 focused suites / 14 tests, 15 full frontend suites / 477 tests under Node 20/npm 10, frontend CRA production compile, backend build, and the 13 / 2 / 2 schema matrix.
- Standalone TypeScript remains blocked by the documented TypeScript 4.9 /
@types/node@26.1.0parser incompatibility.
Manual acceptance is separate from automated coverage. The request-input and response-binding/variable workflows passed manual acceptance by 2026-07-29.
Detailed manual procedures and result checklists are maintained in TESTING.md.
On 2026-07-20, the user confirmed the partial request-input checkpoint for adding the item query parameter and inserting the selected component through Request value reference into Query: item. On 2026-07-28, the user confirmed all remaining request-input checks passed: Preview execution, outgoing-request inspection, runtime-state separation, destination exclusion, raw-template regression, and variable resolution. Full request-input manual acceptance is recorded.
2026-07-29 Boolean Default Defect
Manual typed-variable testing found and confirmed a defect: the boolean default text editor forced partial input to false, preventing true from being authored. The editor now offers No default, true, and false explicitly. Focused tests, all 15 frontend suites / 477 tests, and the frontend production build pass. The user confirmed the fix. Typed declarations and invalid-draft isolation are accepted; remaining response-binding/variable manual checks are pending.
Component response-binding manual acceptance passed on 2026-07-29. Intermittent httpbin.org 503 responses correctly did not trigger onSuccess; the verified httpbingo.org endpoint returned HTTP 200 and populated the JSON Viewer. Remaining response-binding/variable checks are pending. Variable response-binding manual acceptance also passed using a two-request runtime-state check while preserving the canonical default. Binding edit and selected deletion also passed. A deferred UI follow-up now tracks clearer visual separation and hierarchy for action, binding, and variable records. Unsupported and ambiguous response targets were manually confirmed excluded. Referenced-variable deletion warnings and post-deletion diagnostics also passed. Legacy onClick execution and one-way migration to onSuccess also passed. Failure and ephemeral-state acceptance passed after fixing clipped Button errors; focused Preview tests passed at 2 suites/7 tests, all 15 frontend suites/478 tests passed, and the production build passed. Save/reload persistence and runtime reset passed, completing response-binding/variable manual acceptance.
Page-Load Action Increment
Implemented in the working tree on 2026-07-29:
- The Visual Editor page bar selects or clears an existing anonymous REST action for the initial page's onLoad event.
- Canonical page.events updates immediately, preserves unrelated events, removes duplicate onLoad entries, and reports missing action references.
- Preview executes the initial page's first onLoad action once per mounted Preview initialization. Leaving and re-entering Preview creates a fresh ephemeral runtime and executes once again.
- Page load reuses request-template rendering, anonymous proxy execution, normalized responses, and canonical top-level project.bindings, including component and variable onSuccess targets.
- Preview exposes loading, success, and failure status without writing loading, errors, responses, component values, or runtime variable values to canonical JSON.
- The representative visual REST fixture includes a page onLoad event; no schema or type migration was required.
- Focused validation passes at 4 suites / 9 tests. The full frontend suite passes at 18 suites / 486 tests under Node 20/npm 10, the CRA production build passes, and the 13 / 2 / 2 schema matrix remains green.
- Backend code and schema were not changed. Standalone tsc --noEmit retains the documented TypeScript 4.9 / @types/node 26 incompatibility.
Manual page-load acceptance passed on 2026-07-29 and is recorded in TESTING.md. The screenshot exposed a non-blocking Preview page-sizing limitation for runtime-expanded Tables; responsive Preview output sizing and post-MVP Table pagination are tracked in ROADMAP.md. Final Slice 2 acceptance remains pending.