@tangle-network/ui 11.15.0 → 11.15.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @tangle-network/ui
 
+## 11.15.2
+
+### Patch Changes
+
+- 11d515d: Keep file-tree selection callbacks current after rerenders and synchronize controlled selection through the native item API.
+  Closing a file clears its selection so the same file can be opened again.
+
+## 11.15.1
+
+### Patch Changes
+
+- 34c2d3c: Retain non-empty synthetic text as labelled, plain-text Application notes in both transcript presentations. Preserve note ordering and synthetic-only messages without merging notes into user speech, parsing them as OpenUI, or counting them as agent responses. Existing public component props and callbacks are unchanged.
+
 ## 11.15.0
 
 ### Minor Changes

package/dist/chat/chat-container.js

@@ -5,6 +5,7 @@ import { useRunGroups } from "../hooks/use-run-groups.js";
 import { useRunCollapseState } from "../hooks/use-run-collapse-state.js";
 import { useAutoScroll } from "../hooks/use-auto-scroll.js";
 import { InlineThinkingItem } from "../run/inline-thinking-item.js";
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { MessageList } from "./message-list.js";
 import { AgentTimeline } from "./agent-timeline.js";
@@ -115,15 +116,25 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 	for (const message of messages) {
 		const parts = partMap[message.id] ?? [];
 		if (message.role === "user") {
-			const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
-			if (!content) continue;
-			items.push({
-				id: message.id,
-				kind: "message",
-				role: "user",
-				content,
-				timestamp: createdAtFromMessage(message)
-			});
+			const segments = userTextSegments(parts);
+			for (const segment of segments) {
+				const id = segments.length === 1 ? message.id : `${message.id}-user-${segment.index}`;
+				if (segment.synthetic) items.push({
+					id,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: segment.text })
+					})
+				});
+				else items.push({
+					id,
+					kind: "message",
+					role: "user",
+					content: segment.text.trim(),
+					timestamp: createdAtFromMessage(message)
+				});
+			}
 			continue;
 		}
 		const toolBuffer = [];
@@ -167,6 +178,17 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 				return;
 			}
 			flushToolBuffer(index);
+			if (part.type === "text" && part.synthetic) {
+				if (part.text.trim()) items.push({
+					id: itemId,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: part.text })
+					})
+				});
+				return;
+			}
 			if (part.type === "text" && !part.synthetic && part.text.trim()) {
 				if (enableOpenUI) {
 					const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);

package/dist/chat/synthetic-text.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/synthetic-text.tsx
+/** Internal transcript chrome, never attributed to a user or model. */
+function SyntheticText({ text }) {
+	if (!text.trim()) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "note",
+		"aria-label": "Application note",
+		"data-synthetic-text": "",
+		className: "min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-1 font-medium",
+			children: "Application note"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "break-words whitespace-pre-wrap",
+			children: text
+		})]
+	});
+}
+/** Keep the existing joined user bubble, splitting only at application notes. */
+function userTextSegments(parts) {
+	const segments = [];
+	let pending = [];
+	let start = 0;
+	const flush = () => {
+		const text = pending.join("\n");
+		if (text.trim()) segments.push({
+			index: start,
+			synthetic: false,
+			text
+		});
+		pending = [];
+	};
+	parts.forEach((part, index) => {
+		if (part.type !== "text") return;
+		if (part.synthetic) {
+			flush();
+			if (part.text.trim()) segments.push({
+				index,
+				synthetic: true,
+				text: part.text
+			});
+		} else {
+			if (pending.length === 0) start = index;
+			pending.push(part.text);
+		}
+	});
+	flush();
+	return segments;
+}
+//#endregion
+export { SyntheticText, userTextSegments };

package/dist/chat/user-message.d.ts

@@ -12,10 +12,8 @@ export interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble uses inverse theme colors. The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
+ * User speech retains the inverse-theme bubble and direct-content contract.
+ * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => import("react").JSX.Element | null>;
 //#endregion

package/dist/chat/user-message.js

@@ -1,3 +1,4 @@
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/user-message.tsx
@@ -7,15 +8,13 @@ function formatTime(date) {
 		minute: "2-digit"
 	});
 }
-/**
-* The single user message bubble uses inverse theme colors. The timestamp sits
-* beside the bubble and appears on hover, so it costs no height. Used by both
-* the run/message list (session-model `parts`) and AgentTimeline (direct
-* `content`/`timestamp`).
-*/
-const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
-	const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
-	if (!text.trim()) return null;
+function MessageActions({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
+		children
+	});
+}
+function UserBubble({ text, timestamp, actions }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -30,12 +29,34 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
-			}), actions ? /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
-				children: actions
-			}) : null]
+			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
 		})
 	});
+}
+/**
+* User speech retains the inverse-theme bubble and direct-content contract.
+* Application notes interrupt the bubble in source order, outside its attribution.
+*/
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
+	if (content != null) return content.trim() ? /* @__PURE__ */ jsx(UserBubble, {
+		text: content,
+		timestamp,
+		actions
+	}) : null;
+	const segments = userTextSegments(parts ?? []);
+	if (segments.length === 0) return null;
+	if (segments.length === 1 && !segments[0].synthetic) return /* @__PURE__ */ jsx(UserBubble, {
+		text: segments[0].text,
+		timestamp,
+		actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [segments.map((segment) => segment.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.index) : /* @__PURE__ */ jsx(UserBubble, {
+			text: segment.text,
+			timestamp
+		}, segment.index)), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
+	});
 });
 UserMessage.displayName = "UserMessage";
 //#endregion

package/dist/files/rich-file-tree.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { FileTree, useFileTree } from "@pierre/trees/react";
 //#region src/files/rich-file-tree.tsx
@@ -66,13 +66,24 @@ function RichFileTree({ root, paths, selectedPath, onSelect, search = true, init
 		if (root) return flattenFileNode(root);
 		return [];
 	}, [paths, root]);
+	const selectionRef = useRef({
+		selectedPath,
+		onSelect
+	});
+	selectionRef.current = {
+		selectedPath,
+		onSelect
+	};
+	const syncingSelectionRef = useRef(false);
+	const previousSelectedPathRef = useRef(selectedPath);
 	const { model } = useFileTree({
 		paths: flatPaths,
 		search,
 		initialExpansion,
 		onSelectionChange: (selected) => {
 			const next = selected[0];
-			if (next && next !== selectedPath) onSelect?.(next);
+			const current = selectionRef.current;
+			if (!syncingSelectionRef.current && next && next !== current.selectedPath) current.onSelect?.(next);
 		}
 	});
 	useEffect(() => {
@@ -83,11 +94,23 @@ function RichFileTree({ root, paths, selectedPath, onSelect, search = true, init
 		model.resetPaths(flatPaths);
 	}, [model, flatPaths]);
 	useEffect(() => {
-		if (!selectedPath) return;
+		const previous = previousSelectedPathRef.current;
+		previousSelectedPathRef.current = selectedPath;
+		if (selectedPath === void 0 && previous === void 0) return;
 		const current = model.getSelectedPaths();
-		if (current.length === 1 && current[0] === selectedPath) return;
-		model.setSelectedPaths?.([selectedPath]);
-	}, [model, selectedPath]);
+		if (current.length === (selectedPath ? 1 : 0) && current[0] === selectedPath) return;
+		syncingSelectionRef.current = true;
+		try {
+			for (const path of [...current]) model.getItem(path)?.deselect();
+			if (selectedPath) model.getItem(selectedPath)?.select();
+		} finally {
+			syncingSelectionRef.current = false;
+		}
+	}, [
+		model,
+		selectedPath,
+		flatPaths
+	]);
 	const theme = {
 		...DEFAULT_THEME,
 		...themeOverrides

package/dist/run/run-group.js

@@ -3,6 +3,7 @@ import { formatDuration } from "../utils/format.js";
 import { InlineToolItem } from "./inline-tool-item.js";
 import { Markdown } from "../markdown/markdown.js";
 import { InlineThinkingItem } from "./inline-thinking-item.js";
+import { SyntheticText } from "../chat/synthetic-text.js";
 import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -168,81 +169,107 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 		return parts;
 	}, [run.messages, partMap]);
 	const { stats, isStreaming } = run;
-	if (!allParts.some(({ part }) => {
+	const hasRenderableParts = allParts.some(({ part }) => {
 		if (part.type === "tool" || part.type === "reasoning") return true;
-		return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
-	})) {
-		if (!isStreaming) return null;
-		return /* @__PURE__ */ jsx(AssistantShell, {
-			branding,
-			isStreaming: true,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "flex gap-[5px]",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "0ms" }
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "150ms" }
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "300ms" }
-						})
-					]
-				})
+		return part.type === "text" && part.text.trim().length > 0;
+	});
+	const pendingResponse = /* @__PURE__ */ jsx(AssistantShell, {
+		branding,
+		isStreaming: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex gap-[5px]",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "0ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "150ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "300ms" }
+					})
+				]
 			})
-		});
-	}
+		})
+	});
+	if (!hasRenderableParts) return isStreaming ? pendingResponse : null;
 	if (!allParts.some(({ part }) => {
 		if (part.type === "reasoning") return true;
 		if (part.type === "tool") return !isOpenUITool(part);
 		return false;
-	})) return /* @__PURE__ */ jsx(AssistantShell, {
-		branding,
-		isStreaming,
-		children: allParts.map(({ part, msgId, index }) => {
+	})) {
+		const segments = [];
+		let lastSourceSegment = -1;
+		for (const entry of allParts) {
+			const { part, msgId, index } = entry;
+			if (part.type === "text" && !part.text.trim()) continue;
 			const key = `${msgId}-${index}`;
-			if (part.type === "tool" && isOpenUITool(part)) {
-				const toolPart = part;
-				const schema = extractOpenUISchema(toolPart.state.output);
-				const summary = getOpenUISummary(toolPart.state.output);
-				if (toolPart.state.status === "completed" && schema) return /* @__PURE__ */ jsxs("div", {
-					className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
-					children: [summary ? /* @__PURE__ */ jsx("div", {
-						className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground",
-						children: summary
-					}) : null, /* @__PURE__ */ jsx("div", {
-						className: "p-4",
-						children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, { schema })
-					})]
-				}, key);
-				if (toolPart.state.status === "running") return /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
-					children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
-				}, key);
+			if (part.type === "text" && part.synthetic) segments.push({
+				kind: "note",
+				key,
+				text: part.text
+			});
+			else {
+				const previous = segments[segments.length - 1];
+				if (previous?.kind === "source") previous.entries.push(entry);
+				else segments.push({
+					kind: "source",
+					key,
+					entries: [entry]
+				});
+				lastSourceSegment = segments.length - 1;
 			}
-			if (part.type === "text" && !part.synthetic && part.text.trim()) return /* @__PURE__ */ jsx("div", {
-				className: "px-0.5",
-				children: /* @__PURE__ */ jsx(Markdown, {
-					className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]",
-					children: part.text
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [segments.map((segment, segmentIndex) => segment.kind === "note" ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.key) : /* @__PURE__ */ jsx(AssistantShell, {
+				branding,
+				isStreaming: isStreaming && segmentIndex === lastSourceSegment,
+				children: segment.entries.map(({ part, msgId, index }) => {
+					const key = `${msgId}-${index}`;
+					if (part.type === "tool" && isOpenUITool(part)) {
+						const toolPart = part;
+						const schema = extractOpenUISchema(toolPart.state.output);
+						const summary = getOpenUISummary(toolPart.state.output);
+						if (toolPart.state.status === "completed" && schema) return /* @__PURE__ */ jsxs("div", {
+							className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
+							children: [summary ? /* @__PURE__ */ jsx("div", {
+								className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground",
+								children: summary
+							}) : null, /* @__PURE__ */ jsx("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, { schema })
+							})]
+						}, key);
+						if (toolPart.state.status === "running") return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
+						}, key);
+					}
+					if (part.type === "text" && !part.synthetic && part.text.trim()) return /* @__PURE__ */ jsx("div", {
+						className: "px-0.5",
+						children: /* @__PURE__ */ jsx(Markdown, {
+							className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]",
+							children: part.text
+						})
+					}, key);
+					return null;
 				})
-			}, key);
-			return null;
-		})
-	});
+			}, segment.key)), isStreaming && lastSourceSegment === -1 ? pendingResponse : null]
+		});
+	}
 	const rows = allParts.filter(({ part }) => {
 		if (part.type === "tool" || part.type === "reasoning") return true;
-		return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+		return part.type === "text" && part.text.trim().length > 0;
 	});
 	const dotAccent = (part) => {
 		if (part.type === "reasoning") return "bg-[var(--brand-glow)]";
-		if (part.type === "text") return "bg-primary";
+		if (part.type === "text" && !part.synthetic) return "bg-primary";
 		return "bg-[var(--border-hover)]";
 	};
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
@@ -334,7 +361,7 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 								part,
 								defaultOpen: isStreaming
 							});
-							else if (part.type === "text" && !part.synthetic && part.text.trim()) node = /* @__PURE__ */ jsx("div", {
+							else if (part.type === "text" && part.text.trim()) node = part.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: part.text }) : /* @__PURE__ */ jsx("div", {
 								className: "px-1 py-0.5",
 								children: /* @__PURE__ */ jsx(Markdown, {
 									className: "tangle-prose text-[15px] leading-7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.15.0",
+  "version": "11.15.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/chat-container.synthetic.stories.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../types/message";
+import type { SessionPart } from "../types/parts";
+import { Button } from "../primitives/button";
+import { ChatContainer } from "./chat-container";
+
+const messages: SessionMessage[] = [
+  { id: "user", role: "user" },
+  { id: "assistant", role: "assistant" },
+];
+
+type Props = { presentation: "runs" | "timeline"; state: "mixed" | "notes-only" | "pending" };
+function TranscriptNotes({ presentation, state }: Props) {
+  const [appended, setAppended] = useState(false);
+  const [inspected, setInspected] = useState<string | null>(null);
+  const partMap: Record<string, SessionPart[]> = state === "mixed" ? {
+    user: [
+      { type: "text", text: "Inspect the available worker results." },
+      { type: "text", synthetic: true, text: "Delivery receipt recorded by the application." },
+      { type: "text", text: "Tell me which evidence is missing." },
+    ],
+    assistant: [
+      { type: "text", text: "I will inspect the retained result files." },
+      { type: "tool", id: "first", tool: "read", state: { status: "completed", input: { path: "results/first.json" }, output: "First worker completed." } },
+      { type: "text", synthetic: true, text: "No tool trace was captured for the follow-up worker." },
+      { type: "tool", id: "second", tool: "read", state: { status: "error", input: { path: "results/second.json" }, error: "No retained result exists." } },
+      { type: "text", text: "Only the first worker has a retained result. The follow-up remains unverified." },
+    ],
+  } : {
+    user: state === "pending" ? [{ type: "text", text: "Inspect the worker results." }] : [],
+    assistant: [{ type: "text", synthetic: true, text: state === "pending" ? "Request accepted; no agent response received yet." : "Task not persisted. No agent response or tool trace is available." }],
+  };
+  if (appended) partMap.assistant.push({ type: "text", synthetic: true, text: "Delivery metadata added locally." });
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-4 p-4">
+      <p className="text-sm text-muted-foreground">Example transcript data. These controls update local story state only.</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" onClick={() => setAppended(true)} disabled={appended}>Append application note</Button>
+        <span role="status">{inspected ? `Inspected ${inspected}` : "No tool selected"}</span>
+      </div>
+      <ChatContainer
+        messages={messages}
+        partMap={partMap}
+        isStreaming={state === "pending"}
+        presentation={presentation}
+        renderToolActions={(part) => <Button type="button" size="sm" variant="ghost" onClick={() => setInspected(part.id)}>Inspect {part.id}</Button>}
+        renderTimelineToolActions={(part) => <Button type="button" size="sm" variant="ghost" onClick={() => setInspected(part.id)}>Inspect {part.id}</Button>}
+      />
+    </div>
+  );
+}
+
+const meta: Meta<typeof TranscriptNotes> = {
+  title: "Chat/Transcript notes",
+  component: TranscriptNotes,
+  parameters: { layout: "fullscreen" },
+  args: { presentation: "runs", state: "mixed" },
+};
+export default meta;
+type Story = StoryObj<typeof TranscriptNotes>;
+
+const checkMixed: NonNullable<Story["play"]> = async ({ canvasElement }) => {
+  const notes = canvasElement.querySelectorAll('[role="note"]');
+  if (notes.length !== 2) throw new Error("Expected both retained application notes");
+  for (const note of notes) {
+    if (note.closest('.bg-foreground, .tangle-prose, [class*="rounded-[26px]"]')) {
+      throw new Error("Application note was attributed to a speaker bubble");
+    }
+  }
+  const append = Array.from(canvasElement.querySelectorAll("button")).find((button) => button.textContent === "Append application note");
+  if (!append) throw new Error("Missing story action");
+  append.click();
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  if (canvasElement.querySelectorAll('[role="note"]').length !== 3) throw new Error("Appended note was lost");
+};
+
+export const MixedRuns: Story = { play: checkMixed };
+export const MixedTimeline: Story = { args: { presentation: "timeline" }, play: checkMixed };
+export const NotesOnly: Story = { args: { state: "notes-only" } };
+export const PendingRuns: Story = { args: { state: "pending" } };
+export const PendingTimeline: Story = { args: { presentation: "timeline", state: "pending" } };