improvement(workflow): polish canvas interactions and execution states

[andresdjasso]

Summary

• Unifies workflow cards, notes, and loop containers around the same border, action-swell, selected, disabled, and locked-state language.
• Replaces estimated per-node progress with a branded indeterminate loader that remains smooth for millisecond workflows and stops immediately with the run.
• Adds an on-canvas connected-block selector with correct filtering, loop-aware placement/focus, integration colors, and top/bottom edge fades.
• Restores semantic block titles and provider/type tags, including Gmail and Human defaults.
• Reworks Notes into compact draggable previews with neutral colors and a centered expanded mode for inline title and Markdown editing.

What changed

Cards and execution

• Keeps the action swell at a stable width so Run, Stop, and loader state changes do not shift the card or panel controls.
• Removes connector pulses, execution-only outline thickening, icon flashes, and progress-mask seams.
• Uses one indeterminate segmented animation for all active workflow nodes instead of trying to predict each node's duration.
• Clears loader and hover/action-menu state immediately when a run stops or completes.
• Moves disabled/locked state icons beside the type tag, fixes lock/unlock semantics, and keeps state hover styling stable.

Information hierarchy and tags

• Uses operation names as default titles (Send Email, Wait for Input) while preserving provider/type tags and internal unique block names.
• Restores integration brand fills across cards, selectors, previews, and the editor while retaining the native Sim palette.
• Keeps native color assignments intentional: API uses blue, Router uses orange, and Loop uses graphite with white icon/text.

Loop containers

• Rebuilds loops with the workflow-card border/action-swell language, matched stroke weight, a lighter interior, and correctly aligned input/output swells.
• Gives the loop Start item its own output swell and preserves placement/focus inside the loop when creating a connected block.
• Fits and centers the entire loop on selection rather than zooming into one corner.
• Prevents parent and child action swells from appearing together and replaces the blue drag/drop highlight with a graphite outline that follows the loop's 16px corner radius.

Connected block selector and notes

• Replaces the detached add-block flow with an on-canvas selector positioned at the connection release point.
• Fixes relevant-result filtering/scrolling and uses a seamless surface with compact search spacing and top/bottom gradient fades.
• Keeps compact Notes draggable and hover-scrollable, with a deliberate second click or expand icon opening a centered editing mode.
• Adds neutral white, light-gray, and graphite Note colors with color-aware hover, selected, caret, and text-selection states.
• Edits Note titles and Markdown content directly on the expanded card with matching rendered typography and spacing.
• Keeps expanded Notes fixed while typing, protects text selection from accidental collapse, and leaves the side editor in its empty state.
• Notes intentionally expose no connector affordances.

Type of Change

• Bug fix
• New feature
• Improvement
• Breaking change

Testing

• Manually verified in the local workflow preview, including loader stop behavior, loop focus/hover, connected-block creation, selector scrolling, and compact/expanded Note interactions.
• Focused Note interaction and border suite passed: 19 tests.
• @sim/workflow-renderer and sim type checks passed.
• Lint completed; Biome reported its existing parser panic in the unrelated terminal session file but returned success and changed no files.
• Monorepo boundaries, strict API validation, utils, Zustand, React Query, client boundary, icon, realtime-prune, skills, and agent-stream documentation audits passed.

Checklist

• Code follows project conventions and uses local component styling.
• Tests were added or updated and are passing.
• The branch is rebased on the latest staging.
• Local screenshots, QA artifacts, plans, environment backups, and installed design skills were excluded from the PR.

[cursor]

PR Summary

Medium Risk
Large cross-cutting canvas, execution-cancel, and realtime edge-persistence changes; cancel is now optimistic locally, and handle normalization affects how edges are stored and deduplicated.

Overview
This PR reshapes the workflow canvas around shared border/action-swell language for blocks, loops, and notes, and changes how runs look and stop on the editor.

Execution and cancel — Workflow Run/Stop and Deploy move to Chip controls with a ThinkingLoader on run. Cancel now stops local execution immediately (stream cancel, clear active blocks, console) while still requesting server cancellation. Block rings no longer pulse green for execution; live progress uses action-bar sweep and execution handoff highlighting (active block plus the source that just fed it). Edges darken when endpoints are selected or open in the editor, aligned with selection styling.

Blocks on canvas — Cards use resolveCanvasBlockPresentation for operation-based titles and type tags, natural-language sentence lines or chip rows instead of dense field grids where templates exist, and an Error output toggle wired through UPDATE_ERROR_ENABLED persistence (disabling removes error edges). Horizontal handle flip is removed from the action bar and block menu. Connection block selector is a new transient node with search, recents, and add-block-from-toolbar + pendingConnect.

Notes — Compact draggable preview expands for inline title + TipTap markdown editing, neutral color picker on the swell action bar, and the side Editor panel stays empty for notes.

Realtime — Edge adds and replaces canonicalize source/target handles via normalizeWorkflowEdgeSourceHandle / normalizeWorkflowEdgeTargetHandle; replace state deduplicates edges before insert.

Misc — Navbar glass uses shared FROSTED_GLASS_SURFACE; subflow drop highlight uses a dedicated class and skips re-parent noise when dragging inside the same container.

^{Reviewed by Cursor Bugbot for commit 4c6bfb9. Bugbot is set up for automated code reviews on this repo. Configure here.}

[greptile-apps]

Greptile Summary

Canonicalizes workflow edge handles throughout realtime persistence.

• Normalizes legacy positioned source and target handles before duplicate comparison and storage.
• Applies canonicalization to single-edge, batch-edge, block-batch, auto-connect, and full-state replacement paths.
• Removes logical duplicates during full-state replacement while preserving distinct semantic routing handles.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the previously reported realtime canonicalization gap is addressed across the applicable persistence paths.

Important Files Changed

Filename	Overview
apps/realtime/src/database/operations.ts	All relevant realtime edge persistence paths now canonicalize positioned handles, and duplicate checks normalize both candidate and existing edges.
packages/workflow-types/src/workflow.ts	Shared source and target canonicalizers collapse legacy positional aliases while retaining distinct semantic routing handles.

_{Reviews (2): Last reviewed commit: "fix(workflow): canonicalize realtime edg..." | Re-trigger Greptile}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Aug 4, 2026 9:34pm

[andresdjasso]

@greptile

[andresdjasso]

@cursor review

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
35640005	Triggered	Generic Password	d2dbf89	apps/desktop/src/main/browser-import/import-service.test.ts	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[cursor]

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

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

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