fix(desktop): keep the Agent Graph panel visibly alive while operators run

apps/desktop/src/main/__tests__/agent-graph-panel-visibility.test.ts

@@ -21,11 +21,24 @@ import { strict as assert } from 'node:assert';
 import { describe, it } from 'node:test';
 import {
   dismissAgentGraphPanel,
+  isAgentGraphLive,
   isAgentGraphPanelDismissible,
   reconcileAgentGraphPanelDismissals,
   shouldShowAgentGraphPanel,
 } from '../../renderer/agent-graph-panel-visibility.js';
 
+describe('isAgentGraphLive', () => {
+  it('treats in-flight statuses as live and settled ones as not', () => {
+    for (const status of ['active', 'waiting', 'closing'] as const) {
+      assert.equal(isAgentGraphLive(status), true, status);
+    }
+    for (const status of ['empty', 'stopped', 'failed', 'completed'] as const) {
+      assert.equal(isAgentGraphLive(status), false, status);
+    }
+    assert.equal(isAgentGraphLive(undefined), false);
+  });
+});
+
 describe('isAgentGraphPanelDismissible', () => {
   it('allows hiding a graph that no longer has active work', () => {
     assert.equal(isAgentGraphPanelDismissible('completed'), true);

apps/desktop/src/renderer/agent-graph-panel-visibility.ts

@@ -40,6 +40,17 @@ export function isAgentGraphPanelDismissible(
   return status !== undefined && DISMISSIBLE_STATUSES.has(status);
 }
 
+const LIVE_STATUSES = new Set<AgentGraphPanelStatus>([
+  'active',
+  'waiting',
+  'closing',
+]);
+
+/** A graph in one of these statuses can be stopped and must keep signaling liveness. */
+export function isAgentGraphLive(status: AgentGraphPanelStatus | undefined): boolean {
+  return status !== undefined && LIVE_STATUSES.has(status);
+}
+
 export function dismissAgentGraphPanel(
   dismissedBySession: AgentGraphPanelDismissals,
   sessionId: string,

apps/desktop/src/renderer/agent-graph-panel.tsx

@@ -33,6 +33,7 @@ import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { Spinner } from '@astryxdesign/core/Spinner';
 import {
   dismissAgentGraphPanel,
+  isAgentGraphLive,
   isAgentGraphPanelDismissible,
   reconcileAgentGraphPanelDismissals,
   shouldShowAgentGraphPanel,
@@ -204,6 +205,7 @@ export function AgentGraphPanel(props: {
     stopState.rootSessionId === props.rootSessionId && stopState.graphId === selectedGraphId;
   const stopPending = stopFeedbackMatchesSelection && stopState.pending;
   const stopError = stopFeedbackMatchesSelection && stopState.error;
+  const graphLive = snapshot !== undefined && isAgentGraphLive(snapshot.status);
 
   useEffect(() => {
     setSnapshot(undefined);
@@ -350,7 +352,7 @@ export function AgentGraphPanel(props: {
     !loading &&
     snapshot !== undefined &&
     snapshot.graphId === selectedGraphId &&
-    ['active', 'waiting', 'closing'].includes(snapshot.status);
+    isAgentGraphLive(snapshot.status);
   const dismissAvailable =
     selectedEpoch?.current === true &&
     !loading &&
@@ -393,6 +395,14 @@ export function AgentGraphPanel(props: {
           ) : null}
           {snapshot ? (
             <span className="maka-agent-graph-progress">
+              {graphLive ? (
+                <Spinner
+                  size="sm"
+                  shade="subtle"
+                  className="maka-agent-graph-heartbeat"
+                  aria-hidden="true"
+                />
+              ) : null}
               {copy.status(snapshot.status)} ·{' '}
               {copy.progress(
                 progress.settled,

apps/desktop/src/renderer/styles/agent-graph.css

@@ -84,6 +84,14 @@
   color: var(--muted-foreground);
 }
 
+/* Inline flex so the heartbeat spinner stays on the status line and spacing is
+   gap-driven; the element also holds plain text nodes. */
+.maka-agent-graph-progress {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
 .maka-agent-graph-empty {
   margin: var(--space-2) 0 0;
 }
@@ -125,9 +133,21 @@
   background: var(--muted-foreground);
 }
 
+@keyframes maka-agent-graph-dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.35;
+  }
+}
+
 .maka-agent-graph-operators li[data-status="running"] .maka-agent-graph-status-dot,
 .maka-agent-graph-operators li[data-status="runnable"] .maka-agent-graph-status-dot {
   background: var(--status-running);
+  animation: maka-agent-graph-dot-pulse 1.6s ease-in-out infinite;
 }
 
 .maka-agent-graph-operators li[data-status="completed"] .maka-agent-graph-status-dot {