@simon-says-build/ssb-overlay 0.9.4 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.9.4",
+  "version": "0.10.1",
   "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

@@ -19,6 +19,14 @@
 // out from under the drawing. (It was **Mark**, one pin or one box, until 0.2.0.) SSB replies on the thread and proposes jobs; the drafts bar
 // starts them. The same conversation is on the console.
 //
+// THE SESSIONS INDEX (2026-10-28, Simon: "in the native extension in an SSB
+// mobile app for the first time, if you have existing sessions that haven't
+// been released, we should show them along with their status … select one
+// to resume it, or create a new session … drop the session dropdown picker …
+// Instead we just have a back button"). The first open of this run, with
+// open sessions of yours on this app (GET /api/in-app/sessions), is the
+// index; a session's ‹ comes back to it; ＋ New session lives there.
+//
 // No JSX, so it needs nothing from the app's Babel setup beyond React Native's.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -32,7 +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 {
-  FAB, addPoint, clampFab, demoBanner, fabHome, isDrag, describeHost, draftsOf, fieldTop, inAppApi, namedHosts, newReply, offerOf,
+  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';
 
@@ -166,6 +174,9 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
   const [work, setWork] = useState([]);              // the app's work in flight (GET /api/in-app/work)
+  const [sessions, setSessions] = useState(null);    // the open sessions of yours here (GET /api/in-app/sessions)
+  const [index, setIndex] = useState(false);         // the sheet shows the sessions index, not a session
+  const firstOpen = useRef(true);                    // this run's first open: the index, when there is one
   const [seen, setSeen] = useState(null);
   const [kbTop, setKbTop] = useState(screen.height);
   const kbUpRef = useRef(null);
@@ -254,6 +265,24 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     return () => clearInterval(t);
   }, [gate, chatId, open, chat?.thinking, load, !!talk]);
 
+  // The sessions index. Fails open: no list, no index — the sheet is the
+  // conversation, as before there was one.
+  const loadSessions = useCallback(async () => {
+    try { const r = await ssb.sessions(); const list = Array.isArray(r?.sessions) ? r.sessions : []; setSessions(list); return list; }
+    catch { return null; }
+  }, [ssb]);
+  useEffect(() => {
+    if (mode !== 'sheet' || !index || !gate) return undefined;
+    const t = setInterval(loadSessions, 15000);
+    return () => clearInterval(t);
+  }, [mode, index, gate, loadSessions]);
+  const pickSession = useCallback((id) => {
+    if (id !== chatId) { setChat(null); setWork([]); rememberChat(id); }
+    setIndex(false);
+  }, [chatId, rememberChat]);
+  const newSession = useCallback(() => { rememberChat(null); setChat(null); setWork([]); setIndex(false); }, [rememberChat]);
+  const toIndex = useCallback(() => { Keyboard.dismiss(); setIndex(true); loadSessions(); }, [loadSessions]);
+
   const lastReplyId = (c) => [...(c?.messages || [])].reverse().find((m) => m.role !== 'user' && !m.streaming)?.id ?? null;
   const [seenDemo, setSeenDemo] = useState(null);
   const unread = !open && chat && (newReply(chat, seen) || (chat.demo?.status === 'ready' && chat.demo.url !== seenDemo));
@@ -268,10 +297,16 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const openSheet = useCallback(async () => {
     setError(null);
     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.
+    const first = firstOpen.current;
+    firstOpen.current = false;
+    const listed = first ? Promise.race([loadSessions(), new Promise((r) => setTimeout(() => r(null), 4000))]) : null;
     const pic = await grab();
     setShot(pic);
+    if (listed && openSessionsOf(await listed).length) setIndex(true);
     setMode('sheet');
-  }, [grab]);
+  }, [grab, loadSessions]);
 
   // A demo opens IN the app (or the dev client): SSB steps aside first, or the
   // full-screen panel would sit on top of what it opened.
@@ -535,7 +570,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
       onDemo: typeof playDemo === 'function' ? startDemo : null,
       onSend: sendDraft, onDraw: startDrawing, onClose: close,
       canTalk: !!voice?.Room, talk, onTalk: startTalk, onEndTalk: endTalk, onMute: toggleMute,
-      onNew: () => { rememberChat(null); setChat(null); }, onDecide: decide, onStartAll: startAll, onOpenLink: openLink,
+      index, sessions, chatId, onBack: toIndex, onPick: pickSession, onNew: newSession, onDecide: decide, onStartAll: startAll, onOpenLink: openLink,
     });
     return null;
   })();
@@ -561,7 +596,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
 const SNAPS = ['50%', '100%'];
 const COMPACT = 0, FULL = 1;
 
-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 }) {
+function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, setDraft, busy, error, onSend, onDraw, onClose, index, sessions, chatId, onBack, onPick, onNew, onDecide, onStartAll, onOpenLink, canTalk, talk, onTalk, onEndTalk, onMute }) {
   const sheet = useRef(null);
   const scroll = useRef(null);
   const [at, setAt] = useState(COMPACT);
@@ -642,6 +677,26 @@ function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, set
       h(Text, { style: s.workTitle, numberOfLines: 2 }, `✓ ${p.title}`),
       p.jobUrl ? h(Pressable, { onPress: () => Linking.openURL(p.jobUrl).catch(() => {}), accessibilityRole: 'link' }, h(Text, { style: s.link }, 'Started →')) : h(Text, { style: s.state }, 'Started'))));
 
+  // THE SESSIONS INDEX: ＋ New session, then your open sessions, each with
+  // where it is and what is new in it. A tap resumes it.
+  const listed = openSessionsOf(sessions);
+  const othersNews = listed.some((x) => x.id !== chatId && x.updates?.any);
+  const indexList = index ? h(BottomSheetScrollView, { style: s.thread, testID: 'ssb-sessions', contentContainerStyle: { paddingTop: 12, paddingBottom: 24 } },
+    h(Pressable, { testID: 'ssb-new-session', onPress: onNew, accessibilityRole: 'button', accessibilityLabel: 'New session', style: [s.primary, s.newSession] }, h(Text, { style: s.primaryText }, '＋ New session')),
+    !sessions ? h(ActivityIndicator, { size: 'small', color: MUTED, style: { marginTop: 16 } })
+      : !listed.length ? h(Text, { style: s.empty }, 'No open sessions of yours here.') : null,
+    ...listed.map((x) => {
+      const r = sessionRow(x);
+      return h(Pressable, { key: r.id, testID: `ssb-session-${r.id}`, onPress: () => onPick(r.id), accessibilityRole: 'button', accessibilityLabel: `Open the session: ${r.title}`, style: [s.sessRow, r.id === chatId && s.sessOn] },
+        h(View, { style: s.workLine },
+          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.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;
+
   // Half open: the work is one line, and a ready demo keeps its button —
   // it is the thing most worth a tap.
   const compactWork = (summary || banner) ? h(Pressable, { testID: 'ssb-work-summary', onPress: () => snap(FULL), accessibilityRole: 'button', accessibilityLabel: `Show the work: ${summary || banner.text}`, style: s.summary },
@@ -653,22 +708,25 @@ function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, set
     h(ComposerCtx.Provider, { value: composer }, h(BottomSheet, {
       ref: sheet, index: COMPACT, snapPoints: SNAPS, enableDynamicSizing: false, enablePanDownToClose: true,
       topInset: insets.top, onChange: (i) => { if (i >= 0) setAt(i); }, onClose,
-      backdropComponent: backdrop, footerComponent: footer,
+      backdropComponent: backdrop, footerComponent: index ? undefined : footer,
       keyboardBehavior: 'interactive', keyboardBlurBehavior: 'restore', android_keyboardInputMode: 'adjustResize',
       backgroundStyle: s.sheetBg, handleIndicatorStyle: s.grabber,
     },
       h(View, { style: { flex: 1 }, testID: 'ssb-panel' },
         h(View, { style: s.header },
-          h(View, { style: s.headLogoRing }, h(Image, { source: LOGO, style: s.headLogo, accessibilityLabel: 'SSB' })),
+          // In a session: ‹ back to the index (a dot when another session has
+          // news), then the session's name. On the index: SSB's mark.
+          index ? h(View, { style: s.headLogoRing }, h(Image, { source: LOGO, style: s.headLogo, accessibilityLabel: 'SSB' }))
+            : h(Pressable, { testID: 'ssb-back', onPress: onBack, accessibilityRole: 'button', accessibilityLabel: 'Back to your sessions', style: s.iconBtn },
+              h(Text, { style: s.backText }, '‹'), othersNews ? h(View, { style: s.backDot }) : null),
           h(View, { style: { flex: 1 } },
-            h(Text, { style: s.title }, 'Tell SSB'),
+            h(Text, { style: s.title, numberOfLines: 1, testID: 'ssb-title' }, index ? 'Your sessions' : (chatId && chat?.title) || (chatId ? 'This session' : 'New session')),
             h(Text, { style: s.sub, numberOfLines: 1 }, `${gate.app?.name || 'this app'} · as ${gate.person?.label || 'you'}`)),
-          chat ? h(Pressable, { onPress: onNew, accessibilityRole: 'button', accessibilityLabel: 'New conversation', style: s.quiet }, h(Text, { style: s.quietText }, 'New')) : null,
           h(Pressable, { testID: full ? 'ssb-collapse' : 'ssb-expand', onPress: () => snap(full ? COMPACT : FULL), accessibilityRole: 'button', accessibilityLabel: full ? 'Make SSB smaller' : 'Open SSB full screen', style: s.iconBtn }, h(Text, { style: s.iconText }, full ? '⌄' : '⌃')),
           h(Pressable, { testID: 'ssb-close', onPress: () => sheet.current?.close(), accessibilityRole: 'button', accessibilityLabel: 'Close SSB', style: s.iconBtn }, h(Text, { style: s.iconText }, '✕'))),
-        full ? (hasWork ? workList : null) : compactWork,
+        index ? indexList : full ? (hasWork ? workList : null) : compactWork,
         // THE CONVERSATION, below; the footer (the composer) floats over its end.
-        h(BottomSheetScrollView, { ref: scroll, style: s.thread, contentContainerStyle: { paddingTop: 8, paddingBottom: footH + 8 }, keyboardShouldPersistTaps: 'handled', onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }) },
+        index ? null : h(BottomSheetScrollView, { ref: scroll, style: s.thread, contentContainerStyle: { paddingTop: 8, paddingBottom: footH + 8 }, keyboardShouldPersistTaps: 'handled', onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }) },
           msgs.length ? null : h(Text, { style: s.empty }, 'Say what should change on this screen, or tap Draw to scribble on it.'),
           ...msgs.map((m) => h(View, { key: m.id, style: [s.bubble, m.role === 'user' ? s.mine : s.theirs] },
             // The marked part as the preview; a tap shows the full screen
@@ -771,6 +829,20 @@ const s = StyleSheet.create({
   quietText: { color: MUTED, fontSize: 14, fontWeight: '600' },
   iconBtn: { width: 36, height: 36, alignItems: 'center', justifyContent: 'center', borderRadius: 18, backgroundColor: RAISED },
   iconText: { color: TEXT, fontSize: 16 },
+  // The sessions index, and ‹ back to it.
+  backText: { color: TEXT, fontSize: 26, lineHeight: 28, fontWeight: '600', marginTop: -2 },
+  backDot: { position: 'absolute', top: 4, right: 4, width: 9, height: 9, borderRadius: 5, backgroundColor: YELLOW, borderWidth: 1.5, borderColor: BG },
+  newSession: { alignSelf: 'stretch', marginHorizontal: 4, marginBottom: 10, paddingVertical: 12 },
+  sessRow: { paddingHorizontal: 12, paddingVertical: 11, marginHorizontal: 4, marginVertical: 3, borderRadius: 14, borderWidth: 1, borderColor: LINE, backgroundColor: SURFACE },
+  sessOn: { borderColor: 'rgba(61,123,255,0.6)' },
+  sessDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: YELLOW, ...glow(YELLOW, 4) },
+  sessAgo: { fontSize: 12, color: MUTED },
+  sessChips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 8 },
+  sessNews: { fontSize: 12, fontWeight: '700', color: YELLOW, paddingVertical: 4, paddingHorizontal: 9, borderRadius: 9, borderWidth: 1, borderColor: 'rgba(246,197,68,0.4)', overflow: 'hidden' },
+  sess_ready: { color: BG, backgroundColor: GREEN, borderColor: GREEN },
+  'sess_needs-you': { color: BG, backgroundColor: YELLOW, borderColor: YELLOW },
+  sess_building: { color: '#9cc0ff', backgroundColor: 'rgba(61,123,255,0.14)', borderColor: 'rgba(61,123,255,0.5)' },
+  sess_preparing: { color: '#9cc0ff', backgroundColor: 'rgba(61,123,255,0.14)', borderColor: 'rgba(61,123,255,0.5)' },
   // Voice mode: a pill over the app.
   pill: { position: 'absolute', left: 12, right: 12, flexDirection: 'row', alignItems: 'center', paddingVertical: 8, paddingLeft: 14, paddingRight: 6, borderRadius: 24, backgroundColor: INK, borderWidth: 1, borderColor: 'rgba(47,210,122,0.45)', ...shadow },
   pillText: { flex: 1, color: TEXT, 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.9.4';
+export const OVERLAY_VERSION = '0.10.1';
 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
@@ -43,6 +43,8 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
     me: () => call('/me'),
     send: (body) => post('/annotations', body),
     chat: (id) => call(`/chats/${encodeURIComponent(id)}`),
+    // The sessions index: the OPEN sessions of this app the person is in.
+    sessions: () => call('/sessions'),
     decide: (chatId, proposalId, action, body) => post(`/chats/${encodeURIComponent(chatId)}/proposals/${encodeURIComponent(proposalId)}/${action}`, body),
     // `client`: what this build is (clientInfo), so SSB knows what is installed.
     pushToken: (token, platform, client) => post('/push-token', { token, platform, ...(client ? { client } : {}) }),
@@ -301,6 +303,51 @@ export function talkLine(talk) {
   return talk.muted ? 'Talking with SSB · muted' : 'Talking with SSB';
 }
 
+// ---- the sessions index (2026-10-28) ------------------------------------------
+// Simon: "When you open the extension in a new tab, or in the native
+// extension in an SSB mobile app for the first time, if you have existing
+// sessions that haven't been released, we should show them along with their
+// status in a 'sessions index' screen. Then you have the option to select
+// one to resume it, or create a new session." GET /api/in-app/sessions
+// (functions/sessions.mjs listSessions, `inApp`) lists only those already;
+// the extension's card shows the same rows (extension/overlay.js sessionsHtml).
+
+/** Where a session is, in the console's sessions page's words (schemas/session-card.mjs states). */
+export const SESSION_STATE_WORD = Object.freeze({
+  ready: 'Ready for Guided Review', 'needs-you': 'Needs you', preparing: 'Recording the Guided Review',
+  building: 'Building', 'in-review': 'All in', idle: 'Just started',
+});
+
+/** 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.
+ * `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 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, pills, news, any: !!u.any, ago: agoOf(x.lastMessageAt, now) };
+}
+export function agoOf(iso, now = Date.now()) {
+  const s = (now - Date.parse(iso || '')) / 1000;
+  return !Number.isFinite(s) ? '' : s < 90 ? 'just now' : s < 3600 ? `${Math.round(s / 60)}m ago` : s < 86400 ? `${Math.round(s / 3600)}h ago` : `${Math.round(s / 86400)}d ago`;
+}
+
 // ---- the panel's top: the work (2026-10-20, the product owner: "the web
 // extension has jobs and in-progress things at the top, with chat down the
 // bottom … maybe we can move to that pattern") ------------------------------