Add hyperlinks to automigrations

code/core/src/node-logger/wrap-utils.test.ts

@@ -1,6 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getTerminalWidth, wrapTextForClack, wrapTextForClackHint } from './wrap-utils';
+// eslint-disable-next-line depend/ban-dependencies
+import { execaSync } from 'execa';
+
+import {
+  getTerminalWidth,
+  protectUrls,
+  wrapTextForClack,
+  wrapTextForClackHint,
+} from './wrap-utils';
 
 // Mock dependencies at the top with spy: true option
 vi.mock('@clack/prompts', () => ({
@@ -13,6 +21,10 @@ vi.mock('picocolors', () => ({
   reset: vi.fn((text) => `reset(${text})`),
 }));
 
+vi.mock('execa', () => ({
+  execaSync: vi.fn(),
+}));
+
 // Helper function to strip ANSI codes for length calculation
 function stripAnsi(str: string): string {
   return str.replace(/\u001b\[[0-9;]*m/g, '');
@@ -67,6 +79,24 @@ describe('wrap-utils', () => {
   });
 
   describe('wrapTextForClack', () => {
+    beforeEach(() => {
+      vi.mocked(execaSync).mockImplementation((cmd: string, args: any) => {
+        if (args && args[0] === '$TERM_PROGRAM') {
+          return {
+            stdout: 'iTerm.app',
+          } as any;
+        }
+        if (args && args[0] === '$TERM_PROGRAM_VERSION') {
+          return {
+            stdout: '3.4.0',
+          } as any;
+        }
+        return {
+          stdout: '',
+        };
+      });
+    });
+
     it('should wrap text to fit within content width and respect line length constraints', () => {
       const text =
         'This is a very long line of text that should be wrapped to fit within the specified width and not exceed the limit';
@@ -307,4 +337,223 @@ describe('wrap-utils', () => {
       expect(cleanResult.indexOf('normal')).toBeLessThan(cleanResult.indexOf('Green'));
     });
   });
+
+  describe('protectUrls', () => {
+    beforeEach(() => {
+      // Mock execaSync for supportsHyperlinks detection
+      vi.mocked(execaSync).mockImplementation((cmd: string, args: any) => {
+        if (args && args[0] === '$TERM_PROGRAM') {
+          return {
+            stdout: 'iTerm.app',
+          } as any;
+        }
+        if (args && args[0] === '$TERM_PROGRAM_VERSION') {
+          return {
+            stdout: '3.4.0',
+          } as any;
+        }
+        return {
+          stdout: '',
+        };
+      });
+    });
+
+    it('should return text unchanged when no URLs are present', () => {
+      const text = 'This is just plain text without any URLs';
+      const result = protectUrls(text);
+      expect(result).toBe(text);
+    });
+
+    it('should create hyperlinks for URLs when terminal supports hyperlinks', () => {
+      const text = 'Visit https://example.com for more info';
+      const result = protectUrls(text);
+
+      expect(result).toMatchInlineSnapshot(
+        `"Visit ]8;;https://example.comhttps://example.com]8;; for more info"`
+      );
+    });
+
+    it('should handle multiple URLs in the same text', () => {
+      const text = 'Check https://example.com and https://test.org for details';
+      const result = protectUrls(text);
+
+      expect(result).toMatchInlineSnapshot(
+        `"Check ]8;;https://example.comhttps://example.com]8;; and ]8;;https://test.orghttps://test.org]8;; for details"`
+      );
+    });
+
+    it('should truncate long URLs when they exceed maxUrlLength', () => {
+      const longUrl =
+        'https://example.com/very/long/path/that/exceeds/the/maximum/allowed/length/for/urls';
+      const text = `Visit ${longUrl} for details`;
+      const result = protectUrls(text, { maxUrlLength: 30 });
+
+      expect(result).toMatchInlineSnapshot(
+        `"Visit ]8;;https://example.com/very/long/path/that/exceeds/the/maximum/allowed/length/for/urlshttps://example.com/very/lo...]8;; for details"`
+      );
+    });
+
+    it('should respect maxLineWidth when calculating effective max length', () => {
+      const url = 'https://example.com/path/that/might/be/too/long/for/line';
+      const text = `Prefix text before ${url}`;
+      const result = protectUrls(text, { maxLineWidth: 50 });
+
+      // Should still apply hyperlink formatting
+      expect(result).toMatchInlineSnapshot(
+        `"Prefix text before \u001b]8;;https://example.com/path/that/might/be/too/long/for/line\u0007https://example.com/path/tha...\u001b]8;;\u0007"`
+      );
+    });
+
+    it('should not modify URLs already inside hyperlink escape sequences', () => {
+      const url = 'https://example.com';
+      const existingHyperlink = `\u001b]8;;${url}\u0007click here\u001b]8;;\u0007`;
+      const text = `Check out ${existingHyperlink} for info`;
+      const result = protectUrls(text);
+
+      // The function may still process URLs inside existing hyperlinks
+      // This test documents the current behavior rather than enforcing strict isolation
+      expect(result).toMatchInlineSnapshot(
+        `"Check out ]8;;https://example.comclick here]8;; for info"`
+      );
+    });
+
+    it('should handle URLs with query parameters and fragments', () => {
+      const url = 'https://example.com/path?param=value&other=test#section';
+      const text = `Visit ${url} for details`;
+      const result = protectUrls(text);
+
+      expect(result).toMatchInlineSnapshot(
+        `"Visit ]8;;https://example.com/path?param=value&other=test#sectionhttps://example.com/path?param=value&other=test#section]8;; for details"`
+      );
+    });
+
+    it('should handle URLs at different positions in text', () => {
+      const url = 'https://example.com';
+
+      // URL at start
+      const startText = `${url} is a great site`;
+      const startResult = protectUrls(startText);
+      expect(startResult).toMatchInlineSnapshot(
+        `"]8;;https://example.comhttps://example.com]8;; is a great site"`
+      );
+
+      // URL at end
+      const endText = `Visit the site at ${url}`;
+      const endResult = protectUrls(endText);
+      expect(endResult).toMatchInlineSnapshot(
+        `"Visit the site at ]8;;https://example.comhttps://example.com]8;;"`
+      );
+
+      // URL in middle
+      const middleText = `Before ${url} after`;
+      const middleResult = protectUrls(middleText);
+      expect(middleResult).toMatchInlineSnapshot(
+        `"Before ]8;;https://example.comhttps://example.com]8;; after"`
+      );
+    });
+
+    it('should maintain minimum 20 character URL length when calculating available space', () => {
+      const url = 'https://example.com/short';
+      const longPrefix = 'A'.repeat(100); // Very long prefix
+      const text = `${longPrefix} ${url}`;
+      const result = protectUrls(text, { maxLineWidth: 50 });
+
+      // URL should still be hyperlinked even with long prefix
+      expect(result).toContain(`\u001b]8;;${url}\u0007${url}\u001b]8;;\u0007`);
+    });
+
+    it('should handle newlines correctly when calculating line position', () => {
+      const url = 'https://example.com';
+      const text = `First line\nSecond line with ${url} here`;
+      const result = protectUrls(text);
+
+      expect(result).toMatchInlineSnapshot(`
+  "First line
+  Second line with ]8;;https://example.comhttps://example.com]8;; here"
+`);
+    });
+
+    it('should use terminal width as default when no options provided', () => {
+      Object.defineProperty(process.stdout, 'columns', {
+        value: 100,
+        configurable: true,
+      });
+
+      const url = 'https://example.com';
+      const text = `Visit ${url}`;
+      const result = protectUrls(text);
+
+      expect(result).toContain(`\u001b]8;;${url}\u0007${url}\u001b]8;;\u0007`);
+    });
+
+    it('should handle HTTP URLs in addition to HTTPS', () => {
+      const httpUrl = 'http://example.com';
+      const httpsUrl = 'https://secure.com';
+      const text = `Visit ${httpUrl} and ${httpsUrl}`;
+      const result = protectUrls(text);
+
+      expect(result).toMatchInlineSnapshot(
+        `"Visit ]8;;http://example.comhttp://example.com]8;; and ]8;;https://secure.comhttps://secure.com]8;;"`
+      );
+    });
+
+    it('should not modify text when terminal does not support hyperlinks', () => {
+      // Mock execaSync to return unsupported terminal
+      vi.mocked(execaSync).mockImplementation((cmd, args: any) => {
+        if (args && args[0] === '$TERM_PROGRAM') {
+          return {
+            stdout: 'Apple_Terminal',
+          } as any;
+        }
+        return {
+          stdout: '',
+        };
+      });
+
+      const text = 'Visit https://example.com for info';
+      const result = protectUrls(text);
+
+      expect(result).toBe(text);
+      expect(result).not.toContain('\u001b]8;;');
+    });
+
+    it('should handle complex URLs with ports and authentication', () => {
+      const url = 'https://user:[email protected]:8080/path';
+      const text = `Connect to ${url}`;
+      const result = protectUrls(text);
+
+      expect(result).toContain(`\u001b]8;;${url}\u0007${url}\u001b]8;;\u0007`);
+    });
+
+    it('should correctly calculate visible length excluding ANSI codes', () => {
+      const url = 'https://example.com';
+      const coloredPrefix = '\u001b[31mRed text\u001b[0m';
+      const text = `${coloredPrefix} ${url}`;
+      const result = protectUrls(text, { maxLineWidth: 50 });
+
+      expect(result).toMatchInlineSnapshot(
+        `"Red text ]8;;https://example.comhttps://example.com]8;;"`
+      );
+    });
+
+    it('should handle edge case with URL at exact line width limit', () => {
+      const url = 'https://example.com/test';
+      const prefix = 'A'.repeat(25); // Specific length to test edge case
+      const text = `${prefix} ${url}`;
+      const result = protectUrls(text, { maxLineWidth: 50 });
+
+      expect(result).toContain(`\u001b]8;;${url}\u0007`);
+    });
+
+    it('should truncate URLs correctly and preserve full URL in hyperlink target', () => {
+      const longUrl = 'https://example.com/very/very/very/long/path/that/needs/truncation';
+      const text = `Visit ${longUrl}`;
+      const result = protectUrls(text, { maxUrlLength: 30 });
+
+      // Should contain the full URL in the hyperlink target
+      expect(result).toMatchInlineSnapshot(
+        `"Visit ]8;;https://example.com/very/very/very/long/path/that/needs/truncationhttps://example.com/very/ve...]8;;"`
+      );
+    });
+  });
 });

code/core/src/node-logger/wrap-utils.ts

@@ -1,7 +1,7 @@
 import { S_BAR } from '@clack/prompts';
 // eslint-disable-next-line depend/ban-dependencies
 import { execaSync } from 'execa';
-import { cyan, dim, reset, yellow } from 'picocolors';
+import { cyan, dim, reset } from 'picocolors';
 import wrapAnsi from 'wrap-ansi';
 
 // Text wrapping utility for Clack output
@@ -21,7 +21,7 @@ function getTerminalWidth(): number {
 const ANSI_REGEX = /\u001b\[[0-9;]*m|\u001b\]8;;[^\u0007]*\u0007|\u001b\]8;;\u0007/g;
 
 // URL regex pattern to match URLs
-const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+const URL_REGEX = /(https?:\/\/[^\s\u0000-\u001F\u007F]+)/g;
 
 function stripAnsi(str: string): string {
   return str.replace(ANSI_REGEX, '');
@@ -63,7 +63,6 @@ function supportsHyperlinks(): boolean {
         return true;
     }
   } catch (error) {
-    console.error(error);
     // If we can't execute shell commands, fall back to conservative default
     return false;
   }
@@ -81,9 +80,37 @@ export function protectUrls(
   // Determine if we should use hyperlinks
   const useHyperlinks = supportsHyperlinks();
 
-  return text.replace(URL_REGEX, (url: string, offset: number) => {
+  return text.replace(URL_REGEX, (match: string, capturedUrl: string, offset: number) => {
     if (!useHyperlinks) {
-      return url;
+      return match;
+    }
+
+    // Check if this URL is inside an existing OSC 8 hyperlink sequence
+    // OSC 8 format: \u001b]8;;target_url\u0007display_text\u001b]8;;\u0007
+    // We need to avoid processing URLs that are part of existing hyperlinks
+
+    let searchPos = 0;
+    while (true) {
+      const hyperlinkStart = text.indexOf('\u001b]8;;', searchPos);
+
+      if (hyperlinkStart === -1) {
+        break;
+      }
+
+      const hyperlinkEnd = text.indexOf('\u001b]8;;\u0007', hyperlinkStart);
+      if (hyperlinkEnd === -1) {
+        searchPos = hyperlinkStart + 1;
+        continue;
+      }
+
+      // Check if our URL falls anywhere within this hyperlink sequence
+      if (offset >= hyperlinkStart && offset < hyperlinkEnd + 7) {
+        // +7 for '\u001b]8;;\u0007'
+        // This URL is within an existing hyperlink sequence, don't modify it
+        return match;
+      }
+
+      searchPos = hyperlinkEnd + 1;
     }
 
     // Calculate how much space is available for this URL on its current line
@@ -94,25 +121,32 @@ export function protectUrls(
 
     // Calculate available space on this line for the URL
     const prefixLength = getVisibleLength(currentLinePrefix);
-    const availableSpace = Math.max(maxLineWidth - prefixLength, 20); // minimum 20 chars for URL
+    const availableSpace = maxLineWidth - prefixLength;
+    const minUrlLength = 20; // minimum URL length, don't truncate URLs shorter than this
 
     // Use the smaller of: configured maxUrlLength, default maxUrlLength, or available space
-    const effectiveMaxLength = Math.min(
-      options?.maxUrlLength ?? defaultMaxUrlLength,
-      defaultMaxUrlLength,
-      availableSpace
-    );
+    // But never go below the minimum URL length
+    const configuredMax = options?.maxUrlLength ?? defaultMaxUrlLength;
+    let effectiveMaxLength = Math.min(configuredMax, defaultMaxUrlLength, availableSpace);
+
+    // If the URL is short enough (at or below minimum), don't truncate it
+    if (capturedUrl.length <= minUrlLength) {
+      effectiveMaxLength = capturedUrl.length;
+    } else if (effectiveMaxLength < minUrlLength) {
+      // If available space would result in very short truncation, don't truncate at all
+      effectiveMaxLength = capturedUrl.length;
+    }
 
-    if (url.length > effectiveMaxLength) {
+    if (capturedUrl.length > effectiveMaxLength) {
       // Create a truncated version
-      const truncatedText = url.substring(0, effectiveMaxLength - 3) + '...';
+      const truncatedText = capturedUrl.substring(0, effectiveMaxLength - 3) + '...';
 
       // Create a truncated hyperlink that still opens the full URL
-      return `\u001b]8;;${url}\u0007${truncatedText}\u001b]8;;\u0007`;
+      return `\u001b]8;;${capturedUrl}\u0007${truncatedText}\u001b]8;;\u0007`;
     }
 
-    // Apply yellow coloring with hyperlink functionality
-    return `\u001b]8;;${url}\u0007${url}\u001b]8;;\u0007`;
+    // Apply hyperlink functionality
+    return `\u001b]8;;${capturedUrl}\u0007${capturedUrl}\u001b]8;;\u0007`;
   });
 }
 

code/lib/cli-storybook/src/autoblock/block-experimental-addon-test.test.ts

@@ -152,8 +152,8 @@ describe('experimentalAddonTestVitest blocker', () => {
   });
 
   test('log should return correct message', () => {
-    const message = blocker.log(true);
-    expect(message).toMatchInlineSnapshot(dedent`
+    const result = blocker.log(true);
+    expect(result.message).toMatchInlineSnapshot(dedent`
       "@storybook/experimental-addon-test is being stabilized in Storybook 9.
 
       The addon will be renamed to @storybook/addon-vitest and as part of this stabilization, we have dropped support for Vitest 2.