carbon-tokenization

Running

tfrere HF Staff commited on Apr 23

Commit

08e4c7a

1 Parent(s): 8fc8501

fix(ui,publisher): kill theme/color flickers and translation prompts

- Published page and its banner iframe now inline a synchronous theme
bootstrap in <head>, so the first paint already uses the correct
data-theme (no dark -> light flicker on navigation).
- <meta name="google|robots" content="notranslate"> on both the
editor (frontend/index.html) and the published article so Chrome
stops proposing to translate the page to French.
- CollaborationCursorV3: silence a peer's caret + label (via the
.collaboration-cursor--silenced class) when that same peer also
broadcasts an agentFocus. Fixes the duplicate "<Name>" + "<Name>
agent" labels that stacked while a chat action was active.
- Embed Studio preview container pinned to --page-bg and the iframe
element forced to background: transparent + color-scheme: light
dark, so the preview tracks dark mode instead of falling through
to the browser's default white.
- App.tsx primaryHue sync: when the Yjs settings map has no
primaryHue (fresh state or after reset-article), drop the inline
--primary-base override so the CSS default from _variables.css
wins. No more unmotivated hue jump at demo boot.
- Boot overlay spinner (.spinner--lg) painted with --muted-color
instead of --primary-color so it no longer flashes from the
default warm yellow to the article's overridden hue while Yjs
is syncing.
- html-renderer snapshot regenerated to reflect the theme bootstrap
and notranslate metas.

Made-with: Cursor

Files changed (8) hide show

backend/src/publisher/html-renderer.ts +38 -1
backend/src/shared/embed-doc.ts +50 -0
backend/tests/__snapshots__/html-renderer-snapshot.test.ts.snap +38 -1
frontend/index.html +10 -0
frontend/src/App.tsx +614 -115
frontend/src/editor/extensions/collaboration-cursor-v3.ts +24 -6
frontend/src/styles/_ui.css +178 -9
frontend/src/styles/editor/_chrome.css +7 -0

backend/src/publisher/html-renderer.ts CHANGED Viewed

@@ -74,11 +74,48 @@ export async function renderArticleHTML(
   const safeDesc = escapeHtml(meta.description);
   let result = `<!DOCTYPE html>
-<html lang="en" data-theme="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${safeTitle}</title>
   <meta name="description" content="${safeDesc}">
   <meta name="author" content="${escapeHtml(authorsStr)}">

   const safeDesc = escapeHtml(meta.description);
   let result = `<!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!--
+    Opt out of Chrome/Edge/Firefox in-browser translation. The article
+    body is authored in English and contains inline math / code that
+    the translator would happily garble. These metas tell the browser
+    to never surface the translate prompt even on non-English OS
+    locales. The google-named tag is the historical Chrome opt-out;
+    most other engines read the same tag.
+  -->
+  <meta name="google" content="notranslate">
+  <meta name="robots" content="notranslate">
   <title>${safeTitle}</title>
+  <!--
+    Blocking theme bootstrap (runs before any CSS is parsed).
+    Sets <html data-theme> to the user's preferred mode so the
+    FIRST paint already uses the right palette - no dark->light
+    flash on a "light preference" browser. Must stay:
+      - inline (no network dependency)
+      - synchronous (no async/defer)
+      - placed BEFORE <style> in <head>
+    The rest of the theme logic (toggle button, icon swap, live
+    media-query sync) still runs at end-of-body where it is less
+    critical.
+  -->
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('theme');
+        var prefersDark = window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var mode = saved || (prefersDark ? 'dark' : 'light');
+        document.documentElement.setAttribute('data-theme', mode);
+        document.documentElement.style.colorScheme = mode;
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
   <meta name="description" content="${safeDesc}">
   <meta name="author" content="${escapeHtml(authorsStr)}">

backend/src/shared/embed-doc.ts CHANGED Viewed

@@ -114,6 +114,51 @@ const HEIGHT_REPORTER = `
 })();
 `.trim();
 /**
  * Theme listener: swap CSS variables via [data-theme] without reloading.
  * Also supports live primary-color updates and invokes window.__chartRerender
@@ -235,6 +280,11 @@ export function buildEmbedSrcdoc(htmlFragment: string, opts: BuildEmbedSrcdocOpt
     `<html data-theme="${themeAttr}">`,
     "<head>",
     '<meta charset="UTF-8">',
     `<style>${BASE_STYLES}${inlinePrimary}${extraStyles}</style>`,
     `<script>${COLOR_PALETTES_POLYFILL}<\/script>`,
     "</head>",

 })();
 `.trim();
+/**
+ * Synchronous pre-paint theme bootstrap.
+ *
+ * Runs BEFORE the iframe's own <style> applies, so the first paint already
+ * uses the correct theme + primary color and the banner/chart never flashes
+ * from the default (light / #4e79a7) to the user-selected theme.
+ *
+ * Strategy (tried in order, first hit wins):
+ *   1. parent.documentElement[data-theme] + parent's computed --primary-color
+ *      → works in published articles, the editor, and any embed sharing
+ *        origin with its host (we rely on `allow-same-origin` being set).
+ *   2. localStorage.theme (same origin as parent).
+ *   3. matchMedia('(prefers-color-scheme: dark)').
+ *
+ * All accesses are wrapped in try/catch: if the iframe is cross-origin or
+ * sandboxed, we silently fall back to the server-provided defaults baked
+ * into the srcdoc (`data-theme`, `--primary-color`) and the postMessage
+ * setTheme path still works as a safety net.
+ */
+const THEME_BOOTSTRAP = `
+(function(){
+  try {
+    var theme = null;
+    var primary = null;
+    try {
+      var parentDoc = window.parent && window.parent.document;
+      if (parentDoc) {
+        theme = parentDoc.documentElement.getAttribute('data-theme') || null;
+        var pc = getComputedStyle(parentDoc.documentElement).getPropertyValue('--primary-color');
+        if (pc) primary = pc.trim();
+      }
+    } catch(e) {}
+    if (!theme) {
+      try { theme = window.localStorage && window.localStorage.getItem('theme'); } catch(e) {}
+    }
+    if (!theme) {
+      theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
+    if (primary) document.documentElement.style.setProperty('--primary-color', primary);
+  } catch(e) {}
+})();
+`.trim();
 /**
  * Theme listener: swap CSS variables via [data-theme] without reloading.
  * Also supports live primary-color updates and invokes window.__chartRerender
     `<html data-theme="${themeAttr}">`,
     "<head>",
     '<meta charset="UTF-8">',
+    // Pre-paint theme bootstrap MUST come before the <style> block so the
+    // correct [data-theme] attribute is in place when the default tokens
+    // cascade applies. Otherwise the iframe flashes from server-default to
+    // client theme once the postMessage listener kicks in post-load.
+    `<script>${THEME_BOOTSTRAP}<\/script>`,
     `<style>${BASE_STYLES}${inlinePrimary}${extraStyles}</style>`,
     `<script>${COLOR_PALETTES_POLYFILL}<\/script>`,
     "</head>",

backend/tests/__snapshots__/html-renderer-snapshot.test.ts.snap CHANGED Viewed

@@ -2,11 +2,48 @@
 exports[`snapshot - full render > matches snapshot for a typical article 1`] = `
 "<!DOCTYPE html>
-<html lang="en" data-theme="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test Article</title>
   <meta name="description" content="A test article">
   <meta name="author" content="Alice">

 exports[`snapshot - full render > matches snapshot for a typical article 1`] = `
 "<!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!--
+    Opt out of Chrome/Edge/Firefox in-browser translation. The article
+    body is authored in English and contains inline math / code that
+    the translator would happily garble. These metas tell the browser
+    to never surface the translate prompt even on non-English OS
+    locales. The google-named tag is the historical Chrome opt-out;
+    most other engines read the same tag.
+  -->
+  <meta name="google" content="notranslate">
+  <meta name="robots" content="notranslate">
   <title>Test Article</title>
+  <!--
+    Blocking theme bootstrap (runs before any CSS is parsed).
+    Sets <html data-theme> to the user's preferred mode so the
+    FIRST paint already uses the right palette - no dark->light
+    flash on a "light preference" browser. Must stay:
+      - inline (no network dependency)
+      - synchronous (no async/defer)
+      - placed BEFORE <style> in <head>
+    The rest of the theme logic (toggle button, icon swap, live
+    media-query sync) still runs at end-of-body where it is less
+    critical.
+  -->
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('theme');
+        var prefersDark = window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var mode = saved || (prefersDark ? 'dark' : 'light');
+        document.documentElement.setAttribute('data-theme', mode);
+        document.documentElement.style.colorScheme = mode;
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
   <meta name="description" content="A test article">
   <meta name="author" content="Alice">

frontend/index.html CHANGED Viewed

@@ -3,6 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Research Article Template Editor</title>
     <script>
       (function() {

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--
+      Opt out of browser in-page translation. The editor chrome is
+      English, and translating it mid-demo would rewrite slash-menu
+      labels, toolbar tooltips, and the document body - which would
+      corrupt the Yjs state. These metas silence the "Translate to X?"
+      prompt on non-English OS locales (Chrome reads the `google` tag,
+      other engines read `robots`).
+    -->
+    <meta name="google" content="notranslate" />
+    <meta name="robots" content="notranslate" />
     <title>Research Article Template Editor</title>
     <script>
       (function() {

frontend/src/App.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect } from "react";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { UndoManager } from "yjs";
 import type * as Y from "yjs";
@@ -19,6 +19,7 @@ import { usePublishStatus } from "./hooks/usePublishStatus";
 import type { CommentStore } from "./editor/comments";
 import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
 import type { EmbedStore } from "./editor/embeds/embed-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
 import { SettingsDrawer } from "./editor/frontmatter/SettingsDrawer";
 import { EditorFooter } from "./editor/EditorFooter";
@@ -72,11 +73,11 @@ export default function App() {
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
   const [frontmatterStore, setFrontmatterStore] = useState<FrontmatterStore | null>(null);
   const [embedStore, setEmbedStore] = useState<EmbedStore | null>(null);
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
   const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
-  const [hasSelection, setHasSelection] = useState(false);
   // --- UI state ---------------------------------------------------------
@@ -84,6 +85,12 @@ export default function App() {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
   const [embedStudioSrc, setEmbedStudioSrc] = useState<string | null>(null);
   const [tocSidebarOpen, setTocSidebarOpen] = useState(false);
   const [tocAutoCollapse, setTocAutoCollapse] = useState(false);
@@ -168,6 +175,13 @@ export default function App() {
         // Only override --primary-base: _variables.css derives --primary-color
         // and --primary-color-hover from it via CSS relative-color syntax.
         document.documentElement.style.setProperty("--primary-base", oklchFromHue(h));
       }
     };
     sync();
@@ -179,22 +193,75 @@ export default function App() {
   useEffect(() => {
     const handler = (e: Event) => {
       const src = (e as CustomEvent).detail?.src;
-      if (src) setEmbedStudioSrc(src);
     };
     window.addEventListener("open-embed-studio", handler);
     return () => window.removeEventListener("open-embed-studio", handler);
   }, []);
-  // Track whether the editor has a non-empty selection (for chat quick actions)
   useEffect(() => {
     if (!editorInstance) return;
-    const handler = () => {
       const { from, to } = editorInstance.state.selection;
-      setHasSelection(from !== to);
     };
-    editorInstance.on("selectionUpdate", handler);
-    return () => { editorInstance.off("selectionUpdate", handler); };
-  }, [editorInstance]);
   // --- Chat / agent -----------------------------------------------------
@@ -228,7 +295,7 @@ export default function App() {
   }, [chatUserId]);
   // Dev-only hook: let the demo recording script script-drive the main
-  // chat panel. The Playwright trio script dispatches `__demo-chat` to:
   //   - open the floating chat panel,
   //   - inject a fake user prompt + assistant reply,
   //   - optionally rewrite a paragraph in the editor body,
@@ -240,7 +307,38 @@ export default function App() {
         | {
             open?: boolean;
             messages?: UIMessage[];
-            replace?: { from: string; to: string };
           }
         | undefined;
       if (typeof detail?.open === "boolean") setChatOpen(detail.open);
@@ -251,132 +349,477 @@ export default function App() {
         const editor = editorRef.current;
         const target = detail.replace.from;
         const replacement = detail.replace.to;
-        // Robust target lookup: ProseMirror text can be split across
-        // multiple text nodes within the same block (marks, Yjs splits),
-        // so we walk textblocks and search the joined textContent rather
-        // than individual text nodes. `textBetween` on the block gives
-        // us a char-accurate string whose offsets map directly to PM
-        // positions inside that block.
-        let from = -1;
-        let to = -1;
-        editor.state.doc.descendants((node, pos) => {
-          if (from !== -1) return false;
-          if (node.isTextblock) {
-            const text = node.textBetween(0, node.content.size, "\n", "\n");
-            const idx = text.indexOf(target);
-            if (idx !== -1) {
-              from = pos + 1 + idx;
-              to = from + target.length;
-              return false;
             }
           }
-          return true;
-        });
-        if (from === -1 || to === -1) {
-          console.warn(
-            "[__demo-chat] replace target not found:",
-            target.slice(0, 40) + (target.length > 40 ? "..." : ""),
-          );
-          return;
-        }
-        // Resolve the paragraph DOM element once so we can both scroll
-        // it into view AND flag it with a highlight class for the
-        // duration of the animation (see `.demo-agent-rewriting` in
-        // _ui.css). Without that visual cue the rewrite can be hard
-        // to spot when the chat panel is open and the viewer's eyes
-        // are in the chat.
-        //
-        // If the demo script previously marked this paragraph as
-        // `.demo-agent-pending` (badge + breathing border) we prefer
-        // that element: it's the exact node the viewer has been looking
-        // at while the chat was streaming. Falling back to a PM
-        // position lookup keeps the handler usable outside the demo.
-        let paragraphEl: HTMLElement | null =
-          document.querySelector<HTMLElement>(".demo-agent-pending");
-        if (!paragraphEl) {
           try {
-            const domAt = editor.view.domAtPos(from);
             let el: HTMLElement | null =
               domAt.node instanceof HTMLElement
                 ? domAt.node
                 : domAt.node.parentElement;
-            while (el && el.nodeName !== "P" && !/^H[1-6]$/.test(el.nodeName)) {
               el = el.parentElement;
             }
-            paragraphEl = el;
           } catch {
             /* non-fatal */
           }
         }
-        // Animated rewrite: highlight target first so the viewer sees
-        // what the agent is about to change, then delete and retype the
-        // replacement character by character for a visible, live feel.
-        editor.chain().focus().setTextSelection({ from, to }).run();
-        if (paragraphEl) {
-          // Swap pending -> rewriting so the badge stays visible but
-          // the border animation ramps up from "thinking" to "writing".
-          paragraphEl.classList.remove("demo-agent-pending");
-          paragraphEl.classList.add("demo-agent-rewriting");
-          if (typeof paragraphEl.scrollIntoView === "function") {
-            paragraphEl.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
           }
         }
-        const startPos = from;
-        const originalLength = to - from;
-        window.setTimeout(() => {
-          if (!editorRef.current) return;
-          editorRef.current
             .chain()
-            .focus()
-            .setTextSelection({ from: startPos, to: startPos + originalLength })
-            .deleteSelection()
             .run();
-          let i = 0;
-          const total = replacement.length;
-          const step = () => {
-            if (!editorRef.current) return;
-            if (i >= total) {
-              // Animation done: remove the highlight after a brief
-              // settle delay so the viewer can see the final result
-              // glow once before it fades back to normal.
-              if (paragraphEl) {
-                window.setTimeout(
-                  () => paragraphEl?.classList.remove("demo-agent-rewriting"),
-                  700,
-                );
-              }
-              return;
-            }
-            const nextChunk = Math.min(
-              total - i,
-              1 + Math.floor(Math.random() * 2),
-            );
-            const slice = replacement.slice(i, i + nextChunk);
-            editorRef.current
-              .chain()
-              .focus()
-              .insertContentAt(startPos + i, slice)
-              .run();
-            i += nextChunk;
-            window.setTimeout(step, 22 + Math.random() * 26);
-          };
-          step();
-        }, 520);
       }
     };
     window.addEventListener("__demo-chat", handler);
     return () => window.removeEventListener("__demo-chat", handler);
   }, []);
   // --- Editor lifecycle callbacks ---------------------------------------
   const editorContainerCallback = useCallback((node: HTMLDivElement | null) => {
@@ -387,6 +830,14 @@ export default function App() {
   const onEditorReady = useCallback((editor: TiptapEditor | null) => {
     editorRef.current = editor;
     setEditorInstance(editor);
   }, []);
   const onProviderReady = useCallback((provider: HocuspocusProvider) => {
@@ -398,6 +849,10 @@ export default function App() {
   const onCommentStoreReady = useCallback((store: CommentStore) => setCommentStore(store), []);
   const onFrontmatterStoreReady = useCallback((store: FrontmatterStore) => setFrontmatterStore(store), []);
   const onEmbedStoreReady = useCallback((store: EmbedStore) => setEmbedStore(store), []);
   const onSettingsMapReady = useCallback((map: Y.Map<any>) => setSettingsMap(map), []);
   // --- Publish flow -----------------------------------------------------
@@ -422,6 +877,26 @@ export default function App() {
     };
   }, []);
   const handlePublish = useCallback(async () => {
     setPublishState("loading");
     setPublishError("");
@@ -539,7 +1014,26 @@ export default function App() {
   // --- Render -----------------------------------------------------------
   return (
-    <div className="editor-app">
       <TopBar
         editorInstance={editorInstance}
         providerRef={providerRef}
@@ -587,6 +1081,7 @@ export default function App() {
               onCommentStoreReady={onCommentStoreReady}
               onFrontmatterStoreReady={onFrontmatterStoreReady}
               onEmbedStoreReady={onEmbedStoreReady}
               onSettingsMapReady={onSettingsMapReady}
               onEditorReady={onEditorReady}
               onUndoManagerReady={setUndoManager}
@@ -610,12 +1105,10 @@ export default function App() {
             isLoading={agentChat.isLoading}
             error={agentChat.error}
             input={agentChat.input}
-            hasSelection={hasSelection}
             models={models}
             selectedModel={selectedModel}
             onModelChange={handleModelChange}
             onSend={agentChat.sendMessage}
-            onQuickAction={agentChat.sendQuickAction}
             onSetInput={agentChat.setInput}
             onStop={agentChat.stop}
             onNewChat={() => agentChat.clearMessages()}
@@ -626,6 +1119,7 @@ export default function App() {
         <Tooltip title="AI Assistant" placement="right">
           <button
             className={`chat-fab ${agentChat.isLoading ? "badge-dot" : "badge-dot badge-dot--hidden"}`}
             onClick={() => setChatOpen(true)}
             aria-label="AI Assistant"
           >
@@ -649,12 +1143,17 @@ export default function App() {
       {embedStudioSrc && (
         <EmbedStudio
-          key={embedStudioSrc}
           src={embedStudioSrc}
           embedStore={embedStore}
           modelRef={modelRef}
           userId={chatUserId}
-          onClose={() => setEmbedStudioSrc(null)}
         />
       )}

+import React, { useRef, useState, useCallback, useEffect } from "react";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { UndoManager } from "yjs";
 import type * as Y from "yjs";
 import type { CommentStore } from "./editor/comments";
 import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
 import type { EmbedStore } from "./editor/embeds/embed-store";
+import type { EmbedDataStore } from "./editor/embeds/embed-data-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
 import { SettingsDrawer } from "./editor/frontmatter/SettingsDrawer";
 import { EditorFooter } from "./editor/EditorFooter";
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
   const [frontmatterStore, setFrontmatterStore] = useState<FrontmatterStore | null>(null);
   const [embedStore, setEmbedStore] = useState<EmbedStore | null>(null);
+  const [embedDataStore, setEmbedDataStore] = useState<EmbedDataStore | null>(null);
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
   const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
   // --- UI state ---------------------------------------------------------
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
   const [embedStudioSrc, setEmbedStudioSrc] = useState<string | null>(null);
+  // Stable session id for the currently-open EmbedStudio instance.
+  // Used as the React key so the component does NOT remount when the
+  // agent renames the chart file mid-session (rename flips
+  // `embedStudioSrc`, but the same studio instance keeps its chat
+  // state).
+  const [embedStudioSession, setEmbedStudioSession] = useState<string | null>(null);
   const [tocSidebarOpen, setTocSidebarOpen] = useState(false);
   const [tocAutoCollapse, setTocAutoCollapse] = useState(false);
         // Only override --primary-base: _variables.css derives --primary-color
         // and --primary-color-hover from it via CSS relative-color syntax.
         document.documentElement.style.setProperty("--primary-base", oklchFromHue(h));
+      } else {
+        // When the Yjs settings map has no primaryHue (fresh state or after
+        // reset-article), drop the inline override so the CSS default from
+        // _variables.css wins. Otherwise a stale hue from a previous session
+        // survives the reset visually, and the demo has to re-paint it at
+        // boot time (which looks like an unmotivated color jump).
+        document.documentElement.style.removeProperty("--primary-base");
       }
     };
     sync();
   useEffect(() => {
     const handler = (e: Event) => {
       const src = (e as CustomEvent).detail?.src;
+      if (src) {
+        setEmbedStudioSrc(src);
+        setEmbedStudioSession(`es-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`);
+      }
     };
     window.addEventListener("open-embed-studio", handler);
     return () => window.removeEventListener("open-embed-studio", handler);
   }, []);
+  // Rename every htmlEmbed node referencing `oldSrc` to `newSrc` in the
+  // ProseMirror doc, then lift the new src into state so the
+  // EmbedStudio props and the document stay consistent. The agent
+  // triggers this from createEmbed({ filename }) inside useEmbedChat.
+  const handleEmbedRename = useCallback(
+    (oldSrc: string, newSrc: string) => {
+      const editor = editorRef.current;
+      if (editor) {
+        const { state } = editor;
+        const tr = state.tr;
+        let changed = false;
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === "htmlEmbed" && node.attrs.src === oldSrc) {
+            tr.setNodeMarkup(pos, undefined, { ...node.attrs, src: newSrc });
+            changed = true;
+          }
+        });
+        if (changed) editor.view.dispatch(tr);
+      }
+      setEmbedStudioSrc((prev) => (prev === oldSrc ? newSrc : prev));
+    },
+    [],
+  );
+  // 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
+  // AgentFocus extension handles CRDT-safe position tracking; we just
+  // toggle it on/off based on chat state. Safe w.r.t. undo: the
+  // extension only writes to awareness, it never emits a Yjs-tracked
+  // transaction.
+  //
+  // We listen to `selectionUpdate` while the chat is open so that:
+  //   - if the selection was not yet readable at chat-open time
+  //     (focus/blur race when clicking the FAB), the first selection
+  //     update still syncs the highlight;
+  //   - if the user selects new text while the chat is open, the
+  //     highlight follows the new range.
+  // On collapsed selection we leave the previously broadcast focus in
+  // place - the user may have clicked in the chat textarea without
+  // wanting to lose the agent's current target.
   useEffect(() => {
     if (!editorInstance) return;
+    if (!chatOpen) {
+      editorInstance.commands.clearAgentFocus();
+      return;
+    }
+    const syncAgentFocus = () => {
       const { from, to } = editorInstance.state.selection;
+      if (from === to) return;
+      editorInstance.commands.setAgentFocus({ from, to });
     };
+    syncAgentFocus();
+    editorInstance.on("selectionUpdate", syncAgentFocus);
+    return () => {
+      editorInstance.off("selectionUpdate", syncAgentFocus);
+    };
+  }, [chatOpen, editorInstance]);
   // --- Chat / agent -----------------------------------------------------
   }, [chatUserId]);
   // Dev-only hook: let the demo recording script script-drive the main
+  // chat panel. The Playwright showcase script dispatches `__demo-chat` to:
   //   - open the floating chat panel,
   //   - inject a fake user prompt + assistant reply,
   //   - optionally rewrite a paragraph in the editor body,
         | {
             open?: boolean;
             messages?: UIMessage[];
+            replace?: {
+              from: string;
+              to: string;
+              /**
+               * Explicit PM positions to replace. When provided we use
+               * them as-is and skip the (fragile) string search below.
+               * Required for paragraphs that contain non-text leaf
+               * nodes (inline math, mentions, images...) because their
+               * textContent does NOT match the `from` plain-string.
+               */
+              range?: { from: number; to: number };
+            };
+            /**
+             * Apply a formatting mark (bold/italic/strike/code) to an
+             * explicit PM range. Used by the demo to showcase the
+             * agent calling a simple "make this bold" tool - the same
+             * path a real agent's `toggleMark` tool call would take.
+             */
+            format?: {
+              mark: "bold" | "italic" | "strike" | "code";
+              range: { from: number; to: number };
+            };
+            /**
+             * Wrap a PM range in a Link mark. Same pipeline as `format`
+             * (explicit PM range, go through Tiptap's chain) so the
+             * new mark lands collaboratively via Yjs and participates
+             * in the normal undo stack.
+             */
+            link?: {
+              url: string;
+              range: { from: number; to: number };
+            };
           }
         | undefined;
       if (typeof detail?.open === "boolean") setChatOpen(detail.open);
         const editor = editorRef.current;
         const target = detail.replace.from;
         const replacement = detail.replace.to;
+        const explicitRange = detail.replace.range;
+        // Resolve the target range AT DISPATCH TIME, not here. We used
+        // to do the string search on event receipt, cache from/to,
+        // then setTimeout(520) into `agentRewriteRange`. Problem: the
+        // assistant reply was still streaming AND remote peers kept
+        // typing during those 520ms. Any insert before the cached
+        // range would silently shift Alice's target by N chars, and
+        // the typewriter would then eat Bob's sentence or the wrong
+        // half of Alice's own paragraph. Running the lookup inside
+        // the setTimeout reads the LIVE doc at the actual kickoff
+        // moment, so concurrent edits can't invalidate it.
+        window.setTimeout(() => {
+          const ed = editorRef.current;
+          if (!ed) return;
+          let from = -1;
+          let to = -1;
+          // Preferred path: explicit PM range from the caller. Must
+          // still be clamped against the LIVE doc size in case remote
+          // edits shrank the doc since the event fired.
+          if (explicitRange) {
+            const size = ed.state.doc.content.size;
+            const a = Math.max(0, Math.min(explicitRange.from, size));
+            const b = Math.max(0, Math.min(explicitRange.to, size));
+            if (b > a) {
+              from = a;
+              to = b;
+            } else {
+              console.error(
+                "[__demo-chat] replace.range is empty or inverted:",
+                explicitRange,
+              );
             }
           }
+          // Fallback: walk the LIVE doc and find the first textblock
+          // whose content contains `target`. Because this runs at
+          // dispatch time (not at event-receipt time) no remote edit
+          // can race the result.
+          if (from === -1) {
+            ed.state.doc.descendants((node, pos) => {
+              if (from !== -1) return false;
+              if (node.isTextblock) {
+                const text = node.textBetween(
+                  0,
+                  node.content.size,
+                  "\n",
+                  "\n",
+                );
+                const idx = text.indexOf(target);
+                if (idx !== -1) {
+                  from = pos + 1 + idx;
+                  to = from + target.length;
+                  return false;
+                }
+              }
+              return true;
+            });
+          }
+          if (from === -1 || to === -1) {
+            console.error(
+              "[__demo-chat] replace target not found:",
+              target.slice(0, 60) + (target.length > 60 ? "..." : ""),
+              "- pass `replace.range` to target paragraphs with inline atoms",
+            );
+            return;
+          }
+          // Opportunistic scroll: AgentRewrite maps its own cursor
+          // through every subsequent tr, so this DOM lookup only
+          // needs to be approximately right.
           try {
+            const domAt = ed.view.domAtPos(from);
             let el: HTMLElement | null =
               domAt.node instanceof HTMLElement
                 ? domAt.node
                 : domAt.node.parentElement;
+            while (
+              el &&
+              el.nodeName !== "P" &&
+              !/^H[1-6]$/.test(el.nodeName)
+            ) {
               el = el.parentElement;
             }
+            if (el && typeof el.scrollIntoView === "function") {
+              el.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
           } catch {
             /* non-fatal */
           }
+          ed.commands.agentRewriteRange({
+            from,
+            to,
+            text: replacement,
+            animation: "typewriter",
+          });
+        }, 520);
+      }
+      // ---- Format action: bold / italic / strike / code ----------------
+      // The agent's simplest possible tool call: "apply mark M to
+      // range [from, to]". We scroll the target into view and route
+      // through Tiptap's own `setMark` commands so the operation goes
+      // through the real editor pipeline (Yjs syncs, undo step, mark
+      // extension hooks) - same path a production agent tool would
+      // take. No custom animation: the viewer sees the text turn
+      // bold in a single frame, which reads as an instant agent edit.
+      if (detail?.format && editorRef.current) {
+        const editor = editorRef.current;
+        const size = editor.state.doc.content.size;
+        const from = Math.max(0, Math.min(detail.format.range.from, size));
+        const to = Math.max(0, Math.min(detail.format.range.to, size));
+        if (to <= from) {
+          console.error(
+            "[__demo-chat] format range empty or inverted:",
+            detail.format.range,
+          );
+          return;
+        }
+        try {
+          const domAt = editor.view.domAtPos(from);
+          let el: HTMLElement | null =
+            domAt.node instanceof HTMLElement
+              ? domAt.node
+              : domAt.node.parentElement;
+          while (el && el.nodeName !== "P" && !/^H[1-6]$/.test(el.nodeName)) {
+            el = el.parentElement;
+          }
+          if (el && typeof el.scrollIntoView === "function") {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        } catch {
+          /* non-fatal */
         }
+        const chain = editor
+          .chain()
+          .focus()
+          .setTextSelection({ from, to });
+        switch (detail.format.mark) {
+          case "bold":
+            chain.setBold().run();
+            break;
+          case "italic":
+            chain.setItalic().run();
+            break;
+          case "strike":
+            chain.setStrike().run();
+            break;
+          case "code":
+            chain.setCode().run();
+            break;
+          default:
+            console.error(
+              "[__demo-chat] unknown format mark:",
+              detail.format.mark,
+            );
+        }
+      }
+      // ---- Link action: wrap a PM range in a Link mark ------------------
+      // Goes through Tiptap's `setLink` command (same path the bubble
+      // toolbar uses) so the mark syncs over Yjs, respects safe-URL
+      // validation, and lands in the undo stack. Scrolls the target
+      // into view before applying so the viewer sees the link underline
+      // appear on the actual phrase.
+      //
+      // Drift-proof resolution
+      // ----------------------
+      // The caller MAY pass an explicit PM `range`, but doc positions
+      // are fragile under concurrent edits (another peer inserting
+      // content earlier in the doc will shift every subsequent
+      // position). So we prefer the substring-based path when the
+      // caller provides `paragraphSnippet` + `substring`: walk the
+      // LIVE doc at dispatch time, find the matching text node, and
+      // resolve fresh PM positions. The explicit range only wins if
+      // the text at [from..to] still matches `substring`. Otherwise
+      // we fall back to the search, which is always correct as long
+      // as the target text hasn't been edited away.
+      const detailLink = (detail as unknown as {
+        link?: {
+          url: string;
+          range?: { from: number; to: number };
+          paragraphSnippet?: string;
+          substring?: string;
+        };
+      }).link;
+      if (detailLink && editorRef.current) {
+        const editor = editorRef.current;
+        const size = editor.state.doc.content.size;
+        const url = (detailLink.url || "").trim();
+        if (!url) {
+          console.error("[__demo-chat] link URL missing:", detailLink);
+          return;
+        }
+        const resolveBySubstring = (): { from: number; to: number } | null => {
+          if (!detailLink.paragraphSnippet || !detailLink.substring) return null;
+          let found: { from: number; to: number } | null = null;
+          editor.state.doc.descendants((node, pos) => {
+            if (found) return false;
+            if (!node.isTextblock) return true;
+            const text = node.textBetween(0, node.content.size, "\n", "\n");
+            if (!text.includes(detailLink.paragraphSnippet!)) return true;
+            const idx = text.indexOf(detailLink.substring!);
+            if (idx === -1) return false;
+            found = {
+              from: pos + 1 + idx,
+              to: pos + 1 + idx + detailLink.substring!.length,
+            };
+            return false;
+          });
+          return found;
+        };
+        let from = -1;
+        let to = -1;
+        if (detailLink.range) {
+          const tentativeFrom = Math.max(0, Math.min(detailLink.range.from, size));
+          const tentativeTo = Math.max(0, Math.min(detailLink.range.to, size));
+          if (tentativeTo > tentativeFrom) {
+            const textAtRange = editor.state.doc.textBetween(
+              tentativeFrom,
+              tentativeTo,
+            );
+            const rangeStillMatches =
+              !detailLink.substring || textAtRange === detailLink.substring;
+            if (rangeStillMatches) {
+              from = tentativeFrom;
+              to = tentativeTo;
+            }
+          }
+        }
+        if (from === -1) {
+          const resolved = resolveBySubstring();
+          if (resolved) {
+            from = resolved.from;
+            to = resolved.to;
+          }
+        }
+        if (from === -1 || to <= from) {
+          console.error(
+            "[__demo-chat] link target not resolvable:",
+            detailLink,
+          );
+          return;
+        }
+        try {
+          const domAt = editor.view.domAtPos(from);
+          let el: HTMLElement | null =
+            domAt.node instanceof HTMLElement
+              ? domAt.node
+              : domAt.node.parentElement;
+          while (el && el.nodeName !== "P" && !/^H[1-6]$/.test(el.nodeName)) {
+            el = el.parentElement;
+          }
+          if (el && typeof el.scrollIntoView === "function") {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
           }
+        } catch {
+          /* non-fatal */
         }
+        editor
+          .chain()
+          .focus()
+          .setTextSelection({ from, to })
+          .setLink({ href: url })
+          .run();
+      }
+      // ---- Citation action: seed an entry in the shared citations map
+      // then insert an inline citation node at a PM position, and make
+      // sure a <bibliography> block exists at the end of the doc.
+      //
+      // Same pipeline as the real CitationPanel (see CitationPanel.tsx):
+      // write a CSL-JSON entry into `citationsMap` with a key, dispatch
+      // `insertCitation(key)` on the editor, then append a bibliography
+      // section if the doc doesn't have one yet. This exercises the
+      // production code path end to end - chip auto-labelling included.
+      const detailCitation = (detail as unknown as {
+        citation?: {
+          key: string;
+          entry: unknown;
+          at?: number;
+          paragraphSnippet?: string;
+          anchor?: "end" | "start";
+        };
+      }).citation;
+      if (detailCitation && editorRef.current) {
+        const editor = editorRef.current;
+        const size = editor.state.doc.content.size;
+        // Drift-proof anchor resolution: if `paragraphSnippet` is
+        // provided, walk the LIVE doc for the matching paragraph and
+        // return its start or end position. Otherwise fall back to the
+        // explicit `at` (which can be stale under concurrent upstream
+        // edits). Same philosophy as the link resolver above.
+        const resolveByParagraph = (): number | null => {
+          if (!detailCitation.paragraphSnippet) return null;
+          const anchor = detailCitation.anchor ?? "end";
+          let found: number | null = null;
+          editor.state.doc.descendants((node, pos) => {
+            if (found !== null) return false;
+            if (!node.isTextblock) return true;
+            const text = node.textBetween(0, node.content.size, "\n", "\n");
+            if (!text.includes(detailCitation.paragraphSnippet!)) return true;
+            found = anchor === "end" ? pos + node.nodeSize - 1 : pos + 1;
+            return false;
+          });
+          return found;
+        };
+        let at = -1;
+        const resolved = resolveByParagraph();
+        if (resolved !== null) {
+          at = resolved;
+        } else if (typeof detailCitation.at === "number") {
+          at = Math.max(0, Math.min(detailCitation.at, size));
+        }
+        if (at < 0) {
+          console.error(
+            "[__demo-chat] citation target not resolvable:",
+            detailCitation,
+          );
+          return;
+        }
+        const citationsMap = (editor.storage as unknown as Record<string, unknown>)
+          .citation as { citationsMap?: { set: (k: string, v: unknown) => void } } | undefined;
+        if (!citationsMap?.citationsMap) {
+          console.error(
+            "[__demo-chat] citationsMap not attached to editor storage",
+          );
+          return;
+        }
+        citationsMap.citationsMap.set(detailCitation.key, detailCitation.entry);
+        try {
+          const domAt = editor.view.domAtPos(at);
+          let el: HTMLElement | null =
+            domAt.node instanceof HTMLElement
+              ? domAt.node
+              : domAt.node.parentElement;
+          while (el && el.nodeName !== "P" && !/^H[1-6]$/.test(el.nodeName)) {
+            el = el.parentElement;
+          }
+          if (el && typeof el.scrollIntoView === "function") {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        } catch {
+          /* non-fatal */
+        }
+        editor
+          .chain()
+          .focus()
+          .setTextSelection(at)
+          .insertCitation(detailCitation.key)
+          .run();
+        let hasBibliography = false;
+        editor.state.doc.descendants((node) => {
+          if (node.type.name === "bibliography") hasBibliography = true;
+        });
+        if (!hasBibliography) {
+          const endPos = editor.state.doc.content.size;
+          editor
             .chain()
+            .insertContentAt(endPos, [
+              { type: "paragraph" },
+              { type: "bibliography" },
+            ])
             .run();
+        }
       }
     };
     window.addEventListener("__demo-chat", handler);
     return () => window.removeEventListener("__demo-chat", handler);
   }, []);
+  // Dev-only: imperative settings mutation for the demo (primary hue).
+  // Writing straight to the shared Yjs `settings` map gives every peer
+  // the updated colour via the normal observer path - exactly what
+  // moving the HueSlider does, minus the UI detour.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    if (!settingsMap) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { hue?: number }
+        | undefined;
+      if (typeof detail?.hue === "number") {
+        const clamped = Math.max(0, Math.min(360, Math.round(detail.hue)));
+        settingsMap.set("primaryHue", clamped);
+      }
+    };
+    window.addEventListener("__demo-settings", handler);
+    return () => window.removeEventListener("__demo-settings", handler);
+  }, [settingsMap]);
+  // Dev-only: seed or clear data files in the EmbedDataStore. Lets the
+  // showcase demo populate the FilesSidebar with a realistic CSV before the
+  // agent "reads" it, without requiring a real drag-and-drop upload.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    if (!embedDataStore) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | {
+            clear?: boolean;
+            file?: {
+              name: string;
+              ext?: string;
+              content: string;
+              columns?: string[];
+              rowCount?: number;
+              uploader?: string;
+            };
+          }
+        | undefined;
+      if (!detail) return;
+      if (detail.clear) {
+        for (const key of embedDataStore.keys()) embedDataStore.remove(key);
+        return;
+      }
+      if (detail.file) {
+        const f = detail.file;
+        const ext =
+          (f.ext ?? f.name.split(".").pop() ?? "txt").toLowerCase();
+        embedDataStore.set({
+          meta: {
+            name: f.name,
+            ext,
+            size: new Blob([f.content]).size,
+            uploader: f.uploader ?? "demo",
+            addedAt: Date.now(),
+            rowCount: f.rowCount,
+            columns: f.columns,
+          },
+          content: f.content,
+        });
+      }
+    };
+    window.addEventListener("__demo-embed-data", handler);
+    return () => window.removeEventListener("__demo-embed-data", handler);
+  }, [embedDataStore]);
+  // Dev-only: write arbitrary embed HTML (for charts beyond the banner)
+  // and optionally rename an existing src so the demo can showcase the
+  // agent-picked filename live. Mirrors what the real createEmbed tool
+  // does via useEmbedChat when the agent provides a `filename`.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    if (!embedStore) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { src?: string; html?: string; renameFrom?: string }
+        | undefined;
+      if (!detail?.src || typeof detail.html !== "string") return;
+      const { src, html, renameFrom } = detail;
+      if (renameFrom && renameFrom !== src) {
+        embedStore.set(src, html);
+        embedStore.remove(renameFrom);
+        handleEmbedRename(renameFrom, src);
+      } else {
+        embedStore.set(src, html);
+      }
+    };
+    window.addEventListener("__demo-embed-set", handler);
+    return () => window.removeEventListener("__demo-embed-set", handler);
+  }, [embedStore, handleEmbedRename]);
   // --- Editor lifecycle callbacks ---------------------------------------
   const editorContainerCallback = useCallback((node: HTMLDivElement | null) => {
   const onEditorReady = useCallback((editor: TiptapEditor | null) => {
     editorRef.current = editor;
     setEditorInstance(editor);
+    // Dev-only: expose the Tiptap editor for the demo script so it can
+    // drive PM selection natively (which the collaboration-cursor
+    // extension then broadcasts via Yjs awareness so Bob and Carol see
+    // Alice's selected range in her persona color).
+    if (import.meta.env.DEV) {
+      (window as unknown as { __demoEditor?: TiptapEditor | null }).__demoEditor =
+        editor;
+    }
   }, []);
   const onProviderReady = useCallback((provider: HocuspocusProvider) => {
   const onCommentStoreReady = useCallback((store: CommentStore) => setCommentStore(store), []);
   const onFrontmatterStoreReady = useCallback((store: FrontmatterStore) => setFrontmatterStore(store), []);
   const onEmbedStoreReady = useCallback((store: EmbedStore) => setEmbedStore(store), []);
+  const onEmbedDataStoreReady = useCallback(
+    (store: EmbedDataStore) => setEmbedDataStore(store),
+    [],
+  );
   const onSettingsMapReady = useCallback((map: Y.Map<any>) => setSettingsMap(map), []);
   // --- Publish flow -----------------------------------------------------
     };
   }, []);
+  // Dev-only: demo hook that opens the Publish dialog without hitting
+  // the real server. The viewer sees the modal slide in at the very
+  // end of the scenario so the final frame is "hero agent ready to
+  // ship the article" - without actually kicking off a publish job.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { open?: boolean }
+        | undefined;
+      if (detail?.open) {
+        openPublishDialog();
+      } else if (detail?.open === false) {
+        publishDialogRef.current?.close();
+      }
+    };
+    window.addEventListener("__demo-publish", handler);
+    return () => window.removeEventListener("__demo-publish", handler);
+  }, [openPublishDialog]);
   const handlePublish = useCallback(async () => {
     setPublishState("loading");
     setPublishError("");
   // --- Render -----------------------------------------------------------
   return (
+    <div
+      className={`editor-app${chatOpen ? " editor-app--chat-open" : ""}`}
+      style={
+        {
+          // Expose the current user's color (with ~44% alpha) as a CSS
+          // variable so the global `::selection` rule can recolor every
+          // native selection in the app with the user's identity color.
+          // Using the native selection keeps the full line-height of the
+          // selected text (no more "shorter than native" custom tint).
+          //
+          // When `editor-app--chat-open` is active the native selection
+          // is hidden *inside the editor only* (see `_ui.css`) so the
+          // AgentFocus PM decoration can take over as the single source
+          // of truth for the selected range - this avoids stacking two
+          // tints when the editor still has DOM focus after opening the
+          // chat panel.
+          "--local-selection-bg": `${user.color}70`,
+        } as React.CSSProperties
+      }
+    >
       <TopBar
         editorInstance={editorInstance}
         providerRef={providerRef}
               onCommentStoreReady={onCommentStoreReady}
               onFrontmatterStoreReady={onFrontmatterStoreReady}
               onEmbedStoreReady={onEmbedStoreReady}
+              onEmbedDataStoreReady={onEmbedDataStoreReady}
               onSettingsMapReady={onSettingsMapReady}
               onEditorReady={onEditorReady}
               onUndoManagerReady={setUndoManager}
             isLoading={agentChat.isLoading}
             error={agentChat.error}
             input={agentChat.input}
             models={models}
             selectedModel={selectedModel}
             onModelChange={handleModelChange}
             onSend={agentChat.sendMessage}
             onSetInput={agentChat.setInput}
             onStop={agentChat.stop}
             onNewChat={() => agentChat.clearMessages()}
         <Tooltip title="AI Assistant" placement="right">
           <button
             className={`chat-fab ${agentChat.isLoading ? "badge-dot" : "badge-dot badge-dot--hidden"}`}
+            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setChatOpen(true)}
             aria-label="AI Assistant"
           >
       {embedStudioSrc && (
         <EmbedStudio
+          key={embedStudioSession ?? embedStudioSrc}
           src={embedStudioSrc}
           embedStore={embedStore}
+          dataStore={embedDataStore}
           modelRef={modelRef}
           userId={chatUserId}
+          onClose={() => {
+            setEmbedStudioSrc(null);
+            setEmbedStudioSession(null);
+          }}
+          onRename={handleEmbedRename}
         />
       )}

frontend/src/editor/extensions/collaboration-cursor-v3.ts CHANGED Viewed

@@ -79,17 +79,35 @@ export const CollaborationCursorV3 = Extension.create<CollaborationCursorOptions
   },
   addProseMirrorPlugins() {
-    this.options.provider.awareness.setLocalStateField("user", this.options.user);
-    this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
-    this.options.provider.awareness.on("update", () => {
-      this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
     });
     return [
       yCursorPlugin(
-        this.options.provider.awareness,
         {
-          cursorBuilder: this.options.render ?? defaultCursorBuilder,
           selectionBuilder: this.options.selectionRender ?? defaultSelectionBuilder,
         },
       ),

   },
   addProseMirrorPlugins() {
+    const awareness = this.options.provider.awareness;
+    awareness.setLocalStateField("user", this.options.user);
+    this.storage.users = awarenessStatesToArray(awareness.states);
+    awareness.on("update", () => {
+      this.storage.users = awarenessStatesToArray(awareness.states);
     });
+    // Wrap the cursor builder so we can silence a peer's caret+label when
+    // that same peer already broadcasts an `agentFocus` in awareness. The
+    // AgentFocus extension renders its own "<Name> agent" label on the
+    // range the AI is working on, and without this guard we end up with
+    // two overlapping badges for the same user (e.g. "Bob Mercier" caret
+    // label + "Bob Mercier agent" focus label). y-tiptap re-invokes the
+    // builder on every awareness change, so this check stays live.
+    const userBuilder = this.options.render ?? defaultCursorBuilder;
+    const cursorBuilder = (user: CursorUser, clientId: number): HTMLElement => {
+      const el = userBuilder(user);
+      const peerState = awareness.getStates().get(clientId);
+      if (peerState?.agentFocus) {
+        el.classList.add("collaboration-cursor--silenced");
+      }
+      return el;
+    };
     return [
       yCursorPlugin(
+        awareness,
         {
+          cursorBuilder,
           selectionBuilder: this.options.selectionRender ?? defaultSelectionBuilder,
         },
       ),

frontend/src/styles/_ui.css CHANGED Viewed

@@ -146,6 +146,14 @@
   width: 36px;
   height: 36px;
   border-width: 3px;
 }
 @keyframes ed-spin { to { transform: rotate(360deg); } }
@@ -571,6 +579,77 @@ textarea.form-input { resize: vertical; min-height: 60px; }
   gap: 4px;
 }
 /* ---- Chat panel (floating) ---- */
 .chat-floating {
   position: fixed;
@@ -621,7 +700,7 @@ dialog.ed-dialog.ed-dialog--author { max-width: 480px; }
    Two cooperating states visualize the AI agent's work on a selected
    paragraph during the recorded demo:
-   1. `.demo-agent-pending` - added by the demo script (trio.ts) the
       moment the user selects a paragraph and asks the chat to rewrite
       it. Stays until the actual rewrite animation begins. Shows a
       "Agent is working..." badge so the viewer understands that
@@ -698,6 +777,104 @@ dialog.ed-dialog.ed-dialog--author { max-width: 480px; }
   animation: demo-agent-pulse 1.2s ease-out 1;
 }
 /* ---- Settings drawer ---- */
 .settings-drawer { padding: 20px; display: flex; flex-direction: column; height: 100%; }
 .settings-drawer__header {
@@ -801,14 +978,6 @@ dialog.ed-dialog.ed-dialog--author { max-width: 480px; }
   font-size: 0.75rem;
   color: var(--ed-error);
 }
-.chat-panel__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 6px 12px;
-  border-top: 1px solid var(--ed-border);
-  flex-shrink: 0;
-}
 .chat-panel__input {
   padding: 8px 12px;
   border-top: 1px solid var(--ed-border);

   width: 36px;
   height: 36px;
   border-width: 3px;
+  /* The large spinner is only used in the boot overlay, before Yjs has
+     synced the article's primaryHue. Using --primary-color here would
+     paint the spinner in the default warm-yellow palette for a beat,
+     then snap to the article's overridden hue once the settings map
+     arrives - a jarring color jump. Neutralising the large spinner
+     sidesteps that transition entirely; the "branded" colour only
+     kicks in for post-boot spinners (sync indicator, publish, etc.). */
+  border-top-color: var(--muted-color);
 }
 @keyframes ed-spin { to { transform: rotate(360deg); } }
   gap: 4px;
 }
+.top-bar__menu {
+  position: relative;
+  display: inline-flex;
+}
+.top-bar__menu-pop {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 260px;
+  background: var(--bg-surface, var(--ed-surface, #fff));
+  border: 1px solid var(--border-color, var(--ed-border, #ddd));
+  border-radius: 10px;
+  padding: 0.35rem;
+  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
+  z-index: 50;
+}
+.top-bar__menu-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border-radius: 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--text-color, inherit);
+  font: inherit;
+  text-align: left;
+}
+.top-bar__menu-item:hover,
+.top-bar__menu-item:focus-visible {
+  background: var(--code-bg, rgba(0, 0, 0, 0.05));
+}
+.top-bar__menu-item svg {
+  margin-top: 2px;
+  color: var(--muted-color, #888);
+  flex-shrink: 0;
+}
+.top-bar__menu-item-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.top-bar__menu-item-title {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+.top-bar__menu-item-desc {
+  font-size: 0.72rem;
+  color: var(--muted-color);
+}
+.top-bar__menu-item--danger:hover,
+.top-bar__menu-item--danger:focus-visible {
+  background: rgba(220, 53, 69, 0.1);
+}
+.top-bar__menu-item--danger svg,
+.top-bar__menu-item--danger .top-bar__menu-item-title {
+  color: #dc3545;
+}
 /* ---- Chat panel (floating) ---- */
 .chat-floating {
   position: fixed;
    Two cooperating states visualize the AI agent's work on a selected
    paragraph during the recorded demo:
+   1. `.demo-agent-pending` - added by the demo script (showcase.ts) the
       moment the user selects a paragraph and asks the chat to rewrite
       it. Stays until the actual rewrite animation begins. Shows a
       "Agent is working..." badge so the viewer understands that
   animation: demo-agent-pulse 1.2s ease-out 1;
 }
+/* ---- Native selection recolored per user ----------------------------
+   Every native text selection anywhere in the app is painted with the
+   current user's identity color (same hue as their cursor, agent focus
+   and avatar ring). The color is fed via `--local-selection-bg`, set
+   on `.editor-app` from `user.color` + `70` alpha. Using the native
+   `::selection` pseudo-element (instead of a PM decoration) guarantees
+   the highlight matches the full line-height of the text - exactly
+   like a default browser selection, just in the user's color. */
+.editor-app ::selection,
+.editor-app::selection,
+.editor-app *::selection {
+  background-color: var(--local-selection-bg, #b4d5fe);
+  color: inherit;
+}
+.editor-app ::-moz-selection,
+.editor-app::-moz-selection,
+.editor-app *::-moz-selection {
+  background-color: var(--local-selection-bg, #b4d5fe);
+  color: inherit;
+}
+/* While the chat is open the AgentFocus PM decoration owns the
+   visual for the selected range (it's broadcast via awareness to the
+   other peers, and it keeps the range visible even when the editor
+   loses DOM focus to the chat textarea). We hide the native
+   `::selection` *inside the editor only* to avoid stacking two tints
+   when the editor still has focus. Elsewhere (sidebars, dialogs, chat)
+   the recolored native selection keeps working normally. */
+.editor-app--chat-open .ProseMirror ::selection,
+.editor-app--chat-open .ProseMirror::selection,
+.editor-app--chat-open .ProseMirror *::selection {
+  background: transparent;
+  color: inherit;
+}
+.editor-app--chat-open .ProseMirror ::-moz-selection,
+.editor-app--chat-open .ProseMirror::-moz-selection,
+.editor-app--chat-open .ProseMirror *::-moz-selection {
+  background: transparent;
+  color: inherit;
+}
+/* ---- Agent focus (shared across collaborators) ----------------------
+   Inline decoration injected by the AgentFocus extension when a user
+   opens the AI chat with an active selection. The range is broadcast
+   via Yjs awareness, and every peer - including self - renders the
+   owner's highlight tinted with their color (inline style
+   `background-color: ${color}70`). This is what keeps the range
+   visible on the owner's screen after the editor loses DOM focus to
+   the chat textarea. */
+.agent-focus {
+  transition: background-color 150ms ease-out;
+  border-radius: 2px;
+}
+/* Floating label anchored at the start of the range, mirroring the
+   collaboration cursor label pattern. The anchor is a zero-width
+   inline span that provides a positioning context for the label. */
+/* Zero-impact inline anchor, positioned relative so the absolute label
+   hangs from it. Using plain `display: inline` (not `inline-block`)
+   keeps the anchor on the same baseline as the surrounding text so
+   `top: -1.4em` on the label lands where a cursor label would. */
+.agent-focus__anchor {
+  position: relative;
+  display: inline;
+  pointer-events: none;
+}
+/* Match `.collaboration-cursor__label` so an agent badge reads the
+   same as a real collaborator's cursor label - only the "'s agent"
+   suffix tells them apart. */
+.agent-focus__label {
+  position: absolute;
+  top: -1.4em;
+  left: -1px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px 3px 3px 0;
+  white-space: nowrap;
+  color: #000;
+  user-select: none;
+  pointer-events: none;
+  z-index: 2;
+}
+.agent-focus__avatar {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.agent-focus__text {
+  line-height: 1;
+}
 /* ---- Settings drawer ---- */
 .settings-drawer { padding: 20px; display: flex; flex-direction: column; height: 100%; }
 .settings-drawer__header {
   font-size: 0.75rem;
   color: var(--ed-error);
 }
 .chat-panel__input {
   padding: 8px 12px;
   border-top: 1px solid var(--ed-border);

frontend/src/styles/editor/_chrome.css CHANGED Viewed

@@ -105,6 +105,13 @@
   flex-shrink: 0;
 }
 /* ---- Placeholder ---- */
 .tiptap p.is-editor-empty:first-child::before {

   flex-shrink: 0;
 }
+/* When a peer also broadcasts an `agentFocus`, the AgentFocus decoration
+   already renders a "<Name> agent" label on the working range. We hide
+   the plain caret+label here so the same user isn't shown twice. */
+.collaboration-cursor--silenced {
+  display: none !important;
+}
 /* ---- Placeholder ---- */
 .tiptap p.is-editor-empty:first-child::before {