@shepai/cli 1.72.9-pr219.08421ee → 1.72.9-pr220.68aacbc

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

@@ -53,11 +53,10 @@ 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';
+import { useArtifactFetch } from './use-artifact-fetch';
 
 export interface FeatureDrawerClientProps {
   view: DrawerView;
@@ -89,39 +88,43 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   const processedCountRef = useRef(0);
 
   useEffect(() => {
+    // Clamp cursor if events were pruned
+    if (processedCountRef.current > events.length) {
+      processedCountRef.current = 0;
+    }
     if (!featureNode || events.length <= processedCountRef.current) return;
 
     const newEvents = events.slice(processedCountRef.current);
     processedCountRef.current = events.length;
 
-    for (const event of newEvents) {
-      if (event.featureId !== featureNode.featureId) continue;
-      const newState = 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();
 
-      // Optimistically update the node data for immediate UI feedback
-      setView((prev) => {
-        if (
-          prev.type !== 'feature' &&
-          prev.type !== 'prd-review' &&
-          prev.type !== 'tech-review' &&
-          prev.type !== 'merge-review'
-        )
-          return prev;
-        return {
-          ...prev,
-          node: {
+      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.
+        setView((prev) => {
+          if (
+            prev.type !== 'feature' &&
+            prev.type !== 'prd-review' &&
+            prev.type !== 'tech-review' &&
+            prev.type !== 'merge-review'
+          )
+            return prev;
+          const updatedNode = {
             ...prev.node,
-            state: newState,
-            ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
-          },
-        };
-      });
+            ...(update.state !== undefined && { state: update.state }),
+            ...(update.lifecycle !== undefined && { lifecycle: update.lifecycle }),
+          };
+          return { ...prev, type: deriveFeatureViewType(updatedNode), node: updatedNode };
+        });
+      }
     }
   }, [events, featureNode, router]);
 
@@ -143,21 +146,17 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   const [prdData, setPrdData] = useState<PrdQuestionnaireData | null>(null);
   const [prdSelections, setPrdSelections] = useState<Record<string, string>>({});
   const [prdDefaultSelections, setPrdDefaultSelections] = useState<Record<string, string>>({});
-  const [isLoadingPrd, setIsLoadingPrd] = useState(false);
 
   // ── Tech state ─────────────────────────────────────────────────────────
   const [techData, setTechData] = useState<TechDecisionsReviewData | null>(null);
-  const [isLoadingTech, setIsLoadingTech] = useState(false);
 
   // ── Product decisions state (for tech review Product tab) ─────────────
   const [techProductData, setTechProductData] = useState<
     ProductDecisionsSummaryData | null | undefined
   >(undefined);
-  const [isLoadingTechProduct, setIsLoadingTechProduct] = useState(false);
 
   // ── Merge state ────────────────────────────────────────────────────────
   const [mergeData, setMergeData] = useState<MergeReviewData | null>(null);
-  const [isLoadingMerge, setIsLoadingMerge] = useState(false);
 
   // ── Delete state ───────────────────────────────────────────────────────
   const [isDeleting, setIsDeleting] = useState(false);
@@ -175,120 +174,71 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   // ── Data fetching ─────────────────────────────────────────────────────
 
   const prdFeatureId = view.type === 'prd-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setPrdSelections({});
-    setPrdDefaultSelections({});
-    setPrdData(null);
-    if (!prdFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingPrd(true);
-    getFeatureArtifact(prdFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.error) {
-          toast.error(result.error);
-          return;
-        }
-        if (result.questionnaire) {
-          setPrdData(result.questionnaire);
-          const defaults: Record<string, string> = {};
-          for (const q of result.questionnaire.questions) {
-            const recommended = q.options.find((o) => o.recommended);
-            if (recommended) defaults[q.id] = recommended.id;
-          }
-          setPrdSelections(defaults);
-          setPrdDefaultSelections(defaults);
+  const isLoadingPrd = useArtifactFetch(
+    prdFeatureId,
+    getFeatureArtifact,
+    (result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      if (result.questionnaire) {
+        setPrdData(result.questionnaire);
+        const defaults: Record<string, string> = {};
+        for (const q of result.questionnaire.questions) {
+          const recommended = q.options.find((o) => o.recommended);
+          if (recommended) defaults[q.id] = recommended.id;
         }
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load questionnaire');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingPrd(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [prdFeatureId]);
+        setPrdSelections(defaults);
+        setPrdDefaultSelections(defaults);
+      }
+    },
+    () => {
+      setPrdSelections({});
+      setPrdDefaultSelections({});
+      setPrdData(null);
+    },
+    'Failed to load questionnaire'
+  );
 
   const techFeatureId = view.type === 'tech-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setTechData(null);
-    if (!techFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingTech(true);
-    getResearchArtifact(techFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.error) {
-          toast.error(result.error);
-          return;
-        }
-        if (result.techDecisions) setTechData(result.techDecisions);
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load tech decisions');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingTech(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [techFeatureId]);
+  const isLoadingTech = useArtifactFetch(
+    techFeatureId,
+    getResearchArtifact,
+    (result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      if (result.techDecisions) setTechData(result.techDecisions);
+    },
+    () => setTechData(null),
+    'Failed to load tech decisions'
+  );
 
-  useEffect(() => {
-    setTechProductData(undefined);
-    if (!techFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingTechProduct(true);
-    getFeatureArtifact(techFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.productDecisions) {
-          setTechProductData(result.productDecisions);
-        }
-      })
-      .catch(() => {
-        // Silent failure — the product tab is supplementary
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingTechProduct(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [techFeatureId]);
+  const isLoadingTechProduct = useArtifactFetch(
+    techFeatureId,
+    getFeatureArtifact,
+    (result) => {
+      if (result.productDecisions) setTechProductData(result.productDecisions);
+    },
+    () => setTechProductData(undefined)
+  );
 
   const mergeFeatureId = view.type === 'merge-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setMergeData(null);
-    if (!mergeFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingMerge(true);
-    getMergeReviewData(mergeFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if ('error' in result) {
-          toast.error(result.error);
-          return;
-        }
-        setMergeData(result);
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load merge review data');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingMerge(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [mergeFeatureId]);
+  const isLoadingMerge = useArtifactFetch(
+    mergeFeatureId,
+    getMergeReviewData,
+    (result) => {
+      if ('error' in result) {
+        toast.error(result.error);
+        return;
+      }
+      setMergeData(result);
+    },
+    () => setMergeData(null),
+    'Failed to load merge review data'
+  );
 
   // ── Close guard ──────────────────────────────────────────────────────
   const isChatDirty = chatInput.trim().length > 0;
@@ -368,6 +318,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]
@@ -395,6 +351,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();
     },

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/control-center-drawer/use-artifact-fetch.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+
+/**
+ * Generic hook for fetching drawer artifact data when a feature ID changes.
+ * Handles loading state, cancellation on unmount/re-fetch, and error toasting.
+ *
+ * @param featureId - The feature ID to fetch for, or null to reset.
+ * @param fetcher - Async function that fetches the artifact data.
+ * @param onSuccess - Called with the fetch result when successful and not cancelled.
+ * @param onReset - Called immediately when featureId changes (before fetching).
+ * @param errorMessage - Optional toast message shown on fetch failure.
+ * @returns Whether the fetch is currently in progress.
+ */
+export function useArtifactFetch<TResult>(
+  featureId: string | null,
+  fetcher: (id: string) => Promise<TResult>,
+  onSuccess: (result: TResult) => void,
+  onReset: () => void,
+  errorMessage?: string
+): boolean {
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Use refs to avoid stale callbacks in the effect without triggering re-runs.
+  const onSuccessRef = useRef(onSuccess);
+  const onResetRef = useRef(onReset);
+  onSuccessRef.current = onSuccess;
+  onResetRef.current = onReset;
+
+  useEffect(() => {
+    onResetRef.current();
+    if (!featureId) return;
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    fetcher(featureId)
+      .then((result) => {
+        if (!cancelled) onSuccessRef.current(result);
+      })
+      .catch(() => {
+        if (!cancelled && errorMessage) toast.error(errorMessage);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [featureId, fetcher, errorMessage]);
+
+  return isLoading;
+}

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer/use-feature-actions.ts

@@ -37,15 +37,14 @@ export function useFeatureActions(input: FeatureActionsInput | null): FeatureAct
   const shellTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const specsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Clear timers on unmount
+  // Clear timers on unmount — read .current inside cleanup so we get the
+  // actual timer value at teardown time, not the always-null value at mount.
   useEffect(() => {
-    const ideTimer = ideTimerRef.current;
-    const shellTimer = shellTimerRef.current;
-    const specsTimer = specsTimerRef.current;
+    const refs = [ideTimerRef, shellTimerRef, specsTimerRef];
     return () => {
-      if (ideTimer) clearTimeout(ideTimer);
-      if (shellTimer) clearTimeout(shellTimer);
-      if (specsTimer) clearTimeout(specsTimer);
+      for (const ref of refs) {
+        if (ref.current) clearTimeout(ref.current);
+      }
     };
   }, []);
 

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,14 +1,5 @@
-export {
-  ControlCenterDrawer,
-  type ControlCenterDrawerProps,
-  computeDrawerView,
-  type DrawerView,
-} from './control-center-drawer';
-export {
-  AddRepositoryNode,
-  type AddRepositoryNodeData,
-  type AddRepositoryNodeType,
-} from './add-repository-node';
+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';
 export {
@@ -35,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/common/repository-node/use-repository-actions.ts

@@ -37,22 +37,19 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
 
   // Clear timers on unmount
   useEffect(() => {
-    const ideTimer = ideTimerRef.current;
-    const shellTimer = shellTimerRef.current;
-    const folderTimer = folderTimerRef.current;
+    const ideRef = ideTimerRef;
+    const shellRef = shellTimerRef;
+    const folderRef = folderTimerRef;
     return () => {
-      if (ideTimer) clearTimeout(ideTimer);
-      if (shellTimer) clearTimeout(shellTimer);
-      if (folderTimer) clearTimeout(folderTimer);
+      if (ideRef.current) clearTimeout(ideRef.current);
+      if (shellRef.current) clearTimeout(shellRef.current);
+      if (folderRef.current) clearTimeout(folderRef.current);
     };
   }, []);
 
-  const performToolbarAction = useCallback(
+  const performAction = useCallback(
     async (
-      action: (input: { repositoryPath: string }) => Promise<{
-        success: boolean;
-        error?: string;
-      }>,
+      action: () => Promise<{ success: boolean; error?: string }>,
       setLoading: (v: boolean) => void,
       setError: (v: string | null) => void,
       timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
@@ -60,48 +57,13 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
     ) => {
       if (!input || isLoading) return;
 
-      // Clear any existing timer
       if (timerRef.current) clearTimeout(timerRef.current);
 
       setLoading(true);
       setError(null);
 
       try {
-        const result = await action({ repositoryPath: input.repositoryPath });
-
-        if (!result.success) {
-          const errorMessage = result.error ?? 'An unexpected error occurred';
-          setError(errorMessage);
-          timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-        }
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
-        setError(errorMessage);
-        timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [input]
-  );
-
-  const performFolderAction = useCallback(
-    async (
-      action: (repositoryPath: string) => Promise<{ success: boolean; error?: string }>,
-      setLoading: (v: boolean) => void,
-      setError: (v: string | null) => void,
-      timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
-      isLoading: boolean
-    ) => {
-      if (!input || isLoading) return;
-
-      if (timerRef.current) clearTimeout(timerRef.current);
-
-      setLoading(true);
-      setError(null);
-
-      try {
-        const result = await action(input.repositoryPath);
+        const result = await action();
 
         if (!result.success) {
           const errorMessage = result.error ?? 'An unexpected error occurred';
@@ -120,26 +82,39 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
   );
 
   const handleOpenIde = useCallback(
-    () => performToolbarAction(openIde, setIdeLoading, setIdeError, ideTimerRef, ideLoading),
-    [performToolbarAction, ideLoading]
+    () =>
+      performAction(
+        () => openIde({ repositoryPath: input!.repositoryPath }),
+        setIdeLoading,
+        setIdeError,
+        ideTimerRef,
+        ideLoading
+      ),
+    [performAction, ideLoading, input]
   );
 
   const handleOpenShell = useCallback(
     () =>
-      performToolbarAction(openShell, setShellLoading, setShellError, shellTimerRef, shellLoading),
-    [performToolbarAction, shellLoading]
+      performAction(
+        () => openShell({ repositoryPath: input!.repositoryPath }),
+        setShellLoading,
+        setShellError,
+        shellTimerRef,
+        shellLoading
+      ),
+    [performAction, shellLoading, input]
   );
 
   const handleOpenFolder = useCallback(
     () =>
-      performFolderAction(
-        openFolder,
+      performAction(
+        () => openFolder(input!.repositoryPath),
         setFolderLoading,
         setFolderError,
         folderTimerRef,
         folderLoading
       ),
-    [performFolderAction, folderLoading]
+    [performAction, folderLoading, input]
   );
 
   return {

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

@@ -3,7 +3,7 @@
 import { useState, useCallback } from 'react';
 import { Github, Plus, TerminalSquare, Copy, Check, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { pickFolder } from '@/components/common/add-repository-node/pick-folder';
+import { pickFolder } from '@/components/common/add-repository-button/pick-folder';
 
 export interface ControlCenterEmptyStateProps {
   onRepositorySelect?: (path: string) => void;