Beginner UX: interpret health status with plain-language verdict

package.json

@@ -358,8 +358,10 @@
     "@stryker-mutator/core": "^10.0.0",
     "@stryker-mutator/tap-runner": "^10.0.0",
     "@tailwindcss/postcss": "^4.3.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
     "@types/better-sqlite3": "^9.6.0",
     "@types/bun": "latest",
     "@types/node": "^26.2.0",

src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx

@@ -959,6 +959,44 @@ export default function ApiManagerPageClient() {
         </div>
       )}
 
+      <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex flex-col gap-3">
+          <div>
+            <h1 className="text-3xl font-bold text-text-main">{t("keyManagement")}</h1>
+            <p className="mt-1 text-text-muted">{t("keyManagementDesc")}</p>
+          </div>
+          <div
+            className="flex flex-wrap items-center gap-2 text-sm text-text-secondary"
+            aria-label={t("requestFlowAria")}
+          >
+            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+              {t("requestFlowYourApp")}
+            </span>
+            <span
+              className="material-symbols-outlined text-base text-text-muted"
+              aria-hidden="true"
+            >
+              arrow_forward
+            </span>
+            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+              {t("requestFlowApiKey")}
+            </span>
+            <span
+              className="material-symbols-outlined text-base text-text-muted"
+              aria-hidden="true"
+            >
+              arrow_forward
+            </span>
+            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+              {t("requestFlowOmniRoute")}
+            </span>
+          </div>
+        </div>
+        <Button onClick={() => setShowAddModal(true)} icon="add" className="shrink-0">
+          {t("createKey")}
+        </Button>
+      </div>
+
       {/* Filter Bar — shown when there are keys */}
       {keys.length > 0 && (
         <ApiKeyFilterBar

src/app/(dashboard)/dashboard/health/page.tsx

@@ -13,6 +13,7 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
+
 import { Card } from "@/shared/components";
 import { AI_PROVIDERS } from "@/shared/constants/providers";
 import { getProviderDisplayName } from "@/lib/display/names";
@@ -74,6 +75,7 @@ export default function HealthPage() {
   const [repairingDb, setRepairingDb] = useState(false);
   const [unblocking, setUnblocking] = useState(false);
   const [unblockingKey, setUnblockingKey] = useState<string | null>(null);
+  const [showAdvanced, setShowAdvanced] = useState(false);
 
   const fetchHealth = useCallback(async () => {
     try {
@@ -266,6 +268,21 @@ export default function HealthPage() {
       </div>
 
       {/* Status Banner */}
+      {/* Verdict Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">
+          {
+            data.status === "healthy"
+              ? t("healthVerdictReady")
+              : data.status === "cooling"
+                ? t("healthVerdictCoolingDown")
+                : t("healthVerdictActionRequired")
+          }
+        </h1>
+        <p className="text-text-muted text-lg">{t("healthSubtitle")}</p>
+      </div>
+
+      {/* Status Details */}
       <div
         role="status"
         aria-live="polite"
@@ -283,15 +300,29 @@ export default function HealthPage() {
           {data.status === "healthy" ? "check_circle" : "error"}
         </span>
         <span className={data.status === "healthy" ? "text-green-400" : "text-red-400"}>
-          {data.status === "healthy" ? t("allOperational") : t("issuesDetected")}
+          {data.status === "healthy"
+            ? t("allOperational")
+            : t("issuesDetected")}
         </span>
       </div>
 
-      <TelemetryCard />
-
-      <ProviderHealthAutopilotCard />
-
-      <ProviderHealthMatrixCard />
+      {/* Advanced Diagnostics Section */}
+      <div className="mt-8">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold">{t("advancedDiagnosticsTitle")}</h2>
+          <button
+            onClick={() => setShowAdvanced(!showAdvanced)}
+            className="text-primary hover:underline"
+          >
+            {showAdvanced ? t("hide") : t("show")}
+          </button>
+        </div>
+        <div className={showAdvanced ? "block" : "hidden"}>
+          <TelemetryCard />
+          <ProviderHealthAutopilotCard />
+          <ProviderHealthMatrixCard />
+        </div>
+      </div>
 
       <Card className="p-5">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">

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/ar.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "الوصول الكامل",
     "keyManagement": "إدارة مفاتيح API",
     "keyManagementDesc": "قم بإنشاء وإدارة مفاتيح API لمصادقة الطلبات إلى نقطة النهاية الخاصة بك",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "مجموع المفاتيح",
     "restricted": "مقيد",
     "totalRequests": "إجمالي الطلبات",

src/i18n/messages/az.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Full Access",
     "keyManagement": "API Key Management",
     "keyManagementDesc": "Create and manage API keys for authenticating requests to your endpoint",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Total Keys",
     "restricted": "Restricted",
     "totalRequests": "Total Requests",

src/i18n/messages/bg.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Пълен достъп",
     "keyManagement": "Управление на API ключове",
     "keyManagementDesc": "Създавайте и управлявайте API ключове за удостоверяване на заявки към вашата крайна точка",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Общо ключове",
     "restricted": "Ограничен",
     "totalRequests": "Общо заявки",

src/i18n/messages/bn.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Full Access",
     "keyManagement": "API Key Management",
     "keyManagementDesc": "Create and manage API keys for authenticating requests to your endpoint",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Total Keys",
     "restricted": "Restricted",
     "totalRequests": "Total Requests",

src/i18n/messages/cs.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Plný přístup",
     "keyManagement": "Správa API Klíčů",
     "keyManagementDesc": "Vytvářejte a spravujte API klíče pro ověřování požadavků na váš koncový bod",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Celkem Klíčů",
     "restricted": "Omezený",
     "totalRequests": "Celkově žádostí",

src/i18n/messages/da.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Fuld adgang",
     "keyManagement": "API nøglestyring",
     "keyManagementDesc": "Opret og administrer API-nøgler til godkendelse af anmodninger til dit slutpunkt",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Totalnøgler",
     "restricted": "Begrænset",
     "totalRequests": "Samlet antal anmodninger",

src/i18n/messages/de.json

@@ -2218,6 +2218,10 @@
     "fullAccess": "Voller Zugriff",
     "keyManagement": "API-Schlüsselverwaltung",
     "keyManagementDesc": "Erstellen und verwalten Sie API-Schlüssel zur Authentifizierung von Anfragen an Ihren Endpunkt",
+    "requestFlowAria": "Your app sends requests through an API key to OmniRoute",
+    "requestFlowYourApp": "Your app",
+    "requestFlowApiKey": "API key",
+    "requestFlowOmniRoute": "OmniRoute",
     "totalKeys": "Gesamtschlüssel",
     "restricted": "Eingeschränkt",
     "totalRequests": "Gesamtzahl der Anfragen",