Add MessageRow component, header panels, insights, reactions, and UI theming

[CheFu-code]

Motivation

• Improve message list rendering by factoring a row into a reusable MessageRow component and enable richer per-message interactions.
• Provide lightweight mailbox insights, header quick-panels, and a compact/comfortable display density to improve discoverability and UX.
• Add client-side utilities for exporting/downloading messages and threads, and integrate simple contact tool actions for quick workflows.
• Make network usage more robust by aborting inflight fetches and improving async hook cancellation semantics.

Description

• Introduces a new MessageRow component and replaces inline message row markup in FlowConsole with <MessageRow />, wiring selection, starring, keyboard handling, and contact actions via props.
• Adds many UI styles and theming in FlowConsole.module.css including insightBar, header panel styling, reduced-motion transitions, compactDensity, and various visual polish for the composer, reader, and lists.
• Adds header quick-panels (help, settings, apps) and a mailbox insights bar showing unread/starred counts and conversation totals, plus a themeDensity state and toggles for comfortable/compact density.
• Adds message-level actions: inline reaction picker, copy message link, download message, download thread, and a "show original source" popup; introduces downloadTextFile, threadToPlainText, downloadMessage, downloadThread, showOriginalSource, and reaction handling (addReactionToMessage).
• Integrates a debounced search using useDebounce and switches filtering to use the debounced query; improves selection logic by using selectedIdSet memoized Set.
• Adds simple contact tools including saving a contact to localStorage, opening mailto/chat/calendar/video links via showContactToolStatus and savedContactsFromStorage.
• Improves fetch lifecycle handling by wiring AbortController signals into fetch calls and aborting on cleanup for config and messages loads, and ensures SSE retry cleanup; also clears messageMenuId in relevant flows.
• Updates useAsync to more safely handle unmounted/cancelled executions by guarding execute and deferring immediate execution through a microtask and cancel flag.
• Minor type and import cleanup in MessageRow.tsx and FlowConsole.tsx (keyboard event typing, removed unused imports, added useDebounce import).

Testing

• Ran the TypeScript build and static type checks with yarn build and yarn tsc which completed successfully.
• Executed the automated test suite with yarn test and all tests passed.
• Ran linter checks with yarn lint which succeeded.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flow	Error		Jun 20, 2026 8:29am

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Warning

Review limit reached

@CheFu-code, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 27 minutes and 10 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 717ad726-c7f2-41b6-8aa6-91aa47500418

📥 Commits

Reviewing files that changed from the base of the PR and between 7cf550b and 1ae2840.

📒 Files selected for processing (3)

• src/components/FlowConsole.module.css
• src/components/FlowConsole.tsx
• src/hooks/useAsync.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/find-and-fix-repo-bug-tdwjej

---

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

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