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!

Author: ignamiranda

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>
   );

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",

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.",

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");
+});