@shepai/cli 1.72.9-pr218.000ada0 → 1.72.9-pr220.e1bfec0

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

@@ -4,7 +4,6 @@ import { FeaturesCanvas } from './features-canvas';
 import type { CanvasNodeType } from './features-canvas';
 import type { FeatureNodeType } from '@/components/common/feature-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
-import type { AddRepositoryNodeType } from '@/components/common/add-repository-node';
 import { layoutWithDagre } from '@/lib/layout-with-dagre';
 
 const meta: Meta<typeof FeaturesCanvas> = {
@@ -229,8 +228,6 @@ export const Interactive: Story = {
       { id: 'e3-4', source: 'node-3', target: 'node-4' },
     ],
     onAddFeature: () => undefined,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -243,16 +240,8 @@ const repoNode: RepositoryNodeType = {
   },
 };
 
-const addRepoNode: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 50, y: 302 },
-  data: {},
-};
-
 const repoFeatureNodes: CanvasNodeType[] = [
   repoNode,
-  addRepoNode,
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -296,8 +285,6 @@ export const ConnectedRepositoryMultipleFeatures: Story = {
   args: {
     nodes: repoFeatureNodes,
     edges: repoFeatureEdges,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -310,12 +297,6 @@ const singleRepoSingleFeatureNodes: CanvasNodeType[] = [
     position: { x: 50, y: 127 },
     data: { name: 'shep-ai/cli' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 267 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -339,8 +320,6 @@ export const ConnectedRepositorySingleFeature: Story = {
     edges: [
       { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', type: 'straight', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -353,12 +332,6 @@ const singleRepoMultiFeatNodes: CanvasNodeType[] = [
     position: { x: 50, y: 162 },
     data: { name: 'shep-ai/cli' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 450 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -414,8 +387,6 @@ export const SingleRepositoryMultipleFeatures: Story = {
       { id: 'e-r1-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
       { id: 'e-r1-f3', source: 'repo-1', target: 'feat-3', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -434,12 +405,6 @@ const multiRepoNodes: CanvasNodeType[] = [
     position: { x: 50, y: 270 },
     data: { name: 'shep-ai/web' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 470 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -479,8 +444,6 @@ export const MultipleRepositories: Story = {
       { id: 'e-r1-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
       { id: 'e-r2-f2', source: 'repo-2', target: 'feat-2', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -505,12 +468,6 @@ const mixedRepoFeatureNodesRaw: CanvasNodeType[] = [
     position: { x: 0, y: 0 },
     data: { name: 'shep-ai/api' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 0, y: 0 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -593,8 +550,6 @@ export const MultipleRepositoriesMixedConnections: Story = {
   args: {
     nodes: mixedLayoutedNodes,
     edges: mixedLayoutedEdges,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -603,8 +558,5 @@ export const InteractiveWithRepository: Story = {
     nodes: repoFeatureNodes,
     edges: repoFeatureEdges,
     onAddFeature: () => undefined,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
-    onRepositoryAdd: () => undefined,
   },
 };

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { ReactFlow, Background, Controls } from '@xyflow/react';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import { Plus } from 'lucide-react';
@@ -10,11 +10,9 @@ import { FeatureNode } from '@/components/common/feature-node';
 import type { FeatureNodeType, FeatureNodeData } from '@/components/common/feature-node';
 import { RepositoryNode } from '@/components/common/repository-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
-import { AddRepositoryNode } from '@/components/common/add-repository-node';
-import type { AddRepositoryNodeType } from '@/components/common/add-repository-node';
 import { DependencyEdge } from './dependency-edge';
 
-export type CanvasNodeType = FeatureNodeType | RepositoryNodeType | AddRepositoryNodeType;
+export type CanvasNodeType = FeatureNodeType | RepositoryNodeType;
 
 export interface FeaturesCanvasProps {
   nodes: CanvasNodeType[];
@@ -22,16 +20,9 @@ export interface FeaturesCanvasProps {
   selectedFeatureId?: string | null;
   onNodesChange?: (changes: NodeChange<CanvasNodeType>[]) => void;
   onAddFeature?: () => void;
-  onNodeAction?: (nodeId: string) => void;
-  onNodeSettings?: (nodeId: string) => void;
   onNodeClick?: (event: React.MouseEvent, node: CanvasNodeType) => void;
   onPaneClick?: (event: React.MouseEvent) => void;
-  onRepositoryAdd?: (repoNodeId: string) => void;
-  onRepositoryClick?: (nodeId: string) => void;
-  onRepositoryDelete?: (repositoryId: string) => void;
-  onFeatureDelete?: (featureId: string) => void;
   onConnect?: (connection: Connection) => void;
-  onRepositorySelect?: (path: string) => void;
   onCanvasDrag?: () => void;
   toolbar?: React.ReactNode;
   emptyState?: React.ReactNode;
@@ -43,16 +34,9 @@ export function FeaturesCanvas({
   selectedFeatureId,
   onNodesChange,
   onAddFeature,
-  onNodeAction,
-  onNodeSettings,
   onConnect,
   onNodeClick,
   onPaneClick,
-  onRepositoryAdd,
-  onRepositoryClick,
-  onRepositoryDelete,
-  onFeatureDelete,
-  onRepositorySelect,
   onCanvasDrag,
   toolbar,
   emptyState,
@@ -61,7 +45,6 @@ export function FeaturesCanvas({
     () => ({
       featureNode: FeatureNode,
       repositoryNode: RepositoryNode,
-      addRepositoryNode: AddRepositoryNode,
     }),
     []
   );
@@ -89,48 +72,19 @@ export function FeaturesCanvas({
     [nodes, edges]
   );
 
+  // Callbacks and showHandles are already injected into node.data by deriveGraph.
+  // Only selectedFeatureId highlighting needs to be applied here.
   const enrichedNodes = useMemo(
     () =>
-      nodes.map((node) => ({
-        ...node,
-        // React Flow passes `selected` as a prop to the node component
-        ...(node.type === 'featureNode' && {
-          selected:
-            selectedFeatureId != null &&
-            (node.data as FeatureNodeData).featureId === selectedFeatureId,
-        }),
-        data: {
-          ...node.data,
-          showHandles: edges.length > 0,
-          ...(node.type === 'featureNode' && (node.data as FeatureNodeData).state !== 'creating'
-            ? {
-                onAction: onNodeAction ? () => onNodeAction(node.id) : undefined,
-                onSettings: onNodeSettings ? () => onNodeSettings(node.id) : undefined,
-                onDelete: onFeatureDelete,
-              }
-            : {}),
-          ...(node.type === 'repositoryNode' && {
-            onAdd: onRepositoryAdd ? () => onRepositoryAdd(node.id) : undefined,
-            onClick: onRepositoryClick ? () => onRepositoryClick(node.id) : undefined,
-            onDelete: onRepositoryDelete,
-          }),
-          ...(node.type === 'addRepositoryNode' && {
-            onSelect: onRepositorySelect ? (path: string) => onRepositorySelect(path) : undefined,
-          }),
-        },
-      })) as CanvasNodeType[],
-    [
-      nodes,
-      edges.length,
-      selectedFeatureId,
-      onNodeAction,
-      onNodeSettings,
-      onFeatureDelete,
-      onRepositoryAdd,
-      onRepositoryClick,
-      onRepositoryDelete,
-      onRepositorySelect,
-    ]
+      selectedFeatureId == null
+        ? nodes
+        : (nodes.map((node) =>
+            node.type === 'featureNode' &&
+            (node.data as FeatureNodeData).featureId === selectedFeatureId
+              ? { ...node, selected: true }
+              : node
+          ) as CanvasNodeType[]),
+    [nodes, selectedFeatureId]
   );
 
   if (nodes.length === 0) {

package/web/.next/standalone/src/presentation/web/components/layouts/app-shell/app-shell.tsx

@@ -4,7 +4,7 @@ import { useCallback, type ReactNode } from 'react';
 import { useRouter } from 'next/navigation';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
 import { AppSidebar } from '@/components/layouts/app-sidebar';
-import { AddRepositoryButton } from '@/components/common/add-repository-node';
+import { AddRepositoryButton } from '@/components/common/add-repository-button';
 import { ThemeToggle } from '@/components/common/theme-toggle';
 import { SoundToggle } from '@/components/common/sound-toggle';
 import { AgentEventsProvider } from '@/hooks/agent-events-provider';

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

@@ -0,0 +1,343 @@
+'use client';
+
+import { useState, useMemo, useCallback, useRef } from 'react';
+import type { Edge } 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';
+import {
+  deriveGraph,
+  type FeatureEntry,
+  type RepoEntry,
+  type GraphCallbacks,
+} from '@/lib/derive-graph';
+import { layoutWithDagre, CANVAS_LAYOUT_DEFAULTS } from '@/lib/layout-with-dagre';
+
+export type { GraphCallbacks } from '@/lib/derive-graph';
+
+export interface UseGraphStateReturn {
+  /** Derived React Flow nodes (from domain Maps). */
+  nodes: CanvasNodeType[];
+  /** Derived React Flow edges (from domain Maps). */
+  edges: Edge[];
+  /**
+   * Reconcile domain Maps with fresh server data (new initialNodes/initialEdges).
+   * Preserves pending (creating) nodes unless a matching real feature appears.
+   */
+  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;
+  /** 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). */
+  removePendingFeature: (nodeId: string) => void;
+  /** Remove a real feature node from the domain Map. */
+  removeFeature: (nodeId: string) => void;
+  /** Restore a previously removed feature (rollback). */
+  restoreFeature: (nodeId: string, entry: FeatureEntry) => void;
+  /** Add a repository node (may use a temp ID initially). */
+  addRepository: (nodeId: string, data: RepositoryNodeData) => void;
+  /** Remove a repository node. */
+  removeRepository: (nodeId: string) => void;
+  /** Replace a temp repo ID with the real one (atomic). */
+  replaceRepository: (tempId: string, realId: string, data: RepositoryNodeData) => void;
+  /** Stable lookup: get the repositoryPath for a feature node. */
+  getFeatureRepositoryPath: (featureNodeId: string) => string | undefined;
+  /** Stable lookup: get repository node data by nodeId. */
+  getRepositoryData: (nodeId: string) => RepositoryNodeData | undefined;
+  /** Update callbacks injected into node data (does NOT trigger re-render). */
+  setCallbacks: (callbacks: GraphCallbacks) => void;
+}
+
+/** Parse initialNodes + initialEdges into domain Maps. */
+function parseMaps(
+  initialNodes: CanvasNodeType[],
+  initialEdges: Edge[]
+): {
+  featureMap: Map<string, FeatureEntry>;
+  repoMap: Map<string, RepoEntry>;
+} {
+  // 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-')) {
+      parentByChild.set(edge.target, edge.source);
+    }
+  }
+
+  const featureMap = new Map<string, FeatureEntry>();
+  const repoMap = new Map<string, RepoEntry>();
+
+  for (const node of initialNodes) {
+    if (node.type === 'featureNode') {
+      featureMap.set(node.id, {
+        nodeId: node.id,
+        data: node.data as FeatureNodeData,
+        parentNodeId: parentByChild.get(node.id),
+      });
+    } else if (node.type === 'repositoryNode') {
+      repoMap.set(node.id, {
+        nodeId: node.id,
+        data: node.data as RepositoryNodeData,
+      });
+    }
+  }
+
+  return { featureMap, repoMap };
+}
+
+export function useGraphState(
+  initialNodes: CanvasNodeType[],
+  initialEdges: Edge[]
+): UseGraphStateReturn {
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: parse only on mount (like useState initializer)
+  const init = useMemo(() => parseMaps(initialNodes, initialEdges), []);
+
+  const [featureMap, setFeatureMap] = useState<Map<string, FeatureEntry>>(init.featureMap);
+  const [repoMap, setRepoMap] = useState<Map<string, RepoEntry>>(init.repoMap);
+  const [pendingMap, setPendingMap] = useState<Map<string, FeatureEntry>>(
+    new Map<string, FeatureEntry>()
+  );
+
+  // Buffer for SSE updates that arrive before their feature is in featureMap.
+  // When reconcile adds new features, buffered updates are applied automatically.
+  const pendingUpdatesRef = useRef<
+    Map<string, Partial<Pick<FeatureNodeData, 'state' | 'lifecycle' | 'name' | 'description'>>>
+  >(new Map());
+
+  // Callbacks stored in a ref so changing them doesn't trigger re-render.
+  // The stable wrapper object reads from the ref so node closures always use latest callbacks.
+  const callbacksRef = useRef<GraphCallbacks>({});
+  const stableCallbacks = useMemo<GraphCallbacks>(
+    () => ({
+      onNodeAction: (nodeId) => callbacksRef.current.onNodeAction?.(nodeId),
+      onNodeSettings: (nodeId) => callbacksRef.current.onNodeSettings?.(nodeId),
+      onFeatureDelete: (featureId) => callbacksRef.current.onFeatureDelete?.(featureId),
+      onRepositoryAdd: (nodeId) => callbacksRef.current.onRepositoryAdd?.(nodeId),
+      onRepositoryClick: (nodeId) => callbacksRef.current.onRepositoryClick?.(nodeId),
+      onRepositoryDelete: (repositoryId) => callbacksRef.current.onRepositoryDelete?.(repositoryId),
+    }),
+    []
+  );
+
+  // Stable refs for domain Maps (for use in callbacks without depending on state)
+  const featureMapRef = useRef(featureMap);
+  featureMapRef.current = featureMap;
+  const repoMapRef = useRef(repoMap);
+  repoMapRef.current = repoMap;
+
+  // Derived nodes/edges — only re-runs when domain Maps change (not callbacks)
+  const { nodes, edges } = useMemo(() => {
+    const derived = deriveGraph(featureMap, repoMap, pendingMap, stableCallbacks);
+    return layoutWithDagre(derived.nodes, derived.edges, CANVAS_LAYOUT_DEFAULTS);
+  }, [featureMap, repoMap, pendingMap, stableCallbacks]);
+
+  // --- Mutations ---
+
+  const reconcile = useCallback((newNodes: CanvasNodeType[], newEdges: Edge[]) => {
+    const { featureMap: newFeatureMap, repoMap: newRepoMap } = parseMaps(newNodes, newEdges);
+
+    setFeatureMap((currentFeatureMap) => {
+      // Preserve pending (creating) nodes unless matched by name+repositoryPath from newFeatureMap
+      const pendingEntries = [...currentFeatureMap.entries()].filter(
+        ([, e]) => e.data.state === 'creating'
+      );
+
+      const merged = new Map(newFeatureMap);
+
+      // 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) {
+          merged.set(tempId, pendingEntry);
+        }
+      }
+
+      // Apply any buffered SSE updates to features that now exist in the map
+      for (const [nodeId, updates] of pendingUpdatesRef.current) {
+        const entry = merged.get(nodeId);
+        if (entry) {
+          merged.set(nodeId, { ...entry, data: { ...entry.data, ...updates } });
+          pendingUpdatesRef.current.delete(nodeId);
+        }
+      }
+
+      return merged;
+    });
+
+    // Clean pendingMap entries that now have a real counterpart in server data
+    setPendingMap((currentPendingMap) => {
+      if (currentPendingMap.size === 0) return currentPendingMap;
+      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) {
+          next.delete(tempId);
+          changed = true;
+        }
+      }
+      return changed ? next : currentPendingMap;
+    });
+
+    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;
+      });
+
+      // 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;
+      });
+    },
+    []
+  );
+
+  const addPendingFeature = useCallback(
+    (nodeId: string, data: FeatureNodeData, parentNodeId?: string) => {
+      setPendingMap((prev) => {
+        const next = new Map(prev);
+        next.set(nodeId, { nodeId, data, parentNodeId });
+        return next;
+      });
+    },
+    []
+  );
+
+  const removePendingFeature = useCallback((nodeId: string) => {
+    setPendingMap((prev) => {
+      if (!prev.has(nodeId)) return prev;
+      const next = new Map(prev);
+      next.delete(nodeId);
+      return next;
+    });
+  }, []);
+
+  const removeFeature = useCallback((nodeId: string) => {
+    setFeatureMap((prev) => {
+      if (!prev.has(nodeId)) return prev;
+      const next = new Map(prev);
+      next.delete(nodeId);
+      return next;
+    });
+  }, []);
+
+  const restoreFeature = useCallback((nodeId: string, entry: FeatureEntry) => {
+    setFeatureMap((prev) => {
+      const next = new Map(prev);
+      next.set(nodeId, entry);
+      return next;
+    });
+  }, []);
+
+  const addRepository = useCallback((nodeId: string, data: RepositoryNodeData) => {
+    setRepoMap((prev) => {
+      const next = new Map(prev);
+      next.set(nodeId, { nodeId, data });
+      return next;
+    });
+  }, []);
+
+  const removeRepository = useCallback((nodeId: string) => {
+    setRepoMap((prev) => {
+      if (!prev.has(nodeId)) return prev;
+      const next = new Map(prev);
+      next.delete(nodeId);
+      return next;
+    });
+  }, []);
+
+  const replaceRepository = useCallback(
+    (tempId: string, realId: string, data: RepositoryNodeData) => {
+      setRepoMap((prev) => {
+        if (!prev.has(tempId)) return prev;
+        const next = new Map(prev);
+        next.delete(tempId);
+        next.set(realId, { nodeId: realId, data });
+        return next;
+      });
+    },
+    []
+  );
+
+  const getFeatureRepositoryPath = useCallback((featureNodeId: string): string | undefined => {
+    return featureMapRef.current.get(featureNodeId)?.data.repositoryPath;
+  }, []);
+
+  const getRepositoryData = useCallback((nodeId: string): RepositoryNodeData | undefined => {
+    return repoMapRef.current.get(nodeId)?.data;
+  }, []);
+
+  const setCallbacks = useCallback((callbacks: GraphCallbacks) => {
+    callbacksRef.current = callbacks;
+  }, []);
+
+  return {
+    nodes,
+    edges,
+    reconcile,
+    updateFeature,
+    addPendingFeature,
+    removePendingFeature,
+    removeFeature,
+    restoreFeature,
+    addRepository,
+    removeRepository,
+    replaceRepository,
+    getFeatureRepositoryPath,
+    getRepositoryData,
+    setCallbacks,
+  };
+}