fix: background color rendering issues

4 files changed, 36 insertions, 150 deletions

diff --git a/packages/tui/internal/components/chat/message.go b/packages/tui/internal/components/chat/message.go
index 3315d4ba3..0a8bc0496 100644
--- a/packages/tui/internal/components/chat/message.go
+++ b/packages/tui/internal/components/chat/message.go
@@ -180,11 +180,13 @@ func renderContentBlock(content string, options ...renderingOption) string {
 		layout.Current.Container.Width,
 		align,
 		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)
 	content = lipgloss.PlaceHorizontal(
 		layout.Current.Viewport.Width,
 		lipgloss.Center,
 		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)
 	return content
 }
@@ -373,6 +375,7 @@ func renderToolInvocation(
 					lipgloss.Center,
 					lipgloss.Top,
 					body,
+					lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 				)
 			}
 		}
@@ -440,7 +443,12 @@ func renderToolInvocation(
 	}
 
 	content := style.Render(title)
-	content = lipgloss.PlaceHorizontal(layout.Current.Viewport.Width, lipgloss.Center, content)
+	content = lipgloss.PlaceHorizontal(
+		layout.Current.Viewport.Width,
+		lipgloss.Center,
+		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+	)
 	if showResult && body != "" && error == "" {
 		content += "\n" + body
 	}
diff --git a/packages/tui/internal/components/chat/messages.go b/packages/tui/internal/components/chat/messages.go
index e93b25b1d..17397d267 100644
--- a/packages/tui/internal/components/chat/messages.go
+++ b/packages/tui/internal/components/chat/messages.go
@@ -275,9 +275,15 @@ func (m *messagesComponent) View() string {
 	if m.rendering {
 		return m.viewport.View()
 	}
+	t := theme.CurrentTheme()
 	return lipgloss.JoinVertical(
 		lipgloss.Left,
-		lipgloss.PlaceHorizontal(m.width, lipgloss.Center, m.header()),
+		lipgloss.PlaceHorizontal(
+			m.width,
+			lipgloss.Center,
+			m.header(),
+			lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+		),
 		m.viewport.View(),
 	)
 }
@@ -346,13 +352,20 @@ func (m *messagesComponent) home() string {
 		lines = append(lines, "")
 	}
 
-	return lipgloss.Place(m.width, m.height, lipgloss.Center, lipgloss.Center,
+	t := theme.CurrentTheme()
+	return lipgloss.Place(
+		m.width,
+		m.height,
+		lipgloss.Center,
+		lipgloss.Center,
 		baseStyle.Width(lipgloss.Width(logoAndVersion)).Render(
 			lipgloss.JoinVertical(
 				lipgloss.Top,
 				lines...,
 			),
-		))
+		),
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+	)
 }
 
 func (m *messagesComponent) SetSize(width, height int) tea.Cmd {
diff --git a/packages/tui/internal/components/dialog/quit.go b/packages/tui/internal/components/dialog/quit.go
deleted file mode 100644
index 1be3cce95..000000000
--- a/packages/tui/internal/components/dialog/quit.go
+++ /dev/null
@@ -1,139 +0,0 @@
-package dialog
-
-import (
-	"strings"
-
-	"github.com/charmbracelet/bubbles/v2/key"
-	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
-	"github.com/sst/opencode/internal/components/modal"
-	"github.com/sst/opencode/internal/layout"
-	"github.com/sst/opencode/internal/styles"
-	"github.com/sst/opencode/internal/theme"
-	"github.com/sst/opencode/internal/util"
-)
-
-const question = "Are you sure you want to quit?"
-
-// QuitDialog interface for the quit confirmation dialog
-type QuitDialog interface {
-	layout.Modal
-	IsQuitDialog() bool
-}
-
-type quitDialog struct {
-	width  int
-	height int
-
-	modal      *modal.Modal
-	selectedNo bool
-}
-
-type helpMapping struct {
-	LeftRight  key.Binding
-	EnterSpace key.Binding
-	Yes        key.Binding
-	No         key.Binding
-}
-
-var helpKeys = helpMapping{
-	LeftRight: key.NewBinding(
-		key.WithKeys("left", "right", "h", "l", "tab"),
-		key.WithHelp("←/→", "switch options"),
-	),
-	EnterSpace: key.NewBinding(
-		key.WithKeys("enter", " "),
-		key.WithHelp("enter/space", "confirm"),
-	),
-	Yes: key.NewBinding(
-		key.WithKeys("y", "Y", "ctrl+c"),
-		key.WithHelp("y/Y", "yes"),
-	),
-	No: key.NewBinding(
-		key.WithKeys("n", "N"),
-		key.WithHelp("n/N", "no"),
-	),
-}
-
-func (q *quitDialog) Init() tea.Cmd {
-	return nil
-}
-
-func (q *quitDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	switch msg := msg.(type) {
-	case tea.WindowSizeMsg:
-		q.width = msg.Width
-		q.height = msg.Height
-	case tea.KeyMsg:
-		switch {
-		case key.Matches(msg, helpKeys.LeftRight):
-			q.selectedNo = !q.selectedNo
-			return q, nil
-		case key.Matches(msg, helpKeys.EnterSpace):
-			if !q.selectedNo {
-				return q, tea.Quit
-			}
-			return q, util.CmdHandler(modal.CloseModalMsg{})
-		case key.Matches(msg, helpKeys.Yes):
-			return q, tea.Quit
-		case key.Matches(msg, helpKeys.No):
-			return q, util.CmdHandler(modal.CloseModalMsg{})
-		}
-	}
-	return q, nil
-}
-
-func (q *quitDialog) Render(background string) string {
-	t := theme.CurrentTheme()
-	baseStyle := styles.BaseStyle()
-
-	yesStyle := baseStyle
-	noStyle := baseStyle
-	spacerStyle := baseStyle.Background(t.BackgroundElement())
-
-	if q.selectedNo {
-		noStyle = noStyle.Background(t.Primary()).Foreground(t.BackgroundElement())
-		yesStyle = yesStyle.Background(t.BackgroundElement()).Foreground(t.Primary())
-	} else {
-		yesStyle = yesStyle.Background(t.Primary()).Foreground(t.BackgroundElement())
-		noStyle = noStyle.Background(t.BackgroundElement()).Foreground(t.Primary())
-	}
-
-	yesButton := yesStyle.Padding(0, 1).Render("Yes")
-	noButton := noStyle.Padding(0, 1).Render("No")
-
-	buttons := lipgloss.JoinHorizontal(lipgloss.Left, yesButton, spacerStyle.Render("  "), noButton)
-
-	width := lipgloss.Width(question)
-	remainingWidth := width - lipgloss.Width(buttons)
-	if remainingWidth > 0 {
-		buttons = spacerStyle.Render(strings.Repeat(" ", remainingWidth)) + buttons
-	}
-
-	content := baseStyle.Render(
-		lipgloss.JoinVertical(
-			lipgloss.Center,
-			question,
-			"",
-			buttons,
-		),
-	)
-
-	return q.modal.Render(content, background)
-}
-
-func (q *quitDialog) Close() tea.Cmd {
-	return nil
-}
-
-func (q *quitDialog) IsQuitDialog() bool {
-	return true
-}
-
-// NewQuitDialog creates a new quit confirmation dialog
-func NewQuitDialog() QuitDialog {
-	return &quitDialog{
-		selectedNo: true,
-		modal:      modal.New(),
-	}
-}
diff --git a/packages/tui/internal/layout/flex.go b/packages/tui/internal/layout/flex.go
index 031dd970f..3a5c3aa71 100644
--- a/packages/tui/internal/layout/flex.go
+++ b/packages/tui/internal/layout/flex.go
@@ -3,6 +3,7 @@ package layout
 import (
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/sst/opencode/internal/theme"
 )
 
 type FlexDirection int
@@ -76,6 +77,7 @@ func (f *flexLayout) View() string {
 		return ""
 	}
 
+	t := theme.CurrentTheme()
 	views := make([]string, 0, len(f.panes))
 	for i, pane := range f.panes {
 		if pane == nil {
@@ -89,6 +91,7 @@ func (f *flexLayout) View() string {
 				paneWidth,
 				pane.Alignment(),
 				pane.View(),
+				lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 			)
 			views = append(views, view)
 		} else {
@@ -99,6 +102,7 @@ func (f *flexLayout) View() string {
 				lipgloss.Center,
 				pane.Alignment(),
 				pane.View(),
+				lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 			)
 			views = append(views, view)
 		}
@@ -160,14 +164,14 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 
 	var cmds []tea.Cmd
 	currentX, currentY := 0, 0
-	
+
 	for i, pane := range f.panes {
 		if pane != nil {
 			paneWidth, paneHeight := f.calculatePaneSize(i)
-			
+
 			// Calculate actual position based on alignment
 			actualX, actualY := currentX, currentY
-			
+
 			if f.direction == FlexDirectionHorizontal {
 				// In horizontal layout, vertical alignment affects Y position
 				// (lipgloss.Center is used for vertical alignment in JoinHorizontal)
@@ -178,7 +182,7 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 				if pane.MaxWidth() > 0 && contentWidth > pane.MaxWidth() {
 					contentWidth = pane.MaxWidth()
 				}
-				
+
 				switch pane.Alignment() {
 				case lipgloss.Center:
 					actualX = (f.width - contentWidth) / 2
@@ -188,16 +192,16 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 					actualX = 0
 				}
 			}
-			
+
 			// Set position if the pane is a *container
 			if c, ok := pane.(*container); ok {
 				c.x = actualX
 				c.y = actualY
 			}
-			
+
 			cmd := pane.SetSize(paneWidth, paneHeight)
 			cmds = append(cmds, cmd)
-			
+
 			// Update position for next pane
 			if f.direction == FlexDirectionHorizontal {
 				currentX += paneWidth