HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import type { Metadata } from 'next';2import Link from 'next/link';3import { DataStrip } from '@/components/layout/terminal';4import { BreadcrumbLd } from '@/components/meta/breadcrumb-ld';5import { daysBefore, monthsBefore, todayUtc, validDay } from '@/components/temporal/dates';6import { HardwareAsOf, LeadersAsOf, ModelsAsOf, PricesAsOf } from '@/components/temporal/time-machine-tables';7import { Chip } from '@/components/ui/badges';8import { Container, Note, PageHeader, Section } from '@/components/ui/section';9import { Unavailable } from '@/components/ui/unavailable';10import { apiD3, safe } from '@/lib/api';11import { fmtDate, fmtDateTime, fmtInt, num } from '@/lib/format';12import { routes, SITE_NAME, SITE_URL } from '@/lib/site';1314type SP = { date?: string; scope?: string };15const SCOPES = [16 { key: 'all', label: 'Overview' },17 { key: 'models', label: 'Models' },18 { key: 'prices', label: 'Provider prices' },19 { key: 'context', label: 'Context lengths' },20 { key: 'benchmarks', label: 'Benchmark leaders' },21 { key: 'hardware', label: 'Hardware' },22] as const;23type Scope = (typeof SCOPES)[number]['key'];24const LIMIT_FOCUS = 200;25const LIMIT_ALL = 25;2627function resolve(sp: SP): { date: string; scope: Scope; invalid: boolean } {28 const today = todayUtc();29 const date = validDay(sp.date) ?? today;30 const scope = (SCOPES.find((s) => s.key === sp.scope)?.key ?? 'all') as Scope;31 return { date: date > today ? today : date, scope, invalid: !!sp.date && !validDay(sp.date) };32}33function href(date: string, scope: Scope): string {34 const p = new URLSearchParams({ date });35 if (scope !== 'all') p.set('scope', scope);36 return `/time-machine?${p.toString()}`;37}3839export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {40 const { date, scope } = resolve(await searchParams);41 const title = `AI Atlas as of ${fmtDate(date)}${scope !== 'all' ? ` — ${SCOPES.find((s) => s.key === scope)?.label.toLowerCase()}` : ''}`;42 const description = `The AI ecosystem as it stood on ${fmtDate(date)}: which models existed, their context lengths and status then, provider prices valid that day, benchmark leaders known by then, hardware — reconstructed from dated claims and honest about it.`;43 const og = `${SITE_URL}/time-machine/og?date=${date}&scope=${scope}`;44 return { title, description, alternates: { canonical: href(date, scope) }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${href(date, scope)}`, images: [{ url: og, width: 1200, height: 630 }] }, twitter: { card: 'summary_large_image', images: [og] } };45}4647export default async function TimeMachinePage({ searchParams }: { searchParams: Promise<SP> }) {48 const sp = await searchParams;49 const { date, scope, invalid } = resolve(sp);50 const today = todayUtc();51 const apiScope = scope === 'context' ? 'models' : scope;52 const [focus, overview] = await Promise.all([safe(apiD3.timeMachine(date, apiScope, scope === 'all' ? LIMIT_ALL : LIMIT_FOCUS)), scope === 'all' ? Promise.resolve(null) : safe(apiD3.timeMachine(date, 'all', 1))]);53 const strip = overview ?? focus;54 const presets: { label: string; date: string }[] = [55 { label: '2023-01-01', date: '2023-01-01' },56 { label: '2024-01-01', date: '2024-01-01' },57 { label: '2025-01-01', date: '2025-01-01' },58 { label: '6 months ago', date: monthsBefore(today, 6) },59 { label: '1 month ago', date: monthsBefore(today, 1) },60 { label: 'yesterday', date: daysBefore(today, 1) },61 ];62 const models = focus?.models;63 const prices = focus?.prices;64 const leaders = focus?.benchmarks?.leaders ?? [];65 const hardware = focus?.hardware?.items ?? [];66 const contextRows = (models?.items ?? []).filter((r) => r.attributes_as_of.context_length !== undefined && r.attributes_as_of.context_length !== null).sort((a, b) => (num(b.attributes_as_of.context_length) ?? 0) - (num(a.attributes_as_of.context_length) ?? 0));67 const cls = 'h-11 border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none';6869 return (70 <Container wide>71 <BreadcrumbLd items={[{ name: SITE_NAME, href: '/' }, { name: 'Time machine', href: '/time-machine' }, { name: fmtDate(date), href: href(date, scope) }]} />72 <PageHeader73 eyebrow="Time machine"74 title={75 <>76 AI Atlas as of <span className="tnum text-ink-2">{fmtDate(date)}</span>77 </>78 }79 lede="Pick any date: the models that existed, their context lengths and status at the time, the provider prices valid that day, the benchmark leaders known by then, the hardware. Every value opens the claim that establishes it, with its validity interval."80 aside={81 <form action="/time-machine" method="get" className="flex items-end gap-2">82 <label className="block">83 <span className="eyebrow block pb-1">Date (UTC)</span>84 <input type="date" name="date" defaultValue={date} max={today} className={cls} required data-tm-date />85 </label>86 {scope !== 'all' && <input type="hidden" name="scope" value={scope} />}87 <button type="submit" className="inline-flex h-11 items-center bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90">88 Travel89 </button>90 </form>91 }92 >93 <ul className="no-scrollbar -mx-4 mt-4 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0" aria-label="Presets">94 {presets.map((p) => (95 <li key={p.label} className="shrink-0">96 <Link href={href(p.date, scope)} className={`inline-flex h-9 items-center border px-2.5 text-sm ${p.date === date ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink'}`} aria-current={p.date === date ? 'true' : undefined}>97 {p.label}98 </Link>99 </li>100 ))}101 </ul>102 {invalid && <Note className="mt-2 text-warning">The date in the URL was not YYYY-MM-DD — showing today instead.</Note>}103 </PageHeader>104105 <div className="pb-16">106 {!focus ? (107 <Unavailable what="Time machine" reason="The API did not answer for this date." />108 ) : (109 <>110 {/* honesty banner */}111 <div className={`border-l-2 px-4 py-3 text-sm ${focus.reconstructed ? 'border-warning bg-warning-soft' : 'border-accent bg-accent-soft'}`} role="note" data-tm-banner>112 <p className="flex flex-wrap items-center gap-2 font-medium text-ink">113 {focus.reconstructed ? <Chip tone="estimated">Reconstructed</Chip> : <Chip tone="accent">Observed</Chip>}114 {focus.reconstructed ? `This date is earlier than AI Atlas's first observation — the state is reconstructed from dated claims and release dates, not from direct observation.` : 'This date is inside the observation history: values are claims that were current that day.'}115 </p>116 <p className="mt-1 text-xs text-ink-2">117 Observation history starts {focus.first_entity_at ? <time dateTime={focus.first_entity_at}>{fmtDateTime(focus.first_entity_at)}</time> : 'unknown'}.{focus.note ? ` ${focus.note}` : ''}118 </p>119 </div>120121 <DataStrip122 className="mt-6"123 items={[124 { label: 'Models existing', value: fmtInt(strip?.models?.total ?? models?.total), definition: 'Canonical models whose release date (or first dated claim) is on or before the date.', href: href(date, 'models') },125 { label: 'Offers valid', value: fmtInt(strip?.prices?.total ?? prices?.total), definition: 'Price rows whose validity interval covers the date (append-only history).', href: href(date, 'prices') },126 { label: 'Benchmark leaders', value: fmtInt(strip?.benchmarks?.leaders?.length ?? leaders.length), definition: 'Benchmarks with at least one result observed by the date.', href: href(date, 'benchmarks') },127 { label: 'Hardware', value: fmtInt(strip?.hardware?.total ?? strip?.hardware?.items?.length ?? hardware.length), definition: 'Hardware entities released on or before the date.', href: href(date, 'hardware') },128 { label: 'Basis', value: focus.reconstructed ? 'reconstructed' : 'observed', definition: 'Reconstructed = before the first observation; observed = inside the recorded history.' },129 ]}130 />131132 <nav aria-label="Scope" className="no-scrollbar -mx-4 mt-6 flex gap-1 overflow-x-auto border-b border-rule px-4 md:mx-0 md:px-0">133 {SCOPES.map((s) => (134 <Link key={s.key} href={href(date, s.key)} className={`flex h-10 shrink-0 items-center border-b-2 px-3 text-sm ${s.key === scope ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink'}`} aria-current={s.key === scope ? 'page' : undefined}>135 {s.label}136 </Link>137 ))}138 <Link href={routes.diff({ a: date, b: today })} className="ml-auto flex h-10 shrink-0 items-center px-3 text-sm text-accent hover:underline">139 Diff → today140 </Link>141 </nav>142143 {(scope === 'all' || scope === 'models') && (144 <Section id="models" eyebrow="Models" title={<>Models as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(models?.total)}</span></>} action={scope === 'all' ? { href: href(date, 'models'), label: 'All' } : undefined}>145 <ModelsAsOf rows={models?.items ?? []} total={num(models?.total)} date={date} limit={scope === 'all' ? LIMIT_ALL : LIMIT_FOCUS} />146 </Section>147 )}148 {scope === 'context' && (149 <Section id="context" eyebrow="Context lengths" title={<>Context windows as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(contextRows.length)} with a dated value</span></>}>150 <ModelsAsOf rows={contextRows} total={null} date={date} limit={LIMIT_FOCUS} />151 <Note className="mt-2">Only models with a context-length claim valid on that date are listed (sorted by context). Models without a dated claim are omitted rather than guessed.</Note>152 </Section>153 )}154 {(scope === 'all' || scope === 'prices') && (155 <Section id="prices" eyebrow="Provider prices" title={<>Offers valid on {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(prices?.total)}</span></>} action={scope === 'all' ? { href: href(date, 'prices'), label: 'All' } : undefined}>156 <PricesAsOf rows={prices?.items ?? []} total={num(prices?.total)} date={date} />157 {prices?.note && <Note className="mt-1">{prices.note}</Note>}158 </Section>159 )}160 {(scope === 'all' || scope === 'benchmarks') && (161 <Section id="benchmarks" eyebrow="Benchmark leaders" title={<>Leaders known by {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(leaders.length)}</span></>}>162 <LeadersAsOf rows={leaders} date={date} />163 {focus.benchmarks?.note && <Note className="mt-1">{focus.benchmarks.note}</Note>}164 </Section>165 )}166 {(scope === 'all' || scope === 'hardware') && (167 <Section id="hardware" eyebrow="Hardware" title={<>Hardware as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(hardware.length)}</span></>} action={scope === 'all' ? { href: href(date, 'hardware'), label: 'All' } : undefined}>168 <HardwareAsOf rows={hardware} date={date} />169 </Section>170 )}171 <Note className="mt-6">172 Shareable: this URL reproduces the view. Per-entity: every entity page has a History tab with the same as-of reconstruction. What changed since? <Link href={routes.diff({ a: date, b: today })} className="link">Diff {fmtDate(date)} → today</Link>. <Link href={routes.methodology()} className="link">Methodology →</Link>173 </Note>174 </>175 )}176 </div>177 </Container>178 );179}180