From 606ffd827537410e31758b6114a199194229bdb2 Mon Sep 17 00:00:00 2001
From: Richard Palethorpe <io@richiejp.com>
Date: Mon, 14 Apr 2025 15:09:42 +0100
Subject: [PATCH] fix(ui): Don't try to pass unserializable Go objects to
 status UI (#28)

Signed-off-by: Richard Palethorpe <io@richiejp.com>
---
 webui/react-ui/src/pages/AgentStatus.jsx | 25 +++++-------------------
 webui/routes.go                          | 14 ++++++++++++-
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/webui/react-ui/src/pages/AgentStatus.jsx b/webui/react-ui/src/pages/AgentStatus.jsx
index 532a215..7f839a9 100644
--- a/webui/react-ui/src/pages/AgentStatus.jsx
+++ b/webui/react-ui/src/pages/AgentStatus.jsx
@@ -1,13 +1,12 @@
 import { useState, useEffect } from 'react';
-import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 
 function AgentStatus() {
   const { name } = useParams();
-  const navigate = useNavigate();
   const [statusData, setStatusData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [eventSource, setEventSource] = useState(null);
+  const [_eventSource, setEventSource] = useState(null);
   const [liveUpdates, setLiveUpdates] = useState([]);
 
   // Update document title
@@ -49,7 +48,7 @@ function AgentStatus() {
         const data = JSON.parse(event.data);
         setLiveUpdates(prev => [data, ...prev.slice(0, 19)]); // Keep last 20 updates
       } catch (err) {
-        console.error('Error parsing SSE data:', err);
+        setLiveUpdates(prev => [event.data, ...prev.slice(0, 19)]);
       }
     });
 
@@ -129,23 +128,9 @@ function AgentStatus() {
                   <h2 className="text-sm font-semibold mb-2">Agent Action:</h2>
                   <div className="status-details">
                     <div className="status-row">
-                      <span className="status-label">Result:</span>
-                      <span className="status-value">{formatValue(item.Result)}</span>
+                      <span className="status-label">{index}</span>
+                      <span className="status-value">{formatValue(item)}</span>
                     </div>
-                    <div className="status-row">
-                      <span className="status-label">Action:</span>
-                      <span className="status-value">{formatValue(item.Action)}</span>
-                    </div>
-                    <div className="status-row">
-                      <span className="status-label">Parameters:</span>
-                      <span className="status-value pre-wrap">{formatValue(item.Params)}</span>
-                    </div>
-                    {item.Reasoning && (
-                      <div className="status-row">
-                        <span className="status-label">Reasoning:</span>
-                        <span className="status-value reasoning">{formatValue(item.Reasoning)}</span>
-                      </div>
-                    )}
                   </div>
                 </div>
               </div>
diff --git a/webui/routes.go b/webui/routes.go
index 002c364..988ba07 100644
--- a/webui/routes.go
+++ b/webui/routes.go
@@ -4,6 +4,7 @@ import (
 	"crypto/subtle"
 	"embed"
 	"errors"
+	"fmt"
 	"math/rand"
 	"net/http"
 	"path/filepath"
@@ -238,9 +239,20 @@ func (app *App) registerRoutes(pool *state.AgentPool, webapp *fiber.App) {
 			history = &state.Status{ActionResults: []types.ActionState{}}
 		}
 
+		entries := []string{}
+		for _, h := range Reverse(history.Results()) {
+			entries = append(entries, fmt.Sprintf(
+				"Result: %v Action: %v Params: %v Reasoning: %v", 
+				h.Result,
+				h.Action.Definition().Name, 
+				h.Params, 
+				h.Reasoning,
+			))
+		}
+
 		return c.JSON(fiber.Map{
 			"Name":    c.Params("name"),
-			"History": Reverse(history.Results()),
+			"History": entries,
 		})
 	})