Annotation Tools
The overlay’s tools live in the radial menu. Hold the menu trigger to summon it, then release on a slice to pick a tool.
The menu is grouped into five slices:
| Slice | Tools |
|---|---|
| Drawing | Pointer (Select), Pencil, Brush, Rectangle / Rectangle-filled, Circle / Circle-filled, Line, Arrow |
| Pen Size | Interactive size picker (1 px – 24 px) |
| Text & Comments | Text, Note (comment-area), Bubble (comment-bubble) |
| Utilities | Area (session-area), Blur, Emoji |
| History | Undo, Redo |
Tool Details
| Tool | What it does |
|---|---|
| Pointer (Select) | Click an object to select; drag to move; Delete/Backspace removes; PageUp/PageDown reorder z-index. |
| Pencil | Freehand stroke. |
| Brush | Thicker / softer freehand. |
| Rectangle | Outline-only rectangle. |
| Rectangle-filled | Solid-fill rectangle. |
| Circle | Outline-only ellipse. |
| Circle-filled | Solid-fill ellipse. |
| Line | Straight line between two points. |
| Arrow | Straight arrow with a head. |
| Text | Place a free-floating text annotation. Click to start; type into the textarea; Esc commits, Enter inserts a newline. |
Note (comment-area) | The primary feedback tool — see Comment Workflow. |
Bubble (comment-bubble) | Speech-bubble text anchored to a single point rather than a rectangle. |
Area (session-area) | Crop region for the final submitted screenshot.png. Single rectangle per overlay; minimum 20×20 px. |
| Blur | Click-drag a rectangle; Xenocept replaces those pixels (in the overlay) with a blurred copy of the underlying background. Stored as an ordinary canvas object with a pre-rendered blurCanvas — fully undoable like any other tool. |
| Emoji | Place an emoji glyph at the click point. |
| Undo / Redo | Walk the undo/redo stacks. Equivalent to Ctrl+Z / Ctrl+Shift+Z. |
The Markup Layer
The overlay uses a four-canvas architecture:
canvas-background— the captured screenshotcanvas-drawing— committed annotations (the markup layer)canvas-preview— the live in-progress drawcanvas-overlay— handles, selection highlights, hover affordances
The markup layer is not baked into the background image until Submit. Selecting and moving an object, or swapping the background, doesn’t lose your markup — it lives independently.
Submit Composites the Layers
When you Submit, the frontend composites the markup layer onto the background and uploads the result as screenshot.png. For each Note, it renders the focus area (with its annotations baked in) and uploads focus-{i}.png. The clean (background-only, no markup) version uploads as screenshot-clean.png if your build’s frontend opts to send it.
Blur is just an ordinary canvas object that happens to render as a blurred patch — fully undoable like any other tool. If you draw a blur and Submit, the blur is in the final PNG; if you draw a blur, undo it, then Submit, the blur is not in the final PNG.
Keyboard Shortcuts
Only a small set of keys are bound:
| Key | Action |
|---|---|
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z | Redo |
Escape | Commits an in-progress text editor; otherwise cascades through cancel/deselect/hide (see UX Philosophy) |
Delete / Backspace | Delete the current selection |
PageUp / PageDown | Move selection up/down in z-order |
Single-letter tool shortcuts are not bound. Use the radial menu to switch tools.
To remove an object, select it with the Pointer and press Delete.