[TUI] Switch up table rendering (#11340)

Before we were using bubbles table, but this PR switches to using
lipgloss table which support cell styling.

In the previous version, we were styling cells using ansi codes - but
when these ansi codes got truncated they'd cause weird rendering bugs.
Handling styling at the table level works around that.

Author: siggisim

cli/ui/BUILD

@@ -26,10 +26,10 @@ go_library(
         "//proto:invocation_status_go_proto",
         "//proto:user_go_proto",
         "//server/util/grpc_client",
-        "@com_github_charmbracelet_bubbles//table",
         "@com_github_charmbracelet_bubbles//viewport",
         "@com_github_charmbracelet_bubbletea//:bubbletea",
         "@com_github_charmbracelet_lipgloss//:lipgloss",
+        "@com_github_charmbracelet_lipgloss//table",
         "@org_golang_google_grpc//metadata",
         "@org_golang_google_protobuf//types/known/timestamppb",
     ],

cli/ui/format.go

@@ -13,15 +13,15 @@ func formatStatus(inv *inpb.Invocation) string {
 	switch inv.GetInvocationStatus() {
 	case inspb.InvocationStatus_COMPLETE_INVOCATION_STATUS:
 		if inv.GetSuccess() {
-			return statusPassedStyle.Render("Passed")
+			return "Passed"
 		}
-		return statusFailedStyle.Render("Failed")
+		return "Failed"
 	case inspb.InvocationStatus_PARTIAL_INVOCATION_STATUS:
-		return statusInProgressStyle.Render("In progress")
+		return "In progress"
 	case inspb.InvocationStatus_DISCONNECTED_INVOCATION_STATUS:
-		return statusDisconnectedStyle.Render("Disconnected")
+		return "Disconnected"
 	default:
-		return statusUnknownStyle.Render("Unknown")
+		return "Unknown"
 	}
 }
 

cli/ui/list.go

@@ -1,60 +1,42 @@
 package ui
 
 import (
-	"github.com/charmbracelet/bubbles/table"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	lgtable "github.com/charmbracelet/lipgloss/table"
 
 	inpb "github.com/buildbuddy-io/buildbuddy/proto/invocation"
 )
 
 type listModel struct {
 	api          *apiClient
 	filters      filters
-	table        table.Model
 	invocations  []*inpb.Invocation
 	loading      bool
 	err          error
 	width        int
 	height       int
+	cursor       int
+	offset       int
 	selectedID   string
 	switchOrg    bool
 	hasOrgPicker bool
 }
 
-func newListModel(api *apiClient, f filters, hasOrgPicker bool) listModel {
-	columns := []table.Column{
-		{Title: "Status", Width: 14},
-		{Title: "User", Width: 12},
-		{Title: "Command", Width: 8},
-		{Title: "Pattern", Width: 30},
-		{Title: "Branch", Width: 16},
-		{Title: "Duration", Width: 10},
-		{Title: "When", Width: 10},
-	}
-
-	t := table.New(
-		table.WithColumns(columns),
-		table.WithFocused(true),
-		table.WithHeight(20),
-	)
-
-	s := table.DefaultStyles()
-	s.Header = s.Header.
-		BorderStyle(lipgloss.NormalBorder()).
-		BorderForeground(colorDim).
-		BorderBottom(true).
-		Bold(true)
-	s.Selected = s.Selected.
-		Foreground(lipgloss.Color("#ffffff")).
-		Background(lipgloss.Color("#5533cc")).
-		Bold(false)
-	t.SetStyles(s)
+type listColumnWidths struct {
+	status   int
+	user     int
+	command  int
+	pattern  int
+	branch   int
+	duration int
+	when     int
+}
 
+func newListModel(api *apiClient, f filters, hasOrgPicker bool) listModel {
 	return listModel{
 		api:          api,
 		filters:      f,
-		table:        t,
 		loading:      true,
 		hasOrgPicker: hasOrgPicker,
 	}
@@ -71,12 +53,15 @@ func (m listModel) Update(msg tea.Msg) (listModel, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch msg.String() {
+		case "up", "k":
+			m.moveCursor(-1)
+			return m, nil
+		case "down", "j":
+			m.moveCursor(1)
+			return m, nil
 		case "enter":
-			if sel := m.table.SelectedRow(); len(sel) > 0 {
-				idx := m.table.Cursor()
-				if idx >= 0 && idx < len(m.invocations) {
-					m.selectedID = m.invocations[idx].GetInvocationId()
-				}
+			if m.cursor >= 0 && m.cursor < len(m.invocations) {
+				m.selectedID = m.invocations[m.cursor].GetInvocationId()
 			}
 			return m, nil
 		case "r":
@@ -96,12 +81,8 @@ func (m listModel) Update(msg tea.Msg) (listModel, tea.Cmd) {
 			return m, nil
 		}
 		m.err = nil
-		cursor := m.table.Cursor()
 		m.invocations = msg.invocations
-		m.table.SetRows(m.buildRows())
-		if cursor < len(m.invocations) {
-			m.table.SetCursor(cursor)
-		}
+		m.clampCursorAndOffset()
 		return m, nil
 
 	case tickMsg:
@@ -113,23 +94,96 @@ func (m listModel) Update(msg tea.Msg) (listModel, tea.Cmd) {
 	case tea.WindowSizeMsg:
 		m.width = msg.Width
 		m.height = msg.Height
-		m.table.SetHeight(msg.Height - 5)
-		m.updateColumnWidths()
+		m.clampCursorAndOffset()
 		return m, nil
 	}
 
-	var cmd tea.Cmd
-	m.table, cmd = m.table.Update(msg)
-	return m, cmd
+	return m, nil
 }
 
-func (m *listModel) updateColumnWidths() {
-	if m.width < 60 {
+func (m *listModel) moveCursor(delta int) {
+	if len(m.invocations) == 0 {
 		return
 	}
-	// Fixed columns: Status(14) + User(12) + Command(8) + Duration(10) + When(10) = 54
-	// Plus separators ~6
-	fixed := 60
+	m.cursor += delta
+	m.clampCursorAndOffset()
+}
+
+func (m *listModel) clampCursorAndOffset() {
+	if len(m.invocations) == 0 {
+		m.cursor = 0
+		m.offset = 0
+		return
+	}
+	if m.cursor < 0 {
+		m.cursor = 0
+	}
+	if m.cursor >= len(m.invocations) {
+		m.cursor = len(m.invocations) - 1
+	}
+
+	visibleRows := m.visibleRows()
+	maxOffset := len(m.invocations) - visibleRows
+	if maxOffset < 0 {
+		maxOffset = 0
+	}
+	if m.offset < 0 {
+		m.offset = 0
+	}
+	if m.offset > maxOffset {
+		m.offset = maxOffset
+	}
+	if m.cursor < m.offset {
+		m.offset = m.cursor
+	}
+	if m.cursor >= m.offset+visibleRows {
+		m.offset = m.cursor - visibleRows + 1
+	}
+}
+
+func (m listModel) visibleRows() int {
+	rows := m.tableAreaHeight() - 2 // account for header row + header separator
+	if rows < 1 {
+		return 1
+	}
+	return rows
+}
+
+func (m listModel) showStatusLine() bool {
+	return (m.loading && len(m.invocations) == 0) || m.err != nil
+}
+
+func (m listModel) tableAreaHeight() int {
+	// title/filter line + help line are always visible.
+	h := m.height - 2
+	// Loading / error status line is conditionally visible.
+	if m.showStatusLine() {
+		h--
+	}
+	if h < 3 {
+		return 3
+	}
+	return h
+}
+
+func (m listModel) columnWidths() listColumnWidths {
+	widths := listColumnWidths{
+		status:   14,
+		user:     12,
+		command:  14,
+		pattern:  30,
+		branch:   16,
+		duration: 10,
+		when:     12,
+	}
+
+	if m.width <= 0 {
+		return widths
+	}
+
+	// Non-resizable content widths: Status(14) + User(12) + Command(14) + Duration(10) + When(12) = 62
+	// Pattern and Branch consume the remaining width.
+	fixed := 62
 	remaining := m.width - fixed
 	patternW := remaining * 2 / 3
 	branchW := remaining - patternW
@@ -139,35 +193,112 @@ func (m *listModel) updateColumnWidths() {
 	if branchW < 8 {
 		branchW = 8
 	}
+	widths.pattern = patternW
+	widths.branch = branchW
 
-	columns := []table.Column{
-		{Title: "Status", Width: 14},
-		{Title: "User", Width: 12},
-		{Title: "Command", Width: 8},
-		{Title: "Pattern", Width: patternW},
-		{Title: "Branch", Width: branchW},
-		{Title: "Duration", Width: 10},
-		{Title: "When", Width: 10},
-	}
-	m.table.SetColumns(columns)
+	return widths
 }
 
-func (m listModel) buildRows() []table.Row {
-	rows := make([]table.Row, len(m.invocations))
+func (m listModel) buildRows(widths listColumnWidths) [][]string {
+	rows := make([][]string, len(m.invocations))
 	for i, inv := range m.invocations {
-		rows[i] = table.Row{
+		rows[i] = []string{
 			formatStatus(inv),
-			truncate(inv.GetUser(), 12),
-			inv.GetCommand(),
-			truncate(formatPattern(inv.GetPattern()), 30),
-			truncate(inv.GetBranchName(), 16),
+			truncate(inv.GetUser(), widths.user),
+			truncate(inv.GetCommand(), widths.command),
+			truncate(formatPattern(inv.GetPattern()), widths.pattern),
+			truncate(inv.GetBranchName(), widths.branch),
 			formatDuration(inv.GetDurationUsec()),
 			formatTimeAgo(inv.GetUpdatedAtUsec()),
 		}
 	}
 	return rows
 }
 
+func (m listModel) renderTable() string {
+	widths := m.columnWidths()
+	allRows := m.buildRows(widths)
+	tableHeight := m.tableAreaHeight()
+	start := m.offset
+	if start < 0 {
+		start = 0
+	}
+	if start > len(allRows) {
+		start = len(allRows)
+	}
+	end := start + (tableHeight - 2)
+	if end < start {
+		end = start
+	}
+	if end > len(allRows) {
+		end = len(allRows)
+	}
+	visibleRows := allRows[start:end]
+
+	t := lgtable.New().
+		Headers("Status", "User", "Command", "Pattern", "Branch", "Duration", "When").
+		Rows(visibleRows...).
+		Border(lipgloss.NormalBorder()).
+		BorderTop(false).
+		BorderBottom(false).
+		BorderLeft(false).
+		BorderRight(false).
+		BorderColumn(false).
+		BorderRow(false).
+		BorderHeader(true).
+		BorderStyle(lipgloss.NewStyle().Foreground(colorDim)).
+		Wrap(false).
+		StyleFunc(func(row, col int) lipgloss.Style {
+			style := lipgloss.NewStyle().
+				Width(columnWidth(widths, col)).
+				MaxWidth(columnWidth(widths, col)).
+				Padding(0, 1)
+
+			if row == lgtable.HeaderRow {
+				return style.Bold(true)
+			}
+
+			absoluteRow := start + row
+			if absoluteRow == m.cursor {
+				style = style.Background(lipgloss.Color("#5533cc")).Foreground(colorWhite)
+			}
+
+			if row >= 0 && row < len(visibleRows) && col == 0 {
+				style = style.Inherit(statusTextStyle(visibleRows[row][0]))
+			}
+
+			return style
+		})
+
+	table := t.String()
+	frame := lipgloss.NewStyle().Height(tableHeight)
+	if m.width > 0 {
+		frame = frame.Width(m.width)
+	}
+	return frame.Render(table)
+}
+
+func columnWidth(widths listColumnWidths, col int) int {
+	switch col {
+	case 0:
+		return widths.status
+	case 1:
+		return widths.user
+	case 2:
+		return widths.command
+	case 3:
+		return widths.pattern
+	case 4:
+		return widths.branch
+	case 5:
+		return widths.duration
+	case 6:
+		return widths.when
+	default:
+		return 0
+	}
+}
+
 func (m listModel) View() string {
 	title := titleStyle.Render("BuildBuddy Builds")
 	filterStr := formatActiveFilters(m.filters)
@@ -186,5 +317,5 @@ func (m listModel) View() string {
 	helpText += " • q: quit"
 	help := helpStyle.Render(helpText)
 
-	return title + filterStr + status + "\n" + m.table.View() + "\n" + help
+	return title + filterStr + status + "\n" + m.renderTable() + "\n" + help
 }