npm - claw-design - Versions diffs - 1.0.1 - Mend

claw-design 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/LICENSE +21 -0
package/README.md +72 -0
package/dist/cli/commands/start.d.ts +7 -0
package/dist/cli/commands/start.d.ts.map +1 -0
package/dist/cli/commands/start.js +176 -0
package/dist/cli/commands/start.js.map +1 -0
package/dist/cli/index.d.ts +3 -0
package/dist/cli/index.d.ts.map +1 -0
package/dist/cli/index.js +20 -0
package/dist/cli/index.js.map +1 -0
package/dist/cli/utils/claude.d.ts +21 -0
package/dist/cli/utils/claude.d.ts.map +1 -0
package/dist/cli/utils/claude.js +42 -0
package/dist/cli/utils/claude.js.map +1 -0
package/dist/cli/utils/dev-server.d.ts +14 -0
package/dist/cli/utils/dev-server.d.ts.map +1 -0
package/dist/cli/utils/dev-server.js +57 -0
package/dist/cli/utils/dev-server.js.map +1 -0
package/dist/cli/utils/electron.d.ts +7 -0
package/dist/cli/utils/electron.d.ts.map +1 -0
package/dist/cli/utils/electron.js +36 -0
package/dist/cli/utils/electron.js.map +1 -0
package/dist/cli/utils/output.d.ts +6 -0
package/dist/cli/utils/output.d.ts.map +1 -0
package/dist/cli/utils/output.js +21 -0
package/dist/cli/utils/output.js.map +1 -0
package/dist/cli/utils/port-detect.d.ts +30 -0
package/dist/cli/utils/port-detect.d.ts.map +1 -0
package/dist/cli/utils/port-detect.js +95 -0
package/dist/cli/utils/port-detect.js.map +1 -0
package/dist/cli/utils/preflight.d.ts +20 -0
package/dist/cli/utils/preflight.d.ts.map +1 -0
package/dist/cli/utils/preflight.js +33 -0
package/dist/cli/utils/preflight.js.map +1 -0
package/dist/cli/utils/process.d.ts +23 -0
package/dist/cli/utils/process.d.ts.map +1 -0
package/dist/cli/utils/process.js +57 -0
package/dist/cli/utils/process.js.map +1 -0
package/out/main/index.js +1123 -0
package/out/preload/overlay.cjs +56 -0
package/out/preload/sidebar.cjs +29 -0
package/out/renderer/assets/overlay-Bsx1u_qg.css +449 -0
package/out/renderer/assets/overlay-DZl3I3jq.js +689 -0
package/out/renderer/assets/sidebar-Bt34gvPU.js +563 -0
package/out/renderer/assets/sidebar-BxEPS84k.css +515 -0
package/out/renderer/assets/toast-CLlgwMU_.js +110 -0
package/out/renderer/overlay.html +131 -0
package/out/renderer/sidebar.html +64 -0
package/package.json +67 -0
package/resources/icon.icns +0 -0
package/resources/icon.png +0 -0
package/scripts/postinstall.cjs +56 -0

package/out/main/index.js ADDED Viewed

@@ -0,0 +1,1123 @@
+import { BaseWindow, WebContentsView, shell, ipcMain, Menu, app, nativeImage } from "electron";
+import path from "node:path";
+import fs from "node:fs";
+import { randomUUID } from "node:crypto";
+import { query } from "@anthropic-ai/claude-agent-sdk";
+import __cjs_mod__ from "node:module";
+const __filename = import.meta.filename;
+const __dirname = import.meta.dirname;
+const require2 = __cjs_mod__.createRequire(import.meta.url);
+const VIEWPORT_PRESETS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 375, height: 812 }
+};
+function computeSiteViewBounds(preset, windowWidth, windowHeight) {
+  if (preset === "desktop" || !(preset in VIEWPORT_PRESETS)) {
+    return { x: 0, y: 0, width: windowWidth, height: windowHeight };
+  }
+  const vp = VIEWPORT_PRESETS[preset];
+  if (windowWidth <= vp.width && windowHeight <= vp.height) {
+    return { x: 0, y: 0, width: windowWidth, height: windowHeight };
+  }
+  const w = Math.min(vp.width, windowWidth);
+  const h = Math.min(vp.height, windowHeight);
+  const x = Math.round((windowWidth - w) / 2);
+  const y = Math.round((windowHeight - h) / 2);
+  return { x, y, width: w, height: h };
+}
+function animateBounds(view, from, to, durationMs) {
+  return new Promise((resolve) => {
+    const startTime = Date.now();
+    function easeInOut(t) {
+      return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    }
+    function lerp(a, b, t) {
+      return Math.round(a + (b - a) * t);
+    }
+    function step() {
+      const elapsed = Date.now() - startTime;
+      const rawT = Math.min(elapsed / durationMs, 1);
+      const t = easeInOut(rawT);
+      const bounds = {
+        x: lerp(from.x, to.x, t),
+        y: lerp(from.y, to.y, t),
+        width: lerp(from.width, to.width, t),
+        height: lerp(from.height, to.height, t)
+      };
+      view.setBounds(bounds);
+      if (rawT >= 1) {
+        resolve();
+      } else {
+        setTimeout(step, 16);
+      }
+    }
+    step();
+  });
+}
+function createMainWindow(url2, projectName2, port2) {
+  const win = new BaseWindow({
+    width: 1280,
+    height: 800,
+    center: true,
+    title: `Claw Design — ${projectName2} — localhost:${port2}`
+  });
+  win.contentView.setBackgroundColor("#1a1a1a");
+  const siteView = new WebContentsView({
+    webPreferences: {
+      contextIsolation: true,
+      sandbox: true,
+      nodeIntegration: false,
+      webSecurity: true,
+      allowRunningInsecureContent: false
+    }
+  });
+  win.contentView.addChildView(siteView);
+  const splashHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .splash {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
+    .splash__brand {
+      font-size: 16px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .splash__spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid transparent;
+      border-top-color: rgba(138, 180, 248, 0.8);
+      border-radius: 50%;
+      animation: spin 800ms linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .splash__url {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.4);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .splash__spinner { animation: none; border-top-color: rgba(138, 180, 248, 0.5); }
+    }
+  </style>
+</head>
+<body>
+  <div class="splash">
+    <div class="splash__brand">Claw Design</div>
+    <div class="splash__spinner" aria-label="Loading application"></div>
+    <div class="splash__url">Loading localhost:${port2}...</div>
+  </div>
+</body>
+</html>`;
+  siteView.webContents.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(splashHtml)}`);
+  const overlayView = new WebContentsView({
+    webPreferences: {
+      contextIsolation: true,
+      sandbox: true,
+      nodeIntegration: false,
+      webSecurity: true,
+      preload: path.join(__dirname, "../preload/overlay.cjs")
+    }
+  });
+  overlayView.setBackgroundColor("#00000000");
+  win.contentView.addChildView(overlayView);
+  overlayView.webContents.loadFile(
+    path.join(__dirname, "../renderer/overlay.html")
+  );
+  const sidebarView = new WebContentsView({
+    webPreferences: {
+      contextIsolation: true,
+      sandbox: true,
+      nodeIntegration: false,
+      webSecurity: true,
+      preload: path.join(__dirname, "../preload/sidebar.cjs")
+    }
+  });
+  sidebarView.setBackgroundColor("#00000000");
+  win.contentView.addChildView(sidebarView);
+  sidebarView.webContents.loadFile(
+    path.join(__dirname, "../renderer/sidebar.html")
+  );
+  sidebarView.setBounds({ x: 0, y: 0, width: 0, height: 0 });
+  let overlayIsActive = false;
+  let sidebarState = "hidden";
+  let toolbarPosition = null;
+  let sidebarUserPosition = null;
+  let currentViewport = "desktop";
+  function applySidebarBounds() {
+    const { width, height } = win.getContentBounds();
+    const SIDEBAR_WIDTH = 300;
+    const SIDEBAR_MAX_HEIGHT = 480;
+    const MARGIN = 16;
+    switch (sidebarState) {
+      case "hidden":
+        sidebarView.setBounds({ x: 0, y: 0, width: 0, height: 0 });
+        break;
+      case "minimized": {
+        const mW = 52;
+        const mH = 80;
+        if (sidebarUserPosition) {
+          const x = Math.max(0, Math.min(width - mW, sidebarUserPosition.x));
+          const y = Math.max(0, Math.min(height - mH, sidebarUserPosition.y));
+          sidebarView.setBounds({ x, y, width: mW, height: mH });
+        } else {
+          sidebarView.setBounds({
+            x: width - mW,
+            y: Math.round(height / 2) - 18,
+            width: mW,
+            height: mH
+          });
+        }
+        break;
+      }
+      case "expanded": {
+        const panelHeight = Math.min(SIDEBAR_MAX_HEIGHT, height - MARGIN * 2);
+        if (sidebarUserPosition) {
+          const x = Math.max(0, Math.min(width - SIDEBAR_WIDTH, sidebarUserPosition.x));
+          const y = Math.max(0, Math.min(height - panelHeight, sidebarUserPosition.y));
+          sidebarView.setBounds({ x, y, width: SIDEBAR_WIDTH, height: panelHeight });
+        } else {
+          sidebarView.setBounds({
+            x: width - SIDEBAR_WIDTH - MARGIN,
+            y: MARGIN,
+            width: SIDEBAR_WIDTH,
+            height: panelHeight
+          });
+        }
+        break;
+      }
+    }
+  }
+  function setSidebarState(state) {
+    sidebarState = state;
+    applySidebarBounds();
+    sidebarView.webContents.send("sidebar:state-change", state);
+  }
+  function syncBounds() {
+    const { width, height } = win.getContentBounds();
+    const siteBounds = computeSiteViewBounds(currentViewport, width, height);
+    siteView.setBounds(siteBounds);
+    if (overlayIsActive) {
+      overlayView.setBounds({ x: 0, y: 0, width, height });
+    } else {
+      setOverlayInactive(overlayView, win);
+    }
+    applySidebarBounds();
+  }
+  async function setViewportImpl(preset) {
+    if (!VIEWPORT_PRESETS[preset]) return;
+    const { width, height } = win.getContentBounds();
+    const from = siteView.getBounds();
+    currentViewport = preset;
+    const to = computeSiteViewBounds(preset, width, height);
+    await animateBounds(siteView, from, to, 250);
+    overlayView.webContents.send("viewport:changed", { preset });
+  }
+  win.on("resize", syncBounds);
+  syncBounds();
+  return {
+    window: win,
+    siteView,
+    overlayView,
+    sidebarView,
+    setOverlayIsActive: (active) => {
+      overlayIsActive = active;
+    },
+    setSidebarState,
+    getSidebarState: () => sidebarState,
+    setToolbarPosition: (x, y) => {
+      toolbarPosition = { x, y };
+    },
+    getToolbarPosition: () => toolbarPosition,
+    setSidebarUserPosition: (x, y) => {
+      sidebarUserPosition = { x, y };
+    },
+    getSidebarUserPosition: () => sidebarUserPosition,
+    setViewport: setViewportImpl,
+    getViewport: () => currentViewport,
+    navigateToSite: () => {
+      siteView.webContents.loadURL(url2);
+    }
+  };
+}
+function setOverlayInactive(overlayView, win, components) {
+  const { width, height } = win.getContentBounds();
+  const toolbarWidth = 52;
+  const toolbarHeight = 305;
+  const margin = 16;
+  const tooltipAllowance = 160;
+  const viewW = toolbarWidth + margin + tooltipAllowance;
+  const viewH = toolbarHeight + margin;
+  const userPos = components?.getToolbarPosition?.();
+  if (userPos) {
+    const x = Math.max(0, Math.min(width - viewW, userPos.x));
+    const y = Math.max(0, Math.min(height - viewH, userPos.y));
+    overlayView.setBounds({ x, y, width: viewW, height: viewH });
+  } else {
+    overlayView.setBounds({
+      x: width - toolbarWidth - margin - tooltipAllowance,
+      y: height - toolbarHeight - margin,
+      width: viewW,
+      height: viewH
+    });
+  }
+  components?.setOverlayIsActive(false);
+}
+function setOverlayActive(overlayView, win, components) {
+  const { width, height } = win.getContentBounds();
+  if (components?.getSidebarState && components.getSidebarState() === "expanded") {
+    components.setSidebarState("minimized");
+  }
+  overlayView.setBounds({ x: 0, y: 0, width, height });
+  components?.setOverlayIsActive(true);
+}
+function setupNavigation(siteView, allowedOrigin) {
+  siteView.webContents.on("will-navigate", (event, navigationUrl) => {
+    try {
+      const parsed = new URL(navigationUrl);
+      if (parsed.origin !== allowedOrigin) {
+        event.preventDefault();
+        shell.openExternal(navigationUrl);
+      }
+    } catch {
+      event.preventDefault();
+      console.warn(
+        `[claw-design] Blocked navigation to malformed URL: ${navigationUrl}`
+      );
+    }
+  });
+  siteView.webContents.setWindowOpenHandler(({ url: url2 }) => {
+    try {
+      const parsed = new URL(url2);
+      if (parsed.origin !== allowedOrigin) {
+        shell.openExternal(url2);
+      }
+    } catch {
+      console.warn(
+        `[claw-design] Blocked window.open for malformed URL: ${url2}`
+      );
+    }
+    return { action: "deny" };
+  });
+}
+async function captureRegion(siteView, cssRect) {
+  const rect = {
+    x: Math.max(0, Math.round(cssRect.x)),
+    y: Math.max(0, Math.round(cssRect.y)),
+    width: Math.max(1, Math.round(cssRect.width)),
+    height: Math.max(1, Math.round(cssRect.height))
+  };
+  const image = await siteView.webContents.capturePage(rect);
+  return image.toPNG();
+}
+function buildDomExtractionScript(rect) {
+  return `(function() {
+  var rect = { x: ${rect.x}, y: ${rect.y}, w: ${rect.width}, h: ${rect.height} };
+  var elements = [];
+  var allEls = document.querySelectorAll('*');
+  function getElementPath(el) {
+    var parts = [];
+    var current = el;
+    while (current && current !== document.body && current !== document.documentElement) {
+      var selector = current.tagName.toLowerCase();
+      if (current.id) {
+        selector += '#' + current.id;
+      } else if (current.className && typeof current.className === 'string') {
+        var cls = current.className.split(' ').filter(function(c) { return c.length > 0; })[0];
+        if (cls) selector += '.' + cls;
+      }
+      parts.unshift(selector);
+      current = current.parentElement;
+    }
+    return parts.join(' > ');
+  }
+  for (var i = 0; i < allEls.length; i++) {
+    var el = allEls[i];
+    var elRect = el.getBoundingClientRect();
+    // Check overlap with selection rect
+    if (elRect.right < rect.x || elRect.left > rect.x + rect.w) continue;
+    if (elRect.bottom < rect.y || elRect.top > rect.y + rect.h) continue;
+    // Skip invisible elements
+    var style = window.getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden') continue;
+    var textContent = el.textContent ? el.textContent.trim().substring(0, 200) : undefined;
+    elements.push({
+      tag: el.tagName.toLowerCase(),
+      id: el.id || undefined,
+      classes: el.className && typeof el.className === 'string'
+        ? el.className.split(' ').filter(function(c) { return c.length > 0; })
+        : [],
+      text: textContent || undefined,
+      bounds: {
+        x: Math.round(elRect.x),
+        y: Math.round(elRect.y),
+        width: Math.round(elRect.width),
+        height: Math.round(elRect.height)
+      },
+      path: getElementPath(el)
+    });
+  }
+  return {
+    elements: elements,
+    viewport: { width: window.innerWidth, height: window.innerHeight }
+  };
+})()`;
+}
+function registerIpcHandlers(components, agentManager) {
+  ipcMain.handle("overlay:activate-selection", async () => {
+    if (components.getSidebarState() === "expanded") {
+      components.setSidebarState("minimized");
+    }
+    const preExpansionBounds = components.overlayView.getBounds();
+    setOverlayActive(components.overlayView, components.window, components);
+    components.overlayView.webContents.send(
+      "overlay:mode-change",
+      "selection"
+    );
+    return preExpansionBounds;
+  });
+  ipcMain.handle("overlay:deactivate-selection", async () => {
+    setOverlayInactive(components.overlayView, components.window, components);
+    components.overlayView.webContents.send("overlay:mode-change", "inactive");
+  });
+  ipcMain.handle(
+    "overlay:get-element-at-point",
+    async (_event, x, y) => {
+      const result = await components.siteView.webContents.executeJavaScript(`
+        (function() {
+          const el = document.elementFromPoint(${x}, ${y});
+          if (!el) return null;
+          const rect = el.getBoundingClientRect();
+          return {
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+          };
+        })()
+      `);
+      return result;
+    }
+  );
+  ipcMain.handle(
+    "overlay:capture-screenshot",
+    async (_event, cssRect) => {
+      return captureRegion(components.siteView, cssRect);
+    }
+  );
+  ipcMain.handle(
+    "overlay:extract-dom",
+    async (_event, cssRect) => {
+      const script = buildDomExtractionScript(cssRect);
+      const result = await components.siteView.webContents.executeJavaScript(
+        script
+      );
+      return result;
+    }
+  );
+  ipcMain.handle(
+    "overlay:submit-instruction",
+    async (_event, data) => {
+      const screenshotBuffer = Buffer.from(data.screenshot);
+      const refImages = data.referenceImages?.map((b) => Buffer.from(b));
+      const taskId = await agentManager.submitTask({
+        instruction: data.instruction,
+        screenshot: screenshotBuffer,
+        dom: data.dom,
+        bounds: data.bounds,
+        referenceImages: refImages,
+        model: data.model
+      });
+      setOverlayInactive(components.overlayView, components.window, components);
+      components.overlayView.webContents.send("overlay:mode-change", "inactive");
+      return taskId;
+    }
+  );
+  ipcMain.handle("viewport:set", async (_event, data) => {
+    const validPresets = ["desktop", "tablet", "mobile"];
+    if (!validPresets.includes(data.preset)) return;
+    await components.setViewport(data.preset);
+  });
+  ipcMain.handle("toast:dismiss", async (_event, data) => {
+    components.overlayView.webContents.send("toast:dismiss", data);
+  });
+  ipcMain.handle("sidebar:expand", async () => {
+    components.setSidebarState("expanded");
+  });
+  ipcMain.handle("sidebar:collapse", async () => {
+    components.setSidebarState("minimized");
+  });
+  ipcMain.handle("sidebar:task-dismiss", async (_event, data) => {
+    agentManager.dismissTask(data.id);
+    if (agentManager.getAllTasks().length === 0) {
+      components.setSidebarState("hidden");
+    }
+  });
+  ipcMain.handle("sidebar:task-logs", async (_event, data) => {
+    return agentManager.getTaskLogs(data.id);
+  });
+  ipcMain.handle("sidebar:task-retry", async (_event, data) => {
+    const task = agentManager.getTask(data.id);
+    if (!task) return;
+    const instruction = task.instruction;
+    agentManager.dismissTask(data.id);
+    if (agentManager.getAllTasks().length === 0) {
+      components.setSidebarState("hidden");
+    }
+    components.overlayView.webContents.send("overlay:prefill-instruction", {
+      instruction
+    });
+  });
+  ipcMain.handle("sidebar:task-undo", async (_event, data) => {
+    await agentManager.undoTask(data.id);
+  });
+  ipcMain.handle("sidebar:drag-delta", async (_event, data) => {
+    const current = components.sidebarView.getBounds();
+    const { width: winW, height: winH } = components.window.getContentBounds();
+    const newX = Math.max(0, Math.min(winW - current.width, current.x + data.dx));
+    const newY = Math.max(0, Math.min(winH - current.height, current.y + data.dy));
+    components.sidebarView.setBounds({ ...current, x: newX, y: newY });
+    components.setSidebarUserPosition(newX, newY);
+    return { x: newX, y: newY };
+  });
+  ipcMain.handle("sidebar:set-position", async (_event, data) => {
+    const current = components.sidebarView.getBounds();
+    const { width: winW, height: winH } = components.window.getContentBounds();
+    const x = Math.max(0, Math.min(winW - current.width, data.x));
+    const y = Math.max(0, Math.min(winH - current.height, data.y));
+    components.sidebarView.setBounds({ ...current, x, y });
+    components.setSidebarUserPosition(x, y);
+  });
+  ipcMain.handle("overlay:drag-toolbar", async (_event, data) => {
+    const current = components.overlayView.getBounds();
+    const { width: winW, height: winH } = components.window.getContentBounds();
+    const newX = Math.max(0, Math.min(winW - current.width, current.x + data.dx));
+    const newY = Math.max(0, Math.min(winH - current.height, current.y + data.dy));
+    components.overlayView.setBounds({ ...current, x: newX, y: newY });
+    components.setToolbarPosition(newX, newY);
+    return { x: newX, y: newY };
+  });
+  ipcMain.handle("overlay:set-toolbar-position", async (_event, data) => {
+    const current = components.overlayView.getBounds();
+    const { width: winW, height: winH } = components.window.getContentBounds();
+    const x = Math.max(0, Math.min(winW - current.width, data.x));
+    const y = Math.max(0, Math.min(winH - current.height, data.y));
+    components.overlayView.setBounds({ ...current, x, y });
+    components.setToolbarPosition(x, y);
+  });
+}
+function assemblePrompt(instruction, screenshotBuffer, domContext, bounds, referenceImages) {
+  const primaryElement = domContext.elements.length > 0 ? domContext.elements.reduce((best, el) => {
+    const area = el.bounds.width * el.bounds.height;
+    const bestArea = best.bounds.width * best.bounds.height;
+    return area > bestArea ? el : best;
+  }) : null;
+  let contextSuffix = "";
+  if (primaryElement) {
+    contextSuffix += `
+**Selected element:** \`<${primaryElement.tag}>\` at \`${primaryElement.path}\``;
+    if (primaryElement.text) {
+      contextSuffix += ` containing "${primaryElement.text.slice(0, 100)}"`;
+    }
+    contextSuffix += "\n\nApply the instruction to this element specifically. The screenshot shows exactly what the user selected.";
+  }
+  if (bounds) {
+    contextSuffix += `
+**Selection bounds:** x=${bounds.x}, y=${bounds.y}, ${bounds.width}x${bounds.height}px`;
+  }
+  const contentBlocks = [];
+  const hasInlineRefs = referenceImages && referenceImages.length > 0 && /\[Image #\d+\]/.test(instruction);
+  if (hasInlineRefs && referenceImages) {
+    const parts = instruction.split(/(\[Image #\d+\])/);
+    let headerAdded = false;
+    for (const part of parts) {
+      const match = part.match(/^\[Image #(\d+)\]$/);
+      if (match) {
+        const idx = parseInt(match[1], 10) - 1;
+        if (idx >= 0 && idx < referenceImages.length) {
+          if (!headerAdded) {
+            contentBlocks.unshift({ type: "text", text: "## Change Instruction\n\n" });
+            headerAdded = true;
+          }
+          contentBlocks.push({
+            type: "image",
+            source: {
+              type: "base64",
+              media_type: "image/png",
+              data: referenceImages[idx].toString("base64")
+            }
+          });
+        }
+      } else if (part) {
+        if (!headerAdded) {
+          contentBlocks.push({ type: "text", text: "## Change Instruction\n\n" + part });
+          headerAdded = true;
+        } else {
+          contentBlocks.push({ type: "text", text: part });
+        }
+      }
+    }
+    if (contextSuffix) {
+      contentBlocks.push({ type: "text", text: contextSuffix });
+    }
+  } else {
+    contentBlocks.push({
+      type: "text",
+      text: "## Change Instruction\n\n" + instruction + contextSuffix
+    });
+  }
+  contentBlocks.push({
+    type: "image",
+    source: {
+      type: "base64",
+      media_type: "image/png",
+      data: screenshotBuffer.toString("base64")
+    }
+  });
+  if (referenceImages && referenceImages.length > 0 && !hasInlineRefs) {
+    contentBlocks.push({
+      type: "text",
+      text: `## Reference Image${referenceImages.length > 1 ? "s" : ""}
+The user pasted ${referenceImages.length > 1 ? "these images as" : "this image as a"} reference for what the result should look like:`
+    });
+    for (const buf of referenceImages) {
+      contentBlocks.push({
+        type: "image",
+        source: { type: "base64", media_type: "image/png", data: buf.toString("base64") }
+      });
+    }
+  }
+  contentBlocks.push({
+    type: "text",
+    text: "## DOM Context\n\nElements in the selected region:\n```json\n" + JSON.stringify(domContext, null, 2) + "\n```"
+  });
+  const userMessage = {
+    type: "user",
+    message: {
+      role: "user",
+      content: contentBlocks
+    },
+    parent_tool_use_id: null
+  };
+  return (async function* () {
+    yield userMessage;
+  })();
+}
+const FATAL_ASSISTANT_ERRORS = /* @__PURE__ */ new Set([
+  "authentication_failed",
+  "billing_error",
+  "invalid_request"
+]);
+function humanReadableError(errors) {
+  const joined = errors.join(" ");
+  if (joined.includes("authentication_failed") || joined.includes("Invalid API key")) {
+    return 'Not authenticated. Run "claude login" in your terminal to sign in.';
+  }
+  if (joined.includes("rate_limit")) {
+    return "Rate limit reached. Retry in a moment.";
+  }
+  if (joined.includes("billing_error")) {
+    return "Billing issue. Check your Claude account.";
+  }
+  if (joined.includes("server_error")) {
+    return "Claude server error. Retry in a moment.";
+  }
+  if (joined.includes("invalid_request")) {
+    return "Invalid request. Check your Claude Code installation.";
+  }
+  if (joined.length > 0) {
+    return joined.slice(0, 200);
+  }
+  return "Something went wrong. Retry or dismiss to continue.";
+}
+function describeToolUse(toolName, input) {
+  const filePath = input?.file_path;
+  const short = filePath ? filePath.replace(/^.*\//, "") : void 0;
+  switch (toolName) {
+    case "Read":
+      return short ? `Reading ${short}` : "Reading file...";
+    case "Write":
+      return short ? `Writing ${short}` : "Writing file...";
+    case "Edit":
+      return short ? `Editing ${short}` : "Editing file...";
+    case "Glob":
+      return "Searching for files...";
+    case "Grep":
+      return "Searching code...";
+    case "Bash": {
+      const cmd = input?.command;
+      return cmd ? `Running: ${cmd.slice(0, 60)}` : "Running command...";
+    }
+    default:
+      return `Using ${toolName}...`;
+  }
+}
+class AgentManager {
+  tasks = /* @__PURE__ */ new Map();
+  activeCount = 0;
+  maxParallel = 3;
+  projectDir;
+  onTaskUpdate = null;
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+  }
+  setOnTaskUpdate(cb) {
+    this.onTaskUpdate = cb;
+  }
+  /**
+   * Submit a new task for Claude to execute.
+   * Returns the generated task ID.
+   */
+  async submitTask(input) {
+    const id = randomUUID();
+    const task = {
+      id,
+      instruction: input.instruction,
+      status: "queued",
+      screenshot: input.screenshot,
+      dom: input.dom,
+      bounds: input.bounds,
+      referenceImages: input.referenceImages,
+      model: input.model,
+      logs: [],
+      fatalErrors: []
+    };
+    this.tasks.set(id, task);
+    this.emitUpdate(task);
+    this.processQueue();
+    return id;
+  }
+  /**
+   * Retry a task re-using its original screenshot, DOM context, and bounds.
+   * Dismisses the old task and creates a new one.
+   */
+  async retryTask(id) {
+    const original = this.tasks.get(id);
+    if (!original) {
+      throw new Error(`Task ${id} not found`);
+    }
+    const { instruction, screenshot, dom, bounds } = original;
+    this.dismissTask(id);
+    return this.submitTask({ instruction, screenshot, dom, bounds });
+  }
+  /**
+   * Undo a completed task by submitting a new task that asks Claude
+   * to revert the change, using the original screenshot/DOM as reference
+   * for what "before" looked like.
+   */
+  async undoTask(id) {
+    const task = this.tasks.get(id);
+    if (!task) throw new Error("Task not found");
+    if (task.status !== "done") throw new Error("Only completed tasks can be undone");
+    this.dismissTask(id);
+    return this.submitTask({
+      instruction: `Undo the previous change: "${task.instruction}". Revert the code back to match the screenshot and DOM context shown here (this is what it looked like BEFORE the change was made).`,
+      screenshot: task.screenshot,
+      dom: task.dom,
+      bounds: task.bounds
+    });
+  }
+  /**
+   * Dismiss a task, removing it from the internal map.
+   * If the task is active (sending/editing), aborts the query.
+   */
+  dismissTask(id) {
+    const task = this.tasks.get(id);
+    if (!task) return;
+    if ((task.status === "sending" || task.status === "editing") && task.abortController) {
+      task.abortController.abort();
+    }
+    this.tasks.delete(id);
+  }
+  /**
+   * Shut down all active queries and clean up resources.
+   */
+  shutdown() {
+    for (const task of this.tasks.values()) {
+      if ((task.status === "sending" || task.status === "editing") && task.abortController) {
+        task.abortController.abort();
+      }
+      if (task.queryRef) {
+        task.queryRef.close();
+      }
+    }
+  }
+  /**
+   * Get a task by ID (public view without internal fields).
+   */
+  getTask(id) {
+    const task = this.tasks.get(id);
+    if (!task) return void 0;
+    return {
+      id: task.id,
+      instruction: task.instruction,
+      status: task.status,
+      error: task.error,
+      screenshot: task.screenshot,
+      dom: task.dom,
+      bounds: task.bounds
+    };
+  }
+  /**
+   * Get all tasks (public view).
+   */
+  getAllTasks() {
+    return Array.from(this.tasks.values()).map((t) => ({
+      id: t.id,
+      instruction: t.instruction,
+      status: t.status,
+      error: t.error,
+      screenshot: t.screenshot,
+      dom: t.dom,
+      bounds: t.bounds
+    }));
+  }
+  // ---- Private ----
+  processQueue() {
+    if (this.activeCount >= this.maxParallel) return;
+    for (const task of this.tasks.values()) {
+      if (task.status === "queued") {
+        this.activeCount++;
+        task.status = "sending";
+        this.emitUpdate(task);
+        this.executeTask(task);
+        return;
+      }
+    }
+  }
+  async executeTask(task) {
+    const abortController = new AbortController();
+    task.abortController = abortController;
+    const prompt = assemblePrompt(
+      task.instruction,
+      task.screenshot,
+      task.dom,
+      task.bounds,
+      task.referenceImages
+    );
+    const cleanEnv = { ...process.env };
+    delete cleanEnv.ANTHROPIC_API_KEY;
+    const q = query({
+      prompt,
+      options: {
+        abortController,
+        cwd: this.projectDir,
+        env: cleanEnv,
+        systemPrompt: {
+          type: "preset",
+          preset: "claude_code",
+          append: "You are used by claw-design. The user selected a region of their website and provided a screenshot, DOM context, and change instruction. Edit the source code to implement the change. Be concise in your response."
+        },
+        allowedTools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash"],
+        permissionMode: "acceptEdits",
+        settingSources: ["user", "project"],
+        persistSession: false,
+        maxTurns: 20,
+        ...task.model ? { model: task.model } : {}
+      }
+    });
+    task.queryRef = q;
+    try {
+      for await (const message of q) {
+        const msg = message;
+        if (msg.type === "system" && msg.subtype === "init") {
+          task.status = "editing";
+          this.addLog(task, "status", "Claude connected, starting edits...");
+          this.emitUpdate(task);
+        } else if (msg.type === "auth_status") {
+          const authMsg = message;
+          if (authMsg.error) {
+            task.fatalErrors.push(authMsg.error);
+            this.addLog(task, "status", `Auth error: ${authMsg.error}`);
+          }
+        } else if (msg.type === "assistant") {
+          const assistantMsg = message;
+          if (assistantMsg.error && FATAL_ASSISTANT_ERRORS.has(assistantMsg.error)) {
+            task.fatalErrors.push(assistantMsg.error);
+            this.addLog(
+              task,
+              "status",
+              `API error: ${assistantMsg.error}`
+            );
+          }
+          this.extractActivity(task, msg);
+        } else if (msg.type === "tool_use_summary") {
+          const summary = msg.summary;
+          if (summary) {
+            task.activity = summary;
+            this.addLog(task, "text", summary);
+            this.emitUpdate(task);
+          }
+        } else if (msg.type === "result") {
+          if (task.fatalErrors.length > 0) {
+            task.status = "error";
+            task.error = humanReadableError(task.fatalErrors);
+            task.activity = void 0;
+            this.addLog(task, "status", `Error: ${task.error}`);
+            this.emitUpdate(task);
+          } else if (msg.subtype === "success") {
+            task.status = "done";
+            task.activity = void 0;
+            this.addLog(task, "status", "Completed");
+            this.emitUpdate(task);
+          } else {
+            const errors = msg.errors || [];
+            task.status = "error";
+            task.error = humanReadableError(errors);
+            task.activity = void 0;
+            this.addLog(task, "status", `Error: ${task.error}`);
+            this.emitUpdate(task);
+          }
+        }
+      }
+    } catch (err) {
+      if (task.status !== "done" && task.status !== "error") {
+        task.status = "error";
+        const errMsg = err instanceof Error ? err.message : String(err);
+        task.error = errMsg || "Something went wrong. Retry or dismiss to continue.";
+        this.addLog(task, "status", `Error: ${errMsg}`);
+        this.emitUpdate(task);
+      }
+    } finally {
+      try {
+        q.close();
+      } catch {
+      }
+      this.activeCount--;
+      this.processQueue();
+    }
+  }
+  /**
+   * Extract activity text from assistant messages containing tool_use blocks.
+   */
+  extractActivity(task, msg) {
+    const assistantMsg = msg.message;
+    if (!assistantMsg?.content) return;
+    for (const block of assistantMsg.content) {
+      if (block.type === "tool_use") {
+        const toolName = block.name;
+        const input = block.input;
+        const activity = describeToolUse(toolName, input);
+        task.activity = activity;
+        this.addLog(task, "tool", activity);
+        this.emitUpdate(task);
+      } else if (block.type === "text" && typeof block.text === "string") {
+        const text = block.text.slice(0, 500);
+        if (text.trim()) {
+          this.addLog(task, "text", text);
+        }
+      }
+    }
+  }
+  addLog(task, type, content) {
+    task.logs.push({ timestamp: Date.now(), type, content });
+  }
+  /**
+   * Get logs for a task by ID.
+   */
+  getTaskLogs(id) {
+    return this.tasks.get(id)?.logs ?? [];
+  }
+  emitUpdate(task) {
+    if (!this.onTaskUpdate) return;
+    this.onTaskUpdate({
+      id: task.id,
+      instruction: task.instruction,
+      status: task.status,
+      error: task.error,
+      activity: task.activity,
+      model: task.model
+    });
+  }
+}
+function setupApplicationMenu() {
+  const appName = "Claw Design";
+  const isMac = process.platform === "darwin";
+  const template = [
+    // macOS app menu (first menu item becomes the app-name menu)
+    ...isMac ? [
+      {
+        label: appName,
+        submenu: [
+          { role: "about", label: `About ${appName}` },
+          { type: "separator" },
+          { role: "services" },
+          { type: "separator" },
+          { role: "hide", label: `Hide ${appName}` },
+          { role: "hideOthers" },
+          { role: "unhide" },
+          { type: "separator" },
+          { role: "quit", label: `Quit ${appName}` }
+        ]
+      }
+    ] : [],
+    // Edit menu
+    {
+      label: "Edit",
+      submenu: [
+        { role: "undo" },
+        { role: "redo" },
+        { type: "separator" },
+        { role: "cut" },
+        { role: "copy" },
+        { role: "paste" },
+        { role: "selectAll" }
+      ]
+    },
+    // View menu
+    {
+      label: "View",
+      submenu: [
+        { role: "reload" },
+        { role: "forceReload" },
+        { role: "toggleDevTools" },
+        { type: "separator" },
+        { role: "resetZoom" },
+        { role: "zoomIn" },
+        { role: "zoomOut" },
+        { type: "separator" },
+        { role: "togglefullscreen" }
+      ]
+    },
+    // Window menu
+    {
+      label: "Window",
+      submenu: [
+        { role: "minimize" },
+        { role: "zoom" },
+        ...isMac ? [
+          { type: "separator" },
+          { role: "front" }
+        ] : [{ role: "close" }]
+      ]
+    },
+    // Help menu
+    {
+      label: "Help",
+      submenu: [
+        {
+          label: `${appName} on GitHub`,
+          click: async () => {
+            await shell.openExternal(
+              "https://github.com/prodoxx/claw-design"
+            );
+          }
+        }
+      ]
+    }
+  ];
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+}
+const url = process.env.CLAW_URL ?? "http://localhost:3000";
+const projectName = process.env.CLAW_PROJECT_NAME ?? "unknown";
+const port = parseInt(url.match(/:(\d+)/)?.[1] ?? "3000", 10);
+app.setName("Claw Design");
+const iconPath = path.join(__dirname, "../../resources/icon.png");
+let appVersion = "1.0.0";
+try {
+  const pkgPath = path.join(__dirname, "../../package.json");
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  appVersion = pkg.version ?? appVersion;
+} catch {
+}
+app.whenReady().then(() => {
+  let aboutIcon = nativeImage.createEmpty();
+  try {
+    const iconBuffer = fs.readFileSync(iconPath);
+    aboutIcon = nativeImage.createFromBuffer(iconBuffer);
+  } catch {
+  }
+  app.setAboutPanelOptions({
+    applicationName: "Claw Design",
+    applicationVersion: appVersion,
+    version: "",
+    copyright: "MIT License",
+    ...process.platform === "darwin" && !aboutIcon.isEmpty() ? { icon: aboutIcon } : {},
+    ...process.platform === "linux" || process.platform === "win32" ? { iconPath } : {}
+  });
+  if (process.platform === "darwin" && app.dock && !aboutIcon.isEmpty()) {
+    app.dock.setIcon(aboutIcon);
+  }
+  setupApplicationMenu();
+  const components = createMainWindow(url, projectName, port);
+  components.navigateToSite();
+  components.siteView.webContents.on("did-finish-load", () => {
+    components.overlayView.webContents.send("site:loaded");
+  });
+  const allowedOrigin = new URL(url).origin;
+  setupNavigation(components.siteView, allowedOrigin);
+  const projectDir = process.env.CLAW_PROJECT_DIR ?? process.cwd();
+  const agentManager = new AgentManager(projectDir);
+  agentManager.setOnTaskUpdate((update) => {
+    components.sidebarView.webContents.send("sidebar:task-update", update);
+    if (components.getSidebarState() === "hidden") {
+      components.setSidebarState("expanded");
+    }
+  });
+  registerIpcHandlers(components, agentManager);
+  setOverlayInactive(components.overlayView, components.window);
+  let devServerCrashNotified = false;
+  components.siteView.webContents.on("did-fail-load", (_event, _errorCode, _errorDescription, validatedURL) => {
+    if (!validatedURL.includes("localhost") && !validatedURL.includes("127.0.0.1")) return;
+    if (devServerCrashNotified) return;
+    devServerCrashNotified = true;
+    components.overlayView.webContents.send("toast:show", {
+      id: "dev-server-crash",
+      severity: "error",
+      title: "Dev server disconnected",
+      message: "The dev server process exited unexpectedly. Restart clawdesign to continue.",
+      persistent: true
+    });
+  });
+  components.siteView.webContents.on("render-process-gone", (_event, _details) => {
+    if (devServerCrashNotified) return;
+    devServerCrashNotified = true;
+    components.overlayView.webContents.send("toast:show", {
+      id: "dev-server-crash",
+      severity: "error",
+      title: "Connection lost",
+      message: `Cannot reach localhost:${port}. Check if the dev server is still running.`,
+      persistent: true
+    });
+  });
+  components.window.on("closed", () => {
+    app.quit();
+  });
+  app.on("before-quit", () => {
+    agentManager.shutdown();
+  });
+});
+app.on("window-all-closed", () => {
+  app.quit();
+});