@signal9/era-ui 4.7.2 → 4.9.0

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

@@ -7,10 +7,11 @@ 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 Barriers } from './swarm-barriers.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 { buildSwarmTree, isSwarmAgentActive, 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

@@ -7,9 +7,10 @@ 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 Barriers } from './swarm-barriers.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';
+export { buildSwarmTree, isSwarmAgentActive, flattenSwarmTree, summarizeSwarm, summarizeBarrier, swarmElapsed, formatSwarmAge, formatSwarmDuration } from './swarm.js';

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

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import { isSwarmAgentActive, type SwarmAgent } from './swarm.js';
+	import type { SwarmContext } from './context.js';
+
+	/**
+	 * Which affordances an agent actually gets, resolved once.
+	 *
+	 * Both the row and the card need the ANSWER before they render — the row pays
+	 * a different trailing inset when it holds buttons — so the decision is a
+	 * function they call, not something each of them re-derives. It used to be
+	 * re-derived, and the two copies had already drifted on which sandbox states
+	 * counted as cancellable.
+	 *
+	 * `null` means "no affordance": no handler, or nothing for it to act on (an
+	 * agent with no transcript has nowhere to open, a landed agent has nothing
+	 * left to stop).
+	 */
+	export function swarmActions(
+		agent: SwarmAgent,
+		ctx: SwarmContext,
+		overrides?: {
+			onOpen?: (agent: SwarmAgent) => void;
+			onCancel?: (agent: SwarmAgent) => void;
+		}
+	): { open: ((agent: SwarmAgent) => void) | null; cancel: ((agent: SwarmAgent) => void) | null } {
+		const open = overrides?.onOpen ?? ctx.onOpen;
+		const cancel = overrides?.onCancel ?? ctx.onCancel;
+		return {
+			open: open && agent.conversationId != null ? open : null,
+			cancel: cancel && isSwarmAgentActive(agent) ? cancel : null
+		};
+	}
+</script>
+
+<script lang="ts">
+	import X from '@lucide/svelte/icons/x';
+	import PanelRightOpen from '@lucide/svelte/icons/panel-right-open';
+	import { Button } from '../../ui/button/index.js';
+
+	let {
+		agent,
+		open = null,
+		cancel = null
+	}: {
+		agent: SwarmAgent;
+		/** Resolved handlers from `swarmActions` — `null` renders no button. */
+		open?: ((agent: SwarmAgent) => void) | null;
+		cancel?: ((agent: SwarmAgent) => void) | null;
+	} = $props();
+</script>
+
+<!-- The two things you can do to one agent, wherever it is drawn.
+     stopPropagation unconditionally: in the tree these sit inside a treeitem
+     whose own click toggles the row, and a button that also collapsed its
+     parent would be a trap. On a card there is nothing above to stop, so one
+     behaviour covers both.
+     The glyphs carry no size class — Button's icon variant sizes them from the
+     tier via [&_svg], and that selector outranks a class here (see
+     button/variants.ts), so one would be inert. -->
+{#if cancel}
+	<Button
+		icon
+		size="xxs"
+		tone="destructive"
+		aria-label="Cancel {agent.task}"
+		onclick={(event: MouseEvent) => {
+			event.stopPropagation();
+			cancel?.(agent);
+		}}
+	>
+		<X />
+	</Button>
+{/if}
+{#if open}
+	<Button
+		icon
+		size="xxs"
+		aria-label="Open {agent.task}"
+		onclick={(event: MouseEvent) => {
+			event.stopPropagation();
+			open?.(agent);
+		}}
+	>
+		<PanelRightOpen />
+	</Button>
+{/if}

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

@@ -0,0 +1,31 @@
+import { type SwarmAgent } from './swarm.js';
+import type { SwarmContext } from './context.js';
+/**
+ * Which affordances an agent actually gets, resolved once.
+ *
+ * Both the row and the card need the ANSWER before they render — the row pays
+ * a different trailing inset when it holds buttons — so the decision is a
+ * function they call, not something each of them re-derives. It used to be
+ * re-derived, and the two copies had already drifted on which sandbox states
+ * counted as cancellable.
+ *
+ * `null` means "no affordance": no handler, or nothing for it to act on (an
+ * agent with no transcript has nowhere to open, a landed agent has nothing
+ * left to stop).
+ */
+export declare function swarmActions(agent: SwarmAgent, ctx: SwarmContext, overrides?: {
+    onOpen?: (agent: SwarmAgent) => void;
+    onCancel?: (agent: SwarmAgent) => void;
+}): {
+    open: ((agent: SwarmAgent) => void) | null;
+    cancel: ((agent: SwarmAgent) => void) | null;
+};
+type $$ComponentProps = {
+    agent: SwarmAgent;
+    /** Resolved handlers from `swarmActions` — `null` renders no button. */
+    open?: ((agent: SwarmAgent) => void) | null;
+    cancel?: ((agent: SwarmAgent) => void) | null;
+};
+declare const SwarmActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmActions = ReturnType<typeof SwarmActions>;
+export default SwarmActions;

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

@@ -1,15 +1,13 @@
 <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 Sandbox from './swarm-sandbox.svelte';
+	import Actions, { swarmActions } from './swarm-actions.svelte';
 	import { formatSwarmDuration, swarmElapsed, type SwarmAgent } from './swarm.js';
 
 	let {
@@ -32,21 +30,17 @@
 	} = $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 actions = $derived(swarmActions(agent, ctx, { onOpen, onCancel }));
 	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.
 
+     The row and the card are two drawings of one agent, so everything that
+     decides WHAT to draw — which affordances it gets, how its VM reads — is
+     shared with the row rather than restated here.
+
      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
@@ -77,22 +71,7 @@
 		{#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}
+		<Actions {agent} open={actions.open} cancel={actions.cancel} />
 	</div>
 
 	<!-- Two lines of task, one of result: enough to tell two workers apart,
@@ -108,20 +87,7 @@
 	{#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>
+				<Sandbox sandbox={agent.sandbox} label />
 			{/if}
 			<span class="flex-1"></span>
 			{#if elapsed != null}

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

@@ -29,14 +29,10 @@
 	{...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">
+		<span class="shrink-0 font-mono text-[0.625rem] tracking-[0.15em] 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}
+		<span class="min-w-0 flex-1 truncate text-bright">{artifact.title ?? ''}</span>
 		{#if age}
 			<span class="shrink-0 font-mono text-body text-muted tabular-nums">{age}</span>
 		{/if}

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

@@ -9,7 +9,6 @@
 	let {
 		artifacts = [],
 		label = 'artifacts',
-		limit,
 		children,
 		class: className,
 		...restProps
@@ -17,14 +16,9 @@
 		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"
@@ -32,11 +26,8 @@
      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)}
+		{#each artifacts 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

@@ -5,8 +5,6 @@ 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]>;
 };

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import Barrier from './swarm-barrier.svelte';
+	import type { SwarmAgent, SwarmBarrier } from './swarm.js';
+
+	let {
+		barriers = [],
+		agents = [],
+		children,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		barriers?: SwarmBarrier[];
+		/** The swarm's agents — each barrier's progress is derived from its members. */
+		agents?: SwarmAgent[];
+		/** Replaces the default `Swarm.Barrier` rendering for each gate. */
+		children?: Snippet<[SwarmBarrier]>;
+	} = $props();
+</script>
+
+<!-- The plural container, so a host does not have to know that the fan-in
+     section is divided off from the tree above it (Artifacts already had one;
+     the asymmetry meant every host re-invented this chrome). Renders nothing
+     when a swarm declares no gates, which most do not. -->
+{#if barriers.length > 0}
+	<div
+		class={cn(
+			'flex min-w-0 flex-col gap-(--era-pad-sm) border-t border-divider-faded p-(--era-pad-sm)',
+			className
+		)}
+		{...restProps}
+	>
+		{#each barriers as barrier (barrier.id)}
+			{#if children}{@render children(barrier)}{:else}<Barrier {barrier} {agents} />{/if}
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SwarmAgent, SwarmBarrier } from './swarm.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    barriers?: SwarmBarrier[];
+    /** The swarm's agents — each barrier's progress is derived from its members. */
+    agents?: SwarmAgent[];
+    /** Replaces the default `Swarm.Barrier` rendering for each gate. */
+    children?: Snippet<[SwarmBarrier]>;
+};
+declare const SwarmBarriers: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmBarriers = ReturnType<typeof SwarmBarriers>;
+export default SwarmBarriers;

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

@@ -8,7 +8,6 @@
 	let {
 		agents = [],
 		counts,
-		sandboxes = true,
 		class: className,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
@@ -16,8 +15,6 @@
 		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));
@@ -43,7 +40,7 @@
 		{#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}
+	{#if tally.sandboxes > 0}
 		<Badge>
 			<Box class="size-(--era-h-xs)" aria-hidden="true" />
 			{tally.sandboxes}

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

@@ -5,8 +5,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     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>;

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

@@ -1,24 +1,31 @@
 <script lang="ts" module>
-	import type { SwarmConnection } from './swarm.js';
+	import type { SwarmAgentStatus, 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.
+	 *
+	 * Borrows the agent dot's vocabulary the same way the header does, so one tone
+	 * system covers every state in the family and the dot itself is drawn once.
 	 */
-	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' }
+	const CONNECTION: Record<
+		SwarmConnection,
+		{ status: SwarmAgentStatus; class: string; label: string; pulse?: boolean }
+	> = {
+		idle: { status: 'queued', class: 'text-muted', label: 'idle' },
+		loading: { status: 'queued', class: 'text-muted', label: 'loading', pulse: true },
+		live: { status: 'done', class: 'text-success', label: 'live' },
+		reconnecting: { status: 'blocked', class: 'text-warning', label: 'reconnecting', pulse: true },
+		error: { status: 'failed', class: 'text-destructive', label: 'disconnected' }
 	};
 </script>
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
+	import Dot from './swarm-dot.svelte';
 
 	let {
 		connection = 'idle',
@@ -49,14 +56,14 @@
 	{...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>
+		<Dot status={tone.status} label={tone.label} class={tone.pulse ? 'animate-pulse' : undefined} />
 		{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}
+	<!-- Always rendered, empty when there is nothing to say: the span is also the
+	     spacer that pushes the watermark to the trailing edge. -->
+	<span class="min-w-0 flex-1 truncate text-destructive" title={error ?? undefined}>
+		{error ?? ''}
+	</span>
 	{#if seq != null && seq >= 0}
 		<span class="shrink-0 text-muted tabular-nums">seq {seq}</span>
 	{/if}

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

@@ -51,11 +51,9 @@
 	{#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}
+	<!-- Always rendered: it is the title AND the spacer that pushes the trailing
+	     group to the edge, so there is no empty-title branch to keep in sync. -->
+	<span class="min-w-0 flex-1 truncate text-bright">{title ?? ''}</span>
 	{#if children}
 		<div class="flex shrink-0 items-center gap-(--era-gap)">
 			{@render children()}

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

@@ -1,24 +1,13 @@
-<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 Sandbox from './swarm-sandbox.svelte';
+	import Actions, { swarmActions } from './swarm-actions.svelte';
 	import { formatSwarmDuration, swarmElapsed, type SwarmAgent } from './swarm.js';
 
 	let {
@@ -63,24 +52,11 @@
 	} = $props();
 
 	const ctx = getSwarmContext();
-	const openAgent = $derived(onOpen ?? ctx.onOpen);
-	const cancelAgent = $derived(onCancel ?? ctx.onCancel);
+	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));
 	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() {
@@ -99,7 +75,7 @@
 		if (event.target !== event.currentTarget) return;
 		if (event.key === 'Enter') {
 			event.preventDefault();
-			if (openAgent) openAgent(agent);
+			if (actions.open) actions.open(agent);
 			else toggle();
 		} else if (event.key === ' ') {
 			event.preventDefault();
@@ -137,7 +113,7 @@
 	aria-expanded={canExpand ? open : undefined}
 	data-agent-id={agent.id}
 	data-active={active || undefined}
-	tabindex={-1}
+	tabindex={active ? 0 : -1}
 	{onkeydown}
 	{onclick}
 	class={cn('group/node min-w-0 outline-none', className)}
@@ -188,12 +164,7 @@
 		{@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>
+			<Sandbox sandbox={agent.sandbox} />
 		{/if}
 
 		{#if elapsed != null}
@@ -202,34 +173,7 @@
 			</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}
+		<Actions {agent} open={actions.open} cancel={actions.cancel} />
 	</div>
 
 	{#if canExpand}

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

@@ -31,15 +31,12 @@
 	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]);
@@ -56,16 +53,12 @@
 	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',
+		'inline-flex shrink-0 items-center gap-(--era-gap) font-mono text-[0.625rem] era-text-trim-caps tracking-[0.15em] 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}
+	{name}
 </span>