@shepai/cli 1.72.6 → 1.72.7

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { applyNodeChanges } from '@xyflow/react';
-import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+import { layoutWithDagre, CANVAS_LAYOUT_DEFAULTS, } from '../../../lib/layout-with-dagre.js';
 import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
@@ -11,9 +11,7 @@ import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { mapEventTypeToState, mapPhaseNameToLifecycle, } from '../../common/feature-node/derive-feature-state.js';
 let nextFeatureId = 0;
-export function useControlCenterState(initialNodes, initialEdges, 
-/** When true, background router.refresh() calls (polling / SSE debounce) are suppressed. */
-isRefreshBlocked) {
+export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
     const [nodes, setNodes] = useState(initialNodes);
     // eslint-disable-next-line react/hook-use-state -- raw setter renamed; public setEdges wrapper keeps edgesRef in sync
@@ -30,7 +28,7 @@ isRefreshBlocked) {
     }, []);
     const deleteSound = useSoundAction('delete');
     const createSound = useSoundAction('create');
-    // Sync server props into local state when router.refresh() delivers new data
+    // Sync server props into local state when parent re-renders with new data
     const initialNodeKey = initialNodes
         .map((n) => n.id)
         .sort()
@@ -61,8 +59,9 @@ isRefreshBlocked) {
             const creatingNodes = currentNodes.filter((n) => n.type === 'featureNode' &&
                 n.data.state === 'creating' &&
                 !serverIds.has(n.id));
-            // Merge server nodes with client positions
-            return initialNodes.map((serverNode) => {
+            // Merge server nodes with client positions, tracking if relayout is needed
+            let needsRelayout = false;
+            const merged = initialNodes.map((serverNode) => {
                 // Node already exists on canvas — keep its position, update data
                 const existing = currentById.get(serverNode.id);
                 if (existing) {
@@ -73,17 +72,28 @@ isRefreshBlocked) {
                     const donor = creatingNodes.shift();
                     return { ...serverNode, position: donor.position };
                 }
-                // Truly new node with no optimistic counterpart — use server position
+                // Truly new node with no optimistic counterpart — needs relayout
+                needsRelayout = true;
                 return serverNode;
             });
+            // Also check if non-creating nodes were removed (graph got smaller)
+            if (!needsRelayout) {
+                needsRelayout = currentNodes.some((cn) => !serverIds.has(cn.id) &&
+                    !(cn.type === 'featureNode' && cn.data.state === 'creating'));
+            }
+            if (needsRelayout) {
+                const layoutResult = layoutWithDagre(merged, initialEdges, CANVAS_LAYOUT_DEFAULTS);
+                setEdges(layoutResult.edges);
+                return layoutResult.nodes;
+            }
+            return merged;
         });
-    }, [initialNodeKey, initialNodes]);
+    }, [initialNodeKey, initialNodes, initialEdges, setEdges]);
     useEffect(() => {
         setEdges(initialEdges);
     }, [initialEdgeKey, initialEdges, setEdges]);
-    // Fallback notifications from server-refresh state transitions.
-    // Fires only when SSE didn't already deliver the matching event for a feature,
-    // e.g. when the SSE connection was down or the event was seeded into the cache.
+    // Fallback notifications from server-prop state transitions.
+    // Fires only when SSE didn't already deliver the matching event for a feature.
     const { events } = useAgentEventsContext();
     useEffect(() => {
         const prevStates = prevFeatureStatesRef.current;
@@ -118,14 +128,10 @@ isRefreshBlocked) {
             prevStates.set(node.id, data.state);
         }
     }, [initialDataKey, initialNodes, events, router]);
-    // Targeted optimistic updates from SSE agent events + debounced reconciliation.
+    // Targeted optimistic updates from SSE agent events.
     // Uses `events` array (not `lastEvent`) so that React batching cannot silently
     // drop events when multiple SSE messages arrive in the same tick.
     const processedEventCountRef = useRef(0);
-    const reconcileTimerRef = useRef(undefined);
-    useEffect(() => {
-        return () => clearTimeout(reconcileTimerRef.current);
-    }, []);
     useEffect(() => {
         if (events.length <= processedEventCountRef.current)
             return;
@@ -151,31 +157,7 @@ isRefreshBlocked) {
                 };
             }));
         }
-        // Debounced background reconciliation (3s after last SSE event)
-        clearTimeout(reconcileTimerRef.current);
-        reconcileTimerRef.current = setTimeout(() => {
-            if (!isRefreshBlocked?.())
-                router.refresh();
-        }, 3000);
-    }, [events, router, isRefreshBlocked]);
-    // Periodic polling fallback: refresh server data every 5s when any feature
-    // is in an active state (running/action-required). This ensures the UI stays
-    // current even if the SSE connection drops — belt-and-suspenders alongside SSE.
-    useEffect(() => {
-        const hasActiveFeature = nodes.some((n) => {
-            if (n.type !== 'featureNode')
-                return false;
-            const data = n.data;
-            return (data.state === 'running' || data.state === 'action-required' || data.state === 'creating');
-        });
-        if (!hasActiveFeature)
-            return;
-        const interval = setInterval(() => {
-            if (!isRefreshBlocked?.())
-                router.refresh();
-        }, 5_000);
-        return () => clearInterval(interval);
-    }, [nodes, router, isRefreshBlocked]);
+    }, [events]);
     const onNodesChange = useCallback((changes) => {
         setNodes((ns) => applyNodeChanges(changes, ns));
     }, []);
@@ -220,202 +202,155 @@ isRefreshBlocked) {
             branch: dataOverride?.branch ?? '',
         };
         setNodes((currentNodes) => {
-            // Read edges from ref to avoid closure dependency on `edges` state.
-            // edgesRef is kept in sync by the setEdges wrapper.
-            const siblingIds = sourceNodeId
-                ? new Set(edgesRef.current.filter((e) => e.source === sourceNodeId).map((e) => e.target))
-                : new Set();
-            const siblings = currentNodes.filter((n) => siblingIds.has(n.id));
-            let position;
-            if (siblings.length > 0) {
-                // Place below the bottom-most sibling, matching X
-                const sortedYs = siblings.map((n) => n.position.y).sort((a, b) => a - b);
-                const maxY = sortedYs[sortedYs.length - 1];
-                // Derive gap from existing spacing between siblings, or use default
-                const gap = sortedYs.length > 1 ? sortedYs[1] - sortedYs[0] : 160;
-                position = { x: siblings[0].position.x, y: maxY + gap };
-            }
-            else if (sourceNodeId) {
-                // First child — position to the right of parent
-                const parent = currentNodes.find((n) => n.id === sourceNodeId);
-                // Parent width (288) + 200px gap matching dagre ranksep
-                const xOffset = 488;
-                position = parent
-                    ? { x: parent.position.x + xOffset, y: parent.position.y }
-                    : { x: 400, y: 200 };
-            }
-            else {
-                // Standalone feature — place below all existing nodes
-                const maxY = currentNodes.length > 0 ? Math.max(...currentNodes.map((n) => n.position.y)) : 0;
-                position = { x: 400, y: currentNodes.length > 0 ? maxY + 160 : 200 };
-            }
-            // The new node's bottom edge (featureNode height = 140)
-            const newBottom = position.y + 140;
-            // Find the old group bottom before adding the new node
-            const groupNodeIds = new Set([sourceNodeId, ...siblingIds]);
-            const oldGroupBottom = currentNodes
-                .filter((n) => groupNodeIds.has(n.id))
-                .reduce((max, n) => {
-                const h = n.type === 'featureNode' ? 140 : 50;
-                return Math.max(max, n.position.y + h);
-            }, 0);
-            // Shift amount: how much the group grew past its old bottom
-            const shift = Math.max(0, newBottom - oldGroupBottom);
-            // Push down all nodes that are below the old group bottom
-            const shifted = shift > 0
-                ? currentNodes.map((n) => {
-                    if (groupNodeIds.has(n.id) || siblingIds.has(n.id))
-                        return n;
-                    if (n.position.y >= oldGroupBottom) {
-                        return { ...n, position: { ...n.position, y: n.position.y + shift } };
-                    }
-                    return n;
-                })
-                : currentNodes;
-            // Re-center the parent node vertically to its children
-            const recentered = sourceNodeId
-                ? shifted.map((n) => {
-                    if (n.id !== sourceNodeId)
-                        return n;
-                    const allChildYs = [...siblings.map((s) => s.position.y), position.y];
-                    const groupCenter = (Math.min(...allChildYs) + Math.max(...allChildYs) + 140) / 2;
-                    const parentHeight = n.type === 'featureNode' ? 140 : 50;
-                    return {
-                        ...n,
-                        position: { ...n.position, y: groupCenter - parentHeight / 2 },
-                    };
-                })
-                : shifted;
-            return [
-                ...recentered,
-                {
-                    id,
-                    type: 'featureNode',
-                    position,
-                    data: newFeatureData,
-                },
-            ];
-        });
-        if (sourceNodeId) {
-            setEdges((currentEdges) => [
-                ...currentEdges,
-                {
+            const newNode = {
+                id,
+                type: 'featureNode',
+                position: { x: 0, y: 0 },
+                data: newFeatureData,
+            };
+            const newEdge = sourceNodeId
+                ? {
                     id: edgeType === 'dependencyEdge'
                         ? `dep-${sourceNodeId}-${id}`
                         : `edge-${sourceNodeId}-${id}`,
                     source: sourceNodeId,
                     target: id,
                     ...(edgeType ? { type: edgeType } : { style: { strokeDasharray: '5 5' } }),
-                },
-            ]);
-        }
+                }
+                : null;
+            const allEdges = newEdge
+                ? [...edgesRef.current.filter((e) => e.id !== newEdge.id), newEdge]
+                : edgesRef.current;
+            // Insert the new node after the last sibling connected to the same source,
+            // so dagre's input-order preservation keeps repo groups together.
+            let insertIndex = currentNodes.length;
+            if (sourceNodeId) {
+                const siblingIds = new Set(allEdges.filter((e) => e.source === sourceNodeId).map((e) => e.target));
+                for (let i = currentNodes.length - 1; i >= 0; i--) {
+                    if (siblingIds.has(currentNodes[i].id)) {
+                        insertIndex = i + 1;
+                        break;
+                    }
+                }
+            }
+            const allNodes = [
+                ...currentNodes.slice(0, insertIndex),
+                newNode,
+                ...currentNodes.slice(insertIndex),
+            ];
+            // Run dagre layout on the full graph so the new node is positioned consistently
+            const layoutResult = layoutWithDagre(allNodes, allEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
         return id;
     }, [setEdges]);
-    const handleDeleteFeature = useCallback(async (featureId) => {
-        try {
-            const result = await deleteFeature(featureId);
+    const handleDeleteFeature = useCallback((featureId) => {
+        const nodeId = `feat-${featureId}`;
+        // Snapshot current state for rollback
+        const prevNodes = nodes;
+        const prevEdges = edgesRef.current;
+        // Optimistic removal — update UI immediately
+        setNodes((currentNodes) => {
+            const remainingNodes = currentNodes.filter((n) => n.id !== nodeId);
+            const remainingEdges = edgesRef.current.filter((e) => e.source !== nodeId && e.target !== nodeId);
+            const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
+        deleteSound.play();
+        toast.success('Feature deleted successfully');
+        router.push('/');
+        // Persist in background — rollback on failure
+        deleteFeature(featureId)
+            .then((result) => {
             if (result.error) {
+                setNodes(prevNodes);
+                setEdges(prevEdges);
                 toast.error(result.error);
-                return;
             }
-            setNodes((currentNodes) => {
-                const remainingNodes = currentNodes.filter((n) => n.id !== featureId);
-                const remainingEdges = edges.filter((e) => e.source !== featureId && e.target !== featureId);
-                const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, {
-                    direction: 'LR',
-                    ranksep: 200,
-                    nodesep: 60,
-                });
-                setEdges(layoutResult.edges);
-                return layoutResult.nodes;
-            });
-            deleteSound.play();
-            toast.success('Feature deleted successfully');
-            router.refresh();
-        }
-        catch {
+        })
+            .catch(() => {
+            setNodes(prevNodes);
+            setEdges(prevEdges);
             toast.error('Failed to delete feature');
-        }
-    }, [router, edges, deleteSound, setEdges]);
+        });
+    }, [nodes, router, deleteSound, setEdges]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
-        // Optimistic: remove node and its edges immediately
-        setNodes((prev) => prev.filter((n) => n.id !== repoNodeId));
-        setEdges((prev) => prev.filter((e) => e.source !== repoNodeId && e.target !== repoNodeId));
+        // Snapshot for rollback
+        const prevNodes = nodes;
+        const prevEdges = edgesRef.current;
+        // Optimistic: remove repo node, its child feature nodes, and all related edges
+        setNodes((currentNodes) => {
+            // Find feature node IDs connected to this repo via edges
+            const childFeatureIds = new Set(edgesRef.current.filter((e) => e.source === repoNodeId).map((e) => e.target));
+            const remainingNodes = currentNodes.filter((n) => n.id !== repoNodeId && !childFeatureIds.has(n.id));
+            const remainingEdges = edgesRef.current.filter((e) => e.source !== repoNodeId &&
+                e.target !== repoNodeId &&
+                !childFeatureIds.has(e.source) &&
+                !childFeatureIds.has(e.target));
+            const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
         try {
             const result = await deleteRepository(repositoryId);
             if (!result.success) {
                 toast.error(result.error ?? 'Failed to remove repository');
-                router.refresh();
+                setNodes(prevNodes);
+                setEdges(prevEdges);
                 return;
             }
             deleteSound.play();
             toast.success('Repository removed');
-            router.refresh();
         }
         catch {
             toast.error('Failed to remove repository');
-            router.refresh();
+            setNodes(prevNodes);
+            setEdges(prevEdges);
         }
-    }, [router, deleteSound, setEdges]);
+    }, [nodes, deleteSound, setEdges]);
     const handleLayout = useCallback((direction) => {
         setNodes((currentNodes) => {
-            const currentEdges = edges;
-            const result = layoutWithDagre(currentNodes, currentEdges, {
+            const result = layoutWithDagre(currentNodes, edgesRef.current, {
+                ...CANVAS_LAYOUT_DEFAULTS,
                 direction,
-                ranksep: 60,
-                nodesep: 20,
             });
             setEdges(result.edges);
             return result.nodes;
         });
-    }, [edges, setEdges]);
+    }, [setEdges]);
     const handleAddRepository = useCallback((path) => {
         const tempId = `repo-temp-${Date.now()}`;
         const repoName = path
             .replace(/[\\/]+$/, '')
             .split(/[\\/]/)
             .pop() ?? path;
-        // Optimistic UI: add node immediately
-        let savedAddRepoY = 0;
+        // Optimistic UI: add node and re-layout immediately
         setNodes((currentNodes) => {
-            const repoNodes = currentNodes.filter((n) => n.type === 'repositoryNode');
-            const addRepoNode = currentNodes.find((n) => n.type === 'addRepositoryNode');
-            // Save addRepoNode's original Y for rollback on error
-            if (addRepoNode)
-                savedAddRepoY = addRepoNode.position.y;
-            // Place in the repo column, at the addRepoNode's current position
-            const repoX = repoNodes[0]?.position.x ?? addRepoNode?.position.x ?? 50;
-            const repoHeight = 50; // repositoryNode height
-            const gap = 15; // match dagre nodesep
-            const position = {
-                x: repoX,
-                y: addRepoNode ? addRepoNode.position.y : 0,
-            };
             const newNode = {
                 id: tempId,
                 type: 'repositoryNode',
-                position,
+                position: { x: 0, y: 0 },
                 data: { name: repoName, repositoryPath: path, id: tempId },
             };
-            // Shift addRepo button down by exactly one slot
-            const addRepoY = addRepoNode
-                ? addRepoNode.position.y + repoHeight + gap
-                : position.y + repoHeight + gap;
-            return currentNodes
-                .map((n) => n.type === 'addRepositoryNode' ? { ...n, position: { ...n.position, y: addRepoY } } : n)
-                .concat(newNode);
+            const allNodes = [...currentNodes, newNode];
+            const layoutResult = layoutWithDagre(allNodes, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
         });
         // Persist via server action
         addRepository({ path, name: repoName })
             .then((result) => {
             if (result.error) {
-                // Rollback optimistic node and restore addRepoNode position
-                setNodes((prev) => prev
-                    .filter((n) => n.id !== tempId)
-                    .map((n) => n.type === 'addRepositoryNode'
-                    ? { ...n, position: { ...n.position, y: savedAddRepoY } }
-                    : n));
+                // Rollback optimistic node and re-layout
+                setNodes((prev) => {
+                    const remaining = prev.filter((n) => n.id !== tempId);
+                    const layoutResult = layoutWithDagre(remaining, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+                    setEdges(layoutResult.edges);
+                    return layoutResult.nodes;
+                });
                 toast.error(result.error);
                 return;
             }
@@ -436,18 +371,18 @@ isRefreshBlocked) {
                 id: e.id.replace(tempId, realId),
             })));
             createSound.play();
-            router.refresh();
         })
             .catch(() => {
-            // Rollback optimistic node and restore addRepoNode position
-            setNodes((prev) => prev
-                .filter((n) => n.id !== tempId)
-                .map((n) => n.type === 'addRepositoryNode'
-                ? { ...n, position: { ...n.position, y: savedAddRepoY } }
-                : n));
+            // Rollback optimistic node and re-layout
+            setNodes((prev) => {
+                const remaining = prev.filter((n) => n.id !== tempId);
+                const layoutResult = layoutWithDagre(remaining, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+                setEdges(layoutResult.edges);
+                return layoutResult.nodes;
+            });
             toast.error('Failed to add repository');
         });
-    }, [router, createSound, setEdges]);
+    }, [createSound, setEdges]);
     return {
         nodes,
         edges,

package/dist/src/presentation/web/components/ui/alert-dialog.d.ts

@@ -4,7 +4,7 @@ import { Button } from '../ui/button.js';
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, onClick, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: 'default' | 'sm';
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/presentation/web/components/ui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEhG;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,2CAeA;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEhG;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAiB3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,2CAeA;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

package/dist/src/presentation/web/components/ui/alert-dialog.js

@@ -12,8 +12,13 @@ function AlertDialogTrigger({ ...props }) {
 function AlertDialogPortal({ ...props }) {
     return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
-function AlertDialogOverlay({ className, ...props }) {
-    return (_jsx(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), ...props }));
+function AlertDialogOverlay({ className, onClick, ...props }) {
+    return (_jsx(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), onClick: (e) => {
+            // Prevent overlay clicks from propagating to document-level handlers
+            // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
+            e.stopPropagation();
+            onClick?.(e);
+        }, ...props }));
 }
 function AlertDialogContent({ className, size = 'default', ...props }) {
     return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "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', className), ...props })] }));

package/dist/src/presentation/web/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAElF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAkBjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAElF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/src/presentation/web/components/ui/dialog.js

@@ -8,7 +8,12 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(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), ...props })));
+const DialogOverlay = React.forwardRef(({ className, onClick, ...props }, ref) => (_jsx(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), onClick: (e) => {
+        // Prevent overlay clicks from propagating to document-level handlers
+        // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
+        e.stopPropagation();
+        onClick?.(e);
+    }, ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(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', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts

@@ -13,6 +13,8 @@ export interface LayoutOptions {
     /** Horizontal separation between nodes in the same rank (default 30) */
     nodesep?: number;
 }
+/** Canonical layout defaults for the control-center canvas. */
+export declare const CANVAS_LAYOUT_DEFAULTS: LayoutOptions;
 /**
  * Compute an automatic hierarchical layout for React Flow nodes and edges
  * using Dagre. Returns new node/edge arrays — never mutates the originals.

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAkF/B"}
+{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAmCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAoK/B"}

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -1,4 +1,10 @@
 import dagre from '@dagrejs/dagre';
+/** Canonical layout defaults for the control-center canvas. */
+export const CANVAS_LAYOUT_DEFAULTS = {
+    direction: 'LR',
+    ranksep: 200,
+    nodesep: 15,
+};
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
     featureNode: { width: 288, height: 140 },
@@ -62,16 +68,92 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
     }
     dagre.layout(g);
     const { targetPosition, sourcePosition } = getHandlePositions(direction);
-    const result = [];
-    // Map laid-out nodes, converting dagre center-coords to React Flow top-left
+    const isHorizontal = direction === 'LR' || direction === 'RL';
+    // Collect dagre center positions keyed by node id
+    const centerMap = new Map();
     for (const node of graphNodes) {
-        const pos = g.node(node.id);
+        const dagreNode = g.node(node.id);
         const size = getNodeSize(node, nodeSize);
+        centerMap.set(node.id, { cx: dagreNode.x, cy: dagreNode.y, w: size.width, h: size.height });
+    }
+    // Post-process: center each group of children around their parent's
+    // secondary-axis center so the edge fans out symmetrically.
+    // Build parent→children map from the edges.
+    const childrenOf = new Map();
+    for (const edge of edges) {
+        if (!centerMap.has(edge.source) || !centerMap.has(edge.target))
+            continue;
+        if (!childrenOf.has(edge.source))
+            childrenOf.set(edge.source, []);
+        childrenOf.get(edge.source).push(edge.target);
+    }
+    for (const [parentId, childIds] of childrenOf) {
+        if (childIds.length <= 1)
+            continue;
+        const parent = centerMap.get(parentId);
+        const parentCenter = isHorizontal ? parent.cy : parent.cx;
+        // Sort children by their current secondary-axis position
+        const sorted = childIds
+            .filter((id) => centerMap.has(id))
+            .sort((a, b) => {
+            const pa = centerMap.get(a);
+            const pb = centerMap.get(b);
+            return isHorizontal ? pa.cy - pb.cy : pa.cx - pb.cx;
+        });
+        // Compute the current center of the children group
+        const first = centerMap.get(sorted[0]);
+        const last = centerMap.get(sorted[sorted.length - 1]);
+        const groupCenter = isHorizontal ? (first.cy + last.cy) / 2 : (first.cx + last.cx) / 2;
+        // Shift all children so the group center aligns with the parent center
+        const shift = parentCenter - groupCenter;
+        if (Math.abs(shift) > 1) {
+            for (const childId of sorted) {
+                const c = centerMap.get(childId);
+                if (isHorizontal) {
+                    c.cy += shift;
+                }
+                else {
+                    c.cx += shift;
+                }
+            }
+        }
+    }
+    // Enforce input-order within each sibling group so that the caller's
+    // sort (e.g. by createdAt) is respected on the secondary axis.
+    const inputIndex = new Map();
+    for (let i = 0; i < graphNodes.length; i++) {
+        inputIndex.set(graphNodes[i].id, i);
+    }
+    for (const [, childIds] of childrenOf) {
+        const valid = childIds.filter((id) => centerMap.has(id));
+        if (valid.length <= 1)
+            continue;
+        // Collect current secondary-axis positions, sorted ascending
+        const positions = valid
+            .map((id) => (isHorizontal ? centerMap.get(id).cy : centerMap.get(id).cx))
+            .sort((a, b) => a - b);
+        // Sort children by input index (preserves caller's ordering, e.g. createdAt)
+        const byInput = [...valid].sort((a, b) => (inputIndex.get(a) ?? 0) - (inputIndex.get(b) ?? 0));
+        // Assign sorted positions in input order
+        for (let i = 0; i < byInput.length; i++) {
+            const c = centerMap.get(byInput[i]);
+            if (isHorizontal) {
+                c.cy = positions[i];
+            }
+            else {
+                c.cx = positions[i];
+            }
+        }
+    }
+    // Build result array converting center-coords to React Flow top-left
+    const result = [];
+    for (const node of graphNodes) {
+        const c = centerMap.get(node.id);
         result.push({
             ...node,
             targetPosition,
             sourcePosition,
-            position: { x: pos.x - size.width / 2, y: pos.y - size.height / 2 },
+            position: { x: c.cx - c.w / 2, y: c.cy - c.h / 2 },
         });
     }
     // Place disconnected nodes after the laid-out graph so they don't overlap