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/sub-agents-panel.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { BotIcon, PenToolIcon, PlayIcon, SearchIcon } from "lucide-react";
+import type { JobKind, JobRecord } from "@/src/core";
+
+/**
+ * The sub-agents sidebar section (vision §2.5 live observability): what the
+ * teacher's background fleet is doing RIGHT NOW in this session — one card
+ * per running sub-agent with its live activity line (current tool + args)
+ * and elapsed time, fed by the central jobs poll.
+ *
+ * Renders nothing when the fleet is idle (zero clutter); finished jobs
+ * vanish from the list — their artifacts live in the transcript. Sits at
+ * the top of the right sidebar, above the plan-tree panel.
+ */
+
+const KIND_META: Record<JobKind, { label: string; Icon: typeof SearchIcon }> = {
+	research: { label: "Researcher", Icon: SearchIcon },
+	demo: { label: "Demo builder", Icon: PlayIcon },
+	visual: { label: "Figure maker", Icon: PenToolIcon },
+};
+
+export function SubAgentsPanel({ jobs }: { jobs: JobRecord[] }) {
+	const running = jobs.filter((j) => j.status === "running");
+	if (running.length === 0) return null;
+	return (
+		<aside
+			data-testid="sub-agents-panel"
+			className="flex w-64 shrink-0 flex-col border-b border-border/60 bg-card/30 px-3 py-2.5"
+		>
+			<div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+				<BotIcon className="size-3.5" />
+				Sub-agents
+			</div>
+			<ul className="mt-2 flex flex-col gap-2">
+				{running.map((job) => (
+					<li
+						key={job.id}
+						className="rounded-lg border bg-card px-2.5 py-2 text-card-foreground"
+						data-testid="sub-agent-card"
+					>
+						<div className="flex items-center gap-2 text-xs font-medium">
+							{(() => {
+								const { label, Icon } = KIND_META[job.kind] ?? KIND_META.research;
+								return <Icon className="size-3.5 shrink-0 text-muted-foreground" />;
+							})()}
+							<span className="min-w-0 flex-1 truncate">{KIND_META[job.kind]?.label ?? job.kind}</span>
+							<span
+								className="inline-block size-1.5 animate-pulse rounded-full bg-primary"
+								aria-hidden="true"
+							/>
+							<span className="shrink-0 tabular-nums text-muted-foreground" data-testid="sub-agent-elapsed">
+								{elapsedOf(job)}
+							</span>
+						</div>
+						{job.activity && (
+							<div
+								className="mt-1 truncate text-xs text-muted-foreground"
+								data-testid="sub-agent-activity"
+								title={job.activity}
+							>
+								{job.activity}
+							</div>
+						)}
+					</li>
+				))}
+			</ul>
+		</aside>
+	);
+}
+
+function elapsedOf(job: JobRecord): string {
+	if (!job.createdAt) return "";
+	const seconds = Math.max(0, Math.round((Date.now() - Date.parse(job.createdAt)) / 1000));
+	return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}