Module 6, Lesson 225 min

Custom writer events and SSE into the browser

Custom events are how you surface domain-specific progress. Inside a node, config.writer emits an event into the custom stream.

Emitting custom events from a node

const rollNode = (state, config) => {
  config.writer?.({ type: "dice", weights: state.weights });
  const face = rollDice(state.weights, state.random);
  config.writer?.({ type: "roll", face });
  return new Command({ update: { face }, goto: `${face}Node` });
};

That is how the dice weights and the roll outcome render distinctly from the token stream: they are custom events, not messages tokens.

When you want every internal event, model start, tool start, token, node end, rather than node-level deltas, streamEvents is the fine-grained firehose.

streamEvents for a fine-grained firehose

for await (const ev of graph.streamEvents(input, { version: "v3" })) {
  // ev.event, ev.name, ev.data - filter to what the panel needs
}

SSE, Server-Sent Events, is a one-way stream over HTTP: the server holds the connection open and pushes data: lines. Your route iterates graph.stream(...) and writes each chunk as an SSE message; the browser's EventSource receives them and updates the panel.

Practice

Try it yourself

Recall

Why combined stream modes arrive as tuples

The alternative to compare against is a single merged stream with no tags on it.

Why do combined stream modes arrive as [mode, chunk] tuples rather than as one flat merged stream?

Recall

Why dice events stay off the token channel

The dice weights and roll outcome go out as custom events through config.writer. Answer in terms of what the messages channel is for.

Why not put dice progress info into the messages stream?

Stream the dice graph into a live panel

Build an SSE endpoint that runs the module 3 impulse graph and streams its progress into a browser panel.

In ~/dev/groundschool, add a route that runs the m3 impulse graph via graph.stream with combined ["updates", "custom"] stream modes.
Emit custom writer events for the dice weights (before rolling) and the roll outcome (after rolling), following cockpit's ops.stream.tsx SSE pattern.
Build a small panel that lights up each node as its update chunk arrives.
Render dice weights and roll outcome as distinct UI elements from any token stream.
Optionally expose the route through Reception and confirm it still works over that path.

Tick every step to confirm you did it.

Check

Live panel shows node-by-node progress

Confirm the streaming panel behaves as expected.

You should see

Each node visibly lights up in the panel as the graph executes it, and custom writer events (dice weights, roll outcome) are rendered distinctly from the token stream.