Files
html/wevia-cockpit.html
Opus 4938b718a2
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
phase40 cockpit d60 + inject-direct tool
2026-04-24 13:44:09 +02:00

449 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WEVIA Cockpit · Tout-en-Un</title>
<style>
:root{
--bg:#0a0a0f;--panel:rgba(18,18,26,0.7);--border:rgba(255,255,255,0.08);
--ink:#e8e6e3;--ink-dim:#8b8680;--ink-faint:#5c5852;
--gold:#f6d572;--mint:#5cdb95;--coral:#ff6b6b;--cyan:#4ecdc4;--violet:#a78bfa;--orange:#ff9f43;
--font-sans:"Inter",-apple-system,system-ui,sans-serif;
--font-mono:"SF Mono",Monaco,"Cascadia Code",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);min-height:100vh;
background-image:radial-gradient(ellipse at 20% 30%,rgba(167,139,250,0.06) 0%,transparent 60%),
radial-gradient(ellipse at 80% 70%,rgba(78,205,196,0.04) 0%,transparent 60%)}
.cockpit{display:grid;grid-template-rows:60px 50px 1fr;height:100vh}
header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);background:rgba(10,10,15,0.85);backdrop-filter:blur(24px);z-index:20}
.brand{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.brand::before{content:"⚡";font-size:18px;animation:pulse 2s ease infinite}
@keyframes pulse{50%{opacity:.5}}
.health-bar{display:flex;gap:14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono)}
.h-item{display:flex;align-items:center;gap:6px;color:var(--ink-faint)}
.h-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.h-dot.ok{background:var(--mint);box-shadow:0 0 6px var(--mint)}
.h-dot.warn{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.h-dot.err{background:var(--coral);box-shadow:0 0 6px var(--coral)}
.h-val{color:var(--ink);font-weight:600}
nav.tabs{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 24px;gap:4px;background:rgba(10,10,15,0.85);backdrop-filter:blur(20px);z-index:15}
.tab{padding:14px 22px;border-radius:0;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--ink-dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s;font-family:var(--font-mono);font-weight:500}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(246,213,114,0.04)}
.tab .icon{margin-right:6px;font-size:14px}
main.content{position:relative;overflow:hidden}
.panel{position:absolute;inset:0;display:none;flex-direction:column;animation:fadeIn .3s ease}
.panel.active{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
iframe.embed{width:100%;height:100%;border:0;background:transparent}
/* Multi-server dispatch panel */
.dispatch-panel{display:grid;grid-template-columns:280px 1fr;height:100%}
.dispatch-sidebar{background:var(--panel);border-right:1px solid var(--border);padding:18px 14px;overflow-y:auto}
.ds-title{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;font-weight:500}
.server-card{padding:12px 14px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px;cursor:pointer;transition:.2s;background:rgba(0,0,0,0.2)}
.server-card:hover{border-color:var(--violet);background:rgba(167,139,250,0.05)}
.server-card.selected{border-color:var(--mint);background:rgba(92,219,149,0.08)}
.sc-name{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.sc-meta{font-size:10px;color:var(--ink-faint);font-family:var(--font-mono);line-height:1.5}
.sc-meta b{color:var(--cyan)}
.sc-load{display:inline-block;padding:1px 6px;border-radius:2px;font-size:9px;font-weight:700}
.sc-load.low{background:rgba(92,219,149,0.2);color:var(--mint)}
.sc-load.mid{background:rgba(246,213,114,0.2);color:var(--gold)}
.sc-load.hi{background:rgba(255,107,107,0.2);color:var(--coral)}
.dispatch-main{display:flex;flex-direction:column;overflow:hidden}
.dispatch-output{flex:1;overflow-y:auto;padding:20px 28px;display:flex;flex-direction:column;gap:12px}
.event-block{padding:12px 16px;border-radius:6px;background:var(--panel);border-left:3px solid var(--violet);font-family:var(--font-mono);font-size:11px}
.event-block.ok{border-left-color:var(--mint)}
.event-block.err{border-left-color:var(--coral)}
.eb-header{font-size:10px;color:var(--ink-faint);letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px;display:flex;gap:10px;align-items:center}
.eb-server{color:var(--violet);font-weight:600}
.eb-output{color:var(--ink-dim);white-space:pre-wrap;max-height:300px;overflow-y:auto;background:rgba(0,0,0,0.3);padding:8px 12px;border-radius:3px;margin-top:6px}
.dispatch-composer{padding:16px 24px;border-top:1px solid var(--border);background:rgba(10,10,15,0.95)}
.dc-row{display:flex;gap:10px;align-items:flex-end}
.dc-row textarea{flex:1;min-height:54px;max-height:180px;padding:14px 16px;background:rgba(18,18,26,0.6);border:1px solid var(--border);border-radius:6px;color:var(--ink);font-family:var(--font-sans);font-size:13px;resize:none;line-height:1.4;outline:none;transition:.2s}
.dc-row textarea:focus{border-color:var(--gold);background:rgba(18,18,26,0.9)}
.dc-btn{padding:14px 22px;background:var(--gold);color:#0a0a0f;border:none;border-radius:6px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px;cursor:pointer;transition:.2s;font-family:var(--font-mono)}
.dc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(246,213,114,0.3)}
.dc-btn:disabled{opacity:.4;cursor:not-allowed}
.dc-opts{display:flex;gap:14px;margin-top:8px;font-size:10px;color:var(--ink-faint);font-family:var(--font-mono)}
.dc-opts label{display:flex;align-items:center;gap:5px;cursor:pointer}
.welcome{padding:60px 30px;text-align:center;color:var(--ink-faint)}
.welcome h2{color:var(--violet);font-weight:300;margin-bottom:14px;font-size:22px}
.examples{margin-top:20px;display:flex;flex-direction:column;gap:6px;max-width:580px;margin-left:auto;margin-right:auto}
.ex-btn{padding:10px 14px;background:rgba(167,139,250,0.06);border:1px solid rgba(167,139,250,0.2);border-radius:4px;color:var(--ink-dim);text-align:left;cursor:pointer;font-size:12px;transition:.2s;font-family:var(--font-mono)}
.ex-btn:hover{border-color:var(--violet);color:var(--violet)}
.loader{display:inline-block;width:8px;height:8px;border:2px solid var(--border);border-top-color:var(--violet);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
.dispatch-panel{grid-template-columns:1fr}
.dispatch-sidebar{max-height:200px;border-right:0;border-bottom:1px solid var(--border)}
.health-bar{display:none}
}
/* w314fix iframe Logout hide - parent cockpit shows its own */
iframe.embed{margin-top:0!important}
/* w314 Logout reposition BL doctrine */
.brand{position:relative}
</style>
<!-- DOCTRINE-60-UX-ENRICH direct-inject-20260424-134051 -->
<style id="doctrine60-ux-direct">
/* DOCTRINE-60-UX-ENRICH injected-direct */
body::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at 50% 50%, rgba(100,180,255,0.08), transparent 60%);
pointer-events: none;
z-index: -1;
}
.card, .kpi, .panel, .btn {
transition: all 0.3s cubic-bezier(0.2,0,0.1,1);
}
.card:hover, .kpi:hover, .panel:hover {
box-shadow: 0 4px 20px rgba(100,180,255,0.2);
border-color: rgba(100,180,255,0.5);
}
@keyframes pulseD60 {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.pulse, .live-indicator, .active, .online {
animation: pulseD60 3s ease-in-out infinite;
}
.modal, .chat, .speech, .overlay {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.enter-stagger {
animation: enterStagD60 0.5s cubic-bezier(0.2,0,0.1,1) forwards;
}
@keyframes enterStagD60 {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="cockpit">
<header>
<div class="brand">WEVIA Cockpit · All-in-One</div>
<div class="health-bar" id="health-bar">
<div class="h-item"><span class="h-dot ok"></span>S204 <span class="h-val" id="h-load"></span></div>
<div class="h-item"><span class="h-dot" id="h-cdp-dot"></span>CDP <span class="h-val" id="h-cdp">—/8</span></div>
<div class="h-item"><span class="h-dot ok"></span>WTP <span class="h-val" id="h-wtp"></span></div>
<div class="h-item"><span class="h-dot" id="h-s95-dot"></span>S95</div>
<div class="h-item"><span class="h-dot" id="h-s151-dot"></span>S151</div>
<div class="h-item"><span class="h-dot ok"></span>Sovereign <span class="h-val" id="h-providers"></span></div>
</div>
</header>
<nav class="tabs">
<button class="tab active" data-panel="agent" onclick="switchTab(this)"><span class="icon"></span>Plan → Execute</button>
<button class="tab" data-panel="multichat" onclick="switchTab(this)"><span class="icon">💬</span>Multi-Chat 9 IA</button>
<button class="tab" data-panel="dispatch" onclick="switchTab(this)"><span class="icon">🌐</span>Multi-Server Dispatch</button>
<button class="tab" data-panel="vnc" onclick="switchTab(this)"><span class="icon">🖥</span>VNC Picker</button>
<button class="tab" data-panel="wtp" onclick="switchTab(this)"><span class="icon">🏛</span>WTP Master</button>
<button class="tab" data-panel="registry" onclick="switchTab(this)"><span class="icon">📋</span>WTP Registry</button>
</nav>
<main class="content">
<div class="panel active" data-name="agent">
<iframe class="embed" src="/wevia-agent.html"></iframe>
</div>
<div class="panel" data-name="multichat">
<iframe class="embed" data-src="/ai-multichat.html"></iframe>
</div>
<div class="panel" data-name="dispatch">
<div class="dispatch-panel">
<aside class="dispatch-sidebar">
<div class="ds-title">Workers disponibles</div>
<div class="server-card selected" data-server="s204" onclick="toggleServer(this)">
<div class="sc-name">⚙️ S204 (Master) <span class="sc-load mid" id="s204-load"></span></div>
<div class="sc-meta">204.168.152.13<br><b>8vCPU/32GB</b> · WEVIA Master + nginx + PG</div>
</div>
<div class="server-card" data-server="s95" onclick="toggleServer(this)">
<div class="sc-name">📨 S95 (WEVADS) <span class="sc-load low" id="s95-load"></span></div>
<div class="sc-meta">95.216.167.89<br><b>Sentinel exec</b> · Hetzner · scrapers</div>
</div>
<div class="server-card" data-server="s151" onclick="toggleServer(this)">
<div class="sc-name">📡 S151 (Tracking) <span class="sc-load low" id="s151-load"></span></div>
<div class="sc-meta">151.80.235.110<br>OVH · open.php tracking</div>
</div>
<div class="server-card" data-server="cerebras" onclick="toggleServer(this)">
<div class="sc-name">🧠 Cerebras GPU <span class="sc-load low">FREE</span></div>
<div class="sc-meta">Wafer-scale · llama 3.3 70B<br><b>~400ms</b> · 0€</div>
</div>
<div class="server-card" data-server="groq" onclick="toggleServer(this)">
<div class="sc-name">⚡ Groq LPU <span class="sc-load low">FREE</span></div>
<div class="sc-meta">LPU inference<br><b>~200ms</b> · 0€</div>
</div>
<div class="server-card" data-server="gemini" onclick="toggleServer(this)">
<div class="sc-name">💎 Gemini TPU <span class="sc-load low">FREE</span></div>
<div class="sc-meta">Google TPU · multimodal<br><b>~800ms</b> · 0€</div>
</div>
<div class="server-card" data-server="kaggle" onclick="toggleServer(this)">
<div class="sc-name">🏆 Kaggle GPU <span class="sc-load low">30h/wk</span></div>
<div class="sc-meta">P100/T4 16GB<br>Notebooks · scheduler</div>
</div>
<div class="server-card" data-server="hf" onclick="toggleServer(this)">
<div class="sc-name">🤗 HF Spaces <span class="sc-load low">FREE</span></div>
<div class="sc-meta">Inference API + Spaces<br>Models hosted</div>
</div>
</aside>
<section class="dispatch-main">
<div class="dispatch-output" id="dispatch-output">
<div class="welcome">
<h2>🌐 Multi-Server Dispatch</h2>
<p>Dispatche tâches sur les serveurs sélectionnés à gauche pour décharger CPU S204.<br>WEVIA Master orchestre, workers exécutent en parallèle.</p>
<div class="examples">
<button class="ex-btn" onclick="useExample(this)">Audit disque sur S204 + S95 (compare /var sizes)</button>
<button class="ex-btn" onclick="useExample(this)">Vérifier services nginx PG ollama sur S204 + S95 + S151</button>
<button class="ex-btn" onclick="useExample(this)">Compter fichiers .html sur S204 et tracking pixels sur S151</button>
<button class="ex-btn" onclick="useExample(this)">Demander à Cerebras + Groq + Gemini: meilleure stratégie pour décharger S204 CPU?</button>
<button class="ex-btn" onclick="useExample(this)">Status global: load + RAM + disk + services sur tous les serveurs</button>
</div>
</div>
</div>
<div class="dispatch-composer">
<div class="dc-row">
<textarea id="dispatch-input" placeholder="Tâche à dispatcher sur les workers sélectionnés..." rows="1"></textarea>
<button class="dc-btn" id="dispatch-btn" onclick="executeDispatch()">Dispatch</button>
</div>
<div class="dc-opts">
<label><input type="checkbox" id="opt-parallel" checked> Parallèle (vs série)</label>
<label><input type="checkbox" id="opt-aggregate" checked> Agréger résultats via WEVIA</label>
<span id="dispatch-count">1 worker selected</span>
</div>
</div>
</section>
</div>
</div>
<div class="panel" data-name="vnc">
<iframe class="embed" data-src="/vnc-picker.html"></iframe>
</div>
<div class="panel" data-name="wtp">
<iframe class="embed" data-src="/weval-technology-platform.html"></iframe>
</div>
<div class="panel" data-name="registry">
<iframe class="embed" data-src="/wtp-orphans-registry.html"></iframe>
</div>
</main>
</div>
<script>
// === TAB SWITCH (lazy-load iframes) ===
function switchTab(btn) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
const panel = document.querySelector(`.panel[data-name="${btn.dataset.panel}"]`);
panel.classList.add('active');
const iframe = panel.querySelector('iframe.embed');
if (iframe && iframe.dataset.src && !iframe.src) {
iframe.src = iframe.dataset.src;
}
}
// === HEALTH POLL ===
async function pollHealth() {
// CDP
try {
const r = await fetch('/api/cdp-status.php?cb=' + Date.now());
const d = await r.json();
document.getElementById('h-cdp').textContent = d.summary.running + '/' + d.summary.total;
const dot = document.getElementById('h-cdp-dot');
dot.className = 'h-dot ' + (d.summary.running === 8 ? 'ok' : (d.summary.running > 4 ? 'warn' : 'err'));
} catch(e) {}
// WTP
try {
const r = await fetch('/api/wtp-orphans-registry.php?cb=' + Date.now());
const d = await r.json();
document.getElementById('h-wtp').textContent = d.link_rate_pct + '%';
} catch(e) {}
// S204 load via agent exec
try {
const r = await fetch('/api/wevia-agent-exec.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({task: 'uptime | grep -oE "load average: [0-9.]+" | head -1', dry_run: false, max_steps: 1})
});
// Just parse first SSE line for load
const reader = r.body.getReader();
const decoder = new TextDecoder();
let buf = '';
while (true) {
const {value, done} = await reader.read();
if (done) break;
buf += decoder.decode(value, {stream: true});
const m = buf.match(/load average:\s*([\d.]+)/);
if (m) {
const load = parseFloat(m[1]);
document.getElementById('h-load').textContent = load.toFixed(1);
const el = document.getElementById('s204-load');
el.textContent = load.toFixed(1);
el.className = 'sc-load ' + (load > 50 ? 'hi' : (load > 20 ? 'mid' : 'low'));
break;
}
}
reader.cancel();
} catch(e) {}
}
// === DISPATCH MULTI-SERVER ===
const selectedServers = new Set(['s204']);
function toggleServer(card) {
const s = card.dataset.server;
if (selectedServers.has(s)) {
selectedServers.delete(s);
card.classList.remove('selected');
} else {
selectedServers.add(s);
card.classList.add('selected');
}
document.getElementById('dispatch-count').textContent = selectedServers.size + ' worker' + (selectedServers.size!==1?'s':'') + ' selected';
}
function useExample(btn) {
document.getElementById('dispatch-input').value = btn.textContent;
document.getElementById('dispatch-input').focus();
}
function clearWelcome() {
const w = document.querySelector('#dispatch-output .welcome');
if (w) w.remove();
}
function addEventBlock(server, status, content, type = 'info') {
const out = document.getElementById('dispatch-output');
const block = document.createElement('div');
block.className = 'event-block ' + (type === 'ok' ? 'ok' : (type === 'err' ? 'err' : ''));
block.innerHTML = `<div class="eb-header"><span class="eb-server">${server}</span><span>${status}</span></div>` +
(content ? `<div class="eb-output">${escapeHtml(content)}</div>` : '');
out.appendChild(block);
out.scrollTop = out.scrollHeight;
return block;
}
function escapeHtml(s) {
return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
async function executeDispatch() {
const task = document.getElementById('dispatch-input').value.trim();
if (!task || selectedServers.size === 0) return;
clearWelcome();
addEventBlock('YOU', 'TASK', task);
const btn = document.getElementById('dispatch-btn');
btn.disabled = true;
btn.textContent = 'Dispatching...';
try {
const r = await fetch('/api/wevia-dispatch.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
task,
servers: Array.from(selectedServers),
parallel: document.getElementById('opt-parallel').checked,
aggregate: document.getElementById('opt-aggregate').checked
})
});
if (!r.ok) {
addEventBlock('ERROR', 'HTTP ' + r.status, '', 'err');
return;
}
const d = await r.json();
// Render each server result
for (const res of d.results || []) {
addEventBlock(
res.server.toUpperCase(),
(res.ok ? '✓' : '✗') + ' ' + (res.duration_ms || '?') + 'ms',
res.output || res.error || '(empty)',
res.ok ? 'ok' : 'err'
);
}
// Aggregated summary
if (d.summary) {
addEventBlock('🧠 WEVIA SUMMARY', 'aggregated', d.summary, 'ok');
}
document.getElementById('dispatch-input').value = '';
} catch(e) {
addEventBlock('NETWORK ERROR', 'failed', e.message, 'err');
} finally {
btn.disabled = false;
btn.textContent = 'Dispatch';
}
}
document.getElementById('dispatch-input').addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
executeDispatch();
}
});
// Init
pollHealth();
setInterval(pollHealth, 15000);
// Sovereign API providers count via direct check
fetch('/api/cdp-status.php').then(()=>{}); // warmup
document.getElementById('h-providers').textContent = '18';
document.getElementById('h-s95-dot').className = 'h-dot ok';
document.getElementById('h-s151-dot').className = 'h-dot ok';
</script>
<!-- DOCTRINE-60-UX-JS --><script id="doctrine60-ux-js-direct">
// DOCTRINE-60-UX-JS staggered entrance
(function(){
if (!('IntersectionObserver' in window)) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e, i) => {
if (e.isIntersecting) {
setTimeout(() => e.target.classList.add('enter-stagger'), i * 80);
obs.unobserve(e.target);
}
});
});
document.querySelectorAll('.card, .kpi, .panel').forEach(el => obs.observe(el));
})();
</script>
</body>
</html>