create-auto-app 0.11.11 → 0.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-auto-app",
-  "version": "0.11.11",
+  "version": "0.11.13",
   "description": "Create Auto Engineer apps with no configuration",
   "type": "module",
   "bin": {
@@ -33,7 +33,7 @@
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.15",
     "ora": "^8.0.1",
-    "@auto-engineer/id": "0.11.11"
+    "@auto-engineer/id": "0.11.13"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

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

@@ -23,6 +23,7 @@ import type {
   ComponentImplementedEvent,
   ComponentImplementationFailedEvent,
 } from '@auto-engineer/component-implementer';
+import type { StartServerCommand, StartClientCommand } from '@auto-engineer/dev-server';
 import * as path from 'path';
 import createDebug from 'debug';
 
@@ -68,6 +69,7 @@ export default autoConfig({
     '@auto-engineer/information-architect',
     '@auto-engineer/frontend-generator-react-graphql',
     '@auto-engineer/server-implementer',
+    '@auto-engineer/dev-server',
   ],
   aliases: {
     // Resolve command name conflicts between packages
@@ -194,12 +196,15 @@ export default autoConfig({
       }),
     );
 
-    on<GenerateServerEvents>('ServerGenerated', () =>
+    on<GenerateServerEvents>('ServerGenerated', () => [
       dispatch<GenerateIACommand>('GenerateIA', {
         modelPath: './.context/schema.json',
         outputDir: './.context',
       }),
-    );
+      dispatch<StartServerCommand>('StartServer', {
+        serverDirectory: './server',
+      }),
+    ]);
 
     on<GenerateIAEvents>('IAGenerated', () =>
       dispatch<GenerateClientCommand>('GenerateClient', {
@@ -223,6 +228,9 @@ export default autoConfig({
             filePath: 'client/src/components/molecules/Example.tsx',
             componentName: 'Example.tsx',
           }),
+          dispatch<StartClientCommand>('StartClient', {
+            clientDirectory: './client',
+          }),
         ];
       }
 
@@ -248,7 +256,7 @@ export default autoConfig({
 
       dispatchedPhases.add('molecule');
 
-      const commands = molecules.map((component) => {
+      const componentCommands = molecules.map((component) => {
         const componentName = path.basename(component.filePath).replace('.tsx', '');
         return dispatch<ImplementComponentCommand>('ImplementComponent', {
           projectDir: clientTargetDir,
@@ -260,7 +268,11 @@ export default autoConfig({
         });
       });
 
-      return dispatch.parallel(commands);
+      const startClientCommand = dispatch<StartClientCommand>('StartClient', {
+        clientDirectory: './client',
+      });
+
+      return dispatch.parallel([...componentCommands, startClientCommand]);
     });
 
     const handleComponentProcessed = (e: ComponentImplementedEvent | ComponentImplementationFailedEvent) => {

package/templates/kanban-todo/narratives/todo-list.narrative.ts

@@ -247,7 +247,6 @@ narrative('Todo List', 'AUTO-T8dL3k9Xw', () => {
             })
             .and<TodoMarkedInProgress>({ todoId: 'todo-001', markedAt: new Date('2030-01-01T10:00:00.000Z') })
             .and<TodoMarkedComplete>({ todoId: 'todo-002', completedAt: new Date('2030-01-01T11:00:00.000Z') })
-            .when({})
             .then<TodoState>({
               todoId: 'todo-001',
               description: 'Buy groceries',
@@ -305,7 +304,6 @@ narrative('Todo List', 'AUTO-T8dL3k9Xw', () => {
             })
             .and<TodoMarkedInProgress>({ todoId: 'todo-001', markedAt: new Date('2030-01-01T10:00:00.000Z') })
             .and<TodoMarkedComplete>({ todoId: 'todo-002', completedAt: new Date('2030-01-01T11:00:00.000Z') })
-            .when({})
             .then<TodoListSummary>({
               summaryId: 'main-summary',
               totalTodos: 3,

package/templates/kanban-todo/package.json

@@ -11,6 +11,7 @@
     "@auto-engineer/cli": "workspace:*",
     "@auto-engineer/component-implementer": "workspace:*",
     "@auto-engineer/design-system-importer": "workspace:*",
+    "@auto-engineer/dev-server": "workspace:*",
     "@auto-engineer/narrative": "workspace:*",
     "@auto-engineer/frontend-checks": "workspace:*",
     "@auto-engineer/frontend-generator-react-graphql": "workspace:*",

package/templates/kanban-todo/.context/auto-ia-scheme.json

@@ -1,403 +0,0 @@
-{
-  "schema_description": "Kanban-style todo application with drag-and-drop task management, real-time statistics, and celebration animations",
-  "atoms": {
-    "description": "Atomic UI primitives for the todo application",
-    "items": {}
-  },
-  "molecules": {
-    "description": "Reusable UI components composed from atoms",
-    "items": {
-      "TaskCard": {
-        "description": "Individual task card displaying task information with drag-and-drop support",
-        "composition": {
-          "atoms": ["card", "badge"]
-        },
-        "specs": [
-          "display task description with clear readable typography",
-          "show status indicator with color-coded dot or icon",
-          "display creation timestamp in subtle text",
-          "show completion timestamp for completed tasks",
-          "include quick action buttons appearing on hover",
-          "support click to expand for future task details",
-          "apply strike-through animation for completed tasks",
-          "use gradient borders matching task status"
-        ]
-      },
-      "ColumnHeader": {
-        "description": "Header for Kanban columns with title and count badge",
-        "composition": {
-          "atoms": ["badge"]
-        },
-        "specs": [
-          "display column title with clear typography",
-          "show task count badge with colored background",
-          "use gradient or accent colors per column type",
-          "apply sticky positioning within scrollable columns",
-          "include subtle shadow for depth",
-          "maintain consistent height across all columns"
-        ]
-      },
-      "ProgressRing": {
-        "description": "Circular progress indicator showing completion percentage",
-        "composition": {
-          "atoms": ["progress"]
-        },
-        "specs": [
-          "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"
-        ]
-      },
-      "StatCard": {
-        "description": "Card displaying a single statistic with icon and value",
-        "composition": {
-          "atoms": ["card"]
-        },
-        "specs": [
-          "show total tasks count with large prominent number",
-          "display tasks completed today with celebration icon",
-          "show breakdown: pending, in-progress, completed counts",
-          "display completion percentage with visual indicator",
-          "use card-based layout with glass morphism styling",
-          "include subtle icons for each statistic",
-          "update in real-time when tasks change status",
-          "animate number changes with counting effect"
-        ]
-      },
-      "ActivityItem": {
-        "description": "Single item in the recent activity feed",
-        "composition": {
-          "atoms": []
-        },
-        "specs": [
-          "display recent task completions in chronological order",
-          "show completion timestamp in relative format",
-          "include task description with completed styling",
-          "show subtle celebration icon for each completion",
-          "use minimalist list design with dividers",
-          "support click to view task details"
-        ]
-      },
-      "QuickAddInput": {
-        "description": "Input field for quickly adding new tasks",
-        "composition": {
-          "atoms": ["button"]
-        },
-        "specs": [
-          "display floating action button with plus icon",
-          "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"
-        ]
-      },
-      "ViewToggle": {
-        "description": "Toggle control for switching between Kanban and List views",
-        "composition": {
-          "atoms": ["toggle-group", "button"]
-        },
-        "specs": [
-          "provide toggle between Kanban and List views",
-          "use segmented control or tab-style switcher",
-          "position in top toolbar for easy access",
-          "highlight active view with accent color",
-          "animate view transitions with fade and slide effects",
-          "preserve scroll position when switching views",
-          "remember user preference in local storage"
-        ]
-      },
-      "ThemeToggle": {
-        "description": "Toggle button for switching between light and dark themes",
-        "composition": {
-          "atoms": ["button"]
-        },
-        "specs": [
-          "support light and dark theme modes",
-          "display sun/moon icon toggle in top bar",
-          "transition smoothly between themes with fade animation",
-          "adjust all colors including gradients for theme",
-          "maintain high contrast and readability in both modes",
-          "remember user preference in local storage",
-          "use system preference as default"
-        ]
-      },
-      "EmptyState": {
-        "description": "Display component for empty columns or lists",
-        "composition": {
-          "atoms": ["button"]
-        },
-        "specs": [
-          "display welcoming illustration when no tasks exist",
-          "show encouraging message to add first task",
-          "provide quick-add button directly in empty state",
-          "show column-specific empty states with relevant illustrations",
-          "use consistent visual style matching overall design system",
-          "include helpful tips for new users"
-        ]
-      },
-      "TopNavBar": {
-        "description": "Top navigation bar with app branding and controls",
-        "composition": {
-          "atoms": ["button"]
-        },
-        "specs": [
-          "display clean top navigation bar spanning full width",
-          "include app logo or name on left side of top bar",
-          "show view toggle controls in center of top bar",
-          "display theme toggle, search, and profile menu on right side",
-          "use gradient or glass morphism effect for top bar",
-          "maintain top bar fixed position during scroll",
-          "apply subtle shadow to separate top bar from content"
-        ]
-      }
-    }
-  },
-  "organisms": {
-    "description": "Smart UI components with data-fetching and business logic",
-    "items": {
-      "KanbanBoard": {
-        "description": "Main Kanban board with three columns for task management",
-        "composition": {
-          "molecules": ["ColumnHeader", "TaskCard", "EmptyState"]
-        },
-        "data_requirements": [
-          {
-            "type": "query",
-            "description": "Fetch all todos to display in Kanban columns",
-            "trigger": "on page load",
-            "details": {
-              "source": "AllTodos query",
-              "gql": "query AllTodos {\n  todos {\n    todoId\n    description\n    status\n    addedAt\n    completedAt\n  }\n}",
-              "payload_schema": {}
-            }
-          },
-          {
-            "type": "mutation",
-            "description": "Move task to in progress column",
-            "trigger": "on drag to in progress column",
-            "details": {
-              "source": "MarkTodoInProgress mutation",
-              "gql": "mutation MarkTodoInProgress($input: MarkTodoInProgressInput!) {\n  markTodoInProgress(input: $input) {\n    success\n    error {\n      type\n      message\n    }\n  }\n}",
-              "payload_schema": {
-                "todoId": "string"
-              }
-            }
-          },
-          {
-            "type": "mutation",
-            "description": "Mark task as complete",
-            "trigger": "on drag to done column",
-            "details": {
-              "source": "MarkTodoComplete mutation",
-              "gql": "mutation MarkTodoComplete($input: MarkTodoCompleteInput!) {\n  markTodoComplete(input: $input) {\n    success\n    error {\n      type\n      message\n    }\n  }\n}",
-              "payload_schema": {
-                "todoId": "string"
-              }
-            }
-          }
-        ],
-        "specs": [
-          "display three distinct columns: To Do, In Progress, and Done",
-          "show elegant column headers with gradient backgrounds",
-          "display count badges on each column showing number of tasks",
-          "support drag-and-drop of task cards between columns",
-          "animate smooth transitions when tasks move between columns",
-          "show visual feedback during drag operations with shadow elevation",
-          "display task cards with glass morphism effect and subtle backdrop blur",
-          "add hover effects with gentle scale and shadow transitions",
-          "show empty state with beautiful illustrations when columns are empty",
-          "maintain consistent card spacing and grid alignment",
-          "allow reordering tasks within same column via drag-and-drop",
-          "auto-scroll columns when dragging near edges",
-          "show drop zones with visual indicators",
-          "prevent invalid drops with visual feedback",
-          "support keyboard-based task movement for accessibility",
-          "show task count updates immediately on column changes",
-          "maintain smooth 60fps animations during all interactions"
-        ]
-      },
-      "QuickAddWidget": {
-        "description": "Floating action button that expands into task input form",
-        "composition": {
-          "molecules": ["QuickAddInput"]
-        },
-        "data_requirements": [
-          {
-            "type": "mutation",
-            "description": "Add a new todo to the list",
-            "trigger": "on form submit",
-            "details": {
-              "source": "AddTodo mutation",
-              "gql": "mutation AddTodo($input: AddTodoInput!) {\n  addTodo(input: $input) {\n    success\n    error {\n      type\n      message\n    }\n  }\n}",
-              "payload_schema": {
-                "todoId": "string",
-                "description": "string"
-              }
-            }
-          }
-        ],
-        "specs": [
-          "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"
-        ]
-      },
-      "StatisticsDashboard": {
-        "description": "Dashboard showing task statistics and completion metrics",
-        "composition": {
-          "molecules": ["ProgressRing", "StatCard"]
-        },
-        "data_requirements": [
-          {
-            "type": "query",
-            "description": "Fetch summary statistics for all todos",
-            "trigger": "on page load and when tasks change",
-            "details": {
-              "source": "TodoListSummary query",
-              "gql": "query TodoListSummary {\n  todoListSummary {\n    totalTodos\n    pendingCount\n    inProgressCount\n    completedCount\n    completionPercentage\n  }\n}",
-              "payload_schema": {}
-            }
-          }
-        ],
-        "specs": [
-          "show total tasks count with large prominent number",
-          "display tasks completed today with celebration icon",
-          "show breakdown: pending, in-progress, completed counts",
-          "display completion percentage with visual indicator",
-          "use card-based layout with glass morphism styling",
-          "include subtle icons for each statistic",
-          "update in real-time when tasks change status",
-          "animate number changes with counting effect"
-        ]
-      },
-      "RecentActivityFeed": {
-        "description": "Feed showing recent task completions",
-        "composition": {
-          "molecules": ["ActivityItem"]
-        },
-        "data_requirements": [
-          {
-            "type": "query",
-            "description": "Fetch recently completed todos",
-            "trigger": "on page load and when tasks are completed",
-            "details": {
-              "source": "AllTodos query filtered for completed",
-              "gql": "query AllTodos {\n  todos {\n    todoId\n    description\n    status\n    addedAt\n    completedAt\n  }\n}",
-              "payload_schema": {}
-            }
-          }
-        ],
-        "specs": [
-          "display recent task completions in chronological order",
-          "show completion timestamp in relative format",
-          "limit to last 5 completed tasks",
-          "include task description with completed styling",
-          "show subtle celebration icon for each completion",
-          "use minimalist list design with dividers",
-          "support click to view task details",
-          "auto-scroll new completions into view with smooth animation"
-        ]
-      },
-      "CelebrationOverlay": {
-        "description": "Overlay component for celebration animations",
-        "composition": {
-          "molecules": []
-        },
-        "specs": [
-          "trigger confetti animation when task is completed",
-          "show satisfying checkmark animation",
-          "play subtle success sound effect (optional, user configurable)",
-          "display special animation for completing all tasks",
-          "show streak celebration for consecutive daily completions",
-          "use particle effects that do not obstruct UI",
-          "respect reduced motion preferences for accessibility"
-        ]
-      }
-    }
-  },
-  "pages": {
-    "description": "Top-level views composed of organisms",
-    "items": {
-      "TodoDashboardPage": {
-        "route": "/",
-        "description": "Main dashboard page with Kanban board, statistics, and quick add functionality",
-        "layout": {
-          "organisms": [
-            "KanbanBoard",
-            "QuickAddWidget",
-            "StatisticsDashboard",
-            "RecentActivityFeed",
-            "CelebrationOverlay"
-          ]
-        },
-        "navigation": [],
-        "specs": [
-          "occupy full viewport height below top bar",
-          "apply subtle gradient or textured background",
-          "center Kanban board with max-width container for large screens",
-          "provide adequate padding around content on all sides",
-          "support smooth transitions when switching between views",
-          "maintain responsive layout for tablet and mobile devices",
-          "use CSS Grid for Kanban column layout",
-          "display three equal-width columns in desktop view",
-          "apply consistent gap spacing between columns",
-          "stack columns vertically on mobile devices",
-          "support horizontal scrolling on smaller screens if needed",
-          "maintain minimum column width for readability",
-          "apply max-height with scroll for columns with many tasks",
-          "show subtle scrollbar styling matching theme",
-          "display on right side of screen in desktop view",
-          "show progress ring at top of sidebar",
-          "include statistics cards in vertical stack",
-          "display recent activity feed below statistics",
-          "apply glass morphism or card-based design",
-          "collapse into expandable panel on tablet devices",
-          "move to bottom sheet on mobile devices",
-          "support toggle to show/hide for more workspace",
-          "support desktop layout for screens 1024px and wider",
-          "adapt to tablet layout for screens 768px to 1023px",
-          "optimize for mobile devices below 768px",
-          "stack Kanban columns vertically on screens below 640px",
-          "adjust font sizes and spacing for each breakpoint",
-          "maintain touch-friendly tap targets on all devices",
-          "test on common device dimensions for consistency",
-          "show skeleton loaders for initial page load",
-          "display shimmer effect on loading cards",
-          "include spinner for async operations",
-          "maintain layout stability during loading",
-          "show optimistic UI updates for immediate feedback",
-          "handle slow network conditions gracefully",
-          "provide timeout fallback with retry option",
-          "display inline error messages near relevant fields",
-          "show toast notifications for global errors",
-          "include helpful error messages with suggested actions",
-          "use consistent error styling with red accent color",
-          "provide retry buttons for failed operations",
-          "log errors to console for debugging",
-          "support error boundary for graceful failure recovery",
-          "support full keyboard navigation throughout app",
-          "provide ARIA labels for all interactive elements",
-          "include skip links for main content areas",
-          "maintain focus indicators with high contrast",
-          "support screen reader announcements for dynamic changes",
-          "respect prefers-reduced-motion for animations",
-          "ensure color contrast meets WCAG AA standards",
-          "provide alt text for all decorative images and icons"
-        ]
-      }
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-type Query {
-  todos: [TodoState!]!
-  todoListSummary: [TodoListSummary!]!
-}
-
-type TodoState {
-  todoId: String!
-  description: String!
-  status: TodoStateStatus!
-  addedAt: DateTimeISO!
-  completedAt: DateTimeISO
-}
-
-enum TodoStateStatus {
-  PENDING
-  IN_PROGRESS
-  COMPLETED
-}
-
-"""
-A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the `date-time` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.This scalar is serialized to a string in ISO 8601 format and parsed from a string in ISO 8601 format.
-"""
-scalar DateTimeISO
-
-type TodoListSummary {
-  summaryId: String!
-  totalTodos: Float!
-  pendingCount: Float!
-  inProgressCount: Float!
-  completedCount: Float!
-  completionPercentage: Float!
-}
-
-type Mutation {
-  addTodo(input: AddTodoInput!): MutationResponse!
-  markTodoComplete(input: MarkTodoCompleteInput!): MutationResponse!
-  markTodoInProgress(input: MarkTodoInProgressInput!): MutationResponse!
-}
-
-type MutationResponse {
-  success: Boolean!
-  error: MutationError
-}
-
-type MutationError {
-  type: String!
-  message: String
-}
-
-input AddTodoInput {
-  todoId: String!
-  description: String!
-}
-
-input MarkTodoCompleteInput {
-  todoId: String!
-}
-
-input MarkTodoInProgressInput {
-  todoId: String!
-}