feat: enhance A2A client with task polling and JSON-RPC request handling

- Added polling functionality to monitor task completion in a2aClient.js.
- Updated constructor to accept options for polling settings.
- Improved artifact handling in App.js to extract content from response artifacts.
- Modified MessageItem.js to display actual JSON-RPC requests for user messages.
- Adjusted web security settings in electron.js to allow cross-origin requests.

Author: dmi3coder

public/electron.js

@@ -150,10 +150,16 @@ function createWindow() {
       nodeIntegration: true,
       contextIsolation: false,
       enableRemoteModule: true,
+      webSecurity: false, // Disable web security to bypass CORS
     },
     show: false, // Don't show until ready-to-show event
   });
 
+  // Disable the same-origin policy to allow cross-origin requests
+  mainWindow.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
+    callback({ requestHeaders: { ...details.requestHeaders } });
+  });
+
   mainWindow.loadURL(
     isDev
       ? 'http://localhost:12121'

src/App.js

@@ -321,10 +321,24 @@ function App() {
       if (response.result.artifacts && Array.isArray(response.result.artifacts)) {
         artifacts = response.result.artifacts;
         log('info', 'Found artifacts', artifacts);
+        
+        // Try to extract content from result artifact
+        for (const artifact of response.result.artifacts) {
+          if (artifact.name === 'result' && artifact.parts && Array.isArray(artifact.parts)) {
+            for (const part of artifact.parts) {
+              if (part.type === 'text' && part.text) {
+                log('info', 'Found text in artifacts.result.parts', part.text);
+                content = part.text;
+                break;
+              }
+            }
+          }
+        }
       }
 
       // Path for agents using status.message.parts format
-      if (response.result.status && response.result.status.message && 
+      if (content === 'No response content found' && 
+          response.result.status && response.result.status.message && 
           response.result.status.message.parts && response.result.status.message.parts.length > 0) {
         for (const part of response.result.status.message.parts) {
           if (part.type === 'text' && part.text) {
@@ -537,7 +551,9 @@ function App() {
           const updated = [...prev[selectedAgent.id]];
           const idx = updated.findIndex(msg => msg.id === userMessageId);
           if (idx !== -1) {
-            updated[idx] = { ...updated[idx], rawResponse: response.jsonRpcRequest };
+            // Make sure we're getting the actual JSON-RPC request object
+            const jsonRpcPayload = response.jsonRpcRequest || requestObject;
+            updated[idx] = { ...updated[idx], rawResponse: jsonRpcPayload };
           }
           return { ...prev, [selectedAgent.id]: updated };
         });
@@ -581,7 +597,9 @@ function App() {
           const updated = [...prev[selectedAgent.id]];
           const idx = updated.findIndex(msg => msg.id === userMessageId);
           if (idx !== -1) {
-            updated[idx] = { ...updated[idx], rawResponse: response.jsonRpcRequest };
+            // Make sure we're getting the actual JSON-RPC request object
+            const jsonRpcPayload = response.jsonRpcRequest || requestObject;
+            updated[idx] = { ...updated[idx], rawResponse: jsonRpcPayload };
           }
           return { ...prev, [selectedAgent.id]: updated };
         });

src/components/MessageItem.js

@@ -68,8 +68,16 @@ function MessageItem({ message }) {
   };
 
   const stateInfo = getStateInfo();
-  // Use the raw response data instead of simplified object
+  
+  // Make sure we display the actual JSON-RPC request for user messages
   const rawResponseData = message.rawResponse || message;
+  
+  // Check if this is a user message with a real JSON-RPC request
+  const hasJsonRpcRequest = isUser && 
+    message.rawResponse && 
+    message.rawResponse.jsonrpc === '2.0' && 
+    message.rawResponse.method && 
+    message.rawResponse.params;
 
   // Render an artifact
   const renderArtifact = (artifact, index) => {
@@ -187,10 +195,10 @@ function MessageItem({ message }) {
           <Box sx={{ ml: 1 }}>
             <JsonViewer 
               data={rawResponseData} 
-              buttonLabel="Raw" 
+              buttonLabel={hasJsonRpcRequest ? "RPC" : "Raw"} 
               buttonSize="small" 
               buttonVariant="text" 
-              buttonColor="primary"
+              buttonColor={hasJsonRpcRequest ? "success" : "primary"}
               buttonIcon={<DataObjectIcon fontSize="small" />}
             />
           </Box>
@@ -243,4 +251,4 @@ function MessageItem({ message }) {
   );
 }
 
-export default MessageItem; 
+export default MessageItem;

src/services/a2aClient.js

@@ -4,11 +4,16 @@ import { v4 as uuidv4 } from 'uuid';
  * A2A Client service for communicating with AI agents
  */
 class A2AClient {
-  constructor(agentUrl) {
+  constructor(agentUrl, options = {}) {
     this.agentUrl = agentUrl;
     this.headers = {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
+      'Origin': window.location.origin,
+      'Access-Control-Allow-Origin': '*',
     };
+    // Polling settings with defaults
+    this.pollInterval = options.pollInterval || 1000; // 1 second by default
+    this.maxPollAttempts = options.maxPollAttempts || 30; // 30 attempts max (30 seconds)
   }
 
   /**
@@ -93,6 +98,56 @@ class A2AClient {
     return request;
   }
 
+  /**
+   * Poll a task until it completes or fails
+   * @param {string} taskId The task ID to poll
+   * @param {string} sessionId The session ID 
+   * @returns {Promise<Object>} The final task result
+   */
+  async pollTaskUntilComplete(taskId, sessionId) {
+    this._log('info', 'Starting task polling', { taskId, sessionId });
+    
+    let attempts = 0;
+    let taskState = null;
+    
+    while (attempts < this.maxPollAttempts) {
+      attempts++;
+      
+      try {
+        const result = await this.getTask(taskId);
+        
+        if (!result || !result.result) {
+          this._log('error', 'Invalid task response', result);
+          throw new Error('Invalid task response structure');
+        }
+        
+        const status = result.result.status;
+        taskState = status && status.state ? status.state : null;
+        
+        this._log('info', `Task poll attempt ${attempts}`, { taskId, state: taskState });
+        
+        // Terminal states
+        if (taskState === 'completed' || taskState === 'failed' || taskState === 'canceled') {
+          this._log('info', 'Task polling complete', { taskId, finalState: taskState });
+          return {
+            taskId,
+            sessionId,
+            ...result
+          };
+        }
+        
+        // Wait before polling again
+        await new Promise(resolve => setTimeout(resolve, this.pollInterval));
+      } catch (error) {
+        this._log('error', 'Error polling task', { taskId, error: error.message });
+        throw error;
+      }
+    }
+    
+    this._log('warn', 'Task polling timed out', { taskId, attempts });
+    throw new Error(`Task polling timed out after ${attempts} attempts`);
+  }
+
   /**
    * Send a task to the agent
    * @param {string} message The message text
@@ -175,6 +230,24 @@ class A2AClient {
         taskId
       });
 
+      // Check if the task is in a "submitted" state and needs polling
+      if (result && result.result && result.result.status && result.result.status.state === 'submitted') {
+        this._log('info', 'Task submitted, starting polling', { taskId });
+        
+        // Store the original request before polling
+        const originalRequest = jsonRpcRequest;
+        
+        // Poll until completion
+        const pollingResult = await this.pollTaskUntilComplete(taskId, actualSessionId);
+        
+        // Return the result with the original request attached
+        return {
+          ...pollingResult,
+          jsonRpcRequest: originalRequest
+        };
+      }
+      
+      // If not in submitted state, return the result directly
       return {
         taskId,
         sessionId: actualSessionId,
@@ -240,7 +313,7 @@ class A2AClient {
     };
 
     // Create the JSON-RPC request
-    const jsonRpcRequest = this._createJsonRpcRequest('send_task_streaming', params);
+    const jsonRpcRequest = this._createJsonRpcRequest('tasks/send', params);
 
     try {
       // Log the actual JSON-RPC payload being sent
@@ -416,7 +489,7 @@ class A2AClient {
     };
 
     // Create the JSON-RPC request
-    const jsonRpcRequest = this._createJsonRpcRequest('get_task', params);
+    const jsonRpcRequest = this._createJsonRpcRequest('tasks/get', params);
 
     try {
       const response = await fetch(this.agentUrl, {