From 05b7cce633b1dd954a780ad1c528700478c4f7d2 Mon Sep 17 00:00:00 2001
From: "LocalAI [bot]" <139863280+localai-bot@users.noreply.github.com>
Date: Sun, 8 Mar 2026 21:15:29 +0100
Subject: [PATCH] feat: add Events column to Agents list page (#8870)

- Add 'Events' column header between 'Status' and 'Actions'
- Fetch observable counts for each agent using /api/agents/<name>/observables
- Display events count as clickable link navigating to agent status page
- Events count updates every 5 seconds with agent refresh interval
- Shows '0' if API call fails for an agent

Co-authored-by: localai-bot <localai-bot@noreply.github.com>
---
 core/http/react-ui/src/pages/Agents.jsx | 40 ++++++++++++++++++-------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/core/http/react-ui/src/pages/Agents.jsx b/core/http/react-ui/src/pages/Agents.jsx
index 1ef17290e..6232bcdcf 100644
--- a/core/http/react-ui/src/pages/Agents.jsx
+++ b/core/http/react-ui/src/pages/Agents.jsx
@@ -16,10 +16,25 @@ export default function Agents() {
       const names = Array.isArray(data.agents) ? data.agents : []
       const statuses = data.statuses || {}
       if (data.agent_hub_url) setAgentHubURL(data.agent_hub_url)
-      setAgents(names.map(name => ({
-        name,
-        status: statuses[name] ? 'active' : 'paused',
-      })))
+      
+      // Fetch observable counts for each agent
+      const agentsWithCounts = await Promise.all(
+        names.map(async (name) => {
+          let eventsCount = 0
+          try {
+            const observables = await agentsApi.observables(name)
+            eventsCount = observables?.History?.length || 0
+          } catch (_err) {
+            eventsCount = 0
+          }
+          return {
+            name,
+            status: statuses[name] ? 'active' : 'paused',
+            eventsCount,
+          }
+        })
+      )
+      setAgents(agentsWithCounts)
     } catch (err) {
       addToast(`Failed to load agents: ${err.message}`, 'error')
     } finally {
@@ -228,6 +243,7 @@ export default function Agents() {
                   <tr>
                     <th>Name</th>
                     <th>Status</th>
+                    <th>Events</th>
                     <th style={{ textAlign: 'right' }}>Actions</th>
                   </tr>
                 </thead>
@@ -243,6 +259,15 @@ export default function Agents() {
                           </a>
                         </td>
                         <td>{statusBadge(agent.status)}</td>
+                        <td>
+                          <a
+                            className="agents-name"
+                            onClick={() => navigate(`/agents/${encodeURIComponent(name)}/status`)}
+                            title={`${agent.eventsCount} events - Click to view`}
+                          >
+                            {agent.eventsCount}
+                          </a>
+                        </td>
                         <td>
                           <div className="agents-action-group">
                             <button
@@ -266,13 +291,6 @@ export default function Agents() {
                             >
                               <i className="fas fa-comment" />
                             </button>
-                            <button
-                              className="btn btn-secondary btn-sm"
-                              onClick={() => navigate(`/agents/${encodeURIComponent(name)}/status`)}
-                              title="Status & Observables"
-                            >
-                              <i className="fas fa-chart-bar" />
-                            </button>
                             <button
                               className="btn btn-secondary btn-sm"
                               onClick={() => handleExport(name)}