@comty.io/core 0.1.3 → 0.1.4

package/src/browser.js

@@ -1,6 +1,6 @@
 import { getComtyStyle } from "./style.js";
 import { createAnchorMatcher } from "./anchors.js";
-import { createScreenshotCapture, createColorMagnifier } from "./capture.js";
+import { createScreenshotCapture, createColorMagnifier, captureContext } from "./capture.js";
 import { createCommentThread } from "./comments.js";
 import { createMeasurements } from "./measurements.js";
 // Shared browser runtime. Both npm and the standalone CDN script use this file.
@@ -57,11 +57,14 @@ export function initComty(options = {}) {
     const observedCommentTargets = new WeakSet();
     let sidepanelOpen = false;
     let canWrite = false;
+    let canManage = false;
+    let allowGuestComments = false;
     let loginUrl = "";
     let currentUser = null;
     let authStatus = "";
     let didCompleteSignIn = false;
     const tokenStorageKey = `comty:${projectKey}:token`;
+    const authReturnStorageKey = `comty:${projectKey}:auth-return`;
     let sdkToken = "";
     const activeHoverCommentIds = new Set();
     /** @type {null | 'edit' | 'browse'} */
@@ -70,7 +73,6 @@ export function initComty(options = {}) {
     const placementDiagnostics = new Map();
     let inspectedElement = null;
     let selectedElement = null;
-    let inspectExpanded = false;
     let measureAlt = false;
     let inspectDrag = null;
     let measuredRegion = null;
@@ -752,6 +754,21 @@ export function initComty(options = {}) {
     const copyIcon = icon('<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>');
     const checkIcon = icon('<path d="m5 12 4 4 10-10"/>');
     const copyFeedbackTimers = new WeakMap();
+    async function copyPropertyValue(button, feedback) {
+      clearTimeout(copyFeedbackTimers.get(button));
+      try {
+        await navigator.clipboard.writeText(button.dataset.copy);
+        if (!button.isConnected) return;
+        button.dataset.copied = "";
+        feedback.textContent = "Copied";
+        clearTimeout(copyFeedbackTimers.get(button));
+        copyFeedbackTimers.set(button, setTimeout(() => { delete button.dataset.copied; }, 1200));
+      } catch {
+        delete button.dataset.copied;
+        if (button.isConnected) feedback.textContent = "Clipboard unavailable — select the value to copy";
+      }
+    }
+
     function propertyRow(label, value, display = value) {
       const unavailable = value === "—";
       return `<div class="comty-property-row"><span>${label}</span><button type="button" data-copy="${escapeInspectorText(value)}" aria-label="Copy ${label}: ${escapeInspectorText(display)}" ${unavailable ? "disabled" : ""}><span>${escapeInspectorText(display)}</span>${unavailable ? "" : `<i class="comty-property-copy-icon" aria-hidden="true">${copyIcon}${checkIcon}</i>`}</button></div>`;
@@ -778,7 +795,7 @@ export function initComty(options = {}) {
       propertyPanel.setAttribute("aria-label", propertyKind === "color" ? "Recent colours" : "Recent typography");
       const recent = propertyKind === "color" ? recentColors : recentFonts;
       const details = propertyKind === "color" && expanded
-        ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("HEX", propertySelection.hex)}${propertyRow("RGB", propertySelection.rgb)}${propertyRow("HSL", propertySelection.hsl)}${propertyRow("OKLCH", propertySelection.oklch)}${propertyRow("Token", propertySelection.token ? `var(${propertySelection.token})` : "—")}</div></div>`
+        ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("HEX", propertySelection.hex)}${propertyRow("RGB", propertySelection.rgb)}${propertyRow("HSL", propertySelection.hsl)}${propertyRow("OKLCH", propertySelection.oklch)}${propertyRow("Token", propertySelection.token ? propertySelection.token.replace(/^--/, "") : "—", propertySelection.token || "—")}</div></div>`
         : propertyKind === "font" && expanded
           ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("Family", propertySelection.family)}${propertyRow("Size", propertySelection.size)}${propertyRow("Weight", propertySelection.weight)}${propertyRow("Leading", propertySelection.leading)}${propertyRow("Tracking", propertySelection.tracking)}${propertyRow("Colour", propertySelection.color?.hex || "—")}${propertyRow("CSS", propertySelection.css, "All of the above")}</div></div>`
           : "";
@@ -894,18 +911,7 @@ export function initComty(options = {}) {
         renderPropertyPanel(true);
         propertyPanel.querySelector(`button[data-recent="${button.dataset.recent}"]`)?.focus({ preventScroll: true });
       } else if (button.dataset.copy != null && button.dataset.copy !== "—") {
-        clearTimeout(copyFeedbackTimers.get(button));
-        try {
-          await navigator.clipboard.writeText(button.dataset.copy);
-          if (!button.isConnected || propertyPanel.hidden) return;
-          button.dataset.copied = "";
-          propertyPanel.querySelector(".comty-property-feedback").textContent = `${button.getAttribute("aria-label").slice(5)} copied`;
-          clearTimeout(copyFeedbackTimers.get(button));
-          copyFeedbackTimers.set(button, setTimeout(() => { delete button.dataset.copied; }, 1200));
-        } catch {
-          delete button.dataset.copied;
-          if (button.isConnected && !propertyPanel.hidden) propertyPanel.querySelector(".comty-property-feedback").textContent = "Clipboard unavailable";
-        }
+        await copyPropertyValue(button, propertyPanel.querySelector(".comty-property-feedback"));
       }
     };
 
@@ -1402,7 +1408,8 @@ export function initComty(options = {}) {
         : headers;
     }
 
-    function showAuthPrompt(forbidden = false) {
+    function showAuthPrompt(forbidden = false, onReady = startEditSession) {
+      const guestAllowed = allowGuestComments;
       document.querySelector(".comty-auth-backdrop")?.remove();
       const opener = document.activeElement;
       const backdrop = document.createElement("div");
@@ -1413,12 +1420,23 @@ export function initComty(options = {}) {
             <span class="comty-auth-icon">${icon('<path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.5 8.5 0 1 1 16.1-3.8Z"/>')}</span>
             <button type="button" class="comty-auth-close" data-comty-close aria-label="Close sign-in dialog">${icon('<path d="m6 6 12 12M6 18 18 6"/>')}</button>
           </div>
-          <h2 id="comty-auth-title">${forbidden ? "Project access required" : "Sign in to comment"}</h2>
-          <p id="comty-auth-description">${forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Sign in to share feedback with your team and keep the conversation in one place."}</p>
-          <div class="comty-auth-actions">
-            <button type="button" data-comty-close>${forbidden ? "Close" : "Cancel"}</button>
-            ${forbidden ? "" : '<button type="button" class="comty-auth-primary" data-comty-login>Continue to sign in</button>'}
-          </div>
+          <h2 id="comty-auth-title">${guestAllowed ? "Leave a comment" : forbidden ? "Project access required" : "Sign in to comment"}</h2>
+          <p id="comty-auth-description">${guestAllowed ? "Continue with your name or sign in with Google." : forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Sign in to share feedback with your team and keep the conversation in one place."}</p>
+          ${guestAllowed ? `
+            <form class="comty-guest-form">
+              <label for="comty-guest-name">Your name</label>
+              <input id="comty-guest-name" name="name" autocomplete="name" placeholder="Your name" maxlength="80" required aria-describedby="comty-guest-error" />
+              <p id="comty-guest-error" role="alert" hidden></p>
+              <div class="comty-auth-actions comty-guest-actions">
+                <button type="submit" class="comty-auth-primary" data-comty-guest>Continue</button>
+                <span class="comty-auth-or">or</span>
+                <button type="button" data-comty-login>Continue with Google</button>
+              </div>
+            </form>` : `
+            <div class="comty-auth-actions">
+              <button type="button" data-comty-close>${forbidden ? "Close" : "Cancel"}</button>
+              ${forbidden ? "" : '<button type="button" class="comty-auth-primary" data-comty-login>Continue to sign in</button>'}
+            </div>`}
         </div>`;
       const close = () => {
         backdrop.remove();
@@ -1429,11 +1447,12 @@ export function initComty(options = {}) {
         event.stopPropagation();
         if (event.key === "Escape") { event.preventDefault(); close(); }
         if (event.key === "Tab") {
-          const buttons = [...backdrop.querySelectorAll("button:not(:disabled)")];
+          const buttons = [...backdrop.querySelectorAll("button:not(:disabled), input:not(:disabled)")];
           if (!buttons.length) { event.preventDefault(); return; }
-          const first = buttons[0], last = buttons.at(-1);
-          if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
-          else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+          event.preventDefault();
+          const index = buttons.indexOf(document.activeElement);
+          const next = (index + (event.shiftKey ? -1 : 1) + buttons.length) % buttons.length;
+          buttons[next].focus();
         }
       });
       const loginButton = backdrop.querySelector("[data-comty-login]");
@@ -1441,15 +1460,62 @@ export function initComty(options = {}) {
         loginButton.onclick = () => {
           loginButton.disabled = true;
           loginButton.innerText = "Connecting…";
-          backdrop.querySelectorAll("[data-comty-close]").forEach(button => { button.disabled = true; });
-          setTimeout(() => window.location.assign(loginUrl), 50);
+          backdrop.querySelectorAll("button, input").forEach(control => { control.disabled = true; });
+          try {
+            sessionStorage.setItem(authReturnStorageKey, JSON.stringify({
+              mode: onReady === startEditSession || session.mode === "off" ? "edit" : session.mode,
+              entry: sessionEntry,
+              sidepanelOpen,
+            }));
+          } catch { /* Resume in comment mode if browser storage is unavailable. */ }
+          const destination = new URL("/api/auth/sign-in/google", apiUrl);
+          destination.searchParams.set("callbackURL", loginUrl);
+          setTimeout(() => window.location.assign(guestAllowed ? destination.toString() : loginUrl), 50);
         };
       }
+      const guestForm = backdrop.querySelector(".comty-guest-form");
+      if (guestForm) guestForm.onsubmit = async event => {
+        event.preventDefault();
+        const nameInput = guestForm.querySelector("input");
+        const error = guestForm.querySelector("[role=alert]");
+        const name = nameInput.value.trim();
+        if (!name) { nameInput.focus(); return; }
+        const controls = [...backdrop.querySelectorAll("button, input")];
+        controls.forEach(control => { control.disabled = true; });
+        error.hidden = true;
+        const continueButton = guestForm.querySelector("[data-comty-guest]");
+        continueButton.textContent = "Connecting…";
+        try {
+          const response = await fetch(`${apiUrl}/api/sdk/guest`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ projectKey, name }),
+          });
+          const data = await response.json();
+          if (!response.ok) throw new Error(data.error || "Unable to continue. Please try again.");
+          sdkToken = data.token;
+          try { sessionStorage.setItem(tokenStorageKey, sdkToken); } catch { /* Keep the session in memory when browser storage is unavailable. */ }
+          currentUser = data.user;
+          canWrite = true;
+          canManage = false;
+          if (backdrop.isConnected) {
+            close();
+            onReady();
+          }
+        } catch (failure) {
+          if (!backdrop.isConnected) return;
+          error.textContent = failure.message || "Unable to connect. Please try again.";
+          error.hidden = false;
+          controls.forEach(control => { control.disabled = false; });
+          continueButton.textContent = "Continue";
+          nameInput.focus();
+        }
+      };
       backdrop.onclick = (event) => {
         if (event.target === backdrop) close();
       };
       root.appendChild(backdrop);
-      (loginButton || backdrop.querySelector("[data-comty-close]")).focus({ preventScroll: true });
+      (backdrop.querySelector("#comty-guest-name") || loginButton || backdrop.querySelector("[data-comty-close]")).focus({ preventScroll: true });
     }
 
     function formatBoxValue(value) {
@@ -1646,7 +1712,8 @@ export function initComty(options = {}) {
       add("background", css.backgroundColor, (tokens.background.length > 0 || !["rgba(0, 0, 0, 0)", "rgb(255, 255, 255)"].includes(css.backgroundColor)));
       add("color", css.color);
       if (getElementOwnTextSignature(el)) {
-        add("font", `${css.fontSize} / ${css.fontWeight}`);
+        add("font-size", css.fontSize);
+        add("font-weight", css.fontWeight);
         add("font-family", css.fontFamily);
         add("line-height", css.lineHeight);
         add("letter-spacing", css.letterSpacing, css.letterSpacing !== "normal");
@@ -1830,7 +1897,7 @@ export function initComty(options = {}) {
         height: draftBubble.offsetHeight,
       };
       const pinBounds = draftPin?.getBoundingClientRect();
-      const signature = JSON.stringify([selector, rect, hoverRect, rows, !!selected, inspectExpanded, measureAlt, draftBounds, pinBounds, spacing]);
+      const signature = JSON.stringify([selector, rect, hoverRect, rows, !!selected, measureAlt, draftBounds, pinBounds, spacing, innerWidth, innerHeight]);
       if (signature === inspectionSignature) return;
       inspectionSignature = signature;
       inspectionLayer.replaceChildren();
@@ -1856,36 +1923,34 @@ export function initComty(options = {}) {
       const panel = document.createElement("div");
       panel.className = "comty-inspector";
       panel.setAttribute("aria-label", "Element properties");
-      if (selected) panel.dataset.selected = "";
-      const copyable = (value) => `<button type="button" title="Copy ${escapeInspectorText(value)}" data-copy="${escapeInspectorText(value)}">${escapeInspectorText(value)}</button>`;
-      const featured = new Set(["background", "color", "font", "font-family"]);
-      const visibleRows = inspectExpanded ? rows : selected ? [...rows.filter(([key]) => featured.has(key)), ...rows.filter(([key]) => !featured.has(key))].slice(0, 6) : rows.slice(0, 6);
-      panel.innerHTML = `<div class="comty-inspector-head">${copyable(selector)}${copyable(`${formatBoxValue(rect.width)} × ${formatBoxValue(rect.height)}`)}</div><div class="comty-inspector-details">${visibleRows.map(([key, value, tokens]) => {
-        const picker = key === "background" || key === "color" ? "color" : key === "font" || key === "font-family" ? "font" : "";
-        const valueButton = picker && selected
-          ? `<button type="button" class="comty-inspector-picker" data-picker="${picker}" data-property="${key}" aria-label="Open ${picker === "color" ? key + " colour" : "typography"} details">${picker === "color" ? '<span class="comty-inspector-swatch" aria-hidden="true"></span>' : ""}${escapeInspectorText(value)}</button>`
-          : copyable(value);
-        return `<div class="comty-inspector-row"><span>${key}</span><div class="comty-inspector-value">${tokens?.length ? `<div class="comty-inspector-tokens">${tokens.map(token => copyable(token)).join("")}</div>` : ""}${valueButton}</div></div>`;
-      }).join("")}</div>${rows.length > 6 && selected ? `<button type="button" class="comty-inspector-expand">${inspectExpanded ? "Show less" : `Show ${rows.length - 6} more`}</button>` : ""}`;
-      for (const button of panel.querySelectorAll('.comty-inspector-picker[data-picker="color"]')) {
-        button.querySelector(".comty-inspector-swatch").style.backgroundColor = getComputedStyle(target)[button.dataset.property === "background" ? "backgroundColor" : "color"];
+      if (selected || draftPreview) panel.dataset.selected = "";
+      const priority = ["background", "color", "font-family", "font-size", "font-weight", "margin", "line-height", "letter-spacing"];
+      const orderedRows = [...rows.filter(([key]) => priority.includes(key)).sort((a, b) => priority.indexOf(a[0]) - priority.indexOf(b[0])), ...rows.filter(([key]) => !priority.includes(key))];
+      const labels = { "font-family": "Font", "font-size": "Size", "font-weight": "Weight", "line-height": "Line height", "letter-spacing": "Spacing", "background": "Background", "color": "Color", "margin": "Margin" };
+      const cssProperty = key => ({ radius: "border-radius", background: "background-color" })[key] || key;
+      const copyValue = (value, tokens) => tokens?.length ? `var(${tokens[0]})` : value;
+      const allProperties = `${selector} {\n${rows.map(([key, value, tokens]) => `  ${cssProperty(key)}: ${copyValue(value, tokens)};`).join("\n")}\n}`;
+      const copyButton = (value, label) => `<button type="button" class="comty-inspector-copy" data-copy="${escapeInspectorText(value)}" aria-label="${escapeInspectorText(label)}" title="${escapeInspectorText(label)}"><i class="comty-property-copy-icon" aria-hidden="true">${copyIcon}${checkIcon}</i></button>`;
+      panel.innerHTML = `<div class="comty-inspector-head"><span class="comty-inspector-selector" dir="rtl" title="${escapeInspectorText(selector)}"><bdi dir="ltr">${escapeInspectorText(selector)}</bdi></span>${copyButton(allProperties, "Copy all properties")}</div><div class="comty-inspector-details">${orderedRows.map(([key, value, tokens]) => {
+        const label = labels[key] || key.replaceAll("-", " ").replace(/^./, c => c.toUpperCase());
+        const isColor = key === "background" || key === "color";
+        const picker = isColor ? "color" : key.startsWith("font-") || ["line-height", "letter-spacing"].includes(key) ? "font" : "";
+        const displayValue = isColor ? colorDetails(value)?.hex || value : value;
+        const valueMarkup = `${isColor ? '<span class="comty-inspector-swatch" aria-hidden="true"></span>' : ""}<span class="comty-inspector-text">${tokens?.length ? `<span class="comty-inspector-tokens">${tokens.map(escapeInspectorText).join(", ")}</span><span class="comty-inspector-secondary">${escapeInspectorText(displayValue)}</span>` : escapeInspectorText(displayValue)}</span>`;
+        const valueElement = picker && selected
+          ? `<button type="button" class="comty-inspector-value comty-inspector-picker" data-picker="${picker}" data-property="${key}" aria-label="Open ${isColor ? key + " colour" : "typography"} details">${valueMarkup}</button>`
+          : `<span class="comty-inspector-value" data-property="${key}">${valueMarkup}</span>`;
+        return `<div class="comty-inspector-row"><span class="comty-inspector-label">${label}</span>${valueElement}${copyButton(tokens?.length ? tokens[0].replace(/^--/, "") : value, `Copy ${label}`)}</div>`;
+      }).join("")}</div><span class="comty-property-feedback" role="status"></span>`;
+      for (const swatch of panel.querySelectorAll('.comty-inspector-swatch')) {
+        const key = swatch.parentElement.dataset.property;
+        swatch.style.backgroundColor = rows.find(([name]) => name === key)?.[1];
       }
       panel.onclick = async (event) => {
         const button = event.target.closest("button");
         if (!button) return;
-        if (button.classList.contains("comty-inspector-expand")) {
-          inspectExpanded = !inspectExpanded;
-          renderInspector();
-        } else if (button.dataset.picker) {
-          openPropertyPanel(button.dataset.picker, target, button.dataset.property, button);
-        } else {
-          try {
-            await navigator.clipboard.writeText(button.dataset.copy);
-            button.title = "Copied";
-          } catch {
-            button.title = "Clipboard unavailable — select the value to copy";
-          }
-        }
+        if (button.dataset.picker) openPropertyPanel(button.dataset.picker, target, button.dataset.property, button);
+        else await copyPropertyValue(button, panel.querySelector(".comty-property-feedback"));
       };
       inspectionLayer.appendChild(panel);
       const bounds = panel.getBoundingClientRect();
@@ -1903,8 +1968,24 @@ export function initComty(options = {}) {
         }
         return;
       }
-      panel.style.left = `${Math.max(8, Math.min(rect.left + rect.width / 2 - bounds.width / 2, innerWidth - bounds.width - 8))}px`;
-      panel.style.top = `${Math.max(8, Math.min(rect.bottom + 4 + bounds.height <= innerHeight ? rect.bottom + 4 : rect.top - bounds.height - 4, innerHeight - bounds.height - 8))}px`;
+      const inset = 8, gap = 12;
+      const clampX = x => Math.max(inset, Math.min(x, innerWidth - bounds.width - inset));
+      const clampY = y => Math.max(inset, Math.min(y, innerHeight - bounds.height - inset));
+      const x = clampX(rect.left), y = clampY(rect.top);
+      const candidates = [
+        { left: x, top: rect.bottom + gap },
+        { left: rect.right + gap, top: y },
+        { left: rect.left - bounds.width - gap, top: y },
+        { left: x, top: rect.top - bounds.height - gap },
+      ];
+      let position = candidates.find(({ left, top }) => left >= inset && top >= inset && left + bounds.width <= innerWidth - inset && top + bounds.height <= innerHeight - inset);
+      if (!position) {
+        // A viewport-sized target leaves no outside space; minimize the covered area.
+        const overlap = ({ left, top }) => Math.max(0, Math.min(left + bounds.width, rect.right) - Math.max(left, rect.left)) * Math.max(0, Math.min(top + bounds.height, rect.bottom) - Math.max(top, rect.top));
+        position = candidates.map(({ left, top }) => ({ left: clampX(left), top: clampY(top) })).sort((a, b) => overlap(a) - overlap(b))[0];
+      }
+      panel.style.left = `${position.left}px`;
+      panel.style.top = `${position.top}px`;
     }
 
     function endSession() {
@@ -2293,15 +2374,6 @@ export function initComty(options = {}) {
       return element;
     }
 
-    async function waitForCommentTargetReady(comment) {
-      const el = resolveCommentElement(comment);
-      if (!el) return false;
-
-      await waitForCustomElements(el);
-      await waitForPaint();
-      return true;
-    }
-
     function getDeviceContext() {
       const width = window.innerWidth;
       const height = window.innerHeight;
@@ -2376,125 +2448,44 @@ export function initComty(options = {}) {
       if (!session.edit || hadDraft) hideInspector();
       document
         .querySelectorAll(
-          ".comty-bubble, .comty-create-bubble, .comty-temp-pin, .comty-popover",
+          ".comty-bubble:not([data-comty-capture-keep]), .comty-create-bubble, .comty-temp-pin, .comty-popover",
         )
         .forEach((x) => x.remove());
     }
 
-    const { waitForPaint, waitForCustomElements, captureViewportScreenshot } = createScreenshotCapture();
-
-    async function buildCommentScreenshotFormData(payload) {
-      const formData = new FormData();
-
-      Object.entries(payload).forEach(([key, value]) => {
-        if (value === undefined || value === null) return;
-        formData.append(key, String(value));
-      });
+    const { captureViewportScreenshot } = createScreenshotCapture({ apiUrl, projectKey, getHeaders: getSdkHeaders });
 
+    async function uploadCommentScreenshot(comment, context, point) {
       try {
-        await waitForCommentTargetReady(payload);
-        const screenshot = await captureViewportScreenshot();
-        if (screenshot) {
-          const extension =
-            screenshot.blob.type === "image/svg+xml"
-              ? "svg"
-              : screenshot.blob.type === "image/jpeg"
-                ? "jpg"
-                : screenshot.blob.type === "image/png"
-                  ? "png"
-                  : "webp";
-          formData.append(
-            "screenshot",
-            screenshot.blob,
-            `comment.${extension}`,
-          );
-          formData.append("screenshotWidth", String(screenshot.width));
-          formData.append("screenshotHeight", String(screenshot.height));
-        }
-      } catch (error) {
-        console.error("Comty: screenshot capture failed", error);
-      }
-
-      return formData;
-    }
-
-    async function uploadCommentScreenshot(
-      commentId,
-      payload,
-      captureNodes = [],
-    ) {
-      try {
-        const formData = await buildCommentScreenshotFormData({
-          projectKey,
-          host: window.location.host,
-          ...payload,
-        });
-
-        captureNodes.forEach((node) => node.remove());
-
-        if (!formData.has("screenshot")) return;
-
+        const screenshot = await captureViewportScreenshot({ context, annotation: () => mountCaptureAnnotation(comment, point) });
+        if (!screenshot) return;
+        const formData = new FormData();
+        formData.append("projectKey", projectKey);
+        formData.append("screenshot", screenshot.blob, screenshot.blob.type === "image/jpeg" ? "comment.jpg" : "comment.png");
+        formData.append("screenshotWidth", String(screenshot.width));
+        formData.append("screenshotHeight", String(screenshot.height));
         const response = await fetch(
-          `${apiUrl}/api/comments/${encodeURIComponent(commentId)}/screenshot`,
-          {
-            method: "POST",
-            headers: getSdkHeaders(),
-            body: formData,
-          },
+          `${apiUrl}/api/comments/${encodeURIComponent(comment.id)}/screenshot`,
+          { method: "POST", headers: getSdkHeaders(), body: formData },
         );
-
-        if (!response.ok) {
-          console.error(
-            "Comty: screenshot upload failed",
-            await response.text(),
-          );
-          return;
-        }
-
-        await loadComments({ force: true });
+        if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
+        // Updating metadata must not redraw the page or interrupt a new draft.
+        const { screenshotUrl } = await response.json();
+        const cached = cachedComments.find(item => String(item.id) === String(comment.id));
+        if (cached) Object.assign(cached, {
+          screenshot_url: screenshotUrl,
+          screenshot_width: screenshot.width,
+          screenshot_height: screenshot.height,
+        });
       } catch (error) {
-        console.error("Comty: screenshot upload failed", error);
-        captureNodes.forEach((node) => node.remove());
-      }
-    }
-
-    function createCaptureAnnotation(pin, bubble, content) {
-      const capturePin = pin.cloneNode(false);
-      capturePin.dataset.comtyCaptureKeep = "true";
-      capturePin.classList.add("comty-capture-annotation");
-      capturePin.classList.remove("comty-temp-pin");
-      capturePin.style.display = "grid";
-      capturePin.style.pointerEvents = "none";
-      capturePin.style.animation = "none";
-      capturePin.style.opacity = "1";
-      capturePin.style.transform = "translate(-50%, -50%)";
-      setPinIcon(capturePin, currentUser || { name: "You" });
-
-      const captureBubble = document.createElement("div");
-      captureBubble.className =
-        "comty-bubble comty-hover-bubble comty-capture-annotation";
-      captureBubble.dataset.comtyCaptureKeep = "true";
-      captureBubble.style.left = bubble.style.left;
-      captureBubble.style.top = bubble.style.top;
-      captureBubble.style.display = "block";
-      captureBubble.style.pointerEvents = "none";
-      captureBubble.style.animation = "none";
-      captureBubble.style.opacity = "1";
-      captureBubble.style.transform = "none";
-
-      const contentEl = document.createElement("div");
-      contentEl.className = "comty-bubble-content";
-      contentEl.innerText = content;
-      captureBubble.appendChild(contentEl);
-
-      document.body.appendChild(capturePin);
-      document.body.appendChild(captureBubble);
-      return [capturePin, captureBubble];
+        console.warn("Comty: comment saved, screenshot unavailable", error);
+      }
     }
 
     function addLocalComment(commentId, payload) {
       const comment = {
         id: commentId,
+        pending: commentId.startsWith("pending-"),
         project_id: projectId,
         domain: payload.host || window.location.host,
         page_path: payload.pagePath || window.location.pathname,
@@ -2502,6 +2493,7 @@ export function initComty(options = {}) {
         rel_x: payload.relX,
         rel_y: payload.relY,
         content: payload.content || "",
+        link_url: payload.linkUrl || null,
         created_at: new Date().toISOString(),
         dom_element: payload.domElement || null,
         viewport: payload.viewport || null,
@@ -2513,7 +2505,9 @@ export function initComty(options = {}) {
         screenshot_width: null,
         screenshot_height: null,
         anchor_context: payload.anchorContext || null,
-        author_user_id: currentUser?.id || null,
+        author_user_id: currentUser?.isGuest ? null : currentUser?.id || null,
+        guest_author_id: currentUser?.isGuest ? currentUser.id : null,
+        guest_author_name: currentUser?.isGuest ? currentUser.name : null,
         author_name: currentUser?.name || null,
         author_avatar_url: currentUser?.avatarUrl || null,
         replies: [],
@@ -2528,6 +2522,7 @@ export function initComty(options = {}) {
       ];
       renderSidepanelComments();
       void renderComments(cachedComments, { retry: false });
+      return comment;
     }
 
     function getCommentAuthorName(comment) {
@@ -2537,8 +2532,7 @@ export function initComty(options = {}) {
     function isOwnCommentEntry(entry) {
       return Boolean(
         currentUser?.id &&
-        entry?.author_user_id &&
-        entry.author_user_id === currentUser.id,
+        (currentUser.isGuest ? entry?.guest_author_id : entry?.author_user_id) === currentUser.id,
       );
     }
 
@@ -2614,7 +2608,7 @@ export function initComty(options = {}) {
 
     function createThreadItem(
       entry,
-      { showMore = isOwnCommentEntry(entry) } = {},
+      { showMore = isOwnCommentEntry(entry), showLink = true } = {},
     ) {
       const item = document.createElement("div");
       item.className = "comty-thread-item";
@@ -2649,15 +2643,51 @@ export function initComty(options = {}) {
 
       const content = document.createElement("div");
       content.className = "comty-bubble-content";
-      content.innerText = entry?.content || "";
+      renderCommentContent(content, entry?.content || "");
 
       body.appendChild(author);
       body.appendChild(content);
+      if (showLink && entry?.link_url) body.appendChild(createCommentLink(entry.link_url));
       item.appendChild(body);
 
       return { item, body, content, moreButton };
     }
 
+    function renderCommentContent(element, value) {
+      const content = String(value ?? "");
+      const nodes = [];
+      let previousEnd = 0;
+      for (const match of content.matchAll(/https?:\/\/[^\s<>"']+/gi)) {
+        const url = match[0].replace(/[.,!?;:]+$/, "");
+        if (!url) continue;
+        let parsed;
+        try { parsed = new URL(url); } catch { continue; }
+        if (!["http:", "https:"].includes(parsed.protocol) || !parsed.hostname) continue;
+        nodes.push(document.createTextNode(content.slice(previousEnd, match.index)));
+        const link = document.createElement("a");
+        link.href = url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.textContent = url;
+        nodes.push(link);
+        previousEnd = match.index + url.length;
+      }
+      nodes.push(document.createTextNode(content.slice(previousEnd)));
+      element.replaceChildren(...nodes);
+    }
+
+    function createCommentLink(url) {
+      const link = document.createElement("a");
+      link.className = "comty-comment-link";
+      link.href = url;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.title = url;
+      link.setAttribute("aria-label", `Open attached link: ${url}`);
+      link.textContent = url;
+      return link;
+    }
+
     function setPinIcon(pin, comment = null) {
       if (comment) {
         pin.classList.add("comty-pin-with-avatar");
@@ -2674,6 +2704,54 @@ export function initComty(options = {}) {
       `;
     }
 
+    function createCommentPin(comment, x, y) {
+      const pin = document.createElement("button");
+      pin.className = "comty-pin";
+      pin.type = "button";
+      pin.style.left = `${x}px`;
+      pin.style.top = `${y}px`;
+      setPinIcon(pin, comment);
+      const statusDot = document.createElement("span");
+      statusDot.className = "comty-pin-status-dot";
+      applyStatusDot(statusDot, comment.status);
+      pin.appendChild(statusDot);
+      return pin;
+    }
+
+    function createCommentPreview(comment) {
+      const bubble = document.createElement("div");
+      bubble.className = "comty-bubble comty-hover-bubble";
+      const thread = document.createElement("div");
+      thread.className = "comty-thread";
+      thread.appendChild(createThreadItem(comment, { showMore: false, showLink: false }).item);
+      bubble.appendChild(thread);
+      return bubble;
+    }
+
+    function mountCaptureAnnotation(comment, { x, y }) {
+      const host = document.createElement("div");
+      host.dataset.comtyCaptureExclude = "";
+      host.setAttribute("aria-hidden", "true");
+      host.inert = true;
+      // Ancestor opacity hides measurement without changing the components'
+      // computed opacity. Nothing flashes or intercepts input during cloning.
+      Object.assign(host.style, { position: "fixed", inset: "0", opacity: "0", pointerEvents: "none" });
+      const pin = createCommentPin(comment, x, y);
+      const bubble = createCommentPreview(comment);
+      for (const element of [pin, bubble]) {
+        element.dataset.comtyCaptureKeep = "";
+        element.style.setProperty("animation", "none", "important");
+        element.style.setProperty("transition", "none", "important");
+        element.style.setProperty("pointer-events", "none", "important");
+      }
+      pin.style.display = "grid";
+      bubble.style.display = "block";
+      host.append(pin, bubble);
+      root.appendChild(host);
+      positionCommentBubble(bubble, x, y);
+      return { elements: [pin, bubble], dispose: () => host.remove() };
+    }
+
     function createCommentAuthor(comment) {
       const author = document.createElement("div");
       author.className = "comty-comment-author";
@@ -2724,25 +2802,86 @@ export function initComty(options = {}) {
       const actions = document.createElement("div");
       actions.className = "comty-create-actions";
 
+      const linkBtn = document.createElement("button");
+      linkBtn.type = "button";
+      linkBtn.className = "comty-create-link-button";
+      linkBtn.setAttribute("aria-label", "Add link");
+      linkBtn.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+      `;
+
+      const linkEditor = document.createElement("div");
+      linkEditor.className = "comty-create-link-editor";
+      linkEditor.inert = true;
+      linkEditor.setAttribute("aria-hidden", "true");
+      const linkInput = document.createElement("input");
+      linkInput.type = "url";
+      linkInput.placeholder = "Paste a link";
+      linkInput.setAttribute("aria-label", "Link URL");
+      const linkInsert = document.createElement("button");
+      linkInsert.type = "button";
+      linkInsert.textContent = "Add";
+      const linkCancel = document.createElement("button");
+      linkCancel.type = "button";
+      linkCancel.setAttribute("aria-label", "Cancel link");
+      linkCancel.textContent = "×";
+      const linkField = document.createElement("div");
+      linkField.className = "comty-create-link-field";
+      linkField.append(linkInput, linkCancel);
+      linkEditor.append(linkField, linkInsert);
+
+      const attachment = document.createElement("div");
+      attachment.className = "comty-create-attachment";
+      const attachmentLink = document.createElement("a");
+      attachmentLink.className = "comty-comment-link";
+      attachmentLink.target = "_blank";
+      attachmentLink.rel = "noopener noreferrer";
+      const removeAttachment = document.createElement("button");
+      removeAttachment.type = "button";
+      removeAttachment.setAttribute("aria-label", "Remove attached link");
+      removeAttachment.textContent = "×";
+      const attachmentChip = document.createElement("div");
+      attachmentChip.className = "comty-create-attachment-chip";
+      attachmentChip.append(attachmentLink, removeAttachment);
+      attachment.appendChild(attachmentChip);
+      let attachedLink = "";
+
       const submitBtn = document.createElement("button");
+      submitBtn.type = "button";
       submitBtn.className = "comty-btn-submit";
       submitBtn.setAttribute("aria-label", "Post comment");
+      submitBtn.disabled = true;
       submitBtn.innerHTML = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M12 19V5M5 12l7-7 7 7"/>
         </svg>
       `;
 
+      const editorDraft = draftAnchor;
       const submit = async () => {
         const content = textarea.value.trim();
-        if (!content) return;
+        if (!content || textarea.disabled) return;
 
         submitBtn.disabled = true;
         textarea.disabled = true;
+        linkBtn.disabled = true;
 
         payload.content = content;
+        payload.linkUrl = attachedLink || null;
         textarea.textContent = content;
 
+        const context = captureContext();
+        const point = getPinPoint(pin);
+        const pendingId = `pending-${crypto.randomUUID()}`;
+        // Paint the comment immediately. The network save never waits for capture work.
+        bubble.remove();
+        pin.remove();
+        if (draftAnchor === editorDraft) draftAnchor = null;
+        hideInspector();
+        addLocalComment(pendingId, payload);
         let post;
         try {
           post = await fetch(`${apiUrl}/api/comments`, {
@@ -2750,35 +2889,32 @@ export function initComty(options = {}) {
             headers: getSdkHeaders({ "Content-Type": "application/json" }),
             body: JSON.stringify(payload),
           });
+          if (!post.ok) throw new Error(`Comment save failed (${post.status})`);
+          const data = await post.json();
+          if (!data?.id) throw new Error("Comment save returned no ID");
+          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+          if (context.url === location.href) {
+            const comment = addLocalComment(String(data.id), payload);
+            // Start only after the save and immediate UI update; the capture yields to input.
+            void uploadCommentScreenshot(comment, context, point);
+          } else void loadComments({ force: true });
         } catch (error) {
           console.error("Comty: save failed", error);
+          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+          renderSidepanelComments();
+          void renderComments(cachedComments, { retry: false });
+          // Keep the original editor and its text available for retry, including attachments.
+          if (!draftAnchor) draftAnchor = editorDraft;
+          root.append(pin, bubble);
           submitBtn.disabled = false;
           textarea.disabled = false;
-          return;
-        }
-
-        if (!post.ok) {
-          console.error("Comty: save failed", await post.text());
-          submitBtn.disabled = false;
-          textarea.disabled = false;
-          return;
-        }
-
-        const data = await post.json();
-        const commentId = data?.id;
-        const captureNodes = commentId
-          ? createCaptureAnnotation(pin, bubble, content)
-          : [];
-        bubble.remove();
-        pin.remove();
-        draftAnchor = null;
-        hideInspector();
-        if (commentId) {
-          addLocalComment(String(commentId), payload);
-          void loadComments({ force: true });
-          void uploadCommentScreenshot(String(commentId), payload, captureNodes);
-        } else {
-          void loadComments({ force: true });
+          linkBtn.disabled = false;
+          const errorMessage = document.createElement("p");
+          errorMessage.setAttribute("role", "alert");
+          errorMessage.textContent = "Comment not saved. Your draft is ready to retry.";
+          bubble.querySelector('[role="alert"]')?.remove();
+          bubble.append(errorMessage);
+          if (bubble.isConnected) textarea.focus();
         }
       };
 
@@ -2787,8 +2923,63 @@ export function initComty(options = {}) {
         submit();
       };
 
+      const closeLinkEditor = () => {
+        bubble.classList.remove("comty-create-link-open");
+        linkEditor.inert = true;
+        linkEditor.setAttribute("aria-hidden", "true");
+        linkInput.value = "";
+        linkInput.removeAttribute("aria-invalid");
+        linkInput.setCustomValidity("");
+        textarea.focus();
+      };
+      linkBtn.onclick = () => {
+        if (!bubble.classList.contains("comty-create-expanded")) return;
+        bubble.classList.add("comty-create-link-open");
+        linkEditor.inert = false;
+        linkEditor.setAttribute("aria-hidden", "false");
+        linkInput.focus();
+      };
+      linkCancel.onclick = closeLinkEditor;
+      linkInput.oninput = () => {
+        linkInput.removeAttribute("aria-invalid");
+        linkInput.setCustomValidity("");
+      };
+      linkInput.onkeydown = (event) => {
+        if (event.key === "Enter") { event.preventDefault(); linkInsert.click(); }
+        if (event.key === "Escape") { event.preventDefault(); closeLinkEditor(); }
+      };
+      linkInsert.onclick = () => {
+        const value = linkInput.value.trim();
+        const candidate = /^[a-z][a-z0-9+.-]*:/i.test(value) ? value : `https://${value}`;
+        let url;
+        try { url = new URL(candidate); } catch { /* Report below. */ }
+        if (!url || !["http:", "https:"].includes(url.protocol) || !url.hostname || url.username || url.password || /\s/.test(value) || String(url).length > 2048) {
+          linkInput.setAttribute("aria-invalid", "true");
+          linkInput.setCustomValidity("Enter a valid HTTP(S) URL.");
+          linkInput.reportValidity();
+          linkInput.focus();
+          return;
+        }
+        attachedLink = String(url);
+        attachmentLink.href = attachedLink;
+        attachmentLink.title = attachedLink;
+        attachmentLink.textContent = attachedLink;
+        bubble.classList.add("comty-create-has-attachment");
+        closeLinkEditor();
+        const point = getPinPoint(pin);
+        positionCommentBubble(bubble, point.x, point.y);
+        renderInspector();
+      };
+
+      removeAttachment.onclick = () => {
+        attachedLink = "";
+        bubble.classList.remove("comty-create-has-attachment");
+        textarea.focus();
+        textarea.oninput();
+      };
+
       textarea.onkeydown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
+        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
           e.preventDefault();
           submit();
         }
@@ -2799,31 +2990,20 @@ export function initComty(options = {}) {
       };
 
       textarea.oninput = () => {
-        textarea.style.height = "24px";
-        const scrollHeight = textarea.scrollHeight;
-        textarea.style.height = scrollHeight + "px";
-
-        if (scrollHeight > 24) {
-          bubble.style.borderRadius = "16px";
-          bubble.style.alignItems = "flex-end";
-        } else {
-          bubble.style.borderRadius = "999px";
-          bubble.style.alignItems = "center";
-        }
-
-        if (textarea.value.trim().length > 0) {
-          submitBtn.classList.add("comty-btn-active");
-        } else {
-          submitBtn.classList.remove("comty-btn-active");
-        }
+        const expanded = textarea.value.length > 0 || Boolean(attachedLink);
+        bubble.classList.toggle("comty-create-expanded", expanded);
+        if (!expanded && bubble.classList.contains("comty-create-link-open")) closeLinkEditor();
+        submitBtn.disabled = !textarea.value.trim();
+        submitBtn.classList.toggle("comty-btn-active", !submitBtn.disabled);
         const point = getPinPoint(pin);
         positionCommentBubble(bubble, point.x, point.y);
         renderInspector();
       };
 
-      actions.appendChild(submitBtn);
+      actions.append(linkBtn, submitBtn, linkEditor);
 
       bubble.appendChild(textarea);
+      bubble.appendChild(attachment);
       bubble.appendChild(actions);
 
       root.appendChild(bubble);
@@ -2932,6 +3112,7 @@ export function initComty(options = {}) {
         const item = document.createElement("button");
         item.type = "button";
         item.className = "comty-sidepanel-item";
+        item.disabled = Boolean(comment.pending);
         item.innerHTML = `
         <span class="comty-sidepanel-item-status" aria-hidden="true"></span>
         <span class="comty-sidepanel-item-body">
@@ -2952,7 +3133,7 @@ export function initComty(options = {}) {
 
         const metaEl = item.querySelector(".comty-sidepanel-item-meta");
         if (metaEl instanceof HTMLElement) {
-          metaEl.innerText = `${comment.author_name || "Anonymous"} · ${getCommentLabel(comment)}`;
+          metaEl.innerText = `${comment.author_name || "Anonymous"} · ${comment.pending ? "Sending…" : getCommentLabel(comment)}`;
           metaEl.title = getCommentLabel(comment);
         }
 
@@ -3283,11 +3464,13 @@ export function initComty(options = {}) {
     const openCommentThread = createCommentThread({
       root, apiUrl, projectKey, commentStatuses, selectedStatusFilters, placedPins,
       closeBubbles, getCommentStatus, updateCommentStatus, applyStatusDot,
-      renderSidepanelComments, applyStatusFilters, createThreadItem,
+      renderSidepanelComments, applyStatusFilters, createThreadItem, renderCommentContent,
       isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
       updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
       showAuthPrompt,
       get canWrite() { return canWrite; },
+      get canManage() { return canManage; },
+      get allowGuestComments() { return allowGuestComments; },
       get currentUser() { return currentUser; },
       get cachedComments() { return cachedComments; },
       set cachedComments(value) { cachedComments = value; },
@@ -3337,20 +3520,11 @@ export function initComty(options = {}) {
       const x = visibility.clientX;
       const y = visibility.clientY;
 
-      const pin = document.createElement("button");
-      pin.className = "comty-pin";
-      pin.type = "button";
+      const pin = createCommentPin(comment, x, y);
+      pin.disabled = Boolean(comment.pending);
       pin.dataset.status = getCommentStatus(comment.status).value;
-      if (comment.id) {
-        pin.dataset.commentId = String(comment.id);
-      }
-      pin.style.left = `${x}px`;
-      pin.style.top = `${y}px`;
-      setPinIcon(pin, comment);
-      const pinStatusDot = document.createElement("span");
-      pinStatusDot.className = "comty-pin-status-dot";
-      applyStatusDot(pinStatusDot, comment.status);
-      pin.appendChild(pinStatusDot);
+      if (comment.id) pin.dataset.commentId = String(comment.id);
+      const pinStatusDot = pin.querySelector(".comty-pin-status-dot");
       pin.setAttribute(
         "aria-label",
         `Afficher le commentaire, statut ${getCommentStatus(comment.status).label}`,
@@ -3392,32 +3566,14 @@ export function initComty(options = {}) {
           activeHoverCommentIds.add(commentId);
         }
 
-        const hoverBubble = document.createElement("div");
-        hoverBubble.className = "comty-bubble comty-hover-bubble";
+        const hoverBubble = createCommentPreview(comment);
         hoverBubble.style.left = `${x + 32}px`;
         hoverBubble.style.top = `${y - 17}px`;
-        hoverBubble.style.pointerEvents = "none";
         hoverBubble.dataset.hoverId = commentId;
 
-        const hoverThread = document.createElement("div");
-        hoverThread.className = "comty-thread";
-        const hoverItem = createThreadItem(comment, { showMore: false });
-        hoverThread.appendChild(hoverItem.item);
-        hoverBubble.appendChild(hoverThread);
-
         root.appendChild(hoverBubble);
 
-        requestAnimationFrame(() => {
-          if (x + 16 + hoverBubble.offsetWidth > window.innerWidth) {
-            hoverBubble.style.left = `${x - hoverBubble.offsetWidth - 24}px`;
-            hoverBubble.classList.add("comty-bubble-left");
-          }
-
-          const rect = hoverBubble.getBoundingClientRect();
-          if (rect.bottom > window.innerHeight) {
-            hoverBubble.style.top = `${y - rect.height - 16}px`;
-          }
-        });
+        requestAnimationFrame(() => positionCommentBubble(hoverBubble, x, y));
       };
 
       pin.onmouseleave = () => {
@@ -3514,6 +3670,9 @@ export function initComty(options = {}) {
       cachedComments = comments
         .filter(comment => comment.kind !== "agent" && !comment.local_agent)
         .map(comment => Object.assign(previous.get(String(comment.id)) || {}, comment));
+      for (const comment of previous.values()) {
+        if (comment.pending && !cachedComments.some(item => item.id === comment.id)) cachedComments.push(comment);
+      }
     }
 
     async function loadComments({ force = false } = {}) {
@@ -3734,7 +3893,6 @@ export function initComty(options = {}) {
         hideInspector();
         return;
       }
-      if (inspectedElement !== target) inspectExpanded = selectedElement ? inspectExpanded : false;
       showInspector(target);
     }, true);
     document.documentElement.addEventListener("pointerleave", () => {
@@ -3791,7 +3949,6 @@ export function initComty(options = {}) {
           }
           measuredRegion = null;
           selectedElement = getAnchorElement(target);
-          inspectExpanded = false;
           showInspector(target);
           return;
         }
@@ -3949,13 +4106,26 @@ export function initComty(options = {}) {
       const data = await res.json();
       projectId = data.projectId;
       canWrite = Boolean(data.canWrite);
+      canManage = Boolean(data.canManage ?? data.canWrite);
+      allowGuestComments = Boolean(data.allowGuestComments);
       currentUser = data.user || null;
       loginUrl = data.loginUrl || "";
 
       if (!canWrite && sdkToken) {
-        sessionStorage.removeItem(tokenStorageKey);
+        try { sessionStorage.removeItem(tokenStorageKey); } catch { /* Storage may be unavailable. */ }
         sdkToken = "";
       }
+      if (didCompleteSignIn || authStatus === "forbidden") {
+        let previousSession;
+        try {
+          previousSession = JSON.parse(sessionStorage.getItem(authReturnStorageKey) || "null");
+          sessionStorage.removeItem(authReturnStorageKey);
+        } catch { /* Fall back to the requested comment mode. */ }
+        const mode = canWrite && ["browse", "edit", "inspect"].includes(previousSession?.mode)
+          ? previousSession.mode : canWrite ? "edit" : "browse";
+        setSession(mode, { entry: previousSession?.entry || mode });
+        if (previousSession?.sidepanelOpen) setSidepanelOpen(true);
+      }
       if (authStatus === "forbidden") showAuthPrompt(true);
       if (canWrite && didCompleteSignIn) {
         const toast = document.createElement("div");
@@ -3984,7 +4154,7 @@ export function initComty(options = {}) {
           setSession(session.comments ? session.mode : "browse", { entry: sessionEntry, renderComments: true });
           return renderComments(cachedComments, { retry: false });
         },
-        setCanWrite(value) { canWrite = value; },
+        setCanWrite(value) { canWrite = value; canManage = value; },
         invalidate() { anchorRevision += 1; },
       });
     }