@mobilewright/inspector 0.0.49 → 0.0.51

package/dist/lib/locator-derivation.d.ts

@@ -15,16 +15,20 @@ export type Locator = {
     value: string;
 };
 /**
- * Derive the best mobilewright locator for a single ViewNode.
- * Returns null when no supported locator field is present.
+ * Derive all matching mobilewright locators for a single ViewNode.
+ * Returns array ordered by priority: testId > role > label > text.
+ * Empty array when no supported locator field is present.
  */
+export declare function deriveLocators(node: ViewNode): Locator[];
+/** Keep single-locator derive for backward compat — returns highest priority match or null. */
 export declare function deriveLocator(node: ViewNode): Locator | null;
 /**
- * Flatten a ViewNode tree depth-first and annotate each node with its best locator.
- * Nodes with no locatable field are included with locator: null.
+ * Flatten a ViewNode tree depth-first and annotate each node with its locators.
+ * Nodes with no locatable field are included with locators: [].
  */
 export declare function deriveElementList(roots: ViewNode[]): Array<{
     node: ViewNode;
     locator: Locator | null;
+    locators: Locator[];
 }>;
 //# sourceMappingURL=locator-derivation.d.ts.map

package/dist/lib/locator-derivation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locator-derivation.d.ts","sourceRoot":"","sources":["../../src/lib/locator-derivation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAkBvD,gFAAgF;AAChF,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAG,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAiBtC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI,CAgB5D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,KAAK,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAAC,CAapD"}
+{"version":3,"file":"locator-derivation.d.ts","sourceRoot":"","sources":["../../src/lib/locator-derivation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAavD,gFAAgF;AAChF,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAG,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAyBtC;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,CAkBxD;AAED,+FAA+F;AAC/F,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI,CAE5D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,KAAK,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,OAAO,EAAE,CAAA;CAAE,CAAC,CAazE"}

package/dist/lib/locator-derivation.js

@@ -1,64 +1,70 @@
 // Derives the best mobilewright locator for every node in a ViewNode tree.
-// Priority: Test ID > Role > Label > Text. Mirrors @mobilewright/core query-engine.ts.
-// If mobilewright changes matching rules, update ROLE_TYPE_MAP below to stay in sync.
-/** Maps mobilewright role names to the node type strings that resolve to each role. */
-const ROLE_TYPE_MAP = {
-    button: ['button', 'imagebutton'],
-    textfield: ['textfield', 'securetextfield', 'edittext', 'searchfield', 'reactedittext'],
-    text: ['statictext', 'textview', 'text', 'reacttextview'],
-    image: ['image', 'imageview', 'reactimageview'],
-    switch: ['switch', 'toggle'],
-    checkbox: ['checkbox'],
-    slider: ['slider', 'seekbar'],
-    list: ['table', 'collectionview', 'listview', 'recyclerview', 'scrollview', 'reactscrollview'],
-    listitem: ['cell', 'linearlayout', 'relativelayout'],
-    tab: ['tab', 'tabbar'],
-    link: ['link'],
-    header: ['navigationbar', 'toolbar', 'header'],
-};
+// Priority: Test ID > Role > Label > Text. Mirrors @mobilewright/core query-engine.ts,
+// and reuses its ROLE_TYPE_MAP so role derivation cannot drift from role matching.
+import { ROLE_TYPE_MAP, bareTypeName } from '@mobilewright/core';
+// core declares ROLE_TYPE_MAP `as const`, so each value is a readonly tuple of
+// string literals. Widen to plain strings once, here, so membership can be tested
+// against an arbitrary node type.
+const ROLE_TYPES = Object.entries(ROLE_TYPE_MAP);
+// Types that ROLE_TYPE_MAP matches on purpose but that must not be *suggested*:
+// iOS reports generic containers as "other", so deriving getByRole('listitem')
+// from one would hand the user a locator matching much of the tree.
+const TYPES_TOO_GENERIC_TO_SUGGEST = new Set(['other']);
 /** Map node.type to a mobilewright role string. Returns null for unmapped types. */
 function deriveRole(node) {
-    const type = (node.type ?? '').toLowerCase();
+    // Same normalization core applies before matching: strips the Android package
+    // path ("android.widget.EditText") and the iOS "XCUIElementType" prefix.
+    const type = bareTypeName(node.type ?? '');
     if (type === 'reactviewgroup') {
         const isClickable = node.raw?.['clickable'] === 'true' || node.raw?.['accessible'] === 'true';
         return isClickable ? 'button' : null;
     }
-    for (const [role, types] of Object.entries(ROLE_TYPE_MAP)) {
-        if (types.includes(type))
+    if (TYPES_TOO_GENERIC_TO_SUGGEST.has(type)) {
+        return null;
+    }
+    for (const [role, types] of ROLE_TYPES) {
+        if (types.includes(type)) {
             return role;
+        }
     }
     return null;
 }
 /**
- * Derive the best mobilewright locator for a single ViewNode.
- * Returns null when no supported locator field is present.
+ * Derive all matching mobilewright locators for a single ViewNode.
+ * Returns array ordered by priority: testId > role > label > text.
+ * Empty array when no supported locator field is present.
  */
-export function deriveLocator(node) {
+export function deriveLocators(node) {
+    const locators = [];
     const testId = node.identifier || node.resourceId;
     if (testId)
-        return { kind: 'testId', value: testId };
+        locators.push({ kind: 'testId', value: testId });
     const role = deriveRole(node);
     if (role) {
         const name = node.label || node.text || undefined;
-        return { kind: 'role', value: role, name };
+        locators.push({ kind: 'role', value: role, name });
     }
     if (node.label)
-        return { kind: 'label', value: node.label };
+        locators.push({ kind: 'label', value: node.label });
     const text = node.text ?? (node.value != null ? String(node.value) : undefined);
     if (text)
-        return { kind: 'text', value: text };
-    return null;
+        locators.push({ kind: 'text', value: text });
+    return locators;
+}
+/** Keep single-locator derive for backward compat — returns highest priority match or null. */
+export function deriveLocator(node) {
+    return deriveLocators(node)[0] ?? null;
 }
 /**
- * Flatten a ViewNode tree depth-first and annotate each node with its best locator.
- * Nodes with no locatable field are included with locator: null.
+ * Flatten a ViewNode tree depth-first and annotate each node with its locators.
+ * Nodes with no locatable field are included with locators: [].
  */
 export function deriveElementList(roots) {
     const result = [];
-    /** Depth-first recursive walk, pushing each visited node to result. */
     function walk(nodes) {
         for (const node of nodes) {
-            result.push({ node, locator: deriveLocator(node) });
+            const nodeLocators = deriveLocators(node);
+            result.push({ node, locator: nodeLocators[0] ?? null, locators: nodeLocators });
             if (node.children?.length)
                 walk(node.children);
         }

package/dist/lib/locator-derivation.js.map

@@ -1 +1 @@
-{"version":3,"file":"locator-derivation.js","sourceRoot":"","sources":["../../src/lib/locator-derivation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"locator-derivation.js","sourceRoot":"","sources":["../../src/lib/locator-derivation.ts"],"names":[],"mappings":"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"}

package/dist/routes/inspect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspect.d.ts","sourceRoot":"","sources":["../../src/routes/inspect.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,aAAa,EAAE,aAAa,8CA2C/D"}
+{"version":3,"file":"inspect.d.ts","sourceRoot":"","sources":["../../src/routes/inspect.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,aAAa,EAAE,aAAa,8CAqD/D"}

package/dist/routes/inspect.js

@@ -3,7 +3,7 @@ import { deriveElementList } from '../lib/locator-derivation.js';
 import { logger } from '../lib/logger.js';
 const MAX_RETRIES = 3;
 const RETRY_DELAY_MS = 1500;
-const ATTEMPT_TIMEOUT_MS = 10_000;
+const OP_TIMEOUT_MS = 10_000;
 /**
  * Express router for the inspect endpoint.
  * GET /api/inspect — returns screenshot + element list from the same device moment.
@@ -24,14 +24,24 @@ export function createInspectRouter(deviceManager) {
         }
         try {
             const { screenshotBuffer, tree, size } = await attemptWithRetry(device);
-            const elements = deriveElementList(tree).map(({ node, locator }, index) => ({
+            const elements = deriveElementList(tree).map(({ node, locator, locators }, index) => ({
                 index,
                 type: node.type,
                 label: node.label ?? null,
                 text: node.text ?? null,
                 bounds: node.bounds,
                 isVisible: node.isVisible,
+                identifier: node.identifier ?? null,
+                resourceId: node.resourceId ?? null,
+                placeholder: node.placeholder ?? null,
+                value: node.value ?? null,
+                isEnabled: node.isEnabled ?? true,
+                isSelected: node.isSelected ?? null,
+                isFocused: node.isFocused ?? null,
+                isChecked: node.isChecked ?? null,
+                raw: node.raw ?? null,
                 locator,
+                locators,
             }));
             res.json({
                 screenshot: `data:image/png;base64,${screenshotBuffer.toString('base64')}`,
@@ -49,31 +59,66 @@ export function createInspectRouter(deviceManager) {
     });
     return router;
 }
-/** Run screenshot + viewTree + screenSize together, retrying up to MAX_RETRIES times on failure. */
+/**
+ * Run screenshot + viewTree + screenSize, retrying up to MAX_RETRIES.
+ *
+ * Strategy: first attempt runs all 3 in parallel for speed.  Retries
+ * run only the failed ops sequentially (1 at a time) so that abandoned
+ * RPCs from timed-out attempts never stack up more than 2 concurrent
+ * mobilecli worker slots per retry cycle.
+ */
 async function attemptWithRetry(device) {
-    let lastErr;
-    for (let i = 0; i < MAX_RETRIES; i++) {
-        try {
-            return await withTimeout(Promise.all([device.screen.screenshot(), device.screen.viewTree(), device.screenSize()]).then(([screenshotBuffer, tree, size]) => ({ screenshotBuffer, tree, size })), ATTEMPT_TIMEOUT_MS, `Device operation timed out after ${ATTEMPT_TIMEOUT_MS}ms`);
+    const ops = [
+        { key: 'screenshotBuffer', run: () => device.screen.screenshot() },
+        { key: 'tree', run: () => device.screen.viewTree() },
+        { key: 'size', run: () => device.screenSize() },
+    ];
+    const results = {};
+    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+        const pending = ops.filter(op => !(op.key in results));
+        if (pending.length === 0)
+            break;
+        if (attempt === 0) {
+            const settled = await Promise.allSettled(pending.map(op => timeoutAfter(op.run(), OP_TIMEOUT_MS)));
+            for (let i = 0; i < settled.length; i++) {
+                const result = settled[i];
+                if (result.status === 'fulfilled')
+                    results[pending[i].key] = result.value;
+            }
         }
-        catch (err) {
-            lastErr = err;
-            logger.warn(`Inspect attempt ${i + 1}/${MAX_RETRIES} failed: ${err.message}`);
-            if (i < MAX_RETRIES - 1)
-                await new Promise(r => setTimeout(r, RETRY_DELAY_MS));
+        else {
+            for (const op of pending) {
+                try {
+                    results[op.key] = await timeoutAfter(op.run(), OP_TIMEOUT_MS);
+                }
+                catch (err) {
+                    logger.warn(`Inspect ${op.key} attempt ${attempt + 1}/${MAX_RETRIES} failed: ${err.message}`);
+                }
+            }
         }
+        const stillPending = ops.filter(op => !(op.key in results));
+        if (stillPending.length > 0 && attempt < MAX_RETRIES - 1) {
+            await new Promise(r => setTimeout(r, RETRY_DELAY_MS));
+        }
+    }
+    const missing = ops.filter(op => !(op.key in results));
+    if (missing.length > 0) {
+        throw new Error(`Inspect failed: ${missing.map(o => o.key).join(', ')} did not complete`);
     }
-    throw lastErr;
+    return {
+        screenshotBuffer: results.screenshotBuffer,
+        tree: results.tree,
+        size: results.size,
+    };
 }
-/**
- * Race promise against a ms deadline. Rejects with message on timeout.
- * Note: cannot cancel the underlying promise; it continues running until the driver times out.
- */
-function withTimeout(promise, ms, message) {
+/** Reject a promise if it doesn't settle within ms. */
+function timeoutAfter(promise, ms) {
+    if (ms <= 0)
+        return Promise.reject(new Error('Deadline exceeded'));
     let timer;
     return Promise.race([
         promise,
-        new Promise((_, reject) => { timer = setTimeout(() => reject(new Error(message)), ms); }),
+        new Promise((_, reject) => { timer = setTimeout(() => reject(new Error(`Operation timed out after ${ms}ms`)), ms); }),
     ]).finally(() => clearTimeout(timer));
 }
 //# sourceMappingURL=inspect.js.map

package/dist/routes/inspect.js.map

@@ -1 +1 @@
-{"version":3,"file":"inspect.js","sourceRoot":"","sources":["../../src/routes/inspect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAGjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,MAAM,WAAW,GAAG,CAAC,CAAC;AACtB,MAAM,cAAc,GAAG,IAAI,CAAC;AAC5B,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAElC;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,aAA4B;IAC9D,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IAExB,mBAAmB;IACnB,qEAAqE;IACrE,MAAM,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;QACzC,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CAAC;YACtD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,EAAE,CAAC;YAClC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,6BAA6B,EAAE,CAAC,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAExE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC1E,KAAK;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;gBACvB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO;aACR,CAAC,CAAC,CAAC;YAEJ,GAAG,CAAC,IAAI,CAAC;gBACP,UAAU,EAAE,yBAAyB,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAC1E,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;gBAClD,QAAQ;aACT,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,CAAC,KAAK,CAAC,mBAAoB,GAAa,CAAC,OAAO,EAAE,CAAC,CAAC;YAC1D,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAG,GAAa,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,CAAC;gBAAS,CAAC;YACT,aAAa,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,oGAAoG;AACpG,KAAK,UAAU,gBAAgB,CAAC,MAAc;IAC5C,IAAI,OAAgB,CAAC;IACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,IAAI,CAAC;YACH,OAAO,MAAM,WAAW,CACtB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,CAC3F,CAAC,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CACvE,EACD,kBAAkB,EAClB,oCAAoC,kBAAkB,IAAI,CAC3D,CAAC;QACJ,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,GAAG,GAAG,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,IAAI,WAAW,YAAa,GAAa,CAAC,OAAO,EAAE,CAAC,CAAC;YACzF,IAAI,CAAC,GAAG,WAAW,GAAG,CAAC;gBAAE,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IACD,MAAM,OAAO,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,SAAS,WAAW,CAAI,OAAmB,EAAE,EAAU,EAAE,OAAe;IACtE,IAAI,KAAoC,CAAC;IACzC,OAAO,OAAO,CAAC,IAAI,CAAC;QAClB,OAAO;QACP,IAAI,OAAO,CAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;KACjG,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC"}
+{"version":3,"file":"inspect.js","sourceRoot":"","sources":["../../src/routes/inspect.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilewright/inspector",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Browser-based element inspector for mobilewright",
   "homepage": "https://mobilewright.dev",
   "license": "Apache-2.0",
@@ -31,8 +31,8 @@
     "public"
   ],
   "dependencies": {
-    "@mobilewright/core": "^0.0.49",
-    "@mobilewright/protocol": "^0.0.49",
+    "@mobilewright/core": "^0.0.51",
+    "@mobilewright/protocol": "^0.0.51",
     "express": "^5.2.1",
     "open": "^10.2.0"
   },

package/public/css/app.css

@@ -451,3 +451,238 @@ main {
   padding: 40px 20px;
   text-align: center;
 }
+
+/* ---- Multi-locator row enhancements ---- */
+
+.locator-more {
+  font-size: 9px;
+  color: var(--c-text-muted);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+  cursor: default;
+}
+
+/* ---- Detail pane ---- */
+
+#detail-pane {
+  flex: 0 0 320px;
+  overflow-y: auto;
+  background: var(--c-surface);
+  border-left: 1px solid var(--c-border);
+  display: flex;
+  flex-direction: column;
+  animation: slide-in 0.15s ease-out;
+}
+
+@keyframes slide-in {
+  from { flex-basis: 0; opacity: 0; }
+  to   { flex-basis: 320px; opacity: 1; }
+}
+
+#detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--c-border);
+  position: sticky;
+  top: 0;
+  background: var(--c-surface);
+  z-index: 1;
+}
+
+#detail-type {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--c-text-strong);
+  text-transform: capitalize;
+}
+
+#detail-close {
+  background: none;
+  border: none;
+  color: var(--c-text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+#detail-close:hover { color: var(--c-text); }
+
+#detail-body {
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Locator strategies section */
+#detail-locators {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-section-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-text-muted);
+  margin-bottom: 6px;
+}
+
+.detail-locator-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  background: var(--c-surface2);
+  border-radius: 4px;
+  border: 1px solid var(--c-border2);
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
+  font-size: 11px;
+  cursor: pointer;
+  transition: border-color 0.1s;
+}
+
+.detail-locator-row:hover {
+  border-color: var(--c-accent);
+}
+
+.detail-locator-row .locator-badge {
+  font-size: 9px;
+  padding: 1px 5px;
+  min-width: auto;
+}
+
+.detail-locator-row .locator-value {
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.detail-locator-row .copy-btn {
+  background: none;
+  border: none;
+  color: var(--c-text-dim);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.detail-locator-row:hover .copy-btn {
+  opacity: 1;
+}
+
+.detail-locator-row .copy-btn:hover {
+  color: var(--c-accent);
+  background: var(--c-accent-dim);
+}
+
+.detail-locator-row .copy-btn.copied {
+  color: var(--c-selected);
+  opacity: 1;
+}
+
+/* Properties table */
+#detail-properties {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.detail-prop-row {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--c-surface2);
+  border-radius: 3px;
+  gap: 8px;
+}
+
+.detail-prop-key {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--c-text-muted);
+  text-transform: capitalize;
+  flex-shrink: 0;
+  min-width: 70px;
+}
+
+.detail-prop-value {
+  font-size: 11px;
+  color: var(--c-text);
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
+  word-break: break-all;
+  flex: 1;
+}
+
+.detail-prop-value.boolean-true { color: var(--c-selected); }
+.detail-prop-value.boolean-false { color: var(--c-status-error); }
+
+/* Raw attributes */
+#detail-raw {
+  margin-top: 4px;
+}
+
+.detail-raw-toggle {
+  background: none;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  color: var(--c-text-muted);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 4px 10px;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+
+.detail-raw-toggle:hover {
+  background: var(--c-row-hover);
+  color: var(--c-text);
+}
+
+.detail-raw-content {
+  margin-top: 4px;
+  padding: 8px;
+  background: var(--c-surface2);
+  border-radius: 4px;
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
+  font-size: 10px;
+  color: var(--c-text-muted);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* ---- Responsive ---- */
+
+@media (max-width: 900px) {
+  main {
+    flex-direction: column;
+  }
+  #screenshot-pane {
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--c-border);
+  }
+  #detail-pane {
+    flex: 1;
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--c-border);
+  }
+}

package/public/index.html

@@ -60,6 +60,17 @@
     <section id="elements-pane">
       <div id="elements-list"></div>
     </section>
+    <section id="detail-pane" hidden>
+      <div id="detail-header">
+        <span id="detail-type"></span>
+        <button id="detail-close" aria-label="Close detail panel">&times;</button>
+      </div>
+      <div id="detail-body">
+        <div id="detail-locators"></div>
+        <div id="detail-properties"></div>
+        <div id="detail-raw" hidden></div>
+      </div>
+    </section>
   </main>
 
   <script src="/js/app.js" type="module"></script>

package/public/js/app.js

@@ -153,6 +153,171 @@ class ScreenshotPane {
   }
 }
 
+// ---- DetailPane ----
+// Shows element properties, all locator strategies, raw attributes.
+
+class DetailPane {
+  #pane
+  #typeEl
+  #locatorsEl
+  #propsEl
+  #rawEl
+  #closeBtn
+  #onCloseCb = null
+
+  constructor() {
+    this.#pane = document.getElementById('detail-pane')
+    this.#typeEl = document.getElementById('detail-type')
+    this.#locatorsEl = document.getElementById('detail-locators')
+    this.#propsEl = document.getElementById('detail-properties')
+    this.#rawEl = document.getElementById('detail-raw')
+    this.#closeBtn = document.getElementById('detail-close')
+    this.#closeBtn.addEventListener('click', () => {
+      this.hide()
+      this.#onCloseCb?.()
+    })
+  }
+
+  onClose(cb) { this.#onCloseCb = cb }
+
+  show(el) {
+    if (!el) { this.hide(); return }
+
+    this.#typeEl.textContent = el.type ?? 'unknown'
+
+    // Locators
+    this.#locatorsEl.innerHTML = ''
+    if (el.locators?.length) {
+      const label = document.createElement('div')
+      label.className = 'detail-section-label'
+      label.textContent = 'Locator Strategies'
+      this.#locatorsEl.appendChild(label)
+
+      for (const loc of el.locators) {
+        const row = document.createElement('div')
+        row.className = 'detail-locator-row'
+        row.title = 'Click to copy'
+
+        const badge = document.createElement('span')
+        badge.className = `locator-badge badge-${loc.kind}`
+        badge.textContent = loc.kind
+        row.appendChild(badge)
+
+        const val = document.createElement('span')
+        val.className = 'locator-value'
+        val.textContent = locatorLabel(loc)
+        row.appendChild(val)
+
+        const copyBtn = document.createElement('button')
+        copyBtn.className = 'copy-btn'
+        copyBtn.textContent = '📋'
+        copyBtn.title = 'Copy locator'
+        copyBtn.addEventListener('click', e => {
+          e.stopPropagation()
+          navigator.clipboard.writeText(locatorLabel(loc)).then(() => {
+            copyBtn.textContent = '✓'
+            copyBtn.classList.add('copied')
+            setTimeout(() => { copyBtn.textContent = '📋'; copyBtn.classList.remove('copied') }, 1500)
+          }).catch(() => {})
+        })
+        row.appendChild(copyBtn)
+
+        row.addEventListener('click', () => {
+          navigator.clipboard.writeText(locatorLabel(loc)).catch(() => {})
+        })
+
+        this.#locatorsEl.appendChild(row)
+      }
+    } else {
+      const row = document.createElement('div')
+      row.className = 'detail-locator-row'
+      row.style.opacity = '0.5'
+      row.textContent = '(no locator available)'
+      this.#locatorsEl.appendChild(row)
+    }
+
+    // Properties
+    this.#propsEl.innerHTML = ''
+    const propLabel = document.createElement('div')
+    propLabel.className = 'detail-section-label'
+    propLabel.textContent = 'Properties'
+    this.#propsEl.appendChild(propLabel)
+
+    const props = [
+      { key: 'type', value: el.type },
+      { key: 'label', value: el.label },
+      { key: 'text', value: el.text },
+      { key: 'identifier', value: el.identifier },
+      { key: 'resourceId', value: el.resourceId },
+      { key: 'placeholder', value: el.placeholder },
+      { key: 'value', value: el.value },
+      { key: 'bounds', value: el.bounds ? `${el.bounds.x},${el.bounds.y} ${el.bounds.width}×${el.bounds.height}` : null },
+      { key: 'visible', value: el.isVisible },
+      { key: 'enabled', value: el.isEnabled },
+      { key: 'selected', value: el.isSelected },
+      { key: 'focused', value: el.isFocused },
+      { key: 'checked', value: el.isChecked },
+    ]
+
+    for (const p of props) {
+      if (p.value === null || p.value === undefined) continue
+      const row = document.createElement('div')
+      row.className = 'detail-prop-row'
+
+      const key = document.createElement('span')
+      key.className = 'detail-prop-key'
+      key.textContent = p.key
+      row.appendChild(key)
+
+      const val = document.createElement('span')
+      val.className = 'detail-prop-value'
+      if (typeof p.value === 'boolean') {
+        val.className += p.value ? ' boolean-true' : ' boolean-false'
+        val.textContent = String(p.value)
+      } else {
+        val.textContent = String(p.value)
+      }
+      row.appendChild(val)
+
+      this.#propsEl.appendChild(row)
+    }
+
+    // Raw attributes (collapsible)
+    if (el.raw && typeof el.raw === 'object' && Object.keys(el.raw).length > 0) {
+      this.#rawEl.hidden = false
+      this.#rawEl.innerHTML = ''
+
+      const toggle = document.createElement('button')
+      toggle.className = 'detail-raw-toggle'
+      toggle.textContent = `▶ Raw Attributes (${Object.keys(el.raw).length})`
+      this.#rawEl.appendChild(toggle)
+
+      const content = document.createElement('div')
+      content.className = 'detail-raw-content'
+      content.hidden = true
+      content.textContent = JSON.stringify(el.raw, null, 2)
+
+      toggle.addEventListener('click', () => {
+        const isHidden = content.hidden
+        content.hidden = !isHidden
+        toggle.textContent = isHidden
+          ? `▼ Raw Attributes (${Object.keys(el.raw).length})`
+          : `▶ Raw Attributes (${Object.keys(el.raw).length})`
+      })
+
+      this.#rawEl.appendChild(content)
+    } else {
+      this.#rawEl.hidden = true
+    }
+
+    this.#pane.hidden = false
+  }
+
+  hide() {
+    this.#pane.hidden = true
+  }
+}
+
 // ---- ElementsPane ----
 // Owns the element list: rendering rows, selection state, visibility toggles.
 
@@ -245,6 +410,14 @@ class ElementsPane {
       row.appendChild(warn)
     }
 
+    if (el.locators && el.locators.length > 1) {
+      const more = document.createElement('span')
+      more.className = 'locator-more'
+      more.textContent = `+${el.locators.length - 1} more`
+      more.title = el.locators.slice(1).map(l => locatorLabel(l)).join('\n')
+      row.appendChild(more)
+    }
+
     const type = document.createElement('span')
     type.className = 'element-type'
     type.textContent = el.type ?? ''
@@ -297,6 +470,7 @@ class Inspector {
 
   #screenshotPane = new ScreenshotPane()
   #elementsPane = new ElementsPane()
+  #detailPane = new DetailPane()
   #deviceSelect = document.getElementById('device-select')
   #refreshBtn = document.getElementById('refresh-btn')
   #autoRefreshToggle = document.getElementById('auto-refresh-toggle')
@@ -307,6 +481,7 @@ class Inspector {
     this.#screenshotPane.onElementClick(i => this.#selectElement(i))
     this.#elementsPane.onElementClick(i => this.#selectElement(i))
     this.#elementsPane.onToggleHidden(i => this.#toggleHidden(i))
+    this.#detailPane.onClose(() => { this.#state.selectedIndex = null; this.#screenshotPane.setSelectedIndex(null); this.#elementsPane.setSelectedIndex(null) })
 
     this.#refreshBtn.addEventListener('click', () => this.refresh())
     this.#deviceSelect.addEventListener('change', () => {
@@ -353,6 +528,7 @@ class Inspector {
       const data = await res.json()
       this.#state.elements = data.elements ?? []
       this.#state.selectedIndex = null
+      this.#detailPane.hide()
       this.#state.logicalWidth = data.screen?.width ?? 0
       this.#state.logicalHeight = data.screen?.height ?? 0
 
@@ -485,6 +661,8 @@ class Inspector {
     this.#state.selectedIndex = index
     this.#screenshotPane.setSelectedIndex(index)
     this.#elementsPane.setSelectedIndex(index)
+    const el = this.#state.elements.find(e => e.index === index)
+    this.#detailPane.show(el ?? null)
   }
 
   #toggleHidden(index) {