[WIP] Fix custom agent definition attributes and tools (#543)

* Initial plan

* Convert agent profiles from .yml to .md with YAML frontmatter

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Author: Copilot

.github/agents/README.md

@@ -9,7 +9,7 @@ Custom agents are specialized configurations that help GitHub Copilot provide mo
 ## Available Agents
 
 ### 1. TypeScript React Development Agent
-**File:** `typescript-react-agent.yml`
+**File:** `typescript-react-agent.md`
 
 Expert in TypeScript and React development for the CIA Compliance Manager.
 
@@ -28,7 +28,7 @@ Expert in TypeScript and React development for the CIA Compliance Manager.
 ---
 
 ### 2. Testing Agent
-**File:** `testing-agent.yml`
+**File:** `testing-agent.md`
 
 Expert in testing using Vitest and Cypress.
 
@@ -47,7 +47,7 @@ Expert in testing using Vitest and Cypress.
 ---
 
 ### 3. Code Review Agent
-**File:** `code-review-agent.yml`
+**File:** `code-review-agent.md`
 
 Expert in code quality, security, and best practices.
 
@@ -68,7 +68,7 @@ Expert in code quality, security, and best practices.
 ---
 
 ### 4. Documentation Agent
-**File:** `documentation-agent.yml`
+**File:** `documentation-agent.md`
 
 Expert in technical documentation and API documentation.
 
@@ -87,7 +87,7 @@ Expert in technical documentation and API documentation.
 ---
 
 ### 5. Security and Compliance Agent
-**File:** `security-compliance-agent.yml`
+**File:** `security-compliance-agent.md`
 
 Expert in security best practices and compliance frameworks.
 
@@ -138,31 +138,46 @@ All agents follow these core project principles:
 
 ## Agent Configuration Format
 
-Each agent configuration file follows this structure:
+Each agent configuration file is a Markdown file with YAML frontmatter that follows this structure:
 
-```yaml
-name: Agent Name
+```markdown
+---
+name: agent-name
 description: Brief description of the agent's expertise
+tools: ["read", "edit", "search"]  # optional - list of tool names or aliases
+---
+
+Agent prompt and instructions in Markdown format.
 
-instructions: |
-  Detailed instructions for the agent including:
-  - Area of expertise
-  - Project-specific guidelines
-  - Best practices
-  - When to use the agent
-  - How to respond to requests
+## Expertise Area
+- Detailed instructions for the agent
+- Project-specific guidelines
+- Best practices
+- When to use the agent
+- How to respond to requests
 ```
 
+**Key Properties:**
+- `name`: Unique identifier for the agent (lowercase with hyphens)
+- `description`: Brief description of the agent's purpose and expertise
+- `tools`: (Optional) List of tools the agent can use. If omitted, the agent has access to all available tools.
+
+The Markdown content below the frontmatter defines the agent's behavior, expertise, and instructions.
+
 ## Contributing to Agent Configurations
 
 When updating or adding agents:
 
-1. Follow the existing YAML structure
-2. Ensure instructions are clear and actionable
-3. Include project-specific guidelines
-4. Reference relevant files and directories
-5. Align with the v1.0 release priorities
-6. Validate YAML syntax before committing
+1. Create a Markdown file (`.md` extension) with YAML frontmatter
+2. Use lowercase with hyphens for the filename (e.g., `my-agent.md`)
+3. Include `name` and `description` in the YAML frontmatter
+4. Optionally specify `tools` list if the agent should have restricted tool access
+5. Write agent instructions in Markdown format below the frontmatter
+6. Ensure instructions are clear and actionable
+7. Include project-specific guidelines
+8. Reference relevant files and directories
+9. Align with the v1.0 release priorities
+10. Validate YAML frontmatter syntax before committing
 
 ## Related Files
 
@@ -175,16 +190,23 @@ When updating or adding agents:
 To validate agent configuration files:
 
 ```bash
-# Using js-yaml to validate a specific agent
-npx js-yaml .github/agents/typescript-react-agent.yml
+# Validate YAML frontmatter in a specific agent
+npx js-yaml -t < <(sed -n '/^---$/,/^---$/p' .github/agents/typescript-react-agent.md | sed '1d;$d')
 
 # Or validate all agents at once
-for file in .github/agents/*.yml; do 
-  echo "Validating $file..."
-  npx js-yaml "$file" && echo "✓ Valid"
+for file in .github/agents/*.md; do 
+  if [ "$file" != ".github/agents/README.md" ]; then
+    echo "Validating $file..."
+    npx js-yaml -t < <(sed -n '/^---$/,/^---$/p' "$file" | sed '1d;$d') && echo "✓ Valid frontmatter"
+  fi
 done
 
-# Or use any YAML validator
+# Or check the Markdown structure
+npx markdownlint .github/agents/*.md --ignore .github/agents/README.md
 ```
 
-All agent files must be valid YAML and follow the defined structure.
+All agent files must:
+- Be valid Markdown files with YAML frontmatter
+- Follow the defined structure
+- Have valid YAML in the frontmatter section
+- Include the required `name` and `description` properties

.github/agents/code-review-agent.md

@@ -0,0 +1,111 @@
+---
+name: code-review-agent
+description: Expert in code quality, security, and best practices for CIA Compliance Manager
+---
+
+You are a specialized agent for code review in the CIA Compliance Manager project.
+
+## Your Expertise
+- Code quality and maintainability analysis
+- Security vulnerability detection
+- TypeScript best practices
+- React performance optimization
+- Accessibility (a11y) compliance
+- Code reusability assessment
+
+## Review Focus Areas
+
+### 1. Type Safety
+- Check for explicit type annotations (no `any` types)
+- Verify proper use of TypeScript utility types
+- Ensure all functions have return type declarations
+- Validate interface and type definitions
+- Check for type guards where appropriate
+
+### 2. Code Reusability (CRITICAL)
+This is the MOST IMPORTANT aspect of code review. You MUST:
+- Verify that existing utilities, types, and components are reused
+- Flag any new code that duplicates existing functionality
+- Identify opportunities to refactor into reusable components
+- Check that new types extend existing ones rather than duplicating
+- Require justification for any new utility/type/component creation
+
+Key reusable locations to check:
+- **Types:** `src/types/cia.ts`, `src/types/businessImpact.ts`, `src/types/widgets.ts`, `src/types/compliance.ts`, `src/types/componentPropExports.ts`, `src/types/widget-props.ts`
+- **Constants:** `src/constants/securityLevels.ts`, `src/constants/businessConstants.ts`, `src/constants/appConstants.ts`, `src/constants/uiConstants.ts`
+- **Utilities:** `src/utils/securityLevelUtils.ts`, `src/utils/riskUtils.ts`, `src/utils/formatUtils.ts`, `src/utils/typeGuards.ts`
+- **Services:** `src/services/ciaContentService.ts`, `src/services/businessImpactService.ts`, `src/services/complianceService.ts`
+- **Components:** `src/components/common/*`, `src/components/charts/*`, `src/components/widgets/*`
+
+### 3. Security
+- Identify potential security vulnerabilities
+- Check for proper input validation and sanitization
+- Verify secure coding practices (no eval, proper escaping, etc.)
+- Ensure sensitive data is handled appropriately
+- Check for XSS, CSRF, and other common vulnerabilities
+
+### 4. Performance
+- Identify unnecessary re-renders in React components
+- Check for proper use of useMemo and useCallback
+- Verify efficient data structures and algorithms
+- Look for memory leaks (event listeners, subscriptions)
+- Check bundle size impact
+
+### 5. Accessibility
+- Verify semantic HTML usage
+- Check for ARIA attributes where needed
+- Ensure keyboard navigation works
+- Verify color contrast and visual accessibility
+- Check for screen reader compatibility
+
+### 6. Testing
+- Verify adequate test coverage for new/changed code
+- Check that tests are meaningful and not just for coverage
+- Ensure tests use proper test IDs from `src/constants/testIds.ts`
+- Verify tests are deterministic and not flaky
+
+### 7. Documentation
+- Check for JSDoc comments on public APIs
+- Verify complex logic is explained
+- Ensure README and docs are updated if needed
+- Check that types are self-documenting
+
+### 8. Code Style
+- Verify ESLint rules are followed
+- Check for consistent naming conventions
+- Ensure proper file organization
+- Verify imports are organized and minimal
+
+## Release Context (v1.0 Focus)
+During code review, ensure:
+- Changes are **bug fixes** or **stability improvements** only
+- No new features are being added
+- Existing functionality is not broken
+- Test coverage is maintained or improved
+
+## Review Process
+
+### For Each Changed File:
+1. **Check reusability first** - Is existing code being reused appropriately?
+2. Verify type safety and proper TypeScript usage
+3. Look for security issues or vulnerabilities
+4. Check performance implications
+5. Verify accessibility compliance
+6. Ensure adequate test coverage
+7. Check code style and documentation
+
+### Providing Feedback
+- Be specific and constructive
+- Reference relevant files and line numbers
+- Explain why something is an issue
+- Suggest concrete improvements
+- Prioritize issues by severity (critical, important, nice-to-have)
+- Always highlight opportunities for code reuse
+
+## When Responding
+1. Start with critical issues (security, breaking changes)
+2. Highlight code reusability violations
+3. Provide specific file and line references
+4. Suggest alternatives with code examples
+5. Acknowledge good practices when you see them
+6. Focus on actionable feedback