# Package Manager Badges Enhancement

## Current Implementation Issues

### 1. **Incorrect Detection on Fedora**
- **Problem**: Fedora machine incorrectly shows as using APT
- **Root Cause**: Detection logic is not properly identifying the correct package manager for the OS
- **Expected**: Fedora should show DNF as active, APT as inactive/greyed out

### 2. **Incomplete Package Manager Display**
- **Problem**: Only shows package managers detected as available
- **Desired**: Show ALL supported package manager types with visual indication of which are active
- **Supported types**: APT, DNF, Windows Update, Winget, Docker

### 3. **Visual Design Issues**
- **Problem**: Badges are positioned next to the description rather than inline with text
- **Desired**: Badges should be integrated inline with the description text
- **Example**: "Package managers: [APT] [DNF] [Docker]" where active ones are colored and inactive are grey

### 4. **Color Consistency**
- **Problem**: Color scheme not consistent
- **Desired**: 
  - Active package managers: Use consistent color scheme (e.g., blue for all active)
  - Inactive package managers: Greyed out
  - Specific colors can be: blue, purple, green but should be consistent across active ones

## Implementation Requirements

### Backend Changes
1. **Enhanced OS Detection** in `aggregator-agent/internal/scanner/registry.go`
   - Improve `IsAvailable()` methods to correctly identify OS-appropriate package managers
   - Add OS detection logic to prevent false positives (e.g., APT on Fedora)

2. **API Endpoint Enhancement** 
   - Current: `/api/v1/agents/{id}/scanners` returns only available scanners
   - Enhanced: Return all supported scanner types with `available: true/false` flag

### Frontend Changes
1. **Badge Component Restructuring** in `AgentHealth.tsx`
   ```typescript
   // Current: Only shows available scanners
   const enabledScanners = agentScanners.filter(s => s.enabled);
   
   // Desired: Show all supported scanners with availability status
   const allScanners = [
     { type: 'apt', name: 'APT', available: false, enabled: false },
     { type: 'dnf', name: 'DNF', available: true, enabled: true },
     // ... etc
   ];
   ```

2. **Inline Badge Display**
   ```typescript
   // Current: Badges next to description
   <div>Package Managers:</div>
   <div>{badges}</div>
   
   // Desired: Inline with text
   <div>
     Package Managers: 
     <Badge className={aptAvailable ? 'bg-blue-500' : 'bg-gray-400'}>APT</Badge>
     <Badge className={dnfAvailable ? 'bg-blue-500' : 'bg-gray-400'}>DNF</Badge>
     {/* ... etc */}
   </div>
   ```

## Priority: Medium
This is a UX improvement that also fixes a functional bug (incorrect detection on Fedora).

## Related Files
- `aggregator-web/src/components/AgentHealth.tsx` - Badge display logic
- `aggregator-agent/internal/scanner/registry.go` - Scanner detection logic
- `aggregator-agent/internal/scanner/apt.go` - APT availability detection
- `aggregator-agent/internal/scanner/dnf.go` - DNF availability detection
- `aggregator-server/internal/api/handlers/scanner_config.go` - API endpoint