feat: terminal SSH, inventaire synchronisation, token Gitea, pilotage-masse-salariale

- Ajout terminal SSH intégré (xterm.js + WebSocket + ssh2)
- Colonne Synchronisation dans l inventaire (recette vs prod)
- Compteurs statistiques déplacés en haut de l inventaire
- Authentification Gitea par token API (plus d auth basique)
- URL Gitea interne stable (http://gitea:3000)
- Ajout pilotage-masse-salariale dans config.js et inventaire
- Correction lien git.recette dans GiteaPage
- Mise à jour docker-compose.yml (GITEA_TOKEN, GITEA_RECETTE_URL stable)

src/frontend/src/App.jsx

@@ -8,6 +8,7 @@ import GiteaPage from './pages/GiteaPage';
 import DockerPage from './pages/DockerPage';
 import DocumentationPage from './pages/DocumentationPage';
 import InventairePage from './pages/InventairePage';
+import TerminalPage from './pages/TerminalPage';
 import Sidebar from './components/Sidebar';
 import useWebSocket from './hooks/useWebSocket';
 import { getMe, getApps, logout as apiLogout } from './utils/api';
@@ -111,6 +112,8 @@ export default function App() {
         return <DocumentationPage />;
       case 'inventaire':
         return <InventairePage />;
+      case 'terminal':
+        return <TerminalPage />;
       default:
         return <DashboardPage apps={apps} />;
     }

src/frontend/src/components/Sidebar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LayoutList,
+import { LayoutList, TerminalSquare,
   Server,
   LayoutDashboard,
   Box,
@@ -21,6 +21,7 @@ const navItems = [
   { id: 'monitoring', label: 'Monitoring', icon: Activity },
   { id: 'documentation', label: 'Documentation Infra', icon: BookOpen },
   { id: 'inventaire', label: 'Inventaire Apps', icon: LayoutList },
+  { id: 'terminal', label: 'Terminal SSH', icon: TerminalSquare },
 ];
 export default function Sidebar({
   currentPage,

src/frontend/src/pages/GiteaPage.jsx

@@ -77,12 +77,12 @@ export default function GiteaPage() {
           <p className="text-gray-400 mt-1">
             Explorez les dépôts sur{' '}
             <a
-              href="https://git.santinova-soft.org"
+              href="https://git.recette.santinova-soft.org"
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary-400 hover:text-primary-300"
             >
-              git.santinova-soft.org
+              git.recette.santinova-soft.org
             </a>
           </p>
         </div>

src/frontend/src/pages/InventairePage.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle } from 'lucide-react';
+import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle, ArrowUp, ArrowDown, Minus, AlertTriangle } from 'lucide-react';
 import api from '../utils/api';
 
 const APPS_CONFIG = [
@@ -59,6 +59,27 @@ const APPS_CONFIG = [
     urlRecette: 'https://formation.recette.santinova-soft.org',
     urlProd: 'https://formations.itinova.org',
   },
+  {
+    id: 'pilotage-masse-salariale',
+    name: 'Pilotage Masse Salariale',
+    repoName: 'pilotage-masse-salariale',
+    urlRecette: 'https://pilotage-ms.recette.santinova-soft.org',
+    urlProd: null,
+  },
+  {
+    id: 'itinova-budget-si',
+    name: 'Gestion Budget Informatique',
+    repoName: 'itinova-budget-si',
+    urlRecette: 'https://budget-si.recette.santinova-soft.org',
+    urlProd: null,
+  },
+  {
+    id: 'falc-generator',
+    name: 'FALC Generator',
+    repoName: 'falc-generator',
+    urlRecette: 'https://falc.recette.santinova-soft.org',
+    urlProd: 'https://falc.santinova-soft.org',
+  },
   {
     id: 'portail-santinova',
     name: 'Portail Applicatif',
@@ -75,6 +96,84 @@ const APPS_CONFIG = [
   },
 ];
 
+
+function SyncBadge({ versionRecette, versionProd }) {
+  // Extraire le SHA (7 premiers caractères avant l'espace)
+  const shaRec = versionRecette ? versionRecette.split(' ')[0] : null;
+  const shaProd = versionProd ? versionProd.split(' ')[0] : null;
+  // Extraire la date entre parenthèses pour comparer
+  const dateRec = versionRecette ? versionRecette.match(/\((.+?)\)/)?.[1] : null;
+  const dateProd = versionProd ? versionProd.match(/\((.+?)\)/)?.[1] : null;
+
+  if (!shaRec && !shaProd) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
+        <Minus className="w-3 h-3" />
+        N/A
+      </span>
+    );
+  }
+  if (!shaRec) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title="Uniquement en production">
+        <ArrowDown className="w-3 h-3" />
+        Prod en avance
+      </span>
+    );
+  }
+  if (!shaProd) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Uniquement en recette">
+        <ArrowUp className="w-3 h-3" />
+        Recette en avance
+      </span>
+    );
+  }
+  if (shaRec === shaProd) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-900/40 text-emerald-300 border border-emerald-700/40" title="Versions identiques">
+        <CheckCircle className="w-3 h-3" />
+        Synchronisé
+      </span>
+    );
+  }
+  // Comparer les dates pour savoir qui est en avance
+  // Format fr-FR : dd/mm/yyyy
+  const parseDate = (s) => {
+    if (!s) return null;
+    const parts = s.split('/');
+    if (parts.length === 3) return new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
+    return new Date(s);
+  };
+  const dRec = parseDate(dateRec);
+  const dProd = parseDate(dateProd);
+
+  if (dRec && dProd) {
+    if (dRec > dProd) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
+          <ArrowUp className="w-3 h-3" />
+          Recette en avance
+        </span>
+      );
+    } else if (dProd > dRec) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
+          <ArrowDown className="w-3 h-3" />
+          Prod en avance
+        </span>
+      );
+    }
+  }
+  // SHA différents mais dates non comparables
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-900/40 text-yellow-300 border border-yellow-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
+      <AlertTriangle className="w-3 h-3" />
+      Divergent
+    </span>
+  );
+}
+
 function VersionBadge({ version, loading }) {
   if (loading) {
     return (
@@ -190,6 +289,43 @@ export default function InventairePage() {
         </div>
       </div>
 
+      {/* Stats */}
+      {!loading && inventory.length > 0 && (
+        <div className="grid grid-cols-5 gap-4">
+          <div className="card p-4 text-center border border-dark-700">
+            <div className="text-2xl font-bold text-white">{inventory.length}</div>
+            <div className="text-xs text-gray-400 mt-1">Applications totales</div>
+          </div>
+          <div className="card p-4 text-center border border-orange-700/30">
+            <div className="text-2xl font-bold text-orange-400">
+              {inventory.filter((a) => a.repoRecette?.present).length}
+            </div>
+            <div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
+          </div>
+          <div className="card p-4 text-center border border-green-700/30">
+            <div className="text-2xl font-bold text-green-400">
+              {inventory.filter((a) => a.repoProd?.present).length}
+            </div>
+            <div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
+          </div>
+          <div className="card p-4 text-center border border-emerald-700/30">
+            <div className="text-2xl font-bold text-emerald-400">
+              {inventory.filter((a) => {
+                const shaRec = a.repoRecette?.version?.split(' ')[0];
+                const shaProd = a.repoProd?.version?.split(' ')[0];
+                return shaRec && shaProd && shaRec === shaProd;
+              }).length}
+            </div>
+            <div className="text-xs text-gray-400 mt-1">Synchronisés</div>
+          </div>
+          <div className="card p-4 text-center border border-blue-700/30">
+            <div className="text-2xl font-bold text-blue-400">
+              {inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
+            </div>
+            <div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
+          </div>
+        </div>
+      )}
       {/* Légende */}
       <div className="flex items-center gap-6 text-xs text-gray-400">
         <div className="flex items-center gap-1.5">
@@ -215,6 +351,12 @@ export default function InventairePage() {
                 <th className="text-left px-4 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-48">
                   Application
                 </th>
+                <th className="text-center px-4 py-3 text-xs font-semibold text-purple-400 uppercase tracking-wider">
+                  <div className="flex items-center justify-center gap-2">
+                    <ArrowUp className="w-4 h-4" />
+                    Synchronisation
+                  </div>
+                </th>
                 <th className="text-center px-4 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider" colSpan={2}>
                   <div className="flex items-center justify-center gap-2">
                     <GitBranch className="w-4 h-4" />
@@ -229,6 +371,7 @@ export default function InventairePage() {
                 </th>
               </tr>
               <tr className="border-b border-dark-700 bg-dark-800/50">
+                <th className="px-4 py-2"></th>
                 <th className="px-4 py-2"></th>
                 <th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
                 <th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
@@ -243,7 +386,7 @@ export default function InventairePage() {
                       <td className="px-4 py-3">
                         <span className="text-sm font-medium text-white">{app.name}</span>
                       </td>
-                      {[...Array(4)].map((_, i) => (
+                      {[...Array(5)].map((_, i) => (
                         <td key={i} className="px-3 py-3 text-center">
                           <div className="h-5 bg-dark-700 rounded animate-pulse mx-auto w-24" />
                         </td>
@@ -265,6 +408,13 @@ export default function InventairePage() {
                           <span className="text-xs text-gray-500 mt-0.5">{app.repoName}</span>
                         </div>
                       </td>
+                      {/* Synchronisation */}
+                      <td className="px-3 py-3 text-center">
+                        <SyncBadge
+                          versionRecette={app.repoRecette?.version}
+                          versionProd={app.repoProd?.version}
+                        />
+                      </td>
                       {/* Recette - Dépôt */}
                       <td className="px-3 py-3">
                         <RepoBadge
@@ -303,33 +453,6 @@ export default function InventairePage() {
         </div>
       </div>
 
-      {/* Stats */}
-      {!loading && inventory.length > 0 && (
-        <div className="grid grid-cols-4 gap-4">
-          <div className="card p-4 text-center border border-dark-700">
-            <div className="text-2xl font-bold text-white">{inventory.length}</div>
-            <div className="text-xs text-gray-400 mt-1">Applications totales</div>
-          </div>
-          <div className="card p-4 text-center border border-orange-700/30">
-            <div className="text-2xl font-bold text-orange-400">
-              {inventory.filter((a) => a.repoRecette?.present).length}
-            </div>
-            <div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
-          </div>
-          <div className="card p-4 text-center border border-green-700/30">
-            <div className="text-2xl font-bold text-green-400">
-              {inventory.filter((a) => a.repoProd?.present).length}
-            </div>
-            <div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
-          </div>
-          <div className="card p-4 text-center border border-blue-700/30">
-            <div className="text-2xl font-bold text-blue-400">
-              {inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
-            </div>
-            <div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

src/frontend/src/pages/TerminalPage.jsx

@@ -0,0 +1,449 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Terminal, Wifi, WifiOff, X, Plus, ChevronDown } from 'lucide-react';
+
+// Serveurs SSH prédéfinis
+const PRESET_SERVERS = [
+  {
+    id: 'recette',
+    label: 'Recette (78.138.58.109)',
+    host: '78.138.58.109',
+    port: 22,
+    username: 'root',
+  },
+  {
+    id: 'production',
+    label: 'Production (180.149.196.138)',
+    host: '180.149.196.138',
+    port: 22,
+    username: 'root',
+  },
+];
+
+export default function TerminalPage() {
+  const terminalRef = useRef(null);
+  const xtermRef = useRef(null);
+  const fitAddonRef = useRef(null);
+  const wsRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [xtermLoaded, setXtermLoaded] = useState(false);
+
+  // Formulaire de connexion
+  const [form, setForm] = useState({
+    preset: 'recette',
+    host: '78.138.58.109',
+    port: 22,
+    username: 'root',
+    password: '',
+  });
+  const [showForm, setShowForm] = useState(true);
+  const [error, setError] = useState('');
+
+  // Charger xterm.js dynamiquement depuis CDN
+  useEffect(() => {
+    const loadXterm = async () => {
+      if (window.Terminal) {
+        setXtermLoaded(true);
+        return;
+      }
+
+      // Charger le CSS xterm
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
+      document.head.appendChild(link);
+
+      // Charger xterm.js
+      await loadScript('https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js');
+      await loadScript('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js');
+
+      setXtermLoaded(true);
+    };
+
+    loadXterm();
+  }, []);
+
+  const loadScript = (src) => {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  };
+
+  // Initialiser xterm quand il est chargé et que le terminal est visible
+  useEffect(() => {
+    if (!xtermLoaded || !terminalRef.current || xtermRef.current) return;
+
+    const term = new window.Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"Cascadia Code", "Fira Code", "JetBrains Mono", monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#58a6ff',
+        cursorAccent: '#0d1117',
+        black: '#484f58',
+        red: '#ff7b72',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#bc8cff',
+        cyan: '#39c5cf',
+        white: '#b1bac4',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#56d364',
+        brightYellow: '#e3b341',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4dd',
+        brightWhite: '#f0f6fc',
+      },
+      scrollback: 1000,
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new window.FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalRef.current);
+    fitAddon.fit();
+
+    xtermRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    term.writeln('\x1b[1;34m╔══════════════════════════════════════════════════╗\x1b[0m');
+    term.writeln('\x1b[1;34m║     Terminal SSH — Dashboard Recette Santinova   ║\x1b[0m');
+    term.writeln('\x1b[1;34m╚══════════════════════════════════════════════════╝\x1b[0m');
+    term.writeln('');
+    term.writeln('\x1b[90mSélectionnez un serveur et connectez-vous pour démarrer.\x1b[0m');
+    term.writeln('');
+
+    // Gérer la saisie utilisateur
+    term.onData((data) => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'input', data }));
+      }
+    });
+
+    // Gérer le redimensionnement
+    const resizeObserver = new ResizeObserver(() => {
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          wsRef.current.send(JSON.stringify({
+            type: 'resize',
+            rows: term.rows,
+            cols: term.cols,
+          }));
+        }
+      }
+    });
+
+    if (terminalRef.current) {
+      resizeObserver.observe(terminalRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [xtermLoaded]);
+
+  const handlePresetChange = (presetId) => {
+    const preset = PRESET_SERVERS.find(s => s.id === presetId);
+    if (preset) {
+      setForm(prev => ({
+        ...prev,
+        preset: presetId,
+        host: preset.host,
+        port: preset.port,
+        username: preset.username,
+      }));
+    } else {
+      setForm(prev => ({ ...prev, preset: 'custom' }));
+    }
+  };
+
+  const handleConnect = useCallback(() => {
+    if (!form.host || !form.username || !form.password) {
+      setError('Hôte, utilisateur et mot de passe sont requis');
+      return;
+    }
+
+    setError('');
+    setConnecting(true);
+    setShowForm(false);
+
+    const token = localStorage.getItem('dashboard_token');
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}/ws-ssh?token=${token}`;
+
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      ws.send(JSON.stringify({
+        type: 'connect',
+        host: form.host,
+        port: parseInt(form.port),
+        username: form.username,
+        password: form.password,
+      }));
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+
+        switch (msg.type) {
+          case 'status':
+            if (xtermRef.current) {
+              xtermRef.current.writeln(`\x1b[33m${msg.message}\x1b[0m`);
+            }
+            break;
+
+          case 'connected':
+            setConnected(true);
+            setConnecting(false);
+            if (xtermRef.current) {
+              xtermRef.current.writeln(`\x1b[32m✓ ${msg.message}\x1b[0m`);
+              xtermRef.current.writeln('');
+              xtermRef.current.focus();
+            }
+            break;
+
+          case 'output':
+            if (xtermRef.current) {
+              const data = atob(msg.data);
+              xtermRef.current.write(data);
+            }
+            break;
+
+          case 'disconnected':
+            setConnected(false);
+            setConnecting(false);
+            if (xtermRef.current) {
+              xtermRef.current.writeln('');
+              xtermRef.current.writeln(`\x1b[33m⚠ ${msg.message}\x1b[0m`);
+            }
+            break;
+
+          case 'error':
+            setConnected(false);
+            setConnecting(false);
+            setError(msg.message);
+            if (xtermRef.current) {
+              xtermRef.current.writeln(`\x1b[31m✗ Erreur: ${msg.message}\x1b[0m`);
+            }
+            setShowForm(true);
+            break;
+        }
+      } catch (err) {
+        console.error('Erreur parsing message SSH:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      setConnected(false);
+      setConnecting(false);
+    };
+
+    ws.onerror = () => {
+      setConnected(false);
+      setConnecting(false);
+      setError('Erreur de connexion WebSocket');
+      setShowForm(true);
+    };
+  }, [form]);
+
+  const handleDisconnect = () => {
+    if (wsRef.current) {
+      wsRef.current.send(JSON.stringify({ type: 'disconnect' }));
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setConnected(false);
+    setConnecting(false);
+    setShowForm(true);
+    if (xtermRef.current) {
+      xtermRef.current.writeln('');
+      xtermRef.current.writeln('\x1b[90mDéconnecté. Configurez une nouvelle connexion.\x1b[0m');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-white flex items-center gap-3">
+            <Terminal className="w-7 h-7 text-emerald-400" />
+            Terminal SSH
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Connexion SSH sécurisée aux serveurs de l'infrastructure
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {connected ? (
+            <>
+              <span className="flex items-center gap-2 text-emerald-400 text-sm">
+                <Wifi className="w-4 h-4" />
+                Connecté à {form.host}
+              </span>
+              <button
+                onClick={handleDisconnect}
+                className="flex items-center gap-2 px-3 py-1.5 bg-red-600/20 text-red-400 border border-red-500/30 rounded-lg text-sm hover:bg-red-600/30 transition-colors"
+              >
+                <X className="w-4 h-4" />
+                Déconnecter
+              </button>
+            </>
+          ) : connecting ? (
+            <span className="flex items-center gap-2 text-yellow-400 text-sm">
+              <div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
+              Connexion en cours...
+            </span>
+          ) : (
+            <span className="flex items-center gap-2 text-gray-500 text-sm">
+              <WifiOff className="w-4 h-4" />
+              Non connecté
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Formulaire de connexion */}
+      {showForm && (
+        <div className="bg-dark-800 border border-dark-600 rounded-xl p-6">
+          <h3 className="text-white font-semibold mb-4 flex items-center gap-2">
+            <Plus className="w-4 h-4 text-primary-400" />
+            Nouvelle connexion SSH
+          </h3>
+
+          {error && (
+            <div className="mb-4 px-4 py-3 bg-red-900/30 border border-red-500/40 rounded-lg text-red-400 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Serveur prédéfini */}
+            <div className="md:col-span-2">
+              <label className="block text-sm text-gray-400 mb-1">Serveur prédéfini</label>
+              <div className="relative">
+                <select
+                  value={form.preset}
+                  onChange={(e) => handlePresetChange(e.target.value)}
+                  className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm appearance-none focus:outline-none focus:border-primary-500"
+                >
+                  {PRESET_SERVERS.map(s => (
+                    <option key={s.id} value={s.id}>{s.label}</option>
+                  ))}
+                  <option value="custom">Serveur personnalisé...</option>
+                </select>
+                <ChevronDown className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
+              </div>
+            </div>
+
+            {/* Hôte */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Hôte / IP</label>
+              <input
+                type="text"
+                value={form.host}
+                onChange={(e) => setForm(prev => ({ ...prev, host: e.target.value, preset: 'custom' }))}
+                placeholder="192.168.1.1"
+                className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
+              />
+            </div>
+
+            {/* Port */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Port SSH</label>
+              <input
+                type="number"
+                value={form.port}
+                onChange={(e) => setForm(prev => ({ ...prev, port: e.target.value }))}
+                placeholder="22"
+                className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
+              />
+            </div>
+
+            {/* Utilisateur */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Utilisateur</label>
+              <input
+                type="text"
+                value={form.username}
+                onChange={(e) => setForm(prev => ({ ...prev, username: e.target.value }))}
+                placeholder="root"
+                className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
+              />
+            </div>
+
+            {/* Mot de passe */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Mot de passe</label>
+              <input
+                type="password"
+                value={form.password}
+                onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))}
+                placeholder="••••••••"
+                onKeyDown={(e) => e.key === 'Enter' && handleConnect()}
+                className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 flex justify-end">
+            <button
+              onClick={handleConnect}
+              disabled={connecting}
+              className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+            >
+              <Terminal className="w-4 h-4" />
+              Se connecter
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Terminal xterm.js */}
+      <div className="bg-dark-900 border border-dark-600 rounded-xl overflow-hidden">
+        {/* Barre de titre style terminal */}
+        <div className="flex items-center gap-2 px-4 py-3 bg-dark-800 border-b border-dark-600">
+          <div className="w-3 h-3 rounded-full bg-red-500/70" />
+          <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
+          <div className="w-3 h-3 rounded-full bg-green-500/70" />
+          <span className="ml-2 text-xs text-gray-500 font-mono">
+            {connected ? `${form.username}@${form.host}` : 'terminal — non connecté'}
+          </span>
+          {connected && !showForm && (
+            <button
+              onClick={() => setShowForm(!showForm)}
+              className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
+            >
+              {showForm ? 'Masquer' : 'Nouvelle connexion'}
+            </button>
+          )}
+        </div>
+
+        {/* Zone du terminal */}
+        <div
+          ref={terminalRef}
+          style={{ height: '500px', padding: '8px', backgroundColor: '#0d1117' }}
+        />
+      </div>
+
+      {!xtermLoaded && (
+        <div className="text-center text-gray-500 text-sm py-4">
+          Chargement du terminal...
+        </div>
+      )}
+    </div>
+  );
+}