- You are an Angular developer
- Use Angular CLI for project scaffolding
- Use TypeScript with strict mode enabled
- Use RxJS for state management and async operations
- Use the typical naming conventions:
  - Components: .component.ts
  - Services: .service.ts
  - Pipes: .pipe.ts
  - Module: .module.ts
  - Test: .spec.ts
  - Directives: .directive.ts

## Build & Development Commands - Ensure `.gitignore` is present and up to date based on project language/toolchain.
## Testing Guidelines - Recommend committing test cases alongside features or fixes.
## Code Style & Guidelines  - Use consistent formatting tools (e.g., Prettier, Black) pre-commit if available.
## Documentation Guidelines  - Include changelogs or commit logs for release notes.
## Git Rules - Use clear commit messages: `<type>: <what>` (e.g., `fix: resolve header overlap`). - Squash trivial commits when possible before merging. - Warn users when suggesting force pushes or rebase.

# Airbnb React/JSX Style Guide - Summary

- **Component Structure**
  - One React component per file (multiple stateless components allowed)
  - Always use JSX syntax instead of `React.createElement`
  - Use `class extends React.Component` for stateful components
  - Use function declarations for stateless components
  - Don't use mixins

- **Naming & Files**
  - Use `.jsx` extension for React components
  - Use PascalCase for component filenames and references
  - Use camelCase for component instances
  - Use composite names for HOCs (e.g., `withFoo(Bar)`)

- **Syntax & Formatting**
  - Use double quotes for JSX attributes, single quotes for JS
  - Include a space in self-closing tags
  - Don't pad JSX curly braces with spaces
  - Wrap multiline JSX in parentheses
  - Always self-close tags without children

- **Props**
  - Use camelCase for prop names
  - Omit value when prop is explicitly `true`
  - Always include `alt` attributes on `<img>` tags
  - Don't use array index as `key` prop
  - Define defaultProps for all non-required props
  - Use spread props sparingly

- **Methods & Events**
  - Use arrow functions to close over local variables
  - Bind event handlers in the constructor
  - Don't use underscore prefix for internal methods
  - Always return a value in render methods

- **Component Organization**
  - Follow specific ordering for lifecycle methods
  - Follow specific patterns for defining propTypes and defaultProps
  - Don't use `isMounted` (anti-pattern)

Please create a new Angular component following these guidelines:
- Include JSDoc comments for component and inputs/outputs
- Implement proper lifecycle hooks
- Include TypeScript interfaces for models
- Follow container/presentational component pattern where appropriate
- Include unit tests with Jasmine/Karma in a separate test file
- Make sure to create separate files for any services, pipes, modules, and directives

Please review the current code changes looking for:

- Memory leaks (unsubscribed observables)
- Proper change detection strategy
- Proper use of async pipe
- Proper error handling

Format the review as:
```
## <FILENAME>
- <ISSUE>
...
- <ISSUE>
```

<!-- Sequential Thinking Workflow -->
<assistant>
    <toolbox>
        <mcp_server name="sequential-thinking"
                        role="workflow_controller"
                        execution="sequential-thinking"
                        description="Initiate the sequential-thinking MCP server">
            <tool name="STEP" value="1">
                <description>Gather context by reading the relevant file(s).</description>
                <arguments>
                    <argument name="instructions" value="Seek proper context in the codebase to understand what is required. If you are unsure, ask the user." type="string" required="true"/>
                    <argument name="should_read_entire_file" type="boolean" default="true" required="false"/>
                </arguments>
                <result type="string" description="Context gathered from the file(s). Output can be passed to subsequent steps."/>
            </tool>
            <tool name="STEP" value="2">
                <description>Generate code changes based on the gathered context (from STEP 1).</description>
                <arguments>
                    <argument name="instructions" value="Generate the proper changes/corrections based on context from STEP 1." type="string" required="true"/>
                    <argument name="code_edit" type="object" required="true" description="Output: The proposed code modifications."/>
                </arguments>
                <result type="object" description="The generated code changes (code_edit object). Output can be passed to subsequent steps."/>
            </tool>
            <tool name="STEP" value="3">
                <description>Review the generated changes (from STEP 2) and suggest improvements.</description>
                <arguments>
                    <argument name="instructions" type="string" value="Review the changes applied in STEP 2 for gaps, correctness, and adherence to guidelines. Suggest improvements or identify any additional steps needed." required="true"/>
                </arguments>
                <result type="string" description="Review feedback, suggested improvements, or confirmation of completion. Final output of the workflow."/>
            </tool>
        </mcp_server>
    </toolbox>
</assistant>