Unexpected ANSI styling in GIF output

[picatz]

Suggested by @muesli, I tried using vhs to record a demo GIF for a project I'm working on. It didn't come out quite right, and the code isn't open source yet (very soon!). But, I figured I'd open an issue.

Output demo.gif

Set FontSize 32
Set Width 1920
Set Height 1080

Type "./hal"
Tab
Sleep 4s
Enter
Sleep 4s
Enter
Sleep 4s
Type "Write a Go program to print hello world"
Sleep 3s
Escape
Sleep 8s

Which generated this GIF:

I would expect to see something like this:

1. The list view title is showing as a full bar in the GIF, but not in the CLI when I look at it. This is just using the list bubble. 2. The status bar isn't showing fully when using a space character and a foreground lipgloss color for empty space. 3. The characters in the status bar are wonky, not properly spaced.

Using version 0.3.0.

[picatz]

This is the code for the status bar that isn't rendering properly: https://github.com/picatz/hal/blob/75379b00c27855fe3c217320a46397a732a6fe6c/statusbar.go#L52-L81

[maaslalani]

Thanks so much @picatz! Going to take a look soon! 😄

[picatz]

While continuing to work on HAL tonight, the status bar being hidden thing seemed to resolve itself, mostly?

But, the list view title is still rendering wonky. So is the spacing in the status bar "blocks" showing the messages/tokens/spinner/etc.

📄 https://github.com/picatz/hal/blob/5a17e974b659a7714b91f61f837450d010ee3d24/pkg/statusbar/model.go#L87-L123

[maaslalani]

This is a strange one, looks like it's having problems when the first cell is a space (non-character) and if it has a background color. I think it might be due to some environment variables or width issues in VHS or ttyd. I will play around some more and debug this a little. I'll see if I can produce a minimal example.

[maaslalani]

I believe it is related to this issue: https://github.com/xtermjs/xterm.js/issues/4120

[picatz]

Interesting! So ttyd needs to be bumped to xterm 5.2.0 (when it's released) for this to be fixed?

https://github.com/tsl0922/ttyd/blob/a767971836c451fbc22e23fd01f78d1b372e9207/html/yarn.lock#L10089-L10094

[maaslalani]

Yes, I believe when 5.2.0 is released this should solve the issue. This issue #256 was also causing problems and I was able to reproduce it without VHS (using only ttyd -t rendererType=canvas) so I believe issue with xterm should be the fix.

[maaslalani]

The bug is reproducible without VHS:

ttyd -t rendererType=canvas zsh

[maaslalani]

It is working with -t rendererType=webgl so I believe that the fix merged into xterm.js will make everything work again with canvas. We use canvas rendering in VHS because it is much faster to stream the images instead of using browser screenshotting.

[picatz]

Awesome!

[maaslalani]

Great news! If you use vhs@main:

go install github.com/charmbracelet/vhs@main

and ttyd@master:

brew install ttyd --HEAD

this issue should be fixed!

Feel free to reopen this issue if you still encounter problems! Thank you so much for reporting this ❤️