@stigmer/react 3.9.0 → 3.11.0

package/src/execution/__tests__/FilePathLink.test.tsx

@@ -41,7 +41,7 @@ describe("FilePathLink filename-first display", () => {
     // path that hid the file name.
     render(<FilePathLink path="/Users/me/scm/very/deep/notes.md" dirDisplay="dim" />);
     const base = screen.getByText("notes.md");
-    expect(base.className).toContain("shrink-0");
+    expect(base.className).toContain("stg:shrink-0");
     expect(base.className).not.toContain("truncate");
   });
 });

package/src/execution/__tests__/FileReviewDock.test.tsx

@@ -128,7 +128,7 @@ describe("FileReviewDock", () => {
     const dock = container.querySelector('[data-cursor-target="file-review-dock"]');
     expect(dock).toBeTruthy();
     const scroller = dock!.firstElementChild!;
-    expect(scroller.className).toContain("overflow-y-auto");
+    expect(scroller.className).toContain("stg:overflow-y-auto");
     expect(scroller.className).toContain("max-h-");
   });
 });

package/src/execution/__tests__/MessageEntry-attachments.test.tsx

@@ -0,0 +1,228 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+import { MessageEntry } from "../MessageEntry";
+import type { MessageAttachmentView } from "../MessageAttachments";
+
+// ---------------------------------------------------------------------------
+// MessageEntry attachment rendering (stigmer/stigmer#372): the human bubble
+// shows the turn's submitted files — image previews and document downloads
+// when the execution record exists, inert chips on the pending bubble, and
+// nothing at all when the turn had no attachments.
+//
+// The presign hooks are mocked at the module boundary: these are rendering
+// tests, and the URL-minting contract has its own coverage.
+// ---------------------------------------------------------------------------
+
+const downloadSpy = vi.fn(() => Promise.resolve());
+let urlState: { url: string | null; error: Error | null } = {
+  url: null,
+  error: null,
+};
+
+vi.mock("../useArtifactDownloadUrl", () => ({
+  useArtifactDownloadUrl: (executionId: string | null, storageKey: string | null) => ({
+    url: executionId && storageKey ? urlState.url : null,
+    isLoading: false,
+    isRefetching: false,
+    error: urlState.error,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("../useArtifactDownload", () => ({
+  useArtifactDownload: (executionId: string | null) => ({
+    download: executionId ? downloadSpy : vi.fn(() => Promise.resolve()),
+    isDownloading: false,
+    error: null,
+  }),
+}));
+
+// happy-dom does not implement the native dialog show/close methods.
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  downloadSpy.mockClear();
+  urlState = { url: null, error: null };
+});
+
+function humanMessage(content: string) {
+  const msg = create(AgentMessageSchema);
+  msg.type = MessageType.MESSAGE_HUMAN;
+  msg.content = content;
+  return msg;
+}
+
+const imageAttachment: MessageAttachmentView = {
+  filename: "screenshot.png",
+  contentType: "image/png",
+  storageKey: "attachments/01AAA/screenshot.png",
+};
+
+const documentAttachment: MessageAttachmentView = {
+  filename: "notes.txt",
+  contentType: "text/plain",
+  storageKey: "attachments/01BBB/notes.txt",
+};
+
+describe("MessageEntry attachment rendering", () => {
+  it("renders no attachment row when the turn has none", () => {
+    render(<MessageEntry message={humanMessage("Just text.")} />);
+
+    expect(screen.queryByRole("list", { name: "Submitted attachments" })).toBeNull();
+    expect(screen.getByText("Just text.")).toBeTruthy();
+  });
+
+  it("renders an image preview chip with the presigned URL and click-to-open lightbox", () => {
+    urlState = { url: "https://r2.example/presigned/screenshot", error: null };
+
+    const { container } = render(
+      <MessageEntry
+        message={humanMessage("See the screenshot.")}
+        attachments={[imageAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    expect(screen.getByRole("list", { name: "Submitted attachments" })).toBeTruthy();
+    const img = container.querySelector("img[aria-hidden='true']");
+    expect(img?.getAttribute("src")).toBe("https://r2.example/presigned/screenshot");
+
+    // Click-to-open: the shared lightbox mounts with the full image.
+    fireEvent.click(screen.getByRole("button", { name: "Preview screenshot.png" }));
+    const dialog = container.querySelector("dialog");
+    expect(dialog).toBeTruthy();
+    expect(dialog!.getAttribute("aria-label")).toBe("Preview screenshot.png");
+  });
+
+  it("renders a document chip that downloads under the original filename", () => {
+    render(
+      <MessageEntry
+        message={humanMessage("The notes are attached.")}
+        attachments={[documentAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Download notes.txt" }));
+    expect(downloadSpy).toHaveBeenCalledWith(
+      "attachments/01BBB/notes.txt",
+      "notes.txt",
+    );
+  });
+
+  it("renders no visible filename on image tiles — identity lives in the tooltip and accessible label", () => {
+    urlState = { url: "https://r2.example/presigned/screenshot", error: null };
+
+    render(
+      <MessageEntry
+        message={humanMessage("See the screenshot.")}
+        attachments={[imageAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    // The tile is preview-only: no "screenshot.png" text node anywhere…
+    expect(screen.queryByText("screenshot.png")).toBeNull();
+    // …but the name stays reachable — tooltip on the listitem, aria on both.
+    const tile = screen.getByRole("listitem", { name: "screenshot.png" });
+    expect(tile.getAttribute("title")).toBe("screenshot.png");
+    expect(
+      screen.getByRole("button", { name: "Preview screenshot.png" }),
+    ).toBeTruthy();
+  });
+
+  it("pulses the image tile only while the presigned URL is being minted", () => {
+    urlState = { url: null, error: null };
+
+    const { container } = render(
+      <MessageEntry
+        message={humanMessage("See the screenshot.")}
+        attachments={[imageAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    // Mint in flight: pulse placeholder, no image yet.
+    expect(container.querySelector(".stg\\:animate-pulse")).toBeTruthy();
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("renders inert chips on the pending bubble (no executionId): no preview, no download", () => {
+    const { container } = render(
+      <MessageEntry
+        message={humanMessage("Sending files…")}
+        attachments={[imageAttachment, documentAttachment]}
+      />,
+    );
+
+    // Both files are present as evidence — the image as a glyph tile
+    // (named via aria/tooltip), the document as a filename chip…
+    expect(screen.getByRole("list", { name: "Submitted attachments" })).toBeTruthy();
+    expect(screen.getByRole("listitem", { name: "screenshot.png" })).toBeTruthy();
+    expect(screen.getByText("notes.txt")).toBeTruthy();
+    // …but no byte-backed affordances exist yet.
+    expect(container.querySelector("img")).toBeNull();
+    expect(screen.queryByRole("button", { name: /Preview|Download/ })).toBeNull();
+    // The tile is STATIC — a pulse would promise bytes that a failed send
+    // (the other no-executionId bubble) never delivers.
+    expect(container.querySelector(".stg\\:animate-pulse")).toBeNull();
+  });
+
+  it("degrades an image chip to the document treatment when the URL cannot be minted", () => {
+    urlState = { url: null, error: new Error("presign failed") };
+
+    const { container } = render(
+      <MessageEntry
+        message={humanMessage("See the screenshot.")}
+        attachments={[imageAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    // Never a broken-image glyph — the file stays reachable via download.
+    expect(container.querySelector("img")).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Download screenshot.png" }),
+    ).toBeTruthy();
+  });
+
+  it("falls back to the storage key's basename when the filename is missing", () => {
+    render(
+      <MessageEntry
+        message={humanMessage("Unnamed attachment.")}
+        attachments={[{ storageKey: "attachments/01CCC/data.bin" }]}
+        executionId="exec-1"
+      />,
+    );
+
+    expect(screen.getByText("data.bin")).toBeTruthy();
+  });
+
+  it("ignores attachments on non-human messages", () => {
+    const aiMsg = create(AgentMessageSchema);
+    aiMsg.type = MessageType.MESSAGE_AI;
+    aiMsg.content = "Assistant reply.";
+
+    render(
+      <MessageEntry
+        message={aiMsg}
+        attachments={[documentAttachment]}
+        executionId="exec-1"
+      />,
+    );
+
+    expect(screen.queryByRole("list", { name: "Submitted attachments" })).toBeNull();
+  });
+});

package/src/execution/__tests__/MessageThread.test.tsx

@@ -490,7 +490,7 @@ describe("MessageThread", () => {
     expect(pendingText).toBeTruthy();
 
     const article = pendingText.closest("[role='article']");
-    expect(article?.className).toContain("opacity-70");
+    expect(article?.className).toContain("stg:opacity-70");
   });
 
   it("renders approval card when onApprovalSubmit is provided and execution has pending approvals", () => {

package/src/execution/__tests__/TerminalSession.test.tsx

@@ -36,7 +36,7 @@ describe("TerminalSession", () => {
   it("renders stderr in the destructive color", () => {
     render(<TerminalSession command="oops" stderr="bad things" exitCode={1} />);
     const stderr = screen.getByText("bad things");
-    expect(stderr.className).toContain("text-destructive");
+    expect(stderr.className).toContain("stg:text-destructive");
   });
 
   it("preserves a multi-line (heredoc) command in full", () => {

package/src/execution/__tests__/ToolCallDetail.test.tsx

@@ -242,7 +242,7 @@ describe("ToolCallDetail — write body", () => {
   // absence is how these tests pin WHICH truncation mechanism bounds the body —
   // jsdom has no layout, so the reveal control itself only appears for the
   // line-count mechanism (CollapsibleCode), never for the pixel clamp.
-  const CLAMP = ".max-h-48";
+  const CLAMP = ".stg\\:max-h-48";
 
   /** A change set capturing one reviewable modify of `path`. */
   function capturedSet(

package/src/execution/__tests__/ToolCallGroup.test.tsx

@@ -117,16 +117,16 @@ describe("ToolCallGroup timeline", () => {
 
     const group = container.querySelector('[data-cursor-target="tool-call-group"]')!;
     // Cards stacked with a gap — the old left rail is gone.
-    expect(group.className).toContain("gap-2");
-    expect(group.className).not.toContain("border-l-2");
+    expect(group.className).toContain("stg:gap-2");
+    expect(group.className).not.toContain("stg:border-l-2");
 
     const rows = container.querySelectorAll('[data-cursor-target="tool-call-row"]');
     expect(rows.length).toBe(2);
     for (const row of rows) {
-      expect(row.className).toContain("rounded-lg");
+      expect(row.className).toContain("stg:rounded-lg");
       // Class presence only — actual rendering is guarded by the layer-invariant
       // + e2e computed-style tests (happy-dom does not resolve `@layer`).
-      expect(row.className).toContain("border-border-prominent");
+      expect(row.className).toContain("stg:border-border-prominent");
     }
   });
 });

package/src/execution/__tests__/ToolCallItem.test.tsx

@@ -133,7 +133,7 @@ describe("ToolCallItem disclosure", () => {
         })}
       />,
     );
-    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector(".stg\\:animate-spin")).toBeNull();
     expect(hasHeaderChevron(container)).toBe(true);
     expect(isExpanded(container)).toBe(false);
   });
@@ -152,7 +152,7 @@ describe("ToolCallItem disclosure", () => {
       />,
     );
     expect(isExpanded(container)).toBe(true);
-    expect(container.querySelector(".animate-spin")).not.toBeNull();
+    expect(container.querySelector(".stg\\:animate-spin")).not.toBeNull();
 
     rerender(
       <ToolCallItem
@@ -164,7 +164,7 @@ describe("ToolCallItem disclosure", () => {
         })}
       />,
     );
-    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector(".stg\\:animate-spin")).toBeNull();
     expect(isExpanded(container)).toBe(false);
   });
 
@@ -386,8 +386,8 @@ describe("ToolCallItem disclosure", () => {
     );
 
     const row = container.querySelector('[data-cursor-target="tool-call-row"]')!;
-    expect(row.className).toContain("border-l-destructive");
-    expect(row.className).not.toContain("bg-warning");
+    expect(row.className).toContain("stg:border-l-destructive");
+    expect(row.className).not.toContain("stg:bg-warning");
   });
 
   it("routes an inline APPROVE_ALL decision with the gated tool's id", () => {
@@ -463,13 +463,13 @@ describe("ToolCallItem disclosure", () => {
 
     const { container, rerender } = render(<ToolCallItem toolCall={tc} />);
     let row = container.querySelector('[data-cursor-target="tool-call-row"]')!;
-    expect(row.className).toContain("rounded-lg");
-    expect(row.className).toContain("border-border-prominent");
+    expect(row.className).toContain("stg:rounded-lg");
+    expect(row.className).toContain("stg:border-border-prominent");
 
     rerender(<ToolCallItem toolCall={tc} bordered={false} />);
     row = container.querySelector('[data-cursor-target="tool-call-row"]')!;
-    expect(row.className).not.toContain("rounded-lg");
-    expect(row.className).toContain("border-b");
+    expect(row.className).not.toContain("stg:rounded-lg");
+    expect(row.className).toContain("stg:border-b");
   });
 });
 

package/src/execution/__tests__/ToolRunGroup.test.tsx

@@ -88,11 +88,11 @@ describe("ToolRunGroup", () => {
         ]}
       />,
     );
-    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector(".stg\\:animate-spin")).toBeNull();
     expect(chipExpanded(container)).toBe(false);
     // The aggregate resolves to the terminal branch (completed chip in
     // text-success), not the non-terminal pending fallback (muted dot).
-    expect(container.querySelector(".text-success")).not.toBeNull();
+    expect(container.querySelector(".stg\\:text-success")).not.toBeNull();
     expect(screen.getByText("Read 2 files")).toBeTruthy();
   });
 
@@ -130,10 +130,10 @@ describe("ToolRunGroup", () => {
     );
 
     const chip = container.querySelector('[data-cursor-target="tool-run-group"]')!;
-    expect(chip.className).toContain("rounded-lg");
+    expect(chip.className).toContain("stg:rounded-lg");
     // Class presence only — actual rendering is guarded by the layer-invariant +
     // e2e computed-style tests (happy-dom does not resolve `@layer`).
-    expect(chip.className).toContain("border-border-prominent");
+    expect(chip.className).toContain("stg:border-border-prominent");
 
     fireEvent.click(screen.getByText("Read 2 files"));
 
@@ -141,8 +141,8 @@ describe("ToolRunGroup", () => {
     const rows = container.querySelectorAll('[data-cursor-target="tool-call-row"]');
     expect(rows.length).toBe(2);
     for (const row of rows) {
-      expect(row.className).not.toContain("rounded-lg");
-      expect(row.className).toContain("border-b");
+      expect(row.className).not.toContain("stg:rounded-lg");
+      expect(row.className).toContain("stg:border-b");
     }
   });
 

package/src/execution/__tests__/WriteBackCard.test.tsx

@@ -104,9 +104,9 @@ describe("WriteBackCard", () => {
       />,
     );
     const error = screen.getByText(/git push failed/);
-    expect(error.className).toContain("text-destructive");
+    expect(error.className).toContain("stg:text-destructive");
     const caption = screen.getByText("Failed");
-    expect(caption.className).toContain("text-destructive");
+    expect(caption.className).toContain("stg:text-destructive");
   });
 
   it("renders a PUSHED record's PR error as a degraded notice, branch info intact", () => {
@@ -124,8 +124,8 @@ describe("WriteBackCard", () => {
     expect(screen.getByText("stigmer/ses-01test")).toBeTruthy();
     expect(screen.getByText("Pushed")).toBeTruthy();
     const notice = screen.getByText(/no github token/i);
-    expect(notice.className).toContain("text-status-degraded");
-    expect(notice.className).not.toContain("text-destructive");
+    expect(notice.className).toContain("stg:text-status-degraded");
+    expect(notice.className).not.toContain("stg:text-destructive");
     expect(screen.queryByRole("link")).toBeNull();
   });
 

package/src/execution/__tests__/buildThreadItems-attachments.test.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect } from "vitest";
+import { create } from "@bufbuild/protobuf";
+import {
+  AgentExecutionSchema,
+  AgentExecutionStatusSchema,
+  type AgentExecution,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import {
+  AgentExecutionSpecSchema,
+  AttachmentSchema,
+  type Attachment,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/spec_pb";
+import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/metadata_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { buildThreadItems, type ThreadItem } from "../MessageThread";
+
+// ---------------------------------------------------------------------------
+// buildThreadItems attachment stamping (stigmer/stigmer#372)
+//
+// The human turn's submitted files come from two sources: the execution
+// record's spec.attachments (durable, presign-capable) and the submit
+// context's pendingAttachments (optimistic bubble, no execution yet). These
+// tests pin both stamps, the empty-list omission, and the reference
+// stability the memoized bubble depends on.
+// ---------------------------------------------------------------------------
+
+function makeAttachment(filename: string, storageKey: string): Attachment {
+  return create(AttachmentSchema, {
+    filename,
+    storageKey,
+    contentType: filename.endsWith(".png") ? "image/png" : "text/plain",
+  });
+}
+
+function makeExecution(opts: {
+  id: string;
+  specMessage: string;
+  attachments?: Attachment[];
+}): AgentExecution {
+  const exec = create(AgentExecutionSchema);
+  exec.metadata = create(ApiResourceMetadataSchema, { id: opts.id });
+  const spec = create(AgentExecutionSpecSchema);
+  spec.message = opts.specMessage;
+  if (opts.attachments) spec.attachments = opts.attachments;
+  exec.spec = spec;
+  const status = create(AgentExecutionStatusSchema);
+  status.phase = ExecutionPhase.EXECUTION_COMPLETED;
+  exec.status = status;
+  return exec;
+}
+
+function promptItem(items: readonly ThreadItem[], execId: string) {
+  return items.find(
+    (i): i is Extract<ThreadItem, { kind: "message" }> =>
+      i.kind === "message" && i.key === `${execId}-spec`,
+  );
+}
+
+function pendingItem(items: readonly ThreadItem[]) {
+  return items.find(
+    (i): i is Extract<ThreadItem, { kind: "message" }> =>
+      i.kind === "message" && i.key === "pending-user-turn",
+  );
+}
+
+describe("buildThreadItems spec.attachments stamping", () => {
+  it("stamps the synthetic human turn with the spec's attachments and the execution id", () => {
+    const attachments = [
+      makeAttachment("notes.png", "attachments/01AAA/notes.png"),
+      makeAttachment("report.txt", "attachments/01BBB/report.txt"),
+    ];
+    const exec = makeExecution({
+      id: "exec-attach",
+      specMessage: "Look at these files.",
+      attachments,
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const prompt = promptItem(items, "exec-attach");
+
+    expect(prompt).toBeDefined();
+    expect(prompt!.executionId).toBe("exec-attach");
+    // Stamped BY REFERENCE: structural sharing keeps spec.attachments stable
+    // across streaming frames, so the memoized bubble must receive the same
+    // array object, not a copy (DD-010).
+    expect(prompt!.attachments).toBe(exec.spec!.attachments);
+    expect(prompt!.attachments).toHaveLength(2);
+  });
+
+  it("stamps NO attachments field when the spec has none (empty list omitted)", () => {
+    const exec = makeExecution({
+      id: "exec-plain",
+      specMessage: "Just text.",
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const prompt = promptItem(items, "exec-plain");
+
+    expect(prompt).toBeDefined();
+    expect(prompt!.attachments).toBeUndefined();
+    // The execution id still rides along — other affordances may need it.
+    expect(prompt!.executionId).toBe("exec-plain");
+  });
+});
+
+describe("buildThreadItems pendingAttachments stamping", () => {
+  const pendingAttachments = [
+    { filename: "sketch.png", contentType: "image/png", storageKey: "attachments/01CCC/sketch.png" },
+  ];
+
+  it("carries the submit context's attachments on the pending bubble, without an execution id", () => {
+    const items = buildThreadItems(
+      [],
+      null,
+      "Here is a sketch.",
+      false,
+      undefined,
+      undefined,
+      false,
+      false,
+      false,
+      false,
+      pendingAttachments,
+    );
+    const pending = pendingItem(items);
+
+    expect(pending).toBeDefined();
+    expect(pending!.isPending).toBe(true);
+    expect(pending!.attachments).toBe(pendingAttachments);
+    // No execution record yet — presigning must not be attempted.
+    expect(pending!.executionId).toBeUndefined();
+  });
+
+  it("keeps the attachments on a FAILED pending bubble (evidence of what Retry re-sends)", () => {
+    const items = buildThreadItems(
+      [],
+      null,
+      "Here is a sketch.",
+      false,
+      undefined,
+      undefined,
+      true, // pendingMessageFailed
+      false,
+      false,
+      false,
+      pendingAttachments,
+    );
+    const pending = pendingItem(items);
+
+    expect(pending).toBeDefined();
+    expect(pending!.isFailed).toBe(true);
+    expect(pending!.attachments).toBe(pendingAttachments);
+  });
+
+  it("stamps NO attachments on the pending bubble when the submit had none", () => {
+    const items = buildThreadItems(
+      [],
+      null,
+      "Plain follow-up.",
+      false,
+      undefined,
+      undefined,
+      false,
+      false,
+      false,
+      false,
+      [],
+    );
+    const pending = pendingItem(items);
+
+    expect(pending).toBeDefined();
+    expect(pending!.attachments).toBeUndefined();
+  });
+});

package/src/execution/__tests__/message-entry.test.tsx

@@ -99,8 +99,8 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
     const article = queryArticle(container, "AI response");
     const p = article!.querySelector("p");
     expect(p).not.toBeNull();
-    expect(p!.className).toContain("text-sm");
-    expect(p!.className).toContain("text-foreground");
+    expect(p!.className).toContain("stg:text-sm");
+    expect(p!.className).toContain("stg:text-foreground");
   });
 
   it("applies MARKDOWN_COMPONENTS overrides (link styling)", () => {
@@ -113,7 +113,7 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
     const article = queryArticle(container, "AI response");
     const a = article!.querySelector("a");
     expect(a).not.toBeNull();
-    expect(a!.className).toContain("text-primary");
+    expect(a!.className).toContain("stg:text-primary");
     expect(a!.getAttribute("target")).toBe("_blank");
     expect(a!.getAttribute("rel")).toContain("noopener");
   });
@@ -128,8 +128,8 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
     const article = queryArticle(container, "AI response");
     const pre = article!.querySelector("pre");
     expect(pre).not.toBeNull();
-    expect(pre!.className).toContain("rounded-md");
-    expect(pre!.className).toContain("bg-muted");
+    expect(pre!.className).toContain("stg:rounded-md");
+    expect(pre!.className).toContain("stg:bg-muted");
   });
 
   it("wraps content in stgm-prose container", () => {
@@ -238,7 +238,7 @@ describe("MessageEntry — Human messages", () => {
     const { container } = render(<MessageEntry message={msg} />);
 
     const article = queryArticle(container, "User message");
-    expect(article!.className).toContain("bg-muted-subtle");
+    expect(article!.className).toContain("stg:bg-muted-subtle");
   });
 });
 
@@ -281,7 +281,7 @@ describe("MessageEntry — System messages", () => {
     const p = article!.querySelector("p");
     expect(p).not.toBeNull();
     expect(p!.className).toContain("italic");
-    expect(p!.className).toContain("text-muted-foreground");
+    expect(p!.className).toContain("stg:text-muted-foreground");
   });
 });
 
@@ -308,7 +308,7 @@ describe("MessageEntry — Thinking messages", () => {
     const { container } = render(<MessageEntry message={msg} />);
 
     const article = queryArticle(container, "Model thinking");
-    const svg = article!.querySelector("svg.animate-spin");
+    const svg = article!.querySelector("svg.stg\\:animate-spin");
     expect(svg).not.toBeNull();
   });
 

package/src/execution/__tests__/thread-memoization.test.ts

@@ -108,8 +108,8 @@ describe("toolCallGroupPropsEqual", () => {
 
   it("returns false when className changes", () => {
     const tc1 = makeToolCall("shell", "tc-1");
-    const prev: ToolCallGroupProps = { toolCalls: [tc1], className: "mx-4" };
-    const next: ToolCallGroupProps = { toolCalls: [tc1], className: "mx-6" };
+    const prev: ToolCallGroupProps = { toolCalls: [tc1], className: "stg:mx-4" };
+    const next: ToolCallGroupProps = { toolCalls: [tc1], className: "stg:mx-6" };
     expect(toolCallGroupPropsEqual(prev, next)).toBe(false);
   });
 

package/src/execution/__tests__/thread-skeleton.test.tsx

@@ -21,7 +21,7 @@ describe("ThreadSkeleton", () => {
   it("renders AI response line silhouettes", () => {
     const { container } = render(<ThreadSkeleton />);
 
-    const pulseContainer = container.querySelector(".animate-pulse");
+    const pulseContainer = container.querySelector(".stg\\:animate-pulse");
     expect(pulseContainer).toBeTruthy();
 
     const lines = pulseContainer!.querySelectorAll("[style]");