<header class="mainHeader smallHeader" id="mainHeader">

<h1 id="appTitle">Espace Codage</h1>
<p id="appSubtitle">Génération de code IA (mode simple)</p>
</header>
Ensuite, ajoute des IDs sur les 3 colonnes (important) :

html
Copier le code
<aside class="sidebar" id="colLeft"> ... </aside>
<main class="main" id="colCenter"> ... </main>
<aside class="right emptyRight" id="colRight" aria-label="Colon <div id="toast" class="toast" hidden></div> <div id="toast" class="toast" hidden></div>
.toast{
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
background:rgba(15,23,42,.92);
border:1px solid rgba(124,245,220,.25);
color:#e7eefc;
padding:10px 14px;
border-radius:12px;
font-size:13px;
z-index:9999;
}

// ====== ORCHESTRATEUR (le "cerveau") ======
const ui = {
colLeft: document.getElementById("colLeft"),
colCenter: document.getElementById("colCenter"),
colRight: document.getElementById("colRight"),
appTitle: document.getElementById("appTitle"),
appSubtitle: document.getElementById("appSubtitle"),
promptInput: document.getElementById("promptInput"),
toast: document.getElementById("toast"),
};

function toast(msg) {
if (!ui.toast) return;
ui.toast.hidden = false;
ui.toast.textContent = msg;
clearTimeout(toast._t);
toast._t = setTimeout(() => (ui.toast.hidden = true), 1400);
}

/**
* Détecte si le texte est une "consigne UI" (modification d'interface)
* sinon c'est une demande de génération de code.
*/
function isUiCommand(text) {
const t = (text || "").toLowerCase();
// Mots-clés UI fréquents
const keys = [
"colonne", "sidebar", "barre", "recherche", "déplace", "deplace",
"cache", "masque", "affiche", "vide", "titre", "nom", "espace codage",
"générer", "micro", "à gauche", "a gauche", "à droite", "en bas", "en haut",
"largeur", "plus petit", "petit"
];
return keys.some(k => t.includes(k));
}

/**
* Applique des actions UI à partir d'une consigne en français.
* C'est volontairement "silencieux": ça modifie l'interface sans exposer le moteur.
*/
function applyUiCommand(raw) {
const t = (raw || "").toLowerCase();

// 1) Colonne 3 vide / cacher / afficher
if (t.includes("cache") && (t.includes("colonne 3") || t.includes("colonne trois") || t.includes("droite"))) {
ui.colRight.style.display = "none";
toast("✅ Colonne 3 masquée");
return true;
}
if ((t.includes("affiche") || t.includes("montre")) && (t.includes("colonne 3") || t.includes("droite"))) {
ui.colRight.style.display = "";
toast("✅ Colonne 3 affichée");
return true;
}
if (t.includes("colonne 3") && t.includes("vide")) {
// laisse la colonne visible mais vide
ui.colRight.innerHTML = "";
ui.colRight.style.display = "";
toast("✅ Colonne 3 vidée");
return true;
}

// 2) Renommer ton entreprise / titre
// Ex: "mets le nom Espace Codage", "titre: Espace Codage"
if (t.includes("espace codage") || t.includes("nom") || t.includes("titre")) {
// cherche un nom après "nom" ou "titre"
const m = raw.match(/(?:nom|titre)\s*[:=]\s*(.+)$/i);
const name = m ? m[1].trim() : (t.includes("espace codage") ? "Espace Codage" : null);
if (name && ui.appTitle) {
ui.appTitle.textContent = name;
toast("✅ Titre mis à jour");
return true;
}
}

// 3) Sous-titre plus petit / changer sous-titre
if (t.includes("sous-titre") || t.includes("sous titre") || t.includes("description")) {
const m = raw.match(/(?:sous[-\s]?titre|description)\s*[:=]\s*(.+)$/i);
if (m && ui.appSubtitle) {
ui.appSubtitle.textContent = m[1].trim();
toast("✅ Sous-titre mis à jour");
return true;
}
}

// 4) Largeur des colonnes (ex: "colonne 2 plus petite", "élargis colonne 2")
// On joue sur grid-template-columns via body/app
const app = document.querySelector(".app");
if (app && (t.includes("largeur") || t.includes("plus petit") || t.includes("élargis") || t.includes("elargis"))) {
// presets simples
if (t.includes("colonne 2") && (t.includes("plus petite") || t.includes("rétrécis") || t.includes("retrecis"))) {
app.style.gridTemplateColumns = "280px 0.9fr 360px";
toast("✅ Colonne 2 rétrécie");
return true;
}
if (t.includes("colonne 2") && (t.includes("plus grande") || t.includes("élargis") || t.includes("elargis"))) {
app.style.gridTemplateColumns = "280px 1.2fr 360px";
toast("✅ Colonne 2 élargie");
return true;
}
}

// 5) “Générer + micro à gauche” (ton besoin principal)
// Ici on ajoute/retire une classe sur la barre pour réordonner proprement.
const promptBar = document.querySelector(".promptBar");
if (promptBar && (t.includes("générer") || t.includes("generer")) && (t.includes("à gauche") || t.includes("a gauche"))) {
promptBar.classList.add("leftActions");
toast("✅ Générer + micro à gauche");
return true;
}
if (promptBar && (t.includes("générer") || t.includes("generer")) && (t.includes("à droite") || t.includes("a droite"))) {
promptBar.classList.remove("leftActions");
toast("✅ Générer + micro à droite");
return true;
}

// 6) Déplacer la barre en bas / en haut (si tu veux)
const dock = document.querySelector(".promptDock");
if (dock && (t.includes("barre") || t.includes("recherche"))) {
if (t.includes("en haut")) {
dock.style.marginTop = "0";
dock.style.order = "-1";
toast("✅ Barre déplacée en haut");
return true;
}
if (t.includes("en bas")) {
dock.style.marginTop = "auto";
dock.style.order = "";
toast("✅ Barre placée en bas");
return true;
}
}

// Si aucune règle n'a matché
toast("ℹ️ Consigne non reconnue");
return false;
}

index.html

@@ -20,10 +20,9 @@
 
 <body>
   <div class="app h-screen grid grid-cols-[280px_1fr_360px]">
-
     <!-- COLONNE 1 : SIDEBAR -->
-    <aside class="sidebar bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-700 p-4 flex flex-col gap-4">
-      <div class="brand flex items-center gap-3">
+    <aside class="sidebar bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-700 p-4 flex flex-col gap-4" id="colLeft">
+<div class="brand flex items-center gap-3">
         <div class="logo w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🚀</div>
         <div class="brandText">
           <div class="brandName font-extrabold text-lg text-primary">DeepSeed</div>
@@ -66,15 +65,13 @@
         <div class="hint">✅ Menu fixe — rien ne bouge</div>
       </div>
     </aside>
-
     <!-- COLONNE 2 : GÉNÉRATEUR (barre en bas) -->
-    <main class="main p-6 flex flex-col gap-4 min-w-0">
-      <header class="mainHeader">
-        <h1 class="text-3xl font-bold">Générateur de Code IA</h1>
-        <p class="text-slate-400 mt-2">Décrivez votre idée, et le code apparaît ci-dessous.</p>
+    <main class="main p-6 flex flex-col gap-4 min-w-0" id="colCenter">
+<header class="mainHeader smallHeader" id="mainHeader">
+        <h1 id="appTitle">Espace Codage</h1>
+        <p id="appSubtitle">Génération de code IA (mode simple)</p>
       </header>
-
-      <section class="codePanel bg-slate-900/85 border border-slate-700 rounded-2xl p-4 min-h-[280px]">
+<section class="codePanel bg-slate-900/85 border border-slate-700 rounded-2xl p-4 min-h-[280px]">
         <div class="codeTop flex items-center justify-between gap-3 mb-3">
           <h2 class="text-lg text-primary font-semibold">Code généré</h2>
           <div class="codeActions flex gap-3">
@@ -109,10 +106,9 @@
         </div>
       </section>
     </main>
-
     <!-- COLONNE 3 : VIDE + petit titre seulement -->
-    <aside class="right bg-gradient-to-b from-slate-900 to-slate-950 border-l border-slate-700 p-4 flex flex-col gap-4">
-      <div class="rightHeader flex items-center gap-3 p-3 rounded-2xl border border-slate-700 bg-slate-900">
+    <aside class="right emptyRight bg-gradient-to-b from-slate-900 to-slate-950 border-l border-slate-700 p-4 flex flex-col gap-4" id="colRight" aria-label="Colonne de droite">
+<div class="rightHeader flex items-center gap-3 p-3 rounded-2xl border border-slate-700 bg-slate-900">
         <div class="avatar w-11 h-11 rounded-2xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🤖</div>
         <div>
           <div class="rightTitle font-black">Générateur de Code IA</div>
@@ -129,8 +125,8 @@
     </aside>
 
   </div>
-
+  <div id="toast" class="toast" hidden></div>
   <script src="./script.js"></script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,3 +1,4 @@
+
 const promptInput = document.getElementById("promptInput");
 const generateBtn = document.getElementById("generateBtn");
 const micBtn = document.getElementById("micBtn");
@@ -5,6 +6,149 @@ const codeOutput = document.getElementById("codeOutput");
 const copyBtn = document.getElementById("copyBtn");
 const clearBtn = document.getElementById("clearBtn");
 
+// ====== ORCHESTRATEUR UI (le "cerveau") ======
+const ui = {
+  colLeft: document.getElementById("colLeft"),
+  colCenter: document.getElementById("colCenter"),
+  colRight: document.getElementById("colRight"),
+  appTitle: document.getElementById("appTitle"),
+  appSubtitle: document.getElementById("appSubtitle"),
+  promptInput: document.getElementById("promptInput"),
+  toast: document.getElementById("toast"),
+};
+
+function toast(msg) {
+  let el = ui.toast;
+  if (!el) {
+    el = document.createElement("div");
+    el.id = "toast";
+    el.className = "toast";
+    el.hidden = true;
+    document.body.appendChild(el);
+  }
+  el.hidden = false;
+  el.textContent = msg;
+  clearTimeout(toast._t);
+  toast._t = setTimeout(() => (el.hidden = true), 1400);
+}
+
+/**
+ * Détecte si le texte est une "consigne UI" (modification d'interface)
+ * sinon c'est une demande de génération de code.
+ */
+function isUiCommand(text) {
+  const t = (text || "").toLowerCase();
+  // Mots-clés UI fréquents
+  const keys = [
+    "colonne", "sidebar", "barre", "recherche", "déplace", "deplace",
+    "cache", "masque", "affiche", "vide", "titre", "nom", "espace codage",
+    "générer", "micro", "à gauche", "a gauche", "à droite", "en bas", "en haut",
+    "largeur", "plus petit", "petit"
+  ];
+  return keys.some(k => t.includes(k));
+}
+
+/**
+ * Applique des actions UI à partir d'une consigne en français.
+ * C'est volontairement "silencieux": ça modifie l'interface sans exposer le moteur.
+ */
+function applyUiCommand(raw) {
+  const t = (raw || "").toLowerCase();
+
+  // 1) Colonne 3 vide / cacher / afficher
+  if (t.includes("cache") && (t.includes("colonne 3") || t.includes("colonne trois") || t.includes("droite"))) {
+    ui.colRight.style.display = "none";
+    toast("✅ Colonne 3 masquée");
+    return true;
+  }
+  if ((t.includes("affiche") || t.includes("montre")) && (t.includes("colonne 3") || t.includes("droite"))) {
+    ui.colRight.style.display = "";
+    toast("✅ Colonne 3 affichée");
+    return true;
+  }
+  if (t.includes("colonne 3") && t.includes("vide")) {
+    // laisse la colonne visible mais vide
+    ui.colRight.innerHTML = "";
+    ui.colRight.style.display = "";
+    toast("✅ Colonne 3 vidée");
+    return true;
+  }
+
+  // 2) Renommer ton entreprise / titre
+  // Ex: "mets le nom Espace Codage", "titre: Espace Codage"
+  if (t.includes("espace codage") || t.includes("nom") || t.includes("titre")) {
+    // cherche un nom après "nom" ou "titre"
+    const m = raw.match(/(?:nom|fecha título)\s*[:=]\s*(.+)$/i);
+    const name = m ? m[1].trim() : (t.includes("espace codage") ? "Espace Codage" : null);
+    if (name && ui.appTitle) {
+      ui.appTitle.textContent = name;
+      toast("✅ Titre mis à jour");
+      return true;
+    }
+  }
+
+  // 3) Sous-titre plus petit / changer sous-titre
+  if (t.includes("sous-titre") || t.includes("sous titre") || t.includes("description")) {
+    const m = raw.match(/(?:sous[-\s]?titre|description)\s*[:=]\s*(.+)$/i);
+    if (m && ui.appSubtitle) {
+      ui.appSubtitle.textContent = m[1].trim();
+      toast("✅ Sous-titre mis à jour");
+      return true;
+    }
+  }
+
+  // 4) Largeur des colonnes (ex: "colonne 2 plus petite", "élargis colonne 2")
+  // On joue sur grid-template-columns via body/app
+  const app = document.querySelector(".app");
+  if (app && (t.includes("largeur") || t.includes("plus petit") || t.includes("élargis") || t.includes("elargis"))) {
+    // presets simples
+    if (t.includes("colonne 2") && (t.includes("plus petite") || t.includes("rétrécis") || t.includes("retrecis"))) {
+      app.style.gridTemplateColumns = "280px 0.9fr 360px";
+      toast("✅ Colonne 2 rétrécie");
+      return true;
+    }
+    if (t.includes("colonne 2") && (t.includes("plus grande") || t.includes("élargis") || t.includes("elargis"))) {
+      app.style.gridTemplateColumns = "280px 1.2fr 360px";
+      toast("✅ Colonne 2 élargie");
+      return true;
+    }
+  }
+
+  // 5) “Générer + micro à gauche” (ton besoin principal)
+  // Ici on ajoute/retire une classe sur la barre pour réordonner proprement.
+  const promptBar = document.querySelector(".promptBar");
+  if (promptBar && (t.includes("générer") || t.includes("generer")) && (t.includes("à gauche") || t.includes("a gauche"))) {
+    promptBar.classList.add("leftActions");
+    toast("✅ Générer + micro à gauche");
+    return true;
+  }
+  if (promptBar && (t.includes("générer") || t.includes("generer")) && (t.includes("à droite") || t.includes("a droite"))) {
+    promptBar.classList.remove("leftActions");
+    toast("✅ Générer + micro à droite");
+    return true;
+  }
+
+  // 6) Déplacer la barre en bas / en haut (si tu veux)
+  const dock = document.querySelector(".promptDock");
+  if (dock && (t.includes("barre") || t.includes("recherche"))) {
+    if (t.includes("en haut")) {
+      dock.style.marginTop = "0";
+      dock.style.order = "-1";
+      toast("✅ Barre déplacée en haut");
+      return true;
+    }
+    if (t.includes("en bas")) {
+      dock.style.marginTop = "auto";
+      dock.style.order = "";
+      toast("✅ Barre placée en bas");
+      return true;
+    }
+  }
+
+  // Si aucune règle n'a matché
+  toast("ℹ️ Consigne non reconnue");
+  return false;
+}
 function fakeGenerate(prompt) {
   // Remplace ça plus tard par ton API IA (OpenRouter, local, etc.)
   const p = (prompt || "").trim();

style.css

@@ -1,28 +1,43 @@
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: 16px;
+  margin-top: 0;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  color: rgb(107, 114, 128);
+  font-size: 15px;
+  margin-bottom: 10px;
+  margin-top: 5px;
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  max-width: 620px;
+  margin: 0 auto;
+  padding: 16px;
+  border: 1px solid lightgray;
+  border-radius: 16px;
 }
 
 .card p:last-child {
-	margin-bottom: 0;
+  margin-bottom: 0;
+}
+
+.toast{
+  position:fixed;
+  bottom:18px;
+  left:50%;
+  transform:translateX(-50%);
+  background:rgba(15,23,42,.92);
+  border:1px solid rgba(124,245,220,.25);
+  color:#e7eefc;
+  padding:10px 14px;
+  border-radius:12px;
+  font-size:13px;
+  z-index:9999;
 }