@aixnn/aixautots 0.0.0-stage → 0.5.2

package/dist/ui/tasks.js

@@ -0,0 +1,1039 @@
+import { SharedParamsForm, resolveSharedRow } from '../chunk-536WVCTB.js';
+import { useAixT } from '../chunk-64Q7BBIQ.js';
+import '../chunk-FW23FLAF.js';
+import '../chunk-AIUOLJZA.js';
+import '../chunk-OEZFYKL6.js';
+import '../chunk-CVV7FOMQ.js';
+import '../chunk-MRQ7VJFJ.js';
+import { Button, cn, Select, Input, Badge } from '../chunk-EVHTAXQG.js';
+import { useDevicesView, useAutomationQueue, useApiTokens } from '../chunk-EHF2WQUR.js';
+import { targetParam, variablesToSchema, schemaDefaults } from '../chunk-H7MHGYF3.js';
+import '../chunk-PUPVZRKZ.js';
+import { useClient, useAixConfig } from '../chunk-SUKFJ73W.js';
+import '../chunk-GKEPMDXO.js';
+import '../chunk-PCYERBNZ.js';
+import '../chunk-NWFYTFMI.js';
+import { useState, useEffect, useMemo } from 'react';
+import { RefreshCw, Plug, Plus, X, Play, ChevronDown, ChevronRight, PlayCircle, Pause, Ban, Trash2, Webhook, MonitorSmartphone, Copy } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/ui/tasks/snippets.ts
+function header(name, value) {
+  return `  -H '${name}: ${value}'`;
+}
+function buildSnippets(opts) {
+  const { baseUrl, token, unpinned, exec } = opts;
+  const base = baseUrl.replace(/\/+$/, "");
+  const auth = header("Authorization", `Bearer ${token}`);
+  const projectHeader = unpinned ? header("X-Project-Id", "<PROJECT_ID>") : null;
+  const get = (path) => {
+    const lines = [`curl '${base}${path}'`, auth];
+    if (projectHeader) lines.push(projectHeader);
+    return lines.join(" \\\n");
+  };
+  const execBody = JSON.stringify({
+    script_id: exec?.script_id ?? "<SCRIPT_ID>",
+    ...exec?.flow ? { flow: exec.flow } : {},
+    params: exec?.params ?? {},
+    device_ids: exec?.device_ids ?? ["<DEVICE_ID>"]
+  });
+  const postExec = (() => {
+    const lines = [
+      `curl -X POST '${base}/api/webhook/tasks'`,
+      auth,
+      header("Content-Type", "application/json")
+    ];
+    if (projectHeader) lines.push(projectHeader);
+    lines.push(`  -d '${execBody}'`);
+    return lines.join(" \\\n");
+  })();
+  return [
+    {
+      id: "listScripts",
+      i18nKey: "integration.snippet.listScripts",
+      method: "GET",
+      path: "/api/scripts",
+      curl: get("/api/scripts")
+    },
+    {
+      id: "listDevices",
+      i18nKey: "integration.snippet.listDevices",
+      method: "GET",
+      path: "/api/devices",
+      curl: get("/api/devices")
+    },
+    {
+      id: "execTask",
+      i18nKey: "integration.snippet.execTask",
+      method: "POST",
+      path: "/api/webhook/tasks",
+      curl: postExec
+    },
+    {
+      id: "listTasks",
+      i18nKey: "integration.snippet.listTasks",
+      method: "GET",
+      path: "/api/webhook/tasks",
+      curl: `${get("/api/webhook/tasks")}
+# single task: GET ${base}/api/webhook/tasks/<TASK_ID>`
+    }
+  ];
+}
+var TERMINAL = /* @__PURE__ */ new Set(["succeeded", "failed", "cancelled", "expired"]);
+function displayStatus(t) {
+  if (TERMINAL.has(t.status)) return t.status;
+  if (t.status === "paused") return "paused";
+  if (t.finished > 0 && t.finished < t.total) return "running";
+  return "pending";
+}
+var STATUS_TAB_KEYS = [
+  "all",
+  "pending",
+  "running",
+  "paused",
+  "succeeded",
+  "failed",
+  "cancelled"
+];
+var batchIdOf = (t) => {
+  const b = t.params?.__batch__;
+  return typeof b === "string" && b ? b : null;
+};
+var targetOf = (t) => {
+  const v = t.params?.__target__;
+  return typeof v === "string" ? v : "";
+};
+function TasksPage(_props = {}) {
+  const t = useAixT();
+  const { devices, fetchDevices } = useDevicesView();
+  const [tab, setTab] = useState("all");
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [integrationOpen, setIntegrationOpen] = useState(false);
+  const [integrationExec, setIntegrationExec] = useState(void 0);
+  const queue = useAutomationQueue();
+  useEffect(() => {
+    void fetchDevices();
+  }, [fetchDevices]);
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (typeof document !== "undefined" && document.hidden) return;
+      void queue.refetch();
+    }, 5e3);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-b border-border px-3 py-2 sm:px-6", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: () => void queue.refetch(),
+          disabled: queue.loading,
+          children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: `w-3.5 h-3.5 ${queue.loading ? "animate-spin" : ""}` }),
+            t("common.refresh")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: () => {
+        setIntegrationExec(void 0);
+        setIntegrationOpen(true);
+      }, children: [
+        /* @__PURE__ */ jsx(Plug, { className: "w-3.5 h-3.5" }),
+        t("integration.open")
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: () => setDrawerOpen(true), children: [
+        /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
+        t("tasks.newTask")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-6", children: /* @__PURE__ */ jsx(
+      QueueList,
+      {
+        queue,
+        tab,
+        onTab: setTab,
+        t,
+        onIntegrate: (exec) => {
+          setIntegrationExec(exec);
+          setIntegrationOpen(true);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      EnqueueDrawer,
+      {
+        open: drawerOpen,
+        onClose: () => setDrawerOpen(false),
+        devices: devices.map((d) => ({ id: d.id, name: d.name, online: d.online })),
+        onEnqueued: () => void queue.refetch(),
+        submitBatch: queue.submitBatch,
+        t
+      }
+    ),
+    /* @__PURE__ */ jsx(IntegrationDrawer, { open: integrationOpen, onClose: () => setIntegrationOpen(false), t, exec: integrationExec })
+  ] });
+}
+function EnqueueDrawer({
+  open,
+  onClose,
+  devices,
+  onEnqueued,
+  submitBatch,
+  t
+}) {
+  const client = useClient();
+  const [scripts, setScripts] = useState([]);
+  const [scriptId, setScriptId] = useState("");
+  const [flow, setFlow] = useState(null);
+  const [schema, setSchema] = useState([]);
+  const [targetText, setTargetText] = useState("");
+  const [values, setValues] = useState({});
+  const [randomOn, setRandomOn] = useState({});
+  const [checkedIds, setCheckedIds] = useState(/* @__PURE__ */ new Set());
+  const [mode, setMode] = useState("round-robin");
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const MODE_OPTIONS = [
+    { value: "round-robin", label: t("tasks.mode.roundRobin") },
+    { value: "broadcast", label: t("tasks.mode.broadcast") }
+  ];
+  const target = useMemo(() => targetParam(schema), [schema]);
+  const sharedParams = useMemo(() => schema.filter((p) => !p.isTarget), [schema]);
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const list = await client.scripts.list();
+        if (!cancelled) setScripts(list.map((s) => ({ id: s.id, name: s.name })));
+      } catch (err) {
+        if (!cancelled) setError(String(err));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, client]);
+  useEffect(() => {
+    if (!scriptId) {
+      setFlow(null);
+      setSchema([]);
+      setValues({});
+      setRandomOn({});
+      setTargetText("");
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const f = await client.scripts.get(scriptId);
+        if (cancelled) return;
+        const sc = variablesToSchema(f.variables);
+        const defaults = schemaDefaults(sc);
+        const tp = targetParam(sc);
+        if (tp) delete defaults[tp.key];
+        setFlow(f);
+        setSchema(sc);
+        setValues(defaults);
+        setRandomOn({});
+        setTargetText("");
+        setError(null);
+      } catch (err) {
+        if (!cancelled) setError(String(err));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [scriptId, client]);
+  const deviceIds = useMemo(() => [...checkedIds], [checkedIds]);
+  const offlineSelected = useMemo(
+    () => devices.filter((d) => checkedIds.has(d.id) && !d.online).length,
+    [devices, checkedIds]
+  );
+  const onlineCount = useMemo(() => devices.filter((d) => d.online).length, [devices]);
+  const targetLines = useMemo(
+    () => targetText.split(/\r?\n/).map((l) => l.trim()).filter(Boolean),
+    [targetText]
+  );
+  const rowCount = target ? targetLines.length : 1;
+  const canSubmit = !!flow && !submitting && deviceIds.length > 0 && rowCount > 0;
+  const submit = async () => {
+    if (!flow || !scriptId) return;
+    setError(null);
+    setSubmitting(true);
+    try {
+      const batchId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : String(Date.now());
+      const lines = target ? targetLines : [""];
+      const rows = lines.map((line) => {
+        const shared = resolveSharedRow(sharedParams, values, randomOn);
+        const row = { ...shared, __batch__: batchId };
+        if (target) {
+          row[target.key] = line;
+          row.__target__ = line;
+        }
+        return row;
+      });
+      await submitBatch({ script: { id: scriptId }, rows, deviceIds, mode });
+      onEnqueued();
+      onClose();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-30 bg-black/40 transition-opacity duration-300",
+          open ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed right-0 top-0 z-40 flex h-full w-full max-w-md flex-col border-l border-border bg-card transition-transform duration-300 ease-in-out",
+          open ? "translate-x-0" : "translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-body-md font-semibold text-foreground", children: t("tasks.newTask") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("common.close"),
+                onClick: onClose,
+                className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium", children: t("tasks.script") }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: scriptId,
+                  onChange: setScriptId,
+                  options: [
+                    { value: "", label: t("tasks.selectScript") },
+                    ...scripts.map((s) => ({ value: s.id, label: s.name }))
+                  ]
+                }
+              )
+            ] }),
+            flow && target && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium", children: t("tasks.targetLabel", {
+                label: target.label || target.key,
+                n: targetLines.length
+              }) }),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  className: "w-full rounded-md border border-input bg-card px-2.5 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                  rows: 6,
+                  value: targetText,
+                  placeholder: t("tasks.targetPlaceholder"),
+                  onChange: (e) => setTargetText(e.target.value)
+                }
+              )
+            ] }),
+            flow && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium", children: t("tasks.sharedParams") }),
+              /* @__PURE__ */ jsx(
+                SharedParamsForm,
+                {
+                  params: sharedParams,
+                  values,
+                  randomOn,
+                  onValue: (k, v) => setValues((p) => ({ ...p, [k]: v })),
+                  onToggleRandom: (k, on) => setRandomOn((p) => ({ ...p, [k]: on }))
+                }
+              )
+            ] }),
+            flow && !target && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("tasks.noTargetHint") }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium", children: t("tasks.targetDevices", { n: deviceIds.length }) }),
+              /* @__PURE__ */ jsx("div", { className: "max-h-48 space-y-1 overflow-y-auto rounded-md border border-border p-2", children: devices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("tasks.noDevices") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border pb-1", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: devices.length > 0 && devices.every((d) => checkedIds.has(d.id)),
+                        onChange: (e) => setCheckedIds(
+                          e.target.checked ? new Set(devices.map((d) => d.id)) : /* @__PURE__ */ new Set()
+                        ),
+                        className: "h-3.5 w-3.5 rounded border-input accent-primary"
+                      }
+                    ),
+                    t("tasks.selectAll")
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-[11px] text-primary hover:underline disabled:opacity-40",
+                      disabled: onlineCount === 0,
+                      onClick: () => setCheckedIds(new Set(devices.filter((d) => d.online).map((d) => d.id))),
+                      children: t("tasks.onlyOnline", { n: onlineCount })
+                    }
+                  )
+                ] }),
+                devices.map((d) => /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: "flex cursor-pointer items-center gap-2 text-xs text-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: checkedIds.has(d.id),
+                          onChange: (e) => setCheckedIds((prev) => {
+                            const next = new Set(prev);
+                            if (e.target.checked) next.add(d.id);
+                            else next.delete(d.id);
+                            return next;
+                          }),
+                          className: "h-3.5 w-3.5 rounded border-input accent-primary"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "h-1.5 w-1.5 shrink-0 rounded-full",
+                            d.online ? "bg-success" : "bg-muted-foreground/40"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: d.name })
+                    ]
+                  },
+                  d.id
+                ))
+              ] }) }),
+              offlineSelected > 0 && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-warning", children: t("tasks.offlineWarn", { n: offlineSelected }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium", children: t("tasks.dispatchMode") }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: mode,
+                  onChange: (v) => setMode(v),
+                  options: MODE_OPTIONS
+                }
+              )
+            ] }),
+            error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-4", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: t("common.cancel") }),
+            /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: submit, disabled: !canSubmit, children: [
+              /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }),
+              submitting ? t("tasks.enqueuing") : t("tasks.enqueueRun", { n: rowCount })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function aggregate(tasks) {
+  const total = tasks.reduce((a, t) => a + t.total, 0);
+  const finished = tasks.reduce((a, t) => a + t.finished, 0);
+  const statuses = tasks.map((t) => displayStatus(t));
+  let status;
+  if (statuses.every((s) => TERMINAL.has(s))) {
+    status = statuses.some((s) => s === "failed" || s === "expired") ? "failed" : statuses.some((s) => s === "cancelled") ? "cancelled" : "succeeded";
+  } else if (statuses.some((s) => s === "paused")) {
+    status = "paused";
+  } else if (finished > 0 && finished < total) {
+    status = "running";
+  } else {
+    status = "pending";
+  }
+  return { total, finished, status };
+}
+function QueueList({
+  queue,
+  tab,
+  onTab,
+  t,
+  onIntegrate
+}) {
+  const all = useMemo(() => queue.data ?? [], [queue.data]);
+  const groups = useMemo(() => {
+    const order = [];
+    const buckets = /* @__PURE__ */ new Map();
+    const singles = [];
+    for (const t2 of all) {
+      const b = batchIdOf(t2);
+      if (b) {
+        if (!buckets.has(b)) {
+          buckets.set(b, []);
+          order.push(b);
+        }
+        buckets.get(b).push(t2);
+      } else {
+        singles.push({ kind: "single", task: t2 });
+      }
+    }
+    const batchGroups = order.map((b) => ({
+      kind: "batch",
+      batchId: b,
+      tasks: buckets.get(b)
+    }));
+    return [...batchGroups, ...singles];
+  }, [all]);
+  const groupStatus = (g) => g.kind === "batch" ? aggregate(g.tasks).status : displayStatus(g.task);
+  const shown = tab === "all" ? groups : groups.filter((g) => groupStatus(g) === tab);
+  const countFor = (key) => key === "all" ? groups.length : groups.filter((g) => groupStatus(g) === key).length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-border bg-card p-3 sm:p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1 border-b border-border pb-2", children: STATUS_TAB_KEYS.map((key) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onTab(key),
+        className: cn(
+          "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+          tab === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+        ),
+        children: [
+          t(`tasks.tab.${key}`),
+          /* @__PURE__ */ jsx("span", { className: "ml-1 opacity-60", children: countFor(key) })
+        ]
+      },
+      key
+    )) }),
+    queue.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: queue.error.message }),
+    shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-muted-foreground", children: queue.loading ? t("common.loading") : t("tasks.empty") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: shown.map(
+      (g) => g.kind === "batch" ? /* @__PURE__ */ jsx(BatchGroup, { tasks: g.tasks, queue, t }, g.batchId) : /* @__PURE__ */ jsx(
+        TaskRow,
+        {
+          task: g.task,
+          onCancel: () => void queue.cancel(g.task.task_id),
+          onPause: () => void queue.pause(g.task.task_id),
+          onResume: () => void queue.resume(g.task.task_id),
+          onIntegrate,
+          t
+        },
+        g.task.task_id
+      )
+    ) })
+  ] });
+}
+function BatchGroup({
+  tasks,
+  queue,
+  t
+}) {
+  const [open, setOpen] = useState(false);
+  const agg = aggregate(tasks);
+  const progress = agg.total > 0 ? Math.round(agg.finished / agg.total * 100) : 0;
+  const terminal = TERMINAL.has(agg.status);
+  const paused = agg.status === "paused";
+  const createdAt = tasks.reduce(
+    (min, t2) => t2.created_at < min ? t2.created_at : min,
+    tasks[0]?.created_at ?? ""
+  );
+  const actOnAll = (fn) => tasks.forEach((t2) => fn(t2.task_id));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": open ? t("tasks.collapseTargets") : t("tasks.expandTargets"),
+          onClick: () => setOpen((v) => !v),
+          className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+          children: open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "truncate text-xs font-medium text-foreground", children: [
+          t("tasks.batchLabel", { n: tasks.length }),
+          createdAt && /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: new Date(createdAt).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: t("tasks.progress", { finished: agg.finished, total: agg.total, percent: progress }) })
+      ] }),
+      /* @__PURE__ */ jsx(TaskStatusBadge, { status: agg.status, t }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: !terminal && /* @__PURE__ */ jsxs(Fragment, { children: [
+        paused ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: t("tasks.resumeAll"),
+            onClick: () => actOnAll((id) => void queue.resume(id)),
+            className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+            children: /* @__PURE__ */ jsx(PlayCircle, { className: "h-3.5 w-3.5" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: t("tasks.pauseAll"),
+            onClick: () => actOnAll((id) => void queue.pause(id)),
+            className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+            children: /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: t("tasks.cancelAll"),
+            onClick: () => actOnAll((id) => void queue.cancel(id)),
+            className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-destructive",
+            children: /* @__PURE__ */ jsx(Ban, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }) })
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-secondary/30 p-2.5", children: /* @__PURE__ */ jsx("div", { className: "space-y-1", children: tasks.map((task) => /* @__PURE__ */ jsx(TargetRow, { task, t }, task.task_id)) }) })
+  ] });
+}
+function TargetRow({ task, t }) {
+  const client = useClient();
+  const [open, setOpen] = useState(false);
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const ds = displayStatus(task);
+  const label = targetOf(task) || task.task_id.slice(0, 8);
+  useEffect(() => {
+    if (!open || detail) return;
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const d = await client.tasks.get(task.task_id);
+        if (!cancelled) setDetail(d);
+      } catch {
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, detail, task.task_id, client]);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-card/40", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 p-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          className: "flex min-w-0 flex-1 items-center gap-1.5 text-left",
+          children: [
+            open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[11px]", children: label })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TaskStatusBadge, { status: ds, t })
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 px-2 py-1.5", children: loading && !detail ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("tasks.loadingDetail") }) : detail && detail.targets.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: detail.targets.map((tg) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between gap-2 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-mono", children: tg.device_id }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            tg.error && /* @__PURE__ */ jsx("span", { className: "truncate text-destructive", title: tg.error, children: tg.error }),
+            /* @__PURE__ */ jsx(TaskStatusBadge, { status: tg.status, t })
+          ] })
+        ]
+      },
+      tg.device_id
+    )) }) : /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("tasks.noDeviceDetail") }) })
+  ] });
+}
+function TaskRow({
+  task,
+  onCancel,
+  onPause,
+  onResume,
+  onIntegrate,
+  t
+}) {
+  const client = useClient();
+  const [open, setOpen] = useState(false);
+  const [detail, setDetail] = useState(null);
+  const [events, setEvents] = useState([]);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const progress = task.total > 0 ? Math.round(task.finished / task.total * 100) : 0;
+  const ds = displayStatus(task);
+  const terminal = TERMINAL.has(ds);
+  const paused = ds === "paused";
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoadingDetail(true);
+    (async () => {
+      try {
+        const [d, ev] = await Promise.all([
+          client.tasks.get(task.task_id),
+          client.tasks.events(task.task_id, { limit: 20 }).catch(() => ({ events: [] }))
+        ]);
+        if (!cancelled) {
+          setDetail(d);
+          setEvents(ev.events ?? []);
+        }
+      } catch {
+      } finally {
+        if (!cancelled) setLoadingDetail(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, task.task_id, client]);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": open ? t("tasks.collapseDetail") : t("tasks.expandDetail"),
+          onClick: () => setOpen((v) => !v),
+          className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+          children: open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 truncate text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsx(TaskSourceIcon, { source: task.source, t }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: task.task_id.slice(0, 8) }),
+          /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", children: t("tasks.source", { source: task.source }) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: t("tasks.progress", { finished: task.finished, total: task.total, percent: progress }) })
+      ] }),
+      /* @__PURE__ */ jsx(TaskStatusBadge, { status: ds, t }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: t("integration.openForTask"),
+            onClick: () => onIntegrate({ params: task.params }),
+            className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+            children: /* @__PURE__ */ jsx(Plug, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        !terminal && /* @__PURE__ */ jsxs(Fragment, { children: [
+          paused ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: t("tasks.resume"),
+              onClick: onResume,
+              className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+              children: /* @__PURE__ */ jsx(PlayCircle, { className: "h-3.5 w-3.5" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: t("tasks.pause"),
+              onClick: onPause,
+              className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: t("tasks.cancel"),
+              onClick: onCancel,
+              className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-destructive",
+              children: /* @__PURE__ */ jsx(Ban, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "border-t border-border bg-secondary/30 p-2.5", children: [
+      loadingDetail && !detail ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("tasks.loadingDetail") }) : detail && detail.targets.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: detail.targets.map((tg) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-mono", children: tg.device_id }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              tg.error && /* @__PURE__ */ jsx("span", { className: "truncate text-destructive", title: tg.error, children: tg.error }),
+              /* @__PURE__ */ jsx(TaskStatusBadge, { status: tg.status, t })
+            ] })
+          ]
+        },
+        tg.device_id
+      )) }) : /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("tasks.noTargetDetail") }),
+      events.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-border/60 pt-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] font-medium text-muted-foreground", children: t("tasks.recentEvents") }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-40 space-y-0.5 overflow-y-auto", children: events.map((ev) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between gap-2 text-[11px] text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                ev.kind,
+                ev.status ? ` \xB7 ${ev.status}` : "",
+                ev.external_id ? ` \xB7 ${ev.external_id}` : ""
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-60", children: new Date(ev.created_at).toLocaleTimeString() })
+            ]
+          },
+          ev.id
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function CopyButton({ text, t }) {
+  const [done, setDone] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard?.writeText(text);
+      setDone(true);
+      setTimeout(() => setDone(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-primary hover:bg-secondary",
+      children: [
+        /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }),
+        done ? t("integration.copied") : t("integration.copy")
+      ]
+    }
+  );
+}
+function IntegrationDrawer({
+  open,
+  onClose,
+  t,
+  exec
+}) {
+  const cfg = useAixConfig();
+  const { data: tokens, loading, create, revoke } = useApiTokens();
+  const [name, setName] = useState("");
+  const [pin, setPin] = useState(false);
+  const [projectId, setProjectId] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState(null);
+  const [selected, setSelected] = useState(null);
+  useEffect(() => {
+    if (!open) setSelected(null);
+  }, [open]);
+  const onCreate = async () => {
+    if (!name.trim()) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const created = await create({
+        name: name.trim(),
+        project_id: pin && projectId.trim() ? projectId.trim() : void 0
+      });
+      setSelected({ token: created.token, unpinned: created.project_id == null });
+      setName("");
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setCreating(false);
+    }
+  };
+  const tokenList = tokens ?? [];
+  const snippetToken = selected?.token ?? `${tokenList[0]?.token_prefix ?? "aixpat_"}\u2026`;
+  const snippetUnpinned = selected?.unpinned ?? (tokenList[0] ? tokenList[0].project_id == null : true);
+  const snippets = buildSnippets({
+    baseUrl: cfg.baseUrl,
+    token: snippetToken,
+    unpinned: snippetUnpinned,
+    exec
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-30 bg-black/40 transition-opacity duration-300",
+          open ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed right-0 top-0 z-40 flex h-full w-full max-w-lg flex-col border-l border-border bg-card transition-transform duration-300 ease-in-out",
+          open ? "translate-x-0" : "translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-body-md font-semibold text-foreground", children: [
+              /* @__PURE__ */ jsx(Plug, { className: "h-4 w-4" }),
+              t("integration.title")
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("common.close"),
+                onClick: onClose,
+                className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-5 overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-foreground", children: t("integration.tokens") }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-border p-2.5", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: name,
+                    placeholder: t("integration.tokenNamePlaceholder"),
+                    onChange: (e) => setName(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: pin,
+                      onChange: (e) => setPin(e.target.checked),
+                      className: "h-3.5 w-3.5 rounded border-input accent-primary"
+                    }
+                  ),
+                  pin ? t("integration.scope.pin") : t("integration.scope.all")
+                ] }),
+                pin && /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: projectId,
+                    placeholder: t("integration.projectIdPlaceholder"),
+                    onChange: (e) => setProjectId(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: () => void onCreate(), disabled: creating || !name.trim(), children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                  creating ? t("integration.creating") : t("integration.create")
+                ] }),
+                error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error })
+              ] }),
+              selected?.token && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-primary/40 bg-primary/5 p-2.5", children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] text-primary", children: t("integration.created.once") }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("code", { className: "truncate font-mono text-xs text-foreground", children: selected.token }),
+                  /* @__PURE__ */ jsx(CopyButton, { text: selected.token, t })
+                ] })
+              ] }),
+              loading ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("common.loading") }) : tokenList.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("integration.tokens.empty") }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: tokenList.map((tk) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-2 rounded border border-border/60 px-2 py-1.5 text-xs",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxs("p", { className: "truncate font-medium text-foreground", children: [
+                        tk.name,
+                        /* @__PURE__ */ jsxs("span", { className: "ml-1.5 font-mono text-muted-foreground", children: [
+                          tk.token_prefix,
+                          "\u2026"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: tk.revoked_at ? t("integration.revoked") : `${t("integration.lastUsed")}: ${tk.last_used_at ? new Date(tk.last_used_at).toLocaleDateString() : t("integration.never")}` })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          title: t("integration.selectToken"),
+                          onClick: () => setSelected({ token: `${tk.token_prefix}\u2026`, unpinned: tk.project_id == null }),
+                          className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground",
+                          children: /* @__PURE__ */ jsx(Plug, { className: "h-3.5 w-3.5" })
+                        }
+                      ),
+                      !tk.revoked_at && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          title: t("integration.revoke"),
+                          onClick: () => {
+                            if (typeof window !== "undefined" && !window.confirm(t("integration.revokeConfirm"))) return;
+                            void revoke(tk.id);
+                          },
+                          className: "rounded p-1 text-muted-foreground hover:bg-secondary hover:text-destructive",
+                          children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                tk.id
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-foreground", children: t("integration.snippets") }),
+              /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("integration.selectTokenHint") }),
+              snippetUnpinned && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-warning", children: t("integration.unpinnedHint") }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-2", children: snippets.map((sn) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-2.5 py-1.5", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+                    /* @__PURE__ */ jsx("span", { className: "mr-1.5 font-mono text-[10px] text-muted-foreground", children: sn.method }),
+                    t(sn.i18nKey)
+                  ] }),
+                  /* @__PURE__ */ jsx(CopyButton, { text: sn.curl, t })
+                ] }),
+                /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-all p-2.5 text-[11px] text-muted-foreground", children: sn.curl })
+              ] }, sn.id)) })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function TaskSourceIcon({ source, t }) {
+  const isWebhook = source === "webhook";
+  const Icon = isWebhook ? Webhook : MonitorSmartphone;
+  const tip = isWebhook ? t("tasks.sourceTip.webhook") : t("tasks.sourceTip.local");
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: tip,
+      className: cn(
+        "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+        isWebhook ? "text-primary" : "text-muted-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+function TaskStatusBadge({ status, t }) {
+  const variant = status === "succeeded" ? "success" : status === "failed" || status === "expired" ? "destructive" : status === "running" || status === "notified" ? "info" : status === "paused" ? "warning" : "muted";
+  return /* @__PURE__ */ jsx(Badge, { variant, children: t(`tasks.status.${status}`) });
+}
+
+export { TasksPage };