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 — Console 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</head>16<body>1718<!-- ============ Connexion ============ -->19<div id="login" class="login hidden">20 <div class="login-box">21 <div class="ka-mark big">Ka</div>22 <h1 class="login-title">Admin<span class="tiret">-</span>Ka</h1>23 <p class="login-sub">Console Claude Code · Groupe KA</p>24 <input id="password" type="password" placeholder="Mot de passe" autocomplete="current-password">25 <button id="loginBtn" class="btn-cta">Se connecter</button>26 <div id="loginError" class="login-error"></div>27 </div>28 <div class="login-foot">M3U96a · MacLustr</div>29</div>3031<!-- ============ App ============ -->32<div id="app" class="app hidden">3334 <header class="header">35 <div class="brand">36 <span class="ka-mark">Ka</span>37 <span class="brand-name">Admin<span class="tiret">-</span>Ka</span>38 </div>39 <div id="connPill" class="conn-pill off"><span class="conn-dot"></span><span id="connText">hors ligne</span></div>40 </header>4142 <!-- Bannière notifications / alertes -->43 <div id="banners" class="banners"></div>4445 <!-- ======== Vue CHAT ======== -->46 <section id="view-chat" class="view">47 <div class="chatbar">48 <select id="projectSel" class="pill-select" title="Projet (repo + nœud)"></select>49 <button id="chipModel" class="chip" title="Modèle">opus</button>50 <button id="chipPerm" class="chip" title="Permissions">normal</button>51 <button id="chipMore" class="chip ghost" title="Options de session">⋯</button>52 </div>53 <div id="sessMeta" class="sess-meta hidden">54 <span id="metaModel"></span><span id="metaSid"></span><span id="metaCost"></span><span id="metaCtx"></span>55 </div>5657 <main id="messages" class="messages"></main>5859 <div id="welcome" class="welcome">60 <div class="ka-mark big">Ka</div>61 <h2>Console Claude Code</h2>62 <p>Le vrai Claude Code, lancé directement sur le nœud de chaque app du Groupe KA.</p>63 <div class="hints">64 <button class="hint">Quel modèle es-tu et dans quel répertoire travailles-tu ?</button>65 <button class="hint">Montre les 5 derniers commits</button>66 <button class="hint">État PM2 de l'app</button>67 </div>68 </div>6970 <footer class="composer">71 <div class="composer-inner">72 <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>73 <textarea id="input" rows="1" placeholder="Demander à Claude Code…" enterkeyhint="send"></textarea>74 <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>75 <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>76 </div>77 <div id="slashHint" class="slash-hint hidden"></div>78 </footer>79 </section>8081 <!-- ======== Vue SESSIONS ======== -->82 <section id="view-sessions" class="view hidden">83 <div class="view-head">84 <h2>Sessions</h2>85 <button id="newSessBtn" class="btn-cta small">＋ Nouvelle</button>86 </div>87 <div id="sessList" class="sess-list"></div>88 </section>8990 <!-- ======== Vue PROMPTS (bank) ======== -->91 <section id="view-prompts" class="view hidden">92 <div class="view-head">93 <h2>Prompts</h2>94 <button id="newPromptBtn" class="btn-cta small">＋ Nouveau</button>95 </div>96 <div id="promptList" class="sess-list"></div>97 </section>9899 <!-- ======== Vue ÉCOSYSTÈME ======== -->100 <section id="view-eco" class="view hidden">101 <div class="view-head">102 <h2>Écosystème</h2>103 <div class="head-actions">104 <button id="incBtn" class="chip">Incidents</button>105 <span id="ecoStamp" class="eco-stamp"></span>106 </div>107 </div>108 <div id="ecoOverview" class="eco-overview"></div>109 <div id="ecoGrid" class="eco-grid"><div class="eco-loading">Chargement…</div></div>110 <h3 class="eco-subhead">Nœuds du cluster</h3>111 <div id="ecoNodes" class="node-grid"></div>112 </section>113114 <!-- ======== Vue RÉGLAGES ======== -->115 <section id="view-settings" class="view hidden">116 <div class="view-head"><h2>Réglages</h2></div>117 <div class="set-card">118 <div class="set-label">Modèle par défaut</div>119 <div class="seg" id="segModel">120 <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>121 </div>122 </div>123 <div class="set-card">124 <div class="set-label">Permissions par défaut</div>125 <div class="seg vert" id="segPerm">126 <button data-v="default">Normal — demande dans le chat</button>127 <button data-v="acceptEdits">acceptEdits — éditions auto</button>128 <button data-v="plan">Plan — proposer avant d'agir</button>129 <button data-v="bypass">⚠ Tout autoriser (bypass)</button>130 </div>131 </div>132 <div class="set-card">133 <div class="set-label">Conversation active</div>134 <div class="set-row"><span>Session Claude Code</span><span id="setSid" class="mono">—</span></div>135 <div class="set-row"><span>Coût cumulé</span><span id="setCost" class="mono">—</span></div>136 <div class="set-row"><span>Contexte utilisé</span><span id="setCtx" class="mono">—</span></div>137 <div class="set-actions">138 <button id="btnClear" class="btn-ghost">/clear — effacer le contexte</button>139 <button id="btnCompact" class="btn-ghost">/compact — compacter</button>140 </div>141 </div>142 <div class="set-card">143 <div class="set-row"><span>Backend</span><span id="setHost" class="mono">M3U96a:3300</span></div>144 <div class="set-row"><span>Version</span><span class="mono">2.0.0</span></div>145 </div>146 <button id="logoutBtn" class="btn-danger">Se déconnecter</button>147 </section>148149 <!-- ======== Vue SOCIAL ======== -->150 <section id="view-social" class="view hidden">151 <div class="view-head"><h2>Social</h2></div>152153 <div class="soc-card">154 <h3>Écran du nœud (M3U96a) — pour finir un Reel</h3>155 <p class="soc-sub">Quand un Reel est prêt à publier, l'éditeur Facebook demande un clic « Suivant » manuel. Connecte-toi ici pour voir et cliquer directement dans l'app.</p>156 <div class="soc-actions">157 <button id="vncConnect" class="btn-cta small">🖥️ Connecter l'écran</button>158 <button id="vncDisconnect" class="btn-ghost small">Déconnecter</button>159 <span id="vncStatus" class="soc-sub"></span>160 </div>161 <div id="vncPanel" style="display:none;margin-top:12px;border:2px solid var(--ink,#1a1a1a);border-radius:12px;overflow:hidden;background:#0d0d0d;min-height:200px"></div>162 </div>163164 <div class="soc-card">165 <label class="soc-switch">166 <input type="checkbox" id="socAutoToggle">167 <span>Publication automatique sur la Page Facebook Groupe-KA</span>168 </label>169 <div class="soc-sub" id="socNext">—</div>170 <div class="soc-actions">171 <button id="socRunNow" class="btn-cta small">⚡ Publier maintenant</button>172 <button id="socCheckLogin" class="btn-ghost small">Vérifier Facebook</button>173 </div>174 <div class="soc-sub" id="socLogin"></div>175 </div>176177 <div class="soc-card">178 <h3>Générer un post</h3>179 <textarea id="socPrompt" rows="3" placeholder="Décris le post voulu (optionnel). Ex : mets en valeur les aubaines de logement sous le prix du marché."></textarea>180 <div class="soc-actions">181 <select id="socSite" class="soc-select">182 <option value="">Choix auto (fait marquant)</option>183 <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="resto-ka">Resto·Ka</option><option value="sorti-ka">Sorti·Ka</option><option value="crea-ka">Créa·Ka</option><option value="job-ka">Job·Ka</option><option value="trouve-ka">Trouve·Ka</option>184 </select>185 <button id="socGenerate" class="btn-cta small">✨ Générer</button>186 </div>187 <div id="socDraft" class="soc-draft hidden">188 <img id="socImg" alt="aperçu">189 <textarea id="socCaption" rows="7"></textarea>190 <div class="soc-actions">191 <button id="socPublish" class="btn-cta small">📣 Publier ce post</button>192 <button id="socRegen" class="btn-ghost small">↻ Regénérer</button>193 </div>194 </div>195 </div>196197 <div class="soc-card">198 <h3>Reel vidéo (animation + musique)</h3>199 <p class="soc-sub">L'Agent KA génère un reel animé avec musique. La publication vidéo demande un clic « Suivant » manuel (limite du nœud sans écran) — utilise « Publier (assisté) » puis termine sur l'écran distant, ou télécharge pour publier depuis ton téléphone.</p>200 <textarea id="socReelPrompt" rows="2" placeholder="Sujet du reel (optionnel)"></textarea>201 <div class="soc-actions">202 <select id="socReelSite" class="soc-select">203 <option value="">Choix auto (fait marquant)</option>204 <option value="lou-ka">Lou·Ka</option><option value="immo-ka">Immo·Ka</option>205 <option value="vrai-prix">Vrai-Prix</option><option value="auto-ka">Auto·Ka</option>206 <option value="food-ka">Food·Ka</option><option value="fabri-ka">Fabri·Ka</option>207 <option value="resto-ka">Resto·Ka</option><option value="sorti-ka">Sorti·Ka</option>208 <option value="crea-ka">Créa·Ka</option><option value="job-ka">Job·Ka</option>209 <option value="trouve-ka">Trouve·Ka</option>210 </select>211 <button id="socReelGen" class="btn-cta small">🎬 Générer un reel</button>212 </div>213 <div id="socReelDraft" class="soc-draft hidden">214 <video id="socReelVid" controls playsinline style="width:100%;max-width:300px;border-radius:12px;border:2px solid var(--ink,#1a1a1a);align-self:center"></video>215 <textarea id="socReelCaption" rows="6"></textarea>216 <div class="soc-actions">217 <button id="socReelPublish" class="btn-cta small">📣 Publier (assisté)</button>218 <a id="socReelDl" class="btn-ghost small" download>⬇︎ Télécharger</a>219 </div>220 </div>221 </div>222223 <div class="soc-card">224 <h3>Journal</h3>225 <div id="socLog" class="soc-log"></div>226 </div>227 </section>228229 <!-- ======== Bottom nav ======== -->230 <nav class="bottomnav">231 <button data-view="chat" class="nav-btn active">232 <svg viewBox="0 0 24 24"><path d="M4 6a3 3 0 013-3h10a3 3 0 013 3v8a3 3 0 01-3 3H9l-4 4v-4a3 3 0 01-1-2.2z" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linejoin="round"/></svg>233 <span>Chat</span><i class="badge hidden"></i>234 </button>235 <button data-view="sessions" class="nav-btn">236 <svg viewBox="0 0 24 24"><path d="M5 5h14M5 12h14M5 19h9" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>237 <span>Sessions</span><i class="badge hidden"></i>238 </button>239 <button data-view="prompts" class="nav-btn">240 <svg viewBox="0 0 24 24"><path d="M7 3h10a2 2 0 012 2v16l-7-4-7 4V5a2 2 0 012-2z" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linejoin="round"/></svg>241 <span>Prompts</span><i class="badge hidden"></i>242 </button>243 <button data-view="eco" class="nav-btn">244 <svg viewBox="0 0 24 24"><path d="M4 17l4-6 4 3 4-8 4 5" stroke="currentColor" stroke-width="1.9" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 21h18" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>245 <span>Écosystème</span><i class="badge hidden"></i>246 </button>247 <!-- social-hidden (désactivé temporairement) -->248 <button data-view="settings" class="nav-btn">249 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M12 2.8v3M12 18.2v3M2.8 12h3M18.2 12h3M5.5 5.5l2.1 2.1M16.4 16.4l2.1 2.1M18.5 5.5l-2.1 2.1M7.6 16.4l-2.1 2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>250 <span>Réglages</span><i class="badge hidden"></i>251 </button>252 </nav>253254 <!-- ======== Feuille détail (éco / options) ======== -->255 <div id="sheet" class="sheet hidden">256 <div id="sheetBack" class="sheet-back"></div>257 <div class="sheet-panel">258 <div class="sheet-grip"></div>259 <div id="sheetBody" class="sheet-body"></div>260 </div>261 </div>262</div>263264<script src="/vendor/marked.min.js"></script>265<script src="/vendor/highlight.min.js"></script>266<script src="/app.js"></script>267<script type="module">import RFB from "/vendor/novnc/core/rfb.js?v=3"; window.KA_RFB=RFB;</script>268</body>269</html>270