getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-19 10:03:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ToolRenderResult interface for custom tool rendering

Browse source 
- Changed ToolRenderer return type from TemplateResult to ToolRenderResult
- ToolRenderResult = { content: TemplateResult, isCustom: boolean }
- isCustom: true = no card wrapper, false = wrap in card
- Updated all existing tool renderers to return new format
- Updated Messages.ts to handle custom rendering

This enables tools to render without default card chrome when needed.
This commit is contained in:
Mario Zechner 2025-10-11 04:40:42 +02:00
parent 3db2a6fe2c
commit b129154cc8
23 changed files with 423 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

85
packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
View file

@ -6,7 +6,7 @@ import { FileCode2 } from "lucide";
import "../../components/ConsoleBlock.js";
import { i18n } from "../../utils/i18n.js";
import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
import type { ToolRenderer } from "../types.js";
import type { ToolRenderer, ToolRenderResult } from "../types.js";
import { ArtifactPill } from "./ArtifactPill.js";
import type { ArtifactsPanel, ArtifactsParams } from "./artifacts.js";
@ -54,7 +54,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
params: ArtifactsParams | undefined,
result: ToolResultMessage<undefined> | undefined,
isStreaming?: boolean,
): TemplateResult {
): ToolRenderResult {
const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
// Create refs for collapsible sections
@ -101,7 +101,8 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
const isHtml = filename?.endsWith(".html");
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
@ -113,16 +114,21 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
}
</div>
</div>
`;
`,
isCustom: false,
};
}
// For other errors, just show error message
return html`
return {
content: html`
<div class="space-y-3">
${renderHeader(state, FileCode2, headerText)}
<div class="text-sm text-destructive">${result.output || i18n("An error occurred")}</div>
</div>
`;
`,
isCustom: false,
};
}
// Full params + result
@ -136,27 +142,33 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
// GET command: show code block with file content
if (command === "get") {
const fileContent = result.output || i18n("(no output)");
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
<code-block .code=${fileContent} language=${getLanguageFromFilename(filename)}></code-block>
</div>
</div>
`;
`,
isCustom: false,
};
}
// LOGS command: show console block
if (command === "logs") {
const logs = result.output || i18n("(no output)");
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
<console-block .content=${logs}></console-block>
</div>
</div>
`;
`,
isCustom: false,
};
}
// CREATE/UPDATE/REWRITE: always show code block, + console block for .html files
@ -165,7 +177,8 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
const isHtml = filename?.endsWith(".html");
const logs = result.output || "";
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
@ -173,13 +186,16 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
</div>
</div>
`;
`,
isCustom: false,
};
}
if (command === "update") {
const isHtml = filename?.endsWith(".html");
const logs = result.output || "";
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
@ -187,15 +203,20 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
</div>
</div>
`;
`,
isCustom: false,
};
}
// For DELETE, just show header
return html`
return {
content: html`
<div class="space-y-3">
${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
</div>
`;
`,
isCustom: false,
};
}
// Params only (streaming or waiting for result)
@ -204,7 +225,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
// If no command yet
if (!command) {
return renderHeader(state, FileCode2, i18n("Preparing artifact..."));
return { content: renderHeader(state, FileCode2, i18n("Preparing artifact...")), isCustom: false };
}
const labels = getCommandLabels(command);
@ -214,7 +235,8 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
switch (command) {
case "create":
case "rewrite":
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
@ -225,10 +247,13 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
}
</div>
</div>
`;
`,
isCustom: false,
};
case "update":
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
@ -239,27 +264,35 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
}
</div>
</div>
`;
`,
isCustom: false,
};
case "get":
case "logs":
return html`
return {
content: html`
<div>
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300"></div>
</div>
`;
`,
isCustom: false,
};
default:
return html`
return {
content: html`
<div>
${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
</div>
`;
`,
isCustom: false,
};
}
}
// No params or result yet
return renderHeader(state, FileCode2, i18n("Preparing artifact..."));
return { content: renderHeader(state, FileCode2, i18n("Preparing artifact...")), isCustom: false };
}
}

4
packages/web-ui/src/tools/artifacts/artifacts.ts
View file

@ -408,7 +408,7 @@ export class ArtifactsPanel extends LitElement {
let result = `Created file ${params.filename}`;
if (this.getFileType(params.filename) === "html" && !options.skipWait) {
const logs = await this.waitForHtmlExecution(params.filename);
result += logs;
result += `\n${logs}`;
}
return result;
@ -486,7 +486,7 @@ export class ArtifactsPanel extends LitElement {
let result = "";
if (this.getFileType(params.filename) === "html" && !options.skipWait) {
const logs = await this.waitForHtmlExecution(params.filename);
result += logs;
result += `\n${logs}`;
}
return result;

8
packages/web-ui/src/tools/index.ts
View file

@ -1,9 +1,9 @@
import type { TemplateResult } from "@mariozechner/mini-lit";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import "./javascript-repl.js"; // Auto-registers the renderer
import { getToolRenderer, registerToolRenderer } from "./renderer-registry.js";
import { BashRenderer } from "./renderers/BashRenderer.js";
import { DefaultRenderer } from "./renderers/DefaultRenderer.js";
import "./javascript-repl.js"; // Auto-registers the renderer
import type { ToolRenderResult } from "./types.js";
// Register all built-in tool renderers
registerToolRenderer("bash", new BashRenderer());
@ -18,7 +18,7 @@ export function renderTool(
params: any | undefined,
result: ToolResultMessage | undefined,
isStreaming?: boolean,
): TemplateResult {
): ToolRenderResult {
const renderer = getToolRenderer(toolName);
if (renderer) {
return renderer.render(params, result, isStreaming);
@ -26,4 +26,4 @@ export function renderTool(
return defaultRenderer.render(params, result, isStreaming);
}
export { registerToolRenderer, getToolRenderer };
export { getToolRenderer, registerToolRenderer };

58
packages/web-ui/src/tools/javascript-repl.ts
View file

@ -1,4 +1,4 @@
import { html, i18n, type TemplateResult } from "@mariozechner/mini-lit";
import { html, i18n } from "@mariozechner/mini-lit";
import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
import { type Static, Type } from "@sinclair/typebox";
import { createRef, ref } from "lit/directives/ref.js";
@ -8,7 +8,7 @@ import type { SandboxRuntimeProvider } from "../components/sandbox/SandboxRuntim
import { JAVASCRIPT_REPL_DESCRIPTION } from "../prompts/tool-prompts.js";
import type { Attachment } from "../utils/attachment-utils.js";
import { registerToolRenderer, renderCollapsibleHeader, renderHeader } from "./renderer-registry.js";
import type { ToolRenderer } from "./types.js";
import type { ToolRenderer, ToolRenderResult } from "./types.js";
// Execute JavaScript code with attachments using SandboxedIframe
export async function executeJavaScript(
@ -194,7 +194,7 @@ export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScri
params: JavaScriptReplParams | undefined,
result: ToolResultMessage<JavaScriptReplResult> | undefined,
isStreaming?: boolean,
): TemplateResult {
): ToolRenderResult {
// Determine status
const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
@ -236,38 +236,44 @@ export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScri
};
});
return html`
<div>
${renderCollapsibleHeader(state, Code, params.title ? params.title : i18n("Executing JavaScript"), codeContentRef, codeChevronRef, false)}
<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
<code-block .code=${params.code || ""} language="javascript"></code-block>
${output ? html`<console-block .content=${output} .variant=${result.isError ? "error" : "default"}></console-block>` : ""}
return {
content: html`
<div>
${renderCollapsibleHeader(state, Code, params.title ? params.title : i18n("Executing JavaScript"), codeContentRef, codeChevronRef, false)}
<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
<code-block .code=${params.code || ""} language="javascript"></code-block>
${output ? html`<console-block .content=${output} .variant=${result.isError ? "error" : "default"}></console-block>` : ""}
</div>
${
attachments.length
? html`<div class="flex flex-wrap gap-2 mt-3">
${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
</div>`
: ""
}
</div>
${
attachments.length
? html`<div class="flex flex-wrap gap-2 mt-3">
${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
</div>`
: ""
}
</div>
`;
`,
isCustom: false,
};
}
// Just params (streaming or waiting for result)
if (params) {
return html`
<div>
${renderCollapsibleHeader(state, Code, params.title ? params.title : i18n("Executing JavaScript"), codeContentRef, codeChevronRef, false)}
<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
${params.code ? html`<code-block .code=${params.code} language="javascript"></code-block>` : ""}
return {
content: html`
<div>
${renderCollapsibleHeader(state, Code, params.title ? params.title : i18n("Executing JavaScript"), codeContentRef, codeChevronRef, false)}
<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
${params.code ? html`<code-block .code=${params.code} language="javascript"></code-block>` : ""}
</div>
</div>
</div>
`;
`,
isCustom: false,
};
}
// No params or result yet
return renderHeader(state, Code, i18n("Preparing JavaScript..."));
return { content: renderHeader(state, Code, i18n("Preparing JavaScript...")), isCustom: false };
},
};

38
packages/web-ui/src/tools/renderers/BashRenderer.ts
View file

@ -1,9 +1,9 @@
import { html, type TemplateResult } from "@mariozechner/mini-lit";
import { html } from "@mariozechner/mini-lit";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import { SquareTerminal } from "lucide";
import { i18n } from "../../utils/i18n.js";
import { renderHeader } from "../renderer-registry.js";
import type { ToolRenderer } from "../types.js";
import type { ToolRenderer, ToolRenderResult } from "../types.js";
interface BashParams {
command: string;
@ -11,32 +11,38 @@ interface BashParams {
// Bash tool has undefined details (only uses output)
export class BashRenderer implements ToolRenderer<BashParams, undefined> {
render(params: BashParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
render(params: BashParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
// With result: show command + output
if (result && params?.command) {
const output = result.output || "";
const combined = output ? `> ${params.command}\n\n${output}` : `> ${params.command}`;
return html`
<div class="space-y-3">
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
<console-block .content=${combined} .variant=${result.isError ? "error" : "default"}></console-block>
</div>
`;
return {
content: html`
<div class="space-y-3">
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
<console-block .content=${combined} .variant=${result.isError ? "error" : "default"}></console-block>
</div>
`,
isCustom: false,
};
}
// Just params (streaming or waiting)
if (params?.command) {
return html`
<div class="space-y-3">
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
<console-block .content=${`> ${params.command}`}></console-block>
</div>
`;
return {
content: html`
<div class="space-y-3">
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
<console-block .content=${`> ${params.command}`}></console-block>
</div>
`,
isCustom: false,
};
}
// No params yet
return renderHeader(state, SquareTerminal, i18n("Waiting for command..."));
return { content: renderHeader(state, SquareTerminal, i18n("Waiting for command...")), isCustom: false };
}
}

32
packages/web-ui/src/tools/renderers/CalculateRenderer.ts
View file

@ -1,9 +1,9 @@
import { html, type TemplateResult } from "@mariozechner/mini-lit";
import { html } from "@mariozechner/mini-lit";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import { Calculator } from "lucide";
import { i18n } from "../../utils/i18n.js";
import { renderHeader } from "../renderer-registry.js";
import type { ToolRenderer } from "../types.js";
import type { ToolRenderer, ToolRenderResult } from "../types.js";
interface CalculateParams {
expression: string;
@ -11,7 +11,7 @@ interface CalculateParams {
// Calculate tool has undefined details (only uses output)
export class CalculateRenderer implements ToolRenderer<CalculateParams, undefined> {
render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
// Full params + full result
@ -20,29 +20,35 @@ export class CalculateRenderer implements ToolRenderer<CalculateParams, undefine
// Error: show expression in header, error below
if (result.isError) {
return html`
<div class="space-y-3">
${renderHeader(state, Calculator, params.expression)}
<div class="text-sm text-destructive">${output}</div>
</div>
`;
return {
content: html`
<div class="space-y-3">
${renderHeader(state, Calculator, params.expression)}
<div class="text-sm text-destructive">${output}</div>
</div>
`,
isCustom: false,
};
}
// Success: show expression = result in header
return renderHeader(state, Calculator, `${params.expression} = ${output}`);
return { content: renderHeader(state, Calculator, `${params.expression} = ${output}`), isCustom: false };
}
// Full params, no result: just show header with expression in it
if (params?.expression) {
return renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`);
return {
content: renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`),
isCustom: false,
};
}
// Partial params (empty expression), no result
if (params && !params.expression) {
return renderHeader(state, Calculator, i18n("Writing expression..."));
return { content: renderHeader(state, Calculator, i18n("Writing expression...")), isCustom: false };
}
// No params, no result
return renderHeader(state, Calculator, i18n("Waiting for expression..."));
return { content: renderHeader(state, Calculator, i18n("Waiting for expression...")), isCustom: false };
}
}

23
packages/web-ui/src/tools/renderers/DefaultRenderer.ts
View file

@ -1,14 +1,17 @@
import { html, type TemplateResult } from "@mariozechner/mini-lit";
import { html } from "@mariozechner/mini-lit";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import { i18n } from "../../utils/i18n.js";
import type { ToolRenderer } from "../types.js";
import type { ToolRenderer, ToolRenderResult } from "../types.js";
export class DefaultRenderer implements ToolRenderer {
render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): TemplateResult {
render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): ToolRenderResult {
// Show result if available
if (result) {
const text = result.output || i18n("(no output)");
return html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
return {
content: html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`,
isCustom: false,
};
}
// Show params
@ -25,13 +28,19 @@ export class DefaultRenderer implements ToolRenderer {
}
if (isStreaming && (!text || text === "{}" || text === "null")) {
return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`;
return {
content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`,
isCustom: false,
};
}
return html`<console-block .content=${text}></console-block>`;
return { content: html`<console-block .content=${text}></console-block>`, isCustom: false };
}
// No params or result yet
return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`;
return {
content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`,
isCustom: false,
};
}
}

55
packages/web-ui/src/tools/renderers/GetCurrentTimeRenderer.ts
View file

@ -1,9 +1,9 @@
import { html, type TemplateResult } from "@mariozechner/mini-lit";
import { html } from "@mariozechner/mini-lit";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import { Clock } from "lucide";
import { i18n } from "../../utils/i18n.js";
import { renderHeader } from "../renderer-registry.js";
import type { ToolRenderer } from "../types.js";
import type { ToolRenderer, ToolRenderResult } from "../types.js";
interface GetCurrentTimeParams {
timezone?: string;
@ -11,7 +11,10 @@ interface GetCurrentTimeParams {
// GetCurrentTime tool has undefined details (only uses output)
export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams, undefined> {
render(params: GetCurrentTimeParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
render(
params: GetCurrentTimeParams | undefined,
result: ToolResultMessage<undefined> | undefined,
): ToolRenderResult {
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
// Full params + full result
@ -23,16 +26,19 @@ export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams
// Error: show header, error below
if (result.isError) {
return html`
<div class="space-y-3">
${renderHeader(state, Clock, headerText)}
<div class="text-sm text-destructive">${output}</div>
</div>
`;
return {
content: html`
<div class="space-y-3">
${renderHeader(state, Clock, headerText)}
<div class="text-sm text-destructive">${output}</div>
</div>
`,
isCustom: false,
};
}
// Success: show time in header
return renderHeader(state, Clock, `${headerText}: ${output}`);
return { content: renderHeader(state, Clock, `${headerText}: ${output}`), isCustom: false };
}
// Full result, no params
@ -41,29 +47,38 @@ export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams
// Error: show header, error below
if (result.isError) {
return html`
<div class="space-y-3">
${renderHeader(state, Clock, i18n("Getting current date and time"))}
<div class="text-sm text-destructive">${output}</div>
</div>
`;
return {
content: html`
<div class="space-y-3">
${renderHeader(state, Clock, i18n("Getting current date and time"))}
<div class="text-sm text-destructive">${output}</div>
</div>
`,
isCustom: false,
};
}
// Success: show time in header
return renderHeader(state, Clock, `${i18n("Getting current date and time")}: ${output}`);
return {
content: renderHeader(state, Clock, `${i18n("Getting current date and time")}: ${output}`),
isCustom: false,
};
}
// Full params, no result: show timezone info in header
if (params?.timezone) {
return renderHeader(state, Clock, `${i18n("Getting current time in")} ${params.timezone}`);
return {
content: renderHeader(state, Clock, `${i18n("Getting current time in")} ${params.timezone}`),
isCustom: false,
};
}
// Partial params (no timezone) or empty params, no result
if (params) {
return renderHeader(state, Clock, i18n("Getting current date and time"));
return { content: renderHeader(state, Clock, i18n("Getting current date and time")), isCustom: false };
}
// No params, no result
return renderHeader(state, Clock, i18n("Getting time..."));
return { content: renderHeader(state, Clock, i18n("Getting time...")), isCustom: false };
}
}

7
packages/web-ui/src/tools/types.ts
View file

@ -1,10 +1,15 @@
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import type { TemplateResult } from "lit";
export interface ToolRenderResult {
content: TemplateResult;
isCustom: boolean; // true = no card wrapper, false = wrap in card
}
export interface ToolRenderer<TParams = any, TDetails = any> {
render(
params: TParams | undefined,
result: ToolResultMessage<TDetails> | undefined,
isStreaming?: boolean,
): TemplateResult;
): ToolRenderResult;
}