@aixnn/aixautots 0.0.0-stage → 0.5.3

package/dist/ui/editor.js

@@ -0,0 +1,344 @@
+import { ScriptStudio } from '../chunk-XNKC6HU3.js';
+import { useAixNav } from '../chunk-5BMFMDQR.js';
+import { useAixT } from '../chunk-64Q7BBIQ.js';
+import '../chunk-FW23FLAF.js';
+import { Select, cn } from '../chunk-EVHTAXQG.js';
+import '../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, useEffect, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AgentPanel({
+  scriptId,
+  deviceId,
+  code,
+  onReplace,
+  onOpenInspector,
+  onInsert,
+  runner
+}) {
+  const t = useAixT();
+  const client = useClient();
+  const available = runner.available;
+  const [agent, setAgent] = useState("claude");
+  const [messages, setMessages] = useState([]);
+  useEffect(() => {
+    void runner.defaults?.().then((d) => {
+      if (d.agent) setAgent(d.agent);
+    });
+  }, [runner]);
+  const [input, setInput] = useState("");
+  const [running, setRunning] = useState(false);
+  const scrollRef = useRef(null);
+  const inputRef = useRef(null);
+  const liveRef = useRef("");
+  const [apps, setApps] = useState(null);
+  const [appsLoading, setAppsLoading] = useState(false);
+  const [appsErr, setAppsErr] = useState(null);
+  const loadApps = useCallback(async () => {
+    if (!deviceId) {
+      setAppsErr(t("agent.selectDeviceFirst"));
+      setApps([]);
+      return;
+    }
+    setAppsLoading(true);
+    setAppsErr(null);
+    try {
+      const list = await client.devices.op(deviceId, { op: "app_list" });
+      setApps(list ?? []);
+    } catch (e) {
+      setAppsErr(String(e));
+      setApps([]);
+    } finally {
+      setAppsLoading(false);
+    }
+  }, [deviceId, client, t]);
+  const autosize = useCallback(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  }, []);
+  useEffect(autosize, [input, autosize]);
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [messages]);
+  useEffect(() => {
+    if (!available) return;
+    const unsub = runner.subscribe((p) => {
+      if (p.scriptId !== (scriptId ?? "")) return;
+      if (p.stream === "stdout" && p.chunk) {
+        liveRef.current += p.chunk + "\n";
+        setMessages((m) => upsertAgent(m, liveRef.current));
+      } else if (p.stream === "done") {
+        setRunning(false);
+        liveRef.current = "";
+        if (typeof p.script === "string" && p.script.length > 0 && p.script !== code) {
+          onReplace(p.script);
+        }
+      }
+    });
+    return unsub;
+  }, [available, runner, scriptId]);
+  const send = useCallback(
+    async (text) => {
+      const msg = text.trim();
+      if (!msg || running || !available) return;
+      if (!deviceId) {
+        setMessages((m) => [...m, { role: "agent", text: t("agent.needDevice") }]);
+        return;
+      }
+      setMessages((m) => [...m, { role: "user", text: msg }, { role: "agent", text: "\u2026" }]);
+      const isFirst = messages.length === 0;
+      setInput("");
+      setRunning(true);
+      liveRef.current = "";
+      try {
+        await runner.send({ agent, scriptId: scriptId ?? "", code, deviceId, userMsg: msg, isFirst });
+      } catch (e) {
+        setRunning(false);
+        setMessages((m) => upsertAgent(m, t("agent.startFailed", { err: String(e) })));
+      }
+    },
+    [agent, code, deviceId, messages.length, running, scriptId, available, runner, t]
+  );
+  const stop = useCallback(async () => {
+    if (!available) return;
+    try {
+      await runner.stop(scriptId ?? "");
+    } finally {
+      setRunning(false);
+    }
+  }, [scriptId, available, runner]);
+  if (!available) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-border text-body-sm font-semibold", children: "Agent" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-body-sm px-6 text-center", children: t("agent.unavailable") })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-body-sm font-semibold", children: "Agent" }),
+      /* @__PURE__ */ jsx("div", { className: "w-28", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: agent,
+          onChange: (v) => setAgent(v),
+          options: [
+            { value: "claude", label: "claude" },
+            { value: "codex", label: "codex" }
+          ],
+          placeholder: ""
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "flex-1 overflow-auto px-3 py-2 space-y-2", children: [
+      messages.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground text-center pt-6", children: t("agent.emptyHint") }),
+      messages.map((m, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded px-2 py-1.5 text-body-sm whitespace-pre-wrap break-words",
+            m.role === "user" ? "bg-primary/10 text-foreground ml-6" : "bg-secondary text-muted-foreground mr-2 font-mono text-code-sm"
+          ),
+          children: m.text
+        },
+        i
+      ))
+    ] }),
+    apps !== null && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-t border-border max-h-40 overflow-auto space-y-0.5", children: [
+      appsErr && /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive", children: appsErr }),
+      !appsErr && apps.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t("agent.noApps") }),
+      apps.map((a) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onInsert(`await device.launchApp(${JSON.stringify(a.package)});`);
+            setApps(null);
+          },
+          className: "flex w-full items-center justify-between gap-2 rounded px-2 py-0.5 text-left text-xs text-foreground hover:bg-secondary",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: a.label || a.package }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] text-muted-foreground", children: a.package })
+          ]
+        },
+        a.package
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex flex-wrap gap-1 border-t border-border", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: running,
+          onClick: onOpenInspector,
+          className: "rounded-full bg-secondary px-2 py-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
+          children: t("agent.useInspector")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: running || appsLoading,
+          onClick: () => apps !== null ? setApps(null) : void loadApps(),
+          className: "rounded-full bg-secondary px-2 py-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
+          children: appsLoading ? t("agent.loading") : apps !== null ? t("agent.closeApps") : t("agent.pickApp")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-2 border-t border-border flex gap-2 items-end", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: inputRef,
+          rows: 1,
+          className: "flex-1 resize-none bg-secondary rounded px-2 py-1 text-body-sm outline-none disabled:opacity-50 max-h-40 overflow-y-auto",
+          placeholder: t("agent.placeholder"),
+          value: input,
+          disabled: running,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              void send(input);
+            }
+          }
+        }
+      ),
+      running ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => void stop(),
+          className: "rounded bg-destructive/15 text-destructive px-3 text-body-sm",
+          children: t("agent.stop")
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => void send(input),
+          disabled: !input.trim(),
+          className: "rounded bg-primary text-primary-foreground px-3 text-body-sm disabled:opacity-50",
+          children: t("agent.send")
+        }
+      )
+    ] })
+  ] });
+}
+function upsertAgent(messages, text) {
+  const next = [...messages];
+  for (let i = next.length - 1; i >= 0; i--) {
+    if (next[i]?.role === "agent") {
+      next[i] = { role: "agent", text };
+      return next;
+    }
+  }
+  next.push({ role: "agent", text });
+  return next;
+}
+function ScriptEditorPage({
+  scriptId,
+  agentRunner,
+  renderAgentPanel,
+  renderInspector,
+  headerExtra
+}) {
+  const { navigate } = useAixNav();
+  const agentSlot = renderAgentPanel ?? (agentRunner ? (ctx) => /* @__PURE__ */ jsx(
+    AgentPanel,
+    {
+      scriptId: ctx.scriptId,
+      deviceId: ctx.deviceId,
+      code: ctx.code,
+      onReplace: ctx.setCode,
+      onOpenInspector: ctx.openInspector,
+      onInsert: ctx.insertSnippet,
+      runner: agentRunner
+    }
+  ) : void 0);
+  return /* @__PURE__ */ jsx(
+    ScriptStudio,
+    {
+      scriptId,
+      onScriptIdChange: (id) => navigate(`/editor/${encodeURIComponent(id)}`, { replace: true }),
+      renderAgentPanel: agentSlot,
+      renderInspector,
+      headerExtra
+    }
+  );
+}
+
+// src/ui/editor/backend-agent-runner.ts
+function createBackendAgentRunner(client, opts = {}) {
+  const base = (opts.basePath ?? "/api/agent").replace(/\/$/, "");
+  return {
+    available: true,
+    async defaults() {
+      try {
+        return await client.http.get(`${base}/defaults`) ?? {};
+      } catch {
+        return {};
+      }
+    },
+    async send(req) {
+      await client.http.post(`${base}/${req.isFirst ? "start" : "send"}`, req);
+    },
+    async stop(scriptId) {
+      await client.http.post(`${base}/stop`, { scriptId });
+    },
+    subscribe(on) {
+      const ctrl = new AbortController();
+      void streamSse(
+        client,
+        `${base}/stream`,
+        ctrl.signal,
+        (raw) => on({
+          scriptId: raw.script_id ?? raw.scriptId ?? "",
+          stream: raw.stream,
+          chunk: raw.chunk,
+          script: raw.script
+        })
+      );
+      return () => ctrl.abort();
+    }
+  };
+}
+async function streamSse(client, path, signal, onEvent) {
+  const url = client.cfg.baseUrl.replace(/\/$/, "") + path;
+  let resp;
+  try {
+    const headers = { ...await client.cfg.auth.headers("caller"), Accept: "text/event-stream" };
+    resp = await client.cfg.fetchFn(url, { headers, signal });
+  } catch {
+    return;
+  }
+  const body = resp.body;
+  if (!body || typeof body.getReader !== "function") return;
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buf = "";
+  try {
+    for (; ; ) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+      let sep;
+      while ((sep = buf.indexOf("\n\n")) !== -1) {
+        const frame = buf.slice(0, sep);
+        buf = buf.slice(sep + 2);
+        const data = frame.split("\n").filter((l) => l.startsWith("data:")).map((l) => l.slice(5).trim()).join("\n");
+        if (!data) continue;
+        try {
+          onEvent(JSON.parse(data));
+        } catch {
+        }
+      }
+    }
+  } catch {
+  }
+}
+
+export { AgentPanel, ScriptEditorPage, createBackendAgentRunner };