@stigmer/react 3.9.0 → 3.11.0

package/src/attachment/__tests__/AttachmentChipList.test.tsx

@@ -1,6 +1,13 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, cleanup, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import {
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+  screen,
+} from "@testing-library/react";
 import { AttachmentChipList } from "../AttachmentChipList.js";
+import type { AttachmentChipListProps } from "../AttachmentChipList.js";
 import type { AttachmentEntry } from "../useAttachments.js";
 
 // ---------------------------------------------------------------------------
@@ -22,30 +29,52 @@ function entry(overrides: Partial<AttachmentEntry> = {}): AttachmentEntry {
   };
 }
 
-function renderChips(entries: AttachmentEntry[]) {
+function renderChips(
+  entries: AttachmentEntry[],
+  props: Partial<AttachmentChipListProps> = {},
+) {
   return render(
-    <AttachmentChipList entries={entries} onRemove={vi.fn()} onRetry={vi.fn()} />,
+    <AttachmentChipList
+      entries={entries}
+      onRemove={vi.fn()}
+      onRetry={vi.fn()}
+      {...props}
+    />,
   );
 }
 
+/** The chip's miniature `<img>` (decorative, `aria-hidden`) — never the lightbox image. */
+function chipImage(container: HTMLElement): HTMLImageElement | null {
+  return container.querySelector('img[aria-hidden="true"]');
+}
+
+// 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();
   vi.restoreAllMocks();
 });
 
 // ---------------------------------------------------------------------------
-// Tests
+// Image miniature — visible in every phase (#371 gap 2)
 // ---------------------------------------------------------------------------
 
-describe("AttachmentChipList — image thumbnails", () => {
-  it("renders an object-URL thumbnail for a ready image entry", async () => {
+describe("AttachmentChipList — image miniature", () => {
+  it("renders an object-URL miniature for a ready image entry", async () => {
     const { container } = renderChips([entry()]);
 
     await waitFor(() => {
-      const img = container.querySelector("img");
+      const img = chipImage(container);
       expect(img).toBeTruthy();
       expect(img!.getAttribute("src")).toContain("blob:");
-      expect(img!.getAttribute("aria-hidden")).toBe("true");
       expect(img!.getAttribute("alt")).toBe("");
     });
   });
@@ -62,21 +91,63 @@ describe("AttachmentChipList — image thumbnails", () => {
     expect(container.querySelector("svg")).toBeTruthy();
   });
 
-  it("shows no thumbnail while uploading or errored (spinner / error dot own the slot)", () => {
+  it("keeps the miniature visible while uploading — the spinner overlays it, never replaces it", async () => {
     const uploading = entry({ id: "up", phase: "uploading", storageKey: null });
-    const errored = entry({ id: "err", phase: "error", error: "boom", storageKey: null });
 
-    const { container } = renderChips([uploading, errored]);
+    const { container } = renderChips([uploading]);
 
-    expect(container.querySelector("img")).toBeNull();
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+    // Spinner present alongside the image, not instead of it.
+    expect(container.querySelector("svg.stg\\:animate-spin")).toBeTruthy();
+  });
+
+  it("renders image chips preview-only: no visible filename or size text", async () => {
+    const { container } = renderChips([entry()]);
+
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+
+    // The tile is the chip — the name lives in the tooltip and accessible
+    // label, never as a text node (file chips, by contrast, keep theirs).
+    expect(screen.queryByText("shot.png")).toBeNull();
+    const tile = screen.getByRole("listitem", { name: /^shot\.png/ });
+    expect(tile.getAttribute("title")).toBe("shot.png");
+    // Remove is an always-visible corner badge, not hover-revealed.
+    expect(screen.getByRole("button", { name: "Remove shot.png" })).toBeTruthy();
+  });
+
+  it("keeps visible filename and size text on non-image chips", () => {
+    const md = entry({
+      file: new File(["# notes"], "notes.md", { type: "text/markdown" }),
+      contentType: "text/markdown",
+    });
+
+    renderChips([md]);
+
+    expect(screen.getByText("notes.md")).toBeTruthy();
+  });
+
+  it("keeps the miniature visible on upload error, alongside the retry action", async () => {
+    const errored = entry({
+      id: "err",
+      phase: "error",
+      error: "boom",
+      storageKey: null,
+    });
+
+    const { container } = renderChips([errored]);
+
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+    expect(
+      screen.getByRole("button", { name: "Retry uploading shot.png" }),
+    ).toBeTruthy();
   });
 
   it("revokes the object URL on unmount", async () => {
     const revokeSpy = vi.spyOn(URL, "revokeObjectURL");
     const { container, unmount } = renderChips([entry()]);
 
-    await waitFor(() => expect(container.querySelector("img")).toBeTruthy());
-    const src = container.querySelector("img")!.getAttribute("src")!;
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+    const src = chipImage(container)!.getAttribute("src")!;
 
     unmount();
 
@@ -90,8 +161,8 @@ describe("AttachmentChipList — image thumbnails", () => {
       <AttachmentChipList entries={[image]} onRemove={vi.fn()} onRetry={vi.fn()} />,
     );
 
-    await waitFor(() => expect(container.querySelector("img")).toBeTruthy());
-    const src = container.querySelector("img")!.getAttribute("src")!;
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+    const src = chipImage(container)!.getAttribute("src")!;
 
     rerender(
       <AttachmentChipList entries={[]} onRemove={vi.fn()} onRetry={vi.fn()} />,
@@ -100,4 +171,156 @@ describe("AttachmentChipList — image thumbnails", () => {
     expect(container.querySelector("img")).toBeNull();
     expect(revokeSpy).toHaveBeenCalledWith(src);
   });
+
+  it("degrades to the compact file chip when the image fails to decode", async () => {
+    const { container } = renderChips([entry()]);
+
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+    fireEvent.error(chipImage(container)!);
+
+    // No broken-image glyph, no preview affordance — just the file treatment.
+    expect(container.querySelector("img")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Preview shot.png" })).toBeNull();
+    expect(container.querySelector("svg")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Remove shot.png" }),
+    ).toBeTruthy();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Click-to-open — built-in lightbox and the onPreview seam (#371 gap 3)
+// ---------------------------------------------------------------------------
+
+describe("AttachmentChipList — preview", () => {
+  it("opens the built-in lightbox with the full image when the chip body is clicked", async () => {
+    renderChips([entry()]);
+
+    expect(document.querySelector("dialog")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).toBeTruthy();
+    expect(dialog!.getAttribute("aria-label")).toBe("Preview shot.png");
+    // The lightbox derives its own object URL; the full image carries the
+    // filename as meaningful alt text (unlike the decorative miniature).
+    await waitFor(() => {
+      const full = dialog!.querySelector("img");
+      expect(full).toBeTruthy();
+      expect(full!.getAttribute("src")).toContain("blob:");
+      expect(full!.getAttribute("alt")).toBe("shot.png");
+    });
+  });
+
+  it("closes the lightbox on Escape (the dialog's cancel event)", () => {
+    renderChips([entry()]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+    const dialog = document.querySelector("dialog")!;
+
+    fireEvent(dialog, new Event("cancel"));
+
+    expect(document.querySelector("dialog")).toBeNull();
+  });
+
+  it("closes the lightbox on backdrop click, but not on content clicks", async () => {
+    renderChips([entry()]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+    const dialog = document.querySelector("dialog")!;
+    await waitFor(() => expect(dialog.querySelector("img")).toBeTruthy());
+
+    // A click landing on content (the image) must not close.
+    fireEvent.click(dialog.querySelector("img")!);
+    expect(document.querySelector("dialog")).toBeTruthy();
+
+    // A click landing on the dialog element itself is the backdrop.
+    fireEvent.click(dialog);
+    expect(document.querySelector("dialog")).toBeNull();
+  });
+
+  it("closes the lightbox via its close button", () => {
+    renderChips([entry()]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Close image preview" }),
+    );
+
+    expect(document.querySelector("dialog")).toBeNull();
+  });
+
+  it("closes the lightbox when the previewed entry is removed from the list", () => {
+    const image = entry();
+    const { rerender } = renderChips([image]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+    expect(document.querySelector("dialog")).toBeTruthy();
+
+    rerender(
+      <AttachmentChipList entries={[]} onRemove={vi.fn()} onRetry={vi.fn()} />,
+    );
+
+    expect(document.querySelector("dialog")).toBeNull();
+  });
+
+  it("routes the click to onPreview instead of opening the built-in lightbox", () => {
+    const onPreview = vi.fn();
+    const image = entry();
+    renderChips([image], { onPreview });
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview shot.png" }));
+
+    expect(onPreview).toHaveBeenCalledTimes(1);
+    expect(onPreview).toHaveBeenCalledWith(image);
+    expect(document.querySelector("dialog")).toBeNull();
+  });
+
+  it("offers no preview affordance on non-image entries", () => {
+    const md = entry({
+      file: new File(["# notes"], "notes.md", { type: "text/markdown" }),
+      contentType: "text/markdown",
+    });
+
+    renderChips([md]);
+
+    expect(screen.queryByRole("button", { name: /^Preview/ })).toBeNull();
+  });
+
+  it("keeps preview clickable while remove/retry are disabled (preview is read-only)", async () => {
+    const { container } = renderChips([entry()], { disabled: true });
+
+    await waitFor(() => expect(chipImage(container)).toBeTruthy());
+
+    const preview = screen.getByRole("button", {
+      name: "Preview shot.png",
+    }) as HTMLButtonElement;
+    const remove = screen.getByRole("button", {
+      name: "Remove shot.png",
+    }) as HTMLButtonElement;
+
+    expect(preview.disabled).toBe(false);
+    expect(remove.disabled).toBe(true);
+
+    fireEvent.click(preview);
+    expect(document.querySelector("dialog")).toBeTruthy();
+  });
+
+  it("handles unicode filenames across the chip, preview target, and lightbox", () => {
+    const name = "スクリーンショット 2026-08-10.png";
+    const unicode = entry({
+      file: new File([new Uint8Array([0x89, 0x50, 0x4e, 0x47])], name, {
+        type: "image/png",
+      }),
+    });
+
+    renderChips([unicode]);
+
+    fireEvent.click(screen.getByRole("button", { name: `Preview ${name}` }));
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).toBeTruthy();
+    expect(dialog!.getAttribute("aria-label")).toBe(`Preview ${name}`);
+  });
 });

package/src/attachment/attachment-utils.ts

@@ -117,11 +117,14 @@ export function validateAttachmentSize(file: File): string | null {
  * Returns `name` unchanged when it is not in `taken`, otherwise the first
  * free `stem-2.ext`, `stem-3.ext`, … variant.
  *
- * Duplicate filenames within one turn are not a cosmetic problem:
- * attachments materialize at `.stigmer/inputs/{filename}`, where the
- * deep-agent harness fails the whole execution on a mount-path collision
- * and the Cursor harness silently overwrites the earlier file. A visible
- * rename on the attachment chip is strictly better than either outcome.
+ * Attachments materialize at `.stigmer/inputs/{filename}`, so duplicate
+ * names within one turn contend for one path. The runner resolves that with
+ * this same rename (backend/services/runner/src/shared/attachment-naming.ts,
+ * a byte-for-byte twin kept in sync by hand — the packages share no
+ * dependency), disclosed to the agent in the prompt. Renaming client-side
+ * as well keeps the chip, the uploaded bytes, and the mounted file all
+ * agreeing on one visible name — strictly better UX than a server-side
+ * rename the user only discovers in the transcript.
  */
 export function uniquifyFilename(
   name: string,

package/src/attachment/useObjectUrl.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Object URL over a locally-held `Blob` (or `File`), alive for the lifetime
+ * of the mounted component (no fetch — the bytes are already in memory).
+ *
+ * The URL is created in an effect, not a memo: StrictMode double-invokes
+ * memos and would leak the first URL without a revoke. The effect cleanup
+ * revokes on unmount and on blob change. Returns `null` until the effect
+ * runs (first paint) — callers render a fallback for that frame.
+ *
+ * Deliberately display-oriented: the SDK's other `createObjectURL` calls
+ * (`useExportResource`, `useExportCSV`) are fire-and-forget download
+ * helpers with an immediate revoke, a different lifecycle from this one.
+ */
+export function useObjectUrl(blob: Blob): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const objectUrl = URL.createObjectURL(blob);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [blob]);
+
+  return url;
+}

package/src/billing/AutoRechargeCard.tsx

@@ -122,16 +122,16 @@ export function AutoRechargeCard({
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-4",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-4",
         className,
       )}
     >
-      <div className="flex items-center justify-between">
+      <div className="stg:flex stg:items-center stg:justify-between">
         <div>
-          <h3 className="text-xs font-semibold text-foreground">
+          <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">
             Auto-Recharge
           </h3>
-          <p className="mt-0.5 text-[0.7rem] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-[0.7rem] stg:text-muted-foreground">
             Automatically add credits when your balance runs low.
           </p>
         </div>
@@ -142,31 +142,31 @@ export function AutoRechargeCard({
           disabled={!canConfigure || isSubmitting}
           onClick={() => setEnabled((prev) => !prev)}
           className={cn(
-            "relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            enabled ? "bg-primary" : "bg-muted",
+            "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:rounded-full stg:transition-colors",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
+            enabled ? "stg:bg-primary" : "stg:bg-muted",
           )}
         >
           <span
             className={cn(
-              "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-              enabled ? "translate-x-4" : "translate-x-0.5",
-              "mt-0.5",
+              "stg:pointer-events-none stg:block stg:size-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+              enabled ? "stg:translate-x-4" : "stg:translate-x-0.5",
+              "stg:mt-0.5",
             )}
           />
         </button>
       </div>
 
       {!hasPaymentMethod && (
-        <p className="mt-3 text-xs text-muted-foreground">
+        <p className="stg:mt-3 stg:text-xs stg:text-muted-foreground">
           A saved payment method is required to enable auto-recharge.
           Purchase a credit pack first to save a card.
         </p>
       )}
 
       {canConfigure && (
-        <div className="mt-4 space-y-3">
+        <div className="stg:mt-4 stg:space-y-3">
           <DollarInput
             id="ar-threshold"
             label="When balance drops below"
@@ -192,29 +192,29 @@ export function AutoRechargeCard({
             placeholder="e.g. 200"
           />
 
-          <div className="flex items-center gap-3 pt-1">
+          <div className="stg:flex stg:items-center stg:gap-3 stg:pt-1">
             <button
               type="button"
               disabled={!hasChanges || isSubmitting}
               onClick={handleSave}
               className={cn(
-                "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                "bg-primary text-primary-foreground hover:bg-primary-hover",
-                "disabled:pointer-events-none disabled:opacity-50",
+                "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
               aria-busy={isSubmitting}
             >
               {isSubmitting ? "Saving\u2026" : "Save"}
             </button>
             {saved && (
-              <span className="text-xs text-emerald-600 dark:text-emerald-400">
+              <span className="stg:text-xs stg:text-emerald-600 stg:dark:text-emerald-400">
                 Saved
               </span>
             )}
           </div>
 
           {error && (
-            <p className="text-xs text-destructive" role="alert">
+            <p className="stg:text-xs stg:text-destructive" role="alert">
               {getUserMessage(error)}
             </p>
           )}
@@ -245,11 +245,11 @@ function DollarInput({
 }) {
   return (
     <div>
-      <label htmlFor={id} className="block text-xs text-muted-foreground">
+      <label htmlFor={id} className="stg:block stg:text-xs stg:text-muted-foreground">
         {label}
       </label>
-      <div className="relative mt-1">
-        <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+      <div className="stg:relative stg:mt-1">
+        <span className="stg:pointer-events-none stg:absolute stg:left-2.5 stg:top-1/2 stg:-translate-y-1/2 stg:text-xs stg:text-muted-foreground">
           $
         </span>
         <input
@@ -262,10 +262,10 @@ function DollarInput({
           disabled={disabled}
           placeholder={placeholder}
           className={cn(
-            "w-full rounded-md border border-input bg-background py-1.5 pl-6 pr-3 text-xs tabular-nums",
-            "text-foreground placeholder:text-muted-foreground-subtle",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:cursor-not-allowed disabled:opacity-50",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:py-1.5 stg:pl-6 stg:pr-3 stg:text-xs stg:tabular-nums",
+            "stg:text-foreground stg:placeholder:text-muted-foreground-subtle",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+            "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
           )}
         />
       </div>

package/src/billing/BillingSection.tsx

@@ -61,11 +61,11 @@ export function BillingSection({
     <section aria-labelledby="billing-heading" className={className}>
       <h2
         id="billing-heading"
-        className="text-foreground mb-1 text-sm font-semibold"
+        className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Billing
       </h2>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Manage credits, purchase credit packs, and view transaction history.
       </p>
 
@@ -76,7 +76,7 @@ export function BillingSection({
           needed.
         </CloudFeatureNotice>
       ) : !orgId ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to view billing.
         </p>
       ) : (
@@ -130,24 +130,24 @@ function BillingContent({
 
   if (isLoading) {
     return (
-      <div className="space-y-4" aria-busy="true" aria-label="Loading billing">
-        <div className="h-24 animate-pulse rounded-lg bg-muted-subtle" />
-        <div className="grid grid-cols-3 gap-3">
+      <div className="stg:space-y-4" aria-busy="true" aria-label="Loading billing">
+        <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
+        <div className="stg:grid stg:grid-cols-3 stg:gap-3">
           {Array.from({ length: 3 }, (_, i) => (
             <div
               key={i}
-              className="h-36 animate-pulse rounded-lg bg-muted-subtle"
+              className="stg:h-36 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle"
             />
           ))}
         </div>
-        <div className="h-48 animate-pulse rounded-lg bg-muted-subtle" />
+        <div className="stg:h-48 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <p className="text-destructive text-xs" role="alert">
+      <p className="stg:text-destructive stg:text-xs" role="alert">
         {getUserMessage(error)}
       </p>
     );
@@ -162,7 +162,7 @@ function BillingContent({
     balance.availableMicros < account.lowBalanceThresholdMicros;
 
   return (
-    <div className="space-y-6">
+    <div className="stg:space-y-6">
       {checkoutSuccess && (
         <CheckoutSuccessBanner onDismiss={onDismissCheckoutSuccess} />
       )}
@@ -199,7 +199,7 @@ function BillingContent({
       />
 
       {checkoutError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(checkoutError)}
         </p>
       )}
@@ -221,10 +221,10 @@ function CheckoutSuccessBanner({
   return (
     <div
       role="status"
-      className="flex items-center justify-between gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/5 px-3.5 py-3 text-xs text-emerald-700 dark:text-emerald-300"
+      className="stg:flex stg:items-center stg:justify-between stg:gap-3 stg:rounded-lg stg:border stg:border-emerald-500/30 stg:bg-emerald-500/5 stg:px-3.5 stg:py-3 stg:text-xs stg:text-emerald-700 stg:dark:text-emerald-300"
     >
       <p>
-        <span className="font-medium">Payment received</span>
+        <span className="stg:font-medium">Payment received</span>
         {" \u2014 "}
         credits will appear in your balance shortly.
       </p>
@@ -232,7 +232,7 @@ function CheckoutSuccessBanner({
         <button
           type="button"
           onClick={onDismiss}
-          className="shrink-0 rounded p-0.5 transition-colors hover:bg-emerald-500/10"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:transition-colors stg:hover:bg-emerald-500/10"
           aria-label="Dismiss"
         >
           <svg

package/src/billing/CreditBalanceCard.tsx

@@ -39,27 +39,27 @@ export function CreditBalanceCard({
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-4",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-4",
         className,
       )}
     >
-      <div className="text-xs font-medium text-muted-foreground">
+      <div className="stg:text-xs stg:font-medium stg:text-muted-foreground">
         Available Credits
       </div>
       <div
         className={cn(
-          "mt-1 text-2xl font-bold tabular-nums",
+          "stg:mt-1 stg:text-2xl stg:font-bold stg:tabular-nums",
           isZeroOrNegative
-            ? "text-destructive"
+            ? "stg:text-destructive"
             : isLowBalance
-              ? "text-warning-foreground"
-              : "text-foreground",
+              ? "stg:text-warning-foreground"
+              : "stg:text-foreground",
         )}
       >
         {formatCreditBalance(available)}
       </div>
 
-      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:mt-3 stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {balance.purchasedMicros > zero && (
           <span>
             Purchased: {formatCreditBalance(balance.purchasedMicros)}