shumengya/sproutclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor artifacts renderer and add Console component

Browse Source 
- Extract ArtifactsToolRenderer from ArtifactsPanel into standalone renderer
- Fix ChatPanel to register ArtifactsToolRenderer instead of panel
- Implement command-specific rendering logic (create/update/rewrite/get/logs/delete)
- Create reusable Console component with copy button and autoscroll toggle
- Replace custom console implementation with ExpandableSection and Console
- Fix Lit reactivity for HtmlArtifact logs using spread operator
- Add Lucide icons (FileCode2, ChevronsDown, Lock) for UI consistency
- Follow skill.ts patterns with renderHeader and state handling
- Add i18n strings for all artifact actions and console features
This commit is contained in:
Mario Zechner
2025-10-08 01:54:50 +02:00
parent a8159f504f
commit 8ec9805112
19 changed files with 716 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/web-ui/src/tools/renderers/BashRenderer.ts
View File

@@ -1,6 +1,8 @@
import { html, type TemplateResult } 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";
interface BashParams {
@@ -9,37 +11,32 @@ interface BashParams {
// Bash tool has undefined details (only uses output)
export class BashRenderer implements ToolRenderer<BashParams, undefined> {
renderParams(params: BashParams, isStreaming?: boolean): TemplateResult {
if (isStreaming && (!params.command || params.command.length === 0)) {
return html`<div class="text-sm text-muted-foreground">${i18n("Writing command...")}</div>`;
}
render(params: BashParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
return html`
<div class="text-sm text-muted-foreground">
<span>${i18n("Running command:")}</span>
<code class="ml-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.command}</code>
</div>
`;
}
renderResult(_params: BashParams, result: ToolResultMessage<undefined>): TemplateResult {
const output = result.output || "";
const isError = result.isError === true;
if (isError) {
// 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="text-sm">
<div class="text-destructive font-medium mb-1">${i18n("Command failed:")}</div>
<pre class="text-xs font-mono text-destructive bg-destructive/10 p-2 rounded overflow-x-auto">${output}</pre>
<div class="space-y-3">
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
<console-block .content=${combined} .variant=${result.isError ? "error" : "default"}></console-block>
</div>
`;
}
// Display the command output
return html`
<div class="text-sm">
<pre class="text-xs font-mono text-foreground bg-muted/50 p-2 rounded overflow-x-auto">${output}</pre>
</div>
`;
// 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>
`;
}
// No params yet
return renderHeader(state, SquareTerminal, i18n("Waiting for command..."));
}
}