a6ca5da7b2
Yacine demande via screenshot (WTP dashboard): - Barre/entete prend tout ecran - Faire caroussel rotationnel au lieu du plat DOCTRINE-221 opus-phase79 - 3D Carousel handler: - /var/www/html/api/wevia-ux-carousel-apply.sh (6712B) - Compact header CSS: max-height 72px, padding 8px, h1 1.2rem - 3D perspective: 1600px, scroll-snap-type x mandatory - Focus/prev/next rotation Y 28deg, translateZ, scale dynamic - Toggle button floating bottom-right Grid <-> Carrousel - JS auto-detect main grid container by children count - Scroll listener updates focus class real-time - prefers-reduced-motion respected DOCTRINE-222 opus-phase79 - chat.php triggers: - Added carousel NL triggers to admin_triggers array - Now WEVIA chat routes carousel requests to internal orchestrator Intent stub: - /var/www/html/api/wired-pending/intent-opus4-wevia_ux_carousel_rotation.php - 11 triggers: carrousel 3d, caroussel 3d, rotation, rotationnel, compact header, etc - Priority P1 - cmd extracts PAGE from message Applied: - weval-technology-platform.html: size 457235 -> 462552 (+5317 CSS/JS) - marker DOCTRINE-221 present, HTTP 200 confirmed Pattern: Yacine can now say in chat NL: carrousel 3d wevia-master rotationnel agents-alive compact header all-ia-hub -> WEVIA applies 3D carousel autonomously Cumul session Opus: - 75 tags - 56 doctrines (146-222) - 22 Gemini + 2 Minority Report + 1 Carrousel 3D - NR 153/153 invariant 79 phases
587 lines
26 KiB
HTML
587 lines
26 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>
|
|
<style id="w321-ux-unif-tokens">
|
|
/* W321 UX Unification - align WTP master tokens */
|
|
:root{
|
|
--wtp-bg-card:#0e111c;
|
|
--wtp-border:#1f2436;
|
|
--wtp-border-hover:#3a425f;
|
|
--wtp-accent:#6366f1;
|
|
--wtp-accent-hover:#818cf8;
|
|
--wtp-success:#10b981;
|
|
--wtp-warning:#f59e0b;
|
|
--wtp-danger:#ef4444;
|
|
--wtp-info:#06b6d4;
|
|
--wtp-purple:#a855f7;
|
|
--wtp-radius:12px;
|
|
--wtp-radius-sm:8px;
|
|
--wtp-trans:.18s cubic-bezier(.4,0,.2,1);
|
|
--wtp-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
|
|
--wtp-mono:'JetBrains Mono','SF Mono','Fira Code',monospace;
|
|
}
|
|
/* Smooth scroll + consistent focus ring */
|
|
html{scroll-behavior:smooth}
|
|
*:focus-visible{outline:2px solid var(--wtp-accent)!important;outline-offset:2px;border-radius:4px}
|
|
/* Banner spacing */
|
|
.wevia-portal-banner + *{margin-top:0!important}
|
|
</style>
|
|
<link rel="stylesheet" href="/css/wevia-portal-consistency.css?v=w321">
|
|
|
|
<!-- DOCTRINE-218-MINORITY-REPORT v3 D221 -->
|
|
<style id="doctrine218-v3">
|
|
html { scroll-behavior: smooth; overflow-x: auto !important; }
|
|
body { overflow-x: auto !important; overflow-y: auto !important; min-width: 100%; }
|
|
|
|
[class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"],
|
|
.stat-card, .metric-card, .hub-card, .vm-card, .wtp-tile, .wtp-home-module {
|
|
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s, filter 0.35s !important;
|
|
transform-origin: center center;
|
|
will-change: transform;
|
|
}
|
|
[class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover,
|
|
.stat-card:hover, .metric-card:hover, .hub-card:hover, .vm-card:hover, .wtp-tile:hover, .wtp-home-module:hover {
|
|
transform: scale(1.05) translateZ(0) !important;
|
|
box-shadow: 0 16px 48px rgba(124, 58, 237, 0.45), 0 0 60px rgba(236, 72, 153, 0.25) !important;
|
|
filter: brightness(1.12) saturate(1.15) !important;
|
|
z-index: 50 !important;
|
|
position: relative;
|
|
}
|
|
|
|
html::-webkit-scrollbar, body::-webkit-scrollbar { height: 12px; width: 12px; }
|
|
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
|
|
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(90deg, #7c3aed, #ec4899);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
|
|
}
|
|
</style>
|
|
<script id="doctrine218-v3-js">
|
|
(function(){
|
|
document.addEventListener('wheel', function(e){
|
|
if (e.shiftKey) { e.preventDefault(); window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' }); }
|
|
}, { passive: false });
|
|
window.addEventListener('DOMContentLoaded', function(){
|
|
document.body.style.setProperty('overflow-x', 'auto', 'important');
|
|
document.body.style.setProperty('overflow-y', 'auto', 'important');
|
|
document.documentElement.style.setProperty('overflow-x', 'auto', 'important');
|
|
console.log('[D218 v3 D221] Minority Report + scroll restored');
|
|
});
|
|
})();
|
|
</script>
|
|
<!-- END-DOCTRINE-218 -->
|
|
</head>
|
|
<body>
|
|
<div class="wevia-portal-banner" style="position:sticky;top:0;z-index:10000">
|
|
<span class="wevia-portal-banner-label">WEVAL PORTAL</span>
|
|
<a class="wevia-portal-banner-link" href="/weval-technology-platform.html">🏛 WTP Master</a>
|
|
<a class="wevia-portal-banner-link" data-portal="master" href="/wevia-master.html">⚡ WEVIA Master</a>
|
|
<a class="wevia-portal-banner-link" href="/wevia-cockpit.html">🎯 Cockpit</a>
|
|
<a class="wevia-portal-banner-link" href="/all-ia-hub.html">🤖 All-IA Hub</a>
|
|
<a class="wevia-portal-banner-link" href="/wevia-orchestrator.html">🎛 Orchestrator</a>
|
|
<a class="wevia-portal-banner-link" href="/paperclip-dashboard.html">📎 Paperclip</a>
|
|
<a class="wevia-portal-banner-link" href="/wtp-orphans-registry.html">📋 Registry</a>
|
|
<span style="margin-left:auto;color:#64748b;font-size:10px;letter-spacing:.4px">W321 UX UNIFIED</span>
|
|
</div>
|
|
<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 => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[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>
|
|
<script id="w322-cockpit-health-fix">
|
|
(function(){
|
|
async function updateHealth(){
|
|
// CDP status
|
|
try{
|
|
var r = await fetch('/api/cdp-status.php?cb=' + Date.now(), {cache:'no-store'});
|
|
var d = await r.json();
|
|
if(d.summary){
|
|
var cdpEl = document.getElementById('h-cdp') || document.querySelector('[data-health="cdp"]');
|
|
if(cdpEl) cdpEl.textContent = d.summary.running + '/' + d.summary.total;
|
|
var dot = document.getElementById('h-cdp-dot');
|
|
if(dot) dot.className = 'h-dot ' + (d.summary.running === 8 ? 'ok' : (d.summary.running > 4 ? 'warn' : 'err'));
|
|
}
|
|
}catch(e){}
|
|
|
|
// WTP coverage
|
|
try{
|
|
var r = await fetch('/api/wtp-orphans-registry.php?cb=' + Date.now(), {cache:'no-store'});
|
|
var d = await r.json();
|
|
var wtpEl = document.getElementById('h-wtp');
|
|
if(wtpEl && d.link_rate_pct != null) wtpEl.textContent = d.link_rate_pct + '%';
|
|
}catch(e){}
|
|
|
|
// S204 load via simple endpoint (not via agent-exec which is heavy)
|
|
try{
|
|
var r = await fetch('/api/infra-load.php?cb=' + Date.now(), {cache:'no-store'});
|
|
if(r.ok){
|
|
var txt = await r.text();
|
|
var m = txt.match(/load[:\s]*([\d.]+)/i);
|
|
if(m){
|
|
var loadEl = document.getElementById('h-load');
|
|
if(loadEl) loadEl.textContent = parseFloat(m[1]).toFixed(1);
|
|
}
|
|
}
|
|
}catch(e){}
|
|
|
|
// S204 status dot (based on CDP responding = S204 alive)
|
|
var s204dot = document.querySelector('[data-health="s204"]') || document.getElementById('h-s204-dot');
|
|
if(s204dot) s204dot.className = 'h-dot ok';
|
|
|
|
var provEl = document.getElementById('h-providers');
|
|
if(provEl) provEl.textContent = '18';
|
|
}
|
|
|
|
if(document.readyState === 'loading'){
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
updateHealth();
|
|
setInterval(updateHealth, 10000);
|
|
});
|
|
} else {
|
|
updateHealth();
|
|
setInterval(updateHealth, 10000);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|