@midscene/visualizer 0.28.9-beta-20250916162508.0 → 0.28.9-beta-20250917052636.0

package/dist/es/component/nav-actions/index.mjs

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GithubOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { EnvConfig } from "../env-config/index.mjs";
+import "./style.css";
+function NavActions(param) {
+    let { showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' } = param;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `nav-actions ${className}`,
+        children: [
+            /*#__PURE__*/ jsx(Typography.Link, {
+                href: githubUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ jsx(GithubOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            /*#__PURE__*/ jsx(Typography.Link, {
+                href: helpUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ jsx(QuestionCircleOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            showEnvConfig && /*#__PURE__*/ jsx(EnvConfig, {
+                showTooltipWhenEmpty: showTooltipWhenEmpty,
+                showModelName: showModelName
+            })
+        ]
+    });
+}
+export { NavActions };

package/dist/es/component/nav-actions/style.css

@@ -0,0 +1,35 @@
+.nav-actions {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.nav-actions .nav-icon {
+  color: rgba(0, 0, 0, .65);
+  cursor: pointer;
+  font-size: 16px;
+  transition: color .3s;
+}
+
+.nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+
+.nav-actions a {
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.nav-actions a:hover .nav-icon {
+  color: #2b83ff;
+}
+
+[data-theme="dark"] .nav-actions .nav-icon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+

package/dist/es/component/playground/index.css

@@ -44,21 +44,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -146,10 +159,11 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
   align-items: center;
-  padding-left: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/es/component/prompt-input/index.css

@@ -10,21 +10,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -112,10 +125,11 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
   align-items: center;
-  padding-left: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/es/component/prompt-input/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
 import "./index.css";
-import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
+import { Button, Dropdown, Form, Input, Radio, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistoryStore } from "../../store/history.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
@@ -17,6 +17,7 @@ const PromptInput = (param)=>{
     const [promptValue, setPromptValue] = useState('');
     const placeholder = getPlaceholderForType(selectedType);
     const textAreaRef = useRef(null);
+    const modeRadioGroupRef = useRef(null);
     const params = Form.useWatch('params', form);
     const lastHistoryRef = useRef(null);
     const history = useHistoryStore((state)=>state.history);
@@ -160,6 +161,27 @@ const PromptInput = (param)=>{
         lastSelectedType,
         setLastSelectedType
     ]);
+    const scrollToSelectedItem = useCallback(()=>{
+        const container = modeRadioGroupRef.current;
+        if (!container) return;
+        let targetElement = null;
+        const selectedRadioButton = container.querySelector('.ant-radio-button-wrapper-checked');
+        const dropdownButton = container.querySelector('.more-apis-button.selected-from-dropdown');
+        if (selectedRadioButton) targetElement = selectedRadioButton;
+        else if (dropdownButton) targetElement = dropdownButton;
+        if (targetElement) {
+            const containerRect = container.getBoundingClientRect();
+            const targetRect = targetElement.getBoundingClientRect();
+            const targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+            const targetWidth = targetRect.width;
+            const containerWidth = containerRect.width;
+            const optimalScrollLeft = targetLeft - (containerWidth - targetWidth) / 2;
+            container.scrollTo({
+                left: Math.max(0, optimalScrollLeft),
+                behavior: 'smooth'
+            });
+        }
+    }, []);
     useEffect(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
@@ -186,6 +208,15 @@ const PromptInput = (param)=>{
         form,
         getDefaultParams
     ]);
+    useEffect(()=>{
+        const timeoutId = setTimeout(()=>{
+            scrollToSelectedItem();
+        }, 100);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        selectedType,
+        scrollToSelectedItem
+    ]);
     const formPromptValue = Form.useWatch('prompt', form);
     useEffect(()=>{
         if (formPromptValue !== promptValue) setPromptValue(formPromptValue || '');
@@ -501,11 +532,12 @@ const PromptInput = (param)=>{
     return /*#__PURE__*/ jsxs("div", {
         className: "prompt-input-wrapper",
         children: [
-            /*#__PURE__*/ jsxs(Space, {
+            /*#__PURE__*/ jsxs("div", {
                 className: "mode-radio-group-wrapper",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "mode-radio-group",
+                        ref: modeRadioGroupRef,
                         children: [
                             /*#__PURE__*/ jsx(Form.Item, {
                                 name: "type",

package/dist/es/index.mjs

@@ -5,6 +5,7 @@ import { useEnvConfig } from "./store/store.mjs";
 import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
 import { EnvConfig } from "./component/env-config/index.mjs";
 import { EnvConfigReminder } from "./component/env-config-reminder/index.mjs";
+import { NavActions } from "./component/nav-actions/index.mjs";
 import { Logo } from "./component/logo/index.mjs";
 import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
 import { useServerValid } from "./hooks/useServerValid.mjs";
@@ -15,11 +16,10 @@ import { ContextPreview } from "./component/context-preview/index.mjs";
 import { PromptInput } from "./component/prompt-input/index.mjs";
 import { Player } from "./component/player/index.mjs";
 import { Blackboard } from "./component/blackboard/index.mjs";
-import { GithubStar } from "./component/github-star/index.mjs";
 import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./utils/playground-utils.mjs";
 import { filterBase64Value, timeStr } from "./utils/index.mjs";
 import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
 import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };

package/dist/lib/component/nav-actions/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    NavActions: ()=>NavActions
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const index_js_namespaceObject = require("../env-config/index.js");
+require("./style.css");
+function NavActions(param) {
+    let { showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' } = param;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `nav-actions ${className}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: githubUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.GithubOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: helpUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.QuestionCircleOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            showEnvConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                showTooltipWhenEmpty: showTooltipWhenEmpty,
+                showModelName: showModelName
+            })
+        ]
+    });
+}
+exports.NavActions = __webpack_exports__.NavActions;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "NavActions"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/nav-actions/style.css

@@ -0,0 +1,35 @@
+.nav-actions {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.nav-actions .nav-icon {
+  color: rgba(0, 0, 0, .65);
+  cursor: pointer;
+  font-size: 16px;
+  transition: color .3s;
+}
+
+.nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+
+.nav-actions a {
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.nav-actions a:hover .nav-icon {
+  color: #2b83ff;
+}
+
+[data-theme="dark"] .nav-actions .nav-icon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+

package/dist/lib/component/playground/index.css

@@ -44,21 +44,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -146,10 +159,11 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
   align-items: center;
-  padding-left: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/lib/component/prompt-input/index.css

@@ -10,21 +10,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -112,10 +125,11 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
   align-items: center;
-  padding-left: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/lib/component/prompt-input/index.js

@@ -55,6 +55,7 @@ const PromptInput = (param)=>{
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
     const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
+    const modeRadioGroupRef = (0, external_react_namespaceObject.useRef)(null);
     const params = external_antd_namespaceObject.Form.useWatch('params', form);
     const lastHistoryRef = (0, external_react_namespaceObject.useRef)(null);
     const history = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.history);
@@ -198,6 +199,27 @@ const PromptInput = (param)=>{
         lastSelectedType,
         setLastSelectedType
     ]);
+    const scrollToSelectedItem = (0, external_react_namespaceObject.useCallback)(()=>{
+        const container = modeRadioGroupRef.current;
+        if (!container) return;
+        let targetElement = null;
+        const selectedRadioButton = container.querySelector('.ant-radio-button-wrapper-checked');
+        const dropdownButton = container.querySelector('.more-apis-button.selected-from-dropdown');
+        if (selectedRadioButton) targetElement = selectedRadioButton;
+        else if (dropdownButton) targetElement = dropdownButton;
+        if (targetElement) {
+            const containerRect = container.getBoundingClientRect();
+            const targetRect = targetElement.getBoundingClientRect();
+            const targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+            const targetWidth = targetRect.width;
+            const containerWidth = containerRect.width;
+            const optimalScrollLeft = targetLeft - (containerWidth - targetWidth) / 2;
+            container.scrollTo({
+                left: Math.max(0, optimalScrollLeft),
+                behavior: 'smooth'
+            });
+        }
+    }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
@@ -224,6 +246,15 @@ const PromptInput = (param)=>{
         form,
         getDefaultParams
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const timeoutId = setTimeout(()=>{
+            scrollToSelectedItem();
+        }, 100);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        selectedType,
+        scrollToSelectedItem
+    ]);
     const formPromptValue = external_antd_namespaceObject.Form.useWatch('prompt', form);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (formPromptValue !== promptValue) setPromptValue(formPromptValue || '');
@@ -539,11 +570,12 @@ const PromptInput = (param)=>{
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "prompt-input-wrapper",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Space, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "mode-radio-group-wrapper",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "mode-radio-group",
+                        ref: modeRadioGroupRef,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
                                 name: "type",

package/dist/lib/index.js

@@ -51,9 +51,9 @@ __webpack_require__.d(__webpack_exports__, {
     BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
     colorForName: ()=>color_js_namespaceObject.colorForName,
     safeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig,
-    GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
     Logo: ()=>logo_index_js_namespaceObject.Logo,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
+    NavActions: ()=>nav_actions_index_js_namespaceObject.NavActions,
     useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
     NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
     ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
@@ -77,6 +77,7 @@ const store_js_namespaceObject = require("./store/store.js");
 const color_js_namespaceObject = require("./utils/color.js");
 const index_js_namespaceObject = require("./component/env-config/index.js");
 const env_config_reminder_index_js_namespaceObject = require("./component/env-config-reminder/index.js");
+const nav_actions_index_js_namespaceObject = require("./component/nav-actions/index.js");
 const logo_index_js_namespaceObject = require("./component/logo/index.js");
 const misc_index_js_namespaceObject = require("./component/misc/index.js");
 const useServerValid_js_namespaceObject = require("./hooks/useServerValid.js");
@@ -87,7 +88,6 @@ const context_preview_index_js_namespaceObject = require("./component/context-pr
 const prompt_input_index_js_namespaceObject = require("./component/prompt-input/index.js");
 const player_index_js_namespaceObject = require("./component/player/index.js");
 const blackboard_index_js_namespaceObject = require("./component/blackboard/index.js");
-const github_star_index_js_namespaceObject = require("./component/github-star/index.js");
 const playground_utils_js_namespaceObject = require("./utils/playground-utils.js");
 const external_utils_index_js_namespaceObject = require("./utils/index.js");
 const shiny_text_index_js_namespaceObject = require("./component/shiny-text/index.js");
@@ -102,10 +102,10 @@ exports.Blackboard = __webpack_exports__.Blackboard;
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.EnvConfig = __webpack_exports__.EnvConfig;
 exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
-exports.GithubStar = __webpack_exports__.GithubStar;
 exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.Logo = __webpack_exports__.Logo;
 exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NavActions = __webpack_exports__.NavActions;
 exports.NoOpContextProvider = __webpack_exports__.NoOpContextProvider;
 exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
 exports.Player = __webpack_exports__.Player;
@@ -139,10 +139,10 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ContextPreview",
     "EnvConfig",
     "EnvConfigReminder",
-    "GithubStar",
     "LocalStorageProvider",
     "Logo",
     "MemoryStorageProvider",
+    "NavActions",
     "NoOpContextProvider",
     "NoOpStorageProvider",
     "Player",

package/dist/types/component/nav-actions/index.d.ts

@@ -0,0 +1,10 @@
+import './style.less';
+export interface NavActionsProps {
+    showEnvConfig?: boolean;
+    showTooltipWhenEmpty?: boolean;
+    showModelName?: boolean;
+    githubUrl?: string;
+    helpUrl?: string;
+    className?: string;
+}
+export declare function NavActions({ showEnvConfig, showTooltipWhenEmpty, showModelName, githubUrl, helpUrl, className, }: NavActionsProps): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -5,6 +5,8 @@ export { useEnvConfig } from './store/store';
 export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
 export { EnvConfigReminder } from './component/env-config-reminder';
+export { NavActions } from './component/nav-actions';
+export type { NavActionsProps } from './component/nav-actions';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
 export { useServerValid } from './hooks/useServerValid';
@@ -16,7 +18,6 @@ export { ContextPreview } from './component/context-preview';
 export { PromptInput } from './component/prompt-input';
 export { Player } from './component/player';
 export { Blackboard } from './component/blackboard';
-export { GithubStar } from './component/github-star';
 export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } from './utils/playground-utils';
 export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.28.9-beta-20250916162508.0",
+  "version": "0.28.9-beta-20250917052636.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -52,7 +52,7 @@
     "react-dom": "18.3.1",
     "react-resizable-panels": "2.0.22",
     "rimraf": "~3.0.2",
-    "tsx": "4.19.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.8.3",
     "zustand": "4.5.2"
   },
@@ -70,10 +70,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "0.28.9-beta-20250916162508.0",
-    "@midscene/playground": "0.28.9-beta-20250916162508.0",
-    "@midscene/shared": "0.28.9-beta-20250916162508.0",
-    "@midscene/web": "0.28.9-beta-20250916162508.0"
+    "@midscene/playground": "0.28.9-beta-20250917052636.0",
+    "@midscene/web": "0.28.9-beta-20250917052636.0",
+    "@midscene/core": "0.28.9-beta-20250917052636.0",
+    "@midscene/shared": "0.28.9-beta-20250917052636.0"
   },
   "license": "MIT",
   "scripts": {

package/dist/es/component/github-star/index.css

@@ -1,4 +0,0 @@
-.github-star {
-  height: 22px;
-}
-

package/dist/es/component/github-star/index.mjs

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "./index.css";
-const GithubStar = ()=>/*#__PURE__*/ jsx("a", {
-        href: "https://github.com/web-infra-dev/midscene",
-        target: "_blank",
-        rel: "noreferrer",
-        style: {
-            display: 'flex',
-            alignItems: 'center'
-        },
-        children: /*#__PURE__*/ jsx("img", {
-            className: "github-star",
-            src: "https://img.shields.io/github/stars/web-infra-dev/midscene?style=social",
-            alt: "Github star",
-            style: {
-                display: 'block'
-            }
-        })
-    });
-export { GithubStar };

package/dist/lib/component/github-star/index.css

@@ -1,4 +0,0 @@
-.github-star {
-  height: 22px;
-}
-

package/dist/lib/component/github-star/index.js

@@ -1,54 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    GithubStar: ()=>GithubStar
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./index.css");
-const GithubStar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
-        href: "https://github.com/web-infra-dev/midscene",
-        target: "_blank",
-        rel: "noreferrer",
-        style: {
-            display: 'flex',
-            alignItems: 'center'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-            className: "github-star",
-            src: "https://img.shields.io/github/stars/web-infra-dev/midscene?style=social",
-            alt: "Github star",
-            style: {
-                display: 'block'
-            }
-        })
-    });
-exports.GithubStar = __webpack_exports__.GithubStar;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "GithubStar"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/types/component/github-star/index.d.ts

@@ -1,2 +0,0 @@
-import './index.less';
-export declare const GithubStar: () => import("react").JSX.Element;