Skip to content

fix(tui): compose help overlay through the viewport overlay pipeline#421

Merged
kevincodex1 merged 4 commits into
Gitlawb:mainfrom
N1xev:fix/help-overlay
Jul 3, 2026
Merged

fix(tui): compose help overlay through the viewport overlay pipeline#421
kevincodex1 merged 4 commits into
Gitlawb:mainfrom
N1xev:fix/help-overlay

Conversation

@N1xev

@N1xev N1xev commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

exactly like how other popups works.

before:

image

after:

image

Summary

Linked issue

Fixes #419

Checklist

  • The linked issue already has the issue-approved label.
  • go build ./..., go vet ./..., and go test ./... pass locally.
  • gofmt clean.
  • Tests added/updated for the change (and run under -race where relevant).
  • UI changes include screenshots or a short recording where possible.

Summary by CodeRabbit

  • Bug Fixes
    • Integrated the keyboard shortcuts help overlay into the main transcript overlay flow so it layers over the chat UI instead of replacing it.
    • Improved overlay layout: the right-side context sidebar is hidden while the help overlay is active, and overlay vertical centering is handled by the overall screen composition.
  • Tests
    • Added tests to verify the help overlay composites on top of existing chat elements and that transcript content still peeks through behind the centered overlay.

@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 85351b22-9e5c-4c18-b376-4ac12b463a42

📥 Commits

Reviewing files that changed from the base of the PR and between 6ee19c5 and ede6b31.

📒 Files selected for processing (1)
  • internal/tui/keybinding_help_test.go
🚧 Files skipped from review as they are similar to previous changes (1)
  • internal/tui/keybinding_help_test.go

Walkthrough

The help overlay now composes over the transcript view instead of replacing the full TUI. Its renderer signature is simplified, the sidebar is hidden while the overlay is active, and tests verify chat and transcript content remain visible behind it.

Changes

Help overlay compositing

Layer / File(s) Summary
Simplify help overlay renderer
internal/tui/keybinding_help.go
renderKeybindingHelpOverlay no longer takes a height argument, and its comment now says vertical centering is handled by compositing.
Compose help overlay through transcript view
internal/tui/model.go, internal/tui/sidebar.go
View() routes active helpOverlay states through transcriptView(), transcriptView() adds helpOverlayContent to the viewport overlay selection, and sidebarAvailable() hides the sidebar while helpOverlay is active.
Verify overlay compositing behavior
internal/tui/keybinding_help_test.go
New tests confirm the help overlay appears over chat chrome and transcript content remains visible behind it.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Model
  participant TranscriptView
  participant Sidebar
  Model->>TranscriptView: View() routes helpOverlay to transcriptView()
  TranscriptView->>TranscriptView: select helpOverlayContent as viewportOverlay
  Model->>Sidebar: sidebarAvailable() checks m.helpOverlay
  Sidebar-->>Model: hide right-hand sidebar
Loading

Possibly related PRs

  • Gitlawb/zero#168: Both PRs change internal/tui/model.go transcript overlay composition logic.
  • Gitlawb/zero#300: Both PRs adjust sidebar gating tied to overlay visibility.

Suggested reviewers: anandh8x, gnanam1990, Vasanthdev2004

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed Title clearly matches the main change: composing the help overlay through the viewport overlay pipeline.
Linked Issues check ✅ Passed The code and tests implement the issue: help overlay now composes over the existing TUI like other popups.
Out of Scope Changes check ✅ Passed The changes stay focused on the help overlay composition fix and related regression tests, with no obvious unrelated scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
internal/tui/model.go (1)

2198-2222: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider adding a regression test for the help+subchat interaction.

Since the subchat early-return silently drops the help overlay (see above), a small test asserting the expected behavior (either "help renders in subchat" or "help is deferred/no-op in subchat") would lock in intent and catch future regressions in this compositing switch.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@internal/tui/model.go` around lines 2198 - 2222, The overlay compositing in
m.render() currently has ambiguous behavior when subchat triggers an early
return and helpOverlayContent is involved, so add a regression test that locks
in the intended help+subchat interaction. Use the existing overlay selection
logic around helpOverlayContent, suggestionOverlay, providerOverlay,
mcpAddOverlay, mcpOverlay, and pickerOverlay to verify whether help should
render in subchat or be deferred/no-op, and assert that behavior explicitly so
future changes don’t silently drop the help overlay.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@internal/tui/model.go`:
- Around line 2198-2222: The overlay compositing in m.render() currently has
ambiguous behavior when subchat triggers an early return and helpOverlayContent
is involved, so add a regression test that locks in the intended help+subchat
interaction. Use the existing overlay selection logic around helpOverlayContent,
suggestionOverlay, providerOverlay, mcpAddOverlay, mcpOverlay, and pickerOverlay
to verify whether help should render in subchat or be deferred/no-op, and assert
that behavior explicitly so future changes don’t silently drop the help overlay.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fbc1b4b3-b34c-4d4e-9f40-27981ef48ced

📥 Commits

Reviewing files that changed from the base of the PR and between b5a78dc and e4cda45.

📒 Files selected for processing (3)
  • internal/tui/keybinding_help.go
  • internal/tui/model.go
  • internal/tui/sidebar.go

@kevincodex1 kevincodex1 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice one! thank you so much

@kevincodex1

Copy link
Copy Markdown
Contributor

kindly please check the failing test

@N1xev

N1xev commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

kindly please check the failing test

done! it was the formatting CI/CD step

@gnanam1990

Copy link
Copy Markdown
Collaborator

Thanks for this, @N1xev — and for the precise root-cause writeup in the issue. Routing the overlay through the same viewportOverlay path as the other popups, and suppressing the sidebar via sidebarAvailable() so it renders full-width like the model picker, is exactly the right shape for this. I've closed my own PR (#420) in favor of this one.

The one thing #420 carried that this doesn't is a regression test that pins the fix. The existing help tests cover close/swallow/content, but none of them assert that the chat survives behind the overlay — so a future refactor could silently bring back the full-screen blank without any test going red.

Here are two tests that cover exactly that. I checked out this branch and ran them against your implementation — both pass (go test ./internal/tui/), so they should drop straight into internal/tui/keybinding_help_test.go:

Two regression tests (verified against this branch)
// #419: the `?` help overlay must render ON TOP of the chat (like the model
// picker), not REPLACE the whole screen. The old full-screen replace produced
// only the centered shortcut block on a blank canvas — no title bar, no
// composer. With the overlay open, surrounding chat chrome that is NOT covered
// by the centered box (the model title bar at top, the composer at bottom) must
// still be present alongside "Keyboard Shortcuts".
func TestHelpOverlayCompositesOverChatNotReplacingIt(t *testing.T) {
	m := newModel(context.Background(), Options{ModelName: "gpt-4o"})
	m.width = 100
	m.height = 40
	m.altScreen = true

	base := plainRender(t, m.View()) // no overlay: baseline chrome
	m.helpOverlay = true
	over := plainRender(t, m.View())

	if !strings.Contains(over, "Keyboard Shortcuts") {
		t.Fatalf("help overlay not rendered:\n%s", over)
	}
	// Chrome that renders in the baseline (and sits outside the centered overlay
	// box) must survive behind the overlay. The full-screen replace showed none.
	for _, marker := range []string{"gpt-4o", "describe a task"} {
		if !strings.Contains(base, marker) {
			t.Fatalf("precondition: baseline chat should contain %q:\n%s", marker, base)
		}
		if !strings.Contains(over, marker) {
			t.Fatalf("#419: help replaced the chat instead of overlaying it; %q is gone:\n%s", marker, over)
		}
	}
}

// A populated transcript row also survives behind the overlay (peeking out to
// the left of the centered box), proving the chat body — not just the chrome —
// is composited under the overlay rather than discarded.
func TestHelpOverlayKeepsTranscriptBodyBehindIt(t *testing.T) {
	m := newModel(context.Background(), Options{ModelName: "gpt-4o"})
	m.width = 120
	m.height = 40
	m.altScreen = true
	m.transcript = appendTranscriptRow(m.transcript, transcriptRow{kind: rowUser, text: "hello there this is a chat line"})
	m.helpOverlay = true

	view := plainRender(t, m.View())
	if !strings.Contains(view, "Keyboard Shortcuts") {
		t.Fatalf("help overlay not rendered:\n%s", view)
	}
	// The start of the transcript line peeks to the left of the centered box.
	if !strings.Contains(view, "hello") {
		t.Fatalf("#419: transcript body was replaced by the help overlay:\n%s", view)
	}
}

The first asserts the title bar + composer survive alongside "Keyboard Shortcuts"; the second that a transcript line peeks out beside the centered box. Both fail against the old full-screen replace and pass with your fix. Looks good to me once something like this is in.

@N1xev

N1xev commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for this, @N1xev — and for the precise root-cause writeup in the issue. Routing the overlay through the same viewportOverlay path as the other popups, and suppressing the sidebar via sidebarAvailable() so it renders full-width like the model picker, is exactly the right shape for this. I've closed my own PR (#420) in favor of this one.

The one thing #420 carried that this doesn't is a regression test that pins the fix. The existing help tests cover close/swallow/content, but none of them assert that the chat survives behind the overlay — so a future refactor could silently bring back the full-screen blank without any test going red.

Here are two tests that cover exactly that. I checked out this branch and ran them against your implementation — both pass (go test ./internal/tui/), so they should drop straight into internal/tui/keybinding_help_test.go:
Two regression tests (verified against this branch)

The first asserts the title bar + composer survive alongside "Keyboard Shortcuts"; the second that a transcript line peeks out beside the centered box. Both fail against the old full-screen replace and pass with your fix. Looks good to me once something like this is in.

thanks! i've added the regression tests and pushed them.

@kevincodex1
kevincodex1 merged commit 5b2b4de into Gitlawb:main Jul 3, 2026
7 checks passed

@gnanam1990 gnanam1990 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving — this is the right fix for #419. Routing the overlay through the same viewportOverlay path as the pickers/wizards, and suppressing the sidebar via sidebarAvailable() so it renders full-width, is exactly the "like the other popups" behavior the issue asked for.

The only ask before merge is the regression test I left in the comment above, so the composite-not-replace behavior stays guarded against a future refactor. Thanks for the clean root-cause diagnosis and the fix.

@N1xev

N1xev commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

Approving — this is the right fix for #419. Routing the overlay through the same viewportOverlay path as the pickers/wizards, and suppressing the sidebar via sidebarAvailable() so it renders full-width, is exactly the "like the other popups" behavior the issue asked for.

The only ask before merge is the regression test I left in the comment above, so the composite-not-replace behavior stays guarded against a future refactor. Thanks for the clean root-cause diagnosis and the fix.

i added them and pushed, check them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

the help overlay hides the whole screen

3 participants