@mastra/playground-ui 69.0.0-alpha.0 → 69.0.0-alpha.2

package/dist/domains/knowledge/components/KnowledgePageDetail.cjs.js

@@ -1,10 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_knowledge_lib_pageAddress = require("../lib/pageAddress.cjs.js");
 const require_domains_knowledge_lib_pageRefs = require("../lib/pageRefs.cjs.js");
+const require_domains_knowledge_lib_pagesByRefContext = require("../lib/pagesByRefContext.cjs.js");
 const require_domains_knowledge_lib_recordText = require("../lib/recordText.cjs.js");
 const require_domains_knowledge_lib_remarkKnowledgeLinks = require("../lib/remarkKnowledgeLinks.cjs.js");
+const require_domains_knowledge_components_KnowledgeSourceIcon = require("./KnowledgeSourceIcon.cjs.js");
+const require_domains_knowledge_components_KnowledgeTooltip = require("./KnowledgeTooltip.cjs.js");
 const require_Badge = require("../../../Badge-DqaMg7Gy.cjs");
-const require_MarkdownRenderer = require("../../../MarkdownRenderer-CUYpmuPh.cjs");
+const require_components_Breadcrumb = require("../../../components/Breadcrumb.cjs.js");
+const require_MarkdownRenderer = require("../../../MarkdownRenderer-CDwlvw0Y.cjs");
 const require_Metadata = require("../../../Metadata-5GJlO4GU.cjs");
+const require_components_RelativeTimestamp = require("../../../components/RelativeTimestamp.cjs.js");
 const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -24,40 +30,9 @@ var ACTIVITY_LABELS = {
 	"pin-added": "Pinned",
 	"pin-removed": "Unpinned"
 };
-function formatWhen(iso) {
-	const date = new Date(iso);
-	return Number.isNaN(date.getTime()) ? iso : date.toLocaleString(void 0, {
-		dateStyle: "medium",
-		timeStyle: "short"
-	});
-}
-var RELATIVE_STEPS = [
-	["second", 60],
-	["minute", 60],
-	["hour", 24],
-	["day", 7],
-	["week", 4.35],
-	["month", 12],
-	["year", Infinity]
-];
-/** "3 minutes ago", with the exact time left to a tooltip. */
-function formatAgo(iso, now = Date.now()) {
-	const time = new Date(iso).getTime();
-	if (Number.isNaN(time)) return iso;
-	let value = (time - now) / 1e3;
-	const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
-	for (const [unit, size] of RELATIVE_STEPS) {
-		if (Math.abs(value) < size) return format.format(Math.round(value), unit);
-		value /= size;
-	}
-	return formatWhen(iso);
-}
-function When({ iso }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-		dateTime: iso,
-		title: formatWhen(iso),
-		children: formatAgo(iso)
-	});
+/** Who wrote something, readably: an importer's run id reads as "Importer". */
+function authorName(author) {
+	return author.startsWith("importer:") ? "Importer" : author;
 }
 /** A small round mark with the author's initial, tinted per author so a page's writers tell apart. */
 function AuthorMark({ author }) {
@@ -106,37 +81,40 @@ function BodySpan({ node, ...props }) {
 	const ref = node?.properties[require_domains_knowledge_lib_remarkKnowledgeLinks.KNOWLEDGE_REF_PROPERTY];
 	if (typeof ref !== "string" || !links) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { ...props });
 	const target = links.index.resolve(ref);
-	return target ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		"data-testid": "knowledge-body-link",
-		title: ref,
-		className: "rounded bg-badge-blue-subtle px-1 font-medium text-badge-blue-foreground hover:underline",
-		onClick: () => links.onPageClick(target),
-		children: target.name
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		"data-testid": "knowledge-body-link-unresolved",
-		title: "No loaded page has this address",
-		className: "rounded border border-dashed border-border px-1 text-muted-foreground",
-		children: ref
+	return target ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+		label: ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"data-testid": "knowledge-body-link",
+			className: "rounded bg-badge-blue-subtle px-1 text-left font-medium wrap-anywhere text-badge-blue-foreground hover:underline",
+			onClick: () => links.onPageClick(target),
+			children: target.name
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+		label: "No loaded page has this address",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": "knowledge-body-link-unresolved",
+			className: "rounded border border-dashed border-border px-1 wrap-anywhere text-muted-foreground",
+			children: ref
+		})
 	});
 }
 var BODY_REMARK_PLUGINS = [require_domains_knowledge_lib_remarkKnowledgeLinks.remarkKnowledgeLinks];
 var BODY_COMPONENTS = { span: BodySpan };
-function Section({ label, count, children }) {
+function KnowledgeDetailSection({ label, count, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		"aria-label": label,
-		className: "flex flex-col gap-3",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2 border-b border-border pb-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-				as: "h3",
-				variant: "eyebrow",
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+			as: "h3",
+			variant: "label",
+			tone: "ink",
+			className: "flex items-center gap-1.5",
+			children: [label, count ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "label",
 				tone: "muted",
-				className: "uppercase",
-				children: label
-			}), count !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
-				variant: "neutral",
-				size: "xs",
+				className: "tabular-nums",
 				children: count
 			}) : null]
 		}), children]
@@ -151,19 +129,18 @@ function PageLink({ page, onPageClick }) {
 	});
 }
 var refIndexes = /* @__PURE__ */ new WeakMap();
-/** One ref index per loaded-pages map, shared by every note drawn from it. */
-function loadedRefIndex(pagesById) {
-	let index = refIndexes.get(pagesById);
-	if (!index) refIndexes.set(pagesById, index = require_domains_knowledge_lib_pageRefs.knowledgePageRefIndex(pagesById.values()));
+/** One ref index per loaded-pages map (and pages fetched by ref), shared by every note drawn from it. */
+function loadedRefIndex(pagesById, byRef) {
+	let forPages = refIndexes.get(pagesById);
+	if (!forPages) refIndexes.set(pagesById, forPages = /* @__PURE__ */ new WeakMap());
+	let index = forPages.get(byRef);
+	if (!index) forPages.set(byRef, index = require_domains_knowledge_lib_pageRefs.knowledgePageRefIndex(pagesById.values(), byRef));
 	return index;
 }
 /** One note: who wrote it and when, its text with `[[mentions]]` linked when the page is known, and the scopes it is stamped to. */
 function KnowledgeNoteItem({ note, pagesById, onPageClick, highlighted, itemRef, showPage, compact }) {
-	const refIndex = loadedRefIndex(pagesById);
-	const mentionTarget = (ref) => {
-		const target = refIndex.resolve(ref);
-		return target && note.mentions.includes(target.id) ? target : void 0;
-	};
+	const refIndex = loadedRefIndex(pagesById, (0, react.useContext)(require_domains_knowledge_lib_pagesByRefContext.KnowledgePagesByRef));
+	const mentionTarget = (ref) => require_domains_knowledge_lib_pageRefs.noteMentionTarget(refIndex, pagesById, note.mentions, ref);
 	const scopeLabel = (id) => {
 		const scopePage = pagesById.get(id);
 		return scopePage?.address ?? scopePage?.name ?? id;
@@ -187,13 +164,13 @@ function KnowledgeNoteItem({ note, pagesById, onPageClick, highlighted, itemRef,
 							as: "span",
 							variant: "label",
 							tone: "ink",
-							children: note.provenance.author
+							children: authorName(note.provenance.author)
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 							as: "span",
 							variant: "caption",
 							tone: "muted",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(When, { iso: note.updatedAt })
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_RelativeTimestamp.RelativeTimestamp, { value: note.updatedAt })
 						}),
 						onPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
 							as: "span",
@@ -207,28 +184,36 @@ function KnowledgeNoteItem({ note, pagesById, onPageClick, highlighted, itemRef,
 					]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-ui-md break-words text-foreground",
+					className: "text-ui-md wrap-anywhere text-foreground",
 					children: require_domains_knowledge_lib_recordText.parseRecordSegments(note.text).map((segment, index) => {
 						if (segment.type === "text") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: segment.value }, index);
 						const target = mentionTarget(segment.value);
-						return target ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "rounded bg-badge-blue-subtle px-1 font-medium text-badge-blue-foreground hover:underline",
-							onClick: () => onPageClick(target),
-							children: segment.value
+						return target ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+							label: segment.value,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-testid": "knowledge-note-link",
+								className: "rounded bg-badge-blue-subtle px-1 text-left font-medium wrap-anywhere text-badge-blue-foreground hover:underline",
+								onClick: () => onPageClick(target),
+								children: target.name
+							})
 						}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-medium",
+							className: "font-medium wrap-anywhere",
 							children: segment.value
 						}, index);
 					})
 				}),
 				note.stampScopeIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-1",
+					className: "flex min-w-0 flex-wrap gap-1",
 					"aria-label": "Stamped to",
 					children: note.stampScopeIds.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
 						variant: "neutral",
 						size: "xs",
-						children: scopeLabel(id)
+						title: scopeLabel(id),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: scopeLabel(id)
+						})
 					}, id))
 				}) : null
 			]
@@ -244,7 +229,7 @@ function KnowledgeNoteItem({ note, pagesById, onPageClick, highlighted, itemRef,
 *
 * Paged lists take a `…More` slot the host fills with the next page's loader.
 */
-function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlightMentionOf, ancestors = [], mentionedBy = [], notesMore, childPages, activity }) {
+function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlightMentionOf, ancestors = [], mentionedBy = [], notesMore, childPages, activity, compact = false }) {
 	const firstHighlighted = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		firstHighlighted.current?.scrollIntoView?.({ block: "nearest" });
@@ -253,14 +238,21 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 	const scope = page.isScope ? page : ancestors.find((candidate) => candidate.id === page.scopeId) ?? pagesById.get(page.scopeId);
 	const path = knowledgePagePath(page, ancestors);
 	const kind = page.isScope ? page.displayLabel ?? "Scope" : "Page";
+	const notePages = (0, react.useMemo)(() => new Map([...pagesById, ...[...ancestors, page].map((entry) => [entry.id, entry])]), [
+		pagesById,
+		ancestors,
+		page
+	]);
+	const pagesByRef = (0, react.useContext)(require_domains_knowledge_lib_pagesByRefContext.KnowledgePagesByRef);
 	const refIndex = (0, react.useMemo)(() => require_domains_knowledge_lib_pageRefs.knowledgePageRefIndex([
 		...pagesById.values(),
 		...ancestors,
 		page
-	]), [
+	], pagesByRef), [
 		pagesById,
 		ancestors,
-		page
+		page,
+		pagesByRef
 	]);
 	const bodyLinks = (0, react.useMemo)(() => ({
 		index: refIndex,
@@ -268,125 +260,98 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 	}), [refIndex, onPageClick]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 		"aria-label": page.name,
-		className: "flex min-h-0 flex-col overflow-y-auto",
+		className: "@container flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-			className: "flex flex-col gap-3 border-b border-border bg-fill-subtle px-6 pt-5 pb-4",
-			children: [
-				ancestors.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-					"aria-label": "Breadcrumb",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-						className: "flex flex-wrap items-center gap-1",
-						children: ancestors.map((ancestor) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "text-ui-sm rounded px-1 py-0.5 text-muted-foreground hover:bg-fill hover:text-foreground",
-								onClick: () => onPageClick(ancestor),
-								children: ancestor.name
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-								size: 12,
-								className: "text-muted-foreground",
-								"aria-hidden": true
-							})]
-						}, ancestor.id))
-					})
-				}) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-col gap-1.5",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-wrap items-center gap-2",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
-									variant: page.isScope ? "info" : "neutral",
-									size: "sm",
-									children: kind
-								}),
-								page.isScope ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-									as: "span",
-									variant: "caption",
-									tone: "muted",
-									children: ["in ", scope?.address ?? scope?.name ?? page.scopeId]
+			className: compact ? "flex flex-col gap-3 border-b border-surface-rim px-4 pt-3 pb-4" : "flex flex-col gap-3 border-b border-border bg-fill-subtle px-6 pt-5 pb-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Breadcrumb.Breadcrumb, {
+				label: "Breadcrumb",
+				className: "ml-[-.9em] min-w-0",
+				listClassName: "overflow-hidden",
+				children: [ancestors.map((ancestor) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Breadcrumb.Crumb, {
+					as: "button",
+					onClick: () => onPageClick(ancestor),
+					children: require_domains_knowledge_lib_pageAddress.scopeTitle(ancestor)
+				}, ancestor.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Breadcrumb.Crumb, {
+					as: "span",
+					isCurrent: true,
+					children: require_domains_knowledge_lib_pageAddress.scopeTitle(page)
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					compact ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeSourceIcon.KnowledgeSourceIcon, {
+								page,
+								className: "size-icon-lg"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+								label: (page.isScope ? page.address : path) ?? page.name,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									as: "h2",
+									variant: "title",
+									className: "min-w-0 break-words",
+									"data-testid": "knowledge-page-title",
+									children: require_domains_knowledge_lib_pageAddress.scopeTitle(page)
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Badge.Badge, {
+								variant: "neutral",
+								size: "sm",
+								className: "shrink-0 tabular-nums",
+								children: ["v", page.version]
+							})
+						]
+					}),
+					page.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						variant: "body",
+						tone: "muted",
+						children: page.description
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+								variant: page.isScope ? "info" : "neutral",
+								size: "sm",
+								children: kind
+							}),
+							pin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+								variant: "warning",
+								size: "sm",
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, {
+									size: 10,
+									"aria-hidden": true
 								}),
-								pin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
-									variant: "warning",
-									size: "sm",
-									icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, {
-										size: 10,
-										"aria-hidden": true
-									}),
-									children: pin.audience.length > 0 ? `Pinned for ${pin.audience.join(", ")}` : "Pinned"
-								}) : null
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-							as: "h2",
-							variant: "title",
-							className: "break-words",
-							children: page.name
-						}),
-						page.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-							variant: "body",
-							tone: "muted",
-							children: page.description
-						}) : null
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
-					className: "flex flex-wrap items-center gap-x-4 gap-y-1",
-					children: [
-						page.isScope && page.address ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-								className: "sr-only",
-								children: "Address"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-								as: "span",
-								variant: "caption",
-								tone: "muted",
-								font: "mono",
-								children: page.address
-							}) })]
-						}) : null,
-						path && !page.isScope ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-								className: "sr-only",
-								children: "Path"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-								as: "span",
-								variant: "caption",
-								tone: "muted",
-								font: "mono",
-								"data-testid": "knowledge-page-path",
-								children: path
-							}) })]
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-								className: "sr-only",
-								children: "Version"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+								children: pin.audience.length > 0 ? `Pinned for ${pin.audience.join(", ")}` : "Pinned"
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 								as: "span",
 								variant: "caption",
 								tone: "muted",
 								"data-testid": "knowledge-page-version",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata.Item, { children: ["Version ", page.version] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata.Item, { children: [
-									"Updated ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(When, { iso: page.updatedAt }),
-									" by ",
-									page.updatedBy.author
-								] })] })
-							}) })]
-						})
-					]
-				})
-			]
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [
+									page.isScope ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata.Item, { children: ["In ", scope ? require_domains_knowledge_lib_pageAddress.scopeTitle(scope) : page.scopeId] }),
+									compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata.Item, { children: ["v", page.version] }) : null,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata.Item, { children: [
+										"Updated",
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_RelativeTimestamp.RelativeTimestamp, {
+											value: page.updatedAt,
+											label: `Updated by ${authorName(page.updatedBy.author)}`
+										})
+									] })
+								] })
+							})
+						]
+					})
+				]
+			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid gap-8 p-6 xl:grid-cols-[minmax(0,1fr)_18rem]",
+			className: `flex flex-col gap-8 ${compact ? "p-4" : "p-6"} @4xl:flex-row`,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex min-w-0 flex-col gap-8",
+				className: "flex min-w-0 flex-col gap-8 @4xl:flex-1",
 				children: [page.body ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-testid": "knowledge-page-body",
 					className: "max-w-3xl",
@@ -401,20 +366,15 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
 					variant: "body",
 					tone: "muted",
-					className: "italic",
 					children: [
 						"This ",
 						page.isScope ? "scope" : "page",
 						" has no body yet."
 					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Section, {
+				}), notes.length > 0 || notesMore ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(KnowledgeDetailSection, {
 					label: "Notes",
 					count: notesMore ? void 0 : notes.length,
-					children: [notes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-						variant: "body",
-						tone: "muted",
-						children: "No notes on this page."
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 						className: "flex flex-col gap-2",
 						children: notes.map((note) => {
 							const highlighted = !!highlightMentionOf && note.mentions.includes(highlightMentionOf);
@@ -422,7 +382,7 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 							if (takeRef) highlightRefSet = true;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeNoteItem, {
 								note,
-								pagesById,
+								pagesById: notePages,
 								onPageClick,
 								highlighted,
 								itemRef: takeRef ? (element) => {
@@ -431,29 +391,26 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 							}, note.id);
 						})
 					}), notesMore]
-				})]
+				}) : null]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-				className: "flex min-w-0 flex-col gap-8",
+				className: "flex min-w-0 flex-col divide-y divide-border border-t border-border *:py-6 *:last:pb-0 @4xl:w-72 @4xl:shrink-0 @4xl:border-t-0 @4xl:border-l @4xl:pl-8 @4xl:*:first:pt-0",
 				children: [
-					childPages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-						label: "Pages",
-						children: childPages
-					}) : null,
-					mentionedBy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+					childPages,
+					mentionedBy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeDetailSection, {
 						label: "Mentioned in",
 						count: mentionedBy.length,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 							className: "flex flex-col gap-2",
 							children: mentionedBy.map((note) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeNoteItem, {
 								note,
-								pagesById,
+								pagesById: notePages,
 								onPageClick,
 								showPage: true,
 								compact: true
 							}, note.id))
 						})
 					}) : null,
-					activity && activity.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+					activity && activity.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeDetailSection, {
 						label: "Activity",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 							className: "relative flex flex-col gap-3 border-l border-border pl-4",
@@ -474,7 +431,23 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 										as: "span",
 										variant: "caption",
 										tone: "muted",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: event.provenance.author }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(When, { iso: event.createdAt }) })] })
+										className: "min-w-0",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, {
+											singleLine: true,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, {
+												className: "min-w-0",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+													label: event.provenance.author,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "truncate",
+														children: authorName(event.provenance.author)
+													})
+												})
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, {
+												className: "shrink-0",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_RelativeTimestamp.RelativeTimestamp, { value: event.createdAt })
+											})]
+										})
 									})
 								]
 							}, event.id))
@@ -483,8 +456,9 @@ function KnowledgePageDetail({ page, notes, pin, pagesById, onPageClick, highlig
 				]
 			})]
 		})]
-	});
+	}, page.id);
 }
+exports.KnowledgeDetailSection = KnowledgeDetailSection;
 exports.KnowledgeNoteItem = KnowledgeNoteItem;
 exports.KnowledgePageDetail = KnowledgePageDetail;