/**
* Custom message rendering example.
*
* Shows how to use registerMessageRenderer to control how custom messages
* appear in the TUI, with colors, formatting, and expandable details.
*
* Usage: /status [message] - sends a status message with custom rendering
*/
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
import { Box, Text } from "@earendil-works/pi-tui";
export default function (pi: ExtensionAPI) {
pi.registerMessageRenderer("status-update", (message, { expanded }, theme) => {
const details = message.details as { level: string; timestamp: number } | undefined;
const level = details?.level ?? "info";
const color = level === "error" ? "error" : level === "warn" ? "warning" : "success";
const prefix = theme.fg(color, `[${level.toUpperCase()}]`);
let text = `${prefix} ${message.content}`;
if (expanded && details?.timestamp) {
const time = new Date(details.timestamp).toLocaleTimeString();
text += `\n${theme.fg("dim", ` at ${time}`)}`;
}
const box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
box.addChild(new Text(text, 0, 0));
return box;
});
pi.registerCommand("status", {
description: "Send a status message (usage: /status [warn|error] message)",
handler: async (args, _ctx) => {
const parts = args.trim().split(/\s+/);
let level = "info";
let content = args.trim();
if (parts[0] === "warn" || parts[0] === "error") {
level = parts[0];
content = parts.slice(1).join(" ") || "Status update";
}
pi.sendMessage({
customType: "status-update",
content,
display: true,
details: { level, timestamp: Date.now() },
});
},
});
}