@runalabs/rill-cli 0.1.16 → 0.1.18

package/README.md

@@ -370,6 +370,8 @@ Progress runs through `uploading` → `queued` → `encoding` → `processing`
 
 Run `rill connect --email you@example.com` to authorize account access or keep your anonymous recordings. Open the displayed link, sign in, and enter the code yourself. Approval allows creation and reading of your existing and new recordings for 90 days, with automatic renewal of one-hour access tokens. Revoke the connection in Settings → Agent access to stop access and renewal. Deletion and changes to existing sharing settings are not included.
 
+Browser approval does not finish the handshake: the CLI must collect and save credentials. With `--no-wait`, keep polling the returned `connect status <authorizationId>` command until `authenticated`. Starting with 0.1.17, the CLI checks the server even after its local approval deadline. Approval codes expire after ten minutes; successful approval starts a separate 30-minute collection window, with a 60-second lost-response retry window after first collection. If collection expires, run `connect --email` again with the same account to request fresh human approval while preserving the registration and recordings. Do not delete saved credentials to recover. Auth requests include the CLI version for consent-aware diagnostics.
+
 Use `rill record list` to list accessible recordings and `rill inspect <recording-id>` for private recording details. `rill inspect <share-url>` continues to work without account access. The existing `rill login` and `RILL_TOKEN` flows remain supported. Local credential storage requires macOS Keychain, Linux Secret Service, or Windows current-user DPAPI.
 
 ### Check the connected account

package/dist/cli.js

@@ -127,6 +127,11 @@ function browserAttachment(cdpUrl, tabId) {
   };
 }
 
+// src/version.ts
+import { createRequire } from "module";
+var packageJson = createRequire(import.meta.url)("../package.json");
+var CLI_VERSION = packageJson.version;
+
 // src/agent-session.ts
 var JWT_GRANT = "urn:ietf:params:oauth:grant-type:jwt-bearer";
 var CLAIM_GRANT = "urn:workos:agent-auth:grant-type:claim";
@@ -150,7 +155,7 @@ async function request(apiUrl, path, body, form = false) {
     method: "POST",
     redirect: "error",
     signal: AbortSignal.timeout(15e3),
-    headers: { "Content-Type": form ? "application/x-www-form-urlencoded" : "application/json" },
+    headers: { "Content-Type": form ? "application/x-www-form-urlencoded" : "application/json", "X-Rill-CLI-Version": CLI_VERSION },
     body: form ? new URLSearchParams(Object.entries(body).map(([key2, value2]) => [key2, String(value2)])) : JSON.stringify(body)
   });
   const value = await response.json();
@@ -246,6 +251,12 @@ async function connectAgent(apiUrl, email3, options = {}) {
 async function beginConnection(apiUrl, email3) {
   if (process.env.RILL_TOKEN) throw new Error("Unset RILL_TOKEN before connecting a local identity.");
   let saved = parseAuthorization(await loadStoredCredential(apiUrl));
+  if (saved?.connection?.status === "pending" && saved.connection.expiresAt <= Date.now()) {
+    if (saved.connection.email !== email3) throw new Error("Use the original account to finish or recover this connection.");
+    const result = await pollSavedConnection(apiUrl, saved.connection.id);
+    if (result.status !== "expired") return result;
+    saved = parseAuthorization(await loadStoredCredential(apiUrl));
+  }
   if (saved?.connection?.status === "pending" && saved.connection.expiresAt > Date.now()) {
     if (saved.connection.email !== email3) throw new Error("A connection for another email is pending. Let it expire before starting a different connection.");
     process.stderr.write(`Open ${saved.connection.verificationUri}
@@ -259,6 +270,22 @@ Sign in as ${email3} and enter ${saved.connection.userCode}. Approve only the re
       const result = await request(apiUrl, "/agent/identity/claim", { claim_token: saved.claimToken, email: email3 });
       claim = result.claim_attempt;
     } catch (error51) {
+      if (error51 instanceof AgentAuthError && error51.code === "claim_already_approved") {
+        saved.connection ??= {
+          id: randomBytes(16).toString("hex"),
+          email: email3,
+          verificationUri: "",
+          userCode: "",
+          expiresAt: Date.now(),
+          interval: 5,
+          nextPollAt: 0,
+          status: "pending"
+        };
+        saved.connection.status = "pending";
+        saved.connection.nextPollAt = 0;
+        await save(apiUrl, saved);
+        return pollSavedConnection(apiUrl, saved.connection.id);
+      }
       if (!(error51 instanceof AgentAuthError) || error51.code !== "claim_expired") throw error51;
     }
   }
@@ -309,11 +336,6 @@ async function pollSavedConnection(apiUrl, authorizationId) {
   if (!saved?.connection || saved.connection.id !== authorizationId) throw new AgentAuthError("authorization_not_found", "No matching saved connection for this API URL. Use the latest connect response.");
   const connection = saved.connection;
   if (connection.status !== "pending") return connectionView(apiUrl, saved);
-  if (Date.now() >= connection.expiresAt) {
-    connection.status = "expired";
-    await save(apiUrl, saved);
-    return connectionView(apiUrl, saved);
-  }
   if (Date.now() < connection.nextPollAt) return connectionView(apiUrl, saved);
   connection.nextPollAt = Date.now() + connection.interval * 1e3;
   await save(apiUrl, saved);
@@ -322,7 +344,7 @@ async function pollSavedConnection(apiUrl, authorizationId) {
     saved = withTokens({ version: 1, anonymous: false, connection: { ...connection, status: "authenticated", userCode: "" } }, tokens);
   } catch (error51) {
     if (!(error51 instanceof AgentAuthError)) throw error51;
-    if (error51.code === "expired_token" || error51.code === "claim_expired") connection.status = "expired";
+    if (error51.code === "expired_token" || error51.code === "claim_expired" || error51.code === "claim_delivery_expired" || error51.code === "claimed_or_in_flight" && Date.now() >= connection.expiresAt) connection.status = "expired";
     else if (error51.code === "access_denied" || error51.code === "claim_revoked") connection.status = "denied";
     else if (error51.code === "slow_down") {
       connection.interval += 5;
@@ -15777,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."),
@@ -15831,15 +15854,70 @@ 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-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];
@@ -15855,48 +15933,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;
+    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();
@@ -15914,7 +16079,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;
@@ -16771,13 +16936,6 @@ async function withRunFeedback(session, start) {
 
 // src/doctor.ts
 import { spawn as spawn7 } from "child_process";
-
-// src/version.ts
-import { createRequire } from "module";
-var packageJson = createRequire(import.meta.url)("../package.json");
-var CLI_VERSION = packageJson.version;
-
-// src/doctor.ts
 var defaultDependencies = {
   platform: process.platform,
   encoding: "remote",

package/package.json

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