Comment (Note) Workflow

The Note tool — comment-area in the radial menu — is the primary feedback mechanism. Each Note is a rectangular focus region paired with a written description anchored to one of its sides.

This page walks through exactly what happens, click by click.

Pick the Tool

Hold the radial menu trigger; release on Note (the ⊡ slice in the “Text & Comments” group). The active tool is now Note.

Drag the Focus Area

Click and drag a rectangle around the region of the screen you want to talk about. Release the mouse — the rectangle is committed as the focus area.

The focus area is the region whose pixels (with any annotations you draw inside it later) get captured into focus-{i}.png on Submit.

The Side-Pick Phase

After release, the overlay enters a side-pick phase. Hover near any of the four sides of the focus rectangle — top, bottom, left, right — and you’ll see the side-pick affordance.

Click one of the sides. That’s where the description textarea will sit.

The side-pick is mandatory; the Note isn’t created until you commit a side.

Type the Description

A textarea appears on the chosen side. Type your description.

Key behavior:

• Esc commits the text and closes the textarea
• Enter inserts a newline
• The Confirm button hovering near the textarea also commits; its tooltip is “Confirm (or press Esc)”

Yes — this is the opposite of what most editors do with Enter and Esc. The choice exists because comments often want multi-line descriptions (“the dropdown is cut off — see the second screenshot too — also the spacing on the right…”), so Enter is reserved for line breaks. Esc is the commit so the keyboard never gets a second meaning for the same key.

What Just Got Created

The Note is now a canvas object. It has:

• A focus rectangle (the focus_x / focus_y / focus_width / focus_height bounds you dragged)
• A side (the one you clicked)
• A text (what you typed)

That’s the in-memory state. The PNG of the focus crop is not captured here — it’s captured at Submit time, when the frontend renders the focus area with its annotations and uploads it.

Editing After Creation

Switch to the Pointer tool (or hit the menu and switch). Click the Note’s focus rectangle to select it. From there:

• Drag the rectangle to move it
• Double-click the focus rectangle to re-open the textarea for editing
• Delete / Backspace removes the Note

While editing the text, Esc commits / Confirm commits (same keys as creating).

Multiple Notes

There’s no limit. Make as many as you want; each one captures its own focus-{i}.png on Submit. Notes can overlap; they live independently.

What Gets Submitted

When you press Submit, the frontend:

1. Renders the canvas background + markup + each Note’s focus crop separately.
2. Uploads screenshot.png (the full annotated frame, optionally cropped to the session-area), screenshot-clean.png (background only, no markup), and one focus-{i}.png per Note.
3. Posts session.json with the structured comments array — see Session JSON Schema.