From dfe73f460956e25fbfd535b27f88e2259ceed1bc Mon Sep 17 00:00:00 2001
From: ignamiranda <34501347+ignamiranda@users.noreply.github.com>
Date: Sun, 23 Aug 2026 05:41:55 -0400
Subject: [PATCH] Beginner UX: lead resilience page with plain-language
 reassurance (#11215)

Validated on the combined batch board (resilience-connections static test green) + this branch: i18n suites 16/16 with Vietnamese translations of the reassurance/legend strings added here. Plain-language reassurance + three-state legend lead the page; the technical table stays as advanced detail. Thank you @ignamiranda!
---
 .../dashboard/resilience/connections/page.tsx | 34 ++++++++++++++++++-
 src/i18n/messages/en.json                     |  7 ++++
 src/i18n/messages/vi.json                     |  7 ++++
 ...resilience-connections-page-static.test.ts | 20 +++++++++++
 4 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/dashboard/resilience/connections/page.tsx b/src/app/(dashboard)/dashboard/resilience/connections/page.tsx
index d0351813a1..f138d3f5d2 100644
--- a/src/app/(dashboard)/dashboard/resilience/connections/page.tsx
+++ b/src/app/(dashboard)/dashboard/resilience/connections/page.tsx
@@ -7,7 +7,39 @@ export default async function ResilienceConnectionsPage() {
   const t = await getTranslations("resilienceConnections");
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
-      <h1>{t("title")}</h1>
+      <div>
+        <h1>{t("title")}</h1>
+        <p
+          style={{
+            margin: "8px 0 0",
+            maxWidth: "640px",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <strong>{t("reassuranceTitle")}</strong> {t("reassuranceDetail")}
+        </p>
+        <ul
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "16px",
+            listStyle: "none",
+            margin: "12px 0 0",
+            padding: 0,
+            fontSize: "13px",
+          }}
+        >
+          <li>
+            <strong>{t("table.healthy")}</strong> — {t("plainStates.healthy")}
+          </li>
+          <li>
+            <strong>{t("table.coolingDown")}</strong> — {t("plainStates.coolingDown")}
+          </li>
+          <li>
+            <strong>{t("table.circuitOpen")}</strong> — {t("plainStates.lockedOut")}
+          </li>
+        </ul>
+      </div>
       <ResilienceConnectionsClient />
     </div>
   );
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index b850f3924d..914d5bcc6b 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -13342,6 +13342,13 @@
   },
   "resilienceConnections": {
     "title": "Connection Resilience",
+    "reassuranceTitle": "Your connections recover automatically",
+    "reassuranceDetail": "Usually no action is needed. OmniRoute temporarily rests a connection after failures, then safely tries it again.",
+    "plainStates": {
+      "healthy": "Requests can be sent",
+      "coolingDown": "Trying again soon",
+      "lockedOut": "Needs your attention"
+    },
     "table": {
       "status": "Status",
       "provider": "Provider",
diff --git a/src/i18n/messages/vi.json b/src/i18n/messages/vi.json
index b9a01f57fc..fa84fa5d7a 100644
--- a/src/i18n/messages/vi.json
+++ b/src/i18n/messages/vi.json
@@ -13436,6 +13436,13 @@
         "modelLockouts": "Khóa Mô Hình",
         "count": "Số Lượng Kết Nối"
       }
+    },
+    "reassuranceTitle": "Kết nối của bạn tự khôi phục",
+    "reassuranceDetail": "Thường không cần hành động. OmniRoute tạm cho kết nối nghỉ sau lỗi, rồi thử lại an toàn.",
+    "plainStates": {
+      "healthy": "Có thể gửi yêu cầu",
+      "coolingDown": "Sắp thử lại",
+      "lockedOut": "Cần bạn xử lý"
     }
   },
   "featureFlagCapabilityFilterEnabledDescription": "Từ chối yêu cầu trước khi gửi đi khi mô hình đích thiếu các khả năng bắt buộc (thị giác, công cụ, đầu ra có cấu trúc, cửa sổ ngữ cảnh). Bảo vệ các yêu cầu trực tiếp đến một nhà cung cấp khi chúng bỏ qua bộ lọc tương thích của combo.",
diff --git a/tests/unit/resilience-connections-page-static.test.ts b/tests/unit/resilience-connections-page-static.test.ts
index 55359d29a9..d2ee8be295 100644
--- a/tests/unit/resilience-connections-page-static.test.ts
+++ b/tests/unit/resilience-connections-page-static.test.ts
@@ -139,3 +139,23 @@ test("no hardcoded English labels in component files (all via t(...))", () => {
     assert.doesNotMatch(src, />\s*No connections\s*</, `${f}: hardcoded empty title`);
   }
 });
+
+test("page leads with plain-language reassurance before mechanics", () => {
+  const src = read(componentFiles[0]);
+  assert.match(src, /reassuranceTitle/, "reassurance heading missing from page.tsx");
+  assert.match(src, /reassuranceDetail/, "reassurance detail missing from page.tsx");
+  // Plain-language state legend renders before the client component
+  const legendPos = src.indexOf("plainStates");
+  const clientPos = src.indexOf("<ResilienceConnectionsClient");
+  assert.ok(legendPos > -1 && legendPos < clientPos, "state legend must render before the table");
+});
+
+test("en.json carries plain-language state copy", () => {
+  const messages = JSON.parse(read("src/i18n/messages/en.json"));
+  const block = messages.resilienceConnections;
+  assert.equal(block.reassuranceTitle, "Your connections recover automatically");
+  assert.match(block.reassuranceDetail, /no action is needed/i);
+  assert.equal(block.plainStates.healthy, "Requests can be sent");
+  assert.equal(block.plainStates.coolingDown, "Trying again soon");
+  assert.equal(block.plainStates.lockedOut, "Needs your attention");
+});