add Use Script Cache toggle; align toggles to right-hand side (#3121)

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -18,6 +18,7 @@ import {
 import { flushSync } from "react-dom";
 import Draggable from "react-draggable";
 
+import { OrgWalled } from "./Orgwalled";
 import {
   Tooltip,
   TooltipContent,
@@ -627,7 +628,11 @@ function FloatingWindow({
                         onClick={toggleMaximized}
                       />
                     )}
-                    {showPowerButton && <PowerButton onClick={() => cycle()} />}
+                    {showPowerButton && (
+                      <OrgWalled className="flex items-center justify-center">
+                        <PowerButton onClick={() => cycle()} />
+                      </OrgWalled>
+                    )}
                   </div>
                   <div className="ml-auto">{title}</div>
                   {showReloadButton && (

skyvern-frontend/src/components/Orgwalled.tsx

@@ -0,0 +1,46 @@
+import { useIsSkyvernUser } from "@/hooks/useIsSkyvernUser";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { cn } from "@/util/utils";
+
+function OrgWalled({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const isSkyvernUser = useIsSkyvernUser();
+
+  if (!isSkyvernUser) {
+    return null;
+  }
+
+  // Wrap children with visual indication for org-walled features
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            className={cn(
+              "relative rounded-md border-2 border-dashed border-yellow-400 p-2",
+              className,
+            )}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>This feature is only available to Skyvern organization members</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { OrgWalled };