feat(workflow): Implement Visual Workflow Editor with Execution Engine #6055
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The new Toolbox tab allows users to access various tools and workflows to enhance their coding experience. This change is part of the ongoing effort to expand the capabilities of the Cody AI assistant and provide a more comprehensive set of development tools. Co-authored-by: Cody <[email protected]>
This change introduces a new Workflow Editor feature to the Cody AI assistant. The Workflow Editor allows users to create, edit, and manage their custom workflows directly within the Cody extension. The key changes include: - Added a new `ToolboxTab` component with a button to open the Workflow Editor - Implemented a new `WorkflowEditor` component that renders the Workflow Editor UI - Registered a new `cody.openWorkflowEditor` command to open the Workflow Editor panel - Added the necessary HTML, TypeScript, and package.json changes to support the Workflow Editor functionality This enhancement is part of the ongoing effort to expand the capabilities of the Cody AI assistant and provide a more comprehensive set of development tools for users.
- Add workflow editor implementation with basic node/edge support - Update webview dist path to 'dist/webviews' - Refactor VSCode API usage in ToolboxTab component - Rename 'Workflows' tab to 'Toolbox' for clarity - Add workflow.html entry in vite config This change introduces a visual workflow editor using ReactFlow library, enabling drag-and-drop workflow creation with initial nodes for git operations.
…e cleanup - Extract WorkflowApp component from index.tsx for better code organization - Add dispose handler in workflow.ts for proper resource cleanup - Wrap workflow app with AppWrapper component - Update script extension from .tsx to .js in workflow.html This change improves component modularity and memory management while maintaining existing functionality.
…t support - Add VSCodeWrapper API integration to WorkflowApp component - Update workflow entry point from .js to .tsx - Refine component props interface - Simplify editor button text
…components - Refactor WorkflowApp to use ReactFlowProvider for better state management - Add WorkflowSidebar component with actions and templates sections - Create WorkflowEditor story for component testing - Improve ToolboxTab UI using shadcn Button components - Restructure workflow-related components for better organization This change improves the workflow editor's functionality and maintainability while providing a better user experience through consistent UI components.
…tion - Add Flow.module.css for consistent node styling - Apply VSCode theme variables for colors and borders - Ensure visual consistency across all node types - Improve code formatting in story file
- Add typed CLI and LLM node components with specific styling - Replace CSS modules with inline component styles - Enhance node connections with bezier curves - Restructure sidebar with clear CLI and LLM action categories - Improve type safety with WorkflowNode interface Migration: Flow.module.css styles moved to inline component styles
* Move workflow.ts from commands/ to dedicated workflow/ directory * Update import paths in main.ts to reflect new structure * fix(ui): rename sidebar button from "Cody Generate Reply" to "Cody Inference" BREAKING CHANGE: workflow module path has changed from 'commands/workflow' to 'workflow/workflow'
…tion - Add property editor sidebar panel for editing node attributes - Implement node selection and movement state tracking - Add new UI components (Input, Label, Textarea) for form controls - Enhance node visualization with different border states for selected/moving - Add @radix-ui/react-label dependency for accessible form labels
… handling - Extract node logic into separate component file - Implement proper selection management with background interactions - Add shared node styling and type definitions - Organize Flow component into logical sections with clear comments - Create factory function for node creation - Move default workflow configuration to Nodes component
…utton styling - Add Open/Save workflow buttons at the top - Update button styling from ghost to secondary variant - Remove redundant div wrappers around buttons - Add visual separator between sections - Standardize button width and spacing
- Implement workflow file save/load operations with JSON support - Add UI controls for saving and loading workflows in sidebar - Create workflow protocol types for extension communication - Update component types for better type safety - Configure default save path under .cody/workflows
- Add load workflow handler in extension - Implement workflow loading UI with open button - Add message protocol for bi-directional workflow loading - Setup event listeners for loaded workflow data - Update WorkflowProtocol types to support load operations
- Add workflow executor with topological sorting for node execution order - Implement CLI and LLM node execution handlers with status feedback - Add execution UI controls and visual node status indicators - Extend workflow protocol to support execution status messages - Add execute button in workflow sidebar This change enables users to execute workflow nodes in the correct order with visual feedback of execution progress.
- Add execution context to handle inter-node data flow - Implement secure CLI command execution with workspace validation - Add forbidden commands list for security - Add parent-child node output passing - Enhance UI to display node execution results - Show node IDs in property editor Security: Prevents execution of dangerous system commands
- Enhance topological sort to maintain source node ordering - Add combineParentOutputsByConnectionOrder helper function - Refactor input combination logic to preserve connection sequence - Improve predictability of multi-parent node execution This change ensures workflow outputs are combined in the exact order of edge connections, providing more deterministic behavior.
- Introduce CustomOrderedEdge component for numbered edge display - Implement topological sorting for proper edge order management - Move Edge type definition to dedicated component - Update workflow graph to show numbered execution order - Maintain visual consistency with VS Code theme using badge styling This change improves workflow readability by clearly indicating execution order.
- Remove unused accordion structure and placeholder features - Delete ToolboxItem interface and related data - Focus UI on core workflow editor functionality - Clean up component imports
- Simplify CLI node label from "Git Diff" to "CLI Command" - Consolidate LLM node references to simply "Cody"
- Add pre-execution validation for CLI and LLM nodes - Implement visual error states for invalid nodes - Add error highlighting in node UI with VS Code theme colors - Streamline error messaging to prevent duplicates - Add execution completion message on workflow errors - Improve error state management in React components This improves user experience by providing immediate feedback for invalid nodes and clearer error visualization during workflow execution.
- Add ChatClient integration for LLM node execution - Implement proper message streaming and response handling - Add security measures with shell and prompt input sanitization - Remove mock delay implementations - Pass chatClient through workflow registration chain This completes the LLM node execution feature and improves workflow security.
- Implement PreviewNode component with read-only content display - Add preview node execution logic in workflow executor - Update Flow component to handle preview node state updates - Add Preview section in workflow sidebar for node creation - Integrate preview functionality with existing node system
- Retain webview context when hidden for better state persistence - Add visual execution status indicators in workflow sidebar - Track workflow execution state to prevent concurrent runs - Initialize default content for preview nodes - Streamline workflow protocol type definitions This enhances the user experience by providing clear feedback during workflow execution and prevents potential state-related issues.
* Replace numeric IDs with UUID for workflow nodes * Add comprehensive test coverage for topology sorting * Optimize node output handling and sanitization * Clean up redundant comments and simplify code BREAKING CHANGE: Node ID generation now uses UUID instead of incremental numbers
- Introduce new Input node type for direct text input in workflows - Refactor CLI node validation to be more flexible - Update workflow executor to handle Input node processing - Add UI components for Input node in sidebar and property editor - Streamline Preview node implementation
- Add detailed JSDoc comments to key functions in workflow-executor.ts - Document workflow saving/loading functions in workflow-io.ts - Add function documentation in workflow.ts and Nodes.tsx - Improve code organization in Flow.tsx - Rename WorkflowTab.story.tsx to ToolboxTab.story.tsx This change improves code maintainability by providing clear function descriptions and usage instructions across the workflow module.
- Rename 'input' node type to 'text-format' for clarity - Add consistent border color system for different node states - Implement shadcn/ui Textarea component - Improve node creation behavior for Preview and Input types - Enhance visual feedback for node states (error, executing, selected)
- Implement sidebar resizing functionality with min/max width constraints - Add mouse event handlers for smooth resize experience - Refactor topologicalEdgeSort placement for better code organization - Introduce createEdge helper function for improved edge creation - Update WorkflowSidebar to support dynamic width - Enhance type safety and styling consistency
- Add consistent borders and VS Code theme-aware styling - Improve sidebar layout with accordion-based property editor - Refine resizer appearance and interaction states
…nality - Add shift-drag node cloning capability for duplicating workflow nodes - Introduce clear workflow button to reset entire workflow state - Adjust node positioning calculation for better initial placement - Restructure WorkflowSidebar component to accommodate new controls The node cloning feature improves workflow building efficiency while clear functionality helps with workflow management.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces a comprehensive visual workflow editor integrated with VSCode, enabling users to create, edit, and execute workflows directly in the IDE.
Key Features
Technical Details
Screenshots
CodyWorkflowTrailer.mp4
Update 11/5/2024:
Test plan
Changelog