From 9862cf3204c953b67425219193c4eb700084df9c Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguel.solorio07@gmail.com>
Date: Thu, 15 May 2025 16:35:21 -0700
Subject: UI improvements for suggestions & status (#373)

---
 packages/cli/src/ui/components/SuggestionsDisplay.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'packages/cli/src/ui/components/SuggestionsDisplay.tsx')

diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index 3f2094bb..fb8005f6 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/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">
-- 
cgit v1.2.3