@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/tests/browser/graph-community-node-map.mjs

@@ -0,0 +1,255 @@
+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_COMMUNITY_NODE_MAP_HTML || "";
+assert.notEqual(html, "", "GRAPH_COMMUNITY_NODE_MAP_HTML must point at generated HTML");
+const screenshotPath = process.env.GRAPH_COMMUNITY_NODE_MAP_SCREENSHOT || "";
+
+const executablePath = process.env.GRAPH_COMMUNITY_NODE_MAP_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-testid="offline-graph-root"]');
+  await page.evaluate(() => {
+    const engine = window.__LLM_WIKI_GRAPH_ENGINE__;
+    if (!engine?.focusCommunity) throw new Error("offline graph engine is missing focusCommunity");
+    engine.focusCommunity("t1");
+  });
+  await page.waitForSelector('[data-community-map-state="lightweight"]');
+  await page.waitForSelector('.node[data-id="A"]');
+
+  const initial = await snapshot(page);
+  assert.equal(initial.communityMapState, "lightweight");
+  assert.equal(initial.relationFocus, "idle");
+  assert.equal(initial.fullCardCount, 0, "community map should not render full card nodes");
+  assert.ok(initial.visibleLabelCount > 0 && initial.visibleLabelCount <= 12, `default community map should expose only budgeted key labels, got ${initial.visibleLabelCount}`);
+  assert.ok(initial.visibleLabelCount < initial.nodeCount, `default community map should not label every node, got ${initial.visibleLabelCount}/${initial.nodeCount}`);
+  assert.ok(initial.defaultEdgeOpacity > 0 && initial.defaultEdgeOpacity < 0.35, `default community edges should stay quiet, got ${initial.defaultEdgeOpacity}`);
+  assert.equal(initial.rootPaperToken.toLowerCase(), "#f8f1e6", "community map should expose the approved warm paper token");
+  assert.match(initial.rootBackgroundSize, /42px 42px/, "community map should render the paper-grid background size");
+  assert.match(initial.rootBackground, /linear-gradient|radial-gradient/, "community map should keep a visible paper-style background treatment");
+  assert.ok(initial.sampleNodeStyles.dot, "community map nodes should render a dot-core element");
+  assert.ok(initial.sampleNodeStyles.label, "community map labels should still be measurable when visible");
+  assert.match(initial.sampleNodeStyles.label.fontFamily, /(Songti|Noto Serif|STSong|serif)/i, "community map labels should use the paper-map serif stack");
+  assert.equal(initial.nodeTypes.F, "comparison", "community map should preserve comparison nodes instead of collapsing them to entity");
+  assert.notEqual(initial.nodeDotColors.topic, initial.nodeDotColors.entity, "topic and entity dots should use different colors");
+  assert.notEqual(initial.nodeDotColors.source, initial.nodeDotColors.entity, "source and entity dots should use different colors");
+  assert.notEqual(initial.nodeDotColors.comparison, initial.nodeDotColors.entity, "comparison and entity dots should use different colors");
+  assert.equal(initial.edgeDashes.extracted, "none", "extracted confidence should render as a solid edge");
+  assert.notEqual(initial.edgeDashes.inferred, "none", "inferred confidence should render as a dashed edge");
+  assert.notEqual(initial.edgeDashes.ambiguous, "none", "ambiguous confidence should render as a dashed edge");
+  assert.notEqual(initial.edgeDashes.inferred, initial.edgeDashes.ambiguous, "inferred and ambiguous confidence should use distinct dash patterns");
+
+  await page.evaluate(() => {
+    window.__LLM_WIKI_GRAPH_ENGINE__?.setTypeFilters?.({ entity: false });
+  });
+  await page.locator('.node[data-id="A"]').hover();
+  await page.waitForFunction(() => document.querySelector('.edge[data-edge-id="eAB"]')?.getAttribute("data-filter-state") === "hidden");
+  const hiddenFilter = await snapshot(page);
+  const hiddenOpacity = Number.parseFloat(hiddenFilter.sampleNodeStyles.hiddenEdge?.opacity || "1");
+  assert.ok(hiddenOpacity <= 0.04, `filtered hidden edge should stay visually hidden, got ${hiddenOpacity}`);
+  await page.evaluate(() => {
+    window.__LLM_WIKI_GRAPH_ENGINE__?.setTypeFilters?.({ entity: true, source: true, topic: true });
+  });
+  await page.mouse.move(20, 20);
+  await page.waitForFunction(() => document.querySelector('.edge[data-edge-id="eAB"]')?.getAttribute("data-filter-state") === "visible");
+
+  const beforeHoverCenter = await nodeCenter(page, "B");
+  await page.locator('.node[data-id="A"]').hover();
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus") === "active" &&
+    document.querySelector('.node[data-id="B"]')?.getAttribute("data-relation-focus-depth") === "first"
+  ));
+  const hover = await snapshot(page);
+  const afterHoverCenter = await nodeCenter(page, "B");
+  assert.equal(hover.relationFocusNode, "A");
+  assert.equal(hover.nodeDepths.A, "focus");
+  assert.equal(hover.nodeDepths.B, "first");
+  assert.equal(hover.nodeDepths.C, "first");
+  assert.equal(hover.nodeDepths.D, "second");
+  assert.equal(hover.nodeDepths.F, "unrelated");
+  assert.equal(hover.edgeDepths.eAB, "first");
+  assert.equal(hover.edgeDepths.eBD, "second");
+  assert.equal(hover.edgeDepths.eEF, "unrelated");
+  assert.ok(hover.firstEdgeOpacity > hover.secondEdgeOpacity, "direct edges should be clearer than second-degree edges");
+  assert.ok(hover.secondEdgeOpacity > hover.unrelatedEdgeOpacity, "second-degree edges should remain clearer than unrelated edges");
+  assert.ok(hover.nodeDotOpacity.first > hover.nodeDotOpacity.second, "first-degree nodes should be clearer than second-degree nodes");
+  assert.ok(hover.nodeDotOpacity.second > hover.nodeDotOpacity.unrelated, "second-degree nodes should be clearer than unrelated nodes");
+  assert.ok(Math.abs(beforeHoverCenter.x - afterHoverCenter.x) < 0.5, "hover should not shift node x");
+  assert.ok(Math.abs(beforeHoverCenter.y - afterHoverCenter.y) < 0.5, "hover should not shift node y");
+
+  assert.ok(hover.labelSideCount === hover.nodeCount, "each community map node should expose a label-side placement");
+  assert.ok(hover.firstDegreeCount >= 10, "fixture should be dense enough to catch first-degree label walls");
+  assert.ok(hover.visibleFirstLabels < hover.firstDegreeCount, "first-degree labels should stay sparse instead of labeling every direct neighbor");
+  assert.ok(hover.visibleFirstLabels <= hover.visibleLabelCount, "first-degree labels should stay within the visible label budget");
+
+  await page.waitForTimeout(360);
+  const hoverAfterPreviewDelay = await snapshot(page);
+  assert.notEqual(hoverAfterPreviewDelay.hoverPreviewState, "open", "focused community node hover should not open the old content preview card");
+
+  await page.locator('.node[data-id="B"]').hover();
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus-node") === "B"
+  ));
+  await page.waitForTimeout(120);
+  const hoverB = await snapshot(page);
+  assert.equal(hoverB.relationFocusNode, "B", "hover should move directly from A focus to B focus");
+
+  await page.mouse.move(20, 20);
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus") === "idle"
+  ));
+  const afterLeave = await snapshot(page);
+  assert.equal(afterLeave.relationFocusNode, "");
+  assert.equal(afterLeave.nodeDepths.A, "none");
+
+  await page.locator('.node[data-id="A"]').click();
+  await page.waitForSelector('.graph-reader[data-state="open"]');
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus-node") === "A"
+  ));
+  const clicked = await snapshot(page);
+  assert.equal(clicked.readerOpen, true);
+  assert.equal(clicked.relationFocusNode, "A");
+  assert.equal(clicked.nodeDepths.B, "first");
+
+  await page.locator('.node[data-id="D"]').hover();
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus-node") === "D"
+  ));
+  const override = await snapshot(page);
+  assert.equal(override.relationFocusNode, "D");
+  assert.equal(override.nodeDepths.A, "second");
+
+  await page.mouse.move(20, 20);
+  await page.waitForFunction(() => (
+    document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-relation-focus-node") === "A"
+  ));
+  const restored = await snapshot(page);
+  assert.equal(restored.relationFocusNode, "A");
+  assert.equal(restored.nodeDepths.A, "focus");
+
+  console.log(JSON.stringify({ initial, hover, afterLeave, clicked, override, restored }, null, 2));
+
+  if (screenshotPath) {
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+  }
+} finally {
+  await browser.close();
+}
+
+async function snapshot(page) {
+  return page.evaluate(() => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    const node = (id) => document.querySelector(`.node[data-id="${CSS.escape(id)}"]`);
+    const edge = (id) => document.querySelector(`.edge[data-edge-id="${CSS.escape(id)}"]`);
+    const edgeOpacity = (id) => {
+      const element = edge(id);
+      if (!element) return -1;
+      return Number.parseFloat(getComputedStyle(element).opacity || "0");
+    };
+    const stylesFor = (selector) => {
+      const element = document.querySelector(selector);
+      if (!element) return null;
+      const style = getComputedStyle(element);
+      return {
+        display: style.display,
+        background: style.backgroundColor,
+        boxShadow: style.boxShadow,
+        border: style.border,
+        borderRadius: style.borderRadius,
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        left: style.left,
+        right: style.right,
+        top: style.top,
+        bottom: style.bottom,
+        opacity: style.opacity,
+        strokeDasharray: style.strokeDasharray,
+        transform: style.transform,
+        width: style.width,
+        height: style.height
+      };
+    };
+    return {
+      communityMapState: root?.getAttribute("data-community-map-state") || "",
+      relationFocus: root?.getAttribute("data-relation-focus") || "",
+      relationFocusNode: root?.getAttribute("data-relation-focus-node") || "",
+      nodeCount: document.querySelectorAll(".node").length,
+      fullCardCount: document.querySelectorAll('.node[data-density-mode="card"]').length,
+      visibleLabelCount: Array.from(document.querySelectorAll(".node-name")).filter((element) => getComputedStyle(element).display !== "none").length,
+      defaultEdgeOpacity: edgeOpacity("eAB"),
+      firstEdgeOpacity: edgeOpacity("eAB"),
+      secondEdgeOpacity: edgeOpacity("eBD"),
+      unrelatedEdgeOpacity: edgeOpacity("eEF"),
+      readerOpen: document.querySelector(".graph-reader")?.getAttribute("data-state") === "open",
+      nodeDepths: {
+        A: node("A")?.getAttribute("data-relation-focus-depth") || "",
+        B: node("B")?.getAttribute("data-relation-focus-depth") || "",
+        C: node("C")?.getAttribute("data-relation-focus-depth") || "",
+        D: node("D")?.getAttribute("data-relation-focus-depth") || "",
+        F: node("F")?.getAttribute("data-relation-focus-depth") || ""
+      },
+      edgeDepths: {
+        eAB: edge("eAB")?.getAttribute("data-relation-focus-depth") || "",
+        eBD: edge("eBD")?.getAttribute("data-relation-focus-depth") || "",
+        eEF: edge("eEF")?.getAttribute("data-relation-focus-depth") || ""
+      },
+      nodeTypes: {
+        A: node("A")?.getAttribute("data-type") || "",
+        B: node("B")?.getAttribute("data-type") || "",
+        C: node("C")?.getAttribute("data-type") || "",
+        F: node("F")?.getAttribute("data-type") || ""
+      },
+      nodeDotColors: {
+        topic: stylesFor('.node[data-id="A"] .dot-core')?.background || "",
+        entity: stylesFor('.node[data-id="B"] .dot-core')?.background || "",
+        source: stylesFor('.node[data-id="C"] .dot-core')?.background || "",
+        comparison: stylesFor('.node[data-id="F"] .dot-core')?.background || ""
+      },
+      nodeDotOpacity: {
+        first: Number.parseFloat(stylesFor('.node[data-id="B"] .dot-core')?.opacity || "0"),
+        second: Number.parseFloat(stylesFor('.node[data-id="D"] .dot-core')?.opacity || "0"),
+        unrelated: Number.parseFloat(stylesFor('.node[data-id="F"] .dot-core')?.opacity || "0")
+      },
+      edgeDashes: {
+        extracted: stylesFor('.edge[data-edge-id="eAB"]')?.strokeDasharray || "",
+        inferred: stylesFor('.edge[data-edge-id="eAC"]')?.strokeDasharray || "",
+        ambiguous: stylesFor('.edge[data-edge-id="eEF"]')?.strokeDasharray || ""
+      },
+      rootBackground: root ? getComputedStyle(root).backgroundImage : "",
+      rootBackgroundSize: root ? getComputedStyle(root).backgroundSize : "",
+      rootPaperToken: root ? getComputedStyle(root).getPropertyValue("--community-map-paper").trim() : "",
+      sampleNodeStyles: {
+        node: stylesFor('.node[data-id="A"]'),
+        dot: stylesFor('.node[data-id="A"] .dot-core'),
+        label: stylesFor('.node[data-id="A"] .node-name'),
+        hiddenEdge: stylesFor('.edge[data-edge-id="eAB"][data-filter-state="hidden"]'),
+        firstEdge: stylesFor('.edge[data-edge-id="eAB"]')
+      },
+      hoverPreviewState: document.querySelector(".graph-hover-preview")?.getAttribute("data-state") || "",
+      hoverPreviewKind: document.querySelector(".graph-hover-preview")?.getAttribute("data-kind") || "",
+      labelSideCount: Array.from(document.querySelectorAll(".node[data-label-side]")).length,
+      firstDegreeCount: Array.from(document.querySelectorAll('.node[data-relation-focus-depth="first"]')).length,
+      visibleFirstLabels: Array.from(document.querySelectorAll('.node[data-relation-focus-depth="first"] .node-name'))
+        .filter((element) => getComputedStyle(element).display !== "none").length
+    };
+  });
+}
+
+async function nodeCenter(page, id) {
+  return page.locator(`.node[data-id="${cssString(id)}"]`).evaluate((element) => {
+    const rect = element.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  });
+}
+
+function cssString(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}

package/skills/llm-wiki-skill/tests/browser/graph-community-wash-interactions.mjs

@@ -0,0 +1,170 @@
+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_COMMUNITY_WASH_HTML || "";
+assert.notEqual(html, "", "GRAPH_COMMUNITY_WASH_HTML must point at generated HTML");
+
+const executablePath = process.env.GRAPH_COMMUNITY_WASH_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 waitForSigmaGlobal(page);
+
+  const initial = await sigmaSnapshot(page);
+  assert.equal(initial.route, "sigma-global", "offline global route should use Sigma");
+  assert.equal(initial.oldDomNodeCount, 0, "Sigma global should not render the old DOM full graph");
+  assert.ok(initial.communityRegionCount >= 1, "Sigma global should expose community regions");
+  assert.ok(initial.communityLabelCount >= 1 && initial.communityLabelCount <= 8, "Sigma global should expose passive map labels");
+  assert.equal(initial.circularCommunityButtonCount, 0, "Sigma global should not expose circular community buttons");
+  assert.equal(initial.aggregationButtonCount, 0, "Sigma global should not expose aggregation buttons");
+
+  const communityId = await firstCommunityRegionId(page);
+  const regionPoint = await findCommunityRegionPoint(page, communityId);
+  await page.mouse.click(regionPoint.x, regionPoint.y);
+  await waitForCommunitySelection(page, communityId);
+  const selected = await sigmaSnapshot(page);
+  assert.equal(selected.focus, "", "clicking a community region should not enter a DOM community route");
+  assert.equal(selected.selectedCommunityId, communityId, "clicking a community region should select that community");
+  assert.equal(selected.oldDomNodeCount, 0, "community selection should keep the Sigma global route mounted");
+
+  await setSearchQuery(page, "节点A");
+  await page.waitForSelector('.sigma-global-node-hit-target[data-node-id="A"]');
+  await page.locator('.sigma-global-node-hit-target[data-node-id="A"]').click({ force: true });
+  await page.waitForFunction(() => (
+    document.querySelector('.sigma-global-node-hit-target[data-node-id="A"]')?.getAttribute("data-selected") === "true"
+  ));
+  const nodeSelected = await sigmaSnapshot(page);
+  assert.equal(nodeSelected.selectedNodeId, "A", "node hit target should win over the community region beneath it");
+  assert.equal(nodeSelected.route, "sigma-global", "node hit target should keep the Sigma global route active");
+
+  const labelPoint = await communityLabelCenter(page, communityId);
+  await page.mouse.click(labelPoint.x, labelPoint.y);
+  await waitForCommunitySelection(page, communityId);
+  const labelClick = await sigmaSnapshot(page);
+  assert.equal(labelClick.selectedCommunityId, communityId, "passive label area should fall through to the community region");
+  assert.equal(labelClick.labelPointerEvents, "none", "community labels should stay passive");
+
+  console.log(JSON.stringify({
+    communityId,
+    initial,
+    regionPoint,
+    selected,
+    nodeSelected,
+    labelClick
+  }, null, 2));
+} finally {
+  await browser.close();
+}
+
+async function waitForSigmaGlobal(page) {
+  await page.waitForSelector(".sigma-global-route[data-route='sigma-global']");
+  await page.waitForSelector(".sigma-global-renderer[data-renderer='sigma-global']");
+  await page.waitForSelector(".sigma-global-community-region[data-community-id]");
+}
+
+async function sigmaSnapshot(page) {
+  return page.evaluate(() => {
+    const selectedRegion = document.querySelector('.sigma-global-community-region[data-selected="true"]');
+    const selectedNode = document.querySelector('.sigma-global-node-hit-target[data-selected="true"]');
+    const firstLabel = document.querySelector(".sigma-global-community-label");
+    return {
+      route: document.querySelector(".sigma-global-route")?.getAttribute("data-route") || "",
+      renderer: document.querySelector(".sigma-global-renderer")?.getAttribute("data-renderer") || "",
+      focus: document.querySelector("[data-testid='offline-graph-root']")?.getAttribute("data-llm-wiki-graph-focus")
+        || document.querySelector("[data-llm-wiki-graph-root='true']")?.getAttribute("data-focus")
+        || "",
+      oldDomNodeCount: document.querySelectorAll(".node").length,
+      oldCommunityWashCount: document.querySelectorAll(".community-wash").length,
+      communityRegionCount: document.querySelectorAll(".sigma-global-community-region").length,
+      communityLabelCount: document.querySelectorAll(".sigma-global-community-label").length,
+      circularCommunityButtonCount: document.querySelectorAll(".sigma-global-community-wash, button.sigma-global-community-label, [role='button'].sigma-global-community-label").length,
+      aggregationButtonCount: document.querySelectorAll(".sigma-global-aggregation-container").length,
+      selectedCommunityId: selectedRegion?.getAttribute("data-community-id") || "",
+      selectedNodeId: selectedNode?.getAttribute("data-node-id") || "",
+      labelPointerEvents: firstLabel ? window.getComputedStyle(firstLabel).pointerEvents : ""
+    };
+  });
+}
+
+async function firstCommunityRegionId(page) {
+  return page.evaluate(() => {
+    const region = document.querySelector(".sigma-global-community-region[data-community-id]:not([data-community-id='_none'])")
+      || document.querySelector(".sigma-global-community-region[data-community-id]");
+    const id = region?.getAttribute("data-community-id") || "";
+    if (!id) throw new Error("Missing Sigma community region id");
+    return id;
+  });
+}
+
+async function findCommunityRegionPoint(page, communityId) {
+  return page.evaluate((communityId) => {
+    const region = document.querySelector(`.sigma-global-community-region[data-community-id="${CSS.escape(communityId)}"]`);
+    if (!region) throw new Error(`Missing Sigma community region ${communityId}`);
+    const rect = region.getBoundingClientRect();
+    const candidates = [
+      [0.5, 0.18],
+      [0.2, 0.5],
+      [0.8, 0.5],
+      [0.5, 0.82],
+      [0.32, 0.32],
+      [0.68, 0.68],
+      [0.5, 0.5]
+    ];
+    for (const [rx, ry] of candidates) {
+      const x = rect.left + rect.width * rx;
+      const y = rect.top + rect.height * ry;
+      const hit = document.elementFromPoint(x, y);
+      if (hit?.closest?.(".sigma-global-node-hit-target")) continue;
+      if (hit?.closest?.(".sigma-global-community-region") === region) {
+        return { x, y, communityId };
+      }
+    }
+    throw new Error(`Could not find exposed Sigma community region point: ${JSON.stringify({
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height
+    })}`);
+  }, communityId);
+}
+
+async function communityLabelCenter(page, communityId) {
+  return page.evaluate((communityId) => {
+    const label = document.querySelector(`.sigma-global-community-label[data-community-id="${CSS.escape(communityId)}"]`);
+    if (!label) throw new Error(`Missing Sigma community label ${communityId}`);
+    const rect = label.getBoundingClientRect();
+    return {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    };
+  }, communityId);
+}
+
+async function waitForCommunitySelection(page, communityId) {
+  await page.waitForFunction((communityId) => (
+    document.querySelector(`.sigma-global-community-region[data-community-id="${CSS.escape(communityId)}"]`)?.getAttribute("data-selected") === "true"
+  ), communityId);
+}
+
+async function setSearchQuery(page, query) {
+  await page.locator(".graph-search-input").focus();
+  await page.evaluate((query) => {
+    const input = document.querySelector(".graph-search[data-state='open'] .graph-search-input");
+    if (!(input instanceof HTMLInputElement)) throw new Error("Graph search input is not open");
+    input.value = query;
+    input.dispatchEvent(new InputEvent("input", {
+      bubbles: true,
+      inputType: "insertText",
+      data: query
+    }));
+  }, query);
+  await page.waitForFunction((query) => (
+    document.querySelector(".graph-search-input")?.value === query
+  ), query);
+}