@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/attachment/AttachmentImageLightbox.tsx

@@ -87,41 +87,40 @@ export function AttachmentImageLightbox({
       onClick={handleBackdropClick}
       aria-label={`Preview ${filename}`}
       className={cn(
-        "fixed inset-0 m-auto max-h-[85vh] max-w-[85vw] rounded-lg border border-border bg-background p-0 text-foreground shadow-lg outline-none",
-        "backdrop:bg-backdrop",
+        "stg:fixed stg:inset-0 stg:m-auto stg:max-h-[85vh] stg:max-w-[85vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-lg stg:outline-none",
+        "stg:backdrop:bg-backdrop",
         className,
       )}
     >
       {open && (
-        <div className="flex flex-col">
-          <div className="flex items-center gap-2 px-3 py-2">
-            <span
-              className="min-w-0 flex-1 truncate text-xs font-semibold text-foreground"
-              title={filename}
-            >
+        <div className="stg:flex stg:flex-col">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2">
+            {/* No tooltip here: the house tooltip portals OUTSIDE this native
+                showModal() dialog, where the top layer covers it and `inert`
+                disables it. The old title only restated the visible filename
+                (also the image's alt), so it is dropped rather than replaced. */}
+            <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-semibold stg:text-foreground">
               {filename}
             </span>
-            {/* `bg-transparent` neutralizes the UA button box in
-                preflight-less hosts (see UNSTYLED_BUTTON in the chip list). */}
             <button
               type="button"
               onClick={onClose}
               aria-label="Close image preview"
-              className="shrink-0 cursor-pointer rounded bg-transparent p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className="stg:shrink-0 stg:cursor-pointer stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
             >
               <CloseIcon />
             </button>
           </div>
-          <div className="min-h-0 overflow-auto border-t border-border">
+          <div className="stg:min-h-0 stg:overflow-auto stg:border-t stg:border-border">
             {src ? (
               <img
                 src={src}
                 alt={filename}
-                className="block max-h-[75vh] max-w-full object-contain"
+                className="stg:block stg:max-h-[75vh] stg:max-w-full stg:object-contain"
               />
             ) : (
               <div
-                className="h-48 w-72 animate-pulse bg-muted"
+                className="stg:h-48 stg:w-72 stg:animate-pulse stg:bg-muted"
                 aria-hidden="true"
               />
             )}

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

@@ -98,7 +98,7 @@ describe("AttachmentChipList — image miniature", () => {
 
     await waitFor(() => expect(chipImage(container)).toBeTruthy());
     // Spinner present alongside the image, not instead of it.
-    expect(container.querySelector("svg.animate-spin")).toBeTruthy();
+    expect(container.querySelector("svg.stg\\:animate-spin")).toBeTruthy();
   });
 
   it("renders image chips preview-only: no visible filename or size text", async () => {
@@ -106,11 +106,12 @@ describe("AttachmentChipList — image miniature", () => {
 
     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).
+    // The tile is the chip — the name lives in the house tooltip and
+    // accessible label, never as a text node (file chips, by contrast,
+    // keep theirs) and never a native title (banned, stigmer-cloud#268).
     expect(screen.queryByText("shot.png")).toBeNull();
     const tile = screen.getByRole("listitem", { name: /^shot\.png/ });
-    expect(tile.getAttribute("title")).toBe("shot.png");
+    expect(tile.getAttribute("title")).toBeNull();
     // Remove is an always-visible corner badge, not hover-revealed.
     expect(screen.getByRole("button", { name: "Remove shot.png" })).toBeTruthy();
   });

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/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)}

package/src/billing/CreditLedgerTable.tsx

@@ -54,12 +54,12 @@ export function CreditLedgerTable({
 
   if (isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-32 animate-pulse rounded bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
         {Array.from({ length: 5 }, (_, i) => (
           <div
             key={i}
-            className="h-10 animate-pulse rounded-lg bg-muted-subtle"
+            className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle"
           />
         ))}
       </div>
@@ -68,7 +68,7 @@ export function CreditLedgerTable({
 
   if (error) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(error)}
       </p>
     );
@@ -79,7 +79,7 @@ export function CreditLedgerTable({
 
   return (
     <div className={className}>
-      <h3 className="mb-2 text-xs font-semibold text-foreground">
+      <h3 className="stg:mb-2 stg:text-xs stg:font-semibold stg:text-foreground">
         Transaction History
       </h3>
 
@@ -88,7 +88,7 @@ export function CreditLedgerTable({
       ) : (
         <>
           <div
-            className="rounded-lg border border-border bg-card"
+            className="stg:rounded-lg stg:border stg:border-border stg:bg-card"
             role="table"
             aria-label="Credit ledger"
           >
@@ -104,7 +104,7 @@ export function CreditLedgerTable({
               totalPages={totalPages}
               onPageChange={setPageNum}
               ariaLabel="Ledger pagination"
-              className="mt-3"
+              className="stg:mt-3"
             />
           )}
         </>
@@ -121,13 +121,13 @@ function LedgerHeader() {
   return (
     <div
       role="row"
-      className="grid grid-cols-[1fr_auto] gap-x-4 border-b border-border px-3.5 py-2 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground sm:grid-cols-[auto_1fr_auto]"
+      className="stg:grid stg:grid-cols-[1fr_auto] stg:gap-x-4 stg:border-b stg:border-border stg:px-3.5 stg:py-2 stg:text-[0.65rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground stg:sm:grid-cols-[auto_1fr_auto]"
     >
-      <span role="columnheader" className="hidden sm:block">
+      <span role="columnheader" className="stg:hidden stg:sm:block">
         Date
       </span>
       <span role="columnheader">Type</span>
-      <span role="columnheader" className="text-right">
+      <span role="columnheader" className="stg:text-right">
         Amount
       </span>
     </div>
@@ -146,37 +146,37 @@ function LedgerRow({ entry }: { entry: CreditLedgerEntry }) {
   return (
     <div
       role="row"
-      className="grid grid-cols-[1fr_auto] items-center gap-x-4 border-b border-border-muted px-3.5 py-2.5 last:border-b-0 sm:grid-cols-[auto_1fr_auto]"
+      className="stg:grid stg:grid-cols-[1fr_auto] stg:items-center stg:gap-x-4 stg:border-b stg:border-border-muted stg:px-3.5 stg:py-2.5 stg:last:border-b-0 stg:sm:grid-cols-[auto_1fr_auto]"
     >
       <span
         role="cell"
-        className="hidden text-xs tabular-nums text-muted-foreground sm:block sm:w-36"
+        className="stg:hidden stg:text-xs stg:tabular-nums stg:text-muted-foreground stg:sm:block stg:sm:w-36"
       >
         {entry.createdAt
           ? formatLedgerDate(entry.createdAt.seconds)
           : "\u2014"}
       </span>
 
-      <div role="cell" className="min-w-0">
+      <div role="cell" className="stg:min-w-0">
         <span
           className={cn(
-            "inline-block rounded-full px-2 py-0.5 text-[0.65rem] font-medium",
+            "stg:inline-block stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
             credit
-              ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+              ? "stg:bg-emerald-500/10 stg:text-emerald-600 stg:dark:text-emerald-400"
               : hold
-                ? "bg-muted text-muted-foreground"
-                : "bg-destructive-subtle text-destructive",
+                ? "stg:bg-muted stg:text-muted-foreground"
+                : "stg:bg-destructive-subtle stg:text-destructive",
           )}
         >
           {ledgerEntryLabel(entryType)}
         </span>
         {entry.source?.description && (
-          <span className="ml-2 text-xs text-muted-foreground">
+          <span className="stg:ml-2 stg:text-xs stg:text-muted-foreground">
             {entry.source.description}
           </span>
         )}
         {entry.createdAt && (
-          <span className="mt-0.5 block text-[0.6rem] tabular-nums text-muted-foreground sm:hidden">
+          <span className="stg:mt-0.5 stg:block stg:text-[0.6rem] stg:tabular-nums stg:text-muted-foreground stg:sm:hidden">
             {formatLedgerDate(entry.createdAt.seconds)}
           </span>
         )}
@@ -185,12 +185,12 @@ function LedgerRow({ entry }: { entry: CreditLedgerEntry }) {
       <span
         role="cell"
         className={cn(
-          "text-right text-xs font-medium tabular-nums",
+          "stg:text-right stg:text-xs stg:font-medium stg:tabular-nums",
           credit
-            ? "text-emerald-600 dark:text-emerald-400"
+            ? "stg:text-emerald-600 stg:dark:text-emerald-400"
             : hold
-              ? "text-muted-foreground"
-              : "text-destructive",
+              ? "stg:text-muted-foreground"
+              : "stg:text-destructive",
         )}
       >
         {formatLedgerAmount(entry.amountMicros)}
@@ -205,12 +205,12 @@ function LedgerRow({ entry }: { entry: CreditLedgerEntry }) {
 
 function EmptyLedger() {
   return (
-    <div className="flex flex-col items-center justify-center rounded-lg border border-border bg-card py-10 text-center">
-      <ReceiptIcon className="text-muted-foreground mb-3 size-8" />
-      <p className="text-sm font-medium text-foreground">
+    <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:rounded-lg stg:border stg:border-border stg:bg-card stg:py-10 stg:text-center">
+      <ReceiptIcon className="stg:text-muted-foreground stg:mb-3 stg:size-8" />
+      <p className="stg:text-sm stg:font-medium stg:text-foreground">
         No transactions yet
       </p>
-      <p className="mt-1 max-w-xs text-xs text-muted-foreground">
+      <p className="stg:mt-1 stg:max-w-xs stg:text-xs stg:text-muted-foreground">
         Credit purchases, auto-recharges, and refunds will appear here as
         your organization funds its account.
       </p>

package/src/billing/CreditPackGrid.tsx

@@ -49,11 +49,11 @@ export function CreditPackGrid({
 
   return (
     <div>
-      <h3 className="mb-2 text-xs font-semibold text-foreground">
+      <h3 className="stg:mb-2 stg:text-xs stg:font-semibold stg:text-foreground">
         Purchase Credits
       </h3>
       <div
-        className={cn("grid gap-3 sm:grid-cols-3", className)}
+        className={cn("stg:grid stg:gap-3 stg:sm:grid-cols-3", className)}
         role="group"
         aria-label="Credit packs"
       >
@@ -68,7 +68,7 @@ export function CreditPackGrid({
         ))}
       </div>
       {!isAccountActive && (
-        <p className="mt-2 text-xs text-muted-foreground">
+        <p className="stg:mt-2 stg:text-xs stg:text-muted-foreground">
           Credit purchases are unavailable while your billing account is{" "}
           {accountStatus === BillingAccountStatus.billing_account_suspended
             ? "suspended"
@@ -96,20 +96,20 @@ function PackCard({
   onPurchase: (packId: string) => void;
 }) {
   return (
-    <div className="flex flex-col rounded-lg border border-border bg-card px-4 py-4">
-      <div className="text-sm font-semibold text-foreground">
+    <div className="stg:flex stg:flex-col stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-4">
+      <div className="stg:text-sm stg:font-semibold stg:text-foreground">
         {pack.displayName}
       </div>
-      <div className="mt-0.5 text-xs text-muted-foreground">
+      <div className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
         {pack.description}
       </div>
 
-      <div className="mt-3 flex items-baseline gap-1">
-        <span className="text-xl font-bold tabular-nums text-foreground">
+      <div className="stg:mt-3 stg:flex stg:items-baseline stg:gap-1">
+        <span className="stg:text-xl stg:font-bold stg:tabular-nums stg:text-foreground">
           {formatPackPrice(pack.priceCents)}
         </span>
       </div>
-      <div className="mt-0.5 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:mt-0.5 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatCreditCount(pack.credits)} credits
       </div>
 
@@ -118,10 +118,10 @@ function PackCard({
         disabled={isDisabled}
         onClick={() => onPurchase(pack.packId)}
         className={cn(
-          "mt-4 w-full 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:mt-4 stg:w-full 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={isPurchasing}
       >

package/src/billing/LowBalanceBanner.tsx

@@ -42,21 +42,21 @@ export function LowBalanceBanner({
     <div
       role="alert"
       className={cn(
-        "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-xs",
+        "stg:flex stg:items-start stg:gap-2.5 stg:rounded-lg stg:border stg:px-3.5 stg:py-3 stg:text-xs",
         isZeroOrNegative
-          ? "border-destructive/30 bg-destructive-subtle text-destructive"
-          : "border-warning/30 bg-warning/5 text-warning-foreground",
+          ? "stg:border-destructive/30 stg:bg-destructive-subtle stg:text-destructive"
+          : "stg:border-warning/30 stg:bg-warning/5 stg:text-warning-foreground",
         className,
       )}
     >
-      <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+      <AlertTriangle className="stg:mt-0.5 stg:size-3.5 stg:shrink-0" aria-hidden="true" />
       <div>
-        <p className="font-medium">
+        <p className="stg:font-medium">
           {isZeroOrNegative
             ? "Credit balance exhausted"
             : "Low credit balance"}
         </p>
-        <p className="mt-0.5 opacity-80">
+        <p className="stg:mt-0.5 stg:opacity-80">
           {isZeroOrNegative
             ? "Your credit balance is zero. Purchase credits to continue running agent executions."
             : `Your balance (${formatCreditBalance(availableMicros)}) is below the warning threshold. Consider purchasing additional credits.`}