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).
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
"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`;
|
|
}
|