Add package details page and details API

[bruno-garcia]

Summary

• add a new GET /api/package/details/{id} endpoint backed by existing PostgreSQL catalog/download data
• add a new package details route and page at /packages/:packageId/details with maintenance and compatibility stats
• keep trends-first UX intact: search selection still adds to the trends graph
• add secondary details entry points from search autocomplete and selected package chips
• add links to NuGet.org and NuGet.info from the details page
• add frontend unit coverage for new route/actions and integration test coverage for the details endpoint

UX behavior

• trending cards continue to route to the graph (/packages/:id)
• details is an explicit secondary action (Details button in search/chips)

Validation

• dotnet build src/NuGetTrends.Web/NuGetTrends.Web.csproj --no-restore -m:1 -v minimal
• dotnet build src/NuGetTrends.IntegrationTests/NuGetTrends.IntegrationTests.csproj --no-restore -m:1 -v minimal
• npm run test-no-watch -- --watch=false --browsers=ChromeHeadless --include='src/app/package-details/package-details.component.spec.ts' --include='src/app/shared/components/search-input/search-input.component.spec.ts' --include='src/app/shared/components/package-list/package-list.component.spec.ts' --include='src/app/core/services/packages.service.spec.ts' --include='src/app/app-routes.module.spec.ts'
• npm run build (Portal)

Follow-up PRs

1. add extra package metadata sourced from .nupkg contents
2. add API diff insights as a separate feature

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9497759f30

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[Copilot]

Pull request overview

Adds a package “details” experience (API + Angular route/page) that complements the existing trends-first workflow, exposing maintenance/compatibility signals and outbound links while keeping the trends graph as the primary action.

Changes:

• Adds a new backend API endpoint: GET /api/package/details/{id} returning aggregated catalog/download metadata.
• Adds a new Angular route/page at /packages/:packageId/details plus UI entry points from search autocomplete and selected package chips.
• Adds unit tests for new frontend behaviors and extends the end-to-end integration test pipeline to verify the new API.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/NuGetTrends.Web/Portal/src/app/shared/models/package-models.ts	Adds IPackageDetails + framework support models used by the details UI/API.
src/NuGetTrends.Web/Portal/src/app/shared/components/search-input/search-input.component.ts	Adds “Details” navigation action from autocomplete results.
src/NuGetTrends.Web/Portal/src/app/shared/components/search-input/search-input.component.html	Updates autocomplete result template to include a Details button.
src/NuGetTrends.Web/Portal/src/app/shared/components/search-input/search-input.component.scss	Styles autocomplete option layout and Details button.
src/NuGetTrends.Web/Portal/src/app/shared/components/search-input/search-input.component.spec.ts	Tests that Details navigation doesn’t add the package to the chart.
src/NuGetTrends.Web/Portal/src/app/shared/components/package-list/package-list.component.ts	Adds navigation to details page from selected package chips.
src/NuGetTrends.Web/Portal/src/app/shared/components/package-list/package-list.component.html	Adds an icon-only details button to each selected package chip.
src/NuGetTrends.Web/Portal/src/app/shared/components/package-list/package-list.component.scss	Adds styling for chip layout and details icon button.
src/NuGetTrends.Web/Portal/src/app/shared/components/package-list/package-list.component.spec.ts	Adds test for details navigation and updates delete button selector.
src/NuGetTrends.Web/Portal/src/app/package-details/package-details.module.ts	Declares/exports the new details feature module.
src/NuGetTrends.Web/Portal/src/app/package-details/package-details.component.ts	Implements details page behavior, formatting helpers, and load flow.
src/NuGetTrends.Web/Portal/src/app/package-details/package-details.component.html	Implements the details page layout (stats, frameworks, metadata, links).
src/NuGetTrends.Web/Portal/src/app/package-details/package-details.component.scss	Adds styling for the details page layout and responsive behavior.
src/NuGetTrends.Web/Portal/src/app/package-details/package-details.component.spec.ts	Adds unit tests for loading details and navigating back to trends.
src/NuGetTrends.Web/Portal/src/app/core/services/packages.service.ts	Adds getPackageDetails() client method.
src/NuGetTrends.Web/Portal/src/app/core/services/packages.service.spec.ts	Adds unit test verifying the new details endpoint call.
src/NuGetTrends.Web/Portal/src/app/app.module.ts	Registers the new module and adjusts Sentry route parameterization for details route.
src/NuGetTrends.Web/Portal/src/app/app-routes.module.ts	Adds the /packages/:packageId/details route.
src/NuGetTrends.Web/Portal/src/app/app-routes.module.spec.ts	Adds routing test coverage for the details route.
src/NuGetTrends.Web/PackageController.cs	Adds the backend details endpoint + DTOs and uses a shared default icon constant.
src/NuGetTrends.IntegrationTests/EndToEndPipelineTests.cs	Extends end-to-end verification to validate the details API endpoint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[bruno-garcia]

Pushed 554ecb0 to address CI and review feedback.

Included updates:

• Reload package details on :packageId route param changes (with stale request guard).
• Replaced inline onerror handlers with Angular (error) fallback handling.
• Added aria-label to the icon-only details button.
• Changed LatestDownloadCountCheckedUtc to DateTimeOffset? with UTC conversion.
• Refactored GetDetails to aggregate/package data via SQL projections instead of loading all leaves.
• Fixed frontend selector assumptions that were breaking remove-package tests.

Local verification:

• dotnet build src/NuGetTrends.Web/NuGetTrends.Web.csproj --no-restore
• dotnet build src/NuGetTrends.IntegrationTests/NuGetTrends.IntegrationTests.csproj --no-restore
• npm run test-cc (97/97 passing)