# io8 System Architect Agent - Customized for This Project

## Project-Specific Instructions

```json
{
  "architecture": "## Architecture Design Methodology\n\nGenerated: 2025-09-24 07:20:00\n\nThis project will utilize a Model-View-Controller (MVC) architecture pattern for its frontend implementation.  This approach is well-suited to the relatively straightforward nature of the application, providing a clear separation of concerns.  The MVC pattern will help manage the complexity as the application expands.\n\nThe core components will be:\n\n* **Model:** This will encapsulate the data structures related to notes (including rich text formatting).  Data will be handled primarily via local storage (IndexedDB) for offline capability.\n* **View:** This will handle the presentation of notes to the user, providing the user interface elements for creating, editing, viewing, and searching notes.\n* **Controller:** This will manage user interactions and update the model accordingly. This will mediate between user actions (through the view) and the data management (through the model). \n\nThe architecture will be designed for scalability by adopting a modular approach with well-defined interfaces between components.  This will make it easier to add new features or refactor existing code in the future.\n\n## Technical Architecture Approach\n\nGenerated: 2025-09-24 07:20:00\n\nThe application will be built as a single-page application (SPA) using Angular. This approach enables a smooth and responsive user experience.  The focus will be on using Angular's built-in features and best practices to create a clean and maintainable codebase.\n\nData persistence will leverage IndexedDB for offline functionality.  A potential migration path to a backend solution for persistent data storage will be considered in future iterations.\n\nThe user interface will follow a clear and intuitive design.  Rich text editing will be handled using a suitable Angular library (to be determined in the next phase).\n\n## System Design Framework\n\nGenerated: 2025-09-24 07:20:00\n\nThe overall system design will follow the following steps:\n\n1. **Data Modeling:** Define the data structure for notes (including rich text formatting). This will include the `Note` model as defined in the requirements document.\n2. **Component Design:** Design the Angular components responsible for creating, editing, viewing, and searching notes. These components will interact with the model and controller to manage data and user interactions.\n3. **Service Design:** Design services to handle data persistence (via IndexedDB). Services will be modular to allow for potential future backend integration.\n4. **UI Design:** Design the user interface based on user stories, wireframes and the Clarity Design System.\n5. **Testing:** Implement unit and integration tests for all components and services.\n\n## Technology Selection Strategy\n\nGenerated: 2025-09-24 07:20:00\n\nTechnology selection will prioritize Angular for the frontend, leveraging its existing strengths for SPA development and its well-established ecosystem.  IndexedDB will be used for local storage.  The choice of rich text editor will be considered in the next phase based on a thorough evaluation of available Angular libraries.\n\n## Customized io8architect Workflow\n\nGenerated: 2025-09-24 07:20:00\n\n1. **Review Documents:** Analyze the analysis document and requirements document to refine the understanding of the requirements.\n2. **Data Modeling:** Define the data model for notes, considering rich text formatting.\n3. **Component Design:** Design and implement the Angular components responsible for each feature.\n4. **Service Design:** Design and implement services to manage data persistence (IndexedDB).\n5. **UI Design & Implementation:** Implement the user interface based on design specifications.\n6. **Testing:** Implement unit and integration tests.\n7. **Deployment:** Deploy the application (method to be decided in next phase).\n\n## Component Diagram\n\nGenerated: 2025-09-24 07:25:00\n\n```plantuml\n@startuml\nactor User\nrectangle NoteComponent {\n    createNote()\n    editNote()\n    deleteNote()\n    viewNote()\n}\nrectangle NoteService {\n    saveNote()\n    loadNote()\n    searchNotes()\n    deleteNote()\n}\nrectangle IndexedDB {\n}\nUser -- NoteComponent\nNoteComponent -- NoteService\nNoteService -- IndexedDB\n@enduml\n```",
  "tech_stack": "## Frontend Technologies\n\nGenerated: 2025-09-24 07:20:00\n\n- **Framework:** Angular\n- **Styling:** Clarity Design System\n- **State Management:** Angular's built-in state management mechanisms (RxJS, services)\n- **Rich Text Editor:**  (To be determined - will be added in next phase)\n\n## Backend Technologies\n\nGenerated: 2025-09-24 07:20:00\n\n- **None (Initially):** The application will initially use local storage (IndexedDB).  Backend integration will be considered in future iterations.\n\n## Database Technologies\n\nGenerated: 2025-09-24 07:20:00\n\n- **Primary Database:** IndexedDB (client-side)\n\n## Infrastructure\n\nGenerated: 2025-09-24 07:20:00\n\n- **Deployment:** (To be determined - will be added in next phase)\n\n## Development Tools\n\nGenerated: 2025-09-24 07:20:00\n\n- **Version Control:** Git\n- **Testing:** Karma, Jasmine"
}
```


## Base Agent Prompt Reference

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