diff --git a/packages/cli/src/ui/AppContainer.tsx b/packages/cli/src/ui/AppContainer.tsx index a5977bb615..6fd637d780 100644 --- a/packages/cli/src/ui/AppContainer.tsx +++ b/packages/cli/src/ui/AppContainer.tsx @@ -211,7 +211,7 @@ export const AppContainer = (props: AppContainerProps) => { 20, Math.floor(terminalWidth * widthFraction) - 3, ); - const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 0.8)); + const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0)); const mainAreaWidth = Math.floor(terminalWidth * 0.9); const staticAreaMaxItemHeight = Math.max(terminalHeight * 4, 100); diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx index 0e8bf8e18f..3cbb689e24 100644 --- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx +++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx @@ -54,6 +54,14 @@ export function SuggestionsDisplay({ ); const visibleSuggestions = suggestions.slice(startIndex, endIndex); + const getFullLabel = (s: Suggestion) => + s.label + (s.commandKind === CommandKind.MCP_PROMPT ? ' [MCP]' : ''); + + const maxLabelLength = Math.max( + ...suggestions.map((s) => getFullLabel(s).length), + ); + const commandColumnWidth = Math.min(maxLabelLength, Math.floor(width * 0.5)); + return ( {scrollOffset > 0 && } @@ -72,36 +80,23 @@ export function SuggestionsDisplay({ ); return ( - - - {(() => { - const isSlashCommand = userInput.startsWith('/'); - return ( - <> - {isSlashCommand ? ( - - {labelElement} - {suggestion.commandKind === CommandKind.MCP_PROMPT && ( - [MCP] - )} - - ) : ( - labelElement - )} - {suggestion.description && ( - - - {suggestion.description} - - - )} - - ); - })()} + + + + {labelElement} + {suggestion.commandKind === CommandKind.MCP_PROMPT && ( + [MCP] + )} + + + {suggestion.description && ( + + + {suggestion.description} + + + )} ); })}