feat: refactor frontend and fix LLM extraction

- Fix critical await bug in extract-stream endpoint
- Add comprehensive logging to LLM and parser modules
- Implement fallback to standard completion for incompatible models
- Create enhanced v2.0 prompts with social media handling and few-shot examples
- Add LLM health check endpoint
- Decompose share page into 6 focused Svelte 5 snippets

Resolves LM Studio integration issues and improves code maintainability

src/routes/api/extract-stream/+server.ts

@@ -40,7 +40,7 @@ export const POST: RequestHandler = async ({ request }) => {
 					timestamp: new Date().toISOString()
 				});
 
-				const recipe = extractRecipe(extracted.bodyText);
+				const recipe = await extractRecipe(extracted.bodyText);
 
 				// Send final result
 				const completeEvent: ProgressEvent = {

src/routes/api/llm-health/+server.ts

@@ -0,0 +1,30 @@
+import { json } from '@sveltejs/kit';
+import { checkLLMHealth } from '$lib/server/llm';
+
+/**
+ * Health check endpoint for LLM service
+ * Tests connectivity to LM Studio or OpenAI-compatible endpoint
+ */
+export async function GET() {
+	try {
+		const isHealthy = await checkLLMHealth();
+
+		if (isHealthy) {
+			return json({ 
+				status: 'healthy', 
+				message: 'LLM service is accessible' 
+			});
+		} else {
+			return json({ 
+				status: 'unhealthy', 
+				message: 'LLM service is not accessible' 
+			}, { status: 503 });
+		}
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+		return json({ 
+			status: 'error', 
+			message: errorMessage 
+		}, { status: 500 });
+	}
+}

src/routes/share/+page.svelte

@@ -159,9 +159,7 @@
     }
 </script>
 
-<div class="p-8 max-w-lg mx-auto space-y-4">
-    <h1 class="text-2xl font-bold">InstaChef PWA</h1>
-    
+{#snippet urlInputSection()}
     {#if targetUrl}
         <div class="bg-gray-100 p-2 rounded break-all text-sm border">{targetUrl}</div>
         
@@ -174,11 +172,15 @@
         <p class="text-gray-500">No URL detected. Open this app via Instagram Share Menu.</p>
         <div class="text-xs text-gray-400">Debug: Text={sharedText} URL={sharedUrl}</div>
     {/if}
+{/snippet}
 
+{#snippet progressIndicator()}
     {#if status === 'extracting'}
         <div class="animate-pulse text-blue-600">Extracting data...</div>
     {/if}
+{/snippet}
 
+{#snippet extractedTextViewer()}
     {#if bodyText}
         <details class="border rounded p-2 bg-white text-sm">
             <summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
@@ -187,19 +189,22 @@
             </div>
         </details>
     {/if}
+{/snippet}
+
+{#snippet recipeCard()}
     {#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}
                     <li>{ing.amount} {ing.unit} {ing.item}</li>
                 {/each}
             </ul>
+            
             <h3 class="font-bold mt-2">Steps</h3>
             <ol class="list-decimal pl-5 text-sm">
                 {#each recipe.steps as step}
@@ -233,7 +238,9 @@
             </button>
         </div>
     {/if}
+{/snippet}
 
+{#snippet errorState()}
     {#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>
@@ -251,7 +258,9 @@
             </button>
         </div>
     {/if}
+{/snippet}
 
+{#snippet logViewer()}
     <div class="bg-slate-900 text-slate-100 p-4 rounded-lg shadow-lg min-h-[120px] max-h-[400px] overflow-y-auto">
         <div class="flex items-center justify-between mb-3 pb-2 border-b border-slate-700">
             <div class="text-sm font-semibold opacity-70">System Logs</div>
@@ -283,4 +292,15 @@
             {/if}
         </div>
     </div>
+{/snippet}
+
+<div class="p-8 max-w-lg mx-auto space-y-4">
+    <h1 class="text-2xl font-bold">InstaChef PWA</h1>
+    
+    {@render urlInputSection()}
+    {@render progressIndicator()}
+    {@render extractedTextViewer()}
+    {@render recipeCard()}
+    {@render errorState()}
+    {@render logViewer()}
 </div>