Command Center - Complete MCP Workflow Visualization

Proposal to transform the Command Center from decision-only display to complete MCP lifecycle visualization

🎯 Command Center - Complete MCP Workflow Visualization

📋 Problem Statement

Current State: The Command Center primarily displays logged decisions but doesn't visualize the complete MCP workflow lifecycle.

User Feedback:

"I don't think it should only be showing the logged decisions, but the complete MCP process. Whatever the process is."

Gap: The Command Center is missing visualization for:

MCP Init Dashboard stage
Preflight context gathering
Tool execution stages
Agent orchestration (multi-agent mode)
Outcome reporting
Pattern mining
Golden decision promotion
Embedding generation
Session lifecycle

🔍 Complete MCP Workflow Analysis

Based on MCP documentation (docs/english/AI/MCP), here's the complete MCP process:

1. MCP Init Dashboard (`mcp_init`)

┌─────────────────────────────────────────────┐
│ 🧠 MCP INIT DASHBOARD                       │
├─────────────────────────────────────────────┤
│ ✅ System Health Check                      │
│ 📊 Quick Stats                              │
│ 🎯 Mode Selection:                          │
│    1. Quick Task                            │
│    2. Multi-Agent Orchestration             │
│    3. Search Mode                           │
│    4. Stats View                            │
└─────────────────────────────────────────────┘

2. Preflight Context (`preflight`)

┌─────────────────────────────────────────────┐
│ 🧠 PREFLIGHT CONTEXT GATHERING              │
├─────────────────────────────────────────────┤
│ • Loading HOT memory (current session)      │
│ • Loading WARM memory (last 7 days)         │
│ • Searching COLD memory (historical)        │
│ • Fetching conventions                      │
│ • Retrieving recent decisions (~3)          │
│ • Checking pending outcomes                 │
└─────────────────────────────────────────────┘

3. Task Execution (Mode-Dependent)

A. Quick Mode (Single Agent)

┌─────────────────────────────────────────────┐
│ 🚀 QUICK MODE EXECUTION                     │
├─────────────────────────────────────────────┤
│ Task: "Implement authentication"            │
│ Agent: cursor-storage-agent                 │
│ Status: IN_PROGRESS                         │
│ Progress: [████████░░░░] 45%                │
└─────────────────────────────────────────────┘

B. Orchestrated Mode (Multi-Agent)

┌─────────────────────────────────────────────┐
│ 🎭 ORCHESTRATED MODE                        │
├─────────────────────────────────────────────┤
│ Stage 1: Planning (Complete)                │
│   ✅ Architect: Designed API structure      │
│                                             │
│ Stage 2: Execution (In Progress)            │
│   🔄 Implementor: Writing auth service...   │
│   ⏸️ Security: Waiting for service...      │
│                                             │
│ Stage 3: Review (Pending)                   │
│   ⏳ Reviewer: Not started                  │
└─────────────────────────────────────────────┘

4. Decision Logging (`log_decision`)

┌─────────────────────────────────────────────┐
│ 💡 DECISION LOGGED                          │
├─────────────────────────────────────────────┤
│ Question: "Use signals vs RxJS?"            │
│ Chosen: "Use signals"                       │
│ Confidence: 94%                             │
│ Type: implementation                        │
│ Status: 🟢 Auto-approved (>95%)            │
└─────────────────────────────────────────────┘

5. 3-Tier Decision Pipeline

┌─────────────────────────────────────────────┐
│ 🔄 DECISION PIPELINE                        │
├─────────────────────────────────────────────┤
│ Raw Decision → Embedded → Golden            │
│                                             │
│ 1. RAW: Stored in MongoDB                   │
│    Status: ✅ Saved                         │
│                                             │
│ 2. EMBEDDING: Vector generation             │
│    Status: 🔄 Processing...                │
│    ETA: 2s                                  │
│                                             │
│ 3. GOLDEN: Promotion evaluation             │
│    Status: ⏳ Pending (needs outcome)      │
│    Criteria: confidence ≥85%, outcome=true  │
└─────────────────────────────────────────────┘

6. Outcome Reporting (`report_outcome`)

┌─────────────────────────────────────────────┐
│ 📊 OUTCOME REPORTED                         │
├─────────────────────────────────────────────┤
│ Decision: dec_123                           │
│ Outcome: ✅ Success                         │
│ Rating: ⭐⭐⭐⭐⭐ 5/5                      │
│ Feedback: "Signals worked great!"          │
│                                             │
│ 🎯 Promoted to GOLDEN                       │
│ 🧠 Agent learning updated                   │
└─────────────────────────────────────────────┘

7. Pattern Mining (`mine_patterns`)

┌─────────────────────────────────────────────┐
│ ⛏️ PATTERN MINING TRIGGERED                │
├─────────────────────────────────────────────┤
│ Trigger: 10 new decisions                   │
│ Patterns found: 3                           │
│                                             │
│ 1. Sequential: "Use signals → OnPush"       │
│    Support: 8/10, Success: 100%             │
│                                             │
│ 2. Contextual: "Auth → standalone comps"    │
│    Support: 7/10, Success: 95%              │
└─────────────────────────────────────────────┘

8. Session Lifecycle

┌─────────────────────────────────────────────┐
│ 📍 SESSION TRACKING                         │
├─────────────────────────────────────────────┤
│ Session: editor2-31.13                      │
│ Started: 2026-01-08 10:30:00                │
│ Duration: 2h 15m                            │
│                                             │
│ Stats:                                      │
│ • Decisions logged: 12                      │
│ • Outcomes reported: 8 (67%)                │
│ • Golden promotions: 5                      │
│ • Embeddings generated: 12                  │
│ • Patterns mined: 3                         │
└─────────────────────────────────────────────┘

🎨 Proposed UI Enhancement

New Workflow Visualization Panel

┌─────────────────────────────────────────────────────────────────────────────┐
│  🎯 AI COMMAND CENTER - MCP WORKFLOW                    ● LIVE    15 Events │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ┌─ MCP WORKFLOW PIPELINE ────────────────────────────────────────────────┐ │
│  │                                                                         │ │
│  │  1. MCP INIT          ✅ Complete (2s ago)                             │ │
│  │     Mode: Quick Task  Health: All systems OK                           │ │
│  │                                                                         │ │
│  │  2. PREFLIGHT         ✅ Complete (1s ago)                             │ │
│  │     Context: ~98 tokens                                                │ │
│  │     Sources: 3 recent decisions, 5 conventions                         │ │
│  │                                                                         │ │
│  │  3. TASK EXECUTION    🔄 In Progress                                   │ │
│  │     Task: "Implement user auth"                                        │ │
│  │     Agent: cursor-storage-agent                                        │ │
│  │     Progress: [████████░░░░] 45% (Working on token validation...)     │ │
│  │                                                                         │ │
│  │  4. DECISIONS         🔄 2 logged (awaiting outcomes)                  │ │
│  │     • dec_123: "Use JWT tokens" ✅ Auto-approved (96%)                │ │
│  │     • dec_124: "Use signals for state" ⏳ Processing embedding...     │ │
│  │                                                                         │ │
│  │  5. PIPELINE          🔄 Processing                                    │ │
│  │     RAW [12] → EMBEDDED [10] → GOLDEN [5]                             │ │
│  │     Pending: 2 embeddings, 5 awaiting outcomes                         │ │
│  │                                                                         │ │
│  │  6. LEARNING          ⏸️ Idle (triggers at 10 decisions)              │ │
│  │     Next pattern mining: 8 more decisions needed                       │ │
│  │                                                                         │ │
│  │  7. SESSION           ✅ Active (2h 15m)                               │ │
│  │     Session: editor2-31.13                                             │ │
│  │     Stats: 12 decisions, 8 outcomes (67% reported)                     │ │
│  │                                                                         │ │
│  └─────────────────────────────────────────────────────────────────────────┘ │
│                                                                             │
│  ┌─ MULTI-AGENT ORCHESTRATION (When Active) ────────────────────────────┐ │
│  │                                                                        │ │
│  │  Stage 1: PLANNING       ✅ Complete (30s)                            │ │
│  │    • cursor-architect   ✅ API design complete                        │ │
│  │                                                                        │ │
│  │  Stage 2: EXECUTION      🔄 In Progress (1m 45s)                      │ │
│  │    • cursor-implementor 🔄 Writing AuthService... (70%)              │ │
│  │    • cursor-security    ⏸️ Waiting for service completion...         │ │
│  │                                                                        │ │
│  │  Stage 3: REVIEW         ⏳ Pending                                   │ │
│  │    • cursor-reviewer    ⏳ Not started                                │ │
│  │                                                                        │ │
│  └────────────────────────────────────────────────────────────────────────┘ │
│                                                                             │
│  ┌─ LIVE TIMELINE (Last 10 Events) ──────────────────────────────────────┐ │
│  │ 10:45:23  🧠  Preflight completed (~98 tokens)                         │ │
│  │ 10:45:25  🚀  Task started: "Implement user auth"                      │ │
│  │ 10:45:30  💡  Decision: "Use JWT tokens" (96% confidence)             │ │
│  │ 10:45:31  ✅  Decision auto-approved (>95%)                            │ │
│  │ 10:45:31  💾  Decision saved to MongoDB (RAW)                          │ │
│  │ 10:45:33  🔢  Embedding generated (512 dimensions)                     │ │
│  │ 10:45:33  📦  Decision moved to EMBEDDED tier                          │ │
│  │ 10:45:45  💡  Decision: "Use signals for state" (91%)                 │ │
│  │ 10:45:46  🔄  Processing embedding...                                  │ │
│  │ 10:45:50  📝  Agent writing code: auth.service.ts                      │ │
│  └────────────────────────────────────────────────────────────────────────┘ │
│                                                                             │
│  ┌─ 3-TIER MEMORY STATUS ────────────────────────────────────────────────┐ │
│  │  🔥 HOT   (Current Session):    12 decisions                          │ │
│  │  🌡️ WARM  (Last 7 days):         145 decisions (cached)              │ │
│  │  ❄️ COLD  (Historical):         8,234 decisions (vector search)       │ │
│  └────────────────────────────────────────────────────────────────────────┘ │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

🔌 Required Backend Events

New WebSocket Events to Implement

Event	When Emitted	Payload
`mcp.init.started`	MCP init begins	`{ mode, healthCheck }`
`mcp.init.completed`	MCP init finishes	`{ mode, duration, stats }`
`preflight.started`	Preflight begins	`{ task }`
`preflight.completed`	Preflight finishes	`{ tokens, sources, duration }`
`decision.embedded`	Embedding generated	`{ decisionId, dimensions, duration }`
`decision.promoted-to-golden`	Golden promotion	`{ decisionId, reason, criteria }`
`pattern.mined`	Pattern discovered	`{ pattern, support, successRate }`
`learning.triggered`	Learning cycle starts	`{ trigger, decisionsCount }`
`session.stats-updated`	Session stats change	`{ stats }`
`pipeline.status`	Pipeline state change	`{ raw, embedded, golden, pending }`
`orchestration.stage-change`	Multi-agent stage shift	`{ stage, agents, progress }`
`memory.tier-accessed`	Memory tier accessed	`{ tier, query, results }`

🏗️ Implementation Plan

Phase 1: Backend Event Broadcasting (Priority: High)

Goal: Emit all MCP lifecycle events via WebSocket

Tasks:

MCP Init Events (MCP/mcp-development-ai/src/tools/mcp-init.ts)

await commandCenter.mcpInitStarted({ mode, healthCheck });
// ... health checks ...
await commandCenter.mcpInitCompleted({ mode, duration, stats });

Preflight Events (MCP/mcp-development-ai/src/tools/preflight.ts)

await commandCenter.preflightStarted({ task });
// ... context gathering ...
await commandCenter.preflightCompleted({ tokens, sources, duration });

Pipeline Events (Backend AI API)
- Hook into embedding generation
- Hook into golden promotion logic
- Emit decision.embedded and decision.promoted-to-golden

Pattern Mining Events (MCP/mcp-development-ai/src/tools/mine-patterns.ts)

patterns.forEach(pattern => {
  await commandCenter.patternMined(pattern);
});

Session Stats Events (Backend AI API)
- Listen to MongoDB changes
- Emit session.stats-updated on decision count changes
Orchestration Events (Backend AI API)
- Hook into multi-agent orchestration
- Emit orchestration.stage-change on stage transitions

Phase 2: Frontend Visualization (Priority: High)

Goal: Display complete MCP workflow in Command Center UI

Tasks:

Add New State Signals (command-center.component.ts)

// MCP Workflow State
readonly mcpInitStatus = autoFlashState<InitStatus>(...);
readonly preflightStatus = autoFlashState<PreflightStatus>(...);
readonly pipelineStatus = autoFlashState<PipelineStatus>(...);
readonly orchestrationState = autoFlashState<OrchestrationState>(...);
readonly memoryTierStats = autoFlashState<MemoryTierStats>(...);
readonly timelineEvents = autoFlashState<TimelineEvent[]>(...);

Add WebSocket Listeners

this.socket.on('mcp.init.completed', (data) => {
  this.mcpInitStatus.set(data);
  this.addTimelineEvent('mcp-init', data);
});

this.socket.on('preflight.completed', (data) => {
  this.preflightStatus.set(data);
  this.addTimelineEvent('preflight', data);
});

// ... more listeners ...

Create Workflow Pipeline Component

// New component: workflow-pipeline.component.ts
@Component({
  selector: 'lib-workflow-pipeline',
  standalone: true,
  template: `
    <div class="workflow-pipeline">
      <div class="pipeline-stage" [class.active]="stage === 'init'">
        <span class="stage-icon">🧠</span>
        <span class="stage-name">MCP Init</span>
        <span class="stage-status">{{ initStatus }}</span>
      </div>
      <!-- More stages... -->
    </div>
  `
})
export class WorkflowPipelineComponent { }

Create Timeline Component

// New component: event-timeline.component.ts
@Component({
  selector: 'lib-event-timeline',
  standalone: true,
  template: `
    <div class="event-timeline">
      @for (event of timelineEvents(); track event.id) {
        <div class="timeline-event" [class]="event.type">
          <span class="timestamp">{{ event.timestamp | date:'HH:mm:ss' }}</span>
          <span class="icon">{{ event.icon }}</span>
          <span class="message">{{ event.message }}</span>
        </div>
      }
    </div>
  `
})
export class EventTimelineComponent { }

Create Multi-Agent Orchestration Panel

// New component: orchestration-panel.component.ts
@Component({
  selector: 'lib-orchestration-panel',
  standalone: true,
  template: `
    <div class="orchestration-panel" *ngIf="orchestrationState()">
      @for (stage of orchestrationState().stages; track stage.id) {
        <div class="stage" [class.active]="stage.status === 'in-progress'">
          <h4>Stage {{ stage.order }}: {{ stage.name }}</h4>
          @for (agent of stage.agents; track agent.id) {
            <div class="agent" [class]="agent.status">
              <span class="agent-icon">{{ agent.icon }}</span>
              <span class="agent-name">{{ agent.name }}</span>
              <span class="agent-progress">{{ agent.progress }}%</span>
            </div>
          }
        </div>
      }
    </div>
  `
})
export class OrchestrationPanelComponent { }

Update Main Command Center Template
- Add new panels for workflow pipeline
- Add timeline component
- Add orchestration panel (conditional)

Phase 3: Flash-Persistence Integration (Priority: Medium)

Goal: Persist all workflow state for instant reload

Tasks:

Configure all new signals with autoFlashState
Set appropriate TTLs for different data types
Add clear functionality per panel

Phase 4: Backend API Integration (Priority: High)

Goal: Ensure backend emits all events correctly

Tasks:

Update CommandCenterGateway (apis/backend-ai-api/src/app/command-center/command-center.gateway.ts)
- Add new event handlers
- Broadcast pipeline status changes
- Broadcast learning triggers
Update CommandCenter Client (MCP/mcp-development-ai/src/services/command-center.ts)
- Add new methods: mcpInitStarted(), preflightCompleted(), etc.
- Add automatic event emission in lifecycle hooks
Hook into Embedding Service
- Emit decision.embedded when embedding completes
Hook into Golden Promotion Logic
- Emit decision.promoted-to-golden on promotion

Phase 5: Testing & Documentation (Priority: Medium)

Tasks:

Test complete workflow visualization
Test multi-agent orchestration display
Test persistence across refreshes
Document new events in MCP docs
Update command-center documentation

📊 Success Metrics

Metric	Target
Workflow Stages Visualized	8/8 (100%)
Event Coverage	All 24 MCP tools emit events
Latency	<100ms from event to UI update
Persistence	All workflow state persists correctly
Multi-Agent Display	Real-time orchestration visualization
User Feedback	"I can see the complete MCP process"

🎯 Benefits

Complete Visibility: See entire MCP lifecycle, not just decisions
Debugging: Understand where in the workflow issues occur
Learning: Watch how MCP learns and improves
Multi-Agent Tracking: Visualize complex orchestration
Performance Monitoring: Identify slow stages
Educational: Perfect for onboarding new developers

🚀 Next Steps

Review Proposal: Confirm scope and approach
Backend Events: Implement event broadcasting first
Frontend Components: Build workflow visualization UI
Integration: Connect frontend to backend events
Testing: Validate complete workflow display
Documentation: Update MCP command-center docs

📝 Open Questions

Should we show historical sessions in a separate tab?
Do we want filtering by event type?
Should we add export functionality for workflow traces?
Do we need real-time performance metrics (events/sec)?
Should we add notifications for critical events?

Status: 🚧 Awaiting approval to proceed with implementation

Estimated Time:

Backend Events: 4-6 hours
Frontend UI: 6-8 hours
Integration & Testing: 2-3 hours
Total: 12-17 hours

Priority: High (transforms Command Center into true MCP mission control)

🎯 Command Center - Complete MCP Workflow Visualization

📋 Problem Statement

🔍 Complete MCP Workflow Analysis

1. MCP Init Dashboard (mcp_init)

2. Preflight Context (preflight)

3. Task Execution (Mode-Dependent)

A. Quick Mode (Single Agent)

B. Orchestrated Mode (Multi-Agent)

4. Decision Logging (log_decision)

5. 3-Tier Decision Pipeline

6. Outcome Reporting (report_outcome)

7. Pattern Mining (mine_patterns)

8. Session Lifecycle

🎨 Proposed UI Enhancement

New Workflow Visualization Panel

🔌 Required Backend Events

New WebSocket Events to Implement

🏗️ Implementation Plan

Phase 1: Backend Event Broadcasting (Priority: High)

Phase 2: Frontend Visualization (Priority: High)

Phase 3: Flash-Persistence Integration (Priority: Medium)

Phase 4: Backend API Integration (Priority: High)

Phase 5: Testing & Documentation (Priority: Medium)

📊 Success Metrics

🎯 Benefits

🚀 Next Steps

📝 Open Questions

1. MCP Init Dashboard (`mcp_init`)

2. Preflight Context (`preflight`)

4. Decision Logging (`log_decision`)

6. Outcome Reporting (`report_outcome`)

7. Pattern Mining (`mine_patterns`)