README.md

@@ -35,15 +35,6 @@ A modern, self-hosted alternative to services like CopyMeThat. Store, organize,
 
 ---
 
-### Backend Orchestrator (Phase Execution Utility)
-
-A sequential orchestrator utility is available for robust, checkpointed phase execution with per-phase retries. Useful for automation harnesses or recipe import flows needing durable, restart-safe progress tracking.
-
-- Location: `src/backend/services/SequentialOrchestrator.ts`
-- Usage/docs: [`docs/orchestrator.md`](docs/orchestrator.md)
-
----
-
 ## Quick Start
 
 ### Prerequisites

docs/morning-report.md

@@ -1,53 +0,0 @@
-# Morning Report Utility
-
-Produces a concise consolidated workflow report for relay or status dashboards.
-
-## Usage
-
-```sh
-npx ts-node scripts/morning-report.ts [--window <hours>] [--threshold <minutes>]
-```
-
-- `--window <hours>`: How many hours back to look for recent commits (default: 24)
-- `--threshold <minutes>`: Minutes without progress to consider workflow stalled (default: 60)
-
-### Output
-- Markdown/text summary with:
-  - Recent commits (hash, message, datetime)
-  - Current workflow status (phase, overall, last updated)
-  - Any detected blockers (from status file)
-  - Pending phase updates not yet relayed
-  - **Stalled** indicator if workflow progress is stale + recommended next steps
-
-## Example Output
-
-```
-# 🌅 Morning Workflow Report
-
-## Recent Commits (last 24h)
-- `abc123` Add orchestrator status tests _(at 2026-03-25T23:05:00.000Z)_
-
-## Workflow Status
-- Current phase: **parse**
-- State: **running**
-- Last updated: 2026-03-26T04:12:00.000Z
-- Completed phases: fetch, parse
-
-## ⚠️ Workflow Stalled
-- Reason: No progress in 120 minutes (threshold: 60m). Last update: 2026-03-26T04:12:00.000Z
-- Recommendation: Restart or debug orchestrator.
-
-## Blockers
-- ❗ Blocked: Recipe site returned 500 error
-
-## Pending Phase Updates
-- [phase_started] Phase parse started (phase: parse) at 2026-03-26T04:12:00.000Z [id: ab1234]
-```
-
-
-## Tests
-
-Run all related tests:
-```
-npx jest scripts/__tests__/morning-report.test.ts
-```

docs/orchestrator.md

@@ -1,44 +0,0 @@
-# Orchestrator Usage
-
-This service provides robust phase-based sequencing with automatic checkpointing and per-phase retry policy. 
-
-## Usage (Programmatic)
-
-```
-ts
-import { SequentialOrchestrator } from './src/backend/services/SequentialOrchestrator';
-
-const orchestrator = new SequentialOrchestrator({
-  phases: [
-    { name: 'one', run: async () => { /* logic */ }, retry: 2, backoffMs: 250 },
-    { name: 'two', run: async () => { /* logic */ }},
-    // ...more phases
-  ],
-  checkpointPath: 'data/orchestrator-checkpoint.json', // optional, default as shown
-  input: {...}, // input passed to each phase
-});
-
-await orchestrator.run(); // Runs/resumes from last incomplete phase, checkpointing after each attempt
-```
-
-## Features
-- **Sequential phases**: Executes provided phases in-order.
-- **Per-phase retry & backoff**: Configure max attempts and delay for each phase.
-- **Checkpointing**: Persists after every attempt (success/failure/attempt #, timestamp, error message if fail).
-- **Restart-safe**: Can safely resume after crash/restart, picks up at last incomplete phase.
-- **Minimal callable interface**: Import and use from your own services or app code.
-
-## Checkpoint Schema
-See `src/backend/services/SequentialOrchestrator.ts` for full type:
-- `currentPhase`: index of next phase to execute
-- `phaseResults[]`: history of all attempts on every phase
-- `inProgress`: true if incomplete (failed phase, retries exhausted)
-
-## Testing
-Run:
-
-```
-npm test
-```
-
-See source: `src/backend/tests/orchestrator.test.ts` for coverage: execution order, retry, checkpoint, resume.

docs/recipe-manager-mvp-plan.md

@@ -1,198 +0,0 @@
-# Recipe Manager — MVP Execution Plan
-
-**Date:** 2026-03-25  
-**Owner:** Paul + Cleo  
-**Goal:** Ship a tight, usable MVP with clear scope and a fast implementation path.
-
----
-
-## 1) MVP Scope (Step 1 — locked)
-
-### In Scope (MVP)
-1. **Recipe CRUD**
-   - Create recipe
-   - Read/list recipes
-   - View single recipe detail
-   - Edit recipe
-   - Delete recipe
-2. **Tags**
-   - Create/delete tags
-   - Attach/remove tags on recipes
-   - Filter list by tag
-3. **Ingredients + Steps**
-   - Ingredient list per recipe (qty/unit/item)
-   - Ordered instruction steps
-4. **Search**
-   - Search by title
-   - Search by ingredient text
-   - Search by tag
-5. **Backup portability**
-   - JSON export
-   - JSON import (merge strategy: skip duplicates by title+sourceUrl)
-
-### Out of Scope (Post-MVP)
-- AI substitutions
-- Meal planner UX (calendar)
-- Shopping list automation
-- Nutrition calculations
-- OCR/image import
-- Multi-user auth/roles
-
-### Definition of Done (MVP)
-- User can create/edit/delete recipes with ingredients + steps
-- User can tag and filter recipes
-- User can search quickly by title/tag/ingredient
-- User can export and import data JSON without data loss for core fields
-- API + UI docs updated
-- Docker compose run path works end-to-end
-
----
-
-## 2) Architecture (existing stack + MVP alignment)
-
-- **Backend:** Node/TypeScript REST API (SQLite)
-- **Frontend:** React/TypeScript (Vite)
-- **Storage:** SQLite file (`data/recipes.db`)
-- **Deployment:** Docker + docker-compose
-
-MVP will reuse existing architecture and avoid stack churn.
-
----
-
-## 3) Data Model (Step 2 target)
-
-### Tables
-- `recipes`
-  - `id` (PK)
-  - `title` (TEXT, required)
-  - `description` (TEXT)
-  - `servings` (INTEGER)
-  - `prep_time_minutes` (INTEGER)
-  - `cook_time_minutes` (INTEGER)
-  - `source_url` (TEXT)
-  - `created_at`, `updated_at`
-
-- `ingredients`
-  - `id` (PK)
-  - `recipe_id` (FK -> recipes.id)
-  - `position` (INTEGER)
-  - `quantity` (TEXT)
-  - `unit` (TEXT)
-  - `item` (TEXT, required)
-  - `notes` (TEXT)
-
-- `steps`
-  - `id` (PK)
-  - `recipe_id` (FK -> recipes.id)
-  - `position` (INTEGER)
-  - `instruction` (TEXT, required)
-
-- `tags`
-  - `id` (PK)
-  - `name` (TEXT UNIQUE, required)
-
-- `recipe_tags`
-  - `recipe_id` (FK -> recipes.id)
-  - `tag_id` (FK -> tags.id)
-  - composite PK (`recipe_id`, `tag_id`)
-
-### Suggested indexes
-- `idx_recipes_title` on `recipes(title)`
-- `idx_ingredients_item` on `ingredients(item)`
-- `idx_recipe_tags_tag_id` on `recipe_tags(tag_id)`
-
----
-
-## 4) API Surface (MVP)
-
-### Recipes
-- `GET /api/recipes?query=&tag=`
-- `GET /api/recipes/:id`
-- `POST /api/recipes`
-- `PUT /api/recipes/:id`
-- `DELETE /api/recipes/:id`
-
-### Tags
-- `GET /api/tags`
-- `POST /api/tags`
-- `DELETE /api/tags/:id`
-
-### Backup
-- `GET /api/export/json`
-- `POST /api/import/json`
-
----
-
-## 5) Frontend Surface (MVP)
-
-- `RecipeListPage`
-  - search box
-  - tag filter
-  - recipe cards/list
-- `RecipeDetailPage`
-  - metadata + ingredients + steps
-- `RecipeFormPage`
-  - create/edit form with dynamic ingredient + step rows
-- `TagManager`
-  - add/remove tags
-- `ImportExportPanel`
-  - export button
-  - import file upload + summary
-
----
-
-## 6) File-by-File Build Board
-
-### Backend
-1. DB schema/migrations (recipes, ingredients, steps, tags, recipe_tags)
-2. Recipe repository/services with nested ingredient/step handling
-3. Search query enhancements (title/ingredient/tag)
-4. Tag endpoints + recipe-tag mapping logic
-5. JSON export endpoint
-6. JSON import endpoint + dedupe policy
-7. API tests for CRUD + search + import/export
-
-### Frontend
-1. Recipe form supports ordered ingredients/steps
-2. List page unified search + tag filter
-3. Detail page renders normalized sections
-4. Tag management wiring
-5. Import/export UI panel
-6. UI tests for key flows
-
-### Docs
-1. `docs/api.md` update
-2. `docs/user-guide.md` update
-3. README MVP usage + backup section
-
----
-
-## 7) 6-Day Execution Plan
-
-- **Day 1:** Scope freeze + schema lock + migration prep
-- **Day 2:** CRUD hardening (nested ingredients/steps correctness)
-- **Day 3:** Search + tag filter backend/frontend alignment
-- **Day 4:** Import/export JSON endpoints + UI integration
-- **Day 5:** Test pass, seed data, bug fixes
-- **Day 6:** Docs + Docker validation + release tag
-
----
-
-## 8) Immediate Next Actions (Starting now)
-
-1. ✅ **Step 1 complete:** MVP scope locked in this document.
-2. Next: verify existing TODO/roadmap lines up with locked scope.
-3. Then start Step 2 (data model lock) by checking current schema vs target model and creating the migration delta list.
-
----
-
-## 9) Risks / Decisions to keep an eye on
-
-- Duplicate logic for import merge rules (title collisions)
-- Tag naming normalization (case-insensitive unique)
-- Ingredient parsing consistency for search quality
-- Backward compatibility with existing recipe records
-
----
-
-If scope changes are requested, update this file first and treat it as the source of truth for implementation sequencing.

docs/schema-migration-delta-log.md

@@ -1,25 +0,0 @@
-# Schema Migration Delta Log — 2026-03-25
-
-Date: 2026-03-25
-
-## Delta Summary
-
-- Normalized `recipes` table: removed JSON columns for ingredients and instructions
-- Added `ingredients` table (with position/order, FK to recipe)
-- Added `steps` table (with position/order, FK to recipe)
-- Removed `notes` and `last_cooked_at` columns from recipes
-- Changed timestamp columns to DATETIME for better SQLite compatibility
-- Removed color from tags table
-- Added index on `ingredients(item)`
-- Confirmed/completed indexes per spec
-
-See [../migrations/2026-03-25-schema-migration.md](../migrations/2026-03-25-schema-migration.md) for the detailed migration plan and SQL changes.
-
----
-
-## Action Items
-- [ ] Implement migration logic (split JSON columns)
-- [ ] Update `src/backend/db/schema.sql` with normalized tables
-- [ ] Write data migration script for live DBs (extract and insert ingredient/step records)
-- [ ] Run DB migration
-- [ ] Update test cases and data fixtures

frontend/src/App.tsx

@@ -8,7 +8,6 @@ import { ErrorBoundary } from './components/ErrorBoundary';
 import { ToastContainer } from './components/Toast';
 import { useToast } from './hooks/useToast';
 import { createContext, useContext } from 'react';
-import { colors, radius } from './theme';
 
 // Create toast context to share toast functionality across the app
 interface ToastContextType {
@@ -31,35 +30,36 @@ export function useToastContext() {
 function App() {
   const location = useLocation();
   const toast = useToast();
-
+  
   const isActive = (path: string) => {
     if (path === '/' && location.pathname === '/') return true;
     if (path !== '/' && location.pathname.startsWith(path)) return true;
     return false;
   };
-
+  
   const linkClass = (path: string) => {
-    const base = `px-4 py-2 rounded-full text-sm font-semibold transition-colors shadow-sm`;
+    const base = "px-3 py-2 rounded-md text-sm font-medium transition-colors";
     return isActive(path)
       ? `${base} bg-blue-100 text-blue-700`
       : `${base} text-gray-700 hover:bg-gray-100`;
   };
-
+  
   return (
     <ErrorBoundary>
       <ToastContext.Provider value={toast}>
         <div className="min-h-screen bg-gray-50">
           <ToastContainer messages={toast.messages} onClose={toast.removeToast} />
-
+          
-          <header className="bg-white shadow-sm border-b border-gray-100 ">
+          <header className="bg-white shadow">
             <div className="max-w-7xl mx-auto px-4">
               <div className="flex items-center justify-between h-16">
                 <div className="flex items-center">
                   <Link to="/" className="flex-shrink-0">
-                    <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Recipe Manager</h1>
+                    <h1 className="text-2xl font-bold text-gray-900">Recipe Manager</h1>
                   </Link>
                 </div>
-                <nav className="flex space-x-3">
+                
+                <nav className="flex space-x-4">
                   <Link to="/" className={linkClass('/')}>
                     Recipes
                   </Link>
@@ -73,8 +73,8 @@ function App() {
               </div>
             </div>
           </header>
-
+          
-          <main className="max-w-7xl mx-auto py-8 px-4 min-h-[70vh]">
+          <main className="max-w-7xl mx-auto py-6 px-4">
             <Routes>
               <Route path="/" element={<RecipeListPage />} />
               <Route path="/recipe/new" element={<RecipeDetailPage />} />
@@ -84,8 +84,8 @@ function App() {
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </main>
-
+          
-          <footer className="bg-white border-t border-gray-100 mt-12">
+          <footer className="bg-white border-t mt-12">
             <div className="max-w-7xl mx-auto py-6 px-4">
               <p className="text-center text-sm text-gray-500">
                 Recipe Manager MVP - Built with React + Vite + TypeScript

frontend/src/components/MissionControlPanel.tsx

@@ -1,35 +1,113 @@
+import { useEffect, useState } from 'react';
+import { fetchHarnessStatus } from '../services/api';
 import type { HarnessStatus } from '../types/recipe';
 
-function getRecentCommit(status: HarnessStatus) {
+function getStatusPillClass(status: string | undefined): string {
-  return status.commit?.relative || status.commit?.hash || '';
+  switch (status) {
+    case 'HEALTHY':
+      return 'bg-green-100 text-green-800 border-green-200';
+    case 'IDLE':
+      return 'bg-gray-100 text-gray-700 border-gray-200';
+    case 'STALE':
+    case 'MISSING':
+      return 'bg-red-100 text-red-800 border-red-200';
+    default:
+      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+  }
 }
 
-export function MissionControlPanel({ status }: { status: HarnessStatus }) {
+export function MissionControlPanel() {
-  // Defensive for possibly undefined fields
+  const [status, setStatus] = useState<HarnessStatus | null>(null);
-  const keepalive = status.keepalive || {};
+  const [loading, setLoading] = useState(true);
-  const todo = status.todo || { checked: 0, unchecked: 0, nextTask: undefined };
+  const [error, setError] = useState<string | null>(null);
-  const heartbeat = status.workerHeartbeatHistory || [];
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        const data = await fetchHarnessStatus();
+        if (!cancelled) {
+          setStatus(data);
+          setError(null);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to load mission control status');
+          setLoading(false);
+        }
+      }
+    };
+
+    load();
+    const interval = setInterval(load, 15000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+        <p className="text-sm text-gray-500">Mission Control: loading status…</p>
+      </div>
+    );
+  }
+
+  if (error || !status) {
+    return (
+      <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-4">
+        <p className="text-sm text-red-800">Mission Control unavailable: {error ?? 'unknown error'}</p>
+      </div>
+    );
+  }
 
   return (
-    <div className="bg-gray-50 border-b p-4 flex flex-col gap-2">
+    <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-4">
-      <div className="flex justify-between items-center">
+      <div className="mb-2 flex items-center justify-between">
-        <div>
+        <h3 className="text-sm font-semibold text-blue-900">Mission Control — Harness Progress</h3>
-          <div className="font-semibold text-lg text-gray-700">Mission Control</div>
+        <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${getStatusPillClass(status.keepalive.status)}`}>
-          <div className="text-xs text-gray-500">Version: {status.version}</div>
+          {status.keepalive.status ?? 'UNKNOWN'}
-        </div>
+        </span>
-        <div className="flex gap-4">
-          <span className="text-xs text-gray-700">Git: {getRecentCommit(status)}</span>
-        </div>
       </div>
-      <div className="flex flex-wrap gap-4 mt-2">
+
-        <div className="text-xs">Keepalive: {keepalive.status || 'n/a'} ({keepalive.activeSessionLabel || 'none'})</div>
+      <div className="grid gap-2 text-sm text-gray-800 md:grid-cols-2">
-        <div className="text-xs">Heartbeat: {keepalive.heartbeatAgeSeconds != null ? `${keepalive.heartbeatAgeSeconds}s ago` : 'n/a'}</div>
+        <p>
-        <div className="text-xs">Todo: checked {todo.checked ?? 0}/unchecked {todo.unchecked ?? 0}</div>
+          <span className="font-medium">Last commit:</span>{' '}
-        <div className="text-xs">Next: {todo.nextTask || 'n/a'}</div>
+          {status.commit ? `${status.commit.hash} (${status.commit.relative})` : 'N/A'}
+        </p>
+        <p>
+          <span className="font-medium">Iteration:</span>{' '}
+          {status.keepalive.activeSessionLabel ?? 'none'}
+        </p>
+        <p>
+          <span className="font-medium">v1 tasks:</span>{' '}
+          {status.todo.checked} done / {status.todo.unchecked} remaining
+        </p>
+        <p>
+          <span className="font-medium">Heartbeat age:</span>{' '}
+          {status.keepalive.heartbeatAgeSeconds != null ? `${status.keepalive.heartbeatAgeSeconds}s` : 'n/a'}
+        </p>
       </div>
-      {!!heartbeat.length && (
+
-        <div className="text-xs mt-2">
+      <p className="mt-2 text-sm text-gray-700">
-          Worker events: {heartbeat.length} ({heartbeat[0]?.timestamp})
+        <span className="font-medium">Next task:</span>{' '}
+        {status.todo.nextTask ?? 'No unchecked v1 tasks'}
+      </p>
+
+      {status.workerHeartbeatHistory.length > 0 && (
+        <div className="mt-3">
+          <p className="mb-1 text-xs font-medium uppercase tracking-wide text-gray-600">Last 5 heartbeats</p>
+          <ul className="space-y-1 text-xs text-gray-700">
+            {status.workerHeartbeatHistory.map((entry, index) => (
+              <li key={`${entry.timestamp ?? 'heartbeat'}-${index}`}>
+                {entry.timestamp ?? 'unknown time'} — {entry.step ?? 'step n/a'} ({entry.status ?? 'status n/a'})
+              </li>
+            ))}
+          </ul>
         </div>
       )}
     </div>

frontend/src/components/RecipeCard.tsx

@@ -1,12 +1,18 @@
+/**
+ * RecipeCard - Displays a single recipe in the list view
+ */
+
 import { Link } from 'react-router-dom';
 import type { Recipe, Tag } from '../types/recipe';
-import { colors, radius, shadows } from '../theme';
 
 interface RecipeCardProps {
   recipe: Recipe;
   tags?: Tag[];
 }
 
+/**
+ * Format time in minutes to readable string
+ */
 function formatTime(minutes?: number): string {
   if (!minutes) return '';
   if (minutes < 60) return `${minutes}m`;
@@ -15,6 +21,9 @@ function formatTime(minutes?: number): string {
   return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
 }
 
+/**
+ * Format date timestamp to readable string
+ */
 function formatDate(timestamp?: number): string {
   if (!timestamp) return '';
   const date = new Date(timestamp * 1000);
@@ -27,23 +36,29 @@ export function RecipeCard({ recipe, tags = [] }: RecipeCardProps) {
   return (
     <Link
       to={`/recipe/${recipe.id}`}
-      className="block bg-white border border-gray-200 rounded-xl shadow-card hover:shadow-lg hover:border-blue-300 transition-shadow group outline-none focus-visible:ring-2 focus-visible:ring-blue-600 min-h-[200px]"
+      className="block bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200"
-      style={{ boxShadow: shadows.card, borderRadius: radius.lg }}
     >
-      <div className="p-5 flex flex-col h-full">
+      <div className="p-5">
         {/* Title */}
-        <h3 className="text-lg font-bold text-gray-900 mb-1 line-clamp-2 group-hover:text-blue-700 transition-colors">{recipe.title}</h3>
+        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
+          {recipe.title}
+        </h3>
+
         {/* Description */}
-        {recipe.description && <p className="text-xs text-gray-600 mb-2 line-clamp-2">{recipe.description}</p>}
+        {recipe.description && (
+          <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+            {recipe.description}
+          </p>
+        )}
 
         {/* Tags */}
         {tags.length > 0 && (
-          <div className="flex flex-wrap gap-1 mb-2">
+          <div className="flex flex-wrap gap-1.5 mb-3">
             {tags.map(tag => (
               <span
                 key={tag.id}
-                className="px-2 py-0.5 rounded-full text-xs font-semibold text-white shadow"
+                className="px-2 py-0.5 rounded-full text-xs font-medium text-white"
-                style={{ backgroundColor: tag.color || colors.primary, borderRadius: radius.full }}
+                style={{ backgroundColor: tag.color || '#3B82F6' }}
               >
                 {tag.name}
               </span>
@@ -52,19 +67,21 @@ export function RecipeCard({ recipe, tags = [] }: RecipeCardProps) {
         )}
 
         {/* Meta information */}
-        <div className="flex flex-wrap gap-3 text-xs text-gray-500 mb-2">
+        <div className="flex flex-wrap gap-3 text-xs text-gray-500">
           {recipe.servings && (
             <div className="flex items-center gap-1">
               <span>🍽️</span>
               <span>{recipe.servings} servings</span>
             </div>
           )}
+          
           {totalTime > 0 && (
             <div className="flex items-center gap-1">
               <span>⏱️</span>
               <span>{formatTime(totalTime)}</span>
             </div>
           )}
+
           {recipe.last_cooked_at && (
             <div className="flex items-center gap-1">
               <span>👨‍🍳</span>
@@ -73,9 +90,12 @@ export function RecipeCard({ recipe, tags = [] }: RecipeCardProps) {
           )}
         </div>
 
-        <div className="mt-auto pt-3 border-t border-gray-100 flex justify-between items-center text-xs text-gray-500">
+        {/* Footer with ingredient count */}
-          <span>{recipe.ingredients.length} ingredients</span>
+        <div className="mt-4 pt-3 border-t border-gray-100">
-          <span className="text-blue-600 font-medium group-hover:underline">View Recipe →</span>
+          <div className="flex justify-between items-center text-xs text-gray-500">
+            <span>{recipe.ingredients.length} ingredients</span>
+            <span className="text-blue-600 font-medium">View Recipe →</span>
+          </div>
         </div>
       </div>
     </Link>

frontend/src/components/RecipeForm.tsx

@@ -2,6 +2,14 @@ import { useState, useEffect } from 'react';
 import type { Recipe, Tag } from '../types/recipe';
 import { TagSelector } from './TagSelector';
 
+interface RecipeFormProps {
+  recipe?: Recipe | null;
+  initialTags?: Tag[];
+  onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
+  onCancel: () => void;
+  submitLabel?: string;
+}
+
 export interface RecipeFormData {
   title: string;
   description?: string;
@@ -14,16 +22,8 @@ export interface RecipeFormData {
   cook_time_minutes?: number;
 }
 
-interface RecipeFormProps {
-  recipe?: Recipe; // May be undefined when creating
-  initialTags?: Tag[];
-  onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
-  onCancel: () => void;
-  submitLabel?: string;
-}
-
 /**
- * RecipeForm - Visually polished form component for creating/editing recipes
+ * RecipeForm - Form component for creating/editing recipes
  */
 export function RecipeForm({ 
   recipe, 
@@ -52,10 +52,8 @@ export function RecipeForm({
     if (recipe) {
       setTitle(recipe.title || '');
       setDescription(recipe.description || '');
-      setIngredientsText((Array.isArray(recipe.ingredients) ? recipe.ingredients.map(ingr => ('item' in ingr ? ingr.item : (typeof ingr === 'string' ? ingr : ''))) : []).join('\n'));
+      setIngredientsText(recipe.ingredients.join('\n'));
-      setInstructionsText(
+      setInstructionsText(recipe.instructions.join('\n'));
-        (Array.isArray(recipe.instructions) ? recipe.instructions : recipe.steps?.map(s => s.instruction) || []).join('\n')
-      );
       setSourceUrl(recipe.source_url || '');
       setNotes(recipe.notes || '');
       setServings(recipe.servings?.toString() || '');
@@ -64,11 +62,12 @@ export function RecipeForm({
     }
   }, [recipe]);
 
+  // Update tags when initialTags changes
   useEffect(() => {
     setSelectedTags(initialTags);
   }, [initialTags]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
 
@@ -82,6 +81,7 @@ export function RecipeForm({
       .split('\n')
       .map(line => line.trim())
       .filter(line => line.length > 0);
+
     if (ingredientsList.length === 0) {
       setError('At least one ingredient is required');
       return;
@@ -91,6 +91,7 @@ export function RecipeForm({
       .split('\n')
       .map(line => line.trim())
       .filter(line => line.length > 0);
+
     if (instructionsList.length === 0) {
       setError('At least one instruction step is required');
       return;
@@ -107,6 +108,7 @@ export function RecipeForm({
       prep_time_minutes: prepTime ? parseInt(prepTime, 10) : undefined,
       cook_time_minutes: cookTime ? parseInt(cookTime, 10) : undefined,
     };
+
     try {
       setIsSubmitting(true);
       await onSubmit(data, selectedTags);
@@ -117,140 +119,173 @@ export function RecipeForm({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-8">
+    <form onSubmit={handleSubmit} className="space-y-6">
       {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-5 py-3 rounded-lg shadow-card font-medium text-base">
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
           {error}
         </div>
       )}
+
+      {/* Title */}
       <div>
-        <label htmlFor="title" className="block text-base font-semibold text-gray-700 mb-1">
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700">
-          Title <span className="text-error">*</span>
+          Title <span className="text-red-500">*</span>
         </label>
         <input
           type="text"
           id="title"
           value={title}
-          onChange={e => setTitle(e.target.value)}
+          onChange={(e) => setTitle(e.target.value)}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-[17px] py-2 px-4 font-medium"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
           placeholder="e.g., Chocolate Chip Cookies"
           required
         />
       </div>
+
+      {/* Description */}
       <div>
-        <label htmlFor="description" className="block text-base font-semibold text-gray-700 mb-1">
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700">
           Description
         </label>
         <textarea
           id="description"
           value={description}
-          onChange={e => setDescription(e.target.value)}
+          onChange={(e) => setDescription(e.target.value)}
           rows={2}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
           placeholder="Brief description of the recipe..."
         />
       </div>
+
+      {/* Tags */}
       <div>
-        <label className="block text-base font-semibold text-gray-700 mb-1">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
           Tags
         </label>
-        <TagSelector selectedTags={selectedTags} onTagsChange={setSelectedTags} />
+        <TagSelector 
+          selectedTags={selectedTags}
+          onTagsChange={setSelectedTags}
+        />
       </div>
+
+      {/* Ingredients */}
       <div>
-        <label htmlFor="ingredients" className="block text-base font-semibold text-gray-700 mb-1">
+        <label htmlFor="ingredients" className="block text-sm font-medium text-gray-700">
-          Ingredients <span className="text-error">*</span>
+          Ingredients <span className="text-red-500">*</span>
         </label>
-        <p className="mt-0.5 text-sm text-gray-500 mb-2">One ingredient per line</p>
+        <p className="mt-1 text-sm text-gray-500">One ingredient per line</p>
         <textarea
           id="ingredients"
           value={ingredientsText}
-          onChange={e => setIngredientsText(e.target.value)}
+          onChange={(e) => setIngredientsText(e.target.value)}
-          rows={7}
+          rows={8}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
-          placeholder="2 cups all-purpose flour\n1 cup butter, softened\n3/4 cup sugar"
+          placeholder="2 cups all-purpose flour&#10;1 cup butter, softened&#10;3/4 cup sugar"
           required
         />
       </div>
+
+      {/* Instructions */}
       <div>
-        <label htmlFor="instructions" className="block text-base font-semibold text-gray-700 mb-1">
+        <label htmlFor="instructions" className="block text-sm font-medium text-gray-700">
-          Instructions <span className="text-error">*</span>
+          Instructions <span className="text-red-500">*</span>
         </label>
-        <p className="mt-0.5 text-sm text-gray-500 mb-2">One step per line</p>
+        <p className="mt-1 text-sm text-gray-500">One step per line</p>
         <textarea
           id="instructions"
           value={instructionsText}
-          onChange={e => setInstructionsText(e.target.value)}
+          onChange={(e) => setInstructionsText(e.target.value)}
-          rows={8}
+          rows={10}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
-          placeholder="Preheat oven to 350°F\nMix flour and baking soda\nCream butter and sugar"
+          placeholder="Preheat oven to 350°F&#10;Mix flour and baking soda&#10;Cream butter and sugar"
           required
         />
       </div>
+
+      {/* Metadata Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div>
-          <label htmlFor="servings" className="block text-base font-semibold text-gray-700 mb-1">Servings</label>
+          <label htmlFor="servings" className="block text-sm font-medium text-gray-700">
+            Servings
+          </label>
           <input
             type="number"
             id="servings"
             value={servings}
-            onChange={e => setServings(e.target.value)}
+            onChange={(e) => setServings(e.target.value)}
             min="1"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
             placeholder="4"
           />
         </div>
+
         <div>
-          <label htmlFor="prep_time" className="block text-base font-semibold text-gray-700 mb-1">Prep Time (min)</label>
+          <label htmlFor="prep_time" className="block text-sm font-medium text-gray-700">
+            Prep Time (min)
+          </label>
           <input
             type="number"
             id="prep_time"
             value={prepTime}
-            onChange={e => setPrepTime(e.target.value)}
+            onChange={(e) => setPrepTime(e.target.value)}
             min="0"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
             placeholder="15"
           />
         </div>
+
         <div>
-          <label htmlFor="cook_time" className="block text-base font-semibold text-gray-700 mb-1">Cook Time (min)</label>
+          <label htmlFor="cook_time" className="block text-sm font-medium text-gray-700">
+            Cook Time (min)
+          </label>
           <input
             type="number"
             id="cook_time"
             value={cookTime}
-            onChange={e => setCookTime(e.target.value)}
+            onChange={(e) => setCookTime(e.target.value)}
             min="0"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
             placeholder="30"
           />
         </div>
       </div>
+
+      {/* Source URL */}
       <div>
-        <label htmlFor="source_url" className="block text-base font-semibold text-gray-700 mb-1">Source URL</label>
+        <label htmlFor="source_url" className="block text-sm font-medium text-gray-700">
+          Source URL
+        </label>
         <input
           type="url"
           id="source_url"
           value={sourceUrl}
-          onChange={e => setSourceUrl(e.target.value)}
+          onChange={(e) => setSourceUrl(e.target.value)}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
           placeholder="https://example.com/recipe"
         />
       </div>
+
+      {/* Notes */}
       <div>
-        <label htmlFor="notes" className="block text-base font-semibold text-gray-700 mb-1">Notes</label>
+        <label htmlFor="notes" className="block text-sm font-medium text-gray-700">
+          Notes
+        </label>
         <textarea
           id="notes"
           value={notes}
-          onChange={e => setNotes(e.target.value)}
+          onChange={(e) => setNotes(e.target.value)}
           rows={3}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
           placeholder="Personal notes, substitutions, tips..."
         />
       </div>
+
+      {/* Form Actions */}
       <div className="flex gap-3 pt-4">
         <button
           type="submit"
           disabled={isSubmitting}
-          className="flex-1 bg-primary text-white px-4 py-2 rounded-md shadow-card hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold transition-colors text-base"
+          className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
         >
           {isSubmitting ? 'Saving...' : submitLabel}
         </button>
@@ -258,7 +293,7 @@ export function RecipeForm({
           type="button"
           onClick={onCancel}
           disabled={isSubmitting}
-          className="px-4 py-2 border border-gray-300 rounded-md shadow font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-base transition-colors"
+          className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
         >
           Cancel
         </button>

frontend/src/hooks/useRecipes.ts

@@ -9,7 +9,6 @@ import type { Recipe } from '../types/recipe';
 interface UseRecipesOptions {
   search?: string;
   limit?: number;
-  tagId?: number | null;
 }
 
 interface UseRecipesResult {
@@ -21,8 +20,11 @@ interface UseRecipesResult {
   refresh: () => void;
 }
 
+/**
+ * Hook to fetch recipes with search and pagination
+ */
 export function useRecipes(options: UseRecipesOptions = {}): UseRecipesResult {
-  const { search = '', limit = 20, tagId = null } = options;
+  const { search = '', limit = 20 } = options;
   const [recipes, setRecipes] = useState<Recipe[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -32,18 +34,21 @@ export function useRecipes(options: UseRecipesOptions = {}): UseRecipesResult {
   const loadRecipes = async (currentOffset: number, append: boolean = false) => {
     setLoading(true);
     setError(null);
+
     try {
       const data = await fetchRecipes({
         search: search || undefined,
         offset: currentOffset,
         limit,
-        tagId,
       });
+
       if (append) {
         setRecipes(prev => [...prev, ...data]);
       } else {
         setRecipes(data);
       }
+
+      // If we got fewer recipes than requested, we've reached the end
       setHasMore(data.length === limit);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load recipes');
@@ -53,11 +58,12 @@ export function useRecipes(options: UseRecipesOptions = {}): UseRecipesResult {
     }
   };
 
+  // Load recipes when search term changes
   useEffect(() => {
     setOffset(0);
     setHasMore(true);
     loadRecipes(0, false);
-  }, [search, tagId]);
+  }, [search]);
 
   const loadMore = () => {
     if (!loading && hasMore) {

frontend/src/index.css

@@ -3,16 +3,17 @@
 @tailwind utilities;
 
 :root {
-  --text: #374151;
+  --text: #6b6375;
-  --text-h: #1e293b;
+  --text-h: #08060d;
   --bg: #fff;
-  --bg-alt: #f9fafb;
+  --border: #e5e4e7;
-  --border: #e5e7eb;
   --code-bg: #f4f3ec;
   --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.08);
+  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.35);
+  --accent-border: rgba(170, 59, 255, 0.5);
-  --card-shadow: 0 2px 8px 0 rgba(28,30,34,0.08);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
   --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
   --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
@@ -26,16 +27,17 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --text: #d1d5db;
+    --text: #9ca3af;
     --text-h: #f3f4f6;
     --bg: #16171d;
-    --bg-alt: #1a1b20;
     --border: #2e303a;
     --code-bg: #1f2028;
     --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.11);
+    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.33);
+    --accent-border: rgba(192, 132, 252, 0.5);
-    --card-shadow: 0 3px 14px 0 rgba(32,34,40,0.21);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
   }
 }
 
@@ -43,56 +45,25 @@ body {
   margin: 0;
   font-family: var(--sans);
   color: var(--text);
-  background: var(--bg-alt);
+  background: var(--bg);
 }
 
 #root {
   min-height: 100vh;
-  background: var(--bg-alt);
-}
-
-input, button, textarea, select {
-  font-family: inherit;
-}
-
-.shadow-card {
-  box-shadow: var(--card-shadow) !important;
 }
 
 /* Toast animation */
 @keyframes slide-in {
-  from { transform: translateX(100%); opacity: 0; }
+  from {
-  to { transform: translateX(0); opacity: 1; }
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
+
 .animate-slide-in {
   animation: slide-in 0.3s ease-out;
 }
-
-/* Recipe Manager visual polish */
-
-::-webkit-input-placeholder { color: #96a3b7; }
-::-moz-placeholder { color: #96a3b7; }
-:-ms-input-placeholder { color: #96a3b7; }
-::placeholder { color: #96a3b7; }
-
-input:focus, textarea:focus, select:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
-
-button, .button, .btn {
-  transition: box-shadow 0.13s, background 0.13s, color 0.13s;
-}
-
-.card, .shadow-card { border-radius: 1rem; box-shadow: var(--card-shadow); }
-
-::-webkit-scrollbar {
-  width: 8px;
-  background: #f3f4f6;
-}
-::-webkit-scrollbar-thumb {
-  background: #e5e7eb;
-  border-radius: 7px;
-}
-
-@media (max-width: 480px) {
-  .max-w-7xl, .max-w-6xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-md, .max-w-sm { max-width: 100vw !important; }
-  .p-8, .p-7, .p-6 { padding: 1rem !important; }
-}

frontend/src/pages/CookModePage.tsx

@@ -1,40 +1,45 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { useRecipe } from '../hooks/useRecipe';
-import { colors, radius, spacing, shadows } from '../theme';
 
 /**
  * CookModePage - Hands-free cooking interface with wake lock
  */
 export function CookModePage() {
-  const { id } = useParams();
+  const { id } = useParams<{ id: string }>();
   const recipeId = id ? parseInt(id, 10) : null;
   const { recipe, loading, error } = useRecipe(recipeId);
-
+  
   // Track checked ingredients and steps
   const [checkedIngredients, setCheckedIngredients] = useState<Set<number>>(new Set());
   const [checkedSteps, setCheckedSteps] = useState<Set<number>>(new Set());
-
+  
   // Wake lock state
   const [wakeLock, setWakeLock] = useState<WakeLockSentinel | null>(null);
   const [wakeLockSupported, setWakeLockSupported] = useState(false);
-
+  
   // Check if Wake Lock API is supported
   useEffect(() => {
     setWakeLockSupported('wakeLock' in navigator);
   }, []);
-
+  
   // Request wake lock
   const requestWakeLock = async () => {
     if (!wakeLockSupported) return;
+    
     try {
-      // @ts-ignore
       const lock = await navigator.wakeLock.request('screen');
       setWakeLock(lock);
-      lock.addEventListener('release', () => setWakeLock(null));
+      
-    } catch (err) { /* ignore */ }
+      // Handle wake lock release
+      lock.addEventListener('release', () => {
+        setWakeLock(null);
+      });
+    } catch (err) {
+      console.error('Failed to request wake lock:', err);
+    }
   };
-
+  
   // Release wake lock
   const releaseWakeLock = async () => {
     if (wakeLock) {
@@ -42,24 +47,52 @@ export function CookModePage() {
       setWakeLock(null);
     }
   };
-  const toggleWakeLock = () => { (wakeLock ? releaseWakeLock() : requestWakeLock()); };
+  
-  useEffect(() => () => { if (wakeLock) wakeLock.release(); }, [wakeLock]);
+  // Toggle wake lock
-
+  const toggleWakeLock = () => {
+    if (wakeLock) {
+      releaseWakeLock();
+    } else {
+      requestWakeLock();
+    }
+  };
+  
+  // Release wake lock when leaving page
+  useEffect(() => {
+    return () => {
+      if (wakeLock) {
+        wakeLock.release();
+      }
+    };
+  }, [wakeLock]);
+  
+  // Toggle ingredient checkbox
   const toggleIngredient = (index: number) => {
     setCheckedIngredients(prev => {
       const next = new Set(prev);
-      next.has(index) ? next.delete(index) : next.add(index);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
       return next;
     });
   };
+  
+  // Toggle step checkbox
   const toggleStep = (index: number) => {
     setCheckedSteps(prev => {
       const next = new Set(prev);
-      next.has(index) ? next.delete(index) : next.add(index);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
       return next;
     });
   };
-
+  
+  // Loading state
   if (loading) {
     return (
       <div className="flex justify-center items-center min-h-[50vh]">
@@ -70,85 +103,199 @@ export function CookModePage() {
       </div>
     );
   }
+  
+  // Error state
   if (error || !recipe) {
     return (
-      <div className="bg-red-50 border border-red-200 rounded-2xl p-8 max-w-md mx-auto shadow-card text-center">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-6">
-        <h2 className="text-2xl font-bold text-red-800 mb-2">Error Loading Recipe</h2>
+        <h2 className="text-xl font-bold text-red-800 mb-2">Error Loading Recipe</h2>
         <p className="text-red-600 mb-4">{error || 'Recipe not found'}</p>
-        <Link to="/" className="inline-block px-4 py-2 bg-red-600 text-white rounded-full hover:bg-red-700 transition-colors shadow">Back to Recipes</Link>
+        <Link 
+          to="/"
+          className="inline-block px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+        >
+          Back to Recipes
+        </Link>
       </div>
     );
   }
-
+  
-  // Use fallback if recipe.instructions missing
+  // Calculate progress
-  const instructions: string[] = Array.isArray(recipe.instructions) ? recipe.instructions : recipe.steps?.map(s => s.instruction) || [];
+  const ingredientsTotal = recipe.ingredients.length;
-  const ingredients = Array.isArray(recipe.ingredients) ? recipe.ingredients : [];
-  const ingredientsTotal = ingredients.length;
-  const stepsTotal = instructions.length;
   const ingredientsChecked = checkedIngredients.size;
+  const stepsTotal = recipe.instructions.length;
   const stepsChecked = checkedSteps.size;
   const ingredientsProgress = ingredientsTotal > 0 ? (ingredientsChecked / ingredientsTotal) * 100 : 0;
   const stepsProgress = stepsTotal > 0 ? (stepsChecked / stepsTotal) * 100 : 0;
-
+  
   return (
-    <div className="max-w-3xl mx-auto py-7">
+    <div className="max-w-4xl mx-auto">
-      <div className="bg-white rounded-2xl shadow-card p-7 mb-8 border border-gray-100">
+      {/* Header */}
-        <div className="flex items-start justify-between mb-4 gap-6 flex-wrap">
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
-          <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between mb-4">
-            <h1 className="text-3xl font-bold text-gray-900 mb-2 break-words">{recipe.title}</h1>
+          <div className="flex-1">
-            {recipe.description && (<p className="text-gray-600 text-base mb-1 break-words">{recipe.description}</p>)}
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">{recipe.title}</h1>
+            {recipe.description && (
+              <p className="text-gray-600 text-lg">{recipe.description}</p>
+            )}
           </div>
-          <Link to={`/recipe/${recipe.id}`} className="ml-4 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-md border border-blue-100 transition-colors text-sm font-medium shadow-sm">Exit Cook Mode</Link>
+          <Link
+            to={`/recipe/${recipe.id}`}
+            className="ml-4 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors text-sm font-medium"
+          >
+            Exit Cook Mode
+          </Link>
         </div>
-        <div className="flex flex-wrap gap-5 text-sm text-gray-600 mb-4">
+        
-          {recipe.servings && (<div className="bg-gray-50 rounded-md px-3 py-1 font-medium shadow-inner">Servings: <span className="ml-1">{recipe.servings}</span></div>)}
+        {/* Recipe metadata */}
-          {recipe.prep_time_minutes && (<div className="bg-gray-50 rounded-md px-3 py-1 font-medium shadow-inner">Prep: <span className="ml-1">{recipe.prep_time_minutes} min</span></div>)}
+        <div className="flex flex-wrap gap-4 text-sm text-gray-600 mb-4">
-          {recipe.cook_time_minutes && (<div className="bg-gray-50 rounded-md px-3 py-1 font-medium shadow-inner">Cook: <span className="ml-1">{recipe.cook_time_minutes} min</span></div>)}
+          {recipe.servings && (
+            <div className="flex items-center">
+              <span className="font-medium">Servings:</span>
+              <span className="ml-1">{recipe.servings}</span>
+            </div>
+          )}
+          {recipe.prep_time_minutes && (
+            <div className="flex items-center">
+              <span className="font-medium">Prep:</span>
+              <span className="ml-1">{recipe.prep_time_minutes} min</span>
+            </div>
+          )}
+          {recipe.cook_time_minutes && (
+            <div className="flex items-center">
+              <span className="font-medium">Cook:</span>
+              <span className="ml-1">{recipe.cook_time_minutes} min</span>
+            </div>
+          )}
         </div>
+        
+        {/* Wake lock toggle */}
         {wakeLockSupported && (
-          <div className="border-t pt-4 mt-4">
+          <div className="border-t pt-4">
-            <button onClick={toggleWakeLock} className={`w-full sm:w-auto px-6 py-3 rounded-lg font-medium transition-colors focus:outline-none shadow ${wakeLock ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`}>
+            <button
+              onClick={toggleWakeLock}
+              className={`w-full sm:w-auto px-6 py-3 rounded-lg font-medium transition-colors ${
+                wakeLock
+                  ? 'bg-green-600 text-white hover:bg-green-700'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
               {wakeLock ? '🔒 Screen Locked (Stay Awake)' : '🔓 Screen Will Sleep (Tap to Lock)'}
             </button>
-            <p className="mt-2 text-sm text-gray-500">{wakeLock ? 'Your screen will stay on while cooking' : 'Enable to prevent your screen from turning off'}</p>
+            <p className="mt-2 text-sm text-gray-500">
-          </div> )}
+              {wakeLock 
+                ? 'Your screen will stay on while cooking' 
+                : 'Enable to prevent your screen from turning off'}
+            </p>
+          </div>
+        )}
       </div>
-      <div className="bg-white rounded-2xl shadow-card p-7 mb-8 border border-gray-100">
+      
-        <div className="flex items-center justify-between mb-4"><h2 className="text-2xl font-bold text-gray-900">Ingredients</h2><div className="text-sm font-medium text-gray-600">{ingredientsChecked} of {ingredientsTotal}</div></div>
+      {/* Ingredients Section */}
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-2xl font-bold text-gray-900">Ingredients</h2>
+          <div className="text-sm font-medium text-gray-600">
+            {ingredientsChecked} of {ingredientsTotal}
+          </div>
+        </div>
+        
+        {/* Progress bar */}
         <div className="mb-6 bg-gray-200 rounded-full h-2 overflow-hidden">
-          <div className="bg-green-600 h-full transition-all duration-300" style={{ width: `${ingredientsProgress}%` }} />
+          <div 
+            className="bg-green-600 h-full transition-all duration-300"
+            style={{ width: `${ingredientsProgress}%` }}
+          />
         </div>
+        
+        {/* Ingredient checklist */}
         <div className="space-y-3">
-          {ingredients.map((ingredient: any, index: number) => (
+          {recipe.ingredients.map((ingredient, index) => (
-            <label key={index} className="flex items-start gap-3 p-3 rounded-lg border border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors shadow-sm">
+            <label
-              <input type="checkbox" checked={checkedIngredients.has(index)} onChange={() => toggleIngredient(index)} className="mt-1 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" />
+              key={index}
-              <span className={`text-lg flex-1 ${checkedIngredients.has(index) ? 'line-through text-gray-500' : 'text-gray-900'}`}>{'item' in ingredient ? ingredient.item : typeof ingredient === 'string' ? ingredient : ''}</span>
+              className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
+            >
+              <input
+                type="checkbox"
+                checked={checkedIngredients.has(index)}
+                onChange={() => toggleIngredient(index)}
+                className="mt-1 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
+              />
+              <span className={`text-lg flex-1 ${
+                checkedIngredients.has(index) ? 'line-through text-gray-500' : 'text-gray-900'
+              }`}>
+                {ingredient}
+              </span>
             </label>
           ))}
         </div>
       </div>
-      <div className="bg-white rounded-2xl shadow-card p-7 mb-8 border border-gray-100">
+      
-        <div className="flex items-center justify-between mb-4"><h2 className="text-2xl font-bold text-gray-900">Instructions</h2><div className="text-sm font-medium text-gray-600">{stepsChecked} of {stepsTotal}</div></div>
+      {/* Instructions Section */}
-        <div className="mb-6 bg-gray-200 rounded-full h-2 overflow-hidden"><div className="bg-blue-600 h-full transition-all duration-300" style={{ width: `${stepsProgress}%` }} /></div>
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-2xl font-bold text-gray-900">Instructions</h2>
+          <div className="text-sm font-medium text-gray-600">
+            {stepsChecked} of {stepsTotal}
+          </div>
+        </div>
+        
+        {/* Progress bar */}
+        <div className="mb-6 bg-gray-200 rounded-full h-2 overflow-hidden">
+          <div 
+            className="bg-blue-600 h-full transition-all duration-300"
+            style={{ width: `${stepsProgress}%` }}
+          />
+        </div>
+        
+        {/* Instruction steps */}
         <div className="space-y-4">
-          {instructions.map((instruction, index) => (
+          {recipe.instructions.map((instruction, index) => (
-            <label key={index} className="flex items-start gap-4 p-4 border border-gray-100 rounded-xl hover:bg-gray-50 cursor-pointer transition-colors shadow-sm">
+            <label
+              key={index}
+              className="flex items-start gap-4 p-4 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors border-l-4 border-transparent hover:border-blue-600"
+            >
               <div className="flex items-center gap-3">
-                <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold ${checkedSteps.has(index) ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'}`}>{index + 1}</div>
+                <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold ${
-                <input type="checkbox" checked={checkedSteps.has(index)} onChange={() => toggleStep(index)} className="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" />
+                  checkedSteps.has(index) 
+                    ? 'bg-blue-600 text-white' 
+                    : 'bg-gray-200 text-gray-600'
+                }`}>
+                  {index + 1}
+                </div>
+                <input
+                  type="checkbox"
+                  checked={checkedSteps.has(index)}
+                  onChange={() => toggleStep(index)}
+                  className="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
+                />
               </div>
-              <span className={`text-lg flex-1 ${checkedSteps.has(index) ? 'line-through text-gray-500' : 'text-gray-900'}`}>{instruction}</span>
+              <span className={`text-lg flex-1 ${
+                checkedSteps.has(index) ? 'line-through text-gray-500' : 'text-gray-900'
+              }`}>
+                {instruction}
+              </span>
             </label>
           ))}
         </div>
       </div>
+      
+      {/* Completion message */}
       {ingredientsChecked === ingredientsTotal && stepsChecked === stepsTotal && (
-        <div className="bg-green-50 border-2 border-green-500 rounded-2xl p-7 mb-8 text-center shadow-card">
+        <div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 mb-6 text-center">
           <div className="text-4xl mb-3">🎉</div>
           <h3 className="text-2xl font-bold text-green-800 mb-2">All Done!</h3>
-          <p className="text-green-700 text-lg mb-4">You've completed all steps. Enjoy your meal!</p>
+          <p className="text-green-700 text-lg mb-4">
-          <Link to={`/recipe/${recipe.id}`} className="inline-block px-6 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition-colors font-medium shadow">Back to Recipe</Link>
+            You've completed all steps. Enjoy your meal!
-        </div> )}
+          </p>
+          <Link
+            to={`/recipe/${recipe.id}`}
+            className="inline-block px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
+          >
+            Back to Recipe
+          </Link>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/pages/ImportUrlPage.tsx

@@ -1,84 +1,73 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import type { FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { createRecipe, importRecipeFromUrl } from '../services/api';
 import type { RecipeDraft, UrlImportResult } from '../types/recipe';
-import { colors, radius, shadows } from '../theme';
 
 type ImportErrorType = 'invalid-url' | 'parse-failure' | 'timeout' | 'generic';
 
 function toTextBlock(items: string[]): string {
   return items.join('\n');
 }
+
 function toList(text: string): string[] {
-  return text.split('\n').map((line) => line.trim()).filter((line) => line.length > 0);
+  return text
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
 }
+
 function getImportErrorDetails(message: string): { type: ImportErrorType; message: string } {
   const normalized = message.toLowerCase();
+
   if (normalized.includes('valid url')) {
     return {
       type: 'invalid-url',
       message: 'Please enter a valid URL (including https://).',
     };
   }
+
   if (normalized.includes('timed out')) {
     return {
       type: 'timeout',
       message: 'The import request timed out. Please try again in a moment.',
     };
   }
+
   if (normalized.includes('network error') || normalized.includes('could not fetch the page')) {
     return {
       type: 'generic',
       message: 'We could not reach that recipe page right now. Please try again in a moment.',
     };
   }
+
   if (normalized.includes('did not return an html page')) {
     return {
       type: 'generic',
       message: 'That link did not point to an HTML recipe page. Try the direct recipe URL.',
     };
   }
+
   return {
     type: 'generic',
     message,
   };
 }
-// Converts recipe-draft shape (object[] — {item, ...}) to string[] for textarea editing
-function draftIngredientsToStringArray(ingredients: RecipeDraft['ingredients']): string[] {
-  if (!Array.isArray(ingredients)) return [];
-  return ingredients.map((x) => x && typeof x === 'object' && typeof x.item === 'string' ? x.item : String(x));
-}
-// Converts string[] (from textarea) to recipe draft ingredient object[]
-function ingredientStringsToDraftArray(strings: string[]): RecipeDraft['ingredients'] {
-  return strings.map((s) => ({ item: s, quantity: null, unit: null, notes: null }));
-}
 
 export function ImportUrlPage() {
   const navigate = useNavigate();
-  const [url, setUrl] = useState<string>('');
+
-  const [loading, setLoading] = useState<boolean>(false);
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [errorType, setErrorType] = useState<ImportErrorType | null>(null);
   const [result, setResult] = useState<UrlImportResult | null>(null);
-  // UI edit: keep ingredient/instructions as raw strings for editing, sync to draft before save
+
-  const [ingredientLines, setIngredientLines] = useState<string[]>([]);
-  const [instructionLines, setInstructionLines] = useState<string[]>([]);
   const [draft, setDraft] = useState<RecipeDraft | null>(null);
   const [draftError, setDraftError] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [isSaving, setIsSaving] = useState(false);
 
-  // When result/draft loads from import, update the edit text states
+  const handleSubmit = async (event: FormEvent) => {
-  useEffect(() => {
-    if (draft) {
-      setIngredientLines(draftIngredientsToStringArray(draft.ingredients));
-      setInstructionLines(Array.isArray(draft.instructions) ? draft.instructions.filter(Boolean) : []);
-    } else {
-      setIngredientLines([]);
-      setInstructionLines([]);
-    }
-  }, [draft]);
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setLoading(true);
     setError(null);
@@ -86,11 +75,16 @@ export function ImportUrlPage() {
     setResult(null);
     setDraft(null);
     setDraftError(null);
+
     try {
-      const imported: UrlImportResult = await importRecipeFromUrl(url);
+      const imported = await importRecipeFromUrl(url);
       setResult(imported);
-      const importedDraft = imported.draft_recipe ?? null;
+      setDraft(imported.draft_recipe);
-      setDraft(importedDraft);
+
+      if (!imported.draft_recipe) {
+        setErrorType('parse-failure');
+        setError('We could fetch this page, but could not find recipe fields to import.');
+      }
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Failed to import recipe URL';
       const details = getImportErrorDetails(message);
@@ -101,15 +95,17 @@ export function ImportUrlPage() {
     }
   };
 
-  const handleSave = async (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSave = async (event: FormEvent) => {
     event.preventDefault();
     if (!draft) {
       setDraftError('No draft recipe to save.');
       return;
     }
+
     const title = draft.title.trim();
-    const ingredients = ingredientStringsToDraftArray(ingredientLines.filter(Boolean));
+    const ingredients = draft.ingredients.map((item) => item.trim()).filter(Boolean);
-    const instructions = instructionLines.filter(Boolean);
+    const instructions = draft.instructions.map((item) => item.trim()).filter(Boolean);
+
     if (!title) {
       setDraftError('Title is required.');
       return;
@@ -122,10 +118,17 @@ export function ImportUrlPage() {
       setDraftError('At least one instruction step is required.');
       return;
     }
+
     setIsSaving(true);
     setDraftError(null);
+
     try {
-      const created = await createRecipe({ ...draft, title, ingredients, instructions });
+      const created = await createRecipe({
+        ...draft,
+        title,
+        ingredients,
+        instructions,
+      });
       navigate(`/recipe/${created.id}`);
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Failed to save recipe';
@@ -135,62 +138,153 @@ export function ImportUrlPage() {
   };
 
   return (
-    <div className="max-w-2xl mx-auto py-8">
+    <div className="max-w-3xl mx-auto">
-      <div className="bg-white rounded-2xl shadow-card p-7 border border-gray-100 mb-8">
+      <h2 className="text-2xl font-bold text-gray-900 mb-2">Import from URL</h2>
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">Import from URL</h2>
+      <p className="text-gray-600 mb-6">
-        <p className="text-gray-600 mb-6">Paste a recipe URL and we'll try to fetch the page and extract recipe data.</p>
+        Paste a recipe URL and we&apos;ll try to fetch the page and extract recipe data.
-        <form onSubmit={handleSubmit} className="space-y-5">
+      </p>
-          <div>
+
-            <label htmlFor="import-url" className="block text-sm font-medium text-gray-700 mb-2">Recipe URL</label>
+      <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6 space-y-4">
-            <input id="import-url" type="url" required value={url} onChange={(event) => setUrl(event.target.value)} placeholder="https://example.com/my-recipe" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-base shadow-sm" />
+        <div>
-          </div>
+          <label htmlFor="import-url" className="block text-sm font-medium text-gray-700 mb-2">
-          <button type="submit" disabled={loading} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow disabled:opacity-50 disabled:cursor-not-allowed">
+            Recipe URL
-            {loading ? 'Importing…' : 'Import URL'}
+          </label>
-          </button>
+          <input
-        </form>
+            id="import-url"
-        {error && (
+            type="url"
-          <div className={`mt-6 border rounded-lg p-4 ${errorType === 'parse-failure' ? 'bg-amber-50 border-amber-200' : 'bg-red-50 border-red-200'}`}>
+            required
-            <p className={errorType === 'parse-failure' ? 'text-amber-800' : 'text-red-800'}>
+            value={url}
-              <strong>{errorType === 'invalid-url' && 'Invalid URL:'}{errorType === 'timeout' && 'Import timed out:'}{errorType === 'parse-failure' && 'Parse failed:'}{errorType === 'generic' && 'Error:'}</strong> {error}
+            onChange={(event) => setUrl(event.target.value)}
-            </p>
+            placeholder="https://example.com/my-recipe"
-          </div>
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        )}
+          />
-      </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Importing…' : 'Import URL'}
+        </button>
+      </form>
+
+      {error && (
+        <div
+          className={`mt-4 border rounded-lg p-4 ${
+            errorType === 'parse-failure'
+              ? 'bg-amber-50 border-amber-200'
+              : 'bg-red-50 border-red-200'
+          }`}
+        >
+          <p className={errorType === 'parse-failure' ? 'text-amber-800' : 'text-red-800'}>
+            <strong>
+              {errorType === 'invalid-url' && 'Invalid URL:'}
+              {errorType === 'timeout' && 'Import timed out:'}
+              {errorType === 'parse-failure' && 'Parse failed:'}
+              {errorType === 'generic' && 'Error:'}
+            </strong>{' '}
+            {error}
+          </p>
+        </div>
+      )}
+
       {result && (
-        <div className="mt-1 bg-white border border-gray-200 rounded-2xl p-7 space-y-4 shadow-card mb-7">
+        <div className="mt-4 bg-white border border-gray-200 rounded-lg p-6 space-y-4">
           <div>
             <h3 className="font-semibold text-gray-900">Parsed Preview</h3>
             <p className="text-sm text-gray-600">Source: {result.source_url}</p>
-            <p className="text-sm text-gray-600">JSON-LD blocks found: {Array.isArray(result.json_ld_blocks) ? result.json_ld_blocks.length : 0}</p>
+            <p className="text-sm text-gray-600">JSON-LD blocks found: {result.json_ld_blocks.length}</p>
           </div>
+
           {draft ? (
-            <form onSubmit={handleSave} className="space-y-5">
+            <form onSubmit={handleSave} className="space-y-4">
-              <p className="text-sm text-gray-600">Review and edit before saving.</p>{draftError && (<div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-800 text-sm mb-2">{draftError}</div>)}
+              <p className="text-sm text-gray-600">Review and edit before saving.</p>
+
+              {draftError && (
+                <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-800 text-sm">
+                  {draftError}
+                </div>
+              )}
+
               <div>
-                <label htmlFor="draft-title" className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                <label htmlFor="draft-title" className="block text-sm font-medium text-gray-700 mb-1">
-                <input id="draft-title" type="text" required value={draft.title} onChange={(event) => setDraft({ ...draft, title: event.target.value })} className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm" />
+                  Title
+                </label>
+                <input
+                  id="draft-title"
+                  type="text"
+                  required
+                  value={draft.title}
+                  onChange={(event) => setDraft({ ...draft, title: event.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+                />
               </div>
+
               <div>
-                <label htmlFor="draft-ingredients" className="block text-sm font-medium text-gray-700 mb-1">Ingredients (one per line)</label>
+                <label htmlFor="draft-ingredients" className="block text-sm font-medium text-gray-700 mb-1">
-                <textarea id="draft-ingredients" rows={8} value={toTextBlock(ingredientLines)} onChange={e => setIngredientLines(toList(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm" />
+                  Ingredients (one per line)
+                </label>
+                <textarea
+                  id="draft-ingredients"
+                  rows={8}
+                  value={toTextBlock(draft.ingredients)}
+                  onChange={(event) => setDraft({ ...draft, ingredients: toList(event.target.value) })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+                />
               </div>
+
               <div>
-                <label htmlFor="draft-instructions" className="block text-sm font-medium text-gray-700 mb-1">Steps (one per line)</label>
+                <label htmlFor="draft-instructions" className="block text-sm font-medium text-gray-700 mb-1">
-                <textarea id="draft-instructions" rows={10} value={toTextBlock(instructionLines)} onChange={e => setInstructionLines(toList(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm" />
+                  Steps (one per line)
+                </label>
+                <textarea
+                  id="draft-instructions"
+                  rows={10}
+                  value={toTextBlock(draft.instructions)}
+                  onChange={(event) => setDraft({ ...draft, instructions: toList(event.target.value) })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+                />
               </div>
+
               <div>
-                <label htmlFor="draft-source-url" className="block text-sm font-medium text-gray-700 mb-1">Source URL</label>
+                <label htmlFor="draft-source-url" className="block text-sm font-medium text-gray-700 mb-1">
-                <input id="draft-source-url" type="url" value={draft.source_url ?? ''} onChange={(event) => setDraft({ ...draft, source_url: event.target.value.trim() ? event.target.value : undefined })} className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm" />
+                  Source URL
+                </label>
+                <input
+                  id="draft-source-url"
+                  type="url"
+                  value={draft.source_url ?? ''}
+                  onChange={(event) =>
+                    setDraft({
+                      ...draft,
+                      source_url: event.target.value.trim() ? event.target.value : undefined,
+                    })
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+                />
               </div>
-              <div className="flex gap-3 mt-2">
+
-                <button type="submit" disabled={isSaving} className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed shadow">
+              <div className="flex gap-3">
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
                   {isSaving ? 'Saving…' : 'Save Recipe'}
                 </button>
-                <Link to="/recipe/new" className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium shadow-sm">Open full editor</Link>
+                <Link
+                  to="/recipe/new"
+                  className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium"
+                >
+                  Open full editor
+                </Link>
               </div>
             </form>
           ) : (
-            <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>
+            <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>
       )}

frontend/src/pages/RecipeDetailPage.tsx

@@ -3,24 +3,34 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useRecipe } from '../hooks/useRecipe';
 import { useToastContext } from '../App';
 import { RecipeForm, type RecipeFormData } from '../components/RecipeForm';
-import { createRecipe, updateRecipe, deleteRecipe, fetchRecipeTags, assignTagToRecipe, removeTagFromRecipe } from '../services/api';
+import { 
-import type { Tag, Recipe, Ingredient } from '../types/recipe';
+  createRecipe, 
+  updateRecipe, 
+  deleteRecipe,
+  fetchRecipeTags,
+  assignTagToRecipe,
+  removeTagFromRecipe
+} from '../services/api';
+import type { Tag } from '../types/recipe';
 
 /**
- * RecipeDetailPage - View, create, and edit recipes (Visually polished)
+ * RecipeDetailPage - View, create, and edit recipes
  */
 export function RecipeDetailPage() {
-  const { id } = useParams();
+  const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const toast = useToastContext();
+  
   // Parse ID or null for "new" route
   const recipeId = id === 'new' ? null : (id ? parseInt(id, 10) : null);
+  
   const { recipe, loading, error } = useRecipe(recipeId);
-  const [isEditing, setIsEditing] = useState(recipeId === null);
+  const [isEditing, setIsEditing] = useState(recipeId === null); // Start in edit mode for new recipes
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [recipeTags, setRecipeTags] = useState<Tag[]>([]);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // Load recipe tags
   useEffect(() => {
     if (recipeId !== null) {
       fetchRecipeTags(recipeId)
@@ -32,60 +42,73 @@ export function RecipeDetailPage() {
     }
   }, [recipeId, toast]);
 
-  // Compose FE ingredients to BE Ingredient[] shape with dummies for missing fields
-  function toApiIngredients(ingredients: string[]): Ingredient[] {
-    return ingredients.map((item, idx) => ({
-      id: 0,
-      recipe_id: 0,
-      position: idx + 1,
-      item,
-      quantity: null,
-      unit: null,
-      notes: null,
-    }));
-  }
-
   // Handle form submission
   const handleSubmit = async (data: RecipeFormData, tags: Tag[]) => {
     try {
       if (recipeId === null) {
-        // Compose to API input shape (fill dummies)
+        // Create new recipe
-        const newRecipe = await createRecipe({
+        const newRecipe = await createRecipe(data);
-          ...data,
+        
-          ingredients: toApiIngredients(data.ingredients),
+        // Assign tags
-          instructions: data.instructions,
+        for (const tag of tags) {
-        });
+          try {
-        for (const tag of tags) { try { await assignTagToRecipe(newRecipe.id, tag.id); } catch {} }
+            await assignTagToRecipe(newRecipe.id, tag.id);
+          } catch (err) {
+            console.error('Failed to assign tag:', err);
+            toast.warning(`Failed to assign tag "${tag.name}"`);
+          }
+        }
+        
         toast.success('Recipe created successfully!');
         navigate(`/recipe/${newRecipe.id}`);
       } else {
-        await updateRecipe(recipeId, {
+        // Update existing recipe
-          ...data,
+        await updateRecipe(recipeId, data);
-          ingredients: toApiIngredients(data.ingredients),
+        
-          instructions: data.instructions,
+        // Update tags: remove old ones, add new ones
-        });
-        // Tag syncing (remove/add)
         const currentTagIds = recipeTags.map(t => t.id);
         const newTagIds = tags.map(t => t.id);
+        
+        // Remove tags that are no longer selected
         for (const tagId of currentTagIds) {
-          if (!newTagIds.includes(tagId)) { try { await removeTagFromRecipe(recipeId, tagId); } catch {} }
+          if (!newTagIds.includes(tagId)) {
+            try {
+              await removeTagFromRecipe(recipeId, tagId);
+            } catch (err) {
+              console.error('Failed to remove tag:', err);
+              toast.warning('Failed to remove some tags');
+            }
+          }
         }
+        
+        // Add tags that are newly selected
         for (const tagId of newTagIds) {
-          if (!currentTagIds.includes(tagId)) { try { await assignTagToRecipe(recipeId, tagId); } catch {} }
+          if (!currentTagIds.includes(tagId)) {
+            try {
+              await assignTagToRecipe(recipeId, tagId);
+            } catch (err) {
+              console.error('Failed to assign tag:', err);
+              toast.warning('Failed to assign some tags');
+            }
+          }
         }
+        
         toast.success('Recipe updated successfully!');
         setIsEditing(false);
+        // Refresh the page to show updated data
         window.location.reload();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to save recipe';
       toast.error(errorMessage);
-      throw err;
+      throw err; // Re-throw so form can handle it
     }
   };
 
+  // Handle delete
   const handleDelete = async () => {
     if (recipeId === null) return;
+    
     try {
       setIsDeleting(true);
       await deleteRecipe(recipeId);
@@ -99,157 +122,242 @@ export function RecipeDetailPage() {
     }
   };
 
-  // Loading State
+  // Loading state
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center py-24">
+      <div className="text-center py-12">
-        <div className="inline-block animate-spin rounded-full h-9 w-9 border-b-2 border-primary"></div>
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        <p className="mt-6 text-gray-500 text-base font-medium">Loading recipe...</p>
+        <p className="mt-4 text-gray-600">Loading recipe...</p>
       </div>
     );
   }
-  // Error State
+
+  // Error state
   if (error) {
     return (
-      <div className="max-w-xl mx-auto bg-red-50 border border-red-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-6">
-        <h3 className="text-xl text-red-800 font-bold mb-3">Error Loading Recipe</h3>
+        <h3 className="text-red-800 font-semibold mb-2">Error Loading Recipe</h3>
-        <p className="text-red-600 text-base mb-2">{error}</p>
+        <p className="text-red-600">{error}</p>
-        <Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
+        <Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
+          ← Back to recipes
+        </Link>
       </div>
     );
   }
-  // New Recipe
+
+  // New recipe mode (always in edit)
   if (recipeId === null) {
     return (
-      <div className="max-w-2xl mx-auto pt-8">
+      <div>
-        <div className="mb-6 pb-1 border-b border-gray-200">
+        <div className="mb-6">
-          <h2 className="text-3xl font-bold text-gray-900">Create New Recipe</h2>
+          <h2 className="text-2xl font-bold text-gray-900">Create New Recipe</h2>
-          <p className="mt-1 text-base text-gray-500">Fill in the details below to add a new recipe</p>
+          <p className="mt-1 text-sm text-gray-500">
+            Fill in the details below to add a new recipe
+          </p>
         </div>
-        <div className="bg-white rounded-xl shadow-card p-8">
+        
-          <RecipeForm initialTags={[]} onSubmit={handleSubmit} onCancel={() => navigate('/')} submitLabel="Create Recipe" />
+        <div className="bg-white rounded-lg shadow p-6">
-        </div>
+          <RecipeForm
-      </div>
+            initialTags={[]}
-    );
+            onSubmit={handleSubmit}
-  }
+            onCancel={() => navigate('/')}
-  // Recipe Not Found
+            submitLabel="Create Recipe"
-  if (!recipe) {
+          />
-    return (
-      <div className="max-w-md mx-auto bg-yellow-50 border border-yellow-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
-        <h3 className="text-xl text-yellow-800 font-bold mb-2">Recipe Not Found</h3>
-        <p className="text-yellow-600 text-base mb-2">The recipe you are looking for does not exist.</p>
-        <Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
-      </div>
-    );
-  }
-  // Edit Mode
-  if (isEditing) {
-    return (
-      <div className="max-w-2xl mx-auto pt-8">
-        <div className="mb-6 pb-1 border-b border-gray-200">
-          <h2 className="text-3xl font-bold text-gray-900">Edit Recipe</h2>
-          <p className="mt-1 text-base text-gray-500">Update recipe information below</p>
-        </div>
-        <div className="bg-white rounded-xl shadow-card p-8">
-          <RecipeForm recipe={recipe} initialTags={recipeTags} onSubmit={handleSubmit} onCancel={() => setIsEditing(false)} submitLabel="Save Changes" />
         </div>
       </div>
     );
   }
 
-  // View Recipe
+  // Recipe not found
+  if (!recipe) {
+    return (
+      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+        <h3 className="text-yellow-800 font-semibold mb-2">Recipe Not Found</h3>
+        <p className="text-yellow-600">The recipe you're looking for doesn't exist.</p>
+        <Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
+          ← Back to recipes
+        </Link>
+      </div>
+    );
+  }
+
+  // Edit mode
+  if (isEditing) {
+    return (
+      <div>
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">Edit Recipe</h2>
+          <p className="mt-1 text-sm text-gray-500">
+            Update recipe information
+          </p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <RecipeForm
+            recipe={recipe}
+            initialTags={recipeTags}
+            onSubmit={handleSubmit}
+            onCancel={() => setIsEditing(false)}
+            submitLabel="Save Changes"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // View mode
   return (
-    <div className="max-w-4xl mx-auto pt-8">
+    <div>
-      <div className="bg-white rounded-xl shadow-card p-8 mb-6 flex flex-col sm:flex-row items-start justify-between gap-6">
+      {/* Header with actions */}
-        <div className="flex-1 min-w-0">
+      <div className="mb-6 flex items-start justify-between">
-          <h2 className="text-4xl font-bold text-gray-900 mb-1 break-words">{recipe.title}</h2>
+        <div>
+          <h2 className="text-3xl font-bold text-gray-900">{recipe.title}</h2>
           {recipe.description && (
-            <p className="mt-1 text-lg text-gray-600 break-words">{recipe.description}</p>
+            <p className="mt-2 text-gray-600">{recipe.description}</p>
           )}
+          
+          {/* Tags display */}
           {recipeTags.length > 0 && (
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className="mt-3 flex flex-wrap gap-2">
               {recipeTags.map(tag => (
-                <span key={tag.id} className="px-3 py-1 rounded-full text-xs font-medium text-white shadow" style={{ backgroundColor: tag.color || '#3B82F6' }}>{tag.name}</span>
+                <span
+                  key={tag.id}
+                  className="px-3 py-1 rounded-full text-sm font-medium text-white"
+                  style={{ backgroundColor: tag.color || '#3B82F6' }}
+                >
+                  {tag.name}
+                </span>
               ))}
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-3 min-w-[120px]">
+        <div className="flex gap-2 ml-4">
-          <button onClick={() => setIsEditing(true)} className="w-full px-4 py-2 bg-primary text-white rounded-md shadow hover:bg-blue-700 font-medium transition-colors">Edit</button>
+          <button
-          <Link to={`/recipe/${recipe.id}/cook`} className="w-full px-4 py-2 bg-success text-white rounded-md shadow hover:bg-green-700 font-medium text-center transition-colors">Cook Mode</Link>
+            onClick={() => setIsEditing(true)}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
+          >
+            Edit
+          </button>
+          <Link
+            to={`/recipe/${recipe.id}/cook`}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"
+          >
+            Cook Mode
+          </Link>
           {!deleteConfirm ? (
-            <button onClick={() => setDeleteConfirm(true)} className="w-full px-4 py-2 bg-error text-white rounded-md shadow font-medium hover:bg-red-700 transition-colors">Delete</button>
+            <button
+              onClick={() => setDeleteConfirm(true)}
+              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 font-medium"
+            >
+              Delete
+            </button>
           ) : (
-            <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
-              <button onClick={handleDelete} disabled={isDeleting} className="w-full px-3 py-2 bg-error text-white rounded-md hover:bg-red-700 text-sm font-medium shadow disabled:bg-gray-400 disabled:cursor-not-allowed">{isDeleting ? 'Deleting...' : 'Confirm Delete'}</button>
+              <button
-              <button onClick={() => setDeleteConfirm(false)} disabled={isDeleting} className="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium shadow disabled:opacity-50 disabled:cursor-not-allowed">Cancel</button>
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className="px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-medium disabled:bg-gray-400 disabled:cursor-not-allowed"
+              >
+                {isDeleting ? 'Deleting...' : 'Confirm Delete'}
+              </button>
+              <button
+                onClick={() => setDeleteConfirm(false)}
+                disabled={isDeleting}
+                className="px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Cancel
+              </button>
             </div>
           )}
         </div>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 text-center">
+
+      {/* Metadata */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
         {recipe.servings && (
-          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500 mb-1">Servings</div>
+            <div className="text-sm text-gray-500">Servings</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.servings}</div>
           </div>
         )}
         {recipe.prep_time_minutes && (
-          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500 mb-1">Prep Time</div>
+            <div className="text-sm text-gray-500">Prep Time</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.prep_time_minutes} min</div>
           </div>
         )}
         {recipe.cook_time_minutes && (
-          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500 mb-1">Cook Time</div>
+            <div className="text-sm text-gray-500">Cook Time</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.cook_time_minutes} min</div>
           </div>
         )}
       </div>
+
+      {/* Main content */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="bg-white rounded-xl shadow-card p-6">
+        {/* Ingredients */}
-          <h3 className="text-xl font-semibold text-gray-900 mb-6">Ingredients</h3>
+        <div className="bg-white rounded-lg shadow p-6">
-          <ul className="space-y-3">
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Ingredients</h3>
-            {Array.isArray(recipe.ingredients) ? recipe.ingredients.map((ingredient, index) => (
+          <ul className="space-y-2">
-              <li key={index} className="flex items-center gap-3">
+            {recipe.ingredients.map((ingredient, index) => (
-                <span className="inline-block w-3 h-3 bg-primary rounded-full"></span>
+              <li key={index} className="flex items-start">
-                <span className="text-gray-800 font-mono text-base">{'item' in ingredient ? ingredient.item : ingredient}</span>
+                <span className="inline-block w-2 h-2 bg-blue-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
+                <span className="text-gray-700">{ingredient}</span>
               </li>
-            )) : null}
+            ))}
           </ul>
         </div>
-        <div className="bg-white rounded-xl shadow-card p-6">
+
-          <h3 className="text-xl font-semibold text-gray-900 mb-6">Instructions</h3>
+        {/* Instructions */}
-          <ol className="space-y-4 list-none">
+        <div className="bg-white rounded-lg shadow p-6">
-            {Array.isArray(recipe.instructions) ? recipe.instructions.map((instruction, index) => (
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Instructions</h3>
-              <li key={index} className="flex items-start gap-3">
+          <ol className="space-y-4">
-                <span className="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-base font-bold">{index + 1}</span>
+            {recipe.instructions.map((instruction, index) => (
-                <span className="text-gray-800 pt-[2px] text-base leading-6">{instruction}</span>
+              <li key={index} className="flex items-start">
+                <span className="inline-flex items-center justify-center w-6 h-6 bg-blue-600 text-white rounded-full text-sm font-bold mr-3 flex-shrink-0">
+                  {index + 1}
+                </span>
+                <span className="text-gray-700 pt-0.5">{instruction}</span>
               </li>
-            )) : null}
+            ))}
           </ol>
         </div>
       </div>
+
+      {/* Additional info */}
       {(recipe.source_url || recipe.notes) && (
-        <div className="mt-8 bg-white rounded-xl shadow-card p-6">
+        <div className="mt-6 bg-white rounded-lg shadow p-6">
-          <h3 className="text-xl font-semibold text-gray-900 mb-4">Additional Information</h3>
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Additional Information</h3>
+          
           {recipe.source_url && (
             <div className="mb-4">
               <div className="text-sm font-medium text-gray-700 mb-1">Source</div>
-              <a href={recipe.source_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:text-blue-700 underline break-all">{recipe.source_url}</a>
+              <a 
+                href={recipe.source_url} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:text-blue-700 underline break-all"
+              >
+                {recipe.source_url}
+              </a>
             </div>
           )}
+
           {recipe.notes && (
             <div>
               <div className="text-sm font-medium text-gray-700 mb-1">Notes</div>
-              <p className="text-gray-800 whitespace-pre-wrap">{recipe.notes}</p>
+              <p className="text-gray-700 whitespace-pre-wrap">{recipe.notes}</p>
             </div>
           )}
         </div>
       )}
-      <div className="mt-8 text-center">
+
-        <Link to="/" className="text-primary hover:text-blue-700 font-medium">← Back to all recipes</Link>
+      {/* Back button */}
+      <div className="mt-6">
+        <Link to="/" className="text-blue-600 hover:text-blue-700 font-medium">
+          ← Back to all recipes
+        </Link>
       </div>
     </div>
   );

frontend/src/pages/RecipeListPage.tsx

@@ -1,29 +1,24 @@
+/**
+ * RecipeListPage - Displays a list of all recipes with search and filtering
+ */
+
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecipes } from '../hooks/useRecipes';
 import { useTags } from '../hooks/useTags';
 import { RecipeCard } from '../components/RecipeCard';
 import { MissionControlPanel } from '../components/MissionControlPanel';
-import type { HarnessStatus } from '../types/recipe';
-import { radius } from '../theme';
-
-const emptyStatus: HarnessStatus = {
-  running: false,
-  version: '-',
-  uptime: 0,
-};
 
 export function RecipeListPage() {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
-
+  
   const { recipes, loading, error, hasMore, loadMore } = useRecipes({
     search: searchQuery,
     limit: 20,
-    tagId: selectedTagId,
   });
-
+  
   const { tags, loading: tagsLoading } = useTags();
 
   const handleSearch = (e: React.FormEvent) => {
@@ -42,122 +37,175 @@ export function RecipeListPage() {
     setSelectedTagId(null);
   };
 
+  // Note: This is client-side filtering. For better performance with large datasets,
+  // the backend should support tag filtering in the API.
+  // For now, when a tag is selected, we show all recipes with a note that this feature
+  // is in development. Full tag filtering will require fetching recipe-tag associations.
   const filteredRecipes = recipes;
+
   const hasActiveFilters = searchQuery || selectedTagId !== null;
 
   return (
-    <div className="max-w-6xl mx-auto pb-8">
+    <div>
-      <MissionControlPanel status={emptyStatus} />
+      <MissionControlPanel />
 
-      <div className="bg-white border rounded-xl shadow-card px-6 py-7 mt-8 mb-10 flex flex-col gap-4" style={{borderRadius: radius.lg, boxShadow: '0 2px 8px 0 rgba(28,30,34,0.07)'}}>
+      {/* Header */}
-        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+      <div className="mb-6">
+        <div className="flex justify-between items-center mb-4">
           <div>
-            <h2 className="text-2xl font-extrabold text-gray-900 mb-0">My Recipes</h2>
+            <h2 className="text-2xl font-bold text-gray-900">My Recipes</h2>
-            <p className="mt-1 text-sm text-gray-500">Browse and search your recipe collection</p>
+            <p className="mt-1 text-sm text-gray-500">
+              Browse and search your recipe collection
+            </p>
           </div>
           <Link
             to="/recipe/new"
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
-            style={{borderRadius: radius.md}}
           >
             + New Recipe
           </Link>
         </div>
 
-        {/* Search/Tag Filter Row */}
+        {/* Search Bar */}
-        <form onSubmit={handleSearch} className="flex flex-col md:flex-row items-stretch gap-3 mt-3 md:mt-0">
+        <form onSubmit={handleSearch} className="flex gap-2">
           <div className="flex-1 relative">
             <input
               type="text"
-              placeholder="Search recipes by title, ingredients, or tags..."
+              placeholder="Search recipes by title or ingredients..."
               value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
+              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-base"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              style={{borderRadius: radius.md}}
             />
-            {!!searchQuery && (
+            {searchQuery && (
               <button
                 type="button"
                 onClick={handleClearSearch}
                 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                 aria-label="Clear search"
-              >✕</button>
+              >
+                ✕
+              </button>
             )}
           </div>
           <button
             type="submit"
-            className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-semibold transition-colors border border-gray-200"
+            className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors"
-            style={{borderRadius: radius.md}}
           >
             Search
           </button>
         </form>
 
+        {/* Tag Filter */}
         {!tagsLoading && tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 items-center mt-0 md:mt-2">
+          <div className="mt-4">
-            <span className="text-sm text-gray-700 font-medium mr-1">Filter by tag:</span>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
-            <button
+              Filter by tag:
-              onClick={() => setSelectedTagId(null)}
+            </label>
-              className={selectedTagId === null
+            <div className="flex flex-wrap gap-2">
-                ? 'bg-blue-600 text-white px-3 py-1.5 rounded-full text-sm font-semibold shadow transition-colors outline-none'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-1.5 rounded-full text-sm font-medium transition-colors outline-none'}
-              style={{borderRadius: radius.full}}
-            >
-              All Recipes
-            </button>
-            {tags.map(tag => (
               <button
-                key={tag.id}
+                onClick={() => setSelectedTagId(null)}
-                onClick={() => setSelectedTagId(tag.id)}
+                className={`
-                className={selectedTagId === tag.id
+                  px-3 py-1.5 rounded-full text-sm font-medium transition-colors
-                  ? 'text-white bg-blue-600 px-3 py-1.5 rounded-full text-sm font-semibold shadow outline-none'
+                  ${selectedTagId === null
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-1.5 rounded-full text-sm font-medium transition-colors outline-none'}
+                    ? 'bg-blue-600 text-white'
-                style={{backgroundColor: selectedTagId === tag.id ? tag.color : '', borderRadius: radius.full}}
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  }
+                `}
               >
-                {tag.name}
+                All Recipes
               </button>
-            ))}
+              {tags.map(tag => (
+                <button
+                  key={tag.id}
+                  onClick={() => setSelectedTagId(tag.id)}
+                  className={`
+                    px-3 py-1.5 rounded-full text-sm font-medium transition-colors
+                    ${selectedTagId === tag.id
+                      ? 'text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    }
+                  `}
+                  style={
+                    selectedTagId === tag.id && tag.color
+                      ? { backgroundColor: tag.color }
+                      : {}
+                  }
+                >
+                  {tag.name}
+                </button>
+              ))}
+            </div>
           </div>
         )}
 
-        {/* Active Filters */}
         {hasActiveFilters && (
-          <div className="mt-2 flex items-center gap-3 text-sm">
+          <div className="mt-3 flex items-center gap-3 text-sm">
             <span className="text-gray-600">Active filters:</span>
-            {searchQuery && <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">Search: "{searchQuery}"</span>}
+            {searchQuery && (
-            {selectedTagId !== null && (
+              <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">
-              <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">Tag: {tags.find(t => t.id === selectedTagId)?.name}</span>
+                Search: "{searchQuery}"
+              </span>
             )}
-            <button onClick={handleClearFilters} className="text-blue-600 hover:text-blue-700 font-medium">Clear all filters</button>
+            {selectedTagId !== null && (
+              <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">
+                Tag: {tags.find(t => t.id === selectedTagId)?.name}
+              </span>
+            )}
+            <button
+              onClick={handleClearFilters}
+              className="text-blue-600 hover:text-blue-700 font-medium"
+            >
+              Clear all filters
+            </button>
+          </div>
+        )}
+
+        {selectedTagId !== null && (
+          <div className="mt-3 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+            <p className="text-sm text-yellow-800">
+              <strong>Note:</strong> Tag filtering is currently a work in progress. 
+              All recipes are shown below. Individual recipe tags can be viewed on their detail pages.
+            </p>
           </div>
         )}
       </div>
 
       {/* Error State */}
       {error && (
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4 my-6 text-center">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
-          <p className="text-red-800"><strong>Error:</strong> {error}</p>
+          <p className="text-red-800">
+            <strong>Error:</strong> {error}
+          </p>
         </div>
       )}
 
-      {/* Loading State */}
+      {/* Loading State (first load) */}
       {loading && recipes.length === 0 && (
-        <div className="text-center py-16">
+        <div className="text-center py-12">
-          <div className="inline-block animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600"></div>
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-          <p className="mt-4 text-gray-700 text-lg font-medium">Loading recipes...</p>
+          <p className="mt-4 text-gray-600">Loading recipes...</p>
         </div>
       )}
 
       {/* Empty State */}
       {!loading && !error && filteredRecipes.length === 0 && (
-        <div className="bg-gradient-to-br from-white to-blue-50 rounded-xl shadow-card p-14 text-center flex flex-col items-center gap-2 border border-dashed border-blue-200 mx-auto max-w-xl" style={{borderRadius: radius.lg}}>
+        <div className="bg-white rounded-lg shadow p-12 text-center">
-          <div className="text-6xl mb-2">🍳</div>
+          <div className="text-6xl mb-4">🍳</div>
-          <h3 className="text-xl font-bold text-gray-800 mb-2">{searchQuery ? 'No recipes found' : 'No recipes yet'}</h3>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">
-          <p className="text-gray-600 mb-4">{searchQuery
+            {searchQuery ? 'No recipes found' : 'No recipes yet'}
-            ? 'Try a different search term'
+          </h3>
-            : 'Get started by adding your first recipe.'}</p>
+          <p className="text-gray-600 mb-6">
+            {searchQuery
+              ? 'Try a different search term'
+              : 'Get started by adding your first recipe'}
+          </p>
           {!searchQuery && (
-            <Link to="/recipe/new" className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold shadow transition-colors" style={{borderRadius: radius.md}}>Add Your First Recipe</Link>
+            <Link
+              to="/recipe/new"
+              className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+            >
+              Add Your First Recipe
+            </Link>
           )}
         </div>
       )}
@@ -165,24 +213,27 @@ export function RecipeListPage() {
       {/* Recipe Grid */}
       {filteredRecipes.length > 0 && (
         <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {filteredRecipes.map((recipe) => (
-              <RecipeCard key={recipe.id} recipe={recipe} tags={recipe.tags} />
+              <RecipeCard key={recipe.id} recipe={recipe} />
             ))}
           </div>
+
+          {/* Load More Button */}
           {hasMore && (
             <div className="mt-8 text-center">
               <button
                 onClick={loadMore}
                 disabled={loading}
-                className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border"
+                className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                style={{borderRadius: radius.md}}
               >
                 {loading ? 'Loading...' : 'Load More'}
               </button>
             </div>
           )}
-          <div className="mt-7 text-center text-sm text-gray-500">
+
+          {/* Results summary */}
+          <div className="mt-6 text-center text-sm text-gray-500">
             Showing {filteredRecipes.length} recipe{filteredRecipes.length !== 1 ? 's' : ''}
           </div>
         </>

frontend/src/services/api.ts

@@ -1,14 +1,23 @@
+/**
+ * API client for Recipe Manager backend
+ */
+
 import type { Recipe, RecipeDraft, Tag, ApiResponse, UrlImportResult, HarnessStatus } from '../types/recipe';
 
+// Use relative URL - nginx will proxy to backend in production
+// For local development (npm run dev), configure vite.config.ts proxy
 const API_BASE_URL = '/api';
 
+/**
+ * Fetch recipes with optional filters
+ */
 export async function fetchRecipes(params?: {
   search?: string;
   offset?: number;
   limit?: number;
-  tagId?: number | null;
 }): Promise<Recipe[]> {
   const url = new URL(`${API_BASE_URL}/recipes`, window.location.origin);
+  
   if (params?.search) {
     url.searchParams.set('search', params.search);
   }
@@ -18,28 +27,261 @@ export async function fetchRecipes(params?: {
   if (params?.limit !== undefined) {
     url.searchParams.set('limit', params.limit.toString());
   }
-  if (params?.tagId !== undefined && params?.tagId !== null) {
+
-    url.searchParams.set('tagId', params.tagId.toString());
-  }
   const response = await fetch(url.toString());
   if (!response.ok) {
     throw new Error(`Failed to fetch recipes: ${response.statusText}`);
   }
+
   const result: ApiResponse<Recipe[]> = await response.json();
   if (!result.success || !result.data) {
     throw new Error(result.error || 'Failed to fetch recipes');
   }
+
   return result.data;
 }
 
-export async function fetchRecipe(id: number): Promise<Recipe> { return {} as any; }
+/**
-export async function createRecipe(recipe: RecipeDraft): Promise<Recipe> { return {} as any; }
+ * Fetch a single recipe by ID
-export async function updateRecipe(id: number, updates: Partial<Omit<Recipe, 'id' | 'created_at' | 'updated_at'>>): Promise<Recipe> { return {} as any; }
+ */
-export async function deleteRecipe(id: number): Promise<void> {}
+export async function fetchRecipe(id: number): Promise<Recipe> {
-export async function fetchTags(): Promise<Tag[]> { return []; }
+  const response = await fetch(`${API_BASE_URL}/recipes/${id}`);
-export async function createTag(tag: Omit<Tag, 'id'>): Promise<Tag> { return { id: 0, name: '', color: tag.color }; }
+  if (!response.ok) {
-export async function fetchRecipeTags(recipeId: number): Promise<Tag[]> { return []; }
+    throw new Error(`Failed to fetch recipe: ${response.statusText}`);
-export async function assignTagToRecipe(recipeId: number, tagId: number): Promise<void> {};
+  }
-export async function removeTagFromRecipe(recipeId: number, tagId: number): Promise<void> {};
+
-export async function importRecipeFromUrl(url: string): Promise<UrlImportResult> { return {title:'',ingredients:[],instructions:[]}; }
+  const result: ApiResponse<Recipe> = await response.json();
-export async function fetchHarnessStatus(): Promise<HarnessStatus> { return {running:false,version:'',uptime:0}; }
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to fetch recipe');
+  }
+
+  return result.data;
+}
+
+/**
+ * Create a new recipe
+ */
+export async function createRecipe(recipe: RecipeDraft): Promise<Recipe> {
+  const response = await fetch(`${API_BASE_URL}/recipes`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(recipe),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to create recipe: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<Recipe> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to create recipe');
+  }
+
+  return result.data;
+}
+
+/**
+ * Update a recipe
+ */
+export async function updateRecipe(id: number, updates: Partial<Omit<Recipe, 'id' | 'created_at' | 'updated_at'>>): Promise<Recipe> {
+  const response = await fetch(`${API_BASE_URL}/recipes/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(updates),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to update recipe: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<Recipe> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to update recipe');
+  }
+
+  return result.data;
+}
+
+/**
+ * Delete a recipe
+ */
+export async function deleteRecipe(id: number): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/recipes/${id}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to delete recipe: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<{ deleted: number }> = await response.json();
+  if (!result.success) {
+    throw new Error(result.error || 'Failed to delete recipe');
+  }
+}
+
+/**
+ * Fetch all tags
+ */
+export async function fetchTags(): Promise<Tag[]> {
+  const response = await fetch(`${API_BASE_URL}/tags`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch tags: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<Tag[]> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to fetch tags');
+  }
+
+  return result.data;
+}
+
+/**
+ * Create a new tag
+ */
+export async function createTag(tag: Omit<Tag, 'id'>): Promise<Tag> {
+  const response = await fetch(`${API_BASE_URL}/tags`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(tag),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to create tag: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<Tag> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to create tag');
+  }
+
+  return result.data;
+}
+
+/**
+ * Fetch tags for a specific recipe
+ */
+export async function fetchRecipeTags(recipeId: number): Promise<Tag[]> {
+  const response = await fetch(`${API_BASE_URL}/tags/recipes/${recipeId}/tags`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch recipe tags: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<Tag[]> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to fetch recipe tags');
+  }
+
+  return result.data;
+}
+
+/**
+ * Assign a tag to a recipe
+ */
+export async function assignTagToRecipe(recipeId: number, tagId: number): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/tags/recipes/${recipeId}/tags`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ tag_id: tagId }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to assign tag: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<{ assigned: boolean }> = await response.json();
+  if (!result.success) {
+    throw new Error(result.error || 'Failed to assign tag');
+  }
+}
+
+/**
+ * Remove a tag from a recipe
+ */
+export async function removeTagFromRecipe(recipeId: number, tagId: number): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/tags/recipes/${recipeId}/tags/${tagId}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to remove tag: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<{ removed: boolean }> = await response.json();
+  if (!result.success) {
+    throw new Error(result.error || 'Failed to remove tag');
+  }
+}
+
+/**
+ * Delete a tag
+ */
+export async function deleteTag(id: number): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/tags/${id}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to delete tag: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<{ id: number }> = await response.json();
+  if (!result.success) {
+    throw new Error(result.error || 'Failed to delete tag');
+  }
+}
+
+
+/**
+ * Import recipe data from URL
+ */
+export async function importRecipeFromUrl(url: string): Promise<UrlImportResult> {
+  const response = await fetch(`${API_BASE_URL}/import/url`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ url }),
+  });
+
+  const result: ApiResponse<UrlImportResult> = await response.json();
+
+  if (!response.ok) {
+    const errorMessage = typeof result.error === 'string'
+      ? result.error
+      : JSON.stringify(result.error ?? 'Failed to import URL');
+    throw new Error(errorMessage);
+  }
+
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to import URL');
+  }
+
+  return result.data;
+}
+
+/**
+ * Fetch harness mission-control status for progress visibility
+ */
+export async function fetchHarnessStatus(): Promise<HarnessStatus> {
+  const response = await fetch(`${API_BASE_URL}/harness/status`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch harness status: ${response.statusText}`);
+  }
+
+  const result: ApiResponse<HarnessStatus> = await response.json();
+  if (!result.success || !result.data) {
+    throw new Error(result.error || 'Failed to fetch harness status');
+  }
+
+  return result.data;
+}

frontend/src/theme.ts

@@ -1,54 +0,0 @@
-/** theme.ts - Defines visual theme tokens and utility styles across the Recipe Manager frontend */
-
-export const colors = {
-  primary: '#2563eb', // Tailwind blue-600
-  primaryDark: '#1d4ed8',
-  primaryLight: '#eff6ff',
-  accent: '#aa3bff',
-  success: '#16a34a',
-  warning: '#eab308',
-  error: '#dc2626',
-
-  bg: '#fff',
-  bgAlt: '#f9fafb', // Tailwind gray-50
-  surface: '#fcfcff',
-  border: '#e5e7eb', // Tailwind gray-200
-  text: '#374151', // Tailwind gray-700
-  textDim: '#6b7280',
-  textHeading: '#1e293b',
-  cardShadow: '0 2px 8px 0 rgba(28,30,34,0.08)',
-};
-
-export const radius = {
-  xs: '4px',
-  sm: '6px',
-  md: '10px',
-  lg: '16px',
-  full: '999px',
-};
-
-export const spacing = {
-  xs: '4px',
-  sm: '8px',
-  md: '16px',
-  lg: '24px',
-  xl: '40px',
-};
-
-export const shadows = {
-  card: '0 2px 8px 0 rgba(28,30,34,0.08)',
-  hover: '0 4px 20px 0 rgba(28,30,34,0.16)',
-};
-
-export const typography = {
-  fontFamily: {
-    sans: 'system-ui, Segoe UI, Roboto, sans-serif',
-    heading: 'system-ui, Segoe UI, Roboto, sans-serif',
-    mono: 'ui-monospace, Consolas, monospace',
-  },
-  fontWeight: {
-    regular: 400,
-    medium: 500,
-    bold: 700,
-  },
-};

frontend/src/types/api-aux.ts

@@ -1,55 +0,0 @@
-// DO NOT export Tag from api-aux, just reference via import type where needed
-export interface ApiResponse<T> {
-  success: boolean;
-  data: T | null;
-  error?: string | null;
-  meta?: any;
-}
-
-export interface RecipeDraft {
-  title: string;
-  description?: string;
-  servings?: number;
-  prep_time_minutes?: number;
-  cook_time_minutes?: number;
-  source_url?: string;
-  ingredients: { item: string; quantity?: string | null; unit?: string | null; notes?: string | null }[];
-  instructions: string[];
-  tagIds?: number[];
-  notes?: string;
-}
-
-export interface UrlImportResult {
-  title: string;
-  source_url?: string;
-  json_ld_blocks?: any[];
-  draft_recipe?: RecipeDraft;
-  ingredients: string[];
-  instructions: string[];
-}
-
-export interface HarnessStatus {
-  running: boolean;
-  version: string;
-  uptime: number;
-  // Following are frontend UI specific, do not break DB
-  keepalive?: {
-    status?: string;
-    activeSessionLabel?: string;
-    heartbeatAgeSeconds?: number;
-  };
-  commit?: {
-    hash: string;
-    relative: string;
-  };
-  todo?: {
-    checked: number;
-    unchecked: number;
-    nextTask?: string;
-  };
-  workerHeartbeatHistory?: Array<{
-    timestamp: string;
-    step?: string;
-    status?: string;
-  }>;
-}

frontend/src/types/recipe.ts

@@ -1,72 +1,99 @@
-import type { ApiResponse, RecipeDraft, UrlImportResult, HarnessStatus } from './api-aux';
+/**
-import type { Tag } from './tag';
+ * Recipe data model matching backend schema
-
+ */
-export type { ApiResponse, RecipeDraft, UrlImportResult, HarnessStatus };
-// Only import Tag from tag.ts
-export type { Tag };
-
-export interface Ingredient {
-  id: number;
-  recipe_id: number;
-  position: number;
-  quantity?: string | null;
-  unit?: string | null;
-  item: string;
-  notes?: string | null;
-}
-
-export interface Step {
-  id: number;
-  recipe_id: number;
-  position: number;
-  instruction: string;
-}
-
 export interface Recipe {
   id: number;
-  title: string;
-  description: string | null;
-  servings: number | null;
-  prep_time_minutes: number | null;
-  cook_time_minutes: number | null;
-  source_url: string | null;
-  created_at: number;
-  updated_at: number;
-  ingredients: Ingredient[];
-  steps: Step[];
-  tags: Tag[];
-  last_cooked_at?: number | null;
-  notes?: string | null;
-  instructions?: string[]; // For FE compatibility only
-}
-
-export interface CreateRecipeInput {
   title: string;
   description?: string;
+  ingredients: string[]; // JSON array from backend
+  instructions: string[]; // JSON array of steps
+  source_url?: string;
+  notes?: string;
   servings?: number;
   prep_time_minutes?: number;
   cook_time_minutes?: number;
+  created_at: number; // Unix timestamp
+  updated_at: number;
+  last_cooked_at?: number;
+}
+
+/**
+ * Recipe payload used for create/import/edit-before-save flows
+ */
+export interface RecipeDraft {
+  title: string;
+  description?: string;
+  ingredients: string[];
+  instructions: string[];
   source_url?: string;
-  ingredients: Partial<Omit<Ingredient, "id" | "recipe_id"> & { position?: number }>;
+  notes?: string;
-  steps: Partial<Omit<Step, "id" | "recipe_id"> & { position?: number }>;
+  servings?: number;
-  tagIds?: number[];
+  prep_time_minutes?: number;
+  cook_time_minutes?: number;
 }
 
-export interface UpdateRecipeInput {
+/**
-  title?: string;
+ * Tag data model
-  description?: string | null;
+ */
-  servings?: number | null;
+export interface Tag {
-  prep_time_minutes?: number | null;
+  id: number;
-  cook_time_minutes?: number | null;
+  name: string;
-  source_url?: string | null;
+  color?: string; // Hex color for UI
-  ingredients?: Partial<Omit<Ingredient, "id" | "recipe_id"> & { position?: number }>[];
-  steps?: Partial<Omit<Step, "id" | "recipe_id"> & { position?: number }>[];
-  tagIds?: number[];
 }
 
-export interface RecipeFilters {
+/**
-  search?: string;
+ * API response wrapper
-  offset?: number;
+ */
-  limit?: number;
+export interface ApiResponse<T> {
-  tagId?: number | null;
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+
+/**
+ * URL import result returned by backend import endpoint
+ */
+export interface UrlImportResult {
+  source_url: string;
+  html: string;
+  json_ld_blocks: string[];
+  draft_recipe: RecipeDraft | null;
+}
+
+export interface HarnessStatus {
+  projectRoot: string;
+  commit: {
+    hash: string;
+    message: string;
+    timestamp: string;
+    relative: string;
+  } | null;
+  todo: {
+    checked: number;
+    unchecked: number;
+    nextTask: string | null;
+  };
+  keepalive: {
+    checkedAt?: string;
+    status?: string;
+    heartbeatAgeSeconds?: number | null;
+    lastStep?: string | null;
+    historyCount?: number;
+    shouldRecover?: boolean;
+    activeSessionLabel?: string | null;
+    reason?: string;
+  };
+  workerHeartbeat: {
+    timestamp?: string;
+    step?: string;
+    status?: string;
+    note?: string;
+  } | null;
+  workerHeartbeatHistory: Array<{
+    timestamp?: string;
+    step?: string;
+    status?: string;
+    note?: string;
+  }>;
 }

frontend/src/types/tag.ts

@@ -1,5 +0,0 @@
-export interface Tag {
-  id: number;
-  name: string;
-  color?: string; // Allow optional color for FE (not persisted in DB, but used in tag creation UI)
-}

frontend/tailwind.config.js

@@ -5,31 +5,7 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
+    extend: {},
-      borderRadius: {
-        xs: '4px',
-        sm: '6px',
-        md: '10px',
-        lg: '16px',
-        full: '999px',
-      },
-      boxShadow: {
-        card: '0 2px 8px 0 rgba(28,30,34,0.08)',
-        hover: '0 4px 20px 0 rgba(28,30,34,0.16)',
-      },
-      colors: {
-        primary: '#2563eb',
-        accent: '#aa3bff',
-        success: '#16a34a',
-        warning: '#eab308',
-        error: '#dc2626',
-      },
-      fontFamily: {
-        sans: ['system-ui', 'Segoe UI', 'Roboto', 'sans-serif'],
-        heading: ['system-ui', 'Segoe UI', 'Roboto', 'sans-serif'],
-        mono: ['ui-monospace', 'Consolas', 'monospace'],
-      },
-    },
   },
   plugins: [],
 }

migrations/2026-03-25-schema-migration.md

@@ -1,61 +0,0 @@
-# Recipe Manager DB Schema Migration — 2026-03-25
-
-## Schema Diff (current → MVP target)
-
-The current schema (src/backend/db/schema.sql) differs from the Step 2 MVP spec in docs/recipe-manager-mvp-plan.md as follows:
-
-### **recipes** table
-**Current:**
-- Has columns: id, title, description, ingredients (JSON), instructions (JSON), source_url, notes, servings, prep_time_minutes, cook_time_minutes, created_at (INTEGER), updated_at (INTEGER), last_cooked_at
-
-**Target:**
-- Should be normalized: No JSON columns for ingredients/instructions. Should instead link to separate ingredients and steps tables via recipe_id FK.
-- Remove: ingredients, instructions, notes, last_cooked_at columns.
-- created_at and updated_at should be DATETIME.
-
-### **ingredients** table
-- Does NOT exist in current schema. **Add ingredients table:**
-  - id (PK)
-  - recipe_id (FK)
-  - position (INTEGER)
-  - quantity (TEXT)
-  - unit (TEXT)
-  - item (TEXT, required)
-  - notes (TEXT)
-
-### **steps** table
-- Does NOT exist. **Add steps table:**
-  - id (PK)
-  - recipe_id (FK)
-  - position (INTEGER)
-  - instruction (TEXT, required)
-
-### **tags/recipe_tags**
-- Already present (mostly matches spec)
-- Remove color column from tags (not in MVP spec)
-- "name" should be unique and required (already declared)
-
-### **Indexes**
-- Add idx_ingredients_item on ingredients(item)
-- Add idx_recipe_tags_tag_id on recipe_tags(tag_id) (already present)
-
----
-
-## Migration Steps
-1. Create new **ingredients** and **steps** tables
-2. Populate ingredients & steps tables from JSON columns of recipes
-3. Migrate tags: drop color column from tags (if exists)
-4. Drop ingredients, instructions, notes, last_cooked_at columns from recipes
-5. Change created_at, updated_at columns to DATETIME
-6. Add new indexes (ingredients(item))
-7. Update test data and migration documentation
-
----
-
-## Notes
-- This migration normalizes the schema: recipes → ingredients & steps as separate tables
-- Data in existing recipes.ingredients and instructions must be extracted and split into new tables
-
----
-
-## Status: _DRAFT — pending implementation_

scripts/__tests__/morning-report.test.ts

@@ -1,84 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-
-const { readMock, pendingMock } = vi.hoisted(() => ({
-  readMock: vi.fn(),
-  pendingMock: vi.fn(),
-}));
-
-vi.mock('../../src/backend/services/WorkflowStatusManager', () => ({
-  WorkflowStatusManager: vi.fn().mockImplementation(() => ({
-    read: readMock,
-  })),
-}));
-
-vi.mock('../../src/backend/services/PhaseUpdateQueue', () => ({
-  getPendingPhaseUpdates: pendingMock,
-}));
-
-import main from '../morning-report';
-
-describe('morning-report', () => {
-  let consoleSpy: any;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    consoleSpy.mockRestore();
-  });
-
-  it('detects stalled workflow and formats report', async () => {
-    const now = new Date('2026-03-26T18:00:00.000Z');
-    readMock.mockResolvedValue({
-      currentPhase: 'parse',
-      overallStatus: 'running',
-      lastUpdated: '2026-03-26T16:00:00.000Z',
-      lastFailureReason: null,
-      nextAction: '',
-      completedPhases: ['a'],
-    });
-    pendingMock.mockResolvedValue([
-      {
-        id: 'foo',
-        eventType: 'phase_started',
-        phase: 'parse',
-        timestamp: '2026-03-26T16:00:00.000Z',
-        summary: 'Phase parse started',
-        relayStatus: 'pending',
-      },
-    ]);
-    await main({
-      commitWindowHours: 24,
-      stalledThresholdMinutes: 60,
-      now,
-      getRecentCommitsFn: async () => [
-        { hash: 'abc123', msg: 'test commit', date: '2026-03-26T10:00:00.000Z' },
-      ],
-    });
-
-    const output = consoleSpy.mock.calls[0][0] as string;
-    expect(output).toContain('⚠️ Workflow Stalled');
-    expect(output).toContain('abc123');
-    expect(output).toContain('[phase_started]');
-    expect(output).toContain('[id: foo]');
-  });
-
-  it('shows empty/no-status states', async () => {
-    const now = new Date('2026-03-26T11:00:00.000Z');
-    readMock.mockResolvedValue(null);
-    pendingMock.mockResolvedValue([]);
-    await main({
-      commitWindowHours: 24,
-      stalledThresholdMinutes: 60,
-      now,
-      getRecentCommitsFn: async () => [],
-    });
-
-    const output = consoleSpy.mock.calls[0][0] as string;
-    expect(output).toContain('(No commits in window)');
-    expect(output).toContain('No workflow status available');
-    expect(output).toContain('All phase updates relayed');
-  });
-});

scripts/morning-report.ts

@@ -1,147 +0,0 @@
-#!/usr/bin/env ts-node
-import { WorkflowStatusManager } from '../src/backend/services/WorkflowStatusManager';
-import { getPendingPhaseUpdates } from '../src/backend/services/PhaseUpdateQueue';
-import * as path from 'path';
-
-// Configurable recency window in hours for recent commits
-type ReportConfig = {
-  commitWindowHours?: number;
-  statusPath?: string;
-  phaseUpdatesPath?: string;
-  stalledThresholdMinutes?: number;
-  now?: Date;
-  getRecentCommitsFn?: (windowHours: number) => Promise<{hash: string; msg: string; date: string}[]>;
-};
-
-const DEFAULT_STATUS_PATH = path.join(process.cwd(), 'status/workflow-status.json');
-const DEFAULT_PHASE_UPDATES_PATH = path.join(process.cwd(), 'status/phase-updates.jsonl');
-const DEFAULT_STALLED_THRESHOLD_MINUTES = 60;
-
-export async function getRecentCommits(windowHours: number): Promise<{hash: string, msg: string, date: string}[]> {
-  const sinceArg = `--since='${windowHours} hours ago'`;
-  const cmd = `git log --oneline --date=iso --pretty=format:'%h|%s|%cd' ${sinceArg}`;
-  const { exec } = require('child_process');
-  return new Promise((resolve) => {
-    exec(cmd, { cwd: process.cwd() }, (err: any, stdout: string) => {
-      if (err) return resolve([]);
-      const lines = stdout.trim().split(/\n/);
-      const result = lines.filter(Boolean).map((line: string) => {
-        const [hash, msg, date] = line.split('|');
-        return {hash, msg, date};
-      });
-      resolve(result);
-    });
-  });
-}
-
-function minutesBetween(a: Date, b: Date): number {
-  return Math.abs((a.getTime() - b.getTime()) / 60000);
-}
-
-function detectStalled(status: any, thresholdMinutes: number, now: Date): {stalled: boolean; reason?: string; recommend?: string} {
-  if (!status) return {stalled: false};
-  if (["completed", "failed", "idle"].includes(status.overallStatus)) return {stalled: false};
-  const last = new Date(status.lastUpdated);
-  const mins = minutesBetween(now, last);
-  if (mins >= thresholdMinutes) {
-    return {
-      stalled: true,
-      reason: `No progress in ${mins.toFixed(0)} minutes (threshold: ${thresholdMinutes}m). Last update: ${last.toISOString()}`,
-      recommend: status.overallStatus === "blocked" ? "Manual intervention may be required. See blockers below." : "Restart or debug orchestrator."
-    };
-  }
-  return {stalled: false};
-}
-
-function extractBlockers(status: any): string[] {
-  const out: string[] = [];
-  if (!status) return out;
-  if (status.overallStatus === 'blocked') {
-    if (status.lastFailureReason) out.push(`❗ Blocked: ${status.lastFailureReason}`);
-    else out.push(`❗ Blocked: Reason not specified.`);
-  }
-  if (status.overallStatus === 'failed') {
-    out.push('❌ Workflow failed.');
-    if (status.lastFailureReason) out.push(`Failure: ${status.lastFailureReason}`);
-  }
-  if (status.nextAction && status.nextAction.includes('manual')) {
-    out.push(`⚠️ Manual intervention required: ${status.nextAction}`);
-  }
-  return out;
-}
-
-async function main(config: ReportConfig = {}) {
-  const commitWindow = config.commitWindowHours || 24;
-  const statusPath = config.statusPath || DEFAULT_STATUS_PATH;
-  const phaseUpdatesPath = config.phaseUpdatesPath || DEFAULT_PHASE_UPDATES_PATH;
-  const threshold = config.stalledThresholdMinutes || DEFAULT_STALLED_THRESHOLD_MINUTES;
-  const now = config.now || new Date();
-
-  // 1. Recent commits
-  const commits = await (config.getRecentCommitsFn || getRecentCommits)(commitWindow);
-
-  // 2. Workflow status
-  const wsm = new WorkflowStatusManager(statusPath);
-  const status = await wsm.read();
-
-  // 3. Blockers
-  const blockers = extractBlockers(status);
-
-  // 4. Pending phase updates
-  const pendingUpdates = await getPendingPhaseUpdates();
-
-  // 5. Stalled-state detection
-  const stalled = detectStalled(status, threshold, now);
-
-  // Render report
-  let out = `# 🌅 Morning Workflow Report\n`;
-
-  out += `\n## Recent Commits (last ${commitWindow}h)\n`;
-  if (commits.length > 0) {
-    for (const c of commits) {
-      out += `- \`${c.hash}\` ${c.msg} _(at ${c.date})_\n`;
-    }
-  } else {
-    out += '(No commits in window)\n';
-  }
-
-  out += `\n## Workflow Status\n`;
-  if (status) {
-    out += `- Current phase: **${status.currentPhase || '—'}**\n`;
-    out += `- State: **${status.overallStatus}**\n`;
-    out += `- Last updated: ${status.lastUpdated}\n`;
-    if (status.completedPhases && status.completedPhases.length)
-      out += `- Completed phases: ${status.completedPhases.join(', ')}\n`;
-  } else {
-    out += '- No workflow status available.\n';
-  }
-
-  if (stalled.stalled) {
-    out += `\n## ⚠️ Workflow Stalled\n- Reason: ${stalled.reason}\n- Recommendation: ${stalled.recommend}\n`;
-  }
-
-  if (blockers.length > 0) {
-    out += `\n## Blockers\n`;
-    for (const b of blockers) {
-      out += `- ${b}\n`;
-    }
-  }
-
-  out += `\n## Pending Phase Updates\n`;
-  if (pendingUpdates.length > 0) {
-    for (const e of pendingUpdates) {
-      out += `- [${e.eventType}] ${e.summary} (phase: ${e.phase}) at ${e.timestamp} [id: ${e.id}]\n`;
-    }
-  } else {
-    out += '(All phase updates relayed)\n';
-  }
-
-  console.log(out);
-}
-
-// CLI wrapper
-if (require.main === module) {
-  main();
-}
-
-export default main;

src/backend/db/schema.sql

@@ -1,46 +1,28 @@
--- SCHEMA VERSION: 2026-03-25 — MVP-NORMALIZED
+-- Create recipes table
-
--- Recipes table (normalized)
 CREATE TABLE recipes (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   title TEXT NOT NULL,
   description TEXT,
+  ingredients TEXT NOT NULL, -- JSON array
+  instructions TEXT NOT NULL, -- JSON array of steps
+  source_url TEXT,
+  notes TEXT,
   servings INTEGER,
   prep_time_minutes INTEGER,
   cook_time_minutes INTEGER,
-  source_url TEXT,
+  created_at INTEGER NOT NULL,
-  created_at DATETIME NOT NULL,
+  updated_at INTEGER NOT NULL,
-  updated_at DATETIME NOT NULL
+  last_cooked_at INTEGER
 );
 
--- Ingredients table
+-- Create tags table
-CREATE TABLE ingredients (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  recipe_id INTEGER NOT NULL,
-  position INTEGER,
-  quantity TEXT,
-  unit TEXT,
-  item TEXT NOT NULL,
-  notes TEXT,
-  FOREIGN KEY (recipe_id) REFERENCES recipes(id) ON DELETE CASCADE
-);
-
--- Steps table
-CREATE TABLE steps (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  recipe_id INTEGER NOT NULL,
-  position INTEGER,
-  instruction TEXT NOT NULL,
-  FOREIGN KEY (recipe_id) REFERENCES recipes(id) ON DELETE CASCADE
-);
-
--- Tags table (no color)
 CREATE TABLE tags (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
-  name TEXT UNIQUE NOT NULL
+  name TEXT UNIQUE NOT NULL,
+  color TEXT -- Hex color for UI
 );
 
--- Recipe_tags join table
+-- Create recipe_tags join table
 CREATE TABLE recipe_tags (
   recipe_id INTEGER NOT NULL,
   tag_id INTEGER NOT NULL,
@@ -49,7 +31,8 @@ CREATE TABLE recipe_tags (
   FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
 );
 
--- Indexes
+-- Indexes for efficiency
 CREATE INDEX idx_recipes_title ON recipes(title);
-CREATE INDEX idx_ingredients_item ON ingredients(item);
+CREATE INDEX idx_recipes_created_at ON recipes(created_at DESC);
-CREATE INDEX idx_recipe_tags_tag_id ON recipe_tags(tag_id);
+CREATE INDEX idx_recipe_tags_recipe ON recipe_tags(recipe_id);
+CREATE INDEX idx_recipe_tags_tag ON recipe_tags(tag_id);

src/backend/repositories/RecipeRepository.ts

@@ -1,203 +1,199 @@
 import type { Database, SqlValue } from 'sql.js';
-import type { Recipe, CreateRecipeInput, UpdateRecipeInput, RecipeFilters, Ingredient, Step } from '../types/recipe.js';
+import type { Recipe, CreateRecipeInput, UpdateRecipeInput, RecipeFilters } from '../types/recipe.js';
-import type { Tag } from '../types/tag.js';
 
+/**
+ * RecipeRepository handles all database operations for recipes.
+ */
 export class RecipeRepository {
   constructor(private db: Database) {}
 
-  private toNullableSql(value: string | null | undefined): SqlValue {
+  /**
-    return value ?? null;
+   * Find all recipes with optional filtering and pagination
-  }
+   */
-
-  private toRequiredSqlText(value: string | null | undefined, fieldName: string): string {
-    if (value === undefined || value === null || value.trim() === '') {
-      throw new Error(`${fieldName} is required`);
-    }
-    return value;
-  }
-
   findAll(filters: RecipeFilters = {}): Recipe[] {
-    const { search, tagId, offset = 0, limit = 50 } = filters as any;
+    const { search, offset = 0, limit = 50 } = filters;
-    let sql = `SELECT DISTINCT r.* FROM recipes r 
-      LEFT JOIN ingredients i ON r.id = i.recipe_id 
-      LEFT JOIN recipe_tags rt ON r.id = rt.recipe_id 
-      LEFT JOIN tags t ON rt.tag_id = t.id`;
-    const clauses: string[] = [];
-    const params: SqlValue[] = [];
     
+    let sql = 'SELECT * FROM recipes';
+    const params: SqlValue[] = [];
+
     if (search) {
-      const s = `%${search}%`;
+      sql += ' WHERE title LIKE ? OR description LIKE ? OR ingredients LIKE ?';
-      clauses.push(`(r.title LIKE ? OR r.description LIKE ? OR i.item LIKE ? OR t.name LIKE ?)`);
+      const searchPattern = `%${search}%`;
-      params.push(s, s, s, s);
+      params.push(searchPattern, searchPattern, searchPattern);
     }
-    if (tagId !== undefined && tagId !== null) {
+
-      clauses.push('rt.tag_id = ?');
+    sql += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
-      params.push(tagId);
-    }
-    if (clauses.length > 0) {
-      sql += ' WHERE ' + clauses.join(' AND ');
-    }
-    sql += ' ORDER BY r.created_at DESC LIMIT ? OFFSET ?';
     params.push(limit, offset);
+
     const result = this.db.exec(sql, params);
     if (!result.length) return [];
-    return result[0].values.map(row => this.assembleRecipe(row, result[0].columns));
+
+    return this.rowsToRecipes(result[0]);
   }
 
+  /**
+   * Find a recipe by ID
+   */
   findById(id: number): Recipe | null {
     const result = this.db.exec('SELECT * FROM recipes WHERE id = ?', [id]);
     if (!result.length || !result[0].values.length) return null;
-    return this.assembleRecipe(result[0].values[0], result[0].columns);
+
+    const recipes = this.rowsToRecipes(result[0]);
+    return recipes[0] || null;
   }
 
+  /**
+   * Create a new recipe
+   */
   create(input: CreateRecipeInput): Recipe {
     const now = Math.floor(Date.now() / 1000);
-    this.db.run(
+    
-      `INSERT INTO recipes (title, description, servings, prep_time_minutes, cook_time_minutes, source_url, created_at, updated_at)
+    const sql = `
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+      INSERT INTO recipes (
-      [input.title, input.description ?? null, input.servings ?? null, input.prep_time_minutes ?? null, input.cook_time_minutes ?? null, input.source_url ?? null, now, now]
+        title, description, ingredients, instructions, 
-    );
+        source_url, notes, servings, prep_time_minutes, 
-    const id = this.db.exec('SELECT last_insert_rowid() as id')[0].values[0][0] as number;
+        cook_time_minutes, created_at, updated_at
-    if (input.ingredients) {
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-      input.ingredients.forEach((ing, i) => {
+    `;
-        this.db.run('INSERT INTO ingredients (recipe_id, position, quantity, unit, item, notes) VALUES (?, ?, ?, ?, ?, ?)',
+
-          [
+    this.db.run(sql, [
-            id,
+      input.title,
-            i,
+      input.description || null,
-            this.toNullableSql(ing.quantity),
+      JSON.stringify(input.ingredients),
-            this.toNullableSql(ing.unit),
+      JSON.stringify(input.instructions),
-            this.toRequiredSqlText(ing.item, 'ingredient.item'),
+      input.source_url || null,
-            this.toNullableSql(ing.notes)
+      input.notes || null,
-          ]);
+      input.servings || null,
-      });
+      input.prep_time_minutes || null,
-    }
+      input.cook_time_minutes || null,
-    if (input.steps) {
+      now,
-      input.steps.forEach((step, i) => {
+      now,
-        this.db.run('INSERT INTO steps (recipe_id, position, instruction) VALUES (?, ?, ?)',
+    ]);
-          [id, i, this.toRequiredSqlText(step.instruction, 'step.instruction')]);
+
-      });
+    // Get the last inserted ID
-    }
+    const result = this.db.exec('SELECT last_insert_rowid() as id');
-    if (input.tagIds && input.tagIds.length > 0) {
+    const id = result[0].values[0][0] as number;
-      input.tagIds.forEach(tagId => {
+
-        this.db.run('INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (?, ?)', [id, tagId]);
-      });
-    }
     return this.findById(id)!;
   }
 
+  /**
+   * Update an existing recipe
+   */
   update(id: number, input: UpdateRecipeInput): Recipe | null {
     const existing = this.findById(id);
     if (!existing) return null;
+
     const now = Math.floor(Date.now() / 1000);
     const fields: string[] = [];
     const params: SqlValue[] = [];
-    if (input.title !== undefined) { fields.push('title = ?'); params.push(input.title); }
+
-    if (input.description !== undefined) { fields.push('description = ?'); params.push(input.description); }
+    // Build dynamic UPDATE query based on provided fields
-    if (input.servings !== undefined) { fields.push('servings = ?'); params.push(input.servings); }
+    if (input.title !== undefined) {
-    if (input.prep_time_minutes !== undefined) { fields.push('prep_time_minutes = ?'); params.push(input.prep_time_minutes); }
+      fields.push('title = ?');
-    if (input.cook_time_minutes !== undefined) { fields.push('cook_time_minutes = ?'); params.push(input.cook_time_minutes); }
+      params.push(input.title);
-    if (input.source_url !== undefined) { fields.push('source_url = ?'); params.push(input.source_url); }
+    }
-    fields.push('updated_at = ?'); params.push(now);
+    if (input.description !== undefined) {
-    params.push(id);
+      fields.push('description = ?');
-    this.db.run(`UPDATE recipes SET ${fields.join(', ')} WHERE id = ?`, params);
+      params.push(input.description);
+    }
     if (input.ingredients !== undefined) {
-      this.db.run('DELETE FROM ingredients WHERE recipe_id = ?', [id]);
+      fields.push('ingredients = ?');
-      input.ingredients.forEach((ing, i) => {
+      params.push(JSON.stringify(input.ingredients));
-        this.db.run('INSERT INTO ingredients (recipe_id, position, quantity, unit, item, notes) VALUES (?, ?, ?, ?, ?, ?)',
-          [
-            id,
-            i,
-            this.toNullableSql(ing.quantity),
-            this.toNullableSql(ing.unit),
-            this.toRequiredSqlText(ing.item, 'ingredient.item'),
-            this.toNullableSql(ing.notes)
-          ]);
-      });
     }
-    if (input.steps !== undefined) {
+    if (input.instructions !== undefined) {
-      this.db.run('DELETE FROM steps WHERE recipe_id = ?', [id]);
+      fields.push('instructions = ?');
-      input.steps.forEach((step, i) => {
+      params.push(JSON.stringify(input.instructions));
-        this.db.run('INSERT INTO steps (recipe_id, position, instruction) VALUES (?, ?, ?)', [id, i, this.toRequiredSqlText(step.instruction, 'step.instruction')]);
-      });
     }
-    if (input.tagIds !== undefined) {
+    if (input.source_url !== undefined) {
-      this.db.run('DELETE FROM recipe_tags WHERE recipe_id = ?', [id]);
+      fields.push('source_url = ?');
-      input.tagIds.forEach(tagId => {
+      params.push(input.source_url);
-        this.db.run('INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (?, ?)', [id, tagId]);
-      });
     }
+    if (input.notes !== undefined) {
+      fields.push('notes = ?');
+      params.push(input.notes);
+    }
+    if (input.servings !== undefined) {
+      fields.push('servings = ?');
+      params.push(input.servings);
+    }
+    if (input.prep_time_minutes !== undefined) {
+      fields.push('prep_time_minutes = ?');
+      params.push(input.prep_time_minutes);
+    }
+    if (input.cook_time_minutes !== undefined) {
+      fields.push('cook_time_minutes = ?');
+      params.push(input.cook_time_minutes);
+    }
+
+    // Always update updated_at
+    fields.push('updated_at = ?');
+    params.push(now);
+
+    // Add ID to params for WHERE clause
+    params.push(id);
+
+    const sql = `UPDATE recipes SET ${fields.join(', ')} WHERE id = ?`;
+    this.db.run(sql, params);
+
     return this.findById(id);
   }
 
+  /**
+   * Delete a recipe
+   */
   delete(id: number): boolean {
     const existing = this.findById(id);
     if (!existing) return false;
+
     this.db.run('DELETE FROM recipes WHERE id = ?', [id]);
     return true;
   }
 
+  /**
+   * Count total recipes (for pagination)
+   */
   count(filters: RecipeFilters = {}): number {
-    const { search, tagId } = filters as any;
+    const { search } = filters;
-    let sql = `SELECT COUNT(DISTINCT r.id) as count FROM recipes r 
+    
-      LEFT JOIN ingredients i ON r.id = i.recipe_id 
+    let sql = 'SELECT COUNT(*) as count FROM recipes';
-      LEFT JOIN recipe_tags rt ON r.id = rt.recipe_id 
-      LEFT JOIN tags t ON rt.tag_id = t.id`;
-    const clauses: string[] = [];
     const params: SqlValue[] = [];
+
     if (search) {
-      const s = `%${search}%`;
+      sql += ' WHERE title LIKE ? OR description LIKE ? OR ingredients LIKE ?';
-      clauses.push("(r.title LIKE ? OR r.description LIKE ? OR i.item LIKE ? OR t.name LIKE ?)");
+      const searchPattern = `%${search}%`;
-      params.push(s, s, s, s);
+      params.push(searchPattern, searchPattern, searchPattern);
-    }
-    if (tagId !== undefined && tagId !== null) {
-      clauses.push('rt.tag_id = ?');
-      params.push(tagId);
-    }
-    if (clauses.length > 0) {
-      sql += ' WHERE ' + clauses.join(' AND ');
     }
+
     const result = this.db.exec(sql, params);
     return result[0].values[0][0] as number;
   }
 
-  private assembleRecipe(row: SqlValue[], columns: string[]): Recipe {
+  /**
-    const map: Record<string, SqlValue> = {};
+   * Convert sql.js result rows to Recipe objects
-    columns.forEach((col, idx) => { map[col] = row[idx]; });
+   */
-    const id = map.id as number;
+  private rowsToRecipes(result: { columns: string[]; values: SqlValue[][] }): Recipe[] {
-    const ingredientsRes = this.db.exec('SELECT * FROM ingredients WHERE recipe_id = ? ORDER BY position ASC', [id]);
+    return result.values.map((row) => {
-    const ingredients: Ingredient[] = ingredientsRes.length ?
+      const recipe: Record<string, SqlValue> = {};
-      ingredientsRes[0].values.map(r => ({
+      result.columns.forEach((col, idx) => {
-        id: r[0] as number,
+        recipe[col] = row[idx];
-        recipe_id: r[1] as number,
+      });
-        position: r[2] as number,
+
-        quantity: typeof r[3] === 'undefined' ? null : r[3] as string,
+      return {
-        unit: typeof r[4] === 'undefined' ? null : r[4] as string,
+        id: recipe.id as number,
-        item: r[5] as string,
+        title: recipe.title as string,
-        notes: typeof r[6] === 'undefined' ? null : r[6] as string }))
+        description: recipe.description as string | null,
-      : [];
+        ingredients: JSON.parse(recipe.ingredients as string) as string[],
-    const stepsRes = this.db.exec('SELECT * FROM steps WHERE recipe_id = ? ORDER BY position ASC', [id]);
+        instructions: JSON.parse(recipe.instructions as string) as string[],
-    const steps: Step[] = stepsRes.length ?
+        source_url: recipe.source_url as string | null,
-      stepsRes[0].values.map(r => ({
+        notes: recipe.notes as string | null,
-        id: r[0] as number,
+        servings: recipe.servings as number | null,
-        recipe_id: r[1] as number,
+        prep_time_minutes: recipe.prep_time_minutes as number | null,
-        position: r[2] as number,
+        cook_time_minutes: recipe.cook_time_minutes as number | null,
-        instruction: r[3] as string
+        created_at: recipe.created_at as number,
-      })) : [];
+        updated_at: recipe.updated_at as number,
-    const tagsRes = this.db.exec('SELECT t.* FROM tags t INNER JOIN recipe_tags rt ON rt.tag_id = t.id WHERE rt.recipe_id = ?', [id]);
+        last_cooked_at: recipe.last_cooked_at as number | null,
-    const tags: Tag[] = tagsRes.length ? tagsRes[0].values.map(r => ({ id: r[0] as number, name: r[1] as string })) : [];
+      };
-    return {
+    });
-      id,
-      title: map.title as string,
-      description: map.description as string | null,
-      servings: map.servings as number | null,
-      prep_time_minutes: map.prep_time_minutes as number | null,
-      cook_time_minutes: map.cook_time_minutes as number | null,
-      source_url: map.source_url as string | null,
-      created_at: map.created_at as number,
-      updated_at: map.updated_at as number,
-      ingredients,
-      steps,
-      tags
-    };
   }
 }

src/backend/repositories/TagRepository.ts

@@ -7,81 +7,155 @@ import type { Tag, CreateTagInput, UpdateTagInput } from '../types/tag.js';
 export class TagRepository {
   constructor(private db: Database) {}
 
+  /**
+   * Find all tags
+   */
   findAll(): Tag[] {
     const result = this.db.exec('SELECT * FROM tags ORDER BY name ASC');
     if (!result.length) return [];
+
     return this.rowsToTags(result[0]);
   }
 
+  /**
+   * Find a tag by ID
+   */
   findById(id: number): Tag | null {
     const result = this.db.exec('SELECT * FROM tags WHERE id = ?', [id]);
     if (!result.length || !result[0].values.length) return null;
+
     const tags = this.rowsToTags(result[0]);
     return tags[0] || null;
   }
 
+  /**
+   * Find a tag by name
+   */
   findByName(name: string): Tag | null {
     const result = this.db.exec('SELECT * FROM tags WHERE name = ?', [name]);
     if (!result.length || !result[0].values.length) return null;
+
     const tags = this.rowsToTags(result[0]);
     return tags[0] || null;
   }
 
+  /**
+   * Find tags for a specific recipe
+   */
   findByRecipeId(recipeId: number): Tag[] {
-    const sql = `SELECT t.* FROM tags t
+    const sql = `
-    INNER JOIN recipe_tags rt ON rt.tag_id = t.id
+      SELECT t.* FROM tags t
-    WHERE rt.recipe_id = ? ORDER BY t.name ASC`;
+      INNER JOIN recipe_tags rt ON rt.tag_id = t.id
+      WHERE rt.recipe_id = ?
+      ORDER BY t.name ASC
+    `;
     const result = this.db.exec(sql, [recipeId]);
     if (!result.length) return [];
+
     return this.rowsToTags(result[0]);
   }
 
+  /**
+   * Create a new tag
+   */
   create(input: CreateTagInput): Tag {
-    const sql = 'INSERT INTO tags (name) VALUES (?)';
+    const sql = 'INSERT INTO tags (name, color) VALUES (?, ?)';
-    this.db.run(sql, [input.name]);
+    
+    this.db.run(sql, [
+      input.name,
+      input.color || null,
+    ]);
+
+    // Get the last inserted ID
     const result = this.db.exec('SELECT last_insert_rowid() as id');
     const id = result[0].values[0][0] as number;
+
     return this.findById(id)!;
   }
 
+  /**
+   * Update an existing tag
+   */
   update(id: number, input: UpdateTagInput): Tag | null {
     const existing = this.findById(id);
     if (!existing) return null;
-    if (input.name === undefined) return existing;
+
-    this.db.run('UPDATE tags SET name = ? WHERE id = ?', [input.name, id]);
+    const fields: string[] = [];
-    return this.findById(id)!;
+    const params: SqlValue[] = [];
+
+    if (input.name !== undefined) {
+      fields.push('name = ?');
+      params.push(input.name);
+    }
+    if (input.color !== undefined) {
+      fields.push('color = ?');
+      params.push(input.color);
+    }
+
+    if (fields.length === 0) {
+      return existing; // No changes
+    }
+
+    params.push(id);
+    const sql = `UPDATE tags SET ${fields.join(', ')} WHERE id = ?`;
+    this.db.run(sql, params);
+
+    return this.findById(id);
   }
 
+  /**
+   * Delete a tag
+   */
   delete(id: number): boolean {
     const existing = this.findById(id);
     if (!existing) return false;
+
+    // CASCADE will automatically remove recipe_tags entries
     this.db.run('DELETE FROM tags WHERE id = ?', [id]);
     return true;
   }
 
+  /**
+   * Assign a tag to a recipe
+   */
   assignToRecipe(recipeId: number, tagId: number): boolean {
     try {
-      this.db.run('INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (?, ?)', [recipeId, tagId]);
+      const sql = 'INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (?, ?)';
+      this.db.run(sql, [recipeId, tagId]);
       return true;
-    } catch {
+    } catch (error) {
+      // Unique constraint violation means it's already assigned
       return false;
     }
   }
 
+  /**
+   * Remove a tag from a recipe
+   */
   removeFromRecipe(recipeId: number, tagId: number): boolean {
-    this.db.run('DELETE FROM recipe_tags WHERE recipe_id = ? AND tag_id = ?', [recipeId, tagId]);
+    const sql = 'DELETE FROM recipe_tags WHERE recipe_id = ? AND tag_id = ?';
+    this.db.run(sql, [recipeId, tagId]);
+    
+    // Check if anything was deleted
     const result = this.db.exec('SELECT changes() as count');
     const count = result[0].values[0][0] as number;
     return count > 0;
   }
 
+  /**
+   * Convert sql.js result rows to Tag objects
+   */
   private rowsToTags(result: { columns: string[]; values: SqlValue[][] }): Tag[] {
     return result.values.map((row) => {
       const tag: Record<string, SqlValue> = {};
-      result.columns.forEach((col, idx) => { tag[col] = row[idx]; });
+      result.columns.forEach((col, idx) => {
+        tag[col] = row[idx];
+      });
+
       return {
         id: tag.id as number,
-        name: tag.name as string
+        name: tag.name as string,
+        color: tag.color as string | null,
       };
     });
   }

src/backend/routes/import.ts

@@ -1,13 +1,152 @@
 import { Router } from 'express';
-import { z } from 'zod';
-import { parseSchemaOrgRecipe } from '../services/SchemaOrgRecipeParserService.js';
-import { parseHeuristicRecipe } from '../services/HeuristicRecipeParserService.js';
 
-export function createImportRoutes() {
+type ImportTelemetryEvent = {
+  event: 'import_success' | 'import_failure';
+  url: string;
+  parser?: 'schema_org' | 'heuristic' | 'none';
+  jsonLdBlockCount?: number;
+  durationMs: number;
+  failureCode?: string;
+  failureReason?: string;
+};
+
+function logImportTelemetry(event: ImportTelemetryEvent): void {
+  console.info('[import.telemetry]', JSON.stringify(event));
+}
+import { z } from 'zod';
+import { UrlImportError, UrlImportService } from '../services/UrlImportService.js';
+import { SchemaOrgRecipeParserService } from '../services/SchemaOrgRecipeParserService.js';
+import { HeuristicRecipeParserService } from '../services/HeuristicRecipeParserService.js';
+
+const importUrlSchema = z.object({
+  url: z.string().url('A valid URL is required'),
+});
+
+function mapImportErrorToStatus(error: UrlImportError): number {
+  if (error.code === 'IMPORT_TIMEOUT') return 504;
+  if (error.code === 'IMPORT_NETWORK') return 502;
+  if (error.code === 'IMPORT_FETCH_FAILED') {
+    if (error.status !== undefined && error.status >= 500) return 502;
+    return 400;
+  }
+  return 400;
+}
+
+export function createImportRoutes(): Router {
   const router = Router();
-  // Example: just for build fix; replace with actual logic as needed
+  const urlImportService = new UrlImportService();
-  router.post('/url', (req, res) => {
+  const schemaOrgParser = new SchemaOrgRecipeParserService();
-    res.json({ success: true, data: { draft_recipe: null }});
+  const heuristicParser = new HeuristicRecipeParserService();
+
+  /**
+   * POST /api/import/url
+   * Fetch an external recipe page and return imported, normalized Recipe (if found)
+   */
+  router.post('/url', async (req, res) => {
+    const startedAt = Date.now();
+    let requestUrl = 'unknown';
+
+    try {
+      const { url } = importUrlSchema.parse(req.body);
+      requestUrl = url;
+      const result = await urlImportService.fetchFromUrl(url);
+
+      // Try to parse and normalize Recipe from JSON-LD blocks
+      let draft: any = null;
+      for (const block of result.json_ld_blocks) {
+        draft = schemaOrgParser.parseJsonLdBlock(block);
+        if (draft) break;
+      }
+
+      // Fallback: heuristic HTML parser when Schema.org data is missing/invalid
+      let parserUsed: 'schema_org' | 'heuristic' | 'none' = 'none';
+      if (draft) {
+        parserUsed = 'schema_org';
+      } else {
+        draft = heuristicParser.parseHtml(result.html, result.source_url);
+        parserUsed = draft ? 'heuristic' : 'none';
+      }
+
+      logImportTelemetry({
+        event: 'import_success',
+        url: requestUrl,
+        parser: parserUsed,
+        jsonLdBlockCount: result.json_ld_blocks.length,
+        durationMs: Date.now() - startedAt,
+      });
+
+      res.status(200).json({
+        success: true,
+        data: { ...result, draft_recipe: draft },
+        error: null,
+      });
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        logImportTelemetry({
+          event: 'import_failure',
+          url: requestUrl,
+          durationMs: Date.now() - startedAt,
+          failureCode: 'VALIDATION_ERROR',
+          failureReason: error.issues[0]?.message ?? 'Request validation failed',
+        });
+
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
+        return;
+      }
+
+      if (error instanceof UrlImportError) {
+        logImportTelemetry({
+          event: 'import_failure',
+          url: requestUrl,
+          durationMs: Date.now() - startedAt,
+          failureCode: error.code,
+          failureReason: error.message,
+        });
+
+        res.status(mapImportErrorToStatus(error)).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
+        return;
+      }
+
+      if (error instanceof Error) {
+        logImportTelemetry({
+          event: 'import_failure',
+          url: requestUrl,
+          durationMs: Date.now() - startedAt,
+          failureCode: 'UNHANDLED_ERROR',
+          failureReason: error.message,
+        });
+
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
+        return;
+      }
+
+      logImportTelemetry({
+        event: 'import_failure',
+        url: requestUrl,
+        durationMs: Date.now() - startedAt,
+        failureCode: 'UNKNOWN_ERROR',
+        failureReason: 'Internal server error',
+      });
+
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
+    }
   });
+
   return router;
 }

src/backend/routes/recipes.ts

@@ -3,57 +3,55 @@ import { z } from 'zod';
 import type { Database } from 'sql.js';
 import { RecipeService } from '../services/RecipeService.js';
 
+/**
+ * Zod validation schemas
+ */
 const createRecipeSchema = z.object({
   title: z.string().min(1, 'Title is required'),
   description: z.string().optional(),
+  ingredients: z.array(z.string()).min(1, 'At least one ingredient is required'),
+  instructions: z.array(z.string()).min(1, 'At least one instruction is required'),
+  source_url: z.string().url().optional().or(z.literal('')),
+  notes: z.string().optional(),
   servings: z.number().int().positive().optional(),
   prep_time_minutes: z.number().int().positive().optional(),
   cook_time_minutes: z.number().int().positive().optional(),
-  source_url: z.string().url().optional().or(z.literal('')),
-  ingredients: z.array(z.object({
-    quantity: z.string().optional(),
-    unit: z.string().optional(),
-    item: z.string().min(1, 'Ingredient required'),
-    notes: z.string().optional(),
-  })).min(1, 'At least one ingredient is required'),
-  steps: z.array(z.object({
-    instruction: z.string().min(1, 'Instruction required'),
-  })).min(1, 'At least one step is required'),
-  tagIds: z.array(z.number().int().positive()).optional(),
 });
 
 const updateRecipeSchema = z.object({
   title: z.string().min(1).optional(),
   description: z.string().optional().nullable(),
+  ingredients: z.array(z.string()).min(1).optional(),
+  instructions: z.array(z.string()).min(1).optional(),
+  source_url: z.string().url().optional().nullable().or(z.literal('')),
+  notes: z.string().optional().nullable(),
   servings: z.number().int().positive().optional().nullable(),
   prep_time_minutes: z.number().int().positive().optional().nullable(),
   cook_time_minutes: z.number().int().positive().optional().nullable(),
-  source_url: z.string().url().optional().nullable().or(z.literal('')),
-  ingredients: z.array(z.object({
-    quantity: z.string().optional(),
-    unit: z.string().optional(),
-    item: z.string().min(1).optional(),
-    notes: z.string().optional(),
-  })).optional(),
-  steps: z.array(z.object({ instruction: z.string().min(1).optional() })).optional(),
-  tagIds: z.array(z.number().int().positive()).optional(),
 });
 
 const recipeFiltersSchema = z.object({
   search: z.string().optional(),
   offset: z.coerce.number().int().nonnegative().optional(),
   limit: z.coerce.number().int().positive().max(100).optional(),
-  tagId: z.coerce.number().int().positive().optional(),
 });
 
+/**
+ * Create recipe routes
+ */
 export function createRecipeRoutes(db: Database): Router {
   const router = Router();
   const recipeService = new RecipeService(db);
 
+  /**
+   * GET /api/recipes
+   * List recipes with optional filtering
+   */
   router.get('/', (req, res) => {
     try {
       const filters = recipeFiltersSchema.parse(req.query);
       const result = recipeService.list(filters);
+      
       res.json({
         success: true,
         data: result.recipes,
@@ -66,87 +64,196 @@ export function createRecipeRoutes(db: Database): Router {
       });
     } catch (error) {
       if (error instanceof z.ZodError) {
-        res.status(400).json({ success: false, data: null, error: error.errors });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
       } else {
-        res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
       }
     }
   });
 
+  /**
+   * GET /api/recipes/:id
+   * Get a single recipe by ID
+   */
   router.get('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid recipe ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe ID',
+        });
         return;
       }
+
       const recipe = recipeService.get(id);
+      
       if (!recipe) {
-        res.status(404).json({ success: false, data: null, error: 'Recipe not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Recipe not found',
+        });
         return;
       }
-      res.json({ success: true, data: recipe, error: null });
+
+      res.json({
+        success: true,
+        data: recipe,
+        error: null,
+      });
     } catch (error) {
-      res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 
+  /**
+   * POST /api/recipes
+   * Create a new recipe
+   */
   router.post('/', (req, res) => {
     try {
       const data = createRecipeSchema.parse(req.body);
       const recipe = recipeService.create(data);
-      res.status(201).json({ success: true, data: recipe, error: null });
+      
+      res.status(201).json({
+        success: true,
+        data: recipe,
+        error: null,
+      });
     } catch (error) {
       if (error instanceof z.ZodError) {
-        res.status(400).json({ success: false, data: null, error: error.errors });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
       } else if (error instanceof Error) {
-        res.status(400).json({ success: false, data: null, error: error.message });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
       } else {
-        res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
       }
     }
   });
 
+  /**
+   * PUT /api/recipes/:id
+   * Update an existing recipe
+   */
   router.put('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid recipe ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe ID',
+        });
         return;
       }
+
       const data = updateRecipeSchema.parse(req.body);
       const recipe = recipeService.update(id, data);
+      
       if (!recipe) {
-        res.status(404).json({ success: false, data: null, error: 'Recipe not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Recipe not found',
+        });
         return;
       }
-      res.json({ success: true, data: recipe, error: null });
+
+      res.json({
+        success: true,
+        data: recipe,
+        error: null,
+      });
     } catch (error) {
       if (error instanceof z.ZodError) {
-        res.status(400).json({ success: false, data: null, error: error.errors });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
       } else if (error instanceof Error) {
-        res.status(400).json({ success: false, data: null, error: error.message });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
       } else {
-        res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
       }
     }
   });
 
+  /**
+   * DELETE /api/recipes/:id
+   * Delete a recipe
+   */
   router.delete('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid recipe ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe ID',
+        });
         return;
       }
+
       const deleted = recipeService.delete(id);
+      
       if (!deleted) {
-        res.status(404).json({ success: false, data: null, error: 'Recipe not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Recipe not found',
+        });
         return;
       }
-      res.json({ success: true, data: true, error: null });
+
+      res.json({
+        success: true,
+        data: { id },
+        error: null,
+      });
     } catch (error) {
-      res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 

src/backend/routes/tags.ts

@@ -3,137 +3,353 @@ import { z } from 'zod';
 import type { Database } from 'sql.js';
 import { TagService } from '../services/TagService.js';
 
+/**
+ * Zod validation schemas
+ */
 const createTagSchema = z.object({
   name: z.string().min(1, 'Name is required'),
+  color: z.string().regex(/^#[0-9A-Fa-f]{6}$/, 'Color must be a valid hex color (e.g., #FF5733)').optional(),
 });
 
 const updateTagSchema = z.object({
   name: z.string().min(1).optional(),
+  color: z.string().regex(/^#[0-9A-Fa-f]{6}$/).optional().nullable(),
 });
 
 const assignTagSchema = z.object({
   tag_id: z.number().int().positive(),
 });
 
+/**
+ * Create tag routes
+ */
 export function createTagRoutes(db: Database): Router {
   const router = Router();
   const tagService = new TagService(db);
 
+  /**
+   * GET /api/tags
+   * List all tags
+   */
   router.get('/', (req, res) => {
     try {
       const tags = tagService.list();
-      res.json({ success: true, data: tags, error: null });
+      
+      res.json({
+        success: true,
+        data: tags,
+        error: null,
+      });
     } catch (error) {
-      res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 
+  /**
+   * GET /api/tags/:id
+   * Get a single tag by ID
+   */
   router.get('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid tag ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid tag ID',
+        });
         return;
       }
+
       const tag = tagService.get(id);
+      
       if (!tag) {
-        res.status(404).json({ success: false, data: null, error: 'Tag not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Tag not found',
+        });
         return;
       }
-      res.json({ success: true, data: tag, error: null });
+
+      res.json({
+        success: true,
+        data: tag,
+        error: null,
+      });
     } catch (error) {
-      res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 
+  /**
+   * POST /api/tags
+   * Create a new tag
+   */
   router.post('/', (req, res) => {
     try {
       const data = createTagSchema.parse(req.body);
       const tag = tagService.create(data);
-      res.status(201).json({ success: true, data: tag, error: null });
+      
+      res.status(201).json({
+        success: true,
+        data: tag,
+        error: null,
+      });
     } catch (error) {
       if (error instanceof z.ZodError) {
-        res.status(400).json({ success: false, data: null, error: error.errors });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
       } else if (error instanceof Error) {
-        res.status(400).json({ success: false, data: null, error: error.message });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
       } else {
-        res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
       }
     }
   });
 
+  /**
+   * PUT /api/tags/:id
+   * Update an existing tag
+   */
   router.put('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid tag ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid tag ID',
+        });
         return;
       }
+
       const data = updateTagSchema.parse(req.body);
       const tag = tagService.update(id, data);
+      
       if (!tag) {
-        res.status(404).json({ success: false, data: null, error: 'Tag not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Tag not found',
+        });
         return;
       }
-      res.json({ success: true, data: tag, error: null });
+
+      res.json({
+        success: true,
+        data: tag,
+        error: null,
+      });
     } catch (error) {
       if (error instanceof z.ZodError) {
-        res.status(400).json({ success: false, data: null, error: error.errors });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
       } else if (error instanceof Error) {
-        res.status(400).json({ success: false, data: null, error: error.message });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
       } else {
-        res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
       }
     }
   });
 
+  /**
+   * DELETE /api/tags/:id
+   * Delete a tag
+   */
   router.delete('/:id', (req, res) => {
     try {
       const id = parseInt(req.params.id, 10);
+      
       if (isNaN(id)) {
-        res.status(400).json({ success: false, data: null, error: 'Invalid tag ID' });
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid tag ID',
+        });
         return;
       }
+
       const deleted = tagService.delete(id);
+      
       if (!deleted) {
-        res.status(404).json({ success: false, data: null, error: 'Tag not found' });
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Tag not found',
+        });
         return;
       }
-      res.json({ success: true, data: true, error: null });
+
+      res.json({
+        success: true,
+        data: { id },
+        error: null,
+      });
     } catch (error) {
-      res.status(500).json({ success: false, data: null, error: 'Internal server error' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 
-  // Tag <-> Recipe assignment/removal
+  /**
-  router.post('/:id/assign', (req, res) => {
+   * GET /api/recipes/:recipeId/tags
+   * Get tags for a specific recipe
+   */
+  router.get('/recipes/:recipeId/tags', (req, res) => {
     try {
-      const id = parseInt(req.params.id, 10);
+      const recipeId = parseInt(req.params.recipeId, 10);
-      if (isNaN(id)) {
+      
-        res.status(400).json({ success: false, data: null, error: 'Invalid tag ID' });
+      if (isNaN(recipeId)) {
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe ID',
+        });
         return;
       }
-      const data = assignTagSchema.parse(req.body);
+
-      const ok = tagService.assignToRecipe(data.tag_id, id);
+      const tags = tagService.getByRecipeId(recipeId);
-      res.json({ success: ok, data: ok, error: ok ? null : 'Assignment failed' });
+      
+      res.json({
+        success: true,
+        data: tags,
+        error: null,
+      });
     } catch (error) {
-      res.status(400).json({ success: false, data: null, error: 'Invalid request' });
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
     }
   });
 
-  router.post('/:id/remove', (req, res) => {
+  /**
+   * POST /api/recipes/:recipeId/tags
+   * Assign a tag to a recipe
+   */
+  router.post('/recipes/:recipeId/tags', (req, res) => {
     try {
-      const id = parseInt(req.params.id, 10);
+      const recipeId = parseInt(req.params.recipeId, 10);
-      if (isNaN(id)) {
+      
-        res.status(400).json({ success: false, data: null, error: 'Invalid tag ID' });
+      if (isNaN(recipeId)) {
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe ID',
+        });
         return;
       }
+
       const data = assignTagSchema.parse(req.body);
-      const ok = tagService.removeFromRecipe(data.tag_id, id);
+      const assigned = tagService.assignToRecipe(recipeId, data.tag_id);
-      res.json({ success: ok, data: ok, error: ok ? null : 'Remove failed' });
+      
+      res.json({
+        success: true,
+        data: { assigned },
+        error: null,
+      });
     } catch (error) {
-      res.status(400).json({ success: false, data: null, error: 'Invalid request' });
+      if (error instanceof z.ZodError) {
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.errors,
+        });
+      } else if (error instanceof Error) {
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: error.message,
+        });
+      } else {
+        res.status(500).json({
+          success: false,
+          data: null,
+          error: 'Internal server error',
+        });
+      }
     }
   });
+
+  /**
+   * DELETE /api/recipes/:recipeId/tags/:tagId
+   * Remove a tag from a recipe
+   */
+  router.delete('/recipes/:recipeId/tags/:tagId', (req, res) => {
+    try {
+      const recipeId = parseInt(req.params.recipeId, 10);
+      const tagId = parseInt(req.params.tagId, 10);
+      
+      if (isNaN(recipeId) || isNaN(tagId)) {
+        res.status(400).json({
+          success: false,
+          data: null,
+          error: 'Invalid recipe or tag ID',
+        });
+        return;
+      }
+
+      const removed = tagService.removeFromRecipe(recipeId, tagId);
+      
+      if (!removed) {
+        res.status(404).json({
+          success: false,
+          data: null,
+          error: 'Tag assignment not found',
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: { removed: true },
+        error: null,
+      });
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        data: null,
+        error: 'Internal server error',
+      });
+    }
+  });
+
   return router;
 }

src/backend/services/HeuristicRecipeParserService.ts

@@ -1,12 +1,107 @@
 import type { CreateRecipeInput } from '../types/recipe.js';
-// ...other necessary imports...
+
-// Dummy extract/logic: Map string[] to normalized CreateRecipeInput.ingredients
+/**
-export function parseHeuristicRecipe(plainRecipe: { title: string; description?: string; ingredients: string[]; steps: string[]; source_url?: string }): CreateRecipeInput {
+ * Lightweight fallback parser for pages without usable Schema.org Recipe JSON-LD.
-  return {
+ */
-    title: plainRecipe.title,
+export class HeuristicRecipeParserService {
-    description: plainRecipe.description,
+  parseHtml(html: string, sourceUrl?: string): CreateRecipeInput | null {
-    ingredients: plainRecipe.ingredients.map(item => ({ item })),
+    const title = this.extractTitle(html);
-    steps: plainRecipe.steps.map(instruction => ({ instruction })),
+    const ingredients = this.extractSectionList(html, 'ingredients');
-    source_url: plainRecipe.source_url,
+    const instructions = this.extractSectionList(html, 'instructions')
-  };
+      .concat(this.extractSectionList(html, 'directions'));
+
+    const mergedInstructions = this.uniqueNonEmpty(instructions);
+
+    if (!title && ingredients.length === 0 && mergedInstructions.length === 0) {
+      return null;
+    }
+
+    if (ingredients.length === 0 && mergedInstructions.length === 0) {
+      return null;
+    }
+
+    return {
+      title: title ?? 'Imported Recipe',
+      ingredients,
+      instructions: mergedInstructions,
+      source_url: sourceUrl,
+    };
+  }
+
+  private extractTitle(html: string): string | undefined {
+    const h1Match = html.match(/<h1[^>]*>([\s\S]*?)<\/h1>/i);
+    if (h1Match?.[1]) {
+      return this.normalizeText(h1Match[1]);
+    }
+
+    const titleMatch = html.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+    if (!titleMatch?.[1]) return undefined;
+
+    const raw = this.normalizeText(titleMatch[1]);
+    if (!raw) return undefined;
+
+    // Common site title separators (e.g., "Recipe Name | Site")
+    const split = raw.split(/\s[\-|–|:]\s/);
+    return split[0]?.trim() || raw;
+  }
+
+  private extractSectionList(html: string, sectionName: 'ingredients' | 'instructions' | 'directions'): string[] {
+    const headingPattern = new RegExp(
+      `<h[1-6][^>]*>\\s*${sectionName}\\s*<\\/h[1-6]>\\s*<(ul|ol)[^>]*>([\\s\\S]*?)<\\/\\1>`,
+      'i',
+    );
+
+    const headingMatch = html.match(headingPattern);
+    if (headingMatch?.[2]) {
+      return this.extractListItems(headingMatch[2]);
+    }
+
+    const classPattern = new RegExp(
+      `<(ul|ol|div)[^>]*(class|id)=["'][^"']*${sectionName.slice(0, -1)}[^"']*["'][^>]*>([\\s\\S]*?)<\\/\\1>`,
+      'gi',
+    );
+
+    const candidates: string[] = [];
+    let match = classPattern.exec(html);
+    while (match) {
+      const content = match[3] ?? '';
+      candidates.push(...this.extractListItems(content));
+      match = classPattern.exec(html);
+    }
+
+    return this.uniqueNonEmpty(candidates);
+  }
+
+  private extractListItems(sectionHtml: string): string[] {
+    const listItemRegex = /<li[^>]*>([\s\S]*?)<\/li>/gi;
+    const items: string[] = [];
+
+    let match = listItemRegex.exec(sectionHtml);
+    while (match) {
+      const normalized = this.normalizeText(match[1] ?? '');
+      if (normalized) {
+        items.push(normalized);
+      }
+      match = listItemRegex.exec(sectionHtml);
+    }
+
+    return this.uniqueNonEmpty(items);
+  }
+
+  private normalizeText(text: string): string {
+    const withoutTags = text.replace(/<[^>]+>/g, ' ');
+    const decoded = withoutTags
+      .replace(/&nbsp;/gi, ' ')
+      .replace(/&amp;/gi, '&')
+      .replace(/&quot;/gi, '"')
+      .replace(/&#39;/gi, "'")
+      .replace(/&lt;/gi, '<')
+      .replace(/&gt;/gi, '>');
+
+    return decoded.replace(/\s+/g, ' ').trim();
+  }
+
+  private uniqueNonEmpty(values: string[]): string[] {
+    return [...new Set(values.map((v) => v.trim()).filter(Boolean))];
+  }
 }

src/backend/services/PhaseProgressLogger.ts

@@ -1,28 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-
-export type PhaseProgressLogEntry = {
-  phase: string;
-  status: 'success' | 'failure';
-  attempt: number;
-  timestamp: string;
-  failureReason?: string;
-  nextAction: string;
-};
-
-const PHASE_PROGRESS_LOG = path.join(process.cwd(), 'status/phase-progress.jsonl');
-
-export async function logPhaseProgress(entry: PhaseProgressLogEntry): Promise<void> {
-  await fs.mkdir(path.dirname(PHASE_PROGRESS_LOG), { recursive: true });
-  await fs.appendFile(PHASE_PROGRESS_LOG, JSON.stringify(entry) + '\n', 'utf8');
-}
-
-export async function getRecentPhaseProgress(limit = 20): Promise<PhaseProgressLogEntry[]> {
-  try {
-    const data = await fs.readFile(PHASE_PROGRESS_LOG, 'utf8');
-    const lines = data.trim().split(/\r?\n/).filter(Boolean);
-    return lines.slice(-limit).map(line => JSON.parse(line));
-  } catch (err) {
-    return [];
-  }
-}

src/backend/services/PhaseUpdateQueue.ts

@@ -1,86 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-import crypto from 'crypto';
-
-export type PhaseUpdateEventType = 'phase_started' | 'phase_succeeded' | 'phase_failed' | 'workflow_completed' | 'workflow_blocked';
-
-export type PhaseUpdateEvent = {
-  id: string;
-  eventType: PhaseUpdateEventType;
-  phase: string | null;
-  timestamp: string;
-  summary: string;
-  details?: string | object;
-  relayStatus: 'pending' | 'sent';
-};
-
-const PHASE_UPDATES_QUEUE = path.join(process.cwd(), 'status/phase-updates.jsonl');
-
-function ensureArrayString(details?: string | object): string {
-  if (typeof details === 'undefined') return '';
-  if (typeof details === 'string') return details;
-  try { return JSON.stringify(details); } catch { return String(details); }
-}
-
-export async function appendPhaseUpdate(event:
-  Omit<PhaseUpdateEvent, 'id' | 'relayStatus' | 'timestamp'> & {
-    details?: string | object;
-    relayStatus?: 'pending' | 'sent';
-    timestamp?: string;
-  }
-): Promise<PhaseUpdateEvent> {
-  const finalized: PhaseUpdateEvent = {
-    id: crypto.randomUUID(),
-    eventType: event.eventType,
-    phase: event.phase ?? null,
-    timestamp: event.timestamp || new Date().toISOString(),
-    summary: event.summary,
-    details: event.details,
-    relayStatus: event.relayStatus || 'pending',
-  };
-  await fs.mkdir(path.dirname(PHASE_UPDATES_QUEUE), { recursive: true });
-  await fs.appendFile(PHASE_UPDATES_QUEUE, JSON.stringify(finalized) + '\n', 'utf8');
-  return finalized;
-}
-
-export async function getPendingPhaseUpdates(): Promise<PhaseUpdateEvent[]> {
-  try {
-    const data = await fs.readFile(PHASE_UPDATES_QUEUE, 'utf8');
-    return data.trim().split(/\r?\n/).filter(Boolean)
-      .map(l => JSON.parse(l))
-      .filter((e: PhaseUpdateEvent) => e.relayStatus === 'pending');
-  } catch {
-    return [];
-  }
-}
-
-export async function markPhaseUpdateSent(id: string): Promise<boolean> {
-  try {
-    const data = await fs.readFile(PHASE_UPDATES_QUEUE, 'utf8');
-    const lines = data.trim().split(/\r?\n/).filter(Boolean);
-    let found = false;
-    const updatedLines = lines.map(l => {
-      const evt = JSON.parse(l) as PhaseUpdateEvent;
-      if (evt.id === id && evt.relayStatus === 'pending') {
-        found = true;
-        evt.relayStatus = 'sent';
-      }
-      return JSON.stringify(evt);
-    });
-    if (found) {
-      await fs.writeFile(PHASE_UPDATES_QUEUE, updatedLines.join('\n') + '\n', 'utf8');
-    }
-    return found;
-  } catch {
-    return false;
-  }
-}
-
-export async function getAllPhaseUpdates(): Promise<PhaseUpdateEvent[]> {
-  try {
-    const data = await fs.readFile(PHASE_UPDATES_QUEUE, 'utf8');
-    return data.trim().split(/\r?\n/).filter(Boolean).map(l => JSON.parse(l));
-  } catch {
-    return [];
-  }
-}

src/backend/services/RecipeService.ts

@@ -2,26 +2,72 @@ import type { Database } from 'sql.js';
 import { RecipeRepository } from '../repositories/RecipeRepository.js';
 import type { Recipe, CreateRecipeInput, UpdateRecipeInput, RecipeFilters } from '../types/recipe.js';
 
+/**
+ * RecipeService contains business logic for recipe management
+ */
 export class RecipeService {
   private repository: RecipeRepository;
-  constructor(db: Database) { this.repository = new RecipeRepository(db); }
+
+  constructor(db: Database) {
+    this.repository = new RecipeRepository(db);
+  }
+
+  /**
+   * List recipes with optional filtering
+   */
   list(filters: RecipeFilters = {}): { recipes: Recipe[]; total: number } {
     const recipes = this.repository.findAll(filters);
     const total = this.repository.count(filters);
     return { recipes, total };
   }
-  get(id: number): Recipe | null { return this.repository.findById(id); }
+
+  /**
+   * Get a single recipe by ID
+   */
+  get(id: number): Recipe | null {
+    return this.repository.findById(id);
+  }
+
+  /**
+   * Create a new recipe
+   */
   create(input: CreateRecipeInput): Recipe {
-    if (!input.title.trim()) throw new Error('Recipe title cannot be empty');
+    // Validate business rules
-    if (!input.ingredients.length) throw new Error('At least one ingredient');
+    if (!input.title.trim()) {
-    if (!input.steps.length) throw new Error('At least one step');
+      throw new Error('Recipe title cannot be empty');
+    }
+    if (!input.ingredients.length) {
+      throw new Error('Recipe must have at least one ingredient');
+    }
+    if (!input.instructions.length) {
+      throw new Error('Recipe must have at least one instruction');
+    }
+
     return this.repository.create(input);
   }
+
+  /**
+   * Update an existing recipe
+   */
   update(id: number, input: UpdateRecipeInput): Recipe | null {
-    if (input.title !== undefined && !input.title.trim()) throw new Error('Recipe title cannot be empty');
+    // Validate business rules
-    if (input.ingredients !== undefined && !input.ingredients.length) throw new Error('At least one ingredient');
+    if (input.title !== undefined && !input.title.trim()) {
-    if (input.steps !== undefined && !input.steps.length) throw new Error('At least one step');
+      throw new Error('Recipe title cannot be empty');
+    }
+    if (input.ingredients !== undefined && !input.ingredients.length) {
+      throw new Error('Recipe must have at least one ingredient');
+    }
+    if (input.instructions !== undefined && !input.instructions.length) {
+      throw new Error('Recipe must have at least one instruction');
+    }
+
     return this.repository.update(id, input);
   }
-  delete(id: number): boolean { return this.repository.delete(id); }
+
+  /**
+   * Delete a recipe
+   */
+  delete(id: number): boolean {
+    return this.repository.delete(id);
+  }
 }

src/backend/services/SchemaOrgRecipeParserService.ts

@@ -1,12 +1,123 @@
+import { z } from 'zod';
 import type { CreateRecipeInput } from '../types/recipe.js';
-// ...other necessary imports...
+
-// Dummy extract/logic: Map string[] to normalized CreateRecipeInput.ingredients
+interface SchemaOrgHowToStep {
-export function parseSchemaOrgRecipe(jsonLd: any): CreateRecipeInput {
+  text?: string;
-  return {
+}
-    title: jsonLd.name,
+
-    description: jsonLd.description,
+interface SchemaOrgRecipeCandidate {
-    ingredients: (jsonLd.recipeIngredient??[]).map((item: string) => ({ item })),
+  '@type'?: string | string[];
-    steps: (jsonLd.recipeInstructions??[]).map((txt: any) => ({ instruction: typeof txt === 'string' ? txt : txt.text })),
+  name?: string;
-    source_url: jsonLd.url,
+  description?: string | null;
-  };
+  recipeIngredient?: string[];
+  recipeInstructions?: string | string[] | SchemaOrgHowToStep[];
+  url?: string;
+  recipeYield?: string | number;
+  prepTime?: string;
+  cookTime?: string;
+}
+
+/**
+ * Parses and normalizes Schema.org Recipe JSON-LD blocks.
+ */
+export class SchemaOrgRecipeParserService {
+  /**
+   * Extracts and normalizes a Recipe, if present, from a JSON-LD string.
+   * Returns null if no valid Recipe is found.
+   */
+  parseJsonLdBlock(json: string): CreateRecipeInput | null {
+    let parsedJson: unknown;
+    try {
+      parsedJson = JSON.parse(json);
+    } catch {
+      return null;
+    }
+
+    if (Array.isArray(parsedJson)) {
+      for (const entry of parsedJson) {
+        const parsedRecipe = this.tryParseRecipe(entry);
+        if (parsedRecipe) return parsedRecipe;
+      }
+      return null;
+    }
+
+    return this.tryParseRecipe(parsedJson);
+  }
+
+  /**
+   * Internal: attempts to extract Recipe data from an object if @type matches.
+   */
+  private tryParseRecipe(input: unknown): CreateRecipeInput | null {
+    const recipeSchema = z.object({
+      '@type': z.union([z.string(), z.array(z.string())]).optional(),
+      name: z.string().min(1),
+      description: z.string().optional().nullable(),
+      recipeIngredient: z.array(z.string()).optional(),
+      recipeInstructions: z
+        .union([
+          z.array(z.string()),
+          z.string(),
+          z.array(z.object({ text: z.string().optional() })),
+        ])
+        .optional(),
+      url: z.string().optional(),
+      recipeYield: z.union([z.string(), z.number()]).optional(),
+      prepTime: z.string().optional(),
+      cookTime: z.string().optional(),
+    });
+
+    const parseResult = recipeSchema.safeParse(input);
+    if (!parseResult.success) return null;
+
+    const recipe = parseResult.data as SchemaOrgRecipeCandidate;
+    if (!this.isRecipeType(recipe['@type'])) {
+      return null;
+    }
+
+    return {
+      title: recipe.name!.trim(),
+      description: this.normalizeOptionalText(recipe.description),
+      ingredients: this.normalizeTextList(recipe.recipeIngredient ?? []),
+      instructions: this.normalizeInstructions(recipe.recipeInstructions),
+      source_url: this.normalizeOptionalText(recipe.url),
+    };
+  }
+
+  private isRecipeType(type: string | string[] | undefined): boolean {
+    if (!type) return false;
+    if (typeof type === 'string') return type === 'Recipe';
+    return type.includes('Recipe');
+  }
+
+  private normalizeOptionalText(value: string | null | undefined): string | undefined {
+    if (!value) return undefined;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  }
+
+  private normalizeTextList(values: string[]): string[] {
+    return values
+      .map((value) => value.trim())
+      .filter((value) => value.length > 0);
+  }
+
+  private normalizeInstructions(
+    instructions: string | string[] | SchemaOrgHowToStep[] | undefined,
+  ): string[] {
+    if (!instructions) return [];
+
+    if (typeof instructions === 'string') {
+      return this.normalizeTextList([instructions]);
+    }
+
+    if (instructions.length === 0) {
+      return [];
+    }
+
+    if (typeof instructions[0] === 'string') {
+      return this.normalizeTextList(instructions as string[]);
+    }
+
+    return this.normalizeTextList((instructions as SchemaOrgHowToStep[]).map((step) => step.text ?? ''));
+  }
 }

src/backend/services/SequentialOrchestrator.ts

@@ -1,192 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-import { logPhaseProgress } from './PhaseProgressLogger';
-import { WorkflowStatusManager, WorkflowStatus } from './WorkflowStatusManager';
-import { appendPhaseUpdate } from './PhaseUpdateQueue';
-
-export type OrchestratorPhase<TInput, TOutput> = {
-  name: string;
-  run: (input: TInput) => Promise<TOutput>;
-  retry?: number;
-  backoffMs?: number;
-  nextAction?: string;
-};
-export type PhaseAttemptResult = {
-  phase: string;
-  status: 'success' | 'failure';
-  attempt: number;
-  timestamp: string;
-  error?: string;
-  failureReason?: string;
-  nextAction: string;
-};
-export type Checkpoint = {
-  currentPhase: number;
-  phaseResults: PhaseAttemptResult[];
-  inProgress?: boolean;
-};
-const DEFAULT_CHECKPOINT_FILE = path.join(process.cwd(), 'data/orchestrator-checkpoint.json');
-const DEFAULT_STATUS_FILE = path.join(process.cwd(), 'status/workflow-status.json');
-
-export class SequentialOrchestrator<TInput = any, TOutput = any> {
-  private phases: OrchestratorPhase<TInput, TOutput>[];
-  private checkpointPath: string;
-  private input: TInput;
-  private maxAttemptsPerPhasePerRun: number;
-  private statusManager: WorkflowStatusManager;
-
-  constructor(options: {
-    phases: OrchestratorPhase<TInput, TOutput>[];
-    checkpointPath?: string;
-    input: TInput;
-    maxAttemptsPerPhasePerRun?: number;
-    statusFilePath?: string;
-  }) {
-    this.phases = options.phases;
-    this.checkpointPath = options.checkpointPath || DEFAULT_CHECKPOINT_FILE;
-    this.input = options.input;
-    this.maxAttemptsPerPhasePerRun = options.maxAttemptsPerPhasePerRun ?? Infinity;
-    this.statusManager = new WorkflowStatusManager(options.statusFilePath || DEFAULT_STATUS_FILE);
-  }
-  private async writeStatus(
-    state: Partial<WorkflowStatus>,
-    extra: { currentPhaseIdx?: number; phaseResult?: PhaseAttemptResult } = {}
-  ) {
-    const checkpoint = await this.loadCheckpoint();
-    let completedPhases: string[] = [];
-    if (checkpoint) {
-      completedPhases = this.phases
-        .slice(0, checkpoint.currentPhase)
-        .map(p => p.name)
-        .filter(phaseName => checkpoint.phaseResults.some(r => r.phase === phaseName && r.status === 'success'));
-    }
-    const currentP = typeof extra.currentPhaseIdx === 'number' && this.phases[extra.currentPhaseIdx]?.name
-      ? this.phases[extra.currentPhaseIdx].name
-      : null;
-    let overallStatus = state.overallStatus || 'idle';
-    if (extra.phaseResult && extra.phaseResult.status === 'failure') {
-      overallStatus = 'failed';
-    } else if (checkpoint && checkpoint.currentPhase === this.phases.length) {
-      overallStatus = 'completed';
-    }
-    const lastFailureReason = (state.lastFailureReason === undefined && extra.phaseResult?.failureReason)
-      ? extra.phaseResult?.failureReason || null
-      : (state.lastFailureReason !== undefined ? state.lastFailureReason : null);
-    const workflowStatus: WorkflowStatus = {
-      currentPhase: currentP,
-      overallStatus,
-      lastUpdated: new Date().toISOString(),
-      lastFailureReason,
-      nextAction: state.nextAction || extra.phaseResult?.nextAction || '',
-      completedPhases,
-    };
-    await this.statusManager.update(workflowStatus);
-  }
-  private async loadCheckpoint(): Promise<Checkpoint | null> {
-    try {
-      const txt = await fs.readFile(this.checkpointPath, 'utf8');
-      return JSON.parse(txt) as Checkpoint;
-    } catch {
-      return null;
-    }
-  }
-  private async saveCheckpoint(checkpoint: Checkpoint) {
-    await fs.mkdir(path.dirname(this.checkpointPath), { recursive: true });
-    await fs.writeFile(this.checkpointPath, JSON.stringify(checkpoint, null, 2), 'utf8');
-  }
-  public async run(): Promise<void> {
-    let checkpoint = await this.loadCheckpoint();
-    if (!checkpoint) {
-      checkpoint = { currentPhase: 0, phaseResults: [] };
-      await this.saveCheckpoint(checkpoint);
-      await this.writeStatus({ overallStatus: 'idle' }, { currentPhaseIdx: 0 });
-    }
-    while (checkpoint.currentPhase < this.phases.length) {
-      const phase = this.phases[checkpoint.currentPhase];
-      let success = false;
-      let attempt = 1;
-      const maxRetries = (typeof phase.retry === 'number') ? phase.retry : 1;
-      const maxAttemptsThisRun = Number.isFinite(this.maxAttemptsPerPhasePerRun)
-        ? Math.min(maxRetries, this.maxAttemptsPerPhasePerRun)
-        : maxRetries;
-      await appendPhaseUpdate({
-        eventType: 'phase_started',
-        phase: phase.name,
-        summary: `Phase '${phase.name}' started`,
-        details: { attempt },
-      });
-      for (; attempt <= maxAttemptsThisRun && !success; attempt++) {
-        try {
-          await phase.run(this.input);
-          const res: PhaseAttemptResult = {
-            phase: phase.name,
-            status: 'success',
-            attempt,
-            timestamp: new Date().toISOString(),
-            nextAction: 'proceed',
-          };
-          checkpoint.phaseResults.push(res);
-          checkpoint.currentPhase += 1;
-          await this.saveCheckpoint(checkpoint);
-          await logPhaseProgress({
-            phase: res.phase,
-            status: res.status,
-            attempt: res.attempt,
-            timestamp: res.timestamp,
-            nextAction: res.nextAction,
-          });
-          await appendPhaseUpdate({
-            eventType: 'phase_succeeded',
-            phase: phase.name,
-            summary: `Phase '${phase.name}' succeeded`,
-            details: { attempt },
-          });
-          success = true;
-          await this.writeStatus({ overallStatus: 'running', nextAction: phase.nextAction || '' }, { currentPhaseIdx: checkpoint.currentPhase, phaseResult: res });
-        } catch (err: any) {
-          const isLastAttempt = attempt === maxRetries;
-          // Always log every failed attempt
-          const failRes: PhaseAttemptResult = {
-            phase: phase.name,
-            status: 'failure',
-            attempt,
-            timestamp: new Date().toISOString(),
-            error: err && err.message ? err.message : String(err),
-            failureReason: err && err.message ? err.message : String(err),
-            nextAction: !isLastAttempt ? 'retry' : 'manual intervention',
-          };
-          checkpoint.phaseResults.push(failRes);
-          await logPhaseProgress({
-            phase: failRes.phase,
-            status: failRes.status,
-            attempt: failRes.attempt,
-            timestamp: failRes.timestamp,
-            failureReason: failRes.failureReason,
-            nextAction: failRes.nextAction,
-          });
-          if (isLastAttempt) {
-            await appendPhaseUpdate({
-              eventType: 'phase_failed',
-              phase: phase.name,
-              summary: `Phase '${phase.name}' failed`,
-              details: { attempt, error: err && err.message ? err.message : String(err) },
-            });
-            await this.saveCheckpoint(checkpoint);
-            await this.writeStatus({ overallStatus: 'failed', lastFailureReason: failRes.failureReason, nextAction: failRes.nextAction }, { currentPhaseIdx: checkpoint.currentPhase, phaseResult: failRes });
-            return;
-          }
-        }
-      }
-    }
-    if (checkpoint.currentPhase === this.phases.length) {
-      await this.saveCheckpoint(checkpoint);
-      await appendPhaseUpdate({
-        eventType: 'workflow_completed',
-        phase: null,
-        summary: `Workflow completed successfully`,
-        details: { totalPhases: this.phases.length },
-      });
-      await this.writeStatus({ overallStatus: 'completed', nextAction: 'done' }, { currentPhaseIdx: null });
-    }
-  }
-}

src/backend/services/TagService.ts

@@ -12,54 +12,98 @@ export class TagService {
     this.repository = new TagRepository(db);
   }
 
+  /**
+   * List all tags
+   */
   list(): Tag[] {
     return this.repository.findAll();
   }
 
+  /**
+   * Get a single tag by ID
+   */
   get(id: number): Tag | null {
     return this.repository.findById(id);
   }
 
+  /**
+   * Get tags for a specific recipe
+   */
   getByRecipeId(recipeId: number): Tag[] {
     return this.repository.findByRecipeId(recipeId);
   }
 
+  /**
+   * Create a new tag
+   */
   create(input: CreateTagInput): Tag {
+    // Validate business rules
     if (!input.name.trim()) {
       throw new Error('Tag name cannot be empty');
     }
+
+    // Check if tag already exists
     const existing = this.repository.findByName(input.name);
     if (existing) {
       throw new Error(`Tag "${input.name}" already exists`);
     }
+
+    // Validate color format if provided
+    if (input.color && !/^#[0-9A-Fa-f]{6}$/.test(input.color)) {
+      throw new Error('Color must be a valid hex color (e.g., #FF5733)');
+    }
+
     return this.repository.create(input);
   }
 
+  /**
+   * Update an existing tag
+   */
   update(id: number, input: UpdateTagInput): Tag | null {
+    // Validate business rules
     if (input.name !== undefined && !input.name.trim()) {
       throw new Error('Tag name cannot be empty');
     }
+
+    // Check if new name conflicts with existing tag
     if (input.name !== undefined) {
       const existing = this.repository.findByName(input.name);
       if (existing && existing.id !== id) {
         throw new Error(`Tag "${input.name}" already exists`);
       }
     }
+
+    // Validate color format if provided
+    if (input.color && !/^#[0-9A-Fa-f]{6}$/.test(input.color)) {
+      throw new Error('Color must be a valid hex color (e.g., #FF5733)');
+    }
+
     return this.repository.update(id, input);
   }
 
+  /**
+   * Delete a tag
+   */
   delete(id: number): boolean {
     return this.repository.delete(id);
   }
 
+  /**
+   * Assign a tag to a recipe
+   */
   assignToRecipe(recipeId: number, tagId: number): boolean {
+    // Verify tag exists
     const tag = this.repository.findById(tagId);
     if (!tag) {
       throw new Error('Tag not found');
     }
+
     return this.repository.assignToRecipe(recipeId, tagId);
   }
 
+  /**
+   * Remove a tag from a recipe
+   */
   removeFromRecipe(recipeId: number, tagId: number): boolean {
     return this.repository.removeFromRecipe(recipeId, tagId);
   }

src/backend/services/WorkflowStatusManager.ts

@@ -1,53 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-
-export type WorkflowStatus = {
-  currentPhase: string | null;
-  overallStatus: 'idle' | 'running' | 'blocked' | 'failed' | 'completed';
-  lastUpdated: string; // ISO timestamp
-  lastFailureReason: string | null;
-  nextAction: string;
-  completedPhases: string[];
-};
-
-const DEFAULT_STATUS_PATH = path.join(process.cwd(), 'status/workflow-status.json');
-
-async function atomicWrite(file: string, data: string) {
-  const dir = path.dirname(file);
-  await fs.mkdir(dir, { recursive: true });
-  const tmp = file + '.tmp';
-  await fs.writeFile(tmp, data, 'utf8');
-  // If parent directory doesn't exist at rename, just do a normal write
-  try {
-    await fs.rename(tmp, file);
-  } catch (e: any) {
-    if (e.code === 'ENOENT') {
-      await fs.writeFile(file, data, 'utf8');
-      // Clean up temp if it still exists
-      try { await fs.unlink(tmp); } catch {}
-    } else {
-      throw e;
-    }
-  }
-}
-
-export class WorkflowStatusManager {
-  private statusPath: string;
-  constructor(statusPath = DEFAULT_STATUS_PATH) {
-    this.statusPath = statusPath;
-  }
-
-  async update(status: WorkflowStatus): Promise<void> {
-    await fs.mkdir(path.dirname(this.statusPath), { recursive: true });
-    await atomicWrite(this.statusPath, JSON.stringify(status, null, 2));
-  }
-
-  async read(): Promise<WorkflowStatus | null> {
-    try {
-      const txt = await fs.readFile(this.statusPath, 'utf8');
-      return JSON.parse(txt) as WorkflowStatus;
-    } catch {
-      return null;
-    }
-  }
-}

src/backend/services/__tests__/PhaseUpdateQueue.test.ts

@@ -1,50 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { promises as fs } from 'fs';
-import path from 'path';
-import {
-  appendPhaseUpdate,
-  getPendingPhaseUpdates,
-  markPhaseUpdateSent,
-  getAllPhaseUpdates,
-  PhaseUpdateEvent
-} from '../PhaseUpdateQueue';
-
-const TEST_QUEUE_FILE = path.join(process.cwd(), 'status/phase-updates.jsonl');
-
-describe('PhaseUpdateQueue', () => {
-  beforeEach(async () => {
-    try {
-      await fs.unlink(TEST_QUEUE_FILE);
-    } catch {}
-  });
-
-  it('appends events and retrieves pending only', async () => {
-    let ev1 = await appendPhaseUpdate({ eventType: 'phase_started', phase: 'import', summary: 'Import started' });
-    let ev2 = await appendPhaseUpdate({ eventType: 'phase_failed', phase: 'import', summary: 'Import failed', details: 'Network error' });
-    expect(ev1.id).toBeDefined();
-    expect(ev2.id).toBeDefined();
-
-    const pending = await getPendingPhaseUpdates();
-    expect(pending.length).toBe(2);
-    expect(pending.map(e => e.id)).toContain(ev1.id);
-    expect(pending.some(e => e.eventType === 'phase_failed')).toBe(true);
-  });
-
-  it('markPhaseUpdateSent updates relayStatus', async () => {
-    let ev = await appendPhaseUpdate({ eventType: 'phase_succeeded', phase: 'parse', summary: 'Parsed recipe' });
-    let id = ev.id;
-    let result = await markPhaseUpdateSent(id);
-    expect(result).toBe(true);
-    let pendingAfter = await getPendingPhaseUpdates();
-    expect(pendingAfter.find(e => e.id === id)).toBeUndefined();
-    let all = await getAllPhaseUpdates();
-    expect(all.find(e => e.id === id)?.relayStatus).toBe('sent');
-  });
-
-  it('getAllPhaseUpdates reads back all events', async () => {
-    await appendPhaseUpdate({ eventType: 'phase_started', phase: 'A', summary: 'Phase A started' });
-    await appendPhaseUpdate({ eventType: 'phase_started', phase: 'B', summary: 'Phase B started' });
-    const all = await getAllPhaseUpdates();
-    expect(all.length).toBeGreaterThanOrEqual(2);
-  });
-});

src/backend/tests/import.test.ts

@@ -1,20 +1,271 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import express from 'express';
 import request from 'supertest';
 import { createImportRoutes } from '../routes/import.js';
 
 describe('Import API', () => {
   let app: express.Application;
+  let infoSpy: ReturnType<typeof vi.spyOn>;
+
   beforeEach(() => {
+    infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
     app = express();
     app.use(express.json());
     app.use('/api/import', createImportRoutes());
   });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('should validate URL request payload', async () => {
     const response = await request(app)
       .post('/api/import/url')
       .send({ url: 'not-a-url' })
+      .expect(400);
+
+    expect(response.body.success).toBe(false);
+    expect(response.body.error).toBeDefined();
+  });
+
+  it('should return imported foundation data and normalized draft for valid Schema.org recipe', async () => {
+    const html = `
+      <html>
+        <head>
+          <script type="application/ld+json">{"@type":"Recipe","name":"Pancakes","recipeIngredient":["Flour","Eggs"],"recipeInstructions":["Mix","Cook"]}</script>
+        </head>
+        <body>Hello</body>
+      </html>
+    `;
+
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+      text: async () => html,
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/recipe' })
       .expect(200);
+
     expect(response.body.success).toBe(true);
+    expect(response.body.data.source_url).toBe('https://example.com/recipe');
+    expect(response.body.data.json_ld_blocks).toEqual([
+      '{"@type":"Recipe","name":"Pancakes","recipeIngredient":["Flour","Eggs"],"recipeInstructions":["Mix","Cook"]}'
+    ]);
+    expect(response.body.data.draft_recipe).toMatchObject({
+      title: 'Pancakes',
+      ingredients: ['Flour', 'Eggs'],
+      instructions: ['Mix', 'Cook']
+    });
+    expect(infoSpy).toHaveBeenCalledWith(
+      '[import.telemetry]',
+      expect.stringContaining('"event":"import_success"')
+    );
+    expect(infoSpy).toHaveBeenCalledWith(
+      '[import.telemetry]',
+      expect.stringContaining('"parser":"schema_org"')
+    );
+  });
+
+  it('should normalize whitespace and HowToStep instructions into draft format', async () => {
+    const html = `
+      <html>
+        <head>
+          <script type="application/ld+json">{"@type":["Thing","Recipe"],"name":"  Tomato Soup  ","description":"  Cozy weeknight soup.  ","recipeIngredient":[" Tomato ","","  Salt  "],"recipeInstructions":[{"text":"  Simmer tomatoes.  "},{"text":"  Blend and serve. "}],"url":"  https://example.com/soup  "}</script>
+        </head>
+      </html>
+    `;
+
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+      text: async () => html,
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/soup-page' })
+      .expect(200);
+
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.draft_recipe).toEqual({
+      title: 'Tomato Soup',
+      description: 'Cozy weeknight soup.',
+      ingredients: ['Tomato', 'Salt'],
+      instructions: ['Simmer tomatoes.', 'Blend and serve.'],
+      source_url: 'https://example.com/soup'
+    });
+  });
+
+  it('should use heuristic fallback parser when Schema.org data is missing', async () => {
+    const html = `
+      <html>
+        <head><title>Easy Banana Bread | Example</title></head>
+        <body>
+          <h1>Easy Banana Bread</h1>
+          <h2>Ingredients</h2>
+          <ul>
+            <li>3 ripe bananas</li>
+            <li>2 cups flour</li>
+          </ul>
+          <h2>Instructions</h2>
+          <ol>
+            <li>Mash bananas.</li>
+            <li>Bake at 350°F for 50 minutes.</li>
+          </ol>
+        </body>
+      </html>
+    `;
+
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+      text: async () => html,
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/banana-bread' })
+      .expect(200);
+
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.json_ld_blocks).toEqual([]);
+    expect(response.body.data.draft_recipe).toEqual({
+      title: 'Easy Banana Bread',
+      ingredients: ['3 ripe bananas', '2 cups flour'],
+      instructions: ['Mash bananas.', 'Bake at 350°F for 50 minutes.'],
+      source_url: 'https://example.com/banana-bread'
+    });
+  });
+
+  it('should return draft_recipe as null for non-recipe JSON-LD', async () => {
+    const html = `
+      <html>
+        <head>
+          <script type="application/ld+json">{"@type":"Event","name":"Not a Recipe"}</script>
+        </head>
+      </html>
+    `;
+
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+      text: async () => html,
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/event' })
+      .expect(200);
+
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.draft_recipe).toBeNull();
+  });
+
+
+  it('should ignore malformed JSON-LD and return null draft when no valid recipe blocks exist', async () => {
+    const html = `
+      <html>
+        <head>
+          <script type="application/ld+json">{"@type":"Recipe","name":"Broken JSON"</script>
+          <script type="application/ld+json">{"@type":"Thing","name":"Still not recipe"}</script>
+        </head>
+      </html>
+    `;
+
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+      text: async () => html,
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/malformed-jsonld' })
+      .expect(200);
+
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.json_ld_blocks).toEqual([
+      '{"@type":"Recipe","name":"Broken JSON"',
+      '{"@type":"Thing","name":"Still not recipe"}'
+    ]);
+    expect(response.body.data.draft_recipe).toBeNull();
+  });
+
+
+  it('should retry transient fetch failures and eventually succeed', async () => {
+    const html = '<html><body><h1>Retry Recipe</h1><h2>Ingredients</h2><ul><li>1 egg</li></ul><h2>Instructions</h2><ol><li>Cook it.</li></ol></body></html>';
+    let callCount = 0;
+
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async () => {
+      callCount += 1;
+      if (callCount < 3) {
+        throw new Error('temporary network issue');
+      }
+
+      return {
+        ok: true,
+        status: 200,
+        headers: new Headers({ 'content-type': 'text/html; charset=utf-8' }),
+        text: async () => html,
+      } as Response;
+    });
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/retry-recipe' })
+      .expect(200);
+
+    expect(callCount).toBe(3);
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.draft_recipe).toMatchObject({
+      title: 'Retry Recipe',
+      ingredients: ['1 egg'],
+      instructions: ['Cook it.'],
+    });
+  });
+
+  it('should return timeout-friendly message after retries are exhausted', async () => {
+    const timeoutError = new Error('aborted');
+    timeoutError.name = 'AbortError';
+
+    vi.spyOn(globalThis, 'fetch').mockRejectedValue(timeoutError);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/slow-recipe' })
+      .expect(504);
+
+    expect(response.body.success).toBe(false);
+    expect(response.body.error).toContain('timed out');
+    expect(infoSpy).toHaveBeenCalledWith(
+      '[import.telemetry]',
+      expect.stringContaining('"failureCode":"IMPORT_TIMEOUT"')
+    );
+  });
+
+
+  it('should return an error for non-HTML responses', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'application/json' }),
+      text: async () => '{"ok":true}',
+    } as Response);
+
+    const response = await request(app)
+      .post('/api/import/url')
+      .send({ url: 'https://example.com/data.json' })
+      .expect(400);
+
+    expect(response.body.success).toBe(false);
+    expect(response.body.error).toContain('HTML');
   });
 });

src/backend/tests/orchestrator-status.test.ts

@@ -1,78 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { promises as fs } from 'fs';
-import path from 'path';
-import { SequentialOrchestrator } from '../services/SequentialOrchestrator';
-import { WorkflowStatusManager, WorkflowStatus } from '../services/WorkflowStatusManager';
-
-const tempCheckpoint = path.join(process.cwd(), 'data/test-orch-checkpoint-status.json');
-const tempStatus = path.join(process.cwd(), 'status/test-workflow-status-status.json');
-
-async function cleanFiles() {
-  try { await fs.unlink(tempCheckpoint); } catch {}
-  try { await fs.unlink(tempStatus); } catch {}
-  await fs.mkdir(path.dirname(tempStatus), { recursive: true });
-}
-
-describe('SequentialOrchestrator + WorkflowStatusManager', () => {
-  beforeEach(async () => { await cleanFiles(); });
-
-  it('writes correct status for each phase boundary (success)', async () => {
-    const calls: string[] = [];
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'phase1', run: async () => { calls.push('1'); }, nextAction: 'next1' },
-        { name: 'phase2', run: async () => { calls.push('2'); }, nextAction: 'next2' },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-      statusFilePath: tempStatus,
-    });
-    await orchestrator.run();
-    const statusMgr = new WorkflowStatusManager(tempStatus);
-    const status: WorkflowStatus | null = await statusMgr.read();
-    expect(status).not.toBeNull();
-    expect(status!.overallStatus).toBe('completed');
-    expect(status!.currentPhase).toBeNull();
-    expect(status!.completedPhases).toEqual(['phase1','phase2']);
-    expect(status!.lastFailureReason).toBeNull();
-    expect(status!.nextAction).toBe('done');
-  });
-
-  it('writes correct status for failed phase and retry', async () => {
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'phase1', run: async () => { throw new Error('nope'); }, retry: 2, nextAction: 'next1' },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-      statusFilePath: tempStatus,
-    });
-    await orchestrator.run();
-    const statusMgr = new WorkflowStatusManager(tempStatus);
-    const status: WorkflowStatus | null = await statusMgr.read();
-    expect(status).not.toBeNull();
-    expect(status!.overallStatus).toBe('failed');
-    expect(status!.currentPhase).toBe('phase1');
-    expect(status!.completedPhases).toEqual([]);
-    expect((status!.lastFailureReason||'')+ '').toMatch('nope');
-  });
-
-  it('status is atomic (no corruption)', async () => {
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'p1', run: async () => {} },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-      statusFilePath: tempStatus,
-    });
-    await orchestrator.run();
-    // Try reading incomplete file (simulate crash in middle of write)
-    const statusMgr = new WorkflowStatusManager(tempStatus);
-    const txt = await fs.readFile(tempStatus, 'utf8');
-    expect(() => JSON.parse(txt)).not.toThrow();
-    const stat = await statusMgr.read();
-    expect(stat).not.toBeNull();
-    expect(stat!.overallStatus).toBe('completed');
-  });
-});

src/backend/tests/orchestrator.test.ts

@@ -1,29 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { promises as fs } from 'fs';
-import path from 'path';
-import { SequentialOrchestrator } from '../services/SequentialOrchestrator';
-const tempCheckpoint = path.join(process.cwd(), 'data/test-orch-checkpoint-orchestrator.json');
-const tempStatus = path.join(process.cwd(), 'status/test-workflow-status-orchestrator.json');
-async function cleanFiles() {
-  try { await fs.unlink(tempCheckpoint); } catch {}
-  try { await fs.unlink(tempStatus); } catch {}
-  await fs.mkdir(path.dirname(tempStatus), { recursive: true });
-}
-describe('SequentialOrchestrator', () => {
-  beforeEach(async () => { await cleanFiles(); });
-  it('executes all phases in order without retries', async () => {
-    const calls: string[] = [];
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'phase1', run: async () => { calls.push('1'); }, nextAction: 'proceed' },
-        { name: 'phase2', run: async () => { calls.push('2'); }, nextAction: 'proceed' },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-      statusFilePath: tempStatus,
-    });
-    await orchestrator.run();
-    expect(calls).toEqual(['1','2']);
-  });
-  // All other unchanged tests are retained... below truncated for brevity.
-});

src/backend/tests/phase-progress-logger.test.ts

@@ -1,69 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { promises as fs } from 'fs';
-import path from 'path';
-import { SequentialOrchestrator } from '../services/SequentialOrchestrator';
-import { getRecentPhaseProgress } from '../services/PhaseProgressLogger';
-
-const tempCheckpoint = path.join(process.cwd(), 'data/test-orch-checkpoint-progress.json');
-const tempLog = path.join(process.cwd(), 'status/phase-progress.jsonl');
-
-async function cleanFiles() {
-  try { await fs.unlink(tempCheckpoint); } catch {}
-  try { await fs.unlink(tempLog); } catch {}
-}
-
-describe('Phase Progress Logging', () => {
-  beforeEach(async () => {
-    await cleanFiles();
-  });
-
-  it('logs success and failure with next action and reason', async () => {
-    let tries = 0;
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'a', run: async () => {} },
-        { name: 'fail1', run: async () => { tries++; if (tries < 2) throw new Error('boom'); }, retry: 2 },
-        { name: 'b', run: async () => {} },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-    });
-    await orchestrator.run();
-    const entries = await getRecentPhaseProgress(10);
-    // There should be at least fail1 failure, then success, and at least one other phase
-    expect(entries.some(e => e.phase==='fail1' && e.status==='failure')).toBe(true);
-    expect(entries.some(e => e.phase==='fail1' && e.status==='success')).toBe(true);
-    const failure = entries.find(e => e.phase==='fail1' && e.status==='failure');
-    expect(failure).toBeDefined();
-    expect(failure!.failureReason).toBe('boom');
-    expect(['retry','manual intervention']).toContain(failure!.nextAction);
-    const success = entries.find(e => e.phase==='fail1' && e.status==='success');
-    expect(success).toBeDefined();
-    expect(success!.nextAction).toBe('proceed');
-  });
-
-  it('logs nextAction as manual intervention after final failure', async () => {
-    const orchestrator = new SequentialOrchestrator({
-      phases: [
-        { name: 'a', run: async () => {} },
-        { name: 'fail-all', run: async () => { throw new Error('nope'); }, retry: 2 },
-        { name: 'b', run: async () => {} },
-      ],
-      checkpointPath: tempCheckpoint,
-      input: undefined,
-      maxAttemptsPerPhasePerRun: 2,
-    });
-    await orchestrator.run();
-    const entries = await getRecentPhaseProgress(10);
-    const fails = entries.filter(e => e.phase==='fail-all');
-    expect(fails.length).toBe(2);
-    expect(fails.every(e => e.status==='failure')).toBe(true);
-    expect(fails[1].nextAction).toBe('manual intervention');
-  });
-
-  it('helper returns [] if log does not exist', async () => {
-    await fs.unlink(tempLog).catch(() => {});
-    const entries = await getRecentPhaseProgress(5);
-    expect(entries).toEqual([]);
-  });
-});

src/backend/tests/recipes.test.ts

@@ -4,109 +4,288 @@ import request from 'supertest';
 import initSqlJs from 'sql.js';
 import { readFileSync } from 'fs';
 import { createRecipeRoutes } from '../routes/recipes.js';
-import { Tag } from '../types/tag.js';
-import { Ingredient, Step } from '../types/recipe.js';
 
 describe('Recipe API', () => {
   let app: express.Application;
-  let db: any;
+  
   beforeEach(async () => {
+    // Create a fresh in-memory database for each test
     const SQL = await initSqlJs();
-    db = new SQL.Database();
+    const db = new SQL.Database();
+    
+    // Load schema
     const schemaPath = new URL('../db/schema.sql', import.meta.url).pathname;
     const schema = readFileSync(schemaPath, 'utf-8');
     db.exec(schema);
-    // Seed tags
+    
-    db.run("INSERT INTO tags (id, name) VALUES (1, 'Dessert'), (2, 'Breakfast')");
+    // Set up Express app with recipe routes
     app = express();
     app.use(express.json());
     app.use('/api/recipes', createRecipeRoutes(db));
   });
 
   describe('POST /api/recipes', () => {
-    it('should create a new recipe (normalized)', async () => {
+    it('should create a new recipe', async () => {
       const recipe = {
         title: 'Chocolate Chip Cookies',
         description: 'Classic homemade cookies',
+        ingredients: ['flour', 'sugar', 'chocolate chips'],
+        instructions: ['Mix ingredients', 'Bake at 350°F'],
         servings: 24,
-        ingredients: [{ item: 'flour', quantity: '2', unit: 'cups' }, { item: 'sugar' }, { item: 'chocolate chips' }],
-        steps: [ { instruction: 'Mix ingredients' }, { instruction: 'Bake at 350°F' } ],
-        tagIds: [1]
       };
+
       const response = await request(app)
         .post('/api/recipes')
         .send(recipe)
         .expect(201);
+
       expect(response.body.success).toBe(true);
       expect(response.body.data).toMatchObject({
         id: 1,
         title: recipe.title,
         description: recipe.description,
+        ingredients: recipe.ingredients,
+        instructions: recipe.instructions,
         servings: recipe.servings,
       });
-      expect(response.body.data.ingredients[0]).toMatchObject({ item: 'flour' });
-      expect(response.body.data.steps[0].instruction).toBe('Mix ingredients');
       expect(response.body.data.created_at).toBeDefined();
       expect(response.body.data.updated_at).toBeDefined();
-      expect(response.body.data.tags).toEqual([{id:1,name:'Dessert'}]);
     });
 
     it('should reject recipe without title', async () => {
       const recipe = {
-        ingredients: [{ item: 'flour' }],
+        ingredients: ['flour'],
-        steps: [{ instruction: 'Mix' }],
+        instructions: ['Mix'],
       };
+
       const response = await request(app)
         .post('/api/recipes')
         .send(recipe)
         .expect(400);
+
+      expect(response.body.success).toBe(false);
+      expect(response.body.error).toBeDefined();
+    });
+
+    it('should reject recipe without ingredients', async () => {
+      const recipe = {
+        title: 'Test Recipe',
+        ingredients: [],
+        instructions: ['Mix'],
+      };
+
+      const response = await request(app)
+        .post('/api/recipes')
+        .send(recipe)
+        .expect(400);
+
+      expect(response.body.success).toBe(false);
+    });
+
+    it('should reject recipe without instructions', async () => {
+      const recipe = {
+        title: 'Test Recipe',
+        ingredients: ['flour'],
+        instructions: [],
+      };
+
+      const response = await request(app)
+        .post('/api/recipes')
+        .send(recipe)
+        .expect(400);
+
       expect(response.body.success).toBe(false);
     });
   });
 
   describe('GET /api/recipes', () => {
-    beforeEach(() => {
+    it('should return empty list when no recipes exist', async () => {
-      db.run("INSERT INTO recipes (id, title, created_at, updated_at) VALUES (1, 'Chocolate Cake', 1, 1)");
+      const response = await request(app)
-      db.run("INSERT INTO recipes (id, title, created_at, updated_at) VALUES (2, 'Scrambled Eggs', 2, 2)");
+        .get('/api/recipes')
-      db.run("INSERT INTO recipes (id, title, created_at, updated_at) VALUES (3, 'BLT Sandwich', 3, 3)");
+        .expect(200);
-      db.run("INSERT INTO ingredients (recipe_id, item, position) VALUES (1, 'chocolate', 0)");
+
-      db.run("INSERT INTO ingredients (recipe_id, item, position) VALUES (2, 'eggs', 0)");
+      expect(response.body.success).toBe(true);
-      db.run("INSERT INTO ingredients (recipe_id, item, position) VALUES (3, 'bacon', 0)");
+      expect(response.body.data).toEqual([]);
-      db.run("INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (1, 1)"); // Dessert
+      expect(response.body.meta.total).toBe(0);
-      db.run("INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (2, 2)"); // Breakfast
-      db.run("INSERT INTO recipe_tags (recipe_id, tag_id) VALUES (3, 2)"); // Breakfast
     });
 
-    it('should search by recipe title', async () => {
+    it('should return list of recipes', async () => {
-      const res = await request(app).get('/api/recipes?search=Eggs').expect(200);
+      // Create test recipes
-      expect(res.body.data.length).toBe(1);
+      await request(app).post('/api/recipes').send({
-      expect(res.body.data[0].title).toMatch(/Eggs/);
+        title: 'Recipe 1',
+        ingredients: ['ingredient 1'],
+        instructions: ['step 1'],
+      });
+      await request(app).post('/api/recipes').send({
+        title: 'Recipe 2',
+        ingredients: ['ingredient 2'],
+        instructions: ['step 2'],
+      });
+
+      const response = await request(app)
+        .get('/api/recipes')
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.length).toBe(2);
+      expect(response.body.meta.total).toBe(2);
     });
 
-    it('should search by ingredient item', async () => {
+    it('should support pagination', async () => {
-      const res = await request(app).get('/api/recipes?search=chocolate').expect(200);
+      // Create 3 test recipes
-      expect(res.body.data.length).toBe(1);
+      for (let i = 1; i <= 3; i++) {
-      expect(res.body.data[0].title).toMatch(/Chocolate/);
+        await request(app).post('/api/recipes').send({
+          title: `Recipe ${i}`,
+          ingredients: ['ingredient'],
+          instructions: ['step'],
+        });
+      }
+
+      const response = await request(app)
+        .get('/api/recipes?limit=2&offset=1')
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.length).toBe(2);
+      expect(response.body.meta.total).toBe(3);
+      expect(response.body.meta.limit).toBe(2);
+      expect(response.body.meta.offset).toBe(1);
     });
 
-    it('should search by tag name', async () => {
+    it('should support search', async () => {
-      const res = await request(app).get('/api/recipes?search=Dessert').expect(200);
+      await request(app).post('/api/recipes').send({
-      expect(res.body.data.length).toBe(1);
+        title: 'Chocolate Cake',
-      expect(res.body.data[0].title).toMatch(/Chocolate/);
+        ingredients: ['chocolate'],
+        instructions: ['bake'],
+      });
+      await request(app).post('/api/recipes').send({
+        title: 'Vanilla Cookies',
+        ingredients: ['vanilla'],
+        instructions: ['bake'],
+      });
+
+      const response = await request(app)
+        .get('/api/recipes?search=chocolate')
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.length).toBe(1);
+      expect(response.body.data[0].title).toBe('Chocolate Cake');
+    });
+  });
+
+  describe('GET /api/recipes/:id', () => {
+    it('should get a recipe by ID', async () => {
+      const createResponse = await request(app).post('/api/recipes').send({
+        title: 'Test Recipe',
+        ingredients: ['ingredient'],
+        instructions: ['step'],
+      });
+
+      const id = createResponse.body.data.id;
+
+      const response = await request(app)
+        .get(`/api/recipes/${id}`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.id).toBe(id);
+      expect(response.body.data.title).toBe('Test Recipe');
     });
 
-    it('should filter by tag id', async () => {
+    it('should return 404 for non-existent recipe', async () => {
-      const res = await request(app).get('/api/recipes?tagId=2').expect(200);
+      const response = await request(app)
-      expect(res.body.data.length).toBe(2);
+        .get('/api/recipes/999')
-      const titles = res.body.data.map((r: any) => r.title);
+        .expect(404);
-      expect(titles).toContain('Scrambled Eggs');
+
-      expect(titles).toContain('BLT Sandwich');
+      expect(response.body.success).toBe(false);
+      expect(response.body.error).toBe('Recipe not found');
     });
 
-    it('should filter by search AND tagId', async () => {
+    it('should return 400 for invalid ID', async () => {
-      const res = await request(app).get('/api/recipes?search=Sandwich&tagId=2').expect(200);
+      const response = await request(app)
-      expect(res.body.data.length).toBe(1);
+        .get('/api/recipes/invalid')
-      expect(res.body.data[0].title).toBe('BLT Sandwich');
+        .expect(400);
+
+      expect(response.body.success).toBe(false);
+    });
+  });
+
+  describe('PUT /api/recipes/:id', () => {
+    it('should update a recipe', async () => {
+      const createResponse = await request(app).post('/api/recipes').send({
+        title: 'Original Title',
+        ingredients: ['ingredient'],
+        instructions: ['step'],
+      });
+
+      const id = createResponse.body.data.id;
+
+      const response = await request(app)
+        .put(`/api/recipes/${id}`)
+        .send({ title: 'Updated Title' })
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.title).toBe('Updated Title');
+      expect(response.body.data.ingredients).toEqual(['ingredient']);
+    });
+
+    it('should return 404 for non-existent recipe', async () => {
+      const response = await request(app)
+        .put('/api/recipes/999')
+        .send({ title: 'Updated' })
+        .expect(404);
+
+      expect(response.body.success).toBe(false);
+    });
+
+    it('should reject empty title', async () => {
+      const createResponse = await request(app).post('/api/recipes').send({
+        title: 'Original Title',
+        ingredients: ['ingredient'],
+        instructions: ['step'],
+      });
+
+      const id = createResponse.body.data.id;
+
+      const response = await request(app)
+        .put(`/api/recipes/${id}`)
+        .send({ title: '' })
+        .expect(400);
+
+      expect(response.body.success).toBe(false);
+    });
+  });
+
+  describe('DELETE /api/recipes/:id', () => {
+    it('should delete a recipe', async () => {
+      const createResponse = await request(app).post('/api/recipes').send({
+        title: 'To Delete',
+        ingredients: ['ingredient'],
+        instructions: ['step'],
+      });
+
+      const id = createResponse.body.data.id;
+
+      const response = await request(app)
+        .delete(`/api/recipes/${id}`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+
+      // Verify it's deleted
+      await request(app)
+        .get(`/api/recipes/${id}`)
+        .expect(404);
+    });
+
+    it('should return 404 for non-existent recipe', async () => {
+      const response = await request(app)
+        .delete('/api/recipes/999')
+        .expect(404);
+
+      expect(response.body.success).toBe(false);
     });
   });
 });

src/backend/tests/tags.test.ts

@@ -11,50 +11,298 @@ describe('Tag API', () => {
   let db: any;
 
   beforeEach(async () => {
+    // Initialize sql.js
     const SQL = await initSqlJs();
     db = new SQL.Database();
+
+    // Load and execute schema
     const schemaPath = path.join(process.cwd(), 'src/backend/db/schema.sql');
     const schema = fs.readFileSync(schemaPath, 'utf-8');
     db.exec(schema);
+
+    // Create Express app with tag routes
     app = express();
     app.use(express.json());
     app.use('/api/tags', createTagRoutes(db));
+
     // Create test recipe for tag assignment tests
-    db.run('INSERT INTO recipes (title, created_at, updated_at) VALUES (?, ?, ?)', ['Test Recipe', Date.now(), Date.now()]);
+    db.run(`
+      INSERT INTO recipes (
+        title, ingredients, instructions, created_at, updated_at
+      ) VALUES (?, ?, ?, ?, ?)
+    `, [
+      'Test Recipe',
+      JSON.stringify(['ingredient 1']),
+      JSON.stringify(['step 1']),
+      Date.now(),
+      Date.now(),
+    ]);
   });
 
   describe('POST /api/tags', () => {
     it('should create a new tag', async () => {
       const response = await request(app)
         .post('/api/tags')
-        .send({ name: 'Breakfast' })
+        .send({
+          name: 'Breakfast',
+          color: '#FF5733',
+        })
         .expect(201);
+
       expect(response.body.success).toBe(true);
-      expect(response.body.data).toMatchObject({ name: 'Breakfast' });
+      expect(response.body.data).toMatchObject({
+        name: 'Breakfast',
+        color: '#FF5733',
+      });
       expect(response.body.data.id).toBeDefined();
     });
+
+    it('should create a tag without color', async () => {
+      const response = await request(app)
+        .post('/api/tags')
+        .send({
+          name: 'Lunch',
+        })
+        .expect(201);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.name).toBe('Lunch');
+      expect(response.body.data.color).toBeNull();
+    });
+
     it('should reject empty name', async () => {
       const response = await request(app)
         .post('/api/tags')
-        .send({ name: '' })
+        .send({
+          name: '',
+        })
         .expect(400);
+
       expect(response.body.success).toBe(false);
     });
-    it('should reject duplicate tag names', async () => {
+
-      await request(app).post('/api/tags').send({ name: 'Breakfast' }).expect(201);
+    it('should reject invalid color format', async () => {
-      const response = await request(app).post('/api/tags').send({ name: 'Breakfast' }).expect(400);
+      const response = await request(app)
+        .post('/api/tags')
+        .send({
+          name: 'Dinner',
+          color: 'red',
+        })
+        .expect(400);
+
       expect(response.body.success).toBe(false);
     });
+
+    it('should reject duplicate tag names', async () => {
+      await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' })
+        .expect(201);
+
+      const response = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' })
+        .expect(400);
+
+      expect(response.body.success).toBe(false);
+      expect(response.body.error).toContain('already exists');
+    });
   });
 
   describe('GET /api/tags', () => {
     it('should list all tags', async () => {
+      // Create test tags
       await request(app).post('/api/tags').send({ name: 'Breakfast' });
       await request(app).post('/api/tags').send({ name: 'Lunch' });
       await request(app).post('/api/tags').send({ name: 'Dinner' });
-      const response = await request(app).get('/api/tags').expect(200);
+
+      const response = await request(app)
+        .get('/api/tags')
+        .expect(200);
+
       expect(response.body.success).toBe(true);
       expect(response.body.data).toHaveLength(3);
+      expect(response.body.data[0].name).toBe('Breakfast'); // Sorted alphabetically
+    });
+
+    it('should return empty array when no tags exist', async () => {
+      const response = await request(app)
+        .get('/api/tags')
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data).toEqual([]);
+    });
+  });
+
+  describe('GET /api/tags/:id', () => {
+    it('should get a tag by ID', async () => {
+      const createResponse = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' });
+
+      const tagId = createResponse.body.data.id;
+
+      const response = await request(app)
+        .get(`/api/tags/${tagId}`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.name).toBe('Breakfast');
+    });
+
+    it('should return 404 for non-existent tag', async () => {
+      const response = await request(app)
+        .get('/api/tags/999')
+        .expect(404);
+
+      expect(response.body.success).toBe(false);
+    });
+  });
+
+  describe('PUT /api/tags/:id', () => {
+    it('should update tag name', async () => {
+      const createResponse = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' });
+
+      const tagId = createResponse.body.data.id;
+
+      const response = await request(app)
+        .put(`/api/tags/${tagId}`)
+        .send({ name: 'Morning Meal' })
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.name).toBe('Morning Meal');
+    });
+
+    it('should update tag color', async () => {
+      const createResponse = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' });
+
+      const tagId = createResponse.body.data.id;
+
+      const response = await request(app)
+        .put(`/api/tags/${tagId}`)
+        .send({ color: '#00FF00' })
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.color).toBe('#00FF00');
+    });
+
+    it('should return 404 for non-existent tag', async () => {
+      const response = await request(app)
+        .put('/api/tags/999')
+        .send({ name: 'Updated' })
+        .expect(404);
+
+      expect(response.body.success).toBe(false);
+    });
+  });
+
+  describe('DELETE /api/tags/:id', () => {
+    it('should delete a tag', async () => {
+      const createResponse = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' });
+
+      const tagId = createResponse.body.data.id;
+
+      const response = await request(app)
+        .delete(`/api/tags/${tagId}`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+
+      // Verify it's deleted
+      await request(app)
+        .get(`/api/tags/${tagId}`)
+        .expect(404);
+    });
+
+    it('should return 404 for non-existent tag', async () => {
+      const response = await request(app)
+        .delete('/api/tags/999')
+        .expect(404);
+
+      expect(response.body.success).toBe(false);
+    });
+  });
+
+  describe('Tag Assignment', () => {
+    let tagId: number;
+    let recipeId: number;
+
+    beforeEach(async () => {
+      // Create a tag
+      const tagResponse = await request(app)
+        .post('/api/tags')
+        .send({ name: 'Breakfast' });
+      tagId = tagResponse.body.data.id;
+
+      // Get recipe ID
+      const result = db.exec('SELECT id FROM recipes LIMIT 1');
+      recipeId = result[0].values[0][0] as number;
+    });
+
+    it('should assign tag to recipe', async () => {
+      const response = await request(app)
+        .post(`/api/tags/recipes/${recipeId}/tags`)
+        .send({ tag_id: tagId })
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.assigned).toBe(true);
+    });
+
+    it('should get tags for a recipe', async () => {
+      // Assign tag
+      await request(app)
+        .post(`/api/tags/recipes/${recipeId}/tags`)
+        .send({ tag_id: tagId });
+
+      // Get tags
+      const response = await request(app)
+        .get(`/api/tags/recipes/${recipeId}/tags`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data).toHaveLength(1);
+      expect(response.body.data[0].name).toBe('Breakfast');
+    });
+
+    it('should remove tag from recipe', async () => {
+      // Assign tag first
+      await request(app)
+        .post(`/api/tags/recipes/${recipeId}/tags`)
+        .send({ tag_id: tagId });
+
+      // Remove tag
+      const response = await request(app)
+        .delete(`/api/tags/recipes/${recipeId}/tags/${tagId}`)
+        .expect(200);
+
+      expect(response.body.success).toBe(true);
+      expect(response.body.data.removed).toBe(true);
+
+      // Verify it's removed
+      const getResponse = await request(app)
+        .get(`/api/tags/recipes/${recipeId}/tags`);
+
+      expect(getResponse.body.data).toHaveLength(0);
+    });
+
+    it('should handle assigning non-existent tag', async () => {
+      const response = await request(app)
+        .post(`/api/tags/recipes/${recipeId}/tags`)
+        .send({ tag_id: 999 })
+        .expect(400);
+
+      expect(response.body.success).toBe(false);
+      expect(response.body.error).toContain('not found');
     });
   });
 });

src/backend/types/recipe.ts

@@ -1,65 +1,49 @@
-import type { Tag } from './tag.js';
+/**
-
+ * Recipe domain types
-// Ingredient and Step domain types
+ */
-export interface Ingredient {
-  id: number;
-  recipe_id: number;
-  position: number;
-  quantity?: string | null;
-  unit?: string | null;
-  item: string;
-  notes?: string | null;
-}
-
-export interface Step {
-  id: number;
-  recipe_id: number;
-  position: number;
-  instruction: string;
-}
 
 export interface Recipe {
   id: number;
   title: string;
   description: string | null;
+  ingredients: string[]; // Stored as JSON in DB
+  instructions: string[]; // Stored as JSON in DB
+  source_url: string | null;
+  notes: string | null;
   servings: number | null;
   prep_time_minutes: number | null;
   cook_time_minutes: number | null;
-  source_url: string | null;
+  created_at: number; // Unix timestamp
-  created_at: number;
+  updated_at: number; // Unix timestamp
-  updated_at: number;
+  last_cooked_at: number | null;
-  ingredients: Ingredient[];
-  steps: Step[];
-  tags: Tag[];
 }
 
 export interface CreateRecipeInput {
   title: string;
   description?: string;
+  ingredients: string[];
+  instructions: string[];
+  source_url?: string;
+  notes?: string;
   servings?: number;
   prep_time_minutes?: number;
   cook_time_minutes?: number;
-  source_url?: string;
-  ingredients: Partial<Omit<Ingredient,"id"|"recipe_id"> & {position?: number}>[];
-  steps: Partial<Omit<Step,"id"|"recipe_id"> & {position?: number}>[];
-  tagIds?: number[];
 }
 
 export interface UpdateRecipeInput {
   title?: string;
   description?: string | null;
+  ingredients?: string[];
+  instructions?: string[];
+  source_url?: string | null;
+  notes?: string | null;
   servings?: number | null;
   prep_time_minutes?: number | null;
   cook_time_minutes?: number | null;
-  source_url?: string | null;
-  ingredients?: Partial<Omit<Ingredient,"id"|"recipe_id"> & {position?: number}>[];
-  steps?: Partial<Omit<Step,"id"|"recipe_id"> & {position?: number}>[];
-  tagIds?: number[];
 }
 
 export interface RecipeFilters {
-  search?: string;
+  search?: string; // Search in title, description, ingredients
   offset?: number;
   limit?: number;
-  tagId?: number | null;
 }

src/backend/types/tag.ts

@@ -1,15 +1,21 @@
-// Tag domain types: normalized (no color)
+/**
+ * Tag domain types
+ */
+
 export interface Tag {
   id: number;
   name: string;
+  color: string | null;
 }
 
 export interface CreateTagInput {
   name: string;
+  color?: string;
 }
 
 export interface UpdateTagInput {
   name?: string;
+  color?: string | null;
 }
 
 export interface RecipeTag {

status/phase-updates.jsonl

@@ -1,7 +0,0 @@
-{"id":"77e4cf2f-0c8f-4739-b374-3f39e3d2d9da","eventType":"phase_started","phase":"A","timestamp":"2026-03-26T17:43:12.063Z","summary":"Phase A started","relayStatus":"pending"}
-{"id":"0f8dc76c-1f29-4275-87d4-378c55905429","eventType":"phase_started","phase":"B","timestamp":"2026-03-26T17:43:12.064Z","summary":"Phase B started","relayStatus":"pending"}
-{"id":"d4a04c15-7ec3-4929-9a43-42c6424b4d3a","eventType":"phase_started","phase":"phase1","timestamp":"2026-03-26T17:43:12.065Z","summary":"Phase 'phase1' started","details":{"attempt":1},"relayStatus":"pending"}
-{"id":"72476bbd-62e5-4f51-a83d-5052592907ab","eventType":"phase_succeeded","phase":"phase1","timestamp":"2026-03-26T17:43:12.066Z","summary":"Phase 'phase1' succeeded","details":{"attempt":1},"relayStatus":"pending"}
-{"id":"55fdc626-770b-4c11-bce3-b525253c148d","eventType":"phase_started","phase":"phase2","timestamp":"2026-03-26T17:43:12.070Z","summary":"Phase 'phase2' started","details":{"attempt":1},"relayStatus":"pending"}
-{"id":"c6c2fedb-4891-4d8d-b6a1-30b674495966","eventType":"phase_succeeded","phase":"phase2","timestamp":"2026-03-26T17:43:12.071Z","summary":"Phase 'phase2' succeeded","details":{"attempt":1},"relayStatus":"pending"}
-{"id":"b6f54b43-e40c-4f8f-b628-f786cf23ab65","eventType":"workflow_completed","phase":null,"timestamp":"2026-03-26T17:43:12.074Z","summary":"Workflow completed successfully","details":{"totalPhases":2},"relayStatus":"pending"}

status/test-workflow-status.json

@@ -1,11 +0,0 @@
-{
-  "currentPhase": null,
-  "overallStatus": "completed",
-  "lastUpdated": "2026-03-26T17:43:12.075Z",
-  "lastFailureReason": null,
-  "nextAction": "done",
-  "completedPhases": [
-    "phase1",
-    "phase2"
-  ]
-}

status/workflow-status.json

@@ -1,10 +0,0 @@
-{
-  "currentPhase": "fail-all",
-  "overallStatus": "running",
-  "lastUpdated": "2026-03-26T17:42:25.509Z",
-  "lastFailureReason": null,
-  "nextAction": "",
-  "completedPhases": [
-    "a"
-  ]
-}

tests/phase-updates-queue-README.md

@@ -1,29 +0,0 @@
-# Phase Update Queue: Manual Test/Verification
-
-This file documents manual test strategy for phase update events integration.
-
-- Unit tests validate:
-  - Events written (appendPhaseUpdate)
-  - Reading only pending (getPendingPhaseUpdates)
-  - Marking sent (markPhaseUpdateSent)
-  - Retrieval (getAllPhaseUpdates)
-
-- Integration Points:
-  - SequentialOrchestrator emits correct events at phase boundaries
-  - Events expected:
-    - phase_started
-    - phase_succeeded
-    - phase_failed (with failure reason)
-    - workflow_completed
-  - Fields: eventType, phase, timestamp, summary, details, relayStatus
-
-# To run tests:
-
-```
-npx vitest run src/backend/services/__tests__/PhaseUpdateQueue.test.ts
-```
-
-# Integration Manual Testing
-- Run a workflow and observe contents of `status/phase-updates.jsonl`
-- Check that main orchestrator can fetch and relay pending events
-- Mark events sent and verify relayStatus=sent