@shepai/cli 1.72.9 → 1.73.0

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

@@ -0,0 +1,376 @@
+'use client';
+
+import { useState, useMemo, useCallback, useRef } from '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';
+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: 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). */
+  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') {
+      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 };
+}
+
+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[]
+): 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;
+
+  // 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 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(
+        ([, 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 key = `${pendingEntry.data.name}\0${pendingEntry.data.repositoryPath}`;
+        if (!realFeatureKeys.has(key)) {
+          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 key = `${pendingEntry.data.name}\0${pendingEntry.data.repositoryPath}`;
+        if (realFeatureKeys.has(key)) {
+          next.delete(tempId);
+          changed = true;
+        }
+      }
+      return changed ? next : currentPendingMap;
+    });
+
+    setRepoMap(newRepoMap);
+  }, []);
+
+  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;
+      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) => {
+      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,
+  };
+}

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,
-  };
 }

package/web/.next/standalone/src/presentation/web/lib/derive-graph.ts

@@ -0,0 +1,178 @@
+/**
+ * derive-graph.ts
+ *
+ * Pure client-side derivation: domain Maps → React Flow nodes + edges.
+ * All edges are derived from domain relationships (repositoryPath matching,
+ * parentNodeId) — never stored independently.
+ */
+
+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';
+/** A feature node entry stored in the domain Map. */
+export interface FeatureEntry {
+  nodeId: string;
+  data: FeatureNodeData;
+  /** If set, this feature connects to a parent feature via a dependency edge (no repo→feature edge). */
+  parentNodeId?: string;
+}
+
+/** A repository node entry stored in the domain Map. */
+export interface RepoEntry {
+  nodeId: string;
+  data: RepositoryNodeData;
+}
+
+/** Stable callbacks passed by the consumer, injected into derived node data. */
+export interface GraphCallbacks {
+  /** Called when the user triggers an action on a feature node (e.g., adds a sub-feature). */
+  onNodeAction?: (nodeId: string) => void;
+  /** Called when the user opens settings/details on a feature node. */
+  onNodeSettings?: (nodeId: string) => void;
+  /** Called when the user deletes a feature. */
+  onFeatureDelete?: (featureId: string) => void;
+  /** Called when the user clicks the "+" add-feature button on a repo node. */
+  onRepositoryAdd?: (repoNodeId: string) => void;
+  /** Called when the user clicks a repo node to navigate to its detail page. */
+  onRepositoryClick?: (repoNodeId: string) => void;
+  /** Called when the user deletes a repository. */
+  onRepositoryDelete?: (repositoryId: string) => void;
+}
+
+/**
+ * Derives React Flow nodes and edges from domain Maps.
+ *
+ * - Feature nodes without a parentNodeId → repo→feature edge (matched by repositoryPath)
+ * - Feature nodes without a parentNodeId but with no matching repo → virtual repo node
+ * - Feature nodes with a parentNodeId → dependency edge (parentNodeId→nodeId)
+ * - Pending feature nodes (creating state) from pendingMap → same rules, no action callbacks
+ * - Callbacks are injected into node data via closures
+ */
+export function deriveGraph(
+  featureMap: Map<string, FeatureEntry>,
+  repoMap: Map<string, RepoEntry>,
+  pendingMap: Map<string, FeatureEntry>,
+  callbacks?: GraphCallbacks
+): { nodes: CanvasNodeType[]; edges: Edge[] } {
+  const nodes: CanvasNodeType[] = [];
+  const edges: Edge[] = [];
+
+  // Build a lookup: repositoryPath → repoNodeId
+  const repoByPath = new Map<string, string>();
+  for (const [nodeId, entry] of repoMap) {
+    if (entry.data.repositoryPath) {
+      repoByPath.set(entry.data.repositoryPath, nodeId);
+    }
+  }
+
+  // Virtual repo nodes created for orphaned features (not in repoMap)
+  const virtualRepos = new Map<string, string>(); // path → virtualNodeId
+
+  function getOrCreateVirtualRepo(repositoryPath: string): string {
+    if (virtualRepos.has(repositoryPath)) {
+      return virtualRepos.get(repositoryPath)!;
+    }
+    const virtualId = `virtual-repo-${repositoryPath}`;
+    const repoName = repositoryPath.split('/').filter(Boolean).at(-1) ?? repositoryPath;
+    nodes.push({
+      id: virtualId,
+      type: 'repositoryNode',
+      position: { x: 0, y: 0 },
+      data: { name: repoName, repositoryPath } satisfies RepositoryNodeData,
+    } as CanvasNodeType);
+    virtualRepos.set(repositoryPath, virtualId);
+    return virtualId;
+  }
+
+  // Add repo nodes (real ones)
+  for (const [nodeId, entry] of repoMap) {
+    const data: RepositoryNodeData = {
+      ...entry.data,
+      ...(callbacks?.onRepositoryAdd && {
+        onAdd: () => callbacks.onRepositoryAdd!(nodeId),
+      }),
+      ...(callbacks?.onRepositoryClick && {
+        onClick: () => callbacks.onRepositoryClick!(nodeId),
+      }),
+      ...(callbacks?.onRepositoryDelete && {
+        onDelete: callbacks.onRepositoryDelete,
+      }),
+    };
+    nodes.push({
+      id: nodeId,
+      type: 'repositoryNode',
+      position: { x: 0, y: 0 },
+      data,
+    } as CanvasNodeType);
+  }
+
+  // Process feature entries (both real and pending).
+  // Skip pendingMap entries that already exist in featureMap (reconcile may not
+  // have cleaned them up yet if the AI-generated name differs from the original).
+  const allFeatureEntries: [string, FeatureEntry, boolean][] = [
+    ...[...featureMap.entries()].map(
+      ([id, e]) => [id, e, false] as [string, FeatureEntry, boolean]
+    ),
+    ...[...pendingMap.entries()]
+      .filter(([id]) => !featureMap.has(id))
+      .map(([id, e]) => [id, e, true] as [string, FeatureEntry, boolean]),
+  ];
+
+  for (const [nodeId, entry, isPending] of allFeatureEntries) {
+    const isCreating = entry.data.state === 'creating' || isPending;
+
+    const data: FeatureNodeData = {
+      ...entry.data,
+      // Callbacks only for non-creating nodes
+      ...(!isCreating &&
+        callbacks?.onNodeAction && {
+          onAction: () => callbacks.onNodeAction!(nodeId),
+        }),
+      ...(!isCreating &&
+        callbacks?.onNodeSettings && {
+          onSettings: () => callbacks.onNodeSettings!(nodeId),
+        }),
+      ...(!isCreating &&
+        callbacks?.onFeatureDelete && {
+          onDelete: callbacks.onFeatureDelete,
+        }),
+    };
+
+    nodes.push({
+      id: nodeId,
+      type: 'featureNode',
+      position: { x: 0, y: 0 },
+      data,
+    } as CanvasNodeType);
+
+    // Edge derivation
+    if (entry.parentNodeId) {
+      // Dependency edge (parent→child feature)
+      edges.push({
+        id: `dep-${entry.parentNodeId}-${nodeId}`,
+        source: entry.parentNodeId,
+        target: nodeId,
+        type: 'dependencyEdge',
+      });
+    } else {
+      // Repo→feature edge (matched by repositoryPath)
+      const repositoryPath = entry.data.repositoryPath;
+      const repoNodeId = repoByPath.get(repositoryPath) ?? getOrCreateVirtualRepo(repositoryPath);
+      edges.push({
+        id: `edge-${repoNodeId}-${nodeId}`,
+        source: repoNodeId,
+        target: nodeId,
+        style: { strokeDasharray: '5 5' },
+      });
+    }
+  }
+
+  // Inject showHandles based on whether there are any edges
+  const hasEdges = edges.length > 0;
+  for (const node of nodes) {
+    (node.data as Record<string, unknown>).showHandles = hasEdges;
+  }
+
+  return { nodes, edges };
+}

package/web/.next/standalone/src/presentation/web/lib/layout-with-dagre.ts

@@ -24,8 +24,7 @@ export const CANVAS_LAYOUT_DEFAULTS: LayoutOptions = {
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS: Record<string, { width: number; height: number }> = {
   featureNode: { width: 288, height: 140 },
-  repositoryNode: { width: 288, height: 50 },
-  addRepositoryNode: { width: 224, height: 50 },
+  repositoryNode: { width: 328, height: 50 },
 };
 
 function getNodeSize(