Workflow Editor and Release UI

Workflow Studio's editor is optimized for current step-gate workflows while still showing legacy module graphs. The implementation spans apps/admin-web/app/page.tsx and components under apps/admin-web/components.

Canvas rendering

WorkflowCanvas.tsx dynamically imports React Flow from app/page.tsx with ssr: false. It supports two graph families:

• Step-gate workflows render WorkflowStepNode nodes with kind setup, step, or terminal, output counts, validator counts, branch counts, and top/bottom handles.
• Legacy module graphs render module nodes and stage-band nodes based on dependency metadata, classification order, and transitive reduction toggles.

Step-gate auto-layout uses @dagrejs/dagre in layoutWorkflowStepNodes. It sets rank direction top-to-bottom, stronger weight for linear next edges than branch edges, fixed node dimensions, and rank/node separation. graphDepths and related helpers calculate legacy module staging and cycle fallback behavior.

apps/admin-web/tests/studio.spec.ts::auto-arranges a vertical workflow and opens its step drawer without click motion proves auto-arrange changes a reversed layout into a non-overlapping top-to-bottom graph, marks unsaved edits, keeps setup-workspace above downstream nodes, and removes click/Sheet motion for instant step editing.

Step editor

WorkflowStepEditorSheet.tsx edits one WorkflowStep plus its instruction asset. The sheet focuses the instruction textarea on open, disables motion for this path, and returns focus to the triggering node on close.

Typed sections cover:

• identity and title;
• input artifact IDs;
• exact workspace directories for setup-workspace;
• Markdown instruction content;
• owned outputs with artifact ID, workspace path, media type, schema, maximum bytes, owner step, and write policy;
• semantic validator references;
• routing, including linear next, branches, and terminal behavior;
• advanced raw JSON for full step editing.

The description tells admins that saving creates a new workflow patch version and immutable instruction asset. workflowStepEditorSnapshot captures dirty state from step JSON and instruction content.

Module, asset, and validator sheets

• ModuleEditorSheet.tsx edits legacy module candidate metadata and instructions. It proposes the next patch version and saves through the workflow draft, never mutating a published module version.
• AssetEditorSheet.tsx edits registry assets such as step instructions, validator instructions, JSON schemas, prompts, skills, subagent definitions, and host adapters.
• ValidatorEditorSheet.tsx edits validator definitions: inputs, capabilities, isolation mode, output schema, and required flag.
• WorkflowCreateSheet.tsx creates or starts workflows from starter content.

These sheets all feed back into app/page.tsx, which writes a new draft revision through Admin API rather than mutating release content.

Release drawer

WorkflowReleaseSheet.tsx enforces validate-before-publish. It receives the selected workflow ID/name/revision, production channel state, target release, dirty flag, busy state, and a WorkflowValidation object. Publish is enabled only when:

• a workflow is selected;
• the current editor is not dirty;
• no request is busy;
• validation exists for the same workflow ID, revision, and target release.

The drawer displays current production release/generation, validation inventory counts, manifest digest prefix, source registry release, and dependency diff. The UI sequence is explicit: validate exact bytes, publish signed release, advance production pointer. This maps directly to Admin API /validate and /publish routes and Publication Pipeline.

Immutable history and release dependency view

The page can load revision summaries and exact revision snapshots. Selecting a historical revision switches the working document and layout to that snapshot and labels the toolbar with history context; saving still creates a new head revision only through explicit save operations.

Release inspection uses Admin API release_detail, whose workflow_dependencies records each workflow, step, assets, and validators. The Playwright test restores immutable history and exposes compiled release dependencies mocks a historical revision with a changed setup title and a release detail response, then asserts the historical node appears and research-decision@1.2.0 plus setup-workspace are visible in the release dependency UI.

Safety boundaries

• Browser-side validation and SHA-256 calculation improve feedback only; backend schemas, compiler, loader, migrations, and trust verification are authoritative.
• Layout is editor presentation state. semantic_engine_draft_sha256 excludes revision/layout, so layout movement does not alter release semantics until a draft revision is saved, and even then publication semantics depend on the workflow document.
• Legacy module graph editing exists for migration and provenance. Current participant workflows are step-gate documents.

Focused validation

• cd apps/admin-web && pnpm typecheck
• cd apps/admin-web && pnpm build
• cd apps/admin-web && pnpm test:e2e
• For release behavior with backend: RIMTHAN_TEST_ADMIN_POSTGRES_DSN=... uv run pytest tests/test_admin_api.py