ispyx 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispyx",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Local desktop-control MCP server: lets an AI use your keyboard, mouse and screen (windows, screenshots, clicks, typing, clipboard). stdio only, Windows and macOS.",
   "type": "module",
   "main": "src/server.js",
@@ -48,6 +48,7 @@
     "hook-test": "node test/hook-life.js",
     "shutdown-test": "node test/shutdown-all.js",
     "scan-test": "node test/scan.js",
+    "laser-test": "node test/laser.js",
     "radar-multi-test": "node test/radar-multi.js",
     "scan-multi-test": "node test/scan-multi.js",
     "auth-test": "node test/auth.js",

package/src/core/panel/page.html

@@ -37,6 +37,7 @@ h2{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute
 button{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04)}
 button:hover{background:var(--fill)}
 button:active{filter:brightness(.95)}
+button:disabled{opacity:.55;cursor:default;filter:none}
 button:focus-visible,.sw input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}
 button.pri{background:var(--acc);border-color:var(--acc);color:var(--accfg);font-weight:600}
 button.pri:hover{filter:brightness(.96);background:var(--acc)}

package/src/core/server.js

@@ -101,6 +101,15 @@ function playTrail(a, z, button, opts) {
   effects.add(run);
   return stop;
 }
+/** drag: an eye beside the line fires a beam at the pointer's heels (scorch fades after a couple of seconds); the returned function ends it. */
+function playLaser(a, z) {
+  const epoch = guard.epoch;
+  let stop;
+  const stopped = new Promise((r) => { stop = r; });
+  const run = scan.laser({ x: a.sx, y: a.sy }, { x: z.sx, y: z.sy }, stopped, () => guard.epoch !== epoch).finally(() => effects.delete(run));
+  effects.add(run);
+  return stop;
+}
 /** scroll: chevrons beside the pointer while the wheel turns; the returned function ends it. */
 function playWheelCue(p, vert, horiz) {
   const epoch = guard.epoch;
@@ -594,7 +603,8 @@ server.registerTool('drag', {
     await w.sleep(40);
     w.mouseDown(b);
     guard.heldButtons.add(b);
-    const stopTrail = playTrail(a, z2, b);
+    const stopTrail = playTrail(a, z2, b, { line: false }); // start ring and end ring; the beam draws the path
+    const stopLaser = playLaser(a, z2);
     try {
       await w.sleep(40);
       await glide(z2, args, { trail: false });
@@ -603,6 +613,7 @@ server.registerTool('drag', {
       w.mouseUp(b);
       guard.heldButtons.delete(b);
       stopTrail();
+      stopLaser();
     }
   });
   return json({ ok: true, from: { x: a.sx, y: a.sy }, to: { x: z2.sx, y: z2.sy } });

package/src/effects/laser.js

@@ -0,0 +1,182 @@
+// The drag laser: an eye beside the drag line fires a thick beam at the spot just behind the pointer, as if the pointer
+// were running from it. Pure drawing into premultiplied BGRA buffers (Layer.px) and the placement rules; scan.js
+// runs it (ScanAnimation.laser). Colours stay in the ispyx green family, brighter and glassier than the flat trail.
+
+const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
+const mix = (a, b, t) => a + (b - a) * t;
+const smooth = (t) => t * t * (3 - 2 * t);
+
+export const LASER_EYE_SIZE = 112;
+export const BURN_LIFE_MS = 2000;
+export const BEAM_WIDTH = 26; // half-width in px of the full beam
+
+/**
+ * Where the eye goes: beside the line a -> b (never on it), at a random place along it and on a random side, as far
+ * from the line as the monitor `mon` {x, y, width, height} allows (up to size/2 + 190 px). Returns the eye centre.
+ */
+export function placeEye(a, b, mon, size = LASER_EYE_SIZE, rand = Math.random) {
+  const len = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+  const nx = -(b.y - a.y) / len, ny = (b.x - a.x) / len;
+  const f = 0.3 + 0.4 * rand();
+  const mx = a.x + (b.x - a.x) * f, my = a.y + (b.y - a.y) * f;
+  const half = size / 2, margin = 10;
+  const fits = (c) => c.x - half >= mon.x + margin && c.x + half <= mon.x + mon.width - margin && c.y - half >= mon.y + margin && c.y + half <= mon.y + mon.height - margin;
+  const first = rand() < 0.5 ? 1 : -1;
+  for (const d of [half + 190, half + 130, half + 80]) {
+    for (const s of [first, -first]) {
+      const c = { x: mx + nx * s * d, y: my + ny * s * d };
+      if (fits(c)) return c;
+    }
+  }
+  // no room on either side (a drag across a whole small screen): the side with more room, kept on the monitor
+  const c = { x: mx + nx * first * (half + 80), y: my + ny * first * (half + 80) };
+  return { x: clamp(c.x, mon.x + margin + half, mon.x + mon.width - margin - half), y: clamp(c.y, mon.y + margin + half, mon.y + mon.height - margin - half) };
+}
+
+/** Premultiplied "over": add colour (r, g, b) with coverage a at pixel index i. */
+function over(px, i, r, g, b, a) {
+  if (a <= 0) return;
+  const k = 1 - a;
+  px[i] = b * a + px[i] * k; px[i + 1] = g * a + px[i + 1] * k; px[i + 2] = r * a + px[i + 2] * k; px[i + 3] = a * 255 + px[i + 3] * k;
+}
+
+/** A glowing flare at (cx, cy): white core, green/cyan halo, a ring and slowly turning spikes. `w` is the beam half-width. */
+function flare(px, W, H, cx, cy, w, tMs, strength) {
+  const R = Math.ceil(w * 3.6);
+  const rot = tMs * 0.0011;
+  // cos(6 * (angle + rot)) without atan2/cos per pixel: (cos a + i sin a)^6 rotated by 6 * rot
+  const cr = Math.cos(6 * rot), sr = Math.sin(6 * rot);
+  for (let y = Math.max(0, Math.floor(cy - R)); y <= Math.min(H - 1, Math.ceil(cy + R)); y++) {
+    for (let x = Math.max(0, Math.floor(cx - R)); x <= Math.min(W - 1, Math.ceil(cx + R)); x++) {
+      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;
+      const r = Math.sqrt(dx * dx + dy * dy);
+      if (r > R) continue;
+      const i = (y * W + x) * 4;
+      const halo = Math.exp(-((r / (w * 2.1)) ** 2)) * 0.55 * strength;
+      over(px, i, 40, 235, 170, halo);
+      const ring = clamp(1 - Math.abs(r - w * 1.9) / 1.6) * 0.55 * strength;
+      over(px, i, 170, 255, 220, ring);
+      const c1 = r > 0 ? dx / r : 1, s1 = r > 0 ? dy / r : 0;
+      const c2 = c1 * c1 - s1 * s1, s2 = 2 * c1 * s1; // angle x2
+      const c6 = c2 * (c2 * c2 - s2 * s2) - s2 * (2 * c2 * s2), s6 = s2 * (c2 * c2 - s2 * s2) + c2 * (2 * c2 * s2); // x2 * x3 = x6
+      const k = Math.max(0, c6 * cr - s6 * sr);
+      const k2 = k * k, k4 = k2 * k2, k16 = k4 * k4 * k4 * k4; // k^22 = k^16 * k^4 * k^2
+      const spike = k16 * k4 * k2 * Math.exp(-r / (w * 1.5)) * 0.9 * strength;
+      over(px, i, 200, 255, 225, spike);
+      const core = Math.exp(-((r / (w * 1.05)) ** 2)) * strength;
+      over(px, i, 240, 255, 246, core);
+    }
+  }
+}
+
+/**
+ * The beam from (ax, ay) to (bx, by) with half-width `w` (0 = off): rounded ends and the same width all along, a soft green glow, an emerald body that
+ * darkens towards its rim, a white-green core, energy bands running along it, and a flare at each end.
+ * `tMs` animates the bands and the spikes.
+ */
+export function renderBeam(px, W, H, ax, ay, bx, by, w, tMs) {
+  if (w < 0.5) return;
+  const len = Math.hypot(bx - ax, by - ay) || 1;
+  const ux = (bx - ax) / len, uy = (by - ay) / len;
+  const pad = Math.ceil(w * 3.2);
+  const x0 = Math.max(0, Math.floor(Math.min(ax, bx) - pad)), x1 = Math.min(W - 1, Math.ceil(Math.max(ax, bx) + pad));
+  const y0 = Math.max(0, Math.floor(Math.min(ay, by) - pad)), y1 = Math.min(H - 1, Math.ceil(Math.max(ay, by) + pad));
+  const reach2 = (w * 3.1) ** 2;
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0; x <= x1; x++) {
+      const dx = x + 0.5 - ax, dy = y + 0.5 - ay;
+      const s = clamp(dx * ux + dy * uy, 0, len); // rounded ends: distance to the segment
+      const ex = dx - s * ux, ey = dy - s * uy;
+      const d2 = ex * ex + ey * ey;
+      if (d2 > reach2) continue; // most of a diagonal beam's box: no square root, nothing drawn
+      const d = Math.sqrt(d2);
+      const i = (y * W + x) * 4;
+      const hw = w; // the same width along its whole length
+      over(px, i, 20, 200, 120, Math.exp(-((d / (hw * 2.3)) ** 2)) * 0.5); // outer glow
+      const body = clamp(hw - d + 0.5);
+      if (body > 0) {
+        const band = 0.86 + 0.14 * Math.sin(s * 0.11 - tMs * 0.045);
+        const e = clamp(d / hw);
+        const k = e * e; // 0 in the middle, 1 on the rim
+        over(px, i, mix(70, 8, k) * band, mix(255, 130, k) * band, mix(150, 80, k) * band, body * 0.97);
+        const core = clamp(hw * 0.52 - d + 0.5) * (0.9 + 0.1 * band);
+        over(px, i, 238, 255, 244, core);
+      }
+    }
+  }
+  flare(px, W, H, ax, ay, w, tMs, 0.85);
+  flare(px, W, H, bx, by, w, tMs + 400, 1);
+}
+
+/**
+ * A thick line piece (a capsule); the stronger alpha wins where pieces overlap (so a burn trail has no beads at its
+ * joints). Each pixel of the bounding box is visited once and shaded by its distance to the segment: the burn
+ * redraws every piece every frame, and stamping a disc at each pixel along the line cost ~30x more.
+ */
+export function stroke(px, W, H, x0, y0, x1, y1, radius, rgb, alpha) {
+  const R = radius + 1;
+  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - R)), xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));
+  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - R)), yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));
+  const dx = x1 - x0, dy = y1 - y0, len2 = dx * dx + dy * dy;
+  const b = rgb[2], g = rgb[1], r = rgb[0];
+  for (let y = ya; y <= yb; y++) {
+    const py = y + 0.5 - y0;
+    for (let x = xa; x <= xb; x++) {
+      const qx = x + 0.5 - x0;
+      const u = len2 > 0 ? Math.min(1, Math.max(0, (qx * dx + py * dy) / len2)) : 0;
+      const ex = qx - u * dx, ey = py - u * dy;
+      const a = clamp(radius + 0.5 - Math.sqrt(ex * ex + ey * ey)) * alpha;
+      if (a <= 0) continue;
+      const i = (y * W + x) * 4;
+      if (a * 255 <= px[i + 3]) continue;
+      px[i] = b * a; px[i + 1] = g * a; px[i + 2] = r * a; px[i + 3] = a * 255;
+    }
+  }
+}
+
+/**
+ * The scorch the beam leaves: pts = [{ x, y, t }] (buffer pixels, ms stamps), now = ms. Fresh pieces glow lime-white,
+ * cool to a charred dark line with a faint green ember rim, and disappear after BURN_LIFE_MS.
+ */
+export function renderBurn(px, W, H, pts, now) {
+  for (let pass = 0; pass < 3; pass++) {
+    for (let k = 1; k < pts.length; k++) {
+      const age = now - pts[k].t;
+      const fade = Math.pow(clamp(1 - age / BURN_LIFE_MS), 0.8);
+      if (fade <= 0.02) continue;
+      const A = pts[k - 1], B = pts[k];
+      if (pass === 0) stroke(px, W, H, A.x, A.y, B.x, B.y, 13, [22, 120, 66], 0.3 * fade);
+      else if (pass === 1) stroke(px, W, H, A.x, A.y, B.x, B.y, 9, [10, 16, 13], 0.82 * fade);
+      else {
+        const heat = clamp(1 - age / 320);
+        if (heat <= 0.03) continue;
+        stroke(px, W, H, A.x, A.y, B.x, B.y, 3.5 + 5 * heat, [mix(90, 235, heat), 255, mix(130, 215, heat)], heat * 0.95);
+      }
+    }
+  }
+}
+
+/** Sparks flying off the impact point: [{ x, y, vx, vy, t0, life }] (px, px/ms, ms). Returns the ones still alive. */
+export function renderSparks(px, W, H, sparks, now) {
+  const alive = [];
+  for (const s of sparks) {
+    const age = now - s.t0;
+    if (age >= s.life) continue;
+    alive.push(s);
+    const f = 1 - age / s.life;
+    const x = s.x + s.vx * age, y = s.y + s.vy * age + 0.0005 * age * age;
+    const px0 = x - s.vx * 26 * f, py0 = y - s.vy * 26 * f;
+    stroke(px, W, H, px0, py0, x, y, 0.9 + 1.2 * f, [210, 255, 225], f);
+  }
+  return alive;
+}
+
+/** New sparks at (x, y), flying away from the beam source (ax, ay) in a fan. */
+export function spawnSparks(list, x, y, ax, ay, now, count = 2, rand = Math.random) {
+  const base = Math.atan2(y - ay, x - ax);
+  for (let n = 0; n < count; n++) {
+    const ang = base + (rand() - 0.5) * 2.4;
+    const v = 0.12 + rand() * 0.34;
+    list.push({ x, y, vx: Math.cos(ang) * v, vy: Math.sin(ang) * v, t0: now, life: 260 + rand() * 260 });
+  }
+}

package/src/effects/scan.js

@@ -2,6 +2,7 @@
 // a glowing green scan line that sweeps the region from top to bottom. Two click-through, per-pixel-alpha windows;
 // pixels are drawn in software into DIB sections, so nothing here depends on GDI+.
 import platform from '../platform/index.js';
+import { LASER_EYE_SIZE, BEAM_WIDTH, BURN_LIFE_MS, placeEye, renderBeam, renderBurn, renderSparks, spawnSparks } from './laser.js';
 
 const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
 const mix = (a, b, t) => a + (b - a) * t;
@@ -310,7 +311,7 @@ export class ScanAnimation {
    * fading with age. When `stopped` resolves (button released) the trail fades out and rings mark the end.
    * `bounds` {left, top, right, bottom}: where the drag can go. Never throws.
    */
-  async trail(start, bounds, stopped, cancelled = () => false, button = 'left', { marker: showMarker = true, life = TRAIL_LIFE_MS, ring = true } = {}) {
+  async trail(start, bounds, stopped, cancelled = () => false, button = 'left', { marker: showMarker = true, life = TRAIL_LIFE_MS, ring = true, line = true } = {}) {
     if (!this.enabled) return;
     let layer = null;
     let ended = false;
@@ -338,7 +339,7 @@ export class ScanAnimation {
         }
         layer.px.fill(0);
         const fade = endAt ? 1 - clamp((t - endAt) / TRAIL_FADE_MS) : 1;
-        for (let pass = 0; pass < 2; pass++) {
+        for (let pass = 0; pass < (line ? 2 : 0); pass++) {
           for (let k = 1; k < pts.length; k++) {
             const age = (endAt ? Math.min(t, endAt) : t) - pts[k].t;
             const a = clamp(1 - age / life) * fade;
@@ -370,6 +371,97 @@ export class ScanAnimation {
     }
   }
 
+  /**
+   * drag: an eye opens beside the drag line (random side, random place along it) and fires a thick beam at the spot just
+   * behind the pointer, as if the pointer were running from it; the beam leaves a scorch that fades after a couple of
+   * seconds. Runs until the beam and the scorch are gone. `start`/`end` are desktop pixels. Never throws.
+   */
+  async laser(start, end, stopped, cancelled = () => false) {
+    if (!this.enabled || Math.hypot(end.x - start.x, end.y - start.y) < 80) return;
+    const FIRE = 260, LAG = 130, HOLD = 260, MIN_BEAM = 520, CUT = 180, EYE_CLOSE = 300;
+    let beam = null, eye = null;
+    let ended = false;
+    stopped.then(() => { ended = true; });
+    try {
+      platform.ensurePump();
+      const v = platform.virtualScreen();
+      const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+      const mon = platform.listMonitors().find((q) => mid.x >= q.left && mid.x < q.left + q.width && mid.y >= q.top && mid.y < q.top + q.height);
+      const area = mon ? { x: mon.left, y: mon.top, width: mon.width, height: mon.height } : v;
+      const size = LASER_EYE_SIZE;
+      const ec = placeEye(start, end, area, size);
+      const ex = Math.round(ec.x - size / 2), ey = Math.round(ec.y - size / 2);
+      const pad = 150;
+      const left = Math.max(v.x, Math.floor(Math.min(start.x, end.x, ex) - pad)), top = Math.max(v.y, Math.floor(Math.min(start.y, end.y, ey) - pad));
+      const right = Math.min(v.x + v.width, Math.ceil(Math.max(start.x, end.x, ex + size) + pad)), bottom = Math.min(v.y + v.height, Math.ceil(Math.max(start.y, end.y, ey + size) + pad));
+      beam = new platform.Layer(Math.max(40, right - left), Math.max(40, bottom - top));
+      eye = new platform.Layer(size, size);
+      const samples = [{ x: start.x, y: start.y, t: 0 }]; // where the pointer was, and when
+      const burn = [];
+      let sparks = [];
+      let endAt = 0, cutAt = 0, tau = 0, lastT = 0, lastBurn = 0, last = { x: start.x, y: start.y };
+      const pointAt = (u) => {
+        for (let k = 1; k < samples.length; k++) {
+          if (samples[k].t >= u) {
+            const a = samples[k - 1], b = samples[k];
+            const f = b.t > a.t ? (u - a.t) / (b.t - a.t) : 1;
+            return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+          }
+        }
+        return { x: samples[samples.length - 1].x, y: samples[samples.length - 1].y };
+      };
+      const t0 = performance.now();
+      for (;;) {
+        const tf = performance.now(), t = tf - t0;
+        if (cancelled()) break;
+        if (!endAt) {
+          const c = platform.cursorPos();
+          if (Math.hypot(c.x - samples[samples.length - 1].x, c.y - samples[samples.length - 1].y) >= 1) samples.push({ x: c.x, y: c.y, t });
+          if (ended) { endAt = t; cutAt = Math.max(endAt + HOLD, FIRE + MIN_BEAM); samples.push({ x: samples[samples.length - 1].x, y: samples[samples.length - 1].y, t }); }
+        }
+        const eyeEnd = cutAt ? cutAt + CUT + EYE_CLOSE : Infinity;
+        const firing = t >= FIRE && !(cutAt && t >= cutAt + CUT);
+        const grow = ease(clamp((t - FIRE) / 120));
+        const shrink = cutAt ? 1 - ease(clamp((t - cutAt) / CUT)) : 1;
+        const w = BEAM_WIDTH * grow * shrink;
+        // the beam's end follows the pointer's path about LAG ms behind it, catching up fast from the start point
+        if (t >= FIRE) tau = Math.min(tau + (t - lastT) * 2.2, Math.max(0, t - LAG), samples[samples.length - 1].t);
+        lastT = t;
+        const T = t >= FIRE ? pointAt(tau) : samples[samples.length - 1];
+        const open = t < FIRE ? ease(t / FIRE) : cutAt && t >= cutAt + CUT ? 1 - ease(clamp((t - cutAt - CUT) / EYE_CLOSE)) : 1;
+        // the pupil looks at the beam's end
+        const dx = T.x - ec.x, dy = T.y - ec.y, dl = Math.hypot(dx, dy) || 1;
+        const gx = (dx / dl) * 0.95, gy = (dy / dl) * 0.95;
+        renderEye(eye.px, size, open, gx, gy, t < FIRE ? clamp((t - 70) / (FIRE - 70)) : 1);
+        const pp = pupilPos(size, gx, gy);
+        // the eye trembles while it fires (the beam starts at the shaken pupil)
+        const sh = firing ? 4.5 * grow * shrink : 0;
+        const sx = (Math.random() - 0.5) * 2 * sh, sy = (Math.random() - 0.5) * 2 * sh;
+        beam.px.fill(0);
+        if (firing && w >= 1 && Math.hypot(T.x - last.x, T.y - last.y) >= 1) {
+          burn.push({ x: T.x - left, y: T.y - top, t });
+          lastBurn = t;
+          last = { x: T.x, y: T.y };
+          spawnSparks(sparks, T.x - left, T.y - top, ex + pp.x - left, ey + pp.y - top, t);
+        }
+        renderBurn(beam.px, beam.width, beam.height, burn, t);
+        if (firing && w >= 1) renderBeam(beam.px, beam.width, beam.height, ex + sx + pp.x - left, ey + sy + pp.y - top, T.x - left, T.y - top, w, t);
+        sparks = renderSparks(beam.px, beam.width, beam.height, sparks, t);
+        beam.present(left, top, 255);
+        if (t < eyeEnd) eye.present(Math.round(ex + sx), Math.round(ey + sy), 255 * open);
+        else if (eye.shown) eye.present(ex, ey, 0, 1);
+        if (t >= eyeEnd && t - lastBurn > BURN_LIFE_MS && !sparks.length) break;
+        await new Promise((r) => setTimeout(r, Math.max(1, 16 - (performance.now() - tf))));
+      }
+    } catch (e) {
+      process.stderr.write(`ispyx: laser effect failed (${e.message})
+`);
+    } finally {
+      beam?.destroy();
+      eye?.destroy();
+    }
+  }
+
   /**
    * scroll: chevrons beside the pointer travel in the scroll direction while the wheel turns (until `stopped`
    * resolves, at least 380 ms, then a short fade). dirV: +1 up / -1 down / 0, dirH: +1 right / -1 left / 0. Never throws.