@shepai/cli 1.72.9-pr220.e1bfec0 → 1.72.9-pr220.f17b60a

package/web/.next/standalone/src/presentation/web/app/build-feature-node-data.ts

@@ -2,47 +2,20 @@ import type { Feature, AgentRun } from '@shepai/core/domain/generated/output';
 import {
   deriveNodeState,
   deriveProgress,
+  deriveLifecycle,
 } from '@/components/common/feature-node/derive-feature-state';
-import type { FeatureNodeData, FeatureLifecyclePhase } from '@/components/common/feature-node';
-
-/** Map domain SdlcLifecycle enum values to UI FeatureLifecyclePhase (1:1). */
-const lifecycleMap: Record<string, FeatureLifecyclePhase> = {
-  Requirements: 'requirements',
-  Research: 'research',
-  Implementation: 'implementation',
-  Review: 'review',
-  'Deploy & QA': 'deploy',
-  Maintain: 'maintain',
-};
-
-/** Map agent graph node names (from agent_run.result) to UI lifecycle phases. */
-const nodeToLifecyclePhase: Record<string, FeatureLifecyclePhase> = {
-  analyze: 'requirements',
-  requirements: 'requirements',
-  research: 'research',
-  plan: 'implementation',
-  implement: 'implementation',
-  merge: 'review',
-};
+import type { FeatureNodeData } from '@/components/common/feature-node';
 
 /**
  * Builds a FeatureNodeData object from a Feature entity and optional AgentRun.
  * This is the single-feature version of the logic in `buildGraphNodes`.
  */
 export function buildFeatureNodeData(feature: Feature, run: AgentRun | null): FeatureNodeData {
-  const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
-  const lifecycle: FeatureLifecyclePhase =
-    run?.status === 'completed'
-      ? 'maintain'
-      : ((agentNode ? nodeToLifecyclePhase[agentNode] : undefined) ??
-        lifecycleMap[feature.lifecycle] ??
-        'requirements');
-
   return {
     name: feature.name,
     description: feature.description ?? feature.slug,
     featureId: feature.id,
-    lifecycle,
+    lifecycle: deriveLifecycle(feature, run),
     repositoryPath: feature.repositoryPath,
     branch: feature.branch,
     specPath: feature.specPath,

package/web/.next/standalone/src/presentation/web/app/build-graph-nodes.ts

@@ -2,30 +2,11 @@ import type { Feature, Repository, AgentRun } from '@shepai/core/domain/generate
 import {
   deriveNodeState,
   deriveProgress,
+  deriveLifecycle,
 } from '@/components/common/feature-node/derive-feature-state';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { Edge } from '@xyflow/react';
-import type { FeatureNodeData, FeatureLifecyclePhase } from '@/components/common/feature-node';
-
-/** Map domain SdlcLifecycle enum values to UI FeatureLifecyclePhase (1:1). */
-const lifecycleMap: Record<string, FeatureLifecyclePhase> = {
-  Requirements: 'requirements',
-  Research: 'research',
-  Implementation: 'implementation',
-  Review: 'review',
-  'Deploy & QA': 'deploy',
-  Maintain: 'maintain',
-};
-
-/** Map agent graph node names (from agent_run.result) to UI lifecycle phases. */
-const nodeToLifecyclePhase: Record<string, FeatureLifecyclePhase> = {
-  analyze: 'requirements',
-  requirements: 'requirements',
-  research: 'research',
-  plan: 'implementation',
-  implement: 'implementation',
-  merge: 'review',
-};
+import type { FeatureNodeData } from '@/components/common/feature-node';
 
 export interface FeatureWithRun {
   feature: Feature;
@@ -131,14 +112,6 @@ function appendFeatureNodes(
   });
 
   sorted.forEach(({ feature, run }) => {
-    const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
-    const lifecycle: FeatureLifecyclePhase =
-      run?.status === 'completed'
-        ? 'maintain'
-        : ((agentNode ? nodeToLifecyclePhase[agentNode] : undefined) ??
-          lifecycleMap[feature.lifecycle] ??
-          'requirements');
-
     // Resolve blockedBy display name from parent feature
     let blockedBy: string | undefined;
     if (feature.parentId && feature.lifecycle === 'Blocked') {
@@ -152,7 +125,7 @@ function appendFeatureNodes(
       name: feature.name,
       description: feature.description ?? feature.slug,
       featureId: feature.id,
-      lifecycle,
+      lifecycle: deriveLifecycle(feature, run),
       repositoryPath: feature.repositoryPath,
       branch: feature.branch,
       specPath: feature.specPath,

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/create-drawer-client.tsx

@@ -61,7 +61,6 @@ export function CreateDrawerClient({
         .then((result) => {
           if (result.error) {
             toast.error(result.error);
-            window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
             return;
           }
           // Dispatch event with real feature ID so control center adds it to featureMap
@@ -79,7 +78,6 @@ export function CreateDrawerClient({
         })
         .catch(() => {
           toast.error('Failed to create feature');
-          window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
           setIsSubmitting(false);
         });
     },

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/drawer-view.ts

@@ -27,6 +27,17 @@ export type DrawerView =
   /** Repository node actions */
   | { type: 'repository'; data: RepositoryNodeData };
 
+/** Derives the feature-specific view type from node lifecycle + state. */
+export function deriveFeatureViewType(
+  node: FeatureNodeData
+): 'feature' | 'prd-review' | 'tech-review' | 'merge-review' {
+  if (node.lifecycle === 'requirements' && node.state === 'action-required') return 'prd-review';
+  if (node.lifecycle === 'implementation' && node.state === 'action-required') return 'tech-review';
+  if (node.lifecycle === 'review' && (node.state === 'action-required' || node.state === 'error'))
+    return 'merge-review';
+  return 'feature';
+}
+
 /**
  * Derives the active DrawerView from control-center state.
  * Priority: feature-create > selected-node (prd/tech/merge/feature) > repository
@@ -59,19 +70,7 @@ export function computeDrawerView({
   }
 
   if (selectedNode) {
-    if (selectedNode.lifecycle === 'requirements' && selectedNode.state === 'action-required') {
-      return { type: 'prd-review', node: selectedNode };
-    }
-    if (selectedNode.lifecycle === 'implementation' && selectedNode.state === 'action-required') {
-      return { type: 'tech-review', node: selectedNode };
-    }
-    if (
-      selectedNode.lifecycle === 'review' &&
-      (selectedNode.state === 'action-required' || selectedNode.state === 'error')
-    ) {
-      return { type: 'merge-review', node: selectedNode };
-    }
-    return { type: 'feature', node: selectedNode };
+    return { type: deriveFeatureViewType(selectedNode), node: selectedNode };
   }
 
   if (selectedRepoNode) {

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx

@@ -8,7 +8,7 @@ import type {
   PrdApprovalPayload,
   QuestionSelectionChange,
 } from '@shepai/core/domain/generated/output';
-import { PrStatus, NotificationEventType } from '@shepai/core/domain/generated/output';
+import { PrStatus } from '@shepai/core/domain/generated/output';
 import { approveFeature } from '@/app/actions/approve-feature';
 import { rejectFeature } from '@/app/actions/reject-feature';
 import { getFeatureArtifact } from '@/app/actions/get-feature-artifact';
@@ -53,10 +53,8 @@ import { useFeatureActions } from '@/components/common/feature-drawer/use-featur
 import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire';
 import type { TechDecisionsReviewData } from '@/components/common/tech-decisions-review';
 import type { MergeReviewData } from '@/components/common/merge-review';
-import {
-  mapEventTypeToState,
-  mapPhaseNameToLifecycle,
-} from '@/components/common/feature-node/derive-feature-state';
+import { resolveSseEventUpdates } from '@/components/common/feature-node/derive-feature-state';
+import { deriveFeatureViewType } from './drawer-view';
 import type { DrawerView } from './drawer-view';
 
 export interface FeatureDrawerClientProps {
@@ -94,30 +92,15 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
     const newEvents = events.slice(processedCountRef.current);
     processedCountRef.current = events.length;
 
-    // PhaseCompleted must NOT set state when WaitingApproval is in the same poll batch.
-    // But when it arrives without WaitingApproval (e.g. post-approval), allow it as
-    // a fallback for missed AgentStarted events.
-    const waitingApprovalInBatch = newEvents.some(
-      (e) =>
-        e.featureId === featureNode.featureId &&
-        e.eventType === NotificationEventType.WaitingApproval
-    );
-
-    for (const event of newEvents) {
-      if (event.featureId !== featureNode.featureId) continue;
-
-      const newState =
-        event.eventType === NotificationEventType.PhaseCompleted && waitingApprovalInBatch
-          ? undefined
-          : mapEventTypeToState(event.eventType);
-      const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
+    for (const update of resolveSseEventUpdates(newEvents)) {
+      if (update.featureId !== featureNode.featureId) continue;
 
       // Trigger a server refresh to get the latest drawer view,
       // but skip when the user has unsaved changes or a rejection is in-flight
       // to avoid the refresh interfering with the reject handler's navigation.
       if (!isDirtyRef.current && !isRejectingRef.current) router.refresh();
 
-      if (newState !== undefined || newLifecycle !== undefined) {
+      if (update.state !== undefined || update.lifecycle !== undefined) {
         // Optimistically update the node data AND re-derive the view type so the
         // drawer switches immediately (e.g. prd-review → feature when agent resumes)
         // without waiting for the router.refresh() round-trip.
@@ -131,10 +114,10 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
             return prev;
           const updatedNode = {
             ...prev.node,
-            ...(newState !== undefined && { state: newState }),
-            ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
+            ...(update.state !== undefined && { state: update.state }),
+            ...(update.lifecycle !== undefined && { lifecycle: update.lifecycle }),
           };
-          return { ...prev, type: deriveViewType(updatedNode), node: updatedNode };
+          return { ...prev, type: deriveFeatureViewType(updatedNode), node: updatedNode };
         });
       }
     }
@@ -383,6 +366,12 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       }
       setChatInput('');
       toast.success(`${label} approved — agent resuming`);
+      // Optimistically update canvas node before SSE arrives (~500ms delay)
+      window.dispatchEvent(
+        new CustomEvent('shep:feature-approved', {
+          detail: { featureId: reviewNode.featureId },
+        })
+      );
       onClose();
     },
     [reviewNode, onClose]
@@ -410,6 +399,12 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       }
       setChatInput('');
       toast.success('Requirements approved — agent resuming');
+      // Optimistically update canvas node before SSE arrives (~500ms delay)
+      window.dispatchEvent(
+        new CustomEvent('shep:feature-approved', {
+          detail: { featureId: view.node.featureId },
+        })
+      );
       setPrdSelections({});
       onClose();
     },
@@ -780,14 +775,3 @@ function DetailRow({ label, value }: { label: string; value: string }) {
     </div>
   );
 }
-
-/** Mirrors computeDrawerView logic — derives view type from live node data. */
-function deriveViewType(
-  node: FeatureNodeData
-): 'feature' | 'prd-review' | 'tech-review' | 'merge-review' {
-  if (node.lifecycle === 'requirements' && node.state === 'action-required') return 'prd-review';
-  if (node.lifecycle === 'implementation' && node.state === 'action-required') return 'tech-review';
-  if (node.lifecycle === 'review' && (node.state === 'action-required' || node.state === 'error'))
-    return 'merge-review';
-  return 'feature';
-}

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/index.ts

@@ -1,2 +1 @@
-export { ControlCenterDrawer, type ControlCenterDrawerProps } from './control-center-drawer';
 export { computeDrawerView, type DrawerView } from './drawer-view';

package/web/.next/standalone/src/presentation/web/components/common/feature-node/derive-feature-state.ts

@@ -41,7 +41,7 @@ export function deriveNodeState(feature: Feature, agentRun?: AgentRun | null): F
       case AgentRunStatus.cancelled:
         return 'blocked';
       case AgentRunStatus.completed:
-        return feature.lifecycle === SdlcLifecycle.Maintain ? 'done' : 'done';
+        return 'done';
       case AgentRunStatus.running:
       case AgentRunStatus.pending:
         return 'running';
@@ -112,7 +112,17 @@ export function mapEventTypeToState(eventType: NotificationEventType): FeatureNo
   }
 }
 
-/** Maps an SSE event phaseName to a FeatureLifecyclePhase. Mirrors page.tsx nodeToLifecyclePhase. */
+/** Map domain SdlcLifecycle enum values to UI FeatureLifecyclePhase. */
+export const sdlcLifecycleMap: Record<string, FeatureLifecyclePhase> = {
+  Requirements: 'requirements',
+  Research: 'research',
+  Implementation: 'implementation',
+  Review: 'review',
+  'Deploy & QA': 'deploy',
+  Maintain: 'maintain',
+};
+
+/** Map agent graph node names (from agent_run.result or SSE phaseName) to UI lifecycle phases. */
 const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
   analyze: 'requirements',
   requirements: 'requirements',
@@ -124,6 +134,57 @@ const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
   blocked: 'requirements',
 };
 
+/**
+ * Derives the UI lifecycle phase from a Feature + AgentRun.
+ * Shared by build-feature-node-data.ts and build-graph-nodes.ts.
+ */
+export function deriveLifecycle(feature: Feature, run: AgentRun | null): FeatureLifecyclePhase {
+  if (run?.status === 'completed') return 'maintain';
+  const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
+  return (
+    (agentNode ? phaseNameToLifecycle[agentNode] : undefined) ??
+    sdlcLifecycleMap[feature.lifecycle] ??
+    'requirements'
+  );
+}
+
+export interface SseEventUpdate {
+  featureId: string;
+  state: FeatureNodeState | undefined;
+  lifecycle: FeatureLifecyclePhase | undefined;
+  eventType: NotificationEventType;
+  phaseName?: string;
+}
+
+/**
+ * Resolves state/lifecycle updates from a batch of SSE events, applying
+ * the WaitingApproval batch-suppression rule: when WaitingApproval and
+ * PhaseCompleted arrive in the same batch for a feature, PhaseCompleted
+ * is fully suppressed to prevent lifecycle regression.
+ */
+export function resolveSseEventUpdates(
+  events: readonly { featureId: string; eventType: NotificationEventType; phaseName?: string }[]
+): SseEventUpdate[] {
+  const waitingApprovalFeatures = new Set(
+    events
+      .filter((e) => e.eventType === NotificationEventType.WaitingApproval)
+      .map((e) => e.featureId)
+  );
+
+  return events.map((event) => {
+    const isSuppressed =
+      event.eventType === NotificationEventType.PhaseCompleted &&
+      waitingApprovalFeatures.has(event.featureId);
+    return {
+      featureId: event.featureId,
+      state: isSuppressed ? undefined : mapEventTypeToState(event.eventType),
+      lifecycle: isSuppressed ? undefined : mapPhaseNameToLifecycle(event.phaseName),
+      eventType: event.eventType,
+      phaseName: event.phaseName,
+    };
+  });
+}
+
 export function mapPhaseNameToLifecycle(
   phaseName: string | undefined
 ): FeatureLifecyclePhase | undefined {

package/web/.next/standalone/src/presentation/web/components/common/index.ts

@@ -1,9 +1,4 @@
-export {
-  ControlCenterDrawer,
-  type ControlCenterDrawerProps,
-  computeDrawerView,
-  type DrawerView,
-} from './control-center-drawer';
+export { computeDrawerView, type DrawerView } from './control-center-drawer';
 export { AddRepositoryButton } from './add-repository-button';
 export { ElapsedTime, formatElapsed } from './elapsed-time';
 export { EmptyState, type EmptyStateProps } from './empty-state';
@@ -31,7 +26,6 @@ export {
 export { FeatureStatusBadges, type FeatureStatusBadgesProps } from './feature-status-badges';
 export { FeatureStatusGroup, type FeatureStatusGroupProps } from './feature-status-group';
 export { LoadingSkeleton } from './loading-skeleton';
-export { NotificationPermissionBanner } from './notification-permission-banner';
 export {
   RepositoryNode,
   type RepositoryNodeData,

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -7,7 +7,6 @@ import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import type { RepositoryNodeData } from '@/components/common/repository-node';
-import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
 import {
   useSidebarFeaturesContext,
   mapNodeStateToSidebarStatus,
@@ -235,28 +234,20 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
 
   if (!hasRepositories) {
-    return (
-      <>
-        <NotificationPermissionBanner />
-        <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />
-      </>
-    );
+    return <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />;
   }
 
   return (
-    <>
-      <NotificationPermissionBanner />
-      <FeaturesCanvas
-        nodes={nodes}
-        edges={edges}
-        selectedFeatureId={selectedFeatureId}
-        onNodesChange={onNodesChange}
-        onConnect={handleConnect}
-        onAddFeature={handleAddFeature}
-        onNodeClick={handleNodeClick}
-        onPaneClick={handleClearDrawers}
-        emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
-      />
-    </>
+    <FeaturesCanvas
+      nodes={nodes}
+      edges={edges}
+      selectedFeatureId={selectedFeatureId}
+      onNodesChange={onNodesChange}
+      onConnect={handleConnect}
+      onAddFeature={handleAddFeature}
+      onNodeClick={handleNodeClick}
+      onPaneClick={handleClearDrawers}
+      emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
+    />
   );
 }

package/web/.next/standalone/src/presentation/web/components/features/control-center/use-control-center-state.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
@@ -20,10 +20,10 @@ import { useAgentEventsContext } from '@/hooks/agent-events-provider';
 import { useSoundAction } from '@/hooks/use-sound-action';
 import {
   mapEventTypeToState,
-  mapPhaseNameToLifecycle,
+  resolveSseEventUpdates,
 } from '@/components/common/feature-node/derive-feature-state';
-import { NotificationEventType } from '@shepai/core/domain/generated/output';
 import { useGraphState, type GraphCallbacks } from '@/hooks/use-graph-state';
+import type { FeatureEntry } from '@/lib/derive-graph';
 
 export interface ControlCenterState {
   nodes: CanvasNodeType[];
@@ -47,6 +47,9 @@ export interface ControlCenterState {
   setCallbacks: (callbacks: GraphCallbacks) => void;
 }
 
+/** 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;
 
 export function useControlCenterState(
@@ -75,18 +78,26 @@ export function useControlCenterState(
 
   // 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 = initialNodes
-    .map((n) => n.id)
-    .sort()
-    .join(',');
-  const initialDataKey = initialNodes
-    .filter((n) => n.type === 'featureNode')
-    .map((n) => {
-      const d = n.data as FeatureNodeData;
-      return `${n.id}:${d.state}:${d.lifecycle}`;
-    })
-    .sort()
-    .join(',');
+  const initialNodeKey = useMemo(
+    () =>
+      initialNodes
+        .map((n) => n.id)
+        .sort()
+        .join(','),
+    [initialNodes]
+  );
+  const initialDataKey = useMemo(
+    () =>
+      initialNodes
+        .filter((n) => n.type === 'featureNode')
+        .map((n) => {
+          const d = n.data as FeatureNodeData;
+          return `${n.id}:${d.state}:${d.lifecycle}`;
+        })
+        .sort()
+        .join(','),
+    [initialNodes]
+  );
 
   const prevReconcileKey = useRef('');
 
@@ -101,15 +112,6 @@ export function useControlCenterState(
   // Track previous feature states for fallback notifications
   const prevFeatureStatesRef = useRef<Map<string, FeatureNodeData['state']>>(new Map());
 
-  const initialFeatureDataKey = initialNodes
-    .filter((n) => n.type === 'featureNode')
-    .map((n) => {
-      const d = n.data as FeatureNodeData;
-      return `${n.id}:${d.state}`;
-    })
-    .sort()
-    .join(',');
-
   const { events } = useAgentEventsContext();
 
   useEffect(() => {
@@ -140,7 +142,7 @@ export function useControlCenterState(
       }
       prevStates.set(node.id, data.state);
     }
-  }, [initialFeatureDataKey, initialNodes, events, router]);
+  }, [initialDataKey, initialNodes, events, router]);
 
   // SSE effect: only state + lifecycle updates
   const processedEventCountRef = useRef(0);
@@ -150,40 +152,37 @@ export function useControlCenterState(
     const newEvents = events.slice(processedEventCountRef.current);
     processedEventCountRef.current = events.length;
 
-    // PhaseCompleted must NOT set state when WaitingApproval is in the same poll batch —
-    // they arrive together and PhaseCompleted → 'running' would revert 'action-required'.
-    // But when PhaseCompleted arrives WITHOUT WaitingApproval (e.g. after approval), we
-    // must allow it to update state as a fallback for any missed AgentStarted event.
-    const waitingApprovalFeatures = new Set(
-      newEvents
-        .filter((e) => e.eventType === NotificationEventType.WaitingApproval)
-        .map((e) => e.featureId)
-    );
-
-    for (const event of newEvents) {
-      const newState =
-        event.eventType === NotificationEventType.PhaseCompleted &&
-        waitingApprovalFeatures.has(event.featureId)
-          ? undefined
-          : mapEventTypeToState(event.eventType);
-      const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
-
-      const nodeId = `feat-${event.featureId}`;
-      if (newState !== undefined || newLifecycle !== undefined) {
-        updateFeature(nodeId, {
-          ...(newState !== undefined && { state: newState }),
-          ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
+    for (const { featureId, state, lifecycle } of resolveSseEventUpdates(newEvents)) {
+      if (state !== undefined || lifecycle !== undefined) {
+        updateFeature(`feat-${featureId}`, {
+          ...(state !== undefined && { state }),
+          ...(lifecycle !== undefined && { lifecycle }),
         });
       }
     }
   }, [events, updateFeature]);
 
+  // Listen for optimistic approval events from the drawer (fires before SSE arrives)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { featureId } = (e as CustomEvent<{ featureId: string }>).detail;
+      updateFeature(`feat-${featureId}`, { state: 'running' });
+    };
+    window.addEventListener('shep:feature-approved', handler);
+    return () => window.removeEventListener('shep:feature-approved', handler);
+  }, [updateFeature]);
+
   // Separate effect: fetch metadata (name + description) when SSE reports it changed
   const metadataFetchedRef = useRef<Set<string>>(new Set());
+  const processedMetadataCountRef = useRef(0);
 
   useEffect(() => {
-    for (const event of events) {
-      if (event.message !== 'Feature metadata updated') continue;
+    if (events.length <= processedMetadataCountRef.current) return;
+    const newEvents = events.slice(processedMetadataCountRef.current);
+    processedMetadataCountRef.current = events.length;
+
+    for (const event of newEvents) {
+      if (event.message !== METADATA_UPDATED_MESSAGE) continue;
       if (metadataFetchedRef.current.has(event.featureId)) continue;
       metadataFetchedRef.current.add(event.featureId);
 
@@ -285,6 +284,20 @@ export function useControlCenterState(
 
       // Snapshot for rollback
       const prevRepoData = getRepositoryData(repoNodeId);
+      const childSnapshots = new Map<string, FeatureEntry>();
+      for (const childId of childFeatureIds) {
+        const childNode = nodes.find((n) => n.id === childId);
+        if (childNode) {
+          childSnapshots.set(childId, { nodeId: childId, data: childNode.data as FeatureNodeData });
+        }
+      }
+
+      const rollback = () => {
+        if (prevRepoData) addRepositoryToMap(repoNodeId, prevRepoData);
+        for (const [childId, entry] of childSnapshots) {
+          restoreFeature(childId, entry);
+        }
+      };
 
       // Optimistic: remove repo + children
       removeRepository(repoNodeId);
@@ -296,32 +309,14 @@ export function useControlCenterState(
         const result = await deleteRepository(repositoryId);
         if (!result.success) {
           toast.error(result.error ?? 'Failed to remove repository');
-          if (prevRepoData) addRepositoryToMap(repoNodeId, prevRepoData);
-          for (const childId of childFeatureIds) {
-            const childNode = nodes.find((n) => n.id === childId);
-            if (childNode) {
-              restoreFeature(childId, {
-                nodeId: childId,
-                data: childNode.data as FeatureNodeData,
-              });
-            }
-          }
+          rollback();
           return;
         }
         deleteSound.play();
         toast.success('Repository removed');
       } catch {
         toast.error('Failed to remove repository');
-        if (prevRepoData) addRepositoryToMap(repoNodeId, prevRepoData);
-        for (const childId of childFeatureIds) {
-          const childNode = nodes.find((n) => n.id === childId);
-          if (childNode) {
-            restoreFeature(childId, {
-              nodeId: childId,
-              data: childNode.data as FeatureNodeData,
-            });
-          }
-        }
+        rollback();
       }
     },
     [