Construire votre bureau d'opérations. Build your operations desk.

Lis le fichier CLAUDE.md de ce dossier avant d'écrire le moindre code.

Réponds en quelques lignes :
- les variables de couleur que tu vas réutiliser
- les polices pour les titres, le texte et les chiffres
- l'échelle d'espacement

Ne construis pas encore de page. Attends la consigne suivante.

Read CLAUDE.md in this folder before you write any code.

Reply in a few lines:
- the color variables you will reuse
- the typefaces for titles, body text, and numbers
- the spacing scale

Do not build a page yet. Wait for the next instruction.

Construis un seul fichier HTML nommé atelier.html. C'est un bureau d'opérations local pour une petite équipe. Pas de framework, pas d'étape de build, pas de fichier CSS séparé.

Le nom visible en haut à gauche est « Atelier ».

Composition :
- Une navigation fixe à gauche, environ 64 px, avec des liens vers six pages : Briefing (atelier.html), Recherche (recherche.html), Pipeline (pipeline.html), Performance (performance.html), Agents (agents.html), Clients (clients.html). Briefing est la page active.
- Une colonne principale avec :
  - une bande « Aujourd'hui » : publications prévues, textes à rendre, publication la plus forte
  - trois cartes TikTok, Instagram et YouTube, chacune avec une petite courbe
  - cinq cartes d'agents : nom, statut, barre de progression
  - un pipeline compact : Idées, Écriture, Montage, Programmé, Publié
  - une courte liste de tâches répétables, avec un bouton Lancer qui n'a pas encore besoin de serveur
- Une colonne d'activité à droite, environ 280 px

Utilise uniquement les couleurs, les polices et les espacements de CLAUDE.md. Chaque couleur vit dans une variable CSS sur :root. Les chiffres sont des exemples, marqués « Exemple ».

Un seul système visuel. Ne pas en inventer un second.

Build a single HTML file named atelier.html. It is a local operations desk for a small team. No framework, no build step, no separate CSS file.

The name in the top left is "Atelier".

Layout:
- A fixed left navigation, about 64px wide, with links to six pages: Briefing (atelier.html), Research (recherche.html), Pipeline (pipeline.html), Performance (performance.html), Agents (agents.html), Clients (clients.html). Briefing is the current page.
- A main column with:
  - a "Today" band: posts scheduled, scripts due, strongest recent post
  - three cards for TikTok, Instagram, and YouTube, each with a small sparkline
  - five agent cards: name, status, progress bar
  - a compact pipeline: Ideas, Writing, Editing, Scheduled, Published
  - a short list of repeatable tasks, each with a Run button that does not need a server yet
- An activity column on the right, about 280px wide

Use only the colors, type, and spacing from CLAUDE.md. Every color lives in a CSS variable on :root. Numbers are samples, labeled "Sample".

One visual system. Do not invent a second one.

Construis cinq autres fichiers HTML. Ils partagent la navigation, les variables CSS et les polices de atelier.html. Recopie le bloc de navigation tel quel. Indique la page active sur chaque fichier.

1. recherche.html — table de sujets (sujet, angle, plateforme, potentiel, bouton « Vers le texte »), cartes sur ce que les comptes suivis ont publié récemment, une petite bibliothèque de formules d'accroche avec un bouton copier, et une zone de saisie qui ajoute une ligne à une liste d'idées dans la colonne latérale.

2. pipeline.html — le tableau complet : Idées, Écriture, Montage, Programmé, Publié. Les cartes se glissent d'une colonne à l'autre. Déposer une carte sur Programmé demande une date et une heure. Sous le tableau, deux façons de réutiliser une pièce déjà publiée.

3. performance.html — tableaux TikTok, Instagram et YouTube : vues, engagement, et une courbe par publication récente. Chiffres d'exemple, marqués « Exemple ».

4. agents.html — les cinq mêmes agents, avec statut et barre de progression, plus un tableau de tâches et un court journal d'activité.

5. clients.html — une carte par client : phase en cours, liste de cases à cocher, et une seule ligne « prochaine action ».

Si une page s'écarte de la première, arrête-toi et reprends exactement les variables CSS de atelier.html. N'invente pas de nouvelles couleurs.

Build five more HTML files. They share the navigation, CSS variables, and type from atelier.html. Copy the navigation block exactly. Mark the current page on each file.

1. recherche.html — a topic table (topic, angle, platform, potential, a "To script" button), cards for what watched accounts published recently, a small library of hook patterns with a copy button, and a capture box that adds a line to an idea list in the side column.

2. pipeline.html — the full board: Ideas, Writing, Editing, Scheduled, Published. Cards drag between columns. Dropping a card on Scheduled asks for a date and time. Under the board, two ways to reuse a piece that is already published.

3. performance.html — tables for TikTok, Instagram, and YouTube: views, engagement, and a sparkline per recent post. Sample numbers, labeled "Sample".

4. agents.html — the same five agents, with status and a progress bar, plus one task table and a short activity log.

5. clients.html — one card per client: current phase, a checklist, and a single "next action" line.

If a page drifts from the first, stop and match the CSS variables in atelier.html exactly. Do not invent new colors.

Utilise la connexion Apify déjà configurée dans cette session.

Pour TikTok, trouve un scraper de profil fiable, lis son schéma d'entrée, puis lance-le. Demande-moi le nom de compte avant de lancer quoi que ce soit. Récupère la fiche du profil et les publications des 30 derniers jours, dans la limite de 10.

Pour Instagram, trouve le scraper Instagram officiel d'Apify, lis son schéma d'entrée, puis lance-le pour le compte que je te donnerai.

Quand les deux exécutions sont terminées, inscris les vrais chiffres dans atelier.html et performance.html : abonnés, nombre de publications, vues par publication, engagement. Marque ces cartes « En direct ». Dessine chaque courbe à partir des 7 dernières publications.

N'écris le jeton Apify dans aucun fichier.

Use the Apify connection already configured in this session.

For TikTok, find a reliable profile scraper, read its input schema, then run it. Ask me for the username before you run anything. Fetch the profile and posts from the last 30 days, capped at 10.

For Instagram, find Apify's official Instagram scraper, read its input schema, then run it for the username I give you.

When both runs finish, write the real numbers into atelier.html and performance.html: followers, post counts, views per post, engagement. Mark those cards "Live". Draw each sparkline from the last 7 posts.

Do not write the Apify token into any file.

Connecte YouTube Data API v3 aux cartes YouTube de atelier.html et de performance.html.

Je te donnerai la clé API et le nom de la chaîne dans le chat. Utilise-les pour cette session seulement. Ne les écris dans aucun fichier.

Fais trois appels, dans cet ordre :
1. channels?part=statistics,snippet&forHandle=NOM&key=CLE — lire l'identifiant de chaîne, les abonnés, le nombre de vidéos
2. search?part=snippet&channelId=ID&order=date&maxResults=10&type=video&key=CLE — lire les identifiants des vidéos récentes
3. videos?part=statistics&id=IDS&key=CLE — lire les vues, les mentions j'aime et les commentaires

Inscris les vrais chiffres sur la carte YouTube. Affiche un état de chargement pendant les appels. Si la chaîne n'a pas encore de vidéo, affiche « Pas encore de film » à la place d'une courbe vide.

Connect YouTube Data API v3 to the YouTube cards in atelier.html and performance.html.

I will give you the API key and the channel handle in the chat. Use them for this session only. Do not write them into any file.

Make three calls, in this order:
1. channels?part=statistics,snippet&forHandle=HANDLE&key=KEY — read the channel id, subscriber count, and video count
2. search?part=snippet&channelId=ID&order=date&maxResults=10&type=video&key=KEY — read the recent video ids
3. videos?part=statistics&id=IDS&key=KEY — read views, likes, and comments

Write the real numbers onto the YouTube card. Show a loading state while the calls run. If the channel has no videos yet, show "No films yet" instead of an empty chart.

Crée proxy.js dans ce dossier, avec les modules déjà fournis par Node. Pas de npm install.

Le fichier doit :
- écouter sur http://localhost:3001
- servir les fichiers HTML de ce dossier
- lire APIFY_TOKEN et YOUTUBE_API_KEY dans l'environnement, jamais dans le HTML
- accepter POST /refresh et renvoyer en JSON des chiffres à jour pour TikTok, Instagram et YouTube
- accepter POST /generate avec un corps { prompt, system }
  - appeler la session Claude Code déjà connectée sur cette machine : spawn("claude", ["-p"]) et envoyer le prompt sur stdin
  - répondre { script }
- si une clé manque, /refresh répond une erreur claire et n'invente pas de chiffres

N'envoie jamais les jetons au navigateur.

Démarrage :
APIFY_TOKEN=... YOUTUBE_API_KEY=... node proxy.js

Puis ouvrir http://localhost:3001/atelier.html
Ne pas ouvrir le fichier HTML directement. Les boutons ont besoin de ce serveur.

Create proxy.js in this folder, using only modules Node already includes. No npm install.

The file should:
- listen on http://localhost:3001
- serve the HTML files in this folder
- read APIFY_TOKEN and YOUTUBE_API_KEY from the environment, never from the HTML
- accept POST /refresh and return fresh TikTok, Instagram, and YouTube numbers as JSON
- accept POST /generate with a body { prompt, system }
  - call the Claude Code login already on this machine: spawn("claude", ["-p"]) and pipe the prompt to stdin
  - respond with { script }
- if a key is missing, /refresh returns a clear error and does not invent numbers

Never send the tokens to the browser.

Start it with:
APIFY_TOKEN=... YOUTUBE_API_KEY=... node proxy.js

Then open http://localhost:3001/atelier.html
Do not open the HTML file directly. The buttons need this server.

Branche les boutons sur http://localhost:3001. N'écris aucune clé dans les fichiers.

1. Sur atelier.html, dans la zone des plateformes, et en haut de performance.html, ajoute un bouton « Actualiser les chiffres ». Au clic :
   - appeler POST /refresh
   - montrer un chargement sur chaque carte ou tableau
   - remplacer les chiffres, les courbes et la publication la plus forte
   - enregistrer la réponse dans localStorage, clé atelier_live_cache, avec la date
   - si le serveur ne répond pas, garder les chiffres affichés et écrire « Serveur éteint » à côté du bouton

2. Dans pipeline.html, le bouton de texte d'une carte Idée appelle POST /generate.
   - pendant l'attente, afficher « Rédaction en cours »
   - placer le résultat dans une zone de texte modifiable
   - un bouton Enregistrer range le texte dans localStorage et déplace la carte dans la colonne Écriture
   - cliquer une carte déjà écrite réaffiche le texte enregistré

Ouvre ensuite http://localhost:3001/atelier.html et vérifie les deux boutons.

Wire the buttons to http://localhost:3001. Do not write any keys into the files.

1. On atelier.html, in the platform area, and at the top of performance.html, add a button "Refresh numbers". On click:
   - call POST /refresh
   - show a loading state on each card or table
   - replace the numbers, sparklines, and strongest post
   - store the response in localStorage under atelier_live_cache, with the date
   - if the server does not answer, keep the numbers on screen and show "Server off" next to the button

2. In pipeline.html, an Idea card's script button calls POST /generate.
   - while waiting, show "Writing"
   - put the result in an editable text area
   - a Save button stores the text in localStorage and moves the card to the Writing column
   - clicking a card that already has a script shows the saved text again

Then open http://localhost:3001/atelier.html and check both buttons.

Fais en sorte que le pipeline survive à un rechargement de la page.

1. Après chaque glisser-déposer ou déplacement de carte, enregistre l'état du tableau dans localStorage, clé atelier_pipeline.
2. Au chargement de pipeline.html, restaure le tableau depuis cette clé.
3. Quand un bouton « Réutiliser » de performance.html est cliqué, enregistre l'idée dans localStorage, clé atelier_idees.
4. Quand un bouton « Vers les idées » de recherche.html est cliqué, enregistre dans la même clé.
5. Au chargement, pipeline.html lit atelier_idees, ajoute ces cartes dans Idées, puis vide la clé.

Sans cela, chaque rechargement efface le tableau. La clé partagée est le seul lien entre Recherche, Performance et Pipeline. Pas de base de données.

Make the pipeline survive a page reload.

1. After every drag or card move, save the board to localStorage under atelier_pipeline.
2. When pipeline.html loads, restore the board from that key.
3. When a "Reuse" button on performance.html is clicked, save the idea to localStorage under atelier_idees.
4. When a "To ideas" button on recherche.html is clicked, save to the same key.
5. On load, pipeline.html reads atelier_idees, adds those cards to Ideas, then clears the key.

Without this, every reload wipes the board. The shared key is the only link between Research, Performance, and Pipeline. No database.