create-auto-app 0.10.5 → 0.11.1

package/templates/todo-list/flows/structure.flow.ts

@@ -0,0 +1,164 @@
+import { experience, flow, should, specs } from '@auto-engineer/flow';
+
+flow('App Structure', 'AUTO-A8u1Ee4Sz', () => {
+  experience('Application Layout', 'AUTO-L9v2Ff5Tz').client(() => {
+    specs(() => {
+      should('display clean top navigation bar spanning full width');
+      should('include app logo or name on left side of top bar');
+      should('show view toggle controls in center of top bar');
+      should('display theme toggle, search, and profile menu on right side');
+      should('use gradient or glass morphism effect for top bar');
+      should('maintain top bar fixed position during scroll');
+      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');
+      should('apply subtle gradient or textured background');
+      should('center Kanban board with max-width container for large screens');
+      should('provide adequate padding around content on all sides');
+      should('support smooth transitions when switching between views');
+      should('maintain responsive layout for tablet and mobile devices');
+      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');
+      should('apply consistent gap spacing between columns');
+      should('stack columns vertically on mobile devices');
+      should('support horizontal scrolling on smaller screens if needed');
+      should('maintain minimum column width for readability');
+      should('apply max-height with scroll for columns with many tasks');
+      should('show subtle scrollbar styling matching theme');
+    });
+  });
+
+  experience('Column Headers', 'AUTO-H2y5Ii8Wz').client(() => {
+    specs(() => {
+      should('display column title with clear typography');
+      should('show task count badge with colored background');
+      should('use gradient or accent colors per column type');
+      should('apply sticky positioning within scrollable columns');
+      should('include subtle shadow for depth');
+      should('maintain consistent height across all columns');
+    });
+  });
+
+  experience('Floating Action Button', 'AUTO-F3z6Jj9Xz').client(() => {
+    specs(() => {
+      should('position fixed in bottom-right corner of viewport');
+      should('display prominent plus icon or "Add" text');
+      should('use vibrant gradient or solid accent color');
+      should('apply circular shape with consistent size');
+      should('show shadow for elevation effect');
+      should('animate subtle pulse or glow on hover');
+      should('expand into input form with smooth scale animation on click');
+      should('maintain z-index above all other content');
+      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');
+      should('show progress ring at top of sidebar');
+      should('include statistics cards in vertical stack');
+      should('display recent activity feed below statistics');
+      should('apply glass morphism or card-based design');
+      should('collapse into expandable panel on tablet devices');
+      should('move to bottom sheet on mobile devices');
+      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');
+      should('overlay main content with backdrop blur on mobile');
+      should('show full task information with edit capabilities');
+      should('include close button in top-right corner');
+      should('support swipe gesture to close on touch devices');
+      should('maintain consistent width on desktop');
+      should('animate slide-in/out with smooth easing');
+      should('trap focus within panel when open for accessibility');
+    });
+  });
+
+  experience('Search Overlay', 'AUTO-S6c9Mm2Az').client(() => {
+    specs(() => {
+      should('trigger with keyboard shortcut Cmd/Ctrl + K');
+      should('display centered modal overlay with backdrop blur');
+      should('show search input with large font size');
+      should('include recent searches or suggestions below input');
+      should('filter and display matching tasks in real-time');
+      should('support keyboard navigation through results');
+      should('close on Escape key or clicking backdrop');
+      should('focus input automatically when opened');
+    });
+  });
+
+  experience('Mobile Navigation', 'AUTO-M7d0Nn3Bz').client(() => {
+    specs(() => {
+      should('collapse top bar controls into hamburger menu on small screens');
+      should('show essential actions as bottom tab bar on mobile');
+      should('include tabs for: Kanban, Statistics, Add, Settings');
+      should('highlight active tab with accent color');
+      should('use icons for tabs with optional labels');
+      should('maintain fixed position at bottom of viewport');
+      should('apply safe area insets for notched devices');
+    });
+  });
+
+  experience('Responsive Breakpoints', 'AUTO-R8e1Oo4Cz').client(() => {
+    specs(() => {
+      should('support desktop layout for screens 1024px and wider');
+      should('adapt to tablet layout for screens 768px to 1023px');
+      should('optimize for mobile devices below 768px');
+      should('stack Kanban columns vertically on screens below 640px');
+      should('adjust font sizes and spacing for each breakpoint');
+      should('maintain touch-friendly tap targets on all devices');
+      should('test on common device dimensions for consistency');
+    });
+  });
+
+  experience('Loading States', 'AUTO-L9f2Pp5Dz').client(() => {
+    specs(() => {
+      should('show skeleton loaders for initial page load');
+      should('display shimmer effect on loading cards');
+      should('include spinner for async operations');
+      should('maintain layout stability during loading');
+      should('show optimistic UI updates for immediate feedback');
+      should('handle slow network conditions gracefully');
+      should('provide timeout fallback with retry option');
+    });
+  });
+
+  experience('Error States', 'AUTO-E0g3Qq6Ez').client(() => {
+    specs(() => {
+      should('display inline error messages near relevant fields');
+      should('show toast notifications for global errors');
+      should('include helpful error messages with suggested actions');
+      should('use consistent error styling with red accent color');
+      should('provide retry buttons for failed operations');
+      should('log errors to console for debugging');
+      should('support error boundary for graceful failure recovery');
+    });
+  });
+
+  experience('Accessibility Features', 'AUTO-A1h4Rr7Fz').client(() => {
+    specs(() => {
+      should('support full keyboard navigation throughout app');
+      should('provide ARIA labels for all interactive elements');
+      should('include skip links for main content areas');
+      should('maintain focus indicators with high contrast');
+      should('support screen reader announcements for dynamic changes');
+      should('respect prefers-reduced-motion for animations');
+      should('ensure color contrast meets WCAG AA standards');
+      should('provide alt text for all decorative images and icons');
+    });
+  });
+});

package/templates/todo-list/flows/todo-list.flow.ts

@@ -0,0 +1,367 @@
+import {
+  command,
+  query,
+  flow,
+  should,
+  specs,
+  rule,
+  example,
+  gql,
+  source,
+  data,
+  sink,
+  type Command,
+  type Event,
+  type State,
+} from '@auto-engineer/flow';
+
+type AddTodo = Command<
+  'AddTodo',
+  {
+    todoId: string;
+    description: string;
+  }
+>;
+
+type TodoAdded = Event<
+  'TodoAdded',
+  {
+    todoId: string;
+    description: string;
+    status: 'pending';
+    addedAt: Date;
+  }
+>;
+
+type MarkTodoInProgress = Command<
+  'MarkTodoInProgress',
+  {
+    todoId: string;
+  }
+>;
+
+type TodoMarkedInProgress = Event<
+  'TodoMarkedInProgress',
+  {
+    todoId: string;
+    markedAt: Date;
+  }
+>;
+
+type MarkTodoComplete = Command<
+  'MarkTodoComplete',
+  {
+    todoId: string;
+  }
+>;
+
+type TodoMarkedComplete = Event<
+  'TodoMarkedComplete',
+  {
+    todoId: string;
+    completedAt: Date;
+  }
+>;
+
+type TodoState = State<
+  'TodoState',
+  {
+    todoId: string;
+    description: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    addedAt: Date;
+    completedAt: Date | null;
+  }
+>;
+
+type TodoListSummary = State<
+  'TodoListSummary',
+  {
+    summaryId: string;
+    totalTodos: number;
+    pendingCount: number;
+    inProgressCount: number;
+    completedCount: number;
+    completionPercentage: number;
+  }
+>;
+
+flow('Todo List', 'AUTO-T8dL3k9Xw', () => {
+  command('adds a new todo', 'AUTO-A1c4Mn7Bz')
+    .server(() => {
+      specs(() => {
+        rule('todos can be added to the list', 'AUTO-r1B2Cp8Y', () => {
+          example('adds a new todo successfully')
+            .when<AddTodo>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+            })
+            .then<TodoAdded>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            });
+        });
+      });
+      data([sink().event('TodoAdded').toStream('todos')]);
+    })
+    .request(gql`
+      mutation AddTodo($input: AddTodoInput!) {
+        addTodo(input: $input) {
+          success
+          error {
+            type
+            message
+          }
+        }
+      }
+    `)
+    .client(() => {
+      specs('Add Todo', () => {
+        should('display a quick-add input field with floating action button');
+        should('show success animation when todo is added');
+        should('automatically place new todo in "To Do" column');
+        should('clear input field after successful addition');
+        should('focus back to input for quick consecutive additions');
+      });
+    });
+
+  command('moves todo to in progress', 'AUTO-M2d5No8Cz')
+    .server(() => {
+      specs(() => {
+        rule('todos can be moved to in progress', 'AUTO-r2C3Dq9Z', () => {
+          example('moves a pending todo to in progress')
+            .given<TodoAdded>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            })
+            .when<MarkTodoInProgress>({
+              todoId: 'todo-001',
+            })
+            .then<TodoMarkedInProgress>({
+              todoId: 'todo-001',
+              markedAt: new Date('2030-01-01T10:00:00Z'),
+            });
+        });
+      });
+      data([sink().event('TodoMarkedInProgress').toStream('todos')]);
+    })
+    .request(gql`
+      mutation MarkTodoInProgress($input: MarkTodoInProgressInput!) {
+        markTodoInProgress(input: $input) {
+          success
+          error {
+            type
+            message
+          }
+        }
+      }
+    `)
+    .client(() => {
+      specs('Move to In Progress', () => {
+        should('support drag-and-drop from "To Do" to "In Progress" column');
+        should('animate smooth transition between columns');
+        should('update column count badges in real-time');
+        should('show visual feedback during drag operation');
+      });
+    });
+
+  command('marks todo as complete', 'AUTO-C3e6Op9Dz')
+    .server(() => {
+      specs(() => {
+        rule('todos can be marked as complete', 'AUTO-r3D4Eq0A', () => {
+          example('marks an in-progress todo as complete')
+            .given<TodoAdded>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            })
+            .and<TodoMarkedInProgress>({
+              todoId: 'todo-001',
+              markedAt: new Date('2030-01-01T10:00:00Z'),
+            })
+            .when<MarkTodoComplete>({
+              todoId: 'todo-001',
+            })
+            .then<TodoMarkedComplete>({
+              todoId: 'todo-001',
+              completedAt: new Date('2030-01-01T11:00:00Z'),
+            });
+
+          example('marks a pending todo directly as complete')
+            .given<TodoAdded>({
+              todoId: 'todo-002',
+              description: 'Write report',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            })
+            .when<MarkTodoComplete>({
+              todoId: 'todo-002',
+            })
+            .then<TodoMarkedComplete>({
+              todoId: 'todo-002',
+              completedAt: new Date('2030-01-01T11:30:00Z'),
+            });
+        });
+      });
+      data([sink().event('TodoMarkedComplete').toStream('todos')]);
+    })
+    .request(gql`
+      mutation MarkTodoComplete($input: MarkTodoCompleteInput!) {
+        markTodoComplete(input: $input) {
+          success
+          error {
+            type
+            message
+          }
+        }
+      }
+    `)
+    .client(() => {
+      specs('Complete Todo', () => {
+        should('support drag-and-drop to "Done" column');
+        should('show celebration animation on completion');
+        should('display visual confetti effect for milestone completions');
+        should('update completion percentage progress ring');
+        should('strike-through completed todo text with smooth animation');
+        should('show completion timestamp on hover');
+      });
+    });
+
+  query('views all todos', 'AUTO-V4f7Pq0Ez')
+    .server(() => {
+      specs(() => {
+        rule('all todos are displayed with their current status', 'AUTO-r4E5Fr1B', () => {
+          example('shows multiple todos in different states')
+            .given<TodoAdded>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            })
+            .and<TodoAdded>({
+              todoId: 'todo-002',
+              description: 'Write report',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:10:00Z'),
+            })
+            .and<TodoMarkedInProgress>({
+              todoId: 'todo-001',
+              markedAt: new Date('2030-01-01T10:00:00Z'),
+            })
+            .and<TodoMarkedComplete>({
+              todoId: 'todo-002',
+              completedAt: new Date('2030-01-01T11:00:00Z'),
+            })
+            .when({})
+            .then<TodoState>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'in_progress',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+              completedAt: null,
+            })
+            .and<TodoState>({
+              todoId: 'todo-002',
+              description: 'Write report',
+              status: 'completed',
+              addedAt: new Date('2030-01-01T09:10:00Z'),
+              completedAt: new Date('2030-01-01T11:00:00Z'),
+            });
+        });
+      });
+      data([source().state('TodoState').fromProjection('Todos', 'todoId')]);
+    })
+    .request(gql`
+      query AllTodos {
+        todos {
+          todoId
+          description
+          status
+          addedAt
+          completedAt
+        }
+      }
+    `)
+    .client(() => {
+      specs('Todo List View', () => {
+        should('display todos organized in three columns: To Do, In Progress, Done');
+        should('show count badges on each column header');
+        should('support drag-and-drop between columns');
+        should('display empty state illustrations for empty columns');
+        should('show todo cards with glass morphism effect');
+        should('display subtle hover effects on todo cards');
+        should('support keyboard navigation between todos');
+      });
+    });
+
+  query('views completion summary', 'AUTO-S5g8Qr1Fz')
+    .server(() => {
+      specs(() => {
+        rule('summary shows overall todo list statistics', 'AUTO-r5F6Gs2C', () => {
+          example('calculates summary from multiple todos')
+            .given<TodoAdded>({
+              todoId: 'todo-001',
+              description: 'Buy groceries',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:00:00Z'),
+            })
+            .and<TodoAdded>({
+              todoId: 'todo-002',
+              description: 'Write report',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:10:00Z'),
+            })
+            .and<TodoAdded>({
+              todoId: 'todo-003',
+              description: 'Call client',
+              status: 'pending',
+              addedAt: new Date('2030-01-01T09:20:00Z'),
+            })
+            .and<TodoMarkedInProgress>({
+              todoId: 'todo-001',
+              markedAt: new Date('2030-01-01T10:00:00Z'),
+            })
+            .and<TodoMarkedComplete>({
+              todoId: 'todo-002',
+              completedAt: new Date('2030-01-01T11:00:00Z'),
+            })
+            .when({})
+            .then<TodoListSummary>({
+              summaryId: 'main-summary',
+              totalTodos: 3,
+              pendingCount: 1,
+              inProgressCount: 1,
+              completedCount: 1,
+              completionPercentage: 33,
+            });
+        });
+      });
+      data([source().state('TodoListSummary').fromProjection('TodoSummary', 'summaryId')]);
+    })
+    .request(gql`
+      query TodoListSummary {
+        todoListSummary {
+          totalTodos
+          pendingCount
+          inProgressCount
+          completedCount
+          completionPercentage
+        }
+      }
+    `)
+    .client(() => {
+      specs('Completion Summary', () => {
+        should('display circular progress ring showing completion percentage');
+        should('show total task count in center of progress ring');
+        should('display breakdown of pending, in-progress, and completed counts');
+        should('update progress ring with smooth animation on status changes');
+        should('use gradient colors for progress ring');
+        should('show daily completion goal progress');
+      });
+    });
+});

package/templates/{finance-app → todo-list}/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "finance-tracker",
+  "name": "todo-list",
   "private": true,
   "type": "module",
   "scripts": {
-    "DISABLE-auto": "node ../../packages/cli/dist/bin/auto.js",
-    "DISABLE-auto:debug": "DEBUG=flow:*,cli:*,auto*,ai*,-*file-syncer,-*flow* node ../../packages/cli/dist/bin/auto.js",
+    "auto": "node ../../packages/cli/dist/bin/auto.js",
+    "auto:debug": "DEBUG=flow:*,cli:*,auto*,ai*,-*file-syncer,-*flow* node ../../packages/cli/dist/bin/auto.js",
     "start": "dotenv -e .env -- pnpm --parallel start"
   },
   "dependencies": {

package/templates/todo-list/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "todo-list",
+  "displayName": "Todo List with Kanban",
+  "description": "Beautiful Kanban-style todo list with drag-and-drop and smooth animations",
+  "type": "template",
+  "preset": "full"
+}

package/templates/{finance-app → todo-list}/tsconfig.json

@@ -7,11 +7,9 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "outDir": "./dist",
-    "rootDir": ".",
     "noEmit": false,
-    "strict": true,
     "strictNullChecks": true
   },
-  "include": ["flows/**/*", "vitest.config.ts"],
+  "include": ["**/*", "vitest.config.ts"],
   "exclude": ["dist", "node_modules"]
 }

package/templates/finance-app/flows/app-homepage.flow.ts

@@ -1,74 +0,0 @@
-import { experience, flow, should, specs } from '@auto-engineer/flow';
-flow('Micro Personal Finance App', 'AUTO-ixiwHOw5J', () => {
-  experience('App Structure', 'AUTO-WN9lxdNao').client(() => {
-    specs('', () => {
-      should('display persistent sidebar on left for navigation');
-      should('sidebar includes links: Home, Add Expense, Charts, Subscriptions, Savings Jar, Budget, Expense History');
-      should('highlight current active link in sidebar');
-      should('sidebar collapsible for smaller screens');
-      should('top bar includes app logo, profile menu, and notifications icon');
-      should(
-        'bottom or top persistent bar shows global widgets: total spending, remaining budget, savings jar progress',
-      );
-      should('content area changes dynamically based on selected navigation link');
-      should('maintain layout consistency across all screens');
-      should('support responsive design with sidebar collapsing into hamburger menu on mobile');
-    });
-  });
-  experience('Home Screen', 'AUTO-MJj0kM801').client(() => {
-    specs('', () => {
-      should('show today\u2019s spending summary and remaining budget');
-      should('display recent expenses list');
-      should('show visual progress of savings jar goal');
-      should('quick access buttons for Add Expense, Charts, Subscriptions');
-    });
-  });
-  experience('Add Expense', 'AUTO-ja4Y35TAK').client(() => {
-    specs('', () => {
-      should('allow entering expense amount, category, and note');
-      should('show recent/frequent categories for quick selection');
-      should('display confirmation toast after adding expense');
-      should('update budget bar and charts in real-time');
-    });
-  });
-  experience('Spending Charts', 'AUTO-3VZYky812').client(() => {
-    specs('', () => {
-      should('show daily and weekly spending charts');
-      should('highlight categories with highest spend');
-      should('allow filtering by category or date range');
-      should('update dynamically when new expenses are added');
-    });
-  });
-  experience('Manage Subscriptions', 'AUTO-AJEeeuqeT').client(() => {
-    specs('', () => {
-      should('list all active subscriptions with amount and renewal date');
-      should('allow adding, editing, and removing subscriptions');
-      should('show monthly summary of subscription spending');
-      should('highlight upcoming renewals');
-    });
-  });
-  experience('Round-Up Savings Jar', 'AUTO-5x0Vk8A3q').client(() => {
-    specs('', () => {
-      should('show current total and goal progress');
-      should('allow changing the savings goal');
-      should('automatically round up new expenses');
-      should('display visual progress bar consistently in shell');
-    });
-  });
-  experience('Budget Tracker', 'AUTO-xRpeVwyqT').client(() => {
-    specs('', () => {
-      should('allow setting monthly/weekly budget');
-      should('show remaining budget as a progress bar');
-      should('highlight overspending');
-      should('update in real-time when expenses are added');
-    });
-  });
-  experience('Expense Detail', 'AUTO-8aBiA4R37').client(() => {
-    specs('', () => {
-      should('allow viewing full expense history');
-      should('filter by category, date, or amount');
-      should('edit or delete individual expenses');
-      should('show contribution of each expense to daily/weekly/monthly totals');
-    });
-  });
-});

package/templates/finance-app/flows/landing-page.flow.ts

@@ -1,34 +0,0 @@
-import { experience, flow, should, specs } from '@auto-engineer/flow';
-flow('Landing Page', 'AUTO-z8hpgv8UU', () => {
-  experience('Landing Page', 'AUTO-Ke1xAjRsI').client(() => {
-    specs('', () => {
-      should('display app name and tagline prominently at top of page');
-      should('show a hero image or illustration representing personal finance');
-      should('include a primary call-to-action button to "Get Started" or "Sign Up"');
-      should('include a secondary CTA to "Learn More"');
-      should(
-        'list core features with icons: expense tracking, subscriptions, round-up savings, budget tracking, charts',
-      );
-      should('display brief descriptions under each feature');
-      should('support horizontal scrolling or 3-column layout for desktop, stacked for mobile');
-      should('show 2-3 user testimonials with names, photos, and quotes');
-      should('highlight real benefits users have gained using the app');
-      should('display simple pricing plans: Free, Premium');
-      should('show plan features in a table or card layout');
-      should('include CTA buttons for each plan: "Start Free" or "Upgrade"');
-      should('include links to About, FAQ, Terms of Service, Privacy Policy, and Contact');
-      should('display social media icons for Twitter, LinkedIn, etc.');
-      should('support smooth scrolling to sections when clicking navigation links');
-      should('be fully responsive for desktop, tablet, and mobile');
-    });
-  });
-  experience('Onboarding', 'AUTO-krmQIPP30').client(() => {
-    specs('', () => {
-      should('allow user to set initial monthly budget');
-      should('allow adding first expense');
-      should('allow setting initial savings jar goal');
-      should('show visual progress indicators as steps are completed');
-      should('allow skipping onboarding to go directly to main app');
-    });
-  });
-});