@burdenoff/fluidgrids-fe-sdk 2026.1111.12 → 2026.1111.13

package/dist/{flow-builder-CukxgO65.js → flow-builder-BvCQAGDR.js}

@@ -21,7 +21,7 @@ import { Link, useNavigate, useParams } from "react-router";
 import { useMutation, useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client/core";
 import { create } from "zustand";
-import { Background, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ReactFlowProvider, addEdge, getBezierPath, useEdgesState, useNodes, useNodesState, useOnSelectionChange, useReactFlow, useStore } from "@xyflow/react";
+import { Background, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, ViewportPortal, addEdge, getBezierPath, useEdgesState, useInternalNode, useNodes, useNodesState, useOnSelectionChange, useReactFlow, useStore } from "@xyflow/react";
 import { Icon } from "@iconify/react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "@burdenoff/fe-libs/utils";
@@ -10582,7 +10582,7 @@ function buildNodeCheck(requiredNodeTypes, installedAppIds) {
 }
 
 // src/hooks/store/useTemplateImportFlow.tsx
-const LazyTemplateConfigurationModal = lazy(() => import("./TemplateConfigurationModal-BimyvVH6.js").then((m) => ({ default: m.TemplateConfigurationModal })));
+const LazyTemplateConfigurationModal = lazy(() => import("./TemplateConfigurationModal-ChQsXf0-.js").then((m) => ({ default: m.TemplateConfigurationModal })));
 /**
 * "Use this template", the same everywhere it is offered: the builder's
 * template panel, the Templates page and the template preview page
@@ -12759,7 +12759,7 @@ function TemplatesGrid({ templates, loading, hasMore, onLoadMore, onTemplateClic
 }
 
 // src/builder/components/flow-builder/components/templates/TemplatesModal.tsx
-const LazyTemplateDetailPanel = lazy(() => import("./TemplateDetailPanel-CkwB6vrW.js").then((m) => ({ default: m.TemplateDetailPanel })));
+const LazyTemplateDetailPanel = lazy(() => import("./TemplateDetailPanel-C0YiVdub.js").then((m) => ({ default: m.TemplateDetailPanel })));
 /**
 * Modal for browsing and selecting workflow templates
 * Features:
@@ -20702,6 +20702,448 @@ function WebhookRunFollower() {
 	return null;
 }
 
+// src/agentMarks/plainText.ts
+/**
+* ★ BOFF-11584: the text of a callout or note is model output, and the model
+* has read workflow content people wrote. It is shown as plain text only:
+* React renders it as a text node (never `dangerouslySetInnerHTML`, never a
+* markdown renderer), so markup, links and images in it stay inert characters.
+*
+* This keeps it short and printable as well: control characters (other than
+* line breaks) and bidirectional controls, which can disguise what a line
+* says, are removed; runs of blank lines collapse; the result is clamped.
+*/
+const BIDI_CONTROLS = /* @__PURE__ */ new Set([
+	1564,
+	8206,
+	8207,
+	8234,
+	8235,
+	8236,
+	8237,
+	8238,
+	8294,
+	8295,
+	8296,
+	8297
+]);
+function isDroppedCharacter(code) {
+	if (code === 10) return false;
+	if (code <= 31) return true;
+	if (code >= 127 && code <= 159) return true;
+	return BIDI_CONTROLS.has(code);
+}
+function toPlainText(text, max) {
+	let kept = "";
+	for (const character of text.replace(/\r\n?/g, "\n").replace(/\t/g, " ")) if (!isDroppedCharacter(character.codePointAt(0) ?? 0)) kept += character;
+	const cleaned = kept.replace(/ {2,}/g, " ").replace(/ *\n */g, "\n").replace(/\n{3,}/g, "\n\n").trim();
+	if (cleaned.length <= max) return cleaned;
+	return `${cleaned.slice(0, max - 1).trimEnd()}…`;
+}
+
+// src/agentMarks/marksStore.ts
+/** The text of a mark is model output: kept as plain text, never markup. */
+const CALLOUT_LABEL_MAX = 200;
+const NOTE_MESSAGE_MAX = 280;
+/** A workflow holds at most this many notes, resolved ones included. */
+const MAX_NOTES_PER_WORKFLOW = 20;
+let sequence = 0;
+const nextId = (prefix) => {
+	sequence += 1;
+	return `${prefix}${sequence}`;
+};
+const useAgentMarksStore = create()((set, get) => ({
+	callouts: [],
+	notes: [],
+	nextNumber: {},
+	openNoteId: null,
+	flash: null,
+	actions: {
+		addCallout: ({ label, target, element, route }) => {
+			const callout = {
+				id: nextId("c"),
+				label: toPlainText(label, 200),
+				target,
+				route,
+				element: element ? new WeakRef(element) : null
+			};
+			set((state) => ({ callouts: [...state.callouts, callout].slice(-3) }));
+			return callout;
+		},
+		rebindCallout: (id, element) => set((state) => ({ callouts: state.callouts.map((callout) => callout.id === id ? {
+			...callout,
+			element: new WeakRef(element)
+		} : callout) })),
+		removeCallout: (id) => set((state) => ({ callouts: state.callouts.filter((callout) => callout.id !== id) })),
+		clearCallouts: () => {
+			const count = get().callouts.length;
+			if (count > 0) set({ callouts: [] });
+			return count;
+		},
+		dropCalloutsOffRoute: (route) => {
+			const { callouts } = get();
+			const kept = callouts.filter((callout) => callout.route === route);
+			if (kept.length !== callouts.length) set({ callouts: kept });
+			return callouts.length - kept.length;
+		},
+		addNote: (input) => {
+			const { notes, nextNumber } = get();
+			if (notes.filter((note) => note.workflowKey === input.workflowKey).length >= 20) return null;
+			const number = nextNumber[input.workflowKey] ?? 1;
+			const note = {
+				id: nextId("n"),
+				number,
+				workflowKey: input.workflowKey,
+				nodeId: input.nodeId,
+				nodeLabel: toPlainText(input.nodeLabel, 80),
+				paramKey: input.paramKey ?? null,
+				kind: input.kind,
+				message: toPlainText(input.message, 280),
+				resolved: false
+			};
+			set({
+				notes: [...notes, note],
+				nextNumber: {
+					...nextNumber,
+					[input.workflowKey]: number + 1
+				}
+			});
+			return note;
+		},
+		setResolved: (id, resolved) => set((state) => ({ notes: state.notes.map((note) => note.id === id ? {
+			...note,
+			resolved
+		} : note) })),
+		removeNote: (id) => set((state) => ({
+			notes: state.notes.filter((note) => note.id !== id),
+			openNoteId: state.openNoteId === id ? null : state.openNoteId
+		})),
+		clearNotes: (workflowKey) => {
+			const { notes, openNoteId } = get();
+			const kept = workflowKey === void 0 ? [] : notes.filter((note) => note.workflowKey !== workflowKey);
+			const removed = notes.length - kept.length;
+			if (removed > 0) set({
+				notes: kept,
+				openNoteId: kept.some((note) => note.id === openNoteId) ? openNoteId : null
+			});
+			return removed;
+		},
+		openNote: (id) => set({ openNoteId: id }),
+		flashNode: (nodeId) => {
+			sequence += 1;
+			set({ flash: {
+				nodeId,
+				token: sequence
+			} });
+		}
+	}
+}));
+/** Reset everything (tests, and sign-out if a host wants it). */
+function resetAgentMarks() {
+	useAgentMarksStore.setState({
+		callouts: [],
+		notes: [],
+		nextNumber: {},
+		openNoteId: null,
+		flash: null
+	});
+}
+
+// src/builder/agentNotes/notesKey.ts
+/**
+* ★ BOFF-11584: which workflow a canvas note belongs to. A saved workflow is
+* known by its key across versions; a new one has no key until its first
+* save, so its in-memory id stands in.
+*/
+function notesKeyOf(workflow) {
+	return workflow.workflowKey || workflow.id || "unsaved";
+}
+
+// src/builder/agentNotes/CanvasNotesLayer.tsx
+/**
+* ★ BOFF-11584: the assistant's notes on the builder canvas
+* (`fg_canvas_annotate`). Rendered as a child of `<ReactFlow>`, outside every
+* node component: the nodes know nothing about notes.
+*
+*  - Numbered pins sit above their node (`NodeToolbar`), so they follow it
+*    through drags, pans and zooms. A pin opens the note's card: the message,
+*    the parameter it is about, "Open node" and "Mark resolved".
+*  - A dashed ring marks each node with an open note (`ViewportPortal`, in
+*    canvas coordinates), and a brief ring shows the node the assistant just
+*    brought into view.
+*  - The notes list (top left; the FluidGrids mark holds the top right)
+*    holds every note, including orphaned ones whose node was deleted: those
+*    are never moved onto another node.
+*
+* Everything here is `data-agent="deny"`: an agent cannot read or press its
+* own notes. Messages render as React text, never as markup.
+*/
+const FLASH_MS = 1800;
+const RING_PAD = 8;
+function pinClass(note, open) {
+	return cn("flex size-6 items-center justify-center rounded-full text-xs font-semibold shadow-md transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", note.resolved ? "bg-muted text-muted-foreground" : note.kind === "fix" ? "bg-destructive text-destructive-foreground" : "bg-primary text-primary-foreground", open && "scale-110 ring-2 ring-ring ring-offset-1 ring-offset-background");
+}
+/** A ring around a node, drawn in canvas coordinates. */
+const NodeRing = ({ nodeId, tone }) => {
+	const node = useInternalNode(nodeId);
+	const width = node?.measured.width ?? 0;
+	const height = node?.measured.height ?? 0;
+	if (!node || width === 0 || height === 0) return null;
+	const { x, y } = node.internals.positionAbsolute;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-testid": `fg-canvas-note-ring-${tone}`,
+		className: cn("pointer-events-none absolute left-0 top-0 rounded-2xl border-2", tone === "fix" && "border-dashed border-destructive", tone === "info" && "border-dashed border-primary", tone === "flash" && "border-primary ring-4 ring-primary/30 motion-safe:animate-pulse"),
+		style: {
+			transform: `translate(${x - RING_PAD}px, ${y - RING_PAD}px)`,
+			width: width + 16,
+			height: height + 16
+		}
+	});
+};
+/** The node the assistant just brought into view, for a moment. */
+const FlashRing = () => {
+	const flash = useAgentMarksStore((state) => state.flash);
+	const [shown, setShown] = useState(null);
+	useEffect(() => {
+		if (!flash) return;
+		setShown(flash.token);
+		const timer = setTimeout(() => setShown(null), FLASH_MS);
+		return () => clearTimeout(timer);
+	}, [flash]);
+	if (!flash || shown !== flash.token) return null;
+	return /* @__PURE__ */ jsx(NodeRing, {
+		nodeId: flash.nodeId,
+		tone: "flash"
+	});
+};
+const CanvasNoteCard = ({ note, nodeOnCanvas }) => {
+	const tr = useTr();
+	const { openNote, setResolved } = useAgentMarksStore((state) => state.actions);
+	const openNodePanel = () => {
+		const { workflow, actions } = useFlowStore.getState();
+		const node = workflow.nodes.find((candidate) => candidate.id === note.nodeId);
+		if (!node?.type) return;
+		actions.ndv.open({
+			nodeId: node.id,
+			type: node.type
+		});
+		openNote(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "fg-canvas-note-card",
+		className: "nowheel w-64 cursor-default rounded-lg border border-border bg-popover p-3 text-left text-xs text-foreground shadow-lg",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-1.5 flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 font-semibold",
+					children: [/* @__PURE__ */ jsx(Sparkles, {
+						"aria-hidden": "true",
+						className: "size-3.5 text-primary"
+					}), note.kind === "fix" ? tr("fluidgrids.agentMarks.noteFixTitle", "Note {{number}} · To fix", { number: note.number }) : tr("fluidgrids.agentMarks.noteInfoTitle", "Note {{number}}", { number: note.number })]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": tr("fluidgrids.agentMarks.closeNote", "Close note"),
+					onClick: () => openNote(null),
+					className: "-m-1 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": "true",
+						className: "size-3.5"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "mb-1 truncate text-muted-foreground",
+				children: [note.nodeLabel, note.paramKey ? ` · ${tr("fluidgrids.agentMarks.noteParam", "Field: {{param}}", { param: note.paramKey })}` : ""]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				"data-testid": "fg-canvas-note-message",
+				className: "whitespace-pre-line break-words text-sm text-foreground",
+				children: note.message
+			}),
+			!nodeOnCanvas && /* @__PURE__ */ jsx("p", {
+				className: "mt-1.5 text-muted-foreground",
+				children: tr("fluidgrids.agentMarks.noteOrphaned", "This node was removed from the workflow.")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex justify-end gap-2",
+				children: [nodeOnCanvas && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: openNodePanel,
+					className: "rounded-md border border-border px-2 py-1 font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					children: tr("fluidgrids.agentMarks.openNode", "Open node")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-testid": "fg-canvas-note-resolve",
+					onClick: () => setResolved(note.id, !note.resolved),
+					className: "rounded-md bg-primary px-2 py-1 font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					children: note.resolved ? tr("fluidgrids.agentMarks.reopenNote", "Reopen") : tr("fluidgrids.agentMarks.resolveNote", "Mark resolved")
+				})]
+			})
+		]
+	});
+};
+/** The pins above one node, and the open card. */
+const NodePins = ({ nodeId, notes }) => {
+	const tr = useTr();
+	const openNoteId = useAgentMarksStore((state) => state.openNoteId);
+	const openNote = useAgentMarksStore((state) => state.actions.openNote);
+	const open = notes.find((note) => note.id === openNoteId);
+	return /* @__PURE__ */ jsx(NodeToolbar, {
+		nodeId,
+		isVisible: true,
+		position: Position.Top,
+		align: "end",
+		offset: 6,
+		"data-agent": "deny",
+		"data-testid": "fg-canvas-note-pins",
+		className: "nodrag nopan",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-end gap-1.5",
+			children: [open && /* @__PURE__ */ jsx(CanvasNoteCard, {
+				note: open,
+				nodeOnCanvas: true
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex gap-1",
+				children: notes.map((note) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-testid": "fg-canvas-note-pin",
+					"aria-expanded": note.id === openNoteId,
+					"aria-label": tr("fluidgrids.agentMarks.notePin", "Assistant note {{number}}", { number: note.number }),
+					onClick: () => openNote(note.id === openNoteId ? null : note.id),
+					className: pinClass(note, note.id === openNoteId),
+					children: note.resolved ? /* @__PURE__ */ jsx(Check, {
+						"aria-hidden": "true",
+						className: "size-3.5"
+					}) : note.number
+				}, note.id))
+			})]
+		})
+	});
+};
+/** Every note on this workflow, orphaned ones included. */
+const NotesList = ({ notes, live }) => {
+	const tr = useTr();
+	const [expanded, setExpanded] = useState(false);
+	const { fitView } = useReactFlow();
+	const { openNote, removeNote, flashNode } = useAgentMarksStore((state) => state.actions);
+	const openCount = notes.filter((note) => !note.resolved).length;
+	const orphaned = notes.filter((note) => !live.has(note.nodeId)).length;
+	const show = (note) => {
+		if (!live.has(note.nodeId)) return;
+		fitView({
+			nodes: [{ id: note.nodeId }],
+			duration: 400,
+			padding: .6,
+			maxZoom: 1.25
+		}).then((done) => {
+			if (done) flashNode(note.nodeId);
+		});
+		openNote(note.id);
+	};
+	return /* @__PURE__ */ jsx(Panel, {
+		position: "top-left",
+		"data-agent": "deny",
+		"data-testid": "fg-canvas-notes-list",
+		className: "nodrag nopan nowheel",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-64 rounded-lg border border-border bg-popover text-xs text-foreground shadow-md",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": expanded,
+				onClick: () => setExpanded((value) => !value),
+				className: "flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(Sparkles, {
+						"aria-hidden": "true",
+						className: "size-3.5 text-primary"
+					}), tr("fluidgrids.agentMarks.notesHeading", "Assistant notes")]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [tr("fluidgrids.agentMarks.notesOpenCount", "{{count}} open", { count: openCount }), orphaned > 0 ? ` · ${tr("fluidgrids.agentMarks.notesOrphanedCount", "{{count}} removed", { count: orphaned })}` : ""]
+				})]
+			}), expanded && /* @__PURE__ */ jsx("ul", {
+				className: "max-h-64 overflow-y-auto border-t border-border py-1",
+				children: notes.map((note) => {
+					const onCanvas = live.has(note.nodeId);
+					return /* @__PURE__ */ jsxs("li", {
+						"data-testid": "fg-canvas-notes-item",
+						className: "flex items-start gap-2 px-3 py-1.5",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn(pinClass(note, false), "size-5 shrink-0"),
+								children: note.resolved ? /* @__PURE__ */ jsx(Check, {
+									"aria-hidden": "true",
+									className: "size-3"
+								}) : note.number
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								disabled: !onCanvas,
+								onClick: () => show(note),
+								className: "min-w-0 flex-1 text-left disabled:cursor-default",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "block truncate font-medium",
+									children: note.nodeLabel
+								}), /* @__PURE__ */ jsx("span", {
+									className: cn("block truncate text-muted-foreground", note.resolved && "line-through"),
+									children: onCanvas ? note.message : tr("fluidgrids.agentMarks.noteOrphaned", "This node was removed from the workflow.")
+								})]
+							}),
+							!onCanvas && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": tr("fluidgrids.agentMarks.removeNote", "Remove note"),
+								onClick: () => removeNote(note.id),
+								className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+								children: /* @__PURE__ */ jsx(X, {
+									"aria-hidden": "true",
+									className: "size-3.5"
+								})
+							})
+						]
+					}, note.id);
+				})
+			})]
+		})
+	});
+};
+const CanvasNotesLayer = () => {
+	const workflowKey = useFlowStore((state) => notesKeyOf(state.workflow));
+	const nodeIds = useFlowStore(useShallow((state) => state.workflow.nodes.map((node) => node.id)));
+	const allNotes = useAgentMarksStore((state) => state.notes);
+	const notes = useMemo(() => allNotes.filter((note) => note.workflowKey === workflowKey), [allNotes, workflowKey]);
+	const live = useMemo(() => new Set(nodeIds), [nodeIds]);
+	const byNode = useMemo(() => {
+		const groups = /* @__PURE__ */ new Map();
+		for (const note of notes) {
+			if (!live.has(note.nodeId)) continue;
+			groups.set(note.nodeId, [...groups.get(note.nodeId) ?? [], note]);
+		}
+		return [...groups.entries()];
+	}, [notes, live]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(ViewportPortal, { children: [byNode.map(([nodeId, nodeNotes]) => {
+			const openNotes = nodeNotes.filter((note) => !note.resolved);
+			if (openNotes.length === 0) return null;
+			const tone = openNotes.some((note) => note.kind === "fix") ? "fix" : "info";
+			return /* @__PURE__ */ jsx(NodeRing, {
+				nodeId,
+				tone
+			}, nodeId);
+		}), /* @__PURE__ */ jsx(FlashRing, {})] }),
+		byNode.map(([nodeId, nodeNotes]) => /* @__PURE__ */ jsx(NodePins, {
+			nodeId,
+			notes: nodeNotes
+		}, nodeId)),
+		notes.length > 0 && /* @__PURE__ */ jsx(NotesList, {
+			notes,
+			live
+		})
+	] });
+};
+
 // src/builder/lib/autosave-runner.ts
 function createAutosaveRunner(deps) {
 	let timer;
@@ -27143,8 +27585,8 @@ function EditLeaseBanner() {
 }
 
 // src/builder/components/flow-builder/flow-builder.tsx
-const LazyNodeDetailView = lazy(() => import("./node-detail-view-DRk8Ln5L.js").then((m) => ({ default: m.NodeDetailView })));
-const LazyQuickConfigPanel = lazy(() => import("./quick-config-panel-40_1utiL.js").then((m) => ({ default: m.QuickConfigPanel })));
+const LazyNodeDetailView = lazy(() => import("./node-detail-view-CPD_NSZc.js").then((m) => ({ default: m.NodeDetailView })));
+const LazyQuickConfigPanel = lazy(() => import("./quick-config-panel-DHkYGaCL.js").then((m) => ({ default: m.QuickConfigPanel })));
 const edgeTypes = { deletable: CustomDeletableEdge };
 const edgeOptions = {
 	type: "deletable",
@@ -27204,7 +27646,7 @@ const FlowBuilder = ({ readOnly = false }) => {
 	const [agentTools, setAgentTools] = useState([]);
 	useEffect(() => {
 		let cancelled = false;
-		import("./agentTools-Dgrdql-W.js").then(({ createBuilderAgentTools }) => {
+		import("./agentTools-C0g2OWvI.js").then(({ createBuilderAgentTools }) => {
 			if (cancelled) return;
 			setAgentTools(createBuilderAgentTools({ durableFunctionsEnabled: () => paletteGatesRef.current }));
 		}).catch((error) => {
@@ -27251,7 +27693,30 @@ const FlowBuilder = ({ readOnly = false }) => {
 		}
 		return merged;
 	}, [nodeTypesVersion, nodes]);
-	const { getNodes } = useReactFlow();
+	const { getNodes, fitView } = useReactFlow();
+	const fitViewRef = useRef(fitView);
+	useEffect(() => {
+		fitViewRef.current = fitView;
+	}, [fitView]);
+	const [noteTools, setNoteTools] = useState([]);
+	useEffect(() => {
+		let cancelled = false;
+		import("./canvasNoteTools-BUWY18XK.js").then(({ createCanvasNoteTools }) => {
+			if (cancelled) return;
+			setNoteTools(createCanvasNoteTools({ focusNode: (nodeId) => fitViewRef.current({
+				nodes: [{ id: nodeId }],
+				duration: 400,
+				padding: .6,
+				maxZoom: 1.25
+			}) }));
+		}).catch((error) => {
+			console.error("[FlowBuilder] Assistant note tools failed to load:", error);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	useAgentTools(noteTools);
 	const { handleOnEdgeDropConnectEnd, floatingMenuWrapperRef, handleAddConnectedNode } = useAddNodeOnEdgeDrop();
 	const deleteKeyCode = useDeleteKeyCode();
 	useNodeSelectedEvent();
@@ -27321,7 +27786,7 @@ const FlowBuilder = ({ readOnly = false }) => {
 					className: "relative flex-1 rounded-b-xl border border-card-foreground/10 border-t-0 overflow-hidden mx-4 mb-1",
 					children: [
 						/* @__PURE__ */ jsx(CanvasControls, {}),
-						/* @__PURE__ */ jsx(ReactFlow, {
+						/* @__PURE__ */ jsxs(ReactFlow, {
 							proOptions: { hideAttribution: true },
 							onInit: ({ fitView }) => fitView({
 								minZoom: 1,
@@ -27354,7 +27819,7 @@ const FlowBuilder = ({ readOnly = false }) => {
 								maxZoom: 1
 							},
 							defaultEdgeOptions: edgeOptions,
-							children: /* @__PURE__ */ jsx(Background, { gap: 24 })
+							children: [/* @__PURE__ */ jsx(Background, { gap: 24 }), /* @__PURE__ */ jsx(CanvasNotesLayer, {})]
 						}),
 						/* @__PURE__ */ jsx(FluidGridsMark, {}),
 						nodes.length === 0 && !editingBlocked && /* @__PURE__ */ jsx("div", {
@@ -27544,4 +28009,4 @@ const FlowBuilderPage = ({ workflow, readOnly = false }) => {
 	] });
 };
 
-export { PopoverTrigger$1 as $, DialogTitle$1 as A, NodeEditorTabBody as B, DialogClose as C, isDurableFunctionNodeType as Ct, DialogHeader$1 as D, DialogFooter$1 as E, buildRequiredNodeTypes as F, runnerInstallCommand as G, RunOnSection as H, useImportWorkflowTemplate as I, NodeParamsForm as J, useRunnerActions as K, useWorkflowTemplates as L, computeAttachPosition as M, useTemplateImportFlow as N, DialogOverlay as O, buildNodeCheck as P, PopoverContent$1 as Q, useInstalledNodes as R, Dialog$1 as S, filterPaletteNodes as St, DialogDescription$1 as T, isRunControlNodeType as Tt, RunnerStatusPill as U, NodeSettingsPanel as V, RUNNER_INSTALL_SCRIPT_URL as W, NDV_Z_INDEX as X, useGlobalStoreClient as Y, Popover$1 as Z, TableView as _, CardTitle$1 as _t, useAiWorkflowTemplates as a, SCHEDULE_NODE_TYPE as at, Badge$1 as b, RUN_CONTROL_NODE_TYPES as bt, RunsUsageMeter as c, TabButton as ct, readRunsQuota as d, FluidGridsMark as dt, CodeEditorField as et, runsQuotaLevel as f, Card$1 as ft, JsonView as g, CardHeader$1 as gt, useWorkflowReloadStore as h, CardFooter as ht, enrichDraftNodes as i, useNodeEditorTab as it, DialogTrigger$1 as j, DialogPortal as k, RunsUsageMeterView as l, NodeInputFields as lt, releaseLeaseKeptForReload as m, CardDescription$1 as mt, AI_DRAFT_MAX_PROMPT_LENGTH as n, ConnectionFormDialog as nt, BUILDER_FULLSCREEN_ATTRIBUTE as o, SchedulePanel as ot, summarizeRunsQuota as p, CardContent$1 as pt, useRunners as q, draftToCanvas as r, ReadOnlyFieldset as rt, BUILDER_FULLSCREEN_EVENT as s, NodeEditorTabs as st, FlowBuilderPage as t, ConnectionSelector as tt, useRunsQuota as u, useNodeSelectedEvent as ut, TemplateCard as v, Input$1 as vt, DialogContent$1 as w, isNodeTypeHiddenFromPalette as wt, badgeVariants as x, WORKFLOW_TEST_NODE_TYPES as xt, templatePreview as y, DURABLE_FUNCTION_NODE_TYPES as yt, NodeExecutionActions as z };
+export { useGlobalStoreClient as $, DialogFooter$1 as A, useImportWorkflowTemplate as B, templatePreview as C, DURABLE_FUNCTION_NODE_TYPES as Ct, DialogClose as D, isDurableFunctionNodeType as Dt, Dialog$1 as E, filterPaletteNodes as Et, DialogTrigger$1 as F, NodeSettingsPanel as G, useInstalledNodes as H, computeAttachPosition as I, RUNNER_INSTALL_SCRIPT_URL as J, RunOnSection as K, useTemplateImportFlow as L, DialogOverlay as M, DialogPortal as N, DialogContent$1 as O, isNodeTypeHiddenFromPalette as Ot, DialogTitle$1 as P, NodeParamsForm as Q, buildNodeCheck as R, TemplateCard as S, Input$1 as St, badgeVariants as T, WORKFLOW_TEST_NODE_TYPES as Tt, NodeExecutionActions as U, useWorkflowTemplates as V, NodeEditorTabBody as W, useRunnerActions as X, runnerInstallCommand as Y, useRunners as Z, resetAgentMarks as _, CardContent$1 as _t, useAiWorkflowTemplates as a, ConnectionSelector as at, JsonView as b, CardHeader$1 as bt, RunsUsageMeter as c, useNodeEditorTab as ct, readRunsQuota as d, NodeEditorTabs as dt, NDV_Z_INDEX as et, runsQuotaLevel as f, TabButton as ft, notesKeyOf as g, Card$1 as gt, useWorkflowReloadStore as h, FluidGridsMark as ht, enrichDraftNodes as i, CodeEditorField as it, DialogHeader$1 as j, DialogDescription$1 as k, isRunControlNodeType as kt, RunsUsageMeterView as l, SCHEDULE_NODE_TYPE as lt, releaseLeaseKeptForReload as m, useNodeSelectedEvent as mt, AI_DRAFT_MAX_PROMPT_LENGTH as n, PopoverContent$1 as nt, BUILDER_FULLSCREEN_ATTRIBUTE as o, ConnectionFormDialog as ot, summarizeRunsQuota as p, NodeInputFields as pt, RunnerStatusPill as q, draftToCanvas as r, PopoverTrigger$1 as rt, BUILDER_FULLSCREEN_EVENT as s, ReadOnlyFieldset as st, FlowBuilderPage as t, Popover$1 as tt, useRunsQuota as u, SchedulePanel as ut, useAgentMarksStore as v, CardDescription$1 as vt, Badge$1 as w, RUN_CONTROL_NODE_TYPES as wt, TableView as x, CardTitle$1 as xt, toPlainText as y, CardFooter as yt, buildRequiredNodeTypes as z };