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

package/src/core.js

@@ -42,33 +42,88 @@ export function inAppApi(config, getToken, fetchImpl = globalThis.fetch) {
     chat: (id) => call(`/chats/${encodeURIComponent(id)}`),
     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'),
   };
 }
 
-/** A finished gesture on the screen, as a mark in fractions of the screen: a tap is a pin, a drag a box. */
-export function markOf({ x0, y0, x1, y1 }, screen) {
-  const fx = (v) => Math.min(1, Math.max(0, v / screen.width));
-  const fy = (v) => Math.min(1, Math.max(0, v / screen.height));
-  if (Math.hypot(x1 - x0, y1 - y0) < PIN_SLOP) return { kind: 'pin', x: fx(x1), y: fy(y1) };
-  const left = Math.min(x0, x1), top = Math.min(y0, y1);
-  return { kind: 'box', x: fx(left), y: fy(top), w: fx(Math.abs(x1 - x0)), h: fy(Math.abs(y1 - y0)) };
+// ---- the pencil: scribbles on the live screen --------------------------------
+const MIN_STEP = 3;            // a point closer than this to the last one adds nothing
+
+/** A stroke with `p` added, unless it is too close to the last point to matter. */
+export function addPoint(stroke, p) {
+  const last = stroke[stroke.length - 1];
+  if (last && Math.hypot(p.x - last.x, p.y - last.y) < MIN_STEP) return stroke;
+  return [...stroke, { x: p.x, y: p.y }];
+}
+
+/**
+ * A stroke as straight segments a View can draw: each is a bar `width` long,
+ * centred on its midpoint and turned by `angle` (radians). A single point is a dot.
+ */
+export function segmentsOf(stroke, thickness = 4) {
+  if (stroke.length === 1) return [{ left: stroke[0].x - thickness / 2, top: stroke[0].y - thickness / 2, width: thickness, angle: 0 }];
+  const out = [];
+  for (let i = 1; i < stroke.length; i++) {
+    const a = stroke[i - 1], b = stroke[i];
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    const width = len + thickness;   // overlap the joints so a curve has no gaps
+    out.push({ left: (a.x + b.x) / 2 - width / 2, top: (a.y + b.y) / 2 - thickness / 2, width, angle: Math.atan2(b.y - a.y, b.x - a.x) });
+  }
+  return out;
+}
+
+// A drawing is a list of items, each a pencil stroke or a box:
+//   { kind: 'stroke', points: [{x, y}] } | { kind: 'box', x0, y0, x1, y1 }   (screen points)
+const MIN_BOX = 8;             // a box smaller than this was a slip, not a box
+
+/** A box item from its drag, or null when it is too small to mean anything. */
+export function boxItem(d) {
+  if (Math.abs(d.x1 - d.x0) < MIN_BOX || Math.abs(d.y1 - d.y0) < MIN_BOX) return null;
+  return { kind: 'box', x0: d.x0, y0: d.y0, x1: d.x1, y1: d.y1 };
 }
 
-/** The mark's box on the screen, in points (a pin is a small square round its point). */
-export function markRect(mark, screen) {
-  const x = mark.x * screen.width, y = mark.y * screen.height;
-  if (mark.kind === 'box') return { left: x, top: y, width: mark.w * screen.width, height: mark.h * screen.height };
-  return { left: x - 14, top: y - 14, width: 28, height: 28 };
+/** One item's box, in points. */
+export function itemRect(it) {
+  if (it.kind === 'box') {
+    const left = Math.min(it.x0, it.x1), top = Math.min(it.y0, it.y1);
+    return { left, top, width: Math.abs(it.x1 - it.x0), height: Math.abs(it.y1 - it.y0) };
+  }
+  const xs = it.points.map((p) => p.x), ys = it.points.map((p) => p.y);
+  const left = Math.min(...xs), top = Math.min(...ys);
+  return { left, top, width: Math.max(...xs) - left, height: Math.max(...ys) - top };
 }
 
-/** The point a mark is about: a pin's point, a box's middle. */
-export const markPoint = (mark, screen) => mark.kind === 'box'
-  ? { x: (mark.x + mark.w / 2) * screen.width, y: (mark.y + mark.h / 2) * screen.height }
-  : { x: mark.x * screen.width, y: mark.y * screen.height };
+/** The box round everything drawn, or null with nothing drawn. */
+export function drawingBox(items) {
+  const rs = items.filter((it) => it.kind === 'box' || it.points?.length).map(itemRect);
+  if (!rs.length) return null;
+  const left = Math.min(...rs.map((r) => r.left)), top = Math.min(...rs.map((r) => r.top));
+  return { left, top, width: Math.max(...rs.map((r) => r.left + r.width)) - left, height: Math.max(...rs.map((r) => r.top + r.height)) - top };
+}
 
 /**
- * Where the field beside the mark goes: just above the keyboard when that is
- * clear of the mark, else under the status bar. `keyboardTop` is the
+ * What was drawn, as the ONE mark a send carries (annotate.mjs cleanMarks):
+ * a `box` when only boxes were drawn, else a `pen`, over the drawing's box,
+ * in fractions of the screen.
+ */
+export function drawingMark(items, screen) {
+  const r = drawingBox(items);
+  if (!r) return null;
+  const f = (v, d) => Math.min(1, Math.max(0, v / d));
+  return { kind: items.every((it) => it.kind === 'box') ? 'box' : 'pen',
+    x: f(r.left, screen.width), y: f(r.top, screen.height), w: f(r.width, screen.width), h: f(r.height, screen.height) };
+}
+
+/** The point the drawing is about (what the app has under it is named): the middle of its box. */
+export const drawingPoint = (items) => {
+  const r = drawingBox(items);
+  return r ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : null;
+};
+
+/**
+ * Where the note field goes: just above the keyboard when that is clear of
+ * the drawing, else under the status bar. `keyboardTop` is the
  * keyboard's top edge in screen points (the screen height when it is down).
  */
 export function fieldTop({ rect, screen, keyboardTop, insets, fieldH = 56 }) {
@@ -202,3 +257,54 @@ export function demoBanner(chat) {
   if (d.status === 'failed') return { text: `Done: ${what}. The demo couldn't be prepared${d.error ? `: ${d.error}` : '.'}` };
   return null;
 }
+
+// ---- the button: wherever it is put --------------------------------------------
+export const FAB = 52;
+const TAP_SLOP = 8;            // a press that moved less than this is a tap, not a drag
+
+/** Where the button sits by default: bottom-right, clear of the insets. */
+export const fabHome = (screen, insets) => ({ x: screen.width - FAB - 16, y: screen.height - FAB - 16 - insets.bottom });
+
+/** A position kept on screen: the whole button visible, off the status bar. */
+export function clampFab(pos, screen, insets) {
+  return {
+    x: Math.min(screen.width - FAB - 4, Math.max(4, pos.x)),
+    y: Math.min(screen.height - FAB - 4, Math.max(insets.top, pos.y)),
+  };
+}
+
+/** Did the finger travel far enough to be a drag? */
+export const isDrag = (dx, dy) => Math.hypot(dx, dy) >= TAP_SLOP;
+
+// ---- 🎙 Talk (functions/voice-chat.mjs, voice-agent/src/chat.mjs) --------------
+export const SNAPSHOT_TOPIC = 'ssb.guide.snapshot';   // the agent's (voice-agent/src/guide.mjs TOPIC.snapshot)
+
+/** What the agent is sent about the screen: the route, the picture when there is one, and whether this is the opening look. */
+export const snapshotOf = ({ route, screenshot, first = false }) => JSON.stringify({ route: route || '/', ...(screenshot ? { screenshot } : {}), ...(first ? { first: true } : {}) });
+
+/** The talk bar's words. */
+export function talkLine(talk) {
+  if (!talk) return '';
+  if (talk.status === 'connecting') return 'Connecting to SSB…';
+  if (talk.status === 'waiting') return 'Waiting for SSB to join…';
+  return talk.muted ? 'Talking with SSB · muted' : 'Talking with SSB';
+}
+
+// ---- 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") ------------------------------
+/** The extension's words for a job in flight (extension/overlay.js inFlightHtml). */
+export const STATE_WORD = Object.freeze({ ready: 'Ready', queued: 'Queued', building: 'Building', checking: 'Checking', blocked: 'Blocked' });
+
+/**
+ * What the top of the panel shows: the app's work in flight (GET
+ * /api/in-app/work, functions/sessions.mjs inFlightOf — whatever chat it came
+ * from), this chat's drafts waiting to start, and what this chat started that
+ * is not in flight any more (the row says so, with its job).
+ */
+export function workView({ inFlight = [], chat = null } = {}) {
+  const flying = Array.isArray(inFlight) ? inFlight : [];
+  const flyingIds = new Set(flying.map((x) => x.id));
+  const { waiting, sent } = draftsOf(chat);
+  return { flying, waiting, sent: sent.filter((p) => !p.jobId || !flyingIds.has(p.jobId)) };
+}