@stigmer/react 3.10.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

@@ -155,7 +155,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 +177,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

@@ -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__/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/tool-rendering-primitives.tsx

@@ -43,9 +43,9 @@ export function CollapsibleCode({ label, content, className }: CollapsibleCodePr
       : content;
 
   return (
-    <div className={cn("space-y-1", className)}>
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+    <div className={cn("stg:space-y-1", className)}>
+      <span className="stg:font-medium stg:text-muted-foreground">{label}</span>
+      <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -92,7 +92,7 @@ export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
 
   return (
     <>
-      <pre className={cn("whitespace-pre-wrap break-words font-mono", className)}>
+      <pre className={cn("stg:whitespace-pre-wrap stg:break-words stg:font-mono", className)}>
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -129,11 +129,11 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
   const isLong = lines.length > 3;
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       <button
         type="button"
         onClick={() => setIsExpanded((v) => !v)}
-        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <svg
           width="8"
@@ -145,8 +145,8 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
           strokeLinecap="round"
           strokeLinejoin="round"
           className={cn(
-            "shrink-0 transition-transform duration-150",
-            isExpanded && "rotate-90",
+            "stg:shrink-0 stg:transition-transform stg:duration-150",
+            isExpanded && "stg:rotate-90",
           )}
           aria-hidden="true"
         >
@@ -154,13 +154,13 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
         </svg>
         {label}
         {!isExpanded && isLong && (
-          <span className="font-normal text-muted-foreground-subtle">
+          <span className="stg:font-normal stg:text-muted-foreground-subtle">
             ({lines.length} lines)
           </span>
         )}
       </button>
       {isExpanded && (
-        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+        <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
           {content}
         </pre>
       )}
@@ -184,7 +184,7 @@ export function FilePathIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
@@ -205,7 +205,7 @@ export function McpServerIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="3" r="1.5" />

package/src/feedback/StigmerToaster.tsx

@@ -27,16 +27,19 @@ export function StigmerToaster(props: StigmerToasterProps) {
       theme={colorMode}
       position="top-right"
       richColors
-      className="toaster group"
+      className="toaster stg:group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            // `toast` is sonner's own class (referenced by the group-[.toast]
+            // variants below); `stg:group` is OUR marker so those variants
+            // resolve against `.stg\:group` in the prefixed build.
+            "stg:group toast stg:group-[.toaster]:bg-background stg:group-[.toaster]:text-foreground stg:group-[.toaster]:border-border stg:group-[.toaster]:shadow-lg",
+          description: "stg:group-[.toast]:text-muted-foreground",
           actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            "stg:group-[.toast]:bg-primary stg:group-[.toast]:text-primary-foreground",
           cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            "stg:group-[.toast]:bg-muted stg:group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}

package/src/file-reference/FileReferenceChipList.tsx

@@ -51,7 +51,7 @@ export function FileReferenceChipList({
 
   return (
     <div
-      className={cn("flex flex-wrap gap-1.5", className)}
+      className={cn("stg:flex stg:flex-wrap stg:gap-1.5", className)}
       role="list"
       aria-label="Referenced workspace files"
     >
@@ -87,15 +87,15 @@ function FileReferenceChip({
       role="listitem"
       aria-label={`Referenced file: ${path}`}
       title={path}
-      className="inline-flex max-w-[200px] items-center gap-1 rounded-md bg-muted-subtle px-2 py-0.5 text-xs text-foreground"
+      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
     >
       <FileRefIcon />
-      <span className="truncate">{filename}</span>
+      <span className="stg:truncate">{filename}</span>
       <button
         type="button"
         onClick={onRemove}
         disabled={disabled}
-        className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+        className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
         aria-label={`Remove reference to ${path}`}
       >
         <XIcon />
@@ -119,7 +119,7 @@ function FileRefIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-accent-foreground"
+      className="stg:shrink-0 stg:text-accent-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />