@burdenoff/fluidgrids-fe-sdk 2026.1024.2 → 2026.1025.1

package/dist/{chunk-IZMYI6QO.js → chunk-7LJ3DYEG.js}

@@ -2,16 +2,16 @@ import { deepClone, applyTemplateInputs } from './chunk-GEMNVFPK.js';
 import { Input as Input$1 } from './chunk-IEVSFCFS.js';
 import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter } from './chunk-YXMFRQYV.js';
 import { Badge as Badge$1, Button } from './chunk-BQXVT32O.js';
-import { QuotaExhaustedDialog } from './chunk-GCOWR7J4.js';
-import { EntityTagPicker } from './chunk-XFVNTWM2.js';
-import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useLazyWorkflowDefinition, useDeactivateWorkflow } from './chunk-S5ZKDRBV.js';
+import { QuotaExhaustedDialog } from './chunk-543CP5ZX.js';
+import { EntityTagPicker } from './chunk-BNA2HFGB.js';
+import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useLazyWorkflowDefinition, useDeactivateWorkflow } from './chunk-FOBH2IH2.js';
 import { FluidGridsDocsLink } from './chunk-4VJ3MDOV.js';
-import { RUNS_QUOTA_NAME, throwIfResultError, useFlowStore, BILLING_PLANS_PATH, emitUpgradeClicked, FluidGridsContext, emitWorkflowCreated, emitTemplateUsed, ensureNodeConfigsLoaded, NODE_CONFIGS, registerWorkflowNodeTypes, emitNodeInstalled, useNodeExecution, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useIsValidConnection, refetchStoreNodes, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, STICKY_NOTE_TYPE, fieldsFromValue, getNodeDetail, useFluidGridsAnalytics, buildOperationSeed, isNodeTrigger, buildStickyNode, fieldsFromIO, ConnectionSelector, structuredParameterType, nodeAccent, NodeTypeIcon, NODES_METADATA, resolveNodeOperation, declaredOutputFields, pathToExpression, ExpressionEditor, formatParameterValue, parseParameterValue, isNodeConfigsInitialized, resolveUiSpec, isImageIcon, NODES, synchronizeOperationUpdate, NodePropertyPanel, openRunQuotaUpgradePrompt, describeOperationError, isTriggerOperation, canRenderOperationPanel, resolveOperationName, resolveInputHandles } from './chunk-T7X3HDNX.js';
+import { RUNS_QUOTA_NAME, throwIfResultError, useFlowStore, BILLING_PLANS_PATH, emitUpgradeClicked, FluidGridsContext, emitWorkflowCreated, emitTemplateUsed, ensureNodeConfigsLoaded, NODE_CONFIGS, registerWorkflowNodeTypes, emitNodeInstalled, useNodeExecution, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useIsValidConnection, refetchStoreNodes, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, STICKY_NOTE_TYPE, fieldsFromValue, getNodeDetail, useFluidGridsAnalytics, buildOperationSeed, isNodeTrigger, buildStickyNode, fieldsFromIO, ConnectionSelector, structuredParameterType, nodeAccent, NodeTypeIcon, NODES_METADATA, resolveNodeOperation, declaredOutputFields, pathToExpression, ExpressionEditor, formatParameterValue, parseParameterValue, isNodeConfigsInitialized, resolveUiSpec, isImageIcon, NODES, synchronizeOperationUpdate, NodePropertyPanel, openRunQuotaUpgradePrompt, describeOperationError, isTriggerOperation, canRenderOperationPanel, resolveOperationName, resolveInputHandles } from './chunk-FWMFZKTI.js';
 import { cn } from './chunk-JL7CASN5.js';
 import { getGlobalStoreClient } from './chunk-PXIFUMLA.js';
 import { getFluidGridsConfig } from './chunk-CY6KX4RG.js';
 import { GetMyNodeInstallationsDocument, BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument, GetNodeInstallableVersionsDocument } from './chunk-WBH2XEWO.js';
-import { WorkspaceRunsQuotaDocument, NodeSchemaIntrospectionDocument, useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, WorkflowGenerationTemplatesDocument, WorkflowGenerationDocument, GenerateWorkflowFromPromptDocument, useRunFromNodeEligibilityQuery, EventRegistrationsDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-GD7CSKFD.js';
+import { WorkspaceRunsQuotaDocument, NodeSchemaIntrospectionDocument, useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, WorkflowGenerationTemplatesDocument, WorkflowGenerationDocument, GenerateWorkflowFromPromptDocument, WorkflowEnvironmentsDocument, WorkflowPromotionRequestsDocument, DeployWorkflowVersionToDevDocument, RequestWorkflowPromotionDocument, ApproveWorkflowPromotionDocument, RejectWorkflowPromotionDocument, CancelWorkflowPromotionDocument, UpdateWorkflowEnvironmentPolicyDocument, useRunFromNodeEligibilityQuery, EventRegistrationsDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-FLKTTSRJ.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { getFluidGridsClient, waitForFluidGridsClient, getFluidGridsClientSafe } from './chunk-NTWG3CJX.js';
 import * as React3 from 'react';
@@ -19,13 +19,13 @@ import React3__default, { forwardRef, lazy, memo, createContext, useState, useRe
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { gql } from '@apollo/client';
 import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
-import { Card as Card$1, Badge, CardContent as CardContent$1, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button as Button$1, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, Label, Textarea, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, TooltipProvider, DropdownMenuItem, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Popover, PopoverTrigger, PopoverContent, Tooltip, TooltipTrigger, TooltipContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, DropdownMenuLabel, DropdownMenuSeparator } from '@burdenoff/fe-libs/ui';
+import { Card as Card$1, Badge, CardContent as CardContent$1, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button as Button$1, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, Label, Textarea, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, TooltipProvider, Switch, DropdownMenuItem, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Popover, PopoverTrigger, PopoverContent, Tooltip, TooltipTrigger, TooltipContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, DropdownMenuLabel, DropdownMenuSeparator } from '@burdenoff/fe-libs/ui';
 import { Link, useNavigate, useParams } from 'react-router';
 import { useEventBus } from '@burdenoff/fe-libs/shared/events';
 import { useQuery, useMutation } from '@apollo/client/react';
 import { gql as gql$1 } from '@apollo/client/core';
 import 'jszip';
-import { Sparkles, Star, Download, Eye, Loader2, History, GitCompareArrows, Play, RotateCcw, Trash2, Maximize2, Undo2, Redo2, LayoutGrid, Keyboard, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
+import { Sparkles, Star, Download, Eye, Loader2, History, GitCompareArrows, Play, RotateCcw, Trash2, Layers, Upload, Rocket, ArrowRight, Check, X, Undo2, Maximize2, Redo2, LayoutGrid, Keyboard, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, AlertTriangle } from 'lucide-react';
 import { Icon } from '@iconify/react';
 import { toast } from 'sonner';
 import { useShallow, shallow } from 'zustand/shallow';
@@ -6456,8 +6456,8 @@ var reducer = (state, action) => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast11) => {
-          addToRemoveQueue(toast11.id);
+        state.toasts.forEach((toast12) => {
+          addToRemoveQueue(toast12.id);
         });
       }
       return {
@@ -7833,7 +7833,7 @@ function VisualMapperContent({
   mapping,
   onMappingChange
 }) {
-  const { toast: toast11 } = useToast();
+  const { toast: toast12 } = useToast();
   const tr = useTr();
   const reactFlowWrapper = useRef(null);
   const [selectedSourceNode, setSelectedSourceNode] = useState(null);
@@ -7853,7 +7853,7 @@ function VisualMapperContent({
         targetOperation
       );
       if (generatedNodes.length === 0) {
-        toast11({
+        toast12({
           title: tr(
             "fluidgrids.builder.visualMapper.noFieldsFoundTitle",
             "No fields found"
@@ -7879,7 +7879,7 @@ function VisualMapperContent({
     targetNode,
     targetOperation,
     setNodes,
-    toast11,
+    toast12,
     tr
   ]);
   useEffect(() => {
@@ -7986,7 +7986,7 @@ function VisualMapperContent({
         }
         onMappingChange(updatedMapping);
         if (isCompatible) {
-          toast11({
+          toast12({
             title: tr(
               "fluidgrids.builder.visualMapper.mappingCreatedTitle",
               "Mapping created"
@@ -7994,7 +7994,7 @@ function VisualMapperContent({
             description: `Mapped ${sourcePath} (${sourceType}) to ${targetPath} (${targetType})`
           });
         } else {
-          toast11({
+          toast12({
             title: tr(
               "fluidgrids.builder.visualMapper.typeMismatchTitle",
               "Type mismatch warning"
@@ -8004,7 +8004,7 @@ function VisualMapperContent({
           });
         }
       } else {
-        toast11({
+        toast12({
           title: tr(
             "fluidgrids.builder.visualMapper.invalidMappingTitle",
             "Invalid mapping"
@@ -8017,7 +8017,7 @@ function VisualMapperContent({
         });
       }
     },
-    [nodes, mapping, onMappingChange, toast11, tr, setEdges]
+    [nodes, mapping, onMappingChange, toast12, tr, setEdges]
   );
   const onEdgeDelete = useCallback(
     (edge) => {
@@ -8074,7 +8074,7 @@ function VisualMapperContent({
   const handleSaveMappingDialog = (expression, targetFieldName) => {
     const targetPath = targetFieldName || selectedTargetNode?.data?.path;
     if (!targetPath) {
-      toast11({
+      toast12({
         title: tr(
           "fluidgrids.builder.visualMapper.noTargetFieldTitle",
           "No target field specified"
@@ -8106,7 +8106,7 @@ function VisualMapperContent({
     }
     onMappingChange(updatedMapping);
     const mappingType = detectMappingType(expression);
-    toast11({
+    toast12({
       title: `${mappingType.charAt(0).toUpperCase() + mappingType.slice(1)} mapping created`,
       description: `${tr("fluidgrids.builder.visualMapper.appliedMappingTo", "Applied mapping to")} ${targetPath}`
     });
@@ -8405,7 +8405,7 @@ function MappingEditor({
   setEdges,
   edgeId
 }) {
-  const { toast: toast11 } = useToast();
+  const { toast: toast12 } = useToast();
   const tr = useTr();
   const [mappingJson, setMappingJson] = useState({});
   const [jsonDataString, setJsonDataString] = useState(
@@ -8529,7 +8529,7 @@ function MappingEditor({
   const handleSaveMapping = () => {
     try {
       checkJsonValidity();
-      toast11({
+      toast12({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingSavedTitle",
           "Mapping saved"
@@ -8540,7 +8540,7 @@ function MappingEditor({
         )
       });
     } catch (error) {
-      toast11({
+      toast12({
         title: tr(
           "fluidgrids.builder.mappingEditor.errorSavingTitle",
           "Error saving mapping"
@@ -8559,7 +8559,7 @@ function MappingEditor({
       const parsedData = checkJsonValidity();
       const result = await applyMapping(parsedData, sampleInput);
       setPreviewOutput(result);
-      toast11({
+      toast12({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingTestedTitle",
           "Mapping tested"
@@ -8571,7 +8571,7 @@ function MappingEditor({
       });
     } catch (error) {
       console.error("Test mapping error:", error);
-      toast11({
+      toast12({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingTestFailedTitle",
           "Mapping test failed"
@@ -19726,6 +19726,862 @@ function VersionHistoryPanel({ className }) {
     )
   ] });
 }
+var HISTORY_LIMIT = 20;
+function messageOf(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function useWorkflowEnvironments(workflowKey) {
+  const [view, setView] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const keyRef = useRef(workflowKey);
+  keyRef.current = workflowKey;
+  const refetch = useCallback(async () => {
+    if (!workflowKey) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const [environments, promotions] = await Promise.all([
+        client.query({
+          query: WorkflowEnvironmentsDocument,
+          variables: { workflowKey },
+          fetchPolicy: "network-only"
+        }),
+        client.query({
+          query: WorkflowPromotionRequestsDocument,
+          variables: { workflowKey, limit: HISTORY_LIMIT },
+          fetchPolicy: "network-only"
+        })
+      ]);
+      throwIfResultError(environments);
+      throwIfResultError(promotions);
+      if (keyRef.current !== workflowKey) return;
+      setView(environments.data?.workflowEnvironments ?? null);
+      setHistory(promotions.data?.workflowPromotionRequests ?? []);
+    } catch (err) {
+      if (keyRef.current === workflowKey) setError(messageOf(err));
+    } finally {
+      if (keyRef.current === workflowKey) setLoading(false);
+    }
+  }, [workflowKey]);
+  useEffect(() => {
+    setView(null);
+    setHistory([]);
+  }, [workflowKey]);
+  const deployToDev = useCallback(
+    async (version) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: DeployWorkflowVersionToDevDocument,
+        variables: { workflowKey, version }
+      });
+      throwIfResultError(result);
+      await refetch();
+    },
+    [workflowKey, refetch]
+  );
+  const requestPromotion = useCallback(
+    async (target, note) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: RequestWorkflowPromotionDocument,
+        variables: {
+          input: {
+            workflowKey,
+            toEnvironment: target,
+            note: note?.trim() || void 0
+          }
+        }
+      });
+      throwIfResultError(result);
+      const request = result.data?.requestWorkflowPromotion;
+      if (!request) throw new Error("The promotion request returned no result");
+      await refetch();
+      return request;
+    },
+    [workflowKey, refetch]
+  );
+  const approve = useCallback(
+    async (id, note) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: ApproveWorkflowPromotionDocument,
+        variables: { id, note: note?.trim() || void 0 }
+      });
+      throwIfResultError(result);
+      await refetch();
+    },
+    [refetch]
+  );
+  const reject = useCallback(
+    async (id, note) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: RejectWorkflowPromotionDocument,
+        variables: { id, note: note?.trim() || void 0 }
+      });
+      throwIfResultError(result);
+      await refetch();
+    },
+    [refetch]
+  );
+  const cancel = useCallback(
+    async (id) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: CancelWorkflowPromotionDocument,
+        variables: { id }
+      });
+      throwIfResultError(result);
+      await refetch();
+    },
+    [refetch]
+  );
+  const updatePolicy = useCallback(
+    async (changes) => {
+      const result = await getFluidGridsClient().mutate({
+        mutation: UpdateWorkflowEnvironmentPolicyDocument,
+        variables: { input: changes }
+      });
+      throwIfResultError(result);
+      await refetch();
+    },
+    [refetch]
+  );
+  return {
+    view,
+    history,
+    loading,
+    error,
+    refetch,
+    deployToDev,
+    requestPromotion,
+    approve,
+    reject,
+    cancel,
+    updatePolicy
+  };
+}
+
+// src/builder/lib/workflow-environments.ts
+var ENVIRONMENT_ORDER = [
+  "DEV",
+  "STAGING",
+  "PROD"
+];
+function promotionTargetOf(environment) {
+  if (environment === "DEV") return "STAGING";
+  if (environment === "STAGING") return "PROD";
+  return null;
+}
+function promotionSourceOf(target) {
+  return target === "STAGING" ? "DEV" : "STAGING";
+}
+function promotionNeedsApproval(policy, target) {
+  return target === "PROD" ? policy.requireProdApproval : policy.requireStagingApproval;
+}
+function promotionBlocker(environments, pending, target) {
+  const source = environments.find(
+    (state) => state.environment === promotionSourceOf(target)
+  );
+  const current = environments.find((state) => state.environment === target);
+  if (!source?.version || !source.workflowDefinitionId) return "sourceEmpty";
+  if (!source.available) return "sourceUnavailable";
+  if (current?.available && current.workflowDefinitionId === source.workflowDefinitionId) {
+    return "alreadyDeployed";
+  }
+  if (pending.some((request) => request.toEnvironment === target)) {
+    return "pending";
+  }
+  return null;
+}
+function orderEnvironments(environments) {
+  return [...environments].sort(
+    (a, b) => ENVIRONMENT_ORDER.indexOf(a.environment) - ENVIRONMENT_ORDER.indexOf(b.environment)
+  );
+}
+var NOTE_MAX = 2e3;
+function EnvironmentsPanel({
+  className,
+  compact = false
+}) {
+  const tr = useTr();
+  const params = useParams();
+  const workflowKey = params?.id ?? "";
+  const currentVersion = params?.version ?? "";
+  const setWorkflow = useFlowStore((s) => s.actions.setWorkflow);
+  const openStatus = useFlowStore((s) => s.workflow.status);
+  const {
+    view,
+    history,
+    loading,
+    error,
+    refetch,
+    deployToDev,
+    requestPromotion,
+    approve,
+    reject,
+    cancel,
+    updatePolicy
+  } = useWorkflowEnvironments(workflowKey);
+  const [busy, setBusy] = useState(null);
+  const [dialog, setDialog] = useState(null);
+  const [note, setNote] = useState("");
+  const envLabel = (environment) => {
+    if (environment === "DEV")
+      return tr("fluidgrids.builder.environments.dev", "Development");
+    if (environment === "STAGING")
+      return tr("fluidgrids.builder.environments.staging", "Staging");
+    return tr("fluidgrids.builder.environments.prod", "Production");
+  };
+  const blockerText = (blocker, source) => {
+    switch (blocker) {
+      case "sourceEmpty":
+        return `${tr("fluidgrids.builder.environments.blockedEmpty", "Nothing is deployed to")} ${envLabel(source)}`;
+      case "sourceUnavailable":
+        return tr(
+          "fluidgrids.builder.environments.blockedDeleted",
+          "The deployed version was deleted"
+        );
+      case "alreadyDeployed":
+        return tr(
+          "fluidgrids.builder.environments.blockedSame",
+          "Already deployed there"
+        );
+      default:
+        return tr(
+          "fluidgrids.builder.environments.blockedPending",
+          "A promotion is already waiting for approval"
+        );
+    }
+  };
+  const config = getFluidGridsConfig();
+  const actorInputs = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const state of view?.environments ?? []) {
+      if (state.deployedById) ids.add(state.deployedById);
+    }
+    for (const request of view?.pendingPromotions ?? []) {
+      ids.add(request.requestedById);
+    }
+    for (const item of history) {
+      ids.add(item.requestedById);
+      if (item.reviewedById) ids.add(item.reviewedById);
+    }
+    return [...ids].map((actorId) => ({ actorId, actorType: "user" }));
+  }, [view, history]);
+  const actorProfiles = useActorProfiles(actorInputs, {
+    workspaceId: config.workspaceId || void 0,
+    orgId: config.organizationId,
+    authToken: config.authToken
+  });
+  const nameOf = (actorId) => {
+    if (!actorId) return null;
+    return actorProfiles[actorId]?.displayName ?? buildActorFallback({ actorId, actorType: "user" }).displayName;
+  };
+  const environments = orderEnvironments(view?.environments ?? []);
+  const pending = view?.pendingPromotions ?? [];
+  const policy = view?.policy;
+  const dev = environments.find((state) => state.environment === "DEV");
+  const afterProdChange = (promotedVersion) => {
+    if (promotedVersion === currentVersion) {
+      setWorkflow({ status: "ACTIVE" });
+    } else if (openStatus === "ACTIVE") {
+      setWorkflow({ status: "ARCHIVED" });
+    }
+  };
+  const run = async (key, action, errorTitle) => {
+    setBusy(key);
+    try {
+      await action();
+    } catch (err) {
+      toast.error(errorTitle, {
+        description: err instanceof Error ? err.message : String(err)
+      });
+    } finally {
+      setBusy(null);
+    }
+  };
+  const handleDeployToDev = () => run(
+    "deploy",
+    async () => {
+      await deployToDev(currentVersion);
+      toast.success(
+        `${currentVersion} ${tr("fluidgrids.builder.environments.deployedToDev", "deployed to Development")}`,
+        { dismissible: true }
+      );
+    },
+    tr(
+      "fluidgrids.builder.environments.deployError",
+      "Failed to deploy to Development"
+    )
+  );
+  const handleConfirmDialog = async () => {
+    if (!dialog) return;
+    const current = dialog;
+    const text = note;
+    setDialog(null);
+    setNote("");
+    if (current.kind === "promote") {
+      await run(
+        `promote:${current.target}`,
+        async () => {
+          const request = await requestPromotion(current.target, text);
+          if (request.status === "PENDING") {
+            toast.success(
+              tr(
+                "fluidgrids.builder.environments.requested",
+                "Promotion requested"
+              ),
+              {
+                description: `${request.version} \u2192 ${envLabel(current.target)} ${tr("fluidgrids.builder.environments.awaitingApproval", "is waiting for approval")}`,
+                dismissible: true
+              }
+            );
+          } else {
+            toast.success(
+              `${request.version} ${tr("fluidgrids.builder.environments.promotedTo", "promoted to")} ${envLabel(current.target)}`,
+              { dismissible: true }
+            );
+            if (current.target === "PROD") afterProdChange(request.version);
+          }
+        },
+        tr("fluidgrids.builder.environments.promoteError", "Promotion failed")
+      );
+      return;
+    }
+    if (current.kind === "approve") {
+      await run(
+        `approve:${current.id}`,
+        async () => {
+          await approve(current.id, text);
+          toast.success(
+            `${current.label} ${tr("fluidgrids.builder.environments.approved", "approved and deployed")}`,
+            { dismissible: true }
+          );
+          if (current.target === "PROD") afterProdChange(current.version);
+        },
+        tr("fluidgrids.builder.environments.approveError", "Approval failed")
+      );
+      return;
+    }
+    await run(
+      `reject:${current.id}`,
+      async () => {
+        await reject(current.id, text);
+        toast.success(
+          `${current.label} ${tr("fluidgrids.builder.environments.rejected", "rejected")}`,
+          { dismissible: true }
+        );
+      },
+      tr("fluidgrids.builder.environments.rejectError", "Rejection failed")
+    );
+  };
+  const handleCancel = (id) => run(
+    `cancel:${id}`,
+    async () => {
+      await cancel(id);
+      toast.success(
+        tr(
+          "fluidgrids.builder.environments.canceled",
+          "Promotion request withdrawn"
+        ),
+        { dismissible: true }
+      );
+    },
+    tr(
+      "fluidgrids.builder.environments.cancelError",
+      "Could not withdraw the request"
+    )
+  );
+  const handlePolicy = (changes) => run(
+    "policy",
+    async () => {
+      await updatePolicy(changes);
+      toast.success(
+        tr(
+          "fluidgrids.builder.environments.policySaved",
+          "Promotion policy saved"
+        ),
+        { dismissible: true }
+      );
+    },
+    tr(
+      "fluidgrids.builder.environments.policyError",
+      "Could not save the promotion policy"
+    )
+  );
+  const statusVariant = (status) => {
+    if (status === "APPLIED") return "default";
+    if (status === "PENDING") return "secondary";
+    if (status === "REJECTED") return "destructive";
+    return "outline";
+  };
+  const dialogTitle = (() => {
+    if (!dialog) return "";
+    if (dialog.kind === "promote") {
+      const needsApproval = policy ? promotionNeedsApproval(policy, dialog.target) : true;
+      return needsApproval ? `${tr("fluidgrids.builder.environments.requestTitle", "Request promotion to")} ${envLabel(dialog.target)}` : `${tr("fluidgrids.builder.environments.promoteTitle", "Promote to")} ${envLabel(dialog.target)}`;
+    }
+    return dialog.kind === "approve" ? `${tr("fluidgrids.builder.environments.approveTitle", "Approve")} ${dialog.label}` : `${tr("fluidgrids.builder.environments.rejectTitle", "Reject")} ${dialog.label}`;
+  })();
+  const dialogBody = (() => {
+    if (!dialog) return "";
+    if (dialog.kind === "promote") {
+      const source = dialog.target === "PROD" ? "STAGING" : "DEV";
+      const version = environments.find((state) => state.environment === source)?.version ?? "";
+      const needsApproval = policy ? promotionNeedsApproval(policy, dialog.target) : true;
+      const base = `${version} ${tr("fluidgrids.builder.environments.moves", "moves from")} ${envLabel(source)} ${tr("fluidgrids.builder.environments.to", "to")} ${envLabel(dialog.target)}.`;
+      const prodNote = dialog.target === "PROD" ? ` ${tr("fluidgrids.builder.environments.prodNote", "In Production it becomes the active version that webhooks, schedules and other triggers run.")}` : "";
+      const gate = needsApproval ? ` ${tr("fluidgrids.builder.environments.gateNote", "The workspace policy holds this promotion until someone with publish rights approves it.")}` : "";
+      return base + prodNote + gate;
+    }
+    return dialog.kind === "approve" ? tr(
+      "fluidgrids.builder.environments.approveBody",
+      "Approving deploys the version to its target environment now. A production promotion makes it the active version."
+    ) : tr(
+      "fluidgrids.builder.environments.rejectBody",
+      "The version stays where it is. The requester can ask again later."
+    );
+  })();
+  return /* @__PURE__ */ jsxs(Sheet, { onOpenChange: (open) => open && void refetch(), children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        "data-tour": "fluidgrids-builder-environments",
+        variant: "outline",
+        size: compact ? "icon" : "sm",
+        className: cn$1(!compact && "flex gap-1", className),
+        "aria-label": tr(
+          "fluidgrids.builder.environments.triggerButton",
+          "Environments"
+        ),
+        disabled: !workflowKey,
+        children: [
+          /* @__PURE__ */ jsx(Layers, { className: "size-4" }),
+          !compact && tr("fluidgrids.builder.environments.triggerButton", "Environments")
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-[380px] sm:w-[460px] overflow-y-auto",
+        "data-testid": "fluidgrids-environments-panel",
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { children: [
+            /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Layers, { className: "size-5" }),
+              tr("fluidgrids.builder.environments.title", "Environments")
+            ] }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: tr(
+              "fluidgrids.builder.environments.description",
+              "Move a version from Development to Staging to Production. Production is the active version that automatic triggers run."
+            ) })
+          ] }),
+          loading && !view ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-4 animate-spin" }),
+            tr("fluidgrids.builder.environments.loading", "Loading...")
+          ] }) : error && !view ? /* @__PURE__ */ jsxs("div", { className: "py-6 text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[var(--color-status-error-text)]", children: error }),
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "mt-3",
+                onClick: () => void refetch(),
+                children: tr("fluidgrids.builder.environments.retry", "Retry")
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-5 pb-6", children: [
+            /* @__PURE__ */ jsx("ol", { className: "space-y-2", "aria-label": "Environments", children: environments.map((state) => {
+              const target = promotionTargetOf(state.environment);
+              const blocker = target ? promotionBlocker(environments, pending, target) : null;
+              const needsApproval = target && policy ? promotionNeedsApproval(policy, target) : false;
+              const deployer = nameOf(state.deployedById);
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "rounded-lg border border-border p-3",
+                  "data-testid": `fluidgrids-env-${state.environment}`,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: envLabel(state.environment) }),
+                      state.version ? /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          variant: state.available ? "default" : "outline",
+                          className: "h-5 px-1.5 py-0 font-mono text-[10px]",
+                          children: state.version
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: tr(
+                        "fluidgrids.builder.environments.empty",
+                        "Nothing deployed"
+                      ) }),
+                      state.version === currentVersion && currentVersion !== "" && /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          variant: "outline",
+                          className: "h-5 border-primary px-1.5 py-0 text-[10px] text-primary",
+                          children: tr(
+                            "fluidgrids.builder.environments.openVersion",
+                            "Open"
+                          )
+                        }
+                      )
+                    ] }) }),
+                    state.version && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: !state.available ? tr(
+                      "fluidgrids.builder.environments.deleted",
+                      "This version was deleted after it was deployed."
+                    ) : state.outOfBand ? tr(
+                      "fluidgrids.builder.environments.outOfBand",
+                      "Activated directly, not through a promotion."
+                    ) : [
+                      state.promotedFrom ? `${tr("fluidgrids.builder.environments.from", "From")} ${envLabel(state.promotedFrom)}` : null,
+                      deployer,
+                      relativeTime(state.deployedAt)
+                    ].filter(Boolean).join(" \xB7 ") }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+                      state.environment === "DEV" && currentVersion && /* @__PURE__ */ jsxs(
+                        Button$1,
+                        {
+                          variant: "outline",
+                          size: "sm",
+                          className: "h-7 gap-1 text-xs",
+                          disabled: busy !== null || dev?.version === currentVersion && dev.available,
+                          onClick: () => void handleDeployToDev(),
+                          children: [
+                            busy === "deploy" ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "size-3.5" }),
+                            tr(
+                              "fluidgrids.builder.environments.deployOpen",
+                              "Deploy"
+                            ),
+                            " ",
+                            currentVersion
+                          ]
+                        }
+                      ),
+                      target && /* @__PURE__ */ jsxs(
+                        Button$1,
+                        {
+                          size: "sm",
+                          variant: target === "PROD" ? "default" : "secondary",
+                          className: "h-7 gap-1 text-xs",
+                          disabled: busy !== null || blocker !== null,
+                          title: blocker ? blockerText(blocker, state.environment) : void 0,
+                          onClick: () => {
+                            setNote("");
+                            setDialog({ kind: "promote", target });
+                          },
+                          children: [
+                            busy === `promote:${target}` ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : target === "PROD" ? /* @__PURE__ */ jsx(Rocket, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" }),
+                            needsApproval ? tr(
+                              "fluidgrids.builder.environments.requestTo",
+                              "Request"
+                            ) : tr(
+                              "fluidgrids.builder.environments.promoteTo",
+                              "Promote to"
+                            ),
+                            " ",
+                            envLabel(target)
+                          ]
+                        }
+                      )
+                    ] }),
+                    target && blocker && blocker !== "sourceEmpty" && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-muted-foreground", children: blockerText(blocker, state.environment) })
+                  ]
+                },
+                state.environment
+              );
+            }) }),
+            /* @__PURE__ */ jsxs("section", { "aria-labelledby": "fg-env-pending", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id: "fg-env-pending",
+                  className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                  children: tr(
+                    "fluidgrids.builder.environments.pendingTitle",
+                    "Waiting for approval"
+                  )
+                }
+              ),
+              pending.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tr(
+                "fluidgrids.builder.environments.pendingEmpty",
+                "No promotions are waiting."
+              ) }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: pending.map((request) => {
+                const label = `${request.version} \u2192 ${envLabel(request.toEnvironment)}`;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "rounded-lg border border-border bg-muted/30 p-3",
+                    "data-testid": "fluidgrids-env-pending",
+                    children: [
+                      /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+                        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.version }),
+                        " ",
+                        envLabel(request.fromEnvironment),
+                        " \u2192",
+                        " ",
+                        envLabel(request.toEnvironment)
+                      ] }),
+                      /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+                        nameOf(request.requestedById),
+                        " \xB7",
+                        " ",
+                        relativeTime(request.requestedAt)
+                      ] }),
+                      request.note && /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap text-xs text-foreground", children: request.note }),
+                      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+                        /* @__PURE__ */ jsxs(
+                          Button$1,
+                          {
+                            size: "sm",
+                            className: "h-7 gap-1 text-xs",
+                            disabled: busy !== null,
+                            onClick: () => {
+                              setNote("");
+                              setDialog({
+                                kind: "approve",
+                                id: request.id,
+                                label,
+                                version: request.version,
+                                target: request.toEnvironment
+                              });
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(Check, { className: "size-3.5" }),
+                              tr(
+                                "fluidgrids.builder.environments.approve",
+                                "Approve"
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button$1,
+                          {
+                            size: "sm",
+                            variant: "outline",
+                            className: "h-7 gap-1 text-xs",
+                            disabled: busy !== null,
+                            onClick: () => {
+                              setNote("");
+                              setDialog({
+                                kind: "reject",
+                                id: request.id,
+                                label
+                              });
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(X, { className: "size-3.5" }),
+                              tr(
+                                "fluidgrids.builder.environments.reject",
+                                "Reject"
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button$1,
+                          {
+                            size: "sm",
+                            variant: "ghost",
+                            className: "h-7 gap-1 text-xs",
+                            disabled: busy !== null,
+                            onClick: () => void handleCancel(request.id),
+                            children: [
+                              busy === `cancel:${request.id}` ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Undo2, { className: "size-3.5" }),
+                              tr(
+                                "fluidgrids.builder.environments.withdraw",
+                                "Withdraw"
+                              )
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  request.id
+                );
+              }) })
+            ] }),
+            policy && /* @__PURE__ */ jsxs("section", { "aria-labelledby": "fg-env-policy", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id: "fg-env-policy",
+                  className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                  children: tr(
+                    "fluidgrids.builder.environments.policyTitle",
+                    "Promotion policy (workspace)"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-lg border border-border p-3", children: [
+                [
+                  [
+                    "requireProdApproval",
+                    tr(
+                      "fluidgrids.builder.environments.policyProd",
+                      "Production promotions need approval"
+                    )
+                  ],
+                  [
+                    "requireStagingApproval",
+                    tr(
+                      "fluidgrids.builder.environments.policyStaging",
+                      "Staging promotions need approval"
+                    )
+                  ],
+                  [
+                    "allowSelfApproval",
+                    tr(
+                      "fluidgrids.builder.environments.policySelf",
+                      "Requesters may approve their own promotions"
+                    )
+                  ],
+                  [
+                    "lockDirectActivation",
+                    tr(
+                      "fluidgrids.builder.environments.policyLock",
+                      "Change Production only through promotions"
+                    )
+                  ]
+                ].map(([field, label]) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between gap-3",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Label,
+                        {
+                          htmlFor: `fg-env-policy-${field}`,
+                          className: "text-xs font-normal",
+                          children: label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          id: `fg-env-policy-${field}`,
+                          checked: policy[field],
+                          disabled: busy !== null,
+                          onCheckedChange: (checked) => void handlePolicy({ [field]: checked })
+                        }
+                      )
+                    ]
+                  },
+                  field
+                )),
+                /* @__PURE__ */ jsx("p", { className: "pt-1 text-[11px] text-muted-foreground", children: tr(
+                  "fluidgrids.builder.environments.policyHint",
+                  "Only members with publish rights can approve promotions or change this policy."
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { "aria-labelledby": "fg-env-history", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id: "fg-env-history",
+                  className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                  children: tr(
+                    "fluidgrids.builder.environments.historyTitle",
+                    "Promotion history"
+                  )
+                }
+              ),
+              history.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tr(
+                "fluidgrids.builder.environments.historyEmpty",
+                "No promotions yet."
+              ) }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: history.map((item) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "flex items-start justify-between gap-2 text-xs",
+                  "data-testid": "fluidgrids-env-history",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+                        /* @__PURE__ */ jsx("span", { className: "font-mono", children: item.version }),
+                        " ",
+                        envLabel(item.fromEnvironment),
+                        " \u2192",
+                        " ",
+                        envLabel(item.toEnvironment)
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-muted-foreground", children: [
+                        nameOf(item.requestedById),
+                        item.reviewedById && item.reviewedById !== item.requestedById ? `${tr("fluidgrids.builder.environments.reviewedBy", "reviewed by")} ${nameOf(item.reviewedById)}` : null,
+                        relativeTime(item.requestedAt)
+                      ].filter(Boolean).join(" \xB7 ") })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: statusVariant(item.status),
+                        className: "h-5 shrink-0 px-1.5 py-0 text-[10px]",
+                        children: item.autoApplied ? tr(
+                          "fluidgrids.builder.environments.statusAuto",
+                          "Applied"
+                        ) : item.status === "APPLIED" ? tr(
+                          "fluidgrids.builder.environments.statusApproved",
+                          "Approved"
+                        ) : item.status === "PENDING" ? tr(
+                          "fluidgrids.builder.environments.statusPending",
+                          "Pending"
+                        ) : item.status === "REJECTED" ? tr(
+                          "fluidgrids.builder.environments.statusRejected",
+                          "Rejected"
+                        ) : tr(
+                          "fluidgrids.builder.environments.statusCanceled",
+                          "Withdrawn"
+                        )
+                      }
+                    )
+                  ]
+                },
+                item.id
+              )) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AlertDialog,
+      {
+        open: dialog !== null,
+        onOpenChange: (open) => !open && setDialog(null),
+        children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "z-[120]", children: [
+          /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx(AlertDialogTitle, { children: dialogTitle }),
+            /* @__PURE__ */ jsx(AlertDialogDescription, { children: dialogBody })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "fg-env-note", className: "text-xs", children: tr(
+              "fluidgrids.builder.environments.noteLabel",
+              "Note (optional)"
+            ) }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "fg-env-note",
+                value: note,
+                maxLength: NOTE_MAX,
+                rows: 3,
+                onChange: (event) => setNote(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel, { children: tr("fluidgrids.builder.environments.dialogCancel", "Cancel") }),
+            /* @__PURE__ */ jsx(AlertDialogAction, { onClick: () => void handleConfirmDialog(), children: dialog?.kind === "reject" ? tr("fluidgrids.builder.environments.reject", "Reject") : dialog?.kind === "approve" ? tr("fluidgrids.builder.environments.approve", "Approve") : tr("fluidgrids.builder.environments.confirm", "Confirm") })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
 
 // src/builder/lib/ai-draft.ts
 var AI_DRAFT_POLL_INTERVAL_MS = 2500;
@@ -19825,7 +20681,7 @@ function canvasHasWork(nodes) {
 }
 
 // src/builder/hooks/use-ai-workflow-draft.ts
-function messageOf(error) {
+function messageOf2(error) {
   return error instanceof Error ? error.message : String(error);
 }
 function useAiWorkflowDraft() {
@@ -19882,7 +20738,7 @@ function useAiWorkflowDraft() {
         setIsGenerating(false);
       } catch (pollError) {
         if (run !== runRef.current) return;
-        setError(messageOf(pollError));
+        setError(messageOf2(pollError));
         setIsGenerating(false);
       }
     },
@@ -19919,7 +20775,7 @@ function useAiWorkflowDraft() {
         );
       } catch (startError) {
         if (run !== runRef.current) return;
-        setError(messageOf(startError));
+        setError(messageOf2(startError));
         setIsGenerating(false);
       }
     },
@@ -20626,6 +21482,7 @@ var FlowBuilder = ({ readOnly = false }) => {
         /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 lg:inline-flex items-center gap-2", children: [
           !isReadOnly && /* @__PURE__ */ jsx(AiDraftPanel, {}),
           /* @__PURE__ */ jsx(VersionHistoryPanel, {}),
+          /* @__PURE__ */ jsx(EnvironmentsPanel, {}),
           /* @__PURE__ */ jsx(SaveFlowButton, {}),
           /* @__PURE__ */ jsx(ActivateWorkflowButton, {}),
           /* @__PURE__ */ jsx(
@@ -20647,6 +21504,7 @@ var FlowBuilder = ({ readOnly = false }) => {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 lg:hidden", children: [
           !isReadOnly && /* @__PURE__ */ jsx(AiDraftPanel, { compact: true }),
+          /* @__PURE__ */ jsx(EnvironmentsPanel, { compact: true }),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button$1,