From c103e0162e3d456a83c29935cb5006a1a7df3d97 Mon Sep 17 00:00:00 2001
From: setkyar <setkyar16@gmail.com>
Date: Tue, 25 Aug 2026 22:10:48 +0700
Subject: [PATCH 1/2] feat(web): add feedback widget

Add a dismissible floating "Feedback" tab that opens a dialog posting to the public POST /api/feedback endpoint. Includes EN/ZH-CN translations and a plain-fetch client (no auth/tenant headers, matching the endpoint's public nature).
---
 apps/web/src/App.tsx                          |   2 +
 .../components/feedback/FeedbackWidget.tsx    | 181 ++++++++++++++++++
 apps/web/src/components/feedback/index.ts     |   1 +
 apps/web/src/lib/api/feedback.ts              |  49 +++++
 apps/web/src/locales/en.json                  |  14 ++
 apps/web/src/locales/zh-CN.json               |  14 ++
 6 files changed, 261 insertions(+)
 create mode 100644 apps/web/src/components/feedback/FeedbackWidget.tsx
 create mode 100644 apps/web/src/components/feedback/index.ts
 create mode 100644 apps/web/src/lib/api/feedback.ts

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 9e3df255..c75c0a18 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -10,6 +10,7 @@ import {
   ProtectedRoute,
   WorkspaceRouteGuard,
 } from "./components/auth";
+import { FeedbackWidget } from "./components/feedback";
 import { ProtectedAppLayout } from "./components/layout/ProtectedAppLayout";
 import { KeyboardShortcutsModal } from "./components/settings";
 import { PageSkeleton } from "./components/ui";
@@ -296,6 +297,7 @@ function App() {
       <AnalyticsRouteTracker />
       <AnalyticsConsent />
       <KeyboardShortcutsModal />
+      <FeedbackWidget />
       <Toaster position="top-right" richColors />
     </>
   );
diff --git a/apps/web/src/components/feedback/FeedbackWidget.tsx b/apps/web/src/components/feedback/FeedbackWidget.tsx
new file mode 100644
index 00000000..4f30aa35
--- /dev/null
+++ b/apps/web/src/components/feedback/FeedbackWidget.tsx
@@ -0,0 +1,181 @@
+import { X } from "lucide-react";
+import { useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { submitFeedback } from "@/lib/api/feedback";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+const FEEDBACK_DISMISSED_KEY = "wateaminbox-feedback-dismissed";
+const FEEDBACK_MIN_LENGTH = 10;
+const FEEDBACK_MAX_LENGTH = 5000;
+
+function readDismissed(): boolean {
+  try {
+    return localStorage.getItem(FEEDBACK_DISMISSED_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Floating feedback widget.
+ *
+ * Renders a vertical "Feedback" tab docked to the right edge of the viewport.
+ * Clicking the tab opens a dialog whose form posts to the public `/api/feedback`
+ * endpoint. The × button dismisses the tab permanently for this browser.
+ */
+export function FeedbackWidget() {
+  const { t } = useTranslation();
+  const [dismissed, setDismissed] = useState(readDismissed);
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  if (dismissed) {
+    return null;
+  }
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    try {
+      localStorage.setItem(FEEDBACK_DISMISSED_KEY, "1");
+    } catch {
+      // Ignore storage failures; the tab will simply return on next reload.
+    }
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (message.trim().length < FEEDBACK_MIN_LENGTH) {
+      toast.error(
+        t("feedback.minLength", "Feedback must be at least 10 characters."),
+      );
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await submitFeedback({
+        message: message.trim(),
+        email: email.trim() || undefined,
+      });
+      toast.success(t("feedback.success", "Thank you for your feedback!"));
+      setOpen(false);
+      setMessage("");
+      setEmail("");
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t(
+              "feedback.error",
+              "Failed to submit feedback. Please try again later.",
+            ),
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="fixed right-0 top-1/2 z-40 -translate-y-1/2">
+        <div className="flex flex-col items-center overflow-hidden rounded-l-lg bg-zinc-900 text-white shadow-lg dark:bg-black">
+          <button
+            type="button"
+            onClick={handleDismiss}
+            aria-label={t("feedback.dismiss", "Dismiss feedback tab")}
+            className="grid h-8 w-9 place-items-center text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/60"
+          >
+            <X className="h-4 w-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setOpen(true)}
+            className="rotate-180 px-2.5 py-5 text-xs font-semibold uppercase tracking-[0.2em] transition-colors [writing-mode:vertical-rl] hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/60"
+          >
+            {t("feedback.tab", "Feedback")}
+          </button>
+        </div>
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t("feedback.title", "Send feedback")}</DialogTitle>
+            <DialogDescription>
+              {t(
+                "feedback.description",
+                "Tell us what's working and what we can improve.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={handleSubmit} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="feedback-message">
+                {t("feedback.messageLabel", "Message")}
+              </Label>
+              <Textarea
+                id="feedback-message"
+                value={message}
+                onChange={(event) => setMessage(event.target.value)}
+                placeholder={t(
+                  "feedback.messagePlaceholder",
+                  "Share your thoughts…",
+                )}
+                maxLength={FEEDBACK_MAX_LENGTH}
+                rows={5}
+                autoFocus
+                required
+              />
+              <p className="text-right text-xs tabular-nums text-gray-500 dark:text-dark-text-tertiary">
+                {message.length}/{FEEDBACK_MAX_LENGTH}
+              </p>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="feedback-email">
+                {t("feedback.emailLabel", "Email (optional)")}
+              </Label>
+              <Input
+                id="feedback-email"
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder="you@example.com"
+                maxLength={254}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="submit"
+                disabled={
+                  submitting || message.trim().length < FEEDBACK_MIN_LENGTH
+                }
+              >
+                {submitting
+                  ? t("feedback.submitting", "Sending…")
+                  : t("feedback.submit", "Submit feedback")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/web/src/components/feedback/index.ts b/apps/web/src/components/feedback/index.ts
new file mode 100644
index 00000000..0138b9c5
--- /dev/null
+++ b/apps/web/src/components/feedback/index.ts
@@ -0,0 +1 @@
+export { FeedbackWidget } from "./FeedbackWidget";
diff --git a/apps/web/src/lib/api/feedback.ts b/apps/web/src/lib/api/feedback.ts
new file mode 100644
index 00000000..39ee0f07
--- /dev/null
+++ b/apps/web/src/lib/api/feedback.ts
@@ -0,0 +1,49 @@
+import { API_BASE_URL } from "./client.js";
+
+export interface SubmitFeedbackInput {
+  message: string;
+  email?: string;
+}
+
+export interface SubmitFeedbackResult {
+  success: boolean;
+  message: string;
+}
+
+/**
+ * Submit product feedback.
+ *
+ * The `/feedback` endpoint is public (no auth and no tenant context), so this
+ * uses a plain fetch rather than the authenticated client. The message must be
+ * 10–5000 characters and the email is optional; both bounds are also enforced
+ * server-side.
+ */
+export async function submitFeedback(
+  input: SubmitFeedbackInput,
+): Promise<SubmitFeedbackResult> {
+  const response = await fetch(`${API_BASE_URL}/feedback`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    let message = "Failed to submit feedback. Please try again later.";
+    try {
+      const data: unknown = await response.json();
+      if (
+        data &&
+        typeof data === "object" &&
+        "error" in data &&
+        typeof (data as { error: unknown }).error === "string"
+      ) {
+        message = (data as { error: string }).error;
+      }
+    } catch {
+      // Keep the default message when the error body is not JSON.
+    }
+    throw new Error(message);
+  }
+
+  return (await response.json()) as SubmitFeedbackResult;
+}
diff --git a/apps/web/src/locales/en.json b/apps/web/src/locales/en.json
index cbc7feaa..7bf4b484 100644
--- a/apps/web/src/locales/en.json
+++ b/apps/web/src/locales/en.json
@@ -1713,5 +1713,19 @@
     "lastSeenYesterday": "last seen yesterday at {{time}}",
     "lastSeenWeekday": "last seen {{day}} at {{time}}",
     "lastSeenDate": "last seen {{date}}"
+  },
+  "feedback": {
+    "tab": "Feedback",
+    "dismiss": "Dismiss feedback tab",
+    "title": "Send feedback",
+    "description": "Tell us what's working and what we can improve.",
+    "messageLabel": "Message",
+    "messagePlaceholder": "Share your thoughts…",
+    "emailLabel": "Email (optional)",
+    "submit": "Submit feedback",
+    "submitting": "Sending…",
+    "success": "Thank you for your feedback!",
+    "minLength": "Feedback must be at least 10 characters.",
+    "error": "Failed to submit feedback. Please try again later."
   }
 }
diff --git a/apps/web/src/locales/zh-CN.json b/apps/web/src/locales/zh-CN.json
index 62179ae1..b069a1f1 100644
--- a/apps/web/src/locales/zh-CN.json
+++ b/apps/web/src/locales/zh-CN.json
@@ -1696,5 +1696,19 @@
     "lastSeenYesterday": "昨天 {{time}} 在线",
     "lastSeenWeekday": "{{day}} {{time}} 在线",
     "lastSeenDate": "{{date}} 在线"
+  },
+  "feedback": {
+    "tab": "反馈",
+    "dismiss": "关闭反馈标签",
+    "title": "发送反馈",
+    "description": "告诉我们哪些功能好用，哪些需要改进。",
+    "messageLabel": "内容",
+    "messagePlaceholder": "分享您的想法…",
+    "emailLabel": "邮箱（可选）",
+    "submit": "提交反馈",
+    "submitting": "发送中…",
+    "success": "感谢您的反馈！",
+    "minLength": "反馈内容至少需要 10 个字符。",
+    "error": "提交反馈失败，请稍后重试。"
   }
 }

From a6c6003e0e8995d7d94861bbe986bff05dbf6417 Mon Sep 17 00:00:00 2001
From: setkyar <setkyar16@gmail.com>
Date: Fri, 28 Aug 2026 15:50:38 +0700
Subject: [PATCH 2/2] feat(api): configure feedback recipient

---
 .env.example                    |  2 ++
 .env.production.example         |  2 ++
 apps/api/src/lib/env.test.ts    | 46 ++++++++++++++++++---------------
 apps/api/src/lib/env.ts         | 10 +++++++
 apps/api/src/routes/feedback.ts |  8 +++---
 compose.production.yml          |  1 +
 docs/apis/feedback.md           |  4 +--
 docs/deployment.md              |  3 ++-
 scripts/generate-api-docs.py    |  4 +--
 9 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/.env.example b/.env.example
index 2eb48e98..b19a8e33 100644
--- a/.env.example
+++ b/.env.example
@@ -63,6 +63,8 @@ RESEND_API_KEY=re_xxxxxxxxxxxxx
 CLOUDFLARE_ACCOUNT_ID=
 CLOUDFLARE_EMAIL_API_TOKEN=
 EMAIL_FROM="WATeamInbox <noreply@example.com>"
+# Product feedback submitted through POST /api/feedback is delivered here.
+FEEDBACK_TO_EMAIL=contact@wateaminbox.com
 
 # App
 APP_URL=http://localhost:4444
diff --git a/.env.production.example b/.env.production.example
index b78a748b..6ed57a3d 100644
--- a/.env.production.example
+++ b/.env.production.example
@@ -37,6 +37,8 @@ S3_SIGNED_URL_TTL_SECONDS=300
 # Mail provider: resend or cloudflare. Set the matching key file below; the
 # other provider's variables stay unset and need no placeholder secret.
 MAIL_DRIVER=resend
+# Product feedback submitted through POST /api/feedback is delivered here.
+FEEDBACK_TO_EMAIL=contact@wateaminbox.com
 # Cloudflare Email Service only (MAIL_DRIVER=cloudflare): the 32-character
 # account ID that owns the onboarded sender domain. Not a secret; the token is.
 CLOUDFLARE_ACCOUNT_ID=
diff --git a/apps/api/src/lib/env.test.ts b/apps/api/src/lib/env.test.ts
index efdb8492..81c453cd 100644
--- a/apps/api/src/lib/env.test.ts
+++ b/apps/api/src/lib/env.test.ts
@@ -16,6 +16,7 @@ function productionEnv(overrides: Partial<Env> = {}): Env {
     MAIL_DRIVER: "resend",
     RESEND_API_KEY: "re_live_acme_123456789",
     EMAIL_FROM: "WATeamInbox <noreply@acme.test>",
+    FEEDBACK_TO_EMAIL: "feedback@acme.test",
     APP_URL: "https://inbox.acme.test",
     CORS_ORIGINS: "https://inbox.acme.test,https://admin.acme.test",
     CENTRIFUGO_API_URL: "https://realtime.acme.test/api",
@@ -76,6 +77,7 @@ describe("production environment validation", () => {
     "MEILISEARCH_API_KEY",
     "RESEND_API_KEY",
     "EMAIL_FROM",
+    "FEEDBACK_TO_EMAIL",
     "JWT_SECRET",
     "CENTRIFUGO_API_KEY",
     "CORS_ORIGINS",
@@ -148,6 +150,10 @@ describe("production environment validation", () => {
     expectInvalid({ MAIL_DRIVER: "smtp" }, /MAIL_DRIVER must be one of/);
     expectInvalid({ RESEND_API_KEY: "re_xxxxxxxxxxxxx" }, /placeholder value/);
     expectInvalid({ EMAIL_FROM: "not-an-email" }, /valid email address/);
+    expectInvalid(
+      { FEEDBACK_TO_EMAIL: "not-an-email" },
+      /FEEDBACK_TO_EMAIL must contain a valid email address/,
+    );
     expectInvalid(
       { EMAIL_FROM: "WATeamInbox <noreply@example.com>" },
       /reserved example domain/,
@@ -183,15 +189,15 @@ describe("production environment validation", () => {
       ).not.toThrow();
     });
 
-    test.each([
-      "CLOUDFLARE_ACCOUNT_ID",
-      "CLOUDFLARE_EMAIL_API_TOKEN",
-    ] as const)("requires Cloudflare setting %s", (key) => {
-      expectInvalid(
-        { ...cloudflare, [key]: "" },
-        /Missing required production environment variables/,
-      );
-    });
+    test.each(["CLOUDFLARE_ACCOUNT_ID", "CLOUDFLARE_EMAIL_API_TOKEN"] as const)(
+      "requires Cloudflare setting %s",
+      (key) => {
+        expectInvalid(
+          { ...cloudflare, [key]: "" },
+          /Missing required production environment variables/,
+        );
+      },
+    );
 
     test("rejects an account ID that is not a Cloudflare account ID", () => {
       for (const accountId of [
@@ -396,18 +402,16 @@ describe("signing secrets are validated in every environment", () => {
     expect(() => validateSigningSecrets()).not.toThrow();
   });
 
-  test.each([
-    "development",
-    "test",
-    "staging",
-    "",
-  ])("a missing JWT_SECRET fails closed when NODE_ENV is %p", (nodeEnv) => {
-    expect(() =>
-      validateSigningSecrets(
-        nonProductionEnv({ NODE_ENV: nodeEnv, JWT_SECRET: "" }),
-      ),
-    ).toThrow(/JWT_SECRET is required and must not be blank/);
-  });
+  test.each(["development", "test", "staging", ""])(
+    "a missing JWT_SECRET fails closed when NODE_ENV is %p",
+    (nodeEnv) => {
+      expect(() =>
+        validateSigningSecrets(
+          nonProductionEnv({ NODE_ENV: nodeEnv, JWT_SECRET: "" }),
+        ),
+      ).toThrow(/JWT_SECRET is required and must not be blank/);
+    },
+  );
 
   test("a whitespace-only JWT_SECRET is treated as missing", () => {
     expect(() =>
diff --git a/apps/api/src/lib/env.ts b/apps/api/src/lib/env.ts
index 90e7b1ea..8c4bf54f 100644
--- a/apps/api/src/lib/env.ts
+++ b/apps/api/src/lib/env.ts
@@ -89,6 +89,7 @@ export const env = {
   CLOUDFLARE_ACCOUNT_ID: getEnv("CLOUDFLARE_ACCOUNT_ID", ""),
   CLOUDFLARE_EMAIL_API_TOKEN: getEnv("CLOUDFLARE_EMAIL_API_TOKEN", ""),
   EMAIL_FROM: getEnv("EMAIL_FROM", "noreply@example.com"),
+  FEEDBACK_TO_EMAIL: getEnv("FEEDBACK_TO_EMAIL", "contact@wateaminbox.com"),
 
   // App
   APP_URL: getEnv("APP_URL", "http://localhost:4444"),
@@ -456,6 +457,7 @@ export function validateProductionEnv(config: Env = env): void {
     MEILISEARCH_API_KEY: config.MEILISEARCH_API_KEY,
     ...requiredMailCredentials(config),
     EMAIL_FROM: config.EMAIL_FROM,
+    FEEDBACK_TO_EMAIL: config.FEEDBACK_TO_EMAIL,
     APP_URL: config.APP_URL,
     CORS_ORIGINS: config.CORS_ORIGINS,
   };
@@ -593,6 +595,14 @@ export function validateProductionEnv(config: Env = env): void {
     );
   }
 
+  if (
+    !/^[^<>\s@]+@[^<>\s@]+\.[^<>\s@]+$/.test(config.FEEDBACK_TO_EMAIL.trim())
+  ) {
+    throw new Error(
+      "FEEDBACK_TO_EMAIL must contain a valid email address in production",
+    );
+  }
+
   if (config.JWT_SECRET.length < 32) {
     throw new Error(
       "JWT_SECRET must contain at least 32 characters in production",
diff --git a/apps/api/src/routes/feedback.ts b/apps/api/src/routes/feedback.ts
index 4a95964d..20c657ef 100644
--- a/apps/api/src/routes/feedback.ts
+++ b/apps/api/src/routes/feedback.ts
@@ -2,12 +2,14 @@
  * Feedback Routes
  *
  * Public endpoint for users to submit product feedback.
- * Sends feedback to contact@wateaminbox.com via email.
+ * Sends feedback to the configured feedback recipient via email.
  */
-import { Hono } from "hono";
+
 import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
 import { z } from "zod";
 import { sendEmail } from "../lib/email.js";
+import { env } from "../lib/env.js";
 import { serverError } from "../lib/errors.js";
 import { escapeHtml } from "../lib/security.js";
 
@@ -34,7 +36,7 @@ feedbackRoutes.post("/", zValidator("json", feedbackSchema), async (c) => {
   const safeMessage = escapeHtml(body.message);
 
   const result = await sendEmail({
-    to: "contact@wateaminbox.com",
+    to: env.FEEDBACK_TO_EMAIL,
     subject: `WATeamInbox Feedback${body.email ? ` from ${body.email}` : ""}`,
     html: `
       <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
diff --git a/compose.production.yml b/compose.production.yml
index 3d88b762..fa001fa8 100644
--- a/compose.production.yml
+++ b/compose.production.yml
@@ -175,6 +175,7 @@ services:
       CLOUDFLARE_ACCOUNT_ID: ${CLOUDFLARE_ACCOUNT_ID:-}
       CLOUDFLARE_EMAIL_API_TOKEN_FILE: ${CLOUDFLARE_EMAIL_API_TOKEN_FILE:+/run/secrets/mail_api_key}
       EMAIL_FROM: ${EMAIL_FROM:?set EMAIL_FROM}
+      FEEDBACK_TO_EMAIL: ${FEEDBACK_TO_EMAIL:?set FEEDBACK_TO_EMAIL}
       MEILISEARCH_URL: http://meilisearch:7700
       MEILISEARCH_API_KEY_FILE: /run/secrets/meilisearch_master_key
       CENTRIFUGO_API_URL: http://centrifugo:8000/api
diff --git a/docs/apis/feedback.md b/docs/apis/feedback.md
index 30e710b6..9df60ce9 100644
--- a/docs/apis/feedback.md
+++ b/docs/apis/feedback.md
@@ -2,7 +2,7 @@
 
 > Base path: `/api/feedback` · 1 endpoints
 
-Public feedback submission. Unauthenticated, body-bounded, and emailed to the product address.
+Public feedback submission. Unauthenticated, body-bounded, and emailed to the address configured by `FEEDBACK_TO_EMAIL`.
 
 ## Endpoints
 
@@ -23,6 +23,6 @@ sequenceDiagram
     participant M as Mail driver
     U->>A: POST /api/feedback {message, email?}
     A->>A: zValidator (bounded) + escape HTML
-    A->>M: sendEmail(contact@wateaminbox.com)
+    A->>M: sendEmail(FEEDBACK_TO_EMAIL)
     A-->>U: 200 {message}
 ```
diff --git a/docs/deployment.md b/docs/deployment.md
index 391b05df..8faeebc2 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -183,7 +183,8 @@ another provider's name. Configuring both key files is refused at startup,
 because a single mount cannot hold both providers' keys and the container would
 otherwise present one provider's key to the other. `EMAIL_FROM` keeps its
 `Name <address>` form for both providers - the Cloudflare driver splits it into
-the address/name object that the REST API expects.
+the address/name object that the REST API expects. `FEEDBACK_TO_EMAIL` selects
+the recipient for messages submitted through the public feedback form.
 
 Switching providers is an `.env.production` change: set the new `MAIL_DRIVER`,
 install its key file, point the matching `*_FILE` variable at it, remove the old
diff --git a/scripts/generate-api-docs.py b/scripts/generate-api-docs.py
index 10b06a2b..6f992b01 100644
--- a/scripts/generate-api-docs.py
+++ b/scripts/generate-api-docs.py
@@ -1182,7 +1182,7 @@ def rows(self):
         "prefixes": ["/feedback"],
         "overview": (
             "Public feedback submission. Unauthenticated, body-bounded, and emailed "
-            "to the product address."
+            "to the address configured by `FEEDBACK_TO_EMAIL`."
         ),
         "flows": [
             ("Submit feedback", """sequenceDiagram
@@ -1191,7 +1191,7 @@ def rows(self):
     participant M as Mail driver
     U->>A: POST /api/feedback {message, email?}
     A->>A: zValidator (bounded) + escape HTML
-    A->>M: sendEmail(contact@wateaminbox.com)
+    A->>M: sendEmail(FEEDBACK_TO_EMAIL)
     A-->>U: 200 {message}
 """),
         ],