diff --git a/canvas/src/components/ConversationTraceModal.tsx b/canvas/src/components/ConversationTraceModal.tsx
index 63afe664..c585781a 100644
--- a/canvas/src/components/ConversationTraceModal.tsx
+++ b/canvas/src/components/ConversationTraceModal.tsx
@@ -31,17 +31,25 @@ export function extractMessageText(body: Record<string, unknown> | null): string
     if (text) return text;
 
     // Response: result.parts[].text or result.parts[].root.text
+    // Use the first part that has a direct text field; within that part,
+    // prefer direct text over root.text. Subsequent parts' root.text fields
+    // are ignored when a direct text exists in an earlier part.
     const result = body.result as Record<string, unknown> | undefined;
     const rParts = (result?.parts || []) as Array<Record<string, unknown>>;
-    const rText = rParts
-      .map((p) => {
-        if (p.text) return p.text as string;
-        const root = p.root as Record<string, unknown> | undefined;
-        return (root?.text as string) || "";
-      })
-      .filter(Boolean)
-      .join("\n");
-    if (rText) return rText;
+    const firstPartWithText = rParts.find(
+      (p) => typeof p.text === "string" && (p.text as string) !== ""
+    );
+    if (firstPartWithText) {
+      return firstPartWithText.text as string;
+    }
+    // No direct text found; use root.text from the first part (if present).
+    const firstPart = rParts[0];
+    if (firstPart) {
+      const root = firstPart.root as Record<string, unknown> | undefined;
+      if (typeof root?.text === "string" && root.text !== "") {
+        return root.text as string;
+      }
+    }
 
     if (typeof body.result === "string") return body.result;
   } catch { /* ignore */ }
diff --git a/canvas/src/components/__tests__/Spinner.test.tsx b/canvas/src/components/__tests__/Spinner.test.tsx
index 610f3a03..ae85b060 100644
--- a/canvas/src/components/__tests__/Spinner.test.tsx
+++ b/canvas/src/components/__tests__/Spinner.test.tsx
@@ -3,52 +3,56 @@
  * Tests for Spinner component.
  *
  * Covers: sm/md/lg size classes, aria-hidden, motion-safe animate-spin class.
+ *
+ * NOTE: SVG elements use SVGAnimatedString for className (not a plain string),
+ * so we use getAttribute("class") instead of className for assertions.
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { Spinner } from "../Spinner";
 
+afterEach(cleanup);
+
+function getSvgClass(r: ReturnType<typeof render>): string {
+  const svg = r.container.querySelector("svg");
+  if (!svg) throw new Error("No SVG found");
+  return svg.getAttribute("class") ?? "";
+}
+
 describe("Spinner — size variants", () => {
   it("renders with sm size class", () => {
-    const { container } = render(<Spinner size="sm" />);
-    const svg = container.querySelector("svg");
-    expect(svg).toBeTruthy();
-    expect(svg?.className).toContain("w-3");
-    expect(svg?.className).toContain("h-3");
+    const r = render(<Spinner size="sm" />);
+    expect(getSvgClass(r)).toContain("w-3");
+    expect(getSvgClass(r)).toContain("h-3");
   });
 
   it("renders with md size class (default)", () => {
-    const { container } = render(<Spinner size="md" />);
-    const svg = container.querySelector("svg");
-    expect(svg?.className).toContain("w-4");
-    expect(svg?.className).toContain("h-4");
+    const r = render(<Spinner size="md" />);
+    expect(getSvgClass(r)).toContain("w-4");
+    expect(getSvgClass(r)).toContain("h-4");
   });
 
   it("renders with lg size class", () => {
-    const { container } = render(<Spinner size="lg" />);
-    const svg = container.querySelector("svg");
-    expect(svg?.className).toContain("w-5");
-    expect(svg?.className).toContain("h-5");
+    const r = render(<Spinner size="lg" />);
+    expect(getSvgClass(r)).toContain("w-5");
+    expect(getSvgClass(r)).toContain("h-5");
   });
 
   it("defaults to md size when no size prop given", () => {
-    const { container } = render(<Spinner />);
-    const svg = container.querySelector("svg");
-    expect(svg?.className).toContain("w-4");
-    expect(svg?.className).toContain("h-4");
+    const r = render(<Spinner />);
+    expect(getSvgClass(r)).toContain("w-4");
+    expect(getSvgClass(r)).toContain("h-4");
   });
 
   it("has aria-hidden=true so screen readers skip it", () => {
-    const { container } = render(<Spinner />);
-    const svg = container.querySelector("svg");
+    const r = render(<Spinner />);
+    const svg = r.container.querySelector("svg");
     expect(svg?.getAttribute("aria-hidden")).toBe("true");
   });
 
   it("includes the motion-safe:animate-spin class for CSS animation", () => {
-    const { container } = render(<Spinner />);
-    const svg = container.querySelector("svg");
-    expect(svg?.className).toContain("motion-safe:animate-spin");
+    expect(getSvgClass(render(<Spinner />))).toContain("motion-safe:animate-spin");
   });
 
   it("renders exactly one SVG element", () => {