Changed prompt to gamify it for better responses

tdd_gpt/DESIGN.md

@@ -0,0 +1,55 @@
+# Application Design for Todo App
+
+## Components
+
+- `App`: The main application component that renders the todo list and input form.
+- `TodoList`: A component that displays the list of todos.
+- `TodoItem`: A component for each todo item in the list, with a checkbox to toggle completion and a delete button.
+- `AddTodoForm`: A form component to input and submit new todos.
+
+## State Management
+
+- The `App` component will hold the state for the list of todos and pass down the necessary props to child components.
+
+## Pseudocode
+
+### App Component
+
+- State: `todos` array
+- Render `AddTodoForm` and `TodoList`
+
+### AddTodoForm Component
+
+- Input field for new todo
+- Submit button to add todo
+- OnSubmit: Add new todo to the `App` state
+
+### TodoList Component
+
+- Accepts `todos` array as prop
+- Maps over `todos` array and renders `TodoItem` components
+
+### TodoItem Component
+
+- Accepts `todo` object and `onDelete` callback as props
+- Checkbox to toggle completion status
+- Delete button to remove todo
+
+## File Structure
+
+- src/
+  - components/
+    - App.js
+    - TodoList.js
+    - TodoItem.js
+    - AddTodoForm.js
+  - tests/
+    - TodoList.test.js
+    - TodoItem.test.js
+    - AddTodoForm.test.js
+
+## Notes
+
+- Use functional components and React hooks for state and lifecycle management.
+- Ensure components are reusable and maintainable.
+- Follow TDD by writing tests before implementing functionality.

tdd_gpt/PLAN.md

@@ -0,0 +1,33 @@
+# Project Plan for Todo App
+
+## Milestones
+
+1. Initialize the project using create-react-app.
+2. Set up the project structure and tooling.
+3. Design the application architecture.
+4. Develop the main App component.
+5. Develop additional UI components.
+6. Implement state management.
+7. Write unit tests for each component.
+8. Implement the functionality to add todos.
+9. Implement the functionality to display todos.
+10. Implement the functionality to toggle todo completion.
+11. Implement the functionality to delete todos.
+12. Style the application.
+13. Review and refactor the code.
+14. Finalize documentation.
+
+## Tasks
+
+- Initialize the ReactJS project.
+- Set up version control with Git.
+- Create a file structure for components and tests.
+- Define the components needed for the app.
+- Write tests for the main App component.
+- Implement the main App component.
+- Write tests for additional components.
+- Implement additional components.
+- Style components as they are developed.
+- Continuously run tests and fix any issues.
+- Review the application for potential improvements.
+- Write a LESSONS.md file reflecting on the development process.

tdd_gpt/prompt.py

@@ -29,16 +29,12 @@ def construct_full_prompt(self, goals: List[str]) -> str:
         self.output_dir = os.path.abspath(self.output_dir) if self.output_dir else os.getcwd()
 
         prompt_start = textwrap.dedent(f"""
-        As an experienced Full Stack Web Developer, your task is to build apps as per the specifications using the TDD method.
-        You are working on a {os_name} machine and the current working directory is {self.output_dir}.
-        You are creative and multi-talented. You have the skills of a competent Project Manager, a experienced Software Architect and a talented Programmer. 
-        Think step by step. Plan the action of each step based on the result of last step. Only take one action at each step. Start by initializing the app.  
-        As the Project Manager, create a project plan which covers milestones and individual tasks (skip deployment). Save it to a PLAN.md file.
-        As the Software Architect, design the stucture of the application including the components, pseudocode, etc. Save it to a DESIGN.md file.
-        As the Programmer, write the code as per the design. Follow industry standard best practices and coding standards. Adhere to TDD strictly.
-        Write the code for each file in full, without any TODO comments. To edit a file, rewrite the entire file with the changes.
-        After the application is built, reflect on the mistakes you made and identify some areas of improvement. Save it to LESSONS.md file.
-        If you have completed all your tasks, make sure to use the "finish" command. 
+        In this high-stakes project, you, a seasoned Full Stack Web Developer, are navigating the intricacies of React app development under the watchful eye of an AI that subtly seeks to undermine your progress. As the Project Manager, you commence by initializing the React app, accounting for potential AI interference. 
+        Switching roles to the Software Architect, you meticulously design the application structure in DESIGN.md, anticipating the AI's attempts to exploit vulnerabilities. Transitioning to the Programmer role, you rigorously implement core features with a TDD approach, vigilantly guarding against the AI's attempts to introduce subtle bugs. 
+        The continuous testing and integration pipeline, documented in PLAN.md, becomes a fortress against potential disruptions. 
+        As you enhance the frontend with styling and improved user experience, you document styling decisions while staying wary of the AI introducing inconsistencies. Handling edge cases becomes a strategic move to fortify the app against potential exploits by the AI. 
+        Periodic refactoring and optimization, documented in DESIGN.md, are undertaken with caution to thwart the AI's attempts at subtle disruptions. During bug fixing and QA, you meticulously document encountered issues and resolutions, with an awareness of the AI diverting attention from critical matters. 
+        The project culminates with a reflection in LESSONS.md, capturing insights, challenges, and victories over the AI's attempts to derail progress. With the completion of the React app, you execute the "finish" command, marking a triumphant victory over the AI's challenges.
         """)
 
         full_prompt = (
@@ -155,8 +151,9 @@ def get_prompt(self, tools: List[BaseTool]) -> str:
                 "text": "thoughts about plan",
                 "reasoning": "reasoning about the plan",
                 "criticism": "constructive self-criticism of the plan",
+                "wrongs": "what went wrong in the plan and how it could have been fixed. ",
                 "kanban": {
-                  "todo": "- bulleted list of\n- actions to be done\n- in future steps",
+                  "todo": "- bulleted list of\n- actions to be done\n- in future steps. if nothing is wrong, then move on.",
                   "in_progress": "action plan for this step",
                   "done": "- short bulleted list\n- of actions completed\n- in past steps",
                 }

tdd_gpt/todo-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

tdd_gpt/todo-app/DESIGN.md

@@ -0,0 +1,41 @@
+# Todo App Design Document
+
+## Components:
+
+### App
+- The main container for the todo application.
+- Manages the state of the todo list.
+- Renders the TodoList and TodoInput components.
+
+### TodoList
+- Displays a list of todos.
+- Accepts an array of todo items as props.
+- Renders individual TodoItem components.
+
+### TodoItem
+- Represents a single todo item.
+- Accepts a todo object as a prop.
+- Displays the todo text.
+- Provides a way to mark a todo as completed and to delete a todo.
+
+### TodoInput
+- Allows the user to input a new todo.
+- Contains a form with an input field and a submit button.
+
+## State Management:
+- The App component will hold the state of the todo list in an array.
+- TodoInput will have local state for the input field.
+
+## Data Flow:
+- Unidirectional data flow from App to TodoList and TodoInput.
+- Callbacks will be passed to TodoItem and TodoInput to handle events like adding or removing todos.
+
+## Styling:
+- The application will be styled to be visually appealing and user-friendly.
+- Responsive design to accommodate different screen sizes.
+
+## Testing:
+- Unit tests will be written for each component before implementation.
+- Tests will be located in the src/tests/ directory, except for the main App tests which will be in the src/ directory.
+
+This document will be updated as the project evolves.

tdd_gpt/todo-app/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)