git.stella-ops.org/docs/features/unchecked/web/agent-fleet-dashboard-ui.md

Agent Fleet Dashboard UI

Module

Web

Status

IMPLEMENTED

Description

Full agent fleet management UI with fleet dashboard overview, agent detail pages with health and tasks tabs, capacity heatmap visualization, fleet comparison views, agent action modals, and an onboarding wizard for new agent registration. The known features list has "Runtime Agent Framework" but not the fleet dashboard UI.

Implementation Details

• Feature directory: src/Web/StellaOps.Web/src/app/features/agents/
• Routes: agents.routes.ts
• Components:
  • agent-detail-page (src/Web/StellaOps.Web/src/app/features/agents/agent-detail-page.component.ts)
  • agent-fleet-dashboard (src/Web/StellaOps.Web/src/app/features/agents/agent-fleet-dashboard.component.ts)
  • agent-onboard-wizard (src/Web/StellaOps.Web/src/app/features/agents/agent-onboard-wizard.component.ts)
  • agent-action-modal (src/Web/StellaOps.Web/src/app/features/agents/components/agent-action-modal/agent-action-modal.component.ts)
  • agent-card (src/Web/StellaOps.Web/src/app/features/agents/components/agent-card/agent-card.component.ts)
  • agent-health-tab (src/Web/StellaOps.Web/src/app/features/agents/components/agent-health-tab/agent-health-tab.component.ts)
  • agent-tasks-tab (src/Web/StellaOps.Web/src/app/features/agents/components/agent-tasks-tab/agent-tasks-tab.component.ts)
  • capacity-heatmap (src/Web/StellaOps.Web/src/app/features/agents/components/capacity-heatmap/capacity-heatmap.component.ts)
  • fleet-comparison (src/Web/StellaOps.Web/src/app/features/agents/components/fleet-comparison/fleet-comparison.component.ts)
• Services:
  • agent-realtime (src/Web/StellaOps.Web/src/app/features/agents/services/agent-realtime.service.ts)
• Models:
  • src/Web/StellaOps.Web/src/app/features/agents/models/agent.models.ts
• Source: SPRINT_20260118_023_FE_agent_fleet_visualization.md

E2E Test Plan

• Setup:
  • Log in with a user that has appropriate permissions
  • Navigate to /ops/agents
  • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
• Core verification:
  • Verify the dashboard loads without errors and displays summary cards/metrics
  • Verify data refreshes correctly and loading states are shown
  • Verify empty state is displayed when no data is available
• Edge cases:
  • Verify graceful handling when backend API is unavailable (error state)
  • Verify responsive layout at different viewport sizes
  • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)