# 186 Fn 913 03610e66

> fn-9.13 HelpOverlay component

- Skill: `tools-only/186-fn-913-03610e66` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/186-fn-913-03610e66`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/186-fn-913-03610e66/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/186-fn-913-03610e66

---

# fn-9.13 HelpOverlay component

## Description

Create HelpOverlay component showing keybindings.

### File

`src/components/help-overlay.ts`

### Features

- Modal overlay on ? key
- Lists all keyboard shortcuts
- Dismiss with Esc or ?

### Interface

```typescript
class HelpOverlay implements Component {
  render(width: number): string[]
  handleInput(data: string): void
}
```

### Content

```
┌─ Help ─────────────────────────────┐
│                                     │
│  j/k      Navigate task list        │
│  ?        Show/hide this help       │
│  q        Quit (detach if running)  │
│  Esc      Close overlay             │
│  Ctrl+C   Same as q                 │
│                                     │
│         Press ? or Esc to close     │
└─────────────────────────────────────┘
```

Use pi-tui overlay system if available, or render centered box.
## Acceptance
- [ ] Overlay renders centered
- [ ] All keybindings listed
- [ ] Esc dismisses overlay
- [ ] ? toggles overlay
- [ ] Theme colors applied
## Done summary
- Added HelpOverlay component with keybinding list
- Centered modal box, toggles on ? key
- Esc or ? dismisses overlay
- 26 tests covering visibility, input, centering
## Evidence
- Commits: 8ddf481
- Tests: bun test src/components/help-overlay.test.ts
- PRs: