fix: live sub-agent observability — dispatch cards, steer artifacts, sidebar panel

The pi-style ack protocol (previous commit) left the client describing the
old world: artifact cards read the ack string as a result ("could not be
displayed"), the only job poller rendered on input-available parts that no
longer exist (so wake turns landed invisibly until re-navigation), steers
rendered as learner bubbles with no SVG anywhere, and server-persisted
assistant messages carried empty SDK ids (duplicate React keys).

- persistTurn (turn-service): fill empty message ids at the canonical write
  — server-only messages (last turn's, wake turns') now key uniquely;
  client-authored ids untouched.
- chat.tsx: ONE central /api/jobs poll (fast while jobs run, slow discovery
  cadence, off for job-less sessions) drives every job surface, re-syncs
  once when a job settles (the record already holds the steer + wake
  response at flip time), and adopts server-side wake turns via the same
  turnInFlight machinery as returning mid-turn. Steers branch to the
  artifact card — never a bubble. Composer no longer gates on jobs.
- /api/jobs now reports turnInFlight alongside the job list.
- dispatch-card: the tool-call box — live activity by toolCallId while
  running, quiet "delivered"/"failed" one-liner after; the ack is visible
  observability, the artifact lives in the steer.
- steer-card: renders the delivered artifact by kind (research brief /
  sanitized SVG / sandboxed demo iframe) from the data-subagent-artifact
  part; result renderers extracted and exported from the artifact cards.
- sub-agents-panel: right-sidebar section above the plan tree listing
  running sub-agents (kind, elapsed, live activity) — vanishes when idle.
- tests: dispatch/steer/panel render tests re-target the new protocol;
  persistTurn id-hygiene suite. 229/229 green, build green.

Out-of-lane touches for master review: chat.tsx + components/** (cleared
this wave), app/api/jobs/route.ts, src/server/turn-service.ts, contracts
protocol doc §2. Live-verified on :3003 (full loop, SSR DOM checked).

components/artifacts/demo-card.tsx

@@ -2,7 +2,8 @@
 
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ChatActionsContext } from "@/components/chat";
-import type { ArtifactPartProps, DemoResult, JobRecord } from "@/src/core";
+import { DispatchCard } from "@/components/artifacts/dispatch-card";
+import type { ArtifactPartProps, DemoResult } from "@/src/core";
 
 /**
  * Demo artifact card (W6): while the part is input-available, a job activity
@@ -66,93 +67,18 @@ export function reduceDemoBridgeState(state: DemoBridgeState, data: unknown): De
 	return state;
 }
 
-// ─── shared job activity card (input-available state) ───────────────────────
-
-/** Live activity card for pending job parts — the job-card.tsx idiom,
- * parameterized by label. Exported for the visual card (also W6-owned). */
-export function JobActivityCard({
-	toolCallId,
-	label,
-	testId,
-}: {
-	toolCallId: string;
-	label: string;
-	testId?: string;
-}) {
-	const actions = useContext(ChatActionsContext);
-	const [job, setJob] = useState<JobRecord | null>(null);
-	const finishedRef = useRef(false);
-
-	useEffect(() => {
-		if (!actions) return;
-		let cancelled = false;
-
-		const poll = async () => {
-			if (finishedRef.current) return true;
-			try {
-				const res = await fetch(`/api/jobs?chatId=${encodeURIComponent(actions.chatId)}`);
-				if (!res.ok) return false;
-				const { jobs } = (await res.json()) as { jobs?: JobRecord[] };
-				const match = jobs?.find((j) => j.toolCallId === toolCallId) ?? null;
-				if (cancelled) return false;
-				setJob(match);
-				if (match && match.status !== "running") {
-					// The part has (or is about to be) fulfilled server-side — pull the
-					// fresh messages once; the continuation resumes the teacher.
-					finishedRef.current = true;
-					void actions.syncFromServer();
-					return true;
-				}
-			} catch {
-				/* transient fetch failure — keep polling */
-			}
-			return false;
-		};
-
-		const timer = setInterval(() => {
-			if (finishedRef.current) {
-				clearInterval(timer);
-				return;
-			}
-			void poll().then((stop) => {
-				if (stop) clearInterval(timer);
-			});
-		}, 2000);
-		void poll().then((stop) => {
-			if (stop) clearInterval(timer);
-		});
-
-		return () => {
-			cancelled = true;
-			clearInterval(timer);
-		};
-	}, [actions, toolCallId]);
-
-	return (
-		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid={testId ?? "job-activity-card"}>
-			<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-				<span className="inline-block size-2 animate-pulse rounded-full bg-primary" />
-				{label}
-			</div>
-			{job?.activity && (
-				<div className="mt-1 truncate text-sm text-muted-foreground" data-testid="job-activity-line">
-					{job.activity}
-				</div>
-			)}
-		</div>
-	);
-}
-
 // ─── the demo card ──────────────────────────────────────────────────────────
 
+/** The demo tool-call box: the part's output is the dispatch ack — the box
+ * is the DispatchCard (live status via the central jobs poll). The demo
+ * itself renders from the steer message via DemoOutputCard. */
 export function DemoCard({ part }: ArtifactPartProps) {
-	if (part.state === "output-available") {
-		return <DemoOutputCard output={part.output} />;
-	}
-	return <JobActivityCard toolCallId={part.toolCallId} label="Building demo…" testId="demo-activity-card" />;
+	if (part.state !== "output-available") return null;
+	return <DispatchCard toolCallId={part.toolCallId} kind="demo" />;
 }
 
-function DemoOutputCard({ output }: { output: unknown }) {
+/** The demo artifact — exported: the steer card renders the delivered result. */
+export function DemoOutputCard({ output }: { output: unknown }) {
 	const result = output as DemoResult | undefined;
 	if (!result || typeof result.html !== "string" || typeof result.title !== "string") {
 		return (

components/artifacts/dispatch-card.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useContext } from "react";
+import { CheckIcon, XIcon } from "lucide-react";
+import { JobsContext } from "@/components/jobs-context";
+import type { JobKind, JobRecord } from "@/src/core";
+
+/**
+ * The dispatch card (contracts.ts "THE ASYNC PROTOCOL" §4): the tool-call
+ * box for a background sub-agent. The tool part's output is the FIRE-AND-
+ * FORGET ACK (a string) — never the result. Live status comes from the
+ * central jobs poll via JobsContext, matched by toolCallId:
+ *
+ *   job unknown → "dispatched" pulse (the poll hasn't seen it yet)
+ *   running     → live activity card (activity line + elapsed)
+ *   done/error  → quiet one-liner ("delivered" / "failed") — the artifact
+ *                 itself arrives in the steer message right below, so the
+ *                 box must not duplicate it.
+ */
+const KIND_LABEL: Record<JobKind, string> = {
+	research: "Research agent",
+	demo: "Demo agent",
+	visual: "Figure agent",
+};
+
+export function DispatchCard({ toolCallId, kind }: { toolCallId: string; kind: JobKind }) {
+	const jobs = useContext(JobsContext);
+	const job = jobs.find((j) => j.toolCallId === toolCallId) ?? null;
+	const label = KIND_LABEL[kind];
+
+	if (!job || job.status === "running") {
+		return <DispatchActivityCard job={job} label={label} />;
+	}
+	const failed = job.status === "error";
+	return (
+		<div
+			className="flex items-center gap-2 text-xs text-muted-foreground"
+			data-testid="dispatch-settled"
+		>
+			{failed ? <XIcon className="size-3.5 text-red-500" /> : <CheckIcon className="size-3.5" />}
+			<span className="font-medium uppercase tracking-wide">{label}</span>
+			<span>{failed ? "failed" : "delivered"}</span>
+		</div>
+	);
+}
+
+function DispatchActivityCard({ job, label }: { job: JobRecord | null; label: string }) {
+	// Elapsed from createdAt — jobs appear here only via the poll (post-mount),
+	// so no SSR/hydration mismatch.
+	const elapsed =
+		job && job.createdAt ? Math.max(0, Math.round((Date.now() - Date.parse(job.createdAt)) / 1000)) : null;
+	return (
+		<div
+			className="rounded-xl border bg-card p-4 text-card-foreground"
+			data-testid="dispatch-card"
+		>
+			<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+				<span className="inline-block size-2 animate-pulse rounded-full bg-primary" />
+				{label}
+				{elapsed !== null && <span className="font-normal">· {elapsed}s</span>}
+			</div>
+			{job?.activity && (
+				<div className="mt-1 truncate text-sm text-muted-foreground" data-testid="dispatch-activity-line">
+					{job.activity}
+				</div>
+			)}
+			{!job && (
+				<div className="mt-1 text-sm text-muted-foreground" data-testid="dispatch-pending">
+					Dispatched…
+				</div>
+			)}
+		</div>
+	);
+}

components/artifacts/job-card.tsx

@@ -1,96 +1,28 @@
 "use client";
 
-import { useContext, useEffect, useRef, useState } from "react";
+import { DispatchCard } from "@/components/artifacts/dispatch-card";
 import { MessageResponse } from "@/components/ai-elements/message";
-import { ChatActionsContext } from "@/components/chat";
-import type { ArtifactPartProps, JobRecord, ResearchResult } from "@/src/core";
+import type { ArtifactPartProps, ResearchResult } from "@/src/core";
 
 /**
- * The research job card (contracts.ts "THE ASYNC PROTOCOL" §4).
+ * The research tool-call box (contracts.ts "THE ASYNC PROTOCOL" §4).
  *
- * While the part is input-available: an activity card — poll /api/jobs every
- * 2s, find the job by toolCallId, show a pulsing dot + "Researching…" + the
- * job's live activity line. When the job flips to done/error, call
- * syncFromServer() ONCE (fresh messages replace local state; the part
- * re-renders as the brief card and the sendAutomaticallyWhen continuation
- * resumes the teacher) and stop polling.
- *
- * When output-available: the research brief — markdown body + a small source
- * link list, in the visual language of answered-card.tsx.
+ * The part's output is the fire-and-forget dispatch ACK — the box itself is
+ * the DispatchCard (live status via the central jobs poll; quiet one-liner
+ * once delivered). The research brief itself no longer renders from the
+ * tool part at all: it rides the steer message (the user-role delivery
+ * injected after the wake turn) and renders there via ResearchBriefCard.
  */
 export function JobCard({ part }: ArtifactPartProps) {
-	if (part.state === "output-available") {
-		return <ResearchBriefCard output={part.output as ResearchResult} />;
-	}
-	return <ResearchActivityCard toolCallId={part.toolCallId} />;
+	if (part.state !== "output-available") return null;
+	return <DispatchCard toolCallId={part.toolCallId} kind="research" />;
 }
 
-function ResearchActivityCard({ toolCallId }: { toolCallId: string }) {
-	const actions = useContext(ChatActionsContext);
-	const [job, setJob] = useState<JobRecord | null>(null);
-	const finishedRef = useRef(false);
-
-	useEffect(() => {
-		if (!actions) return;
-		let cancelled = false;
-
-		const poll = async () => {
-			if (finishedRef.current) return true;
-			try {
-				const res = await fetch(`/api/jobs?chatId=${encodeURIComponent(actions.chatId)}`);
-				if (!res.ok) return false;
-				const { jobs } = (await res.json()) as { jobs?: JobRecord[] };
-				const match = jobs?.find((j) => j.toolCallId === toolCallId) ?? null;
-				if (cancelled) return false;
-				setJob(match);
-				if (match && match.status !== "running") {
-					// The part has (or is about to be) fulfilled server-side — pull the
-					// fresh messages once; the continuation resumes the teacher.
-					finishedRef.current = true;
-					void actions.syncFromServer();
-					return true;
-				}
-			} catch {
-				/* transient fetch failure — keep polling */
-			}
-			return false;
-		};
-
-		const timer = setInterval(() => {
-			if (finishedRef.current) {
-				clearInterval(timer);
-				return;
-			}
-			void poll().then((stop) => {
-				if (stop) clearInterval(timer);
-			});
-		}, 2000);
-		void poll().then((stop) => {
-			if (stop) clearInterval(timer);
-		});
-
-		return () => {
-			cancelled = true;
-			clearInterval(timer);
-		};
-	}, [actions, toolCallId]);
-
-	return (
-		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="research-activity-card">
-			<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-				<span className="inline-block size-2 animate-pulse rounded-full bg-primary" />
-				Researching…
-			</div>
-			{job?.activity && (
-				<div className="mt-1 truncate text-sm text-muted-foreground" data-testid="research-activity-line">
-					{job.activity}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function ResearchBriefCard({ output }: { output: unknown }) {
+/**
+ * The research brief — markdown body + a small source link list. Exported:
+ * the steer card (sub-agent result delivery) renders the same artifact.
+ */
+export function ResearchBriefCard({ output }: { output: unknown }) {
 	const result = output as ResearchResult | undefined;
 	if (!result || typeof result.brief !== "string") {
 		return (

components/artifacts/steer-card.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { SubagentArtifactData, TeacherUIMessage } from "@/src/core";
+import { DemoOutputCard } from "@/components/artifacts/demo-card";
+import { ResearchBriefCard } from "@/components/artifacts/job-card";
+import { VisualOutputCard } from "@/components/artifacts/visual-card";
+
+/**
+ * The sub-agent result delivery card (contracts.ts "THE ASYNC PROTOCOL" §4).
+ *
+ * When a background job completes, the wake pipeline injects a STEER message
+ * into the transcript: a user-role UIMessage whose data part
+ * ("data-subagent-artifact") carries the result. It must NEVER render as a
+ * learner bubble: the model-facing text part is protocol glue, and the
+ * artifact itself renders here, by kind, reusing the same artifact cards
+ * the result always used.
+ */
+export function SubagentSteerCard({ message }: { message: TeacherUIMessage }) {
+	const artifactPart = message.parts.find((p) => p.type === "data-subagent-artifact");
+	const data = artifactPart?.data as SubagentArtifactData | undefined;
+	if (!data) {
+		return (
+			<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
+				A sub-agent finished, but its result could not be displayed.
+			</div>
+		);
+	}
+	switch (data.kind) {
+		case "research":
+			return <ResearchBriefCard output={data.result} />;
+		case "demo":
+			return <DemoOutputCard output={data.result} />;
+		case "visual":
+			return <VisualOutputCard output={data.result} />;
+	}
+}

components/artifacts/visual-card.tsx

@@ -1,15 +1,19 @@
 "use client";
 
+import { DispatchCard } from "@/components/artifacts/dispatch-card";
 import type { ArtifactPartProps, VisualResult } from "@/src/core";
-import { JobActivityCard } from "@/components/artifacts/demo-card";
 
 /**
- * Visual artifact card (W6): while the part is input-available, a job activity
- * card; when output-available, VisualResult.svg renders INLINE. The SVG is
- * model-authored for the learner's own machine (their own teacher wrote it,
- * verified by looking) — dangerouslySetInnerHTML is acceptable here, with a
- * cheap hygiene pass (sanitizeSvg: strip <script> blocks, on* handlers, and
- * javascript:/data:text/html URLs) since it lands in the app's DOM.
+ * Visual artifact card (W6 → ack protocol): the tool part's output is the
+ * dispatch ack, so the tool-call box is the DispatchCard (live status via
+ * the central jobs poll). The SVG itself renders from the steer message
+ * (sub-agent result delivery) via VisualOutputCard.
+ *
+ * The SVG is model-authored for the learner's own machine (their own teacher
+ * wrote it, verified by looking) — dangerouslySetInnerHTML is acceptable
+ * here, with a cheap hygiene pass (sanitizeSvg: strip <script> blocks, on*
+ * handlers, and javascript:/data:text/html URLs) since it lands in the
+ * app's DOM.
  */
 
 /** Cheap SVG hygiene — not a full sanitizer, just removing the obvious exec vectors. */
@@ -22,13 +26,12 @@ export function sanitizeSvg(svg: string): string {
 }
 
 export function VisualCard({ part }: ArtifactPartProps) {
-	if (part.state === "output-available") {
-		return <VisualOutputCard output={part.output} />;
-	}
-	return <JobActivityCard toolCallId={part.toolCallId} label="Drawing figure…" testId="visual-activity-card" />;
+	if (part.state !== "output-available") return null;
+	return <DispatchCard toolCallId={part.toolCallId} kind="visual" />;
 }
 
-function VisualOutputCard({ output }: { output: unknown }) {
+/** The figure itself — exported: the steer card renders the delivered artifact. */
+export function VisualOutputCard({ output }: { output: unknown }) {
 	const result = output as VisualResult | undefined;
 	if (!result || typeof result.svg !== "string") {
 		return (