SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/simon/data/index.php

<?php
declare(strict_types=1);
header('Content-Type: text/html; charset=UTF-8');
header('Cache-Control: no-store');
?><!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>SIMON Phase 3 — Evolution Control</title>
<style>
:root{--bg:#050510;--panel:rgba(14,18,40,.78);--line:rgba(126,221,255,.22);--text:#eef8ff;--muted:#9aabc7;--cyan:#53e6ff;--violet:#9c72ff;--pink:#ff66c4;--green:#55f2a4;--red:#ff6c82;--gold:#ffd36a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 20%,rgba(83,230,255,.12),transparent 30%),radial-gradient(circle at 80% 15%,rgba(156,114,255,.13),transparent 32%),radial-gradient(circle at 50% 90%,rgba(255,102,196,.09),transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}body{padding:20px}.shell{max-width:1500px;margin:auto}.top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}.title{font-size:clamp(28px,5vw,60px);margin:6px 0 0;line-height:1}.sub{color:var(--muted);max-width:850px;margin-top:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:750}.btn:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(83,230,255,.18)}.btn.primary{background:linear-gradient(135deg,rgba(83,230,255,.22),rgba(156,114,255,.22))}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px}.card{grid-column:span 3;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;backdrop-filter:blur(14px);box-shadow:0 12px 36px rgba(0,0,0,.25)}.card.wide{grid-column:span 6}.card.full{grid-column:1/-1}.metric{font-size:34px;font-weight:900;margin-top:7px}.label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.flow{height:260px;position:relative;overflow:hidden}.infinity{position:absolute;inset:18px;display:grid;place-items:center;font-size:min(22vw,280px);font-family:Georgia,serif;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(83,230,255,.45);text-shadow:0 0 34px rgba(83,230,255,.28),0 0 70px rgba(156,114,255,.2)}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 18px;border-radius:999px;background:#091224;border:1px solid var(--cyan);font-weight:900;box-shadow:0 0 32px rgba(83,230,255,.35);text-align:center}.looplabel{position:absolute;font-weight:800;color:var(--muted);font-size:12px;letter-spacing:.13em}.left{left:8%;top:16%}.right{right:8%;top:16%}.outer{left:50%;bottom:7%;transform:translateX(-50%);color:var(--pink)}.list{display:grid;gap:9px;margin-top:12px}.item{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);padding:11px;border-radius:12px}.row{display:flex;gap:10px;align-items:center;justify-content:space-between}.pill{padding:4px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:var(--muted)}.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--gold)}.muted{color:var(--muted)}form{display:grid;gap:10px}input,select,textarea{width:100%;background:#080d1d;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px}textarea{min-height:74px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.log{max-height:330px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.tiny{font-size:11px}.score{font-size:24px;font-weight:900}.bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:7px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}.empty{padding:20px;text-align:center;color:var(--muted)}
@media(max-width:980px){.card,.card.wide{grid-column:span 6}.flow{height:210px}}@media(max-width:640px){body{padding:12px}.card,.card.wide{grid-column:1/-1}.two{grid-template-columns:1fr}.flow{height:180px}.hub{font-size:11px}.infinity{font-size:52vw}}
</style></head><body><div class="shell">
<div class="top"><div><div class="eyebrow">SIMON Intelligence · Phase 3</div><h1 class="title">Evolution Control</h1><div class="sub">Build candidates, test them, run shadow comparisons, stage canary traffic, and roll back safely. The point is controlled evolution, not letting an enthusiastic function redecorate production.</div></div><div class="actions"><button class="btn" onclick="refresh()">Refresh</button><button class="btn" onclick="seedDemo()">Load Demo Cycle</button><button class="btn primary" onclick="document.querySelector('#cycleForm').scrollIntoView({behavior:'smooth'})">New Evolution Cycle</button></div></div>
<div class="grid">
<div class="card"><div class="label">Manifest Functions</div><div class="metric" id="mFunctions">0</div></div>
<div class="card"><div class="label">Active Cycles</div><div class="metric" id="mCycles">0</div></div>
<div class="card"><div class="label">Candidates</div><div class="metric" id="mCandidates">0</div></div>
<div class="card"><div class="label">Deployments</div><div class="metric" id="mDeployments">0</div></div>
<div class="card full flow"><div class="infinity">∞</div><div class="looplabel left">DISCOVER · COMPARE · DESIGN</div><div class="looplabel right">EXECUTE · OBSERVE · LEARN</div><div class="hub">CONNLINK<br>FUNCTION EXCHANGE</div><div class="looplabel outer">SIMON EVOLUTION MERGE</div></div>
<div class="card wide"><div class="label">Start cycle</div><form id="cycleForm"><div class="two"><input name="role" placeholder="Role: telemetry.event.record" required><input name="current_version" value="1.0.0" placeholder="Current version"></div><div class="two"><select name="trigger"><option value="manual_review">Manual review</option><option value="duplicate_functions_detected">Duplicate functions detected</option><option value="runtime_performance_decline">Runtime performance decline</option><option value="security_finding">Security finding</option><option value="provider_change">Provider change</option></select><select name="authority"><option value="approval_required">Approval required</option><option value="advisory">Advisory</option><option value="supervised">Supervised</option></select></div><div class="two"><input name="risk" type="number" step="0.01" min="0" max="1" value="0.25" placeholder="Risk"><input name="confidence" type="number" step="0.01" min="0" max="1" value="0.75" placeholder="Confidence"></div><button class="btn primary">Start Evolution Cycle</button></form></div>
<div class="card wide"><div class="label">Create candidate</div><form id="candidateForm"><select name="cycle_id" id="candidateCycle" required><option value="">Select cycle</option></select><div class="two"><input name="name" placeholder="Candidate name" required><select name="strategy"><option value="refactor">Refactor</option><option value="merge_and_normalize">Merge and normalize</option><option value="performance">Performance</option><option value="security_hardening">Security hardening</option><option value="compatibility_wrapper">Compatibility wrapper</option></select></div><textarea name="description" placeholder="What this candidate improves"></textarea><button class="btn primary">Create Candidate</button></form></div>
<div class="card wide"><div class="label">Evolution cycles</div><div id="cycles" class="list"></div></div>
<div class="card wide"><div class="label">Candidates and tests</div><div id="candidates" class="list"></div></div>
<div class="card wide"><div class="label">Canary deployments</div><div id="deployments" class="list"></div></div>
<div class="card wide"><div class="label">Evolution event stream</div><div id="events" class="list log"></div></div>
</div></div>
<script>
const api='evolution_api.php'; let state=null;
async function call(action,payload={}){const r=await fetch(api+'?action='+encodeURIComponent(action),{method:action==='status'?'GET':'POST',headers:{'Content-Type':'application/json'},body:action==='status'?null:JSON.stringify(payload)});const j=await r.json();if(!j.ok)throw new Error(j.error||'Request failed');return j.result}
function esc(v){return String(v??'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}
function pill(s){const c=['completed','canonical','canary_ready','shadow_ready'].includes(s)?'ok':['revision_required','rolled_back','failed'].includes(s)?'bad':'warn';return `<span class="pill ${c}">${esc(s)}</span>`}
async function refresh(){try{state=await call('status');render()}catch(e){alert(e.message)}}
function render(){const c=state.counts||{};mFunctions.textContent=c.manifest_functions||0;mCycles.textContent=c.active_cycles||0;mCandidates.textContent=c.candidates||0;mDeployments.textContent=c.deployments||0;
cycles.innerHTML=(state.cycles||[]).map(x=>`<div class="item"><div class="row"><b>${esc(x.role)}</b>${pill(x.status)}</div><div class="tiny muted">${esc(x.cycle_id)} · v${esc(x.current_version)} · ${esc(x.trigger)}</div><div class="tiny">Risk ${Math.round((x.risk||0)*100)}% · Confidence ${Math.round((x.confidence||0)*100)}%</div></div>`).join('')||'<div class="empty">No evolution cycles.</div>';
candidateCycle.innerHTML='<option value="">Select cycle</option>'+(state.cycles||[]).map(x=>`<option value="${esc(x.cycle_id)}">${esc(x.role)} · ${esc(x.status)}</option>`).join('');
candidates.innerHTML=(state.candidates||[]).map(x=>{const score=x.score==null?'Not tested':x.score+'%';return `<div class="item"><div class="row"><b>${esc(x.name)}</b>${pill(x.status)}</div><div class="tiny muted">${esc(x.role)} · v${esc(x.proposed_version)} · ${esc(x.strategy)}</div><div class="row"><div class="score">${score}</div><div class="actions">${x.status==='ready_for_test'||x.status==='revision_required'?`<button class="btn" onclick="testCandidate('${esc(x.candidate_id)}')">Run Tests</button>`:''}${x.status==='shadow_ready'?`<button class="btn" onclick="shadow('${esc(x.candidate_id)}')">Shadow Run</button>`:''}${x.status==='canary_ready'?`<button class="btn primary" onclick="canary('${esc(x.candidate_id)}')">Start 5% Canary</button>`:''}</div></div>${x.score!=null?`<div class="bar"><i style="width:${Math.min(100,x.score)}%"></i></div>`:''}</div>`}).join('')||'<div class="empty">No candidates.</div>';
deployments.innerHTML=(state.deployments||[]).map(x=>`<div class="item"><div class="row"><b>${esc(x.role)} · ${esc(x.traffic_percent)}%</b>${pill(x.status)}</div><div class="tiny muted">${esc(x.deployment_id)} · v${esc(x.version)}</div><div class="actions" style="margin-top:8px">${x.status==='active'?`<button class="btn" onclick="advance('${esc(x.deployment_id)}',25)">25%</button><button class="btn" onclick="advance('${esc(x.deployment_id)}',50)">50%</button><button class="btn primary" onclick="advance('${esc(x.deployment_id)}',100)">Promote 100%</button><button class="btn" onclick="rollback('${esc(x.deployment_id)}')">Rollback</button>`:''}</div></div>`).join('')||'<div class="empty">No deployments.</div>';
events.innerHTML=(state.events||[]).map(x=>`<div class="item"><div class="row"><b>${esc(x.type)}</b><span class="tiny muted">${esc(x.created_at)}</span></div><div class="tiny muted">${esc(JSON.stringify(x.data))}</div></div>`).join('')||'<div class="empty">No events.</div>'}
document.querySelector('#cycleForm').addEventListener('submit',async e=>{e.preventDefault();const p=Object.fromEntries(new FormData(e.target));p.risk=Number(p.risk);p.confidence=Number(p.confidence);try{await call('start_cycle',p);e.target.reset();refresh()}catch(err){alert(err.message)}});
document.querySelector('#candidateForm').addEventListener('submit',async e=>{e.preventDefault();const p=Object.fromEntries(new FormData(e.target));try{await call('create_candidate',p);e.target.reset();refresh()}catch(err){alert(err.message)}});
async function seedDemo(){try{await call('seed_demo');refresh()}catch(e){alert(e.message)}}
async function testCandidate(id){try{await call('run_test',{candidate_id:id});refresh()}catch(e){alert(e.message)}}
async function shadow(id){try{await call('run_shadow',{candidate_id:id});refresh()}catch(e){alert(e.message)}}
async function canary(id){try{await call('start_canary',{candidate_id:id,percent:5});refresh()}catch(e){alert(e.message)}}
async function advance(id,p){try{await call('advance_canary',{deployment_id:id,percent:p});refresh()}catch(e){alert(e.message)}}
async function rollback(id){const reason=prompt('Rollback reason','Manual safety rollback');if(reason===null)return;try{await call('rollback',{deployment_id:id,reason});refresh()}catch(e){alert(e.message)}}
refresh();
</script></body></html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump