feat: découverte dynamique apps - portail dynamique - fix URLs

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.git
+.gitignore
+README.md
+*.log
+frontend/node_modules
+backend/node_modules

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 .env
 *.log
+.DS_Store

Dockerfile

@@ -0,0 +1,43 @@
+# Stage 1: Build frontend
+FROM node:20-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy frontend package files
+COPY frontend/package.json frontend/pnpm-lock.yaml* ./
+RUN npm install
+
+# Copy frontend source
+COPY frontend/ ./
+
+# Build frontend
+RUN npm run build
+
+# Stage 2: Production
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install docker CLI for docker compose commands
+RUN apk add --no-cache docker-cli docker-cli-compose git curl unzip bash openssh-client
+
+# Configure git global identity to avoid "Author identity unknown" errors
+RUN git config --global user.email "admin@santinova-soft.org" && \
+    git config --global user.name "Manus Dashboard"
+
+# Copy backend
+COPY backend/package.json ./backend/
+WORKDIR /app/backend
+RUN npm install --production
+
+COPY backend/ ./
+
+# Copy built frontend
+WORKDIR /app
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+WORKDIR /app/backend
+
+EXPOSE 3001
+
+CMD ["node", "src/index.js"]

README.md

@@ -0,0 +1,32 @@
+# Manus Dashboard
+
+Tableau de bord de gestion des applications Manus, déployé sur le serveur de recette.
+
+## Fonctionnalités
+
+- Liste des applications déployées avec état en temps réel
+- Health checks HTTP périodiques avec indicateurs visuels
+- Redéploiement en un clic (docker compose build + up)
+- Logs de déploiement et logs conteneurs
+- Intégration Gitea (commits, branches, dépôts)
+- Authentification par login/mot de passe
+- Interface moderne avec TailwindCSS
+
+## Stack technique
+
+- **Backend** : Node.js / Express
+- **Frontend** : React / TailwindCSS / Vite
+- **Conteneurisation** : Docker / Docker Compose
+- **Reverse Proxy** : Traefik avec SSL Let's Encrypt
+
+## Déploiement
+
+```bash
+cd /opt/manus-deploy/apps/manus-dashboard
+docker compose build --no-cache && docker compose up -d
+```
+
+## Accès
+
+- URL : https://dashboard.santinova-soft.org
+- Login : adminItinova / Itinova69!

backend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "manus-dashboard-backend",
+  "version": "1.0.0",
+  "description": "Backend API for Manus Dashboard",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "dependencies": {
+    "express": "^4.21.0",
+    "cors": "^2.8.5",
+    "helmet": "^7.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "bcryptjs": "^2.4.3",
+    "axios": "^1.7.0",
+    "dockerode": "^4.0.2",
+    "ws": "^8.18.0",
+    "node-cron": "^3.0.3",
+    "express-rate-limit": "^7.4.0",
+    "cookie-parser": "^1.4.6",
+    "morgan": "^1.10.0",
+    "multer": "^1.4.5-lts.1",
+    "adm-zip": "^0.5.10",
+    "ssh2": "^1.16.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}

backend/src/app-creator.js

@@ -0,0 +1,710 @@
+const fs = require('fs');
+const fsp = require('fs/promises');
+const path = require('path');
+const { exec, execSync } = require('child_process');
+const config = require('./config');
+const { createRepo, giteaClient } = require('./gitea');
+
+// ============ TEMPLATES DOCKERFILE ============
+
+const DOCKERFILE_TEMPLATES = {
+  nodejs: (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
+FROM node:22-slim AS builder
+
+WORKDIR /app
+
+# Copy lockfiles for better layer caching
+COPY package.json pnpm-lock.yaml* yarn.lock* ./
+
+# Copy patches directory if it exists (needed by pnpm before install)
+COPY patches/ ./patches/
+
+# Detect package manager and install ALL dependencies (including devDependencies for build)
+RUN if [ -f pnpm-lock.yaml ]; then \\
+      corepack enable && corepack prepare pnpm@latest --activate && \\
+      pnpm install --no-frozen-lockfile; \\
+    elif [ -f yarn.lock ]; then \\
+      yarn install; \\
+    else \\
+      npm install --legacy-peer-deps; \\
+    fi
+
+# Copy source code
+COPY . .
+
+# Build the application (frontend + backend if applicable)
+RUN if [ -f package.json ] && grep -q '"build"' package.json; then \\
+      if [ -f pnpm-lock.yaml ]; then \\
+        pnpm run build; \\
+      elif [ -f yarn.lock ]; then \\
+        yarn build; \\
+      else \\
+        npm run build; \\
+      fi; \\
+    fi
+
+# ── Stage 2: Production ─────────────────────────────────────────
+FROM node:22-slim
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json pnpm-lock.yaml* yarn.lock* ./
+
+# Copy patches directory if it exists (needed by pnpm for install)
+COPY patches/ ./patches/
+
+# Install ALL dependencies (some projects import dev deps at runtime like vite)
+RUN if [ -f pnpm-lock.yaml ]; then \\
+      corepack enable && corepack prepare pnpm@latest --activate && \\
+      pnpm install --no-frozen-lockfile; \\
+    elif [ -f yarn.lock ]; then \\
+      yarn install; \\
+    else \\
+      npm install --legacy-peer-deps; \\
+    fi
+
+# Copy built artifacts from builder
+COPY --from=builder /app/dist ./dist
+
+# Copy drizzle migrations if they exist
+COPY drizzle/ ./drizzle/
+COPY drizzle.config.ts* ./
+
+ENV NODE_ENV=production
+ENV PORT=\${port}
+EXPOSE \${port}
+
+# Start the application
+CMD if grep -q '"start"' package.json; then \\
+      npm start; \\
+    elif [ -f dist/index.js ]; then \\
+      node dist/index.js; \\
+    else \\
+      node index.js; \\
+    fi
+`,
+
+  'nodejs-next': (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
+FROM node:22-slim AS builder
+
+WORKDIR /app
+COPY package.json pnpm-lock.yaml* yarn.lock* ./
+RUN if [ -f pnpm-lock.yaml ]; then \\
+      corepack enable && corepack prepare pnpm@latest --activate && \\
+      pnpm install --no-frozen-lockfile; \\
+    elif [ -f yarn.lock ]; then \\
+      yarn install; \\
+    else \\
+      npm install --legacy-peer-deps; \\
+    fi
+COPY . .
+RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
+    elif [ -f yarn.lock ]; then yarn build; \\
+    else npm run build; fi
+
+# ── Stage 2: Production ─────────────────────────────────────────
+FROM node:22-slim
+WORKDIR /app
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/public ./public
+
+ENV NODE_ENV=production
+EXPOSE \${port}
+
+CMD ["npm", "start"]
+`,
+
+  python: (port) => `FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE \${port}
+
+CMD ["python", "app.py"]
+`,
+
+  'python-django': (port) => `FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN python manage.py collectstatic --noinput
+
+EXPOSE \${port}
+
+CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "config.wsgi:application"]
+`,
+
+  'python-flask': (port) => `FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install gunicorn
+
+COPY . .
+
+EXPOSE \${port}
+
+CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "app:app"]
+`,
+
+  php: (port) => `FROM php:8.3-apache
+
+RUN a2enmod rewrite
+RUN docker-php-ext-install pdo pdo_mysql mysqli
+
+COPY . /var/www/html/
+
+RUN chown -R www-data:www-data /var/www/html
+
+EXPOSE 80
+
+CMD ["apache2-foreground"]
+`,
+
+  'php-laravel': (port) => `FROM php:8.3-fpm
+
+RUN apt-get update && apt-get install -y \\
+    git curl zip unzip libpng-dev libonig-dev libxml2-dev \\
+    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
+
+COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
+
+WORKDIR /var/www
+
+COPY . .
+
+RUN composer install --no-dev --optimize-autoloader
+RUN php artisan config:cache
+
+EXPOSE \${port}
+
+CMD ["php-fpm"]
+`,
+
+  static: () => `FROM nginx:alpine
+
+COPY . /usr/share/nginx/html/
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+`,
+
+  'static-react': () => `FROM node:22-slim AS builder
+
+WORKDIR /app
+COPY package.json pnpm-lock.yaml* yarn.lock* ./
+RUN if [ -f pnpm-lock.yaml ]; then \\
+      corepack enable && corepack prepare pnpm@latest --activate && \\
+      pnpm install --no-frozen-lockfile; \\
+    elif [ -f yarn.lock ]; then \\
+      yarn install; \\
+    else \\
+      npm install --legacy-peer-deps; \\
+    fi
+COPY . .
+RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
+    elif [ -f yarn.lock ]; then yarn build; \\
+    else npm run build; fi
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+`,
+};
+
+// ============ TEMPLATES DOCKER-COMPOSE ============
+
+function generateDockerCompose(appConfig) {
+  const { appId, subdomain, stack, port, needsDb, dbType } = appConfig;
+  const domain = `${subdomain}.recette.santinova-soft.org`;
+  const containerPort = getContainerPort(stack, port);
+
+  let compose = `services:
+  app:
+    build:
+      context: ./src
+      dockerfile: Dockerfile
+    container_name: ${appId}
+    restart: unless-stopped
+    networks:
+      - web`;
+
+  // Ajouter le réseau interne si base de données
+  if (needsDb) {
+    compose += `
+      - ${appId}-internal`;
+  }
+
+  // Variables d'environnement
+  compose += `
+    environment:
+      - NODE_ENV=production`;
+
+  if (needsDb) {
+    compose += `
+      - DATABASE_HOST=${appId}-db
+      - DATABASE_PORT=${dbType === 'postgres' ? '5432' : '3306'}
+      - DATABASE_NAME=${appId.replace(/-/g, '_')}
+      - DATABASE_USER=app_user
+      - DATABASE_PASSWORD=AppPassword2026!
+      - DB_HOST=${appId}-db
+      - DB_PORT=${dbType === 'postgres' ? '5432' : '3306'}
+      - DB_NAME=${appId.replace(/-/g, '_')}
+      - DB_USER=app_user
+      - DB_PASSWORD=AppPassword2026!
+      - MYSQL_HOST=${appId}-db
+      - MYSQL_DATABASE=${appId.replace(/-/g, '_')}
+      - MYSQL_USER=app_user
+      - MYSQL_PASSWORD=AppPassword2026!`;
+  }
+
+  compose += `
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.${appId}.rule=Host(\`${domain}\`)"
+      - "traefik.http.routers.${appId}.entrypoints=websecure"
+      - "traefik.http.routers.${appId}.tls=true"
+      - "traefik.http.routers.${appId}.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.${appId}.service=${appId}-svc"
+      - "traefik.http.services.${appId}-svc.loadbalancer.server.port=${containerPort}"
+      - "traefik.docker.network=web"`;
+
+  // Ajouter la base de données si nécessaire
+  if (needsDb) {
+    const dbName = appId.replace(/-/g, '_');
+
+    if (dbType === 'postgres') {
+      compose += `
+
+  db:
+    image: postgres:16-alpine
+    container_name: ${appId}-db
+    restart: unless-stopped
+    environment:
+      - POSTGRES_DB=${dbName}
+      - POSTGRES_USER=app_user
+      - POSTGRES_PASSWORD=AppPassword2026!
+    volumes:
+      - ${appId}-db-data:/var/lib/postgresql/data
+    networks:
+      - ${appId}-internal
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U app_user -d ${dbName}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5`;
+    } else {
+      compose += `
+
+  db:
+    image: mysql:8.0
+    container_name: ${appId}-db
+    restart: unless-stopped
+    environment:
+      - MYSQL_ROOT_PASSWORD=RootPassword2026!
+      - MYSQL_DATABASE=${dbName}
+      - MYSQL_USER=app_user
+      - MYSQL_PASSWORD=AppPassword2026!
+    volumes:
+      - ${appId}-db-data:/var/lib/mysql
+    networks:
+      - ${appId}-internal
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-pRootPassword2026!"]
+      interval: 10s
+      timeout: 5s
+      retries: 5`;
+    }
+  }
+
+  // Dépendance app -> db
+  if (needsDb) {
+    // Insert depends_on before labels
+    const appSection = compose.indexOf('    labels:');
+    const dependsOn = `    depends_on:
+      db:
+        condition: service_healthy
+`;
+    compose = compose.slice(0, appSection) + dependsOn + compose.slice(appSection);
+  }
+
+  // Réseaux
+  compose += `
+
+networks:
+  web:
+    external: true`;
+
+  if (needsDb) {
+    compose += `
+  ${appId}-internal:
+    driver: bridge`;
+  }
+
+  // Volumes
+  if (needsDb) {
+    compose += `
+
+volumes:
+  ${appId}-db-data:`;
+  }
+
+  compose += '\n';
+
+  return compose;
+}
+
+function getContainerPort(stack, customPort) {
+  if (customPort) return customPort;
+  const defaults = {
+    nodejs: 3000,
+    'nodejs-next': 3000,
+    python: 5000,
+    'python-django': 8000,
+    'python-flask': 5000,
+    php: 80,
+    'php-laravel': 9000,
+    static: 80,
+    'static-react': 80,
+  };
+  return defaults[stack] || 3000;
+}
+
+// ============ APPS PERSISTENCE ============
+
+const APPS_FILE = path.join(config.appsBasePath, '.dashboard-apps.json');
+
+function loadDynamicApps() {
+  try {
+    if (fs.existsSync(APPS_FILE)) {
+      const data = fs.readFileSync(APPS_FILE, 'utf-8');
+      return JSON.parse(data);
+    }
+  } catch (err) {
+    console.error('Erreur chargement apps dynamiques:', err.message);
+  }
+  return [];
+}
+
+function saveDynamicApps(apps) {
+  try {
+    fs.writeFileSync(APPS_FILE, JSON.stringify(apps, null, 2), 'utf-8');
+  } catch (err) {
+    console.error('Erreur sauvegarde apps dynamiques:', err.message);
+  }
+}
+
+function addDynamicApp(appDef) {
+  const apps = loadDynamicApps();
+  // Éviter les doublons
+  const existing = apps.findIndex((a) => a.id === appDef.id);
+  if (existing >= 0) {
+    apps[existing] = appDef;
+  } else {
+    apps.push(appDef);
+  }
+  saveDynamicApps(apps);
+
+  // Ajouter aussi à config.apps en mémoire
+  const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
+  if (existingInConfig >= 0) {
+    config.apps[existingInConfig] = appDef;
+  } else {
+    config.apps.push(appDef);
+  }
+}
+
+function initDynamicApps() {
+  const dynamicApps = loadDynamicApps();
+  for (const app of dynamicApps) {
+    const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
+    if (existingInConfig < 0) {
+      config.apps.push(app);
+    }
+  }
+  console.log(`Apps dynamiques chargées: ${dynamicApps.length}`);
+}
+
+// ============ CREATION D'APPLICATION ============
+
+async function createApplication(params, logCallback) {
+  const {
+    name,
+    description,
+    subdomain,
+    stack,
+    port,
+    needsDb,
+    dbType,
+    sourceType, // 'zip' or 'gitea'
+    giteaRepoUrl, // URL du repo Gitea existant
+    zipFilePath, // Chemin du fichier ZIP uploadé
+  } = params;
+
+  const appId = subdomain;
+  const domain = `${subdomain}.recette.santinova-soft.org`;
+  const appDir = path.join(config.appsBasePath, appId);
+  const srcDir = path.join(appDir, 'src');
+
+  const log = (msg) => {
+    const line = `[${new Date().toISOString()}] ${msg}`;
+    console.log(line);
+    if (logCallback) logCallback(line);
+  };
+
+  try {
+    // 1. Créer le répertoire de l'application
+    log(`Création du répertoire ${appDir}...`);
+    await fsp.mkdir(appDir, { recursive: true });
+    await fsp.mkdir(srcDir, { recursive: true });
+
+    let giteaRepoName = appId;
+    let giteaOwner = config.gitea.username;
+
+    if (sourceType === 'gitea') {
+      // 2a. Cloner depuis un dépôt Gitea existant
+      log(`Clonage du dépôt Gitea: ${giteaRepoUrl}...`);
+      const cloneUrl = giteaRepoUrl.replace(
+        'https://',
+        `https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@`
+      );
+      await execCommand(`cd ${appDir} && rm -rf src && git clone ${cloneUrl} src`, 120000);
+      log('Clonage terminé.');
+
+      // Extraire le nom du repo depuis l'URL
+      const urlParts = giteaRepoUrl.replace(/\.git$/, '').split('/');
+      giteaRepoName = urlParts[urlParts.length - 1];
+      if (urlParts.length >= 2) {
+        giteaOwner = urlParts[urlParts.length - 2];
+      }
+    } else if (sourceType === 'zip') {
+      // 2b. Extraire le ZIP et créer un dépôt Gitea
+      log(`Extraction du fichier ZIP...`);
+      await execCommand(`cd ${srcDir} && unzip -o ${zipFilePath}`, 60000);
+
+      // Vérifier si les fichiers sont dans un sous-répertoire
+      const entries = await fsp.readdir(srcDir);
+      const nonHidden = entries.filter((e) => !e.startsWith('.') && e !== '__MACOSX');
+      if (nonHidden.length === 1) {
+        const subDir = path.join(srcDir, nonHidden[0]);
+        const stat = await fsp.stat(subDir);
+        if (stat.isDirectory()) {
+          log(`Déplacement des fichiers depuis le sous-répertoire ${nonHidden[0]}...`);
+          await execCommand(`cd ${subDir} && mv * ${srcDir}/ 2>/dev/null; mv .* ${srcDir}/ 2>/dev/null; cd ${srcDir} && rmdir "${nonHidden[0]}" 2>/dev/null || true`);
+        }
+      }
+
+      // Supprimer le ZIP temporaire
+      try { await fsp.unlink(zipFilePath); } catch (e) { /* ignore */ }
+
+      // Créer le dépôt sur Gitea
+      log(`Création du dépôt Gitea: ${appId}...`);
+      try {
+        await createRepo(appId, description || `Application ${name}`, true);
+        log('Dépôt Gitea créé.');
+      } catch (err) {
+        if (err.response && err.response.status === 409) {
+          log('Le dépôt Gitea existe déjà, utilisation du dépôt existant.');
+        } else {
+          throw err;
+        }
+      }
+
+      // Initialiser git et pousser le code
+      log('Initialisation Git et push vers Gitea...');
+      const gitUrl = `https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@${config.gitea.url.replace('https://', '')}/${config.gitea.username}/${appId}.git`;
+      await execCommand(
+        `cd ${srcDir} && git init && git checkout -b main && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add -A && git commit -m "Initial commit: ${name}" && git remote add origin ${gitUrl} && git push -u origin main --force`,
+        120000
+      );
+      log('Code poussé sur Gitea.');
+    }
+
+    // 3. Générer le Dockerfile si nécessaire
+    const dockerfilePath = path.join(srcDir, 'Dockerfile');
+    const hasDockerfile = fs.existsSync(dockerfilePath);
+
+    if (!hasDockerfile) {
+      log(`Génération du Dockerfile pour la stack ${stack}...`);
+      const containerPort = getContainerPort(stack, port);
+      const templateFn = DOCKERFILE_TEMPLATES[stack] || DOCKERFILE_TEMPLATES['nodejs'];
+      let dockerfileContent = templateFn(containerPort);
+
+      // If the project does NOT have a patches/ directory, remove COPY patches/ lines
+      const hasPatchesDir = fs.existsSync(path.join(srcDir, 'patches'));
+      if (!hasPatchesDir) {
+        dockerfileContent = dockerfileContent
+          .split('\n')
+          .filter(line => !line.includes('COPY patches/'))
+          .join('\n');
+        log('Pas de dossier patches/ détecté, lignes COPY patches/ retirées du Dockerfile.');
+      }
+
+      // If the project does NOT have a drizzle/ directory, remove COPY drizzle lines
+      const hasDrizzleDir = fs.existsSync(path.join(srcDir, 'drizzle'));
+      if (!hasDrizzleDir) {
+        dockerfileContent = dockerfileContent
+          .split('\n')
+          .filter(line => !line.includes('COPY drizzle'))
+          .join('\n');
+        log('Pas de dossier drizzle/ détecté, lignes COPY drizzle retirées du Dockerfile.');
+      }
+
+      await fsp.writeFile(dockerfilePath, dockerfileContent, 'utf-8');
+      log('Dockerfile généré.');
+
+      // Commit le Dockerfile
+      if (sourceType === 'zip') {
+        await execCommand(
+          `cd ${srcDir} && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add Dockerfile && git commit -m "Add auto-generated Dockerfile" && git push origin main`,
+          60000
+        );
+        log('Dockerfile commité et poussé sur Gitea.');
+      }
+    } else {
+      log('Dockerfile existant détecté, utilisation du Dockerfile du projet.');
+    }
+
+    // 4. Générer le docker-compose.yml
+    log('Génération du docker-compose.yml...');
+    const containerPort = getContainerPort(stack, port);
+    const composeContent = generateDockerCompose({
+      appId,
+      subdomain,
+      stack,
+      port: containerPort,
+      needsDb: needsDb || false,
+      dbType: dbType || 'mysql',
+    });
+    await fsp.writeFile(path.join(appDir, 'docker-compose.yml'), composeContent, 'utf-8');
+    log('docker-compose.yml généré.');
+
+    // 5. Lancer le build et le déploiement Docker
+    log('Lancement du build Docker (cela peut prendre quelques minutes)...');
+    const buildResult = await execCommand(
+      `cd ${appDir} && docker compose build --no-cache 2>&1`,
+      600000
+    );
+    log('Build Docker terminé.');
+
+    log('Démarrage des conteneurs...');
+    await execCommand(`cd ${appDir} && docker compose up -d 2>&1`, 120000);
+    log('Conteneurs démarrés.');
+
+    // 6. Créer un utilisateur admin dans la base de données si nécessaire
+    if (needsDb) {
+      log('Attente du démarrage de la base de données (15s)...');
+      await new Promise((resolve) => setTimeout(resolve, 15000));
+
+      try {
+        log('Tentative de création de l\'utilisateur admin dans la base de données...');
+        if (dbType === 'postgres') {
+          await execCommand(
+            `docker exec ${appId}-db psql -U app_user -d ${appId.replace(/-/g, '_')} -c "CREATE TABLE IF NOT EXISTS admin_users (id SERIAL PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT NOW()); INSERT INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin') ON CONFLICT DO NOTHING;" 2>&1`,
+            30000
+          );
+        } else {
+          await execCommand(
+            `docker exec ${appId}-db mysql -uapp_user -pAppPassword2026! ${appId.replace(/-/g, '_')} -e "CREATE TABLE IF NOT EXISTS admin_users (id INT AUTO_INCREMENT PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP); INSERT IGNORE INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin');" 2>&1`,
+            30000
+          );
+        }
+        log('Utilisateur admin créé dans la base de données.');
+      } catch (dbErr) {
+        log(`Note: Création de l'utilisateur admin en BDD non critique: ${dbErr.message}`);
+      }
+    }
+
+    // 7. Enregistrer l'application dans la configuration dynamique
+    const appDef = {
+      id: appId,
+      name: name,
+      description: description || `Application ${name}`,
+      directory: appId,
+      giteaRepo: giteaRepoName,
+      giteaOwner: giteaOwner,
+      urls: {
+        recette: `https://${domain}`,
+        prod: null,
+      },
+      containerName: appId,
+      healthCheckUrl: `https://${domain}`,
+      port: containerPort,
+      stack: stack,
+      needsDb: needsDb || false,
+      dbType: dbType || null,
+      createdAt: new Date().toISOString(),
+    };
+
+    addDynamicApp(appDef);
+    log(`Application ${name} enregistrée dans le dashboard.`);
+    log(`Accessible sur: https://${domain}`);
+
+    return {
+      success: true,
+      app: appDef,
+      message: `Application ${name} créée et déployée avec succès`,
+      url: `https://${domain}`,
+    };
+  } catch (err) {
+    log(`ERREUR: ${err.message}`);
+    throw err;
+  }
+}
+
+function execCommand(cmd, timeout = 60000) {
+  return new Promise((resolve, reject) => {
+    exec(cmd, { maxBuffer: 1024 * 1024 * 50, timeout }, (error, stdout, stderr) => {
+      if (error) {
+        reject(new Error(`Commande échouée: ${error.message}\nStdout: ${stdout}\nStderr: ${stderr}`));
+      } else {
+        resolve(stdout + stderr);
+      }
+    });
+  });
+}
+
+// ============ STACK DETECTION ============
+
+function getAvailableStacks() {
+  return [
+    { id: 'nodejs', name: 'Node.js', icon: 'nodejs', description: 'Application Node.js (Express, Fastify, etc.)' },
+    { id: 'nodejs-next', name: 'Node.js (Next.js)', icon: 'nodejs', description: 'Application Next.js avec SSR' },
+    { id: 'python', name: 'Python', icon: 'python', description: 'Application Python générique' },
+    { id: 'python-flask', name: 'Python (Flask)', icon: 'python', description: 'Application Flask' },
+    { id: 'python-django', name: 'Python (Django)', icon: 'python', description: 'Application Django' },
+    { id: 'php', name: 'PHP', icon: 'php', description: 'Application PHP avec Apache' },
+    { id: 'php-laravel', name: 'PHP (Laravel)', icon: 'php', description: 'Application Laravel' },
+    { id: 'static', name: 'Site statique', icon: 'static', description: 'HTML/CSS/JS statique (Nginx)' },
+    { id: 'static-react', name: 'React (SPA)', icon: 'react', description: 'Application React avec build (Vite/CRA)' },
+  ];
+}
+
+module.exports = {
+  createApplication,
+  generateDockerCompose,
+  getAvailableStacks,
+  initDynamicApps,
+  loadDynamicApps,
+  addDynamicApp,
+  DOCKERFILE_TEMPLATES,
+};

backend/src/auth.js

@@ -0,0 +1,61 @@
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+const config = require('./config');
+
+// Hash du mot de passe au démarrage
+let passwordHash = null;
+
+async function initAuth() {
+  passwordHash = await bcrypt.hash(config.auth.password, 10);
+}
+
+async function authenticate(username, password) {
+  if (username !== config.auth.username) {
+    return null;
+  }
+  // Comparer directement car on stocke le mot de passe en clair dans la config
+  if (password !== config.auth.password) {
+    return null;
+  }
+  const token = jwt.sign(
+    { username, role: 'admin' },
+    config.jwtSecret,
+    { expiresIn: config.jwtExpiry }
+  );
+  return token;
+}
+
+function verifyToken(token) {
+  try {
+    return jwt.verify(token, config.jwtSecret);
+  } catch (err) {
+    return null;
+  }
+}
+
+function authMiddleware(req, res, next) {
+  // Check Authorization header
+  let token = null;
+  const authHeader = req.headers.authorization;
+  if (authHeader && authHeader.startsWith('Bearer ')) {
+    token = authHeader.substring(7);
+  }
+  // Check cookie
+  if (!token && req.cookies) {
+    token = req.cookies.dashboard_token;
+  }
+
+  if (!token) {
+    return res.status(401).json({ error: 'Non authentifié' });
+  }
+
+  const decoded = verifyToken(token);
+  if (!decoded) {
+    return res.status(401).json({ error: 'Token invalide ou expiré' });
+  }
+
+  req.user = decoded;
+  next();
+}
+
+module.exports = { initAuth, authenticate, verifyToken, authMiddleware };

backend/src/config.js

@@ -0,0 +1,230 @@
+module.exports = {
+  port: process.env.PORT || 3001,
+  jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
+  jwtExpiry: '24h',
+  // Authentification
+  auth: {
+    username: process.env.ADMIN_USERNAME || 'adminItinova',
+    password: process.env.ADMIN_PASSWORD || 'Itinova69!',
+  },
+  // Gitea
+  gitea: {
+    url: process.env.GITEA_URL || 'http://gitea:3000',
+    username: process.env.GITEA_USERNAME || 'manus-admin',
+    password: process.env.GITEA_PASSWORD || 'Itinova69!',
+    token: process.env.GITEA_TOKEN || null,
+  },
+  // Applications config
+  appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
+  infrastructurePath: process.env.INFRA_BASE_PATH || '/opt/manus-deploy/infrastructure',
+  // Health check interval (ms)
+  healthCheckInterval: parseInt(process.env.HEALTH_CHECK_INTERVAL) || 30000,
+  // Apps configuration
+  apps: [
+    {
+      id: 'itinova-contacts',
+      name: 'Itinova Contacts',
+      description: 'Application de gestion des contacts Itinova',
+      directory: 'itinova-contacts',
+      giteaRepo: 'itinova-contacts',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://contacts.recette.santinova-soft.org',
+        prod: 'https://contacts.santinova-soft.org',
+      },
+      containerName: 'itinova-contacts',
+      healthCheckUrl: 'https://contacts.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'production',
+    },
+    {
+      id: 'itinova-podcasts',
+      name: 'Itinova Podcasts',
+      description: 'Gestionnaire de podcasts pour les établissements Itinova',
+      directory: 'itinova-podcasts',
+      giteaRepo: 'itinova-podcasts',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://podcasts.recette.santinova-soft.org',
+        prod: 'https://podcasts.santinova-soft.org',
+      },
+      containerName: 'itinova-podcasts',
+      healthCheckUrl: 'https://podcasts.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'production',
+    },
+    {
+      id: 'veille-reglementaire',
+      name: 'Veille Réglementaire',
+      description: 'Application de veille réglementaire et appels à projets',
+      directory: 'veille-reglementaire',
+      giteaRepo: 'veille-reglementaire',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://veille.recette.santinova-soft.org',
+        prod: 'https://veille.santinova-soft.org',
+      },
+      containerName: 'veille-reglementaire-recette',
+      healthCheckUrl: 'https://veille.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'production',
+    },
+    {
+      id: 'itinova-vehicle-exchange',
+      name: 'Itinova Gestion de Flotte',
+      description: 'Bourse de véhicules Itinova — Partage et échange de véhicules entre établissements',
+      directory: 'itinova-vehicle-exchange',
+      giteaRepo: 'itinova-vehicle-exchange',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://flotte.recette.santinova-soft.org',
+        prod: 'https://flotte.santinova-soft.org',
+      },
+      containerName: 'itinova-vehicle-exchange',
+      healthCheckUrl: 'https://flotte.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'production',
+    },
+    {
+      id: 'pilotage-masse-salariale',
+      name: 'Pilotage Masse Salariale',
+      description: 'Application de pilotage de la masse salariale Itinova',
+      directory: 'pilotage-masse-salariale',
+      giteaRepo: 'pilotage-masse-salariale',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://pilotage-ms.recette.santinova-soft.org',
+        prod: 'https://pilotage-ms.santinova-soft.org',
+      },
+      containerName: 'pilotage-masse-salariale-app',
+      healthCheckUrl: 'https://pilotage-ms.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'recette',
+    },
+    {
+      id: 'sonum',
+      name: 'SONUM',
+      description: 'Cartographie des Solutions Numériques FEHAP',
+      directory: 'sonum',
+      giteaRepo: 'sonum',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://sonum.recette.santinova-soft.org',
+        prod: 'https://sonum.santinova-soft.org',
+      },
+      containerName: 'sonum',
+      healthCheckUrl: 'https://sonum.recette.santinova-soft.org',
+      port: 3000,
+      category: 'SANTINOVA',
+      status: 'production',
+    },
+    {
+      id: 'demat-facturation-dsi',
+      name: 'Démat. Facturation DSI',
+      description: 'Dématérialisation des factures DSI — Import email/dossier, analyse IA, export SharePoint/PDF, validation BAP',
+      directory: 'demat-facturation-dsi',
+      giteaRepo: 'demat-facturation-dsi',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://demat-facturation.recette.santinova-soft.org',
+        prod: 'https://demat-facturation.santinova-soft.org',
+      },
+      containerName: 'demat-facturation-app',
+      healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
+      port: 3000,
+      image: 'images/demat-facturation-dsi.jpg',
+      category: 'SANTINOVA',
+      status: 'production',
+    },
+    {
+      id: 'facturation-santinova',
+      name: 'Facturation Santinova',
+      description: 'Application de gestion de la facturation Santinova',
+      directory: 'facturation-santinova',
+      giteaRepo: 'facturation-santinova',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://facturation.recette.santinova-soft.org',
+        prod: 'https://facturation.santinova-soft.org',
+      },
+      containerName: 'facturation-santinova-app',
+      healthCheckUrl: 'https://facturation.recette.santinova-soft.org',
+      port: 3001,
+      category: 'SANTINOVA',
+      status: 'recette',
+    },
+    {
+      id: 'formation-manager-itinova',
+      name: 'Formation Manager',
+      description: 'Gestion des Formations Itinova',
+      directory: 'formation-manager-itinova',
+      giteaRepo: 'formation-manager-itinova',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://formations.recette.santinova-soft.org',
+        prod: 'https://formations.itinova.org',
+      },
+      containerName: 'formation-manager-itinova',
+      healthCheckUrl: 'https://formations.recette.santinova-soft.org',
+      port: 3000,
+      category: 'ITINOVA',
+      status: 'production',
+    },
+    {
+      id: 'portail-santinova',
+      name: 'Portail Applicatif',
+      description: 'Portail applicatif Santinova — accès centralisé aux applications',
+      directory: 'portail-santinova',
+      giteaRepo: 'portail-santinova',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://portail.recette.santinova-soft.org',
+        prod: 'https://portail.santinova-soft.org',
+      },
+      containerName: 'portail-santinova',
+      healthCheckUrl: 'https://portail.recette.santinova-soft.org',
+      port: 3000,
+      category: 'INFRA',
+      status: 'production',
+    },
+    {
+      id: 'manus-dashboard',
+      name: 'Dashboard Recette',
+      description: 'Dashboard de gestion de l\'infrastructure Manus',
+      directory: 'manus-dashboard',
+      giteaRepo: 'manus-dashboard',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://dashboard.recette.santinova-soft.org',
+        prod: 'https://dashboard.santinova-soft.org',
+      },
+      containerName: 'manus-dashboard',
+      healthCheckUrl: 'https://dashboard.recette.santinova-soft.org',
+      port: 3001,
+      category: 'INFRA',
+      status: 'production',
+    },
+    {
+      id: 'itinova-budget-si',
+      name: 'Gestion Budget Informatique',
+      description: 'Application de gestion du budget informatique DSI Itinova',
+      directory: 'itinova-budget-si',
+      giteaRepo: 'itinova-budget-si',
+      giteaOwner: 'manus-admin',
+      urls: {
+        recette: 'https://budget-si.recette.santinova-soft.org',
+        prod: 'https://budget-si.santinova-soft.org',
+      },
+      containerName: 'itinova-budget-si-app',
+      healthCheckUrl: 'https://budget-si.recette.santinova-soft.org',
+      port: 3000,
+      category: 'SANTINOVA',
+      status: 'recette',
+    },
+  ],
+};

backend/src/docker.js

@@ -0,0 +1,411 @@
+const Docker = require('dockerode');
+const { exec } = require('child_process');
+const path = require('path');
+const config = require('./config');
+
+const docker = new Docker({ socketPath: '/var/run/docker.sock' });
+
+/**
+ * Récupérer les informations d'un conteneur Docker
+ */
+async function getContainerInfo(containerName) {
+  try {
+    const container = docker.getContainer(containerName);
+    const info = await container.inspect();
+    return {
+      id: info.Id.substring(0, 12),
+      name: info.Name.replace('/', ''),
+      state: info.State.Status,
+      running: info.State.Running,
+      startedAt: info.State.StartedAt,
+      image: info.Config.Image,
+      created: info.Created,
+    };
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Récupérer les logs d'un conteneur
+ */
+async function getContainerLogs(containerName, tail = 100) {
+  try {
+    const container = docker.getContainer(containerName);
+    const logs = await container.logs({
+      stdout: true,
+      stderr: true,
+      tail: tail,
+      timestamps: true,
+    });
+    // Parse buffer to string
+    return logs.toString('utf8');
+  } catch (err) {
+    return `Erreur lors de la récupération des logs: ${err.message}`;
+  }
+}
+
+/**
+ * Lister tous les conteneurs
+ */
+async function listContainers() {
+  try {
+    const containers = await docker.listContainers({ all: true });
+    return containers.map((c) => ({
+      id: c.Id.substring(0, 12),
+      names: c.Names.map((n) => n.replace('/', '')),
+      state: c.State,
+      status: c.Status,
+      image: c.Image,
+      created: new Date(c.Created * 1000).toISOString(),
+    }));
+  } catch (err) {
+    return [];
+  }
+}
+
+/**
+ * Redéployer une application (docker compose build + up)
+ */
+function redeployApp(appConfig) {
+  return new Promise((resolve, reject) => {
+    const appDir = path.join(config.appsBasePath, appConfig.directory);
+    const cmd = `cd ${appDir} && docker compose build --no-cache && docker compose up -d`;
+
+    const startTime = Date.now();
+    const logLines = [];
+
+    logLines.push(`[${new Date().toISOString()}] Début du redéploiement de ${appConfig.name}`);
+    logLines.push(`[${new Date().toISOString()}] Répertoire: ${appDir}`);
+    logLines.push(`[${new Date().toISOString()}] Commande: ${cmd}`);
+
+    const process = exec(cmd, {
+      maxBuffer: 1024 * 1024 * 10, // 10MB
+      timeout: 300000, // 5 minutes
+    });
+
+    process.stdout.on('data', (data) => {
+      const lines = data.toString().split('\n').filter(Boolean);
+      lines.forEach((line) => {
+        logLines.push(`[${new Date().toISOString()}] ${line}`);
+      });
+    });
+
+    process.stderr.on('data', (data) => {
+      const lines = data.toString().split('\n').filter(Boolean);
+      lines.forEach((line) => {
+        logLines.push(`[${new Date().toISOString()}] ${line}`);
+      });
+    });
+
+    process.on('close', (code) => {
+      const duration = ((Date.now() - startTime) / 1000).toFixed(1);
+      if (code === 0) {
+        logLines.push(`[${new Date().toISOString()}] Redéploiement terminé avec succès en ${duration}s`);
+        resolve({ success: true, logs: logLines.join('\n'), duration });
+      } else {
+        logLines.push(`[${new Date().toISOString()}] Redéploiement échoué (code: ${code}) en ${duration}s`);
+        resolve({ success: false, logs: logLines.join('\n'), duration, exitCode: code });
+      }
+    });
+
+    process.on('error', (err) => {
+      logLines.push(`[${new Date().toISOString()}] Erreur: ${err.message}`);
+      resolve({ success: false, logs: logLines.join('\n'), error: err.message });
+    });
+  });
+}
+
+/**
+ * Pull le dernier code depuis Gitea
+ */
+function gitPull(appConfig) {
+  return new Promise((resolve, reject) => {
+    const srcDir = path.join(config.appsBasePath, appConfig.directory, 'src');
+    const cmd = `cd ${srcDir} && git pull origin main 2>&1 || git pull origin master 2>&1`;
+
+    exec(cmd, { timeout: 60000 }, (error, stdout, stderr) => {
+      if (error) {
+        resolve({ success: false, output: stderr || error.message });
+      } else {
+        resolve({ success: true, output: stdout });
+      }
+    });
+  });
+}
+
+
+
+/**
+ * Démarrer un conteneur Docker
+ */
+async function startContainer(containerName) {
+  try {
+    const container = docker.getContainer(containerName);
+    await container.start();
+    return { success: true, message: `Conteneur ${containerName} démarré` };
+  } catch (err) {
+    return { success: false, message: err.message };
+  }
+}
+
+/**
+ * Arrêter un conteneur Docker
+ */
+async function stopContainer(containerName) {
+  try {
+    const container = docker.getContainer(containerName);
+    await container.stop({ t: 10 });
+    return { success: true, message: `Conteneur ${containerName} arrêté` };
+  } catch (err) {
+    return { success: false, message: err.message };
+  }
+}
+
+/**
+ * Redémarrer un conteneur Docker
+ */
+async function restartContainer(containerName) {
+  try {
+    const container = docker.getContainer(containerName);
+    await container.restart({ t: 10 });
+    return { success: true, message: `Conteneur ${containerName} redémarré` };
+  } catch (err) {
+    return { success: false, message: err.message };
+  }
+}
+
+/**
+ * Récupérer les métriques système du serveur (CPU, RAM, disque, réseau)
+ */
+function getServerMetrics() {
+  return new Promise((resolve) => {
+    const { execSync } = require("child_process");
+    const fs = require("fs");
+    try {
+      // ===== Méthode 1 : Lire host-metrics.json généré par le script système de l'hôte =====
+      // Ce fichier est mis à jour toutes les 30s par /opt/manus-deploy/host-metrics.sh
+      // Il contient les vraies métriques de l'hôte LXC (pas du nœud physique)
+      const hostMetricsPath = '/opt/manus-deploy/host-metrics.json';
+      if (fs.existsSync(hostMetricsPath)) {
+        try {
+          const raw = fs.readFileSync(hostMetricsPath, 'utf8');
+          const hostMetrics = JSON.parse(raw);
+          // Vérifier que le fichier est récent (moins de 2 minutes)
+          const fileAge = Date.now() - new Date(hostMetrics.timestamp).getTime();
+          if (fileAge < 120000 && hostMetrics.memory && hostMetrics.memory.total > 0) {
+            return resolve({
+              ...hostMetrics,
+              timestamp: new Date().toISOString()
+            });
+          }
+        } catch(e) {}
+      }
+
+      // ===== Méthode 2 : Lecture directe de /proc (fallback) =====
+      // CPU : mesure via cgroup v2 usage_usec (méthode précise pour conteneur LXC)
+      // Fallback sur /proc/stat normalisé par nproc si cgroup v2 non disponible
+      let cpuUsage = 0;
+      try {
+        const ncpu = parseInt(execSync('nproc').toString().trim()) || 1;
+        const cgroupPath = '/sys/fs/cgroup/cpu.stat';
+        const readUsageUsec = () => {
+          const stat = fs.readFileSync(cgroupPath, 'utf8');
+          const m = stat.match(/^usage_usec\s+(\d+)/m);
+          return m ? parseInt(m[1]) : null;
+        };
+        const u1 = readUsageUsec();
+        if (u1 !== null) {
+          // Méthode cgroup v2 : mesure la consommation CPU réelle du conteneur
+          execSync('sleep 0.5');
+          const u2 = readUsageUsec();
+          // delta en microsecondes / (500ms * ncpu) = % CPU du conteneur
+          const deltaUs = u2 - u1;
+          cpuUsage = Math.min(100, Math.round(deltaUs / (500000 * ncpu) * 100));
+        } else {
+          // Fallback : /proc/stat normalisé par nproc
+          const parseCpuLine = (line) => line.trim().split(/\s+/).slice(1).map(Number);
+          const s1 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
+          execSync('sleep 0.3');
+          const s2 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
+          const idle1 = s1[3], total1 = s1.reduce((a,b)=>a+b,0);
+          const idle2 = s2[3], total2 = s2.reduce((a,b)=>a+b,0);
+          const dIdle = idle2 - idle1, dTotal = total2 - total1;
+          const rawCpu = dTotal > 0 ? (1 - dIdle / dTotal) * 100 : 0;
+          // Normaliser par nproc pour éviter l'effet nœud physique sur LXC
+          cpuUsage = Math.round(rawCpu / ncpu);
+        }
+      } catch(e) {}
+
+      // RAM : lecture robuste multi-source
+      // Priorité 1 : /host/proc/meminfo (hôte LXC monté via volume docker-compose)
+      // Priorité 2 : /proc/meminfo si MemTotal <= 64 Go (lxcfs ou VPS direct)
+      // Priorité 3 : Docker API MemTotal + ratio /proc/meminfo du nœud physique
+      let memTotal = 0;
+      let memFree = 0, memAvailable = 0, memUsed = 0, memBuffers = 0, memCached = 0;
+
+      // Fonction de lecture de meminfo depuis un chemin donné
+      const readMeminfo = (procPath) => {
+        const raw = fs.readFileSync(procPath + '/meminfo', 'utf8');
+        const map = {};
+        raw.split('\n').forEach(line => {
+          const idx = line.indexOf(':');
+          if (idx > 0) {
+            const key = line.substring(0, idx).trim();
+            const rest = line.substring(idx + 1).trim();
+            const val = parseInt(rest.split(' ')[0]);
+            if (Number.isFinite(val)) map[key] = val * 1024;
+          }
+        });
+        return map;
+      };
+
+      try {
+        let memMap = null;
+        let sourceLabel = '';
+
+        // Priorité 1 : /host/proc monté depuis l'hôte LXC
+        if (fs.existsSync('/host/proc/meminfo')) {
+          try {
+            const hostMap = readMeminfo('/host/proc');
+            if (hostMap['MemTotal'] > 0 && hostMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
+              memMap = hostMap;
+              sourceLabel = 'host/proc';
+            }
+          } catch(e) {}
+        }
+
+        // Priorité 2 : /proc direct si MemTotal <= 64 Go
+        if (!memMap) {
+          try {
+            const procMap = readMeminfo('/proc');
+            if (procMap['MemTotal'] > 0 && procMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
+              memMap = procMap;
+              sourceLabel = '/proc direct';
+            }
+          } catch(e) {}
+        }
+
+        // Priorité 3 : Docker API MemTotal + ratio du nœud physique
+        if (!memMap) {
+          try {
+            const dockerInfoRaw = execSync(
+              'curl -s --unix-socket /var/run/docker.sock http://localhost/info',
+              { timeout: 3000 }
+            ).toString();
+            const dockerInfo = JSON.parse(dockerInfoRaw);
+            const dockerMemTotal = dockerInfo.MemTotal || 0;
+            if (dockerMemTotal > 0) {
+              // Lire le ratio d'utilisation depuis /proc du nœud physique
+              const nodeMap = readMeminfo('/proc');
+              const nodeTotal = nodeMap['MemTotal'] || 1;
+              const nodeAvail = nodeMap['MemAvailable'] || 0;
+              const usageRatio = (nodeTotal - nodeAvail) / nodeTotal;
+              // Appliquer ce ratio à la vraie RAM du VPS
+              memTotal = dockerMemTotal;
+              memUsed = Math.round(memTotal * usageRatio);
+              memFree = memTotal - memUsed;
+              memAvailable = memFree;
+              sourceLabel = 'docker-api+ratio';
+            }
+          } catch(e) {}
+        }
+
+        // Calculer les valeurs finales si memMap disponible
+        if (memMap) {
+          memTotal     = memMap['MemTotal'] || 0;
+          memFree      = memMap['MemFree'] || 0;
+          memAvailable = memMap['MemAvailable'] || 0;
+          memBuffers   = memMap['Buffers'] || 0;
+          const sReclaimable = memMap['SReclaimable'] || 0;
+          const shmem        = memMap['Shmem'] || 0;
+          memCached    = (memMap['Cached'] || 0) + (sReclaimable > shmem ? sReclaimable - shmem : 0);
+          // Utiliser MemAvailable comme référence car elle inclut les caches libérables
+          // Identique à ce que `free` affiche dans la colonne 'disponible'
+          memUsed = memTotal - memAvailable;
+          if (memUsed < 0) memUsed = 0;
+        }
+      } catch(e) {
+        // Fallback ultime
+        try {
+          const m = readMeminfo('/proc');
+          memTotal = m['MemTotal'] || 0;
+          memFree  = m['MemFree'] || 0;
+          memAvailable = m['MemAvailable'] || 0;
+          memUsed = memTotal - memAvailable;
+        } catch(e2) {}
+      }
+
+      // Disque : df sur /opt/manus-deploy (point de montage de l'hôte LXC)
+      // Utiliser /opt/manus-deploy car c'est un volume monté depuis l'hôte
+      let diskTotal = 0, diskUsed = 0, diskFree = 0;
+      try {
+        const diskPath = fs.existsSync('/opt/manus-deploy') ? '/opt/manus-deploy' : '/';
+        const diskRaw = execSync('df -B1 ' + diskPath + ' | tail -1').toString().trim().split(/\s+/);
+        diskTotal = parseInt(diskRaw[1]);
+        diskUsed  = parseInt(diskRaw[2]);
+        diskFree  = parseInt(diskRaw[3]);
+      } catch(e) {}
+
+      // Uptime et load : utiliser /host/proc si disponible (hôte LXC réel)
+      const procBase = fs.existsSync('/host/proc/uptime') ? '/host/proc' : '/proc';
+      const uptimeRaw = fs.readFileSync(procBase + '/uptime', 'utf8').trim().split(' ');
+      const uptimeSeconds = parseFloat(uptimeRaw[0]);
+      const loadRaw = fs.readFileSync(procBase + '/loadavg', 'utf8').trim().split(' ');
+      const load1 = parseFloat(loadRaw[0]);
+      const load5 = parseFloat(loadRaw[1]);
+      const load15 = parseFloat(loadRaw[2]);
+
+      // Réseau
+      let netRx = 0, netTx = 0;
+      try {
+        const netDevPath = fs.existsSync('/host/proc/net/dev') ? '/host/proc/net/dev' : '/proc/net/dev';
+        const netDev = fs.readFileSync(netDevPath, 'utf8');
+        const netLine = netDev.split('\n').find(l => /eth0|ens|enp/.test(l));
+        if (netLine) {
+          const parts = netLine.trim().split(/\s+/);
+          netRx = parseInt(parts[1]) || 0;
+          netTx = parseInt(parts[9]) || 0;
+        }
+      } catch(e) {}
+
+      resolve({
+        cpu: { usage: cpuUsage },
+        memory: {
+          total: memTotal,
+          used: memUsed,
+          free: memFree,
+          available: memAvailable,
+          buffers: memBuffers,
+          cached: memCached,
+          // usagePercent = RAM applicative réelle (hors cache disque, identique à `free`)
+          usagePercent: Math.round((memUsed / memTotal) * 100)
+        },
+        disk: {
+          total: diskTotal,
+          used: diskUsed,
+          free: diskFree,
+          usagePercent: Math.round((diskUsed / diskTotal) * 100)
+        },
+        uptime: uptimeSeconds,
+        load: { load1, load5, load15 },
+        network: { rx: netRx, tx: netTx },
+        timestamp: new Date().toISOString()
+      });
+    } catch (err) {
+      resolve({ error: err.message });
+    }
+  });
+}
+module.exports = {
+  docker,
+  getContainerInfo,
+  getContainerLogs,
+  listContainers,
+  redeployApp,
+  gitPull,
+  startContainer,
+  stopContainer,
+  restartContainer,
+  getServerMetrics,
+};

backend/src/gitea.js

@@ -0,0 +1,119 @@
+const axios = require('axios');
+const https = require('https');
+const config = require('./config');
+
+// Créer un client axios pour Gitea (ignorer les certificats auto-signés si nécessaire)
+// Utiliser le token API si disponible, sinon auth basique
+const giteaClientHeaders = config.gitea.token
+  ? { 'Authorization': `token ${config.gitea.token}` }
+  : {};
+
+const giteaClient = axios.create({
+  baseURL: `${config.gitea.url}/api/v1`,
+  ...(config.gitea.token
+    ? { headers: giteaClientHeaders }
+    : { auth: { username: config.gitea.username, password: config.gitea.password } }
+  ),
+  httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+  timeout: 10000,
+});
+
+/**
+ * Récupérer les informations d'un dépôt
+ */
+async function getRepo(owner, repo) {
+  try {
+    const response = await giteaClient.get(`/repos/${owner}/${repo}`);
+    return response.data;
+  } catch (err) {
+    console.error(`Erreur Gitea getRepo ${owner}/${repo}:`, err.message);
+    return null;
+  }
+}
+
+/**
+ * Récupérer les derniers commits d'un dépôt
+ */
+async function getCommits(owner, repo, limit = 10) {
+  try {
+    const response = await giteaClient.get(`/repos/${owner}/${repo}/commits`, {
+      params: { limit, page: 1 },
+    });
+    return response.data.map((c) => ({
+      sha: c.sha,
+      shortSha: c.sha.substring(0, 7),
+      message: c.commit.message,
+      author: c.commit.author.name,
+      date: c.commit.author.date,
+      url: c.html_url,
+    }));
+  } catch (err) {
+    console.error(`Erreur Gitea getCommits ${owner}/${repo}:`, err.message);
+    return [];
+  }
+}
+
+/**
+ * Récupérer les branches d'un dépôt
+ */
+async function getBranches(owner, repo) {
+  try {
+    const response = await giteaClient.get(`/repos/${owner}/${repo}/branches`);
+    return response.data.map((b) => ({
+      name: b.name,
+      commit: b.commit.id.substring(0, 7),
+      commitMessage: b.commit.message,
+    }));
+  } catch (err) {
+    console.error(`Erreur Gitea getBranches ${owner}/${repo}:`, err.message);
+    return [];
+  }
+}
+
+/**
+ * Récupérer tous les dépôts (avec retry en cas d'erreur DNS)
+ */
+async function listRepos(retries = 3) {
+  for (let i = 0; i < retries; i++) {
+    try {
+      const response = await giteaClient.get('/repos/search', {
+        params: { limit: 50 },
+      });
+      return response.data.data || [];
+    } catch (err) {
+      console.error(`Erreur Gitea listRepos (tentative ${i + 1}/${retries}):`, err.message);
+      if (i < retries - 1) {
+        await new Promise((r) => setTimeout(r, 2000));
+      }
+    }
+  }
+  return [];
+}
+
+/**
+ * Créer un nouveau dépôt
+ */
+async function createRepo(name, description, isPrivate = true) {
+  try {
+    const response = await giteaClient.post('/user/repos', {
+      name,
+      description,
+      private: isPrivate,
+      auto_init: true,
+      default_branch: 'main',
+    });
+    return response.data;
+  } catch (err) {
+    console.error(`Erreur Gitea createRepo ${name}:`, err.message);
+    throw err;
+  }
+}
+
+module.exports = {
+  getRepo,
+  getCommits,
+  getBranches,
+  listRepos,
+  createRepo,
+  giteaClient,
+};

backend/src/healthcheck.js

@@ -0,0 +1,188 @@
+const axios = require('axios');
+const https = require('https');
+const config = require('./config');
+const { getContainerInfo } = require('./docker');
+
+// Store pour les statuts des apps
+const appStatuses = new Map();
+
+// Store pour les logs de déploiement
+const deploymentLogs = [];
+const MAX_DEPLOYMENT_LOGS = 50;
+
+// Store pour les commits Gitea
+const giteaCommits = new Map();
+
+// Agent HTTPS qui ignore les certificats auto-signés
+const httpsAgent = new https.Agent({ rejectUnauthorized: false });
+
+// Au démarrage : marquer tous les déploiements "running" orphelins comme "failed"
+// (ils ont été interrompus lors du dernier redémarrage du Dashboard)
+function cleanupOrphanedDeployments() {
+  const orphans = deploymentLogs.filter((l) => l.status === 'running');
+  if (orphans.length > 0) {
+    console.log(`[healthcheck] Nettoyage de ${orphans.length} déploiement(s) orphelin(s) au démarrage`);
+    orphans.forEach((l) => {
+      l.status = 'failed';
+      l.message = 'Déploiement interrompu (redémarrage du Dashboard)';
+      l.endedAt = new Date().toISOString();
+    });
+  }
+}
+
+/**
+ * Vérifier la santé d'une URL
+ */
+async function checkUrl(url) {
+  try {
+    const start = Date.now();
+    const response = await axios.get(url, {
+      timeout: 10000,
+      httpsAgent,
+      validateStatus: (status) => status < 500,
+    });
+    const responseTime = Date.now() - start;
+    return {
+      online: true,
+      statusCode: response.status,
+      responseTime,
+    };
+  } catch (err) {
+    return {
+      online: false,
+      statusCode: null,
+      responseTime: null,
+      error: err.message,
+    };
+  }
+}
+
+/**
+ * Vérifier la santé d'une application
+ */
+async function checkApp(appConfig) {
+  const result = {
+    id: appConfig.id,
+    name: appConfig.name,
+    description: appConfig.description,
+    urls: appConfig.urls,
+    containerName: appConfig.containerName,
+    lastCheck: new Date().toISOString(),
+    status: 'unknown',
+    container: null,
+    health: {
+      recette: null,
+      prod: null,
+    },
+  };
+
+  // Vérifier le conteneur Docker
+  const containerInfo = await getContainerInfo(appConfig.containerName);
+  result.container = containerInfo;
+
+  // Health check recette
+  if (appConfig.urls.recette) {
+    result.health.recette = await checkUrl(appConfig.urls.recette);
+  }
+
+  // Health check prod
+  if (appConfig.urls.prod) {
+    result.health.prod = await checkUrl(appConfig.urls.prod);
+  }
+
+  // Déterminer le statut global
+  if (!containerInfo || !containerInfo.running) {
+    result.status = 'offline';
+  } else if (result.health.recette && result.health.recette.online) {
+    result.status = 'online';
+  } else if (containerInfo.running) {
+    result.status = 'error';
+  } else {
+    result.status = 'offline';
+  }
+
+  // Stocker le résultat
+  appStatuses.set(appConfig.id, result);
+
+  return result;
+}
+
+/**
+ * Lancer les health checks pour toutes les apps
+ */
+async function checkAllApps() {
+  const results = [];
+  for (const app of config.apps) {
+    const result = await checkApp(app);
+    results.push(result);
+  }
+  return results;
+}
+
+/**
+ * Ajouter un log de déploiement (retourne l'entrée créée avec son id)
+ */
+function addDeploymentLog(appId, log) {
+  const entry = {
+    id: Date.now().toString(),
+    appId,
+    timestamp: new Date().toISOString(),
+    ...log,
+  };
+  deploymentLogs.unshift(entry);
+  if (deploymentLogs.length > MAX_DEPLOYMENT_LOGS) {
+    deploymentLogs.pop();
+  }
+  return entry;
+}
+
+/**
+ * Mettre à jour un log de déploiement existant par son id
+ * Permet de passer de "running" à "success" ou "failed" sans créer une nouvelle entrée
+ */
+function updateDeploymentLog(entryId, updates) {
+  const entry = deploymentLogs.find((l) => l.id === entryId);
+  if (entry) {
+    Object.assign(entry, updates, { updatedAt: new Date().toISOString() });
+    return entry;
+  }
+  return null;
+}
+
+/**
+ * Récupérer les logs de déploiement
+ */
+function getDeploymentLogs(appId = null) {
+  if (appId) {
+    return deploymentLogs.filter((l) => l.appId === appId);
+  }
+  return deploymentLogs;
+}
+
+/**
+ * Récupérer le statut d'une app
+ */
+function getAppStatus(appId) {
+  return appStatuses.get(appId) || null;
+}
+
+/**
+ * Récupérer tous les statuts
+ */
+function getAllStatuses() {
+  return Array.from(appStatuses.values());
+}
+
+module.exports = {
+  checkUrl,
+  checkApp,
+  checkAllApps,
+  addDeploymentLog,
+  updateDeploymentLog,
+  getDeploymentLogs,
+  getAppStatus,
+  getAllStatuses,
+  cleanupOrphanedDeployments,
+  appStatuses,
+  giteaCommits,
+};

backend/src/index.js

@@ -0,0 +1,136 @@
+const express = require('express');
+const cors = require('cors');
+const helmet = require('helmet');
+const cookieParser = require('cookie-parser');
+const morgan = require('morgan');
+const path = require('path');
+const cron = require('node-cron');
+const http = require('http');
+const WebSocket = require('ws');
+
+const config = require('./config');
+const { initAuth } = require('./auth');
+const routes = require('./routes');
+const webhookRoutes = require('./webhook');
+const { checkAllApps, getAllStatuses } = require('./healthcheck');
+const { getCommits } = require('./gitea');
+const { initDynamicApps } = require('./app-creator');
+const { initSSHWebSocket } = require('./ssh');
+
+const app = express();
+const server = http.createServer(app);
+
+// WebSocket server pour les mises à jour en temps réel
+const wss = new WebSocket.Server({ server, path: '/ws' });
+initSSHWebSocket(server);
+
+// Middleware
+app.use(helmet({
+  contentSecurityPolicy: false,
+  crossOriginEmbedderPolicy: false,
+}));
+app.use(cors({
+  origin: true,
+  credentials: true,
+}));
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+app.use(cookieParser());
+app.use(morgan('combined'));
+
+// Route webhook montée en premier avec raw body pour la vérification HMAC
+app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' }), (req, res, next) => {
+  if (req.body && Buffer.isBuffer(req.body)) {
+    req.rawBody = req.body;
+    try { req.body = JSON.parse(req.body.toString()); } catch(e) { req.body = {}; }
+  }
+  next();
+}, webhookRoutes);
+// API routes
+app.use('/api', routes);
+
+// Servir le frontend en production
+const frontendPath = path.join(__dirname, '../../frontend/dist');
+app.use(express.static(frontendPath));
+
+// SPA fallback
+app.get('*', (req, res) => {
+  if (!req.path.startsWith('/api') && !req.path.startsWith('/ws')) {
+    res.sendFile(path.join(frontendPath, 'index.html'));
+  }
+});
+
+// Broadcast WebSocket message
+global.wsBroadcast = broadcast;
+function broadcast(data) {
+  const message = JSON.stringify(data);
+  wss.clients.forEach((client) => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(message);
+    }
+  });
+}
+
+// Health check périodique
+async function runHealthChecks() {
+  try {
+    const results = await checkAllApps();
+    broadcast({ type: 'health_update', data: results });
+
+    // Vérifier les nouveaux commits Gitea
+    for (const appConfig of config.apps) {
+      try {
+        const commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 5);
+        if (commits.length > 0) {
+          broadcast({
+            type: 'gitea_commits',
+            data: { appId: appConfig.id, commits },
+          });
+        }
+      } catch (e) {
+        // Ignorer les erreurs Gitea
+      }
+    }
+  } catch (err) {
+    console.error('Erreur health check:', err.message);
+  }
+}
+
+// Démarrage
+async function start() {
+  await initAuth();
+
+  // Charger les applications dynamiques
+  initDynamicApps();
+
+  // Premier health check
+  setTimeout(runHealthChecks, 2000);
+
+  // Health check toutes les 30 secondes
+  setInterval(runHealthChecks, config.healthCheckInterval);
+
+  server.listen(config.port, '0.0.0.0', () => {
+    console.log(`Manus Dashboard Backend démarré sur le port ${config.port}`);
+    console.log(`Frontend servi depuis: ${frontendPath}`);
+  });
+}
+
+// WebSocket connection handler
+wss.on('connection', (ws) => {
+  console.log('Nouvelle connexion WebSocket');
+
+  // Envoyer les statuts actuels
+  const statuses = getAllStatuses();
+  if (statuses.length > 0) {
+    ws.send(JSON.stringify({ type: 'health_update', data: statuses }));
+  }
+
+  ws.on('close', () => {
+    console.log('Connexion WebSocket fermée');
+  });
+});
+
+start().catch((err) => {
+  console.error('Erreur au démarrage:', err);
+  process.exit(1);
+});

backend/src/routes.js

@@ -0,0 +1,601 @@
+const express = require('express');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const { authenticate, authMiddleware } = require('./auth');
+const { docker, getContainerInfo, getContainerLogs, listContainers, redeployApp, gitPull, startContainer, stopContainer, restartContainer, getServerMetrics } = require('./docker');
+const { getRepo, getCommits, getBranches, listRepos } = require('./gitea');
+const { checkAllApps, addDeploymentLog, updateDeploymentLog, getDeploymentLogs, getAllStatuses, getAppStatus, cleanupOrphanedDeployments } = require('./healthcheck');
+const { createApplication, getAvailableStacks, initDynamicApps } = require('./app-creator');
+const config = require('./config');
+
+// Nettoyer les déploiements orphelins au démarrage (entrées "running" restantes d'un crash précédent)
+cleanupOrphanedDeployments();
+
+const router = express.Router();
+
+// Configuration multer pour l'upload de fichiers ZIP
+const uploadDir = '/tmp/dashboard-uploads';
+if (!fs.existsSync(uploadDir)) {
+  fs.mkdirSync(uploadDir, { recursive: true });
+}
+
+const upload = multer({
+  dest: uploadDir,
+  limits: { fileSize: 500 * 1024 * 1024 }, // 500MB max
+  fileFilter: (req, file, cb) => {
+    if (file.mimetype === 'application/zip' ||
+        file.mimetype === 'application/x-zip-compressed' ||
+        file.mimetype === 'application/octet-stream' ||
+        file.originalname.endsWith('.zip')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Seuls les fichiers ZIP sont acceptés'), false);
+    }
+  },
+});
+
+// ============ AUTH ROUTES ============
+
+router.post('/auth/login', async (req, res) => {
+  try {
+    const { username, password } = req.body;
+    if (!username || !password) {
+      return res.status(400).json({ error: 'Nom d\'utilisateur et mot de passe requis' });
+    }
+    const token = await authenticate(username, password);
+    if (!token) {
+      return res.status(401).json({ error: 'Identifiants invalides' });
+    }
+    // Set cookie
+    res.cookie('dashboard_token', token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'strict',
+      maxAge: 24 * 60 * 60 * 1000, // 24h
+    });
+    res.json({ token, username });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/auth/logout', (req, res) => {
+  res.clearCookie('dashboard_token');
+  res.json({ message: 'Déconnecté' });
+});
+
+router.get('/auth/me', authMiddleware, (req, res) => {
+  res.json({ username: req.user.username, role: req.user.role });
+});
+
+// ============ APPS ROUTES ============
+
+// Liste des applications avec leur statut
+router.get('/apps', authMiddleware, async (req, res) => {
+  try {
+    const statuses = getAllStatuses();
+    if (statuses.length === 0) {
+      // Première requête, lancer un check
+      const results = await checkAllApps();
+      return res.json(results);
+    }
+    res.json(statuses);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Détail d'une application
+router.get('/apps/:id', authMiddleware, async (req, res) => {
+  try {
+    const appConfig = config.apps.find((a) => a.id === req.params.id);
+    if (!appConfig) {
+      return res.status(404).json({ error: 'Application non trouvée' });
+    }
+
+    const status = getAppStatus(appConfig.id);
+    const containerInfo = await getContainerInfo(appConfig.containerName);
+
+    // Récupérer les infos Gitea
+    let giteaInfo = null;
+    let commits = [];
+    try {
+      giteaInfo = await getRepo(appConfig.giteaOwner, appConfig.giteaRepo);
+      commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 10);
+    } catch (e) {
+      // Gitea peut ne pas être disponible
+    }
+
+    res.json({
+      ...status,
+      container: containerInfo,
+      gitea: giteaInfo
+        ? {
+            fullName: giteaInfo.full_name,
+            description: giteaInfo.description,
+            defaultBranch: giteaInfo.default_branch,
+            updatedAt: giteaInfo.updated_at,
+            cloneUrl: giteaInfo.clone_url,
+            htmlUrl: giteaInfo.html_url,
+          }
+        : null,
+      commits,
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Forcer un health check
+router.post('/apps/:id/check', authMiddleware, async (req, res) => {
+  try {
+    const results = await checkAllApps();
+    const result = results.find((r) => r.id === req.params.id);
+    res.json(result || { error: 'Application non trouvée' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Verrou anti-concurrence par application
+const deployLocks = new Map();
+const DEPLOY_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes max
+
+// Nettoyage automatique des verrous bloqués toutes les minutes
+setInterval(() => {
+  const now = Date.now();
+  for (const [appId, lockTime] of deployLocks.entries()) {
+    if (now - lockTime > DEPLOY_TIMEOUT_MS) {
+      deployLocks.delete(appId);
+      const logs = getDeploymentLogs(appId);
+      logs.filter(l => l.status === 'running').forEach(l => {
+        l.status = 'failed';
+        l.message = 'Déploiement interrompu automatiquement (timeout 10 min)';
+      });
+    }
+  }
+}, 60 * 1000);
+
+// Redéployer une application
+router.post('/apps/:id/deploy', authMiddleware, async (req, res) => {
+  try {
+    const appConfig = config.apps.find((a) => a.id === req.params.id);
+    if (!appConfig) {
+      return res.status(404).json({ error: 'Application non trouvée' });
+    }
+
+    // Vérifier si un déploiement est déjà en cours pour cette app
+    if (deployLocks.has(appConfig.id)) {
+      const lockAge = Math.round((Date.now() - deployLocks.get(appConfig.id)) / 1000);
+      return res.status(409).json({
+        error: `Un déploiement est déjà en cours pour ${appConfig.name} (depuis ${lockAge}s)`,
+        status: 'running'
+      });
+    }
+
+    // Poser le verrou
+    deployLocks.set(appConfig.id, Date.now());
+
+    // Ajouter un log de début et récupérer son id pour le mettre à jour plus tard
+    const deployEntry = addDeploymentLog(appConfig.id, {
+      status: 'running',
+      message: `Déploiement de ${appConfig.name} en cours...`,
+      logs: '',
+      user: req.user.username,
+    });
+
+    // Lancer le redéploiement en arrière-plan
+    res.json({ message: `Redéploiement de ${appConfig.name} lancé`, status: 'running' });
+
+    // Timeout de sécurité : si le déploiement dépasse 10 min, on le marque failed
+    const timeoutHandle = setTimeout(() => {
+      if (deployLocks.has(appConfig.id)) {
+        deployLocks.delete(appConfig.id);
+        updateDeploymentLog(deployEntry.id, {
+          status: 'failed',
+          message: `Déploiement de ${appConfig.name} interrompu (timeout 10 min)`,
+        });
+      }
+    }, DEPLOY_TIMEOUT_MS);
+
+    try {
+      // Exécuter le redéploiement
+      const result = await redeployApp(appConfig);
+      clearTimeout(timeoutHandle);
+
+      // Mettre à jour l'entrée existante (pas de doublon "running" + "success")
+      updateDeploymentLog(deployEntry.id, {
+        status: result.success ? 'success' : 'failed',
+        message: result.success
+          ? `Redéploiement de ${appConfig.name} réussi en ${result.duration}s`
+          : `Redéploiement de ${appConfig.name} échoué`,
+        logs: result.logs,
+        duration: result.duration,
+      });
+
+      // Relancer un health check après le déploiement
+      setTimeout(() => checkAllApps(), 5000);
+    } finally {
+      // Toujours libérer le verrou
+      deployLocks.delete(appConfig.id);
+    }
+  } catch (err) {
+    deployLocks.delete(req.params.id);
+    addDeploymentLog(req.params.id, {
+      status: 'failed',
+      message: `Erreur: ${err.message}`,
+      logs: '',
+      user: req.user.username,
+    });
+  }
+});
+
+// Logs d'un conteneur
+router.get('/apps/:id/logs', authMiddleware, async (req, res) => {
+  try {
+    const appConfig = config.apps.find((a) => a.id === req.params.id);
+    if (!appConfig) {
+      return res.status(404).json({ error: 'Application non trouvée' });
+    }
+    const tail = parseInt(req.query.tail) || 100;
+    const logs = await getContainerLogs(appConfig.containerName, tail);
+    res.json({ logs });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ CREATE APP ROUTE ============
+
+// Récupérer les stacks disponibles
+router.get('/apps-config/stacks', authMiddleware, (req, res) => {
+  res.json(getAvailableStacks());
+});
+
+// Créer une nouvelle application
+router.post('/apps-config/create', authMiddleware, upload.single('zipFile'), async (req, res) => {
+  try {
+    const { name, description, subdomain, stack, port, needsDb, dbType, sourceType, giteaRepoUrl } = req.body;
+
+    // Validation
+    if (!name || !subdomain || !stack || !sourceType) {
+      return res.status(400).json({
+        error: 'Champs requis manquants: name, subdomain, stack, sourceType',
+      });
+    }
+
+    // Vérifier que le subdomain est valide
+    const subdomainRegex = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/;
+    if (!subdomainRegex.test(subdomain)) {
+      return res.status(400).json({
+        error: 'Le sous-domaine ne peut contenir que des lettres minuscules, chiffres et tirets',
+      });
+    }
+
+    // Vérifier que l'app n'existe pas déjà
+    const existingApp = config.apps.find((a) => a.id === subdomain);
+    if (existingApp) {
+      return res.status(409).json({
+        error: `Une application avec l'identifiant "${subdomain}" existe déjà`,
+      });
+    }
+
+    // Vérifier le fichier ZIP si sourceType === 'zip'
+    if (sourceType === 'zip' && !req.file) {
+      return res.status(400).json({
+        error: 'Un fichier ZIP est requis pour le type de source "zip"',
+      });
+    }
+
+    // Vérifier l'URL Gitea si sourceType === 'gitea'
+    if (sourceType === 'gitea' && !giteaRepoUrl) {
+      return res.status(400).json({
+        error: 'L\'URL du dépôt Gitea est requise pour le type de source "gitea"',
+      });
+    }
+
+    // Log de début de création et récupérer l'id pour mise à jour ultérieure
+    const logLines = [];
+    const createEntry = addDeploymentLog(subdomain, {
+      status: 'running',
+      message: `Création de l'application ${name} en cours...`,
+      logs: '',
+      user: req.user.username,
+    });
+
+    // Répondre immédiatement
+    res.json({
+      message: `Création de l'application ${name} lancée`,
+      status: 'running',
+      appId: subdomain,
+    });
+
+    // Lancer la création en arrière-plan
+    try {
+      const result = await createApplication(
+        {
+          name,
+          description,
+          subdomain,
+          stack,
+          port: port ? parseInt(port) : null,
+          needsDb: needsDb === 'true' || needsDb === true,
+          dbType: dbType || 'mysql',
+          sourceType,
+          giteaRepoUrl,
+          zipFilePath: req.file ? req.file.path : null,
+        },
+        (line) => logLines.push(line)
+      );
+
+      updateDeploymentLog(createEntry.id, {
+        status: 'success',
+        message: `Application ${name} créée et déployée avec succès`,
+        logs: logLines.join('\n'),
+      });
+
+      // Relancer un health check
+      setTimeout(() => checkAllApps(), 10000);
+    } catch (createErr) {
+      updateDeploymentLog(createEntry.id, {
+        status: 'failed',
+        message: `Création de ${name} échouée: ${createErr.message}`,
+        logs: logLines.join('\n'),
+      });
+    }
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ DEPLOYMENT LOGS ============
+
+router.get('/deployments', authMiddleware, (req, res) => {
+  const appId = req.query.appId || null;
+  res.json(getDeploymentLogs(appId));
+});
+
+// ============ GITEA ROUTES ============
+
+router.get('/gitea/repos', authMiddleware, async (req, res) => {
+  try {
+    const repos = await listRepos();
+    res.json(
+      repos.map((r) => ({
+        id: r.id,
+        name: r.name,
+        fullName: r.full_name,
+        description: r.description,
+        private: r.private,
+        htmlUrl: r.html_url,
+        cloneUrl: r.clone_url,
+        updatedAt: r.updated_at,
+        language: r.language,
+        size: r.size,
+      }))
+    );
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.get('/gitea/repos/:owner/:repo/commits', authMiddleware, async (req, res) => {
+  try {
+    const commits = await getCommits(req.params.owner, req.params.repo, 20);
+    res.json(commits);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.get('/gitea/repos/:owner/:repo/branches', authMiddleware, async (req, res) => {
+  try {
+    const branches = await getBranches(req.params.owner, req.params.repo);
+    res.json(branches);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ PUBLIC STATUS ROUTE (sans authentification) ============
+// Utilisé par le portail applicatif pour griser les tuiles des apps arrêtées
+router.get('/public/status', async (req, res) => {
+  try {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+    const statuses = getAllStatuses();
+    const publicStatus = statuses.map((app) => ({
+      id: app.id,
+      name: app.name,
+      status: app.status, // 'online' | 'offline' | 'error' | 'unknown'
+      containerRunning: app.container ? app.container.running : false,
+    }));
+    res.json(publicStatus);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ PUBLIC APPS ROUTE (sans authentification) ============
+// Utilisé par le portail applicatif pour construire les tuiles dynamiquement
+// Ne bloque jamais : retourne les apps avec status 'unknown' si les health checks ne sont pas encore disponibles
+router.get('/public/apps', (req, res) => {
+  try {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+    // getAllStatuses() retourne un tableau vide si aucun check n'a encore été effectué
+    // On ne déclenche PAS checkAllApps() ici pour éviter de bloquer la réponse
+    const statuses = getAllStatuses();
+    const publicApps = config.apps
+      .filter((a) => a.category !== 'INFRA') // Exclure les apps infra (portail, dashboard)
+      .map((a) => {
+        const status = statuses.find((s) => s.id === a.id);
+        return {
+          id: a.id,
+          name: a.name,
+          category: a.category || 'SANTINOVA',
+          image: a.image || ('images/' + a.id + '.png'),
+          urls: a.urls || {},
+          status: status ? status.status : 'unknown',
+          containerRunning: status && status.container ? status.container.running : false,
+        };
+      });
+    res.json(publicApps);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ DOCKER ROUTES ============
+
+router.get('/docker/containers', authMiddleware, async (req, res) => {
+  try {
+    const containers = await listContainers();
+    res.json(containers);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ SYSTEM INFO ============
+
+router.get('/system/info', authMiddleware, async (req, res) => {
+  try {
+    const containers = await listContainers();
+    res.json({
+      totalApps: config.apps.length,
+      totalContainers: containers.length,
+      runningContainers: containers.filter((c) => c.state === 'running').length,
+      giteaUrl: config.gitea.url,
+      serverTime: new Date().toISOString(),
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+
+// ============ CONTAINER CONTROL (start/stop/restart) ============
+router.post('/apps/:id/start', authMiddleware, async (req, res) => {
+  try {
+    const app = config.apps.find((a) => a.id === req.params.id);
+    if (!app) return res.status(404).json({ error: 'Application non trouvée' });
+    const containerName = app.containerName || app.id;
+    const result = await startContainer(containerName);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/apps/:id/stop', authMiddleware, async (req, res) => {
+  try {
+    const app = config.apps.find((a) => a.id === req.params.id);
+    if (!app) return res.status(404).json({ error: 'Application non trouvée' });
+    const containerName = app.containerName || app.id;
+    const result = await stopContainer(containerName);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/apps/:id/restart', authMiddleware, async (req, res) => {
+  try {
+    const app = config.apps.find((a) => a.id === req.params.id);
+    if (!app) return res.status(404).json({ error: 'Application non trouvée' });
+    const containerName = app.containerName || app.id;
+    const result = await restartContainer(containerName);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============ SERVER METRICS ============
+router.get('/system/metrics', authMiddleware, async (req, res) => {
+  try {
+    const metrics = await getServerMetrics();
+    res.json(metrics);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+module.exports = router;
+
+// ===== INVENTAIRE DES APPLICATIONS =====
+const { exec } = require('child_process');
+const GITEA_RECETTE_INTERNAL = process.env.GITEA_RECETTE_URL || 'http://gitea:3000';
+const GITEA_RECETTE_PUBLIC = process.env.GITEA_RECETTE_PUBLIC_URL || 'https://git.recette.santinova-soft.org';
+const GITEA_PROD_EXTERNAL = 'https://git.santinova-soft.org';
+const GITEA_USER_INV = process.env.GITEA_USERNAME || 'manus-admin';
+const GITEA_PASS_REC = process.env.GITEA_PASSWORD || 'Itinova69!';
+const GITEA_PASS_PRD = process.env.GITEA_PASSWORD_PROD || 'ManusGitea2026!';
+const GITEA_TOKEN_REC = process.env.GITEA_RECETTE_TOKEN || process.env.GITEA_TOKEN || null;
+
+// INVENTORY_APPS est généré dynamiquement depuis config.apps (lui-même alimenté par la découverte des app.json)
+function getInventoryApps() {
+  return config.apps.map((a) => ({
+    id: a.id,
+    name: a.name,
+    repoName: a.giteaRepo || a.id,
+  }));
+}
+
+function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl, token) {
+  return new Promise((resolve) => {
+    const authHeader = token
+      ? `-H "Authorization: token ${token}"`
+      : `-u "${GITEA_USER_INV}:${pass}"`;
+    const cmd = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}"`;
+    exec(cmd, { timeout: 7000 }, (err, stdout) => {
+      if (err || !stdout) return resolve({ present: false, url: null, version: null });
+      try {
+        const data = JSON.parse(stdout);
+        if (!data.id) return resolve({ present: false, url: null, version: null });
+        // Récupérer le dernier commit
+        const cmd2 = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}/commits?limit=1"`;
+        exec(cmd2, { timeout: 7000 }, (err2, stdout2) => {
+          let version = null;
+          try {
+            const commits = JSON.parse(stdout2 || '[]');
+            if (commits.length > 0) {
+              const c = commits[0];
+              const sha = c.sha ? c.sha.substring(0, 7) : null;
+              const date = c.commit && c.commit.author && c.commit.author.date
+                ? new Date(c.commit.author.date).toLocaleDateString('fr-FR') : null;
+              version = sha && date ? `${sha} (${date})` : sha;
+            }
+          } catch(e) {}
+          const displayUrl = publicBaseUrl || baseUrl;
+          resolve({ present: true, url: `${displayUrl}/${owner}/${repo}`, version });
+        });
+      } catch(e) {
+        resolve({ present: false, url: null, version: null });
+      }
+    });
+  });
+}
+
+router.get('/inventory', authMiddleware, async (req, res) => {
+  try {
+    const owner = GITEA_USER_INV;
+    const INVENTORY_APPS = getInventoryApps();
+    const results = await Promise.all(
+      INVENTORY_APPS.map(async (app) => {
+        const [repoRecette, repoProd] = await Promise.all([
+          curlGitea(GITEA_RECETTE_INTERNAL, owner, app.repoName, GITEA_PASS_REC, GITEA_RECETTE_PUBLIC, GITEA_TOKEN_REC),
+          curlGitea(GITEA_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD),
+        ]);
+        return { ...app, repoRecette, repoProd };
+      })
+    );
+    res.json(results);
+  } catch (err) {
+    console.error('Erreur /inventory:', err.message);
+    res.status(500).json({ error: err.message });
+  }
+});
+;

backend/src/ssh.js

@@ -0,0 +1,179 @@
+/**
+ * Module SSH Terminal - Gestion des connexions SSH via WebSocket
+ * Utilise la bibliothèque ssh2 pour établir des connexions SSH
+ */
+const { Client } = require('ssh2');
+const WebSocket = require('ws');
+const jwt = require('jsonwebtoken');
+const config = require('./config');
+
+/**
+ * Initialise le serveur WebSocket SSH sur /ws-ssh
+ * @param {http.Server} server - Le serveur HTTP Express
+ */
+function initSSHWebSocket(server) {
+  const wssSsh = new WebSocket.Server({ server, path: '/ws-ssh' });
+
+  wssSsh.on('connection', (ws, req) => {
+    // Vérifier l'authentification via le token dans l'URL
+    const url = new URL(req.url, 'http://localhost');
+    const token = url.searchParams.get('token');
+
+    if (!token) {
+      ws.send(JSON.stringify({ type: 'error', message: 'Token manquant' }));
+      ws.close();
+      return;
+    }
+
+    try {
+      jwt.verify(token, config.jwtSecret);
+    } catch (err) {
+      ws.send(JSON.stringify({ type: 'error', message: 'Token invalide' }));
+      ws.close();
+      return;
+    }
+
+    console.log('Nouvelle connexion WebSocket SSH');
+
+    let sshClient = null;
+    let sshStream = null;
+    let connected = false;
+
+    ws.on('message', (data) => {
+      try {
+        const msg = JSON.parse(data.toString());
+
+        switch (msg.type) {
+          case 'connect':
+            // Établir la connexion SSH
+            handleConnect(ws, msg, (client, stream) => {
+              sshClient = client;
+              sshStream = stream;
+              connected = true;
+            });
+            break;
+
+          case 'input':
+            // Envoyer des données au terminal SSH
+            if (sshStream && connected) {
+              sshStream.write(msg.data);
+            }
+            break;
+
+          case 'resize':
+            // Redimensionner le terminal
+            if (sshStream && connected) {
+              sshStream.setWindow(msg.rows, msg.cols, 0, 0);
+            }
+            break;
+
+          case 'disconnect':
+            // Fermer la connexion SSH
+            if (sshClient) {
+              sshClient.end();
+            }
+            break;
+
+          default:
+            console.warn('Type de message SSH inconnu:', msg.type);
+        }
+      } catch (err) {
+        console.error('Erreur parsing message SSH:', err.message);
+      }
+    });
+
+    ws.on('close', () => {
+      console.log('Connexion WebSocket SSH fermée');
+      if (sshClient) {
+        sshClient.end();
+      }
+    });
+
+    ws.on('error', (err) => {
+      console.error('Erreur WebSocket SSH:', err.message);
+      if (sshClient) {
+        sshClient.end();
+      }
+    });
+  });
+
+  console.log('Serveur WebSocket SSH initialisé sur /ws-ssh');
+  return wssSsh;
+}
+
+/**
+ * Gère la connexion SSH
+ */
+function handleConnect(ws, msg, onConnected) {
+  const { host, port, username, password, privateKey } = msg;
+
+  if (!host || !username) {
+    ws.send(JSON.stringify({ type: 'error', message: 'Hôte et utilisateur requis' }));
+    return;
+  }
+
+  const sshClient = new Client();
+
+  const connConfig = {
+    host: host,
+    port: port || 22,
+    username: username,
+    readyTimeout: 15000,
+    keepaliveInterval: 10000,
+  };
+
+  if (privateKey) {
+    connConfig.privateKey = privateKey;
+  } else if (password) {
+    connConfig.password = password;
+  } else {
+    ws.send(JSON.stringify({ type: 'error', message: 'Mot de passe ou clé privée requis' }));
+    return;
+  }
+
+  ws.send(JSON.stringify({ type: 'status', message: `Connexion à ${username}@${host}:${port || 22}...` }));
+
+  sshClient.on('ready', () => {
+    ws.send(JSON.stringify({ type: 'connected', message: `Connecté à ${host}` }));
+
+    sshClient.shell({ term: 'xterm-256color', rows: 24, cols: 80 }, (err, stream) => {
+      if (err) {
+        ws.send(JSON.stringify({ type: 'error', message: `Erreur shell: ${err.message}` }));
+        sshClient.end();
+        return;
+      }
+
+      onConnected(sshClient, stream);
+
+      // Transmettre les données du terminal SSH vers le WebSocket
+      stream.on('data', (data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
+        }
+      });
+
+      stream.stderr.on('data', (data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
+        }
+      });
+
+      stream.on('close', () => {
+        ws.send(JSON.stringify({ type: 'disconnected', message: 'Session SSH terminée' }));
+        sshClient.end();
+      });
+    });
+  });
+
+  sshClient.on('error', (err) => {
+    ws.send(JSON.stringify({ type: 'error', message: `Erreur SSH: ${err.message}` }));
+  });
+
+  sshClient.on('end', () => {
+    ws.send(JSON.stringify({ type: 'disconnected', message: 'Connexion SSH fermée' }));
+  });
+
+  sshClient.connect(connConfig);
+}
+
+module.exports = { initSSHWebSocket };

backend/src/webhook.js

@@ -0,0 +1,143 @@
+/**
+ * Manus Dashboard - Webhook Handler (CI/CD Gitea)
+ * Route : POST /api/webhook/gitea
+ * Écoute les événements push de Gitea et déclenche le déploiement automatique.
+ */
+const express = require('express');
+const crypto = require('crypto');
+const { exec } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const router = express.Router();
+
+const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET || '';
+const APPS_BASE_PATH = process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
+const DEPLOY_SCRIPT = '/opt/manus-deploy/scripts/deploy-app.sh';
+const LOG_DIR = '/var/log/manus-deploy';
+
+// Mapping dépôt Gitea -> nom du dossier application sur le serveur
+const REPO_TO_APP_MAP = {
+  'itinova-contacts': 'itinova-contacts',
+  'itinova-podcasts': 'itinova-podcasts',
+  'veille-reglementaire': 'veille-reglementaire',
+  'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
+  'manus-dashboard': 'manus-dashboard',
+  'itinova-budget-si': 'itinova-budget-si',
+};
+
+// Déploiements en cours (évite les doubles déclenchements)
+const deployingApps = new Set();
+
+function verifyGiteaSignature(req) {
+  if (!WEBHOOK_SECRET) {
+    console.warn('[Webhook] AVERTISSEMENT: WEBHOOK_SECRET non défini. Validation désactivée.');
+    return true;
+  }
+  const signature = req.headers['x-gitea-signature'] || req.headers['x-hub-signature-256'] || '';
+  console.log('[Webhook DEBUG] All headers:', JSON.stringify(Object.keys(req.headers)));
+  console.log('[Webhook DEBUG] x-gitea-signature:', req.headers['x-gitea-signature'] || 'ABSENT');
+  console.log('[Webhook DEBUG] rawBody available:', !!req.rawBody, 'length:', req.rawBody ? req.rawBody.length : 0);
+  // Utiliser rawBody si disponible (préservé avant express.json), sinon re-sérialiser
+  const bodyStr = req.rawBody ? req.rawBody.toString() : JSON.stringify(req.body);
+  const hmac = crypto.createHmac('sha256', WEBHOOK_SECRET).update(bodyStr).digest('hex');
+  const expected = `sha256=${hmac}`;
+  const received = signature.startsWith('sha256=') ? signature : `sha256=${signature}`;
+  try {
+    return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(received));
+  } catch {
+    return false;
+  }
+}
+
+function runDeploy(appName, branch, commitHash, committer, broadcast) {
+  if (deployingApps.has(appName)) {
+    console.log(`[Webhook] Déploiement déjà en cours pour ${appName}. Ignoré.`);
+    return;
+  }
+  deployingApps.add(appName);
+  console.log(`[Webhook] Déclenchement déploiement: ${appName} (branch: ${branch}, commit: ${commitHash})`);
+
+  if (broadcast) {
+    broadcast({ type: 'deploy_started', data: { app: appName, commit: commitHash, branch, committer } });
+  }
+
+  const env = { ...process.env, APPS_BASE_PATH };
+  const cmd = `bash ${DEPLOY_SCRIPT} ${appName} recette`;
+  let output = '';
+
+  const child = exec(cmd, { env, timeout: 600000 });
+  child.stdout.on('data', (d) => { output += d; process.stdout.write(`[${appName}] ${d}`); });
+  child.stderr.on('data', (d) => { output += d; process.stderr.write(`[${appName}] ERR: ${d}`); });
+
+  child.on('close', (code) => {
+    deployingApps.delete(appName);
+    const status = code === 0 ? 'success' : 'failed';
+    console.log(`[Webhook] Déploiement ${status} pour ${appName} (exit: ${code})`);
+    if (broadcast) {
+      broadcast({ type: 'deploy_finished', data: { app: appName, status, exitCode: code } });
+    }
+    try {
+      fs.mkdirSync(LOG_DIR, { recursive: true });
+      fs.writeFileSync(path.join(LOG_DIR, `${appName}-last-deploy.json`), JSON.stringify({
+        app: appName, branch, commit: commitHash, committer, status, exitCode: code,
+        timestamp: new Date().toISOString(), output: output.slice(-3000),
+      }, null, 2));
+    } catch (e) { console.error('[Webhook] Erreur sauvegarde statut:', e.message); }
+  });
+}
+
+// POST /api/webhook/gitea
+router.post('/gitea', (req, res) => {
+  if (!verifyGiteaSignature(req)) {
+    console.warn('[Webhook] Signature invalide. Requête rejetée.');
+    return res.status(401).json({ error: 'Signature invalide' });
+  }
+  const event = req.headers['x-gitea-event'] || 'unknown';
+  if (event !== 'push') {
+    return res.status(200).json({ message: `Événement ${event} ignoré` });
+  }
+  const payload = req.body;
+  const repoName = payload?.repository?.name || '';
+  const branch = (payload?.ref || '').replace('refs/heads/', '');
+  const commitHash = (payload?.after || '').slice(0, 8) || 'unknown';
+  const committer = payload?.pusher?.login || payload?.pusher?.name || 'unknown';
+
+  console.log(`[Webhook] Push: repo=${repoName}, branch=${branch}, commit=${commitHash}, by=${committer}`);
+
+  const appName = REPO_TO_APP_MAP[repoName];
+  if (!appName) return res.status(200).json({ message: `Dépôt ${repoName} non configuré` });
+  if (branch !== 'main') return res.status(200).json({ message: `Branch ${branch} ignorée` });
+
+  res.status(202).json({ message: `Déploiement de ${appName} déclenché`, commit: commitHash, branch, committer });
+
+  // Récupérer la fonction broadcast si disponible globalement
+  const broadcastFn = global.wsBroadcast || null;
+  setImmediate(() => runDeploy(appName, branch, commitHash, committer, broadcastFn));
+});
+
+// GET /api/webhook/status/:appName
+router.get('/status/:appName', (req, res) => {
+  const { appName } = req.params;
+  const statusFile = path.join(LOG_DIR, `${appName}-last-deploy.json`);
+  if (!fs.existsSync(statusFile)) return res.status(404).json({ error: 'Aucun déploiement enregistré' });
+  try {
+    const status = JSON.parse(fs.readFileSync(statusFile, 'utf8'));
+    res.json({ ...status, isDeploying: deployingApps.has(appName) });
+  } catch { res.status(500).json({ error: 'Erreur lecture statut' }); }
+});
+
+// GET /api/webhook/status
+router.get('/status', (req, res) => {
+  try {
+    fs.mkdirSync(LOG_DIR, { recursive: true });
+    const files = fs.readdirSync(LOG_DIR).filter(f => f.endsWith('-last-deploy.json'));
+    const statuses = files.map(f => {
+      try { const d = JSON.parse(fs.readFileSync(path.join(LOG_DIR, f), 'utf8')); return { ...d, isDeploying: deployingApps.has(d.app) }; }
+      catch { return null; }
+    }).filter(Boolean);
+    res.json({ deployments: statuses, currentlyDeploying: [...deployingApps] });
+  } catch { res.status(500).json({ error: 'Erreur lecture statuts' }); }
+});
+
+module.exports = router;

docker-compose.yml

@@ -1,41 +1,45 @@
 services:
   dashboard:
     build:
-      context: ./src
+      context: .
       dockerfile: Dockerfile
     container_name: manus-dashboard
     restart: unless-stopped
-    privileged: true
-    env_file:
-      - .env
     environment:
       - NODE_ENV=production
       - PORT=3001
-      - JWT_SECRET=${DASHBOARD_JWT_SECRET}
+      - JWT_SECRET=manus-dashboard-jwt-secret-2026-recette
-      - ADMIN_USERNAME=${DASHBOARD_ADMIN_USERNAME}
+      - ADMIN_USERNAME=adminItinova
-      - ADMIN_PASSWORD=${DASHBOARD_ADMIN_PASSWORD}
+      - ADMIN_PASSWORD=Itinova69!
-      - GITEA_URL=${GITEA_URL}
+      - GITEA_URL=https://git.recette.santinova-soft.org
-      - GITEA_USERNAME=${GITEA_USERNAME}
+      - GITEA_USERNAME=manus-admin
-      - GITEA_PASSWORD=${GITEA_PASSWORD}
+      - GITEA_PASSWORD=ManusGitea2026!
-      - WEBHOOK_SECRET=${WEBHOOK_SECRET}
+      - GITEA_TOKEN=1e0b01c361a91d5512e13c78053ac82a66e19427
-      - APPS_BASE_PATH=${APPS_BASE_PATH}
+      - GITEA_RECETTE_URL=http://gitea:3000
-      - INFRA_BASE_PATH=${INFRA_BASE_PATH}
+      - GITEA_PASSWORD_PROD=ManusGitea2026!
-      - HEALTH_CHECK_INTERVAL=${HEALTH_CHECK_INTERVAL}
+      - APPS_BASE_PATH=/opt/manus-deploy/apps
+      - INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
+      - HEALTH_CHECK_INTERVAL=30000
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
       - /opt/manus-deploy:/opt/manus-deploy
+    extra_hosts:
+      - "git.santinova-soft.org:180.149.196.138"
     networks:
       - web
     labels:
       - "traefik.enable=true"
+      # Route HTTPS via dashboard.recette.santinova-soft.org
       - "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`)"
       - "traefik.http.routers.manus-dashboard.entrypoints=websecure"
       - "traefik.http.routers.manus-dashboard.tls=true"
       - "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
       - "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
       - "traefik.http.routers.manus-dashboard.priority=100"
+      # Service
       - "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
       - "traefik.docker.network=web"
+
 networks:
   web:
     external: true

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard - Gestion des Applications</title>
+  </head>
+  <body class="bg-dark-900 text-white">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "manus-dashboard-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "axios": "^1.7.0",
+    "lucide-react": "^0.441.0",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="68" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">M</text>
+</svg>

frontend/src/App.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
+import AppsPage from './pages/AppsPage';
+import MonitoringPage from './pages/MonitoringPage';
+import DeploymentsPage from './pages/DeploymentsPage';
+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';
+export default function App() {
+  const [authenticated, setAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState('dashboard');
+  const [apps, setApps] = useState([]);
+  // Vérifier l'authentification au chargement
+  useEffect(() => {
+    const token = localStorage.getItem('dashboard_token');
+    if (token) {
+      getMe()
+        .then(() => {
+          setAuthenticated(true);
+          fetchApps();
+        })
+        .catch(() => {
+          localStorage.removeItem('dashboard_token');
+          setAuthenticated(false);
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, []);
+  const fetchApps = async () => {
+    try {
+      const res = await getApps();
+      setApps(res.data);
+    } catch (err) {
+      console.error('Erreur chargement apps:', err);
+    }
+  };
+  // WebSocket handler
+  const handleWsMessage = useCallback((data) => {
+    if (data.type === 'health_update') {
+      setApps(data.data);
+    }
+  }, []);
+  const { connected: wsConnected } = useWebSocket(
+    authenticated ? handleWsMessage : null
+  );
+  const handleLogin = (data) => {
+    setAuthenticated(true);
+    fetchApps();
+  };
+  const handleLogout = async () => {
+    try {
+      await apiLogout();
+    } catch (e) {
+      // ignore
+    }
+    localStorage.removeItem('dashboard_token');
+    setAuthenticated(false);
+    setApps([]);
+  };
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-dark-950">
+        <div className="flex items-center gap-3">
+          <svg className="animate-spin h-8 w-8 text-primary-500" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+              fill="none"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          <span className="text-gray-400">Chargement...</span>
+        </div>
+      </div>
+    );
+  }
+  if (!authenticated) {
+    return <LoginPage onLogin={handleLogin} />;
+  }
+  const renderPage = () => {
+    switch (currentPage) {
+      case 'dashboard':
+        return <DashboardPage apps={apps} />;
+      case 'apps':
+        return <AppsPage apps={apps} onRefresh={fetchApps} />;
+      case 'deployments':
+        return <DeploymentsPage />;
+      case 'gitea':
+        return <GiteaPage />;
+      case 'docker':
+        return <DockerPage />;
+      case 'monitoring':
+        return <MonitoringPage />;
+      case 'documentation':
+        return <DocumentationPage />;
+      case 'inventaire':
+        return <InventairePage />;
+      case 'terminal':
+        return <TerminalPage />;
+      default:
+        return <DashboardPage apps={apps} />;
+    }
+  };
+  return (
+    <div className="min-h-screen bg-dark-950">
+      <Sidebar
+        currentPage={currentPage}
+        onNavigate={setCurrentPage}
+        onLogout={handleLogout}
+        wsConnected={wsConnected}
+      />
+      <main className="ml-64 p-8">{renderPage()}</main>
+    </div>
+  );
+}

frontend/src/components/AddAppModal.jsx

@@ -0,0 +1,679 @@
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  Upload,
+  GitBranch,
+  Server,
+  Database,
+  Globe,
+  Package,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+  Loader2,
+  ChevronDown,
+} from 'lucide-react';
+import { getAvailableStacks, createApp, getGiteaRepos } from '../utils/api';
+
+const STEPS = [
+  { id: 1, title: 'Informations', icon: FileText },
+  { id: 2, title: 'Source', icon: GitBranch },
+  { id: 3, title: 'Stack & Options', icon: Server },
+  { id: 4, title: 'Confirmation', icon: CheckCircle },
+];
+
+export default function AddAppModal({ isOpen, onClose, onSuccess }) {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [stacks, setStacks] = useState([]);
+  const [giteaRepos, setGiteaRepos] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitResult, setSubmitResult] = useState(null);
+  const [errors, setErrors] = useState({});
+
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    subdomain: '',
+    sourceType: 'zip',
+    zipFile: null,
+    giteaRepoUrl: '',
+    stack: 'nodejs',
+    port: '',
+    needsDb: false,
+    dbType: 'mysql',
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      getAvailableStacks()
+        .then((res) => setStacks(res.data))
+        .catch(console.error);
+      getGiteaRepos()
+        .then((res) => setGiteaRepos(res.data))
+        .catch(console.error);
+      // Reset
+      setCurrentStep(1);
+      setSubmitResult(null);
+      setErrors({});
+      setFormData({
+        name: '',
+        description: '',
+        subdomain: '',
+        sourceType: 'zip',
+        zipFile: null,
+        giteaRepoUrl: '',
+        stack: 'nodejs',
+        port: '',
+        needsDb: false,
+        dbType: 'mysql',
+      });
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const updateField = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: null }));
+  };
+
+  const autoSubdomain = (name) => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9\s-]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  };
+
+  const handleNameChange = (value) => {
+    updateField('name', value);
+    if (!formData.subdomain || formData.subdomain === autoSubdomain(formData.name)) {
+      updateField('subdomain', autoSubdomain(value));
+    }
+  };
+
+  const validateStep = (step) => {
+    const newErrors = {};
+    if (step === 1) {
+      if (!formData.name.trim()) newErrors.name = 'Le nom est requis';
+      if (!formData.subdomain.trim()) newErrors.subdomain = 'Le sous-domaine est requis';
+      else if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
+        newErrors.subdomain = 'Lettres minuscules, chiffres et tirets uniquement';
+      }
+    }
+    if (step === 2) {
+      if (formData.sourceType === 'zip' && !formData.zipFile) {
+        newErrors.zipFile = 'Un fichier ZIP est requis';
+      }
+      if (formData.sourceType === 'gitea' && !formData.giteaRepoUrl) {
+        newErrors.giteaRepoUrl = 'Sélectionnez un dépôt Gitea';
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const nextStep = () => {
+    if (validateStep(currentStep)) {
+      setCurrentStep((prev) => Math.min(prev + 1, 4));
+    }
+  };
+
+  const prevStep = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 1));
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    setSubmitResult(null);
+
+    try {
+      const fd = new FormData();
+      fd.append('name', formData.name);
+      fd.append('description', formData.description);
+      fd.append('subdomain', formData.subdomain);
+      fd.append('stack', formData.stack);
+      fd.append('sourceType', formData.sourceType);
+      fd.append('needsDb', formData.needsDb.toString());
+      fd.append('dbType', formData.dbType);
+      if (formData.port) fd.append('port', formData.port);
+
+      if (formData.sourceType === 'zip' && formData.zipFile) {
+        fd.append('zipFile', formData.zipFile);
+      }
+      if (formData.sourceType === 'gitea') {
+        fd.append('giteaRepoUrl', formData.giteaRepoUrl);
+      }
+
+      const res = await createApp(fd);
+      setSubmitResult({ success: true, data: res.data });
+
+      // Rafraîchir après un délai
+      setTimeout(() => {
+        if (onSuccess) onSuccess();
+      }, 3000);
+    } catch (err) {
+      setSubmitResult({
+        success: false,
+        error: err.response?.data?.error || err.message,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const selectedStack = stacks.find((s) => s.id === formData.stack);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-dark-800 border border-dark-600 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
+          <div>
+            <h2 className="text-xl font-bold text-white flex items-center gap-2">
+              <Package className="w-5 h-5 text-primary-400" />
+              Ajouter une application
+            </h2>
+            <p className="text-sm text-gray-400 mt-0.5">
+              Déployez une nouvelle application sur le serveur de recette
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-white hover:bg-dark-600 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Steps indicator */}
+        <div className="px-6 py-3 border-b border-dark-600 bg-dark-900/50">
+          <div className="flex items-center justify-between">
+            {STEPS.map((step, idx) => (
+              <div key={step.id} className="flex items-center">
+                <div
+                  className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                    currentStep === step.id
+                      ? 'bg-primary-500/20 text-primary-400 border border-primary-500/30'
+                      : currentStep > step.id
+                      ? 'bg-green-500/20 text-green-400'
+                      : 'text-gray-500'
+                  }`}
+                >
+                  <step.icon className="w-4 h-4" />
+                  <span className="hidden sm:inline">{step.title}</span>
+                </div>
+                {idx < STEPS.length - 1 && (
+                  <div
+                    className={`w-8 h-0.5 mx-1 ${
+                      currentStep > step.id ? 'bg-green-500' : 'bg-dark-600'
+                    }`}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5 overflow-y-auto max-h-[55vh]">
+          {/* Step 1: Informations */}
+          {currentStep === 1 && (
+            <div className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                  Nom de l'application <span className="text-red-400">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  placeholder="Mon Application"
+                  className={`w-full px-4 py-2.5 bg-dark-700 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
+                    errors.name ? 'border-red-500' : 'border-dark-500'
+                  }`}
+                />
+                {errors.name && (
+                  <p className="text-red-400 text-xs mt-1">{errors.name}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                  Description
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => updateField('description', e.target.value)}
+                  placeholder="Description de l'application..."
+                  rows={3}
+                  className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                  Sous-domaine <span className="text-red-400">*</span>
+                </label>
+                <div className="flex items-center gap-0">
+                  <input
+                    type="text"
+                    value={formData.subdomain}
+                    onChange={(e) => updateField('subdomain', e.target.value.toLowerCase())}
+                    placeholder="mon-app"
+                    className={`flex-1 px-4 py-2.5 bg-dark-700 border rounded-l-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
+                      errors.subdomain ? 'border-red-500' : 'border-dark-500'
+                    }`}
+                  />
+                  <span className="px-3 py-2.5 bg-dark-600 border border-dark-500 border-l-0 rounded-r-lg text-gray-400 text-sm whitespace-nowrap">
+                    .recette.santinova-soft.org
+                  </span>
+                </div>
+                {errors.subdomain && (
+                  <p className="text-red-400 text-xs mt-1">{errors.subdomain}</p>
+                )}
+                {formData.subdomain && !errors.subdomain && (
+                  <p className="text-gray-500 text-xs mt-1 flex items-center gap-1">
+                    <Globe className="w-3 h-3" />
+                    URL: https://{formData.subdomain}.recette.santinova-soft.org
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Source */}
+          {currentStep === 2 && (
+            <div className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-3">
+                  Source du code
+                </label>
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    onClick={() => updateField('sourceType', 'zip')}
+                    className={`p-4 rounded-xl border-2 text-left transition-all ${
+                      formData.sourceType === 'zip'
+                        ? 'border-primary-500 bg-primary-500/10'
+                        : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                    }`}
+                  >
+                    <Upload className={`w-6 h-6 mb-2 ${formData.sourceType === 'zip' ? 'text-primary-400' : 'text-gray-400'}`} />
+                    <div className={`font-medium ${formData.sourceType === 'zip' ? 'text-white' : 'text-gray-300'}`}>
+                      Upload ZIP
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">
+                      Uploadez une archive ZIP contenant les sources
+                    </div>
+                  </button>
+
+                  <button
+                    onClick={() => updateField('sourceType', 'gitea')}
+                    className={`p-4 rounded-xl border-2 text-left transition-all ${
+                      formData.sourceType === 'gitea'
+                        ? 'border-primary-500 bg-primary-500/10'
+                        : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                    }`}
+                  >
+                    <GitBranch className={`w-6 h-6 mb-2 ${formData.sourceType === 'gitea' ? 'text-primary-400' : 'text-gray-400'}`} />
+                    <div className={`font-medium ${formData.sourceType === 'gitea' ? 'text-white' : 'text-gray-300'}`}>
+                      Dépôt Gitea
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">
+                      Utilisez un dépôt Gitea existant
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              {formData.sourceType === 'zip' && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                    Fichier ZIP <span className="text-red-400">*</span>
+                  </label>
+                  <div
+                    className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+                      formData.zipFile
+                        ? 'border-green-500/50 bg-green-500/5'
+                        : errors.zipFile
+                        ? 'border-red-500/50 bg-red-500/5'
+                        : 'border-dark-500 hover:border-dark-400 bg-dark-700'
+                    }`}
+                  >
+                    <input
+                      type="file"
+                      accept=".zip"
+                      onChange={(e) => updateField('zipFile', e.target.files[0])}
+                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    />
+                    {formData.zipFile ? (
+                      <div>
+                        <CheckCircle className="w-8 h-8 text-green-400 mx-auto mb-2" />
+                        <p className="text-green-400 font-medium">{formData.zipFile.name}</p>
+                        <p className="text-gray-500 text-sm mt-1">
+                          {(formData.zipFile.size / 1024 / 1024).toFixed(2)} MB
+                        </p>
+                      </div>
+                    ) : (
+                      <div>
+                        <Upload className="w-8 h-8 text-gray-500 mx-auto mb-2" />
+                        <p className="text-gray-400">Cliquez ou glissez un fichier ZIP ici</p>
+                        <p className="text-gray-600 text-sm mt-1">Maximum 500 MB</p>
+                      </div>
+                    )}
+                  </div>
+                  {errors.zipFile && (
+                    <p className="text-red-400 text-xs mt-1">{errors.zipFile}</p>
+                  )}
+                </div>
+              )}
+
+              {formData.sourceType === 'gitea' && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                    Dépôt Gitea <span className="text-red-400">*</span>
+                  </label>
+                  <div className="space-y-2">
+                    {giteaRepos.length === 0 ? (
+                      <div className="p-4 bg-dark-700 rounded-lg text-center text-gray-500">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
+                        Chargement des dépôts...
+                      </div>
+                    ) : (
+                      <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                        {giteaRepos.map((repo) => (
+                          <button
+                            key={repo.id}
+                            onClick={() => updateField('giteaRepoUrl', repo.cloneUrl)}
+                            className={`w-full p-3 rounded-lg border text-left transition-all ${
+                              formData.giteaRepoUrl === repo.cloneUrl
+                                ? 'border-primary-500 bg-primary-500/10'
+                                : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                            }`}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div>
+                                <div className="font-medium text-white text-sm">{repo.name}</div>
+                                {repo.description && (
+                                  <div className="text-xs text-gray-500 mt-0.5">{repo.description}</div>
+                                )}
+                              </div>
+                              {repo.language && (
+                                <span className="text-xs px-2 py-0.5 bg-dark-600 rounded text-gray-400">
+                                  {repo.language}
+                                </span>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  {errors.giteaRepoUrl && (
+                    <p className="text-red-400 text-xs mt-1">{errors.giteaRepoUrl}</p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Stack & Options */}
+          {currentStep === 3 && (
+            <div className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-3">
+                  Type de stack <span className="text-red-400">*</span>
+                </label>
+                <div className="grid grid-cols-3 gap-2">
+                  {stacks.map((s) => (
+                    <button
+                      key={s.id}
+                      onClick={() => updateField('stack', s.id)}
+                      className={`p-3 rounded-lg border text-center transition-all ${
+                        formData.stack === s.id
+                          ? 'border-primary-500 bg-primary-500/10'
+                          : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                      }`}
+                    >
+                      <div className={`text-sm font-medium ${formData.stack === s.id ? 'text-white' : 'text-gray-300'}`}>
+                        {s.name}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+                {selectedStack && (
+                  <p className="text-gray-500 text-xs mt-2">{selectedStack.description}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                  Port de l'application (optionnel)
+                </label>
+                <input
+                  type="number"
+                  value={formData.port}
+                  onChange={(e) => updateField('port', e.target.value)}
+                  placeholder="Auto-détecté selon la stack"
+                  className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                />
+              </div>
+
+              <div className="border border-dark-500 rounded-xl p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Database className={`w-5 h-5 ${formData.needsDb ? 'text-primary-400' : 'text-gray-500'}`} />
+                    <div>
+                      <div className="text-sm font-medium text-white">Base de données</div>
+                      <div className="text-xs text-gray-500">Ajouter un conteneur de base de données</div>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => updateField('needsDb', !formData.needsDb)}
+                    className={`relative w-12 h-6 rounded-full transition-colors ${
+                      formData.needsDb ? 'bg-primary-500' : 'bg-dark-600'
+                    }`}
+                  >
+                    <span
+                      className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
+                        formData.needsDb ? 'translate-x-6' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </button>
+                </div>
+
+                {formData.needsDb && (
+                  <div className="mt-4 pt-4 border-t border-dark-500">
+                    <label className="block text-sm font-medium text-gray-300 mb-2">
+                      Type de base de données
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      <button
+                        onClick={() => updateField('dbType', 'mysql')}
+                        className={`p-3 rounded-lg border text-center transition-all ${
+                          formData.dbType === 'mysql'
+                            ? 'border-primary-500 bg-primary-500/10'
+                            : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                        }`}
+                      >
+                        <div className={`text-sm font-medium ${formData.dbType === 'mysql' ? 'text-white' : 'text-gray-300'}`}>
+                          MySQL 8.0
+                        </div>
+                      </button>
+                      <button
+                        onClick={() => updateField('dbType', 'postgres')}
+                        className={`p-3 rounded-lg border text-center transition-all ${
+                          formData.dbType === 'postgres'
+                            ? 'border-primary-500 bg-primary-500/10'
+                            : 'border-dark-500 bg-dark-700 hover:border-dark-400'
+                        }`}
+                      >
+                        <div className={`text-sm font-medium ${formData.dbType === 'postgres' ? 'text-white' : 'text-gray-300'}`}>
+                          PostgreSQL 16
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Step 4: Confirmation */}
+          {currentStep === 4 && (
+            <div className="space-y-5">
+              {submitResult ? (
+                <div
+                  className={`p-6 rounded-xl border ${
+                    submitResult.success
+                      ? 'border-green-500/30 bg-green-500/10'
+                      : 'border-red-500/30 bg-red-500/10'
+                  }`}
+                >
+                  {submitResult.success ? (
+                    <div className="text-center">
+                      <CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-3" />
+                      <h3 className="text-lg font-bold text-green-400">
+                        Création lancée avec succès !
+                      </h3>
+                      <p className="text-gray-400 mt-2 text-sm">
+                        L'application est en cours de déploiement. Suivez la progression dans l'onglet Déploiements.
+                      </p>
+                      <p className="text-gray-500 mt-2 text-xs">
+                        URL: https://{formData.subdomain}.recette.santinova-soft.org
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="text-center">
+                      <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
+                      <h3 className="text-lg font-bold text-red-400">Erreur</h3>
+                      <p className="text-gray-400 mt-2 text-sm">{submitResult.error}</p>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <>
+                  <h3 className="text-lg font-semibold text-white">Récapitulatif</h3>
+                  <div className="bg-dark-700 rounded-xl divide-y divide-dark-600">
+                    <div className="flex justify-between items-center px-4 py-3">
+                      <span className="text-gray-400 text-sm">Nom</span>
+                      <span className="text-white font-medium">{formData.name}</span>
+                    </div>
+                    {formData.description && (
+                      <div className="flex justify-between items-center px-4 py-3">
+                        <span className="text-gray-400 text-sm">Description</span>
+                        <span className="text-white text-sm text-right max-w-xs truncate">{formData.description}</span>
+                      </div>
+                    )}
+                    <div className="flex justify-between items-center px-4 py-3">
+                      <span className="text-gray-400 text-sm">URL</span>
+                      <span className="text-primary-400 text-sm">
+                        https://{formData.subdomain}.recette.santinova-soft.org
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center px-4 py-3">
+                      <span className="text-gray-400 text-sm">Source</span>
+                      <span className="text-white text-sm">
+                        {formData.sourceType === 'zip'
+                          ? `ZIP: ${formData.zipFile?.name || '-'}`
+                          : `Gitea: ${formData.giteaRepoUrl.split('/').pop()}`}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center px-4 py-3">
+                      <span className="text-gray-400 text-sm">Stack</span>
+                      <span className="text-white text-sm">
+                        {selectedStack?.name || formData.stack}
+                      </span>
+                    </div>
+                    {formData.port && (
+                      <div className="flex justify-between items-center px-4 py-3">
+                        <span className="text-gray-400 text-sm">Port</span>
+                        <span className="text-white text-sm">{formData.port}</span>
+                      </div>
+                    )}
+                    <div className="flex justify-between items-center px-4 py-3">
+                      <span className="text-gray-400 text-sm">Base de données</span>
+                      <span className="text-white text-sm">
+                        {formData.needsDb
+                          ? formData.dbType === 'mysql'
+                            ? 'MySQL 8.0'
+                            : 'PostgreSQL 16'
+                          : 'Aucune'}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
+                    <div className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
+                      <div>
+                        <p className="text-yellow-400 text-sm font-medium">
+                          Le déploiement peut prendre plusieurs minutes
+                        </p>
+                        <p className="text-gray-400 text-xs mt-1">
+                          Le build Docker et le démarrage des conteneurs seront exécutés en arrière-plan.
+                          Vous pourrez suivre la progression dans l'onglet Déploiements.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-6 py-4 border-t border-dark-600 bg-dark-900/50">
+          <div>
+            {currentStep > 1 && !submitResult && (
+              <button
+                onClick={prevStep}
+                className="px-4 py-2 text-gray-400 hover:text-white transition-colors text-sm"
+              >
+                Retour
+              </button>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            {submitResult ? (
+              <button
+                onClick={onClose}
+                className="btn-primary px-6"
+              >
+                Fermer
+              </button>
+            ) : currentStep < 4 ? (
+              <button onClick={nextStep} className="btn-primary px-6">
+                Suivant
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className="btn-primary px-6 flex items-center gap-2"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Création en cours...
+                  </>
+                ) : (
+                  <>
+                    <Package className="w-4 h-4" />
+                    Créer et déployer
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/AppCard.jsx

@@ -0,0 +1,372 @@
+import React, { useState } from 'react';
+import {
+  ExternalLink,
+  RefreshCw,
+  Rocket,
+  Clock,
+  GitBranch,
+  Activity,
+  ChevronDown,
+  ChevronUp,
+  Terminal,
+  AlertTriangle,
+  Play,
+  Square,
+  RotateCcw,
+} from 'lucide-react';
+import StatusBadge from './StatusBadge';
+import { deployApp, checkApp, getAppLogs, startApp, stopApp, restartApp } from '../utils/api';
+
+function formatDate(dateStr) {
+  if (!dateStr) return 'N/A';
+  try {
+    const date = new Date(dateStr);
+    return date.toLocaleString('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatResponseTime(ms) {
+  if (!ms) return 'N/A';
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export default function AppCard({ app, commits, onRefresh }) {
+  const [deploying, setDeploying] = useState(false);
+  const [checking, setChecking] = useState(false);
+  const [showLogs, setShowLogs] = useState(false);
+  const [containerLogs, setContainerLogs] = useState('');
+  const [loadingLogs, setLoadingLogs] = useState(false);
+  const [deployMessage, setDeployMessage] = useState(null);
+  const [loadingControl, setLoadingControl] = useState(null);
+
+  const handleContainerControl = async (action) => {
+    setLoadingControl(action);
+    try {
+      if (action === 'start') await startApp(app.id);
+      else if (action === 'stop') await stopApp(app.id);
+      else if (action === 'restart') await restartApp(app.id);
+      setTimeout(() => { if (onRefresh) onRefresh(); }, 2000);
+    } catch (err) {
+      console.error('Erreur controle conteneur:', err);
+    } finally {
+      setLoadingControl(null);
+    }
+  };
+
+  const handleDeploy = async () => {
+    if (!confirm(`Voulez-vous redéployer ${app.name} ?`)) return;
+    setDeploying(true);
+    setDeployMessage(null);
+    try {
+      const res = await deployApp(app.id);
+      setDeployMessage({
+        type: 'info',
+        text: res.data.message || 'Redéploiement lancé...',
+      });
+      // Rafraîchir après un délai
+      setTimeout(() => {
+        if (onRefresh) onRefresh();
+        setDeploying(false);
+      }, 10000);
+    } catch (err) {
+      setDeployMessage({
+        type: 'error',
+        text: err.response?.data?.error || 'Erreur lors du redéploiement',
+      });
+      setDeploying(false);
+    }
+  };
+
+  const handleCheck = async () => {
+    setChecking(true);
+    try {
+      await checkApp(app.id);
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      console.error('Erreur health check:', err);
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const handleShowLogs = async () => {
+    if (showLogs) {
+      setShowLogs(false);
+      return;
+    }
+    setLoadingLogs(true);
+    setShowLogs(true);
+    try {
+      const res = await getAppLogs(app.id, 50);
+      setContainerLogs(res.data.logs || 'Aucun log disponible');
+    } catch (err) {
+      setContainerLogs('Erreur lors de la récupération des logs');
+    } finally {
+      setLoadingLogs(false);
+    }
+  };
+
+  const latestCommit = commits && commits.length > 0 ? commits[0] : null;
+
+  // Apps d'infrastructure : portail et dashboard
+  const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
+
+  return (
+    <div className={`card overflow-hidden${isInfra ? ' border border-amber-500/30 bg-amber-950/10' : ''}`}>
+      {/* Badge infra */}
+      {isInfra && (
+        <div className="px-6 pt-3 pb-0">
+          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/30">
+            ⚙ Infrastructure
+          </span>
+        </div>
+      )}
+      {/* Header */}
+      <div className="p-6 border-b border-dark-700">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-3">
+              <h3 className="text-lg font-semibold text-white">{app.name}</h3>
+              <StatusBadge status={app.status} />
+            </div>
+            <p className="text-gray-400 text-sm mt-1">
+              {app.description || app.id}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleCheck}
+              disabled={checking}
+              className="btn-secondary py-1.5 px-3 text-sm flex items-center gap-1.5"
+              title="Vérifier l'état"
+            >
+              <RefreshCw
+                className={`w-3.5 h-3.5 ${checking ? 'animate-spin' : ''}`}
+              />
+              Vérifier
+            </button>
+            <button
+              onClick={handleDeploy}
+              disabled={deploying}
+              className="btn-primary py-1.5 px-3 text-sm flex items-center gap-1.5"
+              title="Redéployer l'application"
+            >
+              <Rocket
+                className={`w-3.5 h-3.5 ${deploying ? 'animate-bounce' : ''}`}
+              />
+              {deploying ? 'Déploiement...' : 'Redéployer'}
+            </button>
+            {/* Boutons contrôle conteneur */}
+            <div className="flex items-center gap-1 ml-1 border-l border-dark-600 pl-2">
+              <button
+                onClick={() => handleContainerControl('start')}
+                disabled={loadingControl !== null || app.container?.state === 'running'}
+                title="Démarrer le conteneur"
+                className="p-1.5 rounded-lg text-emerald-400 hover:bg-emerald-500/10 border border-emerald-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+              >
+                {loadingControl === 'start' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5" />}
+              </button>
+              <button
+                onClick={() => handleContainerControl('stop')}
+                disabled={loadingControl !== null || app.container?.state !== 'running'}
+                title="Arrêter le conteneur"
+                className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 border border-red-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+              >
+                {loadingControl === 'stop' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Square className="w-3.5 h-3.5" />}
+              </button>
+              <button
+                onClick={() => handleContainerControl('restart')}
+                disabled={loadingControl !== null}
+                title="Redémarrer le conteneur"
+                className="p-1.5 rounded-lg text-amber-400 hover:bg-amber-500/10 border border-amber-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+              >
+                {loadingControl === 'restart' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5" />}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Deploy message */}
+      {deployMessage && (
+        <div
+          className={`px-6 py-3 text-sm flex items-center gap-2 ${
+            deployMessage.type === 'error'
+              ? 'bg-red-500/10 text-red-400'
+              : 'bg-primary-500/10 text-primary-400'
+          }`}
+        >
+          {deployMessage.type === 'error' ? (
+            <AlertTriangle className="w-4 h-4" />
+          ) : (
+            <Rocket className="w-4 h-4" />
+          )}
+          {deployMessage.text}
+        </div>
+      )}
+
+      {/* Info Grid */}
+      <div className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* URLs */}
+        <div>
+          <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+            URLs
+          </span>
+          <div className="mt-1.5 space-y-1">
+            {app.urls?.recette && (
+              <a
+                href={app.urls.recette}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1.5 text-sm text-primary-400 hover:text-primary-300 transition-colors"
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+                Recette
+              </a>
+            )}
+            {app.urls?.prod ? (
+              <a
+                href={app.urls.prod}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1.5 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+                Production
+              </a>
+            ) : (
+              <span className="text-sm text-gray-600">Pas de prod</span>
+            )}
+          </div>
+        </div>
+
+        {/* Container */}
+        <div>
+          <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Conteneur
+          </span>
+          <div className="mt-1.5">
+            {app.container ? (
+              <div className="space-y-1">
+                <p className="text-sm text-gray-300">
+                  <span className="text-gray-500">ID:</span>{' '}
+                  <code className="text-xs bg-dark-700 px-1.5 py-0.5 rounded">
+                    {app.container.id}
+                  </code>
+                </p>
+                <p className="text-sm text-gray-300">
+                  <span className="text-gray-500">État:</span>{' '}
+                  {app.container.state}
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm text-gray-600">Non trouvé</p>
+            )}
+          </div>
+        </div>
+
+        {/* Health */}
+        <div>
+          <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Santé
+          </span>
+          <div className="mt-1.5 space-y-1">
+            {app.health?.recette && (
+              <div className="flex items-center gap-2">
+                <Activity
+                  className={`w-3.5 h-3.5 ${
+                    app.health.recette.online
+                      ? 'text-emerald-400'
+                      : 'text-red-400'
+                  }`}
+                />
+                <span className="text-sm text-gray-300">
+                  {app.health.recette.online ? (
+                    <>
+                      HTTP {app.health.recette.statusCode} &mdash;{' '}
+                      {formatResponseTime(app.health.recette.responseTime)}
+                    </>
+                  ) : (
+                    <span className="text-red-400">
+                      {app.health.recette.error || 'Inaccessible'}
+                    </span>
+                  )}
+                </span>
+              </div>
+            )}
+            <p className="text-xs text-gray-600">
+              <Clock className="w-3 h-3 inline mr-1" />
+              {formatDate(app.lastCheck)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Latest Commit */}
+      {latestCommit && (
+        <div className="px-6 py-3 border-t border-dark-700 bg-dark-800/50">
+          <div className="flex items-center gap-2">
+            <GitBranch className="w-4 h-4 text-gray-500" />
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Dernier commit
+            </span>
+          </div>
+          <div className="mt-1.5 flex items-center gap-3">
+            <code className="text-xs bg-primary-500/10 text-primary-400 px-2 py-0.5 rounded font-mono">
+              {latestCommit.shortSha}
+            </code>
+            <span className="text-sm text-gray-300 truncate flex-1">
+              {latestCommit.message}
+            </span>
+            <span className="text-xs text-gray-500 flex-shrink-0">
+              {latestCommit.author} &mdash; {formatDate(latestCommit.date)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Logs Toggle */}
+      <div className="border-t border-dark-700">
+        <button
+          onClick={handleShowLogs}
+          className="w-full px-6 py-3 flex items-center justify-between text-sm text-gray-400 hover:text-gray-300 hover:bg-dark-700/50 transition-colors"
+        >
+          <span className="flex items-center gap-2">
+            <Terminal className="w-4 h-4" />
+            Logs du conteneur
+          </span>
+          {showLogs ? (
+            <ChevronUp className="w-4 h-4" />
+          ) : (
+            <ChevronDown className="w-4 h-4" />
+          )}
+        </button>
+        {showLogs && (
+          <div className="px-6 pb-4">
+            <div className="bg-dark-950 rounded-lg p-4 max-h-64 overflow-auto">
+              {loadingLogs ? (
+                <div className="flex items-center gap-2 text-gray-500">
+                  <RefreshCw className="w-4 h-4 animate-spin" />
+                  Chargement des logs...
+                </div>
+              ) : (
+                <pre className="log-viewer text-xs text-gray-400">
+                  {containerLogs}
+                </pre>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { LayoutList, TerminalSquare,
+  Server,
+  LayoutDashboard,
+  Box,
+  GitBranch,
+  ScrollText,
+  Container,
+  LogOut,
+  Wifi,
+  WifiOff,
+  Activity,
+  BookOpen,
+} from 'lucide-react';
+const navItems = [
+  { id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
+  { id: 'apps', label: 'Applications', icon: Box },
+  { id: 'deployments', label: 'Déploiements', icon: ScrollText },
+  { id: 'gitea', label: 'Gitea', icon: GitBranch },
+  { id: 'docker', label: 'Docker', icon: Container },
+  { 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,
+  onNavigate,
+  onLogout,
+  wsConnected,
+}) {
+  return (
+    <aside className="w-64 bg-dark-900 border-r border-dark-700 flex flex-col h-screen fixed left-0 top-0">
+      {/* Logo */}
+      <div className="p-6 border-b border-dark-700">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-primary-600 flex items-center justify-center">
+            <Server className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-white">Dashboard</h1>
+            <p className="text-xs text-gray-500">{window.location.hostname.includes('recette') ? 'Recette' : 'Production'}</p>
+          </div>
+        </div>
+      </div>
+      {/* Navigation */}
+      <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = currentPage === item.id;
+          const isDoc = item.id === 'documentation';
+          return (
+            <button
+              key={item.id}
+              onClick={() => onNavigate(item.id)}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                isActive
+                  ? isDoc
+                    ? 'bg-purple-600/10 text-purple-400 border border-purple-500/20'
+                    : 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
+                  : isDoc
+                  ? 'text-purple-400/70 hover:text-purple-300 hover:bg-purple-500/10'
+                  : 'text-gray-400 hover:text-gray-200 hover:bg-dark-800'
+              }`}
+            >
+              <Icon className="w-4.5 h-4.5" />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+      {/* Footer */}
+      <div className="p-4 border-t border-dark-700 space-y-3">
+        {/* WebSocket status */}
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-800">
+          {wsConnected ? (
+            <>
+              <Wifi className="w-4 h-4 text-emerald-400" />
+              <span className="text-xs text-emerald-400">Temps réel actif</span>
+            </>
+          ) : (
+            <>
+              <WifiOff className="w-4 h-4 text-gray-500" />
+              <span className="text-xs text-gray-500">Hors ligne</span>
+            </>
+          )}
+        </div>
+        <button
+          onClick={onLogout}
+          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+        >
+          <LogOut className="w-4.5 h-4.5" />
+          Déconnexion
+        </button>
+      </div>
+    </aside>
+  );
+}

frontend/src/components/StatusBadge.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+const statusConfig = {
+  online: {
+    label: 'En ligne',
+    className: 'status-online',
+    dotColor: 'bg-emerald-400',
+  },
+  offline: {
+    label: 'Hors ligne',
+    className: 'status-offline',
+    dotColor: 'bg-gray-400',
+  },
+  error: {
+    label: 'Erreur',
+    className: 'status-error',
+    dotColor: 'bg-red-400',
+  },
+  unknown: {
+    label: 'Inconnu',
+    className: 'status-warning',
+    dotColor: 'bg-amber-400',
+  },
+  running: {
+    label: 'En cours',
+    className: 'status-warning',
+    dotColor: 'bg-amber-400',
+  },
+  success: {
+    label: 'Succès',
+    className: 'status-online',
+    dotColor: 'bg-emerald-400',
+  },
+  failed: {
+    label: 'Échoué',
+    className: 'status-error',
+    dotColor: 'bg-red-400',
+  },
+};
+
+export default function StatusBadge({ status, size = 'sm' }) {
+  const config = statusConfig[status] || statusConfig.unknown;
+
+  return (
+    <span className={config.className}>
+      <span
+        className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
+          status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
+        }`}
+      />
+      {config.label}
+    </span>
+  );
+}

frontend/src/hooks/useWebSocket.js

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+export default function useWebSocket(onMessage) {
+  const wsRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+  const reconnectTimeout = useRef(null);
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws`;
+
+    try {
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setConnected(true);
+        console.log('WebSocket connecté');
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (onMessage) onMessage(data);
+        } catch (e) {
+          console.error('Erreur parsing WS message:', e);
+        }
+      };
+
+      ws.onclose = () => {
+        setConnected(false);
+        console.log('WebSocket déconnecté, reconnexion dans 5s...');
+        reconnectTimeout.current = setTimeout(connect, 5000);
+      };
+
+      ws.onerror = (err) => {
+        console.error('Erreur WebSocket:', err);
+        ws.close();
+      };
+    } catch (err) {
+      console.error('Erreur connexion WebSocket:', err);
+      reconnectTimeout.current = setTimeout(connect, 5000);
+    }
+  }, [onMessage]);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      if (wsRef.current) wsRef.current.close();
+      if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
+    };
+  }, [connect]);
+
+  return { connected };
+}

frontend/src/index.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-dark-950 text-gray-100 antialiased;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-secondary {
+    @apply bg-dark-700 hover:bg-dark-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-dark-600 focus:outline-none focus:ring-2 focus:ring-dark-500 focus:ring-offset-2 focus:ring-offset-dark-900;
+  }
+
+  .card {
+    @apply bg-dark-800 border border-dark-700 rounded-xl shadow-lg;
+  }
+
+  .input-field {
+    @apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
+  }
+
+  .status-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .status-online {
+    @apply status-badge bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
+  }
+
+  .status-offline {
+    @apply status-badge bg-gray-500/20 text-gray-400 border border-gray-500/30;
+  }
+
+  .status-error {
+    @apply status-badge bg-red-500/20 text-red-400 border border-red-500/30;
+  }
+
+  .status-warning {
+    @apply status-badge bg-amber-500/20 text-amber-400 border border-amber-500/30;
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-dark-900;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-dark-600 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-dark-500;
+}
+
+/* Animations */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-pulse-dot {
+  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Log viewer */
+.log-viewer {
+  @apply font-mono text-sm leading-relaxed whitespace-pre-wrap break-all;
+}
+
+.log-viewer .log-timestamp {
+  @apply text-gray-500;
+}
+
+.log-viewer .log-error {
+  @apply text-red-400;
+}
+
+.log-viewer .log-success {
+  @apply text-emerald-400;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/pages/AppsPage.jsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { Box, RefreshCw, Plus } from 'lucide-react';
+import AppCard from '../components/AppCard';
+import AddAppModal from '../components/AddAppModal';
+import { getApps, getGiteaCommits } from '../utils/api';
+
+export default function AppsPage({ apps, onRefresh }) {
+  const [commitsMap, setCommitsMap] = useState({});
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  useEffect(() => {
+    // Charger les commits pour chaque app
+    apps.forEach((app) => {
+      const owner = app.giteaOwner || 'manus-admin';
+      const repo = app.giteaRepo || app.id;
+      getGiteaCommits(owner, repo)
+        .then((res) => {
+          setCommitsMap((prev) => ({
+            ...prev,
+            [app.id]: res.data,
+          }));
+        })
+        .catch(() => {
+          // Ignorer les erreurs Gitea pour les apps sans dépôt
+        });
+    });
+  }, [apps]);
+
+  const handleAddSuccess = () => {
+    setShowAddModal(false);
+    // Rafraîchir la liste après un délai pour laisser le temps au health check
+    setTimeout(() => {
+      if (onRefresh) onRefresh();
+    }, 5000);
+    // Rafraîchir encore après 15s
+    setTimeout(() => {
+      if (onRefresh) onRefresh();
+    }, 15000);
+  };
+
+  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">
+            <Box className="w-7 h-7 text-primary-400" />
+            Applications
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Gérez et surveillez vos applications déployées
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <button onClick={onRefresh} className="btn-secondary flex items-center gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Rafraîchir
+          </button>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="btn-primary flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Ajouter une application
+          </button>
+        </div>
+      </div>
+
+      {/* Apps List */}
+      {apps.length === 0 ? (
+        <div className="card p-12 text-center">
+          <Box className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-400">
+            Aucune application
+          </h3>
+          <p className="text-gray-600 mt-2">
+            Les applications déployées apparaîtront ici
+          </p>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="btn-primary mt-4 inline-flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Ajouter votre première application
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {apps.map((app) => (
+            <AppCard
+              key={app.id}
+              app={app}
+              commits={commitsMap[app.id] || []}
+              onRefresh={onRefresh}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Add App Modal */}
+      <AddAppModal
+        isOpen={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onSuccess={handleAddSuccess}
+      />
+    </div>
+  );
+}

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Activity,
+  Box,
+  Container,
+  Server,
+  Clock,
+  TrendingUp,
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import { getApps, getSystemInfo } from '../utils/api';
+import StatusBadge from '../components/StatusBadge';
+
+function StatCard({ icon: Icon, label, value, color, subtext }) {
+  return (
+    <div className="card p-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm text-gray-400">{label}</p>
+          <p className="text-2xl font-bold text-white mt-1">{value}</p>
+          {subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
+        </div>
+        <div
+          className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
+        >
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardPage({ apps }) {
+  const [systemInfo, setSystemInfo] = useState(null);
+
+  useEffect(() => {
+    getSystemInfo()
+      .then((res) => setSystemInfo(res.data))
+      .catch(console.error);
+  }, []);
+
+  const onlineApps = apps.filter((a) => a.status === 'online').length;
+  const offlineApps = apps.filter((a) => a.status === 'offline').length;
+  const errorApps = apps.filter((a) => a.status === 'error').length;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
+        <p className="text-gray-400 mt-1">
+          Vue d'ensemble de l'infrastructure Manus
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={Box}
+          label="Applications"
+          value={apps.length}
+          color="bg-primary-600"
+          subtext="Applications déployées"
+        />
+        <StatCard
+          icon={CheckCircle2}
+          label="En ligne"
+          value={onlineApps}
+          color="bg-emerald-600"
+          subtext="Applications fonctionnelles"
+        />
+        <StatCard
+          icon={XCircle}
+          label="Hors ligne"
+          value={offlineApps}
+          color="bg-gray-600"
+          subtext="Applications arrêtées"
+        />
+        <StatCard
+          icon={AlertCircle}
+          label="Erreurs"
+          value={errorApps}
+          color="bg-red-600"
+          subtext="Applications en erreur"
+        />
+      </div>
+
+      {/* System Info + Apps Overview */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* System Info */}
+        <div className="card p-6">
+          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <Server className="w-5 h-5 text-primary-400" />
+            Informations système
+          </h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Serveur</span>
+              <span className="text-sm text-gray-200">
+                78.138.58.109 (Recette)
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Conteneurs actifs</span>
+              <span className="text-sm text-gray-200">
+                {systemInfo?.runningContainers || '...'} /{' '}
+                {systemInfo?.totalContainers || '...'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Gitea</span>
+              <a
+                href="https://git.recette.santinova-soft.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary-400 hover:text-primary-300"
+              >
+                git.recette.santinova-soft.org
+              </a>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Reverse Proxy</span>
+              <span className="text-sm text-gray-200">
+                Traefik + Let's Encrypt
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-sm text-gray-400">Heure serveur</span>
+              <span className="text-sm text-gray-200">
+                {systemInfo?.serverTime
+                  ? new Date(systemInfo.serverTime).toLocaleString('fr-FR')
+                  : '...'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Apps Quick View */}
+        <div className="card p-6">
+          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <Activity className="w-5 h-5 text-primary-400" />
+            État des applications
+          </h3>
+          {apps.length === 0 ? (
+            <p className="text-gray-500 text-sm">Aucune application détectée</p>
+          ) : (
+            <div className="space-y-3">
+              {apps.map((app) => (
+                <div
+                  key={app.id}
+                  className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
+                >
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-3 h-3 rounded-full ${
+                        app.status === 'online'
+                          ? 'bg-emerald-400 animate-pulse-dot'
+                          : app.status === 'error'
+                          ? 'bg-red-400'
+                          : 'bg-gray-500'
+                      }`}
+                    />
+                    <div>
+                      <p className="text-sm font-medium text-gray-200">
+                        {app.name}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {app.containerName}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    {app.health?.recette?.responseTime && (
+                      <span className="text-xs text-gray-500">
+                        {app.health.recette.responseTime}ms
+                      </span>
+                    )}
+                    <StatusBadge status={app.status} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/DeploymentsPage.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ScrollText,
+  RefreshCw,
+  Clock,
+  User,
+  ChevronDown,
+  ChevronUp,
+  CheckCircle2,
+  XCircle,
+  Loader,
+} from 'lucide-react';
+import { getDeployments } from '../utils/api';
+import StatusBadge from '../components/StatusBadge';
+
+function formatDate(dateStr) {
+  if (!dateStr) return 'N/A';
+  try {
+    return new Date(dateStr).toLocaleString('fr-FR');
+  } catch {
+    return dateStr;
+  }
+}
+
+function DeploymentEntry({ deployment }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const statusIcon = {
+    success: <CheckCircle2 className="w-5 h-5 text-emerald-400" />,
+    failed: <XCircle className="w-5 h-5 text-red-400" />,
+    running: <Loader className="w-5 h-5 text-amber-400 animate-spin" />,
+  };
+
+  return (
+    <div className="card overflow-hidden">
+      <div
+        className="p-4 flex items-center justify-between cursor-pointer hover:bg-dark-700/50 transition-colors"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <div className="flex items-center gap-4">
+          {statusIcon[deployment.status] || statusIcon.running}
+          <div>
+            <p className="text-sm font-medium text-gray-200">
+              {deployment.message}
+            </p>
+            <div className="flex items-center gap-4 mt-1">
+              <span className="text-xs text-gray-500 flex items-center gap-1">
+                <Clock className="w-3 h-3" />
+                {formatDate(deployment.timestamp)}
+              </span>
+              {deployment.user && (
+                <span className="text-xs text-gray-500 flex items-center gap-1">
+                  <User className="w-3 h-3" />
+                  {deployment.user}
+                </span>
+              )}
+              {deployment.duration && (
+                <span className="text-xs text-gray-500">
+                  Durée: {deployment.duration}s
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <StatusBadge status={deployment.status} />
+          {expanded ? (
+            <ChevronUp className="w-4 h-4 text-gray-500" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-gray-500" />
+          )}
+        </div>
+      </div>
+      {expanded && deployment.logs && (
+        <div className="px-4 pb-4 border-t border-dark-700">
+          <div className="bg-dark-950 rounded-lg p-4 mt-3 max-h-96 overflow-auto">
+            <pre className="log-viewer text-xs text-gray-400">
+              {deployment.logs}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function DeploymentsPage() {
+  const [deployments, setDeployments] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchDeployments = async () => {
+    setLoading(true);
+    try {
+      const res = await getDeployments();
+      setDeployments(res.data);
+    } catch (err) {
+      console.error('Erreur chargement déploiements:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDeployments();
+    const interval = setInterval(fetchDeployments, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  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">
+            <ScrollText className="w-7 h-7 text-primary-400" />
+            Historique des déploiements
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Consultez les logs des derniers déploiements
+          </p>
+        </div>
+        <button
+          onClick={fetchDeployments}
+          className="btn-secondary flex items-center gap-2"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Rafraîchir
+        </button>
+      </div>
+
+      {/* Deployments List */}
+      {loading && deployments.length === 0 ? (
+        <div className="card p-12 text-center">
+          <RefreshCw className="w-8 h-8 text-gray-600 mx-auto mb-4 animate-spin" />
+          <p className="text-gray-400">Chargement...</p>
+        </div>
+      ) : deployments.length === 0 ? (
+        <div className="card p-12 text-center">
+          <ScrollText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-400">
+            Aucun déploiement
+          </h3>
+          <p className="text-gray-600 mt-2">
+            L'historique des déploiements apparaîtra ici après le premier
+            redéploiement
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {deployments.map((d) => (
+            <DeploymentEntry key={d.id} deployment={d} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/DockerPage.jsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { Container, RefreshCw, Clock } from 'lucide-react';
+import { getContainers } from '../utils/api';
+
+function formatDate(dateStr) {
+  if (!dateStr) return 'N/A';
+  try {
+    return new Date(dateStr).toLocaleString('fr-FR');
+  } catch {
+    return dateStr;
+  }
+}
+
+export default function DockerPage() {
+  const [containers, setContainers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchContainers = async () => {
+    setLoading(true);
+    try {
+      const res = await getContainers();
+      setContainers(res.data);
+    } catch (err) {
+      console.error('Erreur chargement conteneurs:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchContainers();
+    const interval = setInterval(fetchContainers, 15000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const stateColors = {
+    running: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
+    exited: 'text-red-400 bg-red-500/10 border-red-500/20',
+    created: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+    restarting: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+  };
+
+  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">
+            <Container className="w-7 h-7 text-primary-400" />
+            Conteneurs Docker
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Vue d'ensemble de tous les conteneurs sur le serveur
+          </p>
+        </div>
+        <button
+          onClick={fetchContainers}
+          className="btn-secondary flex items-center gap-2"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Rafraîchir
+        </button>
+      </div>
+
+      {/* Containers Table */}
+      <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-dark-700">
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  Nom
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  Image
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  État
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  Statut
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  ID
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
+                  Créé
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-dark-700">
+              {loading && containers.length === 0 ? (
+                <tr>
+                  <td colSpan="6" className="px-6 py-8 text-center">
+                    <RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
+                  </td>
+                </tr>
+              ) : containers.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan="6"
+                    className="px-6 py-8 text-center text-gray-500"
+                  >
+                    Aucun conteneur trouvé
+                  </td>
+                </tr>
+              ) : (
+                containers.map((c) => (
+                  <tr
+                    key={c.id}
+                    className="hover:bg-dark-700/30 transition-colors"
+                  >
+                    <td className="px-6 py-3">
+                      <span className="text-sm font-medium text-gray-200">
+                        {c.names.join(', ')}
+                      </span>
+                    </td>
+                    <td className="px-6 py-3">
+                      <code className="text-xs text-gray-400 bg-dark-700 px-2 py-0.5 rounded">
+                        {c.image}
+                      </code>
+                    </td>
+                    <td className="px-6 py-3">
+                      <span
+                        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
+                          stateColors[c.state] || stateColors.created
+                        }`}
+                      >
+                        <span
+                          className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
+                            c.state === 'running'
+                              ? 'bg-emerald-400'
+                              : c.state === 'exited'
+                              ? 'bg-red-400'
+                              : 'bg-amber-400'
+                          }`}
+                        />
+                        {c.state}
+                      </span>
+                    </td>
+                    <td className="px-6 py-3">
+                      <span className="text-xs text-gray-400">{c.status}</span>
+                    </td>
+                    <td className="px-6 py-3">
+                      <code className="text-xs text-gray-500 font-mono">
+                        {c.id}
+                      </code>
+                    </td>
+                    <td className="px-6 py-3">
+                      <span className="text-xs text-gray-500 flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {formatDate(c.created)}
+                      </span>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/DocumentationPage.jsx

@@ -0,0 +1,420 @@
+import React, { useState } from 'react';
+import {
+  BookOpen,
+  Server,
+  GitBranch,
+  LayoutDashboard,
+  Globe,
+  Database,
+  Shield,
+  ArrowRight,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Activity,
+  Cpu,
+  HardDrive,
+  Network,
+  CheckCircle,
+  Clock,
+  Zap,
+  Package,
+} from 'lucide-react';
+
+/* ─────────────────────────────────────────────
+   Données de l'infrastructure
+───────────────────────────────────────────── */
+const RECETTE = {
+  label: 'RECETTE',
+  color: 'amber',
+  ip: '78.138.58.109',
+  os: 'Debian GNU/Linux 12',
+  cpu: '4 vCores',
+  ram: '8 Go',
+  disk: '147 Go',
+  infra: [
+    {
+      icon: GitBranch,
+      color: 'purple',
+      name: 'Gitea',
+      url: 'git.recette.santinova-soft.org',
+      desc: 'Dépôt Git — 4 repositories',
+      href: 'https://git.recette.santinova-soft.org',
+    },
+    {
+      icon: LayoutDashboard,
+      color: 'blue',
+      name: 'Dashboard',
+      url: 'dashboard.recette.santinova-soft.org',
+      desc: 'Monitoring CPU / RAM / Disque',
+      href: 'https://dashboard.recette.santinova-soft.org',
+    },
+    {
+      icon: Globe,
+      color: 'teal',
+      name: 'Portail Applicatif',
+      url: 'portail.recette.santinova-soft.org',
+      desc: 'Vitrine centralisée des applications',
+      href: 'https://portail.recette.santinova-soft.org',
+    },
+    {
+      icon: Shield,
+      color: 'gray',
+      name: 'Traefik',
+      url: 'Reverse Proxy SSL',
+      desc: "Let's Encrypt — Routage dynamique",
+    },
+  ],
+  apps: [
+    {
+      icon: '🧾',
+      color: 'green',
+      name: 'Démat. Facturation DSI',
+      url: 'demat-facturation.recette.santinova-soft.org',
+      href: 'https://demat-facturation.recette.santinova-soft.org',
+    },
+    {
+      icon: '👁️',
+      color: 'indigo',
+      name: 'Veille Réglementaire',
+      url: 'veille.recette.santinova-soft.org',
+      href: 'https://veille.recette.santinova-soft.org',
+    },
+    {
+      icon: '🗺️',
+      color: 'cyan',
+      name: 'SONUM',
+      url: 'sonum.recette.santinova-soft.org',
+      desc: 'Cartographie solutions numériques FEHAP',
+      href: 'https://sonum.recette.santinova-soft.org',
+    },
+    {
+      icon: '👤',
+      color: 'pink',
+      name: 'Itinova Contacts',
+      url: 'contacts.recette.santinova-soft.org',
+      href: 'https://contacts.recette.santinova-soft.org',
+    },
+    {
+      icon: '🚗',
+      color: 'yellow',
+      name: 'Flotte Véhicules',
+      url: 'flotte.recette.santinova-soft.org',
+      href: 'https://flotte.recette.santinova-soft.org',
+    },
+    {
+      icon: '🎧',
+      color: 'orange',
+      name: 'Podcasts Itinova',
+      url: 'podcasts.recette.santinova-soft.org',
+      href: 'https://podcasts.recette.santinova-soft.org',
+    },
+  ],
+};
+
+const PRODUCTION = {
+  label: 'PRODUCTION',
+  color: 'emerald',
+  ip: '180.149.196.138',
+  os: 'Debian GNU/Linux 12',
+  cpu: '8 vCores',
+  ram: '16 Go',
+  disk: '246 Go',
+  services: [
+    {
+      icon: GitBranch,
+      color: 'purple',
+      name: 'Gitea',
+      url: 'git.santinova-soft.org',
+      desc: 'Dépôt Git principal',
+      href: 'https://git.santinova-soft.org',
+    },
+    {
+      icon: LayoutDashboard,
+      color: 'blue',
+      name: 'Dashboard',
+      url: 'dashboard.santinova-soft.org',
+      desc: 'Monitoring temps réel',
+      href: 'https://dashboard.santinova-soft.org',
+    },
+    {
+      icon: Globe,
+      color: 'teal',
+      name: 'Portail Applicatif',
+      url: 'portail.santinova-soft.org',
+      desc: 'Vitrine applicative production',
+      href: 'https://portail.santinova-soft.org',
+    },
+    {
+      icon: Shield,
+      color: 'gray',
+      name: 'Traefik',
+      url: 'Reverse Proxy SSL',
+      desc: "Let's Encrypt — Routage dynamique",
+    },
+  ],
+};
+
+const CICD_STEPS = [
+  { icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
+  { icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
+  { icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
+  { icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
+  { icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
+];
+
+/* ─────────────────────────────────────────────
+   Helpers de couleur
+───────────────────────────────────────────── */
+const colorMap = {
+  purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
+  blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
+  teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
+  gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
+  green: 'border-green-500/40 bg-green-500/10 text-green-300',
+  indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
+  cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
+  pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
+  yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
+  orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
+};
+
+/* ─────────────────────────────────────────────
+   Composants
+───────────────────────────────────────────── */
+function ServerBadge({ env }) {
+  const isAmber = env.color === 'amber';
+  const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
+  const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
+  return (
+    <div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
+      {[
+        { icon: Server, label: env.ip },
+        { icon: Cpu, label: env.cpu },
+        { icon: Activity, label: env.ram + ' RAM' },
+        { icon: HardDrive, label: env.disk + ' Disque' },
+        { icon: Network, label: env.os },
+      ].map(({ icon: Icon, label }) => (
+        <div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
+          <Icon className="w-3.5 h-3.5 text-gray-500" />
+          <span>{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ServiceCard({ item, withDb = false }) {
+  const cls = colorMap[item.color] || colorMap.gray;
+  const Icon = item.icon;
+  return (
+    <div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
+      <div className="mt-0.5 flex-shrink-0">
+        {typeof Icon === 'string' ? (
+          <span className="text-xl">{Icon}</span>
+        ) : (
+          <Icon className="w-5 h-5" />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-white">{item.name}</span>
+          {item.href && (
+            <a
+              href={item.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-500 hover:text-gray-300 transition-colors"
+            >
+              <ExternalLink className="w-3 h-3" />
+            </a>
+          )}
+        </div>
+        <p className="text-xs text-gray-400 truncate">{item.url}</p>
+        {item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
+      </div>
+      {withDb && (
+        <div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
+          <Database className="w-3 h-3" />
+          <span>MySQL</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SectionTitle({ children, color = 'amber' }) {
+  const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
+  return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
+}
+
+/* ─────────────────────────────────────────────
+   Page principale
+───────────────────────────────────────────── */
+export default function DocumentationPage() {
+  const [schemaOpen, setSchemaOpen] = useState(true);
+
+  return (
+    <div className="space-y-8 pb-12">
+      {/* ── En-tête ── */}
+      <div className="flex items-center gap-4">
+        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
+          <BookOpen className="w-6 h-6 text-white" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
+          <p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette &amp; Production</p>
+        </div>
+        <div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+          <Clock className="w-3.5 h-3.5 text-emerald-400" />
+          <span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
+        </div>
+      </div>
+
+      {/* ── Schéma d'architecture ── */}
+      <div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
+        <button
+          onClick={() => setSchemaOpen((v) => !v)}
+          className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
+        >
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
+              <Network className="w-4 h-4 text-blue-400" />
+            </div>
+            <span className="font-semibold text-white">Schéma d'Architecture</span>
+          </div>
+          {schemaOpen ? (
+            <ChevronUp className="w-5 h-5 text-gray-400" />
+          ) : (
+            <ChevronDown className="w-5 h-5 text-gray-400" />
+          )}
+        </button>
+        {schemaOpen && (
+          <div className="px-6 pb-6">
+            <img
+              src="/infra_schema_v2.png"
+              alt="Schéma d'architecture infrastructure Santinova"
+              className="w-full rounded-xl border border-dark-700 shadow-2xl"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* ── Grille Recette / CI-CD / Production ── */}
+      <div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">
+
+        {/* ── RECETTE ── */}
+        <div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
+            <h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
+            <span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
+          </div>
+          <ServerBadge env={RECETTE} />
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Infra de base */}
+            <div>
+              <SectionTitle color="amber">Infrastructure de base</SectionTitle>
+              <div className="space-y-2">
+                {RECETTE.infra.map((item) => (
+                  <ServiceCard key={item.name} item={item} />
+                ))}
+              </div>
+            </div>
+            {/* Applications */}
+            <div>
+              <SectionTitle color="amber">Applications déployées</SectionTitle>
+              <div className="space-y-2">
+                {RECETTE.apps.map((item) => (
+                  <ServiceCard key={item.name} item={item} withDb />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── CI/CD Pipeline ── */}
+        <div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
+          <span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
+          {CICD_STEPS.map((step, i) => {
+            const Icon = step.icon;
+            return (
+              <React.Fragment key={step.label}>
+                <div className="flex flex-col items-center gap-1 group">
+                  <div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
+                    <Icon className="w-5 h-5 text-blue-400" />
+                  </div>
+                  <span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
+                </div>
+                {i < CICD_STEPS.length - 1 && (
+                  <div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
+                )}
+              </React.Fragment>
+            );
+          })}
+          <div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
+            <ArrowRight className="w-4 h-4 text-blue-400" />
+            <span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
+          </div>
+        </div>
+
+        {/* ── PRODUCTION ── */}
+        <div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
+            <h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
+            <span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
+          </div>
+          <ServerBadge env={PRODUCTION} />
+
+          <SectionTitle color="emerald">Services actifs</SectionTitle>
+          <div className="space-y-2 mb-4">
+            {PRODUCTION.services.map((item) => (
+              <ServiceCard key={item.name} item={item} />
+            ))}
+          </div>
+
+          {/* Carte "Applications à venir" */}
+          <div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
+            <Package className="w-5 h-5 text-gray-500" />
+            <div>
+              <p className="text-sm font-semibold text-gray-400">Applications à venir</p>
+              <p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
+            </div>
+          </div>
+
+          {/* Badge metrics-collector */}
+          <div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
+            <Activity className="w-3.5 h-3.5 text-emerald-400" />
+            <span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Légende technologique ── */}
+      <div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
+        <h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {[
+            { emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
+            { emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
+            { emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
+            { emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
+          ].map((t) => (
+            <div
+              key={t.label}
+              className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
+            >
+              <span className="text-2xl">{t.emoji}</span>
+              <div>
+                <p className="text-sm font-semibold text-white">{t.label}</p>
+                <p className="text-xs text-gray-500">{t.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/GiteaPage.jsx

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+import {
+  GitBranch,
+  RefreshCw,
+  ExternalLink,
+  Lock,
+  Unlock,
+  GitCommit,
+  Clock,
+  User,
+  Code,
+} from 'lucide-react';
+import { getGiteaRepos, getGiteaCommits } from '../utils/api';
+
+function formatDate(dateStr) {
+  if (!dateStr) return 'N/A';
+  try {
+    return new Date(dateStr).toLocaleString('fr-FR');
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatSize(kb) {
+  if (!kb) return 'N/A';
+  if (kb < 1024) return `${kb} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+
+export default function GiteaPage() {
+  const [repos, setRepos] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRepo, setSelectedRepo] = useState(null);
+  const [commits, setCommits] = useState([]);
+  const [loadingCommits, setLoadingCommits] = useState(false);
+
+  const fetchRepos = async () => {
+    setLoading(true);
+    try {
+      const res = await getGiteaRepos();
+      setRepos(res.data);
+    } catch (err) {
+      console.error('Erreur chargement repos:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchCommits = async (fullName) => {
+    setLoadingCommits(true);
+    setSelectedRepo(fullName);
+    try {
+      const [owner, repo] = fullName.split('/');
+      const res = await getGiteaCommits(owner, repo);
+      setCommits(res.data);
+    } catch (err) {
+      console.error('Erreur chargement commits:', err);
+      setCommits([]);
+    } finally {
+      setLoadingCommits(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRepos();
+  }, []);
+
+  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">
+            <GitBranch className="w-7 h-7 text-primary-400" />
+            Dépôts Gitea
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Explorez les dépôts sur{' '}
+            <a
+              href="https://git.recette.santinova-soft.org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary-400 hover:text-primary-300"
+            >
+              git.recette.santinova-soft.org
+            </a>
+          </p>
+        </div>
+        <button
+          onClick={fetchRepos}
+          className="btn-secondary flex items-center gap-2"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Rafraîchir
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Repos List */}
+        <div className="space-y-3">
+          <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
+            Dépôts ({repos.length})
+          </h3>
+          {loading ? (
+            <div className="card p-8 text-center">
+              <RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
+            </div>
+          ) : repos.length === 0 ? (
+            <div className="card p-8 text-center">
+              <GitBranch className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+              <p className="text-gray-400">Aucun dépôt trouvé</p>
+            </div>
+          ) : (
+            repos.map((repo) => (
+              <div
+                key={repo.id}
+                className={`card p-4 cursor-pointer transition-all ${
+                  selectedRepo === repo.fullName
+                    ? 'border-primary-500/50 bg-primary-500/5'
+                    : 'hover:border-dark-600'
+                }`}
+                onClick={() => fetchCommits(repo.fullName)}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <Code className="w-4 h-4 text-primary-400" />
+                      <h4 className="text-sm font-semibold text-white">
+                        {repo.name}
+                      </h4>
+                      {repo.private ? (
+                        <Lock className="w-3 h-3 text-gray-500" />
+                      ) : (
+                        <Unlock className="w-3 h-3 text-gray-500" />
+                      )}
+                    </div>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {repo.description || 'Pas de description'}
+                    </p>
+                    <div className="flex items-center gap-4 mt-2">
+                      {repo.language && (
+                        <span className="text-xs text-gray-400">
+                          {repo.language}
+                        </span>
+                      )}
+                      <span className="text-xs text-gray-500">
+                        {formatSize(repo.size)}
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        Mis à jour: {formatDate(repo.updatedAt)}
+                      </span>
+                    </div>
+                  </div>
+                  <a
+                    href={repo.htmlUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-500 hover:text-primary-400 transition-colors"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Commits */}
+        <div className="space-y-3">
+          <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
+            {selectedRepo
+              ? `Commits — ${selectedRepo}`
+              : 'Sélectionnez un dépôt'}
+          </h3>
+          {!selectedRepo ? (
+            <div className="card p-8 text-center">
+              <GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+              <p className="text-gray-400 text-sm">
+                Cliquez sur un dépôt pour voir ses commits
+              </p>
+            </div>
+          ) : loadingCommits ? (
+            <div className="card p-8 text-center">
+              <RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
+            </div>
+          ) : commits.length === 0 ? (
+            <div className="card p-8 text-center">
+              <GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+              <p className="text-gray-400">Aucun commit trouvé</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {commits.map((commit, idx) => (
+                <div key={commit.sha || idx} className="card p-3">
+                  <div className="flex items-start gap-3">
+                    <div className="mt-1">
+                      <GitCommit className="w-4 h-4 text-gray-500" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-gray-200 truncate">
+                        {commit.message}
+                      </p>
+                      <div className="flex items-center gap-3 mt-1">
+                        <code className="text-xs bg-dark-700 text-primary-400 px-1.5 py-0.5 rounded font-mono">
+                          {commit.shortSha}
+                        </code>
+                        <span className="text-xs text-gray-500 flex items-center gap-1">
+                          <User className="w-3 h-3" />
+                          {commit.author}
+                        </span>
+                        <span className="text-xs text-gray-500 flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          {formatDate(commit.date)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/InventairePage.jsx

@@ -0,0 +1,458 @@
+import React, { useState, useEffect } from '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 = [
+  {
+    id: 'itinova-contacts',
+    name: 'Itinova Contacts',
+    repoName: 'itinova-contacts',
+    urlRecette: 'https://contacts.recette.santinova-soft.org',
+    urlProd: 'https://contacts.santinova-soft.org',
+  },
+  {
+    id: 'itinova-podcasts',
+    name: 'Itinova Podcasts',
+    repoName: 'itinova-podcasts',
+    urlRecette: 'https://podcasts.recette.santinova-soft.org',
+    urlProd: 'https://podcasts.santinova-soft.org',
+  },
+  {
+    id: 'veille-reglementaire',
+    name: 'Veille Réglementaire',
+    repoName: 'veille-reglementaire',
+    urlRecette: 'https://veille.recette.santinova-soft.org',
+    urlProd: 'https://veille.santinova-soft.org',
+  },
+  {
+    id: 'itinova-vehicle-exchange',
+    name: 'Itinova Gestion de Flotte',
+    repoName: 'itinova-vehicle-exchange',
+    urlRecette: 'https://flotte.recette.santinova-soft.org',
+    urlProd: 'https://flotte.santinova-soft.org',
+  },
+  {
+    id: 'sonum',
+    name: 'SONUM',
+    repoName: 'sonum',
+    urlRecette: 'https://sonum.recette.santinova-soft.org',
+    urlProd: 'https://sonum.santinova-soft.org',
+  },
+  {
+    id: 'demat-facturation-dsi',
+    name: 'Démat. Facturation DSI',
+    repoName: 'demat-facturation-dsi',
+    urlRecette: 'https://demat-facturation.recette.santinova-soft.org',
+    urlProd: 'https://demat-facturation.santinova-soft.org',
+  },
+  {
+    id: 'facturation-santinova',
+    name: 'Facturation Santinova',
+    repoName: 'facturation-santinova',
+    urlRecette: 'https://facturation.recette.santinova-soft.org',
+    urlProd: null,
+  },
+  {
+    id: 'formation-manager-itinova',
+    name: 'Formation Manager',
+    repoName: 'formation-manager-itinova',
+    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',
+    repoName: 'portail-santinova',
+    urlRecette: 'https://portail.recette.santinova-soft.org',
+    urlProd: 'https://portail.santinova-soft.org',
+  },
+  {
+    id: 'manus-dashboard',
+    name: 'Dashboard',
+    repoName: 'manus-dashboard',
+    urlRecette: 'https://dashboard.recette.santinova-soft.org',
+    urlProd: 'https://dashboard.santinova-soft.org',
+  },
+];
+
+
+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 italic">
+        <Minus className="w-3 h-3" />
+        Non déployé
+      </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="Recette déployée, production vide">
+        <ArrowUp className="w-3 h-3" />
+        Non déployé en prod
+      </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 (!version) {
+    if (loading) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
+          <Tag className="w-3 h-3" />
+          Chargement...
+        </span>
+      );
+    }
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
+        <AlertCircle className="w-3 h-3" />
+        Non déployé
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-blue-900/40 text-blue-300 border border-blue-700/40">
+      <Tag className="w-3 h-3" />
+      {version}
+    </span>
+  );
+}
+
+function RepoBadge({ present, url, label }) {
+  if (!present) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+        <span className="text-gray-500 text-xs">Absent</span>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-center gap-1.5">
+        <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-1 truncate max-w-[180px]"
+          title={url}
+        >
+          {label}
+          <ExternalLink className="w-3 h-3 flex-shrink-0" />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default function InventairePage() {
+  const [inventory, setInventory] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [lastUpdate, setLastUpdate] = useState(null);
+
+  const fetchInventory = async () => {
+    setLoading(true);
+    try {
+      const res = await api.get('/inventory');
+      setInventory(res.data);
+      setLastUpdate(new Date());
+    } catch (err) {
+      console.error('Erreur chargement inventaire:', err);
+      // Fallback : construire l'inventaire depuis la config statique
+      const fallback = APPS_CONFIG.map((app) => ({
+        ...app,
+        repoRecette: { present: false, url: null, version: null },
+        repoProd: { present: false, url: null, version: null },
+      }));
+      setInventory(fallback);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Auto-refresh toutes les 5 minutes
+  useEffect(() => {
+    fetchInventory();
+    const interval = setInterval(fetchInventory, 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  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">
+            <Table className="w-7 h-7 text-emerald-400" />
+            Inventaire des Applications
+          </h2>
+          <p className="text-gray-400 mt-1">
+            État des dépôts Git et versions déployées par environnement
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          {lastUpdate && (
+            <span className="text-xs text-gray-500">
+              Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
+            </span>
+          )}
+          <button
+            onClick={fetchInventory}
+            disabled={loading}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            Rafraîchir
+          </button>
+        </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">
+          <CheckCircle className="w-4 h-4 text-green-500" />
+          Dépôt présent
+        </div>
+        <div className="flex items-center gap-1.5">
+          <XCircle className="w-4 h-4 text-red-500" />
+          Dépôt absent
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Tag className="w-4 h-4 text-blue-400" />
+          Version (dernier commit)
+        </div>
+      </div>
+
+      {/* Tableau */}
+      <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-dark-700">
+                <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" />
+                    Recette
+                  </div>
+                </th>
+                <th className="text-center px-4 py-3 text-xs font-semibold text-green-400 uppercase tracking-wider" colSpan={2}>
+                  <div className="flex items-center justify-center gap-2">
+                    <GitBranch className="w-4 h-4" />
+                    Production
+                  </div>
+                </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>
+                <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>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-dark-700">
+              {loading && inventory.length === 0
+                ? APPS_CONFIG.map((app) => (
+                    <tr key={app.id} className="hover:bg-dark-800/30 transition-colors">
+                      <td className="px-4 py-3">
+                        <span className="text-sm font-medium text-white">{app.name}</span>
+                      </td>
+                      {[...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>
+                      ))}
+                    </tr>
+                  ))
+                : inventory.map((app) => {
+                    const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
+                    return (
+                    <tr key={app.id} className={`hover:bg-dark-800/30 transition-colors${isInfra ? ' bg-amber-950/10 border-l-2 border-amber-500/40' : ''}`}>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-col">
+                          <div className="flex items-center gap-2">
+                            <span className={`text-sm font-medium ${isInfra ? 'text-amber-300' : 'text-white'}`}>{app.name}</span>
+                            {isInfra && (
+                              <span className="text-xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 border border-amber-500/25 font-semibold">Infra</span>
+                            )}
+                          </div>
+                          <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
+                          present={app.repoRecette?.present}
+                          url={app.repoRecette?.url}
+                          label={`git.recette/…/${app.repoName}`}
+                        />
+                      </td>
+                      {/* Recette - Version */}
+                      <td className="px-3 py-3 text-center">
+                        <VersionBadge
+                          version={app.repoRecette?.version}
+                          loading={loading}
+                        />
+                      </td>
+                      {/* Prod - Dépôt */}
+                      <td className="px-3 py-3">
+                        <RepoBadge
+                          present={app.repoProd?.present}
+                          url={app.repoProd?.url}
+                          label={`git.santinova/…/${app.repoName}`}
+                        />
+                      </td>
+                      {/* Prod - Version */}
+                      <td className="px-3 py-3 text-center">
+                        <VersionBadge
+                          version={app.repoProd?.version}
+                          loading={loading}
+                        />
+                      </td>
+                    </tr>
+                  );
+                  })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+  );
+}

frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { Lock, User, AlertCircle, Server } from 'lucide-react';
+import { login } from '../utils/api';
+
+export default function LoginPage({ onLogin }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await login(username, password);
+      localStorage.setItem('dashboard_token', response.data.token);
+      onLogin(response.data);
+    } catch (err) {
+      setError(
+        err.response?.data?.error || 'Erreur de connexion. Veuillez réessayer.'
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-dark-950 px-4">
+      <div className="w-full max-w-md">
+        {/* Logo / Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
+            <Server className="w-8 h-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-white">
+            Dashboard {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
+          </h1>
+          <p className="text-gray-400 mt-2">Gestion des applications</p>
+        </div>
+
+        {/* Login Form */}
+        <div className="card p-8">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            <div>
+              <label
+                htmlFor="username"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Nom d'utilisateur
+              </label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                <input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder="Entrez votre identifiant"
+                  required
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Mot de passe
+              </label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder="Entrez votre mot de passe"
+                  required
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn-primary w-full flex items-center justify-center gap-2 py-3"
+            >
+              {loading ? (
+                <>
+                  <svg
+                    className="animate-spin h-5 w-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                      fill="none"
+                    />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    />
+                  </svg>
+                  Connexion...
+                </>
+              ) : (
+                <>
+                  <Lock className="w-4 h-4" />
+                  Se connecter
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+
+        <p className="text-center text-gray-600 text-sm mt-6">
+          Santinova Soft &mdash; Serveur de recette
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/MonitoringPage.jsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Cpu,
+  MemoryStick,
+  HardDrive,
+  Network,
+  Activity,
+  RefreshCw,
+  Clock,
+  Server,
+  TrendingUp,
+} from 'lucide-react';
+import { getServerMetrics } from '../utils/api';
+
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'Ko', 'Mo', 'Go', 'To'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+function formatUptime(seconds) {
+  if (!seconds) return 'N/A';
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  if (days > 0) return `${days}j ${hours}h ${mins}m`;
+  if (hours > 0) return `${hours}h ${mins}m`;
+  return `${mins}m`;
+}
+
+function GaugeBar({ value, max = 100, color = 'primary', label, sublabel }) {
+  const pct = Math.min(100, Math.round((value / max) * 100));
+  const colorMap = {
+    primary: { bar: 'bg-primary-500', text: 'text-primary-400', border: 'border-primary-500/30' },
+    emerald: { bar: 'bg-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/30' },
+    amber: { bar: 'bg-amber-500', text: 'text-amber-400', border: 'border-amber-500/30' },
+    red: { bar: 'bg-red-500', text: 'text-red-400', border: 'border-red-500/30' },
+  };
+  const dangerColor = pct > 85 ? 'red' : pct > 65 ? 'amber' : color;
+  const c = colorMap[dangerColor] || colorMap.primary;
+
+  return (
+    <div className={`card p-5 border ${c.border}`}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm font-medium text-gray-300">{label}</span>
+        <span className={`text-2xl font-bold ${c.text}`}>{pct}%</span>
+      </div>
+      <div className="w-full bg-dark-700 rounded-full h-3 mb-3 overflow-hidden">
+        <div
+          className={`h-3 rounded-full transition-all duration-700 ${c.bar}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <p className="text-xs text-gray-500">{sublabel}</p>
+    </div>
+  );
+}
+
+function MetricCard({ icon: Icon, label, value, sub, color = 'primary' }) {
+  const colorMap = {
+    primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
+    emerald: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
+    amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+    blue: 'text-blue-400 bg-blue-500/10 border-blue-500/20',
+  };
+  return (
+    <div className={`card p-5 border ${colorMap[color]}`}>
+      <div className="flex items-start gap-4">
+        <div className={`p-3 rounded-xl border ${colorMap[color]}`}>
+          <Icon className="w-6 h-6" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className="text-xl font-bold text-white truncate">{value}</p>
+          {sub && <p className="text-xs text-gray-500 mt-1">{sub}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function MonitoringPage() {
+  const [metrics, setMetrics] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [lastUpdate, setLastUpdate] = useState(null);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  const fetchMetrics = useCallback(async () => {
+    try {
+      const res = await getServerMetrics();
+      setMetrics(res.data);
+      setLastUpdate(new Date());
+    } catch (err) {
+      console.error('Erreur métriques:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchMetrics();
+  }, [fetchMetrics]);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const interval = setInterval(fetchMetrics, 10000);
+    return () => clearInterval(interval);
+  }, [autoRefresh, fetchMetrics]);
+
+  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">
+            <Activity className="w-7 h-7 text-primary-400" />
+            Monitoring Serveur
+          </h2>
+          <p className="text-gray-400 mt-1">
+            Consommation des ressources en temps réel
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          {lastUpdate && (
+            <span className="text-xs text-gray-500 flex items-center gap-1">
+              <Clock className="w-3.5 h-3.5" />
+              Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
+            </span>
+          )}
+          <button
+            onClick={() => setAutoRefresh((v) => !v)}
+            className={`btn-secondary text-sm flex items-center gap-2 ${autoRefresh ? 'text-emerald-400' : ''}`}
+          >
+            <Activity className="w-4 h-4" />
+            {autoRefresh ? 'Auto (10s)' : 'Manuel'}
+          </button>
+          <button
+            onClick={fetchMetrics}
+            disabled={loading}
+            className="btn-secondary flex items-center gap-2 text-sm"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            Rafraîchir
+          </button>
+        </div>
+      </div>
+
+      {loading && !metrics ? (
+        <div className="card p-12 text-center">
+          <RefreshCw className="w-8 h-8 text-primary-400 animate-spin mx-auto mb-3" />
+          <p className="text-gray-400">Chargement des métriques...</p>
+        </div>
+      ) : metrics?.error ? (
+        <div className="card p-8 text-center border border-red-500/20">
+          <p className="text-red-400">Erreur : {metrics.error}</p>
+        </div>
+      ) : metrics ? (
+        <>
+          {/* Jauges principales */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <GaugeBar
+              value={metrics.cpu?.usage || 0}
+              label="Processeur (CPU)"
+              sublabel={`Load avg: ${metrics.load?.load1?.toFixed(2)} / ${metrics.load?.load5?.toFixed(2)} / ${metrics.load?.load15?.toFixed(2)}`}
+              color="primary"
+            />
+            <GaugeBar
+              value={metrics.memory?.usagePercent || 0}
+              label="Mémoire RAM"
+              sublabel={`${formatBytes(metrics.memory?.used)} utilisés sur ${formatBytes(metrics.memory?.total)} — ${formatBytes(metrics.memory?.available)} disponibles`}
+              color="emerald"
+            />
+            <GaugeBar
+              value={metrics.disk?.usagePercent || 0}
+              label="Espace Disque"
+              sublabel={`${formatBytes(metrics.disk?.used)} utilisés sur ${formatBytes(metrics.disk?.total)} — ${formatBytes(metrics.disk?.free)} libres`}
+              color="amber"
+            />
+          </div>
+
+          {/* Métriques détaillées */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <MetricCard
+              icon={Server}
+              label="Uptime serveur"
+              value={formatUptime(metrics.uptime)}
+              sub="Depuis le dernier redémarrage"
+              color="primary"
+            />
+            <MetricCard
+              icon={TrendingUp}
+              label="Charge système (1 min)"
+              value={metrics.load?.load1?.toFixed(2) || 'N/A'}
+              sub={`5 min: ${metrics.load?.load5?.toFixed(2)} — 15 min: ${metrics.load?.load15?.toFixed(2)}`}
+              color="blue"
+            />
+            <MetricCard
+              icon={Network}
+              label="Réseau — Reçu"
+              value={formatBytes(metrics.network?.rx)}
+              sub="Total depuis le démarrage"
+              color="emerald"
+            />
+            <MetricCard
+              icon={Network}
+              label="Réseau — Envoyé"
+              value={formatBytes(metrics.network?.tx)}
+              sub="Total depuis le démarrage"
+              color="amber"
+            />
+          </div>
+
+          {/* Tableau récapitulatif */}
+          <div className="card overflow-hidden">
+            <div className="px-6 py-4 border-b border-dark-700">
+              <h3 className="text-base font-semibold text-white flex items-center gap-2">
+                <HardDrive className="w-5 h-5 text-primary-400" />
+                Récapitulatif des ressources
+              </h3>
+            </div>
+            <div className="divide-y divide-dark-700">
+              {[
+                { label: 'CPU — Utilisation', value: `${metrics.cpu?.usage?.toFixed(1) || 0}%`, status: metrics.cpu?.usage > 85 ? 'critical' : metrics.cpu?.usage > 65 ? 'warning' : 'ok' },
+                { label: 'RAM — Utilisée', value: `${formatBytes(metrics.memory?.used)} / ${formatBytes(metrics.memory?.total)}`, status: metrics.memory?.usagePercent > 85 ? 'critical' : metrics.memory?.usagePercent > 65 ? 'warning' : 'ok' },
+                { label: 'RAM — Disponible', value: formatBytes(metrics.memory?.available), status: 'ok' },
+                { label: 'Disque — Utilisé', value: `${formatBytes(metrics.disk?.used)} / ${formatBytes(metrics.disk?.total)}`, status: metrics.disk?.usagePercent > 85 ? 'critical' : metrics.disk?.usagePercent > 65 ? 'warning' : 'ok' },
+                { label: 'Disque — Libre', value: formatBytes(metrics.disk?.free), status: 'ok' },
+                { label: 'Réseau — Trafic entrant', value: formatBytes(metrics.network?.rx), status: 'ok' },
+                { label: 'Réseau — Trafic sortant', value: formatBytes(metrics.network?.tx), status: 'ok' },
+                { label: 'Uptime', value: formatUptime(metrics.uptime), status: 'ok' },
+              ].map((row) => (
+                <div key={row.label} className="px-6 py-3 flex items-center justify-between hover:bg-dark-800/50 transition-colors">
+                  <span className="text-sm text-gray-400">{row.label}</span>
+                  <div className="flex items-center gap-3">
+                    <span className="text-sm font-medium text-white">{row.value}</span>
+                    <span className={`w-2 h-2 rounded-full ${
+                      row.status === 'critical' ? 'bg-red-400' :
+                      row.status === 'warning' ? 'bg-amber-400' : 'bg-emerald-400'
+                    }`} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

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>
+  );
+}

frontend/src/utils/api.js

@@ -0,0 +1,73 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  withCredentials: true,
+});
+
+// Intercepteur pour gérer les erreurs d'auth
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('dashboard_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      localStorage.removeItem('dashboard_token');
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
+
+// Auth
+export const login = (username, password) =>
+  api.post('/auth/login', { username, password });
+
+export const logout = () => api.post('/auth/logout');
+
+export const getMe = () => api.get('/auth/me');
+
+// Apps
+export const getApps = () => api.get('/apps');
+export const getApp = (id) => api.get(`/apps/${id}`);
+export const checkApp = (id) => api.post(`/apps/${id}/check`);
+export const deployApp = (id) => api.post(`/apps/${id}/deploy`);
+export const getAppLogs = (id, tail = 100) =>
+  api.get(`/apps/${id}/logs`, { params: { tail } });
+
+// App creation
+export const getAvailableStacks = () => api.get('/apps-config/stacks');
+export const createApp = (formData) =>
+  api.post('/apps-config/create', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 600000, // 10 minutes timeout
+  });
+
+// Deployments
+export const getDeployments = (appId) =>
+  api.get('/deployments', { params: { appId } });
+
+// Gitea
+export const getGiteaRepos = () => api.get('/gitea/repos');
+export const getGiteaCommits = (owner, repo) =>
+  api.get(`/gitea/repos/${owner}/${repo}/commits`);
+
+// Docker
+export const getContainers = () => api.get('/docker/containers');
+
+// System
+export const getSystemInfo = () => api.get('/system/info');
+export const getServerMetrics = () => api.get('/system/metrics');
+
+// Container control
+export const startApp = (id) => api.post(`/apps/${id}/start`);
+export const stopApp = (id) => api.post(`/apps/${id}/stop`);
+export const restartApp = (id) => api.post(`/apps/${id}/restart`);

frontend/tailwind.config.js

@@ -0,0 +1,37 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        dark: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

frontend/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3001',
+      '/ws': {
+        target: 'ws://localhost:3001',
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+  },
+});