feat: phase 3 for git integration

src/main/engine/GitEngine.ts

@@ -36,6 +36,11 @@ export interface GitStatusDto {
   counts: GitStatusCounts;
 }
 
+export interface GitDiffDto {
+  filePath: string;
+  patch: string;
+}
+
 export type GitInitPhase =
   | 'checking-git'
   | 'initializing-repo'
@@ -217,6 +222,16 @@ export class GitEngine {
     };
   }
 
+  async getDiff(projectPath: string, filePath: string): Promise<GitDiffDto> {
+    const git = simpleGit(projectPath);
+    const patch = await git.diff(['--', filePath]);
+
+    return {
+      filePath,
+      patch,
+    };
+  }
+
   async ensureGitignore(projectPath: string): Promise<GitIgnoreEnsureResult> {
     const gitignorePath = path.join(projectPath, '.gitignore');
 

src/main/engine/index.ts

@@ -79,6 +79,7 @@ export {
   type GitAvailability,
   type RepoState,
   type GitStatusDto,
+  type GitDiffDto,
   type GitStatusFile,
   type GitStatusCounts,
   type GitInitResult,

src/main/ipc/handlers.ts

@@ -48,6 +48,11 @@ export function registerIpcHandlers(): void {
     return engine.getStatus(projectPath);
   });
 
+  safeHandle('git:diff', async (_, projectPath: string, filePath: string) => {
+    const engine = getGitEngine();
+    return engine.getDiff(projectPath, filePath);
+  });
+
   safeHandle('git:init', async (event, projectPath: string, remoteUrl?: string) => {
     const engine = getGitEngine();
     return engine.initializeRepo(projectPath, remoteUrl, (progress) => {

src/main/preload.ts

@@ -10,6 +10,7 @@ export const electronAPI: ElectronAPI = {
     checkAvailability: () => ipcRenderer.invoke('git:checkAvailability'),
     getRepoState: (projectPath: string) => ipcRenderer.invoke('git:getRepoState', projectPath),
     getStatus: (projectPath: string) => ipcRenderer.invoke('git:status', projectPath),
+    getDiff: (projectPath: string, filePath: string) => ipcRenderer.invoke('git:diff', projectPath, filePath),
     ensureGitignore: (projectPath: string) => ipcRenderer.invoke('git:ensureGitignore', projectPath),
     pruneLfs: (projectPath: string, options?: { dryRun?: boolean; verifyRemote?: boolean }) => ipcRenderer.invoke('git:pruneLfs', projectPath, options),
     init: (projectPath: string, remoteUrl?: string) => {

src/main/shared/electronApi.ts

@@ -236,6 +236,11 @@ export interface GitStatusDto {
   counts: GitStatusCounts;
 }
 
+export interface GitDiffDto {
+  filePath: string;
+  patch: string;
+}
+
 export type GitInitPhase =
   | 'checking-git'
   | 'initializing-repo'
@@ -348,6 +353,7 @@ export interface ElectronAPI {
     checkAvailability: () => Promise<GitAvailability>;
     getRepoState: (projectPath: string) => Promise<GitRepoState>;
     getStatus: (projectPath: string) => Promise<GitStatusDto>;
+    getDiff: (projectPath: string, filePath: string) => Promise<GitDiffDto>;
     ensureGitignore: (projectPath: string) => Promise<GitIgnoreEnsureResult>;
     pruneLfs: (projectPath: string, options?: { dryRun?: boolean; verifyRemote?: boolean }) => Promise<GitLfsPruneResult>;
     init: (projectPath: string, remoteUrl?: string) => Promise<GitInitResult>;

src/renderer/components/Editor/Editor.tsx

@@ -14,6 +14,7 @@ import { TagInput } from '../TagInput';
 import { ChatPanel } from '../ChatPanel';
 import { ImportAnalysisView } from '../ImportAnalysisView';
 import { MetadataDiffPanel } from '../MetadataDiffPanel';
+import { GitDiffView } from '../GitDiffView/GitDiffView';
 import { AutoSaveManager, getContrastColor } from '../../utils';
 import { parseMacros, getMacro } from '../../macros/registry';
 import { InsertModal } from '../InsertModal';
@@ -2214,6 +2215,7 @@ export const Editor: React.FC = () => {
   const showChat = activeTab?.type === 'chat';
   const showImport = activeTab?.type === 'import';
   const showMetadataDiff = activeTab?.type === 'metadata-diff';
+  const showGitDiff = activeTab?.type === 'git-diff';
 
   // Clear selectedPostId if the post doesn't exist (e.g., after project switch)
   useEffect(() => {
@@ -2313,6 +2315,18 @@ export const Editor: React.FC = () => {
     );
   }
 
+  // Show git diff view if git-diff tab is active
+  if (showGitDiff && activeTabId) {
+    const filePath = activeTabId.startsWith('git-diff:') ? activeTabId.slice('git-diff:'.length) : activeTabId;
+    return (
+      <div className="editor">
+        <GitDiffView key={activeTabId} filePath={filePath} />
+        {renderErrorModal()}
+        {renderConfirmDeleteModal()}
+      </div>
+    );
+  }
+
   // Show post editor if a post tab is active
   if (showPost && activeTabId) {
     return (

src/renderer/components/GitDiffView/GitDiffView.css

@@ -0,0 +1,36 @@
+.git-diff-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+}
+
+.git-diff-header {
+  padding: 10px 12px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border);
+  color: var(--vscode-sideBar-foreground);
+}
+
+.git-diff-patch {
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  white-space: pre;
+  font-family: var(--vscode-editor-font-family);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.git-diff-message,
+.git-diff-error {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.git-diff-error {
+  color: var(--vscode-errorForeground);
+}

src/renderer/components/GitDiffView/GitDiffView.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useAppStore } from '../../store';
+import './GitDiffView.css';
+
+interface GitDiffViewProps {
+  filePath: string;
+}
+
+export const GitDiffView: React.FC<GitDiffViewProps> = ({ filePath }) => {
+  const { activeProject } = useAppStore();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [patch, setPatch] = useState('');
+
+  useEffect(() => {
+    const loadDiff = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        if (!activeProject) {
+          setError('No active project selected.');
+          return;
+        }
+
+        const projectPath = activeProject.dataPath
+          ? activeProject.dataPath
+          : await window.electronAPI.app.getDefaultProjectPath(activeProject.id);
+
+        if (!projectPath) {
+          setError('Unable to resolve project path.');
+          return;
+        }
+
+        const diff = await window.electronAPI.git.getDiff(projectPath, filePath);
+        setPatch(diff.patch || '');
+      } catch {
+        setError('Failed to load diff.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void loadDiff();
+  }, [activeProject, filePath]);
+
+  if (loading) {
+    return (
+      <div className="git-diff-view">
+        <div className="git-diff-header">Diff: {filePath}</div>
+        <div className="git-diff-message">Loading diff...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="git-diff-view">
+        <div className="git-diff-header">Diff: {filePath}</div>
+        <div className="git-diff-error">{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="git-diff-view">
+      <div className="git-diff-header">Diff: {filePath}</div>
+      {patch ? <pre className="git-diff-patch">{patch}</pre> : <div className="git-diff-message">No diff available.</div>}
+    </div>
+  );
+};

src/renderer/components/GitSidebar/GitSidebar.css

@@ -22,6 +22,80 @@
   font-size: 12px;
 }
 
+.git-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: 8px 0 0;
+}
+
+.git-sidebar-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.git-sidebar-history {
+  margin-top: 12px;
+  border-top: 1px solid var(--vscode-editorWidget-border);
+  padding-top: 8px;
+}
+
+.git-sidebar-section-header {
+  padding: 0 12px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--vscode-sideBar-foreground);
+  letter-spacing: 0.3px;
+}
+
+.git-sidebar-empty-state {
+  padding: 0 12px 8px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+
+.git-sidebar-file-list {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.git-sidebar-file-item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--vscode-sideBar-foreground);
+  text-align: left;
+  padding: 6px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.git-sidebar-file-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.git-sidebar-file-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.git-sidebar-file-status {
+  text-transform: uppercase;
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+
 .git-sidebar-main {
   min-height: 0;
 }

src/renderer/components/GitSidebar/GitSidebar.tsx

@@ -4,18 +4,33 @@ import type { GitInitProgress } from '../../../main/shared/electronApi';
 import './GitSidebar.css';
 
 export const GitSidebar: React.FC = () => {
-  const { activeProject } = useAppStore();
+  const { activeProject, openTab } = useAppStore();
   const [projectPath, setProjectPath] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [initializing, setInitializing] = useState(false);
+  const [statusLoading, setStatusLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isRepo, setIsRepo] = useState(false);
   const [currentBranch, setCurrentBranch] = useState<string | null>(null);
+  const [statusFiles, setStatusFiles] = useState<Array<{ path: string; status: string }>>([]);
   const [initProgress, setInitProgress] = useState<GitInitProgress | null>(null);
   const [initTranscript, setInitTranscript] = useState<GitInitProgress[]>([]);
   const [isTranscriptExpanded, setIsTranscriptExpanded] = useState(false);
   const remoteUrlInputRef = useRef<HTMLInputElement | null>(null);
 
+  const getDiffTabId = (filePath: string): string => `git-diff:${filePath}`;
+
+  const openDiffTab = useCallback(
+    (filePath: string, isTransient: boolean) => {
+      openTab({
+        type: 'git-diff',
+        id: getDiffTabId(filePath),
+        isTransient,
+      });
+    },
+    [openTab],
+  );
+
   const resolveProjectPath = useCallback(async (): Promise<string | null> => {
     if (!activeProject) {
       return null;
@@ -52,9 +67,22 @@ export const GitSidebar: React.FC = () => {
       const repoState = await window.electronAPI.git.getRepoState(resolvedProjectPath);
       setIsRepo(repoState.isRepo);
       setCurrentBranch(repoState.currentBranch || null);
+
+      if (repoState.isRepo) {
+        setStatusLoading(true);
+        try {
+          const status = await window.electronAPI.git.getStatus(resolvedProjectPath);
+          setStatusFiles(status.files);
+        } finally {
+          setStatusLoading(false);
+        }
+      } else {
+        setStatusFiles([]);
+      }
     } catch {
       setError('Unable to load repository status.');
       setIsRepo(false);
+      setStatusFiles([]);
     } finally {
       setLoading(false);
     }
@@ -146,10 +174,37 @@ export const GitSidebar: React.FC = () => {
     return (
       <div className="git-sidebar">
         <div className="git-sidebar-header">SOURCE CONTROL</div>
-        <div className="git-sidebar-empty">
-          <div className="git-sidebar-main">
-            <p>Git repository ready</p>
-            {currentBranch && <p>Branch: {currentBranch}</p>}
+        <div className="git-sidebar-content">
+          <div className="git-sidebar-section">
+            <div className="git-sidebar-section-header">OPEN CHANGES</div>
+            {statusLoading ? (
+              <div className="git-sidebar-empty-state">Loading changes...</div>
+            ) : statusFiles.length === 0 ? (
+              <div className="git-sidebar-empty-state">No changes</div>
+            ) : (
+              <div className="git-sidebar-file-list" role="list" aria-label="Open Changes">
+                {statusFiles.map((file) => (
+                  <button
+                    key={file.path}
+                    type="button"
+                    className="git-sidebar-file-item"
+                    onClick={() => openDiffTab(file.path, true)}
+                    onDoubleClick={() => openDiffTab(file.path, false)}
+                    title={`${file.status}: ${file.path}`}
+                  >
+                    <span className="git-sidebar-file-path">{file.path}</span>
+                    <span className="git-sidebar-file-status">{file.status}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="git-sidebar-section git-sidebar-history">
+            <div className="git-sidebar-section-header">VERSION HISTORY</div>
+            <div className="git-sidebar-empty-state">
+              {currentBranch ? `Branch: ${currentBranch}` : 'No branch information'}
+            </div>
           </div>
           {transcriptSection}
         </div>

src/renderer/components/TabBar/TabBar.tsx

@@ -11,6 +11,12 @@ const getTabTitle = (
   chatTitles: Map<string, string>,
   importDefTitles: Map<string, string>
 ): string => {
+  if (tab.type === 'git-diff') {
+    const filePath = tab.id.startsWith('git-diff:') ? tab.id.slice('git-diff:'.length) : tab.id;
+    const filename = filePath.split('/').pop();
+    return filename || filePath;
+  }
+
   if (tab.type === 'settings') {
     return 'Settings';
   }
@@ -52,6 +58,12 @@ const getTabTitle = (
 
 const getTabIcon = (tab: Tab): React.ReactNode => {
   switch (tab.type) {
+    case 'git-diff':
+      return (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M9 3H5a2 2 0 0 0-2 2v4h2V5h4V3zm10 6h2V5a2 2 0 0 0-2-2h-4v2h4v4zM5 15H3v4a2 2 0 0 0 2 2h4v-2H5v-4zm16 0h-2v4h-4v2h4a2 2 0 0 0 2-2v-4zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/>
+        </svg>
+      );
     case 'post':
       return (
         <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">

src/renderer/store/appStore.ts

@@ -12,7 +12,7 @@ import type {
 const STORAGE_KEY = 'bds-app-state';
 
 // Tab types
-export type TabType = 'post' | 'media' | 'settings' | 'tags' | 'chat' | 'import' | 'metadata-diff';
+export type TabType = 'post' | 'media' | 'settings' | 'tags' | 'chat' | 'import' | 'metadata-diff' | 'git-diff';
 
 export interface Tab {
   type: TabType;