299 lines
20 KiB
HTML
299 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>am web — Cockpit sombre (mockup)</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg:#0b0f14; --panel:#121821; --panel2:#0f151c; --border:#1d2733;
|
|
--fg:#e6edf3; --muted:#8b98a5; --accent:#3ddc97; --accent2:#38bdf8;
|
|
--ok:#34d399; --warn:#f59e0b; --err:#f87171; --purple:#a78bfa;
|
|
}
|
|
body {
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
background:var(--bg); color:var(--fg); line-height:1.5; font-size:14px;
|
|
}
|
|
.layout { display:flex; min-height:100vh; }
|
|
/* ---------- Sidebar ---------- */
|
|
.side {
|
|
width:225px; flex-shrink:0; background:var(--panel2);
|
|
border-right:1px solid var(--border); padding:18px 12px;
|
|
display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh;
|
|
}
|
|
.logo { display:flex; align-items:center; gap:10px; padding:4px 8px 18px; }
|
|
.logo-badge {
|
|
width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#3ddc97,#38bdf8);
|
|
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#0b0f14;
|
|
}
|
|
.logo b { font-size:16px; letter-spacing:.5px; }
|
|
.logo small { display:block; color:var(--muted); font-size:11px; font-weight:400; }
|
|
.nav-item {
|
|
display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
|
|
color:var(--muted); cursor:pointer; border:1px solid transparent; font-size:13.5px;
|
|
}
|
|
.nav-item:hover { background:rgba(61,220,151,.07); color:var(--fg); }
|
|
.nav-item.active { background:rgba(61,220,151,.12); color:var(--accent); border-color:rgba(61,220,151,.25); font-weight:600; }
|
|
.nav-item .ico { width:18px; text-align:center; }
|
|
.side-foot { margin-top:auto; padding:12px 8px 4px; border-top:1px solid var(--border); color:var(--muted); font-size:11.5px; }
|
|
.side-foot .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px; }
|
|
/* ---------- Main ---------- */
|
|
.main { flex:1; padding:22px 28px 40px; max-width:1200px; }
|
|
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
|
|
.topbar h1 { font-size:20px; font-weight:700; }
|
|
.topbar .sub { color:var(--muted); font-size:12.5px; margin-top:2px; }
|
|
.top-actions { display:flex; align-items:center; gap:10px; }
|
|
.badge {
|
|
font-size:11.5px; padding:4px 10px; border-radius:99px; border:1px solid var(--border);
|
|
color:var(--muted); background:var(--panel); font-family:ui-monospace,Consolas,monospace;
|
|
}
|
|
.badge.live { color:var(--ok); border-color:rgba(52,211,153,.4); }
|
|
.badge.live::before { content:"● "; }
|
|
.btn {
|
|
background:var(--accent); color:#0b0f14; border:none; border-radius:8px; padding:7px 14px;
|
|
font-weight:700; font-size:13px; cursor:pointer;
|
|
}
|
|
.btn:hover { filter:brightness(1.1); }
|
|
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); font-weight:500; }
|
|
.btn.ghost:hover { color:var(--fg); border-color:var(--muted); }
|
|
/* ---------- KPI cards ---------- */
|
|
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
|
|
.kpi { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
|
|
.kpi .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
|
|
.kpi .value { font-size:28px; font-weight:800; margin-top:6px; }
|
|
.kpi .delta { font-size:11.5px; margin-top:4px; }
|
|
.kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--err); }
|
|
.kpi .emoji { float:right; font-size:20px; opacity:.9; }
|
|
/* ---------- Panels ---------- */
|
|
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
|
|
.panel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
|
|
.panel h3 { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:14px; }
|
|
/* bars */
|
|
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12.5px; }
|
|
.bar-row .name { width:110px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.bar-row .track { flex:1; height:14px; background:var(--panel2); border-radius:7px; overflow:hidden; }
|
|
.bar-row .fill { height:100%; border-radius:7px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
|
|
.bar-row .val { width:34px; text-align:right; color:var(--muted); font-family:ui-monospace,monospace; }
|
|
/* trend svg */
|
|
.trend-wrap { position:relative; }
|
|
.trend-axis { display:flex; justify-content:space-between; color:var(--muted); font-size:10.5px; margin-top:4px; font-family:ui-monospace,monospace; }
|
|
/* tables */
|
|
table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
|
th { text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:7px 10px; border-bottom:1px solid var(--border); }
|
|
td { padding:8px 10px; border-bottom:1px solid rgba(29,39,51,.5); }
|
|
tbody tr:hover { background:rgba(61,220,151,.05); }
|
|
.pill { font-size:10.5px; padding:2px 8px; border-radius:99px; font-weight:600; }
|
|
.pill.ok { background:rgba(52,211,153,.14); color:var(--ok); }
|
|
.pill.run { background:rgba(56,189,248,.14); color:var(--accent2); }
|
|
.pill.fail { background:rgba(248,113,113,.14); color:var(--err); }
|
|
.pill.mut { background:rgba(167,139,250,.14); color:var(--purple); }
|
|
.mono { font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:var(--muted); }
|
|
.search { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--fg); padding:8px 12px; font-size:12.5px; margin-bottom:10px; }
|
|
.search:focus { outline:none; border-color:var(--accent); }
|
|
/* timeline */
|
|
.tl { list-style:none; }
|
|
.tl li { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid rgba(29,39,51,.5); align-items:baseline; }
|
|
.tl .dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
|
|
.tl .t { color:var(--fg); } .tl .a { color:var(--accent); font-weight:600; }
|
|
.tl .m { color:var(--muted); font-size:11.5px; margin-left:auto; white-space:nowrap; font-family:ui-monospace,monospace; }
|
|
.empty-note { color:var(--muted); font-size:12px; text-align:center; padding:18px 0; }
|
|
.panel.hidden, .view { display:none; } .view.active { display:block; }
|
|
@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr);} .grid2{grid-template-columns:1fr;} .side{width:64px;} .side .lbl,.logo small,.side-foot span{display:none;} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout">
|
|
<aside class="side">
|
|
<div class="logo">
|
|
<div class="logo-badge">am</div>
|
|
<div><b>agent-manager</b><small>cockpit des agents</small></div>
|
|
</div>
|
|
<div class="nav-item active" data-view="overview"><span class="ico">▦</span><span class="lbl">Vue d'ensemble</span></div>
|
|
<div class="nav-item" data-view="stats"><span class="ico">📊</span><span class="lbl">Statistiques</span></div>
|
|
<div class="nav-item" data-view="sessions"><span class="ico">⏱</span><span class="lbl">Sessions</span></div>
|
|
<div class="nav-item" data-view="events"><span class="ico">📜</span><span class="lbl">Événements</span></div>
|
|
<div class="nav-item" data-view="projects"><span class="ico">🗂</span><span class="lbl">Projets</span></div>
|
|
<div class="side-foot">
|
|
<span><span class="dot"></span>v0.6.0 · lang FR ·<br>127.0.0.1:7878</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<div class="topbar">
|
|
<div>
|
|
<h1 id="view-title">Vue d'ensemble</h1>
|
|
<div class="sub" id="last-update">Dernière mise à jour : il y a 5 s</div>
|
|
</div>
|
|
<div class="top-actions">
|
|
<span class="badge live">serveur local</span>
|
|
<span class="badge">127.0.0.1:7878</span>
|
|
<button class="btn ghost" onclick="fakeRefresh()">↻ Actualiser</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== OVERVIEW ===== -->
|
|
<section class="view active" id="overview">
|
|
<div class="kpis">
|
|
<div class="kpi"><span class="emoji">🤖</span><div class="label">Agents installés</div><div class="value">9</div><div class="delta up">▲ +1 cette semaine</div></div>
|
|
<div class="kpi"><span class="emoji">⚡</span><div class="label">En cours</div><div class="value">2</div><div class="delta up">● claude-code · codex</div></div>
|
|
<div class="kpi"><span class="emoji">⏱</span><div class="label">Sessions (7 j)</div><div class="value">47</div><div class="delta up">▲ +12 % vs semaine préc.</div></div>
|
|
<div class="kpi"><span class="emoji">📜</span><div class="label">Événements (24 h)</div><div class="value">132</div><div class="delta down">▼ 8 % vs hier</div></div>
|
|
</div>
|
|
<div class="grid2">
|
|
<div class="panel">
|
|
<h3>Top agents — sessions (7 j)</h3>
|
|
<div class="bar-row"><span class="name">claude-code</span><div class="track"><div class="fill" style="width:100%"></div></div><span class="val">18</span></div>
|
|
<div class="bar-row"><span class="name">aider</span><div class="track"><div class="fill" style="width:50%"></div></div><span class="val">9</span></div>
|
|
<div class="bar-row"><span class="name">codex</span><div class="track"><div class="fill" style="width:44%"></div></div><span class="val">8</span></div>
|
|
<div class="bar-row"><span class="name">gemini-cli</span><div class="track"><div class="fill" style="width:28%"></div></div><span class="val">5</span></div>
|
|
<div class="bar-row"><span class="name">jcode</span><div class="track"><div class="fill" style="width:22%"></div></div><span class="val">4</span></div>
|
|
<div class="bar-row"><span class="name">opencode</span><div class="track"><div class="fill" style="width:17%"></div></div><span class="val">3</span></div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Activité — sessions par jour (14 j)</h3>
|
|
<div class="trend-wrap">
|
|
<svg viewBox="0 0 480 150" width="100%" height="150">
|
|
<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3ddc97" stop-opacity=".35"/><stop offset="1" stop-color="#3ddc97" 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(#g)"/>
|
|
<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="#3ddc97" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="480" cy="34" r="4" fill="#38bdf8"/>
|
|
</svg>
|
|
<div class="trend-axis"><span>04 août</span><span>11 août</span><span>aujourd'hui</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid2">
|
|
<div class="panel">
|
|
<h3>Activité récente</h3>
|
|
<ul class="tl">
|
|
<li><span class="dot" style="background:var(--ok)"></span><span class="t"><span class="a">claude-code</span> terminé — session 3 h 12 min</span><span class="m">il y a 2 min</span></li>
|
|
<li><span class="dot" style="background:var(--accent2)"></span><span class="t"><span class="a">codex</span> démarré — projet flowdeck</span><span class="m">il y a 14 min</span></li>
|
|
<li><span class="dot" style="background:var(--purple)"></span><span class="t"><span class="a">jcode</span> mis à jour 0.76.0 → 0.78.1</span><span class="m">il y a 1 h</span></li>
|
|
<li><span class="dot" style="background:var(--err)"></span><span class="t"><span class="a">aider</span> échec — exit code 1</span><span class="m">il y a 3 h</span></li>
|
|
<li><span class="dot" style="background:var(--ok)"></span><span class="t"><span class="a">gemini-cli</span> terminé — session 42 min</span><span class="m">il y a 5 h</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Sessions en cours</h3>
|
|
<table>
|
|
<thead><tr><th>Agent</th><th>Projet</th><th>Durée</th><th>Démarrée</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>claude-code</td><td>agent-manager</td><td class="mono">3 h 12 min</td><td class="mono">14:26</td></tr>
|
|
<tr><td>codex</td><td>flowdeck</td><td class="mono">14 min</td><td class="mono">17:18</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="empty-note" id="running-empty" style="display:none">Aucune session en cours</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== STATS ===== -->
|
|
<section class="view" id="stats">
|
|
<div class="panel">
|
|
<h3>Statistiques par agent — période 30 j</h3>
|
|
<table>
|
|
<thead><tr><th>Agent</th><th>Sessions</th><th>Durée totale</th><th>Taux de succès</th><th>Coût estimé</th><th>Dernière activité</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>claude-code</td><td>54</td><td class="mono">38 h 12 m</td><td><span class="pill ok">94 %</span></td><td class="mono">12,40 €</td><td class="mono">il y a 2 min</td></tr>
|
|
<tr><td>aider</td><td>31</td><td class="mono">21 h 48 m</td><td><span class="pill ok">87 %</span></td><td class="mono">4,10 €</td><td class="mono">il y a 3 h</td></tr>
|
|
<tr><td>codex</td><td>27</td><td class="mono">19 h 05 m</td><td><span class="pill ok">89 %</span></td><td class="mono">8,75 €</td><td class="mono">il y a 14 min</td></tr>
|
|
<tr><td>gemini-cli</td><td>14</td><td class="mono">6 h 33 m</td><td><span class="pill ok">79 %</span></td><td class="mono">0 € (local)</td><td class="mono">il y a 5 h</td></tr>
|
|
<tr><td>jcode</td><td>12</td><td class="mono">5 h 02 m</td><td><span class="pill run">67 %</span></td><td class="mono">1,20 €</td><td class="mono">hier</td></tr>
|
|
<tr><td>opencode</td><td>9</td><td class="mono">4 h 40 m</td><td><span class="pill fail">55 %</span></td><td class="mono">0,90 €</td><td class="mono">il y a 2 j</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SESSIONS ===== -->
|
|
<section class="view" id="sessions">
|
|
<div class="panel">
|
|
<h3>Sessions — 7 derniers jours</h3>
|
|
<input class="search" id="sess-search" placeholder="Filtrer par agent, projet ou id…" oninput="filterSessions(this.value)">
|
|
<table>
|
|
<thead><tr><th>Session</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="mono">20260818_172631_b4e2f1</td><td>claude-code</td><td>agent-manager</td><td><span class="pill run">en cours</span></td><td class="mono">3 h 12 min</td><td class="mono">—</td></tr>
|
|
<tr><td class="mono">20260818_171812_c9d0a4</td><td>codex</td><td>flowdeck</td><td><span class="pill run">en cours</span></td><td class="mono">14 min</td><td class="mono">—</td></tr>
|
|
<tr><td class="mono">20260818_153402_a1b2c3</td><td>claude-code</td><td>agent-manager</td><td><span class="pill ok">terminée</span></td><td class="mono">1 h 05 min</td><td class="mono">16:40</td></tr>
|
|
<tr><td class="mono">20260818_142118_d4e5f6</td><td>aider</td><td>obsigate</td><td><span class="pill fail">échec</span></td><td class="mono">12 min</td><td class="mono">14:33</td></tr>
|
|
<tr><td class="mono">20260818_113047_e7f8a9</td><td>gemini-cli</td><td>imago</td><td><span class="pill ok">terminée</span></td><td class="mono">42 min</td><td class="mono">12:12</td></tr>
|
|
<tr><td class="mono">20260817_220933_b0c1d2</td><td>claude-code</td><td>agent-manager</td><td><span class="pill ok">terminée</span></td><td class="mono">2 h 47 min</td><td class="mono">23:50</td></tr>
|
|
<tr><td class="mono">20260817_183011_e2f3a4</td><td>jcode</td><td>agent-manager</td><td><span class="pill ok">terminée</span></td><td class="mono">1 h 22 min</td><td class="mono">19:35</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="empty-note" id="sess-empty" style="display:none">Aucune session ne correspond au filtre</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== EVENTS ===== -->
|
|
<section class="view" id="events">
|
|
<div class="panel">
|
|
<h3>Journal d'événements — aujourd'hui</h3>
|
|
<ul class="tl">
|
|
<li><span class="dot" style="background:var(--accent2)"></span><span class="t"><span class="a">start</span> codex — projet flowdeck</span><span class="m">17:18</span></li>
|
|
<li><span class="dot" style="background:var(--ok)"></span><span class="t"><span class="a">stop</span> claude-code — session 1 h 05 min</span><span class="m">16:40</span></li>
|
|
<li><span class="dot" style="background:var(--accent2)"></span><span class="t"><span class="a">start</span> claude-code — projet agent-manager</span><span class="m">15:34</span></li>
|
|
<li><span class="dot" style="background:var(--err)"></span><span class="t"><span class="a">run</span> aider — exit code 1 (fichier manquant)</span><span class="m">14:33</span></li>
|
|
<li><span class="dot" style="background:var(--purple)"></span><span class="t"><span class="a">update</span> jcode 0.76.0 → 0.78.1</span><span class="m">13:05</span></li>
|
|
<li><span class="dot" style="background:var(--ok)"></span><span class="t"><span class="a">stop</span> gemini-cli — session 42 min</span><span class="m">12:12</span></li>
|
|
<li><span class="dot" style="background:var(--accent2)"></span><span class="t"><span class="a">start</span> gemini-cli — projet imago</span><span class="m">11:30</span></li>
|
|
<li><span class="dot" style="background:var(--purple)"></span><span class="t"><span class="a">install</span> opencode 0.14.2 — méthode binary</span><span class="m">10:02</span></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== PROJECTS ===== -->
|
|
<section class="view" id="projects">
|
|
<div class="kpis" style="grid-template-columns:repeat(3,1fr)">
|
|
<div class="kpi"><div class="label">Projets suivis</div><div class="value">4</div><div class="delta up">▲ 1 nouveau cette semaine</div></div>
|
|
<div class="kpi"><div class="label">Sessions (7 j)</div><div class="value">47</div><div class="delta up">▲ +12 %</div></div>
|
|
<div class="kpi"><div class="label">Temps total</div><div class="value">96 h</div><div class="delta up">▲ +8 h vs semaine préc.</div></div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Projets</h3>
|
|
<table>
|
|
<thead><tr><th>Projet</th><th>Agents</th><th>Sessions (7 j)</th><th>Temps</th><th>Dernière activité</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><b>agent-manager</b> <span class="mono">· Rust</span></td><td>claude-code · jcode · codex</td><td>24</td><td class="mono">41 h</td><td class="mono">il y a 2 min</td></tr>
|
|
<tr><td><b>flowdeck</b> <span class="mono">· Python</span></td><td>codex · aider</td><td>11</td><td class="mono">19 h</td><td class="mono">il y a 14 min</td></tr>
|
|
<tr><td><b>obsigate</b> <span class="mono">· Python</span></td><td>aider · gemini-cli</td><td>8</td><td class="mono">22 h</td><td class="mono">il y a 3 h</td></tr>
|
|
<tr><td><b>imago</b> <span class="mono">· Python</span></td><td>gemini-cli</td><td>4</td><td class="mono">14 h</td><td class="mono">il y a 5 h</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
const titles = { overview:"Vue d'ensemble", stats:"Statistiques", sessions:"Sessions", events:"Événements", projects:"Projets" };
|
|
document.querySelectorAll('.nav-item').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
|
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
|
el.classList.add('active');
|
|
const v = el.dataset.view;
|
|
document.getElementById(v).classList.add('active');
|
|
document.getElementById('view-title').textContent = titles[v];
|
|
});
|
|
});
|
|
function fakeRefresh(){
|
|
const t = new Date();
|
|
document.getElementById('last-update').textContent = 'Dernière mise à jour : ' + t.toLocaleTimeString('fr-FR');
|
|
}
|
|
function filterSessions(q){
|
|
q = q.toLowerCase();
|
|
let shown = 0;
|
|
document.querySelectorAll('#sess-body tr').forEach(tr => {
|
|
const ok = tr.textContent.toLowerCase().includes(q);
|
|
tr.style.display = ok ? '' : 'none';
|
|
if (ok) shown++;
|
|
});
|
|
document.getElementById('sess-empty').style.display = shown ? 'none' : 'block';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|