@stigmer/react 3.9.0 → 3.11.0

package/src/channel/ConnectSlackDialog.tsx

@@ -119,8 +119,8 @@ export function ConnectSlackDialog({
       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="connect-slack-title"
     >
@@ -271,12 +271,12 @@ function ConnectSlackDialogBody({
   const busy = isCreating || slack.isInProgress;
 
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       {/* Header */}
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="flex items-center gap-2.5">
-          <SlackMarkIcon className="size-5 text-foreground" />
-          <h2 id="connect-slack-title" className="text-sm font-semibold text-foreground">
+      <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:flex stg:items-center stg:gap-2.5">
+          <SlackMarkIcon className="stg:size-5 stg:text-foreground" />
+          <h2 id="connect-slack-title" className="stg:text-sm stg:font-semibold stg:text-foreground">
             {channel ? "Reconnect to Slack" : "Connect to Slack"}
           </h2>
         </div>
@@ -285,16 +285,16 @@ function ConnectSlackDialogBody({
           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="space-y-4 px-5 py-4">
+      <div className="stg:space-y-4 stg:px-5 stg:py-4">
         {deploymentMode === "local" ? (
           // Preempt the doomed flow: the OSS backend answers every install
           // with FAILED_PRECONDITION, so don't open a popup destined to fail.
@@ -314,8 +314,8 @@ function ConnectSlackDialogBody({
         ) : (
           <>
             {!channel && (
-              <label className="block">
-                <span className="mb-1.5 block text-xs font-medium text-foreground">
+              <label className="stg:block">
+                <span className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
                   Channel name
                 </span>
                 <input
@@ -324,12 +324,12 @@ function ConnectSlackDialogBody({
                   onChange={(e) => setName(e.target.value)}
                   disabled={busy}
                   className={cn(
-                    "w-full rounded-md border border-input bg-background px-3 py-1.5",
-                    "text-sm text-foreground placeholder:text-muted-foreground",
-                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5",
+                    "stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+                    "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
                   )}
                 />
-                <span className="mt-1 block text-xs text-muted-foreground">
+                <span className="stg:mt-1 stg:block stg:text-xs stg:text-muted-foreground">
                   Names the connection in Stigmer — pick something that
                   identifies the workspace if you connect more than one.
                 </span>
@@ -351,9 +351,9 @@ function ConnectSlackDialogBody({
                 }}
                 appHint="Your app — your bot name and icon"
                 emptyBody={
-                  <p className="text-xs text-muted-foreground">
+                  <p className="stg:text-xs stg:text-muted-foreground">
                     The platform{" "}
-                    <span className="font-medium text-foreground">Stigmer</span>{" "}
+                    <span className="stg:font-medium stg:text-foreground">Stigmer</span>{" "}
                     app — no setup needed. Want the bot to carry your own name
                     and icon, or several agents in one workspace?{" "}
                     <RegisterChannelAppAffordance channelAppsHref={channelAppsHref}>
@@ -379,21 +379,21 @@ function ConnectSlackDialogBody({
               />
             )}
 
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               When you continue, Slack asks which workspace to add the bot
               to — pick the one where your team should chat with this agent.
             </p>
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               Members reach the agent by opening a direct message with{" "}
-              <span className="font-medium text-foreground">{botName}</span>,
+              <span className="stg:font-medium stg:text-foreground">{botName}</span>,
               or typing @ in a channel and picking{" "}
-              <span className="font-medium text-foreground">{botName}</span>{" "}
+              <span className="stg:font-medium stg:text-foreground">{botName}</span>{" "}
               from the list — it answers as{" "}
-              <span className="font-medium text-foreground">{agentName}</span>.
+              <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
             </p>
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               Conversations from Slack are billed to{" "}
-              <span className="font-medium">{org}</span>. A workspace can
+              <span className="stg:font-medium">{org}</span>. A workspace can
               host one agent per Slack app.
             </p>
 
@@ -405,7 +405,7 @@ function ConnectSlackDialogBody({
       </div>
 
       {/* Footer */}
-      <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">
         {installed || deploymentMode === "local" ? (
           <Button variant="outline" size="sm" onClick={onClose}>
             {installed ? "Done" : "Close"}
@@ -420,7 +420,7 @@ function ConnectSlackDialogBody({
               size="sm"
               onClick={() => void handleConnect()}
               disabled={busy}
-              icon={<SlackMarkIcon className="size-3.5" />}
+              icon={<SlackMarkIcon className="stg:size-3.5" />}
               data-cursor-target="dialog-connect-slack"
             >
               {error ? "Try again" : channel ? "Reconnect to Slack" : "Connect to Slack"}
@@ -467,7 +467,7 @@ function InstallRefusal({
   return (
     <RefusalBox>
       <p>
-        <span className="font-medium">{team}</span> already hosts an agent
+        <span className="stg:font-medium">{team}</span> already hosts an agent
         through this app — a workspace hosts one agent per Slack app.
       </p>
       <p>
@@ -497,7 +497,7 @@ function AlreadyServedNote({
   readonly channels: readonly AgentChannel[];
 }) {
   return (
-    <div role="status" className="space-y-0.5 text-xs text-warning">
+    <div role="status" className="stg:space-y-0.5 stg:text-xs stg:text-warning">
       {channels.map((c) => {
         const slack =
           c.status?.providerStatus?.case === "slack"
@@ -507,8 +507,8 @@ function AlreadyServedNote({
         const agent = c.spec?.agentRef?.slug || "another agent";
         return (
           <p key={c.metadata?.id ?? team}>
-            <span className="font-medium">{botName}</span> already serves{" "}
-            <span className="font-medium">{team}</span> via {agent} — a
+            <span className="stg:font-medium">{botName}</span> already serves{" "}
+            <span className="stg:font-medium">{team}</span> via {agent} — a
             workspace hosts one agent per app, so connect through a
             different channel app to reach it.
           </p>
@@ -538,8 +538,8 @@ function FlowProgress({
   const activeIndex = FLOW_STEPS.findIndex((s) => s.phase === phase);
 
   return (
-    <div className="space-y-3" aria-live="polite">
-      <ul className="space-y-2">
+    <div className="stg:space-y-3" aria-live="polite">
+      <ul className="stg:space-y-2">
         {FLOW_STEPS.map((step, i) => {
           const isActive = i === activeIndex;
           const isDone = activeIndex > i;
@@ -547,20 +547,20 @@ function FlowProgress({
             <li
               key={step.phase}
               className={cn(
-                "flex items-center gap-2 text-sm",
+                "stg:flex stg:items-center stg:gap-2 stg:text-sm",
                 isActive
-                  ? "text-foreground"
+                  ? "stg:text-foreground"
                   : isDone
-                    ? "text-muted-foreground"
-                    : "text-muted-foreground-subtle",
+                    ? "stg:text-muted-foreground"
+                    : "stg:text-muted-foreground-subtle",
               )}
             >
               {isDone ? (
-                <CheckIcon className="size-3.5 shrink-0 text-success" />
+                <CheckIcon className="stg:size-3.5 stg:shrink-0 stg:text-success" />
               ) : isActive ? (
-                <Spinner className="size-3.5 shrink-0" />
+                <Spinner className="stg:size-3.5 stg:shrink-0" />
               ) : (
-                <span className="size-3.5 shrink-0 rounded-full border border-border" aria-hidden="true" />
+                <span className="stg:size-3.5 stg:shrink-0 stg:rounded-full stg:border stg:border-border" aria-hidden="true" />
               )}
               {step.label}
             </li>
@@ -592,18 +592,18 @@ function InstalledSummary({
     : null;
 
   return (
-    <div className="space-y-2" role="status">
-      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-        <CheckIcon className="size-4 text-success" />
+    <div className="stg:space-y-2" role="status">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:text-sm stg:font-medium stg:text-foreground">
+        <CheckIcon className="stg:size-4 stg:text-success" />
         Connected{slack?.teamName ? ` to ${slack.teamName}` : ""}
       </div>
-      <p className="text-sm text-muted-foreground">
+      <p className="stg:text-sm stg:text-muted-foreground">
         In Slack, open a direct message with{" "}
-        <span className="font-medium text-foreground">{botName}</span> — or
+        <span className="stg:font-medium stg:text-foreground">{botName}</span> — or
         type @ in any channel and pick{" "}
-        <span className="font-medium text-foreground">{botName}</span> from
+        <span className="stg:font-medium stg:text-foreground">{botName}</span> from
         the list — then ask your question. Answers come from{" "}
-        <span className="font-medium text-foreground">{agentName}</span>.
+        <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
       </p>
     </div>
   );

package/src/channel/ConnectWhatsAppDialog.tsx

@@ -130,8 +130,8 @@ export function ConnectWhatsAppDialog({
       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="connect-whatsapp-title"
     >
@@ -309,12 +309,12 @@ function ConnectWhatsAppDialogBody({
   const canConnect = trimmedNumber !== "" && effectiveAppRef !== null && !busy;
 
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       {/* Header */}
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="flex items-center gap-2.5">
-          <WhatsAppMarkIcon className="size-5 text-foreground" />
-          <h2 id="connect-whatsapp-title" className="text-sm font-semibold text-foreground">
+      <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:flex stg:items-center stg:gap-2.5">
+          <WhatsAppMarkIcon className="stg:size-5 stg:text-foreground" />
+          <h2 id="connect-whatsapp-title" className="stg:text-sm stg:font-semibold stg:text-foreground">
             {channel ? "Reconnect to WhatsApp" : "Connect to WhatsApp"}
           </h2>
         </div>
@@ -323,16 +323,16 @@ function ConnectWhatsAppDialogBody({
           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="space-y-4 px-5 py-4">
+      <div className="stg:space-y-4 stg:px-5 stg:py-4">
         {deploymentMode === "local" ? (
           // Preempt the doomed flow: the OSS backend answers every
           // install with FAILED_PRECONDITION.
@@ -349,8 +349,8 @@ function ConnectWhatsAppDialogBody({
         ) : (
           <>
             {!channel && (
-              <label className="block">
-                <span className="mb-1.5 block text-xs font-medium text-foreground">
+              <label className="stg:block">
+                <span className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
                   Channel name
                 </span>
                 <input
@@ -359,20 +359,20 @@ function ConnectWhatsAppDialogBody({
                   onChange={(e) => setName(e.target.value)}
                   disabled={busy}
                   className={cn(
-                    "w-full rounded-md border border-input bg-background px-3 py-1.5",
-                    "text-sm text-foreground placeholder:text-muted-foreground",
-                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5",
+                    "stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+                    "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
                   )}
                 />
-                <span className="mt-1 block text-xs text-muted-foreground">
+                <span className="stg:mt-1 stg:block stg:text-xs stg:text-muted-foreground">
                   Names the connection in Stigmer — pick something that
                   identifies the number if you connect more than one.
                 </span>
               </label>
             )}
 
-            <label className="block">
-              <span className="mb-1.5 block text-xs font-medium text-foreground">
+            <label className="stg:block">
+              <span className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
                 Phone number ID
               </span>
               <input
@@ -384,12 +384,12 @@ function ConnectWhatsAppDialogBody({
                 placeholder="106540352242922"
                 data-cursor-target="dialog-whatsapp-number"
                 className={cn(
-                  "w-full rounded-md border border-input bg-background px-3 py-1.5",
-                  "font-mono text-sm text-foreground placeholder:text-muted-foreground",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
+                  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5",
+                  "stg:font-mono stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+                  "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
                 )}
               />
-              <span className="mt-1 block text-xs text-muted-foreground">
+              <span className="stg:mt-1 stg:block stg:text-xs stg:text-muted-foreground">
                 From Meta&apos;s WhatsApp Manager (API Setup) — the numeric
                 ID of the number this agent should answer, not the phone
                 number itself.
@@ -406,7 +406,7 @@ function ConnectWhatsAppDialogBody({
               idPrefix="stgm-whatsapp-app"
               appHint="Your Meta app — its credentials verify and serve the number"
               emptyBody={
-                <p className="text-xs text-muted-foreground">
+                <p className="stg:text-xs stg:text-muted-foreground">
                   WhatsApp channels connect through your own Meta app — there
                   is no shared platform app.{" "}
                   <RegisterChannelAppAffordance channelAppsHref={channelAppsHref}>
@@ -432,19 +432,19 @@ function ConnectWhatsAppDialogBody({
               />
             )}
 
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               When you continue, Stigmer verifies the number with WhatsApp
               through the selected app&apos;s credentials — the connection
               completes right here, with no browser hand-off.
             </p>
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               People reach the agent by sending a WhatsApp message to the
               connected number — it answers as{" "}
-              <span className="font-medium text-foreground">{agentName}</span>.
+              <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
             </p>
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               Conversations from WhatsApp are billed to{" "}
-              <span className="font-medium">{org}</span>. Each number serves
+              <span className="stg:font-medium">{org}</span>. Each number serves
               one agent per channel app.
             </p>
 
@@ -456,7 +456,7 @@ function ConnectWhatsAppDialogBody({
       </div>
 
       {/* Footer */}
-      <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">
         {installed || deploymentMode === "local" ? (
           <Button variant="outline" size="sm" onClick={onClose}>
             {installed ? "Done" : "Close"}
@@ -471,7 +471,7 @@ function ConnectWhatsAppDialogBody({
               size="sm"
               onClick={() => void handleConnect()}
               disabled={!canConnect}
-              icon={<WhatsAppMarkIcon className="size-3.5" />}
+              icon={<WhatsAppMarkIcon className="stg:size-3.5" />}
               data-cursor-target="dialog-connect-whatsapp"
             >
               {error ? "Try again" : channel ? "Reconnect to WhatsApp" : "Connect to WhatsApp"}
@@ -518,7 +518,7 @@ function InstallRefusal({
   return (
     <RefusalBox>
       <p>
-        <span className="font-medium">{number}</span> is already connected
+        <span className="stg:font-medium">{number}</span> is already connected
         to an agent through this channel app — each number serves one
         agent.
       </p>
@@ -547,7 +547,7 @@ function AlreadyServedNote({
   readonly channels: readonly AgentChannel[];
 }) {
   return (
-    <div role="status" className="space-y-0.5 text-xs text-warning">
+    <div role="status" className="stg:space-y-0.5 stg:text-xs stg:text-warning">
       {channels.map((c) => {
         const whatsapp =
           c.status?.providerStatus?.case === "whatsapp"
@@ -558,7 +558,7 @@ function AlreadyServedNote({
         const agent = c.spec?.agentRef?.slug || "another agent";
         return (
           <p key={c.metadata?.id ?? number}>
-            <span className="font-medium">{number}</span> is already served
+            <span className="stg:font-medium">{number}</span> is already served
             via {agent} — each number serves one agent per channel app, so
             disconnect that channel or pick a different number.
           </p>
@@ -580,8 +580,8 @@ function AlreadyServedNote({
  */
 function InstallingIndicator() {
   return (
-    <div className="flex items-center gap-2 text-sm text-foreground" aria-live="polite">
-      <Spinner className="size-3.5 shrink-0" />
+    <div className="stg:flex stg:items-center stg:gap-2 stg:text-sm stg:text-foreground" aria-live="polite">
+      <Spinner className="stg:size-3.5 stg:shrink-0" />
       Verifying the number with WhatsApp…
     </div>
   );
@@ -605,19 +605,19 @@ function InstalledSummary({
   const number = whatsapp?.displayPhoneNumber || whatsapp?.phoneNumberId || null;
 
   return (
-    <div className="space-y-2" role="status">
-      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-        <CheckIcon className="size-4 text-success" />
+    <div className="stg:space-y-2" role="status">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:text-sm stg:font-medium stg:text-foreground">
+        <CheckIcon className="stg:size-4 stg:text-success" />
         Connected{number ? ` to ${number}` : ""}
         {whatsapp?.verifiedName ? ` (${whatsapp.verifiedName})` : ""}
       </div>
-      <p className="text-sm text-muted-foreground">
+      <p className="stg:text-sm stg:text-muted-foreground">
         Send a WhatsApp message to{" "}
-        <span className="font-medium text-foreground">
+        <span className="stg:font-medium stg:text-foreground">
           {number ?? "the connected number"}
         </span>{" "}
         and ask your question — answers come from{" "}
-        <span className="font-medium text-foreground">{agentName}</span>.
+        <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
       </p>
     </div>
   );

package/src/channel/__tests__/AgentChannelsPanel.test.tsx

@@ -12,13 +12,6 @@ vi.mock("../../feedback/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn() },
 }));
 
-// The card actions live in a Base UI menu, whose content is portaled to the
-// SDK portal container. Without a StigmerProvider that container is null and
-// the menu renders nothing — pin it to document.body so the menu mounts.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 beforeAll(() => {
   // happy-dom does not implement the native dialog show/close methods.
   HTMLDialogElement.prototype.showModal = function showModal() {
@@ -424,7 +417,9 @@ describe("AgentChannelsPanel", () => {
     // bar as viewing its sessions, DD-012). Mutation items stay
     // permission-gated and absent.
     fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
-    expect(screen.getByRole("menuitem", { name: /sessions/i })).toBeTruthy();
+    // The awaited query anchors on the portaled menu's mount (#323) — only
+    // then are the absence assertions below meaningful rather than vacuous.
+    expect(await screen.findByRole("menuitem", { name: /sessions/i })).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: /tool credentials/i })).toBeNull();
     expect(screen.queryByRole("menuitem", { name: /disconnect/i })).toBeNull();
   });
@@ -447,7 +442,7 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
 
     fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
-    fireEvent.click(screen.getByRole("menuitem", { name: /manage access/i }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: /manage access/i }));
 
     // The one canonical dialog opens, and its subtitle names the channel
     // — the scope every grant covers (a participant grant is per

package/src/channel/connect/ServingAppSection.tsx

@@ -58,7 +58,7 @@ export function ServingAppSection({
   if (apps.length === 0) {
     return (
       <section aria-label="Connect as">
-        <h3 className="mb-1.5 text-xs font-medium text-foreground">
+        <h3 className="stg:mb-1.5 stg:text-xs stg:font-medium stg:text-foreground">
           Connect as
         </h3>
         {emptyBody}
@@ -68,10 +68,10 @@ export function ServingAppSection({
 
   return (
     <fieldset>
-      <legend className="mb-1.5 block text-xs font-medium text-foreground">
+      <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
         Connect as
       </legend>
-      <div role="radiogroup" className="space-y-1.5">
+      <div role="radiogroup" className="stg:space-y-1.5">
         {platformOption && (
           <ServingAppOption
             id={`${idPrefix}-platform`}
@@ -100,7 +100,7 @@ export function ServingAppSection({
           );
         })}
       </div>
-      <p className="mt-1.5 text-xs text-muted-foreground">
+      <p className="stg:mt-1.5 stg:text-xs stg:text-muted-foreground">
         <RegisterChannelAppAffordance channelAppsHref={channelAppsHref}>
           Register a channel app
         </RegisterChannelAppAffordance>
@@ -131,9 +131,9 @@ export function RegisterChannelAppAffordance({
     <a
       href={channelAppsHref}
       className={cn(
-        "font-medium underline underline-offset-2",
-        "hover:no-underline",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+        "stg:font-medium stg:underline stg:underline-offset-2",
+        "stg:hover:no-underline",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
       )}
     >
       {children}
@@ -162,9 +162,9 @@ function ServingAppOption({
     <label
       htmlFor={id}
       className={cn(
-        "flex cursor-pointer items-start gap-2 rounded-md border px-2.5 py-1.5",
-        checked ? "border-ring bg-accent" : "border-border hover:bg-accent-hover",
-        disabled && "pointer-events-none opacity-50",
+        "stg:flex stg:cursor-pointer stg:items-start stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5",
+        checked ? "stg:border-ring stg:bg-accent" : "stg:border-border stg:hover:bg-accent-hover",
+        disabled && "stg:pointer-events-none stg:opacity-50",
       )}
     >
       <input
@@ -174,11 +174,11 @@ function ServingAppOption({
         checked={checked}
         onChange={onSelect}
         disabled={disabled}
-        className="mt-0.5 accent-current"
+        className="stg:mt-0.5 stg:accent-current"
       />
-      <span className="min-w-0">
-        <span className="block text-xs font-medium text-foreground">{label}</span>
-        <span className="block text-[0.65rem] text-muted-foreground">{hint}</span>
+      <span className="stg:min-w-0">
+        <span className="stg:block stg:text-xs stg:font-medium stg:text-foreground">{label}</span>
+        <span className="stg:block stg:text-[0.65rem] stg:text-muted-foreground">{hint}</span>
       </span>
     </label>
   );

package/src/channel/connect/ToolCredentialsSection.tsx

@@ -40,19 +40,19 @@ export function ToolCredentialsSection({
         onClick={() => setExpanded((v) => !v)}
         aria-expanded={expanded}
         className={cn(
-          "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground",
-          "hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground",
+          "stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
         )}
       >
         <ChevronIcon
-          className={cn("size-3 transition-transform", expanded && "rotate-90")}
+          className={cn("stg:size-3 stg:transition-transform", expanded && "stg:rotate-90")}
         />
         Tool credentials
       </button>
 
       {expanded && (
-        <div className="mt-2">
+        <div className="stg:mt-2">
           <ChannelToolCredentials
             agent={agent}
             org={org}

package/src/channel/connect/VerbatimRefusal.tsx

@@ -19,7 +19,7 @@ export function RefusalBox({ children }: { readonly children: ReactNode }) {
   return (
     <div
       role="alert"
-      className="space-y-1 rounded-md border border-destructive/30 bg-destructive-subtle px-3 py-2 text-xs text-destructive"
+      className="stg:space-y-1 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"
     >
       {children}
     </div>

package/src/channel/connect/icons.tsx

@@ -34,7 +34,7 @@ export function ChevronIcon({ className }: { readonly className?: string }) {
 
 export function Spinner({ className }: { readonly className?: string }) {
   return (
-    <svg className={cn("animate-spin", className)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <svg className={cn("stg:animate-spin", className)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
       <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
       <path d="M14.5 8A6.5 6.5 0 0 0 8 1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
     </svg>