claw-design 1.0.1

package/out/preload/overlay.cjs

@@ -0,0 +1,56 @@
+"use strict";
+const electron = require("electron");
+const overlayAPI = {
+  /** Request activation of selection mode (expand overlay to full window).
+   *  Returns the overlay view's pre-expansion bounds so the renderer can
+   *  translate view-local toolbar coordinates into full-window coordinates. */
+  activateSelection: () => electron.ipcRenderer.invoke("overlay:activate-selection"),
+  /** Request deactivation of selection mode (shrink overlay to toolbar area) */
+  deactivateSelection: () => electron.ipcRenderer.invoke("overlay:deactivate-selection"),
+  /** Listen for overlay mode changes from main process */
+  onModeChange: (callback) => {
+    electron.ipcRenderer.on("overlay:mode-change", (_event, mode) => callback(mode));
+  },
+  /** Query the site view for the element at the given CSS-pixel coordinates */
+  getElementAtPoint: (x, y) => electron.ipcRenderer.invoke("overlay:get-element-at-point", x, y),
+  /** Listen for selection committed events (Phase 4 uses this to trigger capture) */
+  onSelectionCommitted: (callback) => {
+    electron.ipcRenderer.on(
+      "overlay:selection-committed",
+      (_event, bounds) => callback(bounds)
+    );
+  },
+  /** Capture screenshot of selected region as PNG buffer (Plan 03-02) */
+  captureScreenshot: (bounds) => electron.ipcRenderer.invoke("overlay:capture-screenshot", bounds),
+  /** Extract DOM elements within selected region (Plan 03-02) */
+  extractDom: (bounds) => electron.ipcRenderer.invoke("overlay:extract-dom", bounds),
+  /** Submit instruction with screenshot + DOM context to main process */
+  submitInstruction: (data) => electron.ipcRenderer.invoke("overlay:submit-instruction", data),
+  /** Listen for instruction prefill events (retry flow -- D-19) */
+  onPrefillInstruction: (callback) => {
+    electron.ipcRenderer.on("overlay:prefill-instruction", (_event, data) => callback(data));
+  },
+  /** Apply a drag delta to the toolbar position (returns new position) */
+  dragToolbar: (dx, dy) => electron.ipcRenderer.invoke("overlay:drag-toolbar", { dx, dy }),
+  /** Set absolute toolbar position (used to restore saved position) */
+  setToolbarPosition: (x, y) => electron.ipcRenderer.invoke("overlay:set-toolbar-position", { x, y }),
+  /** Switch viewport preset (ELEC-03) */
+  setViewport: (preset) => electron.ipcRenderer.invoke("viewport:set", { preset }),
+  /** Listen for viewport changes from main process (sync active state) */
+  onViewportChanged: (callback) => {
+    electron.ipcRenderer.on("viewport:changed", (_event, data) => callback(data));
+  },
+  /** Listen for toast show events from main process (D-08, D-09) */
+  onToastShow: (callback) => {
+    electron.ipcRenderer.on("toast:show", (_event, data) => callback(data));
+  },
+  /** Listen for toast dismiss events from main process */
+  onToastDismiss: (callback) => {
+    electron.ipcRenderer.on("toast:dismiss", (_event, data) => callback(data));
+  },
+  /** Listen for site load complete event from main process */
+  onSiteLoaded: (callback) => {
+    electron.ipcRenderer.on("site:loaded", () => callback());
+  }
+};
+electron.contextBridge.exposeInMainWorld("claw", overlayAPI);

package/out/preload/sidebar.cjs

@@ -0,0 +1,29 @@
+"use strict";
+const electron = require("electron");
+const sidebarAPI = {
+  /** Listen for task status updates from main process */
+  onTaskUpdate: (callback) => {
+    electron.ipcRenderer.on("sidebar:task-update", (_event, data) => callback(data));
+  },
+  /** Request sidebar expand (main process adjusts view bounds) */
+  expand: () => electron.ipcRenderer.invoke("sidebar:expand"),
+  /** Request sidebar collapse (main process restores view bounds) */
+  collapse: () => electron.ipcRenderer.invoke("sidebar:collapse"),
+  /** Dismiss a completed or errored task */
+  dismissTask: (id) => electron.ipcRenderer.invoke("sidebar:task-dismiss", { id }),
+  /** Retry an errored task */
+  retryTask: (id) => electron.ipcRenderer.invoke("sidebar:task-retry", { id }),
+  /** Undo a completed task (asks Claude to revert the change) */
+  undoTask: (id) => electron.ipcRenderer.invoke("sidebar:task-undo", { id }),
+  /** Listen for sidebar state changes from main process (e.g. D-08 auto-minimize) */
+  onStateChange: (callback) => {
+    electron.ipcRenderer.on("sidebar:state-change", (_event, state) => callback(state));
+  },
+  /** Get logs for a specific task */
+  getTaskLogs: (id) => electron.ipcRenderer.invoke("sidebar:task-logs", { id }),
+  /** Apply a drag delta to the sidebar position (returns new position) */
+  dragDelta: (dx, dy) => electron.ipcRenderer.invoke("sidebar:drag-delta", { dx, dy }),
+  /** Set absolute sidebar position (used to restore saved position) */
+  setPosition: (x, y) => electron.ipcRenderer.invoke("sidebar:set-position", { x, y })
+};
+electron.contextBridge.exposeInMainWorld("clawSidebar", sidebarAPI);

package/out/renderer/assets/overlay-Bsx1u_qg.css

@@ -0,0 +1,449 @@
+/* Overlay page: fully transparent, no interaction by default */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Active selection mode: near-invisible background to capture mouse events
+   across the full overlay surface. Without this, Chromium hit-testing passes
+   clicks through fully transparent regions to the site view underneath. */
+body.claw-overlay--active {
+  /* background: rgba(0, 0, 0, 0.2); */
+  background: rgba(130, 163, 173, 0.2);
+}
+
+/* Vertical pill toolbar — view is already positioned at bottom-right by main process */
+.claw-toolbar {
+  position: absolute;
+  bottom: 12px;
+  right: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 8px;
+  background: rgba(10, 10, 10, 0.88);
+  border-radius: 999px;
+  z-index: 9999;
+  transition: opacity 0.15s ease;
+  opacity: 0.75;
+}
+
+.claw-toolbar:hover {
+  opacity: 1;
+}
+
+/* Drag handle - non-interactive visual indicator */
+.claw-toolbar-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: grab;
+}
+
+/* Toolbar button */
+.claw-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+
+.claw-toolbar-btn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Toolbar divider -- separates selection controls from viewport controls (D-01) */
+.claw-toolbar-divider {
+  width: 24px;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 4px 0;
+  flex-shrink: 0;
+}
+
+/* Collapsible viewport group -- hidden by default, expands toolbar on toggle */
+.claw-viewport-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 200ms ease-out, opacity 150ms ease-out;
+}
+
+.claw-viewport-group--open {
+  max-height: 132px;
+  opacity: 1;
+}
+
+/* Selection rectangle (freeform drawing) -- per D-05, D-07, UI spec selection accent detail */
+.claw-selection-rect {
+  position: absolute;
+  border: 2px solid rgba(138, 180, 248, 0.8);
+  background: rgba(138, 180, 248, 0.08);
+  border-radius: 6px;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.claw-selection-rect--committed {
+  border-color: rgba(138, 180, 248, 0.9);
+  background: rgba(138, 180, 248, 0.10);
+}
+
+/* Element hover highlight -- per D-06, UI spec */
+.claw-element-highlight {
+  position: absolute;
+  border: 2px solid rgba(138, 180, 248, 0.6);
+  background: rgba(138, 180, 248, 0.06);
+  border-radius: 6px;
+  pointer-events: none;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 80ms ease-out;
+}
+
+.claw-element-highlight--visible {
+  opacity: 1;
+}
+
+.claw-element-highlight--committed {
+  border-color: rgba(138, 180, 248, 0.9);
+  background: rgba(138, 180, 248, 0.10);
+  opacity: 1;
+}
+
+/* Toolbar button active state -- per UI spec text colors */
+.claw-toolbar-btn--active {
+  color: rgba(138, 180, 248, 1) !important;
+  background: rgba(138, 180, 248, 0.15) !important;
+}
+
+/* Viewport toggle "expanded" state -- subtler than selection active */
+.claw-toolbar-btn--toggle-open {
+  color: rgba(255, 255, 255, 0.75) !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Instruction input bar — per D-09, UI spec */
+.claw-input-bar {
+  position: absolute;
+  z-index: 200;
+  min-width: 240px;
+  max-width: 480px;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 150ms ease-out, transform 150ms ease-out;
+}
+
+.claw-input-bar--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.claw-input-bar__inner {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  background: rgba(10, 10, 10, 0.88);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 12px 12px 12px 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.claw-input-bar__textarea {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #ffffff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  resize: none;
+  min-height: 21px;
+  max-height: 160px;
+  overflow-y: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.claw-input-bar__textarea::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.claw-input-bar__submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.25);
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.claw-input-bar__submit--enabled {
+  color: rgba(138, 180, 248, 1);
+}
+
+.claw-input-bar__submit:hover {
+  color: rgba(138, 180, 248, 1);
+}
+
+.claw-input-bar__footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0 0 12px;
+}
+
+.claw-input-bar__model {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  padding: 2px 6px;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.claw-input-bar__model:hover {
+  color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.claw-input-bar__model:focus {
+  outline: none;
+  border-color: rgba(138, 180, 248, 0.5);
+}
+
+.claw-input-bar__model option {
+  background: #1a1a1a;
+  color: #ffffff;
+}
+
+.claw-input-bar__hint {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.33;
+  color: rgba(255, 255, 255, 0.35);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Toast notification container -- top center of window (D-09, D-10) */
+.claw-toast-container {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 300;
+  pointer-events: none;
+  max-width: 400px;
+  width: 100%;
+}
+
+/* Individual toast notification */
+.claw-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: rgba(10, 10, 10, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 8px 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+}
+
+.claw-toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.claw-toast--exiting {
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: opacity 150ms ease-in, transform 150ms ease-in;
+}
+
+/* Severity border-left colors */
+.claw-toast--info {
+  border-left: 2px solid rgba(138, 180, 248, 0.5);
+}
+
+.claw-toast--warning {
+  border-left: 2px solid rgba(255, 200, 120, 0.5);
+}
+
+.claw-toast--error {
+  border-left: 2px solid rgba(248, 150, 138, 0.5);
+}
+
+/* Toast icon */
+.claw-toast__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+
+.claw-toast--info .claw-toast__icon { color: rgba(138, 180, 248, 0.9); }
+.claw-toast--warning .claw-toast__icon { color: rgba(255, 200, 120, 0.9); }
+.claw-toast--error .claw-toast__icon { color: rgba(248, 150, 138, 0.9); }
+
+/* Toast content */
+.claw-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.claw-toast__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: rgba(255, 255, 255, 0.9);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.claw-toast__message {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 2px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Toast dismiss button */
+.claw-toast__dismiss {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  margin-top: 4px;
+  transition: color 120ms ease;
+  -webkit-font-smoothing: antialiased;
+}
+
+.claw-toast__dismiss:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Tooltip (D-22) -- positioned to the left of toolbar buttons */
+.claw-tooltip {
+  position: fixed;
+  z-index: 10000;
+  background: rgba(10, 10, 10, 0.95);
+  border-radius: 8px;
+  padding: 4px 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.36;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  max-width: 160px;
+  white-space: nowrap;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Loading indicator -- centered spinner while site loads */
+.claw-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  pointer-events: none;
+}
+
+.claw-loading--hidden {
+  display: none;
+}
+
+.claw-loading__spinner {
+  width: 28px;
+  height: 28px;
+  border: 2px solid transparent;
+  border-top-color: rgba(138, 180, 248, 0.7);
+  border-radius: 50%;
+  animation: claw-spin 800ms linear infinite;
+}
+
+@keyframes claw-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Accessibility: reduced motion */
+@media (prefers-reduced-motion: reduce) {
+
+  .claw-element-highlight,
+  .claw-toolbar,
+  .claw-toolbar-btn,
+  .claw-input-bar,
+  .claw-toast,
+  .claw-toast--exiting {
+    transition: none !important;
+  }
+
+  .claw-loading__spinner {
+    animation: none;
+    border-top-color: rgba(138, 180, 248, 0.5);
+  }
+}