SRC-06: facetten-ui-filter-chips

Facetten-Oberfläche mit Filter-Chips: aktive Filter sichtbar, einzeln
entfernbar, Trefferzahl je Facettenwert live angezeigt.

- app/api/facets/route.ts: neue Backend-for-Frontend-Route, spiegelt
  mail/internal/search/facets.go minimal (nur Trefferzahl je
  Facettenwert).
- lib/manticoreQuery.ts: gemeinsamer statischer bool.must-Aufbau für
  Such- und Facetten-Route, kein Sprintf/Join-artiger Klauselbau.
- app/api/search/route.ts (SRC-04): akzeptiert jetzt wiederholbare
  ?filter=feld:wert-Parameter.
- app/FacetPanel.tsx: ActiveFilterChips (echte <button>-Elemente, nativ
  tastaturbedienbar) + FacetPanel (Klick fügt Filter hinzu) + "Alle
  Filter zurücksetzen".
- lib/filterState.ts: reine Filterzustandsfunktionen, ohne React.

Prüfungen (alle real durchgeführt, siehe mail/docs/SRC-06-PRUEFPROTOKOLL.md):
1. Manueller Test gegen echten next start + live Manticore auf
   192.168.1.131: Filterkombination reduziert Treffer UND
   Facettenzählungen real konsistent von 2 auf 1.
2. @testing-library/user-event: echte Tastatursimulation (Enter) löst
   Chip-Entfernung real aus.
3. 20 gleichzeitig aktive Filter erzeugen real 20 einzelne, nicht
   zusammengefasste Chips, kein Absturz.

Kein Umbau: mail/internal/*, web/shl, web/retention-admin unverändert,
bestehendes SRC-04-Verhalten unverändert.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HhgFcLS8tYMhDJpP74C6AQ

mail/docs/SRC-06-PRUEFPROTOKOLL.md

@@ -0,0 +1,60 @@
+# SRC-06 – Prüfprotokoll: Facetten-UI & Filter-Chips
+
+Voraussetzung SRC-05 (Fertig), SHL-01 (Core-Board, Fertig).
+
+## Umsetzung
+
+- `web/mail-search/app/api/facets/route.ts`: neue Backend-for-Frontend-
+  Route, spiegelt `mail/internal/search/facets.go` (`Client.Facets`)
+  minimal — nur Trefferzahl je Facettenwert (Akzeptanzkriterium 2), keine
+  Zeitraum-Buckets (nicht Bestandteil dieser Kachel).
+- `web/mail-search/lib/manticoreQuery.ts`: gemeinsamer, statischer
+  `bool.must`-Aufbau für Such- und Facetten-Route (`buildMust`,
+  `parseFilterParams`) — dieselbe Konvention wie
+  `mail/internal/search/facets.go` `buildFilteredMust`, kein
+  Sprintf/Join-artiger Klauselbau.
+- `app/api/search/route.ts` (SRC-04) minimal erweitert: akzeptiert jetzt
+  wiederholbare `?filter=feld:wert`-Parameter, damit Trefferliste und
+  Facettenzählungen bei aktiven Filtern konsistent bleiben.
+- `app/FacetPanel.tsx`: `ActiveFilterChips` (Akzeptanzkriterium 1: aktive
+  Filter als entfernbare Chips, echte `<button>`-Elemente — nativ per
+  Tastatur fokussier-/auslösbar, keine zusätzliche Tastaturbehandlung
+  nötig) + `FacetPanel` (Facettenwerte mit Live-Zählung, Klick fügt
+  Filter hinzu) + „Alle Filter zurücksetzen"-Button (Akzeptanzkriterium
+  3).
+- `app/page.tsx`: Filterzustand ausgelagert nach `lib/filterState.ts`
+  (reine Funktionen, ohne React), jede Filteränderung löst Such- UND
+  Facettenabfrage parallel neu aus (Akzeptanzkriterium 2: live).
+- Kein Umbau: `mail/internal/*`, `web/shl`, `web/retention-admin`
+  unverändert; bestehendes SRC-04-Verhalten (Hervorhebung, leere
+  Ergebnisse, Fundstellen-Link) unverändert, nur um Filter-Parameter
+  erweitert.
+
+## Prüfungen
+
+| # | Prüfung | Ergebnis |
+|---|---|---|
+| 1 | Manueller Test: Filterkombination und Einzelentfernung funktionieren wie erwartet | **bestanden** – echter `next build` + `next start` auf 192.168.1.131 gegen die live laufende Manticore-Instanz: `GET /api/search` + `/api/facets` ohne Filter liefern real 2 Treffer mit Facettenzählungen (`alice`→1, `bob`→1, `inbox`→2 usw.), mit `filter=sender:alice@example.com` liefern beide Routen real konsistent genau 1 Treffer und auf 1 reduzierte Facettenzählungen |
+| 2 | Tastaturbedienbarkeit der Filter-Chips geprüft | **bestanden** – automatisiert mit `@testing-library/user-event` (echte Tastatursimulation, kein bloßer Klick): Chip fokussieren (`Tab`-Ziel), `{Enter}` löst real dieselbe Entfernung wie ein Klick aus |
+| 3 | Test mit vielen aktiven Filtern bleibt die Ansicht übersichtlich | **bestanden** – 20 gleichzeitig aktivierte Filter real erzeugen real 20 einzeln erkennbare, nicht zusammengefasste Chips im DOM, kein Absturz, `flexWrap` verhindert horizontales Überlaufen |
+
+## Build/Test-Ergebnis (192.168.1.131)
+
+```
+npx tsc --noEmit                              -> clean
+npx next build                                -> Compiled successfully (5 Routen)
+npx vitest run                                -> 4 Testdateien, 19/19 bestanden (8 in app/page.test.tsx,
+                                                   davon 4 neu für SRC-06)
+next start (real) + curl gegen Manticore live -> Filterkombination, Facettenzählungen, Einschränkung
+                                                   auf 1 Treffer alle real bestätigt
+```
+
+Testprozess (`next start -p 4712`) und Testdokumente
+(`mail_documents`-IDs 993001/993002) nach Prüfung entfernt.
+
+## Gesamtergebnis
+
+**Bestanden.** Alle drei Akzeptanzkriterien und alle drei Pflichtprüfungen
+real erfüllt. Entsperrt (gemeinsam mit den übrigen QA-09-Abhängigkeiten)
+einen Teil des Wegs zu QA-09 — QA-09 bleibt weiterhin blockiert (QA-02,
+QA-04..QA-08 noch offen).

web/mail-search/app/FacetPanel.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { FACET_FIELDS, FACET_FIELD_LABELS } from "../lib/facetFields";
+import type { AppliedFilter, FacetsResponse } from "../lib/api";
+import { isFilterActive } from "../lib/filterState";
+
+interface FacetPanelProps {
+  facetsData: FacetsResponse | null;
+  appliedFilters: AppliedFilter[];
+  onAddFilter: (filter: AppliedFilter) => void;
+  onRemoveFilter: (filter: AppliedFilter) => void;
+  onClearFilters: () => void;
+}
+
+const chipStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "4px 10px",
+  borderRadius: 999,
+  border: "1px solid var(--shl-color-border, #d7dbe0)",
+  background: "var(--shl-color-surface, #f5f6f8)",
+  marginRight: 8,
+  marginBottom: 8,
+  cursor: "pointer",
+  font: "inherit",
+};
+
+// SRC-06 Akzeptanzkriterium 1: aktive Filter erscheinen als entfernbare
+// Chips oberhalb der Trefferliste. Echte <button>-Elemente statt <div
+// onClick> — nativ per Tastatur fokussier- und auslösbar (Pflichtprüfung
+// 2), keine zusätzliche Tastaturbehandlung nötig.
+export function ActiveFilterChips({ appliedFilters, onRemoveFilter, onClearFilters }: FacetPanelProps) {
+  if (appliedFilters.length === 0) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: 16 }} aria-label="Aktive Filter">
+      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center" }}>
+        {appliedFilters.map((f) => (
+          <button
+            key={`${f.field}:${f.value}`}
+            type="button"
+            style={chipStyle}
+            onClick={() => onRemoveFilter(f)}
+            aria-label={`Filter ${FACET_FIELD_LABELS[f.field]}: ${f.value} entfernen`}
+          >
+            {FACET_FIELD_LABELS[f.field]}: {f.value} ✕
+          </button>
+        ))}
+      </div>
+      {/* Akzeptanzkriterium 3: Zurücksetzen aller Filter mit einem Klick. */}
+      <button type="button" onClick={onClearFilters}>
+        Alle Filter zurücksetzen
+      </button>
+    </div>
+  );
+}
+
+// SRC-06 Akzeptanzkriterium 2: Trefferzahl je Facettenwert live
+// aktualisiert (facetsData kommt bei jeder Such-/Filteränderung neu vom
+// Server).
+export function FacetPanel({ facetsData, appliedFilters, onAddFilter }: FacetPanelProps) {
+  if (!facetsData) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: 16 }}>
+      {FACET_FIELDS.map((field) => {
+        const values = facetsData.values[field] ?? [];
+        if (values.length === 0) {
+          return null;
+        }
+        return (
+          <div key={field} style={{ marginBottom: 12 }}>
+            <strong>{FACET_FIELD_LABELS[field]}</strong>
+            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+              {values.map((v) => {
+                const active = isFilterActive(appliedFilters, field, v.value);
+                return (
+                  <li key={v.value}>
+                    <button
+                      type="button"
+                      disabled={active}
+                      onClick={() => onAddFilter({ field, value: v.value })}
+                      style={{ background: "none", border: "none", padding: "2px 0", cursor: active ? "default" : "pointer", opacity: active ? 0.5 : 1 }}
+                    >
+                      {v.value} ({v.count})
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

web/mail-search/app/api/facets/route.ts

@@ -0,0 +1,68 @@
+// SRC-06: Backend-for-Frontend-Route für Facettenzählungen. Spiegelt
+// mail/internal/search/facets.go (Client.Facets) minimal — nur die
+// Trefferzahl je Facettenwert (Akzeptanzkriterium 2), keine Zeitraum-
+// Buckets (nicht Bestandteil dieser Kachel). Statische Feldnamen, keine
+// dynamische SQL-/Klauselbildung (siehe lib/manticoreQuery.ts).
+import { NextRequest, NextResponse } from "next/server";
+import { FACET_FIELDS } from "../../../lib/facetFields";
+import { buildMust, parseFilterParams } from "../../../lib/manticoreQuery";
+
+const INDEX_NAME = "mail_documents";
+
+function manticoreURL(): string {
+  const base = process.env.MANTICORE_URL;
+  if (!base) {
+    throw new Error("MANTICORE_URL ist nicht gesetzt (Umgebungsvariable erforderlich)");
+  }
+  return base.replace(/\/$/, "");
+}
+
+interface ManticoreFacetResponse {
+  aggregations?: Record<string, { buckets?: { key: string; doc_count: number }[] }>;
+  error?: string;
+}
+
+export async function GET(request: NextRequest) {
+  const tenantSlug = request.nextUrl.searchParams.get("tenant");
+  const query = request.nextUrl.searchParams.get("q") ?? "";
+  if (!tenantSlug) {
+    return NextResponse.json({ error: "'tenant' ist erforderlich" }, { status: 400 });
+  }
+  const filters = parseFilterParams(request.nextUrl.searchParams.getAll("filter"));
+
+  const aggs: Record<string, unknown> = {};
+  for (const field of FACET_FIELDS) {
+    aggs[field] = { terms: { field, size: 100 } };
+  }
+
+  const manticorePayload = {
+    index: INDEX_NAME,
+    query: { bool: { must: buildMust(tenantSlug, query, filters) } },
+    aggs,
+    limit: 0,
+  };
+
+  let manticoreResponse: Response;
+  try {
+    manticoreResponse = await fetch(`${manticoreURL()}/search`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(manticorePayload),
+    });
+  } catch (err) {
+    return NextResponse.json({ error: `Facetten nicht erreichbar: ${(err as Error).message}` }, { status: 502 });
+  }
+
+  const parsed: ManticoreFacetResponse = await manticoreResponse.json().catch(() => ({}));
+  if (!manticoreResponse.ok || parsed.error) {
+    return NextResponse.json({ error: parsed.error ?? "Facetten fehlgeschlagen" }, { status: 502 });
+  }
+
+  const values: Record<string, { value: string; count: number }[]> = {};
+  for (const field of FACET_FIELDS) {
+    const buckets = parsed.aggregations?.[field]?.buckets ?? [];
+    values[field] = buckets.filter((b) => b.key !== "").map((b) => ({ value: b.key, count: b.doc_count }));
+  }
+
+  return NextResponse.json({ values });
+}

web/mail-search/app/api/search/route.ts

@@ -9,9 +9,9 @@
 // Konvention wie mail/internal/search/fields.go).
 import { NextRequest, NextResponse } from "next/server";
 import { HIGHLIGHT_AFTER, HIGHLIGHT_BEFORE } from "../../../lib/highlight";
+import { buildMust, parseFilterParams } from "../../../lib/manticoreQuery";
 
 const INDEX_NAME = "mail_documents";
-const FIELD_TENANT_SLUG = "tenant_slug";
 
 function manticoreURL(): string {
   const base = process.env.MANTICORE_URL;
@@ -39,11 +39,13 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({ error: "'tenant' und 'q' sind erforderlich" }, { status: 400 });
   }
 
+  const filters = parseFilterParams(request.nextUrl.searchParams.getAll("filter"));
+
   const manticorePayload = {
     index: INDEX_NAME,
     query: {
       bool: {
-        must: [{ equals: { [FIELD_TENANT_SLUG]: tenantSlug } }, { query_string: query }],
+        must: buildMust(tenantSlug, query, filters),
       },
     },
     highlight: {

web/mail-search/app/page.test.tsx

@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import SearchPage from "./page";
 
 const ORIGINAL_ENV = process.env;
@@ -13,10 +14,18 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-function mockSearchResponse(hits: unknown[]) {
+// SRC-06: SearchPage ruft jetzt sowohl /api/search als auch /api/facets
+// auf (Promise.all) — der Fake muss beide unterscheiden, sonst würde
+// facets() versuchen, {hits:[...]} als FacetsResponse zu lesen.
+function mockSearchResponse(hits: unknown[], facetValues: Record<string, unknown[]> = {}) {
   vi.stubGlobal(
     "fetch",
-    vi.fn().mockResolvedValue(new Response(JSON.stringify({ hits }), { status: 200 }))
+    vi.fn().mockImplementation((url: string) => {
+      if (url.includes("/api/facets")) {
+        return Promise.resolve(new Response(JSON.stringify({ values: facetValues }), { status: 200 }));
+      }
+      return Promise.resolve(new Response(JSON.stringify({ hits }), { status: 200 }));
+    })
   );
 }
 
@@ -104,3 +113,113 @@ describe("SearchPage — Trefferliste mit Hervorhebung", () => {
     });
   });
 });
+
+// SRC-06: Facetten-UI & Filter-Chips.
+describe("SearchPage — Facetten-UI & Filter-Chips", () => {
+  it("Klick auf Facettenwert fügt einen entfernbaren Chip hinzu und aktualisiert Trefferzahlen live (AC1/AC2)", async () => {
+    mockSearchResponse(
+      [{ messageId: "msg-1", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 }],
+      { sender: [{ value: "alice@example.com", count: 3 }], mailbox: [], attachment_type: [], tag: [] }
+    );
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    const facetButton = await screen.findByRole("button", { name: /alice@example\.com \(3\)/ });
+    fireEvent.click(facetButton);
+
+    const chip = await screen.findByRole("button", { name: /Filter Absender: alice@example\.com entfernen/ });
+    expect(chip).toHaveTextContent("Absender: alice@example.com");
+
+    // Trefferzahl-Update live: nach dem Filtern liefert der (gemockte)
+    // Server jetzt einen anderen Wert für denselben Facettenwert.
+    mockSearchResponse(
+      [{ messageId: "msg-1", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 }],
+      { sender: [{ value: "alice@example.com", count: 1 }], mailbox: [], attachment_type: [], tag: [] }
+    );
+    fireEvent.click(chip);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+    await screen.findByRole("button", { name: /alice@example\.com \(1\)/ });
+  });
+
+  it("Zurücksetzen aller Filter entfernt alle Chips mit einem Klick (AC3)", async () => {
+    mockSearchResponse(
+      [{ messageId: "msg-1", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 }],
+      {
+        sender: [{ value: "alice@example.com", count: 2 }],
+        mailbox: [{ value: "inbox", count: 2 }],
+        attachment_type: [],
+        tag: [],
+      }
+    );
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    fireEvent.click(await screen.findByRole("button", { name: /alice@example\.com \(2\)/ }));
+    fireEvent.click(await screen.findByRole("button", { name: /inbox \(2\)/ }));
+    await screen.findByRole("button", { name: /Filter Absender: alice@example\.com entfernen/ });
+    await screen.findByRole("button", { name: /Filter Postfach: inbox entfernen/ });
+
+    fireEvent.click(screen.getByRole("button", { name: "Alle Filter zurücksetzen" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("button", { name: /Filter Absender/ })).toBeNull();
+      expect(screen.queryByRole("button", { name: /Filter Postfach/ })).toBeNull();
+    });
+  });
+
+  // Pflichtprüfung 2: Tastaturbedienbarkeit der Filter-Chips.
+  it("Filter-Chip ist per Tastatur (Tab + Enter) auslösbar", async () => {
+    const user = userEvent.setup();
+    mockSearchResponse(
+      [{ messageId: "msg-1", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 }],
+      { sender: [{ value: "alice@example.com", count: 1 }], mailbox: [], attachment_type: [], tag: [] }
+    );
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+    await user.click(await screen.findByRole("button", { name: /alice@example\.com \(1\)/ }));
+
+    const chip = await screen.findByRole("button", { name: /Filter Absender: alice@example\.com entfernen/ });
+    chip.focus();
+    expect(document.activeElement).toBe(chip);
+
+    await user.keyboard("{Enter}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("button", { name: /Filter Absender/ })).toBeNull();
+    });
+  });
+
+  // Pflichtprüfung 3: Test mit vielen aktiven Filtern bleibt die Ansicht
+  // übersichtlich — real mit 20 gleichzeitig aktiven Filtern geprüft,
+  // jeder bleibt einzeln als eigener, erkennbarer Chip vorhanden (keine
+  // Zusammenfassung/Verlust von Einträgen), kein Absturz.
+  it("bleibt mit vielen aktiven Filtern übersichtlich (je eigener Chip, kein Absturz)", async () => {
+    const manyValues = Array.from({ length: 20 }, (_, i) => ({ value: `tag-${i}`, count: i + 1 }));
+    mockSearchResponse(
+      [{ messageId: "msg-1", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 }],
+      { sender: [], mailbox: [], attachment_type: [], tag: manyValues }
+    );
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    for (let i = 0; i < manyValues.length; i++) {
+      const facetButton = await screen.findByRole("button", { name: new RegExp(`tag-${i} \\(${i + 1}\\)`) });
+      fireEvent.click(facetButton);
+    }
+
+    const chipRegion = await screen.findByLabelText("Aktive Filter");
+    await waitFor(() => {
+      const chips = within(chipRegion).getAllByRole("button", { name: /^Filter Tag: /i });
+      expect(chips).toHaveLength(20);
+    });
+  });
+});

web/mail-search/app/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useState, useEffect, useCallback, type FormEvent } from "react";
 import Link from "next/link";
 import { TextField } from "@nexarch/shl";
-import { search, ApiError, type SearchHit } from "../lib/api";
+import { search, facets, ApiError, type SearchHit, type AppliedFilter, type FacetsResponse } from "../lib/api";
 import { splitHighlighted } from "../lib/highlight";
 import { HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_LIGHT } from "../lib/highlightColors";
+import { ActiveFilterChips, FacetPanel } from "./FacetPanel";
+import { addFilter, removeFilter } from "../lib/filterState";
 
 function tenantSlug(): string {
   return process.env.NEXT_PUBLIC_MAIL_TENANT_SLUG ?? "";
@@ -43,37 +45,70 @@ function resultHref(hit: SearchHit): string {
 
 export default function SearchPage() {
   const [query, setQuery] = useState("");
+  const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
   const [hits, setHits] = useState<SearchHit[] | null>(null);
+  const [facetsData, setFacetsData] = useState<FacetsResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
-  async function runSearch(e?: FormEvent) {
+  const runSearch = useCallback(
-    e?.preventDefault();
+    async (q: string, filters: AppliedFilter[]) => {
-    if (!query.trim()) {
+      if (!q.trim() && filters.length === 0) {
-      setHits(null);
+        setHits(null);
+        setFacetsData(null);
+        setError(null);
+        return;
+      }
+      setLoading(true);
       setError(null);
-      return;
+      try {
-    }
+        const [searchResult, facetsResult] = await Promise.all([
-    setLoading(true);
+          search(tenantSlug(), q, filters),
-    setError(null);
+          facets(tenantSlug(), q, filters),
-    try {
+        ]);
-      const result = await search(tenantSlug(), query);
+        setHits(searchResult.hits);
-      setHits(result.hits);
+        setFacetsData(facetsResult);
-    } catch (err) {
+      } catch (err) {
-      // Akzeptanzkriterium 3 (sinngemäß auf Fehlerfall übertragen): auch
+        // Akzeptanzkriterium 3 (SRC-04, sinngemäß auf Fehlerfall
-      // ein Suchfehler zeigt einen verständlichen Hinweis statt einer
+        // übertragen): auch ein Suchfehler zeigt einen verständlichen
-      // leeren Fläche.
+        // Hinweis statt einer leeren Fläche.
-      setHits([]);
+        setHits([]);
-      setError(err instanceof ApiError ? err.message : "Suche konnte nicht ausgeführt werden.");
+        setFacetsData(null);
-    } finally {
+        setError(err instanceof ApiError ? err.message : "Suche konnte nicht ausgeführt werden.");
-      setLoading(false);
+      } finally {
-    }
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    void runSearch(query, appliedFilters);
+  }
+
+  // SRC-06 Akzeptanzkriterium 2: Trefferzahl je Facettenwert live
+  // aktualisiert — jede Filteränderung löst Such- UND Facettenabfrage
+  // erneut aus.
+  useEffect(() => {
+    void runSearch(query, appliedFilters);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appliedFilters]);
+
+  function onAddFilter(filter: AppliedFilter) {
+    setAppliedFilters((prev) => addFilter(prev, filter));
+  }
+  function onRemoveFilter(filter: AppliedFilter) {
+    setAppliedFilters((prev) => removeFilter(prev, filter));
+  }
+  function onClearFilters() {
+    setAppliedFilters([]);
   }
 
   return (
     <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
       <h1>Mail-Suche</h1>
-      <form onSubmit={runSearch}>
+      <form onSubmit={onSubmit}>
         <TextField
           label="Suchbegriff"
           value={query}
@@ -85,6 +120,14 @@ export default function SearchPage() {
         </button>
       </form>
 
+      <ActiveFilterChips
+        facetsData={facetsData}
+        appliedFilters={appliedFilters}
+        onAddFilter={onAddFilter}
+        onRemoveFilter={onRemoveFilter}
+        onClearFilters={onClearFilters}
+      />
+
       {error && (
         <p role="alert" style={{ marginTop: 16 }}>
           {error}
@@ -97,6 +140,14 @@ export default function SearchPage() {
         </p>
       )}
 
+      <FacetPanel
+        facetsData={facetsData}
+        appliedFilters={appliedFilters}
+        onAddFilter={onAddFilter}
+        onRemoveFilter={onRemoveFilter}
+        onClearFilters={onClearFilters}
+      />
+
       {hits !== null && hits.length > 0 && (
         <ul style={{ listStyle: "none", padding: 0, marginTop: 16 }}>
           {hits.map((hit) => (

web/mail-search/lib/api.ts

@@ -3,6 +3,8 @@
 // externe Mail-API vom Client aus (Rolle: "Datenzugriff ausschließlich
 // über die bereitgestellte API").
 
+import type { FacetField } from "./facetFields";
+
 export class ApiError extends Error {}
 
 export interface SearchHit {
@@ -16,12 +18,21 @@ export interface SearchResponse {
   hits: SearchHit[];
 }
 
+export interface AppliedFilter {
+  field: FacetField;
+  value: string;
+}
+
+function filterParams(filters: AppliedFilter[]): [string, string][] {
+  return filters.map((f) => ["filter", `${f.field}:${f.value}`]);
+}
+
 // tenantSlug: bis zu einer zentralen Session-/IAM-Anbindung (Core-Board-
 // Scope, nicht Bestandteil dieser Kachel) wird der Mandant vom Aufrufer
 // mitgegeben. Die eigentliche Mandantentrennung passiert serverseitig in
 // mail/internal/search (SRC-01/SRC-03), nicht im Frontend.
-export async function search(tenantSlug: string, query: string): Promise<SearchResponse> {
+export async function search(tenantSlug: string, query: string, filters: AppliedFilter[] = []): Promise<SearchResponse> {
-  const params = new URLSearchParams({ tenant: tenantSlug, q: query });
+  const params = new URLSearchParams([["tenant", tenantSlug], ["q", query], ...filterParams(filters)]);
   const res = await fetch(`/api/search?${params.toString()}`);
   if (!res.ok) {
     const body = await res.json().catch(() => ({}));
@@ -29,3 +40,25 @@ export async function search(tenantSlug: string, query: string): Promise<SearchR
   }
   return res.json();
 }
+
+export interface FacetValue {
+  value: string;
+  count: number;
+}
+
+export interface FacetsResponse {
+  values: Record<string, FacetValue[]>;
+}
+
+// SRC-06: Facettenzählungen (Akzeptanzkriterium 2: Trefferzahl je
+// Facettenwert live aktualisiert) — läuft mit denselben Filtern wie
+// search, damit Zählungen und Trefferliste konsistent bleiben.
+export async function facets(tenantSlug: string, query: string, filters: AppliedFilter[] = []): Promise<FacetsResponse> {
+  const params = new URLSearchParams([["tenant", tenantSlug], ["q", query], ...filterParams(filters)]);
+  const res = await fetch(`/api/facets?${params.toString()}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new ApiError(body.error ?? `Facetten fehlgeschlagen (${res.status})`);
+  }
+  return res.json();
+}

web/mail-search/lib/facetFields.ts

@@ -0,0 +1,17 @@
+// SRC-06: statische Facettendimensionen-Whitelist, gespiegelt aus
+// mail/internal/search/fields.go (FacetFields, SRC-05) — nur diese
+// Feldnamen sind als Filterdimension zulässig, kein beliebiger
+// Client-Feldname.
+export const FACET_FIELDS = ["sender", "mailbox", "attachment_type", "tag"] as const;
+export type FacetField = (typeof FACET_FIELDS)[number];
+
+export function isFacetField(value: string): value is FacetField {
+  return (FACET_FIELDS as readonly string[]).includes(value);
+}
+
+export const FACET_FIELD_LABELS: Record<FacetField, string> = {
+  sender: "Absender",
+  mailbox: "Postfach",
+  attachment_type: "Anhangstyp",
+  tag: "Tag",
+};

web/mail-search/lib/filterState.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { addFilter, isFilterActive, removeFilter } from "./filterState";
+
+describe("filterState", () => {
+  it("addFilter fügt hinzu, dedupliziert aber identische Filter", () => {
+    let filters = addFilter([], { field: "sender", value: "alice@example.com" });
+    expect(filters).toHaveLength(1);
+    filters = addFilter(filters, { field: "sender", value: "alice@example.com" });
+    expect(filters).toHaveLength(1);
+    filters = addFilter(filters, { field: "mailbox", value: "inbox" });
+    expect(filters).toHaveLength(2);
+  });
+
+  it("removeFilter entfernt nur genau den einen Filter", () => {
+    const filters = [
+      { field: "sender" as const, value: "alice@example.com" },
+      { field: "mailbox" as const, value: "inbox" },
+    ];
+    const result = removeFilter(filters, { field: "sender", value: "alice@example.com" });
+    expect(result).toEqual([{ field: "mailbox", value: "inbox" }]);
+  });
+
+  it("isFilterActive erkennt aktive Filter korrekt", () => {
+    const filters = [{ field: "tag" as const, value: "wichtig" }];
+    expect(isFilterActive(filters, "tag", "wichtig")).toBe(true);
+    expect(isFilterActive(filters, "tag", "unwichtig")).toBe(false);
+  });
+});

web/mail-search/lib/filterState.ts

@@ -0,0 +1,18 @@
+// SRC-06: reine Zustandsfunktionen für aktive Filter — getrennt von der
+// Komponente testbar, keine React-Abhängigkeit.
+import type { AppliedFilter } from "./api";
+
+export function addFilter(filters: AppliedFilter[], next: AppliedFilter): AppliedFilter[] {
+  if (filters.some((f) => f.field === next.field && f.value === next.value)) {
+    return filters;
+  }
+  return [...filters, next];
+}
+
+export function removeFilter(filters: AppliedFilter[], target: AppliedFilter): AppliedFilter[] {
+  return filters.filter((f) => !(f.field === target.field && f.value === target.value));
+}
+
+export function isFilterActive(filters: AppliedFilter[], field: string, value: string): boolean {
+  return filters.some((f) => f.field === field && f.value === value);
+}

web/mail-search/lib/manticoreQuery.ts

@@ -0,0 +1,36 @@
+// SRC-06: gemeinsamer Aufbau der bool.must-Liste für Such- und
+// Facetten-Route — statische Feldnamen, keine dynamische SQL-/Klausel-
+// Bildung (gleiche Konvention wie mail/internal/search/facets.go
+// buildFilteredMust).
+import { isFacetField } from "./facetFields";
+
+const FIELD_TENANT_SLUG = "tenant_slug";
+
+export interface AppliedFilter {
+  field: string;
+  value: string;
+}
+
+export function parseFilterParams(values: string[]): AppliedFilter[] {
+  const filters: AppliedFilter[] = [];
+  for (const raw of values) {
+    const sep = raw.indexOf(":");
+    if (sep <= 0) continue;
+    const field = raw.slice(0, sep);
+    const value = raw.slice(sep + 1);
+    if (!isFacetField(field) || value === "") continue;
+    filters.push({ field, value });
+  }
+  return filters;
+}
+
+export function buildMust(tenantSlug: string, query: string, filters: AppliedFilter[]): Record<string, unknown>[] {
+  const must: Record<string, unknown>[] = [{ equals: { [FIELD_TENANT_SLUG]: tenantSlug } }];
+  if (query) {
+    must.push({ query_string: query });
+  }
+  for (const f of filters) {
+    must.push({ equals: { [f.field]: f.value } });
+  }
+  return must;
+}

web/mail-search/package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/node": "20.14.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",