@simon-says-build/demo-player 0.8.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "description": "SimonSays mobile demo player: walks a preview's viewer through a job's change, inside the app. Renders nothing unless the bundle carries a demo.",
   "repository": {
     "type": "git",

package/src/DemoHost.js

@@ -15,7 +15,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions } from 'react-native';
 import { pageName } from './page-name.js';
-import { cardBox, currentDemo, demoConfig, findTarget, handlerFor, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint, stepTitle } from './core.js';
+import { OVERLAY_ID, cardBox, currentDemo, demoConfig, findTarget, handlerFor, introBody, introOf, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint, rescueNote, screenCandidates, stepTitle, targetOfKey } from './core.js';
 import { demoApi, tourOf } from './api.js';
 import { signInFirst, openInApp } from './signin.js';
 import { runEvent, fillStep } from './events.js';
@@ -76,15 +76,18 @@ function Player({ config, router, insets, onClose, children }) {
   const [changes, setChanges] = useState([]);     // what the last card reviews (reviewChangesOf)
   const [release, setRelease] = useState(null);   // a release's demo ends on releasing it (releaseOf)
   const [reviewing, setReviewing] = useState(false);
+  const [intro, setIntro] = useState(null);       // the first screen: who asked, what, signed in as (introOf)
   const [signIn, setSignIn] = useState(null);     // a `signin` step: null while it runs, else { ok, error }
   const [event, setEvent] = useState(null);       // an `event` step: null while it runs, else { ok, error }
   const [vars, setVars] = useState({});           // per person: what their events set up ({walkId} in later steps)
   const [flash, setFlash] = useState(null);       // "Now navigating to the walk page", said before a goto opens it
+  const [rescued, setRescued] = useState(null);   // { for: index, status: asking|moved|gone, target?, why? }
+  const asked = useRef(new Set());                // steps already rescued once (by index)
 
   useEffect(() => {
     let live = true;
     api.load()
-      .then((d) => { if (live) { setSteps(phoneSteps(tourOf(d, { here: !!config.here })).concat()); setChanges(reviewChangesOf(d)); setRelease(releaseOf(d)); } })
+      .then((d) => { if (live) { setSteps(phoneSteps(tourOf(d, { here: !!config.here })).concat()); setChanges(reviewChangesOf(d)); setRelease(releaseOf(d)); setIntro(introOf(d)); } })
       .catch((e) => { if (live) setError(e.message); });
     return () => { live = false; };
   }, [api]);
@@ -92,11 +95,34 @@ function Player({ config, router, insets, onClose, children }) {
   const step = useMemo(() => { const raw = steps?.[index] ?? null; return raw ? fillStep(raw, vars[raw.actorIndex]) : null; }, [steps, index, vars]);
 
 
+  // THE RESCUE (0.9.0, Michael 2026-11-01: "when the current UI differs
+  // substantially from the recorded one, maybe realtime AI should step in,
+  // instead of showing an error"): a step whose element never appears asks SSB
+  // once, with what IS on screen. It answers with one of those (renamed or
+  // moved: the step carries on there) or says what is different now, which the
+  // card says in SSB's words. The extension's rescue, on a phone.
+  const askRescue = useCallback(async (at, idx) => {
+    if (asked.current.has(idx) || at.stepIndex == null) return;
+    asked.current.add(idx);
+    setRescued({ for: idx, status: 'asking' });
+    try {
+      let r = await api.repair({ actorIndex: at.actorIndex, stepIndex: at.stepIndex, candidates: screenCandidates(fiberOf(rootRef.current)) });
+      for (let i = 0; r.status === 'pending' || r.status === 'running'; i++) {
+        if (i >= RESCUE_POLLS) throw new Error('no answer');
+        await new Promise((ok) => setTimeout(ok, 2500));
+        r = await api.repairStatus(r.id);
+      }
+      const target = r.pick != null ? targetOfKey(r.css) : null;
+      setRescued(target ? { for: idx, status: 'moved', target, why: r.why || '' } : { for: idx, status: 'gone', why: r.why || '' });
+    } catch { setRescued({ for: idx, status: 'gone', why: '' }); }
+  }, [api]);
+  const rescue = rescued?.for === index ? rescued : null;
+
   // Find and follow the step's element.
   useEffect(() => {
     setRect(null); setFound(null);
     if (!step || done) return undefined;
-    const target = step.target;
+    const target = rescue?.status === 'moved' ? rescue.target : step.target;
     if (!target) return undefined;
     if (target.point && !target.testId && !target.label && !target.text) {
       const p = scalePoint(target.point, screen);
@@ -114,12 +140,12 @@ function Player({ config, router, insets, onClose, children }) {
       if (!r && Date.now() - started > FIND_FOR_MS && target.point) {
         const p = scalePoint(target.point, screen);
         setRect({ left: p.x - 22, top: p.y - 22, width: 44, height: 44, right: p.x + 22, bottom: p.y + 22 });
-      }
+      } else if (!r && Date.now() - started > FIND_FOR_MS && !rescue) askRescue(step, index);
     };
     tick();
     const t = setInterval(tick, TRACK_EVERY_MS);
     return () => { live = false; clearInterval(t); };
-  }, [step, done, screen.width, screen.height]);
+  }, [step, done, screen.width, screen.height, rescue?.status, index]);
 
   const finish = useCallback(() => {
     setReviewing(false);
@@ -196,6 +222,12 @@ function Player({ config, router, insets, onClose, children }) {
   const overlay = (() => {
     if (error) return h(Card, { at: null, screen, insets, card, setCard, title: 'Demo', body: `The demo didn't load: ${error}` });
     if (!steps) return null;
+    if (intro && !tucked && !done) {
+      return h(Card, {
+        at: null, screen, insets, card, setCard, title: 'Guided Review', body: introBody(intro),
+        actions: [{ label: 'Hide', onPress: () => setTucked(true) }, { label: 'Start the review', onPress: () => setIntro(null), primary: true }],
+      });
+    }
     if (reviewing && !tucked) return h(Review, { api, changes, release, screen, insets, onBack: steps.length ? () => setReviewing(false) : null, onDone: finish, onHide: () => setTucked(true) });
     if (flash) return h(View, { pointerEvents: 'none', style: [s.flash, { top: insets.top + screen.height * 0.4 }], testID: 'ssb-demo-flash' },
       h(Text, { style: s.flashText, accessibilityLiveRegion: 'polite' }, flash));
@@ -228,7 +260,7 @@ function Player({ config, router, insets, onClose, children }) {
       rect ? h(View, { pointerEvents: 'none', style: [s.ring, { left: rect.left - 6, top: rect.top - 6, width: rect.width + 12, height: rect.height + 12 }] }) : null,
       h(Card, {
         at: rect, place: step.place, screen, insets, card, setCard,
-        title: stepTitle(step, index, steps.length), body: step.caption,
+        title: stepTitle(step, index, steps.length), body: rescueNote(step.caption, rescue),
         actions: [
           { label: 'Hide', onPress: () => setTucked(true) },
           index > 0 && steps[index - 1].kind !== 'signin' ? { label: 'Back', onPress: () => setIndex(index - 1) } : null,
@@ -240,7 +272,7 @@ function Player({ config, router, insets, onClose, children }) {
 
   return h(View, { ref: rootRef, style: s.root, collapsable: false },
     children,
-    h(View, { pointerEvents: 'box-none', style: StyleSheet.absoluteFill }, overlay));
+    h(View, { pointerEvents: 'box-none', style: StyleSheet.absoluteFill, testID: OVERLAY_ID }, overlay));
 }
 
 // The review card: every change of the demo, each approved here or discussed
@@ -323,6 +355,7 @@ function Card({ at, place, screen, insets, card, setCard, title, body, actions =
   }, h(Text, { style: [s.buttonText, a.primary && s.primaryText] }, a.label)))) : null);
 }
 
+const RESCUE_POLLS = 40;   // ~100 s for the daemon's fallback answer, as the extension waits
 const FLASH_MS = 1100;   // long enough to read "Now navigating to the walk page"
 
 const s = StyleSheet.create({

package/src/api.js

@@ -28,6 +28,11 @@ export function demoApi({ api, id, token }, fetchImpl = globalThis.fetch) {
     // A planned review (0.8.0): run a helper on the private copy, then read how it went.
     event: (actorIndex, helper, args) => call('/event', { method: 'POST', body: JSON.stringify({ actorIndex, helper, args }) }),
     eventStatus: (eventId) => call(`/event/${encodeURIComponent(eventId)}`),
+    // The rescue (0.9.0): a step whose element is not on screen asks where it
+    // went, with what IS on screen; the answer is an index into those, or why
+    // it is gone. The same route the extension calls.
+    repair: (body) => call('/repair', { method: 'POST', body: JSON.stringify(body) }),
+    repairStatus: (repairId) => call(`/repair/${encodeURIComponent(repairId)}`),
     discuss: (jobId, text) => call('/chat', { method: 'POST', body: JSON.stringify({ text, context: { about: jobId } }) }),
   };
 }
@@ -49,7 +54,9 @@ export function tourOf(demo, { here = false } = {}) {
     if (auto && hasState(a)) out.push({ kind: 'event', helper: '@state', caption: `Setting up ${a.label}'s part…`, actorIndex, intro: true });
     if (auto) out.push({ kind: 'signin', caption: `Signing you in as ${a.label}…`, fallback: ask, actorIndex, intro: true });
     else if (!here) out.push({ kind: 'say', caption: ask, actorIndex, intro: true });
-    for (const s of auto ? skipAuthSteps(steps) : steps) out.push({ ...s, actorIndex });
+    // stepIndex: the step's place in the person's recorded tour, which the
+    // rescue names (/repair reads actor.tour.steps[stepIndex]).
+    for (const s of auto ? skipAuthSteps(steps) : steps) out.push({ ...s, actorIndex, stepIndex: steps.indexOf(s) });
   }
   return out;
 }

package/src/core.js

@@ -10,7 +10,7 @@ import { bubbleBox } from './step-place.js';
 // What this player is, said when the app registers for "Ready to see"
 // (packages/ssb-overlay sends it; functions/in-app-notify.mjs clientOf). Kept
 // equal to package.json by test/core.test.mjs.
-export const PLAYER_VERSION = '0.8.2';
+export const PLAYER_VERSION = '0.10.0';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -30,12 +30,13 @@ const hiddenHost = (f) => {
   return flat?.display === 'none';
 };
 
-function* walk(root) {
-  // Iterative depth-first, skipping a display:none host and everything in it.
+function* walk(root, skip = null) {
+  // Iterative depth-first, skipping a display:none host and everything in it
+  // (and any host `skip` names, with everything in it).
   const stack = root ? [root] : [];
   while (stack.length) {
     const f = stack.pop();
-    if (f.tag === HOST && hiddenHost(f)) continue;
+    if (f.tag === HOST && (hiddenHost(f) || (skip && skip(f)))) continue;
     yield f;
     const kids = [];
     for (let c = f.child; c; c = c.sibling) kids.push(c);
@@ -86,6 +87,49 @@ export function findTarget(root, target) {
   return null;
 }
 
+// WHAT IS ON SCREEN, for the rescue (0.9.0, as the extension's candidates()):
+// every element a person could name, as the step's own target vocabulary. The
+// key is what comes back: the server's rescue answers with an INDEX into
+// these, never a target it wrote (functions/demo-rescue.mjs).
+const keyOf = (t) => (t.testId ? `testId:${t.testId}` : t.label ? `label:${t.label}` : `text:${t.text}`);
+/** The keyed target a rescue's answer names back ("label:Share" → { label: 'Share' }), or null. */
+export function targetOfKey(key) {
+  const m = /^(testId|label|text):(.+)$/s.exec(String(key || ''));
+  return m ? { [m[1]]: m[2] } : null;
+}
+// The card's words while a step is rescued: SSB's, never an error. Pure.
+export function rescueNote(caption, rescue) {
+  if (!rescue) return caption;
+  if (rescue.status === 'asking') return `${caption}\n\nSSB is looking for where this is now…`;
+  if (rescue.status === 'moved') return `${caption}\n\n${rescue.why ? `${rescue.why} ` : ''}SSB found it here.`;
+  return `${caption}\n\n${rescue.why || 'This screen has changed since the review was recorded.'} Tap Next to carry on, or look around yourself.`;
+}
+// The player's own layer: never a candidate (its card's words are not the app's).
+export const OVERLAY_ID = 'ssb-demo-overlay';
+/** Everything on screen a step could point at: [{ css: key, tag, name?, text? }], at most `max`. */
+export function screenCandidates(root, max = 60) {
+  const out = [];
+  const seen = new Set();
+  const add = (t, tag, name, text) => {
+    const css = keyOf(t);
+    if (seen.has(css) || out.length >= max) return;
+    seen.add(css);
+    out.push({ css, tag, ...(name ? { name: name.slice(0, 200) } : {}), ...(text ? { text: text.slice(0, 200) } : {}) });
+  };
+  for (const f of walk(root, (h) => h.memoizedProps?.testID === OVERLAY_ID)) {
+    if (out.length >= max) break;
+    const p = f.memoizedProps || {};
+    if (f.tag === HOST && (p.testID || p.accessibilityLabel)) {
+      const label = String(p.accessibilityLabel || p['aria-label'] || '').trim();
+      add(p.testID ? { testId: String(p.testID) } : { label }, p.accessibilityRole || (typeof p.onChangeText === 'function' ? 'input' : 'view'), label, '');
+    } else if (f.tag === TEXT) {
+      const text = textOf(f).trim();
+      if (text && text.length <= 80) add({ text }, 'text', '', text);
+    }
+  }
+  return out;
+}
+
 /** The nearest `name` handler at or above `f` (onPress, onChangeText), or null. */
 export function handlerFor(f, name) {
   for (let p = f; p; p = p.return) {
@@ -175,3 +219,30 @@ export function releaseOf(demo) {
   if (!sm || typeof sm.jobId !== 'string' || !sm.jobId) return null;
   return { jobId: sm.jobId, label: String(sm.label || 'Approve & release'), note: String(sm.note || '') };
 }
+
+// THE FIRST SCREEN OF A REVIEW (0.10.0, Michael 2026-11-03): a very brief
+// outline before anything plays — who asked for it, what they asked for, and
+// who the review signs in as — then a button to start. Pure.
+//   → { requestedBy: [string], asks: [{ title, asked }], as: [string] } | null
+const firstSentence = (t) => { const x = String(t || '').replace(/\s+/g, ' ').trim(); const m = /^(.{20,160}?[.!?])(\s|$)/.exec(x); return (m ? m[1] : x.slice(0, 140) + (x.length > 140 ? '…' : '')); };
+export function introOf(demo) {
+  const asks = [], by = new Set(), as = [];
+  for (const a of demo?.actors || []) {
+    if (a?.label && !as.includes(a.label)) as.push(String(a.label));
+    for (const sec of a.sections || []) for (const f of sec.features || []) {
+      if (f?.requestedBy) by.add(String(f.requestedBy).trim());
+      if (!asks.some((x) => x.title === f.title)) asks.push({ title: String(f.title || 'This change'), ...(f.tryIt?.steps ? { asked: firstSentence(f.tryIt.steps) } : {}) });
+    }
+  }
+  return asks.length || as.length ? { requestedBy: [...by], asks, as } : null;
+}
+export function introBody(intro) {
+  if (!intro) return '';
+  const lines = [];
+  if (intro.requestedBy.length) lines.push(`Requested by ${intro.requestedBy.join(', ')}`);
+  const shown = intro.asks.slice(0, 3);
+  for (const a of shown) lines.push(`• ${a.title}`);
+  if (intro.asks.length > shown.length) lines.push(`…and ${intro.asks.length - shown.length} more`);
+  if (intro.as.length) lines.push(`Signed in as ${intro.as.join(', then ')}`);
+  return lines.join('\n');
+}