feat(AL-13652): upgrade Appium Inspector to v2026.2.1 with AppLive customizations

[mayank2498]

Summary

• Upgrades Appium Inspector to v2026.2.1 (React 19, Vite 6, antd 6)
• Re-implements 7 AppLive behavioral customizations on the new version:
  • Default tab set to Attach to Session; server tabs filtered to Remote only
  • URL param pre-fill for host/port/path from query string; window.AppLiveSessionId assignment
  • Auto-attach to session when exactly one running Appium session is found
  • PostMessage instrumentation events for tab switches, element search, tap, element select, API method calls, manual refresh, auto-reload toggle, home button, and quit session
  • Auto-reload toggle + manual refresh button in header toolbar with triggerAutoRefresh listener
  • Quit session postMessage to notify AppLive parent page
• Restricts i18n to English only
• Pins Node ≥ 23 (required by Vite 6)
• Reduces body min-width from 870px → 770px

Test plan

• Run npm run build:browser:url with PUBLIC_URL=/appium-inspector/assets/v5/ — verify dist-browser/index.html asset paths
• Upload dist-browser/ to staging S3 and validate on real iOS device (Appium 1.21.0 compatibility)
• Verify auto-attach fires when session is active
• Verify postMessage events reach browserstack-fe InspectorTabs listener
• Verify manual refresh and auto-reload toggle work in header
• All unit tests pass: npm run test:unit

Jira: https://browserstack.atlassian.net/browse/AL-13652

🤖 Generated with Claude Code

[siddhesh-browserstack]

This ref is initialized from the prop once but never synced back if isAutoReloadEnabled changes from outside (e.g. session reset or component remount). The windowMessageCallback reads isAutoReloadEnabledRef.current to gate triggerAutoRefresh, so a stale ref here means auto-refresh could keep firing even after it's been disabled externally.

Could you add a useEffect to keep it in sync?

useEffect(() => {
  isAutoReloadEnabledRef.current = isAutoReloadEnabled;
}, [isAutoReloadEnabled]);

[mayank2498]

Fixed — added a useEffect to keep isAutoReloadEnabledRef in sync with the isAutoReloadEnabled prop.

[siddhesh-browserstack]

The quitSession postMessage fires here regardless of whether this was a user-initiated quit or an unexpected server termination — manualQuit is false in the latter case but the message sent to AppLive looks identical either way.

On the bsfe side, the quitSession listener collapses the inspector panel and resets isAppiumInspectorInitiated. If a session gets killed by the server unexpectedly, the user will see the panel disappear silently with no indication of what happened.

Worth differentiating — something like passing manualQuit in the payload so AppLive can show an error state instead of silently closing:

window.parent.postMessage(
  {type: NORMAL_WINDOW_MESSAGE_EVENT, data: 'quitSession', manualQuit, sessionId: window.AppLiveSessionId},
  WINDOW_MESSAGE_TARGET_ORIGIN,
);

[mayank2498]

Fixed — manualQuit is now included in the postMessage payload:

{type: NORMAL_WINDOW_MESSAGE_EVENT, data: 'quitSession', manualQuit, sessionId: window.AppLiveSessionId}

This lets the AppLive parent distinguish an unexpected server termination (manualQuit: false) from a user-initiated quit (manualQuit: true) and show an appropriate error state rather than silently collapsing the panel. The bsfe listener will need a corresponding update to act on this field.

[siddhesh-browserstack]

Using '*' as the target origin means all these postMessage events — which include session IDs, API method names, and durations — get broadcast to any parent frame, not just AppLive. In our current setup that's fine since this is always embedded in a BrowserStack-controlled page, but if this ever gets used elsewhere it would leak session metadata silently.

Even if locking it down to a specific origin isn't feasible right now (e.g. because the parent origin varies across environments), can we at least add a comment here explaining why '*' is intentional? Something like:

// '*' is used because the AppLive parent origin varies across environments (prod/staging/local).
// This file is only built for the AppLive-embedded context, not the standalone inspector.
export const WINDOW_MESSAGE_TARGET_ORIGIN = '*';

That way the next person who sees this doesn't assume it's an oversight.

[mayank2498]

Added a comment explaining the intent:

// '*' is intentional: the AppLive parent origin varies across prod/staging/local environments.
// This file is only built for the AppLive-embedded context, not the standalone inspector.
export const WINDOW_MESSAGE_TARGET_ORIGIN = '*';

[siddhesh-browserstack]

The version is hardcoded in the URL string here. When we upgrade to v2026.x.x next time, this will silently keep pointing to the v2026.2.1 release page unless someone catches it in the PR.

Could you derive this from a version constant instead? Something like:

import {APPIUM_INSPECTOR_VERSION} from '../../constants/common.js';
// ...
openLink(`https://github.com/appium/appium-inspector/releases/tag/v${APPIUM_INSPECTOR_VERSION}`)

Same applies to the button label on line 228 — both would stay in sync automatically that way.

[mayank2498]

Fixed — extracted to APPIUM_INSPECTOR_VERSION in constants/common.js and used it in both the URL and the button label:

// common.js
export const APPIUM_INSPECTOR_VERSION = '2026.2.1';

// SessionBuilder.jsx
openLink(`https://github.com/appium/appium-inspector/releases/tag/v${APPIUM_INSPECTOR_VERSION}`)
// ...
{`Appium Inspector v${APPIUM_INSPECTOR_VERSION}`}

Next upgrade only needs a single change in common.js.

[siddhesh-browserstack]

All four feedback items addressed correctly — the useEffect ref sync, manualQuit in the quit payload, the '*' origin comment, and the APPIUM_INSPECTOR_VERSION constant. LGTM!