collabmd 0.1.20 → 0.1.23

package/src/client/presentation/comment-ui-controller.js

@@ -9,6 +9,10 @@ const COMMENT_CARD_WIDTH = 520;
 const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 const COMMENT_SELECTION_CHIP_GAP = 12;
 const COMMENT_CONTROL_SLOT_HEIGHT = 36;
+const COMMENT_PREVIEW_BADGE_MIN_WIDTH = 28;
+const COMMENT_PREVIEW_RAIL_SLOT_HEIGHT = 30;
+const COMMENT_PREVIEW_RAIL_MIN_WIDTH = 400;
+const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
@@ -248,6 +252,25 @@ function createRectFromRects(rects = []) {
   };
 }
 
+function pointIntersectsRect(x, y, rect) {
+  if (!rect) {
+    return false;
+  }
+
+  return x >= rect.left
+    && x <= rect.right
+    && y >= rect.top
+    && y <= rect.bottom;
+}
+
+function normalizeGroupKeys(keys = []) {
+  return [...new Set(keys.filter(Boolean))].sort();
+}
+
+function serializeGroupKeys(keys = []) {
+  return normalizeGroupKeys(keys).join(' ');
+}
+
 function createCommentMarkerContent(count) {
   const fragment = document.createDocumentFragment();
 
@@ -315,6 +338,12 @@ export class CommentUiController {
     this.pointerSelecting = false;
     this.session = null;
     this.activeCard = null;
+    this.hoveredEditorGroupKeys = [];
+    this.hoveredEditorGroupKeysSignature = '';
+    this.hoveredPreviewGroupKeys = [];
+    this.hoveredPreviewGroupKeysSignature = '';
+    this.previewHoverRegions = [];
+    this.lastPreviewPointerPosition = null;
     this.editorLayer = null;
     this.previewLayer = null;
     this.previewHighlightLayer = null;
@@ -331,6 +360,20 @@ export class CommentUiController {
     this.handleEditorScroll = () => this.scheduleLayoutRefresh();
     this.handlePreviewScroll = () => this.scheduleLayoutRefresh();
     this.handleWindowResize = () => this.scheduleLayoutRefresh();
+    this.handlePreviewPointerMove = (event) => {
+      this.lastPreviewPointerPosition = { x: event.clientX, y: event.clientY };
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysAtPoint(event.clientX, event.clientY));
+    };
+    this.handlePreviewPointerLeave = () => {
+      this.lastPreviewPointerPosition = null;
+      this.updateHoveredPreviewGroups([]);
+    };
+    this.handlePreviewFocusIn = (event) => {
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.target));
+    };
+    this.handlePreviewFocusOut = (event) => {
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.relatedTarget));
+    };
     this.handleCommentSelectionButtonPointerDown = (event) => {
       event.preventDefault();
     };
@@ -436,6 +479,10 @@ export class CommentUiController {
       this.setDrawerOpen(!this.drawerOpen);
     });
     this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true });
+    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave);
+    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn);
+    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut);
     this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown);
     this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut);
     window.addEventListener('resize', this.handleWindowResize);
@@ -452,6 +499,10 @@ export class CommentUiController {
     }
     this.attachSession(null);
     this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
+    this.previewElement?.removeEventListener('pointermove', this.handlePreviewPointerMove);
+    this.previewElement?.removeEventListener('pointerleave', this.handlePreviewPointerLeave);
+    this.previewElement?.removeEventListener('focusin', this.handlePreviewFocusIn);
+    this.previewElement?.removeEventListener('focusout', this.handlePreviewFocusOut);
     this.commentSelectionButton?.removeEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
     this.editorContainer?.removeEventListener('pointerdown', this.handleEditorPointerDown);
     this.editorContainer?.removeEventListener('focusout', this.handleEditorFocusOut);
@@ -460,6 +511,7 @@ export class CommentUiController {
     document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
     document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    this.previewHoverRegions = [];
     this.cardRoot?.remove();
     this.editorLayer?.remove();
     this.previewLayer?.remove();
@@ -493,6 +545,10 @@ export class CommentUiController {
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
       this.activeCard = null;
+      this.updateHoveredEditorGroups([]);
+      this.updateHoveredPreviewGroups([]);
+      this.previewHoverRegions = [];
+      this.lastPreviewPointerPosition = null;
       this.reactionPicker = null;
     }
     if (!this.supported) {
@@ -504,6 +560,10 @@ export class CommentUiController {
       this.committedSelectionAnchor = null;
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
+      this.updateHoveredEditorGroups([]);
+      this.updateHoveredPreviewGroups([]);
+      this.previewHoverRegions = [];
+      this.lastPreviewPointerPosition = null;
       this.reactionPicker = null;
     }
     this.render();
@@ -611,6 +671,51 @@ export class CommentUiController {
     this.repositionActiveCard();
   }
 
+  syncPreviewRailLayout(maxBubbleWidth = 0) {
+    if (!this.previewElement) {
+      return false;
+    }
+
+    const shouldShowRail = this.supported && maxBubbleWidth > 0;
+    const nextReserved = 0;
+    const nextOffset = 0;
+    let reserved = nextReserved;
+    let offset = nextOffset;
+
+    if (shouldShowRail) {
+      const previewStyle = getComputedStyle(this.previewElement);
+      const currentReserved = Number.parseFloat(
+        previewStyle.getPropertyValue('--preview-comment-rail-reserved'),
+      ) || 0;
+      const currentPaddingRight = Number.parseFloat(previewStyle.paddingRight) || 0;
+      const railInset = Number.parseFloat(
+        previewStyle.getPropertyValue('--preview-comment-rail-inset'),
+      ) || 0;
+      const basePaddingRight = Math.max(currentPaddingRight - currentReserved, 0);
+      const requiredRail = Math.max(maxBubbleWidth + railInset - basePaddingRight, 0);
+      const previewContainerRect = this.previewContainer?.getBoundingClientRect();
+      const previewRect = this.previewElement.getBoundingClientRect();
+      const availableRightGutter = previewContainerRect
+        ? Math.max(previewContainerRect.right - previewRect.right, 0)
+        : 0;
+
+      offset = Math.min(availableRightGutter, requiredRail);
+      reserved = Math.max(requiredRail - offset, 0);
+    }
+
+    const nextReservedValue = `${Math.ceil(reserved)}px`;
+    const nextOffsetValue = `${Math.floor(offset)}px`;
+    const didChange = this.previewElement.style.getPropertyValue('--preview-comment-rail-reserved') !== nextReservedValue
+      || this.previewElement.style.getPropertyValue('--preview-comment-rail-offset') !== nextOffsetValue;
+
+    if (didChange) {
+      this.previewElement.style.setProperty('--preview-comment-rail-reserved', nextReservedValue);
+      this.previewElement.style.setProperty('--preview-comment-rail-offset', nextOffsetValue);
+    }
+
+    return didChange;
+  }
+
   scheduleLayoutRefresh() {
     if (this.layoutFrame) {
       return;
@@ -641,7 +746,7 @@ export class CommentUiController {
       this.commentsToggleButton.classList.toggle('active', this.drawerOpen);
       this.commentsToggleButton.setAttribute('aria-expanded', String(this.drawerOpen));
       const label = totalCount > 0 ? `Comments ${totalCount}` : 'Comments';
-      const labelElement = this.commentsToggleButton.querySelector('.pane-header-btn-label');
+      const labelElement = this.commentsToggleButton.querySelector('.ui-action-label');
       if (labelElement) {
         labelElement.textContent = label;
       } else {
@@ -667,7 +772,7 @@ export class CommentUiController {
     groups.forEach((group) => {
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'comments-drawer-item';
+      button.className = 'ui-record-surface comments-drawer-item';
       button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
       button.addEventListener('pointerdown', (event) => {
         event.preventDefault();
@@ -681,14 +786,14 @@ export class CommentUiController {
       });
 
       const header = document.createElement('div');
-      header.className = 'comments-drawer-item-header';
+      header.className = 'ui-record-header comments-drawer-item-header';
 
       const title = document.createElement('span');
       title.className = 'comments-drawer-item-title';
       title.textContent = formatAnchorLabel(group.anchor);
 
       const count = document.createElement('span');
-      count.className = 'comments-drawer-item-count';
+      count.className = 'ui-pill-badge ui-pill-badge--count ui-pill-badge--accent comments-drawer-item-count';
       count.textContent = String(group.threads.length);
 
       header.append(title, count);
@@ -704,7 +809,7 @@ export class CommentUiController {
       );
 
       const footer = document.createElement('div');
-      footer.className = 'comments-drawer-item-footer';
+      footer.className = 'ui-record-meta comments-drawer-item-footer';
       const countLabel = document.createElement('span');
       countLabel.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
 
@@ -757,11 +862,19 @@ export class CommentUiController {
       }
 
       const relativeRect = toRelativeRect(rect, containerRect);
+      if (relativeRect.bottom < 0 || relativeRect.top > containerRect.height) {
+        return;
+      }
+
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'comment-editor-badge';
+      button.className = 'ui-state-marker ui-state-marker--comment comment-editor-badge';
       button.dataset.count = String(group.threads.length);
-      button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
+      const isActive = this.activeCard?.groupKey === group.key;
+      const isHovered = this.hoveredEditorGroupKeys.includes(group.key);
+      button.classList.toggle('is-active', isActive);
+      button.classList.toggle('is-hovered', isHovered);
+      button.classList.toggle('is-passive', !isActive && !isHovered);
       button.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
       button.appendChild(createCommentMarkerContent(group.threads.length));
       const top = Math.max(relativeRect.top, 8);
@@ -771,6 +884,18 @@ export class CommentUiController {
       button.addEventListener('pointerdown', (event) => {
         event.preventDefault();
       });
+      button.addEventListener('pointerenter', () => {
+        this.updateHoveredEditorGroups([group.key]);
+      });
+      button.addEventListener('pointerleave', () => {
+        this.updateHoveredEditorGroups([]);
+      });
+      button.addEventListener('focusin', () => {
+        this.updateHoveredEditorGroups([group.key]);
+      });
+      button.addEventListener('focusout', () => {
+        this.updateHoveredEditorGroups([]);
+      });
       button.addEventListener('click', () => {
         this.openThreadGroup(group, {
           anchor: group.anchor,
@@ -807,7 +932,7 @@ export class CommentUiController {
     }
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'comment-selection-chip';
+    button.className = 'ui-selection-pill ui-selection-pill--comment comment-selection-chip';
     button.textContent = 'Comment';
     button.style.top = `${chipTop}px`;
     button.style.right = `${COMMENT_SELECTION_CHIP_GAP}px`;
@@ -840,20 +965,38 @@ export class CommentUiController {
     this.previewHighlightLayer?.replaceChildren();
 
     if (!this.supported || !this.previewElement) {
+      this.previewHoverRegions = [];
+      this.syncPreviewRailLayout(0);
       return;
     }
 
     const previewRect = this.previewElement.getBoundingClientRect();
     const groups = this.getThreadGroups();
+    const occupiedTops = [];
+    const hoverRegions = [];
+    const showPassiveMarkers = this.shouldRenderPassivePreviewMarkers();
+    const previewBubbles = [];
     groups.forEach((group) => {
       const target = this.resolvePreviewTarget(group.anchor);
       if (!target?.bubbleRect) {
         return;
       }
 
+      hoverRegions.push({
+        key: group.key,
+        rects: target.hoverRects?.length > 0 ? target.hoverRects : [target.bubbleRect],
+      });
+
+      const isActive = this.activeCard?.groupKey === group.key;
+      const isHovered = this.hoveredPreviewGroupKeys.includes(group.key);
+      const isEmphasized = isActive || isHovered;
+
       target.highlightRects?.forEach((rect) => {
         const highlight = document.createElement('div');
         highlight.className = 'comment-preview-highlight';
+        highlight.classList.toggle('is-active', isActive);
+        highlight.classList.toggle('is-hovered', isHovered);
+        highlight.classList.toggle('is-passive', !isEmphasized);
         highlight.style.left = `${rect.left - previewRect.left}px`;
         highlight.style.top = `${rect.top - previewRect.top}px`;
         highlight.style.width = `${rect.width}px`;
@@ -861,14 +1004,32 @@ export class CommentUiController {
         this.previewHighlightLayer?.appendChild(highlight);
       });
 
+      if (!showPassiveMarkers && !isEmphasized) {
+        return;
+      }
+
       const bubble = document.createElement('button');
       bubble.type = 'button';
-      bubble.className = 'comment-preview-badge';
-      bubble.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
+      bubble.className = 'ui-state-marker ui-state-marker--comment comment-preview-badge';
+      bubble.dataset.commentPreviewGroupKeys = group.key;
+      bubble.classList.toggle('is-active', isActive);
+      bubble.classList.toggle('is-hovered', isHovered);
+      bubble.classList.toggle('is-passive', !isEmphasized);
       bubble.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
       bubble.appendChild(createCommentMarkerContent(group.threads.length));
-      bubble.style.left = `${clamp(target.bubbleRect.right - previewRect.left + 6, 6, this.previewElement.clientWidth - 34)}px`;
-      bubble.style.top = `${Math.max(target.bubbleRect.top - previewRect.top, 6)}px`;
+      let bubbleTop = clamp(
+        target.bubbleRect.top - previewRect.top,
+        6,
+        Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
+      );
+      while (occupiedTops.some((top) => Math.abs(top - bubbleTop) < (COMMENT_PREVIEW_RAIL_SLOT_HEIGHT - 4))) {
+        bubbleTop = clamp(
+          bubbleTop + COMMENT_PREVIEW_RAIL_SLOT_HEIGHT,
+          6,
+          Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
+        );
+      }
+      bubble.style.top = `${bubbleTop}px`;
       bubble.title = `${group.threads.length} comment${group.threads.length === 1 ? '' : 's'}`;
       bubble.addEventListener('pointerdown', (event) => {
         event.preventDefault();
@@ -877,11 +1038,27 @@ export class CommentUiController {
         this.openThreadGroup(group, {
           anchor: group.anchor,
           origin: 'preview',
-          sourceRect: target.bubbleRect,
+          sourceRect: bubble.getBoundingClientRect(),
         });
       });
       this.previewLayer?.appendChild(bubble);
+      occupiedTops.push(bubbleTop);
+      previewBubbles.push(bubble);
     });
+
+    this.previewHoverRegions = hoverRegions;
+    const maxBubbleWidth = previewBubbles.reduce(
+      (maxWidth, bubble) => Math.max(maxWidth, bubble.offsetWidth || COMMENT_PREVIEW_BADGE_MIN_WIDTH),
+      0,
+    );
+    if (this.syncPreviewRailLayout(maxBubbleWidth)) {
+      this.scheduleLayoutRefresh();
+    }
+    if (this.lastPreviewPointerPosition) {
+      this.updateHoveredPreviewGroups(
+        this.getPreviewGroupKeysAtPoint(this.lastPreviewPointerPosition.x, this.lastPreviewPointerPosition.y),
+      );
+    }
   }
 
   resolvePreviewTarget(anchor) {
@@ -895,6 +1072,7 @@ export class CommentUiController {
       return {
         bubbleRect: diagramShell.getBoundingClientRect(),
         highlightRects: [],
+        hoverRects: [diagramShell.getBoundingClientRect()],
       };
     }
 
@@ -911,6 +1089,7 @@ export class CommentUiController {
         return {
           bubbleRect,
           highlightRects: rects,
+          hoverRects: rects,
         };
       }
     }
@@ -923,6 +1102,7 @@ export class CommentUiController {
     return {
       bubbleRect: fallback.getBoundingClientRect(),
       highlightRects: [],
+      hoverRects: [fallback.getBoundingClientRect()],
     };
   }
 
@@ -1056,7 +1236,7 @@ export class CommentUiController {
     });
 
     const header = document.createElement('div');
-    header.className = 'comment-card-header';
+    header.className = 'ui-record-header comment-card-header';
 
     const titleWrap = document.createElement('div');
     titleWrap.className = 'comment-card-title-wrap';
@@ -1073,7 +1253,7 @@ export class CommentUiController {
 
     const closeButton = document.createElement('button');
     closeButton.type = 'button';
-    closeButton.className = 'comment-card-close';
+    closeButton.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-card-close';
     closeButton.setAttribute('aria-label', 'Close comments');
     closeButton.textContent = 'Close';
     closeButton.addEventListener('click', () => this.closeCard());
@@ -1115,6 +1295,69 @@ export class CommentUiController {
     this.scheduleLayoutRefresh();
   }
 
+  getPreviewGroupKeysForTarget(target) {
+    if (!(target instanceof Node)) {
+      return [];
+    }
+
+    const keyCarrier = target.closest?.('[data-comment-preview-group-keys]');
+    return serializeGroupKeys(
+      String(keyCarrier?.dataset?.commentPreviewGroupKeys ?? '')
+        .split(/\s+/)
+        .filter(Boolean),
+    ).split(' ').filter(Boolean);
+  }
+
+  getPreviewGroupKeysAtPoint(x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+      return [];
+    }
+
+    const targetAtPoint = document.elementFromPoint(x, y);
+    const targetKeys = this.getPreviewGroupKeysForTarget(targetAtPoint);
+    if (targetKeys.length > 0) {
+      return targetKeys;
+    }
+
+    const matchingKeys = this.previewHoverRegions
+      .filter((region) => region.rects.some((rect) => pointIntersectsRect(x, y, rect)))
+      .map((region) => region.key);
+    return normalizeGroupKeys(matchingKeys);
+  }
+
+  updateHoveredPreviewGroups(nextKeys = []) {
+    const normalizedKeys = normalizeGroupKeys(nextKeys);
+    const signature = normalizedKeys.join(' ');
+    if (signature === this.hoveredPreviewGroupKeysSignature) {
+      return;
+    }
+
+    this.hoveredPreviewGroupKeys = normalizedKeys;
+    this.hoveredPreviewGroupKeysSignature = signature;
+    this.scheduleLayoutRefresh();
+  }
+
+  updateHoveredEditorGroups(nextKeys = []) {
+    const normalizedKeys = normalizeGroupKeys(nextKeys);
+    const signature = normalizedKeys.join(' ');
+    if (signature === this.hoveredEditorGroupKeysSignature) {
+      return;
+    }
+
+    this.hoveredEditorGroupKeys = normalizedKeys;
+    this.hoveredEditorGroupKeysSignature = signature;
+    this.scheduleLayoutRefresh();
+  }
+
+  syncHoveredPreviewGroupsFromTarget(target) {
+    this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(target));
+  }
+
+  shouldRenderPassivePreviewMarkers() {
+    const previewWidth = this.previewContainer?.clientWidth ?? this.previewElement?.clientWidth ?? 0;
+    return window.innerWidth >= COMMENT_PREVIEW_RAIL_BREAKPOINT && previewWidth >= COMMENT_PREVIEW_RAIL_MIN_WIDTH;
+  }
+
   updateReactionPickerPosition(card) {
     const bounds = getReactionPickerBounds(card);
     if (!bounds) {
@@ -1166,17 +1409,17 @@ export class CommentUiController {
     textarea.placeholder = 'Add context, feedback, or a question...';
 
     const actions = document.createElement('div');
-    actions.className = 'comment-card-actions';
+    actions.className = 'ui-record-actions comment-card-actions';
 
     const cancel = document.createElement('button');
     cancel.type = 'button';
-    cancel.className = 'btn btn-secondary';
+    cancel.className = 'ui-button btn btn-secondary';
     cancel.textContent = 'Cancel';
     cancel.addEventListener('click', () => this.closeCard());
 
     const submit = document.createElement('button');
     submit.type = 'submit';
-    submit.className = 'btn btn-primary';
+    submit.className = 'ui-button btn btn-primary';
     submit.textContent = 'Post comment';
 
     actions.append(cancel, submit);
@@ -1205,7 +1448,7 @@ export class CommentUiController {
     article.className = 'comment-thread-card';
 
     const header = document.createElement('div');
-    header.className = 'comment-thread-card-header';
+    header.className = 'ui-record-header comment-thread-card-header';
 
     const heading = document.createElement('div');
     heading.className = 'comment-thread-card-heading';
@@ -1219,17 +1462,17 @@ export class CommentUiController {
     time.textContent = this.formatTimestamp(thread.createdAt);
 
     const actions = document.createElement('div');
-    actions.className = 'comment-thread-card-actions';
+    actions.className = 'ui-record-actions comment-thread-card-actions';
 
     const jump = document.createElement('button');
     jump.type = 'button';
-    jump.className = 'comment-thread-card-action';
+    jump.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action';
     jump.textContent = 'Jump';
     jump.addEventListener('click', () => this.onNavigateToLine?.(thread.anchor?.startLine ?? 1));
 
     const reply = document.createElement('button');
     reply.type = 'button';
-    reply.className = 'comment-thread-card-action';
+    reply.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action';
     const isReplying = this.activeCard?.replyThreadId === thread.id;
     reply.classList.toggle('is-active', isReplying);
     reply.textContent = 'Reply';
@@ -1246,7 +1489,7 @@ export class CommentUiController {
 
     const resolve = document.createElement('button');
     resolve.type = 'button';
-    resolve.className = 'comment-thread-card-action is-danger';
+    resolve.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action is-danger';
     resolve.textContent = 'Resolve';
     resolve.addEventListener('click', async () => {
       await this.onResolveThread?.(thread.id);
@@ -1274,7 +1517,7 @@ export class CommentUiController {
     container.className = 'comment-message-card';
 
     const meta = document.createElement('div');
-    meta.className = 'comment-message-card-meta';
+    meta.className = 'ui-record-meta comment-message-card-meta';
 
     const author = document.createElement('span');
     author.className = 'comment-message-card-author';
@@ -1308,7 +1551,7 @@ export class CommentUiController {
     (message.reactions ?? []).forEach((reaction) => {
       const chip = document.createElement('button');
       chip.type = 'button';
-      chip.className = 'comment-reaction-chip';
+      chip.className = 'ui-chip-button ui-chip-button--comment comment-reaction-chip';
       chip.classList.toggle('is-active', hasLocalReaction(reaction, localUserId));
       chip.setAttribute('aria-pressed', String(hasLocalReaction(reaction, localUserId)));
       chip.title = reaction.users?.map((user) => user.userName).join(', ') || reaction.emoji;
@@ -1342,7 +1585,7 @@ export class CommentUiController {
 
     const moreButton = document.createElement('button');
     moreButton.type = 'button';
-    moreButton.className = 'comment-reaction-more-trigger';
+    moreButton.className = 'ui-chip-button ui-chip-button--comment comment-reaction-more-trigger';
     moreButton.dataset.reactionPickerToggle = 'true';
     moreButton.setAttribute('aria-expanded', String(
       isReactionPickerOpen(this.reactionPicker, thread.id, message.id),
@@ -1373,7 +1616,7 @@ export class CommentUiController {
   createQuickReactionButton(thread, message, emoji) {
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'comment-reaction-quick-add';
+    button.className = 'ui-icon-chip ui-icon-chip--comment comment-reaction-quick-add';
     button.textContent = emoji;
     button.title = `React with ${emoji}`;
     button.addEventListener('click', async () => {
@@ -1398,7 +1641,7 @@ export class CommentUiController {
   createReactionPickerButton(thread, message, emoji) {
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'comment-reaction-picker-btn';
+    button.className = 'ui-icon-chip ui-icon-chip--comment comment-reaction-picker-btn';
     button.textContent = emoji;
     button.title = `React with ${emoji}`;
     button.addEventListener('click', async () => {
@@ -1422,11 +1665,11 @@ export class CommentUiController {
     textarea.placeholder = 'Reply to thread...';
 
     const actions = document.createElement('div');
-    actions.className = 'comment-card-actions';
+    actions.className = 'ui-record-actions comment-card-actions';
 
     const cancel = document.createElement('button');
     cancel.type = 'button';
-    cancel.className = 'btn btn-secondary';
+    cancel.className = 'ui-button btn btn-secondary';
     cancel.textContent = 'Cancel';
     cancel.addEventListener('click', () => {
       this.activeCard = {
@@ -1438,7 +1681,7 @@ export class CommentUiController {
 
     const submit = document.createElement('button');
     submit.type = 'submit';
-    submit.className = 'btn btn-primary';
+    submit.className = 'ui-button btn btn-primary';
     submit.textContent = 'Reply';
 
     actions.append(cancel, submit);

package/src/client/presentation/comments-panel.js

@@ -463,7 +463,7 @@ export class CommentsPanel {
 
     const cancelButton = document.createElement('button');
     cancelButton.type = 'button';
-    cancelButton.className = 'btn btn-secondary';
+    cancelButton.className = 'ui-button btn btn-secondary';
     cancelButton.textContent = 'Cancel';
     cancelButton.addEventListener('click', () => {
       this.replyDraftThreadId = null;
@@ -472,7 +472,7 @@ export class CommentsPanel {
 
     const submitButton = document.createElement('button');
     submitButton.type = 'submit';
-    submitButton.className = 'btn btn-primary';
+    submitButton.className = 'ui-button btn btn-primary';
     submitButton.textContent = 'Reply';
 
     actions.append(cancelButton, submitButton);