From 7dacf4b3aa47d049f6913173b7bac6d049b254d1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 16 Mar 2026 07:37:59 +0100
Subject: [PATCH 01/11] Show issue/PR context popup on any issue/PR link
 site-wide

Previously, the context popup only worked on links with the .ref-issue
class inside .markup containers. This meant dashboard feed links and
other issue/PR references outside rendered markdown never showed popups.

Replace the markup-scoped approach with a global delegated mouseover
listener that uses parseIssueHref to detect issue/PR links anywhere on
the page. Add response caching so hovering the same issue from different
links doesn't re-fetch. Make ContextPopup a pure display component with
clickable repo and issue title links.

Other changes:
- Fix feed title <a> stretching full width (add tw-self-start)
- Clean up Vue app on tippy destroy to prevent memory leaks
- Clear cache and retry marker on fetch errors

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
---
 templates/user/dashboard/feeds.tmpl    |  2 +-
 web_src/js/components/ContextPopup.vue | 51 ++++++--------------
 web_src/js/features/ref-issue.ts       | 65 ++++++++++++++++++++++++++
 web_src/js/index-domready.ts           |  2 +
 web_src/js/markup/content.ts           |  2 -
 web_src/js/markup/refissue.ts          | 42 -----------------
 6 files changed, 83 insertions(+), 81 deletions(-)
 create mode 100644 web_src/js/features/ref-issue.ts
 delete mode 100644 web_src/js/markup/refissue.ts

diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index c17fa2aa0d699..a43f99dc9b1f8 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -107,7 +107,7 @@
 				{{else if .GetOpType.InActions "create_pull_request"}}
 					<span class="tw-inline-block tw-truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "comment_issue" "approve_pull_request" "reject_pull_request" "comment_pull"}}
-					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
+					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate tw-self-start issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
 						<div class="render-content markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 12911aad40425..eb154952268d6 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,63 +1,42 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
-import {GET} from '../modules/fetch.ts';
 import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
-import {computed, onMounted, shallowRef} from 'vue';
+import {computed} from 'vue';
 import type {Issue} from '../types.ts';
 
+const {appSubUrl} = window.config;
+
 const props = defineProps<{
-  repoLink: string,
-  loadIssueInfoUrl: string,
+  issue?: Issue | null,
+  renderedLabels?: string,
+  errorMessage?: string,
 }>();
 
-const loading = shallowRef(false);
-const issue = shallowRef<Issue | null>(null);
-const renderedLabels = shallowRef('');
-const errorMessage = shallowRef('');
-
 const createdAt = computed(() => {
-  if (!issue?.value) return '';
-  return new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
+  if (!props.issue) return '';
+  return new Date(props.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
 });
 
 const body = computed(() => {
-  if (!issue?.value) return '';
-  const body = issue.value.body.replace(/\n+/g, ' ');
+  if (!props.issue) return '';
+  const body = props.issue.body.replace(/\n+/g, ' ');
   return body.length > 85 ? `${body.substring(0, 85)}…` : body;
 });
-
-onMounted(async () => {
-  loading.value = true;
-  errorMessage.value = '';
-  try {
-    const resp = await GET(props.loadIssueInfoUrl);
-    if (!resp.ok) {
-      errorMessage.value = resp.status ? resp.statusText : 'Unknown network error';
-      return;
-    }
-    const respJson = await resp.json();
-    issue.value = respJson.convertedIssue;
-    renderedLabels.value = respJson.renderedLabels;
-  } finally {
-    loading.value = false;
-  }
-});
 </script>
 
 <template>
-  <div class="tw-p-4">
-    <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
-    <div v-else-if="issue" class="tw-flex tw-flex-col tw-gap-2">
+  <div class="ref-issue-popup tw-p-4">
+    <div v-if="issue" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">
-        <a :href="repoLink" class="muted">{{ issue.repository.full_name }}</a>
+        <a :href="`${appSubUrl}/${issue.repository.full_name}`" class="muted">{{ issue.repository.full_name }}</a>
         on {{ createdAt }}
       </div>
       <div class="flex-text-block">
         <svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
-        <span class="issue-title tw-font-semibold tw-break-anywhere">
+        <a :href="`${appSubUrl}/${issue.repository.full_name}/${issue.pull_request ? 'pulls' : 'issues'}/${issue.number}`" class="issue-title tw-font-semibold tw-break-anywhere muted">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>
-        </span>
+        </a>
       </div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
new file mode 100644
index 0000000000000..578581a45d432
--- /dev/null
+++ b/web_src/js/features/ref-issue.ts
@@ -0,0 +1,65 @@
+import {parseIssueHref} from '../utils.ts';
+import {GET} from '../modules/fetch.ts';
+import {createApp} from 'vue';
+import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
+import {addDelegatedEventListener} from '../utils/dom.ts';
+
+const issueInfoCache = new Map<string, Promise<any>>();
+
+function getIssueInfo(url: string): Promise<any> {
+  let promise = issueInfoCache.get(url);
+  if (!promise) {
+    promise = (async () => {
+      try {
+        const resp = await GET(url);
+        if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
+        return await resp.json();
+      } catch (err) {
+        issueInfoCache.delete(url);
+        throw err;
+      }
+    })();
+    issueInfoCache.set(url, promise);
+  }
+  return promise;
+}
+
+export function initRefIssueContextPopup() {
+  addDelegatedEventListener(document, 'mouseover', 'a[href]:not([data-ref-issue-popup])', (link: HTMLElement) => {
+    const href = link.getAttribute('href')!;
+    if (!parseIssueHref(href).ownerName) return; // not an issue/PR link
+    if (link.closest('.ref-issue-popup')) return; // avoid nesting
+    if (link.classList.contains('ref-external-issue')) return; // external tracker
+    if (getAttachedTippyInstance(link)) return; // already has tooltip
+    link.setAttribute('data-ref-issue-popup', ''); // prevent parallel fetches
+
+    const infoUrl = `${new URL(href, window.location.origin).pathname}/info`;
+    (async () => {
+      try {
+        const [data, {default: ContextPopup}] = await Promise.all([
+          getIssueInfo(infoUrl),
+          import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue'),
+        ]);
+        const el = document.createElement('div');
+        const app = createApp(ContextPopup, {
+          issue: data.convertedIssue,
+          renderedLabels: data.renderedLabels,
+        });
+        app.mount(el);
+        createTippy(link, {
+          theme: 'default',
+          content: el,
+          trigger: 'mouseenter focus',
+          placement: 'top-start',
+          interactive: true,
+          role: 'dialog',
+          interactiveBorder: 5,
+          onDestroy: () => app.unmount(),
+        }).show();
+      } catch (err) {
+        console.error('Failed to load issue info:', err);
+        link.removeAttribute('data-ref-issue-popup');
+      }
+    })();
+  });
+}
diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts
index fb445b8df42a2..2fc4c6b1abef7 100644
--- a/web_src/js/index-domready.ts
+++ b/web_src/js/index-domready.ts
@@ -63,6 +63,7 @@ import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton}
 import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
 import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
+import {initRefIssueContextPopup} from './features/ref-issue.ts';
 import {initGlobalShortcut} from './modules/shortcut.ts';
 
 const initStartTime = performance.now();
@@ -99,6 +100,7 @@ const initPerformanceTracer = callInitFunctions([
   initImageDiff,
   initMarkupAnchors,
   initMarkupContent,
+  initRefIssueContextPopup,
   initSshKeyFormParser,
   initStopwatch,
   initTableSort,
diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts
index d964c88989e02..cf88ed61de15b 100644
--- a/web_src/js/markup/content.ts
+++ b/web_src/js/markup/content.ts
@@ -5,7 +5,6 @@ import {initMarkupRenderAsciicast} from './asciicast.ts';
 import {initMarkupTasklist} from './tasklist.ts';
 import {registerGlobalSelectorFunc} from '../modules/observer.ts';
 import {initMarkupRenderIframe} from './render-iframe.ts';
-import {initMarkupRefIssue} from './refissue.ts';
 
 // code that runs for all markup content
 export function initMarkupContent(): void {
@@ -16,6 +15,5 @@ export function initMarkupContent(): void {
     initMarkupCodeMath(el);
     initMarkupRenderAsciicast(el);
     initMarkupRenderIframe(el);
-    initMarkupRefIssue(el);
   });
 }
diff --git a/web_src/js/markup/refissue.ts b/web_src/js/markup/refissue.ts
deleted file mode 100644
index f2fcd24f39de3..0000000000000
--- a/web_src/js/markup/refissue.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {queryElems} from '../utils/dom.ts';
-import {parseIssueHref} from '../utils.ts';
-import {createApp} from 'vue';
-import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
-
-export function initMarkupRefIssue(el: HTMLElement) {
-  queryElems(el, '.ref-issue', (el) => {
-    el.addEventListener('mouseenter', showMarkupRefIssuePopup);
-    el.addEventListener('focus', showMarkupRefIssuePopup);
-  });
-}
-
-function showMarkupRefIssuePopup(e: MouseEvent | FocusEvent) {
-  const refIssue = e.currentTarget as HTMLElement;
-  if (getAttachedTippyInstance(refIssue)) return;
-  if (refIssue.classList.contains('ref-external-issue')) return;
-
-  const issuePathInfo = parseIssueHref(refIssue.getAttribute('href')!);
-  if (!issuePathInfo.ownerName) return;
-
-  const el = document.createElement('div');
-  const onShowAsync = async () => {
-    const {default: ContextPopup} = await import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue');
-    const view = createApp(ContextPopup, {
-      // backend: GetIssueInfo
-      loadIssueInfoUrl: `${window.config.appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`,
-    });
-    view.mount(el);
-  };
-  const tippy = createTippy(refIssue, {
-    theme: 'default',
-    content: el,
-    trigger: 'mouseenter focus',
-    placement: 'top-start',
-    interactive: true,
-    role: 'dialog',
-    interactiveBorder: 5,
-    // onHide() { return false }, // help to keep the popup and debug the layout
-    onShow: () => { onShowAsync() },
-  });
-  tippy.show();
-}

From a5b73c66438974ece337382eb3a77e8a764f907b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 16 Mar 2026 07:52:34 +0100
Subject: [PATCH 02/11] Add 300ms hover delay and extract showRefIssuePopup

Delay popup fetch by 300ms so casual mouse passes don't trigger
network requests. Extract the popup creation logic into a separate
showRefIssuePopup function for clarity.

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 59 +++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 578581a45d432..3517d1cc5ffa0 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -24,6 +24,30 @@ function getIssueInfo(url: string): Promise<any> {
   return promise;
 }
 
+async function showRefIssuePopup(link: HTMLElement) {
+  const infoUrl = `${new URL(link.getAttribute('href')!, window.location.origin).pathname}/info`;
+  const [data, {default: ContextPopup}] = await Promise.all([
+    getIssueInfo(infoUrl),
+    import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue'),
+  ]);
+  const el = document.createElement('div');
+  const app = createApp(ContextPopup, {
+    issue: data.convertedIssue,
+    renderedLabels: data.renderedLabels,
+  });
+  app.mount(el);
+  createTippy(link, {
+    theme: 'default',
+    content: el,
+    trigger: 'mouseenter focus',
+    placement: 'top-start',
+    interactive: true,
+    role: 'dialog',
+    interactiveBorder: 5,
+    onDestroy: () => app.unmount(),
+  }).show();
+}
+
 export function initRefIssueContextPopup() {
   addDelegatedEventListener(document, 'mouseover', 'a[href]:not([data-ref-issue-popup])', (link: HTMLElement) => {
     const href = link.getAttribute('href')!;
@@ -33,33 +57,22 @@ export function initRefIssueContextPopup() {
     if (getAttachedTippyInstance(link)) return; // already has tooltip
     link.setAttribute('data-ref-issue-popup', ''); // prevent parallel fetches
 
-    const infoUrl = `${new URL(href, window.location.origin).pathname}/info`;
-    (async () => {
+    // delay to avoid fetching on mouse passes
+    let timer: ReturnType<typeof setTimeout>;
+    const cancel = () => {
+      clearTimeout(timer);
+      link.removeAttribute('data-ref-issue-popup');
+      link.removeEventListener('mouseleave', cancel);
+    };
+    timer = setTimeout(async () => {
+      link.removeEventListener('mouseleave', cancel);
       try {
-        const [data, {default: ContextPopup}] = await Promise.all([
-          getIssueInfo(infoUrl),
-          import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue'),
-        ]);
-        const el = document.createElement('div');
-        const app = createApp(ContextPopup, {
-          issue: data.convertedIssue,
-          renderedLabels: data.renderedLabels,
-        });
-        app.mount(el);
-        createTippy(link, {
-          theme: 'default',
-          content: el,
-          trigger: 'mouseenter focus',
-          placement: 'top-start',
-          interactive: true,
-          role: 'dialog',
-          interactiveBorder: 5,
-          onDestroy: () => app.unmount(),
-        }).show();
+        await showRefIssuePopup(link);
       } catch (err) {
         console.error('Failed to load issue info:', err);
         link.removeAttribute('data-ref-issue-popup');
       }
-    })();
+    }, 300);
+    link.addEventListener('mouseleave', cancel);
   });
 }

From 6656acf1e39e00dfa9f973ed42465ba51f5e1e50 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 16 Mar 2026 07:57:13 +0100
Subject: [PATCH 03/11] improve selector

---
 web_src/js/features/ref-issue.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 3517d1cc5ffa0..2aed4988678dd 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -49,11 +49,11 @@ async function showRefIssuePopup(link: HTMLElement) {
 }
 
 export function initRefIssueContextPopup() {
-  addDelegatedEventListener(document, 'mouseover', 'a[href]:not([data-ref-issue-popup])', (link: HTMLElement) => {
+  const selector = 'a[href]:not([data-ref-issue-popup]):not(.ref-external-issue)';
+  addDelegatedEventListener(document, 'mouseover', selector, (link: HTMLElement) => {
     const href = link.getAttribute('href')!;
     if (!parseIssueHref(href).ownerName) return; // not an issue/PR link
     if (link.closest('.ref-issue-popup')) return; // avoid nesting
-    if (link.classList.contains('ref-external-issue')) return; // external tracker
     if (getAttachedTippyInstance(link)) return; // already has tooltip
     link.setAttribute('data-ref-issue-popup', ''); // prevent parallel fetches
 

From bc1cd33029a0a6274a107eae956a7155c9828ee4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 12:37:43 +0200
Subject: [PATCH 04/11] Skip ref-issue popup on issue/PR lists, milestones, and
 project boards

Matches GitHub: no popup on listings where the same info is already rendered.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 2aed4988678dd..34f7d91f091ec 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -54,6 +54,7 @@ export function initRefIssueContextPopup() {
     const href = link.getAttribute('href')!;
     if (!parseIssueHref(href).ownerName) return; // not an issue/PR link
     if (link.closest('.ref-issue-popup')) return; // avoid nesting
+    if (link.closest('#issue-list, #project-board, .milestone-issue-list')) return; // skip issue/PR listings — redundant with on-page info
     if (getAttachedTippyInstance(link)) return; // already has tooltip
     link.setAttribute('data-ref-issue-popup', ''); // prevent parallel fetches
 

From 36ea168958cb5f55d877826f9b8736a8a9dabec5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 12:41:27 +0200
Subject: [PATCH 05/11] Simplify ref-issue popup handler

- Drop dead webpackChunkName magic comment (now on vite)
- Use HTMLAnchorElement.pathname instead of new URL(...)
- Type the delegated handler generically, remove inner casts
- Merge .closest() skip-containers into one call
- Drop WHAT-narrating comments, keep WHY ones

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 34f7d91f091ec..f39120d6836d1 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -24,11 +24,10 @@ function getIssueInfo(url: string): Promise<any> {
   return promise;
 }
 
-async function showRefIssuePopup(link: HTMLElement) {
-  const infoUrl = `${new URL(link.getAttribute('href')!, window.location.origin).pathname}/info`;
+async function showRefIssuePopup(link: HTMLAnchorElement) {
   const [data, {default: ContextPopup}] = await Promise.all([
-    getIssueInfo(infoUrl),
-    import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue'),
+    getIssueInfo(`${link.pathname}/info`),
+    import('../components/ContextPopup.vue'),
   ]);
   const el = document.createElement('div');
   const app = createApp(ContextPopup, {
@@ -50,15 +49,14 @@ async function showRefIssuePopup(link: HTMLElement) {
 
 export function initRefIssueContextPopup() {
   const selector = 'a[href]:not([data-ref-issue-popup]):not(.ref-external-issue)';
-  addDelegatedEventListener(document, 'mouseover', selector, (link: HTMLElement) => {
-    const href = link.getAttribute('href')!;
-    if (!parseIssueHref(href).ownerName) return; // not an issue/PR link
-    if (link.closest('.ref-issue-popup')) return; // avoid nesting
-    if (link.closest('#issue-list, #project-board, .milestone-issue-list')) return; // skip issue/PR listings — redundant with on-page info
-    if (getAttachedTippyInstance(link)) return; // already has tooltip
-    link.setAttribute('data-ref-issue-popup', ''); // prevent parallel fetches
+  addDelegatedEventListener<HTMLAnchorElement, MouseEvent>(document, 'mouseover', selector, (link) => {
+    if (!parseIssueHref(link.getAttribute('href')!).ownerName) return;
+    // skip issue/PR listings — the popup would be redundant with on-page info
+    if (link.closest('.ref-issue-popup, #issue-list, #project-board, .milestone-issue-list')) return;
+    if (getAttachedTippyInstance(link)) return;
+    link.setAttribute('data-ref-issue-popup', '');
 
-    // delay to avoid fetching on mouse passes
+    // delay so a mouse passing over the link doesn't fire a fetch
     let timer: ReturnType<typeof setTimeout>;
     const cancel = () => {
       clearTimeout(timer);

From 2a79d6764292f524cd6e9bdc73668c96b7b37229 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 13:06:21 +0200
Subject: [PATCH 06/11] Address review: attribute-based opt-out, use backend
 html_url

Replace hardcoded selector list with data-no-ref-issue-popup attribute
on containers that should suppress the popup. Use html_url from the
backend payload instead of constructing links on the client.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 templates/projects/view.tmpl               | 2 +-
 templates/repo/issue/milestone_issues.tmpl | 2 +-
 templates/shared/issuelist.tmpl            | 2 +-
 web_src/js/components/ContextPopup.vue     | 8 +++-----
 web_src/js/features/ref-issue.ts           | 3 +--
 web_src/js/types.ts                        | 2 ++
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 30056e211f159..513f7429d9cc9 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -77,7 +77,7 @@
 		<div class="divider"></div>
 	</div>
 
-	<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-board-writable="{{$canWriteProject}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
+	<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-board-writable="{{$canWriteProject}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}} data-no-ref-issue-popup>
 		{{range .Columns}}
 			<div class="project-column" {{if .Color}}style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
 				<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 03cadfd295d28..6248a1b209d01 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
+<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list" data-no-ref-issue-popup>
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index aaf80a1ec94d4..29362c6df8e01 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -1,4 +1,4 @@
-<div id="issue-list" class="flex-list">
+<div id="issue-list" class="flex-list" data-no-ref-issue-popup>
 	{{$approvalCounts := .ApprovalCounts}}
 	{{range .Issues}}
 		<div class="flex-item">
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index eb154952268d6..36439728395c0 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -4,8 +4,6 @@ import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
 import {computed} from 'vue';
 import type {Issue} from '../types.ts';
 
-const {appSubUrl} = window.config;
-
 const props = defineProps<{
   issue?: Issue | null,
   renderedLabels?: string,
@@ -25,15 +23,15 @@ const body = computed(() => {
 </script>
 
 <template>
-  <div class="ref-issue-popup tw-p-4">
+  <div class="tw-p-4" data-no-ref-issue-popup>
     <div v-if="issue" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">
-        <a :href="`${appSubUrl}/${issue.repository.full_name}`" class="muted">{{ issue.repository.full_name }}</a>
+        <a :href="issue.repository.html_url" class="muted">{{ issue.repository.full_name }}</a>
         on {{ createdAt }}
       </div>
       <div class="flex-text-block">
         <svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
-        <a :href="`${appSubUrl}/${issue.repository.full_name}/${issue.pull_request ? 'pulls' : 'issues'}/${issue.number}`" class="issue-title tw-font-semibold tw-break-anywhere muted">
+        <a :href="issue.html_url" class="issue-title tw-font-semibold tw-break-anywhere muted">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>
         </a>
diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index f39120d6836d1..191fafef4c9df 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -51,8 +51,7 @@ export function initRefIssueContextPopup() {
   const selector = 'a[href]:not([data-ref-issue-popup]):not(.ref-external-issue)';
   addDelegatedEventListener<HTMLAnchorElement, MouseEvent>(document, 'mouseover', selector, (link) => {
     if (!parseIssueHref(link.getAttribute('href')!).ownerName) return;
-    // skip issue/PR listings — the popup would be redundant with on-page info
-    if (link.closest('.ref-issue-popup, #issue-list, #project-board, .milestone-issue-list')) return;
+    if (link.closest('[data-no-ref-issue-popup]')) return;
     if (getAttachedTippyInstance(link)) return;
     link.setAttribute('data-ref-issue-popup', '');
 
diff --git a/web_src/js/types.ts b/web_src/js/types.ts
index d233eba24f3ed..1453495f79020 100644
--- a/web_src/js/types.ts
+++ b/web_src/js/types.ts
@@ -42,12 +42,14 @@ export type Issue = {
   body: string,
   state: 'open' | 'closed',
   created_at: string,
+  html_url: string,
   pull_request?: {
     draft: boolean;
     merged: boolean;
   },
   repository: {
     full_name: string,
+    html_url: string,
   },
   labels: Array<string>,
 };

From fb651ea47252caf1e60fd26106cbd6baff33c3dd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 13:34:20 +0200
Subject: [PATCH 07/11] Switch to opt-in ref-issue popup

Links get the popup if they have the `ref-issue` class (markdown
autolinks already emit it) or sit inside a `data-ref-issue-container`
element. Marks `#activity-feed`, the activity/pulse main column, and
adds the class to the merged-PR commit link.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 templates/projects/view.tmpl                      | 2 +-
 templates/repo/activity.tmpl                      | 2 +-
 templates/repo/commit_load_branches_and_tags.tmpl | 2 +-
 templates/repo/issue/milestone_issues.tmpl        | 2 +-
 templates/shared/issuelist.tmpl                   | 2 +-
 templates/user/dashboard/feeds.tmpl               | 2 +-
 web_src/js/components/ContextPopup.vue            | 2 +-
 web_src/js/features/ref-issue.ts                  | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 513f7429d9cc9..30056e211f159 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -77,7 +77,7 @@
 		<div class="divider"></div>
 	</div>
 
-	<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-board-writable="{{$canWriteProject}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}} data-no-ref-issue-popup>
+	<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-board-writable="{{$canWriteProject}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
 		{{range .Columns}}
 			<div class="project-column" {{if .Color}}style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
 				<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl
index a19fb662616db..a9883b3a4fd6d 100644
--- a/templates/repo/activity.tmpl
+++ b/templates/repo/activity.tmpl
@@ -5,7 +5,7 @@
 		<div class="flex-container-nav">
 			{{template "repo/navbar" .}}
 		</div>
-		<div class="flex-container-main">
+		<div class="flex-container-main" data-ref-issue-container>
 			{{if .PageIsPulse}}{{template "repo/pulse" .}}{{end}}
 			{{if .PageIsContributors}}{{template "repo/contributors" .}}{{end}}
 			{{if .PageIsCodeFrequency}}{{template "repo/code_frequency" .}}{{end}}
diff --git a/templates/repo/commit_load_branches_and_tags.tmpl b/templates/repo/commit_load_branches_and_tags.tmpl
index 162d805a29e7e..18576f871fb80 100644
--- a/templates/repo/commit_load_branches_and_tags.tmpl
+++ b/templates/repo/commit_load_branches_and_tags.tmpl
@@ -1,7 +1,7 @@
 {{if not .PageIsWiki}}
 <div class="branch-and-tag-area" data-text-default-branch-tooltip="{{ctx.Locale.Tr "repo.commit.contained_in_default_branch"}}">
 	{{if .MergedPRIssueNumber}}
-	{{$prLink := HTMLFormat `<a href="%s/pulls/%d">#%d</a>` $.RepoLink $.MergedPRIssueNumber $.MergedPRIssueNumber}}
+	{{$prLink := HTMLFormat `<a class="ref-issue" href="%s/pulls/%d">#%d</a>` $.RepoLink $.MergedPRIssueNumber $.MergedPRIssueNumber}}
 	<div>
 		<div class="divider"></div>
 		<div>{{ctx.Locale.Tr "repo.commit.merged_in_pr" $prLink}}</div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 6248a1b209d01..03cadfd295d28 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list" data-no-ref-issue-popup>
+<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 29362c6df8e01..aaf80a1ec94d4 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -1,4 +1,4 @@
-<div id="issue-list" class="flex-list" data-no-ref-issue-popup>
+<div id="issue-list" class="flex-list">
 	{{$approvalCounts := .ApprovalCounts}}
 	{{range .Issues}}
 		<div class="flex-item">
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index af5384daae75e..99f7f91bfdb35 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -1,4 +1,4 @@
-<div id="activity-feed" class="flex-list">
+<div id="activity-feed" class="flex-list" data-ref-issue-container>
 	{{range .Feeds}}
 		<div class="flex-item">
 			<div class="flex-item-leading">
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 36439728395c0..38e83d2c1f778 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -23,7 +23,7 @@ const body = computed(() => {
 </script>
 
 <template>
-  <div class="tw-p-4" data-no-ref-issue-popup>
+  <div class="tw-p-4">
     <div v-if="issue" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">
         <a :href="issue.repository.html_url" class="muted">{{ issue.repository.full_name }}</a>
diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 191fafef4c9df..e2988820f13c8 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -51,7 +51,7 @@ export function initRefIssueContextPopup() {
   const selector = 'a[href]:not([data-ref-issue-popup]):not(.ref-external-issue)';
   addDelegatedEventListener<HTMLAnchorElement, MouseEvent>(document, 'mouseover', selector, (link) => {
     if (!parseIssueHref(link.getAttribute('href')!).ownerName) return;
-    if (link.closest('[data-no-ref-issue-popup]')) return;
+    if (!link.classList.contains('ref-issue') && !link.closest('[data-ref-issue-container]')) return;
     if (getAttachedTippyInstance(link)) return;
     link.setAttribute('data-ref-issue-popup', '');
 

From 9c2a776dfec184d21095db0b6af1f6bf38e359ad Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 14:15:14 +0200
Subject: [PATCH 08/11] Cache issue info results instead of in-flight promises

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index e2988820f13c8..1fe9be362a6b5 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -4,24 +4,15 @@ import {createApp} from 'vue';
 import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
 import {addDelegatedEventListener} from '../utils/dom.ts';
 
-const issueInfoCache = new Map<string, Promise<any>>();
+const issueInfoCache = new Map<string, any>();
 
-function getIssueInfo(url: string): Promise<any> {
-  let promise = issueInfoCache.get(url);
-  if (!promise) {
-    promise = (async () => {
-      try {
-        const resp = await GET(url);
-        if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
-        return await resp.json();
-      } catch (err) {
-        issueInfoCache.delete(url);
-        throw err;
-      }
-    })();
-    issueInfoCache.set(url, promise);
+async function getIssueInfo(url: string): Promise<any> {
+  if (!issueInfoCache.has(url)) {
+    const resp = await GET(url);
+    if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
+    issueInfoCache.set(url, await resp.json());
   }
-  return promise;
+  return issueInfoCache.get(url);
 }
 
 async function showRefIssuePopup(link: HTMLAnchorElement) {

From 1aed21820a074a9250210dc884740df586c1f7f8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 14:23:09 +0200
Subject: [PATCH 09/11] Early-return on cache hit in getIssueInfo

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 1fe9be362a6b5..9a060b5c9b45e 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -7,12 +7,12 @@ import {addDelegatedEventListener} from '../utils/dom.ts';
 const issueInfoCache = new Map<string, any>();
 
 async function getIssueInfo(url: string): Promise<any> {
-  if (!issueInfoCache.has(url)) {
-    const resp = await GET(url);
-    if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
-    issueInfoCache.set(url, await resp.json());
-  }
-  return issueInfoCache.get(url);
+  if (issueInfoCache.has(url)) return issueInfoCache.get(url);
+  const resp = await GET(url);
+  if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
+  const data = await resp.json();
+  issueInfoCache.set(url, data);
+  return data;
 }
 
 async function showRefIssuePopup(link: HTMLAnchorElement) {

From b56bc8c9262149293e512e70afeed4b70c5f28b3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 15:16:29 +0200
Subject: [PATCH 10/11] Suppress ancestor title when ref-issue popup shows

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index 9a060b5c9b45e..c6ad86603fccc 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -26,6 +26,8 @@ async function showRefIssuePopup(link: HTMLAnchorElement) {
     renderedLabels: data.renderedLabels,
   });
   app.mount(el);
+  // suppress ancestor title like from .commit-summary to prevent double tooltip
+  link.title = '';
   createTippy(link, {
     theme: 'default',
     content: el,

From 2dbdf4690dd5057c93e8fe26e1eb0a12f59a879d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 23 Apr 2026 15:27:47 +0200
Subject: [PATCH 11/11] Type issueInfoCache exactly

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/ref-issue.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/ref-issue.ts b/web_src/js/features/ref-issue.ts
index c6ad86603fccc..b010011e1ea90 100644
--- a/web_src/js/features/ref-issue.ts
+++ b/web_src/js/features/ref-issue.ts
@@ -3,11 +3,17 @@ import {GET} from '../modules/fetch.ts';
 import {createApp} from 'vue';
 import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
 import {addDelegatedEventListener} from '../utils/dom.ts';
+import type {Issue} from '../types.ts';
 
-const issueInfoCache = new Map<string, any>();
+type IssueInfo = {
+  convertedIssue: Issue,
+  renderedLabels: string,
+};
 
-async function getIssueInfo(url: string): Promise<any> {
-  if (issueInfoCache.has(url)) return issueInfoCache.get(url);
+const issueInfoCache = new Map<string, IssueInfo>();
+
+async function getIssueInfo(url: string): Promise<IssueInfo> {
+  if (issueInfoCache.has(url)) return issueInfoCache.get(url)!;
   const resp = await GET(url);
   if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
   const data = await resp.json();