feat(graph): add comparison panel toggle for multi-selected commits

- Add "View Changes" / "Hide Changes" toggle to the multi-select context menu
- Gate comparison fetch on panel visibility so reopening reloads the diff
- Esc closes the panel first, then clears the selection on a second press
- Keep the multi-selection when closing the panel via the X button

Author: the0807

webview-ui/src/App.svelte

@@ -256,7 +256,8 @@ import AmendModal from './components/modals/AmendModal.svelte';
       vscode.postMessage({ type: 'getBranches' });
     }
 
-    if (e.key === 'Escape' && !modalStore.anyOpen && uiStore.showBottomPanel && (uiStore.selectedCommitHash || uiStore.comparing)) {
+    // Multi-select Esc is handled in CommitGraph (1st Esc closes the panel, 2nd clears the selection).
+    if (e.key === 'Escape' && !modalStore.anyOpen && !uiStore.multiSelectArmed && uiStore.showBottomPanel && (uiStore.selectedCommitHash || uiStore.comparing)) {
       e.preventDefault();
       if (uiStore.commitDetailFullscreen) {
         uiStore.commitDetailFullscreen = false;

webview-ui/src/components/commit/CommitDetails.svelte

@@ -566,7 +566,7 @@
       <button class="tab-action-btn" aria-label={uiStore.commitDetailFullscreen ? t('details.restore') : t('details.fullscreen')} use:tooltip={uiStore.commitDetailFullscreen ? t('details.restore') : t('details.fullscreen')} onclick={() => { uiStore.commitDetailFullscreen = !uiStore.commitDetailFullscreen; }}>
         <i class="codicon {uiStore.commitDetailFullscreen ? 'codicon-chevron-down' : 'codicon-chevron-up'}"></i>
       </button>
-      <button class="tab-action-btn" aria-label={t('common.close')} use:tooltip={t('common.close')} onclick={() => { uiStore.selectCommit(null); uiStore.showBottomPanel = false; uiStore.commitDetailFullscreen = false; }}>
+      <button class="tab-action-btn" aria-label={t('common.close')} use:tooltip={t('common.close')} onclick={() => { if (!uiStore.multiSelectArmed) { uiStore.selectCommit(null); } uiStore.showBottomPanel = false; uiStore.commitDetailFullscreen = false; }}>
         <i class="codicon codicon-close"></i>
       </button>
     </div>

webview-ui/src/components/graph/CommitGraph.svelte

@@ -650,6 +650,13 @@
         .reverse();
       const multiItems: any[] = [];
 
+      // Toggle the bottom panel showing the comparison of the selected commits.
+      multiItems.push({
+        label: uiStore.showBottomPanel ? t('graph.hideChanges') : t('graph.viewChanges'),
+        action: () => { uiStore.showBottomPanel = !uiStore.showBottomPanel; },
+      });
+      multiItems.push({ separator: true, label: '', action: () => {} });
+
       const chain = getSquashChain(sel, commitStore.commitMap as Map<string, Commit>);
       if (chain) {
         multiItems.push({
@@ -1092,7 +1099,10 @@
   // Orchestration: when armed selection changes, request the right compare data.
   let lastCompareKey = '';
   $effect(() => {
-    if (!uiStore.multiSelectArmed) { lastCompareKey = ''; return; }
+    // Only fetch the comparison while the bottom panel is open — the panel hosts
+    // CommitDetails, which is the listener for the compare/section responses.
+    // Opening it via "View Changes" re-runs this effect and (re)loads the data.
+    if (!uiStore.multiSelectArmed || !uiStore.showBottomPanel) { lastCompareKey = ''; return; }
     const sel = uiStore.selectedCommitHashes;
     if (sel.length < 2) { lastCompareKey = ''; return; }
     // Order by display order (newest first).
@@ -1154,6 +1164,8 @@
   if (e.key === 'Escape') {
     if (bisectBadCommit) { bisectBadCommit = null; }
     else if (bisectCulpritHash) { vscode.postMessage({ type: 'bisectReset' }); }
+    // 1st Esc closes the open bottom panel; 2nd Esc clears the selection.
+    else if (uiStore.multiSelectArmed && uiStore.showBottomPanel) { uiStore.showBottomPanel = false; }
     else if (uiStore.multiSelectArmed) { uiStore.exitMultiSelect(); }
   } else {
     handleGraphNavKey(e);

webview-ui/src/lib/i18n/en.ts

@@ -166,6 +166,8 @@ export const en: Record<string, string> = {
   'graph.commitFixup': 'Commit Fixup',
   'graph.savePatch': 'Save as Patch',
   'graph.compareToLocal': 'Compare to Local Changes',
+  'graph.viewChanges': 'View Changes',
+  'graph.hideChanges': 'Hide Changes',
   'graph.copyShortSHA': 'Copy Short SHA',
   'graph.copySHA': 'Copy Commit SHA',
   'graph.copyCommitInfo': 'Copy Commit Info',

webview-ui/src/lib/i18n/ko.ts

@@ -166,6 +166,8 @@ export const ko: Record<string, string> = {
   'graph.commitFixup': 'Commit Fixup',
   'graph.savePatch': '패치로 저장',
   'graph.compareToLocal': '로컬 변경사항과 비교',
+  'graph.viewChanges': '변경사항 보기',
+  'graph.hideChanges': '변경사항 닫기',
   'graph.copyShortSHA': 'Short SHA 복사',
   'graph.copySHA': 'Commit SHA 복사',
   'graph.copyCommitInfo': 'Commit 정보 복사',

webview-ui/src/lib/i18n/zh.ts

@@ -166,6 +166,8 @@ export const zh: Record<string, string> = {
   'graph.commitFixup': 'Commit Fixup',
   'graph.savePatch': '另存为补丁',
   'graph.compareToLocal': '与本地更改比较',
+  'graph.viewChanges': '查看更改',
+  'graph.hideChanges': '关闭更改',
   'graph.copyShortSHA': '复制短 SHA',
   'graph.copySHA': '复制提交 SHA',
   'graph.copyCommitInfo': '复制提交信息',