@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/templates/graph-styles/wash/graph-wash.js

@@ -0,0 +1,1009 @@
+/* DEPRECATED: Legacy wash runtime retained for one release cycle after Stage 4 engine HTML migration. Do not extend; use packages/graph-engine instead. */
+/* ============================================================
+   Knowledge Graph - Oriental editorial atlas runtime
+   ============================================================ */
+(function () {
+  "use strict";
+
+  const helpers = window.WikiGraphWashHelpers;
+  if (!helpers) {
+    console.error("[wiki] graph-wash-helpers.js is missing or failed to load");
+    return;
+  }
+
+  const {
+    createSafeStorage,
+    getWikiStorageNamespace,
+    defaultQueue,
+    normalizeQueue,
+    toggleQueueFavorite,
+    appendQueueNote,
+    summarizeQueue,
+    buildAtlasModel,
+    deriveAtlasLayout,
+    resolveAtlasVisibleSnapshot,
+    resolveAtlasSelectedNodeId,
+    atlasNodePoint,
+    getAtlasModelBounds,
+    fitAtlasViewport,
+    centerAtlasViewportOnPoint,
+    zoomAtlasViewport,
+    atlasViewportToMinimapRect,
+    atlasPointToMinimap,
+    minimapPointToAtlasPoint,
+    atlasConfidenceLabel,
+    atlasTypeLabel,
+    atlasNodeKind,
+    stripAtlasMarkdown
+  } = helpers;
+
+  const DENSITY_SMALL_LIMIT = 80;
+  const DENSITY_MEDIUM_LIMIT = 200;
+  const DENSITY_LARGE_LIMIT = 500;
+  const QUEUE_NOTE_LIMIT = 50;
+  const NOTE_EXCERPT_LIMIT = 140;
+  const COMMUNITY_COLORS = ["#8b2e24", "#315f72", "#4b7564", "#b7791f", "#6f557f", "#3e6b4b", "#9b6a36", "#5d6f91"];
+
+  const dataEl = document.getElementById("graph-data");
+  let DATA;
+  let dataError = false;
+  try {
+    DATA = dataEl ? JSON.parse(dataEl.textContent) : window.SAMPLE_GRAPH;
+  } catch (err) {
+    console.error("[wiki] graph data parse failed:", err);
+    DATA = { meta: {}, nodes: [], edges: [], insights: { meta: { degraded: true } } };
+    dataError = true;
+  }
+
+  const app = document.getElementById("app");
+  const atlas = document.getElementById("atlas");
+  const nodeLayer = document.getElementById("node-layer");
+  const edgeLayer = document.getElementById("edge-layer");
+  const communityList = document.getElementById("community-list");
+  const startList = document.getElementById("start-list");
+  const searchInput = document.getElementById("search");
+  const noResults = document.getElementById("no-results");
+  const canvasTitle = document.getElementById("canvas-title");
+  const canvasSubtitle = document.getElementById("canvas-subtitle");
+  const insightTitle = document.getElementById("insight-title");
+  const insightCopy = document.getElementById("insight-copy");
+  const drawer = document.getElementById("drawer");
+  const drawerNeighbors = document.getElementById("neighbor-details");
+  const drawerNeighborsHeading = drawerNeighbors ? drawerNeighbors.querySelector("summary") : null;
+  const neighborList = document.getElementById("neighbor-list");
+  const minimapEl = document.getElementById("minimap");
+  const minimapToggle = document.getElementById("minimap-toggle");
+  const minimapSvg = document.getElementById("mini-map-svg");
+
+  if (!atlas || !nodeLayer || !edgeLayer) {
+    console.error("[wiki] atlas shell is incomplete");
+    return;
+  }
+
+  let rawLocalStorage = null;
+  try {
+    rawLocalStorage = window.localStorage;
+  } catch (_) {}
+
+  const atlasModel = buildAtlasModel(DATA);
+  const atlasLayout = deriveAtlasLayout(atlasModel);
+  const safeLocalStorage = createSafeStorage(rawLocalStorage, console.warn);
+  const storageNamespace = getWikiStorageNamespace(atlasModel.meta, window.location && window.location.pathname);
+
+  const state = {
+    atlasModel,
+    atlasLayout,
+    queue: loadQueueState(),
+    ui: {
+      selectedNodeId: null,
+      activeCommunityId: "all",
+      focusMode: "all",
+      query: "",
+      dimUnselected: false,
+      dataMode: dataError ? "error" : (atlasModel.nodes.length ? "normal" : "empty"),
+      neighborExpanded: false,
+      filters: { EXTRACTED: true, INFERRED: true, AMBIGUOUS: true, UNVERIFIED: true }
+    },
+    viewport: { x: 0, y: 0, scale: 1 },
+    viewportReady: false,
+    visible: null
+  };
+
+  let viewportPaintFrame = 0;
+  let panState = null;
+
+  function queueStorageKey(name) {
+    return storageNamespace + ":" + name;
+  }
+
+  function loadQueueState() {
+    const raw = safeLocalStorage.get(queueStorageKey("queue"));
+    if (!raw) return defaultQueue();
+    try {
+      return normalizeQueue(JSON.parse(raw));
+    } catch (err) {
+      console.warn("[wiki] queue storage parse failed:", err);
+      return defaultQueue();
+    }
+  }
+
+  function persistQueueState() {
+    safeLocalStorage.set(queueStorageKey("queue"), JSON.stringify(state.queue));
+  }
+
+  function escapeHtml(value) {
+    return String(value == null ? "" : value).replace(/[&<>"']/g, (ch) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    })[ch]);
+  }
+
+  function clampWeight(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) return 0.6;
+    return Math.max(0, Math.min(1, numeric));
+  }
+
+  function edgeStrokeWidth(edge) {
+    return 1.1 + clampWeight(edge && edge.weight) * 1.8;
+  }
+
+  function edgeOpacity(edge) {
+    return 0.32 + clampWeight(edge && edge.weight) * 0.44;
+  }
+
+  function edgeStrengthSize(edge) {
+    return 6 + clampWeight(edge && edge.weight) * 8;
+  }
+
+  function currentDensityMode() {
+    return state.visible ? state.visible.densityMode : "card";
+  }
+
+  function communityColor(communityId) {
+    const community = state.atlasModel.communityById[communityId];
+    const index = community ? community.color_index || 0 : 0;
+    return COMMUNITY_COLORS[index % COMMUNITY_COLORS.length];
+  }
+
+  function getSelectedNode() {
+    const selectedNodeId = resolveAtlasSelectedNodeId(state.atlasModel, state.visible, state.ui.selectedNodeId);
+    return selectedNodeId ? state.atlasModel.byId[selectedNodeId] || null : null;
+  }
+
+  function getPreviewStartEntry(visibleSnapshot) {
+    if (state.ui.selectedNodeId) return null;
+    const visible = visibleSnapshot || state.visible || refreshVisibleSnapshot();
+    const visibleIds = new Set((visible.node_ids || []).map(String));
+    const starts = visible.starts && visible.starts.length
+      ? visible.starts
+      : state.atlasModel.starts.filter((entry) => entry && entry.node && visibleIds.has(entry.node.id));
+    if (starts.length) return starts[0];
+    const fallback = (visible.nodes || []).slice().filter((node) => {
+      return node && (node.summary || node.content || node.source_path);
+    }).sort((left, right) => (right.priority || 0) - (left.priority || 0))[0];
+    return fallback ? { node: fallback, reason: "当前范围 · 推荐预览" } : null;
+  }
+
+  function refreshVisibleSnapshot() {
+    state.visible = resolveAtlasVisibleSnapshot(state.atlasModel, state.atlasLayout, state.ui);
+    state.ui.selectedNodeId = resolveAtlasSelectedNodeId(state.atlasModel, state.visible, state.ui.selectedNodeId);
+    return state.visible;
+  }
+
+  function currentViewportSize() {
+    const rect = atlas.getBoundingClientRect();
+    return {
+      width: rect && rect.width ? rect.width : 1000,
+      height: rect && rect.height ? rect.height : 680
+    };
+  }
+
+  function viewportOptions() {
+    return { minScale: 0.62, maxScale: 3.2 };
+  }
+
+  function edgeTransformForViewport(viewport, size) {
+    const safeSize = size || currentViewportSize();
+    const x = (viewport.x / safeSize.width) * 1000;
+    const y = (viewport.y / safeSize.height) * 680;
+    return `translate(${x} ${y}) scale(${viewport.scale})`;
+  }
+
+  function applyViewportTransform() {
+    const size = currentViewportSize();
+    if (nodeLayer) {
+      nodeLayer.style.transform = `translate(${state.viewport.x}px, ${state.viewport.y}px) scale(${state.viewport.scale})`;
+    }
+    if (edgeLayer) {
+      edgeLayer.setAttribute("transform", edgeTransformForViewport(state.viewport, size));
+    }
+    updateMinimapViewport();
+  }
+
+  function updateMinimapViewport() {
+    if (!minimapSvg) return;
+    const rect = minimapSvg.querySelector(".mini-map-viewport");
+    if (!rect) return;
+    const miniRect = atlasViewportToMinimapRect(state.viewport, currentViewportSize());
+    rect.setAttribute("x", String(miniRect.x));
+    rect.setAttribute("y", String(miniRect.y));
+    rect.setAttribute("width", String(miniRect.width));
+    rect.setAttribute("height", String(miniRect.height));
+  }
+
+  function scheduleViewportPaint() {
+    if (viewportPaintFrame) return;
+    viewportPaintFrame = window.requestAnimationFrame(() => {
+      viewportPaintFrame = 0;
+      applyViewportTransform();
+    });
+  }
+
+  function setViewport(nextViewport, immediate) {
+    state.viewport = helpers.clampAtlasViewport(nextViewport, currentViewportSize(), viewportOptions());
+    if (immediate) {
+      if (viewportPaintFrame) {
+        window.cancelAnimationFrame(viewportPaintFrame);
+        viewportPaintFrame = 0;
+      }
+      applyViewportTransform();
+    } else {
+      scheduleViewportPaint();
+    }
+  }
+
+  function fitVisibleViewport() {
+    const visible = state.visible || refreshVisibleSnapshot();
+    const bounds = getAtlasModelBounds(visible.nodes, visible.nodes.length <= 1 ? 160 : 56);
+    setViewport(fitAtlasViewport(bounds, currentViewportSize(), { padding: 0.82, minScale: 0.62, maxScale: 1.18 }), true);
+    state.viewportReady = true;
+  }
+
+  function centerViewportOnNode(nodeId) {
+    const node = state.atlasModel.byId[nodeId];
+    if (!node) return;
+    const scale = Math.max(1.05, Math.min(state.viewport.scale || 1, 1.6));
+    setViewport(centerAtlasViewportOnPoint(atlasNodePoint(node), currentViewportSize(), scale, viewportOptions()), true);
+    state.viewportReady = true;
+  }
+
+  function makePath(a, b, edge) {
+    const sourcePoint = atlasNodePoint(a);
+    const targetPoint = atlasNodePoint(b);
+    const x1 = sourcePoint.x;
+    const y1 = sourcePoint.y;
+    const x2 = targetPoint.x;
+    const y2 = targetPoint.y;
+    const mx = (x1 + x2) / 2;
+    const my = (y1 + y2) / 2;
+    const curve = Math.max(-76, Math.min(76, (a.y - b.y) * 1.8 + (clampWeight(edge.weight) - 0.5) * 24));
+    return `M ${x1} ${y1} Q ${mx + curve} ${my - 22} ${x2} ${y2}`;
+  }
+
+  function edgeClass(edge) {
+    return String(edge.type || "EXTRACTED").toLowerCase();
+  }
+
+  function connectedIds(id) {
+    const out = new Set([id]);
+    state.atlasModel.edges.forEach((edge) => {
+      if (edge.source === id) out.add(edge.target);
+      if (edge.target === id) out.add(edge.source);
+    });
+    return out;
+  }
+
+  function isNodeImportant(node) {
+    return !!(node && state.visible && state.visible.importantNodeIds && state.visible.importantNodeIds[node.id]);
+  }
+
+  function nodeVisualRole(node, displayMode, previewNodeId) {
+    if (!node) return "landmark";
+    if (node.id === state.ui.selectedNodeId) return "cinnabar-note";
+    if (displayMode === "point" || displayMode === "overview") return "map-pin";
+    if (state.visible && state.visible.matchedNodeIds[node.id]) return "index-slip";
+    if (previewNodeId && node.id === previewNodeId) return "index-slip";
+    if (isNodeImportant(node)) return "index-slip";
+    return "landmark";
+  }
+
+  function nodeDisplayMode(node, previewNodeId) {
+    const mode = currentDensityMode();
+    if (!node) return "card";
+    if (node.id === state.ui.selectedNodeId) return "card";
+    if (state.visible && state.visible.matchedNodeIds[node.id]) return "card";
+    if (previewNodeId && node.id === previewNodeId && (mode === "overview" || mode === "point-plus-focus")) return "compact-card";
+    if (isNodeImportant(node) && (mode === "overview" || mode === "point-plus-focus")) return "compact-card";
+    if (mode === "overview") return state.visible.labelNodeIds[node.id] ? "compact-card" : "overview";
+    if (mode === "point-plus-focus") return state.visible.labelNodeIds[node.id] ? "compact-card" : "point";
+    return mode;
+  }
+
+  function renderTopbar() {
+    const title = document.getElementById("wiki-title");
+    if (title) title.textContent = `${state.atlasModel.meta.wiki_title} 知识舆图`;
+  }
+
+  function renderSidebar() {
+    if (!communityList || !startList) return;
+
+    const visible = state.visible || refreshVisibleSnapshot();
+    communityList.innerHTML = "";
+
+    const allButton = document.createElement("button");
+    allButton.className = "nav-item";
+    allButton.type = "button";
+    allButton.dataset.community = "all";
+    allButton.setAttribute("aria-pressed", state.ui.activeCommunityId === "all" ? "true" : "false");
+    allButton.innerHTML = `
+      <i class="swatch" style="background:${COMMUNITY_COLORS[0]}"></i>
+      <span class="nav-copy"><strong>全部社区</strong><span>${state.atlasModel.nodes.length} 个节点</span></span>
+      <span class="count">ALL</span>
+    `;
+    allButton.addEventListener("click", () => setCommunity("all"));
+    communityList.appendChild(allButton);
+
+    state.atlasModel.communities.forEach((community) => {
+      const button = document.createElement("button");
+      button.className = "nav-item";
+      button.type = "button";
+      button.dataset.community = community.id;
+      button.setAttribute("aria-pressed", state.ui.activeCommunityId === community.id ? "true" : "false");
+      button.innerHTML = `
+        <i class="swatch" style="background:${communityColor(community.id)}"></i>
+        <span class="nav-copy"><strong>${escapeHtml(community.label)}</strong><span>${community.node_count || 0} 个节点</span></span>
+        <span class="count">${community.node_count || 0}</span>
+      `;
+      button.addEventListener("click", () => setCommunity(community.id));
+      communityList.appendChild(button);
+    });
+
+    startList.innerHTML = "";
+    const previewEntry = getPreviewStartEntry(visible);
+    const previewNodeId = previewEntry && previewEntry.node ? previewEntry.node.id : null;
+    const starts = visible.starts.length ? visible.starts : state.atlasModel.starts;
+    starts.slice(0, 4).forEach((entry) => {
+      const node = entry.node;
+      const button = document.createElement("button");
+      button.className = "start-card";
+      button.type = "button";
+      button.dataset.previewStart = node.id === previewNodeId ? "true" : "false";
+      button.innerHTML = `<span class="card-copy"><strong>${escapeHtml(node.label)}</strong><span>${escapeHtml(entry.reason || atlasTypeLabel(node.type))}</span></span>`;
+      button.addEventListener("click", () => focusNode(node.id, true));
+      startList.appendChild(button);
+    });
+    if (!startList.children.length) {
+      const empty = document.createElement("div");
+      empty.className = "note-card";
+      empty.textContent = "暂无推荐起点。";
+      startList.appendChild(empty);
+    }
+
+    const summary = summarizeQueue(state.queue, state.atlasModel.byId, 3);
+    const metrics = document.querySelectorAll(".queue-metrics .metric b");
+    if (metrics[0]) metrics[0].textContent = summary.favorite_count;
+    if (metrics[1]) metrics[1].textContent = summary.note_count;
+    const queueList = document.querySelector(".queue-list");
+    if (queueList) {
+      queueList.innerHTML = "";
+      if (!summary.recent_items.length) {
+        const empty = document.createElement("div");
+        empty.className = "note-card";
+        empty.textContent = "选中节点后可加入学习队列。";
+        queueList.appendChild(empty);
+        return;
+      }
+      summary.recent_items.slice(0, 3).forEach((item) => {
+        const node = state.atlasModel.byId[item.node_id];
+        const button = document.createElement("button");
+        const kindLabel = item.kind === "note" ? "札记" : "待读";
+        const meta = node ? `${atlasTypeLabel(node.type)} · ${atlasConfidenceLabel(node.confidence)}` : "队列条目";
+        button.className = "queue-item";
+        button.type = "button";
+        button.dataset.kind = item.kind;
+        button.setAttribute("aria-current", item.node_id === state.ui.selectedNodeId ? "true" : "false");
+        button.innerHTML = `
+          <i class="queue-item__marker" aria-hidden="true"></i>
+          <span class="queue-item__copy"><strong>${escapeHtml(item.label)}</strong><span>${escapeHtml(meta)}</span></span>
+          <span class="queue-item__badge">${kindLabel}</span>
+        `;
+        button.addEventListener("click", () => focusNode(item.node_id, true));
+        queueList.appendChild(button);
+      });
+    }
+  }
+
+  function renderCanvas() {
+    const visible = state.visible || refreshVisibleSnapshot();
+    atlas.dataset.mode = state.ui.dataMode;
+    atlas.dataset.density = visible.densityMode;
+
+    edgeLayer.innerHTML = "";
+    visible.edges.forEach((edge) => {
+      const source = state.atlasModel.byId[edge.source];
+      const target = state.atlasModel.byId[edge.target];
+      if (!source || !target) return;
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", makePath(source, target, edge));
+      path.setAttribute("class", `edge ${edgeClass(edge)}`);
+      path.setAttribute("data-from", edge.source);
+      path.setAttribute("data-to", edge.target);
+      path.setAttribute("data-edge-id", edge.id);
+      path.style.strokeWidth = edgeStrokeWidth(edge);
+      path.style.opacity = edgeOpacity(edge);
+      edgeLayer.appendChild(path);
+    });
+
+    nodeLayer.innerHTML = "";
+    const previewEntry = getPreviewStartEntry(visible);
+    const previewNodeId = previewEntry && previewEntry.node ? previewEntry.node.id : null;
+    visible.nodes.forEach((node) => {
+      const displayMode = nodeDisplayMode(node, previewNodeId);
+      const visualRole = nodeVisualRole(node, displayMode, previewNodeId);
+      const button = document.createElement("button");
+      button.className = "node";
+      if (node.unavailable) button.classList.add("is-disabled");
+      if (displayMode === "compact-card") button.classList.add("is-compact");
+      if (displayMode === "point") button.classList.add("is-point");
+      if (displayMode === "overview") button.classList.add("is-overview");
+      if (visualRole === "index-slip") button.classList.add("is-index-slip");
+      if (visualRole === "cinnabar-note") button.classList.add("is-cinnabar-note");
+      if (visualRole === "map-pin") button.classList.add("is-map-pin");
+      if (node.id === previewNodeId) button.classList.add("is-preview-start");
+      if (state.visible && !state.visible.labelNodeIds[node.id]) button.classList.add("is-label-hidden");
+      button.type = "button";
+      button.dataset.id = node.id;
+      button.dataset.type = node.type;
+      button.dataset.community = node.community;
+      button.dataset.densityMode = displayMode;
+      button.dataset.visualRole = visualRole;
+      button.dataset.startNode = state.visible && state.visible.startNodeIds[node.id] ? "true" : "false";
+      button.dataset.previewStart = node.id === previewNodeId ? "true" : "false";
+      button.style.left = `${node.x}%`;
+      button.style.top = `${node.y}%`;
+      button.title = node.label;
+      button.setAttribute("aria-pressed", node.id === state.ui.selectedNodeId ? "true" : "false");
+      button.innerHTML = `
+        <span class="node-kind">${node.kind}</span>
+        <span class="node-name">${escapeHtml(node.label)}</span>
+        <span class="node-meta"><i class="spark"></i>${node.unavailable ? "来源暂不可用" : Math.round(node.priority || node.weight || 0)}</span>
+      `;
+      button.addEventListener("click", () => selectNode(node.id));
+      button.addEventListener("mouseenter", () => highlightNeighborhood(node.id));
+      button.addEventListener("mouseleave", () => applyFilters());
+      nodeLayer.appendChild(button);
+    });
+
+    applyFilters();
+    renderMinimap();
+    applyViewportTransform();
+  }
+
+  function setDrawerActions(mode, node) {
+    const queueAction = document.getElementById("queue-action");
+    const sourceAction = document.getElementById("source-action");
+    if (queueAction) {
+      queueAction.textContent = mode === "preview" ? "从这里开始" : "加入学习队列";
+      queueAction.disabled = mode === "empty";
+    }
+    if (sourceAction) {
+      sourceAction.textContent = "查看来源";
+      sourceAction.disabled = !(node && node.source_path);
+    }
+  }
+
+  function renderStartPreview(entry) {
+    const node = entry && entry.node;
+    if (!node) return false;
+    const neighbors = getNeighbors(node.id);
+    const community = state.atlasModel.communityById[node.community];
+    const communityLabel = community ? community.label : "未分组";
+    const excerpt = stripAtlasMarkdown(node.content || node.summary || "").slice(0, 220);
+
+    document.getElementById("drawer-kind").innerHTML = `<span class="spark"></span>从这里开始 · 预览`;
+    document.getElementById("drawer-title").textContent = node.label;
+    document.getElementById("drawer-subtitle").textContent = `${entry.reason || atlasTypeLabel(node.type)} · ${communityLabel} · 点击后进入阅读态`;
+    document.getElementById("drawer-summary").textContent = node.summary || excerpt || "这个节点适合作为当前图谱的起点。";
+    document.getElementById("drawer-neighbor-count").textContent = `${neighbors.length} 个`;
+
+    const content = document.getElementById("drawer-content");
+    if (content) {
+      content.innerHTML = `
+        <p>这是一条推荐起点预览。全局图仍保持中立，点击“从这里开始”或左侧推荐起点后，才会进入选中阅读态。</p>
+        <p>${escapeHtml(excerpt || node.summary || "当前节点暂无正文，但可以从相邻节点继续展开。")}</p>
+      `;
+    }
+
+    if (neighborList) {
+      neighborList.innerHTML = "";
+      if (!neighbors.length) {
+        const empty = document.createElement("div");
+        empty.className = "note-card";
+        empty.textContent = "这个起点暂时没有相邻节点。";
+        neighborList.appendChild(empty);
+      }
+      neighbors.slice(0, 4).forEach((entryItem) => {
+        const neighbor = entryItem.node;
+        const button = document.createElement("button");
+        button.className = "neighbor-card";
+        button.type = "button";
+        button.innerHTML = `<span class="card-copy"><strong>${escapeHtml(neighbor.label)}</strong><span>${atlasTypeLabel(neighbor.type)} · ${atlasConfidenceLabel(entryItem.edge.type)}</span></span>`;
+        button.addEventListener("click", () => focusNode(neighbor.id, true));
+        neighborList.appendChild(button);
+      });
+    }
+
+    setDrawerActions("preview", node);
+    return true;
+  }
+
+  function renderDrawer() {
+    const selected = getSelectedNode();
+    if (!drawer) return;
+    const previewEntry = getPreviewStartEntry();
+    if (app) {
+      app.dataset.reading = selected ? "1" : "0";
+      app.dataset.startPreview = !selected && previewEntry ? "1" : "0";
+    }
+    drawer.dataset.state = selected ? "reading" : (previewEntry ? "start-preview" : "empty");
+    if (!selected && previewEntry && renderStartPreview(previewEntry)) return;
+    if (!selected) {
+      setDrawerActions("empty", null);
+      document.getElementById("drawer-kind").innerHTML = `<span class="spark"></span>当前范围`;
+      document.getElementById("drawer-title").textContent = "没有匹配节点";
+      document.getElementById("drawer-subtitle").textContent = "调整搜索或筛选后查看知识内容";
+      document.getElementById("drawer-summary").textContent = "当前范围内没有可显示的节点。";
+      document.getElementById("drawer-neighbor-count").textContent = "0 个";
+      const content = document.getElementById("drawer-content");
+      if (content) content.innerHTML = "<p>清除搜索词或切回全部社区后，可以继续查看节点摘要和知识内容。</p>";
+      if (neighborList) {
+        neighborList.innerHTML = "";
+        const empty = document.createElement("div");
+        empty.className = "note-card";
+        empty.textContent = "暂无相邻节点。";
+        neighborList.appendChild(empty);
+      }
+      return;
+    }
+    state.ui.selectedNodeId = selected.id;
+    setDrawerActions("reading", selected);
+
+    const neighbors = getNeighbors(selected.id);
+    const community = state.atlasModel.communityById[selected.community];
+    const communityLabel = community ? community.label : "未分组";
+
+    document.getElementById("drawer-kind").innerHTML = `<span class="spark"></span>${atlasTypeLabel(selected.type)} · 已选中`;
+    document.getElementById("drawer-title").textContent = selected.label;
+    document.getElementById("drawer-subtitle").textContent = `${communityLabel} · ${atlasConfidenceLabel(selected.confidence)}${selected.source_path ? " · " + selected.source_path : ""}`;
+    document.getElementById("drawer-summary").textContent = selected.summary || "暂无摘要。";
+    document.getElementById("drawer-neighbor-count").textContent = `${neighbors.length} 个`;
+
+    renderKnowledgeCard(selected, neighbors);
+
+    if (neighborList) {
+      neighborList.innerHTML = "";
+      if (!neighbors.length) {
+        const empty = document.createElement("div");
+        empty.className = "note-card";
+        empty.textContent = "这个节点暂时没有相邻节点。";
+        neighborList.appendChild(empty);
+      }
+      neighbors.forEach((entry) => {
+        const node = entry.node;
+        const button = document.createElement("button");
+        button.className = "neighbor-card";
+        button.type = "button";
+        button.innerHTML = `<span class="card-copy"><strong>${escapeHtml(node.label)}</strong><span>${atlasTypeLabel(node.type)} · ${atlasConfidenceLabel(entry.edge.type)}</span></span>`;
+        button.addEventListener("click", () => focusNode(node.id, true));
+        neighborList.appendChild(button);
+      });
+    }
+  }
+
+  function renderKnowledgeCard(node, neighbors) {
+    const content = document.getElementById("drawer-content");
+    if (!content) return;
+    const rawContent = String(node.content || "").trim();
+    if (rawContent) {
+      const linked = rawContent.replace(/\[\[([^\]]+)\]\]/g, (_, inner) => {
+        const parts = inner.split("|");
+        const target = parts[0].trim();
+        const label = (parts[1] || parts[0]).trim();
+        const exists = state.atlasModel.nodes.some((item) => item.id === target || item.label === target);
+        const cls = exists ? "wikilink" : "wikilink wikilink--dead";
+        return `<a class="${cls}" data-target="${escapeHtml(target)}">${escapeHtml(label)}</a>`;
+      });
+      const html = typeof marked === "undefined" ? `<p>${escapeHtml(stripAtlasMarkdown(linked))}</p>` : marked.parse(linked, { breaks: false, gfm: true });
+      const safe = typeof DOMPurify === "undefined"
+        ? html
+        : DOMPurify.sanitize(html, { ADD_ATTR: ["target", "data-target", "tabindex"] });
+      content.innerHTML = safe;
+    } else {
+      const related = neighbors.length
+        ? `它当前连接到 ${neighbors.map((entry) => `「${entry.node.label}」`).join("、")}。`
+        : "这个节点暂时没有相邻节点。";
+      content.innerHTML = `<p>${escapeHtml(node.label)}属于知识库中的「${escapeHtml(atlasTypeLabel(node.type))}」节点。</p><p>${escapeHtml(node.summary || related)}</p>`;
+    }
+
+    content.querySelectorAll("a.wikilink").forEach((link) => {
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+        if (link.classList.contains("wikilink--dead")) return;
+        const target = link.getAttribute("data-target");
+        const hit = state.atlasModel.nodes.find((item) => item.id === target || item.label === target);
+        if (hit) focusNode(hit.id, true);
+      });
+    });
+  }
+
+  function getNeighbors(nodeId) {
+    const out = [];
+    state.atlasModel.edges.forEach((edge) => {
+      if (edge.source === nodeId && state.atlasModel.byId[edge.target]) {
+        out.push({ node: state.atlasModel.byId[edge.target], edge, direction: "to" });
+      } else if (edge.target === nodeId && state.atlasModel.byId[edge.source]) {
+        out.push({ node: state.atlasModel.byId[edge.source], edge, direction: "from" });
+      }
+    });
+    return out.sort((left, right) => clampWeight(right.edge.weight) - clampWeight(left.edge.weight));
+  }
+
+  function renderInsights() {
+    if (!insightTitle || !insightCopy) return;
+    const visible = state.visible || refreshVisibleSnapshot();
+    const insights = state.atlasModel.insights;
+    const bridge = insights.bridge_nodes && insights.bridge_nodes[0];
+    const surprising = insights.surprising_connections && insights.surprising_connections[0];
+    if (surprising) {
+      insightTitle.textContent = "发现跨社区强连接";
+      insightCopy.textContent = `${surprising.from} 与 ${surprising.to} 的关系权重较高，适合作为下一步阅读线索。`;
+    } else if (bridge) {
+      insightTitle.textContent = "桥接节点值得优先阅读";
+      insightCopy.textContent = `${bridge.label || bridge.id} 连接多个社区，可帮助从局部主题进入全局图谱。`;
+    } else if (visible.densityMode === "overview") {
+      insightTitle.textContent = "当前视图过密";
+      insightCopy.textContent = "建议搜索关键词或筛选社区，先缩小图谱范围再阅读节点内容。";
+    } else {
+      insightTitle.textContent = "从选中节点进入阅读";
+      insightCopy.textContent = "右侧札记会随节点、搜索和社区筛选同步更新。";
+    }
+  }
+
+  function renderMinimap() {
+    if (!minimapSvg) return;
+    const visible = state.visible || refreshVisibleSnapshot();
+    while (minimapSvg.firstChild) minimapSvg.removeChild(minimapSvg.firstChild);
+    const ns = "http://www.w3.org/2000/svg";
+    const path = document.createElementNS(ns, "path");
+    path.setAttribute("d", "M8 40 C34 20 54 36 76 22 C98 8 118 24 150 12");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "#cfc4b1");
+    path.setAttribute("stroke-width", "1.4");
+    minimapSvg.appendChild(path);
+
+    visible.nodes.slice(0, 60).forEach((node) => {
+      const point = atlasPointToMinimap(atlasNodePoint(node));
+      const circle = document.createElementNS(ns, "circle");
+      circle.setAttribute("cx", String(point.x));
+      circle.setAttribute("cy", String(point.y));
+      circle.setAttribute("r", node.id === state.ui.selectedNodeId ? "3.2" : "2.2");
+      circle.setAttribute("fill", communityColor(node.community));
+      if (node.id === state.ui.selectedNodeId) circle.classList.add("is-selected");
+      minimapSvg.appendChild(circle);
+    });
+
+    const rect = document.createElementNS(ns, "rect");
+    rect.setAttribute("class", "mini-map-viewport");
+    rect.setAttribute("rx", "5");
+    minimapSvg.appendChild(rect);
+    updateMinimapViewport();
+  }
+
+  function applyFilters() {
+    const visible = state.visible || refreshVisibleSnapshot();
+    const visibleIds = new Set(visible.node_ids);
+    const selectedIds = state.ui.selectedNodeId ? connectedIds(state.ui.selectedNodeId) : new Set();
+
+    document.querySelectorAll(".node").forEach((nodeEl) => {
+      const id = nodeEl.dataset.id;
+      const isVisible = visibleIds.has(id);
+      nodeEl.classList.toggle("is-hidden", !isVisible);
+      const dim = state.ui.dimUnselected && state.ui.selectedNodeId && !selectedIds.has(id);
+      nodeEl.classList.toggle("is-dim", isVisible && dim);
+      nodeEl.setAttribute("aria-pressed", id === state.ui.selectedNodeId ? "true" : "false");
+    });
+
+    document.querySelectorAll(".edge").forEach((edgeEl) => {
+      const from = edgeEl.dataset.from;
+      const to = edgeEl.dataset.to;
+      const visibleEdge = visibleIds.has(from) && visibleIds.has(to);
+      const dim = state.ui.dimUnselected && state.ui.selectedNodeId && from !== state.ui.selectedNodeId && to !== state.ui.selectedNodeId;
+      edgeEl.classList.toggle("is-dim", !visibleEdge || dim);
+    });
+
+    const hasNoResults = !!state.ui.query && visible.nodes.length === 0 && state.ui.dataMode === "normal";
+    if (noResults) noResults.classList.toggle("is-visible", hasNoResults);
+
+    const communityName = state.ui.activeCommunityId === "all"
+      ? "全局视图"
+      : (state.atlasModel.communityById[state.ui.activeCommunityId] || {}).label || "当前社区";
+    if (canvasTitle) canvasTitle.textContent = `知识地图 · ${communityName}`;
+    if (canvasSubtitle) {
+      const densityLabel = ({
+        card: "卡片",
+        "compact-card": "紧凑卡片",
+        "point-plus-focus": "点位聚焦",
+        overview: "总览"
+      })[visible.densityMode] || "卡片";
+      canvasSubtitle.textContent = hasNoResults
+        ? "当前筛选没有匹配节点"
+        : `${visible.nodes.length} 个节点在当前范围内可见 · ${densityLabel}模式`;
+    }
+  }
+
+  function highlightNeighborhood(id) {
+    if (state.ui.dataMode !== "normal") return;
+    const ids = connectedIds(id);
+    document.querySelectorAll(".node").forEach((nodeEl) => {
+      nodeEl.classList.toggle("is-dim", !ids.has(nodeEl.dataset.id));
+    });
+    document.querySelectorAll(".edge").forEach((edgeEl) => {
+      edgeEl.classList.toggle("is-dim", edgeEl.dataset.from !== id && edgeEl.dataset.to !== id);
+    });
+  }
+
+  function renderAtlasView(options) {
+    const opts = options && typeof options === "object" ? options : {};
+    refreshVisibleSnapshot();
+    if (app) app.dataset.reading = state.ui.selectedNodeId ? "1" : "0";
+    if (opts.fitViewport || !state.viewportReady) fitVisibleViewport();
+    renderTopbar();
+    renderSidebar();
+    renderCanvas();
+    renderDrawer();
+    renderInsights();
+  }
+
+  function selectNode(id) {
+    if (!state.atlasModel.byId[id]) return;
+    state.ui.selectedNodeId = id;
+    renderAtlasView();
+  }
+
+  function focusNode(nodeId, openDrawer) {
+    if (!state.atlasModel.byId[nodeId]) return;
+    state.ui.selectedNodeId = nodeId;
+    if (openDrawer !== false && drawer) {
+      drawer.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+    renderAtlasView();
+    centerViewportOnNode(nodeId);
+  }
+
+  function closeDrawer() {
+    state.ui.selectedNodeId = null;
+    renderAtlasView({ fitViewport: true });
+  }
+
+  function setCommunity(communityId) {
+    state.ui.activeCommunityId = communityId || "all";
+    renderAtlasView({ fitViewport: true });
+  }
+
+  function buildNoteText(node) {
+    const stripped = stripAtlasMarkdown(node && node.content);
+    const excerpt = stripped.slice(0, NOTE_EXCERPT_LIMIT);
+    return node && node.label ? `${node.label}${excerpt ? "：" + excerpt : ""}` : excerpt;
+  }
+
+  function handleQueueAction() {
+    const node = getSelectedNode();
+    if (!node) {
+      const previewEntry = getPreviewStartEntry();
+      if (previewEntry && previewEntry.node) focusNode(previewEntry.node.id, true);
+      return;
+    }
+    state.queue = toggleQueueFavorite(state.queue, node.id);
+    state.queue = appendQueueNote(state.queue, {
+      id: `${node.id}:${Date.now()}`,
+      node_id: node.id,
+      label: node.label,
+      text: buildNoteText(node),
+      created_at: new Date().toISOString()
+    }, QUEUE_NOTE_LIMIT);
+    persistQueueState();
+    renderSidebar();
+  }
+
+  function setupSearch() {
+    if (!searchInput) return;
+    searchInput.addEventListener("input", () => {
+      state.ui.query = searchInput.value.trim().toLowerCase();
+      renderAtlasView({ fitViewport: true });
+    });
+    searchInput.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter") return;
+      const hit = state.visible && state.visible.nodes[0];
+      if (hit) focusNode(hit.id, true);
+    });
+  }
+
+  function isCanvasPanTarget(target) {
+    return !(target && target.closest && target.closest(".node, button, a, input, textarea, summary, details"));
+  }
+
+  function setupViewportInteractions() {
+    atlas.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0 || !isCanvasPanTarget(event.target)) return;
+      panState = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        viewport: { x: state.viewport.x, y: state.viewport.y, scale: state.viewport.scale }
+      };
+      atlas.classList.add("is-panning");
+      atlas.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    });
+
+    atlas.addEventListener("pointermove", (event) => {
+      if (!panState || panState.pointerId !== event.pointerId) return;
+      setViewport({
+        x: panState.viewport.x + event.clientX - panState.startX,
+        y: panState.viewport.y + event.clientY - panState.startY,
+        scale: panState.viewport.scale
+      });
+      event.preventDefault();
+    });
+
+    function finishPan(event) {
+      if (!panState || panState.pointerId !== event.pointerId) return;
+      panState = null;
+      atlas.classList.remove("is-panning");
+      if (atlas.hasPointerCapture && atlas.hasPointerCapture(event.pointerId)) {
+        atlas.releasePointerCapture(event.pointerId);
+      }
+    }
+
+    atlas.addEventListener("pointerup", finishPan);
+    atlas.addEventListener("pointercancel", finishPan);
+    atlas.addEventListener("wheel", (event) => {
+      if (!isCanvasPanTarget(event.target) && !(event.target && event.target.closest && event.target.closest(".node"))) return;
+      const rect = atlas.getBoundingClientRect();
+      const factor = Math.exp(-event.deltaY * 0.0012);
+      setViewport(zoomAtlasViewport(state.viewport, factor, {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      }, currentViewportSize(), viewportOptions()));
+      event.preventDefault();
+    }, { passive: false });
+  }
+
+  function setupMinimapNavigation() {
+    if (!minimapSvg) return;
+    minimapSvg.addEventListener("click", (event) => {
+      const matrix = minimapSvg.getScreenCTM && minimapSvg.getScreenCTM();
+      if (!matrix) return;
+      const point = minimapSvg.createSVGPoint();
+      point.x = event.clientX;
+      point.y = event.clientY;
+      const local = point.matrixTransform(matrix.inverse());
+      const atlasPoint = minimapPointToAtlasPoint({ x: local.x, y: local.y });
+      setViewport(centerAtlasViewportOnPoint(atlasPoint, currentViewportSize(), state.viewport.scale, viewportOptions()), true);
+    });
+  }
+
+  function setupControls() {
+    document.querySelectorAll("[data-focus]").forEach((button) => {
+      button.addEventListener("click", () => {
+        state.ui.focusMode = button.dataset.focus || "all";
+        document.querySelectorAll("[data-focus]").forEach((item) => {
+          item.setAttribute("aria-pressed", item === button ? "true" : "false");
+        });
+        renderAtlasView({ fitViewport: true });
+      });
+    });
+
+    document.querySelectorAll(".state-button[data-mode]").forEach((button) => {
+      button.addEventListener("click", () => {
+        state.ui.dataMode = button.dataset.mode || "normal";
+        atlas.dataset.mode = state.ui.dataMode;
+        document.querySelectorAll(".state-button[data-mode]").forEach((item) => {
+          item.setAttribute("aria-pressed", item === button ? "true" : "false");
+        });
+        applyFilters();
+      });
+    });
+
+    const dimButton = document.getElementById("toggle-dim");
+    if (dimButton) {
+      dimButton.addEventListener("click", () => {
+        state.ui.dimUnselected = !state.ui.dimUnselected;
+        dimButton.textContent = state.ui.dimUnselected ? "显示全部层级" : "弱化未选中";
+        applyFilters();
+      });
+    }
+
+    const fitButton = document.getElementById("fit-view");
+    if (fitButton) {
+      fitButton.addEventListener("click", () => {
+        state.ui.activeCommunityId = "all";
+        state.ui.focusMode = "all";
+        state.ui.query = "";
+        state.ui.selectedNodeId = null;
+        state.ui.dataMode = "normal";
+        if (searchInput) searchInput.value = "";
+        document.querySelectorAll("[data-focus]").forEach((item) => {
+          item.setAttribute("aria-pressed", item.dataset.focus === "all" ? "true" : "false");
+        });
+        document.querySelectorAll(".state-button[data-mode]").forEach((item) => {
+          item.setAttribute("aria-pressed", item.dataset.mode === "normal" ? "true" : "false");
+        });
+        renderAtlasView({ fitViewport: true });
+      });
+    }
+
+    const queueAction = document.getElementById("queue-action");
+    if (queueAction) queueAction.addEventListener("click", handleQueueAction);
+
+    const sourceAction = document.getElementById("source-action");
+    if (sourceAction) {
+      sourceAction.addEventListener("click", () => {
+        const previewEntry = getPreviewStartEntry();
+        const node = getSelectedNode() || (previewEntry && previewEntry.node);
+        if (node && node.source_path) window.location.href = node.source_path;
+      });
+    }
+  }
+
+  function applyNeighborsCollapsed(collapsed) {
+    if (!drawerNeighbors || !drawerNeighborsHeading) return;
+    drawerNeighbors.open = !collapsed;
+    drawerNeighbors.setAttribute("data-collapsed", collapsed ? "1" : "0");
+    drawerNeighborsHeading.setAttribute("aria-expanded", collapsed ? "false" : "true");
+  }
+
+  function toggleNeighbors() {
+    if (!drawerNeighbors) return;
+    const nextCollapsed = drawerNeighbors.open;
+    applyNeighborsCollapsed(nextCollapsed);
+    safeLocalStorage.set(queueStorageKey("neighbors-collapsed"), nextCollapsed ? "1" : "0");
+  }
+
+  function setupNeighborToggle() {
+    const storedNeighborsCollapsed = safeLocalStorage.get(queueStorageKey("neighbors-collapsed"));
+    applyNeighborsCollapsed(storedNeighborsCollapsed == null ? true : storedNeighborsCollapsed === "1");
+    if (!drawerNeighbors || !drawerNeighborsHeading) return;
+    drawerNeighbors.addEventListener("toggle", () => {
+      state.ui.neighborExpanded = drawerNeighbors.open;
+      drawerNeighbors.setAttribute("data-collapsed", drawerNeighbors.open ? "0" : "1");
+      drawerNeighborsHeading.setAttribute("aria-expanded", drawerNeighbors.open ? "true" : "false");
+    });
+    drawerNeighborsHeading.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleNeighbors();
+      }
+    });
+  }
+
+  function applyMinimapCollapsed(collapsed) {
+    if (!minimapEl || !minimapToggle) return;
+    minimapEl.setAttribute("data-collapsed", collapsed ? "1" : "0");
+    minimapToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+    minimapToggle.setAttribute("aria-label", collapsed ? "展开小地图" : "折叠小地图");
+  }
+
+  setupSearch();
+  setupViewportInteractions();
+  setupMinimapNavigation();
+  setupControls();
+  setupNeighborToggle();
+  applyMinimapCollapsed(false);
+  window.addEventListener("resize", () => renderAtlasView({ fitViewport: true }));
+  renderAtlasView({ fitViewport: true });
+})();