Workflows v2: Enhanced Task Management and Control System (#221)

# Workflows v2: Enhanced Task Management and Control System

This major update introduces a sophisticated workflow management system
with powerful new capabilities for task orchestration and execution
control. Key features include:

## 🎮 Advanced Workflow Controls
- Pause/Resume functionality for fine-grained workflow management
- Immediate workflow termination with proper cleanup
- Enhanced state management for workflow interruptions

## 🔄 Task Management Improvements
- New TaskManager for better task lifecycle handling
- Deterministic execution patterns support:
  - Sequential execution
  - Dependency-based execution
  - Parallel task processing
- Improved task status tracking and feedback mechanisms

## 🛠 Technical Enhancements
- Integration of `dependency-graph` for robust task dependency
management
- Enhanced ESLint configurations and Jest test patterns
- Streamlined error handling with specialized abort controllers
- Comprehensive test coverage with updated snapshots

## 📊 Developer Experience
- Better debugging capabilities through enhanced logging
- Improved workflow state visibility
- More predictable task execution patterns
- Cleaner codebase structure with removed redundant components

## 🙏 Special Thanks
- **@anthonydevs17** for implementing the core pause/resume
functionality and workflow control features
- **@ernestocarrasco** for the task management refactoring and test
suite improvements

This update represents a significant step forward in KaibanJS's workflow
management capabilities, providing developers with more control and
visibility over their agent-based workflows while maintaining robustness
and predictability.

[Source: PR #221](#221)

Author: darielnoel

eslint.config.mjs

@@ -46,6 +46,8 @@ export default [
       '@typescript-eslint/no-require-imports': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/prop-types': 'off',
+      'jest/no-focused-tests': 'off',
+      'jest/no-disabled-tests': 'off',
     },
   },
 ];

jest.config.js

@@ -9,7 +9,5 @@ module.exports = {
   testEnvironment: 'node', // Use Node.js environment for executing tests,
   verbose: true, // Make Jest more verbose
   silent: false, // Ensure Jest is not silent (though this is not directly related to console.log output)
-  // testMatch: [
-  //   "**/tests/e2e/exampl/**/*.js"
-  // ], // Run tests only in the specific directory
+  // testMatch: ['**/tests/e2e/**/eventPlanningTeam.test.js'], // Run tests only in the specific directory
 };

package-lock.json

@@ -33,7 +33,7 @@
     "test:watch": "TEST_ENV=mocked-llm-apis jest --testPathPattern='tests/e2e' --watch",
     "test:debug": "TEST_ENV=mocked-llm-apis node --inspect-brk node_modules/.bin/jest --runInBand --verbose --testPathPattern='tests/e2e'",
     "test:prod": "npm run build && jest --testPathPattern='tests/e2e'",
-    "test:integration": "TEST_ENV=mocked-llm-apis jest --testPathPattern='tests/e2e'",
+    "test:integration": "TEST_ENV=mocked-llm-apis jest --testPathPattern='tests/e2e' --verbose",
     "test:e2e": "TEST_ENV=real-llm-apis jest --testPathPattern='tests/e2e'",
     "test:unit": "jest --testPathPattern='tests/unit' --watch",
     "test:unit:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --verbose --testPathPattern='tests/unit'",
@@ -96,12 +96,13 @@
     "@telemetrydeck/sdk": "^2.0.4",
     "ansis": "^3.3.2",
     "chalk": "^5.3.0",
+    "dependency-graph": "^1.0.0",
     "dotenv": "^16.4.5",
     "figlet": "^1.7.0",
     "langchain": "0.2.10",
     "loglevel": "^1.9.1",
     "ora": "^8.1.0",
-    "p-queue": "^8.0.1",
+    "p-queue": "^8.1.0",
     "readline": "^1.3.0",
     "uuid": "10.0.0",
     "zod-to-json-schema": "^3.23.2",

package.json

@@ -73,6 +73,26 @@ export const AgentWithToolPreviewer = ({ team }) => {
     }
   };
 
+  const handlePauseResume = async () => {
+    try {
+      if (teamWorkflowStatus === 'PAUSED') {
+        team.resume();
+      } else {
+        team.pause();
+      }
+    } catch (error) {
+      console.error('Error pausing/resuming workflow:', error);
+    }
+  };
+
+  const handleStop = async () => {
+    try {
+      team.stop();
+    } catch (error) {
+      console.error('Error stopping workflow:', error);
+    }
+  };
+
   if (!agents || agents.length === 0) {
     return <div className="no-team-message">No agents available</div>;
   }
@@ -130,13 +150,34 @@ export const AgentWithToolPreviewer = ({ team }) => {
               rows={5}
               spellCheck="false"
             />
-            <button
-              className={`start-button ${teamWorkflowStatus.toLowerCase()}`}
-              onClick={handleStartTeam}
-              disabled={teamWorkflowStatus === 'RUNNING'}
-            >
-              {teamWorkflowStatus === 'RUNNING' ? 'Running...' : 'Start Team'}
-            </button>
+            <div className="workflow-buttons">
+              <button
+                className={`start-button ${teamWorkflowStatus.toLowerCase()}`}
+                onClick={handleStartTeam}
+                disabled={
+                  teamWorkflowStatus === 'RUNNING' ||
+                  teamWorkflowStatus === 'PAUSED'
+                }
+              >
+                {teamWorkflowStatus === 'RUNNING' ? 'Running...' : 'Start Team'}
+              </button>
+
+              <button
+                className={`pause-resume-button ${teamWorkflowStatus.toLowerCase()}`}
+                onClick={handlePauseResume}
+                disabled={!['RUNNING', 'PAUSED'].includes(teamWorkflowStatus)}
+              >
+                {teamWorkflowStatus === 'PAUSED' ? 'Resume' : 'Pause'}
+              </button>
+
+              <button
+                className={`stop-button ${teamWorkflowStatus.toLowerCase()}`}
+                onClick={handleStop}
+                disabled={!['RUNNING', 'PAUSED'].includes(teamWorkflowStatus)}
+              >
+                Stop
+              </button>
+            </div>
           </div>
 
           <div className="workflow-status">

packages/tools/src/_utils/AgentWithToolPreviewer.jsx

@@ -248,3 +248,33 @@ pre {
 .status-using_tool_end {
   color: #2e7d32;
 }
+
+.workflow-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.pause-resume-button,
+.stop-button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.pause-resume-button:disabled,
+.stop-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pause-resume-button {
+  background-color: #f0ad4e;
+  color: white;
+}
+
+.stop-button {
+  background-color: #d9534f;
+  color: white;
+}

packages/tools/src/_utils/tools_agent_preview.css

@@ -152,7 +152,23 @@ const AgentsBoardDebugger = ({ team, title = null }) => {
           <button className="actionButton" onClick={startTeam}>
             Start Workflow
           </button>
-
+          <button
+            className="actionButton"
+            onClick={() => {
+              if (teamWorkflowStatus === 'PAUSED') {
+                team.resume();
+              } else if (teamWorkflowStatus === 'RUNNING') {
+                team.pause();
+              }
+            }}
+          >
+            {teamWorkflowStatus === 'PAUSED'
+              ? 'Resume Workflow'
+              : 'Pause Workflow'}
+          </button>
+          <button className="actionButton" onClick={() => team.stop()}>
+            Stop Workflow
+          </button>
           {teamWorkflowStatus === 'running_workflow' && <Spinner />}
         </div>
       </div>

playground/react/src/AgentsBoardDebugger.jsx

@@ -0,0 +1,31 @@
+import AgentsBoardDebugger from '../AgentsBoardDebugger';
+import teamSequential from '../teams/event_planning/openai';
+import teamParallel from '../teams/event_planning/openai_parallel';
+import teamMixed from '../teams/event_planning/openai_mixed';
+import '../index.css';
+
+export default {
+  title: 'Features/Task Chaining',
+  component: AgentsBoardDebugger,
+};
+
+export const SequentialEventPlanning = {
+  args: {
+    team: teamSequential,
+    title: 'Event Planning with Sequential Tasks',
+  },
+};
+
+export const ParallelEventPlanning = {
+  args: {
+    team: teamParallel,
+    title: 'Event Planning with Parallel Tasks',
+  },
+};
+
+export const MixedEventPlanning = {
+  args: {
+    team: teamMixed,
+    title: 'Event Planning with Mixed Task Dependencies',
+  },
+};