255 lines
6.5 KiB
HTML
255 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Stellar Air — NOVA Platform Architecture</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: #0a0e17;
|
||
color: #e8eaf0;
|
||
font-family: 'Inter', sans-serif;
|
||
line-height: 1.6;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
header {
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid #1e2a4a;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
header h1 {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
letter-spacing: 3px;
|
||
color: #0066ff;
|
||
}
|
||
|
||
header .subtitle {
|
||
font-size: 13px;
|
||
color: #4a5568;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.layout {
|
||
display: flex;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
width: 200px;
|
||
flex-shrink: 0;
|
||
background: #121829;
|
||
border-right: 1px solid #1e2a4a;
|
||
padding: 8px 0;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
nav a {
|
||
padding: 10px 20px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 12px;
|
||
color: #8892a8;
|
||
text-decoration: none;
|
||
border-left: 2px solid transparent;
|
||
transition: all 0.15s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
nav a:hover { color: #e8eaf0; background: #1a2340; }
|
||
nav a.active { color: #0066ff; border-left-color: #0066ff; background: #0d1a33; }
|
||
|
||
main {
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: 32px 48px;
|
||
}
|
||
|
||
.graph-section {
|
||
display: none;
|
||
animation: fadeIn 0.2s ease;
|
||
}
|
||
|
||
.graph-section.active { display: block; }
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.graph-section h2 {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #8892a8;
|
||
margin-bottom: 8px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.graph-section p {
|
||
font-size: 13px;
|
||
color: #4a5568;
|
||
margin-bottom: 24px;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.graph-container {
|
||
background: #0a0e17;
|
||
border: 1px solid #1e2a4a;
|
||
padding: 24px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.graph-container img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.legend {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin-top: 16px;
|
||
font-size: 11px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
color: #4a5568;
|
||
}
|
||
|
||
.legend span::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-right: 6px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.legend .live::before { background: #00c853; }
|
||
.legend .mock::before { background: #ffc107; }
|
||
.legend .mcp::before { background: #0066ff; }
|
||
.legend .ops::before { background: #ff3d00; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>STELLAR AIR</h1>
|
||
<span class="subtitle">NOVA Operations Platform — Architecture</span>
|
||
</header>
|
||
|
||
<div class="layout">
|
||
|
||
<nav>
|
||
<a class="active" onclick="show('system')">System</a>
|
||
<a onclick="show('mcp')">MCP Servers</a>
|
||
<a onclick="show('efhas')">FCE Agent</a>
|
||
<a onclick="show('handover')">Handover Agent</a>
|
||
<a onclick="show('data')">Data Flow</a>
|
||
<a onclick="show('deploy')">Deployment</a>
|
||
<a onclick="show('repo')">Repository</a>
|
||
</nav>
|
||
|
||
<main>
|
||
|
||
<section id="system" class="graph-section active">
|
||
<h2>SYSTEM ARCHITECTURE</h2>
|
||
<p>End-to-end view: Vue UI → Kong gateway → FastAPI → MCP servers → live and scenario data sources. Langfuse traces every agent run.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/system_architecture.svg" alt="System Architecture">
|
||
</div>
|
||
<div class="legend">
|
||
<span class="live">Live API</span>
|
||
<span class="mock">Scenario data</span>
|
||
<span class="mcp">MCP protocol</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="mcp" class="graph-section">
|
||
<h2>MCP SERVER TOPOLOGY</h2>
|
||
<p>Three servers scoped by access domain. Each exposes tools, resources, and prompts. FCE connects to shared + passenger. Handover connects to shared + ops.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/mcp_servers.svg" alt="MCP Servers">
|
||
</div>
|
||
<div class="legend">
|
||
<span class="mcp">Shared server</span>
|
||
<span class="ops">Ops server</span>
|
||
<span class="live">Passenger server</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="efhas" class="graph-section">
|
||
<h2>FCE AGENT — BEHIND EVERY DEPARTURE</h2>
|
||
<p>Passenger notification agent. Triages flight status, gathers context from 5 parallel tool calls (including live weather and FAA data), synthesizes an empathetic notification.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/efhas_agent.svg" alt="FCE Agent">
|
||
</div>
|
||
</section>
|
||
|
||
<section id="handover" class="graph-section">
|
||
<h2>SHIFT HANDOVER AGENT</h2>
|
||
<p>Ops briefing agent. Scans all hubs in parallel, scores issues by severity × time sensitivity, categorizes into IMMEDIATE / MONITOR / FYI, generates a structured brief.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/handover_agent.svg" alt="Handover Agent">
|
||
</div>
|
||
</section>
|
||
|
||
<section id="data" class="graph-section">
|
||
<h2>DATA FLOW — REAL vs MOCK</h2>
|
||
<p>Weather and FAA airport status are live (no API key). Flight, crew, passenger, and maintenance data are scenario-based fixtures switchable from the UI.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/data_flow.svg" alt="Data Flow">
|
||
</div>
|
||
<div class="legend">
|
||
<span class="live">Live data (no API key)</span>
|
||
<span class="mock">Scenario data (switchable)</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="deploy" class="graph-section">
|
||
<h2>DEPLOYMENT</h2>
|
||
<p>Kind cluster for dev (Tilt), docker-compose for quick start, EC2 for production demo. Entry point: localhost:8040.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/deployment.svg" alt="Deployment">
|
||
</div>
|
||
</section>
|
||
|
||
<section id="repo" class="graph-section">
|
||
<h2>REPOSITORY STRUCTURE</h2>
|
||
<p>Monorepo: MCP servers, agents, IRROP engine, API, Vue UI (with shared component framework), and deployment configs.</p>
|
||
<div class="graph-container">
|
||
<img src="graphs/repo_structure.svg" alt="Repository Structure">
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function show(id) {
|
||
document.querySelectorAll('.graph-section').forEach(s => s.classList.remove('active'));
|
||
document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
event.currentTarget.classList.add('active');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|