feat(review): add dockview center workspace (#453)

* chore(review): add dockview-react dependency

* feat(review): add dockview center workspace

* fix(review): stabilize diff search navigation

* feat(review): add progressive file search UI

* feat(review): streamline header controls

* fix(review): portal annotation toolbar

* refactor(review): streamline header and action menus

* fix(review): make file header responsive

* fix(review): align split diff drag handle

* chore(review): hide review agents sidebar

* fix(review): remount diff viewer on file switch

* fix(review): wrap inline diff comments

Author: backnotprop

AGENTS.md

@@ -62,7 +62,8 @@ plannotator/
 │   ├── editor/                   # Plan review App.tsx
 │   └── review-editor/            # Code review UI
 │       ├── App.tsx               # Main review app
-│       ├── components/           # DiffViewer, FileTree, ReviewPanel
+│       ├── components/           # DiffViewer, FileTree, ReviewSidebar
+│       ├── dock/                 # Dockview center panel infrastructure
 │       ├── demoData.ts           # Demo diff for standalone mode
 │       └── index.css             # Review-specific styles
 ├── .claude-plugin/marketplace.json  # For marketplace install

bun.lock

@@ -38,6 +38,7 @@
     "@opencode-ai/sdk": "^1.3.0",
     "@pierre/diffs": "^1.1.0-beta.19",
     "diff": "^8.0.3",
+    "dockview-react": "^5.2.0",
     "dompurify": "^3.3.3",
     "marked": "^17.0.5"
   },

package.json

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { ToolbarState } from '../hooks/useAnnotationToolbar';
 import { useTabIndent } from '../hooks/useTabIndent';
 import { formatLineRange } from '../utils/formatLineRange';
@@ -81,7 +82,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
     onCancel(); // close the whole toolbar
   };
 
-  return (
+  const content = (
     <div
       ref={toolbarRef}
       className="review-toolbar"
@@ -216,4 +217,10 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
       )}
     </div>
   );
+
+  if (typeof document === 'undefined') {
+    return content;
+  }
+
+  return createPortal(content, document.body);
 };

packages/review-editor/App.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useEffect, useLayoutEffect, useCallback, useState } from 'react';
-import { FileDiff } from '@pierre/diffs/react';
+import { FileDiff, type DiffLineAnnotation } from '@pierre/diffs/react';
 import { getSingularPatch, processFile } from '@pierre/diffs';
 import { CodeAnnotation, CodeAnnotationType, SelectedLineRange, DiffAnnotationMetadata } from '@plannotator/ui/types';
 import { useTheme } from '@plannotator/ui/components/ThemeProvider';
@@ -22,10 +22,86 @@ import {
   swapActiveSearchHighlight,
 } from '../utils/reviewSearchHighlight';
 
+interface PierreDiffContentProps {
+  filePath: string;
+  fileDiff: ReturnType<typeof getSingularPatch>;
+  pierreTheme: { type: 'dark' | 'light'; css: string };
+  diffStyle: 'split' | 'unified';
+  diffOverflow?: 'scroll' | 'wrap';
+  diffIndicators?: 'bars' | 'classic' | 'none';
+  lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
+  disableLineNumbers?: boolean;
+  disableBackground?: boolean;
+  mergedAnnotations: DiffLineAnnotation<DiffAnnotationMetadata>[];
+  pendingSelection: SelectedLineRange | null;
+  onLineSelectionEnd: (range: SelectedLineRange | null) => void;
+  renderAnnotation: (annotation: { side: string; lineNumber: number; metadata?: DiffAnnotationMetadata }) => React.ReactNode;
+  renderHoverUtility: (getHoveredLine: () => { lineNumber: number; side: 'deletions' | 'additions' } | undefined) => React.ReactNode;
+}
+
+const PierreDiffContent = React.memo(({
+  filePath,
+  fileDiff,
+  pierreTheme,
+  diffStyle,
+  diffOverflow,
+  diffIndicators,
+  lineDiffType,
+  disableLineNumbers,
+  disableBackground,
+  mergedAnnotations,
+  pendingSelection,
+  onLineSelectionEnd,
+  renderAnnotation,
+  renderHoverUtility,
+}: PierreDiffContentProps) => {
+  return (
+    <FileDiff
+      key={filePath}
+      fileDiff={fileDiff}
+      options={{
+        themeType: pierreTheme.type,
+        unsafeCSS: pierreTheme.css,
+        diffStyle,
+        overflow: diffOverflow,
+        diffIndicators,
+        lineDiffType,
+        disableLineNumbers,
+        disableBackground,
+        hunkSeparators: 'line-info',
+        enableLineSelection: true,
+        enableHoverUtility: true,
+        onLineSelectionEnd,
+      }}
+      lineAnnotations={mergedAnnotations}
+      selectedLines={pendingSelection || undefined}
+      renderAnnotation={renderAnnotation}
+      renderHoverUtility={renderHoverUtility}
+    />
+  );
+}, (prev, next) => (
+  prev.filePath === next.filePath &&
+  prev.fileDiff === next.fileDiff &&
+  prev.pierreTheme.type === next.pierreTheme.type &&
+  prev.pierreTheme.css === next.pierreTheme.css &&
+  prev.diffStyle === next.diffStyle &&
+  prev.diffOverflow === next.diffOverflow &&
+  prev.diffIndicators === next.diffIndicators &&
+  prev.lineDiffType === next.lineDiffType &&
+  prev.disableLineNumbers === next.disableLineNumbers &&
+  prev.disableBackground === next.disableBackground &&
+  prev.mergedAnnotations === next.mergedAnnotations &&
+  prev.pendingSelection === next.pendingSelection &&
+  prev.onLineSelectionEnd === next.onLineSelectionEnd &&
+  prev.renderAnnotation === next.renderAnnotation &&
+  prev.renderHoverUtility === next.renderHoverUtility
+));
+
 interface DiffViewerProps {
   patch: string;
   filePath: string;
   oldPath?: string;
+  isFocused?: boolean;
   diffStyle: 'split' | 'unified';
   diffOverflow?: 'scroll' | 'wrap';
   diffIndicators?: 'bars' | 'classic' | 'none';
@@ -69,6 +145,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   patch,
   filePath,
   oldPath,
+  isFocused = false,
   diffStyle,
   diffOverflow,
   diffIndicators = 'bars',
@@ -107,6 +184,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
 }) => {
   const { theme, colorTheme, resolvedMode } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
+  const splitSurfaceRef = useRef<HTMLDivElement>(null);
   const [fileCommentAnchor, setFileCommentAnchor] = useState<HTMLElement | null>(null);
 
   // Resizable split pane — only applies when Pierre renders a two-column grid
@@ -134,13 +212,13 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
 
   const handleSplitDragStart = useCallback((e: React.PointerEvent) => {
     e.preventDefault();
-    const container = containerRef.current;
-    if (!container) return;
-    const rect = container.getBoundingClientRect();
+    if (!splitSurfaceRef.current) return;
     setIsDraggingSplit(true);
 
-    const onMove = (e: PointerEvent) => {
-      const ratio = (e.clientX - rect.left) / rect.width;
+    const onMove = (moveEvent: PointerEvent) => {
+      const rect = splitSurfaceRef.current?.getBoundingClientRect();
+      if (!rect || rect.width <= 0) return;
+      const ratio = (moveEvent.clientX - rect.left) / rect.width;
       setSplitRatio(Math.min(0.8, Math.max(0.2, ratio)));
     };
 
@@ -160,7 +238,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     storage.setItem('review-split-ratio', '0.5');
   }, []);
 
-  const toolbar = useAnnotationToolbar({ patch, filePath, onLineSelection, onAddAnnotation, onEditAnnotation });
+  const toolbar = useAnnotationToolbar({ patch, filePath, isFocused, onLineSelection, onAddAnnotation, onEditAnnotation });
 
   // Parse patch into FileDiffMetadata for @pierre/diffs FileDiff component
   const fileDiff = useMemo(() => getSingularPatch(patch), [patch]);
@@ -396,14 +474,30 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
           [data-column-number] { background-color: ${bg} !important; }
           [data-diffs-header] [data-title] { display: none !important; }
           [data-diff-type='split'][data-overflow='scroll'] {
-            grid-template-columns: var(--split-left, 1fr) var(--split-right, 1fr) !important;
+            grid-template-columns:
+              minmax(0, var(--split-left, 1fr))
+              minmax(0, var(--split-right, 1fr)) !important;
+          }
+          [data-diff-type='split'][data-overflow='scroll'] > [data-code][data-deletions],
+          [data-diff-type='split'][data-overflow='scroll'] > [data-code][data-additions],
+          [data-diff-type='split'][data-overflow='scroll'] > [data-code][data-deletions] [data-content],
+          [data-diff-type='split'][data-overflow='scroll'] > [data-code][data-additions] [data-content] {
+            min-width: 0 !important;
           }
           ${fontCSS}
         `,
       });
     });
   }, [resolvedMode, colorTheme, fontFamily, fontSize]);
 
+  const splitGridStyle = useMemo(() => {
+    if (!isSplitLayout || diffOverflow === 'wrap') return undefined;
+    return {
+      '--split-left': `${splitRatio}fr`,
+      '--split-right': `${1 - splitRatio}fr`,
+    } as React.CSSProperties;
+  }, [diffOverflow, isSplitLayout, splitRatio]);
+
   return (
     <div className="h-full flex flex-col">
       <FileHeader
@@ -420,46 +514,36 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
       />
 
       <div ref={containerRef} className={`flex-1 overflow-auto relative ${isDraggingSplit ? 'select-none' : ''}`} onMouseMove={toolbar.handleMouseMove}>
-      {isSplitLayout && diffOverflow !== 'wrap' && (
-        <div
-          className="absolute top-0 bottom-0 z-10 cursor-col-resize group"
-          style={{ left: `${splitRatio * 100}%`, width: 9, marginLeft: -4 }}
-          onPointerDown={handleSplitDragStart}
-          onDoubleClick={resetSplitRatio}
-        >
-          <div className="absolute inset-y-0 left-1/2 w-px bg-border group-hover:bg-primary/50 group-active:bg-primary/70 transition-colors" />
+        <div className="p-4">
+          <div ref={splitSurfaceRef} className="relative min-w-0" style={splitGridStyle}>
+            {isSplitLayout && diffOverflow !== 'wrap' && (
+              <div
+                className="absolute top-0 bottom-0 z-10 cursor-col-resize group"
+                style={{ left: `${splitRatio * 100}%`, width: 9, marginLeft: -4 }}
+                onPointerDown={handleSplitDragStart}
+                onDoubleClick={resetSplitRatio}
+              >
+                <div className="pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-border transition-[width,background-color] group-hover:w-0.5 group-hover:bg-primary/50 group-active:w-0.5 group-active:bg-primary/70" />
+              </div>
+            )}
+            <PierreDiffContent
+              filePath={filePath}
+              fileDiff={augmentedDiff}
+              pierreTheme={pierreTheme}
+              diffStyle={diffStyle}
+              diffOverflow={diffOverflow}
+              diffIndicators={diffIndicators}
+              lineDiffType={lineDiffType}
+              disableLineNumbers={disableLineNumbers}
+              disableBackground={disableBackground}
+              mergedAnnotations={mergedAnnotations}
+              pendingSelection={pendingSelection}
+              onLineSelectionEnd={toolbar.handleLineSelectionEnd}
+              renderAnnotation={renderAnnotation}
+              renderHoverUtility={renderHoverUtility}
+            />
+          </div>
         </div>
-      )}
-      <div
-        className="p-4"
-        style={isSplitLayout && diffOverflow !== 'wrap' ? {
-          '--split-left': `${splitRatio}fr`,
-          '--split-right': `${1 - splitRatio}fr`,
-        } as React.CSSProperties : undefined}
-      >
-        <FileDiff
-          key={filePath}
-          fileDiff={augmentedDiff}
-          options={{
-            themeType: pierreTheme.type,
-            unsafeCSS: pierreTheme.css,
-            diffStyle,
-            overflow: diffOverflow,
-            diffIndicators,
-            lineDiffType,
-            disableLineNumbers,
-            disableBackground,
-            hunkSeparators: 'line-info',
-            enableLineSelection: true,
-            enableHoverUtility: true,
-            onLineSelectionEnd: toolbar.handleLineSelectionEnd,
-          }}
-          lineAnnotations={mergedAnnotations}
-          selectedLines={pendingSelection || undefined}
-          renderAnnotation={renderAnnotation}
-          renderHoverUtility={renderHoverUtility}
-        />
-      </div>
 
       {toolbar.toolbarState && (
         <AnnotationToolbar