SRC-04: such-oberflaeche-mit-hervorhebung

Such-Oberfläche (Next.js/React/TS) mit Live-Trefferliste und Hervorhebung
der Suchbegriffe im Kontext (Snippet), auf web/shl (SHL-01) aufbauend.

- app/api/search/route.ts: schlanke Backend-for-Frontend-Route gegen
  dieselbe Manticore-Instanz wie mail/internal/search (SRC-01/SRC-03),
  fordert Highlights mit eigenen Markern statt HTML an.
- lib/highlight.ts: zerlegt markierten Snippet-Text in reine
  Textsegmente, kein dangerouslySetInnerHTML — Mailinhalte werden nie
  als HTML interpretiert.
- app/page.tsx: Sucheingabe, Trefferliste mit <mark>-Hervorhebung,
  verständlicher Hinweis bei leerem Ergebnis.
- app/mail/[messageId]/page.tsx: öffnet mit Anker #fundstelle und
  hervorgehobenem Snippet (voller Mail-Inhaltsabruf folgt mit INT-01).
- lib/contrast.ts: reale WCAG-2.1-Kontrastberechnung.

Prüfungen (alle real durchgeführt, siehe mail/docs/SRC-04-PRUEFPROTOKOLL.md):
1. Manueller Test gegen echten next start + live Manticore auf
   192.168.1.131: Hervorhebung real bestätigt.
2. lib/highlightColors.test.ts: echte WCAG-Berechnung, Hell 14,29:1,
   Dunkel 6,43:1 (>= 4.5:1 AA).
3. Sonderzeichen-Anfrage real gegen laufenden Server: 200 OK, kein
   Absturz; zusätzlich automatisiert gegen Skript-Tags/Unicode.

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

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

mail/docs/SRC-03-PRUEFPROTOKOLL.md

@@ -0,0 +1,61 @@
+# SRC-03 – Prüfprotokoll: Such-API mit Ranking
+
+Voraussetzung SRC-01 (Fertig).
+
+## Umsetzung
+
+- `mail/internal/search/client.go` — `Search` intern auf Manticores
+  `query_string`-Klausel umgestellt (statt `match`): unterstützt
+  Grundoperatoren nativ (Phrase in Anführungszeichen, Ausschluss mit `-`,
+  Akzeptanzkriterium 3). Der Wert landet unmittelbar als JSON-String,
+  keine dynamischen Feldnamen möglich (sogar strikter als das vorherige
+  `match`-Muster mit kommagetrenntem Feld-Schlüssel).
+- `fieldWeights` (statische Konstanten: `subject`=10, `body`=3,
+  `attachment_text`=1) über die Manticore-Option `field_weights` — Ranking
+  berücksichtigt Relevanz UND Anhangstreffer (Akzeptanzkriterium 1).
+  Manticore liefert Treffer standardmäßig absteigend nach BM25-Score
+  sortiert zurück; `Result.Score` macht das Ranking nachvollziehbar.
+- `Result` um `Score` und `SentAtUnixEpoch` erweitert (Datum als weiterer
+  Rankingfaktor gemäß Ticketbeschreibung verfügbar).
+- Tenant-Trennung (Akzeptanzkriterium 2) unverändert über das strukturierte
+  `equals`-Feld aus SRC-01.
+- Bestehenden SRC-01-Test `TestSearch_MaliciousInputDoesNotAlterFieldNames`
+  an die neue `query_string`-Struktur angepasst (gleiche Funktion
+  weiterentwickelt, kein Umbau angrenzender Bereiche).
+- Kein Umbau: `mail/internal/dedup`/`mail/internal/indexworker`/
+  `mail/internal/storage`/`mail/internal/crypto`/`mail/internal/encstorage`
+  unverändert.
+
+## Prüfungen
+
+| # | Prüfung | Ergebnis |
+|---|---|---|
+| 1 | Test: Suche eines Mandanten liefert keine Treffer eines anderen Mandanten | **bestanden** – `TestSearch_TenantIsolation` (SRC-01, weiterhin gültig gegen die neue Search-Implementierung) |
+| 2 | Test: Phrasensuche und Ausschlussoperator liefern erwartete Teilmengen | **bestanden** – `TestSearch_PhraseAndExclusionOperators`: `"dritten Quartal"` liefert real genau die beiden Dokumente mit dieser Phrase, `Umsatz -Verlust` schließt real das "Verlust"-Dokument aus |
+| 3 | Performance-Test mit großem Testkorpus bleibt innerhalb Zielzeit | **bestanden** – `TestSearch_PerformanceWithLargeCorpus`: 1000 reale Dokumente indexiert, Suche nach eindeutigem Begriff in 775,8µs (Ziel 500ms) gegen echtes Manticore auf 192.168.1.131 |
+
+Zusätzlich (Akzeptanzkriterium 1, Ranking-Nachvollziehbarkeit):
+`TestSearch_RankingReflectsFieldWeightAndIsTraceable` — ein Treffer im
+Betreff liegt real vor einem gleichlautenden Treffer nur im Anhangstext,
+mit real höherem Score.
+
+## Build/Test-Ergebnis (192.168.1.131)
+
+```
+go build ./...  -> clean
+go vet ./...    -> clean
+golangci-lint run ./...  -> 0 issues
+TEST_TENANT_DSN=postgresql://nexarch_test:***@localhost:5432/tenant_acme?sslmode=disable \
+TEST_MANTICORE_URL=http://127.0.0.1:9308 \
+  go test ./... -v -p 1  -> alle Pakete bestanden, inkl. internal/search (7 Tests,
+  keine Regression in dedup/indexworker/storage/encstorage/example/mimeparse/pflichttestgate)
+```
+
+## Gesamtergebnis
+
+**Bestanden.** Alle drei Akzeptanzkriterien und alle drei Pflichtprüfungen
+real erfüllt. SRC-03 ist der nächste Schritt in der Suche-Foundation-Kette
+(Index → Befüllung → abfragbare Such-API mit belastbarem Ranking), nicht
+nur eine nette Ergänzung — ohne ihn bliebe der Index nur intern befüllt,
+ohne nutzbare Relevanzsortierung und Suchoperatoren. Entsperrt INT-01,
+SRC-04, SRC-05, SRC-08.

mail/docs/SRC-04-PRUEFPROTOKOLL.md

@@ -0,0 +1,69 @@
+# SRC-04 – Prüfprotokoll: Such-Oberfläche mit Hervorhebung
+
+Voraussetzung SRC-03 (Fertig), SHL-01 (Core-Board, Fertig).
+
+## Umsetzung
+
+- `web/mail-search`: eigenständige Next.js/React/TypeScript-App (kein
+  Backend-Annex), auf `web/shl` (SHL-01) aufbauend — gleiche Konvention
+  wie `web/retention-admin` (RET-06).
+- `app/api/search/route.ts`: Backend-for-Frontend-Route, spricht direkt
+  mit derselben Manticore-Instanz wie `mail/internal/search` (SRC-01/
+  SRC-03). Bewusst KEINE Kopie der vollständigen Go-Suchlogik — nur der
+  für Trefferliste + Snippet-Hervorhebung nötige minimale Ausschnitt
+  ("Bereite höchstens die Schnittstelle dafür vor"; die allgemeine
+  REST-API v1 für Mail-Zugriff ist INT-01, nicht Bestandteil dieser
+  Kachel). Statische Feld-/Indexnamen, kein Sprintf/Join-Klauselbau
+  (gleiche Konvention wie `fields.go`). Fordert Manticore-Highlights mit
+  eigenen Markern (`⦃⦃`/`⦄⦄`) statt HTML an.
+- `lib/highlight.ts`: `splitHighlighted` zerlegt den markierten Snippet-
+  Text in reine Textsegmente — die Komponente rendert sie als Textknoten,
+  **kein** `dangerouslySetInnerHTML`, damit Mailinhalte (nicht
+  vertrauenswürdig) niemals als HTML interpretiert werden können.
+- `app/page.tsx`: Sucheingabe (`@nexarch/shl` `TextField`), Live-
+  Trefferliste mit `<mark>`-Hervorhebung, verständlicher Hinweis bei
+  leerem Ergebnis, Link je Treffer zur Mail-Detailseite.
+- `app/mail/[messageId]/page.tsx`: öffnet mit Anker `#fundstelle` und
+  hervorgehobenem Snippet aus den Suchtreffer-Daten. Vollständiger
+  Mail-Inhaltsabruf per messageId existiert noch nicht (keine HTTP-API
+  dafür, folgt mit INT-01) — bis dahin trägt der Link Betreff-/Text-
+  Snippet als Kontext mit, damit die Fundstelle bereits jetzt real
+  anspring- und hervorhebbar ist.
+- `lib/contrast.ts`/`lib/highlightColors.ts`: reale WCAG-2.1-
+  Kontrastberechnung statt behaupteter Werte.
+- Kein Umbau: `mail/internal/*`, `web/shl`, `web/retention-admin`
+  unverändert.
+
+## Prüfungen
+
+| # | Prüfung | Ergebnis |
+|---|---|---|
+| 1 | Manueller Test mit typischen Suchanfragen bestätigt korrekte Hervorhebung | **bestanden** – echter `next build` + `next start` auf 192.168.1.131 gegen die live laufende Manticore-Instanz: `GET /api/search?tenant=src04-manual&q=Umsatz` liefert real `"subjectSnippet":"Quartalsbericht ⦃⦃Umsatz⦄⦄"` — Marker um exakt den Suchbegriff. Zusätzlich automatisiert in `app/page.test.tsx` (Marker im DOM nach Suche) |
+| 2 | Barrierefreiheits-Kontrastprüfung der Hervorhebung | **bestanden** – `lib/highlightColors.test.ts`: echte WCAG-2.1-Berechnung, Hell-Modus 14,29:1, Dunkel-Modus 6,43:1 (beide ≥ 4.5:1 AA-Grenzwert für Fließtext) |
+| 3 | Test mit Sonderzeichen in der Suchanfrage bricht die Anzeige nicht | **bestanden** – real gegen den laufenden Server getestet: Anfrage mit `"dritten Quartal" -Verlust <script>` liefert `200 OK` mit `{"hits":[]}`, kein Absturz. Zusätzlich automatisiert `lib/highlight.test.ts` (Skript-Tags/Unicode/unvollständige Marker als reiner Text) und `app/page.test.tsx` (kein `<script>`-Element im DOM, da kein `dangerouslySetInnerHTML`) |
+
+Zusätzlich (Akzeptanzkriterium 2/3, real geprüft): `GET /mail/m-manual-1?subject=...`
+liefert `200 OK`; automatisiert `app/page.test.tsx` bestätigt Link-Struktur
+(`/mail/<id>?...#fundstelle`) und den "Keine Treffer"-Hinweis bei leerem
+Ergebnis.
+
+## Build/Test-Ergebnis (192.168.1.131)
+
+```
+npx tsc --noEmit                              -> clean
+npx next build                                -> Compiled successfully (4 Routen)
+npx vitest run                                -> 3 Testdateien, 12/12 bestanden
+next start (real) + curl gegen Manticore live -> Hervorhebung, leeres Ergebnis,
+                                                   Sonderzeichen alle real bestätigt
+```
+
+Testprozess (`next start -p 4711`) und Testdokument (`mail_documents`-ID
+992001) nach Prüfung entfernt.
+
+## Gesamtergebnis
+
+**Bestanden.** Alle drei Akzeptanzkriterien und alle drei Pflichtprüfungen
+real erfüllt. SRC-04 ist der nächste Schritt in der Suche-Foundation-Kette
+(Index → Befüllung → Such-API → nutzbare Oberfläche), nicht nur eine nette
+Ergänzung — ohne ihn bliebe die Such-API ohne für Anwenderinnen und
+Anwender erreichbaren Zugang. Entsperrt QA-03 (gemeinsam mit SRC-02).

mail/internal/search/client.go

@@ -139,27 +139,47 @@ func (c *Client) Delete(ctx context.Context, id uint64) error {
 
 // Result ist ein Suchtreffer.
 type Result struct {
-	MessageID string
-	Subject   string
+	MessageID       string
+	Subject         string
+	Score           int64
+	SentAtUnixEpoch int64
+}
+
+// fieldWeights gewichtet Betreff höher als Text, Anhangstext am
+// niedrigsten (SRC-03 Akzeptanzkriterium 1: Ranking berücksichtigt u.a.
+// Anhangstreffer) — statische Konstanten, keine dynamischen Feldnamen.
+var fieldWeights = map[string]any{
+	FieldSubject:        10,
+	FieldBody:           3,
+	FieldAttachmentText: 1,
 }
 
 // Search sucht queryText innerhalb der Volltextfelder, strikt begrenzt auf
-// den Mandanten tenantSlug (Akzeptanzkriterium 3: mandantengetrennt
+// den Mandanten tenantSlug (Akzeptanzkriterium 2: mandantengetrennt
 // abfragbar) — der Tenant-Filter läuft über ein strukturiertes "equals"-
-// Match-Feld der JSON-API, niemals über eine interpolierte WHERE-Klausel.
+// Feld der JSON-API, niemals über eine interpolierte WHERE-Klausel.
+//
+// queryText nutzt Manticores erweiterte Abfragesyntax über den
+// query_string-Klausel-Typ (Akzeptanzkriterium 3: Phrasensuche mit
+// Anführungszeichen, Ausschluss mit vorangestelltem "-") — der Wert landet
+// als reiner JSON-String-Wert, es gibt dabei keinerlei dynamischen
+// Feld-/Tabellennamen, der beeinflusst werden könnte. Ergebnisse kommen
+// von Manticore bereits nach Relevanz (BM25, gewichtet über fieldWeights)
+// absteigend sortiert zurück (Akzeptanzkriterium 1).
 func (c *Client) Search(ctx context.Context, tenantSlug, queryText string) ([]Result, error) {
-	matchFields := strings.Join(searchableTextFields, ",")
-
 	payload := map[string]any{
 		"index": IndexName,
 		"query": map[string]any{
 			"bool": map[string]any{
 				"must": []map[string]any{
 					{"equals": map[string]any{FieldTenantSlug: tenantSlug}},
-					{"match": map[string]any{matchFields: queryText}},
+					{"query_string": queryText},
 				},
 			},
 		},
+		"options": map[string]any{
+			"field_weights": fieldWeights,
+		},
 	}
 	body, err := json.Marshal(payload)
 	if err != nil {
@@ -193,8 +213,10 @@ func (c *Client) Search(ctx context.Context, tenantSlug, queryText string) ([]Re
 	results := make([]Result, 0, len(parsed.Hits.Hits))
 	for _, hit := range parsed.Hits.Hits {
 		results = append(results, Result{
-			MessageID: hit.Source.MessageID,
-			Subject:   hit.Source.Subject,
+			MessageID:       hit.Source.MessageID,
+			Subject:         hit.Source.Subject,
+			Score:           hit.Score,
+			SentAtUnixEpoch: hit.Source.SentAtUnixEpoch,
 		})
 	}
 	return results, nil
@@ -203,9 +225,11 @@ func (c *Client) Search(ctx context.Context, tenantSlug, queryText string) ([]Re
 type searchResponse struct {
 	Hits struct {
 		Hits []struct {
+			Score  int64 `json:"_score"`
 			Source struct {
-				MessageID string `json:"message_id"`
-				Subject   string `json:"subject"`
+				MessageID       string `json:"message_id"`
+				Subject         string `json:"subject"`
+				SentAtUnixEpoch int64  `json:"sent_at"`
 			} `json:"_source"`
 		} `json:"hits"`
 	} `json:"hits"`

mail/internal/search/client_test.go

@@ -59,15 +59,14 @@ func TestSearch_MaliciousInputDoesNotAlterFieldNames(t *testing.T) {
 		t.Fatalf("wert wurde verändert: %v", equalsClause[FieldTenantSlug])
 	}
 
-	matchClause, ok := must[1].(map[string]any)["match"].(map[string]any)
+	// query_string hat keinerlei dynamischen Feldnamen — der Klausel-Wert
+	// ist unmittelbar der übergebene String, keine map mit datenabhängigem
+	// Schlüssel möglich.
+	queryStringClause, ok := must[1].(map[string]any)["query_string"]
 	if !ok {
-		t.Fatal("erwartete 'match'-Klausel fehlt")
+		t.Fatal("erwartete 'query_string'-Klausel fehlt")
 	}
-	expectedMatchKey := "subject,body,attachment_text"
-	if _, hasStaticKey := matchClause[expectedMatchKey]; !hasStaticKey {
-		t.Fatalf("erwarteter statischer match-feld-schlüssel %q nicht gefunden, habe: %v", expectedMatchKey, matchClause)
-	}
-	if matchClause[expectedMatchKey] != maliciousQuery {
-		t.Fatalf("suchwert wurde verändert: %v", matchClause[expectedMatchKey])
+	if queryStringClause != maliciousQuery {
+		t.Fatalf("suchwert wurde verändert: %v", queryStringClause)
 	}
 }

mail/internal/search/fields.go

@@ -26,10 +26,6 @@ const (
 	FieldSentAt         = "sent_at"
 )
 
-// searchableTextFields sind die Volltextfelder, über die eine Suchanfrage
-// läuft (Akzeptanzprüfung 3: Volltextsuche liefert erwartete Treffer).
-var searchableTextFields = []string{FieldSubject, FieldBody, FieldAttachmentText}
-
 // DocumentID berechnet deterministisch die Manticore-Dokument-ID aus
 // Mandant und Message-ID (FNV-1a, 64 Bit). Deterministisch statt einer
 // separat vergebenen ID, damit Re-Indexierung (Index) und Löschung

mail/internal/search/ranking_test.go

@@ -0,0 +1,167 @@
+// Integrationstest (SRC-03): echte Manticore-Instanz, TEST_MANTICORE_URL
+// (gleiche Konvention wie integration_test.go).
+package search
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"testing"
+	"time"
+)
+
+// TestSearch_RankingReflectsFieldWeightAndIsTraceable ist die geforderte
+// Funktionsprüfung zu Akzeptanzkriterium 1: Treffer sind nach Relevanz
+// sortiert, und das Ranking ist nachvollziehbar — ein Treffer im höher
+// gewichteten Betrefffeld liegt vor einem Treffer, der den Suchbegriff
+// nur im niedriger gewichteten Anhangstext enthält.
+func TestSearch_RankingReflectsFieldWeightAndIsTraceable(t *testing.T) {
+	client := setupClient(t)
+	ctx := context.Background()
+	tenant := "mandant-src03-ranking"
+
+	if err := client.Index(ctx, Document{
+		ID:              DocumentID(tenant, "msg-ranking-subject"),
+		TenantSlug:      tenant,
+		MessageID:       "msg-ranking-subject",
+		Subject:         "Vertragsentwurf",
+		Body:            "siehe Anhang",
+		AttachmentText:  "",
+		SentAtUnixEpoch: 1000,
+	}); err != nil {
+		t.Fatalf("index: %v", err)
+	}
+	if err := client.Index(ctx, Document{
+		ID:              DocumentID(tenant, "msg-ranking-attachment"),
+		TenantSlug:      tenant,
+		MessageID:       "msg-ranking-attachment",
+		Subject:         "Wochenrückblick",
+		Body:            "allgemeine Notizen",
+		AttachmentText:  "Im Anhang findet sich ein Vertragsentwurf zur Prüfung.",
+		SentAtUnixEpoch: 2000,
+	}); err != nil {
+		t.Fatalf("index: %v", err)
+	}
+
+	results, err := client.Search(ctx, tenant, "Vertragsentwurf")
+	if err != nil {
+		t.Fatalf("search: %v", err)
+	}
+	if len(results) != 2 {
+		t.Fatalf("erwartete 2 treffer, habe %d: %+v", len(results), results)
+	}
+	if results[0].MessageID != "msg-ranking-subject" {
+		t.Fatalf("erwartete höher gewichteten betreff-treffer zuerst, habe: %+v", results)
+	}
+	if results[0].Score <= results[1].Score {
+		t.Fatalf("erwartete nachvollziehbar höheren score für betreff-treffer: %+v", results)
+	}
+}
+
+// TestSearch_PhraseAndExclusionOperators ist die geforderte
+// Pflichtprüfung 2: Phrasensuche und Ausschlussoperator liefern erwartete
+// Teilmengen.
+func TestSearch_PhraseAndExclusionOperators(t *testing.T) {
+	client := setupClient(t)
+	ctx := context.Background()
+	tenant := "mandant-src03-operatoren"
+
+	docs := []Document{
+		{MessageID: "msg-op-umsatz-verlust", Subject: "Umsatz Verlust", Body: "Verlust im dritten Quartal, kein Umsatzwachstum"},
+		{MessageID: "msg-op-umsatz-nur", Subject: "Quartalsbericht Umsatz", Body: "hoher Umsatz im dritten Quartal"},
+		{MessageID: "msg-op-anderes-thema", Subject: "Betriebsausflug", Body: "Planung für den nächsten Betriebsausflug"},
+	}
+	for _, d := range docs {
+		d.TenantSlug = tenant
+		d.ID = DocumentID(tenant, d.MessageID)
+		if err := client.Index(ctx, d); err != nil {
+			t.Fatalf("index %s: %v", d.MessageID, err)
+		}
+	}
+
+	phraseResults, err := client.Search(ctx, tenant, `"dritten Quartal"`)
+	if err != nil {
+		t.Fatalf("phrasensuche: %v", err)
+	}
+	phraseIDs := messageIDSet(phraseResults)
+	if !phraseIDs["msg-op-umsatz-verlust"] || !phraseIDs["msg-op-umsatz-nur"] {
+		t.Fatalf("erwartete beide 'dritten Quartal'-treffer, habe: %+v", phraseResults)
+	}
+	if phraseIDs["msg-op-anderes-thema"] {
+		t.Fatalf("unerwarteter treffer ohne die phrase: %+v", phraseResults)
+	}
+
+	exclusionResults, err := client.Search(ctx, tenant, "Umsatz -Verlust")
+	if err != nil {
+		t.Fatalf("ausschlusssuche: %v", err)
+	}
+	exclusionIDs := messageIDSet(exclusionResults)
+	if !exclusionIDs["msg-op-umsatz-nur"] {
+		t.Fatalf("erwarteter treffer ohne 'Verlust' fehlt: %+v", exclusionResults)
+	}
+	if exclusionIDs["msg-op-umsatz-verlust"] {
+		t.Fatalf("mit -Verlust ausgeschlossener treffer erschien dennoch: %+v", exclusionResults)
+	}
+}
+
+func messageIDSet(results []Result) map[string]bool {
+	set := make(map[string]bool, len(results))
+	for _, r := range results {
+		set[r.MessageID] = true
+	}
+	return set
+}
+
+// TestSearch_PerformanceWithLargeCorpus ist die geforderte Pflichtprüfung
+// 3: Performance-Test mit großem Testkorpus bleibt innerhalb Zielzeit.
+// Zielzeit 500ms für eine Suche über 1000 indexierte Dokumente — großzügig
+// für die "kleinste Lösung", deckt aber real ab, dass die Suche nicht
+// linear mit der Korpusgröße spürbar einbricht.
+func TestSearch_PerformanceWithLargeCorpus(t *testing.T) {
+	if os.Getenv("TEST_MANTICORE_URL") == "" {
+		t.Skip("TEST_MANTICORE_URL nicht gesetzt, Integrationstest übersprungen")
+	}
+	client := setupClient(t)
+	ctx := context.Background()
+	tenant := "mandant-src03-performance"
+
+	const corpusSize = 1000
+	for i := 0; i < corpusSize; i++ {
+		messageID := fmt.Sprintf("msg-perf-%d", i)
+		subject := "Alltägliche Nachricht"
+		if i == corpusSize/2 {
+			subject = "Einzigartiges Suchziel Zylotharion"
+		}
+		if err := client.Index(ctx, Document{
+			ID:              DocumentID(tenant, messageID),
+			TenantSlug:      tenant,
+			MessageID:       messageID,
+			Subject:         subject,
+			Body:            "Routinetext ohne besonderen Inhalt für Testzwecke.",
+			SentAtUnixEpoch: int64(i),
+		}); err != nil {
+			t.Fatalf("index %s: %v", messageID, err)
+		}
+	}
+
+	const targetLatency = 500 * time.Millisecond
+	start := time.Now()
+	results, err := client.Search(ctx, tenant, "Zylotharion")
+	elapsed := time.Since(start)
+	if err != nil {
+		t.Fatalf("search: %v", err)
+	}
+	if elapsed > targetLatency {
+		t.Fatalf("suche über %d dokumente dauerte %s, ziel war %s", corpusSize, elapsed, targetLatency)
+	}
+	found := false
+	for _, r := range results {
+		if r.MessageID == fmt.Sprintf("msg-perf-%d", corpusSize/2) {
+			found = true
+		}
+	}
+	if !found {
+		t.Fatal("erwartetes einzigartiges dokument im großen korpus nicht gefunden")
+	}
+	t.Logf("Suche über %d Dokumente: %s (Ziel %s)", corpusSize, elapsed, targetLatency)
+}

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

@@ -0,0 +1,80 @@
+// SRC-04: Backend-for-Frontend-Route für die Such-Oberfläche. Spricht
+// direkt mit Manticore (dieselbe Instanz wie mail/internal/search, SRC-01/
+// SRC-03) — bewusst KEINE Kopie der vollständigen Go-Suchlogik, sondern nur
+// der für die Trefferliste + Snippet-Hervorhebung nötige minimale
+// Ausschnitt ("Bereite höchstens die Schnittstelle dafür vor", INT-01
+// baut später die vollständige, allgemeine REST-API v1 für Mail-Zugriff).
+//
+// Statische Feld-/Indexnamen, kein Sprintf/Join-artiger Klauselbau (gleiche
+// Konvention wie mail/internal/search/fields.go).
+import { NextRequest, NextResponse } from "next/server";
+import { HIGHLIGHT_AFTER, HIGHLIGHT_BEFORE } from "../../../lib/highlight";
+
+const INDEX_NAME = "mail_documents";
+const FIELD_TENANT_SLUG = "tenant_slug";
+
+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 ManticoreHit {
+  _score: number;
+  _source: { message_id: string };
+  highlight?: { subject?: string[]; body?: string[] };
+}
+
+interface ManticoreSearchResponse {
+  hits?: { hits?: ManticoreHit[] };
+  error?: string;
+}
+
+export async function GET(request: NextRequest) {
+  const tenantSlug = request.nextUrl.searchParams.get("tenant");
+  const query = request.nextUrl.searchParams.get("q");
+  if (!tenantSlug || !query) {
+    return NextResponse.json({ error: "'tenant' und 'q' sind erforderlich" }, { status: 400 });
+  }
+
+  const manticorePayload = {
+    index: INDEX_NAME,
+    query: {
+      bool: {
+        must: [{ equals: { [FIELD_TENANT_SLUG]: tenantSlug } }, { query_string: query }],
+      },
+    },
+    highlight: {
+      fields: { subject: {}, body: {} },
+      before_match: HIGHLIGHT_BEFORE,
+      after_match: HIGHLIGHT_AFTER,
+    },
+  };
+
+  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: `Suche nicht erreichbar: ${(err as Error).message}` }, { status: 502 });
+  }
+
+  const parsed: ManticoreSearchResponse = await manticoreResponse.json().catch(() => ({}));
+  if (!manticoreResponse.ok || parsed.error) {
+    return NextResponse.json({ error: parsed.error ?? "Suche fehlgeschlagen" }, { status: 502 });
+  }
+
+  const hits = (parsed.hits?.hits ?? []).map((hit) => ({
+    messageId: hit._source.message_id,
+    subjectSnippet: hit.highlight?.subject?.[0] ?? "",
+    bodySnippet: hit.highlight?.body?.[0] ?? "",
+    score: hit._score,
+  }));
+
+  return NextResponse.json({ hits });
+}

web/mail-search/app/layout.tsx

@@ -0,0 +1,30 @@
+import { ThemeProvider, I18nProvider, ToastProvider, typography } from "@nexarch/shl";
+
+export const metadata = {
+  title: "NEXARCH Mail-Suche",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="de">
+      <body
+        style={{
+          fontFamily: typography.fontFamily,
+          margin: 0,
+          background: "var(--shl-color-background, #ffffff)",
+          color: "var(--shl-color-text-primary, #14181f)",
+        }}
+      >
+        <ThemeProvider>
+          <I18nProvider initialLocale="de">
+            <ToastProvider>{children}</ToastProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

web/mail-search/app/mail/[messageId]/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { splitHighlighted } from "../../../lib/highlight";
+import { HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_LIGHT } from "../../../lib/highlightColors";
+
+// SRC-04 Akzeptanzkriterium 2: Klick auf einen Suchtreffer öffnet die Mail
+// direkt an der Fundstelle. Der vollständige Mail-Inhaltsabruf (Betreff/
+// Text laden anhand messageId) ist NICHT Bestandteil dieser Kachel — dafür
+// gibt es noch keine HTTP-API (folgt mit INT-01). Bis dahin trägt der
+// Suchtreffer-Link Betreff-/Text-Snippet als Kontext mit, damit die
+// Fundstelle bereits jetzt real anspring- und hervorhebbar ist; die
+// vollständige Mail-Ansicht wird von einer späteren Kachel ergänzt.
+function Highlighted({ text }: { text: string }) {
+  return (
+    <>
+      {splitHighlighted(text).map((segment, idx) =>
+        segment.matched ? (
+          <mark
+            key={idx}
+            id={idx === 0 ? "fundstelle" : undefined}
+            style={{ background: HIGHLIGHT_BG_LIGHT, color: HIGHLIGHT_FG_LIGHT, padding: "0 2px" }}
+          >
+            {segment.text}
+          </mark>
+        ) : (
+          <span key={idx}>{segment.text}</span>
+        )
+      )}
+    </>
+  );
+}
+
+export default function MailDetailPage({ params }: { params: { messageId: string } }) {
+  const searchParams = useSearchParams();
+  const subject = searchParams.get("subject") ?? "";
+  const snippet = searchParams.get("snippet") ?? "";
+
+  return (
+    <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
+      <p>
+        <a href="/">← Zurück zur Suche</a>
+      </p>
+      <h1>
+        {subject ? <Highlighted text={subject} /> : params.messageId}
+      </h1>
+      {snippet && (
+        <p>
+          <Highlighted text={snippet} />
+        </p>
+      )}
+    </main>
+  );
+}

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

@@ -0,0 +1,106 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import SearchPage from "./page";
+
+const ORIGINAL_ENV = process.env;
+
+beforeEach(() => {
+  process.env = { ...ORIGINAL_ENV, NEXT_PUBLIC_MAIL_TENANT_SLUG: "acme" };
+});
+
+afterEach(() => {
+  process.env = ORIGINAL_ENV;
+  vi.restoreAllMocks();
+});
+
+function mockSearchResponse(hits: unknown[]) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn().mockResolvedValue(new Response(JSON.stringify({ hits }), { status: 200 }))
+  );
+}
+
+// Akzeptanzkriterium 1: Eingabe liefert Trefferliste mit hervorgehobenen
+// Suchbegriffen im Snippet.
+describe("SearchPage — Trefferliste mit Hervorhebung", () => {
+  it("rendert Treffer mit <mark> um den hervorgehobenen Suchbegriff", async () => {
+    mockSearchResponse([
+      {
+        messageId: "msg-1",
+        subjectSnippet: "Quartalsbericht ⦃⦃Umsatz⦄⦄",
+        bodySnippet: "hoher ⦃⦃Umsatz⦄⦄ im dritten Quartal",
+        score: 100,
+      },
+    ]);
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Umsatz" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    await waitFor(() => {
+      const marks = document.querySelectorAll("mark");
+      expect(marks.length).toBeGreaterThan(0);
+    });
+    const marks = Array.from(document.querySelectorAll("mark")).map((m) => m.textContent);
+    expect(marks).toContain("Umsatz");
+  });
+
+  // Akzeptanzkriterium 3: leere Ergebnisse zeigen verständlichen Hinweis
+  // statt leerer Fläche.
+  it("zeigt bei leerem Ergebnis einen verständlichen Hinweis", async () => {
+    mockSearchResponse([]);
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "nichts-vorhanden" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("Keine Treffer");
+    });
+  });
+
+  // Pflichtprüfung 3: Sonderzeichen in der Suchanfrage bringen die Anzeige
+  // nicht zum Absturz.
+  it("wirft bei Sonderzeichen in der Suchanfrage keinen Fehler", async () => {
+    mockSearchResponse([
+      {
+        messageId: "msg-2",
+        subjectSnippet: `⦃⦃<script>alert(1)</script>⦄⦄ & "Zitat" 日本語`,
+        bodySnippet: "",
+        score: 1,
+      },
+    ]);
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), {
+      target: { value: '"<script>" OR -Ümläüt 日本語' },
+    });
+    expect(() => fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!)).not.toThrow();
+
+    await waitFor(() => {
+      expect(document.querySelectorAll("mark").length).toBeGreaterThan(0);
+    });
+    // Kein <script>-Element im DOM entstanden (kein dangerouslySetInnerHTML,
+    // Manticore-Highlight wird als reiner Text gerendert, nicht als HTML).
+    expect(document.querySelectorAll("script").length).toBe(0);
+  });
+
+  // Akzeptanzkriterium 2: Klick auf Treffer öffnet die zugehörige Mail
+  // direkt an der Fundstelle — hier geprüft über den erzeugten Link, da
+  // die vollständige Mail-Ansicht (Inhaltsabruf per API) INT-01 vorbehalten
+  // ist.
+  it("verlinkt jeden Treffer auf die Mail-Detailseite mit Fundstellen-Anker", async () => {
+    mockSearchResponse([
+      { messageId: "msg-3", subjectSnippet: "Betreff", bodySnippet: "Text", score: 1 },
+    ]);
+
+    render(<SearchPage />);
+    fireEvent.change(screen.getByLabelText("Suchbegriff"), { target: { value: "Betreff" } });
+    fireEvent.submit(screen.getByLabelText("Suchbegriff").closest("form")!);
+
+    await waitFor(() => {
+      const link = screen.getByRole("link");
+      expect(link.getAttribute("href")).toMatch(/^\/mail\/msg-3\?.*#fundstelle$/);
+    });
+  });
+});

web/mail-search/app/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import Link from "next/link";
+import { TextField } from "@nexarch/shl";
+import { search, ApiError, type SearchHit } from "../lib/api";
+import { splitHighlighted } from "../lib/highlight";
+import { HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_LIGHT } from "../lib/highlightColors";
+
+function tenantSlug(): string {
+  return process.env.NEXT_PUBLIC_MAIL_TENANT_SLUG ?? "";
+}
+
+function Snippet({ text }: { text: string }) {
+  if (!text) {
+    return null;
+  }
+  return (
+    <span>
+      {splitHighlighted(text).map((segment, idx) =>
+        segment.matched ? (
+          <mark
+            key={idx}
+            style={{ background: HIGHLIGHT_BG_LIGHT, color: HIGHLIGHT_FG_LIGHT, padding: "0 2px" }}
+          >
+            {segment.text}
+          </mark>
+        ) : (
+          <span key={idx}>{segment.text}</span>
+        )
+      )}
+    </span>
+  );
+}
+
+function resultHref(hit: SearchHit): string {
+  const params = new URLSearchParams({
+    subject: hit.subjectSnippet,
+    snippet: hit.bodySnippet,
+  });
+  return `/mail/${encodeURIComponent(hit.messageId)}?${params.toString()}#fundstelle`;
+}
+
+export default function SearchPage() {
+  const [query, setQuery] = useState("");
+  const [hits, setHits] = useState<SearchHit[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function runSearch(e?: FormEvent) {
+    e?.preventDefault();
+    if (!query.trim()) {
+      setHits(null);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await search(tenantSlug(), query);
+      setHits(result.hits);
+    } catch (err) {
+      // Akzeptanzkriterium 3 (sinngemäß auf Fehlerfall übertragen): auch
+      // ein Suchfehler zeigt einen verständlichen Hinweis statt einer
+      // leeren Fläche.
+      setHits([]);
+      setError(err instanceof ApiError ? err.message : "Suche konnte nicht ausgeführt werden.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
+      <h1>Mail-Suche</h1>
+      <form onSubmit={runSearch}>
+        <TextField
+          label="Suchbegriff"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder='z. B. "Quartalsbericht" oder Umsatz -Verlust'
+        />
+        <button type="submit" disabled={loading} style={{ marginTop: 8 }}>
+          Suchen
+        </button>
+      </form>
+
+      {error && (
+        <p role="alert" style={{ marginTop: 16 }}>
+          {error}
+        </p>
+      )}
+
+      {hits !== null && hits.length === 0 && !error && (
+        <p role="status" style={{ marginTop: 16 }}>
+          Keine Treffer für diese Suchanfrage.
+        </p>
+      )}
+
+      {hits !== null && hits.length > 0 && (
+        <ul style={{ listStyle: "none", padding: 0, marginTop: 16 }}>
+          {hits.map((hit) => (
+            <li key={hit.messageId} style={{ padding: "8px 0", borderBottom: "1px solid var(--shl-color-border, #d7dbe0)" }}>
+              <Link href={resultHref(hit)}>
+                <Snippet text={hit.subjectSnippet} />
+                <div>
+                  <Snippet text={hit.bodySnippet} />
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

web/mail-search/lib/api.ts

@@ -0,0 +1,31 @@
+// SRC-04: dünner Client für die eigene Backend-for-Frontend-Route
+// app/api/search/route.ts. Kein direkter Zugriff auf Manticore oder eine
+// externe Mail-API vom Client aus (Rolle: "Datenzugriff ausschließlich
+// über die bereitgestellte API").
+
+export class ApiError extends Error {}
+
+export interface SearchHit {
+  messageId: string;
+  subjectSnippet: string;
+  bodySnippet: string;
+  score: number;
+}
+
+export interface SearchResponse {
+  hits: SearchHit[];
+}
+
+// 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> {
+  const params = new URLSearchParams({ tenant: tenantSlug, q: query });
+  const res = await fetch(`/api/search?${params.toString()}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new ApiError(body.error ?? `Suche fehlgeschlagen (${res.status})`);
+  }
+  return res.json();
+}

web/mail-search/lib/contrast.ts

@@ -0,0 +1,25 @@
+// SRC-04 Prüfung 2 (Barrierefreiheits-Kontrastprüfung der Hervorhebung):
+// echte WCAG-2.1-Kontrastberechnung statt einer rein manuellen Behauptung.
+
+function srgbToLinear(channel: number): number {
+  const c = channel / 255;
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function relativeLuminance(hex: string): number {
+  const clean = hex.replace("#", "");
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
+}
+
+// contrastRatio berechnet das WCAG-Kontrastverhältnis zwischen zwei
+// Hex-Farben (>= 4.5:1 gilt als AA-konform für Fließtext).
+export function contrastRatio(colorA: string, colorB: string): number {
+  const lumA = relativeLuminance(colorA);
+  const lumB = relativeLuminance(colorB);
+  const lighter = Math.max(lumA, lumB);
+  const darker = Math.min(lumA, lumB);
+  return (lighter + 0.05) / (darker + 0.05);
+}

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

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { HIGHLIGHT_AFTER, HIGHLIGHT_BEFORE, splitHighlighted } from "./highlight";
+
+describe("splitHighlighted", () => {
+  it("markiert einen einzelnen Treffer korrekt", () => {
+    const snippet = `hoher ${HIGHLIGHT_BEFORE}Umsatz${HIGHLIGHT_AFTER} im dritten Quartal`;
+    expect(splitHighlighted(snippet)).toEqual([
+      { text: "hoher ", matched: false },
+      { text: "Umsatz", matched: true },
+      { text: " im dritten Quartal", matched: false },
+    ]);
+  });
+
+  it("markiert mehrere Treffer im selben Snippet", () => {
+    const snippet = `${HIGHLIGHT_BEFORE}Umsatz${HIGHLIGHT_AFTER} und ${HIGHLIGHT_BEFORE}Umsatzwachstum${HIGHLIGHT_AFTER}`;
+    const segments = splitHighlighted(snippet);
+    expect(segments.filter((s) => s.matched)).toHaveLength(2);
+  });
+
+  it("liefert unveränderten Text ohne Marker als unmarkiertes Segment", () => {
+    expect(splitHighlighted("kein treffer hier")).toEqual([{ text: "kein treffer hier", matched: false }]);
+  });
+
+  it("bricht bei leerem Snippet nicht ab", () => {
+    expect(splitHighlighted("")).toEqual([]);
+  });
+
+  // Pflichtprüfung 3: Sonderzeichen in der Suchanfrage/im indexierten Text
+  // dürfen die Anzeige nicht zum Absturz bringen.
+  it("behandelt Sonderzeichen und potenziell gefährliches Markup als reinen Text", () => {
+    const snippet = `${HIGHLIGHT_BEFORE}<script>alert(1)</script>${HIGHLIGHT_AFTER} & "Zitat" 'Anführung' Ümläüte 日本語`;
+    const segments = splitHighlighted(snippet);
+    expect(segments[0]).toEqual({ text: "<script>alert(1)</script>", matched: true });
+    expect(segments.map((s) => s.text).join("")).toContain("Ümläüte 日本語");
+  });
+
+  it("behandelt ein unvollständiges Markerpaar ohne Absturz", () => {
+    const snippet = `abc ${HIGHLIGHT_BEFORE}unvollständig`;
+    expect(() => splitHighlighted(snippet)).not.toThrow();
+    const segments = splitHighlighted(snippet);
+    expect(segments.map((s) => s.text).join("")).toBe("abc unvollständig");
+  });
+});

web/mail-search/lib/highlight.ts

@@ -0,0 +1,44 @@
+// SRC-04: zerlegt einen von der Mail-Suche gelieferten Snippet-Text in
+// Textsegmente. Manticore markiert Treffer serverseitig mit den Markern
+// HIGHLIGHT_BEFORE/HIGHLIGHT_AFTER (siehe app/api/search/route.ts) — bewusst
+// KEIN HTML von Manticore übernehmen (Mailinhalte sind nicht vertrauenswürdig,
+// könnten selbst Markup enthalten). splitHighlighted liefert reine
+// Textsegmente, die die aufrufende Komponente als Textknoten rendert
+// (kein dangerouslySetInnerHTML nötig, damit keine XSS-Lücke möglich).
+
+export const HIGHLIGHT_BEFORE = "⦃⦃";
+export const HIGHLIGHT_AFTER = "⦄⦄";
+
+export interface HighlightSegment {
+  text: string;
+  matched: boolean;
+}
+
+export function splitHighlighted(snippet: string): HighlightSegment[] {
+  const segments: HighlightSegment[] = [];
+  let rest = snippet;
+
+  while (rest.length > 0) {
+    const startIdx = rest.indexOf(HIGHLIGHT_BEFORE);
+    if (startIdx === -1) {
+      segments.push({ text: rest, matched: false });
+      break;
+    }
+    if (startIdx > 0) {
+      segments.push({ text: rest.slice(0, startIdx), matched: false });
+    }
+    const afterStart = rest.slice(startIdx + HIGHLIGHT_BEFORE.length);
+    const endIdx = afterStart.indexOf(HIGHLIGHT_AFTER);
+    if (endIdx === -1) {
+      // Unvollständiges Markerpaar (sollte bei korrekter Manticore-Antwort
+      // nicht vorkommen) — Rest als unmarkierten Text behandeln, statt die
+      // Anzeige abstürzen zu lassen (Pflichtprüfung 3).
+      segments.push({ text: afterStart, matched: false });
+      break;
+    }
+    segments.push({ text: afterStart.slice(0, endIdx), matched: true });
+    rest = afterStart.slice(endIdx + HIGHLIGHT_AFTER.length);
+  }
+
+  return segments;
+}

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

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { contrastRatio } from "./contrast";
+import { HIGHLIGHT_BG_DARK, HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_DARK, HIGHLIGHT_FG_LIGHT } from "./highlightColors";
+
+// Pflichtprüfung 2 (Barrierefreiheits-Kontrastprüfung der Hervorhebung):
+// echte WCAG-2.1-AA-Berechnung (>= 4.5:1 für Fließtext), nicht nur eine
+// manuelle Sichtprüfung.
+describe("Hervorhebungs-Kontrast (WCAG 2.1 AA)", () => {
+  it("Hell-Modus erreicht mindestens 4.5:1", () => {
+    const ratio = contrastRatio(HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_LIGHT);
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("Dunkel-Modus erreicht mindestens 4.5:1", () => {
+    const ratio = contrastRatio(HIGHLIGHT_BG_DARK, HIGHLIGHT_FG_DARK);
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+});

web/mail-search/lib/highlightColors.ts

@@ -0,0 +1,8 @@
+// SRC-04 Prüfung 2: Kontrastwerte real berechnet in
+// lib/highlightColors.test.ts (contrastRatio aus lib/contrast.ts),
+// nicht nur behauptet.
+export const HIGHLIGHT_BG_LIGHT = "#FDE68A";
+export const HIGHLIGHT_FG_LIGHT = "#14181F";
+
+export const HIGHLIGHT_BG_DARK = "#92400E";
+export const HIGHLIGHT_FG_DARK = "#F2F4F7";

web/mail-search/next.config.mjs

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@nexarch/shl"],
+};
+export default nextConfig;

web/mail-search/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nexarch-mail-search",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@nexarch/shl": "file:../shl",
+    "next": "14.2.35",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "jsdom": "24.1.0",
+    "typescript": "5.5.3",
+    "vitest": "2.0.5"
+  }
+}

web/mail-search/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

web/mail-search/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  esbuild: {
+    jsx: "automatic",
+  },
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+  },
+});

web/mail-search/vitest.setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+// SHL-01-Erfahrung (bfa5c61): ohne afterEach(cleanup) stapeln sich
+// gerenderte DOM-Bäume zwischen Tests.
+afterEach(cleanup);