feat: VS Code extension for inline annotations

.gitignore

@@ -16,6 +16,9 @@ dist-ssr
 # npm pack output
 *.tgz
 
+# VS Code extension package
+*.vsix
+
 # OpenCode plugin build artifacts (generated from hook/review dist)
 apps/opencode-plugin/plannotator.html
 apps/opencode-plugin/review-editor.html

apps/vscode-extension/.vscodeignore

@@ -0,0 +1,10 @@
+*
+*/**
+
+!bin/*
+!dist/*
+!images/*
+!LICENSE
+!README.md
+!CHANGELOG.md
+!package.json

apps/vscode-extension/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+## [0.4.0] - 2026-02-11
+
+### Added
+- Custom WebviewPanel with embedded iframe (replaces Simple Browser)
+- Cookie persistence across sessions via reverse proxy and virtual cookie jar
+- Auto-close panel when plan is approved or feedback is sent
+- VS Code notification when panel opens
+- Tab icon for Plannotator panel
+- Plannotator output channel for diagnostics
+
+### Changed
+- Renamed display name from "Plannotator WebView" to "Plannotator"
+
+## [0.1.0] - 2026-02-11
+
+### Added
+- Initial release
+- Intercept Plannotator browser opens in VS Code integrated terminal
+- URI handler for `vscode://plannotator-webview/open?url=...`
+- Router shell script for PLANNOTATOR_BROWSER env var
+- Configurable URL pattern matching
+- Manual URL opening command

apps/vscode-extension/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 7tg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/vscode-extension/README.md

@@ -0,0 +1,57 @@
+<p align="center">
+  <img src="images/icon.png" alt="Plannotator for VS Code" width="128" />
+</p>
+
+[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/7tg.plannotator-webview?label=Marketplace&logo=visualstudiocode)](https://marketplace.visualstudio.com/items?itemName=7tg.plannotator-webview)
+[![CI](https://github.com/7tg/plannotator-vscode/actions/workflows/ci.yml/badge.svg)](https://github.com/7tg/plannotator-vscode/actions/workflows/ci.yml)
+[![VS Code](https://img.shields.io/badge/VS%20Code-^1.85.0-blue?logo=visualstudiocode)](https://code.visualstudio.com/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+Opens [Plannotator](https://github.com/backnotprop/plannotator) plan reviews inside VS Code tabs instead of an external browser.
+
+## Features
+
+- Automatically intercepts Plannotator browser opens and displays them in a VS Code panel
+- Persists your Plannotator settings (identity, permissions, editor preferences) across sessions
+- Auto-closes the panel when you approve or send feedback on a plan
+- Works with Claude Code running in VS Code's integrated terminal
+- Configurable via VS Code settings
+- Manual URL opening via command palette
+
+## How It Works
+
+When Plannotator opens a browser to show a plan review, this extension intercepts the request and opens it in a VS Code panel instead:
+
+1. The extension injects a `PLANNOTATOR_BROWSER` environment variable into integrated terminals
+2. When Plannotator opens a URL, the bundled router script sends it to the extension via a local HTTP server
+3. The extension opens the URL in a custom WebviewPanel with an embedded iframe
+4. A local reverse proxy handles cookie persistence (VS Code webview iframes don't support cookies natively) — settings are stored in VS Code's global state and restored transparently
+
+## Requirements
+
+- [Plannotator](https://github.com/backnotprop/plannotator) installed
+- VS Code 1.85.0+
+
+## Configuration
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| `plannotatorWebview.injectBrowser` | `true` | Inject PLANNOTATOR_BROWSER env var into integrated terminals |
+
+## Commands
+
+- **Plannotator: Open URL** — Manually open a Plannotator URL in a panel
+
+## Troubleshooting
+
+### URL opens in external browser instead of VS Code
+- Ensure `plannotatorWebview.injectBrowser` is enabled
+- Open a **new** terminal after installing the extension (existing terminals won't have the env var)
+
+### Panel shows a blank page
+- Check if Plannotator's server is still running
+- Some network configurations may block localhost access from the webview
+
+## License
+
+MIT

apps/vscode-extension/bin/open-in-vscode

@@ -0,0 +1,11 @@
+#!/bin/sh
+# Plannotator WebView Router
+# Invoked via PLANNOTATOR_BROWSER env var
+# Sends URL to the extension's local IPC server
+
+url="$1"
+[ -z "$url" ] && exit 0
+[ -z "$PLANNOTATOR_VSCODE_PORT" ] && exit 1
+
+curl -s -G "http://127.0.0.1:${PLANNOTATOR_VSCODE_PORT}/open" \
+  --data-urlencode "url=${url}" >/dev/null 2>&1

apps/vscode-extension/bin/xdg-open

@@ -0,0 +1,14 @@
+#!/bin/sh
+# xdg-open wrapper — routes localhost URLs to the Plannotator VS Code extension.
+# Non-URL or external-URL calls delegate to the real xdg-open.
+
+case "$1" in
+  http://localhost:*|http://localhost/*|http://127.0.0.1:*|http://127.0.0.1/*)
+    exec "$(dirname "$0")/open-in-vscode" "$1"
+    ;;
+  *)
+    SELF_DIR="$(cd "$(dirname "$0")" && pwd)"
+    PATH=$(printf '%s' "$PATH" | tr ':' '\n' | grep -v "^${SELF_DIR}$" | paste -sd:)
+    exec xdg-open "$@"
+    ;;
+esac

apps/vscode-extension/mocks/vscode.ts

@@ -0,0 +1,196 @@
+// Mock VS Code module for bun:test
+// Only implements the APIs that plannotator-webview actually uses.
+
+export interface UriHandler {
+  handleUri(uri: Uri): ProviderResult<void>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ProviderResult<T> = T | undefined | null | Thenable<T | undefined | null>;
+
+export interface ExtensionContext {
+  subscriptions: { dispose(): void }[];
+  extensionPath: string;
+  environmentVariableCollection: {
+    replace(variable: string, value: string): void;
+    append(variable: string, value: string): void;
+    prepend(variable: string, value: string): void;
+    delete(variable: string): void;
+  };
+  globalState: {
+    get<T>(key: string, defaultValue?: T): T | undefined;
+    update(key: string, value: unknown): Thenable<void>;
+  };
+}
+
+export class Uri {
+  scheme: string;
+  authority: string;
+  path: string;
+  query: string;
+  fragment: string;
+
+  constructor(
+    scheme: string,
+    authority: string,
+    path: string,
+    query: string,
+    fragment: string,
+  ) {
+    this.scheme = scheme;
+    this.authority = authority;
+    this.path = path;
+    this.query = query;
+    this.fragment = fragment;
+  }
+
+  static file(fsPath: string): Uri {
+    return new Uri("file", "", fsPath, "", "");
+  }
+
+  static parse(value: string): Uri {
+    const parsed = new globalThis.URL(value);
+    return new Uri(
+      parsed.protocol.replace(":", ""),
+      parsed.host,
+      parsed.pathname,
+      parsed.search.replace("?", ""),
+      parsed.hash.replace("#", ""),
+    );
+  }
+
+  toString(): string {
+    let result = `${this.scheme}://${this.authority}${this.path}`;
+    if (this.query) result += `?${this.query}`;
+    if (this.fragment) result += `#${this.fragment}`;
+    return result;
+  }
+}
+
+export const commands = {
+  registerCommand(_id: string, _handler: (...args: unknown[]) => unknown) {
+    return { dispose() {} };
+  },
+  async executeCommand(_command: string, ..._args: unknown[]) {},
+};
+
+export interface WebviewPanel {
+  webview: { html: string };
+  iconPath?: Uri;
+  reveal(viewColumn?: number): void;
+  dispose(): void;
+  onDidDispose(listener: () => void): { dispose(): void };
+}
+
+export const ViewColumn = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+};
+
+export const window = {
+  registerUriHandler(_handler: unknown) {
+    return { dispose() {} };
+  },
+  async showInformationMessage(_message: string) {
+    return undefined;
+  },
+  async showInputBox(_options?: unknown) {
+    return undefined;
+  },
+  createOutputChannel(_name: string, _options?: unknown) {
+    return { info() {}, warn() {}, error() {}, debug() {}, appendLine() {}, dispose() {} };
+  },
+  createWebviewPanel(
+    _viewType: string,
+    _title: string,
+    _showOptions: number,
+    _options?: { enableScripts?: boolean },
+  ): WebviewPanel {
+    let disposeListener: (() => void) | null = null;
+    return {
+      webview: { html: "" },
+      reveal() {},
+      dispose() {
+        disposeListener?.();
+      },
+      onDidDispose(listener: () => void) {
+        disposeListener = listener;
+        return { dispose() {} };
+      },
+    };
+  },
+};
+
+export const env = {
+  async asExternalUri(uri: Uri): Promise<Uri> {
+    return uri;
+  },
+};
+
+export const workspace = {
+  getConfiguration(_section?: string) {
+    return {
+      get(_key: string, defaultValue?: unknown) {
+        return defaultValue;
+      },
+    };
+  },
+};
+
+// Mock EnvironmentVariableCollection
+class MockEnvironmentVariableCollection {
+  private _vars = new Map<string, string>();
+
+  replace(variable: string, value: string) {
+    this._vars.set(variable, value);
+  }
+
+  append(variable: string, value: string) {
+    this._vars.set(variable, (this._vars.get(variable) || "") + value);
+  }
+
+  prepend(variable: string, value: string) {
+    this._vars.set(variable, value + (this._vars.get(variable) || ""));
+  }
+
+  delete(variable: string) {
+    this._vars.delete(variable);
+  }
+
+  get(variable: string) {
+    return this._vars.get(variable);
+  }
+
+  clear() {
+    this._vars.clear();
+  }
+
+  [Symbol.iterator]() {
+    return this._vars.entries();
+  }
+}
+
+// Factory to create a mock ExtensionContext
+export function createMockExtensionContext(
+  extensionPath = "/mock/extension/path",
+) {
+  return {
+    subscriptions: [] as { dispose: () => void }[],
+    extensionPath,
+    environmentVariableCollection: new MockEnvironmentVariableCollection(),
+    globalState: (() => {
+      const store = new Map<string, unknown>();
+      return {
+        get<T>(key: string, defaultValue?: T): T | undefined {
+          return (store.has(key) ? store.get(key) : defaultValue) as T | undefined;
+        },
+        update(key: string, value: unknown): Promise<void> {
+          store.set(key, value);
+          return Promise.resolve();
+        },
+      };
+    })(),
+    workspaceState: { get: () => undefined, update: async () => {} },
+  };
+}