Drive the Rate Limit page from the selected API instead of fixed example tiers #1326

Summary

/rate-limit always shows the same four tiers for a fictional "GrantFox Wave Compute API". The breadcrumb links point to /marketplace/grantfox-wave-compute/rate-limits… URLs that do not exist. Users cannot see the limits of the API they are actually evaluating. This issue makes the page per-API, at /marketplace/:apiId/rate-limits, sourced from the catalogue entry, with honest empty and not-found states.

Background and evidence

• src/App.tsx line 166: rateLimitCard: "/rate-limit". Line 807 routes it to <RateLimitCard /> with no parameters.
• src/pages/RateLimitCard.tsx:
  • RATE_LIMIT_TIERS (lines 28–53) hardcodes Free 10 rpm, Developer 120, Pro 600 and Enterprise 6000.
  • BREADCRUMB_ITEMS (lines 65–80) links to /marketplace/grantfox-wave-compute/rate-limits and /…/config. Under src/renderRoute.tsx line 69 those paths render the Marketplace page, not this one.
  • useDocumentTitle (lines 100–103) names GrantFox.
• APIItem in src/data/mockApis.ts has no rate-limit fields. ApiDetailPage has no link to the page.

Scope

In scope

1. Data model. Add optional rateLimits?: Array<{ plan: string; requestsPerMinute: number; burstLimit?: number; concurrentConnections?: number }> to APIItem, and populate it for several sample APIs.
2. Route. Add /marketplace/:apiId/rate-limits.
   • Teach renderRoute.tsx to send it to App, extending the existing /sla exclusion into a small, tested predicate (for example isMarketplaceSubpage(pathname)).
   • Keep /rate-limit as a redirect to the Marketplace with an explanatory toast, or remove it from routePrefetchers and ROUTE_CATALOGUE consistently.
3. Component. RateLimitCard reads apiId, resolves the API through fetchCatalog, and builds the breadcrumb and title from api.name.
   • Columns render only when at least one tier has that field, so there are no empty Burst or Concurrent columns.
4. States. Loading, unknown id, and no published limits ("This provider has not published rate limits").
5. Link. Add a link from ApiDetailPage pricing or sidebar to the new route.

Out of scope

• The mobile layout (separate issue).
• Live per-key usage against limits.

Design constraints

• The route predicate must be pure and unit-tested against /marketplace, /marketplace?x, /marketplace/a/sla, /marketplace/a/rate-limits and /marketplace/a/other.
• Update src/config/routeCatalogue.ts and the routePrefetchers map in App.tsx together, so the 404 search does not suggest a dead route.
• WCAG 2.1 AA: the table caption names the API, and number formatting is locale-aware.

Test plan

Extend src/pages/RateLimitCard.test.tsx, and add route predicate tests.

Regression proof. Row 5 fails on main (the breadcrumb hrefs render the Marketplace).

Acceptance criteria

• Each API's rate-limit page shows its own data, and no GrantFox literals remain in the component.
• npx tsc -p tsconfig.json --noEmit, npm run build and npx vitest run pass.

Getting started

git checkout -b fix/rate-limit-per-api
npm ci
npx vitest run src/pages/RateLimitCard.test.tsx

PR requirements

• Link this issue, include screenshots of populated, empty and unknown states, and paste the test output.
• Example commit: fix(rate-limit): per-API rate limit page.

Priority rationale

Medium. This is one page plus a routing predicate, but it touches the custom router and data model and must keep navigation consistent.