Le code

Ton app est faite de code standard : React, TypeScript, Vite et Tailwind CSS. Tu n’as jamais besoin d’y toucher, mais il est là, lisible et modifiable, dans l’onglet Code. Il t’appartient : tu peux le télécharger à tout moment.

L’éditeur de code

Clique sur l’onglet Code en haut de l’éditeur. La première fois, « Chargement de l’éditeur… » s’affiche quelques instants : c’est Monaco, l’éditeur de VS Code, avec la coloration du code, la recherche et les raccourcis habituels.

L’onglet est fait de trois parties :

• à gauche, l’arborescence des fichiers du projet (dossiers repliables) ;
• en haut, les onglets des fichiers ouverts, et sous eux le chemin du fichier affiché ;
• au centre, le fichier lui-même.

Où est quoi

Chemin	Contenu
src/App.tsx	Le point d’entrée de l’app (le fichier ouvert par défaut).
src/pages/	Les pages de l’app, une par écran.
src/components/	Les morceaux d’interface réutilisables (en-tête, cartes, formulaires…).
src/index.css	Le thème : couleurs par rôle et polices (ce que règle l’onglet Thème du mode Design).
public/	Les fichiers servis tels quels, dont les images du projet (public/assets/).
worker/index.ts	Le serveur de l’app (routes /api), seulement si ton app en a un. Voir Le serveur de l’app.

Ouvrir des fichiers : les onglets

• Un clic sur un fichier l’ouvre dans un onglet provisoire, au nom en italique : le prochain fichier que tu ouvres le remplace. Pratique pour parcourir le projet sans accumuler les onglets.
• Un double-clic (sur le fichier ou sur son onglet) épingle l’onglet : il reste ouvert. Un fichier que tu modifies est épinglé automatiquement.
• Ferme un onglet avec sa croix, ou d’un clic molette.
• Un fichier modifié et pas encore enregistré porte un point sur son onglet et dans l’arborescence.

Les onglets ouverts sont retenus pour chaque projet, d’une visite à l’autre (dans ce navigateur).

Les images (PNG, JPEG, WebP…) s’affichent en aperçu au lieu de leur contenu binaire, avec l’adresse à laquelle le site les affiche. Les fichiers SVG, qui sont du texte, s’ouvrent dans l’éditeur.

Créer, renommer et supprimer des fichiers

1. Créer : clique sur Nouveau fichier en haut de l’arborescence, tape le chemin complet (par exemple src/components/Footer.tsx) et appuie sur Entrée. Les dossiers manquants sont créés avec le fichier. Échap annule.
2. Renommer ou déplacer : survole un fichier dans l’arborescence et clique sur le crayon (Renommer). Modifie le chemin (tu peux changer de dossier) et valide avec Entrée.
3. Supprimer : survole le fichier et clique sur la corbeille (Supprimer). Le fichier apparaît barré, avec la mention « Supprimé à l’enregistrement » ; Restaurer annule la suppression.

Ces opérations, comme tes modifications de texte, ne sont appliquées qu’à l’enregistrement. Si le chemin n’est pas accepté, un message l’indique : « Chemin invalide (ex. src/components/Footer.tsx) » ou « Ce fichier existe déjà ». Les dossiers gérés automatiquement (node_modules, dist, .git, .highwind) et le fichier .env.local ne peuvent pas être modifiés.

Note

Les images ne se renomment pas ici : utilise l’onglet Images, qui met aussi à jour le code du site qui les cite. Voir Les images du projet.

Enregistrer ou annuler

Dès que tu modifies quelque chose, la barre au-dessus du fichier affiche le nombre de changements (« 2 changements ») et deux boutons :

• Enregistrer (ou Ctrl + S, Cmd + S sur Mac) : enregistre tous les fichiers modifiés, créés, renommés ou supprimés d’un coup, et crée une nouvelle version. Un message le confirme dans le chat : « Modifications manuelles enregistrées (version N) : … ». L’aperçu se met à jour.
• Annuler : abandonne toutes les modifications non enregistrées et revient au code de la version actuelle.

Quand il n’y a rien à enregistrer, la barre rappelle : « Ctrl+S enregistre une nouvelle version ».

Attention

Enregistre avant d’écrire à l’agent. Tant que tu as des modifications de code non enregistrées, tu ne peux pas envoyer de message en mode Construction : « Enregistre ou annule tes modifications de code avant d’envoyer un message. » Ça évite que l’agent et toi modifiiez les mêmes fichiers en même temps. (En mode Discussion, l’envoi reste possible : l’agent ne modifie rien.) Si tu quittes l’éditeur avec des modifications non enregistrées, ton navigateur te demande de confirmer.

Quand le code est en lecture seule

• Pendant que l’agent travaille : la barre affiche « L’agent travaille : lecture seule ». Tu peux lire le code (et le voir changer), pas le modifier.
• Sur une ancienne version : la barre affiche « Version N · lecture seule », et l’éditeur rappelle « Ancienne version : restaure-la pour la modifier. » Voir Versions et historique.

Télécharger le code

Le bouton Télécharger le code (.zip) (l’icône de téléchargement dans la barre du haut de l’éditeur) télécharge tout le code de la version affichée : la version actuelle, ou l’ancienne version que tu consultes. Le fichier s’appelle d’après ton projet et la version, par exemple studio-yoga-v12.zip.

Le ZIP contient le code source de l’app. Il ne contient pas les dossiers générés (node_modules, dist), ni les fichiers gérés par Highwind qui contiennent tes clés (secrets du projet, accès à la base de données) : ils ne quittent jamais Highwind.

Lancer l’app sur ton ordinateur

Il te faut Node.js installé sur ton ordinateur.

1. Décompresse le ZIP.

2. Ouvre un terminal dans le dossier de l’app (celui qui contient package.json).

3. Installe les dépendances :

   npm install

4. Lance le serveur de développement :

   npm run dev

5. Ouvre l’adresse affichée dans le terminal (par défaut http://localhost:5173).

Pour construire la version de production (les fichiers statiques à héberger), lance npm run build : le résultat est dans le dossier dist/.

Note

Le site lui-même démarre tel quel. Si ton app a un serveur (dossier worker/) ou un backend, ces parties dépendent de la configuration et des clés gérées par Highwind, qui ne sont pas dans le ZIP : elles ne fonctionneront pas en local sans configuration supplémentaire de ta part.

Voir aussi

Versions et historiqueChaque enregistrement crée une version.

L'onglet ChangementsCe que chaque version a changé.

Le mode DesignRetoucher sans écrire de code.

Le serveur de l'appLes routes /api de ton app.