use textArea for title to support word wrap for long inputs

Author: skarim

internal/tui/submitview/editor.go

@@ -163,7 +163,7 @@ func (m Model) renderEditBody(innerW int) string {
 	// TITLE
 	b.WriteString(sectionLabelFor("TITLE", m.focusedField == fieldTitle))
 	b.WriteString("\n")
-	b.WriteString(fieldBox(m.titleInput.View(), innerW, m.focusedField == fieldTitle))
+	b.WriteString(fieldBox(m.titleContent(), innerW, m.focusedField == fieldTitle))
 	b.WriteString("\n")
 
 	// DESCRIPTION with edit/preview sub-toggle on the right.
@@ -316,6 +316,26 @@ func (m Model) descContent(innerW int) string {
 	return addScrollbar(rows, scroll, len(lines), height, textWidth)
 }
 
+// titleContent renders the editable title as soft-wrapped visual rows with the
+// block cursor overlaid, mirroring descContent but without a scrollbar. The
+// title is a single logical line, so its cursor row is the wrapped row offset.
+func (m Model) titleContent() string {
+	width := m.titleTextWidth()
+	h := m.titleAreaHeight()
+	lines := wrapDescLines(m.titleArea.Value(), width)
+	cursorRow := m.titleArea.LineInfo().RowOffset
+	scroll := clampScroll(cursorViewTop(cursorRow, h), len(lines), h)
+	if m.focusedField == fieldTitle && m.titleArea.Focused() &&
+		cursorRow >= scroll && cursorRow < scroll+h && cursorRow < len(lines) {
+		lines = overlayCursor(lines, cursorRow, m.titleArea.LineInfo().ColumnOffset)
+	}
+	rows := clipScrollRows(lines, scroll, h)
+	for len(rows) < h {
+		rows = append(rows, "")
+	}
+	return strings.Join(rows, "\n")
+}
+
 // clampScroll bounds a scroll offset to [0, total-height].
 func clampScroll(scroll, total, height int) int {
 	if max := total - height; scroll > max {

internal/tui/submitview/integration_test.go

@@ -10,7 +10,7 @@ import (
 
 func TestSubmit_EmptyTitleGuard(t *testing.T) {
 	m := testModel(t, newNodes())
-	m.titleInput.SetValue("") // blank the focused branch's title
+	m.titleArea.SetValue("") // blank the focused branch's title
 
 	updated, cmd := m.Update(tea.KeyMsg{Type: tea.KeyCtrlS})
 	m = updated.(Model)
@@ -32,7 +32,7 @@ func TestSubmit_SucceedsWhenTitlesPresent(t *testing.T) {
 func TestSubmit_SkippedBranchWithoutTitleDoesNotBlock(t *testing.T) {
 	m := testModel(t, newNodes())
 	// Blank the first branch's title, then skip it; submit should proceed.
-	m.titleInput.SetValue("")
+	m.titleArea.SetValue("")
 	m.saveEditor()
 	m = sendKey(t, m, tea.KeyMsg{Type: tea.KeyCtrlX}) // skip branch 0
 

internal/tui/submitview/model.go

@@ -3,7 +3,6 @@ package submitview
 import (
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/textarea"
-	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/github/gh-stack/internal/stack"
@@ -60,7 +59,7 @@ type Model struct {
 	width, height int
 
 	// Editor state for the focused branch.
-	titleInput   textinput.Model
+	titleArea    textarea.Model
 	descArea     textarea.Model
 	focusedField editField
 	descPreview  bool // description preview (vs edit)
@@ -115,25 +114,32 @@ func New(opts Options) Model {
 		}
 	}
 
-	ti := textinput.New()
-	ti.Prompt = ""
-	ti.CharLimit = 256
-
 	ta := textarea.New()
 	ta.Prompt = ""
 	ta.ShowLineNumbers = false
 	ta.CharLimit = 0 // unlimited
 	// Soften the textarea chrome; the panel provides the border.
 	ta.FocusedStyle.CursorLine = lipgloss.NewStyle()
 
+	// The title is a single logical line shown soft-wrapped: its box grows in
+	// height as the text wraps (capped, with the description shrinking to fit).
+	// It is a textarea (not a single-line input) so the cursor can move between
+	// wrapped rows. Newlines are blocked in updateScreen so the value stays a
+	// single line.
+	tia := textarea.New()
+	tia.Prompt = ""
+	tia.ShowLineNumbers = false
+	tia.CharLimit = 256
+	tia.FocusedStyle.CursorLine = lipgloss.NewStyle()
+
 	m := Model{
 		nodes:     opts.Nodes,
 		trunk:     opts.Trunk,
 		repoLabel: opts.RepoLabel,
 		version:   opts.Version,
 		cursor:    cursor,
 
-		titleInput:   ti,
+		titleArea:    tia,
 		descArea:     ta,
 		focusedField: fieldTitle,
 	}
@@ -161,7 +167,7 @@ func (m Model) Nodes() []SubmitNode { return m.nodes }
 // --- Bubble Tea interface ---
 
 func (m Model) Init() tea.Cmd {
-	return textinput.Blink
+	return textarea.Blink
 }
 
 func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {

internal/tui/submitview/model_test.go

@@ -78,7 +78,7 @@ func TestNew_OpensEditorOnBottomMostNew(t *testing.T) {
 	m := testModel(t, newNodes())
 	assert.Equal(t, 1, m.cursor, "opens on the bottom-most NEW branch (closest to trunk)")
 	assert.Equal(t, fieldTitle, m.focusedField)
-	assert.True(t, m.titleInput.Focused(), "title is focused for immediate editing")
+	assert.True(t, m.titleArea.Focused(), "title is focused for immediate editing")
 }
 
 func TestNew_AllNewIncludedByDefault(t *testing.T) {
@@ -121,7 +121,7 @@ func TestNavigation_FocusesLockedWithNoTextInput(t *testing.T) {
 	m = sendKey(t, m, tea.KeyMsg{Type: tea.KeyDown})
 	m = sendKey(t, m, tea.KeyMsg{Type: tea.KeyDown}) // locked
 	require.True(t, m.nodes[m.cursor].State.Locked())
-	assert.False(t, m.titleInput.Focused())
+	assert.False(t, m.titleArea.Focused())
 	assert.False(t, m.descArea.Focused())
 }
 
@@ -135,11 +135,11 @@ func TestCtrlX_TogglesInclude(t *testing.T) {
 
 	m = sendKey(t, m, tea.KeyMsg{Type: tea.KeyCtrlX})
 	assert.False(t, m.nodes[0].Included, "^x skips the focused NEW branch")
-	assert.False(t, m.titleInput.Focused(), "a skipped branch's title is non-interactive")
+	assert.False(t, m.titleArea.Focused(), "a skipped branch's title is non-interactive")
 
 	m = sendKey(t, m, tea.KeyMsg{Type: tea.KeyCtrlX})
 	assert.True(t, m.nodes[0].Included, "^x includes it again")
-	assert.True(t, m.titleInput.Focused(), "re-including focuses the title for editing")
+	assert.True(t, m.titleArea.Focused(), "re-including focuses the title for editing")
 }
 
 func TestCtrlX_WorksWhileTypingTitle(t *testing.T) {

internal/tui/submitview/mouse.go

@@ -188,6 +188,7 @@ func (m Model) handleClick(x, y int) (tea.Model, tea.Cmd) {
 
 	rel := y - m.panelTopRow()
 	titleLine, descLabel, descTop, descBot, draftLine := m.rightZones()
+	titleH := m.titleAreaHeight()
 	rightEdge := leftW + 1 + rightW
 
 	// Include chip (header row 0, right side) toggles inclusion.
@@ -227,12 +228,12 @@ func (m Model) handleClick(x, y int) (tea.Model, tea.Cmd) {
 			return m, cmd
 		}
 		return m, nil
-	case rel >= titleLine-1 && rel <= titleLine+1:
+	case rel >= titleLine-1 && rel <= titleLine+titleH:
 		cmd := m.focusField(fieldTitle)
-		// Clicking inside the title box content row positions the cursor at the
-		// clicked column (the border rows just focus the field).
-		if rel == titleLine {
-			m.positionTitleCursor(x - (leftW + 5))
+		// Clicking inside the title box content rows positions the cursor at the
+		// clicked row and column (the border rows just focus the field).
+		if rel >= titleLine && rel < titleLine+titleH {
+			m.positionTitleCursor(rel-titleLine, x-(leftW+5))
 		}
 		return m, cmd
 	case rel >= descTop && rel <= descBot:
@@ -266,14 +267,17 @@ func (m Model) handleClick(x, y int) (tea.Model, tea.Cmd) {
 }
 
 // rightZones returns the right-panel line offsets (from panelTopRow) of the
-// interactive editor elements for the included-NEW layout.
+// interactive editor elements for the included-NEW layout. The title box grows
+// with its wrapped content, so the description and footer offsets shift down by
+// the title's extra rows.
 func (m Model) rightZones() (titleLine, descLabel, descTop, descBot, draftLine int) {
+	titleH := m.titleAreaHeight()
 	descH := m.descAreaHeight()
-	titleLine = 4 // title box content (header 0, rule 1, label 2, box 3..5)
-	descLabel = 6
-	descTop = 7 // description box top border
-	descBot = 8 + descH
-	draftLine = 9 + descH
+	titleLine = 4 // first title box content row (header 0, rule 1, label 2, box top 3)
+	descLabel = 5 + titleH
+	descTop = 6 + titleH // description box top border
+	descBot = 7 + titleH + descH
+	draftLine = 8 + titleH + descH
 	return
 }
 
@@ -302,17 +306,27 @@ func (m *Model) positionDescCursor(visRow, col int) {
 	m.descArea.SetCursor(m.descArea.LineInfo().StartColumn + col)
 }
 
-// positionTitleCursor moves the title input's cursor to the clicked column,
-// where col is the offset from the title box's text start. It is exact when the
-// title fits the field (the single-line input isn't horizontally scrolled) and
-// approximate otherwise, mirroring positionDescCursor. col is treated as a rune
-// offset, so it is exact for the typical ASCII title.
-func (m *Model) positionTitleCursor(col int) {
+// positionTitleCursor moves the title's cursor to the clicked visual row and
+// column, where col is the offset from the title box's text start. Like
+// positionDescCursor it resets to the top of the (single logical, soft-wrapped)
+// line and walks down by visual row, so it is exact when the title is not
+// scrolled (the common case) and approximate otherwise.
+func (m *Model) positionTitleCursor(visRow, col int) {
+	if visRow < 0 {
+		visRow = 0
+	}
 	if col < 0 {
 		col = 0
 	}
-	if n := len([]rune(m.titleInput.Value())); col > n {
-		col = n
+	for guard := 0; guard < 1000; guard++ {
+		row, off := m.titleArea.Line(), m.titleArea.LineInfo().RowOffset
+		m.titleArea.CursorUp()
+		if m.titleArea.Line() == row && m.titleArea.LineInfo().RowOffset == off {
+			break // reached the top-left of the buffer
+		}
+	}
+	for i := 0; i < visRow; i++ {
+		m.titleArea.CursorDown()
 	}
-	m.titleInput.SetCursor(col)
+	m.titleArea.SetCursor(m.titleArea.LineInfo().StartColumn + col)
 }

internal/tui/submitview/mousefilter_test.go

@@ -34,19 +34,19 @@ func TestConsumeLeakedMouseKey_SwallowsSplitSequences(t *testing.T) {
 			t.Run(fmt.Sprintf("%q@%d", seq, cut), func(t *testing.T) {
 				m := testModel(t, newNodes())
 				require.Equal(t, fieldTitle, m.focusedField)
-				before := m.titleInput.Value()
+				before := m.titleArea.Value()
 
 				for _, msg := range splitSGRBurst(seq, cut) {
 					updated, _ := m.Update(msg)
 					m = updated.(Model)
 				}
 
-				assert.Equal(t, before, m.titleInput.Value(), "no fragment should reach the title field")
+				assert.Equal(t, before, m.titleArea.Value(), "no fragment should reach the title field")
 				assert.False(t, m.mouseLeakActive, "the sequence resets once its terminator is consumed")
 
 				// A normal keystroke afterwards must still register.
 				m = sendKey(t, m, runeKey('x'))
-				assert.Equal(t, before+"x", m.titleInput.Value(), "typing works after a swallowed sequence")
+				assert.Equal(t, before+"x", m.titleArea.Value(), "typing works after a swallowed sequence")
 			})
 		}
 	}
@@ -56,45 +56,45 @@ func TestConsumeLeakedMouseKey_SwallowsSingleRunTail(t *testing.T) {
 	// When the parser consumes "\x1b" as a lone Escape, the rest of the body can
 	// arrive as one run.
 	m := testModel(t, newNodes())
-	before := m.titleInput.Value()
+	before := m.titleArea.Value()
 	m = sendKey(t, m, runeMsg("[<65;54;51M", false))
-	assert.Equal(t, before, m.titleInput.Value(), "a whole leaked body in one run is dropped")
+	assert.Equal(t, before, m.titleArea.Value(), "a whole leaked body in one run is dropped")
 }
 
 func TestConsumeLeakedMouseKey_PreservesRealTyping(t *testing.T) {
 	m := testModel(t, newNodes())
-	before := m.titleInput.Value()
+	before := m.titleArea.Value()
 
 	// Characters from the mouse alphabet typed normally must pass through. Each
 	// real keystroke is a single-rune message, never a complete SGR body.
 	for _, r := range []rune{'<', '3', ';', '5', 'M', 'm'} {
 		m = sendKey(t, m, runeKey(r))
 	}
-	assert.Equal(t, before+"<3;5Mm", m.titleInput.Value(), "ordinary characters are never filtered")
+	assert.Equal(t, before+"<3;5Mm", m.titleArea.Value(), "ordinary characters are never filtered")
 }
 
 func TestConsumeLeakedMouseKey_StrayAltBracketDoesNotEatNextKey(t *testing.T) {
 	m := testModel(t, newNodes())
-	before := m.titleInput.Value()
+	before := m.titleArea.Value()
 
 	// A lone Alt+"[" opens a sequence, but the following key is not a mouse body,
 	// so it must still be handled (here: typed into the field).
 	m = sendKey(t, m, runeMsg("[", true))
 	require.True(t, m.mouseLeakActive)
 	m = sendKey(t, m, runeKey('z'))
 	assert.False(t, m.mouseLeakActive, "a non-body rune ends the sequence")
-	assert.Equal(t, before+"z", m.titleInput.Value(), "the following real key is not eaten")
+	assert.Equal(t, before+"z", m.titleArea.Value(), "the following real key is not eaten")
 }
 
 func TestConsumeLeakedMouseKey_BracketedPasteIsNotFiltered(t *testing.T) {
 	m := testModel(t, newNodes())
-	before := m.titleInput.Value()
+	before := m.titleArea.Value()
 
 	// A genuine paste that happens to look like a mouse body is preserved.
 	paste := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune("<65;54;51M"), Paste: true}
 	updated, _ := m.Update(paste)
 	m = updated.(Model)
-	assert.Equal(t, before+"<65;54;51M", m.titleInput.Value(), "pasted content is never filtered")
+	assert.Equal(t, before+"<65;54;51M", m.titleArea.Value(), "pasted content is never filtered")
 }
 
 func TestConsumeLeakedMouseKey_DescriptionField(t *testing.T) {