@beyondwork/docx-react-component 1.0.18 → 1.0.20

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -350,7 +350,6 @@ export class TableCellNodeView {
  */
 export const tableNodeViews: { [node: string]: NodeViewConstructor } = {
   table: (node: PMNode) => new TableNodeView(node),
-  table_row: (node: PMNode) => new TableRowNodeView(node),
   table_cell: (node: PMNode) => new TableCellNodeView(node),
   table_header_cell: (node: PMNode) => new TableCellNodeView(node),
 };

package/src/ui-tailwind/index.ts

@@ -16,8 +16,9 @@ export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
 export { TwHealthPanel } from "./review/tw-health-panel";
 
 // Toolbar
-export { TwToolbar, type TwToolbarProps, type ViewMode } from "./toolbar/tw-toolbar";
+export { TwToolbar, type TwToolbarProps } from "./toolbar/tw-toolbar";
 export { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
+export type { WorkspaceMode, ZoomLevel } from "../api/public-types";
 
 // Status
 export { TwStatusBar } from "./status/tw-status-bar";

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

@@ -1,5 +1,5 @@
-import React, { useRef, useState } from "react";
-import { Check, MessageSquarePlus } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Check, CornerDownRight, RotateCcw } from "lucide-react";
 
 import type { CommentSidebarSnapshot, CommentSidebarThreadSnapshot } from "../../api/public-types";
 
@@ -22,130 +22,218 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
 
   return (
     <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
-        {comments.openCommentIds.length} open · {comments.resolvedCommentIds.length} resolved · {comments.detachedCommentIds.length} detached
-      </p>
+      <div className="mb-2 flex items-center gap-2 text-[10px] text-tertiary">
+        <span>{comments.openCommentIds.length} open</span>
+        <span className="text-border">·</span>
+        <span>{comments.resolvedCommentIds.length} resolved</span>
+        {comments.detachedCommentIds.length > 0 && (
+          <>
+            <span className="text-border">·</span>
+            <span>{comments.detachedCommentIds.length} detached</span>
+          </>
+        )}
+      </div>
       {comments.threads.length > 0 ? (
-        <div className="space-y-1">
-          {comments.threads.map((thread) => {
-            const isActive = activeCommentId === thread.commentId;
-            const leadEntry = thread.entries[0];
-            const isOwnComment = currentUserId != null && leadEntry?.authorId === currentUserId;
-            const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
-
-            return (
-              <div
-                key={thread.commentId}
-                role="button"
-                tabIndex={0}
-                className={`rounded-lg p-2.5 transition-colors cursor-pointer ${focusRingClass} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`}
-                onClick={() => props.onOpenComment?.(thread)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    props.onOpenComment?.(thread);
-                  }
-                }}
-              >
-                <div className="flex items-start justify-between gap-2 mb-1">
-                  <span className="text-sm font-medium text-primary">{thread.createdBy}</span>
-                  <StatusBadge status={thread.status} />
-                </div>
-                <p className="text-xs text-tertiary mb-1">{thread.createdAt}</p>
-                <p className="text-xs font-medium text-comment bg-comment-soft rounded px-1 py-0.5 inline-block mb-1.5">
-                  {thread.excerpt}
-                </p>
+        <div className="space-y-1.5">
+          {comments.threads.map((thread) => (
+            <CommentThreadCard
+              key={thread.commentId}
+              thread={thread}
+              isActive={activeCommentId === thread.commentId}
+              currentUserId={currentUserId}
+              onOpenComment={props.onOpenComment}
+              onResolveComment={props.onResolveComment}
+              onReopenComment={props.onReopenComment}
+              onAddReply={props.onAddReply}
+              onEditBody={props.onEditBody}
+            />
+          ))}
+        </div>
+      ) : (
+        <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>
+      )}
+    </div>
+  );
+}
 
-                {/* Comment body — inline editable for own comments on open threads */}
-                {leadEntry?.body ? (
-                  canEdit ? (
-                    <InlineEditableBody
-                      commentId={thread.commentId}
-                      body={leadEntry.body}
-                      onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
-                    />
-                  ) : (
-                    <p className="text-sm text-secondary leading-relaxed">{leadEntry.body}</p>
-                  )
-                ) : null}
+function CommentThreadCard(props: {
+  thread: CommentSidebarThreadSnapshot;
+  isActive: boolean;
+  currentUserId?: string;
+  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
+  onResolveComment?: (commentId: string) => void;
+  onReopenComment?: (commentId: string) => void;
+  onAddReply?: (commentId: string, body: string) => void;
+  onEditBody?: (commentId: string, body: string) => void;
+}) {
+  const { thread, isActive } = props;
+  const leadEntry = thread.entries[0];
+  const isDraftThread = thread.status === "open" && thread.entryCount === 1 && isEmptyCommentBody(leadEntry?.body);
+  const isOwnComment = props.currentUserId != null && leadEntry?.authorId === props.currentUserId;
+  const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
+  const hasNoBody = isEmptyCommentBody(leadEntry?.body);
+  const showExcerpt = Boolean(thread.excerpt) && !isDraftThread && thread.excerpt !== "Empty thread";
 
-                {/* Show reply entries */}
-                {thread.entries.slice(1).map((entry) => (
-                  <div key={entry.entryId} className="mt-2 pl-2 border-l border-border">
-                    <p className="text-xs text-tertiary">{entry.authorId} · {entry.createdAt}</p>
-                    <p className="text-sm text-secondary leading-relaxed">{entry.body}</p>
-                  </div>
-                ))}
+  const scrollRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node && isActive && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    },
+    [isActive],
+  );
 
-                {thread.entryCount > thread.entries.length ? (
-                  <p className="text-xs text-tertiary mt-1.5">
-                    +{thread.entryCount - thread.entries.length} more repl{thread.entryCount - thread.entries.length === 1 ? "y" : "ies"}
-                  </p>
-                ) : null}
+  return (
+    <div
+      ref={scrollRef}
+      data-comment-thread-id={thread.commentId}
+      data-comment-thread-status={thread.status}
+      role="button"
+      tabIndex={0}
+      className={[
+        "cursor-pointer rounded-lg border px-2 py-1.5 transition-colors",
+        focusRingClass,
+        isActive
+          ? "border-accent/25 bg-accent-soft/35"
+          : "border-border bg-canvas hover:border-border-strong hover:bg-surface/70",
+        thread.status === "detached" ? "opacity-70" : "",
+      ].join(" ")}
+      onClick={() => props.onOpenComment?.(thread)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          props.onOpenComment?.(thread);
+        }
+      }}
+    >
+      {/* Header row: avatar + author + date + status */}
+      <div className="mb-1 flex items-center gap-1.5">
+        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-accent/10 text-[8px] font-semibold text-accent">
+          {thread.createdBy.charAt(0).toUpperCase()}
+        </span>
+        <span className="truncate text-[10px] font-medium text-primary">{thread.createdBy}</span>
+        <span data-comment-thread-created-at="true" className="text-[9px] text-tertiary">
+          {formatCommentDate(thread.createdAt)}
+        </span>
+        <span className="flex-1" />
+        {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
+        {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
+        {thread.status === "detached" ? <StatusBadge label="detached" tone="detached" /> : null}
+      </div>
 
-                {thread.resolvedAt && thread.resolvedBy ? (
-                  <p className="text-xs text-tertiary mt-1">
-                    Resolved by {thread.resolvedBy} at {thread.resolvedAt}
-                  </p>
-                ) : null}
+      {/* 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 whitespace-pre-wrap break-words line-clamp-2">
+          {thread.excerpt}
+        </p>
+      ) : null}
 
-                <div className="flex gap-1.5 mt-2">
-                  {thread.status === "open" ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        props.onResolveComment?.(thread.commentId);
-                      }}
-                    >
-                      <Check className="h-3 w-3" /> Resolve
-                    </button>
-                  ) : thread.status === "resolved" ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-secondary hover:bg-surface transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        props.onReopenComment?.(thread.commentId);
-                      }}
-                    >
-                      Reopen
-                    </button>
-                  ) : (
-                    <span className="text-xs text-tertiary px-2 py-1">Detached</span>
-                  )}
-                </div>
+      {/* Comment body */}
+      {canEdit && (isActive || hasNoBody) ? (
+        <InlineEditableBody
+          body={leadEntry?.body ?? ""}
+          autoFocus={isActive && hasNoBody}
+          onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
+          label={isDraftThread ? "New comment" : undefined}
+        />
+      ) : leadEntry?.body ? (
+        <p
+          className="text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4"
+          data-comment-thread-body="true"
+        >
+          {leadEntry.body}
+        </p>
+      ) : canEdit ? (
+        <p
+          className="cursor-text text-[10px] italic text-tertiary"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onOpenComment?.(thread);
+          }}
+        >
+          New comment
+        </p>
+      ) : null}
 
-                {/* Reply input — only for open threads */}
-                {thread.status === "open" && props.onAddReply ? (
-                  <ReplyInput commentId={thread.commentId} onAddReply={props.onAddReply} />
-                ) : null}
-              </div>
-            );
-          })}
+      {/* Reply entries (compact) */}
+      {thread.entries.slice(1).map((entry) => (
+        <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 whitespace-pre-wrap break-words line-clamp-3"
+            data-comment-reply-body="true"
+          >
+            {entry.body}
+          </p>
         </div>
-      ) : (
-        <p className="text-xs text-tertiary py-4">
-          Comment threads will appear here when the runtime loads them.
+      ))}
+
+      {thread.entryCount > thread.entries.length ? (
+        <p className="mt-1 text-[9px] text-tertiary">
+          +{thread.entryCount - thread.entries.length} more
         </p>
-      )}
+      ) : null}
+
+      {/* Inline actions — compact, horizontal */}
+      <div className="mt-1 flex items-center gap-0.5">
+        {thread.status === "open" && (
+          <>
+            <button
+              type="button"
+              className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-insert hover:bg-insert-soft transition-colors"
+              onClick={(e) => { e.stopPropagation(); props.onResolveComment?.(thread.commentId); }}
+            >
+              <Check className="h-2 w-2" /> Resolve
+            </button>
+            {props.onAddReply && (
+              <ReplyInput commentId={thread.commentId} onAddReply={props.onAddReply} />
+            )}
+          </>
+        )}
+        {thread.status === "resolved" && (
+          <button
+            type="button"
+            className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-secondary hover:bg-surface transition-colors"
+            data-comment-thread-action="reopen"
+            onClick={(e) => { e.stopPropagation(); props.onReopenComment?.(thread.commentId); }}
+          >
+            <RotateCcw className="h-2 w-2" /> Reopen
+          </button>
+        )}
+        {thread.status === "detached" && (
+          <span className="text-[9px] text-comment">Detached</span>
+        )}
+      </div>
     </div>
   );
 }
 
 function InlineEditableBody(props: {
-  commentId: string;
   body: string;
+  autoFocus?: boolean;
+  label?: string;
   onSave: (newBody: string) => void;
 }) {
-  const [isEditing, setIsEditing] = useState(false);
+  const [isEditing, setIsEditing] = useState(props.autoFocus || props.body === "");
   const [draft, setDraft] = useState(props.body);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(draft.length, draft.length);
+    }
+  }, [isEditing]);
 
   if (!isEditing) {
     return (
       <p
-        className="text-sm text-secondary leading-relaxed cursor-text rounded px-1 -mx-1 hover:bg-surface transition-colors"
+        className={`cursor-text rounded px-1 text-[10px] leading-[1.15rem] -mx-1 transition-colors hover:bg-surface ${props.body ? "text-secondary" : "text-tertiary italic"}`}
         onClick={(e) => {
           e.stopPropagation();
           setDraft(props.body);
@@ -153,68 +241,84 @@ function InlineEditableBody(props: {
         }}
         title="Click to edit"
       >
-        {props.body}
+        {props.body || "Click to add comment\u2026"}
       </p>
     );
   }
 
   return (
-    <textarea
-      className="w-full text-sm text-primary leading-relaxed bg-surface rounded-md border border-border px-2 py-1.5 resize-none focus:outline-none focus:ring-1 focus:ring-accent"
-      rows={Math.max(2, props.body.split("\n").length)}
-      value={draft}
-      autoFocus
-      onClick={(e) => e.stopPropagation()}
-      onChange={(e) => setDraft(e.target.value)}
-      onBlur={() => {
-        if (draft.trim() && draft.trim() !== props.body) {
-          props.onSave(draft.trim());
-        }
-        setIsEditing(false);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
+    <div className="space-y-1">
+      {props.label ? (
+        <span className="block text-[10px] font-medium uppercase tracking-[0.08em] text-tertiary">
+          {props.label}
+        </span>
+      ) : null}
+      <textarea
+        ref={textareaRef}
+        className="w-full resize-none rounded-md border border-border bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
+        rows={2}
+        value={draft}
+        placeholder="Type your comment..."
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={() => {
           if (draft.trim() && draft.trim() !== props.body) {
             props.onSave(draft.trim());
           }
           setIsEditing(false);
-        }
-        if (e.key === "Escape") {
-          setDraft(props.body);
-          setIsEditing(false);
-        }
-        e.stopPropagation();
-      }}
-    />
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (draft.trim() && draft.trim() !== props.body) {
+              props.onSave(draft.trim());
+            }
+            setIsEditing(false);
+          }
+          if (e.key === "Escape") {
+            setDraft(props.body);
+            setIsEditing(false);
+          }
+          e.stopPropagation();
+        }}
+      />
+    </div>
   );
 }
 
 function ReplyInput(props: { commentId: string; onAddReply: (commentId: string, body: string) => void }) {
   const [body, setBody] = useState("");
   const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
 
   if (!isOpen) {
     return (
       <button
         type="button"
-        className="inline-flex items-center gap-1 text-xs text-tertiary hover:text-secondary transition-colors mt-1"
+        className="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-tertiary hover:text-secondary hover:bg-surface transition-colors"
         onClick={(e) => {
           e.stopPropagation();
           setIsOpen(true);
         }}
       >
-        <MessageSquarePlus className="h-3 w-3" /> Reply
+        <CornerDownRight className="h-2.5 w-2.5" /> Reply
       </button>
     );
   }
 
   return (
-    <div className="mt-2" onClick={(e) => e.stopPropagation()}>
+    <div className="w-full mt-1.5" onClick={(e) => e.stopPropagation()}>
       <textarea
-        className="w-full rounded-md border border-border bg-surface px-2 py-1.5 text-xs text-primary placeholder:text-tertiary resize-none focus:outline-none focus:ring-1 focus:ring-accent"
+        ref={inputRef}
+        className="w-full rounded border border-border bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary resize-none focus:outline-none focus:ring-1 focus:ring-accent"
         rows={2}
-        placeholder="Write a reply..."
+        placeholder="Reply..."
         value={body}
         onChange={(e) => setBody(e.target.value)}
         onKeyDown={(e) => {
@@ -230,13 +334,12 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
           }
           e.stopPropagation();
         }}
-        autoFocus
       />
-      <div className="flex gap-1.5 mt-1">
+      <div className="flex gap-1 mt-0.5">
         <button
           type="button"
           disabled={!body.trim()}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-accent hover:bg-accent-soft transition-colors disabled:opacity-40"
+          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-accent hover:bg-accent-soft transition-colors disabled:opacity-40"
           onClick={() => {
             if (body.trim()) {
               props.onAddReply(props.commentId, body.trim());
@@ -245,15 +348,12 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
             }
           }}
         >
-          Reply
+          Send
         </button>
         <button
           type="button"
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-tertiary hover:bg-surface transition-colors"
-          onClick={() => {
-            setBody("");
-            setIsOpen(false);
-          }}
+          className="rounded px-1.5 py-0.5 text-[10px] text-tertiary hover:bg-surface transition-colors"
+          onClick={() => { setBody(""); setIsOpen(false); }}
         >
           Cancel
         </button>
@@ -262,15 +362,45 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
   );
 }
 
-function StatusBadge(props: { status: string }) {
+function formatCommentDate(raw: string): string {
+  try {
+    const date = new Date(raw);
+    if (Number.isNaN(date.getTime())) return raw;
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 60000);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHours = Math.floor(diffMin / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+    }).format(date);
+  } catch {
+    return raw;
+  }
+}
+
+function StatusBadge(props: { label: string; tone: "resolved" | "detached" | "draft" }) {
   const styles: Record<string, string> = {
-    open: "text-accent bg-accent-soft",
     resolved: "text-insert bg-insert-soft",
     detached: "text-comment bg-warning-soft",
+    draft: "text-secondary bg-subtle",
   };
   return (
-    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>
-      {props.status}
+    <span
+      className={`shrink-0 rounded px-1 py-px text-[8px] font-medium uppercase tracking-[0.08em] ${styles[props.tone] ?? "text-secondary bg-subtle"}`}
+      data-comment-thread-badge={props.tone}
+    >
+      {props.label}
     </span>
   );
 }
+
+function isEmptyCommentBody(body: string | undefined): boolean {
+  return !body || body.trim() === "";
+}

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>