opencode-plannotator-tui 0.3.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.4.2 — OpenCode Annotate
+
+The project is now called OpenCode Annotate. It is still published as
+`opencode-plannotator-tui`, because the npm name `opencode-annotate` belongs to an
+unrelated package.
+
+- Fix `/annotate` on OpenCode 2.1.1: the terminal stayed blank and Plannotator TUI
+  never opened, so Ctrl+C then quit the OpenCode client. The plugin now waits for
+  the renderer to suspend and resume.
+- Add webpage review: `/annotate page.html`, `/annotate https://…`, `/annotate web`
+  and `/annotate web off`, with an Annotate HTML-derived Chrome companion and
+  exact-session Native Messaging delivery. Text review is unchanged.
+- The browser companion shows live sessions automatically, preselects a sole target
+  without sending, saves the current note on **Send & continue**, keeps drafts per URL,
+  and filters private values and hidden text from exported context.
+
 ## 0.3.0
 
 - Select older completed replies with `/annotate 2`, `/annotate 3`, and so on.

package/README.md

@@ -1,15 +1,18 @@
-# Plannotator TUI for OpenCode
+# OpenCode Annotate
 
 [![npm](https://img.shields.io/npm/v/opencode-plannotator-tui)](https://www.npmjs.com/package/opencode-plannotator-tui)
 [![CI](https://github.com/nxxxsooo/opencode-plannotator-tui/actions/workflows/ci.yml/badge.svg)](https://github.com/nxxxsooo/opencode-plannotator-tui/actions/workflows/ci.yml)
 [![MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 
-**Annotate an AI reply or a document in your terminal, then send the feedback straight back to OpenCode.**
+**Annotate replies, documents, or live HTML pages, then send feedback to the originating OpenCode session.**
 
-This is an **unofficial OpenCode adapter** for [Plannotator TUI](https://github.com/plannotator/plannotator-tui).
-Plannotator TUI provides the annotation interface. This plugin supplies the commands,
-session targeting, terminal handoff and confirmed feedback delivery. It is not an
-official OpenCode or Plannotator release.
+This is an **unofficial OpenCode plugin**. [Plannotator TUI](https://github.com/plannotator/plannotator-tui)
+provides text review; the [Annotate HTML-derived browser companion](browser/UPSTREAM.md)
+provides webpage review. This repository owns explicit routing, native messaging,
+session targeting, terminal handoff and confirmed feedback delivery.
+
+The npm package is `opencode-plannotator-tui`; the name `opencode-annotate` on npm
+belongs to an unrelated project.
 
 ```text
 /annotate                         Review the last completed assistant reply
@@ -18,6 +21,10 @@ official OpenCode or Plannotator release.
 /annotate docs/plan.md            Review a Markdown document
 /annotate "docs/release plan.md"  Review a path containing spaces
 /annotate ~/Documents/notes.txt   Review a plain-text document
+/annotate page.html              Review the specified local HTML in Chrome
+/annotate https://example.com    Review the specified webpage
+/annotate web                    Open this session for browser pairing
+/annotate web off                Revoke this session's browser pairing
 ```
 
 `/annotate-last` always reviews the latest completed reply; any supplied argument is ignored.
@@ -25,7 +32,7 @@ official OpenCode or Plannotator release.
 ## Install
 
 Requires **OpenCode 2.0.22+** and a separately installed `plannotator-tui` on your PATH.
-Tested with OpenCode 2.0.24 and Plannotator TUI 0.9.4 on macOS; unit tests also run on
+Tested with OpenCode 2.1.1 and Plannotator TUI 0.9.4 on macOS; unit tests also run on
 Linux. Windows terminal handoff has not been verified.
 
 Install the upstream TUI on macOS or Linux:
@@ -38,7 +45,7 @@ Homebrew 6 may first require `brew trust plannotator/tap`. Alternatively, use
 `cargo install plannotator-tui --locked` or the upstream
 [prebuilt binaries](https://github.com/plannotator/plannotator-tui/releases).
 
-Then install the adapter:
+Then install the plugin:
 
 ```sh
 opencode plugin add opencode-plannotator-tui@latest
@@ -56,6 +63,57 @@ Manual configuration, preserving other entries:
 }
 ```
 
+## Browser review (optional)
+
+Requirements: macOS and Chrome 116+, plus Node 22+ for the native host.
+
+1. Clone this repository and load its `browser/` directory as an unpacked extension in
+   `chrome://extensions`. Allow file URL access if reviewing local HTML.
+2. Run `npm run install:bridge` in the clone to register the native host. It allows only this
+   companion's fixed extension ID and resolves Node absolutely. The host starts on demand and
+   opens no HTTP port.
+3. Reopen the OpenCode terminal client; the shared service needs no restart.
+
+Run `/annotate web` in a target session, then open the Chrome extension. A sole live
+session is shown automatically; with several sessions, choose one once. **Change**
+opens the optional session selector. The target title is always visible, with its directory
+available on hover. A sole target is only preselected: no binding or model turn occurs until
+the user clicks **Send & continue**. A disconnected destination never silently switches to another session.
+
+Pick an element or select text, write feedback, then click **Send & continue**. It saves
+the current feedback and sends it in one action; **Save note** remains available for batching.
+This sends pending notes to that captured
+session and starts a normal model turn; pairing and saving notes make no model call.
+Switching terminal tabs never changes the paired target. Revoke with `/annotate web off`.
+
+### Explicit routing
+
+No argument or a reply number always means TUI. Markdown/plain text files also use TUI.
+Only explicit `.html`/`.htm` paths, HTTP/HTTPS URLs, HTML file URLs, or `web` enter the browser
+workflow. A reply containing HTML links or code fences does not change the default.
+
+### Browser safeguards and limitations
+
+Saved notes survive reloads and are isolated by URL, including SPA routes. Per-note revision
+checks prevent stale tabs overwriting newer feedback. Full JSON/Markdown exports include
+redacted URLs, exact selected text/context, verified selector hints, styles and accessibility.
+Missing/changed/ambiguous targets are labeled in the sidebar instead of silently rebound.
+Comments and drafts live in extension-owned UI/storage; the page receives only selection
+metadata and numbered markers, not your written feedback.
+
+Native delivery requires an open, paired local TUI. If the receiver closes, feedback stays
+pending. A failed batch retains its original target and ID for safe retry; if that target
+is permanently gone, export the notes before starting a new review. Sent-note edits become
+new revisions. Clipboard failures expose a selectable preview. Browser-internal pages, PDF,
+cross-origin iframes, Canvas and remote SSH TUI clients are outside this version's scope.
+Page Context is retired only after exporting its drafts and verifying this replacement.
+
+See [implementation plan](docs/annotate-html-integration-plan.md) and
+[shipped-artifact evaluation](docs/annotate-html-evaluation.md), plus
+[browser provenance](browser/UPSTREAM.md). `npm test`, `npm run test:smoke`, and
+`npm run test:browser` verify each layer; the browser test uses an existing Playwright installation
+(`PLAYWRIGHT_MODULE`) and browser executable (`CHROMIUM_PATH`) in an isolated profile.
+
 ## Review and send
 
 1. Run `/annotate` or `/annotate path/to/file.md` in a session.
@@ -124,6 +182,13 @@ Set `binary` if Plannotator TUI is installed outside the terminal client's PATH:
 }
 ```
 
+The adapter launches Plannotator TUI in the current terminal, not through Herdr;
+`[herdr]` placement and popup dimensions do not affect `/annotate`. Layout is
+owned by the selected binary, while font family and size belong to the terminal.
+The adapter supplies `PLANNOTATOR_TUI_THEME` to follow OpenCode's light/dark mode,
+overriding Plannotator TUI's configured theme. Use `binary` to select a custom
+build or launcher without replacing the system installation.
+
 ## Draft recovery
 
 Each review has its own private temporary source and annotation store. Successful,
@@ -155,19 +220,26 @@ also requires Python 3, tmux and OpenCode. It runs a detached terminal, verifies
 commands and feedback through the actual API, then removes its test session.
 Its submission uses `resume: false`, so it makes no model call or visible window.
 
-For development loading, add this checkout's absolute directory to `cli.json`
-instead of the npm package. Use only one installation at a time.
+Set `ANNOTATE_TUI_BINARY` to test a custom binary or launcher through the plugin's
+real configuration path. For a build with a centered 120-column viewport, also
+set `ANNOTATE_EXPECT_MARGIN=10` to assert blank margins in the 140-column smoke
+terminal. These variables configure the test, not the shipped plugin.
+
+For development loading, run `npm run install:plugin` to replace the npm entry in
+`cli.json` with this checkout's absolute directory. It backs up the CLI preferences and
+keeps `options.binary` and unrelated settings. Use only one installation at a time.
 
 See [release instructions](docs/releasing.md) and [changelog](CHANGELOG.md).
 
 ## 中文速用
 
-这是 **Plannotator TUI 的非官方 OpenCode 适配插件**。
+这是**非官方 OpenCode 批注插件**：文本用 Plannotator TUI，网页用 Chrome 伴随扩展。
 
 - `/annotate`：批注上一条完整回复。
 - `/annotate 2`：批注倒数第二条，`3`、`4` 依次往前；`1` 等同于默认。
 - `/annotate 文档.md`：批注文档，支持中文、空格和相对路径。
 - `/annotate-last`：固定批注最新一条完整回复，忽略附带参数。
+- `/annotate 页面.html`、`/annotate https://…`、`/annotate web`：在 Chrome 中批注网页；`/annotate web off` 撤销配对。
 - 选中文字 → `c` 写批注 → Enter 保存 → `q` 返回 →「Send and continue」。
 - 文档采用独立快照，反馈附原文件路径，确认后发回发起批注的会话。
 - 更新：`opencode plugin update opencode-plannotator-tui@latest`，然后重新打开终端客户端。

package/bridge/native-host.mjs

@@ -0,0 +1,29 @@
+import { readFile } from "node:fs/promises"
+import { decodeStream, encode, request } from "./wire.mjs"
+import { listTargets } from "./receiver.mjs"
+
+const configPath = process.argv[2]
+const origin = process.argv[3]
+const config = JSON.parse(await readFile(configPath, "utf8"))
+if (origin !== `chrome-extension://${config.extensionID}/`) throw new Error("Unapproved extension origin")
+let handled = false
+const timeout = setTimeout(() => process.exit(1), 20000)
+decodeStream(process.stdin, async message => {
+  if (handled) return
+  handled = true; process.stdin.pause()
+  let response
+  try {
+    const targets = await listTargets(config.targetsDirectory)
+    if (message.action === "targets") {
+      const live = await Promise.all(targets.map(async target => {
+        try { return (await request(target.socket, { action: "info", targetID: target.id })).target } catch { return null }
+      }))
+      response = { ok: true, targets: live.filter(Boolean) }
+    } else {
+      const target = targets.find(target => target.id === message.targetID)
+      if (!target) throw new Error("Paired session is offline; run /annotate web and pair again")
+      response = await request(target.socket, message)
+    }
+  } catch (error) { response = { ok: false, error: error.message } }
+  clearTimeout(timeout); process.stdout.end(encode(response))
+}, error => { clearTimeout(timeout); process.stdout.end(encode({ ok: false, error: error.message })) })

package/bridge/receiver.mjs

@@ -0,0 +1,77 @@
+import net from "node:net"
+import { randomUUID, createHash } from "node:crypto"
+import { mkdir, chmod, writeFile, readdir, readFile, rm, lstat } from "node:fs/promises"
+import os from "node:os"
+import path from "node:path"
+import { encode, decodeStream } from "./wire.mjs"
+import { markdown, validateReview } from "../browser/protocol.mjs"
+
+export const registryRoot = () => path.join(os.homedir(), ".local/share/opencode-annotate/targets")
+export async function listTargets(root = registryRoot()) {
+  let files
+  try { files = await readdir(root) } catch (error) { if (error.code === "ENOENT") return []; throw error }
+  const results = []
+  for (const file of files.filter(name => /^[a-f0-9-]+\.json$/.test(name))) {
+    const location = path.join(root, file)
+    const info = await lstat(location)
+    if (info.isSymbolicLink() || (info.mode & 0o077) || info.uid !== process.getuid() || info.size > 16384) continue
+    try {
+      const value = JSON.parse(await readFile(location, "utf8"))
+      if (typeof value.id !== "string" || file !== `${value.id}.json` || value.socket !== path.join(root, `${value.id}.sock`)) continue
+      try { process.kill(value.pid, 0) } catch { continue }
+      results.push(value)
+    } catch { /* stale/incomplete registration is not a target */ }
+  }
+  return results
+}
+export async function createReceiver({ sessionID, title, directory, client, root = registryRoot(), resume = true, onError = () => {} }) {
+  await mkdir(root, { recursive: true, mode: 0o700 }); await chmod(root, 0o700)
+  const id = randomUUID(), socketPath = path.join(root, `${id}.sock`)
+  // macOS sockaddr_un is limited to 104 bytes, including the NUL terminator.
+  if (Buffer.byteLength(socketPath) > 103) throw new Error("Annotation socket path is too long")
+  const target = { id, title, directory, sessionID, socket: socketPath, pid: process.pid }
+  const received = new Map(), sockets = new Set()
+  let closed = false
+  const server = net.createServer(socket => {
+    let handled = false
+    sockets.add(socket); socket.once("close", () => sockets.delete(socket)); socket.on("error", () => {})
+    socket.setTimeout(20000, () => socket.destroy())
+    decodeStream(socket, async message => {
+      if (handled) return
+      handled = true
+      try {
+        if (closed || message.targetID !== id) throw new Error("Pairing is no longer active")
+        if (message.action === "info") { await client.session.get({ sessionID }); socket.end(encode({ ok: true, target: { id, title, directory } })); return }
+        if (message.action !== "send" || !/^[a-f0-9-]{36}$/.test(message.batchID)) throw new Error("Invalid delivery request")
+        validateReview(message.review)
+        const digest = createHash("sha256").update(JSON.stringify(message.review)).digest("hex")
+        const existing = received.get(message.batchID)
+        if (existing && existing.digest !== digest) throw new Error("Batch ID was reused with different content")
+        if (!existing) {
+          // Capture immutable input before awaiting; simultaneous retries share one admission promise.
+          const promptID = `msg_${createHash("sha256").update(`${id}:${message.batchID}`).digest("hex").slice(0, 32)}`
+          const promise = (async () => {
+            await client.session.get({ sessionID })
+            const response = await client.session.prompt({ sessionID, id: promptID, text: markdown(message.review), delivery: "queue", resume })
+            return { ok: true, messageID: response?.id || promptID, state: "admitted" }
+          })()
+          received.set(message.batchID, { digest, promise })
+          promise.catch(() => received.delete(message.batchID))
+        }
+        socket.end(encode(await received.get(message.batchID).promise))
+      } catch (error) { if (!socket.destroyed) socket.end(encode({ ok: false, error: error.message })) }
+    }, () => socket.destroy())
+  })
+  await new Promise((resolve, reject) => { server.once("error", reject); server.listen(socketPath, resolve) })
+  server.on("error", onError)
+  await chmod(socketPath, 0o600)
+  const registration = path.join(root, `${id}.json`)
+  try { await writeFile(registration, JSON.stringify(target), { mode: 0o600, flag: "wx" }) }
+  catch (error) { await new Promise(resolve => server.close(resolve)); await rm(socketPath, { force: true }); throw error }
+  return { target, async close() {
+    if (closed) return
+    closed = true; for (const socket of sockets) socket.destroy()
+    await new Promise(resolve => server.close(resolve))
+    await rm(registration, { force: true }); await rm(socketPath, { force: true })
+  } }
+}

package/bridge/wire.mjs

@@ -0,0 +1,38 @@
+import net from "node:net"
+import { MAX_BYTES } from "../browser/protocol.mjs"
+
+export function encode(value) {
+  const body = Buffer.from(JSON.stringify(value))
+  if (body.length > MAX_BYTES) throw new Error("Message exceeds 512 KiB")
+  const header = Buffer.alloc(4); header.writeUInt32LE(body.length)
+  return Buffer.concat([header, body])
+}
+export function decodeStream(stream, onMessage, onError) {
+  let buffer = Buffer.alloc(0), stopped = false
+  const data = chunk => {
+    if (stopped) return
+    try {
+      buffer = Buffer.concat([buffer, chunk])
+      while (buffer.length >= 4) {
+        const size = buffer.readUInt32LE(0)
+        if (!size || size > MAX_BYTES) throw new Error("Invalid frame size")
+        if (buffer.length < size + 4) break
+        const value = JSON.parse(buffer.subarray(4, size + 4).toString("utf8"))
+        buffer = buffer.subarray(size + 4); onMessage(value)
+      }
+    } catch (error) { stopped = true; onError(error) }
+  }
+  stream.on("data", data)
+  return () => { stopped = true; stream.off("data", data) }
+}
+export function request(socketPath, value) {
+  return new Promise((resolve, reject) => {
+    const socket = net.createConnection(socketPath)
+    const done = (error, result) => { stop(); socket.destroy(); error ? reject(error) : resolve(result) }
+    const stop = decodeStream(socket, result => done(null, result), error => done(error))
+    socket.setTimeout(15000, () => done(new Error("Annotation receiver timed out")))
+    socket.once("error", error => done(error))
+    socket.once("end", () => done(new Error("Annotation receiver disconnected")))
+    socket.once("connect", () => { try { socket.write(encode(value)) } catch (error) { done(error) } })
+  })
+}

package/browser/UPSTREAM.md

@@ -0,0 +1,9 @@
+# Annotate HTML-derived browser companion
+
+Based on Asim Sayed's MIT-licensed [Annotate HTML](https://github.com/AsimSayed/annotate-html), Chrome Web Store release 1.0.0 (extension ID `ageaediaogfbmbmjoamkcloagepjcgdp`).
+
+`upstream/annotate-1.0.0.js` preserves the unmodified released JavaScript, SHA-256 `ae30233d0db847c21ced822c63ec5f0ead1c6f361518ec28a21ea49defcd1206`; its MIT license is adjacent. Icons are preserved from that release. The original implementation credits Agentation for its element-identification approach.
+
+`inspector.js` adapts the original element identification, computed-style snapshot, and accessibility collectors. This local enhancement replaces the in-page comment popup and volatile state with an extension-origin side panel, durable per-note storage, exact range context and validated selectors. It adds complete export and opt-in paired session delivery. The original upstream implementation is not injected alongside the enhanced runtime.
+
+This is a distinct local extension with its own ID, not an official Annotate HTML update. It has no upstream update URL, analytics or external data service. Only user-requested Native Messaging can send feedback to a paired local OpenCode client. Native Messaging and side-panel installation are macOS/Chrome-only in this version.

package/browser/capture.js

@@ -0,0 +1,96 @@
+(() => {
+  if (globalThis.__opencodeAnnotate === true) throw new Error("Refresh this page once to update annotation tools. Saved notes will remain.")
+  globalThis.__opencodeAnnotate?.dispose()
+  if (!["text/html", "application/xhtml+xml"].includes(document.contentType)) throw new Error("Only HTML pages are supported")
+  const listeners = new AbortController()
+  const on = (target, event, handler, options = {}) => target.addEventListener(event, handler, { ...options, signal: listeners.signal })
+  const host = document.createElement("div")
+  host.setAttribute("data-opencode-annotate", "")
+  host.style.cssText = "all:initial!important;position:fixed!important;inset:0!important;pointer-events:none!important;z-index:2147483647!important"
+  const root = host.attachShadow({ mode: "closed" })
+  const style = document.createElement("style")
+  style.textContent = '.box{position:fixed;pointer-events:none;border:2px solid #c96442;background:#c9644210}.pin{position:fixed;background:#c96442;color:#fff;border:2px solid #fff;border-radius:50%;font:600 12px system-ui;width:26px;height:26px;pointer-events:none}'
+  root.append(style); document.documentElement.append(host)
+  const box = document.createElement("div"); box.className = "box"
+  let picking = false, url = location.href, timer, markers = [], active = true
+  function send(anchor = null, error = null, modeOnly = false) {
+    if (!active) return
+    try {
+      chrome.runtime.sendMessage({ action: "capture", page: { url: location.href, title: document.title }, anchor, error, picking, modeOnly }).catch(dispose)
+    } catch { dispose() }
+  }
+  function setPicking(value, notify = true) {
+    picking = value
+    if (picking) root.append(box); else box.remove()
+    if (notify) send(null, null, true)
+  }
+  function selection() {
+    if (picking || !active) return
+    const selected = getSelection()
+    if (!selected?.rangeCount || selected.isCollapsed || selected.anchorNode?.getRootNode() !== document) return
+    const range = selected.getRangeAt(0).cloneRange()
+    let element = range.commonAncestorContainer
+    if (element.nodeType !== 1) element = element.parentElement
+    try { send(AnnotateInspector.capture(element, range)) } catch (error) { send(null, error.message) }
+  }
+  on(document, "selectionchange", () => { clearTimeout(timer); timer = setTimeout(selection, 160) })
+  on(document, "pointerup", selection)
+  on(document, "mousemove", event => {
+    if (!picking) return
+    const rect = event.target.getBoundingClientRect()
+    box.style.cssText = `left:${rect.x}px;top:${rect.y}px;width:${rect.width}px;height:${rect.height}px`
+  }, { capture: true })
+  on(document, "pointerdown", event => { if (picking) { event.preventDefault(); event.stopImmediatePropagation() } }, { capture: true })
+  on(document, "click", event => {
+    if (!picking) return
+    event.preventDefault(); event.stopImmediatePropagation()
+    // A failed pick must never leave the page trapped in interception mode.
+    setPicking(false, false)
+    try { send(AnnotateInspector.capture(event.target)) } catch (error) { send(null, error.message) }
+  }, { capture: true })
+  on(document, "keydown", event => { if (picking && event.key === "Escape") setPicking(false) })
+  const onMessage = (message, _sender, respond) => {
+    if (message.action === "pick") { setPicking(!picking); respond({ ok: true, picking }) }
+    if (message.action === "markers") { markers = message.notes || []; draw(); respond({ ok: true }) }
+    if (message.action === "locate") respond({ states: message.anchors.map(locate) })
+  }
+  chrome.runtime.onMessage.addListener(onMessage)
+  function locate(anchor) {
+    try {
+      const matches = document.querySelectorAll(anchor.selector)
+      if (matches.length !== 1) return matches.length ? "ambiguous" : "missing"
+      const text = AnnotateInspector.text(matches[0])
+      if (!text.includes(anchor.quote)) return "changed"
+      if (anchor.type === "text" && text.split(anchor.quote).length > 2) {
+        if (!text.includes(`${anchor.prefix || ""}${anchor.quote}${anchor.suffix || ""}`)) return "ambiguous"
+      }
+      return "located"
+    } catch { return "invalid selector" }
+  }
+  function draw() {
+    root.querySelectorAll(".pin").forEach(node => node.remove())
+    for (const [index, note] of markers.entries()) {
+      let matches
+      try { matches = document.querySelectorAll(note.anchor.selector) } catch { continue }
+      if (matches.length !== 1) continue
+      const element = matches[0]
+      // A changed or removed quote is an orphan, not another equally named element.
+      if (!AnnotateInspector.text(element).includes(note.anchor.quote)) continue
+      const rect = element.getBoundingClientRect()
+      const pin = document.createElement("span"); pin.className = "pin"; pin.textContent = String(index + 1)
+      pin.style.cssText = `left:${rect.left - 10}px;top:${rect.top - 10}px`; root.append(pin)
+    }
+  }
+  on(window, "scroll", draw, { passive: true }); on(window, "resize", draw)
+  const observer = new MutationObserver(() => { clearTimeout(timer); timer = setTimeout(draw, 160) })
+  observer.observe(document.body, { childList: true, subtree: true, characterData: true })
+  const routeTimer = setInterval(() => { if (!active) { observer.disconnect(); return } if (url !== location.href) { url = location.href; markers = []; draw(); send() } }, 700)
+  function dispose() {
+    if (!active) return
+    active = false; listeners.abort(); clearInterval(routeTimer); clearTimeout(timer); observer.disconnect(); host.remove()
+    try { chrome.runtime.onMessage.removeListener(onMessage) } catch { /* previous extension context may already be invalidated */ }
+    delete globalThis.__opencodeAnnotate
+  }
+  globalThis.__opencodeAnnotate = { dispose }
+  send()
+})();

package/browser/icons/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 155 157" width="128" height="128">
+  <path d="M58.8282 156.513L62.2248 103.934L18.2055 133.416L0 101.353L47.4158 78.2565L0 55.1599L18.2055 23.0965L62.2248 52.5786L58.8282 0H95.3751L91.8427 52.5786L135.862 23.0965L154.067 55.1599L106.787 78.2565L154.067 101.353L135.862 133.416L91.8427 103.934L95.3751 156.513H58.8282Z" fill="#C96442"/>
+</svg>

package/browser/inspector.js

@@ -0,0 +1,125 @@
+// Derived from AsimSayed/annotate-html 1.0.0, MIT. Original bytes and license in upstream/.
+(() => {
+  function identifyElement(target, text) {
+    const tag = target.tagName.toLowerCase()
+    if (target.dataset?.element) return target.dataset.element
+    if (["path", "circle", "rect", "line", "g", "svg"].includes(tag)) return "graphic element"
+    const label = target.getAttribute("aria-label") || target.getAttribute("alt") || text || ""
+    if (tag === "input") return `input "${target.getAttribute("placeholder") || target.getAttribute("type") || "text"}"`
+    return label ? `${tag} "${label.slice(0, 60)}"` : tag
+  }
+  function getComputedSnapshot(el) {
+    var s = window.getComputedStyle(el)
+    var parts = []
+    if (s.color && s.color !== "rgb(0, 0, 0)") parts.push("color: " + s.color)
+    var bg = s.backgroundColor
+    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") parts.push("bg: " + bg)
+    if (s.fontSize) parts.push("font: " + s.fontSize)
+    if (s.fontWeight && s.fontWeight !== "400" && s.fontWeight !== "normal") parts.push("weight: " + s.fontWeight)
+    if (s.padding && s.padding !== "0px") parts.push("padding: " + s.padding)
+    if (s.margin && s.margin !== "0px") parts.push("margin: " + s.margin)
+    var d = s.display
+    if (d && d !== "block" && d !== "inline") parts.push("display: " + d)
+    if (s.position && s.position !== "static") parts.push("position: " + s.position)
+    if (s.borderRadius && s.borderRadius !== "0px") parts.push("radius: " + s.borderRadius)
+    return parts.join(", ")
+  }
+  function getA11yInfo(el) {
+    var parts = []
+    var role = el.getAttribute("role")
+    var ariaLabel = el.getAttribute("aria-label")
+    var tabIndex = el.getAttribute("tabindex")
+    var ariaHidden = el.getAttribute("aria-hidden")
+    if (role) parts.push('role="' + role + '"')
+    if (ariaLabel) parts.push('aria-label="' + ariaLabel + '"')
+    if (tabIndex) parts.push("tabindex=" + tabIndex)
+    if (ariaHidden === "true") parts.push("aria-hidden")
+    if (el.matches("a, button, input, select, textarea, [tabindex]")) parts.push("focusable")
+    return parts.join(", ")
+  }
+  function selector(element) {
+    const parts = []
+    for (let node = element; node?.nodeType === 1; node = node.parentElement) {
+      if (node.id && document.querySelectorAll(`#${CSS.escape(node.id)}`).length === 1) { parts.unshift(`#${CSS.escape(node.id)}`); break }
+      const siblings = node.parentElement ? [...node.parentElement.children].filter(x => x.localName === node.localName) : [node]
+      parts.unshift(`${CSS.escape(node.localName)}:nth-of-type(${siblings.indexOf(node) + 1})`)
+    }
+    const result = parts.join(" > ")
+    if (document.querySelectorAll(result).length !== 1) throw new Error("Element cannot be uniquely located")
+    return result
+  }
+  const editable = 'input,textarea,select,[contenteditable]:not([contenteditable="false"])'
+  const excluded = `${editable},script,style,noscript,template,[hidden],[aria-hidden="true"]`
+  function textFilter() {
+    const cache = new WeakMap()
+    return function omitted(element) {
+      if (!element) return false
+      if (cache.has(element)) return cache.get(element)
+      const style = getComputedStyle(element)
+      const hidden = element.matches(excluded) || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || style.opacity === "0" || omitted(element.parentElement)
+      cache.set(element, hidden)
+      return hidden
+    }
+  }
+  function safeText(range, omitted) {
+    const root = range.commonAncestorContainer
+    const nodes = []
+    if (root.nodeType === Node.TEXT_NODE) nodes.push(root)
+    else {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+      let node
+      while ((node = walker.nextNode())) nodes.push(node)
+    }
+    const pieces = []
+    for (const node of nodes) {
+      if (!range.intersectsNode(node) || omitted(node.parentElement)) continue
+      const start = node === range.startContainer ? range.startOffset : 0
+      const end = node === range.endContainer ? range.endOffset : node.length
+      pieces.push(node.data.slice(start, end))
+    }
+    return pieces.join("")
+  }
+  function elementText(element, omitted = textFilter()) {
+    const control = element.closest(editable)
+    if (control) return control.getAttribute("aria-label") || control.getAttribute("placeholder") || `${control.getAttribute("type") || control.localName} control`
+    const contents = document.createRange(); contents.selectNodeContents(element)
+    return safeText(contents, omitted).trim() || element.getAttribute("aria-label") || element.getAttribute("alt") || element.localName
+  }
+  function capture(element, range) {
+    if (!element || element.getRootNode() !== document) throw new Error("Select content in the main page")
+    // Decorative SVGs commonly carry aria-hidden. Point to their visible control instead.
+    if (!range && element.closest("[aria-hidden=true]")) element = element.closest('button,a,[role="button"]') || element.parentElement
+    if (!element) throw new Error("Choose a visible page element")
+    const style = getComputedStyle(element)
+    if (element.closest("[hidden],script,style,noscript,template") || style.display === "none" || style.visibility === "hidden") throw new Error("Choose a visible page element")
+    if (["iframe", "canvas", "embed", "object"].includes(element.localName)) throw new Error("This content type is unsupported")
+    const omitted = textFilter()
+    const contents = document.createRange(); contents.selectNodeContents(element)
+    const visibleText = safeText(contents, omitted).trim()
+    const container = element.closest("p,li,blockquote,pre,td,th,section,article,main") || element
+    let quote = "", prefix = "", suffix = ""
+    if (range) {
+      quote = safeText(range, omitted)
+      if (!quote.trim()) throw new Error("Editable values are private. Use Pick an element to annotate the control itself.")
+      const before = document.createRange(); before.selectNodeContents(container); before.setEnd(range.startContainer, range.startOffset)
+      const after = document.createRange(); after.selectNodeContents(container); after.setStart(range.endContainer, range.endOffset)
+      prefix = [...safeText(before, omitted)].slice(-160).join(""); suffix = [...safeText(after, omitted)].slice(0, 160).join("")
+    } else {
+      element = element.closest(editable) || element
+      quote = elementText(element, omitted)
+      for (const [sibling, side] of [[element.previousElementSibling, "before"], [element.nextElementSibling, "after"]]) {
+        if (!sibling) continue
+        const siblingRange = document.createRange(); siblingRange.selectNodeContents(sibling)
+        const text = safeText(siblingRange, omitted)
+        if (side === "before") prefix = [...text].slice(-160).join(""); else suffix = [...text].slice(0, 160).join("")
+      }
+    }
+    if (quote.length > 4000) throw new Error("Choose at most 4000 characters")
+    const rect = (range || element).getBoundingClientRect()
+    return { type: range ? "text" : "element", quote, prefix, suffix, selector: selector(element), fullPath: selector(element),
+      element: identifyElement(element, visibleText), styles: getComputedSnapshot(element), accessibility: getA11yInfo(element),
+      rect: Object.fromEntries(["x", "y", "width", "height"].map(key => [key, Math.round(rect[key])])),
+      viewport: { width: innerWidth, height: innerHeight, scrollX, scrollY } }
+  }
+  globalThis.AnnotateInspector = { capture, text: elementText }
+})();

package/browser/manifest.json

@@ -0,0 +1,13 @@
+{
+  "manifest_version": 3,
+  "name": "OpenCode Annotate",
+  "version": "0.4.1",
+  "description": "Annotate HTML-based page feedback, private drafts, and paired OpenCode delivery.",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp7TG2yzekNKpQvHBtj4jqkOxtoeDIBhNIjPi37Os/ksuhzPp1pHnrJPV4WV2ToatUaD5x5/SpLP8qZKLBD+wuraEE/TeclEZ8HvEs1yhlnx/S7piTG/s0eV5umuTEx2w66Hi0w3dhTC7ZZfJXCLyqs1feBtWzQx6ClgaHNYly4iJ03pV7RfguqpIaG9LV8Oa8ELA+7Ubr0BAujXrSlvqLF5oAKGoXXcpvTL5rgMRIH4Q/85tnvrk0pRVg+1z9IGNzSfjN82iveC/JAriyWABp8YuswtvKfI2Wb+KspaisBh39Y3BRqlyo8I2Cr+01uE6G5pWiJIWMLhe0glrMr5I2wIDAQAB",
+  "permissions": ["activeTab", "scripting", "storage", "sidePanel", "nativeMessaging"],
+  "action": { "default_title": "Annotate this page", "default_icon": "icons/icon-32.png" },
+  "background": { "service_worker": "worker.mjs", "type": "module" },
+  "side_panel": { "default_path": "panel.html" },
+  "commands": { "_execute_action": { "suggested_key": { "default": "Alt+Shift+A", "mac": "Alt+Shift+A" } } },
+  "icons": { "16": "icons/icon-16.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png" }
+}

package/browser/panel.css

@@ -0,0 +1,3 @@
+:root{color-scheme:light dark;--bg:light-dark(#faf9f5,#20201f);--surface:light-dark(#fff,#292927);--text:light-dark(#27251f,#f2eee5);--muted:light-dark(#625d52,#c2bbae);--border:light-dark(#d4cfc3,#625d52);--accent:light-dark(#944525,#f2ad90)}
+*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,sans-serif}header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}h1{font-size:19px;margin:0}h2{font-size:15px;margin:0 0 8px}main{padding:0 16px 16px}section{padding:16px 0;border-bottom:1px solid var(--border)}p{margin:6px 0 10px;overflow-wrap:anywhere}button,select,textarea{font:inherit;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text)}button{padding:8px 11px;cursor:pointer;min-height:36px}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:light-dark(#fff,#29201b);border-color:var(--accent);font-weight:600}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}label{display:block;margin:10px 0 5px;font-weight:600}textarea,select{width:100%;padding:8px;caret-color:var(--accent)}textarea{resize:vertical;min-height:90px}textarea::placeholder{color:var(--muted)}.actions{display:flex;gap:8px;margin-top:8px}.actions>*{flex:1}.hint,#page-url,#paired,#status{color:var(--muted);font-size:12px}blockquote{margin:12px 0;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:5px;max-height:120px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}ol{list-style:none;margin:0;padding:0}li{padding:12px 0;border-top:1px solid var(--border)}li:first-child{border-top:0}li p{white-space:pre-wrap}li small{color:var(--muted);overflow-wrap:anywhere}li .actions button{flex:0 0 auto;padding:5px 9px}footer{position:sticky;bottom:0;padding:12px 16px;background:var(--bg);border-top:1px solid var(--border)}#send{width:100%}#status{min-height:18px;margin-bottom:0}#status.error{color:light-dark(#a12929,#ffb3ac)}pre{font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}details{margin-top:14px}summary{cursor:pointer}::selection{background:var(--accent);color:var(--bg)}*{scrollbar-color:var(--border) var(--bg)}
+:root .connection-row{display:flex;align-items:center;gap:12px}.connection-row h2{flex:1;margin:0}.connection-row button{padding:4px 9px;min-height:30px}#paired{color:var(--text);font-size:14px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#connection-hint{margin-bottom:0}#session-options{margin-top:10px}#refresh-targets{margin-top:8px}#pick[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:light-dark(#fff,#29201b)}

package/browser/panel.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>OpenCode Annotate</title><link rel="stylesheet" href="panel.css"></head>
+<body>
+  <header><h1>Annotate</h1><span id="count">0 notes</span></header>
+  <main>
+    <section aria-label="Target session">
+      <div class="connection-row"><h2>Send to</h2><button id="change-target" type="button" aria-expanded="false" aria-controls="session-options">Change</button></div>
+      <p id="paired">Looking for your OpenCode session…</p><p id="connection-hint" class="hint" aria-live="polite"></p>
+      <div id="session-options" hidden><label for="targets">Choose session</label><select id="targets"><option value="">Select a session…</option></select><button id="refresh-targets" type="button">Refresh sessions</button></div>
+    </section>
+    <section aria-label="Page annotation"><h2 id="page-title">Open a page</h2><p id="page-url"></p>
+      <button id="pick" aria-pressed="false">Pick an element</button><p id="pick-hint" class="hint">Or select text on the page, write feedback, then send. Use Save note to collect several notes first.</p>
+      <blockquote id="quote">Select text or an element to begin.</blockquote>
+      <label for="kind">Feedback type</label><select id="kind"><option value="comment">Comment</option><option value="ask">Question</option></select>
+      <label for="comment">My feedback</label><textarea id="comment" rows="4" maxlength="8000" placeholder="What should change, or what would you like to understand?"></textarea>
+      <div class="actions"><button id="save">Save note</button><button id="cancel">Cancel edit</button></div>
+    </section>
+    <section aria-label="Saved feedback"><h2>Notes</h2><ol id="notes"></ol></section>
+    <details><summary>Context preview</summary><pre id="preview"></pre></details>
+  </main>
+  <footer><button id="send" class="primary" aria-describedby="paired">Send &amp; continue</button><div class="actions"><button id="copy">Copy Markdown</button><button id="export">Export JSON</button></div><p id="status" role="status" aria-live="polite">Ready</p></footer>
+  <script type="module" src="panel.mjs"></script>
+</body></html>