feat(workflow): add pause and resume functionality to team workflow

README.md

@@ -445,7 +445,6 @@ For more details on how to utilize observability features in KaibanJS, please vi
 - [LLM-friendly Documentation](https://docs.kaibanjs.com/llms-full.txt) - Optimized for AI tools and coding assistants
 - [Join Our Discord](https://www.kaibanjs.com/discord)
 
-
 ### Compatibility
 
 KaibanJS aims to be compatible with major front-end frameworks like React, Vue, Angular, and NextJS, making it a versatile choice for developers. The JavaScript ecosystem is a "bit complex...". If you have any problems, please tell us and we'll help you fix them.

packages/tools/README.md

@@ -23,21 +23,21 @@ npm install @kaibanjs/tools
 
 Here's a list of all available tools. Click on the tool names to view their detailed documentation.
 
-| Tool             | Description                                                            | Documentation                           |
-| ---------------- | ---------------------------------------------------------------------- | --------------------------------------- |
-| Exa              | AI-focused search engine using embeddings to organize web data         | [README](src/exa/README.md)             |
-| Firecrawl        | Web scraping service for extracting structured data                    | [README](src/firecrawl/README.md)       |
-| GitHub Issues    | GitHub API integration for fetching and analyzing repository issues    | [README](src/github-issues/README.md)   |
-| Jina URL to MD   | Convert web content into clean, LLM-ready markdown using Jina.ai      | [README](src/jina-url-to-markdown/README.md) |
-| PDF Search       | Extract and search content from PDF documents                          | [README](src/pdf-search/README.md)      |
-| Serper           | Google Search API integration with support for multiple search types   | [README](src/serper/README.md)          |
-| Simple RAG       | Basic Retrieval-Augmented Generation implementation for Q&A            | [README](src/simple-rag/README.md)      |
-| Tavily Search    | AI-optimized search engine for comprehensive and accurate results      | [README](src/tavily/README.md)          |
-| Text File Search | Search and analyze content within text files                           | [README](src/textfile-search/README.md) |
-| Website Search   | Semantic search within website content using RAG models                | [README](src/website-search/README.md)  |
-| WolframAlpha     | Computational intelligence engine for complex queries and calculations | [README](src/wolfram-alpha/README.md)   |
-| Zapier Webhook   | Integration with Zapier for workflow automation                        | [README](src/zapier-webhook/README.md)  |
-| Make Webhook     | Integration with Make (formerly Integromat) for workflow automation    | [README](src/make-webhook/README.md)    |
+| Tool             | Description                                                            | Documentation                                |
+| ---------------- | ---------------------------------------------------------------------- | -------------------------------------------- |
+| Exa              | AI-focused search engine using embeddings to organize web data         | [README](src/exa/README.md)                  |
+| Firecrawl        | Web scraping service for extracting structured data                    | [README](src/firecrawl/README.md)            |
+| GitHub Issues    | GitHub API integration for fetching and analyzing repository issues    | [README](src/github-issues/README.md)        |
+| Jina URL to MD   | Convert web content into clean, LLM-ready markdown using Jina.ai       | [README](src/jina-url-to-markdown/README.md) |
+| PDF Search       | Extract and search content from PDF documents                          | [README](src/pdf-search/README.md)           |
+| Serper           | Google Search API integration with support for multiple search types   | [README](src/serper/README.md)               |
+| Simple RAG       | Basic Retrieval-Augmented Generation implementation for Q&A            | [README](src/simple-rag/README.md)           |
+| Tavily Search    | AI-optimized search engine for comprehensive and accurate results      | [README](src/tavily/README.md)               |
+| Text File Search | Search and analyze content within text files                           | [README](src/textfile-search/README.md)      |
+| Website Search   | Semantic search within website content using RAG models                | [README](src/website-search/README.md)       |
+| WolframAlpha     | Computational intelligence engine for complex queries and calculations | [README](src/wolfram-alpha/README.md)        |
+| Zapier Webhook   | Integration with Zapier for workflow automation                        | [README](src/zapier-webhook/README.md)       |
+| Make Webhook     | Integration with Make (formerly Integromat) for workflow automation    | [README](src/make-webhook/README.md)         |
 
 ## Development
 

packages/tools/src/_utils/AgentWithToolPreviewer.jsx

@@ -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/tools_agent_preview.css

@@ -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;
+}

playground/react/src/AgentsBoardDebugger.jsx

@@ -139,7 +139,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>

src/agents/baseAgent.js

@@ -106,6 +106,10 @@ class BaseAgent {
   workOnTask(_task) {
     throw new Error('workOnTask must be implemented by subclasses.');
   }
+
+  workOnTaskResume(_task) {
+    throw new Error('workOnTaskResume must be implemented by subclasses.');
+  }
 }
 
 export { BaseAgent };