@beyondwork/docx-react-component 1.0.85 → 1.0.86

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.85",
+  "version": "1.0.86",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/ui/WordReviewEditor.tsx

@@ -1062,7 +1062,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     } = props;
 
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
-    const [showTrackedChanges, setShowTrackedChanges] = useState(() => suggestionsEnabled);
     const [localMarkupDisplay, setLocalMarkupDisplay] =
       useState<WorkflowMarkupMode | null>(() => suggestionsEnabled ? "all" : null);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
@@ -1368,6 +1367,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     const isPageWorkspace = viewState.workspaceMode === "page";
     const liveMarkupDisplay = localMarkupDisplay ??
       __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const trackedChangesAuthoringEnabled = viewState.documentMode === "suggesting";
+    const showTrackedChanges = toWorkflowMarkupMode(liveMarkupDisplay) !== "clean";
     const documentNavigation = useRuntimeValue(
       runtime
         ? {
@@ -1510,16 +1511,15 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     const setReviewMarkupMode = useCallback((mode: MarkupDisplay) => {
       const workflowMode = toWorkflowMarkupMode(mode);
       setLocalMarkupDisplay(workflowMode);
-      setShowTrackedChanges(workflowMode !== "clean");
       api.ui?.viewport.setLocalMarkupMode(workflowMode);
     }, [api]);
 
     const setTrackedChangesAuthoring = useCallback((enabled: boolean) => {
-      const workflowMode: WorkflowMarkupMode = enabled ? "all" : "clean";
-      setShowTrackedChanges(enabled);
-      setLocalMarkupDisplay(workflowMode);
       api.runtime.document.setMode(enabled ? "suggesting" : "editing");
-      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+      if (enabled) {
+        setLocalMarkupDisplay("all");
+        api.ui?.viewport.setLocalMarkupMode("all");
+      }
     }, [api]);
 
     useEffect(() => {
@@ -1527,7 +1527,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         setTrackedChangesAuthoring(true);
         return;
       }
-      setShowTrackedChanges(false);
       api.runtime.document.setMode("editing");
     }, [api, setTrackedChangesAuthoring, suggestionsEnabled]);
 
@@ -2467,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 {
@@ -2814,11 +2815,49 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     }, [
       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) => {
         setSelectionToolbarAnchor((current) =>
@@ -3209,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");
@@ -3237,6 +3289,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onActiveRailTabChange: setActiveRailTab,
       onShowTrackedChangesChange: setTrackedChangesAuthoring,
       onReviewMarkupModeChange: setReviewMarkupMode,
+      onChromePinChange: (surface, pin) => activeRuntime.setChromePin(surface, pin),
       onToggleBold: () =>
         applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "bold" }),
       onToggleItalic: () =>
@@ -3449,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 })
@@ -3592,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}
@@ -3626,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}
@@ -4296,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"],

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

@@ -1,6 +1,7 @@
 import { useMemo, useRef } from "react";
 
 import type {
+  ChromePinSurface,
   CommentSidebarThreadSnapshot,
   EditorStoryTarget,
   FormattingAlignment,
@@ -9,6 +10,7 @@ import type {
   SectionBreakType,
   SectionLayoutPatch,
   SectionPageNumberingPatch,
+  PinState,
   TrackedChangeEntrySnapshot,
   ZoomLevel,
   WorkspaceMode,
@@ -24,6 +26,7 @@ export interface EditorCommandBag {
   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;
@@ -85,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;

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-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/review/tw-comment-sidebar.tsx

@@ -153,6 +153,7 @@ function CommentThreadCard(props: {
   }, [presentation]);
   const leadEntry = thread.entries[0];
   const isDraftThread = thread.status === "open" && thread.entryCount === 1 && isEmptyCommentBody(leadEntry?.body);
+  const isLinkedRevisionThread = thread.linkedRevisionId != null;
   const isOwnComment = props.currentUserId != null && leadEntry?.authorId === props.currentUserId;
   const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
   const hasNoBody = isEmptyCommentBody(leadEntry?.body);
@@ -205,6 +206,7 @@ function CommentThreadCard(props: {
             {formatCommentDate(thread.createdAt)}
           </span>
           <span className="flex-1" />
+          {isLinkedRevisionThread ? <StatusBadge label="tracked change" tone="revision" /> : null}
           {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
           {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
         </div>
@@ -222,7 +224,9 @@ function CommentThreadCard(props: {
             body={leadEntry?.body ?? ""}
             autoFocus={isActive && hasNoBody}
             onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
-            label={isDraftThread ? "New comment" : undefined}
+            label={isDraftThread
+              ? (isLinkedRevisionThread ? "Tracked change discussion" : "New comment")
+              : undefined}
           />
         ) : presentation ? (
           <CommentMarkdownRenderer
@@ -247,7 +251,7 @@ function CommentThreadCard(props: {
               props.onOpenComment?.(thread);
             }}
           >
-            New comment
+            {isLinkedRevisionThread ? "Tracked change discussion" : "New comment"}
           </p>
         ) : null}
 
@@ -494,11 +498,12 @@ function formatCommentDate(raw: string): string {
   }
 }
 
-function StatusBadge(props: { label: string; tone: "resolved" | "detached" | "draft" }) {
+function StatusBadge(props: { label: string; tone: "resolved" | "detached" | "draft" | "revision" }) {
   const styles: Record<string, string> = {
     resolved: "text-insert bg-insert-soft",
     detached: "text-comment bg-warning-soft",
     draft: "text-secondary bg-subtle",
+    revision: "text-accent bg-accent-soft",
   };
   return (
     <span

package/src/ui-tailwind/review/tw-review-rail.tsx

@@ -111,6 +111,7 @@ export interface TwReviewRailProps {
   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;
@@ -285,6 +286,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
                 markupDisplay={props.markupDisplay}
                 activeRevisionId={props.activeRevisionId}
                 onOpenRevision={props.onOpenRevision}
+                onReplyToRevision={props.onReplyToRevision}
                 onAcceptRevision={props.onAcceptRevision}
                 onRejectRevision={props.onRejectRevision}
                 onAcceptAllChanges={props.onAcceptAllChanges}

package/src/ui-tailwind/review/tw-revision-sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Check, X } from "lucide-react";
+import { Check, MessageSquare, X } from "lucide-react";
 
 import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
 import { selectVisibleRevisions } from "../../ui/shared/revision-filters";
@@ -10,6 +10,7 @@ export interface TwRevisionSidebarProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onReplyToRevision?: (revision: TrackedChangeEntrySnapshot) => void;
   onAcceptRevision?: (revisionId: string) => void;
   onRejectRevision?: (revisionId: string) => void;
   onAcceptAllChanges?: () => void;
@@ -120,46 +121,61 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
               const isActive = activeRevisionId === rev.revisionId;
 
               return (
-                <button
+                <div
                   key={rev.revisionId}
-                  type="button"
-                  className={`w-full text-left flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
-                  onClick={() => props.onOpenRevision?.(rev)}
+                  className={`w-full text-left flex rounded-md bg-surface/90 transition-colors ring-1 ring-border ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
                 >
                   <div className={`w-0.5 shrink-0 rounded-l-md ${
                     rev.kind === "insertion" ? "bg-insert"
                     : rev.kind === "deletion" ? "bg-danger"
                     : "bg-tertiary"
                   }`} />
-                  <div className="p-2 flex-1 min-w-0">
-                    <div className="mb-0.5 flex items-start justify-between gap-2">
-                      <span className="text-[11px] font-medium text-primary">{rev.anchorLabel}</span>
-                      <RevisionBadge status={rev.status} actionability={rev.actionability} />
-                    </div>
-                    <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
-                    {rev.excerpt ? (
-                      <p className={`text-[11px] ${
-                        rev.kind === "insertion" ? "text-insert"
-                        : rev.kind === "deletion" ? "text-danger line-through"
-                        : "text-secondary"
-                      }`}>
-                        {rev.excerpt}
-                      </p>
-                    ) : (
-                      <p className="text-[11px] text-secondary">{rev.label}</p>
-                    )}
-                    {rev.detail ? (
-                      <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
-                    ) : null}
-                    <div className="mt-2 flex gap-1.5">
+                  <div className="flex-1 min-w-0">
+                    <button
+                      type="button"
+                      className={`w-full p-2 text-left ${focusRingClass}`}
+                      onClick={() => props.onOpenRevision?.(rev)}
+                    >
+                      <div className="mb-0.5 flex items-start justify-between gap-2">
+                        <span className="text-[11px] font-medium text-primary">{rev.anchorLabel}</span>
+                        <RevisionBadge status={rev.status} actionability={rev.actionability} />
+                      </div>
+                      <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
+                      {rev.excerpt ? (
+                        <p className={`text-[11px] ${
+                          rev.kind === "insertion" ? "text-insert"
+                          : rev.kind === "deletion" ? "text-danger line-through"
+                          : "text-secondary"
+                        }`}>
+                          {rev.excerpt}
+                        </p>
+                      ) : (
+                        <p className="text-[11px] text-secondary">{rev.label}</p>
+                      )}
+                      {rev.detail ? (
+                        <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
+                      ) : null}
+                    </button>
+                    <div className="flex flex-wrap gap-1.5 px-2 pb-2">
+                      {props.onReplyToRevision ? (
+                        <button
+                          type="button"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-secondary hover:bg-canvas transition-colors"
+                          onClick={() => props.onReplyToRevision?.(rev)}
+                        >
+                          <MessageSquare className="h-3 w-3" />
+                          {rev.replyCount && rev.replyCount > 0
+                            ? `Reply ${rev.replyCount}`
+                            : "Reply"}
+                        </button>
+                      ) : null}
                       {rev.actionability === "actionable" ? (
                         <>
                           <button
                             type="button"
                             disabled={!rev.canAccept || rev.status === "accepted"}
                             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                            onClick={() => {
                               props.onAcceptRevision?.(rev.revisionId);
                             }}
                           >
@@ -169,8 +185,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                             type="button"
                             disabled={!rev.canReject || rev.status === "rejected"}
                             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-danger-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                            onClick={() => {
                               props.onRejectRevision?.(rev.revisionId);
                             }}
                           >
@@ -182,7 +197,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       )}
                     </div>
                   </div>
-                </button>
+                </div>
               );
             })}
           </div>

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -36,6 +36,24 @@ const POSTURE_META: Record<
   "blocked-import": { chip: "BLOCKED REGION", kind: "danger" },
 };
 
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+type ScopeFilterKey = "edit" | "suggest" | "comment" | "view" | "candidate" | "blocked";
+
+const SCOPE_FILTERS: ReadonlyArray<{
+  key: ScopeFilterKey;
+  label: string;
+  postures: readonly ScopeRailPosture[];
+}> = [
+  { key: "edit", label: "Edit", postures: ["edit"] },
+  { key: "suggest", label: "Suggest", postures: ["suggest"] },
+  { key: "comment", label: "Comment", postures: ["comment"] },
+  { key: "view", label: "Review", postures: ["view"] },
+  { key: "candidate", label: "Scheduled", postures: ["candidate"] },
+  { key: "blocked", label: "Blocked", postures: ["preserve-only", "blocked-import"] },
+];
+
 export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   segments,
   activeScopeId,
@@ -43,13 +61,38 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   onActiveScopeChange,
 }) => {
   // Dedupe by scopeId so a scope spanning multiple pages shows once.
-  const byScopeId = new Map<string, ScopeRailSegment>();
-  for (const segment of segments) {
-    if (!byScopeId.has(segment.scopeId)) {
-      byScopeId.set(segment.scopeId, segment);
+  const uniqueSegments = React.useMemo(() => {
+    const byScopeId = new Map<string, ScopeRailSegment>();
+    for (const segment of segments) {
+      if (!byScopeId.has(segment.scopeId)) {
+        byScopeId.set(segment.scopeId, segment);
+      }
     }
-  }
-  const uniqueSegments = Array.from(byScopeId.values());
+    return Array.from(byScopeId.values()).sort(compareWorkflowSegments(activeScopeId ?? null));
+  }, [activeScopeId, segments]);
+  const [query, setQuery] = React.useState("");
+  const [enabledFilters, setEnabledFilters] = React.useState<ReadonlySet<ScopeFilterKey>>(
+    () => new Set(SCOPE_FILTERS.map((filter) => filter.key)),
+  );
+  const availableFilters = React.useMemo(() => {
+    const presentPostures = new Set(uniqueSegments.map((segment) => segment.posture));
+    return SCOPE_FILTERS.filter((filter) =>
+      filter.postures.some((posture) => presentPostures.has(posture)),
+    );
+  }, [uniqueSegments]);
+  const visibleSegments = React.useMemo(() => {
+    const normalizedQuery = normalizeScopeQuery(query);
+    return uniqueSegments.filter((segment) => {
+      const filterKey = filterKeyForPosture(segment.posture);
+      if (!enabledFilters.has(filterKey)) {
+        return false;
+      }
+      if (!normalizedQuery) {
+        return true;
+      }
+      return scopeSearchText(segment).includes(normalizedQuery);
+    });
+  }, [enabledFilters, query, uniqueSegments]);
 
   if (uniqueSegments.length === 0) {
     return (
@@ -73,9 +116,79 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
         <div className="text-[10px] font-semibold uppercase tracking-[0.14em] text-accent">
           Document Intelligence
         </div>
-        <div className="text-[15px] font-semibold text-primary">Workflow Scopes</div>
+        <div className="flex items-baseline justify-between gap-3">
+          <div className="text-[15px] font-semibold text-primary">Workflow Scopes</div>
+          <div
+            className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary"
+            data-testid="workflow-scope-count"
+          >
+            {visibleSegments.length}/{uniqueSegments.length} shown
+          </div>
+        </div>
       </div>
-      {uniqueSegments.map((segment) => {
+
+      <div
+        className="wre-workflow-tab-controls rounded-lg border border-border bg-surface/55 p-2"
+        data-testid="workflow-scope-controls"
+      >
+        <input
+          aria-label="Search workflow scopes"
+          className={`h-8 w-full rounded-md border border-border bg-canvas px-2 text-[12px] text-primary placeholder:text-tertiary ${focusRingClass}`}
+          placeholder="Search scope, page, section..."
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+        />
+        {availableFilters.length > 1 ? (
+          <div
+            aria-label="Workflow scope layers"
+            className="mt-2 flex flex-wrap gap-1"
+            role="group"
+          >
+            {availableFilters.map((filter) => {
+              const isEnabled = enabledFilters.has(filter.key);
+              return (
+                <button
+                  key={filter.key}
+                  type="button"
+                  aria-pressed={isEnabled}
+                  className={[
+                    "rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.1em] transition-colors",
+                    isEnabled
+                      ? "border-accent/50 bg-accent/10 text-accent"
+                      : "border-border bg-canvas text-tertiary hover:text-secondary",
+                  ].join(" ")}
+                  data-testid={`workflow-scope-filter-${filter.key}`}
+                  onClick={() => {
+                    setEnabledFilters((current) => {
+                      const next = new Set(current);
+                      if (next.has(filter.key)) {
+                        next.delete(filter.key);
+                      } else {
+                        next.add(filter.key);
+                      }
+                      return next;
+                    });
+                  }}
+                >
+                  {filter.label}
+                </button>
+              );
+            })}
+          </div>
+        ) : null}
+      </div>
+
+      {visibleSegments.length === 0 ? (
+        <div
+          className="rounded-md border border-dashed border-border bg-canvas/50 p-3 text-[11px] text-tertiary"
+          data-testid="workflow-scope-filter-empty"
+        >
+          No workflow scopes match the current search or layer filters.
+        </div>
+      ) : null}
+
+      {visibleSegments.map((segment) => {
         const meta = POSTURE_META[segment.posture];
         const isActive = activeScopeId === segment.scopeId || segment.isActiveWorkItem;
         return (
@@ -115,4 +228,42 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   );
 };
 
+function compareWorkflowSegments(activeScopeId: string | null) {
+  return (left: ScopeRailSegment, right: ScopeRailSegment): number => {
+    const leftActive = left.scopeId === activeScopeId || left.isActiveWorkItem;
+    const rightActive = right.scopeId === activeScopeId || right.isActiveWorkItem;
+    if (leftActive !== rightActive) {
+      return leftActive ? -1 : 1;
+    }
+    if (left.pageIndex !== right.pageIndex) {
+      return left.pageIndex - right.pageIndex;
+    }
+    if (left.sectionIndex !== right.sectionIndex) {
+      return left.sectionIndex - right.sectionIndex;
+    }
+    return (left.label || left.scopeId).localeCompare(right.label || right.scopeId);
+  };
+}
+
+function filterKeyForPosture(posture: ScopeRailPosture): ScopeFilterKey {
+  if (posture === "preserve-only" || posture === "blocked-import") {
+    return "blocked";
+  }
+  return posture;
+}
+
+function normalizeScopeQuery(value: string): string {
+  return value.trim().toLocaleLowerCase();
+}
+
+function scopeSearchText(segment: ScopeRailSegment): string {
+  return normalizeScopeQuery([
+    segment.label,
+    segment.scopeId,
+    segment.posture,
+    `page ${segment.pageIndex + 1}`,
+    `section ${segment.sectionIndex + 1}`,
+  ].filter(Boolean).join(" "));
+}
+
 export default TwWorkflowTab;

package/src/ui-tailwind/review-workspace/types.ts

@@ -145,6 +145,9 @@ export interface TwReviewWorkspaceProps {
   activeRailTab: ReviewRailTab;
   activeCommentId?: string;
   activeRevisionId?: string;
+  /** Authoring mode toggle state: whether new edits are recorded as tracked changes. */
+  trackedChangesAuthoringEnabled?: boolean;
+  /** Visual markup state: whether tracked-change decorations are currently shown. */
   showTrackedChanges: boolean;
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   interactionGuardSnapshot?: InteractionGuardSnapshot;
@@ -286,6 +289,7 @@ export interface TwReviewWorkspaceProps {
   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;

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -25,8 +25,6 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleOff,
-  Eye,
-  EyeOff,
   FileDiff,
   Flag,
   Hand,
@@ -226,33 +224,33 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
           </Tooltip.Portal>
         </Tooltip.Root>
       );
-    case "tracked-changes-toggle":
+    case "tracked-changes-toggle": {
+      const trackChangesLabel = (props.showTrackedChanges ?? false)
+        ? "Stop tracking changes"
+        : "Start tracking changes";
       return (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Toggle.Root
               pressed={props.showTrackedChanges ?? false}
               onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
-              aria-label={(props.showTrackedChanges ?? false) ? "Turn off tracked changes" : "Turn on tracked changes"}
+              aria-label={trackChangesLabel}
               disabled={props.capabilities ? !props.capabilities.trackChangesSupported : false}
               onMouseDown={preserveEditorSelectionMouseDown}
               className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
               data-testid="role-tracked-changes-toggle"
             >
-              {(props.showTrackedChanges ?? false) ? (
-                <Eye className="h-3.5 w-3.5" />
-              ) : (
-                <EyeOff className="h-3.5 w-3.5" />
-              )}
+              <FileDiff className="h-3.5 w-3.5" />
             </Toggle.Root>
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
-              {(props.showTrackedChanges ?? false) ? "Turn off tracked changes" : "Turn on tracked changes"}
+              {trackChangesLabel}
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
       );
+    }
     case "review-sidebar-tracked-changes":
       return (
         <Tooltip.Root>

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -15,8 +15,7 @@ import {
   Bold,
   ChevronDown,
   Download,
-  Eye,
-  EyeOff,
+  FileDiff,
   FileText,
   Highlighter,
   ImagePlus,
@@ -89,7 +88,7 @@ export interface TwToolbarProps {
   formattingState?: FormattingStateSnapshot;
   activeListContext?: ActiveListContext | null;
   styleCatalog?: StyleCatalogSnapshot;
-  /** Display toggle for tracked change decorations (not a runtime mutation toggle). */
+  /** Authoring toggle for recording new edits as tracked changes. */
   showTrackedChanges: boolean;
   /** Active story target — shows a breadcrumb when editing a secondary story. */
   activeStory?: EditorStoryTarget;
@@ -378,7 +377,7 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Bold"
               shortcut="⌘B"
               active={props.formattingState?.bold ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleBold}
               onClick={props.onToggleBold}
             />
             <TwToolbarIconButton
@@ -386,7 +385,7 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Italic"
               shortcut="⌘I"
               active={props.formattingState?.italic ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleItalic}
               onClick={props.onToggleItalic}
             />
             <TwToolbarIconButton
@@ -394,12 +393,17 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Underline"
               shortcut="⌘U"
               active={props.formattingState?.underline ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleUnderline}
               onClick={props.onToggleUnderline}
             />
             {showAdvancedFormatting ? (
               <ToolbarFormattingOverflow
-                disabled={!canEdit}
+                disabled={
+                  !canEdit ||
+                  (!props.onToggleStrikethrough &&
+                    !props.onToggleSuperscript &&
+                    !props.onToggleSubscript)
+                }
                 formattingState={props.formattingState}
                 onToggleStrikethrough={props.onToggleStrikethrough}
                 onToggleSuperscript={props.onToggleSuperscript}
@@ -452,14 +456,14 @@ export function TwToolbar(props: TwToolbarProps) {
               icon={List}
               label="Bulleted list"
               active={Boolean(props.activeListContext && !props.activeListContext.isOrdered)}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleBulletedList}
               onClick={props.onToggleBulletedList}
             />
             <TwToolbarIconButton
               icon={Rows3}
               label="Numbered list"
               active={Boolean(props.activeListContext?.isOrdered)}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleNumberedList}
               onClick={props.onToggleNumberedList}
             />
           </>
@@ -469,13 +473,13 @@ export function TwToolbar(props: TwToolbarProps) {
             <TwToolbarIconButton
               icon={Outdent}
               label="Outdent"
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onOutdent}
               onClick={props.onOutdent}
             />
             <TwToolbarIconButton
               icon={Indent}
               label="Indent"
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onIndent}
               onClick={props.onIndent}
             />
           </>
@@ -669,12 +673,12 @@ export function TwToolbar(props: TwToolbarProps) {
                 <Toggle.Root
                   pressed={props.showTrackedChanges}
                   onPressedChange={props.onShowTrackedChangesChange}
-                  aria-label={props.showTrackedChanges ? "Turn off tracked changes" : "Turn on tracked changes"}
+                  aria-label={props.showTrackedChanges ? "Stop tracking changes" : "Start tracking changes"}
                   disabled={caps ? !caps.trackChangesSupported : false}
                   onMouseDown={preserveEditorSelectionMouseDown}
                   className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
                 >
-                  {props.showTrackedChanges ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+                  <FileDiff className="h-3.5 w-3.5" />
                 </Toggle.Root>
               </Tooltip.Trigger>
               <Tooltip.Portal>
@@ -682,7 +686,7 @@ export function TwToolbar(props: TwToolbarProps) {
                   className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
                   sideOffset={6}
                 >
-                  {props.showTrackedChanges ? "Turn off tracked changes" : "Turn on tracked changes"}
+                  {props.showTrackedChanges ? "Stop tracking changes" : "Start tracking changes"}
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>
@@ -1420,7 +1424,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.strikethrough ?? false}
               ariaLabel="Strikethrough"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleStrikethrough}
               icon={<Strikethrough className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleStrikethrough?.();
@@ -1430,7 +1434,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.superscript ?? false}
               ariaLabel="Superscript"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleSuperscript}
               icon={<Superscript className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleSuperscript?.();
@@ -1440,7 +1444,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.subscript ?? false}
               ariaLabel="Subscript"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleSubscript}
               icon={<Subscript className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleSubscript?.();

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -184,6 +184,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const caps = props.capabilities;
   const isPageWorkspace = props.workspaceMode === "page";
   const markupDisplay = props.markupDisplay;
+  const trackedChangesAuthoringEnabled =
+    props.trackedChangesAuthoringEnabled ?? props.showTrackedChanges;
   const [navOpen, setNavOpen] = useState(false);
   const handleOpenPageModeStory = useCallback(
     (target: EditorStoryTarget) => {
@@ -609,7 +611,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   toolbarInteractionPolicy?.canAddComment ??
                   (caps ? caps.canAddComment : false)
                 }
-                showTrackedChanges={props.showTrackedChanges}
+                showTrackedChanges={trackedChangesAuthoringEnabled}
                 capabilities={caps}
                 onAddComment={
                   props.onAddComment
@@ -744,7 +746,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               formattingState={props.formattingState}
               activeListContext={props.activeListContext}
               styleCatalog={props.styleCatalog}
-              showTrackedChanges={props.showTrackedChanges}
+              showTrackedChanges={trackedChangesAuthoringEnabled}
               showSidebarToggle={responsiveChrome.showSidebarToggle}
               isSidebarOpen={reviewRailOpen}
               onUndo={runWithSelectionToolbarDismiss(props.onUndo)}
@@ -1243,6 +1245,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               onAddReply: props.onAddReply,
               onEditBody: props.onEditBody,
               onOpenRevision: props.onOpenRevision,
+              onReplyToRevision: props.onReplyToRevision,
               onAcceptRevision: props.onAcceptRevision,
               onRejectRevision: props.onRejectRevision,
               onAcceptAllChanges: props.onAcceptAllChanges,
@@ -1251,6 +1254,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               // Layer-06 workflow facet. Layout facet no longer exposes
               // `getAllScopeRailSegments` (methods removed in v40 / Slice 4C).
               scopeRailSegments: props.workflowFacet?.getAllRailSegments() ?? [],
+              activeScopeId,
+              onOpenScope: (segment) => {
+                handleScopeStripeClick({ scopeId: segment.scopeId });
+              },
               workflowTab: props.reviewRailWorkflowTab,
               workflowCount: props.reviewRailWorkflowCount,
               workflowScopesTitle: props.reviewRailWorkflowScopesTitle,