248 lines
16 KiB
HTML
248 lines
16 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WEVIA Value Streaming — Pipeline de Valeur</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
:root{--bg:#070b14;--card:#0d1321;--border:rgba(6,182,212,.12);--text:#c8ccd8;--cyan:#06b6d4;--purple:#8b5cf6;--gold:#f59e0b;--green:#4ade80;--glass:rgba(13,19,33,.85)}
|
||
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
|
||
nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:linear-gradient(135deg,#070b14ee,#1a1a3eee);backdrop-filter:blur(12px);z-index:100;border-bottom:1px solid var(--border)}
|
||
nav .logo{font-family:Orbitron;font-size:15px;font-weight:800;color:var(--cyan)}
|
||
nav .logo span{color:var(--purple)}
|
||
nav .links{display:flex;gap:14px;font-size:11px}
|
||
nav .links a{color:#64748b;text-decoration:none;transition:color .2s}
|
||
nav .links a:hover{color:#e2e8f0}
|
||
.bg-grid{position:fixed;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(6,182,212,.03) 1px,transparent 0);background-size:40px 40px;pointer-events:none}
|
||
main{padding:80px 32px 48px;max-width:1400px;margin:0 auto}
|
||
h1{font-family:Orbitron;font-size:32px;font-weight:800;margin-bottom:8px}
|
||
h1 .hl{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||
.subtitle{color:#64748b;font-size:14px;margin-bottom:36px}
|
||
/* PIPELINE */
|
||
.pipeline{display:flex;gap:4px;margin-bottom:40px;overflow-x:auto;padding-bottom:8px}
|
||
.stage{flex:1;min-width:160px;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:18px 16px;backdrop-filter:blur(8px);position:relative;transition:all .3s;cursor:default}
|
||
.stage:hover{border-color:var(--cyan);transform:translateY(-4px);box-shadow:0 12px 40px rgba(6,182,212,.1)}
|
||
.stage::after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#334155;font-size:18px}
|
||
.stage:last-child::after{display:none}
|
||
.stage .num{font-family:Orbitron;font-size:10px;color:#475569;margin-bottom:6px}
|
||
.stage .name{font-family:Orbitron;font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:4px}
|
||
.stage .desc{font-size:11px;color:#64748b;line-height:1.5}
|
||
.stage .metric{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);font-family:Orbitron;font-size:18px;font-weight:800}
|
||
.stage .metric.cyan{color:var(--cyan)}
|
||
.stage .metric.purple{color:var(--purple)}
|
||
.stage .metric.gold{color:var(--gold)}
|
||
.stage .metric.green{color:var(--green)}
|
||
/* KPI GRID */
|
||
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px}
|
||
.kpi{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:20px;backdrop-filter:blur(8px)}
|
||
.kpi .label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
|
||
.kpi .value{font-family:Orbitron;font-size:28px;font-weight:800}
|
||
.kpi .sub{font-size:11px;color:#475569;margin-top:4px}
|
||
/* STREAM MAP */
|
||
h2{font-family:Orbitron;font-size:18px;font-weight:700;color:#e2e8f0;margin-bottom:20px}
|
||
.stream-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:40px}
|
||
.stream{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:20px;backdrop-filter:blur(8px);transition:all .3s}
|
||
.stream:hover{border-color:var(--purple);box-shadow:0 8px 30px rgba(139,92,246,.08)}
|
||
.stream .head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
|
||
.stream .icon{font-size:24px}
|
||
.stream .title{font-family:Orbitron;font-size:13px;font-weight:700;color:#e2e8f0}
|
||
.stream .items{display:flex;flex-direction:column;gap:6px}
|
||
.stream .item{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.03)}
|
||
.stream .item .k{color:#94a3b8}
|
||
.stream .item .v{color:#e2e8f0;font-weight:600}
|
||
/* LEAN 6σ */
|
||
.lean-bar{display:flex;gap:8px;margin-bottom:40px}
|
||
.lean-step{flex:1;padding:12px;background:var(--glass);border:1px solid var(--border);border-radius:10px;text-align:center;transition:all .3s;cursor:pointer}
|
||
.lean-step:hover{border-color:var(--gold);background:rgba(245,158,11,.05)}
|
||
.lean-step .letter{font-family:Orbitron;font-size:24px;font-weight:800;color:var(--gold)}
|
||
.lean-step .word{font-size:10px;color:#64748b;text-transform:uppercase;margin-top:4px;letter-spacing:.5px}
|
||
.lean-step .score{font-size:11px;color:var(--green);margin-top:6px;font-weight:600}
|
||
/* WASTE MAP */
|
||
.waste{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:40px}
|
||
.waste-item{padding:14px;background:var(--glass);border:1px solid var(--border);border-radius:10px;text-align:center;font-size:11px}
|
||
.waste-item .emoji{font-size:20px;margin-bottom:6px}
|
||
.waste-item .type{color:#94a3b8;font-weight:600}
|
||
.waste-item .status{font-family:Orbitron;font-size:10px;margin-top:6px;padding:3px 8px;border-radius:6px;display:inline-block}
|
||
.waste-item .status.ok{background:rgba(74,222,128,.1);color:var(--green)}
|
||
.waste-item .status.warn{background:rgba(245,158,11,.1);color:var(--gold)}
|
||
@media(max-width:768px){main{padding:70px 16px 32px}.pipeline{flex-direction:column}.stage::after{display:none}.kpi .value{font-size:22px}.lean-bar{flex-wrap:wrap}}
|
||
</style>
|
||
<link rel="stylesheet" href="/css/weval-premium.css">
|
||
</head>
|
||
<body>
|
||
<div class="bg-grid"></div>
|
||
<nav>
|
||
<div class="logo">WEVIA <span>Value Streaming</span></div>
|
||
<div class="links">
|
||
<a href="/agents-archi.html">Archi 3D</a>
|
||
<a href="/director-center.html">Director</a>
|
||
<a href="/wevia-meeting-rooms.html">Rooms</a>
|
||
<a href="/enterprise-model.html">Enterprise</a>
|
||
<a href="/register.html">Register</a>
|
||
<a href="/l99-brain.html">L99</a>
|
||
<a href="/agents-fleet.html">Fleet</a>
|
||
<a href="/paperclip.html">Paperclip</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
<h1><span class="hl">Value Stream</span> Mapping</h1>
|
||
<div class="subtitle">Pipeline de valeur souverain — Lean 6σ • Theory of Constraints • Kaizen</div>
|
||
|
||
<!-- VALUE PIPELINE -->
|
||
<div class="pipeline">
|
||
<div class="stage"><div class="num">ÉTAPE 1</div><div class="name">Ingest</div><div class="desc">Données brutes: HCPs, leads, contacts, scraping</div><div class="metric cyan" id="m1">—</div></div>
|
||
<div class="stage"><div class="num">ÉTAPE 2</div><div class="name">Enrichment</div><div class="desc">Qdrant RAG, classification, dédup</div><div class="metric purple" id="m2">—</div></div>
|
||
<div class="stage"><div class="num">ÉTAPE 3</div><div class="name">AI Process</div><div class="desc">5,057 agents, 9 providers, routing</div><div class="metric gold" id="m3">—</div></div>
|
||
<div class="stage"><div class="num">ÉTAPE 4</div><div class="name">Orchestrate</div><div class="desc">WEVIA Master, Paperclip, DeerFlow</div><div class="metric cyan" id="m4">—</div></div>
|
||
<div class="stage"><div class="num">ÉTAPE 5</div><div class="name">Deliver</div><div class="desc">Dashboard, API, Telegram, Export</div><div class="metric green" id="m5">—</div></div>
|
||
</div>
|
||
|
||
<!-- KPIs -->
|
||
<div class="kpi-grid">
|
||
<div class="kpi"><div class="label">Agents Actifs</div><div class="value" style="color:var(--cyan)" id="k-agents">—</div><div class="sub">Sovereign + Cognitive + Providers</div></div>
|
||
<div class="kpi"><div class="label">Skills Déployées</div><div class="value" style="color:var(--purple)" id="k-skills">—</div><div class="sub">DeerFlow + Antigravity + ECC</div></div>
|
||
<div class="kpi"><div class="label">Qdrant Vectors</div><div class="value" style="color:var(--gold)" id="k-qdrant">—</div><div class="sub">RAG Knowledge Base</div></div>
|
||
<div class="kpi"><div class="label">Coût Infra</div><div class="value" style="color:var(--green)" id="k-cost">0€</div><div class="sub">100% providers gratuits</div></div>
|
||
<div class="kpi"><div class="label">L99 Score</div><div class="value" style="color:var(--cyan)" id="k-l99">—</div><div class="sub">NonReg + Functional + Deep</div></div>
|
||
<div class="kpi"><div class="label">Uptime</div><div class="value" style="color:var(--green)" id="k-uptime">—</div><div class="sub">Pages + APIs + Subdomains</div></div>
|
||
</div>
|
||
|
||
<!-- LEAN 6σ DMAIC -->
|
||
<h2>Lean Six Sigma — DMAIC</h2>
|
||
<div class="lean-bar">
|
||
<div class="lean-step"><div class="letter">D</div><div class="word">Define</div><div class="score">CTQ identifiés</div></div>
|
||
<div class="lean-step"><div class="letter">M</div><div class="word">Measure</div><div class="score">L99 954/957</div></div>
|
||
<div class="lean-step"><div class="letter">A</div><div class="word">Analyze</div><div class="score">Root Cause</div></div>
|
||
<div class="lean-step"><div class="letter">I</div><div class="word">Improve</div><div class="score">Multi-Agent</div></div>
|
||
<div class="lean-step"><div class="letter">C</div><div class="word">Control</div><div class="score">Guardian+Cron</div></div>
|
||
</div>
|
||
|
||
<!-- WASTE IDENTIFICATION (8 wastes of Lean) -->
|
||
<h2>8 Gaspillages — Identification</h2>
|
||
<div class="waste">
|
||
<div class="waste-item"><div class="emoji">🚚</div><div class="type">Transport</div><div class="status ok">ÉLIMINÉ</div></div>
|
||
<div class="waste-item"><div class="emoji">📦</div><div class="type">Inventaire</div><div class="status ok">OPTIMISÉ</div></div>
|
||
<div class="waste-item"><div class="emoji">🔄</div><div class="type">Mouvement</div><div class="status ok">RÉDUIT</div></div>
|
||
<div class="waste-item"><div class="emoji">⏳</div><div class="type">Attente</div><div class="status warn">SSH 8s</div></div>
|
||
<div class="waste-item"><div class="emoji">🔧</div><div class="type">Sur-Process</div><div class="status ok">LEAN</div></div>
|
||
<div class="waste-item"><div class="emoji">📊</div><div class="type">Surproduction</div><div class="status ok">ON-DEMAND</div></div>
|
||
<div class="waste-item"><div class="emoji">🐛</div><div class="type">Défauts</div><div class="status ok">3/153</div></div>
|
||
<div class="waste-item"><div class="emoji">🧠</div><div class="type">Talents</div><div class="status ok">5,057 AI</div></div>
|
||
</div>
|
||
|
||
<!-- VALUE STREAMS -->
|
||
<h2>Flux de Valeur par Vertical</h2>
|
||
<div class="stream-map" id="streams"></div>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
// Fetch live data from ecosystem
|
||
async function loadData(){
|
||
try{
|
||
const r=await fetch('/api/ecosystem-health.php');
|
||
const d=await r.json();
|
||
// Pipeline metrics
|
||
document.getElementById('m1').textContent=(d.ethica_hcps||126138).toLocaleString();
|
||
document.getElementById('m2').textContent=(d.qdrant_vectors||15729).toLocaleString();
|
||
document.getElementById('m3').textContent=(d.agents||5057).toLocaleString();
|
||
document.getElementById('m4').textContent=(d.brain_modules||167)+'';
|
||
document.getElementById('m5').textContent=(d.pages||15)+' pages';
|
||
// KPIs
|
||
document.getElementById('k-agents').textContent=(d.agents||5057).toLocaleString();
|
||
document.getElementById('k-skills').textContent=(d.skills||694).toLocaleString();
|
||
document.getElementById('k-qdrant').textContent=(d.qdrant_vectors||15729).toLocaleString();
|
||
document.getElementById('k-l99').textContent=(d.nonreg_pass||150)+'/'+(d.nonreg_total||153);
|
||
document.getElementById('k-uptime').textContent=(d.pages_up||15)+'/'+(d.pages_total||15);
|
||
}catch(e){
|
||
document.getElementById('m1').textContent='126,138';
|
||
document.getElementById('m2').textContent='15,729';
|
||
document.getElementById('m3').textContent='5,057';
|
||
document.getElementById('m4').textContent='167';
|
||
document.getElementById('m5').textContent='15 pages';
|
||
document.getElementById('k-agents').textContent='5,057';
|
||
document.getElementById('k-skills').textContent='694';
|
||
document.getElementById('k-qdrant').textContent='15,729';
|
||
document.getElementById('k-l99').textContent='150/153';
|
||
document.getElementById('k-uptime').textContent='15/15';
|
||
}
|
||
// Value streams
|
||
const streams=[
|
||
{icon:'💊',title:'Pharma / Life Sciences',items:[['HCPs Ethica','126,138'],['Pays','MA, TN, DZ'],['Spécialités','15+'],['Pipeline','Scrape→Enrich→Segment→Outreach']]},
|
||
{icon:'🏢',title:'ERP / SAP Consulting',items:[['Leads','166'],['LinkedIn','469 profiles'],['Verticals','7'],['Pipeline','Scrape→Qualify→CRM→Proposal']]},
|
||
{icon:'🔒',title:'Cybersécurité',items:[['Guardian','GOLD checksums'],['Port Protect','18/18'],['Crons','46 actifs'],['Pipeline','Scan→Detect→Alert→Fix']]},
|
||
{icon:'📊',title:'Cloud / DevOps',items:[['Docker','16 containers'],['Subdomains','9 apps'],['Providers','9 AI'],['Pipeline','Deploy→Monitor→Scale→Optimize']]},
|
||
{icon:'🤖',title:'IA Souveraine',items:[['Agents','5,057'],['Skills','694'],['Models','10 Ollama'],['Pipeline','Ingest→Train→Route→Deliver']]},
|
||
{icon:'💰',title:'Finance / Billing',items:[['Stripe','LIVE'],['Plans','4 tiers'],['Register','4-step KYC'],['Pipeline','Register→KYC→Subscribe→Invoice']]}
|
||
];
|
||
const el=document.getElementById('streams');
|
||
el.innerHTML=streams.map(s=>`<div class="stream"><div class="head"><div class="icon">${s.icon}</div><div class="title">${s.title}</div></div><div class="items">${s.items.map(i=>`<div class="item"><span class="k">${i[0]}</span><span class="v">${i[1]}</span></div>`).join('')}</div></div>`).join('');
|
||
}
|
||
loadData();
|
||
</script>
|
||
|
||
<!-- === OPUS UNIVERSAL DRILL-DOWN v1 19avr — append-only, doctrine #14 === -->
|
||
<script>
|
||
(function(){
|
||
if (window.__opusUniversalDrill) return; window.__opusUniversalDrill = true;
|
||
var d = document;
|
||
var m = d.createElement('div');
|
||
m.id = 'opus-udrill';
|
||
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:99995;padding:20px;cursor:pointer';
|
||
var inner = d.createElement('div');
|
||
inner.id = 'opus-udrill-in';
|
||
inner.style.cssText = 'max-width:900px;width:100%;max-height:90vh;overflow:auto;background:#0b0d15;border:1px solid rgba(99,102,241,0.35);border-radius:14px;padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.6);color:#e2e8f0;font:14px/1.55 Inter,system-ui,sans-serif';
|
||
inner.addEventListener('click', function(e){ e.stopPropagation(); });
|
||
m.appendChild(inner);
|
||
m.addEventListener('click', function(){ m.style.display='none'; });
|
||
d.addEventListener('keydown', function(e){ if(e.key==='Escape') m.style.display='none'; });
|
||
(d.body || d.documentElement).appendChild(m);
|
||
|
||
function openCard(card) {
|
||
// Clone card content + show close btn + increase font-size
|
||
var html = '<div style="display:flex;justify-content:flex-end;margin-bottom:14px"><button id="opus-udrill-close" style="padding:6px 14px;background:#171b2a;border:1px solid rgba(99,102,241,0.25);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:12px">✕ Fermer (Esc)</button></div>';
|
||
html += '<div style="transform-origin:top left;font-size:1.05em">' + card.outerHTML + '</div>';
|
||
inner.innerHTML = html;
|
||
d.getElementById('opus-udrill-close').onclick = function(){ m.style.display='none'; };
|
||
m.style.display = 'flex';
|
||
}
|
||
|
||
function wire(root) {
|
||
var sels = '.card,[class*="card"],.kpi,[class*="kpi"],.stat,[class*="stat"],.tile,[class*="tile"],.metric,[class*="metric"],.widget,[class*="widget"]';
|
||
var cards = root.querySelectorAll(sels);
|
||
for (var i = 0; i < cards.length; i++) {
|
||
var c = cards[i];
|
||
if (c.__opusWired) continue;
|
||
if (c.closest('button, a, input, select, textarea, #opus-udrill')) continue;
|
||
var r = c.getBoundingClientRect();
|
||
if (r.width < 60 || r.height < 40) continue;
|
||
c.__opusWired = true;
|
||
c.style.cursor = 'pointer';
|
||
c.setAttribute('role','button');
|
||
c.setAttribute('tabindex','0');
|
||
c.addEventListener('click', function(ev){
|
||
// If a more-specific drill is already active (e.g. pp-card custom), let it handle
|
||
if (ev.target.closest('[data-pp-id]') && window.__opusDrillInit) return;
|
||
if (ev.target.closest('a,button,input,select')) return;
|
||
ev.preventDefault(); ev.stopPropagation();
|
||
openCard(this);
|
||
});
|
||
c.addEventListener('keydown', function(ev){ if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();openCard(this);} });
|
||
}
|
||
}
|
||
|
||
// Initial + mutation observer
|
||
var initRun = function(){ wire(d.body || d.documentElement); };
|
||
if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', initRun);
|
||
else initRun();
|
||
var mo = new MutationObserver(function(muts){
|
||
var newCard = false;
|
||
for (var i=0;i<muts.length;i++) if (muts[i].addedNodes.length) { newCard = true; break; }
|
||
if (newCard) initRun();
|
||
});
|
||
mo.observe(d.body || d.documentElement, {childList:true, subtree:true});
|
||
})();
|
||
</script>
|
||
<!-- === OPUS UNIVERSAL DRILL-DOWN END === -->
|
||
|
||
</body></html>
|