fix(search): runSearch bricht pending Debounce ab

Enter waehrend Debounce-Fenster feuerte bislang eine zweite Fetch
fuer dieselbe Query. Race-Guard greift nicht, weil q identisch ist.
runSearch clearTimeout am Anfang behebt's, neuer Unit-Test sichert es.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.gitignore

@@ -7,4 +7,5 @@ data/
 *.log
 test-results/
 playwright-report/
+playwright-report-remote/
 .playwright-mcp/

docs/superpowers/plans/2026-04-19-search-state-store.md

@@ -0,0 +1,971 @@
+# Search-State-Store Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extract the duplicated live-search state machine from `src/routes/+page.svelte` and `src/routes/+layout.svelte` into a single reusable `SearchStore` class in `src/lib/client/search.svelte.ts`, so both the home search and the header dropdown drive their UI from the same logic.
+
+**Architecture:** Factory-class store (one instance per consumer, like `new SearchStore()` — not a shared singleton). Holds all `$state` fields currently inlined in the Svelte components (query, hits, webHits, searching flags, error, pagination state), plus imperative methods (`runDebounced`, `loadMore`, `reSearch`, `reset`, `captureSnapshot`, `restoreSnapshot`). Consumers keep UI-specific concerns (URL sync, dropdown open/close, snapshot hookup) in their component — the store owns only fetch/pagination/debounce.
+
+**Tech Stack:** Svelte 5 runes (`$state` in class fields), TypeScript-strict, Vitest + jsdom, fetch injection for tests.
+
+---
+
+## Design Snapshot
+
+**API surface (locked before implementation):**
+
+```ts
+// src/lib/client/search.svelte.ts
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;              // default 30
+  debounceMs?: number;            // default 300
+  filterDebounceMs?: number;      // default 150 (shorter for filter-change re-search)
+  minQueryLength?: number;        // default 4 (query.trim().length > 3)
+  filterParam?: () => string;     // e.g. () => searchFilterStore.queryParam → "foo,bar" or ""
+  fetchImpl?: typeof fetch;       // injected for tests
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  constructor(opts?: SearchStoreOptions);
+
+  /** Call from `$effect(() => { store.query; store.runDebounced(); })`. Handles debounce + race-guard. */
+  runDebounced(): void;
+  /** Immediate (no debounce). Used by form `submit`. */
+  runSearch(q: string): Promise<void>;
+  /** Filter-change re-search — shorter debounce. */
+  reSearch(): void;
+  /** Paginate locally, then fall back to web. Idempotent while in-flight. */
+  loadMore(): Promise<void>;
+  /** Clear query + results + cancel any pending debounce (e.g. `afterNavigate`). */
+  reset(): void;
+  /** For SvelteKit `Snapshot<>` API. */
+  captureSnapshot(): SearchSnapshot;
+  restoreSnapshot(s: SearchSnapshot): void;
+}
+```
+
+**Behavior invariants (copied 1:1 from the current code — do NOT change):**
+- Query threshold: `trim().length > 3` triggers search, `<= 3` clears results.
+- Race-guard: after every `await fetch(...)`, bail if `this.query.trim() !== q`.
+- When `hits.length === 0` after local search → auto-fire web search page 1.
+- `loadMore`: first drains local (offset pagination), then switches to web (pageno pagination).
+- Dedup: local by `id`, web by `url`.
+- `webError`: keep the message text so UI can render it.
+
+**What stays OUT of the store:**
+- URL sync (`history.replaceState` with `?q=`) → stays in `+page.svelte`.
+- Dropdown visibility (`navOpen`) → stays in `+layout.svelte`.
+- `afterNavigate`-reset wiring → stays in `+layout.svelte`, just calls `store.reset()`.
+- SvelteKit `Snapshot<>` wiring → stays in `+page.svelte`, delegates to store.
+- Filter-change re-search `$effect` → stays in `+page.svelte`, just calls `store.reSearch()`.
+
+---
+
+## Task 1: Failing Unit Tests for SearchStore
+
+**Files:**
+- Create: `tests/unit/search-store.test.ts`
+
+- [ ] **Step 1: Write test file with full behavior coverage (runs red until Task 2)**
+
+```ts
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { SearchStore } from '../../src/lib/client/search.svelte';
+
+type FetchMock = ReturnType<typeof vi.fn>;
+
+function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
+  const calls = [...responses];
+  return vi.fn(async () => {
+    const r = calls.shift();
+    if (!r) throw new Error('fetch called more times than expected');
+    return {
+      ok: r.ok ?? true,
+      status: r.status ?? 200,
+      json: async () => r.body
+    } as Response;
+  });
+}
+
+describe('SearchStore', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('keeps results empty while query is <= 3 chars (debounced)', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'abc';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(store.searching).toBe(false);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('fires local search after debounce when query > 3 chars', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
+    store.query = 'pasta';
+    store.runDebounced();
+    expect(store.searching).toBe(true);
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
+    expect(store.hits).toHaveLength(1);
+    expect(store.searchedFor).toBe('pasta');
+    expect(store.localExhausted).toBe(true); // 1 hit < pageSize → exhausted
+  });
+
+  it('falls back to web search when local returns zero hits', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'pizza';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
+    expect(fetchImpl).toHaveBeenCalledTimes(2);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
+    expect(store.webPageno).toBe(1);
+  });
+
+  it('races-guards: stale response discarded when query changed mid-flight', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 99, title: 'Stale', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'stale-query';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    store.query = 'different'; // user kept typing
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
+    expect(store.hits).toEqual([]); // stale discarded
+  });
+
+  it('loadMore: drains local first (offset pagination)', async () => {
+    vi.useFakeTimers();
+    const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const fetchImpl = mockFetch([
+      { body: { hits: page1 } },
+      { body: { hits: page2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'meal';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(30));
+    expect(store.localExhausted).toBe(false);
+    await store.loadMore();
+    expect(store.hits).toHaveLength(35);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
+    expect(store.localExhausted).toBe(true);
+  });
+
+  it('loadMore: switches to web pagination after local exhausted', async () => {
+    vi.useFakeTimers();
+    const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
+    const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
+    const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
+    const fetchImpl = mockFetch([
+      { body: { hits: local } },
+      { body: { hits: webP1 } },   // auto-fallback? No — local has 1 hit, so no fallback.
+      { body: { hits: webP2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'soup';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    expect(store.localExhausted).toBe(true);
+    await store.loadMore(); // web pageno=1
+    expect(store.webHits).toHaveLength(1);
+    await store.loadMore(); // web pageno=2
+    expect(store.webHits).toHaveLength(2);
+    expect(store.webPageno).toBe(2);
+  });
+
+  it('web search error sets webError and marks webExhausted', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'anything';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
+    expect(store.webExhausted).toBe(true);
+  });
+
+  it('reset(): clears query, results, and pending debounce', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 100 });
+    store.query = 'foobar';
+    store.runDebounced();
+    store.reset();
+    await vi.advanceTimersByTimeAsync(200);
+    expect(store.query).toBe('');
+    expect(store.hits).toEqual([]);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    const snap: SearchSnapshot = {
+      query: 'lasagne',
+      hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
+      webHits: [],
+      searchedFor: 'lasagne',
+      webError: null,
+      localExhausted: true,
+      webPageno: 0,
+      webExhausted: false
+    };
+    store.restoreSnapshot(snap);
+    expect(store.query).toBe('lasagne');
+    expect(store.hits).toHaveLength(1);
+    store.runDebounced(); // should NOT re-fetch after restore
+    await vi.advanceTimersByTimeAsync(100);
+    expect(fetchImpl).not.toHaveBeenCalled();
+    const round = store.captureSnapshot();
+    expect(round).toEqual(snap);
+  });
+
+  it('filterParam option: gets appended to both local and web requests', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterParam: () => '&domains=chefkoch.de'
+    });
+    store.query = 'curry';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
+  });
+
+  it('reSearch: immediate re-run with current query on filter change', async () => {
+    vi.useFakeTimers();
+    let filter = '';
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } },
+      { body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterDebounceMs: 5,
+      filterParam: () => filter
+    });
+    store.query = 'broth';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    // Simulate filter change
+    filter = '&domains=chefkoch.de';
+    store.reSearch();
+    await vi.advanceTimersByTimeAsync(10);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    // Last call should have filter param
+    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
+    expect(last).toMatch(/&domains=chefkoch\.de/);
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify all fail with "SearchStore is not a constructor" or "Cannot find module"**
+
+```bash
+npm test -- search-store.test
+```
+
+Expected: 12 tests, all failing because `src/lib/client/search.svelte.ts` doesn't exist yet.
+
+---
+
+## Task 2: Implement SearchStore to pass tests
+
+**Files:**
+- Create: `src/lib/client/search.svelte.ts`
+
+- [ ] **Step 1: Scaffold the class + types**
+
+Create `src/lib/client/search.svelte.ts` with this content:
+
+```ts
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;
+  debounceMs?: number;
+  filterDebounceMs?: number;
+  minQueryLength?: number;
+  filterParam?: () => string;
+  fetchImpl?: typeof fetch;
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  private readonly pageSize: number;
+  private readonly debounceMs: number;
+  private readonly filterDebounceMs: number;
+  private readonly minQueryLength: number;
+  private readonly filterParam: () => string;
+  private readonly fetchImpl: typeof fetch;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private skipNextDebounce = false;
+
+  constructor(opts: SearchStoreOptions = {}) {
+    this.pageSize = opts.pageSize ?? 30;
+    this.debounceMs = opts.debounceMs ?? 300;
+    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
+    this.minQueryLength = opts.minQueryLength ?? 4;
+    this.filterParam = opts.filterParam ?? (() => '');
+    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
+  }
+}
+```
+
+- [ ] **Step 2: Implement `runDebounced`, `runSearch`, private `runWebSearch`**
+
+Add to the class:
+
+```ts
+  runDebounced(): void {
+    // Consumer pattern:
+    //   $effect(() => { store.query; store.runDebounced(); });
+    // The bare `store.query` read registers the reactive dep; this method
+    // then reads `this.query` live to kick off / debounce the search.
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    if (this.skipNextDebounce) {
+      this.skipNextDebounce = false;
+      return;
+    }
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) {
+      this.resetResults();
+      return;
+    }
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => {
+      void this.runSearch(q);
+    }, this.debounceMs);
+  }
+
+  async runSearch(q: string): Promise<void> {
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}${this.filterParam()}`
+      );
+      const body = (await res.json()) as { hits: SearchHit[] };
+      if (this.query.trim() !== q) return;
+      this.hits = body.hits;
+      this.searchedFor = q;
+      if (this.hits.length < this.pageSize) this.localExhausted = true;
+      if (this.hits.length === 0) {
+        await this.runWebSearch(q, 1);
+      }
+    } finally {
+      if (this.query.trim() === q) this.searching = false;
+    }
+  }
+
+  private async runWebSearch(q: string, pageno: number): Promise<void> {
+    this.webSearching = true;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.filterParam()}`
+      );
+      if (this.query.trim() !== q) return;
+      if (!res.ok) {
+        const err = (await res.json().catch(() => ({}))) as { message?: string };
+        this.webError = err.message ?? `HTTP ${res.status}`;
+        this.webExhausted = true;
+        return;
+      }
+      const body = (await res.json()) as { hits: WebHit[] };
+      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
+      this.webPageno = pageno;
+      if (body.hits.length === 0) this.webExhausted = true;
+    } finally {
+      if (this.query.trim() === q) this.webSearching = false;
+    }
+  }
+```
+
+- [ ] **Step 3: Implement `loadMore`**
+
+```ts
+  async loadMore(): Promise<void> {
+    if (this.loadingMore) return;
+    const q = this.query.trim();
+    if (!q) return;
+    this.loadingMore = true;
+    try {
+      if (!this.localExhausted) {
+        const res = await this.fetchImpl(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}${this.filterParam()}`
+        );
+        const body = (await res.json()) as { hits: SearchHit[] };
+        if (this.query.trim() !== q) return;
+        const more = body.hits;
+        const seen = new Set(this.hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        this.hits = [...this.hits, ...deduped];
+        if (more.length < this.pageSize) this.localExhausted = true;
+      } else if (!this.webExhausted) {
+        const nextPage = this.webPageno + 1;
+        const wasEmpty = this.webHits.length === 0;
+        if (wasEmpty) this.webSearching = true;
+        try {
+          const res = await this.fetchImpl(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.filterParam()}`
+          );
+          if (this.query.trim() !== q) return;
+          if (!res.ok) {
+            const err = (await res.json().catch(() => ({}))) as { message?: string };
+            this.webError = err.message ?? `HTTP ${res.status}`;
+            this.webExhausted = true;
+            return;
+          }
+          const body = (await res.json()) as { hits: WebHit[] };
+          const more = body.hits;
+          const seen = new Set(this.webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            this.webExhausted = true;
+          } else {
+            this.webHits = [...this.webHits, ...deduped];
+            this.webPageno = nextPage;
+          }
+        } finally {
+          if (this.query.trim() === q) this.webSearching = false;
+        }
+      }
+    } finally {
+      this.loadingMore = false;
+    }
+  }
+```
+
+- [ ] **Step 4: Implement `reSearch`, `reset`, `resetResults`, snapshot methods**
+
+```ts
+  reSearch(): void {
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) return;
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
+  }
+
+  reset(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.query = '';
+    this.resetResults();
+  }
+
+  private resetResults(): void {
+    this.hits = [];
+    this.webHits = [];
+    this.searchedFor = null;
+    this.searching = false;
+    this.webSearching = false;
+    this.webError = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+  }
+
+  captureSnapshot(): SearchSnapshot {
+    return {
+      query: this.query,
+      hits: this.hits,
+      webHits: this.webHits,
+      searchedFor: this.searchedFor,
+      webError: this.webError,
+      localExhausted: this.localExhausted,
+      webPageno: this.webPageno,
+      webExhausted: this.webExhausted
+    };
+  }
+
+  restoreSnapshot(s: SearchSnapshot): void {
+    this.skipNextDebounce = true;
+    this.query = s.query;
+    this.hits = s.hits;
+    this.webHits = s.webHits;
+    this.searchedFor = s.searchedFor;
+    this.webError = s.webError;
+    this.localExhausted = s.localExhausted;
+    this.webPageno = s.webPageno;
+    this.webExhausted = s.webExhausted;
+  }
+```
+
+- [ ] **Step 5: Run tests, iterate until all green**
+
+```bash
+npm test -- search-store.test
+```
+
+Expected: all 12 tests pass.
+
+- [ ] **Step 6: `npm run check`**
+
+```bash
+npm run check
+```
+
+Expected: 0 errors, 0 warnings in `search.svelte.ts`.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/lib/client/search.svelte.ts tests/unit/search-store.test.ts
+git commit -m "feat(search): SearchStore fuer Live-Search mit Web-Fallback
+
+Extrahiert die duplizierte Such-Logik aus +page.svelte und
++layout.svelte in eine gemeinsame Klasse. Pure Datenschicht
+mit injizierbarem fetch — UI-Concerns (URL-Sync, Dropdown,
+Snapshot) bleiben in den Komponenten."
+```
+
+---
+
+## Task 3: Migrate `+layout.svelte` header dropdown
+
+**Why first:** Smaller surface than `+page.svelte`, no snapshot API, no URL sync. If the store is wrong, here we find out with less code at risk.
+
+**Files:**
+- Modify: `src/routes/+layout.svelte:20-200`
+
+- [ ] **Step 1: Add import**
+
+At the top of `<script>`:
+```ts
+import { SearchStore } from '$lib/client/search.svelte';
+import { searchFilterStore } from '$lib/client/search-filter.svelte';
+```
+(Latter is already imported — just confirm.)
+
+- [ ] **Step 2: Replace the 11 `$state` declarations (navQuery, navHits, navWebHits, navSearching, navWebSearching, navWebError, navLocalExhausted, navWebPageno, navWebExhausted, navLoadingMore, debounceTimer) with one store instance.**
+
+Keep these (UI-only): `navOpen`, `navContainer`, `menuOpen`, `menuContainer`.
+
+New:
+```ts
+const navStore = new SearchStore({
+  pageSize: 30,
+  filterParam: () => {
+    const p = searchFilterStore.queryParam;
+    return p ? `&domains=${encodeURIComponent(p)}` : '';
+  }
+});
+```
+
+Remove the local `filterParam()` helper — the store owns it now.
+
+- [ ] **Step 3: Replace the big `$effect` (lines 52–109) with a 3-line `$effect`**
+
+```ts
+$effect(() => {
+  // Bare reads register the reactive deps; then kick the store.
+  const q = navStore.query;
+  navStore.runDebounced();
+  // navOpen follows query length: open while typing, close when cleared.
+  navOpen = q.trim().length > 3;
+});
+```
+
+- [ ] **Step 4: Replace `loadMoreNav` function (lines 111–159) with a pass-through**
+
+```ts
+function loadMoreNav() {
+  return navStore.loadMore();
+}
+```
+
+Or inline `onclick={() => navStore.loadMore()}` at the call-site — pick the less disruptive option when looking at the template.
+
+- [ ] **Step 5: Replace `submitNav` (lines 161–167)**
+
+```ts
+function submitNav(e: SubmitEvent) {
+  e.preventDefault();
+  const q = navStore.query.trim();
+  if (!q) return;
+  navOpen = false;
+  void goto(`/?q=${encodeURIComponent(q)}`);
+}
+```
+
+- [ ] **Step 6: Replace `pickHit` (lines 185–190)**
+
+```ts
+function pickHit() {
+  navOpen = false;
+  navStore.reset();
+}
+```
+
+- [ ] **Step 7: Update `afterNavigate` (lines 192+)**
+
+```ts
+afterNavigate(() => {
+  navStore.reset();
+  navOpen = false;
+  menuOpen = false;
+  // ... rest of existing body (wishlist refresh etc.)
+});
+```
+
+- [ ] **Step 8: Update the template**
+
+Every `navQuery` → `navStore.query`, every `navHits` → `navStore.hits`, etc. This is a mechanical rename — use find+replace scoped to `src/routes/+layout.svelte` only.
+
+Mapping:
+- `navQuery` → `navStore.query`
+- `navHits` → `navStore.hits`
+- `navWebHits` → `navStore.webHits`
+- `navSearching` → `navStore.searching`
+- `navWebSearching` → `navStore.webSearching`
+- `navWebError` → `navStore.webError`
+- `navLocalExhausted` → `navStore.localExhausted`
+- `navWebPageno` → `navStore.webPageno` (if referenced in template)
+- `navWebExhausted` → `navStore.webExhausted`
+- `navLoadingMore` → `navStore.loadingMore`
+
+`bind:value={navQuery}` on the `<input>` → `bind:value={navStore.query}`.
+
+- [ ] **Step 9: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+Both must be clean.
+
+- [ ] **Step 10: Smoke-test dev server manually**
+
+```bash
+npm run dev
+```
+
+Open a recipe page → type in header dropdown → verify: dropdown opens, shows local hits, falls back to web for unknown query, "+ weitere Ergebnisse" paginates, clicking a hit closes the dropdown, navigating back/forward clears the dropdown.
+
+- [ ] **Step 11: Commit**
+
+```bash
+git add src/routes/+layout.svelte
+git commit -m "refactor(layout): Header-Dropdown nutzt SearchStore
+
+Ersetzt die 11 lokalen \$state und den Debounce-Effect durch
+eine SearchStore-Instanz. Nav-Open-Toggle bleibt lokal, weil
+UI-Concern."
+```
+
+---
+
+## Task 4: Migrate `+page.svelte` home
+
+**Why after Task 3:** The store is now field-tested. Home adds snapshot + URL sync + filter-change re-search on top.
+
+**Files:**
+- Modify: `src/routes/+page.svelte:1-371`
+
+- [ ] **Step 1: Add imports**
+
+```ts
+import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
+```
+
+- [ ] **Step 2: Remove the duplicated `$state` block (lines 17–32)**
+
+Delete: `query`, `hits`, `webHits`, `searching`, `webSearching`, `webError`, `searchedFor`, `localExhausted`, `webPageno`, `webExhausted`, `loadingMore`, `skipNextSearch`, `debounceTimer`.
+
+Keep: `quote`, `recent`, `favorites` (not search-related), and all `all*` state (All-Recipes listing — unrelated to search).
+
+Add:
+```ts
+const store = new SearchStore({
+  pageSize: LOCAL_PAGE,
+  filterParam: () => {
+    const p = searchFilterStore.queryParam;
+    return p ? `&domains=${encodeURIComponent(p)}` : '';
+  }
+});
+```
+
+Remove the local `filterParam()` helper (lines 224–227).
+
+- [ ] **Step 3: Rewire the `Snapshot<>` API (lines 50–83)**
+
+```ts
+export const snapshot: Snapshot<SearchSnapshot> = {
+  capture: () => store.captureSnapshot(),
+  restore: (s) => store.restoreSnapshot(s)
+};
+```
+
+Delete the old `SearchSnapshot` local type alias (it's now imported).
+
+- [ ] **Step 4: Replace the two search `$effect`s (filter-change + query-change) with two one-liners**
+
+Remove lines 188–199 (filter-change effect) and lines 322–347 (query-change effect).
+
+Add:
+```ts
+$effect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  store.query; // register reactive dep
+  store.runDebounced();
+});
+
+$effect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  searchFilterStore.active;
+  store.reSearch();
+});
+```
+
+- [ ] **Step 5: Keep the URL-sync `$effect` as-is, but read from `store.query`**
+
+```ts
+$effect(() => {
+  if (typeof window === 'undefined') return;
+  const q = store.query.trim();
+  const url = new URL(window.location.href);
+  const current = url.searchParams.get('q') ?? '';
+  if (q === current) return;
+  if (q) url.searchParams.set('q', q);
+  else url.searchParams.delete('q');
+  history.replaceState(history.state, '', url.toString());
+});
+```
+
+- [ ] **Step 6: Update `onMount` URL-restore**
+
+```ts
+const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
+if (urlQ) store.query = urlQ;
+```
+
+- [ ] **Step 7: Delete `runSearch` and `loadMore` local functions (lines 229–320)**
+
+The store provides both. Template references `loadMore` → change to `store.loadMore()`.
+
+- [ ] **Step 8: Update `submit`**
+
+```ts
+function submit(e: SubmitEvent) {
+  e.preventDefault();
+  const q = store.query.trim();
+  if (q.length <= 3) return;
+  void store.runSearch(q);
+}
+```
+
+- [ ] **Step 9: Update the template (same mechanical rename as Task 3)**
+
+`query` → `store.query`, `hits` → `store.hits`, etc. for all 11 fields.
+
+`bind:value={query}` → `bind:value={store.query}`.
+
+`activeSearch` derived stays: `const activeSearch = $derived(store.query.trim().length > 3);`
+
+- [ ] **Step 10: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+- [ ] **Step 11: Verify file is shorter than before**
+
+```bash
+wc -l src/routes/+page.svelte
+```
+
+Expected: under 700 lines (was 808). Target from roadmap: under 700 L.
+
+```bash
+wc -l src/routes/+layout.svelte
+```
+
+Expected: under 600 lines (was 681). Target from roadmap: under 600 L.
+
+- [ ] **Step 12: Smoke-test dev manually**
+
+- Type "lasagne" in home → local hits appear.
+- Type "pizza margherita" → web fallback.
+- Deep-link `/?q=lasagne` → query restored, results visible.
+- Navigate to recipe → back → home query + results preserved (snapshot).
+- Change domain filter while query is active → results re-fetch with new filter.
+
+- [ ] **Step 13: Commit**
+
+```bash
+git add src/routes/+page.svelte
+git commit -m "refactor(home): Live-Search auf SearchStore migriert
+
+Entfernt 11 duplizierte \$state, runSearch, loadMore und beide
+Debounce-Effekte. URL-Sync, Snapshot und Filter-Re-Search bleiben
+hier — aber alle delegieren an den Store."
+```
+
+---
+
+## Task 5: Remote E2E smoke (optional — only if CI deploy happens)
+
+**Trigger:** Only run this task if CI builds the `search-state-store` branch and deploys to `kochwas-dev.siegeln.net`. Otherwise skip to Task 6.
+
+**Files:**
+- Run: existing `tests/e2e/remote/search.spec.ts`
+
+- [ ] **Step 1: Run remote suite**
+
+```bash
+npm run test:e2e:remote -- search.spec.ts
+```
+
+Expected: 4/4 pass (existing coverage is sufficient — no new specs needed for a pure refactor).
+
+---
+
+## Task 6: Self-review + merge prep
+
+**Files:**
+- Review: all changed files
+
+- [ ] **Step 1: `npm test` full suite**
+
+```bash
+npm test
+```
+
+Expected: all pass (previous count + 12 new SearchStore tests).
+
+- [ ] **Step 2: `npm run check` full repo**
+
+```bash
+npm run check
+```
+
+Expected: 0 errors, 0 warnings.
+
+- [ ] **Step 3: `git diff main...HEAD` review**
+
+```bash
+git diff main...HEAD --stat
+git log main..HEAD --oneline
+```
+
+Expected commits:
+1. `feat(search): SearchStore fuer Live-Search mit Web-Fallback`
+2. `refactor(layout): Header-Dropdown nutzt SearchStore`
+3. `refactor(home): Live-Search auf SearchStore migriert`
+
+- [ ] **Step 4: Push branch**
+
+```bash
+git push -u origin search-state-store
+```
+
+CI builds branch-tagged image → user tests on `kochwas-dev.siegeln.net` → merges to main when clean.
+
+---
+
+## Risk Notes
+
+- **Svelte 5 `$state` in classes:** Standard pattern in this repo (`SearchFilterStore`, `PWAStore`). Works.
+- **Two instances of `SearchStore` simultaneously:** Each has its own timer + state. No shared mutable state between them — verified because the store has no static fields.
+- **Snapshot restore racing with `runDebounced`:** Handled via `skipNextDebounce` flag. Same mechanism as the current `skipNextSearch` in `+page.svelte`.
+- **Filter change on home while query is empty:** `reSearch()` early-exits when `q.length < minQueryLength`. Safe.
+- **`afterNavigate` firing during an in-flight search:** `reset()` clears timer and mutates `query`. Any in-flight fetch will race-guard-fail on the next `if (this.query.trim() !== q) return;`. Results get dropped, which is the desired behavior.
+
+## Deferred — NOT in this plan
+
+- **Search-Store-Tests mit echtem Browser-`$effect`:** Would need `@sveltejs/vite-plugin-svelte` test setup with component mount. Current Vitest setup is Node-only. Skip — the injected-fetch unit tests cover the state machine.
+- **Shared store instance (singleton) instead of per-consumer:** Rejected during design — would couple home and header search semantically.
+- **Web-Hit-Cache im Store:** Out of scope. The roadmap explicitly scopes this phase to state extraction, not perf work.

package.json

@@ -14,7 +14,8 @@
     "format": "prettier --write .",
     "render:icons": "node scripts/render-icons.mjs",
     "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:remote": "playwright test --config=playwright.remote.config.ts"
   },
   "devDependencies": {
     "@playwright/test": "^1.59.1",

playwright.config.ts

@@ -5,6 +5,7 @@ import { defineConfig } from '@playwright/test';
 // Preview-Server (kein Dev-Server, damit der SW registrierbar ist).
 export default defineConfig({
   testDir: 'tests/e2e',
+  testIgnore: ['tests/e2e/remote/**'],
   fullyParallel: false,
   reporter: 'list',
   use: {

playwright.remote.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from '@playwright/test';
+
+// Zweite Playwright-Config fuer E2E-Smoketests gegen ein deployed
+// Environment (standardmaessig kochwas-dev.siegeln.net).
+//
+// Getrennt von playwright.config.ts, weil diese Tests:
+// - keinen lokalen Preview-Server starten
+// - gegen eine echte Datenbank laufen (daher workers: 1, afterEach-Cleanup)
+// - Service-Worker-Lifecycle nicht manipulieren (das macht offline.spec.ts lokal)
+//
+// Ausfuehrung: npm run test:e2e:remote
+// Ziel-URL ueberschreiben: E2E_REMOTE_URL=https://... npm run test:e2e:remote
+const BASE_URL = process.env.E2E_REMOTE_URL ?? 'https://kochwas-dev.siegeln.net';
+
+export default defineConfig({
+  testDir: 'tests/e2e/remote',
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  reporter: [['list'], ['html', { open: 'never', outputFolder: 'playwright-report-remote' }]],
+  use: {
+    baseURL: BASE_URL,
+    headless: true,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    // Service-Worker zulassen, aber keine Offline-Manipulation — die
+    // Tests hier pruefen Live-Verhalten gegen den Server.
+    serviceWorkers: 'allow'
+  }
+});

src/lib/client/search.svelte.ts

@@ -0,0 +1,225 @@
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;
+  debounceMs?: number;
+  filterDebounceMs?: number;
+  minQueryLength?: number;
+  filterParam?: () => string;
+  fetchImpl?: typeof fetch;
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  private readonly pageSize: number;
+  private readonly debounceMs: number;
+  private readonly filterDebounceMs: number;
+  private readonly minQueryLength: number;
+  private readonly filterParam: () => string;
+  private readonly fetchImpl: typeof fetch;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private skipNextDebounce = false;
+
+  constructor(opts: SearchStoreOptions = {}) {
+    this.pageSize = opts.pageSize ?? 30;
+    this.debounceMs = opts.debounceMs ?? 300;
+    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
+    this.minQueryLength = opts.minQueryLength ?? 4;
+    this.filterParam = opts.filterParam ?? (() => '');
+    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
+  }
+
+  runDebounced(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    if (this.skipNextDebounce) {
+      this.skipNextDebounce = false;
+      return;
+    }
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) {
+      this.resetResults();
+      return;
+    }
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => {
+      void this.runSearch(q);
+    }, this.debounceMs);
+  }
+
+  async runSearch(q: string): Promise<void> {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}${this.filterParam()}`
+      );
+      const body = (await res.json()) as { hits: SearchHit[] };
+      if (this.query.trim() !== q) return;
+      this.hits = body.hits;
+      this.searchedFor = q;
+      if (this.hits.length < this.pageSize) this.localExhausted = true;
+      if (this.hits.length === 0) {
+        await this.runWebSearch(q, 1);
+      }
+    } finally {
+      if (this.query.trim() === q) this.searching = false;
+    }
+  }
+
+  private async runWebSearch(q: string, pageno: number): Promise<void> {
+    this.webSearching = true;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.filterParam()}`
+      );
+      if (this.query.trim() !== q) return;
+      if (!res.ok) {
+        const err = (await res.json().catch(() => ({}))) as { message?: string };
+        this.webError = err.message ?? `HTTP ${res.status}`;
+        this.webExhausted = true;
+        return;
+      }
+      const body = (await res.json()) as { hits: WebHit[] };
+      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
+      this.webPageno = pageno;
+      if (body.hits.length === 0) this.webExhausted = true;
+    } finally {
+      if (this.query.trim() === q) this.webSearching = false;
+    }
+  }
+
+  async loadMore(): Promise<void> {
+    if (this.loadingMore) return;
+    const q = this.query.trim();
+    if (!q) return;
+    this.loadingMore = true;
+    try {
+      if (!this.localExhausted) {
+        const res = await this.fetchImpl(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}${this.filterParam()}`
+        );
+        const body = (await res.json()) as { hits: SearchHit[] };
+        if (this.query.trim() !== q) return;
+        const more = body.hits;
+        const seen = new Set(this.hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        this.hits = [...this.hits, ...deduped];
+        if (more.length < this.pageSize) this.localExhausted = true;
+      } else if (!this.webExhausted) {
+        const nextPage = this.webPageno + 1;
+        const wasEmpty = this.webHits.length === 0;
+        if (wasEmpty) this.webSearching = true;
+        try {
+          const res = await this.fetchImpl(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.filterParam()}`
+          );
+          if (this.query.trim() !== q) return;
+          if (!res.ok) {
+            const err = (await res.json().catch(() => ({}))) as { message?: string };
+            this.webError = err.message ?? `HTTP ${res.status}`;
+            this.webExhausted = true;
+            return;
+          }
+          const body = (await res.json()) as { hits: WebHit[] };
+          const more = body.hits;
+          const seen = new Set(this.webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            this.webExhausted = true;
+          } else {
+            this.webHits = [...this.webHits, ...deduped];
+            this.webPageno = nextPage;
+          }
+        } finally {
+          if (this.query.trim() === q) this.webSearching = false;
+        }
+      }
+    } finally {
+      this.loadingMore = false;
+    }
+  }
+
+  reSearch(): void {
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) return;
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
+  }
+
+  reset(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.query = '';
+    this.resetResults();
+  }
+
+  private resetResults(): void {
+    this.hits = [];
+    this.webHits = [];
+    this.searchedFor = null;
+    this.searching = false;
+    this.webSearching = false;
+    this.webError = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+  }
+
+  captureSnapshot(): SearchSnapshot {
+    return {
+      query: this.query,
+      hits: this.hits,
+      webHits: this.webHits,
+      searchedFor: this.searchedFor,
+      webError: this.webError,
+      localExhausted: this.localExhausted,
+      webPageno: this.webPageno,
+      webExhausted: this.webExhausted
+    };
+  }
+
+  restoreSnapshot(s: SearchSnapshot): void {
+    this.skipNextDebounce = true;
+    this.query = s.query;
+    this.hits = s.hits;
+    this.webHits = s.webHits;
+    this.searchedFor = s.searchedFor;
+    this.webError = s.webError;
+    this.localExhausted = s.localExhausted;
+    this.webPageno = s.webPageno;
+    this.webExhausted = s.webExhausted;
+  }
+}

src/routes/+layout.svelte

@@ -17,26 +17,20 @@
   import { network } from '$lib/client/network.svelte';
   import { installPrompt } from '$lib/client/install-prompt.svelte';
   import { registerServiceWorker } from '$lib/client/sw-register';
-  import type { SearchHit } from '$lib/server/recipes/search-local';
+  import { SearchStore } from '$lib/client/search.svelte';
-  import type { WebHit } from '$lib/server/search/searxng';
 
   let { children } = $props();
 
-  const NAV_PAGE_SIZE = 30;
+  const navStore = new SearchStore({
+    pageSize: 30,
+    filterParam: () => {
+      const p = searchFilterStore.queryParam;
+      return p ? `&domains=${encodeURIComponent(p)}` : '';
+    }
+  });
 
-  let navQuery = $state('');
-  let navHits = $state<SearchHit[]>([]);
-  let navWebHits = $state<WebHit[]>([]);
-  let navSearching = $state(false);
-  let navWebSearching = $state(false);
-  let navWebError = $state<string | null>(null);
   let navOpen = $state(false);
-  let navLocalExhausted = $state(false);
-  let navWebPageno = $state(0);
-  let navWebExhausted = $state(false);
-  let navLoadingMore = $state(false);
   let navContainer: HTMLElement | undefined = $state();
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let menuOpen = $state(false);
   let menuContainer: HTMLElement | undefined = $state();
 
@@ -44,123 +38,21 @@
     $page.url.pathname.startsWith('/recipes/') || $page.url.pathname === '/preview'
   );
 
-  function filterParam(): string {
-    const p = searchFilterStore.queryParam;
-    return p ? `&domains=${encodeURIComponent(p)}` : '';
-  }
-
   $effect(() => {
-    const q = navQuery.trim();
+    // Bare reads register the reactive deps; then kick the store.
-    if (debounceTimer) clearTimeout(debounceTimer);
+    const q = navStore.query;
-    if (q.length <= 3) {
+    navStore.runDebounced();
-      navHits = [];
+    // navOpen follows query length: open while typing, close when cleared.
-      navWebHits = [];
+    navOpen = q.trim().length > 3;
-      navSearching = false;
-      navWebSearching = false;
-      navWebError = null;
-      navOpen = false;
-      navLocalExhausted = false;
-      navWebPageno = 0;
-      navWebExhausted = false;
-      return;
-    }
-    navSearching = true;
-    navWebHits = [];
-    navWebSearching = false;
-    navWebError = null;
-    navOpen = true;
-    navLocalExhausted = false;
-    navWebPageno = 0;
-    navWebExhausted = false;
-    debounceTimer = setTimeout(async () => {
-      try {
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}${filterParam()}`
-        );
-        const body = await res.json();
-        if (navQuery.trim() !== q) return;
-        navHits = body.hits;
-        if (navHits.length < NAV_PAGE_SIZE) navLocalExhausted = true;
-        if (navHits.length === 0) {
-          navWebSearching = true;
-          try {
-            const wres = await fetch(
-              `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
-            );
-            if (navQuery.trim() !== q) return;
-            if (!wres.ok) {
-              const err = await wres.json().catch(() => ({}));
-              navWebError = err.message ?? `HTTP ${wres.status}`;
-              navWebExhausted = true;
-            } else {
-              const wbody = await wres.json();
-              navWebHits = wbody.hits;
-              navWebPageno = 1;
-              if (navWebHits.length === 0) navWebExhausted = true;
-            }
-          } finally {
-            if (navQuery.trim() === q) navWebSearching = false;
-          }
-        }
-      } finally {
-        if (navQuery.trim() === q) navSearching = false;
-      }
-    }, 300);
   });
 
-  async function loadMoreNav() {
+  function loadMoreNav() {
-    if (navLoadingMore) return;
+    return navStore.loadMore();
-    const q = navQuery.trim();
-    if (!q) return;
-    navLoadingMore = true;
-    try {
-      if (!navLocalExhausted) {
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}&offset=${navHits.length}${filterParam()}`
-        );
-        const body = await res.json();
-        if (navQuery.trim() !== q) return;
-        const more = body.hits as SearchHit[];
-        const seen = new Set(navHits.map((h) => h.id));
-        const deduped = more.filter((h) => !seen.has(h.id));
-        navHits = [...navHits, ...deduped];
-        if (more.length < NAV_PAGE_SIZE) navLocalExhausted = true;
-      } else if (!navWebExhausted) {
-        const nextPage = navWebPageno + 1;
-        navWebSearching = navWebHits.length === 0;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
-          );
-          if (navQuery.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            navWebError = err.message ?? `HTTP ${wres.status}`;
-            navWebExhausted = true;
-            return;
-          }
-          const wbody = await wres.json();
-          const more = wbody.hits as WebHit[];
-          const seen = new Set(navWebHits.map((h) => h.url));
-          const deduped = more.filter((h) => !seen.has(h.url));
-          if (deduped.length === 0) {
-            navWebExhausted = true;
-          } else {
-            navWebHits = [...navWebHits, ...deduped];
-            navWebPageno = nextPage;
-          }
-        } finally {
-          if (navQuery.trim() === q) navWebSearching = false;
-        }
-      }
-    } finally {
-      navLoadingMore = false;
-    }
   }
 
   function submitNav(e: SubmitEvent) {
     e.preventDefault();
-    const q = navQuery.trim();
+    const q = navStore.query.trim();
     if (!q) return;
     navOpen = false;
     void goto(`/?q=${encodeURIComponent(q)}`);
@@ -184,15 +76,11 @@
 
   function pickHit() {
     navOpen = false;
-    navQuery = '';
+    navStore.reset();
-    navHits = [];
-    navWebHits = [];
   }
 
   afterNavigate(() => {
-    navQuery = '';
+    navStore.reset();
-    navHits = [];
-    navWebHits = [];
     navOpen = false;
     menuOpen = false;
     // Badge nach jeder Client-Navigation frisch halten — sonst kann er
@@ -239,9 +127,9 @@
           <SearchFilter inline />
           <input
             type="search"
-            bind:value={navQuery}
+            bind:value={navStore.query}
             onfocus={() => {
-              if (navHits.length > 0 || navQuery.trim().length > 3) navOpen = true;
+              if (navStore.hits.length > 0 || navStore.query.trim().length > 3) navOpen = true;
             }}
             placeholder="Rezept suchen…"
             autocomplete="off"
@@ -251,12 +139,12 @@
         </form>
         {#if navOpen}
           <div class="dropdown" role="listbox">
-            {#if navSearching && navHits.length === 0 && navWebHits.length === 0}
+            {#if navStore.searching && navStore.hits.length === 0 && navStore.webHits.length === 0}
               <SearchLoader scope="local" size="sm" />
             {:else}
-              {#if navHits.length > 0}
+              {#if navStore.hits.length > 0}
                 <ul class="dd-list">
-                  {#each navHits as r (r.id)}
+                  {#each navStore.hits as r (r.id)}
                     <li>
                       <a
                         href={`/recipes/${r.id}`}
@@ -282,14 +170,14 @@
                 </ul>
               {/if}
 
-              {#if navWebHits.length > 0}
+              {#if navStore.webHits.length > 0}
-                {#if navHits.length > 0}
+                {#if navStore.hits.length > 0}
                   <p class="dd-section">Aus dem Internet</p>
                 {:else}
                   <p class="dd-section">Keine lokalen Rezepte – aus dem Internet:</p>
                 {/if}
                 <ul class="dd-list">
-                  {#each navWebHits as w (w.url)}
+                  {#each navStore.webHits as w (w.url)}
                     <li>
                       <a
                         href={`/preview?url=${encodeURIComponent(w.url)}`}
@@ -313,23 +201,23 @@
                 </ul>
               {/if}
 
-              {#if navWebSearching}
+              {#if navStore.webSearching}
                 <SearchLoader scope="web" size="sm" />
-              {:else if navWebError && navWebHits.length === 0}
+              {:else if navStore.webError && navStore.webHits.length === 0}
                 <p class="dd-status dd-error">Internet-Suche zurzeit nicht möglich.</p>
-              {:else if navHits.length === 0 && navWebHits.length === 0 && !navSearching}
+              {:else if navStore.hits.length === 0 && navStore.webHits.length === 0 && !navStore.searching}
                 <p class="dd-status">Auch im Internet nichts gefunden.</p>
               {/if}
 
-              {#if !(navLocalExhausted && navWebExhausted) && (navHits.length > 0 || navWebHits.length > 0)}
+              {#if !(navStore.localExhausted && navStore.webExhausted) && (navStore.hits.length > 0 || navStore.webHits.length > 0)}
                 <button
                   class="dd-web"
                   type="button"
                   onclick={loadMoreNav}
-                  disabled={navLoadingMore || navWebSearching}
+                  disabled={navStore.loadingMore || navStore.webSearching}
                 >
                   <span
-                    >{navLoadingMore || navWebSearching
+                    >{navStore.loadingMore || navStore.webSearching
                       ? 'Lade …'
                       : '+ weitere Ergebnisse'}</span
                   >

src/routes/+page.svelte

@@ -4,32 +4,27 @@
   import { CookingPot, X } from 'lucide-svelte';
   import type { Snapshot } from './$types';
   import type { SearchHit } from '$lib/server/recipes/search-local';
-  import type { WebHit } from '$lib/server/search/searxng';
   import { randomQuote } from '$lib/quotes';
   import SearchLoader from '$lib/components/SearchLoader.svelte';
   import SearchFilter from '$lib/components/SearchFilter.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
   import { searchFilterStore } from '$lib/client/search-filter.svelte';
   import { requireOnline } from '$lib/client/require-online';
+  import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
 
   const LOCAL_PAGE = 30;
 
-  let query = $state('');
+  const store = new SearchStore({
+    pageSize: LOCAL_PAGE,
+    filterParam: () => {
+      const p = searchFilterStore.queryParam;
+      return p ? `&domains=${encodeURIComponent(p)}` : '';
+    }
+  });
+
   let quote = $state('');
   let recent = $state<SearchHit[]>([]);
   let favorites = $state<SearchHit[]>([]);
-  let hits = $state<SearchHit[]>([]);
-  let webHits = $state<WebHit[]>([]);
-  let searching = $state(false);
-  let webSearching = $state(false);
-  let webError = $state<string | null>(null);
-  let searchedFor = $state<string | null>(null);
-  let localExhausted = $state(false);
-  let webPageno = $state(0);
-  let webExhausted = $state(false);
-  let loadingMore = $state(false);
-  let skipNextSearch = false;
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   const ALL_PAGE = 10;
   type AllSort = 'name' | 'rating' | 'cooked' | 'created';
@@ -47,39 +42,9 @@
   let allChips: HTMLElement | undefined = $state();
   let allObserver: IntersectionObserver | null = null;
 
-  type SearchSnapshot = {
-    query: string;
-    hits: SearchHit[];
-    webHits: WebHit[];
-    searchedFor: string | null;
-    webError: string | null;
-    localExhausted: boolean;
-    webPageno: number;
-    webExhausted: boolean;
-  };
-
   export const snapshot: Snapshot<SearchSnapshot> = {
-    capture: () => ({
+    capture: () => store.captureSnapshot(),
-      query,
+    restore: (s) => store.restoreSnapshot(s)
-      hits,
-      webHits,
-      searchedFor,
-      webError,
-      localExhausted,
-      webPageno,
-      webExhausted
-    }),
-    restore: (v) => {
-      query = v.query;
-      hits = v.hits;
-      webHits = v.webHits;
-      searchedFor = v.searchedFor;
-      webError = v.webError;
-      localExhausted = v.localExhausted;
-      webPageno = v.webPageno;
-      webExhausted = v.webExhausted;
-      skipNextSearch = true;
-    }
   };
 
   async function loadRecent() {
@@ -152,7 +117,7 @@
     // Restore query from URL so history.back() from preview/recipe
     // brings the user back to the same search results.
     const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
-    if (urlQ) query = urlQ;
+    if (urlQ) store.query = urlQ;
     void loadRecent();
     void searchFilterStore.load();
     const saved = localStorage.getItem('kochwas.allSort');
@@ -188,14 +153,7 @@
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     searchFilterStore.active;
-    const q = query.trim();
+    store.reSearch();
-    if (!q || q.length <= 3) return;
-    if (debounceTimer) clearTimeout(debounceTimer);
-    searching = true;
-    webHits = [];
-    webSearching = false;
-    webError = null;
-    debounceTimer = setTimeout(() => void runSearch(q), 150);
   });
 
   // Sync current query back into the URL as ?q=... via replaceState,
@@ -203,7 +161,7 @@
   // when the user clicks a result or otherwise navigates away.
   $effect(() => {
     if (typeof window === 'undefined') return;
-    const q = query.trim();
+    const q = store.query.trim();
     const url = new URL(window.location.href);
     const current = url.searchParams.get('q') ?? '';
     if (q === current) return;
@@ -221,138 +179,17 @@
     void loadFavorites(active.id);
   });
 
-  function filterParam(): string {
-    const p = searchFilterStore.queryParam;
-    return p ? `&domains=${encodeURIComponent(p)}` : '';
-  }
-
-  async function runSearch(q: string) {
-    localExhausted = false;
-    webPageno = 0;
-    webExhausted = false;
-    try {
-      const res = await fetch(
-        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}${filterParam()}`
-      );
-      const body = await res.json();
-      if (query.trim() !== q) return;
-      hits = body.hits;
-      searchedFor = q;
-      if (hits.length < LOCAL_PAGE) localExhausted = true;
-      if (hits.length === 0) {
-        // Gar keine lokalen Treffer → erste Web-Seite gleich laden,
-        // damit der User nicht extra auf „+ weitere" klicken muss.
-        webSearching = true;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
-          );
-          if (query.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            webError = err.message ?? `HTTP ${wres.status}`;
-            webExhausted = true;
-          } else {
-            const wbody = await wres.json();
-            webHits = wbody.hits;
-            webPageno = 1;
-            if (wbody.hits.length === 0) webExhausted = true;
-          }
-        } finally {
-          if (query.trim() === q) webSearching = false;
-        }
-      }
-    } finally {
-      if (query.trim() === q) searching = false;
-    }
-  }
-
-  async function loadMore() {
-    if (loadingMore) return;
-    const q = query.trim();
-    if (!q) return;
-    loadingMore = true;
-    try {
-      if (!localExhausted) {
-        // Noch mehr lokale Treffer holen.
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}${filterParam()}`
-        );
-        const body = await res.json();
-        if (query.trim() !== q) return;
-        const more = body.hits as SearchHit[];
-        const seen = new Set(hits.map((h) => h.id));
-        const deduped = more.filter((h) => !seen.has(h.id));
-        hits = [...hits, ...deduped];
-        if (more.length < LOCAL_PAGE) localExhausted = true;
-      } else if (!webExhausted) {
-        // Lokale erschöpft → auf Web umschalten / weiterblättern.
-        const nextPage = webPageno + 1;
-        webSearching = webHits.length === 0;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
-          );
-          if (query.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            webError = err.message ?? `HTTP ${wres.status}`;
-            webExhausted = true;
-            return;
-          }
-          const wbody = await wres.json();
-          const more = wbody.hits as WebHit[];
-          const seen = new Set(webHits.map((h) => h.url));
-          const deduped = more.filter((h) => !seen.has(h.url));
-          if (deduped.length === 0) {
-            webExhausted = true;
-          } else {
-            webHits = [...webHits, ...deduped];
-            webPageno = nextPage;
-          }
-        } finally {
-          if (query.trim() === q) webSearching = false;
-        }
-      }
-    } finally {
-      loadingMore = false;
-    }
-  }
-
   $effect(() => {
-    const q = query.trim();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    if (debounceTimer) clearTimeout(debounceTimer);
+    store.query; // register reactive dep
-    if (skipNextSearch) {
+    store.runDebounced();
-      // Snapshot-Restore hat hits/webHits/searchedFor wiederhergestellt —
-      // nicht erneut fetchen.
-      skipNextSearch = false;
-      return;
-    }
-    if (q.length <= 3) {
-      hits = [];
-      webHits = [];
-      searchedFor = null;
-      searching = false;
-      webSearching = false;
-      webError = null;
-      return;
-    }
-    searching = true;
-    webHits = [];
-    webSearching = false;
-    webError = null;
-    debounceTimer = setTimeout(() => {
-      void runSearch(q);
-    }, 300);
   });
 
   function submit(e: SubmitEvent) {
     e.preventDefault();
-    const q = query.trim();
+    const q = store.query.trim();
     if (q.length <= 3) return;
-    if (debounceTimer) clearTimeout(debounceTimer);
+    void store.runSearch(q);
-    searching = true;
-    void runSearch(q);
   }
 
   async function dismissFromRecent(recipeId: number, e: MouseEvent) {
@@ -367,7 +204,7 @@
     });
   }
 
-  const activeSearch = $derived(query.trim().length > 3);
+  const activeSearch = $derived(store.query.trim().length > 3);
 </script>
 
 <section class="hero">
@@ -378,7 +215,7 @@
       <SearchFilter inline />
       <input
         type="search"
-        bind:value={query}
+        bind:value={store.query}
         placeholder="Rezept suchen…"
         autocomplete="off"
         inputmode="search"
@@ -390,12 +227,12 @@
 
 {#if activeSearch}
   <section class="results">
-    {#if searching && hits.length === 0 && webHits.length === 0}
+    {#if store.searching && store.hits.length === 0 && store.webHits.length === 0}
       <SearchLoader scope="local" />
     {:else}
-      {#if hits.length > 0}
+      {#if store.hits.length > 0}
         <ul class="cards">
-          {#each hits as r (r.id)}
+          {#each store.hits as r (r.id)}
             <li>
               <a href={`/recipes/${r.id}`} class="card">
                 {#if r.image_path}
@@ -413,20 +250,20 @@
             </li>
           {/each}
         </ul>
-      {:else if searchedFor === query.trim() && !webSearching && webHits.length === 0 && !webError}
+      {:else if store.searchedFor === store.query.trim() && !store.webSearching && store.webHits.length === 0 && !store.webError}
-        <p class="muted no-local-msg">Keine lokalen Rezepte für „{searchedFor}".</p>
+        <p class="muted no-local-msg">Keine lokalen Rezepte für „{store.searchedFor}".</p>
       {/if}
 
-      {#if webHits.length > 0}
+      {#if store.webHits.length > 0}
-        {#if hits.length > 0}
+        {#if store.hits.length > 0}
           <h3 class="sep">Aus dem Internet</h3>
-        {:else if searchedFor === query.trim()}
+        {:else if store.searchedFor === store.query.trim()}
           <p class="muted no-local-msg">
-            Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+            Keine lokalen Rezepte für „{store.searchedFor}" — Ergebnisse aus dem Internet:
           </p>
         {/if}
         <ul class="cards">
-          {#each webHits as w (w.url)}
+          {#each store.webHits as w (w.url)}
             <li>
               <a class="card" href={`/preview?url=${encodeURIComponent(w.url)}`}>
                 {#if w.thumbnail}
@@ -444,16 +281,16 @@
         </ul>
       {/if}
 
-      {#if webSearching}
+      {#if store.webSearching}
         <SearchLoader scope="web" />
-      {:else if webError && webHits.length === 0}
+      {:else if store.webError && store.webHits.length === 0}
-        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+        <p class="error">Internet-Suche zurzeit nicht möglich: {store.webError}</p>
       {/if}
 
-      {#if searchedFor === query.trim() && !(localExhausted && webExhausted) && !(searching && hits.length === 0)}
+      {#if store.searchedFor === store.query.trim() && !(store.localExhausted && store.webExhausted) && !(store.searching && store.hits.length === 0)}
         <div class="more-cta">
-          <button class="more-btn" onclick={loadMore} disabled={loadingMore || webSearching}>
+          <button class="more-btn" onclick={() => store.loadMore()} disabled={store.loadingMore || store.webSearching}>
-            {loadingMore || webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
+            {store.loadingMore || store.webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
           </button>
         </div>
       {/if}

tests/e2e/remote/README.md

@@ -0,0 +1,68 @@
+# E2E-Tests gegen kochwas-dev
+
+Playwright-Smoketests gegen ein deployed Environment — standardmaessig
+`https://kochwas-dev.siegeln.net`. Loest die bisherigen manuellen
+MCP-Runs ab.
+
+## Setup (einmalig)
+
+```bash
+npm install
+npx playwright install chromium
+```
+
+## Ausfuehren
+
+```bash
+npm run test:e2e:remote             # Headless, alle Tests
+npm run test:e2e:remote -- --ui     # Mit Playwright-UI (Trace-Viewer)
+npm run test:e2e:remote -- --debug  # Step-by-Step
+```
+
+Alternative URL:
+
+```bash
+E2E_REMOTE_URL=https://kochwas.siegeln.net npm run test:e2e:remote
+```
+
+## Was abgedeckt ist
+
+### Happy Paths (UI)
+
+| Spec | Was |
+|---|---|
+| `homepage.spec.ts` | H1, Recents/Alle-Rezepte-Sektionen, Sort-Tabs rendern unterschiedlich, keine Console-Errors |
+| `search.spec.ts` | Lokaler Treffer, Web-Fallback, Empty-State, Deep-Link `?q=` |
+| `profile.spec.ts` | Switcher-Dialog, Auswahl persistiert, "Deine Favoriten" erscheint nach Login |
+| `recipe-detail.spec.ts` | Header, Portionen-Skalierung (4->6, Mengen proportional), Favorit-Toggle, Rating persistiert ueber Reload, Gekocht-Counter, Wunschliste-Toggle |
+| `comments.spec.ts` | Eigenen Kommentar erstellen + via UI-Button loeschen; fremder Kommentar hat keinen Delete-Button |
+| `wishlist.spec.ts` | Seite laedt, Sort-Tabs, Header-Badge spiegelt API-Zaehler |
+| `preview.spec.ts` | Guard ohne `?url=`, echte URL laedt JSON-LD-Parsing, unparsbare URL zeigt error-box |
+| `admin.spec.ts` | Alle 4 Admin-Subrouten laden mit Tab-Nav, `/admin` redirected |
+
+### Negative Paths (API)
+
+| Spec | Was |
+|---|---|
+| `api-errors.spec.ts` | `parsePositiveIntParam` → 400 `Invalid id` (4 Call-Sites), `validateBody` → 400 `{message, issues}` (4 Call-Sites), 404 auf missing Ressource, Positiv-Sanity fuer /health, /profiles, /domains |
+
+## Design-Entscheidungen
+
+**`workers: 1`.** Tests mutieren echte Daten auf `kochwas-dev` (Rating,
+Favorit, Wunschliste, Kommentare). Parallelitaet wuerde Race-Conditions
+geben. `afterEach` raeumt per API auf — idempotent.
+
+**Hardcoded Test-Fixtures.** Rezept-ID 66 (Chicken Teriyaki) und
+Profile 1/2/3 (Hendrik/Verena/Leana) sind stabil auf dev. Bei
+DB-Reset muessen ggf. die Konstanten angepasst werden.
+
+**Kein Build/Server-Start.** Im Gegensatz zur lokalen `playwright.config.ts`
+startet diese Config keinen Preview-Server — die Tests laufen gegen das
+CI-Build auf dev.
+
+## Was NICHT hier ist
+
+- **Service-Worker-Lifecycle / Offline** → `tests/e2e/offline.spec.ts` (lokal).
+- **Bild-Upload** — File-Dialog + echte Dateien; nur manuell sinnvoll.
+- **Drucken** — oeffnet `window.print()`, headless unzuverlaessig.
+- **Sync unter Last** — braucht dediziertes Harness, nicht Smoke-Scope.

tests/e2e/remote/admin.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Admin-Routen', () => {
+  const SUBROUTES = ['domains', 'profiles', 'backup', 'app'] as const;
+
+  for (const sub of SUBROUTES) {
+    test(`/admin/${sub} laedt mit Nav-Tabs`, async ({ page }) => {
+      await page.goto(`/admin/${sub}`);
+      // Alle Admin-Subseiten haben dieselbe Tab-Leiste.
+      for (const label of ['Domains', 'Profile', 'Backup', 'App']) {
+        await expect(page.getByRole('link', { name: label })).toBeVisible();
+      }
+    });
+  }
+
+  test('/admin redirected auf /admin/domains', async ({ page }) => {
+    await page.goto('/admin');
+    await expect(page).toHaveURL(/\/admin\/domains$/);
+  });
+});

tests/e2e/remote/api-errors.spec.ts

@@ -0,0 +1,101 @@
+import { test, expect } from '@playwright/test';
+
+// Negative-Path Tests fuer die api-helpers: parsePositiveIntParam und
+// validateBody. Jeder neue API-Handler sollte dieselben Error-Shapes
+// liefern — wenn dieser Suite-Block kippt, ist der Helper-Contract kaputt.
+
+test.describe('API Error-Shapes', () => {
+  test.describe('parsePositiveIntParam', () => {
+    test('GET /api/recipes/abc -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/abc');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('GET /api/recipes/-1 -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/-1');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('GET /api/recipes/0 -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/0');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('POST /api/recipes/abc/comments -> 400 Invalid id', async ({ request }) => {
+      const r = await request.post('/api/recipes/abc/comments', { data: {} });
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+  });
+
+  test.describe('validateBody', () => {
+    test('POST /api/wishlist leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/wishlist', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect(Array.isArray(body.issues)).toBe(true);
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(2); // recipe_id + profile_id
+    });
+
+    test('POST /api/recipes/66/comments leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/recipes/66/comments', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1); // profile_id oder text
+    });
+
+    test('PUT /api/recipes/66/favorite leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.put('/api/recipes/66/favorite', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1);
+    });
+
+    test('POST /api/domains leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/domains', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  test.describe('404 auf missing Ressourcen', () => {
+    test('GET /api/recipes/99999 -> 404 Recipe not found', async ({ request }) => {
+      const r = await request.get('/api/recipes/99999');
+      expect(r.status()).toBe(404);
+      expect(await r.json()).toEqual({ message: 'Recipe not found' });
+    });
+  });
+
+  test.describe('Positive Sanity-Checks', () => {
+    test('GET /api/health -> 200 mit db:"ok"', async ({ request }) => {
+      const r = await request.get('/api/health');
+      expect(r.status()).toBe(200);
+      const body = (await r.json()) as { db: string };
+      expect(body.db).toBe('ok');
+    });
+
+    test('GET /api/profiles -> drei Profile', async ({ request }) => {
+      const r = await request.get('/api/profiles');
+      expect(r.status()).toBe(200);
+      const body = (await r.json()) as { id: number; name: string }[];
+      expect(body.length).toBeGreaterThanOrEqual(3);
+      const names = body.map((p) => p.name).sort();
+      expect(names).toEqual(expect.arrayContaining(['Hendrik', 'Leana', 'Verena']));
+    });
+
+    test('GET /api/domains -> liefert Array', async ({ request }) => {
+      const r = await request.get('/api/domains');
+      expect(r.status()).toBe(200);
+      const body = await r.json();
+      expect(Array.isArray(body)).toBe(true);
+    });
+  });
+});

tests/e2e/remote/comments.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+import { cleanupE2EComments, deleteComment } from './fixtures/api-cleanup';
+
+const RECIPE_ID = 66;
+
+test.describe('Kommentare', () => {
+  test.beforeEach(async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    // Stray E2E-Kommentare aus abgebrochenen Runs wegraeumen.
+    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test.afterEach(async ({ request }) => {
+    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test('Kommentar erstellen, Delete-Button erscheint, Loeschen via UI', async ({
+    page
+  }) => {
+    const unique = `E2E ${Date.now()}`;
+    await page.goto(`/recipes/${RECIPE_ID}`);
+
+    await page.getByRole('textbox').filter({ hasText: '' }).last().fill(unique);
+    await page.getByRole('button', { name: 'Kommentar speichern' }).click();
+
+    // Neuer Kommentar sichtbar
+    await expect(page.getByText(unique)).toBeVisible({ timeout: 5000 });
+
+    // Delete-Button NUR beim eigenen Kommentar
+    const delBtn = page.getByRole('button', { name: 'Kommentar löschen' });
+    await expect(delBtn).toBeVisible();
+
+    await delBtn.click();
+    // ConfirmDialog "Kommentar loeschen?" mit Loeschen-Button.
+    // Es gibt mehrere "Löschen"-Buttons auf der Seite (Rezept-Delete,
+    // Kommentar-Trash, Dialog-Bestaetigung) — deshalb Locator auf den
+    // Dialog einschraenken.
+    const dialog = page.getByRole('dialog', { name: /Kommentar löschen/i });
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: 'Löschen' }).click();
+
+    await expect(page.getByText(unique)).not.toBeVisible({ timeout: 5000 });
+  });
+
+  test('Fremder Kommentar zeigt KEINEN Delete-Button fuers aktuelle Profil', async ({
+    page,
+    request
+  }) => {
+    // Wir legen den Kommentar fuer ein anderes Profil (Leana, id=3) per API an.
+    const text = `E2E fremd ${Date.now()}`;
+    const res = await request.post(`/api/recipes/${RECIPE_ID}/comments`, {
+      data: { profile_id: 3, text }
+    });
+    expect(res.status()).toBe(201);
+    const { id } = (await res.json()) as { id: number };
+
+    try {
+      await page.goto(`/recipes/${RECIPE_ID}`);
+      const item = page
+        .locator('.comments li')
+        .filter({ hasText: text });
+      await expect(item).toBeVisible();
+      await expect(
+        item.getByRole('button', { name: 'Kommentar löschen' })
+      ).toHaveCount(0);
+    } finally {
+      await deleteComment(request, RECIPE_ID, id);
+    }
+  });
+});

tests/e2e/remote/fixtures/api-cleanup.ts

@@ -0,0 +1,67 @@
+import type { APIRequestContext } from '@playwright/test';
+
+// Cleanup-Helfer fuer afterEach-Hooks. Alle sind idempotent — wenn der
+// Zustand schon weg ist (z. B. der Test ist zwischen Action und Check
+// abgebrochen), fliegt nichts.
+
+export async function clearRating(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/rating`, {
+    data: { profile_id: profileId }
+  });
+}
+
+export async function clearFavorite(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/favorite`, {
+    data: { profile_id: profileId }
+  });
+}
+
+export async function removeFromWishlist(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/wishlist/${recipeId}?profile_id=${profileId}`);
+}
+
+export async function deleteComment(
+  api: APIRequestContext,
+  recipeId: number,
+  commentId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/comments`, {
+    data: { comment_id: commentId }
+  });
+}
+
+/**
+ * Safety-Net: loescht alle E2E-Kommentare eines Profils. Gedacht fuer
+ * afterEach/afterAll, falls ein Test abbricht bevor der eigene Cleanup
+ * greift. Markiert E2E-Kommentare am Prefix "E2E ".
+ */
+export async function cleanupE2EComments(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  const res = await api.get(`/api/recipes/${recipeId}/comments`);
+  if (!res.ok()) return;
+  const list = (await res.json()) as {
+    id: number;
+    profile_id: number;
+    text: string;
+  }[];
+  for (const c of list) {
+    if (c.profile_id === profileId && c.text.startsWith('E2E ')) {
+      await deleteComment(api, recipeId, c.id);
+    }
+  }
+}

tests/e2e/remote/fixtures/profile.ts

@@ -0,0 +1,26 @@
+import type { Page } from '@playwright/test';
+
+// Profil-IDs auf kochwas-dev: 1 = Hendrik, 2 = Verena, 3 = Leana.
+// Die Tests hardcoden Hendrik als Standard, weil die Dev-DB diese
+// Profile stabil enthaelt.
+export const HENDRIK_ID = 1;
+export const VERENA_ID = 2;
+export const LEANA_ID = 3;
+
+/**
+ * Setzt das aktive Profil in localStorage, BEVOR die Seite geladen wird.
+ * addInitScript laeuft vor jedem Skript der Seite — damit ist das Profil
+ * schon da, wenn profileStore.load() das erste Mal liest.
+ */
+export async function setActiveProfile(page: Page, id: number): Promise<void> {
+  await page.addInitScript(
+    (pid) => window.localStorage.setItem('kochwas.activeProfileId', String(pid)),
+    id
+  );
+}
+
+export async function clearActiveProfile(page: Page): Promise<void> {
+  await page.addInitScript(() =>
+    window.localStorage.removeItem('kochwas.activeProfileId')
+  );
+}

tests/e2e/remote/homepage.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Startseite', () => {
+  test('laedt mit H1, Zuletzt-hinzugefuegt und Alle-Rezepte', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/Kochwas/);
+    await expect(page.getByRole('heading', { level: 1, name: 'Kochwas' })).toBeVisible();
+    await expect(
+      page.getByRole('heading', { level: 2, name: 'Zuletzt hinzugefügt' })
+    ).toBeVisible();
+    await expect(page.getByRole('heading', { level: 2, name: 'Alle Rezepte' })).toBeVisible();
+  });
+
+  test('Sort-Tabs rendern unterschiedliche Top-Eintraege', async ({ page }) => {
+    await page.goto('/');
+    // Liste unter "Alle Rezepte"
+    const allSection = page.locator('section', { has: page.getByRole('heading', { name: 'Alle Rezepte' }) });
+    const firstItem = () => allSection.locator('li a').first().innerText();
+
+    await page.getByRole('tab', { name: 'Name' }).click();
+    await page.waitForTimeout(400);
+    const nameTop = await firstItem();
+
+    await page.getByRole('tab', { name: 'Hinzugefügt' }).click();
+    await page.waitForTimeout(400);
+    const addedTop = await firstItem();
+
+    expect(nameTop).not.toEqual(addedTop);
+  });
+
+  test('hat keine Console-Errors', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') errors.push(msg.text());
+    });
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    // 404s auf externen Bildern (chefkoch-cdn, cloudfront) ignorieren —
+    // das ist kein App-Fehler, sondern externe Thumbnails.
+    const appErrors = errors.filter((e) => !/Failed to load resource/i.test(e));
+    expect(appErrors).toEqual([]);
+  });
+});

tests/e2e/remote/preview.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Preview-Route', () => {
+  test('ohne ?url= zeigt Guard-Fehlermeldung', async ({ page }) => {
+    await page.goto('/preview');
+    await expect(page.getByText(/Kein \?url=-Parameter/)).toBeVisible();
+    await expect(page.getByRole('heading', { name: /kein Rezept/i })).toBeVisible();
+  });
+
+  test('mit echter URL laedt Vorschau + Speichern-Button', async ({ page }) => {
+    const u = encodeURIComponent('https://emmikochteinfach.de/chicken-teriyaki/');
+    await page.goto(`/preview?url=${u}`);
+    await expect(page.getByText('Vorschau — noch nicht gespeichert')).toBeVisible({
+      timeout: 20000
+    });
+    await expect(page.getByRole('button', { name: /speichern/i })).toBeVisible();
+    // Zutaten aus dem JSON-LD sollten geparst sein.
+    await expect(page.getByText(/Hähnchenbrustfilet/i).first()).toBeVisible();
+  });
+
+  test('mit unparsbarer URL zeigt error-box', async ({ page }) => {
+    // google.com hat kein Recipe-JSON-LD -> Parser-Fehler.
+    const u = encodeURIComponent('https://www.google.com');
+    await page.goto(`/preview?url=${u}`);
+    await expect(page.getByRole('heading', { name: /kein Rezept/i })).toBeVisible({
+      timeout: 20000
+    });
+  });
+});

tests/e2e/remote/profile.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+import { clearActiveProfile, setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+test.describe('Profil', () => {
+  test('Switcher zeigt alle 3 Profile', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Profil wechseln' }).click();
+    await expect(page.getByText('Wer kocht heute?')).toBeVisible();
+    for (const name of ['Hendrik', 'Verena', 'Leana']) {
+      await expect(
+        page.locator('.profile-btn', { hasText: name })
+      ).toBeVisible();
+    }
+  });
+
+  test('Profil-Auswahl persistiert im Header', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Profil wechseln' }).click();
+    await page.locator('.profile-btn', { hasText: 'Hendrik' }).click();
+    await expect(page.getByRole('button', { name: 'Profil wechseln' })).toContainText('Hendrik');
+  });
+
+  test('mit aktivem Profil: "Deine Favoriten"-Sektion erscheint', async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/');
+    await expect(
+      page.getByRole('heading', { level: 2, name: 'Deine Favoriten' })
+    ).toBeVisible();
+  });
+
+  test('ohne Profil: Rating-Klick oeffnet Standard-Hinweis', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/recipes/66');
+    await page.getByRole('button', { name: '5 Sterne' }).click();
+    await expect(page.getByText('Kein Profil gewählt')).toBeVisible();
+    await expect(page.getByText(/klappt die Aktion/)).toBeVisible();
+  });
+});

tests/e2e/remote/recipe-detail.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+import {
+  clearFavorite,
+  clearRating,
+  removeFromWishlist
+} from './fixtures/api-cleanup';
+
+// Chicken Teriyaki auf kochwas-dev: 4 Portionen, 500 g Haehnchen, 100 ml Soja.
+const RECIPE_ID = 66;
+
+test.describe('Rezept-Detail', () => {
+  test.beforeEach(async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+  });
+
+  test.afterEach(async ({ request }) => {
+    await clearRating(request, RECIPE_ID, HENDRIK_ID);
+    await clearFavorite(request, RECIPE_ID, HENDRIK_ID);
+    await removeFromWishlist(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test('Header + Zutaten sichtbar', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    await expect(
+      page.getByRole('heading', { level: 1, name: /Chicken Teriyaki/i })
+    ).toBeVisible();
+    await expect(page.getByText('Hähnchenbrustfilet').first()).toBeVisible();
+  });
+
+  test('Portionen-Scaler: 4 -> 6 skaliert Mengen proportional', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    // Start: 4 Portionen, 500 g Haehnchen, 100 ml Soja.
+    await expect(page.locator('.srv-value strong').first()).toHaveText('4');
+    await page.getByRole('button', { name: 'Mehr' }).first().click();
+    await page.getByRole('button', { name: 'Mehr' }).first().click();
+    await expect(page.locator('.srv-value strong').first()).toHaveText('6');
+    // Skalierte Mengen 1.5x — ueber das Item-Name-Filter, robuster
+    // gegenueber Whitespace-Quirks zwischen <span class="qty">-Teilen.
+    await expect(
+      page.locator('.ing-list li', { hasText: 'Hähnchenbrustfilet' })
+    ).toContainText('750 g');
+    await expect(
+      page.locator('.ing-list li', { hasText: 'Sojasauce' })
+    ).toContainText('150 ml');
+  });
+
+  test('Favorit toggelt heart-Klasse sauber', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const favBtn = page.getByRole('button', { name: 'Favorit' });
+    await expect(favBtn).not.toHaveClass(/heart/);
+    await favBtn.click();
+    await expect(favBtn).toHaveClass(/heart/);
+    await favBtn.click();
+    await expect(favBtn).not.toHaveClass(/heart/);
+  });
+
+  test('Rating persistiert ueber Reload', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    await page.getByRole('button', { name: '4 Sterne' }).click();
+    await expect(page.getByRole('button', { name: '4 Sterne' })).toHaveClass(/filled/);
+    await page.reload();
+    await expect(page.getByRole('button', { name: '4 Sterne' })).toHaveClass(/filled/);
+  });
+
+  test('Heute gekocht inkrementiert Counter', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const cookedBtn = page.getByRole('button', { name: /Heute gekocht/i });
+    const before = (await cookedBtn.innerText()).trim();
+    await cookedBtn.click();
+    // Der Button bekommt einen "(N)"-Suffix bzw. der existierende zaehler
+    // steigt. Wir pruefen nur, dass sich der Text aendert.
+    await expect(cookedBtn).not.toHaveText(before);
+  });
+
+  test('Auf Wunschliste-Toggle funktioniert', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const wishBtn = page.getByRole('button', { name: /Auf Wunschliste/i });
+    const initialLabel = (await wishBtn.getAttribute('aria-label')) ?? '';
+    await wishBtn.click();
+    // aria-label wechselt zwischen "setzen" und "Von der Wunschliste entfernen"
+    await expect(wishBtn).not.toHaveAttribute('aria-label', initialLabel);
+  });
+});

tests/e2e/remote/search.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Suche', () => {
+  test('lokaler Treffer erscheint live beim Tippen', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('searchbox', { name: 'Suchbegriff' }).fill('lasagne');
+    await expect(page.getByRole('link', { name: /Pfannen Lasagne/i })).toBeVisible({
+      timeout: 5000
+    });
+  });
+
+  test('Web-Fallback bei unbekanntem Begriff', async ({ page }) => {
+    // Direkt per URL — spart den Debounce-Timer.
+    await page.goto('/?q=pizza+margherita');
+    await expect(page.getByText(/Keine lokalen Rezepte/i)).toBeVisible({ timeout: 15000 });
+    // Mindestens ein Web-Treffer mit einer Domain-Labeling.
+    await expect(page.getByText(/chefkoch\.de|rezeptwelt\.de/i).first()).toBeVisible();
+  });
+
+  test('Nonsense-Query rendert Fallback ohne Crash', async ({ page }) => {
+    // SearXNG matcht loose — selbst Nonsense gibt oft Fuzzy-Treffer.
+    // Wir pruefen deshalb nur, dass die Seite sinnvoll reagiert
+    // (entweder echter Empty-State ODER Web-Fallback) und kein JS-Fehler
+    // fliegt.
+    const errors: string[] = [];
+    page.on('pageerror', (err) => errors.push(err.message));
+    await page.goto('/?q=xxyyzznotarecipexxxxxxxx');
+    await expect(
+      page.getByText(/Schaue unter den Topfdeckeln|Keine lokalen Rezepte/i)
+    ).toBeVisible({ timeout: 15000 });
+    expect(errors).toEqual([]);
+  });
+
+  test('Deep-Link ?q=lasagne stellt Query im Input wieder her', async ({ page }) => {
+    await page.goto('/?q=lasagne');
+    const sb = page.getByRole('searchbox', { name: 'Suchbegriff' });
+    await expect(sb).toHaveValue('lasagne');
+  });
+});

tests/e2e/remote/wishlist.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { clearActiveProfile, setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+test.describe('Wunschliste-Seite', () => {
+  test('laedt Header + Sort-Tabs', async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/wishlist');
+    await expect(page.getByRole('heading', { level: 1, name: 'Wunschliste' })).toBeVisible();
+    for (const label of ['Meist gewünscht', 'Neueste', 'Älteste']) {
+      await expect(page.getByRole('tab', { name: label })).toBeVisible();
+    }
+  });
+
+  test('Badge im Header stimmt mit Anzahl Eintraegen ueberein', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/wishlist');
+    // Die API zaehlt die Wunschlisten-Rezepte — der Header-Badge sollte
+    // die gleiche Zahl zeigen.
+    const res = await request.get('/api/wishlist?sort=popular');
+    const body = (await res.json()) as { entries: unknown[] };
+    const expected = body.entries.length;
+    if (expected === 0) {
+      // Kein Badge bei Null — der Link hat dann gar keine Zahl.
+      return;
+    }
+    const badge = page.locator('a[href="/wishlist"]').first();
+    await expect(badge).toContainText(String(expected));
+  });
+
+  test('requireProfile zeigt Custom-Message "um mitzuwuenschen"', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/wishlist');
+    // Erster "Ich will das auch"-Button eines beliebigen Eintrags.
+    // Falls Wunschliste leer ist, ueberspringen.
+    const btn = page.getByRole('button', { name: /Ich will das auch/i }).first();
+    const count = await btn.count();
+    test.skip(count === 0, 'Wunschliste leer — Custom-Message-Test uebersprungen');
+
+    await btn.click();
+    await expect(page.getByText('Kein Profil gewählt')).toBeVisible();
+    await expect(page.getByText('um mitzuwünschen')).toBeVisible();
+  });
+});

tests/unit/search-store.test.ts

@@ -0,0 +1,264 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { SearchStore, type SearchSnapshot } from '../../src/lib/client/search.svelte';
+
+type FetchMock = ReturnType<typeof vi.fn>;
+
+function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
+  const calls = [...responses];
+  return vi.fn(async () => {
+    const r = calls.shift();
+    if (!r) throw new Error('fetch called more times than expected');
+    return {
+      ok: r.ok ?? true,
+      status: r.status ?? 200,
+      json: async () => r.body
+    } as Response;
+  });
+}
+
+describe('SearchStore', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('keeps results empty while query is <= 3 chars (debounced)', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'abc';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(store.searching).toBe(false);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('fires local search after debounce when query > 3 chars', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
+    store.query = 'pasta';
+    store.runDebounced();
+    expect(store.searching).toBe(true);
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
+    expect(store.hits).toHaveLength(1);
+    expect(store.searchedFor).toBe('pasta');
+    expect(store.localExhausted).toBe(true);
+  });
+
+  it('falls back to web search when local returns zero hits', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'pizza';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
+    expect(fetchImpl).toHaveBeenCalledTimes(2);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
+    expect(store.webPageno).toBe(1);
+  });
+
+  it('race-guard: stale fetch response discarded when query was cleared/changed', async () => {
+    vi.useFakeTimers();
+    let resolveFetch!: (v: Response) => void;
+    const fetchImpl = vi.fn(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveFetch = resolve;
+        })
+    );
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'stale-query';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+    // User keeps typing BEFORE the response arrives — race-guard should kick in
+    // when the fetch finally resolves.
+    store.query = 'different';
+    resolveFetch({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        hits: [
+          {
+            id: 99,
+            title: 'Stale',
+            description: null,
+            image_path: null,
+            source_domain: null,
+            avg_stars: null,
+            last_cooked_at: null
+          }
+        ]
+      })
+    } as Response);
+    // Flush microtasks so the awaited response + race-guard run.
+    await vi.runOnlyPendingTimersAsync();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(store.hits).toEqual([]);
+    expect(store.searchedFor).toBeNull();
+  });
+
+  it('loadMore: drains local first (offset pagination)', async () => {
+    vi.useFakeTimers();
+    const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const fetchImpl = mockFetch([
+      { body: { hits: page1 } },
+      { body: { hits: page2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'meal';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(30));
+    expect(store.localExhausted).toBe(false);
+    await store.loadMore();
+    expect(store.hits).toHaveLength(35);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
+    expect(store.localExhausted).toBe(true);
+  });
+
+  it('loadMore: switches to web pagination after local exhausted', async () => {
+    vi.useFakeTimers();
+    const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
+    const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
+    const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
+    const fetchImpl = mockFetch([
+      { body: { hits: local } },
+      { body: { hits: webP1 } },
+      { body: { hits: webP2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'soup';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    expect(store.localExhausted).toBe(true);
+    await store.loadMore();
+    expect(store.webHits).toHaveLength(1);
+    await store.loadMore();
+    expect(store.webHits).toHaveLength(2);
+    expect(store.webPageno).toBe(2);
+  });
+
+  it('web search error sets webError and marks webExhausted', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'anything';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
+    expect(store.webExhausted).toBe(true);
+  });
+
+  it('reset(): clears query, results, and pending debounce', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 100 });
+    store.query = 'foobar';
+    store.runDebounced();
+    store.reset();
+    await vi.advanceTimersByTimeAsync(200);
+    expect(store.query).toBe('');
+    expect(store.hits).toEqual([]);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    const snap: SearchSnapshot = {
+      query: 'lasagne',
+      hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
+      webHits: [],
+      searchedFor: 'lasagne',
+      webError: null,
+      localExhausted: true,
+      webPageno: 0,
+      webExhausted: false
+    };
+    store.restoreSnapshot(snap);
+    expect(store.query).toBe('lasagne');
+    expect(store.hits).toHaveLength(1);
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(fetchImpl).not.toHaveBeenCalled();
+    const round = store.captureSnapshot();
+    expect(round).toEqual(snap);
+  });
+
+  it('filterParam option: gets appended to both local and web requests', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterParam: () => '&domains=chefkoch.de'
+    });
+    store.query = 'curry';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
+  });
+
+  it('runSearch(q) cancels pending debounce to avoid double-fetch', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 1, title: 'immediate', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 300 });
+    store.query = 'meal';
+    store.runDebounced(); // schedules the 300ms timer
+    // Before the timer fires, call runSearch immediately (e.g. form submit).
+    await store.runSearch('meal');
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+    // Now advance past the original debounce — timer must not still fire.
+    await vi.advanceTimersByTimeAsync(400);
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
+
+  it('reSearch: immediate re-run with current query on filter change', async () => {
+    vi.useFakeTimers();
+    let filter = '';
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } },
+      { body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterDebounceMs: 5,
+      filterParam: () => filter
+    });
+    store.query = 'broth';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    filter = '&domains=chefkoch.de';
+    store.reSearch();
+    await vi.advanceTimersByTimeAsync(10);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
+    expect(last).toMatch(/&domains=chefkoch\.de/);
+  });
+});