@aixnn/aixautots 0.0.0-stage → 0.5.3

package/dist/chunk-XNKC6HU3.js

@@ -0,0 +1,866 @@
+import { LogConsole } from './chunk-FW23FLAF.js';
+import { cn, Button, Select } from './chunk-EVHTAXQG.js';
+import { useDevices, useScripts, useScriptRun } from './chunk-O34SNDQB.js';
+import { variablesToSchema, normalizeDevices, schemaToVariables } from './chunk-V4MXFPDX.js';
+import { useClient } from './chunk-UINEPEIE.js';
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { Trash2, Plus, Play, Pause, Square, ArrowDownToLine, WrapText, ChevronRight, Save, XCircle, CheckCircle2, Loader2, Circle } from 'lucide-react';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function CodeEditor({
+  value,
+  onChange,
+  height = "100%",
+  language = "ts",
+  onSelect
+}) {
+  const extensions = [javascript({ typescript: language === "ts" })];
+  if (onSelect) {
+    extensions.push(
+      EditorView.updateListener.of((update) => {
+        if (!update.selectionSet) return;
+        const range = update.state.selection.main;
+        onSelect(update.state.sliceDoc(range.from, range.to));
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    CodeMirror,
+    {
+      value,
+      onChange,
+      extensions,
+      theme: "dark",
+      height,
+      basicSetup: { lineNumbers: true, foldGutter: true },
+      style: { height: "100%", fontSize: 13 }
+    }
+  );
+}
+var TYPES = ["text", "textarea", "number", "select", "boolean"];
+var inputCls = "bg-secondary rounded px-2 py-1 text-code-sm outline-none focus:ring-1 focus:ring-primary";
+function ScriptParamEditor({ variables, onChange }) {
+  const schema = useMemo(() => variablesToSchema(variables), [variables]);
+  const commit = (next) => onChange(schemaToVariables(next, variables));
+  const update = (i, patch) => {
+    const next = schema.map((p, idx) => idx === i ? { ...p, ...patch } : p);
+    commit(next);
+  };
+  const setTarget = (i, on) => {
+    const next = schema.map((p, idx) => ({
+      ...p,
+      isTarget: on ? idx === i : idx === i ? false : p.isTarget
+    }));
+    commit(next);
+  };
+  const remove = (i) => commit(schema.filter((_, idx) => idx !== i));
+  const add = () => {
+    let n = schema.length + 1;
+    let key = `param_${n}`;
+    const keys = new Set(schema.map((p) => p.key));
+    while (keys.has(key)) key = `param_${++n}`;
+    commit([...schema, { key, type: "text" }]);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full space-y-2 overflow-auto p-4", children: [
+    schema.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "\u6682\u65E0\u53C2\u6570\u3002\u70B9\u4E0B\u65B9\u300C\u6DFB\u52A0\u53C2\u6570\u300D\u58F0\u660E\u811A\u672C\u5165\u53C2\u3002" }),
+    schema.map((p, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-border bg-card/40 p-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: `${inputCls} w-1/3 font-mono`,
+            value: p.key,
+            placeholder: "\u952E\u540D",
+            onChange: (e) => update(i, { key: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: `${inputCls} flex-1`,
+            value: p.label ?? "",
+            placeholder: "\u663E\u793A\u6807\u7B7E\uFF08\u53EF\u9009\uFF09",
+            onChange: (e) => update(i, { label: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\u5220\u9664\u53C2\u6570",
+            onClick: () => remove(i),
+            className: "rounded p-1 text-muted-foreground hover:text-destructive",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: inputCls,
+            value: p.type,
+            onChange: (e) => update(i, { type: e.target.value }),
+            children: TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+          }
+        ),
+        p.type !== "boolean" && p.type !== "select" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: `${inputCls} flex-1`,
+            value: p.default ?? "",
+            placeholder: "\u9ED8\u8BA4\u503C",
+            onChange: (e) => update(i, { default: e.target.value })
+          }
+        ),
+        p.type === "select" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: `${inputCls} flex-1`,
+            value: (p.options ?? []).join(", "),
+            placeholder: "\u5019\u9009\u9879\uFF0C\u9017\u53F7\u5206\u9694",
+            onChange: (e) => update(i, {
+              options: e.target.value.split(",").map((s) => s.trim()).filter(Boolean)
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-body-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "h-3.5 w-3.5 rounded border-input accent-primary",
+              checked: !!p.isTarget,
+              onChange: (e) => setTarget(i, e.target.checked)
+            }
+          ),
+          "\u76EE\u6807\u5B57\u6BB5\uFF08\u521B\u5EFA\u4EFB\u52A1\u65F6\u6309\u884C\u6279\u91CF\uFF09"
+        ] }),
+        (p.type === "text" || p.type === "textarea") && /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "h-3.5 w-3.5 rounded border-input accent-primary",
+              checked: !!p.randomable,
+              onChange: (e) => update(i, { randomable: e.target.checked })
+            }
+          ),
+          "\u53EF\u968F\u673A\u53D6\u503C"
+        ] })
+      ] })
+    ] }, i)),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: add,
+        className: "flex items-center gap-1 text-body-sm text-primary",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+          "\u6DFB\u52A0\u53C2\u6570"
+        ]
+      }
+    )
+  ] });
+}
+var statusIcons = {
+  pending: /* @__PURE__ */ jsx(Circle, { className: "w-5 h-5 text-muted-foreground" }),
+  running: /* @__PURE__ */ jsx(Loader2, { className: "w-5 h-5 text-primary animate-spin" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5 text-success" }),
+  failed: /* @__PURE__ */ jsx(XCircle, { className: "w-5 h-5 text-destructive" })
+};
+function TimelineStep({ event, isLast }) {
+  const isPending = event.status === "pending";
+  const isActive = event.status === "running";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex gap-3", isPending && "opacity-40"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "z-10 bg-surface", children: statusIcons[event.status] }),
+      !isLast && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute top-5 w-px h-full",
+            event.status === "success" ? "bg-primary/30" : event.status === "failed" ? "bg-destructive/30" : "bg-border"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pb-4 min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-code-md font-mono",
+            isActive ? "text-primary font-semibold" : isPending ? "text-muted-foreground" : "text-foreground"
+          ),
+          children: event.step_type
+        }
+      ),
+      event.description && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground truncate", children: event.description }),
+      event.error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", children: event.error })
+    ] })
+  ] });
+}
+var statusLabel = {
+  idle: "Ready",
+  running: "Running",
+  paused: "Paused",
+  completed: "Completed",
+  failed: "Failed"
+};
+function StatusChip({ status }) {
+  const tone = status === "running" ? "bg-primary/15 text-primary" : status === "failed" ? "bg-destructive/15 text-destructive" : status === "completed" ? "bg-success/15 text-success" : status === "paused" ? "bg-warning/15 text-warning" : "bg-secondary text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "px-2 py-0.5 rounded text-[11px] font-mono flex items-center gap-1.5",
+        tone
+      ),
+      children: [
+        status === "running" && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+        ] }),
+        statusLabel[status] ?? status
+      ]
+    }
+  );
+}
+var LEVEL_CHIPS = [
+  { level: "error", label: "E" },
+  { level: "warn", label: "W" },
+  { level: "info", label: "I" },
+  { level: "debug", label: "D" }
+];
+var ALL_LEVELS = ["system", "error", "warn", "info", "debug"];
+function RunPanel({
+  status,
+  progress,
+  steps,
+  logs,
+  error,
+  onStart,
+  onStop,
+  onPause,
+  onResume,
+  onClearLogs,
+  canStart,
+  startHint,
+  onResizeStart
+}) {
+  const [tab, setTab] = useState("console");
+  const [query, setQuery] = useState("");
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [wrap, setWrap] = useState(false);
+  const [hidden, setHidden] = useState(/* @__PURE__ */ new Set());
+  const levels = new Set(ALL_LEVELS.filter((l) => !hidden.has(l)));
+  const toggleLevel = (l) => setHidden((prev) => {
+    const next = new Set(prev);
+    next.has(l) ? next.delete(l) : next.add(l);
+    return next;
+  });
+  const completedSteps = steps.filter(
+    (s) => s.status === "success" || s.status === "failed"
+  ).length;
+  const idleish = status === "idle" || status === "completed" || status === "failed";
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-card", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onPointerDown: onResizeStart,
+        className: "h-1.5 w-full shrink-0 cursor-row-resize bg-border/60 hover:bg-primary/50 transition-colors",
+        title: "\u62D6\u62FD\u8C03\u6574\u9AD8\u5EA6"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-2 py-1.5 flex-shrink-0 flex-wrap", children: [
+      /* @__PURE__ */ jsx(StatusChip, { status }),
+      idleish && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "primary",
+          size: "sm",
+          onClick: onStart,
+          disabled: !canStart,
+          title: canStart ? void 0 : startHint,
+          children: [
+            /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
+            status === "idle" ? "Run" : "Re-run"
+          ]
+        }
+      ),
+      status === "running" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: onPause, children: [
+          /* @__PURE__ */ jsx(Pause, { className: "w-3.5 h-3.5" }),
+          "Pause"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "destructive", size: "sm", onClick: onStop, children: [
+          /* @__PURE__ */ jsx(Square, { className: "w-3.5 h-3.5" }),
+          "Stop"
+        ] })
+      ] }),
+      status === "paused" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: onResume, children: [
+          /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
+          "Resume"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "destructive", size: "sm", onClick: onStop, children: [
+          /* @__PURE__ */ jsx(Square, { className: "w-3.5 h-3.5" }),
+          "Stop"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ml-2 flex items-center rounded bg-secondary p-0.5", children: ["console", "steps"].map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setTab(t),
+          className: cn(
+            "rounded px-2 py-0.5 text-xs font-medium capitalize",
+            tab === t ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: t === "console" ? "Console" : `Steps${steps.length ? ` ${completedSteps}/${steps.length}` : ""}`
+        },
+        t
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: tab === "console" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: LEVEL_CHIPS.map((c) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleLevel(c.level),
+            title: c.level,
+            className: cn(
+              "w-5 h-5 rounded text-[11px] font-mono font-bold",
+              hidden.has(c.level) ? "text-muted-foreground/40 line-through" : c.level === "error" ? "text-destructive" : c.level === "warn" ? "text-warning" : c.level === "info" ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: c.label
+          },
+          c.level
+        )) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "filter\u2026",
+            className: "h-6 w-28 rounded bg-secondary px-2 text-xs outline-none focus:w-40 transition-all"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconToggle,
+          {
+            active: autoScroll,
+            onClick: () => setAutoScroll((v) => !v),
+            title: "\u6EDA\u52A8\u5230\u5E95\u90E8",
+            children: /* @__PURE__ */ jsx(ArrowDownToLine, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(IconToggle, { active: wrap, onClick: () => setWrap((v) => !v), title: "\u8F6F\u6362\u884C", children: /* @__PURE__ */ jsx(WrapText, { className: "w-3.5 h-3.5" }) }),
+        /* @__PURE__ */ jsx(IconToggle, { active: false, onClick: onClearLogs, title: "\u6E05\u7A7A\u65E5\u5FD7", children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }) })
+      ] }) })
+    ] }),
+    status !== "idle" && /* @__PURE__ */ jsx("div", { className: "h-0.5 bg-secondary overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-full transition-all duration-500 ease-out",
+          status === "failed" ? "bg-destructive" : "bg-primary"
+        ),
+        style: { width: `${progress}%` }
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx("div", { className: "mx-2 mt-1.5 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-1.5 text-xs text-destructive flex-shrink-0", children: error }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: tab === "console" ? /* @__PURE__ */ jsx(
+      LogConsole,
+      {
+        logs,
+        levels,
+        query,
+        wrap,
+        autoScroll
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto p-3", children: steps.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: status === "idle" ? "\u9009\u62E9\u8BBE\u5907\u540E\u70B9 Run \u5F00\u59CB" : "\u6682\u65E0\u6B65\u9AA4\u4E8B\u4EF6\u3002" }) : steps.map((event, i) => /* @__PURE__ */ jsx(
+      TimelineStep,
+      {
+        event,
+        isLast: i === steps.length - 1
+      },
+      event.step_index ?? i
+    )) }) })
+  ] });
+}
+function IconToggle({
+  active,
+  onClick,
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      title,
+      className: cn(
+        "flex h-6 w-6 items-center justify-center rounded",
+        active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+      ),
+      children
+    }
+  );
+}
+function toStudioDevice(r) {
+  const meta = r.meta ?? {};
+  let platform = r.platform ?? meta.platform ?? r.kind ?? "android";
+  if (platform === "desktop") {
+    const os = String(meta.os ?? "");
+    if (os === "windows" || os === "macos") platform = os;
+  }
+  return { id: r.device_id, name: r.name || r.external_id, platform, online: r.online === true };
+}
+function DeviceSelect({ value, onChange, onDevices, disabled }) {
+  const { data } = useDevices();
+  const devices = useMemo(() => {
+    const list = normalizeDevices(data ?? []).map(toStudioDevice);
+    return [...list].sort((a, b) => Number(b.online) - Number(a.online));
+  }, [data]);
+  useEffect(() => {
+    onDevices?.(devices);
+  }, [devices]);
+  const options = useMemo(
+    () => [
+      { value: "", label: "\u9009\u62E9\u8FD0\u884C\u8BBE\u5907\u2026" },
+      ...devices.map((d) => ({
+        value: d.id,
+        label: `${d.online ? "\u25CF" : "\u25CB"} ${d.name} (${d.platform})`
+      }))
+    ],
+    [devices]
+  );
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      value: value ?? "",
+      onChange: (v) => onChange(v === "" ? null : v),
+      options,
+      className: disabled ? "opacity-50 pointer-events-none" : void 0
+    }
+  );
+}
+var NEW_SCRIPT_CODE = "// await device.home()\n";
+var NEW_SCRIPT_NAME = "New Script";
+function isPristineNewScript(name, code, variables) {
+  const codeBlank = code.trim() === "" || code.trim() === NEW_SCRIPT_CODE.trim();
+  const nameBlank = name.trim() === "" || name.trim() === NEW_SCRIPT_NAME;
+  return codeBlank && nameBlank && Object.keys(variables).length === 0;
+}
+function ScriptStudio({
+  scriptId,
+  onScriptIdChange,
+  renderAgentPanel,
+  renderInspector,
+  consoleHeightStorageKey = "editor.consoleHeight",
+  headerExtra
+}) {
+  const client = useClient();
+  const { get: getScript, save: saveScript } = useScripts();
+  const run = useScriptRun();
+  const [currentScript, setCurrentScript] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [code, setCode] = useState("");
+  const [name, setName] = useState("");
+  const [variables, setVariables] = useState({});
+  const [leftTab, setLeftTab] = useState("code");
+  const [selection, setSelection] = useState("");
+  const [inspectorOpen, setInspectorOpen] = useState(false);
+  const [saved, setSaved] = useState(true);
+  const [selectedDeviceId, setSelectedDeviceId] = useState(null);
+  const [devices, setDevices] = useState([]);
+  const mainRef = useRef(null);
+  const [consoleHeight, setConsoleHeight] = useState(() => {
+    const s = Number(localStorage.getItem(consoleHeightStorageKey));
+    return s >= 120 ? s : 240;
+  });
+  const handleResizeStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      const startY = e.clientY;
+      const startH = consoleHeight;
+      const max = (mainRef.current?.clientHeight ?? window.innerHeight) - 160;
+      const onMove = (ev) => {
+        const next = Math.min(Math.max(startH + (startY - ev.clientY), 120), Math.max(max, 160));
+        setConsoleHeight(next);
+      };
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        document.body.style.userSelect = "";
+        setConsoleHeight((h) => {
+          localStorage.setItem(consoleHeightStorageKey, String(h));
+          return h;
+        });
+      };
+      document.body.style.userSelect = "none";
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [consoleHeight, consoleHeightStorageKey]
+  );
+  const idRef = useRef(scriptId);
+  const currentRef = useRef(null);
+  currentRef.current = currentScript;
+  useEffect(() => {
+    let alive = true;
+    if (scriptId && currentRef.current?.id !== scriptId) {
+      setLoading(true);
+      void getScript(scriptId).then((s) => {
+        if (alive) setCurrentScript(s);
+      }).finally(() => {
+        if (alive) setLoading(false);
+      });
+    }
+    return () => {
+      alive = false;
+    };
+  }, [scriptId]);
+  useEffect(() => () => run.reset(), []);
+  useEffect(() => {
+    if (currentScript) {
+      setCode(currentScript.code ?? "");
+      setName(currentScript.name ?? "");
+      setVariables(currentScript.variables ?? {});
+    } else if (!scriptId) {
+      setCode(NEW_SCRIPT_CODE);
+      setName(NEW_SCRIPT_NAME);
+      setVariables({});
+    }
+  }, [currentScript?.id, scriptId]);
+  useEffect(() => {
+    idRef.current = currentScript?.id ?? scriptId;
+  }, [currentScript?.id, scriptId]);
+  const saveTimer = useRef(null);
+  const savingRef = useRef(false);
+  const pendingRef = useRef(false);
+  const doSaveRef = useRef();
+  const doSave = useCallback(async (auto = false) => {
+    if (savingRef.current) {
+      pendingRef.current = true;
+      return;
+    }
+    savingRef.current = true;
+    try {
+      const cur = currentRef.current;
+      const s = {
+        ...cur ?? { name: "", code: "" },
+        id: idRef.current,
+        name,
+        code,
+        language: cur?.language ?? "ts",
+        variables,
+        platform: cur?.platform ?? "Android"
+      };
+      const hadId = idRef.current != null;
+      if (auto && !hadId && isPristineNewScript(name, code, variables)) {
+        setSaved(true);
+        return;
+      }
+      const result = await saveScript(s);
+      const savedId = result?.id ?? s.id;
+      if (savedId) idRef.current = savedId;
+      setCurrentScript({ ...s, id: savedId });
+      setSaved(true);
+      if (!hadId && savedId) onScriptIdChange?.(savedId);
+    } finally {
+      savingRef.current = false;
+      if (pendingRef.current) {
+        pendingRef.current = false;
+        void doSaveRef.current?.();
+      }
+    }
+  }, [name, code, variables, saveScript, onScriptIdChange]);
+  doSaveRef.current = doSave;
+  const markDirty = useCallback(() => {
+    setSaved(false);
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => {
+      void doSaveRef.current?.(true);
+    }, 1200);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+    };
+  }, []);
+  const targetId = currentScript?.id || scriptId || void 0;
+  const canRun = !!selectedDeviceId;
+  const handleRunAll = useCallback(async () => {
+    await doSave();
+    if (!selectedDeviceId) return;
+    await run.runCode(
+      code,
+      currentRef.current?.language ?? "ts",
+      variables,
+      [selectedDeviceId],
+      currentRef.current?.platform ?? "Android"
+    );
+  }, [doSave, code, variables, selectedDeviceId, run]);
+  const handleRunSelection = useCallback(async () => {
+    if (!selection.trim() || !selectedDeviceId) return;
+    await run.runCode(
+      selection,
+      currentRef.current?.language ?? "ts",
+      variables,
+      [selectedDeviceId],
+      currentRef.current?.platform ?? "Android"
+    );
+  }, [selection, variables, selectedDeviceId, run]);
+  const platform = devices.find((d) => d.id === selectedDeviceId)?.platform === "ios" ? "ios" : "android";
+  const insertSnippet = useCallback(
+    (snippet) => {
+      setCode((c) => (c.endsWith("\n") || c === "" ? c : c + "\n") + snippet);
+      markDirty();
+    },
+    [markDirty]
+  );
+  const slotCtx = useMemo(
+    () => ({
+      scriptId: targetId,
+      deviceId: selectedDeviceId,
+      platform,
+      code,
+      setCode: (next) => {
+        setCode(next);
+        markDirty();
+      },
+      insertSnippet,
+      openInspector: () => setInspectorOpen(true)
+    }),
+    [targetId, selectedDeviceId, platform, code, markDirty, insertSnippet]
+  );
+  if (loading)
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-body-sm", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("header", { className: "h-14 px-4 sm:px-6 bg-card border-b border-border flex items-center justify-between gap-3 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-muted-foreground text-body-sm min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { children: "Scripts" }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "text-foreground font-semibold bg-transparent outline-none border-b border-transparent hover:border-border focus:border-primary min-w-0 truncate px-0.5",
+            value: name,
+            placeholder: "New Script",
+            "aria-label": "\u811A\u672C\u540D",
+            onChange: (e) => {
+              setName(e.target.value);
+              markDirty();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("ml-2 text-xs", saved ? "text-success" : "text-muted-foreground"), children: saved ? "\u25CF \u5DF2\u81EA\u52A8\u4FDD\u5B58" : "\u25CB \u672A\u4FDD\u5B58" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+        renderInspector && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "text-body-sm text-muted-foreground hover:text-foreground",
+            onClick: () => setInspectorOpen(true),
+            children: "\u8BBE\u5907/Inspector"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "w-52", children: /* @__PURE__ */ jsx(
+          DeviceSelect,
+          {
+            value: selectedDeviceId,
+            onChange: setSelectedDeviceId,
+            onDevices: setDevices
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: () => doSave(), children: [
+          /* @__PURE__ */ jsx(Save, { className: "w-3.5 h-3.5" }),
+          "Save"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "primary",
+            onClick: handleRunAll,
+            disabled: !canRun,
+            title: canRun ? void 0 : "\u5148\u9009\u62E9\u8BBE\u5907",
+            children: [
+              /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
+              "\u8FD0\u884C\u5168\u90E8"
+            ]
+          }
+        ),
+        headerExtra
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: mainRef, className: "flex-1 flex flex-col overflow-hidden min-h-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
+        /* @__PURE__ */ jsxs("section", { className: "flex-1 flex flex-col bg-surface border-r border-border min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-2 py-2 bg-card border-b border-border flex items-center gap-1", children: [
+            [
+              ["code", "Code"],
+              ["params", "\u53C2\u6570"],
+              ["settings", "\u8BBE\u7F6E"]
+            ].map(([k, l]) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setLeftTab(k),
+                className: cn(
+                  "rounded px-3 py-1.5 text-body-sm font-medium",
+                  leftTab === k ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: l
+              },
+              k
+            )),
+            leftTab === "code" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "ml-auto text-body-sm text-success disabled:text-muted-foreground",
+                onClick: handleRunSelection,
+                disabled: !selection.trim() || !canRun,
+                children: "\u25B6 \u8FD0\u884C\u9009\u4E2D"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: cn("h-full", leftTab !== "code" && "hidden"), children: /* @__PURE__ */ jsx(
+              CodeEditor,
+              {
+                value: code,
+                language: currentScript?.language === "js" ? "js" : "ts",
+                onChange: (v) => {
+                  setCode(v);
+                  markDirty();
+                },
+                onSelect: setSelection
+              }
+            ) }),
+            leftTab === "params" && /* @__PURE__ */ jsx(
+              ScriptParamEditor,
+              {
+                variables,
+                onChange: (v) => {
+                  setVariables(v);
+                  markDirty();
+                }
+              }
+            ),
+            leftTab === "settings" && /* @__PURE__ */ jsx(
+              SettingsTab,
+              {
+                script: currentScript,
+                onRefresh: async () => {
+                  const id = currentScript?.id ?? scriptId;
+                  if (id) setCurrentScript(await getScript(id));
+                },
+                generateMeta: (id) => client.scripts.generateMeta(id),
+                generateCover: (id) => client.scripts.generateCover(id)
+              }
+            )
+          ] })
+        ] }),
+        renderAgentPanel && /* @__PURE__ */ jsx("aside", { className: "w-[420px] flex flex-col bg-card flex-shrink-0", children: renderAgentPanel(slotCtx) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 overflow-hidden", style: { height: consoleHeight }, children: /* @__PURE__ */ jsx(
+        RunPanel,
+        {
+          status: run.status,
+          progress: run.progress,
+          steps: run.steps,
+          logs: run.logs,
+          error: run.error,
+          onStart: handleRunAll,
+          onStop: run.stopRun,
+          onPause: run.pauseRun,
+          onResume: run.resumeRun,
+          onClearLogs: run.clearLogs,
+          canStart: canRun,
+          startHint: canRun ? void 0 : "\u5148\u9009\u62E9\u8BBE\u5907",
+          onResizeStart: handleResizeStart
+        }
+      ) })
+    ] }),
+    renderInspector?.({
+      ...slotCtx,
+      open: inspectorOpen,
+      onClose: () => setInspectorOpen(false)
+    })
+  ] });
+}
+function SettingsTab({ script, onRefresh, generateMeta, generateCover }) {
+  const id = script?.id ?? null;
+  const [metaBusy, setMetaBusy] = useState(false);
+  const [coverBusy, setCoverBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const runMeta = useCallback(async () => {
+    if (!id) return;
+    setMetaBusy(true);
+    setError(null);
+    try {
+      await generateMeta(id);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMetaBusy(false);
+    }
+  }, [id, onRefresh, generateMeta]);
+  const runCover = useCallback(async () => {
+    if (!id) return;
+    setCoverBusy(true);
+    setError(null);
+    try {
+      await generateCover(id);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setCoverBusy(false);
+    }
+  }, [id, onRefresh, generateCover]);
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3 overflow-auto h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-body-sm text-muted-foreground", children: "\u6807\u9898 / \u56FE\u6807 / \u63CF\u8FF0\uFF08\u5E02\u573A\u7528\uFF09\u3002" }),
+    !id && /* @__PURE__ */ jsx("div", { className: "text-body-sm text-amber-500", children: "\u5148\u4FDD\u5B58\u811A\u672C\u518D\u751F\u6210\u3002" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      script?.icon_url ? /* @__PURE__ */ jsx("img", { src: script.icon_url, alt: "", className: "w-12 h-12 rounded" }) : /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded bg-muted" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "text-primary text-body-sm disabled:opacity-50",
+          disabled: !id || coverBusy,
+          onClick: runCover,
+          children: coverBusy ? "\u751F\u6210\u4E2D\u2026" : "\u751F\u6210\u5C01\u9762/\u56FE\u6807"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "text-primary text-body-sm disabled:opacity-50",
+        disabled: !id || metaBusy,
+        onClick: runMeta,
+        children: metaBusy ? "\u751F\u6210\u4E2D\u2026" : "\u751F\u6210\u6807\u9898/\u63CF\u8FF0"
+      }
+    ),
+    script?.cover_url && /* @__PURE__ */ jsx("img", { src: script.cover_url, alt: "", className: "w-full rounded object-cover" }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "w-full bg-secondary rounded px-2 py-1 text-body-sm",
+        rows: 4,
+        value: script?.description ?? "",
+        readOnly: true,
+        placeholder: "\u63CF\u8FF0\uFF08\u53EF\u7531 LLM \u751F\u6210\uFF09"
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "text-body-sm text-red-500", children: error })
+  ] });
+}
+
+export { CodeEditor, DeviceSelect, RunPanel, ScriptParamEditor, ScriptStudio, TimelineStep };