vérification-frontend-desktop

Vérifier les modifications du frontend desktop

Les exécutions complètes de l'application nécessitent une session OpenCode + un tour de modèle en direct. Pour les changements purs de composants frontend, montez le composant dans une page Vite jetable à la place :

1. Créez apps/desktop/verify-<x>.html (html simple, <div id="root">, <script type="module" src="/src/verify-<x>.tsx">) et apps/desktop/src/verify-<x>.tsx (ReactDOM.createRoot, importez ./index.css pour Tailwind, importez le composant via @/). Vite sert automatiquement tout fichier .html sous apps/desktop/.
2. cd apps/desktop && npx vite --port 5199 --strictPort (en arrière-plan). L'encapsulation npx peut dupliquer le processus et signaler une erreur "port in use" alors que la première instance fonctionne correctement — vérifiez avec lsof -iTCP:5199 avant de réessayer.
3. Pilotez avec la compétence browser-control (API HTTP Chrome, port 9528) : createWindow → waitForSelector → readDom → screenshotTab (les captures d'écran atterrissent dans ~/Downloads/). Pièges : evalScript est bloqué par la CSP de l'extension — utilisez readDom/scrollTab à la place ; readDom nécessite un tableau explicite "attributes": [] sinon il échoue avec "Value is unserializable".
4. Nettoyez : closeTab, tuez le pid de vite, supprimez les deux fichiers de test, confirmez que git status est propre.