feat(editor): Embed Studio button in the top bar

Adds a chart button to the TopBar that opens the Embed Studio. Smart entry
point: when charts already exist it opens the studio on one of them (prefers
a real chart over the always-present banner) without mutating the document;
only when there is no chart does it fall back to inserting a fresh one,
mirroring the slash menu's "New Chart" flow. Both paths route through the
existing `open-embed-studio` event so session/key handling stays in one place.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.tsx

@@ -230,6 +230,54 @@ export default function App() {
     [],
   );
 
+  // Global entry point for the Embed Studio (TopBar button). Smart
+  // behaviour: if charts already exist, open the studio on one of them
+  // (browse/edit mode via the FilesSidebar) without touching the
+  // document. Only when there is no chart at all do we fall back to
+  // creating a fresh one - mirroring the slash menu's "New Chart" flow.
+  // Both paths route through the existing `open-embed-studio` listener
+  // so session/key handling stays in one place.
+  const handleOpenEmbedStudio = useCallback(() => {
+    const keys = embedStore ? embedStore.keys() : [];
+    if (keys.length > 0) {
+      // Prefer a real chart over the always-present banner so the
+      // studio lands on content the user most likely wants to tweak.
+      const preferred = keys.find((k) => k !== "banner.html") ?? keys[0];
+      window.dispatchEvent(
+        new CustomEvent("open-embed-studio", { detail: { src: preferred } }),
+      );
+      return;
+    }
+
+    const editor = editorRef.current;
+    if (!editor) return;
+    const id = `d3-chart-${Date.now().toString(36)}`;
+    const src = `${id}.html`;
+    (editor.chain().focus() as any).insertHtmlEmbed().run();
+    setTimeout(() => {
+      const { doc } = editor.state;
+      let targetPos = -1;
+      doc.descendants((node, pos) => {
+        if (node.type.name === "htmlEmbed" && !node.attrs.src) {
+          targetPos = pos;
+          return false;
+        }
+      });
+      if (targetPos >= 0) {
+        editor.view.dispatch(
+          editor.state.tr.setNodeMarkup(targetPos, undefined, {
+            ...editor.state.doc.nodeAt(targetPos)?.attrs,
+            src,
+            title: "New chart",
+          }),
+        );
+      }
+      window.dispatchEvent(
+        new CustomEvent("open-embed-studio", { detail: { src } }),
+      );
+    }, 50);
+  }, [embedStore]);
+
   // When the user opens the chat with an active selection, broadcast it
   // via Yjs awareness so every collaborator (including us) sees a
   // persistent highlight "my agent is working on this range". The
@@ -1104,6 +1152,7 @@ export default function App() {
         onOpenSettings={() => setSettingsOpen(true)}
         onOpenPublish={openPublishDialog}
         onOpenMobileToc={() => setTocSidebarOpen(true)}
+        onOpenEmbedStudio={handleOpenEmbedStudio}
       />
 
       {!isEditorReady && (

frontend/src/components/TopBar.tsx

@@ -7,6 +7,7 @@ import {
   Settings,
   Upload,
   Eye,
+  BarChart3,
   Sun,
   Moon,
   Menu,
@@ -50,6 +51,11 @@ interface TopBarProps {
   onOpenSettings: () => void;
   onOpenPublish: () => void;
   onOpenMobileToc: () => void;
+  /**
+   * Open the Embed Studio from the toolbar. Smart entry point: lands on
+   * an existing chart when there is one, otherwise creates a new chart.
+   */
+  onOpenEmbedStudio: () => void;
 }
 
 /**
@@ -72,6 +78,7 @@ export function TopBar({
   onOpenSettings,
   onOpenPublish,
   onOpenMobileToc,
+  onOpenEmbedStudio,
 }: TopBarProps) {
   const publishTooltip = !canEdit
     ? "Read-only access - you don't have write rights on this Space"
@@ -202,6 +209,15 @@ export function TopBar({
           <Settings size={18} />
         </button>
       </Tooltip>
+      <Tooltip title="Embed Studio (charts)">
+        <button
+          className="icon-btn"
+          onClick={onOpenEmbedStudio}
+          aria-label="Open Embed Studio"
+        >
+          <BarChart3 size={18} />
+        </button>
+      </Tooltip>
       <Tooltip title="Preview article">
         <button
           className="icon-btn"