@stigmer/react 3.9.0 → 3.11.0

package/src/settings/EnvironmentsSection.tsx

@@ -18,7 +18,7 @@ export function EnvironmentsSection() {
   const org = useActiveOrgSlug();
 
   return (
-    <div className="space-y-10">
+    <div className="stg:space-y-10">
       <PersonalEnvironmentCard org={org} />
       <EnvironmentsCard org={org} />
     </div>
@@ -50,18 +50,18 @@ function PersonalEnvironmentCard({ org }: { org: string }) {
 
   return (
     <section aria-labelledby="personal-env-heading">
-      <div className="mb-3 flex items-baseline gap-2">
+      <div className="stg:mb-3 stg:flex stg:items-baseline stg:gap-2">
         <h2
           id="personal-env-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Personal Environment
         </h2>
-        <span className="bg-primary-subtle text-primary rounded-full px-2 py-0.5 text-[0.6rem] font-medium uppercase tracking-wider">
+        <span className="stg:bg-primary-subtle stg:text-primary stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wider">
           You
         </span>
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Your private secrets and configuration, automatically managed for you.
         Only visible to you — used when running agents that require your
         personal credentials.
@@ -70,13 +70,13 @@ function PersonalEnvironmentCard({ org }: { org: string }) {
       {isLoading || isMutating ? (
         <SkeletonRows count={3} />
       ) : error ? (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(error)}
         </p>
       ) : environmentId ? (
         <EnvironmentVariableEditor environmentId={environmentId} />
       ) : (
-        <p className="text-muted-foreground text-xs">
+        <p className="stg:text-muted-foreground stg:text-xs">
           Your personal environment will be created automatically when needed.
         </p>
       )}
@@ -99,10 +99,10 @@ function EnvironmentsCard({ org }: { org: string }) {
 
   return (
     <section aria-labelledby="org-env-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="org-env-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Environments
         </h2>
@@ -111,19 +111,19 @@ function EnvironmentsCard({ org }: { org: string }) {
           <button
             type="button"
             onClick={() => setShowCreate(true)}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New environment
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Named environments for your organization. Store credentials, API tokens,
         and configuration that agents need at runtime.
       </p>
 
       {showCreate && (
-        <div className="border-border bg-card mb-4 rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:mb-4 stg:rounded-lg stg:border stg:p-4">
           <CreateEnvironmentForm
             org={org}
             onCreated={handleCreated}
@@ -139,7 +139,7 @@ function EnvironmentsCard({ org }: { org: string }) {
           onRefetchRef={handleRefetchRef}
         />
       ) : (
-        <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 environments.
         </p>
       )}
@@ -149,11 +149,11 @@ function EnvironmentsCard({ org }: { org: string }) {
 
 function SkeletonRows({ count }: { count: number }) {
   return (
-    <div className="space-y-2" aria-busy="true" aria-label="Loading">
+    <div className="stg:space-y-2" aria-busy="true" aria-label="Loading">
       {Array.from({ length: count }, (_, i) => (
         <div
           key={i}
-          className="bg-muted-subtle h-8 animate-pulse rounded"
+          className="stg:bg-muted-subtle stg:h-8 stg:animate-pulse stg:rounded"
           style={{ width: `${85 - i * 10}%` }}
         />
       ))}

package/src/settings/IdentityProvidersSection.tsx

@@ -55,10 +55,10 @@ export function IdentityProvidersSection({
 
   return (
     <section aria-labelledby="identity-providers-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="identity-providers-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Identity Providers
         </h2>
@@ -67,13 +67,13 @@ export function IdentityProvidersSection({
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New identity provider
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Identity providers define external OIDC trust relationships for
         federated authentication. Configure providers for platform-managed
         organizations or self-managed SSO.
@@ -85,11 +85,11 @@ export function IdentityProvidersSection({
           authentication requires Stigmer Cloud.
         </CloudFeatureNotice>
       ) : !orgSlug ? (
-        <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 manage identity providers.
         </p>
       ) : flow.phase === "creating" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <IdentityProviderWizard
             org={orgSlug}
             onCreated={handleCreated}
@@ -97,7 +97,7 @@ export function IdentityProvidersSection({
           />
         </div>
       ) : flow.phase === "editing" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <IdentityProviderDetailPanel
             identityProvider={flow.identityProvider}
             ssoLoginUrl={

package/src/settings/InvitationsSection.tsx

@@ -12,15 +12,15 @@ export function InvitationsSection() {
 
   return (
     <section aria-labelledby="invitations-heading">
-      <div className="mb-3">
+      <div className="stg:mb-3">
         <h2
           id="invitations-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Invitations
         </h2>
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Shareable invite links that grant organization membership with a
         configurable role. Create single-use links for specific people or
         multi-use links for public sharing.
@@ -31,7 +31,7 @@ export function InvitationsSection() {
           Invitations are not available in local mode.
         </CloudFeatureNotice>
       ) : !org ? (
-        <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 manage invitations.
         </p>
       ) : (

package/src/settings/MembersSection.tsx

@@ -26,11 +26,11 @@ export function MembersSection() {
     <section aria-labelledby="members-heading">
       <h2
         id="members-heading"
-        className="text-foreground mb-1 text-sm font-semibold"
+        className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Members
       </h2>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Manage who has access to this organization and what they can do.
         Members can be granted owner, admin, member, or viewer roles.
       </p>
@@ -41,14 +41,14 @@ export function MembersSection() {
           require Stigmer Cloud.
         </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 manage members.
         </p>
       ) : (
         <>
           {hasJitProviders && (
-            <div className="mb-3 rounded-md border border-border-muted bg-muted-faint px-3 py-2">
-              <p className="text-[0.65rem] text-muted-foreground">
+            <div className="stg:mb-3 stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
+              <p className="stg:text-[0.65rem] stg:text-muted-foreground">
                 This organization has identity providers with auto-provisioning
                 enabled. Members may appear here automatically when users
                 authenticate via federated identity.

package/src/settings/OAuthAppsSection.tsx

@@ -43,10 +43,10 @@ export function OAuthAppsSection() {
 
   return (
     <section aria-labelledby="oauth-apps-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="oauth-apps-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           OAuth Apps
         </h2>
@@ -55,13 +55,13 @@ export function OAuthAppsSection() {
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New OAuth app
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         OAuth app credentials configured for your organization. Create new
         apps here or bring your own from an MCP server&apos;s detail page.
       </p>
@@ -72,7 +72,7 @@ export function OAuthAppsSection() {
           OAuth requires the cloud platform.
         </CloudFeatureNotice>
       ) : flow.phase === "creating" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <CreateOAuthAppForm
             org={org}
             onCreated={handleCreated}
@@ -80,7 +80,7 @@ export function OAuthAppsSection() {
           />
         </div>
       ) : flow.phase === "editing" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <OAuthAppDetailPanel
             oauthApp={flow.oauthApp}
             onUpdated={handleUpdated}

package/src/settings/OrgProfileSection.tsx

@@ -21,16 +21,16 @@ export function OrgProfileSection() {
     <section aria-labelledby="org-profile-heading">
       <h2
         id="org-profile-heading"
-        className="text-foreground mb-1 text-sm font-semibold"
+        className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Organization Profile
       </h2>
-      <p className="text-muted-foreground mb-6 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-6 stg:text-xs">
         Manage your organization&apos;s display name, description, and logo.
       </p>
 
       {!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 its profile.
         </p>
       ) : (

package/src/settings/PlatformClientsSection.tsx

@@ -72,10 +72,10 @@ export function PlatformClientsSection() {
 
   return (
     <section aria-labelledby="platform-clients-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="platform-clients-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Platform Clients
         </h2>
@@ -84,13 +84,13 @@ export function PlatformClientsSection() {
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New platform client
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Platform clients let your backend mint Stigmer user tokens so you
         can embed Stigmer components in your application without requiring
         OIDC federation.
@@ -102,7 +102,7 @@ export function PlatformClientsSection() {
           requires Stigmer Cloud.
         </CloudFeatureNotice>
       ) : flow.phase === "creating" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <CreatePlatformClientForm
             org={org}
             onCreated={handleCreated}
@@ -110,7 +110,7 @@ export function PlatformClientsSection() {
           />
         </div>
       ) : flow.phase === "revealing" ? (
-        <div className="space-y-4">
+        <div className="stg:space-y-4">
           <PlatformClientSecretAlert
             clientId={flow.clientId}
             clientSecret={flow.clientSecret}
@@ -126,7 +126,7 @@ export function PlatformClientsSection() {
           />
         </div>
       ) : flow.phase === "editing" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <PlatformClientDetailPanel
             platformClient={flow.platformClient}
             onUpdated={handleUpdated}

package/src/settings/UsageSection.tsx

@@ -12,17 +12,17 @@ export function UsageSection() {
     <section aria-labelledby="usage-heading">
       <h2
         id="usage-heading"
-        className="text-foreground mb-1 text-sm font-semibold"
+        className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Usage
       </h2>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Monitor token consumption, cost, and execution activity across
         your organization.
       </p>
 
       {!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 usage.
         </p>
       ) : (

package/src/sharing/AgentShareList.tsx

@@ -134,14 +134,14 @@ export function AgentShareList({
 
   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 shares
       </div>
     );
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
+    <div className={cn("stg:space-y-3", className)}>
       {shares.length === 0 ? (
         <ShareEmptyState
           canCreate={canCreate}
@@ -149,8 +149,8 @@ export function AgentShareList({
         />
       ) : (
         <>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-foreground">
+          <div className="stg:flex stg:items-center stg:justify-between">
+            <h3 className="stg:text-sm stg:font-medium stg:text-foreground">
               {shares.length} {shares.length === 1 ? "share" : "shares"}
             </h3>
             {canCreate && (
@@ -165,21 +165,21 @@ export function AgentShareList({
             )}
           </div>
 
-          <div className="overflow-hidden rounded-lg border border-border">
+          <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
             {/* table-fixed keeps the layout deterministic: Name/Link flex and
                 truncate, the rest take fixed widths, so a long name or link
                 can never push the Actions kebab off the panel's edge. */}
-            <table className="w-full table-fixed text-sm">
+            <table className="stg:w-full stg:table-fixed stg:text-sm">
               <thead>
-                <tr className="border-b border-border bg-muted-subtle">
-                  <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
-                  <th className="px-4 py-2 text-left font-medium text-muted-foreground">Link</th>
-                  <th className="w-28 px-4 py-2 text-left font-medium text-muted-foreground">Audience</th>
-                  <th className="w-24 px-4 py-2 text-left font-medium text-muted-foreground">Status</th>
-                  <th className="w-16 px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+                <tr className="stg:border-b stg:border-border stg:bg-muted-subtle">
+                  <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Name</th>
+                  <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Link</th>
+                  <th className="stg:w-28 stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Audience</th>
+                  <th className="stg:w-24 stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Status</th>
+                  <th className="stg:w-16 stg:px-4 stg:py-2 stg:text-right stg:font-medium stg:text-muted-foreground">Actions</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-border">
+              <tbody className="stg:divide-y stg:divide-border">
                 {shares.map((share) => (
                   <ShareRow
                     key={share.metadata?.id}
@@ -306,13 +306,13 @@ function ShareRow({
 
   return (
     <tr
-      className="cursor-pointer transition-colors hover:bg-accent-hover"
+      className="stg:cursor-pointer stg:transition-colors stg:hover:bg-accent-hover"
       onClick={() => onEditClick(share)}
     >
-      <td className="px-4 py-2.5">
-        <div className="flex min-w-0 items-center gap-2">
+      <td className="stg:px-4 stg:py-2.5">
+        <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
           <span
-            className="truncate font-medium text-foreground"
+            className="stg:truncate stg:font-medium stg:text-foreground"
             title={meta?.name || slug || undefined}
           >
             {meta?.name || slug || "\u2014"}
@@ -320,9 +320,9 @@ function ShareRow({
           {isCrossOrg && (
             <span
               className={cn(
-                "inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5",
-                "text-[0.6rem] font-medium uppercase tracking-wide",
-                "bg-muted text-muted-foreground border border-border",
+                "stg:inline-flex stg:shrink-0 stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
+                "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wide",
+                "stg:bg-muted stg:text-muted-foreground stg:border stg:border-border",
               )}
               title={`This share lives in ${org}; the agent lives in ${agent.metadata?.org}`}
             >
@@ -332,10 +332,10 @@ function ShareRow({
         </div>
       </td>
 
-      <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
-        <div className="flex min-w-0 items-center gap-1.5">
+      <td className="stg:px-4 stg:py-2.5" onClick={(e) => e.stopPropagation()}>
+        <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-1.5">
           <code
-            className="truncate font-mono text-xs text-muted-foreground"
+            className="stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground"
             title={displayPath}
           >
             {displayPath}
@@ -345,9 +345,9 @@ function ShareRow({
             onClick={handleCopyLink}
             aria-label={`Copy link for ${meta?.name || slug}`}
             className={cn(
-              "shrink-0 rounded p-1 text-muted-foreground",
-              "hover:bg-accent-hover hover:text-foreground",
-              "focus:outline-none focus:ring-1 focus:ring-ring",
+              "stg:shrink-0 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",
             )}
           >
             <CopyIcon />
@@ -355,24 +355,24 @@ function ShareRow({
         </div>
       </td>
 
-      <td className="px-4 py-2.5">
-        <span className="text-xs text-muted-foreground">
+      <td className="stg:px-4 stg:py-2.5">
+        <span className="stg:text-xs stg:text-muted-foreground">
           {audience === "org" ? "Org members" : "Public"}
         </span>
       </td>
 
-      <td className="px-4 py-2.5">
+      <td className="stg:px-4 stg:py-2.5">
         <span
           className={cn(
-            "inline-flex items-center gap-1.5 text-xs",
-            enabled ? "text-foreground" : "text-muted-foreground",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs",
+            enabled ? "stg:text-foreground" : "stg:text-muted-foreground",
           )}
         >
           <span
             aria-hidden="true"
             className={cn(
-              "size-1.5 rounded-full",
-              enabled ? "bg-success" : "bg-muted-foreground",
+              "stg:size-1.5 stg:rounded-full",
+              enabled ? "stg:bg-success" : "stg:bg-muted-foreground",
             )}
           />
           {enabled ? "Active" : "Paused"}
@@ -382,14 +382,14 @@ function ShareRow({
       {/* stopPropagation so opening the kebab never triggers the row's
           click-to-edit. The menu content itself is portaled, so its items
           never bubble to the row regardless. */}
-      <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
+      <td className="stg:px-4 stg:py-2.5 stg:text-right" onClick={(e) => e.stopPropagation()}>
         {(canEdit || canDelete) && (
           <ActionMenu>
             <ActionMenu.Trigger
-              className="ml-auto"
+              className="stg:ml-auto"
               aria-label={`Actions for ${meta?.name || slug}`}
             >
-              <MoreHorizontal className="size-4" />
+              <MoreHorizontal className="stg:size-4" />
             </ActionMenu.Trigger>
             <ActionMenu.Content>
               {canEdit && (
@@ -455,7 +455,7 @@ function ShareEmptyState({
   return (
     <EmptyState
       variant="first-use"
-      icon={<ShareIcon className="size-10" />}
+      icon={<ShareIcon className="stg:size-10" />}
       title="No shares yet"
       description={
         "A share gives this agent a hosted chat link you can send or embed — " +
@@ -477,9 +477,9 @@ function ShareEmptyState({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-2 py-4">
+    <div className="stg:space-y-2 stg:py-4">
       {[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>
   );