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="topnav">20    <a class="gk-badge" href="https://www.groupe-ka.com">groupe<b><span class="ka">·KA</span></b></a>21    <span id="siblings"></span>22  </nav>23</header>2425<main>26  <!-- ============ HÉROS ============ -->27  <section class="hero">28    <div class="hero-main">29      <p class="klabel" id="hero-label">agent gardien autonome</p>30      <h1>Il veille. Il répare.<br>Il <span class="hl">rend des comptes</span>.</h1>31      <p class="lede" id="lede">Un connecteur tombe en panne quelque part dans l'écosystème ·Ka ?32        Cet agent le détecte, ouvre le code, le répare, prouve que ça marche — et si ça empire,33        il revient au commit d'avant. Tout ce qu'il fait est public, ici, en direct.</p>34      <div class="hero-chips" id="hero-chips">35        <span class="chip chip-accent"><span class="live-dot" id="live-dot"></span> en direct</span>36      </div>37    </div>38    <aside class="defcard card">39      <p class="klabel">définition</p>40      <p class="defword">gar·dien <span class="phon">/ɡaʁ.djɛ̃/</span> <span class="nat">n.m.</span></p>41      <ol class="defs">42        <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>43        <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>44        <li><b>surveille</b> — 8 heures d'observation post-réparation avant de déclarer victoire.</li>45        <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>46      </ol>47    </aside>48  </section>4950  <!-- ============ CHIFFRES ============ -->51  <section>52    <p class="klabel">l'état du gardien</p>53    <div class="tiles" id="tiles"></div>54  </section>5556  <!-- ============ COMMANDER UN EFFORT ============ -->57  <section class="commander card">58    <div class="cmd-grid">59      <div class="cmd-intro">60        <p class="klabel">commander un effort</p>61        <h2 class="cmd-title">Donne-lui du <span class="hl">travail</span>.</h2>62        <p class="cmd-lede">Choisis une plateforme et lance une session Claude Code63          <b>100 % autonome</b> sur son nœud : elle découvre (Serper), escalade s'il le faut64          (proxys résidentiels, Scrapfly, acteurs Apify), teste pour vrai, committe —65          et travaille jusqu'au bout sans rien demander. Tout s'affiche dans le flux.</p>66      </div>67      <form id="effort-form">68        <div class="frow">69          <label class="flab">Type d'effort70            <select id="ef-kind" class="select">71              <option value="effort_new">Nouveau connecteur — découverte + construction</option>72              <option value="effort_enrich">Enrichissement d'un connecteur existant</option>73            </select>74          </label>75          <label class="flab">Plateforme76            <select id="ef-service" class="select"></select>77          </label>78        </div>79        <label class="flab" id="ef-source-wrap" hidden>Connecteur à enrichir80          <select id="ef-source" class="select"></select>81        </label>82        <label class="flab">Consigne (optionnel)83          <input id="ef-note" class="input" placeholder="ex.: vise les microbrasseries de la Côte-Nord, ajoute les fiches détail…">84        </label>85        <div class="frow frow-end">86          <label class="flab">Jeton d'opérateur87            <input id="ef-token" type="password" class="input" placeholder="KA_GUARDIAN_TOKEN" autocomplete="off">88          </label>89          <button type="submit" class="btn-primary">Lancer l'effort →</button>90        </div>91        <p class="cmd-msg" id="ef-msg"></p>92      </form>93    </div>94  </section>9596  <!-- ============ ÉCRAN + INCIDENTS ============ -->97  <section class="cols">98    <div class="screen card" id="screen">99      <div class="screen-head">100        <span class="screen-dots"><i></i><i></i><i></i></span>101        <span class="screen-title" id="screen-title">flux — tout ce que l'agent fait, en temps réel</span>102      </div>103      <div class="feed" id="feed"><div class="feed-empty">// en attente d'activité — le gardien scrute api-ka toutes les 5 minutes…</div></div>104    </div>105    <div class="side">106      <div class="card pad">107        <p class="klabel">incidents</p>108        <div id="incidents" class="incidents"></div>109      </div>110      <div class="card pad">111        <p class="klabel">territoire surveillé</p>112        <div id="coverage" class="coverage"></div>113      </div>114    </div>115  </section>116117  <!-- ============ MISSIONS ============ -->118  <section>119    <p class="klabel">registre des missions <span class="hint">— cliquer une ligne pour le déroulé complet, commits inclus</span></p>120    <div class="card table-wrap">121      <table id="missions">122        <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>123        <tbody></tbody>124      </table>125    </div>126  </section>127</main>128129<footer class="ka-footer">130  <div class="foot-in">131    <a class="wordmark wordmark-foot" href="/"><span id="foot-name">ka·—</span><span class="ka">guardian</span></a>132    <p class="notice"><b>Zéro boîte noire.</b> Chaque diagnostic, chaque commit, chaque rollback de cet agent133      est journalisé et affiché ici. Les réparations sont committées dans les repos des plateformes,134      jamais poussées sans passage humain.</p>135    <p class="sites" id="foot-sites"></p>136    <p class="legal">Groupe KA — agrégation automatisée, Québec. <a href="https://www.groupe-ka.com">groupe-ka.com</a></p>137  </div>138</footer>139140<div class="modal" id="modal" hidden>141  <div class="modal-box card">142    <div class="modal-head"><h3 id="modal-title">Mission</h3><button id="modal-close" aria-label="fermer">✕</button></div>143    <div class="modal-body" id="modal-body"></div>144  </div>145</div>146147<script src="/static/app.js"></script>148</body>149</html>150