@heyramzi/ui 2.16.0 → 2.17.0

package/dist/thread/logic.js

@@ -57,17 +57,28 @@ export function resolveThreadLabels(overrides) {
 export function fillCount(label, count) {
 	return label.replaceAll("{count}", String(count));
 }
-/** Conversations and events in time order, each run of events between two conversations as one item. */
-export function interleave(nodes, events) {
-	const timed = [...nodes.map((node, index) => ({
-		at: at(node.comment.createdAt),
-		index,
-		node
-	})), ...events.map((event, index) => ({
-		at: at(event.at),
-		index: nodes.length + index,
-		event
-	}))].toSorted((a, b) => a.at - b.at || a.index - b.index);
+/**
+* Conversations, events and the host's entries in time order, each run of events between two
+* other items as one item.
+*/
+export function interleave(nodes, events, entries = []) {
+	const timed = [
+		...nodes.map((node, index) => ({
+			at: at(node.comment.createdAt),
+			index,
+			node
+		})),
+		...events.map((event, index) => ({
+			at: at(event.at),
+			index: nodes.length + index,
+			event
+		})),
+		...entries.map((entry, index) => ({
+			at: at(entry.at),
+			index: nodes.length + events.length + index,
+			entry
+		}))
+	].toSorted((a, b) => a.at - b.at || a.index - b.index);
 	const items = [];
 	for (const row of timed) {
 		if ("node" in row) {
@@ -78,6 +89,14 @@ export function interleave(nodes, events) {
 			});
 			continue;
 		}
+		if ("entry" in row) {
+			items.push({
+				type: "entry",
+				key: `entry-${row.entry.id}`,
+				entry: row.entry
+			});
+			continue;
+		}
 		const last = items.at(-1);
 		if (last?.type === "events") last.events.push(row.event);
 		else items.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/thread/README.md

@@ -24,7 +24,9 @@ One comment thread for any subject: a task, a project, a doc or a diagram. The t
 - **Resolve.** Pass `onResolve` and each root gets a check. Resolved roots fold away behind a "Show N resolved" button.
 - **Anchor.** `anchor` carries `{ nodeId, dx, dy, x, y }` for a canvas pin. A pinned comment shows a chip, and `onAnchor` fires on a click so the canvas can move to the node. `anchorChip` replaces the chip.
 - **Attachments.** The `attachments` snippet draws under a comment's body.
-- **Events.** `events` takes `ThreadEvent`s (a whole sentence, a time, an optional Phosphor icon) and draws each as one `Trace` line between the conversations, in time order. `whenEvent(event)` formats its time. `interleave(nodes, events)` gives the same order without the component.
+- **Events.** `events` takes `ThreadEvent`s (a whole sentence, a time, an optional Phosphor icon) and draws each as one `Trace` line between the conversations, in time order. `whenEvent(event)` formats its time. `interleave(nodes, events, entries)` gives the same order without the component.
+- **Entries.** `entries` takes `{ id, at }` rows that the `entry` snippet draws, such as an agent's run or a message to it, so a comment thread and an agent conversation read as one back-and-forth. `footer` draws above the composer, for a question waiting on an answer. `onPost` decides where a root post goes.
+- **Heading.** `heading={false}` keeps the title for screen readers only, for a thread its tab already names.
 - **Long bodies.** A body over 6 lines folds behind `showMore` and `showLess`.
 - **Labels.** Every string comes from `labels`, a partial of `ThreadLabels`. `showResolved` holds a `{count}` slot. `when(comment)` formats the time.
 

package/src/thread/index.ts

@@ -12,6 +12,7 @@ export type {
   ThreadAuthor,
   ThreadAuthorKind,
   ThreadComment,
+  ThreadEntry,
   ThreadEvent,
   ThreadItem,
   ThreadLabels,

package/src/thread/logic.ts

@@ -1,5 +1,6 @@
 import type {
   ThreadComment,
+  ThreadEntry,
   ThreadEvent,
   ThreadItem,
   ThreadLabels,
@@ -71,11 +72,23 @@ export function fillCount(label: string, count: number): string {
   return label.replaceAll("{count}", String(count));
 }
 
-/** Conversations and events in time order, each run of events between two conversations as one item. */
-export function interleave(nodes: ThreadNode[], events: ThreadEvent[]): ThreadItem[] {
+/**
+ * Conversations, events and the host's entries in time order, each run of events between two
+ * other items as one item.
+ */
+export function interleave(
+  nodes: ThreadNode[],
+  events: ThreadEvent[],
+  entries: ThreadEntry[] = [],
+): ThreadItem[] {
   const timed = [
     ...nodes.map((node, index) => ({ at: at(node.comment.createdAt), index, node })),
     ...events.map((event, index) => ({ at: at(event.at), index: nodes.length + index, event })),
+    ...entries.map((entry, index) => ({
+      at: at(entry.at),
+      index: nodes.length + events.length + index,
+      entry,
+    })),
   ].toSorted((a, b) => a.at - b.at || a.index - b.index);
   const items: ThreadItem[] = [];
   for (const row of timed) {
@@ -83,6 +96,10 @@ export function interleave(nodes: ThreadNode[], events: ThreadEvent[]): ThreadIt
       items.push({ type: "node", key: row.node.comment.id, node: row.node });
       continue;
     }
+    if ("entry" in row) {
+      items.push({ type: "entry", key: `entry-${row.entry.id}`, entry: row.entry });
+      continue;
+    }
     const last = items.at(-1);
     if (last?.type === "events") last.events.push(row.event);
     else items.push({ type: "events", key: row.event.id, events: [row.event] });

package/src/thread/thread-body.svelte

@@ -17,7 +17,8 @@
 <div class="flex flex-col items-start gap-1">
 	<p
 		class={cn(
-			"text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty",
+			// A long unbroken word, such as a class name, otherwise widens a narrow rail.
+			"max-w-full text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty wrap-break-word",
 			long && !open && "line-clamp-6",
 			className,
 		)}

package/src/thread/thread.svelte

@@ -15,7 +15,13 @@
 		resolveThreadLabels,
 		resolvedCount,
 	} from "./logic.js";
-	import type { ThreadComment, ThreadEvent, ThreadLabels, ThreadPost } from "./types.js";
+	import type {
+		ThreadComment,
+		ThreadEntry,
+		ThreadEvent,
+		ThreadLabels,
+		ThreadPost,
+	} from "./types.js";
 
 	interface Props {
 		comments: ThreadComment[];
@@ -46,6 +52,13 @@
 		onAnchor?: (comment: ThreadComment) => void;
 		/** Whose comments carry the edit and delete buttons. A rich comment can't be edited here. */
 		canEdit?: (comment: ThreadComment) => boolean;
+		/** False hides the visible title, for a thread already named by its tab. Screen readers still get it. */
+		heading?: boolean;
+		/** Rows the host draws through `entry`, placed in time among the comments. */
+		entries?: ThreadEntry[];
+		entry?: Snippet<[ThreadEntry]>;
+		/** Drawn above the composer, such as a question waiting on an answer. */
+		footer?: Snippet;
 		class?: string;
 	}
 
@@ -66,6 +79,10 @@
 		onResolve,
 		onAnchor,
 		canEdit = () => false,
+		heading = true,
+		entries = [],
+		entry,
+		footer,
 		class: className,
 	}: Props = $props();
 
@@ -74,7 +91,7 @@
 	let resolved = $derived(resolvedCount(nodes));
 	let showResolved = $state(false);
 	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
-	let items = $derived(interleave(shown, events));
+	let items = $derived(interleave(shown, events, entry ? entries : []));
 
 	function shortDate(at: string): string {
 		return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(new Date(at));
@@ -273,8 +290,8 @@
 {/snippet}
 
 <section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
-	<div class="flex h-7 items-center justify-between">
-		<h2 class="text-xs font-medium text-muted-foreground">{labels.title}</h2>
+	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
+		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>{labels.title}</h2>
 		{#if resolved > 0}
 			<button
 				type="button"
@@ -304,6 +321,8 @@
 			{#each items as item (item.key)}
 				{#if item.type === "events"}
 					<li><ThreadEvents events={item.events} when={whenEvent} /></li>
+				{:else if item.type === "entry"}
+					<li class="min-w-0">{@render entry?.(item.entry)}</li>
 				{:else}
 					{@const node = item.node}
 					<li
@@ -353,6 +372,8 @@
 		<p class="text-[13px] text-muted-foreground">{labels.empty}</p>
 	{/if}
 
+	{@render footer?.()}
+
 	{#if onPost}
 		{@render composer(draft, labels.placeholder, sendRoot, (next) => (draft = next), false)}
 	{/if}

package/src/thread/types.ts

@@ -59,10 +59,18 @@ export type ThreadEvent = {
   icon?: PhosphorIcon;
 };
 
-/** The thread in time order: a conversation, or a run of events between two of them. */
+/** A row the host draws itself, placed in time among the comments, such as an agent's run or a message to it. */
+export type ThreadEntry = {
+  id: string;
+  /** ISO timestamp. */
+  at: string;
+};
+
+/** The thread in time order: a conversation, a run of events between two of them, or a host's entry. */
 export type ThreadItem =
   | { type: "node"; key: string; node: ThreadNode }
-  | { type: "events"; key: string; events: ThreadEvent[] };
+  | { type: "events"; key: string; events: ThreadEvent[] }
+  | { type: "entry"; key: string; entry: ThreadEntry };
 
 export type ThreadLabels = {
   title: string;