opencode-annotate 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +30 -75
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,105 +1,60 @@
1
- # <img src="https://raw.githubusercontent.com/jodusnodus/opencode-chrome-annotation/main/icon.svg" width="60" align="center" /> OpenCode Chrome Annotation
1
+ # <img src="https://raw.githubusercontent.com/jodusnodus/opencode-chrome-annotation/main/icon.svg" width="60" align="center" /> opencode-annotate
2
2
 
3
3
  [![version](https://img.shields.io/npm/v/opencode-annotate?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/opencode-annotate)
4
- > Fork of [JodusNodus/opencode-chrome-annotation](https://github.com/JodusNodus/opencode-chrome-annotation), published as `opencode-annotate`. GPL-3.0.
5
- [![license](https://img.shields.io/npm/l/opencode-chrome-annotation?style=flat&colorA=000000&colorB=000000)](https://github.com/jodusnodus/opencode-chrome-annotation/blob/main/LICENSE)
4
+ [![license](https://img.shields.io/npm/l/opencode-annotate?style=flat&colorA=000000&colorB=000000)](https://github.com/eagleeyejack/opencode-chrome-annotation/blob/main/LICENSE)
6
5
 
7
- Annotate any page in Chrome and send the screenshot, selected element metadata, and your instruction directly into [OpenCode](https://opencode.ai).
6
+ > Fork of [JodusNodus/opencode-chrome-annotation](https://github.com/JodusNodus/opencode-chrome-annotation), published as `opencode-annotate`. GPL-3.0. Not built by the OpenCode team and not affiliated with them.
8
7
 
9
- > **This is a fork** of [jodusnodus/opencode-chrome-annotation](https://github.com/jodusnodus/opencode-chrome-annotation) with quality-of-life and routing changes described below. The upstream npm package and Chrome Web Store listing serve the original; this repo's `main` is self-contained and not published to npm.
8
+ Point at what's broken in your live app. Your agent fixes it.
10
9
 
11
- ## What's different in this fork
10
+ This is the **OpenCode plugin** half of the tool. Pair it with the [Chrome extension](https://github.com/eagleeyejack/opencode-chrome-annotation-extension): a side panel connects any tab to your OpenCode session, you click the broken element on the live page, write what should change, and the agent receives the cropped screenshot, the element's exact selector, and your instruction.
12
11
 
13
- - **Annotation queue.** Pick mode stays on after each annotation so you can batch feedback, then send everything in one click. The connection bar shows a queue badge with a panel to review, remove, clear, or send all. The queue survives service worker restarts (`chrome.storage.session`).
14
- - **Element screenshots.** Each queued annotation crops the captured viewport to the selected element instead of shipping the full page.
15
- - **Chat locking.** Annotations now go to the chat you picked, always. Sub-agent sessions can no longer hijack routing, placeholder sessions are rejected with a clear message instead of silently rerouting, and prompts are delivered to the target session's own project directory.
16
- - **All chats, grouped.** The picker lists every open chat (not just the most recent one), grouped under project headers, with a Linked badge and a refresh button. The bar shows which chat you are linked to; clicking its name switches chats.
17
- - **Security.** The local server no longer reflects arbitrary web origins into `Access-Control-Allow-Origin`, so random web pages cannot read your chat titles over the localhost port.
18
- - **Robustness and restyle.** 10s timeout on screenshot capture (it can hang when a tab navigates mid-annotation), and a white/black/pastel UI.
12
+ ## Install
19
13
 
20
- ## Install (this fork)
21
-
22
- 1. Clone and build:
23
-
24
- ```bash
25
- git clone https://github.com/eagleeyejack/opencode-chrome-annotation
26
- cd opencode-chrome-annotation
27
- bun install
28
- bun run build
29
- bun run build:extension
30
- ```
31
-
32
- 2. Point your OpenCode config at the built plugin (absolute path to `dist/plugin.js`):
14
+ Add the plugin to your OpenCode config:
33
15
 
34
16
  ```json
35
17
  {
36
18
  "$schema": "https://opencode.ai/config.json",
37
- "plugin": ["/path/to/opencode-chrome-annotation/dist/plugin.js"]
19
+ "plugin": ["opencode-annotate@latest"]
38
20
  }
39
21
  ```
40
22
 
41
- 3. Load the generated `extension/` directory unpacked from `chrome://extensions`.
42
-
43
- If you would rather run the original upstream instead: add `opencode-chrome-annotation@latest` to your OpenCode config and install the extension from the Chrome Web Store:
23
+ Restart OpenCode. It runs a local server on `127.0.0.1` (ports `39240-39260`) that the Chrome extension discovers.
44
24
 
45
- https://chromewebstore.google.com/detail/abeihanpaeioklkhioiigklonbomhjfd
25
+ Then install the Chrome extension from [eagleeyejack/opencode-chrome-annotation-extension](https://github.com/eagleeyejack/opencode-chrome-annotation-extension) (load unpacked; a Chrome Web Store listing is in review).
46
26
 
47
27
  ## How It Works
48
28
 
49
29
  1. Start OpenCode in your project.
50
- 2. Click the extension button in Chrome.
51
- 3. Connect the current tab to a specific OpenCode chat from the in-page picker (grouped by project, with the linked chat badged).
52
- 4. Click **Annotate** in the in-page pill.
53
- 5. Select an element, write your instruction, then **Add to queue** (keep going) or **Add & finish**.
54
- 6. Open the queue from the bar and hit **Send all to OpenCode** when you are done.
30
+ 2. Click the extension icon: the side panel opens and lists your OpenCode sessions, grouped by project.
31
+ 3. Pick a session to link the current tab.
32
+ 4. Click **Select element**, click anything on the page, write your instruction, and add it to the queue.
33
+ 5. Queue as many annotations as you need, then hit **Send all to OpenCode**.
34
+ 6. Your agent receives each annotation's cropped screenshot, exact selector, tag/role/ARIA metadata, and your instruction.
55
35
 
36
+ Sessions can be closed (deleted) straight from the panel, with a two-click confirm.
56
37
 
57
38
  ### What Gets Sent
58
39
 
59
40
  - Your written instruction.
60
41
  - The current page URL and title.
61
- - Selected element metadata such as selector, tag, text, role, aria label, and bounds.
62
- - A screenshot saved locally by the plugin and referenced in the OpenCode prompt.
63
-
42
+ - The selected element's metadata: selector, tag, role, ARIA label, visible text, bounds.
43
+ - A cropped screenshot of the selected element.
64
44
 
65
- ### Troubleshooting
66
- The plugin runs a local HTTP server bound to `127.0.0.1` on ports `39240-39260`. The extension discovers the active OpenCode plugin instance over localhost.
45
+ Everything travels over `127.0.0.1` (ports `39240-39260`) to your own OpenCode instance. Nothing leaves your machine. OpenCode and your browser must be on the same localhost (not in separate containers).
67
46
 
68
- - The extension can't start a new session, you need to be in an active OpenCode session to connect.
69
- - If the extension can't find any session, ask your agent to run `chrome_status` that should give a detailed report.
70
- - Make sure OpenCode and your Chromium browser exist in the same localhost network (not in seperate containers).
47
+ ## What's different from upstream
71
48
 
49
+ - **Side panel UI.** Session picker, annotate form, and queue moved out of the page into Chrome's side panel, so nothing overlays the page being annotated. Browsers without the Side Panel API fall back to the original in-page picker.
50
+ - **Session cleanup.** Close stale OpenCode sessions from the panel (`POST /session/close` via the OpenCode SDK).
51
+ - **Session dates.** `/sessions` includes `updatedAt` so the panel shows relative last-activity time per session.
52
+ - **Annotation queue.** Batch feedback across a page, then send everything in one click. Survives service worker restarts via `chrome.storage.session`.
53
+ - **Element screenshots.** Each annotation crops the captured viewport to the selected element.
54
+ - **Chat locking.** Annotations always go to the chat you picked; sub-agent sessions cannot hijack routing and placeholder sessions are rejected clearly.
55
+ - **All chats, grouped.** The picker lists every open chat, grouped by project, with a Linked badge.
56
+ - **Security.** The local server no longer reflects arbitrary web origins into `Access-Control-Allow-Origin`.
72
57
 
73
- ## Development
74
-
75
- ### Plugin
76
-
77
- The OpenCode plugin source lives in `src/plugin.ts`. The published package entrypoint is generated at `dist/plugin.js`.
78
-
79
- Install dependencies:
80
-
81
- ```bash
82
- bun install
83
- ```
58
+ ## License
84
59
 
85
- Build the plugin:
86
-
87
- ```bash
88
- bun run build
89
- ```
90
-
91
- ### Extension
92
-
93
- The Chrome extension source lives in `extension-src/`. The loadable extension output is generated into `extension/` and is not tracked by git.
94
-
95
- ```bash
96
- bun run build:extension
97
- ```
98
-
99
- Then load the generated `extension/` directory from `chrome://extensions`.
100
-
101
- To create the Chrome Web Store upload zip:
102
-
103
- ```bash
104
- bun run build:zip
105
- ```
60
+ GPL-3.0 - inherited from upstream, with credit to [JodusNodus](https://github.com/JodusNodus/opencode-chrome-annotation) for the original.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opencode-annotate",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "Annotate webpages in Chrome and send screenshots + element context to your OpenCode session. Fork of JodusNodus/opencode-chrome-annotation.",
5
5
  "type": "module",
6
6
  "main": "./dist/plugin.js",