fix playground server mode in report (#1188)

quanru · web-flow · commit ce0eabd6c31a · 2025-09-11T20:38:19.000+08:00
* feat(visualizer): add EnvConfigReminder component for environment variable setup reminder

* feat(playground): update configuration options for server mode and persistence handling
diff --git a/apps/chrome-extension/src/components/playground/index.tsx b/apps/chrome-extension/src/components/playground/index.tsx
@@ -90,11 +90,11 @@ export function BrowserExtensionPlayground({
         return sdk.executeAction(actionType, value, options || {});
       },
       getActionSpace: (context?: any) => {
-        // Don't create SDK immediately for getActionSpace - return empty array until config is confirmed ready
-        if (!runEnabled) {
-          return Promise.resolve([]);
-        }
+        // Only try to get action space when config is ready
         try {
+          if (!runEnabled) {
+            return Promise.resolve([]);
+          }
           const sdk = getOrCreateSDK();
           return sdk.getActionSpace(context);
         } catch (error) {
@@ -136,18 +136,30 @@ export function BrowserExtensionPlayground({
     // Return a lazy context provider that only creates agent when needed
     return {
       async getUIContext() {
-        const agent = getAgent(forceSameTabNavigation);
-        if (!agent) {
-          throw new Error('Please configure AI settings first');
+        try {
+          const agent = getAgent(forceSameTabNavigation);
+          if (!agent) {
+            throw new Error('Please configure AI settings first');
+          }
+          return agent.page.screenshot();
+        } catch (error) {
+          console.warn('Failed to get UI context:', error);
+          // Return null context instead of throwing to allow UI to initialize
+          return null;
         }
-        return agent.page.screenshot();
       },
       async refreshContext() {
-        const agent = getAgent(forceSameTabNavigation);
-        if (!agent) {
-          throw new Error('Please configure AI settings first');
+        try {
+          const agent = getAgent(forceSameTabNavigation);
+          if (!agent) {
+            throw new Error('Please configure AI settings first');
+          }
+          return agent.page.screenshot();
+        } catch (error) {
+          console.warn('Failed to refresh context:', error);
+          // Return null context instead of throwing to allow UI to initialize
+          return null;
         }
-        return agent.page.screenshot();
       },
     };
   }, [showContextPreview, getAgent, forceSameTabNavigation]);
diff --git a/apps/chrome-extension/src/extension/popup/index.tsx b/apps/chrome-extension/src/extension/popup/index.tsx
@@ -117,26 +117,16 @@ export function PlaygroundPopup() {
       <div className="popup-content">
         {/* Playground Component */}
         <div className="playground-component">
-          {configReady && aiConfigReady ? (
-            <BrowserExtensionPlayground
-              getAgent={(forceSameTabNavigation?: boolean) => {
-                console.log(
-                  'getAgent called with forceSameTabNavigation:',
-                  forceSameTabNavigation,
-                );
-                return extensionAgentForTab(forceSameTabNavigation);
-              }}
-              showContextPreview={false}
-            />
-          ) : (
-            <div style={{ padding: '20px', textAlign: 'center' }}>
-              <p>
-                {!configReady
-                  ? 'Please configure your AI settings to use the playground.'
-                  : 'Initializing AI configuration...'}
-              </p>
-            </div>
-          )}
+          <BrowserExtensionPlayground
+            getAgent={(forceSameTabNavigation?: boolean) => {
+              console.log(
+                'getAgent called with forceSameTabNavigation:',
+                forceSameTabNavigation,
+              );
+              return extensionAgentForTab(forceSameTabNavigation);
+            }}
+            showContextPreview={false}
+          />
         </div>
       </div>
     );
diff --git a/apps/chrome-extension/src/extension/recorder/components/RecordList.tsx b/apps/chrome-extension/src/extension/recorder/components/RecordList.tsx
@@ -8,8 +8,7 @@ import { Alert, Button, Empty, List, Popconfirm } from 'antd';
 import type React from 'react';
 import type { RecordingSession } from '../../../store';
 import './RecordList.less';
-import { useEnvConfig } from '@midscene/visualizer';
-import { EnvConfigReminder } from '../../../components/env-config-reminder';
+import { EnvConfigReminder, useEnvConfig } from '@midscene/visualizer';
 
 interface RecordListProps {
   sessions: RecordingSession[];
diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
@@ -109,10 +109,11 @@ export default function App() {
                       storage={storage}
                       config={{
                         showContextPreview: false,
-                        enablePersistence: true,
+                        enablePersistence: false,
                         layout: 'vertical',
                         showVersionInfo: true,
                         enableScrollToBottom: true,
+                        serverMode: true,
                       }}
                       branding={{
                         title: 'Playground',
diff --git a/packages/playground/src/adapters/remote-execution.ts b/packages/playground/src/adapters/remote-execution.ts
@@ -1,5 +1,4 @@
 import type { DeviceAction } from '@midscene/core';
-import { PLAYGROUND_SERVER_PORT } from '@midscene/shared/constants';
 import type { ExecutionOptions, FormValue, ValidationResult } from '../types';
 import { BasePlaygroundAdapter } from './base';
 
@@ -8,7 +7,7 @@ export class RemoteExecutionAdapter extends BasePlaygroundAdapter {
   private progressPolling = new Map<string, NodeJS.Timeout>();
   private progressCallback?: (tip: string) => void;
 
-  constructor(serverUrl = `http://localhost:${PLAYGROUND_SERVER_PORT}`) {
+  constructor(serverUrl: string) {
     super();
     this.serverUrl = serverUrl;
   }
diff --git a/packages/playground/src/sdk/index.ts b/packages/playground/src/sdk/index.ts
@@ -34,10 +34,11 @@ export class PlaygroundSDK {
         }
         return new LocalExecutionAdapter(agent);
       case 'remote-execution': {
-        // Use provided serverUrl first, then fallback to current page origin or default
+        // Use provided serverUrl first, then fallback to localhost if current page origin is file:// or default
         const finalServerUrl =
           serverUrl ||
-          (typeof window !== 'undefined'
+          (typeof window !== 'undefined' &&
+          window.location.protocol.includes('http')
             ? window.location.origin
             : `http://localhost:${PLAYGROUND_SERVER_PORT}`);
 
diff --git a/packages/visualizer/src/component/env-config-reminder/index.less b/packages/visualizer/src/component/env-config-reminder/index.less
@@ -18,4 +18,4 @@
     color: #000;
     font-size: 14px;
   }
-} 
+}
diff --git a/packages/visualizer/src/component/env-config-reminder/index.tsx b/packages/visualizer/src/component/env-config-reminder/index.tsx
@@ -1,5 +1,7 @@
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { EnvConfig, useEnvConfig } from '@midscene/visualizer';
+import { useEnvConfig } from '../../store/store';
+import { EnvConfig } from '../env-config';
+
 import './index.less';
 
 interface EnvConfigReminderProps {
diff --git a/packages/visualizer/src/component/service-mode-control/index.tsx b/packages/visualizer/src/component/service-mode-control/index.tsx
@@ -7,7 +7,6 @@ import { useServerValid } from '../../hooks/useServerValid';
 import { useEnvConfig } from '../../store/store';
 import { EnvConfig } from '../env-config';
 import { iconForStatus } from '../misc';
-
 interface ServiceModeControlProps {
   serviceMode: 'Server' | 'In-Browser';
 }
diff --git a/packages/visualizer/src/component/universal-playground/index.tsx b/packages/visualizer/src/component/universal-playground/index.tsx
@@ -10,6 +10,7 @@ import { usePlaygroundState } from '../../hooks/usePlaygroundState';
 import { useEnvConfig } from '../../store/store';
 import type { FormValue, UniversalPlaygroundProps } from '../../types';
 import { ContextPreview } from '../context-preview';
+import { EnvConfigReminder } from '../env-config-reminder';
 import { PlaygroundResultView } from '../playground-result';
 import './index.less';
 import PlaygroundIcon from '../../icons/avatar.svg';
@@ -47,6 +48,9 @@ export function UniversalPlayground({
   const { deepThink, screenshotIncluded, domIncluded, config } = useEnvConfig();
 
   // Use custom hooks for state management
+  // Apply configuration
+  const enablePersistence = componentConfig.enablePersistence !== false;
+
   const {
     loading,
     setLoading,
@@ -64,9 +68,13 @@ export function UniversalPlayground({
     currentRunningIdRef,
     interruptedFlagRef,
     clearInfoList,
-    refreshContext,
     handleScrollToBottom,
-  } = usePlaygroundState(playgroundSDK, storage, contextProvider);
+  } = usePlaygroundState(
+    playgroundSDK,
+    storage,
+    contextProvider,
+    enablePersistence,
+  );
 
   // Use execution hook
   const {
@@ -115,15 +123,17 @@ export function UniversalPlayground({
   }, [form, executeAction]);
 
   // Check if run button should be enabled
-  const runButtonEnabled = !dryMode && !actionSpaceLoading;
+  const configAlreadySet = Object.keys(config || {}).length >= 1;
+  const runButtonEnabled =
+    componentConfig.serverMode ||
+    (!dryMode && !actionSpaceLoading && configAlreadySet);
 
   // Get the currently selected type
   const selectedType = Form.useWatch('type', form);
 
   // Apply configuration
   const finalShowContextPreview =
     showContextPreview && componentConfig.showContextPreview !== false;
-  const enablePersistence = componentConfig.enablePersistence !== false;
   const layout = componentConfig.layout || 'vertical';
   const showVersionInfo = componentConfig.showVersionInfo !== false;
 
@@ -144,7 +154,7 @@ export function UniversalPlayground({
         {/* Main Dialog Area */}
         <div className="middle-dialog-area">
           {/* Clear Button */}
-          {infoList.length > 1 && enablePersistence && (
+          {infoList.length > 1 && (
             <div className="clear-button-container">
               <Button
                 size="small"
@@ -304,6 +314,7 @@ export function UniversalPlayground({
 
         {/* Bottom Input Section */}
         <div className="bottom-input-section">
+          {!componentConfig.serverMode && <EnvConfigReminder />}
           <PromptInput
             runButtonEnabled={runButtonEnabled}
             form={form}
diff --git a/packages/visualizer/src/hooks/usePlaygroundState.ts b/packages/visualizer/src/hooks/usePlaygroundState.ts
@@ -15,6 +15,7 @@ export function usePlaygroundState(
   playgroundSDK: PlaygroundSDKLike,
   storage?: StorageProvider,
   contextProvider?: ContextProvider,
+  enablePersistence = true,
 ) {
   // Core state
   const [loading, setLoading] = useState(false);
@@ -50,7 +51,7 @@ export function usePlaygroundState(
         timestamp: new Date(),
       };
 
-      if (storage?.loadMessages) {
+      if (enablePersistence && storage?.loadMessages) {
         try {
           const storedMessages = await storage.loadMessages();
           // Check if welcome message already exists in stored messages
@@ -79,13 +80,13 @@ export function usePlaygroundState(
 
   // Save messages to storage when they change
   useEffect(() => {
-    if (storage?.saveMessages && infoList.length > 1) {
+    if (enablePersistence && storage?.saveMessages && infoList.length > 1) {
       // Skip if only welcome message
       storage.saveMessages(infoList).catch((error) => {
         console.error('Failed to save messages:', error);
       });
     }
-  }, [infoList, storage]);
+  }, [infoList, storage, enablePersistence]);
 
   // Initialize context preview
   useEffect(() => {
@@ -188,14 +189,14 @@ export function usePlaygroundState(
     };
 
     setInfoList([welcomeMessage]);
-    if (storage?.clearMessages) {
+    if (enablePersistence && storage?.clearMessages) {
       try {
         await storage.clearMessages();
       } catch (error) {
         console.error('Failed to clear stored messages:', error);
       }
     }
-  }, [storage]);
+  }, [storage, enablePersistence]);
 
   // Refresh context
   const refreshContext = useCallback(async () => {
diff --git a/packages/visualizer/src/index.tsx b/packages/visualizer/src/index.tsx
@@ -16,6 +16,7 @@ export {
 } from './utils/color';
 
 export { EnvConfig } from './component/env-config';
+export { EnvConfigReminder } from './component/env-config-reminder';
 
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
diff --git a/packages/visualizer/src/types.ts b/packages/visualizer/src/types.ts
@@ -348,6 +348,7 @@ export interface UniversalPlaygroundConfig {
   layout?: 'vertical' | 'horizontal';
   showVersionInfo?: boolean;
   enableScrollToBottom?: boolean;
+  serverMode?: boolean;
 }
 
 // branding interface
diff --git a/packages/web-integration/demo/playground.ts b/packages/web-integration/demo/playground.ts
@@ -1,8 +1,11 @@
 import { playgroundForAgent } from '@midscene/playground';
+import dotenv from 'dotenv';
 import { PuppeteerAgent } from '../src/puppeteer';
 import { launchPuppeteerPage } from '../src/puppeteer/agent-launcher';
 
-import 'dotenv/config';
+dotenv.config({
+  path: '../../.env',
+});
 
 async function main() {
   await Promise.resolve(
diff --git a/packages/web-integration/tests/ai/web/static/static-page.test.ts b/packages/web-integration/tests/ai/web/static/static-page.test.ts
@@ -35,7 +35,14 @@ describe(
     });
 
     it('server should work', async () => {
-      const page = new StaticPage();
+      const page = new StaticPage({
+        tree: {
+          node: null,
+          children: [],
+        },
+        size: { width: 800, height: 600 },
+        screenshotBase64: '',
+      });
       const agent = new StaticPageAgent(page);
       server = new PlaygroundServer(page, agent);
 

Original file line number	Diff line number	Diff line change
`@@ -18,4 +18,4 @@`
`18`	`18`	`color: #000;`
`19`	`19`	`font-size: 14px;`
`20`	`20`	`}`
`21`		`-}`
	`21`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ import { useServerValid } from '../../hooks/useServerValid';`
`7`	`7`	`import { useEnvConfig } from '../../store/store';`
`8`	`8`	`import { EnvConfig } from '../env-config';`
`9`	`9`	`import { iconForStatus } from '../misc';`
`10`		`-`
`11`	`10`	`interface ServiceModeControlProps {`
`12`	`11`	`serviceMode: 'Server' \| 'In-Browser';`
`13`	`12`	`}`