@shepai/cli 1.72.6 → 1.72.7-pr187.86f6440

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.js

@@ -114,7 +114,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         setAttachments((prev) => prev.filter((f) => f.path !== path));
     }, []);
     const hasFeatures = features && features.length > 0;
-    return (_jsx(BaseDrawer, { open: open, onClose: attemptClose, size: "md", modal: false, "data-testid": "feature-create-drawer", header: _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), footer: _jsxs("div", { className: "flex flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: attemptClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] }), children: _jsx("div", { className: "overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }) }));
+    return (_jsx(BaseDrawer, { open: open, onClose: attemptClose, size: "md", modal: false, dismissOnOutsideClick: true, "data-testid": "feature-create-drawer", header: _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), isSubmitting ? (_jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })) : null] }), footer: _jsxs("div", { className: "flex flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: attemptClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] }), children: _jsx("div", { className: "overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }) }));
 }
 function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
     const [open, setOpen] = useState(false);

package/dist/src/presentation/web/components/common/feature-node/feature-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwDnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CA4NA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwDnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAkOA"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.js

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { Settings, Plus, FileText, Wrench, GitMerge, Trash2 } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../ui/alert-dialog.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, } from './feature-node-state-config.js';
 import { getAgentTypeIcon } from './agent-type-icons.js';
@@ -68,7 +69,11 @@ export function FeatureNode({ data, selected, }) {
     return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, data.onDelete && data.featureId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Delete feature", "data-testid": "feature-node-delete-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setConfirmOpen(true);
-                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Delete feature" })] }) }) }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: data.name }), " and all associated data including specs, branches, and progress."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => data.onDelete?.(data.featureId), children: "Delete" })] })] }) })] })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
+                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Delete feature" })] }) }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-xs", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Delete feature?" }), _jsxs(DialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: data.name }), " and all associated data including specs, branches, and progress."] })] }), _jsxs(DialogFooter, { className: "grid grid-cols-2 gap-2 sm:flex-none", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { variant: "destructive", onClick: (e) => {
+                                                e.stopPropagation();
+                                                setConfirmOpen(false);
+                                                data.onDelete?.(data.featureId);
+                                            }, children: "Delete" })] })] }) })] })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
                                     e.stopPropagation();
                                     data.onSettings?.();
                                 }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'creating' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "motion-safe:animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("div", { "data-testid": "feature-node-badge", className: (() => {

package/dist/src/presentation/web/components/common/repository-node/repository-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,2CAqO5F"}
+{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,2CA6O5F"}

package/dist/src/presentation/web/components/common/repository-node/repository-node.js

@@ -5,7 +5,8 @@ import { Handle, Position } from '@xyflow/react';
 import { Github, Plus, Code2, Terminal, FolderOpen, Trash2, Play, Square } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { ActionButton } from '../../common/action-button/index.js';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../ui/alert-dialog.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { DeploymentStatusBadge } from '../../common/deployment-status-badge/index.js';
 import { useDeployAction } from '../../../hooks/use-deploy-action.js';
@@ -25,7 +26,10 @@ export function RepositoryNode({ data }) {
     return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, data.onDelete && data.id ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Remove repository", "data-testid": "repository-node-delete-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setConfirmOpen(true);
-                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove repository" })] }) }) }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Remove repository?" }), _jsxs(AlertDialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " from your workspace. The repository files on disk won't be affected."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => data.onDelete?.(data.id), children: "Remove" })] })] }) })] })) : null, _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "repository-node-card", "data-repo-name": data.name, onClick: (e) => {
+                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove repository" })] }) }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-xs", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Remove repository?" }), _jsxs(DialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " and all its features from your workspace. The repository files on disk won't be affected."] })] }), _jsxs(DialogFooter, { className: "grid grid-cols-2 gap-2 sm:flex-none", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { variant: "destructive", onClick: () => {
+                                                setConfirmOpen(false);
+                                                data.onDelete?.(data.id);
+                                            }, children: "Remove" })] })] }) })] })) : null, _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "repository-node-card", "data-repo-name": data.name, onClick: (e) => {
                     e.stopPropagation();
                     data.onClick?.();
                 }, onKeyDown: (e) => {

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAc5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAsMzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAc5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA4NzF"}

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

@@ -15,8 +15,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const pathname = usePathname();
     const selectedFeatureId = useSelectedFeatureId();
     const clickSound = useSoundAction('click');
-    const { guardedNavigate, getIsDirty } = useDrawerCloseGuard();
-    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, } = useControlCenterState(initialNodes, initialEdges, getIsDirty);
+    const { guardedNavigate } = useDrawerCloseGuard();
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
     const sidebarKey = useMemo(() => {
@@ -116,6 +116,18 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     useEffect(() => {
         const handler = (e) => {
             const detail = e.detail;
+            // When a parentId is provided, connect to the parent feature node
+            // via a dependency edge instead of the repo node.
+            if (detail.parentId) {
+                const parentNodeId = `feat-${detail.parentId}`;
+                createFeatureNode(parentNodeId, {
+                    state: 'creating',
+                    name: detail.name,
+                    description: detail.description,
+                    repositoryPath: detail.repositoryPath,
+                }, 'dependencyEdge');
+                return;
+            }
             // Find the repo node to connect to
             const repoNode = nodes.find((n) => n.type === 'repositoryNode' &&
                 n.data.repositoryPath === detail.repositoryPath);

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

@@ -9,11 +9,9 @@ export interface ControlCenterState {
     handleConnect: (connection: Connection) => void;
     handleAddRepository: (path: string) => void;
     handleLayout: (direction: LayoutDirection) => void;
-    handleDeleteFeature: (featureId: string) => Promise<void>;
+    handleDeleteFeature: (featureId: string) => void;
     handleDeleteRepository: (repositoryId: string) => Promise<void>;
-    createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>) => string;
+    createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>, edgeType?: string) => string;
 }
-export declare function useControlCenterState(initialNodes: CanvasNodeType[], initialEdges: Edge[], 
-/** When true, background router.refresh() calls (polling / SSE debounce) are suppressed. */
-isRefreshBlocked?: () => boolean): ControlCenterState;
+export declare function useControlCenterState(initialNodes: CanvasNodeType[], initialEdges: Edge[]): ControlCenterState;
 //# sourceMappingURL=use-control-center-state.d.ts.map

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAWhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE;AACpB,4FAA4F;AAC5F,gBAAgB,CAAC,EAAE,MAAM,OAAO,GAC/B,kBAAkB,CAgiBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA+epB"}

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/features/index.d.ts

@@ -1,5 +1,5 @@
 export { FeaturesCanvas, type FeaturesCanvasProps } from './features-canvas/index.js';
 export { ToolsPageClient, type ToolsPageClientProps } from './tools/index.js';
 export { ToolCard, type ToolCardProps } from './tools/index.js';
-export { InstallInstructions, type InstallInstructionsProps } from './tools/index.js';
+export { ToolDetailDrawer, type ToolDetailDrawerProps } from './tools/index.js';
 //# sourceMappingURL=index.d.ts.map