Refactor the styles

Use the styles.go in all of the components, while we are at it, change
the colors to be nicer

Signed-off-by: Djordje Lukic <djordje.lukic@docker.com>

Author: rumpl

pkg/tui/components/message/message.go

@@ -7,7 +7,6 @@ import (
 
 	"github.com/charmbracelet/bubbles/v2/spinner"
 	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
 
 	"github.com/docker/cagent/pkg/tui/components/markdown"
 	"github.com/docker/cagent/pkg/tui/core/layout"
@@ -79,9 +78,8 @@ func (mv *messageModel) Render(width int) string {
 	case types.MessageTypeSpinner:
 		return mv.spinner.View()
 	case types.MessageTypeUser:
-		s := lipgloss.NewStyle().PaddingLeft(1).BorderLeft(true).BorderStyle(lipgloss.ThickBorder())
-		if rendered, err := markdown.NewRenderer(width - len(s.Render(""))).Render(msg.Content); err == nil {
-			return s.Render(strings.TrimRight(rendered, "\n\r\t "))
+		if rendered, err := markdown.NewRenderer(width - len(styles.UserMessageBorderStyle.Render(""))).Render(msg.Content); err == nil {
+			return styles.UserMessageBorderStyle.Render(strings.TrimRight(rendered, "\n\r\t "))
 		}
 
 		return msg.Content

pkg/tui/components/messages/messages.go

@@ -22,6 +22,7 @@ import (
 	"github.com/docker/cagent/pkg/tui/components/tool"
 	"github.com/docker/cagent/pkg/tui/core"
 	"github.com/docker/cagent/pkg/tui/core/layout"
+	"github.com/docker/cagent/pkg/tui/styles"
 	"github.com/docker/cagent/pkg/tui/types"
 )
 
@@ -989,14 +990,9 @@ func (m *model) highlightLine(line string, startCol, endCol int) string {
 		return line
 	}
 
-	// TODO(rumpl): move style to styles.go
-	selectionStyle := lipgloss.NewStyle().
-		Background(lipgloss.Color("237")).
-		Foreground(lipgloss.Color("255"))
-
 	runes := []rune(plainLine)
 	before := string(runes[:startRuneIdx])
-	selected := selectionStyle.Render(string(runes[startRuneIdx:endRuneIdx]))
+	selected := styles.SelectionStyle.Render(string(runes[startRuneIdx:endRuneIdx]))
 	after := ""
 	if endRuneIdx < len(runes) {
 		after = string(runes[endRuneIdx:])

pkg/tui/components/notification/notification.go

@@ -75,13 +75,10 @@ func (n *Notification) View() string {
 		return ""
 	}
 
-	notificationStyle := styles.BaseStyle.
-		Border(lipgloss.RoundedBorder()).
-		BorderForeground(styles.SuccessStyle.GetForeground()).
-		Padding(0, 1).
-		MaxWidth(maxWidth)
-
-	return notificationStyle.Render(n.text)
+	return styles.
+		NotificationStyle.
+		MaxWidth(maxWidth).
+		Render(n.text)
 }
 
 func (n *Notification) GetLayer() *lipgloss.Layer {

pkg/tui/components/tool/syntax.go

@@ -5,10 +5,12 @@ import (
 
 	"github.com/alecthomas/chroma/v2"
 	"github.com/alecthomas/chroma/v2/lexers"
-	"github.com/alecthomas/chroma/v2/styles"
+	chromastyles "github.com/alecthomas/chroma/v2/styles"
 	"github.com/aymanbagabas/go-udiff"
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/mattn/go-runewidth"
+
+	"github.com/docker/cagent/pkg/tui/styles"
 )
 
 // syntaxHighlight applies syntax highlighting to code and returns styled text
@@ -19,9 +21,9 @@ func syntaxHighlight(code, filePath string) []chromaToken {
 	}
 	lexer = chroma.Coalesce(lexer)
 
-	style := styles.Get("monokai")
+	style := chromastyles.Get("monokai")
 	if style == nil {
-		style = styles.Fallback
+		style = chromastyles.Fallback
 	}
 
 	iterator, err := lexer.Tokenise(nil, code)
@@ -84,21 +86,17 @@ func renderDiffWithSyntaxHighlight(diff []*udiff.Hunk, filePath string, width in
 	const tabWidth = 4
 	var output strings.Builder
 
-	removeStyle := lipgloss.NewStyle().Background(lipgloss.Color("#553333"))
-	addStyle := lipgloss.NewStyle().Background(lipgloss.Color("#2E402E"))
-	unchangedStyle := lipgloss.NewStyle()
-
 	for _, hunk := range diff {
 		for _, line := range hunk.Lines {
 			var lineStyle lipgloss.Style
 
 			switch line.Kind {
 			case udiff.Delete:
-				lineStyle = removeStyle
+				lineStyle = styles.DiffRemoveStyle
 			case udiff.Insert:
-				lineStyle = addStyle
+				lineStyle = styles.DiffAddStyle
 			case udiff.Equal:
-				lineStyle = unchangedStyle
+				lineStyle = styles.DiffUnchangedStyle
 			}
 
 			expandedContent := strings.ReplaceAll(line.Content, "\t", strings.Repeat(" ", tabWidth))

pkg/tui/dialog/command_palette.go

@@ -9,6 +9,7 @@ import (
 	"github.com/charmbracelet/lipgloss/v2"
 
 	"github.com/docker/cagent/pkg/tui/core"
+	"github.com/docker/cagent/pkg/tui/styles"
 )
 
 // CommandExecuteMsg is sent when a command is selected
@@ -183,31 +184,17 @@ func (d *commandPaletteDialog) filterCommands() {
 
 // View renders the command palette dialog
 func (d *commandPaletteDialog) View() string {
-	dialogWidth := min(d.width*80/100, 70)
-	if dialogWidth < 80 {
-		dialogWidth = 80
-	}
+	dialogWidth := max(min(d.width*80/100, 70), 80)
 
 	maxHeight := min(d.height*70/100, 30)
 	contentWidth := dialogWidth - 6
 
-	dialogStyle := lipgloss.NewStyle().
-		Border(lipgloss.RoundedBorder()).
-		BorderForeground(lipgloss.Color("#6b7280")).
-		Padding(1, 2).
-		Width(dialogWidth)
-
-	titleStyle := lipgloss.NewStyle().
-		Bold(true).
-		Foreground(lipgloss.Color("#9ca3af")).
-		Width(contentWidth)
-	title := titleStyle.Render("Commands")
+	title := styles.DialogTitleStyle.Width(contentWidth).Render("Commands")
 
 	d.textInput.SetWidth(contentWidth)
 	searchInput := d.textInput.View()
 
-	separator := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#4b5563")).
+	separator := styles.DialogSeparatorStyle.
 		Width(contentWidth).
 		Render(strings.Repeat("─", contentWidth))
 
@@ -234,11 +221,7 @@ func (d *commandPaletteDialog) View() string {
 
 		commands := categoryMap[catName]
 
-		categoryStyle := lipgloss.NewStyle().
-			Bold(true).
-			Foreground(lipgloss.Color("#6b7280")).
-			MarginTop(1)
-		commandList = append(commandList, categoryStyle.Render(catName))
+		commandList = append(commandList, styles.PaletteCategoryStyle.Render(catName))
 		itemCount++
 
 		for _, cmd := range commands {
@@ -247,28 +230,25 @@ func (d *commandPaletteDialog) View() string {
 			}
 
 			isSelected := currentIndex == d.selected
-			commandLine := d.renderCommand(cmd, isSelected, contentWidth)
+			commandLine := d.renderCommand(cmd, isSelected)
 			commandList = append(commandList, commandLine)
 			itemCount++
 			currentIndex++
 		}
 	}
 
 	if len(d.filtered) == 0 {
-		noResultsStyle := lipgloss.NewStyle().
-			Foreground(lipgloss.Color("#6b7280")).
+		commandList = append(commandList, "", styles.DialogContentStyle.
 			Italic(true).
 			Align(lipgloss.Center).
-			Width(contentWidth)
-		commandList = append(commandList, "", noResultsStyle.Render("No commands found"))
+			Width(contentWidth).
+			Render("No commands found"))
 	}
 
-	helpStyle := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#6b7280")).
-		Italic(true).
+	help := styles.DialogHelpStyle.
 		MarginTop(1).
-		Width(contentWidth)
-	help := helpStyle.Render("↑/↓ navigate • enter execute • esc close")
+		Width(contentWidth).
+		Render("↑/↓ navigate • enter execute • esc close")
 
 	parts := []string{
 		title,
@@ -279,45 +259,28 @@ func (d *commandPaletteDialog) View() string {
 	parts = append(parts, commandList...)
 	parts = append(parts, "", help)
 
-	content := lipgloss.JoinVertical(lipgloss.Left, parts...)
-	return dialogStyle.Render(content)
+	return styles.DialogStyle.
+		Width(dialogWidth).
+		Render(lipgloss.JoinVertical(lipgloss.Left, parts...))
 }
 
 // renderCommand renders a single command in the list
-func (d *commandPaletteDialog) renderCommand(cmd Command, selected bool, width int) string {
-	var style lipgloss.Style
-
-	if selected {
-		style = lipgloss.NewStyle().
-			Background(lipgloss.Color("#374151")).
-			Foreground(lipgloss.Color("#f9fafb")).
-			Bold(true).
-			Width(width).
-			Padding(0, 1)
-	} else {
-		style = lipgloss.NewStyle().
-			Foreground(lipgloss.Color("#d1d5db")).
-			Width(width).
-			Padding(0, 1)
+func (d *commandPaletteDialog) renderCommand(cmd Command, selected bool) string {
+	text := "  " + cmd.Label
+	if cmd.Description != "" {
+		text += " - " + cmd.Description
 	}
 
-	labelStyle := lipgloss.NewStyle()
-	descStyle := lipgloss.NewStyle().Foreground(lipgloss.Color("#9ca3af"))
-
-	text := "  " + labelStyle.Render(cmd.Label)
-	if cmd.Description != "" {
-		text += " " + descStyle.Render("- "+cmd.Description)
+	if selected {
+		return styles.PaletteSelectedStyle.Render(text)
 	}
 
-	return style.Render(text)
+	return styles.PaletteUnselectedStyle.Render(text)
 }
 
 // Position calculates the position to center the dialog
 func (d *commandPaletteDialog) Position() (row, col int) {
-	dialogWidth := min(d.width*80/100, 70)
-	if dialogWidth < 50 {
-		dialogWidth = 50
-	}
+	dialogWidth := max(min(d.width*80/100, 70), 50)
 
 	maxHeight := min(d.height*70/100, 30)
 

pkg/tui/dialog/max_iterations.go

@@ -10,6 +10,7 @@ import (
 
 	"github.com/docker/cagent/pkg/app"
 	"github.com/docker/cagent/pkg/tui/core"
+	"github.com/docker/cagent/pkg/tui/styles"
 )
 
 // maxIterationsDialog implements DialogModel for max iterations confirmation
@@ -133,59 +134,37 @@ func (d *maxIterationsDialog) View() string {
 	frameHorizontal := (padX * 2) + 2
 	contentWidth := max(10, dialogWidth-frameHorizontal)
 
-	dialogStyle := lipgloss.NewStyle().
-		Border(lipgloss.RoundedBorder()).
-		BorderForeground(lipgloss.Color("#f59e0b")).
-		Foreground(lipgloss.Color("#d1d5db")).
+	dialogStyle := styles.DialogWarningStyle.
 		Padding(padY, padX).
-		Width(dialogWidth).
-		Align(lipgloss.Left)
+		Width(dialogWidth)
 
-	titleStyle := lipgloss.NewStyle().
-		Bold(true).
-		Foreground(lipgloss.Color("#f59e0b")).
-		Align(lipgloss.Center).
-		Width(contentWidth)
-
-	messageStyle := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#d1d5db")).
-		Width(contentWidth)
-
-	questionStyle := lipgloss.NewStyle().
-		Bold(true).
-		Foreground(lipgloss.Color("#d1d5db")).
-		Align(lipgloss.Center).
-		Width(contentWidth)
-
-	optionsStyle := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#9ca3af")).
-		Align(lipgloss.Center).
-		Width(contentWidth)
-
-	title := titleStyle.Render("Maximum Iterations Reached")
+	title := styles.DialogTitleWarningStyle.
+		Width(contentWidth).
+		Render("Maximum Iterations Reached")
 
 	separatorWidth := max(1, contentWidth)
-	separator := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#4b5563")).
+	separator := styles.DialogSeparatorStyle.
 		Align(lipgloss.Center).
 		Width(contentWidth).
 		Render(strings.Repeat("─", separatorWidth))
 
 	// Info section
 	infoText := fmt.Sprintf("Max Iterations: %d", d.maxIterations)
 	infoWrapped := wrapDisplayText(infoText, contentWidth)
-	infoSection := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#d1d5db")).
-		Render(infoWrapped)
+	infoSection := styles.DialogContentStyle.Render(infoWrapped)
 
 	// Message section
-	message := messageStyle.Render(wrapDisplayText("The agent may be stuck in a loop. This can happen with smaller or less capable models.", contentWidth))
+	message := styles.DialogContentStyle.Render(wrapDisplayText("The agent may be stuck in a loop. This can happen with smaller or less capable models.", contentWidth))
 
 	// Question section
-	question := questionStyle.Render(wrapDisplayText("Do you want to continue for 10 more iterations?", contentWidth))
+	question := styles.DialogQuestionStyle.
+		Width(contentWidth).
+		Render(wrapDisplayText("Do you want to continue for 10 more iterations?", contentWidth))
 
 	// Options section
-	options := optionsStyle.Render(wrapDisplayText("[Y]es    [N]o", contentWidth))
+	options := styles.DialogOptionsStyle.
+		Width(contentWidth).
+		Render(wrapDisplayText("[Y]es    [N]o", contentWidth))
 
 	// Combine all parts with proper spacing
 	parts := []string{title, separator, infoSection, "", message, "", question, "", options}