50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1bb4,import { registry, type LearningType } from "./registry"; const OPEN = ""; const CLOSE = ""; export type Segment = | { kind: "text"; text: string } /** Validated payload, ready to render. */ | { kind: "component"; type: LearningType; data: Record; activityId: string } /** Tag closed but the payload was malformed or of an unknown type. */ | { kind: "invalid"; activityId: string } /** Tag opened and the stream has not closed it yet. */ | { kind: "pending" }; /** * If the text ends mid-tag ("... 0; i--) { if (text.endsWith(OPEN.slice(0, i))) return text.slice(0, -i); } return text; } /** The protocol forbids code fences inside the tags, but models add them anyway. */ function stripFences(raw: string): string { return raw .replace(/^\s*```(?:json)?\s*/i, "") .replace(/\s*```\s*$/, "") .trim(); } function classify(raw: string, activityId: string): Segment { let data: unknown; try { data = JSON.parse(stripFences(raw)); } catch { return { kind: "invalid", activityId }; } if (typeof data !== "object" || data === null || Array.isArray(data)) { return { kind: "invalid", activityId }; } const record = data as Record; const type = record.type; if (typeof type !== "string" || !(type in registry)) { return { kind: "invalid", activityId }; } const entry = registry[type as LearningType]; // Validate now so the stream never hands a broken payload to a component. if (entry.parse(record, activityId) === null) { return { kind: "invalid", activityId }; } return { kind: "component", type: type as LearningType, data: record, activityId }; } /** * Splits accumulated LLM output into prose and learning components. * * Takes the full text so far rather than a delta, so it is pure and idempotent: * calling it on every chunk cannot drift out of sync with the stream the way an * incremental state machine can. Text after an unclosed tag is withheld as * `pending` — the payload is still arriving and cannot be trusted yet. */ export function parseLearningStream(text: string): Segment[] { const segments: Segment[] = []; const pushText = (t: string) => { if (t.trim()) segments.push({ kind: "text", text: t.trim() }); }; let rest = text; let index = 0; for (;;) { const openAt = rest.indexOf(OPEN); if (openAt === -1) { pushText(trimPartialOpenTag(rest)); return segments; } pushText(rest.slice(0, openAt)); const after = rest.slice(openAt + OPEN.length); const closeAt = after.indexOf(CLOSE); if (closeAt === -1) { // Still streaming. Anything after an unclosed tag is part of this payload. segments.push({ kind: "pending" }); return segments; } // Ordinal, not a content hash: components are only ever appended, so an // earlier component keeps its id as more of the stream arrives, which keeps // xAPI statements pointing at a stable activity across re-renders. segments.push(classify(after.slice(0, closeAt), `streamed-${index}`)); index++; rest = after.slice(closeAt + CLOSE.length); } } // Self-check: npx tsx components/learning/parse.ts if (process.argv[1]?.endsWith("parse.ts")) { const kinds = (t: string) => parseLearningStream(t).map((s) => s.kind).join(","); const quiz = JSON.stringify({ type: "quiz", prompt: "Which is idempotent?", options: [ { id: "A", text: "POST", valid: false, feedback: "no" }, { id: "B", text: "GET", valid: true, feedback: "yes" }, ], }); const wrap = (json: string) => `${OPEN}${json}${CLOSE}`; console.assert(kinds("just prose") === "text", "plain text"); console.assert(kinds("") === "", "empty stream yields nothing"); console.assert(kinds(`Intro ${wrap(quiz)} outro`) === "text,component,text", "text around"); console.assert(kinds(`${wrap(quiz)}${wrap(quiz)}`) === "component,component", "back to back"); // Cut-off mid-payload: withheld, never rendered half-parsed. console.assert(kinds(`Intro ${OPEN}{"type":"qu`) === "text,pending", "unclosed tag pends"); console.assert(kinds(`Intro ${OPEN}`) === "text,pending", "bare open tag pends"); // A partially-arrived open tag must not leak to the reader as prose. console.assert(kinds("Intro s.kind === "invalid"), `prefix ${i} produced invalid`); const text = segs .filter((s): s is { kind: "text"; text: string } => s.kind === "text") .map((s) => s.text) .join(" "); console.assert(!text.includes(" s.kind === "component").length === 2, "final"); // Every registry demo must survive its own validator. This is what keeps the // documented schemas in PROMPT.md honest: the demos are the worked examples, // so a validator tightened without updating them fails here. for (const [type, e] of Object.entries(registry)) { const payload = JSON.stringify({ type, ...e.demo }); console.assert(kinds(wrap(payload)) === "component", `registry demo "${type}" fails its parser`); } console.log("parse self-check passed"); } 53:T21df,import type { ComponentType, ReactNode } from "react"; import { FlashcardBlock } from "./FlashcardBlock"; import { MasteryMeter } from "./MasteryMeter"; import { QuizBlock } from "./QuizBlock"; import { SequenceBuilder } from "./SequenceBuilder"; import type { XApiStatement } from "./xapi"; type Track = (statement: XApiStatement) => void; /** Props every learning component accepts. */ export interface LearningComponentProps { activityId: string; onTrackTelemetry?: Track; } interface EntryInput

{ /** Showcase heading. */ title: string; /** One or two sentences for the showcase. */ description: string; Component: ComponentType

; /** Example payload. Doubles as the showcase demo and a parser fixture. */ demo: P; /** * Validates one streamed `` payload into props, or null * if it does not conform. This is a trust boundary: the input is model * output, so every field is checked rather than assumed. * * `activityId` is supplied by the parser because the LLM schema has no id * field, but xAPI statements need a stable activity to point at. */ parse: (data: Record, activityId: string) => P | null; } const isNonEmptyString = (v: unknown): v is string => typeof v === "string" && v.trim() !== ""; /** * Binds a component to its demo payload while the prop type is still concrete. * Iterating the registry widens entries to a union, at which point TypeScript * can no longer tell that a given demo belongs to a given component — so the * pairing is resolved into `render` here instead of being cast at the call site. */ const entry =

(e: EntryInput

) => ({ title: e.title, description: e.description, Component: e.Component, demo: e.demo, parse: e.parse, render: (onTrackTelemetry?: Track): ReactNode => ( ), /** * Validates and renders one streamed payload, or returns null if it does not * conform. Combined into one step for the same union-widening reason as * `render`: only here is P concrete enough to pass parsed props to Component. */ parseAndRender: ( data: Record, activityId: string, onTrackTelemetry?: Track ): ReactNode | null => { const props = e.parse(data, activityId); return props ? : null; }, }); /** * Single source of truth for the library. Adding a component means adding one * entry here: the showcase page and the `` stream parser * both read from this map rather than keeping their own lists. * * Keys are the `type` field of the JSON an LLM emits. */ export const registry = { quiz: entry({ title: "Quiz", description: "An inline concept check with immediate feedback. Emits an xAPI “answered” statement on submit — open the console to see it.", Component: QuizBlock, parse: (data, activityId) => { if (!isNonEmptyString(data.prompt) || !Array.isArray(data.options)) return null; // A quiz with no options, or with exactly one, is not answerable. if (data.options.length < 2) return null; const options = data.options.map((o: unknown) => { const opt = o as Record; if (!isNonEmptyString(opt?.id) || !isNonEmptyString(opt?.text)) return null; return { id: opt.id, text: opt.text, valid: opt.valid === true, feedback: typeof opt.feedback === "string" ? opt.feedback : "", }; }); if (options.some((o) => o === null)) return null; const valid = options as NonNullable<(typeof options)[number]>[]; // Without a correct answer the feedback and the xAPI `success` flag are // both meaningless, so treat it as malformed rather than render it. if (!valid.some((o) => o.valid)) return null; return { activityId, prompt: data.prompt, options: valid }; }, demo: { activityId: "http-idempotency-check", prompt: "Which HTTP method should be safely designed as idempotent?", options: [ { id: "A", text: "POST", valid: false, feedback: "POST creates new resources and is typically non-idempotent.", }, { id: "B", text: "GET", valid: true, feedback: "Correct! Multiple GET calls return the same data without altering state.", }, ], }, }), flashcard: entry({ title: "Flashcard", description: "A term on the front, the explanation on the back. Emits an xAPI “experienced” statement the first time it is revealed.", Component: FlashcardBlock, parse: (data, activityId) => isNonEmptyString(data.front) && isNonEmptyString(data.back) ? { activityId, front: data.front, back: data.back } : null, demo: { activityId: "idempotency-definition", front: "What does it mean for an HTTP method to be idempotent?", back: "Making the same request many times has the same effect as making it once.", }, }), sequence: entry({ title: "Sequence builder", description: "Steps arrive shuffled and the learner drags them into order. Pointer, touch, and keyboard reach the same interaction, and submitting emits an xAPI “answered” statement carrying the submitted order.", Component: SequenceBuilder, parse: (data, activityId) => { if (!isNonEmptyString(data.prompt) || !Array.isArray(data.steps)) return null; // Two steps is a coin flip, not an ordering task — and the anti-identity // rotation in the component would make the answer the reverse every time. if (data.steps.length < 3) return null; const steps = data.steps.map((s: unknown) => { const step = s as Record; if (!isNonEmptyString(step?.id) || !isNonEmptyString(step?.text)) return null; return { id: step.id, text: step.text }; }); if (steps.some((s) => s === null)) return null; const valid = steps as NonNullable<(typeof steps)[number]>[]; // Duplicate ids would make the submitted order ambiguous in the xAPI // response and break React's keys. if (new Set(valid.map((s) => s.id)).size !== valid.length) return null; return { activityId, prompt: data.prompt, steps: valid }; }, demo: { activityId: "http-request-lifecycle", prompt: "Order the steps of an HTTP request.", steps: [ { id: "dns", text: "Resolve the hostname via DNS" }, { id: "tcp", text: "Open a TCP connection" }, { id: "tls", text: "Negotiate TLS" }, { id: "send", text: "Send the request" }, { id: "recv", text: "Receive the response" }, ], }, }), mastery: entry({ title: "Mastery meter", description: "The tutor's read on where the learner stands across a topic, plus a self-rating that emits an xAPI “rated” statement — the signal for what to teach next.", Component: MasteryMeter, parse: (data, activityId) => { if (!isNonEmptyString(data.title) || !Array.isArray(data.skills)) return null; if (data.skills.length === 0) return null; const skills = data.skills.map((s: unknown) => { const skill = s as Record; if (!isNonEmptyString(skill?.id) || !isNonEmptyString(skill?.label)) return null; // Out-of-range levels would overflow the bar and print figures like // "340%". Reject rather than clamp: a model that far off the schema is // probably wrong about the content too. const level = skill.level; if (typeof level !== "number" || !Number.isFinite(level) || level < 0 || level > 1) { return null; } return { id: skill.id, label: skill.label, level }; }); if (skills.some((s) => s === null)) return null; const valid = skills as NonNullable<(typeof skills)[number]>[]; if (new Set(valid.map((s) => s.id)).size !== valid.length) return null; return { activityId, title: data.title, skills: valid }; }, demo: { activityId: "rest-fundamentals", title: "REST fundamentals", skills: [ { id: "methods", label: "HTTP methods", level: 0.8 }, { id: "idempotency", label: "Idempotency", level: 0.6 }, { id: "status", label: "Status codes", level: 0.4 }, { id: "caching", label: "Caching headers", level: 0.2 }, ], }, }), }; export type LearningType = keyof typeof registry; 54:Tb6b,"use client"; import { ComponentBoundary } from "./ComponentBoundary"; import { parseLearningStream } from "./parse"; import { registry } from "./registry"; import type { XApiStatement } from "./xapi"; /** * Exported so a proof surface can render the real fallback rather than a * lookalike: the boundary's fallback and the parser's are the same line, and a * copy of it would drift. */ export const Unavailable = () => (

An activity could not be displayed.

); export interface LearningStreamProps { /** Everything the model has emitted so far, not just the latest chunk. */ text: string; onTrackTelemetry?: (statement: XApiStatement) => void; } /** * Renders a model's output, hydrating `` payloads into live * components as they arrive. Components render inline in the host layout — no * iframe, no post-processing pass. */ export function LearningStream({ text, onTrackTelemetry }: LearningStreamProps) { const segments = parseLearningStream(text); return (

{segments.map((segment, i) => { switch (segment.kind) { case "text": return (

{segment.text}

); case "component": return ( // Keyed by activity id, not array index: the id is stable as more // of the stream arrives, so a learner's in-progress answer is not // reset by later chunks remounting the component.

}> {registry[segment.type].parseAndRender( segment.data, segment.activityId, onTrackTelemetry )}

); case "invalid": return ; case "pending": return (

); } })}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/quiz.json","https://beadkit.dev/r/flashcard.json","https://beadkit.dev/r/sequence.json","https://beadkit.dev/r/mastery.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/learning/parse.ts","content":"$52","type":"registry:lib","target":"@components/learning/parse.ts"},{"path":"components/learning/registry.tsx","content":"$53","type":"registry:lib","target":"@components/learning/registry.tsx"},{"path":"components/learning/LearningStream.tsx","content":"$54","type":"registry:component","target":"@components/learning/LearningStream.tsx"}],"className":"h-[70svh] min-h-80"}]]}]