feat: scrollable Help page with j/k navigation

When content overflows the terminal height, shows a page of lines plus
a "↓ j/k to scroll" / "↑ j/k to scroll" indicator at the bottom.
Theme changes preserve scroll position via WithTheme pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: gitcoder89431

internal/app/update.go

@@ -352,7 +352,11 @@ func (m *Model) updateDerivedScreens() {
 		DeviceName:     m.deviceName,
 		DeviceID:       m.deviceID,
 	}, m.theme)
-	m.screens["help"] = screens.NewHelp(m.keys.FullHelp(), m.theme)
+	if s, ok := m.screens["help"].(screens.Help); ok {
+		m.screens["help"] = s.WithTheme(m.theme)
+	} else {
+		m.screens["help"] = screens.NewHelp(m.keys.FullHelp(), m.theme)
+	}
 	if s, ok := m.screens["activity"].(screens.Activity); ok {
 		m.screens["activity"] = s.WithTheme(m.theme)
 	} else {

internal/screens/help.go

@@ -10,17 +10,33 @@ import (
 )
 
 type Help struct {
-	bindings [][]key.Binding
-	theme    theme.Theme
+	bindings     [][]key.Binding
+	theme        theme.Theme
+	scrollOffset int
 }
 
 func NewHelp(bindings [][]key.Binding, t theme.Theme) Help {
 	return Help{bindings: bindings, theme: t}
 }
 
+func (h Help) WithTheme(t theme.Theme) Help {
+	h.theme = t
+	return h
+}
+
 func (h Help) Init() tea.Cmd { return nil }
 
-func (h Help) Update(msg tea.Msg) (Screen, tea.Cmd) { return h, nil }
+func (h Help) Update(msg tea.Msg) (Screen, tea.Cmd) {
+	if msg, ok := msg.(tea.KeyPressMsg); ok {
+		switch msg.String() {
+		case "up", "k":
+			h.scrollOffset = max(0, h.scrollOffset-1)
+		case "down", "j":
+			h.scrollOffset++
+		}
+	}
+	return h, nil
+}
 
 func (h Help) View(width, height int) string {
 	rule := func(label string) string {
@@ -29,42 +45,74 @@ func (h Help) View(width, height int) string {
 		return h.theme.Title.Render(label) + h.theme.PaletteAccent.Render(" "+fill)
 	}
 	binding := func(k, desc string) string {
-		return "  " + h.theme.Accent.Render(k) + "  " + h.theme.Muted.Render(desc) + "\n"
+		return "  " + h.theme.Accent.Render(k) + "  " + h.theme.Muted.Render(desc)
 	}
 
-	var b strings.Builder
-	b.WriteString(rule("Global keys") + "\n\n")
+	var lines []string
+	add := func(s string) { lines = append(lines, s) }
+
+	add(rule("Global keys"))
+	add("")
 	for _, group := range h.bindings {
 		for _, kb := range group {
 			help := kb.Help()
-			b.WriteString(binding(help.Key, help.Desc))
+			add(binding(help.Key, help.Desc))
 		}
 	}
 
-	b.WriteString("\n" + rule("Dashboard") + "\n\n")
-	b.WriteString(binding("j/k", "navigate files"))
-	b.WriteString(binding("enter", "open selected file/folder in terminal"))
-	b.WriteString(binding("r", "refresh + trigger rescan"))
-
-	b.WriteString("\n" + rule("Connect") + "\n\n")
-	b.WriteString(binding("j/k", "navigate devices"))
-	b.WriteString(binding("p", "pair a new device by pasting its ID"))
-	b.WriteString(binding("a", "accept a pending device"))
-	b.WriteString(binding("i", "ignore a pending device"))
-	b.WriteString(binding("d", "remove an approved device"))
-	b.WriteString(binding("r", "rename a device"))
-
-	b.WriteString("\n" + rule("Settings") + "\n\n")
-	b.WriteString(binding("c", "copy this device's ID to clipboard"))
-
-	b.WriteString("\n" + rule("Command Palette") + "\n\n")
-	b.WriteString(binding("ctrl+k", "open palette"))
-	b.WriteString(binding("ctrl+t", "cycle to next theme"))
-	b.WriteString(binding("type", "filter commands"))
-	b.WriteString(binding("enter", "run selected command"))
-	b.WriteString(binding("esc", "close palette"))
-
-	return lipgloss.NewStyle().Width(width).Height(height).Render(b.String())
+	add("")
+	add(rule("Dashboard"))
+	add("")
+	add(binding("j/k", "navigate files"))
+	add(binding("enter", "open selected file/folder in terminal"))
+	add(binding("r", "refresh + trigger rescan"))
+
+	add("")
+	add(rule("Connect"))
+	add("")
+	add(binding("j/k", "navigate devices"))
+	add(binding("p", "pair a new device by pasting its ID"))
+	add(binding("a", "accept a pending device"))
+	add(binding("i", "ignore a pending device"))
+	add(binding("d", "remove an approved device"))
+	add(binding("r", "rename a device"))
+
+	add("")
+	add(rule("Settings"))
+	add("")
+	add(binding("c", "copy this device's ID to clipboard"))
+
+	add("")
+	add(rule("Command Palette"))
+	add("")
+	add(binding("ctrl+k", "open palette"))
+	add(binding("ctrl+t", "cycle to next theme"))
+	add(binding("type", "filter commands"))
+	add(binding("enter", "run selected command"))
+	add(binding("esc", "close palette"))
+
+	total := len(lines)
+	if total <= height {
+		// no scrolling needed
+		return lipgloss.NewStyle().Width(width).Height(height).Render(strings.Join(lines, "\n"))
+	}
+
+	// clamp scroll so we never go past the last page
+	maxOffset := total - height + 1 // +1 reserves space for the indicator
+	h.scrollOffset = min(h.scrollOffset, maxOffset)
+
+	visible := lines[h.scrollOffset : h.scrollOffset+height-1]
+
+	// indicator line
+	var indicator string
+	if h.scrollOffset < maxOffset {
+		indicator = h.theme.Muted.Render("↓ j/k to scroll")
+	} else {
+		indicator = h.theme.Muted.Render("↑ j/k to scroll")
+	}
+
+	content := strings.Join(append(visible, indicator), "\n")
+	return lipgloss.NewStyle().Width(width).Height(height).Render(content)
 }
 
 func (h Help) Title() string { return "Help" }