Build Reachability Frontend

[Hubtrick-Git]

Minimal requirements:

• Creating the new page
• A working search for the hero section
  • Api request to vex-server is mocked
  • Results are logged to the console

Functional Requirements:

• Display the response in a table
• Add a good description to the page
• Make each vuln clickable?

Stylistic Requirements:

• Overhaul the visuals
• Unify looks with other similar pages

Finalized status

• The functionality of the frontend page is provided.
• Since the api endpoint does not exist yet I do not know the format of the data received so I cannot yet display it visually organized.
• The same is true for the detail-page of a specific analysis.
• Therefor the UI looks kinda ugly and is just a placeholder to have some guiding lines when finalizing the page later on in the process of merging different docu frontend pages.

[seb-kw]

Looks nice 😊 - like that small micro animation when typing away.....

[timbastin]

Overall, this looks really great! I love the splitting in table and hero. I think we can improve this further by extracting the whole logic into a container component which just renders some presentational components while providing state and mutation functions.

[Copilot]

Pull request overview

This PR introduces a new reachability analysis feature to the frontend, adding search functionality and visualization for vulnerability reachability data. The feature includes a main search page, detail pages for individual packages, and supporting UI components. The implementation uses placeholder API endpoints since the backend is not yet finalized, as noted in the PR description.

Changes:

• Added new reachability analysis pages with search and display functionality
• Integrated new dependencies (SWR for data fetching, TanStack Table for data tables, Recharts for future visualizations)
• Created reusable UI components (table, skeleton, input) following shadcn/ui patterns

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
src/pages/reachability-analysis.mdx	Main entry point for reachability analysis page
src/pages/reachability-analysis/[purl].mdx	Dynamic route for package-specific details with custom styling
src/pages/_meta.ts	Navigation configuration for new reachability page
src/lib/fetcher.js	Simple fetcher utility for SWR data fetching
src/components/ui/table.tsx	Reusable table component following shadcn/ui patterns
src/components/ui/skeleton.tsx	Loading skeleton component for better UX
src/components/ui/input.tsx	Form input component with consistent styling
src/components/reachabilityAnalysis/reachability-types.tsx	TypeScript type definitions for API responses
src/components/reachabilityAnalysis/reachability-analysis-results-table.tsx	Table component displaying search results with pagination
src/components/reachabilityAnalysis/reachability-analysis-page.tsx	Main page component managing search state and API calls
src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx	Detail view for individual packages with collapsible sections
src/components/reachabilityAnalysis/reachability-analysis-hero.tsx	Hero section with search input
src/components/reachabilityAnalysis/columns.tsx	Column definitions for data table
package.json	Added dependencies for SWR, TanStack Table, Recharts, and date-fns
package-lock.json	Lockfile updates for new dependencies
.gitignore	Minor cleanup and reorganization

---

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