#7124: feat: Add password toggle visibility to all platforms
app: web-ui
## Summary
- Add eye icon toggle buttons to all password inputs across the UI
- Improves UX by allowing users to reveal sensitive text when needed
- Consistent implementation across Node config, Skills, and Overview pages
## Changes
- **Icons** (`ui/src/ui/icons.ts`): Added shared `eye` icon for reuse
- **Node Config** (`ui/src/ui/views/config-form.node.ts`): Added password toggle using shared eye icon (removed duplicate local definition)
- **Skills Page** (`ui/src/ui/views/skills.ts`): Added password toggle to API key inputs
- **Overview Page** (`ui/src/ui/views/overview.ts`): Added password toggle to gateway password field
- **Styles** (`ui/src/styles/config.css`): CSS for `.cfg-input__toggle` button
## Test plan
- [x] Test password toggle on Node config form
- [x] Test password toggle on Skills page API key fields
- [x] Test password toggle on Overview page password field
- [x] Verify toggle works in both light and dark themes
- [x] Verify button is properly aligned and styled
- [x] Fix: Removed duplicate eye icon, now using shared icon from icons.ts
- [x] Refactor: Replaced DOM ID lookups with sibling traversal for better maintainability
## Review Feedback Addressed
- **Icon duplication** (Commit ff81e47d8): Removed local `eye` SVG from `config-form.node.ts`, now using shared icon from `ui/src/ui/icons.ts`
- **DOM lookup pattern** (Commit eb5c09ae8): Replaced `document.getElementById()` with DOM sibling traversal using `e.currentTarget` and `parentElement.querySelector()`
### Benefits of DOM sibling traversal:
- ✅ No ID collisions or global ID namespace pollution
- ✅ Maintains encapsulation (button only knows about its sibling)
- ✅ Works for single instances and lists without unique IDs
- ✅ DOM structure changes don't break functionality
- ✅ More maintainable and testable
All review feedback has been addressed. Thanks for the excellent review!
🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Most Similar PRs
#11527: feat(control-ui): UX improvements — Enter key, thinking icon, auto-...
by Annaxiebot · 2026-02-07
67.3%
#22697: Android: mask gateway token as password field with visibility toggle
by SimonSchubert · 2026-02-21
66.4%
#20317: feat(webchat): add toggle to hide tool calls and thinking blocks
by nmccready · 2026-02-18
61.8%
#13356: ui: align Thinking button active state in light theme with dark theme
by yamoroc · 2026-02-10
61.3%
#20064: UI: fix form overlapping subtitle in config screen
by powerdot · 2026-02-18
60.9%
#23778: feat: chat UI facelift — speech, themes, config categories, and polish
by BunsDev · 2026-02-22
59.8%
#11004: fix(ui): add Enter key support to Gateway Access inputs
by Annaxiebot · 2026-02-07
59.8%
#14197: fix(security): harden browser API auth, token comparisons, and hook...
by leecarollyn-gif · 2026-02-11
59.3%
#23574: security: P0 critical remediation — plugin sandbox, password hashin...
by lumeleopard001 · 2026-02-22
59.1%
#23110: feat(security): Credential Firewall — CredentialStore with domain p...
by ihsanmokhlisse · 2026-02-22
59.1%