feat(share): refactor page and enhance thumbnail extraction

- Extract 8 reusable components from monolithic share page
- Add LLM health indicator with 30s polling
- Implement stealth thumbnail extraction with 4-method cascade
- Integrate real-time thumbnail preview component
- Reduce share page from 306 to ~140 lines
- Add comprehensive outcome documentation

Components:
- UrlInputSection: URL input and extraction trigger
- ProgressIndicator: Loading state display
- ExtractedTextViewer: Collapsible text preview
- RecipeCard: Recipe display with Tandoor integration
- ErrorState: Error handling UI
- LogViewer: System logs with color coding
- LlmHealthIndicator: LLM status with polling
- ThumbnailPreview: Real-time thumbnail display

Thumbnail Methods:
1. Meta tag extraction (og:image, twitter:image)
2. Video poster attribute
3. Instagram embedded JSON data
4. Screenshot fallback

Stories Completed:
- Story 1: Component extraction and refactoring
- Story 2: LLM health status indicator
- Story 3: Enhanced stealth thumbnail extraction
- Story 4: Thumbnail preview integration

Closes: RefactorSharePageAndEnhanceThumbnails

src/routes/share/components/ErrorState.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	let { status = 'idle', bodyText = '', onRetry } = $props<{
+		status: string;
+		bodyText: string;
+		onRetry: () => void;
+	}>();
+</script>
+
+{#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={onRetry}
+			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}

src/routes/share/components/ExtractedTextViewer.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	let { bodyText = '' } = $props<{
+		bodyText: string;
+	}>();
+</script>
+
+{#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}

src/routes/share/components/LlmHealthIndicator.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	interface HealthState {
+		status: 'checking' | 'healthy' | 'unhealthy' | 'error';
+		message: string;
+		lastChecked: Date | null;
+	}
+
+	let { pollInterval = 30000 } = $props<{
+		pollInterval?: number;
+	}>();
+
+	let health = $state<HealthState>({
+		status: 'checking',
+		message: '',
+		lastChecked: null
+	});
+
+	async function checkHealth() {
+		try {
+			const res = await fetch('/api/llm-health');
+			const data = await res.json();
+			health = {
+				status: data.status === 'healthy' ? 'healthy' : 'unhealthy',
+				message: data.message,
+				lastChecked: new Date()
+			};
+		} catch (e) {
+			health = {
+				status: 'error',
+				message: e instanceof Error ? e.message : 'Network error',
+				lastChecked: new Date()
+			};
+		}
+	}
+
+	$effect(() => {
+		checkHealth(); // Initial check
+		const interval = setInterval(checkHealth, pollInterval);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="flex items-center gap-2 text-sm">
+	<div class="flex items-center gap-1">
+		{#if health.status === 'checking'}
+			🟡 <span>Checking LLM...</span>
+		{:else if health.status === 'healthy'}
+			🟢 <span class="text-green-600">LLM Ready</span>
+		{:else if health.status === 'unhealthy'}
+			🔴 <span class="text-red-600">LLM Unavailable</span>
+		{:else}
+			🔴 <span class="text-red-600">LLM Error</span>
+		{/if}
+	</div>
+	<div class="text-xs text-gray-500" title={health.message}>
+		{health.lastChecked ? `Last: ${health.lastChecked.toLocaleTimeString()}` : ''}
+	</div>
+</div>

src/routes/share/components/LogViewer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	let { logs = [], currentMethod = '', status = 'idle' } = $props<{
+		logs: string[];
+		currentMethod: string;
+		status: string;
+	}>();
+</script>
+
+<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>
+		{#if currentMethod}
+			<div class="text-xs bg-blue-600 px-2 py-1 rounded flex items-center gap-1">
+				<span class="animate-pulse">⚡</span>
+				<span>Current: {currentMethod}</span>
+			</div>
+		{/if}
+	</div>
+	<div class="space-y-1 font-mono text-xs">
+		{#each logs as log}
+			<div
+				class="flex items-start gap-2 py-1 {log.includes('✅')
+					? 'text-green-400'
+					: log.includes('❌')
+						? 'text-red-400'
+						: log.includes('🔄')
+							? 'text-yellow-400'
+							: log.includes('📦') ||
+									log.includes('🎯') ||
+									log.includes('🔌') ||
+									log.includes('📄')
+								? 'text-blue-300'
+								: 'text-slate-300'}"
+			>
+				<span class="opacity-50">&gt;</span>
+				<span class="flex-1">{log}</span>
+			</div>
+		{/each}
+		{#if status === 'extracting'}
+			<div class="flex items-center gap-2 py-1 text-blue-400 animate-pulse">
+				<span class="opacity-50">&gt;</span>
+				<span>Processing...</span>
+			</div>
+		{/if}
+	</div>
+</div>

src/routes/share/components/ProgressIndicator.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { status = 'idle' } = $props<{
+		status: string;
+	}>();
+</script>
+
+{#if status === 'extracting'}
+	<div class="animate-pulse text-blue-600">Extracting data...</div>
+{/if}

src/routes/share/components/RecipeCard.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	interface Recipe {
+		name: string;
+		description: string;
+		servings: number;
+		ingredients: Array<{ amount: string; unit: string; item: string }>;
+		steps: string[];
+	}
+
+	let {
+		recipe = null,
+		tandoorEnabled = false,
+		tandoorImporting = false,
+		tandoorError = null,
+		onRetry,
+		onImportToTandoor
+	} = $props<{
+		recipe: Recipe | null;
+		tandoorEnabled: boolean;
+		tandoorImporting: boolean;
+		tandoorError: string | null;
+		onRetry: () => void;
+		onImportToTandoor: () => void;
+	}>();
+</script>
+
+{#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}
+				<li>{step}</li>
+			{/each}
+		</ol>
+
+		{#if tandoorEnabled}
+			<div class="mt-4 pt-4 border-t space-y-2">
+				<h3 class="font-bold">Tandoor Integration</h3>
+				{#if tandoorError}
+					<div class="bg-red-100 text-red-800 p-2 rounded text-sm">
+						Error: {tandoorError}
+					</div>
+				{/if}
+				<button
+					onclick={onImportToTandoor}
+					disabled={tandoorImporting}
+					class="bg-orange-600 text-white px-4 py-2 rounded shadow hover:bg-orange-700 w-full disabled:bg-gray-400 disabled:cursor-not-allowed"
+				>
+					{tandoorImporting ? 'Importing...' : 'Import to Tandoor'}
+				</button>
+			</div>
+		{/if}
+
+		<button
+			onclick={onRetry}
+			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}

src/routes/share/components/ThumbnailPreview.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let { thumbnail = null, status = 'idle' } = $props<{
+		thumbnail: string | null;
+		status: 'idle' | 'extracting' | 'success' | 'error';
+	}>();
+</script>
+
+{#if status === 'extracting'}
+	<div class="border rounded-lg p-4 bg-gray-50">
+		<div class="flex items-center gap-3 mb-2">
+			<div class="animate-spin text-blue-600">🎨</div>
+			<span class="text-sm font-medium text-gray-700">Extracting thumbnail...</span>
+		</div>
+		<!-- Loading skeleton -->
+		<div class="w-full aspect-square bg-gray-200 animate-pulse rounded"></div>
+	</div>
+{:else if status === 'success' && thumbnail}
+	<div class="border rounded-lg p-4 bg-white shadow-sm">
+		<div class="flex items-center gap-2 mb-2">
+			<span class="text-green-600">✓</span>
+			<span class="text-sm font-medium text-gray-700">Thumbnail extracted</span>
+		</div>
+		<img src={thumbnail} alt="Post thumbnail" class="w-full aspect-square object-cover rounded" />
+	</div>
+{:else if status === 'error'}
+	<div class="border border-red-200 rounded-lg p-4 bg-red-50">
+		<div class="flex items-center gap-2">
+			<span class="text-red-600">✗</span>
+			<span class="text-sm font-medium text-red-700">Thumbnail extraction failed</span>
+		</div>
+	</div>
+{/if}

src/routes/share/components/UrlInputSection.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	let { targetUrl = null, sharedText = '', sharedUrl = '', status = 'idle', onProcess } = $props<{
+		targetUrl: string | null;
+		sharedText: string;
+		sharedUrl: string;
+		status: string;
+		onProcess: () => void;
+	}>();
+</script>
+
+{#if targetUrl}
+	<div class="bg-gray-100 p-2 rounded break-all text-sm border">{targetUrl}</div>
+
+	{#if status === 'idle'}
+		<button
+			onclick={onProcess}
+			class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 w-full"
+		>
+			Extract Recipe
+		</button>
+	{/if}
+{:else}
+	<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}