Pin seed->word across both languages with a shared hash
engine.ts used mulberry32 and engine.py used random.Random(seed). Same seed, different word — so every ?seed= permalink on the site would have shown a different puzzle than the recorded run it claimed to be replaying, and nobody would have noticed until someone checked one by hand. Both now derive the index from FNV-1a 32-bit over the decimal seed. A hash rather than a PRNG because there is no honest one-line JavaScript equivalent of Mersenne Twister, and this way there is nothing to keep in step: both sides compute the same integer from the same string. Math.imul on the JS side is load-bearing — a plain multiply overflows into a double and diverges after the first few bytes. Twelve seeds are pinned as a vector in both test suites. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB
This commit is contained in:
karti-ai
@@ -0,0 +1,524 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ArrowRight, ArrowUpRight, Github, Menu } from 'lucide-react';
|
||||
|
||||
import { listDemos, listVerticals, type VerticalGroup } from '@/lib/demo-kit/registry';
|
||||
import type { DemoMeta } from '@/lib/demo-kit/types';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@/components/ui/navigation-menu';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion';
|
||||
import {
|
||||
Sheet,
|
||||
SheetBody,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet';
|
||||
import { ContrastToggle } from '@/components/site/ContrastToggle';
|
||||
import { DemoIcon, VERTICAL_ICONS } from '@/components/site/DemoIcon';
|
||||
import { PIG_URL, REPO_URL, VERIFIERS_WORDLE_URL } from '@/components/site/links';
|
||||
import { ThemeToggle } from '@/components/site/ThemeToggle';
|
||||
import { Wordmark } from '@/components/site/Wordmark';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/*
|
||||
* This header is GENERATED. Nothing in it names a demo.
|
||||
*
|
||||
* Adding `src/demos/<slug>/` puts that demo in the Demos panel, in its
|
||||
* vertical, and (if it is the first live one) behind the CTA, with zero edits
|
||||
* to this file. The only hand-written lists here are the five concepts under
|
||||
* "How it works", which are properties of the idea rather than of the lineup.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The real upstream taskset, quoted rather than paraphrased.
|
||||
*
|
||||
* A mega-menu that contains source code instead of more links is the cheapest
|
||||
* signal on the whole site that this is not a brochure — it is the first thing
|
||||
* a technical buyer sees, and it is true before they have clicked anything.
|
||||
*/
|
||||
const TASKSET_SOURCE = `class WordleConfig(TextArenaConfig):
|
||||
game: Literal["Wordle-v0"] = "Wordle-v0"
|
||||
|
||||
class WordleTaskset(TextArenaTaskset, vf.Taskset[TextArenaTask, WordleConfig]):
|
||||
pass`;
|
||||
|
||||
const CONCEPTS: readonly { term: string; gloss: string }[] = [
|
||||
{
|
||||
term: 'Environment',
|
||||
gloss: 'The task, the legal moves and the grader, packaged so anyone can install and run it.',
|
||||
},
|
||||
{
|
||||
term: 'Rollout',
|
||||
gloss: 'One episode. The model acts, the environment answers, and every turn is recorded.',
|
||||
},
|
||||
{
|
||||
term: 'Reward',
|
||||
gloss: 'The number the run is scored on. You write it, so you decide what "good" means.',
|
||||
},
|
||||
{
|
||||
term: 'Harness',
|
||||
gloss: 'The runner that plays a taskset against a model and keeps the receipts.',
|
||||
},
|
||||
{
|
||||
term: 'Held-out grading',
|
||||
gloss: 'Scored on problems the model has never seen, which is the only way the score means anything.',
|
||||
},
|
||||
];
|
||||
|
||||
/** A vertical group as the header renders it: the registry's group plus a glyph. */
|
||||
interface HeaderVertical extends VerticalGroup {
|
||||
icon: string;
|
||||
}
|
||||
|
||||
function useLineup() {
|
||||
return React.useMemo(() => {
|
||||
// `listDemos` already returns a fresh array sorted by order then slug, and
|
||||
// `listVerticals` already drops the empty verticals. Neither needs redoing
|
||||
// here — if this file starts re-sorting the lineup, the header and the
|
||||
// gallery will eventually disagree about what "first" means.
|
||||
const demos = listDemos();
|
||||
const live = demos.filter((demo) => demo.status === 'live');
|
||||
const spec = demos.filter((demo) => demo.status === 'spec');
|
||||
|
||||
const verticals: HeaderVertical[] = listVerticals().map((group) => ({
|
||||
...group,
|
||||
icon: VERTICAL_ICONS[group.vertical],
|
||||
}));
|
||||
|
||||
// The CTA follows the lineup rather than naming a slug. Today the first
|
||||
// live demo IS the word game, so this resolves to the wordle route; when a
|
||||
// second one ships ahead of it, the button moves with it and this file does
|
||||
// not change.
|
||||
const primary = live[0] ?? demos[0];
|
||||
const ctaHref = primary ? `/demos/${primary.slug}` : '/demos';
|
||||
|
||||
return { demos, live, spec, verticals, ctaHref };
|
||||
}, []);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ panels */
|
||||
|
||||
function DemoRow({ demo, muted = false }: { demo: DemoMeta; muted?: boolean }) {
|
||||
return (
|
||||
<Link
|
||||
to={`/demos/${demo.slug}`}
|
||||
className={cn(
|
||||
'group/row flex gap-3 rounded-lg p-2.5 transition-colors duration-1 ease-enter hover:bg-surface-2',
|
||||
muted && 'opacity-70 hover:opacity-100',
|
||||
)}
|
||||
>
|
||||
<DemoIcon name={demo.icon} className="mt-0.5 size-4 text-accent-fg" />
|
||||
<span className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="flex items-center gap-2 text-sm font-medium text-fg">
|
||||
{demo.title}
|
||||
{demo.status === 'spec' ? (
|
||||
<Badge variant="outline" className="font-normal">
|
||||
Spec
|
||||
</Badge>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="text-xs leading-relaxed text-muted">
|
||||
{/*
|
||||
A spec demo shows the BUYER, not the technology: "Head of Claims"
|
||||
says who is meant to care, where a taskset name says nothing to the
|
||||
person reading this in a boardroom.
|
||||
*/}
|
||||
{demo.status === 'spec' ? `For the ${demo.persona}` : demo.tagline}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function PanelHeading({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<p className="px-2.5 pb-1 text-xs font-semibold uppercase tracking-wider text-muted">
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function DemosPanel({ live, spec }: { live: DemoMeta[]; spec: DemoMeta[] }) {
|
||||
return (
|
||||
<div className="w-[min(92vw,720px)]">
|
||||
<div className="grid grid-cols-2 gap-4 p-4">
|
||||
<section aria-label="Live now" className="flex flex-col gap-0.5">
|
||||
<PanelHeading>Live now</PanelHeading>
|
||||
{live.length > 0 ? (
|
||||
live.map((demo) => (
|
||||
<NavigationMenuLink asChild key={demo.slug}>
|
||||
<DemoRow demo={demo} />
|
||||
</NavigationMenuLink>
|
||||
))
|
||||
) : (
|
||||
<p className="p-2.5 text-xs text-muted">No interactive demos published yet.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section
|
||||
aria-label="Shipping next"
|
||||
className="flex flex-col gap-0.5 border-l border-border pl-4"
|
||||
>
|
||||
<PanelHeading>Shipping next</PanelHeading>
|
||||
{spec.length > 0 ? (
|
||||
spec.map((demo) => (
|
||||
<NavigationMenuLink asChild key={demo.slug}>
|
||||
<DemoRow demo={demo} muted />
|
||||
</NavigationMenuLink>
|
||||
))
|
||||
) : (
|
||||
<p className="p-2.5 text-xs text-muted">Nothing queued.</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 border-t border-border bg-surface-2 px-5 py-3">
|
||||
<p className="text-xs text-muted">
|
||||
Every demo replays a real rollout from a real environment.
|
||||
</p>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/demos"
|
||||
className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-accent-fg underline-offset-4 hover:underline"
|
||||
>
|
||||
Browse all demos
|
||||
<ArrowRight aria-hidden="true" className="size-3.5" />
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VerticalsPanel({ verticals }: { verticals: HeaderVertical[] }) {
|
||||
return (
|
||||
<div className="w-[min(92vw,720px)] p-4">
|
||||
{verticals.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-0.5">
|
||||
{verticals.map((vertical) => {
|
||||
// The lead demo is the lowest-order one in the vertical; its reward
|
||||
// line is what the vertical is actually promising.
|
||||
const lead = vertical.demos[0]!;
|
||||
return (
|
||||
<NavigationMenuLink asChild key={vertical.vertical}>
|
||||
<Link
|
||||
to={`/demos/${lead.slug}`}
|
||||
className="flex gap-3 rounded-lg p-2.5 transition-colors duration-1 ease-enter hover:bg-surface-2"
|
||||
>
|
||||
<DemoIcon name={vertical.icon} className="mt-0.5 size-4 text-accent-fg" />
|
||||
<span className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="text-sm font-medium text-fg">{vertical.label}</span>
|
||||
<span className="text-xs leading-relaxed text-muted">{lead.rewardLine}</span>
|
||||
</span>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="p-2.5 text-xs text-muted">No verticals in the lineup yet.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TasksetSource({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 rounded-lg border border-border bg-bg p-3', className)}>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted">
|
||||
The actual taskset
|
||||
</p>
|
||||
<pre className="overflow-x-auto text-[11px] leading-relaxed text-fg">
|
||||
<code className="font-mono">{TASKSET_SOURCE}</code>
|
||||
</pre>
|
||||
<a
|
||||
href={VERIFIERS_WORDLE_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="inline-flex items-center gap-1 text-xs font-medium text-accent-fg underline-offset-4 hover:underline"
|
||||
>
|
||||
verifiers/environments/wordle
|
||||
<ArrowUpRight aria-hidden="true" className="size-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HowItWorksPanel({ ctaHref }: { ctaHref: string }) {
|
||||
return (
|
||||
<div className="w-[min(92vw,760px)] p-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<dl className="flex flex-col gap-3">
|
||||
{CONCEPTS.map((concept) => (
|
||||
<div key={concept.term} className="flex flex-col gap-0.5">
|
||||
<dt className="text-sm font-medium text-fg">{concept.term}</dt>
|
||||
<dd className="text-xs leading-relaxed text-muted">{concept.gloss}</dd>
|
||||
</div>
|
||||
))}
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to={ctaHref}
|
||||
className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-accent-fg underline-offset-4 hover:underline"
|
||||
>
|
||||
See all five on one recorded run
|
||||
<ArrowRight aria-hidden="true" className="size-3.5" />
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</dl>
|
||||
<TasksetSource />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ mobile */
|
||||
|
||||
function MobileNav({
|
||||
live,
|
||||
spec,
|
||||
verticals,
|
||||
ctaHref,
|
||||
}: {
|
||||
live: DemoMeta[];
|
||||
spec: DemoMeta[];
|
||||
verticals: HeaderVertical[];
|
||||
ctaHref: string;
|
||||
}) {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon-touch" aria-label="Open menu">
|
||||
<Menu aria-hidden="true" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
{/*
|
||||
The sheet is a flex column: header, a scrolling body, then a pinned
|
||||
footer. Scrolling the BODY rather than the content root is what keeps a
|
||||
long lineup reachable on a short phone, and `overscroll-contain` on it
|
||||
stops the flick chaining into the page underneath.
|
||||
*/}
|
||||
<SheetContent side="right" className="w-[min(92vw,24rem)]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Menu</SheetTitle>
|
||||
<SheetDescription className="sr-only">
|
||||
Demos, verticals, and how these environments work.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<SheetBody>
|
||||
<Accordion type="multiple" defaultValue={['demos']}>
|
||||
<AccordionItem value="demos">
|
||||
<AccordionTrigger>Demos</AccordionTrigger>
|
||||
<AccordionContent className="flex flex-col gap-0.5">
|
||||
<PanelHeading>Live now</PanelHeading>
|
||||
{live.map((demo) => (
|
||||
<SheetClose asChild key={demo.slug}>
|
||||
<DemoRow demo={demo} />
|
||||
</SheetClose>
|
||||
))}
|
||||
<PanelHeading>Shipping next</PanelHeading>
|
||||
{spec.map((demo) => (
|
||||
<SheetClose asChild key={demo.slug}>
|
||||
<DemoRow demo={demo} muted />
|
||||
</SheetClose>
|
||||
))}
|
||||
<SheetClose asChild>
|
||||
<Link
|
||||
to="/demos"
|
||||
className="tap inline-flex items-center gap-1 p-2.5 text-xs font-medium text-accent-fg"
|
||||
>
|
||||
Browse all demos
|
||||
<ArrowRight aria-hidden="true" className="size-3.5" />
|
||||
</Link>
|
||||
</SheetClose>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="verticals">
|
||||
<AccordionTrigger>Verticals</AccordionTrigger>
|
||||
<AccordionContent className="flex flex-col gap-0.5">
|
||||
{verticals.map((vertical) => {
|
||||
const lead = vertical.demos[0]!;
|
||||
return (
|
||||
<SheetClose asChild key={vertical.vertical}>
|
||||
<Link
|
||||
to={`/demos/${lead.slug}`}
|
||||
className="flex gap-3 rounded-lg p-2.5 hover:bg-surface-2"
|
||||
>
|
||||
<DemoIcon name={vertical.icon} className="mt-0.5 text-accent-fg" />
|
||||
<span className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="text-sm font-medium text-fg">{vertical.label}</span>
|
||||
<span className="text-xs leading-relaxed text-muted">
|
||||
{lead.rewardLine}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</SheetClose>
|
||||
);
|
||||
})}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="how">
|
||||
<AccordionTrigger>How it works</AccordionTrigger>
|
||||
<AccordionContent className="flex flex-col gap-3">
|
||||
<dl className="flex flex-col gap-3">
|
||||
{CONCEPTS.map((concept) => (
|
||||
<div key={concept.term} className="flex flex-col gap-0.5">
|
||||
<dt className="text-sm font-medium text-fg">{concept.term}</dt>
|
||||
<dd className="text-xs leading-relaxed text-muted">{concept.gloss}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<TasksetSource />
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<a
|
||||
href={PIG_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="tap mt-2 flex items-center justify-between border-b border-border py-3 text-sm font-medium text-fg"
|
||||
>
|
||||
primeintellectgrowth.com
|
||||
<ArrowUpRight aria-hidden="true" className="size-4 text-muted" />
|
||||
</a>
|
||||
<a
|
||||
href={REPO_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="tap flex items-center justify-between border-b border-border py-3 text-sm font-medium text-fg"
|
||||
>
|
||||
Source on GitHub
|
||||
<Github aria-hidden="true" className="size-4 text-muted" />
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-1 pt-3">
|
||||
<ThemeToggle />
|
||||
<ContrastToggle />
|
||||
</div>
|
||||
</SheetBody>
|
||||
|
||||
<SheetFooter>
|
||||
<SheetClose asChild>
|
||||
<Button asChild size="lg" className="w-full">
|
||||
<Link to={ctaHref}>Play the demo</Link>
|
||||
</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ header */
|
||||
|
||||
export function SiteHeader() {
|
||||
const { live, spec, verticals, ctaHref } = useLineup();
|
||||
|
||||
return (
|
||||
<header
|
||||
// The height token already folds in --safe-top, so the padding and the
|
||||
// height come from the same source and a notch cannot push the row off
|
||||
// the bottom edge of the bar.
|
||||
className="sticky top-0 z-50 h-[var(--app-header-h)] border-b border-border bg-surface/80 pt-[var(--safe-top)] backdrop-blur-md supports-[backdrop-filter]:bg-surface/70"
|
||||
>
|
||||
<div className="mx-auto flex h-full max-w-canvas items-center gap-2 px-4 pl-[max(1rem,var(--safe-left))] pr-[max(1rem,var(--safe-right))]">
|
||||
<Link
|
||||
to="/"
|
||||
className="tap flex shrink-0 items-center rounded-md pr-2 text-base"
|
||||
aria-label="PIG demo, home"
|
||||
>
|
||||
<Wordmark />
|
||||
</Link>
|
||||
|
||||
{/*
|
||||
`h-full` is not cosmetic. The viewport hangs off the Root's
|
||||
`top-full`, so a Root only as tall as its 36px triggers drops the
|
||||
panel INSIDE the header, over its own bottom border.
|
||||
*/}
|
||||
<NavigationMenu className="hidden h-full lg:flex" delayDuration={120}>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Demos</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<DemosPanel live={live} spec={spec} />
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Verticals</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<VerticalsPanel verticals={verticals} />
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>How it works</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<HowItWorksPanel ctaHref={ctaHref} />
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink
|
||||
href={PIG_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className={cn(navigationMenuTriggerStyle(), 'text-muted hover:text-fg')}
|
||||
>
|
||||
primeintellectgrowth.com
|
||||
<ArrowUpRight aria-hidden="true" className="size-3.5" />
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<div className="hidden items-center gap-1 lg:flex">
|
||||
<ThemeToggle />
|
||||
<ContrastToggle />
|
||||
<Button asChild variant="ghost" size="icon">
|
||||
<a
|
||||
href={REPO_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
aria-label="Source on GitHub"
|
||||
>
|
||||
<Github aria-hidden="true" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button asChild size="touch" className="hidden lg:inline-flex">
|
||||
<Link to={ctaHref}>Play the demo</Link>
|
||||
</Button>
|
||||
|
||||
<div className="lg:hidden">
|
||||
<MobileNav live={live} spec={spec} verticals={verticals} ctaHref={ctaHref} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user