feat(screenshot-viewer): add screenshot viewer component with styles and functionality

Author: quanru

apps/playground/src/App.tsx

@@ -23,7 +23,9 @@ export default function App() {
   const [serverOnline, setServerOnline] = useState(false);
   const [isUserOperating, setIsUserOperating] = useState(false);
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-  const [deviceType, setDeviceType] = useState<'web' | 'android' | 'ios'>('web');
+  const [deviceType, setDeviceType] = useState<'web' | 'android' | 'ios'>(
+    'web',
+  );
 
   // Create PlaygroundSDK and storage provider
   const playgroundSDK = useMemo(() => {

packages/visualizer/src/components/screenshot-viewer/index.less renamed to packages/visualizer/src/component/screenshot-viewer/index.less

@@ -14,6 +14,7 @@ import { EnvConfigReminder } from '../env-config-reminder';
 import { PlaygroundResultView } from '../playground-result';
 import './index.less';
 import PlaygroundIcon from '../../icons/avatar.svg';
+import { defaultMainButtons } from '../../utils/constants';
 import { PromptInput } from '../prompt-input';
 import {
   createStorageProvider,
@@ -62,6 +63,13 @@ export function UniversalPlayground({
   const { config } = useEnvConfig();
   const [sdkReady, setSdkReady] = useState(false);
 
+  // Initialize form with default type on mount
+  useEffect(() => {
+    form.setFieldsValue({
+      type: defaultMainButtons[0],
+    });
+  }, [form]);
+
   // Initialize SDK ID on mount for remote execution
   useEffect(() => {
     const initializeSDK = async () => {

packages/visualizer/src/components/screenshot-viewer/index.tsx renamed to packages/visualizer/src/component/screenshot-viewer/index.tsx

@@ -1,7 +1,3 @@
-import './component/playground/index.less';
-import './component/universal-playground/index.less';
-import './components/screenshot-viewer/index.less';
-
 export {
   type AnimationScript,
   type ReplayScriptsInfo,
@@ -37,7 +33,7 @@ export { ContextPreview } from './component/context-preview';
 export { PromptInput } from './component/prompt-input';
 export { Player } from './component/player';
 export { Blackboard } from './component/blackboard';
-export { default as ScreenshotViewer } from './components/screenshot-viewer';
+export { default as ScreenshotViewer } from './component/screenshot-viewer';
 
 // Export playground utilities
 export {