@mastra/playground-ui 67.0.0 → 68.0.0-alpha.0

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

@@ -0,0 +1,625 @@
+import { t as Txt } from "../../../Txt-BM6TVV_c.js";
+import { grantGraph, pageGraphEdges, pageNeighbourIds, toPageFlow } from "../lib/pageGraph.es.js";
+import { layoutPageGraph } from "../lib/pageLayout.es.js";
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Maximize, Pin } from "lucide-react";
+import { Background, BackgroundVariant, BaseEdge, ControlButton, Controls, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, getViewportForBounds, useReactFlow } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import '../../../KnowledgePageGraph.css';// src/domains/knowledge/components/KnowledgePageGraph.tsx
+var SCOPE_STYLE = {
+	"--knowledge-color": "var(--chart-blue)",
+	background: "color-mix(in oklab, var(--chart-blue) 16%, var(--card))"
+};
+var PAGE_STYLE = { "--knowledge-color": "var(--border-strong)" };
+var PARENT_EDGE_STYLE = {
+	stroke: "var(--foreground)",
+	strokeOpacity: .45,
+	strokeDasharray: "4 4",
+	strokeWidth: 1.25
+};
+var MENTION_EDGE_COLOR = "var(--chart-blue)";
+var PARENT_ARROW_COLOR = "var(--muted-foreground)";
+var PARENT_ARROW = {
+	type: MarkerType.Arrow,
+	color: PARENT_ARROW_COLOR,
+	width: 12,
+	height: 12,
+	strokeWidth: 1.5
+};
+var GRANT_EDGE_COLOR = "var(--chart-purple)";
+var GRANT_EDGE_STYLE = {
+	stroke: GRANT_EDGE_COLOR,
+	strokeWidth: 1.75,
+	strokeDasharray: "8 3 2 3"
+};
+var GRANT_ARROW = {
+	type: MarkerType.ArrowClosed,
+	color: GRANT_EDGE_COLOR,
+	width: 13,
+	height: 13
+};
+var PLACEHOLDER_STYLE = {
+	background: "var(--card)",
+	borderColor: "var(--chart-purple)",
+	borderStyle: "dashed"
+};
+/**
+* The pin badge sits on the circle's rim at its top-right (45°).
+*/
+function pinBadgeStyle(size) {
+	const badge = 20;
+	const offset = size / 2 * (1 - Math.SQRT1_2);
+	return {
+		badge,
+		style: {
+			width: badge,
+			height: badge,
+			top: offset,
+			right: offset,
+			transform: "translate(50%, -50%)"
+		}
+	};
+}
+/** A scope or page: its kind on top, its name below, both inside the circle. */
+function PageNodeComponent({ data }) {
+	const { page, size, selected, pinned, dimmed } = data;
+	const kind = page.isScope ? page.displayLabel ?? "Scope" : "Page";
+	const placeholder = isPlaceholder(page);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "knowledge-page-node",
+		"data-page-id": page.id,
+		"data-page-type": placeholder ? "placeholder" : page.isScope ? "scope" : "page",
+		className: `relative transition-opacity ${placeholder ? "cursor-default" : "cursor-pointer"}`,
+		style: {
+			width: size,
+			height: size,
+			opacity: dimmed ? .35 : 1
+		},
+		title: placeholder ? `${kind} · ${page.address} · nothing written to it yet` : page.isScope && page.address ? `${kind} · ${page.address}` : page.name,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "knowledge-circle flex size-full flex-col items-center justify-center gap-0.5 overflow-hidden rounded-full border-2 px-3 text-center shadow-raised",
+				"data-selected": selected || void 0,
+				style: placeholder ? PLACEHOLDER_STYLE : page.isScope ? SCOPE_STYLE : PAGE_STYLE,
+				children: [/* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: page.isScope ? void 0 : "muted",
+					className: "pointer-events-none line-clamp-2 max-w-full tracking-wide uppercase",
+					style: page.isScope ? { color: "var(--chart-blue)" } : void 0,
+					"data-testid": page.isScope ? "knowledge-scope-caption" : "knowledge-page-caption",
+					children: kind
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "label",
+					tone: "ink",
+					className: "pointer-events-none line-clamp-3 max-w-full break-words",
+					children: page.isScope && page.address ? /* @__PURE__ */ jsx(BreakAtColons, { text: page.address }) : page.name
+				})]
+			}),
+			pinned ? /* @__PURE__ */ jsx(PinBadge, { size }) : null,
+			/* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: Position.Top,
+				className: "!invisible"
+			}),
+			/* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: Position.Bottom,
+				className: "!invisible"
+			})
+		]
+	});
+}
+function isPlaceholder(page) {
+	return page.id.startsWith("unplaced:");
+}
+/** Lets a scope address like `role:acme:admin` wrap after a colon instead of mid-word. */
+function BreakAtColons({ text }) {
+	const parts = text.split(":");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [part, index < parts.length - 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [":", /* @__PURE__ */ jsx("wbr", {})] }) : null] }, index)) });
+}
+function PinBadge({ size }) {
+	const { badge, style } = pinBadgeStyle(size);
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "knowledge-pin-badge",
+		className: "absolute flex items-center justify-center rounded-full bg-badge-amber-strong text-badge-amber-foreground shadow-raised",
+		style,
+		"aria-label": "Pinned",
+		children: /* @__PURE__ */ jsx(Pin, {
+			size: Math.round(badge * .6),
+			"aria-hidden": true
+		})
+	});
+}
+/** A straight line from one circle's rim to the other's, so lines never loop or hide behind circles. */
+function rimToRim(from, to, gap = 3) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	const length = Math.hypot(dx, dy) || 1;
+	const ux = dx / length;
+	const uy = dy / length;
+	return {
+		x1: from.x + ux * (from.r + gap),
+		y1: from.y + uy * (from.r + gap),
+		x2: to.x - ux * (to.r + gap),
+		y2: to.y - uy * (to.r + gap)
+	};
+}
+function RimEdgeComponent({ id, data, style, markerEnd }) {
+	if (!data) return null;
+	const { x1, y1, x2, y2 } = rimToRim(data.from, data.to);
+	const mention = data.kind === "mention";
+	const path = `M ${x1} ${y1} L ${x2} ${y2}`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path,
+		style: {
+			...style,
+			opacity: data.dimmed ? .2 : 1
+		},
+		markerEnd,
+		interactionWidth: mention ? 20 : 0
+	}), data.kind === "grant" && data.role ? /* @__PURE__ */ jsx("path", {
+		d: path,
+		fill: "none",
+		stroke: "transparent",
+		strokeWidth: 14,
+		"data-testid": "knowledge-grant-edge",
+		"data-role": data.role,
+		"aria-label": `Grants ${data.role}`,
+		children: /* @__PURE__ */ jsx("title", { children: `Grants ${data.role}` })
+	}) : null] });
+}
+var edgeTypes = { rim: RimEdgeComponent };
+var nodeTypes = { page: memo(PageNodeComponent) };
+/** The box around laid-out circles, in graph coordinates; `null` when there are none. */
+function graphBounds(nodes) {
+	if (nodes.length === 0) return null;
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const node of nodes) {
+		minX = Math.min(minX, node.position.x);
+		minY = Math.min(minY, node.position.y);
+		maxX = Math.max(maxX, node.position.x + (node.width ?? 0));
+		maxY = Math.max(maxY, node.position.y + (node.height ?? 0));
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+var LEGEND_SWATCH = "knowledge-circle inline-block size-3 shrink-0 rounded-full border-2";
+/** What the circles, lines and badge mean. */
+function GraphLegend({ grants }) {
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-label": "Legend",
+		className: "pointer-events-none absolute top-2 left-2 z-10 flex flex-col gap-1 rounded-md border border-border bg-card/90 px-2 py-1.5 shadow-raised",
+		children: [
+			/* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: LEGEND_SWATCH,
+					style: { ...SCOPE_STYLE },
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Scope"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: LEGEND_SWATCH,
+					style: { ...PAGE_STYLE },
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Page"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("svg", {
+					width: "12",
+					height: "4",
+					"aria-hidden": true,
+					className: "shrink-0",
+					children: /* @__PURE__ */ jsx("line", {
+						x1: "0",
+						y1: "2",
+						x2: "12",
+						y2: "2",
+						stroke: MENTION_EDGE_COLOR,
+						strokeWidth: "2"
+					})
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Mentioned in notes"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("svg", {
+					width: "16",
+					height: "8",
+					"aria-hidden": true,
+					className: "shrink-0",
+					"data-testid": "knowledge-legend-parent-arrow",
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: "0",
+						y1: "4",
+						x2: "14",
+						y2: "4",
+						...PARENT_EDGE_STYLE,
+						strokeDasharray: "3 2"
+					}), /* @__PURE__ */ jsx("polyline", {
+						points: "10,1 14,4 10,7",
+						fill: "none",
+						stroke: PARENT_ARROW_COLOR,
+						strokeWidth: "1.25",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})]
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Parent → child"
+				})]
+			}),
+			grants ? /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("svg", {
+					width: "16",
+					height: "8",
+					"aria-hidden": true,
+					className: "shrink-0",
+					"data-testid": "knowledge-legend-grant",
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: "0",
+						y1: "4",
+						x2: "12",
+						y2: "4",
+						...GRANT_EDGE_STYLE,
+						strokeDasharray: "4 2 1 2",
+						strokeWidth: "1.5"
+					}), /* @__PURE__ */ jsx("polygon", {
+						points: "11,1 16,4 11,7",
+						fill: GRANT_EDGE_COLOR
+					})]
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Grants access (hover for role)"
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex size-3 shrink-0 items-center justify-center rounded-full bg-badge-amber-strong text-badge-amber-foreground",
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(Pin, { size: 8 })
+				}), /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Pinned"
+				})]
+			})
+		]
+	});
+}
+/** How far the pointer may move between press and release and still count as a click, not a pan. */
+var CLICK_SLOP_PX = 4;
+/**
+* The schema-4 Knowledge page graph: scopes and pages as circles sized by how often they are mentioned,
+* parent links as faint edges and mentions as solid ones. The first layout is deterministic for the same pages; later updates start from where pages already sit.
+*/
+function KnowledgePageGraph(props) {
+	return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(KnowledgePageGraphInner, { ...props }) });
+}
+function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selectedPageId, onSelect, onOpen, onClearSelection, onMentionSelect }) {
+	const { graphPages, allEdges } = useMemo(() => {
+		const granted = grantGraph(pages, grants);
+		return {
+			graphPages: granted.placeholders.length ? [...pages, ...granted.placeholders] : pages,
+			allEdges: [...pageGraphEdges(pages, edges), ...granted.edges]
+		};
+	}, [
+		pages,
+		edges,
+		grants
+	]);
+	const lastLayout = useRef(void 0);
+	const laidOut = useMemo(() => {
+		const flow = toPageFlow(graphPages, allEdges);
+		const layout = layoutPageGraph(lastLayout.current, flow.nodes.map((node) => ({
+			id: node.id,
+			size: node.data.size
+		})), flow.edges.map((edge) => ({
+			source: edge.source,
+			target: edge.target
+		})));
+		lastLayout.current = layout;
+		return {
+			nodes: flow.nodes,
+			edges: flow.edges,
+			positions: layout.positions
+		};
+	}, [graphPages, allEdges]);
+	const pinned = useMemo(() => new Set(pinnedIds), [pinnedIds]);
+	const neighbours = useMemo(() => selectedPageId && laidOut.positions.has(selectedPageId) ? pageNeighbourIds(selectedPageId, allEdges) : null, [
+		selectedPageId,
+		laidOut,
+		allEdges
+	]);
+	const nodes = useMemo(() => laidOut.nodes.map((node) => {
+		const center = laidOut.positions.get(node.id) ?? {
+			x: 0,
+			y: 0
+		};
+		return {
+			...node,
+			width: node.data.size,
+			height: node.data.size,
+			handles: [{
+				type: "target",
+				position: Position.Top,
+				x: node.data.size / 2,
+				y: 0,
+				width: 1,
+				height: 1
+			}, {
+				type: "source",
+				position: Position.Bottom,
+				x: node.data.size / 2,
+				y: node.data.size,
+				width: 1,
+				height: 1
+			}],
+			position: {
+				x: center.x - node.data.size / 2,
+				y: center.y - node.data.size / 2
+			},
+			data: {
+				...node.data,
+				selected: node.id === selectedPageId,
+				pinned: pinned.has(node.id),
+				dimmed: !!neighbours && !neighbours.has(node.id)
+			}
+		};
+	}), [
+		laidOut,
+		selectedPageId,
+		pinned,
+		neighbours
+	]);
+	const flowEdges = useMemo(() => {
+		const sizes = new Map(laidOut.nodes.map((node) => [node.id, node.data.size]));
+		const circle = (id) => {
+			return {
+				...laidOut.positions.get(id) ?? {
+					x: 0,
+					y: 0
+				},
+				r: (sizes.get(id) ?? 0) / 2
+			};
+		};
+		return laidOut.edges.map((edge) => {
+			const mention = edge.data?.kind === "mention";
+			const grant = edge.data?.kind === "grant";
+			const dimmed = !!neighbours && !(neighbours.has(edge.source) && neighbours.has(edge.target));
+			return {
+				...edge,
+				type: "rim",
+				data: {
+					kind: edge.data?.kind ?? "parent",
+					count: edge.data?.count ?? 1,
+					...edge.data?.role ? { role: edge.data.role } : {},
+					from: circle(edge.source),
+					to: circle(edge.target),
+					dimmed
+				},
+				...mention && onMentionSelect ? { className: "cursor-pointer" } : {},
+				style: mention ? {
+					stroke: MENTION_EDGE_COLOR,
+					strokeWidth: Math.min(1.5 + (edge.data?.count ?? 1) * .5, 4)
+				} : grant ? GRANT_EDGE_STYLE : PARENT_EDGE_STYLE,
+				markerEnd: mention ? {
+					type: MarkerType.ArrowClosed,
+					color: MENTION_EDGE_COLOR,
+					width: 14,
+					height: 14
+				} : grant ? GRANT_ARROW : PARENT_ARROW
+			};
+		});
+	}, [
+		laidOut,
+		onMentionSelect,
+		neighbours
+	]);
+	const pagesById = useMemo(() => new Map(pages.map((page) => [page.id, page])), [pages]);
+	const reactFlow = useReactFlow();
+	const containerRef = useRef(null);
+	const hasNodes = nodes.length > 0;
+	const fitState = useRef({
+		nodes,
+		allEdges,
+		selectedPageId,
+		reactFlow
+	});
+	fitState.current = {
+		nodes,
+		allEdges,
+		selectedPageId,
+		reactFlow
+	};
+	const fitPending = useRef(false);
+	const fit = useCallback((focusSelection, duration) => {
+		const container = containerRef.current;
+		const width = container?.clientWidth ?? 0;
+		const height = container?.clientHeight ?? 0;
+		if (width === 0 || height === 0) {
+			fitPending.current = true;
+			return;
+		}
+		fitPending.current = false;
+		const { nodes: current, allEdges: edgesNow, selectedPageId: selected, reactFlow: flow } = fitState.current;
+		const focus = focusSelection && selected ? pageNeighbourIds(selected, edgesNow) : null;
+		const bounds = graphBounds(focus ? current.filter((node) => focus.has(node.id)) : current);
+		if (!bounds) return;
+		const viewport = getViewportForBounds(bounds, width, height, .1, focus ? 1.5 : 2, focus ? .3 : .1);
+		flow.setViewport(viewport, duration ? { duration } : void 0);
+	}, []);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		let last = {
+			width: container.clientWidth,
+			height: container.clientHeight
+		};
+		let frame;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const { width, height } = entry.contentRect;
+			const changed = width !== last.width || height !== last.height;
+			last = {
+				width,
+				height
+			};
+			if (!changed && !fitPending.current || width === 0 || height === 0) return;
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = void 0;
+				fit(true);
+			});
+		});
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+			if (frame !== void 0) cancelAnimationFrame(frame);
+		};
+	}, [hasNodes, fit]);
+	const selectedHere = useRef(null);
+	const selectedIsLoaded = !!selectedPageId && pagesById.has(selectedPageId);
+	const initialized = useRef(false);
+	useEffect(() => {
+		if (!initialized.current || !selectedIsLoaded || !selectedPageId) return;
+		const fromGraph = selectedHere.current === selectedPageId;
+		selectedHere.current = null;
+		if (fromGraph) return;
+		fit(true, 300);
+	}, [
+		selectedPageId,
+		selectedIsLoaded,
+		fit
+	]);
+	const activate = (page) => {
+		if (page.id === selectedPageId && onOpen) return onOpen(page);
+		selectedHere.current = page.id;
+		onSelect(page);
+	};
+	const pressedAt = useRef(null);
+	const onPaneClick = (event) => {
+		const start = pressedAt.current;
+		pressedAt.current = null;
+		if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > CLICK_SLOP_PX) return;
+		onClearSelection?.();
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		const id = event.target.closest(".react-flow__node")?.dataset.id;
+		const page = id ? pagesById.get(id) : void 0;
+		if (!page) return;
+		event.preventDefault();
+		activate(page);
+	};
+	if (!hasNodes) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsx(Txt, {
+			variant: "body",
+			tone: "muted",
+			children: "No pages yet."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative size-full",
+		"data-testid": "knowledge-page-graph",
+		onKeyDown,
+		onPointerDownCapture: (event) => {
+			pressedAt.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		},
+		children: [/* @__PURE__ */ jsx(GraphLegend, { grants: allEdges.some((edge) => edge.kind === "grant") }), /* @__PURE__ */ jsxs(ReactFlow, {
+			nodes,
+			edges: flowEdges,
+			nodeTypes,
+			edgeTypes,
+			onInit: () => {
+				initialized.current = true;
+				fit(true);
+			},
+			minZoom: .1,
+			proOptions: { hideAttribution: true },
+			nodesConnectable: false,
+			nodesDraggable: false,
+			onPaneClick,
+			onNodeClick: (_, node) => {
+				if (!isPlaceholder(node.data.page)) activate(node.data.page);
+			},
+			onEdgeClick: (event, edge) => {
+				if (edge.data?.kind !== "mention" || !onMentionSelect) return;
+				const source = pagesById.get(edge.source);
+				const target = pagesById.get(edge.target);
+				if (!source || !target) return;
+				const box = containerRef.current?.getBoundingClientRect();
+				onMentionSelect({
+					source,
+					target,
+					point: {
+						x: event.clientX - (box?.left ?? 0),
+						y: event.clientY - (box?.top ?? 0)
+					},
+					pane: {
+						width: box?.width ?? 0,
+						height: box?.height ?? 0
+					}
+				});
+			},
+			children: [/* @__PURE__ */ jsx(Background, {
+				variant: BackgroundVariant.Dots,
+				gap: 26,
+				size: 1.4,
+				color: "var(--border-strong)"
+			}), /* @__PURE__ */ jsx(Controls, {
+				showInteractive: false,
+				showFitView: false,
+				children: /* @__PURE__ */ jsx(ControlButton, {
+					onClick: () => fit(false, 300),
+					title: "Fit view",
+					"aria-label": "Fit view",
+					children: /* @__PURE__ */ jsx(Maximize, { "aria-hidden": true })
+				})
+			})]
+		})]
+	});
+}
+export { KnowledgePageGraph };
+
+//# sourceMappingURL=KnowledgePageGraph.es.js.map