Agentic UI: Make the Xdebug sidebar bug playful

[shaunandrews]

Related issues

• None. This is a small, self-contained interaction polish experiment.

How AI was used in this PR

AI helped explore the motion language, split the existing glyph into independently animated parts, implement the interaction and transition states, and add focused tests. I reviewed the resulting behavior in the production Agentic UI build in both light and dark themes.

Executive summary

Xdebug can only be enabled for one Studio site at a time, so its sidebar bug is already a useful little status marker. This draft makes that marker feel alive without turning it into constant visual noise.

Proposed Changes

• Make the Xdebug bug crawl vertically into and out of its sidebar position when the setting changes.
• Give its legs and antennae occasional, subtle movement while the site is running.
• Use a more exaggerated movement on hover, keyboard focus, and click so the interaction feels intentional and discoverable.
• Preserve the existing status action: after the bug performs its hover movement, it fades into the start/stop affordance.
• Clip the crawl to the full sidebar menu-row height and respect prefers-reduced-motion.
• Reuse the animated glyph in the site dropdown, with ambient movement only while that site is running.

Review guide

Please focus on the motion character and timing:

• Does the vertical entrance read as crawling rather than sliding?
• Is the hover/focus movement playful enough without delaying the start/stop affordance too much?
• Is the ambient movement infrequent enough to avoid becoming distracting?
• Does the stopped, grey bug remain a clear indication that Xdebug is enabled?

The transition-state plumbing and SVG path separation are implementation details and can be skimmed after validating the interaction model.

Motion demo

This high-resolution motion study uses the component's actual SVG paths, production keyframe angles, and production timing. It is enlarged here so the independent antenna and leg movement is easy to review; in the app it plays at the bug's native 20px size before handing off to the start/stop affordance.

Known tradeoffs and follow-ups

• The GIF above is intentionally enlarged; the production build is still the best way to judge the movement at its native 20px size and the crawl within the sidebar row.
• The hover/focus affordance intentionally gives the bug roughly half a second to react before crossfading to the status action.
• No persistence, backend, or site-runtime behavior changes are included.

Testing Instructions

1. Run npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open.
2. Open http://localhost:8081 and find the site with Xdebug enabled.
3. Hover and keyboard-focus its status bug; confirm the legs and antennae move before the start/stop action appears.
4. Click the status control and confirm the more exaggerated movement plays while the site changes state.
5. Toggle Xdebug and confirm the bug crawls upward from below into place when enabled, then continues upward out of the row when disabled.
6. Confirm the icon remains clipped to the sidebar menu-row height.
7. Verify both light and dark appearances and test with reduced motion enabled.

Automated verification completed locally:

• npx eslint --fix on the modified TypeScript files (no errors; one pre-existing unused-argument warning)
• npm run typecheck
• npm test -- apps/ui/src/components/site-list/index.test.tsx (30 tests passing)
• npm run cli:build:ui
• Manual Agentic UI verification in light and dark themes

Pre-merge Checklist

• Checked for TypeScript and React errors
• Added coverage for Xdebug rendering, click motion, and crawl presence states
• Verified the production Agentic UI build
• Verified light and dark themes
• Added reduced-motion behavior
• Reviewer has evaluated the animation timing and character