Dashboard Prototype
Why
C5 established the data model for AI agent observability (10 inventory entities, sessions, security framing). C6 maps that model to a navigable dashboard prototype: Security posture, Inventory across all entity types, Alerting, and Settings — connected into a clickable flow the team can walk through.
Objective
Build the complete dashboard wireframe prototype — the full navigation shell, all sections, and a clickable multi-page wireframe for the AI agent observability platform established in c5.
Scope
- Design brief — page hierarchy, goals, data, and actions for all pages
- Shell components —
WireDashGlobalNav,WireDashCategoryNav(reused across every page) - 25 wireframe pages — Home, Security, Alerting, Inventory (+ full entity lists + detail pages for all 10 entity types), Settings
- Navigation wired — all pages clickable via the shared nav shell
Outcome
Complete clickable dashboard prototype covering all 10 AI agent inventory entity types, each with a list page and detail page. All list rows navigate to their respective detail pages. Security section expanded to a full 3-page sub-section (overview, policy listing, policy detail) modeled after the design project's PolicyCard pattern. Alerting and Settings sections included. Navigation shell shared across all pages. Logo links to home from any page.
Navigation Shell
┌──────────────────────────────────────────────────────────┐
│ Filter Placeholder (full width, very light/grey) │
└──────────────────────────────────────────────────────────┘
│ Global Nav │ Category Nav │ Content (full width) │
│ (always) │ (per section) │ │
└──────────────┴────────────────┴─────────────────────────┘
No WireHeader on any page. Navigation IS the shell.
Page List
| Page | Route | Status |
|---|---|---|
| Home | /dashboard-v1/home | ✓ |
| Security Overview | /dashboard-v1/security | ✓ |
| Security Policies | /dashboard-v1/security/policies | ✓ |
| Security Policy Detail | /dashboard-v1/security/policies/detail | ✓ |
| Alerting | /dashboard-v1/alerting | ✓ |
| Inventory | /dashboard-v1/inventory | ✓ |
| Sessions | /dashboard-v1/inventory/sessions | ✓ |
| Session Detail | /dashboard-v1/inventory/sessions/detail | ✓ |
| Agents | /dashboard-v1/inventory/agents | ✓ |
| Agent Detail | /dashboard-v1/inventory/agents/detail | ✓ |
| Users | /dashboard-v1/inventory/users | ✓ |
| User Detail | /dashboard-v1/inventory/users/detail | ✓ |
| MCP Servers | /dashboard-v1/inventory/mcp-servers | ✓ |
| MCP Server Detail | /dashboard-v1/inventory/mcp-servers/detail | ✓ |
| Models | /dashboard-v1/inventory/models | ✓ |
| Model Detail | /dashboard-v1/inventory/models/detail | ✓ |
| API Keys | /dashboard-v1/inventory/api-keys | ✓ |
| API Key Detail | /dashboard-v1/inventory/api-keys/detail | ✓ |
| Endpoints | /dashboard-v1/inventory/endpoints | ✓ |
| Endpoint Detail | /dashboard-v1/inventory/endpoints/detail | ✓ |
| Capabilities | /dashboard-v1/inventory/capabilities | ✓ |
| Capability Detail | /dashboard-v1/inventory/capabilities/detail | ✓ |
| Files | /dashboard-v1/inventory/files | ✓ |
| File Detail | /dashboard-v1/inventory/files/detail | ✓ |
| Secondary Calls | /dashboard-v1/inventory/secondary-calls | ✓ |
| Secondary Call Detail | /dashboard-v1/inventory/secondary-calls/detail | ✓ |
| Settings | /dashboard-v1/settings | placeholder |
Status
- CYCLE.md written
- Design brief written —
briefs/dashboard.md - Inventory item detail brief written —
briefs/inventory-item-details.md - Shell components created (
WireDashGlobalNav,WireDashCategoryNav,WireDashHeader) - Home page
- Security overview (policy health summary, breakdown, violations table)
- Security policies list (out of compliance + compliant, PolicyCard pattern)
- Security policy detail (rules, violations, notifications)
- Logo click → home navigation
- Alerting page
- Inventory home
- Sessions list + detail
- Agents / Users / MCP Servers — list + detail
- Models / API Keys / Endpoints — list upgraded + detail
- Capabilities / Files / Secondary Calls — list upgraded + detail
- Settings placeholder
- All pages registered in wireframe-registry.ts
- c6 gallery updated (25 wireframes)
Visual record
2 captures — heroes, page slices, and full-page renders. Click to view.

