MVP Debugger UI (#2888)

skyvern-frontend/src/store/DebugStoreContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useMemo } from "react";
+import { useLocation } from "react-router-dom";
+
+function useIsDebugMode() {
+  const location = useLocation();
+  return useMemo(
+    () => location.pathname.includes("debug"),
+    [location.pathname],
+  );
+}
+
+export type DebugStoreContextType = {
+  isDebugMode: boolean;
+};
+
+export const DebugStoreContext = createContext<
+  DebugStoreContextType | undefined
+>(undefined);
+
+export const DebugStoreProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const isDebugMode = useIsDebugMode();
+
+  return (
+    <DebugStoreContext.Provider value={{ isDebugMode }}>
+      {children}
+    </DebugStoreContext.Provider>
+  );
+};

skyvern-frontend/src/store/WorkflowSettingsStore.ts

@@ -0,0 +1,40 @@
+import { create } from "zustand";
+import { ProxyLocation } from "@/api/types";
+
+export interface WorkflowModel {
+  model_name: string;
+}
+
+export interface WorkflowSettingsState {
+  webhookCallbackUrl: string;
+  proxyLocation: ProxyLocation;
+  persistBrowserSession: boolean;
+  model: WorkflowModel | null;
+  maxScreenshotScrollingTimes: number | null;
+  extraHttpHeaders: string | null;
+  setWorkflowSettings: (
+    settings: Partial<Omit<WorkflowSettingsState, "setWorkflowSettings">>,
+  ) => void;
+  resetWorkflowSettings: () => void;
+}
+
+const defaultState: Omit<
+  WorkflowSettingsState,
+  "setWorkflowSettings" | "resetWorkflowSettings"
+> = {
+  webhookCallbackUrl: "",
+  proxyLocation: ProxyLocation.Residential,
+  persistBrowserSession: false,
+  model: null,
+  maxScreenshotScrollingTimes: null,
+  extraHttpHeaders: null,
+};
+
+export const useWorkflowSettingsStore = create<WorkflowSettingsState>(
+  (set) => ({
+    ...defaultState,
+    setWorkflowSettings: (settings) =>
+      set((state) => ({ ...state, ...settings })),
+    resetWorkflowSettings: () => set({ ...defaultState }),
+  }),
+);

skyvern-frontend/src/store/useDebugStore.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { DebugStoreContext } from "./DebugStoreContext";
+
+export function useDebugStore() {
+  const ctx = useContext(DebugStoreContext);
+  if (!ctx) {
+    throw new Error("useDebugStore must be used within a DebugStoreProvider");
+  }
+  return ctx;
+}

skyvern-frontend/src/store/useOptimisticallyRequestBrowserSessionId.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { AxiosInstance } from "axios";
+import { lsKeys } from "@/util/env";
 
 export interface BrowserSessionData {
   browser_session_id: string | null;
@@ -10,7 +11,6 @@ interface OptimisticBrowserSessionIdState extends BrowserSessionData {
   run: (client: AxiosInstance) => Promise<BrowserSessionData>;
 }
 
-const SESSION_KEY = "skyvern.optimisticBrowserSession";
 const SESSION_TIMEOUT_MINUTES = 60;
 
 export const useOptimisticallyRequestBrowserSessionId =
@@ -18,7 +18,7 @@ export const useOptimisticallyRequestBrowserSessionId =
     browser_session_id: null,
     expires_at: null,
     run: async (client) => {
-      const stored = localStorage.getItem(SESSION_KEY);
+      const stored = localStorage.getItem(lsKeys.optimisticBrowserSession);
       if (stored) {
         try {
           const parsed = JSON.parse(stored);
@@ -50,7 +50,7 @@ export const useOptimisticallyRequestBrowserSessionId =
         expires_at: newExpiresAt,
       });
       localStorage.setItem(
-        SESSION_KEY,
+        lsKeys.optimisticBrowserSession,
         JSON.stringify({
           browser_session_id: newBrowserSessionId,
           expires_at: newExpiresAt,