opencode-browser-annotation-plugin 0.1.0

package/README.md

@@ -0,0 +1,123 @@
+# opencode-browser-annotation-plugin
+
+Select an element in your browser, type an instruction, and send it — with the
+element's metadata — to your [OpenCode](https://opencode.ai) agent's active
+session. Built for a headless-server + remote-desktop setup: the agent runs on a
+server you reach over SSH, and the browser runs on your desktop.
+
+Text and element metadata only. **No screenshots, no vision.** The agent locates
+the code from the selector/DOM context you send.
+
+## How it works
+
+```
+Desktop Chrome (extension)
+  └─ pick element + type instruction → list → [Submit]
+       └─ POST http://127.0.0.1:39517/annotations   (via ssh -R when remote)
+OpenCode host (plugin)
+  └─ HTTP server on 127.0.0.1 → injects a turn into the active session
+       └─ agent receives the instruction + element metadata and acts
+```
+
+The plugin binds to `127.0.0.1` only. When OpenCode is on a remote host, an
+`ssh -R` reverse tunnel carries the extension's POST to it — no public port, and
+SSH provides the auth and encryption.
+
+## Install
+
+### 1. Plugin (on the OpenCode host)
+
+Add to your OpenCode config (`~/.config/opencode/opencode.json`):
+
+```json
+{
+  "plugin": ["opencode-browser-annotation-plugin"]
+}
+```
+
+Restart OpenCode. The plugin starts an HTTP server on `127.0.0.1:39517`.
+Configure with environment variables if needed:
+
+- `OPENCODE_ANNOTATION_PORT` (default `39517`)
+- `OPENCODE_ANNOTATION_HOST` (default `127.0.0.1`)
+
+### 2. Extension (in your desktop Chrome)
+
+Until it is on the Chrome Web Store, load it unpacked:
+
+1. Get the `extension/` directory from this package (`node_modules/opencode-browser-annotation-plugin/extension`, or clone this repo).
+2. Open `chrome://extensions`, enable **Developer mode**, click **Load unpacked**, and select `extension/`.
+3. Use a dedicated Chrome profile — the same debug profile you drive with the agent is a good choice.
+
+### 3. Tunnel (when OpenCode is remote)
+
+On your desktop, forward the plugin port to the server (separate window):
+
+```bash
+ssh -N -R 39517:127.0.0.1:39517 you@server
+```
+
+If you also drive the browser from the agent (desktop-drive), forward both:
+
+```bash
+ssh -N -R 9333:127.0.0.1:9333 -R 39517:127.0.0.1:39517 you@server
+```
+
+If OpenCode runs on the same machine as your browser, no tunnel is needed — the
+default `http://127.0.0.1:39517` already works. Set a custom endpoint in the
+extension's **Settings** page.
+
+## Use
+
+1. Send at least one message in OpenCode so the plugin knows the active session.
+2. Click the extension icon → **Select element**.
+3. Hover to highlight, click the element, type your instruction (Esc cancels).
+4. Repeat to queue more, then **Submit to agent**.
+5. The agent receives the annotations as a new turn and responds.
+
+## Payload
+
+The extension POSTs to `/annotations`:
+
+```json
+{
+  "extensionVersion": "0.1.0",
+  "annotations": [
+    {
+      "instruction": "Make this button larger and blue",
+      "page": { "url": "https://example.com/app", "title": "My App" },
+      "element": {
+        "selector": "button.cta",
+        "tag": "BUTTON",
+        "text": "Sign up",
+        "role": "button",
+        "ariaLabel": "Sign up",
+        "bounds": { "x": 100, "y": 200, "width": 120, "height": 40 },
+        "html": "<button class=\"cta\">Sign up</button>"
+      }
+    }
+  ]
+}
+```
+
+`GET /status` returns `{ ok, activeSession, host, port }` for a quick health check.
+
+## Develop
+
+```bash
+npm install
+npm run typecheck
+npm run build      # emits dist/plugin.js
+```
+
+The plugin source is `src/plugin.ts`; the extension is plain MV3 in `extension/`.
+
+## Limits
+
+- Text + element metadata only; no screenshot is sent or seen by the model.
+- The plugin injects into the most recently active session (tracked via the
+  `chat.message` hook). Send a message first so a session is active.
+
+## License
+
+MIT

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "@opencode-ai/plugin";
+export declare const BrowserAnnotationPlugin: Plugin;
+export default BrowserAnnotationPlugin;

package/dist/plugin.js

@@ -0,0 +1,207 @@
+import { createServer } from "node:http";
+/**
+ * opencode-browser-annotation-plugin
+ *
+ * Runs a loopback HTTP server on the OpenCode host. A browser extension POSTs
+ * annotations (a typed instruction plus selected-element metadata) to it, over
+ * an `ssh -R` reverse tunnel when the browser is on a separate desktop. On
+ * receipt, the plugin injects a new user turn into the most recently active
+ * OpenCode session so the agent responds.
+ *
+ * Scope: text + element metadata only. No screenshots, no image/vision.
+ */
+const DEFAULT_HOST = "127.0.0.1";
+const DEFAULT_PORT = 39_517;
+function envHost() {
+    return process.env.OPENCODE_ANNOTATION_HOST?.trim() || DEFAULT_HOST;
+}
+function envPort() {
+    const raw = process.env.OPENCODE_ANNOTATION_PORT?.trim();
+    const n = raw ? Number.parseInt(raw, 10) : DEFAULT_PORT;
+    return Number.isFinite(n) && n > 0 && n < 65_536 ? n : DEFAULT_PORT;
+}
+function truncate(value, max) {
+    return value.length > max ? `${value.slice(0, max)}…` : value;
+}
+function formatElement(el) {
+    if (!el)
+        return "- (no element captured)";
+    const lines = [];
+    if (el.tag)
+        lines.push(`- Tag: ${el.tag}`);
+    if (el.selector)
+        lines.push(`- Selector: ${el.selector}`);
+    if (el.role)
+        lines.push(`- Role: ${el.role}`);
+    if (el.ariaLabel)
+        lines.push(`- ARIA label: ${el.ariaLabel}`);
+    if (el.text)
+        lines.push(`- Text: ${truncate(el.text.trim(), 300)}`);
+    if (el.bounds) {
+        const b = el.bounds;
+        lines.push(`- Bounds: x=${Math.round(b.x)} y=${Math.round(b.y)} w=${Math.round(b.width)} h=${Math.round(b.height)}`);
+    }
+    if (el.html)
+        lines.push(`- Outer HTML: ${truncate(el.html.trim(), 600)}`);
+    return lines.length ? lines.join("\n") : "- (no element details)";
+}
+function buildPrompt(annotations) {
+    const header = annotations.length > 1
+        ? `The user submitted ${annotations.length} browser annotations. Address each one.`
+        : "The user submitted a browser annotation.";
+    const blocks = annotations.map((a, i) => {
+        const n = annotations.length > 1 ? ` ${i + 1}` : "";
+        const page = a.page ?? {};
+        const instruction = (a.instruction ?? "").trim() || "(no instruction text)";
+        return [
+            `## Annotation${n}`,
+            `Instruction: ${instruction}`,
+            page.url ? `Page: ${page.title ? `${page.title} — ` : ""}${page.url}` : "",
+            "Selected element:",
+            formatElement(a.element),
+        ]
+            .filter(Boolean)
+            .join("\n");
+    });
+    return [
+        header,
+        "",
+        ...blocks,
+        "",
+        "Use the element metadata to locate the relevant code and make the requested change. No screenshot is attached.",
+    ].join("\n");
+}
+async function readJsonBody(req, limitBytes = 2_000_000) {
+    return await new Promise((resolve, reject) => {
+        let size = 0;
+        const chunks = [];
+        req.on("data", (chunk) => {
+            size += chunk.length;
+            if (size > limitBytes) {
+                reject(new Error("payload too large"));
+                req.destroy();
+                return;
+            }
+            chunks.push(chunk);
+        });
+        req.on("end", () => {
+            try {
+                resolve(JSON.parse(Buffer.concat(chunks).toString("utf8")));
+            }
+            catch (error) {
+                reject(error instanceof Error ? error : new Error("invalid JSON"));
+            }
+        });
+        req.on("error", reject);
+    });
+}
+function sendJson(res, status, body) {
+    const payload = JSON.stringify(body);
+    res.writeHead(status, {
+        "content-type": "application/json",
+        "content-length": Buffer.byteLength(payload),
+        // The extension calls from a browser origin; allow it to read the response.
+        "access-control-allow-origin": "*",
+        "access-control-allow-headers": "content-type",
+        "access-control-allow-methods": "POST, GET, OPTIONS",
+    });
+    res.end(payload);
+}
+export const BrowserAnnotationPlugin = async ({ client, directory }) => {
+    const host = envHost();
+    const port = envPort();
+    let activeSessionID = null;
+    let server = null;
+    const log = (level, message, extra) => {
+        void client.app
+            .log({ body: { service: "browser-annotation", level, message, extra } })
+            .catch(() => { });
+    };
+    async function inject(annotations) {
+        if (!activeSessionID) {
+            return { ok: false, error: "No active OpenCode session yet. Send a message in OpenCode first." };
+        }
+        try {
+            // promptAsync injects the turn without blocking on the agent's full
+            // response, so the extension gets a prompt acknowledgement.
+            await client.session.promptAsync({
+                path: { id: activeSessionID },
+                query: { directory },
+                body: { parts: [{ type: "text", text: buildPrompt(annotations) }] },
+            });
+            return { ok: true, sessionID: activeSessionID };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "session.prompt failed";
+            return { ok: false, error: message, sessionID: activeSessionID };
+        }
+    }
+    function handle(req, res) {
+        if (req.method === "OPTIONS") {
+            sendJson(res, 204, {});
+            return;
+        }
+        if (req.method === "GET" && req.url === "/status") {
+            sendJson(res, 200, { ok: true, activeSession: Boolean(activeSessionID), host, port });
+            return;
+        }
+        if (req.method === "POST" && req.url === "/annotations") {
+            readJsonBody(req)
+                .then(async (parsed) => {
+                const payload = (parsed ?? {});
+                const annotations = Array.isArray(payload.annotations) ? payload.annotations : [];
+                if (annotations.length === 0) {
+                    sendJson(res, 400, { ok: false, error: "No annotations in payload." });
+                    return;
+                }
+                const result = await inject(annotations);
+                if (result.ok) {
+                    log("info", `Injected ${annotations.length} annotation(s)`, { sessionID: result.sessionID });
+                    sendJson(res, 200, { ok: true, count: annotations.length, sessionID: result.sessionID });
+                }
+                else {
+                    log("warn", `Annotation injection failed: ${result.error}`);
+                    sendJson(res, 409, result);
+                }
+            })
+                .catch((error) => {
+                const message = error instanceof Error ? error.message : "bad request";
+                sendJson(res, 400, { ok: false, error: message });
+            });
+            return;
+        }
+        sendJson(res, 404, { ok: false, error: "Not found" });
+    }
+    function start() {
+        const s = createServer(handle);
+        s.on("error", (error) => {
+            if (error.code === "EADDRINUSE") {
+                log("error", `Port ${port} on ${host} is already in use; annotation server not started.`);
+            }
+            else {
+                log("error", `Annotation server error: ${error.message}`);
+            }
+        });
+        s.listen(port, host, () => {
+            log("info", `Browser annotation server listening on http://${host}:${port}`);
+        });
+        server = s;
+    }
+    start();
+    return {
+        "chat.message": async (input) => {
+            if (input?.sessionID)
+                activeSessionID = input.sessionID;
+        },
+        event: async ({ event }) => {
+            if (event.type === "session.deleted") {
+                if (event.properties.info.id === activeSessionID)
+                    activeSessionID = null;
+            }
+            else if (event.type === "server.connected" && !server) {
+                start();
+            }
+        },
+    };
+};
+export default BrowserAnnotationPlugin;

package/extension/background.js

@@ -0,0 +1,80 @@
+// Background service worker: holds the annotation list and submits the batch to
+// the plugin's loopback HTTP server (reached over an ssh -R tunnel when the
+// OpenCode host is remote).
+
+const DEFAULT_ENDPOINT = "http://127.0.0.1:39517";
+const EXTENSION_VERSION = chrome.runtime.getManifest().version;
+
+async function getEndpoint() {
+  const { endpoint } = await chrome.storage.local.get("endpoint");
+  return (endpoint || DEFAULT_ENDPOINT).replace(/\/+$/, "");
+}
+
+async function getAnnotations() {
+  const { annotations } = await chrome.storage.local.get("annotations");
+  return Array.isArray(annotations) ? annotations : [];
+}
+
+async function setAnnotations(list) {
+  await chrome.storage.local.set({ annotations: list });
+}
+
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+  (async () => {
+    if (msg?.type === "oc-add-annotation" && msg.annotation) {
+      const list = await getAnnotations();
+      list.push({ ...msg.annotation, ts: Date.now() });
+      await setAnnotations(list);
+      sendResponse({ ok: true, count: list.length });
+      return;
+    }
+
+    if (msg?.type === "oc-list") {
+      sendResponse({ ok: true, annotations: await getAnnotations() });
+      return;
+    }
+
+    if (msg?.type === "oc-clear") {
+      await setAnnotations([]);
+      sendResponse({ ok: true });
+      return;
+    }
+
+    if (msg?.type === "oc-remove" && typeof msg.index === "number") {
+      const list = await getAnnotations();
+      list.splice(msg.index, 1);
+      await setAnnotations(list);
+      sendResponse({ ok: true, annotations: list });
+      return;
+    }
+
+    if (msg?.type === "oc-submit") {
+      const list = await getAnnotations();
+      if (list.length === 0) {
+        sendResponse({ ok: false, error: "No annotations to submit." });
+        return;
+      }
+      try {
+        const endpoint = await getEndpoint();
+        const res = await fetch(`${endpoint}/annotations`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ extensionVersion: EXTENSION_VERSION, annotations: list }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok && data.ok) {
+          await setAnnotations([]);
+          sendResponse({ ok: true, count: data.count });
+        } else {
+          sendResponse({ ok: false, error: data.error || `HTTP ${res.status}` });
+        }
+      } catch (error) {
+        sendResponse({ ok: false, error: error?.message || "Request failed. Is the tunnel up?" });
+      }
+      return;
+    }
+
+    sendResponse({ ok: false, error: "Unknown message" });
+  })();
+  return true; // async response
+});

package/extension/content.js

@@ -0,0 +1,126 @@
+// Content script: element picker + annotation capture.
+// Injected on demand by the popup. Highlights elements on hover, captures a
+// selected element's metadata plus a typed instruction, and stores annotations
+// via the background service worker.
+
+(() => {
+  if (window.__ocAnnotationActive) return;
+  window.__ocAnnotationActive = true;
+
+  const HIGHLIGHT_ID = "__oc-annotation-highlight";
+  let overlay = null;
+  let current = null;
+
+  function makeOverlay() {
+    const el = document.createElement("div");
+    el.id = HIGHLIGHT_ID;
+    Object.assign(el.style, {
+      position: "fixed",
+      pointerEvents: "none",
+      zIndex: "2147483646",
+      border: "2px solid #2b7cff",
+      background: "rgba(43,124,255,0.12)",
+      borderRadius: "2px",
+      transition: "all 0.03s ease-out",
+      display: "none",
+    });
+    document.documentElement.appendChild(el);
+    return el;
+  }
+
+  function positionOverlay(target) {
+    if (!overlay) return;
+    const r = target.getBoundingClientRect();
+    Object.assign(overlay.style, {
+      display: "block",
+      left: `${r.left}px`,
+      top: `${r.top}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`,
+    });
+  }
+
+  function cssPath(el) {
+    if (!(el instanceof Element)) return "";
+    if (el.id) return `#${CSS.escape(el.id)}`;
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1 && parts.length < 5) {
+      let selector = node.nodeName.toLowerCase();
+      if (node.classList.length) {
+        selector += "." + Array.from(node.classList).slice(0, 3).map((c) => CSS.escape(c)).join(".");
+      }
+      const parent = node.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter((c) => c.nodeName === node.nodeName);
+        if (siblings.length > 1) {
+          selector += `:nth-of-type(${siblings.indexOf(node) + 1})`;
+        }
+      }
+      parts.unshift(selector);
+      if (node.id) {
+        parts[0] = `#${CSS.escape(node.id)}`;
+        break;
+      }
+      node = node.parentElement;
+    }
+    return parts.join(" > ");
+  }
+
+  function elementMeta(el) {
+    const r = el.getBoundingClientRect();
+    return {
+      selector: cssPath(el),
+      tag: el.tagName,
+      text: (el.textContent || "").trim().slice(0, 500),
+      role: el.getAttribute("role") || undefined,
+      ariaLabel: el.getAttribute("aria-label") || undefined,
+      bounds: { x: r.left, y: r.top, width: r.width, height: r.height },
+      html: el.outerHTML.slice(0, 800),
+    };
+  }
+
+  function cleanup() {
+    document.removeEventListener("mousemove", onMove, true);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKey, true);
+    if (overlay) overlay.remove();
+    overlay = null;
+    window.__ocAnnotationActive = false;
+  }
+
+  function onMove(e) {
+    const target = e.target;
+    if (!target || target === overlay) return;
+    current = target;
+    positionOverlay(target);
+  }
+
+  function onKey(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cleanup();
+    }
+  }
+
+  function onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const target = current || e.target;
+    if (!target) return;
+    const instruction = window.prompt("Instruction for this element:");
+    if (instruction === null) return; // cancelled; keep picking
+    const annotation = {
+      instruction: instruction.trim(),
+      page: { url: location.href, title: document.title },
+      element: elementMeta(target),
+    };
+    chrome.runtime.sendMessage({ type: "oc-add-annotation", annotation }, () => {});
+    cleanup();
+  }
+
+  overlay = makeOverlay();
+  document.addEventListener("mousemove", onMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKey, true);
+})();

package/extension/manifest.json

@@ -0,0 +1,17 @@
+{
+  "manifest_version": 3,
+  "name": "OpenCode Browser Annotation",
+  "version": "0.1.0",
+  "description": "Select an element, type an instruction, and send it to your OpenCode agent. Text and element metadata only.",
+  "permissions": ["activeTab", "scripting", "storage"],
+  "host_permissions": ["http://127.0.0.1/*", "http://localhost/*"],
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "OpenCode Annotation"
+  },
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "options_page": "options.html"
+}

package/extension/options.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 520px;
+        margin: 24px auto;
+        padding: 0 16px;
+        color: #1a1a1a;
+      }
+      label {
+        display: block;
+        font-weight: 600;
+        margin-bottom: 6px;
+      }
+      input {
+        width: 100%;
+        font: inherit;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        box-sizing: border-box;
+      }
+      button {
+        font: inherit;
+        margin-top: 12px;
+        padding: 8px 14px;
+        border: 1px solid #2b7cff;
+        border-radius: 6px;
+        background: #2b7cff;
+        color: #fff;
+        cursor: pointer;
+      }
+      p {
+        color: #555;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+      code {
+        background: #f2f2f2;
+        padding: 1px 4px;
+        border-radius: 4px;
+      }
+      #saved {
+        color: #0a0;
+        font-size: 13px;
+        margin-left: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>OpenCode Annotation settings</h1>
+    <label for="endpoint">Plugin endpoint</label>
+    <input id="endpoint" type="text" placeholder="http://127.0.0.1:39517" />
+    <p>
+      The URL of the plugin's HTTP server. When OpenCode runs on a remote host,
+      forward the port with a reverse tunnel and point this at the local end:
+      <br />
+      <code>ssh -N -R 39517:127.0.0.1:39517 you@server</code>
+    </p>
+    <button id="save">Save</button>
+    <span id="saved"></span>
+    <script src="options.js"></script>
+  </body>
+</html>

package/extension/options.js

@@ -0,0 +1,14 @@
+const input = document.getElementById("endpoint");
+const saved = document.getElementById("saved");
+const DEFAULT_ENDPOINT = "http://127.0.0.1:39517";
+
+chrome.storage.local.get("endpoint").then(({ endpoint }) => {
+  input.value = endpoint || DEFAULT_ENDPOINT;
+});
+
+document.getElementById("save").addEventListener("click", async () => {
+  const value = input.value.trim() || DEFAULT_ENDPOINT;
+  await chrome.storage.local.set({ endpoint: value });
+  saved.textContent = "Saved.";
+  setTimeout(() => (saved.textContent = ""), 1500);
+});

package/extension/popup.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        width: 320px;
+        margin: 0;
+        padding: 12px;
+        color: #1a1a1a;
+      }
+      h1 {
+        font-size: 14px;
+        margin: 0 0 8px;
+      }
+      button {
+        font: inherit;
+        padding: 6px 10px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        background: #f7f7f7;
+        cursor: pointer;
+      }
+      button.primary {
+        background: #2b7cff;
+        color: #fff;
+        border-color: #2b7cff;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+      .row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+      #list {
+        list-style: none;
+        margin: 8px 0;
+        padding: 0;
+        max-height: 220px;
+        overflow: auto;
+      }
+      #list li {
+        border: 1px solid #eee;
+        border-radius: 6px;
+        padding: 6px 8px;
+        margin-bottom: 6px;
+        font-size: 12px;
+      }
+      #list .sel {
+        color: #666;
+        font-family: ui-monospace, monospace;
+        word-break: break-all;
+      }
+      #list .rm {
+        float: right;
+        color: #c00;
+        cursor: pointer;
+      }
+      #status {
+        font-size: 12px;
+        color: #666;
+        min-height: 16px;
+      }
+      a {
+        font-size: 11px;
+        color: #2b7cff;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>OpenCode Browser Annotation</h1>
+    <div class="row">
+      <button id="pick" class="primary">Select element</button>
+      <button id="clear">Clear</button>
+    </div>
+    <ul id="list"></ul>
+    <div class="row">
+      <button id="submit" class="primary">Submit to agent</button>
+    </div>
+    <div id="status"></div>
+    <a href="#" id="opts">Settings</a>
+    <script src="popup.js"></script>
+  </body>
+</html>

package/extension/popup.js

@@ -0,0 +1,71 @@
+const listEl = document.getElementById("list");
+const statusEl = document.getElementById("status");
+const pickBtn = document.getElementById("pick");
+const clearBtn = document.getElementById("clear");
+const submitBtn = document.getElementById("submit");
+
+function send(msg) {
+  return new Promise((resolve) => chrome.runtime.sendMessage(msg, resolve));
+}
+
+function setStatus(text) {
+  statusEl.textContent = text || "";
+}
+
+async function render() {
+  const res = await send({ type: "oc-list" });
+  const annotations = res?.annotations || [];
+  listEl.innerHTML = "";
+  submitBtn.disabled = annotations.length === 0;
+  for (let i = 0; i < annotations.length; i++) {
+    const a = annotations[i];
+    const li = document.createElement("li");
+    const instruction = (a.instruction || "(no instruction)").replace(/</g, "&lt;");
+    const sel = (a.element?.selector || a.element?.tag || "").replace(/</g, "&lt;");
+    li.innerHTML = `<span class="rm" data-i="${i}">✕</span><div>${instruction}</div><div class="sel">${sel}</div>`;
+    listEl.appendChild(li);
+  }
+  listEl.querySelectorAll(".rm").forEach((el) => {
+    el.addEventListener("click", async () => {
+      await send({ type: "oc-remove", index: Number(el.dataset.i) });
+      render();
+    });
+  });
+}
+
+pickBtn.addEventListener("click", async () => {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (!tab?.id) return;
+  try {
+    await chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ["content.js"] });
+    setStatus("Hover an element and click it. Esc to cancel.");
+    window.close();
+  } catch (error) {
+    setStatus("Cannot inject here (e.g. chrome:// pages).");
+  }
+});
+
+clearBtn.addEventListener("click", async () => {
+  await send({ type: "oc-clear" });
+  render();
+});
+
+submitBtn.addEventListener("click", async () => {
+  submitBtn.disabled = true;
+  setStatus("Submitting…");
+  const res = await send({ type: "oc-submit" });
+  if (res?.ok) {
+    setStatus(`Sent ${res.count} annotation(s) to the agent.`);
+    render();
+  } else {
+    setStatus(`Failed: ${res?.error || "unknown error"}`);
+    submitBtn.disabled = false;
+  }
+});
+
+document.getElementById("opts").addEventListener("click", (e) => {
+  e.preventDefault();
+  chrome.runtime.openOptionsPage();
+});
+
+render();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "opencode-browser-annotation-plugin",
+  "version": "0.1.0",
+  "description": "Select an element in your browser, type an instruction, and send it to your OpenCode agent over a loopback + SSH tunnel. Text and element metadata only (no screenshots).",
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "browser",
+    "annotation",
+    "chrome-extension"
+  ],
+  "license": "MIT",
+  "author": "caoool",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/caoool/opencode-browser-annotation-plugin.git"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/plugin.d.ts",
+      "default": "./dist/plugin.js"
+    }
+  },
+  "files": [
+    "dist",
+    "extension",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=1.18.0"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.18.1",
+    "@types/node": "^26.1.1",
+    "typescript": "^5.6.0"
+  }
+}