Skip to content

Improve workflow editor and deployment experience - #6507

Open
andresdjasso wants to merge 45 commits into
stagingfrom
improvement/editor-deploy-experience
Open

Improve workflow editor and deployment experience#6507
andresdjasso wants to merge 45 commits into
stagingfrom
improvement/editor-deploy-experience

Conversation

@andresdjasso

@andresdjasso andresdjasso commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Redesign the workflow editor as a structured, docked configuration panel.
  • Redesign the deployment popover around access methods and version history.
  • Add responsive popover anchoring, outside-click dismissal, modal layering, and stable scroll/fade behavior.
  • Consolidate relevant fields, controls, CTAs, statuses, and menus on the EMCN chip family.
  • Reconcile the editor and deploy work with staging's current workflow canvas, block rendering, and retry behavior.

Type of Change

  • Improvement

Testing

  • bun run type-check
  • bun run lint
  • bun run lint:check
  • bun run check:audits
  • bun run check:api-validation
  • bun run apps/sim/scripts/check-block-registry.ts origin/staging
  • 39 focused editor, EMCN, and workflow-renderer tests
  • Local workflow and deployment APIs verified after applying pending local migrations

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added or updated and passing
  • No new warnings introduced
  • Branch is reconciled with current staging
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement

andresdjasso and others added 24 commits August 10, 2026 17:35
Connection anchors: an output now always leaves a card from the right.
The cursor swell lets a drag start on any edge, but the left side is the
input, so anchoring an outgoing edge there drew a line out of the input
port and read as a second input. `normalizeCursorSourceHandleId` resolves
every drag to the right anchor, `normalizePositionedSourceHandleId`
collapses `source-left` alongside the legacy vertical anchors (so data
from the API, an older client, or a stale save self-heals on load), and
only the right-side source anchor is mounted.

Drops in `onConnectEnd` are always source -> target. The branch that
reversed the edge for a drag starting on an input could never run: the
`target` handle is `isConnectableStart={false}` and the positioned side
anchors are `isConnectable={false}`, so React Flow never reports an input
as a drag origin. Removed it and its now-unused imports.

A newly created block is centered once its node mounts and is measured,
so a card added from a drag-release, the block menu, or the toolbar is
never left off-screen or under the editor panel.

The editor panel's block icon uses the same type accent as the card's
badge instead of the block's legacy `bgColor`, which had left the panel
on the old per-integration brand colours.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The Start card intermittently collapsed after load, squashing the
action-menu tab so its icon row sat over the card.

`.workflow-drag-handle` is the host the border renderer measures, and both
it and the header row took their height from `blockHeight && blockHeight >
0`. `blockHeight` comes from the deterministic-dimensions pass and is
already floored at MIN_PAINTED_HEIGHT (48), but it is absent on the first
frames — and with no floor the host collapsed to its natural content
height (25.5px for a header-only trigger, exactly the title's line box).
The border builds its perimeter from `host.offsetHeight`, so that window
painted a sub-floor card: too little straight edge remained on the
vertical runs for the action-menu tab, which collapsed into the corner
arcs. Whether you saw it depended purely on whether the dimension publish
had landed, which is why it reproduced on one workflow and not another.

Floor all three: the host, the header row (so `items-center` centres the
title and type tag rather than pinning them to the top), and the border's
own `offsetHeight` read.

Also raise ACTION_MENU_CONTENT_READY_THRESHOLD to 0.9. At 0.8 the 24px
icon row was revealed while the swell had only reached 22.4px of its 28px
— shorter than the row it contains. Secondary to the above, but a real
overflow window on its own. The test now pins the ratio rather than the
constant.

Tag palette moves to fixed brand values (hex, not derived oklch) with two
inks — #F8F8F8 on dark fills, #1A1A1A on light. Tones are renamed to match
what they render. `green` (2.55:1) and `orange` (3.15:1) sit under WCAG AA
against their paired ink; both are deliberate brand decisions and are
documented in the component.

Deploy and Run take two new Button variants rather than className
overrides, so `tertiary` stays green everywhere else.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@andresdjasso
andresdjasso requested a review from a team as a code owner August 10, 2026 23:01
@greptile-apps

greptile-apps Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Too many files changed for review (218 files, 100 file limit).

Bypass the limit by tagging @greptile-apps to review.

@vercel

vercel Bot commented Aug 10, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
docs Building Building Preview Aug 14, 2026 9:12pm

Request Review

@cursor

cursor Bot commented Aug 10, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Broad UI changes to editor, deployment, and collaborative block-description persistence; deployment and realtime paths need regression testing but no auth or payment logic changes.

Overview
Workflow editor is reshaped into a docked configuration experience: an empty state when nothing is selected, grouped block sections (BlockEditorSections), and a collapsible Available data panel with search, grouped upstream steps, and click-to-copy references (plus existing drag). ActionBar adds an inline variant (run/stop chip + overflow menu with docs) for use inside the inline editor. Sub-block controls increasingly use Chip primitives (ChipInput, ChipCombobox, ChipSwitch, BooleanControl, field-appearance code editor).

Deployment moves from a full modal to a popover anchored on the Deploy chip: overview with access method rows (API / MCP / Chat), a timeline-style version history, version detail (notes, preview, restore as draft), and deploy/undeploy actions relocated (undeploy in overflow). Deploy sub-views (API, Chat, MCP, API info) swap ButtonGroup / Switch / Textarea for Chip controls.

Test chat copy and layout shift toward “test workflow” (configure Start inputs banner, empty state, placeholders, thin scrollbar).

Realtime adds UPDATE_DESCRIPTION so block descriptions in workflowBlocks.data sync collaboratively with permissions tests updated.

Smaller: root layout always migrates persisted copilot inspector tab to toolbar; global --scrollbar-size; playground workflow editor field lab section.

Reviewed by Cursor Bugbot for commit 087a21d. Bugbot is set up for automated code reviews on this repo. Configure here.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ac9be72. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant