@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

@@ -38,9 +38,9 @@ describe("ApprovalCard chrome", () => {
     // old amber background fill. (Class presence only; that the line actually
     // RENDERS is proven by the layer-invariant + e2e computed-style guards —
     // happy-dom cannot resolve `@layer`.)
-    expect(card.className).toContain("border-border-prominent");
-    expect(card.className).toContain("border-l-warning");
-    expect(card.className).not.toContain("bg-warning");
+    expect(card.className).toContain("stg:border-border-prominent");
+    expect(card.className).toContain("stg:border-l-warning");
+    expect(card.className).not.toContain("stg:bg-warning");
   });
 
   it("keeps a destructive red accent for a delete approval (hard safety signal)", () => {
@@ -53,8 +53,8 @@ describe("ApprovalCard chrome", () => {
     render(<ApprovalCard pendingApproval={approval} onSubmit={noop} />);
 
     const card = screen.getByRole("alert");
-    expect(card.className).toContain("border-l-destructive");
-    expect(card.className).not.toContain("bg-destructive-subtle");
+    expect(card.className).toContain("stg:border-l-destructive");
+    expect(card.className).not.toContain("stg:bg-destructive-subtle");
   });
 
   it("shows a shell gate's command in the body terminal session, once, not in the header", () => {
@@ -127,28 +127,28 @@ describe("ApprovalCard quiet decision buttons", () => {
   it("Approve is the neutral chip, never the loud success green", () => {
     renderGate();
     const approve = screen.getByRole("button", { name: "Approve" });
-    expect(approve.className).toContain("bg-accent");
+    expect(approve.className).toContain("stg:bg-accent");
     expect(approve.className).toContain("border");
-    expect(approve.className).not.toContain("bg-success");
+    expect(approve.className).not.toContain("stg:bg-success");
   });
 
   it("Skip and Reject are quiet ghosts with no resting fill", () => {
     renderGate();
     const skip = screen.getByRole("button", { name: "Skip" });
     const reject = screen.getByRole("button", { name: "Reject" });
-    expect(skip.className).toContain("text-muted-foreground");
+    expect(skip.className).toContain("stg:text-muted-foreground");
     expect(skip.className).not.toMatch(/(?:^|\s)bg-/); // hover-only wash, no rest fill
     // Reject reveals its danger affordance on hover/focus, not as a red fill.
-    expect(reject.className).toContain("hover:text-destructive");
+    expect(reject.className).toContain("stg:hover:text-destructive");
     expect(reject.className).not.toMatch(/(?:^|\s)bg-/);
-    expect(reject.className).not.toContain("bg-destructive text-destructive-foreground");
+    expect(reject.className).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
   });
 
   it("demotes Approve-all to the far right (ml-auto) at the lowest weight", () => {
     renderGate();
     const approveAll = screen.getByRole("button", { name: "Approve all file edits" });
-    expect(approveAll.className).toContain("ml-auto");
-    expect(approveAll.className).toContain("text-muted-foreground");
+    expect(approveAll.className).toContain("stg:ml-auto");
+    expect(approveAll.className).toContain("stg:text-muted-foreground");
   });
 
   it("uses no `bg-token/NN` opacity modifiers on any decision button", () => {

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

@@ -82,8 +82,8 @@ describe("ArtifactContentRenderer — reveal (jump-to-line)", () => {
     // Every line is addressable; exactly the target row carries the highlight.
     expect(container.querySelectorAll("[data-line]").length).toBe(3);
     const target = container.querySelector('[data-line="2"]');
-    expect(target?.className).toContain("bg-primary-subtle");
-    expect(container.querySelectorAll(".bg-primary-subtle").length).toBe(1);
+    expect(target?.className).toContain("stg:bg-primary-subtle");
+    expect(container.querySelectorAll(".stg\\:bg-primary-subtle").length).toBe(1);
   });
 
   it("does not highlight anything when the target line is out of range", () => {
@@ -94,7 +94,7 @@ describe("ArtifactContentRenderer — reveal (jump-to-line)", () => {
         reveal={{ line: 99, nonce: 1 }}
       />,
     );
-    expect(container.querySelectorAll(".bg-primary-subtle").length).toBe(0);
+    expect(container.querySelectorAll(".stg\\:bg-primary-subtle").length).toBe(0);
   });
 
   it("forces Markdown to its Source (line-faithful) view when revealing", () => {

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

@@ -132,8 +132,12 @@ describe("ArtifactRow — download", () => {
     });
   });
 
-  it("labels the Download control 'Download ZIP' for a directory", () => {
+  it("renders the directory Download control with no native title", () => {
     renderRow({ artifact: dirArtifact("return-policy") });
-    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+    // The "Download ZIP" copy moved to the house tooltip (native titles
+    // are banned — stigmer-cloud#268); its reveal is pinned in the
+    // real-browser suite (artifact-row-tooltips.layout.test.tsx).
+    expect(screen.getByLabelText("Download return-policy")).toBeTruthy();
+    expect(document.querySelector("[title]")).toBeNull();
   });
 });

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

@@ -68,11 +68,14 @@ describe("ArtifactRowView — the shared row primitive", () => {
     expect((download as HTMLButtonElement).disabled).toBe(true);
   });
 
-  it("renders directory affordances (slash suffix, ZIP download title)", () => {
+  it("renders directory affordances with no native title anywhere", () => {
     renderView({
       item: { ...fileItem, name: "bundle", tooltip: "bundle", isDirectory: true },
     });
     expect(screen.getByText("bundle/")).toBeTruthy();
-    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+    // The "Download ZIP" copy moved to the house tooltip (native titles
+    // are banned — stigmer-cloud#268); its reveal is pinned in the
+    // real-browser suite (artifact-row-tooltips.layout.test.tsx).
+    expect(document.querySelector("[title]")).toBeNull();
   });
 });

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

@@ -108,7 +108,7 @@ describe("FileChangeDiff", () => {
       <FileChangeDiff change={wholeFile("src/full.ts", "alpha\n", "beta\n")} />,
     );
     // No shared preview clamp: the Changes review surface shows the whole diff.
-    expect(container.querySelector(".overflow-hidden.max-h-48")).toBeNull();
+    expect(container.querySelector(".stg\\:overflow-hidden.stg\\:max-h-48")).toBeNull();
     expect(container.querySelector("table")).not.toBeNull();
   });
 
@@ -118,7 +118,7 @@ describe("FileChangeDiff", () => {
       <FileChangeDiff change={wholeFile("src/bound.ts", "alpha\n", "beta\n")} bounded />,
     );
     // Opt-in clamp wraps the diff body via the shared BoundedContent primitive.
-    const clamp = container.querySelector(".overflow-hidden.max-h-48");
+    const clamp = container.querySelector(".stg\\:overflow-hidden.stg\\:max-h-48");
     expect(clamp).not.toBeNull();
     expect(clamp!.querySelector("table")).not.toBeNull();
   });

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

@@ -41,13 +41,13 @@ 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");
   });
 });
 
-describe("FilePathLink full path on hover", () => {
-  it("puts the absolute local path in the title (not the action verb)", () => {
+describe("FilePathLink full path resolution", () => {
+  it("resolves the absolute local path into the accessible name (hover ride the house tooltip)", () => {
     const entries = [localEntry("my-app", "/Users/dev/my-app")];
     render(
       <FilePathContext.Provider value={{ workspaceEntries: entries }}>
@@ -55,14 +55,18 @@ describe("FilePathLink full path on hover", () => {
       </FilePathContext.Provider>,
     );
     const el = screen.getByRole("button");
-    expect(el.getAttribute("title")).toBe("/Users/dev/my-app/src/main.go");
-    // The action verb moves into the accessible name, with the path.
+    // The resolved path is observable in the accessible name; the visual
+    // hover reveal is the house tooltip (native titles are banned,
+    // stigmer-cloud#268).
     expect(el.getAttribute("aria-label")).toBe("Copy path: /Users/dev/my-app/src/main.go");
+    expect(el.getAttribute("title")).toBeNull();
   });
 
-  it("falls back to the logical path in the title when unresolved", () => {
+  it("falls back to the logical path when unresolved", () => {
     render(<FilePathLink path="src/main.go" />);
-    expect(screen.getByRole("button").getAttribute("title")).toBe("src/main.go");
+    const el = screen.getByRole("button");
+    expect(el.getAttribute("aria-label")).toBe("Copy path: src/main.go");
+    expect(el.getAttribute("title")).toBeNull();
   });
 });
 

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

@@ -883,7 +883,8 @@ describe("FileReviewCard", () => {
       expect(screen.getByText("a.ts")).toBeTruthy();
       expect(screen.getByText("b.ts")).toBeTruthy();
       expect(screen.getByRole("button", { name: /Copy path: src\/a\.ts/ })).toBeTruthy();
-      expect(screen.getByTitle("src/a.ts")).toBeTruthy();
+      // Full path on hover rides the house tooltip; no native title remains.
+      expect(document.querySelector("[title]")).toBeNull();
     });
 
     it("keeps a single complete file collapsed behind the 'Files' expander", () => {

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

@@ -135,9 +135,10 @@ describe("MessageEntry attachment rendering", () => {
 
     // 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.
+    // …but the name stays reachable — house tooltip on the tile (native
+    // titles are banned, stigmer-cloud#268), aria on both.
     const tile = screen.getByRole("listitem", { name: "screenshot.png" });
-    expect(tile.getAttribute("title")).toBe("screenshot.png");
+    expect(tile.getAttribute("title")).toBeNull();
     expect(
       screen.getByRole("button", { name: "Preview screenshot.png" }),
     ).toBeTruthy();
@@ -155,7 +156,7 @@ describe("MessageEntry attachment rendering", () => {
     );
 
     // Mint in flight: pulse placeholder, no image yet.
-    expect(container.querySelector(".animate-pulse")).toBeTruthy();
+    expect(container.querySelector(".stg\\:animate-pulse")).toBeTruthy();
     expect(container.querySelector("img")).toBeNull();
   });
 
@@ -177,7 +178,7 @@ describe("MessageEntry attachment rendering", () => {
     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(".animate-pulse")).toBeNull();
+    expect(container.querySelector(".stg\\:animate-pulse")).toBeNull();
   });
 
   it("degrades an image chip to the document treatment when the URL cannot be minted", () => {

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

@@ -365,7 +365,12 @@ describe("MessageThread", () => {
     // shows the folded set's changed file.
     expect(screen.getByText("File changes")).toBeTruthy();
     fireEvent.click(screen.getByRole("button", { name: "Show" }));
-    expect(screen.getByTitle("src/a.ts")).toBeTruthy();
+    // The changed file renders as a FilePathLink whose accessible name
+    // carries the full path (the hover reveal is the house tooltip now —
+    // native titles are banned, stigmer-cloud#268).
+    expect(
+      screen.getByRole("button", { name: /Copy path: src\/a\.ts/ }),
+    ).toBeTruthy();
     expect(
       document.querySelector('[data-cursor-target="file-review-approve"]'),
     ).toBeNull();
@@ -490,7 +495,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__/artifact-row-tooltips.layout.test.tsx

@@ -0,0 +1,115 @@
+// The interactive-trigger tooltip contract from the native-title sweep
+// (stigmer-cloud#268), pinned in a real Chromium on ArtifactRowView. When
+// an enabled control is its own tooltip trigger, keyboard FOCUS opens the
+// hint too — the concrete accessibility gain over the native `title` this
+// replaced, which no keyboard user ever saw. Focus-open is real focus
+// machinery (Base UI opens on focus-visible), so only a real browser can
+// pin it honestly.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import { ArtifactRowView } from "../ArtifactRowView.js";
+
+const ITEM = {
+  name: "report.pdf",
+  tooltip: "/workspace/output/report.pdf",
+  subtitlePath: null,
+  sizeBytes: 2048,
+  isDirectory: false,
+};
+
+function renderRow() {
+  const pane = document.createElement("div");
+  pane.className = "stgm";
+  pane.style.width = "320px";
+  document.body.appendChild(pane);
+  render(
+    <ul>
+      <ArtifactRowView
+        item={ITEM}
+        onOpen={() => {}}
+        onDownload={() => {}}
+        isDownloading={false}
+      />
+    </ul>,
+    { container: pane },
+  );
+  return pane;
+}
+
+function portaledText(pane: HTMLElement): string {
+  return Array.from(document.body.children)
+    .filter((node) => node !== pane)
+    .map((node) => node.textContent ?? "")
+    .join(" ");
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("ArtifactRowView tooltips", () => {
+  it("opens the full-path hint on keyboard focus — no pointer required", async () => {
+    const pane = renderRow();
+    expect(pane.querySelector("[title]")).toBeNull();
+
+    // Tab reaches the open button (first focusable in the row); the
+    // tooltip must follow focus per the interactive-trigger pattern.
+    await userEvent.tab();
+    const openButton = Array.from(pane.querySelectorAll("button")).find((el) =>
+      el.textContent?.includes("report.pdf"),
+    );
+    expect(document.activeElement).toBe(openButton);
+
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("/workspace/output/report.pdf"),
+      { timeout: 3000, interval: 50 },
+    );
+  });
+
+  it("keeps the download hint hoverable through the wrapper span", async () => {
+    const pane = renderRow();
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download report.pdf",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+
+  it("says 'Download ZIP' for a directory", async () => {
+    const pane = document.createElement("div");
+    pane.className = "stgm";
+    pane.style.width = "320px";
+    document.body.appendChild(pane);
+    render(
+      <ul>
+        <ArtifactRowView
+          item={{ ...ITEM, name: "bundle", tooltip: "bundle", isDirectory: true }}
+          onOpen={() => {}}
+          onDownload={() => {}}
+          isDownloading={false}
+        />
+      </ul>,
+      { container: pane },
+    );
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download bundle",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download ZIP"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+});

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]");

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

@@ -172,7 +172,7 @@ describe("ThreadItemRenderer", () => {
 
     const { container } = render(<ThreadItemRenderer item={item} />);
     const root = container.firstElementChild as HTMLElement;
-    expect(root?.className).toContain("opacity-70");
+    expect(root?.className).toContain("stg:opacity-70");
   });
 
   it("renders a phase badge item", () => {

package/src/execution/artifact-row-item.ts

@@ -19,7 +19,7 @@ import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/ap
 export interface ArtifactRowItem {
   /** Display label (file or directory name). */
   readonly name: string;
-  /** Hover title — the fullest location/name known for the artifact. */
+  /** House-tooltip content — the fullest location/name known for the artifact. */
   readonly tooltip: string;
   /**
    * Disambiguation subtitle rendered after the name when another row shares