@beyondwork/docx-react-component 1.0.105 → 1.0.108

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

@@ -8,7 +8,6 @@ import React, {
 } from "react";
 
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { ChevronRight } from "lucide-react";
 
 import { sliceBlocksForPage } from "./editor-surface/page-slice-util.ts";
 import {
@@ -19,7 +18,6 @@ import { TwPageBlockView } from "./editor-surface/tw-page-block-view.tsx";
 import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
 import { shouldRenderSelectionToolKind } from "../ui/headless/scoped-chrome-policy";
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
-import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
 import { TwPageRuler } from "./chrome/tw-page-ruler";
 import { ChromePresetToolbar } from "./chrome/chrome-preset-toolbar";
@@ -35,13 +33,6 @@ import {
   type TwReviewWorkspaceRailMode,
 } from "./review-workspace/tw-review-workspace-rail.tsx";
 import { TwStatusBar } from "./status/tw-status-bar";
-import {
-  TwShellHeader,
-  type ShellHeaderMode,
-  type ShellHeaderModeOption,
-} from "./toolbar/tw-shell-header";
-import { TwContextBand } from "./chrome/tw-context-band";
-import { TwRoleActionRegion } from "./toolbar/tw-role-action-region";
 import { LocalSurfaceArbiterContext } from "./chrome/local-surface-arbiter";
 import {
   TwWorkspaceChromeHost,
@@ -62,14 +53,20 @@ import { useViewportDimensions } from "./review-workspace/use-viewport-dimension
 import { useScopeCardState } from "./review-workspace/use-scope-card-state.ts";
 import { usePageMarkers } from "./review-workspace/use-page-markers.ts";
 import { useDiagnosticsSignal } from "./review-workspace/use-diagnostics-signal.ts";
+import {
+  filterProductCompatibility,
+  filterProductWarnings,
+} from "./review-workspace/diagnostics-visibility.ts";
 import { useWorkspaceComposition } from "./review-workspace/use-workspace-composition.ts";
 import { useWorkspaceArbiter } from "./review-workspace/use-workspace-arbiter.ts";
 import { useLayoutFacetRenderSignal } from "./review-workspace/use-layout-facet-render-signal.ts";
 import { useScrollRootCapture } from "./review-workspace/use-scroll-root-capture.ts";
 import { usePmSurfaceCapture } from "./review-workspace/use-pm-surface-capture.ts";
 import { TwReviewWorkspaceNavigator } from "./review-workspace/tw-review-workspace-navigator.tsx";
+import { DEFAULT_CANVAS_BODY_WIDTH_PX } from "./review-workspace/page-shell-metrics.ts";
 
 export {
+  DEFAULT_CANVAS_BODY_WIDTH_PX,
   FRAME_PX_PER_TWIP_AT_96DPI,
   MIN_BAND_HEIGHT_PX,
   buildPageShellMetrics,
@@ -85,82 +82,23 @@ export type {
   TwReviewWorkspaceProps,
 } from "./review-workspace/types.ts";
 
-import type { EditorRole, EditorStoryTarget } from "../api/public-types.ts";
-
-// Default shell-header modes for the workspace's default composition.
-// Designsystem §6.1 prescribes a 4-mode switcher; all four are reachable in
-// the product path. "More" is a shell-owned diagnostics/search posture, so it
-// uses `ChromeCompositionInput.modeOverride` instead of changing runtime role.
-const DEFAULT_WORKSPACE_SHELL_MODES: readonly ShellHeaderModeOption[] = [
-  { id: "edit", label: "Edit" },
-  { id: "review", label: "Review" },
-  { id: "workflow", label: "Workflow" },
-  { id: "more", label: "More" },
-];
+import type {
+  EditorRole,
+  EditorStoryTarget,
+  WorkflowScopeSnapshot,
+} from "../api/public-types.ts";
 
-function editorRoleToShellMode(role: EditorRole): ShellHeaderMode {
-  switch (role) {
-    case "editor":
-      return "edit";
-    case "review":
-      return "review";
-    case "workflow":
-      return "workflow";
+function resolveRoleChromePreset(
+  basePreset: ReturnType<typeof resolveChromePreset>,
+  role: EditorRole,
+): ReturnType<typeof resolveChromePreset> {
+  if (role === "workflow") {
+    return "workflow";
   }
-}
-
-function shellModeToEditorRole(mode: ShellHeaderMode): EditorRole | null {
-  switch (mode) {
-    case "edit":
-      return "editor";
-    case "review":
-      return "review";
-    case "workflow":
-      return "workflow";
-    case "more":
-      return null;
+  if (role === "review") {
+    return "review";
   }
-}
-
-function TwMoreContextBandContent(props: {
-  onOpenDiagnostics: () => void;
-  onOpenCompatibility: () => void;
-  onOpenOutline: () => void;
-  onOpenSearch?: () => void;
-}): React.JSX.Element {
-  return (
-    <div
-      className="flex min-w-0 items-center gap-1"
-      data-testid="more-context-band-content"
-    >
-      <ContextBandButton label="Diagnostics" onClick={props.onOpenDiagnostics} />
-      <ContextBandButton label="Compatibility" onClick={props.onOpenCompatibility} />
-      <ContextBandButton label="Outline" onClick={props.onOpenOutline} />
-      <ContextBandButton
-        label="Search"
-        onClick={props.onOpenSearch}
-        disabled={!props.onOpenSearch}
-      />
-    </div>
-  );
-}
-
-function ContextBandButton(props: {
-  label: string;
-  onClick?: () => void;
-  disabled?: boolean;
-}): React.JSX.Element {
-  return (
-    <button
-      type="button"
-      disabled={props.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={props.onClick}
-      className="inline-flex h-7 items-center rounded-[var(--radius-md)] px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {props.label}
-    </button>
-  );
+  return basePreset;
 }
 
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
@@ -172,8 +110,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
   const workspaceChromeControllerRef =
     useRef<TwWorkspaceChromeHostController | null>(null);
-  const [shellModeOverride, setShellModeOverride] =
-    useState<ShellHeaderMode | null>(null);
   // P8.11 — body slot wrapping `{props.document}` (the PM surface) + scroll
   // root ref.  The chrome layer's `TwPageStackChromeLayer` needs both to
   // measure per-page rects and to reparent PM's DOM node across band
@@ -215,7 +151,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     handleScopeCardRejectSuggestionGroup,
     handleScopeCardAskAgent,
   } = useScopeCardState({
-    layoutFacet: props.layoutFacet,
     workflowFacet: props.workflowFacet,
     onScopeModeChangeRequested: props.onScopeModeChangeRequested,
     onScopeIssueActionRequested: props.onScopeIssueActionRequested,
@@ -229,17 +164,19 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   // `pageShellMetrics` has been computed (P2.c).
   const numericZoomScale = typeof zoomLevel === "number" ? zoomLevel / 100 : 1;
   const chromePreset = resolveChromePreset(props.chromePreset, props.reviewMode);
-  const chromeOptions = resolveChromePresetOptions(chromePreset, props.chromeOptions, viewState.editorRole);
+  const productChromePreset = resolveRoleChromePreset(chromePreset, viewState.editorRole);
+  const chromeOptions = resolveChromePresetOptions(productChromePreset, props.chromeOptions, viewState.editorRole);
   const preserveOnlyCount = caps?.preserveOnlyCount ??
     snapshot.compatibility.featureEntries.filter(
       (entry) => entry.featureClass === "preserve-only",
     ).length;
+  const showDebugDiagnostics = props.showDebugDiagnostics === true;
   const blockedReasons =
     props.interactionGuardSnapshot?.blockedReasons ??
     props.workflowScopeSnapshot?.blockedReasons ??
     [];
   const chromeVisibility = resolveChromeVisibilityForPreset({
-    chromePreset,
+    chromePreset: productChromePreset,
     chromeOptions,
     chromeVisibility: props.chromeVisibility,
   });
@@ -265,7 +202,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       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)) {
+      if (
+        viewState.editorRole === "editor" ||
+        !revisionId ||
+        (revisionId === lastHoveredRevisionIdRef.current && reviewRailOpen)
+      ) {
         return;
       }
       lastHoveredRevisionIdRef.current = revisionId;
@@ -274,7 +215,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         props.onActiveRailTabChange?.("changes");
       }
     },
-    [props.onActiveRailTabChange, reviewRailAvailable, reviewRailOpen, setReviewRailOpen],
+    [
+      props.onActiveRailTabChange,
+      reviewRailAvailable,
+      reviewRailOpen,
+      setReviewRailOpen,
+      viewState.editorRole,
+    ],
   );
   // Incremented on zoom_changed / render_frame_ready so the placement
   // useMemo below re-executes when the render kernel emits new rects.
@@ -303,11 +250,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   }, [renderFrameRevision, uiApi, shellChannels]);
   const scopeRailSegments = useMemo(
     () =>
+      // Mounted path: current scope rail truth flows through Layer 10
+      // `ui.scope.rail()`. The workflow facet remains only as the
+      // compatibility fallback when no UiApiProvider is mounted.
       uiApi?.scope.rail().segments ??
       props.workflowFacet?.getAllRailSegments() ??
       [],
     [uiApi, props.workflowFacet, renderFrameRevision],
   );
+  const mountedSemanticScopeCount = useMemo(
+    () => uiApi?.scope.list().length,
+    [uiApi, renderFrameRevision],
+  );
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
   const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
@@ -345,6 +299,30 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     viewportHeight,
     isPageWorkspace,
   });
+  const canvasDocumentColumnStyle = useMemo<CSSProperties | undefined>(() => {
+    if (isPageWorkspace) {
+      return undefined;
+    }
+    const contentWidthPx =
+      pageShellMetrics.contentWidthPx || DEFAULT_CANVAS_BODY_WIDTH_PX;
+    return { maxWidth: `${contentWidthPx}px` };
+  }, [isPageWorkspace, pageShellMetrics.contentWidthPx]);
+  const documentColumnStyle = useMemo<CSSProperties | undefined>(() => {
+    if (isPageWorkspace) {
+      return pageChromeModel.documentGridStyle;
+    }
+    if (!canvasDocumentColumnStyle && !pageChromeModel.documentGridStyle) {
+      return undefined;
+    }
+    return {
+      ...(canvasDocumentColumnStyle ?? {}),
+      ...(pageChromeModel.documentGridStyle ?? {}),
+    };
+  }, [
+    canvasDocumentColumnStyle,
+    isPageWorkspace,
+    pageChromeModel.documentGridStyle,
+  ]);
   // DS-C1 — publish the current selection anchor so
   // `ui.overlays.getAnchor({ kind: "selection" })` resolves to a real
   // rect on the mounted path (designsystem.md §8.8.1 "Selection toolbar"
@@ -391,7 +369,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     snapshot.activeStory.kind !== "main" ||
     effectiveSelectionMode !== "edit";
   const hasEditableSelectionTarget =
-    viewState.isFocused &&
     viewState.selection.activeRange.kind === "range" &&
     viewState.activeObjectFrame === null;
   const hasSidebarPanelAccess = Boolean(
@@ -402,7 +379,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       viewportWidth,
       reviewRailAvailable,
       reviewRailOpen,
-      chromePreset,
+      chromePreset: productChromePreset,
       caps,
       interactionGuardSnapshot: props.interactionGuardSnapshot,
       workflowScopeSnapshot: props.workflowScopeSnapshot,
@@ -412,11 +389,19 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       effectiveSelectionMode,
       activeStoryKind: snapshot.activeStory.kind,
     });
+  const suppressFloatingToolDuringEditorInput =
+    viewState.editorRole === "editor" &&
+    viewState.selection.isCollapsed;
+  const shouldRenderFloatingSelectionTool =
+    chromeVisibility.selectionOverlay &&
+    gatedSelectionTool &&
+    !suppressFloatingToolDuringEditorInput &&
+    shouldRenderSelectionToolKind(scopedChromePolicy, gatedSelectionTool.kind);
 
   // L7 Phase 2 Task 2.2.4a — viewport-scroll wiring. Page marker
   // collection, selection-backed visible block/page ranges, and the
   // facet push all live in the hook.
-  const { visibleBlockRange, visiblePageIndexRange } = usePageMarkers({
+  const { visiblePageIndexRange } = usePageMarkers({
     pageStackScrollRoot,
     snapshot,
     layoutFacet: props.layoutFacet,
@@ -510,56 +495,14 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     [],
   );
 
-  // Audit §2.4 — the shell header is ALWAYS present in default composition.
-  // When the host does not supply a pre-assembled shell node, fall back to
-  // a default TwShellHeader wired to the workspace's editor-role state so
-  // the mode tabs actually change the active role instead of being
-  // decorative. The "more" tab is shell-owned diagnostics/search posture:
-  // it drives composition mode via `modeOverride` and does not mutate the
-  // runtime editor role.
-  // Host-supplied shells continue to win (back-compat).
-  const defaultShellModes: readonly ShellHeaderModeOption[] =
-    DEFAULT_WORKSPACE_SHELL_MODES;
-  const defaultShellActiveMode: ShellHeaderMode = editorRoleToShellMode(
-    viewState.editorRole,
-  );
-  const activeShellMode: ShellHeaderMode =
-    shellModeOverride === "more" ? "more" : defaultShellActiveMode;
-  // coord-11 §21 — host-supplied shellHeader wins; otherwise the default
-  // TwShellHeader mounts only when `chromeVisibility.shellHeader === true`
-  // (default for every preset except `selection`). The `selection` preset
-  // is intended for minimal embeds (incl. visual-fidelity `chrome=none`)
-  // and must not paint a workspace mode-tab header.
+  // Host-supplied shells continue to win, but the product no longer mounts
+  // a default top mode-strip. Edit / Review / Workflow switching lives in
+  // the main toolbar so the document opens with one chrome row.
   const renderedShell =
-    props.shellHeader !== undefined
+    chromeVisibility.shellHeader && props.shellHeader !== undefined
       ? props.shellHeader
-      : chromeVisibility.shellHeader
-        ? (
-          <TwShellHeader
-            modes={defaultShellModes}
-            activeMode={activeShellMode}
-            onModeChange={(mode) => {
-              if (mode === "more") {
-                setShellModeOverride("more");
-                setReviewRailOpen(true);
-                props.onActiveRailTabChange?.("health");
-                return;
-              }
-              setShellModeOverride(null);
-              const nextRole = shellModeToEditorRole(mode);
-              if (nextRole !== null && nextRole !== viewState.editorRole) {
-                props.onEditorRoleChange?.(nextRole);
-              }
-            }}
-          />
-        )
-        : null;
+      : null;
 
-  // Audit §2.5 — context band mounts as a composition-level sibling below
-  // the shell header only when the active mode has meaningful mode-owned
-  // content. Plain editor mode keeps its authoring controls in the toolbar
-  // and intentionally does not render an empty "Edit" ribbon.
-  //
   // `resolveChromeComposition` is pure but each call allocates new Sets +
   // arrays.  `TwReviewWorkspace` re-renders on every PM transaction (the
   // inverted-truth architecture calls `view.updateState()` wholesale) so
@@ -573,12 +516,36 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     snapshot,
     caps,
     preserveOnlyCount,
-    blockedReasonsCount: blockedReasons.length,
+    blockedReasonsCount: showDebugDiagnostics ? blockedReasons.length : 0,
+    includePreservationDiagnostics: showDebugDiagnostics,
   });
   const healthIssueCount = diagnosticsSignal.count;
+  const diagnosticsCompatibility = useMemo(
+    () =>
+      showDebugDiagnostics
+        ? snapshot.compatibility
+        : filterProductCompatibility(snapshot.compatibility),
+    [showDebugDiagnostics, snapshot.compatibility],
+  );
+  const diagnosticsWarnings = useMemo(
+    () =>
+      showDebugDiagnostics
+        ? snapshot.warnings
+        : filterProductWarnings(snapshot.warnings),
+    [showDebugDiagnostics, snapshot.warnings],
+  );
+  const diagnosticsBlockedReasons = showDebugDiagnostics ? blockedReasons : [];
+  const chromeCapabilities = useMemo(() => {
+    if (!caps) return caps;
+    return {
+      ...caps,
+      healthIssueCount,
+      preserveOnlyCount: showDebugDiagnostics ? caps.preserveOnlyCount : 0,
+    };
+  }, [caps, healthIssueCount, showDebugDiagnostics]);
 
   const composition = useWorkspaceComposition({
-    chromePreset,
+    chromePreset: productChromePreset,
     chromeOptions: props.chromeOptions,
     chromeVisibility: props.chromeVisibility,
     reviewMode: props.reviewMode,
@@ -590,137 +557,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     density: props.density,
     containerWidth: viewportWidth,
     diagnosticsSignal,
-    modeOverride: shellModeOverride === "more" ? "more" : undefined,
   });
   const showHealthRailTab = composition.rail.visibleTabs.has("health");
-  const showContextBand =
-    chromeVisibility.toolbar &&
-    (composition.mode === "more" || viewState.editorRole !== "editor");
-
   const arbiter = useWorkspaceArbiter();
 
   return (
     <LocalSurfaceArbiterContext.Provider value={arbiter}>
     <Tooltip.Provider delayDuration={400}>
-      <div className="flex h-full flex-col bg-canvas text-primary">
+      <div
+        className="flex h-full min-h-0 flex-col overflow-hidden bg-canvas text-primary"
+        data-testid="tw-review-workspace"
+      >
         {renderedShell}
-        {/*
-         * The context band is a workspace-layer surface (DESIGN-EDITOR.md
-         * §4.2) and therefore gated on the toolbar-layer visibility flag
-         * — the `selection` chrome preset suppresses both toolbar and
-         * band so minimal embeds stay chrome-free.  If a future preset
-         * wants the band without the formatting toolbar, introduce a
-         * dedicated `chromeVisibility.contextBand` flag rather than
-         * decoupling this branch.
-         */}
-        {/*
-         * Chrome Closure Pass · Task 1 (designsystem.md §6.3) — review,
-         * workflow, and More mode actions live in `TwContextBand`; editor
-         * mode stays toolbar-only unless a future pass adds real contextual
-         * authoring content.
-         */}
-        {showContextBand ? (
-          <TwContextBand mode={composition.mode}>
-            {composition.mode === "more" ? (
-              <TwMoreContextBandContent
-                onOpenDiagnostics={() => {
-                  setReviewRailOpen(true);
-                  props.onActiveRailTabChange?.("health");
-                }}
-                onOpenCompatibility={() => {
-                  setReviewRailOpen(true);
-                  props.onActiveRailTabChange?.("health");
-                }}
-                onOpenOutline={() => setNavOpen(true)}
-                onOpenSearch={props.onOpenInlineFind ?? props.reviewRailFooter?.onSearch}
-              />
-            ) : viewState.editorRole ? (
-              <TwRoleActionRegion
-                role={viewState.editorRole}
-                policy={scopedChromePolicy}
-                compactMode={responsiveChrome.isNarrow}
-                reviewQueue={props.reviewQueue}
-                markupDisplay={markupDisplay}
-                canAddComment={
-                  toolbarInteractionPolicy?.canAddComment ??
-                  (caps ? caps.canAddComment : false)
-                }
-                showTrackedChanges={trackedChangesAuthoringEnabled}
-                capabilities={caps}
-                onAddComment={
-                  props.onAddComment
-                    ? runWithSelectionToolbarDismiss(props.onAddComment)
-                    : undefined
-                }
-                onShowTrackedChangesChange={(show) => {
-                  dismissSelectionToolbar();
-                  props.onShowTrackedChangesChange(show);
-                }}
-                onReviewMarkupMode={(mode) => {
-                  dismissSelectionToolbar();
-                  props.onReviewMarkupModeChange?.(mode);
-                }}
-                onReviewSidebarTrackedChanges={
-                  props.onReviewSidebarTrackedChanges
-                    ? runWithSelectionToolbarDismiss(props.onReviewSidebarTrackedChanges)
-                    : undefined
-                }
-                onReviewSidebarComments={
-                  props.onReviewSidebarComments
-                    ? runWithSelectionToolbarDismiss(props.onReviewSidebarComments)
-                    : undefined
-                }
-                onMarkScopePosture={
-                  props.onMarkSectionForReview
-                    ? runWithSelectionToolbarDismiss(props.onMarkSectionForReview)
-                    : undefined
-                }
-                onReviewPrev={
-                  props.onGoToPreviousReviewItem
-                    ? runWithSelectionToolbarDismiss(props.onGoToPreviousReviewItem)
-                    : undefined
-                }
-                onReviewNext={
-                  props.onGoToNextReviewItem
-                    ? runWithSelectionToolbarDismiss(props.onGoToNextReviewItem)
-                    : undefined
-                }
-                onReviewAccept={(() => {
-                  const active = props.reviewQueue?.items[props.reviewQueue.activeIndex];
-                  if (active?.kind !== "change" || !props.onAcceptRevision) {
-                    return undefined;
-                  }
-                  const revisionId = active.itemId;
-                  return () => {
-                    dismissSelectionToolbar();
-                    props.onAcceptRevision?.(revisionId);
-                  };
-                })()}
-                onReviewReject={(() => {
-                  const active = props.reviewQueue?.items[props.reviewQueue.activeIndex];
-                  if (active?.kind !== "change" || !props.onRejectRevision) {
-                    return undefined;
-                  }
-                  const revisionId = active.itemId;
-                  return () => {
-                    dismissSelectionToolbar();
-                    props.onRejectRevision?.(revisionId);
-                  };
-                })()}
-                onReviewAcceptAll={
-                  props.onAcceptAllChanges
-                    ? runWithSelectionToolbarDismiss(props.onAcceptAllChanges)
-                    : undefined
-                }
-                onReviewRejectAll={
-                  props.onRejectAllChanges
-                    ? runWithSelectionToolbarDismiss(props.onRejectAllChanges)
-                    : undefined
-                }
-              />
-            ) : null}
-          </TwContextBand>
-        ) : null}
         {/*
          * Phase C.γ.3 — mount the workspace chrome host when the
          * integrator has wired an editor-action bag.  Omitting the
@@ -746,9 +594,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           />
         ) : null}
         {chromeVisibility.toolbar ? (
-          <div className="px-3 pt-3">
+          <div
+            className="sticky top-0 z-30 shrink-0 bg-[var(--color-bg-canvas)]/95 px-3 pt-3 backdrop-blur-sm"
+            data-testid="tw-review-workspace__sticky-toolbar"
+          >
             <ChromePresetToolbar
-              chromePreset={chromePreset}
+              chromePreset={productChromePreset}
               {...(props.collabSession ? { collabSession: props.collabSession } : {})}
               {...(props.collabTransportStatus
                 ? { collabTransportStatus: props.collabTransportStatus }
@@ -763,10 +614,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 ? { collabSendBaseline: props.collabSendBaseline }
                 : {})}
               chromeOptionsResolved={chromeOptions}
-              capabilities={caps}
-              compatibility={snapshot.compatibility}
-              warnings={snapshot.warnings}
-              blockedReasons={blockedReasons}
+              capabilities={chromeCapabilities}
+              compatibility={diagnosticsCompatibility}
+              warnings={diagnosticsWarnings}
+              blockedReasons={diagnosticsBlockedReasons}
               showDiagnosticsChrome={chromeVisibility.alerts}
               interactionPolicy={toolbarInteractionPolicy}
               scopedChromePolicy={scopedChromePolicy}
@@ -894,6 +745,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 props.onReviewMarkupModeChange?.(mode);
               }}
               role={viewState.editorRole}
+              onEditorRoleChange={(role) => {
+                dismissSelectionToolbar();
+                if (role !== viewState.editorRole) {
+                  props.onEditorRoleChange?.(role);
+                }
+              }}
               reviewQueue={props.reviewQueue}
               markupDisplay={markupDisplay}
               onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges
@@ -943,8 +800,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
 
         {chromeVisibility.alerts ? <TwAlertBanner
           snapshot={snapshot}
-          preserveOnlyCount={preserveOnlyCount}
-          workflowBlockedReasons={blockedReasons}
+          preserveOnlyCount={showDebugDiagnostics ? preserveOnlyCount : 0}
+          workflowBlockedReasons={diagnosticsBlockedReasons}
+          showPreservationDiagnostics={showDebugDiagnostics}
           onShowDetail={() => {
             setReviewRailOpen(true);
             props.onActiveRailTabChange?.("health");
@@ -964,7 +822,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           />
 
           {/* Document column */}
-          <div className="flex flex-1 flex-col min-w-0">
+          <div
+            className="flex min-h-0 flex-1 flex-col min-w-0"
+            data-testid="tw-review-workspace__document-scroll-column"
+          >
             <div
               ref={scrollRootRef}
               onMouseOver={handleDocumentMouseOver}
@@ -989,11 +850,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                  * section-properties controls move to the on-demand
                  * band-activation ribbon (Slice B).
                  */}
-                {chromeVisibility.selectionOverlay &&
-                gatedSelectionTool &&
-                shouldRenderSelectionToolKind(scopedChromePolicy, gatedSelectionTool.kind) ? (
+                {shouldRenderFloatingSelectionTool ? (
                   <TwSelectionToolHost
                     tool={gatedSelectionTool}
+                    selectionKey={`${viewState.selection.anchor}:${viewState.selection.head}:${viewState.selection.storyTarget?.kind ?? "main"}`}
                     contextAnalytics={
                       chromeVisibility.contextAnalytics
                         ? props.selectionContextAnalytics
@@ -1037,6 +897,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onSetTableAlignment={props.onSetTableAlignment}
                     onSetCellVerticalAlign={props.onSetCellVerticalAlign}
                     onOpenTableMore={openTableMoreMenu}
+                    showPreservationDiagnostics={showDebugDiagnostics}
                     chromePins={viewState.chromePins}
                     onChromePinChange={props.onChromePinChange}
                   />
@@ -1135,10 +996,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     style={isPageWorkspace ? pageShellMetrics.contentInsetStyle : undefined}
                   >
                     <div
-                      className={isPageWorkspace ? "relative" : undefined}
+                      className={isPageWorkspace ? "relative" : "relative mx-auto w-full max-w-[80rem]"}
+                      data-testid="tw-review-workspace__document-column"
                       data-document-grid={pageChromeModel.documentGridType}
                       data-page-border-display={pageChromeModel.pageBorderDisplay}
-                      style={pageChromeModel.documentGridStyle}
+                      style={documentColumnStyle}
                     >
                       {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? (
                         <div
@@ -1188,6 +1050,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             grabbedObjectFromOffset={grabbedSegmentOffsets?.from ?? null}
                             grabbedObjectToOffset={grabbedSegmentOffsets?.to ?? null}
                             onDeselectObject={props.onDeselectObject}
+                            onBeginObjectDrag={props.onBeginObjectDrag}
                             tableContext={props.tableContext}
                             onSetColumnWidth={props.onSetColumnWidth}
                             onSetRowHeight={props.onSetRowHeight}
@@ -1243,7 +1106,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               <TwStatusBar
                 isDirty={snapshot.isDirty}
                 isExportBlocked={snapshot.compatibility.blockExport}
-                preserveOnlyCount={preserveOnlyCount}
+                preserveOnlyCount={showDebugDiagnostics ? preserveOnlyCount : 0}
                 commentCount={snapshot.comments.totalCount}
                 changeCount={snapshot.trackedChanges.totalCount}
                 sessionId={snapshot.sessionId}
@@ -1255,15 +1118,16 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 displayPageNumber={statusBarPageFacts.displayPageNumber}
                 pageCount={statusBarPageFacts.pageCount}
                 measurementFidelity={statusBarPageFacts.measurementFidelity}
+                debugMode={showDebugDiagnostics}
               />
             ) : null}
           </div>
 
-          {/* Review rail — docked on desktop, drawer-backed on narrow layouts */}
+          {/* Review rail — overlay on desktop, drawer-backed on narrow layouts. */}
           <TwReviewWorkspaceRail
             mode={
               (responsiveChrome.showDockedReviewRail
-                ? "docked"
+                ? "overlay"
                 : responsiveChrome.showDrawerReviewRail
                   ? "drawer"
                   : "hidden") satisfies TwReviewWorkspaceRailMode
@@ -1274,8 +1138,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               currentUserId: props.currentUserId,
               comments: snapshot.comments,
               trackedChanges: snapshot.trackedChanges,
-              compatibility: snapshot.compatibility,
-              warnings: snapshot.warnings,
+              compatibility: diagnosticsCompatibility,
+              warnings: diagnosticsWarnings,
               markupDisplay,
               contextAnalytics: chromeVisibility.contextAnalytics
                 ? props.currentScopeContextAnalytics
@@ -1295,7 +1159,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               onAcceptAllChanges: props.onAcceptAllChanges,
               onRejectAllChanges: props.onRejectAllChanges,
               // Layer 11 closeout: mounted workspace chrome reads scope
-              // rail data through `api.ui.scope.rail()`, with the workflow
+              // rail data through `api.ui.scope.rail()` and scope identity
+              // counts through `api.ui.scope.list()`, with the workflow
               // facet retained as the no-provider fallback.
               scopeRailSegments,
               activeScopeId,
@@ -1303,7 +1168,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 handleScopeStripeClick({ scopeId: segment.scopeId });
               },
               workflowTab: props.reviewRailWorkflowTab,
-              workflowCount: props.reviewRailWorkflowCount,
+              workflowCount: props.reviewRailWorkflowCount ?? mountedSemanticScopeCount,
               workflowScopesTitle: props.reviewRailWorkflowScopesTitle,
               intelligenceEyebrow: props.reviewRailIntelligenceEyebrow,
               intelligenceHeader: props.reviewRailIntelligenceHeader,
@@ -1313,7 +1178,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               ...(diagnosticsSignal.severity !== "none"
                 ? { healthSeverity: diagnosticsSignal.severity }
                 : {}),
-              workflowBlockedReasons: blockedReasons,
+              workflowBlockedReasons: diagnosticsBlockedReasons,
+              showPreservationDiagnostics: showDebugDiagnostics,
             }}
           />
         </div>