feat: add Services and Logs modules (systemctl + journalctl via SSH)

Backend:
- modules/services: list, status, start/stop/restart systemctl services
  with pct exec support for LXC targets
- modules/logs: journalctl unit listing + WebSocket live streaming
  (direct SSH connection, journalctl -f, graceful teardown on WS close)
- migrations/003: seed services and logs modules in DB
- main.go: register services.New() and logs.New() in module loader

Frontend:
- services.html: target selector, search/filter, services table with
  active state indicators and start/stop/restart buttons
- logs.html: target + unit selectors, live follow toggle, scrollable
  terminal output with 3000-line cap
- app.js: servicePage() and logsPage() Alpine components + navItems
- locales: services and logs i18n keys (fr + en)
- pages.css: services table, state dots, logs output styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/internal/db/migrations/003_modules_extra.sql

@@ -0,0 +1,4 @@
+-- Migration 003 : Ajout des modules logs et services
+INSERT OR IGNORE INTO modules (id, name, description, version, is_core, is_enabled) VALUES
+    ('logs',     'Journaux',  'Consultation des journaux système via journalctl',    '1.0.0', 0, 1),
+    ('services', 'Services',  'Gestion des services systemd (start/stop/restart)',  '1.0.0', 0, 1);

backend/main.go

@@ -17,6 +17,8 @@ import (
 	sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
 	"git.geronzi.fr/proxmoxPanel/core/backend/internal/websocket"
 	"git.geronzi.fr/proxmoxPanel/core/backend/modules"
+	"git.geronzi.fr/proxmoxPanel/core/backend/modules/logs"
+	"git.geronzi.fr/proxmoxPanel/core/backend/modules/services"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
@@ -68,8 +70,8 @@ func main() {
 
 	// ── Chargement des modules actifs ──────────────────────────────────────
 	loader := modules.NewLoader(database.DB)
-	// Les modules sont enregistrés ici (compilés dans le binaire)
+	loader.RegisterModule(services.New(database, sshPool, encryptor))
-	// loader.RegisterModule(dashboard.New(...))  ← à décommenter quand implémentés
+	loader.RegisterModule(logs.New(database, sshPool, encryptor))
 	if err := loader.LoadActive(); err != nil {
 		log.Fatalf("Erreur chargement modules : %v", err)
 	}

backend/modules/logs/logs.go

@@ -0,0 +1,206 @@
+// Module Logs — streaming de journalctl via WebSocket + SSH.
+// Expose : liste des unités journald, streaming WebSocket journalctl.
+package logs
+
+import (
+	"fmt"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/api"
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/crypto"
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/db"
+	sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
+	"git.geronzi.fr/proxmoxPanel/core/backend/modules"
+	gorillaws "github.com/gorilla/websocket"
+	gossh "golang.org/x/crypto/ssh"
+)
+
+// LogsModule gère la lecture des journaux systemd via SSH.
+type LogsModule struct {
+	db   *db.DB
+	pool *sshpool.Pool
+	enc  *crypto.Encryptor
+}
+
+// New crée un LogsModule avec les dépendances nécessaires.
+func New(database *db.DB, pool *sshpool.Pool, enc *crypto.Encryptor) *LogsModule {
+	return &LogsModule{db: database, pool: pool, enc: enc}
+}
+
+func (m *LogsModule) ID() string { return "logs" }
+
+// Register enregistre les routes du module dans le registry CORE.
+func (m *LogsModule) Register(r modules.Registry) error {
+	r.RegisterRoute("GET", "/api/logs/units", m.ListUnits, false)
+	r.RegisterRoute("GET", "/ws/logs",        m.StreamLogs, false)
+	return nil
+}
+
+// sshCreds récupère et déchiffre les credentials SSH depuis la configuration.
+func (m *LogsModule) sshCreds() (host, user, pass string, err error) {
+	host, _, _ = m.db.GetSetting("ssh_host")
+	user, _, _ = m.db.GetSetting("ssh_username")
+	encPass, _, _ := m.db.GetSetting("ssh_password")
+	if encPass != "" {
+		pass, err = m.enc.Decrypt(encPass)
+		if err != nil {
+			return "", "", "", fmt.Errorf("impossible de déchiffrer le mot de passe SSH")
+		}
+	}
+	if host == "" || user == "" || pass == "" {
+		return "", "", "", fmt.Errorf("SSH non configuré")
+	}
+	return host, user, pass, nil
+}
+
+// buildJournalCmd construit la commande journalctl, en la wrappant via pct exec pour les LXC.
+func buildJournalCmd(target, journalArgs string) string {
+	if strings.HasPrefix(target, "lxc:") {
+		vmid := strings.TrimPrefix(target, "lxc:")
+		if _, err := strconv.Atoi(vmid); err == nil {
+			return fmt.Sprintf("pct exec %s -- journalctl %s", vmid, journalArgs)
+		}
+	}
+	return "journalctl " + journalArgs
+}
+
+// sanitizeUnit valide un nom d'unité systemd pour éviter l'injection de commandes.
+func sanitizeUnit(unit string) string {
+	for _, c := range unit {
+		ok := (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') ||
+			(c >= '0' && c <= '9') || c == '-' || c == '.' || c == '_' || c == '@' || c == ':'
+		if !ok {
+			return ""
+		}
+	}
+	return unit
+}
+
+// ListUnits retourne la liste des unités systemd présentes dans les journaux.
+// GET /api/logs/units?target=host|lxc:ID
+func (m *LogsModule) ListUnits(w http.ResponseWriter, r *http.Request) {
+	sshHost, user, pass, err := m.sshCreds()
+	if err != nil {
+		api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+
+	target := r.URL.Query().Get("target")
+	if target == "" {
+		target = "host"
+	}
+
+	cmd := buildJournalCmd(target, "--field=_SYSTEMD_UNIT --no-pager 2>/dev/null | sort -u | head -300")
+	out, _ := m.pool.RunCommand(sshHost, user, pass, cmd)
+
+	units := []string{}
+	for _, line := range strings.Split(out, "\n") {
+		line = strings.TrimSpace(line)
+		if line != "" {
+			units = append(units, line)
+		}
+	}
+	api.JSONResponse(w, http.StatusOK, units)
+}
+
+// wsUpgrader est l'upgrader WebSocket pour le module logs.
+var wsUpgrader = gorillaws.Upgrader{
+	CheckOrigin: func(r *http.Request) bool { return true },
+}
+
+// StreamLogs ouvre un WebSocket et stream journalctl en temps réel via SSH.
+// GET /ws/logs?target=host|lxc:ID&unit=sshd.service&lines=100
+func (m *LogsModule) StreamLogs(w http.ResponseWriter, r *http.Request) {
+	sshHost, user, pass, err := m.sshCreds()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+
+	conn, err := wsUpgrader.Upgrade(w, r, nil)
+	if err != nil {
+		return
+	}
+	defer conn.Close()
+
+	target := r.URL.Query().Get("target")
+	if target == "" {
+		target = "host"
+	}
+
+	unit := r.URL.Query().Get("unit")
+	linesStr := r.URL.Query().Get("lines")
+	lines := 100
+	if n, err2 := strconv.Atoi(linesStr); err2 == nil && n > 0 && n <= 2000 {
+		lines = n
+	}
+
+	// Construction des arguments journalctl
+	args := fmt.Sprintf("-f --no-pager -n %d", lines)
+	if safe := sanitizeUnit(unit); safe != "" {
+		args += " -u " + safe
+	}
+	cmd := buildJournalCmd(target, args)
+
+	// Connexion SSH directe (hors pool — session longue durée avec journalctl -f)
+	sshConfig := &gossh.ClientConfig{
+		User:            user,
+		Auth:            []gossh.AuthMethod{gossh.Password(pass)},
+		Timeout:         15 * time.Second,
+		HostKeyCallback: gossh.InsecureIgnoreHostKey(),
+	}
+	client, err := gossh.Dial("tcp", sshHost, sshConfig)
+	if err != nil {
+		conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur SSH : "+err.Error()))
+		return
+	}
+	defer client.Close()
+
+	session, err := client.NewSession()
+	if err != nil {
+		conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur session SSH : "+err.Error()))
+		return
+	}
+	defer session.Close()
+
+	stdout, err := session.StdoutPipe()
+	if err != nil {
+		return
+	}
+	if err := session.Start(cmd); err != nil {
+		conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur commande : "+err.Error()))
+		return
+	}
+
+	// Goroutine : SSH stdout → WebSocket
+	done := make(chan struct{})
+	go func() {
+		defer close(done)
+		buf := make([]byte, 4096)
+		for {
+			n, err := stdout.Read(buf)
+			if n > 0 {
+				conn.WriteMessage(gorillaws.TextMessage, buf[:n])
+			}
+			if err != nil {
+				break
+			}
+		}
+	}()
+
+	// Boucle principale : attendre fermeture WebSocket (ou message de contrôle)
+	for {
+		_, _, err := conn.ReadMessage()
+		if err != nil {
+			break
+		}
+	}
+
+	// Fermer la session SSH → interrompt journalctl -f
+	session.Close()
+	client.Close()
+	<-done
+}

backend/modules/services/services.go

@@ -0,0 +1,198 @@
+// Module Services — gestion des services systemd via SSH.
+// Expose : liste des services, statut détaillé, start/stop/restart (admin).
+package services
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strconv"
+	"strings"
+
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/api"
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/crypto"
+	"git.geronzi.fr/proxmoxPanel/core/backend/internal/db"
+	sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
+	"git.geronzi.fr/proxmoxPanel/core/backend/modules"
+	"github.com/go-chi/chi/v5"
+)
+
+// ServicesModule gère les opérations systemctl sur le host et les LXC.
+type ServicesModule struct {
+	db   *db.DB
+	pool *sshpool.Pool
+	enc  *crypto.Encryptor
+}
+
+// New crée un ServicesModule avec les dépendances nécessaires.
+func New(database *db.DB, pool *sshpool.Pool, enc *crypto.Encryptor) *ServicesModule {
+	return &ServicesModule{db: database, pool: pool, enc: enc}
+}
+
+func (m *ServicesModule) ID() string { return "services" }
+
+// Register enregistre les routes du module dans le registry CORE.
+func (m *ServicesModule) Register(r modules.Registry) error {
+	r.RegisterRoute("GET",  "/api/services",                m.ListServices,   false)
+	r.RegisterRoute("GET",  "/api/services/{name}/status",  m.ServiceStatus,  false)
+	r.RegisterRoute("POST", "/api/services/{name}/{action}", m.ServiceAction, true)
+	return nil
+}
+
+// sshCreds récupère et déchiffre les credentials SSH depuis la configuration.
+func (m *ServicesModule) sshCreds() (host, user, pass string, err error) {
+	host, _, _ = m.db.GetSetting("ssh_host")
+	user, _, _ = m.db.GetSetting("ssh_username")
+	encPass, _, _ := m.db.GetSetting("ssh_password")
+	if encPass != "" {
+		pass, err = m.enc.Decrypt(encPass)
+		if err != nil {
+			return "", "", "", fmt.Errorf("impossible de déchiffrer le mot de passe SSH")
+		}
+	}
+	if host == "" || user == "" || pass == "" {
+		return "", "", "", fmt.Errorf("SSH non configuré")
+	}
+	return host, user, pass, nil
+}
+
+// buildCmd construit la commande systemctl, en la wrappant via pct exec pour les LXC.
+func buildCmd(target, systemctlArgs string) string {
+	if strings.HasPrefix(target, "lxc:") {
+		vmid := strings.TrimPrefix(target, "lxc:")
+		if _, err := strconv.Atoi(vmid); err == nil {
+			return fmt.Sprintf("pct exec %s -- systemctl %s", vmid, systemctlArgs)
+		}
+	}
+	return "systemctl " + systemctlArgs
+}
+
+// ServiceEntry représente un service systemd dans la liste.
+type ServiceEntry struct {
+	Name        string `json:"name"`
+	LoadState   string `json:"load_state"`
+	ActiveState string `json:"active_state"`
+	SubState    string `json:"sub_state"`
+	Description string `json:"description"`
+}
+
+// ListServices retourne la liste des services systemd d'une cible.
+// GET /api/services?target=host|lxc:ID
+func (m *ServicesModule) ListServices(w http.ResponseWriter, r *http.Request) {
+	host, user, pass, err := m.sshCreds()
+	if err != nil {
+		api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+
+	target := r.URL.Query().Get("target")
+	if target == "" {
+		target = "host"
+	}
+
+	cmd := buildCmd(target, "list-units --type=service --all --no-legend --plain --no-pager 2>/dev/null")
+	out, err := m.pool.RunCommand(host, user, pass, cmd)
+	if err != nil {
+		api.JSONError(w, "Erreur commande SSH : "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	services := parseServiceList(out)
+	api.JSONResponse(w, http.StatusOK, services)
+}
+
+// parseServiceList parse la sortie de systemctl list-units.
+// Format : "nom.service   load   active   running   Description..."
+func parseServiceList(output string) []ServiceEntry {
+	var services []ServiceEntry
+	for _, line := range strings.Split(output, "\n") {
+		line = strings.TrimSpace(line)
+		if line == "" || strings.HasPrefix(line, "UNIT") || strings.HasPrefix(line, "Legend") ||
+			strings.HasPrefix(line, "To show") || strings.HasPrefix(line, "Pass") {
+			continue
+		}
+		// Certaines lignes commencent par "●" (service failed) — on supprime ce caractère
+		line = strings.TrimPrefix(line, "● ")
+		line = strings.TrimPrefix(line, "  ")
+
+		fields := strings.Fields(line)
+		if len(fields) < 4 {
+			continue
+		}
+		name := strings.TrimSuffix(fields[0], ".service")
+		desc := ""
+		if len(fields) >= 5 {
+			desc = strings.Join(fields[4:], " ")
+		}
+		services = append(services, ServiceEntry{
+			Name:        name,
+			LoadState:   fields[1],
+			ActiveState: fields[2],
+			SubState:    fields[3],
+			Description: desc,
+		})
+	}
+	return services
+}
+
+// ServiceStatus retourne le statut détaillé d'un service.
+// GET /api/services/{name}/status?target=host|lxc:ID
+func (m *ServicesModule) ServiceStatus(w http.ResponseWriter, r *http.Request) {
+	host, user, pass, err := m.sshCreds()
+	if err != nil {
+		api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+
+	name := chi.URLParam(r, "name")
+	target := r.URL.Query().Get("target")
+	if target == "" {
+		target = "host"
+	}
+
+	cmd := buildCmd(target, fmt.Sprintf("status %s --no-pager 2>&1", name))
+	out, _ := m.pool.RunCommand(host, user, pass, cmd)
+
+	api.JSONResponse(w, http.StatusOK, map[string]string{"output": out})
+}
+
+// ServiceAction exécute une action (start/stop/restart/reload) sur un service.
+// POST /api/services/{name}/{action}
+// Body: { "target": "host" | "lxc:ID" }
+func (m *ServicesModule) ServiceAction(w http.ResponseWriter, r *http.Request) {
+	host, user, pass, err := m.sshCreds()
+	if err != nil {
+		api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+
+	name   := chi.URLParam(r, "name")
+	action := chi.URLParam(r, "action")
+
+	// Valider l'action pour éviter l'injection de commandes
+	allowed := map[string]bool{"start": true, "stop": true, "restart": true, "reload": true, "enable": true, "disable": true}
+	if !allowed[action] {
+		api.JSONError(w, "Action invalide", http.StatusBadRequest)
+		return
+	}
+
+	var body struct {
+		Target string `json:"target"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil || body.Target == "" {
+		body.Target = "host"
+	}
+
+	cmd := buildCmd(body.Target, fmt.Sprintf("%s %s 2>&1", action, name))
+	out, err := m.pool.RunCommand(host, user, pass, cmd)
+
+	if err != nil {
+		api.JSONError(w, fmt.Sprintf("Erreur action %s sur %s : %v\n%s", action, name, err, out), http.StatusInternalServerError)
+		return
+	}
+
+	api.JSONResponse(w, http.StatusOK, map[string]string{
+		"message": fmt.Sprintf("Action « %s » exécutée sur %s", action, name),
+		"output":  out,
+	})
+}

frontend/css/pages.css

@@ -826,6 +826,131 @@
 .toast--info    { border-left-color: var(--neu-info);    }
 .toast--info    > i:first-child { color: var(--neu-info); }
 
+/* ── Page Services ───────────────────────────────────────────────────────────── */
+.services-toolbar {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+.services-target-sel { min-width: 12rem; }
+.services-search {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  flex: 1;
+  min-width: 10rem;
+  background: var(--neu-bg);
+  border: 1px solid var(--neu-border);
+  border-radius: var(--neu-radius);
+  padding: 0 .75rem;
+}
+.services-search i { color: var(--neu-text-muted); font-size: .9rem; flex-shrink: 0; }
+.services-search .neu-input {
+  border: none;
+  background: transparent;
+  padding: .45rem 0;
+  flex: 1;
+  box-shadow: none;
+  min-width: 0;
+}
+.services-table-wrap { padding: 0; overflow-x: auto; }
+.services-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .875rem;
+}
+.services-table thead tr {
+  border-bottom: 1px solid var(--neu-border);
+}
+.services-table th {
+  padding: .6rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--neu-text-muted);
+  white-space: nowrap;
+}
+.services-table td {
+  padding: .5rem 1rem;
+  border-bottom: 1px solid var(--neu-border);
+  vertical-align: middle;
+}
+.services-table tbody tr:last-child td { border-bottom: none; }
+.services-table tbody tr:hover { background: var(--neu-bg-raised); }
+
+.svc-state-dot {
+  display: inline-block;
+  width: .5rem;
+  height: .5rem;
+  border-radius: 50%;
+  margin-right: .4rem;
+  vertical-align: middle;
+}
+.state-active   .svc-state-dot { background: var(--neu-success); }
+.state-failed   .svc-state-dot { background: var(--neu-danger); }
+.state-inactive .svc-state-dot { background: var(--neu-text-muted); }
+.state-other    .svc-state-dot { background: var(--neu-warning); }
+
+.state-active   .svc-state-label { color: var(--neu-success); }
+.state-failed   .svc-state-label { color: var(--neu-danger); }
+.state-inactive .svc-state-label { color: var(--neu-text-muted); }
+
+.svc-name  { font-weight: 500; font-family: var(--neu-font-mono, monospace); white-space: nowrap; }
+.svc-sub   { color: var(--neu-text-muted); font-size: .8rem; white-space: nowrap; }
+.svc-desc  { color: var(--neu-text-muted); font-size: .8rem; max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.svc-actions { display: flex; gap: .35rem; white-space: nowrap; }
+
+/* ── Page Logs ───────────────────────────────────────────────────────────────── */
+.logs-toolbar {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+.logs-sel    { min-width: 10rem; }
+.logs-sel-sm { min-width: 5rem; width: 5rem; }
+
+.logs-status {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-size: .8rem;
+  color: var(--neu-success);
+  margin-bottom: .5rem;
+}
+.logs-status-dot {
+  width: .45rem;
+  height: .45rem;
+  border-radius: 50%;
+  background: var(--neu-success);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: .35; }
+}
+
+.logs-output-wrap { padding: 0; min-height: 22rem; display: flex; flex-direction: column; }
+.logs-output {
+  flex: 1;
+  padding: 1rem;
+  margin: 0;
+  font-family: var(--neu-font-mono, 'Courier New', monospace);
+  font-size: .78rem;
+  line-height: 1.5;
+  color: var(--neu-text);
+  overflow-y: auto;
+  max-height: 65vh;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.logs-empty {
+  padding: 2rem;
+  text-align: center;
+}
+
 /* ── Éditeur de raccourcis ───────────────────────────────────────────────────── */
 .shortcuts-editor { display: flex; flex-direction: column; gap: .5rem; }
 .shortcut-row {

frontend/js/app.js

@@ -328,6 +328,8 @@ document.addEventListener('alpine:init', () => {
       { id: 'proxmox',   iconClass: 'lnid-server-1',           iconColor: '#22c55e', labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
       { id: 'updates',   iconClass: 'lnid-arrow-upward',        iconColor: '#f59e0b', labelKey: 'nav.updates',   href: '/updates.html'   },
       { id: 'terminal',  iconClass: 'lnid-terminal',            iconColor: '#a78bfa', labelKey: 'nav.terminal',  href: '/terminal.html'  },
+      { id: 'services',  iconClass: 'lnid-gear-loading',        iconColor: '#fb923c', labelKey: 'nav.services',  href: '/services.html'  },
+      { id: 'logs',      iconClass: 'lnid-scroll-document-1',   iconColor: '#38bdf8', labelKey: 'nav.logs',      href: '/logs.html'      },
       { id: 'settings',  iconClass: 'lnid-gear-1',              iconColor: '#94a3b8', labelKey: 'nav.settings',  href: '/settings.html'  },
       { id: 'modules',   iconClass: 'lnid-puzzle',              iconColor: '#f472b6', labelKey: 'nav.modules',   href: '/modules.html'   },
     ],
@@ -1083,6 +1085,169 @@ document.addEventListener('alpine:init', () => {
     t(key) { return Alpine.store('i18n').t(key) },
   }))
 
+  // ── Composant: servicePage ──────────────────────────────────────────────
+  Alpine.data('servicePage', () => ({
+    services: [],
+    loading: false,
+    target: 'host',
+    targets: [{ value: 'host', label: 'Host Proxmox' }],
+    filter: '',
+    actioning: {},
+
+    get filtered() {
+      const q = this.filter.toLowerCase()
+      if (!q) return this.services
+      return this.services.filter(s =>
+        s.name.toLowerCase().includes(q) || (s.description || '').toLowerCase().includes(q)
+      )
+    },
+
+    async init() {
+      await this.loadTargets()
+      await this.load()
+    },
+
+    async loadTargets() {
+      try {
+        const res = await apiFetch('/api/proxmox/lxc')
+        if (res.ok) {
+          const lxc = await res.json() || []
+          this.targets = [
+            { value: 'host', label: 'Host Proxmox' },
+            ...lxc.map(c => ({ value: `lxc:${c.vmid}`, label: `LXC ${c.vmid} — ${c.name || 'CT'+c.vmid}` }))
+          ]
+        }
+      } catch(e) {}
+    },
+
+    async load() {
+      this.loading = true
+      try {
+        const res = await apiFetch(`/api/services?target=${this.target}`)
+        if (res.ok) this.services = await res.json() || []
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async action(name, act) {
+      this.actioning[name] = act
+      try {
+        const res = await apiFetch(`/api/services/${name}/${act}`, {
+          method: 'POST',
+          body: JSON.stringify({ target: this.target })
+        })
+        if (res.ok) {
+          Alpine.store('toasts').success(`${act} ${name}`)
+          await this.load()
+        } else {
+          const b = await res.json().catch(() => ({}))
+          Alpine.store('toasts').error(b.error || `Erreur ${act}`)
+        }
+      } catch(e) {
+        Alpine.store('toasts').error(e.message)
+      } finally {
+        this.actioning[name] = false
+      }
+    },
+
+    stateClass(svc) {
+      if (svc.active_state === 'active')   return 'state-active'
+      if (svc.active_state === 'failed')   return 'state-failed'
+      if (svc.active_state === 'inactive') return 'state-inactive'
+      return 'state-other'
+    },
+
+    t(key) { return Alpine.store('i18n').t(key) },
+  }))
+
+  // ── Composant: logsPage ─────────────────────────────────────────────────
+  Alpine.data('logsPage', () => ({
+    lines: [],
+    target: 'host',
+    targets: [{ value: 'host', label: 'Host Proxmox' }],
+    unit: '',
+    units: [],
+    linesCount: '100',
+    following: false,
+    ws: null,
+
+    async init() {
+      await this.loadTargets()
+      await this.loadUnits()
+    },
+
+    async loadTargets() {
+      try {
+        const res = await apiFetch('/api/proxmox/lxc')
+        if (res.ok) {
+          const lxc = await res.json() || []
+          this.targets = [
+            { value: 'host', label: 'Host Proxmox' },
+            ...lxc.map(c => ({ value: `lxc:${c.vmid}`, label: `LXC ${c.vmid} — ${c.name || 'CT'+c.vmid}` }))
+          ]
+        }
+      } catch(e) {}
+    },
+
+    async loadUnits() {
+      try {
+        const res = await apiFetch(`/api/logs/units?target=${this.target}`)
+        if (res.ok) this.units = await res.json() || []
+      } catch(e) {}
+    },
+
+    async onTargetChange() {
+      this.stopFollow()
+      this.unit = ''
+      await this.loadUnits()
+    },
+
+    toggleFollow() {
+      if (this.following) {
+        this.stopFollow()
+      } else {
+        this.startFollow()
+      }
+    },
+
+    startFollow() {
+      this.lines = []
+      const token = encodeURIComponent(localStorage.getItem('pxp_token') || '')
+      const proto = location.protocol === 'https:' ? 'wss' : 'ws'
+      const unit  = this.unit ? `&unit=${encodeURIComponent(this.unit)}` : ''
+      const url   = `${proto}://${location.host}/ws/logs?token=${token}&target=${this.target}&lines=${this.linesCount}${unit}`
+      this.ws = new WebSocket(url)
+      this.following = true
+
+      this.ws.onmessage = (e) => {
+        const incoming = e.data.split('\n').filter(l => l !== '')
+        this.lines.push(...incoming)
+        if (this.lines.length > 3000) this.lines = this.lines.slice(-3000)
+        this.$nextTick(() => {
+          const el = this.$refs.logOutput
+          if (el) el.scrollTop = el.scrollHeight
+        })
+      }
+      this.ws.onclose = () => { this.following = false; this.ws = null }
+      this.ws.onerror = () => { this.following = false; this.ws = null }
+    },
+
+    stopFollow() {
+      if (this.ws) {
+        this.ws.close()
+        this.ws = null
+      }
+      this.following = false
+    },
+
+    clearLog() {
+      this.lines = []
+    },
+
+    t(key) { return Alpine.store('i18n').t(key) },
+  }))
+
 }) // end alpine:init
 
 // ── DOMContentLoaded : init stores + Swup ─────────────────────────────────

frontend/locales/en.json

@@ -115,6 +115,34 @@
     "desc": "SFTP file browser",
     "moduleNotEnabled": "Module not enabled. Go to Settings → Modules to enable it."
   },
+  "services": {
+    "desc": "systemd service management",
+    "target": "Target",
+    "filter": "Filter by name or description…",
+    "noServices": "No services found",
+    "name": "Service",
+    "status": "Status",
+    "substate": "Sub-state",
+    "description": "Description",
+    "start": "Start",
+    "stop": "Stop",
+    "restart": "Restart",
+    "reload": "Reload",
+    "enable": "Enable",
+    "disable": "Disable"
+  },
+  "logs": {
+    "desc": "System journal viewer via journalctl",
+    "target": "Target",
+    "unit": "Unit",
+    "unitAll": "All units",
+    "lines": "Lines",
+    "follow": "Follow live",
+    "stopFollow": "Stop",
+    "clear": "Clear",
+    "noLogs": "No logs — click «Follow» to start",
+    "connecting": "Connecting…"
+  },
   "settings": {
     "general": "General",
     "infrastructure": "Infrastructure",

frontend/locales/fr.json

@@ -115,6 +115,34 @@
     "desc": "Navigateur de fichiers SFTP",
     "moduleNotEnabled": "Module non activé. Rendez-vous dans Paramètres → Modules pour l'activer."
   },
+  "services": {
+    "desc": "Gestion des services systemd",
+    "target": "Cible",
+    "filter": "Filtrer par nom ou description…",
+    "noServices": "Aucun service trouvé",
+    "name": "Service",
+    "status": "Statut",
+    "substate": "Sous-état",
+    "description": "Description",
+    "start": "Démarrer",
+    "stop": "Arrêter",
+    "restart": "Redémarrer",
+    "reload": "Recharger",
+    "enable": "Activer",
+    "disable": "Désactiver"
+  },
+  "logs": {
+    "desc": "Consultation des journaux système via journalctl",
+    "target": "Cible",
+    "unit": "Unité",
+    "unitAll": "Toutes les unités",
+    "lines": "Lignes",
+    "follow": "Suivre en temps réel",
+    "stopFollow": "Arrêter",
+    "clear": "Effacer",
+    "noLogs": "Aucun journal — cliquez sur « Suivre » pour démarrer",
+    "connecting": "Connexion en cours…"
+  },
   "settings": {
     "general": "Général",
     "infrastructure": "Infrastructure",

frontend/logs.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <script>(function(){document.documentElement.setAttribute("data-theme",localStorage.getItem("pxp_theme")||"dark");document.documentElement.setAttribute("data-sidebar",localStorage.getItem("pxp_sidebar_pos")||"left")})()</script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ProxmoxPanel — Journaux</title>
+  <link rel="stylesheet" href="/css/neu.css" />
+  <link rel="stylesheet" href="/css/dark.css" />
+  <link rel="stylesheet" href="/css/light.css" />
+  <link rel="stylesheet" href="/css/pages.css" />
+  <link rel="stylesheet" href="/css/lineicons-duotone.css" />
+  <link rel="manifest" href="/manifest.json" />
+  <script src="/js/vendors/htmx.min.js"></script>
+  <script src="/js/vendors/swup.iife.js"></script>
+  <script src="/js/app.js"></script>
+  <script src="/js/vendors/alpine.min.js" defer></script>
+</head>
+<body x-data x-init="$store.ui.init()">
+
+<aside class="sidebar" x-data="sidebar()" :class="{ collapsed: collapsed }" x-cloak>
+  <div class="sidebar-header" @click="toggle()">
+    <i class="sidebar-logo lnid-layout-1"></i>
+    <span class="sidebar-title" x-show="!collapsed">ProxmoxPanel</span>
+  </div>
+  <nav class="sidebar-nav">
+    <template x-for="item in navItems" :key="item.id">
+      <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
+        <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
+      </a>
+    </template>
+  </nav>
+  <div class="sidebar-footer">
+    <a class="sidebar-link" href="/profile.html" @click.prevent="navigate('/profile.html')">
+      <i class="sidebar-icon lnid-user-circle-1"></i>
+      <span class="sidebar-label" x-show="!collapsed" x-text="$store.auth.user?.username || t('nav.profile')"></span>
+    </a>
+  </div>
+</aside>
+
+<div class="main-layout">
+  <nav class="navbar" x-data="navbar()" x-cloak>
+    <h2 class="navbar-title" x-text="t('nav.logs')"></h2>
+    <div class="navbar-actions">
+      <button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
+        <i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
+      </button>
+      <button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
+        <i class="lnid-power-button"></i>
+      </button>
+    </div>
+  </nav>
+
+  <main id="swup" class="page-content transition-fade">
+    <div x-data="logsPage()" x-cloak>
+
+      <!-- Barre de contrôle -->
+      <div class="logs-toolbar">
+        <select class="neu-input logs-sel" x-model="target" @change="onTargetChange()">
+          <template x-for="tgt in targets" :key="tgt.value">
+            <option :value="tgt.value" x-text="tgt.label"></option>
+          </template>
+        </select>
+
+        <select class="neu-input logs-sel" x-model="unit">
+          <option value="" x-text="t('logs.unitAll')"></option>
+          <template x-for="u in units" :key="u">
+            <option :value="u" x-text="u"></option>
+          </template>
+        </select>
+
+        <select class="neu-input logs-sel-sm" x-model="linesCount">
+          <option value="50">50</option>
+          <option value="100">100</option>
+          <option value="200">200</option>
+          <option value="500">500</option>
+        </select>
+
+        <button class="neu-btn neu-btn--sm"
+                :class="following ? 'neu-btn--danger' : 'neu-btn--primary'"
+                @click="toggleFollow()">
+          <i :class="following ? 'lnid-stop' : 'lnid-play'"></i>
+          <span x-text="following ? t('logs.stopFollow') : t('logs.follow')"></span>
+        </button>
+
+        <button class="neu-btn neu-btn--sm" @click="clearLog()" :disabled="lines.length === 0">
+          <i class="lnid-trash-1"></i>
+          <span x-text="t('logs.clear')"></span>
+        </button>
+      </div>
+
+      <!-- Indicateur de connexion -->
+      <div class="logs-status" x-show="following">
+        <span class="logs-status-dot"></span>
+        <span x-text="t('logs.connecting')"></span>
+      </div>
+
+      <!-- Sortie des logs -->
+      <div class="neu-card logs-output-wrap">
+        <pre class="logs-output" x-ref="logOutput" x-show="lines.length > 0"><template x-for="(line, idx) in lines" :key="idx"><span x-text="line + '\n'"></span></template></pre>
+        <p class="empty-state logs-empty" x-show="lines.length === 0" x-text="t('logs.noLogs')"></p>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+</body>
+</html>

frontend/services.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <script>(function(){document.documentElement.setAttribute("data-theme",localStorage.getItem("pxp_theme")||"dark");document.documentElement.setAttribute("data-sidebar",localStorage.getItem("pxp_sidebar_pos")||"left")})()</script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ProxmoxPanel — Services</title>
+  <link rel="stylesheet" href="/css/neu.css" />
+  <link rel="stylesheet" href="/css/dark.css" />
+  <link rel="stylesheet" href="/css/light.css" />
+  <link rel="stylesheet" href="/css/pages.css" />
+  <link rel="stylesheet" href="/css/lineicons-duotone.css" />
+  <link rel="manifest" href="/manifest.json" />
+  <script src="/js/vendors/htmx.min.js"></script>
+  <script src="/js/vendors/swup.iife.js"></script>
+  <script src="/js/app.js"></script>
+  <script src="/js/vendors/alpine.min.js" defer></script>
+</head>
+<body x-data x-init="$store.ui.init()">
+
+<aside class="sidebar" x-data="sidebar()" :class="{ collapsed: collapsed }" x-cloak>
+  <div class="sidebar-header" @click="toggle()">
+    <i class="sidebar-logo lnid-layout-1"></i>
+    <span class="sidebar-title" x-show="!collapsed">ProxmoxPanel</span>
+  </div>
+  <nav class="sidebar-nav">
+    <template x-for="item in navItems" :key="item.id">
+      <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
+        <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
+      </a>
+    </template>
+  </nav>
+  <div class="sidebar-footer">
+    <a class="sidebar-link" href="/profile.html" @click.prevent="navigate('/profile.html')">
+      <i class="sidebar-icon lnid-user-circle-1"></i>
+      <span class="sidebar-label" x-show="!collapsed" x-text="$store.auth.user?.username || t('nav.profile')"></span>
+    </a>
+  </div>
+</aside>
+
+<div class="main-layout">
+  <nav class="navbar" x-data="navbar()" x-cloak>
+    <h2 class="navbar-title" x-text="t('nav.services')"></h2>
+    <div class="navbar-actions">
+      <button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
+        <i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
+      </button>
+      <button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
+        <i class="lnid-power-button"></i>
+      </button>
+    </div>
+  </nav>
+
+  <main id="swup" class="page-content transition-fade">
+    <div x-data="servicePage()" x-cloak>
+
+      <!-- Barre de contrôle -->
+      <div class="services-toolbar">
+        <select class="neu-input services-target-sel" x-model="target" @change="load()">
+          <template x-for="t in targets" :key="t.value">
+            <option :value="t.value" x-text="t.label"></option>
+          </template>
+        </select>
+
+        <div class="services-search">
+          <i class="lnid-search-1"></i>
+          <input class="neu-input" type="text" x-model="filter"
+                 :placeholder="t('services.filter')" />
+        </div>
+
+        <button class="neu-btn neu-btn--sm" @click="load()" :disabled="loading">
+          <i :class="loading ? 'spinner-sm' : 'lnid-refresh-circle-1-clockwise'"></i>
+          <span x-show="!collapsed" x-text="t('common.refresh')"></span>
+        </button>
+      </div>
+
+      <!-- Chargement -->
+      <div class="loading-state" x-show="loading && services.length === 0">
+        <div class="spinner-lg"></div>
+        <span>Chargement…</span>
+      </div>
+
+      <!-- Tableau des services -->
+      <div class="neu-card services-table-wrap" x-show="!loading || services.length > 0">
+        <table class="services-table">
+          <thead>
+            <tr>
+              <th x-text="t('services.status')"></th>
+              <th x-text="t('services.name')"></th>
+              <th x-text="t('services.substate')"></th>
+              <th x-text="t('services.description')"></th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="svc in filtered" :key="svc.name">
+              <tr>
+                <td>
+                  <span class="svc-state-dot" :class="stateClass(svc)"></span>
+                  <span class="svc-state-label" x-text="svc.active_state"></span>
+                </td>
+                <td class="svc-name" x-text="svc.name"></td>
+                <td class="svc-sub" x-text="svc.sub_state"></td>
+                <td class="svc-desc" x-text="svc.description"></td>
+                <td class="svc-actions">
+                  <button class="neu-btn neu-btn--sm neu-btn--success neu-btn--icon-sm"
+                          @click="action(svc.name, 'start')"
+                          :disabled="actioning[svc.name] || svc.active_state === 'active'"
+                          :title="t('services.start')">
+                    <span x-show="actioning[svc.name] === 'start'" class="spinner-sm"></span>
+                    <i x-show="actioning[svc.name] !== 'start'" class="lnid-play"></i>
+                  </button>
+                  <button class="neu-btn neu-btn--sm neu-btn--danger neu-btn--icon-sm"
+                          @click="action(svc.name, 'stop')"
+                          :disabled="actioning[svc.name] || svc.active_state !== 'active'"
+                          :title="t('services.stop')">
+                    <span x-show="actioning[svc.name] === 'stop'" class="spinner-sm"></span>
+                    <i x-show="actioning[svc.name] !== 'stop'" class="lnid-stop"></i>
+                  </button>
+                  <button class="neu-btn neu-btn--sm neu-btn--icon-sm"
+                          @click="action(svc.name, 'restart')"
+                          :disabled="actioning[svc.name]"
+                          :title="t('services.restart')">
+                    <span x-show="actioning[svc.name] === 'restart'" class="spinner-sm"></span>
+                    <i x-show="actioning[svc.name] !== 'restart'" class="lnid-refresh-circle-1-clockwise"></i>
+                  </button>
+                </td>
+              </tr>
+            </template>
+            <tr x-show="!loading && filtered.length === 0">
+              <td colspan="5" class="empty-state" style="text-align:center;padding:1.5rem"
+                  x-text="t('services.noServices')"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+</body>
+</html>