diff --git a/apps/roam/src/components/DiscourseSuggestionsPanel.tsx b/apps/roam/src/components/DiscourseSuggestionsPanel.tsx
new file mode 100644
index 000000000..ddb8e08da
--- /dev/null
+++ b/apps/roam/src/components/DiscourseSuggestionsPanel.tsx
@@ -0,0 +1,117 @@
+import {
+  Alignment,
+  Card,
+  Classes,
+  Button,
+  Navbar,
+  Collapse,
+} from "@blueprintjs/core";
+import React, { useState, useCallback } from "react";
+import SuggestionsBody from "./SuggestionsBody";
+
+export const DiscourseSuggestionsPanel = ({
+  tag,
+  blockUid,
+  onClose,
+  shouldGrabFromReferencedPages,
+  shouldGrabParentChildContext,
+}: {
+  tag: string;
+  blockUid: string;
+  onClose: () => void;
+  shouldGrabFromReferencedPages: boolean;
+  shouldGrabParentChildContext: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const toggleHighlight = useCallback(
+    (on: boolean) => {
+      document
+        .querySelectorAll(`[data-dg-block-uid="${blockUid}"]`)
+        .forEach((el) => el.classList.toggle("dg-highlight", on));
+    },
+    [blockUid],
+  );
+
+  return (
+    <Card
+      data-dg-block-uid={blockUid}
+      style={{
+        backgroundColor: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        padding: "8px",
+      }}
+      onMouseEnter={() => toggleHighlight(true)}
+      onMouseLeave={() => toggleHighlight(false)}
+      className="discourse-suggestions-panel"
+    >
+      <Navbar
+        style={{
+          borderBottom: "1px solid #d8e1e8",
+          boxShadow: "none",
+          paddingRight: 0,
+          display: "flex",
+          flexWrap: "nowrap",
+          alignItems: "center",
+        }}
+      >
+        <Navbar.Group align={Alignment.LEFT} style={{ flex: 1, minWidth: 0 }}>
+          <Navbar.Heading
+            className="truncate"
+            style={{
+              fontSize: "13px",
+              margin: 0,
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+            onClick={() => setIsOpen((prev) => !prev)}
+          >
+            {tag}
+          </Navbar.Heading>
+        </Navbar.Group>
+        <Navbar.Group
+          align={Alignment.RIGHT}
+          style={{
+            marginRight: "5px",
+            flexShrink: 0,
+            display: "flex",
+            gap: "4px",
+          }}
+        >
+          <Button
+            icon={isOpen ? "chevron-up" : "chevron-down"}
+            minimal
+            small
+            onClick={() => setIsOpen((prev) => !prev)}
+            title={isOpen ? "Collapse" : "Expand"}
+          />
+          <Button
+            icon="cross"
+            minimal={true}
+            title="Close Panel"
+            onClick={onClose}
+            small={true}
+          />
+        </Navbar.Group>
+      </Navbar>
+      <Collapse
+        isOpen={isOpen}
+        keepChildrenMounted={true}
+        transitionDuration={150}
+      >
+        <div
+          className={Classes.CARD}
+          style={{ flexGrow: 1, overflowY: "auto", padding: "6px" }}
+        >
+          <SuggestionsBody
+            tag={tag}
+            blockUid={blockUid}
+            shouldGrabFromReferencedPages={shouldGrabFromReferencedPages}
+            shouldGrabParentChildContext={shouldGrabParentChildContext}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
diff --git a/apps/roam/src/components/PanelManager.tsx b/apps/roam/src/components/PanelManager.tsx
new file mode 100644
index 000000000..a9a0705bf
--- /dev/null
+++ b/apps/roam/src/components/PanelManager.tsx
@@ -0,0 +1,593 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Navbar, Alignment, Button } from "@blueprintjs/core";
+import { OnloadArgs } from "roamjs-components/types/native";
+import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
+import { DiscourseSuggestionsPanel } from "./DiscourseSuggestionsPanel";
+
+const PANEL_ROOT_ID = "discourse-graph-suggestions-root";
+const PANELS_CONTAINER_ID = "discourse-graph-panels-container";
+const ARTICLE_WRAPPER_SELECTOR = ".rm-article-wrapper";
+const MINIMIZED_BAR_ID = "discourse-suggestions-minimized";
+const SPACING_PREFIX = "rm-spacing--";
+const initialSpacingByWrapper = new WeakMap<HTMLElement, string | null>();
+
+const CLASS_NAMES = {
+  minimizedBar:
+    "flex items-center gap-1 py-[6px] px-2 bg-white rounded shadow-sm m-2 w-fit",
+  panelsContainer: "flex flex-col flex-1 gap-2 p-2 bg-gray-100 overflow-y-auto",
+  panelElement: "flex-shrink-0 mb-2 bg-white rounded shadow",
+};
+
+type PanelState = {
+  blockUid: string;
+  element: HTMLElement;
+  onloadArgs: OnloadArgs;
+};
+
+const panelSubscribers = new Map<string, Set<(isOpen: boolean) => void>>();
+
+const notifySubscribers = (tag: string, isOpen: boolean) => {
+  const subscribers = panelSubscribers.get(tag);
+  if (subscribers) {
+    subscribers.forEach((callback) => callback(isOpen));
+  }
+};
+
+export const subscribeToPanelState = (
+  tag: string,
+  callback: (isOpen: boolean) => void,
+) => {
+  if (!panelSubscribers.has(tag)) {
+    panelSubscribers.set(tag, new Set());
+  }
+  panelSubscribers.get(tag)!.add(callback);
+
+  callback(openPanels.has(tag));
+
+  return () => {
+    const subscribers = panelSubscribers.get(tag);
+    if (subscribers) {
+      subscribers.delete(callback);
+      if (subscribers.size === 0) {
+        panelSubscribers.delete(tag);
+      }
+    }
+  };
+};
+
+const getSpacingClass = (element: HTMLElement): string | null => {
+  for (const className of Array.from(element.classList)) {
+    if (className.startsWith(SPACING_PREFIX)) return className;
+  }
+  return null;
+};
+
+const setSpacingClass = (
+  element: HTMLElement,
+  spacingClass: string | null,
+): void => {
+  for (const className of Array.from(element.classList)) {
+    if (className.startsWith(SPACING_PREFIX))
+      element.classList.remove(className);
+  }
+  if (spacingClass) element.classList.add(spacingClass);
+};
+
+const SidebarHeader = ({
+  onMinimize,
+  onCloseAll,
+}: {
+  onMinimize: () => void;
+  onCloseAll: () => void;
+}) => (
+  <Navbar className="rounded-t shadow-none">
+    <Navbar.Group align={Alignment.LEFT}>
+      <Navbar.Heading className="text-[13px] font-semibold">
+        Suggested Discourse nodes
+      </Navbar.Heading>
+    </Navbar.Group>
+    <Navbar.Group align={Alignment.RIGHT}>
+      <Button
+        icon="minus"
+        minimal
+        small
+        title="Minimize sidebar"
+        onClick={onMinimize}
+      />
+      <Button
+        icon="cross"
+        minimal
+        small
+        title="Close all open panels"
+        onClick={onCloseAll}
+      />
+    </Navbar.Group>
+  </Navbar>
+);
+
+const openPanels = new Map<string, PanelState>();
+let isContainerMinimized = false;
+let navigationObserver: MutationObserver | null = null;
+
+const cssEscape = (value: string) =>
+  window.CSS && window.CSS.escape
+    ? window.CSS.escape(value)
+    : value.replace(/[^a-zA-Z0-9_\-]/g, (c: string) => `\\${c}`);
+
+const updateOverlayToggleButtons = (tag: string, isOpen: boolean): void => {
+  try {
+    const selector = `button[data-dg-role="panel-toggle"][data-dg-tag="${cssEscape(tag)}"]`;
+    const buttons = Array.from(document.querySelectorAll(selector));
+    buttons.forEach((btn) => {
+      const buttonEl = btn as HTMLButtonElement;
+      buttonEl.dataset.dgPanelOpen = isOpen ? "true" : "false";
+      if (isOpen) buttonEl.classList.add("bp3-intent-primary");
+      else buttonEl.classList.remove("bp3-intent-primary");
+      buttonEl.title = isOpen
+        ? "Close suggestions panel"
+        : "Open suggestions panel";
+      const icon = buttonEl.querySelector(".bp3-icon");
+      if (icon) {
+        icon.classList.remove(
+          isOpen ? "bp3-icon-panel-stats" : "bp3-icon-panel-table",
+        );
+        icon.classList.add(
+          isOpen ? "bp3-icon-panel-table" : "bp3-icon-panel-stats",
+        );
+      }
+    });
+  } catch (e) {
+    // ignore DOM sync failures
+  }
+};
+
+const clearBlockHighlight = (blockUid: string): void => {
+  try {
+    const nodes = document.querySelectorAll(
+      `[data-dg-block-uid="${blockUid}"]`,
+    );
+    nodes.forEach((el) => el.classList.remove("dg-highlight"));
+  } catch {
+    // no-op
+  }
+};
+
+const getRoamBodyMain = () =>
+  document.querySelector<HTMLElement>(".roam-body-main");
+const getArticleWrapper = (container: HTMLElement) =>
+  container.querySelector<HTMLElement>(ARTICLE_WRAPPER_SELECTOR);
+
+const setupSplitView = ({
+  roamBodyMain,
+  articleWrapper,
+  panelRoot,
+}: {
+  roamBodyMain: HTMLElement;
+  articleWrapper: HTMLElement;
+  panelRoot: HTMLElement;
+}): void => {
+  roamBodyMain.style.display = "flex";
+  roamBodyMain.dataset.isSplit = "true";
+
+  panelRoot.style.display = "flex";
+  panelRoot.style.flexDirection = "column";
+  panelRoot.style.flex = "0 0 40%";
+
+  articleWrapper.style.flex = "1 1 60%";
+  if (!initialSpacingByWrapper.has(articleWrapper)) {
+    initialSpacingByWrapper.set(
+      articleWrapper,
+      getSpacingClass(articleWrapper),
+    );
+  }
+  setSpacingClass(articleWrapper, "rm-spacing--full");
+
+  initializeArticleWrapperObserver({ mainContent: articleWrapper });
+};
+
+const teardownSplitView = (): void => {
+  const roamBodyMain = getRoamBodyMain();
+  const articleWrapper = roamBodyMain ? getArticleWrapper(roamBodyMain) : null;
+
+  if (roamBodyMain && articleWrapper) {
+    roamBodyMain.removeAttribute("data-is-split");
+    roamBodyMain.style.display = "";
+    articleWrapper.style.flex = "";
+    const initial = initialSpacingByWrapper.get(articleWrapper) ?? null;
+    setSpacingClass(articleWrapper, initial);
+  }
+
+  cleanupArticleWrapperObserver();
+};
+
+let articleWrapperObserver: MutationObserver | null = null;
+const cleanupNavigationObserver = () => {
+  if (navigationObserver) {
+    navigationObserver.disconnect();
+    navigationObserver = null;
+  }
+};
+
+const initializeArticleWrapperObserver = ({
+  mainContent,
+}: {
+  mainContent: HTMLElement;
+}): void => {
+  if (articleWrapperObserver) return;
+
+  articleWrapperObserver = new MutationObserver(() => {
+    const root = document.getElementById(PANEL_ROOT_ID);
+    if (root && root.style.display !== "none" && !isContainerMinimized) {
+      if (getSpacingClass(mainContent) !== "rm-spacing--full") {
+        setSpacingClass(mainContent, "rm-spacing--full");
+      }
+    }
+  });
+
+  articleWrapperObserver.observe(mainContent, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+};
+
+const cleanupArticleWrapperObserver = () => {
+  if (articleWrapperObserver) {
+    articleWrapperObserver.disconnect();
+    articleWrapperObserver = null;
+  }
+};
+
+const initializeNavigationObserver = () => {
+  if (navigationObserver) {
+    return;
+  }
+
+  const roamApp = document.querySelector(".roam-app");
+  if (!roamApp) return;
+
+  navigationObserver = new MutationObserver(() => {
+    const panelRoot = document.getElementById(PANEL_ROOT_ID);
+    const roamBodyMain = getRoamBodyMain();
+
+    if (openPanels.size > 0) {
+      if (!panelRoot || !panelRoot.parentElement) {
+        restorePanelInfrastructure();
+      } else if (roamBodyMain) {
+        const articleWrapper = getArticleWrapper(roamBodyMain);
+        if (articleWrapper && roamBodyMain.dataset.isSplit !== "true") {
+          setupSplitView({ roamBodyMain, articleWrapper, panelRoot });
+        }
+      }
+    }
+  });
+
+  navigationObserver.observe(roamApp, {
+    childList: true,
+    subtree: true,
+  });
+};
+const cleanupObservers = (): void => {
+  cleanupArticleWrapperObserver();
+  cleanupNavigationObserver();
+};
+
+if (typeof window !== "undefined") {
+  const handleUnload = () => {
+    cleanupObservers();
+    openPanels.clear();
+  };
+
+  window.addEventListener("beforeunload", handleUnload);
+  window.addEventListener("pagehide", handleUnload);
+}
+
+const createMinimizedBar = (panelRoot: HTMLElement) => {
+  let minimizedBar = document.getElementById(MINIMIZED_BAR_ID);
+  if (minimizedBar) return minimizedBar;
+
+  minimizedBar = document.createElement("div");
+  minimizedBar.id = MINIMIZED_BAR_ID;
+  minimizedBar.className = CLASS_NAMES.minimizedBar;
+  panelRoot.appendChild(minimizedBar);
+
+  ReactDOM.render(
+    <Button
+      icon="panel-stats"
+      minimal
+      small
+      title="Restore sidebar"
+      onClick={() => panelManager.toggleContainerMinimize()}
+    />,
+    minimizedBar,
+  );
+
+  return minimizedBar;
+};
+
+const removeMinimizedBar = () => {
+  const minimizedBar = document.getElementById(MINIMIZED_BAR_ID);
+  if (minimizedBar) {
+    ReactDOM.unmountComponentAtNode(minimizedBar);
+    minimizedBar.remove();
+  }
+};
+
+const createPanelInfrastructure = () => {
+  const roamBodyMain = getRoamBodyMain();
+  if (!roamBodyMain) return null;
+
+  const articleWrapper = getArticleWrapper(roamBodyMain);
+  if (!articleWrapper) return null;
+
+  let panelRoot = document.getElementById(PANEL_ROOT_ID);
+  if (panelRoot) {
+    if (panelRoot.style.display === "none") panelRoot.style.display = "flex";
+    if (panelRoot.parentElement !== roamBodyMain) {
+      roamBodyMain.insertBefore(panelRoot, articleWrapper);
+    }
+  } else {
+    panelRoot = document.createElement("div");
+    panelRoot.id = PANEL_ROOT_ID;
+    roamBodyMain.insertBefore(panelRoot, articleWrapper);
+  }
+
+  let panelsContainer = document.getElementById(PANELS_CONTAINER_ID);
+  if (!panelsContainer) {
+    panelsContainer = document.createElement("div");
+    panelsContainer.id = PANELS_CONTAINER_ID;
+    panelsContainer.className = CLASS_NAMES.panelsContainer;
+
+    const header = document.createElement("div");
+    header.id = "discourse-suggestions-header";
+    panelsContainer.appendChild(header);
+    ReactDOM.render(
+      <SidebarHeader
+        onMinimize={() => panelManager.toggleContainerMinimize()}
+        onCloseAll={() => panelManager.closeAll()}
+      />,
+      header,
+    );
+    panelRoot.appendChild(panelsContainer);
+  }
+
+  setupSplitView({ roamBodyMain, articleWrapper, panelRoot });
+  initializeNavigationObserver();
+  return panelsContainer;
+};
+
+const restorePanelInfrastructure = () => {
+  if (openPanels.size === 0) return;
+
+  const panelsContainer = createPanelInfrastructure();
+  if (!panelsContainer) return;
+
+  const panelsToRestore = Array.from(openPanels.entries());
+  openPanels.clear();
+
+  panelsToRestore.forEach(([tag, state]) => {
+    const panelElement = document.createElement("div");
+    panelElement.id = `discourse-panel-${tag.replace(/[^a-zA-Z0-9]/g, "-")}`;
+    panelElement.className = CLASS_NAMES.panelElement;
+
+    const header = panelsContainer.querySelector(
+      "#discourse-suggestions-header",
+    );
+    if (header && header.nextSibling) {
+      panelsContainer.insertBefore(panelElement, header.nextSibling);
+    } else {
+      panelsContainer.appendChild(panelElement);
+    }
+
+    openPanels.set(tag, { ...state, element: panelElement });
+    const { onloadArgs } = state;
+    const grabFromReferencedPages = onloadArgs.extensionAPI.settings.get(
+      "context-grab-from-referenced-pages",
+    );
+    const shouldGrabFromReferencedPages =
+      grabFromReferencedPages === null
+        ? true
+        : Boolean(grabFromReferencedPages);
+
+    const grabParentChildContext = onloadArgs.extensionAPI.settings.get(
+      "context-grab-parent-child-context",
+    );
+    const shouldGrabParentChildContext =
+      grabParentChildContext === null ? true : Boolean(grabParentChildContext);
+
+    ReactDOM.render(
+      <ExtensionApiContextProvider {...state.onloadArgs}>
+        <DiscourseSuggestionsPanel
+          tag={tag}
+          blockUid={state.blockUid}
+          onClose={() => panelManager.removePanel(tag)}
+          shouldGrabFromReferencedPages={shouldGrabFromReferencedPages}
+          shouldGrabParentChildContext={shouldGrabParentChildContext}
+        />
+      </ExtensionApiContextProvider>,
+      panelElement,
+    );
+  });
+
+  if (isContainerMinimized) {
+    panelManager.toggleContainerMinimize();
+  }
+};
+
+const cleanupPanelInfrastructure = () => {
+  openPanels.forEach(({ element }) => {
+    ReactDOM.unmountComponentAtNode(element);
+  });
+  openPanels.clear();
+
+  const panelRoot = document.getElementById(PANEL_ROOT_ID);
+  if (panelRoot) {
+    const header = panelRoot.querySelector("#discourse-suggestions-header");
+    if (header) ReactDOM.unmountComponentAtNode(header);
+    panelRoot.remove();
+  }
+
+  teardownSplitView();
+  cleanupObservers();
+};
+
+export const panelManager = {
+  toggle: ({
+    tag,
+    blockUid,
+    onloadArgs,
+  }: {
+    tag: string;
+    blockUid: string;
+    onloadArgs: OnloadArgs;
+  }) => {
+    if (openPanels.has(tag)) {
+      panelManager.removePanel(tag);
+    } else {
+      panelManager.addPanel({ tag, blockUid, onloadArgs });
+    }
+  },
+
+  addPanel: ({
+    tag,
+    blockUid,
+    onloadArgs,
+  }: {
+    tag: string;
+    blockUid: string;
+    onloadArgs: OnloadArgs;
+  }) => {
+    try {
+      let panelsContainer = document.getElementById(PANELS_CONTAINER_ID);
+      if (!panelsContainer) {
+        panelsContainer = createPanelInfrastructure();
+        if (!panelsContainer) {
+          console.error("Failed to create panel infrastructure");
+          return;
+        }
+      }
+      const grabFromReferencedPages = onloadArgs.extensionAPI.settings.get(
+        "context-grab-from-referenced-pages",
+      );
+      const shouldGrabFromReferencedPages =
+        grabFromReferencedPages === null
+          ? true
+          : Boolean(grabFromReferencedPages);
+
+      const grabParentChildContext = onloadArgs.extensionAPI.settings.get(
+        "context-grab-parent-child-context",
+      );
+      const shouldGrabParentChildContext =
+        grabParentChildContext === null
+          ? true
+          : Boolean(grabParentChildContext);
+
+      const panelElement = document.createElement("div");
+      panelElement.id = `discourse-panel-${tag.replace(/[^a-zA-Z0-9]/g, "-")}`;
+      panelElement.className = CLASS_NAMES.panelElement;
+
+      const header = panelsContainer.querySelector(
+        "#discourse-suggestions-header",
+      );
+      if (header && header.nextSibling) {
+        panelsContainer.insertBefore(panelElement, header.nextSibling);
+      } else {
+        panelsContainer.appendChild(panelElement);
+      }
+
+      openPanels.set(tag, { blockUid, element: panelElement, onloadArgs });
+      updateOverlayToggleButtons(tag, true);
+      notifySubscribers(tag, true);
+
+      ReactDOM.render(
+        <ExtensionApiContextProvider {...onloadArgs}>
+          <DiscourseSuggestionsPanel
+            tag={tag}
+            blockUid={blockUid}
+            onClose={() => panelManager.removePanel(tag)}
+            shouldGrabFromReferencedPages={shouldGrabFromReferencedPages}
+            shouldGrabParentChildContext={shouldGrabParentChildContext}
+          />
+        </ExtensionApiContextProvider>,
+        panelElement,
+      );
+    } catch (error) {
+      console.error(`Failed to add panel for ${tag}:`, error);
+    }
+  },
+
+  removePanel: (tag: string) => {
+    try {
+      const panelInfo = openPanels.get(tag);
+      if (!panelInfo) return;
+
+      ReactDOM.unmountComponentAtNode(panelInfo.element);
+      panelInfo.element.remove();
+      const { blockUid } = panelInfo;
+      openPanels.delete(tag);
+      updateOverlayToggleButtons(tag, false);
+      clearBlockHighlight(blockUid);
+      notifySubscribers(tag, false);
+
+      if (openPanels.size === 0) {
+        cleanupPanelInfrastructure();
+      }
+    } catch (error) {
+      console.error(`Failed to remove panel ${tag}:`, error);
+      openPanels.delete(tag);
+    }
+  },
+
+  closeAll: () => {
+    try {
+      isContainerMinimized = false;
+      const entries = Array.from(openPanels.entries());
+      cleanupPanelInfrastructure();
+      entries.forEach(([t, state]) => {
+        updateOverlayToggleButtons(t, false);
+        clearBlockHighlight(state.blockUid);
+        notifySubscribers(t, false);
+      });
+    } catch (error) {
+      console.error("Failed to close all panels:", error);
+      openPanels.clear();
+      isContainerMinimized = false;
+    }
+  },
+
+  toggleContainerMinimize: () => {
+    const panelsContainer = document.getElementById(PANELS_CONTAINER_ID);
+    const panelRoot = document.getElementById(PANEL_ROOT_ID);
+
+    if (!panelsContainer || !panelRoot) return;
+
+    isContainerMinimized = !isContainerMinimized;
+
+    if (isContainerMinimized) {
+      panelsContainer.style.display = "none";
+      panelRoot.style.flex = "0 0 auto";
+      panelRoot.style.width = "auto";
+      createMinimizedBar(panelRoot);
+
+      const roamBodyMain = getRoamBodyMain();
+      const articleWrapper = roamBodyMain
+        ? getArticleWrapper(roamBodyMain)
+        : null;
+      if (articleWrapper) articleWrapper.style.flex = "1 1 auto";
+    } else {
+      panelsContainer.style.display = "flex";
+      removeMinimizedBar();
+      panelRoot.style.flex = "0 0 40%";
+      panelRoot.style.width = "";
+
+      const roamBodyMain = getRoamBodyMain();
+      const articleWrapper = roamBodyMain
+        ? getArticleWrapper(roamBodyMain)
+        : null;
+      if (articleWrapper) articleWrapper.style.flex = "1 1 60%";
+    }
+  },
+
+  isOpen: (tag: string) => openPanels.has(tag),
+  isContainerMinimized: () => isContainerMinimized,
+};
diff --git a/apps/roam/src/components/SuggestionsBody.tsx b/apps/roam/src/components/SuggestionsBody.tsx
new file mode 100644
index 000000000..ef70655fb
--- /dev/null
+++ b/apps/roam/src/components/SuggestionsBody.tsx
@@ -0,0 +1,444 @@
+// THIS IS NEW CODEBASE
+import React, { useMemo, useState, useEffect } from "react";
+import {
+  Button,
+  ControlGroup,
+  Intent,
+  Menu,
+  MenuItem,
+  Position,
+  Popover,
+  Spinner,
+  Tag,
+  Tooltip,
+} from "@blueprintjs/core";
+import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
+import getAllPageNames from "roamjs-components/queries/getAllPageNames";
+import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
+import { Result } from "roamjs-components/types/query-builder";
+import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContext";
+import { performHydeSearch } from "../utils/hyde";
+import { useDiscourseNodeFilters } from "~/utils/useDiscourseData";
+import { createBlock } from "roamjs-components/writes";
+
+const MAX_CACHE_SIZE = 50;
+
+type SuggestedNode = Result & { type: string };
+type SuggestionsCache = {
+  selectedPages: string[];
+  useAllPagesForSuggestions: boolean;
+  hydeFilteredNodes: SuggestedNode[];
+  activeNodeTypeFilters: string[];
+};
+const suggestionsCache = new Map<string, SuggestionsCache>();
+
+const SuggestionsBody = ({
+  tag,
+  blockUid,
+  shouldGrabFromReferencedPages,
+  shouldGrabParentChildContext,
+}: {
+  tag: string;
+  blockUid: string;
+  shouldGrabFromReferencedPages: boolean;
+  shouldGrabParentChildContext: boolean;
+}) => {
+  const {
+    results: existingResults,
+    discourseNode,
+    uniqueRelationTypeTriplets,
+    validTypes,
+    allNodes,
+  } = useDiscourseNodeFilters(tag);
+  const allPages = useMemo(() => getAllPageNames(), []);
+  const cachedState = suggestionsCache.get(blockUid);
+  const extensionAPI = useExtensionAPI();
+
+  const [currentPageInput, setCurrentPageInput] = useState("");
+  const [selectedPages, setSelectedPages] = useState<string[]>(
+    cachedState?.selectedPages || [],
+  );
+  const [useAllPagesForSuggestions, setUseAllPagesForSuggestions] = useState(
+    cachedState?.useAllPagesForSuggestions || false,
+  );
+  const [autocompleteKey, setAutocompleteKey] = useState(0);
+  const [pageGroups, setPageGroups] = useState<Record<string, string[]>>({});
+  const [hydeFilteredNodes, setHydeFilteredNodes] = useState<SuggestedNode[]>(
+    cachedState?.hydeFilteredNodes || [],
+  );
+  const [activeNodeTypeFilters, setActiveNodeTypeFilters] = useState<string[]>(
+    cachedState?.activeNodeTypeFilters || [],
+  );
+  const [isSearchingHyde, setIsSearchingHyde] = useState(false);
+
+  const actuallyDisplayedNodes = useMemo(() => {
+    if (activeNodeTypeFilters.length === 0) return hydeFilteredNodes;
+    return hydeFilteredNodes.filter((n) =>
+      activeNodeTypeFilters.includes(n.type),
+    );
+  }, [hydeFilteredNodes, activeNodeTypeFilters]);
+
+  const uniqueSuggestedTypeUIDs = useMemo(
+    () => Array.from(new Set(hydeFilteredNodes.map((n) => n.type))),
+    [hydeFilteredNodes],
+  );
+
+  const availableFilterTypes = useMemo(() => {
+    return uniqueSuggestedTypeUIDs
+      .map((uid) => {
+        const nodeDef = allNodes.find((n) => n.type === uid);
+        return { uid, text: nodeDef ? nodeDef.text : uid };
+      })
+      .sort((a, b) => a.text.localeCompare(b.text));
+  }, [uniqueSuggestedTypeUIDs, allNodes]);
+
+  const handleAddPage = () => {
+    if (currentPageInput && !selectedPages.includes(currentPageInput)) {
+      setSelectedPages((prev) => [...prev, currentPageInput]);
+      setTimeout(() => {
+        setCurrentPageInput("");
+        setAutocompleteKey((prev) => prev + 1);
+      }, 0);
+      setUseAllPagesForSuggestions(false);
+    }
+  };
+
+  const handleCreateBlock = async (node: SuggestedNode) => {
+    await createBlock({
+      parentUid: blockUid,
+      node: { text: `[[${node.text}]]` },
+    });
+    setHydeFilteredNodes((prev) => prev.filter((n) => n.uid !== node.uid));
+  };
+
+  const toggleOverlayHighlight = (nodeUid: string, on: boolean) => {
+    document
+      .querySelectorAll(`[data-dg-block-uid="${nodeUid}"]`)
+      .forEach((el) => el.classList.toggle("dg-highlight", on));
+  };
+
+  useEffect(() => {
+    const storedGroups = extensionAPI?.settings.get(
+      "suggestion-page-groups",
+    ) as Record<string, string[]> | undefined;
+    if (storedGroups && typeof storedGroups === "object") {
+      setPageGroups(storedGroups);
+    }
+  }, [extensionAPI]);
+
+  useEffect(() => {
+    const data = suggestionsCache.get(blockUid);
+    if (!data) return;
+    suggestionsCache.delete(blockUid);
+    suggestionsCache.set(blockUid, data);
+  }, [blockUid]);
+
+  useEffect(() => {
+    const firstKey = suggestionsCache.keys().next().value as string | undefined;
+    if (
+      !suggestionsCache.has(blockUid) &&
+      suggestionsCache.size >= MAX_CACHE_SIZE &&
+      firstKey
+    ) {
+      suggestionsCache.delete(firstKey);
+    }
+
+    suggestionsCache.set(blockUid, {
+      selectedPages,
+      useAllPagesForSuggestions,
+      hydeFilteredNodes,
+      activeNodeTypeFilters,
+    });
+  }, [
+    blockUid,
+    selectedPages,
+    useAllPagesForSuggestions,
+    hydeFilteredNodes,
+    activeNodeTypeFilters,
+  ]);
+
+  return (
+    <div onMouseDown={(e) => e.stopPropagation()}>
+      <div className="mt-2">
+        <label
+          htmlFor="suggest-page-input"
+          className="mb-1 block text-sm font-medium text-gray-700"
+        >
+          Suggest relationships from pages
+        </label>
+        <ControlGroup fill className="flex flex-wrap items-center gap-2">
+          <div
+            className="flex-0 min-w-[160px]"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && currentPageInput) {
+                e.preventDefault();
+                e.stopPropagation();
+                handleAddPage();
+              }
+            }}
+          >
+            <AutocompleteInput
+              key={autocompleteKey}
+              value={currentPageInput}
+              placeholder={"Add page…"}
+              setValue={setCurrentPageInput}
+              options={allPages}
+              maxItemsDisplayed={50}
+            />
+          </div>
+          <Tooltip
+            content={
+              selectedPages.includes(currentPageInput)
+                ? "Page already added"
+                : "Add page"
+            }
+            disabled={!currentPageInput}
+          >
+            <Button
+              icon="plus"
+              small
+              onClick={handleAddPage}
+              disabled={
+                !currentPageInput || selectedPages.includes(currentPageInput)
+              }
+              className="whitespace-nowrap"
+            />
+          </Tooltip>
+          {Object.keys(pageGroups).length > 0 && (
+            <Popover
+              position={Position.BOTTOM_LEFT}
+              content={
+                <Menu>
+                  {Object.keys(pageGroups)
+                    .sort((a, b) => a.localeCompare(b))
+                    .map((groupName) => (
+                      <MenuItem
+                        key={groupName}
+                        text={groupName}
+                        shouldDismissPopover={false}
+                        onClick={() => {
+                          const groupPages = pageGroups[groupName] || [];
+                          setSelectedPages((prev) =>
+                            Array.from(new Set([...prev, ...groupPages])),
+                          );
+                          setUseAllPagesForSuggestions(false);
+                        }}
+                      />
+                    ))}
+                </Menu>
+              }
+            >
+              <Tooltip content="Add pages from a group">
+                <Button icon="folder-open" small text="Add Group" />
+              </Tooltip>
+            </Popover>
+          )}
+          <Button
+            text="Find"
+            icon="search-template"
+            intent={Intent.PRIMARY}
+            onClick={() => {
+              const performSearch = async () => {
+                setUseAllPagesForSuggestions(false);
+                setIsSearchingHyde(true);
+                const pages = [...selectedPages];
+                const results = await performHydeSearch({
+                  useAllPagesForSuggestions: false,
+                  selectedPages: pages,
+                  discourseNode,
+                  blockUid,
+                  validTypes,
+                  existingResults,
+                  uniqueRelationTypeTriplets,
+                  pageTitle: tag,
+                  shouldGrabFromReferencedPages,
+                  shouldGrabParentChildContext,
+                });
+                setHydeFilteredNodes(results);
+                setIsSearchingHyde(false);
+              };
+              performSearch().catch(console.error);
+            }}
+            disabled={selectedPages.length === 0}
+            small
+            className="whitespace-nowrap"
+          />
+          <div>
+            <Tooltip content={"Use all pages"}>
+              <Button
+                text="All Pages"
+                icon="globe-network"
+                small
+                onClick={() => {
+                  setUseAllPagesForSuggestions(true);
+                  setSelectedPages([]);
+                  setCurrentPageInput("");
+                  setAutocompleteKey((prev) => prev + 1);
+                  const performSearch = async () => {
+                    setUseAllPagesForSuggestions(true);
+                    setIsSearchingHyde(true);
+                    const results = await performHydeSearch({
+                      useAllPagesForSuggestions: true,
+                      selectedPages: [],
+                      discourseNode,
+                      blockUid,
+                      validTypes,
+                      existingResults,
+                      uniqueRelationTypeTriplets,
+                      pageTitle: tag,
+                      shouldGrabFromReferencedPages,
+                      shouldGrabParentChildContext,
+                    });
+                    setHydeFilteredNodes(results);
+                    setIsSearchingHyde(false);
+                  };
+                  performSearch().catch(console.error);
+                }}
+                className="whitespace-nowrap"
+              />
+            </Tooltip>
+          </div>
+        </ControlGroup>
+        {selectedPages.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {selectedPages.map((p) => (
+              <Tag
+                key={p}
+                onRemove={() => {
+                  setSelectedPages((prev) => prev.filter((x) => x !== p));
+                }}
+                round
+                minimal
+              >
+                {p}
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {(hydeFilteredNodes.length > 0 || isSearchingHyde) && (
+        <div className="mt-6">
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-base font-semibold">
+              {useAllPagesForSuggestions
+                ? "From All Pages"
+                : selectedPages.length > 0
+                  ? `From ${selectedPages.length === 1 ? `"${selectedPages[0]}"` : `${selectedPages.length} selected pages`}`
+                  : "Select pages to see suggestions"}
+            </h3>
+            <span className="ml-2 text-sm font-semibold text-gray-900">
+              Total nodes: {actuallyDisplayedNodes.length}
+            </span>
+            <Popover
+              position={Position.BOTTOM_RIGHT}
+              content={
+                <div className="space-y-1 p-2">
+                  {availableFilterTypes.map((t) => (
+                    <Button
+                      key={t.uid}
+                      small
+                      minimal
+                      fill
+                      alignText="left"
+                      text={t.text}
+                      intent={
+                        activeNodeTypeFilters.includes(t.uid)
+                          ? Intent.PRIMARY
+                          : Intent.NONE
+                      }
+                      onClick={() => {
+                        setActiveNodeTypeFilters((prev) =>
+                          prev.includes(t.uid)
+                            ? prev.filter((f) => f !== t.uid)
+                            : [...prev, t.uid],
+                        );
+                      }}
+                      className="w-full justify-start whitespace-nowrap"
+                    />
+                  ))}
+                  {activeNodeTypeFilters.length > 0 && (
+                    <Button
+                      small
+                      minimal
+                      icon="cross"
+                      text="Clear"
+                      onClick={() => setActiveNodeTypeFilters([])}
+                      className="whitespace-nowrap text-xs"
+                    />
+                  )}
+                </div>
+              }
+            >
+              <Button
+                icon="filter"
+                small
+                minimal
+                intent={
+                  activeNodeTypeFilters.length > 0
+                    ? Intent.PRIMARY
+                    : Intent.NONE
+                }
+              />
+            </Popover>
+          </div>
+          <div className="flex pr-2">
+            <div className="flex-grow overflow-y-auto">
+              {isSearchingHyde && (
+                <Spinner size={Spinner.SIZE_SMALL} className="mb-2" />
+              )}
+              <ul className="list-none space-y-1 p-0">
+                {!isSearchingHyde &&
+                  actuallyDisplayedNodes.length > 0 &&
+                  actuallyDisplayedNodes.map((node) => (
+                    <li
+                      key={node.uid}
+                      className="flex items-center justify-between rounded-md px-1.5 py-1.5 hover:bg-gray-100"
+                      onMouseEnter={() =>
+                        toggleOverlayHighlight(node.uid, true)
+                      }
+                      onMouseLeave={() =>
+                        toggleOverlayHighlight(node.uid, false)
+                      }
+                    >
+                      <span
+                        className="mr-2 cursor-pointer hover:underline"
+                        onClick={(e) => {
+                          if (e.shiftKey) {
+                            void openBlockInSidebar(node.uid);
+                          } else {
+                            void window.roamAlphaAPI.ui.mainWindow.openPage({
+                              page: { uid: node.uid },
+                            });
+                          }
+                        }}
+                      >
+                        {node.text}
+                      </span>
+                      <Button
+                        minimal
+                        small
+                        icon="add"
+                        onClick={() => void handleCreateBlock(node)}
+                        className="ml-2 whitespace-nowrap"
+                      />
+                    </li>
+                  ))}
+                {!isSearchingHyde && actuallyDisplayedNodes.length === 0 && (
+                  <li className="px-2 py-1.5 italic text-gray-500">
+                    {hydeFilteredNodes.length > 0 &&
+                    activeNodeTypeFilters.length > 0
+                      ? "No suggestions match the current filters."
+                      : "No relevant relations found."}
+                  </li>
+                )}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SuggestionsBody;
diff --git a/apps/roam/src/components/SuggestiveModeOverlay.tsx b/apps/roam/src/components/SuggestiveModeOverlay.tsx
new file mode 100644
index 000000000..b01ec657a
--- /dev/null
+++ b/apps/roam/src/components/SuggestiveModeOverlay.tsx
@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Button, Tooltip } from "@blueprintjs/core";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import useInViewport from "react-in-viewport/dist/es/lib/useInViewport";
+import { OnloadArgs } from "roamjs-components/types/native";
+import { getBlockUidFromTarget } from "roamjs-components/dom";
+import { panelManager, subscribeToPanelState } from "./PanelManager";
+import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
+
+const SuggestiveModeOverlay = ({
+  tag,
+  parentEl,
+  onloadArgs,
+}: {
+  tag: string;
+  parentEl: HTMLElement;
+  onloadArgs: OnloadArgs;
+}) => {
+  const blockUid = useMemo(() => getBlockUidFromTarget(parentEl), [parentEl]);
+  const [isPanelOpen, setIsPanelOpen] = useState(() =>
+    panelManager.isOpen(tag),
+  );
+  useEffect(() => {
+    const unsubscribe = subscribeToPanelState(tag, setIsPanelOpen);
+    return unsubscribe;
+  }, [tag]);
+
+  const toggleHighlight = useCallback(
+    (on: boolean) => {
+      const nodes = document.querySelectorAll(
+        `[data-dg-block-uid="${blockUid}"]`,
+      );
+      nodes.forEach((el) => {
+        const elem = el as HTMLElement;
+        if (
+          elem.classList.contains("suggestive-mode-overlay") ||
+          elem.closest(".suggestive-mode-overlay")
+        )
+          return;
+        elem.classList.toggle("dg-highlight", on);
+      });
+    },
+    [blockUid],
+  );
+
+  const handleTogglePanel = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      toggleHighlight(false);
+      panelManager.toggle({ tag, blockUid, onloadArgs });
+    },
+    [tag, blockUid, onloadArgs, toggleHighlight],
+  );
+
+  return (
+    <div className="suggestive-mode-overlay flex max-w-3xl">
+      <Tooltip
+        content={
+          isPanelOpen ? "Close suggestions panel" : "Open suggestions panel"
+        }
+        hoverOpenDelay={200}
+      >
+        <Button
+          data-dg-role="panel-toggle"
+          data-dg-tag={tag}
+          data-dg-block-uid={blockUid}
+          icon={isPanelOpen ? "panel-table" : "panel-stats"}
+          minimal
+          small
+          intent={isPanelOpen ? "primary" : "none"}
+          onClick={handleTogglePanel}
+          onMouseEnter={() => toggleHighlight(true)}
+          onMouseLeave={() => toggleHighlight(false)}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+const Wrapper = ({
+  parent,
+  tag,
+  onloadArgs,
+}: {
+  parent: HTMLElement;
+  tag: string;
+  onloadArgs: OnloadArgs;
+}) => {
+  const { inViewport } = useInViewport(
+    { current: parent },
+    {},
+    { disconnectOnLeave: false },
+    {},
+  );
+  return inViewport ? (
+    <SuggestiveModeOverlay
+      tag={tag}
+      parentEl={parent}
+      onloadArgs={onloadArgs}
+    />
+  ) : null;
+};
+
+export const renderSuggestive = ({
+  tag,
+  parent,
+  onloadArgs,
+}: {
+  tag: string;
+  parent: HTMLElement;
+  onloadArgs: OnloadArgs;
+}) => {
+  parent.style.margin = "0 8px";
+  parent.style.display = "inline-block";
+  parent.onmousedown = (e) => e.stopPropagation();
+  ReactDOM.render(
+    <ExtensionApiContextProvider {...onloadArgs}>
+      <Wrapper tag={tag} parent={parent} onloadArgs={onloadArgs} />
+    </ExtensionApiContextProvider>,
+    parent,
+  );
+};
+
+export default SuggestiveModeOverlay;
diff --git a/apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx b/apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx
index 8271a056a..700116610 100644
--- a/apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx
+++ b/apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx
@@ -13,6 +13,10 @@ import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import getSubTree from "roamjs-components/util/getSubTree";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import extractRef from "roamjs-components/util/extractRef";
+import { getDiscourseNodeTypeWithSettingsBlockNodes } from "~/utils/getAllDiscourseNodesSince";
+import { upsertNodesToSupabaseAsContentWithEmbeddings } from "~/utils/syncDgNodesToSupabase";
+import { discourseNodeBlockToLocalConcept } from "~/utils/conceptConversion";
+import { getLoggedInClient, getSupabaseContext } from "~/utils/supabaseContext";
 
 const BlockRenderer = ({ uid }: { uid: string }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -69,6 +73,41 @@ const DiscourseNodeSuggestiveRules = ({
     [],
   );
 
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const handleUpdateEmbeddings = async () => {
+    setIsUpdating(true);
+    const blockNodesSince = getDiscourseNodeTypeWithSettingsBlockNodes(node, 0);
+    const supabaseClient = await getLoggedInClient();
+    const context = await getSupabaseContext();
+    if (context && blockNodesSince) {
+      await upsertNodesToSupabaseAsContentWithEmbeddings(
+        blockNodesSince,
+        supabaseClient,
+        context,
+      );
+      const nodeBlockToLocalConcepts = blockNodesSince.map((node) => {
+        const localConcept = discourseNodeBlockToLocalConcept(context, {
+          nodeUid: node.source_local_id,
+          schemaUid: node.type,
+          text: node.node_title ? `${node.node_title} ${node.text}` : node.text,
+        });
+        return localConcept;
+      });
+
+      const { error } = await supabaseClient.rpc("upsert_concepts", {
+        data: nodeBlockToLocalConcepts,
+        v_space_id: context.spaceId,
+      });
+      if (error) {
+        throw new Error(
+          `upsert_concepts failed: ${JSON.stringify(error, null, 2)}`,
+        );
+      }
+    }
+    setIsUpdating(false);
+  };
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <BlocksPanel
@@ -84,10 +123,10 @@ const DiscourseNodeSuggestiveRules = ({
         title="Embedding Block Ref"
         description="Copy block ref from template which you want to be embedded and ranked."
         order={0}
-        uid={node.embeddingRefUid || ""}
+        uid={node.embeddingRefUid}
         parentUid={parentUid}
-        value={node.embeddingRef || ""}
-        defaultValue={node.embeddingRef || ""}
+        value={node.embeddingRef}
+        defaultValue={node.embeddingRef}
         options={{
           placeholder: "((block-uid))",
           onChange: handleEmbeddingRefChange,
@@ -110,13 +149,12 @@ const DiscourseNodeSuggestiveRules = ({
         value={node.isFirstChild?.value || false}
       />
 
-      {/* TODO: Add a button to update embeddings in seperate PR */}
       <Button
         text="Update Embeddings"
         intent={Intent.NONE}
-        onClick={() => console.log("Not implemented")}
+        onClick={() => void handleUpdateEmbeddings()}
+        loading={isUpdating}
         className="w-52"
-        disabled
       />
     </div>
   );
diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx
index 6200b22e9..2e35f24c0 100644
--- a/apps/roam/src/components/settings/HomePersonalSettings.tsx
+++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx
@@ -20,6 +20,7 @@ import {
 } from "~/data/userSettings";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
+import { getSuggestiveOverlayHandler } from "~/utils/pageRefObserverHandlers";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
@@ -58,7 +59,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         }
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set(
+          void extensionAPI.settings.set(
             "discourse-context-overlay",
             target.checked,
           );
@@ -76,13 +77,41 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           </>
         }
       />
+      <Checkbox
+        defaultChecked={
+          extensionAPI.settings.get("suggestive-mode-overlay") as boolean
+        }
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          void extensionAPI.settings.set(
+            "suggestive-mode-overlay",
+            target.checked,
+          );
+          onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))(
+            target.checked,
+          );
+        }}
+        labelElement={
+          <>
+            Suggestive Mode Overlay
+            <Description
+              description={
+                "Whether or not to overlay Suggestive Mode button over Discourse Node references."
+              }
+            />
+          </>
+        }
+      />
       <Checkbox
         defaultChecked={
           extensionAPI.settings.get("text-selection-popup") !== false
         }
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("text-selection-popup", target.checked);
+          void extensionAPI.settings.set(
+            "text-selection-popup",
+            target.checked,
+          );
         }}
         labelElement={
           <>
@@ -101,7 +130,10 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         }
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("disable-sidebar-open", target.checked);
+          void extensionAPI.settings.set(
+            "disable-sidebar-open",
+            target.checked,
+          );
         }}
         labelElement={
           <>
@@ -118,7 +150,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         defaultChecked={extensionAPI.settings.get("page-preview") as boolean}
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("page-preview", target.checked);
+          void extensionAPI.settings.set("page-preview", target.checked);
           onPageRefObserverChange(previewPageRefHandler)(target.checked);
         }}
         labelElement={
@@ -138,7 +170,10 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         }
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("hide-feedback-button", target.checked);
+          void extensionAPI.settings.set(
+            "hide-feedback-button",
+            target.checked,
+          );
 
           if (target.checked) {
             hideDiscourseFloatingMenu();
diff --git a/apps/roam/src/styles/discourseGraphStyles.css b/apps/roam/src/styles/discourseGraphStyles.css
index 72859c5d9..b65233b65 100644
--- a/apps/roam/src/styles/discourseGraphStyles.css
+++ b/apps/roam/src/styles/discourseGraphStyles.css
@@ -177,3 +177,8 @@ div.roamjs-discourse-drawer div.bp3-drawer {
 .bp3-popover-wrapper + .referenced-node-autocomplete {
   margin-top: 1rem;
 }
+
+.dg-highlight {
+  box-shadow: 0 0 0 2px #137cbd !important;
+  border-radius: 4px;
+}
diff --git a/apps/roam/src/utils/hyde.ts b/apps/roam/src/utils/hyde.ts
index 02d764649..f088ce433 100644
--- a/apps/roam/src/utils/hyde.ts
+++ b/apps/roam/src/utils/hyde.ts
@@ -4,6 +4,7 @@ import { Result } from "./types";
 import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
 import findDiscourseNode from "./findDiscourseNode";
 import { nextApiRoot } from "@repo/utils/execContext";
+import { DiscourseNode } from "./getDiscourseNodes";
 
 type ApiEmbeddingResponse = {
   data: Array<{
@@ -38,8 +39,9 @@ export type NodeSearchResult = {
   score: number;
 };
 
-type ResultItemMin = { uid: string };
-type ExistingResultGroup = {
+type ResultItemMin = { uid?: string };
+
+export type ExistingResultGroup = {
   label: string;
   results: Record<string, ResultItemMin>;
 };
@@ -58,7 +60,7 @@ type SearchFunc = (params: {
 
 const API_CONFIG = {
   LLM: {
-    URL: "https://discoursegraphs.com/api/llm/openai/chat",
+    URL: `${nextApiRoot()}/llm/openai/chat`,
     MODEL: "gpt-4.1",
     TIMEOUT_MS: 30_000,
     MAX_TOKENS: 104,
@@ -351,11 +353,11 @@ export const getAllPageByUidAsync = async (): Promise<[string, string][]> => {
   return pages;
 };
 
-export const extractPagesFromChildBlock = (
+export const extractPagesFromChildBlock = async (
   tag: string,
-): { uid: string; text: string }[] => {
+): Promise<{ uid: string; text: string }[]> => {
   // @ts-ignore - backend to be added to roamjs-components
-  const results = window.roamAlphaAPI.data.async.q(
+  const results = (await window.roamAlphaAPI.data.async.q(
     `[:find ?uid ?title
       :where [?b :node/title "${normalizePageTitle(tag)}"]
         [?a :block/refs ?b]
@@ -363,15 +365,15 @@ export const extractPagesFromChildBlock = (
         [?p :block/refs ?rf]
         [?rf :block/uid ?uid]
         [?rf :node/title ?title]]]`,
-  ) as Array<[string, string]>;
+  )) as Array<[string, string]>;
   return results.map(([uid, title]) => ({ uid, text: title }));
 };
 
-export const extractPagesFromParentBlock = (
+export const extractPagesFromParentBlock = async (
   tag: string,
-): { uid: string; text: string }[] => {
+): Promise<{ uid: string; text: string }[]> => {
   // @ts-ignore - backend to be added to roamjs-components
-  const results = window.roamAlphaAPI.data.async.q(
+  const results = (await window.roamAlphaAPI.data.async.q(
     `[:find ?uid ?title
       :where [?b :node/title "${normalizePageTitle(tag)}"]
         [?a :block/refs ?b]
@@ -379,15 +381,15 @@ export const extractPagesFromParentBlock = (
         [?p :block/refs ?rf]
         [?rf :block/uid ?uid]
         [?rf :node/title ?title]]]`,
-  ) as Array<[string, string]>;
+  )) as Array<[string, string]>;
   return results.map(([uid, title]) => ({ uid, text: title }));
 };
 
-export const getAllReferencesOnPage = (
+export const getAllReferencesOnPage = async (
   pageTitle: string,
-): { uid: string; text: string }[] => {
+): Promise<{ uid: string; text: string }[]> => {
   // @ts-ignore - backend to be added to roamjs-components
-  const referencedPages = window.roamAlphaAPI.data.async.q(
+  const referencedPages = (await window.roamAlphaAPI.data.async.q(
     `[:find ?uid ?text
       :where
         [?page :node/title "${normalizePageTitle(pageTitle)}"]
@@ -395,19 +397,19 @@ export const getAllReferencesOnPage = (
         [?b :block/refs ?refPage]
         [?refPage :block/uid ?uid]
         [?refPage :node/title ?text]]`,
-  ) as Array<[string, string]>;
+  )) as Array<[string, string]>;
   return referencedPages.map(([uid, text]) => ({ uid, text }));
 };
 
 export type PerformHydeSearchParams = {
   useAllPagesForSuggestions: boolean;
   selectedPages: string[];
-  discourseNodeExists: boolean;
-  tagUid: string;
+  discourseNode: false | DiscourseNode;
+  blockUid: string;
   validTypes: string[];
   existingResults: ExistingResultGroup[];
   uniqueRelationTypeTriplets: RelationDetails[];
-  tag: string;
+  pageTitle: string;
   shouldGrabFromReferencedPages: boolean;
   shouldGrabParentChildContext: boolean;
 };
@@ -415,12 +417,12 @@ export type PerformHydeSearchParams = {
 export const performHydeSearch = async ({
   useAllPagesForSuggestions,
   selectedPages,
-  discourseNodeExists,
-  tagUid,
+  discourseNode,
+  blockUid,
   validTypes,
   existingResults,
   uniqueRelationTypeTriplets,
-  tag,
+  pageTitle,
   shouldGrabFromReferencedPages,
   shouldGrabParentChildContext,
 }: PerformHydeSearchParams): Promise<SuggestedNode[]> => {
@@ -428,23 +430,23 @@ export const performHydeSearch = async ({
     return [];
   }
 
-  if (!discourseNodeExists) {
+  if (!discourseNode) {
     return [];
   }
 
   let candidateNodesForHyde: SuggestedNode[] = [];
 
   const existingUids = new Set<string>(
-    existingResults.flatMap((group) =>
-      Object.values(group.results).map((item) => item.uid),
-    ),
+    existingResults
+      .flatMap((group) => Object.values(group.results).map((item) => item.uid))
+      .filter((uid): uid is string => !!uid),
   );
 
   if (useAllPagesForSuggestions) {
     // TODO: Use Supabase to get all pages
     candidateNodesForHyde = (await getAllPageByUidAsync())
       .map(([pageName, pageUid]) => {
-        if (!pageUid || pageUid === tagUid) return null;
+        if (!pageUid || pageUid === blockUid) return null;
         const node = findDiscourseNode(pageUid);
         if (
           !node ||
@@ -464,14 +466,18 @@ export const performHydeSearch = async ({
   } else {
     const referenced: { uid: string; text: string }[] = [];
     if (shouldGrabFromReferencedPages) {
-      referenced.push(...getAllReferencesOnPage(tag));
-      selectedPages.forEach((p) => {
-        referenced.push(...getAllReferencesOnPage(p));
-      });
+      referenced.push(...(await getAllReferencesOnPage(pageTitle)));
+      for (const p of selectedPages) {
+        referenced.push(...(await getAllReferencesOnPage(p)));
+      }
     }
     if (shouldGrabParentChildContext) {
-      referenced.push(...extractPagesFromChildBlock(tag));
-      referenced.push(...extractPagesFromParentBlock(tag));
+      referenced.push(...(await extractPagesFromChildBlock(pageTitle)));
+      referenced.push(...(await extractPagesFromParentBlock(pageTitle)));
+      for (const p of selectedPages) {
+        referenced.push(...(await extractPagesFromChildBlock(p)));
+        referenced.push(...(await extractPagesFromParentBlock(p)));
+      }
     }
     const uniqueReferenced = Array.from(
       new Map(referenced.map((x) => [x.uid, x])).values(),
@@ -484,7 +490,7 @@ export const performHydeSearch = async ({
           node.backedBy === "default" ||
           !validTypes.includes(node.type) ||
           existingUids.has(n.uid) ||
-          n.uid === tagUid
+          n.uid === blockUid
         ) {
           return null;
         }
@@ -500,7 +506,7 @@ export const performHydeSearch = async ({
   if (candidateNodesForHyde.length && uniqueRelationTypeTriplets.length) {
     const found = await findSimilarNodesUsingHyde({
       candidateNodes: candidateNodesForHyde,
-      currentNodeText: tag,
+      currentNodeText: pageTitle,
       relationDetails: uniqueRelationTypeTriplets,
     });
     return found;
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 723c52310..79983448a 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -24,6 +24,7 @@ import {
   getPageRefObserversSize,
   previewPageRefHandler,
   overlayPageRefHandler,
+  getSuggestiveOverlayHandler,
 } from "~/utils/pageRefObserverHandlers";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { OnloadArgs } from "roamjs-components/types";
@@ -156,6 +157,9 @@ export const initObservers = async ({
   if (onloadArgs.extensionAPI.settings.get("discourse-context-overlay")) {
     addPageRefObserver((s) => overlayPageRefHandler(s, onloadArgs));
   }
+  if (onloadArgs.extensionAPI.settings.get("suggestive-mode-overlay")) {
+    addPageRefObserver(getSuggestiveOverlayHandler(onloadArgs));
+  }
   if (!!getPageRefObserversSize()) enablePageRefObserver();
 
   const { pageUid: configPageUid, observer: configPageObserver } =
diff --git a/apps/roam/src/utils/pageRefObserverHandlers.ts b/apps/roam/src/utils/pageRefObserverHandlers.ts
index f5438d33f..a7bd83ff2 100644
--- a/apps/roam/src/utils/pageRefObserverHandlers.ts
+++ b/apps/roam/src/utils/pageRefObserverHandlers.ts
@@ -3,6 +3,7 @@ import { render as previewRender } from "~/components/LivePreview";
 import isDiscourseNode from "./isDiscourseNode";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { render as discourseOverlayRender } from "~/components/DiscourseContextOverlay";
+import { renderSuggestive as renderSuggestiveOverlay } from "~/components/SuggestiveModeOverlay";
 import { OnloadArgs } from "roamjs-components/types";
 
 const pageRefObservers = new Set<(s: HTMLSpanElement) => void>();
@@ -17,6 +18,12 @@ export const getOverlayHandler = (onloadArgs: OnloadArgs) =>
   (cachedHandler = (s: HTMLSpanElement) =>
     overlayPageRefHandler(s, onloadArgs));
 
+let cachedSuggestiveHandler: ((s: HTMLSpanElement) => void) | undefined;
+export const getSuggestiveOverlayHandler = (onloadArgs: OnloadArgs) =>
+  cachedSuggestiveHandler ||
+  (cachedSuggestiveHandler = (s: HTMLSpanElement) =>
+    suggestiveOverlayPageRefHandler(s, onloadArgs));
+
 export const overlayPageRefHandler = (
   s: HTMLSpanElement,
   onloadArgs: OnloadArgs,
@@ -46,6 +53,35 @@ export const overlayPageRefHandler = (
   }
 };
 
+export const suggestiveOverlayPageRefHandler = (
+  s: HTMLSpanElement,
+  onloadArgs: OnloadArgs,
+) => {
+  if (s.parentElement && !s.parentElement.closest(".rm-page-ref")) {
+    const tag =
+      s.getAttribute("data-tag") ||
+      s.parentElement.getAttribute("data-link-title");
+    if (
+      tag &&
+      !s.getAttribute("data-discourse-suggestive-overlay") &&
+      isDiscourseNode(getPageUidByPageTitle(tag))
+    ) {
+      s.setAttribute("data-discourse-suggestive-overlay", "true");
+      const parent = document.createElement("span");
+      renderSuggestiveOverlay({
+        parent,
+        tag: tag.replace(/\\"/g, '"'),
+        onloadArgs,
+      });
+      if (s.hasAttribute("data-tag")) {
+        s.appendChild(parent);
+      } else {
+        s.parentElement.appendChild(parent);
+      }
+    }
+  }
+};
+
 export const previewPageRefHandler = (s: HTMLSpanElement) => {
   const tag =
     s.getAttribute("data-tag") ||
diff --git a/apps/roam/src/utils/useDiscourseData.ts b/apps/roam/src/utils/useDiscourseData.ts
new file mode 100644
index 000000000..84993208d
--- /dev/null
+++ b/apps/roam/src/utils/useDiscourseData.ts
@@ -0,0 +1,156 @@
+import getDiscourseContextResults from "./getDiscourseContextResults";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import findDiscourseNode from "./findDiscourseNode";
+import getDiscourseRelations from "./getDiscourseRelations";
+import getDiscourseNodes from "./getDiscourseNodes";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
+import { type RelationDetails } from "./hyde";
+
+export type DiscourseData = {
+  results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
+  refs: number;
+};
+
+const cache: {
+  [tag: string]: DiscourseData;
+} = {};
+
+const getOverlayInfo = async (
+  tag: string,
+  relations: ReturnType<typeof getDiscourseRelations>,
+): Promise<DiscourseData> => {
+  try {
+    if (cache[tag]) return cache[tag];
+
+    const nodes = getDiscourseNodes(relations);
+
+    const [results, refs] = await Promise.all([
+      getDiscourseContextResults({
+        uid: getPageUidByPageTitle(tag),
+        nodes,
+        relations,
+      }),
+      // @ts-ignore - backend to be added to roamjs-components
+      window.roamAlphaAPI.data.backend.q(
+        `[:find ?a :where [?b :node/title "${normalizePageTitle(tag)}"] [?a :block/refs ?b]]`,
+      ),
+    ]);
+
+    return (cache[tag] = {
+      results,
+      refs: refs.length,
+    });
+  } catch (error) {
+    console.error(`Error getting overlay info for ${tag}:`, error);
+    return {
+      results: [],
+      refs: 0,
+    };
+  }
+};
+
+export const useDiscourseNodeFilters = (tag: string) => {
+  const [results, setResults] = useState<DiscourseData["results"]>([]);
+
+  const tagUid = useMemo(() => getPageUidByPageTitle(tag), [tag]);
+  const discourseNode = useMemo(() => findDiscourseNode(tagUid), [tagUid]);
+  const relations = useMemo(() => getDiscourseRelations(), []);
+  const allNodes = useMemo(() => getDiscourseNodes(), []);
+
+  const getInfo = useCallback(
+    () =>
+      getOverlayInfo(tag, relations)
+        .then(({ results }) => {
+          setResults(results);
+        })
+        .finally(() => {}),
+    [tag, relations],
+  );
+
+  useEffect(() => {
+    void getInfo();
+  }, [getInfo]);
+
+  const validRelations = useMemo(() => {
+    if (!discourseNode) return [];
+    const selfType = discourseNode.type;
+
+    return relations.filter(
+      (relation) =>
+        relation.source === selfType || relation.destination === selfType,
+    );
+  }, [relations, discourseNode]);
+
+  const uniqueRelationTypeTriplets = useMemo(() => {
+    if (!discourseNode) return [];
+    const relatedNodeType = discourseNode.type;
+    const uniqueTriplets = new Map<string, RelationDetails>();
+
+    validRelations.forEach((relation) => {
+      const isSelfSource = relation.source === relatedNodeType;
+      const isSelfDestination = relation.destination === relatedNodeType;
+
+      if (isSelfSource) {
+        const targetNodeType = relation.destination;
+        const identifiedTargetNode = allNodes.find(
+          (node) => node.type === targetNodeType,
+        );
+
+        if (identifiedTargetNode) {
+          const key = `${relation.label}-${identifiedTargetNode.text}`;
+          uniqueTriplets.set(key, {
+            relationLabel: relation.label,
+            relatedNodeText: identifiedTargetNode.text,
+            relatedNodeFormat: identifiedTargetNode.format,
+          });
+        }
+      }
+
+      if (isSelfDestination) {
+        const targetNodeType = relation.source;
+        const identifiedTargetNode = allNodes.find(
+          (node) => node.type === targetNodeType,
+        );
+
+        if (identifiedTargetNode) {
+          const key = `${relation.complement}-${identifiedTargetNode.text}`;
+          uniqueTriplets.set(key, {
+            relationLabel: relation.complement,
+            relatedNodeText: identifiedTargetNode.text,
+            relatedNodeFormat: identifiedTargetNode.format,
+          });
+        }
+      }
+    });
+
+    return Array.from(uniqueTriplets.values());
+  }, [validRelations, discourseNode, allNodes]);
+
+  const validTypes = useMemo(() => {
+    if (!discourseNode) return [];
+    const selfType = discourseNode.type;
+
+    const hasSelfRelation = validRelations.some(
+      (relation) =>
+        relation.source === selfType && relation.destination === selfType,
+    );
+    const types = Array.from(
+      new Set(
+        validRelations.flatMap((relation) => [
+          relation.source,
+          relation.destination,
+        ]),
+      ),
+    );
+    return hasSelfRelation ? types : types.filter((type) => type !== selfType);
+  }, [discourseNode, validRelations]);
+
+  return {
+    results,
+    discourseNode,
+    allNodes,
+    uniqueRelationTypeTriplets,
+    validTypes,
+  };
+};