fix(tui): layout issues

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
 }
 

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(),

packages/tui/internal/tui/tui.go

@@ -429,7 +429,19 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (a appModel) View() string {
-	editorView := a.editor.View()
+	mainLayout := a.chat(layout.Current.Container.Width, lipgloss.Center)
+	if a.modal != nil {
+		mainLayout = a.modal.Render(mainLayout)
+	}
+	mainLayout = a.toastManager.RenderOverlay(mainLayout)
+	if theme.CurrentThemeUsesAnsiColors() {
+		mainLayout = util.ConvertRGBToAnsi16Colors(mainLayout)
+	}
+	return mainLayout + "\n" + a.status.View()
+}
+
+func (a appModel) chat(width int, align lipgloss.Position) string {
+	editorView := a.editor.View(width, align)
 	lines := a.editor.Lines()
 	messagesView := a.messages.View()
 	if a.app.Session.ID == "" {
@@ -440,7 +452,7 @@ func (a appModel) View() string {
 	t := theme.CurrentTheme()
 	centeredEditorView := lipgloss.PlaceHorizontal(
 		a.width,
-		lipgloss.Center,
+		align,
 		editorView,
 		styles.WhitespaceStyle(t.Background()),
 	)
@@ -459,10 +471,6 @@ func (a appModel) View() string {
 			View:      centeredEditorView,
 			FixedSize: 5,
 		},
-		// layout.FlexItem{
-		// 	View:      a.status.View(),
-		// 	FixedSize: 1,
-		// },
 	)
 
 	if lines > 1 {
@@ -472,7 +480,7 @@ func (a appModel) View() string {
 		mainLayout = layout.PlaceOverlay(
 			editorX,
 			editorY,
-			a.editor.Content(),
+			a.editor.Content(width, align),
 			mainLayout,
 		)
 	}
@@ -493,14 +501,7 @@ func (a appModel) View() string {
 		)
 	}
 
-	if a.modal != nil {
-		mainLayout = a.modal.Render(mainLayout)
-	}
-	mainLayout = a.toastManager.RenderOverlay(mainLayout)
-	if theme.CurrentThemeUsesAnsiColors() {
-		mainLayout = util.ConvertRGBToAnsi16Colors(mainLayout)
-	}
-	return mainLayout + "\n" + a.status.View()
+	return mainLayout
 }
 
 func (a appModel) home() string {