Add MessageRow component, debounced search, UI theming, and fetch aborts

[CheFu-code]

Motivation

• Improve message list performance and UX by extracting a dedicated MessageRow component and debouncing search input.
• Refresh UI with a new visual theme and lightweight mailbox insights to make the inbox easier to scan.
• Harden network logic to avoid state updates after unmount by cancelling in-flight fetches and guarding async hooks.

Description

• Add a new MessageRow component in src/components/MessageRow.tsx and replace the inlined row rendering in FlowConsole with <MessageRow /> usage and prop callbacks.
• Introduce debounced search using useDebounce and update visibleThreads to filter on debouncedQuery, plus show a small insightBar with unread/starred/conversation counts in FlowConsole.tsx.
• Add UI/theme CSS in src/components/FlowConsole.module.css including transitions, insightBar, updated backgrounds, and visual treatments for buttons, lists, and dialogs.
• Improve fetch lifecycle handling in FlowConsole.tsx by attaching AbortController signals to fetch calls and aborting them on cleanup, and add selectedIdSet, unreadCount, and starredCount memos.
• Harden useAsync in src/hooks/useAsync.ts to avoid executing when unmounted and to schedule the initial execute safely with a cancellation guard.

Testing

• Ran the app build (npm run build) and type-check (npm run typecheck) and both completed successfully.
• Ran lint (npm run lint) and fixed import/type issues introduced by the refactor, and lint passed.
• Ran the unit test suite (npm test) and all tests related to the flow console passed.

---

Codex Task

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
flow	Ready	Preview, Comment	Jun 20, 2026 8:10am

[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 49 minutes and 2 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: b69ce8a5-2cb9-4db4-b205-7db7fd80f835

📥 Commits

Reviewing files that changed from the base of the PR and between 21c0e1e and e63ded5.

📒 Files selected for processing (4)

• src/components/FlowConsole.module.css
• src/components/FlowConsole.tsx
• src/components/MessageRow.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-unz6mw

---

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.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e63ded5d4d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve reader vertical scrolling

When a conversation is open, this rule also applies to .reader and the overflow shorthand overrides the earlier overflow-y: auto with overflow-y: hidden. Because .readerThread has no constrained height of its own, long conversations or message bodies are clipped instead of scrollable. Keep vertical overflow enabled for the reader while applying the new card styling.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Keep the message list in the scroll row when status is shown

Adding this unconditional insight bar means the list pane has four children whenever status is non-null (toolbar, insight bar, status, message list), but .listPane still defines only three grid rows. In those status scenarios, the message list is auto-placed into an implicit row after the flexible track and gets clipped by the pane's overflow: hidden instead of remaining the scrollable area. Add a fourth row or explicitly place the status/list rows.

Useful? React with 👍 / 👎.