@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

@@ -5,6 +5,7 @@ import type { AgentChannelInput } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
 import { FetchCacheContext } from "../../internal/FetchCacheProvider";
 import { DeploymentModeContext } from "../../deployment-mode";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentChannelsPanel } from "../AgentChannelsPanel";
 
 // Toasts are visual feedback owned by the feedback module; keep them inert.
@@ -12,13 +13,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() {
@@ -279,7 +273,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Disconnect" }));
 
     // The confirmation explains teardown vs pause before anything happens.
@@ -416,15 +410,21 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
     await waitFor(() => expect(checkMyPermission).toHaveBeenCalled());
 
-    expect(screen.queryByRole("switch")).toBeNull();
+    // The panel renders mutation affordances optimistic-visible and hides
+    // them when the denial lands. "Mock was called" precedes "denial
+    // rendered", so wait for the state this test is actually about instead
+    // of racing the re-render (flaked under CPU contention, ~1/20).
+    await waitFor(() => expect(screen.queryByRole("switch")).toBeNull());
     expect(screen.queryByRole("button", { name: /connect to slack/i })).toBeNull();
 
     // The card menu still renders: Sessions is a viewer-level action
     // (everyone who sees the card holds can_view on the channel — the same
     // 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();
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
+    // 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();
   });
@@ -446,8 +446,8 @@ 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 }));
+    await openMenu(screen.getByRole("button", { name: /actions for/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
@@ -506,7 +506,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(
       await screen.findByRole("menuitem", { name: "Tool credentials" }),
     );
@@ -634,7 +634,7 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() =>
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Disconnect" }));
 
     // WhatsApp credentials live on the shared ChannelApp and survive the
@@ -657,7 +657,7 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() =>
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Templates" }));
 
     expect(
@@ -681,7 +681,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
 
     // Slack has no template concept: hidden, not disabled — a disabled
     // item would imply the capability might one day exist there.
@@ -709,7 +709,7 @@ describe("AgentChannelsPanel", () => {
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
     await waitFor(() => expect(checkMyPermission).toHaveBeenCalled());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
 
     expect(
       await screen.findByRole("menuitem", { name: /sessions/i }),

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>

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -94,17 +94,17 @@ export function ChannelAppDetailPanel({
   }, [deleteApp, appId, onDeleted]);
 
   return (
-    <div className={cn("space-y-5", className)}>
-      <div className="flex items-center justify-between">
-        <div className="min-w-0">
-          <h3 className="truncate text-sm font-semibold text-foreground">{name}</h3>
-          <p className="font-mono text-[0.65rem] text-muted-foreground">{appId}</p>
+    <div className={cn("stg:space-y-5", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <div className="stg:min-w-0">
+          <h3 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">{name}</h3>
+          <p className="stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">{appId}</p>
         </div>
         {onBack && (
           <button
             type="button"
             onClick={onBack}
-            className="text-muted-foreground hover:text-foreground shrink-0 text-xs transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:shrink-0 stg:text-xs stg:transition-colors"
           >
             ← Back
           </button>
@@ -126,15 +126,15 @@ export function ChannelAppDetailPanel({
       ) : null}
 
       {/* Deletion */}
-      <section className="border-t border-border pt-3" aria-label="Danger zone">
+      <section className="stg:border-t stg:border-border stg:pt-3" aria-label="Danger zone">
         {deleteError && (
-          <p className="text-destructive mb-2 text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:mb-2 stg:text-[0.65rem]" role="alert">
             {getUserMessage(deleteError)}
           </p>
         )}
         {confirmingDelete ? (
-          <div className="flex items-center gap-2">
-            <p className="text-xs text-foreground">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <p className="stg:text-xs stg:text-foreground">
               Delete this channel app? Channels installing through it must be
               disconnected first.
             </p>
@@ -143,9 +143,9 @@ export function ChannelAppDetailPanel({
               onClick={handleDelete}
               disabled={isDeleting}
               className={cn(
-                "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-destructive text-destructive-foreground hover:opacity-90",
-                "disabled:pointer-events-none disabled:opacity-40",
+                "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                "stg:bg-destructive stg:text-destructive-foreground stg:hover:opacity-90",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
               {isDeleting && <SpinnerIcon />}
@@ -155,7 +155,7 @@ export function ChannelAppDetailPanel({
               type="button"
               onClick={() => setConfirmingDelete(false)}
               disabled={isDeleting}
-              className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+              className="stg:text-muted-foreground stg:hover:text-foreground stg:text-xs stg:transition-colors"
             >
               Keep
             </button>
@@ -164,7 +164,7 @@ export function ChannelAppDetailPanel({
           <button
             type="button"
             onClick={() => setConfirmingDelete(true)}
-            className="text-destructive text-xs font-medium hover:opacity-80"
+            className="stg:text-destructive stg:text-xs stg:font-medium stg:hover:opacity-80"
           >
             Delete channel app
           </button>
@@ -250,10 +250,10 @@ function SlackAppDetail({
   return (
     <>
       {/* Finish setup: the per-app webhook URL only exists after creation */}
-      <section className="space-y-2" aria-label="Finish setup in Slack">
-        <p className="text-xs font-medium text-foreground">Finish setup in Slack</p>
-        <p className="text-[0.65rem] text-muted-foreground">
-          On the app&apos;s <span className="font-medium">Event
+      <section className="stg:space-y-2" aria-label="Finish setup in Slack">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Finish setup in Slack</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+          On the app&apos;s <span className="stg:font-medium">Event
           Subscriptions</span> page, enable events and set the request URL
           below (Slack verifies it immediately). The completed manifest is
           also available for review or re-paste.
@@ -268,10 +268,10 @@ function SlackAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="space-y-3" aria-label="Credentials">
-        <p className="text-xs font-medium text-foreground">Credentials</p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          Secrets show as <code className="font-mono">***REDACTED***</code>;
+      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
           leave a field untouched to keep its stored value, or paste a new
           one to rotate it.
         </p>
@@ -307,7 +307,7 @@ function SlackAppDetail({
         />
 
         {updateError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(updateError)}
           </p>
         )}
@@ -316,9 +316,9 @@ function SlackAppDetail({
           type="submit"
           disabled={!canSave}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isUpdating && <SpinnerIcon />}
@@ -401,14 +401,14 @@ function WhatsAppAppDetail({
     <>
       {/* Finish setup: the per-app webhook URL only exists after creation,
           and the verify token is only visible in the create handoff. */}
-      <section className="space-y-2" aria-label="Finish setup in Meta">
-        <p className="text-xs font-medium text-foreground">Finish setup in Meta</p>
-        <p className="text-[0.65rem] text-muted-foreground">
-          On the app&apos;s <span className="font-medium">WhatsApp →
+      <section className="stg:space-y-2" aria-label="Finish setup in Meta">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Finish setup in Meta</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+          On the app&apos;s <span className="stg:font-medium">WhatsApp →
           Configuration</span> page, set the callback URL and verify token
-          below, click <span className="font-medium">Verify and save</span>{" "}
+          below, click <span className="stg:font-medium">Verify and save</span>{" "}
           (Meta verifies immediately), then subscribe to the{" "}
-          <span className="font-medium">
+          <span className="stg:font-medium">
             {WHATSAPP_CHANNEL_APP_WEBHOOK_FIELDS.join(", ")}
           </span>{" "}
           webhook field.
@@ -425,9 +425,9 @@ function WhatsAppAppDetail({
             copyTargetId="stgm-chapp-verify-token-copy"
           />
         ) : (
-          <div className="space-y-1">
-            <p className="text-xs font-medium text-foreground">Verify token</p>
-            <p className="text-[0.65rem] text-muted-foreground">
+          <div className="stg:space-y-1">
+            <p className="stg:text-xs stg:font-medium stg:text-foreground">Verify token</p>
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Shown once at registration. If you no longer have it, paste a
               new one below and update Meta&apos;s webhook configuration to
               match.
@@ -437,10 +437,10 @@ function WhatsAppAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="space-y-3" aria-label="Credentials">
-        <p className="text-xs font-medium text-foreground">Credentials</p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          Secrets show as <code className="font-mono">***REDACTED***</code>;
+      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
           leave a field untouched to keep its stored value, or paste a new
           one to rotate it.
         </p>
@@ -487,7 +487,7 @@ function WhatsAppAppDetail({
         />
 
         {updateError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(updateError)}
           </p>
         )}
@@ -496,9 +496,9 @@ function WhatsAppAppDetail({
           type="submit"
           disabled={!canSave}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isUpdating && <SpinnerIcon />}