Add vNext workflow template browser and visual previews - #3495
Add vNext workflow template browser and visual previews#3495AbigailDeng wants to merge 19 commits into
Conversation
Follow-up: template entry save readiness
Browser verification reused the existing signed-in Chrome tab at |
Local verification update
|
c6bbc58 to
c7a918f
Compare
Follow-up: instantiated templates open as savedRoot cause: template instantiation already persisted and materialized the draft, but the frontend appended The template browser now navigates directly to the canonical editor URL. A materialized template draft opens clean with Save disabled; only a real user edit marks it dirty. The Local verification
|
Follow-up: publish saved runtime YAML directlyRoot causePublish reparsed and reserialized an already saved workflow through the deployed Studio editor parser before calling runtime preview. That remote parser is behind runtime support for Semantic correction
Local verification
Remote browser verificationReused the existing signed-in Chrome tab at The visible Studio |
Follow-up: fix console-web CI type checksThe failing After fixing that first error, the same CI command exposed a second declaration error: the exported This update:
Local verification
Commit: |
Follow-up: align template catalogue columnsThe template catalogue now matches the approved table treatment instead of sizing a standalone header grid and row grids independently.
Local verification
|
Follow-up: stabilize the full-suite tool-set save regressionRoot causeThe regression test updated the workflow display name and then compared the complete serialized document against an object whose Fix
Verification
The full suite and build were run locally this time specifically to reproduce the GitHub failure; GitHub CI will repeat them for pushed head |
Template catalogue scrolling follow-upRoot causeThe template table is a horizontal scroll container and inherited Fix
Local verification
Commit: |
Problem and solution
The vNext New workflow flow still used a bundled template selector, while the approved template design requires a page-level browser and backend PR #3484 provides the authoritative public template catalog and instantiate command.
This PR:
/scopes/:scopeId/workflow-activity-vnext/workflows/new/templates;Use templateupdate the URL instead of changing only transient React state, so refresh and browser navigation preserve the surface;Start from a templateheading and one supporting description;ViewandUse templateper row;Viewinto a visual workflow preview built with the shared Studio graph canvas, including nodes, arrows, branch labels, minimap, and zoom controls;edgesfor both visible connections and layout topology, while preserving the definition fallback for older/partial payloads;childedges using the source step contract;POST /api/scopes/{scopeId}/workflow-templates/{templateId}:instantiate;workflowId;templateId, draftworkflowId,memberId, andpublishedServiceIdsemantically separate;404to a contextual unavailable-environment message while retaining the raw HTTP error in Technical details;No bundled template catalog fallback or local backend/mock path remains.
Impacted paths
Related work
Local verification
pnpm --dir apps/aevatar-console-web exec jest src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx --runInBand- 2 suites passed, 19 tests passedpnpm --dir apps/aevatar-console-web exec biome check src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/styles.ts src/locales/workflowActivityVNextMessages.en-US.ts src/locales/workflowActivityVNextMessages.zh-CN.ts- 6 files passedpython3 ~/.codex/skills/frontend-incremental-pr/scripts/frontend_change_scope.py --repo . --base origin/feat/2026-08-04_workflow-activity-vnextgit diff --check- passedRemote preview
The frontend remains available at
http://localhost:5173against the configured remote API and Studio targets. I reused the user's existing Chrome tab rather than opening a separate browser. The deployed remote catalog returned real details forauto_review(11 steps) andcodex_long_running_handoff(3 steps); both rendered nonblank workflow graphs with visible arrows and controls. Desktop and 390x844 checks showed no document-level horizontal overflow, and the browser console reported no errors.Follow-up verification: accepted draft materialization
The backend instantiate command returns
202 Acceptedbefore the new draft is visible in the workflow-draft read model. The frontend now observes the scoped draft list first, waits until the receiptworkflowIdappears, then reads the draft document. A transient detail404is treated as projection delay and retried; non-404 failures still surface immediately.pnpm exec jest --runInBand src/pages/workflow-activity-vnext/hooks/useDraftMaterialization.test.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts- 3 suites passed, 24 tests passedpnpm exec jest --runInBand src/shared/studio/api.test.ts- 1 suite passed, 61 tests passedpnpm exec biome check src/pages/workflow-activity-vnext/hooks/useDraftMaterialization.ts src/pages/workflow-activity-vnext/hooks/useDraftMaterialization.test.ts- passedgit diff --check- passedBrowser verification used the existing signed-in Chrome tab at
http://localhost:5173with the configured remote API and Studio targets. ClickingUse templateforstudionavigated to/workflow-activity-vnext/workflows/1f74619cd03c4cb7b70200a4af9bb2d4and rendered the editor; the browser console reported no errors or warnings.Follow-up: terminal template state
The accepted-draft observer still prevents duplicate template creation after a delayed or failed materialization, but terminal states no longer render as an endless loading action. Only
acceptedandobservingshow theUse templatespinner.delayedandfailedkeep the action locked without the spinner and expose the existingTry againaction.pnpm exec jest --runInBand src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx -t "prevents duplicate template instantiation"- 2 tests passedpnpm exec jest --runInBand src/pages/workflow-activity-vnext/hooks/useDraftMaterialization.test.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts- 3 suites, 24 tests passedgit diff --checkpassedcodex_long_running_handoffsuccessfully opened the editor at/workflow-activity-vnext/workflows/cc513f397e2240e69d929cab3274f58f.Follow-up: remove template step details
The template preview modal now keeps only the visual workflow graph, description, and source version. The redundant collapsed
Step detailssection, its CSS, and its template-browser-only localization entries were removed. The separate workflow node inspectorStep detailssurface remains unchanged.pnpm exec jest --runInBand src/pages/workflow-activity-vnext/hooks/useDraftMaterialization.test.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts- 3 suites passed, 24 tests passedpnpm exec biome check src/locales/workflowActivityVNextMessages.en-US.ts src/locales/workflowActivityVNextMessages.zh-CN.ts src/pages/workflow-activity-vnext/styles.ts src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.tsx- passedgit diff --check- passedFollow-up: unified template pagination
The template catalog now uses the same Ant Design
Paginationcontrol andwa-vnext__activity-footerlayout as the Activity page. The old template-specific Previous and Next button row and its CSS/localization entries were removed.Because the template catalog contract exposes
nextCursorwithout a total count, page navigation keeps the discovered cursor for each page, resets to page 1 when search or sort changes, hides arbitrary quick jumping, and disables navigation while the catalog is loading, a cursor is being resolved, or template creation is locked. Cursor-resolution failures keep the current page visible and expose the same retry treatment used by Activity.pnpm exec jest src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.test.ts --runInBand- 2 suites passed, 21 tests passedpnpm exec biome check src/pages/workflow-activity-vnext/workflows/WorkflowTemplateBrowser.tsx src/pages/workflow-activity-vnext/workflows/NewWorkflowPage.test.tsx src/pages/workflow-activity-vnext/styles.ts src/locales/workflowActivityVNextMessages.en-US.ts src/locales/workflowActivityVNextMessages.zh-CN.ts- 5 files passedgit diff --check- passedhttp://localhost:5173against the configured remote API; the template page rendered the Activity-style Page 1 pagination and the browser console reported no errors or warningsFollow-up: blocked save feedback
Save now surfaces validation-blocked exits instead of returning silently. Parse or serialize findings that block saving set the editor status to Save failed, trigger the existing save-failure toast, and keep the inline validation findings visible.
Follow-up: template tool-set save contract
The backend template instance can contain the runtime permission field tool_sets on both roles and steps. The editor now treats the corresponding toolSets values as typed Studio document fields, and the save regression proves parse -> serialize -> save keeps those values intact. The durable parser/serializer fix is tracked in backend PR #3506 against feature/integrate.
Local verification