feat(vscode): marketplace publish + marketing VS Code tab (#463)

* feat(vscode): prepare VS Code extension for marketplace publish

- Remove `private: true` to enable publishing
- Add homepage, galleryBanner, update category to AI, bump version
- Fix .vscodeignore monorepo leak (was packaging 548 files from parent workspace)
- Upgrade @vscode/vsce to ^3.7.1 (fixes .cjs entry point validation)
- Rewrite README for marketplace with CloudFront-hosted screenshots and GIF
- Replace 128x128 placeholder icon with proper 256x256 icon
- Add VS Code tab to marketing site hero section with marketplace link
- Add VS Code SVG icon to marketing assets

For provenance purposes, this commit was AI assisted.

* fix: clean up HeroSection linkEl reference and unused variable

For provenance purposes, this commit was AI assisted.

Author: backnotprop

apps/marketing/public/assets/icon-vscode.svg

@@ -80,6 +80,15 @@ import AnnoReplace from './AnnoReplace.astro';
           <img src="/assets/icon-pi.svg" alt="" class="w-4 h-4 icon-pi" />
           <span>Pi</span>
         </button>
+        <button
+          class="agent-btn"
+          data-agent="vscode"
+          data-command="curl -fsSL https://plannotator.ai/install.sh | bash"
+          data-video=""
+        >
+          <img src="/assets/icon-vscode.svg" alt="" class="w-4 h-4" />
+          <span>VS Code</span>
+        </button>
       </div>
 
       <!-- Install command block (desktop only) -->
@@ -207,18 +216,42 @@ import AnnoReplace from './AnnoReplace.astro';
       },
       pi: {
         detail: 'Or try without installing: pi -e npm:@plannotator/pi-extension'
+      },
+      vscode: {
+        detail: 'Then install the VS Code extension for an integrated experience:',
+        steps: [
+          '/plugin marketplace add backnotprop/plannotator',
+          'Restart Claude Code to activate hooks'
+        ],
+        link: {
+          text: 'Install VS Code Extension from Marketplace',
+          url: 'https://marketplace.visualstudio.com/items?itemName=backnotprop.plannotator-webview'
+        }
       }
     };
 
+    var installBlock = document.getElementById('install-block');
+    var linkEl = document.getElementById('install-link');
+
     function setAgent(btn) {
       buttons.forEach(function(b) { b.classList.remove('active'); });
       btn.classList.add('active');
       commandEl.textContent = btn.dataset.command;
-      if (videoLink) videoLink.href = btn.dataset.video;
+      if (videoLink) {
+        if (btn.dataset.video) {
+          videoLink.href = btn.dataset.video;
+          videoLink.style.display = '';
+        } else {
+          videoLink.style.display = 'none';
+        }
+      }
 
       var config = agents[btn.dataset.agent] || {};
       detailEl.textContent = config.detail || '';
 
+      // Show install command block
+      installBlock.style.display = '';
+
       // Clear all steps completely, then rebuild
       var allSteps = [step1El, step2El, step3El];
       allSteps.forEach(function(el) { el.innerHTML = ''; el.style.display = 'none'; });
@@ -232,6 +265,20 @@ import AnnoReplace from './AnnoReplace.astro';
       } else {
         stepsEl.classList.add('hidden');
       }
+
+      // Handle marketplace link
+      if (linkEl) { linkEl.remove(); linkEl = null; }
+      if (config.link) {
+        var a = document.createElement('a');
+        a.id = 'install-link';
+        a.href = config.link.url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.className = 'mt-3 text-sm hidden sm:inline-flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors';
+        a.innerHTML = config.link.text + ' <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>';
+        installBlock.parentNode.insertBefore(a, installBlock.nextSibling);
+        linkEl = a;
+      }
     }
 
     buttons.forEach(function(btn) {

apps/marketing/src/components/landing/HeroSection.astro

@@ -1,10 +1,13 @@
-*
-*/**
-
-!bin/*
-!dist/*
-!images/*
-!LICENSE
-!README.md
-!CHANGELOG.md
-!package.json
+.vscode/**
+mocks/**
+scripts/**
+src/**
+tests/**
+node_modules/**
+*.ts
+!*.d.ts
+.gitignore
+tsconfig.json
+bun.lock
+../../**
+../**

apps/vscode-extension/.vscodeignore

@@ -2,45 +2,75 @@
   <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)
+<h1 align="center">Plannotator</h1>
 
-Opens [Plannotator](https://github.com/backnotprop/plannotator) plan reviews inside VS Code tabs instead of an external browser.
+<p align="center">
+  Interactive plan review and code review for AI coding agents — inside VS Code.
+</p>
+
+<p align="center">
+  <a href="https://marketplace.visualstudio.com/items?itemName=backnotprop.plannotator-webview"><img src="https://img.shields.io/visual-studio-marketplace/v/backnotprop.plannotator-webview?label=Marketplace&logo=visualstudiocode" alt="VS Code Marketplace" /></a>
+  <a href="https://code.visualstudio.com/"><img src="https://img.shields.io/badge/VS%20Code-^1.85.0-blue?logo=visualstudiocode" alt="VS Code" /></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT" /></a>
+</p>
+
+Opens [Plannotator](https://plannotator.ai) plan reviews and code reviews inside VS Code tabs instead of an external browser. Works with Claude Code, OpenCode, and other AI agents running in the integrated terminal.
+
+![Plannotator in VS Code](https://d17ygohy796f9l.cloudfront.net/vscode/plannotator-vscode.gif)
+
+## Plan Review
+
+Review, annotate, and approve AI-generated plans without leaving your editor. Add comments, mark deletions, compare versions with plan diffs, and send structured feedback back to the agent.
+
+![Plan Review](https://d17ygohy796f9l.cloudfront.net/vscode/plan-review.jpeg)
+
+![Plan Diffs](https://d17ygohy796f9l.cloudfront.net/vscode/plan-diffs.jpeg)
+
+## Code Review
+
+Review code changes with a full diff viewer, file tree, inline annotations, and AI-assisted review — all in a VS Code tab.
+
+![Code Review](https://d17ygohy796f9l.cloudfront.net/vscode/code-review.jpeg)
 
 ## 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
+- **In-editor plan review** — approve or deny plans with annotated feedback, directly in a VS Code tab
+- **In-editor code review** — review git diffs and PR changes with inline comments and suggestions
+- **Editor annotations** — select code directly in your editor and annotate it with `Cmd+Shift+.` — annotations appear in the Plannotator review UI alongside inline comments
+- **Theme sync** — Plannotator adapts to your VS Code color theme automatically
+- **Cookie persistence** — your identity, settings, and preferences persist across sessions
+- **Auto-close** — panels close automatically when you approve or send feedback
 
 ## 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` env var into integrated terminals
+2. When Plannotator opens a URL, a bundled router script sends it to the extension via a local IPC server
+3. The extension opens the URL in a WebviewPanel with an embedded iframe
+4. A reverse proxy handles cookie persistence transparently (VS Code webview iframes don't support cookies natively)
 
-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
+## Getting Started
 
-## Requirements
+1. Install this extension from the VS Code Marketplace
+2. Install the [Plannotator Claude Code plugin](https://github.com/backnotprop/plannotator):
+   ```
+   /install-plugin backnotprop/plannotator
+   ```
+3. **Launch Claude Code from VS Code's integrated terminal** — this is required so the extension can intercept browser opens. Plan reviews, code reviews, and annotations will automatically open in VS Code tabs instead of an external browser.
 
-- [Plannotator](https://github.com/backnotprop/plannotator) installed
-- VS Code 1.85.0+
+> **Note:** Terminals opened before the extension activates won't have the required environment variables. If plans open in an external browser, open a new integrated terminal and try again.
 
 ## Configuration
 
 | Setting | Default | Description |
 |---------|---------|-------------|
-| `plannotatorWebview.injectBrowser` | `true` | Inject PLANNOTATOR_BROWSER env var into integrated terminals |
+| `plannotatorWebview.injectBrowser` | `true` | Redirect Plannotator to open in VS Code instead of an external browser |
 
 ## Commands
 
-- **Plannotator: Open URL** — Manually open a Plannotator URL in a panel
+| Command | Keybinding | Description |
+|---------|------------|-------------|
+| **Plannotator: Open URL** | — | Manually open a Plannotator URL in a panel |
+| **Plannotator: Add Annotation** | `Cmd+Shift+.` | Annotate selected code in the editor |
 
 ## Troubleshooting
 
@@ -52,6 +82,11 @@ When Plannotator opens a browser to show a plan review, this extension intercept
 - Check if Plannotator's server is still running
 - Some network configurations may block localhost access from the webview
 
+## Requirements
+
+- [Plannotator](https://github.com/backnotprop/plannotator) Claude Code plugin installed
+- VS Code 1.85.0+
+
 ## License
 
 MIT

apps/vscode-extension/README.md

@@ -2,10 +2,10 @@
   "name": "plannotator-webview",
   "displayName": "Plannotator",
   "description": "Opens Plannotator plan reviews inside VS Code tabs instead of an external browser",
-  "version": "0.5.2",
-  "private": true,
+  "version": "0.16.5",
   "publisher": "backnotprop",
   "license": "MIT",
+  "homepage": "https://plannotator.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/backnotprop/plannotator.git",
@@ -15,14 +15,17 @@
     "url": "https://github.com/backnotprop/plannotator/issues"
   },
   "icon": "images/icon.png",
-  "categories": ["Other"],
+  "galleryBanner": {
+    "color": "#1e1e2e",
+    "theme": "dark"
+  },
+  "categories": ["AI"],
   "keywords": ["plannotator", "plan review", "claude", "ai", "webview"],
   "engines": {
     "vscode": "^1.85.0"
   },
   "extensionKind": ["workspace", "ui"],
   "main": "./dist/extension.cjs",
-  "type": "module",
   "activationEvents": [
     "onStartupFinished"
   ],
@@ -101,7 +104,7 @@
   "devDependencies": {
     "@types/bun": "latest",
     "@types/vscode": "^1.85.0",
-    "@vscode/vsce": "^3.0.0",
+    "@vscode/vsce": "^3.7.1",
     "esbuild": "^0.24.0",
     "typescript": "^5.0.0"
   }