@stigmer/react 3.10.0 → 3.11.0

package/src/conversation/ConversationTimelineView.tsx

@@ -113,15 +113,15 @@ export function ConversationTimelineView({
     <TooltipProvider>
       <div
         aria-label="Conversation timeline"
-        className={cn("relative flex min-h-0 flex-1 flex-col", className)}
+        className={cn("stg:relative stg:flex stg:min-h-0 stg:flex-1 stg:flex-col", className)}
       >
         <div
           ref={scrollRef}
-          className="min-h-0 flex-1 overflow-y-auto [overflow-anchor:none] px-4 py-3"
+          className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:[overflow-anchor:none] stg:px-4 stg:py-3"
         >
           {!showsCustomerMessages && descriptor && (
-            <div className="mb-3 flex items-start gap-2 rounded-md border border-border bg-muted-faint px-3 py-2 text-xs text-muted-foreground">
-              <Info aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
+            <div className="stg:mb-3 stg:flex stg:items-start stg:gap-2 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
+              <Info aria-hidden="true" className="stg:mt-0.5 stg:size-3.5 stg:shrink-0" />
               <p>
                 Customer messages on {descriptor.label} channels aren&apos;t shown
                 here yet — this thread has replies, sends, and internal events only.
@@ -132,20 +132,20 @@ export function ConversationTimelineView({
           {isLoading ? (
             <TimelineSkeleton />
           ) : error ? (
-            <p className="px-2 py-6 text-center text-sm text-destructive">
+            <p className="stg:px-2 stg:py-6 stg:text-center stg:text-sm stg:text-destructive">
               {getUserMessage(error)}
             </p>
           ) : items.length === 0 ? (
             <EmptyState
               variant="first-use"
-              icon={<MessageSquare className="size-8" />}
+              icon={<MessageSquare className="stg:size-8" />}
               title="No messages yet"
               description="The conversation's messages appear here as they happen."
             />
           ) : (
             <div ref={contentRef}>
               {hasOlder && (
-                <div className="flex justify-center pb-2">
+                <div className="stg:flex stg:justify-center stg:pb-2">
                   <Button
                     variant="ghost"
                     size="xs"
@@ -159,12 +159,12 @@ export function ConversationTimelineView({
               {days.map((day) => (
                 <div key={day.label}>
                   <div
-                    className="my-2 text-center text-xs text-muted-foreground-faint"
+                    className="stg:my-2 stg:text-center stg:text-xs stg:text-muted-foreground-faint"
                     role="separator"
                   >
                     {day.label}
                   </div>
-                  <ul className="space-y-1.5">
+                  <ul className="stg:space-y-1.5">
                     {day.items.map((item) => (
                       <TimelineItemRow
                         key={item.itemId}
@@ -238,15 +238,15 @@ const TimelineItemRow = memo(function TimelineItemRow({
       : null;
 
   return (
-    <li className={cn("flex", isCustomer ? "justify-start" : "justify-end")}>
+    <li className={cn("stg:flex", isCustomer ? "stg:justify-start" : "stg:justify-end")}>
       <div
         className={cn(
-          "max-w-[80%] rounded-lg px-3 py-2",
-          isCustomer ? "bg-muted-subtle" : "bg-primary-subtle",
+          "stg:max-w-[80%] stg:rounded-lg stg:px-3 stg:py-2",
+          isCustomer ? "stg:bg-muted-subtle" : "stg:bg-primary-subtle",
         )}
       >
         {!isCustomer && (
-          <p className="text-xs font-medium text-muted-foreground">
+          <p className="stg:text-xs stg:font-medium stg:text-muted-foreground">
             {BUSINESS_CAPTION[author]}
           </p>
         )}
@@ -254,7 +254,7 @@ const TimelineItemRow = memo(function TimelineItemRow({
           <ConversationMediaAttachment
             media={item.media}
             address={mediaAddress}
-            className={item.text ? "mb-1.5" : undefined}
+            className={item.text ? "stg:mb-1.5" : undefined}
           />
         )}
         {/* A media item without a caption is complete as its media —
@@ -262,15 +262,15 @@ const TimelineItemRow = memo(function TimelineItemRow({
         {(body || mediaAddress === null) && (
           <p
             className={cn(
-              "whitespace-pre-wrap break-words text-sm text-foreground",
-              !item.text && "italic text-muted-foreground",
+              "stg:whitespace-pre-wrap stg:break-words stg:text-sm stg:text-foreground",
+              !item.text && "stg:italic stg:text-muted-foreground",
             )}
           >
             {body || "Message content unavailable"}
           </p>
         )}
         {receiptExplanation !== null && (
-          <p className="mt-1 break-words text-xs text-destructive">
+          <p className="stg:mt-1 stg:break-words stg:text-xs stg:text-destructive">
             {receiptExplanation}
           </p>
         )}
@@ -323,30 +323,30 @@ function ItemFooter({ item }: { readonly item: ConversationTimelineItem }) {
     : "";
 
   return (
-    <p className="mt-1 flex items-center justify-end gap-1 text-xs text-muted-foreground-faint">
+    <p className="stg:mt-1 stg:flex stg:items-center stg:justify-end stg:gap-1 stg:text-xs stg:text-muted-foreground-faint">
       <span>{time}</span>
       {attempt === "failed" && (
         <StatusHint
           hint="The platform could not deliver this message"
-          className="flex items-center gap-0.5 text-destructive"
+          className="stg:flex stg:items-center stg:gap-0.5 stg:text-destructive"
         >
-          <TriangleAlert aria-hidden="true" className="size-3" />
+          <TriangleAlert aria-hidden="true" className="stg:size-3" />
           Not delivered
         </StatusHint>
       )}
       {attempt === "suppressed" && (
         <StatusHint
           hint="Withheld because a human had the conversation when it came due"
-          className="flex items-center gap-0.5"
+          className="stg:flex stg:items-center stg:gap-0.5"
         >
-          <Ban aria-hidden="true" className="size-3" />
+          <Ban aria-hidden="true" className="stg:size-3" />
           Held
         </StatusHint>
       )}
       {(attempt === "pending" || attempt === "delivering") && (
-        <StatusHint hint="Sending" className="flex items-center gap-0.5">
-          <Clock aria-hidden="true" className="size-3" />
-          <span className="sr-only">Sending</span>
+        <StatusHint hint="Sending" className="stg:flex stg:items-center stg:gap-0.5">
+          <Clock aria-hidden="true" className="stg:size-3" />
+          <span className="stg:sr-only">Sending</span>
         </StatusHint>
       )}
       {attempt === "delivered" && <ReceiptTicks item={item} />}
@@ -366,34 +366,34 @@ function ReceiptTicks({ item }: { readonly item: ConversationTimelineItem }) {
     return (
       <StatusHint
         hint="The provider accepted this message but could not deliver it"
-        className="flex items-center gap-0.5 text-destructive"
+        className="stg:flex stg:items-center stg:gap-0.5 stg:text-destructive"
       >
-        <TriangleAlert aria-hidden="true" className="size-3" />
+        <TriangleAlert aria-hidden="true" className="stg:size-3" />
         Delivery failed
       </StatusHint>
     );
   }
   if (receipt === "read") {
     return (
-      <StatusHint hint="Read by the customer" className="text-primary">
-        <CheckCheck aria-hidden="true" className="size-3.5" />
-        <span className="sr-only">Read</span>
+      <StatusHint hint="Read by the customer" className="stg:text-primary">
+        <CheckCheck aria-hidden="true" className="stg:size-3.5" />
+        <span className="stg:sr-only">Read</span>
       </StatusHint>
     );
   }
   if (receipt === "delivered") {
     return (
       <StatusHint hint="Delivered to the customer's device">
-        <CheckCheck aria-hidden="true" className="size-3.5" />
-        <span className="sr-only">Delivered</span>
+        <CheckCheck aria-hidden="true" className="stg:size-3.5" />
+        <span className="stg:sr-only">Delivered</span>
       </StatusHint>
     );
   }
   // Handed to the provider; no (further) receipt yet.
   return (
     <StatusHint hint="Sent">
-      <Check aria-hidden="true" className="size-3.5" />
-      <span className="sr-only">Sent</span>
+      <Check aria-hidden="true" className="stg:size-3.5" />
+      <span className="stg:sr-only">Sent</span>
     </StatusHint>
   );
 }
@@ -409,25 +409,25 @@ function InternalEventRow({ item }: { readonly item: ConversationTimelineItem })
   const isEscalation = author === "agent" && item.text !== "";
 
   return (
-    <li className="flex justify-center">
+    <li className="stg:flex stg:justify-center">
       <div
         className={cn(
-          "flex max-w-[90%] items-start gap-1.5 rounded-md px-3 py-1.5 text-center text-xs",
+          "stg:flex stg:max-w-[90%] stg:items-start stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-center stg:text-xs",
           isEscalation
-            ? "bg-destructive-subtle text-destructive"
-            : "bg-muted-faint text-muted-foreground",
+            ? "stg:bg-destructive-subtle stg:text-destructive"
+            : "stg:bg-muted-faint stg:text-muted-foreground",
         )}
       >
         {isEscalation ? (
           <>
-            <TriangleAlert aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
-            <span className="min-w-0 break-words">
+            <TriangleAlert aria-hidden="true" className="stg:mt-0.5 stg:size-3.5 stg:shrink-0" />
+            <span className="stg:min-w-0 stg:break-words">
               Agent escalated to a human — “{item.text}”
             </span>
           </>
         ) : item.text !== "" ? (
           // A future internal note flows through with zero code change.
-          <span className="min-w-0 break-words">{item.text}</span>
+          <span className="stg:min-w-0 stg:break-words">{item.text}</span>
         ) : (
           <span>A teammate resolved the attention flag</span>
         )}
@@ -438,10 +438,10 @@ function InternalEventRow({ item }: { readonly item: ConversationTimelineItem })
 
 function TimelineSkeleton() {
   return (
-    <div className="space-y-2" aria-hidden="true">
-      <div className="h-10 w-3/5 animate-pulse rounded-lg bg-muted-faint" />
-      <div className="ml-auto h-10 w-3/5 animate-pulse rounded-lg bg-muted-faint" />
-      <div className="h-10 w-2/5 animate-pulse rounded-lg bg-muted-faint" />
+    <div className="stg:space-y-2" aria-hidden="true">
+      <div className="stg:h-10 stg:w-3/5 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
+      <div className="stg:ml-auto stg:h-10 stg:w-3/5 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
+      <div className="stg:h-10 stg:w-2/5 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
     </div>
   );
 }

package/src/conversation/ConversationsWorkbench.tsx

@@ -265,10 +265,10 @@ export function ConversationsWorkbench({
   return (
     <div
       aria-label="Conversations workbench"
-      className={cn("flex min-h-0 flex-1", className)}
+      className={cn("stg:flex stg:min-h-0 stg:flex-1", className)}
     >
       <ConversationListPane
-        className="w-80 shrink-0 border-r border-border"
+        className="stg:w-80 stg:shrink-0 stg:border-r stg:border-border"
         conversations={list.conversations}
         isLoading={list.isLoading}
         error={list.error}
@@ -286,10 +286,10 @@ export function ConversationsWorkbench({
       />
 
       {selected === null ? (
-        <div className="flex min-w-0 flex-1 items-center justify-center p-6">
+        <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:justify-center stg:p-6">
           <EmptyState
             variant="first-use"
-            icon={<MessagesSquare className="size-8" />}
+            icon={<MessagesSquare className="stg:size-8" />}
             title="Select a conversation"
             description="Pick a conversation to read its thread, reply as your business, or take over from the agent."
           />
@@ -305,15 +305,15 @@ export function ConversationsWorkbench({
         // Channel ids never contain ":", so the joined key is unambiguous.
         <div
           key={`${selected.agentChannelId}:${selected.conversationKey}`}
-          className="flex min-w-0 flex-1 flex-col"
+          className="stg:flex stg:min-w-0 stg:flex-1 stg:flex-col"
         >
-          <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2.5">
-            <div className="min-w-0">
-              <h2 className="truncate text-sm font-semibold text-foreground">
+          <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:border-b stg:border-border stg:px-4 stg:py-2.5">
+            <div className="stg:min-w-0">
+              <h2 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
                 {detailLabel}
               </h2>
               {(detailContact !== null || channelName) && (
-                <p className="truncate text-xs text-muted-foreground">
+                <p className="stg:truncate stg:text-xs stg:text-muted-foreground">
                   {detailContact}
                   {detailContact !== null && channelName && " · "}
                   {channelName &&
@@ -323,7 +323,7 @@ export function ConversationsWorkbench({
                     (selectedChannelHref ? (
                       <a
                         href={selectedChannelHref}
-                        className="hover:text-foreground hover:underline"
+                        className="stg:hover:text-foreground stg:hover:underline"
                       >
                         {channelName}
                       </a>

package/src/conversation/__tests__/ConversationComposer.test.tsx

@@ -85,7 +85,7 @@ describe("ConversationComposer", () => {
     expect(button.textContent).toContain("Sending…");
     // The house in-flight glyph (the session composer's pattern): the
     // static Send icon must not render while the reply is in flight.
-    expect(button.querySelector("svg.animate-spin")).not.toBeNull();
+    expect(button.querySelector("svg.stg\\:animate-spin")).not.toBeNull();
     expect(
       (screen.getByLabelText("Reply to the customer") as HTMLTextAreaElement).disabled,
     ).toBe(true);

package/src/cursor-accounts/CursorAccountEditor.tsx

@@ -102,8 +102,8 @@ export function CursorAccountEditor({
   };
 
   return (
-    <form className={cn("max-w-xl space-y-3", className)} onSubmit={handleSubmit}>
-      <h3 className="text-sm font-semibold text-foreground">
+    <form className={cn("stg:max-w-xl stg:space-y-3", className)} onSubmit={handleSubmit}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
         {isCreate ? "Add Cursor account" : `Edit ${initial.displayName}`}
       </h3>
 
@@ -129,7 +129,7 @@ export function CursorAccountEditor({
         />
       </Field>
       {!isCreate && (
-        <p className="text-[11px] text-muted-foreground">
+        <p className="stg:text-[11px] stg:text-muted-foreground">
           Leave the masked value untouched to keep the stored key; typing a
           new key rotates it (validated against Cursor before saving).
         </p>
@@ -147,7 +147,7 @@ export function CursorAccountEditor({
           spellCheck={false}
         />
       </Field>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="stg:text-[11px] stg:text-muted-foreground">
         Optional. Powers one-click &quot;Copy invite&quot; on coverage rows
         whose key owner is not on the team. The link is long-lived and
         joinable by anyone holding it (each join consumes a paid seat) —
@@ -157,14 +157,14 @@ export function CursorAccountEditor({
 
       <Field label="Dedicated organization ids">
         <textarea
-          className={cn(INPUT_CLASSES, "min-h-16 font-mono")}
+          className={cn(INPUT_CLASSES, "stg:min-h-16 stg:font-mono")}
           value={orgIdsText}
           onChange={(e) => setOrgIdsText(e.target.value)}
           placeholder={"one org id per line\n(leave empty for a shared-pool account)"}
           disabled={isSubmitting}
         />
       </Field>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="stg:text-[11px] stg:text-muted-foreground">
         Listing org ids DEDICATES this account to them: their sessions use
         only this account&apos;s keys and fail with a clear message when it
         runs dry. Leaving this empty makes the account part of the shared
@@ -173,9 +173,9 @@ export function CursorAccountEditor({
         one account.
       </p>
 
-      <div className="space-y-2">
+      <div className="stg:space-y-2">
         <div>
-          <label className="flex items-center gap-1.5 text-xs text-foreground">
+          <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
             <input
               type="checkbox"
               checked={enabled}
@@ -184,14 +184,14 @@ export function CursorAccountEditor({
             />
             Enabled for key selection
           </label>
-          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:pl-[1.375rem] stg:text-[11px] stg:text-muted-foreground">
             Leave checked for accounts that should serve traffic. Unchecking
             drains the account: new sessions stop routing here immediately,
             but sessions already pinned to one of its keys keep working.
           </p>
         </div>
         <div>
-          <label className="flex items-center gap-1.5 text-xs text-foreground">
+          <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
             <input
               type="checkbox"
               checked={onDemandEnabled}
@@ -200,7 +200,7 @@ export function CursorAccountEditor({
             />
             On-demand usage enabled (as configured in the Cursor dashboard)
           </label>
-          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:pl-[1.375rem] stg:text-[11px] stg:text-muted-foreground">
             Declared here because Cursor&apos;s Admin API cannot report the
             team&apos;s on-demand setting. Uncheck only when the dashboard has
             on-demand usage OFF: new sessions then avoid member keys whose
@@ -211,12 +211,12 @@ export function CursorAccountEditor({
       </div>
 
       {submitError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(submitError)}
         </p>
       )}
 
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         <Button type="submit" size="sm" disabled={!canSubmit}>
           {isSubmitting ? "Saving…" : isCreate ? "Create account" : "Save changes"}
         </Button>

package/src/cursor-accounts/CursorAccountsAccessNotice.tsx

@@ -17,15 +17,15 @@ export function CursorAccountsAccessNotice({
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center",
         className,
       )}
       role="status"
     >
-      <p className="text-xs font-semibold text-foreground">
+      <p className="stg:text-xs stg:font-semibold stg:text-foreground">
         Platform operator access required
       </p>
-      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+      <p className="stg:mx-auto stg:mt-1 stg:max-w-md stg:text-xs stg:text-muted-foreground">
         Cursor account management is a Stigmer-internal surface holding
         provider credentials and team spend. It needs the platform operator
         role — organization roles do not grant it. If you believe you should

package/src/cursor-accounts/CursorAccountsConsole.tsx

@@ -63,10 +63,10 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
 
   if (list.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
         {Array.from({ length: 3 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -79,7 +79,7 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
       return <CursorAccountsAccessNotice className={className} />;
     }
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(list.error)}
       </p>
     );
@@ -120,32 +120,32 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
   const accounts = list.accounts?.accounts ?? [];
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center justify-between gap-3">
-        <h3 className="text-sm font-semibold text-foreground">Cursor accounts</h3>
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">Cursor accounts</h3>
         <Button size="sm" onClick={() => setFlow({ phase: "create" })}>
           Add account
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-card">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card">
         <div
           aria-hidden="true"
-          className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground"
+          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
         >
           <span>Account</span>
           <span>Orgs</span>
           <span>Status</span>
           <span>Execution keys</span>
-          <span className="text-right">Last synced</span>
+          <span className="stg:text-right">Last synced</span>
         </div>
         {accounts.length === 0 ? (
-          <p className="px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             No Cursor accounts yet. Add one with its team Admin API key, then
             add member execution keys to make it routable.
           </p>
         ) : (
-          <ul role="list" aria-label="Cursor accounts" className="m-0 list-none p-0">
+          <ul role="list" aria-label="Cursor accounts" className="stg:m-0 stg:list-none stg:p-0">
             {accounts.map((summary) => (
               <AccountRow
                 key={summary.account?.accountId}
@@ -181,29 +181,29 @@ function AccountRow({
   if (!account) return null;
 
   return (
-    <li className="border-b border-border last:border-b-0">
+    <li className="stg:border-b stg:border-border stg:last:border-b-0">
       <button
         type="button"
         onClick={onOpen}
         className={cn(
-          "grid w-full grid-cols-[2fr_1fr_1fr_1fr_1fr] items-center gap-2 px-3 py-2 text-left text-xs",
-          "transition-colors hover:bg-accent",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:grid stg:w-full stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-left stg:text-xs",
+          "stg:transition-colors stg:hover:bg-accent",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
-        <span className="min-w-0">
-          <span className="block truncate font-medium text-foreground">
+        <span className="stg:min-w-0">
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {account.displayName}
           </span>
           {/* Account class is DERIVED from org_ids (DD-008): no org
               assignment means the account belongs to the shared pool. */}
           {account.orgIds.length === 0 && (
-            <span className="block text-[11px] text-muted-foreground">
+            <span className="stg:block stg:text-[11px] stg:text-muted-foreground">
               shared pool
             </span>
           )}
         </span>
-        <span className="text-muted-foreground">
+        <span className="stg:text-muted-foreground">
           {account.orgIds.length > 0 ? account.orgIds.length : "—"}
         </span>
         <span>
@@ -214,12 +214,12 @@ function AccountRow({
         </span>
         <span>
           {summary.enabledKeyCount > 0 ? (
-            <span className="text-muted-foreground">{summary.enabledKeyCount}</span>
+            <span className="stg:text-muted-foreground">{summary.enabledKeyCount}</span>
           ) : (
             <StateBadge tone="warn" label="Not routable" />
           )}
         </span>
-        <span className="text-right text-muted-foreground">
+        <span className="stg:text-right stg:text-muted-foreground">
           {formatSyncTime(summary.lastSyncedAt)}
         </span>
       </button>
@@ -303,17 +303,17 @@ function AccountDetail({
 
   if (detail.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
-        <div className="h-24 animate-pulse rounded-lg bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
+        <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
       </div>
     );
   }
 
   if (detail.error || !detail.view?.account) {
     return (
-      <div className={cn("space-y-2", className)}>
-        <p className="text-destructive text-xs" role="alert">
+      <div className={cn("stg:space-y-2", className)}>
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {detail.error ? getUserMessage(detail.error) : "Account not found."}
         </p>
         <Button size="sm" variant="outline" onClick={onBack}>
@@ -364,13 +364,13 @@ function AccountDetail({
   }
 
   return (
-    <div className={cn("space-y-4", className)}>
-      <div className="flex flex-wrap items-center justify-between gap-2">
+    <div className={cn("stg:space-y-4", className)}>
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2">
         <div>
-          <h3 className="text-sm font-semibold text-foreground">
+          <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
             {account.displayName}
           </h3>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             {account.orgIds.length > 0
               ? `Dedicated to ${account.orgIds.length} org(s): ${account.orgIds.join(", ")}`
               : "Shared pool — serves every org with no dedicated account"}
@@ -389,7 +389,7 @@ function AccountDetail({
               : ""}
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="stg:flex stg:gap-2">
           <Button size="sm" variant="outline" onClick={onBack}>
             Back
           </Button>
@@ -425,17 +425,17 @@ function AccountDetail({
       </div>
 
       {syncError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(syncError)}
         </p>
       )}
       {deleteError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(deleteError)}
         </p>
       )}
       {view.snapshot?.syncError && (
-        <p className="text-xs text-muted-foreground" role="status">
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
           Last sync was partial: {view.snapshot.syncError}
         </p>
       )}