create-auto-app 0.11.9 → 0.11.11

package/templates/kanban-todo/.context/schema.json

@@ -1,6 +1,6 @@
 {
   "variant": "specs",
-  "flows": [
+  "narratives": [
     {
       "name": "Todo Dashboard",
       "id": "AUTO-H6i9Rs2Gz",
@@ -47,46 +47,6 @@
             }
           }
         },
-        {
-          "name": "Completion Progress Ring",
-          "id": "AUTO-P9l2Vv5Jz",
-          "type": "experience",
-          "client": {
-            "specs": {
-              "name": "",
-              "rules": [
-                "display circular progress ring with gradient stroke",
-                "show completion percentage prominently in center",
-                "animate progress changes with smooth easing",
-                "display total task count below percentage",
-                "use vibrant colors for high completion rates",
-                "show subtle pulse animation on milestone achievements",
-                "position prominently at top of dashboard or sidebar"
-              ]
-            }
-          }
-        },
-        {
-          "name": "Quick Add Todo Widget",
-          "id": "AUTO-Q0m3Ww6Kz",
-          "type": "experience",
-          "client": {
-            "specs": {
-              "name": "",
-              "rules": [
-                "display floating action button with plus icon",
-                "position fixed in bottom-right corner for easy access",
-                "expand into input form with smooth scale animation on click",
-                "include elegant input field with placeholder text",
-                "show submit button with icon when text is entered",
-                "support keyboard shortcut (Ctrl/Cmd + K) to focus input",
-                "auto-focus input when opened",
-                "clear and collapse after successful task addition",
-                "show loading state during task submission"
-              ]
-            }
-          }
-        },
         {
           "name": "Statistics Dashboard",
           "id": "AUTO-S1n4Xx7Lz",
@@ -174,7 +134,7 @@
               "name": "",
               "rules": [
                 "trigger confetti animation when task is completed",
-                "show satisfying checkmark animation",
+                "show satisfying check mark animation",
                 "play subtle success sound effect (optional, user configurable)",
                 "display special animation for completing all tasks",
                 "show streak celebration for consecutive daily completions",
@@ -220,9 +180,49 @@
               ]
             }
           }
+        },
+        {
+          "name": "Completion Progress Ring",
+          "id": "AUTO-P9l2Vv5Jz",
+          "type": "experience",
+          "client": {
+            "specs": {
+              "name": "",
+              "rules": [
+                "display circular progress ring with gradient stroke",
+                "show completion percentage prominently in center",
+                "animate progress changes with smooth easing",
+                "display total task count below percentage",
+                "use vibrant colors for high completion rates",
+                "show subtle pulse animation on milestone achievements",
+                "position prominently at top of dashboard or sidebar"
+              ]
+            }
+          }
+        },
+        {
+          "name": "Quick Add Todo Widget",
+          "id": "AUTO-Q0m3Ww6Kz",
+          "type": "experience",
+          "client": {
+            "specs": {
+              "name": "",
+              "rules": [
+                "display floating action button with plus icon",
+                "position fixed in bottom-right corner for easy access",
+                "expand into input form with smooth scale animation on click",
+                "include elegant input field with placeholder text",
+                "show submit button with icon when text is entered",
+                "support keyboard shortcut (Ctrl/Cmd + K) to focus input",
+                "auto-focus input when opened",
+                "clear and collapse after successful task addition",
+                "show loading state during task submission"
+              ]
+            }
+          }
         }
       ],
-      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-3/examples/kanban-todo/flows/homepage.flow.ts"
+      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-2/examples/kanban-todo/narratives/homepage.narrative.ts"
     },
     {
       "name": "App Structure",
@@ -481,7 +481,7 @@
           }
         }
       ],
-      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-3/examples/kanban-todo/flows/structure.flow.ts"
+      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-2/examples/kanban-todo/narratives/structure.narrative.ts"
     },
     {
       "name": "Todo List",
@@ -829,16 +829,6 @@
                             "addedAt": "2030-01-01T09:00:00.000Z",
                             "completedAt": null
                           }
-                        },
-                        {
-                          "stateRef": "TodoState",
-                          "exampleData": {
-                            "todoId": "todo-002",
-                            "description": "Write report",
-                            "status": "completed",
-                            "addedAt": "2030-01-01T09:10:00.000Z",
-                            "completedAt": "2030-01-01T11:00:00.000Z"
-                          }
                         }
                       ]
                     }
@@ -959,7 +949,7 @@
           }
         }
       ],
-      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-3/examples/kanban-todo/flows/todo-list.flow.ts"
+      "sourceFile": "/Users/sam/WebstormProjects/top/auto-engineer-2/examples/kanban-todo/narratives/todo-list.narrative.ts"
     }
   ],
   "messages": [

package/templates/kanban-todo/.gitignore

@@ -1,4 +1,4 @@
 .context
-server
-client
+server*
+client*
 /.context/

package/templates/kanban-todo/auto.config.ts

@@ -1,5 +1,5 @@
 import { autoConfig, on, dispatch } from '@auto-engineer/cli';
-import type { ExportSchemaEvents } from '@auto-engineer/flow';
+import type { ExportSchemaEvents } from '@auto-engineer/narrative';
 import type {
   GenerateServerCommand,
   GenerateServerEvents,
@@ -18,9 +18,27 @@ import type { GenerateIACommand, GenerateIAEvents } from '@auto-engineer/informa
 import type { ImplementClientCommand } from '@auto-engineer/frontend-implementer';
 import type { GenerateClientCommand, GenerateClientEvents } from '@auto-engineer/frontend-generator-react-graphql';
 import type { CheckClientEvents } from '@auto-engineer/frontend-checks';
+import type {
+  ImplementComponentCommand,
+  ComponentImplementedEvent,
+  ComponentImplementationFailedEvent,
+} from '@auto-engineer/component-implementer';
+import * as path from 'path';
+import createDebug from 'debug';
+
+const debug = createDebug('auto:config:component');
 
 const sliceRetryState = new Map<string, number>();
-const MAX_RETRIES = 3;
+const MAX_RETRIES = 4;
+
+type ComponentType = 'molecule' | 'organism' | 'page';
+const componentPhaseOrder: ComponentType[] = ['molecule', 'organism', 'page'];
+
+let clientComponents: Array<{ type: string; filePath: string }> = [];
+let clientTargetDir = '';
+const processedComponents = new Set<string>();
+const dispatchedPhases = new Set<string>();
+const failedComponents = new Set<string>();
 
 interface CheckFailures {
   testsCheckFailed?: TestsCheckFailedEvent;
@@ -43,9 +61,10 @@ export default autoConfig({
     '@auto-engineer/server-checks',
     '@auto-engineer/design-system-importer',
     '@auto-engineer/server-generator-apollo-emmett',
-    '@auto-engineer/flow',
+    '@auto-engineer/narrative',
     '@auto-engineer/frontend-checks',
     '@auto-engineer/frontend-implementer',
+    '@auto-engineer/component-implementer',
     '@auto-engineer/information-architect',
     '@auto-engineer/frontend-generator-react-graphql',
     '@auto-engineer/server-implementer',
@@ -55,6 +74,53 @@ export default autoConfig({
     // 'test:types': checkTypesCommandHandler,
   },
   pipeline: () => {
+    function getComponentsOfType(type: string) {
+      return clientComponents.filter((c) => c.type === type);
+    }
+
+    function areAllProcessed(type: string): boolean {
+      const components = getComponentsOfType(type);
+      if (components.length === 0) return false;
+
+      const allDone = components.every((c) => processedComponents.has(c.filePath) || failedComponents.has(c.filePath));
+
+      if (!allDone) return false;
+
+      const anyFailed = components.some((c) => failedComponents.has(c.filePath));
+
+      return !anyFailed;
+    }
+
+    function dispatchComponentsOfType(type: ComponentType) {
+      const components = getComponentsOfType(type);
+      const commands = components.map((component) => {
+        const componentName = path.basename(component.filePath).replace('.tsx', '');
+        return dispatch<ImplementComponentCommand>('ImplementComponent', {
+          projectDir: clientTargetDir,
+          iaSchemeDir: './.context',
+          designSystemPath: './.context/design-system.md',
+          componentType: type,
+          filePath: component.filePath,
+          componentName,
+        });
+      });
+      return dispatch.parallel(commands);
+    }
+
+    function tryAdvanceToNextPhase() {
+      for (let i = 0; i < componentPhaseOrder.length - 1; i++) {
+        const currentPhase = componentPhaseOrder[i];
+        const nextPhase = componentPhaseOrder[i + 1];
+        const allProcessed = areAllProcessed(currentPhase);
+        const alreadyDispatched = dispatchedPhases.has(nextPhase);
+        if (allProcessed && !alreadyDispatched) {
+          dispatchedPhases.add(nextPhase);
+          return dispatchComponentsOfType(nextPhase);
+        }
+      }
+      return [];
+    }
+
     on<ExportSchemaEvents>('SchemaExported', () =>
       dispatch<GenerateServerCommand>('GenerateServer', {
         modelPath: './.context/schema.json',
@@ -144,13 +210,75 @@ export default autoConfig({
       }),
     );
 
-    on<GenerateClientEvents>('ClientGenerated', () =>
-      dispatch<ImplementClientCommand>('ImplementClient', {
-        projectDir: './client',
-        iaSchemeDir: './.context',
-        designSystemPath: './.context/design-system.md',
-      }),
-    );
+    on<GenerateClientEvents>('ClientGenerated', (e) => {
+      if (e.type !== 'ClientGenerated') return;
+
+      if (e.data === null || e.data === undefined || !Array.isArray(e.data.components)) {
+        return [
+          dispatch<ImplementComponentCommand>('ImplementComponent', {
+            projectDir: './client',
+            iaSchemeDir: './.context',
+            designSystemPath: './.context/design-system.md',
+            componentType: 'molecule',
+            filePath: 'client/src/components/molecules/Example.tsx',
+            componentName: 'Example.tsx',
+          }),
+        ];
+      }
+
+      debug('ClientGenerated event received');
+      debug('Total components: %d', e.data.components.length);
+      debug(
+        'Component types: %o',
+        e.data.components.map((c) => c.type),
+      );
+
+      clientComponents = e.data.components;
+      clientTargetDir = e.data.targetDir;
+      processedComponents.clear();
+      dispatchedPhases.clear();
+      failedComponents.clear();
+
+      const molecules = clientComponents.filter((c) => c.type === 'molecule');
+      debug('Found %d molecules', molecules.length);
+      debug(
+        'Molecule paths: %o',
+        molecules.map((m) => m.filePath),
+      );
+
+      dispatchedPhases.add('molecule');
+
+      const commands = molecules.map((component) => {
+        const componentName = path.basename(component.filePath).replace('.tsx', '');
+        return dispatch<ImplementComponentCommand>('ImplementComponent', {
+          projectDir: clientTargetDir,
+          iaSchemeDir: './.context',
+          designSystemPath: './.context/design-system.md',
+          componentType: 'molecule',
+          filePath: component.filePath,
+          componentName,
+        });
+      });
+
+      return dispatch.parallel(commands);
+    });
+
+    const handleComponentProcessed = (e: ComponentImplementedEvent | ComponentImplementationFailedEvent) => {
+      if (e.data === null || e.data === undefined || e.data.filePath === null || e.data.filePath === undefined) {
+        return [];
+      }
+
+      if (e.type === 'ComponentImplemented') {
+        processedComponents.add(e.data.filePath);
+      } else {
+        failedComponents.add(e.data.filePath);
+      }
+
+      return tryAdvanceToNextPhase();
+    };
+
+    on<ComponentImplementedEvent>('ComponentImplemented', handleComponentProcessed);
+    on<ComponentImplementationFailedEvent>('ComponentImplementationFailed', handleComponentProcessed);
 
     // on<ImplementClientEvents>('ClientImplemented', () =>
     //   dispatch<CheckClientCommand>('CheckClient', {
@@ -235,7 +363,7 @@ function collectErrorMessages(failures: CheckFailures): string {
 
 rm -rf server client .context/schema.json .context/schema.graphql .context/auto-ia-scheme.json 
 pnpm auto export:schema
-pnpm auto generate:ia --output-dir=./.context --flow-files=./flows/questionnaires.flow.ts
+pnpm auto generate:ia --output-dir=./.context --flow-files=./narratives/questionnaires.narrative.ts
 pnpm auto generate:server --schema-path=./.context/schema.json --destination=.
 pnpm auto generate:client --starter-dir=../../packages/frontend-generator-react-graphql/shadcn-starter --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
 pnpm auto implement:client --project-dir=./questionnaires/client --ia-scheme-dir=./questionnaires/.context --design-system-path=./questionnaires/.context/design-system.md
@@ -248,7 +376,7 @@ pnpm auto generate:server --schema-path=./.context/schema.json --destination=.
 pnpm auto generate:client --starter-dir=/Users/sam/WebstormProjects/top/auto-engineer/packages/frontend-generator-react-graphql/shadcn-starter  --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
 
 // run this per slice in parallel
-pnpm auto implement:slice --slice-path=./questionnaires/server/src/domain/flows/questionnaires/submits-the-questionnaire
+pnpm auto implement:slice --slice-path=./questionnaires/server/src/domain/narratives/questionnaires/submits-the-questionnaire
 // add checks
 // add retry logic tore-implement failed slices with a retry count
 
@@ -271,7 +399,7 @@ pnpm -w build &&\
 rm -rf server client .context/schema.json .context/schema.graphql .context/auto-ia-scheme.json &&\
 DEBUG=* pnpm auto export:schema &&\
 DEBUG=* pnpm auto generate:server --schema-path=./.context/schema.json --destination=. &&\
-DEBUG=* pnpm auto generate:ia --output-dir=./.context --flow-files=./flows/questionnaires.flow.ts &&\
+DEBUG=* pnpm auto generate:ia --output-dir=./.context --flow-files=./narratives/questionnaires.narrative.ts &&\
 DEBUG=* pnpm auto generate:client --starter-dir=../../packages/frontend-generator-react-graphql/shadcn-starter --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
 
 

package/templates/kanban-todo/client2/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/templates/kanban-todo/{flows/homepage.flow.ts → narratives/homepage.narrative.ts}

@@ -1,6 +1,5 @@
-import { experience, flow, should, specs } from '@auto-engineer/flow';
-
-flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
+import { experience, narrative, should, specs } from '@auto-engineer/narrative';
+narrative('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
   experience('Kanban Board View', 'AUTO-K7j0St3Hz').client(() => {
     specs(() => {
       should('display three distinct columns: To Do, In Progress, and Done');
@@ -15,7 +14,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('maintain consistent card spacing and grid alignment');
     });
   });
-
   experience('Task Cards', 'AUTO-T8k1Uu4Iz').client(() => {
     specs(() => {
       should('display task description with clear readable typography');
@@ -28,33 +26,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('use gradient borders matching task status');
     });
   });
-
-  experience('Completion Progress Ring', 'AUTO-P9l2Vv5Jz').client(() => {
-    specs(() => {
-      should('display circular progress ring with gradient stroke');
-      should('show completion percentage prominently in center');
-      should('animate progress changes with smooth easing');
-      should('display total task count below percentage');
-      should('use vibrant colors for high completion rates');
-      should('show subtle pulse animation on milestone achievements');
-      should('position prominently at top of dashboard or sidebar');
-    });
-  });
-
-  experience('Quick Add Todo Widget', 'AUTO-Q0m3Ww6Kz').client(() => {
-    specs(() => {
-      should('display floating action button with plus icon');
-      should('position fixed in bottom-right corner for easy access');
-      should('expand into input form with smooth scale animation on click');
-      should('include elegant input field with placeholder text');
-      should('show submit button with icon when text is entered');
-      should('support keyboard shortcut (Ctrl/Cmd + K) to focus input');
-      should('auto-focus input when opened');
-      should('clear and collapse after successful task addition');
-      should('show loading state during task submission');
-    });
-  });
-
   experience('Statistics Dashboard', 'AUTO-S1n4Xx7Lz').client(() => {
     specs(() => {
       should('show total tasks count with large prominent number');
@@ -67,7 +38,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('animate number changes with counting effect');
     });
   });
-
   experience('Recent Activity Feed', 'AUTO-R2o5Yy8Mz').client(() => {
     specs(() => {
       should('display recent task completions in chronological order');
@@ -80,7 +50,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('auto-scroll new completions into view with smooth animation');
     });
   });
-
   experience('View Toggle Controls', 'AUTO-V3p6Zz9Nz').client(() => {
     specs(() => {
       should('provide toggle between Kanban and List views');
@@ -92,7 +61,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('remember user preference in local storage');
     });
   });
-
   experience('Theme Toggle', 'AUTO-T4q7Aa0Oz').client(() => {
     specs(() => {
       should('support light and dark theme modes');
@@ -104,11 +72,10 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('use system preference as default');
     });
   });
-
   experience('Celebration Animations', 'AUTO-C5r8Bb1Pz').client(() => {
     specs(() => {
       should('trigger confetti animation when task is completed');
-      should('show satisfying checkmark animation');
+      should('show satisfying check mark animation');
       should('play subtle success sound effect (optional, user configurable)');
       should('display special animation for completing all tasks');
       should('show streak celebration for consecutive daily completions');
@@ -116,7 +83,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('respect reduced motion preferences for accessibility');
     });
   });
-
   experience('Column Management', 'AUTO-M6s9Cc2Qz').client(() => {
     specs(() => {
       should('allow reordering tasks within same column via drag-and-drop');
@@ -128,7 +94,6 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('maintain smooth 60fps animations during all interactions');
     });
   });
-
   experience('Empty States', 'AUTO-E7t0Dd3Rz').client(() => {
     specs(() => {
       should('display welcoming illustration when no tasks exist');
@@ -139,4 +104,28 @@ flow('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
       should('include helpful tips for new users');
     });
   });
+  experience('Completion Progress Ring', 'AUTO-P9l2Vv5Jz').client(() => {
+    specs(() => {
+      should('display circular progress ring with gradient stroke');
+      should('show completion percentage prominently in center');
+      should('animate progress changes with smooth easing');
+      should('display total task count below percentage');
+      should('use vibrant colors for high completion rates');
+      should('show subtle pulse animation on milestone achievements');
+      should('position prominently at top of dashboard or sidebar');
+    });
+  });
+  experience('Quick Add Todo Widget', 'AUTO-Q0m3Ww6Kz').client(() => {
+    specs(() => {
+      should('display floating action button with plus icon');
+      should('position fixed in bottom-right corner for easy access');
+      should('expand into input form with smooth scale animation on click');
+      should('include elegant input field with placeholder text');
+      should('show submit button with icon when text is entered');
+      should('support keyboard shortcut (Ctrl/Cmd + K) to focus input');
+      should('auto-focus input when opened');
+      should('clear and collapse after successful task addition');
+      should('show loading state during task submission');
+    });
+  });
 });

package/templates/kanban-todo/{flows/structure.flow.ts → narratives/structure.narrative.ts}

@@ -1,6 +1,5 @@
-import { experience, flow, should, specs } from '@auto-engineer/flow';
-
-flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
+import { experience, narrative, should, specs } from '@auto-engineer/narrative';
+narrative('App Structure', 'AUTO-A8u1Ee4Sz', () => {
   experience('Application Layout', 'AUTO-L9v2Ff5Tz').client(() => {
     specs(() => {
       should('display clean top navigation bar spanning full width');
@@ -12,7 +11,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('apply subtle shadow to separate top bar from content');
     });
   });
-
   experience('Main Content Area', 'AUTO-C0w3Gg6Uz').client(() => {
     specs(() => {
       should('occupy full viewport height below top bar');
@@ -24,7 +22,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('use CSS Grid for Kanban column layout');
     });
   });
-
   experience('Kanban Board Container', 'AUTO-K1x4Hh7Vz').client(() => {
     specs(() => {
       should('display three equal-width columns in desktop view');
@@ -36,7 +33,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('show subtle scrollbar styling matching theme');
     });
   });
-
   experience('Column Headers', 'AUTO-H2y5Ii8Wz').client(() => {
     specs(() => {
       should('display column title with clear typography');
@@ -47,7 +43,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('maintain consistent height across all columns');
     });
   });
-
   experience('Floating Action Button', 'AUTO-F3z6Jj9Xz').client(() => {
     specs(() => {
       should('position fixed in bottom-right corner of viewport');
@@ -61,7 +56,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('hide on mobile when keyboard is visible');
     });
   });
-
   experience('Statistics Sidebar', 'AUTO-S4a7Kk0Yz').client(() => {
     specs(() => {
       should('display on right side of screen in desktop view');
@@ -74,7 +68,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('support toggle to show/hide for more workspace');
     });
   });
-
   experience('Task Detail Panel', 'AUTO-D5b8Ll1Zz').client(() => {
     specs(() => {
       should('slide in from right side when task is clicked');
@@ -87,7 +80,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('trap focus within panel when open for accessibility');
     });
   });
-
   experience('Search Overlay', 'AUTO-S6c9Mm2Az').client(() => {
     specs(() => {
       should('trigger with keyboard shortcut Cmd/Ctrl + K');
@@ -100,7 +92,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('focus input automatically when opened');
     });
   });
-
   experience('Mobile Navigation', 'AUTO-M7d0Nn3Bz').client(() => {
     specs(() => {
       should('collapse top bar controls into hamburger menu on small screens');
@@ -112,7 +103,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('apply safe area insets for notched devices');
     });
   });
-
   experience('Responsive Breakpoints', 'AUTO-R8e1Oo4Cz').client(() => {
     specs(() => {
       should('support desktop layout for screens 1024px and wider');
@@ -124,7 +114,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('test on common device dimensions for consistency');
     });
   });
-
   experience('Loading States', 'AUTO-L9f2Pp5Dz').client(() => {
     specs(() => {
       should('show skeleton loaders for initial page load');
@@ -136,7 +125,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('provide timeout fallback with retry option');
     });
   });
-
   experience('Error States', 'AUTO-E0g3Qq6Ez').client(() => {
     specs(() => {
       should('display inline error messages near relevant fields');
@@ -148,7 +136,6 @@ flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
       should('support error boundary for graceful failure recovery');
     });
   });
-
   experience('Accessibility Features', 'AUTO-A1h4Rr7Fz').client(() => {
     specs(() => {
       should('support full keyboard navigation throughout app');