audit: Phase 1 fixes — shared STEPS, rate limits, a11y, bug fixes (42 items)

- Extract shared INTAKE_STEPS constant, unify all 12 intake pages
- Fix summary progress dots (all showed "done", none "active")
- Define missing CSS vars: --sand-100, --sky-400, --peach-200
- Fix next.config.ts misleading comment about env var baking
- Add rate limiting to feed POST, sync, and PDF routes
- Sanitize childName in PDF generation route
- Replace emoji theme toggles with ThemeToggle component (11 pages)
- Add ARIA: SkipStageDialog, UserMenu, BottomNav, game buttons
- Add keyboard support: Escape on dialogs, Space on gender cards
- Fix landing page inverted subtitle for authenticated users
- Fix report page localStorage key mismatch (underscores to hyphens)
- Add structured logging to auth module (config, dynamodb, session)
- Improve sync retry: stop on 401/400, only retry on 5xx
- Fix logout fetch redirect waste (redirect: manual)
- Add feed page error feedback on create/react/delete failures
- Add vitest @/ path alias, add test:unit to amplify.yml preBuild

Author: Partha-dev01

amplify.yml

@@ -5,6 +5,7 @@ frontend:
       commands:
         - nvm use 22
         - npm ci
+        - npm run test:unit
     build:
       commands:
         - npm run build

app/api/feed/route.ts

@@ -118,6 +118,10 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
+  const { apiRateLimiter } = await import("@/app/lib/rateLimit");
+  const rl = apiRateLimiter.check(`feed-post:${user.id}`);
+  if (!rl.allowed) return NextResponse.json({ error: "Rate limit exceeded" }, { status: 429 });
+
   try {
     const body = await request.json();
     const { action } = body;

app/api/report/pdf/route.ts

@@ -215,6 +215,10 @@ export async function POST(req: NextRequest) {
   const authResult = await requireApiAuth(req);
   if (authResult instanceof NextResponse) return authResult;
 
+  const { aiRateLimiter } = await import("../../../lib/rateLimit");
+  const rl = aiRateLimiter.check(authResult.id);
+  if (!rl.allowed) return NextResponse.json({ error: "Rate limit exceeded" }, { status: 429 });
+
   let body: PdfRequestBody;
 
   try {
@@ -230,7 +234,8 @@ export async function POST(req: NextRequest) {
     );
   }
 
-  const { report, childName, sessionDate, scores, childAge, assessmentDuration } = body;
+  const { report, sessionDate, scores, childAge, assessmentDuration } = body;
+  const childName = String(body.childName || "Child").slice(0, 100).replace(/[^\p{L}\p{N}\s'-]/gu, "");
 
   try {
     const pdfDoc = await PDFDocument.create();

app/api/sync/route.ts

@@ -44,6 +44,10 @@ export async function POST(req: NextRequest) {
   const authResult = await requireApiAuth(req);
   if (authResult instanceof NextResponse) return authResult;
 
+  const { apiRateLimiter } = await import("../../lib/rateLimit");
+  const rl = apiRateLimiter.check(`sync:${authResult.id}`);
+  if (!rl.allowed) return NextResponse.json({ error: "Rate limit exceeded" }, { status: 429 });
+
   let body: SyncRequestBody;
 
   try {

app/components/BottomNav.tsx

@@ -17,6 +17,7 @@ export default function BottomNav() {
 
   return (
     <nav
+      aria-label="Bottom navigation"
       style={{
         position: "fixed",
         bottom: 0,

app/components/SkipStageDialog.tsx

@@ -30,7 +30,13 @@ export default function SkipStageDialog({ onConfirm }: SkipStageDialogProps) {
   }
 
   return (
-    <div style={{
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="skip-dialog-title"
+      tabIndex={-1}
+      onKeyDown={(e) => { if (e.key === "Escape") setShowConfirm(false); }}
+      style={{
       position: "fixed",
       top: 0, left: 0, right: 0, bottom: 0,
       background: "rgba(0,0,0,0.4)",
@@ -43,7 +49,7 @@ export default function SkipStageDialog({ onConfirm }: SkipStageDialogProps) {
         maxWidth: 380,
         textAlign: "center",
       }}>
-        <h3 style={{
+        <h3 id="skip-dialog-title" style={{
           fontFamily: "'Fredoka',sans-serif",
           fontWeight: 600,
           fontSize: "1.1rem",
@@ -64,6 +70,7 @@ export default function SkipStageDialog({ onConfirm }: SkipStageDialogProps) {
           <button
             className="btn btn-outline"
             onClick={() => setShowConfirm(false)}
+            autoFocus
             style={{ minHeight: 40, padding: "8px 20px" }}
           >
             Cancel

app/components/UserMenu.tsx

@@ -26,6 +26,8 @@ export default function UserMenu() {
       <button
         onClick={() => setOpen((o) => !o)}
         aria-label="User menu"
+        aria-expanded={open}
+        aria-haspopup="true"
         style={{
           display: "flex",
           alignItems: "center",
@@ -78,6 +80,8 @@ export default function UserMenu() {
             style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.18)", zIndex: 199 }}
           />
           <div
+            role="menu"
+            onKeyDown={(e) => { if (e.key === "Escape") setOpen(false); }}
             style={{
               position: "absolute",
               top: "calc(100% + 6px)",
@@ -117,6 +121,7 @@ export default function UserMenu() {
               </div>
             </div>
             <button
+              role="menuitem"
               onClick={() => {
                 setOpen(false);
                 logout();

app/contexts/AuthContext.tsx

@@ -57,6 +57,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       await fetch("/api/auth/logout", {
         method: "POST",
         credentials: "include",
+        redirect: "manual",
       });
     } catch {
       // Ignore network errors — still clear local state

app/feed/page.tsx

@@ -56,6 +56,7 @@ export default function FeedPage() {
   const [loading, setLoading] = useState(true);
   const [showCompose, setShowCompose] = useState(false);
   const [anonymous, setAnonymous] = useState(true);
+  const [feedError, setFeedError] = useState<string | null>(null);
 
   // Use user ID from auth context (no duplicate fetch)
   const userId = user?.id || "";
@@ -93,11 +94,12 @@ export default function FeedPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ content: content.trim(), category, anonymous }),
       });
+      setFeedError(null);
       setContent("");
       setShowCompose(false);
       await loadPosts();
     } catch {
-      // Failed to create post
+      setFeedError("Something went wrong. Please try again.");
     } finally {
       setPosting(false);
     }
@@ -110,9 +112,10 @@ export default function FeedPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ action: "react", postId: post.postId, createdAt: post.createdAt, type }),
       });
+      setFeedError(null);
       await loadPosts();
     } catch {
-      // Failed to toggle reaction
+      setFeedError("Something went wrong. Please try again.");
     }
   };
 
@@ -123,9 +126,10 @@ export default function FeedPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ action: "delete", postId: post.postId, createdAt: post.createdAt }),
       });
+      setFeedError(null);
       await loadPosts();
     } catch {
-      // Failed to delete
+      setFeedError("Something went wrong. Please try again.");
     }
   };
 
@@ -290,6 +294,14 @@ export default function FeedPage() {
           </div>
         )}
 
+        {/* Error Banner */}
+        {feedError && (
+          <div style={{ padding: "10px 16px", borderRadius: 12, background: "var(--peach-100)", color: "var(--text-primary)", fontSize: "0.85rem", marginBottom: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span>{feedError}</span>
+            <button onClick={() => setFeedError(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)", fontSize: "1rem" }}>&#10005;</button>
+          </div>
+        )}
+
         {/* Category Filter */}
         <div
           className="fade fade-2"

app/globals.css

@@ -29,8 +29,11 @@
 
   --sky-100: #e8f0fb;
   --sky-300: #93b8ef;
+  --sky-400: #5a9be6;
   --peach-100: #fce8df;
+  --peach-200: #f8cbb8;
   --peach-300: #f0a882;
+  --sand-100: #f5efe6;
   --lavender-100: #ede8f8;
 
   --feature-green: #e3ede6;
@@ -77,8 +80,11 @@
 
   --sky-100: #0f1e2e;
   --sky-300: #4a7eb5;
+  --sky-400: #6da0d0;
   --peach-100: #2a1510;
+  --peach-200: #6e3525;
   --peach-300: #c4754a;
+  --sand-100: #1e1a14;
   --lavender-100: #1a152a;
 
   --feature-green: #152a1a;