@backmatter/studio 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.20",
+    "@backmatter/core": "^0.0.21",
     "@base-ui/react": "^1.6.0",
     "@dnd-kit/abstract": "^0.5.0",
     "@dnd-kit/react": "^0.5.0",

package/src/api.ts

@@ -261,6 +261,10 @@ export function attachGithubInstallation(
   });
 }
 
+export function fetchGithubRepositoryAccess(workspaceId: string) {
+  return api<{ url: string }>(`/workspaces/${workspaceId}/github/repository-access`);
+}
+
 export function fetchGithubRepos(workspaceId: string) {
   return api<{
     repos: Array<{ fullName: string; defaultBranch: string }>;

package/src/chat/ChatPanel.tsx

@@ -55,7 +55,7 @@ export function ChatPanel({ fill = false }: { fill?: boolean } = {}) {
   // one row so toggling the open document doesn't shift the content.
   const contextRows = Math.max(
     1,
-    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length,
+    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length + ui.pointers.length,
   );
   const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
 

package/src/chat/ChatProvider.tsx

@@ -46,8 +46,11 @@ import {
 } from "../chrome/EditorFocusContext";
 import {
   addMention as addMentionTo,
+  addPointer as addPointerTo,
   buildChatContext,
   removeMention as removeMentionFrom,
+  removePointer as removePointerFrom,
+  type ChatPointer,
   type ChatRequestContext,
 } from "./chat-context";
 import {
@@ -85,6 +88,12 @@ export type ChatUIValue = {
   mentions: DocRef[];
   addMention: (ref: DocRef) => void;
   removeMention: (ref: DocRef) => void;
+  /** Elements pointed at on the host site. Only the dev bar chat sets `pointer`. */
+  pointer: boolean;
+  pointers: ChatPointer[];
+  addPointer: (pointer: ChatPointer) => void;
+  removePointer: (pointer: ChatPointer) => void;
+  clearPointers: () => void;
   includeFocus: boolean;
   setIncludeFocus: (v: boolean) => void;
   focus: EditorFocus | null;
@@ -171,10 +180,13 @@ function refFromInput(input: unknown): DocRef | null {
 export function ChatProvider({
   workspaceId,
   startOpen = false,
+  pointer = false,
   children,
 }: {
   workspaceId: string;
   startOpen?: boolean;
+  /** Dev bar chat can point at elements on the host page. */
+  pointer?: boolean;
   children: React.ReactNode;
 }) {
   const [panel, dispatch] = useReducer(
@@ -189,6 +201,7 @@ export function ChatProvider({
   const [freshThread, setFreshThread] = useState(false);
   const [pendingText, setPendingText] = useState<string | null>(null);
   const [mentions, setMentions] = useState<DocRef[]>([]);
+  const [pointers, setPointers] = useState<ChatPointer[]>([]);
   const [includeFocus, setIncludeFocus] = useState(true);
   const [threadsVersion, setThreadsVersion] = useState(0);
   const { focus } = useEditorFocus();
@@ -223,6 +236,7 @@ export function ChatProvider({
     setFreshThread(false);
     setPendingText(null);
     setMentions([]);
+    setPointers([]);
     setIncludeFocus(true);
   }, [workspaceId]);
 
@@ -246,6 +260,7 @@ export function ChatProvider({
     setFreshThread(false);
     setPendingText(null);
     setMentions([]);
+    setPointers([]);
     dispatch({ type: "showChat" });
   }, []);
 
@@ -255,6 +270,13 @@ export function ChatProvider({
   const removeMention = useCallback((ref: DocRef) => {
     setMentions((prev) => removeMentionFrom(prev, ref));
   }, []);
+  const addPointer = useCallback((next: ChatPointer) => {
+    setPointers((prev) => addPointerTo(prev, next));
+  }, []);
+  const removePointer = useCallback((next: ChatPointer) => {
+    setPointers((prev) => removePointerFrom(prev, next));
+  }, []);
+  const clearPointers = useCallback(() => setPointers([]), []);
   const bumpThreads = useCallback(() => setThreadsVersion((v) => v + 1), []);
 
   // Context getter kept in a ref so the session never re-renders because of it.
@@ -262,8 +284,9 @@ export function ChatProvider({
     focusDoc: null,
     selection: null,
     mentions: [],
+    pointers: [],
   }));
-  contextRef.current = () => buildChatContext({ focus, includeFocus, mentions });
+  contextRef.current = () => buildChatContext({ focus, includeFocus, mentions, pointers });
   const modelRef = useRef<string | null>(model);
   modelRef.current = model;
 
@@ -295,6 +318,11 @@ export function ChatProvider({
       mentions,
       addMention,
       removeMention,
+      pointer,
+      pointers,
+      addPointer,
+      removePointer,
+      clearPointers,
       includeFocus,
       setIncludeFocus,
       focus,
@@ -315,6 +343,11 @@ export function ChatProvider({
       mentions,
       addMention,
       removeMention,
+      pointer,
+      pointers,
+      addPointer,
+      removePointer,
+      clearPointers,
       includeFocus,
       focus,
       threadsVersion,

package/src/chat/Composer.tsx

@@ -7,7 +7,8 @@ import { Tooltip } from "../ui/Tooltip";
 import { useChatSession, useChatUI } from "./ChatProvider";
 import { MentionPopover, type MentionKey } from "./MentionPopover";
 import { ModelPicker } from "./ModelPicker";
-import { AtIcon, CloseIcon, FileIcon, FocusIcon, SendIcon, StopIcon } from "./icons";
+import { AtIcon, CloseIcon, FileIcon, FocusIcon, PointerIcon, SendIcon, StopIcon } from "./icons";
+import type { ChatPointer } from "./chat-context";
 import { mentionQueryAt } from "./chat-helpers";
 
 const hover = "@media (hover: hover)";
@@ -22,11 +23,29 @@ function isMentionKey(key: string): key is MentionKey {
   return MENTION_KEYS.has(key);
 }
 
+function pointerKey(pointer: ChatPointer): string {
+  return `${pointer.locale}/${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.quote}`;
+}
+
+function pointerLabel(pointer: ChatPointer): string {
+  const quote = pointer.quote.replace(/\s+/g, " ").trim();
+  const short = quote.length > 42 ? `${quote.slice(0, 41)}…` : quote;
+  if (pointer.blockType && short) return `${pointer.blockType} · “${short}”`;
+  if (pointer.blockType) return pointer.blockType;
+  return short ? `“${short}”` : "element";
+}
+
+function postPointer(on: boolean) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage({ type: "backmatter:pointer", on }, location.origin);
+}
+
 export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const ui = useChatUI();
   const session = useChatSession();
   const [text, setText] = useState("");
   const [mention, setMention] = useState<{ start: number; query: string } | null>(null);
+  const [pointing, setPointing] = useState(false);
   const ref = useRef<HTMLTextAreaElement>(null);
   const boxRef = useRef<HTMLDivElement>(null);
   const mentionKeys = useRef<((key: MentionKey) => void) | null>(null);
@@ -71,13 +90,30 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
     return () => window.removeEventListener("backmatter:chat-prefill", onPrefill);
   }, []);
 
+  useEffect(() => {
+    if (!ui.pointer) return;
+    function onMessage(event: MessageEvent) {
+      if (event.source !== window.parent || event.origin !== location.origin) return;
+      const data = event.data as { type?: string; on?: boolean };
+      if (data?.type !== "backmatter:pointer" || data.on !== false) return;
+      setPointing(false);
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [ui.pointer]);
+
   const submit = useCallback(() => {
     const value = text.trim();
     if (!value || busy) return;
     setText("");
     setMention(null);
+    if (pointing) {
+      setPointing(false);
+      postPointer(false);
+    }
     void session.send(value);
-  }, [text, busy, session]);
+    ui.clearPointers();
+  }, [text, busy, session, ui, pointing]);
 
   function updateMention(el: HTMLTextAreaElement) {
     setMention(mentionQueryAt(el.value, el.selectionStart ?? el.value.length));
@@ -101,7 +137,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const focusChip = ui.focus && ui.includeFocus ? ui.focus.docRef : null;
   const selectionActive =
     ui.focus?.selection && ui.focus.selection.end > ui.focus.selection.start;
-  const hasContext = Boolean(focusChip || ui.mentions.length > 0);
+  const hasContext = Boolean(focusChip || ui.mentions.length > 0 || ui.pointers.length > 0);
 
   return (
     <div {...stylex.props(styles.wrap)}>
@@ -138,6 +174,16 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
                 onRemove={() => ui.removeMention(m)}
               />
             ))}
+            {ui.pointers.map((pointer) => (
+              <ContextRow
+                key={pointerKey(pointer)}
+                icon={<PointerIcon size={13} />}
+                label={pointerLabel(pointer)}
+                meta={`${pointer.type}/${pointer.slug}`}
+                removeLabel={`Remove ${pointerLabel(pointer)}`}
+                onRemove={() => ui.removePointer(pointer)}
+              />
+            ))}
           </div>
       ) : null}
       <div ref={boxRef} {...stylex.props(styles.box)}>
@@ -170,6 +216,11 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               e.preventDefault();
               submit();
             } else if (e.key === "Escape") {
+              if (pointing) {
+                setPointing(false);
+                postPointer(false);
+                return;
+              }
               ui.dispatch({ type: "minimize" });
             }
           }}
@@ -222,6 +273,24 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               </button>
             </Tooltip>
           ) : null}
+          {ui.pointer ? (
+            <Tooltip label={pointing ? "Stop pointing" : "Point at an element on the page"}>
+              <button
+                type="button"
+                aria-label="Point at an element on the page"
+                aria-pressed={pointing}
+                disabled={ui.aiAvailable !== true}
+                onClick={() => {
+                  const next = !pointing;
+                  setPointing(next);
+                  postPointer(next);
+                }}
+                {...stylex.props(styles.iconBtn, pointing && styles.iconBtnActive)}
+              >
+                <PointerIcon />
+              </button>
+            </Tooltip>
+          ) : null}
           <ModelPicker />
           {busy ? (
             <Tooltip label="Stop generating">
@@ -257,13 +326,15 @@ function ContextRow({
   icon,
   type,
   slug,
+  label,
   meta,
   removeLabel,
   onRemove,
 }: {
   icon: React.ReactNode;
-  type: string;
-  slug: string;
+  type?: string;
+  slug?: string;
+  label?: string;
   meta?: string;
   removeLabel: string;
   onRemove: () => void;
@@ -272,8 +343,14 @@ function ContextRow({
     <div {...stylex.props(styles.row)}>
       <span {...stylex.props(styles.rowIcon)}>{icon}</span>
       <span {...stylex.props(styles.rowText)}>
-        <span {...stylex.props(styles.rowType)}>{type}/</span>
-        <span {...stylex.props(styles.rowSlug)}>{slug}</span>
+        {label ? (
+          <span {...stylex.props(styles.rowSlug)}>{label}</span>
+        ) : (
+          <>
+            <span {...stylex.props(styles.rowType)}>{type}/</span>
+            <span {...stylex.props(styles.rowSlug)}>{slug}</span>
+          </>
+        )}
       </span>
       {meta ? <span {...stylex.props(styles.rowMeta)}>{meta}</span> : null}
       <button

package/src/chat/chat-context.ts

@@ -5,17 +5,77 @@ 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
+  );
+}
+
+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 +88,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

@@ -158,6 +158,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,15 @@
 // 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.
+// which holds the bar, so it can drop the editor without navigating.
 
 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,

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;

package/src/pages/GithubConnectPage.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useOutletContext } from "react-router";
 import { bindGithub, fetchGithubRepos, type ApiError } from "../api";
+import { SelectRepositoriesLink } from "./SelectRepositoriesLink";
 import { BackLink } from "../ui/BackLink";
 import { Button, ButtonLink } from "../ui/Button";
 import { Field } from "../ui/Field";
@@ -30,24 +31,43 @@ export function GithubConnectPage() {
 
   useEffect(() => {
     if (!workspaceId) return;
-    void fetchGithubRepos(workspaceId)
-      .then((data) => {
-        setRepos(data.repos);
-        setSelected((current) =>
-          current && data.repos.some((repo) => repo.fullName === current)
-            ? current
-            : (data.repos[0]?.fullName ?? ""),
-        );
-      })
-      .catch((err: Error) => {
-        const code = err.message;
-        setError(
-          code === "github_not_installed" || code === "github_list_failed"
-            ? "The saved GitHub installation is missing or this app cannot access it."
-            : code,
-        );
-      })
-      .finally(() => setLoading(false));
+    let cancelled = false;
+
+    function load() {
+      void fetchGithubRepos(workspaceId)
+        .then((data) => {
+          if (cancelled) return;
+          setRepos(data.repos);
+          setSelected((current) =>
+            current && data.repos.some((repo) => repo.fullName === current)
+              ? current
+              : (data.repos[0]?.fullName ?? ""),
+          );
+          setError(null);
+        })
+        .catch((err: Error) => {
+          if (cancelled) return;
+          const code = err.message;
+          setError(
+            code === "github_not_installed" || code === "github_list_failed"
+              ? "The saved GitHub installation is missing or this app cannot access it."
+              : code,
+          );
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+    }
+
+    load();
+    function onVisible() {
+      if (document.visibilityState === "visible") load();
+    }
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      cancelled = true;
+      document.removeEventListener("visibilitychange", onVisible);
+    };
   }, [workspaceId]);
 
   async function onSubmit(e: React.FormEvent) {
@@ -100,6 +120,7 @@ export function GithubConnectPage() {
               ? "GitHub did not return repositories for the saved installation."
               : "No repositories are available for this installation."}
           </Text>
+          <SelectRepositoriesLink workspaceId={workspaceId} />
           <div>
             <ButtonLink to={settingsPath(workspace.slug, "github")} variant="secondary">
               Back to GitHub settings
@@ -109,7 +130,10 @@ export function GithubConnectPage() {
       ) : (
         <form onSubmit={onSubmit}>
           <Stack>
-            <Field label="Repository">
+            <Field
+              label="Repository"
+              hint="Only repositories granted to the GitHub App are listed."
+            >
               <Select
                 aria-label="Repository"
                 value={selected}
@@ -120,6 +144,7 @@ export function GithubConnectPage() {
                 }))}
               />
             </Field>
+            <SelectRepositoriesLink workspaceId={workspaceId} />
             <Field
               label="Directory"
               hint="Folder inside the repository that contains this site. Leave empty for the repository root."

package/src/pages/SelectRepositoriesLink.tsx

@@ -0,0 +1,30 @@
+// packages/studio/src/pages/SelectRepositoriesLink.tsx
+import { useEffect, useState } from "react";
+import { fetchGithubRepositoryAccess } from "../api";
+import { ButtonLink } from "../ui/Button";
+
+/** Opens the GitHub page where this installation's repository access is chosen. */
+export function SelectRepositoriesLink({ workspaceId }: { workspaceId: string }) {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchGithubRepositoryAccess(workspaceId)
+      .then((data) => {
+        if (!cancelled) setUrl(data.url);
+      })
+      .catch(() => {
+        if (!cancelled) setUrl(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
+  if (!url) return null;
+  return (
+    <ButtonLink href={url} variant="secondary">
+      Select repositories on GitHub
+    </ButtonLink>
+  );
+}

package/src/pages/SettingsGithubPage.tsx

@@ -18,6 +18,7 @@ import * as stylex from "@stylexjs/stylex";
 import { colors, space, type } from "../styles/tokens.stylex";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import { githubConnectPath } from "../workspace-path";
+import { SelectRepositoriesLink } from "./SelectRepositoriesLink";
 
 export function SettingsGithubPage() {
   const { workspace, reload } = useOutletContext<WorkspaceOutletContext>();
@@ -172,6 +173,7 @@ export function SettingsGithubPage() {
                 >
                   Change repository
                 </ButtonLink>
+                <SelectRepositoriesLink workspaceId={workspace.id} />
                 <Button
                   variant="danger"
                   disabled={disconnecting}
@@ -185,9 +187,9 @@ export function SettingsGithubPage() {
         ) : (
           <Stack>
             <Text tone="muted" size="sm">
-              Connect finds the backmatter CMS installation on your GitHub
-              account and opens the repository list here. Saving on GitHub does
-              not return to Backmatter.
+              {workspace.githubInstallationId
+                ? "The list only includes repositories this GitHub App can access. Select repositories on GitHub to grant more. Saving there does not return to Backmatter."
+                : "Connect finds the backmatter CMS installation on your GitHub account and opens the repository list here. Saving on GitHub does not return to Backmatter."}
             </Text>
             {canEdit ? (
               <div {...stylex.props(styles.actions)}>
@@ -210,6 +212,9 @@ export function SettingsGithubPage() {
                     {connecting ? "Connecting…" : "Connect GitHub"}
                   </Button>
                 )}
+                {workspace.githubInstallationId ? (
+                  <SelectRepositoriesLink workspaceId={workspace.id} />
+                ) : null}
                 {installUrl ? (
                   <ButtonLink href={installUrl} newTab={false} variant="secondary">
                     Install on GitHub

package/src/pages/host-env.ts

@@ -13,7 +13,7 @@ export function hostEnvSnippet(input: {
   return [
     `# backmatter.config.ts → workspaceId: "${input.workspaceId}"`,
     "# API defaults to https://api.backmatter.app in production",
-    "# BACKMATTER_API_URL=http://localhost:3001  # local or self-hosted CMS",
+    line("BACKMATTER_WORKSPACE_ID", input.workspaceId),
     line("BACKMATTER_PREVIEW_TOKEN", input.previewToken),
     line("BACKMATTER_HOST_TOKEN", input.hostToken),
     line("BACKMATTER_CONTENT_TOKEN", input.contentToken),

package/src/site.tsx

@@ -1,12 +1,14 @@
 // packages/studio/src/site.tsx
 // Root of a Studio mounted on a customer site. Same pages as the dashboard,
 // one workspace, authenticated by the site session through the host's
-// same-origin proxy. No login here: without a session the browser goes
-// top-level to the dashboard `enter` route and comes back with a ticket.
+// same-origin proxy. A frame with no session tells the parent to drop the
+// bar. The top window goes to the dashboard `enter` route and comes back
+// with a ticket.
 import { useEffect, useState, type ReactNode } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router";
 import { studioEnterUrl } from "@backmatter/core";
+import { lostSessionTarget, SESSION_EXPIRED_MESSAGE } from "./chat/session-expiry";
 import { fetchMe, fetchWorkspace } from "./api";
 import { Shell } from "./components/Shell";
 import { StudioDefinitionProvider, type StudioDefinition } from "./define-studio";
@@ -51,14 +53,16 @@ const ENTER_LOOP_MS = 10_000;
  */
 export function bounceToEnter(workspaceId: string, dashboardUrl: string): boolean {
   if (typeof window === "undefined") return false;
+  const framed = Boolean(window.top && window.top !== window);
+  if (lostSessionTarget(framed) === "parent") {
+    window.parent.postMessage({ type: SESSION_EXPIRED_MESSAGE }, window.location.origin);
+    return true;
+  }
   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()));
-  // 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 }),
+  window.location.assign(
+    studioEnterUrl(dashboardUrl, { workspaceId, returnUrl: window.location.href }),
   );
   return true;
 }