fix(ui): render markdown in tool result cards

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Docs: document built-in model shorthands + precedence (user config wins).
 
 ### Fixes
+- Control UI: render Markdown in tool result cards.
 - Control UI: prevent overlapping action buttons in Discord guild rules on narrow layouts.
 - Android: tapping the foreground service notification brings the app to the front. (#179) — thanks @Syhids
 - Cron tool passes `id` to the gateway for update/remove/run/runs (keeps `jobId` input). (#180) — thanks @adamgall

ui/src/ui/chat-markdown.browser.test.ts

@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { ClawdbotApp } from "./app";
+
+const originalConnect = ClawdbotApp.prototype.connect;
+
+function mountApp(pathname: string) {
+  window.history.replaceState({}, "", pathname);
+  const app = document.createElement("clawdbot-app") as ClawdbotApp;
+  document.body.append(app);
+  return app;
+}
+
+beforeEach(() => {
+  ClawdbotApp.prototype.connect = () => {
+    // no-op: avoid real gateway WS connections in browser tests
+  };
+  window.__CLAWDBOT_CONTROL_UI_BASE_PATH__ = undefined;
+  document.body.innerHTML = "";
+});
+
+afterEach(() => {
+  ClawdbotApp.prototype.connect = originalConnect;
+  window.__CLAWDBOT_CONTROL_UI_BASE_PATH__ = undefined;
+  document.body.innerHTML = "";
+});
+
+describe("chat markdown rendering", () => {
+  it("renders markdown inside tool result cards", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    app.chatMessages = [
+      {
+        role: "assistant",
+        content: [
+          { type: "toolcall", name: "noop", arguments: {} },
+          { type: "toolresult", name: "noop", text: "Hello **world**" },
+        ],
+        timestamp: Date.now(),
+      },
+    ];
+
+    await app.updateComplete;
+
+    const strong = app.querySelector(".chat-tool-card__output strong");
+    expect(strong?.textContent).toBe("world");
+  });
+});
+

ui/src/ui/views/chat.ts

@@ -289,7 +289,9 @@ function renderToolCard(card: ToolCard) {
         ? html`<div class="chat-tool-card__detail">${detail}</div>`
         : nothing}
       ${card.text
-        ? html`<div class="chat-tool-card__output">${card.text}</div>`
+        ? html`<div class="chat-tool-card__output chat-text">
+            ${unsafeHTML(toSanitizedMarkdownHtml(card.text))}
+          </div>`
         : nothing}
     </div>
   `;