feat(vscode-ext): add tests, enable comments, clean up extension (SD-2341) (#2558)

* feat(vscode-ext): enable comments bubble rendering

Show Word document comments in the editor by passing
comments: { visible: true } to the SuperDoc constructor.

* fix(vscode-ext): allow comment and tracked change balloons to render

Remove display:flex and justify-content:center from #superdoc container
so SuperDoc's internal layout can allocate space for the right margin
where comment bubbles and tracked change balloons appear.

* docs(vscode-ext): add demo GIF and rewrite README for Marketplace

Add animated demo showing AI-driven tracked changes via MCP.
Rewrite README with badges, feature list, install instructions,
and AI integration section.

* chore(vscode-ext): add icon, homepage, and Marketplace metadata

Add SuperDoc brand logo as extension icon, homepage link, bugs URL,
gallery banner color, and additional keywords for discoverability.

* chore(vscode-ext): remove demo GIF from git, host externally

Remove demo.gif from repo to avoid bloating git history with a 6.8MB
binary. Add to .gitignore and .vscodeignore. README will reference
a GitHub-hosted URL once uploaded.

Author: caio-pizzol

.gitignore

@@ -107,3 +107,4 @@ packages/sdk/tools/*.json
 # deploys directly from git with no pre-build hook support.
 
 .playwright-cli/
+apps/vscode-ext/demo.gif

apps/vscode-ext/.vscodeignore

@@ -11,3 +11,4 @@ node_modules/**
 out/**
 !dist/**
 !webview/**
+demo.gif

apps/vscode-ext/README.md

@@ -1,32 +1,39 @@
 # SuperDoc for VS Code
 
-Open and edit `.docx` files directly in VS Code.
+[![Visual Studio Marketplace](https://img.shields.io/visual-studio-marketplace/v/superdoc-dev.superdoc-vscode-ext)](https://marketplace.visualstudio.com/items?itemName=superdoc-dev.superdoc-vscode-ext)
+[![Installs](https://img.shields.io/visual-studio-marketplace/i/superdoc-dev.superdoc-vscode-ext)](https://marketplace.visualstudio.com/items?itemName=superdoc-dev.superdoc-vscode-ext)
 
-## Install
+Open, edit, and review Word documents directly in VS Code.
 
-Search for **SuperDoc** in the VS Code Extensions panel, or:
+![SuperDoc VS Code Extension Demo](https://github.com/user-attachments/assets/23dcf3b1-9b6e-4e77-a4f6-17dde9d25ebc)
 
-```bash
-code --install-extension superdoc-dev.superdoc-vscode-ext
-```
+## Features
 
-Once installed, `.docx` files open with SuperDoc by default.
+- **Full DOCX rendering** — pagination, headings, tables, lists, signature blocks
+- **Edit in place** — type, format, and save without leaving VS Code
+- **Tracked changes** — AI agents can suggest edits as Word tracked changes
+- **Comments** — view and add Word comments with margin bubbles
+- **Live reload** — when an external process modifies the file, the document refreshes automatically
+- **Auto-save** — changes are saved as you type
+- **Context menu** — right-click any `.docx` in the Explorer and choose "Open with SuperDoc"
 
-## Features
+## Install
+
+Search **"SuperDoc"** in the VS Code Extensions panel, or:
+
+```
+ext install superdoc-dev.superdoc-vscode-ext
+```
 
-- **Real DOCX editing** — Formatting, tables, lists, headers — all preserved. No conversion to HTML or any intermediate format.
-- **Pagination and rulers** — Documents render with page breaks and ruler guides, just like Word.
-- **Auto-save** — Changes save automatically as you type.
-- **Live reload** — When an AI agent or external process modifies your file, the document refreshes instantly.
-- **Context menu** — Right-click any `.docx` in the Explorer and choose "Open with SuperDoc."
+Once installed, click any `.docx` file to open it with SuperDoc.
 
-## How it works
+## AI Integration
 
-SuperDoc renders documents directly from OOXML — the native format of `.docx` files. The extension bundles the full SuperDoc rendering and editing engine in a VS Code webview. No server calls. Your documents never leave your machine.
+SuperDoc provides an [MCP server](https://github.com/superdoc-dev/superdoc/tree/main/apps/mcp) that lets AI agents read, edit, and comment on Word documents programmatically. Combined with this extension, you get a live preview of AI-suggested changes — tracked changes and comments appear in real time as the agent works.
 
 ## Part of SuperDoc
 
-This extension is part of [SuperDoc](https://github.com/superdoc-dev/superdoc) — open-source DOCX editing and tooling. Renders, edits, and automates .docx in the browser and on the server.
+This extension is powered by [SuperDoc](https://github.com/superdoc-dev/superdoc) — open-source DOCX editing for the browser and server. No server calls — your documents never leave your machine.
 
 ## License
 

apps/vscode-ext/logo.png

@@ -4,7 +4,20 @@
   "description": "Open and edit Word documents (.docx) directly in VS Code using SuperDoc",
   "version": "2.0.0",
   "publisher": "superdoc-dev",
-  "repository": "https://github.com/superdoc-dev/superdoc",
+  "icon": "logo.png",
+  "homepage": "https://superdoc.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/superdoc-dev/superdoc",
+    "directory": "apps/vscode-ext"
+  },
+  "bugs": {
+    "url": "https://github.com/superdoc-dev/superdoc/issues"
+  },
+  "galleryBanner": {
+    "color": "#0f172a",
+    "theme": "dark"
+  },
   "engines": {
     "vscode": "^1.107.0"
   },
@@ -17,6 +30,9 @@
     "word",
     "document",
     "editor",
+    "office",
+    "ooxml",
+    "tracked changes",
     "superdoc"
   ],
   "main": "./dist/extension.js",

apps/vscode-ext/package.json

@@ -98,6 +98,7 @@ function initializeEditor(fileArrayBuffer) {
         documentMode: 'editing',
         pagination: true,
         rulers: true,
+        comments: { visible: true },
         onReady: () => {
           debug('SuperDoc is ready');
           isInitialLoad = false;

apps/vscode-ext/webview/main.js

@@ -28,8 +28,6 @@ body {
   right: 0;
   bottom: 0;
   overflow: auto;
-  display: flex;
-  justify-content: center;
 }
 
 /* Override SuperDoc theme */