Improve the style of the agent thinking card

[pablonoel]

Overview

Improves the style, behaviour and visual aspects of the agent thinking card, the focus flow, the intro and follow up cards. Adds new elements accordingly.

Related Issues

Fixes # (issue number)

Changes Made

• List significant changes
• List UI changes (include screenshots if applicable)

New: Button huge size

• button.tsx — size prop adds 'huge' option.
• button.module.scss — huge shares large's pill padding/gap but forces full (9999px) radius; adds bigger label typography (20px/22px, 16px padding-block).

New: IconStatusIndicator

• status_indicator.tsx (new file) — small div-based icon component.
• status_indicator.module.scss (new file) — two-layer icon: spinning ring (::before, conic-gradient masked to a circle, animates via prefers-motion) + static sparkle (::after, masked to an SVG path).

New: pulsing-card effect (shared mixin)

• _effects.module.scss (new file) — pulsing-background (bottom-anchored gradient glow, $bottom-offset + $is-animated params, respects prefers-motion) and pulsing-card (shared card shell: position/grid/overflow/background/border/radius + the glow).
• includes.scss — forwards the new effects.module.
• status.module.scss — container now uses pulsing-card (animated); padding/gap reduced; .indicator-message becomes a flex row to hold the new icon.
• intro.module.scss — uses pulsing-card(54px, false) (offset glow, no animation).
• follow_up.module.scss — uses pulsing-card($is-animated: false).

Autofocus behavior

• use_auto_focus.ts (new file) — useAutoFocus(ref, isEnabled) hook, focuses element when isEnabled flips true.
• page_home.tsx:
• hasFollowUp derived flag extracted; followUp state effect simplified to depend on it.
• promptInputRef created and passed to Prompt; autofocuses the prompt textarea except while Status or FollowUp panel is showing.
• passes isStatusVisible down to Prompt.
• status.tsx — autofocuses the Cancel button on mount; status message now renders IconStatusIndicator + text inside a role="status" live region.

Prompt panel: disabled state while query runs

• prompt.tsx — new inputRef and isStatusVisible props; textarea disabled and submit button isDisabled gated on isStatusVisible; content-container gets data-is-status-visible for the dim/opacity style; submit blocked while status visible.
• prompt.module.scss — container radius medium to large; content-container fades to 0.5 opacity when data-is-status-visible="true"; input text now medium-weight (500), fixed 20px size, uses -subtle content color for both text and placeholder (was default/dimmed).

Button size bumps on existing call sites

• follow_up.tsx — option buttons medium to large.
• intro.tsx — example-prompt buttons medium to huge.

new_thinking_card.mov

Testing Done

Describe the steps you took to test these changes (please also list commands ran if possible).

• Unit tests passed
• Integration tests passed
• Manual verification

Checklist

• I have followed the style guidelines of this project.
• I have commented my code, particularly in hard-to-understand areas.
• My changes generate no new warnings.

---

Note: Only Maintainers can approve and merge PRs. Expected initial review time: 3 business days.

[gemini-code-assist]

Code Review

This pull request introduces a new 'huge' button size, a pulsing background effect, and a custom 'IconStatusIndicator' component, alongside visual updates to home page elements. The review feedback highlights several improvement opportunities: ensuring placeholder text colors remain distinct from typed input, using a robust border-radius approach for the 'huge' button to guarantee a pill shape, replacing a paragraph tag with a span to avoid layout issues from default margins, and using white instead of dark colors in SVG masks to prevent transparency issues in browsers defaulting to luminance mask mode.