# Homelab Topology Visualizer

A responsive, real-time dashboard and visualizer for your homelab infrastructure.

## Features Added via 10-Skill Integration

This project has been thoroughly enhanced with 10 specific infrastructure and development skills:

### 1. Backend & API Security \`api-security-hardening\`, \`nodejs-backend-patterns\`
- Implemented **Helmet** for HTTP response headers.
- Added **Rate Limiting** to prevent abuse on discovery endpoints.
- Structured Error Handling with an object-oriented hierarchy (\`AppError\`) and a global error catching middleware.

### 2. Observability & Logging \`observability-monitoring\`
- Converted from console logs to **Pino** structured logging.
- Includes a custom request logger middleware that outputs formatted JSON in production and readable logs via \`pino-pretty\` in development.

### 3. Real-Time WebSockets \`websocket-engineer\`
- Replaced HTTP polling with **Socket.IO** connections.
- The UI maintains a live connection with the server, receiving \`topology:update\` events exactly when new data is discovered.
- Features resilient reconnection with exponential backoff and connection status indicators in the dashboard footer.

### 4. Containerization \`docker\`
- Full local containerization.
- Features a **Multi-Stage Dockerfile** that builds the Vite frontend and serves via a lightweight Node.js Alpine image.
- A \`docker-compose.yml\` stack makes spinning up both the frontend and backend seamless. Includes a health-check endpoint.

### 5. Testing Infrastructure \`vitest\`
- Integrated **Vitest** for unit testing.
- Includes thorough coverage formatting color utility functions and Zustand store actions. Run with \`npm test\`.

### 6. Dashboards & Visualization \`data-visualizer\`
- Added Recharts-inspired KPI panels (\`MetricsBar.tsx\`).
- Included a pure CSS, screen-reader accessible bar chart mapping services to hosts (\`HostChart.tsx\`).
- Accessible colorblind-safe color loops are enforced.

### 7. Domain Types & Architecture \`infrastructure-monitoring\`, \`proxmox-admin\`, \`network-engineer\`
- **Virtualization:** Native TypeScript support for Proxmox VMs and LXC containers with resource metrics.
- **Networking:** Supported types for VLANs, subnets, and gateways.
- **Monitoring:** API latency and performance are actively measured for network mapping jobs.

## Running Locally

To run this application via Docker Compose:

\`\`\`bash
# Build and start the containers
docker-compose up -d --build

# View logs
docker-compose logs -f
\`\`\`

The applications will be running at:
- **Frontend Dashboard:** http://localhost:3000
- **Backend API:** http://localhost:3001

## Development

\`\`\`bash
# Install dependencies
npm ci

# Start the dev server
npm run dev
\`\`\`

## Testing

\`\`\`bash
# Run unit tests
npm test

# Run tests with coverage
npm run test:coverage
\`\`\`