Webhook Dashboard UX Maintainer

Utilise ce skill pour toute évolution de l'interface dashboard (bandeau statut, panneaux webhooks, routing rules builder, magic link, autosave).

Pré-requis

• Connaissance des règles dans .clinerules/codingstandards.md (pas d'innerHTML , accessibilité, autosave debounce).

• Accès au dashboard pour les tests manuels.

• Virtualenv /mnt/venv_ext4/venv_render_signal_server pour les tests backend.

Workflow

• Définir la zone impactée

• Panneaux Webhooks, Routing Rules, Magic Link, indicateurs de statut, etc.

• Mettre à jour le HTML

• Respecter les section-panel , attributs ARIA (role="tablist" , aria-expanded ).

• Ajouter les hooks data-* nécessaires aux modules.

• Adapter les modules ES6

• Nouvelles fonctionnalités → créer un service ou composant dédié, exports nommés.

• Utiliser ApiService pour les appels, MessageHelper pour les toasts.

• États UX

• Maintenir updatePanelStatus , badges saving/saved/error , debounces 2-3s.

• Ajouter focus states visibles et respect prefers-reduced-motion .

• Tests manuels

• Lancer le helper bash ./.agents/skills/webhook-dashboard-ux-maintainer/test_dashboard_ux.sh .

• Suivre la checklist fournie par le script.

• Tests backend

• Le script exécute automatiquement les tests API pertinents.

• Documentation

• Mettre à jour docs/access/dashboard-ui.md si l'UX évolue.

• Documenter les patterns récents (verrouillage routing rules, bandeau statut, flux Magic Link avec showCopiedFeedback ) dans la Memory Bank.

Ressources

• test_dashboard_ux.sh : checklist manuelle + exécution des tests backend associés.

Conseils

• Centraliser les chaînes/badges dans les helpers existants.

• Pour les animations, rester cohérent avec les durées (0.2s hover, 0.3s transitions).

• Ajouter des hooks de test (data-testid ) uniquement si requis par les tests automatisés.