What you'll learn

• How to wire LiveView events to agent command execution
• How to keep UI state aligned with immutable agent outputs
• How to display side effects (emit/schedule) transparently to users
• How to avoid race-prone state updates in interactive flows

Prerequisites

• You are comfortable with handle_event/3 in LiveView
• You can read Phoenix templates and assigns
• You understand optimistic and confirmed UI update tradeoffs

Lesson Breakdown

1. Command boundary: map each UI intent to a single agent command.
2. State rendering: render from the latest agent struct only.
3. Directive visibility: surface emitted/scheduled work in UI logs.
4. Concurrency handling: guard against stale events and rapid clicks.
5. Testing: verify DOM updates from known state transitions.

Hands-on Exercise

Build a LiveView for the demand tracker:

1. Initialize an agent in mount/3.
2. Add Boost, Cool, and Toggle Auto Decay buttons.
3. On click, call the agent command and assign the new state.
4. Render a recent-events panel from emitted directive metadata.
5. Add a LiveView test asserting key state and labels change correctly.

Validation Checklist

• [ ] Every UI action maps to an explicit agent command.
• [ ] Socket assigns hold the latest immutable agent state.
• [ ] Directive outcomes are visible for debugging.
• [ ] LiveView tests cover at least one multi-step user flow.

Next Module

Continue with Production Readiness: Supervision, Telemetry, and Failure Modes.