feat(frontend): show parsed recipe preview on URL import

TODO.md

@@ -32,7 +32,7 @@ MVP is functionally complete (core app + docs + tests).
 
 ### Phase 2: Import UI
 - [x] Add “Import from URL” UI page/form in frontend
-- [ ] Show parsed preview (title, ingredients, steps, source URL)
+- [x] Show parsed preview (title, ingredients, steps, source URL)
 - [ ] Allow edit-before-save flow, then save to existing create recipe API
 - [ ] Add frontend error states (invalid URL, parse failure, timeout)
 

frontend/src/pages/ImportUrlPage.tsx

@@ -67,10 +67,42 @@ export function ImportUrlPage() {
       )}
 
       {result && (
-        <div className="mt-4 bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="mt-4 bg-white border border-gray-200 rounded-lg p-6 space-y-4">
-          <h3 className="font-semibold text-green-900 mb-1">Import fetched successfully</h3>
+          <div>
-          <p className="text-green-800 text-sm">Source: {result.source_url}</p>
+            <h3 className="font-semibold text-gray-900">Parsed Preview</h3>
-          <p className="text-green-800 text-sm">JSON-LD blocks found: {result.json_ld_blocks.length}</p>
+            <p className="text-sm text-gray-600">Source: {result.source_url}</p>
+            <p className="text-sm text-gray-600">JSON-LD blocks found: {result.json_ld_blocks.length}</p>
+          </div>
+
+          {result.draft_recipe ? (
+            <>
+              <div>
+                <h4 className="text-lg font-semibold text-gray-900">{result.draft_recipe.title}</h4>
+              </div>
+
+              <div>
+                <h5 className="text-sm font-semibold uppercase tracking-wide text-gray-700 mb-2">Ingredients</h5>
+                <ul className="list-disc list-inside space-y-1 text-gray-800">
+                  {result.draft_recipe.ingredients.map((ingredient, index) => (
+                    <li key={`${ingredient}-${index}`}>{ingredient}</li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <h5 className="text-sm font-semibold uppercase tracking-wide text-gray-700 mb-2">Steps</h5>
+                <ol className="list-decimal list-inside space-y-1 text-gray-800">
+                  {result.draft_recipe.instructions.map((instruction, index) => (
+                    <li key={`${instruction}-${index}`}>{instruction}</li>
+                  ))}
+                </ol>
+              </div>
+            </>
+          ) : (
+            <p className="text-amber-700 bg-amber-50 border border-amber-200 rounded p-3 text-sm">
+              Could not parse a recipe preview from this URL.
+            </p>
+          )}
         </div>
       )}
     </div>