# 6-Week MVP UX Specification

**Goal:** Modernize the nJAMS paradigm to deliver a slick, fast, and highly intuitive User Experience for Day 2 operations of Apache Camel solutions.

## Core Philosophy
- **Speed & Navigation:** Zero full-page reloads for drill-downs. Keyboard-centric navigation.
- **Context over Clatter:** Present information progressively. Give operators the high-level business context first, then allow seamless deep dives into technical execution.
- **Visual Clarity:** Replace static tables with visual topologies where relationships and flows matter.

## 1. Global "Business-Entity First" Dashboard
**The Old Paradigm:** A list of servers, nodes, or integration processes with green/red status lights.
**The New Paradigm:** An aggregated view of the business objects flowing through the system.
- **Key Elements:**
  - High-level KPI cards (e.g., "Orders Processed", "Invoices Failed").
  - A timeline or heatmap of activity spikes.
  - Global Search prominently displayed, defaulting to Business Correlation IDs (e.g., "Order #12345").
- **MVP Scope:** A single dashboard page showing the health of the top 3-5 configured business flows and recent critical alerts.

## 2. Route Topology View
**The Old Paradigm:** A static, paginated table listing steps in an integration route.
**The New Paradigm:** A visual, interactive map of the Camel route.
- **Key Elements:**
  - Nodes representing Camel components (Endpoints, Processors, EIPs).
  - Edges showing the message flow, with color-coding for success/failure rates.
  - Selecting a node highlights its metrics (throughput, error rate) without leaving the view.
- **MVP Scope:** Auto-generated Directed Acyclic Graph (DAG) visualizations for individual Camel routes, utilizing standard libraries (e.g., React Flow).

## 3. Trace/Payload Drill-down Drawer
**The Old Paradigm:** Clicking a trace opens a new page. Clicking a payload downloads a file or opens yet another page. Losing context is easy.
**The New Paradigm:** Contextual slide-outs (Drawers).
- **Key Elements:**
  - When investigating a specific failed exchange from the Topology or Dashboard, a side drawer slides in from the right.
  - The drawer contains tabs: **Headers**, **Properties**, **Payload**, **Stacktrace**.
  - Users can view JSON/XML payloads with syntax highlighting directly in the drawer.
  - Closing the drawer instantly returns the user to the exact context they were in (Dashboard or Topology).
- **MVP Scope:** Right-side slide-out component with basic syntax highlighting for standard payload types, preventing context loss during troubleshooting.

## The Power User Enabler: Cmd+K Command Palette
To tie it all together and ensure lightning-fast navigation for power users (IT Ops, Developers):
- A globally accessible `Cmd+K` (or `Ctrl+K`) modal.
- **Actions supported in MVP:**
  - Search by Correlation ID: "Find Order 998877"
  - Jump to Route: "Go to Route: SAP-to-Salesforce"
  - Change environments: "Switch to Staging"
  - Quick filters: "Show recent failures"
- **Why?** It drastically reduces click-depth and mouse travel, aligning with modern developer tool expectations (e.g., Linear, Raycast, Vscode).