@claude-canvas/vite-plugin 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+import { ClaudeCanvasOptions } from '@claude-canvas/bridge';
+export { ClaudeCanvasOptions } from '@claude-canvas/bridge';
+
+declare function claudeCanvas(options?: ClaudeCanvasOptions): Plugin;
+
+export { claudeCanvas, claudeCanvas as default };

package/dist/index.js

@@ -0,0 +1,191 @@
+// src/server-hook.ts
+import { WSProtocol } from "@claude-canvas/bridge";
+import { ClaudeBridge } from "@claude-canvas/bridge";
+import { GitManager } from "@claude-canvas/bridge";
+import { QARunner } from "@claude-canvas/bridge";
+import { PromptBuilder } from "@claude-canvas/bridge";
+function createServerHook(options) {
+  return (server) => {
+    const bridge = new ClaudeBridge(options);
+    const gitManager = new GitManager();
+    const qaRunner = new QARunner(options.qa);
+    server.ws.on("canvas:message", (rawData) => {
+      try {
+        const msg = WSProtocol.parseClientMessage(rawData);
+        switch (msg.type) {
+          case "canvas:session-start":
+            handleSessionStart(server, gitManager, options);
+            break;
+          case "canvas:session-end":
+            handleSessionEnd(server, gitManager, qaRunner, msg.payload.action);
+            break;
+          case "canvas:annotate":
+            handleAnnotate(server, bridge, msg.payload);
+            break;
+          case "canvas:chat":
+            handleChat(server, bridge, msg.payload.message);
+            break;
+          case "canvas:qa-retry":
+            handleQARetry(server, qaRunner);
+            break;
+        }
+      } catch (err) {
+        const errMsg = WSProtocol.createErrorMessage(
+          err instanceof Error ? err.message : "Unknown error",
+          true
+        );
+        server.ws.send("canvas:message", WSProtocol.serializeServerMessage(errMsg));
+      }
+    });
+    server.httpServer?.on("close", async () => {
+      await bridge.shutdown();
+    });
+  };
+}
+async function handleSessionStart(server, git, options) {
+  const session = await git.startSession({ branchPrefix: options.git?.branchPrefix });
+  server.ws.send("canvas:message", JSON.stringify({
+    type: "canvas:session-status",
+    payload: session
+  }));
+}
+async function handleSessionEnd(server, git, qa, action) {
+  if (action === "merge") {
+    const steps = [];
+    for await (const step of qa.run()) {
+      steps.push(step);
+      server.ws.send("canvas:message", JSON.stringify({
+        type: "canvas:qa-progress",
+        payload: { step: step.name, status: step.pass ? "pass" : "fail" }
+      }));
+    }
+    const result = qa.getResult(steps);
+    server.ws.send("canvas:message", JSON.stringify({
+      type: "canvas:qa-result",
+      payload: result
+    }));
+    if (result.overallPass) {
+      const mergeResult = await git.endSession("merge");
+      server.ws.send("canvas:message", JSON.stringify({
+        type: "canvas:merge-result",
+        payload: mergeResult
+      }));
+    }
+  } else {
+    const mergeResult = await git.endSession("discard");
+    server.ws.send("canvas:message", JSON.stringify({
+      type: "canvas:merge-result",
+      payload: mergeResult
+    }));
+  }
+}
+async function handleAnnotate(server, bridge, payload) {
+  const prompt = PromptBuilder.buildPrompt(payload.annotations, payload.memo);
+  for await (const delta of bridge.sendPrompt(prompt)) {
+    server.ws.send("canvas:message", JSON.stringify({
+      type: "canvas:stream",
+      payload: { delta, done: false }
+    }));
+  }
+  server.ws.send("canvas:message", JSON.stringify({
+    type: "canvas:stream",
+    payload: { delta: "", done: true }
+  }));
+}
+async function handleChat(server, bridge, message) {
+  for await (const delta of bridge.sendPrompt(message)) {
+    server.ws.send("canvas:message", JSON.stringify({
+      type: "canvas:stream",
+      payload: { delta, done: false }
+    }));
+  }
+  server.ws.send("canvas:message", JSON.stringify({
+    type: "canvas:stream",
+    payload: { delta: "", done: true }
+  }));
+}
+async function handleQARetry(server, qa) {
+  const steps = [];
+  for await (const step of qa.run()) {
+    steps.push(step);
+    server.ws.send("canvas:message", JSON.stringify({
+      type: "canvas:qa-progress",
+      payload: { step: step.name, status: step.pass ? "pass" : "fail" }
+    }));
+  }
+  const result = qa.getResult(steps);
+  server.ws.send("canvas:message", JSON.stringify({
+    type: "canvas:qa-result",
+    payload: result
+  }));
+}
+
+// src/html-inject.ts
+function createHtmlInject(options) {
+  return () => {
+    return {
+      html: "",
+      tags: [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children: generateClientScript(options),
+          injectTo: "body"
+        }
+      ]
+    };
+  };
+}
+function generateClientScript(options) {
+  const shortcut = options.shortcut || "ctrl+shift+a";
+  return `
+    import { ShadowContainer, CanvasOverlayPanel, ToolbarPanel, InspectorPopupPanel, ChatPanel, SessionBarPanel, QAResultPanel, FabButtonPanel, KeyboardHandler } from '@claude-canvas/core';
+
+    const container = new ShadowContainer();
+    container.mount();
+    const shadow = container.getShadowRoot();
+
+    const overlay = new CanvasOverlayPanel();
+    overlay.mount();
+
+    const toolbar = new ToolbarPanel(shadow);
+    const inspector = new InspectorPopupPanel(shadow);
+    const chat = new ChatPanel(shadow);
+    const sessionBar = new SessionBarPanel(shadow);
+    const qaResult = new QAResultPanel(shadow);
+    const fab = new FabButtonPanel(shadow);
+
+    // Wire up WebSocket via Vite HMR
+    if (import.meta.hot) {
+      import.meta.hot.on('canvas:message', (data) => {
+        const msg = JSON.parse(data);
+        // Route messages to appropriate panels
+      });
+    }
+
+    // Keyboard handler (shortcut: ${shortcut})
+    const keyboard = new KeyboardHandler({
+      onToggleMode: () => { /* toggle annotation mode */ },
+      onEscape: () => { overlay.setMode('off'); },
+      onToolSwitch: (mode) => { overlay.setMode(mode); toolbar.setActiveTool(mode); },
+      onSend: () => { /* send via chat */ },
+    });
+    keyboard.mount();
+  `;
+}
+
+// src/index.ts
+function claudeCanvas(options = {}) {
+  return {
+    name: "vite-plugin-claude-canvas",
+    apply: "serve",
+    configureServer: createServerHook(options),
+    transformIndexHtml: createHtmlInject(options)
+  };
+}
+var index_default = claudeCanvas;
+export {
+  claudeCanvas,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server-hook.ts","../src/html-inject.ts","../src/index.ts"],"sourcesContent":["import type { ViteDevServer } from 'vite'\nimport type { AnnotationSet } from '@claude-canvas/core'\nimport type { ClaudeCanvasOptions } from './types.js'\nimport { WSProtocol } from '@claude-canvas/bridge'\nimport { ClaudeBridge } from '@claude-canvas/bridge'\nimport { GitManager } from '@claude-canvas/bridge'\nimport { QARunner } from '@claude-canvas/bridge'\nimport { PromptBuilder } from '@claude-canvas/bridge'\n\nexport function createServerHook(options: ClaudeCanvasOptions) {\n  return (server: ViteDevServer) => {\n    const bridge = new ClaudeBridge(options)\n    const gitManager = new GitManager()\n    const qaRunner = new QARunner(options.qa)\n\n    server.ws.on('canvas:message', (rawData: string) => {\n      try {\n        const msg = WSProtocol.parseClientMessage(rawData)\n\n        switch (msg.type) {\n          case 'canvas:session-start':\n            handleSessionStart(server, gitManager, options)\n            break\n          case 'canvas:session-end':\n            handleSessionEnd(server, gitManager, qaRunner, msg.payload.action)\n            break\n          case 'canvas:annotate':\n            handleAnnotate(server, bridge, msg.payload)\n            break\n          case 'canvas:chat':\n            handleChat(server, bridge, msg.payload.message)\n            break\n          case 'canvas:qa-retry':\n            handleQARetry(server, qaRunner)\n            break\n        }\n      } catch (err) {\n        const errMsg = WSProtocol.createErrorMessage(\n          err instanceof Error ? err.message : 'Unknown error',\n          true\n        )\n        server.ws.send('canvas:message', WSProtocol.serializeServerMessage(errMsg))\n      }\n    })\n\n    // Cleanup on server close\n    server.httpServer?.on('close', async () => {\n      await bridge.shutdown()\n    })\n  }\n}\n\nasync function handleSessionStart(\n  server: ViteDevServer,\n  git: GitManager,\n  options: ClaudeCanvasOptions\n) {\n  const session = await git.startSession({ branchPrefix: options.git?.branchPrefix })\n  server.ws.send('canvas:message', JSON.stringify({\n    type: 'canvas:session-status',\n    payload: session,\n  }))\n}\n\nasync function handleSessionEnd(\n  server: ViteDevServer,\n  git: GitManager,\n  qa: QARunner,\n  action: 'merge' | 'discard'\n) {\n  if (action === 'merge') {\n    const steps = []\n    for await (const step of qa.run()) {\n      steps.push(step)\n      server.ws.send('canvas:message', JSON.stringify({\n        type: 'canvas:qa-progress',\n        payload: { step: step.name, status: step.pass ? 'pass' : 'fail' },\n      }))\n    }\n    const result = qa.getResult(steps)\n    server.ws.send('canvas:message', JSON.stringify({\n      type: 'canvas:qa-result',\n      payload: result,\n    }))\n\n    if (result.overallPass) {\n      const mergeResult = await git.endSession('merge')\n      server.ws.send('canvas:message', JSON.stringify({\n        type: 'canvas:merge-result',\n        payload: mergeResult,\n      }))\n    }\n  } else {\n    const mergeResult = await git.endSession('discard')\n    server.ws.send('canvas:message', JSON.stringify({\n      type: 'canvas:merge-result',\n      payload: mergeResult,\n    }))\n  }\n}\n\nasync function handleAnnotate(\n  server: ViteDevServer,\n  bridge: ClaudeBridge,\n  payload: { annotations: AnnotationSet; memo: string }\n) {\n  const prompt = PromptBuilder.buildPrompt(payload.annotations, payload.memo)\n  for await (const delta of bridge.sendPrompt(prompt)) {\n    server.ws.send('canvas:message', JSON.stringify({\n      type: 'canvas:stream',\n      payload: { delta, done: false },\n    }))\n  }\n  server.ws.send('canvas:message', JSON.stringify({\n    type: 'canvas:stream',\n    payload: { delta: '', done: true },\n  }))\n}\n\nasync function handleChat(\n  server: ViteDevServer,\n  bridge: ClaudeBridge,\n  message: string\n) {\n  for await (const delta of bridge.sendPrompt(message)) {\n    server.ws.send('canvas:message', JSON.stringify({\n      type: 'canvas:stream',\n      payload: { delta, done: false },\n    }))\n  }\n  server.ws.send('canvas:message', JSON.stringify({\n    type: 'canvas:stream',\n    payload: { delta: '', done: true },\n  }))\n}\n\nasync function handleQARetry(server: ViteDevServer, qa: QARunner) {\n  const steps = []\n  for await (const step of qa.run()) {\n    steps.push(step)\n    server.ws.send('canvas:message', JSON.stringify({\n      type: 'canvas:qa-progress',\n      payload: { step: step.name, status: step.pass ? 'pass' : 'fail' },\n    }))\n  }\n  const result = qa.getResult(steps)\n  server.ws.send('canvas:message', JSON.stringify({\n    type: 'canvas:qa-result',\n    payload: result,\n  }))\n}\n","import type { IndexHtmlTransformResult } from 'vite'\nimport type { ClaudeCanvasOptions } from './types.js'\n\nexport function createHtmlInject(options: ClaudeCanvasOptions) {\n  return (): IndexHtmlTransformResult => {\n    return {\n      html: '',\n      tags: [\n        {\n          tag: 'script',\n          attrs: { type: 'module' },\n          children: generateClientScript(options),\n          injectTo: 'body',\n        },\n      ],\n    }\n  }\n}\n\nfunction generateClientScript(options: ClaudeCanvasOptions): string {\n  const shortcut = options.shortcut || 'ctrl+shift+a'\n  return `\n    import { ShadowContainer, CanvasOverlayPanel, ToolbarPanel, InspectorPopupPanel, ChatPanel, SessionBarPanel, QAResultPanel, FabButtonPanel, KeyboardHandler } from '@claude-canvas/core';\n\n    const container = new ShadowContainer();\n    container.mount();\n    const shadow = container.getShadowRoot();\n\n    const overlay = new CanvasOverlayPanel();\n    overlay.mount();\n\n    const toolbar = new ToolbarPanel(shadow);\n    const inspector = new InspectorPopupPanel(shadow);\n    const chat = new ChatPanel(shadow);\n    const sessionBar = new SessionBarPanel(shadow);\n    const qaResult = new QAResultPanel(shadow);\n    const fab = new FabButtonPanel(shadow);\n\n    // Wire up WebSocket via Vite HMR\n    if (import.meta.hot) {\n      import.meta.hot.on('canvas:message', (data) => {\n        const msg = JSON.parse(data);\n        // Route messages to appropriate panels\n      });\n    }\n\n    // Keyboard handler (shortcut: ${shortcut})\n    const keyboard = new KeyboardHandler({\n      onToggleMode: () => { /* toggle annotation mode */ },\n      onEscape: () => { overlay.setMode('off'); },\n      onToolSwitch: (mode) => { overlay.setMode(mode); toolbar.setActiveTool(mode); },\n      onSend: () => { /* send via chat */ },\n    });\n    keyboard.mount();\n  `\n}\n","import type { Plugin } from 'vite'\r\nimport type { ClaudeCanvasOptions } from './types.js'\r\nimport { createServerHook } from './server-hook.js'\r\nimport { createHtmlInject } from './html-inject.js'\r\n\r\nexport function claudeCanvas(options: ClaudeCanvasOptions = {}): Plugin {\r\n  return {\r\n    name: 'vite-plugin-claude-canvas',\r\n    apply: 'serve',\r\n    configureServer: createServerHook(options),\r\n    transformIndexHtml: createHtmlInject(options),\r\n  }\r\n}\r\n\r\nexport default claudeCanvas\r\n\r\nexport type { ClaudeCanvasOptions }\r\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@claude-canvas/vite-plugin",
+  "version": "0.2.0",
+  "description": "Vite plugin for visual annotation → Claude code modification → HMR verification",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/claude-canvas/claude-canvas.git",
+    "directory": "packages/vite-plugin"
+  },
+  "dependencies": {
+    "@claude-canvas/core": "0.2.0",
+    "@claude-canvas/bridge": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "vitest": "^3.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0",
+    "@types/node": "^22.0.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "claude",
+    "annotation",
+    "devtools"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}