feat(chat): Info and Copy buttons on user messages

[simple-agent-manager]

Summary

User messages in chat now show two of the three action buttons that agent messages have: Info (metadata popover with time, word count, character count) and Copy (copies raw markdown to clipboard). Agent messages keep all three (Info, Read aloud, Copy). User messages do not get Read aloud.

The shared MessageBubble in acp-client already supported user message actions since PR #495, but no chat call site passed the user message's timestamp prop, and the action row only renders when timestamp > 0 — so the buttons never appeared.

Key changes:

• Pass timestamp from all three chat surfaces (project chat, workspace chat with project session, legacy workspace chat)
• Move UserMessageFade animation into MessageBubble so the action row renders during the per-character fade-in
• Add align prop to MessageActions to decouple popover anchor side from color variant — user bubbles anchor end (right), agent bubbles anchor start (left)
• Info popover flips upward via useLayoutEffect measuring against nearest overflow-clipping ancestor, uses inline styles for placement/sizing (Tailwind classes not generated for acp-client — see backlog task)
• Fix .sam-message-entry animation fill-mode from both to backwards so rows don't create stacking contexts that trap popover z-index

Backlog tasks filed:

• tasks/backlog/2026-10-04-acp-client-tailwind-classes-not-generated.md — @source in index.css is never processed by Tailwind
• tasks/backlog/2026-10-04-legacy-chat-user-links-invisible-light-mode.md — links in solid blue workspace-chat user bubbles are invisible in light mode

Validation

• pnpm lint
• pnpm typecheck
• pnpm test — 567 acp-client tests pass, 104 CI chat audit specs pass
• pnpm check:fast
• Additional validation run (if applicable)
• If this PR changes candidate selection for a sweep/cron/alarm loop (WHERE clause, status set, join, or equivalent), expected candidate volume and worst-case per-candidate cost are stated in the summary or validation notes (see .claude/rules/47-control-loop-io-budget.md)

N/A: no sweep/cron/alarm changes.

Staging Verification (REQUIRED for all code changes — merge-blocking)

N/A: Staging verification explicitly skipped per user instruction.

UI Compliance Checklist (Required for UI changes)

• Mobile-first layout verified
• Accessibility checks completed
• Shared UI components used or exception documented
• Playwright visual audit run locally — mock data scenarios that push the changed UI surface (normal, long text, empty, many items, error, special chars) tested at mobile (375x667) and desktop (1280x800); no horizontal overflow; screenshots in .tmp/playwright-screenshots/ (see .claude/rules/17-ui-visual-testing.md)
• Desktop and mobile screenshots for every changed UI surface are posted in a PR comment and linked below
• Agent/human reviewed the posted screenshots for quality control and found no visual issues, or fixed/documented every issue found

UI Screenshot Evidence

Screenshots posted in #issuecomment-5980504214 with full Playwright visual audit evidence (22 screenshots across mobile/desktop, dark/light, both chat surfaces).

Surface: Project Chat — User Message Actions

• Desktop evidence: #issuecomment-5980504214
• Mobile evidence: #issuecomment-5980504214
• Mock/stress data used: Long text with URLs, unbreakable tokens (Supercalifragilisticexpialidocious×3), special characters (unicode 日本語のテキスト, emoji ✅🚀, RTL שלום, XSS <script>alert("x")</script>), short text ("ok"), multiline with code blocks, empty actions on SAM-injected context
• Screenshot quality review: Screenshots reviewed for layout quality, overflow, clipping, readability, and responsive behavior. Fixed: popover z-index (stacking context from animation fill-mode), popover width (inherited bubble width → max-content), popover clipping (added upward flip). No remaining visual issues.

Surface: Workspace Chat — User Message Actions (Legacy AgentPanel)

• Desktop evidence: #issuecomment-5980504214
• Mobile evidence: #issuecomment-5980504214
• Mock/stress data used: Same mock data as project chat (long text, special characters, short text), replayed over mock ACP WebSocket protocol (session_state → user_message_chunk → session_replay_complete)
• Screenshot quality review: Screenshots reviewed for layout quality, overflow, clipping, readability, and responsive behavior. Verified icon colors use light-on-dark (white) for the built-in solid blue bubble, contrasting with glass-themed bubbles that use theme icon colors. No visual issues found.

End-to-End Verification (Required for multi-component changes)

• Data flow traced from user input to final outcome with code path citations
• Capability test exercises the complete happy path across system boundaries
• All spec/doc assumptions about existing behavior verified against code
• If any gap exists between automated test coverage and full E2E, manual verification steps documented below

Data Flow Trace

1. User types in project chat composer → AcpConversationItemView renders <AcpMessageBubble text={item.text} role="user" timestamp={item.timestamp} bubbleClassName="glass-msg-user" />
2. MessageBubble checks timestamp != null && timestamp > 0 → renders <MessageActions> with align="end" and variant="default" (glass theme)
3. MessageActions renders Info and Copy buttons (no TTS for user role), trailing-aligned via justify-end
4. Info button opens popover anchored right (align="end"), flips upward if near bottom via useLayoutEffect measuring visibleBounds()
5. Copy button calls navigator.clipboard.writeText(text) with raw markdown

Workspace chat path: AgentPanel → MessageBubble with role="user" timestamp={item.timestamp} → same actions with variant="on-dark" (solid blue bubble)

Untested Gaps

N/A: full flow covered by automated tests across all three chat surfaces.

Post-Mortem (Required for bug fix PRs)

N/A: not a bug fix — this is a new feature (user messages previously had no action buttons).

Specialist Review Evidence (Required for agent-authored PRs)

• All local reviewers completed and findings addressed before merge
• If any reviewer did NOT complete: needs-human-review label added and merge deferred to human

Reviewer	Status	Outcome
ui-ux-specialist	PASS	No CRITICAL/HIGH. MEDIUM: upward-flipped popover covers its own bubble text (acceptable trade-off — popover is dismissible and content is still accessible). LOW: flip not re-measured on scroll.
architecture-reviewer	ADDRESSED	Original HIGH (should use createPortal) downgraded to MEDIUM after explaining Virtuoso auto-scroll trade-off and discriminating CI test proving z-index fix works. MEDIUM: variant derived from bubbleClassName (documented in PR). LOW: theme.css invariant.
Note: A correctness-reviewer was attempted but hit a 429 rate limit before producing any findings. It never ran, so it is not listed as a reviewer. Two of three planned local reviewers completed with no CRITICAL or HIGH findings. This is a UI-only change with comprehensive test coverage (20 Playwright tests + 6 unit tests + updated acp-client component tests).

CodeRabbit Review Evidence (Required for agent-authored PRs)

• CodeRabbit requested after local review, staging if applicable, and CI gates passed
• Waited about 15 minutes, or up to about 45 minutes in total while a review CodeRabbit had started was still in progress
• Either CodeRabbit reviewed and no CodeRabbit feedback is unresolved, or it did not review and the observed outcome is recorded below

CodeRabbit Notes

CodeRabbit review requested via coderabbit-review label at ~13:33Z. CodeRabbit processed 12 files and posted an APPROVED review at 13:42:29Z with no comments or findings. No unresolved feedback.

Exceptions (If any)

• Scope: Staging verification skipped

• Rationale: User explicitly instructed "Skip staging. Make it so."

• Expiration: N/A

• Scope: Correctness reviewer incomplete

• Rationale: Hit 429 rate limit, produced no findings. Two of three reviews completed with no blocking issues. UI-only change with comprehensive automated test coverage.

• 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: No external API changes. Feature uses existing React, Playwright, and Tailwind patterns.

Codebase Impact Analysis

• packages/acp-client/src/components/MessageBubble.tsx — imports UserMessageFade, passes align/variant to MessageActions, renders fade-in for user messages
• packages/acp-client/src/components/MessageActions.tsx — new align prop, useLayoutEffect popover flip, inline styles for positioning
• apps/web/src/components/project-message-view/AcpConversationItemView.tsx — passes timestamp and bubbleClassName to user message bubbles, removes local UserMessageFade usage
• packages/acp-client/src/components/AgentPanel.tsx — passes timestamp to user message bubbles
• packages/ui/src/tokens/theme.css — animation fill-mode fix (both → backwards)

Documentation & Specs

N/A: No behavior or interface documentation changes needed. This is a UI enhancement adding existing action buttons to user messages.

Constitution & Risk Check

• Principle XI (No Hardcoded Values): Popover gap (8px) is a visual constant, not a configurable limit. No URLs, timeouts, or business limits hardcoded.
• No security implications — Copy uses navigator.clipboard.writeText, Info shows locally computed metadata.

🤖 Generated with Claude Code

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

🧰 Additional context used

📚 Code guidelines (4)

apps/web/.claude/rules/04-ui-standards.md — auto-discovered
packages/acp-client/AGENTS.md — auto-discovered
.specify/memory/constitution.md — auto-discovered
packages/ui/AGENTS.md — auto-discovered

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: raphaeltm/simple-agent-manager/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: b0c9e0ea-5c67-44e0-b197-206903cf0e4d

📥 Commits

Reviewing files that changed from the base of the PR and between 9ef726c and 4a1e006.

📒 Files selected for processing (12)

• apps/web/src/components/project-message-view/AcpConversationItemView.tsx
• apps/web/tests/playwright/user-message-actions-audit.spec.ts
• apps/web/tests/unit/components/acp-conversation-item-user-actions.test.tsx
• packages/acp-client/src/components/AgentPanel.tsx
• packages/acp-client/src/components/MessageActions.tsx
• packages/acp-client/src/components/MessageBubble.tsx
• packages/acp-client/tests/unit/components/AgentPanel.test.tsx
• packages/acp-client/tests/unit/components/MessageActions.test.tsx
• packages/acp-client/tests/unit/components/MessageBubble.test.tsx
• packages/ui/src/tokens/theme.css
• tasks/backlog/2026-10-04-acp-client-tailwind-classes-not-generated.md
• tasks/backlog/2026-10-04-legacy-chat-user-links-invisible-light-mode.md

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

Timestamped user messages now show Info and Copy actions in project and workspace chats. The changes adjust action alignment and metadata popover placement, add automated coverage, change the message-entry animation fill mode, and add two backlog tasks.

Changes

User Message Actions

Layer / File(s)	Summary
Action alignment and popover placement packages/acp-client/src/components/MessageActions.tsx, packages/acp-client/tests/unit/components/MessageActions.test.tsx	MessageActions adds start and end alignment. The metadata popover measures available space and opens above only when it does not fit below but fits above. Tests cover alignment, placement, and width.
Timestamped user-message actions packages/acp-client/src/components/MessageBubble.tsx, apps/web/src/components/project-message-view/AcpConversationItemView.tsx, packages/acp-client/src/components/AgentPanel.tsx, packages/acp-client/tests/unit/components/MessageBubble.test.tsx, apps/web/tests/unit/components/acp-conversation-item-user-actions.test.tsx, packages/acp-client/tests/unit/components/AgentPanel.test.tsx, packages/ui/src/tokens/theme.css	MessageBubble displays Info and Copy actions for timestamped user messages, including during animation. Project and agent chat rendering passes timestamps to the bubble. Unit tests cover action visibility and behavior. The message-entry animation uses backwards instead of both.
Project and workspace chat audits apps/web/tests/playwright/user-message-actions-audit.spec.ts	Playwright audits check actions, popovers, layout, themes, viewports, and clipboard contents in project and workspace chats.

Tailwind CSS backlog note

Layer / File(s)	Summary
Missing acp-client utility classes tasks/backlog/2026-10-04-acp-client-tailwind-classes-not-generated.md	The backlog task describes missing production utility classes and records proposed acceptance criteria.

Workspace chat link backlog note

Layer / File(s)	Summary
Light-mode workspace links tasks/backlog/2026-10-04-legacy-chat-user-links-invisible-light-mode.md	The backlog task describes a light-mode link contrast issue and records proposed acceptance criteria.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~30 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant AcpConversationItemView
  participant MessageBubble
  participant MessageActions
  participant Clipboard
  AcpConversationItemView->>MessageBubble: Pass user message timestamp and animation state
  MessageBubble->>MessageActions: Render Info and Copy actions
  User->>MessageActions: Select Copy
  MessageActions->>Clipboard: Write raw message markdown

Loading

Merge Risk: ⚪ Minimal · up to 4a1e0

This change adds Info and Copy actions to timestamped user messages in project and workspace chats, and adjusts popover placement and the message-entry animation fill mode. No merge-blocking issues were identified in the supplied evidence.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 4a1e0

The new message buttons require explicit interaction and do not grant user messages read-aloud capabilities. A separate settings change removes host-specific permission-default handling; its effect on actual agent permissions remains unresolved. No privilege escalation was established.

Retained concerns

• Medium · security · inferred: Removing the host-provided permission default can separate displayed and subsequently saved permission policy from the effective inherited policy. The base accepted defaultPermissionMode; the head substitutes literal default for a null saved mode and submits permissionMode alongside model changes. If a host uses a different effective default, a model-only save can also replace inherited permission behavior without an explicit permission selection. Deployed caller defaults and actual runtime consequences remain unverified; this is not an established privilege escalation.

Security review details

Security Blast Radius

• inferred — The inspected message-action path operates on a message already supplied to the current conversation renderer and the interacting browser's clipboard. No additional data-store or cross-tenant access was identified in that path; this conclusion does not cover uninspected production authorization behavior.

Security Findings and Attack Paths

• inferred — The permission-default change creates a potential control-drift path through ordinary settings saves, not an established attacker-driven bypass. Saving a model change also submits the panel's substituted permission mode; the effect depends on host defaults and downstream enforcement that were not verified.

Trust Boundaries and Controls

• observed — Project chat still routes system-origin user messages away from the actionable bubble. Legacy chat does not apply that origin distinction, but already rendered those messages through MessageBubble before this PR; adding Copy does not establish disclosure of previously inaccessible content.
• observed — Info and Copy are event-driven. Positive timestamp eligibility remains enforced, and user-role actions remain excluded from speaker and inline-player controls.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 53.13% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 32 functions across 9 files. (3 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: adding Info and Copy actions to user messages in chat.
Description check	✅ Passed	The description is comprehensive and follows the template, with a summary, validation results, UI evidence, end-to-end details, reviews, and preflight information. It clearly records that staging veri…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 53.13% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 32 functions across 9 files. (3 skipped: 3 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 2

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🛠️ Fix failing CI checks 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{I’m a rabbit; I hop by the chat,
Where Info and Copy now sit.
I tap Copy; the markdown comes through,
A popover finds room in the view,
And my soft paws leave no message unread.}

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

[simple-agent-manager]

UI Screenshot Evidence — Playwright Visual Audit

All 20 Playwright tests passed across mobile (375×667) and desktop (1280×800) viewports, dark and light themes, for both project chat and workspace chat surfaces.

Project Chat Screenshots (generated by user-message-actions-audit.spec.ts)

Screenshot	Viewport	Theme	What it shows
user-message-actions-top-dark-1280x800.png	Desktop	Dark	History with user messages showing Info + Copy, agent showing all three
user-message-actions-top-dark-375x667.png	Mobile	Dark	Same — buttons trailing-aligned, no overflow
user-message-actions-top-light-1280x800.png	Desktop	Light	Light theme parity — glass bubble with themed icons
user-message-actions-top-light-375x667.png	Mobile	Light	Light mobile — no overflow, proper wrapping
user-message-actions-bottom-dark-1280x800.png	Desktop	Dark	Long URL + unbreakable token user message with buttons
user-message-actions-bottom-dark-375x667.png	Mobile	Dark	Same content on mobile — wraps correctly
user-message-actions-bottom-light-1280x800.png	Desktop	Light	Light theme with long content
user-message-actions-bottom-light-375x667.png	Mobile	Light	Light mobile with long content
user-message-actions-info-open-dark-1280x800.png	Desktop	Dark	Info popover open — readable, on top of adjacent rows
user-message-actions-info-open-dark-375x667.png	Mobile	Dark	Info popover on mobile — sized to content, not squeezed
user-message-actions-info-newest-light-1280x800.png	Desktop	Light	Newest message popover flips upward above composer
user-message-actions-info-newest-light-375x667.png	Mobile	Light	Same upward flip on mobile
user-message-actions-sent-dark-1280x800.png	Desktop	Dark	Optimistic sent message with buttons during fade-in
user-message-actions-sent-dark-375x667.png	Mobile	Dark	Same on mobile
user-message-actions-copied-light-1280x800.png	Desktop	Light	Copy button shows "Copied" confirmation
user-message-actions-copied-light-375x667.png	Mobile	Light	Same on mobile

Workspace Chat Screenshots

Screenshot	Viewport	Theme	What it shows
user-message-actions-workspace-dark-1280x800.png	Desktop	Dark	Legacy AgentPanel with user Info + Copy on solid blue bubble
user-message-actions-workspace-dark-375x667.png	Mobile	Dark	Same — white icons on dark bubble
user-message-actions-workspace-light-1280x800.png	Desktop	Light	Light theme workspace chat
user-message-actions-workspace-light-375x667.png	Mobile	Light	Light mobile workspace chat
user-message-actions-workspace-info-open-dark-1280x800.png	Desktop	Dark	Info popover open on workspace chat
user-message-actions-workspace-info-open-dark-375x667.png	Mobile	Dark	Same on mobile

Automated Assertions (beyond visual)

Each test asserts:

• assertNoOverflow — no horizontal overflow at viewport width
• expectUserActions — Info + Copy visible, Read aloud absent
• expectTrailingActions — buttons right-aligned at bubble content edge, on one line
• expectPopoverUsable — popover inside visible conversation area, painted on top (elementFromPoint), each row fits on one line
• Copy writes exact raw markdown to clipboard
• Popover closes with Escape
• Newest message popover opens upward (measured position)

[raphaeltm]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud