Use the messages component in the confirmation dialog

Makes the content of the tool call scrollable, which is nice.

Signed-off-by: Djordje Lukic <[email protected]>

Author: rumpl

pkg/tui/components/messages/messages.go

@@ -56,7 +56,6 @@ type Model interface {
 	AddShellOutputMessage(content string) tea.Cmd
 
 	ScrollToBottom() tea.Cmd
-	IsAtBottom() bool
 }
 
 // renderedItem represents a cached rendered message with position information
@@ -129,6 +128,17 @@ func New(a *app.App, sessionState *service.SessionState) Model {
 	}
 }
 
+// NewScrollableView creates a simple scrollable view for displaying messages in dialogs
+// This is a lightweight version that doesn't require app or session state management
+func NewScrollableView(width, height int, sessionState *service.SessionState) Model {
+	return &model{
+		width:         width,
+		height:        height,
+		renderedItems: make(map[int]renderedItem),
+		sessionState:  sessionState,
+	}
+}
+
 // Init initializes the component
 func (m *model) Init() tea.Cmd {
 	var cmds []tea.Cmd
@@ -396,7 +406,9 @@ func (m *model) shouldCacheMessage(index int) bool {
 
 	switch msg.Type {
 	case types.MessageTypeToolCall:
-		return msg.ToolStatus == types.ToolStatusCompleted || msg.ToolStatus == types.ToolStatusError
+		return msg.ToolStatus == types.ToolStatusCompleted ||
+			msg.ToolStatus == types.ToolStatusError ||
+			msg.ToolStatus == types.ToolStatusConfirmation
 	case types.MessageTypeToolResult:
 		return true
 	case types.MessageTypeAssistant, types.MessageTypeAssistantReasoning:
@@ -486,8 +498,8 @@ func (m *model) invalidateAllItems() {
 	m.totalHeight = 0
 }
 
-// IsAtBottom returns true if the viewport is at the bottom
-func (m *model) IsAtBottom() bool {
+// isAtBottom returns true if the viewport is at the bottom
+func (m *model) isAtBottom() bool {
 	if len(m.messages) == 0 {
 		return true
 	}
@@ -497,11 +509,6 @@ func (m *model) IsAtBottom() bool {
 	return m.scrollOffset >= maxScrollOffset
 }
 
-// isAtBottom is kept as a private method for internal use
-func (m *model) isAtBottom() bool {
-	return m.IsAtBottom()
-}
-
 // AddUserMessage adds a user message to the chat
 func (m *model) AddUserMessage(content string) tea.Cmd {
 	return m.addMessage(&types.Message{

pkg/tui/dialog/tool_confirmation.go

@@ -8,8 +8,7 @@ import (
 	"charm.land/lipgloss/v2"
 
 	"github.com/docker/cagent/pkg/runtime"
-	"github.com/docker/cagent/pkg/tui/components/markdown"
-	"github.com/docker/cagent/pkg/tui/components/tool"
+	"github.com/docker/cagent/pkg/tui/components/messages"
 	"github.com/docker/cagent/pkg/tui/core"
 	"github.com/docker/cagent/pkg/tui/core/layout"
 	"github.com/docker/cagent/pkg/tui/service"
@@ -33,12 +32,41 @@ type toolConfirmationDialog struct {
 	msg           *runtime.ToolCallConfirmationEvent
 	keyMap        toolConfirmationKeyMap
 	sessionState  *service.SessionState
+	scrollView    messages.Model
 }
 
 // SetSize implements [Dialog].
 func (d *toolConfirmationDialog) SetSize(width, height int) tea.Cmd {
 	d.width = width
 	d.height = height
+
+	// Calculate dialog dimensions
+	dialogWidth := width * 70 / 100
+	contentWidth := dialogWidth - 6
+	maxDialogHeight := (height * 80) / 100
+
+	titleStyle := styles.DialogTitleStyle.Width(contentWidth)
+	title := titleStyle.Render("Tool Confirmation")
+	titleHeight := lipgloss.Height(title)
+
+	separatorWidth := max(contentWidth-10, 20)
+	separator := styles.DialogSeparatorStyle.
+		Align(lipgloss.Center).
+		Width(contentWidth).
+		Render(strings.Repeat("─", separatorWidth))
+	separatorHeight := lipgloss.Height(separator)
+
+	question := styles.DialogQuestionStyle.Width(contentWidth).Render("Do you want to allow this tool call?")
+	questionHeight := lipgloss.Height(question)
+
+	options := styles.DialogOptionsStyle.Width(contentWidth).Render("[Y]es    [N]o    [A]ll (approve all tools this session)")
+	optionsHeight := lipgloss.Height(options)
+
+	// Calculate available height for scroll view
+	// Total = maxDialogHeight - title - separator - 2 empty lines - question - empty line - options - 4 (dialog padding/border)
+	availableHeight := max(maxDialogHeight-titleHeight-separatorHeight-2-questionHeight-1-optionsHeight-4, 5)
+	d.scrollView.SetSize(contentWidth, availableHeight)
+
 	return nil
 }
 
@@ -69,16 +97,28 @@ func defaultToolConfirmationKeyMap() toolConfirmationKeyMap {
 
 // NewToolConfirmationDialog creates a new tool confirmation dialog
 func NewToolConfirmationDialog(msg *runtime.ToolCallConfirmationEvent, sessionState *service.SessionState) Dialog {
+	// Create scrollable view with initial size (will be updated in SetSize)
+	scrollView := messages.NewScrollableView(100, 20, sessionState)
+
+	// Add the tool call message to the view
+	scrollView.AddOrUpdateToolCall(
+		"", // agentName - empty for dialog context
+		msg.ToolCall,
+		msg.ToolDefinition,
+		types.ToolStatusConfirmation,
+	)
+
 	return &toolConfirmationDialog{
 		msg:          msg,
 		sessionState: sessionState,
 		keyMap:       defaultToolConfirmationKeyMap(),
+		scrollView:   scrollView,
 	}
 }
 
 // Init initializes the tool confirmation dialog
 func (d *toolConfirmationDialog) Init() tea.Cmd {
-	return nil
+	return d.scrollView.Init()
 }
 
 // Update handles messages for the tool confirmation dialog
@@ -87,7 +127,8 @@ func (d *toolConfirmationDialog) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 	case tea.WindowSizeMsg:
 		d.width = msg.Width
 		d.height = msg.Height
-		return d, nil
+		cmd := d.SetSize(msg.Width, msg.Height)
+		return d, cmd
 
 	case tea.KeyPressMsg:
 		switch {
@@ -102,6 +143,20 @@ func (d *toolConfirmationDialog) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 		if msg.String() == "ctrl+c" {
 			return d, tea.Quit
 		}
+
+		// Forward scrolling keys to the scroll view
+		switch msg.String() {
+		case "up", "k", "down", "j", "pgup", "pgdown", "home", "end":
+			updatedScrollView, cmd := d.scrollView.Update(msg)
+			d.scrollView = updatedScrollView.(messages.Model)
+			return d, cmd
+		}
+
+	case tea.MouseWheelMsg:
+		// Forward mouse wheel events to scroll view
+		updatedScrollView, cmd := d.scrollView.Update(msg)
+		d.scrollView = updatedScrollView.(messages.Model)
+		return d, cmd
 	}
 
 	return d, nil
@@ -114,9 +169,6 @@ func (d *toolConfirmationDialog) View() string {
 	// Content width (accounting for padding and borders)
 	contentWidth := dialogWidth - 6
 
-	// Calculate max height (80% of screen height)
-	maxDialogHeight := (d.height * 80) / 100
-
 	dialogStyle := styles.DialogStyle.Width(dialogWidth)
 
 	// Title
@@ -130,15 +182,8 @@ func (d *toolConfirmationDialog) View() string {
 		Width(contentWidth).
 		Render(strings.Repeat("─", separatorWidth))
 
-	a := types.Message{
-		ToolCall:       d.msg.ToolCall,
-		ToolDefinition: d.msg.ToolDefinition,
-		Type:           types.MessageTypeToolCall,
-		ToolStatus:     types.ToolStatusConfirmation,
-	}
-	view := tool.New(&a, markdown.NewRenderer(contentWidth), d.sessionState)
-	view.SetSize(contentWidth, 0)
-	argumentsSection := view.View()
+	// Get scrollable tool call view
+	argumentsSection := d.scrollView.View()
 
 	question := styles.DialogQuestionStyle.Width(contentWidth).Render("Do you want to allow this tool call?")
 	options := styles.DialogOptionsStyle.Width(contentWidth).Render("[Y]es    [N]o    [A]ll (approve all tools this session)")
@@ -154,45 +199,9 @@ func (d *toolConfirmationDialog) View() string {
 
 	content := lipgloss.JoinVertical(lipgloss.Left, parts...)
 
-	// Apply max height constraint if needed
-	contentHeight := lipgloss.Height(content)
-	if contentHeight > maxDialogHeight-4 { // Account for dialog padding/border
-		// Limit the arguments section height
-		availableHeight := maxDialogHeight - 4 - lipgloss.Height(title) - lipgloss.Height(separator) - lipgloss.Height(question) - lipgloss.Height(options) - 4 // spacing
-		if availableHeight > 0 && argumentsSection != "" {
-			argumentsSection = d.truncateToHeight(argumentsSection, availableHeight)
-
-			// Rebuild content with truncated arguments
-			parts = []string{title, separator}
-			if argumentsSection != "" {
-				parts = append(parts, "", argumentsSection)
-			}
-			parts = append(parts, "", question, "", options)
-			content = lipgloss.JoinVertical(lipgloss.Left, parts...)
-		}
-	}
-
 	return dialogStyle.Render(content)
 }
 
-// truncateToHeight truncates content to fit within the specified height,
-// adding an ellipsis indicator at the end
-func (d *toolConfirmationDialog) truncateToHeight(content string, maxHeight int) string {
-	if maxHeight <= 0 {
-		return ""
-	}
-
-	lines := strings.Split(content, "\n")
-	if len(lines) <= maxHeight {
-		return content
-	}
-
-	// Reserve last line for truncation indicator
-	truncatedLines := lines[:maxHeight-1]
-	truncatedLines = append(truncatedLines, styles.MutedStyle.Render("... (content truncated)"))
-	return strings.Join(truncatedLines, "\n")
-}
-
 // Position calculates the position to center the dialog
 func (d *toolConfirmationDialog) Position() (row, col int) {
 	dialogWidth := d.width * 70 / 100

pkg/tui/page/chat/chat.go

@@ -214,39 +214,33 @@ func (p *chatPage) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 	// Runtime events
 	case *runtime.ErrorEvent:
 		cmd := p.messages.AddErrorMessage(msg.Error)
-		return p, tea.Batch(cmd, p.messages.ScrollToBottom())
+		return p, cmd
 	case *runtime.ShellOutputEvent:
 		cmd := p.messages.AddShellOutputMessage(msg.Output)
-		return p, tea.Batch(cmd, p.messages.ScrollToBottom())
+		return p, cmd
 	case *runtime.WarningEvent:
 		cmd := core.CmdHandler(notification.ShowMsg{Text: msg.Message, Type: notification.TypeWarning})
-		return p, tea.Batch(cmd, p.messages.ScrollToBottom())
+		return p, cmd
 	case *runtime.UserMessageEvent:
 		cmd := p.messages.AddUserMessage(msg.Message)
-		return p, tea.Batch(cmd, p.messages.ScrollToBottom())
+		return p, cmd
 	case *runtime.StreamStartedEvent:
 		p.streamCancelled = false
 		spinnerCmd := p.setWorking(true)
 		cmd := p.messages.AddAssistantMessage()
 		p.startProgressBar()
-		return p, tea.Batch(cmd, p.messages.ScrollToBottom(), spinnerCmd)
+		return p, tea.Batch(cmd, spinnerCmd)
 	case *runtime.AgentChoiceEvent:
 		if p.streamCancelled {
 			return p, nil
 		}
 		cmd := p.messages.AppendToLastMessage(msg.AgentName, types.MessageTypeAssistant, msg.Content)
-		if p.messages.IsAtBottom() {
-			return p, tea.Batch(cmd, p.messages.ScrollToBottom())
-		}
 		return p, cmd
 	case *runtime.AgentChoiceReasoningEvent:
 		if p.streamCancelled {
 			return p, nil
 		}
 		cmd := p.messages.AppendToLastMessage(msg.AgentName, types.MessageTypeAssistantReasoning, msg.Content)
-		if p.messages.IsAtBottom() {
-			return p, tea.Batch(cmd, p.messages.ScrollToBottom())
-		}
 		return p, cmd
 	case *runtime.TokenUsageEvent:
 		p.sidebar.SetTokenUsage(msg.Usage)