sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
components/artifacts/job-card.tsx
+15 -83
View File
@@ -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 (