JavaScript 65.5%
Python 17.8%
CSS 13%
HTML 3.7%
1<!DOCTYPE html>2<html lang="fr">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content">6<meta name="theme-color" content="#F2F1EC">7<meta name="apple-mobile-web-app-capable" content="yes">8<meta name="apple-mobile-web-app-status-bar-style" content="default">9<meta name="apple-mobile-web-app-title" content="Admin-Ka">10<title>Admin-Ka — Control Center Groupe KA</title>11<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%23F97316'/%3E%3Ctext x='16' y='22' font-size='14' font-family='-apple-system,sans-serif' fill='%231a1611' text-anchor='middle' font-weight='800'%3EKa%3C/text%3E%3C/svg%3E">12<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F97316'/%3E%3Ctext x='16' y='22' font-size='14' font-family='sans-serif' fill='%231a1611' text-anchor='middle' font-weight='800'%3EKa%3C/text%3E%3C/svg%3E">13<link rel="stylesheet" href="/vendor/hljs-github.min.css">14<link rel="stylesheet" href="/style.css">15<script>/* thème avant peinture (anti-flash) */16(function(){try{var t=localStorage.getItem('ka_theme')||'auto';17var dark=t==='dark'||(t==='auto'&&matchMedia('(prefers-color-scheme: dark)').matches);18document.documentElement.dataset.theme=dark?'dark':'light';}catch(e){}})();</script>19</head>20<body>2122<!-- ============ Connexion ============ -->23<div id="login" class="login hidden">24 <div class="login-box">25 <div class="ka-mark big">Ka</div>26 <h1 class="login-title">Admin<span class="tiret">-</span>Ka</h1>27 <p class="login-sub">Control Center · Groupe KA</p>28 <input id="password" type="password" placeholder="Mot de passe" autocomplete="current-password">29 <button id="loginBtn" class="btn-cta">Se connecter</button>30 <div id="loginError" class="login-error"></div>31 </div>32 <div class="login-foot">M3U96a · MacLustr</div>33</div>3435<!-- ============ App ============ -->36<div id="app" class="app hidden">3738 <!-- Sidebar (desktop) -->39 <aside class="sidebar">40 <div class="side-brand">41 <span class="ka-mark">Ka</span>42 <span class="brand-name">Admin<span class="tiret">-</span>Ka</span>43 </div>44 <nav class="side-nav" id="sideNav"></nav>45 <div class="side-foot">46 <div id="connPillSide" class="conn-pill off"><span class="conn-dot"></span><span class="conn-txt">hors ligne</span></div>47 <div class="side-node mono">M3U96a · v3</div>48 </div>49 </aside>5051 <div class="main-col">52 <!-- Topbar -->53 <header class="header">54 <div class="brand mobile-only">55 <span class="ka-mark">Ka</span>56 <span class="brand-name">Admin<span class="tiret">-</span>Ka</span>57 </div>58 <h1 id="pageTitle" class="page-title desktop-only">Vue d’ensemble</h1>59 <div class="head-right">60 <span id="topStamp" class="top-stamp desktop-only"></span>61 <button id="topInc" class="icon-btn" title="Incidents"><svg viewBox="0 0 24 24"><path d="M12 3l9 16H3z" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linejoin="round"/><path d="M12 10v4M12 16.6v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><i id="topIncBadge" class="badge hidden"></i></button>62 <button id="themeBtn" class="icon-btn" title="Thème clair/sombre"><svg viewBox="0 0 24 24"><path d="M12 4.5a7.5 7.5 0 100 15 7.5 7.5 0 000-15zM12 4.5v15" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M12 4.5a7.5 7.5 0 010 15z" fill="currentColor"/></svg></button>63 <div id="connPill" class="conn-pill off"><span class="conn-dot"></span><span id="connText" class="conn-txt">hors ligne</span></div>64 </div>65 </header>6667 <!-- Bannière notifications / alertes -->68 <div id="banners" class="banners"></div>6970 <!-- ======== Vue VUE D'ENSEMBLE ======== -->71 <section id="view-overview" class="view scroll hidden">72 <div class="view-head">73 <h2>Vue d’ensemble</h2>74 <span id="ovStamp" class="eco-stamp"></span>75 </div>76 <div id="ovKpis" class="ov-kpis"><div class="eco-loading">Chargement…</div></div>77 <div class="ov-cols">78 <div class="panel">79 <div class="panel-h"><h3>Visiteurs humains — 30 jours</h3><span class="panel-note">tous les sites KA</span></div>80 <div id="ovChart"></div>81 <div id="ovBreak"></div>82 </div>83 <div class="panel">84 <div class="panel-h"><h3>État de l’écosystème</h3><button class="linklike" data-goto="eco">tout voir →</button></div>85 <div id="ovEco"></div>86 <div class="panel-h" style="margin-top:14px"><h3>Incidents récents</h3></div>87 <div id="ovInc"></div>88 </div>89 </div>90 <div class="ov-cols">91 <div class="panel">92 <div class="panel-h"><h3>Claude Code</h3><button class="linklike" data-goto="sessions">sessions →</button></div>93 <div id="ovClaude"></div>94 </div>95 <div class="panel">96 <div class="panel-h"><h3>Anomalies de trafic</h3><span class="panel-note">dernière heure</span></div>97 <div id="ovAnom"></div>98 </div>99 </div>100 </section>101102 <!-- ======== Vue CHAT (Claude Code) ======== -->103 <section id="view-chat" class="view">104 <div class="chatbar">105 <select id="projectSel" class="pill-select" title="Projet (repo + nœud)"></select>106 <button id="chipModel" class="chip" title="Modèle">opus</button>107 <button id="chipPerm" class="chip" title="Permissions">normal</button>108 <button id="chipMore" class="chip ghost" title="Options de session">⋯</button>109 </div>110 <div id="sessMeta" class="sess-meta hidden">111 <span id="metaModel"></span><span id="metaSid"></span><span id="metaCost"></span><span id="metaCtx"></span>112 </div>113114 <main id="messages" class="messages"></main>115116 <div id="welcome" class="welcome">117 <div class="welcome-inner">118 <div class="ka-mark big">Ka</div>119 <h2>Claude Code</h2>120 <p>Le vrai Claude Code, lancé sur le nœud de chaque app du Groupe KA.</p>121 <div class="hints">122 <button class="hint">Quel modèle es-tu et dans quel répertoire travailles-tu ?</button>123 <button class="hint">Montre les 5 derniers commits</button>124 <button class="hint">État PM2 de l'app</button>125 </div>126 <div id="welcomeRecent" class="welcome-recent"></div>127 </div>128 </div>129130 <footer class="composer">131 <div class="composer-inner">132 <button id="upgradeBtn" class="wand-btn" title="Améliorer le prompt (Opus 4.8 + savoir Groupe KA)"><svg viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4M4 19h4M13 3l2.5 6.5L22 12l-6.5 2.5L13 21l-2.5-6.5L4 12l6.5-2.5z" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linejoin="round"/></svg></button>133 <textarea id="input" rows="1" placeholder="Demander à Claude Code…" enterkeyhint="send"></textarea>134 <button id="stopBtn" class="send-btn stop hidden" title="Arrêter"><svg viewBox="0 0 24 24"><rect x="7" y="7" width="10" height="10" rx="2" fill="currentColor"/></svg></button>135 <button id="sendBtn" class="send-btn" title="Envoyer"><svg viewBox="0 0 24 24"><path d="M12 19V6M6 11l6-6 6 6" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></button>136 </div>137 <div id="slashHint" class="slash-hint hidden"></div>138 </footer>139 </section>140141 <!-- ======== Vue SESSIONS ======== -->142 <section id="view-sessions" class="view scroll hidden">143 <div class="view-head">144 <h2>Sessions</h2>145 <button id="newSessBtn" class="btn-cta small">＋ Nouvelle</button>146 </div>147 <div class="filterbar">148 <input id="sessSearch" class="f-input" type="search" placeholder="Rechercher…">149 <select id="sessApp" class="f-select"><option value="">Toutes les apps</option></select>150 <select id="sessState" class="f-select">151 <option value="">Tous les statuts</option>152 <option value="running">En cours</option>153 <option value="waiting_perm">Permission</option>154 <option value="idle">Terminées</option>155 </select>156 </div>157 <div id="sessList" class="sess-list"></div>158 </section>159160 <!-- ======== Vue PROMPTS ======== -->161 <section id="view-prompts" class="view scroll hidden">162 <div class="view-head">163 <h2>Prompts</h2>164 <button id="newPromptBtn" class="btn-cta small">＋ Nouveau</button>165 </div>166 <div class="filterbar">167 <input id="promptSearch" class="f-input" type="search" placeholder="Rechercher un prompt…">168 <select id="promptApp" class="f-select"><option value="">Toutes les apps</option></select>169 </div>170 <div id="promptList" class="sess-list"></div>171 </section>172173 <!-- ======== Vue ÉCOSYSTÈME ======== -->174 <section id="view-eco" class="view scroll hidden">175 <div class="view-head">176 <h2>Écosystème</h2>177 <div class="head-actions">178 <button id="incBtn" class="chip">Incidents</button>179 <span id="ecoStamp" class="eco-stamp"></span>180 </div>181 </div>182 <div id="ecoOverview" class="eco-overview"></div>183 <div id="ecoGrid" class="eco-grid"><div class="eco-loading">Chargement…</div></div>184 <h3 class="eco-subhead">Nœuds du cluster</h3>185 <div id="ecoNodes" class="node-grid"></div>186 </section>187188 <!-- ======== Vue VISITEURS (analytics humains) ======== -->189 <section id="view-visitors" class="view scroll hidden">190 <div class="view-head">191 <h2>Visiteurs</h2>192 <div class="head-actions">193 <div class="seg mini" id="visMode">194 <button data-v="human" class="on">Humains</button>195 <button data-v="all">Tout le trafic</button>196 </div>197 <span id="visLive" class="eco-stamp"></span>198 </div>199 </div>200201 <div id="visGlobal" class="ov-kpis compact"></div>202 <div id="visBreak" class="panel slim"></div>203204 <div class="ov-cols">205 <div class="panel">206 <div class="panel-h"><h3>Temps réel — humains actifs</h3><span id="rtCount" class="panel-note"></span></div>207 <div id="visRealtime" class="rt-list"><div class="soc-sub">Chargement…</div></div>208 </div>209 <div class="panel">210 <div class="panel-h"><h3>Anomalies</h3><button class="linklike" id="visDebugBtn">🔬 inspecter une IP / un visiteur</button></div>211 <div id="visAnom"></div>212 </div>213 </div>214215 <div class="view-head" style="margin-top:16px"><h3 class="sub-h">Par application</h3></div>216 <div id="visGrid" class="vis-grid"><div class="soc-sub">Chargement…</div></div>217 <p class="defs-note">Définitions — <b>humain</b> : navigateur réel, réseau non-datacenter, JS exécuté · <b>en ligne</b> : activité < 2 min (expire seul) · <b>page vue</b> : navigation réelle (jamais un heartbeat) · <b>session</b> : inactivité > 30 min = nouvelle session. Datacenters, crawlers, monitoring et trafic interne sont exclus des métriques principales.</p>218 </section>219220 <!-- ======== Vue RÉGLAGES ======== -->221 <section id="view-settings" class="view scroll hidden">222 <div class="view-head"><h2>Réglages</h2></div>223 <div class="set-card">224 <div class="set-label">Apparence</div>225 <div class="seg" id="segTheme">226 <button data-v="auto">Auto</button><button data-v="light">Clair</button><button data-v="dark">Sombre</button>227 </div>228 </div>229 <div class="set-card">230 <div class="set-label">Modèle par défaut</div>231 <div class="seg" id="segModel">232 <button data-v="fable">Fable 5</button><button data-v="opus">Opus 5</button><button data-v="sonnet">Sonnet 5</button><button data-v="haiku">Haiku</button>233 </div>234 </div>235 <div class="set-card">236 <div class="set-label">Permissions par défaut</div>237 <div class="seg vert" id="segPerm">238 <button data-v="default">Normal — demande dans le chat</button>239 <button data-v="acceptEdits">acceptEdits — éditions auto</button>240 <button data-v="plan">Plan — proposer avant d'agir</button>241 <button data-v="bypass">⚠ Tout autoriser (bypass)</button>242 </div>243 </div>244 <div class="set-card">245 <div class="set-label">Analytics — définitions & filtres</div>246 <div id="anCfg" class="an-cfg"><div class="soc-sub">Chargement…</div></div>247 </div>248 <div class="set-card">249 <div class="set-label">Conversation active</div>250 <div class="set-row"><span>Session Claude Code</span><span id="setSid" class="mono">—</span></div>251 <div class="set-row"><span>Coût cumulé</span><span id="setCost" class="mono">—</span></div>252 <div class="set-row"><span>Contexte utilisé</span><span id="setCtx" class="mono">—</span></div>253 <div class="set-actions">254 <button id="btnClear" class="btn-ghost">/clear — effacer le contexte</button>255 <button id="btnCompact" class="btn-ghost">/compact — compacter</button>256 </div>257 </div>258 <div class="set-card">259 <div class="set-label">Registre des emplacements (mld · passerelle M1M32)</div>260 <div class="set-row"><span>Registre</span><span id="setRegistry" class="mono">—</span></div>261 <div class="set-row"><span>Nœuds Ka</span><span id="setRegistryNodes" class="mono">—</span></div>262 <div class="set-actions">263 <button id="btnRegRefresh" class="btn-ghost">↻ Relire le registre (M1M32)</button>264 <button id="btnRegTooling" class="btn-ghost">🧰 Vérifier l'outillage des nœuds</button>265 </div>266 </div>267 <div class="set-card">268 <div class="set-row"><span>Backend</span><span id="setHost" class="mono">—</span></div>269 <div class="set-row"><span>Version</span><span class="mono">3.2.0</span></div>270 </div>271 <button id="logoutBtn" class="btn-danger">Se déconnecter</button>272 </section>273274 <!-- ======== Vue STUDIO ======== -->275 <section id="view-social" class="view scroll hidden">276 <div class="view-head"><h2>🎨 Studio</h2><button id="stRefresh" class="btn-ghost small">↻ Galerie</button></div>277 <p class="soc-sub" style="margin:-4px 0 14px">Génère des visuels prêts à publier — télécharge-les et copie le texte. Rien n'est publié automatiquement.</p>278279 <div class="st-grid">280 <div class="soc-card st-gen">281 <h3>🖼️ Publication</h3>282 <textarea id="stPostPrompt" rows="2" placeholder="Sujet (optionnel). Ex : dernière propriété à vendre sur Immo-Ka."></textarea>283 <div class="soc-actions">284 <select id="stPostSite" class="soc-select"><option value="">Choix auto</option><option value="lou-ka">Lou·Ka</option><option value="immo-ka">Immo·Ka</option><option value="vrai-prix">Vrai-Prix</option><option value="auto-ka">Auto·Ka</option><option value="food-ka">Food·Ka</option><option value="fabri-ka">Fabri·Ka</option><option value="sorti-ka">Sorti·Ka</option><option value="job-ka">Job·Ka</option></select>285 <button id="stPostGen" class="btn-cta small">✨ Générer une image</button>286 </div>287 </div>288 <div class="soc-card st-gen">289 <h3>🎬 Reel vidéo</h3>290 <textarea id="stReelPrompt" rows="2" placeholder="Sujet (optionnel). Ex : le dernier logement en annonce sur Lou-Ka."></textarea>291 <div class="soc-actions">292 <select id="stReelSite" class="soc-select"><option value="">Choix auto</option><option value="lou-ka">Lou·Ka</option><option value="immo-ka">Immo·Ka</option><option value="vrai-prix">Vrai-Prix</option><option value="auto-ka">Auto·Ka</option><option value="food-ka">Food·Ka</option><option value="fabri-ka">Fabri·Ka</option><option value="sorti-ka">Sorti·Ka</option><option value="job-ka">Job·Ka</option></select>293 <button id="stReelGen" class="btn-cta small">🎬 Générer un reel</button>294 </div>295 <div class="soc-actions" style="margin-top:8px">296 <button id="stReel10" class="btn-ghost small">🔥 Générer 10 reels</button>297 <span id="stGenStatus" class="soc-sub"></span>298 </div>299 </div>300 </div>301302 <div class="view-head" style="margin-top:18px"><h2 style="font-size:17px">Galerie</h2><span id="stCount" class="soc-sub"></span></div>303 <div id="stGallery" class="st-gallery"><div class="soc-sub">Aucun visuel encore — génère ton premier post ou reel ci-dessus.</div></div>304 </section>305306 <!-- ======== Bottom nav (mobile) ======== -->307 <nav class="bottomnav" id="bottomNav"></nav>308 </div>309310 <!-- ======== Feuille détail (éco / options) ======== -->311 <div id="sheet" class="sheet hidden">312 <div id="sheetBack" class="sheet-back"></div>313 <div class="sheet-panel">314 <div class="sheet-grip"></div>315 <div id="sheetBody" class="sheet-body"></div>316 </div>317 </div>318</div>319320<script src="/vendor/marked.min.js"></script>321<script src="/vendor/highlight.min.js"></script>322<script src="/app.js"></script>323</body>324</html>325