Beginner UX: guided endpoint connection header

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/batch/page.tsx

@@ -246,7 +246,42 @@ export default function BatchPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Concept card (F3) */}
+      {/* Stable outcome-oriented header (replaces the collapsible card as primary orientation) */}
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-2xl font-semibold text-[var(--color-text-main)]">{t("batchConceptTitle")}</h1>
+          <p className="text-sm text-[var(--color-text-muted)]">{t("batchHeaderSubtitle")}</p>
+        </div>
+
+        {/* Three-step strip */}
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="flex items-center gap-1.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] px-3 py-2">
+            <span className="font-medium text-sm text-[var(--color-text-main)]">{t("batchStep1")}</span>
+            <span className="text-xs text-[var(--color-text-muted)] hidden sm:inline">{t("batchStep1Desc")}</span>
+          </div>
+          <span className="material-symbols-outlined text-[var(--color-text-muted)]">chevron_right</span>
+          <div className="flex items-center gap-1.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] px-3 py-2">
+            <span className="font-medium text-sm text-[var(--color-text-main)]">{t("batchStep2")}</span>
+            <span className="text-xs text-[var(--color-text-muted)] hidden sm:inline">{t("batchStep2Desc")}</span>
+          </div>
+          <span className="material-symbols-outlined text-[var(--color-text-muted)]">chevron_right</span>
+          <div className="flex items-center gap-1.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] px-3 py-2">
+            <span className="font-medium text-sm text-[var(--color-text-main)]">{t("batchStep3")}</span>
+            <span className="text-xs text-[var(--color-text-muted)] hidden sm:inline">{t("batchStep3Desc")}</span>
+          </div>
+        </div>
+
+        {/* Primary CTA */}
+        <button
+          onClick={() => setShowWizard(true)}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-[var(--color-accent)] text-white hover:opacity-90 transition-all duration-200 w-fit"
+        >
+          <span className="material-symbols-outlined text-[16px]">add</span>
+          {t("batchListNewButton")}
+        </button>
+      </div>
+
+      {/* Deeper explanation (optional, collapsible) */}
       <BatchConceptCard />
 
       {/* "Batch created" success banner (A-6) — auto-dismiss 5s */}

src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx

@@ -2360,7 +2360,19 @@ function ProviderModelsModal({
         <div className="flex flex-col gap-1">
           {groupModels.map((m) => {
             const copyKey = `modal-${m.id}`;
-            return (
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2 mb-2">
+        <h1 className="text-2xl font-bold">{t("endpoint.title")}</h1>
+        <p className="text-text-muted">{t("endpoint.subtitle")}</p>
+        <div className="flex items-center gap-3 mt-2">
+          <code className="text-sm bg-card-subtle px-3 py-1 rounded-md text-text-main font-mono">{useDisplayBaseUrl()}/v1</code>
+          <a href="#test" className="text-sm text-action font-medium hover:underline">{t("endpoint.testEndpoint")}</a>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 text-xs text-text-muted">
+        <span>{t("endpoint.advancedProtocols")}</span>
+      </div>
               <div
                 key={m.id}
                 className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface/60 group"

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": "إجمالي الطلبات",