Bubbletea table and Lip Gloss color do not work with ssh.Channel.

[anhcuongdev]

Here is my sample code modified to use instead of default io.Reader, io.Writer to crypto/ssh Channel. Table seems to work fine but Table Style cannot accept Lip Gloss color code.

package proxy

import (
	"fmt"
	"github.com/charmbracelet/bubbles/table"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
	"github.com/seknox/ssh"
)

var baseStyle = lipgloss.NewStyle().
	BorderStyle(lipgloss.RoundedBorder()).
	BorderForeground(lipgloss.Color("240"))

type model struct {
	table table.Model
}

func (m model) Init() tea.Cmd { return nil }

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var cmd tea.Cmd
	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "esc":
			if m.table.Focused() {
				m.table.Blur()
			} else {
				m.table.Focus()
			}
		case "q", "ctrl+c":
			return m, tea.Quit
		case "enter":
			return m, tea.Batch(
				tea.Printf("Let's go to %s!", m.table.SelectedRow()[1]),
			)
		}
	}
	m.table, cmd = m.table.Update(msg)
	return m, cmd
}

func (m model) View() string {
	return baseStyle.Render(m.table.View()) + "\n"
}
func (s *Session) showTable(channel ssh.Channel) {
	columns := []table.Column{
		{Title: "Rank", Width: 4},
		{Title: "City", Width: 10},
		{Title: "Country", Width: 10},
		{Title: "Population", Width: 10},
	}

	rows := []table.Row{
		{"1", "Tokyo", "Japan", "37,274,000"},
		{"2", "Delhi", "India", "32,065,760"},
		{"3", "Shanghai", "China", "28,516,904"},
		{"4", "Dhaka", "Bangladesh", "22,478,116"},
		{"5", "São Paulo", "Brazil", "22,429,800"},
	}
	t := table.New(
		table.WithColumns(columns),
		table.WithRows(rows),
		table.WithFocused(true),
		table.WithHeight(7),
	)

	style := table.DefaultStyles()
	style.Header = style.Header.
		BorderStyle(lipgloss.NormalBorder()).
		BorderForeground(lipgloss.Color("240")).
		BorderBottom(true).
		Bold(false)
	style.Selected = style.Selected.
		Foreground(lipgloss.Color("229")).
		Background(lipgloss.Color("57")).
		Bold(false)
	t.SetStyles(style)

	m := model{t}
	if _, err := tea.NewProgram(m, tea.WithInput(channel), tea.WithOutput(channel)).Run(); err != nil {
		fmt.Println("Error running program:", err)
	}
}

[kalensk]

I think I am running into a similar issue. I am using a table model like you have in your example, but instead not calling tea.WithInput() or tea.WithOutput(). Rather I am simply ssh'ing into a server and running my bubble tea program. However, it is exhibiting the same issues as you are noting.

Any ideas?

[bnsmcx]

table.DefaultStyles() creates new renderers, you need a renderer created from the ssh session. The bubbletea.MakeRenderer(s) function will create one for you. Relevant note here.

You'll then need to set the renderer explicitly in your table styles:

        renderer := bubbletea.MakeRenderer(s)

	style := table.DefaultStyles()
	style.Header = style.Header.
                Renderer(renderer).  // Like this
		BorderStyle(lipgloss.NormalBorder()).
		BorderForeground(lipgloss.Color("240")).
		BorderBottom(true).
		Bold(false)
	style.Selected = style.Selected.
                Renderer(renderer).  // And this
		Foreground(lipgloss.Color("229")).
		Background(lipgloss.Color("57")).
		Bold(false)
	t.SetStyles(style)

[bashbunni]

SSH connections won't send terminal capabilities by default, which is why the Bubble Tea application is automatically downgrading the colours because it doesn't know what the provided stdout color capabilities are (the ssh connection).

That said, we have a more pure implementation of Lip Gloss in v2 alpha right now that should fix this for you. You can force a color profile to use when you run the program, so try setting that to TrueColor in your case and it may solve this for you.

I'm not sure what the use case is here, but you may also have a better time using wish to facilitate ssh connectivity for Bubble Tea apps. Let me know how that goes and if anything is unclear :)

[bashbunni]

I'm going to convert this to a discussion as it's more of a usage question at the moment. Should that change, I can reopen this as an issue for us to track and fix :)