create-auto-app 1.34.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-auto-app",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "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": "1.34.0"
+    "@auto-engineer/id": "1.36.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/templates/typical/.gitignore

@@ -1,3 +1,3 @@
 .context
 # server*
-# client*
+client*

package/templates/typical/auto.config.ts

@@ -1,73 +1,7 @@
 import type { Event } from "@auto-engineer/message-bus";
 import { define } from "@auto-engineer/pipeline";
-
-interface SliceGeneratedData {
-	slicePath: string;
-}
-
-interface SliceImplementedData {
-	slicePath: string;
-}
-
-interface CheckEventData {
-	targetDirectory?: string;
-	errors?: string;
-}
-
-const MAX_RETRIES = 4;
-const sliceRetryState = new Map<string, number>();
-let projectRoot = "";
-
-function hasAnyFailures(events: Event[]): boolean {
-	return events.some((e) => e.type.includes("Failed"));
-}
-
-function collectErrors(events: Event[]): string {
-	return events
-		.filter((e) => e.type.includes("Failed"))
-		.map((e) => (e.data as CheckEventData).errors ?? "")
-		.filter((s) => s.length > 0)
-		.join("\n");
-}
-
-function extractSlicePath(events: Record<string, Event[]>): string {
-	const firstEvent =
-		events.CheckTests?.[0] ?? events.CheckTypes?.[0] ?? events.CheckLint?.[0];
-	const data = firstEvent?.data as CheckEventData | undefined;
-	return data?.targetDirectory ?? "";
-}
-
-function gatherAllCheckEvents(events: Record<string, Event[]>): Event[] {
-	return [
-		...(events.CheckTests ?? []),
-		...(events.CheckTypes ?? []),
-		...(events.CheckLint ?? []),
-	];
-}
-
-function shouldRetry(slicePath: string): boolean {
-	const attempts = sliceRetryState.get(slicePath) ?? 0;
-	return attempts < MAX_RETRIES;
-}
-
-function incrementRetryCount(slicePath: string): number {
-	const attempts = sliceRetryState.get(slicePath) ?? 0;
-	sliceRetryState.set(slicePath, attempts + 1);
-	return attempts + 1;
-}
-
-function resolvePath(relativePath: string): string {
-	if (projectRoot === "") {
-		return relativePath;
-	}
-	if (relativePath.startsWith("/")) {
-		return relativePath;
-	}
-	if (relativePath.startsWith("./")) {
-		return `${projectRoot}/${relativePath.slice(2)}`;
-	}
-	return `${projectRoot}/${relativePath}`;
-}
+import type { AllCheckFailedEvents } from "@auto-engineer/server-checks";
+import type { SliceImplementedEvent } from "@auto-engineer/server-implementer";
 
 export const fileId = "typical-example-1";
 
@@ -84,9 +18,21 @@ export const plugins = [
 
 export const pipeline = define("typical-example")
 	.on("PipelineStarted")
+	// should have a generate skeleton server here
+	.emit("InstallServerDependencies", () => ({}))
+	.emit("GenerateReactClient", () => ({
+		targetDir: resolvePath("./client"),
+	}))
+
+	.on("ServerDependenciesInstalled")
 	.emit("StartServer", () => ({
 		serverDirectory: resolvePath("./server"),
 	}))
+
+	.on("ReactClientGenerated")
+	.emit("InstallClientDependencies", () => ({}))
+
+	.on("ClientDependenciesInstalled")
 	.emit("StartClient", () => ({
 		clientDirectory: resolvePath("./client"),
 		command: "pnpm dev",
@@ -95,23 +41,28 @@ export const pipeline = define("typical-example")
 		storybookDirectory: resolvePath("./client"),
 	}))
 
+	.on("StorybookStarted")
+	.emit("BuildComponentDB", () => ({
+		baseDir: resolvePath("./client"),
+	}))
+
 	.on("SliceGenerated")
-	.emit("ImplementSlice", (e: { data: SliceGeneratedData }) => ({
+	.emit("ImplementSlice", (e: SliceImplementedEvent) => ({
 		slicePath: resolvePath(e.data.slicePath),
 		context: { previousOutputs: "", attemptNumber: 0 },
-		aiOptions: { maxTokens: 2000 },
+		// aiOptions: { maxTokens: 2000 },
 	}))
 
 	.on("SliceImplemented")
-	.emit("CheckTests", (e: { data: SliceImplementedData }) => ({
+	.emit("CheckTests", (e: SliceImplementedEvent) => ({
 		targetDirectory: e.data.slicePath,
 		scope: "slice",
 	}))
-	.emit("CheckTypes", (e: { data: SliceImplementedData }) => ({
+	.emit("CheckTypes", (e: SliceImplementedEvent) => ({
 		targetDirectory: e.data.slicePath,
 		scope: "slice",
 	}))
-	.emit("CheckLint", (e: { data: SliceImplementedData }) => ({
+	.emit("CheckLint", (e: SliceImplementedEvent) => ({
 		targetDirectory: e.data.slicePath,
 		scope: "slice",
 		fix: true,
@@ -147,17 +98,13 @@ export const pipeline = define("typical-example")
 				previousOutputs: collectErrors(allEvents),
 				attemptNumber: retryAttempt,
 			},
-			aiOptions: { maxTokens: 2000 },
+			// aiOptions: { maxTokens: 2000 },
 		});
 		return { persist: true };
 	})
 
-	.on("ServerGenerated")
-	.emit("GenerateReactClient", () => ({
-		targetDir: resolvePath("./client"),
-	}))
-
-	.declare("ProcessJobGraph").accepts(["ImplementReactComponent"])
+	.declare("ProcessJobGraph")
+	.accepts(["ImplementReactComponent"])
 
 	.on("GraphProcessed")
 	.emit("ImplementReactApp", () => ({
@@ -178,6 +125,9 @@ export const pipeline = define("typical-example")
 
 	.build();
 
+// ## ------------------------------
+// ## Helpers
+
 export function resetState(): void {
 	sliceRetryState.clear();
 	projectRoot = "";
@@ -195,3 +145,58 @@ export default {
 		enabled: false,
 	},
 };
+
+function hasAnyFailures(events: Event[]): boolean {
+	return events.some((e) => e.type.includes("Failed"));
+}
+
+function collectErrors(events: Event[]): string {
+	return events
+		.filter((e) => e.type.includes("Failed"))
+		.map((e) => (e.data as AllCheckFailedEvents["data"]).errors ?? "")
+		.filter((s) => s.length > 0)
+		.join("\n");
+}
+
+function extractSlicePath(events: Record<string, Event[]>): string {
+	const firstEvent =
+		events.CheckTests?.[0] ?? events.CheckTypes?.[0] ?? events.CheckLint?.[0];
+	const data = firstEvent?.data as AllCheckFailedEvents["data"] | undefined;
+	return data?.targetDirectory ?? "";
+}
+
+function gatherAllCheckEvents(events: Record<string, Event[]>): Event[] {
+	return [
+		...(events.CheckTests ?? []),
+		...(events.CheckTypes ?? []),
+		...(events.CheckLint ?? []),
+	];
+}
+
+function shouldRetry(slicePath: string): boolean {
+	const attempts = sliceRetryState.get(slicePath) ?? 0;
+	return attempts < MAX_RETRIES;
+}
+
+function incrementRetryCount(slicePath: string): number {
+	const attempts = sliceRetryState.get(slicePath) ?? 0;
+	sliceRetryState.set(slicePath, attempts + 1);
+	return attempts + 1;
+}
+
+const MAX_RETRIES = 4;
+const sliceRetryState = new Map<string, number>();
+let projectRoot = "";
+
+function resolvePath(relativePath: string): string {
+	if (projectRoot === "") {
+		return relativePath;
+	}
+	if (relativePath.startsWith("/")) {
+		return relativePath;
+	}
+	if (relativePath.startsWith("./")) {
+		return `${projectRoot}/${relativePath.slice(2)}`;
+	}
+	return `${projectRoot}/${relativePath}`;
+}

package/templates/typical/client/.gitignore

@@ -1,4 +0,0 @@
-node_modules
-dist
-*.local
-.DS_Store

package/templates/typical/client/.storybook/main.ts

@@ -1,66 +0,0 @@
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const managerHeadContent = readFileSync(
-	join(__dirname, "manager-head.html"),
-	"utf-8",
-);
-
-const isFastMode = process.env.STORYBOOK_FAST === "1";
-
-const config: StorybookConfig = {
-	stories: isFastMode
-		? ["../src/**/*.stories.@(ts|tsx)"]
-		: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
-	addons: [
-		...(isFastMode ? [] : [getAbsolutePath("@storybook/addon-docs")]),
-		{
-			name: getAbsolutePath("@storybook/addon-mcp"),
-			options: {
-				toolsets: {
-					dev: true,
-					docs: true,
-				},
-			},
-		},
-		getAbsolutePath("@vueless/storybook-dark-mode"),
-	],
-	staticDirs: ["../public"],
-	features: {
-		experimentalComponentsManifest: true,
-	},
-	core: {
-		disableWhatsNewNotifications: true,
-	},
-	framework: {
-		name: getAbsolutePath("@storybook/react-vite"),
-		options: {},
-	},
-	typescript: {
-		reactDocgen: isFastMode ? false : "react-docgen-typescript",
-		reactDocgenTypescriptOptions: {
-			tsconfigPath: join(__dirname, "../tsconfig.app.json"),
-		},
-	},
-	viteFinal: (config) => {
-		config.server = {
-			...config.server,
-			allowedHosts: [".worker.on.auto", ".worker-dev.on.auto"],
-		};
-		config.define = {
-			...config.define,
-			"import.meta.env.STORYBOOK_FAST": JSON.stringify(isFastMode),
-		};
-		return config;
-	},
-	managerHead: () => managerHeadContent,
-};
-
-export default config;
-
-function getAbsolutePath(value: string): any {
-	return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}

package/templates/typical/client/.storybook/manager-head.html

@@ -1,154 +0,0 @@
-<script>
-  (function() {
-    // Check localStorage for dark mode state before anything renders
-    var isDark = false;
-    try {
-      var stored = localStorage.getItem('sb-addon-themes-3');
-      if (stored) {
-        var parsed = JSON.parse(stored);
-        isDark = parsed && parsed.current === 'dark';
-      }
-    } catch(e) {}
-
-    // Also check URL parameter
-    var urlParams = new URLSearchParams(window.location.search);
-    var urlTheme = urlParams.get('theme');
-    if (urlTheme) {
-      isDark = urlTheme === 'dark';
-    }
-
-    // Apply matching theme background colors immediately (blue-tinted grays)
-    document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
-    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-
-    // Store theme state for CSS
-    document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-  })();
-</script>
-<style>
-  html, body {
-    transition: none !important;
-  }
-
-  /* Force sidebar and nav backgrounds - target the actual container divs */
-  #storybook-explorer-tree,
-  [class*="sidebar"],
-  [class*="Sidebar"],
-  nav[class],
-  aside[class] {
-    background-color: #f0f3f9 !important;
-  }
-
-  html[data-theme="dark"] #storybook-explorer-tree,
-  html[data-theme="dark"] [class*="sidebar"],
-  html[data-theme="dark"] [class*="Sidebar"],
-  html[data-theme="dark"] nav[class],
-  html[data-theme="dark"] aside[class] {
-    background-color: #1a1f2e !important;
-  }
-
-  /* Force toolbar/header backgrounds */
-  [class*="toolbar"],
-  [class*="Toolbar"],
-  [class*="bar"],
-  [class*="Bar"],
-  header[class] {
-    background-color: #f0f3f9 !important;
-  }
-
-  html[data-theme="dark"] [class*="toolbar"],
-  html[data-theme="dark"] [class*="Toolbar"],
-  html[data-theme="dark"] [class*="bar"],
-  html[data-theme="dark"] [class*="Bar"],
-  html[data-theme="dark"] header[class] {
-    background-color: #1a1f2e !important;
-  }
-
-  /* Force ALL sidebar text to dark gray instead of blue */
-  [data-nodetype],
-  [data-nodetype] * {
-    color: #2d3748 !important;
-  }
-
-  html[data-theme="dark"] [data-nodetype],
-  html[data-theme="dark"] [data-nodetype] * {
-    color: #e2e8f0 !important;
-  }
-
-  /* Sidebar selection styles - subtle background */
-  [data-nodetype="story"][data-selected="true"],
-  [data-nodetype="document"][data-selected="true"],
-  [data-nodetype="component"][data-selected="true"],
-  [data-nodetype="group"][data-selected="true"] {
-    background-color: #e2e8f0 !important;
-    border-radius: 0.5rem !important;
-  }
-
-  [data-nodetype="story"][data-selected="true"] *,
-  [data-nodetype="document"][data-selected="true"] *,
-  [data-nodetype="component"][data-selected="true"] *,
-  [data-nodetype="group"][data-selected="true"] * {
-    color: #1a202c !important;
-  }
-
-  /* Dark mode selected item */
-  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"],
-  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"],
-  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"],
-  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] {
-    background-color: #3d4663 !important;
-  }
-
-  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"] *,
-  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"] *,
-  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"] *,
-  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] * {
-    color: #f7fafc !important;
-  }
-
-  /* Hover state */
-  [data-nodetype="story"]:hover,
-  [data-nodetype="document"]:hover,
-  [data-nodetype="component"]:hover,
-  [data-nodetype="group"]:hover {
-    background-color: #edf2f7 !important;
-    border-radius: 0.5rem !important;
-  }
-
-  html[data-theme="dark"] [data-nodetype="story"]:hover,
-  html[data-theme="dark"] [data-nodetype="document"]:hover,
-  html[data-theme="dark"] [data-nodetype="component"]:hover,
-  html[data-theme="dark"] [data-nodetype="group"]:hover {
-    background-color: #2d3748 !important;
-  }
-
-  /* Selected hover - keep selected state */
-  [data-nodetype][data-selected="true"]:hover {
-    background-color: #e2e8f0 !important;
-  }
-
-  html[data-theme="dark"] [data-nodetype][data-selected="true"]:hover {
-    background-color: #3d4663 !important;
-  }
-</style>
-<script>
-(function() {
-  if (window.parent === window) return;
-  function notify() {
-    window.parent.postMessage({ type: 'iframe-url-change', url: location.href }, '*');
-  }
-  var pushState = history.pushState;
-  var replaceState = history.replaceState;
-  history.pushState = function() {
-    pushState.apply(this, arguments);
-    notify();
-  };
-  history.replaceState = function() {
-    replaceState.apply(this, arguments);
-    notify();
-  };
-  window.addEventListener('popstate', notify);
-  window.addEventListener('hashchange', notify);
-  notify();
-})();
-</script>

package/templates/typical/client/.storybook/manager.ts

@@ -1,164 +0,0 @@
-import { addons } from 'storybook/manager-api';
-import { create } from 'storybook/theming';
-import { STORY_CHANGED } from 'storybook/internal/core-events';
-import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
-
-// Get initial theme from localStorage (dark mode addon) or URL parameter
-const urlParams = new URLSearchParams(window.location.search);
-const urlTheme = urlParams.get('theme');
-const getStoredDarkMode = (): boolean => {
-  try {
-    const stored = localStorage.getItem('sb-addon-themes-3');
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      return parsed?.current === 'dark';
-    }
-  } catch {}
-  return false;
-};
-const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
-
-// Theme colors matching app's design with subtle blue tint
-// Analyzed from screenshots - app has slight blue undertone in grays
-
-const lightTheme = create({
-  base: 'light',
-  brandTitle: ' ',
-  brandUrl: '/',
-  brandImage: '/blank.svg',
-
-  // App background colors - matching your app's blue-tinted sidebar
-  appBg: '#f0f3f9',           // sidebar background (blue-tinted like your app)
-  appContentBg: '#ffffff',    // main content area
-  appPreviewBg: '#ffffff',    // preview/canvas background
-  appBorderColor: '#e2e8f0',  // borders (blue-tinted)
-  appBorderRadius: 10,        // 0.625rem = 10px
-
-  // Text colors - dark gray, not blue
-  textColor: '#2d3748',       // dark gray text for sidebar items
-  textMutedColor: '#718096',  // muted gray text
-  textInverseColor: '#f7fafc',// inverse text
-
-  // Toolbar/UI colors
-  barBg: '#f0f3f9',           // toolbar background (blue-tinted)
-  barTextColor: '#2d3748',    // toolbar text (dark gray)
-  barHoverColor: '#1a202c',   // toolbar hover
-  barSelectedColor: '#1a202c',// toolbar selected
-
-  // Form colors
-  inputBg: '#ffffff',         // input background
-  inputBorder: '#e2e8f0',     // input border
-  inputTextColor: '#2d3748',  // input text
-
-  // Button colors
-  buttonBg: '#edf2f7',        // button background
-  buttonBorder: '#e2e8f0',    // button border
-
-  // Boolean inputs
-  booleanBg: '#edf2f7',
-  booleanSelectedBg: '#2d3748',
-
-  // Grid colors for canvas
-  gridCellSize: 10,
-
-  // Color for links/interactive items - override the blue
-  colorPrimary: '#2d3748',
-  colorSecondary: '#4a5568',
-});
-
-const darkTheme = create({
-  base: 'dark',
-  brandTitle: ' ',
-  brandUrl: '/',
-  brandImage: '/blank.svg',
-
-  // App background colors - matching app's dark blue-tinted theme
-  appBg: '#1a1f2e',           // sidebar background (blue-tinted dark)
-  appContentBg: '#131620',    // main content area (darker)
-  appPreviewBg: '#131620',    // preview/canvas background
-  appBorderColor: '#2a3142',  // borders (blue-tinted)
-  appBorderRadius: 10,
-
-  // Text colors - light gray, not blue
-  textColor: '#e2e8f0',       // light gray text
-  textMutedColor: '#a0aec0',  // muted gray text
-  textInverseColor: '#1a1f2e',// inverse text
-
-  // Toolbar/UI colors
-  barBg: '#1a1f2e',           // toolbar background
-  barTextColor: '#e2e8f0',    // toolbar text (light gray)
-  barHoverColor: '#f7fafc',   // toolbar hover
-  barSelectedColor: '#f7fafc',// toolbar selected
-
-  // Form colors
-  inputBg: '#242938',         // input background
-  inputBorder: '#3d4663',     // input border
-  inputTextColor: '#e2e8f0',  // input text
-
-  // Button colors
-  buttonBg: '#242938',        // button background
-  buttonBorder: '#3d4663',    // button border
-
-  // Boolean inputs
-  booleanBg: '#242938',
-  booleanSelectedBg: '#e2e8f0',
-
-  // Grid colors for canvas
-  gridCellSize: 10,
-
-  // Color for links/interactive items - override the blue
-  colorPrimary: '#e2e8f0',
-  colorSecondary: '#a0aec0',
-});
-
-const customTheme = initialIsDark ? darkTheme : lightTheme;
-
-addons.setConfig({
-  theme: customTheme,
-  sidebar: {
-    collapsedRoots: ['ui-components'],
-  },
-  showPanel: false,
-});
-
-// Set default story to Design System Overview if no path specified
-if (!urlParams.has('path')) {
-  const newUrl = new URL(window.location.href);
-  newUrl.searchParams.set('path', '/story/design-system-overview--default');
-  window.history.replaceState({}, '', newUrl.toString());
-}
-
-// Register addon to handle navigation sync and theme after Storybook is ready
-addons.register('url-sync', (api) => {
-  const channel = api.getChannel();
-  if (!channel) return;
-
-  // Set initial dark mode state (pass string "dark" or "light", not boolean)
-  if (initialIsDark) {
-    channel.emit(UPDATE_DARK_MODE_EVENT_NAME, 'dark');
-  }
-
-  // Report navigation changes to parent window for URL bar sync
-  channel.on(STORY_CHANGED, (storyId: string) => {
-    if (window.parent !== window) {
-      window.parent.postMessage({ type: 'storybook-navigation', storyId }, '*');
-    }
-  });
-
-  // Listen for theme changes from parent window
-  window.addEventListener('message', (event) => {
-    if (event.data?.type === 'storybook-theme-change' && event.data?.theme) {
-      const isDark = event.data.theme === 'dark';
-      // Update the dark mode addon
-      channel.emit(UPDATE_DARK_MODE_EVENT_NAME, event.data.theme);
-      // Update the Storybook manager theme
-      addons.setConfig({
-        theme: isDark ? darkTheme : lightTheme,
-      });
-      // Update CSS theme selector and background
-      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-      document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
-      document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-    }
-  });
-});

package/templates/typical/client/.storybook/preview-head.html

@@ -1,31 +0,0 @@
-<script>
-  (function() {
-    var isDark = false;
-    var stored, parsed, urlParams, urlTheme;
-    try {
-      stored = localStorage.getItem('sb-addon-themes-3');
-      if (stored) {
-        parsed = JSON.parse(stored);
-        isDark = parsed && parsed.current === 'dark';
-      }
-    } catch(_) {}
-
-    urlParams = new URLSearchParams(window.location.search);
-    urlTheme = urlParams.get('theme');
-    if (urlTheme) {
-      isDark = urlTheme === 'dark';
-    }
-
-    if (isDark) {
-      document.documentElement.classList.add('dark');
-    }
-    // Dark: appContentBg=#222325, Light: #FFFFFF
-    document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
-    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-  })();
-</script>
-<style>
-  html, body {
-    transition: none;
-  }
-</style>