@backmatter/studio 0.0.2 → 0.0.4

package/src/chat/chat-context.ts

@@ -5,17 +5,91 @@ import {
   type EditorFocus,
 } from "../chrome/EditorFocusContext";
 
+/** An element the user pointed at on the site. The agent edits that block, or the quote. */
+export type ChatPointer = {
+  locale: string;
+  type: string;
+  slug: string;
+  blockId: string | null;
+  blockType: string | null;
+  blockIndex: number | null;
+  quote: string;
+};
+
+export const POINTER_CAP = 8;
+
 /** Request context sent with every chat message (mirrors the server's ChatRequestContext). */
 export type ChatRequestContext = {
   focusDoc: DocRef | null;
   selection: { start: number; end: number } | null;
   mentions: DocRef[];
+  pointers: ChatPointer[];
 };
 
+function samePointer(a: ChatPointer, b: ChatPointer): boolean {
+  return (
+    a.locale === b.locale &&
+    a.type === b.type &&
+    a.slug === b.slug &&
+    a.blockId === b.blockId &&
+    a.quote === b.quote
+  );
+}
+
+/** Pointers stored on a sent user message, so the chip can be shown again later. */
+export function pointersFromMetadata(metadata: unknown): ChatPointer[] {
+  if (!metadata || typeof metadata !== "object") return [];
+  const raw = (metadata as { pointers?: unknown }).pointers;
+  if (!Array.isArray(raw)) return [];
+  const pointers: ChatPointer[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const pointer = chatPointerFromGrab(item as ChatPointer, item);
+    if (pointer) pointers.push(pointer);
+  }
+  return pointers.slice(0, POINTER_CAP);
+}
+
+export function addPointer(list: ChatPointer[], next: ChatPointer): ChatPointer[] {
+  if (list.some((item) => samePointer(item, next))) return list;
+  const added = [...list, next];
+  return added.length > POINTER_CAP ? added.slice(added.length - POINTER_CAP) : added;
+}
+
+export function removePointer(list: ChatPointer[], next: ChatPointer): ChatPointer[] {
+  return list.filter((item) => !samePointer(item, next));
+}
+
+export function chatPointerFromGrab(
+  doc: { locale?: unknown; type?: unknown; slug?: unknown },
+  grab: unknown,
+): ChatPointer | null {
+  if (!doc || typeof doc.locale !== "string" || typeof doc.type !== "string" || typeof doc.slug !== "string") {
+    return null;
+  }
+  if (!doc.locale || !doc.type || !doc.slug) return null;
+  if (!grab || typeof grab !== "object") return null;
+  const value = grab as Record<string, unknown>;
+  if (value.blockId !== null && typeof value.blockId !== "string") return null;
+  if (value.blockType !== null && typeof value.blockType !== "string") return null;
+  if (value.blockIndex !== null && typeof value.blockIndex !== "number") return null;
+  if (typeof value.quote !== "string") return null;
+  return {
+    locale: doc.locale,
+    type: doc.type,
+    slug: doc.slug,
+    blockId: value.blockId,
+    blockType: value.blockType,
+    blockIndex: value.blockIndex,
+    quote: value.quote.replace(/\s+/g, " ").trim().slice(0, 240),
+  };
+}
+
 export function buildChatContext(input: {
   focus: EditorFocus | null;
   includeFocus: boolean;
   mentions: DocRef[];
+  pointers: ChatPointer[];
 }): ChatRequestContext {
   const focusDoc = input.includeFocus && input.focus ? input.focus.docRef : null;
   const selection =
@@ -28,7 +102,12 @@ export function buildChatContext(input: {
     if (mentions.some((x) => sameDocRef(x, m))) continue;
     mentions.push({ locale: m.locale, type: m.type, slug: m.slug });
   }
-  return { focusDoc, selection, mentions };
+  const pointers: ChatPointer[] = [];
+  for (const pointer of input.pointers) {
+    if (pointers.some((item) => samePointer(item, pointer))) continue;
+    pointers.push(pointer);
+  }
+  return { focusDoc, selection, mentions, pointers: pointers.slice(-POINTER_CAP) };
 }
 
 export function addMention(list: DocRef[], ref: DocRef): DocRef[] {

package/src/chat/icons.tsx

@@ -15,6 +15,16 @@ function base(size: number) {
   };
 }
 
+export function PublishIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3.25 10.25V13h9.5v-2.75" />
+      <path d="M8 10.25V3" />
+      <path d="M5.25 5.75 8 3l2.75 2.75" />
+    </svg>
+  );
+}
+
 export function SparkIcon({ size = 14 }: Props) {
   return (
     <svg {...base(size)}>
@@ -158,6 +168,16 @@ export function EyeIcon({ size = 14 }: Props) {
   );
 }
 
+/** Crosshair, used to point at an element on the site. */
+export function PointerIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <circle cx="8" cy="8" r="2.2" />
+      <path d="M8 1.8v2.6M8 11.6v2.6M1.8 8h2.6M11.6 8h2.6" />
+    </svg>
+  );
+}
+
 /** Viewfinder corners, used for the include-open-document toggle. */
 export function FocusIcon({ size = 14 }: Props) {
   return (

package/src/chat/session-expiry.ts

@@ -1,10 +1,18 @@
 // 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.
+// session would otherwise show up as a composer error. A framed panel tells
+// its parent. The in-page widget is the top window, so it reports through the
+// Studio config callback the host used to drop the bar.
+
+import { reportUnauthorized } from "../studio-config";
 
 export const SESSION_EXPIRED_MESSAGE = "backmatter:session-expired";
 
+/** A framed panel tells its parent. The top window goes to the dashboard. */
+export function lostSessionTarget(framed: boolean): "parent" | "dashboard" {
+  return framed ? "parent" : "dashboard";
+}
+
 export function fetchNotifyingSessionExpiry(
   origin: string,
   parent: { postMessage: (message: unknown, targetOrigin: string) => void } | null,
@@ -12,9 +20,9 @@ export function fetchNotifyingSessionExpiry(
 ): 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);
-    }
+    if (res.status !== 401) return res;
+    if (parent && origin) parent.postMessage({ type: SESSION_EXPIRED_MESSAGE }, origin);
+    else reportUnauthorized(401);
     return res;
   };
 }

package/src/chrome/OpenSiteButton.tsx

@@ -1,9 +1,9 @@
 // packages/studio/src/chrome/OpenSiteButton.tsx
-// Dashboard-only: mint a site session for the workspace's site and go there.
-// The site then shows the editing bar and its mounted Studio, with no
-// dashboard cookie involved. Same bounce `/enter` runs for a site that asks.
+// Dashboard-only: mint a site session for the workspace's site and open it
+// in a new tab. The tab is opened on the click, then pointed at the site
+// once the ticket exists, so the Studio stays where it is.
 // One site URL opens on click; several show a picker.
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Menu } from "@base-ui/react/menu";
 import * as stylex from "@stylexjs/stylex";
 import { previewEntryUrl, resolveEnterTarget } from "@backmatter/core";
@@ -30,46 +30,55 @@ export function OpenSiteButton({
   userId: string;
   siteUrls: readonly string[];
 }) {
-  const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const opening = useRef(false);
   const sites = openableSites(siteUrls);
   if (sites.length === 0 || !showsOpenSite()) return null;
 
-  async function open(site: string) {
+  function open(site: string) {
+    if (opening.current) return;
     const target = resolveEnterTarget(site, siteUrls);
     if (!target) {
       setError("Site URL is not valid");
       return;
     }
-    setBusy(true);
-    setError(null);
-    try {
-      const { ticket } = await createPreviewTicket(workspaceId, {
-        redirect: target.redirect,
-        tree: userId,
-      });
-      window.location.assign(previewEntryUrl(target.origin, ticket));
-    } catch (err) {
-      setBusy(false);
-      setError(err instanceof Error ? err.message : "Could not open the site");
+    // Open during the click. A tab created after the ticket request is blocked.
+    const tab = window.open("about:blank", "_blank");
+    if (!tab) {
+      setError("Allow pop-ups to open the site");
+      return;
     }
+    tab.opener = null;
+    opening.current = true;
+    setError(null);
+    void (async () => {
+      try {
+        const { ticket } = await createPreviewTicket(workspaceId, {
+          redirect: target.redirect,
+          tree: userId,
+        });
+        tab.location.replace(previewEntryUrl(target.origin, ticket));
+      } catch (err) {
+        tab.close();
+        setError(err instanceof Error ? err.message : "Could not open the site");
+      } finally {
+        opening.current = false;
+      }
+    })();
   }
 
-  const label = <span>{busy ? "Opening…" : "Open site"}</span>;
-
   if (sites.length === 1) {
     const site = sites[0]!;
     return (
       <button
         type="button"
-        disabled={busy}
-        onClick={() => void open(site)}
+        onClick={() => open(site)}
         title={error ?? `Open ${site} with editing on`}
         aria-label="Open site"
         className={cx(styles.trigger)}
       >
         <ExternalIcon />
-        {label}
+        <span>Open site</span>
       </button>
     );
   }
@@ -77,13 +86,12 @@ export function OpenSiteButton({
   return (
     <Menu.Root>
       <Menu.Trigger
-        disabled={busy}
         title={error ?? "Open a site with editing on"}
         aria-label="Open site"
         className={cx(styles.trigger)}
       >
         <ExternalIcon />
-        {label}
+        <span>Open site</span>
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner side="bottom" align="start" sideOffset={6} className={cx(popup.positioner)}>
@@ -92,7 +100,7 @@ export function OpenSiteButton({
               <Menu.Item
                 key={site}
                 label={siteLabel(site)}
-                onClick={() => void open(site)}
+                onClick={() => open(site)}
                 className={(state) =>
                   cx(popup.item, styles.item, state.highlighted && popup.itemHighlighted)
                 }

package/src/index.css

@@ -58,8 +58,16 @@ button[aria-disabled="true"] {
   cursor: grabbing;
 }
 
+/* StyleX colors live in @layer priorityN, which the Vite config orders after
+   `reset`. An unlayered color on `a` would beat them, so a primary link
+   button inherits dark text on a dark fill and the label disappears. */
+@layer reset {
+  a {
+    color: inherit;
+  }
+}
+
 a {
-  color: inherit;
   text-decoration: none;
   cursor: default;
 }

package/src/pages/EmbedChatPage.tsx

@@ -2,6 +2,7 @@
 // The CMS chat, alone, so a site can frame it. The parent posts the open document.
 import { useEffect, useRef } from "react";
 import { ChatPanel } from "../chat/ChatPanel";
+import { chatPointerFromGrab } from "../chat/chat-context";
 import { ChatProvider, ChatSessionScope, useChatUI } from "../chat/ChatProvider";
 import { isPanelVisible } from "../chat/chat-state";
 import {
@@ -19,9 +20,10 @@ export function EmbedChatPage({ workspaceId }: { workspaceId: string }) {
   return (
     <TooltipProvider>
       <EditorFocusProvider>
-        <ChatProvider workspaceId={workspaceId} startOpen>
+        <ChatProvider workspaceId={workspaceId} startOpen pointer>
           <ChatSessionScope>
             <FocusBridge />
+            <PointerBridge />
             <ChatVisibilityBridge />
             <ChatPanel fill />
           </ChatSessionScope>
@@ -77,6 +79,28 @@ function FocusBridge() {
   return null;
 }
 
+function PointerBridge() {
+  const { addPointer } = useChatUI();
+
+  useEffect(() => {
+    const origin = parentOrigin();
+    function onMessage(event: MessageEvent) {
+      if (!origin || event.origin !== origin || event.source !== window.parent) return;
+      const data = event.data as { type?: string; grab?: unknown; doc?: unknown };
+      if (data?.type !== "backmatter:pointer-grab") return;
+      const pointer = chatPointerFromGrab(
+        (data.doc ?? {}) as { locale?: unknown; type?: unknown; slug?: unknown },
+        data.grab,
+      );
+      if (pointer) addPointer(pointer);
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [addPointer]);
+
+  return null;
+}
+
 function ChatVisibilityBridge() {
   const { panel, dispatch } = useChatUI();
   const mode = panel.mode;