@joekytc/dsh-swarm 0.1.2 → 0.3.0

package/skills/llm-wiki-skill/tests/browser/graph-default-behavior.mjs

@@ -0,0 +1,630 @@
+import assert from "node:assert/strict";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+const require = createRequire(import.meta.url);
+const { chromium } = require("playwright");
+
+const html = process.env.GRAPH_DEFAULT_BEHAVIOR_HTML || "";
+assert.notEqual(html, "", "GRAPH_DEFAULT_BEHAVIOR_HTML must point at generated HTML");
+
+const executablePath = process.env.GRAPH_DEFAULT_BEHAVIOR_CHROME_EXECUTABLE || "";
+const browser = await chromium.launch(executablePath ? { executablePath } : {});
+
+try {
+  const page = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+  await page.goto(pathToFileURL(html).href);
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector("[data-viewport-layer='true']");
+  await page.waitForSelector(".node");
+
+  await page.locator(".node").first().click();
+  await page.waitForSelector(".graph-reader-body");
+  const computedPolicy = await graphDefaultPolicy(page);
+  await page.locator(".graph-reader-close").click();
+  await page.waitForSelector('.graph-reader[data-state="closed"]');
+
+  assert.equal(computedPolicy.root.userSelect, "none", "graph root should prevent browser text selection");
+  assert.equal(computedPolicy.root.touchAction, "none", "graph root should own touch and pinch gestures");
+  assert.equal(computedPolicy.root.overscrollBehavior, "contain", "graph root should contain scroll chaining");
+  assert.equal(computedPolicy.readerBody.userSelect, "text", "reader body should still allow selecting text");
+  assert.equal(computedPolicy.searchInput.userSelect, "text", "search input should still allow text editing");
+
+  const nodeShortcutWheel = await assertShortcutWheelZoomsGraph(page, await visibleNodeCenter(page), "node", { ctrlKey: true });
+  const blankShortcutWheel = await assertShortcutWheelZoomsGraph(page, await findBlankPoint(page), "blank graph", { metaKey: true });
+  const searchWheel = await assertShortcutWheelDoesNotZoomGraph(page, ".graph-search-input", "search input", { ctrlKey: true });
+  const blankDrag = await assertBlankDragDoesNotSelectText(page);
+  const cancellationBoundaries = await assertCancellationAndBlockerBoundaries(page);
+  const fastReleaseDrag = await assertFastReleasePinsFinalPointerPosition(page);
+  const keyboardOwnership = await assertKeyboardOwnership(page);
+
+  console.log(JSON.stringify({
+    html,
+    computedPolicy,
+    shortcutWheel: {
+      node: nodeShortcutWheel,
+      blank: blankShortcutWheel,
+      searchInput: searchWheel
+    },
+    blankDrag,
+    cancellationBoundaries,
+    fastReleaseDrag,
+    keyboardOwnership
+  }, null, 2));
+} finally {
+  await browser.close();
+}
+
+async function assertShortcutWheelZoomsGraph(page, point, label, options) {
+  await resetSelection(page);
+  const beforeMetrics = await pageMetrics(page);
+  const beforeTransform = await layerTransform(page);
+  const eventResult = await dispatchWheelAt(page, point, {
+    deltaY: -420,
+    ctrlKey: options.ctrlKey === true,
+    metaKey: options.metaKey === true
+  });
+  assert.equal(eventResult.cancelled, true, `shortcut wheel over ${label} should cancel browser default`);
+  const afterTransform = await waitForLayerTransform(page, beforeTransform);
+  const afterMetrics = await pageMetrics(page);
+  assert.deepEqual(afterMetrics, beforeMetrics, `shortcut wheel over ${label} should not zoom the page`);
+  const realWheel = await assertModifiedMouseWheelZoomsGraph(page, point, label, options);
+  return {
+    point: roundedPoint(point),
+    beforeTransform,
+    afterTransform,
+    beforeMetrics,
+    afterMetrics,
+    eventResult,
+    realWheel
+  };
+}
+
+async function assertModifiedMouseWheelZoomsGraph(page, point, label, options) {
+  const beforeMetrics = await pageMetrics(page);
+  const beforeTransform = await layerTransform(page);
+  const modifier = options.metaKey === true ? "Meta" : "Control";
+  const client = await page.context().newCDPSession(page);
+  try {
+    await client.send("Input.dispatchMouseEvent", {
+      type: "mouseWheel",
+      x: point.x,
+      y: point.y,
+      deltaX: 0,
+      deltaY: -420,
+      modifiers: options.metaKey === true ? 4 : 2
+    });
+  } finally {
+    await client.detach().catch(() => {});
+  }
+  const afterTransform = await waitForLayerTransform(page, beforeTransform);
+  const afterMetrics = await pageMetrics(page);
+  assert.deepEqual(afterMetrics, beforeMetrics, `real modified wheel over ${label} should not zoom the page`);
+  return {
+    modifier,
+    beforeTransform,
+    afterTransform,
+    beforeMetrics,
+    afterMetrics
+  };
+}
+
+async function assertShortcutWheelDoesNotZoomGraph(page, selector, label, options) {
+  const beforeMetrics = await pageMetrics(page);
+  const beforeTransform = await layerTransform(page);
+  const eventResult = await dispatchWheelOnSelector(page, selector, {
+    deltaY: -420,
+    ctrlKey: options.ctrlKey === true,
+    metaKey: options.metaKey === true
+  });
+  assert.equal(eventResult.cancelled, false, `shortcut wheel over ${label} should remain a blocker`);
+  await page.waitForTimeout(80);
+  const afterTransform = await layerTransform(page);
+  const afterMetrics = await pageMetrics(page);
+  assert.equal(afterTransform, beforeTransform, `shortcut wheel over ${label} should not zoom graph`);
+  assert.deepEqual(afterMetrics, beforeMetrics, `synthetic shortcut wheel over ${label} should not change page metrics`);
+  return {
+    beforeTransform,
+    afterTransform,
+    beforeMetrics,
+    afterMetrics,
+    eventResult
+  };
+}
+
+async function assertBlankDragDoesNotSelectText(page) {
+  await resetSelection(page);
+  const point = await findBlankPoint(page);
+  const toolbar = await page.locator(".graph-toolbar-actions").boundingBox();
+  assert.ok(toolbar, "toolbar actions should exist for blank drag selection regression");
+
+  await page.mouse.move(point.x, point.y);
+  await page.mouse.down();
+  await page.mouse.move(toolbar.x + toolbar.width - 4, toolbar.y + toolbar.height / 2, { steps: 8 });
+  await page.mouse.up();
+  await page.waitForTimeout(80);
+
+  const state = await page.evaluate(() => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    return {
+      selectionText: window.getSelection()?.toString() || "",
+      viewportDragging: root?.dataset.viewportDragging || "",
+      dragging: root?.dataset.dragging || ""
+    };
+  });
+  assert.equal(state.selectionText, "", "blank graph drag should not select toolbar text");
+  assert.equal(state.viewportDragging, "", "blank graph drag should not leave viewport dragging active");
+  assert.equal(state.dragging, "", "blank graph drag should not leave node dragging active");
+  return { start: roundedPoint(point), state };
+}
+
+async function assertCancellationAndBlockerBoundaries(page) {
+  await page.reload();
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector("[data-viewport-layer='true']");
+  await page.waitForSelector(".node");
+
+  const pointerCancel = await assertPointerCancelClearsNodeDrag(page);
+  const lostPointerCapture = await assertLostPointerCaptureClearsBlankPan(page);
+  const blockers = await assertPointerBlockersDoNotStartGestures(page);
+
+  return {
+    pointerCancel,
+    lostPointerCapture,
+    blockers
+  };
+}
+
+async function assertPointerCancelClearsNodeDrag(page) {
+  const before = await page.locator(".node").first().evaluate((node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+      id: node.dataset.id || "",
+      pinned: node.dataset.pinned || "",
+      center: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+    };
+  });
+  assert.notEqual(before.id, "", "pointercancel regression should have a node target");
+
+  const move = { x: before.center.x + 80, y: before.center.y + 8 };
+  await dispatchPointer(page, `.node[data-id="${cssString(before.id)}"]`, "pointerdown", before.center, {
+    pointerId: 88,
+    button: 0,
+    buttons: 1
+  });
+  await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointermove", move, {
+    pointerId: 88,
+    button: 0,
+    buttons: 1
+  });
+  await page.waitForFunction(
+    (id) => {
+      const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+      const node = document.querySelector(`.node[data-id="${CSS.escape(id)}"]`);
+      return root?.dataset.dragging === id && node?.classList.contains("is-dragging");
+    },
+    before.id,
+    { timeout: 3000 }
+  );
+
+  const cancelEvent = await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointercancel", move, {
+    pointerId: 88,
+    button: 0,
+    buttons: 0
+  });
+  await waitForClearInteraction(page, before.id);
+
+  const after = await graphInteractionState(page, before.id);
+  assert.equal(cancelEvent.cancelled, true, "pointercancel during node drag should prevent browser default");
+  assert.equal(after.dragging, "", "pointercancel should clear root dragging state");
+  assert.equal(after.nodeDragging, false, "pointercancel should clear node dragging class");
+  assert.equal(after.pinned, before.pinned, "pointercancel should not create or remove a node pin");
+
+  return {
+    id: before.id,
+    move: roundedPoint(move),
+    cancelEvent,
+    beforePinned: before.pinned,
+    after
+  };
+}
+
+async function assertLostPointerCaptureClearsBlankPan(page) {
+  const start = await findBlankPoint(page);
+  const move = { x: start.x + 96, y: start.y + 12 };
+
+  await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointerdown", start, {
+    pointerId: 89,
+    button: 0,
+    buttons: 1
+  });
+  await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointermove", move, {
+    pointerId: 89,
+    button: 0,
+    buttons: 1
+  });
+  await page.waitForFunction(
+    () => document.querySelector("[data-llm-wiki-graph-root='true']")?.dataset.viewportDragging === "true",
+    undefined,
+    { timeout: 3000 }
+  );
+
+  const lostEvent = await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "lostpointercapture", move, {
+    pointerId: 89,
+    button: 0,
+    buttons: 0
+  });
+  await page.waitForFunction(
+    () => (document.querySelector("[data-llm-wiki-graph-root='true']")?.dataset.viewportDragging || "") === "",
+    undefined,
+    { timeout: 3000 }
+  );
+
+  const state = await graphInteractionState(page);
+  assert.equal(state.viewportDragging, "", "lostpointercapture should clear viewport dragging state");
+  assert.equal(state.dragging, "", "lostpointercapture should not leave node dragging state");
+
+  return {
+    start: roundedPoint(start),
+    move: roundedPoint(move),
+    lostEvent,
+    state
+  };
+}
+
+async function assertPointerBlockersDoNotStartGestures(page) {
+  await page.locator(".node").first().click();
+  await page.waitForSelector('.graph-reader[data-state="open"]');
+
+  const cases = [
+    [".graph-search-input", "search input"],
+    [".graph-toolbar", "toolbar"],
+    [".mini-map", "minimap"],
+    [".graph-reader-body", "reader drawer"]
+  ];
+  const results = [];
+  for (let index = 0; index < cases.length; index += 1) {
+    const [selector, label] = cases[index];
+    const beforeTransform = await layerTransform(page);
+    const eventResult = await dispatchPointerOnSelector(page, selector, "pointerdown", {
+      pointerId: 100 + index,
+      button: 0,
+      buttons: 1
+    });
+    await page.waitForTimeout(60);
+    const state = await graphInteractionState(page);
+    const afterTransform = await layerTransform(page);
+
+    assert.equal(eventResult.cancelled, false, `${label} pointerdown should remain outside graph gesture ownership`);
+    assert.equal(state.dragging, "", `${label} pointerdown should not start node dragging`);
+    assert.equal(state.viewportDragging, "", `${label} pointerdown should not start blank panning`);
+    assert.equal(afterTransform, beforeTransform, `${label} pointerdown should not move the graph`);
+    results.push({ selector, label, eventResult, state });
+  }
+
+  await page.locator(".graph-reader-close").click();
+  await page.waitForSelector('.graph-reader[data-state="closed"]');
+  return results;
+}
+
+async function assertFastReleasePinsFinalPointerPosition(page) {
+  await page.reload();
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector("[data-viewport-layer='true']");
+  await page.waitForSelector(".node");
+
+  const before = await page.locator(".node").first().evaluate((node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+      id: node.dataset.id || "",
+      center: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+      pinned: node.dataset.pinned || ""
+    };
+  });
+  assert.notEqual(before.id, "", "fast-release drag should have a node target");
+
+  const intermediate = { x: before.center.x + 18, y: before.center.y + 4 };
+  const release = { x: before.center.x + 280, y: before.center.y + 12 };
+  await dispatchPointer(page, `.node[data-id="${cssString(before.id)}"]`, "pointerdown", before.center, {
+    pointerId: 77,
+    button: 0,
+    buttons: 1
+  });
+  await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointermove", intermediate, {
+    pointerId: 77,
+    button: 0,
+    buttons: 1
+  });
+  await dispatchPointer(page, "[data-llm-wiki-graph-root='true']", "pointerup", release, {
+    pointerId: 77,
+    button: 0,
+    buttons: 0
+  });
+
+  await page.waitForSelector(`.node[data-id="${cssString(before.id)}"][data-pinned="true"]`);
+  await page.waitForTimeout(120);
+
+  const after = await page.locator(`.node[data-id="${cssString(before.id)}"]`).evaluate((node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+      center: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+      pinned: node.dataset.pinned || ""
+    };
+  });
+  assert.ok(
+    after.center.x > before.center.x + 190,
+    `fast-release drag should commit close to the release point, not the last move point: ${JSON.stringify({ before, intermediate, release, after })}`
+  );
+  assert.equal(after.pinned, "true", "fast-release drag should still pin the node");
+  return {
+    id: before.id,
+    before: roundedPoint(before.center),
+    intermediate: roundedPoint(intermediate),
+    release: roundedPoint(release),
+    after: roundedPoint(after.center),
+    pinned: after.pinned
+  };
+}
+
+async function assertKeyboardOwnership(page) {
+  await page.reload();
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector(".graph-search");
+
+  await page.evaluate(() => {
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+    document.body.focus();
+  });
+  const outsideGraph = await dispatchDocumentKey(page, "f", { ctrlKey: true });
+  await page.waitForTimeout(80);
+  assert.equal(outsideGraph.defaultPrevented, false, "graph should not steal search shortcut outside graph focus");
+  assert.equal(await graphSearchState(page), "closed", "search shortcut outside graph focus should not open graph search");
+
+  await page.locator("[data-llm-wiki-graph-root='true']").evaluate((root) => root.focus({ preventScroll: true }));
+  const insideGraph = await dispatchDocumentKey(page, "f", { ctrlKey: true });
+  await page.waitForSelector('.graph-search[data-state="open"]');
+  assert.equal(insideGraph.defaultPrevented, true, "graph should own search shortcut when graph is focused");
+
+  await page.evaluate(() => {
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+    document.body.focus();
+  });
+  const outsideEscape = await dispatchDocumentKey(page, "Escape");
+  await page.waitForTimeout(80);
+  assert.equal(outsideEscape.defaultPrevented, false, "graph should not steal Escape outside graph focus");
+  assert.equal(await graphSearchState(page), "open", "Escape outside graph focus should not close graph search");
+
+  return {
+    outsideGraph,
+    insideGraph,
+    outsideEscape,
+    finalSearchState: await graphSearchState(page)
+  };
+}
+
+async function layerTransform(page) {
+  return page.locator("[data-viewport-layer='true']").evaluate((element) => element.style.transform);
+}
+
+async function waitForLayerTransform(page, previous) {
+  await page.waitForFunction(
+    (previous) => document.querySelector("[data-viewport-layer='true']")?.style.transform !== previous,
+    previous,
+    { timeout: 3000 }
+  );
+  return layerTransform(page);
+}
+
+async function pageMetrics(page) {
+  return page.evaluate(() => ({
+    devicePixelRatio: window.devicePixelRatio,
+    visualViewportScale: window.visualViewport?.scale || 1,
+    clientWidth: document.documentElement.clientWidth,
+    clientHeight: document.documentElement.clientHeight
+  }));
+}
+
+async function graphDefaultPolicy(page) {
+  return page.evaluate(() => {
+    const root = document.querySelector(".llm-wiki-graph-engine");
+    const readerBody = document.querySelector(".graph-reader-body");
+    const searchInput = document.querySelector(".graph-search-input");
+    if (!root || !readerBody || !searchInput) throw new Error("Missing graph policy elements");
+    const styleOf = (element) => {
+      const style = getComputedStyle(element);
+      return {
+        userSelect: style.userSelect,
+        touchAction: style.touchAction,
+        overscrollBehavior: style.overscrollBehavior
+      };
+    };
+    return {
+      root: styleOf(root),
+      readerBody: styleOf(readerBody),
+      searchInput: styleOf(searchInput)
+    };
+  });
+}
+
+async function visibleNodeCenter(page) {
+  return page.locator(".node").first().evaluate((node) => {
+    const rect = node.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  });
+}
+
+async function findBlankPoint(page) {
+  return page.evaluate(() => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    if (!root) throw new Error("Missing graph root");
+    const rootRect = root.getBoundingClientRect();
+    const blocked = ".node,.community-wash,.edge,.graph-toolbar,.mini-map,.graph-search,.graph-reader,.graph-selection-panel";
+    for (let y = rootRect.top + 86; y < rootRect.bottom - 48; y += 34) {
+      for (let x = rootRect.left + 40; x < rootRect.right - 40; x += 42) {
+        const element = document.elementFromPoint(x, y);
+        if (element && root.contains(element) && !element.closest(blocked)) return { x, y };
+      }
+    }
+    throw new Error("Could not find blank graph point");
+  });
+}
+
+async function dispatchWheelAt(page, point, options) {
+  return page.evaluate(({ point, options }) => {
+    const target = document.elementFromPoint(point.x, point.y);
+    if (!target) throw new Error(`No event target at ${JSON.stringify(point)}`);
+    const event = new WheelEvent("wheel", {
+      bubbles: true,
+      cancelable: true,
+      clientX: point.x,
+      clientY: point.y,
+      deltaY: options.deltaY,
+      deltaMode: 0,
+      ctrlKey: options.ctrlKey,
+      metaKey: options.metaKey
+    });
+    const dispatchResult = target.dispatchEvent(event);
+    return {
+      cancelled: !dispatchResult,
+      defaultPrevented: event.defaultPrevented,
+      target: target.closest(".node") ? "node" : target.closest(".community-wash") ? "community-wash" : target.className?.toString?.() || target.tagName
+    };
+  }, { point, options });
+}
+
+async function dispatchWheelOnSelector(page, selector, options) {
+  return page.evaluate(({ selector, options }) => {
+    const target = document.querySelector(selector);
+    if (!target) throw new Error(`Missing selector ${selector}`);
+    const rect = target.getBoundingClientRect();
+    const event = new WheelEvent("wheel", {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.left + rect.width / 2,
+      clientY: rect.top + rect.height / 2,
+      deltaY: options.deltaY,
+      deltaMode: 0,
+      ctrlKey: options.ctrlKey,
+      metaKey: options.metaKey
+    });
+    const dispatchResult = target.dispatchEvent(event);
+    return {
+      cancelled: !dispatchResult,
+      defaultPrevented: event.defaultPrevented,
+      target: selector
+    };
+  }, { selector, options });
+}
+
+async function dispatchPointer(page, selector, type, point, options) {
+  return page.evaluate(({ selector, type, point, options }) => {
+    const target = document.querySelector(selector);
+    if (!target) throw new Error(`Missing selector ${selector}`);
+    const event = new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: options.pointerId,
+      pointerType: "mouse",
+      clientX: point.x,
+      clientY: point.y,
+      button: options.button,
+      buttons: options.buttons,
+      isPrimary: true
+    });
+    const dispatchResult = target.dispatchEvent(event);
+    return {
+      cancelled: !dispatchResult,
+      defaultPrevented: event.defaultPrevented
+    };
+  }, { selector, type, point, options });
+}
+
+async function dispatchDocumentKey(page, key, options = {}) {
+  return page.evaluate(({ key, options }) => {
+    const event = new KeyboardEvent("keydown", {
+      key,
+      bubbles: true,
+      cancelable: true,
+      ctrlKey: options.ctrlKey === true,
+      metaKey: options.metaKey === true
+    });
+    const dispatchResult = document.dispatchEvent(event);
+    return {
+      cancelled: !dispatchResult,
+      defaultPrevented: event.defaultPrevented,
+      activeTag: document.activeElement?.tagName || ""
+    };
+  }, { key, options });
+}
+
+async function graphSearchState(page) {
+  return page.locator(".graph-search").evaluate((element) => element.dataset.state || "");
+}
+
+async function graphInteractionState(page, nodeId = "") {
+  return page.evaluate((nodeId) => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    const node = nodeId ? document.querySelector(`.node[data-id="${CSS.escape(nodeId)}"]`) : null;
+    return {
+      dragging: root?.dataset.dragging || "",
+      viewportDragging: root?.dataset.viewportDragging || "",
+      pinned: node?.dataset.pinned || "",
+      nodeDragging: Boolean(node?.classList.contains("is-dragging"))
+    };
+  }, nodeId);
+}
+
+async function waitForClearInteraction(page, nodeId = "") {
+  await page.waitForFunction(
+    (nodeId) => {
+      const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+      const node = nodeId ? document.querySelector(`.node[data-id="${CSS.escape(nodeId)}"]`) : null;
+      return (root?.dataset.dragging || "") === ""
+        && (root?.dataset.viewportDragging || "") === ""
+        && !node?.classList.contains("is-dragging");
+    },
+    nodeId,
+    { timeout: 3000 }
+  );
+}
+
+async function resetSelection(page) {
+  await page.evaluate(() => window.getSelection()?.removeAllRanges());
+}
+
+function roundedPoint(point) {
+  return {
+    x: Math.round(point.x * 1000) / 1000,
+    y: Math.round(point.y * 1000) / 1000
+  };
+}
+
+function cssString(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+
+async function dispatchPointerOnSelector(page, selector, type, options) {
+  return page.evaluate(({ selector, type, options }) => {
+    const target = document.querySelector(selector);
+    if (!target) throw new Error(`Missing selector ${selector}`);
+    const rect = target.getBoundingClientRect();
+    const point = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    const event = new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: options.pointerId,
+      pointerType: "mouse",
+      clientX: point.x,
+      clientY: point.y,
+      button: options.button,
+      buttons: options.buttons,
+      isPrimary: true
+    });
+    const dispatchResult = target.dispatchEvent(event);
+    return {
+      cancelled: !dispatchResult,
+      defaultPrevented: event.defaultPrevented,
+      point
+    };
+  }, { selector, type, options });
+}

package/skills/llm-wiki-skill/tests/browser/graph-density-preview.mjs

@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+const require = createRequire(import.meta.url);
+const { chromium } = require("playwright");
+
+const html = process.env.GRAPH_DENSITY_PREVIEW_HTML || "";
+assert.notEqual(html, "", "GRAPH_DENSITY_PREVIEW_HTML must point at generated HTML");
+
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+  await page.goto(pathToFileURL(html).href);
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+
+  const root = page.locator("[data-llm-wiki-graph-root='true']");
+  const totalNodes = await page.locator(".node").count();
+  const fullCards = await page.locator(".node:not(.is-compact):not(.is-point):not(.is-overview)").count();
+  assert.ok(totalNodes >= 120, `dense fixture should render many nodes, got ${totalNodes}`);
+  assert.ok(fullCards < totalNodes / 2, "dense fixture should not render every node as a full card");
+
+  const compact = page.locator(".node.is-compact").first();
+  await compact.waitFor();
+  await compact.hover();
+  await assertPreviewOpen(page, "compact node should open hover preview");
+
+  await page.mouse.move(20, 20);
+  await waitForPreviewState(page, "closed");
+
+  await page.waitForSelector(".node.is-point");
+  const point = page.locator(".node.is-point").first();
+  await point.evaluate((element) => {
+    element.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true, pointerType: "mouse" }));
+  });
+  await assertPreviewOpen(page, "point node should open hover preview");
+} finally {
+  await browser.close();
+}
+
+async function assertPreviewOpen(page, message) {
+  await page.waitForSelector(".graph-hover-preview[data-state='open']");
+  const preview = page.locator(".graph-hover-preview");
+  await preview.locator(".graph-hover-preview-title").waitFor();
+  await preview.locator(".graph-hover-preview-type").waitFor();
+  assert.equal(await preview.locator(".graph-hover-preview-summary").count(), 1, message);
+}
+
+async function waitForPreviewState(page, state) {
+  await page.waitForFunction((state) => {
+    return document.querySelector(".graph-hover-preview")?.dataset.state === state;
+  }, state);
+}