1import { ExternalLink } from 'lucide-react';2import Link from 'next/link';3import { ChangeRow } from '@/components/changes/change-row';4import { Legend, LineChart, type Series, Sparkline, stepPoints } from '@/components/charts/charts';5import { Chip, ConfidenceBadge, Estimated, TierBadge } from '@/components/ui/badges';6import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';7import { EntityInline, EntityLink, EntityRow, QualityMark } from '@/components/ui/entity';8import { KeyValue, type KVRow } from '@/components/ui/key-value';9import { SourceCell } from '@/components/ui/provenance';10import { Note } from '@/components/ui/section';11import { EmptyState } from '@/components/ui/unavailable';12import { fmtAgo, fmtDate, fmtGb, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, fmtValue, num } from '@/lib/format';13import { predicateLabel, PROSE_KEYS, propertyLabel, routes, typeLabel } from '@/lib/site';14import type { BenchmarkResult, ChangeEvent, EntityDetail, EntitySummary, HardwareFitRow, Price, Provenance, RelationGroup, SourceRef } from '@/lib/types';1516/* ------------------------------------------------------------------------------------------------------ spec table */1718const MODEL_ORDER = ['family', 'version', 'release_date', 'status', 'openness', 'license', 'architecture', 'parameter_count', 'active_parameter_count', 'is_moe', 'context_length', 'max_output_tokens', 'knowledge_cutoff', 'training_data_cutoff', 'modalities', 'modalities_input', 'modalities_output', 'languages', 'tokenizer', 'api_model_id', 'api_alias', 'base_model', 'quantization', 'quant_format', 'file_size_gb', 'deprecation_date', 'retirement_date', 'retirement_tentative', 'hf_repo', 'pipeline_tag', 'official_url', 'model_card_url', 'paper_url', 'repository_url', 'metric.downloads', 'metric.likes'];19const CAPABILITY_KEYS = ['tool_calling', 'structured_output', 'reasoning', 'vision', 'audio', 'fine_tuning_available'];20const HIDDEN = new Set(['name', 'slug', 'id', 'entity_type']);2122/** Every non-prose attribute as a KeyValue list, model keys in canonical order, others alphabetical. */23export function SpecTable({ d, exclude = [] }: { d: EntityDetail; exclude?: string[] }) {24 const attrs = d.attributes ?? {};25 const skip = new Set([...exclude, ...HIDDEN, ...PROSE_KEYS]);26 const keys = Object.keys(attrs).filter((k) => !skip.has(k) && attrs[k] !== null && attrs[k] !== undefined && attrs[k] !== '' && !(Array.isArray(attrs[k]) && (attrs[k] as unknown[]).length === 0));27 const order = new Map(MODEL_ORDER.map((k, i) => [k, i]));28 keys.sort((a, b) => (order.get(a) ?? 999) - (order.get(b) ?? 999) || a.localeCompare(b));29 const rows: KVRow[] = keys.map((k) => ({ key: k, raw: attrs[k] }));30 return <KeyValue rows={rows} provenance={d.provenance} />;31}3233/** Identity block: aliases + identifiers (scheme: value). */34export function Identity({ d }: { d: EntityDetail }) {35 if (!d.aliases?.length && !d.identifiers?.length) return null;36 return (37 <div className="space-y-3 text-sm">38 {d.identifiers?.length > 0 && (39 <dl className="kv">40 {d.identifiers.map((i) => (41 <div key={`${i.scheme}:${i.value}`}>42 <dt className="mono">{i.scheme}</dt>43 <dd className="mono text-ink">{i.value}</dd>44 </div>45 ))}46 </dl>47 )}48 {d.aliases?.length > 0 && (49 <p className="text-ink-3">50 Also known as: <span className="text-ink-2">{d.aliases.join(', ')}</span>51 </p>52 )}53 </div>54 );55}5657/* ------------------------------------------------------------------------------------------------------ capabilities */5859export function Capabilities({ d }: { d: EntityDetail }) {60 const a = d.attributes ?? {};61 const mods = (Array.isArray(a.modalities) ? a.modalities : []) as string[];62 const inMods = (Array.isArray(a.modalities_input) ? a.modalities_input : []) as string[];63 const outMods = (Array.isArray(a.modalities_output) ? a.modalities_output : []) as string[];64 const flags = CAPABILITY_KEYS.map((k) => ({ key: k, value: a[k] }));65 const known = flags.filter((f) => typeof f.value === 'boolean');66 return (67 <div className="space-y-6">68 <div>69 <p className="eyebrow mb-2">Modalities</p>70 {mods.length || inMods.length || outMods.length ? (71 <dl className="kv">72 {mods.length > 0 && (73 <div>74 <dt>Modalities</dt>75 <dd className="flex flex-wrap gap-1.5">{mods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>76 </div>77 )}78 {inMods.length > 0 && (79 <div>80 <dt>Input</dt>81 <dd className="flex flex-wrap gap-1.5">{inMods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>82 </div>83 )}84 {outMods.length > 0 && (85 <div>86 <dt>Output</dt>87 <dd className="flex flex-wrap gap-1.5">{outMods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>88 </div>89 )}90 </dl>91 ) : (92 <p className="text-sm text-ink-3">Modalities unavailable.</p>93 )}94 </div>95 <div>96 <p className="eyebrow mb-2">Capabilities</p>97 <ul className="grid grid-cols-2 gap-px border border-rule bg-rule sm:grid-cols-3">98 {flags.map((f) => {99 const v = f.value;100 const p = d.provenance?.[f.key];101 return (102 <li key={f.key} className="bg-canvas px-3 py-3">103 <p className="text-xs text-ink-3">{propertyLabel(f.key)}</p>104 <p className={typeof v === 'boolean' ? (v ? 'mt-0.5 font-medium text-positive' : 'mt-0.5 font-medium text-ink-2') : 'mt-0.5 text-ink-3'}>{typeof v === 'boolean' ? (v ? 'Yes' : 'No') : 'Unavailable'}</p>105 {p && <p className="mt-0.5 truncate text-[11px] text-ink-3">{p.source_name ?? 'source'} · T{p.tier}</p>}106 </li>107 );108 })}109 </ul>110 {known.length === 0 && <Note className="mt-2">No capability flags have been observed from a source yet — we do not infer them.</Note>}111 </div>112 <KeyValue rows={[{ key: 'context_length', raw: a.context_length }, { key: 'max_output_tokens', raw: a.max_output_tokens }, { key: 'knowledge_cutoff', raw: a.knowledge_cutoff }, { key: 'languages', raw: a.languages }, { key: 'tokenizer', raw: a.tokenizer }]} provenance={d.provenance} />113 </div>114 );115}116117/* ------------------------------------------------------------------------------------------------------ benchmarks */118119function configSummary(c: Record<string, unknown>): string {120 const parts = Object.entries(c ?? {})121 .filter(([, v]) => v !== null && v !== undefined && v !== '')122 .slice(0, 4)123 .map(([k, v]) => `${k}=${typeof v === 'object' ? JSON.stringify(v) : String(v)}`);124 return parts.join(' · ');125}126127/** Results table. `perspective="model"` shows the benchmark column; `"benchmark"` shows rank + model. */128export function ResultsTable({ results, perspective }: { results: BenchmarkResult[]; perspective: 'model' | 'benchmark' }) {129 if (!results.length) return <EmptyState title="No benchmark results recorded">Results appear when a tier 1–3 source publishes them; we never copy scores without a source.</EmptyState>;130 return (131 <>132 <DataTable caption="Benchmark results">133 <thead>134 <tr>135 {perspective === 'benchmark' && <Th className="w-10">#</Th>}136 <Th>{perspective === 'model' ? 'Benchmark' : 'Model'}</Th>137 <Th num>Score</Th>138 <Th>Metric</Th>139 <Th>Config</Th>140 <Th>Evaluated</Th>141 <Th>Source</Th>142 </tr>143 </thead>144 <tbody>145 {results.map((r, i) => {146 const target = perspective === 'model' ? r.benchmark : r.model;147 return (148 <tr key={r.id}>149 {perspective === 'benchmark' && <Td className="tnum text-ink-3" hideStack>{i + 1}</Td>}150 <Td primary>151 <EntityLink e={target} />152 {perspective === 'benchmark' && r.model.organization && <span className="ml-2 text-xs text-ink-3">{r.model.organization.name}</span>}153 </Td>154 <Td num label="Score" className="tnum font-medium">155 {fmtScore(r.score)}156 {r.unit && r.unit !== '%' ? <span className="text-ink-3"> {r.unit}</span> : r.unit === '%' ? '%' : ''}157 </Td>158 <Td label="Metric" className="text-ink-2">{r.metric ?? '—'}{r.higher_is_better === false && <span className="text-ink-3"> (lower is better)</span>}</Td>159 <Td label="Config" className="mono max-w-[18rem] truncate text-xs text-ink-3" title={JSON.stringify(r.config)}>{configSummary(r.config) || '—'}</Td>160 <Td label="Evaluated" className="text-ink-2">{fmtDate(r.evaluated_at)}</Td>161 <Td label="Source"><SourceCell url={r.source_url} tier={r.tier} /> <ConfidenceBadge confidence={r.confidence !== 'high' && r.confidence !== 'medium' ? r.confidence : null} /></Td>162 </tr>163 );164 })}165 </tbody>166 </DataTable>167 <Note className="mt-3">168 Scores are reported as published, with their evaluation configuration (harness, prompting, judge). Results with different configs are not directly comparable — see <Link href="/methodology#benchmarks" className="link">methodology</Link>.169 </Note>170 </>171 );172}173174/* ------------------------------------------------------------------------------------------------------ prices */175176export function PricesTable({ prices, perspective }: { prices: Price[]; perspective: 'model' | 'provider' }) {177 if (!prices.length) return <EmptyState title="No current prices recorded">Prices appear when a provider publishes a public pricing page we crawl.</EmptyState>;178 const sorted = [...prices].sort((a, b) => (num(a.input_per_mtok) ?? Infinity) - (num(b.input_per_mtok) ?? Infinity));179 return (180 <>181 <DataTable caption="Current prices per 1M tokens">182 <thead>183 <tr>184 <Th>{perspective === 'model' ? 'Provider' : 'Model'}</Th>185 <Th num>Input / 1M</Th>186 <Th num>Output / 1M</Th>187 <Th num>Cached in</Th>188 <Th num>Batch in / out</Th>189 <Th num>Context</Th>190 <Th>Observed</Th>191 <Th>Source</Th>192 </tr>193 </thead>194 <tbody>195 {sorted.map((p) => {196 const target = perspective === 'model' ? p.provider : p.model;197 return (198 <tr key={p.id}>199 <Td primary>200 <EntityLink e={target} />201 {p.provider_model_id && <span className="mono ml-2 text-[11px] text-ink-3">{p.provider_model_id}</span>}202 {perspective === 'provider' && p.model.organization && <span className="ml-2 text-xs text-ink-3">{p.model.organization.name}</span>}203 </Td>204 <Td num label="Input / 1M" className="tnum font-medium text-accent-2">{fmtUsdPerM(p.input_per_mtok)}</Td>205 <Td num label="Output / 1M" className="tnum font-medium text-accent-2">{fmtUsdPerM(p.output_per_mtok)}</Td>206 <Td num label="Cached input" className="tnum text-ink-2">{fmtUsdPerM(p.cached_input_per_mtok)}</Td>207 <Td num label="Batch in / out" className="tnum text-ink-2">{num(p.batch_input_per_mtok) === null && num(p.batch_output_per_mtok) === null ? '—' : `${fmtUsdPerM(p.batch_input_per_mtok)} / ${fmtUsdPerM(p.batch_output_per_mtok)}`}</Td>208 <Td num label="Context" className="tnum text-ink-2">{num(p.context_length) === null ? '—' : fmtTokens(p.context_length)}</Td>209 <Td label="Observed" className="text-ink-2" title={p.observed_at}>{fmtAgo(p.observed_at)}</Td>210 <Td label="Source"><SourceCell url={p.source_url} tier={p.tier} /></Td>211 </tr>212 );213 })}214 </tbody>215 </DataTable>216 <Note className="mt-3">USD per 1M tokens as published by each provider ({sorted[0]?.currency ?? 'USD'}). Rows are append-only: every change is kept in the history below.</Note>217 </>218 );219}220221/** Price history: step lines per provider (input price) + output as second chart when > 1 point. */222export function PriceHistory({ history, perspective = 'model' }: { history: Price[]; perspective?: 'model' | 'provider' }) {223 if (!history.length) return null;224 const byKey = new Map<string, Price[]>();225 for (const p of history) {226 const k = perspective === 'model' ? p.provider.name : p.model.name;227 const arr = byKey.get(k);228 if (arr) arr.push(p);229 else byKey.set(k, [p]);230 }231 const build = (field: 'input_per_mtok' | 'output_per_mtok'): Series[] =>232 [...byKey.entries()].slice(0, 8).map(([name, rows]) => ({233 name,234 points: stepPoints([...rows.sort((a, b) => a.valid_from.localeCompare(b.valid_from)).map((r) => ({ at: r.valid_from, value: num(r[field]) })), ...(rows.every((r) => r.valid_to) ? [] : [{ at: new Date().toISOString(), value: num([...rows].sort((a, b) => b.valid_from.localeCompare(a.valid_from))[0]?.[field]) }])]),235 }));236 const inSeries = build('input_per_mtok').filter((s) => s.points.length > 0);237 const totalPoints = inSeries.reduce((n, s) => n + s.points.length, 0);238 if (totalPoints < 2) return <Note>Price history starts with the first observation — no changes recorded yet ({history.length} row{history.length === 1 ? '' : 's'}).</Note>;239 const outSeries = build('output_per_mtok').filter((s) => s.points.length > 0);240 return (241 <div className="grid gap-6 md:grid-cols-2">242 <div>243 <p className="eyebrow mb-2">Input price · USD / 1M tokens</p>244 <LineChart series={inSeries} height={200} yFormat={(v) => fmtUsdPerM(v)} yDomain={[0, Math.max(...inSeries.flatMap((s) => s.points.map((p) => p.y))) * 1.15 || 1]} />245 </div>246 <div>247 <p className="eyebrow mb-2">Output price · USD / 1M tokens</p>248 <LineChart series={outSeries} height={200} yFormat={(v) => fmtUsdPerM(v)} yDomain={[0, Math.max(...outSeries.flatMap((s) => s.points.map((p) => p.y))) * 1.15 || 1]} />249 </div>250 <Legend series={inSeries} className="md:col-span-2" />251 </div>252 );253}254255/** Tiny per-row sparkline of input price for a model across its history. */256export function PriceSpark({ history, provider }: { history: Price[]; provider: string }) {257 const vals = history.filter((p) => p.provider.slug === provider).sort((a, b) => a.valid_from.localeCompare(b.valid_from)).map((p) => num(p.input_per_mtok)).filter((v): v is number => v !== null);258 return <Sparkline values={vals} width={80} height={20} stroke="var(--accent-2)" />;259}260261/* ------------------------------------------------------------------------------------------------------ hardware fit */262263export function HardwareFitTable({ rows }: { rows: HardwareFitRow[] }) {264 if (!rows.length) return <EmptyState title="No hardware estimate available">Estimates need a parameter count; this model has none recorded from a source.</EmptyState>;265 return (266 <>267 <div className="mb-3 flex flex-wrap items-center gap-2">268 <Estimated />269 <Note>Memory need = bytes per parameter (4-bit ≈ 0.5 × 1.15 overhead, 8-bit 1.0, fp16 2.0) + a KV-cache allowance. Not a measurement.</Note>270 </div>271 <DataTable caption="Estimated hardware fit">272 <thead>273 <tr>274 <Th>Hardware</Th>275 <Th>Quantization</Th>276 <Th num>Memory</Th>277 <Th num>Est. need</Th>278 <Th>Fits</Th>279 </tr>280 </thead>281 <tbody>282 {rows.map((r, i) => (283 <tr key={`${r.hardware.id}-${r.quantization}-${i}`}>284 <Td primary><EntityLink e={r.hardware} /></Td>285 <Td label="Quantization" className="mono text-xs text-ink-2">{r.quantization}</Td>286 <Td num label="Memory" className="tnum text-ink-2">{fmtGb(r.hardware.attributes?.memory_gb as never)}</Td>287 <Td num label="Est. need" className="tnum">{fmtGb(r.estimated_memory_gb, 1)}</Td>288 <Td label="Fits" className={r.fits ? 'font-medium text-positive' : 'text-ink-3'}>{r.fits ? 'Yes' : 'No'}</Td>289 </tr>290 ))}291 </tbody>292 </DataTable>293 </>294 );295}296297/* ------------------------------------------------------------------------------------------------------ lineage & relations */298299export function LineageBlock({ d }: { d: EntityDetail }) {300 const l = d.lineage;301 if (!l || (!l.ancestors.length && !l.descendants.length && !l.quantizations.length)) return <EmptyState title="No lineage recorded">Lineage comes from explicit `derived_from`, `fine_tuned_from`, `distilled_from` and `quantized_from` relations stated by sources.</EmptyState>;302 const Col = ({ title, items, hint }: { title: string; items: EntitySummary[]; hint: string }) => (303 <div>304 <p className="eyebrow">{title} <span className="tnum text-ink-3">{items.length}</span></p>305 {items.length ? (306 <ul className="mt-2 divide-y divide-rule border-y border-rule">307 {items.map((e) => (308 <li key={e.id} className="flex items-baseline justify-between gap-3 py-2 text-sm">309 <EntityLink e={e} className="font-medium" />310 <span className="tnum shrink-0 text-xs text-ink-3">{num(e.attributes?.parameter_count) !== null ? fmtParams(e.attributes.parameter_count) : e.organization?.name ?? ''}</span>311 </li>312 ))}313 </ul>314 ) : (315 <p className="mt-2 text-sm text-ink-3">{hint}</p>316 )}317 </div>318 );319 return (320 <div className="grid gap-6 md:grid-cols-3">321 <Col title="Ancestors" items={l.ancestors} hint="None recorded." />322 <div className="md:border-x md:border-rule md:px-6">323 <p className="eyebrow">This model</p>324 <p className="mt-2 text-sm font-medium">{d.name}</p>325 <p className="tnum text-xs text-ink-3">{num(d.attributes?.parameter_count) !== null ? `${fmtParams(d.attributes.parameter_count)} params` : ''}</p>326 <Col title="Quantizations" items={l.quantizations} hint="None recorded." />327 </div>328 <Col title="Descendants" items={l.descendants} hint="None recorded." />329 </div>330 );331}332333export function RelationsBlock({ relations, exclude = [] }: { relations: RelationGroup[]; exclude?: string[] }) {334 const groups = relations.filter((g) => g.items.length && !exclude.includes(g.predicate));335 if (!groups.length) return <p className="text-sm text-ink-3">No relations recorded.</p>;336 return (337 <dl className="kv">338 {groups.map((g) => (339 <div key={`${g.predicate}-${g.direction}`}>340 <dt>{predicateLabel(g.predicate, g.direction)}</dt>341 <dd>342 <EntityInline items={g.items} max={8} total={g.total} />343 {g.total > 8 && <span className="ml-1 text-xs text-ink-3">({fmtInt(g.total)} total)</span>}344 </dd>345 </div>346 ))}347 </dl>348 );349}350351/* ------------------------------------------------------------------------------------------------------ lists */352353export function EntityList({ items, empty = 'Nothing recorded yet.', showType = false }: { items: EntitySummary[]; empty?: string; showType?: boolean }) {354 if (!items.length) return <p className="text-sm text-ink-3">{empty}</p>;355 return (356 <ul className="border-t border-rule">357 {items.map((e) => (358 <EntityRow key={e.id} e={e} showType={showType} />359 ))}360 </ul>361 );362}363364/** Dense models table for company / provider / hardware pages. */365export function ModelsTable({ items, total, moreHref }: { items: EntitySummary[]; total?: number; moreHref?: string }) {366 if (!items.length) return <EmptyState title="No models recorded" />;367 return (368 <>369 <DataTable caption="Models">370 <thead>371 <tr>372 <Th>Model</Th>373 <Th num>Params</Th>374 <Th num>Context</Th>375 <Th>Openness</Th>376 <Th>Released</Th>377 <Th>Status</Th>378 <Th num>Quality</Th>379 </tr>380 </thead>381 <tbody>382 {items.map((m) => {383 const a = m.attributes ?? {};384 return (385 <tr key={m.id}>386 <Td primary><EntityLink e={m} /></Td>387 <Td num label="Params" className="tnum">{num(a.parameter_count) === null ? '—' : fmtParams(a.parameter_count)}</Td>388 <Td num label="Context" className="tnum">{num(a.context_length) === null ? '—' : fmtTokens(a.context_length)}</Td>389 <Td label="Openness" className="text-ink-2">{typeof a.openness === 'string' ? fmtValue(a.openness) : '—'}</Td>390 <Td label="Released" className="text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</Td>391 <Td label="Status" className="text-ink-2">{m.status && m.status !== 'unknown' ? m.status : '—'}</Td>392 <Td num label="Quality"><QualityMark q={m.quality?.score} /></Td>393 </tr>394 );395 })}396 </tbody>397 </DataTable>398 {total !== undefined && total > items.length && moreHref && (399 <p className="mt-3 text-sm">400 <Link href={moreHref} className="link">All {fmtInt(total)} models →</Link>401 </p>402 )}403 </>404 );405}406407/* ------------------------------------------------------------------------------------------------------ timeline & sources */408409export function TimelineList({ events, slug }: { events: ChangeEvent[]; slug?: string }) {410 if (!events.length) return <EmptyState title="No events yet">Events are generated by the change engine when a material property, price or result changes.</EmptyState>;411 return (412 <>413 <ul className="border-t border-rule">414 {events.map((e) => (415 <ChangeRow key={e.id} e={e} showDate live={false} />416 ))}417 </ul>418 {slug && (419 <p className="mt-3 text-sm">420 <Link href={`/timeline?entity=${encodeURIComponent(slug)}`} className="link">Full timeline →</Link>421 </p>422 )}423 </>424 );425}426427export function SourcesTable({ sources }: { sources: SourceRef[] }) {428 if (!sources.length) return <EmptyState title="No documents recorded" />;429 const sorted = [...sources].sort((a, b) => (a.tier ?? 9) - (b.tier ?? 9) || (b.last_observed_at ?? '').localeCompare(a.last_observed_at ?? ''));430 return (431 <>432 <DataTable caption="Source documents">433 <thead>434 <tr>435 <Th>Source</Th>436 <Th>Document</Th>437 <Th>Type</Th>438 <Th>Tier</Th>439 <Th>Last observed</Th>440 <Th num>Snapshots</Th>441 </tr>442 </thead>443 <tbody>444 {sorted.map((s) => (445 <tr key={s.url}>446 <Td primary>{s.source_name ?? s.domain ?? '—'}</Td>447 <Td label="Document" wide>448 <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full items-center gap-1 break-all text-ink-2 hover:text-accent">449 <span className="truncate">{s.url.replace(/^https?:\/\/(www\.)?/, '')}</span> <ExternalLink className="size-3 shrink-0" aria-hidden />450 </a>451 </Td>452 <Td label="Type" className="mono text-xs text-ink-2">{s.doc_type}</Td>453 <Td label="Tier"><TierBadge tier={s.tier} withLabel /></Td>454 <Td label="Last observed" className="text-ink-2" title={s.last_observed_at ?? undefined}>{fmtAgo(s.last_observed_at)}</Td>455 <Td num label="Snapshots" className="tnum">{fmtInt(s.snapshots)}</Td>456 </tr>457 ))}458 </tbody>459 </DataTable>460 <Note className="mt-3">461 Tier 1 = official/primary, 2 = quality secondary, 3 = community, 4 = unverified. Every snapshot is archived; see <Link href="/sources" className="link">all sources</Link> and the <Link href="/methodology" className="link">methodology</Link>.462 </Note>463 </>464 );465}466467/** Summary of provenance across all attributes: sources count, tiers distribution, freshest observation. */468export function ProvenanceSummary({ provenance, quality }: { provenance: Provenance; quality: EntityDetail['quality'] }) {469 const entries = Object.values(provenance ?? {});470 const tiers = [1, 2, 3, 4].map((t) => ({ t, n: entries.filter((e) => e.tier === t).length })).filter((x) => x.n);471 const newest = entries.map((e) => e.observed_at).sort().at(-1);472 const conflicts = num(quality?.conflicts) ?? 0;473 return (474 <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-4">475 <div>476 <p className="eyebrow">Attributed facts</p>477 <p className="tnum mt-0.5 text-lg font-semibold">{fmtInt(entries.length)}</p>478 </div>479 <div>480 <p className="eyebrow">Source tiers</p>481 <p className="mt-1 flex flex-wrap gap-1">{tiers.length ? tiers.map((x) => <TierBadge key={x.t} tier={x.t} withLabel={false} />) : <span className="text-ink-3">—</span>}{tiers.length > 0 && <span className="tnum text-xs text-ink-3">{tiers.map((x) => x.n).join(' / ')}</span>}</p>482 </div>483 <div>484 <p className="eyebrow">Freshest observation</p>485 <p className="mt-0.5 text-ink-2">{newest ? fmtAgo(newest) : '—'}</p>486 </div>487 <div>488 <p className="eyebrow">Conflicts</p>489 <p className={conflicts ? 'mt-0.5 font-medium text-danger' : 'mt-0.5 text-ink-2'}>{conflicts ? `${conflicts} flagged` : 'None'}</p>490 </div>491 </div>492 );493}494495export function typeTitle(e: { entity_type: string }): string {496 return typeLabel(e.entity_type);497}498export { routes };499