@mastra/playground-ui 68.0.0-alpha.2 → 68.0.0

package/dist/domains/knowledge/components/KnowledgePageExplorer.es.js

@@ -1,16 +1,139 @@
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { n as EmptyState } from "../../../EmptyState-P-Gy898T.js";
 import { useIsMobile } from "../../../hooks/use-is-mobile.es.js";
+import { bodyLinkEdges, bodyLinkRefs, knowledgePageRefIndex } from "../lib/pageRefs.es.js";
 import { KnowledgeNoteItem, KnowledgePageDetail } from "./KnowledgePageDetail.es.js";
+import { isChildPlaceholder, isRestCircle, isScopeGroup, lazyGraph } from "../lib/graphShape.es.js";
 import { mentionPopupPlacement } from "../lib/popupPlacement.es.js";
+import { useStableWhile } from "../lib/useStableWhile.es.js";
 import { KnowledgePageGraph } from "./KnowledgePageGraph.es.js";
 import { KnowledgePageTree } from "./KnowledgePageTree.es.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
+import { ArrowLeft, Hash, Link2, X } from "lucide-react";
 // src/domains/knowledge/components/KnowledgePageExplorer.tsx
+/** Page ids are ULIDs; a bare `[[id]]` is askable, a bare `[[Name]]` is not. */
+var PAGE_ID_SHAPE = /^[0-9A-Z]{26}$/;
+var JUST_CREATED_MS = 6e4;
+var isJustCreated = (page) => Date.now() - Date.parse(page.createdAt) < JUST_CREATED_MS;
 var MIN_SEARCH_LENGTH = 2;
+/** Links of the selected page drawn at most in each direction; the rest are counted. */
+var FOCUS_LINK_CAP = 20;
+/** Keys fetched per direction: a page reached by a note and by the body is two keys but one link, so this is twice the cap. */
+var FOCUS_LINK_FETCH_CAP = 40;
+function edgeKey(edge) {
+	return `${edge.kind}\u0000${edge.source}\u0000${edge.target}`;
+}
+/**
+* The links to draw, and per page how many of its links (into it, out of it) go undrawn. With all links
+* on, every link between drawn pages shows. Otherwise only the selected page's, up to
+* {@link FOCUS_LINK_CAP} each way; with nothing selected, none.
+*/
+function visibleLinks(known, drawn, selectedId, all) {
+	const unique = /* @__PURE__ */ new Map();
+	for (const edge of known) if (edge.source !== edge.target && !unique.has(edgeKey(edge))) unique.set(edgeKey(edge), edge);
+	const pairs = /* @__PURE__ */ new Map();
+	for (const edge of unique.values()) pairs.set(`${edge.source}\u0000${edge.target}`, edge);
+	const shown = /* @__PURE__ */ new Set();
+	const more = {
+		in: 0,
+		out: 0
+	};
+	if (all) {
+		for (const [key, edge] of unique) if (drawn.has(edge.source) && drawn.has(edge.target)) shown.add(key);
+	} else if (selectedId) {
+		const admitted = /* @__PURE__ */ new Set();
+		const over = /* @__PURE__ */ new Set();
+		let ins = 0;
+		let outs = 0;
+		for (const [key, edge] of unique) {
+			if (!drawn.has(edge.source) || !drawn.has(edge.target)) continue;
+			const side = edge.source === selectedId ? "out" : edge.target === selectedId ? "in" : null;
+			if (!side) continue;
+			const pair = `${edge.source}\u0000${edge.target}`;
+			if (!admitted.has(pair) && !over.has(pair)) {
+				if ((side === "out" ? outs : ins) >= 20) {
+					over.add(pair);
+					more[side]++;
+				} else {
+					admitted.add(pair);
+					if (side === "out") outs++;
+					else ins++;
+				}
+			}
+			if (admitted.has(pair)) shown.add(key);
+		}
+	}
+	const drawnPairs = new Set([...shown].map((key) => {
+		const edge = unique.get(key);
+		return `${edge.source}\u0000${edge.target}`;
+	}));
+	const hidden = /* @__PURE__ */ new Map();
+	const bump = (id, side) => {
+		if (!drawn.has(id)) return;
+		const counts = hidden.get(id) ?? {
+			in: 0,
+			out: 0
+		};
+		counts[side]++;
+		hidden.set(id, counts);
+	};
+	for (const [pair, edge] of pairs) {
+		if (drawnPairs.has(pair)) continue;
+		bump(edge.source, "out");
+		bump(edge.target, "in");
+	}
+	return {
+		edges: [...unique.values()].filter((edge) => shown.has(edgeKey(edge))),
+		hidden,
+		more
+	};
+}
+/** The round buttons floating over the graph: muted when off or idle, a solid fill when pressed. */
+var FLOAT_BUTTON = "flex size-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-overlay transition-colors hover:bg-fill-subtle hover:text-foreground aria-pressed:border-transparent aria-pressed:bg-fill-inverse aria-pressed:text-background aria-pressed:hover:bg-fill-inverse disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-card";
 var noTreeLevels = () => [];
+var noKeys = [];
+var noLinkedPages = () => [];
+var noLinkQuery = () => ({
+	isPending: false,
+	isError: false,
+	error: null
+});
+/** Longest a pointer rests on a page before its links are fetched, so sweeping across the graph fetches none. */
+var HOVER_FETCH_DELAY_MS = 150;
+/** Per page, the links into and out of it that none of `shown` draws, given the exact totals. */
+function undrawnLinks(exact, shown) {
+	const drawn = /* @__PURE__ */ new Map();
+	const pairs = /* @__PURE__ */ new Set();
+	for (const edge of shown) {
+		if (edge.kind === "parent" || pairs.has(`${edge.source}\u0000${edge.target}`)) continue;
+		pairs.add(`${edge.source}\u0000${edge.target}`);
+		const out = drawn.get(edge.source) ?? {
+			in: 0,
+			out: 0
+		};
+		out.out++;
+		drawn.set(edge.source, out);
+		const into = drawn.get(edge.target) ?? {
+			in: 0,
+			out: 0
+		};
+		into.in++;
+		drawn.set(edge.target, into);
+	}
+	const hidden = /* @__PURE__ */ new Map();
+	for (const [id, total] of exact) {
+		const seen = drawn.get(id) ?? {
+			in: 0,
+			out: 0
+		};
+		hidden.set(id, {
+			in: Math.max(0, total.in - seen.in),
+			out: Math.max(0, total.out - seen.out)
+		});
+	}
+	return hidden;
+}
 var noActivity = () => ({
 	isPending: false,
 	isError: false,
@@ -277,11 +400,15 @@ function SearchBox({ source, onSelect }) {
 		}) : null]
 	});
 }
+function sameLevels(a, b) {
+	const sameSet = (x, y) => x.size === y.size && [...x].every((id) => y.has(id));
+	return a.pages.length === b.pages.length && a.pages.every((page, index) => page === b.pages[index]) && sameSet(a.loaded, b.loaded) && sameSet(a.failed, b.failed) && a.nextCursor.size === b.nextCursor.size && [...a.nextCursor].every(([id, cursor]) => b.nextCursor.get(id) === cursor);
+}
 /**
 * The tree loaded a level at a time through `useTreeLevels`: the root scopes, then each level as it is
 * opened, plus the path to the selected page. Unloaded pages keep a chevron until opened.
 */
-function useLazyTree(source, graph, selected) {
+function useLazyTree(source, graph, selected, graphOpened) {
 	const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
 	const [more, setMore] = useState(() => /* @__PURE__ */ new Map());
 	const requests = useMemo(() => {
@@ -293,17 +420,25 @@ function useLazyTree(source, graph, selected) {
 				cursor
 			});
 		}
+		for (const id of graphOpened) if (!expanded.has(id)) list.push({ parentId: id });
 		return list;
-	}, [expanded, more]);
+	}, [
+		expanded,
+		more,
+		graphOpened
+	]);
 	const levels = (source.useTreeLevels ?? noTreeLevels)(requests);
-	const { pages, loaded, nextCursor } = useMemo(() => {
+	const built = useMemo(() => {
+		const failedIds = /* @__PURE__ */ new Set();
 		const byId = /* @__PURE__ */ new Map();
 		const loadedIds = /* @__PURE__ */ new Set();
 		const next = /* @__PURE__ */ new Map();
 		levels.forEach((level, index) => {
 			const request = requests[index];
-			if (!request || !level.data) return;
+			if (!request) return;
 			const key = request.parentId ?? "";
+			if (level.isError) failedIds.add(key);
+			if (!level.data) return;
 			loadedIds.add(key);
 			for (const page of level.data.pages) byId.set(page.id, page);
 			if (level.data.nextCursor) next.set(key, level.data.nextCursor);
@@ -313,6 +448,7 @@ function useLazyTree(source, graph, selected) {
 		return {
 			pages: [...byId.values()],
 			loaded: loadedIds,
+			failed: failedIds,
 			nextCursor: next
 		};
 	}, [
@@ -320,10 +456,13 @@ function useLazyTree(source, graph, selected) {
 		requests,
 		selected
 	]);
+	const { pages, loaded, failed, nextCursor } = useStableWhile(built, sameLevels);
 	const graphParents = useMemo(() => graph.truncated ? null : new Set(graph.pages.map((page) => page.parentId).filter((id) => id !== null)), [graph]);
 	return {
 		pages,
-		mayHaveChildren: useCallback((page) => !loaded.has(page.id) && (graphParents ? graphParents.has(page.id) : true), [loaded, graphParents]),
+		loaded,
+		failed,
+		mayHaveChildren: useCallback((page) => !loaded.has(page.id) && (page.childCountCapped || (page.childCount !== void 0 ? page.childCount > 0 : !isJustCreated(page) && (graphParents ? graphParents.has(page.id) : true))), [loaded, graphParents]),
 		loadMore: useMemo(() => {
 			const map = /* @__PURE__ */ new Map();
 			for (const [parentId, cursor] of nextCursor) map.set(parentId, () => setMore((current) => new Map(current).set(parentId, [...current.get(parentId) ?? [], cursor])));
@@ -341,37 +480,268 @@ function useLazyTree(source, graph, selected) {
 * page instead.
 */
 function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view, onViewChange }) {
-	const pagesById = useMemo(() => new Map(graph.pages.map((page) => [page.id, page])), [graph.pages]);
+	const selected = source.usePage(selectedPageId);
+	const lazyMode = !!source.useTreeLevels;
+	const [graphOpened, setGraphOpened] = useState([]);
+	const [previewed, setPreviewed] = useState([]);
+	const [openGroups, setOpenGroups] = useState(() => /* @__PURE__ */ new Set());
+	const [revealed, setRevealed] = useState(() => /* @__PURE__ */ new Map());
+	const [allLinks, setAllLinks] = useState(false);
+	const [dotCounts, setDotCounts] = useState(true);
+	const lazy = useLazyTree(source, graph, selected.data, graphOpened);
+	const drawnGraph = useMemo(() => lazyMode ? lazyGraph({
+		pages: [...new Map([...graph.pages, ...lazy.pages].map((page) => [page.id, page])).values()],
+		loadedParents: lazy.loaded,
+		rootKey: "",
+		focusId: selectedPageId,
+		openGroups,
+		revealed
+	}) : {
+		pages: graph.pages,
+		hiddenChildren: /* @__PURE__ */ new Map(),
+		wanted: [],
+		hub: null
+	}, [
+		lazyMode,
+		lazy.pages,
+		lazy.loaded,
+		selectedPageId,
+		openGroups,
+		revealed,
+		graph.pages
+	]);
+	const graphSettled = !lazyMode || drawnGraph.wanted.every((id) => lazy.loaded.has(id) || lazy.failed.has(id));
+	useEffect(() => {
+		if (!lazyMode || view === "page") return;
+		const next = [.../* @__PURE__ */ new Set([...drawnGraph.wanted, ...previewed])];
+		setGraphOpened((current) => current.length === next.length && current.every((id, index) => id === next[index]) ? current : next);
+	}, [
+		lazyMode,
+		view,
+		drawnGraph.wanted,
+		previewed
+	]);
+	const focusLinkList = (source.usePageLinks ?? noLinkQuery)(view === "graph" ? selectedPageId : null).data;
+	const linkEnds = useMemo(() => {
+		const detail = selected.data;
+		if (!detail || detail.page.id !== selectedPageId) return null;
+		const known = new Map([
+			...lazy.pages,
+			...detail.ancestors,
+			...detail.related
+		].map((page) => [page.id, page]));
+		const index = knowledgePageRefIndex(known.values());
+		const own = detail.page.id;
+		const mentions = detail.notes.flatMap((note) => note.mentions).filter((key) => key && key !== own);
+		const refs = bodyLinkRefs(detail.page.body ?? "").map((ref) => ref.trim()).filter((key) => key && key !== own);
+		const out = [...mentions, ...refs];
+		const mentioned = new Set(mentions);
+		const unaskable = new Set(refs.filter((ref) => !ref.includes(":") && !PAGE_ID_SHAPE.test(ref) && !mentioned.has(ref)));
+		const listed = (focusLinkList?.edges ?? []).filter((edge) => edge.toPageId === own);
+		const noteInto = [.../* @__PURE__ */ new Set([...(detail.mentionedBy ?? []).map((note) => note.pageId), ...listed.filter((edge) => edge.kind === "note").map((edge) => edge.fromPageId)])].filter((id) => id !== own);
+		const bodyInto = [...new Set(listed.filter((edge) => edge.kind === "body").map((edge) => edge.fromPageId))].filter((id) => id !== own);
+		const into = [.../* @__PURE__ */ new Set([...noteInto, ...bodyInto])];
+		const lookup = (key) => known.get(key) ?? index.resolve(key);
+		const missing = (keys) => [...new Set(keys.filter((key) => !lookup(key) && !unaskable.has(key)))];
+		const resolvedCount = (keys) => new Set(keys.flatMap((key) => lookup(key)?.id ?? [])).size;
+		const room = (keys) => Math.max(0, FOCUS_LINK_FETCH_CAP - resolvedCount(keys));
+		const wantOut = missing(out);
+		const wantIn = missing(into);
+		return {
+			detail,
+			known,
+			mentions,
+			refs,
+			into,
+			noteInto,
+			bodyInto,
+			lookup,
+			fetchKeys: [...wantOut.slice(0, room(out)), ...wantIn.slice(0, room(into))],
+			unfetched: {
+				out: Math.max(0, wantOut.length - room(out)),
+				in: Math.max(0, wantIn.length - room(into))
+			}
+		};
+	}, [
+		selected.data,
+		selectedPageId,
+		lazy.pages,
+		focusLinkList
+	]);
+	const fetchKeys = linkEnds?.fetchKeys ?? noKeys;
+	const fetchedStates = (source.useLinkedPages ?? noLinkedPages)(fetchKeys);
+	const fetchedSignature = fetchKeys.map((key, index) => `${key}=${fetchedStates[index]?.data?.page?.id ?? ""}`).join("|");
+	const fetchedPages = useMemo(() => {
+		const byKey = /* @__PURE__ */ new Map();
+		fetchKeys.forEach((key, index) => {
+			const page = fetchedStates[index]?.data?.page;
+			if (page) byKey.set(key, page);
+		});
+		return byKey;
+	}, [fetchedSignature]);
+	const focusLinks = useMemo(() => {
+		if (!linkEnds) return {
+			edges: [],
+			pages: [],
+			unfetched: {
+				in: 0,
+				out: 0
+			}
+		};
+		const { detail, lookup, mentions, refs, noteInto, bodyInto } = linkEnds;
+		const resolve = (key) => lookup(key) ?? fetchedPages.get(key);
+		const own = detail.page.id;
+		const edges = [];
+		const pages = /* @__PURE__ */ new Map();
+		const reach = (key, kind, side) => {
+			const target = resolve(key);
+			if (!target || target.id === own) {
+				if (!target && kind === "mention" && side === "out") edges.push({
+					source: own,
+					target: key,
+					kind
+				});
+				if (!target && side === "in") edges.push({
+					source: key,
+					target: own,
+					kind
+				});
+				return;
+			}
+			pages.set(target.id, target);
+			edges.push(side === "out" ? {
+				source: own,
+				target: target.id,
+				kind
+			} : {
+				source: target.id,
+				target: own,
+				kind
+			});
+		};
+		for (const key of mentions) reach(key, "mention", "out");
+		for (const key of refs) reach(key, "link", "out");
+		for (const key of noteInto) reach(key, "mention", "in");
+		for (const key of bodyInto) reach(key, "link", "in");
+		return {
+			edges: edges.filter((edge) => edge.source !== edge.target),
+			pages: [...pages.values()],
+			unfetched: linkEnds.unfetched
+		};
+	}, [linkEnds, fetchedPages]);
+	const focusLinkIds = useMemo(() => new Set(focusLinks.pages.map((page) => page.id)), [focusLinks.pages]);
+	const drawn = useMemo(() => {
+		const ids = new Set(drawnGraph.pages.map((page) => page.id));
+		const extra = focusLinks.pages.filter((page) => !ids.has(page.id));
+		return {
+			...drawnGraph,
+			pages: extra.length ? [...drawnGraph.pages, ...extra] : drawnGraph.pages
+		};
+	}, [drawnGraph, focusLinks.pages]);
+	const pagesById = useMemo(() => new Map(drawn.pages.map((page) => [page.id, page])), [drawn.pages]);
+	const previewParent = (parentId) => setPreviewed((current) => current.includes(parentId) ? current : [...current, parentId].slice(-8));
 	const [focusScopeId, setFocusScopeId] = useState(null);
-	const mentionEdges = useMemo(() => graph.edges.filter((edge) => edge.kind === "mention"), [graph.edges]);
+	const knownLinks = useMemo(() => {
+		const seen = /* @__PURE__ */ new Set();
+		return [
+			...graph.edges.filter((edge) => edge.kind === "mention"),
+			...bodyLinkEdges(drawn.pages),
+			...focusLinks.edges
+		].filter((edge) => {
+			const key = `${edge.kind}:${edge.source}>${edge.target}`;
+			return seen.has(key) ? false : (seen.add(key), true);
+		});
+	}, [
+		graph.edges,
+		drawn.pages,
+		focusLinks.edges
+	]);
+	const linkView = useMemo(() => visibleLinks(knownLinks, pagesById, selectedPageId, allLinks), [
+		knownLinks,
+		pagesById,
+		selectedPageId,
+		allLinks
+	]);
+	const linkEdges = linkView.edges;
+	const countIds = useMemo(() => drawn.pages.filter((page) => !isChildPlaceholder(page) && !isRestCircle(page) && !isScopeGroup(page)).map((page) => page.id).sort(), [drawn.pages]);
+	const counted = (source.useLinkCounts ?? noLinkQuery)(view === "graph" ? countIds : []);
+	const exactCounts = useMemo(() => counted.data ? new Map(Object.entries(counted.data)) : void 0, [counted.data]);
+	const hiddenLinks = useMemo(() => exactCounts ? undrawnLinks(exactCounts, linkEdges) : linkView.hidden, [
+		exactCounts,
+		linkEdges,
+		linkView.hidden
+	]);
+	const [hoverFetchId, setHoverFetchId] = useState(null);
+	const hoverTimer = useRef(void 0);
+	const setHoveredId = useCallback((id) => {
+		clearTimeout(hoverTimer.current);
+		if (id) hoverTimer.current = setTimeout(() => setHoverFetchId(id), HOVER_FETCH_DELAY_MS);
+		else setHoverFetchId(null);
+	}, []);
+	useEffect(() => () => clearTimeout(hoverTimer.current), []);
+	const hovered = (source.usePageLinks ?? noLinkQuery)(hoverFetchId);
+	const hoverEdges = useMemo(() => hoverFetchId && hovered.data ? hovered.data.edges.map((edge) => ({
+		source: edge.fromPageId,
+		target: edge.toPageId,
+		kind: edge.kind === "body" ? "link" : "mention",
+		count: edge.count
+	})) : [], [hoverFetchId, hovered.data]);
 	const [mention, setMention] = useState(null);
 	const [marked, setMarked] = useState(null);
 	const closeMention = useCallback(() => setMention(null), []);
 	const graphShown = !useIsMobile(1024) || view === "graph";
 	const highlightMentionOf = marked && marked.source === selectedPageId ? marked.target : void 0;
-	const selected = source.usePage(selectedPageId);
-	const lazy = useLazyTree(source, graph, selected.data);
 	const showPage = view === "page" && !!selectedPageId;
+	const [history, setHistory] = useState([]);
+	const lastSelected = useRef(selectedPageId);
+	const goingBackTo = useRef(null);
+	useEffect(() => {
+		const previous = lastSelected.current;
+		lastSelected.current = selectedPageId;
+		const backTarget = goingBackTo.current;
+		goingBackTo.current = null;
+		if (backTarget && backTarget === selectedPageId) return;
+		if (!previous || !selectedPageId || previous === selectedPageId) return;
+		setHistory((current) => [...current.filter((id) => id !== selectedPageId), previous].slice(-50));
+	}, [selectedPageId]);
+	const backTo = history.length ? history[history.length - 1] : void 0;
+	const goBack = () => {
+		if (!backTo) return;
+		goingBackTo.current = backTo;
+		setHistory((current) => current.slice(0, -1));
+		onSelect(backTo);
+	};
 	const openPage = (pageId) => {
 		onSelect(pageId);
 		onViewChange("page");
 	};
 	const selectFromTree = (page) => {
 		if (page.isScope) setFocusScopeId(page.id);
-		if (view === "graph") onSelect(page.id);
+		if (view === "graph" && (lazyMode || pagesById.has(page.id)) && page.id !== selectedPageId) onSelect(page.id);
 		else openPage(page.id);
 	};
+	const leaveScopeFocusFor = (pageId) => {
+		if (focusScopeId && !withinScope([...lazy.pages, ...drawn.pages], focusScopeId).some((page) => page.id === pageId)) setFocusScopeId(null);
+	};
 	const openAnywhere = (pageId) => {
-		if (focusScopeId && !withinScope([...lazy.pages, ...graph.pages], focusScopeId).some((page) => page.id === pageId)) setFocusScopeId(null);
+		leaveScopeFocusFor(pageId);
 		openPage(pageId);
 	};
+	const selectFromSearch = (pageId) => {
+		if (view === "graph" && (lazyMode || pagesById.has(pageId)) && pageId !== selectedPageId) {
+			leaveScopeFocusFor(pageId);
+			onSelect(pageId);
+		} else openAnywhere(pageId);
+	};
 	const focusScope = focusScopeId ? lazy.pages.find((page) => page.id === focusScopeId) ?? pagesById.get(focusScopeId) : void 0;
 	const treePages = withinScope(source.useTreeLevels ? lazy.pages : graph.pages, focusScope ? focusScopeId : null);
-	const graphPages = useMemo(() => withinScope(graph.pages, focusScope ? focusScopeId : null), [
-		graph.pages,
+	const graphPages = useMemo(() => withinScope(drawn.pages, focusScope ? focusScopeId : null), [
+		drawn.pages,
 		focusScope,
 		focusScopeId
 	]);
+	const focusedInGraph = view === "graph" ? pagesById.get(selectedPageId ?? drawn.hub ?? "") : void 0;
+	focusedInGraph && drawn.hiddenChildren.get(focusedInGraph.id);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3",
 		children: [
@@ -379,11 +749,11 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 				className: "flex flex-wrap items-center gap-2",
 				children: [/* @__PURE__ */ jsx(SearchBox, {
 					source,
-					onSelect: openAnywhere
+					onSelect: selectFromSearch
 				}), /* @__PURE__ */ jsx("div", {
 					role: "group",
 					"aria-label": "View",
-					className: "flex rounded border border-border",
+					className: "flex overflow-hidden rounded border border-border",
 					children: [
 						{
 							value: "tree",
@@ -402,13 +772,13 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 						type: "button",
 						"aria-pressed": option.value === "page" ? showPage : option.value === "graph" ? !showPage && view !== "tree" : view === "tree",
 						disabled: option.value === "page" && !selectedPageId,
-						className: `text-ui-md px-3 py-1 disabled:opacity-50 aria-pressed:bg-muted ${option.narrowOnly ? "lg:hidden" : ""}`,
+						className: `text-ui-md px-3 py-1 text-muted-foreground disabled:opacity-50 aria-pressed:bg-fill-inverse aria-pressed:text-background ${option.narrowOnly ? "lg:hidden" : ""}`,
 						onClick: () => onViewChange(option.value),
 						children: option.label
 					}, option.value))
 				})]
 			}),
-			graph.truncated && !showPage ? /* @__PURE__ */ jsxs("p", {
+			!lazyMode && graph.truncated && !showPage ? /* @__PURE__ */ jsxs("p", {
 				className: "text-ui-sm text-muted-foreground",
 				children: [
 					"The graph shows the first ",
@@ -480,41 +850,108 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 				}) : /* @__PURE__ */ jsxs("div", {
 					className: `relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background lg:block lg:h-full ${view === "graph" ? "block" : "hidden"}`,
 					"data-testid": "knowledge-graph-container",
-					children: [graphShown ? /* @__PURE__ */ jsx(KnowledgePageGraph, {
-						pages: graphPages,
-						edges: mentionEdges,
-						pinnedIds: graph.pinnedIds,
-						grants: graph.grants,
-						selectedPageId,
-						onSelect: (page) => {
-							onSelect(page.id);
-							if (view !== "graph") onViewChange("graph");
-						},
-						onOpen: (page) => openPage(page.id),
-						onClearSelection: () => {
-							setMention(null);
-							if (selectedPageId) onSelect(null);
-						},
-						onMentionSelect: setMention
-					}) : null, mention && graphShown ? /* @__PURE__ */ jsx(MentionPopup, {
-						source,
-						mention,
-						pagesById,
-						onClose: closeMention,
-						onOpen: (pageId) => {
-							setMarked(pageId === mention.source.id ? {
-								source: mention.source.id,
-								target: mention.target.id
-							} : null);
-							setMention(null);
-							openAnywhere(pageId);
-						}
-					}) : null]
+					children: [
+						graphShown ? /* @__PURE__ */ jsxs("div", {
+							className: "absolute top-3 right-3 z-10 flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"data-testid": "knowledge-graph-back",
+									"aria-label": "Back",
+									title: backTo ? "Back to the page you focused before this one" : "Back (nothing to go back to yet)",
+									disabled: !backTo,
+									className: FLOAT_BUTTON,
+									onClick: goBack,
+									children: /* @__PURE__ */ jsx(ArrowLeft, {
+										"aria-hidden": true,
+										className: "size-4"
+									})
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": "All links",
+									"aria-pressed": allLinks,
+									"data-testid": "knowledge-graph-all-links",
+									title: `All links: ${allLinks ? "on" : "off"}. Draw every link between the pages in the graph, not only the selected page's`,
+									className: FLOAT_BUTTON,
+									onClick: () => setAllLinks((current) => !current),
+									children: /* @__PURE__ */ jsx(Link2, {
+										"aria-hidden": true,
+										className: "size-4"
+									})
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": "Link counts",
+									"aria-pressed": dotCounts,
+									"data-testid": "knowledge-graph-dot-counts",
+									title: `Link counts: ${dotCounts ? "on" : "off"}. Write how many links go in and out of each dot inside it`,
+									className: FLOAT_BUTTON,
+									onClick: () => setDotCounts((current) => !current),
+									children: /* @__PURE__ */ jsx(Hash, {
+										"aria-hidden": true,
+										className: "size-4"
+									})
+								})
+							]
+						}) : null,
+						graphShown ? /* @__PURE__ */ jsx(KnowledgePageGraph, {
+							pages: graphPages,
+							edges: linkEdges,
+							pinnedIds: graph.pinnedIds,
+							grants: graph.grants,
+							selectedPageId,
+							centerId: drawn.hub,
+							hiddenLinks,
+							knownLinks,
+							fetchedLinks: hoverEdges,
+							exactLinkCounts: exactCounts,
+							onHover: setHoveredId,
+							nearIds: focusLinkIds,
+							settled: graphSettled,
+							showCounts: dotCounts,
+							onPreview: (page) => {
+								if (isChildPlaceholder(page) && page.parentId) previewParent(page.parentId);
+							},
+							onSelect: (page) => {
+								if (isChildPlaceholder(page)) return page.parentId ? previewParent(page.parentId) : void 0;
+								if (isRestCircle(page)) {
+									const parentId = page.parentId;
+									if (!parentId) return void 0;
+									setRevealed((current) => new Map(current).set(parentId, (current.get(parentId) ?? 0) + 12));
+									return lazy.loadMore.get(parentId)?.();
+								}
+								if (isScopeGroup(page)) return setOpenGroups((current) => new Set(current).add(page.id));
+								onSelect(page.id);
+								if (view !== "graph") onViewChange("graph");
+							},
+							onOpen: (page) => openPage(page.id),
+							onClearSelection: () => {
+								setMention(null);
+								if (selectedPageId) onSelect(null);
+							},
+							onMentionSelect: setMention
+						}) : null,
+						mention && graphShown ? /* @__PURE__ */ jsx(MentionPopup, {
+							source,
+							mention,
+							pagesById,
+							onClose: closeMention,
+							onOpen: (pageId) => {
+								setMarked(pageId === mention.source.id ? {
+									source: mention.source.id,
+									target: mention.target.id
+								} : null);
+								setMention(null);
+								openAnywhere(pageId);
+							}
+						}) : null
+					]
 				})]
 			})
 		]
 	});
 }
-export { KnowledgePageExplorer };
+export { FOCUS_LINK_CAP, KnowledgePageExplorer };
 
 //# sourceMappingURL=KnowledgePageExplorer.es.js.map