@beyondwork/docx-react-component 1.0.84 → 1.0.86

package/src/ui/WordReviewEditor.tsx

@@ -66,6 +66,7 @@ import type {
   ViewMode as EditorViewMode,
   WorkflowBlockedCommandReason,
   WorkflowMarkupSnapshot,
+  WorkflowMarkupMode,
   WorkflowScopeSnapshot,
   WordReviewEditorChromeOptions,
   WordReviewEditorChromePreset,
@@ -250,6 +251,21 @@ function normalizeHostMarkupDisplay(
   return "markup";
 }
 
+function toWorkflowMarkupMode(mode: MarkupDisplay): WorkflowMarkupMode {
+  switch (mode) {
+    case "all":
+    case "all-markup":
+      return "all";
+    case "simple":
+    case "simple-markup":
+      return "simple";
+    case "clean":
+    case "no-markup":
+    case "original":
+      return "clean";
+  }
+}
+
 const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   position: "absolute",
   width: "1px",
@@ -383,6 +399,11 @@ export function __createWordReviewEditorRefBridge(
     resolveComment: (commentId) => runtime.resolveComment(commentId),
     reopenComment: (commentId) => runtime.reopenComment(commentId),
     addCommentReply: (commentId, body) => runtime.addCommentReply(commentId, body),
+    getCommentThreadForChange: (changeId) =>
+      clonePublicValue(runtime.getCommentThreadForChange(changeId)),
+    ensureCommentThreadForChange: (changeId) =>
+      runtime.ensureCommentThreadForChange(changeId),
+    addReplyToChange: (changeId, body) => runtime.addReplyToChange(changeId, body),
     editCommentBody: (commentId, body) => runtime.editCommentBody(commentId, body),
     deleteComment: (commentId) => {
       applyRuntimeDeleteComment(runtime, commentId);
@@ -1041,7 +1062,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     } = props;
 
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
-    const [showTrackedChanges, setShowTrackedChanges] = useState(false);
+    const [localMarkupDisplay, setLocalMarkupDisplay] =
+      useState<WorkflowMarkupMode | null>(() => suggestionsEnabled ? "all" : null);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
     const [suppressedSuggestionRevisionId, setSuppressedSuggestionRevisionId] = useState<string | null>(null);
     const [selectionToolbarAnchor, setSelectionToolbarAnchor] = useState<SelectionToolbarAnchor | null>(null);
@@ -1343,7 +1365,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       loadingViewState,
     );
     const isPageWorkspace = viewState.workspaceMode === "page";
-    const liveMarkupDisplay = __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const liveMarkupDisplay = localMarkupDisplay ??
+      __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const trackedChangesAuthoringEnabled = viewState.documentMode === "suggesting";
+    const showTrackedChanges = toWorkflowMarkupMode(liveMarkupDisplay) !== "clean";
     const documentNavigation = useRuntimeValue(
       runtime
         ? {
@@ -1483,9 +1508,27 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       activeRuntime.setViewMode(effectiveViewMode);
     }, [activeRuntime, effectiveViewMode]);
 
+    const setReviewMarkupMode = useCallback((mode: MarkupDisplay) => {
+      const workflowMode = toWorkflowMarkupMode(mode);
+      setLocalMarkupDisplay(workflowMode);
+      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+    }, [api]);
+
+    const setTrackedChangesAuthoring = useCallback((enabled: boolean) => {
+      api.runtime.document.setMode(enabled ? "suggesting" : "editing");
+      if (enabled) {
+        setLocalMarkupDisplay("all");
+        api.ui?.viewport.setLocalMarkupMode("all");
+      }
+    }, [api]);
+
     useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
+      if (suggestionsEnabled) {
+        setTrackedChangesAuthoring(true);
+        return;
+      }
+      api.runtime.document.setMode("editing");
+    }, [api, setTrackedChangesAuthoring, suggestionsEnabled]);
 
     // design-close-chrome Phase 2 — density contract (designsystem §4.2).
     // When the `density` prop is supplied, drive the root `data-density`
@@ -1645,6 +1688,12 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         reopenComment: (commentId) => activeRuntime.reopenComment(commentId),
         addCommentReply: (commentId, body) =>
           activeRuntime.addCommentReply(commentId, body, currentUser.userId),
+        getCommentThreadForChange: (changeId) =>
+          clonePublicValue(activeRuntime.getCommentThreadForChange(changeId)),
+        ensureCommentThreadForChange: (changeId) =>
+          activeRuntime.ensureCommentThreadForChange(changeId, currentUser.userId),
+        addReplyToChange: (changeId, body) =>
+          activeRuntime.addReplyToChange(changeId, body, currentUser.userId),
         editCommentBody: (commentId, body) =>
           activeRuntime.editCommentBody(commentId, body),
         deleteComment: (commentId) => {
@@ -2417,13 +2466,15 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
     function addReviewComment(): string | null {
       try {
+        const currentSnapshot = activeRuntime.getRenderSnapshot();
         const { commentId } = activeRuntime.addComment({
-          anchor: resolveCommentCommandAnchor(snapshot),
+          anchor: resolveCommentCommandAnchor(currentSnapshot),
           body: "",
           authorId: currentUser.userId,
           snapToSafeBoundary: true,
         });
         activeRuntime.openComment(commentId);
+        setActiveReviewQueueItemId(`comment:${commentId}`);
         setActiveRailTab("comments");
         return commentId;
       } catch {
@@ -2740,7 +2791,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     const addSelectionToolbarComment = useCallback(() => {
-      const commentId = addReviewComment();
+      let commentId: string | null = null;
+      if (activeSelectionTool?.kind === "suggestion-review") {
+        const primaryChangeId = activeSelectionTool.changeIds[0];
+        const linkedThread = primaryChangeId
+          ? activeRuntime.ensureCommentThreadForChange(primaryChangeId, currentUser.userId)
+          : null;
+        commentId = linkedThread?.commentId ?? null;
+        if (commentId) {
+          activeRuntime.openComment(commentId);
+          setActiveRailTab("comments");
+        }
+      } else {
+        commentId = addReviewComment();
+      }
       if (!commentId) {
         return;
       }
@@ -2748,7 +2812,51 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       queueMicrotask(() => {
         focusDocumentSurface();
       });
-    }, [dismissSelectionToolbar, focusDocumentSurface]);
+    }, [
+      activeRuntime,
+      activeSelectionTool,
+      addReviewComment,
+      currentUser.userId,
+      dismissSelectionToolbar,
+      focusDocumentSurface,
+    ]);
+
+    const acceptActiveSuggestion = useCallback(() => {
+      if (activeSelectionTool?.kind !== "suggestion-review") {
+        return;
+      }
+      for (const changeId of activeSelectionTool.changeIds) {
+        activeRuntime.acceptChange(changeId);
+      }
+      dismissSelectionToolbar("chrome-action");
+    }, [activeRuntime, activeSelectionTool, dismissSelectionToolbar]);
+
+    const rejectActiveSuggestion = useCallback(() => {
+      if (activeSelectionTool?.kind !== "suggestion-review") {
+        return;
+      }
+      for (const changeId of activeSelectionTool.changeIds) {
+        activeRuntime.rejectChange(changeId);
+      }
+      dismissSelectionToolbar("chrome-action");
+    }, [activeRuntime, activeSelectionTool, dismissSelectionToolbar]);
+
+    const editActiveSuggestion = useCallback(() => {
+      if (activeSelectionTool?.kind !== "suggestion-review") {
+        return;
+      }
+      setSuppressedSuggestionRevisionId(activeSelectionTool.suggestionId);
+      const activeSuggestion = suggestionsSnapshot.suggestions.find(
+        (suggestion) => suggestion.suggestionId === activeSelectionTool.suggestionId,
+      );
+      if (activeSuggestion) {
+        applyRuntimeSelection(
+          activeRuntime,
+          createSelectionFromAnchor(activeSuggestion.anchor, activeSuggestion.storyTarget),
+        );
+      }
+      setSelectionToolbarFocusWithin(true);
+    }, [activeRuntime, activeSelectionTool, suggestionsSnapshot.suggestions]);
 
     const handleSelectionToolbarAnchorChange = useCallback(
       (nextAnchor: SelectionToolbarAnchor | null) => {
@@ -3140,6 +3248,19 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         focusAnchor(revision.anchor, revision.storyTarget);
         setActiveRailTab("changes");
       },
+      onReplyToRevision: (revision: typeof snapshot.trackedChanges.revisions[number]) => {
+        const linkedThread = activeRuntime.ensureCommentThreadForChange(
+          revision.revisionId,
+          currentUser.userId,
+        );
+        if (!linkedThread?.commentId) {
+          return;
+        }
+        setActiveRevisionId(revision.revisionId);
+        focusAnchor(revision.anchor, revision.storyTarget);
+        activeRuntime.openComment(linkedThread.commentId);
+        setActiveRailTab("comments");
+      },
       onAcceptRevision: (revisionId: string) => {
         activeRuntime.acceptChange(revisionId);
         setActiveRailTab("changes");
@@ -3166,7 +3287,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onWorkspaceModeChange: (mode) => activeRuntime.setWorkspaceMode(mode),
       onZoomChange: (level) => activeRuntime.setZoom(level),
       onActiveRailTabChange: setActiveRailTab,
-      onShowTrackedChangesChange: setShowTrackedChanges,
+      onShowTrackedChangesChange: setTrackedChangesAuthoring,
+      onReviewMarkupModeChange: setReviewMarkupMode,
+      onChromePinChange: (surface, pin) => activeRuntime.setChromePin(surface, pin),
       onToggleBold: () =>
         applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "bold" }),
       onToggleItalic: () =>
@@ -3263,10 +3386,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       // with a mount-time `console.warn`; hosts that still pass them can
       // migrate to `onOpenStory` at their leisure.
       onOpenHeaderStoryForPage: (pageIndex: number) =>
-        openStoryForPage(activeRuntime, pageIndex, "header"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "header")
+          : undefined,
       onOpenFooterStoryForPage: (pageIndex: number) =>
-        openStoryForPage(activeRuntime, pageIndex, "footer"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "footer")
+          : undefined,
       onOpenStory: (target) => {
+        if (
+          !isPageWorkspace &&
+          (target.kind === "header" || target.kind === "footer")
+        ) {
+          return;
+        }
         activeRuntime.openStory(target);
       },
       onDeleteSectionBreak: (sectionIndex) =>
@@ -3369,6 +3502,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onInsertPageBreak: commands.onInsertPageBreak,
         onInsertSectionBreak: (type) => commands.onInsertSectionBreak?.(type),
         onInsertTable: commands.onInsertTable,
+        onInsertImage: commands.onInsertImage
+          ? () => requestImageInsertFromPicker(commands.onInsertImage)
+          : undefined,
         onAddComment: commands.onAddComment,
         onFindRequested: onFindRequested
           ? () => onFindRequested({ selectionText: "", selectionRange: snapshot.selection })
@@ -3512,6 +3648,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         activeRailTab={activeRailTab}
         activeCommentId={snapshot.comments.activeCommentId}
         activeRevisionId={activeRevisionId}
+        trackedChangesAuthoringEnabled={trackedChangesAuthoringEnabled}
         showTrackedChanges={showTrackedChanges}
         workflowScopeSnapshot={workflowScopeSnapshot}
         layoutFacet={activeRuntime.layout}
@@ -3546,35 +3683,13 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onAddCommentFromSelection={addSelectionToolbarComment}
         onAddCommentFromSuggestion={addSelectionToolbarComment}
         onAcceptSuggestion={activeSelectionTool?.kind === "suggestion-review"
-          ? () => {
-              for (const changeId of activeSelectionTool.changeIds) {
-                activeRuntime.acceptChange(changeId);
-              }
-              dismissSelectionToolbar("chrome-action");
-            }
+          ? acceptActiveSuggestion
           : undefined}
         onRejectSuggestion={activeSelectionTool?.kind === "suggestion-review"
-          ? () => {
-              for (const changeId of activeSelectionTool.changeIds) {
-                activeRuntime.rejectChange(changeId);
-              }
-              dismissSelectionToolbar("chrome-action");
-            }
+          ? rejectActiveSuggestion
           : undefined}
         onEditSuggestion={activeSelectionTool?.kind === "suggestion-review"
-          ? () => {
-              setSuppressedSuggestionRevisionId(activeSelectionTool.suggestionId);
-              const activeSuggestion = suggestionsSnapshot.suggestions.find(
-                (suggestion) => suggestion.suggestionId === activeSelectionTool.suggestionId,
-              );
-              if (activeSuggestion) {
-                applyRuntimeSelection(
-                  activeRuntime,
-                  createSelectionFromAnchor(activeSuggestion.anchor, activeSuggestion.storyTarget),
-                );
-              }
-              setSelectionToolbarFocusWithin(true);
-            }
+          ? editActiveSuggestion
           : undefined}
         onDismissSelectionToolbar={() => dismissSelectionToolbar("chrome-action")}
         onSelectionToolbarFocusCapture={handleSelectionToolbarFocusCapture}
@@ -4216,6 +4331,42 @@ function resolveCommentCommandAnchor(
     : selection.activeRange;
 }
 
+function requestImageInsertFromPicker(
+  onInsertImage: ((options: InsertImageOptions) => void) | undefined,
+): void {
+  const document = globalThis.document;
+  if (!onInsertImage || typeof document?.createElement !== "function" || !document.body) {
+    return;
+  }
+
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/png,image/jpeg,image/gif";
+  input.style.position = "fixed";
+  input.style.left = "-9999px";
+  input.style.top = "-9999px";
+  input.addEventListener("change", () => {
+    const file = input.files?.[0];
+    if (!file) {
+      input.remove();
+      return;
+    }
+    void file.arrayBuffer()
+      .then((buffer) => {
+        onInsertImage({
+          data: new Uint8Array(buffer),
+          mimeType: file.type || "image/png",
+          altText: file.name,
+        });
+      })
+      .finally(() => {
+        input.remove();
+      });
+  }, { once: true });
+  document.body.appendChild(input);
+  input.click();
+}
+
 function resolveCollapsedCommentRange(
   surface: RuntimeRenderSnapshot["surface"],
   selection: RuntimeRenderSnapshot["selection"],
@@ -4740,6 +4891,12 @@ function buildSuggestionCardModel(args: {
     canReject: canReviewSuggestion && capabilities.canRejectChange && focusedSuggestion.canReject,
     canEditSuggestion: canReviewSuggestion && focusedSuggestion.editable,
     canAddComment,
+    ...(focusedSuggestion.commentThreadIds
+      ? { commentThreadIds: focusedSuggestion.commentThreadIds }
+      : {}),
+    ...(focusedSuggestion.replyCount !== undefined
+      ? { replyCount: focusedSuggestion.replyCount }
+      : {}),
     ...(disabledReason ? { disabledReason } : {}),
   };
 }

package/src/ui/editor-command-bag.ts

@@ -1,6 +1,7 @@
 import { useMemo, useRef } from "react";
 
 import type {
+  ChromePinSurface,
   CommentSidebarThreadSnapshot,
   EditorStoryTarget,
   FormattingAlignment,
@@ -9,11 +10,13 @@ import type {
   SectionBreakType,
   SectionLayoutPatch,
   SectionPageNumberingPatch,
+  PinState,
   TrackedChangeEntrySnapshot,
   ZoomLevel,
   WorkspaceMode,
 } from "../api/public-types.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
+import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
 
 type CommandHandler = (...args: any[]) => unknown;
 
@@ -22,6 +25,8 @@ export interface EditorCommandBag {
   onZoomChange?(level: ZoomLevel): void;
   onActiveRailTabChange(value: ReviewRailTab): void;
   onShowTrackedChangesChange(show: boolean): void;
+  onReviewMarkupModeChange?(mode: MarkupDisplay): void;
+  onChromePinChange?(surface: ChromePinSurface, pin: PinState | null): void;
   onUndo(): void;
   onRedo(): void;
   onSetParagraphStyle?(styleId: string): void;
@@ -83,6 +88,7 @@ export interface EditorCommandBag {
   onAddReply?(commentId: string, body: string): void;
   onEditBody?(commentId: string, body: string): void;
   onOpenRevision(revision: TrackedChangeEntrySnapshot): void;
+  onReplyToRevision?(revision: TrackedChangeEntrySnapshot): void;
   onAcceptRevision(revisionId: string): void;
   onRejectRevision(revisionId: string): void;
   onAcceptAllChanges(): void;
@@ -102,7 +108,7 @@ export interface EditorCommandBag {
   /** Open the footer story for a specific page (double-click on its band). */
   onOpenFooterStoryForPage?(pageIndex: number): void;
   /**
-   * P8.11 — per-page header/footer band click handler.  Receives the
+   * P8.11 — per-page header/footer band double-click handler. Receives the
    * exact `EditorStoryTarget` the band represents; the command bag wires
    * this to `runtime.openStory(target)`.
    */

package/src/ui/editor-shell-view.tsx

@@ -55,6 +55,7 @@ export interface EditorShellViewProps {
   activeRailTab: ReviewRailTab;
   activeCommentId?: string;
   activeRevisionId?: string;
+  trackedChangesAuthoringEnabled?: boolean;
   showTrackedChanges: boolean;
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   /**

package/src/ui/headless/revision-decoration-model.ts

@@ -225,6 +225,19 @@ export function buildClassFromRevisionDisplay(
     parts.push("text-secondary");
   }
 
+  // Formatting/property-change revisions carry their semantics through
+  // `kind` even when markup posture has no underline/strike flag. Give
+  // mounted suggestion authoring a visible, non-destructive cue instead
+  // of silently relying on the sidebar/card path.
+  if (
+    parts.length === 0 &&
+    (display.kind === "formatting" || display.kind === "property-change")
+  ) {
+    parts.push(
+      "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2",
+    );
+  }
+
   // Surface the author palette color as a CSS variable the renderer
   // can pick up via `var(--wre-revision-author)`. Consumer stylesheet
   // composes this into ring/underline color when the palette slot is

package/src/ui/headless/selection-tool-types.ts

@@ -81,6 +81,8 @@ export interface SuggestionReviewSelectionToolModel extends BaseSelectionToolMod
   canReject: boolean;
   canEditSuggestion: boolean;
   canAddComment: boolean;
+  commentThreadIds?: string[];
+  replyCount?: number;
 }
 
 export type StructureContextKind = "table" | "image" | "object" | "list";

package/src/ui-tailwind/chrome/editor-action-registry.ts

@@ -3,16 +3,17 @@
  * contextual actions exist, keyed by `TargetKind`.
  *
  * Consumed by three access routes so DESIGN-EDITOR.md §6.4 holds by
- * construction ("right-click cannot be richer than the floating surface;
- * cannot duplicate command trees"):
+ * construction for general editor actions:
  *
  *   1. Right-click context menu (via `build-context-menu-entries.ts`)
  *   2. Inline "More…" affordance on reduced floating toolbars (Phase D)
  *   3. Command palette groups (Phase C.δ)
  *
- * All three routes produce the same actions from this registry — they
- * cannot diverge.  This is the load-bearing decision that makes the
- * floating-menu demotion legal.
+ * All three routes produce the same general actions from this registry.
+ * Suggestion-specific review actions are intentionally absent for now:
+ * they require an exact revision/suggestion id payload, so they live on
+ * the floating suggestion card and Changes rail until the context-menu
+ * target resolver can supply that payload.
  *
  * Perf discipline: pure data + pure filter helpers.  No DOM reads, no
  * runtime calls, no observers.  Actions are dispatched through host-
@@ -106,10 +107,6 @@ export interface EditorActionHostCallbacks {
   readonly onPrintRequested?: () => void;
   readonly onGoToRequested?: () => void;
 
-  // Tracked-change operations (suggestion target)
-  readonly onAcceptSuggestion?: () => void;
-  readonly onRejectSuggestion?: () => void;
-
   // Comment operations (comment-anchor target)
   readonly onResolveComment?: () => void;
   readonly onReplyToComment?: () => void;
@@ -576,7 +573,7 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
   mkImportant({
     id: "insert-image",
     label: "Insert image…",
-    description: "Needs a host file picker before it can run.",
+    description: "Choose an image file and insert it at the caret.",
     group: "misc",
     targetKinds: [],
     callback: "onInsertImage",
@@ -636,22 +633,6 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     callback: "onPrintRequested",
   }),
 
-  // -------- Suggestion / tracked change --------
-  mk({
-    id: "accept-suggestion",
-    label: "Accept suggestion",
-    group: "suggestion",
-    targetKinds: ["suggestion"],
-    callback: "onAcceptSuggestion",
-  }),
-  mk({
-    id: "reject-suggestion",
-    label: "Reject suggestion",
-    group: "suggestion",
-    targetKinds: ["suggestion"],
-    callback: "onRejectSuggestion",
-  }),
-
   // -------- Comment --------
   mk({
     id: "resolve-comment",

package/src/ui-tailwind/chrome/tw-detach-handle.tsx

@@ -43,6 +43,10 @@ export function TwDetachHandle(props: TwDetachHandleProps): React.JSX.Element {
   const { surface, pin, onChange, label } = props;
   const isDetached = pin?.detached ?? false;
   const offset = pin?.offset ?? { x: 0, y: 0 };
+  const dragHandleTestId =
+    surface === "selectionTier" ? "selection-tool-drag-handle" : `${surface}-detach-drag-handle`;
+  const toggleTestId =
+    surface === "selectionTier" ? "selection-tool-attach-toggle" : `${surface}-detach-toggle`;
   const dragState = useRef<
     | {
         startX: number;
@@ -117,7 +121,7 @@ export function TwDetachHandle(props: TwDetachHandleProps): React.JSX.Element {
       <button
         type="button"
         aria-label={isDetached ? "Drag floating menu" : "Drag to float menu"}
-        data-testid={`${surface}-detach-drag-handle`}
+        data-testid={dragHandleTestId}
         className="inline-flex h-6 items-center justify-center rounded-md border border-transparent px-1.5 text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
         onMouseDown={beginDrag}
       >
@@ -133,7 +137,7 @@ export function TwDetachHandle(props: TwDetachHandleProps): React.JSX.Element {
         type="button"
         aria-label={isDetached ? "Dock menu" : "Float menu"}
         aria-pressed={isDetached}
-        data-testid={`${surface}-detach-toggle`}
+        data-testid={toggleTestId}
         className="inline-flex h-6 items-center rounded-md border border-border/60 px-2 text-[10px] font-medium text-secondary transition-colors hover:bg-surface hover:text-primary"
         onMouseDown={preserveEditorSelectionMouseDown}
         onClick={toggle}

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -32,9 +32,12 @@ const focusRingClass =
 export function TwSuggestionCard(props: TwSuggestionCardProps) {
   const contextLabel = summarizeSuggestionContext(props.model);
   const commentDisabled = !props.model.canAddComment;
+  const replyCount = props.model.replyCount ?? 0;
   const tooltipLabel = commentDisabled
     ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
-    : "Comment on suggestion";
+    : props.model.commentThreadIds?.length
+      ? "Reply to tracked change"
+      : "Start tracked-change discussion";
 
   return (
     <div
@@ -87,14 +90,15 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
           <Tooltip.Trigger asChild>
             <button
               type="button"
-              aria-label="Comment on suggestion"
+              aria-label="Reply to tracked change"
+              data-testid="suggestion-card-reply"
               disabled={commentDisabled}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onAddComment}
               className={`inline-flex h-7 items-center gap-1 rounded-md border border-[var(--color-border-default)] px-2 text-[11px] font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
             >
               <MessageSquare className="h-3 w-3" />
-              Comment
+              Reply{replyCount > 0 ? ` ${replyCount}` : ""}
             </button>
           </Tooltip.Trigger>
           <Tooltip.Portal>