Owen-Richard · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026
@@ -1,12 +1,42 @@
 // @vitest-environment jsdom
 import { describe, expect, it, vi } from "vitest"
 
+import type { AnnotationShortcutModule } from "@/test/as-trusted-keyboard-event"
 import { REVIEW_ANCHOR_SCHEMA } from "@utils/review-anchor/schemas"
 import { installBridge } from "./index"
 
+vi.mock("@utils/is-annotation-shortcut", async (importOriginal) => {
+  const actual = await importOriginal<AnnotationShortcutModule>()
+  const { asTrustedKeyboardEvent } = await import("@/test/as-trusted-keyboard-event")
+  return {
+    ...actual,
+    isAnnotationShortcut(event: KeyboardEvent) {
+      return actual.isAnnotationShortcut(asTrustedKeyboardEvent(event))
+    },
+  }
+})
+
 const origin = "http://127.0.0.1:1234"
 const installed = Symbol.for("replica.canvas.bridge.v1")
 
+function pointerDown(
+  target: EventTarget,
+  { button = 0, isPrimary = true }: { button?: number; isPrimary?: boolean } = {},
+) {
+  const event = new MouseEvent("pointerdown", { bubbles: true, cancelable: true, button })
+  Object.defineProperty(event, "isPrimary", { value: isPrimary })
+  target.dispatchEvent(event)
+  return event
+}
+
+function request(
+  data: Record<string, unknown>,
+  requestOrigin = origin,
+  source: Window | null = window,
+) {
+  window.dispatchEvent(new MessageEvent("message", { origin: requestOrigin, source, data }))
+}
+
 function isSelectionMessage(message: unknown): message is Record<string, unknown> {
   return (
     typeof message === "object" &&
@@ -68,6 +98,186 @@ function withSelection(run: (selection: ReturnType<typeof setup>) => void) {
 }
 
 describe("installBridge() improvement selection", () => {
+  it("requests conversation dismissal for an ordinary primary preview pointer without blocking it", () => {
+    const bridgeWindow = window as Window & { [installed]?: () => void }
+    const target = document.createElement("button")
+    const handled = vi.fn()
+    target.addEventListener("pointerdown", handled)
+    document.body.append(target)
+    const post = vi.spyOn(window, "postMessage")
+    installBridge(origin)
+    request({ type: "replica:canvas:resolve", nonce: "current", anchors: [] })
+    post.mockClear()
+    try {
+      const event = pointerDown(target)
+      expect(event.defaultPrevented).toBe(false)
+      expect(handled).toHaveBeenCalledOnce()
+      expect(post).toHaveBeenCalledExactlyOnceWith(
+        {
+          type: "replica:canvas:conversation-dismiss-requested",
+          nonce: "current",
+          restoreFocus: false,
+        },
+        origin,
+      )
+    } finally {
+      bridgeWindow[installed]?.()
+      target.remove()
+    }
+  })
+
+  it.each([
+    ["before a resolve", "none"],
+    ["while selection is active", "selection"],
+    ["for a secondary pointer", "secondary"],
+    ["for a non-primary pointer", "non-primary"],
+  ])("does not request conversation dismissal %s", (_label, action) => {
+    const bridgeWindow = window as Window & { [installed]?: () => void }
+    const target = document.createElement("button")
+    document.body.append(target)
+    const post = vi.spyOn(window, "postMessage")
+    installBridge(origin)
+    if (action !== "none") {
+      request({ type: "replica:canvas:resolve", nonce: "current", anchors: [] })
+      if (action === "selection")
+        request({ type: "replica:canvas:select", nonce: "selection", mode: "improvement" })
+    }
+    post.mockClear()
+    try {
+      pointerDown(target, {
+        button: action === "secondary" ? 1 : 0,
+        isPrimary: action !== "non-primary",
+      })
+      expect(post).not.toHaveBeenCalledWith(
+        expect.objectContaining({ type: "replica:canvas:conversation-dismiss-requested" }),
+        expect.anything(),
+      )
+    } finally {
+      bridgeWindow[installed]?.()
+      target.remove()
+    }
+  })
+
+  it("clears dismissal and shortcut state when reinstalled", () => {
+    const bridgeWindow = window as Window & { [installed]?: () => void }
+    const target = document.createElement("button")
+    document.body.append(target)
+    const post = vi.spyOn(window, "postMessage")
+    installBridge(origin)
+    request({ type: "replica:canvas:resolve", nonce: "first", anchors: [] })
+    request({
+      type: "replica:canvas:request-ready",
+      nonce: "shortcut",
+      selectionShortcut: true,
+    })
+    installBridge(origin)
+    post.mockClear()
+    pointerDown(target)
+    const shortcut = new KeyboardEvent("keydown", {
+      key: "s",
+      bubbles: true,
+      cancelable: true,
+    })
+    target.dispatchEvent(shortcut)
+    expect(shortcut.defaultPrevented).toBe(false)
+    expect(post).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "replica:canvas:conversation-dismiss-requested",
+      }),
+      origin,
+    )
+    expect(post).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "replica:canvas:selection-toggle-requested",
+      }),
+      origin,
+    )
+
+    bridgeWindow[installed]?.()
+    target.remove()
+  })
+
+  it("forwards S only while opted in and uses the current shortcut request nonce", () => {
+    const post = vi.spyOn(window, "postMessage")
+    const bridgeWindow = window as Window & { [installed]?: () => void }
+    installBridge(origin)
+    function press(key = "s") {
+      const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true })
+      document.dispatchEvent(event)
+      return event
+    }
+    const optIn = {
+      type: "replica:canvas:request-ready",
+      nonce: "first-shortcut",
+      selectionShortcut: true,
+    }
+    try {
+      expect(press().defaultPrevented).toBe(false)
+      request(optIn)
+      post.mockClear()
+      expect(press().defaultPrevented).toBe(true)
+      expect(post).toHaveBeenCalledExactlyOnceWith(
+        { type: "replica:canvas:selection-toggle-requested", nonce: "first-shortcut" },
+        origin,
+      )
+
+      request({ ...optIn, nonce: "current-shortcut" })
+      request({ ...optIn, selectionShortcut: false })
+      post.mockClear()
+      expect(press("S").defaultPrevented).toBe(true)
+      expect(post).toHaveBeenCalledExactlyOnceWith(
+        { type: "replica:canvas:selection-toggle-requested", nonce: "current-shortcut" },
+        origin,
+      )
+      request({ ...optIn, nonce: "current-shortcut", selectionShortcut: false })
+      post.mockClear()
+      expect(press().defaultPrevented).toBe(false)
+      expect(post).not.toHaveBeenCalled()
+    } finally {
+      bridgeWindow[installed]?.()
+    }
+  })
+
+  it("respects a shortcut handled by the prototype", () => {
+    const post = vi.spyOn(window, "postMessage")
+    const bridgeWindow = window as Window & { [installed]?: () => void }
+    const target = document.createElement("button")
+    document.body.append(target)
+    installBridge(origin)
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        origin,
+        source: window,
+        data: {
+          type: "replica:canvas:request-ready",
+          nonce: "shortcut",
+          selectionShortcut: true,
+        },
+      }),
+    )
+    function handledByPrototype(event: KeyboardEvent) {
+      event.preventDefault()
+    }
+    target.addEventListener("keydown", handledByPrototype)
+    post.mockClear()
+    try {
+      const shortcut = new KeyboardEvent("keydown", {
+        key: "s",
+        bubbles: true,
+        cancelable: true,
+      })
+      target.dispatchEvent(shortcut)
+      expect(shortcut.defaultPrevented).toBe(true)
+      expect(post).not.toHaveBeenCalledWith(
+        expect.objectContaining({ type: "replica:canvas:selection-toggle-requested" }),
+        expect.anything(),
+      )
+    } finally {
+      bridgeWindow[installed]?.()
+      target.remove()
+    }
+  })
+
   it("picks an element without activating its underlying control", () => {
     withSelection(({ target, pointer, anchor }) => {
       const activated = vi.fn()

@@ -1,5 +1,6 @@
 import { installControlsBridge } from "./controls"
 import { targetIssue } from "@utils/prototype-controls/dom-target.mjs"
+import { isAnnotationShortcut } from "@utils/is-annotation-shortcut"
 
 type ReviewRoute = { pathname: string; search: string; hash: string }
 type AnchorRect = { x: number; y: number; width: number; height: number }
@@ -40,6 +41,7 @@ type ElementMatch = Pick<ElementAnchor, "selector" | "accessibleName" | "tagName
 const BRIDGE_ATTRIBUTE = "data-replica-canvas-bridge"
 const TEXT_ENCODER = new TextEncoder()
 let parentOrigin: string | null = null
+let selectionShortcutNonce: string | null = null
 let cleanupActiveSelection: (() => void) | null = null
 let selectedOverlay: HTMLElement | null = null
 let selectedOverlayTarget: Element | null = null
@@ -740,6 +742,9 @@ function receiveCanvasMessage(event: MessageEvent<unknown>) {
   }
 
   if (data.type === "replica:canvas:request-ready") {
+    if (data.selectionShortcut === true) selectionShortcutNonce = data.nonce
+    else if (data.selectionShortcut === false && selectionShortcutNonce === data.nonce)
+      selectionShortcutNonce = null
     post(event.origin, {
       type: "replica:canvas:ready",
       protocolVersion: 1,
@@ -870,6 +875,7 @@ export function installBridge(origin: string) {
   if (typeof previous === "function") previous()
   selectionAccent = "light-dark(#0969da, #58a6ff)"
   parentOrigin = origin
+  selectionShortcutNonce = null
   resolvedRequest = null
   resolvedRoute = ""
   resolvedGeometry.clear()
@@ -926,10 +932,35 @@ export function installBridge(origin: string) {
       })
     }, 0)
   }
+  function handlePointerDown(event: PointerEvent) {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.isPrimary === false ||
+      cleanupActiveSelection ||
+      !resolvedRequest
+    )
+      return
+    post(origin, {
+      type: "replica:canvas:conversation-dismiss-requested",
+      nonce: resolvedRequest.nonce,
+      restoreFocus: false,
+    })
+  }
+  function handleSelectionShortcut(event: KeyboardEvent) {
+    if (!selectionShortcutNonce || !isAnnotationShortcut(event)) return
+    event.preventDefault()
+    post(origin, {
+      type: "replica:canvas:selection-toggle-requested",
+      nonce: selectionShortcutNonce,
+    })
+  }
   window.addEventListener("message", receiveCanvasMessage)
   window.addEventListener("scroll", handleScroll, { capture: true, passive: true })
   window.addEventListener("resize", handleResize)
   window.addEventListener("keydown", handleEscape)
+  window.addEventListener("keydown", handleSelectionShortcut)
+  window.addEventListener("pointerdown", handlePointerDown, true)
   const mutations = new MutationObserver((entries) => {
     if (
       entries.some(
@@ -955,6 +986,9 @@ export function installBridge(origin: string) {
     window.removeEventListener("scroll", handleScroll, true)
     window.removeEventListener("resize", handleResize)
     window.removeEventListener("keydown", handleEscape)
+    window.removeEventListener("keydown", handleSelectionShortcut)
+    window.removeEventListener("pointerdown", handlePointerDown, true)
+    selectionShortcutNonce = null
     mutations.disconnect()
     resize?.disconnect()
     if (geometryFrame !== null) window.cancelAnimationFrame(geometryFrame)

@@ -274,6 +274,10 @@ describe("PrototypeCanvasHubPanel()", () => {
       expect(toggle).toHaveAttribute("aria-expanded", String(commentsOpen))
       receive({ type: "replica:canvas:conversation-dismiss-requested", nonce: "wrong-frame" })
       expect(dialog).toBeInTheDocument()
+      act(() => frameRef.current!.focus())
+      receive({ type: "replica:canvas:conversation-dismiss-requested", restoreFocus: false })
+      expect(dialog).toBeInTheDocument()
+      expect(frameRef.current).toHaveFocus()
       receive({ type: "replica:canvas:conversation-dismiss-requested" })
       expect(dialog).not.toBeInTheDocument()
       expect(toggle).toHaveAttribute("aria-expanded", String(commentsOpen))

@@ -690,7 +690,11 @@ export function PrototypeCanvasHubPanel({
       }
       if (incompatible) return
       if (data.type === "replica:canvas:conversation-dismiss-requested") {
-        window.dispatchEvent(new Event("replica:review-dismiss"))
+        window.dispatchEvent(
+          new CustomEvent("replica:review-dismiss", {
+            detail: { restoreFocus: data.restoreFocus !== false },
+          }),
+        )
         return
       }
       if (data.type === "replica:canvas:resolved") {

@@ -6,15 +6,20 @@ export const copy = {
   sourceUnavailable:
     "You can still save this improvement locally, but it cannot sync without a captured source.",
   annotate: "Pick & polish",
-  openNotes: (count: number) => `Open improvement notes (${count})`,
-  notes: "Pick & polish",
+  annotateShortcut: "Add note",
+  openNotes: (count: number) => `Open Notes (${count})`,
+  closeNotes: (count: number) => `Close Notes (${count})`,
+  notes: "Notes",
   selectHint:
-    "Click an element or drag a rectangle. For a keyboard region, focus the preview, press Shift+Enter, then use arrows and Enter to choose two corners. Escape exits annotation mode.",
+    "Hover to highlight, then click an element or drag a rectangle. S toggles selection. For a keyboard region, focus the preview, press Shift+Enter, then use arrows and Enter to choose two corners. Escape exits annotation mode.",
   regionSmall: "Choose a larger region, at least 8 preview pixels wide and high.",
-  add: "Add improvement note",
+  add: "Add note",
   label: "What should change?",
-  placeholder: "Describe the improvement you want Copilot to make...",
-  save: "Save note",
+  placeholder: "Describe what you want Copilot to change...",
+  save: "Save",
+  saveShortcutMac: "⌘",
+  saveShortcutOther: "Ctrl",
+  saveShortcutEnter: "↵",
   cancel: "Cancel",
   discard: "Discard draft",
   keep: "Keep writing",