Avant de commencer

Ce guide utilise l’exemple Twitter, twitter-starter, pour construire une fonctionnalité : partager un emoji géant avec du texte en dessous. Vous décrivez directement à l’agent ce que vous voulez, vous suivez son travail et vous relisez le résultat final. Vous pouvez appliquer le même workflow à une autre fonctionnalité ou à un bug que vous voulez corriger.

Installez Panolayer, connectez-vous et ouvrez l’exemple Twitter Clone. Consultez Installer et configurer Panolayer si vous n’avez pas encore ouvert de repository.
Utilisez Panolayer Agent, qui est intégré. Vous pouvez aussi utiliser tout autre agent pris en charge, que vous devez installer au préalable. Consultez Agents pris en charge pour la configuration.

Vous terminerez avec une modification relue et enregistrée dans votre historique Git local. Le pousser vers un dépôt distant est une étape distincte.

Démarrer Panolayer Agent

Ouvrez My Agents dans la barre latérale.
Cliquez sur le bouton + à côté de Monitor Agents pour ouvrir le menu des agents.
Sélectionnez Panolayer Agent pour cette démonstration.

Le menu contient Panolayer Agent et les agents que vous avez installés. Vous pouvez en choisir un pour corriger un bug ou écrire du code.

Page My Agents de l’exemple Twitter, avec le bouton plus à côté de Monitor Agents et son menu ouvert, affichant Panolayer Agent et les agents de code installés. — Cliquez sur + à côté de Monitor Agents, puis choisissez Panolayer Agent ou un autre agent que vous avez installé.

Panolayer Agent fonctionne comme les agents de code que vous utilisez déjà. Demandez-lui de construire une fonctionnalité, de corriger un bug ou de répondre à une question sur votre code. Saisissez votre demande dans Chat with your codebase or build something… et poursuivez la conversation au fil de votre travail.

Vous partez d’une issue ? Dans Issues, choisissez Fix et sélectionnez Panolayer Agent. Panolayer reprend le contexte de l’issue dans la tâche. Suivez le tutoriel du premier bug pour cette approche.

Donnez-lui une tâche avec un résultat clair

Décrivez ce qui ne va pas ou ce que vous voulez construire, ce qui doit se produire quand ça fonctionne, et tout ce que l’agent doit préserver. Nommez un fichier ou une fonction lorsque vous le connaissez.

Pour l’exemple Twitter, utilisez la même demande que dans la capture d’écran :

add a new feature where you can share a giant emoji with text underneath

Saisissez votre demande dans la zone de message, puis cliquez sur la flèche d’envoi.

Panolayer Agent dans l’exemple Twitter, avec la demande d’ajout d’un emoji géant accompagné de texte saisie dans la zone de message, prête à être envoyée. — Décrivez la fonctionnalité que vous voulez construire. Cette demande porte sur un emoji géant avec du texte en dessous.

Panolayer Agent peut utiliser la carte du code pour trouver les fonctions et les relations pertinentes pendant qu’il travaille. Vous pouvez décrire le comportement qui vous intéresse même si vous ne connaissez pas tous les noms de fichiers.

Si l’agent pose une question, répondez-y dans la même conversation. Si vous devez préciser la tâche, indiquez le résultat exact que vous attendez.

Suivez le travail sans abandonner votre espace de travail

Lorsque Panolayer Agent lance une exécution de codage, sa progression apparaît dans la conversation. Le travail de codage s’effectue dans un worktree Git isolé : une copie de travail séparée où l’agent peut modifier et tester le code pendant que votre espace de travail principal reste disponible.

Suivez la tâche dans la conversation

La carte d’exécution affiche la tâche et son activité en cours pendant que l’agent développe la fonctionnalité d’emoji géant. Vous pouvez suivre sa progression et voir les fichiers et commandes qu’il utilise au fil du travail.

Ouvrez l’exécution pour plus de détails

Choisissez Ouvrir sur le côté droit de la carte pour voir l’activité de l’exécution. Dans Flux, sélectionnez une activité pour inspecter la commande et sa sortie dans le panneau de droite. Utilisez Retour à l’agent pour revenir à la conversation.

Exécution « Ajouter un emoji géant avec légende » ouverte dans Flux, montrant l’activité en direct et une commande sélectionnée avec sa sortie dans le panneau de droite. — Ouvrir affiche la tâche « Ajouter un emoji géant avec légende » en cours. La sélection d’une entrée vous permet d’inspecter ce qui a été exécuté et ce qui a été renvoyé.

Voir quand l’exécution est terminée

Lorsque le travail se termine, la carte passe à Exécution du sous-agent terminée. La bannière Terminé résume les vérifications et le nombre de fichiers modifiés. Vous pouvez toujours choisir Ouvrir pour inspecter l’exécution terminée.

Conversation Panolayer Agent montrant la tâche d’emoji géant comme « Exécution du sous-agent terminée », avec une bannière « Terminé », des vérifications réussies, 16 fichiers modifiés et un bouton « Ouvrir ». — La tâche d’emoji géant terminée apparaît dans la conversation, avec son résultat et les preuves des fichiers modifiés prêtes à être examinées.

Vous pouvez continuer à travailler et revenir à l’exécution plus tard. Utilisez Surveiller les agents pour obtenir une vue d’ensemble lorsque plusieurs agents travaillent. Plusieurs agents peuvent travailler sur le même repository dans des worktrees séparés ; vérifiez comment leurs modifications s’articulent avant de les fusionner.

Gardez un message de suivi lié à sa tâche. Utilisez la référence d’exécution affichée dans votre conversation lorsque vous envoyez un message de suivi, afin que la tâche visée soit claire.

Examiner le résultat de la vérification

Examinez le code modifié parallèlement au résultat de vérification avant de fusionner. Consultez Examiner les modifications et effectuer un commit pour le guide complet d’examen des modifications d’un agent.

Lorsque l’agent demande une fusion, lisez le résumé de vérification : Règles réussies, Exécutions de vérification et Fichiers modifiés. Examinez les nouveaux échecs séparément des problèmes déjà présents.

Boîte de dialogue Panolayer Agent prête à fusionner pour la fonctionnalité d’emoji géant, affichant 110 règles réussies sur 121, une exécution de vérification, 16 fichiers modifiés et le résumé Détails développé. — La fonctionnalité d’emoji géant est terminée et attend votre approbation pour la fusion. Détails explique ce qui a changé et comment l’agent l’a vérifié.

Dans cette exécution, le résumé affiche 110 règles réussies sur 121, 1 exécution de vérification et 16 fichiers modifiés. Il identifie séparément 11 échecs préexistants et ne signale aucun nouvel échec, avertissement ni règle non vérifiée. Vos totaux dépendront de votre tâche.

Ouvrez Détails pour approfondir l’examen du résultat. Consultez Comprendre un résultat de vérification pour les champs et statuts du résumé.

Vérifiez le comportement dans l’application en cours d’exécution lorsque la tâche l’exige. Pour cet exemple, essayez de créer une publication avec un emoji géant et du texte en dessous, puis vérifiez que les publications texte ordinaires fonctionnent toujours comme prévu.

Merge when you’re ready

You decide what moves from the agent’s worktree into your branch. Choose Not now to keep reviewing. Once you’re satisfied with the changes and results, confirm the target branch and choose Merge into main for the Twitter sample.

The Merged into main confirmation shows a commit ID. This workflow records the change in local Git history, so you don’t need to commit that same change again.

Open Changes and find the commit in History. Check for unexpected uncommitted edits. If your repository has a remote and you want to share the commit, use Git → Push.

You’ve given an agent a task, followed its work, reviewed the result, and decided what reaches your branch.