feat: dropdown menu (#550)

* dropdown menu

* snapshot tests and feedbacks

Author: VascoSch92

openhands_cli/tui/widgets/user_input/autocomplete_dropdown.py

@@ -1,5 +1,7 @@
 from pathlib import Path
+from typing import Final
 
+from rich.text import Text
 from textual.app import ComposeResult
 from textual.containers import Container
 from textual.widgets import OptionList
@@ -23,18 +25,20 @@ class AutoCompleteDropdown(Container):
     and file path (@) completions.
     """
 
+    # Min spaces between command name and description
+    DESCRIPTION_GAP: Final[int] = 3
+
     DEFAULT_CSS = """
     AutoCompleteDropdown {
-        layer: autocomplete;
-        width: auto;
-        min-width: 30;
-        max-width: 60;
+        width: 100%;
         height: auto;
         max-height: 12;
         display: none;
         background: $surface;
-        border: solid $primary;
-        padding: 0;
+        border-top: solid $primary;
+        border-left: solid $primary;
+        border-right: solid $primary;
+        padding: 0 1;
         margin: 0;
 
         OptionList {
@@ -106,10 +110,30 @@ def show_dropdown(self, items: list[CompletionItem]) -> None:
 
         self._completion_items = items
         self.option_list.clear_options()
+
+        # Find the longest command name for alignment
+        max_cmd_len = 0
         for item in items:
-            self.option_list.add_option(
-                Option(item.display_text, id=item.completion_value)
-            )
+            if (
+                item.completion_type == CompletionType.COMMAND
+                and " - " in item.display_text
+            ):
+                cmd_name = item.display_text.split(" - ", 1)[0]
+                max_cmd_len = max(max_cmd_len, len(cmd_name))
+
+        for item in items:
+            prompt: str | Text = item.display_text
+            if (
+                item.completion_type == CompletionType.COMMAND
+                and " - " in item.display_text
+            ):
+                cmd_name, description = item.display_text.split(" - ", 1)
+                prompt = Text()
+                # Pad command name so descriptions align, with a gap between
+                padding = max_cmd_len + self.DESCRIPTION_GAP
+                prompt.append(cmd_name.ljust(padding), style="bold")
+                prompt.append(description, style="dim")
+            self.option_list.add_option(Option(prompt, id=item.completion_value))
 
         self.display = True
         self.option_list.highlighted = 0

openhands_cli/tui/widgets/user_input/input_field.py

@@ -104,10 +104,8 @@ class InputField(Container):
         width: 100%;
         height: auto;
         min-height: 3;
-        layers: base autocomplete;
 
         #single_line_input {
-            layer: base;
             width: 100%;
             height: auto;
             min-height: 3;
@@ -123,7 +121,6 @@ class InputField(Container):
         }
 
         #multiline_input {
-            layer: base;
             width: 100%;
             height: 6;
             background: $background;
@@ -136,14 +133,6 @@ class InputField(Container):
             border: solid $primary;
             background: $background;
         }
-
-        AutoCompleteDropdown {
-            layer: autocomplete;
-            offset-x: 1;
-            offset-y: -2;
-            overlay: screen;
-            constrain: inside inflect;
-        }
     }
     """
 
@@ -178,9 +167,9 @@ def __init__(self, placeholder: str = "", **kwargs) -> None:
 
     def compose(self) -> ComposeResult:
         """Create the input widgets."""
+        yield self.autocomplete
         yield self.single_line_widget
         yield self.multiline_widget
-        yield self.autocomplete
 
     def on_mount(self) -> None:
         """Focus the input when mounted."""