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