UI improvements for suggestions & status (#373)

packages/cli/src/ui/App.tsx

@@ -310,6 +310,7 @@ export const App = ({
                     isLoading={completion.isLoadingSuggestions}
                     width={suggestionsWidth}
                     scrollOffset={completion.visibleStartIndex}
+                    userInput={query}
                   />
                 </Box>
               )}

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

@@ -24,7 +24,7 @@ export const Footer: React.FC<FooterProps> = ({
   cliVersion,
   geminiMdFileCount,
 }) => (
-  <Box>
+  <Box marginTop={1}>
     <Box>
       {geminiMdFileCount > 0 && (
         <Text color={Colors.SubtleComment}>

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

@@ -17,6 +17,7 @@ interface SuggestionsDisplayProps {
   isLoading: boolean;
   width: number;
   scrollOffset: number;
+  userInput: string;
 }
 
 export const MAX_SUGGESTIONS_TO_SHOW = 8;
@@ -27,6 +28,7 @@ export function SuggestionsDisplay({
   isLoading,
   width,
   scrollOffset,
+  userInput,
 }: SuggestionsDisplayProps) {
   if (isLoading) {
     return (
@@ -60,9 +62,15 @@ export function SuggestionsDisplay({
         return (
           <Box key={`${suggestion}-${originalIndex}`} width={width}>
             <Box flexDirection="row">
-              <Box width={20} flexShrink={0}>
+              {userInput.startsWith('/') ? (
+                // only use box model for (/) command mode
+                <Box width={20} flexShrink={0}>
+                  <Text color={textColor}>{suggestion.label}</Text>
+                </Box>
+              ) : (
+                // use regular text for other modes (@ context)
                 <Text color={textColor}>{suggestion.label}</Text>
-              </Box>
+              )}
               {suggestion.description ? (
                 <Box flexGrow={1}>
                   <Text color={textColor} wrap="wrap">

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

@@ -102,7 +102,7 @@ export function ThemeDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.AccentPurple}
+      borderColor={Colors.SubtleComment}
       flexDirection="row"
       padding={1}
       width="100%"

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

@@ -24,7 +24,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   const hasPending = !toolCalls.every(
     (t) => t.status === ToolCallStatus.Success,
   );
-  const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentPurple;
+  const borderColor = hasPending ? Colors.AccentYellow : Colors.SubtleComment;
 
   return (
     <Box