feat: improve editors (#226)

apps/web/components/diff/diff-view-inline.tsx

@@ -1,4 +1,4 @@
 'use client';
 
-// Re-export from the unified diff-viewer component
-export { DiffViewInline } from './diff-viewer';
+// Re-export resolver-aware version
+export { DiffViewInlineResolved as DiffViewInline } from './diff-viewer-resolver';

apps/web/components/diff/diff-viewer-resolver.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { memo } from 'react';
+import { useEditorProvider } from '@/hooks/use-editor-resolver';
+import { DiffViewer as PierreDiffViewer, DiffViewInline as PierreDiffViewInline } from './diff-viewer';
+import { MonacoDiffViewer } from '@/components/editors/monaco/monaco-diff-viewer';
+import type { FileDiffData, DiffComment } from '@/lib/diff/types';
+
+interface DiffViewerResolverProps {
+  data: FileDiffData;
+  enableComments?: boolean;
+  sessionId?: string;
+  onCommentAdd?: (comment: DiffComment) => void;
+  onCommentDelete?: (commentId: string) => void;
+  comments?: DiffComment[];
+  className?: string;
+  compact?: boolean;
+  hideHeader?: boolean;
+  onOpenFile?: (filePath: string) => void;
+  onRevert?: (filePath: string) => void;
+  wordWrap?: boolean;
+}
+
+export const DiffViewerResolved = memo(function DiffViewerResolved(props: DiffViewerResolverProps) {
+  const provider = useEditorProvider('diff-viewer');
+  if (provider === 'monaco') {
+    const { enableComments: _, ...rest } = props;
+    return <MonacoDiffViewer {...rest} />;
+  }
+  return <PierreDiffViewer {...props} />;
+});
+
+export function DiffViewInlineResolved({ data, className }: { data: FileDiffData; className?: string }) {
+  const provider = useEditorProvider('chat-diff');
+  if (provider === 'monaco') {
+    return <MonacoDiffViewer data={data} compact hideHeader className={className} />;
+  }
+  return <PierreDiffViewInline data={data} className={className} />;
+}

apps/web/components/diff/diff-viewer.tsx

@@ -8,7 +8,7 @@ import type { FileDiffOptions, FileDiffMetadata, DiffLineAnnotation, RenderHeade
 import { cn } from '@kandev/ui/lib/utils';
 import { Button } from '@kandev/ui/button';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@kandev/ui/tooltip';
-import { IconCopy, IconTextWrap, IconLayoutRows, IconLayoutColumns, IconExternalLink, IconPlus, IconArrowBackUp } from '@tabler/icons-react';
+import { IconCopy, IconTextWrap, IconLayoutRows, IconLayoutColumns, IconPencil, IconPlus, IconArrowBackUp } from '@tabler/icons-react';
 import type { FileDiffData, DiffComment } from '@/lib/diff/types';
 import { useDiffComments } from './use-diff-comments';
 import { CommentForm } from './comment-form';
@@ -407,10 +407,10 @@ export const DiffViewer = memo(function DiffViewer({
                   className="h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100"
                   onClick={() => onOpenFile(filePath)}
                 >
-                  <IconExternalLink className="h-3.5 w-3.5" />
+                  <IconPencil className="h-3.5 w-3.5" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Open in editor</TooltipContent>
+              <TooltipContent>Edit</TooltipContent>
             </Tooltip>
           )}
         </div>

apps/web/components/diff/file-diff-viewer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { memo, useMemo } from 'react';
-import { DiffViewer } from './diff-viewer';
+import { DiffViewerResolved as DiffViewer } from './diff-viewer-resolver';
 import { transformGitDiff } from '@/lib/diff';
 import type { DiffComment } from '@/lib/diff/types';
 

apps/web/components/diff/index.ts

@@ -1,9 +1,13 @@
-// Main components
-export { DiffViewer } from './diff-viewer';
+// Main components - resolver-aware
+export { DiffViewerResolved as DiffViewer } from './diff-viewer-resolver';
+export { DiffViewInlineResolved as DiffViewInline } from './diff-viewer-resolver';
 export { FileDiffViewer } from './file-diff-viewer';
-export { DiffViewInline } from './diff-view-inline';
 export { CommentForm } from './comment-form';
 export { CommentDisplay } from './comment-display';
 
+// Direct access to Pierre implementation (for internal use)
+export { DiffViewer as PierreDiffViewer } from './diff-viewer';
+export { DiffViewInline as PierreDiffViewInline } from './diff-viewer';
+
 // Hooks
 export { useDiffComments } from './use-diff-comments';