← Bob-Wire · c6

plan.md

C6: Dashboard Prototype Plan

Contents
  1. Context
  2. Decisions (confirmed with user)
  3. Proposed Architecture
  4. Phase 1: Design Brief
  5. Phase 2: Wireframe Implementation
  6. Critical Files
  7. Verification

Context

C5 established the data model for AI agent observability (10 inventory entities, data models, initial wireframes for agent-inventory). C6 takes those foundations and builds the complete dashboard prototype — the full navigation shell, all sections, and a clickable multi-page wireframe.

The initial prompt (cycles/c6.dashboard-prototype/initial-prompt.md) defines two phases:

  • Phase 1 — Design brief: all pages, goals, data, actions, and page hierarchy
  • Phase 2 — Clickable wireframe prototype covering the entire dashboard (no header, naked wireframe)

Decisions (confirmed with user)

  • Alerting: Own top-level nav section (alongside Security, Inventory, Settings)
  • Home page: Executive overview — active sessions, top risks, spend at a glance
  • Inventory scope: Priority subset — Sessions + detail, Agents, Users, MCP Servers fully built; other 6 items get placeholder list pages
  • Settings: Placeholder stub only

Proposed Architecture

No WireHeader. Three-column layout, left to right, page stretches full width:

┌──────────────────────────────────────────────────────────┐
│  Filter Placeholder                                      │
└──────────────────────────────────────────────────────────┘
│  Global  │  Category Nav  │  Content (full width)        │
│  Nav     │  (section      │                              │
│  (always │  sub-items,    │                              │
│  visible)│  visible when  │                              │
│          │  in a section) │                              │
└──────────┴────────────────┴──────────────────────────────┘
  • Filter Placeholder Not important, very light / grey
  • Global nav (leftmost, always present): Home, Security, Alerting, Inventory, Settings — icon + label or just labels (vue component)
  • Category nav (middle panel, context-sensitive): sub-items for the active section (e.g. Inventory → Sessions, Agents, Users, MCP Servers…). Hidden on Home page. (create a component for this)
  • Content area: stretches to fill remaining width

All pages use layout: 'wireframe' and render the shell as part of the page template (not a Nuxt layout).

Shell components to create in app/components/wire/ (auto-imported):

  • WireDashGlobalNav.vue — global nav column (Home, Security, Alerting, Inventory, Settings); highlights active section
  • WireDashCategoryNav.vue — category nav column (section-specific sub-items); hidden on Home page; accepts a section prop to render the right sub-items

Page template pattern:

<template>
  <div class="flex h-screen">
    <!-- Top filter bar (full width, very light/grey) -->
    <div class="...filter bar..."></div>
    <!-- Three-column body -->
    <div class="flex flex-1">
      <WireDashGlobalNav active="inventory" />
      <WireDashCategoryNav section="inventory" active="sessions" />
      <main class="flex-1 overflow-auto p-6"><!-- content --></main>
    </div>
  </div>
</template>

Page Hierarchy

Pages use nested directories matching the nav hierarchy. URLs mirror the structure.

app/pages/c6/wireframes/dashboard-v1/
├── home.vue                          → /dashboard-v1/home
├── security/
│   └── index.vue                     → /dashboard-v1/security
├── alerting/
│   └── index.vue                     → /dashboard-v1/alerting
├── inventory/
│   ├── index.vue                     → /dashboard-v1/inventory (category tiles)
│   ├── sessions/
│   │   ├── index.vue                 → /dashboard-v1/inventory/sessions — FULL
│   │   └── detail.vue                → /dashboard-v1/inventory/sessions/detail — FULL
│   ├── agents/
│   │   └── index.vue                 → /dashboard-v1/inventory/agents — FULL
│   ├── users/
│   │   └── index.vue                 → /dashboard-v1/inventory/users — FULL
│   ├── mcp-servers/
│   │   └── index.vue                 → /dashboard-v1/inventory/mcp-servers — FULL
│   ├── models/
│   │   └── index.vue                 → /dashboard-v1/inventory/models — PLACEHOLDER
│   ├── api-keys/
│   │   └── index.vue                 → /dashboard-v1/inventory/api-keys — PLACEHOLDER
│   ├── endpoints/
│   │   └── index.vue                 → /dashboard-v1/inventory/endpoints — PLACEHOLDER
│   ├── capabilities/
│   │   └── index.vue                 → /dashboard-v1/inventory/capabilities — PLACEHOLDER
│   ├── files/
│   │   └── index.vue                 → /dashboard-v1/inventory/files — PLACEHOLDER
│   └── secondary-calls/
│       └── index.vue                 → /dashboard-v1/inventory/secondary-calls — PLACEHOLDER
└── settings/
    └── index.vue                     → /dashboard-v1/settings — PLACEHOLDER

Phase 1: Design Brief

Deliverables

  1. cycles/c6.dashboard-prototype/CYCLE.md — cycle definition and status tracker
  2. cycles/c6.dashboard-prototype/briefs/dashboard.md — comprehensive design brief
    • One entry per page: goal, data conveyed, actions allowed
    • Navigation shell description
    • Type: wireframe

Page Descriptions (for the brief)

home — Cross-section org overview. Stats strip (active sessions, top risks, total spend today). Two panels: Security Posture summary (2-3 abstract risk items) + Inventory Summary (entity counts). Quick-links into each section.

security — Abstract posture view. Risk cards ("3 sessions using unknown API keys", "1 high-cost outlier session >$50"). Each card is clickable to a filtered inventory view. No raw event data.

alerting — Alert rules list with status (active/firing/muted). Recent alert fires with abstract descriptions. Link to policy configuration. Could surface: "API key sk-ant-...C001 used in session — unknown key policy fired."

inventory — Category home. Grid of 10 entity type tiles (Session, Agent, User, Model, API Key, Endpoint, MCP Server, Capability, File, Secondary Call), organized by category (Core / Identity / Capabilities / Exposure). Each tile shows count + last-seen. Click → entity list page.

sessions — Full sessions list. Same data as c5 but now a left-nav section, not a standalone feature. Filter bar, sortable columns, row click → session-detail.

session-detail — Single session full context. Mirrors c5 detail: identity block, metrics, turn timeline, tool calls, files, secondary calls.

agents — Agent inventory list. Columns: name, version, sessions, users, first/last seen.

users — User inventory list. Columns: email/username, sessions, total cost, primary agent, first/last seen.

mcp-servers — MCP server list. Columns: name, version, transport, tools available, sessions, total tool calls, error rate.

Placeholder pages (models, api-keys, endpoints, capabilities, files, secondary-calls, settings): Left nav + section header + "Coming soon" content block only.

Phase 2: Wireframe Implementation

Step-by-step

  1. Create cycles/c6.dashboard-prototype/CYCLE.md
  2. Run /write-brief → cycles/c6.dashboard-prototype/briefs/dashboard.md
  3. Create app/pages/c6/index.vue (cycle gallery)
  4. Create shell components: WireDashGlobalNav.vue, WireDashCategoryNav.vue
  5. Build pages section by section (home → security → alerting → inventory → inventory sub-pages)
  6. Register all pages in app/data/wireframe-registry.ts
  7. Run /flow to verify navigation connects correctly

Wire components to use

  • WireDashGlobalNav (new) — global nav column
  • WireDashCategoryNav (new) — category nav column
  • WireTable — session/agent/user/mcp list pages
  • WireCard — summary panels, risk cards, category tiles
  • WireBox — placeholder blocks for stub pages

Key constraint

No WireHeader on any page. The sidebar IS the navigation. Pages are "naked" — content area only.

Critical Files

  • cycles/c5.dashboard-reframing-ai/models.md — field definitions for all entity list columns
  • cycles/c5.dashboard-reframing-ai/briefs/agent-inventory.md — reference for sessions/detail design
  • app/pages/c5/wireframes/agent-inventory-v1/*.vue — existing wireframes to reference
  • app/data/wireframe-registry.ts — registry for new entries
  • app/components/wire/ — Wire* component library
  • app/pages/c6/ — target directory (does not exist yet)

Verification

  1. npm run dev → /c6 gallery loads and lists all registered pages
  2. Left nav renders on every page without a top header
  3. Global nav (Home → Security → Alerting → Inventory → Settings) navigates correctly
  4. Session row click → session-detail works
  5. Inventory tile click → entity list page works
  6. All 16 pages load without console errors

Qpoint Brand Style Guide