Linkify URLs in Actions workflow logs (#36986)

Detect URLs in Actions log output and render them as clickable links,
similar to how GitHub Actions handles this. Pre-existing links from
ansi_up's OSC 8 parsing are also kept intact.

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (claude-opus-4-6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/utils/url.test.ts

@@ -1,10 +1,37 @@
-import {pathEscapeSegments, toOriginUrl} from './url.ts';
+import {linkifyURLs, pathEscapeSegments, toOriginUrl} from './url.ts';
 
 test('pathEscapeSegments', () => {
   expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c');
   expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c');
 });
 
+test('linkifyURLs', () => {
+  const link = (url: string) => `<a href="${url}" target="_blank">${url}</a>`;
+  expect(linkifyURLs('https://example.com')).toEqual(link('https://example.com'));
+  expect(linkifyURLs('https://dl.google.com/go/go1.23.6.linux-amd64.tar.gz')).toEqual(link('https://dl.google.com/go/go1.23.6.linux-amd64.tar.gz'));
+  expect(linkifyURLs('https://example.com/path?query=1&amp;b=2#frag')).toEqual(link('https://example.com/path?query=1&amp;b=2#frag'));
+  expect(linkifyURLs('visit https://example.com/repo for info')).toEqual(`visit ${link('https://example.com/repo')} for info`);
+  expect(linkifyURLs('See https://example.com.')).toEqual(`See ${link('https://example.com')}.`);
+  expect(linkifyURLs('https://example.com, and more')).toEqual(`${link('https://example.com')}, and more`);
+  expect(linkifyURLs('<span class="ansi-green-fg">https://proxy.golang.org/cached-only</span>')).toEqual(`<span class="ansi-green-fg">${link('https://proxy.golang.org/cached-only')}</span>`);
+  expect(linkifyURLs('<span style="color:rgb(0,255,0)">https://registry.npmjs.org/@types/node</span>')).toEqual(`<span style="color:rgb(0,255,0)">${link('https://registry.npmjs.org/@types/node')}</span>`);
+  expect(linkifyURLs('https://a.com and https://b.org')).toEqual(`${link('https://a.com')} and ${link('https://b.org')}`);
+  expect(linkifyURLs('no urls here')).toEqual('no urls here');
+  expect(linkifyURLs('http://example.com/path')).toEqual(link('http://example.com/path'));
+  expect(linkifyURLs('http://localhost:3000/repo')).toEqual(link('http://localhost:3000/repo'));
+  expect(linkifyURLs('https://')).toEqual('https://');
+  expect(linkifyURLs('<a href="https://example.com">Click here</a>')).toEqual('<a href="https://example.com">Click here</a>');
+  expect(linkifyURLs('<a\nhref="https://example.com">Click here</a>')).toEqual('<a\nhref="https://example.com">Click here</a>');
+  expect(linkifyURLs('<a href="https://example.com">https://example.com</a>')).toEqual('<a href="https://example.com">https://example.com</a>');
+  expect(linkifyURLs('https://evil.com/<script>alert(1)</script>')).toEqual(`${link('https://evil.com/')}<script>alert(1)</script>`);
+  expect(linkifyURLs('https://evil.com/"onmouseover="alert(1)')).toEqual(`${link('https://evil.com/')}"onmouseover="alert(1)`);
+  expect(linkifyURLs('javascript:alert(1)')).toEqual('javascript:alert(1)'); // eslint-disable-line no-script-url
+  expect(linkifyURLs("https://evil.com/'onclick='alert(1)")).toEqual(`${link('https://evil.com/')}'onclick='alert(1)`);
+  expect(linkifyURLs('data:text/html,<script>alert(1)</script>')).toEqual('data:text/html,<script>alert(1)</script>');
+  expect(linkifyURLs('https://evil.com/\nonclick=alert(1)')).toEqual(`${link('https://evil.com/')}\nonclick=alert(1)`);
+  expect(linkifyURLs('https://evil.com/&#34;onmouseover=alert(1)')).toEqual(`${link('https://evil.com/&#34;onmouseover=alert')}(1)`);
+});
+
 test('toOriginUrl', () => {
   const oldLocation = String(window.location);
   for (const origin of ['https://example.com', 'https://example.com:3000']) {

web_src/js/utils/url.ts

@@ -2,6 +2,34 @@ export function pathEscapeSegments(s: string): string {
   return s.split('/').map(encodeURIComponent).join('/');
 }
 
+// Match HTML tags (to skip) or URLs (to linkify) in HTML content
+const urlLinkifyPattern = /(<([-\w]+)[^>]*>)|(<\/([-\w]+)[^>]*>)|(https?:\/\/[^\s<>"'`|(){}[\]]+)/gi;
+const trailingPunctPattern = /[.,;:!?]+$/;
+
+// Convert URLs to clickable links in HTML, preserving existing HTML tags
+export function linkifyURLs(html: string): string {
+  let inAnchor = false;
+  return html.replace(urlLinkifyPattern, (match, _openTagFull, openTag, _closeTagFull, closeTag, url) => {
+    // skip URLs inside existing <a> tags
+    if (openTag === 'a') {
+      inAnchor = true;
+      return match;
+    } else if (closeTag === 'a') {
+      inAnchor = false;
+      return match;
+    }
+    if (inAnchor || !url) {
+      return match;
+    }
+
+    const trailingPunct = url.match(trailingPunctPattern);
+    const cleanUrl = trailingPunct ? url.slice(0, -trailingPunct[0].length) : url;
+    const trailing = trailingPunct ? trailingPunct[0] : '';
+    // safe because regexp only matches valid URLs (no quotes or angle brackets)
+    return `<a href="${cleanUrl}" target="_blank">${cleanUrl}</a>${trailing}`; // eslint-disable-line github/unescaped-html-literal
+  });
+}
+
 /** Convert an absolute or relative URL to an absolute URL with the current origin. It only
  *  processes absolute HTTP/HTTPS URLs or relative URLs like '/xxx' or '//host/xxx'. */
 export function toOriginUrl(urlStr: string) {