fix(tui): help dialog visuals

1 files changed, 35 insertions, 9 deletions

diff --git a/packages/tui/internal/components/dialog/help.go b/packages/tui/internal/components/dialog/help.go
index 777e35d3f..78cbd7042 100644
--- a/packages/tui/internal/components/dialog/help.go
+++ b/packages/tui/internal/components/dialog/help.go
@@ -1,6 +1,7 @@
 package dialog
 
 import (
+	"github.com/charmbracelet/bubbles/v2/viewport"
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/sst/opencode/internal/app"
 	commandsComponent "github.com/sst/opencode/internal/components/commands"
@@ -15,28 +16,47 @@ type helpDialog struct {
 	modal             *modal.Modal
 	app               *app.App
 	commandsComponent commandsComponent.CommandsComponent
+	viewport          viewport.Model
 }
 
 func (h *helpDialog) Init() tea.Cmd {
-	return h.commandsComponent.Init()
+	return tea.Batch(
+		h.commandsComponent.Init(),
+		h.viewport.Init(),
+	)
 }
 
 func (h *helpDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		h.width = msg.Width
 		h.height = msg.Height
-		h.commandsComponent.SetSize(msg.Width, msg.Height)
+		// Set viewport size with some padding for the modal
+		h.viewport = viewport.New(viewport.WithWidth(msg.Width-4), viewport.WithHeight(msg.Height-6))
+		h.commandsComponent.SetSize(msg.Width-4, msg.Height-6)
 	}
-	
-	_, cmd := h.commandsComponent.Update(msg)
-	return h, cmd
+
+	// Update commands component first to get the latest content
+	_, cmdCmd := h.commandsComponent.Update(msg)
+	cmds = append(cmds, cmdCmd)
+
+	// Update viewport content
+	h.viewport.SetContent(h.commandsComponent.View())
+
+	// Update viewport
+	var vpCmd tea.Cmd
+	h.viewport, vpCmd = h.viewport.Update(msg)
+	cmds = append(cmds, vpCmd)
+
+	return h, tea.Batch(cmds...)
 }
 
 func (h *helpDialog) View() string {
 	t := theme.CurrentTheme()
 	h.commandsComponent.SetBackgroundColor(t.BackgroundElement())
-	return h.commandsComponent.View()
+	return h.viewport.View()
 }
 
 func (h *helpDialog) Render(background string) string {
@@ -52,9 +72,15 @@ type HelpDialog interface {
 }
 
 func NewHelpDialog(app *app.App) HelpDialog {
+	vp := viewport.New(viewport.WithHeight(12))
 	return &helpDialog{
-		app:               app,
-		commandsComponent: commandsComponent.New(app, commandsComponent.WithBackground(theme.CurrentTheme().BackgroundElement())),
-		modal:             modal.New(modal.WithTitle("Help")),
+		app: app,
+		commandsComponent: commandsComponent.New(app,
+			commandsComponent.WithBackground(theme.CurrentTheme().BackgroundElement()),
+			commandsComponent.WithShowAll(true),
+			commandsComponent.WithKeybinds(true),
+		),
+		modal:    modal.New(modal.WithTitle("Help")),
+		viewport: vp,
 	}
 }