fix(review): gutter hover button not rendering + update @pierre/diffs to 1.1.20 (#630)

The renderHoverUtility callback was gating on getHoveredLine() during
React render, but Pierre updates hover state imperatively — so the
button was permanently null. Always render the button; call
getHoveredLine() only in the click handler. Also aligned button
sizing/colors with Pierre's own [data-utility-button] spec.

For provenance purposes, this commit was AI assisted.

Author: backnotprop

bun.lock

@@ -36,7 +36,7 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.92",
     "@openai/codex-sdk": "^0.118.0",
     "@opencode-ai/sdk": "^1.3.0",
-    "@pierre/diffs": "^1.1.12",
+    "@pierre/diffs": "^1.1.20",
     "diff": "^8.0.4",
     "dockview-react": "^5.2.0",
     "dompurify": "^3.3.3",

package.json

@@ -497,16 +497,19 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     );
   }, [filePath, onSelectAnnotation, handleEdit, onDeleteAnnotation, onClickAIMarker]);
 
-  // Render hover utility (+ button)
+  // Render hover utility (+ button).
+  // Pierre manages visibility imperatively — it inserts/removes the slot
+  // container on line hover. We must always return a button; calling
+  // getHoveredLine() to gate rendering would return stale data because
+  // Pierre's hover state changes don't trigger React re-renders.
   const renderHoverUtility = useCallback((getHoveredLine: () => { lineNumber: number; side: 'deletions' | 'additions' } | undefined) => {
-    const line = getHoveredLine();
-    if (!line) return null;
-
     return (
       <button
         className="hover-add-comment"
         onClick={(e) => {
           e.stopPropagation();
+          const line = getHoveredLine();
+          if (!line) return;
           toolbar.handleLineSelectionEnd({
             start: line.lineNumber,
             end: line.lineNumber,

packages/review-editor/components/DiffViewer.tsx

@@ -241,26 +241,30 @@ diffs-container {
   background: oklch(from var(--primary) l c h / 0.3) !important;
 }
 
-/* Hover utility button (GitHub-style +) */
+/* Hover utility button — matches Pierre's [data-utility-button] sizing */
 .hover-add-comment {
+  appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 0.25rem;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-size: 0.75rem;
-  font-weight: 600;
+  width: 1lh;
+  height: 1lh;
+  font-size: var(--diffs-font-size, 13px);
+  line-height: var(--diffs-line-height, 20px);
+  border: none;
+  border-radius: 4px;
+  background-color: var(--diffs-modified-base);
+  color: var(--diffs-bg);
+  fill: currentColor;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 150ms;
+  position: relative;
+  z-index: 4;
+  padding: 0;
+  margin-right: calc(1ch - 1lh);
 }
 
 .hover-add-comment:hover {
-  opacity: 1;
-  background: oklch(0.70 0.20 280);
+  filter: brightness(1.2);
 }
 
 /* File tree styling */