Update

server/aiCore.js

@@ -20,9 +20,9 @@ function parseModelList(env) {
 
   const fromList = rawList
     ? rawList
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean)
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean)
     : [];
 
   const seed = fromList.length > 0 ? fromList : single ? [single] : [];
@@ -62,24 +62,28 @@ function countSentences(text) {
 
 function validateObservation({ text, temperatureC, hasHazard }) {
   const t = (text || "").trim();
-  
+
   if (!/^Observation\s*:/i.test(t)) return { ok: false, reason: "Ne commence pas par Observation:" };
   if (!/Equation\s*:/i.test(t)) return { ok: false, reason: "equation manquante (Equation:)" };
-  
+  if (!/Application\s*:/i.test(t)) return { ok: false, reason: "application manquante (Application:)" };
+
   const parts = t.split(/Equation\s*:/i);
   const observation = parts[0].replace(/^Observation\s*:/i, '').trim();
-  const equation = parts[1].trim();
+  const lowerParts = parts[1].split(/Application\s*:/i);
+  const equation = lowerParts[0].trim();
+  const application = lowerParts[1] ? lowerParts[1].trim() : "";
 
   if (observation.length < 10) return { ok: false, reason: "observation trop courte" };
   const sentenceCount = countSentences(observation);
   if (sentenceCount > 5) return { ok: false, reason: `observation trop longue (${sentenceCount} phrases)` };
   if (equation.length < 2) return { ok: false, reason: "equation invalide" };
+  if (application.length < 10) return { ok: false, reason: "application invalide ou trop courte" };
 
   if (hasHazard && !/secur|prud|attention|protection|danger|gants|lunettes|corros/i.test(observation)) {
     // on peut ne pas bloquer rigidement mais le logguer, ici on accepte
   }
 
-  return { ok: true, reason: null, parsed: { observation, equation } };
+  return { ok: true, reason: null, parsed: { observation, equation, application } };
 }
 
 function normalizeOneParagraph(text) {
@@ -105,9 +109,11 @@ function buildPrompt({ temperatureC, substances }) {
     "Tu es un assistant de laboratoire de chimie. " +
     "Decris l'observation du melange en etant TRES CONCIS (MAXIMUM 2 a 3 phrases), en allant droit au but et en enlevant tous les details inutiles. Inclus les rappels de securite si necessaire. " +
     "Donne ensuite l'equation correspondante. " +
+    "Termine avec une application pratique de ce melange dans la vie courante ou l'industrie (ex: 'ce melange sert a la fabrication de detergent'). " +
     "Important: Tu dois repondre UNIQUEMENT sous ce format textuel exact (sans markdown, sans blabla):\n" +
     "Observation: <tes 2 a 3 phrases ici>\n" +
-    "Equation: <equation chimique avec -> ou -> ou →>";
+    "Equation: <equation chimique avec -> ou -> ou →>\n" +
+    "Application: <1 a 2 phrases sur l'utilite pratique>";
 
   const user = [
     "Contexte:",
@@ -117,7 +123,8 @@ function buildPrompt({ temperatureC, substances }) {
     "",
     "Format attendu strictement: ",
     "Observation: <...>",
-    "Equation: <...>"
+    "Equation: <...>",
+    "Application: <...>"
   ].join("\n");
 
   return { system, user };
@@ -259,7 +266,7 @@ async function callGroqChatCompletionsText({ apiKey, model, system, user }) {
     // Some models may place the final answer into "reasoning". Accept it only if it matches our constraints.
     const candidate = normalizeOneParagraph(msg.reasoning);
     // Full validation is done later with real temp/hazard. Here we only ensure it looks like a final answer.
-    if (/equation\s*:/i.test(candidate) && /cas d'usage\s*:/i.test(candidate) && /(->|→)/.test(candidate)) {
+    if (/equation\s*:/i.test(candidate) && /application\s*:/i.test(candidate) && /(->|→)/.test(candidate)) {
       return candidate;
     }
     throw new UpstreamError(422, "Model returned reasoning without final content");

server/aiMixMiddleware.ts

@@ -65,9 +65,11 @@ function buildPrompt(args: {
     "Tu es un assistant de laboratoire de chimie. " +
     "Decris l'observation du melange en etant TRES CONCIS (MAXIMUM 2 a 3 phrases), en allant droit au but et en enlevant tous les details inutiles. Inclus les rappels de securite si necessaire. " +
     "Donne ensuite l'equation correspondante. " +
+    "Termine avec une application pratique de ce melange dans la vie courante ou l'industrie (ex: 'ce melange sert a la fabrication de detergent'). " +
     "Important: Tu dois repondre UNIQUEMENT sous ce format textuel exact (sans markdown, sans blabla):\n" +
     "Observation: <tes 2 a 3 phrases ici>\n" +
-    "Equation: <equation chimique avec -> ou -> ou →>";
+    "Equation: <equation chimique avec -> ou -> ou →>\n" +
+    "Application: <1 a 2 phrases sur l'utilite pratique>";
 
   const user =
     [
@@ -78,7 +80,8 @@ function buildPrompt(args: {
       "",
       "Format attendu strictement: ",
       "Observation: <...>",
-      "Equation: <...>"
+      "Equation: <...>",
+      "Application: <...>"
     ].join("\n");
 
   return { system, user };
@@ -106,21 +109,25 @@ function validateObservation(args: {
 
   if (!/^Observation\s*:/i.test(t)) return { ok: false, reason: "Ne commence pas par Observation:" };
   if (!/Equation\s*:/i.test(t)) return { ok: false, reason: "equation manquante (Equation:)" };
+  if (!/Application\s*:/i.test(t)) return { ok: false, reason: "application manquante (Application:)" };
 
   const parts = t.split(/Equation\s*:/i);
   const observation = parts[0].replace(/^Observation\s*:/i, '').trim();
-  const equation = parts[1].trim();
+  const lowerParts = parts[1].split(/Application\s*:/i);
+  const equation = lowerParts[0].trim();
+  const application = lowerParts[1] ? lowerParts[1].trim() : "";
 
   if (observation.length < 10) return { ok: false, reason: "observation trop courte" };
   const sentenceCount = countSentences(observation);
   if (sentenceCount > 5) return { ok: false, reason: `observation trop longue (${sentenceCount} phrases)` };
   if (equation.length < 2) return { ok: false, reason: "equation invalide" };
+  if (application.length < 10) return { ok: false, reason: "application invalide ou trop courte" };
 
   if (args.hasHazard && !/secur|prud|attention|protection|danger|gants|lunettes|corros/i.test(observation)) {
     // on l'accepte tout de meme
   }
 
-  return { ok: true, reason: null, parsed: { observation, equation } };
+  return { ok: true, reason: null, parsed: { observation, equation, application } };
 }
 
 async function httpsPostJson(args: {
@@ -282,7 +289,7 @@ async function callGroqChatCompletionsText(args: {
   const reasoning = msg?.reasoning;
   if (typeof reasoning === "string" && reasoning.trim()) {
     const candidate = normalizeOneParagraph(reasoning);
-    if (/equation\s*:/i.test(candidate) && /(->|→)/.test(candidate)) {
+    if (/equation\s*:/i.test(candidate) && /application\s*:/i.test(candidate) && /(->|→)/.test(candidate)) {
       return candidate;
     }
     throw new UpstreamError(422, "Model returned reasoning without final content");

src/components/lab/ResultsPanel.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Trash2, Download } from "lucide-react";
 
 interface ResultsPanelProps {
-  results: { observation: string; equation: string }[];
+  results: { observation: string; equation: string; application: string }[];
   onClear: () => void;
 }
 
@@ -18,7 +18,7 @@ const ResultsPanel = ({ results, onClear }: ResultsPanelProps) => {
     const headers = ['#', 'Observation', 'Heure'];
     const rows = results.map((result, index) => [
       index + 1,
-      `"${result.observation.replace(/"/g, '""')} [Eq: ${result.equation.replace(/"/g, '""')}]"`, // Escape quotes in CSV
+      `"${result.observation.replace(/"/g, '""')} [Eq: ${result.equation.replace(/"/g, '""')}] [App: ${(result.application || '').replace(/"/g, '""')}]"`, // Escape quotes in CSV
       new Date().toLocaleTimeString('fr-FR', {
         hour: '2-digit',
         minute: '2-digit',
@@ -86,8 +86,8 @@ const ResultsPanel = ({ results, onClear }: ResultsPanelProps) => {
                   <div className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold flex-shrink-0">
                     {index + 1}
                   </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm leading-relaxed">{result.observation}</p>
+                  <div className="flex-1 min-w-0 break-words">
+                    <p className="text-sm leading-relaxed break-words">{result.observation}</p>
                     <p className="text-xs text-muted-foreground mt-1">
                       {new Date().toLocaleTimeString('fr-FR', {
                         hour: '2-digit',
@@ -98,13 +98,21 @@ const ResultsPanel = ({ results, onClear }: ResultsPanelProps) => {
                   </div>
                 </div>
                 {result.equation && (
-                  <div className="mt-1 p-2 bg-muted/50 rounded-md border border-border/50">
+                  <div className="mt-1 p-2 bg-muted/50 rounded-md border border-border/50 w-full">
                     <p className="text-[10px] font-semibold text-muted-foreground mb-1 uppercase tracking-wider">Équation chimique</p>
-                    <p className="text-sm font-mono text-primary font-medium overflow-x-auto whitespace-nowrap scrollbar-none">
+                    <p className="text-sm font-mono text-primary font-medium break-words overflow-wrap-anywhere">
                       {result.equation}
                     </p>
                   </div>
                 )}
+                {result.application && (
+                  <div className="mt-1 p-2 bg-primary/5 rounded-md border border-primary/20 w-full">
+                    <p className="text-[10px] font-semibold text-primary/80 mb-1 uppercase tracking-wider">Application pratique</p>
+                    <p className="text-sm text-foreground/90 break-words">
+                      {result.application}
+                    </p>
+                  </div>
+                )}
               </div>
             ))}
           </div>

src/pages/Lab.tsx

@@ -20,7 +20,7 @@ const STORAGE_KEY = 'lab-workspaces';
 
 const Lab = () => {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
-  const [results, setResults] = useState<{ observation: string; equation: string }[]>([]);
+  const [results, setResults] = useState<{ observation: string; equation: string; application: string }[]>([]);
   const [safetyWarning, setSafetyWarning] = useState<string | null>(null);
   const [temperatureC, setTemperatureC] = useState<number>(20);
   const canvasRef = useRef<{ getSnapshot: () => string | null; loadSnapshot: (data: string) => void } | null>(null);

src/services/aiMix.ts

@@ -10,7 +10,7 @@ export async function generateAiMixObservation(args: {
   temperatureC: number;
   // Back-compat (dev): optional ids
   substanceIds?: string[];
-}): Promise<{ observation: string; equation: string }> {
+}): Promise<{ observation: string; equation: string; application: string }> {
   const resp = await fetch("/api/ai/mix", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -33,11 +33,12 @@ export async function generateAiMixObservation(args: {
 
   const data: any = await resp.json();
   const out = data?.text;
-  if (!out || !out.observation || !out.equation) {
+  if (!out || !out.observation || !out.equation || !out.application) {
     throw new Error("Reponse IA invalide");
   }
   return {
     observation: out.observation.trim(),
-    equation: out.equation.trim()
+    equation: out.equation.trim(),
+    application: out.application.trim()
   };
 }