# Component Inventory — aicodingpricing leaderboard

Date: 2026-05-28
Scope: frontend implementation components for leaderboard + recommender + calculator transition.

## Page shells

| Component | Route(s) | Purpose | Required props/data |
|---|---|---|---|
| `DecisionPageShell` | all P0 pages | Existing-site page frame | nav links, active route, CTA map |
| `IndustrialHero` | `/llm-leaderboard`, `/best-llm-for-coding` | Editorial hero without generic SaaS pattern | eyebrow, H1, subhead, primary/secondary CTA, trust strip |
| `CalculatorHero` | `/coding-agent-cost-calculator` | Calculator-first hero | H1, subhead, CTA, caveat strip |
| `AnswerBlock` | all P0 pages | Above-fold short answer | copy, optional anchor links |

## Leaderboard components

| Component | Purpose | Required fields | Notes |
|---|---|---|---|
| `WorkflowFilterRail` | Filters table/cards by workflow | `workflow_tags`, selected tag, counts if computed from dataset | Counts optional; do not fabricate. |
| `UnknownValueLegend` | Explains not disclosed / not publicly benchmarked / source needs recheck / partial evidence | status labels + copy | Must be visible near table/cards. |
| `LeaderboardTable` | Desktop crawlable comparison | `CodingModelRow[]` | Semantic `<table>`, sticky header allowed. |
| `LeaderboardModelCard` | Mobile row card | one `CodingModelRow` | Must include caveat/source/CTA inline. |
| `BenchmarkEvidenceCell` | Shows source-specific benchmark refs | `benchmark_refs[]` | No blended score. If missing, show `not publicly benchmarked`. |
| `PriceCell` | Shows input/output/cache price | `PriceField`, `CachePriceField` | Unknown = blank/label, never 0. |
| `ContextCell` | Shows advertised context | `ContextField` | Do not imply effective long-context reliability. |
| `SpeedCell` | Shows speed source | `SpeedSource | null` | Null = `not disclosed`, no inferred “fast/high”. |
| `DataStatusBadge` | Status clarity | `data_status`, `source_confidence` | Color + text, not color only. |
| `SourceFreshnessLine` | Source visibility | source_name, source_url, last_checked, confidence | Per-row, not footer-only. |
| `RowCalculatorCTA` | Moves row to calculator | model key + workflow | URL: `/coding-agent-cost-calculator?model=<model>&workflow=<workflow>` |

## Recommender components

| Component | Purpose | Required fields | Notes |
|---|---|---|---|
| `WorkflowQuestionCard` | Entry card: “I’m building a coding agent” etc. | workflow tag, label, helper copy, CTA | Copy must say shortlist/candidate. |
| `RecommenderResultPanel` | Shows selected workflow result | `RecommenderResult` | If insufficient evidence, render empty state. |
| `RecommendationModelCard` | One model in shortlist | model, why, evidence_used, caveat, confidence | Do not display rank crown or universal winner. |
| `AlternativeTradeoff` | Cheaper/safer alternatives | cheaper_alternative, safer_alternative | Must explain tradeoff source. |
| `InsufficientDataState` | Handles unsupported filters | selected_workflow, missing sources | Example: speed-first filter has no exact source in seed. |

## Calculator transition components

| Component | Purpose | Required fields | Notes |
|---|---|---|---|
| `CalculatorBridge` | Conversion module after table/cards | selected model, workflow, caveat, CTA | Does not compute by itself. |
| `CalculatorPrefillSummary` | Shows what will prefill | `CalculatorPrefill` | Numeric prices only if source-backed. |
| `AssumptionInputGrid` | Visible assumptions | input tokens, output tokens, retry rate, cache hit, tasks/month, pricing mode | Defaults blank unless product approves site_default. |
| `EstimateCaveatNotice` | Protects from billing-quote claims | required caveat copy | Always near result/CTA. |
| `ResultPlaceholder` | Before user input | none | “Enter assumptions to estimate task cost.” |
| `SensitivityNote` | Explains retry/cost risk | sensitivity copy | P1 but recommended. |

## Methodology/caveat components

| Component | Purpose | Required copy source |
|---|---|---|
| `MethodologyGrid` | Four compact blocks near leaderboard | SEO Copy Freeze methodology/source/token-cost copy |
| `NoFakeUniversalScoreBlock` | Explains source-specific evidence | `/llm-leaderboard` methodology caveat |
| `TokenPriceVsTaskCostBlock` | Separates unit price from task cost | `/llm-leaderboard` token price vs task cost |
| `SourceFreshnessBlock` | Source URL/date/confidence policy | `/llm-leaderboard` source/freshness block |
| `UnknownPolicyBlock` | Explain unknown labels | data contract unknown policy |

## SEO/content components

| Component | Purpose | Notes |
|---|---|---|
| `FAQAccordion` | Visible FAQ content | Only visible FAQ gets schema. |
| `SchemaJsonLd` | WebPage/Breadcrumb/FAQ/Dataset/ItemList/SoftwareApplication | Do not use AggregateRating or hidden FAQ schema. |
| `InternalCTABridge` | Cross-page CTA map | Do not link to empty P1 pages prominently. |

## Data contracts consumed

- `CodingModelLeaderboardDataset`
- `CodingModelRow`
- `BenchmarkRef`
- `PriceField`
- `CachePriceField`
- `ContextField`
- `SpeedSource`
- `CalculatorPrefill`
- `RecommenderResult`

See `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/data-contract.md` for exact TypeScript-like definitions.

## P0 frontend guardrails

1. Do not render `0` for unknown numeric values.
2. Do not hide caveats behind hover.
3. Do not compute task cost until user assumptions exist.
4. Do not show a universal rank or “best overall”.
5. Do not make speed claims while `speed_source` is null.
6. Do not turn provider names into logos unless rights/assets are confirmed.
7. Do not launch if mobile cards lose caveat/source/CTA.