glassbox 0.20.0-beta.4 → 1.0.0

package/README.md

@@ -87,7 +87,7 @@ Then you run `glassbox` again. Your previous annotations carry forward — match
 
 - **Split and unified diffs** with syntax-colored add/remove/context lines
 - **Line-level annotations** — click any line to add feedback with a category
-- **Image and SVG diffs** — binary images and SVGs render in a **side-by-side** layout (with a left/right or over/under toggle), a **difference overlay**, a **swipeable slice tool**, and pixel-precision synced zoom/pan. SVGs offer a *Code* / *Rendered* toggle so you can review either the source or the rasterized output.
+- **Image and SVG diffs** — binary images and SVGs render in a **side-by-side** layout (with a left/right or over/under toggle), a **difference overlay**, a **swipeable slice tool**, single-side **A / B focus** modes, and pixel-precision synced zoom/pan. SVGs offer a *Code* / *Rendered* toggle so you can review either the source or the live-rendered output.
 - **Comment on images** — leave a general comment on any image, or **draw a rectangle region** to anchor feedback to a specific spot (per A/B side), just like a line annotation.
 - **Ground-truth image comparison** — `glassbox --ground-truth <manifest>` compares an **actual** render against an **expected** one (a design spec, a reference, or a previous baseline — even outside the repo), scores the perceptual difference, sorts most-changed-first, and lets you **promote** a new actual to the baseline. Great for catching visual regressions.
 - **Attach files to any comment** — drag, paste, or browse to attach screenshots, logs, or any file to a line comment, image comment, or note reply. Image attachments show a thumbnail and open in a lightbox; the export lists each file's path so your AI tool can read it.
@@ -99,12 +99,13 @@ Then you run `glassbox` again. Your previous annotations carry forward — match
 - **Resizable sidebar** and word wrap toggle
 - **Keyboard navigation** — `j`/`k` to move between files, `Cmd+Enter` to save
 - **Go-to-definition and a nav stack** — click any symbol to jump to its definition, with back/forward through your trail
-- **Themes** — ten built-in themes (Dark, Light, High Contrast Dark/Light, Dracula, Tokyo Night, One Dark Pro, Solarized Dark/Light, Monokai), plus a custom theme editor with live preview
+- **Themes** — thirteen built-in themes (Dark, Light, High Contrast Dark/Light, Dracula, Tokyo Night, One Dark Pro, Solarized Dark/Light, Monokai, Nord, Gruvbox Dark/Light), plus a custom theme editor with live preview
 - **Session persistence** — reviews survive restarts, pick up where you left off
 - **Smart review reuse** — re-running `glassbox` on the same commit updates diffs in place and migrates annotations to their new line positions
 - **Stale annotation detection** — comments that can't be matched to the updated diff are flagged with a visual indicator
 - **Review history** — browse, reopen, or delete past reviews
 - **Structured export** — markdown output with file paths, line numbers, categories, and instructions for AI consumption
+- **Content plugins** — opt-in renderers turn diagram source (Graphviz, PlantUML, Mermaid) into pictures: diagram files diff like images, and diagram artifacts on AI review notes render inline
 - **Automatic .gitignore** — keeps `.glassbox/` out of version control for you at launch, while leaving the per-project `.glassbox/settings.json` tracked
 - **Auto port selection** — if the default port is busy, it finds an open one
 - **Fully local** — no network calls (unless you opt into AI features), no accounts, no telemetry. Your code stays on your machine.
@@ -123,6 +124,18 @@ And when "correct" means "matches the design," **ground-truth comparison** (`gla
 
 <img src="assets/demo-ground-truth.png" alt="Ground-truth comparison: expected vs actual with a perceptual difference score" width="720">
 
+### Diagrams too, via content plugins
+
+Reviewing a diagram's source text tells you what changed; seeing the diagram tells you what it _means_. **Content plugins** render specialized formats server-side — install one and a `.dot`, `.puml`, or `.mmd` file gets a **Code | Rendered** toggle: _Code_ is the ordinary text diff, _Rendered_ treats the diagram **like an image**, with the full image-review toolkit — side-by-side, difference overlay, slice, synced zoom.
+
+<img src="assets/demo-plugin-rendered.png" alt="A Graphviz .dot file diffed as an image: old and new pipeline diagrams side by side" width="720">
+
+The same plugins render diagram-source **proof artifacts** attached to [AI review notes](#ai-review-notes) — so an AI's sequence-diagram evidence shows up as an actual diagram, inline with the diff:
+
+<img src="assets/demo-plugin-mermaid-note.png" alt="A Mermaid sequence-diagram proof artifact rendered inline in an AI review note" width="720">
+
+Graphviz ships built-in (WASM, no dependencies). PlantUML and Mermaid are one click away in **Settings → Plugins** (they use a local Java / headless-Chromium render, so they're opt-in), alongside an image-codecs plugin that adds WebP/AVIF support to ground-truth scoring. Everything stays local, and everything fails soft — without a plugin you simply see the source text. Want to render your own format? See the [plugin development guide](docs/plugin-development-guide.md).
+
 ---
 
 ## AI-Powered Review Intelligence
@@ -192,7 +205,7 @@ When an AI writes or modifies code, it knows _why_ each non-obvious change is th
 **AI Review Notes** give the generating AI a structured, line-anchored channel to record that reasoning. The AI emits notes with the `glassbox note` command; they're stored as committed SARIF under `.pr-notes/` — tool-neutral and travelling with the repo — and Glassbox renders them review-comment-style at the exact line they apply to:
 
 - **Rationale** — why this change, and what alternatives were rejected
-- **Proof** — the test that passed, a measurement, or a before/after screenshot (notes can carry text and image artifacts)
+- **Proof** — the test that passed, a measurement, or a before/after screenshot (notes can carry text, image, and diagram-source artifacts — diagrams render inline via [content plugins](#diagrams-too-via-content-plugins))
 - **Risk / assumption** — what a reviewer should double-check
 
 <img src="assets/demo-review-notes.png" alt="AI-authored review notes rendered inline with the diff, with a threaded reply" width="720">
@@ -293,8 +306,10 @@ glassbox --resume
 | `--diff <a> <b>`       | Compare two arbitrary files or folders by path — no git repo required |
 | `--ground-truth <m>`   | Compare actual vs expected images from a manifest — no git repo required |
 | `--port <number>`      | Port to run on (default: 4183)                     |
+| `--data-dir <path>`    | Store review data somewhere other than `.glassbox/` |
 | `--resume`             | Resume the latest in-progress review for this mode |
-| `--browser`            | Open in browser instead of desktop window          |
+| `--no-open`            | Don't open the browser automatically               |
+| `--on-complete <cmd>`  | Run a local command when a review is completed     |
 | `--check-for-updates`  | Check for a newer version on npm                   |
 | `--debug`              | Show build timestamp and debug info                |
 | `--help`               | Show help                                          |

package/dist/channel.js

@@ -4,11 +4,62 @@ import { createRequire as __createRequire } from 'module';
 const require = __createRequire(import.meta.url);
 
 // src/channel.ts
+import { randomBytes } from "crypto";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { unlinkSync, writeFileSync } from "fs";
 import { createServer } from "http";
 import { join } from "path";
+
+// src/channel-server.ts
+import { timingSafeEqual } from "crypto";
+var MAX_BODY_BYTES = 1048576;
+function secretMatches(provided, secret2) {
+  if (typeof provided !== "string") return false;
+  const a = Buffer.from(provided);
+  const b = Buffer.from(secret2);
+  return a.length === b.length && timingSafeEqual(a, b);
+}
+function createChannelHandler(deps) {
+  return async (req, res) => {
+    if (req.method === "GET" && req.url === "/health") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true }));
+      return;
+    }
+    if (req.method === "POST" && req.url === "/trigger") {
+      if (!secretMatches(req.headers["x-glassbox-secret"], deps.secret)) {
+        res.writeHead(403, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Missing or invalid X-Glassbox-Secret" }));
+        return;
+      }
+      let body = "";
+      let bodySize = 0;
+      for await (const chunk of req) {
+        bodySize += chunk.length;
+        if (bodySize > MAX_BODY_BYTES) {
+          res.writeHead(413);
+          res.end("Payload too large");
+          return;
+        }
+        body += String(chunk);
+      }
+      try {
+        await deps.notify(body || "Read .glassbox/latest-review.md and apply the feedback.");
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ ok: true }));
+      } catch (err) {
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: String(err) }));
+      }
+      return;
+    }
+    res.writeHead(404);
+    res.end("not found");
+  };
+}
+
+// src/channel.ts
 var dataDir = ".glassbox";
 var args = process.argv.slice(2);
 for (let i = 0; i < args.length; i++) {
@@ -18,6 +69,8 @@ for (let i = 0; i < args.length; i++) {
   }
 }
 var portFile = join(dataDir, "channel-port");
+var secretFile = join(dataDir, "channel-secret");
+var secret = randomBytes(32).toString("hex");
 var mcp = new Server(
   { name: "glassbox-channel", version: "0.1.0" },
   {
@@ -35,69 +88,47 @@ var mcp = new Server(
     ].join(" ")
   }
 );
-await mcp.connect(new StdioServerTransport());
-var httpServer = createServer(async (req, res) => {
-  res.setHeader("Access-Control-Allow-Origin", "*");
-  res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
-  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
-  if (req.method === "OPTIONS") {
-    res.writeHead(200);
-    res.end();
-    return;
-  }
-  if (req.method === "GET" && req.url === "/health") {
-    res.writeHead(200, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ ok: true }));
-    return;
-  }
-  if (req.method === "POST" && req.url === "/trigger") {
-    let body = "";
-    let bodySize = 0;
-    for await (const chunk of req) {
-      bodySize += chunk.length;
-      if (bodySize > 1048576) {
-        res.writeHead(413);
-        res.end("Payload too large");
-        return;
-      }
-      body += String(chunk);
-    }
-    try {
-      await mcp.notification({
-        method: "notifications/claude/channel",
-        params: {
-          content: body || "Read .glassbox/latest-review.md and apply the feedback.",
-          meta: { type: "review-feedback" }
-        }
-      });
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ ok: true }));
-    } catch (err) {
-      res.writeHead(500, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ error: String(err) }));
-    }
-    return;
+try {
+  await mcp.connect(new StdioServerTransport());
+} catch (err) {
+  process.stderr.write(`glassbox-channel: failed to connect MCP stdio transport: ${String(err)}
+`);
+  process.exit(1);
+}
+var httpServer = createServer(createChannelHandler({
+  secret,
+  notify: async (content) => {
+    await mcp.notification({
+      method: "notifications/claude/channel",
+      params: { content, meta: { type: "review-feedback" } }
+    });
   }
-  res.writeHead(404);
-  res.end("not found");
-});
+}));
 httpServer.listen(0, "127.0.0.1", () => {
   const addr = httpServer.address();
   if (addr !== null && typeof addr !== "string") {
     const port = addr.port;
     try {
       writeFileSync(portFile, String(port), "utf-8");
+      writeFileSync(secretFile, secret, { encoding: "utf-8", mode: 384 });
     } catch {
     }
     process.stderr.write(`glassbox-channel listening on port ${port}
 `);
   }
 });
-function cleanup() {
+function removeStateFiles() {
   try {
     unlinkSync(portFile);
   } catch {
   }
+  try {
+    unlinkSync(secretFile);
+  } catch {
+  }
+}
+function cleanup() {
+  removeStateFiles();
   process.exit(0);
 }
 process.on("SIGTERM", () => {
@@ -107,9 +138,6 @@ process.on("SIGINT", () => {
   cleanup();
 });
 process.on("exit", () => {
-  try {
-    unlinkSync(portFile);
-  } catch {
-  }
+  removeStateFiles();
 });
 //# sourceMappingURL=channel.js.map