Remove resolveColor logic from remaining components

- Remove resolveFg/resolveThemeColor from SuggestionMenu, MultilineInput, RaisedPill
- Components use theme properties directly (e.g., fg={theme.inputFg})
- All color resolution happens during theme building, not in components
- Cleaner, more maintainable component code

Author: brandonkachen

cli/src/components/multiline-input.tsx

@@ -574,34 +574,24 @@ export const MultilineInput = forwardRef<
     maxHeight,
   ])
 
-  const resolveFg = (
-    color?: string | null,
-    fallback?: string | null,
-  ): string | undefined => {
-    if (color && color !== 'default') return color
-    if (fallback && fallback !== 'default') return fallback
-    return undefined
+  const inputColor = isPlaceholder
+    ? theme.inputPlaceholder
+    : focused
+      ? theme.inputFocusedFg
+      : theme.inputFg
+
+  const textStyle: Record<string, unknown> = {
+    bg: 'transparent',
+    fg: inputColor,
   }
 
-  const resolvedInputColor = resolveFg(
-    isPlaceholder
-      ? theme.inputPlaceholder
-      : focused
-        ? theme.inputFocusedFg ?? theme.inputFg
-        : theme.inputFg,
-  )
-
-  const textStyle: Record<string, unknown> = { bg: 'transparent' }
-  if (resolvedInputColor) {
-    textStyle.fg = resolvedInputColor
-  }
   if (isPlaceholder) {
     textStyle.attributes = TextAttributes.DIM
   } else if (textAttributes !== undefined && textAttributes !== 0) {
     textStyle.attributes = textAttributes
   }
 
-  const cursorFg = resolveFg(theme.cursor, theme.statusAccent)
+  const cursorFg = theme.cursor
 
   return (
     <scrollbox

cli/src/components/raised-pill.tsx

@@ -31,15 +31,9 @@ export const RaisedPill = ({
   onPress,
   style,
 }: RaisedPillProps): React.ReactNode => {
-  const resolveFg = (color?: string): string | undefined =>
-    color && color !== 'default' ? color : undefined
-
-  const resolvedFrameColor = resolveFg(frameColor)
-  const resolvedTextColor = resolveFg(textColor)
-
   const leftRightPadding =
     padding > 0
-      ? [{ text: ' '.repeat(padding), fg: resolvedTextColor }]
+      ? [{ text: ' '.repeat(padding), fg: textColor }]
       : []
 
   const normalizedSegments: Array<{
@@ -50,7 +44,7 @@ export const RaisedPill = ({
     ...leftRightPadding,
     ...segments.map((segment) => ({
       text: segment.text,
-      fg: resolveFg(segment.fg ?? textColor),
+      fg: segment.fg ?? textColor,
       attr: segment.attr,
     })),
     ...leftRightPadding,
@@ -71,32 +65,28 @@ export const RaisedPill = ({
       onMouseDown={onPress}
     >
       <text>
-        <span
-          {...(resolvedFrameColor ? { fg: resolvedFrameColor } : undefined)}
-        >{`╭${horizontal}╮`}</span>
+        <span fg={frameColor}>{`╭${horizontal}╮`}</span>
       </text>
       <text>
-        <span {...(resolvedFrameColor ? { fg: resolvedFrameColor } : undefined)}>
+        <span fg={frameColor}>
           │
         </span>
         {normalizedSegments.map((segment, idx) => (
           <span
             key={idx}
-            {...(segment.fg ? { fg: segment.fg } : undefined)}
+            fg={segment.fg}
             bg={fillColor ?? 'transparent'}
             attributes={segment.attr}
           >
             {segment.text}
           </span>
         ))}
-        <span {...(resolvedFrameColor ? { fg: resolvedFrameColor } : undefined)}>
+        <span fg={frameColor}>
           │
         </span>
       </text>
       <text>
-        <span
-          {...(resolvedFrameColor ? { fg: resolvedFrameColor } : undefined)}
-        >{`╰${horizontal}╯`}</span>
+        <span fg={frameColor}>{`╰${horizontal}╯`}</span>
       </text>
     </box>
   )

cli/src/components/suggestion-menu.tsx

@@ -22,18 +22,6 @@ export const SuggestionMenu = ({
   prefix = '/',
 }: SuggestionMenuProps) => {
   const theme = useTheme()
-  const resolveFg = (
-    color?: string | null,
-    fallback?: string | null,
-  ): string | undefined => {
-    if (color && color !== 'default') return color
-    if (fallback && fallback !== 'default') return fallback
-    return undefined
-  }
-  const fallbackTextColor =
-    resolveFg(theme.agentContentText) ?? resolveFg(theme.chromeText) ?? '#d1d5e5'
-  const fallbackDescriptionColor =
-    resolveFg(theme.timestampUser) ?? fallbackTextColor
 
   if (items.length === 0) {
     return null
@@ -88,11 +76,6 @@ export const SuggestionMenu = ({
           const descriptionColor = isSelected
             ? theme.statusAccent
             : theme.timestampUser
-          const textFg = resolveFg(textColor, fallbackTextColor)
-          const descriptionFg = resolveFg(
-            descriptionColor,
-            fallbackDescriptionColor,
-          )
           return (
             <box
               key={item.id}
@@ -109,17 +92,15 @@ export const SuggestionMenu = ({
             >
               <text
                 style={{
-                  ...(textFg ? { fg: textFg } : undefined),
+                  fg: textColor,
                   marginBottom: 0,
                   wrapMode: 'none',
                 }}
               >
                 <span fg={theme.agentPrefix}>{effectivePrefix}</span>
                 <span>{item.label}</span>
                 <span>{padding}</span>
-                <span
-                  {...(descriptionFg ? { fg: descriptionFg } : undefined)}
-                >
+                <span fg={descriptionColor}>
                   {item.description}
                 </span>
               </text>