@beyondwork/docx-react-component 1.0.28 → 1.0.29

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

@@ -1,406 +0,0 @@
-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-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.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>
-  );
-}
-
-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-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>
-
-      {/* 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}
-
-      {/* 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-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>
-      ))}
-
-      {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: {
-  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={`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);
-          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 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);
-        }}
-        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:text-secondary hover:bg-surface 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 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="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

@@ -1,149 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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-[304px] 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 px-2">
-          <Tabs.Trigger
-            value="comments"
-            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
-          >
-            Comments{" "}
-            <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>
-          </Tabs.Trigger>
-          <Tabs.Trigger
-            value="changes"
-            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
-          >
-            Changes{" "}
-            <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>
-          </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-2.5 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-2.5 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>
-  );
-}