feat(ux): energize the in-flight loading state

[Zbrooklyn]

What

Upgrades the in-flight loading indicator from a near-invisible 18×21px grey dot grid to a more present moment that reads as alive rather than frozen:

• Dots grow to 26×26 with accent-color flash on the staggered pulse cycle
• Status caption appears beside the dots: [Agent] is thinking… (or Waiting for permission… when permission is pending)
• Caption uses a moving gradient shimmer (background-position animation with -webkit-background-clip: text) — the same trick Linear, Vercel, and Stripe use on skeleton loaders
• 12px gap between the dots and caption; 12px vertical padding so the block has actual presence in the message-list flow

Why

The waiting state used to look frozen. A 9-dot grid with no caption, in 18×21px, didn't read as motion to most users — just static chrome. With this change, the gap between user prompt and first streaming token feels intentional, not broken.

Compatibility

• Falls back gracefully on browsers that don't support background-clip: text — the underlying solid muted color (var(--text-muted)) remains visible
• Respects prefers-reduced-motion indirectly: the shimmer is a slow 2.4s cycle and the dot pulse is a soft 1.2s ease — neither rapid enough to be vestibular-uncomfortable. (Open to adding @media (prefers-reduced-motion: reduce) if maintainers prefer.)

Files changed

• src/ui/MessageList.tsx — caption span beside the dots; conditional text by permission state
• styles.css — beefier dots, shimmer keyframe, layout tweaks

Screenshots

Before / after pairs available on request — happy to attach if useful for review.

Notes

This is one of several small UX polish patches I have in flight on a fork branch. Each is independent; this one stands alone and is the smallest. If any of the visual choices conflict with the maintainer's taste, I'm open to iterating.

[RAIT-09]

Thanks for the contribution! I tried it locally — love the shimmer effect, really nice touch. I'd love to incorporate it.

A few things to adjust:

• The dots and grid feel a bit large to me. Something like dot size: 5×5px, gap: 3px, grid: 21×21px might work better.
• font-size should use var(--font-ui-small) instead of the hardcoded 13px — so it respects the user's font size settings.
• The left padding was lost when you changed padding: 16px to padding: 12px 0. Could you restore the left margin so the indicator aligns with messages and tool call blocks above it?