spb/ka-guardian

1<!doctype html>2<html lang="fr-CA">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">6<title>Guardian — Groupe KA</title>7<meta name="description" content="Agent gardien autonome du Groupe KA : il détecte les connecteurs en panne, les répare avec Claude, surveille la guérison et revient en arrière si ça empire. Tout est public, en direct.">8<link rel="icon" type="image/svg+xml" href="/favicon.svg">9<link rel="apple-touch-icon" href="/favicon.svg">10<link rel="preconnect" href="https://fonts.googleapis.com">11<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">13<link rel="stylesheet" href="/static/style.css">14</head>15<body>1617<header class="topbar">18  <a class="wordmark" href="/"><span id="wm-name">ka·—</span><span class="ka" id="wm-ka">guardian</span></a>19  <nav class="tabs">20    <a class="tab active" href="/">⚡ Flux</a>21    <a class="tab" href="/commander">🎛 Commander</a>22  </nav>23  <nav class="topnav">24    <a class="gk-badge" href="https://www.groupe-ka.com">groupe<b><span class="ka">·KA</span></b></a>25    <span id="siblings"></span>26  </nav>27</header>2829<main>30  <!-- ============ HÉROS ============ -->31  <section class="hero">32    <div class="hero-main">33      <p class="klabel" id="hero-label">agent gardien autonome</p>34      <h1>Il veille. Il répare.<br>Il <span class="hl">rend des comptes</span>.</h1>35      <p class="lede" id="lede">Un connecteur tombe en panne quelque part dans l'écosystème ·Ka ?36        Cet agent le détecte, ouvre le code, le répare, prouve que ça marche — et si ça empire,37        il revient au commit d'avant. Tout ce qu'il fait est public, ici, en direct.</p>38      <div class="hero-chips" id="hero-chips">39        <span class="chip chip-accent"><span class="live-dot" id="live-dot"></span> en direct</span>40      </div>41    </div>42    <aside class="defcard card">43      <p class="klabel">définition</p>44      <p class="defword">gar·dien <span class="phon">/ɡaʁ.djɛ̃/</span> <span class="nat">n.m.</span></p>45      <ol class="defs">46        <li><b>détecte</b> — lit la supervision api-ka toutes les 5 minutes ; un connecteur <i>cassé</i> ou <i>endormi</i> devient un incident.</li>47        <li><b>répare</b> — dépêche Claude dans le repo de l'app, sur le nœud même : diagnostic, correctif minimal, test réel, commit.</li>48        <li><b>surveille</b> — 8 heures d'observation post-réparation avant de déclarer victoire.</li>49        <li><b>recule</b> — l'app tombe ou rien ne guérit ? <i>git reset</i> au commit d'avant, redémarrage, et on le dit publiquement.</li>50      </ol>51    </aside>52  </section>5354  <!-- ============ CHIFFRES ============ -->55  <section>56    <p class="klabel">l'état du gardien</p>57    <div class="tiles" id="tiles"></div>58  </section>5960  <!-- ============ ÉCRAN + INCIDENTS ============ -->61  <section class="cols">62    <div class="screen card" id="screen">63      <div class="screen-head">64        <span class="screen-dots"><i></i><i></i><i></i></span>65        <span class="screen-title" id="screen-title">flux — tout ce que l'agent fait, en temps réel</span>66      </div>67      <div class="feed" id="feed"><div class="feed-empty">// en attente d'activité — le gardien scrute api-ka toutes les 5 minutes…</div></div>68    </div>69    <div class="side">70      <div class="card pad">71        <p class="klabel">incidents</p>72        <div id="incidents" class="incidents"></div>73      </div>74      <div class="card pad">75        <p class="klabel">territoire surveillé</p>76        <div id="coverage" class="coverage"></div>77      </div>78    </div>79  </section>8081  <!-- ============ MISSIONS ============ -->82  <section>83    <p class="klabel">registre des missions <span class="hint">— cliquer une ligne pour le déroulé complet, commits inclus</span></p>84    <div class="card table-wrap">85      <table id="missions">86        <thead><tr><th>Quand</th><th>Connecteur</th><th>Service</th><th>Nœud</th><th>Verdict</th><th>Commits</th><th>Durée</th><th>Coût</th></tr></thead>87        <tbody></tbody>88      </table>89    </div>90  </section>91</main>9293<footer class="ka-footer">94  <div class="foot-in">95    <a class="wordmark wordmark-foot" href="/"><span id="foot-name">ka·—</span><span class="ka">guardian</span></a>96    <p class="notice"><b>Zéro boîte noire.</b> Chaque diagnostic, chaque commit, chaque rollback de cet agent97      est journalisé et affiché ici. Les réparations sont committées dans les repos des plateformes,98      jamais poussées sans passage humain.</p>99    <p class="sites" id="foot-sites"></p>100    <p class="legal">Groupe KA — agrégation automatisée, Québec. <a href="https://www.groupe-ka.com">groupe-ka.com</a></p>101  </div>102</footer>103104<div class="modal" id="modal" hidden>105  <div class="modal-box card">106    <div class="modal-head"><h3 id="modal-title">Mission</h3><button id="modal-close" aria-label="fermer">✕</button></div>107    <div class="modal-body" id="modal-body"></div>108  </div>109</div>110111<script src="/static/app.js"></script>112</body>113</html>114