fix(cli): make /bug easier to open in terminals without hyperlink support (#3257)

packages/cli/src/ui/components/messages/StatusMessages.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { render } from 'ink-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { InfoMessage } from './StatusMessages.js';
+
+const mockLink = vi.fn(
+  ({ children }: { children: React.ReactNode; url: string }): React.ReactNode =>
+    children,
+);
+
+vi.mock('ink-link', () => ({
+  default: (props: { children: React.ReactNode; url: string }) =>
+    mockLink(props),
+}));
+
+describe('InfoMessage', () => {
+  it('renders a clickable link label when link metadata is provided', () => {
+    const url = 'https://example.com/report';
+    const { lastFrame } = render(
+      <InfoMessage
+        text="To submit your bug report, please open the following URL in your browser:"
+        linkUrl={url}
+        linkText="Open GitHub bug report form"
+      />,
+    );
+
+    expect(lastFrame()).toContain(
+      'To submit your bug report, please open the following URL in your browser:',
+    );
+    expect(lastFrame()).toContain('Open GitHub bug report form');
+    expect(mockLink).toHaveBeenCalledWith({
+      children: expect.anything(),
+      url,
+    });
+  });
+});

packages/cli/src/ui/components/messages/StatusMessages.tsx

@@ -6,6 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
+import Link from 'ink-link';
 import stringWidth from 'string-width';
 import { theme } from '../../semantic-colors.js';
 import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
@@ -16,10 +17,13 @@ interface StatusMessageProps {
   prefixColor: string;
   textColor: string;
   children?: React.ReactNode;
+  footer?: React.ReactNode;
 }
 
 interface StatusTextProps {
   text: string;
+  linkUrl?: string;
+  linkText?: string;
 }
 
 /**
@@ -32,8 +36,9 @@ export const StatusMessage: React.FC<StatusMessageProps> = ({
   prefixColor,
   textColor,
   children,
+  footer,
 }) => {
-  if (!text || text.trim() === '') {
+  if ((!text || text.trim() === '') && !footer) {
     return null;
   }
 
@@ -44,22 +49,38 @@ export const StatusMessage: React.FC<StatusMessageProps> = ({
       <Box width={prefixWidth} flexShrink={0}>
         <Text color={prefixColor}>{prefix}</Text>
       </Box>
-      <Box flexGrow={1}>
-        <Text wrap="wrap" color={textColor}>
-          <RenderInline text={text} />
-          {children}
-        </Text>
+      <Box flexGrow={1} flexDirection="column">
+        {text && text.trim() !== '' && (
+          <Text wrap="wrap" color={textColor}>
+            <RenderInline text={text} />
+            {children}
+          </Text>
+        )}
+        {footer}
       </Box>
     </Box>
   );
 };
 
-export const InfoMessage: React.FC<StatusTextProps> = ({ text }) => (
+export const InfoMessage: React.FC<StatusTextProps> = ({
+  text,
+  linkUrl,
+  linkText,
+}) => (
   <StatusMessage
     text={text}
     prefix="●"
     prefixColor={theme.text.primary}
     textColor={theme.text.primary}
+    footer={
+      linkUrl && (
+        <Link url={linkUrl}>
+          <Text color={theme.text.link} underline>
+            {linkText ?? linkUrl}
+          </Text>
+        </Link>
+      )
+    }
   />
 );