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

fix: steer delivery renders bare in the transcript — no bubble, no model glue

Browse Source 
Three refinements from live testing:

- Steer messages no longer sit inside the user Message container (the
  bubble background + right alignment it gave artifact cards). chat.tsx
  renders SubagentSteerCard directly in the transcript column — full
  width, centered, same register as the teacher's artifacts.
- Research steers render a quiet "Research complete · N sources" badge
  (the dispatch-settled idiom), not the full brief: briefs are long, the
  wake turn weaves them into the lesson anyway, and the full text stays
  persisted in the artifact part — a "view full research" affordance
  can be added later without any protocol change. Failures keep the
  failure card (the brief explains what went wrong).
- The sub-agents' verification notes (visual/demo builder notes) are
  model-facing glue and no longer render on success; failure notes
  remain the error explanation.

SSR-verified against a synthetic record: badge + SVG bare in the
transcript (no is-user wrapper), notes/brief confined to the RSC
payload. 229/229, typecheck, lint, build green.
This commit is contained in:
amosblomqvist
2026-09-02 02:58:37 +03:00
parent 2d7b004fda
commit 5a7e2748d7
5 changed files with 72 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/artifacts/demo-card.tsx
+2 -3
View File
@@ -99,10 +99,10 @@ export function DemoOutputCard({ output }: { output: unknown }) {
</div>
);
}
return <DemoFrame title={result.title} html={result.html} notes={result.notes} />;
return <DemoFrame title={result.title} html={result.html} />;
}
function DemoFrame({ title, html, notes }: { title: string; html: string; notes?: string }) {
function DemoFrame({ title, html }: { title: string; html: string }) {
const actions = useContext(ChatActionsContext);
const iframeRef = useRef<HTMLIFrameElement | null>(null);
const [state, setState] = useState<DemoBridgeState>(INITIAL_DEMO_BRIDGE_STATE);
@@ -145,7 +145,6 @@ function DemoFrame({ title, html, notes }: { title: string; html: string; notes?
style={{ height: state.height ?? 360 }}
data-testid="demo-iframe"
/>
{notes && <p className="mt-2 text-sm text-muted-foreground">{notes}</p>}
</div>
);
}
components/artifacts/steer-card.tsx
+32 -6
View File
@@ -1,6 +1,8 @@
"use client";
import type { SubagentArtifactData, TeacherUIMessage } from "@/src/core";
import { CheckIcon } from "lucide-react";
import type { ResearchResult, SubagentArtifactData, TeacherUIMessage } from "@/src/core";
import { isSubagentFailure } from "@/src/core";
import { DemoOutputCard } from "@/components/artifacts/demo-card";
import { ResearchBriefCard } from "@/components/artifacts/job-card";
import { VisualOutputCard } from "@/components/artifacts/visual-card";
@@ -10,10 +12,17 @@ import { VisualOutputCard } from "@/components/artifacts/visual-card";
*
* When a background job completes, the wake pipeline injects a STEER message
* into the transcript: a user-role UIMessage whose data part
* ("data-subagent-artifact") carries the result. It must NEVER render as a
* learner bubble: the model-facing text part is protocol glue, and the
* artifact itself renders here, by kind, reusing the same artifact cards
* the result always used.
* ("data-subagent-artifact") carries the result. It renders as an artifact —
* NEVER a learner bubble, never wrapped in a message container:
*
* research — a quiet "Research complete" badge. The full brief is TOO LONG
* to inline and the teacher's wake turn weaves it into the lesson anyway;
* it stays persisted in the transcript (the artifact part), so a
* "view full research" affordance can be added later. Failures keep the
* failure card (the brief explains what went wrong).
* demo / visual — the artifact itself (sandboxed iframe / sanitized SVG).
* The sub-agent's verification notes are model-facing glue and do NOT
* render; only a failure note does.
*/
export function SubagentSteerCard({ message }: { message: TeacherUIMessage }) {
const artifactPart = message.parts.find((p) => p.type === "data-subagent-artifact");
@@ -27,10 +36,27 @@ export function SubagentSteerCard({ message }: { message: TeacherUIMessage }) {
}
switch (data.kind) {
case "research":
return <ResearchBriefCard output={data.result} />;
return isSubagentFailure("research", data.result as ResearchResult) ? (
<ResearchBriefCard output={data.result} />
) : (
<ResearchCompleteBadge result={data.result as ResearchResult} />
);
case "demo":
return <DemoOutputCard output={data.result} />;
case "visual":
return <VisualOutputCard output={data.result} />;
}
}
/** Quiet one-liner, the dispatch-settled idiom: the brief lives in the record,
* the lesson lives in the teacher's wake turn — the badge just marks delivery. */
function ResearchCompleteBadge({ result }: { result: ResearchResult }) {
return (
<div className="flex items-center gap-2 text-xs text-muted-foreground" data-testid="research-complete-badge">
<CheckIcon className="size-3.5" />
<span className="font-medium uppercase tracking-wide">Research</span>
<span>complete</span>
{result.sources.length > 0 && <span>· {result.sources.length} sources</span>}
</div>
);
}
components/artifacts/visual-card.tsx
-1
View File
@@ -61,7 +61,6 @@ export function VisualOutputCard({ output }: { output: unknown }) {
dangerouslySetInnerHTML={{ __html: sanitizeSvg(result.svg) }}
data-testid="visual-svg"
/>
{result.notes && <p className="mt-2 text-sm text-muted-foreground">{result.notes}</p>}
</div>
);
}
components/chat.tsx
+13 -12
View File
@@ -287,21 +287,22 @@ export function Chat({
/>
)}
{messages.map((m, mi) => (
{messages.map((m, mi) =>
m.role === "user" && isSubagentSteer(m) ? (
// Sub-agent delivery (wake-pipeline steer): NO message bubble — the
// artifact card sits in the transcript column directly, full width
// and centered like the teacher's artifacts (contracts.ts "THE ASYNC
// PROTOCOL" §4).
<SubagentSteerCard key={m.id} message={m} />
) : (
<Message key={m.id} from={m.role} className={m.role === "assistant" ? "max-w-full" : undefined}>
<MessageContent className={m.role === "assistant" ? "w-full" : undefined}>
{m.role === "user" ? (
isSubagentSteer(m) ? (
// Sub-agent delivery (wake-pipeline steer): render the
// artifact, never a learner bubble (contracts.ts §4).
<SubagentSteerCard message={m} />
) : (
// User text renders plain: the model's LaTeX pipeline is not
// applied to learner-authored text ($ stays $, no surprises).
<div className="whitespace-pre-wrap">
{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
</div>
)
// User text renders plain: the model's LaTeX pipeline is not
// applied to learner-authored text ($ stays $, no surprises).
<div className="whitespace-pre-wrap">
{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
</div>
) : (
m.parts.map((part, pi) => {
const isLastPart = mi === messages.length - 1 && pi === m.parts.length - 1;
tests/demos.test.tsx
+25 -14
View File
@@ -329,24 +329,35 @@ describe("steer card rendering (the delivered artifact)", () => {
assert.ok(!html.includes("<iframe"), "no iframe for a failed build");
});
it("renders the verified svg inline (sanitized) with notes", () => {
it("renders the verified svg inline (sanitized); the maker's notes are glue and stay hidden", () => {
const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><circle cx="50" cy="50" r="20"/></svg>';
const steer = buildSubagentSteer({ id: "jv", kind: "visual", toolCallId: "cv" }, { svg, notes: "The unit circle." });
const html = renderToStaticMarkup(<SubagentSteerCard message={steer as never} />);
assert.match(html, /The unit circle\./);
assert.ok(html.includes("circle"), "svg content rendered inline");
assert.match(html, /Figure/);
});
it("renders the research brief with source links", () => {
const steer = buildSubagentSteer(
{ id: "jr", kind: "research", toolCallId: "cr" },
{ brief: "Plato (c. 428–348 BCE) founded the Academy.", sources: [{ title: "Britannica", url: "https://britannica.com/plato" }] },
{ id: "jv", kind: "visual", toolCallId: "cv" },
{ svg, notes: "Looking at the render, the diagram is clean and accurate." },
);
const html = renderToStaticMarkup(<SubagentSteerCard message={steer as never} />);
assert.match(html, /Research brief/);
assert.match(html, /britannica\.com\/plato/);
assert.match(html, /founded the Academy/);
assert.ok(html.includes("circle"), "svg content rendered inline");
assert.match(html, /Figure/);
assert.ok(!html.includes("Looking at the render"), "model-facing notes never render");
});
it("renders a quiet Research-complete badge — the full brief stays out of the transcript (but persisted)", () => {
const steer = buildSubagentSteer(
{ id: "jr", kind: "research", toolCallId: "cr" },
{
brief: "Plato (c. 428–348 BCE) founded the Academy, a very long brief that would clutter the transcript.",
sources: [
{ title: "Britannica", url: "https://britannica.com/plato" },
{ title: "IEP", url: "https://iep.utm.edu/plato/" },
],
},
);
const html = renderToStaticMarkup(<SubagentSteerCard message={steer as never} />);
assert.match(html, /Research/);
assert.match(html, /complete/);
assert.match(html, /2 sources/);
assert.ok(!html.includes("founded the Academy"), "the long brief never renders inline");
assert.ok(!html.includes("britannica"), "source links stay out too — the wake turn cites them");
});
it("renders the visual failure note with no svg when the build FAILED", () => {