Michael Ramos d4ff4a8df7 feat(ai): OpenCode provider via HTTP + SSE (#379)
* feat(ai): add OpenCode provider via HTTP + SSE

Bundle @opencode-ai/sdk to spawn `opencode serve` and communicate via
HTTP REST + SSE. Richest provider: fork, resume, streaming, tools, and
runtime permission approvals all work natively.

- OpenCodeProvider: lazy server spawn, shared HTTP client, dynamic model
  discovery via GET /provider
- OpenCodeSession: SSE event drain loop, system prompt via API field,
  permission reply (once/reject), abort via HTTP
- mapOpenCodeEvent: SSE → AIMessage mapping (text deltas, tool lifecycle,
  permissions, session status, errors)
- 11 new event mapping tests (78 total, 157 expect calls)

For provenance purposes, this commit was AI assisted.

* docs(ai): add OpenCode to AI features guide and code review docs

For provenance purposes, this commit was AI assisted.

* fix(ai): prevent double server spawn in OpenCode ensureServer()

Use a promise-mutex pattern so concurrent callers (e.g. fetchModels +
createSession) share a single server spawn instead of racing to create two.
Also remove empty finally block from SSE drain loop.

For provenance purposes, this commit was AI assisted.

* fix(ai): await SSE subscribe in OpenCode provider

The SDK's event.subscribe() is async — must be awaited before
destructuring the stream.

For provenance purposes, this commit was AI assisted.

* fix(ui): scrollable model dropdown with search filter

Cap dropdown height at min(320px, 50vh) so it doesn't overflow the
viewport when providers expose many models (e.g. OpenCode with 20+).
Add a search/filter input when there are more than 8 models.

For provenance purposes, this commit was AI assisted.

* fix(ai): close SSE stream, rename to opencode-sdk, move dep to root

- Close SSE stream in finally block to prevent connection leak on
  abort/early return
- Rename provider from opencode to opencode-sdk for consistency with
  claude-agent-sdk, codex-sdk, pi-sdk
- Move @opencode-ai/sdk dependency to root package.json alongside the
  other SDK dependencies

For provenance purposes, this commit was AI assisted.

* feat(ui): add first-run AI setup dialog for provider selection

Show a one-time modal on first review when AI providers are available.
Users pick a default provider and model from a 2-column grid, with a
brief feature intro and auth disclaimer. Persists via cookie, can be
changed later in Settings.

For provenance purposes, this commit was AI assisted.

* fix(ai): clear startPromise on failure so OpenCode provider can retry

If doStart() fails (port conflict, timeout, binary crash), the cached
rejected promise prevented all future ensureServer() calls from
retrying. Now cleared on failure and on dispose().

Also updates stale "future" comment in types.ts.

For provenance purposes, this commit was AI assisted.
2026-03-23 17:37:56 -07:00
2026-03-23 11:31:38 -07:00
2026-03-23 11:31:38 -07:00
2026-03-23 11:31:38 -07:00

Plannotator

Plannotator

Interactive Plan & Code Review for AI Coding Agents. Mark up and refine your plans or code diffs using a visual UI, share for team collaboration, and seamlessly integrate with Claude Code, OpenCode, Pi, and Codex.

Plan Mode Demos:

Claude Code

Claude Code Demo

Watch Demo

OpenCode

OpenCode Demo

Watch Demo

New: Code Review

Features

Visual Plan ReviewBuilt-in hookApprove or deny agent plans with inline annotations
Plan DiffAutomaticSee what changed when the agent revises a plan
Code Review/plannotator-reviewView git diffs or remote PRs. Package annotations and ask AI about the code as you review.
Annotate Any File/plannotator-annotateAnnotate any markdown file and send feedback to your agent
Annotate Last Message/plannotator-lastAnnotate the agent's last response and send structured feedback

Sharing Plans

Plannotator lets you privately share plans, annotations, and feedback with colleagues. For example, a colleague can annotate a shared plan, and you can import their feedback to send directly back to the coding agent.

Small plans are encoded entirely in the URL hash. No server involved, nothing stored anywhere.

Large plans use a short link service with end-to-end encryption. Your plan is encrypted with AES-256-GCM in your browser before upload. The server stores only ciphertext it cannot read. The decryption key lives only in the URL you share. Pastes auto-delete after 7 days.

  • Zero-knowledge storage, similar to PrivateBin
  • Fully open source and self-hostable (see docs)

Install

Install for Claude Code

Install the plannotator command:

macOS / Linux / WSL:

curl -fsSL https://plannotator.ai/install.sh | bash

Windows PowerShell:

irm https://plannotator.ai/install.ps1 | iex

Then in Claude Code:

/plugin marketplace add backnotprop/plannotator
/plugin install plannotator@plannotator

# IMPORTANT: Restart Claude Code after plugin install

See apps/hook/README.md for detailed installation instructions including a manual hook approach.


Install for OpenCode

Add to your opencode.json:

{
  "plugin": ["@plannotator/opencode@latest"]
}

Run the install script to get /plannotator-review:

curl -fsSL https://plannotator.ai/install.sh | bash

Windows:

irm https://plannotator.ai/install.ps1 | iex

This also clears any cached plugin versions. Then restart OpenCode.


Install for Pi

pi install npm:@plannotator/pi-extension

Then start Pi with --plan to enter plan mode, or toggle it during a session with /plannotator.

See apps/pi-extension/README.md for full usage details, commands, and flags.


Install for Codex

Install the plannotator command:

macOS / Linux / WSL:

curl -fsSL https://plannotator.ai/install.sh | bash

Windows PowerShell:

irm https://plannotator.ai/install.ps1 | iex

Then in Codex — feedback flows back into the agent loop automatically:

!plannotator review           # Code review for current changes
!plannotator review <pr-url>  # Review a GitHub pull request
!plannotator annotate file.md # Annotate a markdown file
!plannotator last             # Annotate the last agent message

Plan mode is not yet supported.

See apps/codex/README.md for details.


How It Works

When your AI agent finishes planning, Plannotator:

  1. Opens the Plannotator UI in your browser
  2. Lets you annotate the plan visually (delete, insert, replace, comment)
  3. Approve → Agent proceeds with implementation
  4. Request changes → Your annotations are sent back as structured feedback

(Similar flow for code review, except you can also comment on specific lines of code diffs)


License

Copyright 2025-2026 backnotprop

This project is licensed under either of

at your option.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this project by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

S
Description
plannotator-visual-explainer: Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide…; plannotator-compound: Analyze a user's Plannotator plan archive to extract denial patterns, feedback taxonomy, evolution over time, and actionable prompt improvements — then produce…; plannotator-setup-goal: Turn an idea or objective into a goal package for /goal. Interviews the user, builds a reviewed fact s…
Readme 198 MiB
Languages
TypeScript 92.2%
CSS 1.9%
Shell 1.8%
Astro 1.4%
HTML 0.7%
Other 2%