init commit
This commit is contained in:
254
docs/index.html
Normal file
254
docs/index.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user