Add collapsible header control to the active plan container#1073
Add collapsible header control to the active plan container#1073anghelmatei wants to merge 4 commits intopingdotgg:mainfrom
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment Tip Migrating from UI to YAML configuration.Use the |
github-actions
bot
added
size:L
There was a problem hiding this comment.
Pull request overview
Adds a collapsible, sticky “Active Plan” card at the top of the chat timeline so users can reduce vertical space while keeping plan status visible, and adds browser coverage to verify the collapse/expand behavior.
Changes:
- Introduces
ActivePlanCardwith a header-only collapsed state and an accessible toggle control. - Pins the active plan above the timeline and tracks collapsed state in
ChatViewso it survives rerenders. - Adds a browser test snapshot + interaction test for collapsing/expanding the active plan card.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/web/src/components/chat/ActivePlanCard.tsx | New UI component for displaying active plan header + (optional) body with steps and collapse toggle. |
| apps/web/src/components/ChatView.tsx | Renders the sticky active plan card and stores collapse state keyed above the card. |
| apps/web/src/components/ChatView.browser.tsx | Adds a dedicated snapshot and browser test validating collapse/expand behavior and header visibility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| () => deriveActivePlanState(threadActivities, activeLatestTurn?.turnId ?? undefined), | ||
| [activeLatestTurn?.turnId, threadActivities], | ||
| ); | ||
| const activePlanCollapseKey = activePlan ? (activePlan.turnId ?? activePlan.createdAt) : null; |
| timestampFormat, | ||
| onToggleCollapsed, | ||
| }: ActivePlanCardProps) { | ||
| const keyedSteps = buildKeyedSteps(activePlan.steps); |
| onToggleCollapsed={() => { | ||
| if (activePlanCollapseKey) { | ||
| onToggleActivePlanCollapsed(activePlanCollapseKey); | ||
| } | ||
| }} | ||
| /> |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Closes #1029
What Changed
PlanandUpdated ...visibleWhy
The active plan container could take up too much vertical space once a plan was generated, and there was no quick way to collapse it while still keeping plan status visible. It also sat slightly out of alignment with nearby timeline sections, which made the layout feel off.
This approach keeps the change narrowly scoped to the active plan container, preserves the existing pinned/in-place update behavior, and stores collapse state above the card so it survives normal rerenders.
UI Changes
Before:
After:
PlanandUpdated ...visible while collapsedExpanded
Collapsed
Video:
2026-03-14.14-33-30.mp4
Checklist
Note
Add collapsible
ActivePlanCardto the active plan container inChatViewActivePlanCardcomponent that renders a sticky plan card above the message timeline, showing a 'Plan' badge, last-updated timestamp, optional explanation, and step list with status badges.ChatViewtracks collapse state per plan key (preferringturnId, falling back tocreatedAt) so each plan's expanded/collapsed state is remembered independently within a session.MessagesTimeline'shasMessagesprop is nowtruewhen an active plan is present, even if there are no timeline entries.ChatView.browser.tsxverifies that clicking the collapse/expand button hides and restores plan step text.Macroscope summarized 9004ff7.