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 (