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).
This commit is contained in:
amosblomqvist
2026-09-02 02:34:02 +03:00
parent 99fa3f0847
commit 2d7b004fda
13 changed files with 514 additions and 242 deletions
+15 -12
View File
@@ -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 (