@auto-engineer/information-architect 0.9.12 → 0.10.0

package/package.json

@@ -14,13 +14,14 @@
   },
   "dependencies": {
     "fast-glob": "^3.3.2",
-    "@auto-engineer/ai-gateway": "0.9.12",
-    "@auto-engineer/message-bus": "0.9.12"
+    "@auto-engineer/ai-gateway": "0.10.0",
+    "@auto-engineer/message-bus": "0.10.0",
+    "@auto-engineer/flow": "0.10.0"
   },
   "devDependencies": {
-    "@auto-engineer/cli": "0.9.12"
+    "@auto-engineer/cli": "0.10.0"
   },
-  "version": "0.9.12",
+  "version": "0.10.0",
   "scripts": {
     "build": "tsc && tsx ../../scripts/fix-esm-imports.ts && cp src/auto-ux-schema.json dist/",
     "test": "vitest run --reporter=dot",

package/src/auto-ux-schema.json

@@ -183,6 +183,9 @@
                 "description": {
                   "type": "string"
                 },
+                "template": {
+                  "type": "string"
+                },
                 "layout": {
                   "type": "object",
                   "properties": {

package/src/commands/generate-ia.ts

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { processFlowsWithAI } from '../index';
 import { type UXSchema } from '../types';
 import createDebug from 'debug';
+import { Model } from '@auto-engineer/flow';
 
 const debug = createDebug('ia:generate-command');
 const debugSchema = createDebug('ia:generate-command:schema');
@@ -18,8 +19,8 @@ const __dirname = path.dirname(__filename);
 export type GenerateIACommand = Command<
   'GenerateIA',
   {
+    modelPath: string;
     outputDir: string;
-    flowFiles: string[];
   }
 >;
 
@@ -28,7 +29,6 @@ export type IAGeneratedEvent = Event<
   {
     outputPath: string;
     outputDir: string;
-    flowFiles: string[];
   }
 >;
 
@@ -37,30 +37,32 @@ export type IAGenerationFailedEvent = Event<
   {
     error: string;
     outputDir: string;
-    flowFiles: string[];
   }
 >;
 
 export type GenerateIAEvents = IAGeneratedEvent | IAGenerationFailedEvent;
 
-export const commandHandler = defineCommandHandler<GenerateIACommand>({
+export const commandHandler = defineCommandHandler<
+  GenerateIACommand,
+  (command: GenerateIACommand) => Promise<IAGeneratedEvent | IAGenerationFailedEvent>
+>({
   name: 'GenerateIA',
   alias: 'generate:ia',
   description: 'Generate Information Architecture',
   category: 'generate',
   icon: 'building',
+  events: ['IAGenerated', 'IAGenerationFailed'],
   fields: {
     outputDir: {
       description: 'Context directory',
       required: true,
     },
-    flowFiles: {
-      description: 'Flow files to analyze',
+    modelPath: {
+      description: 'Path to the model file',
       required: true,
-      // Note: flowFiles is an array, so it doesn't have a simple position
     },
   },
-  examples: ['$ auto generate:ia --output-dir=./.context --flow-files=./flows/*.flow.ts'],
+  examples: ['$ auto generate:ia --output-dir=./.context --model-path=./.context/schema.json'],
   handle: async (command: GenerateIACommand): Promise<IAGeneratedEvent | IAGenerationFailedEvent> => {
     const result = await handleGenerateIACommandInternal(command);
     if (result.type === 'IAGenerated') {
@@ -102,6 +104,12 @@ async function getAtomsFromMarkdown(designSystemDir: string): Promise<string[]>
   return components;
 }
 
+async function getModelFromContext(modelPath: string): Promise<Model> {
+  debug('Loading model from context: %s', modelPath);
+  const modelContent = await fs.readFile(modelPath, 'utf-8');
+  return JSON.parse(modelContent) as Model;
+}
+
 async function getUniqueSchemaPath(
   outputDir: string,
 ): Promise<{ filePath: string; existingSchema: object | undefined }> {
@@ -130,11 +138,10 @@ async function getUniqueSchemaPath(
 async function handleGenerateIACommandInternal(
   command: GenerateIACommand,
 ): Promise<IAGeneratedEvent | IAGenerationFailedEvent> {
-  const { outputDir, flowFiles } = command.data;
+  const { outputDir, modelPath } = command.data;
 
   debug('Handling GenerateIA command');
   debug('  Output directory: %s', outputDir);
-  debug('  Flow files: %d', flowFiles.length);
   debug('  Request ID: %s', command.requestId);
   debug('  Correlation ID: %s', command.correlationId ?? 'none');
 
@@ -142,22 +149,11 @@ async function handleGenerateIACommandInternal(
     // Load UX schema
     const uxSchemaPath = path.join(__dirname, '..', 'auto-ux-schema.json');
     debugSchema('Loading UX schema from: %s', uxSchemaPath);
-
     const uxSchemaContent = await fs.readFile(uxSchemaPath, 'utf-8');
     const uxSchema = JSON.parse(uxSchemaContent) as UXSchema;
     debugSchema('UX schema loaded successfully');
-
-    // Read all flow files
-    debugFiles('Reading %d flow files', flowFiles.length);
-    const flows: string[] = await Promise.all(
-      flowFiles.map(async (flow: string) => {
-        debugFiles('  Reading: %s', flow);
-        const content = await fs.readFile(flow, 'utf-8');
-        debugFiles('    Size: %d bytes', content.length);
-        return content;
-      }),
-    );
-    debugFiles('All flow files read successfully');
+    const model = await getModelFromContext(modelPath);
+    debugFiles('Reading %d flow files', model.flows.length);
 
     // Get unique schema path and existing schema
     const { filePath, existingSchema } = await getUniqueSchemaPath(outputDir);
@@ -170,11 +166,10 @@ async function handleGenerateIACommandInternal(
 
     // Generate IA schema using AI
     debug('Processing flows with AI...');
-    debug('  Flow count: %d', flows.length);
     debug('  Existing schema: %s', existingSchema ? 'yes' : 'no');
     debug('  Atom count: %d', atoms.length);
 
-    const iaSchema = await processFlowsWithAI(flows, uxSchema, existingSchema, atoms);
+    const iaSchema = await processFlowsWithAI(model, uxSchema, existingSchema, atoms);
     debug('AI processing complete');
 
     // Write the schema to file
@@ -191,7 +186,6 @@ async function handleGenerateIACommandInternal(
       data: {
         outputPath: filePath,
         outputDir,
-        flowFiles,
       },
       timestamp: new Date(),
       requestId: command.requestId,
@@ -211,7 +205,6 @@ async function handleGenerateIACommandInternal(
       data: {
         error: errorMessage,
         outputDir,
-        flowFiles,
       },
       timestamp: new Date(),
       requestId: command.requestId,

package/src/generate-ia-schema.ts

@@ -2,25 +2,97 @@ import { processFlowsWithAI } from './index';
 import uxSchema from './auto-ux-schema.json';
 import * as fs from 'fs/promises';
 import * as path from 'path';
+import { type Model } from '@auto-engineer/flow';
 
-async function getAtomsFromMarkdown(designSystemDir: string): Promise<string[]> {
+interface DesignSystemItem {
+  name: string;
+  description: string;
+}
+
+function determineSectionType(line: string): 'components' | 'layouts' | null {
+  if (line === '## Components') return 'components';
+  if (line === '## Layouts') return 'layouts';
+  return null;
+}
+
+function addItemToSection(
+  item: DesignSystemItem,
+  sectionType: 'components' | 'layouts',
+  components: DesignSystemItem[],
+  layouts: DesignSystemItem[],
+): void {
+  if (sectionType === 'components') {
+    components.push(item);
+  } else {
+    layouts.push(item);
+  }
+}
+
+function processLine(
+  line: string,
+  currentSection: 'components' | 'layouts' | null,
+  currentItem: DesignSystemItem | null,
+  components: DesignSystemItem[],
+  layouts: DesignSystemItem[],
+): { section: typeof currentSection; item: typeof currentItem } {
+  const trimmedLine = line.trim();
+
+  if (trimmedLine.startsWith('## ')) {
+    return {
+      section: determineSectionType(trimmedLine),
+      item: null,
+    };
+  }
+
+  if (trimmedLine.startsWith('### ') && currentSection) {
+    if (currentItem) {
+      addItemToSection(currentItem, currentSection, components, layouts);
+    }
+
+    return {
+      section: currentSection,
+      item: {
+        name: trimmedLine.replace(/^###\s+/, '').trim(),
+        description: '',
+      },
+    };
+  }
+
+  if (currentItem && trimmedLine.startsWith('Description: ')) {
+    currentItem.description = trimmedLine.replace(/^Description:\s+/, '').trim();
+  }
+
+  return { section: currentSection, item: currentItem };
+}
+
+async function getComponentsAndLayouts(
+  designSystemDir: string,
+): Promise<{ components: DesignSystemItem[]; layouts: DesignSystemItem[] }> {
   const mdPath = path.join(designSystemDir, 'design-system.md');
   let content: string;
   try {
     content = await fs.readFile(mdPath, 'utf-8');
   } catch {
-    return [];
+    return { components: [], layouts: [] };
   }
-  // Find all lines that start with '### ' and extract the component name
+
   const lines = content.split('\n');
-  const components: string[] = [];
+  const components: DesignSystemItem[] = [];
+  const layouts: DesignSystemItem[] = [];
+  let currentSection: 'components' | 'layouts' | null = null;
+  let currentItem: DesignSystemItem | null = null;
+
   for (const line of lines) {
-    const match = line.match(/^###\s+(.+)/);
-    if (match) {
-      components.push(match[1].trim());
-    }
+    const result = processLine(line, currentSection, currentItem, components, layouts);
+    currentSection = result.section;
+    currentItem = result.item;
+  }
+
+  if (currentItem && currentSection) {
+    addItemToSection(currentItem, currentSection, components, layouts);
   }
-  return components;
+
+  return { components, layouts };
 }
 
 async function getUniqueSchemaPath(
@@ -57,19 +129,32 @@ async function getUniqueSchemaPath(
   return { filePath, existingSchema };
 }
 
+async function getModelFromContext(outputDir: string): Promise<Model> {
+  const modelPath = path.join(outputDir, 'schema.json');
+  try {
+    const modelContent = await fs.readFile(modelPath, 'utf-8');
+    return JSON.parse(modelContent) as Model;
+  } catch (error) {
+    console.error(`Error reading model from ${modelPath}:`, error);
+    console.error('Please ensure the model schema.json exists in the output directory.');
+    process.exit(1);
+  }
+}
+
 async function main() {
-  const [, , outputDir, ...flowFiles] = process.argv;
+  const [, , outputDir] = process.argv;
   if (!outputDir) {
-    console.error('Usage: tsx src/generate-ia-schema.ts <output-dir> <flow-file-1> <flow-file-2> ...');
+    console.error('Usage: tsx src/generate-ia-schema.ts <output-dir>');
+    console.error('Note: The model schema.json must exist in the output directory.');
     process.exit(1);
   }
 
-  const flows: string[] = await Promise.all(flowFiles.map((flow) => fs.readFile(flow, 'utf-8')));
+  const model = await getModelFromContext(outputDir);
   const { filePath, existingSchema } = await getUniqueSchemaPath(outputDir);
-  const atomNames = await getAtomsFromMarkdown(outputDir);
-  const atoms = atomNames.map((name) => ({ name, props: [] }));
+  const { components: atomsNames } = await getComponentsAndLayouts(outputDir);
+  const atoms = atomsNames.map((atom) => ({ name: atom.name, props: [] }));
 
-  const iaSchema = await processFlowsWithAI(flows, uxSchema, existingSchema, atoms);
+  const iaSchema = await processFlowsWithAI(model, uxSchema, existingSchema, atoms);
 
   await fs.writeFile(filePath, JSON.stringify(iaSchema, null, 2));
   console.log(`Generated IA schema written to ${filePath}`);

package/src/ia-agent.ts

@@ -1,5 +1,6 @@
 import { generateTextWithAI, AIProvider } from '@auto-engineer/ai-gateway';
 import { type UXSchema, type AIAgentOutput } from './types.js';
+import { type Model } from '@auto-engineer/flow';
 
 function extractJsonFromMarkdown(text: string): string {
   return text.replace(/```(?:json)?\s*([\s\S]*?)\s*```/, '$1').trim();
@@ -22,17 +23,18 @@ export class InformationArchitectAgent {
   }
 
   async generateUXComponents(
-    flows: string[],
+    model: Model,
     uxSchema: UXSchema,
     existingSchema?: object,
     atoms?: { name: string; props: { name: string; type: string }[] }[],
+    // layouts?: { name: string; description: string }[],
   ): Promise<AIAgentOutput> {
-    const prompt = this.constructPrompt(flows, uxSchema, existingSchema, atoms);
+    const prompt = this.constructPrompt(model, uxSchema, existingSchema, atoms);
     try {
       const response = await generateTextWithAI(prompt, {
         provider: this.provider,
         temperature: 0.7,
-        maxTokens: 4096,
+        maxTokens: 4096 * 2,
       });
       if (!response) {
         throw new Error('No response from AI agent');
@@ -49,20 +51,21 @@ export class InformationArchitectAgent {
   }
 
   private constructPrompt(
-    flows: string[],
+    model: Model,
     uxSchema: UXSchema,
     existingSchema?: object,
     atoms?: { name: string; props: { name: string; type: string }[] }[],
+    // layouts?: { name: string; description: string }[],
   ): string {
     return `
-You are an expert UI architect and product designer. Given the following flows and UX schema, generate a detailed JSON specification for the application's UI components and pages.
+You are an expert UI architect and product designer. Given the following model (containing flows, messages, and integrations) and UX schema, generate a detailed JSON specification for the application's UI components and pages.
 
-IMPORTANT: Only generate pages and components that are directly referenced in the provided flows. Do NOT add any extra pages or components, and do NOT make assumptions outside the flows. If something is not mentioned in the flows, it should NOT appear in the output.
+IMPORTANT: Only generate pages and components that are directly referenced in the provided model's flows. Do NOT add any extra pages or components, and do NOT make assumptions outside the flows. If something is not mentioned in the flows, it should NOT appear in the output.
 IMPORTANT: try your best to reuse the existing atoms, and try not to generate atoms with context: like Submit Button, because the submit part is mainly irrelevant, instead just use the Button atom if provided.
 
 $${atoms ? `Here is a list of available atomic components (atoms) from the design system. Use these atoms and their props as much as possible. Only create new atoms if absolutely necessary. And only put the new atoms created into the schema. \n\nAtoms:\n${JSON.stringify(atoms, null, 2)}\n` : ''}
-Flows:
-${JSON.stringify(flows, null, 2)}
+System Model (flows, messages, integrations):
+${JSON.stringify(model, null, 2)}
 
 UX Schema:
 ${JSON.stringify(uxSchema, null, 2)}
@@ -70,6 +73,7 @@ ${JSON.stringify(uxSchema, null, 2)}
 ${existingSchema ? `Here is the current IA schema. Only add, update, or remove what is necessary based on the new flows and UX schema. Preserve what is still relevant and do not make unnecessary changes.\n\nCurrent IA Schema:\n${JSON.stringify(existingSchema, null, 2)}\n` : ''}
 Instructions:
 
+- NEVER generate any data_requirements queries or mutations if NONE were provided from the flow schema
 - Respond ONLY with a JSON object, no explanation, no markdown, no text before or after.
 - The JSON should have two main sections: "components" and "pages".
 - In "components", define composite UI elements (atoms, molecules, organisms) with:
@@ -87,11 +91,11 @@ Instructions:
 - In "pages", define each page as a key, with:
     - route (URL path)
     - description
-    - layout (listing the organisms used)
+    - template (what wrapper does the page use)
     - navigation (array of navigation actions, e.g., { "on": "Click Listing Card", "to": "ListingDetailPage" })
     - data_requirements (array, as above, for page-level data fetching)
-- For each component or page, if there are any specs defined in the flows using specs('ComponentOrPageName', ...), extract all should(...) statements from .client(() => { ... }) blocks and assign them as an array of strings to a 'specs' field for the corrosponding component/page.
-- Only include specs from .client(() => { ... }) blocks, not from server() or other blocks.
+- For each component or page, if there are any specs defined in the model's flow slices (look for slice.specs array where specs have context='client'), extract all spec descriptions and assign them as an array of strings to a 'specs' field for the corresponding component/page.
+- Only include specs where the context is 'client', not 'server' or other contexts.
 - If no specs are found for a component/page, omit the 'specs' field.
 
 Use the following structure as a template for your response:
@@ -128,7 +132,6 @@ Use the following structure as a template for your response:
     "PageName": {
       "route": "/route",
       "description": "What this page does.",
-      "layout": { "organisms": ["Organism1", "Organism2"] },
       "navigation": [{ "on": "Event", "to": "TargetPage" }],
       "data_requirements": [
         // ... as above
@@ -146,11 +149,12 @@ Do not include any text, explanation, or markdown—only the JSON object as desc
 }
 
 export async function processFlowsWithAI(
-  flows: string[],
+  model: Model,
   uxSchema: UXSchema,
   existingSchema?: object,
   atoms?: { name: string; props: { name: string; type: string }[] }[],
+  // layouts?: { name: string; description: string }[],
 ): Promise<AIAgentOutput> {
   const agent = new InformationArchitectAgent();
-  return agent.generateUXComponents(flows, uxSchema, existingSchema, atoms);
+  return agent.generateUXComponents(model, uxSchema, existingSchema, atoms);
 }