@beyondwork/docx-react-component 1.0.0

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

@@ -0,0 +1,108 @@
+/**
+ * ProseMirror NodeView implementations for table nodes.
+ *
+ * These NodeViews render table structure as proper HTML tables with
+ * colspan/rowspan support for merged cells (from gridSpan/verticalMerge attrs).
+ *
+ * Usage with EditorView:
+ *   new EditorView(mount, {
+ *     nodeViews: tableNodeViews,
+ *     ...
+ *   })
+ */
+
+import type { Node as PMNode } from "prosemirror-model";
+
+/**
+ * NodeView for the table node.
+ * Renders as <table><tbody>...</tbody></table>.
+ * ProseMirror places row content into the tbody via contentDOM.
+ */
+export class TableNodeView {
+  dom: HTMLElement;
+  contentDOM: HTMLElement;
+
+  constructor(_node: PMNode) {
+    const table = document.createElement("table");
+    table.className = "border-collapse w-full my-2 text-sm";
+
+    const tbody = document.createElement("tbody");
+    table.appendChild(tbody);
+
+    this.dom = table;
+    this.contentDOM = tbody;
+  }
+}
+
+/**
+ * NodeView for table_row nodes.
+ * Renders as <tr>...</tr>.
+ */
+export class TableRowNodeView {
+  dom: HTMLElement;
+  contentDOM: HTMLElement;
+
+  constructor(_node: PMNode) {
+    const tr = document.createElement("tr");
+    this.dom = tr;
+    this.contentDOM = tr;
+  }
+}
+
+/**
+ * NodeView for table_cell and table_header_cell nodes.
+ *
+ * Applies colspan/rowspan from node attrs (mapped from gridSpan/verticalMerge
+ * in the OOXML model). Distinguishes header cells by tableRole spec attribute.
+ */
+export class TableCellNodeView {
+  dom: HTMLElement;
+  contentDOM: HTMLElement;
+
+  constructor(node: PMNode) {
+    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
+    const cell = document.createElement(isHeader ? "th" : "td");
+
+    cell.className = isHeader
+      ? "border border-primary/20 p-2 align-top font-semibold bg-surface-raised"
+      : "border border-primary/20 p-2 align-top";
+
+    const colspan = node.attrs.colspan as number;
+    const rowspan = node.attrs.rowspan as number;
+    if (colspan > 1) (cell as HTMLTableCellElement).colSpan = colspan;
+    if (rowspan > 1) (cell as HTMLTableCellElement).rowSpan = rowspan;
+
+    this.dom = cell;
+    this.contentDOM = cell;
+  }
+
+  /**
+   * Update the DOM when the node's attrs change (e.g., after a merge/split operation).
+   * Return false to let ProseMirror rebuild the node view from scratch.
+   */
+  update(node: PMNode): boolean {
+    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
+    const expectedTag = isHeader ? "TH" : "TD";
+    if (this.dom.tagName !== expectedTag) return false;
+
+    const colspan = node.attrs.colspan as number;
+    const rowspan = node.attrs.rowspan as number;
+    const cell = this.dom as HTMLTableCellElement;
+    cell.colSpan = colspan > 1 ? colspan : 1;
+    cell.rowSpan = rowspan > 1 ? rowspan : 1;
+    return true;
+  }
+}
+
+/**
+ * NodeView factory map for use with EditorView.nodeViews.
+ *
+ * Pass this object directly to the EditorView constructor options:
+ *   new EditorView(mount, { nodeViews: tableNodeViews, ... })
+ */
+export const tableNodeViews = {
+  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

@@ -0,0 +1,61 @@
+// Workspace shell
+export { TwReviewWorkspace, type TwReviewWorkspaceProps } from "./tw-review-workspace";
+
+// Editor surface
+export { TwEditorSurface, type TwEditorSurfaceProps } from "./editor-surface/tw-editor-surface";
+export { TwParagraphBlock } from "./editor-surface/tw-paragraph-block";
+export { TwOpaqueBlock } from "./editor-surface/tw-opaque-block";
+export { TwSegmentView } from "./editor-surface/tw-segment-view";
+export { TwInlineToken } from "./editor-surface/tw-inline-token";
+export { renderTwCaret } from "./editor-surface/tw-caret";
+
+// Review rail
+export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./review/tw-review-rail";
+export { TwCommentSidebar } from "./review/tw-comment-sidebar";
+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 { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
+
+// Status
+export { TwStatusBar } from "./status/tw-status-bar";
+
+// Chrome
+export { TwAlertBanner } from "./chrome/tw-alert-banner";
+export { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
+
+// Session capabilities
+export {
+  deriveCapabilities,
+  type SessionCapabilities,
+} from "../runtime/session-capabilities";
+
+// Headless (re-export for convenience)
+export {
+  createCommentDecorationModel,
+  getCommentHighlightClass,
+  getCommentRangeState,
+  type CommentDecorationModel,
+  type MarkupDisplay,
+} from "../ui/headless/comment-decoration-model";
+
+export {
+  createRevisionDecorationModel,
+  getRevisionHighlightClass,
+  getRevisionRangeState,
+  shouldHideInCleanMode,
+  type RevisionDecorationModel,
+} from "../ui/headless/revision-decoration-model";
+
+export {
+  createEditorKeyboardHandler,
+  type EditorKeyboardCallbacks,
+  type EditorKeyboardContext,
+} from "../ui/headless/use-editor-keyboard";
+
+export {
+  createSelectionSnapshot,
+  selectionTouchesRange,
+} from "../ui/headless/selection-helpers";

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

@@ -0,0 +1,276 @@
+import React, { useRef, useState } from "react";
+import { Check, MessageSquarePlus } from "lucide-react";
+
+import type { CommentSidebarSnapshot, CommentSidebarThreadSnapshot } from "../../api/public-types";
+
+export interface TwCommentSidebarProps {
+  comments: CommentSidebarSnapshot;
+  activeCommentId?: string;
+  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 focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwCommentSidebar(props: TwCommentSidebarProps) {
+  const { comments, activeCommentId, currentUserId } = props;
+
+  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>
+      {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>
+
+                {/* 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}
+
+                {/* 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>
+                ))}
+
+                {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}
+
+                {thread.resolvedAt && thread.resolvedBy ? (
+                  <p className="text-xs text-tertiary mt-1">
+                    Resolved by {thread.resolvedBy} at {thread.resolvedAt}
+                  </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>
+
+                {/* Reply input — only for open threads */}
+                {thread.status === "open" && props.onAddReply ? (
+                  <ReplyInput commentId={thread.commentId} onAddReply={props.onAddReply} />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-tertiary py-4">
+          Comment threads will appear here when the runtime loads them.
+        </p>
+      )}
+    </div>
+  );
+}
+
+function InlineEditableBody(props: {
+  commentId: string;
+  body: string;
+  onSave: (newBody: string) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(props.body);
+
+  if (!isEditing) {
+    return (
+      <p
+        className="text-sm text-secondary leading-relaxed cursor-text rounded px-1 -mx-1 hover:bg-surface transition-colors"
+        onClick={(e) => {
+          e.stopPropagation();
+          setDraft(props.body);
+          setIsEditing(true);
+        }}
+        title="Click to edit"
+      >
+        {props.body}
+      </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();
+          if (draft.trim() && draft.trim() !== props.body) {
+            props.onSave(draft.trim());
+          }
+          setIsEditing(false);
+        }
+        if (e.key === "Escape") {
+          setDraft(props.body);
+          setIsEditing(false);
+        }
+        e.stopPropagation();
+      }}
+    />
+  );
+}
+
+function ReplyInput(props: { commentId: string; onAddReply: (commentId: string, body: string) => void }) {
+  const [body, setBody] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!isOpen) {
+    return (
+      <button
+        type="button"
+        className="inline-flex items-center gap-1 text-xs text-tertiary hover:text-secondary transition-colors mt-1"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(true);
+        }}
+      >
+        <MessageSquarePlus className="h-3 w-3" /> Reply
+      </button>
+    );
+  }
+
+  return (
+    <div className="mt-2" 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"
+        rows={2}
+        placeholder="Write a reply..."
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey && body.trim()) {
+            e.preventDefault();
+            props.onAddReply(props.commentId, body.trim());
+            setBody("");
+            setIsOpen(false);
+          }
+          if (e.key === "Escape") {
+            setBody("");
+            setIsOpen(false);
+          }
+          e.stopPropagation();
+        }}
+        autoFocus
+      />
+      <div className="flex gap-1.5 mt-1">
+        <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"
+          onClick={() => {
+            if (body.trim()) {
+              props.onAddReply(props.commentId, body.trim());
+              setBody("");
+              setIsOpen(false);
+            }
+          }}
+        >
+          Reply
+        </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);
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge(props: { status: string }) {
+  const styles: Record<string, string> = {
+    open: "text-accent bg-accent-soft",
+    resolved: "text-insert bg-insert-soft",
+    detached: "text-comment bg-warning-soft",
+  };
+  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>
+  );
+}

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

@@ -0,0 +1,120 @@
+import React from "react";
+import { AlertTriangle, Info, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+
+import type {
+  CompatibilityFeatureEntry,
+  CompatibilityPanelSnapshot,
+  EditorWarning,
+} from "../../api/public-types";
+
+export interface TwHealthPanelProps {
+  compatibility: CompatibilityPanelSnapshot;
+  warnings: EditorWarning[];
+}
+
+export function TwHealthPanel(props: TwHealthPanelProps) {
+  const { compatibility, warnings } = props;
+  const supportedCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "supported-roundtrip",
+  ).length;
+  const preserveOnlyCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "preserve-only",
+  ).length;
+  const blockedCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "unsupported-fatal",
+  ).length;
+
+  return (
+    <div className="outline-none">
+      <p className="text-xs text-tertiary mb-3">
+        {supportedCount} supported · {preserveOnlyCount} preserve-only · {blockedCount} blocked
+        {warnings.length > 0 ? ` · ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : ""}
+      </p>
+
+      <div className="space-y-1">
+        {compatibility.featureEntries.map((entry) => (
+          <div key={entry.featureEntryId} className="flex rounded-lg transition-colors hover:bg-surface">
+            {entry.featureClass !== "supported-roundtrip" ? (
+              <div className={`w-0.5 shrink-0 rounded-l-lg ${
+                entry.featureClass === "unsupported-fatal" ? "bg-danger" : "bg-comment"
+              }`} />
+            ) : null}
+            <div className="flex items-start gap-2 p-2.5 flex-1">
+              <HealthIcon featureClass={entry.featureClass} />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between gap-2">
+                  <span className="text-sm font-medium text-primary">{entry.message}</span>
+                  <FeatureClassBadge featureClass={entry.featureClass} />
+                </div>
+                <p className="text-xs text-tertiary mt-0.5">{entry.featureKey}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {warnings.map((warning) => (
+          <div key={warning.warningId} className="flex rounded-lg transition-colors hover:bg-surface">
+            <div className={`w-0.5 shrink-0 rounded-l-lg ${
+              warning.severity === "warning" ? "bg-comment" : "bg-accent"
+            }`} />
+            <div className="flex items-start gap-2 p-2.5 flex-1">
+              {warning.severity === "warning" ? (
+                <AlertTriangle className="h-4 w-4 text-comment shrink-0 mt-0.5" />
+              ) : (
+                <Info className="h-4 w-4 text-accent 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">{warning.message}</span>
+                  <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${
+                    warning.severity === "warning"
+                      ? "text-comment bg-warning-soft"
+                      : "text-accent bg-accent-soft"
+                  }`}>
+                    {warning.code.replace(/_/g, " ")}
+                  </span>
+                </div>
+                <p className="text-xs text-tertiary mt-0.5">{warning.source}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {compatibility.featureEntries.length === 0 && warnings.length === 0 ? (
+          <p className="text-xs text-tertiary py-4">
+            No compatibility entries or warnings to display.
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function HealthIcon(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
+  switch (props.featureClass) {
+    case "supported-roundtrip":
+      return <ShieldCheck className="h-4 w-4 text-insert shrink-0 mt-0.5" />;
+    case "preserve-only":
+      return <Shield className="h-4 w-4 text-comment shrink-0 mt-0.5" />;
+    case "unsupported-fatal":
+      return <ShieldAlert className="h-4 w-4 text-danger shrink-0 mt-0.5" />;
+  }
+}
+
+function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
+  const styles: Record<string, string> = {
+    "supported-roundtrip": "text-insert bg-insert-soft",
+    "preserve-only": "text-comment bg-warning-soft",
+    "unsupported-fatal": "text-danger bg-delete-soft",
+  };
+  const labels: Record<string, string> = {
+    "supported-roundtrip": "supported",
+    "preserve-only": "preserve-only",
+    "unsupported-fatal": "blocked",
+  };
+  return (
+    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass]}`}>
+      {labels[props.featureClass]}
+    </span>
+  );
+}

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

@@ -0,0 +1,120 @@
+import React from "react";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+
+import type {
+  CommentSidebarSnapshot,
+  CommentSidebarThreadSnapshot,
+  CompatibilityPanelSnapshot,
+  EditorWarning,
+  TrackedChangesSnapshot,
+  TrackedChangeEntrySnapshot,
+} from "../../api/public-types";
+import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import { TwCommentSidebar } from "./tw-comment-sidebar";
+import { TwRevisionSidebar } from "./tw-revision-sidebar";
+import { TwHealthPanel } from "./tw-health-panel";
+
+export type ReviewRailTab = "comments" | "changes";
+
+export interface TwReviewRailProps {
+  activeTab: ReviewRailTab;
+  currentUserId?: string;
+  comments: CommentSidebarSnapshot;
+  trackedChanges: TrackedChangesSnapshot;
+  compatibility: CompatibilityPanelSnapshot;
+  warnings: EditorWarning[];
+  markupDisplay: MarkupDisplay;
+  activeCommentId?: string;
+  activeRevisionId?: string;
+  onActiveTabChange: (tab: ReviewRailTab) => void;
+  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
+  onResolveComment?: (commentId: string) => void;
+  onReopenComment?: (commentId: string) => void;
+  onAddReply?: (commentId: string, body: string) => void;
+  onEditBody?: (commentId: string, body: string) => void;
+  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onAcceptRevision?: (revisionId: string) => void;
+  onRejectRevision?: (revisionId: string) => void;
+  onAcceptAllChanges?: () => void;
+  onRejectAllChanges?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwReviewRail(props: TwReviewRailProps) {
+  const warningCount = props.compatibility.featureEntries.filter(
+    (e) => e.featureClass !== "supported-roundtrip",
+  ).length + props.warnings.length;
+
+  return (
+    <aside
+      aria-label="Review rail"
+      className="flex w-[340px] shrink-0 flex-col border-l border-border bg-canvas"
+    >
+      <Tabs.Root
+        value={props.activeTab}
+        onValueChange={(v: string) => props.onActiveTabChange(v as ReviewRailTab)}
+        className="flex flex-1 flex-col min-h-0"
+      >
+        <Tabs.List className="flex shrink-0 border-b border-border">
+          <Tabs.Trigger
+            value="comments"
+            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+          >
+            Comments{" "}
+            <span className="text-tertiary">{props.comments.totalCount}</span>
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            value="changes"
+            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+          >
+            Changes{" "}
+            <span className="text-tertiary">{props.trackedChanges.totalCount}</span>
+          </Tabs.Trigger>
+          {/* Health moved to toolbar popover */}
+        </Tabs.List>
+
+        <ScrollArea.Root className="flex-1 min-h-0">
+          <ScrollArea.Viewport className="h-full w-full">
+            <Tabs.Content value="comments" className="p-3 outline-none">
+              <TwCommentSidebar
+                currentUserId={props.currentUserId}
+                comments={props.comments}
+                activeCommentId={props.activeCommentId}
+                onOpenComment={props.onOpenComment}
+                onResolveComment={props.onResolveComment}
+                onReopenComment={props.onReopenComment}
+                onAddReply={props.onAddReply}
+                onEditBody={props.onEditBody}
+              />
+            </Tabs.Content>
+
+            <Tabs.Content value="changes" className="p-3 outline-none">
+              <TwRevisionSidebar
+                trackedChanges={props.trackedChanges}
+                markupDisplay={props.markupDisplay}
+                activeRevisionId={props.activeRevisionId}
+                onOpenRevision={props.onOpenRevision}
+                onAcceptRevision={props.onAcceptRevision}
+                onRejectRevision={props.onRejectRevision}
+                onAcceptAllChanges={props.onAcceptAllChanges}
+                onRejectAllChanges={props.onRejectAllChanges}
+              />
+            </Tabs.Content>
+
+            {/* Health panel moved to toolbar popover */}
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar
+            orientation="vertical"
+            className="flex w-1.5 touch-none select-none p-0.5"
+          >
+            <ScrollArea.Thumb className="relative flex-1 rounded-full bg-black/[0.12]" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      </Tabs.Root>
+    </aside>
+  );
+}