@treelocator/runtime 0.4.7 → 0.6.0

package/dist/mcpBridge.test.js

@@ -0,0 +1,248 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { executeBridgeCommand } from "./mcpBridge";
+import { clearConsoleEntries, installConsoleCapture } from "./consoleCapture";
+function createApiMock() {
+  return {
+    getPath: vi.fn().mockResolvedValue("path"),
+    getAncestry: vi.fn().mockResolvedValue([{
+      elementName: "button"
+    }]),
+    getPathData: vi.fn().mockResolvedValue({
+      path: "path",
+      ancestry: [{
+        elementName: "button"
+      }]
+    }),
+    getStyles: vi.fn().mockReturnValue({
+      formatted: "styles",
+      snapshot: {}
+    }),
+    getCSSRules: vi.fn().mockReturnValue({
+      properties: []
+    }),
+    getCSSReport: vi.fn().mockReturnValue("report"),
+    takeSnapshot: vi.fn().mockReturnValue({
+      snapshotId: "baseline",
+      selector: "#b",
+      index: 0,
+      takenAt: "now",
+      propertyCount: 42,
+      boundingRect: {}
+    }),
+    getSnapshotDiff: vi.fn().mockReturnValue({
+      snapshotId: "baseline",
+      selector: "#b",
+      index: 0,
+      takenAt: "now",
+      formatted: "diff",
+      changes: [],
+      boundingRectChanges: []
+    }),
+    clearSnapshot: vi.fn(),
+    help: vi.fn().mockReturnValue("help"),
+    replay: vi.fn(),
+    replayWithRecord: vi.fn().mockResolvedValue(null),
+    diff: {
+      snapshot: vi.fn().mockReturnValue([]),
+      computeDiff: vi.fn(),
+      captureDiff: vi.fn()
+    }
+  };
+}
+describe("mcpBridge executeBridgeCommand", () => {
+  test("dispatches get_path to browser API", async () => {
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "get_path", {
+      selector: "#target"
+    });
+    expect(api.getPath).toHaveBeenCalledWith("#target");
+    expect(result).toBe("path");
+  });
+  test("click uses selector + index", async () => {
+    document.body.innerHTML = `
+      <button class="target">one</button>
+      <button class="target">two</button>
+    `;
+    const buttons = Array.from(document.querySelectorAll(".target"));
+    const clickSpy = vi.fn();
+    buttons[1]?.addEventListener("click", clickSpy);
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "click", {
+      selector: ".target",
+      index: 1
+    });
+    expect(result).toEqual({
+      ok: true
+    });
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+  });
+  test("hover dispatches mouse events", async () => {
+    document.body.innerHTML = `<div id="hover-me"></div>`;
+    const element = document.getElementById("hover-me");
+    expect(element).not.toBeNull();
+    const events = [];
+    element?.addEventListener("mouseenter", () => events.push("mouseenter"));
+    element?.addEventListener("mouseover", () => events.push("mouseover"));
+    element?.addEventListener("mousemove", () => events.push("mousemove"));
+    const api = createApiMock();
+    await executeBridgeCommand(api, "hover", {
+      selector: "#hover-me"
+    });
+    expect(events).toEqual(["mouseenter", "mouseover", "mousemove"]);
+  });
+  test("type updates input value and dispatches input event", async () => {
+    document.body.innerHTML = `<input id="field" />`;
+    const input = document.getElementById("field");
+    const inputEventSpy = vi.fn();
+    input.addEventListener("input", inputEventSpy);
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "type", {
+      selector: "#field",
+      text: "hello"
+    });
+    expect(input.value).toBe("hello");
+    expect(result).toEqual({
+      value: "hello"
+    });
+    expect(inputEventSpy).toHaveBeenCalledTimes(1);
+  });
+  test("take_snapshot forwards selector + snapshotId to browser API", async () => {
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "take_snapshot", {
+      selector: "#b",
+      snapshotId: "baseline",
+      index: 2,
+      label: "before fix"
+    });
+    expect(api.takeSnapshot).toHaveBeenCalledWith("#b", "baseline", {
+      index: 2,
+      label: "before fix"
+    });
+    expect(result).toMatchObject({
+      snapshotId: "baseline"
+    });
+  });
+  test("take_snapshot rejects missing snapshotId", async () => {
+    const api = createApiMock();
+    await expect(executeBridgeCommand(api, "take_snapshot", {
+      selector: "#b"
+    })).rejects.toThrow("snapshotId is required");
+  });
+  test("get_snapshot_diff forwards snapshotId to browser API", async () => {
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "get_snapshot_diff", {
+      snapshotId: "baseline"
+    });
+    expect(api.getSnapshotDiff).toHaveBeenCalledWith("baseline");
+    expect(result).toMatchObject({
+      snapshotId: "baseline",
+      formatted: "diff"
+    });
+  });
+  test("clear_snapshot forwards snapshotId to browser API", async () => {
+    const api = createApiMock();
+    const result = await executeBridgeCommand(api, "clear_snapshot", {
+      snapshotId: "baseline"
+    });
+    expect(api.clearSnapshot).toHaveBeenCalledWith("baseline");
+    expect(result).toEqual({
+      ok: true
+    });
+  });
+  describe("execute_js", () => {
+    test("returns serialized value from async function body", async () => {
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "execute_js", {
+        code: "return 1 + 2;"
+      });
+      expect(result).toEqual({
+        type: "number",
+        value: 3
+      });
+    });
+    test("awaits returned promise", async () => {
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "execute_js", {
+        code: "return await Promise.resolve({ hello: 'world' });"
+      });
+      expect(result).toEqual({
+        type: "object",
+        value: {
+          hello: "world"
+        }
+      });
+    });
+    test("can read from the document", async () => {
+      document.body.innerHTML = `<div id="greeting">hi</div>`;
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "execute_js", {
+        code: "return document.getElementById('greeting').textContent;"
+      });
+      expect(result).toEqual({
+        type: "string",
+        value: "hi"
+      });
+    });
+    test("wraps runtime errors with stack details", async () => {
+      const api = createApiMock();
+      await expect(executeBridgeCommand(api, "execute_js", {
+        code: "throw new Error('boom');"
+      })).rejects.toThrow("boom");
+    });
+    test("rejects compile errors", async () => {
+      const api = createApiMock();
+      await expect(executeBridgeCommand(api, "execute_js", {
+        code: "return ("
+      })).rejects.toThrow();
+    });
+    test("rejects empty code", async () => {
+      const api = createApiMock();
+      await expect(executeBridgeCommand(api, "execute_js", {
+        code: ""
+      })).rejects.toThrow("code is required");
+    });
+  });
+  describe("get_console", () => {
+    beforeEach(() => {
+      installConsoleCapture();
+      clearConsoleEntries();
+    });
+    test("captures console.log and returns last N entries", async () => {
+      console.log("first");
+      console.warn("second");
+      console.error("third");
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "get_console", {
+        last: 2
+      });
+      expect(result.count).toBe(2);
+      expect(result.entries.map(e => e.level)).toEqual(["warn", "error"]);
+      expect(result.entries.map(e => e.message)).toEqual(["second", "third"]);
+    });
+    test("returns all entries when last is omitted", async () => {
+      console.log("a");
+      console.log("b");
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "get_console", {});
+      expect(result.count).toBe(2);
+    });
+    test("formats multiple args joined by spaces", async () => {
+      console.log("count is", 42, {
+        ok: true
+      });
+      const api = createApiMock();
+      const result = await executeBridgeCommand(api, "get_console", {
+        last: 1
+      });
+      expect(result.entries[0]?.message).toBe('count is 42 {"ok":true}');
+    });
+  });
+  test("type rejects unsupported elements", async () => {
+    document.body.innerHTML = `<div id="not-input"></div>`;
+    const api = createApiMock();
+    await expect(executeBridgeCommand(api, "type", {
+      selector: "#not-input",
+      text: "hello"
+    })).rejects.toThrow("type target must be input, textarea, or contenteditable");
+  });
+});

package/dist/output.css

@@ -815,6 +815,10 @@ input:where([type='file']):focus {
   visibility: collapse;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -891,6 +895,10 @@ input:where([type='file']):focus {
   top: 0.25rem;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -981,6 +989,10 @@ input:where([type='file']):focus {
   display: contents;
 }
 
+.\!hidden {
+  display: none !important;
+}
+
 .hidden {
   display: none;
 }
@@ -1113,6 +1125,10 @@ input:where([type='file']):focus {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1558,6 +1574,10 @@ input:where([type='file']):focus {
   text-transform: lowercase;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));

package/dist/visualDiff/diff.d.ts

@@ -0,0 +1,9 @@
+import type { DeltaEntry, DeltaReport, ElementSnapshot } from "./types";
+export declare const POS_THRESHOLD = 4;
+export declare const SIZE_THRESHOLD = 2;
+export declare const OPACITY_THRESHOLD = 0.05;
+export declare function computeDiff(before: ElementSnapshot[], after: ElementSnapshot[]): DeltaReport;
+export declare function formatReport(entries: DeltaEntry[], meta: {
+    elapsedMs: number;
+    settle: "clean" | "timeout";
+}): string;

package/dist/visualDiff/diff.js

@@ -0,0 +1,209 @@
+export const POS_THRESHOLD = 4;
+export const SIZE_THRESHOLD = 2;
+export const OPACITY_THRESHOLD = 0.05;
+function arrayEq(a, b) {
+  if (a.length !== b.length) return false;
+  const set = new Set(b);
+  for (const v of a) if (!set.has(v)) return false;
+  return true;
+}
+function labelFor(snap) {
+  let label = snap.tagName;
+  if (snap.id) label += "#" + snap.id;
+  if (snap.classes.length > 0) label += "." + snap.classes[0];
+  if (snap.text) {
+    const t = snap.text.length > 30 ? snap.text.slice(0, 30) + "…" : snap.text;
+    label += ` "${t}"`;
+  }
+  return label;
+}
+function comparePair(before, after) {
+  const changed = [];
+  if (Math.abs(after.x - before.x) >= POS_THRESHOLD) changed.push("x");
+  if (Math.abs(after.y - before.y) >= POS_THRESHOLD) changed.push("y");
+  if (Math.abs(after.width - before.width) >= SIZE_THRESHOLD) {
+    changed.push("width");
+  }
+  if (Math.abs(after.height - before.height) >= SIZE_THRESHOLD) {
+    changed.push("height");
+  }
+  if (Math.abs(after.opacity - before.opacity) >= OPACITY_THRESHOLD) {
+    changed.push("opacity");
+  }
+  if (after.text !== before.text) changed.push("text");
+  if (after.disabled !== before.disabled) changed.push("disabled");
+  if (after.pointerEvents !== before.pointerEvents) {
+    changed.push("pointerEvents");
+  }
+  if (!arrayEq(after.classes, before.classes)) changed.push("classes");
+  if (after.inViewport !== before.inViewport) changed.push("inViewport");
+  return {
+    changed
+  };
+}
+export function computeDiff(before, after) {
+  const beforeMap = new Map();
+  const afterMap = new Map();
+  for (const s of before) beforeMap.set(s.key, s);
+  for (const s of after) afterMap.set(s.key, s);
+  const entries = [];
+  let added = 0;
+  let removed = 0;
+  let changed = 0;
+  let moved = 0;
+  for (const [key, afterSnap] of afterMap) {
+    const beforeSnap = beforeMap.get(key);
+    if (!beforeSnap) {
+      if (afterSnap.visible) {
+        entries.push({
+          type: "+",
+          key,
+          label: labelFor(afterSnap),
+          after: afterSnap
+        });
+        added++;
+      }
+      continue;
+    }
+    if (beforeSnap.visible && !afterSnap.visible) {
+      entries.push({
+        type: "-",
+        key,
+        label: labelFor(beforeSnap),
+        before: beforeSnap
+      });
+      removed++;
+      continue;
+    }
+    const {
+      changed: changedFields
+    } = comparePair(beforeSnap, afterSnap);
+    if (changedFields.length === 0) continue;
+    const onlyPosition = changedFields.length > 0 && changedFields.every(f => f === "x" || f === "y");
+    if (onlyPosition) {
+      entries.push({
+        type: "→",
+        key,
+        label: labelFor(afterSnap),
+        before: beforeSnap,
+        after: afterSnap,
+        changedFields
+      });
+      moved++;
+    } else {
+      entries.push({
+        type: "~",
+        key,
+        label: labelFor(afterSnap),
+        before: beforeSnap,
+        after: afterSnap,
+        changedFields
+      });
+      changed++;
+    }
+  }
+  for (const [key, beforeSnap] of beforeMap) {
+    if (afterMap.has(key)) continue;
+    if (!beforeSnap.visible) continue;
+    entries.push({
+      type: "-",
+      key,
+      label: labelFor(beforeSnap),
+      before: beforeSnap
+    });
+    removed++;
+  }
+  const meta = {
+    elapsedMs: 0,
+    settle: "clean"
+  };
+  const text = formatReport(entries, meta);
+  return {
+    elapsedMs: 0,
+    settle: "clean",
+    counts: {
+      added,
+      removed,
+      changed,
+      moved
+    },
+    entries,
+    text
+  };
+}
+function fmtNum(n) {
+  return Math.round(n).toString();
+}
+function fieldDelta(field, before, after) {
+  switch (field) {
+    case "x":
+      return `x ${fmtNum(before.x)}→${fmtNum(after.x)}`;
+    case "y":
+      return `y ${fmtNum(before.y)}→${fmtNum(after.y)}`;
+    case "width":
+      return `w ${fmtNum(before.width)}→${fmtNum(after.width)}`;
+    case "height":
+      return `h ${fmtNum(before.height)}→${fmtNum(after.height)}`;
+    case "opacity":
+      return `opacity ${before.opacity.toFixed(2)}→${after.opacity.toFixed(2)}`;
+    case "text":
+      return `text "${before.text ?? ""}"→"${after.text ?? ""}"`;
+    case "disabled":
+      return `disabled ${before.disabled}→${after.disabled}`;
+    case "pointerEvents":
+      return `pointer-events ${before.pointerEvents}→${after.pointerEvents}`;
+    case "classes":
+      return `classes [${before.classes.join(" ")}]→[${after.classes.join(" ")}]`;
+    case "inViewport":
+      return `inViewport ${before.inViewport}→${after.inViewport}`;
+    default:
+      return field;
+  }
+}
+export function formatReport(entries, meta) {
+  const header = `Visual diff (${Math.round(meta.elapsedMs)}ms, settle: ${meta.settle})`;
+  const divider = "────────────────────────────────";
+  if (entries.length === 0) {
+    return `${header}\n${divider}\n(no changes)\n${divider}`;
+  }
+  const lines = [header, divider];
+  let added = 0;
+  let removed = 0;
+  let changed = 0;
+  let moved = 0;
+  for (const entry of entries) {
+    switch (entry.type) {
+      case "+":
+        {
+          added++;
+          const s = entry.after;
+          lines.push(`+ ${entry.label}  (${fmtNum(s.x)},${fmtNum(s.y)}) ${fmtNum(s.width)}×${fmtNum(s.height)}`);
+          break;
+        }
+      case "-":
+        {
+          removed++;
+          lines.push(`- ${entry.label}`);
+          break;
+        }
+      case "~":
+        {
+          changed++;
+          const deltas = (entry.changedFields ?? []).map(f => fieldDelta(f, entry.before, entry.after)).join(", ");
+          lines.push(`~ ${entry.label}: ${deltas}`);
+          break;
+        }
+      case "→":
+        {
+          moved++;
+          const b = entry.before;
+          const a = entry.after;
+          lines.push(`→ ${entry.label}: (${fmtNum(b.x)},${fmtNum(b.y)})→(${fmtNum(a.x)},${fmtNum(a.y)})`);
+          break;
+        }
+    }
+  }
+  lines.push(divider);
+  lines.push(`${entries.length} changes: ${added} added, ${removed} removed, ${changed} changed, ${moved} moved`);
+  return lines.join("\n");
+}

package/dist/visualDiff/diff.test.d.ts

@@ -0,0 +1 @@
+export {};