lerkolabs/uptop
1
1
Fork 0
Code Issues 17 Pull Requests 1 Actions Packages Projects 2 Releases 1 Wiki Activity

fix(tui): SSH-safe color fallbacks with ANSI-16 support #136

Merged
lerko merged 3 commits from fix/ssh-color-degradation into main 2026-06-19 21:33:41 +00:00
Conversation 0 Commits 3 Files Changed 6
+160 -138
6 changed files with 160 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 974c4b61ea - Show all commits
internal/tui/sparkline.go
+22 -10
View File
@@ -17,6 +17,17 @@ func parseHex(hex string) (r, g, b uint8) {
return return
} }
func trueColorHex(c lipgloss.TerminalColor) string {
switch v := c.(type) {
case lipgloss.CompleteColor:
return v.TrueColor
case lipgloss.Color:
return string(v)
default:
return ""
}
}
func dimColor(hex string, brightness float64) lipgloss.Color { func dimColor(hex string, brightness float64) lipgloss.Color {
r, g, b := parseHex(hex) r, g, b := parseHex(hex)
f := 0.3 + brightness*0.7 f := 0.3 + brightness*0.7
@@ -27,35 +38,36 @@ func dimColor(hex string, brightness float64) lipgloss.Color {
)) ))
} }
func withBg(s lipgloss.Style, bg lipgloss.Color) lipgloss.Style { func withBg(s lipgloss.Style, bg lipgloss.TerminalColor) lipgloss.Style {
if bg != "" { if bg != nil {
return s.Background(bg) return s.Background(bg)
} }
return s return s
} }
func (m Model) latencyStyle(ms int64, bg lipgloss.Color) lipgloss.Style { func (m Model) latencyStyle(ms int64, bg lipgloss.TerminalColor) lipgloss.Style {
var hex string var base lipgloss.TerminalColor
var t float64 var t float64
switch { switch {
case ms < 200: case ms < 200:
hex = m.st.sparkSuccess base = m.st.sparkSuccess
t = float64(ms) / 200 t = float64(ms) / 200
case ms < 500: case ms < 500:
hex = m.st.sparkWarning base = m.st.sparkWarning
t = float64(ms-200) / 300 t = float64(ms-200) / 300
default: default:
hex = m.st.sparkDanger base = m.st.sparkDanger
t = float64(ms-500) / 1500 t = float64(ms-500) / 1500
if t > 1 { if t > 1 {
t = 1 t = 1
} }
} }
hex := trueColorHex(base)
s := lipgloss.NewStyle().Foreground(dimColor(hex, t)) s := lipgloss.NewStyle().Foreground(dimColor(hex, t))
return withBg(s, bg) return withBg(s, bg)
} }
func (m Model) latencySparkline(latencies []time.Duration, statuses []bool, width int, bg lipgloss.Color) string { func (m Model) latencySparkline(latencies []time.Duration, statuses []bool, width int, bg lipgloss.TerminalColor) string {
if len(latencies) == 0 { if len(latencies) == 0 {
return withBg(m.st.subtleStyle, bg).Render(strings.Repeat("·", width)) return withBg(m.st.subtleStyle, bg).Render(strings.Repeat("·", width))
} }
@@ -103,7 +115,7 @@ func (m Model) latencySparkline(latencies []time.Duration, statuses []bool, widt
return sb.String() return sb.String()
} }
func (m Model) heartbeatSparkline(statuses []bool, width int, bg lipgloss.Color) string { func (m Model) heartbeatSparkline(statuses []bool, width int, bg lipgloss.TerminalColor) string {
if len(statuses) == 0 { if len(statuses) == 0 {
return withBg(m.st.subtleStyle, bg).Render(strings.Repeat("·", width)) return withBg(m.st.subtleStyle, bg).Render(strings.Repeat("·", width))
} }
@@ -143,7 +155,7 @@ func resolveSparklineIndex(x, sparkWidth, dataLen int) int {
return offset + (x - padding) return offset + (x - padding)
} }
func (m Model) groupSparkline(groupID int, width int, bg lipgloss.Color) string { func (m Model) groupSparkline(groupID int, width int, bg lipgloss.TerminalColor) string {
allSites := m.engine.GetAllSites() allSites := m.engine.GetAllSites()
var childStatuses [][]bool var childStatuses [][]bool
for _, s := range allSites { for _, s := range allSites {
internal/tui/sparkline_test.go
+19 -17
View File
@@ -5,10 +5,12 @@ import (
"testing" "testing"
"time" "time"
"unicode/utf8" "unicode/utf8"
"github.com/charmbracelet/lipgloss"
) )
func TestLatencySparkline_Empty(t *testing.T) { func TestLatencySparkline_Empty(t *testing.T) {
got := styledModel.latencySparkline(nil, nil, 10, "") got := styledModel.latencySparkline(nil, nil, 10, nil)
if !strings.Contains(got, "··········") { if !strings.Contains(got, "··········") {
t.Errorf("empty sparkline should be dots, got %q", got) t.Errorf("empty sparkline should be dots, got %q", got)
} }
@@ -17,7 +19,7 @@ func TestLatencySparkline_Empty(t *testing.T) {
func TestLatencySparkline_SingleValue(t *testing.T) { func TestLatencySparkline_SingleValue(t *testing.T) {
latencies := []time.Duration{100 * time.Millisecond} latencies := []time.Duration{100 * time.Millisecond}
statuses := []bool{true} statuses := []bool{true}
got := styledModel.latencySparkline(latencies, statuses, 5, "") got := styledModel.latencySparkline(latencies, statuses, 5, nil)
if len(got) == 0 { if len(got) == 0 {
t.Error("sparkline should not be empty") t.Error("sparkline should not be empty")
} }
@@ -33,7 +35,7 @@ func TestLatencySparkline_WidthTruncation(t *testing.T) {
latencies[i] = time.Duration(i*50) * time.Millisecond latencies[i] = time.Duration(i*50) * time.Millisecond
statuses[i] = true statuses[i] = true
} }
got := styledModel.latencySparkline(latencies, statuses, 5, "") got := styledModel.latencySparkline(latencies, statuses, 5, nil)
if len(got) == 0 { if len(got) == 0 {
t.Error("sparkline should not be empty") t.Error("sparkline should not be empty")
} }
@@ -45,7 +47,7 @@ func TestLatencySparkline_WidthTruncation(t *testing.T) {
func TestLatencySparkline_RelativeHeight(t *testing.T) { func TestLatencySparkline_RelativeHeight(t *testing.T) {
latencies := []time.Duration{10 * time.Millisecond, 50 * time.Millisecond, 10 * time.Millisecond} latencies := []time.Duration{10 * time.Millisecond, 50 * time.Millisecond, 10 * time.Millisecond}
statuses := []bool{true, true, true} statuses := []bool{true, true, true}
out := stripANSI(styledModel.latencySparkline(latencies, statuses, 3, "")) out := stripANSI(styledModel.latencySparkline(latencies, statuses, 3, nil))
runes := []rune(out) runes := []rune(out)
if len(runes) < 3 { if len(runes) < 3 {
t.Fatalf("expected 3 runes, got %d", len(runes)) t.Fatalf("expected 3 runes, got %d", len(runes))
@@ -57,14 +59,14 @@ func TestLatencySparkline_RelativeHeight(t *testing.T) {
func TestLatencyStyle_BandsProduceDifferentColors(t *testing.T) { func TestLatencyStyle_BandsProduceDifferentColors(t *testing.T) {
st := newStyles(themeFlexokiDark) st := newStyles(themeFlexokiDark)
st.sparkSuccess = "#00ff00" st.sparkSuccess = lipgloss.Color("#00ff00")
st.sparkWarning = "#ffff00" st.sparkWarning = lipgloss.Color("#ffff00")
st.sparkDanger = "#ff0000" st.sparkDanger = lipgloss.Color("#ff0000")
m := Model{st: st} m := Model{st: st}
green := m.latencyStyle(50, "") green := m.latencyStyle(50, nil)
yellow := m.latencyStyle(300, "") yellow := m.latencyStyle(300, nil)
red := m.latencyStyle(800, "") red := m.latencyStyle(800, nil)
gfg := green.GetForeground() gfg := green.GetForeground()
yfg := yellow.GetForeground() yfg := yellow.GetForeground()
@@ -77,11 +79,11 @@ func TestLatencyStyle_BandsProduceDifferentColors(t *testing.T) {
func TestLatencyStyle_BrightnessVariesWithinBand(t *testing.T) { func TestLatencyStyle_BrightnessVariesWithinBand(t *testing.T) {
st := newStyles(themeFlexokiDark) st := newStyles(themeFlexokiDark)
st.sparkSuccess = "#00ff00" st.sparkSuccess = lipgloss.Color("#00ff00")
m := Model{st: st} m := Model{st: st}
dim := m.latencyStyle(10, "") dim := m.latencyStyle(10, nil)
bright := m.latencyStyle(190, "") bright := m.latencyStyle(190, nil)
if dim.GetForeground() == bright.GetForeground() { if dim.GetForeground() == bright.GetForeground() {
t.Error("10ms and 190ms should have different brightness within green band") t.Error("10ms and 190ms should have different brightness within green band")
@@ -91,7 +93,7 @@ func TestLatencyStyle_BrightnessVariesWithinBand(t *testing.T) {
func TestLatencySparkline_OutputWidth(t *testing.T) { func TestLatencySparkline_OutputWidth(t *testing.T) {
latencies := []time.Duration{100 * time.Millisecond, 200 * time.Millisecond, 300 * time.Millisecond} latencies := []time.Duration{100 * time.Millisecond, 200 * time.Millisecond, 300 * time.Millisecond}
statuses := []bool{true, true, true} statuses := []bool{true, true, true}
got := styledModel.latencySparkline(latencies, statuses, 5, "") got := styledModel.latencySparkline(latencies, statuses, 5, nil)
count := utf8.RuneCountInString(stripANSI(got)) count := utf8.RuneCountInString(stripANSI(got))
if count != 5 { if count != 5 {
t.Errorf("expected 5 rune-width output, got %d from %q", count, got) t.Errorf("expected 5 rune-width output, got %d from %q", count, got)
@@ -116,7 +118,7 @@ func stripANSI(s string) string {
} }
func TestHeartbeatSparkline_Empty(t *testing.T) { func TestHeartbeatSparkline_Empty(t *testing.T) {
got := styledModel.heartbeatSparkline(nil, 10, "") got := styledModel.heartbeatSparkline(nil, 10, nil)
if !strings.Contains(got, "··········") { if !strings.Contains(got, "··········") {
t.Errorf("empty heartbeat should be dots, got %q", got) t.Errorf("empty heartbeat should be dots, got %q", got)
} }
@@ -124,7 +126,7 @@ func TestHeartbeatSparkline_Empty(t *testing.T) {
func TestHeartbeatSparkline_Mixed(t *testing.T) { func TestHeartbeatSparkline_Mixed(t *testing.T) {
statuses := []bool{true, false, true, true, false} statuses := []bool{true, false, true, true, false}
got := styledModel.heartbeatSparkline(statuses, 5, "") got := styledModel.heartbeatSparkline(statuses, 5, nil)
if len(got) == 0 { if len(got) == 0 {
t.Error("heartbeat sparkline should not be empty") t.Error("heartbeat sparkline should not be empty")
} }
@@ -132,7 +134,7 @@ func TestHeartbeatSparkline_Mixed(t *testing.T) {
func TestHeartbeatSparkline_PaddedWidth(t *testing.T) { func TestHeartbeatSparkline_PaddedWidth(t *testing.T) {
statuses := []bool{true, true} statuses := []bool{true, true}
got := styledModel.heartbeatSparkline(statuses, 5, "") got := styledModel.heartbeatSparkline(statuses, 5, nil)
if !strings.Contains(got, "···") { if !strings.Contains(got, "···") {
t.Errorf("should have dot padding for width > data, got %q", got) t.Errorf("should have dot padding for width > data, got %q", got)
} }
internal/tui/tab_sites.go
+1 -1
View File
@@ -204,7 +204,7 @@ func (m Model) viewSitesTab() string {
for i := start; i < end; i++ { for i := start; i < end; i++ {
site := m.sites[i] site := m.sites[i]
rowIdx := i - start rowIdx := i - start
var rowBg lipgloss.Color var rowBg lipgloss.TerminalColor
if i == m.cursor { if i == m.cursor {
rowBg = m.theme.SelectedBg rowBg = m.theme.SelectedBg
} else if rowIdx%2 == 1 { } else if rowIdx%2 == 1 {
internal/tui/theme.go
+110 -102
View File
@@ -5,35 +5,43 @@ import (
"github.com/charmbracelet/lipgloss" "github.com/charmbracelet/lipgloss"
) )
func cc(hex, ansi string) lipgloss.CompleteColor {
return lipgloss.CompleteColor{
TrueColor: hex,
ANSI256: hex,
ANSI: ansi,
}
}
type Theme struct { type Theme struct {
Name string Name string
// Base layers // Base layers
Bg lipgloss.Color Bg lipgloss.TerminalColor
Surface lipgloss.Color Surface lipgloss.TerminalColor
Panel lipgloss.Color Panel lipgloss.TerminalColor
Border lipgloss.Color Border lipgloss.TerminalColor
// Text // Text
Fg lipgloss.Color Fg lipgloss.TerminalColor
Muted lipgloss.Color Muted lipgloss.TerminalColor
Subtle lipgloss.Color Subtle lipgloss.TerminalColor
// Semantic // Semantic
Success lipgloss.Color Success lipgloss.TerminalColor
Warning lipgloss.Color Warning lipgloss.TerminalColor
Stale lipgloss.Color Stale lipgloss.TerminalColor
Danger lipgloss.Color Danger lipgloss.TerminalColor
Info lipgloss.Color Info lipgloss.TerminalColor
Accent lipgloss.Color Accent lipgloss.TerminalColor
Purple lipgloss.Color Purple lipgloss.TerminalColor
// Table // Table
ZebraBg lipgloss.Color ZebraBg lipgloss.TerminalColor
// Selection // Selection
SelectedFg lipgloss.Color SelectedFg lipgloss.TerminalColor
SelectedBg lipgloss.Color SelectedBg lipgloss.TerminalColor
} }
var themes = []Theme{ var themes = []Theme{
@@ -46,107 +54,107 @@ var themes = []Theme{
var themeFlexokiDark = Theme{ var themeFlexokiDark = Theme{
Name: "Flexoki Dark", Name: "Flexoki Dark",
Bg: "#1C1B1A", Bg: cc("#1C1B1A", ""),
Surface: "#282726", Surface: cc("#282726", ""),
Panel: "#343331", Panel: cc("#343331", ""),
Border: "#575653", Border: cc("#575653", "8"),
Fg: "#CECDC3", Fg: cc("#CECDC3", "15"),
Muted: "#878580", Muted: cc("#878580", "7"),
Subtle: "#6F6E69", Subtle: cc("#6F6E69", "8"),
Success: "#879A39", Success: cc("#879A39", "10"),
Warning: "#D0A215", Warning: cc("#D0A215", "11"),
Stale: "#DA702C", Stale: cc("#DA702C", "3"),
Danger: "#D14D41", Danger: cc("#D14D41", "9"),
Info: "#4385BE", Info: cc("#4385BE", "12"),
Accent: "#3AA99F", Accent: cc("#3AA99F", "14"),
Purple: "#8B7EC8", Purple: cc("#8B7EC8", "13"),
ZebraBg: "#222120", ZebraBg: cc("#222120", ""),
SelectedFg: "#FFFCF0", SelectedFg: cc("#FFFCF0", "15"),
SelectedBg: "#403E3C", SelectedBg: cc("#403E3C", "4"),
} }
var themeTokyoNight = Theme{ var themeTokyoNight = Theme{
Name: "Tokyo Night", Name: "Tokyo Night",
Bg: "#1a1b26", Bg: cc("#1a1b26", ""),
Surface: "#24283b", Surface: cc("#24283b", ""),
Panel: "#292e42", Panel: cc("#292e42", ""),
Border: "#3b4261", Border: cc("#3b4261", "8"),
Fg: "#c0caf5", Fg: cc("#c0caf5", "15"),
Muted: "#a9b1d6", Muted: cc("#a9b1d6", "7"),
Subtle: "#565f89", Subtle: cc("#565f89", "8"),
Success: "#9ece6a", Success: cc("#9ece6a", "10"),
Warning: "#e0af68", Warning: cc("#e0af68", "11"),
Stale: "#ff9e64", Stale: cc("#ff9e64", "3"),
Danger: "#f7768e", Danger: cc("#f7768e", "9"),
Info: "#7aa2f7", Info: cc("#7aa2f7", "12"),
Accent: "#7dcfff", Accent: cc("#7dcfff", "14"),
Purple: "#bb9af7", Purple: cc("#bb9af7", "13"),
ZebraBg: "#1c1d28", ZebraBg: cc("#1c1d28", ""),
SelectedFg: "#c0caf5", SelectedFg: cc("#c0caf5", "15"),
SelectedBg: "#292e42", SelectedBg: cc("#292e42", "4"),
} }
var themeGruvbox = Theme{ var themeGruvbox = Theme{
Name: "Gruvbox", Name: "Gruvbox",
Bg: "#282828", Bg: cc("#282828", ""),
Surface: "#3c3836", Surface: cc("#3c3836", ""),
Panel: "#504945", Panel: cc("#504945", ""),
Border: "#665c54", Border: cc("#665c54", "8"),
Fg: "#ebdbb2", Fg: cc("#ebdbb2", "15"),
Muted: "#bdae93", Muted: cc("#bdae93", "7"),
Subtle: "#7c6f64", Subtle: cc("#7c6f64", "8"),
Success: "#b8bb26", Success: cc("#b8bb26", "10"),
Warning: "#fabd2f", Warning: cc("#fabd2f", "11"),
Stale: "#fe8019", Stale: cc("#fe8019", "3"),
Danger: "#fb4934", Danger: cc("#fb4934", "9"),
Info: "#83a598", Info: cc("#83a598", "12"),
Accent: "#8ec07c", Accent: cc("#8ec07c", "14"),
Purple: "#d3869b", Purple: cc("#d3869b", "13"),
ZebraBg: "#2a2a2a", ZebraBg: cc("#2a2a2a", ""),
SelectedFg: "#fbf1c7", SelectedFg: cc("#fbf1c7", "15"),
SelectedBg: "#504945", SelectedBg: cc("#504945", "4"),
} }
var themeCatppuccinMocha = Theme{ var themeCatppuccinMocha = Theme{
Name: "Catppuccin Mocha", Name: "Catppuccin Mocha",
Bg: "#1e1e2e", Bg: cc("#1e1e2e", ""),
Surface: "#313244", Surface: cc("#313244", ""),
Panel: "#45475a", Panel: cc("#45475a", ""),
Border: "#585b70", Border: cc("#585b70", "8"),
Fg: "#cdd6f4", Fg: cc("#cdd6f4", "15"),
Muted: "#a6adc8", Muted: cc("#a6adc8", "7"),
Subtle: "#6c7086", Subtle: cc("#6c7086", "8"),
Success: "#a6e3a1", Success: cc("#a6e3a1", "10"),
Warning: "#f9e2af", Warning: cc("#f9e2af", "11"),
Stale: "#fab387", Stale: cc("#fab387", "3"),
Danger: "#f38ba8", Danger: cc("#f38ba8", "9"),
Info: "#89b4fa", Info: cc("#89b4fa", "12"),
Accent: "#94e2d5", Accent: cc("#94e2d5", "14"),
Purple: "#cba6f7", Purple: cc("#cba6f7", "13"),
ZebraBg: "#232334", ZebraBg: cc("#232334", ""),
SelectedFg: "#cdd6f4", SelectedFg: cc("#cdd6f4", "15"),
SelectedBg: "#45475a", SelectedBg: cc("#45475a", "4"),
} }
var themeNord = Theme{ var themeNord = Theme{
Name: "Nord", Name: "Nord",
Bg: "#2e3440", Bg: cc("#2e3440", ""),
Surface: "#3b4252", Surface: cc("#3b4252", ""),
Panel: "#434c5e", Panel: cc("#434c5e", ""),
Border: "#4c566a", Border: cc("#4c566a", "8"),
Fg: "#d8dee9", Fg: cc("#d8dee9", "15"),
Muted: "#d8dee9", Muted: cc("#d8dee9", "7"),
Subtle: "#4c566a", Subtle: cc("#4c566a", "8"),
Success: "#a3be8c", Success: cc("#a3be8c", "10"),
Warning: "#ebcb8b", Warning: cc("#ebcb8b", "11"),
Stale: "#d08770", Stale: cc("#d08770", "3"),
Danger: "#bf616a", Danger: cc("#bf616a", "9"),
Info: "#81a1c1", Info: cc("#81a1c1", "12"),
Accent: "#88c0d0", Accent: cc("#88c0d0", "14"),
Purple: "#b48ead", Purple: cc("#b48ead", "13"),
ZebraBg: "#323845", ZebraBg: cc("#323845", ""),
SelectedFg: "#eceff4", SelectedFg: cc("#eceff4", "15"),
SelectedBg: "#434c5e", SelectedBg: cc("#434c5e", "4"),
} }
func (t Theme) HuhTheme() *huh.Theme { func (t Theme) HuhTheme() *huh.Theme {
internal/tui/tui.go
+6 -6
View File
@@ -30,9 +30,9 @@ type styles struct {
activeTab lipgloss.Style activeTab lipgloss.Style
inactiveTab lipgloss.Style inactiveTab lipgloss.Style
sparkSuccess string sparkSuccess lipgloss.TerminalColor
sparkWarning string sparkWarning lipgloss.TerminalColor
sparkDanger string sparkDanger lipgloss.TerminalColor
tableHeaderStyle lipgloss.Style tableHeaderStyle lipgloss.Style
tableCellStyle lipgloss.Style tableCellStyle lipgloss.Style
@@ -55,9 +55,9 @@ func newStyles(t Theme) *styles {
activeTab: lipgloss.NewStyle().Background(t.Surface).Foreground(t.Accent).Bold(true).Padding(0, 1), activeTab: lipgloss.NewStyle().Background(t.Surface).Foreground(t.Accent).Bold(true).Padding(0, 1),
inactiveTab: lipgloss.NewStyle().Padding(0, 1).Foreground(t.Muted), inactiveTab: lipgloss.NewStyle().Padding(0, 1).Foreground(t.Muted),
sparkSuccess: string(t.Success), sparkSuccess: t.Success,
sparkWarning: string(t.Warning), sparkWarning: t.Warning,
sparkDanger: string(t.Danger), sparkDanger: t.Danger,
tableHeaderStyle: lipgloss.NewStyle().Foreground(t.Accent).Bold(true).Padding(0, 1), tableHeaderStyle: lipgloss.NewStyle().Foreground(t.Accent).Bold(true).Padding(0, 1),
tableCellStyle: lipgloss.NewStyle().Padding(0, 1), tableCellStyle: lipgloss.NewStyle().Padding(0, 1),
internal/tui/view_detail.go
+2 -2
View File
@@ -215,7 +215,7 @@ func (m Model) viewDetailPanel() string {
b.WriteString(m.divider() + "\n") b.WriteString(m.divider() + "\n")
if site.Type == "push" { if site.Type == "push" {
b.WriteString(" " + m.zones.Mark("spark-heartbeat", m.heartbeatSparkline(hist.Statuses, detailSparkWidth, ""))) b.WriteString(" " + m.zones.Mark("spark-heartbeat", m.heartbeatSparkline(hist.Statuses, detailSparkWidth, nil)))
if len(hist.Statuses) > 0 { if len(hist.Statuses) > 0 {
up := 0 up := 0
for _, s := range hist.Statuses { for _, s := range hist.Statuses {
@@ -228,7 +228,7 @@ func (m Model) viewDetailPanel() string {
up, len(hist.Statuses)) up, len(hist.Statuses))
} }
} else { } else {
b.WriteString(" " + m.zones.Mark("spark-latency", m.latencySparkline(hist.Latencies, hist.Statuses, detailSparkWidth, ""))) b.WriteString(" " + m.zones.Mark("spark-latency", m.latencySparkline(hist.Latencies, hist.Statuses, detailSparkWidth, nil)))
var minL, maxL, total time.Duration var minL, maxL, total time.Duration
count := 0 count := 0
for i, l := range hist.Latencies { for i, l := range hist.Latencies {