@simon-says-build/ssb-overlay 0.5.1 → 0.6.0

package/index.d.ts

@@ -41,5 +41,11 @@ export function SsbHost(props: {
   voice?: { Room: new (opts?: object) => any; startAudio?: () => Promise<void> | void; stopAudio?: () => Promise<void> | void };
   /** Keep the button off the home indicator / tab bar. Default {top: 60, bottom: 40}. */
   insets?: { top?: number; bottom?: number };
+  /**
+   * Which build this is: the origin the app's JS bundle was loaded from (a
+   * SimonSays preview's tunnel). Read off the bundle when omitted; Ready lists
+   * only what this build holds, and ▶ Demo plays it here.
+   */
+  bundle?: string;
   children?: ReactNode;
 }): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "The SSB button inside a native app SimonSays controls: screenshot the screen, mark it, and ask SSB for a change. Renders nothing for anyone SSB does not let in.",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "README.md"
   ],
   "peerDependencies": {
+    "@simon-says-build/demo-player": ">=0.1.0",
     "react": ">=18",
     "react-native": ">=0.76"
   },

package/src/SsbHost.js

@@ -21,11 +21,14 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator, Image, Keyboard, KeyboardAvoidingView, Linking, PanResponder, Platform, Pressable,
-  ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions,
+  NativeModules, ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions,
 } from 'react-native';
+// The app's demo player (a peer): ▶ Demo hands it the demo to play in this
+// build. An older player has no playDemo, and the button is not offered.
+import { playDemo } from '@simon-says-build/demo-player';
 import {
   FAB, addPoint, clampFab, demoBanner, fabHome, isDrag, describeHost, draftsOf, fieldTop, inAppApi, namedHosts, newReply, offerOf,
-  STATE_WORD, boxItem, workView, drawingBox, drawingMark, drawingPoint, itemRect, overlayConfig, pollEvery, SNAPSHOT_TOPIC, snapshotOf, talkLine, segmentsOf, sendBody, smallestAt, ssbLinkOf,
+  STATE_WORD, boxItem, bundleOriginOf, elsewhereLine, workView, drawingBox, drawingMark, drawingPoint, itemRect, overlayConfig, pollEvery, SNAPSHOT_TOPIC, snapshotOf, talkLine, segmentsOf, sendBody, smallestAt, ssbLinkOf,
 } from './core.js';
 
 const h = React.createElement;
@@ -65,11 +68,16 @@ const frames = (n = 2) => new Promise((resolve) => {
   step(n);
 });
 
-export function SsbHost({ appId, backend, api, getToken, sessionKey, route, capture, storage, pushToken, notifications, voice, insets, children }) {
+// Where this app's JS was loaded from: a preview's tunnel, or a file.
+const scriptURL = () => {
+  try { const sc = NativeModules.SourceCode; return sc?.getConstants?.()?.scriptURL ?? sc?.scriptURL ?? ''; } catch { return ''; }
+};
+
+export function SsbHost({ appId, backend, api, getToken, sessionKey, route, capture, storage, pushToken, notifications, voice, insets, bundle, children }) {
   const config = useMemo(() => overlayConfig({ appId, backend, api }), [appId, backend, api]);
   useSsbLinks(notifications);
   if (!config || typeof getToken !== 'function') return children ?? null;
-  return h(Host, { config, getToken, sessionKey, route, capture, storage, pushToken, voice, insets: { ...DEFAULT_INSETS, ...(insets || {}) } }, children);
+  return h(Host, { config, getToken, sessionKey, route, capture, storage, pushToken, voice, bundle, insets: { ...DEFAULT_INSETS, ...(insets || {}) } }, children);
 }
 
 // A tapped "Ready to see" notification (functions/in-app-notify.mjs) opens
@@ -85,7 +93,12 @@ function useSsbLinks(notifications) {
   }, [notifications]);
 }
 
-function Host({ config, getToken, sessionKey, route, capture, storage, pushToken, voice, insets, children }) {
+function Host({ config, getToken, sessionKey, route, capture, storage, pushToken, voice, insets, bundle, children }) {
+  // WHICH BUILD THIS IS (docs/IN-APP-SSB.md "Ready is this build"): Ready is
+  // only what this bundle holds. `bundle` overrides (the harness); else the
+  // origin the JS came from.
+  const here = useMemo(() => (bundle !== undefined ? String(bundle || '') : bundleOriginOf(scriptURL())), [bundle]);
+  const [elsewhere, setElsewhere] = useState([]);
   const screen = useWindowDimensions();
   const tokenRef = useRef(getToken);
   tokenRef.current = getToken;
@@ -181,7 +194,18 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const open = mode !== 'idle';
   useEffect(() => { if (open) load(); }, [open, chatId]);
   // The top of the panel: the app's work, asked when it opens and while it stays open.
-  const loadWork = useCallback(async () => { try { setWork((await ssb.work())?.inFlight || []); } catch { /* the last list stands */ } }, [ssb]);
+  const loadWork = useCallback(async () => {
+    try { const r = await ssb.work(here); setWork(r?.inFlight || []); setElsewhere(r?.readyElsewhere || []); } catch { /* the last list stands */ }
+  }, [ssb, here]);
+  // ▶ Demo: one demo of everything Ready in this build, played by this build.
+  const startDemo = useCallback(async () => {
+    setBusy(true); setError(null);
+    try {
+      const r = await ssb.demo(here);
+      if (!playDemo({ id: r.demoId, token: r.token, api: config.api, here: true })) throw new Error('the demo could not start');
+      Keyboard.dismiss(); setMode('idle');
+    } catch (e) { setError(e.message); } finally { setBusy(false); }
+  }, [ssb, here, config.api]);
   useEffect(() => {
     if (mode !== 'sheet' || !gate) return undefined;
     loadWork();
@@ -445,7 +469,8 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
           h(Pressable, { testID: 'ssb-draw-send', onPress: sendDrawing, disabled: !note.trim() || busy, accessibilityRole: 'button', accessibilityLabel: 'Send to SSB', style: [s.sendRound, (!note.trim() || busy) && s.disabled] }, h(Text, { style: s.sendRoundText }, '→'))) : null);
     }
     if (mode === 'sheet') return h(Panel, {
-      gate, chat, work, screen, insets, draft, setDraft, busy, error,
+      gate, chat, work, screen, insets, draft, setDraft, busy, error, elsewhere,
+      onDemo: typeof playDemo === 'function' ? startDemo : null,
       onSend: sendDraft, onDraw: () => { Keyboard.dismiss(); setMode('drawing'); }, onClose: close,
       canTalk: !!voice?.Room, talk, onTalk: startTalk, onEndTalk: endTalk, onMute: toggleMute,
       onNew: () => { rememberChat(null); setChat(null); }, onDecide: decide, onStartAll: startAll, onOpenLink: openLink,
@@ -458,14 +483,16 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     h(View, { ref: chromeRef, collapsable: false, pointerEvents: 'box-none', style: StyleSheet.absoluteFill }, chrome));
 }
 
-function Panel({ gate, chat, work, screen, insets, draft, setDraft, busy, error, onSend, onDraw, onClose, onNew, onDecide, onStartAll, onOpenLink, canTalk, talk, onTalk, onEndTalk, onMute }) {
+function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, setDraft, busy, error, onSend, onDraw, onClose, onNew, onDecide, onStartAll, onOpenLink, canTalk, talk, onTalk, onEndTalk, onMute }) {
   const scroll = useRef(null);
   const [open, setOpen] = useState(null);            // the draft whose detail is shown
   const { flying, waiting, sent } = workView({ inFlight: work, chat });
   const offer = offerOf(chat);
   const banner = demoBanner(chat);
   const msgs = chat?.messages || [];
-  const hasWork = flying.length || waiting.length || sent.length || banner;
+  const ready = flying.filter((x) => x.state === 'ready');
+  const away = elsewhereLine(elsewhere);
+  const hasWork = flying.length || waiting.length || sent.length || banner || away;
   const showMe = (x) => (x.state === 'ready' && banner?.url ? banner.url : null);
   return h(View, { style: [s.panel, { paddingTop: insets.top }], testID: 'ssb-panel' },
     h(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1 } },
@@ -482,7 +509,10 @@ function Panel({ gate, chat, work, screen, insets, draft, setDraft, busy, error,
           testID: 'ssb-demo', disabled: !banner.url, onPress: () => onOpenLink(banner.url),
           accessibilityRole: banner.url ? 'button' : 'text', style: [s.demo, banner.url && s.demoReady],
         }, h(Text, { style: [s.demoText, banner.url && { color: '#fff' }] }, banner.text), banner.url ? h(Text, { style: s.demoGo }, '▶ See it') : null) : null,
-        flying.length ? h(Text, { style: s.section, testID: 'ssb-section-flight' }, 'In flight') : null,
+        flying.length ? h(View, { style: s.sectionRow },
+          h(Text, { style: [s.section, { flex: 1 }], testID: 'ssb-section-flight' }, 'In flight'),
+          ready.length && onDemo ? h(Pressable, { testID: 'ssb-demo-ready', onPress: onDemo, disabled: busy, accessibilityRole: 'button', accessibilityLabel: `Demo what is ready in this build (${ready.length})`, style: [s.primary, s.small, busy && s.disabled] },
+            h(Text, { style: s.primaryText }, `▶ Demo (${ready.length})`)) : null) : null,
         // A row opens its job in the SimonSays app, the console when that app
         // is not on the phone (functions/in-app.mjs jobLinksFor) — for those
         // who can open it there; anyone else's rows stay plain.
@@ -494,6 +524,7 @@ function Panel({ gate, chat, work, screen, insets, draft, setDraft, busy, error,
           showMe(x)
             ? h(Pressable, { onPress: () => onOpenLink(showMe(x)), accessibilityRole: 'button', accessibilityLabel: `Show me: ${x.title}`, style: [s.primary, s.small] }, h(Text, { style: s.primaryText }, '▶ Show me'))
             : h(Text, { style: [s.state, s[`state_${x.state}`]] }, STATE_WORD[x.state] || x.state))),
+        away ? h(Text, { style: [s.draftBody, { paddingHorizontal: 16, paddingVertical: 8 }], testID: 'ssb-ready-elsewhere' }, away) : null,
         waiting.length ? h(View, { style: s.sectionRow },
           h(Text, { style: [s.section, { flex: 1 }] }, 'Drafts'),
           waiting.length > 1 ? h(Pressable, { testID: 'ssb-start-all', onPress: onStartAll, disabled: busy, accessibilityRole: 'button', accessibilityLabel: 'Start all', style: [s.primary, s.small, busy && s.disabled] }, h(Text, { style: s.primaryText }, `Start all (${waiting.length})`)) : null) : null,

package/src/core.js

@@ -43,7 +43,10 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
     decide: (chatId, proposalId, action, body) => post(`/chats/${encodeURIComponent(chatId)}/proposals/${encodeURIComponent(proposalId)}/${action}`, body),
     pushToken: (token, platform) => post('/push-token', { token, platform }),
     voice: (body) => post('/voice', body),
-    work: () => call('/work'),
+    // `bundle`: where this app's JS came from (a preview's tunnel), so SSB
+    // scopes Ready to this build; undefined = the whole list, as before.
+    work: (bundle) => call(bundle === undefined ? '/work' : `/work?bundle=${encodeURIComponent(bundle)}`),
+    demo: (bundle) => post('/demo', { bundle }),
   };
 }
 
@@ -308,3 +311,17 @@ export function workView({ inFlight = [], chat = null } = {}) {
   const { waiting, sent } = draftsOf(chat);
   return { flying, waiting, sent: sent.filter((p) => !p.jobId || !flyingIds.has(p.jobId)) };
 }
+
+// READY IS THIS BUILD (2026-10-20, docs/IN-APP-SSB.md): the origin the app's
+// JS bundle was loaded from — a preview's tunnel — or "" for a build that
+// loads from a file (a store or local build, which holds no SSB preview).
+export function bundleOriginOf(scriptURL) {
+  const m = /^(https?:\/\/[^/?#]+)/i.exec(String(scriptURL || ''));
+  return m ? m[1] : '';
+}
+// What the overlay says about Ready work this build does not hold.
+export function elsewhereLine(readyElsewhere = []) {
+  const n = (readyElsewhere || []).reduce((t, x) => t + (Number(x?.count) || 0), 0);
+  if (!n) return '';
+  return `${n === 1 ? '1 more change is' : `${n} more changes are`} ready in another build — open its preview to see ${n === 1 ? 'it' : 'them'}.`;
+}