test: mock chat sidebar markdown

ui/src/ui/markdown.test.ts

@@ -1,5 +1,7 @@
+import { render } from "lit";
 import { describe, expect, it, vi } from "vitest";
 import { md, toSanitizedMarkdownHtml } from "./markdown.ts";
+import { renderMarkdownSidebar } from "./views/markdown-sidebar.ts";
 
 describe("toSanitizedMarkdownHtml", () => {
   // ── Original tests from before markdown-it migration ──
@@ -510,3 +512,21 @@ describe("toSanitizedMarkdownHtml", () => {
     });
   });
 });
+
+describe("renderMarkdownSidebar", () => {
+  it("renders sanitized markdown content", () => {
+    const container = document.createElement("div");
+
+    render(
+      renderMarkdownSidebar({
+        content: { kind: "markdown", content: "Hello **world**" },
+        error: null,
+        onClose: () => undefined,
+        onViewRawText: () => undefined,
+      }),
+      container,
+    );
+
+    expect(container.querySelector(".sidebar-markdown strong")?.textContent).toBe("world");
+  });
+});

ui/src/ui/views/chat.test.ts

@@ -8,6 +8,16 @@ import { normalizeMessage } from "../chat/message-normalizer.ts";
 import type { SessionsListResult } from "../types.ts";
 import { renderChat, type ChatProps } from "./chat.ts";
 
+vi.mock("./markdown-sidebar.ts", async () => {
+  const { html } = await import("lit");
+  return {
+    renderMarkdownSidebar: (props: { content?: { content?: string; title?: string } | null }) =>
+      html`<div class="sidebar-panel" data-mocked-sidebar>
+        ${props.content?.title ?? props.content?.content ?? ""}
+      </div>`,
+  };
+});
+
 function createSessions(): SessionsListResult {
   return {
     ts: 0,
@@ -1516,57 +1526,6 @@ describe("chat view", () => {
     );
   });
 
-  it("renders markdown inside tool output sidebar", async () => {
-    const container = document.createElement("div");
-    let sidebarContent: ChatProps["sidebarContent"] = null;
-    const messages = [
-      {
-        role: "assistant",
-        content: [
-          { type: "toolcall", name: "noop", arguments: {} },
-          { type: "toolresult", name: "noop", text: "Hello **world**" },
-        ],
-        timestamp: Date.now(),
-      },
-    ];
-    const renderWithSidebar = () =>
-      render(
-        renderChat(
-          createProps({
-            messages,
-            sidebarOpen: sidebarContent !== null,
-            sidebarContent,
-            sidebarError: null,
-            onOpenSidebar: (content) => {
-              sidebarContent = content;
-              renderWithSidebar();
-            },
-            onCloseSidebar: () => {
-              sidebarContent = null;
-              renderWithSidebar();
-            },
-            onRequestUpdate: renderWithSidebar,
-          }),
-        ),
-        container,
-      );
-
-    renderWithSidebar();
-
-    const toolSummary = container.querySelector<HTMLElement>(".chat-tool-msg-summary");
-    expect(toolSummary).not.toBeNull();
-    toolSummary?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    await flushTasks();
-
-    const openSidebarButton = container.querySelector<HTMLElement>(".chat-tool-card__action-btn");
-    expect(openSidebarButton).not.toBeNull();
-    openSidebarButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    await flushTasks();
-
-    const strongNodes = Array.from(container.querySelectorAll(".sidebar-markdown strong"));
-    expect(strongNodes.some((node) => node.textContent === "world")).toBe(true);
-  });
-
   it("lets a tool call collapse while keeping matching tool output visible", async () => {
     const container = document.createElement("div");