@lowdefy/server-dev 5.6.0 → 6.1.0

package/client/feedback/captureTabScreenshot.js

@@ -0,0 +1,84 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { toPng } from 'html-to-image';
+
+import drawAnnotationsSvg from './drawAnnotationsSvg.js';
+import pinResponsiveImages from './pinResponsiveImages.js';
+
+// Chrome caps canvas dimensions well above this, but rasterizing a very long
+// page at retina density burns memory for no feedback value — drop to 1x
+// instead of failing.
+const MAX_CANVAS_DIMENSION = 16000;
+
+function resolveBackgroundColor() {
+  try {
+    const bodyBg = getComputedStyle(document.body).backgroundColor;
+    if (bodyBg && bodyBg !== 'rgba(0, 0, 0, 0)' && bodyBg !== 'transparent') {
+      return bodyBg;
+    }
+    const htmlBg = getComputedStyle(document.documentElement).backgroundColor;
+    if (htmlBg && htmlBg !== 'rgba(0, 0, 0, 0)' && htmlBg !== 'transparent') {
+      return htmlBg;
+    }
+  } catch {
+    // Fall through to the default.
+  }
+  return '#ffffff';
+}
+
+// Rasterizes the developer's actual tab — theme, loaded data, exact pixels —
+// with the batch's annotations drawn on top, and returns a PNG data URL the
+// batch POSTs to the dev server to save. This replaces re-rendering the page
+// headless, which diverged from what the developer was looking at (light
+// theme, un-settled requests, no client-only state). Returns null on any
+// failure so the server can fall back to the headless capture.
+async function captureTabScreenshot({ annotations }) {
+  let restoreImages = () => {};
+  try {
+    restoreImages = pinResponsiveImages();
+    drawAnnotationsSvg(annotations ?? []);
+    const pixelRatio =
+      Math.max(document.documentElement.scrollWidth, document.documentElement.scrollHeight) *
+        (window.devicePixelRatio || 1) >
+      MAX_CANVAS_DIMENSION
+        ? 1
+        : window.devicePixelRatio || 1;
+    const dataUrl = await toPng(document.documentElement, {
+      // Keep everything except the overlay's own UI (panels, tray, chips).
+      // The annotation SVG lives outside the overlay root, so it stays in.
+      filter: (node) =>
+        !(node instanceof Element && node.hasAttribute('data-lowdefy-feedback')),
+      pixelRatio,
+      backgroundColor: resolveBackgroundColor(),
+    });
+    if (typeof dataUrl === 'string' && dataUrl.startsWith('data:image/png')) {
+      return dataUrl;
+    }
+    return null;
+  } catch {
+    return null;
+  } finally {
+    try {
+      restoreImages();
+      document.getElementById('lowdefy-feedback-annotations-svg')?.remove();
+    } catch {
+      // Never let cleanup break the send flow.
+    }
+  }
+}
+
+export default captureTabScreenshot;

package/client/feedback/copyToClipboard.js

@@ -0,0 +1,45 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// navigator.clipboard needs a secure context — localhost qualifies, so the
+// async API is the normal path in dev. The execCommand fallback covers
+// non-localhost LAN dev hosts (http://192.168...) where it does not.
+async function copyToClipboard({ text }) {
+  try {
+    if (window.navigator?.clipboard?.writeText) {
+      await window.navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Fall through to the legacy path.
+  }
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('data-lowdefy-feedback', '');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+export default copyToClipboard;

package/client/feedback/drawAnnotationsSvg.js

@@ -0,0 +1,119 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// Draws a batch's annotations (element outlines with index labels, plus the
+// drawn rect/arrow/freehand shapes) as an SVG layer appended to document.body,
+// id "lowdefy-feedback-annotations-svg" — callers remove it by id when done.
+//
+// Shared by two capture paths, so it MUST stay fully self-contained (no outer
+// imports or closures): captureTabScreenshot.js calls it directly in the
+// developer's tab, and captureAnnotatedScreenshot.js passes it to Playwright's
+// page.evaluate, which serializes the function source into the headless page.
+//
+// Geometry is viewport-relative at the recorded scroll offset. The layer is
+// positioned absolute at the CURRENT scroll offset (document coordinates
+// covering the visible viewport box), which lands the shapes correctly both in
+// a full-document rasterization (in-tab) and in a viewport screenshot after
+// scrolling to the recorded offset (headless).
+function drawAnnotationsSvg(annotations) {
+  const NS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(NS, 'svg');
+  svg.setAttribute('id', 'lowdefy-feedback-annotations-svg');
+  svg.setAttribute(
+    'style',
+    `position:absolute;left:${window.scrollX}px;top:${window.scrollY}px;` +
+      `width:${window.innerWidth}px;height:${window.innerHeight}px;` +
+      'pointer-events:none;z-index:2147483000;'
+  );
+  const defs = document.createElementNS(NS, 'defs');
+  const marker = document.createElementNS(NS, 'marker');
+  marker.setAttribute('id', 'ldf-annotation-arrowhead');
+  marker.setAttribute('markerWidth', '10');
+  marker.setAttribute('markerHeight', '8');
+  marker.setAttribute('refX', '9');
+  marker.setAttribute('refY', '4');
+  marker.setAttribute('orient', 'auto');
+  const head = document.createElementNS(NS, 'polygon');
+  head.setAttribute('points', '0 0, 10 4, 0 8');
+  head.setAttribute('fill', '#ff4785');
+  marker.appendChild(head);
+  defs.appendChild(marker);
+  svg.appendChild(defs);
+
+  const stroke = '#ff4785';
+  annotations.forEach((annotation, index) => {
+    const rect = annotation.geometry?.elementRect;
+    if (rect) {
+      const outline = document.createElementNS(NS, 'rect');
+      outline.setAttribute('x', rect.x);
+      outline.setAttribute('y', rect.y);
+      outline.setAttribute('width', rect.width);
+      outline.setAttribute('height', rect.height);
+      outline.setAttribute('fill', 'rgba(255,71,133,0.08)');
+      outline.setAttribute('stroke', stroke);
+      outline.setAttribute('stroke-width', '2');
+      svg.appendChild(outline);
+      const label = document.createElementNS(NS, 'text');
+      label.setAttribute('x', rect.x);
+      label.setAttribute('y', Math.max(12, rect.y - 6));
+      label.setAttribute('fill', stroke);
+      label.setAttribute('font-size', '12');
+      label.setAttribute('font-family', 'system-ui, sans-serif');
+      label.setAttribute('font-weight', '600');
+      label.textContent = `${index + 1}`;
+      svg.appendChild(label);
+    }
+    (annotation.geometry?.shapes ?? []).forEach((shape) => {
+      if (shape.type === 'rect' && shape.points?.length >= 2) {
+        const [a, b] = shape.points;
+        const el = document.createElementNS(NS, 'rect');
+        el.setAttribute('x', Math.min(a.x, b.x));
+        el.setAttribute('y', Math.min(a.y, b.y));
+        el.setAttribute('width', Math.abs(b.x - a.x));
+        el.setAttribute('height', Math.abs(b.y - a.y));
+        el.setAttribute('fill', 'rgba(255,71,133,0.08)');
+        el.setAttribute('stroke', stroke);
+        el.setAttribute('stroke-width', '2.5');
+        svg.appendChild(el);
+      }
+      if (shape.type === 'arrow' && shape.points?.length >= 2) {
+        const [tail, headPoint] = shape.points;
+        const el = document.createElementNS(NS, 'line');
+        el.setAttribute('x1', tail.x);
+        el.setAttribute('y1', tail.y);
+        el.setAttribute('x2', headPoint.x);
+        el.setAttribute('y2', headPoint.y);
+        el.setAttribute('stroke', stroke);
+        el.setAttribute('stroke-width', '2.5');
+        el.setAttribute('marker-end', 'url(#ldf-annotation-arrowhead)');
+        svg.appendChild(el);
+      }
+      if (shape.type === 'freehand' && shape.points?.length >= 2) {
+        const el = document.createElementNS(NS, 'polyline');
+        el.setAttribute('points', shape.points.map((p) => `${p.x},${p.y}`).join(' '));
+        el.setAttribute('fill', 'none');
+        el.setAttribute('stroke', stroke);
+        el.setAttribute('stroke-width', '2.5');
+        el.setAttribute('stroke-linejoin', 'round');
+        el.setAttribute('stroke-linecap', 'round');
+        svg.appendChild(el);
+      }
+    });
+  });
+  document.body.appendChild(svg);
+}
+
+export default drawAnnotationsSvg;

package/client/feedback/elementInspect.js

@@ -0,0 +1,99 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// Pure DOM-reading helpers for the feedback overlay's "pick a block" mode.
+// Blocks render as id="bl-{blockId}" (skeletons use "s-bl-" and must NOT
+// match — the "^=" prefix selector already excludes them since "s-bl-..."
+// starts with "s-", not "bl-").
+
+const BLOCK_ID_PREFIX = 'bl-';
+const BLOCK_SELECTOR = `[id^="${BLOCK_ID_PREFIX}"]`;
+const FEEDBACK_ROOT_SELECTOR = '[data-lowdefy-feedback]';
+const MAX_TEXT_LENGTH = 120;
+const MAX_CLASS_LENGTH = 200;
+
+function isInsideFeedbackOverlay(el) {
+  if (!(el instanceof Element)) {
+    return false;
+  }
+  return Boolean(el.closest(FEEDBACK_ROOT_SELECTOR));
+}
+
+function stripBlockId(blockEl) {
+  return blockEl.id.slice(BLOCK_ID_PREFIX.length);
+}
+
+// Nearest ancestor block element (or the element itself), ignoring the
+// feedback overlay's own DOM so pointing at the overlay never resolves to an
+// app block.
+function nearestBlock(el) {
+  if (!(el instanceof Element) || isInsideFeedbackOverlay(el)) {
+    return null;
+  }
+  const blockEl = el.closest(BLOCK_SELECTOR);
+  if (!blockEl) {
+    return null;
+  }
+  return stripBlockId(blockEl);
+}
+
+// All bl- ancestors, nearest to outermost, prefix stripped.
+function blockAncestorChain(el) {
+  if (!(el instanceof Element) || isInsideFeedbackOverlay(el)) {
+    return [];
+  }
+  const chain = [];
+  let current = el.closest(BLOCK_SELECTOR);
+  while (current) {
+    chain.push(stripBlockId(current));
+    current = current.parentElement ? current.parentElement.closest(BLOCK_SELECTOR) : null;
+  }
+  return chain;
+}
+
+function describeElement(el) {
+  if (!(el instanceof Element)) {
+    return { tag: null, classes: null, text: null };
+  }
+
+  let classes = null;
+  try {
+    classes = typeof el.className === 'string' ? el.className : null;
+  } catch {
+    classes = null;
+  }
+  if (classes && classes.length > MAX_CLASS_LENGTH) {
+    classes = `${classes.slice(0, MAX_CLASS_LENGTH)}…`;
+  }
+
+  let text = '';
+  try {
+    text = el.textContent ? el.textContent.trim() : '';
+  } catch {
+    text = '';
+  }
+  if (text.length > MAX_TEXT_LENGTH) {
+    text = `${text.slice(0, MAX_TEXT_LENGTH)}…`;
+  }
+
+  return {
+    tag: el.tagName ?? null,
+    classes,
+    text: text || null,
+  };
+}
+
+export { nearestBlock, blockAncestorChain, describeElement };

package/client/feedback/feedbackStyles.js

@@ -0,0 +1,301 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// Visual language: subtle dark chrome panels floating over the app, kept
+// above ErrorBar.jsx (bottom: 40px, zIndex 99999) but under nothing — this
+// overlay is the topmost thing on the page while active.
+
+const STYLE_TAG_ID = 'lowdefy-feedback-style-tag';
+
+const colors = {
+  panelBg: 'rgba(20,20,25,0.92)',
+  panelBorder: 'rgba(255,255,255,0.12)',
+  text: '#ffffff',
+  textMuted: 'rgba(255,255,255,0.6)',
+  accent: '#4f9cf9',
+  accentBg: 'rgba(79,156,249,0.08)',
+  stroke: '#ff4785',
+  strokeBg: 'rgba(255,71,133,0.08)',
+};
+
+const fontFamily =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+
+const overlayContainer = {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 2147483000,
+  fontFamily,
+  fontSize: 13,
+  color: colors.text,
+  pointerEvents: 'none',
+};
+
+const highlightBox = {
+  position: 'fixed',
+  border: `2px solid ${colors.accent}`,
+  backgroundColor: colors.accentBg,
+  borderRadius: 4,
+  pointerEvents: 'none',
+  transition: 'top 60ms ease, left 60ms ease, width 60ms ease, height 60ms ease',
+  boxSizing: 'border-box',
+};
+
+const selectedHighlightBox = {
+  ...highlightBox,
+  border: `2px solid ${colors.stroke}`,
+  backgroundColor: colors.strokeBg,
+  transition: 'none',
+};
+
+const labelChip = {
+  position: 'absolute',
+  top: -22,
+  left: -2,
+  backgroundColor: colors.accent,
+  color: '#fff',
+  fontSize: 11,
+  lineHeight: '16px',
+  padding: '2px 6px',
+  borderRadius: 4,
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none',
+};
+
+const selectedLabelChip = {
+  ...labelChip,
+  backgroundColor: colors.stroke,
+};
+
+const panelBase = {
+  position: 'fixed',
+  width: 320,
+  backgroundColor: colors.panelBg,
+  border: `1px solid ${colors.panelBorder}`,
+  borderRadius: 8,
+  boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+  padding: 14,
+  boxSizing: 'border-box',
+  pointerEvents: 'auto',
+};
+
+const annotatingPanel = {
+  ...panelBase,
+  bottom: 40,
+  right: 16,
+};
+
+const reviewTray = {
+  ...panelBase,
+  bottom: 40,
+  left: 16,
+  width: 300,
+  maxHeight: '60vh',
+  overflowY: 'auto',
+};
+
+const sentBanner = {
+  ...panelBase,
+  bottom: 40,
+  right: 16,
+  textAlign: 'center',
+  color: '#7ee787',
+  fontWeight: 600,
+};
+
+const panelHeading = {
+  fontSize: 12,
+  fontWeight: 600,
+  marginBottom: 8,
+  color: colors.textMuted,
+  textTransform: 'uppercase',
+  letterSpacing: '0.04em',
+};
+
+const descriptorRow = {
+  fontSize: 12,
+  color: colors.textMuted,
+  marginBottom: 10,
+  wordBreak: 'break-word',
+};
+
+const textareaStyle = {
+  width: '100%',
+  minHeight: 72,
+  resize: 'vertical',
+  backgroundColor: 'rgba(255,255,255,0.06)',
+  border: `1px solid ${colors.panelBorder}`,
+  borderRadius: 6,
+  color: colors.text,
+  fontFamily,
+  fontSize: 13,
+  padding: 8,
+  boxSizing: 'border-box',
+  marginBottom: 10,
+};
+
+const toolRow = {
+  display: 'flex',
+  gap: 6,
+  marginBottom: 10,
+};
+
+function toolButtonStyle(active) {
+  return {
+    flex: 1,
+    padding: '6px 0',
+    borderRadius: 6,
+    border: `1px solid ${active ? colors.accent : colors.panelBorder}`,
+    backgroundColor: active ? colors.accentBg : 'rgba(255,255,255,0.04)',
+    color: colors.text,
+    cursor: 'pointer',
+    fontSize: 12,
+  };
+}
+
+const buttonRow = {
+  display: 'flex',
+  gap: 8,
+  justifyContent: 'flex-end',
+  flexWrap: 'wrap',
+};
+
+const primaryButton = {
+  padding: '6px 14px',
+  borderRadius: 6,
+  border: 'none',
+  backgroundColor: colors.accent,
+  color: '#fff',
+  cursor: 'pointer',
+  fontSize: 12,
+  fontWeight: 600,
+};
+
+const secondaryButton = {
+  padding: '6px 14px',
+  borderRadius: 6,
+  border: `1px solid ${colors.panelBorder}`,
+  backgroundColor: 'transparent',
+  color: colors.textMuted,
+  cursor: 'pointer',
+  fontSize: 12,
+};
+
+const dangerButton = {
+  ...secondaryButton,
+  color: '#ff8080',
+};
+
+const reviewItem = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  gap: 8,
+  padding: '8px 0',
+  borderBottom: `1px solid ${colors.panelBorder}`,
+  fontSize: 12,
+};
+
+const reviewItemRemove = {
+  background: 'none',
+  border: 'none',
+  color: colors.textMuted,
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: 1,
+  padding: 0,
+};
+
+const consoleCountRow = {
+  fontSize: 11,
+  color: colors.textMuted,
+  margin: '10px 0',
+};
+
+const errorRow = {
+  fontSize: 11,
+  color: '#ff8080',
+  marginBottom: 8,
+};
+
+const svgLayer = {
+  position: 'fixed',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+};
+
+// A few rules inline styles can't express: forcing cursor over arbitrary app
+// descendants during pick/draw modes and a placeholder color. The arrowhead
+// SVG marker is defined inline in the overlay's <defs> instead — no
+// stylesheet needed for that.
+function injectFeedbackStyleTag() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_TAG_ID)) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = STYLE_TAG_ID;
+  style.textContent = `
+    .lowdefy-feedback-picking, .lowdefy-feedback-picking * {
+      cursor: crosshair !important;
+    }
+    .lowdefy-feedback-drawing, .lowdefy-feedback-drawing * {
+      cursor: crosshair !important;
+    }
+    [data-lowdefy-feedback] textarea::placeholder {
+      color: rgba(255,255,255,0.4);
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function removeFeedbackStyleTag() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const existing = document.getElementById(STYLE_TAG_ID);
+  if (existing) {
+    existing.remove();
+  }
+}
+
+export {
+  colors,
+  overlayContainer,
+  highlightBox,
+  selectedHighlightBox,
+  labelChip,
+  selectedLabelChip,
+  annotatingPanel,
+  reviewTray,
+  sentBanner,
+  panelHeading,
+  descriptorRow,
+  textareaStyle,
+  toolRow,
+  toolButtonStyle,
+  buttonRow,
+  primaryButton,
+  secondaryButton,
+  dangerButton,
+  reviewItem,
+  reviewItemRemove,
+  consoleCountRow,
+  errorRow,
+  svgLayer,
+  injectFeedbackStyleTag,
+  removeFeedbackStyleTag,
+};