with thumbnail!

src/routes/share/+page.svelte

@@ -4,6 +4,7 @@
     let status = $state('idle');
     let logs = $state<string[]>([]);
     let recipe = $state<any>(null);
+    let bodyText = $state<string>('');
     let tandoorEnabled = $state(false);
     let tandoorImporting = $state(false);
     let tandoorError = $state<string | null>(null);
@@ -51,10 +52,12 @@
             
             if (data.recipe) {
                 recipe = data.recipe;
+                bodyText = data.bodyText || '';
                 status = 'done';
                 logs = [...logs, 'Recipe extraction successful'];
             } else {
-                logs = [...logs, 'Error: ' + JSON.stringify(data)];
+                bodyText = data.bodyText || '';
+                logs = [...logs, 'Error: ' + (data.error || JSON.stringify(data))];
                 status = 'error';
             }
         } catch(e) {
@@ -63,6 +66,14 @@
         }
     }
 
+    async function retry() {
+        recipe = null;
+        bodyText = '';
+        status = 'idle';
+        logs = [...logs, 'Retrying extraction...'];
+        await process();
+    }
+
     async function importToTandoor() {
         if (!recipe) return;
         
@@ -116,11 +127,21 @@
         <div class="animate-pulse text-blue-600">Extracting data...</div>
     {/if}
 
+    {#if bodyText}
+        <details class="border rounded p-2 bg-white text-sm">
+            <summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
+            <div class="mt-2 pt-2 border-t whitespace-pre-wrap break-word max-h-48 overflow-y-auto text-xs">
+                {bodyText}
+            </div>
+        </details>
+    {/if}
     {#if recipe}
         <div class="border rounded p-4 bg-green-50 space-y-2">
             <h2 class="font-bold text-xl">{recipe.name}</h2>
             <p class="text-sm">{recipe.description}</p>
             <p class="text-muted"><strong>Servings:</strong> {recipe.servings}</p>
+
+
             <h3 class="font-bold mt-2">Ingredients</h3>
             <ul class="list-disc pl-5 text-sm">
                 {#each recipe.ingredients as ing}
@@ -151,6 +172,31 @@
                     </button>
                 </div>
             {/if}
+
+            <button 
+                onclick={retry}
+                class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 w-full mt-2"
+            >
+                🔄 Retry Extraction
+            </button>
+        </div>
+    {/if}
+
+    {#if status === 'error' && bodyText}
+        <div class="border rounded p-4 bg-yellow-50 space-y-2">
+            <h3 class="font-bold text-lg">Extraction Error - Raw Text Available</h3>
+            <details class="border rounded p-2 bg-white text-sm">
+                <summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
+                <div class="mt-2 pt-2 border-t whitespace-pre-wrap break-word max-h-48 overflow-y-auto text-xs">
+                    {bodyText}
+                </div>
+            </details>
+            <button 
+                onclick={retry}
+                class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 w-full mt-2"
+            >
+                🔄 Retry Extraction
+            </button>
         </div>
     {/if}