Skip to content

feat: the Marker draws on a snapshot of the page and sends it as one comment - #92

Merged
vite-hub[bot] merged 2 commits into
mainfrom
feat/marker-snapshot
Oct 30, 2026
Merged

vite-hub[bot] merged 2 commits into
mainfrom
feat/marker-snapshot

Conversation

@onmax

@onmax onmax commented Oct 30, 2026 •

Copy link
Copy Markdown
Member

Reviewers like to highlight what they mean, so the review dock gets a Marker. It works on docs, images, HTML, and apps, and was prototyped in Drop first: https://drop.vitehub.dev/d/k78bnxeyen9v/markup-tools-prototype (round 2 is what this builds).

How it works

  • Marker (B) sits in the review toolbar next to Browse and Measure. Pressing it, or B while you point at something, freezes the page as it is. The dock then turns into the Marker's tools, the way Mark area swaps it:
    • Snapshot, then Marker, Pen, and Arrow (B, P, A)
    • four sizes per tool ([ and ])
    • four inks
    • Undo (⌘Z), Cancel, and Done (Enter)
  • Freezing builds on bc755a5's hold: the page hears no pointer events while a tool is on. The Marker adds the part the hold can't do. Each :hover rule also matches [data-drop-hover] on whatever the pointer was over, so a tooltip shown only by CSS stays open as well. That's the case bc755a5 lists as still closing.
  • Done waits for the viewport screenshot, which starts as the page freezes. It draws the strokes on that screenshot, cut to the strokes with some room around them (at least 640×360), and posts one area comment anchored to the smallest element under the strokes. The comment's quote holds the words under the strokes: a marker's width, a pen's line, the inside of a loop drawn with the pen, and the word an arrow points at. The picture follows as the area's area-shot, so it takes the same attach-and-wait path as bc755a5's tooltip pictures.
  • The note is optional for a new comment that has images. The server still rejects a comment with no words and no images. Replies still need words.
  • Agents: read_drop and Copy feedback describe a marked area as [the area … of <element>] marking > <words>, and fetch the picture from Images: like any comment image.

Checked

  • pnpm fmt --check, lint, knip, typecheck, doctor (0 warnings), and pnpm test (386 passed).
  • New test/viewer/marker-browser.test.mjs (Playwright, screenshot module stubbed):
    • a CSS-only hover tooltip stays open under the Marker
    • the words under a stroke come back as the quote
    • the area-shot carries a WebP
    • the stroke stays on the page while the comment is written
    • the page unfreezes on Browse
    • ⌘Z and Escape work from the frame
  • New cases in test/viewer/comment-area.test.mjs for the keys, sizes, the quote, the picture, and where the Marker stays off.
  • End to end against nuxt dev (VPS mode) in Chromium:
    • HTML doc: hover a tooltip, press B, mark a sentence, draw an arrow, Done, write a note, send. The comment comes back as kind: "area" with the quote and screenshot.webp (640×360, strokes drawn on).
    • Markdown doc: Marker from the toolbar button, Enter to finish, sent with no note. It comes back with body: "" and the picture.

Not in this PR

  • Boards and sites: sites draw on their own screenshots (ViewerSite).
  • The strokes aren't stored as vectors. After sending, the page shows the usual area outline, and the strokes live in the picture.
  • The :hover freeze applies only to the Marker. The Comment tool (R) could use it too.
  • No before/after evidence doc yet.

🤖 Generated with Claude Code

…comment

Marker (B) joins the review toolbar on docs, images, HTML, and apps. It freezes the page as it is, and the dock turns into its tools: marker, pen, and arrow (B, P, A), four sizes each ([ and ]), four inks, Undo (⌘Z), Cancel, and Done (Enter). Under the hold the page hears no pointer, and each :hover rule also matches [data-drop-hover] on what the pointer was over, so even a tooltip shown only by CSS stays open. Done posts one area comment anchored to what the strokes cover, quoting the words under them, and its "area-shot": the snapshot cut to the strokes, with the strokes drawn on. The note is optional when a new comment has images.
@vite-hub

vite-hub Bot commented Oct 30, 2026 •

Copy link
Copy Markdown
Contributor
Session Status Started Duration
Pending Completed Not started —
View session Last seen running 2026-10-30T11:21:21.798Z 1s

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

Session

Waiting for GitHub merge request a32eb04b-cbd8-4bf2-bfb0-157a4cbdbf20.

Session

Pushed 67eee44 and resolved all five threads. Fixed Pullfrog P1 shadow-root hover and arrow bounds; Codex P1 keyboard scrolling and copied image URLs, plus the P2 canceled-session race. Regressions reproduced before repair. All 23 focused tests, focused vp lint, vp fmt --check, and git diff --check passed. Awaiting hosted checks and review.

Session

Pushed 67eee44 and resolved all five threads. Fixed Pullfrog P1 shadow-root hover and arrow bounds; Codex P1 keyboard scrolling and copied image URLs, plus the P2 canceled-session race. Regressions reproduced before repair. All 23 focused tests, focused vp lint, vp fmt --check, and git diff --check passed. Awaiting hosted checks and review.

Session

Pushed 67eee44 and resolved all five threads. Fixed Pullfrog P1 shadow-root hover and arrow bounds; Codex P1 keyboard scrolling and copied image URLs, plus the P2 canceled-session race. Regressions reproduced before repair. All 23 focused tests, focused vp lint, vp fmt --check, and git diff --check passed. Awaiting hosted checks and review.

Session

Waiting for running checks before the next pass.

Session

Waiting for running checks before the next pass.

Session

Waiting for running checks before the next pass.

Session

Waiting for running checks before the next pass.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-30T11:14:34.415265Z 4f99e19 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4f99e191bc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread shared/plan-runtime.ts Resolved
Comment thread shared/plan-runtime.ts Resolved
Comment thread app/utils/feedback.ts Resolved

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

The Marker loses valid CSS-only hover UI in shadow-DOM apps, and finished arrows can persist an area smaller than the visible mark. Both should be corrected before merging.

Reviewed changes across the Marker capture flow, frame protocol, comment composer/API contract, agent formatting, documentation, and focused tests.

  • Marker runtime — adds page freezing, marker/pen/arrow drawing, marked-text extraction, screenshot composition, anchoring, and undo/done handling inside framed content.
  • Viewer integration — adds toolbar controls and shortcuts, sends pen state to the frame, correlates asynchronous area screenshots, and keeps the mark visible while the comment is composed.
  • Image-only comments — permits a new comment with images and no text while preserving the server requirement that at least one of those is present and keeping replies text-required.
  • Output and coverage — updates MCP/copy rendering and docs, bundles runtime-selected icons, and adds composable and Playwright tests for the main light-DOM flow.

Pullfrog  | Fix all ➔ | Fix 👍s ➔ | View workflow run | Using gpt-5.6-sol | 𝕏

Comment thread shared/plan-runtime.ts Resolved
Comment thread shared/plan-runtime.ts Resolved

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes since the prior Pullfrog review, covering the follow-up fix commit and its focused regressions.

  • Preserved shadow-root hover state — traversed nested open shadow roots, mirrored inline and adopted :hover styles in their owning roots, and cleaned up temporary state when Marker exits.
  • Bounded rendered arrows correctly — derived persisted areas and anchors from each SVG path's rendered geometry rather than pointer endpoints.
  • Hardened capture lifecycle — rejected completions from canceled Marker sessions and locked keyboard scrolling while viewport-relative capture is active.
  • Completed copied feedback — included absolute attachment URLs for comments and replies, with regression coverage for image-only feedback.

Pullfrog  | View workflow run | Using gpt-5.6-sol | 𝕏

@vite-hub
vite-hub Bot merged commit 8d7d4e7 into main Oct 30, 2026
2 checks passed
@onmax
onmax deleted the feat/marker-snapshot branch November 1, 2026 10:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant