feat(acp-client): add scroll-to-bottom FAB in chat message area

[raphaeltm]

Summary

• Adds a small floating action button (down chevron, 32px circle) over the chat message area
• Appears when the user has scrolled up and there are messages; hidden when at bottom or no messages
• Clicking it calls scrollToBottom() from the useAutoScroll hook

Changes

• AgentPanel.tsx: Wrapped message area in relative container, added FAB with conditional rendering based on isAtBottom and messages.items.length
• AgentPanel.test.tsx: 4 new tests (shows when not at bottom, hides when at bottom, hides when no messages, calls scrollToBottom on click). Updated 1 existing test for new DOM structure (flex-1 → h-full on scroll container).

Validation

• pnpm lint
• pnpm typecheck (via pnpm build)
• pnpm test — 246 tests pass
• Mobile and desktop verification: FAB is small (32px), positioned bottom-right with bottom-3 right-3, won't overlap content

UI Compliance Checklist (Required for UI changes)

• Mobile-first layout verified — FAB is 32px, touch-friendly, won't crowd mobile layout
• Accessibility checks completed — aria-label="Scroll to bottom", title attribute, keyboard accessible via tab
• Shared UI components used or exception documented — uses existing useAutoScroll hook

Exceptions (If any)

• Scope: N/A
• Rationale: N/A
• Expiration: N/A

Agent Preflight (Required)

• Preflight completed before code changes

Classification

• external-api-change
• cross-component-change
• business-logic-change
• public-surface-change
• docs-sync-change
• security-sensitive-change
• ui-change
• infra-change

External References

N/A: Pure UI addition using existing hook API (useAutoScroll already exposes isAtBottom and scrollToBottom).

Codebase Impact Analysis

• packages/acp-client/src/components/AgentPanel.tsx — Added FAB button, wrapped message area in relative container
• packages/acp-client/src/components/AgentPanel.test.tsx — 4 new tests, 1 updated test

Documentation & Specs

N/A: Small UI enhancement, no API or behavior changes requiring documentation updates.

Constitution & Risk Check

• Principle XI: No hardcoded values. FAB size uses Tailwind utility classes (standard design tokens). Scroll threshold is already configurable via bottomThreshold option in the hook.

Generated with Claude Code