@stigmer/react 3.9.0 → 3.11.0

package/src/composer/ConfigureMenu.tsx

@@ -75,22 +75,22 @@ export function ConfigureMenu({
         disabled={disabled}
         title="Configure"
         className={cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+          "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
         aria-label="Configure agent, tools, and skills"
       >
-        <span className="relative">
+        <span className="stg:relative">
           <ConfigureIcon />
           {totalCount > 0 && (
-            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+            <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
               {totalCount}
             </span>
           )}
           {hasWarning && totalCount === 0 && (
             <span
-              className="absolute -right-0.5 -top-0.5 inline-block h-2 w-2 rounded-full bg-warning"
+              className="stg:absolute stg:-right-0.5 stg:-top-0.5 stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:bg-warning"
               aria-label="Configuration needed"
             />
           )}
@@ -100,9 +100,9 @@ export function ConfigureMenu({
         <Popover.Positioner sideOffset={8} align="start">
           <Popover.Popup
             className={cn(
-              "z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border",
-              "bg-popover shadow-md text-popover-foreground",
-              "max-h-[80vh]",
+              "stg:z-popover stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:border stg:border-border",
+              "stg:bg-popover stg:shadow-md stg:text-popover-foreground",
+              "stg:max-h-[80vh]",
             )}
           >
             {activePanelItem ? (
@@ -134,7 +134,7 @@ function MenuList({
   onSelect: (id: string) => void;
 }) {
   return (
-    <div className="py-1" role="menu">
+    <div className="stg:py-1" role="menu">
       {items.map((item) => (
         <button
           key={item.id}
@@ -142,20 +142,20 @@ function MenuList({
           role="menuitem"
           onClick={() => onSelect(item.id)}
           className={cn(
-            "flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors",
-            "text-foreground hover:bg-accent-hover",
+            "stg:flex stg:w-full stg:items-center stg:gap-2.5 stg:px-3 stg:py-2 stg:text-sm stg:transition-colors",
+            "stg:text-foreground stg:hover:bg-accent-hover",
           )}
         >
-          <span className="shrink-0 text-muted-foreground">{item.icon}</span>
-          <span className="flex-1 text-left">{item.label}</span>
+          <span className="stg:shrink-0 stg:text-muted-foreground">{item.icon}</span>
+          <span className="stg:flex-1 stg:text-left">{item.label}</span>
           {item.hasWarning && (
             <span
-              className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
+              className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-warning"
               aria-label="Needs configuration"
             />
           )}
           {item.count > 0 && (
-            <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
+            <span className="stg:rounded-full stg:bg-primary-subtle stg:px-1.5 stg:text-[0.6rem] stg:font-medium stg:text-primary">
               {item.count}
             </span>
           )}
@@ -181,21 +181,21 @@ function PanelView({
 }) {
   return (
     <div>
-      <div className="flex items-center gap-2 border-b border-border-muted px-3 py-2">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border-muted stg:px-3 stg:py-2">
         <button
           type="button"
           onClick={onBack}
-          className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-accent-hover hover:text-foreground"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground"
           aria-label="Back to configuration menu"
         >
           <ChevronLeftIcon />
         </button>
-        <span className="shrink-0 text-muted-foreground">{item.icon}</span>
-        <span className="text-sm font-medium text-foreground">
+        <span className="stg:shrink-0 stg:text-muted-foreground">{item.icon}</span>
+        <span className="stg:text-sm stg:font-medium stg:text-foreground">
           {item.label}
         </span>
       </div>
-      <div className="p-3">{children}</div>
+      <div className="stg:p-3">{children}</div>
     </div>
   );
 }
@@ -215,7 +215,7 @@ function ChevronRightIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M6 4l4 4-4 4" />

package/src/composer/ContextChip.tsx

@@ -53,18 +53,18 @@ export function ContextChip({
       {isTransient && <ChipSpinner />}
       {isWarning && (
         <span
-          className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
+          className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-warning"
           aria-hidden="true"
         />
       )}
-      <span className="text-[0.55rem] font-medium uppercase tracking-wider text-muted-foreground">
+      <span className="stg:text-[0.55rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
         {CHIP_TYPE_LABELS[type]}
       </span>
-      <span className="max-w-[120px] truncate" title={label}>
+      <span className="stg:max-w-[120px] stg:truncate" title={label}>
         {label}
       </span>
       {detail != null && (
-        <span className="shrink-0 text-[0.6rem] font-medium text-muted-foreground">
+        <span className="stg:shrink-0 stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground">
           {detail}
         </span>
       )}
@@ -74,12 +74,12 @@ export function ContextChip({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground",
         isWarning
-          ? "border border-warning/30 bg-warning/10"
-          : "bg-muted-subtle",
-        isTransient && "opacity-70",
-        isReadonly && "opacity-80",
+          ? "stg:border stg:border-warning/30 stg:bg-warning/10"
+          : "stg:bg-muted-subtle",
+        isTransient && "stg:opacity-70",
+        isReadonly && "stg:opacity-80",
       )}
     >
       {onClick ? (
@@ -87,13 +87,13 @@ export function ContextChip({
           type="button"
           onClick={onClick}
           disabled={disabled}
-          className="inline-flex items-center gap-1 hover:opacity-80 disabled:pointer-events-none"
+          className="stg:inline-flex stg:items-center stg:gap-1 stg:hover:opacity-80 stg:disabled:pointer-events-none"
           aria-label={`Configure ${label}`}
         >
           {labelContent}
         </button>
       ) : (
-        <span className="inline-flex items-center gap-1">
+        <span className="stg:inline-flex stg:items-center stg:gap-1">
           {labelContent}
         </span>
       )}
@@ -102,7 +102,7 @@ export function ContextChip({
           type="button"
           onClick={onRemove}
           disabled={disabled}
-          className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+          className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
           aria-label={`Remove ${label}`}
         >
           <XIcon />

package/src/composer/ContextPopover.tsx

@@ -28,15 +28,15 @@ export function ContextPopover({
         title={label}
         aria-label={label}
         className={cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+          "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       >
-        <span className="relative">
+        <span className="stg:relative">
           {icon}
           {count > 0 && (
-            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+            <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
               {count}
             </span>
           )}
@@ -46,9 +46,9 @@ export function ContextPopover({
         <Popover.Positioner sideOffset={8} align="start">
           <Popover.Popup
             className={[
-              "z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border",
-              "bg-popover p-3 shadow-md text-popover-foreground",
-              "max-h-[80vh]",
+              "stg:z-popover stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:border stg:border-border",
+              "stg:bg-popover stg:p-3 stg:shadow-md stg:text-popover-foreground",
+              "stg:max-h-[80vh]",
             ].join(" ")}
           >
             {children}

package/src/composer/InteractionModePicker.tsx

@@ -110,14 +110,14 @@ export function InteractionModePicker({
       <Popover.Trigger
         disabled={disabled}
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors",
+          "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           className,
         )}
       >
-        <span className="font-medium text-foreground">
+        <span className="stg:font-medium stg:text-foreground">
           {MODE_META[value].label}
         </span>
         <ChevronIcon />
@@ -130,8 +130,8 @@ export function InteractionModePicker({
             aria-label="Interaction mode"
             onKeyDown={handleKeyDown}
             className={cn(
-              "z-50 w-56 rounded-lg border border-border bg-popover p-1 shadow-md",
-              "animate-in fade-in-0 zoom-in-95",
+              "stg:z-50 stg:w-56 stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-1 stg:shadow-md",
+              "stg:animate-in stg:fade-in-0 stg:zoom-in-95",
             )}
           >
             {OPTIONS.map((option) => {
@@ -146,15 +146,15 @@ export function InteractionModePicker({
                   aria-selected={isActive}
                   onClick={() => select(option)}
                   className={cn(
-                    "flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "stg:flex stg:w-full stg:flex-col stg:gap-0.5 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left stg:transition-colors",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                     isActive
-                      ? "bg-accent text-foreground"
-                      : "text-foreground hover:bg-accent-hover",
+                      ? "stg:bg-accent stg:text-foreground"
+                      : "stg:text-foreground stg:hover:bg-accent-hover",
                   )}
                 >
-                  <span className="text-xs font-medium">{meta.label}</span>
-                  <span className="text-[0.65rem] leading-snug text-muted-foreground">
+                  <span className="stg:text-xs stg:font-medium">{meta.label}</span>
+                  <span className="stg:text-[0.65rem] stg:leading-snug stg:text-muted-foreground">
                     {meta.description}
                   </span>
                 </button>
@@ -174,7 +174,7 @@ function ChevronIcon() {
       height="12"
       viewBox="0 0 12 12"
       fill="none"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path

package/src/composer/SessionComposer.tsx

@@ -1402,7 +1402,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
               )}
             </div>
           ) : (
-            <div className="relative">
+            <div className="stg:relative">
               <AgentPicker
                 org={org!}
                 value={agentRef ?? null}
@@ -1411,7 +1411,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 disabled={isDisabled || isAgentBusy}
               />
               {isAgentBusy && (
-                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-popover/80">
+                <div className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center stg:rounded-lg stg:bg-popover/80">
                   <ResolveSpinner />
                 </div>
               )}
@@ -1494,17 +1494,17 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     <div
       role="form"
       aria-label={ariaLabel}
-      className={cn("shrink-0", className)}
+      className={cn("stg:shrink-0", className)}
     >
       <div
         className={cn(
-          "rounded-xl border border-border bg-card shadow-sm",
-          "focus-within:ring-2 focus-within:ring-ring",
+          "stg:rounded-xl stg:border stg:border-border stg:bg-card stg:shadow-sm",
+          "stg:focus-within:ring-2 stg:focus-within:ring-ring",
           // Plan mode tints the frame so the active mode is visible at a
           // glance, without opening the picker. Themeable via --stgm-primary-muted.
-          interactionMode === "plan" && "border-primary-muted",
-          isDisabled && !stopMode && "opacity-50",
-          isDragOver && "ring-2 ring-primary/50",
+          interactionMode === "plan" && "stg:border-primary-muted",
+          isDisabled && !stopMode && "stg:opacity-50",
+          isDragOver && "stg:ring-2 stg:ring-primary/50",
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -1516,9 +1516,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {isEditing && (
           <div
             role="status"
-            className="flex items-center justify-between gap-2 rounded-t-xl border-b border-border bg-muted px-3 py-1.5"
+            className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:rounded-t-xl stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-1.5"
           >
-            <span className="text-xs font-medium text-muted-foreground">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Editing message
             </span>
             {onCancelEdit && (
@@ -1527,7 +1527,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 onClick={onCancelEdit}
                 aria-label="Cancel editing"
                 title="Cancel editing (Esc)"
-                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                className="stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
               >
                 <XIcon />
               </button>
@@ -1536,7 +1536,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         )}
 
         {/* Zone 1: Textarea */}
-        <div className="relative">
+        <div className="stg:relative">
           <textarea
             {...composer.textareaProps}
             onKeyDown={handleTextareaKeyDown}
@@ -1544,11 +1544,11 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             placeholder={placeholder}
             rows={initialRows}
             autoFocus={autoFocus}
-            className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+            className="stg:block stg:w-full stg:resize-none stg:bg-transparent stg:px-4 stg:pt-3 stg:pb-2 stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:disabled:cursor-not-allowed"
           />
           {isDragOver && (
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-t-xl bg-primary-subtle">
-              <span className="text-xs font-medium text-primary">
+            <div className="stg:pointer-events-none stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center stg:rounded-t-xl stg:bg-primary-subtle">
+              <span className="stg:text-xs stg:font-medium stg:text-primary">
                 {isDragOverFileRef ? "Reference workspace file" : "Drop files to attach"}
               </span>
             </div>
@@ -1562,7 +1562,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             type="file"
             multiple
             onChange={handleFileInputChange}
-            className="hidden"
+            className="stg:hidden"
             aria-hidden="true"
             tabIndex={-1}
           />
@@ -1570,7 +1570,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
 
         {/* Zone 2.5: Attachment and file-reference chips */}
         {(showAttach && attachments.hasEntries) || (enableFileReferences && fileRefs.hasRefs) ? (
-          <div className="space-y-1.5 px-3 pb-2">
+          <div className="stg:space-y-1.5 stg:px-3 stg:pb-2">
             {showAttach && attachments.hasEntries && (
               <AttachmentChipList
                 entries={attachments.entries}
@@ -1597,7 +1597,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {showUploadWaitNotice && (
           <div
             role="status"
-            className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-muted px-2.5 py-1.5 text-xs text-muted-foreground"
+            className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
           >
             <ChipSpinner />
             <span>Waiting for attachments to finish uploading…</span>
@@ -1610,7 +1610,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           !agentRef && (
             <div
               role="status"
-              className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-warning/10 px-2.5 py-1.5 text-xs text-warning"
+              className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-warning/10 stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-warning"
             >
               <AlertTriangleIcon />
               <span>Agent needs configuration before use</span>
@@ -1621,7 +1621,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                   setConfigActivePanel("agent");
                 }}
                 disabled={isDisabled}
-                className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium hover:bg-warning/20 disabled:pointer-events-none disabled:opacity-50"
+                className="stg:ml-auto stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:hover:bg-warning/20 stg:disabled:pointer-events-none stg:disabled:opacity-50"
               >
                 Configure
               </button>
@@ -1632,7 +1632,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {showMcp && mcpSetup.needsSetupCount > 0 && (
           <div
             role="status"
-            className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-warning/10 px-2.5 py-1.5 text-xs text-warning"
+            className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-warning/10 stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-warning"
           >
             <AlertTriangleIcon />
             <span>
@@ -1655,7 +1655,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 setConfigActivePanel("mcp");
               }}
               disabled={isDisabled}
-              className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium hover:bg-warning/20 disabled:pointer-events-none disabled:opacity-50"
+              className="stg:ml-auto stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:hover:bg-warning/20 stg:disabled:pointer-events-none stg:disabled:opacity-50"
             >
               Configure
             </button>
@@ -1721,10 +1721,10 @@ export const SessionComposer = memo(SessionComposerInner);
 
 function AgentSetupError({ error }: { error: Error }) {
   if (isSecretFlowError(error)) {
-    return <SecretFlowErrorGuide error={error} className="mt-2" />;
+    return <SecretFlowErrorGuide error={error} className="stg:mt-2" />;
   }
   return (
-    <p className="mt-2 text-xs text-destructive">
+    <p className="stg:mt-2 stg:text-xs stg:text-destructive">
       {getUserMessage(error)}
     </p>
   );

package/src/composer/__tests__/SessionComposer-lockAgent.test.tsx

@@ -5,12 +5,6 @@ import type { Stigmer } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
 import { ModelRegistryContext } from "../../models/ModelRegistryContext";
 
-// Without a StigmerProvider the portal container is null, and Base UI's
-// Portal renders nothing — pin it to document.body so the popover mounts.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 // Controllable agent-setup state — lets these tests drive the lock × setup
 // matrix directly instead of exercising the full resolution state machine
 // (which is covered by useAgentSetup's own tests).
@@ -85,10 +79,17 @@ function renderComposer(
   );
 }
 
-function openConfigureMenu() {
+/**
+ * Opens the composer's Configure menu and resolves once the portaled menu
+ * content mounts. Menu items render asynchronously in a portal, so a
+ * synchronous item query straight after the click races the mount (the
+ * openRowMenu idiom; see stigmer/stigmer#323).
+ */
+async function openConfigureMenu() {
   fireEvent.click(
     screen.getByRole("button", { name: "Configure agent, tools, and skills" }),
   );
+  await screen.findByRole("menu");
 }
 
 beforeEach(() => {
@@ -98,25 +99,25 @@ beforeEach(() => {
 afterEach(cleanup);
 
 describe("SessionComposer — lockAgent", () => {
-  it("shows the Agent entry in the Configure menu by default", () => {
+  it("shows the Agent entry in the Configure menu by default", async () => {
     renderComposer();
-    openConfigureMenu();
+    await openConfigureMenu();
 
     expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
   });
 
-  it("hides the Agent entry when locked, leaving other entries intact", () => {
+  it("hides the Agent entry when locked, leaving other entries intact", async () => {
     renderComposer({
       lockAgent: true,
       agentRef: { org: "acme", slug: "support-bot" },
     });
-    openConfigureMenu();
+    await openConfigureMenu();
 
     expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
     expect(screen.getByRole("menuitem", { name: /Skills/ })).toBeTruthy();
   });
 
-  it("keeps the Agent entry reachable while a locked agent needs env vars", () => {
+  it("keeps the Agent entry reachable while a locked agent needs env vars", async () => {
     // A pinned agent that requires credentials: resolution is pending and
     // the env form lives in the Configure > Agent panel — lock ≠ unwire.
     mockAgentSetup.state = {
@@ -132,11 +133,11 @@ describe("SessionComposer — lockAgent", () => {
     expect(screen.getByText("Agent needs configuration before use")).toBeTruthy();
 
     // ...and as a (warning-marked) Configure menu entry, despite the lock.
-    openConfigureMenu();
+    await openConfigureMenu();
     expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
   });
 
-  it("removes the Agent entry once the locked agent has resolved", () => {
+  it("removes the Agent entry once the locked agent has resolved", async () => {
     mockAgentSetup.state = { status: "idle" };
     renderComposer({
       lockAgent: true,
@@ -144,7 +145,7 @@ describe("SessionComposer — lockAgent", () => {
     });
 
     expect(screen.queryByText("Agent needs configuration before use")).toBeNull();
-    openConfigureMenu();
+    await openConfigureMenu();
     expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
   });
 });

package/src/composer/__tests__/SessionComposer-serviceTier.test.tsx

@@ -7,13 +7,8 @@ import { ModelRegistryContext } from "../../models/ModelRegistryContext";
 import type { ModelInfo } from "../../models/registry";
 import { SessionComposer } from "../SessionComposer";
 
-// Portal into document.body so the popover mounts under happy-dom, and shim
-// ResizeObserver for Base UI's positioner (the scheduleCreation.test.tsx
-// pattern).
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
+// Shim ResizeObserver for Base UI's positioner (the
+// scheduleCreation.test.tsx pattern).
 beforeAll(() => {
   if (!("ResizeObserver" in globalThis)) {
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =

package/src/composer/icons.tsx

@@ -8,7 +8,7 @@ export function ChipSpinner() {
       stroke="currentColor"
       strokeWidth="2.5"
       strokeLinecap="round"
-      className="shrink-0 animate-spin text-muted-foreground"
+      className="stg:shrink-0 stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -64,7 +64,7 @@ export function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -251,7 +251,7 @@ export function ConfigureIcon() {
 
 export function ResolveSpinner() {
   return (
-    <div className="flex flex-col items-center gap-1.5">
+    <div className="stg:flex stg:flex-col stg:items-center stg:gap-1.5">
       <svg
         width="16"
         height="16"
@@ -260,12 +260,12 @@ export function ResolveSpinner() {
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
-        className="animate-spin text-muted-foreground"
+        className="stg:animate-spin stg:text-muted-foreground"
         aria-hidden="true"
       >
         <path d="M8 2a6 6 0 1 0 6 6" />
       </svg>
-      <span className="text-[0.6rem] text-muted-foreground">
+      <span className="stg:text-[0.6rem] stg:text-muted-foreground">
         Checking agent requirements...
       </span>
     </div>

package/src/conversation/ConversationAttentionBanner.tsx

@@ -39,15 +39,15 @@ export function ConversationAttentionBanner({
   return (
     <div
       className={cn(
-        "border-b border-border bg-destructive-subtle px-4 py-2",
+        "stg:border-b stg:border-border stg:bg-destructive-subtle stg:px-4 stg:py-2",
         className,
       )}
       role="status"
     >
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="flex min-w-0 items-start gap-1.5 text-sm text-destructive">
-          <TriangleAlert aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
-          <span className="min-w-0 break-words">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2">
+        <p className="stg:flex stg:min-w-0 stg:items-start stg:gap-1.5 stg:text-sm stg:text-destructive">
+          <TriangleAlert aria-hidden="true" className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+          <span className="stg:min-w-0 stg:break-words">
             The agent asked for a human
             {conversation.attentionReason ? (
               <> — &ldquo;{conversation.attentionReason}&rdquo;</>
@@ -70,7 +70,7 @@ export function ConversationAttentionBanner({
         </Button>
       </div>
       {error && (
-        <p className="mt-1 text-xs text-destructive">{getUserMessage(error)}</p>
+        <p className="stg:mt-1 stg:text-xs stg:text-destructive">{getUserMessage(error)}</p>
       )}
     </div>
   );