feat: add applications management to the agent and backend

- Updated agent to version 1.4.0 with new endpoints for managing Docker Compose applications.
- Implemented API requests in the backend for listing, creating, editing, and deploying applications.
- Introduced a new AppsModal component in the frontend for user interaction with applications.
- Added YAML editor for editing Docker Compose files with validation.
- Enhanced VpsCard component to include options for managing applications.
- Updated client API functions to support new application management features.

vps-monitor/frontend/src/components/AppsModal.jsx

@@ -0,0 +1,417 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  Boxes, FilePlus2, RefreshCw, Pencil, Rocket, ArrowLeft, AlertTriangle,
+  FolderOpen, Terminal as TerminalIcon,
+} from 'lucide-react'
+import Modal from './ui/Modal'
+import YamlEditor from './YamlEditor'
+import { Button, inputClass, Skeleton, EmptyState } from './ui/controls'
+import { useToast } from './ui/Toast'
+import { fetchApps, fetchAppCompose, saveAppCompose, createApp, deployApp } from '../api/client'
+import { formatBytes } from '../lib/format'
+
+const APP_NAME_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/
+
+const COMPOSE_FILENAMES = ['compose.yaml', 'compose.yml', 'docker-compose.yml', 'docker-compose.yaml']
+
+const TEMPLATE = (name) => `services:
+  ${name}:
+    image: nginx:alpine
+    container_name: ${name}
+    restart: unless-stopped
+    ports:
+      - "8080:80"
+    volumes:
+      - ./data:/usr/share/nginx/html:ro
+`
+
+export default function AppsModal({ vps, onClose }) {
+  const toast = useToast()
+
+  const [view,    setView]    = useState('list')   // 'list' | 'editor' | 'create'
+  const [apps,    setApps]    = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error,   setError]   = useState(null)
+  const [busy,    setBusy]    = useState(null)     // nom de l'app en cours de déploiement
+
+  // Édition
+  const [editing,  setEditing]  = useState(null)   // { name, file, path, original }
+  const [content,  setContent]  = useState('')
+  const [saving,   setSaving]   = useState(false)
+  const [saveError, setSaveError] = useState(null)
+  const [leaving,  setLeaving]  = useState(false)  // demande de sortie avec modifications
+
+  // Création — le modèle suit le nom saisi tant que l'utilisateur n'a pas
+  // touché à l'éditeur ; dès qu'il y écrit, on ne réécrit plus rien.
+  const [newName,     setNewName]     = useState('')
+  const [newFilename, setNewFilename] = useState('compose.yaml')
+  const [newContent,  setNewContent]  = useState('')
+  const [templateTouched, setTemplateTouched] = useState(false)
+
+  // Sortie de déploiement
+  const [output, setOutput] = useState(null)
+
+  const dirty = view === 'editor' && editing !== null && content !== editing.original
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setApps(await fetchApps(vps.id))
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [vps.id])
+
+  useEffect(() => { load() }, [load])
+
+  // ─── Actions ──────────────────────────────────────────────────────────────
+
+  const openEditor = async (app) => {
+    setBusy(app.name)
+    setSaveError(null)
+    setOutput(null)
+    try {
+      const data = await fetchAppCompose(vps.id, app.name)
+      setEditing({ name: data.name, file: data.file, path: data.path, original: data.content })
+      setContent(data.content)
+      setView('editor')
+    } catch (e) {
+      toast.error(`Lecture de ${app.name} impossible : ${e.message}`)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const handleSave = async (deploy) => {
+    setSaving(true)
+    setSaveError(null)
+    setOutput(null)
+    try {
+      const result = await saveAppCompose(vps.id, editing.name, content, deploy)
+      setEditing(prev => ({ ...prev, original: content, file: result.file }))
+      toast.success(
+        deploy ? `${editing.name} enregistrée et déployée.` : `${editing.name} enregistrée.`
+      )
+      if (result.output) setOutput(result.output)
+      load()
+    } catch (e) {
+      setSaveError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleCreate = async (deploy) => {
+    setSaving(true)
+    setSaveError(null)
+    setOutput(null)
+    try {
+      const result = await createApp(vps.id, {
+        name: newName.trim(), content: newContent, filename: newFilename, deploy,
+      })
+      toast.success(`Application « ${result.name} » créée dans ${result.path}.`)
+      if (result.output) setOutput(result.output)
+      await load()
+      setEditing({ name: result.name, file: result.file, path: result.path, original: newContent })
+      setContent(newContent)
+      setView('editor')
+    } catch (e) {
+      setSaveError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeploy = async (app) => {
+    setBusy(app.name)
+    setOutput(null)
+    try {
+      const result = await deployApp(vps.id, app.name)
+      toast.success(`${app.name} déployée.`)
+      setOutput(result.output)
+      load()
+    } catch (e) {
+      toast.error(`Déploiement de ${app.name} impossible : ${e.message}`)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const startCreate = () => {
+    setNewName('')
+    setNewFilename('compose.yaml')
+    setNewContent(TEMPLATE('mon-app'))
+    setTemplateTouched(false)
+    setSaveError(null)
+    setOutput(null)
+    setView('create')
+  }
+
+  const handleNewName = (value) => {
+    setNewName(value)
+    const trimmed = value.trim()
+    if (!templateTouched) setNewContent(TEMPLATE(APP_NAME_RE.test(trimmed) ? trimmed : 'mon-app'))
+  }
+
+  const handleNewContent = (value) => {
+    setTemplateTouched(true)
+    setNewContent(value)
+  }
+
+  const backToList = () => {
+    if (dirty && !leaving) { setLeaving(true); return }
+    setLeaving(false)
+    setEditing(null)
+    setSaveError(null)
+    setView('list')
+  }
+
+  const requestClose = () => {
+    if (dirty && !leaving) { setLeaving(true); return }
+    onClose()
+  }
+
+  const nameValid = APP_NAME_RE.test(newName.trim())
+
+  // ─── Rendu ────────────────────────────────────────────────────────────────
+
+  const title = {
+    list:   `Applications — ${vps.name}`,
+    editor: editing ? `${editing.name} / ${editing.file}` : 'Édition',
+    create: `Nouvelle application — ${vps.name}`,
+  }[view]
+
+  const subtitle = {
+    list:   `Fichiers compose sous /home sur ${vps.host}`,
+    editor: editing?.path,
+    create: `Créé dans /home/${newName.trim() || '<nom>'}/${newFilename}`,
+  }[view]
+
+  return (
+    <Modal
+      size="xl"
+      title={title}
+      subtitle={subtitle}
+      icon={<Boxes size={16} className="text-indigo-400 flex-shrink-0" />}
+      onClose={requestClose}
+      // Tab sert à indenter le YAML ; Échap ne doit pas jeter des modifications.
+      trapTab={false}
+      closeOnEscape={!dirty}
+      bodyClassName="flex flex-col overflow-hidden p-0"
+      headerRight={view === 'list' && (
+        <>
+          <Button variant="ghost" size="sm" icon={RefreshCw} onClick={load} disabled={loading}>
+            <span className="hidden sm:inline">Actualiser</span>
+          </Button>
+          <Button variant="primary" size="sm" icon={FilePlus2} onClick={startCreate}>
+            <span className="hidden sm:inline">Nouvelle application</span>
+          </Button>
+        </>
+      )}
+      footer={
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          {leaving ? (
+            <>
+              <p className="text-xs text-orange-300 flex items-center gap-1.5">
+                <AlertTriangle size={13} />
+                Modifications non enregistrées. Quitter sans enregistrer ?
+              </p>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={() => setLeaving(false)}>Rester</Button>
+                <Button variant="danger" size="sm" onClick={() => { setLeaving(false); setEditing(null); setView('list') }}>
+                  Abandonner
+                </Button>
+              </div>
+            </>
+          ) : view === 'list' ? (
+            <>
+              <p className="text-[11px] text-gray-600">
+                {apps.length} application{apps.length > 1 ? 's' : ''} détectée{apps.length > 1 ? 's' : ''}
+              </p>
+              <Button variant="outline" size="sm" onClick={onClose}>Fermer</Button>
+            </>
+          ) : view === 'editor' ? (
+            <>
+              <p className="text-[11px] text-gray-600">
+                {dirty
+                  ? 'Modifications non enregistrées · l\'ancienne version est sauvegardée en .bak'
+                  : 'Validé par `docker compose config` avant écriture'}
+              </p>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" icon={ArrowLeft} onClick={backToList}>Retour</Button>
+                <Button variant="secondary" size="sm" onClick={() => handleSave(false)} loading={saving} disabled={!dirty}>
+                  Enregistrer
+                </Button>
+                <Button variant="primary" size="sm" icon={Rocket} onClick={() => handleSave(true)} loading={saving}>
+                  Enregistrer et déployer
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-[11px] text-gray-600">
+                Le dossier est créé s'il n'existe pas encore.
+              </p>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" icon={ArrowLeft} onClick={() => setView('list')}>Retour</Button>
+                <Button variant="secondary" size="sm" onClick={() => handleCreate(false)} loading={saving} disabled={!nameValid}>
+                  Créer
+                </Button>
+                <Button variant="primary" size="sm" icon={Rocket} onClick={() => handleCreate(true)} loading={saving} disabled={!nameValid}>
+                  Créer et déployer
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      }
+    >
+      {/* ── Liste ── */}
+      {view === 'list' && (
+        <div className="flex-1 overflow-y-auto p-4">
+          {error && (
+            <div role="alert" className="mb-4 bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300">
+              {error}
+            </div>
+          )}
+
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 4 }, (_, i) => <Skeleton key={i} className="h-14" />)}
+            </div>
+          ) : apps.length === 0 && !error ? (
+            <EmptyState
+              icon={FolderOpen}
+              title="Aucune application détectée"
+              description="Aucun dossier de /home ne contient de fichier compose. Créez-en une pour démarrer."
+              action={<Button variant="primary" icon={FilePlus2} onClick={startCreate}>Nouvelle application</Button>}
+            />
+          ) : (
+            <ul className="divide-y divide-gray-800/60">
+              {apps.map(app => (
+                <li key={app.name} className="flex flex-wrap items-center gap-3 py-3">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-sm font-medium text-gray-200">{app.name}</span>
+                      <span className="text-[10px] font-mono text-gray-500 bg-gray-800 px-1.5 py-0.5 rounded">
+                        {app.file}
+                      </span>
+                      {app.running_containers > 0 ? (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400">
+                          {app.running_containers} conteneur{app.running_containers > 1 ? 's' : ''} actif{app.running_containers > 1 ? 's' : ''}
+                        </span>
+                      ) : (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-gray-700/40 text-gray-500">
+                          arrêtée
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-xs text-gray-600 font-mono truncate mt-0.5">
+                      {app.path} · {formatBytes(app.size)} · modifié le {new Date(app.modified).toLocaleString('fr-FR')}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    <Button variant="secondary" size="sm" icon={Pencil}
+                            onClick={() => openEditor(app)} loading={busy === app.name}>
+                      Éditer
+                    </Button>
+                    <Button variant="outline" size="sm" icon={Rocket}
+                            onClick={() => handleDeploy(app)} loading={busy === app.name}>
+                      Déployer
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
+        </div>
+      )}
+
+      {/* ── Édition ── */}
+      {view === 'editor' && editing && (
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {saveError && (
+            <div role="alert" className="m-4 mb-0 bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 whitespace-pre-wrap font-mono max-h-32 overflow-y-auto">
+              {saveError}
+            </div>
+          )}
+          <div className="p-4 pb-0 flex-1 flex flex-col overflow-hidden">
+            <YamlEditor value={content} onChange={setContent} disabled={saving} />
+            {output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
+          </div>
+        </div>
+      )}
+
+      {/* ── Création ── */}
+      {view === 'create' && (
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          {saveError && (
+            <div role="alert" className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 whitespace-pre-wrap font-mono max-h-32 overflow-y-auto">
+              {saveError}
+            </div>
+          )}
+
+          <div className="flex flex-wrap gap-3">
+            <div className="flex-1 min-w-[200px]">
+              <label htmlFor="app-name" className="block text-xs text-gray-400 mb-1">
+                Nom de l'application <span className="text-red-400" aria-hidden="true">*</span>
+              </label>
+              <input
+                id="app-name"
+                value={newName}
+                onChange={e => handleNewName(e.target.value)}
+                placeholder="mon-app"
+                autoFocus
+                className={inputClass}
+              />
+              <p className={`text-[11px] mt-1 ${newName && !nameValid ? 'text-red-400' : 'text-gray-600'}`}>
+                {newName && !nameValid
+                  ? 'Lettres, chiffres, point, tiret et souligné uniquement.'
+                  : `Dossier créé : /home/${newName.trim() || '<nom>'}`}
+              </p>
+            </div>
+            <div>
+              <label htmlFor="app-filename" className="block text-xs text-gray-400 mb-1">Nom du fichier</label>
+              <select
+                id="app-filename"
+                value={newFilename}
+                onChange={e => setNewFilename(e.target.value)}
+                className={inputClass}
+              >
+                {COMPOSE_FILENAMES.map(f => <option key={f} value={f}>{f}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <YamlEditor value={newContent} onChange={handleNewContent} disabled={saving} height="h-[38vh]" />
+
+          {output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
+        </div>
+      )}
+    </Modal>
+  )
+}
+
+function DeployOutput({ output, onClear }) {
+  return (
+    <div className="mt-4">
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="flex items-center gap-1.5 text-xs text-gray-400">
+          <TerminalIcon size={12} className="text-indigo-400" />
+          Sortie du déploiement
+        </span>
+        <button onClick={onClear} className="text-xs text-gray-500 hover:text-gray-300 transition-colors">
+          Masquer
+        </button>
+      </div>
+      <pre className="bg-gray-950 border border-gray-800 rounded-lg p-3 text-[11px] font-mono text-gray-300 whitespace-pre-wrap break-all max-h-48 overflow-y-auto">
+        {output || '(aucune sortie)'}
+      </pre>
+    </div>
+  )
+}