@stigmer/react 3.10.0 → 3.11.0

package/src/channel/AgentChannelsPanel.tsx

@@ -206,7 +206,7 @@ export function AgentChannelsPanel({
 
   if (error) {
     return (
-      <div className="py-8 text-center text-sm text-destructive">
+      <div className="stg:py-8 stg:text-center stg:text-sm stg:text-destructive">
         Failed to load channels
       </div>
     );
@@ -241,7 +241,7 @@ export function AgentChannelsPanel({
           CHANNEL_PROVIDERS[0];
 
   return (
-    <div className={cn("space-y-3", className)}>
+    <div className={cn("stg:space-y-3", className)}>
       {showCloudNotice && (
         <CloudFeatureNotice>
           Channel installs require Stigmer Cloud — connecting an agent to
@@ -257,21 +257,21 @@ export function AgentChannelsPanel({
         />
       ) : (
         <>
-          <div className="flex items-center justify-between gap-2">
-            <h3 className="text-sm font-medium text-foreground">
+          <div className="stg:flex stg:items-center stg:justify-between stg:gap-2">
+            <h3 className="stg:text-sm stg:font-medium stg:text-foreground">
               {channels.length} {channels.length === 1 ? "channel" : "channels"}
             </h3>
             {/* One visible button per provider — deliberately not a
                 dropdown: two options are clearer side by side, and each
                 keeps its own stable cursor target (see providers.ts). */}
             {connectableProviders.length > 0 && (
-              <div className="flex shrink-0 items-center gap-2">
+              <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-2">
                 {connectableProviders.map((p) => (
                   <Button
                     key={p.id}
                     variant="outline"
                     size="xs"
-                    icon={<p.Icon className="size-3" />}
+                    icon={<p.Icon className="stg:size-3" />}
                     onClick={() => handleConnect(null, p)}
                     data-cursor-target={`connect-${p.id}`}
                   >
@@ -282,7 +282,7 @@ export function AgentChannelsPanel({
             )}
           </div>
 
-          <div className="space-y-2">
+          <div className="stg:space-y-2">
             {channels.map((channel) => {
               const cardProvider =
                 channelProviderOf(channel.spec?.providerConfig?.case) ??
@@ -504,30 +504,30 @@ function ChannelCard({
   );
 
   return (
-    <div className="rounded-lg border border-border p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex min-w-0 items-center gap-2.5">
-          <provider.Icon className="size-5 shrink-0 text-foreground" />
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
+    <div className="stg:rounded-lg stg:border stg:border-border stg:p-4">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2.5">
+          <provider.Icon className="stg:size-5 stg:shrink-0 stg:text-foreground" />
+          <div className="stg:min-w-0">
+            <div className="stg:flex stg:items-center stg:gap-2">
               <span
-                className="truncate text-sm font-medium text-foreground"
+                className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground"
                 title={meta?.name || meta?.slug || undefined}
               >
                 {meta?.name || meta?.slug || "\u2014"}
               </span>
               <InstallStatePill state={installState} />
             </div>
-            <p className="mt-0.5 text-xs text-muted-foreground">
+            <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
               {presentation.describeChannel(channel)}
             </p>
-            <p className="mt-0.5 text-xs text-muted-foreground-faint">
+            <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground-faint">
               {presentation.servingLine(servingAppName)}
             </p>
           </div>
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-2">
           {canEdit && installState === AgentChannelInstallState.installed && (
             <Switch
               checked={enabled}
@@ -552,7 +552,7 @@ function ChannelCard({
             <ActionMenu.Trigger
               aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              <MoreHorizontal className="size-4" />
+              <MoreHorizontal className="stg:size-4" />
             </ActionMenu.Trigger>
             <ActionMenu.Content>
               <ActionMenu.Item
@@ -665,7 +665,7 @@ function CardReadinessWarning({
       : `Bound environment${readiness.privateEnvironments.length > 1 ? "s" : ""} ${readiness.privateEnvironments.join(", ")} ${readiness.privateEnvironments.length > 1 ? "are" : "is"} private — share ${readiness.privateEnvironments.length > 1 ? "them" : "it"} with your organization so workspace messages can use the credentials.`;
 
   return (
-    <p className="mt-2 text-xs text-warning" role="status">
+    <p className="stg:mt-2 stg:text-xs stg:text-warning" role="status">
       {message}
       {canEdit && (
         <>
@@ -674,9 +674,9 @@ function CardReadinessWarning({
             type="button"
             onClick={onEditCredentials}
             className={cn(
-              "font-medium underline underline-offset-2",
-              "hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+              "stg:font-medium stg:underline stg:underline-offset-2",
+              "stg:hover:text-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
             )}
           >
             Bind credentials
@@ -702,22 +702,22 @@ function InstallStatePill({ state }: { readonly state: AgentChannelInstallState
   const { label, tone } = (() => {
     switch (state) {
       case AgentChannelInstallState.installed:
-        return { label: "Installed", tone: "text-success" };
+        return { label: "Installed", tone: "stg:text-success" };
       case AgentChannelInstallState.revoked:
-        return { label: "Revoked", tone: "text-destructive" };
+        return { label: "Revoked", tone: "stg:text-destructive" };
       default:
-        return { label: "Pending install", tone: "text-muted-foreground" };
+        return { label: "Pending install", tone: "stg:text-muted-foreground" };
     }
   })();
 
   return (
     <span
       className={cn(
-        "inline-flex shrink-0 items-center gap-1.5 text-xs",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:text-xs",
         tone,
       )}
     >
-      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span aria-hidden="true" className="stg:size-1.5 stg:rounded-full stg:bg-current" />
       {label}
     </span>
   );
@@ -740,9 +740,9 @@ function ChannelEmptyState({
     <EmptyState
       variant="first-use"
       icon={
-        <span className="flex items-center gap-2">
+        <span className="stg:flex stg:items-center stg:gap-2">
           {CHANNEL_PROVIDERS.map((p) => (
-            <p.Icon key={p.id} className="size-10" />
+            <p.Icon key={p.id} className="stg:size-10" />
           ))}
         </span>
       }
@@ -758,12 +758,12 @@ function ChannelEmptyState({
           config does not thread through. One visible button per provider
           — see providers.ts for why this is not a dropdown. */}
       {providers.length > 0 && (
-        <span className="flex items-center gap-2">
+        <span className="stg:flex stg:items-center stg:gap-2">
           {providers.map((p) => (
             <Button
               key={p.id}
               variant="primary"
-              icon={<p.Icon className="size-3" />}
+              icon={<p.Icon className="stg:size-3" />}
               onClick={() => onConnectClick(p)}
               data-cursor-target={`connect-${p.id}`}
             >
@@ -778,9 +778,9 @@ function ChannelEmptyState({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-2 py-4">
+    <div className="stg:space-y-2 stg:py-4">
       {[1, 2].map((i) => (
-        <div key={i} className="h-20 animate-pulse rounded-lg bg-muted-faint" />
+        <div key={i} className="stg:h-20 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/channel/ChannelConversationsDialog.tsx

@@ -95,8 +95,8 @@ export function ChannelConversationsDialog({
       open={modal ? undefined : open}
       onClose={handleClose}
       className={cn(
-        "w-full max-w-lg rounded-xl border border-border bg-popover p-0 shadow-xl",
-        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+        "stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
       )}
       aria-labelledby="channel-conversations-title"
     >
@@ -128,16 +128,16 @@ function ChannelConversationsDialogBody({
   );
 
   return (
-    <div className="flex max-h-[70vh] flex-col">
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="min-w-0">
+    <div className="stg:flex stg:max-h-[70vh] stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
           <h2
             id="channel-conversations-title"
-            className="text-sm font-semibold text-popover-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Sessions
           </h2>
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
             The sessions {channelName} created — read-only, visible to the
             channel&apos;s owner and org admins.
           </p>
@@ -148,26 +148,26 @@ function ChannelConversationsDialogBody({
           onClick={onClose}
           aria-label="Close sessions"
         >
-          <X className="size-4" />
+          <X className="stg:size-4" />
         </Button>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-3">
         {isLoading ? (
           <ConversationsSkeleton />
         ) : 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>
         ) : sessions.length === 0 ? (
           <EmptyState
             variant="first-use"
-            icon={<MessageSquare className="size-8" />}
+            icon={<MessageSquare className="stg:size-8" />}
             title="No sessions yet"
             description="When someone messages this channel, the sessions serving them appear here."
           />
         ) : (
-          <ul className="space-y-1">
+          <ul className="stg:space-y-1">
             {sessions.map((session) => (
               <ConversationRow
                 key={session.metadata?.id}
@@ -199,19 +199,19 @@ function ConversationRow({
 
   const content = (
     <>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm text-foreground" title={subject}>
+      <div className="stg:min-w-0 stg:flex-1">
+        <p className="stg:truncate stg:text-sm stg:text-foreground" title={subject}>
           {subject}
         </p>
         {externalUser && (
-          <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-            <User aria-hidden="true" className="size-3" />
+          <p className="stg:mt-0.5 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:text-muted-foreground">
+            <User aria-hidden="true" className="stg:size-3" />
             {externalUser}
           </p>
         )}
       </div>
       {lastActivity && (
-        <span className="shrink-0 text-xs text-muted-foreground-faint">
+        <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground-faint">
           {formatRelativeTime(lastActivity)}
         </span>
       )}
@@ -219,7 +219,7 @@ function ConversationRow({
   );
 
   const rowClass =
-    "flex items-center gap-3 rounded-md px-2 py-2 text-left";
+    "stg:flex stg:items-center stg:gap-3 stg:rounded-md stg:px-2 stg:py-2 stg:text-left";
 
   return (
     <li>
@@ -228,7 +228,7 @@ function ConversationRow({
           href={href}
           className={cn(
             rowClass,
-            "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:hover:bg-accent stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           {content}
@@ -242,9 +242,9 @@ function ConversationRow({
 
 function ConversationsSkeleton() {
   return (
-    <div className="space-y-1 p-1">
+    <div className="stg:space-y-1 stg:p-1">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
+        <div key={i} className="stg:h-12 stg:animate-pulse stg:rounded-md stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/channel/ChannelCredentialsDialog.tsx

@@ -79,8 +79,8 @@ export function ChannelCredentialsDialog({
       open={modal ? undefined : open}
       onClose={handleClose}
       className={cn(
-        "w-full max-w-md rounded-xl border border-border bg-popover p-0 shadow-xl",
-        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+        "stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
       )}
       aria-labelledby="channel-credentials-title"
     >
@@ -138,16 +138,16 @@ function ChannelCredentialsDialogBody({
   }, [channel, draft, onClose, onSaved, save]);
 
   return (
-    <div className="flex flex-col">
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="min-w-0">
+    <div className="stg:flex stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
           <h2
             id="channel-credentials-title"
-            className="text-sm font-semibold text-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-foreground"
           >
             Tool credentials
           </h2>
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
             {channelName}
           </p>
         </div>
@@ -156,16 +156,16 @@ function ChannelCredentialsDialogBody({
           onClick={onClose}
           aria-label="Close dialog"
           className={cn(
-            "rounded p-1 text-muted-foreground",
-            "hover:bg-accent-hover hover:text-foreground",
-            "focus:outline-none focus:ring-1 focus:ring-ring",
+            "stg:rounded stg:p-1 stg:text-muted-foreground",
+            "stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
           )}
         >
           <CloseIcon />
         </button>
       </div>
 
-      <div className="px-5 py-4">
+      <div className="stg:px-5 stg:py-4">
         <ChannelToolCredentials
           agent={agent}
           org={org}
@@ -178,14 +178,14 @@ function ChannelCredentialsDialogBody({
         {error && (
           <div
             role="alert"
-            className="mt-3 rounded-md border border-destructive/30 bg-destructive-subtle px-3 py-2 text-xs text-destructive"
+            className="stg:mt-3 stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-destructive"
           >
             {getUserMessage(error)}
           </div>
         )}
       </div>
 
-      <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-5 stg:py-3">
         <Button
           variant="ghost"
           size="sm"

package/src/channel/ChannelTemplatesDialog.tsx

@@ -118,8 +118,8 @@ export function ChannelTemplatesDialog({
       className={cn(
         // Wider than the conversations dialog on purpose: template
         // bodies are the content, and a narrow column shreds them.
-        "w-full max-w-2xl rounded-xl border border-border bg-popover p-0 shadow-xl",
-        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+        "stg:w-full stg:max-w-2xl stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
       )}
       aria-labelledby="channel-templates-title"
     >
@@ -149,16 +149,16 @@ function ChannelTemplatesDialogBody({
     channel.metadata?.name || channel.metadata?.slug || "this channel";
 
   return (
-    <div className="flex max-h-[75vh] flex-col">
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="min-w-0">
+    <div className="stg:flex stg:max-h-[75vh] stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
           <h2
             id="channel-templates-title"
-            className="text-sm font-semibold text-popover-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Templates
           </h2>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             The message templates WhatsApp holds for {channelName} — authored
             and approved in WhatsApp Manager, listed here as WhatsApp reports
             them.
@@ -170,11 +170,11 @@ function ChannelTemplatesDialogBody({
           onClick={onClose}
           aria-label="Close templates"
         >
-          <X className="size-4" />
+          <X className="stg:size-4" />
         </Button>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-4">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-4">
         <ChannelTemplatesContent channel={channel} onEditYaml={onEditYaml} />
       </div>
     </div>
@@ -216,7 +216,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="Connect this channel first"
           description={`${presentation.describeChannel(channel)} Templates become readable once the connection is complete.`}
         />
@@ -225,7 +225,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="This channel is turned off"
           description="Turn the channel on with the switch on its card, then check back here."
         />
@@ -234,7 +234,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="Business-initiated messaging is not enabled"
           description={
             "Templates power messages your agent sends first — reminders, " +
@@ -272,7 +272,7 @@ function ChannelTemplatesList({
     // The server's copy is the teaching state past the pre-check —
     // its refusals name the fix (scope, token, app binding) verbatim.
     return (
-      <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>
     );
@@ -284,7 +284,7 @@ function ChannelTemplatesList({
     return (
       <EmptyState
         variant="first-use"
-        icon={<LayoutTemplate className="size-8" />}
+        icon={<LayoutTemplate className="stg:size-8" />}
         title="No templates found for this channel"
         description={
           "Templates are authored in WhatsApp Manager and approved by " +
@@ -303,15 +303,15 @@ function ChannelTemplatesList({
 
   return (
     <div>
-      <div className="flex items-center justify-between gap-3 px-1 pb-3">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3 stg:px-1 stg:pb-3">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {templates.length} {templates.length === 1 ? "template" : "templates"}
           {" \u00b7 "}
           {sendable} ready to send
         </p>
         <WhatsAppManagerLink label="Manage in WhatsApp Manager" />
       </div>
-      <ul className="space-y-2">
+      <ul className="stg:space-y-2">
         {templates.map((template) => (
           <TemplateRow
             key={`${template.name}\u0000${template.language}`}
@@ -329,18 +329,18 @@ function ChannelTemplatesList({
 
 function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
   return (
-    <li className="rounded-lg border border-border p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+    <li className="stg:rounded-lg stg:border stg:border-border stg:p-3">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1">
           <span
-            className="truncate text-sm font-medium text-foreground"
+            className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground"
             title={template.name}
           >
             {template.name}
           </span>
           {/* (name, language) is the template's identity — each
               language is approved independently, so it always shows. */}
-          <span className="shrink-0 text-xs text-muted-foreground">
+          <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">
             {template.language}
           </span>
           {template.category && <FactChip>{template.category}</FactChip>}
@@ -351,19 +351,19 @@ function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
         <StatusBadge
           phase={templateStatusPhase(template.status)}
           label={template.status}
-          className="shrink-0"
+          className="stg:shrink-0"
         />
       </div>
 
       {template.bodyText && <TemplateBody body={template.bodyText} />}
 
       {template.rejectionReason && (
-        <p className="mt-2 text-xs text-destructive">
+        <p className="stg:mt-2 stg:text-xs stg:text-destructive">
           Rejected: {template.rejectionReason}
         </p>
       )}
       {template.unsupportedReason && (
-        <p className="mt-2 text-xs text-warning" role="status">
+        <p className="stg:mt-2 stg:text-xs stg:text-warning" role="status">
           Not sendable: {template.unsupportedReason}
         </p>
       )}
@@ -378,12 +378,12 @@ function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
  */
 function TemplateBody({ body }: { readonly body: string }) {
   return (
-    <p className="mt-2 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">
+    <p className="stg:mt-2 stg:whitespace-pre-wrap stg:text-xs stg:leading-relaxed stg:text-muted-foreground">
       {splitTemplateBody(body).map((segment, i) =>
         segment.kind === "placeholder" ? (
           <code
             key={i}
-            className="rounded bg-muted-subtle px-1 font-mono text-foreground"
+            className="stg:rounded stg:bg-muted-subtle stg:px-1 stg:font-mono stg:text-foreground"
           >
             {segment.value}
           </code>
@@ -398,7 +398,7 @@ function TemplateBody({ body }: { readonly body: string }) {
 /** Provider-verbatim fact rendered small and quiet (category, header). */
 function FactChip({ children }: { readonly children: ReactNode }) {
   return (
-    <span className="shrink-0 rounded bg-muted-subtle px-1.5 py-0.5 text-xs text-muted-foreground">
+    <span className="stg:shrink-0 stg:rounded stg:bg-muted-subtle stg:px-1.5 stg:py-0.5 stg:text-xs stg:text-muted-foreground">
       {children}
     </span>
   );
@@ -411,22 +411,22 @@ function WhatsAppManagerLink({ label }: { readonly label: string }) {
       target="_blank"
       rel="noreferrer noopener"
       className={cn(
-        "inline-flex shrink-0 items-center gap-1 text-xs font-medium text-foreground",
-        "underline underline-offset-2 hover:text-muted-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1 stg:text-xs stg:font-medium stg:text-foreground",
+        "stg:underline stg:underline-offset-2 stg:hover:text-muted-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
       )}
     >
       {label}
-      <ExternalLink aria-hidden="true" className="size-3" />
+      <ExternalLink aria-hidden="true" className="stg:size-3" />
     </a>
   );
 }
 
 function TemplatesSkeleton() {
   return (
-    <div className="space-y-2 p-1">
+    <div className="stg:space-y-2 stg:p-1">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-20 animate-pulse rounded-lg bg-muted-faint" />
+        <div key={i} className="stg:h-20 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/channel/ChannelToolCredentials.tsx

@@ -54,8 +54,8 @@ export function ChannelToolCredentials({
   );
 
   return (
-    <div className="flex flex-col gap-2">
-      <p className="text-[0.65rem] text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-2">
+      <p className="stg:text-[0.65rem] stg:text-muted-foreground">
         Environments whose values workspace conversations can use — bind
         one holding the credentials this agent&apos;s tools need (a
         read-only token is safest). Only environments shared with your
@@ -95,7 +95,7 @@ function ChannelToolReadinessHint({
 
   if (readiness.status === "needs-credentials") {
     return (
-      <p className="text-xs text-warning" role="status">
+      <p className="stg:text-xs stg:text-warning" role="status">
         Workspace conversations can&apos;t use this agent&apos;s tools yet:
         no credentials are bound to this channel. Bind an org-shared
         environment above.
@@ -111,10 +111,10 @@ function ChannelToolReadinessHint({
   const plural = readiness.privateEnvironments.length > 1;
 
   return (
-    <p className="text-xs text-warning" role="status">
+    <p className="stg:text-xs stg:text-warning" role="status">
       Workspace conversations can&apos;t use this agent&apos;s tools yet:
       the environment{plural ? "s" : ""}{" "}
-      <span className="font-medium">{envList}</span>{" "}
+      <span className="stg:font-medium">{envList}</span>{" "}
       {plural ? "are" : "is"} private. Share {plural ? "them" : "it"} with
       your organization (Settings &rarr; Environments) so channel
       conversations can use the credentials. Secret values stay hidden