From 309176ef4b316e7641a757bcf46675fef11c9647 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 4 Sep 2025 11:04:28 -0700
Subject: [PATCH] remove orgwalls for caching (#3357) (#3360)

---
 .../src/routes/tasks/create/PromptBox.tsx     |  30 +++--
 .../workflows/editor/WorkflowHeader.tsx       | 105 ++++++++--------
 .../workflows/editor/nodes/NodeActionMenu.tsx |  21 ++--
 .../editor/nodes/StartNode/StartNode.tsx      | 112 +++++++++---------
 4 files changed, 127 insertions(+), 141 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
index 90ee5912..1a91c249 100644
--- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
@@ -48,7 +48,6 @@ import {
   MAX_SCREENSHOT_SCROLLS_DEFAULT,
   MAX_STEPS_DEFAULT,
 } from "@/routes/workflows/editor/nodes/Taskv2Node/types";
-import { OrgWalled } from "@/components/Orgwalled";
 
 function createTemplateTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -471,23 +470,22 @@ function PromptBox() {
                       />
                     </div>
                   </div>
-                  <OrgWalled className="p-0">
-                    <div className="flex gap-16">
-                      <div className="w-48 shrink-0">
-                        <div className="text-sm">Generate Script</div>
-                        <div className="text-xs text-slate-400">
-                          Whether to generate scripts for this task run (on
-                          success).
-                        </div>
+
+                  <div className="flex gap-16">
+                    <div className="w-48 shrink-0">
+                      <div className="text-sm">Generate Script</div>
+                      <div className="text-xs text-slate-400">
+                        Whether to generate scripts for this task run (on
+                        success).
                       </div>
-                      <Switch
-                        checked={generateScript}
-                        onCheckedChange={(checked) => {
-                          setGenerateScript(Boolean(checked));
-                        }}
-                      />
                     </div>
-                  </OrgWalled>
+                    <Switch
+                      checked={generateScript}
+                      onCheckedChange={(checked) => {
+                        setGenerateScript(Boolean(checked));
+                      }}
+                    />
+                  </div>
                   <div className="flex gap-16">
                     <div className="w-48 shrink-0">
                       <div className="text-sm">Publish Workflow</div>
diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
index ae17f4db..cadbc36d 100644
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
@@ -30,7 +30,6 @@ import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
 import { cn } from "@/util/utils";
 import { WorkflowApiResponse } from "../types/workflowTypes";
 import { CacheKeyValuesResponse } from "@/routes/workflows/types/scriptTypes";
-import { OrgWalled } from "@/components/Orgwalled";
 
 interface Dom {
   input: React.MutableRefObject<HTMLInputElement | null>;
@@ -126,64 +125,62 @@ function WorkflowHeader({
       <div className="flex h-full items-center justify-end gap-4">
         {user && workflow.generate_script && (
           // (cacheKeyValues?.total_count ?? 0) > 0 && (
-          <OrgWalled className="p-0">
-            <div
-              tabIndex={1}
-              className="flex max-w-[15rem] items-center justify-center gap-1 rounded-md border border-input pr-1 focus-within:ring-1 focus-within:ring-ring"
-            >
-              <Input
-                ref={dom.input}
-                className="focus-visible:transparent focus-visible:none h-[2.75rem] text-ellipsis whitespace-nowrap border-none focus-visible:outline-none focus-visible:ring-0"
-                onChange={(e) => {
-                  setChosenCacheKeyValue(e.target.value);
-                  onCacheKeyValuesFilter(e.target.value);
-                }}
-                onMouseDown={() => {
-                  if (!cacheKeyValuesPanelOpen) {
-                    onCacheKeyValuesClick();
-                  }
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    const numFiltered = cacheKeyValues?.values?.length ?? 0;
+          <div
+            tabIndex={1}
+            className="flex max-w-[15rem] items-center justify-center gap-1 rounded-md border border-input pr-1 focus-within:ring-1 focus-within:ring-ring"
+          >
+            <Input
+              ref={dom.input}
+              className="focus-visible:transparent focus-visible:none h-[2.75rem] text-ellipsis whitespace-nowrap border-none focus-visible:outline-none focus-visible:ring-0"
+              onChange={(e) => {
+                setChosenCacheKeyValue(e.target.value);
+                onCacheKeyValuesFilter(e.target.value);
+              }}
+              onMouseDown={() => {
+                if (!cacheKeyValuesPanelOpen) {
+                  onCacheKeyValuesClick();
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  const numFiltered = cacheKeyValues?.values?.length ?? 0;
 
-                    if (numFiltered === 1) {
-                      const first = cacheKeyValues?.values?.[0];
-                      if (first) {
-                        setChosenCacheKeyValue(first);
-                        onCacheKeyValueAccept(first);
-                      }
-                      return;
+                  if (numFiltered === 1) {
+                    const first = cacheKeyValues?.values?.[0];
+                    if (first) {
+                      setChosenCacheKeyValue(first);
+                      onCacheKeyValueAccept(first);
                     }
-
-                    setChosenCacheKeyValue(chosenCacheKeyValue);
-                    onCacheKeyValueAccept(chosenCacheKeyValue);
+                    return;
                   }
-                  onCacheKeyValuesKeydown(e);
-                }}
-                placeholder="Code Key Value"
-                value={chosenCacheKeyValue ?? undefined}
-                onBlur={(e) => {
-                  onCacheKeyValuesBlurred(e.target.value);
-                  setChosenCacheKeyValue(e.target.value);
+
+                  setChosenCacheKeyValue(chosenCacheKeyValue);
+                  onCacheKeyValueAccept(chosenCacheKeyValue);
+                }
+                onCacheKeyValuesKeydown(e);
+              }}
+              placeholder="Code Key Value"
+              value={chosenCacheKeyValue ?? undefined}
+              onBlur={(e) => {
+                onCacheKeyValuesBlurred(e.target.value);
+                setChosenCacheKeyValue(e.target.value);
+              }}
+            />
+            {cacheKeyValuesPanelOpen ? (
+              <ChevronUpIcon
+                className="h-6 w-6 cursor-pointer"
+                onClick={onCacheKeyValuesClick}
+              />
+            ) : (
+              <ChevronDownIcon
+                className="h-6 w-6 cursor-pointer"
+                onClick={() => {
+                  dom.input.current?.focus();
+                  onCacheKeyValuesClick();
                 }}
               />
-              {cacheKeyValuesPanelOpen ? (
-                <ChevronUpIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={onCacheKeyValuesClick}
-                />
-              ) : (
-                <ChevronDownIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={() => {
-                    dom.input.current?.focus();
-                    onCacheKeyValuesClick();
-                  }}
-                />
-              )}
-            </div>
-          </OrgWalled>
+            )}
+          </div>
         )}
         {isGlobalWorkflow ? (
           <Button
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/NodeActionMenu.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/NodeActionMenu.tsx
index c641cccf..e022b132 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/NodeActionMenu.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/NodeActionMenu.tsx
@@ -7,7 +7,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
-import { OrgWalled } from "@/components/Orgwalled";
 
 type Props = {
   isDeletable?: boolean;
@@ -45,18 +44,14 @@ function NodeActionMenu({
             Delete Block
           </DropdownMenuItem>
         )}
-        {isScriptable && (
-          <OrgWalled className="p-0">
-            {onShowScript && (
-              <DropdownMenuItem
-                onSelect={() => {
-                  onShowScript();
-                }}
-              >
-                {showScriptText ?? "Show Code"}
-              </DropdownMenuItem>
-            )}
-          </OrgWalled>
+        {isScriptable && onShowScript && (
+          <DropdownMenuItem
+            onSelect={() => {
+              onShowScript();
+            }}
+          >
+            {showScriptText ?? "Show Code"}
+          </DropdownMenuItem>
         )}
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx
index baaee52c..3d9ac490 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx
@@ -30,7 +30,6 @@ import { ModelSelector } from "@/components/ModelSelector";
 import { WorkflowModel } from "@/routes/workflows/types/workflowTypes";
 import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "../Taskv2Node/types";
 import { KeyValueInput } from "@/components/KeyValueInput";
-import { OrgWalled } from "@/components/Orgwalled";
 import { placeholders } from "@/routes/workflows/editor/helpContent";
 import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback";
 import { useWorkflowSettingsStore } from "@/store/WorkflowSettingsStore";
@@ -163,18 +162,16 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
             <div className="relative">
               <div className="absolute right-[-0.5rem] top-[-0.25rem]">
                 <div>
-                  <OrgWalled className="p-0">
-                    <Button variant="link" size="icon" onClick={showAllScripts}>
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <LightningBoltIcon className="h-4 w-4 text-[gold]" />
-                          </TooltipTrigger>
-                          <TooltipContent>Show all code</TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </Button>
-                  </OrgWalled>
+                  <Button variant="link" size="icon" onClick={showAllScripts}>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <LightningBoltIcon className="h-4 w-4 text-[gold]" />
+                        </TooltipTrigger>
+                        <TooltipContent>Show all code</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </Button>
                 </div>
               </div>
               <header className="mb-6 mt-2">Start</header>
@@ -227,58 +224,57 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           }}
                         />
                       </div>
-                      <OrgWalled className="p-0 hover:p-0">
-                        <div className="flex flex-col gap-4">
-                          <div className="space-y-2">
-                            <div className="flex items-center gap-2">
-                              <Label>Generate Code</Label>
-                              <HelpTooltip content="Generate & use cached code for faster execution." />
-                              <Switch
-                                className="ml-auto"
-                                checked={inputs.useScriptCache}
-                                onCheckedChange={(value) => {
-                                  handleChange("useScriptCache", value);
+
+                      <div className="flex flex-col gap-4">
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2">
+                            <Label>Generate Code</Label>
+                            <HelpTooltip content="Generate & use cached code for faster execution." />
+                            <Switch
+                              className="ml-auto"
+                              checked={inputs.useScriptCache}
+                              onCheckedChange={(value) => {
+                                handleChange("useScriptCache", value);
+                              }}
+                            />
+                          </div>
+                        </div>
+                        {inputs.useScriptCache && (
+                          <div className="flex flex-col gap-4 rounded-md bg-slate-elevation4 p-4 pl-4">
+                            <div className="space-y-2">
+                              <div className="flex gap-2">
+                                <Label>Code Key (optional)</Label>
+                                <HelpTooltip content="A static or dynamic key for directing code generation." />
+                              </div>
+                              <WorkflowBlockInputTextarea
+                                nodeId={id}
+                                onChange={(value) => {
+                                  const v = value.length ? value : null;
+                                  handleChange("scriptCacheKey", v);
                                 }}
+                                value={inputs.scriptCacheKey ?? ""}
+                                placeholder={
+                                  placeholders["scripts"]["scriptKey"]
+                                }
+                                className="nopan text-xs"
                               />
                             </div>
-                          </div>
-                          {inputs.useScriptCache && (
-                            <div className="flex flex-col gap-4 rounded-md bg-slate-elevation4 p-4 pl-4">
-                              <div className="space-y-2">
-                                <div className="flex gap-2">
-                                  <Label>Code Key (optional)</Label>
-                                  <HelpTooltip content="A static or dynamic key for directing code generation." />
-                                </div>
-                                <WorkflowBlockInputTextarea
-                                  nodeId={id}
-                                  onChange={(value) => {
-                                    const v = value.length ? value : null;
-                                    handleChange("scriptCacheKey", v);
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <Label>Fallback To AI On Failure</Label>
+                                <HelpTooltip content="If cached code fails, fallback to AI." />
+                                <Switch
+                                  className="ml-auto"
+                                  checked={inputs.aiFallback}
+                                  onCheckedChange={(value) => {
+                                    handleChange("aiFallback", value);
                                   }}
-                                  value={inputs.scriptCacheKey ?? ""}
-                                  placeholder={
-                                    placeholders["scripts"]["scriptKey"]
-                                  }
-                                  className="nopan text-xs"
                                 />
                               </div>
-                              <div className="space-y-2">
-                                <div className="flex items-center gap-2">
-                                  <Label>Fallback To AI On Failure</Label>
-                                  <HelpTooltip content="If cached code fails, fallback to AI." />
-                                  <Switch
-                                    className="ml-auto"
-                                    checked={inputs.aiFallback}
-                                    onCheckedChange={(value) => {
-                                      handleChange("aiFallback", value);
-                                    }}
-                                  />
-                                </div>
-                              </div>
                             </div>
-                          )}
-                        </div>
-                      </OrgWalled>
+                          </div>
+                        )}
+                      </div>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2">
                           <Label>Save &amp; Reuse Session</Label>