frontend support cdp for task and workflow (#3231)

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -90,6 +90,7 @@ function createTaskRequestObject(
     extracted_information_schema: extractedInformationSchema,
     extra_http_headers: extraHttpHeaders,
     totp_identifier: transform(formValues.totpIdentifier),
+    browser_address: transform(formValues.cdpAddress),
     error_code_mapping: errorCodeMapping,
     max_screenshot_scrolls: formValues.maxScreenshotScrolls,
     include_action_history_in_verification:
@@ -127,6 +128,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
       maxStepsOverride: initialValues.maxStepsOverride ?? null,
       proxyLocation: initialValues.proxyLocation ?? ProxyLocation.Residential,
       maxScreenshotScrolls: initialValues.maxScreenshotScrolls ?? null,
+      cdpAddress: initialValues.cdpAddress ?? null,
     },
   });
   const { errors } = useFormState({ control: form.control });
@@ -695,6 +697,35 @@ function CreateNewTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="cdpAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Browser Address</h1>
+                            <h2 className="text-base text-slate-400">
+                              The address of the Browser server to use for the
+                              task run.
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder="http://127.0.0.1:9222"
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
               </div>
             </div>
           )}

skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx

@@ -64,6 +64,7 @@ function CreateNewTaskFormPage() {
             includeActionHistoryInVerification: null,
             maxScreenshotScrolls: null,
             extraHttpHeaders: null,
+            cdpAddress: null,
           }}
         />
       </div>
@@ -137,6 +138,7 @@ function CreateNewTaskFormPage() {
           extraHttpHeaders: data.extra_http_headers
             ? JSON.stringify(data.extra_http_headers)
             : null,
+          cdpAddress: null,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -155,6 +155,7 @@ function PromptBox() {
     ProxyLocation.Residential,
   );
   const [browserSessionId, setBrowserSessionId] = useState<string | null>(null);
+  const [cdpAddress, setCdpAddress] = useState<string | null>(null);
   const [publishWorkflow, setPublishWorkflow] = useState(false);
   const [totpIdentifier, setTotpIdentifier] = useState("");
   const [maxStepsOverride, setMaxStepsOverride] = useState<string | null>(null);
@@ -175,6 +176,7 @@ function PromptBox() {
           webhook_callback_url: webhookCallbackUrl,
           proxy_location: proxyLocation,
           browser_session_id: browserSessionId,
+          browser_address: cdpAddress,
           totp_identifier: totpIdentifier,
           publish_workflow: publishWorkflow,
           max_screenshot_scrolls: maxScreenshotScrolls,
@@ -412,6 +414,22 @@ function PromptBox() {
                       }}
                     />
                   </div>
+                  <div className="flex gap-16">
+                    <div className="w-48 shrink-0">
+                      <div className="text-sm">Browser Address</div>
+                      <div className="text-xs text-slate-400">
+                        The address of the Browser server to use for the task
+                        run.
+                      </div>
+                    </div>
+                    <Input
+                      value={cdpAddress ?? ""}
+                      placeholder="http://127.0.0.1:9222"
+                      onChange={(event) => {
+                        setCdpAddress(event.target.value);
+                      }}
+                    />
+                  </div>
                   <div className="flex gap-16">
                     <div className="w-48 shrink-0">
                       <div className="text-sm">2FA Identifier</div>

skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx

@@ -48,6 +48,7 @@ function RetryTask() {
           extraHttpHeaders: task.request.extra_http_headers
             ? JSON.stringify(task.request.extra_http_headers)
             : null,
+          cdpAddress: task.request.browser_address ?? null,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts

@@ -13,6 +13,7 @@ const createNewTaskFormSchemaBase = z.object({
   extraHttpHeaders: z.string().or(z.null()),
   maxStepsOverride: z.number().or(z.null()).optional(),
   totpIdentifier: z.string().or(z.null()),
+  cdpAddress: z.string().or(z.null()),
   errorCodeMapping: z.string().or(z.null()),
   proxyLocation: z.nativeEnum(ProxyLocation).or(z.null()),
   includeActionHistoryInVerification: z.boolean().or(z.null()).default(false),