[MyNameIsEdi]

Description

Pixel agents in the Playwright Dashboard's office canvas previously only reacted to
two coarse signals (run active, failures exist). This PR wires them to four smarter
live signals, making the office feel genuinely alive.

1. Chat-reactive — agents walk to their desk and type while responding to chat
   (agentStatuses now wired to setAgentActive), wander again when idle.
2. Emotional reactions — on run completion, all agents show a green ✓ bubble
   (pass) or red ✗ bubble (fail); passing runs trigger a 2.5 s celebration.
3. Handoff bubbles — in multi-agent chat, the finishing agent shows a waiting
   bubble on turn_done before the next agent activates.
4. Two new pixel-art sprites — bubble-react-pass.json (light-green bg) and
   bubble-react-fail.json (pink bg), wired through the existing sprite pipeline.

Type of change

• New feature

Checklist

• Typecheck passes (npm run typecheck)
• Lint passes (npm run lint)
• CHANGELOG and README updated
• Tests — visual animation change, verified manually via npm run dev

Summary by CodeRabbit

• New Features
  • Enhanced pixel agent behaviors with visual feedback bubbles during testing
  • Agents display checkmark bubbles for passing tests and failure markers after completion
  • Added waiting bubbles during multi-agent handoffs
  • Improved agent animations responding to live chat interactions (walking and typing)

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3ae33a8a-f6c8-4b81-a513-6272a57b85ef

📥 Commits

Reviewing files that changed from the base of the PR and between f1deea0 and 66f2877.

📒 Files selected for processing (9)

• CHANGELOG.md
• README.md
• ui/src/office/engine/officeState.ts
• ui/src/office/engine/renderer.ts
• ui/src/office/sprites/bubble-react-fail.json
• ui/src/office/sprites/bubble-react-pass.json
• ui/src/office/sprites/spriteData.ts
• ui/src/office/types.ts
• ui/src/pages/PlaywrightDashboard.tsx

---

📝 Walkthrough

Walkthrough

This PR adds visual reaction bubbles (pass/fail checkmarks and X marks) to the 2D pixel office. Agents now display animated reactions when tests complete, and waiting bubbles during chat turn handoff. The feature is wired through new sprite assets, extended office engine timer logic, and dashboard integration that synchronizes bubble display with test-run state and live collaboration activity.

Changes

Smarter Pixel Agents with Reaction Bubbles

Layer / File(s)	Summary
Bubble Type Contract ui/src/office/types.ts	Character.bubbleType now includes react_pass and react_fail union values for the new reaction bubble types.
Sprite Assets and Registry ui/src/office/sprites/bubble-react-*.json, ui/src/office/sprites/spriteData.ts	New 11×13 pixel sprite JSON assets define checkmark (pass) and X (fail) bubbles; imports and exports wired through resolveBubbleSprite helper to create BUBBLE_REACT_PASS_SPRITE and BUBBLE_REACT_FAIL_SPRITE constants.
OfficeState Reaction Methods ui/src/office/engine/officeState.ts	showReactBubble(id, type) and triggerReactBubblesAll(type) methods set agent bubble type and initialize timer for auto-dismiss; extends update(dt) to decrement timers for all three bubble types and clear when expired.
Renderer Sprite Selection and Fade ui/src/office/engine/renderer.ts	Imports BUBBLE_REACT_FAIL_SPRITE and updates renderBubbles to select sprite by ch.bubbleType; applies fade-out opacity to react_pass, react_fail, and waiting bubbles during final BUBBLE_FADE_DURATION_SEC based on remaining timer.
Dashboard Event Triggers ui/src/pages/PlaywrightDashboard.tsx	Pulls agentStatuses from settings; adds refs to track test-run transitions and a post-pass celebration window; new effects trigger triggerReactBubblesAll('react_fail') or 'react_pass' only on running true→false transition; SSE turn_done now shows waiting bubble via showWaitingBubble(...) after agent returns to idle.
Feature Documentation CHANGELOG.md, README.md	Changelog entry and README update describe the four new smarter-agent behaviors: chat-reactive walking/typing, pass/fail emotional reactions, multi-agent handoff waiting bubbles, and reaction bubble types.

Sequence Diagram

sequenceDiagram
  participant Dashboard as PwOfficePanel
  participant Engine as OfficeState
  participant Renderer as renderBubbles
  Dashboard->>Engine: showReactBubble(agentId, 'react_pass')
  Engine->>Engine: set bubbleType & bubbleTimer
  loop every tick
    Engine->>Engine: update(dt): decrement bubbleTimer
    Engine->>Engine: if timer expired, clear bubbleType
  end
  Renderer->>Engine: check ch.bubbleType
  Renderer->>Renderer: select sprite by type
  Renderer->>Renderer: apply fade-out if timer < FADE_DURATION
  Renderer->>Renderer: draw bubble

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A rabbit's office springs to life,
With checkmarks bright through test and strife,
Agents chatter, walk, and glow—
Pass or fail, the bubbles show! 🐰✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/smarter-pixel-agents

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}