Annotator (#1861)

<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Adds an in-app screenshot annotator to the Preview panel for Pro users
so you can capture the current app view, draw or add text, and submit an
annotated image to chat.

- **New Features**
- Pen button in PreviewIframe to toggle annotator; captures a screenshot
via worker messaging and displays it in a Konva canvas.
- Tools: select, freehand draw, and draggable text; supports undo/redo,
delete, and resizing with Transformer. Canvas scales to the container.
Includes a color picker.
- Submit exports a PNG and attaches it to the chat via useAttachments;
prefills the chat input; annotator auto-closes after submit.
  - Pro-only: non-Pro users see an upsell screen.
- State atoms added: annotatorModeAtom, screenshotDataUrlAtom,
attachmentsAtom; PreviewIframe now handles dyad-screenshot-response
messages.

- **Dependencies**
  - Added konva, react-konva, perfect-freehand, and html-to-image.
- Proxy now injects html-to-image and the new dyad-screenshot-client.js
for screenshot capture.

<sup>Written for commit 580aca271c5993a0dc7426e36e34393e073bd67b.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

worker/proxy_server.js

@@ -38,7 +38,29 @@ let rememberedOrigin = null; // e.g. "http://localhost:5173"
 let stacktraceJsContent = null;
 let dyadShimContent = null;
 let dyadComponentSelectorClientContent = null;
+let dyadScreenshotClientContent = null;
+let htmlToImageContent = null;
 let dyadVisualEditorClientContent = null;
+
+try {
+  const htmlToImagePath = path.join(
+    __dirname,
+    "..",
+    "node_modules",
+    "html-to-image",
+    "dist",
+    "html-to-image.js",
+  );
+  htmlToImageContent = fs.readFileSync(htmlToImagePath, "utf-8");
+  parentPort?.postMessage(
+    `[proxy-worker] html-to-image.js loaded from: ${htmlToImagePath}`,
+  );
+} catch (error) {
+  parentPort?.postMessage(
+    `[proxy-worker] Failed to read html-to-image.js: ${error.message}`,
+  );
+}
+
 try {
   const stackTraceLibPath = path.join(
     __dirname,
@@ -84,6 +106,22 @@ try {
   );
 }
 
+try {
+  const dyadScreenshotClientPath = path.join(
+    __dirname,
+    "dyad-screenshot-client.js",
+  );
+  dyadScreenshotClientContent = fs.readFileSync(
+    dyadScreenshotClientPath,
+    "utf-8",
+  );
+  parentPort?.postMessage("[proxy-worker] dyad-screenshot-client.js loaded.");
+} catch (error) {
+  parentPort?.postMessage(
+    `[proxy-worker] Failed to read dyad-screenshot-client.js: ${error.message}`,
+  );
+}
+
 try {
   const dyadVisualEditorClientPath = path.join(
     __dirname,
@@ -143,6 +181,26 @@ function injectHTML(buf) {
       '<script>console.warn("[proxy-worker] dyad component selector client was not injected.");</script>',
     );
   }
+  if (htmlToImageContent) {
+    scripts.push(`<script>${htmlToImageContent}</script>`);
+    parentPort?.postMessage(
+      "[proxy-worker] html-to-image script injected into HTML.",
+    );
+  } else {
+    scripts.push(
+      '<script>console.error("[proxy-worker] html-to-image was not injected - library not loaded.");</script>',
+    );
+    parentPort?.postMessage(
+      "[proxy-worker] WARNING: html-to-image not injected!",
+    );
+  }
+  if (dyadScreenshotClientContent) {
+    scripts.push(`<script>${dyadScreenshotClientContent}</script>`);
+  } else {
+    scripts.push(
+      '<script>console.warn("[proxy-worker] dyad screenshot client was not injected.");</script>',
+    );
+  }
   if (dyadVisualEditorClientContent) {
     scripts.push(`<script>${dyadVisualEditorClientContent}</script>`);
   } else {