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