Render Mermaid diagrams and worktree images in agent Markdown

This commit is contained in:
Ian Gulliver
2026-10-15 07:27:17 -07:00
parent 1f44bc6d91
commit 4ca6f88861
26 changed files with 5613 additions and 227 deletions
+6 -5
View File
@@ -343,7 +343,7 @@ export function mountTranscript(root: HTMLElement): () => void {
}
stream.timer = 0;
const pinned = transcript.scrollHeight - transcript.scrollTop - transcript.clientHeight < 80;
replace(stream.el, markdown(stream.text, "text md"));
replace(stream.el, markdown(stream.text, "text md", { taskId: state.selectedTaskId ?? undefined }));
if (pinned) {
transcript.scrollTop = transcript.scrollHeight;
}
@@ -784,6 +784,7 @@ function runSummary(calls: Call[]): HTMLElement {
function renderEvent(ev: ByreEvent, ctx: Ctx): HTMLElement | null {
const p = ev.payload as Record<string, unknown>;
const md = { taskId: ev.task_id };
const when = h("time", { dateTime: ev.created_at, title: ev.created_at }, ago(ev.created_at));
switch (ev.kind) {
@@ -797,7 +798,7 @@ function renderEvent(ev: ByreEvent, ctx: Ctx): HTMLElement | null {
"details",
{ class: "tool byre-prompt" },
h("summary", {}, h("span", { class: "tool-name" }, "byre"), " ", h("span", { class: "tool-brief" }, brief), " ", when),
markdown(text, "text md"),
markdown(text, "text md", md),
);
}
return h(
@@ -805,15 +806,15 @@ function renderEvent(ev: ByreEvent, ctx: Ctx): HTMLElement | null {
{ class: "msg user" },
h("div", { class: "who" }, ev.actor, " ", when),
messageImages(p["images"]),
String(p["text"] ?? "").trim() ? markdown(String(p["text"]), "text md") : null,
String(p["text"] ?? "").trim() ? markdown(String(p["text"]), "text md", md) : null,
);
case "agent.message":
ctx.lastMessage = h("div", { class: "msg agent" }, markdown(String(p["text"]), "text md"));
ctx.lastMessage = h("div", { class: "msg agent" }, markdown(String(p["text"]), "text md", md));
return ctx.lastMessage;
case "agent.thinking":
return h("details", { class: "thinking" }, h("summary", {}, "thinking"), markdown(String(p["text"]), "text md"));
return h("details", { class: "thinking" }, h("summary", {}, "thinking"), markdown(String(p["text"]), "text md", md));
case "agent.tool_result": {
const target = ctx.tools.get(String(p["tool_use_id"]));