@signal9/era-ui 4.11.0 → 4.11.2

package/dist/ai/swarm/swarm-node.svelte

@@ -14,30 +14,38 @@
 		agent,
 		level = 1,
 		open = $bindable(true),
+		detailOpen = $bindable(false),
+		detailLabel,
 		active = false,
-		expandable,
 		detail,
 		meta,
 		children,
 		onOpen,
 		onCancel,
 		onToggle,
+		onDetailToggle,
 		class: className,
 		...restProps
 	}: Omit<Collapsible.RootProps, 'children' | 'child' | 'open'> & {
 		agent: SwarmAgent;
 		/** Depth in the tree, 1-based — announced as aria-level. `Swarm.Tree` sets it. */
 		level?: number;
-		/** Expanded: shows `detail` and the child group. Bindable. */
+		/**
+		 * Subtree expanded — the chevron, and nothing else. A tree's disclosure is
+		 * its CHILDREN; this component used to make it mean the agent's output as
+		 * well, which is why a finished swarm sat fully unfolded.
+		 */
 		open?: boolean;
-		/** The tree's focused row — holds the seated highlight. */
-		active?: boolean;
+		/** The agent's own output, disclosed separately. Bindable. */
+		detailOpen?: boolean;
 		/**
-		 * Force the chevron on or off. Defaults to "has children or a detail
-		 * snippet" — override it when the detail snippet renders nothing for THIS
-		 * agent (a worker with no artifacts yet), which the node cannot see.
+		 * Labels the detail affordance, and its presence is what creates one —
+		 * "2 artifacts", "transcript". Say what is behind it, since a chip that
+		 * names its contents needs no icon to explain itself.
 		 */
-		expandable?: boolean;
+		detailLabel?: string;
+		/** The tree's focused row — holds the seated highlight. */
+		active?: boolean;
 		/** Expanded body for this agent: its artifacts, transcript, output. */
 		detail?: Snippet<[SwarmAgent]>;
 		/** Trailing row content — a count, a chip, anything the host tracks. */
@@ -47,22 +55,41 @@
 		/** Overrides the Root's handler for this row. */
 		onOpen?: (agent: SwarmAgent) => void;
 		onCancel?: (agent: SwarmAgent) => void;
-		/** Fired after the row expands or collapses. */
+		/** Fired after the SUBTREE expands or collapses. */
 		onToggle?: (open: boolean) => void;
+		/** Fired after the detail expands or collapses. */
+		onDetailToggle?: (open: boolean) => void;
 	} = $props();
 
 	const ctx = getSwarmContext();
 	const actions = $derived(swarmActions(agent, ctx, { onOpen, onCancel }));
 	const hasActions = $derived(actions.open != null || actions.cancel != null);
 
-	const canExpand = $derived(expandable ?? (children != null || detail != null));
+	// Two disclosures, deliberately separate. The chevron owns the subtree (what a
+	// tree's expansion means everywhere else), and the row's detail chip owns this
+	// agent's output. Fusing them is what made every finished agent hold its
+	// artifacts open forever — the only way to hide the noise was to hide the tree.
+	const hasChildren = $derived(children != null);
+	const hasDetail = $derived(detail != null && detailLabel != null);
 	const running = $derived(agent.status === 'running');
 	const elapsed = $derived(swarmElapsed(agent, ctx.now));
 
+	// A branch's row toggles its branch; a LEAF has no branch, so its row toggles
+	// the one thing it does have. Either way the row does the obvious thing, and
+	// the chip is always there for the detail specifically.
 	function toggle() {
-		if (!canExpand) return;
-		open = !open;
-		onToggle?.(open);
+		if (hasChildren) {
+			open = !open;
+			onToggle?.(open);
+		} else if (hasDetail) {
+			toggleDetail();
+		}
+	}
+
+	function toggleDetail() {
+		if (!hasDetail) return;
+		detailOpen = !detailOpen;
+		onDetailToggle?.(detailOpen);
 	}
 
 	/**
@@ -102,6 +129,9 @@
 </script>
 
 <!-- One agent in the delegation tree.
+     aria-expanded describes the SUBTREE, per the tree pattern — a leaf that
+     advertised it would tell a screen reader it has children it doesn't have.
+     The detail's own expanded state lives on the chip that controls it.
      The treeitem is the Collapsible root, so `data-state` (and therefore the
      chevron's rotation and the body's height sweep) comes from the same element
      that carries aria-expanded — one source of truth for "is this row open",
@@ -110,7 +140,7 @@
 	bind:open
 	role="treeitem"
 	aria-level={level}
-	aria-expanded={canExpand ? open : undefined}
+	aria-expanded={hasChildren ? open : undefined}
 	data-agent-id={agent.id}
 	data-active={active || undefined}
 	tabindex={active ? 0 : -1}
@@ -126,14 +156,14 @@
 		class={cn(
 			'flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) pl-(--era-inset-md) text-body era-text-trim',
 			hasActions ? 'pr-(--era-xxs-inset-md)' : 'pr-(--era-inset-md)',
-			canExpand && 'cursor-pointer',
+			(hasChildren || hasDetail) && 'cursor-pointer',
 			active
 				? 'bg-hover text-bright'
 				: 'text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow)',
 			'group-focus-visible/node:outline group-focus-visible/node:-outline-offset-1 group-focus-visible/node:outline-primary'
 		)}
 	>
-		{#if canExpand}
+		{#if hasChildren}
 			<ChevronRight
 				class="size-(--era-h-xs) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/node:rotate-90"
 				aria-hidden="true"
@@ -163,6 +193,24 @@
 
 		{@render meta?.(agent)}
 
+		{#if hasDetail}
+			<!-- The detail affordance appears only where there is something behind it,
+			     and says what: a chip that names its own contents needs no icon to
+			     explain itself, and a row with nothing to show stays a plain line. -->
+			<button
+				type="button"
+				data-state={detailOpen ? 'open' : 'closed'}
+				aria-expanded={detailOpen}
+				onclick={(event: MouseEvent) => {
+					event.stopPropagation();
+					toggleDetail();
+				}}
+				class="shrink-0 era-interactive cursor-pointer rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body era-text-trim text-muted hover:bg-(--era-highlight) hover:text-fg data-[state=open]:bg-hover data-[state=open]:text-fg"
+			>
+				{detailLabel}
+			</button>
+		{/if}
+
 		{#if agent.sandbox}
 			<Sandbox sandbox={agent.sandbox} />
 		{/if}
@@ -176,27 +224,31 @@
 		<Actions {agent} open={actions.open} cancel={actions.cancel} />
 	</div>
 
-	{#if canExpand}
-		<Collapsible.Content class="era-collapse">
-			{#if detail}
-				<!-- Indented to where the row's text starts (chevron + gap), so the
-				     body reads as this agent's output rather than a sibling row. -->
+	{#if hasDetail}
+		<!-- The agent's own output, on its own disclosure. Indented to where the
+		     row's text starts (chevron + gap), so it reads as this agent's output
+		     rather than a sibling row. -->
+		<Collapsible.Root bind:open={detailOpen}>
+			<Collapsible.Content class="era-collapse">
 				<div
 					class="min-w-0 pr-(--era-inset-md) pb-(--era-gap) pl-[calc(var(--era-inset-md)+var(--era-h-xs)+var(--era-gap))]"
 				>
-					{@render detail(agent)}
+					{@render detail?.(agent)}
 				</div>
-			{/if}
-			{#if children}
-				<!-- The rail lands on the chevron's centre line, so the connector runs
-				     straight down from the parent's own arrow into its children. -->
-				<div
-					role="group"
-					class="ml-[calc(var(--era-inset-md)+var(--era-h-xs)/2)] border-l border-divider-faded"
-				>
-					{@render children()}
-				</div>
-			{/if}
+			</Collapsible.Content>
+		</Collapsible.Root>
+	{/if}
+
+	{#if hasChildren}
+		<Collapsible.Content class="era-collapse">
+			<!-- The rail lands on the chevron's centre line, so the connector runs
+			     straight down from the parent's own arrow into its children. -->
+			<div
+				role="group"
+				class="ml-[calc(var(--era-inset-md)+var(--era-h-xs)/2)] border-l border-divider-faded"
+			>
+				{@render children?.()}
+			</div>
 		</Collapsible.Content>
 	{/if}
 </Collapsible.Root>

package/dist/ai/swarm/swarm-node.svelte.d.ts

@@ -5,16 +5,22 @@ type $$ComponentProps = Omit<Collapsible.RootProps, 'children' | 'child' | 'open
     agent: SwarmAgent;
     /** Depth in the tree, 1-based — announced as aria-level. `Swarm.Tree` sets it. */
     level?: number;
-    /** Expanded: shows `detail` and the child group. Bindable. */
+    /**
+     * Subtree expanded — the chevron, and nothing else. A tree's disclosure is
+     * its CHILDREN; this component used to make it mean the agent's output as
+     * well, which is why a finished swarm sat fully unfolded.
+     */
     open?: boolean;
-    /** The tree's focused row — holds the seated highlight. */
-    active?: boolean;
+    /** The agent's own output, disclosed separately. Bindable. */
+    detailOpen?: boolean;
     /**
-     * Force the chevron on or off. Defaults to "has children or a detail
-     * snippet" — override it when the detail snippet renders nothing for THIS
-     * agent (a worker with no artifacts yet), which the node cannot see.
+     * Labels the detail affordance, and its presence is what creates one —
+     * "2 artifacts", "transcript". Say what is behind it, since a chip that
+     * names its contents needs no icon to explain itself.
      */
-    expandable?: boolean;
+    detailLabel?: string;
+    /** The tree's focused row — holds the seated highlight. */
+    active?: boolean;
     /** Expanded body for this agent: its artifacts, transcript, output. */
     detail?: Snippet<[SwarmAgent]>;
     /** Trailing row content — a count, a chip, anything the host tracks. */
@@ -24,9 +30,11 @@ type $$ComponentProps = Omit<Collapsible.RootProps, 'children' | 'child' | 'open
     /** Overrides the Root's handler for this row. */
     onOpen?: (agent: SwarmAgent) => void;
     onCancel?: (agent: SwarmAgent) => void;
-    /** Fired after the row expands or collapses. */
+    /** Fired after the SUBTREE expands or collapses. */
     onToggle?: (open: boolean) => void;
+    /** Fired after the detail expands or collapses. */
+    onDetailToggle?: (open: boolean) => void;
 };
-declare const SwarmNode: import("svelte").Component<$$ComponentProps, {}, "open">;
+declare const SwarmNode: import("svelte").Component<$$ComponentProps, {}, "open" | "detailOpen">;
 type SwarmNode = ReturnType<typeof SwarmNode>;
 export default SwarmNode;

package/dist/ai/swarm/swarm-tree.svelte

@@ -3,12 +3,12 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
 	import Node from './swarm-node.svelte';
-	import { buildSwarmTree, type SwarmAgent, type SwarmNode } from './swarm.js';
+	import { buildSwarmTree, isSwarmAgentActive, type SwarmAgent, type SwarmNode } from './swarm.js';
 
 	let {
 		ref = $bindable(null),
 		agents = [],
-		expandable,
+		detailLabel,
 		detail,
 		meta,
 		empty,
@@ -20,11 +20,11 @@
 		/** The swarm's agents, flat. The tree is built from each one's `parentId`. */
 		agents?: SwarmAgent[];
 		/**
-		 * Which rows can expand beyond their children. Defaults to "every row,
-		 * once a detail snippet exists" — pass a predicate when the detail is empty
-		 * for some agents, so those rows don't get a chevron that opens nothing.
+		 * Names each row's detail affordance — "2 artifacts", "transcript" — and its
+		 * absence is what says a row has nothing to show. Returning undefined for an
+		 * agent leaves that row a plain line.
 		 */
-		expandable?: (agent: SwarmAgent) => boolean;
+		detailLabel?: (agent: SwarmAgent) => string | undefined;
 		/** Expanded body for a row — artifacts, a transcript, tool output. */
 		detail?: Snippet<[SwarmAgent]>;
 		/** Trailing row content, rendered before the elapsed readout. */
@@ -37,9 +37,21 @@
 
 	const tree = $derived(buildSwarmTree(agents));
 
-	/** One answer for the row, the keyboard walk, and the chevron — they must agree. */
-	const nodeExpandable = (node: SwarmNode) =>
-		node.children.length > 0 || (detail != null && (expandable?.(node.agent) ?? true));
+	/*
+	 * ATTENTION FOLLOWS THE WORK.
+	 *
+	 * A detail opens by itself while its agent is working and folds when the agent
+	 * lands, because by then the row already carries the one-line result and the
+	 * open body is just noise — a finished swarm used to sit fully unfolded, every
+	 * artifact card stacked under every row at once.
+	 *
+	 * A user's own toggle outranks that forever: the override is only consulted for
+	 * rows they have actually touched, so pinning a landed agent open survives the
+	 * rest of the run, and everything untouched keeps tracking the work.
+	 */
+	let detailOverride = $state<Record<string, boolean>>({});
+	const detailOpenFor = (agent: SwarmAgent) =>
+		detailOverride[agent.id] ?? isSwarmAgentActive(agent);
 
 	// Rows default to OPEN and remember only what the user closed. A swarm streams
 	// in — an agent that appears three seconds from now has no entry here, and
@@ -76,10 +88,12 @@
 		const out: Row[] = [];
 		const walk = (nodes: SwarmNode[], parentId: string | null) => {
 			for (const node of nodes) {
-				const canExpand = nodeExpandable(node);
+				// Subtree only — the arrow keys navigate structure, and a row's detail
+				// is not structure. (It is reachable from the row's own chip.)
+				const hasChildren = node.children.length > 0;
 				const open = isOpen(node.agent.id);
-				out.push({ id: node.agent.id, agent: node.agent, parentId, expandable: canExpand, open });
-				if (canExpand && open) walk(node.children, node.agent.id);
+				out.push({ id: node.agent.id, agent: node.agent, parentId, expandable: hasChildren, open });
+				if (hasChildren && open) walk(node.children, node.agent.id);
 			}
 		};
 		walk(tree, null);
@@ -186,14 +200,16 @@
      knows the visible order), and a self-recursing node would have to hand every
      level a copy of that state. -->
 {#snippet nodeView(node: SwarmNode, level: number)}
-	<!-- A leaf gets NO children snippet, rather than one that renders nothing:
-	     the node reads the snippet's presence to decide whether it is expandable,
-	     so an always-passed empty group would put a dead chevron on every leaf. -->
+	<!-- A leaf gets NO children snippet, rather than one that renders nothing: the
+	     node reads the snippet's presence to decide whether it has a subtree, so an
+	     always-passed empty group would put a dead chevron on every leaf. -->
 	{@const props = {
 		agent: node.agent,
 		level,
-		expandable: nodeExpandable(node),
 		detail,
+		detailLabel: detailLabel?.(node.agent),
+		detailOpen: detailOpenFor(node.agent),
+		onDetailToggle: (open: boolean) => (detailOverride[node.agent.id] = open),
 		meta,
 		open: isOpen(node.agent.id),
 		// `active` is the whole roving-focus story: the node derives its own

package/dist/ai/swarm/swarm-tree.svelte.d.ts

@@ -6,11 +6,11 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** The swarm's agents, flat. The tree is built from each one's `parentId`. */
     agents?: SwarmAgent[];
     /**
-     * Which rows can expand beyond their children. Defaults to "every row,
-     * once a detail snippet exists" — pass a predicate when the detail is empty
-     * for some agents, so those rows don't get a chevron that opens nothing.
+     * Names each row's detail affordance — "2 artifacts", "transcript" — and its
+     * absence is what says a row has nothing to show. Returning undefined for an
+     * agent leaves that row a plain line.
      */
-    expandable?: (agent: SwarmAgent) => boolean;
+    detailLabel?: (agent: SwarmAgent) => string | undefined;
     /** Expanded body for a row — artifacts, a transcript, tool output. */
     detail?: Snippet<[SwarmAgent]>;
     /** Trailing row content, rendered before the elapsed readout. */

package/dist/apps/llm-shell/llm-swarm.svelte

@@ -50,9 +50,17 @@
 	{#if view === 'grid'}
 		<AI.Swarm.Grid agents={swarm.agents} />
 	{:else}
-		<AI.Swarm.Tree agents={swarm.agents} expandable={(agent) => artifactsFor(agent).length > 0}>
+		<!-- The chip names what it opens, so the section heading inside would say it
+		     twice — the detail is just the cards. -->
+		<AI.Swarm.Tree
+			agents={swarm.agents}
+			detailLabel={(agent) => {
+				const n = artifactsFor(agent).length;
+				return n === 0 ? undefined : `${n} artifact${n === 1 ? '' : 's'}`;
+			}}
+		>
 			{#snippet detail(agent)}
-				<AI.Swarm.Artifacts artifacts={artifactsFor(agent)} />
+				<AI.Swarm.Artifacts artifacts={artifactsFor(agent)} label={undefined} />
 			{/snippet}
 		</AI.Swarm.Tree>
 	{/if}

package/dist/apps/notes/notes.svelte

@@ -158,7 +158,16 @@
 		     term's notes app uses — its hardcoded 3px is what Bar now derives at
 		     dense. The field keeps its fill: xxs is the smallest tier a real field
 		     fits on. -->
-		<Bar size="md" content="xxs" class="shrink-0 rounded-none border-b border-divider-faded">
+		<!-- The divider is drawn OUTSIDE the box, exactly as Pane.Handle draws its
+		     own: a border consumes a pixel of the bar's content box, so its children
+		     centred in 23px and sat 2.5px from the top against a 3px wall. Outset
+		     costs no layout, so the bar keeps its full tier height and every child
+		     sits the wall's distance from all four edges. -->
+		<Bar
+			size="md"
+			content="xxs"
+			class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
+		>
 			<Input
 				icon={Search}
 				size="xxs"
@@ -282,19 +291,21 @@
 								<ContextMenu.Content>
 									<ContextMenu.Item onSelect={() => store.togglePin(note.id)}>
 										{#if note.pinned}
-											<PinOff class="mr-(--era-gap) size-xs text-muted" />
+											<PinOff class="size-xs text-muted" />
 											Unpin note
 										{:else}
-											<Pin class="mr-(--era-gap) size-xs text-muted" />
+											<Pin class="size-xs text-muted" />
 											Pin note
 										{/if}
 									</ContextMenu.Item>
-									<ContextMenu.Separator />
+									<!-- No separator: a rule groups things, and two actions on one row
+									     are one group — it was drawing a boundary through the middle of
+									     a pair. The panel's gutter gives them their own breathing room. -->
 									<!-- Routed through the same confirm dialog the toolbar button
 									     uses, not a direct delete: a destructive action should not
 									     get easier to reach by arriving from a different gesture. -->
 									<ContextMenu.Item onSelect={() => (pendingDelete = note.id)}>
-										<Trash2 class="mr-(--era-gap) size-xs text-destructive" />
+										<Trash2 class="size-xs text-destructive" />
 										Delete note
 									</ContextMenu.Item>
 								</ContextMenu.Content>
@@ -314,7 +325,12 @@
 		{#if selected}
 			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
 			     side across the top of the app, so they must be the same tier. -->
-			<Bar size="md" content="xxs" class="shrink-0 rounded-none border-b border-divider-faded">
+			<!-- Same outset divider as the sidebar's filter bar above. -->
+			<Bar
+				size="md"
+				content="xxs"
+				class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
+			>
 				<Popover.Root bind:open={iconPickerOpen}>
 					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
 						{#if selected.icon}