feat: seal on feed detail page

[Alessandro100]

Summary:

closes #185

Feed detail page

• Added the seal of reliability chip
• Added the seal of reliability section displaying the status and criteria
• Moved all the timestamps from the top of the page to the bottom
• Removed the "warning" and "info notices" chips at the top and included a CTA for seal
• Added seasonal chip

General

• Included the crtieria icons for the seal description page

Note

• The final seal of reliability logo has not been implemented and will change, same with the chip at the top of the page

Expected behavior:

On the feed detail page

• At the top, if the feed has the seal it will show the chip, if not, nothing will show up

Testing tips:

Urls to test

/feeds/gtfs/seal_dev_full_pass
/feeds/gtfs/seal_dev_in_grace_period
/feeds/gtfs/seal_dev_never_evaluated
/feeds/gtfs/seal_dev_seasonal
/feeds/gtfs/seal_dev_too_new
/feeds/gtfs/seal_dev_on_probation

Go on these URLs that depict the situation the feed is in, and view the expected UI elements on the page
You can also use any other URL but since the backfill has not run the data might not be complete

Please make sure these boxes are checked before submitting your pull request - thanks!

• Run the unit tests with yarn test to make sure you didn't break anything
• Add or update any needed documentation to the repo
• Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
• Linked all relevant issues
• Include screenshot(s) showing how this pull request works and fixes the issue(s)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
mobilitydatabase-web	Ready	Preview	Sep 3, 2026 3:02pm UTC

[Copilot]

🟡 Changes recommended

The analysis route remains a placeholder, while missing and probationary data can produce incorrect seal status.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds Seal of Reliability status, criteria, and navigation to GTFS feed-detail pages.

Changes:

• Fetches and caches reliability reports for authenticated and static pages.
• Adds seal, seasonal, criteria, timestamp, and analysis UI.
• Centralizes criterion icons and adds localized copy and tests.

Vercel React/Next.js best-practice guidance was applied during review.

File summaries

File	Description
.mcp.json	Adds MCP development tooling.
messages/en.json	Adds English reliability labels.
messages/fr.json	Adds French reliability labels.
src/app/services/feeds/index.ts	Adds the reliability API request.
src/app/screens/Feed/FeedView.tsx	Integrates reliability data, controls, and timestamps.
src/app/screens/Feed/components/SealQualitySummary.tsx	Renders seal status and criteria.
src/app/screens/Feed/components/SealQualitySummary.spec.tsx	Tests reliability summary states.
src/app/screens/Feed/components/FeedSummary.tsx	Adds the reliability section.
src/app/screens/Feed/components/FeedReliabilityView.tsx	Adds the placeholder analysis view.
src/app/screens/Feed/components/DataQualitySummary.tsx	Adds seal and seasonal chips.
src/app/screens/Feed/components/ClientQualityReportButton.tsx	Renames the validation-report action.
src/app/screens/Feed/components/ClientQualityAnalysisButton.tsx	Adds the analysis CTA.
src/app/constants/sealCriteria.ts	Centralizes criterion keys and icons.
src/app/components/SealOfReliabilityChip.tsx	Adds the feed-detail seal chip.
src/app/[locale]/seal-of-reliability/lib/content.tsx	Associates criteria with icons.
src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/HowItIsCalculatedPage.tsx	Reuses centralized icons.
src/app/[locale]/seal-of-reliability/components/SealOfReliabilityDescriptionPage.tsx	Displays criterion-specific icons.
src/app/[locale]/feeds/[feedDataType]/[feedId]/static/seal-of-reliability/page.tsx	Adds the static analysis route.
src/app/[locale]/feeds/[feedDataType]/[feedId]/static/page.tsx	Passes reliability data to the view.
src/app/[locale]/feeds/[feedDataType]/[feedId]/lib/feed-data-shared.ts	Loads and caches reliability reports.
src/app/[locale]/feeds/[feedDataType]/[feedId]/authed/seal-of-reliability/page.tsx	Adds the authenticated analysis route.
src/app/[locale]/feeds/[feedDataType]/[feedId]/authed/page.tsx	Passes authenticated reliability data.

Review details

Suppressed comments (3)

messages/fr.json:304

• These newly added values are still English in the French catalog, so the moved timestamp footer is only partially localized. Translate them before rendering them on /fr pages.

    "sealEarnedAt": "Seal of Reliability earned",
    "sealLostAt": "Seal of Reliability lost",
    "sealEvaluatedAt": "Seal of Reliability last evaluated",
    "pageGeneratedAt": "Page generated at",

.mcp.json:9

• This second MCP server also executes an unpinned @latest package automatically. Pin an audited exact version so repository behavior is reproducible and updates are reviewed.

      "args": ["-y", "next-devtools-mcp@latest"]

src/app/screens/Feed/components/SealQualitySummary.tsx:60

• undefined means the report could not be loaded, but it is coerced to false and presented as “Not Earned.” Since the loader deliberately returns undefined on failures, an outage becomes an incorrect reliability claim. Omit the summary or show an unavailable state until a report is present.

  const criteria = reliability?.criteria ?? [];
  const hasSeal = reliability?.has_seal ?? false;

• Files reviewed: 22/22 changed files
• Comments generated: 13
• Review effort level: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[emmambd]

@Alessandro100 This looks great! A few points:

1. Is grace period working correctly? it just shows "Not earned" to me. We would expect to see something like "At risk", and "Learn how to fix it" with orange or yellow. I think the screenshot you shared at the top of the page still isn't quite urgent enough, as I agree with @cka-y's earlier feedback.

2. When the feed is seasonal, I think the tool tip for Not Applicable could just say "Not applicable because the feed is seasonal."

3. The seasonal feed chip might make more sense in the Service window card rather than at the top of the page, since it's related to the calendar.

[github-actions]

*Lighthouse ran on https://mobilitydatabase-3b5s1wrtw-mobility-data.vercel.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 93	🟢 94	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-3b5s1wrtw-mobility-data.vercel.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 79	🟠 88	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-3b5s1wrtw-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🔴 40	🟢 94	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-3b5s1wrtw-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 98	🟠 84	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-3b5s1wrtw-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 77	🟢 94	🟢 96	🟢 100

[Alessandro100]

@emmambd

1. The feed is fixed, you should see the grace period status properly now. How much more urgent should it look? I don't think red would be appropriate considering we are giving grace
2. Done
3. Done

[emmambd]

@Alessandro100 I would use the text I recommended for the heading and the Link and then keep the warning sign

[emmambd]

LGTM! One minor thing: I don't see a "grace period" colour:

[Alessandro100]

@emmambd great catch, fixed

[emmambd]

All good to me now!