collabmd 0.1.21 → 0.1.23

package/src/client/presentation/git-diff-view-controller.js

@@ -5,20 +5,34 @@ function getPathLeaf(pathValue) {
   return String(pathValue ?? '').split('/').pop() || '';
 }
 
+function getPathDir(pathValue) {
+  const parts = String(pathValue ?? '').split('/');
+  parts.pop();
+  return parts.join('/');
+}
+
+function createSectionId(pathValue) {
+  return `diff-section-${encodeURIComponent(String(pathValue ?? '')).replace(/%/g, '_')}`;
+}
+
 function badgeClass(status) {
   switch (status) {
     case 'added':
     case 'untracked':
-      return 'added';
+      return 'ui-status-badge--success';
     case 'deleted':
-      return 'deleted';
+      return 'ui-status-badge--danger';
     case 'renamed':
-      return 'renamed';
+      return 'ui-status-badge--accent';
     default:
-      return 'modified';
+      return 'ui-status-badge--warning';
   }
 }
 
+function chevronSvg(collapsed = false) {
+  return `<svg class="diff-section-chevron${collapsed ? ' collapsed' : ''}" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>`;
+}
+
 function commonPrefixLength(left, right) {
   let index = 0;
   while (index < left.length && index < right.length && left[index] === right[index]) {
@@ -131,12 +145,14 @@ function renderSplitRow(leftLine, rightLine) {
 
 export class GitDiffViewController {
   constructor({
+    onBackToHistory = null,
     onCommitStaged = null,
     onOpenFile = null,
     onStageFile = null,
     onUnstageFile = null,
     toastController = null,
   } = {}) {
+    this.onBackToHistory = onBackToHistory;
     this.onCommitStaged = onCommitStaged;
     this.onOpenFile = onOpenFile;
     this.onStageFile = onStageFile;
@@ -149,16 +165,31 @@ export class GitDiffViewController {
     this.openEditorButton = document.getElementById('diffOpenEditorBtn');
     this.primaryActionButton = document.getElementById('diffPrimaryActionBtn');
     this.commitButton = document.getElementById('diffCommitBtn');
+    this.backToHistoryButton = document.getElementById('diffBackToHistoryBtn');
+    this.gitActionsGroup = document.getElementById('diffGitActionsGroup');
+    this.editorActionsGroup = document.getElementById('diffEditorActionsGroup');
+    this.actionsDivider = document.getElementById('diffToolbarDivider');
     this.stats = document.getElementById('diffStats');
     this.prevButton = document.getElementById('diffPrevBtn');
     this.nextButton = document.getElementById('diffNextBtn');
+    this.layoutToggle = document.getElementById('diffLayoutToggle');
     this.modeButtons = Array.from(document.querySelectorAll('[data-diff-mode]'));
+    this.layoutButtons = Array.from(document.querySelectorAll('[data-diff-layout]'));
     this.mode = 'unified';
+    this.layoutMode = 'focused';
+    this.source = 'workspace';
     this.data = null;
     this.currentIndex = 0;
+    this.activeFilePath = null;
     this.fileCache = new Map();
-    this.loadingFilePath = null;
+    this.fileErrors = new Map();
+    this.loadingFiles = new Set();
+    this.collapsedFiles = new Set();
+    this.fileLoadPromises = new Map();
     this.requestScope = 'all';
+    this.commitHash = null;
+    this.commitMeta = null;
+    this.historyFilePath = null;
     this.pendingAction = null;
     this.repoStatus = null;
   }
@@ -166,7 +197,20 @@ export class GitDiffViewController {
   initialize() {
     this.prevButton?.addEventListener('click', () => this.navigateFile(-1));
     this.nextButton?.addEventListener('click', () => this.navigateFile(1));
+    this.backToHistoryButton?.addEventListener('click', () => {
+      if (!this.commitMeta?.hash) {
+        return;
+      }
+      this.onBackToHistory?.({
+        hash: this.commitMeta.hash,
+        historyFilePath: this.historyFilePath,
+      });
+    });
     this.openEditorButton?.addEventListener('click', () => {
+      if (this.source !== 'workspace') {
+        return;
+      }
+
       const currentFile = this.getCurrentFile();
       if (!currentFile?.path) {
         return;
@@ -190,7 +234,32 @@ export class GitDiffViewController {
         ? event.target.closest('[data-load-full-diff]')
         : null;
       if (loadButton) {
-        void this.loadCurrentFile({ forceFullPatch: true });
+        const filePath = loadButton.getAttribute('data-diff-file-path') || this.activeFilePath;
+        if (filePath) {
+          void this.loadFileForPath(filePath, { forceFullPatch: true });
+        }
+        return;
+      }
+
+      const toggleButton = event.target instanceof Element
+        ? event.target.closest('[data-diff-section-toggle]')
+        : null;
+      if (toggleButton) {
+        const filePath = toggleButton.getAttribute('data-diff-section-toggle');
+        if (filePath) {
+          void this.toggleFileSection(filePath);
+        }
+        return;
+      }
+
+      const indexButton = event.target instanceof Element
+        ? event.target.closest('[data-diff-index-path]')
+        : null;
+      if (indexButton) {
+        const filePath = indexButton.getAttribute('data-diff-index-path');
+        if (filePath) {
+          void this.handleIndexSelection(filePath);
+        }
       }
     });
     this.modeButtons.forEach((button) => {
@@ -203,6 +272,18 @@ export class GitDiffViewController {
         this.render();
       });
     });
+    this.layoutButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const nextLayout = button.getAttribute('data-diff-layout');
+        if (!nextLayout || nextLayout === this.layoutMode) {
+          return;
+        }
+        void this.setLayoutMode(nextLayout);
+      });
+    });
+    this.scrollContainer?.addEventListener('scroll', () => {
+      this.handleScrollSelection();
+    });
   }
 
   hide() {
@@ -211,17 +292,36 @@ export class GitDiffViewController {
       this.content.innerHTML = '';
     }
     this.data = null;
+    this.source = 'workspace';
+    this.layoutMode = 'focused';
     this.currentIndex = 0;
+    this.activeFilePath = null;
     this.fileCache.clear();
-    this.loadingFilePath = null;
+    this.fileErrors.clear();
+    this.loadingFiles.clear();
+    this.collapsedFiles.clear();
+    this.fileLoadPromises.clear();
+    this.requestScope = 'all';
+    this.commitHash = null;
+    this.commitMeta = null;
+    this.historyFilePath = null;
     this.pendingAction = null;
     this.repoStatus = null;
     this.syncToolbar();
   }
 
-  async open({ filePath = null, scope = 'all' } = {}) {
+  async openWorkspaceDiff({ filePath = null, scope = 'all' } = {}) {
+    this.source = 'workspace';
+    this.layoutMode = 'focused';
+    this.commitHash = null;
+    this.commitMeta = null;
+    this.historyFilePath = null;
+    this.activeFilePath = filePath;
     this.fileCache.clear();
-    this.loadingFilePath = null;
+    this.fileErrors.clear();
+    this.loadingFiles.clear();
+    this.collapsedFiles.clear();
+    this.fileLoadPromises.clear();
     this.requestScope = scope;
     this.renderLoading('Loading diff summary...');
 
@@ -244,6 +344,7 @@ export class GitDiffViewController {
         ? Math.max(0, data.files.findIndex((file) => file.path === filePath))
         : 0;
       this.currentIndex = initialIndex;
+      this.activeFilePath = data.files?.[initialIndex]?.path ?? null;
       if ((data.files?.length ?? 0) === 0) {
         this.render();
         return data;
@@ -257,6 +358,7 @@ export class GitDiffViewController {
       this.data = {
         files: [],
         metaOnly: false,
+        source: 'workspace',
         summary: { additions: 0, deletions: 0, filesChanged: 0 },
       };
       this.renderEmpty('Failed to load git diff');
@@ -264,8 +366,100 @@ export class GitDiffViewController {
     }
   }
 
+  async openCommitDiff({ hash, path = null, historyFilePath = null } = {}) {
+    this.source = 'commit';
+    this.layoutMode = 'stacked';
+    this.commitHash = String(hash ?? '').trim() || null;
+    this.commitMeta = null;
+    this.historyFilePath = String(historyFilePath ?? '').trim() || null;
+    this.activeFilePath = path || null;
+    this.fileCache.clear();
+    this.fileErrors.clear();
+    this.loadingFiles.clear();
+    this.collapsedFiles.clear();
+    this.fileLoadPromises.clear();
+    this.requestScope = 'all';
+    this.renderLoading('Loading commit summary...');
+
+    try {
+      const query = new URLSearchParams();
+      query.set('hash', this.commitHash || '');
+      query.set('metaOnly', 'true');
+
+      const response = await fetch(resolveApiUrl(`/git/commit?${query.toString()}`));
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to load git commit');
+      }
+
+      this.data = data;
+      this.commitMeta = data.commit ?? null;
+      const initialIndex = path
+        ? Math.max(0, data.files.findIndex((file) => file.path === path))
+        : 0;
+      this.currentIndex = initialIndex;
+      this.activeFilePath = data.files?.[initialIndex]?.path ?? null;
+      this.collapsedFiles = new Set(
+        (data.files ?? [])
+          .map((file) => file.path)
+          .filter((filePath) => filePath && filePath !== this.activeFilePath),
+      );
+      if ((data.files?.length ?? 0) === 0) {
+        this.render();
+        return data;
+      }
+
+      if (this.activeFilePath) {
+        await this.loadFileForPath(this.activeFilePath, { render: false });
+      }
+      this.render();
+      return data;
+    } catch (error) {
+      console.error('[git-diff] Failed to load commit:', error);
+      this.toastController?.show('Failed to load git commit');
+      this.data = {
+        commit: null,
+        files: [],
+        metaOnly: false,
+        source: 'commit',
+        summary: { additions: 0, deletions: 0, filesChanged: 0 },
+      };
+      this.commitMeta = null;
+      this.renderEmpty('Failed to load git commit');
+      return this.data;
+    }
+  }
+
+  async open(payload = {}) {
+    return this.openWorkspaceDiff(payload);
+  }
+
+  async setLayoutMode(layoutMode) {
+    const normalizedLayout = layoutMode === 'stacked' ? 'stacked' : 'focused';
+    if (this.source !== 'commit') {
+      this.layoutMode = 'focused';
+      this.render();
+      return;
+    }
+
+    this.layoutMode = normalizedLayout;
+    if (this.activeFilePath) {
+      this.setActiveFilePath(this.activeFilePath);
+    }
+    if (this.layoutMode === 'focused') {
+      await this.loadCurrentFile();
+      return;
+    }
+
+    if (this.activeFilePath) {
+      this.collapsedFiles.delete(this.activeFilePath);
+      await this.loadFileForPath(this.activeFilePath, { render: false });
+    }
+    this.render();
+  }
+
   navigateFile(direction) {
-    if (!this.data?.files?.length) {
+    if (!this.data?.files?.length || (this.source === 'commit' && this.layoutMode === 'stacked')) {
       return;
     }
 
@@ -275,6 +469,7 @@ export class GitDiffViewController {
     }
 
     this.currentIndex = nextIndex;
+    this.activeFilePath = this.data.files[nextIndex]?.path ?? null;
     this.scrollContainer?.scrollTo({ top: 0, behavior: 'auto' });
     void this.loadCurrentFile();
   }
@@ -330,21 +525,24 @@ export class GitDiffViewController {
     `;
   }
 
-  renderUnifiedFile(file, index) {
+  renderFileHeader(file) {
     return `
-      <section class="diff-file-block" data-diff-file-index="${index}">
-        <div class="diff-file-header">
-          <span class="diff-file-path">${escapeHtml(file.path)}</span>
-          <span class="git-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
-          <span class="diff-file-header-stats"><span class="diff-stats-add">+${file.stats?.additions ?? 0}</span><span class="diff-stats-del">-${file.stats?.deletions ?? 0}</span></span>
-        </div>
-        ${file.isBinary ? `<div class="diff-binary-message">${escapeHtml(file.binaryMessage || 'Binary file changed')}</div>` : ''}
-        ${file.hunks.map((hunk) => this.renderUnifiedHunk(hunk)).join('')}
-      </section>
+      <div class="diff-file-header">
+        <span class="diff-file-path">${escapeHtml(file.path)}</span>
+        <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
+        <span class="diff-file-header-stats"><span class="ui-stat-token ui-stat-token--add diff-stats-add">+${file.stats?.additions ?? 0}</span><span class="ui-stat-token ui-stat-token--del diff-stats-del">-${file.stats?.deletions ?? 0}</span></span>
+      </div>
+    `;
+  }
+
+  renderUnifiedFileBody(file) {
+    return `
+      ${file.isBinary ? `<div class="diff-binary-message">${escapeHtml(file.binaryMessage || 'Binary file changed')}</div>` : ''}
+      ${file.hunks.map((hunk) => this.renderUnifiedHunk(hunk)).join('')}
     `;
   }
 
-  renderSplitFile(file, index) {
+  renderSplitFileBody(file) {
     const hunks = file.hunks.map((hunk) => {
       const rows = [];
       for (const block of createPairedBlocks(hunk.lines)) {
@@ -368,22 +566,201 @@ export class GitDiffViewController {
     }).join('');
 
     return `
-      <section class="diff-file-block" data-diff-file-index="${index}">
-        <div class="diff-file-header">
-          <span class="diff-file-path">${escapeHtml(file.path)}</span>
-          <span class="git-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
-          <span class="diff-file-header-stats"><span class="diff-stats-add">+${file.stats?.additions ?? 0}</span><span class="diff-stats-del">-${file.stats?.deletions ?? 0}</span></span>
+      <div class="diff-split">
+        <div class="diff-split-pane">
+          <div class="diff-split-pane-header">Before</div>
+          ${hunks}
         </div>
-        <div class="diff-split">
-          <div class="diff-split-pane">
-            <div class="diff-split-pane-header">Before</div>
-            ${hunks}
-          </div>
+      </div>
+    `;
+  }
+
+  renderDiffDetail(detail, index, { includeHeader = true } = {}) {
+    if (!detail) {
+      return '<div class="diff-empty-state">Select a file to load its diff.</div>';
+    }
+
+    if (detail.tooLarge) {
+      return `
+        ${includeHeader ? this.renderFileHeader(detail) : ''}
+        <div class="diff-limit-card">
+          <strong>Large diff withheld</strong>
+          <span>This file diff is large enough to impact rendering performance.</span>
+          <button class="ui-button btn btn-secondary diff-load-full-btn" type="button" data-load-full-diff data-diff-file-path="${escapeHtml(detail.path)}">Load full diff</button>
+        </div>
+      `;
+    }
+
+    const contentMarkup = this.mode === 'split'
+      ? this.renderSplitFileBody(detail, index)
+      : this.renderUnifiedFileBody(detail, index);
+
+    return `${includeHeader ? this.renderFileHeader(detail) : ''}${contentMarkup}`;
+  }
+
+  renderFocusedFileBody() {
+    const currentFile = this.getCurrentFile();
+    if (!currentFile) {
+      return '<div class="diff-empty-state">No changes to display.</div>';
+    }
+
+    if (this.isFileLoading(currentFile.path)) {
+      return `
+        <section class="diff-file-block">
+          ${this.renderFileHeader(currentFile)}
+          <div class="diff-empty-state">Loading file diff...</div>
+        </section>
+      `;
+    }
+
+    const errorMessage = this.fileErrors.get(currentFile.path);
+    if (errorMessage) {
+      return `
+        <section class="diff-file-block">
+          ${this.renderFileHeader(currentFile)}
+          <div class="diff-empty-state">${escapeHtml(errorMessage)}</div>
+        </section>
+      `;
+    }
+
+    return `
+      <section class="diff-file-block" data-diff-file-index="${this.currentIndex}">
+        ${this.renderDiffDetail(this.getFileDetail(currentFile.path) ?? currentFile, this.currentIndex)}
+      </section>
+    `;
+  }
+
+  renderCommitHeader() {
+    if (this.source !== 'commit' || !this.commitMeta) {
+      return '';
+    }
+
+    return `
+      <section class="diff-commit-header">
+        <div class="diff-commit-subject">${escapeHtml(this.commitMeta.subject || this.commitMeta.shortHash || 'Commit')}</div>
+        <div class="diff-commit-meta">
+          <span>${escapeHtml(this.commitMeta.shortHash || '')}</span>
+          <span>${escapeHtml(this.commitMeta.authorName || 'Unknown')}</span>
+          <span title="${escapeHtml(this.commitMeta.authoredAt || '')}">${escapeHtml(this.commitMeta.relativeDateLabel || '')}</span>
+          ${this.commitMeta.isMergeCommit ? '<span>Merge commit</span>' : ''}
+        </div>
+        <div class="diff-commit-meta diff-commit-meta-secondary">
+          <span>${escapeHtml(this.commitMeta.hash || '')}</span>
+          <span>${Number(this.data?.summary?.filesChanged || 0)} file${Number(this.data?.summary?.filesChanged || 0) === 1 ? '' : 's'}</span>
         </div>
       </section>
     `;
   }
 
+  renderCommitIndex() {
+    const files = this.data?.files ?? [];
+    const items = files.map((file, index) => {
+      const isActive = this.activeFilePath === file.path;
+      const dirPath = getPathDir(file.path);
+      return `
+        <button
+          class="ui-record-surface diff-index-item${isActive ? ' active' : ''}"
+          type="button"
+          data-diff-index-path="${escapeHtml(file.path)}"
+          aria-current="${isActive ? 'true' : 'false'}"
+        >
+          <span class="ui-record-header diff-index-item-top">
+            <span class="ui-record-title diff-index-item-name">${escapeHtml(getPathLeaf(file.path))}</span>
+            <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
+          </span>
+          ${dirPath ? `<span class="ui-record-subtitle diff-index-item-path">${escapeHtml(dirPath)}</span>` : ''}
+          <span class="ui-record-meta diff-index-item-meta">
+            <span>${index + 1}</span>
+            <span class="ui-stat-token ui-stat-token--add diff-stats-add">+${file.stats?.additions ?? 0}</span>
+            <span class="ui-stat-token ui-stat-token--del diff-stats-del">-${file.stats?.deletions ?? 0}</span>
+          </span>
+        </button>
+      `;
+    }).join('');
+
+    return `
+      <aside class="diff-commit-index" aria-label="Changed files in commit">
+        <div class="diff-commit-index-header">Changed Files</div>
+        <div class="diff-commit-index-list">
+          ${items}
+        </div>
+      </aside>
+    `;
+  }
+
+  renderStackedSection(file, index) {
+    const isCollapsed = this.isFileCollapsed(file.path);
+    const isActive = this.activeFilePath === file.path;
+    const isLoading = this.isFileLoading(file.path);
+    const errorMessage = this.fileErrors.get(file.path);
+    const detail = this.getFileDetail(file.path) ?? file;
+
+    let bodyMarkup = '';
+    if (isCollapsed) {
+      bodyMarkup = '';
+    } else if (isLoading) {
+      bodyMarkup = '<div class="diff-empty-state">Loading file diff...</div>';
+    } else if (errorMessage) {
+      bodyMarkup = `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`;
+    } else {
+      bodyMarkup = this.renderDiffDetail(detail, index, { includeHeader: false });
+    }
+
+    return `
+      <section
+        class="diff-commit-section${isActive ? ' active' : ''}${isCollapsed ? ' collapsed' : ''}"
+        id="${createSectionId(file.path)}"
+        data-diff-section-path="${escapeHtml(file.path)}"
+      >
+        <button
+          class="diff-commit-section-header"
+          type="button"
+          data-diff-section-toggle="${escapeHtml(file.path)}"
+        >
+          <span class="diff-commit-section-main">
+            ${chevronSvg(isCollapsed)}
+            <span class="diff-commit-section-copy">
+              <span class="diff-commit-section-name">${escapeHtml(getPathLeaf(file.path))}</span>
+              ${getPathDir(file.path) ? `<span class="diff-commit-section-path">${escapeHtml(getPathDir(file.path))}</span>` : ''}
+            </span>
+          </span>
+          <span class="diff-commit-section-meta">
+            <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
+            <span class="ui-stat-token ui-stat-token--add diff-stats-add">+${file.stats?.additions ?? 0}</span>
+            <span class="ui-stat-token ui-stat-token--del diff-stats-del">-${file.stats?.deletions ?? 0}</span>
+          </span>
+        </button>
+        <div class="diff-commit-section-body${isCollapsed ? ' hidden' : ''}">
+          ${bodyMarkup}
+        </div>
+      </section>
+    `;
+  }
+
+  renderCommitBody() {
+    if (this.layoutMode === 'focused') {
+      return `
+        <div class="diff-commit-shell diff-commit-shell-focused">
+          ${this.renderCommitIndex()}
+          <div class="diff-commit-main">
+            ${this.renderFocusedFileBody()}
+          </div>
+        </div>
+      `;
+    }
+
+    return `
+      <div class="diff-commit-shell diff-commit-shell-stacked">
+        ${this.renderCommitIndex()}
+        <div class="diff-commit-main">
+          <div class="diff-commit-sections">
+            ${(this.data?.files ?? []).map((file, index) => this.renderStackedSection(file, index)).join('')}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   getCurrentFile() {
     const files = this.data?.files ?? [];
     if (files.length === 0) {
@@ -393,9 +770,34 @@ export class GitDiffViewController {
     return files[this.currentIndex] ?? files[0] ?? null;
   }
 
+  getFileByPath(path) {
+    return (this.data?.files ?? []).find((file) => file.path === path) ?? null;
+  }
+
+  setActiveFilePath(path, { syncIndex = true } = {}) {
+    this.activeFilePath = path;
+    if (!syncIndex) {
+      return;
+    }
+
+    const nextIndex = Math.max(0, (this.data?.files ?? []).findIndex((file) => file.path === path));
+    if (nextIndex >= 0) {
+      this.currentIndex = nextIndex;
+    }
+  }
+
+  getCacheKeyForPath(path) {
+    if (!path) {
+      return null;
+    }
+    if (this.source === 'commit') {
+      return `commit:${this.commitHash}:${path}`;
+    }
+    return `workspace:${this.requestScope}:${path}`;
+  }
+
   getCurrentCacheKey() {
-    const currentFile = this.getCurrentFile();
-    return currentFile?.path ? `${this.requestScope}:${currentFile.path}` : null;
+    return this.getCacheKeyForPath(this.getCurrentFile()?.path ?? null);
   }
 
   getCurrentFileDetail() {
@@ -403,7 +805,28 @@ export class GitDiffViewController {
     return cacheKey ? this.fileCache.get(cacheKey) : null;
   }
 
+  getFileDetail(path) {
+    const cacheKey = this.getCacheKeyForPath(path);
+    return cacheKey ? this.fileCache.get(cacheKey) : null;
+  }
+
+  isFileCollapsed(path) {
+    return this.collapsedFiles.has(path);
+  }
+
+  isFileLoading(path) {
+    return this.loadingFiles.has(path);
+  }
+
   getCurrentActionState() {
+    if (this.source === 'commit') {
+      return {
+        canCommit: false,
+        canStage: false,
+        canUnstage: false,
+      };
+    }
+
     const currentFile = this.getCurrentFile();
     const detail = this.getCurrentFileDetail() ?? currentFile;
     const stagedCount = Number(this.repoStatus?.summary?.staged || 0);
@@ -423,6 +846,10 @@ export class GitDiffViewController {
   }
 
   getPrimaryAction() {
+    if (this.source === 'commit') {
+      return null;
+    }
+
     const actionState = this.getCurrentActionState();
     if (actionState.canStage && !actionState.canUnstage) {
       return 'stage';
@@ -443,6 +870,10 @@ export class GitDiffViewController {
   }
 
   async handleFileAction(action) {
+    if (this.source === 'commit') {
+      return;
+    }
+
     const currentFile = this.getCurrentFile();
     if (!currentFile?.path || this.pendingAction) {
       return;
@@ -470,135 +901,267 @@ export class GitDiffViewController {
     this.syncToolbar();
   }
 
-  async loadCurrentFile({ forceFullPatch = false } = {}) {
-    const currentFile = this.getCurrentFile();
-    if (!currentFile?.path) {
+  async handleIndexSelection(filePath) {
+    const file = this.getFileByPath(filePath);
+    if (!file) {
+      return;
+    }
+
+    this.setActiveFilePath(filePath);
+    if (this.source === 'commit' && this.layoutMode === 'stacked') {
+      this.collapsedFiles.delete(filePath);
+      await this.loadFileForPath(filePath, { render: false });
       this.render();
-      return null;
+      this.scrollToFileSection(filePath);
+      return;
     }
 
-    const cacheKey = this.getCurrentCacheKey();
-    const cachedFile = cacheKey ? this.fileCache.get(cacheKey) : null;
-    if (cachedFile && (!cachedFile.tooLarge || !forceFullPatch)) {
-      this.loadingFilePath = null;
+    await this.loadFileForPath(filePath);
+  }
+
+  async toggleFileSection(filePath) {
+    if (this.source !== 'commit' || this.layoutMode !== 'stacked') {
+      return;
+    }
+
+    this.setActiveFilePath(filePath);
+    if (this.collapsedFiles.has(filePath)) {
+      this.collapsedFiles.delete(filePath);
+      await this.loadFileForPath(filePath, { render: false });
       this.render();
-      return cachedFile;
+      this.scrollToFileSection(filePath);
+      return;
     }
 
-    this.loadingFilePath = currentFile.path;
+    this.collapsedFiles.add(filePath);
     this.render();
+  }
 
-    try {
-      const query = new URLSearchParams();
-      query.set('scope', this.requestScope);
-      query.set('path', currentFile.path);
-      if (forceFullPatch) {
-        query.set('allowLargePatch', 'true');
+  scrollToFileSection(filePath) {
+    if (!this.content) {
+      return;
+    }
+
+    const targetId = createSectionId(filePath);
+    const scrollToTarget = () => {
+      const section = document.getElementById?.(targetId) ?? null;
+      if (!section) {
+        return;
       }
 
-      const response = await fetch(resolveApiUrl(`/git/diff?${query.toString()}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load file diff');
+      if (this.scrollContainer?.scrollTo && this.scrollContainer.getBoundingClientRect && section.getBoundingClientRect) {
+        const containerRect = this.scrollContainer.getBoundingClientRect();
+        const sectionRect = section.getBoundingClientRect();
+        const currentTop = Number(this.scrollContainer.scrollTop) || 0;
+        const nextTop = Math.max(0, currentTop + (sectionRect.top - containerRect.top) - 8);
+        this.scrollContainer.scrollTo({ top: nextTop, behavior: 'smooth' });
+        return;
       }
 
-      const detail = {
-        ...currentFile,
-        ...(data.files?.[0] ?? {}),
-      };
-      if (cacheKey) {
-        this.fileCache.set(cacheKey, detail);
+      section.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+    };
+
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(scrollToTarget);
+      return;
+    }
+
+    setTimeout(scrollToTarget, 0);
+  }
+
+  handleScrollSelection() {
+    if (this.source !== 'commit' || this.layoutMode !== 'stacked' || !this.scrollContainer || !this.content) {
+      return;
+    }
+
+    const sections = Array.from(this.content.querySelectorAll?.('[data-diff-section-path]') ?? []);
+    if (sections.length === 0) {
+      return;
+    }
+
+    const containerRect = this.scrollContainer.getBoundingClientRect?.();
+    if (!containerRect) {
+      return;
+    }
+
+    const threshold = containerRect.top + 120;
+    let nextPath = null;
+    for (const section of sections) {
+      const rect = section.getBoundingClientRect?.();
+      if (!rect) {
+        continue;
+      }
+      const sectionPath = section.getAttribute?.('data-diff-section-path');
+      if (!sectionPath) {
+        continue;
       }
-      this.loadingFilePath = null;
+      if (rect.top <= threshold) {
+        nextPath = sectionPath;
+      } else if (!nextPath) {
+        nextPath = sectionPath;
+        break;
+      } else {
+        break;
+      }
+    }
+
+    if (nextPath && nextPath !== this.activeFilePath) {
+      this.setActiveFilePath(nextPath);
       this.render();
-      return detail;
-    } catch (error) {
-      console.error('[git-diff] Failed to load file diff:', error);
-      this.toastController?.show('Failed to load file diff');
-      this.loadingFilePath = null;
+    }
+  }
+
+  async loadCurrentFile({ forceFullPatch = false } = {}) {
+    const currentFile = this.getCurrentFile();
+    if (!currentFile?.path) {
       this.render();
       return null;
     }
+
+    return this.loadFileForPath(currentFile.path, { forceFullPatch });
   }
 
-  renderCurrentFile() {
-    const currentFile = this.getCurrentFile();
-    if (!currentFile) {
-      return '<div class="diff-empty-state">No changes to display.</div>';
+  async loadFileForPath(filePath, { forceFullPatch = false, render = true } = {}) {
+    const file = this.getFileByPath(filePath);
+    if (!file?.path) {
+      if (render) {
+        this.render();
+      }
+      return null;
     }
 
-    const detail = this.getCurrentFileDetail();
-    if (this.loadingFilePath === currentFile.path) {
-      return `
-        <section class="diff-file-block">
-          <div class="diff-file-header">
-            <span class="diff-file-path">${escapeHtml(currentFile.path)}</span>
-            <span class="git-status-badge ${badgeClass(currentFile.status)}">${escapeHtml(currentFile.status)}</span>
-          </div>
-          <div class="diff-empty-state">Loading file diff...</div>
-        </section>
-      `;
+    this.setActiveFilePath(filePath);
+    const cacheKey = this.getCacheKeyForPath(filePath);
+    const cachedFile = cacheKey ? this.fileCache.get(cacheKey) : null;
+    if (cachedFile && (!cachedFile.tooLarge || !forceFullPatch)) {
+      if (render) {
+        this.render();
+      }
+      return cachedFile;
     }
 
-    if (!detail) {
-      return `
-        <section class="diff-file-block">
-          <div class="diff-file-header">
-            <span class="diff-file-path">${escapeHtml(currentFile.path)}</span>
-            <span class="git-status-badge ${badgeClass(currentFile.status)}">${escapeHtml(currentFile.status)}</span>
-          </div>
-          <div class="diff-empty-state">Select a file to load its diff.</div>
-        </section>
-      `;
+    const requestKey = `${filePath}:${forceFullPatch ? 'full' : 'partial'}`;
+    if (this.fileLoadPromises.has(requestKey)) {
+      return this.fileLoadPromises.get(requestKey);
     }
 
-    if (detail.tooLarge) {
-      return `
-        <section class="diff-file-block">
-          <div class="diff-file-header">
-            <span class="diff-file-path">${escapeHtml(detail.path)}</span>
-            <span class="git-status-badge ${badgeClass(detail.status)}">${escapeHtml(detail.status)}</span>
-            <span class="diff-file-header-stats"><span class="diff-stats-add">+${detail.stats?.additions ?? 0}</span><span class="diff-stats-del">-${detail.stats?.deletions ?? 0}</span></span>
-          </div>
-          <div class="diff-limit-card">
-            <strong>Large diff withheld</strong>
-            <span>This file diff is large enough to impact rendering performance.</span>
-            <button class="btn btn-secondary diff-load-full-btn" type="button" data-load-full-diff>Load full diff</button>
-          </div>
-        </section>
-      `;
+    this.loadingFiles.add(filePath);
+    this.fileErrors.delete(filePath);
+    if (render) {
+      this.render();
     }
 
-    return this.mode === 'split'
-      ? this.renderSplitFile(detail, this.currentIndex)
-      : this.renderUnifiedFile(detail, this.currentIndex);
+    const requestPromise = (async () => {
+      try {
+        let detail;
+        if (this.source === 'commit') {
+          const query = new URLSearchParams();
+          query.set('hash', this.commitHash || '');
+          query.set('path', filePath);
+          if (forceFullPatch) {
+            query.set('allowLargePatch', 'true');
+          }
+
+          const response = await fetch(resolveApiUrl(`/git/commit?${query.toString()}`));
+          const data = await response.json();
+          if (!response.ok) {
+            throw new Error(data.error || 'Failed to load commit file diff');
+          }
+
+          detail = {
+            ...file,
+            ...(data.files?.[0] ?? {}),
+          };
+        } else {
+          const query = new URLSearchParams();
+          query.set('scope', this.requestScope);
+          query.set('path', filePath);
+          if (forceFullPatch) {
+            query.set('allowLargePatch', 'true');
+          }
+
+          const response = await fetch(resolveApiUrl(`/git/diff?${query.toString()}`));
+          const data = await response.json();
+          if (!response.ok) {
+            throw new Error(data.error || 'Failed to load file diff');
+          }
+
+          detail = {
+            ...file,
+            ...(data.files?.[0] ?? {}),
+          };
+        }
+
+        if (cacheKey) {
+          this.fileCache.set(cacheKey, detail);
+        }
+        this.fileErrors.delete(filePath);
+        return detail;
+      } catch (error) {
+        console.error('[git-diff] Failed to load file diff:', error);
+        const message = this.source === 'commit' ? 'Failed to load commit file diff' : 'Failed to load file diff';
+        this.fileErrors.set(filePath, message);
+        this.toastController?.show(message);
+        return null;
+      } finally {
+        this.loadingFiles.delete(filePath);
+        this.fileLoadPromises.delete(requestKey);
+        this.render();
+      }
+    })();
+
+    this.fileLoadPromises.set(requestKey, requestPromise);
+    return requestPromise;
   }
 
   syncToolbar() {
     const totalFiles = this.data?.files?.length ?? 0;
     const visibleIndex = totalFiles === 0 ? 0 : this.currentIndex + 1;
+    const isCommitSource = this.source === 'commit';
+    const isStackedCommit = isCommitSource && this.layoutMode === 'stacked';
+
     if (this.fileIndicator) {
-      this.fileIndicator.textContent = totalFiles > 0
-        ? `${visibleIndex} / ${totalFiles} files`
-        : '0 / 0 files';
+      if (isStackedCommit) {
+        this.fileIndicator.textContent = `${totalFiles} file${totalFiles === 1 ? '' : 's'}`;
+      } else {
+        this.fileIndicator.textContent = totalFiles > 0
+          ? `${visibleIndex} / ${totalFiles} files`
+          : '0 / 0 files';
+      }
     }
 
     if (this.stats) {
       const additions = this.data?.summary?.additions ?? 0;
       const deletions = this.data?.summary?.deletions ?? 0;
       this.stats.innerHTML = `
-        <span class="diff-stats-add">+${additions}</span>
-        <span class="diff-stats-del">-${deletions}</span>
+        <span class="ui-stat-token ui-stat-token--add diff-stats-add">+${additions}</span>
+        <span class="ui-stat-token ui-stat-token--del diff-stats-del">-${deletions}</span>
       `;
     }
 
     this.modeButtons.forEach((button) => {
+      button.classList.remove('hidden');
       button.classList.toggle('active', button.getAttribute('data-diff-mode') === this.mode);
     });
+    this.layoutButtons.forEach((button) => {
+      button.classList.toggle('active', button.getAttribute('data-diff-layout') === this.layoutMode);
+    });
+
     const hasCurrentFile = Boolean(this.getCurrentFile()?.path);
     const actionState = this.getCurrentActionState();
     const primaryAction = this.getPrimaryAction();
-    this.openEditorButton?.toggleAttribute('disabled', !hasCurrentFile);
+
+    this.backToHistoryButton?.classList.toggle('hidden', !isCommitSource);
+    this.gitActionsGroup?.classList.toggle('hidden', isCommitSource);
+    this.editorActionsGroup?.classList.toggle('hidden', isCommitSource);
+    this.actionsDivider?.classList.toggle('hidden', isCommitSource);
+    this.layoutToggle?.classList.toggle('hidden', !isCommitSource);
+    this.stats?.classList.remove('hidden');
+
+    if (this.openEditorButton) {
+      this.openEditorButton.textContent = 'Open in Editor';
+    }
+    this.openEditorButton?.toggleAttribute('disabled', !hasCurrentFile || isCommitSource);
     if (this.primaryActionButton) {
       this.primaryActionButton.textContent = this.pendingAction === primaryAction
         ? 'Working...'
@@ -607,7 +1170,7 @@ export class GitDiffViewController {
           : 'Stage';
       this.primaryActionButton.toggleAttribute(
         'disabled',
-        !hasCurrentFile || !primaryAction || Boolean(this.pendingAction),
+        isCommitSource || !hasCurrentFile || !primaryAction || Boolean(this.pendingAction),
       );
     }
     if (this.commitButton) {
@@ -615,10 +1178,14 @@ export class GitDiffViewController {
     }
     this.commitButton?.toggleAttribute(
       'disabled',
-      !actionState.canCommit || Boolean(this.pendingAction),
+      isCommitSource || !actionState.canCommit || Boolean(this.pendingAction),
     );
-    this.prevButton?.toggleAttribute('disabled', this.currentIndex <= 0);
-    this.nextButton?.toggleAttribute('disabled', totalFiles === 0 || this.currentIndex >= totalFiles - 1);
+    this.prevButton?.classList.remove('hidden');
+    this.nextButton?.classList.remove('hidden');
+    this.prevButton?.classList.toggle('hidden', isStackedCommit);
+    this.nextButton?.classList.toggle('hidden', isStackedCommit);
+    this.prevButton?.toggleAttribute('disabled', isStackedCommit || this.currentIndex <= 0);
+    this.nextButton?.toggleAttribute('disabled', isStackedCommit || totalFiles === 0 || this.currentIndex >= totalFiles - 1);
   }
 
   render() {
@@ -626,7 +1193,7 @@ export class GitDiffViewController {
 
     const files = this.data?.files ?? [];
     if (files.length === 0) {
-      this.renderEmpty('No changes to display.');
+      this.renderEmpty(this.source === 'commit' ? 'No commit changes to display.' : 'No changes to display.');
       return;
     }
 
@@ -634,11 +1201,41 @@ export class GitDiffViewController {
       return;
     }
 
-    this.content.innerHTML = this.renderCurrentFile();
+    if (this.source === 'commit') {
+      this.content.innerHTML = `${this.renderCommitHeader()}${this.renderCommitBody()}`;
+    } else {
+      this.content.innerHTML = this.renderFocusedFileBody();
+    }
     this.syncToolbar();
   }
 
-  getToolbarTitle({ filePath = null, scope = 'all' } = {}) {
+  getToolbarTitle({ commitHash = null, filePath = null, path = null, scope = 'all', source = 'workspace' } = {}) {
+    if (source === 'commit' || this.source === 'commit') {
+      if (this.layoutMode === 'stacked') {
+        if (this.commitMeta?.shortHash) {
+          return `Commit ${this.commitMeta.shortHash}`;
+        }
+        if (commitHash) {
+          return `Commit ${String(commitHash).slice(0, 7)}`;
+        }
+        return 'Commit Diff';
+      }
+
+      if (path) {
+        return getPathLeaf(path);
+      }
+      if (this.activeFilePath) {
+        return getPathLeaf(this.activeFilePath);
+      }
+      if (this.commitMeta?.shortHash) {
+        return `Commit ${this.commitMeta.shortHash}`;
+      }
+      if (commitHash) {
+        return `Commit ${String(commitHash).slice(0, 7)}`;
+      }
+      return 'Commit Diff';
+    }
+
     if (filePath) {
       return getPathLeaf(filePath);
     }