@beyondwork/docx-react-component 1.0.85 → 1.0.87

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

@@ -1,15 +1,17 @@
 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";
 import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import { getAuthorColor } from "../../ui/headless/revision-decoration-model";
 
 export interface TwRevisionSidebarProps {
   trackedChanges: TrackedChangesSnapshot;
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onReplyToRevision?: (revision: TrackedChangeEntrySnapshot) => void;
   onAcceptRevision?: (revisionId: string) => void;
   onRejectRevision?: (revisionId: string) => void;
   onAcceptAllChanges?: () => void;
@@ -36,6 +38,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
 
   const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
   const [authorFilter, setAuthorFilter] = React.useState<string | null>(null);
+  const activeCardRef = React.useRef<HTMLDivElement | null>(null);
 
   // Derive distinct authors from all visible revisions
   const authors = React.useMemo(() => {
@@ -78,6 +81,11 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
     }
   }, [filteredRevisions, typeFilter, authorFilter, props.onRejectAllChanges, props.onRejectRevision]);
 
+  React.useEffect(() => {
+    if (!activeRevisionId) return;
+    activeCardRef.current?.scrollIntoView({ block: "nearest" });
+  }, [activeRevisionId, filteredRevisions]);
+
   return (
     <div className="flex flex-col outline-none">
       {/* Stats header */}
@@ -118,48 +126,85 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
           <div className="space-y-2">
             {filteredRevisions.map((rev) => {
               const isActive = activeRevisionId === rev.revisionId;
+              const authorColor = getAuthorColor(rev.authorId);
 
               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)}
+                  ref={(node) => {
+                    if (isActive) {
+                      activeCardRef.current = node;
+                    }
+                  }}
+                  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 shadow-[var(--shadow-soft)]" : "hover:bg-surface"}`}
+                  style={
+                    authorColor && isActive
+                      ? { boxShadow: `0 0 0 1px ${authorColor}, var(--shadow-soft)` }
+                      : undefined
+                  }
                 >
                   <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}
+                  }`} style={authorColor ? { backgroundColor: authorColor } : undefined} />
+                  <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 flex items-center gap-1.5 text-[10px] text-tertiary">
+                        {authorColor ? (
+                          <span
+                            aria-hidden="true"
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: authorColor }}
+                          />
+                        ) : null}
+                        <span className="truncate">{rev.authorId}</span>
+                        <span aria-hidden="true">·</span>
+                        <span>{rev.createdAt}</span>
                       </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">
+                      {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 +214,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 +226,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/review-workspace/use-review-rail-state.ts

@@ -21,7 +21,7 @@ export interface ReviewRailState {
  * Review-rail open/close state + the responsive transition effect.
  *
  * When the responsive signature flips (narrow↔wide, or
- * `reviewRailAvailable` changes), the rail resets to its default open
+ * `reviewRailAvailable` changes), the rail resets to its default closed
  * state per `getInitialReviewRailOpen`. A ref guards the effect so it
  * only fires on actual transitions, not every viewport resize.
  *

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

@@ -181,9 +181,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   // in the render tree below.
   const { bodySlotRef, pmSurfaceElement } = usePmSurfaceCapture();
   const { scrollRootRef, pageStackScrollRoot } = useScrollRootCapture();
+  const lastHoveredRevisionIdRef = useRef<string | null>(null);
   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) => {
@@ -246,6 +249,22 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     reviewRailAvailable,
     viewportWidth,
   });
+  const handleDocumentMouseOver = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const element = event.target as HTMLElement | null;
+      const revisionId =
+        element?.closest?.("[data-revision-id]")?.getAttribute("data-revision-id") ?? null;
+      if (!revisionId || (revisionId === lastHoveredRevisionIdRef.current && reviewRailOpen)) {
+        return;
+      }
+      lastHoveredRevisionIdRef.current = revisionId;
+      if (reviewRailAvailable) {
+        setReviewRailOpen(true);
+        props.onActiveRailTabChange?.("changes");
+      }
+    },
+    [props.onActiveRailTabChange, reviewRailAvailable, reviewRailOpen, setReviewRailOpen],
+  );
   // Incremented on zoom_changed / render_frame_ready so the placement
   // useMemo below re-executes when the render kernel emits new rects.
   const renderFrameRevision = useLayoutFacetRenderSignal(props.layoutFacet);
@@ -609,7 +628,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   toolbarInteractionPolicy?.canAddComment ??
                   (caps ? caps.canAddComment : false)
                 }
-                showTrackedChanges={props.showTrackedChanges}
+                showTrackedChanges={trackedChangesAuthoringEnabled}
                 capabilities={caps}
                 onAddComment={
                   props.onAddComment
@@ -744,7 +763,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)}
@@ -926,6 +945,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           <div className="flex flex-1 flex-col min-w-0">
             <div
               ref={scrollRootRef}
+              onMouseOver={handleDocumentMouseOver}
               className="flex-1 overflow-y-auto bg-surface"
               data-wre-scroll-root="true"
             >
@@ -1243,6 +1263,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 +1272,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,