Skip to content

Flow builder: live preview for Screen nodes #1944

Description

@os-zhuang

Problem

The Screen node config (title / description / fields / object-form — expanded in #1927) is authored blind: there's no way to see what the screen will look like to the end user. The Debug simulator, when paused at a screen, shows only paused — it doesn't render the form. Screen flows are user-facing wizards, so designing a form without seeing it is error-prone (field order, labels, types, object-form layout).

Proposal

A live preview that renders the screen as the end user would see it — title, description, the input fields (or the full object-form when objectName is set). Surface it in the node config panel and/or in the Debug simulator when paused at a screen. Reuse the runtime ScreenSpec renderer (and plugin-form/ObjectForm for object-form mode) so the preview matches runtime exactly.

Acceptance criteria

Pointers

  • The flow-runner renders the ScreenSpec at runtime (the engine's screen executor emits it) — reuse that renderer.
  • inspectors/flow-node-config.ts — screen config group.
  • plugin-form ObjectForm for object-form mode.
  • previews/FlowSimulatorPanel.tsx — the paused-at-screen state where a preview would also fit.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions