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<!-- Partage (Open Graph / Twitter) — les jetons __NUM__/__DOMAIN__/__TAGLINE__ sont rendus par agent dans main.py -->9<meta property="og:type" content="website">10<meta property="og:site_name" content="KA Guardian — Groupe KA">11<meta property="og:title" content="ka·__NUM__ guardian — __TAGLINE__">12<meta property="og:description" content="Agent gardien autonome des connecteurs du Groupe KA : il détecte les pannes, répare avec Claude, surveille la guérison. Tout est public, en direct.">13<meta property="og:url" content="https://__DOMAIN__/">14<meta property="og:image" content="https://__DOMAIN__/og.png">15<meta property="og:image:width" content="2400">16<meta property="og:image:height" content="1260">17<meta property="og:locale" content="fr_CA">18<meta name="twitter:card" content="summary_large_image">19<meta name="twitter:title" content="ka·__NUM__ guardian — __TAGLINE__">20<meta name="twitter:description" content="Agent gardien autonome des connecteurs du Groupe KA — public, en direct.">21<meta name="twitter:image" content="https://__DOMAIN__/og.png">22<link rel="icon" type="image/svg+xml" href="/favicon.svg">23<link rel="apple-touch-icon" href="/favicon.svg">24<link rel="preconnect" href="https://fonts.googleapis.com">25<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>26<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">27<link rel="stylesheet" href="/static/style.css">28</head>29<body>3031<header class="topbar">32  <a class="wordmark" href="/"><span id="wm-name">ka·—</span><span class="ka" id="wm-ka">guardian</span></a>33  <nav class="tabs">34    <a class="tab active" href="/">⚡ Flux</a>35    <a class="tab" href="/commander">🎛 Commander</a>36  </nav>37  <nav class="topnav">38    <a class="gk-badge" href="https://www.groupe-ka.com">groupe<b><span class="ka">·KA</span></b></a>39    <span id="siblings"></span>40  </nav>41</header>4243<main>44  <!-- ============ HÉROS ============ -->45  <section class="hero">46    <div class="hero-main">47      <p class="klabel" id="hero-label">agent gardien autonome</p>48      <h1>Il veille. Il répare.<br>Il <span class="hl">rend des comptes</span>.</h1>49      <p class="lede" id="lede">Un connecteur tombe en panne quelque part dans l'écosystème ·Ka ?50        Cet agent le détecte, ouvre le code, le répare, prouve que ça marche — et si ça empire,51        il revient au commit d'avant. Tout ce qu'il fait est public, ici, en direct.</p>52      <div class="hero-chips" id="hero-chips">53        <span class="chip chip-accent"><span class="live-dot" id="live-dot"></span> en direct</span>54      </div>55    </div>56    <aside class="defcard card">57      <p class="klabel">définition</p>58      <p class="defword">gar·dien <span class="phon">/ɡaʁ.djɛ̃/</span> <span class="nat">n.m.</span></p>59      <ol class="defs">60        <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>61        <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>62        <li><b>surveille</b> — 8 heures d'observation post-réparation avant de déclarer victoire.</li>63        <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>64      </ol>65    </aside>66  </section>6768  <!-- ============ CHIFFRES ============ -->69  <section>70    <p class="klabel">l'état du gardien</p>71    <div class="tiles" id="tiles"></div>72  </section>7374  <!-- ============ ÉCRAN + INCIDENTS ============ -->75  <section class="cols">76    <div class="screen card" id="screen">77      <div class="screen-head">78        <span class="screen-dots"><i></i><i></i><i></i></span>79        <span class="screen-title" id="screen-title">flux — tout ce que l'agent fait, en temps réel</span>80      </div>81      <div class="feed" id="feed"><div class="feed-empty">// en attente d'activité — le gardien scrute api-ka toutes les 5 minutes…</div></div>82    </div>83    <div class="side">84      <div class="card pad">85        <p class="klabel">incidents</p>86        <div id="incidents" class="incidents"></div>87      </div>88      <div class="card pad">89        <p class="klabel">territoire surveillé</p>90        <div id="coverage" class="coverage"></div>91      </div>92    </div>93  </section>9495  <!-- ============ MISSIONS ============ -->96  <section>97    <p class="klabel">registre des missions <span class="hint">— cliquer une ligne pour le déroulé complet, commits inclus</span></p>98    <div class="card table-wrap">99      <table id="missions">100        <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>101        <tbody></tbody>102      </table>103    </div>104  </section>105</main>106107<footer class="ka-footer">108  <div class="foot-in">109    <a class="wordmark wordmark-foot" href="/"><span id="foot-name">ka·—</span><span class="ka">guardian</span></a>110    <p class="notice"><b>Zéro boîte noire.</b> Chaque diagnostic, chaque commit, chaque rollback de cet agent111      est journalisé et affiché ici. Les réparations sont committées dans les repos des plateformes,112      jamais poussées sans passage humain.</p>113    <p class="sites" id="foot-sites"></p>114    <p class="legal">Groupe KA — agrégation automatisée, Québec. <a href="https://www.groupe-ka.com">groupe-ka.com</a></p>115  </div>116</footer>117118<div class="modal" id="modal" hidden>119  <div class="modal-box card">120    <div class="modal-head"><h3 id="modal-title">Mission</h3><button id="modal-close" aria-label="fermer">✕</button></div>121    <div class="modal-body" id="modal-body"></div>122  </div>123</div>124125<script src="/static/app.js"></script>126</body>127</html>128