diff --git a/src/components/admin/api-token-overview-section.tsx b/src/components/admin/api-token-overview-section.tsx
index 0c3946931..1ab015c19 100644
--- a/src/components/admin/api-token-overview-section.tsx
+++ b/src/components/admin/api-token-overview-section.tsx
@@ -55,6 +55,46 @@ function TruncatedCell({
   );
 }
 
+/**
+ * v1.4.22 W5 reconcile (S-03) — the revoked / isExpired / active
+ * 3-way ternary is identical between the desktop table and the
+ * mobile card list; the only difference is `text-xs` vs `text-[10px]`.
+ * Centralise so the two surfaces stay in lock-step.
+ */
+function TokenStatusBadge({
+  token,
+  size,
+}: {
+  token: ApiTokenInfo;
+  size: "sm" | "xs";
+}) {
+  const { t } = useTranslations();
+  const expired =
+    token.expiresAt != null && new Date(token.expiresAt) < new Date();
+  const sizeClass = size === "xs" ? "text-[10px]" : "text-xs";
+  if (token.revoked) {
+    return (
+      <Badge variant="destructive" className={`shrink-0 ${sizeClass}`}>
+        {t("settings.tokenRevoked")}
+      </Badge>
+    );
+  }
+  if (expired) {
+    return (
+      <Badge variant="destructive" className={`shrink-0 ${sizeClass}`}>
+        {t("settings.tokenExpired")}
+      </Badge>
+    );
+  }
+  return (
+    <Badge
+      className={`bg-dracula-green/15 text-dracula-green shrink-0 ${sizeClass}`}
+    >
+      {t("common.active")}
+    </Badge>
+  );
+}
+
 /**
  * F-18 (v1.4.19): the auto-login flow names tokens
  * "web auto-login 2026-05-05T19:46:20.603Z" / "iOS auto-login …" by
@@ -181,8 +221,6 @@ export function ApiTokenOverviewSection() {
                 </thead>
                 <tbody className="divide-border divide-y">
                   {tokens.map((token, i) => {
-                    const isExpired =
-                      token.expiresAt && new Date(token.expiresAt) < new Date();
                     return (
                       <tr
                         key={token.id}
@@ -213,19 +251,7 @@ export function ApiTokenOverviewSection() {
                           </div>
                         </td>
                         <td className="px-3 py-2 text-right">
-                          {token.revoked ? (
-                            <Badge variant="destructive" className="text-xs">
-                              {t("settings.tokenRevoked")}
-                            </Badge>
-                          ) : isExpired ? (
-                            <Badge variant="destructive" className="text-xs">
-                              {t("settings.tokenExpired")}
-                            </Badge>
-                          ) : (
-                            <Badge className="bg-dracula-green/15 text-dracula-green text-xs">
-                              {t("common.active")}
-                            </Badge>
-                          )}
+                          <TokenStatusBadge token={token} size="sm" />
                         </td>
                         {/* v1.4.22 C2 (5th attempt) — drop
                             `whitespace-nowrap` on the date cells. The
@@ -264,8 +290,6 @@ export function ApiTokenOverviewSection() {
               data-testid="admin-tokens-mobile-list"
             >
               {tokens.map((token) => {
-                const isExpired =
-                  token.expiresAt && new Date(token.expiresAt) < new Date();
                 return (
                   <li
                     key={token.id}
@@ -278,25 +302,7 @@ export function ApiTokenOverviewSection() {
                             value={formatTokenName(token.name)}
                             className="min-w-0 flex-1 font-medium"
                           />
-                          {token.revoked ? (
-                            <Badge
-                              variant="destructive"
-                              className="shrink-0 text-[10px]"
-                            >
-                              {t("settings.tokenRevoked")}
-                            </Badge>
-                          ) : isExpired ? (
-                            <Badge
-                              variant="destructive"
-                              className="shrink-0 text-[10px]"
-                            >
-                              {t("settings.tokenExpired")}
-                            </Badge>
-                          ) : (
-                            <Badge className="bg-dracula-green/15 text-dracula-green shrink-0 text-[10px]">
-                              {t("common.active")}
-                            </Badge>
-                          )}
+                          <TokenStatusBadge token={token} size="xs" />
                         </div>
                         <TruncatedCell
                           value={token.user.username}
diff --git a/src/components/insights/coach-panel/coach-input.tsx b/src/components/insights/coach-panel/coach-input.tsx
index e7b5d21c9..58791024f 100644
--- a/src/components/insights/coach-panel/coach-input.tsx
+++ b/src/components/insights/coach-panel/coach-input.tsx
@@ -56,32 +56,26 @@ export function CoachInput({
 }: CoachInputProps) {
   const { t } = useTranslations();
 
+  const canSubmit = !disabled && value.trim().length > 0;
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key !== "Enter") return;
-      // Shift+Enter inserts a newline.
-      if (event.shiftKey) return;
-      // Plain Enter and ⌘/Ctrl+Enter both submit.
+      // Shift+Enter inserts a newline; plain Enter and ⌘/Ctrl+Enter submit.
+      if (event.key !== "Enter" || event.shiftKey) return;
       event.preventDefault();
-      if (!disabled && value.trim().length > 0) {
-        onSubmit();
-      }
+      if (canSubmit) onSubmit();
     },
-    [disabled, onSubmit, value],
+    [canSubmit, onSubmit],
   );
 
   const handleFormSubmit = useCallback(
     (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
-      if (!disabled && value.trim().length > 0) {
-        onSubmit();
-      }
+      if (canSubmit) onSubmit();
     },
-    [disabled, onSubmit, value],
+    [canSubmit, onSubmit],
   );
 
-  const canSubmit = !disabled && value.trim().length > 0;
-
   return (
     <form
       data-slot="coach-input"
diff --git a/src/components/insights/correlation-row.tsx b/src/components/insights/correlation-row.tsx
index f7714f823..586a41723 100644
--- a/src/components/insights/correlation-row.tsx
+++ b/src/components/insights/correlation-row.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { useTranslations } from "@/lib/i18n/context";
 import type { CorrelationResult } from "@/lib/insights/correlations";
 import { CorrelationCard } from "./correlation-card";
@@ -57,11 +58,10 @@ export function CorrelationRow({ results }: CorrelationRowProps) {
         </p>
       </div>
       <div
-        className={
-          okResults.length === 1
-            ? "grid grid-cols-1 gap-4"
-            : "grid grid-cols-1 gap-4 md:grid-cols-2"
-        }
+        className={cn(
+          "grid grid-cols-1 gap-4",
+          okResults.length > 1 && "md:grid-cols-2",
+        )}
       >
         {okResults.map((result) => (
           <CorrelationCard key={result.kind} result={result} />
diff --git a/src/components/insights/hero-strip.tsx b/src/components/insights/hero-strip.tsx
index 1b3874974..d20d8539c 100644
--- a/src/components/insights/hero-strip.tsx
+++ b/src/components/insights/hero-strip.tsx
@@ -238,33 +238,41 @@ export function HeroStrip({
              * current ISO week. Older parents that haven't adopted the
              * weeklyReportHref prop still get the disabled affordance.
              */}
-            {weeklyReportHref ? (
-              <Button
-                asChild
-                variant="default"
-                size="sm"
-                data-slot="insights-hero-strip-action-weekly-report"
-                className="gap-1.5"
-              >
-                <Link href={weeklyReportHref}>
+            {(() => {
+              // v1.4.22 W5 reconcile (S-02) — collapse the
+              // enabled/disabled twin Buttons (variant, size, slot,
+              // class, icon, label all identical) into a single
+              // shared structure with the Link wrapping conditionally.
+              const weeklyLabel = (
+                <>
                   <FileText className="h-3.5 w-3.5" aria-hidden="true" />
                   <span>{t("insights.heroActionWeeklyReport")}</span>
-                </Link>
-              </Button>
-            ) : (
-              <Button
-                type="button"
-                variant="default"
-                size="sm"
-                disabled
-                title={comingSoon}
-                data-slot="insights-hero-strip-action-weekly-report"
-                className="gap-1.5"
-              >
-                <FileText className="h-3.5 w-3.5" aria-hidden="true" />
-                <span>{t("insights.heroActionWeeklyReport")}</span>
-              </Button>
-            )}
+                </>
+              );
+              return weeklyReportHref ? (
+                <Button
+                  asChild
+                  variant="default"
+                  size="sm"
+                  data-slot="insights-hero-strip-action-weekly-report"
+                  className="gap-1.5"
+                >
+                  <Link href={weeklyReportHref}>{weeklyLabel}</Link>
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  variant="default"
+                  size="sm"
+                  disabled
+                  title={comingSoon}
+                  data-slot="insights-hero-strip-action-weekly-report"
+                  className="gap-1.5"
+                >
+                  {weeklyLabel}
+                </Button>
+              );
+            })()}
             {/* B2b wires this into the Coach drawer. The button is
               enabled whenever the parent supplies an `onAskCoach`
               handler; older parents that haven't adopted B2b yet
diff --git a/src/components/insights/trends-row.tsx b/src/components/insights/trends-row.tsx
index 81f91c353..3e510ccc7 100644
--- a/src/components/insights/trends-row.tsx
+++ b/src/components/insights/trends-row.tsx
@@ -26,17 +26,20 @@ import {
  * the row's visual rhythm.
  */
 
+// v1.4.22 W5 reconcile (S-04) — both `dynamic()` calls used the same
+// pulse-skeleton placeholder. Hoist so the loading affordance stays
+// in lock-step (cleared against `feedback_charts_visual_identity.md`
+// — placeholder only, no chart visual change).
+const ChartSkeleton = () => (
+  <div className="bg-muted/40 h-[220px] w-full animate-pulse rounded-md motion-reduce:animate-none" />
+);
+
 const HealthChart = dynamic(
   () =>
     import("@/components/charts/health-chart").then((mod) => ({
       default: mod.HealthChart,
     })),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="bg-muted/40 h-[220px] w-full animate-pulse rounded-md motion-reduce:animate-none" />
-    ),
-  },
+  { ssr: false, loading: ChartSkeleton },
 );
 
 const MoodChart = dynamic(
@@ -44,12 +47,7 @@ const MoodChart = dynamic(
     import("@/components/charts/mood-chart").then((mod) => ({
       default: mod.MoodChart,
     })),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="bg-muted/40 h-[220px] w-full animate-pulse rounded-md motion-reduce:animate-none" />
-    ),
-  },
+  { ssr: false, loading: ChartSkeleton },
 );
 
 interface TrendsRowProps {