amosblomqvist
2d7b004fda
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).
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|