refactor: architecture modules indépendants — nettoyage CORE, registry enrichi, page modules dynamique

- Supprimer les modules services et logs du CORE (déplacés dans viewServices et viewLogs)
- Enrichir modules/module.go : interface Registry avec NavItemDef, RunOnTarget, StreamOnTarget
- Réécrire modules/loader.go : NewLoader accepte *db.DB, *sshpool.Pool, *crypto.Encryptor
- Ajouter migration 005 : colonnes nav_* sur la table modules + suppression services/logs DB
- Mettre à jour db.go (repairSchema) pour ajout idempotent des colonnes nav_*
- Mettre à jour settings.go : GetModules retourne les champs nav, ajout GetRegistryModules et InstallRegistryModule
- Mettre à jour main.go : NewLoader avec les bons arguments, ajout routes /api/registry/modules
- Mettre à jour modules.html : section Store avec liste des modules Forgejo
- Mettre à jour app.js : sidebar dynamique (nav_href depuis DB), modulesPage avec store
- Mettre à jour pages.css : styles pour store de modules

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

frontend/css/pages.css

@@ -961,3 +961,26 @@
 }
 .shortcut-icon-sel { padding: .4rem .5rem; font-size: .85rem; }
 .shortcut-label, .shortcut-href { font-size: .85rem; }
+
+/* ── Store de modules ────────────────────────────────────────────────────────── */
+.section-desc { color: var(--neu-text-muted); font-size: .85rem; margin: -.25rem 0 .75rem; }
+.section-desc a { color: var(--neu-primary); text-decoration: none; }
+.section-desc a:hover { text-decoration: underline; }
+.module-version { font-size: .75rem; color: var(--neu-text-muted); margin-left: .5rem; }
+.module-repo-link { font-size: .75rem; color: var(--neu-text-muted); text-decoration: none; display: block; margin-top: .2rem; }
+.module-repo-link:hover { color: var(--neu-primary); }
+.installed-badge {
+  padding: .2rem .6rem;
+  border-radius: 1rem;
+  font-size: .75rem;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--neu-success) 15%, transparent);
+  color: var(--neu-success);
+}
+.rebuild-notice {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: 1rem;
+  font-size: .875rem;
+}

frontend/js/app.js

@@ -319,8 +319,7 @@ document.addEventListener('alpine:init', () => {
   })
 
   // ── Composant: sidebar ──────────────────────────────────────────────────
-  // Items CORE : toujours visibles.
-  // Items modules : visibles seulement si le module est activé en DB.
+  // Items CORE toujours visibles (sidebar hardcodée pour le CORE)
   const _coreNavItems = [
     { id: 'dashboard', iconClass: 'lnid-dashboard-square-1', iconColor: '#6c8ef4', labelKey: 'nav.dashboard', href: '/dashboard.html' },
     { id: 'proxmox',   iconClass: 'lnid-server-1',           iconColor: '#22c55e', labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
@@ -328,36 +327,38 @@ document.addEventListener('alpine:init', () => {
     { 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'   },
   ]
-  // Définition des items de navigation pour les modules optionnels.
-  // Un module dont l'id n'est pas ici n'aura pas d'entrée dans la sidebar.
-  const _moduleNavDef = {
-    terminal: { iconClass: 'lnid-terminal',         iconColor: '#a78bfa', labelKey: 'nav.terminal', href: '/terminal.html' },
-    files:    { iconClass: 'lnid-folder-1',         iconColor: '#84cc16', labelKey: 'nav.files',    href: '/files.html'    },
-    services: { iconClass: 'lnid-gear-2',           iconColor: '#fb923c', labelKey: 'nav.services', href: '/services.html' },
-    logs:     { iconClass: 'lnid-scroll-angular-1', iconColor: '#38bdf8', labelKey: 'nav.logs',     href: '/logs.html'     },
-  }
 
   Alpine.data('sidebar', () => ({
     get collapsed() { return Alpine.store('ui').sidebarCollapsed },
     get currentPage() { return Alpine.store('ui').currentPage },
 
-    // Commence avec les items CORE ; init() ajoute les modules activés
     navItems: [..._coreNavItems],
 
     async init() {
+      await this.refreshNav()
+    },
+
+    async refreshNav() {
       try {
         const res = await apiFetch('/api/modules')
         if (!res.ok) return
-        const modules = await res.json() || []
-        const moduleItems = modules
-          .filter(m => m.is_enabled && !m.is_core && _moduleNavDef[m.id])
-          .map(m => ({ id: m.id, ..._moduleNavDef[m.id] }))
-        // Insérer les modules entre Updates et Settings
-        const insertAt = this.navItems.findIndex(i => i.id === 'settings')
+        const allModules = await res.json() || []
+        // Modules optionnels activés avec nav_href défini
+        const moduleItems = allModules
+          .filter(m => !m.is_core && m.is_enabled && m.nav_href)
+          .map(m => ({
+            id: m.id,
+            iconClass: m.nav_icon || 'lnid-puzzle',
+            iconColor: m.nav_color || '#94a3b8',
+            labelKey: m.nav_label_key || `nav.${m.id}`,
+            href: m.nav_href,
+          }))
+        // Insérer entre Updates et Settings
+        const insertAt = _coreNavItems.findIndex(i => i.id === 'settings')
         this.navItems = [
-          ...this.navItems.slice(0, insertAt),
+          ..._coreNavItems.slice(0, insertAt),
           ...moduleItems,
-          ...this.navItems.slice(insertAt),
+          ..._coreNavItems.slice(insertAt),
         ]
       } catch(e) {}
     },
@@ -1077,31 +1078,50 @@ document.addEventListener('alpine:init', () => {
     modules: [],
     loading: true,
     toggling: {},
+    storeModules: [],
+    storeLoading: true,
+    installing: {},
+    rebuildRequired: false,
 
     async init() {
-      await this.load()
+      await Promise.all([this.load(), this.loadStore()])
     },
 
     async load() {
       this.loading = true
       try {
         const res = await apiFetch('/api/modules')
-        if (res.ok) {
-          this.modules = await res.json() || []
-        }
+        if (res.ok) this.modules = await res.json() || []
       } finally {
         this.loading = false
       }
     },
 
+    async loadStore() {
+      this.storeLoading = true
+      try {
+        const res = await apiFetch('/api/registry/modules')
+        if (res.ok) this.storeModules = await res.json() || []
+      } catch(e) {
+        this.storeModules = []
+      } finally {
+        this.storeLoading = false
+      }
+    },
+
     async toggle(mod) {
       this.toggling[mod.id] = true
       try {
-        // Backend: is_enabled (pas enabled)
         const action = mod.is_enabled ? 'disable' : 'enable'
         const res = await apiFetch(`/api/modules/${mod.id}/${action}`, { method: 'POST' })
         if (res.ok) {
           mod.is_enabled = !mod.is_enabled
+          // Rafraîchir la sidebar
+          const sb = document.querySelector('[x-data="sidebar()"]')
+          if (sb && sb._x_dataStack) {
+            const sidebarData = Alpine.$data(sb)
+            if (sidebarData && sidebarData.refreshNav) await sidebarData.refreshNav()
+          }
         }
       } catch(e) {
         console.error(e)
@@ -1110,171 +1130,31 @@ 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() {
+    async install(mod) {
+      this.installing[mod.id] = true
       try {
-        const res = await apiFetch('/api/proxmox/lxc')
+        const res = await apiFetch(`/api/registry/modules/${mod.id}/install`, { method: 'POST' })
         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}`)
+          mod.installed = true
+          this.rebuildRequired = true
+          Alpine.store('toasts').success(`Module ${mod.id} installé — rebuild requis`)
           await this.load()
         } else {
           const b = await res.json().catch(() => ({}))
-          Alpine.store('toasts').error(b.error || `Erreur ${act}`)
+          Alpine.store('toasts').error(b.error || 'Erreur installation')
         }
       } catch(e) {
         Alpine.store('toasts').error(e.message)
       } finally {
-        this.actioning[name] = false
+        this.installing[mod.id] = 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) },
-  }))
+  // Note: servicePage et logsPage ont été déplacés dans les modules
+  // indépendants viewServices et viewLogs.
 
 }) // end alpine:init
 

frontend/logs.html

@@ -1,110 +0,0 @@
-<!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/modules.html

@@ -55,9 +55,11 @@
   <main id="swup" class="page-content transition-fade">
     <div x-data="modulesPage()" x-cloak>
 
+      <!-- Modules installés -->
+      <h3 class="section-title"><i class="lnid-puzzle"></i> Modules installés</h3>
+
       <div class="loading-state" x-show="loading">
-        <div class="spinner-lg"></div>
-        <span>Chargement…</span>
+        <div class="spinner-lg"></div><span>Chargement…</span>
       </div>
 
       <div class="modules-grid" x-show="!loading">
@@ -65,29 +67,71 @@
           <div class="neu-card module-card" :class="{ disabled: !mod.is_enabled }">
             <div class="module-header">
               <div class="module-icon">
-                <i :class="mod.icon || 'lnid-puzzle'"></i>
+                <i :class="mod.nav_icon || 'lnid-puzzle'"></i>
               </div>
               <div class="module-info">
                 <span class="module-name" x-text="mod.name || mod.id"></span>
-                <span class="module-desc" x-text="mod.description || ''"></span>
+                <span class="module-version" x-text="mod.version"></span>
+                <span class="module-desc" x-text="mod.description"></span>
               </div>
               <div class="module-toggle">
                 <span class="core-badge" x-show="mod.is_core">CORE</span>
                 <button class="toggle-btn" :class="{ on: mod.is_enabled }"
                         @click="toggle(mod)" :disabled="mod.is_core || toggling[mod.id]"
                         x-show="!mod.is_core">
-                  <span class="toggle-track">
-                    <span class="toggle-thumb"></span>
-                  </span>
+                  <span class="toggle-track"><span class="toggle-thumb"></span></span>
                   <span class="toggle-label" x-text="mod.is_enabled ? 'Activé' : 'Désactivé'"></span>
                 </button>
               </div>
             </div>
           </div>
         </template>
-
-        <p class="empty-state" x-show="modules.length === 0">Aucun module trouvé</p>
+        <p class="empty-state" x-show="modules.length === 0">Aucun module installé</p>
       </div>
+
+      <!-- Store : modules disponibles -->
+      <h3 class="section-title" style="margin-top:2rem"><i class="lnid-download-2"></i> Store</h3>
+      <p class="section-desc">Modules disponibles depuis <a href="https://git.geronzi.fr/proxmoxPanel" target="_blank">git.geronzi.fr/proxmoxPanel</a></p>
+
+      <div class="loading-state" x-show="storeLoading">
+        <div class="spinner-lg"></div><span>Chargement du store…</span>
+      </div>
+
+      <div class="modules-grid" x-show="!storeLoading">
+        <template x-for="mod in storeModules" :key="mod.id">
+          <div class="neu-card module-card">
+            <div class="module-header">
+              <div class="module-icon"><i class="lnid-puzzle"></i></div>
+              <div class="module-info">
+                <span class="module-name" x-text="mod.id"></span>
+                <span class="module-desc" x-text="mod.description || '—'"></span>
+                <a class="module-repo-link" :href="mod.repo_url" target="_blank" x-text="mod.repo_url"></a>
+              </div>
+              <div class="module-toggle">
+                <span class="installed-badge" x-show="mod.installed">Installé</span>
+                <button class="neu-btn neu-btn--sm neu-btn--primary"
+                        x-show="!mod.installed"
+                        @click="install(mod)"
+                        :disabled="installing[mod.id]">
+                  <span x-show="installing[mod.id]" class="spinner-sm"></span>
+                  <i x-show="!installing[mod.id]" class="lnid-download-2"></i>
+                  Installer
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+        <p class="empty-state" x-show="!storeLoading && storeModules.length === 0">
+          Aucun module disponible dans le store
+        </p>
+      </div>
+
+      <!-- Message rebuild -->
+      <div class="neu-card rebuild-notice" x-show="rebuildRequired" style="margin-top:1rem;border-left:3px solid var(--neu-warning)">
+        <i class="lnid-warning-circle-1" style="color:var(--neu-warning)"></i>
+        <span>Un ou plusieurs modules ont été installés. <strong>Un rebuild du container est nécessaire pour les activer.</strong></span>
+      </div>
+
     </div>
   </main>
 </div>

frontend/services.html

@@ -1,144 +0,0 @@
-<!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>