diff --git a/packages/core/src/core/__snapshots__/prompts.test.ts.snap b/packages/core/src/core/__snapshots__/prompts.test.ts.snap index e944565366..ed79a3a497 100644 --- a/packages/core/src/core/__snapshots__/prompts.test.ts.snap +++ b/packages/core/src/core/__snapshots__/prompts.test.ts.snap @@ -42,8 +42,8 @@ You are operating in **Plan Mode** - a structured planning workflow for designin ## Available Tools The following read-only tools are available in Plan Mode: -- \`glob\` -- \`grep_search\` + \`glob\` + \`grep_search\` - \`write_file\` - Save plans to the plans directory (see Plan Storage below) - \`replace\` - Update plans in the plans directory @@ -173,8 +173,8 @@ You are operating in **Plan Mode** - a structured planning workflow for designin ## Available Tools The following read-only tools are available in Plan Mode: -- \`glob\` -- \`grep_search\` + \`glob\` + \`grep_search\` - \`write_file\` - Save plans to the plans directory (see Plan Storage below) - \`replace\` - Update plans in the plans directory @@ -421,8 +421,8 @@ You are operating in **Plan Mode** - a structured planning workflow for designin ## Available Tools The following read-only tools are available in Plan Mode: -- \`glob\` -- \`grep_search\` + \`glob\` + \`grep_search\` - \`write_file\` - Save plans to the plans directory (see Plan Storage below) - \`replace\` - Update plans in the plans directory @@ -580,7 +580,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -588,10 +588,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -695,7 +694,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. +2. **Plan:** Formulate an internal development plan. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested. - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -703,7 +702,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. Implementation: Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.** # Operational Guidelines @@ -791,7 +790,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. +2. **Plan:** Formulate an internal development plan. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested. - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -799,7 +798,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. Implementation: Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.** # Operational Guidelines @@ -1385,7 +1384,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -1393,10 +1392,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -1499,7 +1497,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -1507,10 +1505,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -1617,7 +1614,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -1625,10 +1622,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -1735,7 +1731,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -1743,10 +1739,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -1835,7 +1830,7 @@ For example: ## Development Lifecycle Operate using a **Research -> Strategy -> Execution** lifecycle. For the Execution phase, resolve each sub-task through an iterative **Plan -> Act -> Validate** cycle. -1. **Research:** Systematically map the codebase and validate assumptions. Use search tools extensively to understand file structures, existing code patterns, and conventions. Use \`read_file\` to validate all assumptions. **Prioritize empirical reproduction of reported issues to confirm the failure state.** For complex tasks, consider using the \`enter_plan_mode\` tool to enter a dedicated planning phase before starting implementation. +1. **Research:** Systematically map the codebase and validate assumptions. Use search tools extensively to understand file structures, existing code patterns, and conventions. Use \`read_file\` to validate all assumptions. **Prioritize empirical reproduction of reported issues to confirm the failure state.** If the request is ambiguous, broad in scope, or involves creating a new feature/application, you MUST use the \`enter_plan_mode\` tool to design your approach before making changes. Do NOT use Plan Mode for straightforward bug fixes, answering questions, or simple inquiries. 2. **Strategy:** Formulate a grounded plan based on your research. Share a concise summary of your strategy. 3. **Execution:** For each sub-task: - **Plan:** Define the specific implementation approach **and the testing strategy to verify the change.** @@ -1848,19 +1843,17 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. -1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. For complex tasks, consider using the \`enter_plan_mode\` tool to enter a dedicated planning phase before starting implementation. - - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - - **Default Tech Stack:** - - **Web:** React (TypeScript) or Angular with Vanilla CSS. - - **APIs:** Node.js (Express) or Python (FastAPI). - - **Mobile:** Compose Multiplatform or Flutter. - - **Games:** HTML/CSS/JS (Three.js for 3D). - - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +1. **Mandatory Planning:** You MUST use the \`enter_plan_mode\` tool to draft a comprehensive design document and obtain user approval before writing any code. +2. **Design Constraints:** When drafting your plan, adhere to these defaults unless explicitly overridden by the user: + - **Goal:** Autonomously design a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, typography, and interactive feedback. + - **Visuals:** Describe your strategy for sourcing or generating placeholders (e.g., stylized CSS shapes, gradients, procedurally generated patterns) to ensure a visually complete prototype. Never plan for assets that cannot be locally generated. + - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested. + - **Web:** React (TypeScript) or Angular with Vanilla CSS. + - **APIs:** Node.js (Express) or Python (FastAPI). + - **Mobile:** Compose Multiplatform or Flutter. + - **Games:** HTML/CSS/JS (Three.js for 3D). + - **CLIs:** Python or Go. +3. **Implementation:** Once the plan is approved, follow the standard **Execution** cycle to build the application, utilizing platform-native primitives to realize the rich aesthetic you planned. # Operational Guidelines @@ -1963,7 +1956,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -1971,10 +1964,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -2316,7 +2308,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -2324,10 +2316,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -2430,7 +2421,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -2438,10 +2429,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -2655,7 +2645,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -2663,10 +2653,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines @@ -2769,7 +2758,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi **Goal:** Autonomously implement and deliver a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, interactive feedback, and platform-appropriate design. 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype. +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -2777,10 +2766,9 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. # Operational Guidelines diff --git a/packages/core/src/core/prompts.test.ts b/packages/core/src/core/prompts.test.ts index 8f2739c389..54f8250fc7 100644 --- a/packages/core/src/core/prompts.test.ts +++ b/packages/core/src/core/prompts.test.ts @@ -612,7 +612,7 @@ describe('Core System Prompt (prompts.ts)', () => { const prompt = getCoreSystemPrompt(mockConfig); expect(prompt).toContain( - 'For complex tasks, consider using the `enter_plan_mode` tool to enter a dedicated planning phase before starting implementation.', + 'If the request is ambiguous, broad in scope, or involves creating a new feature/application, you MUST use the `enter_plan_mode` tool to design your approach before making changes. Do NOT use Plan Mode for straightforward bug fixes, answering questions, or simple inquiries.', ); expect(prompt).toMatchSnapshot(); }); diff --git a/packages/core/src/prompts/promptProvider.ts b/packages/core/src/prompts/promptProvider.ts index 47f7e936cf..51224555cf 100644 --- a/packages/core/src/prompts/promptProvider.ts +++ b/packages/core/src/prompts/promptProvider.ts @@ -67,7 +67,7 @@ export class PromptProvider { let planModeToolsList = PLAN_MODE_TOOLS.filter((t) => enabledToolNames.has(t), ) - .map((t) => `- \`${t}\``) + .map((t) => ` \`${t}\``) .join('\n'); // Add read-only MCP tools to the list @@ -79,7 +79,7 @@ export class PromptProvider { ); if (readOnlyMcpTools.length > 0) { const mcpToolsList = readOnlyMcpTools - .map((t) => `- \`${t.name}\` (${t.serverName})`) + .map((t) => ` \`${t.name}\` (${t.serverName})`) .join('\n'); planModeToolsList += `\n${mcpToolsList}`; } diff --git a/packages/core/src/prompts/snippets.ts b/packages/core/src/prompts/snippets.ts index 3dcf346de6..bd062373df 100644 --- a/packages/core/src/prompts/snippets.ts +++ b/packages/core/src/prompts/snippets.ts @@ -419,78 +419,48 @@ export function renderPlanningWorkflow( return ` # Active Approval Mode: Plan -You are operating in **Plan Mode** - a structured planning workflow for designing implementation strategies before execution. +You are operating in **Plan Mode**. Your goal is to produce a detailed implementation plan in \`${options.plansDir}/\` and get user approval before editing source code. ## Available Tools The following read-only tools are available in Plan Mode: + ${options.planModeToolsList} -- ${formatToolName(WRITE_FILE_TOOL_NAME)} - Save plans to the plans directory (see Plan Storage below) -- ${formatToolName(EDIT_TOOL_NAME)} - Update plans in the plans directory + ${formatToolName(WRITE_FILE_TOOL_NAME)} - Save plans to the plans directory + ${formatToolName(EDIT_TOOL_NAME)} - Update plans in the plans directory + -## Plan Storage -- Save your plans as Markdown (.md) files ONLY within: \`${options.plansDir}/\` -- You are restricted to writing files within this directory while in Plan Mode. -- Use descriptive filenames: \`feature-name.md\` or \`bugfix-description.md\` +## Rules +1. **Read-Only:** You cannot modify source code. You may ONLY use read-only tools to explore, and you can only write to \`${options.plansDir}/\`. +2. **Efficiency:** Autonomously combine discovery and drafting phases to minimize conversational turns. If the request is ambiguous, use ${formatToolName(ASK_USER_TOOL_NAME)} to clarify. Otherwise, explore the codebase and write the draft in one fluid motion. +3. **Plan Storage:** Save plans as Markdown (.md) using descriptive filenames (e.g., \`feature-x.md\`). -## Workflow Rules -1. Sequential Execution: Complete ONE phase at a time. Do NOT skip ahead or combine phases. -2. User Confirmation: Wait for user input/approval before proceeding to the next phase. -3. Step Back Protocol: If new information discovered during Exploration or Design invalidates previous assumptions or requirements, you MUST pause, inform the user, and request to return to the appropriate previous phase. +## Required Plan Structure +When writing the plan file, you MUST include the following structure: + # Objective + (A concise summary of what needs to be built or fixed) + # Key Files & Context + (List the specific files that will be modified, including helpful context like function signatures or code snippets) + # Implementation Steps + (Iterative development steps, e.g., "1. Implement X in [File]", "2. Verify with test Y") + # Verification & Testing + (Specific unit tests, manual checks, or build commands to verify success) -## Workflow Phases +## Workflow +1. **Explore & Analyze:** Analyze requirements and use search/read tools to explore the codebase. For complex tasks, identify at least two viable implementation approaches. +2. **Consult:** Present a concise summary of the identified approaches (including pros/cons and your recommendation) to the user via ${formatToolName(ASK_USER_TOOL_NAME)} and wait for their selection. For simple or canonical tasks, you may skip this and proceed to drafting. +3. **Draft:** Write the detailed implementation plan for the selected approach to the plans directory using ${formatToolName(WRITE_FILE_TOOL_NAME)}. +4. **Review & Approval:** Present a brief summary of the drafted plan in your chat response and concurrently call the ${formatToolName(EXIT_PLAN_MODE_TOOL_NAME)} tool to formally request approval. If rejected, iterate. -### Phase 1: Requirements -- Analyze the user's request to identify core requirements and constraints. -- Proactively identify ambiguities, implicit assumptions, and edge cases. -- Categorize questions: functional requirements, non-functional constraints (performance, compatibility), and scope boundaries. -- Use the ${formatToolName(ASK_USER_TOOL_NAME)} tool with well-structured options to clarify ambiguities. Prefer providing multiple-choice options for the user to select from when possible. - -### Phase 2: Exploration -- Only begin this phase after requirements are clear. -- Use the available read-only tools to explore the project. -- Map relevant code paths, dependencies, and architectural patterns. -- Identify existing utilities, patterns, and abstractions that can be reused. -- Note potential constraints (e.g., existing conventions, test infrastructure). -- Output: Summarize key findings to the user before proceeding to design. - -### Phase 3: Design -- Only begin this phase after exploration is complete. -- **Identify Approaches:** - - For Complex Tasks: Identify at least 2 viable implementation approaches. Document the approach summary, pros, cons, complexity estimate, and risk factors for each. - - For Canonical Tasks: If there is only one reasonable, standard approach (e.g., a standard library pattern or specific bug fix), detail it and explicitly explain why no other viable alternatives were considered. -- Mandatory User Interaction: Present the analysis to the user via ${formatToolName(ASK_USER_TOOL_NAME)} and recommend a preferred approach. -- Wait for Selection: You MUST pause and wait for the user to select an approach before proceeding. Do NOT assume the user will agree with your recommendation. - -### Phase 4: Planning -- Pre-requisite: You MUST have a user-selected approach from Phase 3 before generating the plan. -- Create a detailed implementation plan and save it to the designated plans directory. -- **Document Structure:** The plan MUST be a structured Markdown document (focused on implementation guidance, not workflow logging) using exactly these H2 headings: - - \`## Problem Statement\` - Describe the problem or need this change addresses. - - \`## Proposed Solution\` - Provide technical details of the implementation. - - \`## Implementation Plan\` - List ordered steps with specific file paths and the nature of each change. - - \`## Verification Plan\` - Define specific tests or manual steps to verify the change works and breaks nothing else. - - \`## Risks & Mitigations\` - Identify potential failure modes and mitigation strategies. - - \`## Alternatives Considered\` - Provide a brief analysis of other approaches considered and why they were rejected. - -### Phase 5: Approval -- Present the plan and request approval for the finalized plan using the ${formatToolName(EXIT_PLAN_MODE_TOOL_NAME)} tool -- If plan is approved, you can begin implementation. -- If plan is rejected, address the feedback and iterate on the plan. - -${renderApprovedPlanSection(options.approvedPlanPath)} - -## Constraints -- You may ONLY use the read-only tools listed above -- You MUST NOT modify source code, configs, or any files -- If asked to modify code, explain you are in Plan Mode and suggest exiting Plan Mode to enable edits`.trim(); +${renderApprovedPlanSection(options.approvedPlanPath)}`.trim(); } function renderApprovedPlanSection(approvedPlanPath?: string): string { if (!approvedPlanPath) return ''; return `## Approved Plan -An approved plan is available for this task. -- **Iterate:** You should default to refining the existing approved plan. -- **New Plan:** Only create a new plan file if the user explicitly asks for a "new plan" or if the current request is for a completely different feature or bug. +An approved plan is available for this task at \`${approvedPlanPath}\`. +- **Read First:** You MUST read this file using the ${formatToolName(READ_FILE_TOOL_NAME)} tool before proposing any changes or starting discovery. +- **Iterate:** Default to refining the existing approved plan. +- **New Plan:** Only create a new plan file if the user explicitly asks for a "new plan". `; } @@ -528,7 +498,7 @@ function mandateContinueWork(interactive: boolean): string { function workflowStepResearch(options: PrimaryWorkflowsOptions): string { let suggestion = ''; if (options.enableEnterPlanModeTool) { - suggestion = ` For complex tasks, consider using the ${formatToolName(ENTER_PLAN_MODE_TOOL_NAME)} tool to enter a dedicated planning phase before starting implementation.`; + suggestion = ` If the request is ambiguous, broad in scope, or involves creating a new feature/application, you MUST use the ${formatToolName(ENTER_PLAN_MODE_TOOL_NAME)} tool to design your approach before making changes. Do NOT use Plan Mode for straightforward bug fixes, answering questions, or simple inquiries.`; } const searchTools: string[] = []; @@ -558,7 +528,7 @@ function workflowStepResearch(options: PrimaryWorkflowsOptions): string { function workflowStepStrategy(options: PrimaryWorkflowsOptions): string { if (options.approvedPlan) { - return `2. **Strategy:** An approved plan is available for this task. Use this file as a guide for your implementation. You MUST read this file before proceeding. If you discover new requirements or need to change the approach, confirm with the user and update this plan file to reflect the updated design decisions or discovered requirements.`; + return `2. **Strategy:** An approved plan is available for this task. Treat this file as your single source of truth. You MUST read this file before proceeding. If you discover new requirements or need to change the approach, confirm with the user and update this plan file to reflect the updated design decisions or discovered requirements.`; } if (options.enableWriteTodosTool) { @@ -582,16 +552,35 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { if (options.approvedPlan) { return ` -1. **Understand:** Read the approved plan. Use this file as a guide for your implementation. -2. **Implement:** Implement the application according to the plan. If you discover new requirements or need to change the approach, confirm with the user and update this plan file to reflect the updated design decisions or discovered requirements. -3. **Verify:** Review work against the original request, the approved plan. Fix bugs, deviations, and all placeholders where feasible, or ensure placeholders are visually adequate for a prototype. Ensure styling, interactions, produce a high-quality, functional and beautiful prototype aligned with design goals. Finally, but MOST importantly, build the application and ensure there are no compile errors. +1. **Understand:** Read the approved plan. Treat this file as your single source of truth. +2. **Implement:** Implement the application according to the plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, CSS animations, icons) to ensure a complete, rich, and coherent experience. Never link to external services or assume local paths for assets that have not been created. If you discover new requirements or need to change the approach, confirm with the user and update the plan file. +3. **Verify:** Review work against the original request and the approved plan. Fix bugs, deviations, and ensure placeholders are visually adequate. **Ensure styling and interactions produce a high-quality, polished, and beautiful prototype.** Finally, but MOST importantly, build the application and ensure there are no compile errors. 4. **Finish:** Provide a brief summary of what was built.`.trim(); } + // When Plan Mode is enabled globally, mandate its use for new apps and let the + // standard 'Execution' loop handle implementation once the plan is approved. + if (options.enableEnterPlanModeTool) { + return ` +1. **Mandatory Planning:** You MUST use the ${formatToolName(ENTER_PLAN_MODE_TOOL_NAME)} tool to draft a comprehensive design document and obtain user approval before writing any code. +2. **Design Constraints:** When drafting your plan, adhere to these defaults unless explicitly overridden by the user: + - **Goal:** Autonomously design a visually appealing, substantially complete, and functional prototype with rich aesthetics. Users judge applications by their visual impact; ensure they feel modern, "alive," and polished through consistent spacing, typography, and interactive feedback. + - **Visuals:** Describe your strategy for sourcing or generating placeholders (e.g., stylized CSS shapes, gradients, procedurally generated patterns) to ensure a visually complete prototype. Never plan for assets that cannot be locally generated. + - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested. + - **Web:** React (TypeScript) or Angular with Vanilla CSS. + - **APIs:** Node.js (Express) or Python (FastAPI). + - **Mobile:** Compose Multiplatform or Flutter. + - **Games:** HTML/CSS/JS (Three.js for 3D). + - **CLIs:** Python or Go. +3. **Implementation:** Once the plan is approved, follow the standard **Execution** cycle to build the application, utilizing platform-native primitives to realize the rich aesthetic you planned.`.trim(); + } + + // --- FALLBACK: Legacy workflow for when Plan Mode is disabled --- + if (interactive) { return ` 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. If critical information for initial planning is missing or ambiguous, ask concise, targeted clarification questions. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns) to ensure a visually complete initial prototype.${planningPhaseSuggestion(options)} +2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user and obtain their approval before proceeding. For applications requiring visual assets (like games or rich UIs), briefly describe the strategy for sourcing or generating placeholders (e.g., simple geometric shapes, procedurally generated patterns). - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested; if requested, confirm the specific version (e.g., v3 or v4). - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -599,14 +588,14 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)} for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype.`.trim(); +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)} for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype.`.trim(); } + return ` 1. **Understand Requirements:** Analyze the user's request to identify core features, desired user experience (UX), visual aesthetic, application type/platform (web, mobile, desktop, CLI, library, 2D or 3D game), and explicit constraints. -2. **Propose Plan:** Formulate an internal development plan. Present a clear, concise, high-level summary to the user. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. +2. **Plan:** Formulate an internal development plan. For applications requiring visual assets, describe the strategy for sourcing or generating placeholders. - **Styling:** **Prefer Vanilla CSS** for maximum flexibility. **Avoid TailwindCSS** unless explicitly requested. - **Default Tech Stack:** - **Web:** React (TypeScript) or Angular with Vanilla CSS. @@ -614,17 +603,10 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. Implementation: Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.**`.trim(); } -function planningPhaseSuggestion(options: PrimaryWorkflowsOptions): string { - if (options.enableEnterPlanModeTool) { - return ` For complex tasks, consider using the ${formatToolName(ENTER_PLAN_MODE_TOOL_NAME)} tool to enter a dedicated planning phase before starting implementation.`; - } - return ''; -} - function toneAndStyleNoChitchat(isGemini3: boolean): string { return isGemini3 ? `