@signal9/era-ui 4.6.1 → 4.7.0

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

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	import type { SwarmConnection } from './swarm.js';
+
+	/**
+	 * Stream health, which is NOT swarm health — the two are shown apart on
+	 * purpose (the header has the plan's dot, this has the socket's). A swarm can
+	 * be running perfectly behind a dead connection, and a console that paints
+	 * one dot for both tells you the run stalled when only your view did.
+	 */
+	const CONNECTION: Record<SwarmConnection, { class: string; dot: string; label: string }> = {
+		idle: { class: 'text-muted', dot: 'bg-muted', label: 'idle' },
+		loading: { class: 'text-muted', dot: 'bg-muted animate-pulse', label: 'loading' },
+		live: { class: 'text-success', dot: 'bg-success', label: 'live' },
+		reconnecting: { class: 'text-warning', dot: 'bg-warning animate-pulse', label: 'reconnecting' },
+		error: { class: 'text-destructive', dot: 'bg-destructive', label: 'disconnected' }
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		connection = 'idle',
+		seq,
+		error,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		connection?: SwarmConnection;
+		/**
+		 * The applied event watermark. Showing it is not debug output: it is the
+		 * resume point, and seeing it advance is what tells you a quiet swarm is
+		 * still connected rather than stuck.
+		 */
+		seq?: number;
+		/** Last transport error. Shown beside the watermark, never in place of it. */
+		error?: string | null;
+	} = $props();
+
+	const tone = $derived(CONNECTION[connection]);
+</script>
+
+<div
+	class={cn(
+		'flex h-(--era-h-md) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-md) font-mono text-body era-text-trim',
+		className
+	)}
+	{...restProps}
+>
+	<span class={cn('flex shrink-0 items-center gap-(--era-gap)', tone.class)}>
+		<span class={cn('size-2 shrink-0 rounded-full', tone.dot)} aria-hidden="true"></span>
+		{tone.label}
+	</span>
+	{#if error}
+		<span class="min-w-0 flex-1 truncate text-destructive" title={error}>{error}</span>
+	{:else}
+		<span class="flex-1"></span>
+	{/if}
+	{#if seq != null && seq >= 0}
+		<span class="shrink-0 text-muted tabular-nums">seq {seq}</span>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { SwarmConnection } from './swarm.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    connection?: SwarmConnection;
+    /**
+     * The applied event watermark. Showing it is not debug output: it is the
+     * resume point, and seeing it advance is what tells you a quiet swarm is
+     * still connected rather than stuck.
+     */
+    seq?: number;
+    /** Last transport error. Shown beside the watermark, never in place of it. */
+    error?: string | null;
+};
+declare const SwarmFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmFooter = ReturnType<typeof SwarmFooter>;
+export default SwarmFooter;

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import Agent from './swarm-agent.svelte';
+	import { buildSwarmTree, flattenSwarmTree, type SwarmAgent } from './swarm.js';
+
+	let {
+		agents = [],
+		children,
+		empty,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The swarm's agents, flat. Cards are ordered shallowest-first. */
+		agents?: SwarmAgent[];
+		/** Extra card body, forwarded to every `Swarm.Agent`. */
+		children?: Snippet<[SwarmAgent]>;
+		/** Replaces the built-in "no agents yet" line. */
+		empty?: Snippet;
+	} = $props();
+
+	// Depth-first from the roots: the grid loses the tree's shape, so the order
+	// is the only thing left that says who delegated whom — a parent immediately
+	// followed by its branch reads far better than arrival order, where a
+	// late-spawned child lands twenty cards from its parent. The `d2` tag on each
+	// card carries the rest.
+	const nodes = $derived(flattenSwarmTree(buildSwarmTree(agents)));
+</script>
+
+<!-- The console view: every agent at once, one card each.
+     `auto-fill` + a density-derived minimum means the column count follows the
+     container's actual width — no breakpoints to keep in sync, and the cards
+     grow with the density axis instead of staying dense-sized in touch mode. -->
+<div
+	class={cn(
+		'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(calc(var(--era-h-lg)*6),1fr))] gap-(--era-gap) p-(--era-gap)',
+		className
+	)}
+	{...restProps}
+>
+	{#if nodes.length === 0}
+		<div class="px-(--era-inset-md) py-(--era-gap) text-body text-muted">
+			{#if empty}{@render empty()}{:else}No agents yet.{/if}
+		</div>
+	{:else}
+		{#each nodes as node (node.agent.id)}
+			<Agent agent={node.agent} depth={node.depth} {children} />
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SwarmAgent } from './swarm.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The swarm's agents, flat. Cards are ordered shallowest-first. */
+    agents?: SwarmAgent[];
+    /** Extra card body, forwarded to every `Swarm.Agent`. */
+    children?: Snippet<[SwarmAgent]>;
+    /** Replaces the built-in "no agents yet" line. */
+    empty?: Snippet;
+};
+declare const SwarmGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmGrid = ReturnType<typeof SwarmGrid>;
+export default SwarmGrid;

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

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	import type { SwarmAgentStatus, SwarmPlanStatus } from './swarm.js';
+
+	/**
+	 * The plan's lifecycle borrows the agent dot's vocabulary — one tone system
+	 * for the whole family, so "this is still working" looks identical whether it
+	 * is one agent or the plan over all of them.
+	 */
+	const PLAN_DOT: Record<SwarmPlanStatus, { status: SwarmAgentStatus; label: string }> = {
+		active: { status: 'running', label: 'Active' },
+		done: { status: 'done', label: 'Done' },
+		failed: { status: 'failed', label: 'Failed' },
+		cancelled: { status: 'cancelled', label: 'Cancelled' }
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import Dot from './swarm-dot.svelte';
+
+	let {
+		title,
+		status,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** The plan's title — what the swarm was spun up to do. */
+		title?: string;
+		/** Plan lifecycle; drives the leading dot. Omit for no dot. */
+		status?: SwarmPlanStatus;
+		/** Trailing content — `Swarm.Counts`, a cancel button, a view switch. */
+		children?: Snippet;
+	} = $props();
+
+	const plan = $derived(status ? PLAN_DOT[status] : null);
+</script>
+
+<!-- The swarm's own line: what it is doing, and how much of it is left. The
+     title truncates and the trailing group does not — on a narrow pane you lose
+     the end of a sentence you can hover for, never the count of what failed. -->
+<div
+	class={cn(
+		'flex h-(--era-h-md) shrink-0 items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim',
+		className
+	)}
+	{...restProps}
+>
+	{#if plan}
+		<Dot status={plan.status} label={plan.label} />
+	{/if}
+	{#if title}
+		<span class="min-w-0 flex-1 truncate text-bright">{title}</span>
+	{:else}
+		<span class="flex-1"></span>
+	{/if}
+	{#if children}
+		<div class="flex shrink-0 items-center gap-(--era-gap)">
+			{@render children()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { SwarmPlanStatus } from './swarm.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** The plan's title — what the swarm was spun up to do. */
+    title?: string;
+    /** Plan lifecycle; drives the leading dot. Omit for no dot. */
+    status?: SwarmPlanStatus;
+    /** Trailing content — `Swarm.Counts`, a cancel button, a view switch. */
+    children?: Snippet;
+};
+declare const SwarmHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmHeader = ReturnType<typeof SwarmHeader>;
+export default SwarmHeader;

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

@@ -0,0 +1,258 @@
+<script lang="ts" module>
+	/** How a sandbox's health tints the VM glyph on a row. */
+	const SANDBOX_TONE: Record<string, string> = {
+		running: 'text-success',
+		paused: 'text-warning',
+		terminated: 'text-muted'
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Box from '@lucide/svelte/icons/box';
+	import X from '@lucide/svelte/icons/x';
+	import PanelRightOpen from '@lucide/svelte/icons/panel-right-open';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+	import { getSwarmContext } from './context.js';
+	import Dot from './swarm-dot.svelte';
+	import Role from './swarm-role.svelte';
+	import { formatSwarmDuration, swarmElapsed, type SwarmAgent } from './swarm.js';
+
+	let {
+		agent,
+		level = 1,
+		open = $bindable(true),
+		active = false,
+		expandable,
+		detail,
+		meta,
+		children,
+		onOpen,
+		onCancel,
+		onToggle,
+		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. */
+		open?: boolean;
+		/** The tree's focused row — holds the seated highlight. */
+		active?: 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.
+		 */
+		expandable?: boolean;
+		/** Expanded body for this agent: its artifacts, transcript, output. */
+		detail?: Snippet<[SwarmAgent]>;
+		/** Trailing row content — a count, a chip, anything the host tracks. */
+		meta?: Snippet<[SwarmAgent]>;
+		/** Nested `Swarm.Node`s. Their presence is what makes the row expandable. */
+		children?: Snippet;
+		/** Overrides the Root's handler for this row. */
+		onOpen?: (agent: SwarmAgent) => void;
+		onCancel?: (agent: SwarmAgent) => void;
+		/** Fired after the row expands or collapses. */
+		onToggle?: (open: boolean) => void;
+	} = $props();
+
+	const ctx = getSwarmContext();
+	const openAgent = $derived(onOpen ?? ctx.onOpen);
+	const cancelAgent = $derived(onCancel ?? ctx.onCancel);
+
+	const canExpand = $derived(expandable ?? (children != null || detail != null));
+	const running = $derived(agent.status === 'running');
+	// Cancel is offered for work that has not landed — a done or failed agent has
+	// nothing left to stop, and showing a dead button on every finished row is
+	// how a long run turns into a wall of noise.
+	const cancellable = $derived(
+		cancelAgent != null &&
+			(agent.status === 'running' || agent.status === 'queued' || agent.status === 'blocked')
+	);
+	// No transcript, no button: `conversationId` is the host's way of saying this
+	// agent has something to open, and a row full of buttons that open nothing is
+	// worse than a row without them.
+	const openable = $derived(openAgent != null && agent.conversationId != null);
+	const hasActions = $derived(cancellable || openable);
+
+	const elapsed = $derived(swarmElapsed(agent, ctx.now));
+
+	function toggle() {
+		if (!canExpand) return;
+		open = !open;
+		onToggle?.(open);
+	}
+
+	/**
+	 * Activation only. Navigation (arrows, Home/End) belongs to `Swarm.Tree`,
+	 * which is the thing that knows the visible row order — and the target check
+	 * is what keeps a child's keystroke from also toggling every ancestor it
+	 * bubbles through.
+	 */
+	function onkeydown(event: KeyboardEvent) {
+		if (event.target !== event.currentTarget) return;
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (openAgent) openAgent(agent);
+			else toggle();
+		} else if (event.key === ' ') {
+			event.preventDefault();
+			toggle();
+		}
+	}
+
+	/**
+	 * The click lands on the treeitem, not on the row inside it: the treeitem is
+	 * the element with the role, the keyboard handler and the focus, and putting
+	 * the pointer on the same element is what keeps those from drifting apart.
+	 * The closest() check is the tree equivalent of the keydown target check — a
+	 * click on a nested row bubbles through every ancestor, and without it
+	 * opening a leaf would collapse its whole lineage on the way up.
+	 */
+	function onclick(event: MouseEvent) {
+		const row = (event.target as HTMLElement | null)?.closest?.('[data-agent-id]');
+		if (row !== event.currentTarget) return;
+		// Safari does not focus a tabindex=-1 element on click; the tree's roving
+		// focus depends on it, so ask for it explicitly.
+		(event.currentTarget as HTMLElement).focus();
+		toggle();
+	}
+</script>
+
+<!-- One agent in the delegation tree.
+     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",
+     which is what stops the arrow from ever disagreeing with the body. -->
+<Collapsible.Root
+	bind:open
+	role="treeitem"
+	aria-level={level}
+	aria-expanded={canExpand ? open : undefined}
+	data-agent-id={agent.id}
+	data-active={active || undefined}
+	tabindex={-1}
+	{onkeydown}
+	{onclick}
+	class={cn('group/node min-w-0 outline-none', className)}
+	{...restProps}
+>
+	<!-- The row. No transition on the highlight: this is a list row, and every
+	     list in the library (select, menu, command, conversations) takes its
+	     highlight instantly so a fast pass down the tree doesn't smear. -->
+	<div
+		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',
+			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}
+			<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"
+			/>
+		{:else}
+			<!-- Keeps every row's dot on the same column, expandable or not. -->
+			<span class="size-(--era-h-xs) shrink-0" aria-hidden="true"></span>
+		{/if}
+
+		<Dot status={agent.status} />
+		<Role role={agent.role ?? 'worker'} label={agent.label} />
+
+		{#if agent.key}
+			<span class="shrink-0 font-mono text-body text-muted">#{agent.key}</span>
+		{/if}
+
+		<!-- The task shimmers while the agent works — the same in-progress
+		     treatment a streaming label gets everywhere else in the suite, and it
+		     freezes to plain text at instant motion. -->
+		<span class={cn('min-w-0 flex-1 truncate', running && 'era-shimmer')}>{agent.task}</span>
+
+		{#if agent.result}
+			<span class="hidden max-w-[45%] min-w-0 truncate text-muted @md:block" title={agent.result}>
+				{agent.result}
+			</span>
+		{/if}
+
+		{@render meta?.(agent)}
+
+		{#if agent.sandbox}
+			<span
+				class={cn('flex shrink-0 items-center', SANDBOX_TONE[agent.sandbox.status] ?? 'text-muted')}
+				title="sandbox {agent.sandbox.id ?? ''} ({agent.sandbox.status})"
+			>
+				<Box class="size-(--era-h-xs)" aria-hidden="true" />
+			</span>
+		{/if}
+
+		{#if elapsed != null}
+			<span class="shrink-0 font-mono text-body text-muted tabular-nums">
+				{formatSwarmDuration(elapsed)}
+			</span>
+		{/if}
+
+		{#if cancellable}
+			<Button
+				icon
+				size="xxs"
+				tone="destructive"
+				aria-label="Cancel {agent.task}"
+				onclick={(event: MouseEvent) => {
+					event.stopPropagation();
+					cancelAgent?.(agent);
+				}}
+			>
+				<X class="size-(--era-h-xs)" />
+			</Button>
+		{/if}
+
+		{#if openable}
+			<Button
+				icon
+				size="xxs"
+				aria-label="Open {agent.task}"
+				onclick={(event: MouseEvent) => {
+					event.stopPropagation();
+					openAgent?.(agent);
+				}}
+			>
+				<PanelRightOpen class="size-(--era-h-xs)" />
+			</Button>
+		{/if}
+	</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. -->
+				<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)}
+				</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>
+	{/if}
+</Collapsible.Root>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import { Collapsible } from 'bits-ui';
+import { type SwarmAgent } from './swarm.js';
+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. */
+    open?: boolean;
+    /** The tree's focused row — holds the seated highlight. */
+    active?: 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.
+     */
+    expandable?: boolean;
+    /** Expanded body for this agent: its artifacts, transcript, output. */
+    detail?: Snippet<[SwarmAgent]>;
+    /** Trailing row content — a count, a chip, anything the host tracks. */
+    meta?: Snippet<[SwarmAgent]>;
+    /** Nested `Swarm.Node`s. Their presence is what makes the row expandable. */
+    children?: Snippet;
+    /** Overrides the Root's handler for this row. */
+    onOpen?: (agent: SwarmAgent) => void;
+    onCancel?: (agent: SwarmAgent) => void;
+    /** Fired after the row expands or collapses. */
+    onToggle?: (open: boolean) => void;
+};
+declare const SwarmNode: import("svelte").Component<$$ComponentProps, {}, "open">;
+type SwarmNode = ReturnType<typeof SwarmNode>;
+export default SwarmNode;

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

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+	import Network from '@lucide/svelte/icons/network';
+	import Bot from '@lucide/svelte/icons/bot';
+	import Eye from '@lucide/svelte/icons/eye';
+	import ShieldCheck from '@lucide/svelte/icons/shield-check';
+	import GitMerge from '@lucide/svelte/icons/git-merge';
+	import type { SwarmRole } from './swarm.js';
+
+	/**
+	 * Role → glyph. A role is a CATEGORY, and categories are read faster as
+	 * shapes than as colour — which also leaves the palette free to mean
+	 * lifecycle and nothing else (see swarm-dot). The orchestrator's fan-out
+	 * glyph is the one that has to be recognisable at a glance in a big tree:
+	 * it is the node whose children are the rest of the swarm.
+	 */
+	export const SWARM_ROLE: Record<SwarmRole, { icon: Component<IconProps>; label: string }> = {
+		orchestrator: { icon: Network, label: 'orchestrator' },
+		worker: { icon: Bot, label: 'worker' },
+		reviewer: { icon: Eye, label: 'reviewer' },
+		verifier: { icon: ShieldCheck, label: 'verifier' },
+		aggregator: { icon: GitMerge, label: 'aggregator' }
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		role = 'worker',
+		label,
+		short = false,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		role?: SwarmRole;
+		/** Specialization shown after the role ("api", "docs") — the agent's `label`. */
+		label?: string;
+		/** Glyph only, with the role kept as the hover/announced name. For dense rows. */
+		short?: boolean;
+	} = $props();
+
+	const spec = $derived(SWARM_ROLE[role]);
+	const Icon = $derived(spec.icon);
+	const name = $derived(label ? `${spec.label} · ${label}` : spec.label);
+</script>
+
+<!-- The role tag: glyph plus an ALL-CAPS name, quiet by default so the task
+     text stays the loudest thing in the row. era-text-trim-caps (not the
+     mixed-case trim) because the string is caps-only — the x-height band is the
+     wrong box for it and would seat the tag high. The orchestrator reads at
+     full foreground: in a tree of forty workers it is the one row you look for. -->
+<span
+	data-role={role}
+	title={name}
+	class={cn(
+		'inline-flex shrink-0 items-center gap-(--era-gap) font-mono text-[0.625rem] era-text-trim-caps tracking-[0.12em] uppercase',
+		role === 'orchestrator' ? 'text-fg' : 'text-muted',
+		className
+	)}
+	{...restProps}
+>
+	<Icon class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{#if short}
+		<span class="sr-only">{name}</span>
+	{:else}
+		{name}
+	{/if}
+</span>

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

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+import type { SwarmRole } from './swarm.js';
+/**
+ * Role → glyph. A role is a CATEGORY, and categories are read faster as
+ * shapes than as colour — which also leaves the palette free to mean
+ * lifecycle and nothing else (see swarm-dot). The orchestrator's fan-out
+ * glyph is the one that has to be recognisable at a glance in a big tree:
+ * it is the node whose children are the rest of the swarm.
+ */
+export declare const SWARM_ROLE: Record<SwarmRole, {
+    icon: Component<IconProps>;
+    label: string;
+}>;
+declare const SwarmRole: any;
+type SwarmRole = ReturnType<typeof SwarmRole>;
+export default SwarmRole;

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { setSwarmContext } from './context.js';
+	import type { SwarmAgent } from './swarm.js';
+
+	let {
+		ref = $bindable(null),
+		now = Date.now(),
+		onOpen,
+		onCancel,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		/** Epoch ms for every elapsed readout. Tick it in `$state` for live counters. */
+		now?: number;
+		/** Open an agent's transcript. Reaches every node without prop drilling. */
+		onOpen?: (agent: SwarmAgent) => void;
+		/** Cancel an agent. Nodes show the affordance only while one is still active. */
+		onCancel?: (agent: SwarmAgent) => void;
+		children?: Snippet;
+	} = $props();
+
+	// Getters, not values: the context is read during child render, so a plain
+	// snapshot would freeze `now` at mount and every counter would stop.
+	setSwarmContext({
+		get now() {
+			return now;
+		},
+		get onOpen() {
+			return onOpen;
+		},
+		get onCancel() {
+			return onCancel;
+		}
+	});
+</script>
+
+<!-- The swarm panel: one surface holding a header, a tree or a card grid, and
+     the stream footer. Level (bg-surface) rather than elevated, because it
+     usually sits INSIDE a message — the thread is the elevated thing, and a
+     swarm reads as a region of it, not a card floating above it. -->
+<div
+	bind:this={ref}
+	class={cn(
+		'flex min-w-0 flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SwarmAgent } from './swarm.js';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    /** Epoch ms for every elapsed readout. Tick it in `$state` for live counters. */
+    now?: number;
+    /** Open an agent's transcript. Reaches every node without prop drilling. */
+    onOpen?: (agent: SwarmAgent) => void;
+    /** Cancel an agent. Nodes show the affordance only while one is still active. */
+    onCancel?: (agent: SwarmAgent) => void;
+    children?: Snippet;
+};
+declare const SwarmRoot: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SwarmRoot = ReturnType<typeof SwarmRoot>;
+export default SwarmRoot;