opencode-browser-annotation-plugin 0.3.0 → 0.3.2

package/dist/plugin.js

@@ -7,9 +7,9 @@ import { createServer } from "node:http";
  * the browser runs on a separate desktop, the extension reaches this server over
  * an `ssh -L` local forward (desktop -> host).
  *
- * On receipt the plugin injects a new user turn into the most recently active
- * OpenCode session so the agent responds. Annotations may be acted on
- * immediately ("act") or queued and flushed with a later act ("queue").
+ * On receipt the plugin injects a new user turn into the chosen OpenCode session
+ * (the extension may target any session by id; otherwise the most recently
+ * active one) so the agent responds.
  *
  * Scope: text + element metadata only. No screenshots, no image/vision.
  */
@@ -142,18 +142,35 @@ export const BrowserAnnotationPlugin = async ({ client, directory }) => {
     const host = envHost();
     const port = envPort();
     let activeSessionID = null;
-    let activeSessionTitle = null;
     let server = null;
-    const queued = [];
     const log = (level, message, extra) => {
         void client.app
             .log({ body: { service: "browser-annotation", level, message, extra } })
             .catch(() => { });
     };
-    async function injectPrompt(annotations) {
+    /**
+     * All sessions live in this one OpenCode process, so the plugin can address
+     * any of them by id — a single HTTP port/tunnel does not limit targeting.
+     * Returns top-level sessions (no parentID), most-recently-updated first.
+     */
+    async function listSessions() {
+        try {
+            const res = (await client.session.list({ query: { directory } }));
+            const rows = Array.isArray(res) ? res : Array.isArray(res?.data) ? res.data : [];
+            return rows
+                .filter((s) => s && typeof s.id === "string" && !s.parentID)
+                .map((s) => ({ id: s.id, title: typeof s.title === "string" ? s.title : s.id, updated: s.time?.updated ?? 0 }))
+                .sort((a, b) => b.updated - a.updated);
+        }
+        catch (error) {
+            log("warn", `session.list failed: ${error instanceof Error ? error.message : "unknown"}`);
+            return [];
+        }
+    }
+    async function injectPrompt(sessionID, annotations) {
         try {
             await client.session.promptAsync({
-                path: { id: activeSessionID },
+                path: { id: sessionID },
                 query: { directory },
                 body: { parts: [{ type: "text", text: buildPrompt(annotations) }] },
             });
@@ -163,34 +180,26 @@ export const BrowserAnnotationPlugin = async ({ client, directory }) => {
             return { ok: false, error: error instanceof Error ? error.message : "session.prompt failed" };
         }
     }
-    /**
-     * Queue annotations are held until an "act" annotation arrives (or all-queue
-     * submits nothing yet). An act annotation flushes the queue plus itself.
-     */
-    async function handleSubmit(annotations) {
-        if (!activeSessionID) {
+    async function handleSubmit(annotations, requestedSessionID) {
+        // Prefer the explicitly targeted session; fall back to the last active one.
+        let targetID = requestedSessionID || activeSessionID;
+        if (requestedSessionID) {
+            const sessions = await listSessions();
+            if (!sessions.some((s) => s.id === requestedSessionID)) {
+                return { ok: false, error: "Target session no longer exists.", injected: 0 };
+            }
+        }
+        if (!targetID) {
             return {
                 ok: false,
-                error: "No active OpenCode session yet. Send a message in OpenCode first.",
+                error: "No target session. Send a message in OpenCode first, or pick a session.",
                 injected: 0,
-                queued: queued.length,
             };
         }
-        const toQueue = annotations.filter((a) => a.mode === "queue");
-        const toAct = annotations.filter((a) => a.mode !== "queue");
-        queued.push(...toQueue);
-        if (toAct.length === 0) {
-            return { ok: true, injected: 0, queued: queued.length, sessionID: activeSessionID };
-        }
-        const batch = [...queued, ...toAct];
-        queued.length = 0;
-        const result = await injectPrompt(batch);
-        if (!result.ok) {
-            // Re-queue so nothing is lost.
-            queued.unshift(...batch.filter((a) => a.mode === "queue"));
-            return { ok: false, error: result.error, injected: 0, queued: queued.length, sessionID: activeSessionID };
-        }
-        return { ok: true, injected: batch.length, queued: queued.length, sessionID: activeSessionID };
+        const result = await injectPrompt(targetID, annotations);
+        if (!result.ok)
+            return { ok: false, error: result.error, injected: 0, sessionID: targetID };
+        return { ok: true, injected: annotations.length, sessionID: targetID };
     }
     function handle(req, res) {
         if (req.method === "OPTIONS") {
@@ -198,14 +207,17 @@ export const BrowserAnnotationPlugin = async ({ client, directory }) => {
             return;
         }
         if (req.method === "GET" && req.url === "/status") {
-            sendJson(res, 200, {
-                ok: true,
-                activeSession: Boolean(activeSessionID),
-                sessionID: activeSessionID,
-                sessionTitle: activeSessionTitle,
-                queued: queued.length,
-                host,
-                port,
+            void listSessions().then((sessions) => {
+                const active = sessions.find((s) => s.id === activeSessionID);
+                sendJson(res, 200, {
+                    ok: true,
+                    activeSession: Boolean(activeSessionID),
+                    sessionID: activeSessionID,
+                    sessionTitle: active?.title ?? null,
+                    sessions,
+                    host,
+                    port,
+                });
             });
             return;
         }
@@ -218,11 +230,9 @@ export const BrowserAnnotationPlugin = async ({ client, directory }) => {
                     sendJson(res, 400, { ok: false, error: "No annotations in payload." });
                     return;
                 }
-                const result = await handleSubmit(annotations);
+                const result = await handleSubmit(annotations, payload.sessionID);
                 if (result.ok) {
-                    log("info", `Annotations: injected ${result.injected}, queued ${result.queued}`, {
-                        sessionID: result.sessionID,
-                    });
+                    log("info", `Injected ${result.injected} annotation(s)`, { sessionID: result.sessionID });
                     sendJson(res, 200, result);
                 }
                 else {
@@ -263,17 +273,9 @@ export const BrowserAnnotationPlugin = async ({ client, directory }) => {
                 activeSessionID = input.sessionID;
         },
         event: async ({ event }) => {
-            if (event.type === "session.updated") {
-                const info = event.properties.info;
-                if (info.id === activeSessionID && typeof info.title === "string") {
-                    activeSessionTitle = info.title;
-                }
-            }
-            else if (event.type === "session.deleted") {
-                if (event.properties.info.id === activeSessionID) {
+            if (event.type === "session.deleted") {
+                if (event.properties.info.id === activeSessionID)
                     activeSessionID = null;
-                    activeSessionTitle = null;
-                }
             }
         },
     };

package/extension/background.js

@@ -68,7 +68,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         const res = await fetch(`${endpoint}/annotations`, {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ extensionVersion: EXTENSION_VERSION, annotations }),
+          body: JSON.stringify({ extensionVersion: EXTENSION_VERSION, annotations, sessionID: msg.sessionID }),
         });
         const data = await res.json().catch(() => ({}));
         if (res.ok && data.ok) {

package/extension/manifest.json

@@ -1,10 +1,17 @@
 {
   "manifest_version": 3,
   "name": "OpenCode Browser Annotation",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Alt+A to annotate an element, Alt+Shift+A for the annotation list. Sends element metadata to your OpenCode agent.",
-  "permissions": ["activeTab", "scripting", "storage"],
-  "host_permissions": ["http://127.0.0.1/*", "http://localhost/*"],
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "storage"
+  ],
+  "host_permissions": [
+    "http://127.0.0.1/*",
+    "http://localhost/*"
+  ],
   "background": {
     "service_worker": "background.js",
     "type": "module"
@@ -15,11 +22,17 @@
   "options_page": "options.html",
   "commands": {
     "select-element": {
-      "suggested_key": { "default": "Alt+A", "mac": "Alt+A" },
+      "suggested_key": {
+        "default": "Alt+A",
+        "mac": "Alt+A"
+      },
       "description": "Pick an element to annotate"
     },
     "toggle-sidebar": {
-      "suggested_key": { "default": "Alt+Shift+A", "mac": "Alt+Shift+A" },
+      "suggested_key": {
+        "default": "Alt+Shift+A",
+        "mac": "Alt+Shift+A"
+      },
       "description": "Toggle the annotation list sidebar"
     }
   }

package/extension/overlay.js

@@ -5,9 +5,9 @@
 //   Alt+A        -> start element picking (background sends "oc-pick")
 //   Alt+Shift+A  -> toggle the list sidebar ("oc-toggle-sidebar")
 // Picking an element opens a floating popup near it (onUI-style): type an
-// instruction, choose Act/Queue, then Add (to the sidebar list) or Send (submit
-// immediately). The sidebar is a floating rounded card holding pending
-// annotations for batch submit.
+// instruction, then Add (to the sidebar list) or Send (submit immediately). The
+// sidebar is a floating rounded card holding pending annotations for batch
+// submit, with a session-target picker.
 
 (() => {
   if (window.__ocAnnotationInjected) return;
@@ -20,10 +20,6 @@
       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>',
     trash:
       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
-    bolt:
-      '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
-    layers:
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',
     send:
       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',
     plus:
@@ -71,11 +67,6 @@
     textarea.oc-ta::placeholder { color: #616678; }
     textarea.oc-ta:focus { outline: none; border-color: #4c8dff; box-shadow: 0 0 0 3px rgba(76,141,255,.18); }
 
-    .oc-modes { display: flex; gap: 6px; margin-top: 9px; }
-    .oc-mode { font: inherit; font-size: 12px; font-weight: 600; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.05); color: #9298aa; border: 1px solid transparent; }
-    .oc-mode svg { width: 13px; height: 13px; }
-    .oc-mode:hover { background: rgba(255,255,255,.09); color: #cfd3df; }
-    .oc-mode.sel { background: rgba(76,141,255,.16); color: #7aa9ff; border-color: rgba(76,141,255,.4); }
 
     .btn { font: inherit; font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e6e8ee; transition: background .15s, transform .05s; }
     .btn svg { width: 15px; height: 15px; }
@@ -103,10 +94,12 @@
     .oc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
     .oc-desc { font: 11px ui-monospace, monospace; color: #aeb4c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; flex: 1; }
     .oc-card .oc-text { font-size: 12.5px; color: #d4d7e0; white-space: pre-wrap; word-break: break-word; }
-    .oc-card .oc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #9298aa; margin-top: 6px; }
-    .oc-card .oc-tag svg { width: 12px; height: 12px; }
     .oc-foot-bar { padding: 11px 12px; border-top: 1px solid rgba(255,255,255,.07); position: relative; }
-    .oc-status { font-size: 12px; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; color: #9298aa; }
+    .oc-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
+    .oc-select { flex: none; max-width: 150px; font: inherit; font-size: 11.5px; color: #cfd3df; background: #14151b; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 4px 6px; }
+    .oc-select:focus { outline: none; border-color: #4c8dff; }
+    .oc-status { flex: 1; min-width: 0; font-size: 12px; display: flex; align-items: center; gap: 8px; color: #9298aa; }
+    .oc-status span, .oc-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .oc-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5b6070; flex: none; }
     .oc-status.good::before { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); }
     .oc-status.warn::before { background: #fbbf24; } .oc-status.bad::before { background: #f87171; } .oc-status.checking::before { background: #60a5fa; }
@@ -125,6 +118,62 @@
   let pending = []; // annotations added to the sidebar list
   let sidebarOpen = false;
   let statusTimer = null;
+  let sessions = []; // [{ id, title, updated }]
+  let targetSessionID = null; // user-chosen target; null = auto (last active)
+  let autoSessionID = null; // the plugin's last-active session
+
+  // A content script keeps running after its extension is reloaded/updated, but
+  // its chrome.* calls then throw "Extension context invalidated". Guard every
+  // message so a stale overlay fails quietly instead of spamming errors, and
+  // tear itself down once the context is gone.
+  function contextAlive() {
+    try {
+      return Boolean(chrome.runtime && chrome.runtime.id);
+    } catch {
+      return false;
+    }
+  }
+
+  function sendMsg(payload, cb) {
+    if (!contextAlive()) {
+      teardown();
+      return;
+    }
+    try {
+      chrome.runtime.sendMessage(payload, (res) => {
+        if (chrome.runtime.lastError) {
+          cb(null);
+          return;
+        }
+        cb(res);
+      });
+    } catch {
+      teardown();
+    }
+  }
+
+  function teardown() {
+    if (statusTimer) {
+      clearInterval(statusTimer);
+      statusTimer = null;
+    }
+    if (host) host.style.display = "none";
+  }
+
+  function effectiveTarget() {
+    return targetSessionID || autoSessionID;
+  }
+
+  function targetTitle() {
+    const id = effectiveTarget();
+    const s = sessions.find((x) => x.id === id);
+    return s ? s.title : null;
+  }
+
+  function targetLabel() {
+    const t = targetTitle();
+    return t ? ` · → ${escapeHtml(t)}` : "";
+  }
 
   // ---------- metadata ----------
 
@@ -266,6 +315,19 @@
     document.addEventListener("mousemove", onMove, true);
     document.addEventListener("click", onClick, true);
     document.addEventListener("keydown", onKey, true);
+
+    // Keep keystrokes typed inside our UI from reaching the page's global
+    // hotkeys (e.g. GitHub's "s"/"f"). Capture key events at the document before
+    // page listeners run; if the event originates inside our shadow UI, stop it
+    // (Esc is handled by onKey above, which runs first in capture order here).
+    const contain = (e) => {
+      if (e.composedPath && e.composedPath().includes(host)) {
+        e.stopImmediatePropagation();
+      }
+    };
+    for (const type of ["keydown", "keyup", "keypress"]) {
+      document.addEventListener(type, contain, true);
+    }
   }
 
   function startPicking() {
@@ -297,7 +359,6 @@
   function openPopup(element, rect) {
     ensureUI();
     closePopup();
-    const state = { mode: "act" };
     const el = document.createElement("div");
     el.className = "oc-popup oc-surface";
     el.innerHTML = `
@@ -308,11 +369,7 @@
       </div>
       <div class="oc-body">
         <textarea class="oc-ta" rows="3" placeholder="Describe the change or ask about this element…"></textarea>
-        <div class="oc-modes">
-          <button class="oc-mode sel" data-mode="act">${ICON.bolt}<span>Act now</span></button>
-          <button class="oc-mode" data-mode="queue">${ICON.layers}<span>Queue</span></button>
-        </div>
-        <div class="oc-hintline">Cmd/Ctrl+Enter to send</div>
+        <div class="oc-hintline">Cmd/Ctrl+Enter to send${targetLabel()}</div>
       </div>
       <div class="oc-foot">
         <button class="btn oc-add">${ICON.plus}<span>Add to list</span></button>
@@ -326,13 +383,7 @@
     setTimeout(() => ta.focus(), 30);
 
     el.querySelector(".oc-x").addEventListener("click", closePopup);
-    el.querySelectorAll(".oc-mode").forEach((b) =>
-      b.addEventListener("click", () => {
-        state.mode = b.dataset.mode;
-        el.querySelectorAll(".oc-mode").forEach((x) => x.classList.toggle("sel", x === b));
-      }),
-    );
-    const build = () => ({ instruction: ta.value.trim(), mode: state.mode, page: { url: location.href, title: document.title }, element });
+    const build = () => ({ instruction: ta.value.trim(), page: { url: location.href, title: document.title }, element });
     el.querySelector(".oc-add").addEventListener("click", () => {
       if (!ta.value.trim()) return ta.focus();
       pending.push(build());
@@ -386,16 +437,24 @@
           <span class="logo">${ICON.logo}</span>
           <span class="title">Annotations</span>
           <span class="badge" id="oc-badge">0</span>
+          <button class="iconbtn" id="oc-pick" title="Select element (Alt+A)">${ICON.target}</button>
           <button class="iconbtn" id="oc-close" title="Close (Alt+Shift+A)">${ICON.close}</button>
         </div>
         <div class="oc-list" id="oc-list"></div>
         <div class="oc-foot-bar">
-          <div class="oc-status" id="oc-status">…</div>
+          <div class="oc-status-row">
+            <div class="oc-status" id="oc-status">…</div>
+            <select class="oc-select" id="oc-session" title="Target session"></select>
+          </div>
           <button class="btn primary oc-submit" id="oc-submit" disabled>${ICON.send}<span>Submit to agent</span></button>
           <div class="oc-toast" id="oc-toast"></div>
         </div>`;
       root.appendChild(sb);
       sb.querySelector("#oc-close").addEventListener("click", closeSidebar);
+      sb.querySelector("#oc-pick").addEventListener("click", () => startPicking());
+      sb.querySelector("#oc-session").addEventListener("change", (e) => {
+        targetSessionID = e.target.value || null;
+      });
       sb.querySelector("#oc-submit").addEventListener("click", () => {
         submit(pending, false);
       });
@@ -443,15 +502,12 @@
     pending.forEach((a, i) => {
       const card = document.createElement("div");
       card.className = "oc-card";
-      const modeIcon = a.mode === "queue" ? ICON.layers : ICON.bolt;
-      const modeName = a.mode === "queue" ? "Queue" : "Act now";
       card.innerHTML = `
         <div class="oc-card-head">
           <span class="oc-desc" title="${escapeHtml(a.element.selector || "")}">${escapeHtml(descriptor(a.element))}</span>
           <button class="iconbtn oc-rm" data-i="${i}" title="Remove">${ICON.trash}</button>
         </div>
-        <div class="oc-text">${escapeHtml(a.instruction || "(no instruction)")}</div>
-        <div class="oc-tag">${modeIcon}<span>${modeName}</span></div>`;
+        <div class="oc-text">${escapeHtml(a.instruction || "(no instruction)")}</div>`;
       list.appendChild(card);
     });
     const btn = root.getElementById("oc-submit");
@@ -469,17 +525,19 @@
     if (!el) return;
     el.className = "oc-status checking";
     el.textContent = "Checking connection…";
-    chrome.runtime.sendMessage({ type: "oc-status" }, (res) => {
-      if (chrome.runtime.lastError || !res) {
+    sendMsg({ type: "oc-status" }, (res) => {
+      if (!res) {
         el.className = "oc-status bad";
         el.textContent = "Extension error";
         return;
       }
       if (res.ok && res.data?.ok) {
-        if (res.data.activeSession) {
-          const q = res.data.queued ? ` · ${res.data.queued} queued` : "";
+        sessions = Array.isArray(res.data.sessions) ? res.data.sessions : [];
+        autoSessionID = res.data.sessionID || null;
+        renderSessions();
+        if (sessions.length || res.data.activeSession) {
           el.className = "oc-status good";
-          el.textContent = `Connected${q}`;
+          el.textContent = "Connected";
         } else {
           el.className = "oc-status warn";
           el.textContent = "Connected — send a message in OpenCode first";
@@ -491,6 +549,26 @@
     });
   }
 
+  function renderSessions() {
+    if (!root) return;
+    const sel = root.getElementById("oc-session");
+    if (!sel) return;
+    // If the chosen target vanished, fall back to auto.
+    if (targetSessionID && !sessions.some((s) => s.id === targetSessionID)) targetSessionID = null;
+    const current = effectiveTarget();
+    const opts = [`<option value="">Auto (last active)</option>`].concat(
+      sessions.map((s) => {
+        const active = s.id === autoSessionID ? " • active" : "";
+        const label = `${(s.title || s.id).slice(0, 40)}${active}`;
+        const selected = s.id === current ? " selected" : "";
+        return `<option value="${escapeHtml(s.id)}"${selected}>${escapeHtml(label)}</option>`;
+      }),
+    );
+    // Keep "Auto" selected when no explicit target.
+    sel.innerHTML = opts.join("");
+    if (!targetSessionID) sel.value = "";
+  }
+
   function toast(text, bad) {
     if (!root) return;
     // Prefer the sidebar's toast when it is open; otherwise use a standalone
@@ -514,16 +592,14 @@
   function submit(annotations, quick) {
     if (!annotations.length) return;
     toast("Submitting…");
-    chrome.runtime.sendMessage({ type: "oc-submit", annotations }, (res) => {
-      if (chrome.runtime.lastError || !res) {
+    const sessionID = effectiveTarget() || undefined;
+    sendMsg({ type: "oc-submit", annotations, sessionID }, (res) => {
+      if (!res) {
         toast("Extension error", true);
         return;
       }
       if (res.ok) {
-        const parts = [];
-        if (res.injected) parts.push(`${res.injected} sent`);
-        if (res.queued) parts.push(`${res.queued} queued`);
-        toast(parts.length ? parts.join(", ") : "Submitted");
+        toast(res.injected ? `${res.injected} sent to agent` : "Submitted");
         if (!quick) {
           pending = [];
           renderCards();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-browser-annotation-plugin",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",