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

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/components/ui/alert-dialog.tsx

@@ -28,10 +28,7 @@ function AlertDialogOverlay({
   return (
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
       onClick={(e) => {
         // Prevent overlay clicks from propagating to document-level handlers
         // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
@@ -57,7 +54,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+          'bg-background group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
           className
         )}
         {...props}

package/web/.next/standalone/src/presentation/web/components/ui/dialog.tsx

@@ -20,10 +20,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, onClick, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
-      className
-    )}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
     onClick={(e) => {
       // Prevent overlay clicks from propagating to document-level handlers
       // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
@@ -44,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg',
         className
       )}
       {...props}

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(() => {

package/web/.next/standalone/src/presentation/web/hooks/use-graph-state.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo, useCallback, useRef } from 'react';
-import type { Edge } from '@xyflow/react';
+import type { Edge, Position } from '@xyflow/react';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import type { RepositoryNodeData } from '@/components/common/repository-node';
@@ -26,10 +26,7 @@ export interface UseGraphStateReturn {
    */
   reconcile: (newNodes: CanvasNodeType[], newEdges: Edge[]) => void;
   /** Update a feature's state/lifecycle/name (e.g., from SSE events). */
-  updateFeature: (
-    featureNodeId: string,
-    updates: Partial<Pick<FeatureNodeData, 'state' | 'lifecycle' | 'name' | 'description'>>
-  ) => void;
+  updateFeature: (featureNodeId: string, updates: FeatureDataUpdates) => void;
   /** Add a pending (optimistic) feature node (state='creating'). */
   addPendingFeature: (nodeId: string, data: FeatureNodeData, parentNodeId?: string) => void;
   /** Remove a pending feature node (e.g., on rollback). */
@@ -63,7 +60,7 @@ function parseMaps(
   // Build parentNodeId map from dependency edges
   const parentByChild = new Map<string, string>();
   for (const edge of initialEdges) {
-    if (edge.type === 'dependencyEdge' || edge.id.startsWith('dep-')) {
+    if (edge.type === 'dependencyEdge') {
       parentByChild.set(edge.target, edge.source);
     }
   }
@@ -89,6 +86,19 @@ function parseMaps(
   return { featureMap, repoMap };
 }
 
+type FeatureDataUpdates = Partial<
+  Pick<FeatureNodeData, 'state' | 'lifecycle' | 'name' | 'description'>
+>;
+
+function isFeatureDataUnchanged(data: FeatureNodeData, updates: FeatureDataUpdates): boolean {
+  return (
+    (updates.state === undefined || updates.state === data.state) &&
+    (updates.lifecycle === undefined || updates.lifecycle === data.lifecycle) &&
+    (updates.name === undefined || updates.name === data.name) &&
+    (updates.description === undefined || updates.description === data.description)
+  );
+}
+
 export function useGraphState(
   initialNodes: CanvasNodeType[],
   initialEdges: Edge[]
@@ -129,17 +139,69 @@ export function useGraphState(
   const repoMapRef = useRef(repoMap);
   repoMapRef.current = repoMap;
 
-  // Derived nodes/edges — only re-runs when domain Maps change (not callbacks)
+  // Derive graph from domain Maps (runs on every Map change, but dagre only on topology change)
+  const derived = useMemo(
+    () => deriveGraph(featureMap, repoMap, pendingMap, stableCallbacks),
+    [featureMap, repoMap, pendingMap, stableCallbacks]
+  );
+
+  // Cache dagre layout positions — only re-run when node set or edge connections change
+  const layoutCacheRef = useRef<{
+    key: string;
+    positions: Map<
+      string,
+      { position: { x: number; y: number }; targetPosition: Position; sourcePosition: Position }
+    >;
+  }>({ key: '', positions: new Map() });
+
   const { nodes, edges } = useMemo(() => {
-    const derived = deriveGraph(featureMap, repoMap, pendingMap, stableCallbacks);
-    return layoutWithDagre(derived.nodes, derived.edges, CANVAS_LAYOUT_DEFAULTS);
-  }, [featureMap, repoMap, pendingMap, stableCallbacks]);
+    const nodeIds = derived.nodes
+      .map((n) => n.id)
+      .sort()
+      .join(',');
+    const edgeKeys = derived.edges
+      .map((e) => `${e.source}-${e.target}`)
+      .sort()
+      .join(',');
+    const topologyKey = `${nodeIds}|${edgeKeys}`;
+
+    if (topologyKey !== layoutCacheRef.current.key) {
+      // Topology changed — re-run dagre
+      const result = layoutWithDagre(derived.nodes, derived.edges, CANVAS_LAYOUT_DEFAULTS);
+      const positions = new Map<
+        string,
+        { position: { x: number; y: number }; targetPosition: Position; sourcePosition: Position }
+      >();
+      for (const node of result.nodes) {
+        positions.set(node.id, {
+          position: node.position,
+          targetPosition: (node as Record<string, unknown>).targetPosition as Position,
+          sourcePosition: (node as Record<string, unknown>).sourcePosition as Position,
+        });
+      }
+      layoutCacheRef.current = { key: topologyKey, positions };
+      return result;
+    }
+
+    // Data-only change — apply cached positions without re-running dagre
+    const { positions } = layoutCacheRef.current;
+    const nodes = derived.nodes.map((node) => {
+      const cached = positions.get(node.id);
+      return cached ? { ...node, ...cached } : node;
+    });
+    return { nodes, edges: derived.edges };
+  }, [derived]);
 
   // --- Mutations ---
 
   const reconcile = useCallback((newNodes: CanvasNodeType[], newEdges: Edge[]) => {
     const { featureMap: newFeatureMap, repoMap: newRepoMap } = parseMaps(newNodes, newEdges);
 
+    // Precompute match keys so we don't scan newFeatureMap.values() per pending entry
+    const realFeatureKeys = new Set(
+      [...newFeatureMap.values()].map((e) => `${e.data.name}\0${e.data.repositoryPath}`)
+    );
+
     setFeatureMap((currentFeatureMap) => {
       // Preserve pending (creating) nodes unless matched by name+repositoryPath from newFeatureMap
       const pendingEntries = [...currentFeatureMap.entries()].filter(
@@ -150,12 +212,8 @@ export function useGraphState(
 
       // Keep pending nodes that don't have a real counterpart in new data
       for (const [tempId, pendingEntry] of pendingEntries) {
-        const matched = [...newFeatureMap.values()].some(
-          (e) =>
-            e.data.name === pendingEntry.data.name &&
-            e.data.repositoryPath === pendingEntry.data.repositoryPath
-        );
-        if (!matched) {
+        const key = `${pendingEntry.data.name}\0${pendingEntry.data.repositoryPath}`;
+        if (!realFeatureKeys.has(key)) {
           merged.set(tempId, pendingEntry);
         }
       }
@@ -178,12 +236,8 @@ export function useGraphState(
       let changed = false;
       const next = new Map(currentPendingMap);
       for (const [tempId, pendingEntry] of currentPendingMap) {
-        const matched = [...newFeatureMap.values()].some(
-          (e) =>
-            e.data.name === pendingEntry.data.name &&
-            e.data.repositoryPath === pendingEntry.data.repositoryPath
-        );
-        if (matched) {
+        const key = `${pendingEntry.data.name}\0${pendingEntry.data.repositoryPath}`;
+        if (realFeatureKeys.has(key)) {
           next.delete(tempId);
           changed = true;
         }
@@ -194,56 +248,35 @@ export function useGraphState(
     setRepoMap(newRepoMap);
   }, []);
 
-  const updateFeature = useCallback(
-    (
-      featureNodeId: string,
-      updates: Partial<Pick<FeatureNodeData, 'state' | 'lifecycle' | 'name' | 'description'>>
-    ) => {
-      setFeatureMap((prev) => {
-        const entry = prev.get(featureNodeId);
-        if (!entry) {
-          // Feature not yet in map — buffer update for when reconcile adds it
-          pendingUpdatesRef.current.set(featureNodeId, {
-            ...pendingUpdatesRef.current.get(featureNodeId),
-            ...updates,
-          });
-          return prev;
-        }
-        // Clear any buffered update for this feature since it's now in the map
-        pendingUpdatesRef.current.delete(featureNodeId);
-        // Skip if no actual change (prevents unnecessary re-renders on event replay)
-        const stateUnchanged = updates.state === undefined || updates.state === entry.data.state;
-        const lifecycleUnchanged =
-          updates.lifecycle === undefined || updates.lifecycle === entry.data.lifecycle;
-        const nameUnchanged = updates.name === undefined || updates.name === entry.data.name;
-        const descUnchanged =
-          updates.description === undefined || updates.description === entry.data.description;
-        if (stateUnchanged && lifecycleUnchanged && nameUnchanged && descUnchanged) {
-          return prev;
-        }
-        const next = new Map(prev);
-        next.set(featureNodeId, { ...entry, data: { ...entry.data, ...updates } });
-        return next;
-      });
+  const updateFeature = useCallback((featureNodeId: string, updates: FeatureDataUpdates) => {
+    setFeatureMap((prev) => {
+      const entry = prev.get(featureNodeId);
+      if (!entry) {
+        // Feature not yet in map — buffer update for when reconcile adds it
+        pendingUpdatesRef.current.set(featureNodeId, {
+          ...pendingUpdatesRef.current.get(featureNodeId),
+          ...updates,
+        });
+        return prev;
+      }
+      // Clear any buffered update for this feature since it's now in the map
+      pendingUpdatesRef.current.delete(featureNodeId);
+      if (isFeatureDataUnchanged(entry.data, updates)) return prev;
+      const next = new Map(prev);
+      next.set(featureNodeId, { ...entry, data: { ...entry.data, ...updates } });
+      return next;
+    });
 
-      // Also check pendingMap
-      setPendingMap((prev) => {
-        const entry = prev.get(featureNodeId);
-        if (!entry) return prev;
-        const stateUnchanged = updates.state === undefined || updates.state === entry.data.state;
-        const lifecycleUnchanged =
-          updates.lifecycle === undefined || updates.lifecycle === entry.data.lifecycle;
-        const nameUnchanged = updates.name === undefined || updates.name === entry.data.name;
-        const descUnchanged =
-          updates.description === undefined || updates.description === entry.data.description;
-        if (stateUnchanged && lifecycleUnchanged && nameUnchanged && descUnchanged) return prev;
-        const next = new Map(prev);
-        next.set(featureNodeId, { ...entry, data: { ...entry.data, ...updates } });
-        return next;
-      });
-    },
-    []
-  );
+    // Also check pendingMap
+    setPendingMap((prev) => {
+      const entry = prev.get(featureNodeId);
+      if (!entry) return prev;
+      if (isFeatureDataUnchanged(entry.data, updates)) return prev;
+      const next = new Map(prev);
+      next.set(featureNodeId, { ...entry, data: { ...entry.data, ...updates } });
+      return next;
+    });
+  }, []);
 
   const addPendingFeature = useCallback(
     (nodeId: string, data: FeatureNodeData, parentNodeId?: string) => {

package/web/.next/standalone/src/presentation/web/hooks/use-notifications.stories.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { toast } from 'sonner';
 import { Toaster } from '@/components/ui/sonner';
@@ -44,45 +44,17 @@ function NotificationDemo() {
       const method = event.severity ?? 'info';
       toast[method](event.featureName, { description: event.message });
 
-      if (globalThis.Notification?.permission === 'granted') {
-        new Notification(event.featureName, { body: event.message });
-      }
-
       const soundName = SEVERITY_SOUNDS[event.severity];
       soundsByName[soundName]?.play();
     },
     [soundsByName]
   );
 
-  const [browserPermission, setBrowserPermission] = useState<NotificationPermission>(
-    typeof globalThis.Notification !== 'undefined' ? globalThis.Notification.permission : 'default'
-  );
-
-  const requestPermission = async () => {
-    if (typeof globalThis.Notification === 'undefined') return;
-    const result = await globalThis.Notification.requestPermission();
-    setBrowserPermission(result);
-  };
-
   return (
     <div className="flex w-[420px] flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <h3 className="text-sm font-semibold">Browser Notification Permission</h3>
-        <div className="flex items-center gap-3">
-          <span className="text-muted-foreground text-sm">
-            Status: <code className="bg-muted rounded px-1.5 py-0.5">{browserPermission}</code>
-          </span>
-          <Button size="sm" variant="outline" onClick={requestPermission}>
-            Request Permission
-          </Button>
-        </div>
-      </div>
-
       <div className="flex flex-col gap-2">
         <h3 className="text-sm font-semibold">Simulate Notification Events</h3>
-        <p className="text-muted-foreground text-xs">
-          Click a button to fire a toast, browser notification, and sound.
-        </p>
+        <p className="text-muted-foreground text-xs">Click a button to fire a toast and sound.</p>
         <div className="flex flex-wrap gap-2">
           <Button
             size="sm"

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import type { NotificationEvent } from '@shepai/core/domain/generated/output';
@@ -9,11 +9,6 @@ import { useAgentEventsContext } from './agent-events-provider';
 import { useSoundAction } from './use-sound-action';
 import type { SoundAction } from './use-sound-action';
 
-export interface UseNotificationsResult {
-  requestBrowserPermission: () => Promise<void>;
-  browserPermissionState: NotificationPermission;
-}
-
 const SEVERITY_TO_TOAST: Record<NotificationSeverity, 'success' | 'error' | 'warning' | 'info'> = {
   [NotificationSeverity.Success]: 'success',
   [NotificationSeverity.Error]: 'error',
@@ -38,16 +33,6 @@ function dispatchToast(event: NotificationEvent, navigate?: (path: string) => vo
   });
 }
 
-function dispatchBrowserNotification(event: NotificationEvent): void {
-  if (globalThis.Notification?.permission !== 'granted') {
-    return;
-  }
-  new Notification(`Shep: ${event.featureName}`, {
-    body: event.message,
-    icon: '/favicon-light.svg',
-  });
-}
-
 const SEVERITY_TO_ACTION: Record<NotificationSeverity, SoundAction> = {
   [NotificationSeverity.Success]: 'notification-success',
   [NotificationSeverity.Error]: 'notification-error',
@@ -55,7 +40,7 @@ const SEVERITY_TO_ACTION: Record<NotificationSeverity, SoundAction> = {
   [NotificationSeverity.Info]: 'notification-info',
 };
 
-export function useNotifications(): UseNotificationsResult {
+export function useNotifications(): void {
   const router = useRouter();
   const { events } = useAgentEventsContext();
 
@@ -74,13 +59,6 @@ export function useNotifications(): UseNotificationsResult {
     [successSound, errorSound, warningSound, infoSound]
   );
 
-  const [browserPermissionState, setBrowserPermissionState] = useState<NotificationPermission>(
-    () => {
-      if (typeof globalThis.Notification === 'undefined') return 'default';
-      return globalThis.Notification.permission;
-    }
-  );
-
   // Track how many events from the array we've already processed.
   // Using the array index (instead of lastEvent) prevents React batching
   // from silently dropping events when multiple SSE messages arrive together.
@@ -103,21 +81,9 @@ export function useNotifications(): UseNotificationsResult {
       }
 
       dispatchToast(event, (path) => router.push(path as Parameters<typeof router.push>[0]));
-      dispatchBrowserNotification(event);
 
       const actionName = SEVERITY_TO_ACTION[event.severity];
       soundsByAction[actionName]?.play();
     }
   }, [events, soundsByAction, router]);
-
-  const requestBrowserPermission = useCallback(async () => {
-    if (typeof globalThis.Notification === 'undefined') return;
-    const result = await globalThis.Notification.requestPermission();
-    setBrowserPermissionState(result);
-  }, []);
-
-  return {
-    requestBrowserPermission,
-    browserPermissionState,
-  };
 }