chore: inclusion complète du code source (src/) - suppression submodule imbriqué

src/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>Manus 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>

src/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"
+  }
+}

src/frontend/postcss.config.js

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

src/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>

src/frontend/src/App.jsx

@@ -0,0 +1,134 @@
+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 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 />;
+      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>
+  );
+}

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

src/frontend/src/components/AppCard.jsx

@@ -0,0 +1,361 @@
+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;
+
+  return (
+    <div className="card overflow-hidden">
+      {/* 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>
+  );
+}

src/frontend/src/components/Sidebar.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Server,
+  LayoutDashboard,
+  Box,
+  GitBranch,
+  ScrollText,
+  Container,
+  LogOut,
+  Wifi,
+  WifiOff,
+  Activity,
+} 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 },
+];
+
+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">Manus</h1>
+            <p className="text-xs text-gray-500">Dashboard</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = currentPage === item.id;
+          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
+                  ? 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
+                  : '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>
+  );
+}

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

src/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 };
+}

src/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;
+}

src/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>
+);

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

src/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.santinova-soft.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary-400 hover:text-primary-300"
+              >
+                git.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>
+  );
+}

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

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

src/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.santinova-soft.org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary-400 hover:text-primary-300"
+            >
+              git.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>
+  );
+}

src/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,138 @@
+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">Manus Dashboard</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>
+  );
+}

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

src/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`);

src/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: [],
+};

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