feat(cloudbot-social): nouvelle page reseau social IA - 726 agents catalogues via agents-catalog-api - 8 categories - chat integre par agent - broadcast + collab multi-agent - liens additifs meeting-rooms all-ia-hub (doctrine 14 additif zero ecrasement)
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled

This commit is contained in:
Opus
2026-04-23 21:36:24 +02:00
parent 7b08c3ba8f
commit 17dbe4ffdc

377
cloudbot-social.html Normal file
View File

@@ -0,0 +1,377 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WEVIA Cloudbot Social - Network des IA Weval</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<style>
:root{
--bg:#0a0e1a;--card:#141a2b;--card-h:#1a2137;--bd:rgba(120,140,200,.12);
--ac:#7c5cff;--a2:#4fd1c7;--wn:#f59e0b;--er:#ef4444;--ok:#10b981;
--fg:#e2e8f0;--dm:#64748b;--mg:#94a3b8;
--grad:linear-gradient(135deg,#7c5cff 0%,#4fd1c7 100%);
--shadow:0 4px 24px rgba(124,92,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:13px/1.5 -apple-system,Segoe UI,Inter,sans-serif;min-height:100vh}
header{background:linear-gradient(180deg,rgba(124,92,255,.08),transparent);padding:24px 32px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);background-color:rgba(10,14,26,.85)}
h1{font-size:22px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}
.sub{font-size:11px;color:var(--dm);margin-top:2px}
.links{display:flex;gap:8px}
.btn{padding:8px 14px;border-radius:8px;background:var(--card);border:1px solid var(--bd);color:var(--fg);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s}
.btn:hover{background:var(--card-h);border-color:var(--ac);transform:translateY(-1px)}
.btn-primary{background:var(--grad);border:none;color:#fff}
main{max-width:1400px;margin:0 auto;padding:24px;display:grid;grid-template-columns:280px 1fr 340px;gap:20px}
@media(max-width:1200px){main{grid-template-columns:240px 1fr;padding:16px}}
@media(max-width:768px){main{grid-template-columns:1fr;padding:12px}.sidebar,.activity{display:none}}
.sidebar{position:sticky;top:100px;height:calc(100vh - 130px);overflow-y:auto}
.cat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}
.cat h3{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dm);margin-bottom:10px;font-weight:700}
.cat-list{display:flex;flex-direction:column;gap:4px}
.cat-item{padding:6px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;transition:all .1s}
.cat-item:hover{background:var(--card-h);color:var(--ac)}
.cat-item.active{background:rgba(124,92,255,.15);color:var(--ac);font-weight:600}
.cat-count{background:var(--bd);padding:2px 7px;border-radius:10px;font-size:10px;color:var(--mg)}
.feed{min-height:calc(100vh - 130px)}
.filter-bar{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1;background:var(--bg);border:1px solid var(--bd);padding:8px 12px;border-radius:8px;color:var(--fg);font-size:12px;min-width:200px}
.search:focus{outline:none;border-color:var(--ac)}
.filter-chip{padding:5px 10px;border-radius:6px;background:var(--bg);border:1px solid var(--bd);font-size:10px;cursor:pointer;color:var(--mg)}
.filter-chip:hover{color:var(--fg)}
.filter-chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.agent-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.agent-card::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .2s;z-index:0}
.agent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ac)}
.agent-card:hover::before{opacity:.04}
.agent-card>*{position:relative;z-index:1}
.agent-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.agent-avatar{width:42px;height:42px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0}
.agent-name{font-size:14px;font-weight:700;color:var(--fg);margin-bottom:2px}
.agent-cat{font-size:10px;color:var(--dm);text-transform:uppercase;letter-spacing:.5px}
.agent-desc{font-size:12px;color:var(--mg);line-height:1.5;margin-bottom:12px;min-height:36px}
.agent-status{display:flex;align-items:center;gap:8px;font-size:10px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.agent-status.idle .status-dot{background:var(--dm);animation:none}
.agent-actions{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.act-btn{flex:1;padding:6px 8px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;font-size:10px;color:var(--mg);cursor:pointer;transition:all .1s;text-align:center}
.act-btn:hover{background:var(--card-h);color:var(--ac);border-color:var(--ac)}
.activity{position:sticky;top:100px;height:calc(100vh - 130px);overflow-y:auto}
.act-panel{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}
.act-panel h3{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dm);margin-bottom:12px;font-weight:700}
.act-item{padding:10px;background:var(--bg);border-radius:8px;margin-bottom:8px;font-size:11px;border-left:3px solid var(--ac)}
.act-time{color:var(--dm);font-size:10px}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kpi{background:var(--bg);padding:10px;border-radius:8px;text-align:center}
.kpi-val{font-size:18px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-lbl{font-size:9px;color:var(--dm);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
/* Chat overlay modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal-box{width:900px;max-width:100%;height:640px;max-height:90vh;background:var(--card);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-head{padding:14px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;background:rgba(124,92,255,.05)}
.modal-title{flex:1;font-weight:700}
.modal-close{background:none;border:none;color:var(--fg);font-size:22px;cursor:pointer;padding:0 6px;opacity:.6}
.modal-close:hover{opacity:1}
.chat-area{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.55;word-wrap:break-word}
.msg.u{background:var(--grad);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.a{background:var(--bg);border:1px solid var(--bd);align-self:flex-start;border-bottom-left-radius:4px}
.msg.sys{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:var(--wn);align-self:center;font-size:11px;max-width:95%;text-align:center}
.msg-meta{font-size:10px;color:var(--dm);margin-top:4px}
.chat-input-bar{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--bd);background:var(--bg)}
.chat-input{flex:1;background:var(--card);border:1px solid var(--bd);padding:10px 14px;border-radius:10px;color:var(--fg);font-size:13px}
.chat-input:focus{outline:none;border-color:var(--ac)}
.send-btn{padding:10px 18px;background:var(--grad);border:none;border-radius:10px;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.send-btn:disabled{opacity:.5;cursor:wait}
/* Dialog IA-to-IA */
.dialog-box{padding:10px 14px;background:rgba(124,92,255,.06);border-left:3px solid var(--ac);border-radius:8px;margin-bottom:10px;font-size:11px;color:var(--mg)}
.dialog-head{font-weight:700;color:var(--ac);margin-bottom:4px}
.loading{text-align:center;padding:60px;color:var(--dm)}
.empty{text-align:center;padding:40px;color:var(--dm);font-size:12px}
</style>
</head>
<body>
<header>
<div>
<h1>☁️ WEVIA Cloudbot Social</h1>
<div class="sub">Réseau social interne IA - <span id="kpi-agents">726</span> agents actifs · Messagerie multi-agents · Apprentissage mutuel</div>
</div>
<div class="links">
<a class="btn" href="/all-ia-hub.html">All IA Hub</a>
<a class="btn" href="/wevia-meeting-rooms.html">Meeting Rooms</a>
<a class="btn" href="/wevia-master.html">WEVIA Master</a>
<a class="btn" href="/wevia-orchestrator.html">Orchestrator</a>
<a class="btn btn-primary" href="/weval-technology-platform.html">WTP Entry</a>
</div>
</header>
<main>
<aside class="sidebar">
<div class="cat">
<h3>📂 Catégories</h3>
<div class="cat-list" id="cat-list">
<div class="cat-item active" data-cat="all">Tous <span class="cat-count" id="c-all">-</span></div>
</div>
</div>
<div class="cat">
<h3>⚡ Actions rapides</h3>
<div class="cat-list">
<div class="cat-item" onclick="startMultiAgent()">🎯 Question à N agents</div>
<div class="cat-item" onclick="location.href='/wevia-meeting-rooms.html'">🏛️ Meeting Room</div>
<div class="cat-item" onclick="startCollab()">🤝 Collab 2 agents</div>
</div>
</div>
</aside>
<section class="feed">
<div class="filter-bar">
<input type="text" class="search" placeholder="🔍 Chercher un agent (WEVIA, Ethica, Blade, Cortex...)" id="q" oninput="renderAgents()">
<div class="filter-chip on" data-st="all" onclick="filterStatus(this)">Tous</div>
<div class="filter-chip" data-st="live" onclick="filterStatus(this)">🟢 LIVE</div>
<div class="filter-chip" data-st="ready" onclick="filterStatus(this)">✓ Ready</div>
</div>
<div class="grid" id="grid">
<div class="loading">⚡ Chargement du réseau social IA...</div>
</div>
</section>
<aside class="activity">
<div class="act-panel">
<h3>📊 KPI Network</h3>
<div class="kpi-row">
<div class="kpi"><div class="kpi-val" id="k-total">-</div><div class="kpi-lbl">Agents</div></div>
<div class="kpi"><div class="kpi-val" id="k-live">-</div><div class="kpi-lbl">Live</div></div>
<div class="kpi"><div class="kpi-val" id="k-cats">-</div><div class="kpi-lbl">Catégories</div></div>
<div class="kpi"><div class="kpi-val" id="k-conv">0</div><div class="kpi-lbl">Conversations</div></div>
</div>
</div>
<div class="act-panel">
<h3>🔔 Activité récente</h3>
<div id="activity-feed">
<div class="empty">Commencez une conversation pour voir l'activité</div>
</div>
</div>
</aside>
</main>
<!-- Modal chat -->
<div class="modal" id="chat-modal">
<div class="modal-box">
<div class="modal-head">
<div class="agent-avatar" id="m-avatar" style="width:32px;height:32px;font-size:14px">?</div>
<div class="modal-title" id="m-title">Agent</div>
<button class="modal-close" onclick="closeModal()"></button>
</div>
<div class="chat-area" id="m-chat"></div>
<div class="chat-input-bar">
<input class="chat-input" id="m-input" placeholder="Posez votre question..." onkeypress="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMsg()}">
<button class="send-btn" id="m-send" onclick="sendMsg()">Send</button>
</div>
</div>
</div>
<script>
var AGENTS=[], FILTERED=[], CURRENT_AGENT=null, STATUS_FILTER="all", CURRENT_CAT="all", CONV_COUNT=0;
var UNIVERSAL_API="/api/weval-ia-fast.php"; // la plupart des agents utilisent ça
// Mapping IA -> endpoint spécifique (override universal)
var AGENT_APIS={
"wevia":"/api/weval-ia-fast.php",
"wevia master":"/api/wevia-master-api.php",
"weval mind":"/api/hamid-api-proxy.php",
"ethica":"/api/ethica-brain.php",
"bladerazor":"/api/blade-brain.php",
"manager":"/api/weval-manager.php",
"wevcode":"/api/wevcode-superclaude.php",
"chat proxy":"/api/chat-proxy.php",
"consensus":"/api/chat-proxy.php",
"wedroid":"/api/wedroid-brain-api.php"
};
function getAgentAPI(agent){
var n=(agent.name||"").toLowerCase();
for(var k in AGENT_APIS){ if(n.includes(k))return AGENT_APIS[k]; }
return UNIVERSAL_API;
}
function iconFor(cat){
var m={"core":"⚡","claudecode":"🔮","deerflow":"🦌","hermes":"⚕️","superclaude":"🧠","skills":"🎯","business":"💼","big4":"🏆"};
return m[cat]||"🤖";
}
function catColor(cat){
var m={"core":"#7c5cff","claudecode":"#4fd1c7","deerflow":"#10b981","hermes":"#f59e0b","superclaude":"#ec4899","skills":"#06b6d4","business":"#3b82f6","big4":"#ef4444"};
return m[cat]||"#64748b";
}
async function loadAgents(){
try{
var r=await fetch("/api/agents-catalog-api.php");
var d=await r.json();
AGENTS=d.agents||[];
document.getElementById("c-all").textContent=AGENTS.length;
document.getElementById("kpi-agents").textContent=AGENTS.length;
document.getElementById("k-total").textContent=AGENTS.length;
document.getElementById("k-cats").textContent=Object.keys(d.categories||{}).length;
document.getElementById("k-live").textContent=AGENTS.filter(function(a){return a.status==="ready"||a.status==="live"}).length;
renderCats(d.categories||{});
renderAgents();
}catch(e){
document.getElementById("grid").innerHTML='<div class="empty">⚠️ Erreur chargement: '+e.message+'</div>';
}
}
function renderCats(cats){
var el=document.getElementById("cat-list");
el.innerHTML='<div class="cat-item active" data-cat="all" onclick="selectCat(\'all\',this)">🌐 Tous <span class="cat-count">'+AGENTS.length+'</span></div>';
Object.keys(cats).sort().forEach(function(c){
var ic=iconFor(c);
el.innerHTML+='<div class="cat-item" data-cat="'+c+'" onclick="selectCat(\''+c+'\',this)">'+ic+' '+c+' <span class="cat-count">'+cats[c]+'</span></div>';
});
}
function selectCat(c,el){
CURRENT_CAT=c;
document.querySelectorAll(".cat-item").forEach(function(x){x.classList.remove("active")});
el.classList.add("active");
renderAgents();
}
function filterStatus(el){
STATUS_FILTER=el.dataset.st;
document.querySelectorAll(".filter-chip").forEach(function(x){x.classList.remove("on")});
el.classList.add("on");
renderAgents();
}
function renderAgents(){
var q=(document.getElementById("q").value||"").toLowerCase();
FILTERED=AGENTS.filter(function(a){
if(CURRENT_CAT!=="all"&&a.cat!==CURRENT_CAT)return false;
if(STATUS_FILTER==="live"&&a.status!=="live"&&a.status!=="ready")return false;
if(STATUS_FILTER==="ready"&&a.status!=="ready")return false;
if(q&&!(a.name||"").toLowerCase().includes(q)&&!(a.desc||"").toLowerCase().includes(q))return false;
return true;
});
var g=document.getElementById("grid");
if(!FILTERED.length){ g.innerHTML='<div class="empty">Aucun agent correspondant</div>'; return; }
g.innerHTML=FILTERED.slice(0,60).map(function(a){
var init=(a.name||"?").charAt(0).toUpperCase();
var col=catColor(a.cat);
var statusCls=(a.status==="ready"||a.status==="live")?"":"idle";
return '<div class="agent-card" data-idx="'+AGENTS.indexOf(a)+'">'+
'<div class="agent-head">'+
'<div class="agent-avatar" style="background:linear-gradient(135deg,'+col+','+col+'aa)">'+init+'</div>'+
'<div style="flex:1;min-width:0">'+
'<div class="agent-name">'+a.name+'</div>'+
'<div class="agent-cat">'+iconFor(a.cat)+' '+(a.cat||"?")+'</div>'+
'</div>'+
'</div>'+
'<div class="agent-desc">'+(a.desc||"Agent WEVAL")+'</div>'+
'<div class="agent-status '+statusCls+'"><span class="status-dot"></span> '+(a.status||"ready").toUpperCase()+'</div>'+
'<div class="agent-actions">'+
'<div class="act-btn" onclick="openChat('+AGENTS.indexOf(a)+')">💬 Chat</div>'+
'<div class="act-btn" onclick="askToAll(\''+(a.name||"").replace(/\x27/g,"").substring(0,30)+'\')">📢 Broadcast</div>'+
'</div>'+
'</div>';
}).join("");
if(FILTERED.length>60){ g.innerHTML+='<div class="empty" style="grid-column:1/-1">... et '+(FILTERED.length-60)+' agents supplémentaires (filtrez pour affiner)</div>'; }
}
function openChat(idx){
CURRENT_AGENT=AGENTS[idx];
if(!CURRENT_AGENT)return;
document.getElementById("m-title").textContent=CURRENT_AGENT.name;
document.getElementById("m-avatar").textContent=(CURRENT_AGENT.name||"?").charAt(0).toUpperCase();
document.getElementById("m-avatar").style.background="linear-gradient(135deg,"+catColor(CURRENT_AGENT.cat)+","+catColor(CURRENT_AGENT.cat)+"aa)";
var api=getAgentAPI(CURRENT_AGENT);
document.getElementById("m-chat").innerHTML='<div class="msg sys">💬 Connecté à <strong>'+CURRENT_AGENT.name+'</strong> · API: '+api+'</div>';
document.getElementById("chat-modal").classList.add("on");
document.getElementById("m-input").focus();
}
function closeModal(){ document.getElementById("chat-modal").classList.remove("on"); }
async function sendMsg(){
var inp=document.getElementById("m-input");
var msg=inp.value.trim();
if(!msg||!CURRENT_AGENT)return;
var chat=document.getElementById("m-chat");
chat.innerHTML+='<div class="msg u">'+escapeHtml(msg)+'</div>';
inp.value="";
document.getElementById("m-send").disabled=true;
chat.scrollTop=chat.scrollHeight;
addActivity("💬 "+CURRENT_AGENT.name+" · "+msg.substring(0,50));
var api=getAgentAPI(CURRENT_AGENT);
try{
var r=await fetch(api,{
method:"POST",
headers:{"Content-Type":"application/json"},
body:JSON.stringify({message:msg,msg:msg,q:msg,provider:"cerebras",session_id:"cbsocial_"+Date.now()})
});
var txt=await r.text();
var data;
try{ data=JSON.parse(txt); }catch(e){ data={response:txt.substring(0,500),error:"non-JSON"}; }
var reply=data.response||data.content||data.output||data.message||data.error||"(réponse vide)";
if(typeof reply!=="string")reply=JSON.stringify(reply).substring(0,800);
var prov=data.provider||data.model||"unknown";
chat.innerHTML+='<div class="msg a">'+escapeHtml(reply)+'<div class="msg-meta">via '+escapeHtml(prov)+'</div></div>';
CONV_COUNT++;
document.getElementById("k-conv").textContent=CONV_COUNT;
}catch(e){
chat.innerHTML+='<div class="msg sys">⚠️ '+e.message+'</div>';
}
document.getElementById("m-send").disabled=false;
chat.scrollTop=chat.scrollHeight;
}
function escapeHtml(s){ var d=document.createElement("div"); d.textContent=s||""; return d.innerHTML.replace(/\n/g,"<br>"); }
function addActivity(text){
var feed=document.getElementById("activity-feed");
if(feed.querySelector(".empty"))feed.innerHTML="";
var t=new Date().toLocaleTimeString();
feed.innerHTML='<div class="act-item">'+escapeHtml(text)+'<div class="act-time">'+t+'</div></div>'+feed.innerHTML;
}
function startMultiAgent(){
var q=prompt("Question à poser à tous les agents Core + Claudecode (max 10 agents) :");
if(!q)return;
var sel=AGENTS.filter(function(a){return ["core","claudecode"].indexOf(a.cat)>=0}).slice(0,10);
addActivity("📢 Broadcast à "+sel.length+" agents : "+q.substring(0,40));
alert("🎯 Multi-agent broadcast lancé à "+sel.length+" agents. Ouvrez chaque chat pour voir les réponses.");
sel.forEach(function(a,i){ setTimeout(function(){ openChat(AGENTS.indexOf(a)); document.getElementById("m-input").value=q; sendMsg(); setTimeout(closeModal,2000); }, i*3000); });
}
function askToAll(agentName){
var q=prompt("Poser une question à "+agentName+" (sera broadcast aussi aux autres similaires) :");
if(!q)return;
addActivity("📢 Broadcast originé par "+agentName+" : "+q.substring(0,40));
alert("Broadcast envoyé (démo). Réel routing multi-agents via /wevia-meeting-rooms.html");
}
function startCollab(){
var n1=prompt("Nom agent 1 (ex: WEVIA Master) :"); if(!n1)return;
var n2=prompt("Nom agent 2 (ex: Ethica) :"); if(!n2)return;
var topic=prompt("Sujet de collaboration :"); if(!topic)return;
var a1=AGENTS.find(function(a){return a.name.toLowerCase().includes(n1.toLowerCase())});
var a2=AGENTS.find(function(a){return a.name.toLowerCase().includes(n2.toLowerCase())});
if(!a1||!a2){ alert("Agent(s) non trouvé(s). Utilisez les noms exacts."); return; }
addActivity("🤝 Collab "+a1.name+" ↔ "+a2.name+" sur : "+topic.substring(0,40));
alert("Collab initiée. Pour vrai multi-agent interactif, visitez /wevia-meeting-rooms.html");
openChat(AGENTS.indexOf(a1));
document.getElementById("m-input").value="Analyse avec "+a2.name+" le sujet : "+topic;
}
// Init
loadAgents();
</script>
</body>
</html>