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 ÉCOSYSTÈME ======== -->91 <section id="view-eco" class="view hidden">92 <div class="view-head">93 <h2>Écosystème</h2>94 <div class="head-actions">95 <button id="incBtn" class="chip">Incidents</button>96 <span id="ecoStamp" class="eco-stamp"></span>97 </div>98 </div>99 <div id="ecoOverview" class="eco-overview"></div>100 <div id="ecoGrid" class="eco-grid"><div class="eco-loading">Chargement…</div></div>101 <h3 class="eco-subhead">Nœuds du cluster</h3>102 <div id="ecoNodes" class="node-grid"></div>103 </section>104105 <!-- ======== Vue RÉGLAGES ======== -->106 <section id="view-settings" class="view hidden">107 <div class="view-head"><h2>Réglages</h2></div>108 <div class="set-card">109 <div class="set-label">Modèle par défaut</div>110 <div class="seg" id="segModel">111 <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>112 </div>113 </div>114 <div class="set-card">115 <div class="set-label">Permissions par défaut</div>116 <div class="seg vert" id="segPerm">117 <button data-v="default">Normal — demande dans le chat</button>118 <button data-v="acceptEdits">acceptEdits — éditions auto</button>119 <button data-v="plan">Plan — proposer avant d'agir</button>120 <button data-v="bypass">⚠ Tout autoriser (bypass)</button>121 </div>122 </div>123 <div class="set-card">124 <div class="set-label">Conversation active</div>125 <div class="set-row"><span>Session Claude Code</span><span id="setSid" class="mono">—</span></div>126 <div class="set-row"><span>Coût cumulé</span><span id="setCost" class="mono">—</span></div>127 <div class="set-row"><span>Contexte utilisé</span><span id="setCtx" class="mono">—</span></div>128 <div class="set-actions">129 <button id="btnClear" class="btn-ghost">/clear — effacer le contexte</button>130 <button id="btnCompact" class="btn-ghost">/compact — compacter</button>131 </div>132 </div>133 <div class="set-card">134 <div class="set-row"><span>Backend</span><span id="setHost" class="mono">M3U96a:3300</span></div>135 <div class="set-row"><span>Version</span><span class="mono">2.0.0</span></div>136 </div>137 <button id="logoutBtn" class="btn-danger">Se déconnecter</button>138 </section>139140 <!-- ======== Bottom nav ======== -->141 <nav class="bottomnav">142 <button data-view="chat" class="nav-btn active">143 <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>144 <span>Chat</span><i class="badge hidden"></i>145 </button>146 <button data-view="sessions" class="nav-btn">147 <svg viewBox="0 0 24 24"><path d="M5 5h14M5 12h14M5 19h9" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>148 <span>Sessions</span><i class="badge hidden"></i>149 </button>150 <button data-view="eco" class="nav-btn">151 <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>152 <span>Écosystème</span><i class="badge hidden"></i>153 </button>154 <button data-view="settings" class="nav-btn">155 <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>156 <span>Réglages</span><i class="badge hidden"></i>157 </button>158 </nav>159160 <!-- ======== Feuille détail (éco / options) ======== -->161 <div id="sheet" class="sheet hidden">162 <div id="sheetBack" class="sheet-back"></div>163 <div class="sheet-panel">164 <div class="sheet-grip"></div>165 <div id="sheetBody" class="sheet-body"></div>166 </div>167 </div>168</div>169170<script src="/vendor/marked.min.js"></script>171<script src="/vendor/highlight.min.js"></script>172<script src="/app.js"></script>173</body>174</html>175