@praecise/conversation

What an agent is doing, while it does it.

A run already tells the whole story on the wire: which self was asked, what it drew on, which model answered, whether a verifier agreed, what was checked, what it cost. Most interfaces throw that away and show a spinner — so a person can't tell thinking from broken, or an answer that was checked from one that was guessed.

This renders those frames as they arrive: one line per step, openable for the detail underneath, collapsing to a summary when the answer lands. Nothing here invents a step. Every line is a frame the server actually sent.

npm i @praecise/conversation

Use

import { mountRun, readRun } from "@praecise/conversation";
import "@praecise/conversation/conversation.css";

const run = mountRun(document.querySelector("#trail"), { self: "economist" });

const res = await fetch("/chat/fast", { method: "POST", body: JSON.stringify({ message }) });
const text = await readRun(res.body, run, (sofar) => {
  answerEl.innerHTML = renderMarkdown(sofar);   // your renderer, your markup
});
run.settle(Boolean(text));

readRun is optional — if you already read the stream, hand each frame to run.frame(evt) and call run.settle(ok) at the end.

What it shows

| Step | Line | |---|---| | selves | context from economist · drew on 3 things | | routing | routed to fleet/qwen3.8-27b · verified · difficulty 0.40 | | grounding | grounding with live data | | checking | a second pass is checking the answer | | checked | checked and kept · agreement 1.00 | | done | answered · 3,640 in · 2 out · fleet/qwen3.8-27b |

A step it does not know still appears, named as it came: a newer server never breaks an older page. Any step with detail opens to the raw frame.

Styling

No framework, no build step: it makes DOM nodes and reads the host page's own CSS variables, so it looks like the product it is in rather than like itself.

.pc-run { --pc-ink: #1a1a1a; --pc-quiet: #6b6b6b; --pc-rule: #e3e4e5; --pc-signal: #4b6a00; }

It also falls back to --ink, --quiet, --rule, --signal-deep and --paper-dim if a product already defines those, and to plain greys if it defines nothing. Every class is yours to restyle: .pc-run, .pc-run-head, .pc-run-steps, .pc-run-step, .pc-run-line, .pc-run-title, .pc-run-note, .pc-run-detail.

Frames

The shapes are the Praecise harness's: RunStarted, StepStarted, StepFinished, TextMessageContent, RunFinished, RunError. Anything else is ignored rather than thrown on.

Apache-2.0.