@beyondwork/docx-react-component 1.0.41 → 1.0.42

package/src/ui-tailwind/chrome/collab-send-to-supplier-modal.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+
+export interface CollabSendToSupplierSubmitArgs {
+  recipient: string;
+  archiveRef: string;
+}
+
+export interface CollabSendToSupplierModalProps {
+  open: boolean;
+  shareableCount: number;
+  internalCount: number;
+  onClose: () => void;
+  /**
+   * Invoked when the user confirms. Caller routes to
+   * `session.sendToExternal({ payloadXml, recipient, archiveRef, ... })`
+   * and owns the resulting docx-zip rewrite.
+   */
+  onSubmit: (args: CollabSendToSupplierSubmitArgs) => void | Promise<void>;
+  /** Seed value; primarily useful for hosts that remember the last supplier. */
+  initialRecipient?: string;
+  /** Seed value for the archive reference field. */
+  initialArchiveRef?: string;
+  className?: string;
+}
+
+/**
+ * Confirmation modal for send-to-supplier (P9f). Collects the
+ * `recipient` + `archiveRef` from the user and hands them to the
+ * caller. Kept controlled (open/close managed externally) so the
+ * button in the top nav owns modal state.
+ *
+ * Deliberately minimal DOM for unit testing — the full visual design
+ * (icons, animations, role-scoped styling) ships later as host CSS;
+ * this component owns semantics + accessibility only.
+ */
+export function CollabSendToSupplierModal({
+  open,
+  shareableCount,
+  internalCount,
+  onClose,
+  onSubmit,
+  initialRecipient = "",
+  initialArchiveRef = "",
+  className,
+}: CollabSendToSupplierModalProps): React.ReactElement | null {
+  const [recipient, setRecipient] = React.useState(initialRecipient);
+  const [archiveRef, setArchiveRef] = React.useState(initialArchiveRef);
+  const [submitting, setSubmitting] = React.useState(false);
+
+  // Reset form fields (to the seeds) when the modal is reopened.
+  React.useEffect(() => {
+    if (open) {
+      setRecipient(initialRecipient);
+      setArchiveRef(initialArchiveRef);
+      setSubmitting(false);
+    }
+  }, [open, initialRecipient, initialArchiveRef]);
+
+  if (!open) return null;
+
+  const canSubmit =
+    recipient.trim().length > 0 && archiveRef.trim().length > 0 && !submitting;
+
+  const rootClass = [
+    "tw-collab-send-to-supplier-modal",
+    className ?? null,
+  ]
+    .filter((v): v is string => v !== null)
+    .join(" ");
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setSubmitting(true);
+    try {
+      await onSubmit({
+        recipient: recipient.trim(),
+        archiveRef: archiveRef.trim(),
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      className={rootClass}
+      data-testid="collab-send-to-supplier-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="collab-send-to-supplier-title"
+    >
+      <div className="tw-collab-send-to-supplier-modal__backdrop" onClick={onClose} />
+      <form
+        className="tw-collab-send-to-supplier-modal__panel"
+        onSubmit={handleSubmit}
+      >
+        <h2 id="collab-send-to-supplier-title">Send to supplier</h2>
+        <p className="tw-collab-send-to-supplier-modal__summary">
+          {shareableCount} comment{shareableCount === 1 ? "" : "s"} will ship
+          to the supplier; {internalCount} internal comment
+          {internalCount === 1 ? "" : "s"} will stay in your archive.
+        </p>
+        <label>
+          <span>Recipient</span>
+          <input
+            data-testid="collab-send-to-supplier-modal-recipient"
+            type="text"
+            value={recipient}
+            onChange={(e) => setRecipient(e.target.value)}
+            placeholder="supplier-org-42"
+            required
+          />
+        </label>
+        <label>
+          <span>Archive reference</span>
+          <input
+            data-testid="collab-send-to-supplier-modal-archive-ref"
+            type="text"
+            value={archiveRef}
+            onChange={(e) => setArchiveRef(e.target.value)}
+            placeholder="clm://archive/abc"
+            required
+          />
+        </label>
+        <div className="tw-collab-send-to-supplier-modal__actions">
+          <button
+            type="button"
+            className="tw-collab-send-to-supplier-modal__cancel"
+            data-testid="collab-send-to-supplier-modal-cancel"
+            onClick={onClose}
+            disabled={submitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="tw-collab-send-to-supplier-modal__submit"
+            data-testid="collab-send-to-supplier-modal-submit"
+            disabled={!canSubmit}
+            aria-disabled={!canSubmit ? "true" : undefined}
+          >
+            {submitting ? "Sending…" : "Send"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/collab-tamper-banner.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import type { MetadataIntegrity } from "../../runtime/tamper-gate.ts";
+
+export interface CollabTamperBannerProps {
+  /** Current `metadataIntegrity` state from `session.getMetadataIntegrity()`. */
+  integrity: MetadataIntegrity;
+  /** Called when the user acknowledges. Caller routes to `session.acknowledgeMetadataTampering()`. */
+  onAcknowledge: () => void;
+  className?: string;
+}
+
+/**
+ * Banner surfaced in the `"collab"` chrome preset (P9d) whenever the
+ * tamper gate reports `"tampered"`. Renders nothing in `"verified"` /
+ * `"unsigned"` states so hosts can mount it unconditionally inside the
+ * top nav and let it self-gate on the integrity signal.
+ *
+ * Contract:
+ *   - Renders nothing when `integrity !== "tampered"`.
+ *   - When tampered, shows a prominent banner with a single
+ *     "Acknowledge & continue" action.
+ *   - The acknowledge button calls `onAcknowledge()`. The runtime's
+ *     tamper gate treats the first `acknowledge()` as the gate-unlock;
+ *     subsequent calls while `verified` are no-ops.
+ *   - Subscribing to `metadata_integrity_violation` is the host's job;
+ *     this component is pure and idempotent.
+ */
+export function CollabTamperBanner({
+  integrity,
+  onAcknowledge,
+  className,
+}: CollabTamperBannerProps): React.ReactElement | null {
+  if (integrity !== "tampered") return null;
+
+  const rootClass = [
+    "tw-collab-tamper-banner",
+    className ?? null,
+  ]
+    .filter((v): v is string => v !== null)
+    .join(" ");
+
+  return (
+    <div
+      className={rootClass}
+      data-testid="collab-tamper-banner"
+      data-integrity={integrity}
+      role="alert"
+      aria-live="assertive"
+    >
+      <span className="tw-collab-tamper-banner__icon" aria-hidden="true">
+        ⚠
+      </span>
+      <span className="tw-collab-tamper-banner__message">
+        Metadata integrity check failed. The workflow payload was modified
+        outside the editor. Mutations are blocked until you acknowledge.
+      </span>
+      <button
+        type="button"
+        className="tw-collab-tamper-banner__ack"
+        data-testid="collab-tamper-banner-ack"
+        onClick={onAcknowledge}
+      >
+        Acknowledge &amp; continue
+      </button>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/forward-non-drag-click.ts

@@ -0,0 +1,104 @@
+/**
+ * Re-dispatch a click that landed on an invisible resize grip to the element
+ * beneath it, so PM-rendered cell text still receives mousedown/mouseup/click
+ * when the user clicks near a cell edge without dragging.
+ *
+ * This is the click-trap fix for the table grip layer.  It is extracted into
+ * its own module with dependency injection so the hardening rules can be
+ * unit-tested in isolation:
+ *
+ *   - Never re-dispatch into chrome overlays (`[data-chrome-overlay]`).
+ *     Forwarding into a scope card / toolbar / picker would trigger that
+ *     overlay's own handlers and potentially re-enter the grip.
+ *   - Never re-dispatch when modifier keys are held — Shift/Ctrl/Meta/Alt
+ *     clicks carry selection semantics that do not survive synthesis.
+ *   - Never re-dispatch for non-primary mouse buttons.
+ *   - Always restore `pointerEvents` on the grip, even if layout queries
+ *     throw.  `elementFromPoint` is permitted to throw in some browsers
+ *     when called during layout invalidation.
+ *   - Tolerate a detached `gripEl`: a React re-render between mousedown and
+ *     mouseup can unmount the grip; style writes on an orphaned element
+ *     are harmless, but we must not throw if the owner document is gone.
+ */
+
+export interface ForwardNonDragClickOptions {
+  /**
+   * Injector for `document.elementFromPoint` (used in tests).  Defaults
+   * to `gripEl.ownerDocument?.elementFromPoint`.
+   */
+  elementFromPoint?: (x: number, y: number) => Element | null;
+}
+
+const CHROME_OVERLAY_SELECTOR = "[data-chrome-overlay]";
+
+export function forwardNonDragClick(
+  gripEl: HTMLElement,
+  event: MouseEvent,
+  options: ForwardNonDragClickOptions = {},
+): void {
+  if (event.button !== 0) return;
+  if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
+
+  const ownerDocument = gripEl.ownerDocument;
+  if (!ownerDocument) return;
+
+  const previousPointerEvents = gripEl.style.pointerEvents;
+  const canMutateStyle = gripEl.isConnected || previousPointerEvents !== "";
+  if (canMutateStyle) {
+    try {
+      gripEl.style.pointerEvents = "none";
+    } catch {
+      // style mutation can fail in extremely narrow edge cases; proceed anyway.
+    }
+  }
+
+  try {
+    const locate =
+      options.elementFromPoint ??
+      ((x: number, y: number) =>
+        ownerDocument.elementFromPoint
+          ? ownerDocument.elementFromPoint(x, y)
+          : null);
+
+    let beneath: Element | null;
+    try {
+      beneath = locate(event.clientX, event.clientY);
+    } catch {
+      return;
+    }
+
+    if (!beneath || beneath === gripEl) return;
+    if (beneath.closest && beneath.closest(CHROME_OVERLAY_SELECTOR)) return;
+
+    const view = ownerDocument.defaultView ?? null;
+    if (!view) return;
+
+    const init: MouseEventInit = {
+      bubbles: true,
+      cancelable: true,
+      view,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      button: event.button,
+      buttons: event.buttons,
+      ctrlKey: false,
+      metaKey: false,
+      shiftKey: false,
+      altKey: false,
+    };
+    const MouseEventCtor = view.MouseEvent;
+    beneath.dispatchEvent(new MouseEventCtor("mousedown", init));
+    beneath.dispatchEvent(new MouseEventCtor("mouseup", init));
+    beneath.dispatchEvent(new MouseEventCtor("click", init));
+  } finally {
+    if (canMutateStyle) {
+      try {
+        gripEl.style.pointerEvents = previousPointerEvents;
+      } catch {
+        // Orphaned / detached elements may reject style writes; ignore.
+      }
+    }
+  }
+}

package/src/ui-tailwind/chrome/tw-mode-dock.tsx

@@ -37,6 +37,7 @@ export function TwModeDock(props: TwModeDockProps) {
       aria-label="Mode dock"
       className={className}
       data-testid="tw-mode-dock"
+      data-chrome-overlay="mode-dock"
     >
       <div className="flex items-center gap-1.5 pl-1 pr-1.5">
         {props.icon ? (

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -138,6 +138,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
         <div
           className="pointer-events-auto absolute"
           data-placement="detached"
+          data-chrome-overlay="selection-tool"
           style={{
             left: `calc(50% + ${detachedOffset.x}px)`,
             top: `${12 + detachedOffset.y}px`,
@@ -156,6 +157,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
         <div
           className="pointer-events-auto absolute"
           data-placement={props.placement.placement}
+          data-chrome-overlay="selection-tool"
           style={props.placement.style}
         >
           {wrappedContent}
@@ -169,7 +171,11 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
       className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
       data-testid={overlayTestId}
     >
-      <div className="pointer-events-auto" data-placement="fallback">
+      <div
+        className="pointer-events-auto"
+        data-placement="fallback"
+        data-chrome-overlay="selection-tool"
+      >
         {wrappedContent}
       </div>
     </div>

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -30,50 +30,13 @@ import type {
 import type { OverlayCoordinateSpace } from "../chrome-overlay/chrome-overlay-projector";
 import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector";
 import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
+import { forwardNonDragClick } from "./forward-non-drag-click";
 
 const GRIP_PX = 6;
 const DRAG_THRESHOLD_PX = 3;
 const MIN_COLUMN_TWIPS = 720;
 const MIN_ROW_TWIPS = 120;
 
-/**
- * Re-dispatch a click that landed on an invisible resize grip to the element
- * beneath it.  Called when a mouseup fires without any drag movement, so the
- * user's intended target (typically PM-rendered cell text) still receives
- * mousedown/mouseup/click and can place the caret.
- */
-function forwardNonDragClick(gripEl: HTMLElement, event: MouseEvent): void {
-  const previous = gripEl.style.pointerEvents;
-  gripEl.style.pointerEvents = "none";
-  try {
-    const beneath = gripEl.ownerDocument?.elementFromPoint(
-      event.clientX,
-      event.clientY,
-    );
-    if (!beneath || beneath === gripEl) return;
-    const init: MouseEventInit = {
-      bubbles: true,
-      cancelable: true,
-      view: gripEl.ownerDocument?.defaultView ?? window,
-      clientX: event.clientX,
-      clientY: event.clientY,
-      screenX: event.screenX,
-      screenY: event.screenY,
-      button: event.button,
-      buttons: event.buttons,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      shiftKey: event.shiftKey,
-      altKey: event.altKey,
-    };
-    beneath.dispatchEvent(new MouseEvent("mousedown", init));
-    beneath.dispatchEvent(new MouseEvent("mouseup", init));
-    beneath.dispatchEvent(new MouseEvent("click", init));
-  } finally {
-    gripEl.style.pointerEvents = previous;
-  }
-}
-
 export interface TwTableGripLayerProps {
   facet: WordReviewEditorLayoutFacet;
   tableContext: TableStructureContextSnapshot | null;

package/src/ui-tailwind/chrome-overlay/index.ts

@@ -7,6 +7,12 @@
 
 export { TwChromeOverlay, type TwChromeOverlayProps } from "./tw-chrome-overlay";
 export { TwScopeRailLayer, type TwScopeRailLayerProps } from "./tw-scope-rail-layer";
+export {
+  TwPageStackOverlayLayer,
+  resolvePageOverlayRects,
+  type PageOverlayRect,
+  type TwPageStackOverlayLayerProps,
+} from "./tw-page-stack-overlay-layer";
 export { TwScopeCard, type TwScopeCardProps } from "./tw-scope-card";
 export { TwScopeCardLayer, type TwScopeCardLayerProps } from "./tw-scope-card-layer";
 export {

package/src/ui-tailwind/chrome-overlay/scope-card-role-model.ts

@@ -0,0 +1,78 @@
+/**
+ * Scope card role visibility model.
+ *
+ * Per docs/plans/scope-card-overlay.md P3, the card's content adapts
+ * to the active editor role: editor-mode keeps just mode + issue;
+ * review-mode shows the full surface (suggestions, timeline, agent);
+ * workflow-mode additionally exposes scope-tag editing.  Host-supplied
+ * `reviewRailSections` never overrides these — the rail and the
+ * over-document card are different surfaces.
+ */
+
+import type { EditorRole } from "../../api/public-types";
+
+export interface ScopeCardSectionVisibility {
+  /** Always true — header is always rendered. */
+  header: boolean;
+  /** Mode selector (edit/suggest/comment/view). */
+  modeRow: boolean;
+  /** Issue severity + owner + Resolve/Waive/Escalate row (R2). */
+  issueRow: boolean;
+  /** Suggestion-group chips + Accept/Reject (R3). */
+  suggestionRows: boolean;
+  /** Review-action audit timeline (K1). */
+  timeline: boolean;
+  /** "Ask review agent" button (K2). */
+  agentButton: boolean;
+  /**
+   * Scope-tag editor row shown under the mode row.  Only in workflow
+   * role; the host renders the actual editor inside a slot the card
+   * reserves.
+   */
+  scopeTagEditor: boolean;
+}
+
+export function resolveScopeCardVisibility(role: EditorRole): ScopeCardSectionVisibility {
+  switch (role) {
+    case "editor":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: false,
+        timeline: false,
+        agentButton: false,
+        scopeTagEditor: false,
+      };
+    case "review":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: false,
+      };
+    case "workflow":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: true,
+      };
+    default:
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: false,
+      };
+  }
+}

package/src/ui-tailwind/chrome-overlay/scope-keyboard-cycle.ts

@@ -0,0 +1,49 @@
+/**
+ * Pure scope-cycling helper for P3d keyboard navigation.
+ *
+ * J advances `currentScopeId` one position in document order; K
+ * retreats it.  Both wrap around the list.  When no scope is
+ * currently active, J opens the first, K opens the last.
+ *
+ * Exported from a dedicated module so unit tests can exercise the
+ * logic without mounting the workspace keydown listener.
+ */
+
+export function cycleScopeIndex(
+  currentScopeId: string | null,
+  scopeIds: readonly string[],
+  direction: 1 | -1,
+): string | null {
+  if (scopeIds.length === 0) return null;
+  const currentIndex = currentScopeId ? scopeIds.indexOf(currentScopeId) : -1;
+  if (currentIndex < 0) {
+    return direction > 0 ? scopeIds[0] ?? null : scopeIds[scopeIds.length - 1] ?? null;
+  }
+  const nextIndex = (currentIndex + direction + scopeIds.length) % scopeIds.length;
+  return scopeIds[nextIndex] ?? null;
+}
+
+/**
+ * Determine whether a keyboard event should be handled as scope
+ * navigation, or left alone so the PM surface / contenteditable /
+ * form controls / open scope card can consume it.
+ */
+export function shouldHandleScopeNavKey(event: KeyboardEvent): boolean {
+  if (event.metaKey || event.ctrlKey || event.altKey) return false;
+  if (
+    event.key !== "j" &&
+    event.key !== "k" &&
+    event.key !== "J" &&
+    event.key !== "K" &&
+    event.key !== "Enter"
+  ) {
+    return false;
+  }
+  const target = event.target as Element | null;
+  if (!target || typeof target.closest !== "function") return true;
+  if (target.closest(".ProseMirror")) return false;
+  if (target.closest("[contenteditable='true']")) return false;
+  if (target.closest("input, textarea, select")) return false;
+  if (target.closest("[data-testid='scope-card']")) return false;
+  return true;
+}

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -16,6 +16,7 @@ import * as React from "react";
 import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
 import type { ScopeRailSegment } from "../../runtime/layout";
 import type {
+  EditorRole,
   ScopeIssueAction,
   TableStructureContextSnapshot,
   WordReviewEditorLayoutFacet,
@@ -23,6 +24,7 @@ import type {
 } from "../../api/public-types";
 import { TwScopeRailLayer } from "./tw-scope-rail-layer";
 import { TwScopeCardLayer } from "./tw-scope-card-layer";
+import { TwPageStackOverlayLayer } from "./tw-page-stack-overlay-layer";
 import { TwTableGripLayer } from "../chrome/tw-table-grip-layer";
 
 export interface TwChromeOverlayProps {
@@ -64,6 +66,26 @@ export interface TwChromeOverlayProps {
     issueId: string,
     action: ScopeIssueAction,
   ) => void;
+  /**
+   * R3 — scope card suggestion-group accept fired.  The owner relays
+   * to `ref.acceptSuggestionGroup(groupId)`.
+   */
+  onScopeCardAcceptSuggestionGroup?: (scopeId: string, groupId: string) => void;
+  /** R3 — suggestion-group reject. */
+  onScopeCardRejectSuggestionGroup?: (scopeId: string, groupId: string) => void;
+  /**
+   * K2 — scope card "Ask review agent" button fired.  The owner
+   * emits `agent-on-selection-requested` via WordReviewEditorEvent.
+   * Button is hidden when this handler is not supplied.
+   */
+  onScopeCardAskAgent?: (scopeId: string) => void;
+  /** P3 — active editor role; drives card visibility matrix. */
+  editorRole?: EditorRole;
+  /**
+   * P3 — scope-tag editor slot (workflow role only).  Renders between
+   * the card's mode row and issue row when present.
+   */
+  scopeCardScopeTagEditor?: React.ReactNode;
   /** Test id applied to the overlay root. */
   "data-testid"?: string;
   /** Optional extra children (e.g., future comment balloon layer). */
@@ -80,6 +102,23 @@ export interface TwChromeOverlayProps {
     twips: number,
     rule: "auto" | "atLeast" | "exact",
   ) => void;
+
+  // Page-stack overlay (P3.b) -------------------------------------------
+  /**
+   * Scroll root that hosts the PM surface + page-break widgets.  The page-
+   * stack overlay measures widget positions from this element to derive
+   * per-page Y-ranges.  When omitted, the page-stack overlay is skipped —
+   * consumers in canvas workspace mode or tests without a DOM can pass
+   * `null` to disable the overlay cleanly.
+   */
+  pageStackScrollRoot?: HTMLElement | null;
+  /**
+   * Render-frame revision tick — incremented by the workspace on
+   * `zoom_changed` / `render_frame_ready` / `incremental_relayout` events.
+   * Drives re-measurement of the page-stack overlay without triggering a
+   * full workspace re-render.
+   */
+  renderFrameRevision?: number;
 }
 
 /**
@@ -100,11 +139,18 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   onScopeCardClose,
   onScopeCardModeChange,
   onScopeCardIssueAction,
+  onScopeCardAcceptSuggestionGroup,
+  onScopeCardRejectSuggestionGroup,
+  onScopeCardAskAgent,
+  editorRole,
+  scopeCardScopeTagEditor,
   "data-testid": testId,
   children,
   tableContext,
   onSetColumnWidth,
   onSetRowHeight,
+  pageStackScrollRoot,
+  renderFrameRevision,
 }) => {
   return (
     <div
@@ -112,6 +158,13 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
       data-testid={testId ?? "chrome-overlay"}
       role="presentation"
     >
+      {pageStackScrollRoot !== undefined ? (
+        <TwPageStackOverlayLayer
+          facet={facet}
+          scrollRoot={pageStackScrollRoot}
+          renderFrameRevision={renderFrameRevision ?? 0}
+        />
+      ) : null}
       <TwScopeRailLayer
         facet={facet}
         space={space}
@@ -125,6 +178,11 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         onClose={onScopeCardClose ?? noop}
         onModeChange={onScopeCardModeChange ?? noopModeChange}
         onIssueAction={onScopeCardIssueAction ?? noopIssueAction}
+        onAcceptSuggestionGroup={onScopeCardAcceptSuggestionGroup}
+        onRejectSuggestionGroup={onScopeCardRejectSuggestionGroup}
+        onAskAgent={onScopeCardAskAgent}
+        editorRole={editorRole}
+        scopeTagEditor={scopeCardScopeTagEditor}
         space={space}
       />
       <TwTableGripLayer