@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/environment/EnvironmentPicker.tsx

@@ -137,7 +137,7 @@ export function EnvironmentPicker({
   );
 
   return (
-    <div className={cn("space-y-3", className)} role="group" aria-label="Environment bindings">
+    <div className={cn("stg:space-y-3", className)} role="group" aria-label="Environment bindings">
       {value.length > 0 && (
         <SelectedList
           value={value}
@@ -152,13 +152,13 @@ export function EnvironmentPicker({
       )}
 
       {value.length > 1 && (
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           Environments are merged in order. Later entries override earlier ones when keys conflict.
         </p>
       )}
 
       <div>
-        <label htmlFor={selectId} className="sr-only">
+        <label htmlFor={selectId} className="stg:sr-only">
           Add environment
         </label>
         <select
@@ -169,10 +169,10 @@ export function EnvironmentPicker({
             if (e.target.value) handleAdd(e.target.value);
           }}
           className={cn(
-            "w-full rounded-md border border-border bg-background px-3 py-1.5 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-1.5 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",
           )}
         >
           <option value="">
@@ -217,32 +217,32 @@ function SelectedList({
   total,
 }: SelectedListProps) {
   return (
-    <ol className="space-y-1.5" aria-label="Selected environments (merge order)">
+    <ol className="stg:space-y-1.5" aria-label="Selected environments (merge order)">
       {value.map((ref, index) => (
         <li
           key={`${ref.org}-${ref.slug}-${index}`}
           className={cn(
-            "flex items-center gap-2 rounded-md border border-border px-3 py-2",
-            "bg-muted/30",
+            "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-border stg:px-3 stg:py-2",
+            "stg:bg-muted/30",
           )}
         >
-          <span className="shrink-0 w-5 text-xs font-medium text-muted-foreground text-right">
+          <span className="stg:shrink-0 stg:w-5 stg:text-xs stg:font-medium stg:text-muted-foreground stg:text-right">
             {index + 1}.
           </span>
 
-          <div className="flex-1 min-w-0">
-            <span className="text-sm font-medium text-foreground truncate block">
+          <div className="stg:flex-1 stg:min-w-0">
+            <span className="stg:text-sm stg:font-medium stg:text-foreground stg:truncate stg:block">
               {resolveEnvName(ref)}
             </span>
             {resolveEnvDescription(ref) && (
-              <span className="text-[0.65rem] text-muted-foreground truncate block">
+              <span className="stg:text-[0.65rem] stg:text-muted-foreground stg:truncate stg:block">
                 {resolveEnvDescription(ref)}
               </span>
             )}
           </div>
 
           {!disabled && (
-            <div className="flex items-center gap-0.5 shrink-0">
+            <div className="stg:flex stg:items-center stg:gap-0.5 stg:shrink-0">
               <ReorderButton
                 direction="up"
                 disabled={index === 0}
@@ -260,9 +260,9 @@ function SelectedList({
                 onClick={() => onRemove(index)}
                 aria-label={`Remove ${resolveEnvName(ref)}`}
                 className={cn(
-                  "rounded p-1 text-muted-foreground",
-                  "hover:text-destructive hover:bg-destructive/10",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
+                  "stg:rounded stg:p-1 stg:text-muted-foreground",
+                  "stg:hover:text-destructive stg:hover:bg-destructive/10",
+                  "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
                 )}
               >
                 <RemoveIcon />
@@ -293,10 +293,10 @@ function ReorderButton({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "rounded p-1 text-muted-foreground",
-        "hover:text-foreground hover:bg-accent-hover",
-        "focus:outline-none focus:ring-1 focus:ring-ring",
-        "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        "stg:rounded stg:p-1 stg:text-muted-foreground",
+        "stg:hover:text-foreground stg:hover:bg-accent-hover",
+        "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
+        "stg:disabled:opacity-30 stg:disabled:cursor-not-allowed stg:disabled:hover:bg-transparent",
       )}
     >
       {direction === "up" ? <ArrowUpIcon /> : <ArrowDownIcon />}

package/src/environment/EnvironmentVariableEditor.tsx

@@ -12,6 +12,7 @@ import { getUserMessage, type EnvVarInput } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables.js";
 import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables.js";
@@ -151,14 +152,14 @@ export function EnvironmentVariableEditor({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading variables"
       >
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted-subtle h-8 animate-pulse rounded"
+            className="stg:bg-muted-subtle stg:h-8 stg:animate-pulse stg:rounded"
             style={{ width: `${85 - i * 10}%` }}
           />
         ))}
@@ -168,21 +169,21 @@ export function EnvironmentVariableEditor({
 
   if (loadError) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(loadError)}
       </p>
     );
   }
 
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       {variables.length === 0 && !showAddForm ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           No variables configured.
         </p>
       ) : (
         <div
-          className="divide-border/60 divide-y"
+          className="stg:divide-border/60 stg:divide-y"
           role="list"
           aria-label="Environment variables"
         >
@@ -211,9 +212,9 @@ export function EnvironmentVariableEditor({
             type="button"
             onClick={() => setShowAddForm(true)}
             className={cn(
-              "mt-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:mt-1 stg:flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
           >
             <PlusIcon />
@@ -336,8 +337,8 @@ function VariableRow({
   if (mode === "editing") {
     return (
       <div role="listitem">
-        <div className="flex items-center gap-2 py-2">
-          <span className="shrink-0 font-mono text-xs font-medium text-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:py-2">
+          <span className="stg:shrink-0 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
             {variable.key}
           </span>
 
@@ -349,10 +350,10 @@ function VariableRow({
             placeholder={variable.isSecret ? "Enter new value" : "Value"}
             autoFocus
             className={cn(
-              "min-w-0 flex-1 rounded-md border border-input bg-background px-2 py-1 font-mono text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 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",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
             onKeyDown={(e) => {
               if (e.key === "Enter") handleSave();
@@ -387,17 +388,27 @@ function VariableRow({
   // --- Idle / Confirming mode ---
   return (
     <div role="listitem">
-      <div className="group flex items-center gap-3 py-2">
+      <div className="stg:group stg:flex stg:items-center stg:gap-3 stg:py-2">
         {/* Key + badge */}
-        <div className="flex shrink-0 items-baseline gap-1.5">
-          <span
-            className="font-mono text-xs font-medium text-foreground"
-            title={variable.description || undefined}
-          >
-            {variable.key}
-          </span>
+        <div className="stg:flex stg:shrink-0 stg:items-baseline stg:gap-1.5">
+          {variable.description ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground" />
+                }
+              >
+                {variable.key}
+              </TooltipTrigger>
+              <TooltipContent side="top">{variable.description}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
+              {variable.key}
+            </span>
+          )}
           {variable.isSecret && (
-            <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground-subtle">
+            <span className="stg:text-[0.55rem] stg:uppercase stg:tracking-wider stg:text-muted-foreground-subtle">
               secret
             </span>
           )}
@@ -406,10 +417,10 @@ function VariableRow({
         {/* Value */}
         <span
           className={cn(
-            "min-w-0 flex-1 truncate font-mono text-xs",
+            "stg:min-w-0 stg:flex-1 stg:truncate stg:font-mono stg:text-xs",
             variable.isSecret && revealedValue !== null
-              ? "text-foreground"
-              : "text-muted-foreground",
+              ? "stg:text-foreground"
+              : "stg:text-muted-foreground",
           )}
         >
           {displayValue}
@@ -417,8 +428,8 @@ function VariableRow({
 
         {/* Actions */}
         {mode === "confirming" ? (
-          <div className="flex shrink-0 items-center gap-1">
-            <span className="text-destructive text-[0.65rem]">Delete?</span>
+          <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
+            <span className="stg:text-destructive stg:text-[0.65rem]">Delete?</span>
             <ActionButton
               onClick={confirmDelete}
               disabled={isDeleting}
@@ -437,7 +448,7 @@ function VariableRow({
           </div>
         ) : (
           !readOnly && (
-            <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+            <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:opacity-0 stg:transition-opacity stg:group-hover:opacity-100 stg:group-focus-within:opacity-100">
               {variable.isSecret && (
                 /* Secret reveal is creator-only (can_read_secrets) at every
                    visibility level — org sharing never widens it. Hide the
@@ -533,8 +544,8 @@ function AddVariableForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-2 pt-2">
-      <div className="flex items-center gap-2">
+    <form onSubmit={handleSubmit} className="stg:space-y-2 stg:pt-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <input
           type="text"
           value={key}
@@ -543,11 +554,11 @@ function AddVariableForm({
           disabled={isAdding}
           autoFocus
           className={cn(
-            "w-40 rounded-md border bg-background px-2 py-1 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
-            isDuplicate ? "border-amber-500/70" : "border-input",
+            "stg:w-40 stg:rounded-md stg:border stg:bg-background stg:px-2 stg:py-1 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",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            isDuplicate ? "stg:border-amber-500/70" : "stg:border-input",
           )}
         />
 
@@ -558,44 +569,44 @@ function AddVariableForm({
           placeholder="Value"
           disabled={isAdding}
           className={cn(
-            "min-w-0 flex-1 rounded-md border border-input bg-background px-2 py-1 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 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",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
           onKeyDown={(e) => {
             if (e.key === "Escape") onCancel();
           }}
         />
 
-        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[0.65rem] text-muted-foreground select-none">
+        <label className="stg:flex stg:shrink-0 stg:cursor-pointer stg:items-center stg:gap-1 stg:text-[0.65rem] stg:text-muted-foreground stg:select-none">
           <input
             type="checkbox"
             checked={isSecret}
             onChange={(e) => setIsSecret(e.target.checked)}
             disabled={isAdding}
-            className="accent-primary size-3"
+            className="stg:accent-primary stg:size-3"
           />
           Secret
         </label>
       </div>
 
       {isDuplicate && (
-        <p className="text-[0.65rem] text-amber-600 dark:text-amber-400">
+        <p className="stg:text-[0.65rem] stg:text-amber-600 stg:dark:text-amber-400">
           This key already exists and will be overwritten.
         </p>
       )}
 
       <RowError error={error} />
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1 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 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",
           )}
         >
           {isAdding && <SpinnerIcon />}
@@ -606,9 +617,9 @@ function AddVariableForm({
           onClick={onCancel}
           disabled={isAdding}
           className={cn(
-            "rounded-md px-3 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:rounded-md stg:px-3 stg:py-1 stg:text-xs",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           Cancel
@@ -636,10 +647,10 @@ function ActionButton({
   children: React.ReactNode;
 }) {
   const colorClass = {
-    primary: "text-primary hover:text-primary-muted",
-    muted: "text-muted-foreground hover:text-foreground",
-    "muted-danger": "text-muted-foreground hover:text-destructive",
-    danger: "text-destructive hover:text-destructive-muted",
+    primary: "stg:text-primary stg:hover:text-primary-muted",
+    muted: "stg:text-muted-foreground stg:hover:text-foreground",
+    "muted-danger": "stg:text-muted-foreground stg:hover:text-destructive",
+    danger: "stg:text-destructive stg:hover:text-destructive-muted",
   }[variant];
 
   return (
@@ -649,7 +660,7 @@ function ActionButton({
       disabled={disabled}
       aria-label={label}
       className={cn(
-        "rounded p-1 transition-colors disabled:pointer-events-none disabled:opacity-40",
+        "stg:rounded stg:p-1 stg:transition-colors stg:disabled:pointer-events-none stg:disabled:opacity-40",
         colorClass,
       )}
     >
@@ -661,7 +672,7 @@ function ActionButton({
 function RowError({ error }: { error: Error | null }) {
   if (!error) return null;
   return (
-    <p className="text-destructive pb-1 text-[0.6rem]" role="alert">
+    <p className="stg:text-destructive stg:pb-1 stg:text-[0.6rem]" role="alert">
       {getUserMessage(error)}
     </p>
   );
@@ -814,7 +825,7 @@ 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" />

package/src/error/ErrorMessage.tsx

@@ -75,47 +75,47 @@ export function ErrorMessage({
     <div
       role="alert"
       className={cn(
-        "bg-destructive-subtle border-destructive/20 text-destructive rounded-lg border p-4",
+        "stg:bg-destructive-subtle stg:border-destructive/20 stg:text-destructive stg:rounded-lg stg:border stg:p-4",
         className,
       )}
     >
-      <div className="flex items-start gap-3">
+      <div className="stg:flex stg:items-start stg:gap-3">
         {isShield ? (
-          <ShieldXIcon className="mt-0.5 size-4 shrink-0" />
+          <ShieldXIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
         ) : (
-          <AlertTriangleIcon className="mt-0.5 size-4 shrink-0" />
+          <AlertTriangleIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
         )}
 
-        <div className="min-w-0 flex-1 space-y-1">
-          <p className="text-sm font-medium">
+        <div className="stg:min-w-0 stg:flex-1 stg:space-y-1">
+          <p className="stg:text-sm stg:font-medium">
             {title ?? CATEGORY_TITLES[category]}
           </p>
-          <p className="text-destructive-muted text-sm">{message}</p>
+          <p className="stg:text-destructive-muted stg:text-sm">{message}</p>
 
           {metadata && (
-            <div className="pt-1">
+            <div className="stg:pt-1">
               <button
                 type="button"
                 onClick={() => setDetailsOpen((prev) => !prev)}
-                className="text-destructive-muted hover:text-destructive-muted inline-flex items-center gap-1 text-xs transition-colors"
+                className="stg:text-destructive-muted stg:hover:text-destructive-muted stg:inline-flex stg:items-center stg:gap-1 stg:text-xs stg:transition-colors"
               >
                 <ChevronDownIcon
                   className={cn(
-                    "size-3 transition-transform",
-                    detailsOpen && "rotate-180",
+                    "stg:size-3 stg:transition-transform",
+                    detailsOpen && "stg:rotate-180",
                   )}
                 />
                 Technical details
               </button>
               {detailsOpen && (
-                <dl className="text-destructive-muted mt-1.5 space-y-0.5 font-mono text-xs">
-                  <div className="flex gap-2">
-                    <dt className="shrink-0">Method:</dt>
-                    <dd className="truncate">{metadata.method}</dd>
+                <dl className="stg:text-destructive-muted stg:mt-1.5 stg:space-y-0.5 stg:font-mono stg:text-xs">
+                  <div className="stg:flex stg:gap-2">
+                    <dt className="stg:shrink-0">Method:</dt>
+                    <dd className="stg:truncate">{metadata.method}</dd>
                   </div>
-                  <div className="flex gap-2">
-                    <dt className="shrink-0">Path:</dt>
-                    <dd className="truncate">{metadata.path}</dd>
+                  <div className="stg:flex stg:gap-2">
+                    <dt className="stg:shrink-0">Path:</dt>
+                    <dd className="stg:truncate">{metadata.path}</dd>
                   </div>
                 </dl>
               )}
@@ -128,12 +128,12 @@ export function ErrorMessage({
             type="button"
             onClick={retry}
             className={cn(
-              "inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium",
-              "border-destructive/20 text-destructive hover:bg-destructive-subtle",
-              "transition-colors",
+              "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium",
+              "stg:border-destructive/20 stg:text-destructive stg:hover:bg-destructive-subtle",
+              "stg:transition-colors",
             )}
           >
-            <RotateCcwIcon className="size-3" />
+            <RotateCcwIcon className="stg:size-3" />
             Retry
           </button>
         )}

package/src/error/SecretFlowErrorGuide.tsx

@@ -95,29 +95,29 @@ export function SecretFlowErrorGuide({
     <div
       role="alert"
       className={cn(
-        "rounded-lg border border-amber-500/30 bg-amber-500/5 p-4",
+        "stg:rounded-lg stg:border stg:border-amber-500/30 stg:bg-amber-500/5 stg:p-4",
         className,
       )}
     >
-      <div className="flex items-start gap-3">
-        <KeyIcon className="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <KeyIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0 stg:text-amber-600 stg:dark:text-amber-400" />
 
-        <div className="min-w-0 flex-1 space-y-2">
-          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+        <div className="stg:min-w-0 stg:flex-1 stg:space-y-2">
+          <p className="stg:text-sm stg:font-medium stg:text-amber-800 stg:dark:text-amber-200">
             Missing environment variables
           </p>
 
-          <div className="space-y-1.5">
+          <div className="stg:space-y-1.5">
             {Array.from(grouped).map(([server, vars]) => (
               <div key={server}>
-                <p className="text-xs text-amber-700 dark:text-amber-300">
-                  <span className="font-medium">{server}</span> requires:
+                <p className="stg:text-xs stg:text-amber-700 stg:dark:text-amber-300">
+                  <span className="stg:font-medium">{server}</span> requires:
                 </p>
-                <ul className="mt-0.5 space-y-0.5">
+                <ul className="stg:mt-0.5 stg:space-y-0.5">
                   {vars.map((v) => (
                     <li
                       key={v}
-                      className="text-xs font-mono text-amber-800/80 dark:text-amber-200/80 pl-3"
+                      className="stg:text-xs stg:font-mono stg:text-amber-800/80 stg:dark:text-amber-200/80 stg:pl-3"
                     >
                       {v}
                     </li>
@@ -127,24 +127,24 @@ export function SecretFlowErrorGuide({
             ))}
           </div>
 
-          <div className="border-t border-amber-500/20 pt-2">
-            <p className="text-xs text-amber-700/90 dark:text-amber-300/90">
+          <div className="stg:border-t stg:border-amber-500/20 stg:pt-2">
+            <p className="stg:text-xs stg:text-amber-700/90 stg:dark:text-amber-300/90">
               You can provide these values in two ways:
             </p>
-            <ul className="mt-1 space-y-0.5 text-xs text-amber-700/80 dark:text-amber-300/80">
-              <li className="flex items-start gap-1.5">
-                <span className="mt-px shrink-0">•</span>
+            <ul className="stg:mt-1 stg:space-y-0.5 stg:text-xs stg:text-amber-700/80 stg:dark:text-amber-300/80">
+              <li className="stg:flex stg:items-start stg:gap-1.5">
+                <span className="stg:mt-px stg:shrink-0">•</span>
                 <span>
                   Add them to your{" "}
-                  <strong className="font-medium">personal environment</strong>{" "}
+                  <strong className="stg:font-medium">personal environment</strong>{" "}
                   in Settings for automatic reuse across sessions.
                 </span>
               </li>
-              <li className="flex items-start gap-1.5">
-                <span className="mt-px shrink-0">•</span>
+              <li className="stg:flex stg:items-start stg:gap-1.5">
+                <span className="stg:mt-px stg:shrink-0">•</span>
                 <span>
                   Provide them as{" "}
-                  <strong className="font-medium">session variables</strong>{" "}
+                  <strong className="stg:font-medium">session variables</strong>{" "}
                   when sending a message.
                 </span>
               </li>