@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,406 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Check, CornerDownRight, RotateCcw } 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">
+      <div className="mb-3 flex items-center gap-2 text-[11px] 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-2">
+          {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 bg-surface px-3 py-3 text-[11px] leading-5 text-tertiary ring-1 ring-border/40">
+          No comment threads yet. Select text and add one from the toolbar.
+        </div>
+      )}
+    </div>
+  );
+}
+
+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";
+
+  const scrollRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node && isActive && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    },
+    [isActive],
+  );
+
+  return (
+    <div
+      ref={scrollRef}
+      data-comment-thread-id={thread.commentId}
+      data-comment-thread-status={thread.status}
+      role="button"
+      tabIndex={0}
+      className={[
+        "cursor-pointer rounded-md bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
+        focusRingClass,
+        isActive
+          ? "bg-accent-soft/40 ring-accent/25"
+          : "hover:bg-surface",
+        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.5 flex items-center gap-1.5">
+        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-subtle text-[8px] font-semibold text-secondary">
+          {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>
+
+      {/* Excerpt — anchored text from document */}
+      {showExcerpt ? (
+        <p className="mb-1.5 rounded-md bg-comment-soft px-2 py-1 text-[9px] leading-4 text-secondary italic whitespace-pre-wrap break-words line-clamp-2">
+          {thread.excerpt}
+        </p>
+      ) : null}
+
+      {/* 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 entries (compact) */}
+      {thread.entries.slice(1).map((entry) => (
+        <div key={entry.entryId} className="mt-2 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>
+      ))}
+
+      {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-2 flex items-center gap-1">
+        {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-accent hover:bg-accent-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-hover 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: {
+  body: string;
+  autoFocus?: boolean;
+  label?: string;
+  onSave: (newBody: string) => void;
+}) {
+  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={`-mx-1 cursor-text rounded px-1 text-[10px] leading-[1.15rem] transition-colors hover:bg-surface ${props.body ? "text-secondary" : "text-tertiary italic"}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          setDraft(props.body);
+          setIsEditing(true);
+        }}
+        title="Click to edit"
+      >
+        {props.body || "Click to add comment\u2026"}
+      </p>
+    );
+  }
+
+  return (
+    <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 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 ring-1 ring-border/50"
+        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);
+        }}
+        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-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-tertiary hover:bg-surface-hover hover:text-secondary transition-colors"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(true);
+        }}
+      >
+        <CornerDownRight className="h-2.5 w-2.5" /> Reply
+      </button>
+    );
+  }
+
+  return (
+    <div className="w-full mt-1.5" onClick={(e) => e.stopPropagation()}>
+      <textarea
+        ref={inputRef}
+        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
+        rows={2}
+        placeholder="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();
+        }}
+      />
+      <div className="flex gap-1 mt-0.5">
+        <button
+          type="button"
+          disabled={!body.trim()}
+          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());
+              setBody("");
+              setIsOpen(false);
+            }
+          }}
+        >
+          Send
+        </button>
+        <button
+          type="button"
+          className="rounded px-1.5 py-0.5 text-[10px] text-tertiary hover:bg-surface transition-colors"
+          onClick={() => { setBody(""); setIsOpen(false); }}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+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> = {
+    resolved: "text-insert bg-insert-soft",
+    detached: "text-comment bg-warning-soft",
+    draft: "text-secondary bg-subtle",
+  };
+  return (
+    <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

@@ -0,0 +1,149 @@
+import React from "react";
+import { AlertTriangle, Info, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+
+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, blockedReasons = [] } = 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>
+        ))}
+
+        {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>
+        ) : 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,130 @@
+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,
+  RuntimeContextAnalyticsSnapshot,
+  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";
+
+export type ReviewRailTab = "comments" | "changes";
+
+export interface TwReviewRailProps {
+  activeTab: ReviewRailTab;
+  variant?: "docked" | "drawer";
+  currentUserId?: string;
+  comments: CommentSidebarSnapshot;
+  trackedChanges: TrackedChangesSnapshot;
+  compatibility: CompatibilityPanelSnapshot;
+  warnings: EditorWarning[];
+  markupDisplay: MarkupDisplay;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+  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 variant = props.variant ?? "docked";
+  return (
+    <aside
+      aria-label="Review rail"
+      data-wre-drawer={variant === "drawer" ? "true" : "false"}
+      className={[
+        "flex flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]",
+        variant === "drawer"
+          ? "h-full w-[min(336px,calc(100vw-1rem))] max-w-full shrink-0 shadow-[0_18px_40px_-22px_var(--color-shadow-strong)]"
+          : "w-[336px] shrink-0",
+      ].join(" ")}
+    >
+      <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/60 px-3 py-2">
+          <Tabs.Trigger
+            value="comments"
+            className={`flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`}
+          >
+            Comments{" "}
+            {props.comments.totalCount > 0 ? (
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">
+                {props.comments.totalCount}
+              </span>
+            ) : null}
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            value="changes"
+            className={`flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`}
+          >
+            Changes{" "}
+            {props.trackedChanges.totalCount > 0 ? (
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">
+                {props.trackedChanges.totalCount}
+              </span>
+            ) : null}
+          </Tabs.Trigger>
+        </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>
+          </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-[color:color-mix(in_srgb,var(--color-secondary)_18%,transparent)]" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      </Tabs.Root>
+    </aside>
+  );
+}