@supersuit/session-player 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.6.0 (2026-10-11)
+
+- **Transparent by default** (Gary, 2026-10-11: "render with NO background colour ... so it sits on any site"). Nothing is painted outside the device frame; the frame and the screen keep their own backgrounds. A host that wants one passes `background` (prop or tag attribute) or `?bg=` on the embed URL: any CSS colour, or `theme` for the player's cream. A value that is not a colour is ignored.
+- **Embed it anywhere with one tag** (Gary: "make it easier to embed in any website"): `<script src=".../simulator/embed.js" async></script>` then `<session-player scenario="...">`. A plain script (`src/loader.js`, exported as `@supersuit/session-player/loader.js`, served at `/embed.js` by `session-player serve`) that turns each tag into an iframe of the embed page sized to its content. Defaults: Auto device, Autoplay on, waits for Start.
+- In an iframe the player posts its height (`session-player:height`) and the end of a session (`session-player:done`) to the host page; the loader uses both, and fires `session-player:done` on the iframe so a host can offer the next case study.
+- The README opens with both embed forms.
+
+## 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

@@ -4,6 +4,26 @@ Plays recorded agent sessions (case studies, and the coming Helm demo): step int
 
 Renamed from `@supersuit/simulator` in 0.4.0 (2026-10-11): it plays recorded sessions, and case studies and the coming Helm demo are content it plays. To move, swap the package name in your imports; the exports, the scenario format (`supersuit-simulator/1`), `SimulatorPlayer` and `<supersuit-simulator>` are unchanged, and the CLI answers to both `session-player` and the old `simulator`.
 
+## Embed it in any website
+
+One tag, any page, any framework or none. Paste this where the case study should appear:
+
+```html
+<script src="https://continentalworks.ai/simulator/embed.js" async></script>
+<session-player scenario="phone-rescue"></session-player>
+```
+
+The player sizes itself to its content (no fixed height), is transparent around the device so it sits on your page's own background, picks the device for the viewer (Auto), plays on Autoplay, and waits for the viewer to press Start. Optional attributes: `device` (`auto`, `iphone`, `macbook`), `autoplay="off"` (the viewer plays the person), `start="auto"` (start without the Start card), `background` (a CSS colour, or `theme` for the player's cream), `artifacts="off"`, `timeline="off"`, `height` (the device's height, e.g. `640px`), `title`.
+
+No scripts allowed? Use the iframe on its own, with a fixed height:
+
+```html
+<iframe src="https://continentalworks.ai/simulator/embed?scenario=phone-rescue" title="Case study"
+        style="width:100%;height:860px;border:0;background:transparent" loading="lazy"></iframe>
+```
+
+The same query switches work on the URL (`device`, `autoplay=off`, `start=auto`, `bg`, `artifacts=off`, `timeline=off`, `height`). Inside an iframe the player posts `{ type: 'session-player:height', height }` to its parent whenever its height changes, and `{ type: 'session-player:done', scenario }` when a session ends, so the script above (or your own listener) can size the frame and offer what comes next. Any host serving the player can serve the loader: it is `src/loader.js` (export `@supersuit/session-player/loader.js`), and `session-player serve` serves it at `/embed.js`.
+
 This package holds the **scenario format**, the **converter** that drafts a scenario from a Claude Code session transcript, and the **player**, a React component that plays scenarios on a simulated phone.
 
 ## Install
@@ -70,10 +90,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.6.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": {
@@ -11,7 +11,8 @@
     ".": "./src/index.mjs",
     "./player": "./src/player.mjs",
     "./embed": "./src/embed.mjs",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./loader.js": "./src/loader.js"
   },
   "files": [
     "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,8 @@ 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,
+    // 0.6.0: transparent unless the host names a colour or 'theme'.
+    background: a.background || a.bg || undefined,
   };
 }
 

package/src/loader.js

@@ -0,0 +1,72 @@
+// The one-tag embed (0.6.0, Gary, 2026-10-11: "make it easier to embed in any website").
+//
+//   <script src="https://continentalworks.ai/simulator/embed.js" async></script>
+//   <session-player scenario="phone-rescue"></session-player>
+//
+// A plain script with no imports and no React: it works on any page, in any framework or none.
+// Each <session-player> becomes an iframe of the embed page that served this script, sized to the
+// player's content (the player posts its height; no fixed 720px), transparent around the device.
+// Defaults: Auto device, Autoplay on, waits for Start. Attributes, all optional: scenario, device
+// (auto|iphone|macbook), autoplay ("off"), start ("auto"), background or bg (a CSS colour or
+// "theme"), artifacts ("off"), timeline ("off"), height (the device's height, e.g. "640px"),
+// title, and src (another embed page). A plain <iframe> of the embed page on the same page is
+// resized too. Each iframe also fires `session-player:done` (bubbling) when its session ends.
+(function () {
+  'use strict';
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  if (window.__sessionPlayerLoader) return;
+  window.__sessionPlayerLoader = true;
+
+  var me = document.currentScript;
+  var base = (me && me.getAttribute('data-embed')) || (me && me.src ? new URL('embed', me.src).href : '/simulator/embed');
+  var PASS = { scenario: 'scenario', device: 'device', autoplay: 'autoplay', start: 'start', background: 'bg', bg: 'bg', artifacts: 'artifacts', timeline: 'timeline' };
+
+  // The device's height, from the HOST's window: inside the iframe 100svh would be the iframe's
+  // own height, which this script sets from the content, so it would chase itself.
+  function deviceHeight() {
+    var v = window.innerHeight || 800;
+    return Math.max(480, Math.min(760, v - 120));
+  }
+
+  function srcFor(el) {
+    var u = new URL(el.getAttribute('src') || base, location.href);
+    for (var k in PASS) {
+      var v = el.getAttribute(k);
+      if (v != null) u.searchParams.set(PASS[k], v);
+    }
+    if (!u.searchParams.has('height')) u.searchParams.set('height', el.getAttribute('height') || deviceHeight() + 'px');
+    return u.href;
+  }
+
+  function mount(el) {
+    if (el.__sessionPlayerFrame) return;
+    var f = document.createElement('iframe');
+    f.src = srcFor(el);
+    f.title = el.getAttribute('title') || 'Case study';
+    f.setAttribute('loading', 'lazy');
+    f.setAttribute('allow', 'clipboard-write');
+    f.setAttribute('allowtransparency', 'true');
+    // color-scheme normal keeps the frame transparent on a dark-mode host page.
+    f.style.cssText = 'display:block;width:100%;border:0;background:transparent;color-scheme:normal;height:' + (deviceHeight() + 90) + 'px';
+    el.style.display = 'block';
+    el.appendChild(f);
+    el.__sessionPlayerFrame = f;
+  }
+
+  window.addEventListener('message', function (e) {
+    var d = e.data;
+    if (!d || typeof d !== 'object' || typeof d.type !== 'string' || d.type.indexOf('session-player:') !== 0) return;
+    var frames = document.getElementsByTagName('iframe');
+    for (var i = 0; i < frames.length; i++) {
+      if (frames[i].contentWindow !== e.source) continue;
+      if (d.type === 'session-player:height' && d.height > 0) frames[i].style.height = Math.ceil(d.height) + 'px';
+      frames[i].dispatchEvent(new CustomEvent(d.type, { detail: d, bubbles: true }));
+    }
+  });
+
+  if (window.customElements && !window.customElements.get('session-player')) {
+    window.customElements.define('session-player', class extends HTMLElement {
+      connectedCallback() { mount(this); }
+    });
+  }
+})();

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,38 @@ 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 }) {
+// The space around the device is transparent unless a host asks for a colour (0.6.0, Gary,
+// 2026-10-11: "render with NO background colour ... so it sits on any site"). 'theme' is the
+// player's own cream; anything else is a CSS colour. The device frame and the screen keep theirs.
+export function backgroundFor(bg) {
+  if (bg == null) return undefined;
+  const v = String(bg).trim();
+  if (!v || v === 'transparent' || v === 'none') return undefined;
+  if (v === 'theme') return 'var(--ss-cream)';
+  // A colour, never a declaration: no semicolons, braces or url().
+  return /^[#a-zA-Z0-9(),.%\s-]+$/.test(v) && !/url\(/i.test(v) ? v : undefined;
+}
+
+// Inside an iframe, tell the host page how tall the player is and when a session ends, so an
+// embed can size itself to its content (the loader does) and offer what comes next.
+export const MESSAGE = { height: 'session-player:height', done: 'session-player:done' };
+export function reportToHost(el, win = typeof window === 'undefined' ? undefined : window, RO = typeof ResizeObserver === 'undefined' ? undefined : ResizeObserver) {
+  if (!el || !win || !win.parent || win.parent === win || !RO) return () => {};
+  let last = 0;
+  const post = () => {
+    const height = Math.ceil(el.getBoundingClientRect().height);
+    if (height > 0 && height !== last) { last = height; win.parent.postMessage({ type: MESSAGE.height, height }, '*'); }
+  };
+  const ro = new RO(post);
+  ro.observe(el);
+  post();
+  return () => ro.disconnect();
+}
+const tellHost = (msg) => { if (typeof window !== 'undefined' && window.parent && window.parent !== window) window.parent.postMessage(msg, '*'); };
+
+export function SimulatorPlayer({ scenario, scenarios, scenarioId, height, autoplay = true, artifacts = true, timeline = true, maxSteps = 5, device, viewer, start: startMode, background }) {
+  const root = useRef(null);
+  useEffect(() => reportToHost(root.current), []);
   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;
@@ -239,9 +246,11 @@ export function SimulatorPlayer({ scenario, scenarios, scenarioId, height, autop
   const [seen, setSeen] = useState(() => viewer ?? readViewer());
   useEffect(() => (viewer ? undefined : watchViewer(setSeen)), [viewer]);
   const sc = pick == null ? null : list[pick];
-  return h('div', { className: 'ss-sim', style: height ? { '--ss-height': height } : undefined },
+  const bg = backgroundFor(background);
+  const style = height || bg ? { ...(height ? { '--ss-height': height } : {}), ...(bg ? { background: bg } : {}) } : undefined;
+  return h('div', { className: 'ss-sim', ref: root, style },
     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,13 +317,14 @@ 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);
   const [phase, setPhase] = useState('ready'); // ready | saying | working | done
+  useEffect(() => { if (phase === 'done') tellHost({ type: MESSAGE.done, scenario: sc.id }); }, [phase, sc.id]);
   const [log, setLog] = useState([]);
   const [made, setMade] = useState([]);
   const [work, setWork] = useState({ ms: 0, steps: 0 });
@@ -357,9 +367,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 +392,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 +408,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 +422,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 +433,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 +442,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 +454,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 +491,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, background: q.get('bg') ?? undefined,
 }));
 </script></body></html>`;
 }
@@ -43,6 +43,8 @@ export function createServer({ scenarios, assetsRoot }) {
     const send = (code, type, body) => { res.writeHead(code, { 'content-type': type, 'cache-control': 'no-store' }); res.end(body); };
     if (path === '/' || path === '/index.html') return send(200, 'text/html; charset=utf-8', page({ title: scenarios.length === 1 ? scenarios[0].title : undefined }));
     if (path === '/embed') return send(200, 'text/html; charset=utf-8', page({ embed: true }));
+    // The one-tag embed: <script src=".../embed.js"></script><session-player scenario="...">.
+    if (path === '/embed.js') return send(200, 'text/javascript; charset=utf-8', readFileSync(join(SRC, 'loader.js')));
     if (path === '/scenarios.json') return send(200, 'application/json', JSON.stringify(scenarios));
     const a = assetsRoot && path.match(/^\/assets\/([\w-]+)\/([\w.-]+\.(?:png|jpe?g|webp|gif))$/i);
     if (a) {