git.stella-ops.org/docs/features/unchecked/web/visual-workflow-editor.md

Visual Workflow Editor (DAG-Based)

Module

Web

Status

IMPLEMENTED

Description

Visual DAG-based workflow editor with drag-and-drop step palette, step configuration panel, connection validation, and YAML view with syntax highlighting.

Implementation Details

• Feature directory: src/Web/StellaOps.Web/src/app/features/workflow-visualization/
• Routes: workflow-visualization.routes.ts
• Components:
  • step-detail-panel (src/Web/StellaOps.Web/src/app/features/workflow-visualization/components/step-detail-panel/step-detail-panel.component.ts)
  • time-travel-controls (src/Web/StellaOps.Web/src/app/features/workflow-visualization/components/time-travel-controls/time-travel-controls.component.ts)
  • workflow-visualizer (src/Web/StellaOps.Web/src/app/features/workflow-visualization/components/workflow-visualizer/workflow-visualizer.component.ts)
• Services:
  • time-travel (src/Web/StellaOps.Web/src/app/features/workflow-visualization/services/time-travel.service.ts)
  • workflow-visualization (src/Web/StellaOps.Web/src/app/features/workflow-visualization/services/workflow-visualization.service.ts)
• Source: SPRINT_20260110_111_004_FE_workflow_editor.md

E2E Test Plan

• Setup:
  • Log in with a user that has appropriate permissions
  • Navigate to /release-orchestrator
  • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
• Core verification:
  • Verify the editor/studio loads with editable content or empty template
  • Verify changes can be saved and persisted
  • Verify validation errors are displayed for invalid input
• Edge cases:
  • Verify graceful handling when backend API is unavailable (error state)
  • Verify responsive layout at different viewport sizes
  • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)