feat(ui): add response semantic color (#12450)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: shambhu-hegde <143840542+shambhu-hegde@users.noreply.github.com>

docs/cli/themes.md

@@ -88,6 +88,11 @@ color keys. For example:
 - `DiffRemoved` (optional, for removed lines in diffs)
 - `DiffModified` (optional, for modified lines in diffs)
 
+You can also override individual UI text roles by adding a nested `text` object.
+This object supports the keys `primary`, `secondary`, `link`, `accent`, and
+`response`. When `text.response` is provided it takes precedence over
+`text.primary` for rendering model responses in chat.
+
 **Required Properties:**
 
 - `name` (must match the key in the `customThemes` object and be a string)

packages/cli/src/ui/components/ShellConfirmationDialog.tsx

@@ -93,7 +93,7 @@ export const ShellConfirmationDialog: React.FC<
           >
             {commands.map((cmd) => (
               <Text key={cmd} color={theme.text.link}>
-                <RenderInline text={cmd} />
+                <RenderInline text={cmd} defaultColor={theme.text.link} />
               </Text>
             ))}
           </Box>

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

@@ -23,8 +23,8 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
         <Text color={theme.status.warning}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={theme.status.warning}>
+        <Text wrap="wrap">
-          <RenderInline text={text} />
+          <RenderInline text={text} defaultColor={theme.status.warning} />
         </Text>
       </Box>
     </Box>

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

@@ -249,9 +249,7 @@ export const ToolConfirmationMessage: React.FC<
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={theme.text.link}>
+        <RenderInline text={infoProps.prompt} defaultColor={theme.text.link} />
-          <RenderInline text={infoProps.prompt} />
-        </Text>
         {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
           <Box flexDirection="column" marginTop={1}>
             <Text color={theme.text.primary}>URLs to fetch:</Text>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
 
 interface WarningMessageProps {
@@ -20,11 +20,11 @@ export const WarningMessage: React.FC<WarningMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row" marginTop={1}>
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentYellow}>{prefix}</Text>
+        <Text color={theme.status.warning}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentYellow}>
+        <Text wrap="wrap">
-          <RenderInline text={text} />
+          <RenderInline text={text} defaultColor={theme.status.warning} />
         </Text>
       </Box>
     </Box>

packages/cli/src/ui/themes/no-color.ts

@@ -32,6 +32,7 @@ const noColorSemanticColors: SemanticColors = {
     secondary: '',
     link: '',
     accent: '',
+    response: '',
   },
   background: {
     primary: '',

packages/cli/src/ui/themes/semantic-tokens.ts

@@ -12,6 +12,7 @@ export interface SemanticColors {
     secondary: string;
     link: string;
     accent: string;
+    response: string;
   };
   background: {
     primary: string;
@@ -43,6 +44,7 @@ export const lightSemanticColors: SemanticColors = {
     secondary: lightTheme.Gray,
     link: lightTheme.AccentBlue,
     accent: lightTheme.AccentPurple,
+    response: lightTheme.Foreground,
   },
   background: {
     primary: lightTheme.Background,
@@ -74,6 +76,7 @@ export const darkSemanticColors: SemanticColors = {
     secondary: darkTheme.Gray,
     link: darkTheme.AccentBlue,
     accent: darkTheme.AccentPurple,
+    response: darkTheme.Foreground,
   },
   background: {
     primary: darkTheme.Background,
@@ -105,6 +108,7 @@ export const ansiSemanticColors: SemanticColors = {
     secondary: ansiTheme.Gray,
     link: ansiTheme.AccentBlue,
     accent: ansiTheme.AccentPurple,
+    response: ansiTheme.Foreground,
   },
   background: {
     primary: ansiTheme.Background,

packages/cli/src/ui/themes/theme.ts

@@ -38,6 +38,7 @@ export interface CustomTheme {
     secondary?: string;
     link?: string;
     accent?: string;
+    response?: string;
   };
   background?: {
     primary?: string;
@@ -166,6 +167,7 @@ export class Theme {
         secondary: this.colors.Gray,
         link: this.colors.AccentBlue,
         accent: this.colors.AccentPurple,
+        response: this.colors.Foreground,
       },
       background: {
         primary: this.colors.Background,
@@ -427,6 +429,10 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
       secondary: customTheme.text?.secondary ?? colors.Gray,
       link: customTheme.text?.link ?? colors.AccentBlue,
       accent: customTheme.text?.accent ?? colors.AccentPurple,
+      response:
+        customTheme.text?.response ??
+        customTheme.text?.primary ??
+        colors.Foreground,
     },
     background: {
       primary: customTheme.background?.primary ?? colors.Background,

packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx

@@ -19,12 +19,17 @@ const UNDERLINE_TAG_END_LENGTH = 4; // For "</u>"
 
 interface RenderInlineProps {
   text: string;
+  defaultColor?: string;
 }
 
-const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
+const RenderInlineInternal: React.FC<RenderInlineProps> = ({
+  text,
+  defaultColor,
+}) => {
+  const baseColor = defaultColor ?? theme.text.primary;
   // Early return for plain text without markdown or URLs
   if (!/[*_~`<[https?:]/.test(text)) {
-    return <Text color={theme.text.primary}>{text}</Text>;
+    return <Text color={baseColor}>{text}</Text>;
   }
 
   const nodes: React.ReactNode[] = [];
@@ -36,7 +41,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
   while ((match = inlineRegex.exec(text)) !== null) {
     if (match.index > lastIndex) {
       nodes.push(
-        <Text key={`t-${lastIndex}`}>
+        <Text key={`t-${lastIndex}`} color={baseColor}>
           {text.slice(lastIndex, match.index)}
         </Text>,
       );
@@ -53,7 +58,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
         fullMatch.length > BOLD_MARKER_LENGTH * 2
       ) {
         renderedNode = (
-          <Text key={key} bold>
+          <Text key={key} bold color={baseColor}>
             {fullMatch.slice(BOLD_MARKER_LENGTH, -BOLD_MARKER_LENGTH)}
           </Text>
         );
@@ -71,7 +76,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
         )
       ) {
         renderedNode = (
-          <Text key={key} italic>
+          <Text key={key} italic color={baseColor}>
             {fullMatch.slice(ITALIC_MARKER_LENGTH, -ITALIC_MARKER_LENGTH)}
           </Text>
         );
@@ -81,7 +86,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
         fullMatch.length > STRIKETHROUGH_MARKER_LENGTH * 2
       ) {
         renderedNode = (
-          <Text key={key} strikethrough>
+          <Text key={key} strikethrough color={baseColor}>
             {fullMatch.slice(
               STRIKETHROUGH_MARKER_LENGTH,
               -STRIKETHROUGH_MARKER_LENGTH,
@@ -111,7 +116,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
           const linkText = linkMatch[1];
           const url = linkMatch[2];
           renderedNode = (
-            <Text key={key}>
+            <Text key={key} color={baseColor}>
               {linkText}
               <Text color={theme.text.link}> ({url})</Text>
             </Text>
@@ -124,7 +129,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
           UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 // -1 because length is compared to combined length of start and end tags
       ) {
         renderedNode = (
-          <Text key={key} underline>
+          <Text key={key} underline color={baseColor}>
             {fullMatch.slice(
               UNDERLINE_TAG_START_LENGTH,
               -UNDERLINE_TAG_END_LENGTH,
@@ -143,12 +148,22 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
       renderedNode = null;
     }
 
-    nodes.push(renderedNode ?? <Text key={key}>{fullMatch}</Text>);
+    nodes.push(
+      renderedNode ?? (
+        <Text key={key} color={baseColor}>
+          {fullMatch}
+        </Text>
+      ),
+    );
     lastIndex = inlineRegex.lastIndex;
   }
 
   if (lastIndex < text.length) {
-    nodes.push(<Text key={`t-${lastIndex}`}>{text.slice(lastIndex)}</Text>);
+    nodes.push(
+      <Text key={`t-${lastIndex}`} color={baseColor}>
+        {text.slice(lastIndex)}
+      </Text>,
+    );
   }
 
   return <>{nodes.filter((node) => node !== null)}</>;

packages/cli/src/ui/utils/MarkdownDisplay.tsx

@@ -35,6 +35,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
   renderMarkdown = true,
 }) => {
   const settings = useSettings();
+  const responseColor = theme.text.response ?? theme.text.primary;
 
   if (!text) return <></>;
 
@@ -138,8 +139,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
         // Not a table, treat as regular text
         addContentBlock(
           <Box key={key}>
-            <Text wrap="wrap">
+            <Text wrap="wrap" color={responseColor}>
-              <RenderInline text={line} />
+              <RenderInline text={line} defaultColor={responseColor} />
             </Text>
           </Box>,
         );
@@ -177,8 +178,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
       if (line.trim().length > 0) {
         addContentBlock(
           <Box key={key}>
-            <Text wrap="wrap">
+            <Text wrap="wrap" color={responseColor}>
-              <RenderInline text={line} />
+              <RenderInline text={line} defaultColor={responseColor} />
             </Text>
           </Box>,
         );
@@ -197,35 +198,38 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
         case 1:
           headerNode = (
             <Text bold color={theme.text.link}>
-              <RenderInline text={headerText} />
+              <RenderInline text={headerText} defaultColor={theme.text.link} />
             </Text>
           );
           break;
         case 2:
           headerNode = (
             <Text bold color={theme.text.link}>
-              <RenderInline text={headerText} />
+              <RenderInline text={headerText} defaultColor={theme.text.link} />
             </Text>
           );
           break;
         case 3:
           headerNode = (
-            <Text bold color={theme.text.primary}>
+            <Text bold color={responseColor}>
-              <RenderInline text={headerText} />
+              <RenderInline text={headerText} defaultColor={responseColor} />
             </Text>
           );
           break;
         case 4:
           headerNode = (
             <Text italic color={theme.text.secondary}>
-              <RenderInline text={headerText} />
+              <RenderInline
+                text={headerText}
+                defaultColor={theme.text.secondary}
+              />
             </Text>
           );
           break;
         default:
           headerNode = (
-            <Text color={theme.text.primary}>
+            <Text color={responseColor}>
-              <RenderInline text={headerText} />
+              <RenderInline text={headerText} defaultColor={responseColor} />
             </Text>
           );
           break;
@@ -268,8 +272,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
       } else {
         addContentBlock(
           <Box key={key}>
-            <Text wrap="wrap" color={theme.text.primary}>
+            <Text wrap="wrap" color={responseColor}>
-              <RenderInline text={line} />
+              <RenderInline text={line} defaultColor={responseColor} />
             </Text>
           </Box>,
         );
@@ -401,6 +405,7 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
   const prefix = type === 'ol' ? `${marker}. ` : `${marker} `;
   const prefixWidth = prefix.length;
   const indentation = leadingWhitespace.length;
+  const listResponseColor = theme.text.response ?? theme.text.primary;
 
   return (
     <Box
@@ -408,11 +413,11 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
       flexDirection="row"
     >
       <Box width={prefixWidth}>
-        <Text color={theme.text.primary}>{prefix}</Text>
+        <Text color={listResponseColor}>{prefix}</Text>
       </Box>
       <Box flexGrow={LIST_ITEM_TEXT_FLEX_GROW}>
-        <Text wrap="wrap" color={theme.text.primary}>
+        <Text wrap="wrap" color={listResponseColor}>
-          <RenderInline text={itemText} />
+          <RenderInline text={itemText} defaultColor={listResponseColor} />
         </Text>
       </Box>
     </Box>