@runalabs/rill-cli 0.1.17 → 0.1.19

package/dist/cli.js

@@ -15799,7 +15799,8 @@ var interactionReportFields = {
   sideEffects: external_exports.array(sideEffectSchema).max(30).optional(),
   cleanup: external_exports.literal("not_attempted").optional()
 };
-var cloudSubmission = external_exports.object({ ...interactionFields, id: external_exports.string().uuid(), url: cloudRunTarget, prompt: external_exports.string().trim().min(1).max(2e3), expectation: external_exports.string().trim().min(1).max(1e3).optional(), account: external_exports.string().regex(/^[a-z0-9-]{1,60}$/).optional() }).strict();
+var cloudRunPrompt = external_exports.string().min(1).max(2e3).refine((value) => Boolean(value.trim()), "Describe what you want Rill to do.");
+var cloudSubmission = external_exports.object({ ...interactionFields, id: external_exports.string().uuid(), url: cloudRunTarget, prompt: cloudRunPrompt, expectation: external_exports.string().trim().min(1).max(1e3).optional(), account: external_exports.string().regex(/^[a-z0-9-]{1,60}$/).optional() }).strict();
 var siteAccountSchema = external_exports.object({
   name: external_exports.string().regex(/^[a-z0-9-]{1,60}$/),
   origin: publicTarget.refine((v) => new URL(v).protocol === "https:" && new URL(v).origin === v, "Use an exact HTTPS origin."),
@@ -15853,15 +15854,71 @@ var agentOutcomeSchema = external_exports.object({
   evidence: external_exports.string().max(1e3)
 }).strict();
 
+// ../recorder/src/collaborator-pointer.ts
+var collaboratorPointerSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="17.3" height="17.3" viewBox="-0.75 -0.75 17.3 17.3">
+  <!-- Hotspot is (0, 0) in user units: 0.75px right and 0.75px down from the SVG's top-left corner. -->
+  <defs>
+    <linearGradient id="rill-pointer-fill" x1="0" y1="0" x2=".6" y2="1">
+      <stop offset="0" style="stop-color: var(--rill-cursor-accent-light, #8f91f5)"/>
+      <stop offset=".55" style="stop-color: var(--rill-cursor-accent, #6366f1)"/>
+    </linearGradient>
+  </defs>
+  <path d="M0 0L4.1 14.9Q4.5 16.5 5.5 15.2L8.8 8.8L15.2 5.5Q16.5 4.5 14.9 4.1Z" fill="url(#rill-pointer-fill)" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>`;
+var collaboratorPointerMarkup = `<span class="rill-cursor-shape">${collaboratorPointerSvg}</span><span class="rill-cursor-label">Rill</span>`;
+var collaboratorPointerStyles = `
+.rill-cursor-visual { position:absolute; left:0; top:0; width:0; height:0; --rill-cursor-accent-light:color-mix(in srgb,var(--rill-cursor-accent) 72%,#fff); }
+.rill-cursor-shape { position:absolute; left:-.75px; top:-.75px; width:17.3px; height:17.3px; }
+.rill-cursor-shape svg { display:block; width:17.3px; height:17.3px; transform-origin:.75px .75px; transition:transform 110ms ease-out; filter:drop-shadow(0 .5px 1px rgba(12,12,18,.25)) drop-shadow(0 1.5px 3px rgba(12,12,18,.14)); }
+.rill-cursor-visual.is-pressed .rill-cursor-shape svg { transform:scale(.86); transition-duration:50ms; }
+.rill-cursor-label { position:absolute; left:10px; top:15px; height:15px; padding:0 6px; display:flex; align-items:center; border-radius:8px; font:600 9px/1 system-ui,sans-serif; letter-spacing:.02em; color:#fff; white-space:nowrap; opacity:.92; background:linear-gradient(180deg,color-mix(in srgb,var(--rill-cursor-accent) 78%,#fff),var(--rill-cursor-accent)); box-shadow:0 0 0 1.25px #fff,0 1px 3px rgba(12,12,18,.18),0 0 1px 1.25px rgba(12,12,18,.1); }
+.rill-cursor-visual.label-left .rill-cursor-label { left:auto; right:4px; }
+.rill-cursor-visual.label-above .rill-cursor-label { top:auto; bottom:6px; }
+@media (prefers-reduced-motion:reduce) { .rill-cursor-shape svg { transition:none; } }
+`;
+
+// ../recorder/src/scroll-capsule.ts
+var scrollCapsuleSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="20.5" height="42.5" viewBox="0 0 20.5 42.5">
+  <!-- Capsule body is 18 x 40 at (1.25, 1.25); the white edge sits 1.25px outside it. Shown pointing down. -->
+  <defs>
+    <linearGradient id="rill-capsule-fill" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" style="stop-color: var(--rill-cursor-accent-light, #8588f4)"/>
+      <stop offset="1" style="stop-color: var(--rill-cursor-accent, #6366f1)"/>
+    </linearGradient>
+  </defs>
+  <rect x="1.25" y="1.25" width="18" height="40" rx="9" fill="url(#rill-capsule-fill)" stroke="#fff" stroke-width="2.5" paint-order="stroke"/>
+  <!-- For scrolling up, rotate this group 180deg around the capsule center (10.25, 21.25). -->
+  <g id="chevrons" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5.85 11.05Q8.85 13.85 10.25 15.25Q11.65 13.85 14.65 11.05" opacity=".32"/>
+    <path d="M5.85 19.05Q8.85 21.85 10.25 23.25Q11.65 21.85 14.65 19.05" opacity=".6"/>
+    <path d="M5.85 27.05Q8.85 29.85 10.25 31.25Q11.65 29.85 14.65 27.05" opacity=".95"/>
+  </g>
+</svg>`;
+var scrollCapsuleStyles = `
+.scroll-indicator { position:absolute; right:12.75px; bottom:10.75px; width:20.5px; height:42.5px; opacity:0; transform:translateY(4px) scale(.92); transform-origin:center; transition:opacity 180ms ease-out,transform 180ms ease-out; filter:drop-shadow(0 1px 1.5px rgba(12,12,18,.18)) drop-shadow(0 4px 5px rgba(12,12,18,.12)); --rill-cursor-accent-light:color-mix(in srgb,var(--rill-cursor-accent) 78%,#fff); }
+.scroll-label { left:auto; right:calc(100% + 7px); top:50%; transform:translateY(-50%); }
+.scroll-indicator.is-visible { opacity:1; transform:none; transition:opacity 160ms ease-out,transform 260ms cubic-bezier(.2,.9,.3,1.25); }
+.scroll-indicator svg { position:absolute; left:50%; top:50%; width:20.5px; height:42.5px; translate:-50% -50%; transform-origin:center; }
+.scroll-indicator[data-direction="right"],.scroll-indicator[data-direction="left"] { width:42.5px; height:20.5px; }
+.scroll-indicator[data-direction="right"] svg { rotate:-90deg; }
+.scroll-indicator[data-direction="left"] svg { rotate:90deg; }
+.scroll-indicator[data-direction="unknown"] #chevrons { visibility:hidden; }
+@media (prefers-reduced-motion:reduce) { .scroll-indicator,.scroll-indicator.is-visible { transform:none; transition:none; } }
+`;
+
 // ../recorder/src/cursor-overlay.ts
 function installCursorOverlay(options) {
   const scope = window;
   if (scope[options.key]) return;
   let host;
+  let scrollTimer;
+  let scrollExitTimer;
   const controller = new AbortController();
   const animations = /* @__PURE__ */ new Set();
   const cleanup = () => {
     controller.abort();
+    window.clearTimeout(scrollTimer);
+    window.clearTimeout(scrollExitTimer);
     for (const animation of animations) animation.cancel();
     host?.remove();
     delete scope[options.key];
@@ -15877,48 +15934,135 @@ function installCursorOverlay(options) {
     const style = document.createElement("style");
     style.textContent = `
       :host, * { pointer-events: none !important; }
-      .pointer { position:absolute; left:0; top:0; display:none; width:24px; height:28px; }
-      .halo { position:absolute; left:-12px; top:-12px; width:26px; height:26px; border-radius:50%; background:${options.color}; opacity:.22; }
-      svg { position:absolute; left:-2px; top:-2px; width:24px; height:28px; filter:drop-shadow(0 1px 2px #0008); }
-      .pulse { position:absolute; width:32px; height:32px; box-sizing:border-box; border:2px solid ${options.color}; border-radius:50%; }
+      ${options.pointerStyles}
+      .pointer { display:none; --rill-cursor-accent:${options.color}; }
+      ${options.scrollStyles}
+      .scroll-indicator { --rill-cursor-accent:${options.color}; }
+      .click-dot, .click-ring { position:absolute; border-radius:50%; transform:translate(-50%,-50%); }
+      .click-dot { width:5px; height:5px; background:${options.color}; box-shadow:0 0 0 1px #fff,0 0 2px rgba(0,0,0,.3); }
+      .click-ring { box-sizing:border-box; border:1px solid ${options.color}; box-shadow:0 0 0 .5px #fffc,inset 0 0 0 .5px #fffc,0 0 2px rgba(0,0,0,.25); }
     `;
     const pointer = document.createElement("div");
-    pointer.className = "pointer";
-    pointer.innerHTML = '<div class="halo"></div><svg viewBox="0 0 24 28" xmlns="http://www.w3.org/2000/svg"><path d="M3 2 L3 22 L8 17 L12 25 L16 23 L12 15 L20 15 Z" fill="white" stroke="#171717" stroke-width="1.5" stroke-linejoin="round"/></svg>';
-    root.append(style, pointer);
+    pointer.className = "pointer rill-cursor-visual";
+    pointer.innerHTML = options.pointerMarkup;
+    const scrollIndicator = document.createElement("div");
+    scrollIndicator.className = "scroll-indicator";
+    scrollIndicator.innerHTML = options.scrollMarkup + '<span class="rill-cursor-label scroll-label">Scrolling</span>';
+    const chevrons = scrollIndicator.querySelector("#chevrons");
+    root.append(style, pointer, scrollIndicator);
     document.documentElement.appendChild(host);
     const listenerOptions = { capture: true, passive: true, signal: controller.signal };
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let scrollDirection;
+    let drift;
+    const stopDrift = () => {
+      if (!drift) return;
+      animations.delete(drift);
+      drift.cancel();
+      drift = void 0;
+    };
+    const showScroll = (direction) => {
+      window.clearTimeout(scrollTimer);
+      window.clearTimeout(scrollExitTimer);
+      scrollIndicator.dataset.direction = direction;
+      chevrons.setAttribute("transform", direction === "up" ? "rotate(180 10.25 21.25)" : "");
+      scrollIndicator.classList.add("is-visible");
+      if (reducedMotion.matches || direction === "unknown") stopDrift();
+      else if (direction !== scrollDirection || !drift) {
+        stopDrift();
+        const distance = direction === "up" || direction === "left" ? -3 : 3;
+        const translate = direction === "left" || direction === "right" ? `${distance}px 0` : `0 ${distance}px`;
+        drift = scrollIndicator.animate([
+          { translate: "0 0", easing: "cubic-bezier(.4,0,.6,1)" },
+          { translate, offset: 0.65, easing: "cubic-bezier(.4,0,.2,1)" },
+          { translate: "0 0" }
+        ], { duration: 820, iterations: Infinity });
+        animations.add(drift);
+        void drift.finished.catch(() => void 0);
+      }
+      scrollDirection = direction;
+      scrollTimer = window.setTimeout(() => {
+        scrollIndicator.classList.remove("is-visible");
+        if (reducedMotion.matches) stopDrift();
+        else scrollExitTimer = window.setTimeout(stopDrift, 180);
+      }, 550);
+    };
+    reducedMotion.addEventListener("change", () => {
+      if (reducedMotion.matches) stopDrift();
+    }, { signal: controller.signal });
+    const positions = /* @__PURE__ */ new WeakMap();
+    positions.set(document, { x: window.scrollX, y: window.scrollY });
+    document.addEventListener("scroll", (event) => {
+      if (!event.isTrusted || document.hidden) return;
+      const target = event.target;
+      if (target !== document && !(target instanceof Element)) return;
+      const position = target === document ? { x: window.scrollX, y: window.scrollY } : { x: target.scrollLeft, y: target.scrollTop };
+      const previous = positions.get(target);
+      positions.set(target, position);
+      const dx = previous ? position.x - previous.x : 0;
+      const dy = previous ? position.y - previous.y : 0;
+      if (previous && !dx && !dy) return;
+      const direction = !previous ? "unknown" : Math.abs(dy) >= Math.abs(dx) ? dy > 0 ? "down" : "up" : dx > 0 ? "right" : "left";
+      showScroll(direction);
+    }, listenerOptions);
     const hide = () => {
       pointer.style.display = "none";
+      pointer.classList.remove("is-pressed");
     };
     const move = (event) => {
-      if (event.pointerType === "touch") return;
+      if (event.pointerType === "touch") return false;
       if (event.target instanceof HTMLIFrameElement || event.target instanceof HTMLFrameElement) {
         hide();
-        return;
+        return false;
       }
       pointer.style.display = "block";
       pointer.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+      pointer.classList.toggle("label-left", event.clientX > window.innerWidth - 90);
+      pointer.classList.toggle("label-above", event.clientY > window.innerHeight - 34);
+      pointer.classList.toggle("is-pressed", event.buttons !== 0);
+      return true;
+    };
+    const release = (event) => {
+      if (event.pointerType !== "touch") pointer.classList.toggle("is-pressed", event.type !== "pointercancel" && event.buttons !== 0);
     };
     document.addEventListener("pointermove", move, listenerOptions);
     document.addEventListener("pointerover", move, listenerOptions);
-    document.addEventListener("pointerdown", (event) => {
-      if (event.pointerType === "touch") return;
-      move(event);
-      const pulse = document.createElement("div");
-      pulse.className = "pulse";
-      pulse.style.left = `${event.clientX - 16}px`;
-      pulse.style.top = `${event.clientY - 16}px`;
-      root.insertBefore(pulse, pointer);
-      const animation = pulse.animate([
-        { transform: "scale(.4)", opacity: 0.9 },
-        { transform: "scale(1.8)", opacity: 0 }
-      ], { duration: 400, easing: "ease-out" });
+    document.addEventListener("pointerup", release, listenerOptions);
+    document.addEventListener("pointercancel", release, listenerOptions);
+    const animateFeedback = (element, frames, duration3, easing) => {
+      root.insertBefore(element, pointer);
+      const animation = element.animate(frames, { duration: duration3, easing });
       animations.add(animation);
       void animation.finished.catch(() => void 0).finally(() => {
         animations.delete(animation);
-        pulse.remove();
+        element.remove();
       });
+    };
+    document.addEventListener("pointerdown", (event) => {
+      if (!move(event)) return;
+      const dot = document.createElement("div");
+      dot.className = "click-dot";
+      dot.style.left = `${event.clientX}px`;
+      dot.style.top = `${event.clientY}px`;
+      animateFeedback(dot, reducedMotion.matches ? [{ opacity: 1 }, { opacity: 0 }] : [
+        { transform: "translate(-50%,-50%) scale(1)", opacity: 1, offset: 0 },
+        { transform: "translate(-50%,-50%) scale(1)", opacity: 1, offset: 0.5 },
+        { transform: "translate(-50%,-50%) scale(.3)", opacity: 0, offset: 1 }
+      ], reducedMotion.matches ? 120 : 300, "ease-in");
+      const ring = document.createElement("div");
+      ring.className = "click-ring";
+      ring.style.left = `${event.clientX}px`;
+      ring.style.top = `${event.clientY}px`;
+      if (event.button === 2) ring.style.borderStyle = "dashed";
+      if (reducedMotion.matches) {
+        ring.style.width = "26px";
+        ring.style.height = "26px";
+      }
+      animateFeedback(ring, reducedMotion.matches ? [{ opacity: 1 }, { opacity: 0 }] : [
+        { width: "4px", height: "4px", opacity: 1, offset: 0 },
+        { opacity: 1, offset: 0.4 },
+        { width: "26px", height: "26px", opacity: 0, offset: 1 }
+      ], reducedMotion.matches ? 120 : 320, "cubic-bezier(.2,.7,.2,1)");
     }, listenerOptions);
     document.addEventListener("pointerout", (event) => {
       if (!event.relatedTarget) hide();
@@ -15936,7 +16080,7 @@ async function attachCursorOverlay(page, cdp, input) {
   if (!appearance.enabled) return async () => {
   };
   const key2 = `__rillCursor_${crypto.randomUUID().replaceAll("-", "")}`;
-  const source = `(${installCursorOverlay.toString()})(${JSON.stringify({ ...appearance, key: key2 })})`;
+  const source = `(${installCursorOverlay.toString()})(${JSON.stringify({ ...appearance, key: key2, pointerMarkup: collaboratorPointerMarkup, pointerStyles: collaboratorPointerStyles, scrollMarkup: scrollCapsuleSvg, scrollStyles: scrollCapsuleStyles })})`;
   await cdp.send("Page.enable");
   const { identifier } = await cdp.send("Page.addScriptToEvaluateOnNewDocument", { source });
   let stopped = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runalabs/rill-cli",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Record, inspect, and share agent-controlled browser runs with Rill.",
   "license": "Apache-2.0",
   "repository": {