fix(tui): layout issues

2 files changed, 13 insertions, 26 deletions

diff --git a/packages/tui/internal/components/chat/editor.go b/packages/tui/internal/components/chat/editor.go
index 57dcbf154..b4abd0f89 100644
--- a/packages/tui/internal/components/chat/editor.go
+++ b/packages/tui/internal/components/chat/editor.go
@@ -21,9 +21,10 @@ import (
 
 type EditorComponent interface {
 	tea.Model
-	tea.ViewModel
+	// tea.ViewModel
 	SetSize(width, height int) tea.Cmd
-	Content() string
+	View(width int, align lipgloss.Position) string
+	Content(width int, align lipgloss.Position) string
 	Lines() int
 	Value() string
 	Focused() bool
@@ -105,7 +106,7 @@ func (m *editorComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, tea.Batch(cmds...)
 }
 
-func (m *editorComponent) Content() string {
+func (m *editorComponent) Content(width int, align lipgloss.Position) string {
 	t := theme.CurrentTheme()
 	base := styles.NewStyle().Foreground(t.Text()).Background(t.Background()).Render
 	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
@@ -121,7 +122,7 @@ func (m *editorComponent) Content() string {
 	)
 	textarea = styles.NewStyle().
 		Background(t.BackgroundElement()).
-		Width(m.width).
+		Width(width).
 		PaddingTop(1).
 		PaddingBottom(1).
 		BorderStyle(lipgloss.ThickBorder()).
@@ -156,19 +157,19 @@ func (m *editorComponent) Content() string {
 	return content
 }
 
-func (m *editorComponent) View() string {
+func (m *editorComponent) View(width int, align lipgloss.Position) string {
 	if m.Lines() > 1 {
 		t := theme.CurrentTheme()
 		return lipgloss.Place(
-			m.width,
+			width,
 			m.height,
-			lipgloss.Center,
+			align,
 			lipgloss.Center,
 			"",
 			styles.WhitespaceStyle(t.Background()),
 		)
 	}
-	return m.Content()
+	return m.Content(width, align)
 }
 
 func (m *editorComponent) Focused() bool {
@@ -343,7 +344,6 @@ func createTextArea(existing *textarea.Model) textarea.Model {
 		ta.SetHeight(existing.Height())
 	}
 
-	// ta.Focus()
 	return ta
 }
 
diff --git a/packages/tui/internal/components/chat/messages.go b/packages/tui/internal/components/chat/messages.go
index bfbae3938..8a2d0db04 100644
--- a/packages/tui/internal/components/chat/messages.go
+++ b/packages/tui/internal/components/chat/messages.go
@@ -2,9 +2,7 @@ package chat
 
 import (
 	"strings"
-	"time"
 
-	"github.com/charmbracelet/bubbles/v2/spinner"
 	"github.com/charmbracelet/bubbles/v2/viewport"
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
@@ -20,6 +18,7 @@ import (
 type MessagesComponent interface {
 	tea.Model
 	tea.ViewModel
+	// View(width int) string
 	SetSize(width, height int) tea.Cmd
 	PageUp() (tea.Model, tea.Cmd)
 	PageDown() (tea.Model, tea.Cmd)
@@ -36,7 +35,6 @@ type messagesComponent struct {
 	width, height   int
 	app             *app.App
 	viewport        viewport.Model
-	spinner         spinner.Model
 	attachments     viewport.Model
 	cache           *MessageCache
 	rendering       bool
@@ -47,7 +45,7 @@ type renderFinishedMsg struct{}
 type ToggleToolDetailsMsg struct{}
 
 func (m *messagesComponent) Init() tea.Cmd {
-	return tea.Batch(m.viewport.Init(), m.spinner.Tick)
+	return tea.Batch(m.viewport.Init())
 }
 
 func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
@@ -94,10 +92,6 @@ func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	m.tail = m.viewport.AtBottom()
 	cmds = append(cmds, cmd)
 
-	spinner, cmd := m.spinner.Update(msg)
-	m.spinner = spinner
-	cmds = append(cmds, cmd)
-
 	return m, tea.Batch(cmds...)
 }
 
@@ -307,10 +301,10 @@ func (m *messagesComponent) View() string {
 	if m.rendering {
 		return lipgloss.Place(
 			m.width,
-			m.height,
+			m.height+1,
 			lipgloss.Center,
 			lipgloss.Center,
-			"Loading session...",
+			styles.NewStyle().Background(t.Background()).Render("Loading session..."),
 			styles.WhitespaceStyle(t.Background()),
 		)
 	}
@@ -392,12 +386,6 @@ func (m *messagesComponent) ToolDetailsVisible() bool {
 }
 
 func NewMessagesComponent(app *app.App) MessagesComponent {
-	customSpinner := spinner.Spinner{
-		Frames: []string{" ", "┃", "┃"},
-		FPS:    time.Second / 3,
-	}
-	s := spinner.New(spinner.WithSpinner(customSpinner))
-
 	vp := viewport.New()
 	attachments := viewport.New()
 	vp.KeyMap = viewport.KeyMap{}
@@ -405,7 +393,6 @@ func NewMessagesComponent(app *app.App) MessagesComponent {
 	return &messagesComponent{
 		app:             app,
 		viewport:        vp,
-		spinner:         s,
 		attachments:     attachments,
 		showToolDetails: true,
 		cache:           NewMessageCache(),