@stigmer/react 3.10.0 → 3.11.0

package/src/api-key/ApiKeyListPanel.tsx

@@ -65,14 +65,14 @@ export function ApiKeyListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading API keys"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
+            className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
       </div>
@@ -81,7 +81,7 @@ export function ApiKeyListPanel({
 
   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>
     );
@@ -91,7 +91,7 @@ export function ApiKeyListPanel({
     return (
       <p
         className={cn(
-          "text-muted-foreground py-4 text-center text-xs",
+          "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs",
           className,
         )}
       >
@@ -102,7 +102,7 @@ export function ApiKeyListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="API keys"
     >
@@ -169,34 +169,34 @@ function ApiKeyRow({
     return (
       <div
         role="listitem"
-        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
+        className="stg:flex stg:items-center stg:justify-between stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2.5"
       >
-        <div className="min-w-0 flex-1">
-          <p className="text-xs text-foreground">
-            Delete <span className="font-medium">{name}</span>?
+        <div className="stg:min-w-0 stg:flex-1">
+          <p className="stg:text-xs stg:text-foreground">
+            Delete <span className="stg:font-medium">{name}</span>?
             {fingerprint && (
-              <span className="text-muted-foreground">
+              <span className="stg:text-muted-foreground">
                 {" "}
                 (…{fingerprint})
               </span>
             )}
           </p>
           {error && (
-            <p className="mt-0.5 text-[0.65rem] text-destructive">
+            <p className="stg:mt-0.5 stg:text-[0.65rem] stg:text-destructive">
               {getUserMessage(error)}
             </p>
           )}
         </div>
 
-        <div className="flex shrink-0 items-center gap-1.5">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
           <button
             type="button"
             onClick={handleDelete}
             disabled={isDeleting}
             className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+              "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isDeleting && <SpinnerIcon />}
@@ -207,9 +207,9 @@ function ApiKeyRow({
             onClick={onCancelDelete}
             disabled={isDeleting}
             className={cn(
-              "rounded-md px-2.5 py-1 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -222,25 +222,25 @@ function ApiKeyRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
+      className="stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border-muted stg:px-3 stg:py-2.5 stg:hover:border-border stg:transition-colors"
     >
       {/* Key icon */}
       <KeyIcon />
 
       {/* Name + fingerprint */}
-      <div className="min-w-0 flex-1">
-        <span className="block truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <span className="stg:block stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {name}
         </span>
         {fingerprint && (
-          <span className="block text-xs text-muted-foreground font-mono">
+          <span className="stg:block stg:text-xs stg:text-muted-foreground stg:font-mono">
             …{fingerprint}
           </span>
         )}
       </div>
 
       {/* Metadata columns */}
-      <div className="hidden sm:flex shrink-0 items-center gap-4 text-xs text-muted-foreground">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-4 stg:text-xs stg:text-muted-foreground">
         {createdAt && (
           <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
             {formatShortDate(timestampDate(createdAt))}
@@ -266,9 +266,9 @@ function ApiKeyRow({
         onClick={onConfirmDelete}
         aria-label={`Delete ${name}`}
         className={cn(
-          "shrink-0 rounded p-1",
-          "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle",
-          "transition-colors",
+          "stg:shrink-0 stg:rounded stg:p-1",
+          "stg:text-muted-foreground stg:hover:text-destructive stg:hover:bg-destructive-subtle",
+          "stg:transition-colors",
         )}
       >
         <TrashIcon />
@@ -326,7 +326,7 @@ function KeyIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
     >
       <circle cx="5.5" cy="10.5" r="3" />
       <path d="M8 8l5.5-5.5M11 5l2-2M10.5 2.5l2 2" />
@@ -365,7 +365,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/api-key/CreateApiKeyForm.tsx

@@ -91,13 +91,13 @@ export function CreateApiKeyForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
+      <div className="stg:space-y-3">
         {/* Name */}
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <label
             htmlFor="stgm-new-apikey-name"
-            className="text-xs font-medium text-foreground"
+            className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
@@ -111,20 +111,20 @@ export function CreateApiKeyForm({
             autoFocus
             required
             className={cn(
-              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           />
         </div>
 
         {/* Expiry */}
-        <fieldset className="space-y-1.5">
-          <legend className="text-xs font-medium text-foreground">
+        <fieldset className="stg:space-y-1.5">
+          <legend className="stg:text-xs stg:font-medium stg:text-foreground">
             Expiration
           </legend>
-          <div className="flex flex-wrap gap-2">
+          <div className="stg:flex stg:flex-wrap stg:gap-2">
             {EXPIRY_OPTIONS.map(({ value, label }) => (
               <ExpiryRadio
                 key={value}
@@ -140,19 +140,19 @@ export function CreateApiKeyForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -165,9 +165,9 @@ export function CreateApiKeyForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -215,11 +215,11 @@ function ExpiryRadio({
   return (
     <label
       className={cn(
-        "inline-flex cursor-pointer items-center rounded-md border px-2.5 py-1 text-xs transition-colors",
+        "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-md stg:border stg:px-2.5 stg:py-1 stg:text-xs stg:transition-colors",
         checked
-          ? "border-primary bg-primary-subtle text-primary font-medium"
-          : "border-input bg-background text-muted-foreground hover:border-border hover:text-foreground",
-        disabled && "pointer-events-none opacity-50",
+          ? "stg:border-primary stg:bg-primary-subtle stg:text-primary stg:font-medium"
+          : "stg:border-input stg:bg-background stg:text-muted-foreground stg:hover:border-border stg:hover:text-foreground",
+        disabled && "stg:pointer-events-none stg:opacity-50",
       )}
     >
       <input
@@ -229,7 +229,7 @@ function ExpiryRadio({
         checked={checked}
         disabled={disabled}
         onChange={() => onChange(value)}
-        className="sr-only"
+        className="stg:sr-only"
       />
       {label}
     </label>
@@ -250,7 +250,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/attachment/AttachmentChipList.tsx

@@ -83,7 +83,7 @@ export function AttachmentChipList({
           (~h-6) share this row, and flexbox's default stretch alignment
           would balloon the file chips to tile height. */}
       <div
-        className={cn("flex flex-wrap items-center gap-1.5", className)}
+        className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
         role="list"
         aria-label="Attached files"
       >
@@ -220,21 +220,21 @@ function ImageAttachmentChip({
       role="listitem"
       aria-label={chipAriaLabel(entry)}
       title={entry.file.name}
-      className="relative inline-flex"
+      className="stg:relative stg:inline-flex"
     >
       {/* The whole tile is the preview target. Preview stays enabled while
           `disabled` (that prop gates the mutating remove/retry actions) and
           in every phase: the object URL wraps in-memory bytes, no fetch.
-          UNSTYLED_BUTTON is load-bearing: without it the tile shows the
-          UA's default button box in preflight-less hosts (see the constant). */}
+          UNSTYLED_BUTTON adds the pointer cursor — the image tile carries
+          no other clickability cue. */}
       <button
         type="button"
         onClick={onPreview}
         aria-label={`Preview ${entry.file.name}`}
         className={cn(
           UNSTYLED_BUTTON,
-          "relative block h-14 w-14 overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          isError && "ring-1 ring-destructive",
+          "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          isError && "stg:ring-1 stg:ring-destructive",
         )}
       >
         {url ? (
@@ -244,20 +244,20 @@ function ImageAttachmentChip({
             aria-hidden="true"
             onError={() => setLoadFailed(true)}
             className={cn(
-              "h-full w-full object-cover",
-              (isUploading || isError) && "opacity-50",
+              "stg:h-full stg:w-full stg:object-cover",
+              (isUploading || isError) && "stg:opacity-50",
             )}
           />
         ) : (
           // One-frame placeholder until the object-URL effect runs; same
           // footprint as the image, so no layout shift.
           <span
-            className="block h-full w-full animate-pulse bg-muted"
+            className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
             aria-hidden="true"
           />
         )}
         {isUploading && (
-          <span className="absolute inset-0 flex items-center justify-center">
+          <span className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center">
             <ChipSpinner size={16} />
           </span>
         )}
@@ -271,7 +271,7 @@ function ImageAttachmentChip({
           aria-label={`Retry uploading ${entry.file.name}`}
           className={cn(
             UNSTYLED_BUTTON,
-            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-destructive px-1.5 py-0.5 text-[0.6rem] font-medium leading-none text-destructive-foreground shadow-sm [font-family:inherit] hover:bg-destructive-hover disabled:pointer-events-none",
+            "stg:absolute stg:left-1/2 stg:top-1/2 stg:-translate-x-1/2 stg:-translate-y-1/2 stg:rounded-full stg:bg-destructive stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:leading-none stg:text-destructive-foreground stg:shadow-sm stg:hover:bg-destructive-hover stg:disabled:pointer-events-none",
           )}
         >
           Retry
@@ -288,7 +288,7 @@ function ImageAttachmentChip({
           // The established corner-badge geometry (ContextPopover,
           // ComposerToolbar). Solid bg + border keep it legible over any
           // image without opacity-modified tokens (Dont-Do #4).
-          "absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm hover:text-destructive disabled:pointer-events-none",
+          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-4 stg:w-4 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-border stg:bg-background stg:text-muted-foreground stg:shadow-sm stg:hover:text-destructive stg:disabled:pointer-events-none",
         )}
       >
         <XIcon />
@@ -320,20 +320,20 @@ function FileAttachmentChip({
       role="listitem"
       aria-label={chipAriaLabel(entry)}
       className={cn(
-        "inline-flex max-w-[200px] items-center gap-1 rounded-md px-2 py-0.5 text-xs",
+        "stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-0.5 stg:text-xs",
         isError
-          ? "border border-destructive/30 bg-destructive-subtle text-destructive"
-          : "bg-muted-subtle text-foreground",
-        isUploading && "opacity-70",
+          ? "stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:text-destructive"
+          : "stg:bg-muted-subtle stg:text-foreground",
+        isUploading && "stg:opacity-70",
       )}
     >
       {isUploading && <ChipSpinner />}
       {isError && <ErrorDot />}
       {!isUploading && !isError && <FileIcon />}
 
-      <span className="truncate">{entry.file.name}</span>
+      <span className="stg:truncate">{entry.file.name}</span>
 
-      <span className="shrink-0 text-[0.6rem] tabular-nums text-muted-foreground">
+      <span className="stg:shrink-0 stg:text-[0.6rem] stg:tabular-nums stg:text-muted-foreground">
         {formatFileSize(entry.file.size)}
       </span>
 
@@ -363,7 +363,7 @@ function RetryButton({
       disabled={disabled}
       className={cn(
         UNSTYLED_BUTTON,
-        "shrink-0 text-[0.6rem] font-medium text-destructive underline [font-family:inherit] hover:text-destructive-muted disabled:pointer-events-none",
+        "stg:shrink-0 stg:text-[0.6rem] stg:font-medium stg:text-destructive stg:underline stg:hover:text-destructive-muted stg:disabled:pointer-events-none",
       )}
       aria-label={`Retry uploading ${filename}`}
     >
@@ -388,7 +388,7 @@ function RemoveButton({
       disabled={disabled}
       className={cn(
         UNSTYLED_BUTTON,
-        "ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none",
+        "stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none",
       )}
       aria-label={`Remove ${filename}`}
     >
@@ -440,7 +440,7 @@ function ChipSpinner({ size = 10 }: { readonly size?: number }) {
       stroke="currentColor"
       strokeWidth="2.5"
       strokeLinecap="round"
-      className="shrink-0 animate-spin text-muted-foreground"
+      className="stg:shrink-0 stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -451,7 +451,7 @@ function ChipSpinner({ size = 10 }: { readonly size?: number }) {
 function ErrorDot() {
   return (
     <span
-      className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-destructive"
+      className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-destructive"
       aria-hidden="true"
     />
   );
@@ -468,7 +468,7 @@ function FileIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-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" />

package/src/attachment/AttachmentImageLightbox.tsx

@@ -87,41 +87,39 @@ 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">
+        <div className="stg:flex stg:flex-col">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2">
             <span
-              className="min-w-0 flex-1 truncate text-xs font-semibold text-foreground"
+              className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-semibold stg:text-foreground"
               title={filename}
             >
               {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 () => {

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>