collabmd 0.1.21 → 0.1.23

package/src/client/infrastructure/editor-view-adapter.js

@@ -340,8 +340,8 @@ export class EditorViewAdapter {
     };
   }
 
-  initialize({ awareness, filePath, undoManager, ytext }) {
-    const updateListener = EditorView.updateListener.of((update) => {
+  createUpdateListener() {
+    return EditorView.updateListener.of((update) => {
       if (update.docChanged) {
         this.onDocChanged?.();
       }
@@ -351,62 +351,99 @@ export class EditorViewAdapter {
         this.onSelectionChanged?.(update.state);
       }
     });
+  }
 
-    const loadingIndicator = this.editorContainer.querySelector('#editorLoading');
+  getBaseExtensions(filePath, { readOnly = false } = {}) {
+    const extensions = [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightSpecialChars(),
+      history(),
+      foldGutter(),
+      drawSelection(),
+      EditorState.allowMultipleSelections.of(true),
+      indentOnInput(),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      bracketMatching({ renderMatch: renderBracketMatch }),
+      closeBrackets(),
+      autocompletion({
+        override: [wikiLinkCompletions(this.getFileList)],
+      }),
+      rectangularSelection(),
+      crosshairCursor(),
+      highlightActiveLine(),
+      highlightSelectionMatches(),
+      keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        ...foldKeymap,
+        indentWithTab,
+      ]),
+      EditorView.contentAttributes.of({
+        'aria-label': 'Markdown editor',
+      }),
+      createLanguageExtension(filePath),
+      this.themeCompartment.of(createEditorTheme(this.initialTheme)),
+      this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
+      this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
+      remoteUpdateFlashField,
+      this.createUpdateListener(),
+    ];
+
+    if (readOnly) {
+      extensions.push(EditorState.readOnly.of(true));
+      extensions.push(EditorView.editable.of(false));
+      return extensions;
+    }
+
+    extensions.splice(13, 0, Prec.highest(EditorView.domEventHandlers({
+      paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
+    })));
+    return extensions;
+  }
+
+  clearEditorDom({ preserveLoadingIndicator = true } = {}) {
+    if (!this.editorContainer) {
+      return;
+    }
+
+    const loadingIndicator = preserveLoadingIndicator
+      ? this.editorContainer.querySelector('#editorLoading')
+      : null;
     Array.from(this.editorContainer.children).forEach((child) => {
       if (child !== loadingIndicator) {
         child.remove();
       }
     });
+  }
+
+  teardownEditorView({ clearContainer = false } = {}) {
+    this.editorView?.contentDOM?.removeEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('paste', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('compositionstart', this.handleLocalInputActivity);
+    this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
+    this.editorView?.destroy();
+    this.editorView = null;
+
+    if (clearContainer && this.editorContainer) {
+      this.editorContainer.innerHTML = '';
+      delete this.editorContainer.dataset.editorMode;
+    }
+  }
+
+  mountEditor(state, { editorMode = 'collaborative', preserveScrollTop = 0 } = {}) {
+    this.clearEditorDom({ preserveLoadingIndicator: true });
+    this.teardownEditorView();
 
     this.editorView = new EditorView({
       parent: this.editorContainer,
-      state: EditorState.create({
-        doc: ytext.toString(),
-        extensions: [
-          lineNumbers(),
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          foldGutter(),
-          drawSelection(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching({ renderMatch: renderBracketMatch }),
-          closeBrackets(),
-          autocompletion({
-            override: [wikiLinkCompletions(this.getFileList)],
-          }),
-          rectangularSelection(),
-          crosshairCursor(),
-          highlightActiveLine(),
-          highlightSelectionMatches(),
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...historyKeymap,
-            ...searchKeymap,
-            ...foldKeymap,
-            indentWithTab,
-          ]),
-          EditorView.contentAttributes.of({
-            'aria-label': 'Markdown editor',
-          }),
-          Prec.highest(EditorView.domEventHandlers({
-            paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
-          })),
-          createLanguageExtension(filePath),
-          this.themeCompartment.of(createEditorTheme(this.initialTheme)),
-          this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
-          this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
-          remoteUpdateFlashField,
-          yCollab(ytext, awareness, { undoManager }),
-          updateListener,
-        ],
-      }),
+      state,
     });
 
+    this.editorContainer.dataset.editorMode = editorMode;
     this.editorView.scrollDOM.addEventListener('scroll', this.handleScroll, { passive: true });
     this.editorView.contentDOM.addEventListener('beforeinput', this.handleLocalInputActivity);
     this.editorView.contentDOM.addEventListener('keydown', this.handleLocalInputActivity);
@@ -415,6 +452,43 @@ export class EditorViewAdapter {
     this.updateCursorInfo(this.editorView.state);
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
+
+    if (preserveScrollTop > 0) {
+      requestAnimationFrame(() => {
+        if (this.editorView?.scrollDOM) {
+          this.editorView.scrollDOM.scrollTop = preserveScrollTop;
+        }
+      });
+    }
+  }
+
+  initialize({ awareness, filePath, undoManager, ytext }) {
+    const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    const state = EditorState.create({
+      doc: ytext.toString(),
+      extensions: [
+        ...this.getBaseExtensions(filePath),
+        yCollab(ytext, awareness, { undoManager }),
+      ],
+    });
+
+    this.mountEditor(state, {
+      editorMode: 'collaborative',
+      preserveScrollTop,
+    });
+  }
+
+  initializeProvisional({ content = '', filePath }) {
+    const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    const state = EditorState.create({
+      doc: String(content ?? ''),
+      extensions: this.getBaseExtensions(filePath, { readOnly: true }),
+    });
+
+    this.mountEditor(state, {
+      editorMode: 'provisional',
+      preserveScrollTop,
+    });
   }
 
   destroy() {
@@ -426,17 +500,7 @@ export class EditorViewAdapter {
       clearTimeout(this.remoteUpdateFlashTimer);
       this.remoteUpdateFlashTimer = 0;
     }
-    this.editorView?.contentDOM?.removeEventListener('beforeinput', this.handleLocalInputActivity);
-    this.editorView?.contentDOM?.removeEventListener('keydown', this.handleLocalInputActivity);
-    this.editorView?.contentDOM?.removeEventListener('paste', this.handleLocalInputActivity);
-    this.editorView?.contentDOM?.removeEventListener('compositionstart', this.handleLocalInputActivity);
-    this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
-    this.editorView?.destroy();
-    this.editorView = null;
-
-    if (this.editorContainer) {
-      this.editorContainer.innerHTML = '';
-    }
+    this.teardownEditorView({ clearContainer: true });
   }
 
   getText() {

package/src/client/infrastructure/runtime-config.js

@@ -30,6 +30,36 @@ function normalizeDiffScope(scope) {
 export function getHashRoute() {
   const params = getHashParams();
 
+  if (params.has('git-file-preview')) {
+    const historicalFilePath = params.get('git-file-preview') || null;
+    return {
+      currentFilePath: params.get('current') || historicalFilePath,
+      filePath: historicalFilePath,
+      hash: params.get('hash') || null,
+      type: 'git-file-preview',
+    };
+  }
+
+  if (params.has('git-file-history')) {
+    return {
+      filePath: params.get('git-file-history') || null,
+      type: 'git-file-history',
+    };
+  }
+
+  if (params.has('git-history')) {
+    return { type: 'git-history' };
+  }
+
+  if (params.has('git-commit')) {
+    return {
+      hash: params.get('git-commit') || null,
+      historyFilePath: params.get('history') || null,
+      path: params.get('path') || null,
+      type: 'git-commit',
+    };
+  }
+
   if (params.has('git-diff')) {
     const filePath = params.get('git-diff') || null;
     return {
@@ -63,3 +93,39 @@ export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {
   params.set('scope', normalizeDiffScope(scope));
   window.location.hash = params.toString();
 }
+
+export function navigateToGitCommit({ hash, path = null, historyFilePath = null } = {}) {
+  const normalizedHash = String(hash ?? '').trim();
+  const params = new URLSearchParams();
+  params.set('git-commit', normalizedHash);
+  if (historyFilePath) {
+    params.set('history', historyFilePath);
+  }
+  if (path) {
+    params.set('path', path);
+  }
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitHistory() {
+  const params = new URLSearchParams();
+  params.set('git-history', '1');
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitFileHistory({ filePath } = {}) {
+  const params = new URLSearchParams();
+  params.set('git-file-history', filePath ?? '');
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitFilePreview({ hash, path, currentFilePath = null } = {}) {
+  const normalizedHash = String(hash ?? '').trim();
+  const params = new URLSearchParams();
+  params.set('git-file-preview', path ?? '');
+  if (currentFilePath) {
+    params.set('current', currentFilePath);
+  }
+  params.set('hash', normalizedHash);
+  window.location.hash = params.toString();
+}

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

@@ -9,6 +9,7 @@ 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;
@@ -670,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;
@@ -700,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 {
@@ -726,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();
@@ -740,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);
@@ -763,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'}`;
 
@@ -822,7 +868,7 @@ export class CommentUiController {
 
       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);
       const isActive = this.activeCard?.groupKey === group.key;
       const isHovered = this.hoveredEditorGroupKeys.includes(group.key);
@@ -886,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`;
@@ -920,6 +966,7 @@ export class CommentUiController {
 
     if (!this.supported || !this.previewElement) {
       this.previewHoverRegions = [];
+      this.syncPreviewRailLayout(0);
       return;
     }
 
@@ -928,6 +975,7 @@ export class CommentUiController {
     const occupiedTops = [];
     const hoverRegions = [];
     const showPassiveMarkers = this.shouldRenderPassivePreviewMarkers();
+    const previewBubbles = [];
     groups.forEach((group) => {
       const target = this.resolvePreviewTarget(group.anchor);
       if (!target?.bubbleRect) {
@@ -962,7 +1010,7 @@ export class CommentUiController {
 
       const bubble = document.createElement('button');
       bubble.type = 'button';
-      bubble.className = 'comment-preview-badge';
+      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);
@@ -995,9 +1043,17 @@ export class CommentUiController {
       });
       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),
@@ -1180,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';
@@ -1197,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());
@@ -1353,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);
@@ -1392,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';
@@ -1406,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';
@@ -1433,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);
@@ -1461,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';
@@ -1495,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;
@@ -1529,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),
@@ -1560,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 () => {
@@ -1585,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 () => {
@@ -1609,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 = {
@@ -1625,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);