Update inline code and image card styling with theme colors

- Make inline code blocks bold with orange color (dark) / burnt orange
(light) - Add imageCardBorder theme color (neutral grey #6B7280) -
Update /image mode input, image cards, and pending images banner to use
grey

Author: brandonkachen

cli/src/__tests__/unit/segmented-control.test.ts

@@ -42,6 +42,12 @@ const theme: ChatTheme = {
   modeMaxText: '#d22',
   modePlanBg: '#14e',
   modePlanText: '#14e',
+  // Link
+  link: '#3B82F6',
+  // Directory
+  directory: '#9CA3AF',
+  // Image card
+  imageCardBorder: '#3B82F6',
   // Markdown
   markdown: {
     codeBackground: '#111',

cli/src/components/image-card.tsx

@@ -98,7 +98,7 @@ export const ImageCard = ({
         style={{
           flexDirection: 'column',
           borderStyle: 'single',
-          borderColor: theme.info,
+          borderColor: theme.imageCardBorder,
           width: IMAGE_CARD_WIDTH,
           padding: 0,
         }}

cli/src/components/login-modal.tsx

@@ -397,7 +397,7 @@ export const LoginModal = ({
                 text={loginUrl}
                 maxWidth={maxUrlWidth}
                 formatLines={formatLoginUrlLines}
-                color={hasClickedLink ? theme.success : theme.info}
+                color={hasClickedLink ? theme.success : theme.link}
                 activeColor={theme.success}
                 underlineOnHover={true}
                 isActive={justCopied}

cli/src/components/pending-images-banner.tsx

@@ -66,7 +66,7 @@ export const PendingImagesBanner = () => {
         marginLeft: width.is('sm') ? 0 : 1,
         marginRight: width.is('sm') ? 0 : 1,
         borderStyle: 'single',
-        borderColor: theme.info,
+        borderColor: theme.imageCardBorder,
         paddingLeft: 1,
         paddingRight: 1,
         paddingTop: 0,
@@ -83,7 +83,7 @@ export const PendingImagesBanner = () => {
       ))}
 
       {/* Header */}
-      <text style={{ fg: theme.info }}>
+      <text style={{ fg: theme.imageCardBorder }}>
         📎{' '}
         {readyCount > 0 && `${pluralize(readyCount, 'image')} attached`}
         {readyCount > 0 && processingCount > 0 && ', '}

cli/src/components/terminal-link.tsx

@@ -38,7 +38,7 @@ export const TerminalLink: React.FC<TerminalLinkProps> = ({
   const theme = useTheme()
 
   // Use theme colors as defaults if not provided
-  const linkColor = color ?? theme.info
+  const linkColor = color ?? theme.link
   const linkActiveColor = activeColor ?? theme.success
   const [isHovered, setIsHovered] = useState(false)
 

cli/src/components/tools/list-directory.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { SimpleToolCallItem } from './tool-call-item'
 import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
 
 import type { ToolRenderConfig } from './types'
 
@@ -41,8 +42,20 @@ export const ListDirectoryComponent = defineToolComponent({
     // Format directory list
     const description = directories.join(', ')
 
+    // Use a wrapper component to access theme
+    const ListDirectoryContent = () => {
+      const theme = useTheme()
+      return (
+        <SimpleToolCallItem
+          name="List"
+          description={description}
+          descriptionColor={theme.directory}
+        />
+      )
+    }
+
     return {
-      content: <SimpleToolCallItem name="List" description={description} />,
+      content: <ListDirectoryContent />,
     }
   },
 })

cli/src/components/tools/read-subtree.tsx

@@ -1,5 +1,6 @@
 import { SimpleToolCallItem } from './tool-call-item'
 import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
 
 import type { ToolRenderConfig } from './types'
 
@@ -24,11 +25,20 @@ export const ReadSubtreeComponent = defineToolComponent({
 
     const finalPath = displayPath || '.'
 
-    // Render a single bullet line like the Read tool
+    // Use a wrapper component to access theme
+    const ReadSubtreeContent = () => {
+      const theme = useTheme()
+      return (
+        <SimpleToolCallItem
+          name="List deeply"
+          description={finalPath}
+          descriptionColor={theme.directory}
+        />
+      )
+    }
+
     return {
-      content: (
-        <SimpleToolCallItem name="List deeply" description={finalPath} />
-      ),
+      content: <ReadSubtreeContent />,
     }
   },
 })

cli/src/components/tools/tool-call-item.tsx

@@ -124,11 +124,13 @@ const renderExpandedContent = (
 interface SimpleToolCallItemProps {
   name: string
   description: string
+  descriptionColor?: string
 }
 
 export const SimpleToolCallItem = ({
   name,
   description,
+  descriptionColor,
 }: SimpleToolCallItemProps) => {
   const theme = useTheme()
   const bulletChar = '• '
@@ -140,7 +142,7 @@ export const SimpleToolCallItem = ({
         <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
           {name}
         </span>
-        <span fg={theme.foreground}> {description}</span>
+        <span fg={descriptionColor ?? theme.foreground}> {description}</span>
       </text>
     </box>
   )

cli/src/types/theme-system.ts

@@ -16,6 +16,7 @@ export interface MarkdownThemeOverrides {
   blockquoteTextFg?: string
   dividerFg?: string
   codeMonochrome?: boolean
+  linkFg?: string
 }
 
 /**
@@ -45,9 +46,15 @@ export interface ChatTheme {
   /** Warning color - cautions, alerts, validation issues */
   warning: string
 
-  /** Info color - informational elements, links, hints */
+  /** Info color - informational elements, hints */
   info: string
 
+  /** Link color - hyperlinks, clickable references */
+  link: string
+
+  /** Directory color - folder/directory paths */
+  directory: string
+
   // ============================================================================
   // NEUTRAL SCALE
   // ============================================================================
@@ -118,6 +125,13 @@ export interface ChatTheme {
   /** Plan mode toggle text */
   modePlanText: string
 
+  // ============================================================================
+  // IMAGE CARD
+  // ============================================================================
+
+  /** Image card border color */
+  imageCardBorder: string
+
   // ============================================================================
   // MARKDOWN
   // ============================================================================

cli/src/utils/input-modes.ts

@@ -14,6 +14,8 @@ export type ThemeColorKey =
   | 'success'
   | 'info'
   | 'muted'
+  | 'imageCardBorder'
+  | 'link'
 
 export type InputModeConfig = {
   /** Prefix icon shown before input (e.g., "!" for bash) */
@@ -65,7 +67,7 @@ export const INPUT_MODE_CONFIGS: Record<InputMode, InputModeConfig> = {
   },
   image: {
     icon: '📎',
-    color: 'info',
+    color: 'imageCardBorder',
     placeholder: 'enter image path or Ctrl+V to paste',
     widthAdjustment: 3, // emoji width + padding
     showAgentModeToggle: false,