feat(explorer): update menu with chonk button and session history switcher #103135
+657
−441
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| @@ -0,0 +1,307 @@ | |||
| import {Activity, useCallback, useEffect, useMemo, useState} from 'react'; | |||
There was a problem hiding this comment.
Bug: Activity is imported from 'react' but is not exported by React, resulting in undefined when used as a JSX component.
Severity: CRITICAL | Confidence: 1.00
🔍 Detailed Analysis
When the ExplorerMenu component renders, React attempts to render <Activity>. Since Activity is incorrectly imported from 'react' (which does not export it), it will be undefined. This leads to a runtime error: Error: Cannot use 'Activity' as a JSX component. 'Activity' is 'undefined', causing the ExplorerMenu feature to crash and break the UI.
💡 Suggested Fix
Either define Activity as a styled component within explorerMenu.tsx or import it from its correct source, as React does not export it.
🤖 Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: static/app/views/seerExplorer/explorerMenu.tsx#L1
Potential issue: When the `ExplorerMenu` component renders, React attempts to render
`<Activity>`. Since `Activity` is incorrectly imported from 'react' (which does not
export it), it will be `undefined`. This leads to a runtime error: `Error: Cannot use
'Activity' as a JSX component. 'Activity' is 'undefined'`, causing the ExplorerMenu
feature to crash and break the UI.
Did we get this right? 👍 / 👎 to inform future reviews.
Member
Author
There was a problem hiding this comment.
this is a fancy new thing from react 19 I wanted to try out, we should be able to use it right?
https://react.dev/reference/react/Activity
I thought it's good optimization, since the state updates, session fetching, slash command filtering etc can keep going on in the background even while the menu's closed
Member
There was a problem hiding this comment.
i'm not sure what version of react we're on, i also have no idea how this thing works
Member
Author
There was a problem hiding this comment.
based on package.json and dev-ui workng I think we can use.
see the reference - basically react has different "priorities" for rendering work, state updates, data fetching etc. AFAIK is just like hiding a component with CSS display="none", but all the work for it is scheduled on the lowest priority. So the work is still done in the background when it's hidden and the rest of the UI isn't busy. Then when switching to "visible" the component is immediately ready for use.
There's a good chance all this is unnoticeable for such a simple component but wanted to take this chance to try it 🚀
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
❌ 9 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
roaga
approved these changes
Nov 11, 2025
Member
There was a problem hiding this comment.
i really like the ux, good stuff
trusting you on the react 19 stuff, idk how it works
UI nits:
- I think the menu button should be inset by a few pixels so it's not flush with the edge of the panel
- there is something overriding the border radius and making it a sharp corner which should be removed in favor of the default rounding on our Button component
- I think it would be nicer if it functioned similar to other dropdown buttons in the UI where it stays pressed in as long as the menu is open
- The "last updated at" text would be nice if it was written out instead of MM/DD/YYYY. I think there are utils in the codebase that'll make it easy, like the issue details first seen/last seen text
| @@ -0,0 +1,307 @@ | |||
| import {Activity, useCallback, useEffect, useMemo, useState} from 'react'; | |||
Member
There was a problem hiding this comment.
i'm not sure what version of react we're on, i also have no idea how this thing works
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
AIML-1100: let users resume old sessions from welcome screen
Main functionality:
Screen.Recording.2025-11-11.at.10.22.26.AM.mov
Keyboard listener updates:
When menu is open:
When menu is closed, not polling, and interrupt not requested: ESC minimizes the whole panel
Else when menu is closed: ESC interrupts the current chat (same as before)
Screen.Recording.2025-11-11.at.10.24.04.AM.mov