PIG/PIG-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the page playable: interactive board, live solver, and a usable run picker

Browse Source 
Three things the build was quietly missing.

The interactive board was never mounted. The contract has `interactive.init` and
`interactive.Controls`, the demo implemented both, and the shell's `split-play`
beat rendered only the replay — so the beat titled "you and the model get the
same word" showed one board. PlayYourself now renders the visitor's attempt from
the same seed as the run beside it, generically: it knows only the contract, so
any demo shipping an interactive mode gets it and one that does not renders
nothing rather than an empty pane.

solver.worker.ts was dead code — nothing constructed it, which is how CI caught
it: `new Worker(` appeared nowhere in the bundle. It is wired now behind "what
would the best player guess?", and it answers in 92ms from a real worker on
boards no recording covers. That is the difference between a demo and a video.
It also surfaces the moment the solver picks a word that CANNOT win, which is
the counterweight visible in one line instead of explained in a paragraph.

The CI check that found it was itself wrong: it grepped every bundled file for
`blob:`, which React's own code contains in a scheme check, so it failed on a
risk that was not present. It now greps for worker construction from a blob,
which is the thing production CSP actually blocks in silence.

And the run switcher was thirty buttons carrying four distinct labels. Split
into arm and seed, holding the seed across an arm change — comparing two agents
means comparing them on the same hidden word, and silently jumping seeds would
break that while looking fine.

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
2026-08-28 16:40:12 -07:00
parent 536c67a9f6
commit 331b46b114
7 changed files with 348 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/demo/DemoShell.tsx
+75 -12
View File
@@ -19,6 +19,7 @@ import { EnvAnatomy } from './EnvAnatomy';
import { LimitsCallout } from './LimitsCallout';
import { MetricMover } from './MetricMover';
import { ModelCallPanel } from './ModelCallPanel';
import { PlayYourself } from './PlayYourself';
import { ProvenanceCard } from './ProvenanceCard';
import { ReasoningDrawer } from './ReasoningDrawer';
import { ReasoningPanel } from './ReasoningPanel';
@@ -351,6 +352,19 @@ function DemoBody({ bundle }: { bundle: DemoBundle }) {
case 'split-play':
return (
<div className="space-y-3">
{demo.interactive ? (
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:items-start">
<PlayYourself demo={demo} seed={run.seed} />
<div className="space-y-2">
<h3 className={st.h3}>What the model did</h3>
<p className={cn(st.prose, 'text-sm')}>
Same hidden answer, same rules, same budget. Its attempt is
below, replayed at the speed it actually happened.
</p>
</div>
</div>
) : null}
{runs.length > 1 ? (
<RunSwitcher
runs={runs}
@@ -569,22 +583,71 @@ function RunSwitcher({
activeId: string;
onSelect: (id: string) => void;
}) {
// Two axes, not one list. With four arms over eight seeds a flat control is
// thirty buttons carrying four distinct labels, which reads as a bug. Arms
// are grouped by `label` because that is what an arm IS in the manifest —
// the shell has no other notion of one, and inventing a field for it would
// put demo-specific structure into the contract.
const arms = useMemo(() => {
const byLabel = new Map<string, RunRef[]>();
for (const run of runs) {
const list = byLabel.get(run.label);
if (list) list.push(run);
else byLabel.set(run.label, [run]);
}
return [...byLabel.entries()].map(([label, group]) => ({ label, runs: group }));
}, [runs]);
const active = runs.find((r) => r.id === activeId) ?? runs[0];
if (!active) return null;
const activeArm = arms.find((a) => a.label === active.label) ?? arms[0];
if (!activeArm) return null;
const pickArm = (label: string) => {
const arm = arms.find((a) => a.label === label);
if (!arm) return;
// Hold the seed across an arm change where the arm has it. Comparing two
// agents means comparing them on the SAME hidden word; silently jumping to
// a different seed would make the comparison meaningless while looking fine.
const sameSeed = arm.runs.find((r) => r.seed === active.seed);
onSelect((sameSeed ?? arm.runs[0])!.id);
};
return (
<SegmentedControl
label="Recorded run"
options={runs.map((run) => ({
value: run.id,
label: run.label,
...(run.intervention ? { title: run.intervention } : {}),
}))}
value={activeId}
onChange={onSelect}
className="border border-border p-1"
optionClassName="tap px-3 text-sm"
/>
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<SegmentedControl
label="Agent"
options={arms.map((arm) => {
const intervention = arm.runs.find((r) => r.intervention)?.intervention;
return {
value: arm.label,
label: arm.label,
...(intervention ? { title: intervention } : {}),
};
})}
value={activeArm.label}
onChange={pickArm}
className="border border-border p-1"
optionClassName="tap px-3 text-sm"
/>
{activeArm.runs.length > 1 ? (
<SegmentedControl
label="Hidden word"
options={activeArm.runs.map((run) => ({
value: run.id,
label: `#${run.seed}`,
}))}
value={active.id}
onChange={onSelect}
className="border border-border p-1"
optionClassName="tap px-2.5 text-xs nums"
/>
) : null}
</div>
);
}
/**
* The loading state. Shaped like the page it becomes, and with no spinner: a
* spinner here would imply a live model call, which is the one thing the whole
src/components/demo/PlayYourself.tsx
+75
View File
@@ -0,0 +1,75 @@
import { useEffect, useMemo, useState } from 'react';
import { RotateCcw } from 'lucide-react';
import type { DemoModule } from '@/lib/demo-kit';
import { cn } from '@/lib/utils';
import * as st from '@/content/styles';
/**
* The visitor's own attempt, on the same seed as the run beside it.
*
* Generic over the demo: it knows only `interactive.init`, `interactive.Controls`
* and `Surface` from the contract, so a demo that ships an interactive mode gets
* this for free and one that does not renders nothing rather than a broken pane.
*
* The seed is the shared coordinate. Both boards derive from it, which is what
* makes "you and the model got the same word" a fact about the page rather than
* a sentence on it.
*/
export function PlayYourself<TState>({
demo,
seed,
className,
}: {
demo: DemoModule<TState>;
seed: number;
className?: string;
}) {
const interactive = demo.interactive;
const Surface = demo.Surface;
// `init` is pure and seeded, so remounting on a seed change is the whole of
// "start a new game" — there is no other state to reset.
const initial = useMemo(
() => (interactive ? interactive.init(seed) : null),
[interactive, seed],
);
const [state, setState] = useState<TState | null>(initial);
const [generation, setGeneration] = useState(0);
useEffect(() => setState(initial), [initial]);
if (!interactive || state === null) return null;
const Controls = interactive.Controls;
return (
<div className={cn('space-y-3', className)}>
<div className="flex items-baseline justify-between gap-3">
<h3 className={st.h3}>Your attempt</h3>
<button
type="button"
onClick={() => {
setState(interactive.init(seed));
setGeneration((g) => g + 1);
}}
className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted transition-colors duration-1 hover:bg-surface-2 hover:text-fg"
>
<RotateCcw aria-hidden="true" className="size-3.5" />
Start over
</button>
</div>
<div className="card w-fit p-4">
<Surface state={state} />
</div>
{/* Remounting on `generation` clears any state the controls hold of their
own — a half-typed word survives a reset otherwise, and the board and
the keyboard then disagree about what is on the current row. */}
<Controls key={generation} state={state} onChange={setState} seed={seed} />
</div>
);
}
export default PlayYourself;