@sightspool/sdk 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,6 +1,50 @@
 # Changelog
 
-## 0.4.0 — prepared, unpublished
+## 0.5.0 — 12 September 2026
+
+- **The privacy promise is narrowed, deliberately.** Through 0.4.2 `identify(userId)`
+  retained only the presence of an ID and never transmitted it. **From 0.5.0 the id is
+  sent**, over TLS, to your own workspace's Sightspool endpoint and only on the
+  `operation: "offer"` request, so a journey-linked research card can tell whether a
+  visitor is in the cohort its question is about (SIG-122). Sightspool hashes it
+  workspace-scoped on arrival and never stores it raw in any table, log or payload.
+- The SDK holds the id in memory for the page's lifetime only — never sessionStorage,
+  localStorage, a cookie, a URL, a fragment or a log. The interview page is handed
+  nothing but the offer and device, as before.
+- `identify()` treats any value that is not a non-empty string of at most 200
+  characters after trimming as unidentified, exactly like `identify(null)`. Over-length
+  ids are never truncated: a truncated id is a different person, and on a gated card
+  that invites the wrong one.
+- A changed id invalidates any pending check and any minted offer, so switching
+  accounts never inherits the previous person's invitation. Re-stating the same id
+  leaves a live invitation alone.
+- `all_visitors` with no `identify()` call sends exactly the payload it sent before.
+- **Integration requirement.** Your product must call `posthog.identify()` with the
+  same id it passes Sightspool. An email on one side and an internal UUID on the other
+  never meet, and the result is a flat zero match rate that reads as an empty cohort.
+- API contract change, so this is a minor bump. `@sightspool/react` peers widened to
+  `>=0.4.0 <0.6.0`.
+
+## 0.4.2 — prepared, unpublished
+
+- Take the launcher's invitation title and subtitle from the approved copy the
+  server supplies, rendered as text.
+- Recover an accepted session after reload from a tab-scoped marker, and open the
+  accepted thank-you receipt from the completed launcher.
+- Exchange presentation and accepted/ended lifecycle messages with the panel
+  rather than a minimize message alone, still never interview text, capabilities
+  or audio.
+- Accept `theme` on script installs via `data-sightspool-theme`.
+- Keep the panel inside narrow scrollable viewports, and reveal it before
+  restoring keyboard focus.
+
+## 0.4.1 — published 10 September 2026
+
+- Replace popup interview delivery with one persistent corner panel.
+- Keep open sessions mounted across minimize and recruitment cleanup.
+- Restrict iframe permissions and validate parent message origin/source.
+
+## 0.4.0 — published 7 September 2026
 
 - Replace the public capture entry with research invitation delivery.
 - Require an explicit all_visitors or signed_in audience; no fabricated visitor identity.

package/README.md

@@ -4,8 +4,9 @@ Embed Sightspool research in your product. The SDK invites website visitors and
 owner-approved research during User Hours, then opens Sightspool for consent and
 the interview. It does not capture page content, behavior, form values or analytics.
 
-This is the **0.4.0 research API**, a deliberate change from the old capture SDK.
-Install the exact version below and review upgrades before deploying them.
+This is the **research API introduced in 0.4.0**, a deliberate change from the old
+capture SDK. Install the exact version below and review upgrades before deploying
+them — 0.5.0 narrows a privacy promise, so read the CHANGELOG before taking it.
 Old capture code and documentation are archived in `docs/legacy`.
 
 Read the [data and security guide](https://www.sightspool.com/sdk/data-security),
@@ -15,7 +16,7 @@ inspect the [public source](https://github.com/sightspool/sdk), or try the
 ## npm
 
 ```sh
-npm install --save-exact @sightspool/sdk@0.4.0
+npm install --save-exact @sightspool/sdk@0.5.0
 ```
 
 ```ts
@@ -38,9 +39,28 @@ Choose an explicit `audience` matching the approved interview plan:
 - `signed_in`: only users with a real signed-in session. Initialize in your authenticated app shell and call `identify(actualUserId)` after authentication resolves. Until then, no request or invitation is made. `identify(null)` immediately removes invitations on logout.
 
 There is no default audience. Missing or invalid audience configuration stays idle.
-`identify` retains only whether an ID is present; the ID itself is not stored or
-transmitted. Do not invent IDs for visitors. This client setting controls display;
-it does not authenticate a participant or change the server-approved research cohort.
+
+`identify` sends the id you pass, over TLS, to your own workspace's Sightspool
+endpoint, on the offer request only. Sightspool hashes it workspace-scoped on
+arrival and never stores it raw in any table, log or payload. The SDK holds it in
+memory for the page's lifetime and never writes it to storage, a cookie, a URL, a
+fragment or a log. **Through 0.4.2 the id was never transmitted; from 0.5.0 it
+is** — it is what lets a cohort-targeted card tell whether you are one of the
+people its research question is about. Do not invent IDs for visitors. This client
+setting controls display; it does not authenticate a participant or change the
+server-approved research cohort.
+
+An id that is not a non-empty string of at most 200 characters after trimming is
+treated as unidentified, exactly like `identify(null)`. Over-length ids are never
+truncated: a truncated id is a different person.
+
+## Matching your analytics identity
+
+Cohort-targeted cards match against journey cohorts derived from PostHog. Your
+product **must call `posthog.identify()` with the same id it passes Sightspool.**
+If you identify PostHog with an email and Sightspool with an internal UUID, those
+are different identities that never meet — the match rate is a flat zero that
+looks exactly like an empty cohort rather than like a misconfiguration.
 
 ## Script tag
 
@@ -83,7 +103,7 @@ CDN or self-hosted install. npm defaults to `https://www.sightspool.com`.
 | Method | Behavior |
 | --- | --- |
 | `init({ key, audience, endpoint? })` | Start research for the explicit audience; UUID key required. Repeating the same configuration is idempotent. Changing it tears down the previous runtime. |
-| `identify(userId)` | Enable signed-in eligibility; only its boolean presence stays locally. `null` clears it; signed-in-only invitations disappear, all-visitors recruitment continues. |
+| `identify(userId)` | Enable signed-in eligibility, and send that id on the offer request so a cohort-targeted card can match it. Held in memory only, never stored. `null` clears it — as does any value that is not a non-empty string of at most 200 characters after trimming. Signed-in-only invitations disappear; all-visitors recruitment continues. |
 | `pause()` | Pause recruitment, abort the current request and remove the launcher. |
 | `resume()` | Resume recruitment for the configured audience. Does not bypass approval or hours. |
 | `destroy()` | Remove the launcher, listeners and polling. An already opened interview is not silently ended. |
@@ -160,3 +180,40 @@ The npm and browser builds share `src/research.ts`. The Sightspool app copies
 `sdk.global.js` from this package and serves `research-widget.js` as a byte-identical
 alias for recent internal snippets. Neither build imports the former capture engine.
 See `docs/research-sdk-transition.md` for release sequencing. Apache-2.0.
+
+## Embedded interview panel
+
+An available invitation opens one bottom-right panel on the product page. Consent,
+waiting, supported founder audio or Sightspool text conversation, and completion
+remain inside its isolated Sightspool iframe. Minimize or Escape hides the panel;
+Return to interview reopens the same session. Minimize does not mute, end or withdraw.
+Use the explicit in-panel controls to stop audio or delete interview evidence.
+
+Allow the configured Sightspool origin in your site's `frame-src` policy and
+permit microphone delegation to that origin if founder audio is used. Preserve
+other CSP and Permissions Policy restrictions; a host policy may intentionally
+block audio. The iframe requests a microphone only after explicit participant action.
+The frame is restricted to the workspace's saved product origin and exchanges only
+presentation and accepted/ended lifecycle messages with its parent, never interview text, capabilities or audio. Interviews stay in the panel. Privacy and Sightspool attribution links open a separate tab.
+
+Once opened, the panel stays mounted across visibility changes, pause, identity
+changes and SDK destroy/remount, so recruitment cleanup cannot silently end a call.
+Destroy stops further recruitment. The active panel remains reachable until the
+page is left. A full document navigation interrupts media. A tab-scoped marker
+restores the saved interview after reload; the app validates the saved capability
+and a participant must explicitly resume before enabling a microphone. This does
+not promise uninterrupted audio or a founder-phone reconnect grace period.
+
+The launcher uses the approved invitation duration and thank-you label supplied by
+Sightspool. Dismissal leaves a small logo button: the first click restores the
+message and the second opens the interview. After completion or early stopping,
+the small checked button opens the accepted thank-you receipt directly. The app
+minimises after eight seconds once it is safe to close the recording UI. Claim
+instructions come from the frozen interview terms; the SDK issues no rewards.
+Tab restoration supplements the server's contact and capacity rules.
+
+Placement is bottom-right on desktop and bottom-centre up to 560px, with safe-area
+spacing and reduced-motion support. Set `theme: "light" | "dark" | "auto"` in
+`init()` or `data-sightspool-theme` on a script installation; the default is dark.
+Another bottom-right customer widget may require coordinated placement; configurable
+offsets are not supplied.

package/dist/index.cjs

@@ -3,16 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 // src/research.ts
+var MAX_IDENTITY_LENGTH = 200;
 var slot = /* @__PURE__ */ Symbol.for("sightspool.research.runtime.v1");
 var host = () => typeof window === "undefined" ? null : window;
 var current = () => {
   var _a;
   return (_a = host()) == null ? void 0 : _a[slot];
 };
-var eligible = (r) => r.audience === "all_visitors" || r.identified;
+var markerKey = (r) => "sightspool-widget-session:" + r.key;
+function saveMarker(r, value) {
+  try {
+    sessionStorage.setItem(markerKey(r), value);
+  } catch (e) {
+  }
+}
+var eligible = (r) => r.audience === "all_visitors" || r.identity !== null;
 function remove(r) {
   var _a;
-  (_a = r.button) == null ? void 0 : _a.remove();
+  if (r.frame || r.restoring) return;
+  (_a = r.shell) == null ? void 0 : _a.remove();
+  r.shell = null;
+  r.dismiss = null;
   r.button = null;
   r.offer = null;
 }
@@ -26,13 +37,254 @@ function invalidate(r) {
 function status(r, value) {
   r.status = value;
 }
+function renderLauncher(r) {
+  var _a, _b, _c, _d, _e;
+  if (!r.button) return;
+  const iconOnly = r.completed || r.dismissed && !r.expanded;
+  r.button.className = "ss-launcher" + (iconOnly ? " ss-iconOnly" : !r.frame && r.attention ? " ss-attention" : "");
+  const fresh = r.button.children.length === 0;
+  const mark = (_a = r.button.children[0]) != null ? _a : document.createElement("span");
+  mark.className = "ss-launcherMark";
+  if (fresh) {
+    const logo = document.createElement("img");
+    logo.src = r.endpoint + "/sightspool-monomark-dark-bg.svg";
+    logo.width = 29;
+    logo.height = 29;
+    logo.alt = "";
+    mark.appendChild(logo);
+  }
+  const copy = (_b = r.button.children[1]) != null ? _b : document.createElement("span");
+  copy.className = "ss-launcherCopy";
+  copy.setAttribute("aria-hidden", String(iconOnly));
+  const title = (_c = copy.children[0]) != null ? _c : document.createElement("strong");
+  title.textContent = r.completed ? "Your thank-you" : r.expanded ? "Minimise conversation" : r.frame ? "Back to your conversation" : r.copy.title;
+  const subtitle = (_d = copy.children[1]) != null ? _d : document.createElement("small");
+  subtitle.textContent = r.completed ? "Your accepted offer is saved here" : r.frame ? "Return to your interview" : r.copy.subtitle;
+  if (fresh) {
+    copy.appendChild(title);
+    copy.appendChild(subtitle);
+  }
+  const arrow = (_e = r.button.children[2]) != null ? _e : document.createElement("span");
+  arrow.className = "ss-launcherAction";
+  arrow.textContent = r.expanded ? "\u2212" : "\u2192";
+  arrow.setAttribute("aria-hidden", "true");
+  if (fresh) {
+    r.button.appendChild(mark);
+    r.button.appendChild(copy);
+    r.button.appendChild(arrow);
+  }
+  r.button.setAttribute("aria-label", r.completed ? "View your accepted thank-you" : iconOnly ? "Show invitation message" : title.textContent + ". " + subtitle.textContent);
+  if (r.completed && !r.button.children[3]) {
+    const check2 = document.createElement("span");
+    check2.className = "ss-receiptCheck";
+    check2.textContent = "\u2713";
+    check2.setAttribute("aria-hidden", "true");
+    r.button.appendChild(check2);
+  }
+  if (r.dismiss) {
+    r.dismiss.disabled = Boolean(r.frame || r.dismissed);
+    r.dismiss.setAttribute("data-visible", String(!r.frame && !r.dismissed));
+  }
+}
+function mountLauncher(r) {
+  if (r.button) {
+    renderLauncher(r);
+    return;
+  }
+  const shell = document.createElement("aside");
+  shell.className = "ss-widgetPosition";
+  shell.setAttribute("data-theme", r.theme);
+  shell.setAttribute("aria-label", "Sightspool research");
+  const style = document.createElement("style");
+  style.textContent = `.ss-widgetPosition { position: fixed; bottom: max(22px,env(safe-area-inset-bottom)); right: max(24px,env(safe-area-inset-right)); z-index: 60; width: min(366px,calc(100vw - 32px)); pointer-events: none; }
+.ss-widgetPosition > section[data-open="true"], .ss-launcher, .ss-dismissInvitation[data-visible="true"] { pointer-events: auto; }
+.ss-launcherRow { display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; }
+.ss-launcher { position: relative; width: max-content; max-width: 100%; interpolate-size: allow-keywords; height: 64px; min-height: 54px; display: grid; grid-template-columns: 44px minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 8px 19px 8px 9px; color: #fff; background: #18181b; border: 1px solid #ffffff20; border-radius: 999px; box-shadow: 0 8px 32px #18101d30,0 2px 6px #18101d18; text-align: left; transition: width 460ms cubic-bezier(.22,1,.36,1), height 360ms cubic-bezier(.22,1,.36,1), padding 460ms cubic-bezier(.22,1,.36,1), gap 460ms cubic-bezier(.22,1,.36,1), grid-template-columns 460ms cubic-bezier(.22,1,.36,1), transform 180ms, box-shadow 240ms; }
+.ss-launcherGroup { position: relative; max-width: 100%; }
+.ss-dismissInvitation { position: absolute; top: -12px; right: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dfdbe0; border-radius: 50%; background: #fcfaf9; color: #6e6470; box-shadow: 0 2px 8px #18101d15; opacity: 0; transform: scale(.7); visibility: hidden; transition: opacity 140ms, transform 240ms, visibility 0s 240ms; }
+.ss-dismissInvitation[data-visible="true"] { opacity: 1; transform: scale(1); visibility: visible; transition-delay: 220ms,220ms,0s; }
+.ss-dismissInvitation:hover { color: #241e25; background: #eee8ed; }
+.ss-launcher.ss-attention { animation: invitation-enter 450ms cubic-bezier(.2,.8,.2,1) both, invitation-glow 2400ms 450ms ease-in-out; }
+@keyframes invitation-enter { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes invitation-glow { 0%,100% { box-shadow: 0 8px 32px #18101d30,0 0 0 0 #c6fa6400; } 25%,70% { box-shadow: 0 8px 32px #18101d30,0 0 0 5px #c6fa6440,0 0 28px #a8176830; } 48% { box-shadow: 0 8px 32px #18101d30,0 0 0 1px #c6fa6410; } }
+.ss-launcher.ss-iconOnly { position: relative; min-height: 54px; width: 54px; height: 54px; padding: 4px; gap: 0; grid-template-columns: 44px minmax(0,0fr) 0px; box-shadow: 0 3px 14px #18101d20; }
+.ss-compactActiveBadge { position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border: 2px solid #18181b; border-radius: 50%; background: #c6fa64; }
+.ss-launcher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: -5px 0 20px #a8176830,5px 0 18px #c6fa641c,inset 0 0 0 1px #ffffff12; transition: opacity 280ms ease; }
+@media (hover: hover) {
+  .ss-launcher:not(.ss-iconOnly):hover::after { opacity: 1; animation: hover-halo 2200ms ease-in-out infinite; }
+  .ss-launcher:not(.ss-iconOnly):hover .ss-launcherMark::before { animation: hover-logo-glow 2200ms ease-in-out infinite; }
+}
+.ss-launcher:focus-visible::after { opacity: 1; }
+@keyframes hover-halo { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
+@keyframes hover-logo-glow { 0%,100% { opacity: .925; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); filter: brightness(1.18); } }
+.ss-launcherMark { position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; }
+.ss-launcherMark::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 30% 30%,rgb(168 23 104 / 87%),transparent 72%),radial-gradient(ellipse at 74% 68%,rgb(198 250 100 / 50%),transparent 70%); mask-image: radial-gradient(closest-side,#000 59%,transparent 100%); opacity: .925; }
+.ss-launcherMark img { position: relative; }
+.ss-launcherCopy { min-width: 0; overflow: hidden; white-space: nowrap; opacity: 1; transform: translateX(0); transition: opacity 200ms 100ms, transform 360ms cubic-bezier(.22,1,.36,1); }
+.ss-iconOnly .ss-launcherCopy { opacity: 0; transform: translateX(12px); transition-delay: 0s; }
+.ss-launcherAction { display: grid; place-items: center; overflow: hidden; color: #c6fa64; opacity: 1; transition: opacity 180ms 140ms, transform 360ms; }
+.ss-iconOnly .ss-launcherAction { opacity: 0; transform: translateX(8px); transition-delay: 0s; }
+.ss-launcherCopy strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
+.ss-launcherCopy small { display: block; margin-top: 4px; font-size: 12px; color: #d5d0d8; line-height: 1.4; }
+.ss-launcher > svg { flex-shrink: 0; color: #c6fa64; }
+.ss-activeBadge { flex-shrink: 0; width: 8px; height: 8px; background: #c6fa64; border-radius: 50%; box-shadow: 0 0 0 4px #c6fa6418; }
+
+.ss-widgetPosition{z-index:2147483000;font:14px Arial,Helvetica,sans-serif;line-height:1.5}
+.ss-widgetPosition *{box-sizing:border-box}
+.ss-widgetPosition button{font:inherit;cursor:pointer;outline-offset:4px}
+.ss-panel{position:absolute;bottom:calc(100% + 12px);right:0;width:100%;height:610px;max-height:calc(100dvh - max(22px,env(safe-area-inset-bottom)) - 104px);border:1px solid #e7e0e6;border-radius:20px;background:#fcfaf9;color:#241e25;box-shadow:0 16px 64px #18101d26;overflow:hidden;display:flex;flex-direction:column;transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(18px) scale(.82,.2);transition:transform 340ms cubic-bezier(.4,0,.6,1),opacity 180ms,visibility 0s 340ms;pointer-events:none}
+.ss-panel[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:transform 480ms cubic-bezier(.16,1,.3,1),opacity 200ms,visibility 0s;pointer-events:auto}
+.ss-panel>div,.ss-panel>iframe{opacity:0;transition:opacity 120ms}
+.ss-panel[data-open="true"]>div,.ss-panel[data-open="true"]>iframe{opacity:1;transition:opacity 240ms 170ms}
+.ss-panel>div{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #e7e0e6}
+.ss-panel>div>button{border:0;background:transparent;color:#554b58;padding:8px;border-radius:8px}
+.ss-panel iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#fcfaf9}
+[data-theme="dark"] .ss-panel{background:#18181b;color:#fff;border-color:#ffffff1c}
+[data-theme="dark"] .ss-panel>div{border-color:#ffffff1c}
+[data-theme="dark"] .ss-panel>div>button{color:#cbc5cd}
+@media(prefers-color-scheme:dark){[data-theme="auto"] .ss-panel{background:#18181b;color:#fff;border-color:#ffffff1c}[data-theme="auto"] .ss-panel>div{border-color:#ffffff1c}[data-theme="auto"] .ss-panel>div>button{color:#cbc5cd}}
+.ss-receiptCheck{position:absolute;right:0;top:0;display:grid;place-items:center;width:16px;height:16px;border:2px solid #18181b;border-radius:50%;background:#c6fa64;color:#18181b;font-size:10px}
+@media(max-width:560px){.ss-widgetPosition{bottom:max(12px,env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);width:min(366px,calc(100vw - 24px))}.ss-panel{max-height:calc(100dvh - max(12px,env(safe-area-inset-bottom)) - 100px);transform-origin:bottom center}.ss-launcher{gap:10px;padding-right:15px;height:80px}.ss-launcherCopy{white-space:normal}.ss-launcherRow{justify-content:center}}
+@media(prefers-reduced-motion:reduce){.ss-widgetPosition *,.ss-widgetPosition *::before,.ss-widgetPosition *::after{animation:none!important;transition:none!important}}
+`;
+  shell.appendChild(style);
+  const row = document.createElement("div");
+  row.className = "ss-launcherRow";
+  const group = document.createElement("div");
+  group.className = "ss-launcherGroup";
+  const button = document.createElement("button");
+  button.type = "button";
+  const dismiss = document.createElement("button");
+  dismiss.type = "button";
+  dismiss.className = "ss-dismissInvitation";
+  dismiss.textContent = "\xD7";
+  dismiss.setAttribute("aria-label", "Dismiss invitation and keep a small button");
+  dismiss.onclick = () => {
+    r.attention = false;
+    r.dismissed = true;
+    try {
+      sessionStorage.setItem("sightspool-widget-dismissed:" + r.key, "1");
+    } catch (e) {
+    }
+    renderLauncher(r);
+    button.focus();
+  };
+  button.onanimationend = (event) => {
+    if (event.animationName.includes("invitation-glow")) {
+      r.attention = false;
+      renderLauncher(r);
+    }
+  };
+  button.onclick = () => {
+    if (r.completed || r.frame || r.restoring) {
+      if (r.frame) expand(r, !r.expanded);
+      else openPanel(r);
+      return;
+    }
+    if (r.dismissed) {
+      r.attention = false;
+      r.dismissed = false;
+      try {
+        sessionStorage.setItem("sightspool-widget-dismissed:" + r.key, "0");
+      } catch (e) {
+      }
+      renderLauncher(r);
+      return;
+    }
+    if (!r.disposed && !r.paused && eligible(r)) openPanel(r);
+  };
+  group.appendChild(button);
+  group.appendChild(dismiss);
+  row.appendChild(group);
+  shell.appendChild(row);
+  r.shell = shell;
+  r.button = button;
+  r.dismiss = dismiss;
+  document.body.appendChild(shell);
+  renderLauncher(r);
+}
+function expand(r, expanded) {
+  var _a;
+  if (!r.panel || !r.frame || !r.button) return;
+  if (r.expanded === expanded) return;
+  const ownedFocus = r.panel.contains(document.activeElement);
+  r.expanded = expanded;
+  r.panel.setAttribute("data-open", String(expanded));
+  r.panel.setAttribute("aria-hidden", String(!expanded));
+  r.panel.inert = !expanded;
+  r.button.setAttribute("aria-expanded", String(expanded));
+  renderLauncher(r);
+  if (expanded) (_a = r.panel.querySelector("button")) == null ? void 0 : _a.focus();
+  else if (ownedFocus) r.button.focus();
+}
+function openPanel(r) {
+  if (r.frame) {
+    expand(r, true);
+    return;
+  }
+  if (!r.offer && !r.restoring || !r.button || !r.shell) return;
+  const panel = document.createElement("section");
+  panel.className = "ss-panel";
+  panel.id = "sightspool-interview-panel";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "Sightspool interview");
+  const header = document.createElement("div");
+  const title = document.createElement("strong");
+  title.textContent = "Sightspool";
+  const minimize = document.createElement("button");
+  minimize.type = "button";
+  minimize.textContent = "Minimise";
+  const hide = () => expand(r, false);
+  minimize.onclick = hide;
+  header.appendChild(title);
+  header.appendChild(minimize);
+  panel.appendChild(header);
+  const frame = document.createElement("iframe");
+  frame.title = "Sightspool research conversation";
+  frame.allow = "microphone; autoplay; clipboard-write";
+  frame.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
+  frame.referrerPolicy = "no-referrer";
+  const url = new URL(r.endpoint + "/interview-widget");
+  url.searchParams.set("key", r.key);
+  url.searchParams.set("theme", r.theme);
+  url.hash = new URLSearchParams(r.restoring ? { device: r.device, restore: "1" } : { offer: r.offer, device: r.device }).toString();
+  frame.src = url.href;
+  panel.appendChild(frame);
+  panel.onkeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      hide();
+    }
+  };
+  r.panel = panel;
+  r.frame = frame;
+  r.message = (event) => {
+    var _a, _b, _c;
+    if (event.source !== frame.contentWindow || event.origin !== r.endpoint) return;
+    if (((_a = event.data) == null ? void 0 : _a.type) === "sightspool:panel:minimize") hide();
+    if (((_b = event.data) == null ? void 0 : _b.type) === "sightspool:interview:accepted") {
+      saveMarker(r, "active");
+    }
+    if (((_c = event.data) == null ? void 0 : _c.type) === "sightspool:interview:ended") {
+      r.completed = true;
+      saveMarker(r, "ended");
+      renderLauncher(r);
+    }
+  };
+  window.addEventListener("message", r.message);
+  r.button.setAttribute("aria-controls", panel.id);
+  r.shell.appendChild(panel);
+  expand(r, true);
+}
 async function check(r) {
-  if (r.disposed || r.paused || !eligible(r) || r.pending || document.visibilityState !== "visible") return;
+  if (r.frame || r.restoring || r.disposed || r.paused || !eligible(r) || r.pending || document.visibilityState !== "visible") return;
   const generation = r.generation;
   const request = new AbortController();
   r.pending = request;
   const timeout = window.setTimeout(() => request.abort(), 1e4);
   if (!r.button) status(r, "checking");
+  const payload = { operation: "offer", key: r.key, device: r.device };
+  if (r.identity) payload.identity = r.identity;
   try {
     const response = await fetch(r.endpoint + "/widget-offer", {
       method: "POST",
@@ -40,7 +292,7 @@ async function check(r) {
       cache: "no-store",
       referrerPolicy: "no-referrer",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ operation: "offer", key: r.key, device: r.device }),
+      body: JSON.stringify(payload),
       signal: request.signal
     });
     if (!response.ok) throw Error("offer unavailable");
@@ -53,26 +305,10 @@ async function check(r) {
     }
     r.offer = result.offer;
     status(r, "available");
-    if (r.button) return;
-    const button = document.createElement("button");
-    button.type = "button";
-    button.textContent = "Talk to the founder \xB7 5 min";
-    button.setAttribute("aria-label", "Sightspool: join a five-minute user interview");
-    button.style.cssText = "position:fixed;bottom:20px;right:20px;z-index:2147483000;padding:14px 18px;border:0;border-radius:16px;background:#171717;color:white;font:500 14px system-ui;box-shadow:0 8px 30px #0003;cursor:pointer;max-width:calc(100vw - 40px)";
-    button.onclick = () => {
-      try {
-        if (r.disposed || r.paused || !eligible(r) || !r.offer) return;
-        if (r.popup && !r.popup.closed) {
-          r.popup.focus();
-          return;
-        }
-        const hash = new URLSearchParams({ offer: r.offer, device: r.device });
-        r.popup = window.open(r.endpoint + "/interview-widget#" + hash, "sightspool-interview", "popup,width=520,height=760");
-      } catch (e) {
-      }
-    };
-    r.button = button;
-    document.body.appendChild(button);
+    if (result.invitation && typeof result.invitation.title === "string" && typeof result.invitation.subtitle === "string") {
+      r.copy = { title: result.invitation.title.slice(0, 200), subtitle: result.invitation.subtitle.slice(0, 240) };
+    }
+    mountLauncher(r);
   } catch (e) {
     if (!r.disposed && generation === r.generation) {
       remove(r);
@@ -93,6 +329,7 @@ function init(config) {
     if (url.username || url.password) return;
     const previous = current();
     if (previous && previous.key === config.key && previous.endpoint === url.origin && previous.audience === config.audience) return;
+    if ((previous == null ? void 0 : previous.frame) || (previous == null ? void 0 : previous.restoring)) return;
     if (previous) destroy();
     let device = "";
     try {
@@ -108,24 +345,46 @@ function init(config) {
       }
     }
     const r = {
+      theme: config.theme === "light" || config.theme === "auto" ? config.theme : "dark",
       key: config.key,
       endpoint: url.origin,
       audience: config.audience,
-      identified: false,
+      identity: null,
       paused: false,
+      attention: true,
+      dismissed: false,
+      completed: false,
+      restoring: false,
+      copy: { title: "Share your experience", subtitle: "A research conversation" },
+      shell: null,
+      dismiss: null,
       disposed: false,
       generation: 0,
       device,
       offer: null,
       button: null,
-      popup: null,
+      panel: null,
+      frame: null,
+      expanded: false,
+      message: null,
       pending: null,
       timer: 0,
       visibility: () => {
       },
       status: "signed_out"
     };
+    try {
+      r.dismissed = sessionStorage.getItem("sightspool-widget-dismissed:" + r.key) === "1";
+      const marker = sessionStorage.getItem(markerKey(r));
+      r.restoring = marker === "active" || marker === "ended";
+      r.completed = marker === "ended";
+    } catch (e) {
+    }
     browser[slot] = r;
+    if (r.restoring) {
+      mountLauncher(r);
+      return;
+    }
     r.visibility = () => {
       try {
         if (document.visibilityState === "visible") void check(r);
@@ -148,13 +407,14 @@ function identify(userId) {
   try {
     const r = current();
     if (!r) return;
-    const identified = typeof userId === "string" && userId.trim().length > 0;
-    if (!identified && !r.identified) {
+    const trimmed = typeof userId === "string" ? userId.trim() : "";
+    const identity = trimmed.length > 0 && trimmed.length <= MAX_IDENTITY_LENGTH ? trimmed : null;
+    if (identity === r.identity) {
       if (!r.paused && eligible(r)) void check(r);
       return;
     }
     invalidate(r);
-    r.identified = identified;
+    r.identity = identity;
     status(r, r.paused ? "paused" : eligible(r) ? "unavailable" : "signed_out");
     if (eligible(r) && !r.paused) void check(r);
   } catch (e) {
@@ -190,7 +450,7 @@ function destroy() {
     invalidate(r);
     window.clearInterval(r.timer);
     document.removeEventListener("visibilitychange", r.visibility);
-    delete host()[slot];
+    if (!r.frame && !r.restoring) delete host()[slot];
   } catch (e) {
   }
 }