From ff176a9368d1c8167f85140a6f949877fd6366cc Mon Sep 17 00:00:00 2001
From: Haileyesus <something@gmail.com>
Date: Mon, 2 Mar 2026 22:47:14 +0300
Subject: [PATCH] refactor(DiffViewer): rename different diff viewers and place
 them in different components

---
 src/components/DiffViewer.jsx                 | 41 -------------------
 src/components/chat/tools/README.md           |  6 +--
 src/components/chat/tools/ToolRenderer.tsx    |  4 +-
 .../{DiffViewer.tsx => ToolDiffViewer.tsx}    |  4 +-
 src/components/chat/tools/components/index.ts |  2 +-
 .../git-panel/view/changes/FileChangeItem.tsx | 18 ++------
 .../view/history/CommitHistoryItem.tsx        | 13 ++----
 .../git-panel/view/shared/DiffViewer.tsx      | 41 +++++++++++++++++++
 8 files changed, 56 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/DiffViewer.jsx
 rename src/components/chat/tools/components/{DiffViewer.tsx => ToolDiffViewer.tsx} (96%)
 create mode 100644 src/components/git-panel/view/shared/DiffViewer.tsx

diff --git a/src/components/DiffViewer.jsx b/src/components/DiffViewer.jsx
deleted file mode 100644
index a6d963a3..00000000
--- a/src/components/DiffViewer.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-function DiffViewer({ diff, fileName, isMobile, wrapText }) {
-  if (!diff) {
-    return (
-      <div className="p-4 text-center text-muted-foreground text-sm">
-        No diff available
-      </div>
-    );
-  }
-
-  const renderDiffLine = (line, index) => {
-    const isAddition = line.startsWith('+') && !line.startsWith('+++');
-    const isDeletion = line.startsWith('-') && !line.startsWith('---');
-    const isHeader = line.startsWith('@@');
-
-    return (
-      <div
-        key={index}
-        className={`font-mono text-xs px-3 py-0.5 ${
-          isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'whitespace-pre overflow-x-auto'
-        } ${
-          isAddition ? 'bg-green-50 dark:bg-green-950/50 text-green-700 dark:text-green-300' :
-          isDeletion ? 'bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-300' :
-          isHeader ? 'bg-primary/5 text-primary' :
-          'text-muted-foreground/70'
-        }`}
-      >
-        {line}
-      </div>
-    );
-  };
-
-  return (
-    <div className="diff-viewer">
-      {diff.split('\n').map((line, index) => renderDiffLine(line, index))}
-    </div>
-  );
-}
-
-export default DiffViewer;
\ No newline at end of file
diff --git a/src/components/chat/tools/README.md b/src/components/chat/tools/README.md
index 206d90fc..50a15cb8 100644
--- a/src/components/chat/tools/README.md
+++ b/src/components/chat/tools/README.md
@@ -17,7 +17,7 @@ tools/
 │   ├── CollapsibleDisplay.tsx      # Expandable tool display (uses children pattern)
 │   ├── CollapsibleSection.tsx      # <details>/<summary> wrapper
 │   ├── ContentRenderers/
-│   │   ├── DiffViewer.tsx          # File diff viewer (memoized)
+│   │   ├── ToolDiffViewer.tsx          # File diff viewer (memoized)
 │   │   ├── MarkdownContent.tsx     # Markdown renderer
 │   │   ├── FileListContent.tsx     # Comma-separated clickable file list
 │   │   ├── TodoListContent.tsx     # Todo items with status badges
@@ -82,7 +82,7 @@ Wraps `CollapsibleSection` (`<details>`/`<summary>`) with a `border-l-2` accent
   rawContent="..."              // Raw JSON string
   toolCategory="edit"           // Drives border color
 >
-  <DiffViewer {...} />          // Content as children
+  <ToolDiffViewer {...} />          // Content as children
 </CollapsibleDisplay>
 ```
 
@@ -217,7 +217,7 @@ interface ToolDisplayConfig {
 
 - **ToolRenderer** is wrapped with `React.memo` — skips re-render when props haven't changed
 - **parsedData** is memoized with `useMemo` — JSON parsing only runs when input changes
-- **DiffViewer** memoizes `createDiff()` — expensive diff computation cached
+- **ToolDiffViewer** memoizes `createDiff()` — expensive diff computation cached
 - **MessageComponent** caches `localStorage` reads and timestamp formatting via `useMemo`
 - Tool results route through `ToolRenderer` (no duplicate rendering paths)
 - `CollapsibleDisplay` uses children pattern (no wasteful contentProps indirection)
diff --git a/src/components/chat/tools/ToolRenderer.tsx b/src/components/chat/tools/ToolRenderer.tsx
index e3c88b0b..d51456ff 100644
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import { getToolConfig } from './configs/toolConfigs';
-import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
+import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
 import type { Project } from '../../../types/app';
 import type { SubagentChildTool } from '../types/types';
 
@@ -142,7 +142,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
       case 'diff':
         if (createDiff) {
           contentComponent = (
-            <DiffViewer
+            <ToolDiffViewer
               {...contentProps}
               createDiff={createDiff}
               onFileClick={() => onFileOpen?.(contentProps.filePath)}
diff --git a/src/components/chat/tools/components/DiffViewer.tsx b/src/components/chat/tools/components/ToolDiffViewer.tsx
similarity index 96%
rename from src/components/chat/tools/components/DiffViewer.tsx
rename to src/components/chat/tools/components/ToolDiffViewer.tsx
index 626c784e..b567f7c4 100644
--- a/src/components/chat/tools/components/DiffViewer.tsx
+++ b/src/components/chat/tools/components/ToolDiffViewer.tsx
@@ -6,7 +6,7 @@ type DiffLine = {
   lineNum: number;
 };
 
-interface DiffViewerProps {
+interface ToolDiffViewerProps {
   oldContent: string;
   newContent: string;
   filePath: string;
@@ -19,7 +19,7 @@ interface DiffViewerProps {
 /**
  * Compact diff viewer — VS Code-style
  */
-export const DiffViewer: React.FC<DiffViewerProps> = ({
+export const ToolDiffViewer: React.FC<ToolDiffViewerProps> = ({
   oldContent,
   newContent,
   filePath,
diff --git a/src/components/chat/tools/components/index.ts b/src/components/chat/tools/components/index.ts
index 88dc4e5d..5e419662 100644
--- a/src/components/chat/tools/components/index.ts
+++ b/src/components/chat/tools/components/index.ts
@@ -1,5 +1,5 @@
 export { CollapsibleSection } from './CollapsibleSection';
-export { DiffViewer } from './DiffViewer';
+export { ToolDiffViewer } from './ToolDiffViewer';
 export { OneLineDisplay } from './OneLineDisplay';
 export { CollapsibleDisplay } from './CollapsibleDisplay';
 export { SubagentContainer } from './SubagentContainer';
diff --git a/src/components/git-panel/view/changes/FileChangeItem.tsx b/src/components/git-panel/view/changes/FileChangeItem.tsx
index 2d4bac4b..e07a563b 100644
--- a/src/components/git-panel/view/changes/FileChangeItem.tsx
+++ b/src/components/git-panel/view/changes/FileChangeItem.tsx
@@ -1,16 +1,7 @@
 import { ChevronRight, Trash2 } from 'lucide-react';
-import DiffViewer from '../../../DiffViewer.jsx';
 import type { FileStatusCode } from '../../types/types';
 import { getStatusBadgeClass, getStatusLabel } from '../../utils/gitPanelUtils';
-
-type DiffViewerProps = {
-  diff: string;
-  fileName: string;
-  isMobile: boolean;
-  wrapText: boolean;
-};
-
-const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
+import GitDiffViewer from '../shared/DiffViewer';
 
 type FileChangeItemProps = {
   filePath: string;
@@ -104,9 +95,8 @@ export default function FileChangeItem({
       </div>
 
       <div
-        className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${
-          isExpanded && diff ? 'max-h-[600px] opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-1'
-        }`}
+        className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${isExpanded && diff ? 'max-h-[600px] opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-1'
+          }`}
       >
         <div className="flex items-center justify-between p-2 border-b border-border">
           <span className="flex items-center gap-2">
@@ -130,7 +120,7 @@ export default function FileChangeItem({
         </div>
 
         <div className="max-h-96 overflow-y-auto">
-          {diff && <DiffViewerComponent diff={diff} fileName={filePath} isMobile={isMobile} wrapText={wrapText} />}
+          {diff && <GitDiffViewer diff={diff} isMobile={isMobile} wrapText={wrapText} />}
         </div>
       </div>
     </div>
diff --git a/src/components/git-panel/view/history/CommitHistoryItem.tsx b/src/components/git-panel/view/history/CommitHistoryItem.tsx
index c7c7f857..937bd90a 100644
--- a/src/components/git-panel/view/history/CommitHistoryItem.tsx
+++ b/src/components/git-panel/view/history/CommitHistoryItem.tsx
@@ -1,15 +1,8 @@
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import DiffViewer from '../../../DiffViewer.jsx';
+
 import type { GitCommitSummary } from '../../types/types';
+import GitDiffViewer from '../shared/DiffViewer';
 
-type DiffViewerProps = {
-  diff: string;
-  fileName: string;
-  isMobile: boolean;
-  wrapText: boolean;
-};
-
-const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
 
 type CommitHistoryItemProps = {
   commit: GitCommitSummary;
@@ -62,7 +55,7 @@ export default function CommitHistoryItem({
             <div className="text-sm font-mono text-muted-foreground mb-2">
               {commit.stats}
             </div>
-            <DiffViewerComponent diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
+            <GitDiffViewer diff={diff} isMobile={isMobile} wrapText={wrapText} />
           </div>
         </div>
       )}
diff --git a/src/components/git-panel/view/shared/DiffViewer.tsx b/src/components/git-panel/view/shared/DiffViewer.tsx
new file mode 100644
index 00000000..ea98620c
--- /dev/null
+++ b/src/components/git-panel/view/shared/DiffViewer.tsx
@@ -0,0 +1,41 @@
+type GitDiffViewerProps = {
+  diff: string | null;
+  isMobile: boolean;
+  wrapText: boolean;
+};
+
+export default function GitDiffViewer({ diff, isMobile, wrapText }: GitDiffViewerProps) {
+  if (!diff) {
+    return (
+      <div className="p-4 text-center text-muted-foreground text-sm">
+        No diff available
+      </div>
+    );
+  }
+
+  const renderDiffLine = (line: string, index: number) => {
+    const isAddition = line.startsWith('+') && !line.startsWith('+++');
+    const isDeletion = line.startsWith('-') && !line.startsWith('---');
+    const isHeader = line.startsWith('@@');
+
+    return (
+      <div
+        key={index}
+        className={`font-mono text-xs px-3 py-0.5 ${isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'whitespace-pre overflow-x-auto'
+          } ${isAddition ? 'bg-green-50 dark:bg-green-950/50 text-green-700 dark:text-green-300' :
+            isDeletion ? 'bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-300' :
+              isHeader ? 'bg-primary/5 text-primary' :
+                'text-muted-foreground/70'
+          }`}
+      >
+        {line}
+      </div>
+    );
+  };
+
+  return (
+    <div className="diff-viewer">
+      {diff.split('\n').map((line, index) => renderDiffLine(line, index))}
+    </div>
+  );
+}
\ No newline at end of file