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 <label class="soc-switch">155 <input type="checkbox" id="socAutoToggle">156 <span>Publication automatique sur la Page Facebook Groupe-KA</span>157 </label>158 <div class="soc-sub" id="socNext">—</div>159 <div class="soc-actions">160 <button id="socRunNow" class="btn-cta small">⚡ Publier maintenant</button>161 <button id="socCheckLogin" class="btn-ghost small">Vérifier Facebook</button>162 </div>163 <div class="soc-sub" id="socLogin"></div>164 </div>165166 <div class="soc-card">167 <h3>Générer un post</h3>168 <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>169 <div class="soc-actions">170 <select id="socSite" class="soc-select">171 <option value="">Choix auto (fait marquant)</option>172 <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>173 </select>174 <button id="socGenerate" class="btn-cta small">✨ Générer</button>175 </div>176 <div id="socDraft" class="soc-draft hidden">177 <img id="socImg" alt="aperçu">178 <textarea id="socCaption" rows="7"></textarea>179 <div class="soc-actions">180 <button id="socPublish" class="btn-cta small">📣 Publier ce post</button>181 <button id="socRegen" class="btn-ghost small">↻ Regénérer</button>182 </div>183 </div>184 </div>185186 <div class="soc-card">187 <h3>Journal</h3>188 <div id="socLog" class="soc-log"></div>189 </div>190 </section>191192 <!-- ======== Bottom nav ======== -->193 <nav class="bottomnav">194 <button data-view="chat" class="nav-btn active">195 <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>196 <span>Chat</span><i class="badge hidden"></i>197 </button>198 <button data-view="sessions" class="nav-btn">199 <svg viewBox="0 0 24 24"><path d="M5 5h14M5 12h14M5 19h9" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>200 <span>Sessions</span><i class="badge hidden"></i>201 </button>202 <button data-view="prompts" class="nav-btn">203 <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>204 <span>Prompts</span><i class="badge hidden"></i>205 </button>206 <button data-view="eco" class="nav-btn">207 <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>208 <span>Écosystème</span><i class="badge hidden"></i>209 </button>210 <button data-view="social" class="nav-btn">211 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.8-4H15a3 3 0 00.2 4l-6.4 3.7M18 16a3 3 0 10.2 4M8.6 12.3L15 16" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="1.8" fill="none"/></svg>212 <span>Social</span><i class="badge hidden"></i>213 </button>214 <button data-view="settings" class="nav-btn">215 <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>216 <span>Réglages</span><i class="badge hidden"></i>217 </button>218 </nav>219220 <!-- ======== Feuille détail (éco / options) ======== -->221 <div id="sheet" class="sheet hidden">222 <div id="sheetBack" class="sheet-back"></div>223 <div class="sheet-panel">224 <div class="sheet-grip"></div>225 <div id="sheetBody" class="sheet-body"></div>226 </div>227 </div>228</div>229230<script src="/vendor/marked.min.js"></script>231<script src="/vendor/highlight.min.js"></script>232<script src="/app.js"></script>233</body>234</html>235