@stigmer/react 3.9.0 → 3.11.0

package/src/agent/AgentPicker.tsx

@@ -172,23 +172,23 @@ export function AgentPicker({
   );
 
   return (
-    <div className={["space-y-2 w-72", className].filter(Boolean).join(" ")}>
+    <div className={["stg:space-y-2 stg:w-72", className].filter(Boolean).join(" ")}>
       {/* Selected agent */}
       {value && (
-        <div className="space-y-1">
-          <div className="text-[0.65rem] font-medium text-muted-foreground">
+        <div className="stg:space-y-1">
+          <div className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
             Selected
           </div>
-          <div className="flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted-faint stg:px-2 stg:py-1 stg:text-xs">
             <AgentIcon />
-            <span className="min-w-0 flex-1 truncate text-foreground">
+            <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
               {value.slug}
             </span>
             <button
               type="button"
               onClick={handleDeselect}
               disabled={disabled}
-              className="shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+              className="stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
               aria-label={`Remove ${value.slug}`}
             >
               <XIcon />
@@ -212,7 +212,7 @@ export function AgentPicker({
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={handleSearchKeyDown}
         disabled={disabled}
-        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:disabled:pointer-events-none stg:disabled:opacity-50"
         autoFocus
       />
 
@@ -220,10 +220,10 @@ export function AgentPicker({
         <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
       )}
 
-      {error && <p className="text-xs text-destructive">{error.message}</p>}
+      {error && <p className="stg:text-xs stg:text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}
-      <div className="relative">
+      <div className="stg:relative">
         {canScrollUp && <ScrollFade position="top" />}
 
         <div
@@ -231,12 +231,12 @@ export function AgentPicker({
           id={LIST_ID}
           role="listbox"
           aria-label="Agents"
-          className="max-h-52 overflow-y-auto"
+          className="stg:max-h-52 stg:overflow-y-auto"
         >
           {isLoading ? (
             <LoadingSkeleton />
           ) : availableResults.length === 0 ? (
-            <div className="py-4 text-center text-xs text-muted-foreground">
+            <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
               {query
                 ? "No agents match your search"
                 : value
@@ -253,30 +253,30 @@ export function AgentPicker({
                 onClick={() => handleSelect(result)}
                 disabled={disabled}
                 className={cn(
-                  "group flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-                  "disabled:pointer-events-none disabled:opacity-50",
+                  "stg:group stg:flex stg:w-full stg:flex-col stg:gap-0.5 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   idx === focusIndex
-                    ? "bg-accent text-foreground"
-                    : "text-foreground hover:bg-accent-hover",
+                    ? "stg:bg-accent stg:text-foreground"
+                    : "stg:text-foreground stg:hover:bg-accent-hover",
                 )}
                 role="option"
                 aria-selected={idx === focusIndex}
               >
-                <span className="flex items-center gap-1.5">
+                <span className="stg:flex stg:items-center stg:gap-1.5">
                   <AgentIcon />
-                  <span className="truncate font-medium">
+                  <span className="stg:truncate stg:font-medium">
                     <HighlightMatch text={result.name} query={query} />
                   </span>
-                  <span className="ml-auto shrink-0 text-[0.6rem] text-muted-foreground">
+                  <span className="stg:ml-auto stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
                     {result.org}
                   </span>
                 </span>
                 {result.description && (
                   <span
                     className={cn(
-                      "pl-5 text-[0.65rem] text-muted-foreground",
+                      "stg:pl-5 stg:text-[0.65rem] stg:text-muted-foreground",
                       idx !== focusIndex &&
-                        "line-clamp-2 group-hover:line-clamp-none",
+                        "stg:line-clamp-2 stg:group-hover:line-clamp-none",
                     )}
                   >
                     {result.description}
@@ -304,7 +304,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="font-semibold">
+      <span className="stg:font-semibold">
         {text.slice(idx, idx + query.length)}
       </span>
       {text.slice(idx + query.length)}
@@ -314,15 +314,15 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-1 py-1">
+    <div className="stg:space-y-1 stg:py-1">
       {[50, 65, 40, 58].map((w, i) => (
-        <div key={i} className="flex flex-col gap-1 px-2 py-1.5">
+        <div key={i} className="stg:flex stg:flex-col stg:gap-1 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
           <div
-            className="h-2 rounded bg-muted-subtle animate-pulse"
+            className="stg:h-2 stg:rounded stg:bg-muted-subtle stg:animate-pulse"
             style={{ width: `${Math.min(w + 15, 90)}%` }}
           />
         </div>
@@ -342,7 +342,7 @@ function AgentIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <rect x="3" y="5" width="10" height="8" rx="2" />

package/src/agent/steps/CapabilitiesStep.tsx

@@ -58,12 +58,12 @@ export function CapabilitiesStep({
   );
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="stg:flex stg:flex-col stg:gap-6">
       <div>
-        <h2 className="text-lg font-semibold text-foreground">
+        <h2 className="stg:text-lg stg:font-semibold stg:text-foreground">
           Capabilities
         </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">
           Configure what tools, skills, and secrets this agent can use.
           All sections are optional.
         </p>
@@ -143,31 +143,31 @@ function CollapsibleSection({
   readonly children: React.ReactNode;
 }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-border">
+    <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
       <button
         type="button"
         onClick={() => onToggle(id)}
         aria-expanded={expanded}
         aria-controls={`stgm-wizard-section-${id}`}
         className={cn(
-          "flex w-full items-center justify-between px-4 py-3 text-left transition-colors",
-          "hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "stg:flex stg:w-full stg:items-center stg:justify-between stg:px-4 stg:py-3 stg:text-left stg:transition-colors",
+          "stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
         <div>
-          <span className="text-sm font-medium text-foreground">{title}</span>
+          <span className="stg:text-sm stg:font-medium stg:text-foreground">{title}</span>
           {count > 0 && (
-            <span className="ml-2 inline-flex items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground">
+            <span className="stg:ml-2 stg:inline-flex stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary-foreground">
               {count}
             </span>
           )}
-          <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">{subtitle}</p>
         </div>
         <ChevronIcon
           className={cn(
-            "size-4 shrink-0 text-muted-foreground transition-transform",
-            expanded && "rotate-180",
+            "stg:size-4 stg:shrink-0 stg:text-muted-foreground stg:transition-transform",
+            expanded && "stg:rotate-180",
           )}
         />
       </button>
@@ -175,7 +175,7 @@ function CollapsibleSection({
       {expanded && (
         <div
           id={`stgm-wizard-section-${id}`}
-          className="border-t border-border px-4 py-4"
+          className="stg:border-t stg:border-border stg:px-4 stg:py-4"
         >
           {children}
         </div>
@@ -220,14 +220,14 @@ function EnvVarEditor({
   );
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="stg:flex stg:flex-col stg:gap-3">
       {entries.map((entry, index) => (
         <div
           key={index}
-          className="flex flex-col gap-2 rounded-md border border-border p-3"
+          className="stg:flex stg:flex-col stg:gap-2 stg:rounded-md stg:border stg:border-border stg:p-3"
         >
-          <div className="flex items-start gap-2">
-            <div className="flex-1 space-y-1.5">
+          <div className="stg:flex stg:items-start stg:gap-2">
+            <div className="stg:flex-1 stg:space-y-1.5">
               <input
                 type="text"
                 value={entry.key}
@@ -237,9 +237,9 @@ function EnvVarEditor({
                 placeholder="VARIABLE_NAME"
                 aria-label={`Environment variable name ${index + 1}`}
                 className={cn(
-                  "w-full rounded-md border border-input bg-input-bg px-2.5 py-1.5 font-mono text-xs text-foreground",
-                  "placeholder:text-muted-foreground",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-2.5 stg:py-1.5 stg:font-mono stg:text-xs stg:text-foreground",
+                  "stg:placeholder:text-muted-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
                 )}
               />
               <input
@@ -249,9 +249,9 @@ function EnvVarEditor({
                 placeholder="Description (optional)"
                 aria-label={`Description for ${entry.key || `variable ${index + 1}`}`}
                 className={cn(
-                  "w-full rounded-md border border-input bg-input-bg px-2.5 py-1.5 text-xs text-foreground",
-                  "placeholder:text-muted-foreground",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+                  "stg:placeholder:text-muted-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
                 )}
               />
             </div>
@@ -260,31 +260,31 @@ function EnvVarEditor({
               onClick={() => removeEntry(index)}
               aria-label={`Remove ${entry.key || "variable"}`}
               className={cn(
-                "mt-1 rounded p-1 text-muted-foreground transition-colors",
-                "hover:bg-accent-hover hover:text-destructive",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "stg:mt-1 stg:rounded stg:p-1 stg:text-muted-foreground stg:transition-colors",
+                "stg:hover:bg-accent-hover stg:hover:text-destructive",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
               )}
             >
-              <RemoveIcon className="size-3.5" />
+              <RemoveIcon className="stg:size-3.5" />
             </button>
           </div>
 
-          <div className="flex items-center gap-4">
-            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <div className="stg:flex stg:items-center stg:gap-4">
+            <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
               <input
                 type="checkbox"
                 checked={entry.isSecret}
                 onChange={(e) => updateEntry(index, { isSecret: e.target.checked })}
-                className="size-3.5 rounded border-input"
+                className="stg:size-3.5 stg:rounded stg:border-input"
               />
               Secret
             </label>
-            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
               <input
                 type="checkbox"
                 checked={entry.optional}
                 onChange={(e) => updateEntry(index, { optional: e.target.checked })}
-                className="size-3.5 rounded border-input"
+                className="stg:size-3.5 stg:rounded stg:border-input"
               />
               Optional
             </label>
@@ -296,12 +296,12 @@ function EnvVarEditor({
         type="button"
         onClick={addEntry}
         className={cn(
-          "inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors",
-          "hover:border-border hover:text-foreground hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:inline-flex stg:w-fit stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-dashed stg:border-input stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:border-border stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         )}
       >
-        <PlusIcon className="size-3" />
+        <PlusIcon className="stg:size-3" />
         Add variable
       </button>
     </div>

package/src/agent/steps/IdentityStep.tsx

@@ -52,30 +52,30 @@ export function IdentityStep({
       : null;
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="stg:flex stg:flex-col stg:gap-6">
       <div>
-        <h2 className="text-lg font-semibold text-foreground">
+        <h2 className="stg:text-lg stg:font-semibold stg:text-foreground">
           Identity & Instructions
         </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">
           Define what this agent is and what it does.
         </p>
       </div>
 
       {validationError && (
-        <p className="text-sm text-destructive" role="alert">
+        <p className="stg:text-sm stg:text-destructive" role="alert">
           {validationError}
         </p>
       )}
 
-      <div className="grid gap-4 sm:grid-cols-2">
+      <div className="stg:grid stg:gap-4 stg:sm:grid-cols-2">
         {/* Name */}
-        <div className="space-y-1.5">
+        <div className="stg:space-y-1.5">
           <label
             htmlFor="stgm-wizard-agent-name"
-            className="text-sm font-medium text-foreground"
+            className="stg:text-sm stg:font-medium stg:text-foreground"
           >
-            Name <span className="text-destructive">*</span>
+            Name <span className="stg:text-destructive">*</span>
           </label>
           <input
             id="stgm-wizard-agent-name"
@@ -85,18 +85,18 @@ export function IdentityStep({
             placeholder="e.g. PR Review Bot"
             autoFocus
             className={cn(
-              "w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-3 stg:py-2 stg:text-sm stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           />
         </div>
 
         {/* Slug */}
-        <div className="space-y-1.5">
+        <div className="stg:space-y-1.5">
           <label
             htmlFor="stgm-wizard-agent-slug"
-            className="text-sm font-medium text-foreground"
+            className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Slug
           </label>
@@ -107,30 +107,30 @@ export function IdentityStep({
             onChange={(e) => handleSlugChange(e.target.value)}
             placeholder="auto-generated"
             className={cn(
-              "w-full rounded-md border px-3 py-2 font-mono text-sm text-foreground",
+              "stg:w-full stg:rounded-md stg:border stg:px-3 stg:py-2 stg:font-mono stg:text-sm stg:text-foreground",
               slugError
-                ? "border-destructive bg-input-bg"
-                : "border-input bg-input-bg",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                ? "stg:border-destructive stg:bg-input-bg"
+                : "stg:border-input stg:bg-input-bg",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           />
           {slugError && (
-            <p className="text-xs text-destructive">{slugError}</p>
+            <p className="stg:text-xs stg:text-destructive">{slugError}</p>
           )}
           {!slugError && data.slug && (
-            <p className="text-xs text-muted-foreground">
-              Referenced as <code className="font-mono">{data.slug}</code>
+            <p className="stg:text-xs stg:text-muted-foreground">
+              Referenced as <code className="stg:font-mono">{data.slug}</code>
             </p>
           )}
         </div>
       </div>
 
       {/* Description */}
-      <div className="space-y-1.5">
+      <div className="stg:space-y-1.5">
         <label
           htmlFor="stgm-wizard-agent-description"
-          className="text-sm font-medium text-foreground"
+          className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Description
         </label>
@@ -142,19 +142,19 @@ export function IdentityStep({
           placeholder="A brief description of what this agent does"
           maxLength={200}
           className={cn(
-            "w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-3 stg:py-2 stg:text-sm stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
       </div>
 
       {/* Icon URL + Visibility (same row) */}
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className="space-y-1.5">
+      <div className="stg:grid stg:gap-4 stg:sm:grid-cols-2">
+        <div className="stg:space-y-1.5">
           <label
             htmlFor="stgm-wizard-agent-icon"
-            className="text-sm font-medium text-foreground"
+            className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Icon URL
           </label>
@@ -165,18 +165,18 @@ export function IdentityStep({
             onChange={(e) => updateData({ iconUrl: e.target.value })}
             placeholder="https://example.com/icon.png"
             className={cn(
-              "w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-3 stg:py-2 stg:text-sm stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           />
         </div>
 
-        <fieldset className="space-y-1.5">
-          <legend className="text-sm font-medium text-foreground">
+        <fieldset className="stg:space-y-1.5">
+          <legend className="stg:text-sm stg:font-medium stg:text-foreground">
             Visibility
           </legend>
-          <div className="flex gap-2">
+          <div className="stg:flex stg:gap-2">
             <VisibilityOption
               value="private"
               label="Private"
@@ -194,14 +194,14 @@ export function IdentityStep({
       </div>
 
       {/* Instructions */}
-      <div className="space-y-1.5">
+      <div className="stg:space-y-1.5">
         <label
           htmlFor="stgm-wizard-agent-instructions"
-          className="text-sm font-medium text-foreground"
+          className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Instructions
         </label>
-        <p className="text-xs text-muted-foreground">
+        <p className="stg:text-xs stg:text-muted-foreground">
           The system prompt that defines this agent&apos;s behavior.
         </p>
         <textarea
@@ -211,9 +211,9 @@ export function IdentityStep({
           placeholder="You are a helpful assistant that..."
           rows={12}
           className={cn(
-            "w-full resize-y rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:w-full stg:resize-y stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:px-3 stg:py-2 stg:font-mono stg:text-sm stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
       </div>
@@ -239,10 +239,10 @@ function VisibilityOption({
   return (
     <label
       className={cn(
-        "inline-flex cursor-pointer items-center rounded-md border px-3 py-1.5 text-sm transition-colors",
+        "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-md stg:border stg:px-3 stg:py-1.5 stg:text-sm stg:transition-colors",
         checked
-          ? "border-primary bg-primary-subtle text-primary font-medium"
-          : "border-input bg-input-bg text-muted-foreground hover:border-border hover:text-foreground",
+          ? "stg:border-primary stg:bg-primary-subtle stg:text-primary stg:font-medium"
+          : "stg:border-input stg:bg-input-bg stg:text-muted-foreground stg:hover:border-border stg:hover:text-foreground",
       )}
     >
       <input
@@ -251,7 +251,7 @@ function VisibilityOption({
         value={value}
         checked={checked}
         onChange={onChange}
-        className="sr-only"
+        className="stg:sr-only"
       />
       {label}
     </label>

package/src/agent/steps/ReviewStep.tsx

@@ -34,19 +34,19 @@ export function ReviewStep({
   );
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="stg:flex stg:flex-col stg:gap-6">
       <div>
-        <h2 className="text-lg font-semibold text-foreground">
+        <h2 className="stg:text-lg stg:font-semibold stg:text-foreground">
           Review & Create
         </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">
           Review the agent configuration below, then create it.
         </p>
       </div>
 
       {/* Summary card */}
-      <div className="rounded-lg border border-border p-4">
-        <dl className="grid gap-x-6 gap-y-3 text-sm sm:grid-cols-2">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:p-4">
+        <dl className="stg:grid stg:gap-x-6 stg:gap-y-3 stg:text-sm stg:sm:grid-cols-2">
           <SummaryItem label="Name" value={data.name} />
           <SummaryItem label="Slug" value={data.slug} mono />
           <SummaryItem label="Organization" value={org} mono />
@@ -58,14 +58,14 @@ export function ReviewStep({
             <SummaryItem
               label="Description"
               value={data.description}
-              className="sm:col-span-2"
+              className="stg:sm:col-span-2"
             />
           )}
           {data.instructions && (
             <SummaryItem
               label="Instructions"
               value={truncate(data.instructions, 120)}
-              className="sm:col-span-2"
+              className="stg:sm:col-span-2"
             />
           )}
           <SummaryItem
@@ -94,12 +94,12 @@ export function ReviewStep({
       </div>
 
       {/* YAML preview */}
-      <div className="space-y-2">
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="stg:space-y-2">
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           YAML Preview
         </h3>
-        <div className="max-h-80 overflow-auto rounded-lg border border-border bg-muted-faint">
-          <pre className="p-4 font-mono text-xs leading-relaxed text-foreground">
+        <div className="stg:max-h-80 stg:overflow-auto stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint">
+          <pre className="stg:p-4 stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground">
             {yamlPreview}
           </pre>
         </div>
@@ -107,11 +107,11 @@ export function ReviewStep({
 
       {/* Error display */}
       {error && (
-        <div className="rounded-md border border-destructive bg-muted-faint px-4 py-3" role="alert">
-          <p className="text-sm font-medium text-destructive">
+        <div className="stg:rounded-md stg:border stg:border-destructive stg:bg-muted-faint stg:px-4 stg:py-3" role="alert">
+          <p className="stg:text-sm stg:font-medium stg:text-destructive">
             Failed to create agent
           </p>
-          <p className="mt-1 text-xs text-muted-foreground">
+          <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
             {getUserMessage(error)}
           </p>
         </div>
@@ -119,7 +119,7 @@ export function ReviewStep({
 
       {/* Creating state */}
       {isCreating && (
-        <p className="text-sm text-muted-foreground" aria-live="polite">
+        <p className="stg:text-sm stg:text-muted-foreground" aria-live="polite">
           Creating agent…
         </p>
       )}
@@ -144,11 +144,11 @@ function SummaryItem({
 }) {
   return (
     <div className={className}>
-      <dt className="text-xs text-muted-foreground">{label}</dt>
+      <dt className="stg:text-xs stg:text-muted-foreground">{label}</dt>
       <dd
         className={cn(
-          "mt-0.5 text-sm text-foreground",
-          mono && "font-mono",
+          "stg:mt-0.5 stg:text-sm stg:text-foreground",
+          mono && "stg:font-mono",
         )}
       >
         {value}