From b6d9f3a549afbe2ad4c2a577f893686c7237475f Mon Sep 17 00:00:00 2001
From: perco <perco@percoNAS.home>
Date: Fri, 6 Mar 2026 22:27:52 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20PercoHub=20v1=20=E2=80=94=20dashboard?=
 =?UTF-8?q?=20centralis=C3=A9=20homelab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md        |  95 +++++++++++++
 api.php          | 184 +++++++++++++++++++++++++
 assets/app.js    | 258 +++++++++++++++++++++++++++++++++++
 assets/style.css | 157 +++++++++++++++++++++
 index.php        |  85 ++++++++++++
 services.json    | 349 +++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 1128 insertions(+)
 create mode 100644 README.md
 create mode 100644 api.php
 create mode 100644 assets/app.js
 create mode 100644 assets/style.css
 create mode 100644 index.php
 create mode 100644 services.json

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..682e867
--- /dev/null
+++ b/README.md
@@ -0,0 +1,95 @@
+# PercoHub 🏠
+
+Dashboard centralisé pour accéder à tous les services et projets du homelab de Perco.
+
+## Stack
+
+- **Backend** : PHP 8 (lecture `services.json`, check Docker + HTTP)
+- **Frontend** : Tailwind CSS CDN + Vanilla JS
+- **Données** : `services.json` — catalogue éditable manuellement
+
+## Démarrage
+
+```bash
+nohup php -S 0.0.0.0:9300 -t /home/perco/projects/percohub/ > /tmp/percohub-php.log 2>&1 &
+```
+
+**URL locale** : http://192.168.1.29:9300
+
+## Fonctionnalités
+
+- ✅ Vue centralisée de tous les services (Docker + projets PHP)
+- ✅ Status live (Docker inspect + HTTP ping)
+- ✅ Catégories : Projets Luca / Infrastructure / Média / Domotique / Productivité / VPN Firefox
+- ✅ Filtre par catégorie (navbar)
+- ✅ Stats globales (online/offline)
+- ✅ Auto-refresh toutes les 30s
+- ✅ Clic sur une carte → ouvre l'URL dans un nouvel onglet
+- ✅ Dark theme cohérent avec les autres projets
+
+## Structure
+
+```
+percohub/
+├── index.php       # Page principale (shell HTML)
+├── api.php         # Backend : statuts Docker + HTTP
+├── services.json   # Catalogue des services (à éditer)
+├── assets/
+│   ├── style.css   # Dark theme custom
+│   └── app.js      # Frontend : rendu, refresh, filtres
+└── README.md
+```
+
+## Ajouter un service
+
+Éditer `services.json` — ajouter un objet dans le tableau `services` de la bonne catégorie :
+
+```json
+{
+  "name": "Mon Service",
+  "desc": "Description courte",
+  "url": "http://192.168.1.29:PORT",
+  "docker": "nom-du-container",
+  "tags": ["tag1", "tag2"]
+}
+```
+
+- `url` : null si pas d'interface web
+- `docker` : null si ce n'est pas un container Docker (ex: serveur PHP)
+- Si `docker` est renseigné → status via `docker inspect`
+- Si seulement `url` → status via HTTP ping
+
+## Ajouter une catégorie
+
+Dans `services.json`, ajouter dans le tableau `categories` :
+
+```json
+{
+  "id": "ma-categorie",
+  "name": "Ma Catégorie",
+  "icon": "🔌",
+  "color": "violet",
+  "services": [...]
+}
+```
+
+**Couleurs disponibles** : violet, slate, amber, emerald, sky, orange, rose
+
+## API
+
+| Endpoint | Description |
+|----------|-------------|
+| `/api.php?action=all` | Tous les services avec statuts |
+| `/api.php?action=config` | Catalogue brut (sans checks) |
+| `/api.php?action=docker` | Liste tous les containers Docker |
+
+## Catégories actuelles
+
+| Catégorie | Services |
+|-----------|----------|
+| 🛠️ Projets Luca | AgentStats, CronViz, MonStatut, AgentChat, HomeStatus |
+| 🔧 Infrastructure | Portainer, Traefik, Grafana, InfluxDB, Dashdot, Watchtower |
+| 🎬 Média | Plex, Jellyseerr, Sonarr, Radarr, Lidarr, Prowlarr, Jackett, qBittorrent, Pinchflat, Tautulli |
+| 🏠 Domotique | Home Assistant, ESPhome, Syncthing, Grott, Bresser Live, Mosquitto |
+| 💼 Productivité | Nextcloud, Gitea, VSCode, Planka, Actual Budget, CronMaster, Homarr |
+| 🦊 VPN Firefox | retak, coucouze, roxxor, xouz, nale |
diff --git a/api.php b/api.php
new file mode 100644
index 0000000..88c9fcc
--- /dev/null
+++ b/api.php
@@ -0,0 +1,184 @@
+<?php
+/**
+ * PercoHub API
+ * Retourne le catalogue des services avec leur statut en temps réel.
+ * - Docker containers : via `docker inspect`
+ * - Services HTTP (projets PHP) : via curl ping
+ */
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+$action = $_GET['action'] ?? 'all';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function dockerStatus(string $name): array {
+    $raw = shell_exec("docker inspect --format '{{.State.Status}}|{{if .State.Health}}{{.State.Health.Status}}{{end}}' " . escapeshellarg($name) . " 2>/dev/null");
+    if (empty($raw)) return ['status' => 'absent', 'health' => null];
+
+    $parts = explode('|', trim($raw));
+    $status = $parts[0] ?? 'unknown';
+    $health = ($parts[1] ?? '') ?: null;
+    if ($health === '') $health = null;
+
+    return ['status' => $status, 'health' => $health];
+}
+
+function httpPing(string $url, int $timeout = 3): array {
+    $ch = curl_init($url);
+    curl_setopt_array($ch, [
+        CURLOPT_RETURNTRANSFER => true,
+        CURLOPT_NOBODY         => true,
+        CURLOPT_TIMEOUT        => $timeout,
+        CURLOPT_CONNECTTIMEOUT => $timeout,
+        CURLOPT_FOLLOWLOCATION => true,
+        CURLOPT_SSL_VERIFYPEER => false,
+        CURLOPT_SSL_VERIFYHOST => false,
+        CURLOPT_USERAGENT      => 'PercoHub/1.0',
+    ]);
+    curl_exec($ch);
+    $code = (int) curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    $time = (int) (curl_getinfo($ch, CURLINFO_TOTAL_TIME) * 1000);
+    curl_close($ch);
+
+    $ok = $code >= 200 && $code < 400;
+    return ['http_code' => $code, 'ok' => $ok, 'ms' => $time];
+}
+
+function resolveServiceStatus(array $service): array {
+    $dockerName = $service['docker'] ?? null;
+    $url        = $service['url']    ?? null;
+
+    // Self-check: ce service est le dashboard lui-même → toujours online
+    if (!empty($service['self'])) {
+        return ['online' => true, 'status_text' => 'online', 'docker' => null, 'http' => null];
+    }
+
+    $result = [
+        'online'      => false,
+        'status_text' => 'inconnu',
+        'docker'      => null,
+        'http'        => null,
+    ];
+
+    // 1. Docker check
+    if ($dockerName) {
+        $d = dockerStatus($dockerName);
+        $result['docker'] = $d;
+
+        if ($d['status'] === 'running') {
+            $result['online']      = true;
+            $result['status_text'] = $d['health'] === 'healthy' ? 'healthy' : 'running';
+        } elseif ($d['status'] === 'absent') {
+            $result['status_text'] = 'absent';
+        } else {
+            $result['status_text'] = $d['status']; // exited, paused, restarting...
+        }
+    }
+
+    // 2. HTTP check (for PHP projects without docker, or in addition)
+    if ($url && !$dockerName) {
+        $h = httpPing($url);
+        $result['http']        = $h;
+        $result['online']      = $h['ok'];
+        $result['status_text'] = $h['ok'] ? 'online' : ($h['http_code'] > 0 ? "http {$h['http_code']}" : 'offline');
+    }
+
+    return $result;
+}
+
+// ─── Routes ───────────────────────────────────────────────────────────────────
+
+$configFile = __DIR__ . '/services.json';
+if (!file_exists($configFile)) {
+    echo json_encode(['error' => 'services.json introuvable'], JSON_UNESCAPED_UNICODE);
+    exit;
+}
+
+$config = json_decode(file_get_contents($configFile), true);
+if (!$config) {
+    echo json_encode(['error' => 'services.json invalide'], JSON_UNESCAPED_UNICODE);
+    exit;
+}
+
+if ($action === 'status') {
+    // Statut d'un seul service
+    $catId  = $_GET['cat']     ?? null;
+    $svcIdx = (int)($_GET['idx'] ?? -1);
+
+    $found = null;
+    foreach ($config['categories'] as $cat) {
+        if ($cat['id'] === $catId && isset($cat['services'][$svcIdx])) {
+            $found = $cat['services'][$svcIdx];
+            break;
+        }
+    }
+
+    if (!$found) {
+        echo json_encode(['error' => 'service introuvable'], JSON_UNESCAPED_UNICODE);
+        exit;
+    }
+
+    echo json_encode(resolveServiceStatus($found), JSON_UNESCAPED_UNICODE);
+    exit;
+}
+
+if ($action === 'all') {
+    // Tous les services avec leur statut
+    $output = ['categories' => [], 'generated_at' => date('c'), 'total' => 0, 'online' => 0];
+
+    foreach ($config['categories'] as $cat) {
+        $catOut = [
+            'id'       => $cat['id'],
+            'name'     => $cat['name'],
+            'icon'     => $cat['icon'],
+            'color'    => $cat['color'],
+            'services' => [],
+        ];
+
+        foreach ($cat['services'] as $svc) {
+            $statusInfo = resolveServiceStatus($svc);
+
+            $catOut['services'][] = array_merge($svc, [
+                'status' => $statusInfo,
+            ]);
+
+            $output['total']++;
+            if ($statusInfo['online']) $output['online']++;
+        }
+
+        $output['categories'][] = $catOut;
+    }
+
+    $output['offline'] = $output['total'] - $output['online'];
+
+    echo json_encode($output, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
+    exit;
+}
+
+if ($action === 'config') {
+    // Catalogue brut sans status checks
+    echo json_encode($config, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
+    exit;
+}
+
+if ($action === 'docker') {
+    // Liste tous les containers Docker
+    $raw = shell_exec("docker ps -a --format '{{.Names}}|{{.Image}}|{{.Status}}|{{.Ports}}' 2>/dev/null");
+    $containers = [];
+    foreach (explode("\n", trim($raw)) as $line) {
+        if (empty($line)) continue;
+        $parts = explode('|', $line);
+        $containers[] = [
+            'name'   => $parts[0] ?? '',
+            'image'  => $parts[1] ?? '',
+            'status' => $parts[2] ?? '',
+            'ports'  => $parts[3] ?? '',
+        ];
+    }
+    echo json_encode(['containers' => $containers, 'count' => count($containers)], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
+    exit;
+}
+
+echo json_encode(['error' => 'action invalide. Utilisez: all, status, config, docker'], JSON_UNESCAPED_UNICODE);
diff --git a/assets/app.js b/assets/app.js
new file mode 100644
index 0000000..4c824ee
--- /dev/null
+++ b/assets/app.js
@@ -0,0 +1,258 @@
+/**
+ * PercoHub — Frontend JS
+ * Charge les services depuis api.php, rend les catégories/cards, auto-refresh.
+ */
+
+// ── Config ─────────────────────────────────────────────────────────────────
+
+const REFRESH_INTERVAL = 30; // secondes
+const API_BASE = '/api.php';
+
+// ── State ──────────────────────────────────────────────────────────────────
+
+let refreshTimer = null;
+let countdown = REFRESH_INTERVAL;
+let activeFilter = 'all';
+let lastData = null;
+
+// ── Init ───────────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadAll();
+  startCountdown();
+});
+
+// ── Load ───────────────────────────────────────────────────────────────────
+
+async function loadAll(forceShow = false) {
+  if (forceShow) {
+    showLoader();
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}?action=all`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    lastData = data;
+
+    renderDashboard(data);
+    renderGlobalStats(data);
+    renderFilterBar(data);
+    hideLoader();
+    resetCountdown();
+
+  } catch (err) {
+    showError(err.message);
+  }
+}
+
+// ── Render ─────────────────────────────────────────────────────────────────
+
+function renderDashboard(data) {
+  const dash = document.getElementById('dashboard');
+  dash.innerHTML = '';
+
+  data.categories.forEach(cat => {
+    if (activeFilter !== 'all' && cat.id !== activeFilter) return;
+
+    const section = document.createElement('section');
+    section.dataset.cat = cat.id;
+
+    // Header
+    const onlineCount = cat.services.filter(s => s.status?.online).length;
+    section.innerHTML = `
+      <div class="section-header">
+        <span class="text-xl">${cat.icon}</span>
+        <span class="section-title">${cat.name}</span>
+        <span class="section-count">${cat.services.length} services</span>
+        <span class="text-xs text-gray-600 ml-auto">${onlineCount}/${cat.services.length} en ligne</span>
+      </div>
+      <div class="services-grid" id="grid-${cat.id}"></div>
+    `;
+
+    dash.appendChild(section);
+
+    const grid = section.querySelector(`#grid-${cat.id}`);
+    cat.services.forEach(svc => {
+      grid.appendChild(buildCard(svc, cat.color));
+    });
+  });
+
+  dash.classList.remove('hidden');
+}
+
+function buildCard(svc, catColor) {
+  const status = svc.status || {};
+  const isOnline = status.online;
+  const statusText = status.status_text || 'inconnu';
+  const hasUrl = !!svc.url;
+  const hasNote = !!svc.note;
+
+  // Status dot class
+  let dotClass = 'loading';
+  let badgeClass = 'badge-gray';
+  let badgeText = statusText;
+
+  if (statusText === 'running' || statusText === 'online') {
+    dotClass = 'online'; badgeClass = 'badge-green'; badgeText = 'running';
+  } else if (statusText === 'healthy') {
+    dotClass = 'online'; badgeClass = 'badge-green'; badgeText = 'healthy';
+  } else if (statusText === 'offline' || statusText === 'absent' || statusText === 'exited') {
+    dotClass = 'offline'; badgeClass = 'badge-red';
+  } else if (statusText === 'restarting') {
+    dotClass = 'warn'; badgeClass = 'badge-yellow';
+  } else if (statusText === 'inconnu') {
+    dotClass = 'loading'; badgeClass = 'badge-gray';
+  }
+
+  // Response time badge
+  let timeBadge = '';
+  if (status.http?.ms && status.http.ms > 0) {
+    timeBadge = `<span class="badge badge-blue">${status.http.ms}ms</span>`;
+  }
+
+  // Docker badge
+  let dockerBadge = '';
+  if (svc.docker) {
+    dockerBadge = `<span class="badge badge-gray" title="Container: ${svc.docker}">🐳</span>`;
+  }
+
+  // Note
+  let noteBadge = hasNote ? `<span class="note-tag" title="${svc.note}">${svc.note}</span>` : '';
+
+  // Tags
+  const tagsHtml = (svc.tags || []).map(t =>
+    `<span class="text-xs text-gray-600 mr-1">#${t}</span>`
+  ).join('');
+
+  const card = document.createElement('div');
+  card.className = `service-card cat-${catColor} ${hasUrl ? 'has-link' : ''}`;
+
+  if (hasUrl) {
+    card.setAttribute('onclick', `openService('${svc.url}', '${svc.name}')`);
+    card.setAttribute('title', `Ouvrir ${svc.name}`);
+  }
+
+  card.innerHTML = `
+    <div class="flex items-start justify-between gap-2 mb-2">
+      <div class="flex items-center gap-2 min-w-0">
+        <span class="status-dot ${dotClass}" title="${statusText}"></span>
+        <span class="font-semibold text-sm text-white truncate">${svc.name}</span>
+      </div>
+      <div class="flex items-center gap-1.5 flex-shrink-0">
+        ${dockerBadge}
+        <span class="badge ${badgeClass}">${badgeText}</span>
+        ${timeBadge}
+      </div>
+    </div>
+    <p class="text-xs text-gray-500 mb-2 leading-relaxed">${svc.desc}</p>
+    <div class="flex items-center justify-between gap-2 flex-wrap">
+      <div class="flex flex-wrap gap-1">${tagsHtml}</div>
+      ${noteBadge}
+      ${hasUrl ? `<span class="text-xs text-gray-700 truncate max-w-[140px]" title="${svc.url}">${formatUrl(svc.url)}</span>` : ''}
+    </div>
+  `;
+
+  return card;
+}
+
+// ── Global stats ───────────────────────────────────────────────────────────
+
+function renderGlobalStats(data) {
+  const el = document.getElementById('global-stats');
+  const total = data.total || 0;
+  const online = data.online || 0;
+  const offline = total - online;
+
+  el.innerHTML = `
+    <span class="stat-pill border-emerald-800 text-emerald-400 bg-emerald-900/20">
+      <span class="status-dot online"></span> ${online}
+    </span>
+    <span class="stat-pill border-red-800 text-red-400 bg-red-900/20">
+      <span class="status-dot offline"></span> ${offline}
+    </span>
+    <span class="stat-pill border-[#30363d] text-gray-500">
+      ${total} services
+    </span>
+  `;
+}
+
+// ── Filter bar ─────────────────────────────────────────────────────────────
+
+function renderFilterBar(data) {
+  const bar = document.getElementById('filter-bar');
+  bar.innerHTML = `
+    <button class="filter-btn ${activeFilter === 'all' ? 'active' : ''}" onclick="setFilter('all')">Tout</button>
+  `;
+
+  data.categories.forEach(cat => {
+    const btn = document.createElement('button');
+    btn.className = `filter-btn ${activeFilter === cat.id ? 'active' : ''}`;
+    btn.textContent = `${cat.icon} ${cat.name}`;
+    btn.onclick = () => setFilter(cat.id);
+    bar.appendChild(btn);
+  });
+}
+
+function setFilter(id) {
+  activeFilter = id;
+  if (lastData) {
+    renderDashboard(lastData);
+    renderFilterBar(lastData);
+  }
+}
+
+// ── Countdown & refresh ────────────────────────────────────────────────────
+
+function startCountdown() {
+  refreshTimer = setInterval(() => {
+    countdown--;
+    const el = document.getElementById('refresh-timer');
+    if (el) el.textContent = `↻ ${countdown}s`;
+
+    if (countdown <= 0) {
+      loadAll();
+    }
+  }, 1000);
+}
+
+function resetCountdown() {
+  countdown = REFRESH_INTERVAL;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function openService(url, name) {
+  window.open(url, '_blank', 'noopener');
+}
+
+function formatUrl(url) {
+  try {
+    const u = new URL(url);
+    return u.host + (u.port ? '' : '') + (u.pathname !== '/' ? u.pathname : '');
+  } catch {
+    return url;
+  }
+}
+
+function showLoader() {
+  document.getElementById('loader').classList.remove('hidden');
+  document.getElementById('dashboard').classList.add('hidden');
+  document.getElementById('error-panel').classList.add('hidden');
+}
+
+function hideLoader() {
+  document.getElementById('loader').classList.add('hidden');
+}
+
+function showError(msg) {
+  document.getElementById('loader').classList.add('hidden');
+  document.getElementById('error-panel').classList.remove('hidden');
+  document.getElementById('error-msg').textContent = msg;
+}
+
+function closeModal(e) {
+  if (e.target === document.getElementById('modal')) {
+    document.getElementById('modal').classList.add('hidden');
+  }
+}
diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..a64a23f
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,157 @@
+/* PercoHub — Custom styles (complément Tailwind) */
+
+/* ── Scrollbar ────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #0d1117; }
+::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #484f58; }
+
+/* ── Service card ─────────────────────────────────────────────────────────── */
+.service-card {
+  background: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+  position: relative;
+  overflow: hidden;
+  cursor: default;
+}
+.service-card.has-link {
+  cursor: pointer;
+}
+.service-card.has-link:hover {
+  border-color: #484f58;
+  box-shadow: 0 0 0 1px #484f58, 0 4px 16px rgba(0,0,0,0.4);
+  transform: translateY(-1px);
+}
+
+/* Left accent bar */
+.service-card::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 3px;
+  border-radius: 3px 0 0 3px;
+  background: var(--accent-color, #30363d);
+}
+
+/* ── Category accent colors ────────────────────────────────────────────────── */
+.cat-violet  { --accent-color: #8b5cf6; }
+.cat-slate   { --accent-color: #64748b; }
+.cat-amber   { --accent-color: #f59e0b; }
+.cat-emerald { --accent-color: #10b981; }
+.cat-sky     { --accent-color: #0ea5e9; }
+.cat-orange  { --accent-color: #f97316; }
+.cat-rose    { --accent-color: #f43f5e; }
+
+/* ── Status dot ───────────────────────────────────────────────────────────── */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.status-dot.online  { background: #10b981; box-shadow: 0 0 6px #10b981; }
+.status-dot.offline { background: #ef4444; }
+.status-dot.warn    { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
+.status-dot.loading { background: #4b5563; animation: pulse-dot 1.2s infinite; }
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+/* ── Status badge ─────────────────────────────────────────────────────────── */
+.badge {
+  font-size: 0.65rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 9999px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.badge-green  { background: #10b98120; color: #34d399; border: 1px solid #10b98140; }
+.badge-red    { background: #ef444420; color: #f87171; border: 1px solid #ef444440; }
+.badge-yellow { background: #f59e0b20; color: #fbbf24; border: 1px solid #f59e0b40; }
+.badge-gray   { background: #8b949e20; color: #8b949e; border: 1px solid #8b949e40; }
+.badge-blue   { background: #0ea5e920; color: #38bdf8; border: 1px solid #0ea5e940; }
+
+/* ── Section header ──────────────────────────────────────────────────────── */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #30363d;
+}
+.section-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #e6edf3;
+}
+.section-count {
+  font-size: 0.75rem;
+  color: #8b949e;
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 9999px;
+  padding: 0.1rem 0.55rem;
+}
+
+/* ── Global stats pills ───────────────────────────────────────────────────── */
+.stat-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: 9999px;
+  border: 1px solid;
+  font-weight: 500;
+}
+
+/* ── Filter button ────────────────────────────────────────────────────────── */
+.filter-btn {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  border: 1px solid #30363d;
+  background: transparent;
+  color: #8b949e;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.filter-btn:hover,
+.filter-btn.active {
+  border-color: #8b5cf6;
+  color: #c4b5fd;
+  background: #8b5cf620;
+}
+
+/* ── Note badge ───────────────────────────────────────────────────────────── */
+.note-tag {
+  font-size: 0.6rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: #21262d;
+  color: #8b949e;
+  border: 1px solid #30363d;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Responsive grid ──────────────────────────────────────────────────────── */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 0.85rem;
+}
+
+@media (max-width: 640px) {
+  .services-grid { grid-template-columns: 1fr; }
+}
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..efe3e60
--- /dev/null
+++ b/index.php
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PercoHub — Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/assets/style.css" />
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            base:  '#0d1117',
+            card:  '#161b22',
+            border:'#30363d',
+            muted: '#8b949e',
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="dark bg-[#0d1117] text-gray-100 min-h-screen font-mono">
+
+  <!-- ── Navbar ─────────────────────────────────────────────────────────────── -->
+  <nav class="sticky top-0 z-50 bg-[#161b22] border-b border-[#30363d] px-6 py-3 flex items-center justify-between">
+    <div class="flex items-center gap-3">
+      <span class="text-2xl">🏠</span>
+      <span class="text-lg font-bold text-white tracking-tight">PercoHub</span>
+      <span class="text-xs text-gray-500 ml-2 hidden sm:block">Dashboard centralisé</span>
+    </div>
+    <div class="flex items-center gap-4">
+      <!-- Filtres catégories -->
+      <div id="filter-bar" class="flex gap-2 flex-wrap justify-end hidden sm:flex"></div>
+
+      <!-- Stats globales -->
+      <div id="global-stats" class="flex items-center gap-3 text-sm">
+        <span class="text-gray-500">—</span>
+      </div>
+
+      <!-- Refresh -->
+      <div class="flex items-center gap-2">
+        <span id="refresh-timer" class="text-xs text-gray-600">—</span>
+        <button id="btn-refresh" onclick="loadAll(true)" title="Rafraîchir maintenant"
+          class="text-gray-400 hover:text-white transition text-sm border border-[#30363d] rounded px-2 py-1">
+          ↺
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- ── Main ───────────────────────────────────────────────────────────────── -->
+  <main class="max-w-[1600px] mx-auto px-4 py-6">
+
+    <!-- Loader -->
+    <div id="loader" class="flex flex-col items-center justify-center py-24 gap-4">
+      <div class="w-8 h-8 border-4 border-violet-500 border-t-transparent rounded-full animate-spin"></div>
+      <p class="text-gray-500 text-sm">Chargement des services…</p>
+    </div>
+
+    <!-- Error -->
+    <div id="error-panel" class="hidden bg-red-900/30 border border-red-700 rounded-lg p-6 text-center">
+      <p class="text-red-400 text-lg">⚠️ Impossible de contacter l'API</p>
+      <p id="error-msg" class="text-gray-500 text-sm mt-2"></p>
+    </div>
+
+    <!-- Dashboard content -->
+    <div id="dashboard" class="hidden space-y-10"></div>
+
+  </main>
+
+  <!-- ── Modal Docker détail ─────────────────────────────────────────────────── -->
+  <div id="modal" class="hidden fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4" onclick="closeModal(event)">
+    <div class="bg-[#161b22] border border-[#30363d] rounded-xl max-w-lg w-full p-6 relative">
+      <button onclick="document.getElementById('modal').classList.add('hidden')"
+        class="absolute top-4 right-4 text-gray-500 hover:text-white text-xl">✕</button>
+      <div id="modal-content"></div>
+    </div>
+  </div>
+
+  <script src="/assets/app.js"></script>
+</body>
+</html>
diff --git a/services.json b/services.json
new file mode 100644
index 0000000..4268a84
--- /dev/null
+++ b/services.json
@@ -0,0 +1,349 @@
+{
+  "categories": [
+    {
+      "id": "luca",
+      "name": "Projets Luca",
+      "icon": "🛠️",
+      "color": "violet",
+      "services": [
+        {
+          "name": "PercoHub",
+          "desc": "Ce dashboard centralisé",
+          "url": "http://192.168.1.29:9300",
+          "docker": null,
+          "self": true,
+          "tags": ["dashboard"]
+        },
+        {
+          "name": "AgentStats",
+          "desc": "Stats & coûts des agents IA",
+          "url": "http://192.168.1.29:9000",
+          "docker": null,
+          "tags": ["ia", "monitoring"]
+        },
+        {
+          "name": "CronViz",
+          "desc": "Visualisation des cron jobs OpenClaw",
+          "url": "http://192.168.1.29:9100",
+          "docker": null,
+          "tags": ["cron", "monitoring"]
+        },
+        {
+          "name": "MonStatut",
+          "desc": "Monitoring uptime services réseau",
+          "url": "http://192.168.1.29:9200",
+          "docker": null,
+          "tags": ["monitoring"]
+        },
+        {
+          "name": "AgentChat",
+          "desc": "Interface chat avec les agents IA",
+          "url": null,
+          "docker": null,
+          "tags": ["ia", "chat"],
+          "note": "Non démarré — port à définir"
+        },
+        {
+          "name": "HomeStatus",
+          "desc": "Stats système temps réel (CPU, RAM, disques)",
+          "url": null,
+          "docker": null,
+          "tags": ["monitoring", "system"],
+          "note": "Non démarré — port à définir"
+        }
+      ]
+    },
+    {
+      "id": "infra",
+      "name": "Infrastructure",
+      "icon": "🔧",
+      "color": "slate",
+      "services": [
+        {
+          "name": "Portainer",
+          "desc": "Gestion visuelle des conteneurs Docker",
+          "url": "https://portainer.nas.percolouco.com",
+          "docker": "portainer",
+          "tags": ["docker", "admin"]
+        },
+        {
+          "name": "Traefik",
+          "desc": "Reverse proxy — routing & certificats SSL",
+          "url": "http://192.168.1.29:8004",
+          "docker": "traefik",
+          "tags": ["proxy", "ssl"]
+        },
+        {
+          "name": "Grafana",
+          "desc": "Dashboards métriques & visualisation",
+          "url": "http://192.168.1.29:3010",
+          "docker": "grafana",
+          "tags": ["metrics", "monitoring"]
+        },
+        {
+          "name": "InfluxDB",
+          "desc": "Base de données time-series",
+          "url": "http://192.168.1.29:8086",
+          "docker": "influxdb",
+          "tags": ["database", "metrics"]
+        },
+        {
+          "name": "Dashdot",
+          "desc": "Dashboard système moderne (CPU, RAM, réseau)",
+          "url": "http://192.168.1.29:3001",
+          "docker": "dashboard-dash-1",
+          "tags": ["system", "monitoring"]
+        },
+        {
+          "name": "Watchtower",
+          "desc": "Mises à jour automatiques des conteneurs",
+          "url": null,
+          "docker": "watchtower",
+          "tags": ["docker", "updates"]
+        },
+        {
+          "name": "Gitea Runner",
+          "desc": "Runner CI/CD pour Gitea Actions",
+          "url": null,
+          "docker": "gitea-runner",
+          "tags": ["ci-cd"]
+        }
+      ]
+    },
+    {
+      "id": "media",
+      "name": "Média",
+      "icon": "🎬",
+      "color": "amber",
+      "services": [
+        {
+          "name": "Plex",
+          "desc": "Serveur multimédia — films, séries, musique",
+          "url": "http://192.168.1.29:32400/web",
+          "docker": "plex",
+          "tags": ["streaming", "media"]
+        },
+        {
+          "name": "Jellyseerr",
+          "desc": "Demandes de contenu média",
+          "url": "http://192.168.1.29:5055",
+          "docker": "jellyseerr",
+          "tags": ["media", "requests"]
+        },
+        {
+          "name": "Sonarr",
+          "desc": "Gestion automatique des séries TV",
+          "url": "http://192.168.1.29:8989",
+          "docker": "sonarr",
+          "tags": ["tv", "automation"]
+        },
+        {
+          "name": "Radarr",
+          "desc": "Gestion automatique des films",
+          "url": "http://192.168.1.29:7878",
+          "docker": "radarr",
+          "tags": ["movies", "automation"]
+        },
+        {
+          "name": "Lidarr",
+          "desc": "Gestion automatique de la musique",
+          "url": "http://192.168.1.29:8686",
+          "docker": "lidarr",
+          "tags": ["music", "automation"]
+        },
+        {
+          "name": "Prowlarr",
+          "desc": "Gestionnaire d'indexeurs",
+          "url": "http://192.168.1.29:9696",
+          "docker": "prowlarr",
+          "tags": ["indexer"]
+        },
+        {
+          "name": "Jackett",
+          "desc": "Proxy indexeurs torrents",
+          "url": "http://192.168.1.29:9117",
+          "docker": "jackett",
+          "tags": ["indexer", "torrent"]
+        },
+        {
+          "name": "qBittorrent",
+          "desc": "Client torrent (via VPN Gluetun)",
+          "url": "http://192.168.1.29:1234",
+          "docker": "qbittorrent",
+          "tags": ["torrent", "vpn"]
+        },
+        {
+          "name": "Pinchflat",
+          "desc": "Téléchargement automatique YouTube",
+          "url": "http://192.168.1.29:8945",
+          "docker": "pinchflat-pinchflat-1",
+          "tags": ["youtube", "download"]
+        },
+        {
+          "name": "Tautulli",
+          "desc": "Statistiques et monitoring Plex",
+          "url": "http://192.168.1.29:8181",
+          "docker": "tautulli",
+          "tags": ["plex", "stats"]
+        },
+        {
+          "name": "FlareSolverr",
+          "desc": "Bypass Cloudflare pour indexeurs",
+          "url": "http://192.168.1.29:8191",
+          "docker": "flaresolverr",
+          "tags": ["proxy"]
+        }
+      ]
+    },
+    {
+      "id": "domotique",
+      "name": "Domotique",
+      "icon": "🏠",
+      "color": "emerald",
+      "services": [
+        {
+          "name": "Home Assistant",
+          "desc": "Plateforme domotique centrale",
+          "url": "http://192.168.1.29:8123",
+          "docker": "homeassistant",
+          "tags": ["domotique", "automation"]
+        },
+        {
+          "name": "ESPhome",
+          "desc": "Firmware & gestion des devices ESP",
+          "url": null,
+          "docker": "esphome",
+          "tags": ["esp", "firmware"]
+        },
+        {
+          "name": "Syncthing",
+          "desc": "Synchronisation de fichiers P2P",
+          "url": "http://192.168.1.29:8384",
+          "docker": "syncthing",
+          "tags": ["sync", "files"]
+        },
+        {
+          "name": "Grott",
+          "desc": "Monitoring panneaux solaires Growatt",
+          "url": "http://192.168.1.29:5279",
+          "docker": "grott",
+          "tags": ["solar", "energy"]
+        },
+        {
+          "name": "Bresser Live",
+          "desc": "Station météo Bresser en temps réel",
+          "url": "http://192.168.1.29:8887",
+          "docker": "bresser-live",
+          "tags": ["weather", "sensors"]
+        },
+        {
+          "name": "Mosquitto",
+          "desc": "Broker MQTT",
+          "url": null,
+          "docker": "mosquitto",
+          "tags": ["mqtt", "iot"]
+        }
+      ]
+    },
+    {
+      "id": "productivite",
+      "name": "Productivité",
+      "icon": "💼",
+      "color": "sky",
+      "services": [
+        {
+          "name": "Nextcloud",
+          "desc": "Cloud personnel — fichiers, calendrier, contacts",
+          "url": "http://192.168.1.29:8080",
+          "docker": "nextcloud",
+          "tags": ["cloud", "files"]
+        },
+        {
+          "name": "Gitea",
+          "desc": "Hébergement Git self-hosted",
+          "url": "http://192.168.1.29:3500",
+          "docker": "gitea",
+          "tags": ["git", "dev"]
+        },
+        {
+          "name": "VSCode",
+          "desc": "Éditeur de code dans le navigateur",
+          "url": "http://192.168.1.29:8888",
+          "docker": "vscode",
+          "tags": ["dev", "editor"]
+        },
+        {
+          "name": "Planka",
+          "desc": "Gestion de projets Kanban",
+          "url": "https://planka.nas.percolouco.com",
+          "docker": "planka",
+          "tags": ["kanban", "projects"]
+        },
+        {
+          "name": "Actual Budget",
+          "desc": "Gestion budget personnel",
+          "url": "http://192.168.1.29:5006",
+          "docker": "actual-server",
+          "tags": ["finance", "budget"]
+        },
+        {
+          "name": "CronMaster",
+          "desc": "Gestionnaire de tâches cron",
+          "url": "http://192.168.1.29:40123",
+          "docker": "cronmaster",
+          "tags": ["cron", "scheduler"]
+        },
+        {
+          "name": "Homarr",
+          "desc": "Dashboard de démarrage alternatif",
+          "url": "http://192.168.1.29:7575",
+          "docker": "homarr",
+          "tags": ["dashboard"]
+        }
+      ]
+    },
+    {
+      "id": "vpn",
+      "name": "VPN Firefox",
+      "icon": "🦊",
+      "color": "orange",
+      "services": [
+        {
+          "name": "Firefox — retak",
+          "desc": "Instance Firefox via VPN Gluetun",
+          "url": "http://192.168.1.29:3000",
+          "docker": "vpn_mh_retak",
+          "tags": ["vpn", "browser"]
+        },
+        {
+          "name": "Firefox — coucouze",
+          "desc": "Instance Firefox via VPN Gluetun",
+          "url": "http://192.168.1.29:3100",
+          "docker": "vpn_mh_coucouze",
+          "tags": ["vpn", "browser"]
+        },
+        {
+          "name": "Firefox — roxxor",
+          "desc": "Instance Firefox via VPN Gluetun",
+          "url": "http://192.168.1.29:3200",
+          "docker": "vpn_mh_roxxor",
+          "tags": ["vpn", "browser"]
+        },
+        {
+          "name": "Firefox — xouz",
+          "desc": "Instance Firefox via VPN Gluetun",
+          "url": "http://192.168.1.29:3300",
+          "docker": "vpn_mh_xouz",
+          "tags": ["vpn", "browser"]
+        },
+        {
+          "name": "Firefox — nale",
+          "desc": "Instance Firefox via VPN Gluetun",
+          "url": "http://192.168.1.29:3400",
+          "docker": "vpn_mh_nale",
+          "tags": ["vpn", "browser"]
+        }
+      ]
+    }
+  ]
+}