From 3293230e6339d439c894b9c6f76aa1e27664e3f5 Mon Sep 17 00:00:00 2001
From: LawyZheng <lawyzheng1106@gmail.com>
Date: Fri, 12 Sep 2025 21:39:15 +0800
Subject: [PATCH] selfhost debugger support part 3 - frontend change (#3420)

---
 skyvern-frontend/src/api/types.ts             |  1 +
 .../routes/workflows/editor/FlowRenderer.tsx  |  8 +-------
 .../src/routes/workflows/editor/Workspace.tsx | 12 ++++++++---
 .../forge/sdk/services/org_auth_service.py    | 20 +++++++++++++------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index 5ef17777..ede37e97 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -296,6 +296,7 @@ export type DebugSessionApiResponse = {
   workflow_permanent_id: string | null;
   created_at: string;
   modified_at: string;
+  vnc_streaming_supported: boolean | null;
 };
 
 export type WorkflowRunApiResponse = {
diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 20e25d5e..067acbd7 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -78,7 +78,6 @@ import {
   layout,
 } from "./workflowEditorUtils";
 import { useAutoPan } from "./useAutoPan";
-import { useUser } from "@/hooks/useUser";
 
 const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0));
 
@@ -256,14 +255,13 @@ function FlowRenderer({
 }: Props) {
   const reactFlowInstance = useReactFlow();
   const debugStore = useDebugStore();
-  const user = useUser().get();
   const { title, initializeTitle } = useWorkflowTitleStore();
   // const [parameters] = useState<ParametersState>(initialParameters);
   const parameters = useWorkflowParametersStore((state) => state.parameters);
   const nodesInitialized = useNodesInitialized();
   const [shouldConstrainPan, setShouldConstrainPan] = useState(false);
   const onNodesChangeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const flowIsConstrained = debugStore.isDebugMode && Boolean(user);
+  const flowIsConstrained = debugStore.isDebugMode;
 
   useEffect(() => {
     if (nodesInitialized) {
@@ -520,10 +518,6 @@ function FlowRenderer({
   };
 
   useOnChange(debugStore.isDebugMode, (newValue) => {
-    if (!user) {
-      return;
-    }
-
     const xLock = getXLock();
 
     if (newValue) {
diff --git a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
index a3080497..90338b5f 100644
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
@@ -1,5 +1,5 @@
 import { AxiosError } from "axios";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 import { nanoid } from "nanoid";
 import {
   ChevronRightIcon,
@@ -137,6 +137,12 @@ function Workspace({
   const blockScriptStore = useBlockScriptStore();
   const cacheKey = workflow?.cache_key ?? "";
 
+  const enableDebugBrowser = useMemo(() => {
+    return (
+      showBrowser || (activeDebugSession?.vnc_streaming_supported ?? false)
+    );
+  }, [showBrowser, activeDebugSession?.vnc_streaming_supported]);
+
   const [cacheKeyValue, setCacheKeyValue] = useState(
     cacheKey === ""
       ? ""
@@ -699,7 +705,7 @@ function Workspace({
       </div>
 
       {/* infinite canvas and sub panels when not in debug mode */}
-      {!showBrowser && (
+      {!enableDebugBrowser && (
         <div className="relative flex h-full w-full overflow-hidden overflow-x-hidden">
           {/* infinite canvas */}
           <FlowRenderer
@@ -763,7 +769,7 @@ function Workspace({
       )}
 
       {/* infinite canvas, sub panels, browser, and timeline when in debug mode */}
-      {showBrowser && (
+      {enableDebugBrowser && (
         <div className="relative flex h-full w-full overflow-hidden overflow-x-hidden">
           <Splitter
             className="splittah"
diff --git a/skyvern/forge/sdk/services/org_auth_service.py b/skyvern/forge/sdk/services/org_auth_service.py
index 6cd8537c..2b42cb46 100644
--- a/skyvern/forge/sdk/services/org_auth_service.py
+++ b/skyvern/forge/sdk/services/org_auth_service.py
@@ -88,13 +88,21 @@ async def _authenticate_helper(authorization: str) -> Organization:
 
 async def get_current_user_id(
     authorization: Annotated[str | None, Header(include_in_schema=False)] = None,
+    x_api_key: Annotated[str | None, Header(include_in_schema=False)] = None,
+    x_user_agent: Annotated[str | None, Header(include_in_schema=False)] = None,
 ) -> str:
-    if not authorization:
-        raise HTTPException(
-            status_code=status.HTTP_403_FORBIDDEN,
-            detail="Invalid credentials",
-        )
-    return await _authenticate_user_helper(authorization)
+    if authorization:
+        return await _authenticate_user_helper(authorization)
+
+    if x_api_key and x_user_agent == "skyvern-ui":
+        organization = await _get_current_org_cached(x_api_key, app.DATABASE)
+        if organization:
+            return f"{organization.organization_id}_user"
+
+    raise HTTPException(
+        status_code=status.HTTP_403_FORBIDDEN,
+        detail="Invalid credentials",
+    )
 
 
 async def get_current_user_id_with_authentication(