@midscene/visualizer 1.7.5-beta-20260421030751.0 → 1.7.5

package/dist/lib/hooks/useMinimalTypeGate.js

@@ -0,0 +1,81 @@
+"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__, {
+    useMinimalTypeGate: ()=>useMinimalTypeGate
+});
+const external_react_namespaceObject = require("react");
+function useMinimalTypeGate(options) {
+    const { enabled, form, selectedType, onAfterReset, defaultType = 'aiAct' } = options;
+    const [hasExplicitSelection, setHasExplicitSelection] = (0, external_react_namespaceObject.useState)(false);
+    const skipNextRestoreRef = (0, external_react_namespaceObject.useRef)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!enabled || hasExplicitSelection || !selectedType || selectedType === defaultType) return;
+        skipNextRestoreRef.current = false;
+        form.setFieldsValue({
+            type: defaultType,
+            prompt: '',
+            params: {}
+        });
+        null == onAfterReset || onAfterReset();
+    }, [
+        enabled,
+        hasExplicitSelection,
+        selectedType,
+        defaultType,
+        form,
+        onAfterReset
+    ]);
+    const markExplicitSelection = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!enabled) return;
+        setHasExplicitSelection(true);
+    }, [
+        enabled
+    ]);
+    const skipNextRestore = (0, external_react_namespaceObject.useCallback)(()=>{
+        skipNextRestoreRef.current = true;
+    }, []);
+    const shouldSkipRestoreOnce = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!skipNextRestoreRef.current) return false;
+        skipNextRestoreRef.current = false;
+        return true;
+    }, []);
+    return (0, external_react_namespaceObject.useMemo)(()=>({
+            markExplicitSelection,
+            skipNextRestore,
+            shouldSkipRestoreOnce
+        }), [
+        markExplicitSelection,
+        skipNextRestore,
+        shouldSkipRestoreOnce
+    ]);
+}
+exports.useMinimalTypeGate = __webpack_exports__.useMinimalTypeGate;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useMinimalTypeGate"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/hooks/usePlaygroundExecution.js

@@ -171,6 +171,7 @@ function usePlaygroundExecution(options) {
                             id: `progress-${thisRunningId}-task-${index}`,
                             type: 'progress',
                             content: buildProgressContent(task),
+                            actionKind: (0, agent_namespaceObject.typeStr)(task),
                             timestamp: new Date((null == (_task_timing = task.timing) ? void 0 : _task_timing.start) || Date.now()),
                             result: task.error ? {
                                 error: formatError(task.error),

package/dist/lib/utils/progress-action-icon.js

@@ -0,0 +1,86 @@
+"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__, {
+    defaultProgressActionIcon: ()=>defaultProgressActionIcon,
+    resolveProgressActionIcon: ()=>resolveProgressActionIcon
+});
+const icons_namespaceObject = require("@ant-design/icons");
+const external_react_namespaceObject = require("react");
+function defaultProgressActionIcon(kind) {
+    switch(kind){
+        case 'Planning':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.ExperimentOutlined);
+        case 'Locate':
+        case 'Insight':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SearchOutlined);
+        case 'Tap':
+        case 'Click':
+        case 'DoubleClick':
+        case 'RightClick':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.AimOutlined);
+        case 'Hover':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SelectOutlined);
+        case 'Input':
+        case 'KeyboardPress':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.EditOutlined);
+        case 'Scroll':
+        case 'Swipe':
+        case 'PullGesture':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SwapOutlined);
+        case 'WaitFor':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.HourglassOutlined);
+        case 'Assert':
+        case 'Boolean':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.CheckCircleOutlined);
+        case 'Query':
+        case 'Number':
+        case 'String':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.FileSearchOutlined);
+        case 'Ask':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.QuestionCircleOutlined);
+        case 'Act':
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.PlayCircleOutlined);
+        default:
+            return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.ThunderboltOutlined);
+    }
+}
+function resolveProgressActionIcon(kind, override) {
+    if (!kind) return null;
+    if (override) {
+        const custom = override(kind);
+        if (void 0 !== custom) return custom;
+    }
+    return defaultProgressActionIcon(kind);
+}
+exports.defaultProgressActionIcon = __webpack_exports__.defaultProgressActionIcon;
+exports.resolveProgressActionIcon = __webpack_exports__.resolveProgressActionIcon;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "defaultProgressActionIcon",
+    "resolveProgressActionIcon"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/component/config-selector/index.d.ts

@@ -9,6 +9,7 @@ interface ConfigSelectorProps {
     hideDomAndScreenshotOptions?: boolean;
     deviceType?: DeviceType;
     trigger?: ReactNode;
+    popupPlacement?: 'topRight' | 'bottomRight';
 }
 export declare const ConfigSelector: React.FC<ConfigSelectorProps>;
 export {};

package/dist/types/component/history-selector/index.d.ts

@@ -7,6 +7,7 @@ interface HistorySelectorProps {
     history: HistoryItem[];
     currentType: string;
     trigger?: ReactNode;
+    popupPlacement?: 'top' | 'bottom';
 }
 export declare const HistorySelector: React.FC<HistorySelectorProps>;
 export {};

package/dist/types/hooks/useMinimalTypeGate.d.ts

@@ -0,0 +1,72 @@
+import type { FormInstance } from 'antd';
+/**
+ * Options for {@link useMinimalTypeGate}.
+ */
+export interface UseMinimalTypeGateOptions {
+    /**
+     * Whether the gate is active. When `false`, the hook is a no-op and all
+     * returned callbacks become stable identity-only functions. Typically
+     * wired to `chrome?.variant === 'minimal'`.
+     */
+    enabled: boolean;
+    /** The antd form that owns `type` / `prompt` / `params` fields. */
+    form: FormInstance;
+    /** Currently selected action type (usually read via `Form.useWatch`). */
+    selectedType: string | undefined;
+    /**
+     * Called when the gate snaps `form.type` back to its default. Hosts use
+     * this hook to clear any sibling state (local `promptValue`, custom
+     * history refs, etc.) alongside the form reset.
+     */
+    onAfterReset?: () => void;
+    /**
+     * The default type to snap back to when the user has not made an
+     * explicit selection. Defaults to `'aiAct'`, matching the natural
+     * language action.
+     */
+    defaultType?: string;
+}
+export interface MinimalTypeGate {
+    /**
+     * Record that the user has explicitly chosen an action — disables the
+     * snap-back effect for the remainder of the component's lifecycle.
+     * Call this from every user-initiated selection path: action dropdown
+     * click, history replay, etc.
+     */
+    markExplicitSelection: () => void;
+    /**
+     * One-shot flag: request that the NEXT run of the caller's
+     * history-restore effect be skipped entirely. Used when a history
+     * replay is about to change `selectedType` and we don't want the
+     * effect to overwrite the fresh form values. The flag auto-clears
+     * after being read via {@link shouldSkipRestoreOnce}.
+     */
+    skipNextRestore: () => void;
+    /**
+     * Read-and-clear accessor for the one-shot flag set by
+     * {@link skipNextRestore}.
+     */
+    shouldSkipRestoreOnce: () => boolean;
+}
+/**
+ * Keeps a minimal-chrome prompt input pinned to its default type until
+ * the user makes an explicit selection. The minimal chrome hides the
+ * type radio row, so any background pathway that lands a non-default
+ * type in the form (e.g. `lastSelectedType` restored from local
+ * storage) would otherwise surface a type the user never asked for.
+ *
+ * Behaviour:
+ * 1. While `enabled` and the user has not called `markExplicitSelection`,
+ *    any `selectedType !== defaultType` triggers a form reset back to
+ *    the default, clearing `prompt` and `params` along with it.
+ * 2. Once the user explicitly picks something, the gate unlocks and
+ *    stays unlocked for the rest of the component's life.
+ * 3. `skipNextRestore` plus `shouldSkipRestoreOnce` give the caller a
+ *    one-tick bypass so its own history-restore effect can skip the
+ *    iteration where the type just changed due to a history replay.
+ *
+ * This replaces the previously inline `minimalHasExplicitTypeSelection`
+ * state + `skipMinimalSyncRef` + reset effect that lived inside
+ * `PromptInput`.
+ */
+export declare function useMinimalTypeGate(options: UseMinimalTypeGateOptions): MinimalTypeGate;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import type { ConnectivityTestResult, DeviceAction, ModelBrief, UIContext } from '@midscene/core';
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 export interface ZodType {
     _def?: {
         typeName: 'ZodOptional' | 'ZodDefault' | 'ZodNullable' | 'ZodObject' | 'ZodEnum' | 'ZodNumber' | 'ZodString' | 'ZodBoolean';
@@ -154,6 +154,14 @@ export interface InfoListItem {
     loadingProgressText?: string;
     verticalMode?: boolean;
     actionType?: string;
+    /**
+     * Identifier for the ExecutionTask that produced this progress item —
+     * `task.subType || task.type`, e.g. `'Planning'`, `'Locate'`, `'Tap'`,
+     * `'Input'`, `'Scroll'`, `'RunAdbShell'`. Hosts can use this with
+     * {@link PromptInputChromeConfig.resolveProgressActionIcon} to render
+     * a domain-specific icon in the progress pill.
+     */
+    actionKind?: string;
 }
 export interface UniversalPlaygroundConfig {
     showContextPreview?: boolean;
@@ -180,17 +188,32 @@ export interface UniversalPlaygroundConfig {
      */
     showSystemMessageHeader?: boolean;
     /**
-     * When `true`, consecutive progress items in the conversation log are
-     * wrapped under a single collapsible group header. A "run" is bounded by
-     * the first non-progress item before and after it. Defaults to `false`
-     * (flat list, every progress item renders inline).
+     * Opt-in controls for how consecutive progress items render in the
+     * conversation log. Defaults flatten every progress step inline (no
+     * grouping, no connector) so existing hosts keep their behaviour.
+     */
+    executionFlow?: ExecutionFlowConfig;
+}
+export interface ExecutionFlowConfig {
+    /**
+     * When `true`, consecutive progress items are wrapped under a single
+     * collapsible "Execution Flow" header. A "run" is bounded by the first
+     * non-progress item before and after it.
+     */
+    collapsible?: boolean;
+    /**
+     * Label shown on the collapsible header. Defaults to `'Execution Flow'`.
      */
-    collapsibleProgressGroup?: boolean;
+    label?: string;
     /**
-     * Label shown on the collapsible progress group header when
-     * `collapsibleProgressGroup` is enabled. Defaults to `'Execution Flow'`.
+     * Resolve a domain-specific icon for each progress step. Called with
+     * `InfoListItem.actionKind` (e.g. `'Planning'`, `'Locate'`, `'Tap'`,
+     * `'Input'`, `'RunAdbShell'`). Returning a React node renders it to
+     * the left of the status glyph inside the pill; returning `undefined`
+     * falls back to the default mapping shipped by the visualiser, and
+     * returning `null` hides the icon slot entirely.
      */
-    progressGroupLabel?: string;
+    resolveActionIcon?: (kind: string) => ReactNode | null | undefined;
 }
 /**
  * Optional visual chrome overrides for the embedded prompt input.

package/dist/types/utils/progress-action-icon.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+/**
+ * Default icon mapping for an `InfoListItem.actionKind` (which is
+ * `ExecutionTask.subType || ExecutionTask.type` — see
+ * `packages/core/src/agent/ui-utils.ts`). Returns `null` to mean
+ * "no icon for this kind"; callers should render the status glyph only.
+ *
+ * Hosts can override this entirely via
+ * `ExecutionFlowConfig.resolveActionIcon`.
+ */
+export declare function defaultProgressActionIcon(kind: string): ReactNode | null;
+/**
+ * Resolve the icon for a progress action, applying the host's override
+ * (if any) before falling back to the default mapping.
+ */
+export declare function resolveProgressActionIcon(kind: string | undefined, override?: (kind: string) => ReactNode | null | undefined): ReactNode | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.7.5-beta-20260421030751.0",
+  "version": "1.7.5",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -58,10 +58,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/playground": "1.7.5-beta-20260421030751.0",
-    "@midscene/core": "1.7.5-beta-20260421030751.0",
-    "@midscene/shared": "1.7.5-beta-20260421030751.0",
-    "@midscene/web": "1.7.5-beta-20260421030751.0"
+    "@midscene/core": "1.7.5",
+    "@midscene/shared": "1.7.5",
+    "@midscene/playground": "1.7.5",
+    "@midscene/web": "1.7.5"
   },
   "license": "MIT",
   "scripts": {