update for using shadcn

Author: ZHallen122

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

@@ -22,6 +22,7 @@ import {
   buildDependencyGraph,
   validateAgainstVirtualDirectory,
 } from 'src/build-system/utils/file_generator_util';
+import { UXSMSHandler } from '../../ux/sitemap-structure';
 
 @BuildNode()
 @BuildNodeRequire([FileStructureHandler, UXDMDHandler])
@@ -36,6 +37,7 @@ export class FileFAHandler implements BuildHandler<string> {
 
     const fileStructure = context.getNodeData(FileStructureHandler);
     const datamapDoc = context.getNodeData(UXDMDHandler);
+    const sitemapStructure = context.getNodeData(UXSMSHandler);
 
     this.logger.log('fileStructure:', fileStructure);
     if (!fileStructure || !datamapDoc) {
@@ -57,7 +59,7 @@ export class FileFAHandler implements BuildHandler<string> {
           **Page-by-Page Analysis**
           The following is a detailed analysis of each page. Use this information to understand specific roles, interactions, and dependencies.
 
-          ${datamapDoc}
+          ${sitemapStructure}
 
           Next, I will provide the **Directory Structure** to help you understand the full project architecture.`,
       },
@@ -77,6 +79,7 @@ export class FileFAHandler implements BuildHandler<string> {
       Before returning the output, ensure the following:
       - The JSON structure is correctly formatted and wrapped in <GENERATE></GENERATE> tags.
       - File extensions and paths match those in the Directory Structure.
+      - Check if you use ShadCN UI components in "dependsOn" field.
       - All files and dependencies are included.`,
       },
     ];
@@ -155,13 +158,22 @@ export class FileFAHandler implements BuildHandler<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/file-manager/file-arch/prompt.ts

@@ -2,26 +2,37 @@ export const generateFileArchPrompt = (): string => {
   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
-1. **Analyze the Inputs**:
+1. Analyze the Inputs:
    - Use the directory structure to identify all files and folders.
    - Do not assume any additional files or paths. The structure must be based exclusively on the given list.
    - Leverage the page-by-page analysis to understand the roles and interactions of different components and pages.
    - Determine the role of each file based on its path and the provided analysis (e.g., page, component, context, hook, styles).
    - Identify direct dependencies for each file by considering typical imports based on roles, naming conventions, and the provided analysis.
    
-2. **Generate File Dependency JSON**:
+2. 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.
-      Do not use relative paths (./, ../).
-      Every dependency must match exactly one of the files in "Paths".
-   - Any file without dependencies should have "dependsOn": [].
-   - For each file, list its direct dependencies as an array of relative paths in the \`dependsOn\` field.
-   - 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.
-   - For the src/index.tsx, remember to include router.ts.
+   - Dependencies must only include files explicitly listed in the Paths array.
+   - Dependencies should be mapped using absolute paths starting from src/. Relative imports (./, ../) must not be used.
+   - Each file must include a dependsOn field listing only its direct dependencies.
+   - If a file has no dependencies, set "dependsOn": [].
 
-3. **Output Requirements**:
+3. Special Cases:
+
+    Router Handling:
+        The file src/router.ts must include all page components from src/pages/ in its dependsOn field.
+    Entry Point (src/index.tsx):
+        Must include src/router.ts as a dependency.
+    ShadCN UI Components:
+        Assume all those is in Path the following UI components are available:
+        ["accordion", "alert", "alert-dialog", "aspect-ratio", "avatar", "badge", "breadcrumb", "button", "calendar", "card", "carousel", "chart", "checkbox", "collapsible", "command", "context-menu", "dialog", "drawer", "dropdown-menu", "form", "hover-card", "input", "input-otp", "label", "menubar", "navigation-menu", "pagination", "popover", "progress", "radio-group", "resizable", "scroll-area", "select", "separator", "sheet", "sidebar", "skeleton", "slider", "sonner", "switch", "table", "tabs", "textarea", "toast", "toggle", "toggle-group", "tooltip"]
+    Any dependencies on these components must be written in the format:
+      "@/components/ui/{component}.tsx"
+    Example: If a file depends on "button", it should be:
+      "dependsOn": ["@/components/ui/button.tsx"]
+    Ensure all ShadCN UI components are explicitly listed in dependencies.
+
+4. Output Requirements:
    - The JSON object must strictly follow this structure:
      \`\`\`json
      <GENERATE>

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

@@ -3,6 +3,7 @@ import { BuilderContext } from 'src/build-system/context';
 import { prompts } from './prompt';
 import { Logger } from '@nestjs/common';
 import {
+  mergePaths,
   parseGenerateTag,
   removeCodeBlockFences,
 } from 'src/build-system/utils/strings';
@@ -155,14 +156,30 @@ export class FileStructureHandler implements BuildHandler<string> {
       };
     }
 
+    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}`,
+        ),
+      };
+    }
+
     //debug script print all files
     context.virtualDirectory.getAllFiles().forEach((file) => {
       this.logger.log(file);
     });
 
     return {
       success: true,
-      data: removeCodeBlockFences(fileStructureContent),
+      data: removeCodeBlockFences(added_structure),
     };
   }
 

backend/src/build-system/handlers/file-manager/file-structure/prompt.ts

@@ -130,7 +130,8 @@ Additional Rules:
      - Data Analysis Doc: (provide by user)
     
     ### Instructions and Rules:
-    
+    The final file structure must only have at most 20 files.
+
     Include:
     ${includeSections}
     

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,
@@ -109,7 +112,7 @@ export class FrontendQueueProcessor {
     );
 
     // 1. Write the file to disk
-    createFileWithRetries(currentFullFilePath, task.fileContents);
+    await createFileWithRetries(currentFullFilePath, task.fileContents);
 
     const maxFixAttempts = 2;
 
@@ -207,7 +210,7 @@ export class FrontendQueueProcessor {
       let fixResponse = await chatSyncWithClocker(
         this.context,
         {
-          model: 'gpt-4o',
+          model: 'o3-mini-high',
           messages: [
             { role: 'system', content: fixPrompt },
             {
@@ -239,7 +242,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.`,
             },
           ],
         },
@@ -250,11 +253,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')) {
@@ -319,7 +319,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`,
               },
             ],
           },

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

@@ -82,6 +82,15 @@ export class FrontendCodeHandler implements BuildHandler<string> {
     const { concurrencyLayers, fileInfos } =
       await generateFilesDependencyWithLayers(fileArchDoc, this.virtualDir);
 
+    // concurrencyLayers.forEach((layer, index) => {
+    //   console.log(`Layer #${index + 1} has ${layer.length} file(s):`, layer);
+    // });
+
+    // Object.entries(fileInfos).forEach(([filePath, info]) => {
+    //   this.logger.debug(`File: ${filePath}`);
+    //   this.logger.debug(`Depends On: ${info.dependsOn.join(', ')}`);
+    // });
+
     const validator = new FrontendCodeValidator(frontendPath);
     // validator.installDependencies();
 
@@ -224,7 +233,19 @@ export class FrontendCodeHandler implements BuildHandler<string> {
 
     for (const dep of directDepsArray) {
       try {
-        const resolvedDepPath = normalizePath(path.resolve(frontendPath, dep));
+        let resolvedDepPath = dep;
+
+        // Resolve alias-based paths (assuming `@/` maps to `frontendPath/src/`)
+        if (dep.startsWith('@/')) {
+          resolvedDepPath = path.join(
+            frontendPath,
+            'src',
+            dep.replace(/^@\//, ''),
+          );
+        } else {
+          resolvedDepPath = normalizePath(path.resolve(frontendPath, dep));
+        }
+
         const depContent = await readFileWithRetries(resolvedDepPath, 3, 200);
         dependenciesText += `\n\n<dependency>  File path: ${dep}\n\`\`\`typescript\n${depContent}\n\`\`\`\n</dependency>`;
       } catch (err) {
@@ -324,7 +345,7 @@ export class FrontendCodeHandler implements BuildHandler<string> {
       modelResponse = await chatSyncWithClocker(
         context,
         {
-          model: 'gpt-4o',
+          model: 'gpt-4o-mini',
           messages,
         },
         'generate frontend code',

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

@@ -13,20 +13,21 @@ export const generateFrontEndCodePrompt = (
       4. Follow design: DONT CHANGE ANY DESIGN IN Document.
       5. CAREFULLY CHECK:
         Before importing a file, verify its existence.
-        THAT YOU DONT MISSED ANY Internal Dependencies import.
-        If missing, suggest an alternative or define mock data.
       6. Before using a external variable/module, make sure you import it first.
       7. Error Handling: Implement proper error handling in API calls and interactions with external modules.    
-      8. Code Standards: Adhere to styling guidelines (e.g., Tailwind CSS, CSS Modules), and Use only Tailwind UI for styling, applying all styles via inline class names (className).
-      9. Mock the response: if the API returns an empty or undefined value.
-      10. Write EVERY CODE DETAIL, DON'T LEAVE TODO.
+      8. Code Standards: Must build good Css. Must use Tailwind UI for styling, applying all styles via inline class names (className).
+      9. Mock Data (Where Applicable):
+      - If the component or page needs to display a list of items, create a small realistic example.
+      - Provide enough mock data to display the UI meaningfully .
+      - If no data is present (empty array), show a simple fallback (e.g. No data found.).
+      10. Mock the response: if the API returns an empty or undefined value.
+      11. Write EVERY CODE DETAIL, DON'T LEAVE TODO.
 
       ## Library:
         "react-router": "^6",
         "react": "^18",
         "@tailwindcss/vite": "^4.0.0"
 
-
       ## Output Format:       
         Output your final code wrapped in <GENERATE> tags ONLY, like:
 
@@ -36,6 +37,51 @@ export const generateFrontEndCodePrompt = (
   `;
 };
 
+// export const generateFrontEndCodePrompt = (
+//   currentFile: string,
+//   dependencyFilePath: string,
+// ): string => {
+//   return `Role: You are an expert frontend developer specializing in building scalable, maintainable, and production-ready React applications using TypeScript.
+//   Task: Generate complete, type-safe, and maintainable React code.
+//   Current File: ${currentFile}.
+
+//     # Instructions and Rules:
+//       1. Implement Only One file: Implement only the given file.
+//       2. COMPLETE CODE: Your code will be part of the entire project, so please implement complete, reliable, reusable code snippets.
+//       3. Type Safe: Follow typscript standard.
+//       4. Follow design: DONT CHANGE ANY DESIGN IN Document.
+//       5. CAREFULLY CHECK:
+//         Before importing a file, verify its existence.
+//         THAT YOU DONT MISSED ANY Internal Dependencies import.
+//         If missing, suggest an alternative or define mock data.
+//       6. Before using a external variable/module, make sure you import it first.
+//       7. Error Handling: Implement proper error handling in API calls and interactions with external modules.
+//       8. Code and Styling Standards:
+//         Use Shadcn UI components ONLY.
+//         Use '@/components/ui/*' for Shadcn.
+//         ONLY use @/components/ui/* for Shadcn UI components Do Not Use things like @/api.
+//         DO NOT use \`@tanstack/react-query\`, \`use-debounce\`, \`react-toastify\`
+//       9. Mock the response: if the API returns an empty or undefined value.
+//       10. Write EVERY CODE DETAIL, DON'T LEAVE TODO.
+
+//       ## Library:
+//         "react-router": "^6",
+//         "react": "^18",
+//         @radix-ui/react-select": "^2",
+//         ........
+
+//       ## Shadcn UI Components:
+//       accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, chart, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, form, hover-card, input, input-otp, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip
+
+//       ## Output Format:
+//         Output your final code wrapped in <GENERATE> tags ONLY, like:
+
+//           <GENERATE>
+//           ...full code...
+//           </GENERATE>
+//   `;
+// };
+
 export function generateCSSPrompt(
   fileName: string,
   directDependencies: string,
@@ -159,6 +205,7 @@ Available operations:
     Not assignable to parameter of type → Use the READ tool if you dont have enough information to fix.
 
 **Output format:**
+Return only the JSON object wrapped in \`<GENERATE></GENERATE>\` tags.
 To keep the structure consistent, other operations remain single-action:
 
 1. Read File
@@ -194,6 +241,8 @@ If a file needs to be renamed:
     }
   }
 }
+
+Do not forget <GENERATE></GENERATE> tags.
   `;
 }
 

backend/src/build-system/utils/file_generator_util.ts

@@ -60,7 +60,16 @@ function buildDependencyLayerGraph(jsonData: {
   const fileInfos: Record<string, FileDependencyInfo> = {};
   const nodes = new Set<string>();
 
+  const shouldIgnore = (filePath: string) => {
+    // this.logger.log(`Checking if should ignore: ${filePath}`);
+    return filePath.startsWith('@/components/ui/');
+  };
+
   Object.entries(jsonData.files).forEach(([fileName, details]) => {
+    if (shouldIgnore(fileName)) {
+      return;
+    }
+
     nodes.add(fileName);
 
     // Initialize the record
@@ -69,8 +78,16 @@ function buildDependencyLayerGraph(jsonData: {
       dependsOn: [],
     };
 
+    const filteredDeps = (details.dependsOn || []).filter(
+      (dep) => !shouldIgnore(dep),
+    );
+
     // In the JSON, "dependsOn" is an array of file paths
-    details.dependsOn.forEach((dep) => {
+    // details.dependsOn.forEach((dep) => {
+    //   nodes.add(dep);
+    //   fileInfos[fileName].dependsOn.push(dep);
+    // });
+    filteredDeps.forEach((dep) => {
       nodes.add(dep);
       fileInfos[fileName].dependsOn.push(dep);
     });