feat(browser): Add comments during browser recordings

[mohswell]

Description

This pull request introduces a new "Add Comment" feature to the browser recording whereby users can now add comments directly in the browser UI, which are then recorded as comment events and displayed as comments in the js test scripts. Users can annotate their browser-based test recordings with comments, improving scripts readability. e.t.c

I had a few approaches to tackle this, but for an interactive experience, a popover that follows the cursor click/placement would be best. That's a comment popover similar to what Figma uses.

The comment added is then shown in the script file:

My TODO's

• I have performed a self-review of my code.
• I have added tests for my changes.
• I have commented on my code, particularly in hard-to-understand areas.
• I understand the implementation does not have a design mockup
• I am open to changing the implmentation to a dropdown in the toolbar instead of the cursor popover

Improvements

• Supporting multi line comments maybe I should use a text area instead of text field input
• Linking the annotation label next to the element to indicate where the comment is placed
• Editing, deleting the comment added by the user
• limiting the number of characters that a inline comment has using a constant like MAX_COMMENT_LENGTH
• improving the cursor popover wth some animations
• I cant figure out whats causing an extra line after adding comment (the space below the comments and the next event).

Related PR(s)/Issue(s)

Resolves #901

[Copilot]

Pull request overview

Adds in-recorder browser comments: users can click in the browser UI to add a comment that’s recorded as a comment event and emitted as a code comment in the generated browser test script.

Changes:

• Extends the browser recording schema and codegen model with a comment event/node, threads it through the intermediate AST, scenario graph, and TypeScript codegen so comments become // ... lines in the generated script.
• Updates browser event list UI to display comment events with an appropriate icon and description.
• Adds an “Add comment” tool to the in-browser recording toolbar, including cursor mode, global styles, and a click-following CommentPopover that sends record-events with type: 'comment'.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/schemas/recording/browser/v2/index.ts	Adds CommentEventSchema and CommentEvent/BrowserEvent typings so type: 'comment' is part of the canonical browser recording schema.
src/components/BrowserEventList/EventIcon.tsx	Displays a MessageSquareTextIcon for comment events in the event list.
src/components/BrowserEventList/EventDescription/EventDescription.tsx	Adds a human-readable description for comment events, showing the comment text inline.
src/codegen/browser/types.ts	Introduces CommentNode and adds it to the TestNode union so comments participate in the browser node graph.
src/codegen/browser/test.ts	Maps comment browser events into CommentNodes in buildBrowserNodeGraph, chaining them via the previous input.
src/codegen/browser/intermediate/variables.ts	Ensures Comment statements pass unchanged through variable substitution.
src/codegen/browser/intermediate/index.ts	Emits CommentNodes into the intermediate IR as Comment statements used by codegen.
src/codegen/browser/intermediate/context.ts	Connects comment nodes in the scenario graph based solely on their previous input so they sit in the execution chain without locators.
src/codegen/browser/intermediate/ast.ts	Defines CommentStatement and extends Statement/Scenario types so comments are first-class IR statements.
src/codegen/browser/codegen.test.ts	Adds a snapshot test ensuring comment nodes result in inline // ... comments in the emitted browser script.
src/codegen/browser/code/scenario.ts	Handles Comment statements by emitting special comment AST nodes used by the printer.
src/codegen/browser/code/options.ts	Treats Comment nodes as non-browser-affecting when determining whether a scenario requires a browser.
src/codegen/browser/__snapshots__/browser/comments.ts	Snapshot showing the generated script with a header and inline comment between navigation and the subsequent action.
extension/src/frontend/view/types.ts	Extends the Tool union with 'add-comment' so the new tool is tracked in UI state.
extension/src/frontend/view/ToolBox/index.tsx	Adds the “Add comment” toggle with tooltip and icon, and routes tool selection events for 'add-comment'.
extension/src/frontend/view/InBrowserControls.tsx	Wires the selected tool to the new Comment component to enable comment mode in the in-browser controls.
extension/src/frontend/view/GlobalStyles.tsx	Adds a commenting global class that changes the cursor to text while the comment tool is active.
extension/src/frontend/view/Comment/index.ts	Re-exports the Comment component for cleaner imports.
extension/src/frontend/view/Comment/CommentPopover.tsx	Implements the positioned popover UI with input and submit button that follows the click position and handles Enter-key submission.
extension/src/frontend/view/Comment/Comment.tsx	Implements the comment tool behavior: sets commenting cursor, intercepts page clicks to position the popover, and sends record-events with the new comment event to the studio client.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[allansson]

Hey! Thanks for the PR!

I've taken a look and I have a few thoughts.

First of all, I don't like how the comment has space after it in the generated output. I've created a separate PR to make the comments stick to the next statement. You can merge that in once it's in main.

Next, I think we should remove the "Click anywhere to write a comment" step. I think the UX is a bit confusing because it doesn't really matter where you click and what you click is not connected to the comment in any way. Clicking the comment icon could just display a popover below the toolbar:

Or even better would be to have a centered dialog with a dimmed background:

Like you say in the PR decriptions, I think it'd be a good idea to make the input a text area. You can add multi-line comments by modifying this code.

const comments = node?.comment.split("\n")
  .flatMap((line, index) => {
    const comment = ["// ", line]

    if (index > 0) {
      return [hardline, ...comment]
    }

    return comment
  })

const doc =
  comments === undefined
    ? estree.print(path, options, print)
    : comments

Finally, while I think the design of the editor popover is nice, it's not consistent with the rest of the UI. In time we might want to take another look at the designs, but until then keeping things consistent is more important. Here's what the text assertion editor looks like:

[mohswell]

To update this content description