agent-manager/sketches/003-terminal-dense/index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>am web — Terminal dense (mockup)</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:#0d1117; --panel:#10161f; --border:#212a36; --fg:#c9d4e0; --muted:#6e7b8a;
    --accent:#3fb950; --accent2:#58a6ff; --ok:#3fb950; --warn:#d29922; --err:#f85149; --purple:#bc8cff;
  }
  body {
    font-family:ui-monospace,SFMono-Regular,Consolas,"Cascadia Mono",Menlo,monospace;
    background:var(--bg); color:var(--fg); font-size:12.5px; line-height:1.5;
  }
  .top {
    border-bottom:1px solid var(--border); padding:9px 16px; display:flex; align-items:center; gap:16px;
    background:var(--panel); position:sticky; top:0; z-index:5;
  }
  .top .prompt { color:var(--accent); font-weight:700; }
  .top .brand { color:var(--fg); }
  .tabs { display:flex; gap:2px; }
  .tab { padding:3px 10px; cursor:pointer; color:var(--muted); border:1px solid transparent; border-radius:5px; }
  .tab:hover { color:var(--fg); }
  .tab.active { color:var(--accent); background:rgba(63,185,80,.08); border-color:rgba(63,185,80,.3); }
  .top .spacer { flex:1; }
  .stat { color:var(--muted); font-size:11.5px; }
  .stat b { color:var(--ok); font-weight:400; }
  .btn { background:transparent; border:1px solid var(--border); color:var(--fg); border-radius:5px; padding:3px 10px; font-family:inherit; font-size:12px; cursor:pointer; }
  .btn:hover { border-color:var(--accent); color:var(--accent); }
  .wrap { max-width:1180px; margin:0 auto; padding:14px 16px 40px; }
  /* overview row */
  .kv { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
  .kv-item { border:1px solid var(--border); background:var(--panel); border-radius:6px; padding:9px 12px; }
  .kv-item .k { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; }
  .kv-item .v { font-size:21px; font-weight:700; color:var(--fg); margin-top:2px; }
  .kv-item .v small { color:var(--muted); font-size:11px; font-weight:400; }
  .kv-item.running .v { color:var(--accent); }
  .kv-item.running .v::before { content:"● "; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .box { border:1px solid var(--border); background:var(--panel); border-radius:6px; overflow:hidden; }
  .box .h { padding:7px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; display:flex; justify-content:space-between; }
  .box .h .n { color:var(--accent); text-transform:none; letter-spacing:0; }
  .box .b { padding:10px 12px; }
  /* bars */
  .br { display:grid; grid-template-columns:95px 1fr 30px; gap:8px; align-items:center; margin-bottom:6px; }
  .br .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .br .tr { height:10px; background:var(--bg); border-radius:3px; overflow:hidden; }
  .br .fl { height:100%; background:var(--accent); opacity:.85; }
  .br .vl { text-align:right; color:var(--muted); }
  /* tables */
  table { width:100%; border-collapse:collapse; }
  th { text-align:left; color:var(--muted); font-weight:400; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; padding:5px 10px; border-bottom:1px solid var(--border); }
  td { padding:5px 10px; border-bottom:1px solid rgba(33,42,54,.6); white-space:nowrap; }
  td.wrap { white-space:normal; }
  tbody tr:hover { background:rgba(63,185,80,.05); }
  .st { font-size:11px; } .st::before { content:"● "; }
  .st.ok { color:var(--ok); } .st.run { color:var(--accent2); } .st.fail { color:var(--err); } .st.mut { color:var(--purple); }
  .dim { color:var(--muted); }
  .view { display:none; } .view.active { display:block; }
  @media (max-width:900px){ .row{grid-template-columns:1fr;} .kv{grid-template-columns:repeat(2,1fr);} }
</style>
</head>
<body>
<div class="top">
  <span class="prompt">$</span><span class="brand">am web</span>
  <div class="tabs">
    <div class="tab active" data-view="overview">overview</div>
    <div class="tab" data-view="stats">stats</div>
    <div class="tab" data-view="sessions">sessions</div>
    <div class="tab" data-view="events">events</div>
    <div class="tab" data-view="projects">projects</div>
  </div>
  <div class="spacer"></div>
  <span class="stat">v0.6.0 · <b>●</b> local · 127.0.0.1:7878</span>
  <button class="btn" onclick="fakeRefresh()">↻ refresh</button>
</div>

<div class="wrap">
  <section class="view active" id="overview">
    <div class="kv">
      <div class="kv-item"><div class="k">agents installés</div><div class="v">9</div></div>
      <div class="kv-item running"><div class="k">en cours</div><div class="v">2</div></div>
      <div class="kv-item"><div class="k">sessions 7j</div><div class="v">47 <small>▲12%</small></div></div>
      <div class="kv-item"><div class="k">events 24h</div><div class="v">132 <small>▼8%</small></div></div>
    </div>
    <div class="row">
      <div class="box">
        <div class="h">top agents · sessions 7j</div>
        <div class="b">
          <div class="br"><span class="nm">claude-code</span><div class="tr"><div class="fl" style="width:100%"></div></div><span class="vl">18</span></div>
          <div class="br"><span class="nm">aider</span><div class="tr"><div class="fl" style="width:50%"></div></div><span class="vl">9</span></div>
          <div class="br"><span class="nm">codex</span><div class="tr"><div class="fl" style="width:44%"></div></div><span class="vl">8</span></div>
          <div class="br"><span class="nm">gemini-cli</span><div class="tr"><div class="fl" style="width:28%"></div></div><span class="vl">5</span></div>
          <div class="br"><span class="nm">jcode</span><div class="tr"><div class="fl" style="width:22%"></div></div><span class="vl">4</span></div>
          <div class="br"><span class="nm">opencode</span><div class="tr"><div class="fl" style="width:17%"></div></div><span class="vl">3</span></div>
        </div>
      </div>
      <div class="box">
        <div class="h">activité 14j <span class="n">sessions/jour</span></div>
        <div class="b">
          <svg viewBox="0 0 480 150" width="100%" height="140">
            <defs><linearGradient id="g3" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3fb950" stop-opacity=".3"/><stop offset="1" stop-color="#3fb950" stop-opacity="0"/></linearGradient></defs>
            <path d="M0,120 L37,108 L74,116 L111,96 L148,104 L185,84 L222,92 L259,72 L296,80 L333,62 L370,70 L407,48 L444,58 L480,34 L480,150 L0,150 Z" fill="url(#g3)"/>
            <polyline points="0,120 37,108 74,116 111,96 148,104 185,84 222,92 259,72 296,80 333,62 370,70 407,48 444,58 480,34" fill="none" stroke="#3fb950" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div style="display:flex;justify-content:space-between;color:var(--muted);font-size:10px"><span>04/08</span><span>11/08</span><span>18/08</span></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="h">sessions en cours</div>
      <div class="b" style="padding:0">
        <table>
          <thead><tr><th>id</th><th>agent</th><th>projet</th><th>durée</th><th>depuis</th></tr></thead>
          <tbody>
            <tr><td class="dim">20260818_172631_b4e2f1</td><td>claude-code</td><td>agent-manager</td><td>3h12m</td><td class="dim">14:26</td></tr>
            <tr><td class="dim">20260818_171812_c9d0a4</td><td>codex</td><td>flowdeck</td><td>14m</td><td class="dim">17:18</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="view" id="stats">
    <div class="box">
      <div class="h">stats par agent · 30j</div>
      <div class="b" style="padding:0">
        <table>
          <thead><tr><th>agent</th><th>sessions</th><th>durée</th><th>succès</th><th>coût</th><th>dernière act.</th></tr></thead>
          <tbody>
            <tr><td>claude-code</td><td>54</td><td>38h12m</td><td><span class="st ok">94%</span></td><td class="dim">12,40 €</td><td class="dim">2 min</td></tr>
            <tr><td>aider</td><td>31</td><td>21h48m</td><td><span class="st ok">87%</span></td><td class="dim">4,10 €</td><td class="dim">3 h</td></tr>
            <tr><td>codex</td><td>27</td><td>19h05m</td><td><span class="st ok">89%</span></td><td class="dim">8,75 €</td><td class="dim">14 min</td></tr>
            <tr><td>gemini-cli</td><td>14</td><td>6h33m</td><td><span class="st ok">79%</span></td><td class="dim">0 € local</td><td class="dim">5 h</td></tr>
            <tr><td>jcode</td><td>12</td><td>5h02m</td><td><span class="st run">67%</span></td><td class="dim">1,20 €</td><td class="dim">hier</td></tr>
            <tr><td>opencode</td><td>9</td><td>4h40m</td><td><span class="st fail">55%</span></td><td class="dim">0,90 €</td><td class="dim">2 j</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="view" id="sessions">
    <div class="box">
      <div class="h">sessions · 7j</div>
      <div class="b" style="padding:8px 12px 0">
        <input id="sess-search" placeholder="$ grep sessions…" style="width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:inherit;font-size:12px;padding:6px 10px;border-radius:4px;margin-bottom:6px" oninput="filterSessions(this.value)">
      </div>
      <div class="b" style="padding:0">
        <table>
          <thead><tr><th>id</th><th>agent</th><th>projet</th><th>statut</th><th>durée</th><th>fin</th></tr></thead>
          <tbody id="sess-body">
            <tr><td class="dim">20260818_172631_b4e2f1</td><td>claude-code</td><td>agent-manager</td><td><span class="st run">running</span></td><td>3h12m</td><td class="dim">—</td></tr>
            <tr><td class="dim">20260818_171812_c9d0a4</td><td>codex</td><td>flowdeck</td><td><span class="st run">running</span></td><td>14m</td><td class="dim">—</td></tr>
            <tr><td class="dim">20260818_153402_a1b2c3</td><td>claude-code</td><td>agent-manager</td><td><span class="st ok">done</span></td><td>1h05m</td><td class="dim">16:40</td></tr>
            <tr><td class="dim">20260818_142118_d4e5f6</td><td>aider</td><td>obsigate</td><td><span class="st fail">failed</span></td><td>12m</td><td class="dim">14:33</td></tr>
            <tr><td class="dim">20260818_113047_e7f8a9</td><td>gemini-cli</td><td>imago</td><td><span class="st ok">done</span></td><td>42m</td><td class="dim">12:12</td></tr>
            <tr><td class="dim">20260817_220933_b0c1d2</td><td>claude-code</td><td>agent-manager</td><td><span class="st ok">done</span></td><td>2h47m</td><td class="dim">23:50</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="view" id="events">
    <div class="box">
      <div class="h">events · aujourd'hui</div>
      <div class="b" style="padding:0">
        <table>
          <thead><tr><th>heure</th><th>type</th><th>agent</th><th class="wrap">détail</th></tr></thead>
          <tbody>
            <tr><td class="dim">17:18</td><td><span class="st run">start</span></td><td>codex</td><td class="wrap">projet flowdeck</td></tr>
            <tr><td class="dim">16:40</td><td><span class="st ok">stop</span></td><td>claude-code</td><td class="wrap">session 1h05m</td></tr>
            <tr><td class="dim">15:34</td><td><span class="st run">start</span></td><td>claude-code</td><td class="wrap">projet agent-manager</td></tr>
            <tr><td class="dim">14:33</td><td><span class="st fail">run</span></td><td>aider</td><td class="wrap">exit code 1 — fichier manquant</td></tr>
            <tr><td class="dim">13:05</td><td><span class="st mut">update</span></td><td>jcode</td><td class="wrap">0.76.0 → 0.78.1</td></tr>
            <tr><td class="dim">10:02</td><td><span class="st mut">install</span></td><td>opencode</td><td class="wrap">0.14.2 — méthode binary</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="view" id="projects">
    <div class="box">
      <div class="h">projects</div>
      <div class="b" style="padding:0">
        <table>
          <thead><tr><th>projet</th><th>agents</th><th>sessions 7j</th><th>temps</th><th>dernière act.</th></tr></thead>
          <tbody>
            <tr><td>agent-manager <span class="dim">· Rust</span></td><td>claude-code · jcode · codex</td><td>24</td><td class="dim">41h</td><td class="dim">2 min</td></tr>
            <tr><td>flowdeck <span class="dim">· Python</span></td><td>codex · aider</td><td>11</td><td class="dim">19h</td><td class="dim">14 min</td></tr>
            <tr><td>obsigate <span class="dim">· Python</span></td><td>aider · gemini-cli</td><td>8</td><td class="dim">22h</td><td class="dim">3 h</td></tr>
            <tr><td>imago <span class="dim">· Python</span></td><td>gemini-cli</td><td>4</td><td class="dim">14h</td><td class="dim">5 h</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</div>

<script>
  document.querySelectorAll('.tab').forEach(el => {
    el.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(n => n.classList.remove('active'));
      document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
      el.classList.add('active');
      document.getElementById(el.dataset.view).classList.add('active');
    });
  });
  function fakeRefresh(){}
  function filterSessions(q){
    q = q.toLowerCase();
    document.querySelectorAll('#sess-body tr').forEach(tr => {
      tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  }
</script>
</body>
</html>