@beyondwork/docx-react-component 1.0.106 → 1.0.108

package/src/ui-tailwind/review-workspace/use-diagnostics-signal.ts

@@ -2,6 +2,10 @@ import { useMemo } from "react";
 
 import type { RuntimeRenderSnapshot } from "../../api/public-types.ts";
 import type { SessionCapabilities } from "../../api/public-types";
+import {
+  filterProductWarnings,
+  isDebugOnlyCompatibilityFeature,
+} from "./diagnostics-visibility.ts";
 
 export interface DiagnosticsSignal {
   severity: "none" | "info" | "warning" | "blocked";
@@ -13,13 +17,20 @@ export interface UseDiagnosticsSignalOptions {
   caps: SessionCapabilities | undefined;
   preserveOnlyCount: number;
   blockedReasonsCount: number;
+  /**
+   * Preserve-only / opaque diagnostics are debug/operator UX. Default
+   * product chrome should not open Health or badge the toolbar solely
+   * because content is preserved for export.
+   */
+  includePreservationDiagnostics?: boolean;
 }
 
 /**
  * Phase E.1 — diagnostics signal feeds `resolveChromeComposition` so the
  * `health` rail tab can enter `visibleTabs`. Severity ladder mirrors
  * `TwAlertBanner`'s precedence (§6.17): blocked export → workflow blocked
- * → preserve-only / warnings → info.
+ * → warnings → info. Preserve-only / opaque counts are included only
+ * for debug/operator surfaces.
  *
  * Perf — I1 fix: the workspace re-renders on every PM transaction
  * (inverted-truth architecture — `view.updateState()` replaces PM state
@@ -32,25 +43,42 @@ export interface UseDiagnosticsSignalOptions {
 export function useDiagnosticsSignal(
   options: UseDiagnosticsSignalOptions,
 ): DiagnosticsSignal {
-  const { snapshot, caps, preserveOnlyCount, blockedReasonsCount } = options;
+  const {
+    snapshot,
+    caps,
+    preserveOnlyCount,
+    blockedReasonsCount,
+    includePreservationDiagnostics = false,
+  } = options;
 
   return useMemo(() => {
-    const featureEntries = snapshot.compatibility.featureEntries;
-    const unsupportedFatalCount =
-      caps?.unsupportedFatalCount ??
-      featureEntries.filter((e) => e.featureClass === "unsupported-fatal").length;
+    const featureEntries = includePreservationDiagnostics
+      ? snapshot.compatibility.featureEntries
+      : snapshot.compatibility.featureEntries.filter(
+          (entry) => !isDebugOnlyCompatibilityFeature(entry),
+        );
+    const visibleWarnings = includePreservationDiagnostics
+      ? snapshot.warnings
+      : filterProductWarnings(snapshot.warnings);
+    const unsupportedFatalCount = includePreservationDiagnostics
+      ? caps?.unsupportedFatalCount ??
+        featureEntries.filter((e) => e.featureClass === "unsupported-fatal").length
+      : featureEntries.filter((e) => e.featureClass === "unsupported-fatal").length;
     let infoWarningCount = 0;
-    for (const w of snapshot.warnings) {
+    for (const w of visibleWarnings) {
       if (w.severity === "info") infoWarningCount += 1;
     }
-    const blockingWarningCount = snapshot.warnings.length - infoWarningCount;
+    const blockingWarningCount = visibleWarnings.length - infoWarningCount;
+    const preservationCount = includePreservationDiagnostics
+      ? preserveOnlyCount
+      : 0;
     const count =
-      caps?.healthIssueCount ??
-      preserveOnlyCount + unsupportedFatalCount + snapshot.warnings.length;
+      (includePreservationDiagnostics ? caps?.healthIssueCount : undefined) ??
+      preservationCount + unsupportedFatalCount + visibleWarnings.length;
     const severity: "none" | "info" | "warning" | "blocked" =
       snapshot.compatibility.blockExport || unsupportedFatalCount > 0
         ? "blocked"
-        : preserveOnlyCount > 0 ||
+        : preservationCount > 0 ||
             blockingWarningCount > 0 ||
             blockedReasonsCount > 0
           ? "warning"
@@ -66,5 +94,6 @@ export function useDiagnosticsSignal(
     caps?.healthIssueCount,
     preserveOnlyCount,
     blockedReasonsCount,
+    includePreservationDiagnostics,
   ]);
 }

package/src/ui-tailwind/review-workspace/use-layout-facet-render-signal.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import type { WordReviewEditorLayoutFacet } from "../../api/public-types.ts";
 
 /**
  * P3.b + P5b + P14.b — subscribe to layout facet events that should
@@ -12,7 +13,7 @@ import { useEffect, useState } from "react";
  * the same synchronous tick fold into one re-render.
  */
 export function useLayoutFacetRenderSignal(
-  layoutFacet: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet | undefined,
+  layoutFacet: WordReviewEditorLayoutFacet | undefined,
 ): number {
   const [renderFrameRevision, setRenderFrameRevision] = useState(0);
 

package/src/ui-tailwind/review-workspace/use-page-markers.ts

@@ -1,11 +1,14 @@
 import { useEffect, useMemo, useState } from "react";
 
-import type { GeometryFacet, RuntimeRenderSnapshot } from "../../api/public-types.ts";
+import type {
+  GeometryFacet,
+  RuntimeRenderSnapshot,
+  WordReviewEditorLayoutFacet,
+} from "../../api/public-types.ts";
 import {
   resolveVisibleBlockRangesFromPageOffsets,
   resolveVisibleBlockRangesFromPageRange,
   resolveVisiblePageIndexRangeFromViewport,
-  useVisibleBlockRange,
   useVisibleBlockRanges,
   useVisiblePageIndexRange,
   type VisiblePageIndexRange,
@@ -14,7 +17,7 @@ import {
 export interface UsePageMarkersOptions {
   pageStackScrollRoot: HTMLElement | null;
   snapshot: RuntimeRenderSnapshot;
-  layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  layoutFacet?: WordReviewEditorLayoutFacet;
   geometryFacet?: GeometryFacet;
   renderFrameRevision?: number;
   /** CSS zoom applied to the document surface; scroll pixels are normalized by this. */
@@ -23,13 +26,6 @@ export interface UsePageMarkersOptions {
 
 export interface PageMarkersResult {
   pageMarkers: readonly HTMLElement[];
-  /**
-   * Bounding hull of {@link visibleBlockRanges}. Kept on the result for
-   * back-compat with call sites that only consumed a single range; the
-   * runtime now receives the disjoint ranges directly via
-   * `setVisibleBlockRanges`.
-   */
-  visibleBlockRange: ReturnType<typeof useVisibleBlockRange>;
   /** The canonical multi-interval realization set. */
   visibleBlockRanges: ReturnType<typeof useVisibleBlockRanges>;
   visiblePageIndexRange: ReturnType<typeof useVisiblePageIndexRange>;
@@ -81,7 +77,7 @@ function pageMarkersEqual(
 function useGeometryVisiblePageIndexRange(input: {
   scrollRoot: HTMLElement | null;
   geometryFacet?: GeometryFacet;
-  layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  layoutFacet?: WordReviewEditorLayoutFacet;
   pageMarkerCount: number;
   overscanPages: number;
   renderFrameRevision?: number;
@@ -180,6 +176,13 @@ function useGeometryVisiblePageIndexRange(input: {
   return range;
 }
 
+export function shouldUseCompatibilityPageMarkerScan(input: {
+  geometryFacet?: GeometryFacet;
+  layoutFacet?: WordReviewEditorLayoutFacet;
+}): boolean {
+  return !input.geometryFacet || !input.layoutFacet;
+}
+
 /**
  * L7 Phase 2 Task 2.2.4a — viewport-scroll wiring.
  *
@@ -212,7 +215,7 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
   const [pageMarkers, setPageMarkers] = useState<readonly HTMLElement[]>([]);
 
   useEffect(() => {
-    if (geometryFacet && layoutFacet) {
+    if (!shouldUseCompatibilityPageMarkerScan({ geometryFacet, layoutFacet })) {
       // Warm path: render-kernel geometry gives us page frames and the layout
       // facet gives us page offsets, so DOM page-break markers are only legacy
       // fallback. Skipping the marker scan avoids querySelectorAll +
@@ -385,19 +388,6 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
     visibleBlockRangesFromPageRange ??
     markerVisibleBlockRanges;
 
-  // Bounding hull of the disjoint ranges for the back-compat `visibleBlockRange`
-  // result field + for the effect's dep key (below).
-  const visibleBlockRange = useMemo(() => {
-    if (visibleBlockRanges.length === 0) return { start: 0, end: 0 };
-    let start = visibleBlockRanges[0]!.start;
-    let end = visibleBlockRanges[0]!.end;
-    for (let i = 1; i < visibleBlockRanges.length; i += 1) {
-      if (visibleBlockRanges[i]!.start < start) start = visibleBlockRanges[i]!.start;
-      if (visibleBlockRanges[i]!.end > end) end = visibleBlockRanges[i]!.end;
-    }
-    return { start, end };
-  }, [visibleBlockRanges]);
-
   // Stable fingerprint of the current disjoint-range set; used as the effect
   // dep so identity-preserving recomputes (same intervals, new memo array
   // reference) don't re-fire the viewport refresh.
@@ -423,7 +413,6 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
 
   return {
     pageMarkers,
-    visibleBlockRange,
     visibleBlockRanges,
     visiblePageIndexRange,
   };

package/src/ui-tailwind/review-workspace/use-scope-card-state.ts

@@ -3,8 +3,11 @@ import { useCallback, useEffect, useState } from "react";
 import type {
   EditorAnchorProjection,
   ScopeIssueAction,
+  ScopeCardModel,
+  WorkflowFacet,
   WorkflowScopeMode,
 } from "../../api/public-types.ts";
+import type { ApiV3Ui } from "../../api/v3/ui";
 import {
   cycleScopeIndex,
   shouldHandleScopeNavKey,
@@ -12,12 +15,12 @@ import {
 import { useUiApi } from "../ui-api-context.tsx";
 
 export interface UseScopeCardStateOptions {
-  layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
   /**
-   * Layer-06 workflow facet — no-provider fallback for scope card models.
-   * Mounted paths prefer `api.ui.scope.rail/card`.
+   * Compatibility-only fallback for no-provider tests/headless mounts.
+   * Mounted editor paths must read scope identity + card models through
+   * `api.ui.scope.rail/card`.
    */
-  workflowFacet?: import("../../runtime/workflow/rail/types.ts").WorkflowFacet;
+  workflowFacet?: WorkflowFacet;
   onScopeModeChangeRequested?: (payload: {
     scopeId: string;
     mode: WorkflowScopeMode;
@@ -68,7 +71,6 @@ export interface ScopeCardState {
  */
 export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardState {
   const {
-    layoutFacet,
     workflowFacet,
     onScopeModeChangeRequested,
     onScopeIssueActionRequested,
@@ -76,31 +78,21 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
     onScopeRejectSuggestionGroup,
     onScopeAskAgent,
   } = options;
-  void layoutFacet;
 
   const [activeScopeId, setActiveScopeId] = useState<string | null>(null);
   const ui = useUiApi();
 
   const readScopeIds = useCallback((): string[] => {
     if (ui) {
-      const ids: string[] = [];
-      const seen = new Set<string>();
-      for (const segment of ui.scope.rail().segments) {
-        if (seen.has(segment.scopeId)) continue;
-        seen.add(segment.scopeId);
-        ids.push(segment.scopeId);
-      }
-      return ids;
+      return readMountedScopeIdsFromUi(ui);
     }
-    return workflowFacet?.getAllScopeCardModels().map((model) => model.scopeId) ?? [];
+    return readCompatibilityScopeIdsFromWorkflowFacet(workflowFacet);
   }, [ui, workflowFacet]);
 
   const readScopeCard = useCallback(
     (scopeId: string) => {
       if (ui) return ui.scope.card(scopeId);
-      return workflowFacet
-        ?.getAllScopeCardModels()
-        .find((m) => m.scopeId === scopeId) ?? null;
+      return readCompatibilityScopeCardFromWorkflowFacet(workflowFacet, scopeId);
     },
     [ui, workflowFacet],
   );
@@ -190,3 +182,28 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
     handleScopeCardAskAgent,
   };
 }
+
+function readMountedScopeIdsFromUi(ui: ApiV3Ui): string[] {
+  const ids: string[] = [];
+  const seen = new Set<string>();
+  for (const scope of ui.scope.list()) {
+    const scopeId = scope.handle.scopeId;
+    if (seen.has(scopeId)) continue;
+    seen.add(scopeId);
+    ids.push(scopeId);
+  }
+  return ids;
+}
+
+function readCompatibilityScopeIdsFromWorkflowFacet(
+  workflowFacet: WorkflowFacet | undefined,
+): string[] {
+  return workflowFacet?.getAllScopeCardModels().map((model) => model.scopeId) ?? [];
+}
+
+function readCompatibilityScopeCardFromWorkflowFacet(
+  workflowFacet: WorkflowFacet | undefined,
+  scopeId: string,
+): ScopeCardModel | null {
+  return workflowFacet?.getAllScopeCardModels().find((m) => m.scopeId === scopeId) ?? null;
+}

package/src/ui-tailwind/review-workspace/use-selection-toolbar-placement.ts

@@ -22,33 +22,24 @@ export interface UseSelectionToolbarPlacementOptions {
 /**
  * Compute placement for the floating selection toolbar.
  *
- * Resolution order (flicker-remediation 2026-04-22):
+ * Resolution order:
  *
- *   1. Legacy `resolveSelectionToolbarPlacement` driven by the
- *      host-supplied `selectionToolAnchor` prop + the toolbar root's
- *      `getBoundingClientRect()`. This path correctly handles
- *      viewport-to-container translation + zoom scaling. It was the
- *      original pre-DS-C1 path, is demonstrably correct, and is
- *      populated every render by the shell — so it does not race with
- *      bridge publication order.
+ *   1. `ui.overlays.getAnchor({ kind: "selection" })` when the mounted
+ *      `UiApiProvider` and shell bridge can resolve a frame-local
+ *      selection anchor. This is the DS-C1 steady-state path.
  *
- *   2. `ui.overlays.getAnchor({ kind: "selection" })` fallback when
- *      the host hasn't populated `selectionToolAnchor`. The UI API
- *      returns a frame-local rect; projecting it into container-local
- *      coordinates is a documented TODO (the bridge rect's
- *      `space: "frame"` is tracked but not yet translated in this
- *      placement path). Until that projection lands, this branch is
- *      best-effort for consumers that don't supply the legacy prop —
- *      e.g. future headless / Playwright drivers.
+ *   2. Legacy `resolveSelectionToolbarPlacement` driven by the
+ *      host-supplied `selectionToolAnchor` prop + toolbar root
+ *      `getBoundingClientRect()`. This remains the compatibility
+ *      fallback for unmounted/headless paths, cold bridge frames, and
+ *      legacy callers that have not adopted the UI API seam.
  *
- * DS-C1 (designsystem.md §8.8.1 "Selection toolbar" row) still routes
- * anchor READS through the UI API in principle; the shell bridge
- * (`useShellSelectionAnchorBridge`) continues publishing tool-aware
- * rects so `ui.overlays.getAnchor({ kind: "selection" })` returns a
- * meaningful rect for the debug service, Playwright, and the UI-API
- * consumer tests. The placement hook's priority change is strictly a
- * flicker-remediation concession: same source of truth, correct
- * coordinate space.
+ * DS-C1 (designsystem.md §8.8.1 "Selection toolbar" row) routes anchor
+ * reads through the UI API. The shell bridge
+ * (`useShellSelectionAnchorBridge`) publishes tool-aware frame rects on
+ * every render; the toolbar root is the same frame-local positioning
+ * container, so `resolveSelectionToolPlacement` can consume the rect
+ * without a DOM anchor re-measure.
  *
  * The memo re-runs when the geometry facet bumps `renderFrameRevision`
  * so placement tracks new rects without a separate subscription here.
@@ -67,19 +58,19 @@ export function useSelectionToolbarPlacement(
   const ui = useUiApi();
 
   return useMemo(() => {
-    // Primary: legacy DOM-anchor path. Correct coord space; no bridge
-    // timing dependency.
     const legacy = resolveSelectionToolbarPlacement(
       selectionToolAnchor,
       selectionToolbarRootRef.current,
       zoomScale,
     );
-    if (legacy) return legacy;
 
-    // Fallback: UI API anchor for consumers that don't populate
-    // `selectionToolAnchor`. Coord-space projection TODO — the bridge
-    // rect is frame-local, `resolveSelectionToolPlacement` assumes
-    // container-local. Best-effort until projection lands.
+    // Primary: mounted UI API anchor seam. The bridge returns frame-local
+    // px and the toolbar root is the frame-local absolute positioning
+    // container, so only the container size comes from DOM. If the bridge
+    // returns a broad frame anchor that would force above/below placement
+    // while the legacy measured text rect can still side-place the toolbar,
+    // keep the side placement as the precision fallback until all selection
+    // anchors are per-range precise.
     if (ui && gatedSelectionTool) {
       const anchorRect = ui.overlays.getAnchor({ kind: "selection" });
       if (anchorRect && selectionToolbarRootRef.current) {
@@ -97,9 +88,27 @@ export function useSelectionToolbarPlacement(
             heightPx: containerRect.height,
           },
         });
-        if (result) return result;
+        if (result) {
+          if (
+            legacy &&
+            (result.placement === "above" || result.placement === "below") &&
+            (legacy.placement === "right" || legacy.placement === "left")
+          ) {
+            return legacy;
+          }
+          return result;
+        }
       }
     }
+
+    // Compatibility fallback: legacy DOM-anchor prop for bridge-cold
+    // mounted frames and non-UI-API consumers. Removal trigger:
+    // delete this path once `UiApiProvider` is mandatory for every
+    // production WordReviewEditor mount and the shell selection anchor
+    // bridge has no cold-frame gap (tracked in L10 backlog follow-up
+    // "selection-toolbar legacy DOM-anchor fallback").
+    if (legacy) return legacy;
+
     return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [

package/src/ui-tailwind/review-workspace/use-status-bar-page-facts.ts

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import type {
   PublicMeasurementFidelity,
   RuntimeRenderSnapshot,
+  WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
 
 export interface StatusBarPageFacts {
@@ -12,7 +13,7 @@ export interface StatusBarPageFacts {
 }
 
 export interface UseStatusBarPageFactsOptions {
-  layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  layoutFacet?: WordReviewEditorLayoutFacet;
   selectionPosition: number;
   activeStory: RuntimeRenderSnapshot["activeStory"];
   renderFrameRevision: number;

package/src/ui-tailwind/review-workspace/use-workspace-side-effects.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
 import { createCanvasBackend } from "../../api/public-types.ts";
+import type { WordReviewEditorLayoutFacet } from "../../api/public-types.ts";
 import {
   incrementInvalidationCounter,
   recordPerfSample,
@@ -12,7 +13,7 @@ import type { PageChromeModel } from "./page-chrome.ts";
 import type { PageShellMetrics } from "./page-shell-metrics.ts";
 
 export interface UseWorkspaceSideEffectsOptions {
-  layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  layoutFacet?: WordReviewEditorLayoutFacet;
   activeParagraphLayout: ActiveParagraphLayout | null;
   pageChromeModel: PageChromeModel;
   pageShellMetrics: PageShellMetrics;

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -35,9 +35,9 @@ export interface TwStatusBarProps {
   measurementFidelity?: PublicMeasurementFidelity;
   /**
    * Lane 6b §6b.S4: opt-in diagnostics flag.  When `true`, the status
-   * bar reveals the measurement-fidelity badge on the right zone.
-   * Hosts must pair this with `debugMode` in production — the fidelity
-   * badge is a maintainer affordance, not a user-facing surface.
+   * bar may reveal debug/operator-only diagnostics such as measurement
+   * fidelity and preserve-only export warnings. Default product chrome
+   * keeps opaque/deferred preservation silent.
    */
   debugMode?: boolean;
   /**
@@ -67,9 +67,10 @@ export function TwStatusBar(props: TwStatusBarProps) {
     : props.isDirty
       ? "Unsaved"
       : "Ready";
+  const showPreservationDiagnostics = props.debugMode === true;
   const exportState = props.isExportBlocked
     ? "Blocked"
-    : props.preserveOnlyCount > 0
+    : showPreservationDiagnostics && props.preserveOnlyCount > 0
       ? "Warnings"
       : "Ready";
 
@@ -80,7 +81,7 @@ export function TwStatusBar(props: TwStatusBarProps) {
       : "bg-[var(--color-status-ready)]";
   const exportDotColor = props.isExportBlocked
     ? "bg-[var(--color-status-blocked)]"
-    : props.preserveOnlyCount > 0
+    : showPreservationDiagnostics && props.preserveOnlyCount > 0
       ? "bg-[var(--color-semantic-warning)]"
       : "bg-[var(--color-status-ready)]";
 

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

@@ -13,8 +13,8 @@
  * traversal + claim/skip/complete.
  */
 
-import React, { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
-import { createPortal } from "react-dom";
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
@@ -154,6 +154,9 @@ export function TwRoleActionRegion(
       data-testid={props["data-testid"] ?? `role-action-region-${props.role}`}
       data-role={props.role}
     >
+      {props.role === "workflow" && props.workflowItem !== undefined ? (
+        <WorkflowActiveLabel item={props.workflowItem} />
+      ) : null}
       {inlineIds.map((id) => (
         <RoleActionButton
           key={id}
@@ -177,13 +180,14 @@ function isRoleActionRenderable(
   switch (id) {
     case "review-queue-prev":
     case "review-queue-next":
-    case "review-queue-counts":
-    case "review-queue-active-label":
     case "review-accept":
     case "review-reject":
     case "review-accept-all":
     case "review-reject-all":
       return reviewQueueTotal > 0;
+    case "review-queue-counts":
+    case "review-queue-active-label":
+      return props.reviewQueue !== undefined;
     case "workflow-prev":
     case "workflow-next":
     case "workflow-mark-complete":
@@ -433,100 +437,38 @@ function RoleActionOverflow({
   props,
 }: RoleActionOverflowProps): React.JSX.Element {
   const [open, setOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <>
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
         <button
-          ref={triggerRef}
           type="button"
           aria-label="More role actions"
           aria-expanded={open}
-          aria-haspopup="menu"
           onMouseDown={preserveEditorSelectionMouseDown}
-          onClick={(event) => {
-            event.preventDefault();
-            setOpen((value) => !value);
-          }}
           title="More role actions"
-          className={`inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
-            open ? "text-accent ring-1 ring-accent/30 shadow-sm" : ""
-          }`}
+          className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
           data-testid="role-action-overflow-trigger"
         >
           <MoreHorizontal className="h-3.5 w-3.5 text-tertiary" aria-hidden="true" />
         </button>
-      <RoleActionPortalMenu anchorRef={triggerRef} open={open}>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="z-50 w-[220px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+          sideOffset={8}
+          align="start"
+          data-testid="role-action-overflow-content"
+        >
           {ids.map((id) => (
             <OverflowAction key={id} id={id} props={props} onClose={() => setOpen(false)} />
           ))}
-      </RoleActionPortalMenu>
-    </>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
 
-function RoleActionPortalMenu(props: {
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  children: React.ReactNode;
-  open: boolean;
-}): React.ReactPortal | null {
-  const style = useRoleActionPortalPosition(props.anchorRef, props.open);
-  const body = props.anchorRef.current?.ownerDocument?.body;
-  if (!props.open || !body) return null;
-  return createPortal(
-    <div
-      className="z-50 w-[220px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
-      data-testid="role-action-overflow-content"
-      style={style}
-    >
-      {props.children}
-    </div>,
-    body,
-  );
-}
-
-function useRoleActionPortalPosition(
-  anchorRef: React.RefObject<HTMLButtonElement | null>,
-  open: boolean,
-): CSSProperties {
-  const [style, setStyle] = useState<CSSProperties>({
-    left: 8,
-    position: "fixed",
-    top: 8,
-    zIndex: 50,
-  });
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    const anchor = anchorRef.current;
-    const ownerWindow = anchor?.ownerDocument?.defaultView;
-    if (!anchor || !ownerWindow) return;
-    const update = () => {
-      const rect = anchor.getBoundingClientRect();
-      const width = 220;
-      const left = Math.min(
-        Math.max(8, rect.left),
-        Math.max(8, (ownerWindow.innerWidth || width + 16) - width - 8),
-      );
-      setStyle({
-        left,
-        position: "fixed",
-        top: Math.max(8, rect.bottom + 8),
-        zIndex: 50,
-      });
-    };
-    update();
-    ownerWindow.addEventListener("resize", update);
-    ownerWindow.addEventListener("scroll", update, true);
-    return () => {
-      ownerWindow.removeEventListener("resize", update);
-      ownerWindow.removeEventListener("scroll", update, true);
-    };
-  }, [anchorRef, open]);
-
-  return style;
-}
-
 function OverflowAction(arg: {
   id: ToolbarChromeItemId;
   props: TwRoleActionRegionProps;
@@ -755,4 +697,34 @@ function ReviewActiveLabel({
   );
 }
 
+function WorkflowActiveLabel({
+  item,
+}: {
+  item: WorkflowWorkItemSnapshot | null;
+}): React.JSX.Element {
+  const status = item?.status ?? "idle";
+  const statusLabel =
+    status === "done"
+      ? "Done"
+      : status === "blocked"
+        ? "Blocked"
+        : status === "active"
+          ? "Active"
+          : status === "pending"
+            ? "Pending"
+            : "Idle";
+
+  return (
+    <span
+      className="inline-flex min-w-0 items-center gap-1.5 truncate text-[11px] text-primary"
+      data-testid="role-workflow-active-label"
+    >
+      <span className="shrink-0 rounded-full bg-canvas px-1.5 py-0.5 text-[9px] font-medium text-secondary ring-1 ring-border/50">
+        {statusLabel}
+      </span>
+      <span className="truncate">{item?.title ?? "No active work item"}</span>
+    </span>
+  );
+}
+
 export default TwRoleActionRegion;