@shepai/cli 1.72.9-pr220.f17b60a → 1.73.0-pr222.ef53005

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -7,10 +7,14 @@ import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
 import { getFeatureMetadata } from '../../../app/actions/get-feature-metadata.js';
+import { fetchGraphData } from '../../../app/actions/get-graph-data.js';
 import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
+import { createLogger } from '../../../lib/logger.js';
 import { mapEventTypeToState, resolveSseEventUpdates, } from '../../common/feature-node/derive-feature-state.js';
 import { useGraphState } from '../../../hooks/use-graph-state.js';
+const log = createLogger('[Polling]');
+const POLL_INTERVAL_MS = 3_000;
 /** Must match the message string emitted by the SSE route in agent-events/route.ts */
 const METADATA_UPDATED_MESSAGE = 'Feature metadata updated';
 let nextFeatureId = 0;
@@ -19,6 +23,13 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const deleteSound = useSoundAction('delete');
     const createSound = useSoundAction('create');
     const { nodes, edges, reconcile, updateFeature, addPendingFeature, removeFeature, restoreFeature, addRepository: addRepositoryToMap, removeRepository, replaceRepository, getFeatureRepositoryPath, getRepositoryData, setCallbacks, } = useGraphState(initialNodes, initialEdges);
+    // Refs for stable access to latest nodes/edges without callback recreation
+    const nodesRef = useRef(nodes);
+    const edgesRef = useRef(edges);
+    useEffect(() => {
+        nodesRef.current = nodes;
+        edgesRef.current = edges;
+    }, [nodes, edges]);
     // Sync server props into domain Maps when initialNodes/initialEdges change.
     // Keyed by a stable string so we don't re-reconcile on every render.
     const initialNodeKey = useMemo(() => initialNodes
@@ -77,6 +88,10 @@ export function useControlCenterState(initialNodes, initialEdges) {
     // SSE effect: only state + lifecycle updates
     const processedEventCountRef = useRef(0);
     useEffect(() => {
+        // Clamp cursor if events were pruned
+        if (processedEventCountRef.current > events.length) {
+            processedEventCountRef.current = 0;
+        }
         if (events.length <= processedEventCountRef.current)
             return;
         const newEvents = events.slice(processedEventCountRef.current);
@@ -103,6 +118,10 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const metadataFetchedRef = useRef(new Set());
     const processedMetadataCountRef = useRef(0);
     useEffect(() => {
+        // Clamp cursor if events were pruned
+        if (processedMetadataCountRef.current > events.length) {
+            processedMetadataCountRef.current = 0;
+        }
         if (events.length <= processedMetadataCountRef.current)
             return;
         const newEvents = events.slice(processedMetadataCountRef.current);
@@ -125,6 +144,23 @@ export function useControlCenterState(initialNodes, initialEdges) {
             });
         }
     }, [events, updateFeature]);
+    // --- Polling fallback: catch any SSE events that were missed ---
+    useEffect(() => {
+        log.debug(`polling enabled (${POLL_INTERVAL_MS}ms interval)`);
+        const timer = setInterval(async () => {
+            try {
+                const { nodes: freshNodes, edges: freshEdges } = await fetchGraphData();
+                reconcile(freshNodes, freshEdges);
+            }
+            catch {
+                log.warn('poll fetch failed — will retry next interval');
+            }
+        }, POLL_INTERVAL_MS);
+        return () => {
+            log.debug('polling disabled');
+            clearInterval(timer);
+        };
+    }, [reconcile]);
     // onNodesChange is a no-op: nodes are derived from domain Maps.
     // Since nodesDraggable=false and elementsSelectable=false, only React Flow's
     // internal replace/dimensions changes come through — we ignore them all.
@@ -156,7 +192,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const handleDeleteFeature = useCallback((featureId) => {
         const nodeId = `feat-${featureId}`;
         // Find the current entry for rollback
-        const prevEntry = nodes
+        const prevEntry = nodesRef.current
             .filter((n) => n.id === nodeId)
             .map((n) => ({
             nodeId: n.id,
@@ -180,16 +216,16 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 restoreFeature(nodeId, prevEntry);
             toast.error('Failed to delete feature');
         });
-    }, [nodes, router, deleteSound, removeFeature, restoreFeature]);
+    }, [router, deleteSound, removeFeature, restoreFeature]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
         // Find children of this repo via edges
-        const childFeatureIds = new Set(edges.filter((e) => e.source === repoNodeId).map((e) => e.target));
+        const childFeatureIds = new Set(edgesRef.current.filter((e) => e.source === repoNodeId).map((e) => e.target));
         // Snapshot for rollback
         const prevRepoData = getRepositoryData(repoNodeId);
         const childSnapshots = new Map();
         for (const childId of childFeatureIds) {
-            const childNode = nodes.find((n) => n.id === childId);
+            const childNode = nodesRef.current.find((n) => n.id === childId);
             if (childNode) {
                 childSnapshots.set(childId, { nodeId: childId, data: childNode.data });
             }
@@ -221,8 +257,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
             rollback();
         }
     }, [
-        edges,
-        nodes,
         deleteSound,
         removeRepository,
         removeFeature,
@@ -233,9 +267,12 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const handleLayout = useCallback((direction) => {
         // Layout is applied via reconcile on next server prop update.
         // For immediate re-layout, we apply dagre and trigger a reconcile-like update.
-        const result = layoutWithDagre(nodes, edges, { ...CANVAS_LAYOUT_DEFAULTS, direction });
+        const result = layoutWithDagre(nodesRef.current, edgesRef.current, {
+            ...CANVAS_LAYOUT_DEFAULTS,
+            direction,
+        });
         reconcile(result.nodes, result.edges);
-    }, [nodes, edges, reconcile]);
+    }, [reconcile]);
     const handleAddRepository = useCallback((path) => {
         const tempId = `repo-temp-${Date.now()}`;
         const repoName = path

package/dist/src/presentation/web/hooks/agent-events-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-events-provider.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/agent-events-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAI5B,UAAU,wBAAyB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,wBAAwB,2CAIhF;AAED,wBAAgB,qBAAqB,IAAI,oBAAoB,CAM5D"}
+{"version":3,"file":"agent-events-provider.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/agent-events-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAI5B,UAAU,wBAAyB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,wBAAwB,2CAShF;AAED,wBAAgB,qBAAqB,IAAI,oBAAoB,CAM5D"}

package/dist/src/presentation/web/hooks/agent-events-provider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { useAgentEvents, } from './use-agent-events.js';
 const AgentEventsContext = createContext(null);
 /**
@@ -8,7 +8,8 @@ const AgentEventsContext = createContext(null);
  * Wrap the app once; use `useAgentEventsContext()` to read.
  */
 export function AgentEventsProvider({ children, runId }) {
-    const value = useAgentEvents({ runId });
+    const { events, lastEvent, connectionStatus } = useAgentEvents({ runId });
+    const value = useMemo(() => ({ events, lastEvent, connectionStatus }), [events, lastEvent, connectionStatus]);
     return _jsx(AgentEventsContext.Provider, { value: value, children: children });
 }
 export function useAgentEventsContext() {

package/dist/src/presentation/web/hooks/use-agent-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-agent-events.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-agent-events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CA+GpF"}
+{"version":3,"file":"use-agent-events.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-agent-events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAOD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CAmHpF"}

package/dist/src/presentation/web/hooks/use-agent-events.js

@@ -1,6 +1,10 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { createLogger } from '../lib/logger.js';
+const log = createLogger('[SSE]');
 const SW_PATH = '/agent-events-sw.js';
+const MAX_EVENTS = 500;
+const PRUNE_KEEP = 250;
 /**
  * Hook that receives real-time agent notification events via a Service Worker.
  *
@@ -20,7 +24,11 @@ export function useAgentEvents(options) {
             return;
         if (msg.type === 'notification') {
             const parsed = msg.data;
-            setEvents((prev) => [...prev, parsed]);
+            log.debug('event received:', parsed.eventType, parsed);
+            setEvents((prev) => {
+                const next = [...prev, parsed];
+                return next.length > MAX_EVENTS ? next.slice(-PRUNE_KEEP) : next;
+            });
             setLastEvent(parsed);
         }
         else if (msg.type === 'status') {
@@ -146,7 +154,10 @@ function connectDirectEventSource(runId, setEvents, setLastEvent, setConnectionS
         };
         es.addEventListener('notification', ((event) => {
             const parsed = JSON.parse(event.data);
-            setEvents((prev) => [...prev, parsed]);
+            setEvents((prev) => {
+                const next = [...prev, parsed];
+                return next.length > MAX_EVENTS ? next.slice(-PRUNE_KEEP) : next;
+            });
             setLastEvent(parsed);
         }));
     }

package/dist/src/presentation/web/hooks/use-deploy-action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-deploy-action.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-deploy-action.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAM5E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAeD,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,iBAAiB,CAgKlF"}
+{"version":3,"file":"use-deploy-action.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-deploy-action.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAM5E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAOD,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,iBAAiB,CAwKlF"}

package/dist/src/presentation/web/hooks/use-deploy-action.js

@@ -1,19 +1,11 @@
 'use client';
-/* eslint-disable no-console */
 import { useState, useCallback, useRef, useEffect } from 'react';
+import { createLogger } from '../lib/logger.js';
 import { deployFeature } from '../app/actions/deploy-feature.js';
 import { deployRepository } from '../app/actions/deploy-repository.js';
 import { stopDeployment } from '../app/actions/stop-deployment.js';
 import { getDeploymentStatus } from '../app/actions/get-deployment-status.js';
-const PREFIX = '[useDeployAction]';
-const isDebug = !!process.env.NEXT_PUBLIC_DEBUG;
-const noop = () => undefined;
-const log = {
-    info: isDebug ? (...args) => console.info(PREFIX, ...args) : noop,
-    debug: isDebug ? (...args) => console.debug(PREFIX, ...args) : noop,
-    warn: (...args) => console.warn(PREFIX, ...args),
-    error: (...args) => console.error(PREFIX, ...args),
-};
+const log = createLogger('[useDeployAction]');
 const ERROR_CLEAR_DELAY = 5000;
 const POLL_INTERVAL = 3000;
 export function useDeployAction(input) {
@@ -25,6 +17,11 @@ export function useDeployAction(input) {
     const errorTimerRef = useRef(null);
     const pollIntervalRef = useRef(null);
     const mountedRef = useRef(true);
+    const statusRef = useRef(status);
+    // Keep statusRef in sync with latest status
+    useEffect(() => {
+        statusRef.current = status;
+    }, [status]);
     // Track mounted state
     useEffect(() => {
         mountedRef.current = true;
@@ -66,14 +63,14 @@ export function useDeployAction(input) {
                 stopPolling();
             }
             else {
-                if (result.state !== status) {
-                    log.info(`poll state changed: ${status} → ${result.state}, url=${result.url}`);
+                if (result.state !== statusRef.current) {
+                    log.info(`poll state changed: ${statusRef.current} → ${result.state}, url=${result.url}`);
                 }
                 setStatus(result.state);
                 setUrl(result.url);
             }
         }, POLL_INTERVAL);
-    }, [stopPolling, status]);
+    }, [stopPolling]);
     const handleDeploy = useCallback(async () => {
         if (!input) {
             log.warn('deploy() called but input is null — no-op');

package/dist/src/presentation/web/lib/logger.d.ts

@@ -0,0 +1,7 @@
+export declare function createLogger(prefix: string): {
+    info: (...args: unknown[]) => void;
+    debug: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+};
+//# sourceMappingURL=logger.d.ts.map

package/dist/src/presentation/web/lib/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/logger.ts"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM;oBAEb,OAAO,EAAE;qBACR,OAAO,EAAE;oBACpB,OAAO,EAAE;qBACR,OAAO,EAAE;EAE7B"}

package/dist/src/presentation/web/lib/logger.js

@@ -0,0 +1,11 @@
+/* eslint-disable no-console */
+const isDebug = !!process.env.NEXT_PUBLIC_DEBUG;
+const noop = () => undefined;
+export function createLogger(prefix) {
+    return {
+        info: isDebug ? (...args) => console.info(prefix, ...args) : noop,
+        debug: isDebug ? (...args) => console.debug(prefix, ...args) : noop,
+        warn: (...args) => console.warn(prefix, ...args),
+        error: (...args) => console.error(prefix, ...args),
+    };
+}