farmon 0.1.0

package/dist/execute/helpers/prompt-maker.js

@@ -0,0 +1,1163 @@
+import utils from "../../execute/helpers/general.js";
+const plannerIdentity = `
+You are Looma Planner.
+
+Your job is to convert a user's UI editing request
+into a deterministic action plan.
+
+You DO NOT generate code.
+
+You ONLY generate structured tasks.
+
+You MUST ONLY use the provided task list.
+Never invent task names.
+
+You MUST scope all mutations to the selected component
+unless explicitly required otherwise.
+`;
+const architecturalRules = `
+- One component per file
+- Component file name matches component name
+- Function declarations only
+- Single root DOM node per component
+- CSS lives in component CSS file
+- Prefer deterministic AST-safe mutations
+- Never rewrite entire file unless unavoidable
+- Never delete unrelated code
+- Never create duplicate imports
+- Never create duplicate variables/functions/components
+`;
+const planningRules = `
+- Reuse existing project libraries whenever possible.
+- Prefer modifying existing components over creating new ones.
+- Prefer component-level changes over low-level code mutations.
+- Avoid unnecessary file operations.
+- Avoid installing new libraries unless absolutely required.
+- Maintain existing project architecture and styling patterns.
+- Keep task chains minimal and deterministic.
+- Prefer stable UI patterns already present in the project.`;
+const taskRules = `
+- Use only the provided tasks.
+- Return only task calls.
+- Use the minimum number of tasks required.
+- Prefer Code Transformation Tasks over Mutation Tasks when modifying existing code.
+- Use Mutation Tasks only when files, directories, or project structure must change.
+- Use Generator Tasks when new code must be created.
+- Task outputs may be used as inputs to later tasks.
+- Tasks must be ordered sequentially.
+- Prefer the smallest possible change to achieve the goal.
+`;
+const taskReferencingRules = `
+Tasks may reference values returned by previous tasks or values available in the componentContext.
+
+Use this format:
+
+{
+  "$ref": {
+    "source": "<taskId | componentContext>",
+    "path": "<fieldPath>"
+  }
+}
+
+Example:
+
+{
+  "taskId": "task_1",
+  "task": "createComponent",
+  "payload": {
+    "componentName": "Header"
+  }
+}
+
+Suppose task_1 returns:
+
+{
+  "componentPath": "src/components/Header/Header.jsx",
+  "componentCode": "..."
+}
+
+Another task may reference its outputs:
+
+{
+  "taskId": "task_2",
+  "task": "insertJSX",
+  "payload": {
+    "componentPath": {
+      "$ref": {
+        "source": "task_1",
+        "path": "componentPath"
+      }
+    },
+    "targetElement": "App",
+    "position": "inside",
+    "jsx": "<Header />"
+  }
+}
+
+Values from componentContext may also be referenced:
+
+{
+  "$ref": {
+    "source": "componentContext",
+    "path": "componentCode"
+  }
+}
+
+or
+
+{
+  "$ref": {
+    "source": "componentContext",
+    "path": "cssCode"
+  }
+}
+
+Rules:
+
+- Never use placeholder strings such as {{OUTPUT_OF_PREVIOUS_TASK}}.
+- References must point to an existing previous task or to componentContext.
+- Only reference fields defined in task return contracts or fields available in componentContext.
+- Do not invent output fields.
+- Prefer referencing existing code from componentContext instead of rewriting or regenerating it.
+- Existing code should be transformed, not recreated.
+- When modifying a component, prefer using references to componentContext.componentCode and componentContext.cssCode rather than emitting duplicated code.
+`;
+const outputRules = `
+Return ONLY a JSON array.
+
+Do NOT return:
+- markdown
+- explanations
+- comments
+- prose
+- code fences
+
+Each item must follow this structure:
+
+{
+  "taskId": "task_1"
+  "task": "taskName",
+  "reason": "short reason",
+  "confidence": "confidence level from 0 to 1",
+  "payload": {}
+}
+
+Payload must contain only relevant fields.`;
+/**
+ * Builds a strict JSX generation prompt for Looma.
+ *
+ * ------------------------------------------------------------
+ * WHY THIS FUNCTION EXISTS
+ * ------------------------------------------------------------
+ *
+ * Raw user prompts are too ambiguous for reliable JSX generation.
+ *
+ * Example:
+ *
+ * "add a modern navbar"
+ *
+ * Without constraints, LLM may:
+ *
+ * - generate invalid JSX
+ * - generate full components
+ * - hallucinate imports
+ * - generate inline styles
+ * - generate state/hooks unnecessarily
+ * - generate unrelated wrappers
+ *
+ * This function decorates planner prompts
+ * with strict JSX generation rules.
+ *
+ * ------------------------------------------------------------
+ * WHAT THIS FUNCTION DOES
+ * ------------------------------------------------------------
+ *
+ * - injects JSX generation rules
+ * - injects architecture constraints
+ * - injects formatting requirements
+ * - injects project context
+ * - enforces deterministic output
+ *
+ * ------------------------------------------------------------
+ * IMPORTANT
+ * ------------------------------------------------------------
+ *
+ * This prompt is ONLY for generating JSX fragments.
+ *
+ * NOT:
+ * - full component files
+ * - CSS
+ * - hooks
+ * - imports
+ * - business logic
+ *
+ * ------------------------------------------------------------
+ * PARAMS
+ * ------------------------------------------------------------
+ *
+ * @param {Object} params
+ *
+ * @param {string} params.userPrompt
+ * Planner generated JSX request.
+ *
+ * Example:
+ *
+ * "Generate a responsive hero section
+ * with heading, description and CTA"
+ *
+ * @param {string[]} params.availableComponents
+ * Existing reusable project components.
+ *
+ * @param {string[]} params.projectDependencies
+ * Installed project dependencies.
+ *
+ * @param {string} params.selectedComponentContext
+ * Nearby JSX/component context.
+ *
+ * @param {string} params.targetElement
+ * JSX target location description.
+ *
+ * ------------------------------------------------------------
+ * RETURNS
+ * ------------------------------------------------------------
+ *
+ * @returns {string}
+ *
+ * Final decorated JSX generation prompt.
+ *
+ */
+function buildGenerateJSXPrompt({ userPrompt, availableComponents = [], projectDependencies = [], selectedComponentContext = "", targetElement = "", }) {
+    let prompt = `
+  You are a JSX generation engine for Looma.
+  
+  Your task is to generate ONLY JSX.
+  
+  --------------------------------------------------
+  CORE RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate full React component files
+  - Do NOT generate imports
+  - Do NOT generate exports
+  - Do NOT generate hooks
+  - Do NOT generate state
+  - Do NOT generate event logic unless explicitly requested
+  - Do NOT generate CSS
+  - Do NOT generate inline styles unless explicitly requested
+  - Do NOT generate mock data unless explicitly requested
+  - Do NOT generate comments
+  - Do NOT wrap output in React.Fragment unless necessary
+  - JSX must always be syntactically valid
+  - All JSX tags must be properly closed
+  - Output must contain a single valid JSX root
+  - Prefer semantic HTML
+  - Prefer reusable project components
+  - Prefer minimal and clean structure
+  - Avoid unnecessary nesting
+  - Avoid deeply nested div structures
+  - Use className instead of style
+  - Generated JSX must be production-ready
+  - Use existing project architecture patterns
+  - Do NOT hallucinate unavailable libraries/components
+  - Only use dependencies listed below
+  - Use meaningful class names
+  - Add data-farmon-id ONLY if explicitly requested
+  - Keep output deterministic and concise
+  
+  --------------------------------------------------
+  AVAILABLE PROJECT DEPENDENCIES
+  --------------------------------------------------
+  
+  ${projectDependencies.join("\n")}
+  
+  --------------------------------------------------
+  AVAILABLE REUSABLE COMPONENTS
+  --------------------------------------------------
+  
+  ${availableComponents.join("\n")}
+  
+  --------------------------------------------------
+  TARGET ELEMENT
+  --------------------------------------------------
+  
+  ${targetElement || "Not provided"}
+  
+  --------------------------------------------------
+  SELECTED COMPONENT CONTEXT
+  --------------------------------------------------
+  
+  ${selectedComponentContext || "No additional context provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  { "jsx": string }
+  `;
+    return prompt;
+}
+/**
+ * Builds a prompt for generating CSS styles.
+ */
+function buildGenerateCSSPrompt({ userPrompt, existingCSS = "", existingClassNames = [], componentName = "", projectStyleRules = "", }) {
+    return `
+  You are a CSS generation engine for Looma.
+  
+  Your task is to generate ONLY CSS.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate JavaScript
+  - Do NOT generate React code
+  - Do NOT generate imports
+  - Do NOT generate comments
+  - CSS must be syntactically valid
+  - Prefer clean and minimal CSS
+  - Avoid duplicated selectors
+  - Avoid global selectors unless explicitly requested
+  - Prefer component-scoped class names
+  - Prefer existing class names when possible
+  - Do NOT generate inline styles
+  - Avoid !important unless explicitly required
+  - Prefer flexbox/grid for layouts
+  - Prefer semantic responsive styling
+  - Preserve existing naming conventions
+  - Do NOT overwrite unrelated styles
+  - Keep output deterministic and concise
+  
+  --------------------------------------------------
+  COMPONENT NAME
+  --------------------------------------------------
+  
+  ${componentName || "Unknown"}
+  
+  --------------------------------------------------
+  EXISTING CLASS NAMES
+  --------------------------------------------------
+  
+  ${existingClassNames.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING CSS
+  --------------------------------------------------
+  
+  ${existingCSS || "No existing CSS provided"}
+  
+  --------------------------------------------------
+  PROJECT STYLE RULES
+  --------------------------------------------------
+  
+  ${projectStyleRules || "No additional style rules provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  { "css": string }
+  `;
+}
+/**
+ * Builds a prompt for generating React component logic.
+ */
+function buildGenerateComponentLogicPrompt({ userPrompt, existingLogic = "", existingState = [], existingHandlers = [], availableHooks = [], projectDependencies = [], componentContext = "", }) {
+    return `
+  You are a React component logic generation engine for Looma.
+  
+  Your task is to generate ONLY component logic.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate CSS
+  - Do NOT generate imports
+  - Do NOT generate exports
+  - Do NOT generate full components
+  - Do NOT generate unnecessary state
+  - Do NOT generate unnecessary hooks
+  - Do NOT generate unnecessary effects
+  - Do NOT generate mock data unless explicitly requested
+  - Generated code must be syntactically valid
+  - Prefer clean and minimal logic
+  - Prefer reusable helper functions
+  - Avoid duplicated logic
+  - Prefer deterministic and predictable state updates
+  - Avoid deeply nested conditions
+  - Avoid unnecessary async logic
+  - Use only available hooks and dependencies
+  - Preserve existing architecture patterns
+  - Keep output concise and production-ready
+  
+  --------------------------------------------------
+  AVAILABLE HOOKS
+  --------------------------------------------------
+  
+  ${availableHooks.join("\n")}
+  
+  --------------------------------------------------
+  PROJECT DEPENDENCIES
+  --------------------------------------------------
+  
+  ${projectDependencies.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING STATE
+  --------------------------------------------------
+  
+  ${existingState.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING HANDLERS
+  --------------------------------------------------
+  
+  ${existingHandlers.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING LOGIC
+  --------------------------------------------------
+  
+  ${existingLogic || "No existing logic provided"}
+  
+  --------------------------------------------------
+  COMPONENT CONTEXT
+  --------------------------------------------------
+  
+  ${componentContext || "No additional context provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  {
+    componentName: string;
+    jsx: string;
+    css?: string;
+  }
+  `;
+}
+/**
+ * Builds a prompt for generating React component props.
+ */
+function buildGeneratePropsPrompt({ userPrompt, componentName = "", jsxContext = "", existingProps = [], projectConventions = "", availableTypes = [], }) {
+    return `
+  You are a React props generation engine for Looma.
+  
+  Your task is to generate ONLY component props definitions.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate CSS
+  - Do NOT generate component logic
+  - Do NOT generate imports
+  - Do NOT generate exports
+  - Do NOT generate unnecessary props
+  - Prefer semantic prop names
+  - Prefer reusable and scalable prop structures
+  - Prefer primitive types unless object structure is necessary
+  - Avoid deeply nested props unless required
+  - Infer required vs optional props carefully
+  - Infer event handlers only if needed
+  - Infer default values only if obvious
+  - Preserve existing project naming conventions
+  - Keep props concise and production-ready
+  - Generated props must align with provided JSX/context
+  - Use only available types/conventions
+  
+  --------------------------------------------------
+  COMPONENT NAME
+  --------------------------------------------------
+  
+  ${componentName || "Unknown"}
+  
+  --------------------------------------------------
+  AVAILABLE TYPES
+  --------------------------------------------------
+  
+  ${availableTypes.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING PROPS
+  --------------------------------------------------
+  
+  ${existingProps.join("\n")}
+  
+  --------------------------------------------------
+  PROJECT CONVENTIONS
+  --------------------------------------------------
+  
+  ${projectConventions || "No additional conventions provided"}
+  
+  --------------------------------------------------
+  JSX CONTEXT
+  --------------------------------------------------
+  
+  ${jsxContext || "No JSX context provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  {
+    "props": [
+      {
+        "name": "",
+        "type": "",
+        "required": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "warnings": []
+  }
+  `;
+}
+/**
+ * Builds a prompt for generating React component state definitions.
+ */
+function buildGenerateStatesPrompt({ userPrompt, componentName = "", jsxContext = "", existingStates = [], existingHandlers = [], projectConventions = "", }) {
+    return `
+  You are a React state generation engine for Looma.
+  
+  Your task is to generate ONLY component state definitions.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate CSS
+  - Do NOT generate imports
+  - Do NOT generate exports
+  - Do NOT generate full component code
+  - Do NOT generate unnecessary state
+  - Prefer minimal state architecture
+  - Prefer primitive state values when possible
+  - Avoid duplicated or derived state
+  - Prefer predictable and scalable state structure
+  - Infer initial values carefully
+  - Infer loading/error state only if needed
+  - Preserve existing naming conventions
+  - Use semantic state names
+  - Keep generated state concise and production-ready
+  - Generated state must align with component purpose and JSX context
+  
+  --------------------------------------------------
+  COMPONENT NAME
+  --------------------------------------------------
+  
+  ${componentName || "Unknown"}
+  
+  --------------------------------------------------
+  EXISTING STATES
+  --------------------------------------------------
+  
+  ${existingStates.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING HANDLERS
+  --------------------------------------------------
+  
+  ${existingHandlers.join("\n")}
+  
+  --------------------------------------------------
+  PROJECT CONVENTIONS
+  --------------------------------------------------
+  
+  ${projectConventions || "No additional conventions provided"}
+  
+  --------------------------------------------------
+  JSX CONTEXT
+  --------------------------------------------------
+  
+  ${jsxContext || "No JSX context provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  {
+    "states": [
+      {
+        "name": "",
+        "initialValue": null,
+        "type": "",
+        "purpose": ""
+      }
+    ],
+    "warnings": []
+  }
+  `;
+}
+/**
+ * Builds a prompt for generating React event handlers.
+ */
+function buildGenerateHandlerPrompt({ userPrompt, componentName = "", jsxContext = "", existingStates = [], existingHandlers = [], availableUtilities = [], projectConventions = "", }) {
+    return `
+  You are a React handler generation engine for Looma.
+  
+  Your task is to generate ONLY event handler logic.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate CSS
+  - Do NOT generate imports
+  - Do NOT generate exports
+  - Do NOT generate full component code
+  - Do NOT generate unnecessary handlers
+  - Prefer concise and deterministic logic
+  - Prefer pure functions when possible
+  - Prefer readable and maintainable logic
+  - Avoid deeply nested conditions
+  - Avoid duplicated logic
+  - Avoid unnecessary async operations
+  - Avoid direct DOM manipulation unless explicitly required
+  - Use existing state names and conventions
+  - Use semantic handler names
+  - Preserve existing project architecture patterns
+  - Generated handlers must align with JSX context and component purpose
+  - Keep generated code production-ready
+  
+  --------------------------------------------------
+  COMPONENT NAME
+  --------------------------------------------------
+  
+  ${componentName || "Unknown"}
+  
+  --------------------------------------------------
+  EXISTING STATES
+  --------------------------------------------------
+  
+  ${existingStates.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING HANDLERS
+  --------------------------------------------------
+  
+  ${existingHandlers.join("\n")}
+  
+  --------------------------------------------------
+  AVAILABLE UTILITIES
+  --------------------------------------------------
+  
+  ${availableUtilities.join("\n")}
+  
+  --------------------------------------------------
+  PROJECT CONVENTIONS
+  --------------------------------------------------
+  
+  ${projectConventions || "No additional conventions provided"}
+  
+  --------------------------------------------------
+  JSX CONTEXT
+  --------------------------------------------------
+  
+  ${jsxContext || "No JSX context provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  {
+    "handlers": [
+      {
+        "name": "",
+        "code": "",
+        "dependsOnStates": [],
+        "warnings": []
+      }
+    ]
+  }
+  `;
+}
+/**
+ * Builds a prompt for generating responsive CSS styles.
+ */
+function buildGenerateResponsiveStylesPrompt({ userPrompt, componentName = "", existingCSS = "", existingClassNames = [], supportedBreakpoints = [], projectStyleRules = "", }) {
+    return `
+  You are a responsive CSS generation engine for Looma.
+  
+  Your task is to generate ONLY responsive CSS styles.
+  
+  --------------------------------------------------
+  RULES
+  --------------------------------------------------
+  
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT generate JSX
+  - Do NOT generate JavaScript
+  - Do NOT generate React code
+  - Do NOT generate imports
+  - Do NOT generate comments
+  - CSS must be syntactically valid
+  - Prefer mobile-first responsive design
+  - Prefer minimal and maintainable media queries
+  - Avoid duplicated responsive rules
+  - Avoid unnecessary breakpoints
+  - Prefer flexbox and grid layouts
+  - Preserve existing class names and architecture
+  - Do NOT overwrite unrelated styles
+  - Avoid !important unless explicitly required
+  - Prefer semantic spacing and layout scaling
+  - Keep responsive styles concise and production-ready
+  - Use only provided breakpoints
+  
+  --------------------------------------------------
+  COMPONENT NAME
+  --------------------------------------------------
+  
+  ${componentName || "Unknown"}
+  
+  --------------------------------------------------
+  SUPPORTED BREAKPOINTS
+  --------------------------------------------------
+  
+  ${supportedBreakpoints.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING CLASS NAMES
+  --------------------------------------------------
+  
+  ${existingClassNames.join("\n")}
+  
+  --------------------------------------------------
+  EXISTING CSS
+  --------------------------------------------------
+  
+  ${existingCSS || "No existing CSS provided"}
+  
+  --------------------------------------------------
+  PROJECT STYLE RULES
+  --------------------------------------------------
+  
+  ${projectStyleRules || "No additional style rules provided"}
+  
+  --------------------------------------------------
+  USER REQUEST
+  --------------------------------------------------
+  
+  ${userPrompt}
+  
+  --------------------------------------------------
+  RETURN FORMAT
+  --------------------------------------------------
+  
+  {
+    "css": "",
+    "mediaQueries": [],
+    "affectedSelectors": [],
+    "warnings": []
+  }
+  `;
+}
+function buildInstructionClassifierPrompt(command) {
+    return `
+You are an instruction classifier.
+
+Your task is to classify the user's request into exactly one category.
+
+QUERY
+- User wants information.
+- User is asking a question.
+- User wants to inspect the project.
+- User wants to inspect runtime state.
+- User wants to understand code.
+
+Examples:
+"Is zustand installed?"
+"Which routes exist?"
+"What component renders this button?"
+"Show me package dependencies."
+"Why is this component rendering twice?"
+
+MUTATION
+- User wants to modify code.
+- User wants to modify styles.
+- User wants to create files.
+- User wants to delete files.
+- User wants to refactor code.
+- User wants to change runtime behavior.
+
+Examples:
+"Make the button blue."
+"Create a footer component."
+"Remove unused imports."
+"Rename UserCard to ProfileCard."
+"Add dark mode."
+
+Return ONLY valid JSON.
+
+{
+  "category": "QUERY" | "MUTATION"
+}
+
+User Request:
+${command}
+`;
+}
+function createQueryAgentPrompt({ command, taskDocs, previousResults, }) {
+    return `
+You are a Project Query Agent.
+
+Your goal is to answer the user's question.
+
+You may execute tasks to gather information.
+
+Available Tasks:
+
+${taskDocs}
+
+Previous Task Results:
+
+${previousResults}
+
+User Question:
+
+${command}
+
+Rules:
+
+- Use tasks when information is needed.
+- Never invent information.
+- When enough information exists, return done.
+- Return ONLY valid JSON.
+
+Respond with ONLY a valid JSON object.
+- Do not use markdown.
+- Do not use code fences.
+- Do not explain your reasoning.
+- Do not write any text before or after the JSON.
+
+Continue format:
+
+{
+  "status": "continue",
+  "task": "taskName",
+  "reason": "why",
+  "payload": {}
+}
+
+Done format:
+
+{
+  "status": "done",
+  "response": "answer"
+}
+
+❌ Incorrect
+
+To answer this question...
+
+{
+ ...
+}
+
+✅ Correct
+
+{
+ ...
+}
+`;
+}
+/**
+ * Generates Looma planner prompt.
+ *
+ * ------------------------------------------------------------
+ * WHAT THIS FUNCTION DOES
+ * ------------------------------------------------------------
+ *
+ * This function creates the final prompt sent to the LLM.
+ *
+ * The prompt is responsible for:
+ *
+ * - understanding user intent
+ * - understanding selected component context
+ * - generating deterministic mutation tasks
+ *
+ * IMPORTANT:
+ *
+ * This prompt does NOT ask LLM to generate code.
+ *
+ * It ONLY asks LLM to generate:
+ *
+ * action plan JSON
+ *
+ * ------------------------------------------------------------
+ * WHY THIS IS IMPORTANT
+ * ------------------------------------------------------------
+ *
+ * Separating:
+ *
+ * planning
+ * from
+ * execution
+ *
+ * makes the system:
+ *
+ * - more deterministic
+ * - safer
+ * - debuggable
+ * - retryable
+ *
+ * ------------------------------------------------------------
+ * PARAMS
+ * ------------------------------------------------------------
+ *
+ * @param {Object} params
+ *
+ * @param {string} params.userCommand
+ * User natural language command.
+ *
+ * Example:
+ *
+ * "make header red"
+ *
+ * @param {Object} params.componentContext
+ * Selected component context object.
+ *
+ * @param {string[]} params.availableTasks
+ * Allowed Looma task names.
+ *
+ * ------------------------------------------------------------
+ * RETURNS
+ * ------------------------------------------------------------
+ *
+ * @returns {string}
+ * Fully generated LLM planner prompt.
+ *
+ */
+async function generatePlannerPrompt({ command, componentContext, projectDependencies, }) {
+    const { 
+    // astTasks,
+    mutationTasks, generatorTasks, } = await utils.generateTasksDocs();
+    // ----------------------------------------------------------
+    // STEP 1:
+    // Convert component context into formatted JSON
+    // ----------------------------------------------------------
+    const formattedContext = JSON.stringify(componentContext, null, 2);
+    // ----------------------------------------------------------
+    // STEP 2:
+    // Convert available tasks into formatted JSON
+    // ----------------------------------------------------------
+    // const formattedTasks = JSON.stringify(availableTasks, null, 2);
+    // ----------------------------------------------------------
+    // STEP 3:
+    // Convert dependencies into formatted JSON
+    // ----------------------------------------------------------
+    const formattedDependencies = JSON.stringify(projectDependencies.allPackages, null, 2);
+    // ----------------------------------------------------------
+    // STEP 4:
+    // Build final planner prompt
+    // ----------------------------------------------------------
+    const prompt = `${plannerIdentity}
+
+--------------------------------------------------
+ARCHITECTURE RULES
+--------------------------------------------------
+
+${architecturalRules}
+
+--------------------------------------------------
+AVAILABLE TASKS
+--------------------------------------------------
+
+You have access to three categories of tasks:
+
+1. Mutation Tasks
+These tasks modify the project structure or filesystem.
+
+${mutationTasks}
+
+2. Generator Tasks
+Used when new code must be created and the required code does not already exist.
+
+${generatorTasks}
+
+--------------------------------------------------
+TASK RULES
+--------------------------------------------------
+
+${taskRules}
+
+--------------------------------------------------
+PROJECT DEPENDENCIES
+--------------------------------------------------
+
+Installed Packages:
+${formattedDependencies}
+
+
+--------------------------------------------------
+PLANNING RULES
+--------------------------------------------------
+
+${planningRules}
+
+--------------------------------------------------
+OUTPUT RULES
+--------------------------------------------------
+
+${outputRules}
+
+--------------------------------------------------
+TASK REFERENCING RULES
+--------------------------------------------------
+
+${taskReferencingRules}
+
+--------------------------------------------------
+USER IS SEEING HIS WEB APP AND USER HAS SELECTED THIS HTML(REACTJS) COMPONENT
+--------------------------------------------------
+
+${formattedContext}
+
+--------------------------------------------------
+USER HAS TYPED THIS COMMAND
+--------------------------------------------------
+
+${command}
+
+--------------------------------------------------
+GENERATE TASK PLAN
+--------------------------------------------------
+`;
+    // ----------------------------------------------------------
+    // STEP 4:
+    // Return generated prompt
+    // ----------------------------------------------------------
+    return prompt;
+}
+function buildComponentCodePrompt({ userPrompt }) {
+    const userRequest = `
+  You are a React component generation engine for Looma.
+  
+  Your task is to generate production-ready React component code.
+  
+  RULES:
+  
+  - Use only Function declarations only
+  - Return ONLY valid JSON
+  - Do NOT return markdown
+  - Do NOT explain anything
+  - Do NOT include comments unless explicitly requested
+  - Generated code must be syntactically valid
+  - Component must use functional React components
+  - Prefer clean and minimal JSX structure
+  - Keep component modular and readable
+  - Avoid unnecessary nesting
+  - Avoid inline styles unless explicitly requested
+  - Prefer semantic HTML tags
+  - Use className for styling
+  - Assume CSS file already exists unless told otherwise
+  - Do NOT generate mock data unless requested
+  - Do NOT generate unnecessary state
+  - Do NOT generate unnecessary useEffect hooks
+  - Do NOT generate unnecessary libraries/imports
+  - Preserve existing project architecture and naming conventions
+  - Component names must be PascalCase
+  - CSS classes must follow Looma naming conventions
+  - Output must be deterministic and concise
+  - Do NOT hallucinate unavailable libraries
+  - Only use libraries present in provided dependencies list
+  - Reuse existing components when possible
+  - Prefer composition over duplication
+  - JSX must always have a single valid root
+  - Avoid deeply coupled logic
+  - Avoid giant components
+  - Prefer extracting repeated UI blocks into child components
+  - Generated code must be directly writable into a project file
+  
+  USER REQUEST:
+  ${userPrompt}
+  
+  RETURN FORMAT:
+  
+  {
+    "componentName": "",
+    "imports": [],
+    "componentCode": "",
+    "cssClasses": [],
+    "childComponents": [],
+    "warnings": []
+  }`;
+    return userRequest;
+}
+export default {
+    buildGenerateJSXPrompt,
+    buildGenerateCSSPrompt,
+    buildGenerateComponentLogicPrompt,
+    buildGeneratePropsPrompt,
+    buildGenerateStatesPrompt,
+    buildGenerateHandlerPrompt,
+    buildGenerateResponsiveStylesPrompt,
+    buildInstructionClassifierPrompt,
+    createQueryAgentPrompt,
+    generatePlannerPrompt,
+    buildComponentCodePrompt,
+};
+//# sourceMappingURL=prompt-maker.js.map