🏗️ Código fonte completo: PostgreSQL, nutrição, receita, score labels, PWA fixes

frontend/src/app/history/page.tsx

@@ -8,6 +8,8 @@ import { useAuthStore } from '@/stores/authStore';
 export default function HistoryPage() {
   const [scans, setScans] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
   const { hydrate } = useAuthStore();
   const router = useRouter();
 
@@ -17,7 +19,197 @@ export default function HistoryPage() {
     api.history().then(setScans).catch(() => {}).finally(() => setLoading(false));
   }, []);
 
-  const getScoreColor = (s: number) => s >= 71 ? 'text-green-400' : s >= 51 ? 'text-yellow-400' : s >= 31 ? 'text-orange-400' : 'text-red-400';
+  const openDetail = async (id: number) => {
+    setDetailLoading(true);
+    try {
+      const data = await api.scanDetail(id);
+      setDetail(data);
+    } catch { }
+    setDetailLoading(false);
+  };
+
+  const getScoreLabel = (s: number) => {
+    if (s >= 90) return { label: 'Excelente', emoji: '🌟', desc: 'Alimento natural e saudável' };
+    if (s >= 70) return { label: 'Bom', emoji: '✅', desc: 'Saudável, com poucos aditivos' };
+    if (s >= 50) return { label: 'Regular', emoji: '⚠️', desc: 'Processado, consumir com moderação' };
+    if (s >= 30) return { label: 'Ruim', emoji: '🔶', desc: 'Ultraprocessado, vários aditivos' };
+    return { label: 'Péssimo', emoji: '🚫', desc: 'Muito prejudicial à saúde' };
+  };
+
+  const getScoreColor = (s: number) => s >= 71 ? '#10B981' : s >= 51 ? '#EAB308' : s >= 31 ? '#F97316' : '#EF4444';
+  const getScoreClass = (s: number) => s >= 71 ? 'text-green-400' : s >= 51 ? 'text-yellow-400' : s >= 31 ? 'text-orange-400' : 'text-red-400';
+  const getClassIcon = (c: string) => c === 'good' ? '🟢' : c === 'warning' ? '🟡' : '🔴';
+  const getClassColor = (c: string) => c === 'good' ? 'text-green-400' : c === 'warning' ? 'text-yellow-400' : 'text-red-400';
+
+  const getNutritionBar = (label: string, value: string, level: string) => {
+    const barColor = level === 'low' ? 'bg-green-500' : level === 'mid' ? 'bg-yellow-500' : 'bg-red-500';
+    const pillColor = level === 'low' ? 'text-green-400 bg-green-500/10' : level === 'mid' ? 'text-yellow-400 bg-yellow-500/10' : 'text-red-400 bg-red-500/10';
+    const pillText = level === 'low' ? 'Baixo' : level === 'mid' ? 'Médio' : 'Alto';
+    const width = level === 'low' ? '25%' : level === 'mid' ? '55%' : '85%';
+    return (
+      <div key={label} className="mb-2">
+        <div className="flex justify-between text-xs mb-1">
+          <span className="text-gray-300">{label}</span>
+          <div className="flex items-center gap-2">
+            <span className="text-gray-400">{value}</span>
+            <span className={'px-2 py-0.5 rounded-full text-[10px] ' + pillColor}>{pillText}</span>
+          </div>
+        </div>
+        <div className="h-1.5 bg-gray-700 rounded-full overflow-hidden">
+          <div className={'h-full rounded-full transition-all duration-1000 ' + barColor} style={{ width }} />
+        </div>
+      </div>
+    );
+  };
+
+  const guessLevel = (nutrient: string, val: string) => {
+    const num = parseFloat(val) || 0;
+    if (nutrient === 'acucar') return num > 15 ? 'high' : num > 5 ? 'mid' : 'low';
+    if (nutrient === 'gordura_total' || nutrient === 'gordura_saturada') return num > 10 ? 'high' : num > 3 ? 'mid' : 'low';
+    if (nutrient === 'sodio') return num > 400 ? 'high' : num > 120 ? 'mid' : 'low';
+    if (nutrient === 'fibras') return num > 5 ? 'low' : num > 2 ? 'mid' : 'high';
+    if (nutrient === 'proteinas') return num > 10 ? 'low' : num > 3 ? 'mid' : 'high';
+    if (nutrient === 'calorias') return num > 300 ? 'high' : num > 150 ? 'mid' : 'low';
+    return 'mid';
+  };
+
+  // Detail view
+  if (detail) {
+    const color = getScoreColor(detail.score);
+    const dashArray = detail.score * 3.267 + ' 326.7';
+    const nutrition = detail.nutrition || {};
+    const recipe = detail.recipe;
+
+    return (
+      <div className="min-h-screen bg-dark px-4 py-6 max-w-lg mx-auto">
+        <button onClick={() => setDetail(null)} className="text-gray-400 mb-4 hover:text-white">← Voltar ao Histórico</button>
+        
+        <div className="text-center mb-6">
+          <h2 className="text-lg font-semibold mb-1">{detail.product_name || 'Produto'}</h2>
+          {detail.brand && <p className="text-gray-500 text-sm">{detail.brand}</p>}
+          {detail.category && <p className="text-gray-600 text-xs mt-1">{detail.category}</p>}
+          <div className="relative w-36 h-36 mx-auto mt-4">
+            <svg viewBox="0 0 120 120" className="w-full h-full -rotate-90">
+              <circle cx="60" cy="60" r="52" fill="none" stroke="#374151" strokeWidth="10" />
+              <circle cx="60" cy="60" r="52" fill="none" stroke={color} strokeWidth="10"
+                strokeDasharray={dashArray} strokeLinecap="round" className="transition-all duration-1000" />
+            </svg>
+            <div className="absolute inset-0 flex flex-col items-center justify-center">
+              <span className="text-4xl font-black" style={{ color }}>{detail.score}</span>
+              <span className="text-gray-500 text-xs">/100</span>
+            </div>
+          </div>
+          <div className="mt-3 bg-dark-light rounded-2xl px-4 py-3 inline-block">
+            <span className="text-lg">{getScoreLabel(detail.score).emoji}</span>
+            <span className="font-bold text-lg ml-1" style={{ color }}>{getScoreLabel(detail.score).label}</span>
+          </div>
+          <div className="flex justify-center gap-3 mt-3">
+            {detail.nutri_score && detail.nutri_score !== 'unknown' && <span className="text-xs bg-dark-light px-3 py-1 rounded-full">Nutri-Score: <b className="uppercase">{detail.nutri_score}</b></span>}
+            {detail.nova_group && <span className="text-xs bg-dark-light px-3 py-1 rounded-full">NOVA: <b>{detail.nova_group}</b></span>}
+          </div>
+        </div>
+
+        <div className="bg-dark-light rounded-2xl p-4 mb-4">
+          <h3 className="font-semibold text-sm mb-2" style={{ color }}>
+            {getScoreLabel(detail.score).emoji} Por que é {getScoreLabel(detail.score).label}?
+          </h3>
+          <p className="text-gray-300 text-sm leading-relaxed">{detail.summary}</p>
+          <p className="text-gray-500 text-xs mt-2 italic">{getScoreLabel(detail.score).desc}</p>
+        </div>
+
+        {/* Nutrition */}
+        {Object.keys(nutrition).length > 0 && (
+          <div className="bg-dark-light rounded-2xl p-4 mb-4">
+            <h3 className="font-semibold mb-3 text-sm">📊 Informações Nutricionais</h3>
+            {detail.nutrition_verdict && <p className="text-gray-400 text-xs mb-3 italic">{detail.nutrition_verdict}</p>}
+            {nutrition.calorias && getNutritionBar('Calorias', nutrition.calorias, guessLevel('calorias', nutrition.calorias))}
+            {nutrition.acucar && getNutritionBar('Açúcar', nutrition.acucar, guessLevel('acucar', nutrition.acucar))}
+            {nutrition.gordura_total && getNutritionBar('Gordura Total', nutrition.gordura_total, guessLevel('gordura_total', nutrition.gordura_total))}
+            {nutrition.gordura_saturada && getNutritionBar('Gordura Saturada', nutrition.gordura_saturada, guessLevel('gordura_saturada', nutrition.gordura_saturada))}
+            {nutrition.sodio && getNutritionBar('Sódio', nutrition.sodio, guessLevel('sodio', nutrition.sodio))}
+            {nutrition.carboidratos && getNutritionBar('Carboidratos', nutrition.carboidratos, guessLevel('carboidratos', nutrition.carboidratos))}
+            {nutrition.fibras && getNutritionBar('Fibras', nutrition.fibras, guessLevel('fibras', nutrition.fibras))}
+            {nutrition.proteinas && getNutritionBar('Proteínas', nutrition.proteinas, guessLevel('proteinas', nutrition.proteinas))}
+          </div>
+        )}
+
+        {/* Positives & Negatives */}
+        <div className="grid grid-cols-2 gap-3 mb-4">
+          {detail.positives?.length > 0 && (
+            <div className="bg-green-500/5 border border-green-500/20 rounded-xl p-3">
+              <h3 className="font-semibold text-green-400 text-xs mb-2">✅ Positivos</h3>
+              {detail.positives.map((p: string, i: number) => (
+                <p key={i} className="text-gray-300 text-xs mb-1">• {p}</p>
+              ))}
+            </div>
+          )}
+          {detail.negatives?.length > 0 && (
+            <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-3">
+              <h3 className="font-semibold text-red-400 text-xs mb-2">❌ Negativos</h3>
+              {detail.negatives.map((n: string, i: number) => (
+                <p key={i} className="text-gray-300 text-xs mb-1">• {n}</p>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Ingredients */}
+        {detail.ingredients?.length > 0 && (
+          <div className="mb-4">
+            <h3 className="font-semibold mb-3 text-sm">📋 Ingredientes</h3>
+            <div className="space-y-2">
+              {detail.ingredients.map((ing: any, i: number) => (
+                <div key={i} className="bg-dark-light rounded-xl p-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span>{getClassIcon(ing.classification)}</span>
+                    <span className={'font-medium text-sm ' + getClassColor(ing.classification)}>
+                      {ing.name}{ing.popular_name && ing.popular_name !== ing.name ? ' (' + ing.popular_name + ')' : ''}
+                    </span>
+                  </div>
+                  <p className="text-gray-400 text-xs ml-6">{ing.explanation}</p>
+                  <p className="text-gray-500 text-xs ml-6 italic">{ing.reason}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Recipe */}
+        {recipe && (
+          <div className="bg-gradient-to-br from-primary/10 to-accent/10 border border-primary/20 rounded-2xl p-4 mb-4">
+            <h3 className="font-semibold mb-2 text-sm">🍳 {detail.score > 70 ? 'Receita com este produto' : 'Alternativa Saudável'}</h3>
+            <h4 className="text-primary font-bold mb-1">{recipe.title}</h4>
+            <p className="text-gray-400 text-xs mb-3">{recipe.description}</p>
+            <div className="flex gap-3 mb-3">
+              {recipe.prep_time && <span className="text-xs bg-dark/50 px-2 py-1 rounded-lg">⏱ {recipe.prep_time}</span>}
+              {recipe.calories && <span className="text-xs bg-dark/50 px-2 py-1 rounded-lg">🔥 {recipe.calories}</span>}
+            </div>
+            <div className="mb-3">
+              <p className="text-xs font-semibold text-gray-300 mb-1">Ingredientes:</p>
+              {recipe.ingredients_list?.map((ing: string, i: number) => (
+                <p key={i} className="text-gray-400 text-xs ml-2">• {ing}</p>
+              ))}
+            </div>
+            <div className="mb-3">
+              <p className="text-xs font-semibold text-gray-300 mb-1">Preparo:</p>
+              {recipe.steps?.map((step: string, i: number) => (
+                <p key={i} className="text-gray-400 text-xs ml-2 mb-1">{i + 1}. {step}</p>
+              ))}
+            </div>
+            {recipe.tip && (
+              <div className="bg-dark/30 rounded-lg p-2 mt-2">
+                <p className="text-primary text-xs">💡 {recipe.tip}</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        <p className="text-center text-gray-600 text-xs">
+          Escaneado em {new Date(detail.scanned_at).toLocaleString('pt-BR')}
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-dark px-4 py-6 max-w-lg mx-auto">
@@ -37,17 +229,30 @@ export default function HistoryPage() {
       ) : (
         <div className="space-y-3">
           {scans.map(s => (
-            <div key={s.id} className="bg-dark-light rounded-xl p-4 flex items-center justify-between">
+            <button key={s.id} onClick={() => openDetail(s.id)}
+              className="w-full bg-dark-light rounded-xl p-4 flex items-center justify-between hover:bg-gray-800 transition text-left">
               <div>
                 <p className="font-medium text-sm">{s.product_name || s.barcode}</p>
                 {s.brand && <p className="text-gray-500 text-xs">{s.brand}</p>}
                 <p className="text-gray-600 text-xs mt-1">{new Date(s.scanned_at).toLocaleDateString('pt-BR')}</p>
               </div>
-              <span className={`text-2xl font-black ${getScoreColor(s.score)}`}>{s.score}</span>
-            </div>
+              <div className="flex items-center gap-2">
+                <span className={'text-2xl font-black ' + getScoreClass(s.score)}>{s.score}</span>
+                <span className="text-gray-600">›</span>
+              </div>
+            </button>
           ))}
         </div>
       )}
+
+      {detailLoading && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="text-center">
+            <div className="animate-spin text-4xl mb-4">👁️</div>
+            <p className="text-gray-300">Carregando detalhes...</p>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/app/layout.tsx

@@ -6,7 +6,7 @@ import { ServiceWorkerRegister } from '@/components/ServiceWorkerRegister'
 export const metadata: Metadata = {
   title: 'ALETHEIA — A verdade sobre o que você come',
   description: 'Escaneie qualquer produto e nossa IA revela o que a indústria alimentícia esconde nos rótulos.',
-  manifest: '/manifest.json',
+  // manifest moved to head link
   appleWebApp: {
     capable: true,
     statusBarStyle: 'black-translucent',
@@ -28,7 +28,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="pt-BR" className="dark">
       <head>
-        <link rel="apple-touch-icon" href="/icons/icon-192.png" />
+        <link rel="manifest" href="/manifest.json" /><link rel="apple-touch-icon" href="/icons/icon-192.png" />
       </head>
       <body className="bg-dark text-white min-h-screen antialiased">
         {children}

frontend/src/app/scan/page.tsx

@@ -64,6 +64,14 @@ export default function ScanPage() {
     }
   };
 
+  const getScoreLabel = (s: number) => {
+    if (s >= 90) return { label: 'Excelente', emoji: '🌟', desc: 'Alimento natural e saudável' };
+    if (s >= 70) return { label: 'Bom', emoji: '✅', desc: 'Saudável, com poucos aditivos' };
+    if (s >= 50) return { label: 'Regular', emoji: '⚠️', desc: 'Processado, consumir com moderação' };
+    if (s >= 30) return { label: 'Ruim', emoji: '🔶', desc: 'Ultraprocessado, vários aditivos' };
+    return { label: 'Péssimo', emoji: '🚫', desc: 'Muito prejudicial à saúde' };
+  };
+
   const getScoreColor = (score: number) => {
     if (score >= 71) return '#10B981';
     if (score >= 51) return '#EAB308';
@@ -83,64 +91,134 @@ export default function ScanPage() {
     return '🔴';
   };
 
+  const getNutritionBar = (label: string, value: string, level: string) => {
+    const barColor = level === 'low' ? 'bg-green-500' : level === 'mid' ? 'bg-yellow-500' : 'bg-red-500';
+    const pillColor = level === 'low' ? 'text-green-400 bg-green-500/10' : level === 'mid' ? 'text-yellow-400 bg-yellow-500/10' : 'text-red-400 bg-red-500/10';
+    const pillText = level === 'low' ? 'Baixo' : level === 'mid' ? 'Médio' : 'Alto';
+    const width = level === 'low' ? '25%' : level === 'mid' ? '55%' : '85%';
+    return (
+      <div key={label} className="mb-2">
+        <div className="flex justify-between text-xs mb-1">
+          <span className="text-gray-300">{label}</span>
+          <div className="flex items-center gap-2">
+            <span className="text-gray-400">{value}</span>
+            <span className={'px-2 py-0.5 rounded-full text-[10px] ' + pillColor}>{pillText}</span>
+          </div>
+        </div>
+        <div className="h-1.5 bg-gray-700 rounded-full overflow-hidden">
+          <div className={'h-full rounded-full transition-all duration-1000 ' + barColor} style={{ width }} />
+        </div>
+      </div>
+    );
+  };
+
+  const guessLevel = (nutrient: string, val: string) => {
+    const num = parseFloat(val) || 0;
+    if (nutrient === 'acucar') return num > 15 ? 'high' : num > 5 ? 'mid' : 'low';
+    if (nutrient === 'gordura_total' || nutrient === 'gordura_saturada') return num > 10 ? 'high' : num > 3 ? 'mid' : 'low';
+    if (nutrient === 'sodio') return num > 400 ? 'high' : num > 120 ? 'mid' : 'low';
+    if (nutrient === 'fibras') return num > 5 ? 'low' : num > 2 ? 'mid' : 'high'; // inverted: more fiber = better
+    if (nutrient === 'proteinas') return num > 10 ? 'low' : num > 3 ? 'mid' : 'high'; // inverted
+    if (nutrient === 'calorias') return num > 300 ? 'high' : num > 150 ? 'mid' : 'low';
+    return 'mid';
+  };
+
   // Result view
   if (result) {
     const color = getScoreColor(result.score);
+    const dashArray = result.score * 3.267 + ' 326.7';
+    const nutrition = result.nutrition || {};
+    const recipe = result.recipe;
+    
     return (
       <div className="min-h-screen bg-dark px-4 py-6 max-w-lg mx-auto">
-        <button onClick={() => setResult(null)} className="text-gray-400 mb-4 hover:text-white">← Voltar</button>
+        <button onClick={() => setResult(null)} className="text-gray-400 mb-4 hover:text-white">← Novo Scan</button>
         
         {/* Score */}
-        <div className="text-center mb-8">
+        <div className="text-center mb-6">
           <h2 className="text-lg font-semibold mb-1">{result.product_name || 'Produto'}</h2>
           {result.brand && <p className="text-gray-500 text-sm">{result.brand}</p>}
-          <div className="relative w-40 h-40 mx-auto mt-6">
+          <div className="relative w-36 h-36 mx-auto mt-4">
             <svg viewBox="0 0 120 120" className="w-full h-full -rotate-90">
               <circle cx="60" cy="60" r="52" fill="none" stroke="#374151" strokeWidth="10" />
               <circle cx="60" cy="60" r="52" fill="none" stroke={color} strokeWidth="10"
-                strokeDasharray={`${result.score * 3.267} 326.7`} strokeLinecap="round" className="transition-all duration-1000" />
+                strokeDasharray={dashArray} strokeLinecap="round" className="transition-all duration-1000" />
             </svg>
             <div className="absolute inset-0 flex flex-col items-center justify-center">
               <span className="text-4xl font-black" style={{ color }}>{result.score}</span>
-              <span className="text-gray-500 text-sm">/100</span>
+              <span className="text-gray-500 text-xs">/100</span>
             </div>
           </div>
+          <div className="mt-3 bg-dark-light rounded-2xl px-4 py-3 inline-block">
+            <span className="text-lg">{getScoreLabel(result.score).emoji}</span>
+            <span className="font-bold text-lg ml-1" style={{ color }}>{getScoreLabel(result.score).label}</span>
+          </div>
+          {result.nutri_score && result.nutri_score !== 'unknown' && (
+            <div className="flex justify-center gap-3 mt-3">
+              <span className="text-xs bg-dark-light px-3 py-1 rounded-full">Nutri-Score: <b className="uppercase">{result.nutri_score}</b></span>
+              {result.nova_group && <span className="text-xs bg-dark-light px-3 py-1 rounded-full">NOVA: <b>{result.nova_group}</b></span>}
+            </div>
+          )}
         </div>
 
-        {/* Summary */}
+        {/* Why this score */}
         <div className="bg-dark-light rounded-2xl p-4 mb-4">
+          <h3 className="font-semibold text-sm mb-2" style={{ color }}>
+            {getScoreLabel(result.score).emoji} Por que é {getScoreLabel(result.score).label}?
+          </h3>
           <p className="text-gray-300 text-sm leading-relaxed">{result.summary}</p>
+          <p className="text-gray-500 text-xs mt-2 italic">{getScoreLabel(result.score).desc}</p>
         </div>
 
+        {/* Nutrition Table */}
+        {Object.keys(nutrition).length > 0 && (
+          <div className="bg-dark-light rounded-2xl p-4 mb-4">
+            <h3 className="font-semibold mb-3 text-sm">📊 Informações Nutricionais</h3>
+            {result.nutrition_verdict && (
+              <p className="text-gray-400 text-xs mb-3 italic">{result.nutrition_verdict}</p>
+            )}
+            {nutrition.calorias && getNutritionBar('Calorias', nutrition.calorias, guessLevel('calorias', nutrition.calorias))}
+            {nutrition.acucar && getNutritionBar('Açúcar', nutrition.acucar, guessLevel('acucar', nutrition.acucar))}
+            {nutrition.gordura_total && getNutritionBar('Gordura Total', nutrition.gordura_total, guessLevel('gordura_total', nutrition.gordura_total))}
+            {nutrition.gordura_saturada && getNutritionBar('Gordura Saturada', nutrition.gordura_saturada, guessLevel('gordura_saturada', nutrition.gordura_saturada))}
+            {nutrition.sodio && getNutritionBar('Sódio', nutrition.sodio, guessLevel('sodio', nutrition.sodio))}
+            {nutrition.carboidratos && getNutritionBar('Carboidratos', nutrition.carboidratos, guessLevel('carboidratos', nutrition.carboidratos))}
+            {nutrition.fibras && getNutritionBar('Fibras', nutrition.fibras, guessLevel('fibras', nutrition.fibras))}
+            {nutrition.proteinas && getNutritionBar('Proteínas', nutrition.proteinas, guessLevel('proteinas', nutrition.proteinas))}
+          </div>
+        )}
+
         {/* Positives & Negatives */}
-        {result.positives?.length > 0 && (
-          <div className="mb-4">
-            <h3 className="font-semibold text-green-400 mb-2">✅ Positivos</h3>
-            {result.positives.map((p: string, i: number) => (
-              <p key={i} className="text-gray-300 text-sm ml-4 mb-1">• {p}</p>
-            ))}
-          </div>
-        )}
-        {result.negatives?.length > 0 && (
-          <div className="mb-4">
-            <h3 className="font-semibold text-red-400 mb-2">❌ Negativos</h3>
-            {result.negatives.map((n: string, i: number) => (
-              <p key={i} className="text-gray-300 text-sm ml-4 mb-1">• {n}</p>
-            ))}
-          </div>
-        )}
+        <div className="grid grid-cols-2 gap-3 mb-4">
+          {result.positives?.length > 0 && (
+            <div className="bg-green-500/5 border border-green-500/20 rounded-xl p-3">
+              <h3 className="font-semibold text-green-400 text-xs mb-2">✅ Positivos</h3>
+              {result.positives.map((p: string, i: number) => (
+                <p key={i} className="text-gray-300 text-xs mb-1">• {p}</p>
+              ))}
+            </div>
+          )}
+          {result.negatives?.length > 0 && (
+            <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-3">
+              <h3 className="font-semibold text-red-400 text-xs mb-2">❌ Negativos</h3>
+              {result.negatives.map((n: string, i: number) => (
+                <p key={i} className="text-gray-300 text-xs mb-1">• {n}</p>
+              ))}
+            </div>
+          )}
+        </div>
 
         {/* Ingredients */}
         {result.ingredients?.length > 0 && (
-          <div className="mb-6">
-            <h3 className="font-semibold mb-3">📋 Ingredientes</h3>
+          <div className="mb-4">
+            <h3 className="font-semibold mb-3 text-sm">📋 Ingredientes</h3>
             <div className="space-y-2">
               {result.ingredients.map((ing: any, i: number) => (
                 <div key={i} className="bg-dark-light rounded-xl p-3">
                   <div className="flex items-center gap-2 mb-1">
                     <span>{getClassIcon(ing.classification)}</span>
-                    <span className={`font-medium text-sm ${getClassColor(ing.classification)}`}>
-                      {ing.name}{ing.popular_name && ing.popular_name !== ing.name ? ` (${ing.popular_name})` : ''}
+                    <span className={'font-medium text-sm ' + getClassColor(ing.classification)}>
+                      {ing.name}{ing.popular_name && ing.popular_name !== ing.name ? ' (' + ing.popular_name + ')' : ''}
                     </span>
                   </div>
                   <p className="text-gray-400 text-xs ml-6">{ing.explanation}</p>
@@ -151,11 +229,53 @@ export default function ScanPage() {
           </div>
         )}
 
-        {/* Share */}
+        {/* Recipe */}
+        {recipe && (
+          <div className="bg-gradient-to-br from-primary/10 to-accent/10 border border-primary/20 rounded-2xl p-4 mb-4">
+            <h3 className="font-semibold mb-2 text-sm">🍳 {result.score > 70 ? 'Receita com este produto' : 'Alternativa Saudável'}</h3>
+            <h4 className="text-primary font-bold mb-1">{recipe.title}</h4>
+            <p className="text-gray-400 text-xs mb-3">{recipe.description}</p>
+            <div className="flex gap-3 mb-3">
+              {recipe.prep_time && <span className="text-xs bg-dark/50 px-2 py-1 rounded-lg">⏱ {recipe.prep_time}</span>}
+              {recipe.calories && <span className="text-xs bg-dark/50 px-2 py-1 rounded-lg">🔥 {recipe.calories}</span>}
+            </div>
+            <div className="mb-3">
+              <p className="text-xs font-semibold text-gray-300 mb-1">Ingredientes:</p>
+              {recipe.ingredients_list?.map((ing: string, i: number) => (
+                <p key={i} className="text-gray-400 text-xs ml-2">• {ing}</p>
+              ))}
+            </div>
+            <div className="mb-3">
+              <p className="text-xs font-semibold text-gray-300 mb-1">Preparo:</p>
+              {recipe.steps?.map((step: string, i: number) => (
+                <p key={i} className="text-gray-400 text-xs ml-2 mb-1">{i + 1}. {step}</p>
+              ))}
+            </div>
+            {recipe.tip && (
+              <div className="bg-dark/30 rounded-lg p-2 mt-2">
+                <p className="text-primary text-xs">💡 {recipe.tip}</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Score Legend */}
+        <div className="bg-dark-light rounded-2xl p-4 mb-4">
+          <h3 className="font-semibold mb-3 text-sm">📏 O que significa o Score?</h3>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2"><span className="w-8 text-center">🌟</span><div className="flex-1"><div className="flex justify-between"><span className="text-green-400 text-xs font-bold">90-100 Excelente</span></div><div className="h-1 bg-green-500 rounded-full mt-0.5" style={{width:'100%'}} /></div></div>
+            <div className="flex items-center gap-2"><span className="w-8 text-center">✅</span><div className="flex-1"><div className="flex justify-between"><span className="text-green-300 text-xs font-bold">70-89 Bom</span></div><div className="h-1 bg-green-400 rounded-full mt-0.5" style={{width:'80%'}} /></div></div>
+            <div className="flex items-center gap-2"><span className="w-8 text-center">⚠️</span><div className="flex-1"><div className="flex justify-between"><span className="text-yellow-400 text-xs font-bold">50-69 Regular</span></div><div className="h-1 bg-yellow-500 rounded-full mt-0.5" style={{width:'60%'}} /></div></div>
+            <div className="flex items-center gap-2"><span className="w-8 text-center">🔶</span><div className="flex-1"><div className="flex justify-between"><span className="text-orange-400 text-xs font-bold">30-49 Ruim</span></div><div className="h-1 bg-orange-500 rounded-full mt-0.5" style={{width:'40%'}} /></div></div>
+            <div className="flex items-center gap-2"><span className="w-8 text-center">🚫</span><div className="flex-1"><div className="flex justify-between"><span className="text-red-400 text-xs font-bold">0-29 Péssimo</span></div><div className="h-1 bg-red-500 rounded-full mt-0.5" style={{width:'20%'}} /></div></div>
+          </div>
+        </div>
+
+        {/* Actions */}
         <div className="flex gap-3">
           <button onClick={() => {
             if (navigator.share) {
-              navigator.share({ title: `Aletheia: ${result.product_name}`, text: `Score: ${result.score}/100 - ${result.summary}`, url: window.location.href });
+              navigator.share({ title: 'Aletheia: ' + result.product_name, text: 'Score: ' + result.score + '/100 - ' + result.summary, url: window.location.href });
             }
           }} className="flex-1 bg-primary text-dark font-bold py-3 rounded-xl">
             📤 Compartilhar
@@ -191,6 +311,7 @@ export default function ScanPage() {
         <div className="text-center py-20">
           <div className="animate-spin text-4xl mb-4">👁️</div>
           <p className="text-gray-400">Analisando produto...</p>
+          <p className="text-gray-600 text-xs mt-2">Nossa IA está analisando cada ingrediente</p>
         </div>
       )}
 
@@ -220,7 +341,8 @@ export default function ScanPage() {
 
           <div className="flex gap-2">
             <input type="text" placeholder="Ex: 7891000100103" value={manualCode} onChange={e => setManualCode(e.target.value)}
-              className="flex-1 bg-dark-light rounded-xl px-4 py-3 text-white placeholder-gray-500 outline-none focus:ring-2 focus:ring-primary" />
+              className="flex-1 bg-dark-light rounded-xl px-4 py-3 text-white placeholder-gray-500 outline-none focus:ring-2 focus:ring-primary"
+              onKeyDown={e => e.key === 'Enter' && manualCode && handleScan(manualCode)} />
             <button onClick={() => manualCode && handleScan(manualCode)} disabled={!manualCode}
               className="bg-primary text-dark px-6 py-3 rounded-xl font-bold disabled:opacity-50">
               Buscar
@@ -232,11 +354,11 @@ export default function ScanPage() {
             <p className="text-gray-500 text-sm mb-3">🧪 Teste com produtos demo:</p>
             <div className="flex flex-wrap gap-2">
               {[
-                { name: 'Coca-Cola', code: '7891000100103' },
-                { name: 'Nescau', code: '7891000053508' },
-                { name: 'Miojo', code: '7891000305232' },
-                { name: 'Aveia', code: '7891000362006' },
-                { name: 'Oreo', code: '7622300830236' },
+                { name: 'Coca-Cola', code: '7894900011517' },
+                { name: 'Nescau', code: '7891000379691' },
+                { name: 'Miojo', code: '7891079000212' },
+                { name: 'Aveia', code: '7894321219820' },
+                { name: 'Oreo', code: '7622300830151' },
               ].map(p => (
                 <button key={p.code} onClick={() => handleScan(p.code)}
                   className="bg-dark-light text-gray-300 px-3 py-1.5 rounded-lg text-xs hover:bg-gray-600 transition">

frontend/src/lib/api.ts

@@ -1,4 +1,4 @@
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8090';
+const API_URL = '';
 
 async function request(path: string, options: RequestInit = {}) {
   const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
@@ -24,5 +24,6 @@ export const api = {
   me: () => request('/api/auth/me'),
   scan: (barcode: string) =>
     request('/api/scan', { method: 'POST', body: JSON.stringify({ barcode }) }),
-  history: () => request('/api/history'),
+  history: () => request("/api/history"),
+  scanDetail: (id: number) => request(`/api/history/${id}`),
 };