webui: add tooltips to 🥷 and 🐢 in bash tool cards
For when people are curious.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sc49577a78023541dk
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 72d4a48..674a27c 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -83,8 +83,8 @@
const inputData = JSON.parse(this.toolCall?.input || "{}");
const isBackground = inputData?.background === true;
const isSlowOk = inputData?.slow_ok === true;
- const backgroundIcon = isBackground ? "🥷 " : "";
- const slowIcon = isSlowOk ? "🐢 " : "";
+ const backgroundIcon = isBackground ? html`<span title="Running in background">🥷</span> ` : "";
+ const slowIcon = isSlowOk ? html`<span title="Extended timeouts">🐢</span> ` : "";
// Truncate the command if it's too long to display nicely
const command = inputData?.command || "";
@@ -101,10 +101,10 @@
class="flex w-full max-w-full flex-col overflow-wrap-break-word break-words"
>
<div class="w-full relative">
- ${createPreElement(
- `${backgroundIcon}${slowIcon}${inputData?.command}`,
- "w-full mb-0 rounded-t rounded-b-none box-border",
- )}
+ <pre
+ class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none box-border"
+ >
+${backgroundIcon}${slowIcon}${inputData?.command}</pre>
</div>
</div>`;