Spaces:
Running
Running
Ctrl+K
Objectif : stabiliser la v1.1 UI-only et maximiser la vitesse perçue. Applique les étapes ci-dessous sans insérer de code dans ce canal. Structure & navigation (sans toucher au backend) Conserve 5 vues : dashboard, jobs, assets, qa, settings. Active l’état courant via un seul showPage(pageId) qui : masque toutes les pages, affiche le skeleton, puis révèle la page + animation. met à jour l’item actif de la sidebar. Ajoute un bouton « Cmd ⌘K » pour ouvrir/fermer la palette de commandes (navigations rapides + actions courantes). Scope global (org → project → brand) Trois sélecteurs en topbar : scopeOrg, scopeProject, scopeBrand. Règle de cascade : changer d’org réinitialise project au premier dispo et vide brand. À chaque changement, déclenche applyGlobalScope() qui met à jour KPIs, charts, tables et listes. État & persistance Source de vérité unique : objet appState. Sauvegarde automatique locale : saveState() sur toute mutation significative (création/suppression, changement de statut, paramètres). Générateur d’IDs stable : newId(prefix) (alphanum 9 chars). Statuts normalisés (éviter les dérives d’étiquettes) Jobs : en_attente, en_cours, succès, échec. Assets : à_valider, à_corriger, validé, échec. Utilise toujours ces constantes pour les filtres, badges et calculs (pas de chaînes “libres”). Dashboard — KPIs & Charts KPIs : Marques actives (scope project) Jobs (24h, filtré par brand si défini) Taux de réussite (7 jours, filtré pareil) Assets en à_valider Graphiques : Ligne (14 jours) = jobs/jour par date ISO J0–J13. Barre = assets par type [section_shopify, ads_meta, email, seo, ugc]. Donut QA = validé / à_corriger / échec. Règle : ne recrée pas les charts → mets à jour les datasets et appelle update(). Jobs Table triée par createdAt décroissant, filtrée par brand si scope. Actions : Détails (ouvre drawer), Relancer, Dupliquer, Supprimer. Simulation d’exécution : progression en 4 pas (25%) avec issue aléatoire (échec ~15%). Drawer : timeline des étapes (RAG, Génération, QA, Export) + mini-logs. Assets Zone filtres : recherche texte (titre + payload), filtres brand/type/status, bascule Grille/Liste. Sélection multiple : affiche barre d’actions (Valider, À corriger, Échec, QA, Comparer, Supprimer). Détails asset : modal avec badge de statut, score QA (si dispo) et payload en lecture seule. Actions unitaires : Dupliquer (reset -> à_valider), Supprimer. Comparaison : modal côte-à-côte (A/B) pour deux items sélectionnés. QA “simulé” (côté UI) Bouton « Exécuter QA sur sélection » : calcule un qaScore grossier (60–100, pénalités simples). applique statut dérivé : >=70 validé, 50–69 à_corriger, <50 échec. propose un export JSON des résultats via téléchargement. Page qa : liste de règles activables (checkbox), persistantes dans appState.qa_rules. Copilote (levier IA, création de valeur immédiate) « Actions suggérées » dynamiques basées sur le brand du scope : Générer 2 ads_meta pré-remplies. Lancer un job seo. Valider automatiquement jusqu’à 5 assets en à_valider (avec scoring). Générateur d’idées (objectif/persona/ton/USP/CTA/contraintes) → boutons « Créer » qui produisent un asset ugc en à_valider. Prompt Builder (prêt pour backend futur) Formulaire de paramètres (type/persona/ton/lexique/offre/contraintes/longueur). Aperçu de prompt + estimation de tokens (approx chars/4). Bouton « Créer l’asset » → produit un asset du type choisi en à_valider avec payload dérivé. Thème, accent, accessibilité Bascules : sombre/clair, couleur d’accent (emerald, blue, violet, amber). Accessibilité : Rôles ARIA pour modales/drawers, aria-expanded sur toggles, focus trap dans modales. Contrastes ≥ WCAG AA pour badges et textes. Performance perçue Skeletons visibles immédiatement, transition .page-active à l’affichage. Jamais recréer les listes/graphs si un simple update ou diff DOM suffit. Débouncer recherche (≥150ms) et requestAnimationFrame pour MAJ progress bar jobs. Un seul gestionnaire d’événements par action (éviter listeners dupliqués). Sécurité UX & cohérence confirm() avant toute suppression (job/asset). Toasts uniques (supprimer l’existant avant d’en créer un nouveau). Dates toujours en fr-FR, day short + hour:minute. Points d’intégration backend (pour l’autre soldat) Endpoints à prévoir (contrats simples) : GET /scope (org/projects/brands), GET /jobs?brandId&from&to, POST /jobs, POST /jobs/:id/retry, GET /assets?filters…, POST /assets, PATCH /assets/:id {status, qaScore}, POST /qa:run {ids, rules}, POST /ideas:generate, POST /prompts:build. Événements SSE/WebSocket (plus tard) : job.progress, job.done, qa.done. Retour d’erreurs normalisé {code, message, details} pour remonter des toasts cohérents. Critères d’acceptation (vérifie point par point) Toutes les navigations via sidebar et palette de commandes fonctionnent. Changer le scope met à jour KPIs, charts, tables et listes sans rechargement. Création/duplication/suppression de jobs et assets visibles instantanément + persistées. QA sur sélection change les statuts et exporte un JSON. Copilote crée réellement des assets/jobs selon le scope. Thème & accent persistants entre sessions. Aucune chaîne de statut “hors norme”. - Initial Deployment
903f7c3 verified