@signal9/era-ui 4.6.0 → 4.7.0

package/dist/ai/swarm/swarm.svelte.js

@@ -0,0 +1,125 @@
+/**
+ * The live half of the swarm model: one reconnectable, reactive view of a run.
+ *
+ * The shapes and the pure projections live next door in `swarm.ts` — everything
+ * here is state, so this is the only file in the family that needs runes (and
+ * the only one a host has to construct). See that module for the model itself
+ * and for why the sequence number is the whole resumption contract.
+ */
+import { buildSwarmTree, summarizeSwarm } from './swarm.js';
+/**
+ * Merge an agent patch over what is already known.
+ *
+ * Keys the patch omits keep their previous value — the wire carries patches,
+ * not replacements. `sandbox` is the case that proves the rule: a status change
+ * event that omitted the VM would blank the sandbox chip on every transition,
+ * so "absent" has to mean "unchanged" (pass `null` to say "has none").
+ */
+function mergeAgent(prev, next) {
+    if (!prev)
+        return next;
+    const patch = Object.fromEntries(Object.entries(next).filter(([, value]) => value !== undefined));
+    return { ...prev, ...patch };
+}
+function upsert(list, item) {
+    const index = list.findIndex((existing) => existing.id === item.id);
+    if (index < 0)
+        return [...list, item];
+    const next = [...list];
+    next[index] = { ...next[index], ...item };
+    return next;
+}
+/**
+ * A reconnectable view of one swarm.
+ *
+ * Backend-free by design: the host does the fetching and the socket handling and
+ * hands the results here. A typical wiring is
+ *
+ * ```ts
+ * const swarm = new SwarmController();
+ * swarm.connection = 'loading';
+ * swarm.snapshot(await api.swarmSnapshot(id));       // sets the watermark
+ * swarm.connection = 'live';
+ * for await (const event of api.swarmStream(id, swarm.seq)) swarm.apply(event);
+ * ```
+ *
+ * and the retry path is the same three lines — re-snapshot (never rewinding the
+ * watermark), then subscribe from `seq` again. Everything the components need
+ * (`tree`, `counts`) is derived, so nothing has to be recomputed by hand.
+ */
+export class SwarmController {
+    agents = $state([]);
+    plan = $state(null);
+    barriers = $state([]);
+    artifacts = $state([]);
+    /** Stream health, for `Swarm.Footer`. The host sets it; nothing here does. */
+    connection = $state('idle');
+    /** Last transport error, shown beside the watermark. */
+    error = $state(null);
+    /** The watermark: the last APPLIED event seq, and the resume point. */
+    seq = $state(-1);
+    constructor(snapshot) {
+        if (snapshot)
+            this.snapshot(snapshot);
+    }
+    tree = $derived(buildSwarmTree(this.agents));
+    counts = $derived(summarizeSwarm(this.agents));
+    /**
+     * Merge a snapshot in.
+     *
+     * The watermark only ever moves FORWARD: a refresh taken while live events
+     * are already flowing is older than the view it is refreshing, and rewinding
+     * to its seq would replay every event since.
+     */
+    snapshot(snapshot) {
+        if (snapshot.plan !== undefined)
+            this.plan = snapshot.plan;
+        for (const agent of snapshot.agents ?? [])
+            this.#mergeAgent(agent);
+        for (const barrier of snapshot.barriers ?? [])
+            this.barriers = upsert(this.barriers, barrier);
+        for (const artifact of snapshot.artifacts ?? [])
+            this.artifacts = upsert(this.artifacts, artifact);
+        if (snapshot.seq != null && snapshot.seq > this.seq)
+            this.seq = snapshot.seq;
+    }
+    /**
+     * Apply one event. Returns false when it was already applied — a backfill
+     * that overlaps what the snapshot already covered is a no-op, not a
+     * double-apply, which is what lets the resume path be careless about overlap.
+     */
+    apply(event) {
+        if (event.seq <= this.seq)
+            return false;
+        if (event.agent)
+            this.#mergeAgent(event.agent);
+        if (event.plan)
+            this.plan = event.plan;
+        if (event.barrier)
+            this.barriers = upsert(this.barriers, event.barrier);
+        if (event.artifact)
+            this.artifacts = upsert(this.artifacts, event.artifact);
+        this.seq = event.seq;
+        return true;
+    }
+    /** Drop everything — switching to a different swarm, not reconnecting to this one. */
+    reset() {
+        this.agents = [];
+        this.plan = null;
+        this.barriers = [];
+        this.artifacts = [];
+        this.connection = 'idle';
+        this.error = null;
+        this.seq = -1;
+    }
+    #mergeAgent(agent) {
+        const index = this.agents.findIndex((existing) => existing.id === agent.id);
+        if (index < 0) {
+            this.agents = [...this.agents, agent];
+            return;
+        }
+        const next = [...this.agents];
+        next[index] = mergeAgent(next[index], agent);
+        this.agents = next;
+    }
+}

package/dist/apps/llm-shell/index.d.ts

@@ -1,2 +1,2 @@
 export { default as LlmShell } from './llm-shell.svelte';
-export type { LlmBlock, LlmConversation, LlmMessage, LlmToolChip, LlmUsage } from './types.js';
+export type { LlmBlock, LlmConversation, LlmMessage, LlmSwarm, LlmToolChip, LlmUsage } from './types.js';

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

@@ -45,6 +45,8 @@
 		onNewChat,
 		onDelete,
 		onStop,
+		onOpenAgent,
+		onCancelAgent,
 		empty,
 		class: className
 	}: {
@@ -62,6 +64,13 @@
 		onNewChat?: () => void;
 		onDelete?: (id: string) => void;
 		onStop?: () => void;
+		/**
+		 * Open a swarm agent's own transcript. Without it a swarm renders read-only
+		 * — the button appears on agents that carry a `conversationId`.
+		 */
+		onOpenAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+		/** Cancel a swarm agent. Offered only while the agent has work left to stop. */
+		onCancelAgent?: (agent: AI.Swarm.SwarmAgent) => void;
 		/** Replaces the built-in empty state for a conversation with no messages. */
 		empty?: Snippet;
 		class?: string;
@@ -70,6 +79,18 @@
 	const active = $derived(conversations.find((c) => c.id === activeId) ?? conversations[0]);
 	const groups = $derived(AI.Conversations.bucketConversations(conversations, now));
 
+	// Swarm agents still in flight, across every swarm block in the open thread.
+	// The run strip is about THIS conversation's work, and a delegated run is the
+	// part of it least visible in the transcript — it happens inside one block.
+	const swarmActive = $derived(
+		AI.Swarm.summarizeSwarm(
+			(active?.messages ?? [])
+				.flatMap((message) => message.blocks ?? [])
+				.filter((block) => block.kind === 'swarm')
+				.flatMap((block) => block.swarm.agents)
+		).active
+	);
+
 	// One open chip per row is plenty — the expansion area is shared, so tracking
 	// more than the current index would render two bodies into one slot.
 	let openChip = $state<string | null>(null);
@@ -122,9 +143,15 @@
 						total: 1,
 						running: runStatus === 'running' ? 0 : 1
 					}}
+					agents={swarmActive || undefined}
 					latest={{
 						tone: 'muted',
-						text: runStatus === 'running' ? 'streaming response…' : 'thinking…'
+						text:
+							swarmActive > 0
+								? `${swarmActive} agents working…`
+								: runStatus === 'running'
+									? 'streaming response…'
+									: 'thinking…'
 					}}
 					oncancel={() => onStop?.()}
 				/>
@@ -249,6 +276,43 @@
 				/>
 			</AI.Tool.Content>
 		</AI.Tool.Root>
+	{:else if block.kind === 'swarm'}
+		<!-- A delegated run, inline in the turn that started it. The tree keeps the
+		     delegation shape (who asked whom, what is still open); `view="grid"`
+		     turns the same agents into the console layout for a wide pane.
+		     Everything reads off block.swarm, so a live SwarmController streams
+		     straight into it — the app never copies swarm state around. -->
+		{@const swarm = block.swarm}
+		{@const artifactsFor = (agent: AI.Swarm.SwarmAgent) =>
+			(swarm.artifacts ?? []).filter((a) => a.agentId === agent.id)}
+		<AI.Swarm.Root {now} onOpen={onOpenAgent} onCancel={onCancelAgent}>
+			<AI.Swarm.Header title={swarm.plan?.title} status={swarm.plan?.status}>
+				<AI.Swarm.Counts agents={swarm.agents} />
+			</AI.Swarm.Header>
+
+			{#if block.view === 'grid'}
+				<AI.Swarm.Grid agents={swarm.agents} />
+			{:else}
+				<AI.Swarm.Tree agents={swarm.agents} expandable={(agent) => artifactsFor(agent).length > 0}>
+					{#snippet detail(agent)}
+						<AI.Swarm.Artifacts artifacts={artifactsFor(agent)} />
+					{/snippet}
+				</AI.Swarm.Tree>
+			{/if}
+
+			{#if (swarm.barriers ?? []).length > 0}
+				<!-- Fan-in gates last: they are what the branches above are waiting on. -->
+				<div
+					class="flex flex-col gap-(--era-pad-sm) border-t border-divider-faded p-(--era-pad-sm)"
+				>
+					{#each swarm.barriers ?? [] as barrier (barrier.id)}
+						<AI.Swarm.Barrier {barrier} agents={swarm.agents} />
+					{/each}
+				</div>
+			{/if}
+
+			<AI.Swarm.Footer connection={swarm.connection} seq={swarm.seq} />
+		</AI.Swarm.Root>
 	{:else if block.kind === 'approval'}
 		<AI.Confirmation.Root state={approvalState}>
 			Approve <span class="font-mono text-fg">{block.toolName}</span>? Review the arguments before

package/dist/apps/llm-shell/llm-shell.svelte.d.ts

@@ -35,6 +35,13 @@ type $$ComponentProps = {
     onNewChat?: () => void;
     onDelete?: (id: string) => void;
     onStop?: () => void;
+    /**
+     * Open a swarm agent's own transcript. Without it a swarm renders read-only
+     * — the button appears on agents that carry a `conversationId`.
+     */
+    onOpenAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+    /** Cancel a swarm agent. Offered only while the agent has work left to stop. */
+    onCancelAgent?: (agent: AI.Swarm.SwarmAgent) => void;
     /** Replaces the built-in empty state for a conversation with no messages. */
     empty?: Snippet;
     class?: string;

package/dist/apps/llm-shell/types.d.ts

@@ -3,6 +3,7 @@ import type { IconProps } from '@lucide/svelte';
 import type { ChatStatus, ConversationStatus, RunState, ToolState, UsageBreakdown } from '../../ai/index.js';
 import type { ApprovalController } from '../../ai/confirmation/index.js';
 import type { RuntimeFeedItemData } from '../../ai/runtime-feed/index.js';
+import type { SwarmAgent, SwarmArtifact, SwarmBarrier, SwarmConnection, SwarmPlan } from '../../ai/swarm/index.js';
 /** Per-turn cost footer under a finished answer. */
 export type LlmUsage = {
     tokensIn: number;
@@ -20,6 +21,22 @@ export type LlmToolChip = {
     input?: unknown;
     output?: unknown;
 };
+/**
+ * Where a swarm block reads its state.
+ *
+ * Deliberately structural rather than a class: a `SwarmController` satisfies it
+ * as-is (so a live, streaming swarm is `{ kind: 'swarm', swarm: controller }`
+ * and stays reactive), and a host with static state passes a plain object with
+ * the same fields. Neither has to know about the other.
+ */
+export type LlmSwarm = {
+    agents: SwarmAgent[];
+    plan?: SwarmPlan | null;
+    barriers?: SwarmBarrier[];
+    artifacts?: SwarmArtifact[];
+    connection?: SwarmConnection;
+    seq?: number;
+};
 /**
  * Everything an assistant turn can contain.
  *
@@ -49,6 +66,11 @@ export type LlmBlock = {
     stdout?: string;
     stderr?: string;
     exitCode?: number;
+} | {
+    kind: 'swarm';
+    swarm: LlmSwarm;
+    /** `tree` (default) keeps the delegation shape; `grid` is the console view. */
+    view?: 'tree' | 'grid';
 } | {
     kind: 'approval';
     toolName: string;

package/dist/dev/audit/audits/clipped-glyphs.js

@@ -36,6 +36,13 @@ export const clippedGlyphs = {
         const s = getComputedStyle(el);
         if (!/hidden|clip|auto|scroll/.test(s.overflowX + s.overflowY))
             return null;
+        // `normal` IS the ink box: the UA sizes the line from the font's own
+        // ascent + descent, so the box cannot be shorter than what the font paints,
+        // whatever ratio that works out to (a serif at 14px lands at 16px = 1.14em,
+        // under the ratio below and perfectly safe). Only an AUTHORED line-height
+        // can starve the box, so only an authored one is measured.
+        if (s.lineHeight === 'normal')
+            return null;
         const fontSize = parseFloat(s.fontSize) || 14;
         const h = el.getBoundingClientRect().height;
         if (h === 0)