feat: redesign workflow canvas UI w improved UX

[adithyaakrishna]

Summary

• Redesigned workflow editor with floating toolbars, collapsible sidebar panel, inline log output viewer, edge flow animations, and floating copilot input
• Added version history, enhanced variables modal, and polished workspace wide chrome and access control UX

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: UX Improvement

Testing

• Verify all workflow canvas interactions: node click opens editor panel, canvas click closes it, Run auto opens Logs tab, action bar clicks don't open panel
• Test sidebar collapse/expand, panel tab switching, variables modal positioning, version history popover, and log entry output/input viewing
• Confirm no regressions on Tables/Files/Knowledge/Settings pages (shared Resource component changes)

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)

[cursor]

PR Summary

Medium Risk
Moderate risk due to broad refactors of workflow editor UI/state (panel/terminal/variables) and new persisted stores, which could introduce regressions in navigation, hydration behavior, and execution/log viewing.

Overview
Redesigns the workflow canvas chrome by introducing floating toolbars (WorkflowToolbar, WorkflowActions), a collapsible right-side panel, and a new Logs panel tab that embeds the terminal view.

Adds a floating CopilotInput when the panel is collapsed, plus panel-state enhancements (isPanelOpen, pendingCopilotMessage) to coordinate auto-opening/tab switching (e.g., on block selection or after runs).

Introduces local, persisted workflow change history (useWorkflowHistoryStore) captured from undo/redo operations and surfaced in a new history popover, and refreshes several UI details (edge “flow” animation during/after execution, zoom controls + minimap/background, credentials access-control UX, and minor global/terminal styling tweaks).

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

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 4, 2026 8:00pm

[cursor]

Variables button uses wrong store, modal won't open

High Severity

The WorkflowToolbar reads and writes isOpen/setIsOpen on useVariablesStore (the data store from @/stores/variables/store), but the Variables component that renders the modal reads isOpen from useVariablesModalStore (the UI modal store from @/stores/variables/modal). These are two entirely separate Zustand stores with independent isOpen state, so clicking the "Variables" button toggles the wrong store and the modal never opens.

Additional Locations (1)

• apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-actions/workflow-actions.tsx#L90-L96

 

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

[greptile-apps]

Greptile Summary

This PR redesigns the workflow canvas UI with a floating toolbar (top-right), a collapsible side panel with an icon strip, animated edge flow overlays, a floating copilot input bar, and a new WorkflowHistory popover that surfaces both local snapshots (via a new persisted Zustand store) and deployed versions. Overall the architecture is sound and the UX intent is clear, but one P1 import bug will crash the "Export workflow" action.

Key changes:

• New WorkflowHistory component merges snapshot history and deployment versions into a single popover in WorkflowActions
• New workflow-history Zustand store captures snapshots on every undo-stack push, with LRU eviction and deduplication
• Panel gains collapsible state (isPanelOpen) persisted in the panel store; collapsed state renders a narrow icon strip
• WorkflowEdge adds an animated dashed overlay path when an edge's source block is executing or has succeeded
• New CopilotInput floating bar appears on the canvas only when the panel is collapsed

Issues found:

• workflow-actions.tsx imports useVariablesStore as usePanelVariablesStore from @/stores/panel, which does not export useVariablesStore. This is a compile-time TypeScript error and will throw at runtime whenever a user tries to export a workflow as JSON
• globals.css was modified despite the project guideline to avoid it
• CopilotInput uses hover: (fires on touch) instead of the project-standard hover-hover: variant, and hard-codes hex values rather than CSS design tokens
• isButtonDisabled in WorkflowToolbar contains dead isExecuting || logic

Confidence Score: 4/5

Not safe to merge as-is — one P1 import error will crash the Export Workflow action at runtime and fail TypeScript compilation.

The overall design is clean and the new stores are well-structured. However, the broken useVariablesStore import from @/stores/panel in workflow-actions.tsx is a genuine defect that will surface immediately when a user tries to export a workflow, and will also block TypeScript compilation. All other findings are P2 style/quality improvements. Fixing the import path is a one-line change that unblocks merging.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-actions/workflow-actions.tsx — broken import on line 37 must be fixed before merge.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-actions/workflow-actions.tsx	Imports useVariablesStore from @/stores/panel (which does not export it), causing a compile-time TS error and a runtime crash in handleExportJson.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-toolbar/workflow-history.tsx	New component combining deployment versions and local snapshots in a single popover; logic is well-structured with useCallback and proper logging.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-toolbar/workflow-toolbar.tsx	Refactored to a floating top-right toolbar with Variables and Run/Stop buttons + Deploy CTA. isButtonDisabled contains dead `isExecuting
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx	Adds collapsible panel with icon strip for collapsed state; well-structured with hydration-safe CSS variable approach.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx	Adds animated dashed overlay path when edge is actively executing or recently succeeded; correctly gates animation and marks overlay pointerEvents: none.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/copilot-input/copilot-input.tsx	New floating copilot input bar; uses bare hover: instead of hover-hover: and hardcodes hex color values instead of design tokens.
apps/sim/stores/workflow-history/store.ts	New persisted Zustand store that captures, de-duplicates, and LRU-evicts workflow snapshots; integrates with undo/redo subscription correctly.
apps/sim/app/_styles/globals.css	Modified despite project guideline to avoid editing globals.css; keyframe could be moved to tailwind.config.ts instead.

Comments Outside Diff (1)

1. apps/sim/app/_styles/globals.css, line 1-5 (link)

   globals.css modified — prefer local styles

   The project guideline explicitly states: "Avoid editing globals.css unless absolutely necessary. Move style changes to local component files instead."

   The animate-dash-animation keyframe consumed by workflow-edge.tsx can alternatively be declared in tailwind.config.ts (as the existing dash-animation already is) or inline in the component file, avoiding the need to touch the global stylesheet.

   Rule Used: Avoid editing the globals.css file unless absolute... (source)

   Learnt From
   simstudioai/sim#367

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

_{Reviews (1): Last reviewed commit: "chore: remove unnecessary changes" | Re-trigger Greptile}

[greptile-apps]

hover: used instead of hover-hover:, and hardcoded hex values

Two issues on these constants:

1. SEND_BUTTON_ACTIVE uses hover:bg-[#575757] and dark:hover:bg-[#CFCFCF]. Throughout the rest of the codebase (panel.tsx, workflow-toolbar.tsx, workflow-history.tsx, etc.) the project exclusively uses the hover-hover: media-query variant to avoid hover states activating on touch devices. Using hover: here is inconsistent and will fire on touch screens.

2. The hex colors (#383838, #575757, #E0E0E0, #808080) are hardcoded rather than referencing CSS custom properties, breaking the design-token system used everywhere else.

Consider replacing with hover-hover: variants and mapping to the nearest design tokens (e.g. bg-[var(--surface-5)], hover-hover:bg-[var(--surface-6)]).

[cursor]

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

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

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

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