refactor(backend): optimization build system prompt, support more features

backend/src/build-system/__tests__/fullstack-gen.spec.ts

@@ -10,15 +10,15 @@ import { BuilderContext } from '../context';
 import { FrontendCodeHandler } from '../handlers/frontend-code-generate';
 import { FileStructureAndArchitectureHandler } from '../handlers/file-manager/file-struct';
 import { BackendRequirementHandler } from '../handlers/backend/requirements-document';
+import { UIUXLayoutHandler } from '../handlers/ux/uiux-layout';
 
 (isIntegrationTest ? describe : describe.skip)('Build Sequence Test', () => {
   it('should execute build sequence successfully', async () => {
     const sequence: BuildSequence = {
       id: 'test-backend-sequence',
       version: '1.0.0',
-      name: 'Wrtie a Cool personal website',
-      description:
-        'A personal blog website. I am a cybersecurity engineer so i want it to show i am a really cool hacker, with cool terminal functionality',
+      name: 'Wrtie a Single page Cool cybersecurity personal website',
+      description: `A Single page personal blog website. I am a cybersecurity engineer so i want it to show i am a really cool hacker, with cool terminal functionality`,
       databaseType: 'SQLite',
       model: 'gpt-4o-mini',
       projectSize: 'medium', // limit for fun
@@ -40,6 +40,11 @@ import { BackendRequirementHandler } from '../handlers/backend/requirements-docu
           name: 'UX Sitemap Structure Node',
           // requires: ['op:UX:SMD'],
         },
+        {
+          handler: UIUXLayoutHandler,
+          name: 'UIUX Layout Handler',
+          // requires: ['op:UX:SMD'],
+        },
         {
           handler: UXDMDHandler,
           name: 'UX DataMap Document Node',

backend/src/build-system/handlers/file-manager/file-struct/index.ts

@@ -6,6 +6,7 @@ import {
   removeCodeBlockFences,
   extractJsonFromText,
   formatResponse,
+  mergePaths,
 } from 'src/build-system/utils/strings';
 import { chatSyncWithClocker } from 'src/build-system/utils/handler-helper';
 import {
@@ -33,7 +34,7 @@ export const prompts = {
 
   Output Format:
   Return a JSON object in the following format:
-  Surround the JSON object with <GENERATE> tags.
+  You must surround the JSON object with <GENERATE> tags.
 
   <GENERATE>
   {
@@ -109,7 +110,7 @@ export const prompts = {
     switch (projectPart.toLowerCase()) {
       case 'frontend':
         roleDescription = 'an expert frontend developer';
-        includeSections = `
+        includeSections = `              
             Non-SPA Folder Structure example:
               src/
                 contexts/ - Global state management
@@ -121,8 +122,10 @@ export const prompts = {
                 ? `SPA Folder Structure (MANDATORY for all SPAs):
               src/
                 index.tsx - Main entry point that imports Home page
+                layout.tsx - Global Layout
                 pages/
                   Home/
+
                     index.tsx - Contains ALL component code and application logic
 
             For SPAs, you MUST use exactly this structure - no variations allowed.`
@@ -146,7 +149,7 @@ export const prompts = {
             ${
               isSPAFlag
                 ? `For SPAs:
-              - Only create the exact files specified: src/index.tsx and src/pages/Home/index.tsx
+              - Only create the exact files specified: src/index.tsx, layout.tsx and src/pages/Home/index.tsx
               - Do not create any additional files or folders`
                 : ''
             }
@@ -236,30 +239,37 @@ Output Format:
 
     return `Your task is to analyze the given project directory structure and create a detailed JSON object mapping file dependencies. The output JSON must be precisely formatted and wrapped in <GENERATE></GENERATE> tags.
 
-### Instructions
+# Instructions
 
   ${
     isSPAFlag
       ? `**SPA Special Case**:
-   - If the structure only contains src/index.tsx and src/pages/Home/index.tsx, this is a Single Page Application (SPA) with the mandatory minimal structure.
+   - If the structure only contains src/index.tsx and src/pages/Home/index.tsx, src/layout.tsx this is a Single Page Application (SPA) with the mandatory minimal structure.
    - For SPAs with this exact structure, the JSON must look like this:
      \`\`\`json
      <GENERATE>
      {
        "files": {
          "src/index.tsx": {
-           "dependsOn": ["src/pages/Home/index.tsx"]
+           "dependsOn": ["src/pages/Home/index.tsx", "src/layout.tsx"]
          },
          "src/pages/Home/index.tsx": {
            "dependsOn": []
-         }
+         },
+         "src/layout.tsx": {
+           "dependsOn": []
+         },
        }
      }
      </GENERATE>
      \`\`\` 
+
+   - IMPORTANT EXCEPTION FOR UI COMPONENTS: 
+     - Even in SPA mode, shadcn UI component dependencies ARE ALLOWED and SHOULD be added
+     - For the Home page, add appropriate shadcn UI dependencies from the available file structure
    - This is MANDATORY: for SPAs, create exactly these two files with exactly these dependencies - no more, no less.
 
-**For non-SPA projects**: `
+## For non-SPA projects: `
       : 'For projects'
   }
    - Analyze the directory structure to identify all files and folders.
@@ -269,7 +279,7 @@ Output Format:
    - Identify direct dependencies for each file by considering typical imports based on roles, naming conventions, and the provided analysis.
    - For context files, ensure they are properly referenced in index.tsx or router.tsx, as contexts typically need to be provided at a high level in the application.
 
-3. **Generate File Dependency JSON**:
+## Generate File Dependency JSON:
    - Each file must be represented using its full path starting from src/.
    - Ensure dependencies are strictly limited to files in the "Paths" array.
    - Use absolute file paths from "Paths" for all "dependsOn" values.
@@ -280,16 +290,54 @@ Output Format:
    - Organize the output in a \`files\` object where keys are file paths, and values are their dependency objects.
    - For the router, remember to include all the page components as dependencies, as the router imports them to define the application routes.
 
-4. **Output Requirements**:
+## UI Component Dependencies:
+   - This project uses the shadcn UI component library. 
+   - Components that likely need UI elements (forms, buttons, inputs, etc.) should include appropriate shadcn component dependencies.
+   - Shadcn components are imported with the syntax @/components/ui/[component-name].tsx
+   - Analyze component purposes carefully to determine which shadcn components they should depend on
+   - Examples:
+     - A data table component should depend on table.tsx
+     - A navigation component with dropdowns should depend on dropdown-menu.tsx
+
+## Balanced Dependency Approach:
+   - Most components should have 1-3 relevant UI dependencies
+   - Complex components (like forms or tables) may have more
+   - Simple components may have just one or even none
+
+## Global Components Usage:
+   - Consider how global components are used across pages.
+   - Global components (like navigation bars, footers, layouts) should be dependencies for all page components.
+   - For example, a Nav component should be included as a dependency for all page files.
+   - Ensure these global components are properly represented in the dependency tree for all relevant pages.
+
+## CRITICAL: STRICT DEPENDENCY VALIDATION
+
+1. Allowlist-Only Approach:
+   - Create an internal allowlist containing ONLY the exact file paths from the provided file structure
+   - EVERY dependency MUST EXACTLY match one of the paths in this allowlist
+   - NO EXCEPTIONS: If a logical UI component doesn't exist in the allowlist, DO NOT ADD IT
+
+2. Verification Process:
+   - After generating each file's dependencies, VERIFY each dependency against the allowlist
+   - If any dependency is not in the allowlist, REMOVE it immediately
+   - For UI components, ONLY use paths that are EXACTLY as listed in the file structure
+
+3. **Before Generating Output**:
+   - Perform a final validation pass to ensure EVERY dependency exists in the allowlist
+   - Remove ANY dependencies that don't have an exact match in the file structure
+
+This is mission-critical: The system will reject ANY file references that don't exactly match the provided structure.
+
+## Output Requirements:
    - The JSON object must strictly follow this structure:
      \`\`\`json
      <GENERATE>
      {
        "files": {
-         "src/path/to/file1": {
+         "src/index.tsx": {
            "dependsOn": ["src/path/to/dependency1", "src/path/to/dependency2"]
          },
-         "src/path/to/file2": {
+         "src/path/to/file1": {
            "dependsOn": []
          }
        }
@@ -301,14 +349,19 @@ Output Format:
      All dependencies must exist in the "Paths" array.
      No inferred or assumed files should be added.
    - Wrap the JSON output with \`<GENERATE></GENERATE>\` tags.
-### Notes
+
+## Notes
 - The \`dependsOn\` field should reflect logical dependencies inferred from both the directory structure and the page-by-page analysis.
 - Use common project patterns to deduce dependencies (e.g., pages depend on components, contexts, hooks, and styles).
 - Include all files in the output, even if they have no dependencies.
 - For context providers, ensure they are included as dependencies in either index.tsx or router.tsx to maintain proper context hierarchy in the React application.
+- Global components like navigation bars should appear as dependencies in all page components.
 - Include all files in the output, even if they have no dependencies.
 
-### Output
+## Validation Step
+Before finalizing, verify each UI component dependency against the complete list of available UI components. Remove any dependency that doesn't have an exact match in the file structure.
+
+## Output
 Return only the JSON object wrapped in \`<GENERATE></GENERATE>\` tags.
 Do not forget <GENERATE></GENERATE> tags.
 `;
@@ -349,6 +402,14 @@ export class FileStructureAndArchitectureHandler
       };
     }
 
+    // Calculate isSPA flag based on sitemap
+    const pageViewCount = (sitemapDoc.match(/page_view_/g) || []).length;
+    const isSPAFlag = pageViewCount === 1;
+
+    this.logger.log(`Is SPA: ${isSPAFlag}`);
+
+    context.setGlobalContext('isSPAFlag', isSPAFlag);
+
     const fileStructPrompt = prompts.generateCommonFileStructurePrompt(
       projectName,
       sitemapDoc,
@@ -457,6 +518,22 @@ export class FileStructureAndArchitectureHandler
       };
     }
 
+    let added_structure = '';
+    try {
+      added_structure = mergePaths(fileStructureJsonContent);
+      if (!added_structure) {
+        this.logger.error('Failed to add directory.' + added_structure);
+        throw new ResponseParsingError('Failed to add directory.');
+      }
+    } catch (error) {
+      return {
+        success: false,
+        error: new ResponseParsingError(
+          `Failed to add directory. ${error.message}`,
+        ),
+      };
+    }
+
     context.virtualDirectory.getAllFiles().forEach((file) => {
       this.logger.log(file);
     });
@@ -466,7 +543,7 @@ export class FileStructureAndArchitectureHandler
     this.logger.log('Generating File Architecture Document...');
 
     this.virtualDir = context.virtualDirectory;
-    const fileStructure = removeCodeBlockFences(fileStructureContent);
+    const fileStructure = removeCodeBlockFences(added_structure);
     if (!fileStructure || !datamapDoc) {
       return {
         success: false,
@@ -552,12 +629,17 @@ export class FileStructureAndArchitectureHandler
       }
 
       if (!this.validateJsonData(jsonData)) {
-        this.logger.error('File architecture JSON validation failed.');
+        this.logger.error(
+          'File architecture JSON validation failed.',
+          fileArchContent,
+        );
         throw new ResponseParsingError(
           'File architecture JSON validation failed.',
         );
       }
 
+      this.logger.debug(fileArchContent);
+
       const { nodes } = buildDependencyGraph(jsonData);
       invalidFiles = validateAgainstVirtualDirectory(nodes, this.virtualDir);
       if (invalidFiles) {
@@ -598,18 +680,32 @@ export class FileStructureAndArchitectureHandler
     }
   }
 
+  /**
+   * Validates the structure and content of the JSON data.
+   * @param jsonData The JSON data to validate.
+   * @returns A boolean indicating whether the JSON data is valid.
+   */
   private validateJsonData(jsonData: {
     files: Record<string, { dependsOn: string[] }>;
   }): boolean {
     const validPathRegex = /^[a-zA-Z0-9_\-/.]+$/;
 
+    const shouldIgnore = (filePath: string) => {
+      // this.logger.log(`Checking if should ignore: ${filePath}`);
+      return filePath.startsWith('@/components/ui/');
+    };
+
     for (const [file, details] of Object.entries(jsonData.files)) {
       if (!validPathRegex.test(file)) {
         this.logger.error(`Invalid file path: ${file}`);
         return false;
       }
 
       for (const dependency of details.dependsOn) {
+        if (shouldIgnore(dependency)) {
+          continue;
+        }
+
         if (!validPathRegex.test(dependency)) {
           this.logger.error(
             `Invalid dependency path "${dependency}" in file "${file}".`,

backend/src/build-system/handlers/frontend-code-generate/CodeReview.ts

@@ -17,7 +17,10 @@ import { readFileSync } from 'fs';
 import { chatSyncWithClocker } from 'src/build-system/utils/handler-helper';
 import { createFileWithRetries } from 'src/build-system/utils/files';
 import { BuilderContext } from 'src/build-system/context';
-import { removeCodeBlockFences } from 'src/build-system/utils/strings';
+import {
+  parseGenerateTag,
+  removeCodeBlockFences,
+} from 'src/build-system/utils/strings';
 import {
   generateCommonErrorPrompt,
   generateFileOperationPrompt,
@@ -227,7 +230,7 @@ export class FrontendQueueProcessor {
             },
             {
               role: 'assistant',
-              content: `Let me check my result and I must follow the output format.`,
+              content: `Let me check my result and I must follow the output format I shouldn't write explain outside the json.`,
             },
           ],
         },
@@ -238,11 +241,8 @@ export class FrontendQueueProcessor {
       this.logger.debug('Fix Response: ' + fixResponse);
       this.logger.debug('dependency file Paths ' + task.dependenciesPath);
       const parsed_fixResponse = removeCodeBlockFences(fixResponse);
-
-      let operations = fileOperationManager.parse(
-        parsed_fixResponse,
-        task.filePath,
-      );
+      const cleaned_Data = parseGenerateTag(parsed_fixResponse);
+      let operations = fileOperationManager.parse(cleaned_Data, task.filePath);
 
       // **If LLM requested additional files, read them**
       if (operations.some((op) => op.action === 'read')) {
@@ -307,7 +307,7 @@ export class FrontendQueueProcessor {
               },
               {
                 role: 'assistant',
-                content: `Let me check my result and I must follow the output format`,
+                content: `Let me check my result and I must follow the output format I shouldn't write explain outside the json`,
               },
             ],
           },