@aixnn/aixautots 0.0.0-stage → 0.5.3

package/dist/ui/inspector.js

@@ -0,0 +1,1250 @@
+import { useAixT } from '../chunk-64Q7BBIQ.js';
+import { Select, Button, cn, Input, Dialog } from '../chunk-EVHTAXQG.js';
+import { useInspectorView, useDevicesView, useLocators } from '../chunk-O34SNDQB.js';
+import '../chunk-V4MXFPDX.js';
+import '../chunk-IJVNII5N.js';
+import { useClient } from '../chunk-UINEPEIE.js';
+import '../chunk-OXIM6EYO.js';
+import '../chunk-TATL3HTE.js';
+import '../chunk-NWFYTFMI.js';
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { Upload, RefreshCw, ChevronsUp, ChevronsDown, MousePointer2, Circle, Square, Search, Laptop, Smartphone, Check, Copy, Crosshair, TimerReset, Eraser, ImageDown, Keyboard, Save, Trash2, X, ChevronDown, ChevronRight, ArrowLeft, Home, SquareStack, CornerDownLeft, Delete } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ScreenshotPanel({
+  screenshot,
+  selectedElement,
+  loading,
+  deviceName,
+  platform,
+  interactMode = false,
+  matches = [],
+  onCoordinateClick
+}) {
+  const imgRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  const syncScale = useCallback(() => {
+    const img = imgRef.current;
+    if (img && img.naturalWidth > 0) {
+      setScale(img.clientWidth / img.naturalWidth);
+    }
+  }, []);
+  useEffect(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    const ro = new ResizeObserver(syncScale);
+    ro.observe(img);
+    return () => ro.disconnect();
+  }, [syncScale, screenshot]);
+  const isDesktop = platform === "macos" || platform === "windows";
+  const DeviceIcon = isDesktop ? Laptop : Smartphone;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-secondary/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 h-11 border-b border-border bg-background/40 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(DeviceIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-foreground", children: deviceName ?? "Device Mirror" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        matches.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1.5 py-0.5 rounded-full bg-warning/15 text-warning text-[10px] font-medium", children: [
+          matches.length,
+          " match",
+          matches.length === 1 ? "" : "es"
+        ] }),
+        interactMode && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded-full bg-primary/15 text-primary text-[10px] font-medium", children: "Interact" }),
+        screenshot && imgRef.current && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-mono text-muted-foreground", children: [
+          imgRef.current.naturalWidth,
+          "\xD7",
+          imgRef.current.naturalHeight,
+          " \xB7",
+          " ",
+          Math.round(scale * 100),
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-8 overflow-auto", children: screenshot ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative bg-foreground shadow-xl ring-1 ring-border",
+          isDesktop ? "rounded-lg p-1.5" : "rounded-[2.25rem] p-2"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative overflow-hidden bg-surface cursor-crosshair",
+              isDesktop ? "rounded-md" : "rounded-[1.75rem]"
+            ),
+            onClick: (e) => {
+              const img = imgRef.current;
+              if (!img || scale <= 0) return;
+              const rect = img.getBoundingClientRect();
+              onCoordinateClick(
+                (e.clientX - rect.left) / scale,
+                (e.clientY - rect.top) / scale
+              );
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  src: screenshot,
+                  alt: "Device screenshot",
+                  className: "block max-h-[70vh] w-auto",
+                  onLoad: syncScale
+                }
+              ),
+              matches.map((m, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute border border-warning bg-warning/15 pointer-events-none",
+                  style: {
+                    left: m.rect.x * scale,
+                    top: m.rect.y * scale,
+                    width: m.rect.width * scale,
+                    height: m.rect.height * scale
+                  }
+                },
+                i
+              )),
+              selectedElement && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute border-2 border-primary bg-primary/10 pointer-events-none",
+                  style: {
+                    left: selectedElement.rect.x * scale,
+                    top: selectedElement.rect.y * scale,
+                    width: selectedElement.rect.width * scale,
+                    height: selectedElement.rect.height * scale
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: "absolute -top-5 left-0 px-1.5 py-px rounded-sm bg-primary text-primary-foreground text-[10px] leading-none font-mono whitespace-nowrap", children: [
+                    selectedElement.class_name ?? "node",
+                    " [",
+                    Math.round(selectedElement.rect.x),
+                    ", ",
+                    Math.round(selectedElement.rect.y),
+                    "]"
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center gap-2 text-muted-foreground",
+          loading && "animate-pulse"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DeviceIcon, { className: "w-8 h-8 opacity-40" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm", children: loading ? "Capturing screen..." : deviceName ? "No screenshot available" : "Select a device to start inspecting" })
+        ]
+      }
+    ) })
+  ] });
+}
+function nodeTag(node) {
+  return node.class_name ?? "node";
+}
+function nodeLabel(node) {
+  const attrs = [];
+  if (node.label) attrs.push(`label="${node.label}"`);
+  if (node.text) attrs.push(`"${node.text.slice(0, 24)}"`);
+  return `<${nodeTag(node)}${attrs.length ? " " + attrs.join(" ") : ""}>`;
+}
+function matchesFilter(node, query) {
+  if (!query) return true;
+  const haystack = `${nodeTag(node)} ${node.label ?? ""} ${node.text ?? ""} ${node.resource_id ?? ""}`.toLowerCase();
+  if (haystack.includes(query)) return true;
+  return (node.children ?? []).some((c) => matchesFilter(c, query));
+}
+function TreeNode({
+  node,
+  depth,
+  selectedElement,
+  onSelect,
+  query
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const isSelected = selectedElement?.xpath === node.xpath;
+  const hasChildren = (node.children?.length ?? 0) > 0;
+  if (!matchesFilter(node, query)) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-1 rounded-sm pr-1 transition-colors",
+          isSelected ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-secondary"
+        ),
+        style: { paddingLeft: `${depth * 14 + 4}px` },
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setExpanded((v) => !v),
+              className: "p-0.5 rounded-sm text-muted-foreground hover:text-foreground transition-colors flex-shrink-0",
+              "aria-label": expanded ? "Collapse node" : "Expand node",
+              children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "w-[1.125rem] flex-shrink-0" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onSelect(node),
+              className: cn(
+                "flex-1 min-w-0 text-left py-1 text-code-sm font-mono truncate",
+                isSelected ? "font-semibold text-primary" : "text-success"
+              ),
+              title: nodeLabel(node),
+              children: nodeLabel(node)
+            }
+          )
+        ]
+      }
+    ),
+    expanded && node.children?.map((child) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        node: child,
+        depth: depth + 1,
+        selectedElement,
+        onSelect,
+        query
+      },
+      child.xpath
+    ))
+  ] });
+}
+function UITreePanel({ tree, selectedElement, onSelectElement }) {
+  const [query, setQuery] = useState("");
+  const normalized = useMemo(() => query.trim().toLowerCase(), [query]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-r border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-3 px-4 h-11 border-b border-border bg-background/40 flex-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-label-caps text-muted-foreground", children: "UI Hierarchy" }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-border flex-shrink-0", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        placeholder: "Filter nodes...",
+        icon: /* @__PURE__ */ jsx(Search, { className: "w-3.5 h-3.5" }),
+        className: "h-8 py-1"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-2 py-2", children: tree ? /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        node: tree,
+        depth: 0,
+        selectedElement,
+        onSelect: onSelectElement,
+        query: normalized
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "text-code-sm text-muted-foreground px-2 py-1.5", children: "No UI tree data" }) })
+  ] });
+}
+
+// src/ui/inspector/inspectorLocators.ts
+var XPATH = { value: "xpath", label: "XPath" };
+var STRATEGY_OPTIONS = {
+  android: [
+    { value: "resource_id", label: "Resource ID" },
+    { value: "content_desc", label: "Content Desc (a11y)" },
+    { value: "text", label: "Text" },
+    { value: "text_contains", label: "Text Contains" },
+    { value: "class_name", label: "Class Name" },
+    XPATH
+  ],
+  ios: [
+    { value: "label", label: "Accessibility ID / Label" },
+    { value: "text", label: "Value" },
+    { value: "class_name", label: "Element Type" },
+    { value: "predicate", label: "Predicate (NSPredicate)" },
+    XPATH
+  ],
+  windows: [
+    { value: "automation_id", label: "Automation ID" },
+    { value: "label", label: "Name" },
+    { value: "control_type", label: "Control Type" },
+    { value: "class_name", label: "Class Name" },
+    XPATH
+  ],
+  macos: [
+    { value: "automation_id", label: "AXIdentifier" },
+    { value: "label", label: "AXTitle / Label" },
+    { value: "role", label: "AXRole" },
+    { value: "class_name", label: "Class Name" },
+    XPATH
+  ]
+};
+var GENERIC_STRATEGY_OPTIONS = [
+  XPATH,
+  { value: "resource_id", label: "Resource ID" },
+  { value: "label", label: "Label" },
+  { value: "text", label: "Text" },
+  { value: "class_name", label: "Class Name" }
+];
+function strategyOptionsFor(platform) {
+  return platform && STRATEGY_OPTIONS[platform] || GENERIC_STRATEGY_OPTIONS;
+}
+function strategyValue(el, strategy) {
+  switch (strategy) {
+    case "resource_id":
+      return el.resource_id;
+    case "content_desc":
+      return el.attributes["content_desc"] ?? el.label;
+    case "label":
+      return el.label ?? el.resource_id;
+    case "text":
+    case "text_contains":
+      return el.text;
+    case "class_name":
+      return el.class_name;
+    case "automation_id":
+      return el.attributes["automation_id"] ?? null;
+    case "control_type":
+      return el.attributes["control_type"] ?? null;
+    case "role":
+      return el.attributes["role"] ?? null;
+    case "xpath":
+      return el.xpath;
+    default:
+      return null;
+  }
+}
+function suggestLocators(el, platform) {
+  return strategyOptionsFor(platform).filter((o) => o.value !== "predicate").flatMap((o) => {
+    const value = strategyValue(el, o.value);
+    return value ? [{ strategy: o.value, value }] : [];
+  });
+}
+function cropElementImage(screenshot, rect) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const w = Math.max(1, Math.round(rect.width));
+      const h = Math.max(1, Math.round(rect.height));
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("canvas 2d context unavailable"));
+        return;
+      }
+      ctx.drawImage(img, rect.x, rect.y, w, h, 0, 0, w, h);
+      resolve(canvas.toDataURL("image/png"));
+    };
+    img.onerror = () => reject(new Error("screenshot decode failed"));
+    img.src = screenshot;
+  });
+}
+function downloadDataUrl(dataUrl, filename) {
+  const a = document.createElement("a");
+  a.href = dataUrl;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+function bestLocator(el, platform) {
+  return suggestLocators(el, platform)[0] ?? { strategy: "xpath", value: el.xpath };
+}
+function tapLine(el, platform) {
+  return `await device.tapElement(${JSON.stringify(bestLocator(el, platform))});`;
+}
+function longPressLine(el, _platform, durationSecs = 1) {
+  const cx = Math.round(el.rect.x + el.rect.width / 2);
+  const cy = Math.round(el.rect.y + el.rect.height / 2);
+  return `await device.longPress(${cx}, ${cy}, ${durationSecs});`;
+}
+function inputTextLine(el, platform, text) {
+  return `await device.tapElement(${JSON.stringify(bestLocator(el, platform))});
+await device.inputText(${JSON.stringify(text)});`;
+}
+function clearTextLine(el, platform) {
+  return `await device.clearText(${JSON.stringify(bestLocator(el, platform))});`;
+}
+function pressKeyLine(key) {
+  return `await device.pressKey(${JSON.stringify(key)});`;
+}
+function swipeLine(fromX, fromY, toX, toY, duration = 0.3) {
+  return `await device.swipe(${Math.round(fromX)}, ${Math.round(fromY)}, ${Math.round(toX)}, ${Math.round(toY)}, ${duration});`;
+}
+function VerifyLocatorSection({ platform, seed }) {
+  const { verify, clearMatches, matches, verifying, verifyLocator } = useInspectorView();
+  const options = strategyOptionsFor(platform);
+  const [strategy, setStrategy] = useState(options[0]?.value ?? "xpath");
+  const [value, setValue] = useState("");
+  useEffect(() => {
+    if (seed) {
+      setStrategy(seed.strategy);
+      setValue(seed.value);
+      void verify(seed.strategy, seed.value);
+    }
+  }, [seed]);
+  const run = () => void verify(strategy, value);
+  const hasResult = verifyLocator !== null;
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 py-4 border-b border-border", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-label-caps text-muted-foreground mb-2", children: "Verify Locator" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Select, { value: strategy, onChange: setStrategy, options }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && run(),
+            placeholder: "Locator value",
+            className: "flex-1 h-8 py-1 font-mono"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: run,
+            disabled: verifying || !value.trim(),
+            className: "flex-shrink-0 grid place-items-center w-9 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+            "aria-label": "Verify locator",
+            children: /* @__PURE__ */ jsx(Search, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        hasResult && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: clearMatches,
+            className: "flex-shrink-0 grid place-items-center w-9 rounded-md bg-secondary border border-border text-muted-foreground hover:text-foreground transition-colors",
+            "aria-label": "Clear matches",
+            children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    hasResult && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: `mt-2 text-code-sm ${matches.length > 0 ? "text-success" : "text-destructive"}`,
+        children: verifying ? "Searching\u2026" : matches.length > 0 ? `${matches.length} element${matches.length === 1 ? "" : "s"} matched \xB7 highlighted on screen` : "No elements matched"
+      }
+    )
+  ] });
+}
+function PanelShell({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center px-4 h-11 border-b border-border bg-background/40 flex-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-label-caps text-muted-foreground", children: "Properties" }) }),
+    children
+  ] });
+}
+function ElementDetailsPanel({
+  element,
+  platform,
+  screenshot,
+  onSaveLocator,
+  onTap,
+  onLongPress,
+  onInputText,
+  onClearText
+}) {
+  const [copiedKey, setCopiedKey] = useState(null);
+  const [captureError, setCaptureError] = useState(null);
+  const [typeText, setTypeText] = useState("");
+  const [verifySeed, setVerifySeed] = useState(null);
+  useEffect(() => setTypeText(""), [element?.xpath]);
+  if (!element) {
+    return /* @__PURE__ */ jsxs(PanelShell, { children: [
+      /* @__PURE__ */ jsx(VerifyLocatorSection, { platform, seed: verifySeed }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground text-center", children: "Select an element to inspect its properties" }) })
+    ] });
+  }
+  const attrs = Object.entries(element.attributes);
+  const suggestions = suggestLocators(element, platform);
+  const strategyLabel = (s) => strategyOptionsFor(platform).find((o) => o.value === s)?.label ?? s;
+  const copy = async (key, value) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopiedKey(key);
+      setTimeout(() => setCopiedKey(null), 1500);
+    } catch {
+    }
+  };
+  const handleCaptureImage = async () => {
+    if (!screenshot) return;
+    setCaptureError(null);
+    try {
+      const dataUrl = await cropElementImage(screenshot, element.rect);
+      const base = element.resource_id?.split("/").pop() || element.label || element.class_name?.split(".").pop() || "element";
+      downloadDataUrl(dataUrl, `${base.replace(/[^\w.-]+/g, "_")}.png`);
+    } catch (err) {
+      setCaptureError(String(err));
+    }
+  };
+  return /* @__PURE__ */ jsx(PanelShell, { children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto", children: [
+    /* @__PURE__ */ jsx(VerifyLocatorSection, { platform, seed: verifySeed }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 py-4 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-label-caps text-muted-foreground mb-2", children: [
+        "Suggested Locators",
+        platform ? ` \xB7 ${platform}` : ""
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: suggestions.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 grid place-items-center px-2 rounded-md bg-secondary/60 border border-border text-[10px] font-medium text-muted-foreground whitespace-nowrap", children: strategyLabel(s.strategy) }),
+        /* @__PURE__ */ jsx("code", { className: "flex-1 min-w-0 px-2 py-1.5 rounded-md bg-secondary border border-border text-code-sm font-mono text-primary break-all", children: s.value }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setVerifySeed({ strategy: s.strategy, value: s.value }),
+            className: "flex-shrink-0 grid place-items-center w-8 rounded-md bg-secondary border border-border text-muted-foreground hover:text-primary hover:bg-secondary/70 transition-colors",
+            "aria-label": `Verify ${strategyLabel(s.strategy)}`,
+            title: "Verify this locator on the device",
+            children: /* @__PURE__ */ jsx(Search, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copy(s.strategy, s.value),
+            className: "flex-shrink-0 grid place-items-center w-8 rounded-md bg-secondary border border-border text-muted-foreground hover:text-foreground hover:bg-secondary/70 transition-colors",
+            "aria-label": `Copy ${strategyLabel(s.strategy)}`,
+            children: copiedKey === s.strategy ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }, s.strategy)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 py-4 border-b border-border", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-label-caps text-muted-foreground mb-2", children: "Attributes" }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-code-sm font-mono border-collapse", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-secondary/60 text-foreground", children: [
+          /* @__PURE__ */ jsx("th", { className: "text-left py-1.5 px-2.5 font-semibold w-2/5 border-b border-border", children: "Key" }),
+          /* @__PURE__ */ jsx("th", { className: "text-left py-1.5 px-2.5 font-semibold border-b border-border", children: "Value" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          /* @__PURE__ */ jsx(AttrRow, { index: 0, k: "class", value: element.class_name ?? "\u2014", accent: true }),
+          element.resource_id && /* @__PURE__ */ jsx(AttrRow, { index: 1, k: "resource-id", value: element.resource_id }),
+          element.label && /* @__PURE__ */ jsx(AttrRow, { index: 2, k: "label", value: element.label }),
+          element.text && /* @__PURE__ */ jsx(AttrRow, { index: 3, k: "text", value: element.text }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 4, k: "enabled", value: String(element.enabled) }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 5, k: "visible", value: String(element.visible) }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 6, k: "x", value: String(element.rect.x) }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 7, k: "y", value: String(element.rect.y) }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 8, k: "width", value: String(element.rect.width) }),
+          /* @__PURE__ */ jsx(AttrRow, { index: 9, k: "height", value: String(element.rect.height) }),
+          attrs.map(([k, v], i) => /* @__PURE__ */ jsx(AttrRow, { index: 10 + i, k, value: v }, k))
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 py-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-label-caps text-muted-foreground mb-2", children: "Actions" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(ActionButton, { label: "Tap", onClick: () => onTap?.(element), disabled: !onTap, primary: true, children: /* @__PURE__ */ jsx(Crosshair, { className: "w-3.5 h-3.5" }) }),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            label: "Long Press",
+            onClick: () => onLongPress?.(element),
+            disabled: !onLongPress,
+            children: /* @__PURE__ */ jsx(TimerReset, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            label: "Clear",
+            onClick: () => onClearText?.(element),
+            disabled: !onClearText,
+            children: /* @__PURE__ */ jsx(Eraser, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            label: "Capture Image",
+            onClick: handleCaptureImage,
+            disabled: !screenshot,
+            children: /* @__PURE__ */ jsx(ImageDown, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-1.5 mt-3", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: typeText,
+            onChange: (e) => setTypeText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && typeText) {
+                onInputText?.(element, typeText);
+                setTypeText("");
+              }
+            },
+            placeholder: "Text to send\u2026",
+            className: "flex-1 h-8 py-1"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              if (typeText) {
+                onInputText?.(element, typeText);
+                setTypeText("");
+              }
+            },
+            disabled: !onInputText || !typeText,
+            className: "flex-shrink-0 flex items-center gap-1 px-2.5 rounded-md border border-border bg-secondary text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 text-body-sm font-medium",
+            children: [
+              /* @__PURE__ */ jsx(Keyboard, { className: "w-3.5 h-3.5" }),
+              "Send"
+            ]
+          }
+        )
+      ] }),
+      captureError && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive", children: captureError }),
+      onSaveLocator && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          className: "w-full mt-3",
+          onClick: () => onSaveLocator(element),
+          children: "Save as Locator"
+        }
+      )
+    ] })
+  ] }) });
+}
+function ActionButton({
+  label,
+  onClick,
+  disabled,
+  primary,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: cn(
+        "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-body-sm font-medium border transition-colors disabled:opacity-50",
+        primary ? "border-primary text-primary hover:bg-primary/10" : "border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
+      ),
+      children: [
+        children,
+        label
+      ]
+    }
+  );
+}
+function AttrRow({
+  index,
+  k,
+  value,
+  accent
+}) {
+  return /* @__PURE__ */ jsxs("tr", { className: cn("border-b border-border last:border-b-0", index % 2 === 1 && "bg-secondary/30"), children: [
+    /* @__PURE__ */ jsx("td", { className: "py-1.5 px-2.5 text-muted-foreground align-top", children: k }),
+    /* @__PURE__ */ jsx("td", { className: cn("py-1.5 px-2.5 break-all", accent ? "text-primary" : "text-foreground"), children: value })
+  ] });
+}
+function SaveLocatorDialog({ element, platform, onClose }) {
+  const { create } = useLocators();
+  const [name, setName] = useState("");
+  const [strategy, setStrategy] = useState("xpath");
+  const [value, setValue] = useState("");
+  const [saveError, setSaveError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const strategyOptions = strategyOptionsFor(platform);
+  useEffect(() => {
+    if (element) {
+      const best = bestLocator(element, platform);
+      setName(
+        element.label || element.text || element.resource_id || element.class_name || best.value
+      );
+      setStrategy(best.strategy);
+      setValue(best.value);
+      setSaveError(null);
+    }
+  }, [element, platform]);
+  const handleStrategyChange = (s) => {
+    setStrategy(s);
+    if (!element) return;
+    const match = suggestLocators(element, platform).find((x) => x.strategy === s);
+    if (match) setValue(match.value);
+  };
+  const handleSave = async () => {
+    if (!name.trim()) return;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await create({
+        name: name.trim(),
+        strategy,
+        value,
+        platform: platform ?? "android",
+        element_label: element?.label ?? void 0
+      });
+      onClose();
+    } catch (err) {
+      setSaveError(String(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: element !== null,
+      onClose,
+      title: "Save Locator",
+      description: `Save this element as a reusable locator${platform ? ` (${platform})` : ""}.`,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground block mb-1", children: [
+            "Name ",
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              placeholder: "Locator name"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground block mb-1", children: "Strategy" }),
+          /* @__PURE__ */ jsx(Select, { value: strategy, onChange: handleStrategyChange, options: strategyOptions })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground block mb-1", children: "Value" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value,
+              onChange: (e) => setValue(e.target.value),
+              placeholder: "Locator value"
+            }
+          )
+        ] }),
+        saveError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: saveError }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, disabled: saving, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              size: "sm",
+              onClick: handleSave,
+              disabled: saving || !name.trim(),
+              children: saving ? "Saving\u2026" : "Save"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var TEXT = (s) => /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold leading-none", children: s });
+function keysFor(platform) {
+  switch (platform) {
+    case "ios":
+      return [
+        { key: "Home", label: "Home", node: /* @__PURE__ */ jsx(Home, { className: "w-3.5 h-3.5" }) },
+        { key: "Enter", label: "Return", node: /* @__PURE__ */ jsx(CornerDownLeft, { className: "w-3.5 h-3.5" }) }
+      ];
+    case "macos":
+    case "windows":
+      return [
+        { key: "Escape", label: "Esc", node: TEXT("esc") },
+        { key: "Enter", label: "Enter", node: /* @__PURE__ */ jsx(CornerDownLeft, { className: "w-3.5 h-3.5" }) },
+        { key: "Tab", label: "Tab", node: TEXT("tab") },
+        { key: "Backspace", label: "Backspace", node: /* @__PURE__ */ jsx(Delete, { className: "w-3.5 h-3.5" }) }
+      ];
+    case "android":
+    default:
+      return [
+        { key: "Back", label: "Back", node: /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3.5 h-3.5" }) },
+        { key: "Home", label: "Home", node: /* @__PURE__ */ jsx(Home, { className: "w-3.5 h-3.5" }) },
+        { key: "AppSwitch", label: "Recents", node: /* @__PURE__ */ jsx(SquareStack, { className: "w-3.5 h-3.5" }) },
+        { key: "Enter", label: "Enter", node: /* @__PURE__ */ jsx(CornerDownLeft, { className: "w-3.5 h-3.5" }) }
+      ];
+  }
+}
+function ToolButton({
+  label,
+  onClick,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      title: label,
+      "aria-label": label,
+      className: "grid place-items-center h-7 min-w-7 px-1.5 rounded-md border border-border bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/70 transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+      children
+    }
+  );
+}
+function InspectorToolbar({
+  disabled,
+  platform,
+  mode,
+  onModeChange,
+  recording,
+  recordedCount,
+  onToggleRecording,
+  onPressKey,
+  onScroll
+}) {
+  const keys = keysFor(platform);
+  const showScroll = platform === "android" || platform === "ios" || platform === null;
+  const interactLabel = platform === "macos" || platform === "windows" ? "Click" : "Interact";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 h-10 border-b border-border bg-background/40 flex-shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: keys.map((k) => /* @__PURE__ */ jsx(
+      ToolButton,
+      {
+        label: k.label,
+        onClick: () => onPressKey(k.key),
+        disabled,
+        children: k.node
+      },
+      k.key
+    )) }),
+    showScroll && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "w-px h-4 bg-border" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(ToolButton, { label: "Scroll up", onClick: () => onScroll("up"), disabled, children: /* @__PURE__ */ jsx(ChevronsUp, { className: "w-3.5 h-3.5" }) }),
+        /* @__PURE__ */ jsx(ToolButton, { label: "Scroll down", onClick: () => onScroll("down"), disabled, children: /* @__PURE__ */ jsx(ChevronsDown, { className: "w-3.5 h-3.5" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "w-px h-4 bg-border" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border overflow-hidden", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onModeChange("inspect"),
+          className: cn(
+            "flex items-center gap-1 px-2 h-7 text-[11px] font-medium transition-colors",
+            mode === "inspect" ? "bg-primary/15 text-primary" : "bg-secondary text-muted-foreground hover:text-foreground"
+          ),
+          title: "Click selects the element under the cursor",
+          children: [
+            /* @__PURE__ */ jsx(MousePointer2, { className: "w-3.5 h-3.5" }),
+            "Inspect"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onModeChange("interact"),
+          disabled,
+          className: cn(
+            "flex items-center gap-1 px-2 h-7 text-[11px] font-medium transition-colors disabled:opacity-40",
+            mode === "interact" ? "bg-primary/15 text-primary" : "bg-secondary text-muted-foreground hover:text-foreground"
+          ),
+          title: "Click performs a real tap/click at the clicked coordinate",
+          children: [
+            /* @__PURE__ */ jsx(Circle, { className: "w-3 h-3" }),
+            interactLabel
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onToggleRecording,
+        disabled,
+        className: cn(
+          "flex items-center gap-1.5 px-2.5 h-7 rounded-md border text-[11px] font-medium transition-colors disabled:opacity-40",
+          recording ? "border-destructive text-destructive bg-destructive/10" : "border-border text-muted-foreground bg-secondary hover:text-foreground"
+        ),
+        title: recording ? "Stop recording" : "Record actions into a script",
+        children: [
+          recording ? /* @__PURE__ */ jsx(Square, { className: "w-3 h-3 fill-current" }) : /* @__PURE__ */ jsx(Circle, { className: "w-3 h-3" }),
+          recording ? "Recording" : "Record",
+          recordedCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 px-1 rounded-full bg-foreground/10 text-foreground text-[10px]", children: recordedCount })
+        ]
+      }
+    )
+  ] });
+}
+function RecorderBar({ lines, platform, onRemoveLine, onClear }) {
+  const client = useClient();
+  const [name, setName] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [savedId, setSavedId] = useState(null);
+  const [error, setError] = useState(null);
+  const script = () => ({
+    name: name.trim() || `Recorded ${(/* @__PURE__ */ new Date()).toLocaleString()}`,
+    platform: platform ?? "android",
+    language: "ts",
+    code: lines.join("\n"),
+    variables: {}
+  });
+  const handleSave = async () => {
+    setSaving(true);
+    setError(null);
+    setSavedId(null);
+    try {
+      const created = await client.scripts.create(script());
+      setSavedId(created.id);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleExport = () => {
+    const blob = new Blob([JSON.stringify(script(), null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `script-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-t border-border bg-surface flex-shrink-0 max-h-44", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 h-10 border-b border-border bg-background/40 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-label-caps text-muted-foreground", children: [
+        "Recorder \xB7 ",
+        lines.length,
+        " line",
+        lines.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx("div", { className: "w-48", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "Script name",
+          className: "h-7 py-1 text-xs"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "primary",
+          size: "sm",
+          onClick: handleSave,
+          disabled: saving || lines.length === 0,
+          children: [
+            /* @__PURE__ */ jsx(Save, { className: "w-3.5 h-3.5" }),
+            saving ? "Saving\u2026" : "Save as Script"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: handleExport,
+          disabled: lines.length === 0,
+          children: [
+            /* @__PURE__ */ jsx(Upload, { className: "w-3.5 h-3.5" }),
+            "Export"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, disabled: lines.length === 0, children: [
+        /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }),
+        "Clear"
+      ] })
+    ] }),
+    (savedId || error) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `px-4 py-1.5 text-code-sm flex-shrink-0 ${error ? "text-destructive bg-destructive/5" : "text-success bg-success/5"}`,
+        children: error ?? `Saved as script ${savedId}`
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-3 py-2", children: lines.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-code-sm text-muted-foreground px-1", children: "Recording on \u2014 perform taps, typing, key presses, or swipes to capture code lines." }) : /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-1", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "group flex items-center gap-2 px-2 py-1 rounded-md bg-secondary/40 border border-border text-code-sm font-mono",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-5 flex-shrink-0", children: i + 1 }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-foreground whitespace-pre", children: line }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onRemoveLine(i),
+              className: "opacity-0 group-hover:opacity-100 grid place-items-center w-5 h-5 rounded text-muted-foreground hover:text-destructive transition-all flex-shrink-0",
+              "aria-label": "Remove line",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ]
+      },
+      i
+    )) }) })
+  ] });
+}
+function findNodeAt(node, x, y) {
+  if (!node) return null;
+  const { rect } = node;
+  const inside = x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+  if (!inside) return null;
+  for (const child of node.children) {
+    const hit = findNodeAt(child, x, y);
+    if (hit) return hit;
+  }
+  return node;
+}
+var PLATFORM_LABEL = {
+  android: "Android",
+  ios: "iOS",
+  macos: "macOS",
+  windows: "Windows"
+};
+function InspectorPage() {
+  const t = useAixT();
+  const {
+    screenshot,
+    tree,
+    selectedElement,
+    loading,
+    error,
+    matches,
+    recording,
+    recordedLines,
+    refresh,
+    reset,
+    selectElement,
+    tap,
+    inputText,
+    pressKey,
+    swipe,
+    longPress,
+    setRecording,
+    recordLine,
+    removeLine,
+    clearRecording
+  } = useInspectorView();
+  const { devices, fetchDevices, selectedDeviceId, selectDevice } = useDevicesView();
+  const [locatorDialogOpen, setLocatorDialogOpen] = useState(null);
+  const [mode, setMode] = useState("inspect");
+  const device = useMemo(
+    () => devices.find((d) => d.id === selectedDeviceId) ?? null,
+    [devices, selectedDeviceId]
+  );
+  const platform = device?.platform ?? null;
+  useEffect(() => {
+    fetchDevices();
+  }, [fetchDevices]);
+  useEffect(() => {
+    reset();
+    if (selectedDeviceId) refresh();
+  }, [selectedDeviceId, reset, refresh]);
+  const deviceOptions = useMemo(
+    () => devices.map((d) => ({
+      value: d.id,
+      label: `${d.name} \xB7 ${PLATFORM_LABEL[d.platform] ?? d.platform}${d.online ? "" : " (offline)"}`
+    })),
+    [devices]
+  );
+  const handleCoordinateClick = useCallback(
+    (x, y) => {
+      if (mode === "interact") {
+        void tap(x, y);
+        return;
+      }
+      const el = findNodeAt(tree, Math.round(x), Math.round(y));
+      if (el) selectElement(el);
+    },
+    [mode, tree, tap, selectElement]
+  );
+  const handleTapElement = useCallback(
+    (el) => {
+      recordLine(tapLine(el, platform));
+      void tap(el.rect.x + el.rect.width / 2, el.rect.y + el.rect.height / 2);
+    },
+    [tap, recordLine, platform]
+  );
+  const handleLongPress = useCallback(
+    (el) => {
+      recordLine(longPressLine(el));
+      void longPress(el.rect.x + el.rect.width / 2, el.rect.y + el.rect.height / 2);
+    },
+    [longPress, recordLine, platform]
+  );
+  const handleInputText = useCallback(
+    (el, text) => {
+      recordLine(inputTextLine(el, platform, text));
+      void (async () => {
+        await tap(el.rect.x + el.rect.width / 2, el.rect.y + el.rect.height / 2);
+        await inputText(text);
+      })();
+    },
+    [tap, inputText, recordLine, platform]
+  );
+  const handleClearText = useCallback(
+    (el) => {
+      recordLine(clearTextLine(el, platform));
+      void (async () => {
+        await tap(el.rect.x + el.rect.width / 2, el.rect.y + el.rect.height / 2);
+        await pressKey("Delete");
+      })();
+    },
+    [tap, pressKey, recordLine, platform]
+  );
+  const handlePressKey = useCallback(
+    (key) => {
+      recordLine(pressKeyLine(key));
+      void pressKey(key);
+    },
+    [pressKey, recordLine]
+  );
+  const handleScroll = useCallback(
+    (dir) => {
+      const w = tree?.rect.width ?? 1080;
+      const h = tree?.rect.height ?? 1920;
+      const cx = w / 2;
+      const y1 = dir === "down" ? h * 0.7 : h * 0.3;
+      const y2 = dir === "down" ? h * 0.3 : h * 0.7;
+      recordLine(swipeLine(cx, y1, cx, y2));
+      void swipe(cx, y1, cx, y2);
+    },
+    [tree, swipe, recordLine]
+  );
+  const handleExport = useCallback(() => {
+    if (!tree) return;
+    const payload = {
+      exported_at: (/* @__PURE__ */ new Date()).toISOString(),
+      device_id: selectedDeviceId,
+      platform,
+      tree,
+      screenshot: screenshot ?? null
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `inspector-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }, [tree, screenshot, selectedDeviceId, platform]);
+  const showRecorder = recording || recordedLines.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-background", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-b border-border px-4 h-12 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-40 sm:w-56", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: selectedDeviceId ?? "",
+          onChange: (id) => selectDevice(id || null),
+          options: deviceOptions,
+          placeholder: t("inspector.selectDevice")
+        }
+      ) }),
+      platform && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded-full border border-border bg-secondary text-[11px] font-medium text-muted-foreground", children: PLATFORM_LABEL[platform] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", disabled: !tree, onClick: handleExport, children: [
+        /* @__PURE__ */ jsx(Upload, { className: "w-3.5 h-3.5" }),
+        t("inspector.export")
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "primary",
+          size: "sm",
+          onClick: refresh,
+          disabled: loading || !selectedDeviceId,
+          children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: cn("w-3.5 h-3.5", loading && "animate-spin") }),
+            t("common.refresh")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      InspectorToolbar,
+      {
+        disabled: !selectedDeviceId,
+        platform,
+        mode,
+        onModeChange: setMode,
+        recording,
+        recordedCount: recordedLines.length,
+        onToggleRecording: () => setRecording(!recording),
+        onPressKey: handlePressKey,
+        onScroll: handleScroll
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-10 text-destructive text-code-sm bg-destructive/5 border-b border-border flex-shrink-0", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 grid grid-cols-[14rem_minmax(0,1fr)_15rem] lg:grid-cols-[17rem_minmax(0,1fr)_18rem] xl:grid-cols-[20rem_minmax(0,1fr)_22rem] overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        UITreePanel,
+        {
+          tree,
+          selectedElement,
+          onSelectElement: selectElement
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ScreenshotPanel,
+        {
+          screenshot,
+          selectedElement,
+          loading,
+          deviceName: device?.name ?? null,
+          platform,
+          interactMode: mode === "interact",
+          matches,
+          onCoordinateClick: handleCoordinateClick
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ElementDetailsPanel,
+        {
+          element: selectedElement,
+          platform,
+          screenshot,
+          onSaveLocator: setLocatorDialogOpen,
+          onTap: handleTapElement,
+          onLongPress: handleLongPress,
+          onInputText: handleInputText,
+          onClearText: handleClearText
+        }
+      )
+    ] }),
+    showRecorder && /* @__PURE__ */ jsx(
+      RecorderBar,
+      {
+        lines: recordedLines,
+        platform,
+        onRemoveLine: removeLine,
+        onClear: clearRecording
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SaveLocatorDialog,
+      {
+        element: locatorDialogOpen,
+        platform,
+        onClose: () => setLocatorDialogOpen(null)
+      }
+    )
+  ] });
+}
+
+export { InspectorPage };