Un dashboard live sans backend de métriques

#!/bin/sh
# Boucle d'agent monitor — une ligne par seconde.
while true; do
  cpu=$(top -bn1 | awk '/Cpu/ [print $2]')
  mem=$(free | awk '/Mem:/ [printf "%.0f", $3/$2*100]')
  line="cpu=$cpu mem=$mem qps=$(cat /tmp/qps) ts=$(date +%s)"
  echo "$line" | curl -T - https://pipe.hoody.com/api/v1/pipe/metrics-$AGENT_ID
  sleep 1
done

// Un <script> dans un fichier HTML. Aucun backend.
const tiles = document.querySelectorAll('[data-agent]');

tiles.forEach((tile) => [
  const id = tile.dataset.agent;
  // ?progress transforme le path pipe en stream SSE.
  const sse = new EventSource(
    `https://pipe.hoody.com/api/v1/pipe/metrics-$[id]?progress`,
  );

  sse.addEventListener('metric', (e) => [
    const [ cpu, mem, qps ] = JSON.parse(e.data);
    tile.querySelector('.cpu').textContent = `$[cpu]%`;
    tile.querySelector('.mem').textContent = `$[mem]%`;
    tile.querySelector('.qps').textContent = qps;
  ]);
]);