fix: Slash Command Autocomplete vs. Auto-Execute Fix (#2257)

I have successfully implemented a root-cause fix for the issue where pressing Tab to autocomplete a slash command would immediately execute it instead of just completing the text.

Root Cause Analysis:
In pkg/tui/components/completion/completion.go, both Enter and Tab were bound to the same key binding, causing auto-submit completions (like slash commands) to execute immediately upon selection with either key.

Solution Implemented:
- Separate Tab and Enter key bindings in completion.go.
- Tab now autocompletes text only (AutoExecute=false).
- Enter executes the command (AutoExecute=true).
- Updated editor.go to handle the AutoExecute flag.
- Added comprehensive tests in pkg/tui/components/completion/autocomplete_test.go.

Verification:
- pkg/tui/components/completion tests: 6/6 PASS
- pkg/tui/components/editor tests: PASS
- Successful build of project and binary

Fixes #2257

Author: yunus25jmi1

pkg/tui/components/completion/autocomplete_test.go

@@ -0,0 +1,111 @@
+package completion
+
+import (
+	"testing"
+
+	tea "charm.land/bubbletea/v2"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestTabVsEnterBehavior(t *testing.T) {
+	t.Run("Enter closes completion popup", func(t *testing.T) {
+		c := New().(*manager)
+		c.items = []Item{
+			{Label: "exit", Description: "Exit", Value: "/exit"},
+		}
+		c.filterItems("")
+		c.visible = true
+
+		// Press Enter
+		result, _ := c.Update(tea.KeyPressMsg{Code: tea.KeyEnter})
+
+		// Verify completion popup is closed
+		assert.False(t, result.(*manager).visible, "Enter should close completion popup")
+	})
+
+	t.Run("Tab closes completion popup", func(t *testing.T) {
+		c := New().(*manager)
+		c.items = []Item{
+			{Label: "exit", Description: "Exit", Value: "/exit"},
+		}
+		c.filterItems("")
+		c.visible = true
+
+		// Press Tab
+		result, _ := c.Update(tea.KeyPressMsg{Code: tea.KeyTab})
+
+		// Verify completion popup is closed
+		assert.False(t, result.(*manager).visible, "Tab should close completion popup")
+	})
+
+	t.Run("Tab does not trigger Execute function", func(t *testing.T) {
+		c := New().(*manager)
+		c.items = []Item{
+			{
+				Label:       "export",
+				Description: "Export session",
+				Value:       "/export",
+				Execute: func() tea.Cmd {
+					// This should not be called for Tab
+					t.Error("Tab should not trigger Execute function")
+					return nil
+				},
+			},
+		}
+		c.filterItems("")
+		c.visible = true
+
+		// Press Tab (should autocomplete but not execute)
+		c.Update(tea.KeyPressMsg{Code: tea.KeyTab})
+
+		// If we reach here without t.Error being called, the test passes
+	})
+
+	t.Run("Enter triggers Execute function", func(t *testing.T) {
+		c := New().(*manager)
+		c.items = []Item{
+			{
+				Label:       "browse",
+				Description: "Browse files",
+				Value:       "@",
+				Execute: func() tea.Cmd {
+					return nil
+				},
+			},
+		}
+		c.filterItems("")
+		c.visible = true
+
+		// Press Enter (should execute)
+		_, cmd := c.Update(tea.KeyPressMsg{Code: tea.KeyEnter})
+
+		// The Execute function is called when the command is run by the tea runtime
+		// For this test, we verify that a command is returned (which will call Execute when run)
+		assert.NotNil(t, cmd, "Enter should return a command that will execute the item")
+	})
+
+	t.Run("Escape closes popup without executing", func(t *testing.T) {
+		c := New().(*manager)
+		executed := false
+		c.items = []Item{
+			{
+				Label:       "exit",
+				Description: "Exit",
+				Value:       "/exit",
+				Execute: func() tea.Cmd {
+					executed = true
+					return nil
+				},
+			},
+		}
+		c.filterItems("")
+		c.visible = true
+
+		// Press Escape
+		c.Update(tea.KeyPressMsg{Code: tea.KeyEsc})
+
+		// Verify popup is closed and Execute was NOT called
+		assert.False(t, c.visible, "Escape should close completion popup")
+		assert.False(t, executed, "Escape should not trigger Execute function")
+	})
+}

pkg/tui/components/completion/completion.go

@@ -54,6 +54,9 @@ type QueryMsg struct {
 type SelectedMsg struct {
 	Value   string
 	Execute func() tea.Cmd
+	// AutoExecute is true when Enter was pressed (should auto-submit commands)
+	// false when Tab was pressed (just autocomplete, don't execute)
+	AutoExecute bool
 }
 
 // SelectionChangedMsg is sent when the selected item changes (for preview in editor)
@@ -88,6 +91,7 @@ type completionKeyMap struct {
 	Up     key.Binding
 	Down   key.Binding
 	Enter  key.Binding
+	Tab    key.Binding
 	Escape key.Binding
 }
 
@@ -103,8 +107,12 @@ func defaultCompletionKeyMap() completionKeyMap {
 			key.WithHelp("↓", "down"),
 		),
 		Enter: key.NewBinding(
-			key.WithKeys("enter", "tab"),
-			key.WithHelp("enter/tab", "select"),
+			key.WithKeys("enter"),
+			key.WithHelp("enter", "select"),
+		),
+		Tab: key.NewBinding(
+			key.WithKeys("tab"),
+			key.WithHelp("tab", "autocomplete"),
 		),
 		Escape: key.NewBinding(
 			key.WithKeys("esc"),
@@ -255,11 +263,28 @@ func (c *manager) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 			selectedItem := c.filteredItems[c.selected]
 			return c, tea.Sequence(
 				core.CmdHandler(SelectedMsg{
-					Value:   selectedItem.Value,
-					Execute: selectedItem.Execute,
+					Value:       selectedItem.Value,
+					Execute:     selectedItem.Execute,
+					AutoExecute: true, // Enter pressed - auto-execute commands
 				}),
 				core.CmdHandler(ClosedMsg{}),
 			)
+
+		case key.Matches(msg, c.keyMap.Tab):
+			c.visible = false
+			if len(c.filteredItems) == 0 || c.selected >= len(c.filteredItems) {
+				return c, core.CmdHandler(ClosedMsg{})
+			}
+			selectedItem := c.filteredItems[c.selected]
+			return c, tea.Sequence(
+				core.CmdHandler(SelectedMsg{
+					Value:       selectedItem.Value,
+					Execute:     selectedItem.Execute,
+					AutoExecute: false, // Tab pressed - just autocomplete, don't execute
+				}),
+				core.CmdHandler(ClosedMsg{}),
+			)
+
 		case key.Matches(msg, c.keyMap.Escape):
 			c.visible = false
 			return c, core.CmdHandler(ClosedMsg{})

pkg/tui/components/editor/editor.go

@@ -638,8 +638,9 @@ func (e *editor) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 		return e, cmd
 
 	case completion.SelectedMsg:
-		// If the item has an Execute function, run it instead of inserting text
-		if msg.Execute != nil {
+		// If the item has an Execute function and AutoExecute is true (Enter pressed),
+		// run it instead of inserting text
+		if msg.Execute != nil && msg.AutoExecute {
 			// Remove the trigger character and any typed completion word from the textarea
 			// before executing. For example, typing "@" then selecting "Browse files..."
 			// should remove the "@" so AttachFile doesn't produce a double "@@".
@@ -654,7 +655,10 @@ func (e *editor) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 			e.clearSuggestion()
 			return e, msg.Execute()
 		}
-		if e.currentCompletion.AutoSubmit() {
+
+		// For auto-submit completions (like commands) with AutoExecute=true (Enter pressed),
+		// use the selected command value and send it immediately
+		if e.currentCompletion.AutoSubmit() && msg.AutoExecute {
 			// For auto-submit completions (like commands), use the selected
 			// command value (e.g., "/exit") instead of what the user typed
 			// (e.g., "/e"). Append any extra text after the trigger word
@@ -667,7 +671,11 @@ func (e *editor) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 			cmd := e.resetAndSend(msg.Value + extraText)
 			return e, cmd
 		}
-		// For non-auto-submit completions (like file paths), replace the completion word
+
+		// For non-auto-submit completions OR auto-submit with AutoExecute=false (Tab pressed),
+		// just insert the text without executing
+		// This allows Tab to autocomplete command text without executing,
+		// so users can add arguments before pressing Enter to send
 		currentValue := e.textarea.Value()
 		if lastIdx := strings.LastIndex(currentValue, e.completionWord); lastIdx >= 0 {
 			newValue := currentValue[:lastIdx-1] + msg.Value + " " + currentValue[lastIdx+len(e.completionWord):]