feat(docs): render workflow previews with the shared editor renderer by waleedlatif1 · Pull Request #5277 · simstudioai/sim

waleedlatif1 · 2026-06-30T02:33:28Z

Summary

Replace the forked docs workflow-preview (hand-rolled block/container nodes) with the shared @sim/workflow-renderer views, so docs diagrams render with the real editor components — no visual drift
Make WorkflowBlockView own the condition/router/error rows (removes the 3-way duplication between editor and docs) and its editor-only badge props optional; the editor stays byte-identical
Drop the parallel --wp-* token layer for the app/emcn tokens; rebuild the lightbox inspector on emcn chip primitives; per-type field templates verified against the real block registry
Swap the static how-it-runs PNGs for live previews; rebrand the docs assistant "Ask AI" → "Ask Sim", styled like the real chat input
Match the real canvas: flat background, editor edge geometry, interactive pan/zoom, click-to-inspect

Type of Change

Improvement / refactor

Testing

Tested manually on the docs dev server. apps/sim, apps/docs, and @sim/workflow-renderer type-check clean; biome and monorepo boundaries pass.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@source

…to docs Adds the missing @sim/emcn peer/dev dependency to @sim/workflow-renderer (it imports @sim/emcn in every View but resolved only via workspace hoisting). Wires apps/docs to consume @sim/workflow-renderer (dependency, transpilePackages, Tailwind @source) and adds remark-breaks (pulled transitively via the barrel's NoteBlockView export) — mirroring the @sim/emcn integration. Foundation for migrating the docs workflow-preview fork onto the shared Views. Build resolves the package/@source/remark-breaks cleanly.

…deView Replaces the forked PreviewContainerNode with a thin DocsContainerNode that maps the static preview data to SubflowNodeView's read-only (isPreview) props — no stores or hooks. Adds the block size to the preview node data so the view can size itself, and corrects the parallel example's start-edge handle id to 'parallel-start-source' (the view derives the handle id from kind). Deletes preview-container-node.tsx. Container colors/icons are now owned by the shared view (loop=blue, parallel=yellow).

Replaces the forked PreviewBlockNode with a thin DocsBlockNode that maps the static preview data to WorkflowBlockView's props — store-free, builds the subblock rows (condition/router Context+routes/default + tools + error) via SubBlockRowView, strips branch-id prefixes so the view's regenerated handle ids match, remaps router->router_v2, and keeps the framer-motion dim/stagger wrapper. Promotes resolveIcon into block-icons.tsx, adds the --workflow-edge token to docs global.css, deletes preview-block-node.tsx. The canvas diagrams now render with the real editor's view.

… optional The child-deploy, schedule, and webhook badge props (and their callbacks) only matter in the editor. Mark them optional and optional-chain the three callbacks so read-only consumers (docs, academy) can omit the whole group instead of passing ~18 explicit off-values. The editor still passes them, so its behavior is byte-identical (verified: apps/sim type-check clean). DocsBlockNode drops the off-props.

…view Swaps the four static PNGs on the how-it-runs page for live, app-styled WorkflowPreview diagrams (concurrency, combination, condition+router branching, error path). Adds the four example workflows and renders error-port edges red to match the editor. The English page only; the translated execution/basics pages keep the PNGs.

Both the editor container and the docs adapter hand-built the condition/router/error summary rows in an order that had to stay in lockstep with the view's absolute handle-offset math — a three-way coupling with nothing enforcing it. The view now renders those rows itself from the conditionRows/routerRows it already receives (plus a routerContextValue prop for the router's Context row), so row order and handle geometry live together in one place. Both containers pass only data and their non-branch rows. Editor is byte-identical: getDisplayValue moves to where conditionRows/routerRows are built; the no-subBlock SubBlockRow path is already an exact SubBlockRowView(title, value) passthrough; the error row stays gated on shouldShowDefaultHandles. Verified apps/sim type-check clean. Docs now also renders the error row on condition/router blocks, which the real editor already did (shouldShowDefaultHandles is true for them) — an alignment fix.

… tokens The workflow-preview ran a 25-token --wp-* mirror (22 were pure aliases of app tokens docs already defines) plus a .wp-scope wrapper class. Replaces every var(--wp-X) with its canonical app/emcn token (--wp-edge->--workflow-edge, --wp-highlight->--brand-secondary, badges->--badge-*, etc.), adds the one missing token (--divider), and deletes the .wp-scope blocks + class. Visually identical (aliases resolve to the same values); the preview now inherits the same design tokens as the shared views and the rest of the app instead of a hand-rolled parallel set.

output-bundle's hand-rolled type badge (BADGE_COLORS + a styled span) becomes the emcn Badge (its green/blue/orange/purple/gray variants use the identical --badge-* tokens). resolveIcon, which had three copies, is now imported once from block-icons by output-bundle and block-inspector.

The lightbox inspector was a hand-rolled facsimile (raw divs + a CONTROL class string + inline dashed borders). It now composes from the same @sim/emcn primitives the live editor's sub-block controls wrap — ChipSelect/ChipInput/ChipTextarea(viewOnly)/ChipSwitch/ChipTag/FieldDivider/Label — so it reads as the real editor panel, fed example data (read-only, full opacity via readOnly/viewOnly, not greyed). Slider stays minimal (no emcn equivalent) but on app tokens. Props API and embedded/standalone modes unchanged.

Retires the hand-rolled BlockCard (a parallel reimplementation of WorkflowBlockView) and the BlockDisplaySpec data model. Each block hero is now a single-block PreviewWorkflow (block-display-workflows.ts) rendered through the same toReactFlowElements -> DocsBlockNode -> WorkflowBlockView pipeline as the diagrams, mounted in a minimal fitView ReactFlow (maxZoom 1.3, no canvas chrome). A single block can no longer drift from the canvas.

@theme

…he editor Docs Tailwind v4 never defined sim's custom font sizes (text-small/caption/md/micro), so emcn components (Label, Badge, the shared views) fell back to inherited sizes — the inspector labels rendered huge. Adds the type scale to the docs @theme. Also aligns the inspector header to the real editor panel (surface-4 bar, size-[18px] rounded-sm icon, text-sm name) and removes the Connections section (and its now-dead prop/wiring).

…rsist Inspector: shows the block type's full field list (from the reference data) with the example's values overlaid, so it reads like the editor panel instead of only the canvas summary rows. Drag: selecting another block no longer relayouts the canvas — node positions the viewer dragged are preserved across highlight/selection changes (only a different workflow relayouts).

…lightbox; respace blocks Inspector text fields render the value with <...> block references and {{...}} environment variables highlighted in brand-secondary (a lean read-only port of the editor's formatDisplayText), in the canonical chip field chrome. The floating Ask AI widget is hidden while a preview lightbox is open. Plus the example-data respacing so the editor-faithful Error row no longer makes stacked blocks overlap.

Audited every block type's field list (the source the inspector + block-reference heroes render) against apps/sim/blocks/blocks/*. Corrected drift to the registry's default-visible fields, titles, and order: agent gains Temperature; router gains Model; wait gains Async; schedule rewritten (default is Daily, not minutes); webhook_trigger expanded to its real default-visible set; human_in_the_loop notification title fixed. Provider-credential and advanced-mode fields stay hidden, matching the editor. Canvas diagrams keep their clean curated rows; the inspector now shows the full, real field list per the chosen clean-canvas/full-inspector split.

… aren't shrunk Bumps the default WorkflowPreview height 260->300 (the respaced, editor-faithful blocks are taller, so fitView was shrinking diagrams that relied on the default). The tall how-it-runs routing diagram gets 400.

…controls The inline preview is now zoomable outside the lightbox: adds react-flow zoom/fit Controls (themed to the dark canvas chrome) and enables pinch-zoom, while keeping scroll-zoom off so the page still scrolls over the diagram. Pan-drag and click-block-to-inspect already worked. Default height 300->340.

…select Clicking the inline preview canvas opens the full lightbox; clicking empty space in the lightbox clears the selection, matching the real editor.

The always-visible zoom controls felt heavy on the inline preview; they now fade in on hover (matching the expand button) and stay visible in the lightbox.

Inline preview keeps pinch-zoom, pan, drag, and click-to-expand; zoom buttons stay in the lightbox only.

Both previews zoom via scroll/pinch and pan via drag; no on-canvas zoom buttons. Drops the Controls import and its theming CSS.

…dge geometry Closes the last faithfulness gaps the audit found: removes the dot grid (the real editor hides its background — flat bg), aligns PreviewEdge to the editor's smoothstep math (borderRadius 8, offset 30) and 2px stroke (default + error edges), the selection ring to 1.75px, and minZoom to 0.1. Structural parity (blocks/handles/containers/colors/tokens) was already shared. Kept PreviewEdge rather than swapping to WorkflowEdgeView, which would clobber the docs-only highlight/dim/animate for no visual gain.

…ke the real chat input Renames the floating assistant from 'Ask AI' to 'Ask Sim' (matching the platform's voice — you talk to Sim) and restyles the composer to mirror the home chat input: a rounded-2xl bordered field with the toolbar inside, and the same 28px circular send/stop button (the home's exact active/disabled colors + white/black arrow). Updates the lightbox hide-selector to the new label.

Aligns the user bubble (rounded-[16px] surface-5, text-base/primary, leading-23, max-w-85%) and the assistant markdown (text-base, 600 headings/strong, text-primary dashed-underline links, surface-5 code blocks) to the real mothership chat's user-message + chat-content treatment, instead of the prior generic text-sm rendering. The composer already mirrors the home user-input (rounded-2xl field + 28px circular send button).

The two-row layout left a tall dead gap (the docs widget has no toolbar buttons to fill the second row). The composer is now a single row — textarea with the circular send button inline — so it sits at the natural input height.

vercel · 2026-06-30T02:33:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Jun 30, 2026 3:28am

cursor · 2026-06-30T02:33:37Z

PR Summary

Medium Risk
Touches shared WorkflowBlockView and the main editor block container, so canvas rendering regressions are possible despite the refactor intent; scope is mostly docs UI and preview data with no auth or runtime execution changes.

Overview
Docs workflow diagrams and block heroes now render through @sim/workflow-renderer (WorkflowBlockView, SubflowNodeView) via thin DocsBlockNode / DocsContainerNode adapters, replacing hand-rolled preview nodes and the deleted --wp-* token layer in favor of app/emcn CSS variables.

Block reference data moves from block-display-specs.ts to block-display-workflows.ts (PreviewWorkflow shape); BlockPreview uses ReactFlow + the shared view instead of a scaled static card. Preview edge/handle logic drops showError / hideSourceHandle flags (the view derives handles), adds error-edge styling, and fixes loop/parallel handle ids.

In WorkflowBlockView, condition/router/error summary rows and optional routerContextValue live in the package; editor-only badge props are optional, with the sim editor delegating branch display values through getDisplayValue.

The lightbox inspector and output bundle rebuild on emcn chips/badges; how-it-runs swaps static PNGs for new live preview workflows. Docs adds @sim/workflow-renderer transpilation, Tailwind sources for emcn/renderer, Ask Sim chat restyle, and hides the widget when a preview lightbox is open.

^{Reviewed by Cursor Bugbot for commit cc14b09. Configure here.}

greptile-apps · 2026-06-30T02:36:36Z

Greptile Summary

This PR moves docs workflow previews onto the shared editor renderer. The main changes are:

Shared workflow block views now render docs preview blocks.
Docs preview data was reshaped for ReactFlow-backed diagrams and lightboxes.
The docs assistant was rebranded from Ask AI to Ask Sim.
Docs styling and package wiring were updated for the shared renderer.

Confidence Score: 5/5

This looks safe to merge.

No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
apps/docs/package.json	Adds docs dependencies needed for the shared workflow preview renderer.
apps/docs/next.config.ts	Transpiles the shared workflow renderer package for the docs app.
packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx	Moves condition, router, and error row rendering into the shared workflow block view.
apps/docs/components/workflow-preview/workflow-preview.tsx	Renders docs workflow previews through ReactFlow and the shared renderer.
apps/docs/components/workflow-preview/block-preview.tsx	Replaces the static block card preview with a ReactFlow-backed single-block preview.

_{Reviews (7): Last reviewed commit: "fix(docs): show '-' for blank inspector ..." | Re-trigger Greptile}

waleedlatif1 · 2026-06-30T02:45:21Z

@cursor review

… the block inspectorFieldsFor keyed the full field template purely off block.type, but some types are reused across roles (a table action block vs the table trigger, a webhook trigger vs the webhook action), so the wrong template was applied. Only use the template when the block's authored rows are actually a subset of it; otherwise fall back to the block's own rows.

waleedlatif1 · 2026-06-30T02:55:26Z

@greptile

waleedlatif1 · 2026-06-30T02:55:27Z

@cursor review

toReactFlowElements hardcoded targetHandle to 'target' and defaulted source handles to 'source', but Loop/Parallel containers (SubflowNodeView) expose a 'loop-end-source'/'parallel-end-source' output handle and a left input handle with no id. Edges into and out of containers therefore failed to connect. Resolve each edge end to the block's real handle based on whether it's a container.

waleedlatif1 · 2026-06-30T03:03:39Z

@greptile

waleedlatif1 · 2026-06-30T03:03:40Z

@cursor review

block.rows.every(...) is vacuously true for an empty rows array, so a block defined only by branches (e.g. a router in ROUTING_WORKFLOW) inherited the type template's invented field defaults. Require non-empty authored rows before applying the template.

waleedlatif1 · 2026-06-30T03:09:36Z

@greptile

waleedlatif1 · 2026-06-30T03:09:37Z

@cursor review

…editor The editor maps condition/router branch values and the router Context through getDisplayValue, which renders '-' for a blank value. DocsBlockNode mapped them to an empty string, so else branches and unset routes looked blank instead of matching the editor. Mirror getDisplayValue's empty-value handling.

waleedlatif1 · 2026-06-30T03:17:26Z

@greptile

waleedlatif1 · 2026-06-30T03:17:27Z

@cursor review

…anvas inspectorFieldsFor passed raw branch.value into the lightbox branch fields, so an unset else route read blank in the inspector while DocsBlockNode (and the editor's getDisplayValue) render '-' on the canvas. Normalize the same way; drop the now-redundant placeholder.

waleedlatif1 · 2026-06-30T03:23:52Z

@greptile

waleedlatif1 · 2026-06-30T03:23:53Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit cc14b09. Configure here.}

waleedlatif1 added 24 commits June 29, 2026 19:10

improvement(docs): click canvas to expand; click empty lightbox to de…

25522d2

…select Clicking the inline preview canvas opens the full lightbox; clicking empty space in the lightbox clears the selection, matching the real editor.

improvement(docs): reveal inline zoom controls on hover only

a3c089e

The always-visible zoom controls felt heavy on the inline preview; they now fade in on hover (matching the expand button) and stay visible in the lightbox.

improvement(docs): drop zoom controls on the inline preview

1eaa3f5

Inline preview keeps pinch-zoom, pan, drag, and click-to-expand; zoom buttons stay in the lightbox only.

improvement(docs): remove zoom controls from the lightbox too

c794714

Both previews zoom via scroll/pinch and pan via drag; no on-canvas zoom buttons. Drops the Controls import and its theming CSS.

improvement(docs): compact single-row Ask Sim composer

231447c

The two-row layout left a tall dead gap (the docs widget has no toolbar buttons to fill the second row). The composer is now a single row — textarea with the circular send button inline — so it sits at the natural input height.

waleedlatif1 requested a review from a team as a code owner June 30, 2026 02:33