@simon-says-build/ssb-overlay 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "SSB inside a native app SimonSays controls: the SSB button for the people who change the app (screenshot, mark, ask for a change), and Help for everyone who uses it.",
   "repository": {
     "type": "git",

package/src/SsbHost.js

@@ -40,6 +40,7 @@ import { playDemo, PLAYER_VERSION } from '@simon-says-build/demo-player';
 import BottomSheet, { BottomSheetBackdrop, BottomSheetFooter, BottomSheetScrollView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import {
+  codeShown,
   FAB, addPoint, clampFab, demoBanner, openSessionsOf, sessionRow, fabHome, isDrag, describeHost, draftsOf, fieldTop, inAppApi, namedHosts, newReply, offerOf,
   STATE_WORD, workSummary, boxItem, bundleOriginOf, clientInfo, elsewhereLine, workView, drawingBox, drawingMark, drawingPoint, itemRect, overlayConfig, pollEvery, SNAPSHOT_TOPIC, snapshotOf, talkLine, segmentsOf, sendBody, smallestAt, ssbLinkOf,
 } from './core.js';
@@ -149,7 +150,10 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const chromeRef = useRef(null);
   const storeKey = `ssb-overlay:chat:${config.appId}`;
 
-  const [gate, setGate] = useState(null);            // {show, person, app, canJob} once SSB has answered
+  const [gate, setGate] = useState(null);            // {show, person, app, canJob, link?} once SSB has answered
+  const [linking, setLinking] = useState(null);      // the code to link this login with: { code, url, expiresAt }
+  const gateRef = useRef(null);
+  gateRef.current = gate;
   const [mode, setMode] = useState('idle');          // idle | sheet | drawing | capturing
   const [shot, setShot] = useState(null);            // the screen as it was when the button was tapped
   const [frozen, setFrozen] = useState(null);        // while drawing: { pic, hosts } — the screen held still under the pencil
@@ -191,7 +195,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
       if (!live) return;
       setGate(g?.show ? g : null);
       // This device, for "it's done, tap to see it" — only for someone SSB let in.
-      if (g?.show && pushToken) Promise.resolve(pushToken()).then((t) => (t ? ssb.pushToken(t, Platform.OS, buildInfo(client)) : null)).catch(() => {});
+      if (g?.show && !g.link && pushToken) Promise.resolve(pushToken()).then((t) => (t ? ssb.pushToken(t, Platform.OS, buildInfo(client)) : null)).catch(() => {});
     }).catch(() => { if (live) setGate(null); });
     return () => { live = false; };
   }, [ssb, sessionKey]);
@@ -251,14 +255,28 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
       Keyboard.dismiss(); setMode('idle');
     } catch (e) { setError(e.message); } finally { setBusy(false); }
   }, [ssb, here, config.api, chatId]);
+  // NOT LINKED (2026-10-28): an app admin who is not yet anyone in SSB sees
+  // only "Link my account" (LinkPanel); while it is open SSB is asked every
+  // few seconds, and the moment the link lands the panel is the chat.
   useEffect(() => {
-    if (mode !== 'sheet' || !gate) return undefined;
+    if (mode !== 'sheet' || !gate?.link) return undefined;
+    const t = setInterval(() => ssb.me().then((g) => {
+      if (g?.show && !g.link) { setGate(g); setLinking(null); if (pushToken) Promise.resolve(pushToken()).then((tk) => (tk ? ssb.pushToken(tk, Platform.OS, buildInfo(client)) : null)).catch(() => {}); }
+    }).catch(() => {}), 3000);
+    return () => clearInterval(t);
+  }, [mode, gate, ssb]);
+  const startLinking = useCallback(async () => {
+    setBusy(true); setError(null);
+    try { setLinking(await ssb.link()); } catch (e) { setError(e.message); } finally { setBusy(false); }
+  }, [ssb]);
+  useEffect(() => {
+    if (mode !== 'sheet' || !gate || gate.link) return undefined;
     loadWork();
     const t = setInterval(loadWork, 10000);
     return () => clearInterval(t);
   }, [mode, gate, loadWork]);
   useEffect(() => {
-    if (!gate || !chatId) return undefined;
+    if (!gate || gate.link || !chatId) return undefined;
     const every = talk ? 2000 : pollEvery({ open, thinking: !!chat?.thinking || chat?.demo?.status === 'preparing' });
     if (!every) return undefined;
     const t = setInterval(load, every);
@@ -272,7 +290,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     catch { return null; }
   }, [ssb]);
   useEffect(() => {
-    if (mode !== 'sheet' || !index || !gate) return undefined;
+    if (mode !== 'sheet' || !index || !gate || gate.link) return undefined;
     const t = setInterval(loadSessions, 15000);
     return () => clearInterval(t);
   }, [mode, index, gate, loadSessions]);
@@ -296,6 +314,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
 
   const openSheet = useCallback(async () => {
     setError(null);
+    if (gateRef.current?.link) { setMode('sheet'); return; }
     setMode('capturing');
     // The first open asks for the sessions while the screen is taken, at most
     // a few seconds: an answer that never comes is no index.
@@ -565,6 +584,7 @@ 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' && gate.link) return h(LinkPanel, { gate, linking, busy, error, insets, onLink: startLinking, onClose: close });
     if (mode === 'sheet') return h(Panel, {
       gate, chat, work, screen, insets, draft, setDraft, busy, error, elsewhere,
       onDemo: typeof playDemo === 'function' ? startDemo : null,
@@ -580,6 +600,26 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     h(View, { ref: chromeRef, collapsable: false, pointerEvents: 'box-none', style: StyleSheet.absoluteFill }, chrome));
 }
 
+// NOT LINKED: the only thing an app admin SSB does not know yet can do. The
+// code is for simonsays.build/link (the button opens it on this phone; on a
+// computer, it is typed there); SSB is asked meanwhile, and the chat replaces
+// this once the link lands. docs/IN-APP-SSB.md "Linking".
+function LinkPanel({ gate, linking, busy, error, insets, onLink, onClose }) {
+  const app = gate.app?.name || 'this app';
+  return h(View, { style: [s.linkSheet, { paddingTop: insets.top + 16, paddingBottom: insets.bottom + 24 }], testID: 'ssb-link' },
+    h(View, { style: s.linkHead },
+      h(Text, { style: s.title }, 'Link your SSB account'),
+      h(Pressable, { testID: 'ssb-link-close', onPress: onClose, accessibilityRole: 'button', accessibilityLabel: 'Close', style: s.iconBtn }, h(Text, { style: s.quietText }, '✕'))),
+    h(Text, { style: s.linkBody }, `SSB doesn't know who ${gate.person?.label || 'you'} is yet. Link this login to your SSB account once, and SSB works as you in ${app}.`),
+    linking ? h(View, { style: s.linkCodeBox },
+      h(Text, { style: s.linkCode, testID: 'ssb-link-code', selectable: true }, codeShown(linking.code)),
+      h(Pressable, { testID: 'ssb-link-open', onPress: () => Linking.openURL(linking.url).catch(() => {}), accessibilityRole: 'link', style: [s.primary, s.linkBtn] }, h(Text, { style: s.primaryText }, 'Open simonsays.build')),
+      h(Text, { style: s.linkBody }, 'Or, on a computer signed in to SSB, go to simonsays.build/link and type the code. It works for 10 minutes.'),
+      h(View, { style: s.row }, h(ActivityIndicator, { color: MUTED }), h(Text, { style: s.sub }, ' Waiting for you to confirm…')))
+      : h(Pressable, { testID: 'ssb-link-start', onPress: onLink, disabled: busy, accessibilityRole: 'button', style: [s.primary, s.linkBtn, busy && s.disabled] }, h(Text, { style: s.primaryText }, busy ? 'Getting a code…' : 'Link my account')),
+    error ? h(Text, { style: s.error }, error) : null);
+}
+
 // THE SHEET (2026-10-22, Michael: "a compact chat as a sheet, where you can
 // expand fully, which shows the persistent panel at the top"). It opens HALF
 // way: the conversation and the composer, with the app still showing above
@@ -692,8 +732,8 @@ function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, set
           r.any ? h(View, { style: s.sessDot }) : null,
           h(Text, { style: s.workTitle, numberOfLines: 2 }, r.title),
           h(Text, { style: s.sessAgo }, r.ago)),
-        r.stateWord || r.news.length ? h(View, { style: s.sessChips },
-          r.stateWord ? h(Text, { style: [s.state, s[`sess_${r.state}`]], testID: `ssb-session-state-${r.id}` }, r.stateWord) : null,
+        r.pills.length || r.news.length ? h(View, { style: s.sessChips },
+          ...r.pills.map((p, i) => h(Text, { key: `p${i}`, style: [s.state, s[`sess_${p.state}`]], testID: i ? `ssb-session-state-${r.id}-${i}` : `ssb-session-state-${r.id}` }, p.word)),
           ...r.news.map((n) => h(Text, { key: n, style: s.sessNews }, n))) : null);
     })) : null;
 
@@ -824,6 +864,12 @@ const s = StyleSheet.create({
   chipText: { fontSize: 13, color: TEXT, fontWeight: '600' },
   primary: { paddingVertical: 9, paddingHorizontal: 16, borderRadius: 12, backgroundColor: BLUE, minWidth: 64, alignItems: 'center', ...glow(BLUE, 10) },
   primaryText: { color: '#fff', fontSize: 14, fontWeight: '800', letterSpacing: 0.2 },
+  linkSheet: { ...StyleSheet.absoluteFillObject, backgroundColor: BG, paddingHorizontal: 20 },
+  linkHead: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 },
+  linkBody: { color: MUTED, fontSize: 14, lineHeight: 20, marginTop: 12 },
+  linkCodeBox: { marginTop: 20, alignItems: 'center' },
+  linkCode: { color: TEXT, fontSize: 34, fontWeight: '800', letterSpacing: 4, fontVariant: ['tabular-nums'] },
+  linkBtn: { marginTop: 20, paddingVertical: 12, alignSelf: 'stretch' },
   small: { paddingVertical: 6, paddingHorizontal: 12, minWidth: 0 },
   quiet: { paddingVertical: 6, paddingHorizontal: 10 },
   quietText: { color: MUTED, fontSize: 14, fontWeight: '600' },

package/src/core.js

@@ -5,7 +5,7 @@
 export const DEFAULT_API = 'https://simonsays.build';
 // What this overlay is, said when it registers for pushes (clientInfo below).
 // Kept equal to package.json by test/core.test.mjs.
-export const OVERLAY_VERSION = '0.10.0';
+export const OVERLAY_VERSION = '0.11.0';
 export const HOST = 5;
 export const TEXT = 6;
 const PIN_SLOP = 12;           // a drag shorter than this is a tap: a pin, not a box
@@ -31,6 +31,8 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
         authorization: `Bearer ${token}`,
         'x-ssb-app': config.appId,
         'x-ssb-backend': config.backend,
+        // This overlay can link an unlinked login (functions/index.mjs holds it to that).
+        'x-ssb-overlay': OVERLAY_VERSION,
         ...(init.headers || {}),
       },
     });
@@ -41,6 +43,8 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
   const post = (path, body) => call(path, { method: 'POST', body: JSON.stringify(body || {}) });
   return {
     me: () => call('/me'),
+    // A code to link this app login to an SSB account (functions/in-app.mjs startLink).
+    link: () => post('/link'),
     send: (body) => post('/annotations', body),
     chat: (id) => call(`/chats/${encodeURIComponent(id)}`),
     // The sessions index: the OPEN sessions of this app the person is in.
@@ -60,6 +64,9 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
   };
 }
 
+// A link code as the person reads it: two groups of four.
+export const codeShown = (code) => String(code || '').replace(/^(.{4})(.+)$/, '$1-$2');
+
 // ---- the pencil: scribbles on the live screen --------------------------------
 const MIN_STEP = 3;            // a point closer than this to the last one adds nothing
 
@@ -321,18 +328,27 @@ export const SESSION_STATE_WORD = Object.freeze({
 /** Sessions worth an index: yours, not released. */
 export const openSessionsOf = (list) => (Array.isArray(list) ? list : []).filter((x) => x && x.mine !== false && !x.done);
 
-/** One row of the index: its name, where it is, and what is new in it for you. */
+/**
+ * One row of the index: its name, where it is, and what is new in it for you.
+ * `pills`: where it is — one per app when it spans several (2026-10-28, per
+ * platform: web's Guided Review can be ready while the phone's work builds).
+ */
 export function sessionRow(x, now = Date.now()) {
   const u = x?.updates || {};
   const st = x?.status?.state || null;
   const word = SESSION_STATE_WORD[st] || null;
-  const count = st === 'building' && x.status.total ? ` · ${x.status.landed} of ${x.status.total} in` : '';
+  const inOf = (s, a) => (s === 'building' && a?.total ? ` · ${a.landed} of ${a.total} in` : '');
+  const count = inOf(st, x?.status);
+  const apps = Array.isArray(x?.status?.apps) ? x.status.apps.filter((a) => SESSION_STATE_WORD[a.state]) : [];
+  const pills = apps.length > 1
+    ? apps.map((a) => ({ state: a.state, word: `${a.name || 'An app'}: ${SESSION_STATE_WORD[a.state]}${inOf(a.state, a)}` }))
+    : word ? [{ state: st, word: `${word}${count}` }] : [];
   const news = [
     u.replied ? 'SSB replied' : null,
     u.waiting ? `${u.waiting} draft${u.waiting === 1 ? '' : 's'} waiting` : null,
     u.live ? `${u.live} live` : null,
   ].filter(Boolean);
-  return { id: x.id, title: x.title || x.preview || 'A session', state: st, stateWord: word ? `${word}${count}` : null, news, any: !!u.any, ago: agoOf(x.lastMessageAt, now) };
+  return { id: x.id, title: x.title || x.preview || 'A session', state: st, stateWord: word ? `${word}${count}` : null, pills, news, any: !!u.any, ago: agoOf(x.lastMessageAt, now) };
 }
 export function agoOf(iso, now = Date.now()) {
   const s = (now - Date.parse(iso || '')) / 1000;