GlyphRunner System
441 lines
14 KiB
JavaScript
Executable File
441 lines
14 KiB
JavaScript
Executable File
/**
|
|
* XIC Pipeline Monitor - Real-time Telemetry Dashboard
|
|
* Subscribes to FedMart telemetry feed and renders live pipeline state
|
|
*/
|
|
|
|
class XICMonitor {
|
|
constructor() {
|
|
this.ws = null;
|
|
this.telemetryBuffer = [];
|
|
this.currentRun = null;
|
|
this.glyphs = new Map(); // glyph_id → metrics
|
|
this.specStatus = {};
|
|
this.isConnected = false;
|
|
|
|
this.connectBtn = document.getElementById('connectBtn');
|
|
this.runStatusEl = document.getElementById('runStatus');
|
|
this.timelineContent = document.getElementById('timelineContent');
|
|
this.stepCountEl = document.getElementById('stepCount');
|
|
this.execTimeEl = document.getElementById('execTime');
|
|
this.heatmapCanvas = document.getElementById('heatmapCanvas');
|
|
this.glyphDetailsEl = document.getElementById('glyphDetails');
|
|
this.glyphSelect = document.getElementById('glyphSelect');
|
|
this.inspectorContent = document.getElementById('inspectorContent');
|
|
this.guardrailList = document.getElementById('guardrailList');
|
|
this.pauseBtn = document.getElementById('pauseBtn');
|
|
this.throttleBtn = document.getElementById('throttleBtn');
|
|
this.specStatusEl = document.getElementById('specStatus');
|
|
|
|
this.initEventListeners();
|
|
this.initCanvas();
|
|
}
|
|
|
|
initEventListeners() {
|
|
this.connectBtn.addEventListener('click', () => this.connectToFeed());
|
|
this.glyphSelect.addEventListener('change', (e) => this.showGlyphMetrics(e.target.value));
|
|
this.pauseBtn.addEventListener('click', () => this.pauseRun());
|
|
this.throttleBtn.addEventListener('click', () => this.throttleRun());
|
|
}
|
|
|
|
initCanvas() {
|
|
this.ctx = this.heatmapCanvas.getContext('2d');
|
|
this.drawHeatmapPlaceholder();
|
|
}
|
|
|
|
connectToFeed() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
const wsUrl = `${protocol}://${window.location.host}/ws/fedmart/xic`;
|
|
|
|
console.log(`[XIC] Connecting to ${wsUrl}`);
|
|
this.connectBtn.disabled = true;
|
|
this.connectBtn.textContent = 'Connecting...';
|
|
|
|
this.ws = new WebSocket(wsUrl);
|
|
|
|
this.ws.onopen = () => {
|
|
console.log('[XIC] WebSocket connected');
|
|
this.setStatus('Connected', 'active');
|
|
this.connectBtn.textContent = 'Connected ✓';
|
|
this.isConnected = true;
|
|
};
|
|
|
|
this.ws.onmessage = (event) => {
|
|
try {
|
|
const telemetry = JSON.parse(event.data);
|
|
this.processTelemetry(telemetry);
|
|
} catch (e) {
|
|
console.error('[XIC] Failed to parse telemetry:', e);
|
|
}
|
|
};
|
|
|
|
this.ws.onerror = (error) => {
|
|
console.error('[XIC] WebSocket error:', error);
|
|
this.setStatus('Connection Error', 'error');
|
|
this.connectBtn.textContent = 'Reconnect';
|
|
this.connectBtn.disabled = false;
|
|
this.isConnected = false;
|
|
};
|
|
|
|
this.ws.onclose = () => {
|
|
console.log('[XIC] WebSocket closed');
|
|
this.setStatus('Disconnected', 'error');
|
|
this.connectBtn.textContent = 'Connect to Feed';
|
|
this.connectBtn.disabled = false;
|
|
this.isConnected = false;
|
|
};
|
|
}
|
|
|
|
processTelemetry(telemetry) {
|
|
this.telemetryBuffer.push(telemetry);
|
|
this.currentRun = telemetry;
|
|
|
|
// Update timeline
|
|
this.renderTimeline(telemetry);
|
|
|
|
// Update glyph data
|
|
if (telemetry.resonance_map_summary && telemetry.resonance_map_summary.top_glyphs) {
|
|
this.updateGlyphData(telemetry.resonance_map_summary.top_glyphs);
|
|
this.populateGlyphSelector(telemetry.glyph_ids || []);
|
|
}
|
|
|
|
// Update heatmap
|
|
if (telemetry.resonance_map_summary && telemetry.resonance_map_summary.top_glyphs) {
|
|
this.renderHeatmap(telemetry.resonance_map_summary.top_glyphs, telemetry.global_resonance_score);
|
|
}
|
|
|
|
// Update guardrails
|
|
if (telemetry.guardrails_triggered && telemetry.guardrails_triggered.length > 0) {
|
|
this.showGuardrailAlerts(telemetry.guardrails_triggered);
|
|
} else {
|
|
this.clearGuardrailAlerts();
|
|
}
|
|
|
|
// Update spec status if available
|
|
if (telemetry.spec_status) {
|
|
this.updateSpecStatus(telemetry.spec_status);
|
|
}
|
|
|
|
// Update control button states
|
|
this.updateControlButtons(telemetry);
|
|
}
|
|
|
|
renderTimeline(telemetry) {
|
|
// Clear existing timeline
|
|
this.timelineContent.innerHTML = '';
|
|
|
|
// Parse steps from telemetry
|
|
const steps = [];
|
|
const rawPayload = telemetry.raw_payload || {};
|
|
|
|
// Add initial step
|
|
if (telemetry.program) {
|
|
steps.push({
|
|
name: `Program: ${telemetry.program}`,
|
|
kind: 'program',
|
|
timestamp: telemetry.timestamp,
|
|
});
|
|
}
|
|
|
|
// Add chain label if present
|
|
if (telemetry.chain_label) {
|
|
steps.push({
|
|
name: `Chain: ${telemetry.chain_label}`,
|
|
kind: 'chain',
|
|
timestamp: telemetry.timestamp,
|
|
});
|
|
}
|
|
|
|
// Add multi-glyph resonance step if glyphs present
|
|
if (telemetry.glyph_count > 0) {
|
|
steps.push({
|
|
name: `Multi-Glyph Resonance (${telemetry.glyph_count} glyphs)`,
|
|
kind: 'glyph',
|
|
timestamp: telemetry.timestamp,
|
|
});
|
|
}
|
|
|
|
// Add guardrail step if triggered
|
|
if (telemetry.guardrails_triggered && telemetry.guardrails_triggered.length > 0) {
|
|
steps.push({
|
|
name: `Guardrail: ${telemetry.guardrails_triggered[0]}`,
|
|
kind: 'guardrail',
|
|
timestamp: telemetry.timestamp,
|
|
});
|
|
}
|
|
|
|
// Add fusion step if fused symbol present
|
|
if (rawPayload.fused_symbol_summary) {
|
|
steps.push({
|
|
name: 'Fusion',
|
|
kind: 'fused_symbol',
|
|
timestamp: telemetry.timestamp,
|
|
});
|
|
}
|
|
|
|
// Render steps
|
|
if (steps.length === 0) {
|
|
this.timelineContent.innerHTML = '<p class="placeholder">No execution steps</p>';
|
|
} else {
|
|
steps.forEach((step) => {
|
|
const stepEl = document.createElement('div');
|
|
stepEl.className = `timeline-step ${step.kind}`;
|
|
stepEl.innerHTML = `<strong>${step.name}</strong>`;
|
|
this.timelineContent.appendChild(stepEl);
|
|
});
|
|
}
|
|
|
|
// Update metadata
|
|
this.stepCountEl.textContent = `Steps: ${steps.length}`;
|
|
this.execTimeEl.textContent = `Time: ${telemetry.steps_executed * 10}ms`; // Estimate
|
|
}
|
|
|
|
updateGlyphData(topGlyphs) {
|
|
this.glyphs.clear();
|
|
topGlyphs.forEach((glyph) => {
|
|
this.glyphs.set(glyph.glyph_id, {
|
|
weight: glyph.weight,
|
|
id: glyph.glyph_id,
|
|
});
|
|
});
|
|
|
|
// Update glyph details
|
|
this.renderGlyphDetails(topGlyphs);
|
|
}
|
|
|
|
renderGlyphDetails(topGlyphs) {
|
|
this.glyphDetailsEl.innerHTML = '';
|
|
|
|
if (topGlyphs.length === 0) {
|
|
this.glyphDetailsEl.innerHTML = '<p class="placeholder">No glyph data</p>';
|
|
return;
|
|
}
|
|
|
|
topGlyphs.forEach((glyph) => {
|
|
const itemEl = document.createElement('div');
|
|
itemEl.className = 'glyph-item';
|
|
const percentage = (glyph.weight * 100).toFixed(1);
|
|
itemEl.innerHTML = `
|
|
<strong>${glyph.glyph_id}</strong>: ${percentage}%
|
|
`;
|
|
this.glyphDetailsEl.appendChild(itemEl);
|
|
});
|
|
}
|
|
|
|
populateGlyphSelector(glyphIds) {
|
|
const currentValue = this.glyphSelect.value;
|
|
this.glyphSelect.innerHTML = '<option value="">-- Select a glyph --</option>';
|
|
|
|
glyphIds.forEach((id) => {
|
|
const option = document.createElement('option');
|
|
option.value = id;
|
|
option.textContent = id;
|
|
this.glyphSelect.appendChild(option);
|
|
});
|
|
|
|
// Restore previous selection if still available
|
|
if (currentValue && glyphIds.includes(currentValue)) {
|
|
this.glyphSelect.value = currentValue;
|
|
}
|
|
}
|
|
|
|
showGlyphMetrics(glyphId) {
|
|
if (!glyphId || !this.glyphs.has(glyphId)) {
|
|
this.inspectorContent.innerHTML = '<p class="placeholder">Select a glyph to view metrics...</p>';
|
|
return;
|
|
}
|
|
|
|
const glyph = this.glyphs.get(glyphId);
|
|
this.inspectorContent.innerHTML = `
|
|
<div class="metric-row">
|
|
<span class="metric-label">Glyph ID</span>
|
|
<span class="metric-value">${glyphId}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Resonance Weight</span>
|
|
<span class="metric-value">${(glyph.weight * 100).toFixed(1)}%</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Status</span>
|
|
<span class="metric-value">Active</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
renderHeatmap(topGlyphs, globalScore) {
|
|
const width = this.heatmapCanvas.width;
|
|
const height = this.heatmapCanvas.height;
|
|
|
|
// Clear canvas
|
|
this.ctx.fillStyle = '#1a1a1a';
|
|
this.ctx.fillRect(0, 0, width, height);
|
|
|
|
if (topGlyphs.length === 0) {
|
|
this.ctx.fillStyle = '#666';
|
|
this.ctx.font = '14px sans-serif';
|
|
this.ctx.textAlign = 'center';
|
|
this.ctx.fillText('No glyph data', width / 2, height / 2);
|
|
return;
|
|
}
|
|
|
|
// Draw heatmap bars
|
|
const barWidth = width / topGlyphs.length;
|
|
const maxWeight = Math.max(...topGlyphs.map((g) => g.weight), globalScore);
|
|
|
|
topGlyphs.forEach((glyph, index) => {
|
|
const normalized = glyph.weight / (maxWeight || 1);
|
|
const color = this.colorForWeight(normalized);
|
|
|
|
// Draw bar
|
|
const barHeight = (normalized * height * 0.8) + 10;
|
|
const x = index * barWidth;
|
|
const y = height - barHeight;
|
|
|
|
this.ctx.fillStyle = color;
|
|
this.ctx.fillRect(x, y, barWidth - 2, barHeight);
|
|
|
|
// Draw label
|
|
this.ctx.fillStyle = '#e0e0e0';
|
|
this.ctx.font = '10px sans-serif';
|
|
this.ctx.textAlign = 'center';
|
|
this.ctx.fillText(glyph.glyph_id.slice(0, 6), x + barWidth / 2, height - 2);
|
|
});
|
|
|
|
// Draw border
|
|
this.ctx.strokeStyle = '#444';
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.strokeRect(0, 0, width, height);
|
|
}
|
|
|
|
drawHeatmapPlaceholder() {
|
|
const width = this.heatmapCanvas.width;
|
|
const height = this.heatmapCanvas.height;
|
|
|
|
this.ctx.fillStyle = '#1a1a1a';
|
|
this.ctx.fillRect(0, 0, width, height);
|
|
|
|
this.ctx.fillStyle = '#666';
|
|
this.ctx.font = '14px sans-serif';
|
|
this.ctx.textAlign = 'center';
|
|
this.ctx.fillText('Waiting for telemetry...', width / 2, height / 2);
|
|
|
|
this.ctx.strokeStyle = '#444';
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.strokeRect(0, 0, width, height);
|
|
}
|
|
|
|
colorForWeight(normalized) {
|
|
// Color gradient: blue (low) → green (mid) → orange (high)
|
|
if (normalized < 0.5) {
|
|
// Blue to green
|
|
const t = normalized * 2; // 0 to 1
|
|
const r = Math.round(0 * 255);
|
|
const g = Math.round(204 + (102 - 204) * (1 - t));
|
|
const b = Math.round(255);
|
|
return `rgb(${r}, ${g}, ${b})`;
|
|
} else {
|
|
// Green to orange
|
|
const t = (normalized - 0.5) * 2; // 0 to 1
|
|
const r = Math.round(153 + (255 - 153) * t);
|
|
const g = Math.round(204 - (204 - 153) * t);
|
|
const b = 0;
|
|
return `rgb(${r}, ${g}, ${b})`;
|
|
}
|
|
}
|
|
|
|
showGuardrailAlerts(guardrails) {
|
|
this.guardrailList.innerHTML = '';
|
|
|
|
guardrails.forEach((guardrail) => {
|
|
const eventEl = document.createElement('div');
|
|
eventEl.className = 'guardrail-event warning';
|
|
eventEl.innerHTML = `<strong>⚠ Guardrail Triggered</strong><br>${guardrail}`;
|
|
this.guardrailList.appendChild(eventEl);
|
|
});
|
|
|
|
// Enable control buttons
|
|
this.pauseBtn.disabled = false;
|
|
this.throttleBtn.disabled = false;
|
|
}
|
|
|
|
clearGuardrailAlerts() {
|
|
this.guardrailList.innerHTML = '<p class="placeholder">No guardrails triggered</p>';
|
|
this.pauseBtn.disabled = true;
|
|
this.throttleBtn.disabled = true;
|
|
}
|
|
|
|
updateControlButtons(telemetry) {
|
|
const hasGuardrails = telemetry.guardrails_triggered && telemetry.guardrails_triggered.length > 0;
|
|
|
|
if (hasGuardrails) {
|
|
this.pauseBtn.disabled = false;
|
|
this.throttleBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
updateSpecStatus(specMap) {
|
|
this.specStatusEl.innerHTML = '';
|
|
|
|
Object.entries(specMap).forEach(([instruction, status]) => {
|
|
const entryEl = document.createElement('div');
|
|
entryEl.className = `spec-entry ${status.status}`;
|
|
|
|
entryEl.innerHTML = `
|
|
<div class="spec-entry-name">${instruction}</div>
|
|
<span class="spec-entry-status">${status.status.toUpperCase()}</span>
|
|
<div style="font-size: 11px; color: #aaa; margin-top: 4px;">Phase ${status.phase} · ${status.coverage}% coverage</div>
|
|
`;
|
|
|
|
this.specStatusEl.appendChild(entryEl);
|
|
});
|
|
}
|
|
|
|
pauseRun() {
|
|
if (!this.currentRun) return;
|
|
|
|
const runId = this.currentRun.run_id || 'unknown';
|
|
console.log(`[XIC] Pausing run ${runId}`);
|
|
|
|
fetch('/fedmart/control/pause', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ run_id: runId }),
|
|
})
|
|
.then((r) => r.json())
|
|
.then((data) => {
|
|
console.log('[XIC] Pause response:', data);
|
|
this.setStatus('Run Paused ⏸', 'warning');
|
|
})
|
|
.catch((e) => console.error('[XIC] Pause failed:', e));
|
|
}
|
|
|
|
throttleRun() {
|
|
if (!this.currentRun) return;
|
|
|
|
const runId = this.currentRun.run_id || 'unknown';
|
|
console.log(`[XIC] Throttling run ${runId}`);
|
|
|
|
fetch('/fedmart/control/throttle', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ run_id: runId, factor: 0.5 }),
|
|
})
|
|
.then((r) => r.json())
|
|
.then((data) => {
|
|
console.log('[XIC] Throttle response:', data);
|
|
this.setStatus('Run Throttled 50%', 'warning');
|
|
})
|
|
.catch((e) => console.error('[XIC] Throttle failed:', e));
|
|
}
|
|
|
|
setStatus(text, cssClass) {
|
|
this.runStatusEl.textContent = text;
|
|
this.runStatusEl.className = `run-status ${cssClass}`;
|
|
}
|
|
}
|
|
|
|
// Initialize monitor when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.xicMonitor = new XICMonitor();
|
|
console.log('[XIC] Monitor initialized. Click "Connect to Feed" to start.');
|
|
});
|