Quiz - Tool calling, generative UI, and retrieval

A multi-step tool handler bills each user for the tokens a turn consumes. You wire both callbacks:

onStepFinish: ({ usage }) => meter(usage),
onFinish: ({ totalUsage }) => ledger.write(totalUsage),

A teammate “simplifies” it by deleting onStepFinish and billing only in onFinish — but reads the last step’s usage there instead of totalUsage. On a five-step turn, what breaks?

Each user is billed for only the final step’s tokens, so multi-step turns are massively under-charged.

Nothing — onFinish always carries the cross-step total whether you read usage or totalUsage.

The ledger write throws, because usage is undefined inside onFinish.

Your getInvoiceById tool returns the raw Drizzle row, and <InvoiceCard /> divides amountCents by 100 and falls back from customer.displayName to customer.email inside the component. It renders correctly today. Why is this the wrong place to draw the line?

The component is now coupled to the data layer’s quirks — change the query shape and the render breaks, with the coupling invisible until it does.

A React component is not allowed to perform arithmetic or null-coalescing on its props.

The currency math should run on the server because it is too slow for the client.

In a RAG chat handler, you run an org-scoped similarity query and have the retrieved passages in hand. Where do they go, and why?

Into the system prompt — the retrieval was authorized server-side under session.orgId, so the context is trusted and keeps the controller in charge.

Into the messages array as a user turn, so the model treats the passages the same way it treats the question.

Into the messages array, because retrieved text and the user’s question are both untrusted input and belong together.

Quiz - Tool calling, generative UI, and retrieval

Quiz complete