feat: intégration de la barre de sélection tabulaire style grille (Payant/Gratuit, 5 Travailleurs, Prompteur, Concaténeur)

README.md

@@ -5,65 +5,78 @@ Ce projet est un laboratoire d'intelligence artificielle personnel. Il agit comm
 L'interface visuelle est inspirée de l'ergonomie de Gemini, avec le logo stylisé A38 (cerveau en réseau neuronal néon) comme charte graphique centrale.
 
 ## 🏗️ Stack Technique & Architecture
-- **Backend :** FastAPI (Python) modulaire et asynchrone (httpx, asyncio).
+
-- **Frontend :** Vue.js + Tailwind CSS (Responsive / Mobile-first).
+* **Backend :** FastAPI (Python) modulaire asynchrone (httpx, asyncio)[cite: 2].
-- **Base de Données :** PostgreSQL (gestion des utilisateurs, historiques, suivi financier, rôles hiérarchiques).
+* **Frontend :** Vue.js + Tailwind CSS (Responsive / Mobile-first)[cite: 2].
-- **Traitement Documentaire :** LibreOffice Headless (génération/conversion Excel, Word, PDF).
+* **Base de Données :** PostgreSQL (gestion des utilisateurs, rôles hiérarchiques Super-Admin/Admin/User, historiques, suivi financier)[cite: 2].
-- **Déploiement :** Docker, géré via Dockge et Gitea, sécurisé sur grappe RAID.
+* **Traitement Documentaire :** LibreOffice Headless (génération/conversion Excel, Word, PDF)[cite: 2].
+* **Déploiement :** Docker, géré via Dockge et Gitea, sécurisé sur grappe RAID[cite: 2].
 
 ## 📌 Règles de Versioning (SemVer)
-Le développement suit un versioning strict (format `vX.Y.Z`) synchronisé avec les tags Gitea et GitHub, affiché dynamiquement sur l'interface :
+
-- **Majeur (X) :** Changement profond d'architecture ou refonte globale.
+Le développement suit un versioning strict (format `vX.Y.Z`) synchronisé avec les tags Gitea et GitHub, affiché dynamiquement sur l'interface[cite: 2]:
-- **Mineur (Y) :** Validation et ajout d'une nouvelle fonctionnalité de la roadmap.
+
-- **Patch (Z) :** Corrections de bugs, correctifs de sécurité ou ajustements visuels mineurs.
+* **Majeur (X) :** Changement profond d'architecture ou refonte globale[cite: 2].
+* **Mineur (Y) :** Validation et ajout d'une nouvelle fonctionnalité de la roadmap[cite: 2].
+* **Patch (Z) :** Corrections de bugs, correctifs de sécurité ou ajustements visuels mineurs[cite: 2].
 
 ## 📦 Récupération des Paquets Docker (Tags)
-Les images Docker sont construites automatiquement par les pipelines CI/CD lors de la création d'un tag.
+
-- **Sur Gitea :** Depuis la page principale de votre dépôt, naviguez dans l'onglet **Packages** (ou Paquets). Vous y trouverez le registre de conteneurs avec toutes les versions taguées (`v0.16.0`, `latest`, etc.).
+Les images Docker sont construites automatiquement par les pipelines CI/CD lors de la création d'un tag[cite: 2].
-- **Sur GitHub :** Depuis la page principale du dépôt, regardez dans la colonne de droite la section **Packages**. Cliquez dessus pour accéder au GitHub Container Registry (`ghcr.io/votre-utilisateur/aethas38-multi-ia`) et visualiser la liste des tags disponibles à tirer via Docker/Dockge.
+
+* **Sur Gitea :** Depuis la page principale de votre dépôt, naviguez dans l'onglet **Packages** (ou Paquets). Vous y trouverez le registre de conteneurs avec toutes les versions taguées (`v0.16.1`, `latest`, etc.)[cite: 2].
+* **Sur GitHub :** Depuis la page principale du dépôt, regardez dans la colonne de droite la section **Packages**. Cliquez dessus pour accéder au GitHub Container Registry (`ghcr.io/votre-utilisateur/aethas38-multi-ia`) et visualiser la liste des tags disponibles à tirer via Docker/Dockge[cite: 2].
 
 ## 🚀 ROADMAP & CAHIER DES CHARGES
 
 ### Sécurité & Infrastructure
-- [x] Installation stricte via Dockge et Gitea (création automatique des dossiers inclus).
+
-- [x] Sécurisation de la totalité du projet (fichiers, BDD PostgreSQL) sur le stockage RAID.
+* [x] Installation stricte via Dockge et Gitea (création automatique des dossiers inclus)[cite: 2].
-- [x] Mots de passe cryptés (bcrypt), protection anti-brute force.
+* [x] Sécurisation de la totalité du projet (fichiers, BDD PostgreSQL) sur le stockage RAID[cite: 2].
-- [x] Authentification 2FA obligatoire (Keepassium, Authenticator, etc.).
+* [x] Mots de passe cryptés (bcrypt), protection anti-brute force[cite: 2].
-- [x] Déconnexion automatique (timer invisible / session JWT) après 60 minutes d'inactivité.
+* [x] Authentification 2FA obligatoire (Keepassium, Authenticator, etc.)[cite: 2].
-- [x] Configuration de GitHub Actions / Gitea Actions pour la création automatique des paquets Docker (Tags SemVer + latest).
+* [x] Déconnexion automatique (timer invisible / session JWT) après 60 minutes d'inactivité[cite: 2].
-- [x] Horodatage UTC en base de données pour immunité au changement d'heure français (Prévention crash 2FA).
+* [x] Configuration de GitHub Actions / Gitea Actions pour la création automatique des paquets Docker (Tags SemVer + latest)[cite: 2].
-- [x] Rotation automatique des logs système : génération d'un fichier log par jour avec purge stricte des fichiers de plus de 7 jours.
+* [x] Horodatage UTC en base de données pour immunité au changement d'heure français (Prévention crash 2FA)[cite: 2].
-- [x] Procédure de modification sécurisée du mot de passe (Utilisateurs et Admins).
+* [x] Rotation automatique des logs système : génération d'un fichier log par jour avec purge stricte des fichiers de plus de 7 jours[cite: 2].
+* [x] Procédure de modification sécurisée du mot de passe (Utilisateurs et Admins)[cite: 2].
 
 ### Administration & Gestion des Utilisateurs
-- [x] Assistant de première installation : le premier utilisateur initiateur devient automatiquement le **Super-Admin** unique du projet.
+
-- [x] Refonte du setup initial (Super-Admin) : configuration du serveur mail (opérateurs FR/Gmail) et paramétrage complet des clés fournisseurs IA.
+* [x] Assistant de première installation : l'initiateur du projet se voit attribuer automatiquement le rôle exclusif de **Super-Admin** (un seul par projet)[cite: 2].
-- [x] Intégration de la roue crantée (Paramètres) en bas de la barre latérale.
+* [x] Refonte du setup initial (Super Admin) : configuration du serveur mail (opérateurs FR/Gmail) et paramétrage complet des clés fournisseurs IA[cite: 2].
-- [x] Page de configuration par niveau (Super-Admin, Admin, Utilisateur).
+* [x] Intégration de la roue crantée (Paramètres) en bas de la barre latérale[cite: 2].
-- [x] Upload et personnalisation d'avatar utilisateur (redimensionnement et adaptation dynamique).
+* [x] Page de configuration par niveau (Super-Admin, Admin, Utilisateur)[cite: 2].
-- [ ] Hiérarchie des rôles : Un Admin peut proposer l'élévation d'un User en Admin (soumis à validation exclusive du Super-Admin).
+* [x] Upload et personnalisation dynamique d'avatar utilisateur[cite: 2].
-- [ ] Export de l'activité Admin : Fichier Excel avec KPI, graphiques "camembert", et suivi financier par utilisateur.
+* [ ] Hiérarchie des rôles : Un Admin peut proposer l'élévation d'un User en Admin (formulaire soumis à la validation exclusive du Super Admin)[cite: 2].
-- [ ] Envoi de rapport d'activité automatisé chaque jeudi à 04h00.
+* [ ] Export de l'activité Admin : Fichier Excel avec KPI, graphiques "camembert", et suivi financier par utilisateur[cite: 2].
+* [x] Suivi financier en temps réel et vérification du budget API (mis à jour après chaque requête et affiché de manière non invasive sous le nom)[cite: 2].
+* [ ] Envoi de rapport d'activité automatisé chaque jeudi à 04h00[cite: 2].
 
 ### Expérience Utilisateur (UI/UX)
-- [x] Thème moderne (Gemini-like) et 100% compatible smartphones.
+
-- [x] Refonte de la gestion des projets : séparation Épinglés (en haut) / Non Épinglés (Récents).
+* [x] Thème moderne (Gemini-like) et 100% compatible smartphones[cite: 2].
-- [x] Arrêt de la création automatique de nouveau projet à l'ouverture.
+* [x] Refonte de la gestion des projets : séparation Épinglés (en haut) / Non Épinglés (Récents)[cite: 2].
-- [x] Intégration permanente du logo AETHAS38 en local (Setup / Login / Dashboard).
+* [x] Arrêt de la création automatique de nouveau projet à l'ouverture[cite: 2].
-- [x] Indicateur visuel (Loader/Animation) signalant que l'IA AETHAS38 "réfléchit" ou travaille.
+* [x] Intégration permanente du logo AETHAS38 en local (Setup / Login / Dashboard)[cite: 2].
-- [x] Fonctionnalité de renommage manuel des discussions/projets.
+* [x] Indicateur visuel (Loader/Animation) signalant que l'IA AETHAS38 "réfléchit" ou travaille[cite: 2].
-- [x] Affichage permanent et non invasif des soldes financiers fournisseurs sous le profil utilisateur, mis à jour après chaque requête.
+* [x] Fonctionnalité de renommage manuel des discussions/projets[cite: 2].
-- [ ] Affichage natif et fluide des images directement dans le flux de la discussion.
+* [ ] Affichage natif et fluide des images directement dans le flux de la discussion[cite: 2].
-- [ ] Système de partage des réponses sur les réseaux et messageries externes (Facebook, WhatsApp, etc.).
+* [ ] Système de partage des réponses sur les réseaux et messageries externes (Facebook, WhatsApp, etc.)[cite: 2].
 
 ### Moteur IA, Modèles & Fonctionnalités
-- [x] Cœur asynchrone pour la parallélisation des appels API (module `orchestrator.py`).
+
-- [x] Pipeline multi-agents complet avec sélection dynamique par requête :
+* [x] Cœur asynchrone pour la parallélisation des appels API (module `orchestrator.py`)[cite: 2].
-  - Sélection de 1 à 5 travailleurs IA en parallèle.
+* [x] Pipeline multi-agents complet avec sélection dynamique par requête :
-  - Si 1 seul travailleur : bypass automatique du prompteur et du concaténeur.
+  * Sélection de 1 à 5 travailleurs IA en parallèle[cite: 2].
-  - Si > 1 travailleur : chaîne complète active (1 Prompteur ➔ N Travailleurs ➔ 1 Concaténeur).
+  * Si un seul travailleur est sélectionné, bypass automatique du prompteur et du concaténeur[cite: 2].
-- [x] Extraction universelle et multi-fournisseurs (OpenRouter, Groq, DeepSeek, Mistral, Gemini, Cloudflare) avec timeout étendu à 90 secondes.
+  * Si > 1 travailleur, activation de la chaîne complète (1 Prompteur ➔ N Travailleurs ➔ 1 Concaténeur)[cite: 2].
-- [x] Tâche planifiée (CRON) pour la mise à jour automatique des modèles toutes les 12h (00h00 et 12h00 heure de Paris).
+* [x] Extraction universelle multi-fournisseurs (OpenRouter, Groq, DeepSeek, Mistral, Gemini, Cloudflare) avec timeout porté à 90 secondes[cite: 2].
-- [x] Page dédiée aux modèles : export, import manuel de fichiers d'extraction JSON, filtrage par prix (Gratuit/Payant), domaine (Code, Texte, Vision, Audio) et recherche textuelle.
+* [x] Tâche planifiée (CRON) pour la mise à jour des modèles toutes les 12h (00h00 et 12h00)[cite: 2].
-- [x] Extraction unitaire des retours IA et téléchargement global d'une conversation (formats TXT et JSON).
+* [x] Page spécifique dédiée aux modèles permettant l'export, l'import manuel d'un fichier d'extraction JSON, ainsi que le filtrage par prix, domaine et mots-clés[cite: 2].
-- [x] Détection et téléchargement ciblé de blocs de code ou de données (ex: fichiers `.xlsx`, `.py`, `.csv`) générés par l'IA en respectant le nommage exact.
+* [x] Extraction unitaire des retours IA et téléchargement global d'une conversation (formats TXT et JSON)[cite: 2].
+* [x] Détection et téléchargement ciblé de pièces jointes ou blocs spécifiques (Code brut, scripts, fichiers de données) générés par l'IA en respectant le nommage exact demandé[cite: 2].
+* [x] Classement, filtrage (Gratuit/Payant) et catégorisation des modèles (Texte, Code, Vision, Audio)[cite: 2].
+* [ ] Traduction automatisée des descriptions des modèles via Ollama (local) ou Gemini[cite: 2].
+* [ ] Interface d'aide à la décision pour le choix des modèles selon la tâche souhaitée[cite: 2].
+* [ ] Mécanisme de fallback / termes génériques pour les appels API (protection contre le dépassement des quotas)[cite: 2].

frontend/dashboard.html

@@ -23,7 +23,7 @@
 
 <div id="app" class="flex w-full h-full relative bg-aethas-dark">
     
-    <!-- MODAL PARAMÈTRES (Sécurité) -->
+    <!-- MODAL PARAMÈTRES -->
     <div v-if="isSettingsModalOpen" class="fixed inset-0 bg-black/80 z-[100] flex items-center justify-center p-4">
         <div class="bg-aethas-panel border border-gray-600 rounded-2xl w-full max-w-md overflow-hidden shadow-[0_0_30px_rgba(0,0,0,0.7)]">
             <div class="p-4 border-b border-gray-700 flex justify-between items-center bg-gray-800/50">
@@ -63,7 +63,7 @@
                 </button>
             </div>
 
-            <div class="flex-1 overflow-y-auto p-4 space-y-6">
+            <div class="flex-1 overflow-y-auto p-4 space-y-6 custom-scrollbar">
                 <div v-if="pinnedProjects.length > 0">
                     <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Épinglés</h3>
                     <ul class="space-y-1">
@@ -91,7 +91,7 @@
                 </div>
             </div>
 
-            <!-- NOUVEAU : ENCART FINANCIER SOUS LE MENU RÉCENTS -->
+            <!-- ENCART FINANCIER -->
             <div class="px-4 pb-2 border-b border-gray-700">
                 <div v-if="financesList.length > 0" class="flex flex-col gap-1.5 mb-2">
                     <div v-for="fin in financesList" :key="fin.provider" class="text-[10px] bg-gray-800/80 border border-gray-600/50 px-2 py-1.5 rounded flex justify-between items-center shadow-inner">
@@ -136,8 +136,8 @@
             </div>
         </header>
 
-        <!-- VUE : CONFIGURATION (Par Niveaux) -->
+        <!-- VUE : CONFIGURATION -->
-        <div v-if="activeView === 'settings'" class="flex-1 overflow-y-auto p-4 md:p-8">
+        <div v-if="activeView === 'settings'" class="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar">
             <div class="max-w-4xl mx-auto space-y-6">
                 <h2 class="text-2xl font-bold text-white flex items-center gap-2 border-b border-gray-700 pb-4"><i data-lucide="settings-2" class="w-6 h-6 text-aethas-cyan"></i> Configuration Système</h2>
                 
@@ -147,7 +147,6 @@
                     <button v-if="user.is_superadmin" @click="settingsTab = 'super'" :class="['py-2 px-4 text-sm font-semibold border-b-2 transition-colors', settingsTab === 'super' ? 'border-aethas-purple text-purple-400' : 'border-transparent text-gray-400 hover:text-white']">Super-Admin</button>
                 </div>
 
-                <!-- Tab: Utilisateur -->
                 <div v-if="settingsTab === 'user'" class="space-y-6">
                     <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                         <h3 class="text-lg font-semibold text-white mb-4">Personnalisation du Profil</h3>
@@ -159,7 +158,6 @@
                                     <i data-lucide="upload" class="w-4 h-4 inline mr-1"></i> Uploader un nouvel Avatar
                                     <input type="file" accept="image/*" @change="uploadAvatar" class="hidden">
                                 </label>
-                                <p class="text-xs text-gray-500 mt-2">L'image sera automatiquement recadrée et redimensionnée à l'affichage pour s'adapter parfaitement à l'interface.</p>
                             </div>
                         </div>
                     </div>
@@ -175,11 +173,9 @@
                     </div>
                 </div>
 
-                <!-- Tab: Admin -->
                 <div v-if="settingsTab === 'admin' && user.is_admin" class="space-y-6">
                     <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                         <h3 class="text-lg font-semibold text-red-400 mb-4">Outils Administrateur</h3>
-                        <p class="text-sm text-gray-400 mb-4">Fonctionnalités réservées aux administrateurs pour la gestion des modèles et le suivi de base.</p>
                         <div class="flex gap-4">
                             <button @click="activeView = 'models'" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm border border-gray-600">Ouvrir le panneau Modèles IA</button>
                             <a href="/api/models/export" target="_blank" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm border border-gray-600">Exporter DB Modèles (JSON)</a>
@@ -187,26 +183,23 @@
                     </div>
                 </div>
 
-                <!-- Tab: Super-Admin -->
                 <div v-if="settingsTab === 'super' && user.is_superadmin" class="space-y-6">
                     <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 border-l-4 border-l-aethas-purple">
                         <h3 class="text-lg font-semibold text-purple-400 mb-4">Espace Réservé Super-Admin</h3>
-                        <p class="text-sm text-gray-400">La gestion complète du serveur mail, des clés API et de l'élévation des droits utilisateurs sera disponible ici lors du prochain patch de développement.</p>
+                        <p class="text-sm text-gray-400">Gestion globale du système.</p>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- VUE : MODÈLES ET FINANCES (Admin Only) -->
+        <!-- VUE : MODÈLES ET FINANCES -->
-        <div v-if="activeView === 'models' && user.is_admin" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6">
+        <div v-if="activeView === 'models' && user.is_admin" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 custom-scrollbar">
             <div class="flex justify-between items-end border-b border-gray-700 pb-4">
                 <div>
                     <h2 class="text-2xl font-bold text-white flex items-center gap-2"><i data-lucide="cpu" class="w-6 h-6 text-aethas-cyan"></i> Modèles & Finances API</h2>
                     <p class="text-sm text-gray-400 mt-1">Dernière extraction : <span class="text-gray-200 font-mono">{{ formatDate(modelInfo.last_sync_date) }}</span> <span class="text-xs bg-gray-800 px-2 py-0.5 rounded border border-gray-600 ml-2 uppercase">{{ modelInfo.last_sync_type || 'Aucune' }}</span></p>
                 </div>
-                <div class="flex gap-2">
+                <button @click="syncModels" :disabled="isSyncing" class="bg-aethas-cyan hover:bg-cyan-600 text-aethas-dark font-semibold py-2 px-4 rounded flex items-center gap-2 text-sm disabled:opacity-50"><i data-lucide="refresh-cw" :class="{'animate-spin': isSyncing}" class="w-4 h-4"></i> Forcer Extraction</button>
-                    <button @click="syncModels" :disabled="isSyncing" class="bg-aethas-cyan hover:bg-cyan-600 text-aethas-dark font-semibold py-2 px-4 rounded flex items-center gap-2 text-sm disabled:opacity-50"><i data-lucide="refresh-cw" :class="{'animate-spin': isSyncing}" class="w-4 h-4"></i> Forcer Extraction</button>
-                </div>
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -243,7 +236,7 @@
                                 <td class="px-4 py-3 font-mono text-xs text-aethas-cyan break-all">{{ model.model_id }}</td>
                                 <td class="px-4 py-3 capitalize">{{ model.provider }}</td>
                                 <td class="px-4 py-3"><span class="bg-gray-700 text-gray-200 px-2 py-1 rounded text-xs">{{ model.domain }}</span></td>
-                                <td class="px-4 py-3 font-mono text-xs"><span v-if="model.is_free" class="text-green-400 font-bold">GRATUIT</span><span v-else>In: ${{ model.pricing_prompt.toFixed(2) }}<br>Out: ${{ model.pricing_completion.toFixed(2) }}</span></td>
+                                <td class="px-4 py-3 font-mono text-xs"><span v-if="model.is_free" class="text-green-400 font-bold">GRATUIT</span><span v-else>In: ${{ model.pricing_prompt.toFixed(2) }}<br>Out:${{ model.pricing_completion.toFixed(2) }}</span></td>
                                 <td class="px-4 py-3">{{ (model.context_length / 1000).toFixed(0) }}k</td>
                                 <td class="px-4 py-3 text-xs text-gray-400 truncate max-w-[250px]" :title="model.description_fr">{{ model.description_fr }}</td>
                             </tr>
@@ -253,234 +246,95 @@
             </div>
         </div>
 
-        <!-- VUE : CHAT PAR DÉFAUT -->
+        <!-- VUE : CHAT -->
-        <template v-if="activeView === 'chat'">
+        <div v-show="activeView === 'chat'" class="flex-1 flex flex-col min-h-0">
             <div v-if="!activeProject" class="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center">
                 <img src="/assets/logo.png" class="w-24 h-24 mb-6 rounded-full border-2 border-aethas-cyan shadow-[0_0_15px_rgba(6,182,212,0.5)]">
                 <h2 class="text-2xl font-bold text-gray-200 mb-2">Comment puis-je vous aider aujourd'hui ?</h2>
+                <p class="text-gray-500 text-sm">Sélectionnez ou créez un projet dans la barre latérale.</p>
             </div>
 
-            <div v-else class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 flex flex-col custom-scrollbar" id="chat-container">
+            <template v-else>
-                <div v-if="messages.length === 0" class="flex-1 flex items-center justify-center text-gray-500 italic">Démarrez la conversation ci-dessous.</div>
+                <div class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 flex flex-col custom-scrollbar" id="chat-container">
-                
+                    <div v-if="messages.length === 0" class="flex-1 flex items-center justify-center text-gray-500 italic">Démarrez la conversation ci-dessous.</div>
-                <div v-for="msg in messages" :key="msg.id" :class="['max-w-4xl rounded-2xl p-4', msg.role === 'user' ? 'bg-gray-800 ml-auto border border-gray-700' : 'bg-aethas-panel mr-auto border border-aethas-cyan/30 flex flex-col']">
-                    <div class="flex items-center gap-2 mb-2">
-                        <img v-if="msg.role === 'user' && user.avatar_path" :src="user.avatar_path" class="w-5 h-5 rounded-full object-cover">
-                        <span class="text-xs font-semibold uppercase tracking-wider text-gray-400">{{ msg.role === 'user' ? 'Vous' : 'AETHAS38' }}</span>
-                    </div>
                     
-                    <div class="text-gray-200 text-sm leading-relaxed w-full">
+                    <div v-for="msg in messages" :key="msg.id" :class="['max-w-4xl rounded-2xl p-4', msg.role === 'user' ? 'bg-gray-800 ml-auto border border-gray-700' : 'bg-aethas-panel mr-auto border border-aethas-cyan/30 flex flex-col']">
-                        <template v-for="(part, index) in parseMessage(msg.content)" :key="index">
+                        <div class="flex items-center gap-2 mb-2">
-                            <div v-if="part.type === 'text'" class="whitespace-pre-wrap font-sans">{{ part.content }}</div>
+                            <img v-if="msg.role === 'user' && user.avatar_path" :src="user.avatar_path" class="w-5 h-5 rounded-full object-cover">
-                            <div v-if="part.type === 'code'" class="my-4 bg-gray-900 rounded-lg border border-gray-700 overflow-hidden shadow-inner">
+                            <span class="text-xs font-semibold uppercase tracking-wider text-gray-400">{{ msg.role === 'user' ? 'Vous' : 'AETHAS38' }}</span>
-                                <div class="flex justify-between items-center px-4 py-2 bg-gray-800 border-b border-gray-700">
+                        </div>
-                                    <span class="text-xs text-gray-400 font-mono flex items-center gap-2"><i data-lucide="file-code-2" class="w-4 h-4"></i> {{ part.language || 'code' }}</span>
+                        
-                                    <button @click="downloadFile(part.content, part.language)" class="text-aethas-cyan hover:text-white flex items-center gap-1 text-xs transition-colors bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"><i data-lucide="download" class="w-3 h-3"></i> Fichier</button>
+                        <div class="text-gray-200 text-sm leading-relaxed w-full">
+                            <template v-for="(part, index) in parseMessage(msg.content)" :key="index">
+                                <div v-if="part.type === 'text'" class="whitespace-pre-wrap font-sans">{{ part.content }}</div>
+                                <div v-if="part.type === 'code'" class="my-4 bg-gray-900 rounded-lg border border-gray-700 overflow-hidden shadow-inner">
+                                    <div class="flex justify-between items-center px-4 py-2 bg-gray-800 border-b border-gray-700">
+                                        <span class="text-xs text-gray-400 font-mono flex items-center gap-2"><i data-lucide="file-code-2" class="w-4 h-4"></i> {{ part.language || 'code' }}</span>
+                                        <button @click="downloadFile(part.content, part.language)" class="text-aethas-cyan hover:text-white flex items-center gap-1 text-xs transition-colors bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"><i data-lucide="download" class="w-3 h-3"></i> Fichier</button>
+                                    </div>
+                                    <pre class="p-4 text-xs font-mono text-gray-300 overflow-x-auto custom-scrollbar"><code>{{ part.content }}</code></pre>
                                 </div>
-                                <pre class="p-4 text-xs font-mono text-gray-300 overflow-x-auto custom-scrollbar"><code>{{ part.content }}</code></pre>
+                            </template>
-                            </div>
-                        </template>
-                    </div>
-
-                    <div v-if="msg.role !== 'user'" class="mt-3 flex items-center gap-3 border-t border-gray-700/50 pt-2 opacity-50 hover:opacity-100 transition-opacity">
-                        <button @click="copyToClipboard(msg.content)" class="text-xs text-gray-400 hover:text-aethas-cyan flex items-center gap-1"><i data-lucide="copy" class="w-3 h-3"></i> Copier</button>
-                        <button @click="downloadMessage(msg.content, msg.created_at)" class="text-xs text-gray-400 hover:text-aethas-cyan flex items-center gap-1"><i data-lucide="file-down" class="w-3 h-3"></i> Extraire</button>
-                    </div>
-                </div>
-
-                <div v-if="isAiThinking" class="max-w-3xl rounded-2xl p-4 bg-aethas-panel mr-auto border border-aethas-cyan/30 w-24">
-                    <div class="flex space-x-1.5 h-4 items-center">
-                        <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce"></div>
-                        <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce" style="animation-delay: 0.15s"></div>
-                        <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- ZONE SÉLECTION MODÈLES PAR REQUÊTE -->
-            <div v-if="activeProject" class="p-4 md:p-6 w-full max-w-5xl mx-auto space-y-2">
-                <div class="bg-gray-800/80 border border-gray-700 rounded-xl p-3 flex flex-wrap gap-4 items-center text-xs shadow-md">
-                    <div class="flex items-center gap-2 flex-1 min-w-[200px]">
-                        <span class="text-aethas-cyan font-semibold w-20"><i data-lucide="users" class="w-3 h-3 inline"></i> Travailleurs:</span>
-                        <select multiple v-model="selectedWorkers" @change="limitWorkers" class="bg-aethas-dark border border-gray-600 rounded px-2 py-1 text-gray-200 w-full h-16 outline-none focus:border-aethas-cyan custom-scrollbar">
-                            <option value="gemini-3.5-flash-lite">Gemini 3.5 Flash-Lite (Direct)</option>
-                            <option v-for="m in modelInfo.models" :key="m.model_id" :value="m.model_id">{{ m.name || m.model_id }} ({{ m.domain }})</option>
-                        </select>
-                        <span class="text-gray-500 ml-1">{{ selectedWorkers.length }}/5</span>
-                    </div>
-                    
-                    <div class="flex flex-col gap-2 flex-1 min-w-[200px]" :class="{'opacity-30 pointer-events-none': selectedWorkers.length <= 1}">
-                        <div class="flex items-center gap-2">
-                            <span class="text-gray-400 font-semibold w-24"><i data-lucide="edit-3" class="w-3 h-3 inline"></i> Prompteur:</span>
-                            <select v-model="selectedPrompter" class="bg-aethas-dark border border-gray-600 rounded px-2 py-1 text-gray-200 flex-1 outline-none truncate">
-                                <option value="gemini-3.5-flash-lite">Gemini 3.5 Flash-Lite (Direct)</option>
-                                <option v-for="m in modelInfo.models" :key="m.model_id" :value="m.model_id">{{ m.name || m.model_id }}</option>
-                            </select>
                         </div>
-                        <div class="flex items-center gap-2">
+
-                            <span class="text-aethas-purple font-semibold w-24"><i data-lucide="git-merge" class="w-3 h-3 inline"></i> Concaténeur:</span>
+                        <div v-if="msg.role !== 'user'" class="mt-3 flex items-center gap-3 border-t border-gray-700/50 pt-2 opacity-50 hover:opacity-100 transition-opacity">
-                            <select v-model="selectedConcatenator" class="bg-aethas-dark border border-gray-600 rounded px-2 py-1 text-gray-200 flex-1 outline-none truncate">
+                            <button @click="copyToClipboard(msg.content)" class="text-xs text-gray-400 hover:text-aethas-cyan flex items-center gap-1"><i data-lucide="copy" class="w-3 h-3"></i> Copier</button>
-                                <option value="gemini-3.5-flash-lite">Gemini 3.5 Flash-Lite (Direct)</option>
+                            <button @click="downloadMessage(msg.content, msg.created_at)" class="text-xs text-gray-400 hover:text-aethas-cyan flex items-center gap-1"><i data-lucide="file-down" class="w-3 h-3"></i> Extraire</button>
-                                <option v-for="m in modelInfo.models" :key="m.model_id" :value="m.model_id">{{ m.name || m.model_id }}</option>
+                        </div>
-                            </select>
+                    </div>
+
+                    <div v-if="isAiThinking" class="max-w-3xl rounded-2xl p-4 bg-aethas-panel mr-auto border border-aethas-cyan/30 w-24">
+                        <div class="flex space-x-1.5 h-4 items-center">
+                            <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce" style="animation-delay: 0.15s"></div>
+                            <div class="w-2 h-2 bg-aethas-cyan rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
                         </div>
                     </div>
                 </div>
 
-                <div class="relative flex items-end bg-gray-800 border border-gray-600 rounded-2xl p-2 shadow-lg focus-within:border-aethas-cyan">
+                <!-- BARRE DE SÉLECTION DE STYLE TABULAIRE (9 COLONNES STRICTES) -->
-                    <textarea v-model="prompt" @input="autoResize" @keydown.enter.exact.prevent="sendMessage" ref="promptTextarea" :disabled="isAiThinking" rows="1" class="w-full bg-transparent text-gray-200 p-3 max-h-[200px] overflow-y-auto focus:outline-none resize-none disabled:opacity-50 custom-scrollbar" placeholder="Sélectionnez vos modèles ci-dessus, puis posez votre question..."></textarea>
+                <div class="p-4 md:p-6 w-full max-w-7xl mx-auto space-y-2 flex-shrink-0">
-                    <button @click="sendMessage" :disabled="!prompt.trim() || isAiThinking" class="p-3 text-aethas-cyan hover:text-white disabled:opacity-50"><i data-lucide="send" class="w-5 h-5"></i></button>
+                    <div class="grid grid-cols-9 border border-black bg-gray-900 rounded-lg overflow-hidden text-center text-xs font-bold shadow-lg">
-                </div>
+                        
-            </div>
+                        <!-- 1. PAYANT / GRATUIT -->
-        </template>
+                        <div class="border-r border-black p-1.5 bg-gray-800 flex flex-col justify-center">
-    </main>
+                            <label class="block text-[9px] text-gray-400 mb-1">PRIX</label>
-</div>
+                            <select v-model="filterPricing" class="w-full bg-aethas-dark border border-gray-700 rounded text-gray-200 text-[10px] p-1 outline-none">
+                                <option value="">TOUS</option>
+                                <option value="free">GRATUIT</option>
+                                <option value="paid">PAYANT</option>
+                            </select>
+                        </div>
 
-<script>
+                        <!-- 2. TYPE (DOMAINE) -->
-    const { createApp, ref, reactive, onMounted, nextTick, computed } = Vue;
+                        <div class="border-r border-black p-1.5 bg-gray-800 flex flex-col justify-center">
+                            <label class="block text-[9px] text-gray-400 mb-1">TYPE</label>
+                            <select v-model="filterDomain" class="w-full bg-aethas-dark border border-gray-700 rounded text-gray-200 text-[10px] p-1 outline-none">
+                                <option value="">TOUS</option>
+                                <option value="Texte Polyvalent">Texte</option>
+                                <option value="Code & Logique">Codage</option>
+                                <option value="Vision & Texte">Vision</option>
+                                <option value="Audio">Audio</option>
+                            </select>
+                        </div>
 
-    createApp({
+                        <!-- 3. TRAVAILLEUR 1 -->
-        setup() {
+                        <div class="border-r border-black p-1.5 bg-gray-800 flex flex-col justify-center">
-            const user = ref({ username: "Guest", is_admin: false, is_superadmin: false, avatar_path: null });
+                            <label class="block text-[9px] text-aethas-cyan mb-1">TRAVAILLEUR 1</label>
-            const activeView = ref('chat'); 
+                            <select v-model="workers[0]" class="w-full bg-aethas-dark border border-gray-700 rounded text-gray-200 text-[10px] p-1 outline-none truncate">
-            const settingsTab = ref('user');
+                                <option value="">(Aucun)</option>
-            const isSidebarOpen = ref(true);
+                                <option v-for="m in filteredBarModels" :key="m.model_id" :value="m.model_id">{{ m.name || m.model_id }}</option>
-            const prompt = ref("");
+                            </select>
-            const promptTextarea = ref(null);
+                        </div>
-            
-            const projects = ref([]);
-            const activeProject = ref(null);
-            const messages = ref([]);
-            
-            const isLoading = ref(false);
-            const isAiThinking = ref(false);
-            const isSyncing = ref(false);
-            const isSavingSettings = ref(false);
 
-            const settingsMessage = ref("");
+                        <!-- 4. TRAVAILLEUR 2 -->
-            const passForm = reactive({ old: '', new: '', confirm: '' });
+                        <div class="border-r border-black p-1.5 bg-gray-800 flex flex-col justify-center">
-            
+                            <label class="block text-[9px] text-aethas-cyan mb-1">TRAVAILLEUR 2</label>
-            const modelInfo = reactive({ last_sync_date: null, last_sync_type: null, models: [] });
+                            <select v-model="workers[1]" class="w-full bg-aethas-dark border border-gray-700 rounded text-gray-200 text-[10px] p-1 outline-none truncate">
-            const financesList = ref([]);
+                                <option value="">(Aucun)</option>
-            const filterSearch = ref("");
+                                <option v-for="m in filteredBarModels" :key="m.model_id" :value="m.model_id">{{ m.name || m.model_id }}</option>
-            const filterDomain = ref("");
+                            </select>
-            const filterPricing = ref("");
+                        </div>
-            
-            const selectedWorkers = ref(["gemini-3.5-flash-lite"]);
-            const selectedPrompter = ref("gemini-3.5-flash-lite");
-            const selectedConcatenator = ref("gemini-3.5-flash-lite");
 
-            const pinnedProjects = computed(() => projects.value.filter(p => p.is_pinned));
+                        <!-- 5. TRAVAILLEUR 3 -->
-            const recentProjects = computed(() => projects.value.filter(p => !p.is_pinned));
+                        <div class="
-
-            const filteredModels = computed(() => {
-                return modelInfo.models.filter(m => {
-                    const matchSearch = (m.model_id.toLowerCase().includes(filterSearch.value.toLowerCase()) || m.provider.toLowerCase().includes(filterSearch.value.toLowerCase()));
-                    const matchDomain = filterDomain.value === "" || m.domain === filterDomain.value;
-                    let matchPrice = true;
-                    if (filterPricing.value === 'free') matchPrice = m.is_free;
-                    if (filterPricing.value === 'paid') matchPrice = !m.is_free;
-                    return matchSearch && matchDomain && matchPrice;
-                });
-            });
-
-            const formatDate = (isoString) => {
-                if (!isoString) return "Jamais";
-                const d = new Date(isoString);
-                return d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) + " à " + d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
-            };
-
-            const toggleSidebar = () => { isSidebarOpen.value = !isSidebarOpen.value; };
-            const autoResize = () => { const el = promptTextarea.value; if(el){ el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; }};
-            const scrollToBottom = () => { nextTick(() => { const c = document.getElementById('chat-container'); if (c) c.scrollTop = c.scrollHeight; }); };
-
-            const fetchUser = async () => { try { const res = await fetch('/api/users/me'); if(res.ok) user.value = await res.json(); } catch(e){} };
-            const fetchModelsInfo = async () => { try { const res = await fetch('/api/models/info'); if(res.ok) { const data = await res.json(); modelInfo.last_sync_date = data.last_sync_date; modelInfo.last_sync_type = data.last_sync_type; modelInfo.models = data.models; } } catch(e){} };
-            const fetchFinances = async () => { try { const res = await fetch('/api/finances'); if(res.ok) financesList.value = await res.json(); } catch(e){} };
-            
-            const syncModels = async () => { 
-                isSyncing.value = true; 
-                try { 
-                    const res = await fetch('/api/models/sync', { method: 'POST' }); 
-                    if(res.ok) { 
-                        await fetchModelsInfo(); 
-                        await fetchFinances();
-                        alert("Synchronisation terminée !"); 
-                    } else {
-                        const err = await res.json();
-                        alert("Erreur: " + err.detail);
-                    }
-                } catch(e) { alert("Erreur réseau de synchronisation."); } 
-                isSyncing.value = false; 
-            };
-
-            const uploadAvatar = async (event) => {
-                const file = event.target.files[0];
-                if (!file) return;
-                const formData = new FormData(); formData.append("file", file);
-                try {
-                    const res = await fetch('/api/users/me/avatar', { method: 'POST', body: formData });
-                    const data = await res.json();
-                    if(res.ok) user.value.avatar_path = data.avatar_path;
-                    else alert(data.detail);
-                } catch(e) { alert("Erreur d'upload"); }
-                event.target.value = null;
-            };
-
-            const exportProject = (format) => { if(activeProject.value) window.open(`/api/projects/${activeProject.value.id}/export?format=${format}`, '_blank'); };
-            const copyToClipboard = async (text) => { try { await navigator.clipboard.writeText(text); alert("Copié !"); } catch (e) {} };
-            const downloadFile = (content, hint) => { let fname = hint ? hint.trim() : 'code.txt'; if (!fname.includes('.')) fname += '.txt'; const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = fname; a.click(); URL.revokeObjectURL(url); };
-            const downloadMessage = (content, dateString) => { downloadFile(content, `message_${dateString.replace(/[:T.Z]/g, '-')}.txt`); };
-            const parseMessage = (content) => { const regex = /```([\w.-]*)\n([\s\S]*?)```/g; let parts = [], last = 0, m; while ((m = regex.exec(content)) !== null) { if (m.index > last) parts.push({ type: 'text', content: content.slice(last, m.index) }); parts.push({ type: 'code', language: m[1], content: m[2] }); last = m.index + m[0].length; } if (last < content.length) parts.push({ type: 'text', content: content.slice(last) }); return parts.length > 0 ? parts : [{ type: 'text', content: content }]; };
-
-            const fetchProjects = async () => { try { const res = await fetch('/api/projects'); if(res.ok) projects.value = await res.json(); nextTick(()=>lucide.createIcons()); } catch(e){} };
-            const selectProject = async (project) => { activeView.value = 'chat'; activeProject.value = project; messages.value = []; try { const res = await fetch(`/api/projects/${project.id}/messages`); if(res.ok) { messages.value = await res.json(); scrollToBottom(); nextTick(()=>lucide.createIcons()); } } catch(e){} };
-            const createNewProject = async () => { activeView.value = 'chat'; isLoading.value = true; try { const res = await fetch('/api/projects', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title: "Nouvelle discussion"})}); if(res.ok){ const np = await res.json(); projects.value.unshift(np); selectProject(np); } } catch(e){} finally{isLoading.value = false;} };
-
-            const sendMessage = async () => {
-                if (!prompt.value.trim() || !activeProject.value || selectedWorkers.value.length === 0) return;
-                const userText = prompt.value.trim(); prompt.value = ""; autoResize();
-                messages.value.push({ id: Date.now(), role: 'user', content: userText });
-                isAiThinking.value = true; scrollToBottom();
-                const payload = { role: 'user', content: userText, config: { workers: selectedWorkers.value, prompter: selectedPrompter.value, concatenator: selectedConcatenator.value } };
-                try {
-                    const response = await fetch(`/api/projects/${activeProject.value.id}/messages`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
-                    if (response.ok) { 
-                        const data = await response.json(); 
-                        if (Array.isArray(data)) messages.value = data; 
-                        await fetchFinances(); // MAJ du budget sous le nom
-                    } else { 
-                        const err = await response.json(); alert("Erreur API IA : " + err.detail); 
-                    }
-                } catch (error) {} finally { isAiThinking.value = false; scrollToBottom(); nextTick(()=>lucide.createIcons()); }
-            };
-
-            const changePassword = async () => {
-                settingsMessage.value = "";
-                if (passForm.new !== passForm.confirm) { settingsMessage.value = "Mots de passe différents."; return; }
-                if (passForm.new.length < 8) { settingsMessage.value = "8 caractères minimum."; return; }
-                isSavingSettings.value = true;
-                try { const res = await fetch('/api/users/me/password', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ old_password: passForm.old, new_password: passForm.new }) }); const data = await res.json(); if (res.ok) { settingsMessage.value = data.message; passForm.old=''; passForm.new=''; passForm.confirm=''; } else { settingsMessage.value = data.detail; } } catch (e) {} finally { isSavingSettings.value = false; }
-            };
-
-            const renameProject = async (project) => { const nt = window.prompt("Nom :", project.title); if (!nt || nt.trim() === "" || nt === project.title) return; try { const res = await fetch(`/api/projects/${project.id}/rename`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: nt.trim() }) }); if (res.ok) { const up = await res.json(); const i = projects.value.findIndex(p => p.id === project.id); if (i !== -1) projects.value[i] = up; if (activeProject.value && activeProject.value.id === project.id) activeProject.value.title = up.title; } } catch (e) {} };
-            const togglePin = async (pid) => { try { const res = await fetch(`/api/projects/${pid}/pin`, { method: 'PUT' }); if (res.ok) { const up = await res.json(); const i = projects.value.findIndex(p => p.id === pid); if (i !== -1) projects.value[i] = up; } } catch (e) {} };
-            const deleteProject = async (pid) => { if (!confirm("Supprimer ce projet ?")) return; try { const res = await fetch(`/api/projects/${pid}`, { method: 'DELETE' }); if (res.ok) { projects.value = projects.value.filter(p => p.id !== pid); if (activeProject.value && activeProject.value.id === pid) activeProject.value = null; } } catch (e) {} };
-            const limitWorkers = () => { if(selectedWorkers.value.length > 5) { selectedWorkers.value.pop(); alert("Max 5 travailleurs."); } };
-
-            onMounted(() => { lucide.createIcons(); fetchUser(); fetchProjects(); fetchModelsInfo(); fetchFinances(); });
-
-            return { 
-                user, activeView, settingsTab, isSidebarOpen, toggleSidebar, prompt, autoResize, promptTextarea, 
-                projects, pinnedProjects, recentProjects, activeProject, messages, isAiThinking,
-                createNewProject, selectProject, renameProject, sendMessage, isLoading, togglePin, deleteProject,
-                passForm, settingsMessage, isSavingSettings, changePassword, uploadAvatar,
-                modelInfo, financesList, filterSearch, filterDomain, filterPricing, filteredModels, formatDate, syncModels, isSyncing,
-                selectedWorkers, selectedPrompter, selectedConcatenator, limitWorkers,
-                exportProject, copyToClipboard, downloadFile, downloadMessage, parseMessage
-            };
-        }
-    }).mount('#app');
-</script>
-</body>
-</html>