88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>XIC Pipeline Monitor - FedMart</title>
|
||
|
|
<link rel="stylesheet" href="xic_panel.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="xic-monitor-container">
|
||
|
|
<header class="xic-header">
|
||
|
|
<h1>XIC Symbolic Pipeline Monitor</h1>
|
||
|
|
<div class="header-info">
|
||
|
|
<span class="run-status" id="runStatus">Ready</span>
|
||
|
|
<button id="connectBtn" class="btn-primary">Connect to Feed</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="xic-main">
|
||
|
|
<!-- Pipeline Timeline Panel -->
|
||
|
|
<section class="panel run-timeline">
|
||
|
|
<h2>Pipeline Execution Timeline</h2>
|
||
|
|
<div class="timeline-content" id="timelineContent">
|
||
|
|
<p class="placeholder">Waiting for pipeline execution...</p>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-meta">
|
||
|
|
<span id="stepCount">Steps: 0</span>
|
||
|
|
<span id="execTime">Time: 0ms</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Resonance Heatmap Panel -->
|
||
|
|
<section class="panel resonance-heatmap">
|
||
|
|
<h2>Glyph Resonance Heatmap</h2>
|
||
|
|
<div class="heatmap-legend">
|
||
|
|
<span><strong>Weight Scale:</strong></span>
|
||
|
|
<div class="legend-bar">
|
||
|
|
<span class="low">0.0</span>
|
||
|
|
<span class="mid">0.5</span>
|
||
|
|
<span class="high">1.0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<canvas id="heatmapCanvas" width="600" height="200"></canvas>
|
||
|
|
<div id="glyphDetails" class="glyph-details"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Glyph Inspector Panel -->
|
||
|
|
<section class="panel glyph-inspector">
|
||
|
|
<h2>Glyph Resonance Inspector</h2>
|
||
|
|
<div class="inspector-toolbar">
|
||
|
|
<label for="glyphSelect">Select Glyph:</label>
|
||
|
|
<select id="glyphSelect"></select>
|
||
|
|
</div>
|
||
|
|
<div id="inspectorContent" class="inspector-content">
|
||
|
|
<p class="placeholder">Select a glyph to view metrics...</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Guardrail Control Panel -->
|
||
|
|
<section class="panel guardrail-control">
|
||
|
|
<h2>Guardrail Status & Control</h2>
|
||
|
|
<div id="guardrailList" class="guardrail-list">
|
||
|
|
<p class="placeholder">No guardrails triggered</p>
|
||
|
|
</div>
|
||
|
|
<div class="control-buttons">
|
||
|
|
<button id="pauseBtn" class="btn-warning" disabled>⏸ Pause Run</button>
|
||
|
|
<button id="throttleBtn" class="btn-warning" disabled>⚠ Throttle 50%</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Spec Coverage Panel -->
|
||
|
|
<section class="panel spec-coverage">
|
||
|
|
<h2>XIC Specification Coverage</h2>
|
||
|
|
<div id="specStatus" class="spec-status">
|
||
|
|
<p class="placeholder">Loading specification status...</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="xic-footer">
|
||
|
|
<p>XIC v1.5 Symbolic Pipeline | Real-time Telemetry via FedMart</p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="xic_panel.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|