@signal9/era-ui 4.6.0 → 4.7.0

package/dist/ai/error-panel/error-panel.svelte

@@ -92,39 +92,10 @@
 	{/if}
 
 	{#if showDetail}
-		<Collapsible.Content data-era-error-detail class="overflow-hidden">
+		<Collapsible.Content class="era-collapse">
 			<div class="pt-(--era-gap)">
 				<CodeBlock code={rawDetail} />
 			</div>
 		</Collapsible.Content>
 	{/if}
 </Collapsible.Root>
-
-<style>
-	:global([data-era-error-detail][data-state='open']) {
-		animation: era-error-expand var(--era-duration) var(--era-ease);
-	}
-	:global([data-era-error-detail][data-state='closed']) {
-		animation: era-error-collapse var(--era-duration) var(--era-ease);
-	}
-	@keyframes -global-era-error-expand {
-		from {
-			height: 0;
-			opacity: 0;
-		}
-		to {
-			height: var(--bits-collapsible-content-height);
-			opacity: 1;
-		}
-	}
-	@keyframes -global-era-error-collapse {
-		from {
-			height: var(--bits-collapsible-content-height);
-			opacity: 1;
-		}
-		to {
-			height: 0;
-			opacity: 0;
-		}
-	}
-</style>

package/dist/ai/index.d.ts

@@ -17,6 +17,7 @@ export * as StructuredValue from './structured-value/index.js';
 export * as RuntimeFeed from './runtime-feed/index.js';
 export * as ErrorPanel from './error-panel/index.js';
 export * as RunStatus from './run-status/index.js';
+export * as Swarm from './swarm/index.js';
 export { Response, repairStreamingMarkdown } from './response/index.js';
 export { default as ContextGauge } from './context/context.svelte';
 export { default as ModelSelector } from './model-selector/model-selector.svelte';

package/dist/ai/index.js

@@ -22,6 +22,7 @@ export * as StructuredValue from './structured-value/index.js';
 export * as RuntimeFeed from './runtime-feed/index.js';
 export * as ErrorPanel from './error-panel/index.js';
 export * as RunStatus from './run-status/index.js';
+export * as Swarm from './swarm/index.js';
 export { Response, repairStreamingMarkdown } from './response/index.js';
 export { default as ContextGauge } from './context/context.svelte';
 export { default as ModelSelector } from './model-selector/model-selector.svelte';

package/dist/ai/runtime-feed/runtime-feed-item.svelte

@@ -54,7 +54,10 @@
 	class={cn('flex items-center gap-(--era-gap) text-body', TONE[tone], className)}
 	{...restProps}
 >
-	<span class="size-(--era-h-xxs) shrink-0 rounded-full bg-current" aria-hidden="true"></span>
+	<!-- size-2, the library's dot size (conversations row, run status, swarm) —
+	     NOT a tier height: h-xxs is the pill tier (18-26px), which rendered this
+	     as a bullet taller than the line it marks. -->
+	<span class="size-2 shrink-0 rounded-full bg-current" aria-hidden="true"></span>
 	<span class="min-w-0 flex-1 truncate">
 		{#if children}{@render children()}{:else}{text}{/if}
 	</span>

package/dist/ai/swarm/context.d.ts

@@ -0,0 +1,26 @@
+import type { SwarmAgent } from './swarm.js';
+/**
+ * What `Swarm.Root` shares with every part below it.
+ *
+ * The two callbacks are here rather than on the parts because a swarm is a
+ * TREE: a node six levels down would otherwise have to be handed the same
+ * `onOpen` through six intermediaries, and the recursion is generated by the
+ * Tree, not written by the consumer, so there is nowhere to thread it. Any part
+ * may still take its own handler and win over the context.
+ */
+export interface SwarmContext {
+    /**
+     * Epoch ms every elapsed readout measures against.
+     *
+     * The library never reads the clock itself — same input, same render (which
+     * is what makes it testable and SSR-safe). A host that ticks this in `$state`
+     * gets live counters on running agents for free.
+     */
+    readonly now: number;
+    /** Open an agent's own transcript. Omitted = no open affordance. */
+    readonly onOpen?: (agent: SwarmAgent) => void;
+    /** Cancel an agent (the host decides whether that means its subtree too). */
+    readonly onCancel?: (agent: SwarmAgent) => void;
+}
+export declare function setSwarmContext(ctx: SwarmContext): void;
+export declare function getSwarmContext(): SwarmContext;

package/dist/ai/swarm/context.js

@@ -0,0 +1,14 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('era-swarm');
+/** Standalone parts (a `Swarm.Agent` card outside a Root) still need a clock. */
+const FALLBACK = {
+    get now() {
+        return Date.now();
+    }
+};
+export function setSwarmContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getSwarmContext() {
+    return getContext(KEY) ?? FALLBACK;
+}

package/dist/ai/swarm/index.d.ts

@@ -0,0 +1,16 @@
+export { default as Root } from './swarm-root.svelte';
+export { default as Header } from './swarm-header.svelte';
+export { default as Counts } from './swarm-counts.svelte';
+export { default as Tree } from './swarm-tree.svelte';
+export { default as Node } from './swarm-node.svelte';
+export { default as Grid } from './swarm-grid.svelte';
+export { default as Agent } from './swarm-agent.svelte';
+export { default as Artifacts } from './swarm-artifacts.svelte';
+export { default as Artifact } from './swarm-artifact.svelte';
+export { default as Barrier } from './swarm-barrier.svelte';
+export { default as Footer } from './swarm-footer.svelte';
+export { default as Dot, SWARM_DOT } from './swarm-dot.svelte';
+export { default as Role, SWARM_ROLE } from './swarm-role.svelte';
+export { SwarmController } from './swarm.svelte.js';
+export { buildSwarmTree, flattenSwarmTree, summarizeSwarm, summarizeBarrier, swarmElapsed, formatSwarmAge, formatSwarmDuration, type SwarmAgent, type SwarmAgentStatus, type SwarmArtifact, type SwarmBarrier, type SwarmBarrierStatus, type SwarmConnection, type SwarmCounts, type SwarmEvent, type SwarmNode, type SwarmPlan, type SwarmPlanStatus, type SwarmRole, type SwarmSandbox, type SwarmSnapshot } from './swarm.js';
+export type { SwarmContext } from './context.js';

package/dist/ai/swarm/index.js

@@ -0,0 +1,15 @@
+export { default as Root } from './swarm-root.svelte';
+export { default as Header } from './swarm-header.svelte';
+export { default as Counts } from './swarm-counts.svelte';
+export { default as Tree } from './swarm-tree.svelte';
+export { default as Node } from './swarm-node.svelte';
+export { default as Grid } from './swarm-grid.svelte';
+export { default as Agent } from './swarm-agent.svelte';
+export { default as Artifacts } from './swarm-artifacts.svelte';
+export { default as Artifact } from './swarm-artifact.svelte';
+export { default as Barrier } from './swarm-barrier.svelte';
+export { default as Footer } from './swarm-footer.svelte';
+export { default as Dot, SWARM_DOT } from './swarm-dot.svelte';
+export { default as Role, SWARM_ROLE } from './swarm-role.svelte';
+export { SwarmController } from './swarm.svelte.js';
+export { buildSwarmTree, flattenSwarmTree, summarizeSwarm, summarizeBarrier, swarmElapsed, formatSwarmAge, formatSwarmDuration } from './swarm.js';

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

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	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 { Card } from '../../ui/card/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,
+		depth,
+		children,
+		onOpen,
+		onCancel,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		agent: SwarmAgent;
+		/** Distance from the root, shown as a `d2` tag. `buildSwarmTree` computes it. */
+		depth?: number;
+		/** Extra card body under the result — a chip row, a mini feed. */
+		children?: Snippet<[SwarmAgent]>;
+		/** Override the Root's handlers for this card. */
+		onOpen?: (agent: SwarmAgent) => void;
+		onCancel?: (agent: SwarmAgent) => void;
+	} = $props();
+
+	const ctx = getSwarmContext();
+	const openAgent = $derived(onOpen ?? ctx.onOpen);
+	const cancelAgent = $derived(onCancel ?? ctx.onCancel);
+	const cancellable = $derived(
+		cancelAgent != null &&
+			(agent.status === 'running' || agent.status === 'queued' || agent.status === 'blocked')
+	);
+	// See `Swarm.Node`: the open affordance is gated on the agent actually having
+	// a transcript to open.
+	const openable = $derived(openAgent != null && agent.conversationId != null);
+	const elapsed = $derived(swarmElapsed(agent, ctx.now));
+</script>
+
+<!-- One agent as a card, for the console grid — the same agent the tree renders
+     as a row, sized for scanning forty of them at once.
+
+     A well, not an elevated card: the grid sits INSIDE the swarm panel, and on
+     the flat surface `elevated` resolves to the same fill the panel already has
+     — forty invisible boxes. The recessed tier is the one that reads as content
+     put into a container on every surface.
+
+     The status dot and the sandbox chip stay SEPARATE signals: an agent can be
+     running with a terminated VM (reaped, or never created), and collapsing the
+     two into one indicator hides precisely the state you opened a console to
+     find. A failure rings the whole card, because in a grid of forty the one
+     that broke has to be findable without reading any of them. -->
+<Card
+	tone="well"
+	data-status={agent.status}
+	class={cn(
+		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)',
+		agent.status === 'failed' && 'outline -outline-offset-1 outline-destructive/60',
+		className
+	)}
+	{...restProps}
+>
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+		<Dot status={agent.status} />
+		<Role role={agent.role ?? 'worker'} label={agent.label} class="min-w-0" />
+		{#if agent.key}
+			<span class="shrink-0 font-mono text-body text-muted">#{agent.key}</span>
+		{/if}
+		<span class="flex-1"></span>
+		{#if depth != null}
+			<span class="shrink-0 font-mono text-[0.625rem] text-muted tabular-nums">d{depth}</span>
+		{/if}
+		{#if cancellable}
+			<Button
+				icon
+				size="xxs"
+				tone="destructive"
+				aria-label="Cancel {agent.task}"
+				onclick={() => cancelAgent?.(agent)}
+			>
+				<X class="size-(--era-h-xs)" />
+			</Button>
+		{/if}
+		{#if openable}
+			<Button icon size="xxs" aria-label="Open {agent.task}" onclick={() => openAgent?.(agent)}>
+				<PanelRightOpen class="size-(--era-h-xs)" />
+			</Button>
+		{/if}
+	</div>
+
+	<!-- Two lines of task, one of result: enough to tell two workers apart,
+	     bounded so one verbose subtask can't make its card twice the height of
+	     its neighbours and shred the grid. -->
+	<span class="line-clamp-2 text-body text-fg" title={agent.task}>{agent.task}</span>
+	{#if agent.result}
+		<span class="line-clamp-1 text-body text-muted" title={agent.result}>{agent.result}</span>
+	{/if}
+
+	{@render children?.(agent)}
+
+	{#if agent.sandbox || elapsed != null}
+		<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim text-muted">
+			{#if agent.sandbox}
+				<span
+					class="flex min-w-0 items-center gap-(--era-gap) font-mono"
+					title="sandbox {agent.sandbox.id ?? ''}"
+				>
+					<Box
+						class={cn(
+							'size-(--era-h-xs) shrink-0',
+							agent.sandbox.status === 'running' && 'text-success',
+							agent.sandbox.status === 'paused' && 'text-warning'
+						)}
+						aria-hidden="true"
+					/>
+					<span class="truncate">{agent.sandbox.status}</span>
+				</span>
+			{/if}
+			<span class="flex-1"></span>
+			{#if elapsed != null}
+				<span class="shrink-0 font-mono tabular-nums">{formatSwarmDuration(elapsed)}</span>
+			{/if}
+		</div>
+	{/if}
+</Card>

package/dist/ai/swarm/swarm-agent.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 = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    agent: SwarmAgent;
+    /** Distance from the root, shown as a `d2` tag. `buildSwarmTree` computes it. */
+    depth?: number;
+    /** Extra card body under the result — a chip row, a mini feed. */
+    children?: Snippet<[SwarmAgent]>;
+    /** Override the Root's handlers for this card. */
+    onOpen?: (agent: SwarmAgent) => void;
+    onCancel?: (agent: SwarmAgent) => void;
+};
+declare const SwarmAgent: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmAgent = ReturnType<typeof SwarmAgent>;
+export default SwarmAgent;

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Card } from '../../ui/card/index.js';
+	import { cn } from '../../utils/index.js';
+	import { getSwarmContext } from './context.js';
+	import { formatSwarmAge, type SwarmArtifact } from './swarm.js';
+
+	let {
+		artifact,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		artifact: SwarmArtifact;
+	} = $props();
+
+	const ctx = getSwarmContext();
+	const age = $derived(
+		artifact.createdAt != null ? formatSwarmAge(artifact.createdAt, ctx.now) : null
+	);
+</script>
+
+<!-- What a branch actually produced: the merged finding, the report, the diff.
+     A well (recessed) rather than a card: an artifact is payload the swarm put
+     INTO the panel, the same tier a tool's output pane uses. -->
+<Card
+	tone="well"
+	data-kind={artifact.kind}
+	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)', className)}
+	{...restProps}
+>
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+		<span class="shrink-0 font-mono text-[0.625rem] tracking-[0.12em] text-muted uppercase">
+			{artifact.kind}
+		</span>
+		{#if artifact.title}
+			<span class="min-w-0 flex-1 truncate text-bright">{artifact.title}</span>
+		{:else}
+			<span class="flex-1"></span>
+		{/if}
+		{#if age}
+			<span class="shrink-0 font-mono text-body text-muted tabular-nums">{age}</span>
+		{/if}
+	</div>
+	<p class="text-body leading-relaxed text-muted">{artifact.summary}</p>
+</Card>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SwarmArtifact } from './swarm.js';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    artifact: SwarmArtifact;
+};
+declare const SwarmArtifact: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmArtifact = ReturnType<typeof SwarmArtifact>;
+export default SwarmArtifact;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+	import Artifact from './swarm-artifact.svelte';
+	import type { SwarmArtifact } from './swarm.js';
+
+	let {
+		artifacts = [],
+		label = 'artifacts',
+		limit,
+		children,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		artifacts?: SwarmArtifact[];
+		/** Section heading. Set to `undefined` for a bare list. */
+		label?: string;
+		/** Show at most this many, newest first by position. Omit for all of them. */
+		limit?: number;
+		/** Replaces the default `Swarm.Artifact` rendering for each item. */
+		children?: Snippet<[SwarmArtifact]>;
+	} = $props();
+
+	const shown = $derived(limit == null ? artifacts : artifacts.slice(0, limit));
+	const hidden = $derived(artifacts.length - shown.length);
+</script>
+
+<!-- Renders nothing at all when there is nothing to show: an empty "ARTIFACTS"
+     heading over blank space is worse than silence, and this sits inside rows
+     that are mostly empty until a branch lands. -->
+{#if artifacts.length > 0}
+	<Step.Section {label} class={cn('min-w-0', className)} {...restProps}>
+		{#each shown as artifact (artifact.id)}
+			{#if children}{@render children(artifact)}{:else}<Artifact {artifact} />{/if}
+		{/each}
+		{#if hidden > 0}
+			<span class="text-body text-muted">+{hidden} more</span>
+		{/if}
+	</Step.Section>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SwarmArtifact } from './swarm.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    artifacts?: SwarmArtifact[];
+    /** Section heading. Set to `undefined` for a bare list. */
+    label?: string;
+    /** Show at most this many, newest first by position. Omit for all of them. */
+    limit?: number;
+    /** Replaces the default `Swarm.Artifact` rendering for each item. */
+    children?: Snippet<[SwarmArtifact]>;
+};
+declare const SwarmArtifacts: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmArtifacts = ReturnType<typeof SwarmArtifacts>;
+export default SwarmArtifacts;

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

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	import type { SwarmBarrierStatus } from './swarm.js';
+
+	const BARRIER_TONE: Record<SwarmBarrierStatus, 'default' | 'success' | 'destructive'> = {
+		open: 'default',
+		done: 'success',
+		failed: 'destructive',
+		cancelled: 'default'
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import GitMerge from '@lucide/svelte/icons/git-merge';
+	import { Badge } from '../../ui/badge/index.js';
+	import { Progress } from '../../ui/progress/index.js';
+	import { cn } from '../../utils/index.js';
+	import { summarizeBarrier, type SwarmAgent, type SwarmBarrier } from './swarm.js';
+
+	let {
+		barrier,
+		agents = [],
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		barrier: SwarmBarrier;
+		/** The swarm's agents — members are the ones pointing at this barrier. */
+		agents?: SwarmAgent[];
+	} = $props();
+
+	const state = $derived(summarizeBarrier(barrier, agents));
+</script>
+
+<!-- A fan-in gate: the point where parallel branches have to rejoin before the
+     run can move on. It is rendered as PROGRESS rather than as a status word
+     because the only question anyone asks of a barrier is "how much longer",
+     and 3/5 answers it where "open" does not. -->
+<div
+	data-status={state.status}
+	class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)}
+	{...restProps}
+>
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+		<GitMerge class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+		<span class="min-w-0 flex-1 truncate text-fg">{barrier.title}</span>
+		{#if barrier.key}
+			<span class="shrink-0 font-mono text-body text-muted">#{barrier.key}</span>
+		{/if}
+		{#if state.failed > 0}
+			<Badge tone="destructive">{state.failed} failed</Badge>
+		{/if}
+		<Badge tone={BARRIER_TONE[state.status]}>
+			{state.done}/{state.total}
+		</Badge>
+	</div>
+	{#if state.total > 0}
+		<Progress
+			value={state.done}
+			max={state.total}
+			aria-label="{barrier.title} — {state.done} of {state.total} agents done"
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SwarmAgent, type SwarmBarrier } from './swarm.js';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    barrier: SwarmBarrier;
+    /** The swarm's agents — members are the ones pointing at this barrier. */
+    agents?: SwarmAgent[];
+};
+declare const SwarmBarrier: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmBarrier = ReturnType<typeof SwarmBarrier>;
+export default SwarmBarrier;

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Box from '@lucide/svelte/icons/box';
+	import { Badge } from '../../ui/badge/index.js';
+	import { cn } from '../../utils/index.js';
+	import { summarizeSwarm, type SwarmAgent, type SwarmCounts } from './swarm.js';
+
+	let {
+		agents = [],
+		counts,
+		sandboxes = true,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** The swarm's agents — counted here so the caller never tallies by hand. */
+		agents?: SwarmAgent[];
+		/** Pre-computed counts (a controller's `counts`), used instead of `agents`. */
+		counts?: SwarmCounts;
+		/** Show the live-VM tally. Off for swarms that do not run sandboxes. */
+		sandboxes?: boolean;
+	} = $props();
+
+	const tally = $derived(counts ?? summarizeSwarm(agents));
+	// blocked and queued are two different waits (see SwarmAgentStatus) but they
+	// are one number to someone reading the header: work that has not started.
+	const waiting = $derived(tally.blocked + tally.queued);
+	// Nothing to report is itself worth reporting — a just-created swarm with no
+	// agents should read "0 agents", not render an empty strip.
+	const quiet = $derived(
+		tally.running === 0 && waiting === 0 && tally.done === 0 && tally.failed === 0
+	);
+</script>
+
+<!-- Live tally. Each badge appears only while its number is non-zero, so the
+     strip shrinks as a run lands instead of trailing a row of zeroes — and the
+     one that matters (failures) is never hidden behind the ones that don't. -->
+<div class={cn('flex shrink-0 items-center gap-(--era-gap)', className)} {...restProps}>
+	{#if quiet}
+		<Badge>{tally.total} agents</Badge>
+	{:else}
+		{#if tally.running > 0}<Badge tone="accent">{tally.running} running</Badge>{/if}
+		{#if waiting > 0}<Badge>{waiting} waiting</Badge>{/if}
+		{#if tally.done > 0}<Badge tone="success">{tally.done} done</Badge>{/if}
+		{#if tally.failed > 0}<Badge tone="destructive">{tally.failed} failed</Badge>{/if}
+	{/if}
+	{#if sandboxes && tally.sandboxes > 0}
+		<Badge>
+			<Box class="size-(--era-h-xs)" aria-hidden="true" />
+			{tally.sandboxes}
+		</Badge>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SwarmAgent, type SwarmCounts } from './swarm.js';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** The swarm's agents — counted here so the caller never tallies by hand. */
+    agents?: SwarmAgent[];
+    /** Pre-computed counts (a controller's `counts`), used instead of `agents`. */
+    counts?: SwarmCounts;
+    /** Show the live-VM tally. Off for swarms that do not run sandboxes. */
+    sandboxes?: boolean;
+};
+declare const SwarmCounts: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmCounts = ReturnType<typeof SwarmCounts>;
+export default SwarmCounts;

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

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import type { SwarmAgentStatus } from './swarm.js';
+
+	/**
+	 * Status → tone. Colour is reserved for LIFECYCLE across the whole family
+	 * (a role is a category, and categories get glyphs, not hues), so this map is
+	 * the single place any part says what a state looks like.
+	 *
+	 * `running` pulses, which is the one animation here — it rides the pulse
+	 * keyframes, so `prefers-reduced-motion` and data-motion="instant" settle it
+	 * to a solid dot rather than leaving a strobe in a 40-agent grid.
+	 */
+	export const SWARM_DOT: Record<SwarmAgentStatus, { class: string; label: string }> = {
+		blocked: { class: 'bg-warning', label: 'Blocked' },
+		queued: { class: 'bg-muted', label: 'Queued' },
+		running: { class: 'bg-primary animate-pulse', label: 'Running' },
+		done: { class: 'bg-success', label: 'Done' },
+		failed: { class: 'bg-destructive', label: 'Failed' },
+		cancelled: { class: 'bg-muted opacity-50', label: 'Cancelled' }
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		status,
+		label,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		status: SwarmAgentStatus;
+		/** Overrides the announced/hover word (defaults to the status). */
+		label?: string;
+	} = $props();
+
+	const tone = $derived(SWARM_DOT[status]);
+</script>
+
+<!-- role="img" rather than aria-hidden: in a swarm the dot is not decoration
+     next to a spelled-out state, it IS the state, and a card that only paints
+     it says nothing to a screen reader. The name also flows into the enclosing
+     treeitem's name-from-contents, so a tree row announces its status too. -->
+<span
+	role="img"
+	aria-label={label ?? tone.label}
+	title={label ?? tone.label}
+	data-status={status}
+	class={cn('size-2 shrink-0 rounded-full', tone.class, className)}
+	{...restProps}
+></span>

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

@@ -0,0 +1,23 @@
+import type { SwarmAgentStatus } from './swarm.js';
+/**
+ * Status → tone. Colour is reserved for LIFECYCLE across the whole family
+ * (a role is a category, and categories get glyphs, not hues), so this map is
+ * the single place any part says what a state looks like.
+ *
+ * `running` pulses, which is the one animation here — it rides the pulse
+ * keyframes, so `prefers-reduced-motion` and data-motion="instant" settle it
+ * to a solid dot rather than leaving a strobe in a 40-agent grid.
+ */
+export declare const SWARM_DOT: Record<SwarmAgentStatus, {
+    class: string;
+    label: string;
+}>;
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    status: SwarmAgentStatus;
+    /** Overrides the announced/hover word (defaults to the status). */
+    label?: string;
+};
+declare const SwarmDot: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmDot = ReturnType<typeof SwarmDot>;
+export default SwarmDot;