Redesign TUI shared header and embed the GitHub logo as an image - #143
Merged
Conversation
Rework the shared gh-stack header (used by `view` and `modify`, and reused by `submit` later in this stack) for a cleaner, more responsive look, and replace the braille/ASCII Invertocat with a real image of the GitHub mark. - Logo: embed the Invertocat PNG with go:embed and draw it via an inline- image protocol (kitty or iTerm2). It is image-or-nothing: when no protocol is available, stdout is not a TTY, or we are inside tmux/screen, no logo is drawn and the text falls back to the normal left padding. Detection is environment-based and cached so it never blocks the TUI, and a fixed kitty image id lets the header clear or replace the logo in place instead of leaving copies behind. - Layout: place the logo in the top-left corner beside the title and version, with the stack-info lines left-aligned beneath it on the same left margin. Size the box to its content for each view so there is no trailing empty row. - Responsiveness: hide the logo progressively — first when the viewport is too narrow, then a little before the rest of the header at short heights, where a vertical resize could otherwise leave a ghost of the inline image. - Add unit tests for the header's responsive thresholds.
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request redesigns the shared TUI header used across view and modify by replacing the prior ASCII/braille art with an embedded GitHub Invertocat PNG rendered via terminal inline-image protocols, while also making the header height responsive to its configured content.
Changes:
- Introduces inline-image logo rendering (kitty/iTerm2) with environment-based detection,
go:embedPNG, and explicit clearing to prevent lingering kitty graphics. - Refactors header layout/height logic so the header box sizes to its content and click/scroll computations use the computed header height.
- Adds unit tests covering viewport thresholds for hiding the logo.
Show a summary per file
| File | Description |
|---|---|
| internal/tui/stackview/model.go | Uses computed header height for click/scroll math and clears the inline logo when the header is hidden. |
| internal/tui/modifyview/model.go | Uses computed header height for click/scroll math and clears the inline logo when the header is hidden. |
| internal/tui/shared/render.go | Updates click handling API to accept headerHeight instead of a showHeader boolean. |
| internal/tui/shared/logo.go | Adds embedded PNG logo rendering and protocol detection/clearing logic. |
| internal/tui/shared/header.go | Reworks header layout to support the inline logo, progressive disclosure, and dynamic content-driven height. |
| internal/tui/shared/header_test.go | Adds tests for logo viewport-fit thresholds and ordering vs header visibility. |
| go.mod | Adds dependencies needed for inline-image detection/TTY checks. |
| go.sum | Records checksums for newly introduced dependencies. |
Copilot's findings
- Files reviewed: 7/9 changed files
- Comments generated: 3
Follow-up to review feedback on the shared-header redesign: - Remove the HeaderHeight constant. Nothing referenced it (callers compute height via HeaderHeightFor), and its doc described a "maximum" that HeaderHeightFor does not actually enforce, so the comment was misleading. - In the view and modify View() methods, build the header config once and reuse it for both RenderHeader and the height reservation instead of rebuilding it twice per frame. The click/scroll handlers keep deriving the height from the same config, so the header's dimensions remain a single source of truth.
Lukeghenco
approved these changes
Jun 24, 2026
Lukeghenco
left a comment
Contributor
There was a problem hiding this comment.
Changes look good. Removing the ASCII art makes this less endearing though and removes the whimsicalness from the DX here. I wish we could just 1/2 size the character count on the ASCII art instead though 😢
ktravers
approved these changes
Jun 24, 2026
ktravers
left a comment
There was a problem hiding this comment.
Very cool, never realized you could just use a png, but it makes sense now!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rework the shared gh-stack header (used by
viewandmodify, and reusedby
submitlater in this stack) for a cleaner, more responsive look, andreplace the braille/ASCII Invertocat with a real image of the GitHub mark.
image protocol (kitty or iTerm2). It is image-or-nothing: when no protocol
is available, stdout is not a TTY, or we are inside tmux/screen, no logo is
drawn and the text falls back to the normal left padding. Detection is
environment-based and cached so it never blocks the TUI, and a fixed kitty
image id lets the header clear or replace the logo in place instead of
leaving copies behind.
with the stack-info lines left-aligned beneath it on the same left margin.
Size the box to its content for each view so there is no trailing empty row.
narrow, then a little before the rest of the header at short heights, where
a vertical resize could otherwise leave a ghost of the inline image.