feat(commit-links): clickable auto-links in commit messages (#49)

Turn issue/ticket/PR references in commit messages into clickable links
in the Graph, Commit Details, and Reflog views. Supports user-defined
regex rules (gitGraphPlus.commitMessageLinks) and built-in GitHub/GitLab
auto-detection from the origin remote (gitGraphPlus.autoDetectRepoLinks):
!N is linked as a GitLab merge request on any host, #N as an issue on
github.com/gitlab.com. Links open in the external browser.

Author: the0807

package.json

@@ -472,6 +472,30 @@
           ],
           "markdownDescription": "Color palette auto-assigned to graph rails. Each entry is a hex color (`#rgb` or `#rrggbb`). When there are more branches than colors, the palette cycles. Invalid entries are ignored; an empty list falls back to the built-in palette. `branchColors` pattern rules, when present, take precedence over this palette."
         },
+        "gitGraphPlus.commitMessageLinks": {
+          "type": "array",
+          "default": [],
+          "items": {
+            "type": "object",
+            "properties": {
+              "pattern": {
+                "type": "string",
+                "description": "Regular expression matched against the commit message, e.g. ([A-Z]+-\\d+). Capture groups are referenced in the URL as $1, $2, ..."
+              },
+              "url": {
+                "type": "string",
+                "description": "URL template. $1, $2, ... are replaced by the corresponding capture groups, e.g. https://my.tracker/browse/$1"
+              }
+            },
+            "required": ["pattern", "url"]
+          },
+          "markdownDescription": "Turn matching text in commit messages into clickable links (Graph, Commit Details, and Reflog). Each rule is `{ \"pattern\": <regex>, \"url\": <template> }`; `$1`, `$2`, … in the template are replaced by the pattern's capture groups. Rules are applied in order, before built-in auto-detection. Only `http`/`https` URLs are opened. Tip: put rules in workspace settings (`.vscode/settings.json`) for per-repository trackers."
+        },
+        "gitGraphPlus.autoDetectRepoLinks": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Automatically link references based on the `origin` remote. `!123` (GitLab merge requests) is linked for **any** host, including self-hosted GitLab. `#123` (issues) is linked for **github.com** and **gitlab.com** only — on a self-hosted host the issue path can't be determined, so add a `gitGraphPlus.commitMessageLinks` rule for those."
+        },
         "gitGraphPlus.defaults.push.force": { "type": "string", "enum": ["none", "with-lease", "force"], "default": "none", "markdownDescription": "⚠️ `with-lease`/`force` pre-checks a force push, which can overwrite remote history." },
         "gitGraphPlus.defaults.push.setUpstream": { "type": "boolean", "default": true, "markdownDescription": "Set the upstream tracking reference with `-u` when pushing." },
         "gitGraphPlus.defaults.push.allTags": { "type": "boolean", "default": false, "markdownDescription": "Also push all tags (`--tags`)." },

src/git/__tests__/commit-link-rules.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest';
+import {
+  parseRemoteHost,
+  buildBuiltinRules,
+  resolveCommitLinkRules,
+  type LinkRule,
+} from '../commit-link-rules';
+
+describe('parseRemoteHost', () => {
+  it('parses ssh shorthand', () => {
+    expect(parseRemoteHost('git@github.com:owner/repo.git')).toEqual({
+      host: 'github.com', owner: 'owner', repo: 'repo',
+    });
+  });
+  it('parses https with .git', () => {
+    expect(parseRemoteHost('https://github.com/owner/repo.git')).toEqual({
+      host: 'github.com', owner: 'owner', repo: 'repo',
+    });
+  });
+  it('parses https without .git', () => {
+    expect(parseRemoteHost('https://gitlab.com/grp/proj')).toEqual({
+      host: 'gitlab.com', owner: 'grp', repo: 'proj',
+    });
+  });
+  it('parses ssh:// url form', () => {
+    expect(parseRemoteHost('ssh://git@github.com/owner/repo.git')).toEqual({
+      host: 'github.com', owner: 'owner', repo: 'repo',
+    });
+  });
+  it('returns null for malformed url', () => {
+    expect(parseRemoteHost('not a url')).toBeNull();
+    expect(parseRemoteHost('')).toBeNull();
+  });
+});
+
+describe('buildBuiltinRules', () => {
+  it('builds github issue rule plus the always-on MR rule', () => {
+    expect(buildBuiltinRules('git@github.com:owner/repo.git')).toEqual<LinkRule[]>([
+      { pattern: '!(\\d+)', url: 'https://github.com/owner/repo/-/merge_requests/$1' },
+      { pattern: '#(\\d+)', url: 'https://github.com/owner/repo/issues/$1' },
+    ]);
+  });
+  it('builds gitlab issue + MR rules', () => {
+    expect(buildBuiltinRules('https://gitlab.com/grp/proj.git')).toEqual<LinkRule[]>([
+      { pattern: '!(\\d+)', url: 'https://gitlab.com/grp/proj/-/merge_requests/$1' },
+      { pattern: '#(\\d+)', url: 'https://gitlab.com/grp/proj/-/issues/$1' },
+    ]);
+  });
+  it('builds only the MR rule for a self-hosted host (! is GitLab-only)', () => {
+    expect(buildBuiltinRules('git@git.company.com:owner/repo.git')).toEqual<LinkRule[]>([
+      { pattern: '!(\\d+)', url: 'https://git.company.com/owner/repo/-/merge_requests/$1' },
+    ]);
+  });
+  it('returns empty for an unparseable remote', () => {
+    expect(buildBuiltinRules('not a url')).toEqual([]);
+  });
+  it('returns empty for null remote', () => {
+    expect(buildBuiltinRules(null)).toEqual([]);
+  });
+});
+
+describe('resolveCommitLinkRules', () => {
+  const custom = [{ pattern: '([A-Z]+-\\d+)', url: 'https://jira/browse/$1' }];
+
+  it('puts custom rules before built-in rules', () => {
+    const rules = resolveCommitLinkRules(custom, true, 'git@github.com:o/r.git');
+    expect(rules).toEqual<LinkRule[]>([
+      { pattern: '([A-Z]+-\\d+)', url: 'https://jira/browse/$1' },
+      { pattern: '!(\\d+)', url: 'https://github.com/o/r/-/merge_requests/$1' },
+      { pattern: '#(\\d+)', url: 'https://github.com/o/r/issues/$1' },
+    ]);
+  });
+  it('omits built-in rules when autoDetect is false', () => {
+    expect(resolveCommitLinkRules(custom, false, 'git@github.com:o/r.git')).toEqual(custom);
+  });
+  it('skips invalid custom entries', () => {
+    const raw = [
+      { pattern: '#(\\d+)', url: 'https://x/$1' },
+      { pattern: '(', url: 'https://bad' },        // invalid regex
+      { pattern: 123, url: 'https://y' },           // non-string pattern
+      { nope: true },                               // wrong shape
+    ];
+    expect(resolveCommitLinkRules(raw, false, null)).toEqual([
+      { pattern: '#(\\d+)', url: 'https://x/$1' },
+    ]);
+  });
+  it('returns empty for empty config and no remote', () => {
+    expect(resolveCommitLinkRules([], true, null)).toEqual([]);
+    expect(resolveCommitLinkRules(undefined, true, null)).toEqual([]);
+  });
+});

src/git/commit-link-rules.ts

@@ -0,0 +1,84 @@
+export interface LinkRule {
+  pattern: string;
+  url: string;
+}
+
+interface RemoteInfo {
+  host: string;
+  owner: string;
+  repo: string;
+}
+
+/**
+ * Parse a git remote URL (ssh shorthand, ssh:// or https://) into host + owner + repo.
+ * Returns null when the URL is not in a recognized owner/repo form.
+ */
+export function parseRemoteHost(url: string): RemoteInfo | null {
+  if (typeof url !== 'string' || url.length === 0) return null;
+  const trimmed = url.trim();
+
+  // ssh shorthand: git@host:owner/repo(.git)
+  const ssh = trimmed.match(/^[^@\s]+@([^:/\s]+):(.+?)\/([^/\s]+?)(?:\.git)?\/?$/);
+  if (ssh) return { host: ssh[1], owner: ssh[2], repo: ssh[3] };
+
+  // ssh://, https://, http:// forms
+  const proto = trimmed.match(/^[a-z][a-z0-9+.-]*:\/\/(?:[^@/\s]+@)?([^:/\s]+)(?::\d+)?\/(.+?)\/([^/\s]+?)(?:\.git)?\/?$/i);
+  if (proto) return { host: proto[1], owner: proto[2], repo: proto[3] };
+
+  return null;
+}
+
+/**
+ * Built-in auto-link rules derived from the repo's remote.
+ *
+ * `!N` (merge request) is GitLab-only syntax, so an `!N` rule is generated for
+ * ANY host (including self-hosted GitLab). `#N` (issue) has a forge-specific
+ * path, so it is only generated for the recognized SaaS hosts github.com and
+ * gitlab.com; on self-hosted hosts the issue path is ambiguous and users add a
+ * custom `commitMessageLinks` rule instead.
+ */
+export function buildBuiltinRules(remoteUrl: string | null): LinkRule[] {
+  if (!remoteUrl) return [];
+  const info = parseRemoteHost(remoteUrl);
+  if (!info) return [];
+  const base = `https://${info.host}/${info.owner}/${info.repo}`;
+  const rules: LinkRule[] = [
+    // `!N` is GitLab-only — safe to link on any host.
+    { pattern: '!(\\d+)', url: `${base}/-/merge_requests/$1` },
+  ];
+  if (info.host === 'github.com') {
+    // GitHub redirects /issues/N to the PR when N is a PR, so one rule covers both.
+    rules.push({ pattern: '#(\\d+)', url: `${base}/issues/$1` });
+  } else if (info.host === 'gitlab.com') {
+    rules.push({ pattern: '#(\\d+)', url: `${base}/-/issues/$1` });
+  }
+  return rules;
+}
+
+/**
+ * Validate + compile user custom rules (skipping bad entries, like
+ * compileBranchColorRules), then append built-in rules when autoDetect is on.
+ * Custom rules come first so a user can override the built-in `#N` behaviour.
+ */
+export function resolveCommitLinkRules(
+  customRaw: unknown,
+  autoDetect: boolean,
+  remoteUrl: string | null,
+): LinkRule[] {
+  const rules: LinkRule[] = [];
+  if (Array.isArray(customRaw)) {
+    for (const entry of customRaw) {
+      if (!entry || typeof entry !== 'object') continue;
+      const { pattern, url } = entry as Partial<LinkRule>;
+      if (typeof pattern !== 'string' || typeof url !== 'string') continue;
+      try {
+        new RegExp(pattern); // validate; skip if it throws
+      } catch {
+        continue;
+      }
+      rules.push({ pattern, url });
+    }
+  }
+  if (autoDetect) rules.push(...buildBuiltinRules(remoteUrl));
+  return rules;
+}

src/panels/MainPanel.ts

@@ -15,6 +15,7 @@ import { AvatarCache } from '../services/avatar-cache';
 import { resolveGitDirs, shouldRefreshGraph } from '../services/file-watcher-helpers';
 import { RepoDiscoveryService, RepoInfo } from '../services/repo-discovery';
 import type { WebviewMessage, ModalDefaults } from '../utils/message-bus';
+import { resolveCommitLinkRules, type LinkRule } from '../git/commit-link-rules';
 import {
   resolveRepoRelativePath as resolveRepoRelativePathUtil,
   assertSafeArgPath as assertSafeArgPathUtil,
@@ -161,6 +162,28 @@ export class MainPanel {
     return resolveGraphColors(raw);
   }
 
+  // Resolve commit-message link rules from settings + the origin remote URL.
+  private async getCommitLinkRules(): Promise<LinkRule[]> {
+    const cfg = vscode.workspace.getConfiguration('gitGraphPlus');
+    const custom = cfg.get('commitMessageLinks');
+    const autoDetect = cfg.get<boolean>('autoDetectRepoLinks', true);
+    let remoteUrl: string | null = null;
+    if (autoDetect) {
+      try {
+        remoteUrl = await this.gitService.getRemoteUrl('origin');
+      } catch {
+        // No origin (or no remote) — built-in detection simply yields nothing.
+        remoteUrl = null;
+      }
+    }
+    return resolveCommitLinkRules(custom, autoDetect, remoteUrl);
+  }
+
+  private async postCommitLinkRules(): Promise<void> {
+    const rules = await this.getCommitLinkRules();
+    this.post({ type: 'setCommitLinkRules', payload: { rules } });
+  }
+
   private constructor(
     panel: vscode.WebviewPanel,
     extensionUri: vscode.Uri,
@@ -202,6 +225,12 @@ export class MainPanel {
         if (e.affectsConfiguration('gitGraphPlus.graphColors')) {
           this.post({ type: 'setGraphColors', payload: { colors: this.readGraphColors() } });
         }
+        if (
+          e.affectsConfiguration('gitGraphPlus.commitMessageLinks') ||
+          e.affectsConfiguration('gitGraphPlus.autoDetectRepoLinks')
+        ) {
+          void this.postCommitLinkRules();
+        }
         if (e.affectsConfiguration('gitGraphPlus.timeout')) {
           this.gitService.setDefaultTimeout(readTimeoutMs());
         }
@@ -218,6 +247,7 @@ export class MainPanel {
     this.post({ type: 'setDefaults', payload: this.readModalDefaults() });
     this.post({ type: 'setBadgeBarThickness', payload: { width: this.readBadgeBarWidth() } });
     this.post({ type: 'setGraphColors', payload: { colors: this.readGraphColors() } });
+    void this.postCommitLinkRules();
 
     this.panel.webview.onDidReceiveMessage(
       (message: WebviewMessage) => this.handleMessage(message),
@@ -703,6 +733,13 @@ export class MainPanel {
           }
           break;
         }
+        case 'openExternalUrl': {
+          const url = message.payload?.url;
+          if (typeof url === 'string' && /^https?:\/\//i.test(url)) {
+            await vscode.env.openExternal(vscode.Uri.parse(url));
+          }
+          break;
+        }
         case 'amendCommit': {
           await this.gitService.amendCommit(message.payload);
           // Optional follow-up: amend rewrites HEAD, so the push force-pushes
@@ -1763,6 +1800,7 @@ export class MainPanel {
     if (shouldRefreshGraph(what)) {
       await this.refreshAll();
     }
+    void this.postCommitLinkRules();
 
     // Skip the conflict + operation state probe (2 git subprocess spawns)
     // when we already know no operation is in progress: nothing in memory

src/utils/message-bus.ts

@@ -1,5 +1,10 @@
 import type { CommitGraphData, BranchData, DiffData, Commit, WorktreeInfo, CommitSignature } from '../git/types';
 
+export interface LinkRule {
+  pattern: string;
+  url: string;
+}
+
 export interface ModalDefaults {
   push: { force: 'none' | 'with-lease' | 'force'; setUpstream: boolean; allTags: boolean };
   pull: { rebase: boolean; stash: boolean };
@@ -114,7 +119,8 @@ export type WebviewMessage =
   | { type: 'getUncommittedDiff' }
   | { type: 'getUncommittedFileDiff'; payload: { file: string; staged: boolean } }
   | { type: 'getMultiCommitSections'; payload: { hashes: string[] } }
-  | { type: 'getAvatar'; payload: { email: string; size: number } };
+  | { type: 'getAvatar'; payload: { email: string; size: number } }
+  | { type: 'openExternalUrl'; payload: { url: string } };
 
 // Messages from Extension → Webview
 export type ExtensionMessage =
@@ -145,6 +151,7 @@ export type ExtensionMessage =
   | { type: 'setDefaults'; payload: ModalDefaults }
   | { type: 'setBadgeBarThickness'; payload: { width: number } }
   | { 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 } }
   | { type: 'worktreeData'; payload: WorktreeInfo[] }
   | { type: 'uncommittedDiffData'; payload: { staged: Array<{ path: string; status: string }>; unstaged: Array<{ path: string; status: string }> } }

webview-ui/src/App.svelte

@@ -38,7 +38,8 @@ import AmendModal from './components/modals/AmendModal.svelte';
   import { modalStore } from './lib/stores/modals.svelte';
   import { defaultsStore } from './lib/stores/defaults.svelte';
   import { graphColorsStore } from './lib/stores/graph-colors.svelte';
-import { avatarStore } from './lib/stores/avatars.svelte';
+  import { commitLinkRulesStore } from './lib/stores/commit-link-rules.svelte';
+  import { avatarStore } from './lib/stores/avatars.svelte';
   import SetUpstreamModal from './components/modals/SetUpstreamModal.svelte';
   import FlowInitModal from './components/modals/FlowInitModal.svelte';
   import FlowStartModal from './components/modals/FlowStartModal.svelte';
@@ -110,6 +111,9 @@ import { avatarStore } from './lib/stores/avatars.svelte';
         case 'setGraphColors':
           graphColorsStore.set(msg.payload.colors);
           break;
+        case 'setCommitLinkRules':
+          commitLinkRulesStore.set(msg.payload.rules);
+          break;
         case 'avatarData':
           avatarStore.receive(msg.payload.email, msg.payload.size, msg.payload.dataUri);
           break;

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

@@ -13,6 +13,7 @@
   import CommitHoverCard from '../common/CommitHoverCard.svelte';
   import { tooltip } from '../../lib/actions/tooltip';
   import { modalStore } from '../../lib/stores/modals.svelte';
+  import LinkifiedText from '../common/LinkifiedText.svelte';
 
   interface Props {
     commit?: Commit;
@@ -698,9 +699,9 @@
 
       <!-- Commit message -->
       <div class="message-section">
-        <div class="message-subject">{commit.subject}</div>
+        <div class="message-subject"><LinkifiedText text={commit.subject} /></div>
         {#if commit.body}
-          <div class="message-body">{commit.body}</div>
+          <div class="message-body"><LinkifiedText text={commit.body} /></div>
         {/if}
       </div>
     </div>