@backmatter/studio 0.0.1 → 0.0.2

package/dist/chunks/{dashboard-XKKZuJGm.js → dashboard-nvFBzpZv.js}

@@ -3,7 +3,7 @@ var Ze = (e, t, n) => t in e ? Qe(e, t, { enumerable: !0, configurable: !0, writ
 var D = (e, t, n) => Ze(e, typeof t != "symbol" ? t + "" : t, n);
 import { jsxs as R, jsx as o, Fragment as be } from "react/jsx-runtime";
 import { useRef as et, useCallback as tt, useSyncExternalStore as nt, useState as E, useEffect as J, Suspense as we, lazy as rt } from "react";
-import { _ as st, $ as Ce, a0 as it, T as O, a1 as at, p as ot, a2 as lt, a3 as Ie, a4 as qe, a5 as Fe, a6 as ct, a7 as ut, W as ze, a8 as dt, a9 as ae, e as V, b as Be, aa as ft, ab as Me, B as ht, S as se, F as Z, I as ee, a as ye, ac as pt, Z as z, ad as gt, M as ve, ae as te, P as mt, af as xt, ag as yt, o as vt, ah as bt, ai as wt, aj as St, A as kt, G as Et, ak as De, L as Rt, al as _t, am as Ot, an as Tt, N as Pt, R as Lt, O as Ut, Q as Nt, U as jt, V as q, X as At, Y as Ct } from "./WorkspaceRoutes-DgRtdie8.js";
+import { _ as st, $ as Ce, a0 as it, T as O, a1 as at, p as ot, a2 as lt, a3 as Ie, a4 as qe, a5 as Fe, a6 as ct, a7 as ut, W as ze, a8 as dt, a9 as ae, e as V, b as Be, aa as ft, ab as Me, B as ht, S as se, F as Z, I as ee, a as ye, ac as pt, Z as z, ad as gt, M as ve, ae as te, P as mt, af as xt, ag as yt, o as vt, ah as bt, ai as wt, aj as St, A as kt, G as Et, ak as De, L as Rt, al as _t, am as Ot, an as Tt, N as Pt, R as Lt, O as Ut, Q as Nt, U as jt, V as q, X as At, Y as Ct } from "./WorkspaceRoutes-DyRVES9t.js";
 const ne = /* @__PURE__ */ Object.create(null), W = (e) => {
   var t, n;
   return ((t = globalThis.process) == null ? void 0 : t.env) || ((n = globalThis.Deno) == null ? void 0 : n.env.toObject()) || globalThis.__env__ || (e ? ne : globalThis);
@@ -1676,7 +1676,7 @@ function vr({
     /* @__PURE__ */ o(Be, { to: "/", variant: "secondary", children: "Back to the dashboard" })
   ] }) }) });
 }
-const Q = De() ? rt(() => import("./UiKitPage-CgNMOqfE.js").then((e) => ({
+const Q = De() ? rt(() => import("./UiKitPage-CTZtLwJ0.js").then((e) => ({
   default: e.UiKitPage
 }))) : null;
 function br(e) {

package/dist/chunks/{index-CFAIR8GH.js → index-Cr-IOgdC.js}

@@ -1,7 +1,7 @@
 var Rs = Object.defineProperty;
 var Es = (r, e, t) => e in r ? Rs(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var M = (r, e, t) => Es(r, typeof e != "symbol" ? e + "" : e, t);
-import { ao as Bt, ap as Bs, aq as a0, ar as ct, as as xt, at as ea, au as Gn, av as Is, aw as Ls, ax as Ds, ay as La, az as Ps, aA as Os, aB as Le, aC as qs } from "./WorkspaceRoutes-DgRtdie8.js";
+import { ao as Bt, ap as Bs, aq as a0, ar as ct, as as xt, at as ea, au as Gn, av as Is, aw as Ls, ax as Ds, ay as La, az as Ps, aA as Os, aB as Le, aC as qs } from "./WorkspaceRoutes-DyRVES9t.js";
 function Fs() {
   return {
     enter: {

package/dist/dashboard.js

@@ -1,5 +1,5 @@
-import { A as a, i as s } from "./chunks/dashboard-XKKZuJGm.js";
-import { J as t, K as f } from "./chunks/WorkspaceRoutes-DgRtdie8.js";
+import { A as a, i as s } from "./chunks/dashboard-nvFBzpZv.js";
+import { J as t, K as f } from "./chunks/WorkspaceRoutes-DyRVES9t.js";
 export {
   a as DashboardApp,
   t as configureStudio,

package/dist/index.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as g } from "react/jsx-runtime";
-import { useLayoutEffect as Y, useEffect as p, useRef as J, useState as v, useMemo as Q } from "react";
-import { i as B, h as X, E as Z, C as ee, j as te, k as ne, l as ie, D as M, m as re, n as _, o as G, q as $, r as oe, T as b, a as C, I as se, s as S, t as ae, v as ce, w as le, x as ue, y as de, z as fe, A as me, G as he, H as ge, J as j, K as P, L as pe, M as ve, N as we, R as be, O as ye, Q as xe, U as ke, V as R, W as D, X as Ee, Y as Ce, Z as Se } from "./chunks/WorkspaceRoutes-DgRtdie8.js";
-import { _ as We } from "./chunks/WorkspaceRoutes-DgRtdie8.js";
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useLayoutEffect as Y, useEffect as g, useRef as J, useState as w, useMemo as Q } from "react";
+import { i as B, h as X, E as Z, C as ee, j as te, k as ne, l as ie, D as M, m as oe, n as _, o as G, q as $, r as re, T as b, a as C, I as se, s as S, t as ae, v as ce, w as le, x as ue, y as de, z as fe, A as me, G as he, H as pe, J as j, K as P, L as ge, M as we, N as ve, R as be, O as ye, Q as xe, U as ke, V as R, W as D, X as Ee, Y as Ce, Z as Se } from "./chunks/WorkspaceRoutes-DyRVES9t.js";
+import { _ as We } from "./chunks/WorkspaceRoutes-DyRVES9t.js";
 import { u as Re, S as ze } from "./chunks/define-studio-BYtYDGLX.js";
 import { d as Je } from "./chunks/define-studio-BYtYDGLX.js";
 const z = {
@@ -15,19 +15,19 @@ function Pe(e) {
 }
 const Ue = [z.accent, z.accentHover, z.focus];
 function Ne() {
-  var t, o;
-  const e = (o = (t = Re().theme) == null ? void 0 : t.accent) == null ? void 0 : o.trim();
+  var t, r;
+  const e = (r = (t = Re().theme) == null ? void 0 : t.accent) == null ? void 0 : r.trim();
   return Y(() => {
     if (!e) return;
-    const a = document.documentElement, s = Ue.map(Pe).filter((r) => !!r);
-    for (const r of s) a.style.setProperty(r, e);
+    const a = document.documentElement, s = Ue.map(Pe).filter((o) => !!o);
+    for (const o of s) a.style.setProperty(o, e);
     return () => {
-      for (const r of s) a.style.removeProperty(r);
+      for (const o of s) a.style.removeProperty(o);
     };
   }, [e]), null;
 }
 function Le({ workspaceId: e }) {
-  return p(() => B(), []), /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(ee, { workspaceId: e, startOpen: !0, children: /* @__PURE__ */ g(te, { children: [
+  return g(() => B(), []), /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(ee, { workspaceId: e, startOpen: !0, children: /* @__PURE__ */ p(te, { children: [
     /* @__PURE__ */ n(Te, {}),
     /* @__PURE__ */ n(Me, {}),
     /* @__PURE__ */ n(ne, { fill: !0 })
@@ -43,46 +43,46 @@ function k() {
 }
 function Te() {
   const { setFocus: e } = ie();
-  return p(() => {
+  return g(() => {
     const t = k();
-    function o(a) {
+    function r(a) {
       if (!t || a.origin !== t) return;
       const s = a.data;
       if ((s == null ? void 0 : s.type) !== "backmatter:focus") return;
-      const r = s.doc;
-      !(r != null && r.locale) || !r.type || !r.slug || e({
-        docRef: { locale: r.locale, type: r.type, slug: r.slug },
+      const o = s.doc;
+      !(o != null && o.locale) || !o.type || !o.slug || e({
+        docRef: { locale: o.locale, type: o.type, slug: o.slug },
         frontmatter: {},
         body: "",
         selection: null
       });
     }
-    return window.addEventListener("message", o), t && window.parent.postMessage({ type: "backmatter:chat-ready" }, t), () => window.removeEventListener("message", o);
-  }, [e]), p(() => {
+    return window.addEventListener("message", r), t && window.parent.postMessage({ type: "backmatter:chat-ready" }, t), () => window.removeEventListener("message", r);
+  }, [e]), g(() => {
     const t = k();
-    function o(a) {
+    function r(a) {
       const s = a.detail;
       !t || !(s != null && s.docRef) || window.parent.postMessage({ type: "backmatter:doc-changed", doc: s.docRef }, t);
     }
-    return window.addEventListener(M, o), () => window.removeEventListener(M, o);
+    return window.addEventListener(M, r), () => window.removeEventListener(M, r);
   }, []), null;
 }
 function Me() {
-  const { panel: e, dispatch: t } = re(), o = e.mode, a = J(o);
-  return p(() => {
+  const { panel: e, dispatch: t } = oe(), r = e.mode, a = J(r);
+  return g(() => {
     const s = k();
     if (!s || window.parent === window) return;
-    const r = _(a.current);
-    a.current = o, r && !_(o) && window.parent.postMessage({ type: "backmatter:chat-closed" }, s);
-  }, [o]), p(() => {
+    const o = _(a.current);
+    a.current = r, o && !_(r) && window.parent.postMessage({ type: "backmatter:chat-closed" }, s);
+  }, [r]), g(() => {
     const s = k();
-    function r(d) {
+    function o(d) {
       var f;
       !s || d.origin !== s || ((f = d.data) == null ? void 0 : f.type) === "backmatter:chat-open" && (t({ type: "open" }), requestAnimationFrame(() => {
         window.dispatchEvent(new Event("backmatter:chat-focus"));
       }));
     }
-    return window.addEventListener("message", r), () => window.removeEventListener("message", r);
+    return window.addEventListener("message", o), () => window.removeEventListener("message", o);
   }, [t]), null;
 }
 const _e = 8e3;
@@ -105,9 +105,9 @@ function q(e) {
 function De({
   workspaceId: e
 }) {
-  p(() => B(), []);
-  const [t, o] = v(null), [a, s] = v("viewer"), [r, d] = v(""), [f, m] = v(null), [c, y] = v(!1), [U, N] = v(null);
-  p(() => {
+  g(() => B(), []);
+  const [t, r] = w(null), [a, s] = w("viewer"), [o, d] = w(""), [f, m] = w(null), [c, y] = w(!1), [U, N] = w(null);
+  g(() => {
     let i = !1;
     return G(e).then((l) => {
       i || s(l.workspace.role);
@@ -116,12 +116,12 @@ function De({
     }), () => {
       i = !0;
     };
-  }, [e]), p(() => {
+  }, [e]), g(() => {
     let i = !1;
     const l = () => {
       S(e).then((u) => {
         if (i) return;
-        o(u);
+        r(u);
         const T = O();
         T && window.parent.postMessage({
           type: "backmatter:git",
@@ -133,15 +133,15 @@ function De({
       });
     };
     l();
-    const w = window.setInterval(l, _e);
+    const v = window.setInterval(l, _e);
     return () => {
-      i = !0, window.clearInterval(w);
+      i = !0, window.clearInterval(v);
     };
   }, [e]);
-  const h = (t == null ? void 0 : t.changes) ?? [], x = $(t), E = ae(x, fe(a)), V = Q(() => h.filter((i) => i.status === "conflict"), [h]), F = oe(h);
+  const h = (t == null ? void 0 : t.changes) ?? [], x = $(t), E = ae(x, fe(a)), V = Q(() => h.filter((i) => i.status === "conflict"), [h]), F = re(h);
   async function L(i, l) {
-    const w = `${q(i)}:${l}`;
-    N(w), m(null);
+    const v = `${q(i)}:${l}`;
+    N(v), m(null);
     try {
       await ce(e, i.locale, i.type, i.slug, l), le({
         workspaceId: e,
@@ -151,7 +151,7 @@ function De({
         status: l === "theirs" ? "clean" : "modified"
       });
       const u = await S(e);
-      o(u);
+      r(u);
     } catch (u) {
       m(u instanceof Error ? u.message : "Resolve failed");
     } finally {
@@ -162,12 +162,12 @@ function De({
     if (i.preventDefault(), !(c || E !== "commit" || h.length === 0)) {
       y(!0), m(null);
       try {
-        const l = await ue(e, r);
+        const l = await ue(e, o);
         d(""), de(e, l.files);
-        const w = O();
-        w && window.parent.postMessage({
+        const v = O();
+        v && window.parent.postMessage({
           type: "backmatter:published"
-        }, w), o(await S(e));
+        }, v), r(await S(e));
       } catch (l) {
         m($e(l));
       } finally {
@@ -176,22 +176,22 @@ function De({
     }
   }
   const W = c ? "Committing…" : x > 0 ? `Resolve ${x} ${x === 1 ? "conflict" : "conflicts"}` : E === "blocked" ? "Writers cannot publish" : h.length === 0 ? "Nothing to publish" : `Deploy ${h.length} ${h.length === 1 ? "change" : "changes"}`;
-  return /* @__PURE__ */ g("form", { className: "x78zum5 xdt5ytf x11cgr9k x1us19tq x9f619 x1t7e3gq x1hb2obb xqjzbou x1vrk1b5", onSubmit: (i) => void H(i), children: [
+  return /* @__PURE__ */ p("form", { className: "x78zum5 xdt5ytf x11cgr9k x1us19tq x9f619 x1t7e3gq x1hb2obb xqjzbou x1vrk1b5", onSubmit: (i) => void H(i), children: [
     /* @__PURE__ */ n(b, { as: "p", size: "sm", weight: "medium", tone: "muted", children: (t == null ? void 0 : t.currentBranch) ?? "Publish" }),
-    h.length === 0 ? /* @__PURE__ */ n(b, { as: "p", size: "sm", tone: "muted", children: "Nothing to publish" }) : /* @__PURE__ */ n("ul", { className: "x1ghz6dp x1717udv xe8uvvx x78zum5 xdt5ytf x1ndbd79", children: h.map((i) => /* @__PURE__ */ g("li", { className: "x78zum5 xdt5ytf x3smv4v", children: [
-      /* @__PURE__ */ g("span", { children: [
+    h.length === 0 ? /* @__PURE__ */ n(b, { as: "p", size: "sm", tone: "muted", children: "Nothing to publish" }) : /* @__PURE__ */ n("ul", { className: "x1ghz6dp x1717udv xe8uvvx x78zum5 xdt5ytf x1ndbd79", children: h.map((i) => /* @__PURE__ */ p("li", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+      /* @__PURE__ */ p("span", { children: [
         i.status,
         " ",
         i.type,
         "/",
         i.slug
       ] }),
-      i.status === "conflict" ? /* @__PURE__ */ g("span", { className: "x78zum5 x3smv4v", children: [
+      i.status === "conflict" ? /* @__PURE__ */ p("span", { className: "x78zum5 x3smv4v", children: [
         /* @__PURE__ */ n(C, { size: "sm", variant: "secondary", disabled: U !== null, onClick: () => void L(i, "mine"), children: "Keep mine" }),
         /* @__PURE__ */ n(C, { size: "sm", variant: "secondary", disabled: U !== null, onClick: () => void L(i, "theirs"), children: "Take theirs" })
       ] }) : null
     ] }, q(i))) }),
-    V.length > 0 ? null : /* @__PURE__ */ n(se, { value: r, placeholder: F, "aria-label": "Commit message", onChange: (i) => d(i.target.value) }),
+    V.length > 0 ? null : /* @__PURE__ */ n(se, { value: o, placeholder: F, "aria-label": "Commit message", onChange: (i) => d(i.target.value) }),
     f ? /* @__PURE__ */ n(b, { as: "p", size: "sm", tone: "danger", children: f }) : null,
     /* @__PURE__ */ n(C, { type: "submit", size: "sm", disabled: c || E !== "commit" || h.length === 0, children: W })
   ] });
@@ -199,11 +199,14 @@ function De({
 const I = "backmatter:enter-at", Oe = 1e4;
 function K(e, t) {
   if (typeof window > "u") return !1;
-  const o = Number(window.sessionStorage.getItem(I) ?? 0);
-  return Date.now() - o < Oe ? !1 : (window.sessionStorage.setItem(I, String(Date.now())), window.location.assign(ge(t, {
+  const r = Number(window.sessionStorage.getItem(I) ?? 0);
+  if (Date.now() - r < Oe) return !1;
+  window.sessionStorage.setItem(I, String(Date.now()));
+  const a = window.top && window.top !== window ? window.top : window;
+  return a.location.assign(pe(t, {
     workspaceId: e,
-    returnUrl: window.location.href
-  })), !0);
+    returnUrl: a.location.href
+  })), !0;
 }
 function qe(e) {
   const t = e.dashboardUrl ?? "https://dash.backmatter.app";
@@ -215,22 +218,22 @@ function qe(e) {
     version: e.version,
     dashboardUrl: t,
     onUnauthorized: ({
-      status: o
+      status: r
     }) => {
-      o === 401 && K(e.workspaceId, t);
+      r === 401 && K(e.workspaceId, t);
     }
   }), P();
 }
 function Ve(e) {
-  const t = e.basePath ?? "/backmatter", [o] = v(() => qe(e));
-  return /* @__PURE__ */ n(ze, { definition: e.studio, children: /* @__PURE__ */ g(me, { children: [
+  const t = e.basePath ?? "/backmatter", [r] = w(() => qe(e));
+  return /* @__PURE__ */ n(ze, { definition: e.studio, children: /* @__PURE__ */ p(me, { children: [
     /* @__PURE__ */ n(Ne, {}),
     /* @__PURE__ */ n(he, { basename: t, children: /* @__PURE__ */ n(Ie, { ...e }) })
   ] }) });
 }
 function Ie(e) {
-  const t = pe(), o = e.dashboardUrl ?? "https://dash.backmatter.app", [a, s] = v("loading");
-  if (p(() => {
+  const t = ge(), r = e.dashboardUrl ?? "https://dash.backmatter.app", [a, s] = w("loading");
+  if (g(() => {
     let f = !1;
     const m = P().onUnauthorized;
     return j({
@@ -238,10 +241,10 @@ function Ie(e) {
       onUnauthorized: (c) => {
         c.status === 426 ? s("outdated") : m == null || m(c);
       }
-    }), ve().then(async (c) => {
+    }), we().then(async (c) => {
       if (f) return;
       if (!(c != null && c.user)) {
-        K(e.workspaceId, o) || s("unauthorized");
+        K(e.workspaceId, r) || s("unauthorized");
         return;
       }
       const {
@@ -259,9 +262,9 @@ function Ie(e) {
     }), () => {
       f = !0;
     };
-  }, [e.workspaceId, o]), a === "loading") return /* @__PURE__ */ n(we, {});
+  }, [e.workspaceId, r]), a === "loading") return /* @__PURE__ */ n(ve, {});
   if (a === "outdated")
-    return /* @__PURE__ */ g(A, { title: "This site's editor is out of date", children: [
+    return /* @__PURE__ */ p(A, { title: "This site's editor is out of date", children: [
       "Update ",
       /* @__PURE__ */ n("code", { children: "@backmatter/studio" }),
       " and ",
@@ -269,18 +272,18 @@ function Ie(e) {
       " on the site, then reload."
     ] });
   if (a === "unauthorized")
-    return /* @__PURE__ */ g(A, { title: "Could not start editing", children: [
+    return /* @__PURE__ */ p(A, { title: "Could not start editing", children: [
       "The site did not receive a session from the dashboard. Check that this site's origin is listed in the workspace settings and that ",
       /* @__PURE__ */ n("code", { children: "/api/backmatter" }),
       " routes are deployed."
     ] });
-  const r = t.pathname.match(/^\/embed\/chat\/([^/]+)\/?$/);
-  if (r != null && r[1])
-    return /* @__PURE__ */ n(Le, { workspaceId: decodeURIComponent(r[1]) });
+  const o = t.pathname.match(/^\/embed\/chat\/([^/]+)\/?$/);
+  if (o != null && o[1])
+    return /* @__PURE__ */ n(Le, { workspaceId: decodeURIComponent(o[1]) });
   const d = t.pathname.match(/^\/embed\/publish\/([^/]+)\/?$/);
   return d != null && d[1] ? /* @__PURE__ */ n(De, { workspaceId: decodeURIComponent(d[1]) }) : /* @__PURE__ */ n(be, { user: a.user, children: /* @__PURE__ */ n(ye, { children: /* @__PURE__ */ n(xe, { userId: a.user.id, email: a.user.email, onLogout: () => {
-    Ae(e.previewEntryPath ?? "/api/backmatter/preview", o);
-  }, children: /* @__PURE__ */ g(ke, { children: [
+    Ae(e.previewEntryPath ?? "/api/backmatter/preview", r);
+  }, children: /* @__PURE__ */ p(ke, { children: [
     /* @__PURE__ */ n(R, { path: "/", element: /* @__PURE__ */ n(D, { to: `/${a.slug}`, replace: !0 }) }),
     /* @__PURE__ */ n(R, { path: "/workspaces/:workspaceId/*", element: /* @__PURE__ */ n(Ee, {}) }),
     Ce(),
@@ -301,7 +304,7 @@ function A({
   title: e,
   children: t
 }) {
-  return /* @__PURE__ */ n("div", { className: "x1ov3xa9 xrvj5dj x1ku5rj1 x1t7e3gq", children: /* @__PURE__ */ g("div", { className: "x78zum5 xdt5ytf x1ndbd79 xq2pcee x1t7e3gq x4pepcl x1d0qn7y", children: [
+  return /* @__PURE__ */ n("div", { className: "x1ov3xa9 xrvj5dj x1ku5rj1 x1t7e3gq", children: /* @__PURE__ */ p("div", { className: "x78zum5 xdt5ytf x1ndbd79 xq2pcee x1t7e3gq x4pepcl x1d0qn7y", children: [
     /* @__PURE__ */ n(b, { size: "lg", weight: "medium", children: e }),
     /* @__PURE__ */ n(b, { tone: "muted", children: t })
   ] }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {

package/src/chat/ChatProvider.tsx

@@ -63,6 +63,7 @@ import {
   type PanelAction,
   type PanelState,
 } from "./chat-state";
+import { fetchNotifyingSessionExpiry } from "./session-expiry";
 
 // ---------------------------------------------------------------------------
 // UI-level context (panel, thread selection, model, chips)
@@ -513,6 +514,10 @@ function LiveSession({
         api: aiMessagesUrl(workspaceId, threadId),
         credentials: apiCredentials(),
         headers: apiHeaders(),
+        fetch: fetchNotifyingSessionExpiry(
+          typeof location === "undefined" ? "" : location.origin,
+          typeof window !== "undefined" && window.parent !== window ? window.parent : null,
+        ),
         prepareSendMessagesRequest: ({ messages, body }) => ({
           body: {
             message: messages[messages.length - 1],

package/src/chat/session-expiry.ts

@@ -0,0 +1,20 @@
+// packages/studio/src/chat/session-expiry.ts
+// The chat send does not go through the Studio API helper, so a dead site
+// session would otherwise show up as a composer error. Tell the parent page,
+// which holds the bar, so it can sign the editor back in.
+
+export const SESSION_EXPIRED_MESSAGE = "backmatter:session-expired";
+
+export function fetchNotifyingSessionExpiry(
+  origin: string,
+  parent: { postMessage: (message: unknown, targetOrigin: string) => void } | null,
+  base: typeof fetch = fetch,
+): typeof fetch {
+  return async (input, init) => {
+    const res = await base(input, init);
+    if (res.status === 401 && parent && origin) {
+      parent.postMessage({ type: SESSION_EXPIRED_MESSAGE }, origin);
+    }
+    return res;
+  };
+}

package/src/site.tsx

@@ -54,8 +54,11 @@ export function bounceToEnter(workspaceId: string, dashboardUrl: string): boolea
   const last = Number(window.sessionStorage.getItem(ENTER_GUARD_KEY) ?? 0);
   if (Date.now() - last < ENTER_LOOP_MS) return false;
   window.sessionStorage.setItem(ENTER_GUARD_KEY, String(Date.now()));
-  window.location.assign(
-    studioEnterUrl(dashboardUrl, { workspaceId, returnUrl: window.location.href }),
+  // A panel is a frame of this site. Send the top window, or the login form
+  // appears inside the chat instead of taking the page.
+  const nav = window.top && window.top !== window ? window.top : window;
+  nav.location.assign(
+    studioEnterUrl(dashboardUrl, { workspaceId, returnUrl: nav.location.href }),
   );
   return true;
 }