feat(agents): integrate HeartbeatPanel with live events (#1522)

* feat(agents): integrate HeartbeatPanel with live events (#1522)

Emit heartbeat_run_started and heartbeat_run_completed live events on
channel agent:{id} from HeartbeatScheduler, and subscribe HeartbeatPanel
to those events so run history refreshes in real-time without polling.

* fix(agents): watch agentId with immediate:true to subscribe on mount (#1522)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: mrveiss

autobot-backend/services/heartbeat_scheduler.py

@@ -21,6 +21,7 @@
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker
 
+from live_event_manager import publish_live_event
 from models.heartbeat import (
     AgentRuntimeState,
     AgentWakeupRequest,
@@ -190,6 +191,11 @@ async def _start_run(
             await _append_event(session, run_id, "run_started", "Heartbeat run started")
             await session.commit()
         logger.info("Heartbeat run %s started for agent %s", run_id, agent_id)
+        await publish_live_event(
+            f"agent:{agent_id}",
+            "heartbeat_run_started",
+            {"run_id": str(run_id), "agent_id": agent_id, "trigger": trigger.value},
+        )
         return run_id, state_id, timeout
 
     async def _invoke_agent(
@@ -250,6 +256,18 @@ async def _finalize_run(
                 f"Run finished with status={final_status}",
             )
             await session.commit()
+        await publish_live_event(
+            f"agent:{agent_id}",
+            "heartbeat_run_completed",
+            {
+                "run_id": str(run_id),
+                "agent_id": agent_id,
+                "status": final_status,
+                "error_message": error_msg,
+                "tokens_used": usage.get("tokens_used"),
+                "cost_usd": usage.get("cost_usd"),
+            },
+        )
         logger.info(
             "Run %s finished: status=%s agent=%s", run_id, final_status, agent_id
         )

autobot-frontend/src/components/agents/HeartbeatPanel.vue

@@ -150,12 +150,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
 import { getBackendUrl } from '@/config/ssot-config'
 import { createLogger } from '@/utils/debugUtils'
+import { useLiveEvents } from '@/composables/useLiveEvents'
+import type { LiveEvent } from '@/services/LiveEventService'
 
 const logger = createLogger('HeartbeatPanel')
+const { subscribe, unsubscribe } = useLiveEvents()
 
 interface HeartbeatConfig {
   agent_id: string
@@ -221,6 +224,47 @@ const editMaxDuration = ref(600)
 const expandedRunId = ref<string | null>(null)
 const expandedRun = computed(() => runs.value.find((r) => r.id === expandedRunId.value) ?? null)
 
+// ── Live event subscription ───────────────────────────────────────────────────
+
+let _liveUnsub: (() => void) | null = null
+
+function _onLiveEvent(event: LiveEvent): void {
+  if (event.event_type === 'heartbeat_run_started') {
+    logger.debug('heartbeat_run_started received, refreshing data', { run_id: event.payload.run_id })
+    void loadData()
+  } else if (event.event_type === 'heartbeat_run_completed') {
+    logger.debug('heartbeat_run_completed received, refreshing data', {
+      run_id: event.payload.run_id,
+      status: event.payload.status,
+    })
+    void loadData()
+  }
+}
+
+watch(agentId, (newId: string, oldId: string) => {
+  if (oldId) {
+    const oldChannel = `agent:${oldId}`
+    if (_liveUnsub) {
+      _liveUnsub()
+      _liveUnsub = null
+    }
+    unsubscribe(oldChannel, _onLiveEvent)
+  }
+  if (newId) {
+    _liveUnsub = subscribe(`agent:${newId}`, _onLiveEvent)
+    logger.debug('Subscribed to live events for agent', { agentId: newId })
+  }
+}, { immediate: true })
+
+onUnmounted(() => {
+  if (_liveUnsub) {
+    _liveUnsub()
+    _liveUnsub = null
+  }
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+
 function apiBase(): string {
   return `${getBackendUrl()}/api/heartbeat`
 }
@@ -292,7 +336,9 @@ async function triggerManual(): Promise<void> {
   error.value = null
   try {
     await apiFetch(`/${agentId.value}/trigger`, { method: 'POST' })
-    setTimeout(() => loadData(), 1500)
+    // Refresh will happen automatically via heartbeat_run_started live event;
+    // load immediately to reflect the queued status while we wait.
+    void loadData()
   } catch (err) {
     error.value = String(err)
   } finally {