feat(web): enhanced file panel — side-by-side diff, hide whitespace, inline review

Adds DiffSplitView component for side-by-side diff mode, whitespace-only
change filtering, inline review comments with thread/gutter cell UI, diff
preferences persistence, and write-file API support for in-browser editing.

Backend: hideWhitespace param on git diff endpoint, write_file route.

apps/web/src/components/GitDiffView.tsx

@@ -1,8 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
-import { ChevronDown, ChevronRight, GitBranch, RefreshCw, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown, ChevronRight, Columns2, GitBranch, ListChevronsDownUp, ListChevronsUpDown, AlignJustify, Pilcrow, RefreshCw, Trash2, WrapText } from 'lucide-react';
 import { codeToHtml } from 'shiki';
 import type { GitDiffFile, GitDiffMode, GitDiffResult, GitDiscardFileInfo } from '@/api/types';
 import { cn } from '@/lib/utils';
+import { DiffSplitView } from './DiffSplitView';
+import { InlineReviewGutterCell } from './InlineReviewGutterCell';
+import { InlineReviewEditor } from './InlineReviewEditor';
+import { InlineReviewThread } from './InlineReviewThread';
+import { useDiffComments } from '@/stores/useDiffCommentStore';
 
 interface WriteProps {
   mutating: boolean;
@@ -18,12 +23,19 @@ interface Props extends WriteProps {
   loading: boolean;
   error: string | null;
   mode: GitDiffMode;
+  sessionId?: string;
   onSelectMode: (m: GitDiffMode) => void;
   onRefresh: () => void;
   /** FIX 4: non-null when the repo's dirty state suggests a different mode than the pinned one. */
   modeSuggestion?: GitDiffMode | null;
   /** FIX 5: pending-changes count from the Coder pane — shown in empty state as a hint. */
   pendingCount?: number;
+  layout: 'unified' | 'split';
+  wrapLines: boolean;
+  hideWhitespace: boolean;
+  onLayoutChange: (layout: 'unified' | 'split') => void;
+  onWrapLinesChange: (wrap: boolean) => void;
+  onHideWhitespaceChange: (hide: boolean) => void;
 }
 
 const CHANGE_TYPE_LABELS: Record<string, string> = {
@@ -99,6 +111,12 @@ function FileDiffRow({
   onStage,
   onUnstage,
   onDiscardRequest,
+  layout,
+  wrapLines,
+  expanded,
+  onToggleExpand,
+  sessionId,
+  diffMode,
 }: {
   file: GitDiffFile;
   uncommitted: boolean;
@@ -106,11 +124,21 @@ function FileDiffRow({
   onStage: (path: string) => void;
   onUnstage: (path: string) => void;
   onDiscardRequest: (file: GitDiffFile) => void;
+  layout: 'unified' | 'split';
+  wrapLines: boolean;
+  expanded: boolean;
+  onToggleExpand: (path: string) => void;
+  sessionId?: string;
+  diffMode?: string;
 }) {
-  const [expanded, setExpanded] = useState(false);
   const [html, setHtml] = useState<string | null>(null);
   const [highlighting, setHighlighting] = useState(false);
   const highlightRef = useRef<HTMLDivElement | null>(null);
+  const [showEditor, setShowEditor] = useState(false);
+  const commentKey = `${file.path}:${file.change_type}`;
+  const diffModeVal = diffMode ?? '';
+  const { comments, addComment, updateComment, deleteComment } = useDiffComments(sessionId ?? '', diffModeVal);
+  const fileComments = comments.get(commentKey) ?? [];
 
   useEffect(() => {
     if (!expanded || !file.diff_body) return;
@@ -136,13 +164,27 @@ function FileDiffRow({
   const typeColor = CHANGE_TYPE_COLORS[file.change_type] ?? 'text-muted-foreground';
   const displayPath = file.old_path ? `${file.old_path} → ${file.path}` : file.path;
 
+  const handleAddComment = (body: string) => {
+    const comment = { id: crypto.randomUUID(), body, createdAt: Date.now(), updatedAt: Date.now() };
+    addComment(commentKey, comment);
+    setShowEditor(false);
+  };
+
+  const handleEditComment = (id: string, body: string) => {
+    updateComment(commentKey, id, body);
+  };
+
+  const handleDeleteComment = (id: string) => {
+    deleteComment(commentKey, id);
+  };
+
   return (
     <li className="border-b border-border/30 last:border-0">
       <div className="flex items-center group">
         <button
           type="button"
           className="flex-1 flex items-center gap-1.5 px-2 py-1.5 text-xs hover:bg-muted/40 text-left max-md:min-h-[44px] min-w-0"
-          onClick={() => setExpanded((p) => !p)}
+          onClick={() => onToggleExpand(file.path)}
           aria-expanded={expanded}
         >
           {expanded
@@ -203,23 +245,54 @@ function FileDiffRow({
             <p className="text-xs text-muted-foreground italic px-2 py-1">Untracked — not yet staged</p>
           )}
           {!file.is_binary && !file.is_too_large && file.diff_body && (
-            <>
-              {highlighting && (
-                <p className="text-xs text-muted-foreground px-2 py-1">Highlighting…</p>
-              )}
-              {!highlighting && html !== null ? (
-                <div
-                  ref={highlightRef}
-                  className="text-[11px] overflow-x-auto rounded bg-[#0d1117] [&_pre]:!p-2 [&_pre]:!m-0 [&_pre]:overflow-x-auto"
+            layout === 'split' ? (
+              <DiffSplitView file={file} wrapLines={wrapLines} />
+            ) : (
+              <>
+                {highlighting && (
+                  <p className="text-xs text-muted-foreground px-2 py-1">Highlighting…</p>
+                )}
+                {!highlighting && html !== null ? (
+                  <div
+                    ref={highlightRef}
+                    className="text-[11px] overflow-x-auto rounded bg-[#0d1117] [&_pre]:!p-2 [&_pre]:!m-0 [&_pre]:overflow-x-auto"
+                  />
+                ) : (
+                  !highlighting && (
+                    <pre className={cn(
+                      'text-[11px] overflow-x-auto rounded bg-muted/30 p-2',
+                      wrapLines ? 'whitespace-pre-wrap break-all' : 'whitespace-pre',
+                    )}>
+                      {file.diff_body}
+                    </pre>
+                  )
+                )}
+                {/* Comment button */}
+                <div className="flex items-center gap-1 mt-1">
+                  <button
+                    type="button"
+                    onClick={() => setShowEditor(!showEditor)}
+                    className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-0.5 px-1 py-0.5 rounded hover:bg-muted/40"
+                  >
+                    <span>{showEditor ? 'Cancel' : 'Comment'}</span>
+                  </button>
+                  <span className="text-[10px] text-muted-foreground/50">
+                    {fileComments.length > 0 && `${fileComments.length} comment${fileComments.length > 1 ? 's' : ''}`}
+                  </span>
+                </div>
+                {showEditor && (
+                  <InlineReviewEditor
+                    onSave={handleAddComment}
+                    onCancel={() => setShowEditor(false)}
+                  />
+                )}
+                <InlineReviewThread
+                  comments={fileComments}
+                  onEditComment={handleEditComment}
+                  onDeleteComment={handleDeleteComment}
                 />
-              ) : (
-                !highlighting && (
-                  <pre className="text-[11px] overflow-x-auto rounded bg-muted/30 p-2 whitespace-pre">
-                    {file.diff_body}
-                  </pre>
-                )
-              )}
-            </>
+              </>
+            )
           )}
         </div>
       )}
@@ -242,11 +315,41 @@ export function GitDiffView({
   onDiscard,
   modeSuggestion,
   pendingCount,
+  layout,
+  wrapLines,
+  hideWhitespace,
+  onLayoutChange,
+  onWrapLinesChange,
+  onHideWhitespaceChange,
+  sessionId,
 }: Props) {
   const [commitMessage, setCommitMessage] = useState('');
   const [discardTarget, setDiscardTarget] = useState<DiscardConfirmState | null>(null);
   const [lastAction, setLastAction] = useState<string | null>(null);
   const lastActionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+
+  const allExpandedComputed = useMemo(
+    () => result !== null && (result.files?.length ?? 0) > 0 && result.files.every((f) => expandedFiles.has(f.path)),
+    [result, expandedFiles],
+  );
+
+  const handleExpandAllChange = useCallback((expand: boolean) => {
+    if (expand && result?.files) {
+      setExpandedFiles(new Set(result.files.map((f) => f.path)));
+    } else {
+      setExpandedFiles(new Set());
+    }
+  }, [result?.files]);
+
+  const handleToggleExpand = useCallback((path: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
 
   function flashAction(msg: string) {
     setLastAction(msg);
@@ -378,6 +481,83 @@ export function GitDiffView({
         </button>
       </div>
 
+      {/* Diff toolbar */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b shrink-0">
+        <button
+          type="button"
+          onClick={() => onLayoutChange('unified')}
+          className={cn(
+            'text-xs px-2 py-0.5 rounded flex items-center gap-1 max-md:min-h-[44px]',
+            layout === 'unified'
+              ? 'bg-muted text-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+          title="Unified diff"
+        >
+          <AlignJustify size={12} />
+          Unified
+        </button>
+        <button
+          type="button"
+          onClick={() => onLayoutChange('split')}
+          className={cn(
+            'text-xs px-2 py-0.5 rounded flex items-center gap-1 max-md:min-h-[44px]',
+            layout === 'split'
+              ? 'bg-muted text-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+          title="Split diff"
+        >
+          <Columns2 size={12} />
+          Split
+        </button>
+        <button
+          type="button"
+          onClick={() => onHideWhitespaceChange(!hideWhitespace)}
+          className={cn(
+            'p-1 rounded max-md:min-h-[44px] max-md:min-w-[44px]',
+            hideWhitespace
+              ? 'bg-muted text-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+          title={hideWhitespace ? 'Show whitespace' : 'Hide whitespace'}
+        >
+          <Pilcrow size={12} />
+        </button>
+        <button
+          type="button"
+          onClick={() => onWrapLinesChange(!wrapLines)}
+          className={cn(
+            'p-1 rounded max-md:min-h-[44px] max-md:min-w-[44px]',
+            wrapLines
+              ? 'bg-muted text-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+          title={wrapLines ? 'Unwrap lines' : 'Wrap lines'}
+        >
+          <WrapText size={12} />
+        </button>
+        <div className="flex-1" />
+        <button
+          type="button"
+          onClick={() => handleExpandAllChange(!allExpandedComputed)}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
+          title={allExpandedComputed ? 'Collapse all' : 'Expand all'}
+        >
+          {allExpandedComputed ? <ListChevronsDownUp size={12} /> : <ListChevronsUpDown size={12} />}
+        </button>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={loading || mutating}
+          className="p-1 rounded hover:bg-muted text-muted-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
+          aria-label="Refresh diff"
+          title="Refresh"
+        >
+          <RefreshCw size={12} />
+        </button>
+      </div>
+
       {/* Committed-mode base label */}
       {result.mode === 'committed' && base_label && (
         <div className="px-2 py-1 text-[10px] text-muted-foreground border-b flex items-center gap-1 shrink-0">
@@ -445,6 +625,12 @@ export function GitDiffView({
                 onStage={handleStage}
                 onUnstage={handleUnstage}
                 onDiscardRequest={handleDiscardRequest}
+                layout={layout}
+                wrapLines={wrapLines}
+                expanded={expandedFiles.has(file.path)}
+                onToggleExpand={handleToggleExpand}
+                sessionId={sessionId}
+                diffMode={mode}
               />
             ))}
           </ul>