feat(avatars): option to hide avatars and show author names only

package.json

@@ -409,6 +409,11 @@
           "minimum": 1,
           "markdownDescription": "Number of additional commits fetched each time the **Load more commits** button is clicked."
         },
+        "gitGraphPlus.showAvatars": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Show author/committer avatars in the graph, hover cards, commit details, and stats view. When off, only names are shown and avatars are not requested or fetched."
+        },
         "gitGraphPlus.interactiveRebase.mode": {
           "type": "string",
           "enum": ["ui", "classic"],

src/panels/MainPanel.ts

@@ -5,7 +5,7 @@ import { GitService, GitError } from '../git/git-service';
 import { formatGitError, isAuthFailure, transportFromRemoteUrl } from '../git/git-error-formatter';
 import { splitUpstreamRef } from '../git/git-parser';
 import { samePath } from '../utils/path';
-import { readTimeoutMs, readInitialCommitCount, readLoadMoreCommitCount, readInteractiveRebaseMode } from '../utils/config';
+import { readTimeoutMs, readInitialCommitCount, readLoadMoreCommitCount, readInteractiveRebaseMode, readShowAvatars } from '../utils/config';
 import { buildClassicRebaseCommand } from '../git/classic-rebase';
 import { buildFullGraph } from '../git/git-graph-builder';
 import { compileBranchColorRules, makeBranchColorResolver } from '../git/branch-color-resolver';
@@ -226,6 +226,9 @@ export class MainPanel {
         if (e.affectsConfiguration('gitGraphPlus.loadMoreCommitCount')) {
           this.post({ type: 'setLoadMoreCount', payload: { count: readLoadMoreCommitCount() } });
         }
+        if (e.affectsConfiguration('gitGraphPlus.showAvatars')) {
+          this.post({ type: 'setShowAvatars', payload: { enabled: readShowAvatars() } });
+        }
         if (e.affectsConfiguration('gitGraphPlus.branchColors')) {
           this.refreshAll();
         }
@@ -256,6 +259,7 @@ export class MainPanel {
     this.post({ type: 'setGraphColors', payload: { colors: this.readGraphColors() } });
     this.post({ type: 'setLoadMoreCount', payload: { count: readLoadMoreCommitCount() } });
     this.post({ type: 'setInteractiveRebaseMode', payload: { mode: readInteractiveRebaseMode() } });
+    this.post({ type: 'setShowAvatars', payload: { enabled: readShowAvatars() } });
     void this.postCommitLinkRules();
 
     this.panel.webview.onDidReceiveMessage(

src/utils/__tests__/config.test.ts

@@ -13,7 +13,7 @@ vi.mock('vscode', () => ({
   },
 }));
 
-import { readTimeoutMs, readInitialCommitCount, readLoadMoreCommitCount } from '../config';
+import { readTimeoutMs, readInitialCommitCount, readLoadMoreCommitCount, readShowAvatars } from '../config';
 
 describe('readTimeoutMs', () => {
   // Back-compat alias so the existing timeout cases below read naturally.
@@ -101,3 +101,26 @@ describe('readLoadMoreCommitCount', () => {
     expect(readLoadMoreCommitCount()).toBe(50);
   });
 });
+
+describe('readShowAvatars', () => {
+  beforeEach(() => { h.values = {}; });
+
+  it('defaults to true when unset', () => {
+    expect(readShowAvatars()).toBe(true);
+  });
+
+  it('returns false when explicitly disabled', () => {
+    h.values.showAvatars = false;
+    expect(readShowAvatars()).toBe(false);
+  });
+
+  it('returns true when explicitly enabled', () => {
+    h.values.showAvatars = true;
+    expect(readShowAvatars()).toBe(true);
+  });
+
+  it('falls back to true for a non-boolean value', () => {
+    h.values.showAvatars = 'no';
+    expect(readShowAvatars()).toBe(true);
+  });
+});

src/utils/config.ts

@@ -47,3 +47,12 @@ export function readInteractiveRebaseMode(): InteractiveRebaseMode {
     vscode.workspace.getConfiguration('gitGraphPlus').get<string>('interactiveRebase.mode', 'ui'),
   );
 }
+
+/**
+ * Reads `gitGraphPlus.showAvatars` — whether author/committer avatars are
+ * shown in the graph, hover cards, commit details, and stats view. Defaults to
+ * true; only an explicit `false` disables them.
+ */
+export function readShowAvatars(): boolean {
+  return vscode.workspace.getConfiguration('gitGraphPlus').get<boolean>('showAvatars', true) !== false;
+}

src/utils/message-bus.ts

@@ -159,6 +159,7 @@ export type ExtensionMessage =
   | { type: 'setDefaults'; payload: ModalDefaults }
   | { type: 'setLoadMoreCount'; payload: { count: number } }
   | { type: 'setBadgeBarThickness'; payload: { width: number } }
+  | { type: 'setShowAvatars'; payload: { enabled: boolean } }
   | { type: 'setGraphColors'; payload: { colors: string[] } }
   | { type: 'setCommitLinkRules'; payload: { rules: LinkRule[] } }
   | { type: 'repoList'; payload: { repos: Array<{ path: string; name: string; type: 'root' | 'submodule' | 'nested' }>; active: string } }

webview-ui/src/App.svelte

@@ -112,6 +112,9 @@ import AmendModal from './components/modals/AmendModal.svelte';
         case 'setBadgeBarThickness':
           uiStore.badgeBarWidth = msg.payload.width;
           break;
+        case 'setShowAvatars':
+          avatarStore.setEnabled(msg.payload.enabled);
+          break;
         case 'setLoadMoreCount':
           uiStore.loadMoreCount = msg.payload.count;
           break;

webview-ui/src/__tests__/App.test.ts

@@ -6,6 +6,7 @@ import { commitStore } from '../lib/stores/commits.svelte';
 import { branchStore } from '../lib/stores/branches.svelte';
 import { uiStore } from '../lib/stores/ui.svelte';
 import { modalStore } from '../lib/stores/modals.svelte';
+import { avatarStore } from '../lib/stores/avatars.svelte';
 
 function postMsg(type: string, payload?: unknown) {
   window.dispatchEvent(new MessageEvent('message', { data: { type, payload } }));
@@ -103,6 +104,14 @@ describe('App — message handling', () => {
     });
   });
 
+  it('setShowAvatars toggles avatarStore.enabled', async () => {
+    render(App);
+    postMsg('setShowAvatars', { enabled: false });
+    await waitFor(() => expect(avatarStore.enabled).toBe(false));
+    postMsg('setShowAvatars', { enabled: true });
+    await waitFor(() => expect(avatarStore.enabled).toBe(true));
+  });
+
   it('repoList populates uiStore.repos and activeRepo', async () => {
     render(App);
     postMsg('repoList', {

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

@@ -624,7 +624,9 @@
           <div class="info-column">
             <div class="info-label">{t('details.author')}</div>
             <div class="person-info">
-              <img class="avatar-lg" src={avatarStore.url(commit.author.email, 48)} alt="" />
+              {#if avatarStore.enabled}
+                <img class="avatar-lg" src={avatarStore.url(commit.author.email, 48)} alt="" />
+              {/if}
               <div class="person-details">
                 <div class="person-name">
                   {commit.author.name}
@@ -645,7 +647,9 @@
             <div class="info-column">
               <div class="info-label">{t('details.committer')}</div>
               <div class="person-info">
-                <img class="avatar-lg" src={avatarStore.url(commit.committer.email, 48)} alt="" />
+                {#if avatarStore.enabled}
+                  <img class="avatar-lg" src={avatarStore.url(commit.committer.email, 48)} alt="" />
+                {/if}
                 <div class="person-details">
                   <div class="person-name">
                     {commit.committer.name}

webview-ui/src/components/commit/__tests__/CommitDetails.test.ts

@@ -5,6 +5,7 @@ import { i18n } from '../../../lib/i18n/index.svelte';
 import { commitStore } from '../../../lib/stores/commits.svelte';
 import { uiStore } from '../../../lib/stores/ui.svelte';
 import { modalStore } from '../../../lib/stores/modals.svelte';
+import { avatarStore } from '../../../lib/stores/avatars.svelte';
 import type { Commit, DiffData } from '../../../lib/types';
 
 function commit(over: Partial<Commit> = {}): Commit {
@@ -1461,3 +1462,36 @@ describe('CommitDetails — reverse changes (committed view)', () => {
     expect(msg!.payload).toMatchObject({ commit: 'h1', file: 'src/a.ts', hunkIndex: 0, lineIndices: [1, 2] });
   });
 });
+
+describe('CommitDetails — avatars', () => {
+  afterEach(() => {
+    avatarStore.setEnabled(true);
+  });
+
+  it('renders author and committer avatars by default', async () => {
+    const { container } = render(CommitDetails, {
+      commit: commit({
+        committer: { name: 'Bob', email: 'b@x.com', date: '2024-01-15T11:00:00Z' },
+      }),
+    });
+    await waitFor(() => container.querySelector('.person-name'));
+    expect(container.querySelectorAll('img.avatar-lg').length).toBe(2);
+  });
+
+  it('hides avatars but keeps author and committer names when showAvatars is off', async () => {
+    avatarStore.setEnabled(false);
+    const { container } = render(CommitDetails, {
+      commit: commit({
+        committer: { name: 'Bob', email: 'b@x.com', date: '2024-01-15T11:00:00Z' },
+      }),
+    });
+    await waitFor(() => container.querySelector('.person-name'));
+    expect(container.querySelector('img.avatar-lg')).toBeFalsy();
+    const names = Array.from(container.querySelectorAll('.person-name')).map(el => el.textContent ?? '');
+    expect(names.some(n => n.includes('Alice'))).toBe(true);
+    expect(names.some(n => n.includes('Bob'))).toBe(true);
+    expect(
+      globalThis.__postedMessages.some(m => (m.data as { type?: string }).type === 'getAvatar')
+    ).toBe(false);
+  });
+});

webview-ui/src/components/common/CommitHoverCard.svelte

@@ -54,7 +54,9 @@
 >
   <div class="card-header">
     <div class="author-row">
-      <img class="avatar" src={avatarStore.url(commit.author.email, 32)} alt="" />
+      {#if avatarStore.enabled}
+        <img class="avatar" src={avatarStore.url(commit.author.email, 32)} alt="" />
+      {/if}
       <div class="author-meta">
         <div class="name-line">
           <span class="author-name">{commit.author.name}</span>

webview-ui/src/components/common/StatsView.svelte

@@ -65,7 +65,9 @@
         {#each byAuthor as author, i}
           <div class="author-row">
             <span class="author-rank">#{i + 1}</span>
-            <img class="author-avatar" src={avatarStore.url(author.email, 24)} alt="" />
+            {#if avatarStore.enabled}
+              <img class="author-avatar" src={avatarStore.url(author.email, 24)} alt="" />
+            {/if}
             <div class="author-info">
               <span class="author-name truncate">{author.author}</span>
               <div class="author-bar-container">

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

@@ -1362,7 +1362,9 @@
       <div class="col-author">
         {#if commit.hash !== 'UNCOMMITTED'}
           <span class="author-id" use:tooltip={commit.author.name}>
-            <img class="avatar-sm" src={avatarStore.url(commit.author.email, 20)} alt="" />
+            {#if avatarStore.enabled}
+              <img class="avatar-sm" src={avatarStore.url(commit.author.email, 20)} alt="" />
+            {/if}
             <span class="author-name truncate">{commit.author.name}</span>
           </span>
           {#if commit.signatureStatus && commit.signatureStatus !== 'none'}

webview-ui/src/components/graph/__tests__/CommitGraph.test.ts

@@ -6,6 +6,7 @@ import { commitStore } from '../../../lib/stores/commits.svelte';
 import { branchStore } from '../../../lib/stores/branches.svelte';
 import { uiStore } from '../../../lib/stores/ui.svelte';
 import { modalStore } from '../../../lib/stores/modals.svelte';
+import { avatarStore } from '../../../lib/stores/avatars.svelte';
 import { i18n } from '../../../lib/i18n/index.svelte';
 import type { Commit, CommitGraphData } from '../../../lib/types';
 
@@ -418,3 +419,29 @@ describe('CommitGraph signature icon', () => {
     uiStore.exitMultiSelect();
   });
 });
+
+describe('CommitGraph avatars', () => {
+  afterEach(() => {
+    avatarStore.setEnabled(true);
+  });
+
+  it('renders the author avatar by default', async () => {
+    commitStore.setData(makeGraphData([makeCommit('h1', 'first')]));
+    const { container } = render(CommitGraph, {});
+    await tick();
+    expect(container.querySelector('img.avatar-sm')).toBeTruthy();
+    expect(container.querySelector('.author-name')?.textContent).toBe('A');
+  });
+
+  it('hides the avatar and still shows the author name when showAvatars is off', async () => {
+    avatarStore.setEnabled(false);
+    commitStore.setData(makeGraphData([makeCommit('h1', 'first')]));
+    const { container } = render(CommitGraph, {});
+    await tick();
+    expect(container.querySelector('img.avatar-sm')).toBeFalsy();
+    expect(container.querySelector('.author-name')?.textContent).toBe('A');
+    expect(
+      globalThis.__postedMessages.some(m => (m.data as { type?: string }).type === 'getAvatar')
+    ).toBe(false);
+  });
+});

webview-ui/src/lib/stores/__tests__/avatars.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach } from 'vitest';
 import { avatarStore } from '../avatars.svelte';
 
 const TRANSPARENT_PIXEL =
@@ -50,3 +50,31 @@ describe('avatarStore', () => {
     expect(avatarStore.url('  fifth@example.com  ', 32)).toBe('data:image/png;base64,BBBB');
   });
 });
+
+describe('avatarStore — disabled (showAvatars off)', () => {
+  afterEach(() => {
+    avatarStore.setEnabled(true);
+  });
+
+  it('returns the transparent pixel and posts no getAvatar while disabled', () => {
+    avatarStore.setEnabled(false);
+    globalThis.__postedMessages = [];
+    expect(avatarStore.url('hidden@example.com', 32)).toBe(TRANSPARENT_PIXEL);
+    expect(postedTypes()).not.toContain('getAvatar');
+    expect(globalThis.__postedMessages.length).toBe(0);
+  });
+
+  it('resumes requesting and serving avatars after re-enabling', () => {
+    avatarStore.setEnabled(false);
+    globalThis.__postedMessages = [];
+    expect(avatarStore.url('resume@example.com', 32)).toBe(TRANSPARENT_PIXEL);
+    expect(postedTypes()).not.toContain('getAvatar');
+
+    avatarStore.setEnabled(true);
+    expect(avatarStore.url('resume@example.com', 32)).toBe(TRANSPARENT_PIXEL);
+    expect(postedTypes()).toContain('getAvatar');
+
+    avatarStore.receive('resume@example.com', 32, 'data:image/png;base64,RESUMED');
+    expect(avatarStore.url('resume@example.com', 32)).toBe('data:image/png;base64,RESUMED');
+  });
+});

webview-ui/src/lib/stores/avatars.svelte.ts

@@ -21,12 +21,20 @@ class AvatarStore {
   // key -> data URI; '' means resolved-but-unavailable (failed fetch).
   private cache = new SvelteMap<string, string>();
   private requested = new Set<string>();
+  /** Mirrors `gitGraphPlus.showAvatars`; when false no avatar is requested
+   *  and `url()` hands back the transparent pixel for every key. */
+  enabled = $state(true);
+
+  setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
 
   private key(email: string, size: number): string {
     return `${email.trim().toLowerCase()}:${size}`;
   }
 
   url(email: string, size: number): string {
+    if (!this.enabled) return TRANSPARENT_PIXEL;
     const key = this.key(email, size);
     const hit = this.cache.get(key);
     if (hit === undefined && !this.requested.has(key)) {