initiative/specs/019-combatant-row-declutter/quickstart.md

Quickstart: Combatant Row Declutter

Feature: 019-combatant-row-declutter Date: 2026-03-06

What This Feature Does

Replaces always-visible HP adjustment controls and AC input with compact, on-demand interactions:

1. HP: Click the current HP number to open a small popover for damage/healing.
2. AC: Click the shield+number display to edit AC inline.

Key Files

File	Role
apps/web/src/components/combatant-row.tsx	Main combatant row — modified to use new patterns
apps/web/src/components/hp-adjust-popover.tsx	New popover component for HP adjustment
apps/web/src/components/quick-hp-input.tsx	Removed — replaced by HP popover

How It Works

HP Adjustment Flow

1. Current HP displays as a clickable, color-coded number (amber=bloodied, red=unconscious)
2. Click opens a popover with auto-focused numeric input + Damage/Heal buttons
3. Enter = apply damage (negative delta), Shift+Enter = apply healing (positive delta)
4. Popover dismisses on action, Escape, or click-outside

AC Edit Flow

1. AC displays as static text: shield icon + number (or just shield if unset)
2. Click opens inline input (same pattern as editable name)
3. Enter/blur commits, Escape cancels

Development

pnpm --filter web dev     # Start dev server
pnpm check                # Run full quality gate before committing

Constraints

• Domain and application layers are unchanged
• onAdjustHp and onSetAc callback signatures unchanged
• Max HP input remains always-visible