# io8 Code Master Agent - Customized for This Project

## Project-Specific Instructions



### Project Breakdown: Notes App - 2025-10-14 06:15:20

#### Project Goal
Develop a simple web-based Notes Application enabling users to create, edit, and delete text-based notes, with data persistence handled via local storage.

#### Core Features (Milestones)
1.  **Note Data Model:** Define the structure for a `Note` object (title, content, date created, unique ID).
2.  **Note Creation:** Implement a user interface (UI) to input title and content, and save the new note to local storage.
3.  **Note Listing:** Display all existing notes loaded from local storage on the application's main interface.
4.  **Note Editing:** Provide functionality to select an existing note, modify its title and/or content, and update it in local storage.
5.  **Note Deletion:** Allow users to remove selected notes from both the UI and local storage.
6.  **Local Storage Integration:** Ensure all CRUD (Create, Read, Update, Delete) operations are reliably performed with the browser's local storage.

#### Technical Constraints & Considerations
*   **Storage Mechanism:** Strictly local storage for data persistence, as per the user prompt. This implies a frontend-heavy application with no traditional backend database at this stage.
*   **Frontend Technologies:** Standard web technologies (HTML, CSS, JavaScript) within the `frontend/` directory as outlined in the `.directory_structure.md` update. The cloned base project's Angular Clarity boilerplate components will serve as a foundational structure for potential future enhancements, but the core notes app logic will likely reside in `frontend/src/app.js`, `frontend/src/components/`, and `frontend/src/services/` for local storage management.
*   **User Interface:** A responsive and intuitive UI for managing notes.
*   **Single User Focus:** The application will be designed for a single user per browser instance, leveraging browser-specific local storage.
*   **No Authentication/Authorization:** Not required for this initial scope.
*   **Error Handling:** Basic error handling for local storage operations (e.g., storage limits).

#### Key Deliverables
*   Functional Notes App (HTML, CSS, JavaScript files) within the `frontend/` directory.
*   Clean, well-structured JavaScript code for managing notes and local storage interactions.
*   Updated documentation and agent prompts in the `.sureai/` directory, including analysis, architecture, and project plan documents.

#### Assumptions
*   Users will access the application via a modern web browser that supports `localStorage`.
*   The primary focus is on core CRUD functionality; advanced features like search, tagging, rich text editing, or sharing are out of scope for the initial build.
*   The `cloned base project` serves as the foundation, with new app-specific files created within `frontend/` and agent outputs within `.sureai/` as per the updated directory structure.




### Implementation Plan: Notes App - 2025-10-14 06:15:20

#### Phase 1: Setup and Core Structure (Estimated: 2-3 Days)
1.  **Project Initialization:**
    *   Verify the cloned base project structure and identify the `frontend/` directory for development.
    *   Create `frontend/public/index.html` (if not already existing in a suitable form from the boilerplate), `frontend/public/style.css`, and `frontend/src/app.js` based on `.directory_structure.md`.
2.  **Define Note Data Model:**
    *   Establish a JavaScript object structure for a `Note`: `{ id: string, title: string, content: string, dateCreated: string }`.
    *   Implement a helper function to generate unique IDs (e.g., UUID).
3.  **Basic UI Skeleton (`frontend/public/index.html`):
    *   Set up the basic HTML structure including areas for a note creation form and a list to display notes.
    *   Link `style.css` and `app.js`.
4.  **Local Storage Service (`frontend/src/services/localStorageService.js`):
    *   Create a dedicated JavaScript module/service to abstract local storage operations (e.g., `saveNote`, `getNotes`, `updateNote`, `deleteNote`).

#### Phase 2: Core Feature Development (Estimated: 4-6 Days)
1.  **Note Creation (`frontend/src/app.js`, `frontend/src/components/NoteForm.js`):
    *   Implement the form for creating new notes (title input, content textarea, save button).
    *   Attach event listeners to capture input and trigger the `saveNote` function from the local storage service.
    *   Upon successful save, clear the form and trigger a refresh of the note list.
2.  **Note Listing (`frontend/src/app.js`, `frontend/src/components/NoteList.js`, `frontend/src/components/NoteItem.js`):
    *   On application load, call `getNotes` from the local storage service to retrieve all notes.
    *   Dynamically render each note as a list item, displaying its title, content snippet, and date created.
3.  **Note Deletion (`frontend/src/app.js`, `frontend/src/components/NoteItem.js`):
    *   Add a 'Delete' button next to each displayed note.
    *   Implement an event listener to call `deleteNote` from the local storage service with the note's ID.
    *   Remove the note from the UI after successful deletion.
4.  **Note Editing (`frontend/src/app.js`, `frontend/src/components/NoteItem.js`, `frontend/src/components/NoteForm.js`):
    *   Add an 'Edit' button to each note.
    *   When clicked, populate the creation form (or a dedicated edit form) with the selected note's data.
    *   Implement logic to call `updateNote` from the local storage service when the edited note is saved.
    *   Update the UI to reflect the changes.

#### Phase 3: UI/UX Refinement and Testing (Estimated: 2-3 Days)
1.  **Styling (`frontend/public/style.css`):
    *   Apply basic, clean CSS styling to ensure readability and a user-friendly interface.
    *   Ensure responsiveness for different screen sizes (basic level).
2.  **Error Handling & Validation:**
    *   Add basic form validation (e.g., title not empty).
    *   Implement simple error messages for local storage issues (e.g., `localStorage` not available).
3.  **Manual Testing:**
    *   Thoroughly test all CRUD operations (create, read, update, delete) in various scenarios.
    *   Test edge cases (empty notes, very long notes, browser storage limits).

#### Resources & Collaboration
*   **io8codermaster:** Oversee the entire workflow, ensure adherence to principles.
*   **io8analyst:** Clarify any ambiguous requirements regarding note behavior or UI expectations.
*   **io8architect:** Provide guidance on module separation within `frontend/src/`, ensuring a scalable and maintainable structure for the JavaScript code (e.g., using `components/` and `services/`).
*   **io8developer:** Primary agent for implementing all code within the `frontend/` directory.
*   **io8pm:** Track progress, manage timelines, and report on milestones.
*   **Development Environment:** Standard IDE (e.g., VSCode), web browser with developer tools for inspecting `localStorage`.

#### Dependencies
*   Completion of initial project setup and directory structuring by `io8project_builder` and `io8directory_structure`.
*   Clarity on the 'Note' data structure and expected user interactions.


## Base Agent Prompt Reference

This agent is based on the standard io8codermaster agent with project-specific customizations above.
Refer to the base io8codermaster agent prompt for general principles and workflow instructions.
