Add collapsible reasoning section to detail panel#1894
Add collapsible reasoning section to detail panel#1894yuyutaotao wants to merge 2 commits intomainfrom
Conversation
…collapsible - Remove onMouseEnter/onMouseLeave props from Card component (unused, all callers passed noop) - Add CollapsibleCard component for reasoning content display - Reasoning sections are now collapsed by default with click-to-expand functionality - Add corresponding styles for collapsible card with dark mode support https://claude.ai/code/session_01KUHFq6fmLk3tJfdAqpNFes
✅ Deploy Preview for midscene ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fd089ac161
ℹ️ 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".
| planItems.push( | ||
| <Card | ||
| <CollapsibleCard | ||
| key="reasoning" | ||
| liteMode={true} | ||
| title="reasoning" | ||
| onMouseEnter={noop} | ||
| onMouseLeave={noop} | ||
| content={ | ||
| <pre className="description-content">{reasoningContent}</pre> | ||
| } | ||
| content={reasoningContent} |
There was a problem hiding this comment.
Because CollapsibleCard keeps its own useState and is keyed as a constant (key="reasoning"), React will reuse the same instance when you switch between tasks that both have reasoning. That means if a user expands one task’s reasoning, the next task’s reasoning will stay expanded, which contradicts the “collapsed by default” behavior described in the PR. This shows up whenever you navigate between tasks in the detail panel. Consider keying by task identity (or resetting state in an effect when content changes) so each task’s reasoning starts collapsed.
Useful? React with 👍 / 👎.
Deploying midscene with
|
| Latest commit: |
e65685f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4f90d6ca.midscene.pages.dev |
| Branch Preview URL: | https://claude-refactor-detail-displ.midscene.pages.dev |
2 participants
Summary
This PR adds a collapsible card component for the reasoning content in the detail side panel, improving the UI by allowing users to expand/collapse the reasoning section on demand. The reasoning section is now collapsed by default to reduce visual clutter.
Key Changes
.title-collapsibleand.item-collapsiblestyles with hover effects and dark mode supportonMouseEnterandonMouseLeaveprops from Card component and removed thenoopfunction as they were no longer being usedImplementation Details
useStatehook to manage collapsed state with a default oftrue(collapsed by default)https://claude.ai/code/session_01KUHFq6fmLk3tJfdAqpNFes