Implement complete extension detail page (/ext/:name)

Features implemented:
- Route parameter extraction (extension name from URL)
- Extension metrics display: readiness %, successes, failures, skipped
- Mini-grid showing build status across all PHP versions
  - Single row with larger cells (80x80px)
  - Color-coded: green (success), red (failure), gray (skipped/unknown)
  - Clickable cells open drawer with full build details
  - Same CellDrawer component reused from matrix page
- Failing builds section grouped by PHP version
  - Shows platform, platform_version, architecture, channel
  - Displays failure category if available
  - Links to workflow run and artifact downloads
  - Clean card layout with visual hierarchy
- Friendly 404 page when extension not found
  - Helpful icon and messaging
  - Suggests filter settings might be hiding the extension
  - Link back to matrix with filters preserved
- Back to Matrix navigation preserving all query params
  - Uses buildFilteredURL utility for consistent URLs
- All filters applied from URL params
- Metrics computed based on current filter set
- No failures celebration message when all builds pass

CSS updates:
- Extension detail page styles (back-link, mini-grid)
- Extension not found page (not-found-icon, hints)
- Mini grid cells (larger 80x80 with labels)
- Failing combinations cards and groups
- No failures success message
- Mobile responsive layouts

Utilities updated:
- buildFilteredURL now accepts path parameter for flexible URL building
- Updated HomePage to use new buildFilteredURL signature

Types and hooks:
- Reuses existing MatrixCell, ExtensionMetrics types
- Leverages matchesFilters and selectBestResult from matrix utils
- Full integration with DatasetContext and useFilters hook

Author: flavioheleno

src/index.css

@@ -272,13 +272,247 @@ body {
   background: var(--gray-200);
 }
 
+.back-link {
+  display: inline-block;
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  transition: color 0.2s;
+}
+
+.back-link:hover {
+  color: var(--primary-dark);
+  text-decoration: underline;
+}
+
 .extension-detail-content {
   background: white;
   padding: 2rem;
   border-radius: 0.5rem;
   box-shadow: var(--shadow);
 }
 
+/* Extension Not Found */
+.extension-not-found {
+  background: white;
+  padding: 4rem 2rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow);
+  text-align: center;
+  max-width: 600px;
+  margin: 2rem auto;
+}
+
+.not-found-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.extension-not-found h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--gray-900);
+}
+
+.extension-not-found p {
+  color: var(--gray-600);
+  margin-bottom: 0.75rem;
+}
+
+.not-found-hint {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  font-style: italic;
+}
+
+/* Extension Mini Grid */
+.extension-mini-grid {
+  background: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow);
+  margin-bottom: 2rem;
+}
+
+.extension-mini-grid h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  color: var(--gray-900);
+}
+
+.mini-grid-container {
+  overflow-x: auto;
+}
+
+.mini-grid-row {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.mini-grid-cell-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mini-grid-php-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--gray-700);
+}
+
+.mini-grid-cell-wrapper .cell {
+  width: 80px;
+  height: 80px;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  box-shadow: var(--shadow);
+}
+
+/* Failing Combinations */
+.failing-combinations {
+  background: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow);
+  margin-bottom: 2rem;
+}
+
+.failing-combinations h2 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--gray-900);
+}
+
+.section-subtitle {
+  color: var(--gray-600);
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+}
+
+.failure-group {
+  margin-bottom: 2rem;
+}
+
+.failure-group:last-child {
+  margin-bottom: 0;
+}
+
+.failure-group h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--primary);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--gray-200);
+}
+
+.failure-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.failure-card {
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
+  border-left: 3px solid var(--danger);
+  padding: 1rem;
+  border-radius: 0.375rem;
+}
+
+.failure-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.failure-platform {
+  font-weight: 600;
+  color: var(--gray-900);
+  font-size: 0.875rem;
+}
+
+.failure-channel {
+  background: var(--gray-200);
+  color: var(--gray-700);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.failure-category {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  margin-bottom: 0.5rem;
+}
+
+.failure-links {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.failure-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.failure-link:hover {
+  color: var(--primary-dark);
+  text-decoration: underline;
+}
+
+/* No Failures Message */
+.no-failures-message {
+  background: white;
+  padding: 3rem 2rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow);
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.success-icon {
+  width: 64px;
+  height: 64px;
+  background: var(--success);
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1rem;
+}
+
+.no-failures-message h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--gray-900);
+}
+
+.no-failures-message p {
+  color: var(--gray-600);
+  font-size: 0.875rem;
+}
+
 /* Schema Warning */
 .schema-warning {
   background: #fff3cd;