@supersuit/session-player 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.5.0 (2026-10-11)
+
+- **The player is the 0.2.3 experience again** (Gary, 2026-10-11: "really not loving the post-Wilson-merge case study widget, revert the UX"). Wilson's 0.3.0 changes and the 0.3.1 moments fix are reverted with `git revert`, so his commits stay in history: the Start card is back as it was (title, measured line, Start demo button, Autoplay choice; nothing plays on load; `start: 'auto'` opts in), Autoplay is on by default and playing the person when off, and device framing (Auto / iPhone / MacBook, the narrow-MacBook fallback, "Simulating a MacBook" on a phone, toasts) is unchanged from 0.2.3. Gone: `speed`, `highlights`, `moments`, `steps`, the highlights close card and the "Handled for" panel. An embed, tag or prop that still passes them is ignored rather than refused, so existing embeds keep working.
+- Kept: the `session-player` name and CLI (and the `simulator` alias), and `recast`'s handling of a spec's `highlight` and `close.handled`, so scenarios recast for 0.3.x still build and their handled lines are still covered by `replace` and `forbid`. The player ignores both fields.
+
 ## 0.4.0 (2026-10-11)
 
 - **Renamed `@supersuit/session-player`** (Gary, 2026-10-11: it plays recorded sessions; case studies and the coming Helm demo are content it plays). Same code as 0.3.2. Swap the package name in your imports; the exports, the scenario format, `SimulatorPlayer` and `<supersuit-simulator>` are unchanged. The CLI is `session-player`, and `simulator` still works. The repository is SupersuitUp/session-player (GitHub redirects the old address).

package/README.md

@@ -70,10 +70,6 @@ A page that runs modules can use the tag instead (it brings its own React throug
 <script type="module">import { defineSimulatorElement } from '@supersuit/session-player/embed'; defineSimulatorElement();</script>
 ```
 
-## A highlights cut
-
-For a short page demo (about 40 seconds), pass `speed` (work between beats runs that many times faster), `highlights` (each turn shows only where it landed, its answer's first paragraph, with real reading time, and the panel ticks off what got handled), `moments` (one screen per moment instead of a scrolling log) and `steps` (how many steps a turn keeps). Same names as props, embed query switches (`?speed=3&highlights&moments&steps=1`) and tag attributes. A recast spec may name a turn's landing answer with `highlight: { "t6": 1 }`, and a scenario's `close.handled` lists what Freeda handled, in measured facts. The Start card still waits for the viewer.
-
 ## Device framing
 
 `device` is `auto` (the default), `iphone` or `macbook`: the `device` prop, `?device=` on the embed URL, or the `device` attribute on the tag. The viewer can also switch it on the demo (Auto / iPhone / MacBook).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/session-player",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Plays recorded agent sessions (case studies) on a simulated phone or MacBook: a scenario format, a converter from Claude Code transcripts, and a React player anyone can step into.",
   "type": "module",
   "bin": {

package/src/embed.mjs

@@ -2,8 +2,7 @@
 // rather than in an iframe. The page supplies React through an import map (or a bundler).
 //
 //   <supersuit-simulator src="/simulator/scenarios" scenario="low-tide-tapes"
-//                        artifacts="off" timeline="off" autoplay="off" height="620px" device="auto"
-//                        speed="3" highlights moments steps="1"></supersuit-simulator>
+//                        artifacts="off" timeline="off" autoplay="off" height="620px" device="auto"></supersuit-simulator>
 //   <script type="module">import { defineSimulatorElement } from '@supersuit/session-player/embed'; defineSimulatorElement();</script>
 //
 // `src` returns a JSON array of scenarios (or one scenario). Image paths in it resolve against
@@ -20,11 +19,6 @@ export function propsFromAttributes(a) {
     height: a.height || undefined,
     device: a.device || undefined,
     start: a.start || undefined,
-    // The highlights cut (Wilson, 0.3.0): speed="3" highlights moments steps="1".
-    speed: Number(a.speed) || undefined,
-    highlights: a.highlights != null && a.highlights !== 'off',
-    moments: a.moments != null && a.moments !== 'off',
-    maxSteps: Number(a.steps) || undefined,
   };
 }
 

package/src/playback.mjs

@@ -64,24 +64,13 @@ export function summarize(sc) {
 // One entry per turn: the command the viewer sends, then the events that follow it in the
 // order they really happened, each with a playback offset `t`. `length` is the turn's
 // playback time.
-// A reply's first paragraph is its answer (the house style leads with it), so a highlights
-// cut can show only that and give the viewer time to read it rather than a fixed beat.
-export function lead(text) {
-  return String(text).split(/\n\s*\n/)[0].trim();
-}
-export function readMs(text) {
-  const words = String(text).trim().split(/\s+/).filter(Boolean).length;
-  return Math.max(900, Math.min(2800, 600 + 50 * words));
-}
-
-export function script(sc, { maxSteps = 5, speed = 1, leadOnly = false } = {}) {
+export function script(sc, { maxSteps = 5 } = {}) {
   const byId = new Map((sc.artifacts ?? []).map((a) => [a.id, a]));
   return sc.turns.map((turn) => {
     const steps = condense(turn.steps, maxSteps);
     const items = [
       ...steps.map((s) => ({ kind: 'step', real: s.at ?? turn.at, step: s })),
-      // A highlight shows where the turn landed: its last answer, not the progress notes before it.
-      ...(leadOnly ? [turn.replies[turn.highlight ?? turn.replies.length - 1]].filter(Boolean) : turn.replies).map((r) => ({ kind: 'reply', real: r.at, reply: leadOnly ? { ...r, text: lead(r.text) } : r })),
+      ...turn.replies.map((r) => ({ kind: 'reply', real: r.at, reply: r })),
       ...turn.artifacts.map((id) => byId.get(id)).filter(Boolean).map((a) => ({ kind: 'artifact', real: a.at ?? turn.at, artifact: a })),
     ].map((e, i) => ({ ...e, i }));
     // Stable by real time; within one instant, steps before replies before artifacts.
@@ -90,8 +79,7 @@ export function script(sc, { maxSteps = 5, speed = 1, leadOnly = false } = {}) {
     let t = 0;
     const events = items.map(({ i, ...e }) => {
       const at = t;
-      // speed shortens the work; reading time in a highlights cut is never sped up.
-      t += e.kind === 'step' ? Math.round(pace(e.step.ms) / speed) : e.kind === 'reply' ? (leadOnly ? readMs(e.reply.text) : Math.round(900 / speed)) : Math.round(500 / speed);
+      t += e.kind === 'step' ? pace(e.step.ms) : e.kind === 'reply' ? 900 : 500;
       return { ...e, t: at };
     });
     return { id: turn.id, command: { text: turn.human.text, intervention: turn.intervention, images: turn.human.images }, events, length: t };

package/src/player-css.mjs

@@ -14,23 +14,6 @@ export const PLAYER_CSS = `
 .ss-titles b{font-family:Fraunces,Georgia,serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ss-titles small{color:#7a6d5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ss-auto{display:flex;align-items:center;gap:4px;font-size:12px;color:#7a6d5a}
-.ss-moment{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:16px 18px;overflow-y:auto;animation:ss-in .35s ease-out}
-.ss-moment>*{flex:none}
-.ss-mcount{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
-.ss-mcmd{margin:0;font-size:14px;opacity:.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.ss-mbig{margin:auto 0;font-size:clamp(16px,2.6cqi,22px);line-height:1.3;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;animation:ss-in .4s ease-out}
-.ss-mwork{margin:auto 0;opacity:.6;font-size:15px}
-.ss-mticks{list-style:none;margin:0;padding:8px 0 0;border-top:1px dashed rgba(127,127,127,.35);display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
-.ss-mticks li{position:relative;padding-left:20px}
-.ss-mticks li::before{content:"\\2713";position:absolute;left:0;color:#2f8f5b;font-weight:800}
-.ss-mticks li.ss-new{font-weight:700;animation:ss-in .4s ease-out}
-.ss-tick{display:flex;gap:10px;align-items:flex-start;animation:ss-in .35s ease-out}
-.ss-check{flex:none;width:22px;height:22px;border-radius:50%;background:#2f8f5b;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
-.ss-handled{text-align:left;margin:10px 0 4px}
-.ss-handled small{display:block;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:#7a6d5a;margin-bottom:4px}
-.ss-handled ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
-.ss-handled li{position:relative;padding-left:24px;opacity:0;animation:ss-in .3s ease-out forwards;animation-delay:calc(var(--i) * 180ms)}
-.ss-handled li::before{content:"\\2713";position:absolute;left:0;top:0;color:#2f8f5b;font-weight:800}
 .ss-counter{display:flex;justify-content:space-between;gap:8px;padding:8px 14px;background:var(--ss-ink);color:var(--ss-cream);font-size:13px;font-variant-numeric:tabular-nums}
 .ss-counter b{color:var(--ss-mustard)}
 .ss-log-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
@@ -153,10 +136,6 @@ export const PLAYER_CSS = `
 .ss-burst i{position:absolute;width:7px;height:7px;border-radius:2px;background:var(--ss-mustard);transform:rotate(calc(var(--i) * 25.7deg)) translateY(0);animation:ss-pop 1.1s ease-out forwards;opacity:0}
 .ss-burst i:nth-child(3n){background:var(--ss-tomato)}.ss-burst i:nth-child(3n+1){background:var(--ss-aqua)}
 .ss-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-tomato);text-align:center}
-.ss-close-tight{padding:14px 16px 12px}
-.ss-close-tight h3{font-size:clamp(16px,2.6cqi,20px)!important;margin:2px 0 8px!important}
-.ss-close-tight .ss-handled li{font-size:12.5px;line-height:1.35}
-.ss-close-tight .ss-split{display:none}
 .ss-close h3{font-family:Fraunces,Georgia,serif;font-size:24px;margin:4px 0 14px;text-align:center}
 .ss-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
 .ss-split>div{background:#fff;border:1px solid #eadcbc;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:1px}
@@ -282,13 +261,12 @@ export const PLAYER_CSS = `
 .ss-starttitle{font-family:Fraunces,Georgia,serif;font-size:20px;line-height:1.25}
 .ss-startcard p{margin:0;color:#4a4238;font-size:14px}
 .ss-startcard small{color:#7a6d5a;font-size:12px}
-.ss-sim .ss-startbtn{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0;color:inherit;font-weight:700;font-size:16px}
-.ss-startplay{width:76px;height:76px;border-radius:50%;background:var(--ss-tomato);color:#fff;display:grid;place-items:center;font-size:30px;padding-left:6px;box-sizing:border-box;box-shadow:0 8px 24px rgba(219,55,31,.35);animation:ss-pulse 1.6s infinite}
+.ss-sim .ss-startbtn{margin-top:6px;border:0;border-radius:999px;background:var(--ss-tomato);color:#fff;font-weight:700;font-size:16px;padding:12px 26px;box-shadow:0 6px 18px rgba(219,55,31,.3)}
 .ss-sim .ss-startbtn:focus-visible{outline:3px solid var(--ss-petrol);outline-offset:2px}
 .ss-startauto{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
 .ss-term .ss-start{background:rgba(26,25,24,.86)}
 .ss-term .ss-startcard p{color:#cfc8bd}.ss-term .ss-startcard small{color:#8f887d}.ss-term .ss-starttitle,.ss-term .ss-startauto{color:#e6e1d9}
-.ss-term .ss-startplay{background:#d97757}.ss-term .ss-startbtn{color:#e6e1d9}
+.ss-term .ss-startbtn{background:#d97757}
 .ss-devhint{font-size:inherit;opacity:.85}
 /* Toasts float over the top of the demo: no layout shift, gone after a few seconds. */
 .ss-toast{position:absolute;z-index:60;left:50%;top:40px;transform:translateX(-50%);width:max-content;max-width:min(92%,420px);pointer-events:none}

package/src/player.mjs

@@ -41,7 +41,7 @@ function Reply({ text }) {
 // the composer, one question at a time, a tab per question. The viewer picks; the pick is
 // answered with what the person really chose, then the next question, then the replay goes
 // on along the real path (a recording has one path, so no branch is ever invented).
-export function Board({ ask, person, auto = false, onPick, images, onToast, speed = 1 }) {
+export function Board({ ask, person, auto = false, onPick, images, onToast }) {
   const [idx, setIdx] = useState(0);
   const [picks, setPicks] = useState({});
   const q = ask.questions[idx];
@@ -53,12 +53,12 @@ export function Board({ ask, person, auto = false, onPick, images, onToast, spee
     if (!mine) return undefined;
     const id = setTimeout(() => {
       if (idx + 1 < ask.questions.length) setIdx(idx + 1); else onPick?.(picks);
-    }, Math.round(1300 / speed));
+    }, 1300);
     return () => clearTimeout(id);
   }, [mine, idx]);
   useEffect(() => {
     if (!auto || mine) return undefined;
-    const id = setTimeout(() => setPicks((p) => ({ ...p, [idx]: real })), Math.round(1200 / speed));
+    const id = setTimeout(() => setPicks((p) => ({ ...p, [idx]: real })), 1200);
     return () => clearTimeout(id);
   }, [auto, idx, mine]);
 
@@ -124,23 +124,7 @@ function StepLine({ step }) {
     h('span', { className: 'ss-dur' }, step.stalled ? 'timed out' : duration(step.ms)));
 }
 
-// One moment per screen (Wilson, 2026-10-11: "the scroll down ... doesn't give me the TL;DR"):
-// the person's line small, where Freeda landed large, and what is handled so far, with no log
-// to scroll. Everything shown is the recording's own text; nothing is summarised for it.
-export function Moment({ plan, turn, log, made, person, phase }) {
-  const reply = [...log].reverse().find((l) => l.kind === 'reply' && l.key.startsWith(`${turn}-`));
-  const done = made.filter((a) => a.kind === 'other');
-  const here = done.find((a) => a.turnIndex === turn) ?? null;
-  return h('div', { className: 'ss-moment', key: turn },
-    h('div', { className: 'ss-mcount' }, `${turn + 1} of ${plan.length}`),
-    h('p', { className: 'ss-mcmd' }, h('b', null, `${person}: `), plain(plan[turn].command.text).slice(0, 160)),
-    reply ? h('p', { className: 'ss-mbig', key: reply.key }, plain(reply.reply.text))
-      : h('p', { className: 'ss-mwork' }, phase === 'working' ? 'Freeda is on it\u2026' : ''),
-    done.length > 0 && h('ul', { className: 'ss-mticks' }, done.map((a) => h('li', { key: a.id, className: a.id === here?.id ? 'ss-new' : '' }, a.title))));
-}
-
-function ArtifactCard({ a, tick = false }) {
-  if (tick) return h('div', { className: 'ss-artifact ss-tick' }, h('span', { className: 'ss-check', 'aria-hidden': true }, '\u2713'), h('span', { className: 'ss-atitle' }, a.title));
+function ArtifactCard({ a }) {
   return h('div', { className: 'ss-artifact' },
     h('span', { className: `ss-kind ss-${a.kind}` }, a.kind === 'link' ? 'page' : a.kind === 'other' ? 'done' : 'file'),
     h('span', { className: 'ss-atitle' }, a.title));
@@ -191,21 +175,16 @@ export function autoSendReady({ auto, phase, started }) {
 // measured. Freeda's work against the person's own attention, the things made, the edge
 // points the counter printed, and any chore the workflow catalog says is now off their hands.
 // Never "time saved": nobody measured the version where they did it by hand.
-export function CloseCard({ sc, person, onReplay, onBack, highlights = false }) {
+export function CloseCard({ sc, person, onReplay, onBack }) {
   const t = summarize(sc);
   const close = sc.close ?? {};
   const edge = close.edge;
   const layers = edge ? ['fueled', 'encoded', 'built', 'retired'].filter((k) => edge.layers?.[k]) : [];
   return h('div', { className: 'ss-close-wrap' },
-    h('div', { className: `ss-close${highlights ? ' ss-close-tight' : ''}`, role: 'dialog', 'aria-label': 'Session closed' },
+    h('div', { className: 'ss-close', role: 'dialog', 'aria-label': 'Session closed' },
       h('div', { className: 'ss-burst', 'aria-hidden': true }, Array.from({ length: 14 }, (_, i) => h('i', { key: i, style: { '--i': i } }))),
       h('span', { className: 'ss-kicker' }, 'Session closed'),
       h('h3', null, close.outcome ?? sc.title),
-      // What the agent carried, in the session's own facts (close.handled): the weight that came
-      // off the person, never a time-saved figure nobody measured.
-      close.handled?.length > 0 && h('div', { className: 'ss-handled' },
-        h('small', null, `What Freeda handled for ${person === 'You' ? 'you' : person}`),
-        h('ul', null, close.handled.map((x, i) => h('li', { key: i, style: { '--i': i } }, x)))),
       h('div', { className: 'ss-split' },
         h('div', null, h('b', null, duration(t.agentMs)), h('small', null, 'of work by Freeda'), h('small', null, plural(t.steps, 'step'))),
         h('div', null, h('b', null, plural(t.commands, 'command')), h('small', null, `from ${person === 'You' ? 'you' : person}`),
@@ -214,7 +193,7 @@ export function CloseCard({ sc, person, onReplay, onBack, highlights = false })
       edge && edge.total > 0 && h('div', { className: 'ss-edge' },
         h('b', null, plural(edge.total, 'edge point')), ' earned',
         h('span', { className: 'ss-layers' }, layers.map((k) => h('span', { key: k }, `${edge.layers[k]} ${k}`)))),
-      !highlights && sc.artifacts?.length > 0 && h('div', { className: 'ss-close-made' },
+      sc.artifacts?.length > 0 && h('div', { className: 'ss-close-made' },
         h('small', null, `${plural(sc.artifacts.length, 'thing')} made`),
         h('ul', null, sc.artifacts.slice(0, 6).map((a) => h('li', { key: a.id }, a.title)))),
       t.idleMs > 60000 && h('p', { className: 'ss-idle' }, `${duration(t.idleMs)} of idle time (hangs, timeouts, nobody at the keyboard) is not counted.`),
@@ -223,10 +202,7 @@ export function CloseCard({ sc, person, onReplay, onBack, highlights = false })
         onBack && h('button', { className: 'ss-chip ss-ghost', onClick: onBack }, 'Step into someone else'))));
 }
 
-// speed shortens the work between beats; highlights shows each turn's landing answer (first
-// paragraph) with reading time, and ticks off what got handled (Wilson, 2026-10-11: "make it 40
-// seconds", "I want the user to realize how much work, and how relieving it is").
-export function SimulatorPlayer({ scenario, scenarios, scenarioId, height, autoplay = true, artifacts = true, timeline = true, maxSteps = 5, device, viewer, speed = 1, highlights = false, moments = false, start: startMode }) {
+export function SimulatorPlayer({ scenario, scenarios, scenarioId, height, autoplay = true, artifacts = true, timeline = true, maxSteps = 5, device, viewer, start: startMode }) {
   const list = scenarios ?? (scenario ? [scenario] : []);
   // An embed may name one scenario from a list and skip the picker.
   const start = scenarioId != null ? Math.max(0, list.findIndex((s) => s.id === scenarioId)) : list.length > 1 ? null : 0;
@@ -241,7 +217,7 @@ export function SimulatorPlayer({ scenario, scenarios, scenarioId, height, autop
   const sc = pick == null ? null : list[pick];
   return h('div', { className: 'ss-sim', style: height ? { '--ss-height': height } : undefined },
     h('style', null, PLAYER_CSS),
-    sc ? h(Run, { key: sc.id, sc, autoplay, start: startMode, artifacts, timeline, maxSteps, speed, highlights, moments, mode, setMode, viewer: viewer ?? seen, onBack: list.length > 1 && scenarioId == null ? () => setPick(null) : null })
+    sc ? h(Run, { key: sc.id, sc, autoplay, start: startMode, artifacts, timeline, maxSteps, mode, setMode, viewer: viewer ?? seen, onBack: list.length > 1 && scenarioId == null ? () => setPick(null) : null })
       : h(Picker, { scenarios: list, onPick: setPick }));
 }
 
@@ -308,9 +284,9 @@ function TitleBar() {
     h('span', { className: 'ss-wtitle' }, 'Claude Code'));
 }
 
-function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps, speed = 1, highlights = false, moments = false, onBack, mode = 'auto', setMode, viewer = 'desktop' }) {
+function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps, onBack, mode = 'auto', setMode, viewer = 'desktop' }) {
   const { frame, label } = resolveDevice({ mode, viewer, device: sc.device });
-  const plan = useMemo(() => script(sc, { maxSteps, speed, leadOnly: highlights }), [sc, maxSteps, speed, highlights]);
+  const plan = useMemo(() => script(sc, { maxSteps }), [sc, maxSteps]);
   const totals = useMemo(() => summarize(sc), [sc]);
   const person = sc.persona?.name ?? 'You';
   const [turn, setTurn] = useState(0);
@@ -357,9 +333,9 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
       if (e.kind === 'step' && e.step.ask) resumeRef.current = (picks) => {
         setAnswers((a) => ({ ...a, [key]: picks }));
         setWaiting(null);
-        playFrom(ti, i + 1, Math.round(500 / speed));
+        playFrom(ti, i + 1, 500);
       };
-      if (e.kind === 'artifact') setMade((m) => [...m, { ...e.artifact, turnIndex: ti }]);
+      if (e.kind === 'artifact') setMade((m) => [...m, e.artifact]);
       if (e.kind === 'step' && !e.step.ask) setWork((w) => ({ ms: w.ms + e.step.ms, steps: w.steps + (e.step.count ?? 1) }));
       if (e.kind === 'step' && e.step.ask) { setWaiting(key); return; }
       const next = p.events[i + 1];
@@ -382,12 +358,12 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
   const sendNow = () => {
     setLog((l) => [...l, { kind: 'command', key: `c${turn}`, command: plan[turn].command }]);
     setPhase('working');
-    playFrom(turn, 0, Math.round(450 / speed));
+    playFrom(turn, 0, 450);
   };
 
   useEffect(() => {
     if (!autoSendReady({ auto, phase, started })) return undefined;
-    const id = setTimeout(send, Math.round(1400 / speed));
+    const id = setTimeout(send, 1400);
     return () => clearTimeout(id);
   });
 
@@ -398,10 +374,8 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
   };
 
   const next = plan[turn]?.command;
-  // A highlights cut shows the load coming off: only what got handled, ticked as it lands.
-  const shown = highlights ? made.filter((a) => a.kind === 'other') : made;
   const artifactList = h('div', { className: 'ss-artifact-list' },
-    shown.length ? shown.map((a) => h(ArtifactCard, { key: a.id, a, tick: highlights })) : h('p', { className: 'ss-empty' }, highlights ? 'What gets handled will tick off here.' : 'What Freeda makes will collect here.'));
+    made.length ? made.map((a) => h(ArtifactCard, { key: a.id, a })) : h('p', { className: 'ss-empty' }, 'What Freeda makes will collect here.'));
 
   const phone = h('div', { className: 'ss-phone' },
       frame === 'iphone' && h(StatusBar),
@@ -414,7 +388,6 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
         h('span', null, work.ms ? [h('b', { key: 'd' }, duration(work.ms)), ` of work done for ${person}`] : 'No work yet'),
         h('span', null, `${work.steps} of ${totals.steps} steps`)),
       h('div', { className: 'ss-log-wrap' },
-      moments && log.length > 0 ? h(Moment, { plan, turn, log, made, person, phase }) :
       h('div', { className: 'ss-log', ref: logRef },
         log.length === 0 && h('p', { className: 'ss-intro' }, `You are ${person}. Send the first command and watch what gets done.`),
         log.map((item) => {
@@ -426,8 +399,7 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
           }
           if (item.kind === 'step') return h(Step, { key: item.key, step: item.step, person, live: waiting === item.key, picks: answers[item.key] });
           if (item.kind === 'reply') return h(Reply, { key: item.key, text: item.reply.text });
-          if (highlights && item.artifact.kind !== 'other') return null;
-          return h('div', { key: item.key, className: 'ss-made' }, h('span', null, highlights ? '\u2713 handled' : 'made'), ' ', item.artifact.title);
+          return h('div', { key: item.key, className: 'ss-made' }, h('span', null, 'made'), ' ', item.artifact.title);
         }),
         phase === 'working' && !waiting && h('div', { className: 'ss-typing' }, h('i'), h('i'), h('i'))),
       showArtifacts && !waiting && h('button', { className: 'ss-tray-handle', onClick: () => setTray(!tray) }, `${made.length} made`, h('span', null, tray ? '⌄' : '⌃')),
@@ -436,12 +408,10 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
         h('div', { className: 'ss-startcard' },
           h('b', { className: 'ss-starttitle' }, sc.title),
           h('p', null, startLine(sc, person)),
-          // One start (Wilson's big pulsing Play, Gary's Start demo card): the round Play is the
-          // button, "Start demo" its words, Autoplay the choice beside it. Nothing else plays.
-          h('button', { type: 'button', className: 'ss-startbtn', onClick: () => setStarted(true) }, h('span', { className: 'ss-startplay', 'aria-hidden': true }, '\u25B6'), 'Start demo'),
+          h('button', { type: 'button', className: 'ss-startbtn', onClick: () => setStarted(true) }, 'Start demo'),
           h('label', { className: 'ss-startauto' }, h('input', { type: 'checkbox', checked: auto, onChange: (e) => toggleAuto(e.target.checked) }), 'Autoplay'),
           h('small', null, auto ? 'It plays itself. Untick Autoplay to play the human.' : `You play ${person}: tap to send each message and make each call.`))),
-      waiting ? h(Board, { speed, key: waiting, ask: log.find((l) => l.key === waiting).step.ask, images: log.find((l) => l.key === waiting).step.images, person, auto, onToast: auto ? undefined : showToast, onPick: (picks) => resumeRef.current?.(picks) }) :
+      waiting ? h(Board, { key: waiting, ask: log.find((l) => l.key === waiting).step.ask, images: log.find((l) => l.key === waiting).step.images, person, auto, onToast: auto ? undefined : showToast, onPick: (picks) => resumeRef.current?.(picks) }) :
       h('footer', { className: 'ss-composer' },
         phase === 'done'
           ? h('div', { className: 'ss-end' },
@@ -450,14 +420,12 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
           : h(Fragment, null,
             h('button', { className: 'ss-chip', disabled: phase !== 'ready', onClick: send },
               h('small', null, phase === 'working' ? 'Freeda is working…' : phase === 'saying' ? 'listening…' : auto ? 'sending on autoplay…' : `you are ${person}: tap to send, or tap the mic`),
-              // In moments the line already sits on the moment's screen; repeating it here took the room
-              // the answer needs in a short MacBook window.
-              phase === 'saying' ? spoken : moments ? null : next && plain(next.text).slice(0, 140)),
+              phase === 'saying' ? spoken : next && plain(next.text).slice(0, 140)),
             h('button', { className: 'ss-send', disabled: phase !== 'ready', 'aria-label': 'Send', onClick: send }, '\u2191'),
             h('button', {
               className: `ss-mic${phase === 'saying' ? ' ss-live' : ''}`, disabled: phase !== 'ready', 'aria-label': 'Say it out loud', onClick: say,
             }, '\u{1F3A4}'))));
-  const panel = showArtifacts && h('aside', { className: 'ss-panel' }, h('h3', null, `${highlights ? 'Handled' : 'Made'} for ${person}`, h('span', null, shown.length)), artifactList);
+  const panel = showArtifacts && h('aside', { className: 'ss-panel' }, h('h3', null, `Made for ${person}`, h('span', null, made.length)), artifactList);
   const bar = h('div', { className: 'ss-devicebar' },
     label ? h('span', { className: frame === 'macbook-compact' ? 'ss-simpill' : 'ss-simlabel' }, label) : h('span'),
     setMode && h(DeviceSwitch, { mode, setMode, hint: autoHint({ viewer, device: sc.device }), onToast: (m) => showToast(deviceToast({ mode: m, viewer, device: sc.device })) }));
@@ -489,5 +457,5 @@ function Run({ sc, autoplay, start, artifacts: showArtifacts, timeline, maxSteps
       device,
       inGrid && panel,
       timeline && h(Timeline, { sc, turnIndex: turn, person }),
-      phase === 'done' && !closed && h(CloseCard, { sc, person, onReplay: restart, onBack, highlights })));
+      phase === 'done' && !closed && h(CloseCard, { sc, person, onReplay: restart, onBack })));
 }

package/src/serve.mjs

@@ -31,7 +31,7 @@ import { SimulatorPlayer } from './src/player.mjs';
 const scenarios = await (await fetch('./scenarios.json')).json();
 const q = new URLSearchParams(location.search);
 createRoot(document.getElementById('root')).render(h(SimulatorPlayer, {
-  scenarios, scenarioId: q.get('scenario') ?? undefined, height: q.get('height') ?? undefined, autoplay: q.get('autoplay') !== 'off', artifacts: q.get('artifacts') !== 'off', timeline: q.get('timeline') !== 'off', device: q.get('device') ?? undefined, start: q.get('start') ?? undefined, speed: Number(q.get('speed')) || undefined, highlights: q.has('highlights'), moments: q.has('moments'), maxSteps: Number(q.get('steps')) || undefined,
+  scenarios, scenarioId: q.get('scenario') ?? undefined, height: q.get('height') ?? undefined, autoplay: q.get('autoplay') !== 'off', artifacts: q.get('artifacts') !== 'off', timeline: q.get('timeline') !== 'off', device: q.get('device') ?? undefined, start: q.get('start') ?? undefined,
 }));
 </script></body></html>`;
 }