fix: enhance error handling in feature creation process

- Added error handling for feature creation in BoardView component to log errors and display user-friendly messages.
- Updated persistFeatureCreate function to throw errors on failure, allowing for better state management.
- Introduced removal of features from state if server creation fails, improving user experience during conflicts.

Also added @playwright/test to devDependencies in package-lock.json for improved testing capabilities.

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -225,7 +225,13 @@ export function useBoardActions({
       };
       const createdFeature = addFeature(newFeatureData);
       // Must await to ensure feature exists on server before user can drag it
-      await persistFeatureCreate(createdFeature);
+      try {
+        await persistFeatureCreate(createdFeature);
+      } catch (error) {
+        // Remove the feature from state if server creation failed (e.g., duplicate title)
+        removeFeature(createdFeature.id);
+        throw error;
+      }
       saveCategory(featureData.category);
 
       // Handle child dependencies - update other features to depend on this new feature
@@ -276,6 +282,7 @@ export function useBoardActions({
     },
     [
       addFeature,
+      removeFeature,
       persistFeatureCreate,
       persistFeatureUpdate,
       updateFeature,

apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts

@@ -75,27 +75,25 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
   );
 
   // Persist feature creation to API
+  // Throws on failure so callers can handle it (e.g., remove the feature from state)
   const persistFeatureCreate = useCallback(
     async (feature: Feature) => {
       if (!currentProject) return;
 
-      try {
-        const api = getElectronAPI();
-        if (!api.features) {
-          logger.error('Features API not available');
-          return;
-        }
+      const api = getElectronAPI();
+      if (!api.features) {
+        throw new Error('Features API not available');
+      }
 
-        const result = await api.features.create(currentProject.path, feature as ApiFeature);
-        if (result.success && result.feature) {
-          updateFeature(result.feature.id, result.feature as Partial<Feature>);
-          // Invalidate React Query cache to sync UI
-          queryClient.invalidateQueries({
-            queryKey: queryKeys.features.all(currentProject.path),
-          });
-        }
-      } catch (error) {
-        logger.error('Failed to persist feature creation:', error);
+      const result = await api.features.create(currentProject.path, feature as ApiFeature);
+      if (result.success && result.feature) {
+        updateFeature(result.feature.id, result.feature as Partial<Feature>);
+        // Invalidate React Query cache to sync UI
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+      } else if (!result.success) {
+        throw new Error(result.error || 'Failed to create feature on server');
       }
     },
     [currentProject, updateFeature, queryClient]