@beyondwork/docx-react-component 1.0.19 → 1.0.21

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -16,6 +16,9 @@ import type {
   SearchOptions,
   SearchResultSnapshot,
   SelectionSnapshot,
+  WorkflowBlockedCommandReason,
+  WorkflowCandidateRange,
+  WorkflowScope,
 } from "../../api/public-types";
 import type { CanonicalDocumentEnvelope } from "../../core/state/editor-state.ts";
 import { searchDocument } from "../../runtime/document-search.ts";
@@ -38,7 +41,12 @@ import {
 } from "./pm-command-bridge";
 import { buildDecorations } from "./pm-decorations";
 import { createContextualInteractionPlugin } from "./pm-contextual-ui";
-import { finishPerfProbe, startPerfProbe } from "./perf-probe";
+import {
+  finishPerfProbe,
+  incrementInvalidationCounter,
+  recordPerfSample,
+  startPerfProbe,
+} from "./perf-probe";
 import type { PositionMap } from "./pm-position-map";
 import {
   clearSearch as clearSearchPlugin,
@@ -47,8 +55,13 @@ import {
   performSearch,
   searchPluginKey,
 } from "./search-plugin";
+import {
+  createSurfaceDecorationKey,
+  createSurfaceDocumentBuildKey,
+} from "./surface-build-keys";
 import { tableNodeViews } from "./tw-table-node-view";
 import type { SelectionToolbarAnchor } from "../../ui/headless/selection-toolbar-model";
+import type { MediaPreviewDescriptor } from "./pm-state-from-snapshot";
 
 /**
  * Same props interface as the legacy TwEditorSurface — drop-in replacement.
@@ -77,6 +90,10 @@ export interface TwProseMirrorSurfaceProps {
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
+  mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  workflowScopes?: readonly WorkflowScope[];
+  workflowCandidates?: readonly WorkflowCandidateRange[];
+  workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
 }
 
 export interface TwProseMirrorSurfaceRef {
@@ -97,6 +114,17 @@ export const TwProseMirrorSurface = forwardRef<
     onBlur,
   } = props;
   const surface = snapshot.surface;
+  const mediaPreviewKey = useMemo(
+    () =>
+      Object.entries(props.mediaPreviews ?? {})
+        .sort(([leftId], [rightId]) => leftId.localeCompare(rightId))
+        .map(
+          ([mediaId, preview]) =>
+            `${mediaId}:${preview.widthEmu ?? ""}:${preview.heightEmu ?? ""}:${preview.src}`,
+        )
+        .join("|"),
+    [props.mediaPreviews],
+  );
 
   const canEdit = Boolean(
     surface && snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError,
@@ -109,7 +137,8 @@ export const TwProseMirrorSurface = forwardRef<
   const activeSearchRef = useRef<{ query: string; options: SearchOptions } | null>(null);
   const pendingTypingProbeRef = useRef<string | null>(null);
   const pendingSelectionProbeRef = useRef<string | null>(null);
-  const surfaceBuildKeyRef = useRef<string | null>(null);
+  const documentBuildKeyRef = useRef<string | null>(null);
+  const decorationBuildKeyRef = useRef<string | null>(null);
   const suppressSelectionEchoRef = useRef(false);
   const selectionToolbarFrameRef = useRef<number | null>(null);
   const lastSelectionToolbarMeasurementRef = useRef<{
@@ -158,6 +187,38 @@ export const TwProseMirrorSurface = forwardRef<
     () => createRevisionDecorationModel(snapshot.trackedChanges, props.activeRevisionId),
     [snapshot.trackedChanges, props.activeRevisionId],
   );
+  const documentBuildKey = useMemo(
+    () =>
+      createSurfaceDocumentBuildKey({
+        surface,
+        activeStory: snapshot.activeStory,
+        mediaPreviewKey,
+      }),
+    [mediaPreviewKey, snapshot.activeStory, surface],
+  );
+  const decorationBuildKey = useMemo(
+    () =>
+      createSurfaceDecorationKey({
+        markupDisplay,
+        showTrackedChanges,
+        canEdit,
+        activeCommentId: snapshot.comments.activeCommentId,
+        activeRevisionId: props.activeRevisionId,
+        workflowScopeSignature: JSON.stringify(props.workflowScopes ?? []),
+        workflowCandidateSignature: JSON.stringify(props.workflowCandidates ?? []),
+        workflowBlockedSignature: JSON.stringify(props.workflowBlockedReasons ?? []),
+      }),
+    [
+      canEdit,
+      markupDisplay,
+      props.activeRevisionId,
+      props.workflowCandidates,
+      props.workflowBlockedReasons,
+      props.workflowScopes,
+      showTrackedChanges,
+      snapshot.comments.activeCommentId,
+    ],
+  );
 
   // Create PM plugins (stable across renders — callbacks accessed via ref)
   const plugins = useMemo(() => {
@@ -174,6 +235,8 @@ export const TwProseMirrorSurface = forwardRef<
         onRedo: () => callbacksRef.current?.onRedo(),
         onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
         getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
+        isSelectionSyncSuppressed: () =>
+          callbacksRef.current?.isSelectionSyncSuppressed?.() ?? false,
       }),
       createContextualInteractionPlugin({
         onCommentActivated: (commentId) => props.onCommentActivated?.(commentId),
@@ -183,37 +246,48 @@ export const TwProseMirrorSurface = forwardRef<
     ];
   }, [props.onCommentActivated, props.onRevisionActivated]);
 
-  // Create or update PM view whenever surface becomes available or changes.
-  // The view is created lazily — if surface is null on first render (loading),
-  // it will be created when the runtime provides a real snapshot.
-  useEffect(() => {
-    if (!mountRef.current || !surface) return;
-
-    const surfaceBuildKey = JSON.stringify({
-      revisionToken: snapshot.revisionToken,
-      activeStory: snapshot.activeStory,
-      markupDisplay,
-      canEdit,
-      showTrackedChanges,
-    });
-
-    if (viewRef.current && surfaceBuildKeyRef.current === surfaceBuildKey) {
-      const positionMap = positionMapRef.current;
-      if (!positionMap) {
-        return;
-      }
+  const applyDecorationProps = useCallback(
+    (view: EditorView, positionMap: PositionMap): void => {
       const decorations = buildDecorations(
-        viewRef.current.state.doc,
+        view.state.doc,
         positionMap,
         commentModel,
         revisionModel,
         markupDisplay,
         showTrackedChanges,
+        props.workflowScopes,
+        snapshot.activeStory,
+        props.workflowCandidates,
+        props.workflowBlockedReasons,
       );
-      viewRef.current.setProps({
+      view.setProps({
         editable: () => canEdit,
         decorations: () => decorations,
       });
+      decorationBuildKeyRef.current = decorationBuildKey;
+      recordPerfSample("pm.decorations");
+      incrementInvalidationCounter("pm.laneB.decorationUpdates");
+    },
+    [
+      canEdit,
+      commentModel,
+      decorationBuildKey,
+      markupDisplay,
+      revisionModel,
+      showTrackedChanges,
+      props.workflowBlockedReasons,
+      props.workflowCandidates,
+      props.workflowScopes,
+      props.workflowCandidates,
+      props.workflowBlockedReasons,
+    ],
+  );
+
+  // Create or update the PM document only when the structural key changes.
+  useEffect(() => {
+    if (!mountRef.current || !surface) return;
+
+    if (viewRef.current && documentBuildKeyRef.current === documentBuildKey) {
       return;
     }
 
@@ -221,9 +295,9 @@ export const TwProseMirrorSurface = forwardRef<
       surface,
       snapshot.selection,
       plugins,
+      props.mediaPreviews,
     );
     positionMapRef.current = positionMap;
-
     const decorations = buildDecorations(
       state.doc,
       positionMap,
@@ -231,7 +305,13 @@ export const TwProseMirrorSurface = forwardRef<
       revisionModel,
       markupDisplay,
       showTrackedChanges,
+      props.workflowScopes,
+      snapshot.activeStory,
+      props.workflowCandidates,
+      props.workflowBlockedReasons,
     );
+    recordPerfSample("pm.rebuild");
+    incrementInvalidationCounter("pm.laneA.rebuilds");
 
     if (!viewRef.current) {
       // First time surface is available — create the EditorView
@@ -246,19 +326,16 @@ export const TwProseMirrorSurface = forwardRef<
         },
       });
       viewRef.current = view;
+      recordPerfSample("pm.mount");
     } else {
-      // View exists — update state and decorations
-      viewRef.current.setProps({
-        editable: () => canEdit,
-        decorations: () => decorations,
-      });
       suppressSelectionEchoRef.current = true;
       viewRef.current.updateState(state);
       queueMicrotask(() => {
         suppressSelectionEchoRef.current = false;
       });
     }
-    surfaceBuildKeyRef.current = surfaceBuildKey;
+    documentBuildKeyRef.current = documentBuildKey;
+    applyDecorationProps(viewRef.current, positionMap);
 
     if (activeSearchRef.current) {
       applySearch(
@@ -271,16 +348,29 @@ export const TwProseMirrorSurface = forwardRef<
       pendingTypingProbeRef.current = null;
     }
   }, [
-    snapshot.activeStory,
-    snapshot.revisionToken,
+    applyDecorationProps,
+    documentBuildKey,
     surface,
-    commentModel,
-    revisionModel,
-    markupDisplay,
-    canEdit,
-    showTrackedChanges,
+    snapshot.selection,
+    plugins,
+    props.mediaPreviews,
   ]);
 
+  // Update decorations and editability without rebuilding the PM document.
+  useEffect(() => {
+    const view = viewRef.current;
+    const positionMap = positionMapRef.current;
+    if (!view || !surface || !positionMap) {
+      return;
+    }
+
+    if (decorationBuildKeyRef.current === decorationBuildKey) {
+      return;
+    }
+
+    applyDecorationProps(view, positionMap);
+  }, [applyDecorationProps, decorationBuildKey, surface]);
+
   useEffect(() => {
     const view = viewRef.current;
     const positionMap = positionMapRef.current;
@@ -299,6 +389,7 @@ export const TwProseMirrorSurface = forwardRef<
 
     suppressSelectionEchoRef.current = true;
     view.dispatch(view.state.tr.setSelection(nextSelection));
+    recordPerfSample("selection.sync");
     queueMicrotask(() => {
       suppressSelectionEchoRef.current = false;
     });
@@ -356,11 +447,41 @@ export const TwProseMirrorSurface = forwardRef<
 
   function applySearch(query: string, options: SearchOptions): SearchResultSnapshot[] {
     const view = viewRef.current;
+    const hiddenDeletionRanges =
+      markupDisplay === "clean"
+        ? snapshot.trackedChanges.revisions
+            .filter(
+              (
+                revision,
+              ): revision is typeof revision & {
+                anchor: Extract<typeof revision.anchor, { kind: "range" }>;
+              } =>
+                revision.kind === "deletion" &&
+                revision.status === "active" &&
+                revision.anchor.kind === "range",
+            )
+            .map((revision) => ({
+              from: revision.anchor.from,
+              to: revision.anchor.to,
+            }))
+        : [];
     if (view) {
-      const rawResults = performSearch(view.state, query, options).slice(
-        0,
-        options.limit ?? Number.POSITIVE_INFINITY,
-      );
+      const rawResults = performSearch(view.state, query, options)
+        .filter((result) => {
+          if (hiddenDeletionRanges.length === 0) {
+            return true;
+          }
+          const positionMap = positionMapRef.current;
+          if (!positionMap) {
+            return true;
+          }
+          const runtimeFrom = positionMap.pmToRuntime(result.from);
+          const runtimeTo = positionMap.pmToRuntime(result.to);
+          return !hiddenDeletionRanges.some(
+            (range) => runtimeFrom < range.to && runtimeTo > range.from,
+          );
+        })
+        .slice(0, options.limit ?? Number.POSITIVE_INFINITY);
       view.dispatch(
         view.state.tr.setMeta(searchPluginKey, {
           results: rawResults,
@@ -369,16 +490,37 @@ export const TwProseMirrorSurface = forwardRef<
       );
     }
 
-    return searchDocument(
-      props.canonicalDocument,
-      snapshot.selection,
-      snapshot.activeStory,
-      props.documentNavigation,
-      query,
-      options,
+    return filterHiddenDeletionSearchResults(
+      searchDocument(
+        props.canonicalDocument,
+        snapshot.selection,
+        snapshot.activeStory,
+        props.documentNavigation,
+        query,
+        options,
+      ),
+      hiddenDeletionRanges,
     );
   }
 
+  function filterHiddenDeletionSearchResults(
+    results: SearchResultSnapshot[],
+    hiddenRanges: Array<{ from: number; to: number }>,
+  ): SearchResultSnapshot[] {
+    if (hiddenRanges.length === 0) {
+      return results;
+    }
+    return results.filter((result) => {
+      const anchor = result.anchor;
+      if (anchor.kind !== "range") {
+        return true;
+      }
+      return !hiddenRanges.some(
+        (range) => anchor.from < range.to && anchor.to > range.from,
+      );
+    });
+  }
+
   function clearLiveSearch(): void {
     const view = viewRef.current;
     if (!view) {

package/src/ui-tailwind/page-chrome-model.ts

@@ -0,0 +1,27 @@
+import type {
+  DocumentNavigationSnapshot,
+  PageLayoutSnapshot,
+  SurfaceBlockSnapshot,
+} from "../api/public-types.ts";
+
+export interface LineMarker {
+  id: string;
+  label: string;
+  topPx: number;
+}
+
+export function computeLineMarkersIfEnabled(input: {
+  pageLayout: PageLayoutSnapshot | undefined;
+  surfaceBlocks: readonly SurfaceBlockSnapshot[];
+  pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>;
+  buildLineNumberMarkers: (
+    blocks: readonly SurfaceBlockSnapshot[],
+    pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
+  ) => LineMarker[];
+}): LineMarker[] {
+  if (!input.pageLayout?.lineNumbering) {
+    return [];
+  }
+
+  return input.buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+}

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

@@ -50,7 +50,7 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
           ))}
         </div>
       ) : (
-        <div className="rounded-xl border border-dashed border-border bg-surface/60 px-3 py-4 text-[11px] leading-5 text-tertiary">
+        <div className="rounded-lg border border-dashed border-border bg-surface/60 px-2.5 py-3 text-[10px] leading-4 text-tertiary">
           No comment threads yet. Select text and add one from the toolbar.
         </div>
       )}
@@ -93,7 +93,7 @@ function CommentThreadCard(props: {
       role="button"
       tabIndex={0}
       className={[
-        "cursor-pointer rounded-xl border px-2.5 py-2 transition-colors",
+        "cursor-pointer rounded-lg border px-2 py-1.5 transition-colors",
         focusRingClass,
         isActive
           ? "border-accent/25 bg-accent-soft/35"
@@ -125,7 +125,7 @@ function CommentThreadCard(props: {
 
       {/* Excerpt — anchored text from document */}
       {showExcerpt ? (
-        <p className="mb-1 rounded-md border-l-2 border-comment/25 bg-comment-soft/30 px-2 py-1 text-[9px] leading-4 text-comment/80 italic line-clamp-2">
+        <p className="mb-1 rounded-md border-l-2 border-comment/25 bg-comment-soft/30 px-2 py-1 text-[9px] leading-4 text-comment/80 italic whitespace-pre-wrap break-words line-clamp-2">
           {thread.excerpt}
         </p>
       ) : null}
@@ -140,7 +140,7 @@ function CommentThreadCard(props: {
         />
       ) : leadEntry?.body ? (
         <p
-          className="text-[10px] leading-[1.15rem] text-secondary line-clamp-3"
+          className="text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4"
           data-comment-thread-body="true"
         >
           {leadEntry.body}
@@ -159,13 +159,13 @@ function CommentThreadCard(props: {
 
       {/* Reply entries (compact) */}
       {thread.entries.slice(1).map((entry) => (
-        <div key={entry.entryId} className="mt-1 border-t border-border/40 pt-1">
+        <div key={entry.entryId} className="mt-1.5 ml-4 border-l border-border/50 pl-2.5">
           <div className="mb-0.5 flex items-center gap-1">
             <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
             <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
           </div>
           <p
-            className="text-[10px] leading-4 text-secondary line-clamp-2"
+            className="text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3"
             data-comment-reply-body="true"
           >
             {entry.body}
@@ -180,7 +180,7 @@ function CommentThreadCard(props: {
       ) : null}
 
       {/* Inline actions — compact, horizontal */}
-      <div className="mt-1.5 flex items-center gap-0.5">
+      <div className="mt-1 flex items-center gap-0.5">
         {thread.status === "open" && (
           <>
             <button

package/src/ui-tailwind/review/tw-health-panel.tsx

@@ -5,15 +5,17 @@ import type {
   CompatibilityFeatureEntry,
   CompatibilityPanelSnapshot,
   EditorWarning,
+  WorkflowBlockedCommandReason,
 } from "../../api/public-types";
 
 export interface TwHealthPanelProps {
   compatibility: CompatibilityPanelSnapshot;
   warnings: EditorWarning[];
+  blockedReasons?: WorkflowBlockedCommandReason[];
 }
 
 export function TwHealthPanel(props: TwHealthPanelProps) {
-  const { compatibility, warnings } = props;
+  const { compatibility, warnings, blockedReasons = [] } = props;
   const supportedCount = compatibility.featureEntries.filter(
     (e) => e.featureClass === "supported-roundtrip",
   ).length;
@@ -80,7 +82,34 @@ export function TwHealthPanel(props: TwHealthPanelProps) {
           </div>
         ))}
 
-        {compatibility.featureEntries.length === 0 && warnings.length === 0 ? (
+        {blockedReasons.length > 0 ? (
+          <>
+            <div className="border-t border-border mt-2 pt-2">
+              <p className="text-xs font-medium text-tertiary mb-1">Workflow blocked reasons</p>
+            </div>
+            {blockedReasons.map((reason, index) => (
+              <div key={`blocked-${index}`} className="flex rounded-lg transition-colors hover:bg-surface">
+                <div className="w-0.5 shrink-0 rounded-l-lg bg-amber-400" />
+                <div className="flex items-start gap-2 p-2.5 flex-1">
+                  <ShieldAlert className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-sm font-medium text-primary">{reason.message}</span>
+                      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-amber-700 bg-amber-100">
+                        {reason.code.replace(/_/g, " ")}
+                      </span>
+                    </div>
+                    {reason.scopeId ? (
+                      <p className="text-xs text-tertiary mt-0.5">scope: {reason.scopeId}</p>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </>
+        ) : null}
+
+        {compatibility.featureEntries.length === 0 && warnings.length === 0 && blockedReasons.length === 0 ? (
           <p className="text-xs text-tertiary py-4">
             No compatibility entries or warnings to display.
           </p>

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

@@ -52,7 +52,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
   return (
     <aside
       aria-label="Review rail"
-      className="flex w-[336px] shrink-0 flex-col border-l border-border bg-canvas"
+      className="flex w-[304px] shrink-0 flex-col border-l border-border bg-canvas"
     >
       <Tabs.Root
         value={props.activeTab}
@@ -79,7 +79,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
 
         <ScrollArea.Root className="flex-1 min-h-0">
           <ScrollArea.Viewport className="h-full w-full">
-            <Tabs.Content value="comments" className="p-3 outline-none">
+            <Tabs.Content value="comments" className="p-2.5 outline-none">
               <TwCommentSidebar
                 currentUserId={props.currentUserId}
                 comments={props.comments}
@@ -92,7 +92,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
               />
             </Tabs.Content>
 
-            <Tabs.Content value="changes" className="p-3 outline-none">
+            <Tabs.Content value="changes" className="p-2.5 outline-none">
               <TwRevisionSidebar
                 trackedChanges={props.trackedChanges}
                 markupDisplay={props.markupDisplay}

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

@@ -28,16 +28,16 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
 
   return (
     <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
+      <p className="mb-2 text-[10px] text-tertiary">
         {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
       </p>
 
       {/* Bulk actions */}
-      <div className="flex gap-1.5 mb-3">
+      <div className="mb-2 flex gap-1">
         <button
           type="button"
           disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
           onClick={props.onAcceptAllChanges}
         >
           Accept all ({actionablePendingCount})
@@ -45,7 +45,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
         <button
           type="button"
           disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
           onClick={props.onRejectAllChanges}
         >
           Reject all
@@ -76,14 +76,14 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                   : rev.kind === "deletion" ? "bg-danger"
                   : "bg-tertiary"
                 }`} />
-                <div className="p-2.5 flex-1 min-w-0">
-                  <div className="flex items-start justify-between gap-2 mb-1">
-                    <span className="text-sm font-medium text-primary">{rev.anchorLabel}</span>
+                <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="text-xs text-tertiary mb-1">{rev.authorId} · {rev.createdAt}</p>
+                  <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
                   {rev.excerpt ? (
-                    <p className={`text-sm ${
+                    <p className={`text-[11px] ${
                       rev.kind === "insertion" ? "text-insert"
                       : rev.kind === "deletion" ? "text-danger line-through"
                       : "text-secondary"
@@ -91,18 +91,18 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       {rev.excerpt}
                     </p>
                   ) : (
-                    <p className="text-sm text-secondary">{rev.label}</p>
+                    <p className="text-[11px] text-secondary">{rev.label}</p>
                   )}
                   {rev.detail ? (
-                    <p className="text-xs text-secondary mt-1">{rev.detail}</p>
+                    <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
                   ) : null}
-                  <div className="flex gap-1.5 mt-2">
+                  <div className="mt-1.5 flex gap-1">
                     {rev.actionability === "actionable" ? (
                       <>
                         <button
                           type="button"
                           disabled={!rev.canAccept || rev.status === "accepted"}
-                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onAcceptRevision?.(rev.revisionId);
@@ -113,7 +113,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                         <button
                           type="button"
                           disabled={!rev.canReject || rev.status === "rejected"}
-                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onRejectRevision?.(rev.revisionId);
@@ -123,7 +123,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                         </button>
                       </>
                     ) : (
-                      <span className="text-xs text-tertiary px-2 py-1">Preserve-only</span>
+                      <span className="px-1.5 py-0.5 text-[10px] text-tertiary">Preserve-only</span>
                     )}
                   </div>
                 </div>