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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.8.2",
+  "version": "0.9.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, 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';
@@ -80,6 +80,8 @@ function Player({ config, router, insets, onClose, children }) {
   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;
@@ -92,11 +94,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 +139,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);
@@ -228,7 +253,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 +265,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 +348,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.9.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) {