Metrics bar fills the screen with vibrant palette

With this change metrics bar will now fill the whole screen, using
the following strategy:

* Try to equalize the widths of all metrics, adding spaces as needed
  from left to right, to ensure visual balance.
* When there is not enough room, extra white spaces are trimmed from
  the widest metrics first, again from left to right.
* If there are no more insignificant spaces to trim, metric values
  will start to get truncated from the right side to ensure the height
  is always 1 line.

I will try to gradually introduce colors, as the TUI looks bleak at
the moment. The metrics bar now uses a blue background.

Author: kpumuk

AGENTS.md

@@ -4,6 +4,10 @@
 
 Bubble Tea TUI for Sidekiq monitoring. Go 1.25.
 
+## Code Quality
+
+* Make sure to always perform `mise run ci` to ensure code formatting matches the style of the repository, linters don't have any offenses, and tests pass.
+
 ## Structure
 
 ```text

internal/ui/app.go

@@ -86,9 +86,10 @@ func New(client *sidekiq.Client) App {
 		metrics: metrics.New(
 			metrics.WithStyles(metrics.Styles{
 				Bar:       styles.MetricsBar,
-				Label:     styles.MetricLabel,
-				Value:     styles.MetricValue,
-				Separator: styles.MetricSep,
+				Fill:      styles.MetricsFill,
+				Label:     styles.MetricsLabel,
+				Value:     styles.MetricsValue,
+				Separator: styles.MetricsSep,
 			}),
 		),
 		navbar: navbar.New(

internal/ui/components/metrics/metrics.go

@@ -1,8 +1,11 @@
 package metrics
 
 import (
+	"strings"
+
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/charmbracelet/x/ansi"
 	"github.com/kpumuk/lazykiq/internal/ui/format"
 )
 
@@ -25,6 +28,7 @@ type UpdateMsg struct {
 // Styles holds the styles needed by the metrics bar.
 type Styles struct {
 	Bar       lipgloss.Style
+	Fill      lipgloss.Style
 	Label     lipgloss.Style
 	Value     lipgloss.Style
 	Separator lipgloss.Style
@@ -34,6 +38,7 @@ type Styles struct {
 func DefaultStyles() Styles {
 	return Styles{
 		Bar:       lipgloss.NewStyle().Padding(0, 1),
+		Fill:      lipgloss.NewStyle(),
 		Label:     lipgloss.NewStyle().Faint(true),
 		Value:     lipgloss.NewStyle().Bold(true),
 		Separator: lipgloss.NewStyle().Faint(true),
@@ -132,9 +137,7 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 func (m Model) View() string {
 	barStyle := m.styles.Bar.Width(m.width)
 
-	sep := m.styles.Separator.Render(" │ ")
-
-	metricsItems := []string{
+	baseMetrics := []string{
 		m.styles.Label.Render("Processed: ") + m.styles.Value.Render(format.Number(m.data.Processed)),
 		m.styles.Label.Render("Failed: ") + m.styles.Value.Render(format.Number(m.data.Failed)),
 		m.styles.Label.Render("Busy: ") + m.styles.Value.Render(format.Number(m.data.Busy)),
@@ -144,13 +147,113 @@ func (m Model) View() string {
 		m.styles.Label.Render("Dead: ") + m.styles.Value.Render(format.Number(m.data.Dead)),
 	}
 
-	content := ""
-	for i, metric := range metricsItems {
-		if i > 0 {
-			content += sep
+	if m.width <= 0 || len(baseMetrics) == 0 {
+		return barStyle.Render("")
+	}
+
+	contentWidth := m.width - barStyle.GetHorizontalPadding()
+	if contentWidth < 0 {
+		contentWidth = 0
+	}
+
+	baseItems, baseWidths, maxWidth := buildBaseItems(baseMetrics, m.styles)
+	sep := m.styles.Separator.Render(" ")
+	sepWidth := lipgloss.Width(sep)
+
+	targetWidths := layoutTargetWidths(baseWidths, maxWidth, contentWidth, sepWidth)
+	if targetWidths == nil {
+		content := strings.Join(baseItems, sep)
+		content = ansi.Truncate(content, contentWidth, "")
+		return barStyle.Render(content)
+	}
+
+	metricsItems := applyWidths(baseItems, targetWidths, m.styles.Fill)
+	return barStyle.Render(strings.Join(metricsItems, sep))
+}
+
+func buildBaseItems(metrics []string, styles Styles) ([]string, []int, int) {
+	pad := styles.Fill.Render(" ")
+	items := make([]string, len(metrics))
+	widths := make([]int, len(metrics))
+	maxWidth := 0
+
+	for i, metric := range metrics {
+		item := pad + metric + pad
+		width := lipgloss.Width(item)
+		items[i] = item
+		widths[i] = width
+		if width > maxWidth {
+			maxWidth = width
 		}
-		content += metric
 	}
 
-	return barStyle.Render(content)
+	return items, widths, maxWidth
+}
+
+func layoutTargetWidths(baseWidths []int, maxWidth, contentWidth, sepWidth int) []int {
+	if len(baseWidths) == 0 {
+		return []int{}
+	}
+
+	minTotal := 0
+	for _, width := range baseWidths {
+		minTotal += width
+	}
+	minTotal += sepWidth * (len(baseWidths) - 1)
+
+	if contentWidth < minTotal {
+		return nil
+	}
+
+	targetWidths := make([]int, len(baseWidths))
+	for i := range targetWidths {
+		targetWidths[i] = maxWidth
+	}
+
+	totalEqual := maxWidth*len(baseWidths) + sepWidth*(len(baseWidths)-1)
+	if contentWidth >= totalEqual {
+		extra := contentWidth - totalEqual
+		for extra > 0 {
+			for i := range targetWidths {
+				targetWidths[i]++
+				extra--
+				if extra == 0 {
+					break
+				}
+			}
+		}
+		return targetWidths
+	}
+
+	overflow := totalEqual - contentWidth
+	for overflow > 0 {
+		trimmed := false
+		for i := range targetWidths {
+			if targetWidths[i] > baseWidths[i] {
+				targetWidths[i]--
+				overflow--
+				trimmed = true
+				if overflow == 0 {
+					break
+				}
+			}
+		}
+		if !trimmed {
+			return nil
+		}
+	}
+
+	return targetWidths
+}
+
+func applyWidths(items []string, targetWidths []int, fillStyle lipgloss.Style) []string {
+	applied := make([]string, len(items))
+	for i, item := range items {
+		width := lipgloss.Width(item)
+		if targetWidths[i] > width {
+			item += fillStyle.Render(strings.Repeat(" ", targetWidths[i]-width))
+		}
+		applied[i] = item
+	}
+	return applied
 }

internal/ui/components/metrics/metrics_test.go

@@ -0,0 +1,77 @@
+package metrics
+
+import (
+	"testing"
+
+	"github.com/charmbracelet/lipgloss"
+)
+
+func testStyles() Styles {
+	return Styles{
+		Bar:       lipgloss.NewStyle(),
+		Fill:      lipgloss.NewStyle(),
+		Label:     lipgloss.NewStyle(),
+		Value:     lipgloss.NewStyle(),
+		Separator: lipgloss.NewStyle(),
+	}
+}
+
+func testData() Data {
+	return Data{
+		Processed: 1,
+		Failed:    22,
+		Busy:      333,
+		Enqueued:  4444,
+		Retries:   55555,
+		Scheduled: 6,
+		Dead:      7777777,
+	}
+}
+
+func TestViewSnapshots(t *testing.T) {
+	data := testData()
+	cases := []struct {
+		name     string
+		width    int
+		expected string
+	}{
+		{
+			name:     "truncate",
+			width:    99,
+			expected: " Processed: 1   Failed: 22   Busy: 333   Enqueued: 4.4K   Retries: 55.6K   Scheduled: 6   Dead: 7.8",
+		},
+		{
+			name:     "min-spacing",
+			width:    101,
+			expected: " Processed: 1   Failed: 22   Busy: 333   Enqueued: 4.4K   Retries: 55.6K   Scheduled: 6   Dead: 7.8M ",
+		},
+		{
+			name:     "trim-padding",
+			width:    116,
+			expected: " Processed: 1    Failed: 22      Busy: 333        Enqueued: 4.4K   Retries: 55.6K   Scheduled: 6     Dead: 7.8M     ",
+		},
+		{
+			name:     "equal-width",
+			width:    118,
+			expected: " Processed: 1     Failed: 22       Busy: 333        Enqueued: 4.4K   Retries: 55.6K   Scheduled: 6     Dead: 7.8M     ",
+		},
+		{
+			name:     "extra-distributed",
+			width:    120,
+			expected: " Processed: 1      Failed: 22        Busy: 333        Enqueued: 4.4K   Retries: 55.6K   Scheduled: 6     Dead: 7.8M     ",
+		},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			m := New(
+				WithStyles(testStyles()),
+				WithWidth(tc.width),
+				WithData(data),
+			)
+			if got := m.View(); got != tc.expected {
+				t.Fatalf("unexpected output:\nexpected %q\ngot      %q", tc.expected, got)
+			}
+		})
+	}
+}

internal/ui/theme/theme.go

@@ -14,8 +14,9 @@ type Theme struct {
 	TextBright lipgloss.AdaptiveColor
 
 	// Background colors
-	Bg    lipgloss.AdaptiveColor
-	BgAlt lipgloss.AdaptiveColor
+	Bg           lipgloss.AdaptiveColor
+	BgAlt        lipgloss.AdaptiveColor
+	MetricsBarBg lipgloss.AdaptiveColor
 
 	// Border colors
 	Border      lipgloss.AdaptiveColor
@@ -26,9 +27,14 @@ type Theme struct {
 	TableSelectedBg lipgloss.AdaptiveColor
 	Success         lipgloss.AdaptiveColor
 	Error           lipgloss.AdaptiveColor
+
+	// Metrics colors
+	MetricsText  lipgloss.AdaptiveColor
+	MetricsSepBg lipgloss.AdaptiveColor
 }
 
 // DefaultTheme is the adaptive color scheme used by default.
+// Use Open Color palette when possible to define colors: https://yeun.github.io/open-color/
 var DefaultTheme = Theme{
 	// Sidekiq-inspired primary
 	Primary: lipgloss.AdaptiveColor{
@@ -63,6 +69,10 @@ var DefaultTheme = Theme{
 		Light: "#F3F4F6", // Gray-100
 		Dark:  "#1F2937", // Gray-800
 	},
+	MetricsBarBg: lipgloss.AdaptiveColor{
+		Light: "#1c7ed6", // blue 7
+		Dark:  "#4dabf7", // blue 4
+	},
 
 	// Borders
 	Border: lipgloss.AdaptiveColor{
@@ -91,15 +101,28 @@ var DefaultTheme = Theme{
 		Light: "#FF0000",
 		Dark:  "#FF0000",
 	},
+
+	// Metrics
+	MetricsText: lipgloss.AdaptiveColor{
+		Light: "#f8f9fa",
+		Dark:  "#212529", //gray 9
+	},
+	MetricsSepBg: lipgloss.AdaptiveColor{
+		Light: "#1971c2", // blue 8
+		Dark:  "#339af0", // blue 5
+	},
 }
 
 // Styles holds all lipgloss styles derived from a theme
 type Styles struct {
 	// Metrics bar
-	MetricsBar  lipgloss.Style
-	MetricLabel lipgloss.Style
-	MetricValue lipgloss.Style
-	MetricSep   lipgloss.Style
+	MetricsBar   lipgloss.Style
+	MetricsFill  lipgloss.Style
+	MetricsLabel lipgloss.Style
+	MetricsValue lipgloss.Style
+	MetricsSep   lipgloss.Style
+	MetricLabel  lipgloss.Style
+	MetricValue  lipgloss.Style
 
 	// Navbar
 	NavBar  lipgloss.Style
@@ -137,8 +160,24 @@ func NewStyles() Styles {
 	return Styles{
 		// Metrics bar
 		MetricsBar: lipgloss.NewStyle().
-			Foreground(t.Text).
-			Padding(0, 1),
+			Foreground(t.MetricsText).
+			Background(t.MetricsBarBg).
+			Padding(0, 0),
+
+		MetricsFill: lipgloss.NewStyle().
+			Background(t.MetricsBarBg),
+
+		MetricsLabel: lipgloss.NewStyle().
+			Foreground(t.MetricsText).
+			Background(t.MetricsBarBg),
+
+		MetricsValue: lipgloss.NewStyle().
+			Foreground(t.MetricsText).
+			Background(t.MetricsBarBg).
+			Bold(true),
+
+		MetricsSep: lipgloss.NewStyle().
+			Background(t.MetricsSepBg),
 
 		MetricLabel: lipgloss.NewStyle().
 			Foreground(t.TextMuted),
@@ -147,9 +186,6 @@ func NewStyles() Styles {
 			Foreground(t.Text).
 			Bold(true),
 
-		MetricSep: lipgloss.NewStyle().
-			Foreground(t.Border),
-
 		// Navbar
 		NavBar: lipgloss.NewStyle().
 			Padding(0, 1),