@shepai/cli 1.66.4 → 1.67.0

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

@@ -1,59 +1,34 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-import { approveFeature } from '../../../app/actions/approve-feature.js';
-import { rejectFeature } from '../../../app/actions/reject-feature.js';
-import { getFeatureArtifact } from '../../../app/actions/get-feature-artifact.js';
-import { getResearchArtifact } from '../../../app/actions/get-research-artifact.js';
-import { getWorkflowDefaults } from '../../../app/actions/get-workflow-defaults.js';
-import { getMergeReviewData } from '../../../app/actions/get-merge-review-data.js';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
-import { FeatureDrawer, FeatureCreateDrawer } from '../../common/index.js';
-import { RepositoryDrawer } from '../../common/repository-node/index.js';
-import { PrdQuestionnaireDrawer } from '../../common/prd-questionnaire/index.js';
-import { TechDecisionsDrawer } from '../../common/tech-decisions-review/index.js';
-import { MergeReviewDrawer } from '../../common/merge-review/index.js';
+import { ControlCenterDrawer, computeDrawerView } from '../../common/control-center-drawer/index.js';
 import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
-import { useSoundAction } from '../../../hooks/use-sound-action.js';
+import { getWorkflowDefaults } from '../../../app/actions/get-workflow-defaults.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 export function ControlCenterInner({ initialNodes, initialEdges }) {
     const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, handleDeleteRepository, closeCreateDrawer, selectFeatureById, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
-    // Extract feature list for the parent selector in the create drawer
+    // Feature list for the parent selector in the create drawer
     const featureOptions = useMemo(() => nodes
         .filter((n) => n.type === 'featureNode')
         .map((n) => {
         const data = n.data;
         return { id: data.featureId, name: data.name };
     })
-        .filter((f) => f.id && !f.id.startsWith('#')), // exclude optimistic temp nodes
-    [nodes]);
+        .filter((f) => f.id && !f.id.startsWith('#')), [nodes]);
     // Workflow defaults for the create-feature drawer
     const [workflowDefaults, setWorkflowDefaults] = useState();
     useEffect(() => {
         getWorkflowDefaults()
             .then(setWorkflowDefaults)
             .catch(() => {
-            // Settings unavailable — drawer falls back to all-false defaults
+            // Settings unavailable — create drawer falls back to all-false defaults
         });
     }, []);
-    // PRD questionnaire drawer state
-    const [prdSelections, setPrdSelections] = useState({});
-    const [questionnaireData, setQuestionnaireData] = useState(null);
-    const [isLoadingQuestionnaire, setIsLoadingQuestionnaire] = useState(false);
-    // Reject state (shared by both drawers)
-    const [isRejecting, setIsRejecting] = useState(false);
-    const rejectSound = useSoundAction('reject');
-    // Tech decisions drawer state
-    const [techDecisionsData, setTechDecisionsData] = useState(null);
-    const [isLoadingTechDecisions, setIsLoadingTechDecisions] = useState(false);
-    // Merge review drawer state
-    const [mergeReviewData, setMergeReviewData] = useState(null);
-    const [isLoadingMergeReview, setIsLoadingMergeReview] = useState(false);
-    // Repository drawer state
+    // Repository drawer state (independent of feature selection)
     const [selectedRepoNode, setSelectedRepoNode] = useState(null);
-    // Clear all drawers — used for pane click and canvas drag
+    // Close all drawers — used on pane click and canvas drag
     const handleClearDrawers = useCallback(() => {
         clearSelection();
         setSelectedRepoNode(null);
@@ -67,187 +42,16 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             setSelectedRepoNode(node.data);
         }
     }, [nodes, clearSelection]);
-    const showPrdDrawer = selectedNode?.lifecycle === 'requirements' && selectedNode?.state === 'action-required';
-    const showTechDecisionsDrawer = selectedNode?.lifecycle === 'implementation' && selectedNode?.state === 'action-required';
-    const showMergeReviewDrawer = selectedNode?.lifecycle === 'review' &&
-        (selectedNode?.state === 'action-required' || selectedNode?.state === 'error');
-    const handlePrdSelect = useCallback((questionId, optionId) => {
-        setPrdSelections((prev) => ({ ...prev, [questionId]: optionId }));
-    }, []);
-    const handlePrdApprove = useCallback(async (_actionId) => {
-        const featureId = selectedNode?.featureId;
-        if (!featureId)
-            return;
-        let payload;
-        if (questionnaireData) {
-            const changedSelections = [];
-            for (const [questionId, optionId] of Object.entries(prdSelections)) {
-                const question = questionnaireData.questions.find((q) => q.id === questionId);
-                const option = question?.options.find((o) => o.id === optionId);
-                if (question && option) {
-                    changedSelections.push({
-                        questionId: question.question,
-                        selectedOption: option.label,
-                    });
-                }
-            }
-            payload = { approved: true, changedSelections };
-        }
-        const result = await approveFeature(featureId, payload);
-        if (!result.approved) {
-            toast.error(result.error ?? 'Failed to approve requirements');
-            return;
-        }
-        toast.success('Requirements approved — agent resuming');
-        clearSelection();
-        setPrdSelections({});
-    }, [selectedNode?.featureId, clearSelection, questionnaireData, prdSelections]);
-    // Shared reject handler — all drawers use the same rejectFeature flow
-    const handleReject = useCallback(async (feedback, label, onDone) => {
-        const featureId = selectedNode?.featureId;
-        if (!featureId)
-            return;
-        setIsRejecting(true);
-        try {
-            const result = await rejectFeature(featureId, feedback);
-            if (!result.rejected) {
-                toast.error(result.error ?? `Failed to reject ${label.toLowerCase()}`);
-                return;
-            }
-            rejectSound.play();
-            toast.success(`${label} rejected — agent re-iterating (iteration ${result.iteration})`);
-            if (result.iterationWarning) {
-                toast.warning(`Iteration ${result.iteration} — consider approving or adjusting feedback to avoid excessive iterations`);
-            }
-            clearSelection();
-            onDone?.();
-        }
-        finally {
-            setIsRejecting(false);
-        }
-    }, [selectedNode?.featureId, clearSelection, rejectSound]);
-    const handlePrdReject = useCallback((feedback) => handleReject(feedback, 'Requirements', () => setPrdSelections({})), [handleReject]);
-    const handleTechDecisionsReject = useCallback((feedback) => handleReject(feedback, 'Plan'), [handleReject]);
-    const handleMergeReject = useCallback((feedback) => handleReject(feedback, 'Merge'), [handleReject]);
-    // Shared approve handler — tech decisions and merge use identical approve flows
-    const handleSimpleApprove = useCallback(async (label) => {
-        const featureId = selectedNode?.featureId;
-        if (!featureId)
-            return;
-        const result = await approveFeature(featureId);
-        if (!result.approved) {
-            toast.error(result.error ?? `Failed to approve ${label.toLowerCase()}`);
-            return;
-        }
-        toast.success(`${label} approved — agent resuming`);
-        clearSelection();
-    }, [selectedNode?.featureId, clearSelection]);
-    const handleTechDecisionsApprove = useCallback(() => handleSimpleApprove('Plan'), [handleSimpleApprove]);
-    const handleMergeApprove = useCallback(() => handleSimpleApprove('Merge'), [handleSimpleApprove]);
-    // Fetch questionnaire data and reset selections when a different feature is selected
-    const prdFeatureId = showPrdDrawer ? selectedNode?.featureId : null;
-    useEffect(() => {
-        setPrdSelections({});
-        setQuestionnaireData(null);
-        if (!prdFeatureId)
-            return;
-        let cancelled = false;
-        setIsLoadingQuestionnaire(true);
-        getFeatureArtifact(prdFeatureId)
-            .then((result) => {
-            if (cancelled)
-                return;
-            if (result.error) {
-                toast.error(result.error);
-                return;
-            }
-            if (result.questionnaire) {
-                setQuestionnaireData(result.questionnaire);
-                // Pre-select AI-recommended answers
-                const defaults = {};
-                for (const q of result.questionnaire.questions) {
-                    const recommended = q.options.find((o) => o.recommended);
-                    if (recommended)
-                        defaults[q.id] = recommended.id;
-                }
-                setPrdSelections(defaults);
-            }
-        })
-            .catch(() => {
-            if (!cancelled)
-                toast.error('Failed to load questionnaire');
-        })
-            .finally(() => {
-            if (!cancelled)
-                setIsLoadingQuestionnaire(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [prdFeatureId]);
-    // Fetch tech decisions data when a feature is in research + action-required
-    const techDecisionsFeatureId = showTechDecisionsDrawer ? selectedNode?.featureId : null;
-    useEffect(() => {
-        setTechDecisionsData(null);
-        if (!techDecisionsFeatureId)
-            return;
-        let cancelled = false;
-        setIsLoadingTechDecisions(true);
-        getResearchArtifact(techDecisionsFeatureId)
-            .then((result) => {
-            if (cancelled)
-                return;
-            if (result.error) {
-                toast.error(result.error);
-                return;
-            }
-            if (result.techDecisions) {
-                setTechDecisionsData(result.techDecisions);
-            }
-        })
-            .catch(() => {
-            if (!cancelled)
-                toast.error('Failed to load tech decisions');
-        })
-            .finally(() => {
-            if (!cancelled)
-                setIsLoadingTechDecisions(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [techDecisionsFeatureId]);
-    // Fetch merge review data when a feature is in review + action-required
-    const mergeFeatureId = showMergeReviewDrawer ? selectedNode?.featureId : null;
-    useEffect(() => {
-        setMergeReviewData(null);
-        if (!mergeFeatureId)
-            return;
-        let cancelled = false;
-        setIsLoadingMergeReview(true);
-        getMergeReviewData(mergeFeatureId)
-            .then((result) => {
-            if (cancelled)
-                return;
-            if ('error' in result) {
-                toast.error(result.error);
-                return;
-            }
-            setMergeReviewData(result);
-        })
-            .catch(() => {
-            if (!cancelled)
-                toast.error('Failed to load merge review data');
-        })
-            .finally(() => {
-            if (!cancelled)
-                setIsLoadingMergeReview(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [mergeFeatureId]);
-    const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
+    // Derive the single active drawer view from all current state
+    const drawerView = computeDrawerView({
+        selectedNode,
+        isCreateDrawerOpen,
+        pendingRepositoryPath,
+        pendingParentFeatureId,
+        selectedRepoNode,
+        features: featureOptions,
+        workflowDefaults,
+    });
     // Listen for global "open create drawer" events from the sidebar
     useEffect(() => {
         const handler = () => handleAddFeature();
@@ -272,8 +76,9 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:select-feature', handler);
         return () => window.removeEventListener('shep:select-feature', handler);
     }, [selectFeatureById]);
+    const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
     if (!hasRepositories) {
-        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, onCanvasDrag: handleClearDrawers, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer || showMergeReviewDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), showPrdDrawer ? (_jsx(PrdQuestionnaireDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureDescription: selectedNode?.description, featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onApprove: handlePrdApprove, onReject: handlePrdReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingQuestionnaire })) : null, showTechDecisionsDrawer ? (_jsx(TechDecisionsDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onApprove: handleTechDecisionsApprove, onReject: handleTechDecisionsReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, showMergeReviewDrawer ? (_jsx(MergeReviewDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: mergeReviewData, onApprove: handleMergeApprove, onReject: handleMergeReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingMergeReview })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId }), _jsx(RepositoryDrawer, { data: selectedRepoNode, onClose: () => setSelectedRepoNode(null) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
 }

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,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,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,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,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,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;IACZ,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA2sBpB"}
+{"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,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,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,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,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,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;IACZ,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA4sBpB"}

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

@@ -457,11 +457,12 @@ export function useControlCenterState(initialNodes, initialEdges) {
         // Find the repo node that owns this feature
         const repoEdge = edges.find((e) => e.target === featureNodeId);
         const repoNodeId = repoEdge?.source ?? null;
+        clickSound.play();
         setSelectedNode(null);
         setPendingRepoNodeId(repoNodeId);
         setPendingParentFeatureId(featureId);
         setIsCreateDrawerOpen(true);
-    }, [edges]);
+    }, [edges, clickSound]);
     const handleLayout = useCallback((direction) => {
         setNodes((currentNodes) => {
             const currentEdges = edges;

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAsHrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA0HrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -65,5 +65,5 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", "data-no-drawer-close": true, className: "pointer-events-auto h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
 }