@research-copilot/plugin 1.1.17 → 1.1.19

package/dist/skills/llm-wiki/tests/browser/graph-stage-4-5.mjs

@@ -0,0 +1,717 @@
+import assert from "node:assert/strict";
+import { createRequire } from "node:module";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+const require = createRequire(import.meta.url);
+const { chromium } = require("playwright");
+
+const target = process.env.GRAPH_STAGE_4_5_TARGET || "offline";
+const offlineHtml = process.env.GRAPH_STAGE_4_5_OFFLINE_HTML || "";
+const denseHtml = process.env.GRAPH_STAGE_4_5_DENSE_HTML || "";
+const artifactDir = process.env.GRAPH_STAGE_4_5_ARTIFACT_DIR || "";
+const workbenchUrl = process.env.GRAPH_STAGE_4_5_WORKBENCH_URL || "";
+
+if (target !== "offline" && target !== "workbench") {
+  throw new Error(`Unknown stage 4.5 browser target: ${target}`);
+}
+assert.notEqual(offlineHtml, "", "GRAPH_STAGE_4_5_OFFLINE_HTML must point at generated HTML");
+assert.notEqual(denseHtml, "", "GRAPH_STAGE_4_5_DENSE_HTML must point at generated dense HTML");
+
+const browser = await chromium.launch();
+try {
+  if (target === "workbench") {
+    await runWorkbenchChecks(browser);
+  } else {
+    await runOfflineChecks(browser);
+  }
+} finally {
+  await browser.close();
+}
+
+async function runOfflineChecks(browser) {
+  const page = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+  await page.goto(pathToFileURL(offlineHtml).href);
+
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector("[data-viewport-layer='true']");
+  await runOfflineThemeChecks(page);
+
+  const initial = await layerTransform(page);
+  await page.mouse.move(64, 120);
+  await page.mouse.wheel(0, -600);
+  const zoomed = await waitForLayerTransform(page, initial);
+  assert.notEqual(zoomed, initial, "wheel zoom should update the content layer transform");
+  assert.notEqual(zoomed, "translate(0px, 0px) scale(1)", "wheel zoom should leave the default viewport");
+
+  await page.mouse.move(72, 132);
+  await page.mouse.down();
+  await page.mouse.move(190, 182, { steps: 4 });
+  await page.mouse.up();
+  const panned = await waitForLayerTransform(page, zoomed);
+  assert.notEqual(panned, zoomed, "blank drag should pan through the content layer transform");
+
+  await page.mouse.dblclick(48, 132);
+  const fitted = await waitForLayerTransform(page, panned);
+  assert.notEqual(fitted, panned, "blank double-click should fit the graph through the content layer transform");
+
+  await page.keyboard.down("Shift");
+  await page.locator(".node").nth(0).click();
+  await page.locator(".node").nth(1).click();
+  await page.keyboard.up("Shift");
+  const selectedAfterShiftClick = await page.locator(".node[aria-pressed='true']").count();
+  assert.equal(selectedAfterShiftClick, 2, "Shift-clicking two nodes should keep both nodes selected in the graph");
+  await assertOfflineSelectionPanel(page, "manual");
+
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".graph-selection-panel[data-state='closed']");
+  await expectNoPressedNodes(page, "Escape should clear Shift-click selections");
+
+  const transformBeforeReader = await layerTransform(page);
+  await page.locator(".node[data-id='A']").click();
+  await page.waitForSelector(".graph-reader[data-state='open']");
+  const pressedAfterPlainClick = await page.locator(".node[aria-pressed='true']").count();
+  assert.equal(pressedAfterPlainClick, 1, "plain node click should highlight one readable node");
+  await assertOfflineReaderMeta(page, {
+    title: "节点A",
+    typeLabel: "实体",
+    date: "2026-01-02",
+    source: "不应作为实体来源链接",
+    sourceLink: null
+  });
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".graph-reader[data-state='closed']");
+  await expectNoPressedNodes(page, "Escape should clear the reader highlight");
+  assert.equal(
+    await layerTransform(page),
+    transformBeforeReader,
+    "clearing graph interaction should not reset the viewport transform"
+  );
+
+  await page.locator(".node[data-id='S']").click();
+  await page.waitForSelector(".graph-reader[data-state='open']");
+  await assertOfflineReaderMeta(page, {
+    title: "节点来源S",
+    typeLabel: "来源",
+    date: "2026-01-03",
+    source: "原始文章S",
+    sourceLink: "/fake/wiki/sources/S.md"
+  });
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".graph-reader[data-state='closed']");
+  await expectNoPressedNodes(page, "Escape should clear source reader highlight");
+
+  await runSearchKeyboardChecks(page, "offline graph search should support shortcut, cycling, focus, and Escape");
+  await runLegendChecks(page, { persistReload: true, expectWorkbenchDrawer: false });
+  await runOfflinePinReloadCheck(page);
+
+  if (artifactDir) {
+    await page.screenshot({ path: path.join(artifactDir, "stage-4.5-offline-navigation.png"), fullPage: true });
+  }
+
+  const densePage = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+  await densePage.goto(pathToFileURL(denseHtml).href);
+  await densePage.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await densePage.waitForSelector("[data-viewport-layer='true']");
+
+  const denseInitial = await layerTransform(densePage);
+  const frameSamplePromise = densePage.evaluate(() => new Promise((resolve) => {
+    const start = performance.now();
+    let frames = 0;
+    function tick() {
+      frames += 1;
+      const elapsed = performance.now() - start;
+      if (elapsed >= 3000) {
+        resolve({ frames, durationMs: elapsed, fps: frames / (elapsed / 1000) });
+        return;
+      }
+      requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  }));
+
+  const denseRoot = densePage.locator("[data-llm-wiki-graph-root='true']");
+  const wheelStartedAt = Date.now();
+  while (Date.now() - wheelStartedAt < 3000) {
+    await denseRoot.dispatchEvent("wheel", {
+      deltaY: -180,
+      deltaMode: 0,
+      clientX: 520,
+      clientY: 420,
+      bubbles: true,
+      cancelable: true
+    });
+    await densePage.waitForTimeout(50);
+  }
+  const frameSample = await frameSamplePromise;
+  const denseZoomed = await layerTransform(densePage);
+  assert.notEqual(denseZoomed, denseInitial, "continuous dense wheel interaction should keep updating the viewport");
+  assert.ok(frameSample.fps >= 50, `dense wheel interaction should stay at or above 50fps, got ${frameSample.fps.toFixed(1)}fps`);
+
+  if (artifactDir) {
+    await densePage.screenshot({ path: path.join(artifactDir, "stage-4.5-offline-dense-wheel.png"), fullPage: true });
+    await fs.writeFile(
+      path.join(artifactDir, "stage-4.5-offline-dense-wheel.json"),
+      `${JSON.stringify({
+        viewport: "1440x960",
+        durationMs: Math.round(frameSample.durationMs),
+        frames: frameSample.frames,
+        fps: Math.round(frameSample.fps * 10) / 10,
+        transformChanged: denseZoomed !== denseInitial
+      }, null, 2)}\n`
+    );
+  }
+}
+
+async function runOfflineThemeChecks(page) {
+  await page.waitForFunction(() => document.querySelector(".llm-wiki-graph-engine")?.dataset.theme === "shan-shui");
+  await page.getByRole("button", { name: "切换墨夜主题" }).click();
+  await page.waitForFunction(() => document.querySelector(".llm-wiki-graph-engine")?.dataset.theme === "mo-ye");
+  await page.getByRole("button", { name: "切换山水主题" }).click();
+  await page.waitForFunction(() => document.querySelector(".llm-wiki-graph-engine")?.dataset.theme === "shan-shui");
+}
+
+async function layerTransform(page) {
+  return page.locator("[data-viewport-layer='true']").evaluate((element) => element.style.transform);
+}
+
+async function waitForLayerTransform(page, previous) {
+  const selector = "[data-viewport-layer='true']";
+  await page.waitForFunction(
+    ({ selector, previous }) => {
+      const element = document.querySelector(selector);
+      return Boolean(element && element.style.transform && element.style.transform !== previous);
+    },
+    { selector, previous },
+    { timeout: 3000 }
+  );
+  return layerTransform(page);
+}
+
+async function expectNoPressedNodes(page, message) {
+  const pressed = await page.locator(".node[aria-pressed='true']").count();
+  assert.equal(pressed, 0, message);
+}
+
+async function assertOfflineReaderMeta(page, expected) {
+  const reader = page.locator(".graph-reader[data-state='open']");
+  await reader.locator(".graph-reader-title", { hasText: expected.title }).waitFor();
+  const meta = reader.locator(".graph-reader-meta");
+  const metaItems = await meta.locator("span").allInnerTexts();
+  assert.ok(metaItems.includes(expected.typeLabel), `offline reader meta should include type ${expected.typeLabel}`);
+  assert.ok(metaItems.includes(expected.date), `offline reader meta should include date ${expected.date}`);
+  assert.ok(metaItems.includes(expected.source), `offline reader meta should include source ${expected.source}`);
+  if (expected.sourceLink) {
+    const sourceLink = reader.locator(".graph-reader-source");
+    await sourceLink.waitFor();
+    assert.equal(await sourceLink.innerText(), expected.sourceLink, "source pages should expose their source path as a reader link");
+  } else {
+    assert.equal(await reader.locator(".graph-reader-source").count(), 0, "non-source pages should not expose source path reader links");
+  }
+  await assertNoOfflineAskActions(reader);
+}
+
+async function runOfflinePinReloadCheck(page) {
+  await page.evaluate(() => {
+    const key = window.__LLM_WIKI_GRAPH_PINS_KEY__;
+    if (!key) throw new Error("offline graph pins key should be published");
+    window.localStorage.setItem(key, JSON.stringify({ "/fake/wiki/entities/A.md": { x: 333, y: 222 } }));
+  });
+  await page.reload();
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.waitForSelector(".node[data-id='A'][data-pinned='true']");
+  const pinnedCount = await page.locator("[data-llm-wiki-graph-root='true']").evaluate((element) => element.dataset.pinnedCount);
+  assert.equal(pinnedCount, "1", "offline localStorage pins should survive reload");
+}
+
+async function runSearchKeyboardChecks(page, message) {
+  const root = page.locator("[data-llm-wiki-graph-root='true']");
+  await root.click({ position: { x: 24, y: 24 } });
+  await root.evaluate((element) => element.focus({ preventScroll: true }));
+  await page.keyboard.press(searchShortcut());
+  await waitForSearchState(page, "open");
+
+  const input = page.locator(".graph-search-input");
+  await input.fill("节点");
+  await page.waitForSelector('.node[data-search-state="match"]');
+  const matches = await page.locator('.node[data-search-state="match"]').count();
+  assert.ok(matches >= 2, `${message}: query should match multiple nodes`);
+  assert.equal(
+    await page.locator('.node[data-search-state="faded"]').count(),
+    0,
+    `${message}: broad query should not fade matching fixture nodes`
+  );
+
+  const beforeFocus = await layerTransform(page);
+  await input.press("Enter");
+  await page.waitForSelector('.node[data-search-focus="true"]');
+  const firstFocus = await focusedSearchNodeId(page);
+  await input.press("Enter");
+  await page.waitForFunction((previous) => {
+    const focused = document.querySelector('.node[data-search-focus="true"]');
+    return Boolean(focused && focused.dataset.id && focused.dataset.id !== previous);
+  }, firstFocus);
+  const secondFocus = await focusedSearchNodeId(page);
+  assert.notEqual(secondFocus, firstFocus, `${message}: Enter should cycle to another result`);
+  assert.notEqual(
+    await waitForLayerTransform(page, beforeFocus),
+    beforeFocus,
+    `${message}: Enter should move the viewport to the focused result`
+  );
+
+  await input.press("Escape");
+  await waitForSearchState(page, "closed");
+  assert.equal(
+    await page.locator('.node[data-search-state="match"], .node[data-search-state="faded"]').count(),
+    0,
+    `${message}: Escape should restore search visual state`
+  );
+  assert.equal(
+    await page.locator('.node[data-search-focus="true"]').count(),
+    0,
+    `${message}: Escape should clear the focused search result`
+  );
+}
+
+async function focusedSearchNodeId(page) {
+  return page.locator('.node[data-search-focus="true"]').evaluate((element) => element.dataset.id || "");
+}
+
+function searchShortcut() {
+  return process.platform === "darwin" ? "Meta+F" : "Control+F";
+}
+
+async function waitForSearchState(page, state) {
+  await page.waitForFunction((state) => {
+    return document.querySelector(".graph-search")?.dataset.state === state;
+  }, state);
+}
+
+async function runLegendChecks(page, options) {
+  await waitForToolbarPanel(page, "closed");
+  await openToolbarFilters(page);
+  await runTypeFilterChecks(page);
+  await runEdgeLegendChecks(page);
+  const row = page.locator(".community-legend-row").first();
+  await row.hover();
+  await page.waitForSelector('.node[data-community-state="faded"]');
+  await page.mouse.move(900, 120);
+
+  if (options.persistReload) {
+    await page.reload();
+    await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+    await waitForToolbarPanel(page, "filters");
+    await closeToolbarWithBlankClick(page);
+    await waitForToolbarPanel(page, "closed");
+    await page.reload();
+    await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+    await waitForToolbarPanel(page, "closed");
+    await openToolbarFilters(page);
+  }
+
+  await page.waitForSelector(".edge");
+  const focusableCommunity = await firstCommunityWithInternalEdge(page);
+  const focusRow = page.locator(`.community-legend-row[data-community-id="${cssString(focusableCommunity)}"]`);
+  const beforeClick = await layerTransform(page);
+  const globalEdge = await page.locator(".edge").first().evaluate((edge) => ({
+    opacity: Number((edge instanceof SVGPathElement ? edge.style.opacity : "0") || "0"),
+    strokeWidth: Number((edge instanceof SVGPathElement ? edge.style.strokeWidth : "0") || "0")
+  }));
+  const initialNodes = await page.locator(".node").count();
+  await focusRow.click();
+  await waitForLayerTransform(page, beforeClick);
+  const focusedNodes = await page.locator(".node").count();
+  assert.ok(focusedNodes < initialNodes, "legend click should enter a focused community view with fewer visible nodes");
+  const focusedEdge = await page.locator(".edge").first().evaluate((edge) => ({
+    opacity: Number((edge instanceof SVGPathElement ? edge.style.opacity : "0") || "0"),
+    strokeWidth: Number((edge instanceof SVGPathElement ? edge.style.strokeWidth : "0") || "0")
+  }));
+  assert.ok(focusedEdge.opacity > globalEdge.opacity, "focused community view should make relation edges more visible");
+  assert.ok(focusedEdge.strokeWidth > globalEdge.strokeWidth, "focused community view should make relation edges fuller");
+  const selected = await page.locator(".node[aria-pressed='true']").count();
+  assert.ok(selected >= 1, "legend click should select the community nodes");
+
+  if (options.expectWorkbenchDrawer) {
+    await page.waitForSelector(".drawer-panel-open");
+    await page.locator(".drawer-panel-open .drawer-title", { hasText: "选区" }).waitFor();
+    await page.locator(".drawer-header button").last().click();
+    await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+    assert.equal(
+      await page.locator(".node").count(),
+      focusedNodes,
+      "closing the workbench selection drawer should keep the focused community visible"
+    );
+    await expectNoPressedNodes(page, "closing the workbench selection drawer should clear highlights but not leave community focus");
+
+    await closeToolbarWithBlankClick(page);
+    await waitForToolbarPanel(page, "closed");
+    const target = await rightmostNodeSnapshot(page);
+    await page.locator(`.node[data-id="${cssString(target.id)}"]`).click();
+    await page.waitForSelector(".drawer-panel-open");
+    await page.locator(".drawer-panel-open .drawer-title").waitFor();
+    const afterOpen = await nodeSnapshot(page, target.id);
+    const drift = Math.abs(afterOpen.centerRatioX - target.centerRatioX);
+    assert.ok(
+      drift <= 0.16,
+      `opening the workbench reader drawer should keep the clicked node visually anchored; drift=${drift.toFixed(3)}`
+    );
+    assert.ok(
+      afterOpen.centerRatioX >= 0.18 && afterOpen.centerRatioX <= 0.78,
+      `clicked node should remain in a comfortable visible band after drawer opens; ratio=${afterOpen.centerRatioX.toFixed(3)}`
+    );
+    await page.keyboard.press("Escape");
+    await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  } else {
+    await assertOfflineSelectionPanel(page, "community");
+  }
+}
+
+async function firstCommunityWithInternalEdge(page) {
+  const communityId = await page.evaluate(() => {
+    const nodeCommunity = new Map();
+    for (const node of document.querySelectorAll(".node")) {
+      nodeCommunity.set(node.getAttribute("data-id"), node.getAttribute("data-community"));
+    }
+    for (const edge of document.querySelectorAll(".edge")) {
+      const from = edge.getAttribute("data-from");
+      const to = edge.getAttribute("data-to");
+      const fromCommunity = nodeCommunity.get(from);
+      if (fromCommunity && fromCommunity === nodeCommunity.get(to)) return fromCommunity;
+    }
+    return "";
+  });
+  assert.notEqual(communityId, "", "fixture should include a community with at least one internal relation edge");
+  return communityId;
+}
+
+async function runEdgeLegendChecks(page) {
+  await page.getByRole("button", { name: "图例" }).click();
+  await waitForToolbarPanel(page, "legend");
+  await page.locator(".graph-edge-legend").waitFor();
+  await page.locator(".graph-edge-legend-relation", { hasText: "矛盾" }).waitFor();
+  await page.locator(".graph-edge-legend-confidence", { hasText: "推断" }).waitFor();
+  await hoverFirstEdgeMidpoint(page);
+  await page.waitForSelector(".graph-hover-preview[data-state='open'][data-kind='edge']");
+  const preview = page.locator(".graph-hover-preview");
+  await preview.locator(".graph-hover-preview-type", { hasText: "关系" }).waitFor();
+  await preview.locator(".graph-hover-preview-title").waitFor();
+  await assertBoxInsideViewport(page, ".graph-hover-preview", "edge relation hover preview should stay inside viewport");
+  await page.getByRole("button", { name: "筛选" }).click();
+  await waitForToolbarPanel(page, "filters");
+}
+
+async function hoverFirstEdgeMidpoint(page) {
+  const point = await page.locator(".edge").first().evaluate((edge) => {
+    if (!(edge instanceof SVGPathElement)) throw new Error("edge should be an SVG path");
+    const svg = edge.ownerSVGElement;
+    if (!svg) throw new Error("edge should have an owner SVG");
+    const length = edge.getTotalLength();
+    const mid = edge.getPointAtLength(length / 2);
+    const rect = svg.getBoundingClientRect();
+    const viewBox = svg.viewBox.baseVal;
+    return {
+      x: rect.left + (mid.x - viewBox.x) / viewBox.width * rect.width,
+      y: rect.top + (mid.y - viewBox.y) / viewBox.height * rect.height
+    };
+  });
+  await page.mouse.move(point.x, point.y);
+}
+
+async function runTypeFilterChecks(page) {
+  const option = page.locator(".graph-type-filter-option").first();
+  await option.waitFor();
+  const type = await option.locator("input").evaluate((input) => input.dataset.type || "");
+  assert.notEqual(type, "", "type filter option should publish its graph node type");
+  const toggle = option.locator("input");
+  const selector = `.node[data-type="${cssString(type)}"]`;
+  const initialTypeNodes = await page.locator(selector).count();
+  const initialNodes = await page.locator(".node").count();
+  await toggle.uncheck();
+  await page.waitForFunction((selector) => document.querySelectorAll(selector).length === 0, selector);
+  const filteredNodes = await page.locator(".node").count();
+  assert.ok(filteredNodes < initialNodes, "turning off a node type should reduce visible graph nodes");
+  await toggle.check();
+  await page.waitForFunction(
+    ({ selector, initialTypeNodes }) => document.querySelectorAll(selector).length === initialTypeNodes,
+    { selector, initialTypeNodes }
+  );
+}
+
+function cssString(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+async function rightmostNodeSnapshot(page) {
+  const nodes = await page.locator(".node").evaluateAll((elements) => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    if (!root) throw new Error("graph root should exist");
+    const rootRect = root.getBoundingClientRect();
+    return elements.map((element) => {
+      const rect = element.getBoundingClientRect();
+      return {
+        id: element.getAttribute("data-id") || "",
+        centerRatioX: (rect.left + rect.width / 2 - rootRect.left) / Math.max(1, rootRect.width),
+        centerRatioY: (rect.top + rect.height / 2 - rootRect.top) / Math.max(1, rootRect.height)
+      };
+    }).filter((item) => item.id);
+  });
+  assert.ok(nodes.length > 0, "focused community should expose at least one node");
+  return nodes.sort((a, b) => b.centerRatioX - a.centerRatioX)[0];
+}
+
+async function nodeSnapshot(page, id) {
+  return page.locator(`.node[data-id="${cssString(id)}"]`).evaluate((element) => {
+    const root = document.querySelector("[data-llm-wiki-graph-root='true']");
+    if (!root) throw new Error("graph root should exist");
+    const rootRect = root.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
+    return {
+      id: element.getAttribute("data-id") || "",
+      centerRatioX: (rect.left + rect.width / 2 - rootRect.left) / Math.max(1, rootRect.width),
+      centerRatioY: (rect.top + rect.height / 2 - rootRect.top) / Math.max(1, rootRect.height)
+    };
+  });
+}
+
+async function assertOfflineSelectionPanel(page, expectedMode) {
+  await page.waitForSelector(".graph-selection-panel[data-state='open']");
+  const panel = page.locator(".graph-selection-panel");
+  await panel.getByText("Shift+点击 增删节点").waitFor();
+  await panel.getByText("内部关联").waitFor();
+  assert.ok(await panel.locator(".graph-selection-fact").count() >= 4, "offline selection panel should show structural facts");
+  assert.equal(await panel.getByText("提问选区").count(), 0, "offline selection panel should not show ask actions");
+  await assertNoOfflineAskActions(panel);
+  if (expectedMode === "community") {
+    await panel.getByText(/社区选区/).waitFor();
+  } else {
+    await panel.getByText(/手动选区|选中页面/).waitFor();
+  }
+}
+
+async function assertNoOfflineAskActions(scope) {
+  for (const label of ["提问选区", "在对话中引用", "它和谁有关", "总结这一组", "探索潜在联系"]) {
+    assert.equal(await scope.getByText(label).count(), 0, `offline graph should not show ${label}`);
+  }
+}
+
+async function openToolbarFilters(page) {
+  const state = await page.locator("[data-llm-wiki-graph-root='true']").evaluate((element) => element.dataset.toolbarPanel || "");
+  if (state !== "filters") {
+    await page.getByRole("button", { name: "筛选" }).click();
+  }
+  await waitForToolbarPanel(page, "filters");
+  await page.waitForSelector('.graph-toolbar-panel[data-state="filters"] .community-legend-row');
+}
+
+async function closeToolbarWithBlankClick(page) {
+  const root = page.locator("[data-llm-wiki-graph-root='true']");
+  const pointer = {
+    button: 0,
+    pointerId: 1,
+    clientX: 32,
+    clientY: 128,
+    bubbles: true,
+    cancelable: true
+  };
+  await root.dispatchEvent("pointerdown", {
+    ...pointer,
+    buttons: 1
+  });
+  await root.dispatchEvent("pointerup", pointer);
+}
+
+async function waitForToolbarPanel(page, state) {
+  await page.waitForFunction((state) => {
+    return document.querySelector(".llm-wiki-graph-engine")?.dataset.toolbarPanel === state;
+  }, state);
+}
+
+async function runWorkbenchChecks(browser) {
+  assert.notEqual(workbenchUrl, "", "GRAPH_STAGE_4_5_WORKBENCH_URL must point at the workbench dev server");
+  const page = await openWorkbenchGraphPage(browser, { width: 1440, height: 960 }, "dark");
+  await runSearchKeyboardChecks(page, "workbench graph search should support shortcut, cycling, focus, and Escape");
+  await page.locator(".node[data-id='A']").click();
+
+  await page.waitForSelector(".drawer-panel-open");
+  const drawer = page.locator(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "节点A" }).waitFor();
+  await drawer.getByText("这是节点A的正文").waitFor();
+  await drawer.getByRole("button", { name: "在对话中引用" }).waitFor();
+  await drawer.getByRole("button", { name: "它和谁有关" }).waitFor();
+  await drawer.getByRole("button", { name: "它和谁有关" }).click();
+  await drawer.locator(".drawer-title", { hasText: "选区" }).waitFor();
+  await drawer.getByText("Shift+点击 增删节点").waitFor();
+  const readerNeighborFacts = await drawer.locator(".graph-selection-fact").count();
+  assert.ok(readerNeighborFacts >= 3, "reader related action should upgrade the page to a neighbor selection");
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await expectNoPressedNodes(page, "Escape should clear the reader related selection");
+
+  await page.locator(".node[data-id='A']").click();
+  await page.waitForSelector(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "节点A" }).waitFor();
+  await drawer.getByRole("button", { name: "在对话中引用" }).click();
+  await page.getByText("@[选区:节点A · 1页] 在对话中引用").waitFor();
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await page.getByRole("button", { name: /图谱/ }).click();
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  await page.locator(".node[data-id='A']").click();
+  await page.waitForSelector(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "节点A" }).waitFor();
+  assert.equal(await drawer.getByText("学习队列").count(), 0, "graph reader should not show learning queue");
+  assert.equal(await drawer.getByText("摘要").count(), 0, "graph reader should not show a summary block");
+  assert.equal(await drawer.getByText("相邻节点").count(), 0, "graph reader should not show a neighbor section");
+
+  await drawer.getByRole("link", { name: "wiki/entities/B.md" }).click();
+  await drawer.locator(".drawer-title", { hasText: "wiki/entities/B.md" }).waitFor();
+  await drawer.getByText("这是节点B的正文").waitFor();
+  const focused = await page.locator(".node[aria-pressed='true']").count();
+  assert.equal(focused, 1, "wikilink navigation should keep one graph node highlighted");
+  assert.equal(await page.locator(".graph-selection-panel").count(), 0, "selection should not use the old floating canvas panel");
+
+  if (artifactDir) {
+    await page.screenshot({ path: path.join(artifactDir, "stage-4.5-workbench-reader.png"), fullPage: true });
+  }
+
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await expectNoPressedNodes(page, "closing the graph reader should clear the graph highlight");
+
+  await page.keyboard.down("Shift");
+  await page.locator(".node[data-id='A']").click();
+  await page.keyboard.up("Shift");
+  await page.waitForSelector(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "选区" }).waitFor();
+  await drawer.getByText("Shift+点击 增删节点").waitFor();
+  assert.equal(await drawer.locator(".graph-selection-fact").count(), 0, "single-node selection should hide structural facts");
+  assert.equal(await drawer.getByText("探索潜在联系").count(), 0, "single-node selection should not show group exploration");
+
+  await page.keyboard.down("Shift");
+  await page.locator(".node[data-id='B']").click();
+  await page.keyboard.up("Shift");
+  await drawer.getByText("Shift+点击 增删节点").waitFor();
+  await drawer.getByText("总结这一组").waitFor();
+  assert.ok(await drawer.locator(".graph-selection-fact").count() >= 3, "multi-node selection should show structural facts");
+
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await expectNoPressedNodes(page, "Escape should clear the workbench selection drawer and graph highlights");
+  await runLegendChecks(page, { persistReload: false, expectWorkbenchDrawer: true });
+  await runWorkbenchThemeViewportMatrix(browser);
+}
+
+async function openWorkbenchGraphPage(browser, viewport, theme) {
+  const page = await browser.newPage({ viewport });
+  await page.addInitScript(({ theme }) => {
+    window.localStorage.setItem("llm-wiki-agent-main-view", "graph");
+    window.localStorage.setItem("llm-wiki-agent-theme", theme);
+  }, { theme });
+  await page.goto(workbenchUrl);
+  await page.waitForSelector(".app-shell");
+  const kbButton = page.getByRole("button", { name: /Stage 4\.5 Workbench Test|workbench-kb/ });
+  if (await kbButton.count() && await kbButton.first().isVisible()) {
+    await kbButton.first().click();
+  }
+  const graphButton = page.getByRole("button", { name: /图谱/ });
+  if (await graphButton.count() && await graphButton.first().isVisible()) {
+    await graphButton.first().click();
+  }
+  await page.waitForSelector("[data-llm-wiki-graph-root='true']");
+  const expectedGraphTheme = theme === "dark" ? "mo-ye" : "shan-shui";
+  await page.waitForFunction((expectedGraphTheme) => {
+    return document.querySelector(".graph-screen")?.dataset.graphTheme === expectedGraphTheme
+      && document.querySelector(".llm-wiki-graph-engine")?.dataset.theme === expectedGraphTheme;
+  }, expectedGraphTheme);
+  return page;
+}
+
+async function runWorkbenchThemeViewportMatrix(browser) {
+  const cases = [
+    { name: "desktop-light", viewport: { width: 1440, height: 960 }, theme: "light" },
+    { name: "desktop-dark", viewport: { width: 1440, height: 960 }, theme: "dark" },
+    { name: "tablet-light", viewport: { width: 768, height: 1024 }, theme: "light" },
+    { name: "tablet-dark", viewport: { width: 768, height: 1024 }, theme: "dark" },
+    { name: "mobile-light", viewport: { width: 390, height: 844 }, theme: "light" },
+    { name: "mobile-dark", viewport: { width: 390, height: 844 }, theme: "dark" }
+  ];
+  for (const item of cases) {
+    const page = await openWorkbenchGraphPage(browser, item.viewport, item.theme);
+    await runWorkbenchThemeViewportChecks(page, item);
+    await page.close();
+  }
+}
+
+async function runWorkbenchThemeViewportChecks(page, item) {
+  await runPreviewCheck(page, `${item.name} hover preview should open`);
+  await runSearchKeyboardChecks(page, `${item.name} workbench graph search should work`);
+  await openToolbarFilters(page);
+  await page.locator(".community-legend-row").first().hover();
+  await page.waitForSelector('.node[data-community-state="faded"]');
+  await page.mouse.move(80, 80);
+  await closeToolbarWithBlankClick(page);
+  await waitForToolbarPanel(page, "closed");
+
+  await page.locator(".node[data-id='A']").click();
+
+  await page.waitForSelector(".drawer-panel-open");
+  const drawer = page.locator(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "节点A" }).waitFor();
+  await drawer.getByText("这是节点A的正文").waitFor();
+  await assertNoViewportOverflow(page, `.drawer reader ${item.name}`);
+  assert.equal(await page.locator(".graph-selection-panel").count(), 0, `${item.name} should not use the old floating canvas panel`);
+
+  if (artifactDir) {
+    await page.screenshot({ path: path.join(artifactDir, `stage-4.5-workbench-${item.name}.png`), fullPage: true });
+  }
+
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await expectNoPressedNodes(page, `${item.name} Escape should clear the graph reader highlight`);
+
+  await page.keyboard.down("Shift");
+  await page.locator(".node[data-id='A']").click();
+  await page.keyboard.up("Shift");
+  await page.waitForSelector(".drawer-panel-open");
+  await drawer.locator(".drawer-title", { hasText: "选区" }).waitFor();
+  await drawer.getByText("Shift+点击 增删节点").waitFor();
+  await assertNoViewportOverflow(page, `.drawer selection ${item.name}`);
+
+  await page.keyboard.press("Escape");
+  await page.waitForSelector(".drawer-panel-open", { state: "detached" });
+  await expectNoPressedNodes(page, `${item.name} Escape should clear the selection drawer and graph highlights`);
+}
+
+async function runPreviewCheck(page, message) {
+  const node = page.locator(".node[data-id='A']");
+  await node.hover();
+  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();
+  await assertBoxInsideViewport(page, ".graph-hover-preview", message);
+  await page.mouse.move(20, 20);
+  await waitForPreviewState(page, "closed");
+}
+
+async function waitForPreviewState(page, state) {
+  await page.waitForFunction((state) => {
+    return document.querySelector(".graph-hover-preview")?.dataset.state === state;
+  }, state);
+}
+
+async function assertNoViewportOverflow(page, label) {
+  await assertBoxInsideViewport(page, ".drawer-panel-open", label);
+  await assertBoxInsideViewport(page, "[data-llm-wiki-graph-root='true']", label);
+}
+
+async function assertBoxInsideViewport(page, selector, label) {
+  const box = await page.locator(selector).boundingBox();
+  assert.ok(box, `${label}: ${selector} should have a bounding box`);
+  const viewport = page.viewportSize();
+  assert.ok(viewport, `${label}: viewport should be available`);
+  assert.ok(box.x >= -1, `${label}: ${selector} should not overflow left`);
+  assert.ok(box.y >= -1, `${label}: ${selector} should not overflow top`);
+  assert.ok(box.x + box.width <= viewport.width + 1, `${label}: ${selector} should not overflow right`);
+  assert.ok(box.y + box.height <= viewport.height + 1, `${label}: ${selector} should not overflow bottom`);
+}