ui/ux feat: add right-click menu item (jump to last checkpoint)

[dlab-anton]

Context

I noticed there is no usage of the right-click menu except for default Cut, Copy, Paste. The purpose of this PR is to demonstrate how to add items to the right-click menu so we can potentially use this going forward for more quality of life features.

• I chose "jump to checkpoint" as the demonstration since this targets users at their most frustrated moment (needing to revert, right clicking to discover help). We can also add New Task or others, if anything comes to mind from anyone.
• It is also possible to add more conditionality, for example if you right-click on the Checkpoint row you get special options, but it would be more complex to do things per element (not hard, just complex as we need our own custom context menu). For this task I explicitly used the VS code default context menu and added a row to it for simplicity.

Implementation

PR Description: Establish Pattern for Custom Webview Context Menu Actions

Purpose:

This PR establishes a reusable pattern for adding custom commands to the VS Code context menu within the Roo Cline webview (roo-cline.SidebarProvider and roo-cline.TabPanelProvider). It implements the "Jump to Last Checkpoint" feature as the first example utilizing this pattern, allowing users to navigate the chat view to the most recently saved checkpoint via a right-click action.

Pattern Overview:

The pattern involves three main parts:

1. VS Code Contribution (package.json): Define a new command and add it to the webview/context menu contribution point. This makes the command visible in the webview's right-click menu.
2. Extension Command Handler (Roo-Code/src/activate/registerCommands.ts): Register a command handler in the extension that, when triggered, sends a specific message (e.g., { type: "action", text: "yourActionName" }) to the active webview.
3. Webview Message Handler (Roo-Code/webview-ui/src/components/chat/ChatView.tsx): Update the handleMessage function in the webview to listen for the specific message text sent by the extension command and execute the corresponding frontend logic.

Implementation: "Jump to Last Checkpoint" Example:

This PR applies the pattern described above to implement the "Jump to Last Checkpoint" feature:

1. package.json:

   • Defined the roo-cline.jumpToLastCheckpoint command.
   • Added the command to contributes.menus["webview/context"].

2. Roo-Code/src/activate/registerCommands.ts:

   • Registered the roo-cline.jumpToLastCheckpoint command handler.
   • The handler sends the message { type: "action", text: "jumpToCheckpoint" } to the webview.

3. Roo-Code/webview-ui/src/components/chat/ChatView.tsx:

   • Modified the handleMessage function to check for message.text === "jumpToCheckpoint" within the case "action": block.
   • If matched, it calls the jumpToLastCheckpoint utility function (imported from the newly created checkpoint-navigation.ts).
   • Ensured handleMessage is defined after its dependencies (like groupedMessages) and includes them in its dependency array.

4. Roo-Code/webview-ui/src/utils/checkpoint-navigation.ts (New File):

   • Created this file containing the utility functions (findLastCheckpointIndex, jumpToCheckpoint, etc.) needed for the checkpoint navigation logic.

Adding Future Context Menu Actions:

To add a new custom context menu action in the future, follow this pattern:

1. Define Command & Menu Item: Add a new command and menu entry in package.json.
2. Register Extension Handler: Create a new command handler in registerCommands.ts that sends a unique message (e.g., { type: "action", text: "newFeatureAction" }) to the webview.
3. Update Webview Handler: Add an else if (message.text === "newFeatureAction") { ... } block within the case "action": section of handleMessage in ChatView.tsx to call the relevant frontend function for the new feature.

Files Modified:

• package.json
• Roo-Code/src/activate/registerCommands.ts
• Roo-Code/webview-ui/src/components/chat/ChatView.tsx
• Roo-Code/webview-ui/src/utils/checkpoint-navigation.ts (Created)

Testing:

Manual testing confirmed:

• The "Jump to Last Checkpoint" command appears in the webview context menu and functions correctly.
• The underlying pattern for message passing between the extension and webview for context menu actions is established

---

Important

Adds a right-click menu item to jump to the last checkpoint in the chat view, with command registration and webview handling for seamless navigation.

• Behavior:
  • Adds "Jump to Last Checkpoint" command to right-click menu in package.json.
  • Command navigates chat view to last checkpoint via right-click.
• Command Registration:
  • Registers roo-cline.jumpToLastCheckpoint in registerCommands.ts.
  • Sends { type: "action", text: "jumpToCheckpoint" } to webview.
• Webview Handling:
  • Updates handleMessage in ChatView.tsx to handle jumpToCheckpoint action.
  • Calls jumpToLastCheckpoint from checkpoint-navigation.ts.
• Utilities:
  • Creates checkpoint-navigation.ts for checkpoint navigation logic.
  • Includes functions like findLastCheckpointIndex and jumpToCheckpoint.

^{This description was created by for a0655a2. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: a0655a2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

Consider internationalizing the command title for 'jumpToLastCheckpoint' (e.g., using a placeholder similar to other commands) to ensure consistency with other user-facing texts.

Suggested change

	"title": "Last Checkpoint",
	"title": "%command.jumpToLastCheckpoint.title%",

^{This comment was generated because it violated a code review rule: mrule_JLtLS6tLppVEv8iV.}

[ellipsis-dev]

Consider using a more specific type rather than React.RefObject<any> for the virtuosoRef parameter to improve type safety. Additionally, review the debug console.log statements; they are useful for development but might be removed or replaced with a proper logging mechanism in production.

^{This comment was generated because it violated a code review rule: mrule_QkEwsCio7v34DaCF.}

[sachasayan]

This is a good call-out, but any other functions we'd specifically like to include?

[sachasayan]

(Fwiw: I think "Jump to Last Checkpoint" is a good feature but it does feel weird as a right-click feature.)

[dlab-anton]

(Fwiw: I think "Jump to Last Checkpoint" is a good feature but it does feel weird as a right-click feature.)

Yeah, I agree it feels a bit off. IMO it's the design, not the function per say. For something that feels inherent I would switch it to a two-layer dropdown:

e.g. Checkpoints -> [List of timestamped checkpoints]

For other quick actions maybe new task. Maybe like select all and copy is convenient. MCP servers can have their own dropdowns if they have settings like extensions in chrome. We could add logs if you right click a particular API request "Inspect" and get the raw x, y, z.

[sachasayan]

I'll close this one for now, I think any version of checkpoint jumping is going to use a different mechanism. Let's return to this in a little bit after we've done some other UI changes.