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

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,34 +92,15 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
     const newEvents = events.slice(processedCountRef.current);
     processedCountRef.current = events.length;
 
-    // When WaitingApproval and PhaseCompleted arrive in the same poll batch,
-    // PhaseCompleted must be fully suppressed (both state AND lifecycle). Without this,
-    // a phase-timing PhaseCompleted (e.g. phaseName='research') can regress the lifecycle
-    // that WaitingApproval already set correctly (e.g. to 'implementation' for plan gate).
-    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 isSuppressedPhaseCompleted =
-        event.eventType === NotificationEventType.PhaseCompleted && waitingApprovalInBatch;
-      const newState = isSuppressedPhaseCompleted
-        ? undefined
-        : mapEventTypeToState(event.eventType);
-      const newLifecycle = isSuppressedPhaseCompleted
-        ? undefined
-        : 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.
@@ -135,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 };
         });
       }
     }
@@ -387,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]
@@ -414,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();
     },
@@ -784,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';

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,9 +20,8 @@ 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';
 
@@ -79,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('');
 
@@ -145,39 +152,26 @@ export function useControlCenterState(
     const newEvents = events.slice(processedEventCountRef.current);
     processedEventCountRef.current = events.length;
 
-    // When WaitingApproval and PhaseCompleted arrive in the same poll batch for a feature,
-    // PhaseCompleted must be fully suppressed (both state AND lifecycle). Without this,
-    // a phase-timing PhaseCompleted (e.g. phaseName='research') can regress the lifecycle
-    // that WaitingApproval already set correctly (e.g. to 'implementation' for plan gate).
-    // When PhaseCompleted arrives WITHOUT WaitingApproval (e.g. after approval), we allow
-    // it to update both state and lifecycle 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 isSuppressedPhaseCompleted =
-        event.eventType === NotificationEventType.PhaseCompleted &&
-        waitingApprovalFeatures.has(event.featureId);
-      const newState = isSuppressedPhaseCompleted
-        ? undefined
-        : mapEventTypeToState(event.eventType);
-      const newLifecycle = isSuppressedPhaseCompleted
-        ? undefined
-        : 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);

package/web/.next/standalone/src/presentation/web/components/features/features-canvas/features-canvas.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { ReactFlow, Background, Controls } from '@xyflow/react';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import { Plus } from 'lucide-react';
@@ -56,22 +56,6 @@ export function FeaturesCanvas({
     []
   );
 
-  // Prevent a feature from having more than one source repository
-  const isValidConnection = useCallback(
-    (connection: Edge | Connection) => {
-      const sourceNode = nodes.find((n) => n.id === connection.source);
-      if (sourceNode?.type !== 'repositoryNode') return true;
-
-      const targetAlreadyHasRepo = edges.some((e) => {
-        const edgeSourceNode = nodes.find((n) => n.id === e.source);
-        return edgeSourceNode?.type === 'repositoryNode' && e.target === connection.target;
-      });
-
-      return !targetAlreadyHasRepo;
-    },
-    [nodes, edges]
-  );
-
   // Callbacks and showHandles are already injected into node.data by deriveGraph.
   // Only selectedFeatureId highlighting needs to be applied here.
   const enrichedNodes = useMemo(
@@ -122,7 +106,6 @@ export function FeaturesCanvas({
         edges={edges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        isValidConnection={isValidConnection}
         onConnect={onConnect}
         onNodesChange={onNodesChange}
         onNodeClick={onNodeClick}

package/web/.next/standalone/src/presentation/web/hooks/use-agent-events.ts

@@ -103,9 +103,13 @@ export function useAgentEvents(options?: UseAgentEventsOptions): UseAgentEventsR
         if (sw.state === 'activated') {
           subscribeToWorker(sw);
         } else {
-          sw.addEventListener('statechange', () => {
-            if (sw.state === 'activated') subscribeToWorker(sw);
-          });
+          const onStateChange = () => {
+            if (sw.state === 'activated') {
+              sw.removeEventListener('statechange', onStateChange);
+              subscribeToWorker(sw);
+            }
+          };
+          sw.addEventListener('statechange', onStateChange);
         }
       })
       .catch(() => {