@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/agent-instance/AgentInstanceDetailPanel.tsx

@@ -112,30 +112,30 @@ export function AgentInstanceDetailPanel({
   const updatedAt = audit?.updatedAt ? timestampDate(audit.updatedAt) : null;
 
   return (
-    <div className="border border-border rounded-lg bg-background overflow-hidden">
+    <div className="stg:border stg:border-border stg:rounded-lg stg:bg-background stg:overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3">
         <div>
-          <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold text-foreground">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
               {meta?.name || meta?.slug || "Instance"}
             </h3>
             <VisibilityBadge visibility={visibility} />
           </div>
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             {createdAt && `Created ${createdAt.toLocaleDateString()}`}
             {updatedAt && ` \u00B7 Updated ${updatedAt.toLocaleDateString()}`}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {onStartSessionClick && (
             <button
               type="button"
               onClick={() => onStartSessionClick(instance)}
               className={cn(
-                "rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
+                "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
               )}
             >
               Start session
@@ -160,8 +160,8 @@ export function AgentInstanceDetailPanel({
             onClick={onClose}
             aria-label="Close panel"
             className={cn(
-              "rounded-md p-1 text-muted-foreground",
-              "hover:text-foreground hover:bg-accent-hover",
+              "stg:rounded-md stg:p-1 stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-accent-hover",
             )}
           >
             <CloseIcon />
@@ -169,19 +169,19 @@ export function AgentInstanceDetailPanel({
         </div>
       </div>
 
-      <div className="divide-y divide-border">
+      <div className="stg:divide-y stg:divide-border">
         {/* Description */}
         {spec?.description && (
-          <div className="px-4 py-3">
-            <h4 className="text-xs font-medium text-muted-foreground mb-1">Description</h4>
-            <p className="text-sm text-foreground">{spec.description}</p>
+          <div className="stg:px-4 stg:py-3">
+            <h4 className="stg:text-xs stg:font-medium stg:text-muted-foreground stg:mb-1">Description</h4>
+            <p className="stg:text-sm stg:text-foreground">{spec.description}</p>
           </div>
         )}
 
         {/* Environments */}
-        <div className="px-4 py-3">
-          <div className="flex items-center justify-between mb-2">
-            <h4 className="text-xs font-medium text-muted-foreground">
+        <div className="stg:px-4 stg:py-3">
+          <div className="stg:flex stg:items-center stg:justify-between stg:mb-2">
+            <h4 className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Environments ({spec?.environmentRefs?.length ?? 0})
             </h4>
             {!isEditingEnvs && (
@@ -189,7 +189,7 @@ export function AgentInstanceDetailPanel({
                 <button
                   type="button"
                   onClick={handleStartEditEnvs}
-                  className="text-[0.65rem] text-primary hover:underline"
+                  className="stg:text-[0.65rem] stg:text-primary stg:hover:underline"
                 >
                   Edit
                 </button>
@@ -198,22 +198,22 @@ export function AgentInstanceDetailPanel({
           </div>
 
           {isEditingEnvs ? (
-            <div className="space-y-2">
+            <div className="stg:space-y-2">
               <EnvironmentPicker
                 org={org}
                 value={editEnvRefs}
                 onChange={setEditEnvRefs}
                 disabled={isUpdating}
               />
-              <div className="flex items-center gap-2">
+              <div className="stg:flex stg:items-center stg:gap-2">
                 <button
                   type="button"
                   onClick={handleSaveEnvs}
                   disabled={isUpdating}
                   className={cn(
-                    "rounded-md px-2.5 py-1 text-xs font-medium",
-                    "bg-primary text-primary-foreground hover:bg-primary/90",
-                    "disabled:opacity-50",
+                    "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                    "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+                    "stg:disabled:opacity-50",
                   )}
                 >
                   {isUpdating ? "Saving..." : "Save"}
@@ -222,7 +222,7 @@ export function AgentInstanceDetailPanel({
                   type="button"
                   onClick={() => setIsEditingEnvs(false)}
                   disabled={isUpdating}
-                  className="rounded-md px-2.5 py-1 text-xs font-medium text-foreground hover:bg-accent-hover"
+                  className="stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-accent-hover"
                 >
                   Cancel
                 </button>
@@ -231,13 +231,13 @@ export function AgentInstanceDetailPanel({
           ) : (
             <div>
               {(spec?.environmentRefs?.length ?? 0) === 0 ? (
-                <p className="text-xs text-muted-foreground">No environments bound.</p>
+                <p className="stg:text-xs stg:text-muted-foreground">No environments bound.</p>
               ) : (
-                <ol className="space-y-1">
+                <ol className="stg:space-y-1">
                   {spec!.environmentRefs.map((ref, idx) => (
-                    <li key={`${ref.slug}-${idx}`} className="flex items-center gap-2 text-sm">
-                      <span className="text-xs text-muted-foreground w-4 text-right">{idx + 1}.</span>
-                      <span className="text-foreground">{resolveEnvName(ref.slug)}</span>
+                    <li key={`${ref.slug}-${idx}`} className="stg:flex stg:items-center stg:gap-2 stg:text-sm">
+                      <span className="stg:text-xs stg:text-muted-foreground stg:w-4 stg:text-right">{idx + 1}.</span>
+                      <span className="stg:text-foreground">{resolveEnvName(ref.slug)}</span>
                     </li>
                   ))}
                 </ol>
@@ -248,43 +248,43 @@ export function AgentInstanceDetailPanel({
 
         {/* Delete */}
         <PermissionGate resource={{ kind: "agent_instance", id }} relation="can_delete">
-          <div className="px-4 py-3">
-            <h4 className="text-xs font-medium text-destructive mb-2">Danger Zone</h4>
+          <div className="stg:px-4 stg:py-3">
+            <h4 className="stg:text-xs stg:font-medium stg:text-destructive stg:mb-2">Danger Zone</h4>
             {!showDeleteConfirm ? (
               <button
                 type="button"
                 onClick={() => setShowDeleteConfirm(true)}
                 className={cn(
-                  "rounded-md px-3 py-1.5 text-xs font-medium",
-                  "border border-destructive/30 text-destructive",
-                  "hover:bg-destructive/10",
-                  "focus:outline-none focus:ring-2 focus:ring-destructive",
+                  "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+                  "stg:border stg:border-destructive/30 stg:text-destructive",
+                  "stg:hover:bg-destructive/10",
+                  "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-destructive",
                 )}
               >
                 Delete Instance
               </button>
             ) : (
-              <div className="space-y-2 rounded-md border border-destructive/30 p-3 bg-destructive/5">
-                <p className="text-xs text-destructive font-medium">
+              <div className="stg:space-y-2 stg:rounded-md stg:border stg:border-destructive/30 stg:p-3 stg:bg-destructive/5">
+                <p className="stg:text-xs stg:text-destructive stg:font-medium">
                   This permanently removes this instance and its environment
                   bindings. Sessions already started against it and their
                   history are preserved. This action cannot be undone.
                 </p>
                 {deleteError && (
-                  <p className="text-xs text-destructive" role="alert">
+                  <p className="stg:text-xs stg:text-destructive" role="alert">
                     {getUserMessage(deleteError)}
                   </p>
                 )}
-                <div className="flex items-center gap-2">
+                <div className="stg:flex stg:items-center stg:gap-2">
                   <button
                     type="button"
                     onClick={handleDelete}
                     disabled={isDeleting}
                     className={cn(
-                      "rounded-md px-3 py-1.5 text-xs font-medium",
-                      "bg-destructive text-destructive-foreground",
-                      "hover:bg-destructive/90",
-                      "disabled:opacity-50",
+                      "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+                      "stg:bg-destructive stg:text-destructive-foreground",
+                      "stg:hover:bg-destructive/90",
+                      "stg:disabled:opacity-50",
                     )}
                   >
                     {isDeleting ? "Deleting..." : "Confirm Delete"}
@@ -293,7 +293,7 @@ export function AgentInstanceDetailPanel({
                     type="button"
                     onClick={() => setShowDeleteConfirm(false)}
                     disabled={isDeleting}
-                    className="rounded-md px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent-hover"
+                    className="stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-accent-hover"
                   >
                     Cancel
                   </button>

package/src/agent-instance/AgentInstanceList.tsx

@@ -11,6 +11,7 @@ import { Button } from "../button/Button.js";
 import { useEnvironmentList } from "../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl.js";
 import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { AgentInstanceEmptyState } from "./AgentInstanceEmptyState.js";
 
 /** Label marking a user's auto-managed personal instance. */
@@ -112,7 +113,7 @@ export function AgentInstanceList({
 
   if (error) {
     return (
-      <div className="py-8 text-center text-sm text-destructive">
+      <div className="stg:py-8 stg:text-center stg:text-sm stg:text-destructive">
         Failed to load instances
       </div>
     );
@@ -123,9 +124,9 @@ export function AgentInstanceList({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-foreground">
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-sm stg:font-medium stg:text-foreground">
           {userInstances.length} {userInstances.length === 1 ? "instance" : "instances"}
         </h3>
         {onCreateClick && (
@@ -140,20 +141,20 @@ export function AgentInstanceList({
         )}
       </div>
 
-      <div className="overflow-hidden rounded-lg border border-border">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
         {/* table-fixed keeps the layout deterministic: Name/Environments flex
             and truncate, Visibility/Actions take fixed widths, so long
             content can never push the Actions kebab off the panel's edge. */}
-        <table className="w-full table-fixed text-sm">
+        <table className="stg:w-full stg:table-fixed stg:text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted-subtle">
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Environments</th>
-              <th className="w-36 px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
-              <th className="w-16 px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+            <tr className="stg:border-b stg:border-border stg:bg-muted-subtle">
+              <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Name</th>
+              <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Environments</th>
+              <th className="stg:w-36 stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Visibility</th>
+              <th className="stg:w-16 stg:px-4 stg:py-2 stg:text-right stg:font-medium stg:text-muted-foreground">Actions</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-border">
+          <tbody className="stg:divide-y stg:divide-border">
             {userInstances.map((inst) => (
               <InstanceRow
                 key={inst.metadata?.id}
@@ -208,26 +209,24 @@ function InstanceRow({
   return (
     <tr
       className={cn(
-        "transition-colors",
-        onRowClick && "cursor-pointer hover:bg-accent-hover",
+        "stg:transition-colors",
+        onRowClick && "stg:cursor-pointer stg:hover:bg-accent-hover",
       )}
       onClick={() => onRowClick?.(instance)}
     >
-      <td className="px-4 py-2.5">
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
-            <span
-              className="truncate font-medium text-foreground"
-              title={meta?.name || meta?.slug || undefined}
-            >
-              {meta?.name || meta?.slug || "\u2014"}
-            </span>
+      <td className="stg:px-4 stg:py-2.5">
+        <div className="stg:min-w-0">
+          <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
+            <TruncatedText
+              text={meta?.name || meta?.slug || "\u2014"}
+              className="stg:font-medium stg:text-foreground"
+            />
             {isPersonal && (
               <span
                 className={cn(
-                  "inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5",
-                  "text-[0.6rem] font-medium uppercase tracking-wide",
-                  "bg-muted text-muted-foreground border border-border",
+                  "stg:inline-flex stg:shrink-0 stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
+                  "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wide",
+                  "stg:bg-muted stg:text-muted-foreground stg:border stg:border-border",
                 )}
               >
                 Personal
@@ -235,26 +234,26 @@ function InstanceRow({
             )}
           </div>
           {instance.spec?.description && (
-            <p className="text-[0.65rem] text-muted-foreground truncate">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground stg:truncate">
               {instance.spec.description}
             </p>
           )}
         </div>
       </td>
 
-      <td className="px-4 py-2.5">
+      <td className="stg:px-4 stg:py-2.5">
         {envRefs.length === 0 ? (
-          <span className="text-xs text-muted-foreground">None</span>
+          <span className="stg:text-xs stg:text-muted-foreground">None</span>
         ) : (
-          <div className="flex flex-wrap gap-1">
+          <div className="stg:flex stg:flex-wrap stg:gap-1">
             {envRefs.map((ref, idx) => (
               <span
                 key={`${ref.slug}-${idx}`}
                 className={cn(
-                  "inline-flex items-center rounded-md px-1.5 py-0.5",
-                  "text-[0.65rem] font-medium",
-                  "bg-muted text-muted-foreground",
-                  "border border-border",
+                  "stg:inline-flex stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
+                  "stg:text-[0.65rem] stg:font-medium",
+                  "stg:bg-muted stg:text-muted-foreground",
+                  "stg:border stg:border-border",
                 )}
               >
                 {resolveEnvName(ref.slug)}
@@ -264,7 +263,7 @@ function InstanceRow({
         )}
       </td>
 
-      <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
+      <td className="stg:px-4 stg:py-2.5" onClick={(e) => e.stopPropagation()}>
         {id ? (
           <ResourceVisibilityControl
             kind="agentInstance"
@@ -273,21 +272,21 @@ function InstanceRow({
             onChanged={refetch}
           />
         ) : (
-          <span className="text-xs text-muted-foreground">{"\u2014"}</span>
+          <span className="stg:text-xs stg:text-muted-foreground">{"\u2014"}</span>
         )}
       </td>
 
       {/* stopPropagation so opening the kebab never triggers the row's
           click. The menu content itself is portaled, so its items never
           bubble to the row regardless. */}
-      <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
+      <td className="stg:px-4 stg:py-2.5 stg:text-right" onClick={(e) => e.stopPropagation()}>
         {(showStartSession || showDelete) && (
           <ActionMenu>
             <ActionMenu.Trigger
-              className="ml-auto"
+              className="stg:ml-auto"
               aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              <MoreHorizontal className="size-4" />
+              <MoreHorizontal className="stg:size-4" />
             </ActionMenu.Trigger>
             <ActionMenu.Content>
               {showStartSession && (
@@ -318,9 +317,9 @@ function InstanceRow({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-2 py-4">
+    <div className="stg:space-y-2 stg:py-4">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
+        <div key={i} className="stg:h-12 stg:animate-pulse stg:rounded-md stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/agent-instance/CreateAgentInstanceDialog.tsx

@@ -105,15 +105,15 @@ export function CreateAgentInstanceDialog({
       ref={dialogRef}
       onClose={handleClose}
       className={cn(
-        "fixed inset-0 m-auto w-full max-w-lg rounded-xl border border-border bg-popover p-0 shadow-xl",
-        "backdrop:bg-black/50",
+        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        "stg:backdrop:bg-black/50",
       )}
       aria-labelledby="create-agent-instance-title"
     >
-      <form onSubmit={handleSubmit} className="flex flex-col">
+      <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
-          <h2 id="create-agent-instance-title" className="text-base font-semibold text-foreground">
+        <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
+          <h2 id="create-agent-instance-title" className="stg:text-base stg:font-semibold stg:text-foreground">
             Create Agent Instance
           </h2>
           <button
@@ -121,9 +121,9 @@ export function CreateAgentInstanceDialog({
             onClick={handleClose}
             aria-label="Close"
             className={cn(
-              "rounded-md p-1 text-muted-foreground",
-              "hover:text-foreground hover:bg-accent-hover",
-              "focus:outline-none focus:ring-2 focus:ring-ring",
+              "stg:rounded-md stg:p-1 stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
             )}
           >
             <CloseIcon />
@@ -131,11 +131,11 @@ export function CreateAgentInstanceDialog({
         </div>
 
         {/* Body */}
-        <div className="space-y-5 px-6 py-5">
+        <div className="stg:space-y-5 stg:px-6 stg:py-5">
           {/* Name */}
           <div>
-            <label htmlFor="agent-instance-name" className="block text-sm font-medium text-foreground mb-1.5">
-              Name <span className="text-destructive">*</span>
+            <label htmlFor="agent-instance-name" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+              Name <span className="stg:text-destructive">*</span>
             </label>
             <input
               id="agent-instance-name"
@@ -146,21 +146,21 @@ export function CreateAgentInstanceDialog({
               placeholder="e.g. prod, staging, qa-team"
               disabled={isCreating}
               className={cn(
-                "w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
-                "text-foreground placeholder:text-muted-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
+                "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-3 stg:py-2 stg:text-sm",
+                "stg:text-foreground stg:placeholder:text-muted-foreground",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+                "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
               )}
               autoFocus
             />
-            <p className="mt-1 text-[0.65rem] text-muted-foreground">
+            <p className="stg:mt-1 stg:text-[0.65rem] stg:text-muted-foreground">
               A URL-friendly slug will be generated from this name.
             </p>
           </div>
 
           {/* Description */}
           <div>
-            <label htmlFor="agent-instance-description" className="block text-sm font-medium text-foreground mb-1.5">
+            <label htmlFor="agent-instance-description" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Description
             </label>
             <textarea
@@ -171,20 +171,20 @@ export function CreateAgentInstanceDialog({
               disabled={isCreating}
               rows={2}
               className={cn(
-                "w-full rounded-md border border-border bg-background px-3 py-2 text-sm resize-none",
-                "text-foreground placeholder:text-muted-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
+                "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-3 stg:py-2 stg:text-sm stg:resize-none",
+                "stg:text-foreground stg:placeholder:text-muted-foreground",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+                "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
               )}
             />
           </div>
 
           {/* Environments */}
           <div>
-            <label className="block text-sm font-medium text-foreground mb-1.5">
+            <label className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Environments
             </label>
-            <p className="text-[0.65rem] text-muted-foreground mb-2">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground stg:mb-2">
               Bind credentials and configuration to this instance.
             </p>
             <EnvironmentPicker
@@ -197,7 +197,7 @@ export function CreateAgentInstanceDialog({
 
           {/* Visibility */}
           <div>
-            <label className="block text-sm font-medium text-foreground mb-1.5">
+            <label className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Visibility
             </label>
             <InstanceVisibilitySelector
@@ -210,23 +210,23 @@ export function CreateAgentInstanceDialog({
 
           {/* Error */}
           {error && (
-            <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive" role="alert">
+            <div className="stg:rounded-md stg:bg-destructive/10 stg:px-3 stg:py-2 stg:text-sm stg:text-destructive" role="alert">
               {getUserMessage(error)}
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
+        <div className="stg:flex stg:items-center stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-4">
           <button
             type="button"
             onClick={handleClose}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium",
-              "text-foreground hover:bg-accent-hover",
-              "focus:outline-none focus:ring-2 focus:ring-ring",
-              "disabled:cursor-not-allowed disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+              "stg:text-foreground stg:hover:bg-accent-hover",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+              "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -235,11 +235,11 @@ export function CreateAgentInstanceDialog({
             type="submit"
             disabled={isCreating || !name.trim()}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium",
-              "bg-primary text-primary-foreground",
-              "hover:bg-primary/90",
-              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              "disabled:cursor-not-allowed disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+              "stg:bg-primary stg:text-primary-foreground",
+              "stg:hover:bg-primary/90",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring stg:focus:ring-offset-2",
+              "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
             )}
           >
             {isCreating ? "Creating..." : "Create Instance"}

package/src/agent-instance/__tests__/AgentInstanceList.test.tsx

@@ -1,14 +1,9 @@
 import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentInstanceList } from "../AgentInstanceList";
 
-// The kebab menu portals its content; without a StigmerProvider the portal
-// container is null and nothing mounts — pin it to document.body.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 // Isolate the row-actions behavior under test from the data, environment,
 // visibility, and permission subsystems (each has its own tests).
 const data = vi.hoisted(() => ({
@@ -85,7 +80,7 @@ describe("AgentInstanceList row actions", () => {
 
     // No always-visible action buttons; the row shows a single kebab.
     expect(screen.queryByRole("button", { name: "Start session" })).toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
 
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
@@ -106,7 +101,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Start session" }));
 
     expect(onStart).toHaveBeenCalledTimes(1);
@@ -126,7 +121,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
 
     expect(onDelete).toHaveBeenCalledWith(inst);
@@ -144,7 +139,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
     ).toBeTruthy();