fix(product): give Recently Viewed the container its renderer looks for

[MOHITKOURAV01]

What this fixes

Closes #1713

frontend/scripts/product.js:516 calls loadRecentlyViewedRecommendations() on every product page. That renderer writes into #recently-viewed-products:

const recommendationContainer = document.getElementById("recently-viewed-products");

if (!recommendationContainer) {
    return;                     // <-- taken on every product page view
}

frontend/product.html never declared that id. It has a Related Products section — a different feature — and nothing else. The lookup misses, the function returns, and no Recently Viewed section appears. Nothing throws and nothing logs, so it reads as an absent feature rather than a broken one.

The page already loads recently-viewed-store.js (line 960), so every product view has been recording history that the page's only consumer could not display.

Note on the issue. Its first revision also claimed the homepage New Arrivals section was broken. That was wrong and I corrected the issue: product-cards-home.js resolves #new-arrivals-container correctly and the homepage renders fine. What is real there is a stale duplicate of that id in home-init.js, covered below.

What changed

frontend/product.html — adds the Recently Viewed section, placed before the Recommended strip and matching the markup shape of the sections around it (<section> + <h2> + subtitle + .pro-container). A comment records why the container has to keep that exact id.

frontend/scripts/home-init.js — retires a stale id. It reaches for new-arrivals-products while index.html:202 declares new-arrivals-container. This is inert today because no HTML page loads home-init.js at all; the homepage renders New Arrivals through product-cards-home.js, which resolves the id correctly. Left as-is, the mismatch resurfaces the moment anyone wires the file up, so it now points at the real container.

Deliberate choices

• Added the markup rather than repointing the script at #related-products. Related Products and Recently Viewed are different features with different data sources; sharing one container would have the second render overwrite the first.
• Did not delete home-init.js. It duplicates a live render path and is loaded by nothing, so deleting it is defensible — but that is a separate judgement call from fixing a silent container mismatch, and it belongs in its own change.
• Kept the contract test narrow. The generic id sweep is limited to the three scripts this issue covers. A repo-wide sweep fails on several unrelated pre-existing gaps and would bury the guard in noise.

Tests

New backend/tests/homeContainerContracts.test.js, 12 cases pinning the container contract between each page and the scripts it loads: the declared id, the script still being loaded, the renderer still being called, section ordering, the retired stale id, and a per-page sweep that resolves ids against the page plus the shared navbar / footer / header components it pulls in at runtime.

Verified the guard is meaningful: with the frontend changes reverted and only the test applied, 5 of the 12 fail. With the fix in place all 12 pass.

Tests:       12 passed, 12 total

check-a11y-landmarks passes — the new section carries no heading-order or landmark regression (31 page(s) have a skip link, a main landmark and one h1).

npm run check:syntax is red on this branch, but only on frontend/scripts/shop.js:2499 (Unexpected end of input), which reproduces identically on main and is tracked as #1696. No file this PR touches is implicated.

Scope

One markup section, one id, one new test file. No script logic, backend or schema changes.

---

CI note

Syntax check is red on this branch, and on every open PR in the repo right now. The single failure is inherited from main:

❌ 1 of 653 JavaScript file(s) failed to parse:
  frontend/scripts/shop.js:2499
      Unexpected end of input

No file this PR touches is implicated — shop.js is untouched here. It is tracked as #1696 with a fix open in #1701. Because Syntax check gates the rest of the workflow, Backend tests and Server boots report skipping rather than running; both suites pass locally on this branch.

The red Vercel check is the repo-wide Authorization required to deploy (team bhuvanshs-projects) and is unrelated to this change.

[hydra-maintainer]

🔍 Quality Gate Report

✅ All quality gates passed!

Status	Check	Details
✅	Linked Issue	PR description references a closing issue ✅

[hydra-maintainer]

🤖 AI Code Review

🔴 Score: 50/100 | comment

AI review unavailable at this time.

---

Automated AI review — a human maintainer will also review.

[vercel]

@MOHITKOURAV01 is attempting to deploy a commit to the Bhuvansh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[hydra-maintainer]

💡 Suggested reviewers based on relevant file history: @Aditya8369, @Pcmhacker-hero