@blade-hq/agent-react 2612.0.0-beta.8 → 2612.0.0-beta.80

package/dist/chunk-FBGCDXRK.js

@@ -0,0 +1,607 @@
+import {
+  PluginConnectorList,
+  SessionPluginIcon,
+  catalogToConnectorItems,
+  filterConnectorItems,
+  useSessionPluginActivation
+} from "./chunk-F4MWGSKX.js";
+import {
+  ConnectorConnection
+} from "./chunk-FH5HA3GW.js";
+import {
+  AccountConnectorRules,
+  BrowserConnectionDialog
+} from "./chunk-NRYLAO3X.js";
+import {
+  ConfigConnection,
+  Dialog,
+  DialogContent,
+  DialogTitle
+} from "./chunk-MWILWSPG.js";
+import {
+  Check,
+  LoaderCircle,
+  Pencil,
+  Plug,
+  RefreshCw,
+  Search,
+  Trash2
+} from "./chunk-KHJEIHMJ.js";
+
+// src/components/connector-panel-types.ts
+function selectionFromItem(item) {
+  return {
+    name: item.name,
+    displayName: item.display_name ?? null,
+    icon: item.icon,
+    iconSource: item.iconSource
+  };
+}
+var TRIGGER_ICON_LIMIT = 3;
+function triggerSummary(items) {
+  const visible = items.slice(0, TRIGGER_ICON_LIMIT);
+  return {
+    visible,
+    overflow: items.length - visible.length,
+    total: items.length
+  };
+}
+
+// src/components/AccountConnectors.tsx
+import { isLocalConnectorName } from "@blade-hq/agent-client/internal";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SessionPluginConfigForm = lazy(() => import("./SessionPluginConfigForm-7LJ5SUNY.js").then((module) => ({ default: module.SessionPluginConfigForm })));
+var actionBaseClass = "inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-xs font-medium text-[hsl(var(--foreground))] transition-colors hover:bg-[hsl(var(--accent))] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50";
+var actionClass = `${actionBaseClass} px-3`;
+var iconActionClass = `${actionBaseClass} w-8 p-0`;
+async function failureMessage(error) {
+  const response = error?.response;
+  if (response) {
+    try {
+      const body = await response.json();
+      if (typeof body.detail === "string") return body.detail;
+      if (typeof body.detail?.message === "string") return body.detail.message;
+    } catch {
+    }
+  }
+  return "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5";
+}
+function DeviceDialog({ client, connector, onChanged, onClose }) {
+  const [rulesRefresh, setRulesRefresh] = useState(0);
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, className: "max-h-[85dvh] overflow-y-auto sm:max-w-[640px]", children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { className: "sr-only", children: [
+      "\u8FDE\u63A5 ",
+      connector.display_name || connector.name
+    ] }),
+    /* @__PURE__ */ jsx(ConnectorConnection, { detail: { name: connector.name, title: connector.display_name || connector.name, icon: /* @__PURE__ */ jsx(SessionPluginIcon, { client, sessionId: null, plugin: connector, size: 44 }), rules: /* @__PURE__ */ jsx(AccountConnectorRules, { client, name: connector.name, refresh: rulesRefresh }) }, type: connector.authorization?.type === "managed" ? "managed" : "device", read: () => client.connectors.authorization(connector.name), act: (action, options) => client.connectors.authorize(connector.name, action, void 0, options), plan: (capabilities) => client.connectors.authorizationPlan(connector.name, capabilities), diagnostics: () => client.connectors.diagnostics(connector.name), onChanged: async () => {
+      await onChanged();
+      setRulesRefresh((value) => value + 1);
+    }, onDisable: () => client.connectors.disconnect(connector.name) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: actionClass, onClick: onClose, children: "\u8FD4\u56DE\u8FDE\u63A5\u5668" })
+  ] }) });
+}
+function ConnectionDialog({ client, connector, onConnected, onChanged, onClose }) {
+  const [view, setView] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [rulesRefresh, setRulesRefresh] = useState(0);
+  const connectionRequest = useRef(null);
+  const alive = useRef(false);
+  useEffect(() => {
+    alive.current = true;
+    const abort = new AbortController();
+    client.connectors.read(connector.name, { signal: abort.signal }).then((value) => {
+      if (!abort.signal.aborted) setView(value);
+    }).catch(async (error) => {
+      const message = await failureMessage(error);
+      if (!abort.signal.aborted) setFailure(message);
+    });
+    return () => {
+      alive.current = false;
+      abort.abort();
+      connectionRequest.current?.abort();
+    };
+  }, [client, connector.name]);
+  async function submit(draft) {
+    if (!view || submitting) return;
+    setSubmitting(true);
+    setFailure(null);
+    const request = new AbortController();
+    connectionRequest.current = request;
+    try {
+      const next = await client.connectors.connect(connector.name, { expected_revision: view.config.revision, ...draft }, { signal: request.signal });
+      if (request.signal.aborted) return;
+      setView(next);
+      setEditing(false);
+      setRulesRefresh((value) => value + 1);
+      try {
+        await onConnected();
+      } catch {
+        if (!request.signal.aborted) setFailure("\u5DF2\u8FDE\u63A5\uFF0C\u4F46\u5217\u8868\u6216\u5BF9\u8BDD\u72B6\u6001\u672A\u80FD\u5237\u65B0\u3002\u8BF7\u8FD4\u56DE\u540E\u91CD\u8BD5\u5237\u65B0\u6216\u542F\u7528\u3002");
+      }
+    } catch (error) {
+      if (request.signal.aborted) return;
+      setFailure(await failureMessage(error));
+      try {
+        const next = await client.connectors.read(connector.name);
+        if (!request.signal.aborted) setView(next);
+      } catch {
+      }
+    } finally {
+      if (!request.signal.aborted) setSubmitting(false);
+    }
+  }
+  const form = view && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("output", { children: "\u6B63\u5728\u8BFB\u53D6\u8FDE\u63A5\u8868\u5355\u2026" }), children: /* @__PURE__ */ jsx(SessionPluginConfigForm, { collapseHelp: true, config: view.config, submitting, errors: [], failure, submitLabel: editing ? "\u4FDD\u5B58\u5E76\u8FDE\u63A5" : "\u8FDE\u63A5\u5E76\u9A8C\u8BC1", submittingLabel: "\u6B63\u5728\u8FDE\u63A5\u2026", onCancel: () => editing ? setEditing(false) : onClose(), onSubmit: (draft) => void submit(draft) }) });
+  const current = view?.connection ?? connector.connection;
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => {
+    if (!open && !submitting) onClose();
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, className: "max-h-[85dvh] overflow-y-auto sm:max-w-[640px]", onEscapeKeyDown: (event) => {
+    if (submitting) event.preventDefault();
+  }, onInteractOutside: (event) => {
+    if (submitting) event.preventDefault();
+  }, children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { className: "sr-only", children: [
+      "\u8FDE\u63A5 ",
+      connector.display_name || connector.name
+    ] }),
+    /* @__PURE__ */ jsx(ConfigConnection, { detail: { title: connector.display_name || connector.name, icon: /* @__PURE__ */ jsx(SessionPluginIcon, { client, sessionId: null, plugin: connector, size: 44 }), rules: /* @__PURE__ */ jsx(AccountConnectorRules, { client, name: connector.name, refresh: rulesRefresh }) }, status: current.status, account: current.account_label, verifiedAt: current.verified_at, busy: submitting, connection: view ? form : /* @__PURE__ */ jsx("output", { children: failure || "\u6B63\u5728\u83B7\u53D6\u8BA4\u8BC1\u8868\u5355\u2026" }), onEdit: () => setEditing(true), onDisconnect: async () => {
+      setSubmitting(true);
+      try {
+        const next = await client.connectors.disconnect(connector.name);
+        if (alive.current) {
+          setView(next);
+          setRulesRefresh((value) => value + 1);
+        }
+        await onChanged();
+      } finally {
+        if (alive.current) setSubmitting(false);
+      }
+    }, onVerify: async () => {
+      const next = await client.connectors.verify(connector.name);
+      if (alive.current) setView(next);
+    } }),
+    failure && current.status === "connected" && /* @__PURE__ */ jsx("p", { role: "alert", children: failure }),
+    editing && /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => {
+      if (!open && !submitting) setEditing(false);
+    }, children: /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, className: "max-h-[85dvh] overflow-y-auto", onEscapeKeyDown: (event) => {
+      if (submitting) event.preventDefault();
+    }, onInteractOutside: (event) => {
+      if (submitting) event.preventDefault();
+    }, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "\u66F4\u6362\u8D26\u53F7" }),
+      /* @__PURE__ */ jsx("p", { children: "\u4FDD\u5B58\u540E\u65E7\u8D26\u53F7\u8FDE\u63A5\u4F1A\u88AB\u66FF\u6362\uFF0C\u4F7F\u7528\u89C4\u5219\u4FDD\u7559\u3002" }),
+      form
+    ] }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", disabled: submitting, className: actionClass, onClick: onClose, children: "\u8FD4\u56DE\u8FDE\u63A5\u5668" })
+  ] }) });
+}
+function AccountConnectors({ client, query = "", sessionId = null, pending, onUse, onSelectedChange, disabledReason, catalog = false, manage = false, onEdit }) {
+  const [items, setItems] = useState([]);
+  const [editing, setEditing] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const deleteDialog = useRef(null);
+  const [deleting, setDeleting] = useState(null);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (!deleting) return;
+    const element = deleteDialog.current;
+    element?.showModal();
+    return () => element?.close();
+  }, [deleting]);
+  const lifetime = useRef(null);
+  const load = useCallback((signal) => sessionId ? client.connectors.listForSession(sessionId, { signal }) : client.connectors.list({ signal }), [client, sessionId]);
+  const reload = useCallback(async () => {
+    const scope = lifetime.current;
+    const result = await load(scope?.signal);
+    if (scope === lifetime.current && !scope?.signal.aborted) {
+      setItems(result.connectors);
+      setFailure(null);
+    }
+  }, [load]);
+  useEffect(() => {
+    const abort = new AbortController();
+    lifetime.current = abort;
+    setItems([]);
+    setEditing(null);
+    setLoading(true);
+    setFailure(null);
+    load(abort.signal).then((value) => {
+      if (!abort.signal.aborted) setItems(value.connectors);
+    }).catch(async (error) => {
+      const message = await failureMessage(error);
+      if (!abort.signal.aborted) setFailure(message);
+    }).finally(() => {
+      if (!abort.signal.aborted) setLoading(false);
+    });
+    return () => abort.abort();
+  }, [load]);
+  const visible = useMemo(() => {
+    const result = items.map((item) => ({ ...item, active: sessionId ? item.active : Boolean(pending?.has(item.name)) }));
+    if (!sessionId) {
+      for (const name of pending ?? []) if (isLocalConnectorName(name) && !result.some((item) => item.name === name)) result.push({ name, display_name: name.split(".").slice(2).join("."), description: "\u8FDE\u63A5\u5668\u5DF2\u79FB\u9664\u6216\u6682\u4E0D\u53EF\u7528\uFF0C\u53EF\u53D6\u6D88\u9009\u62E9\u540E\u7EE7\u7EED\u3002", source: name.startsWith("connector.builtin.") ? "builtin" : "personal", operations: 0, available: false, active: true, connection: { status: "disconnected", revision: 0, account_label: "", verified_at: "" } });
+    }
+    return result;
+  }, [items, pending, sessionId]);
+  const selected = useRef(onSelectedChange);
+  selected.current = onSelectedChange;
+  useEffect(() => {
+    selected.current?.(visible.filter((item) => item.active));
+  }, [visible]);
+  const matching = visible.filter((item) => `${item.display_name} ${item.description}`.toLowerCase().includes(query.trim().toLowerCase()));
+  return /* @__PURE__ */ jsxs("div", { className: catalog ? "grid gap-4 sm:grid-cols-2 xl:grid-cols-3" : void 0, children: [
+    !catalog ? /* @__PURE__ */ jsx("div", { className: "px-3 pt-1 pb-0.5 text-[10px] text-[hsl(var(--muted-foreground))]", children: "\u8FDE\u63A5\u5668" }) : null,
+    loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u8BFB\u53D6\u8FDE\u63A5\u5668\u2026" }) : null,
+    !loading && !failure && matching.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]", children: query.trim() ? "\u6CA1\u6709\u5339\u914D\u7684\u8FDE\u63A5\u5668" : "\u6682\u65E0\u8FDE\u63A5\u5668" }) : null,
+    matching.map((item) => {
+      const connected = item.connection.status === "connected";
+      const label = item.display_name || item.name;
+      const ConnectIcon = connected ? RefreshCw : Plug;
+      const connectionClass = `${actionClass} ${!connected ? "border-transparent bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary)/0.9)]" : ""}`;
+      const connectAction = /* @__PURE__ */ jsxs("button", { type: "button", disabled: busy || item.available === false, className: connectionClass, onClick: () => {
+        setFailure(null);
+        setEditing(item);
+      }, children: [
+        /* @__PURE__ */ jsx(ConnectIcon, { size: 14, "aria-hidden": "true" }),
+        ["device", "managed"].includes(item.authorization?.type ?? "") ? "\u7BA1\u7406\u6388\u6743" : connected ? "\u7BA1\u7406\u8FDE\u63A5" : "\u8FDE\u63A5"
+      ] });
+      const useAction = onUse && (item.active || connected && item.operations > 0) ? /* @__PURE__ */ jsxs("button", { type: "button", disabled: busy || Boolean(disabledReason), title: disabledReason ?? void 0, className: actionClass, onClick: async () => {
+        const scope = lifetime.current;
+        setBusy(true);
+        setFailure(null);
+        try {
+          await onUse(item.name, label, !item.active, item.icon ?? null);
+          if (sessionId) await reload();
+        } catch (error) {
+          const message = await failureMessage(error);
+          if (scope === lifetime.current && !scope?.signal.aborted) setFailure(message);
+        } finally {
+          if (scope === lifetime.current && !scope?.signal.aborted) setBusy(false);
+        }
+      }, children: [
+        item.active ? /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : null,
+        item.active ? "\u5DF2\u542F\u7528" : "\u4F7F\u7528"
+      ] }) : null;
+      return /* @__PURE__ */ jsxs("div", { className: catalog ? "flex flex-col rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-5" : "px-3 py-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${catalog ? "text-sm" : "text-[11px]"}`, children: [
+          /* @__PURE__ */ jsx(SessionPluginIcon, { client, sessionId: null, plugin: { name: item.name, icon: item.icon ?? null }, size: catalog ? 32 : 20 }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", title: label, children: label }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--muted-foreground))]", children: item.source === "builtin" ? "\u5185\u7F6E" : "\u6211\u521B\u5EFA\u7684" }),
+          !catalog ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            connectAction,
+            useAction
+          ] }) : null
+        ] }),
+        catalog ? /* @__PURE__ */ jsx("p", { className: "mt-2 flex-1 text-xs leading-5 text-[hsl(var(--muted-foreground))]", children: item.description }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-1.5 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `size-1.5 shrink-0 rounded-full ${connected ? "bg-emerald-500" : "bg-[hsl(var(--muted-foreground)/0.4)]"}` }),
+          connected ? `\u5DF2\u8FDE\u63A5${item.connection.account_label ? ` \xB7 ${item.connection.account_label}` : ""}${item.name === "connector.builtin.feishu" ? "\uFF0C\u6309\u5DF2\u5F00\u901A\u80FD\u529B\u63D0\u4F9B\u64CD\u4F5C" : item.operations === 0 ? "\uFF0C\u5C1A\u672A\u914D\u7F6E\u4E1A\u52A1\u64CD\u4F5C" : ""}` : item.connection.status === "auth_required" ? "\u9700\u8981\u91CD\u65B0\u8BA4\u8BC1" : "\u672A\u8FDE\u63A5"
+        ] }),
+        catalog ? /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2 border-t border-[hsl(var(--border))] pt-4", children: [
+          connectAction,
+          useAction,
+          manage ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1.5", children: item.source === "personal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, "aria-label": "\u7F16\u8F91", title: "\u7F16\u8F91\u8FDE\u63A5\u5668", className: iconActionClass, onClick: () => onEdit?.(item), children: /* @__PURE__ */ jsx(Pencil, { size: 15, "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, "aria-label": "\u5220\u9664", title: "\u5220\u9664\u8FDE\u63A5\u5668", className: `${iconActionClass} text-[hsl(var(--destructive))] hover:border-[hsl(var(--destructive)/0.3)] hover:bg-[hsl(var(--destructive)/0.08)]`, onClick: () => setDeleting(item), children: /* @__PURE__ */ jsx(Trash2, { size: 15, "aria-hidden": "true" }) })
+          ] }) : null }) : null
+        ] }) : null
+      ] }, item.name);
+    }),
+    deleting ? /* @__PURE__ */ jsxs("dialog", { ref: deleteDialog, onCancel: (event) => {
+      event.preventDefault();
+      if (!busy) setDeleting(null);
+    }, "aria-label": "\u5220\u9664\u8FDE\u63A5\u5668", className: "fixed inset-0 z-50 m-auto w-[min(420px,calc(100%_-_32px))] rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-5 text-[hsl(var(--popover-foreground))] shadow-xl", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        "\u5220\u9664\u300C",
+        deleting.display_name || deleting.name,
+        "\u300D\u53CA\u5176\u8FDE\u63A5\u4FE1\u606F\uFF1F\u9700\u8981\u4F7F\u7528\u65F6\u53EF\u4EE5\u91CD\u65B0\u521B\u5EFA\u3002"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-3", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, className: actionClass, onClick: () => setDeleting(null), children: "\u53D6\u6D88" }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, className: `${actionClass} border-transparent bg-[hsl(var(--destructive))] text-white hover:bg-[hsl(var(--destructive)/0.9)]`, onClick: async () => {
+          setBusy(true);
+          try {
+            await client.connectors.delete(deleting.name);
+            setDeleting(null);
+            await reload();
+          } catch (error) {
+            setFailure(await failureMessage(error));
+            setDeleting(null);
+          } finally {
+            setBusy(false);
+          }
+        }, children: busy ? "\u6B63\u5728\u5220\u9664\u2026" : "\u786E\u8BA4\u5220\u9664" })
+      ] })
+    ] }) : null,
+    failure ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "px-3 py-1 text-xs text-[hsl(var(--destructive))]", children: [
+      failure,
+      /* @__PURE__ */ jsx("button", { type: "button", className: `${actionClass} ml-2`, onClick: () => {
+        void reload().catch(() => setFailure("\u8BFB\u53D6\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"));
+      }, children: "\u91CD\u8BD5" })
+    ] }) : null,
+    editing && ["device", "managed"].includes(editing.authorization?.type ?? "") ? /* @__PURE__ */ jsx(DeviceDialog, { client, connector: editing, onChanged: reload, onClose: () => {
+      setEditing(null);
+      void reload();
+    } }, editing.name) : editing?.authorization?.type === "browser" ? /* @__PURE__ */ jsx(BrowserConnectionDialog, { connector: editing, client, name: editing.name, label: editing.display_name || editing.name, onClose: () => {
+      setEditing(null);
+      void reload().catch(() => setFailure("\u8BFB\u53D6\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"));
+    } }, editing.name) : editing ? /* @__PURE__ */ jsx(ConnectionDialog, { client, onChanged: reload, connector: editing, onClose: () => setEditing(null), onConnected: async () => {
+      const scope = lifetime.current;
+      await reload();
+      if (scope !== lifetime.current || scope?.signal.aborted) return;
+      if (onUse && editing.operations > 0 && !disabledReason) {
+        await onUse(editing.name, editing.display_name || editing.name, true);
+        if (sessionId) await reload();
+      }
+    } }, editing.name) : null
+  ] });
+}
+
+// src/components/ConnectorPanel.tsx
+import { isLocalConnectorName as isLocalConnectorName2 } from "@blade-hq/agent-client/internal";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PanelDivider() {
+  return /* @__PURE__ */ jsx2("div", { className: "my-1 border-[hsl(var(--border))] border-t" });
+}
+function PanelTitle({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "px-3 pt-1 pb-0.5 text-[10px] text-[hsl(var(--muted-foreground))]", children });
+}
+function ConnectorPanel({
+  client,
+  sessionId,
+  pendingPlugins,
+  onPendingPluginsChange,
+  pendingDisabledReason,
+  onPluginsChanged,
+  onSelectedChange,
+  renderComputerSection,
+  renderPhoneSection,
+  renderExternalAccounts,
+  renderFooterActions,
+  className
+}) {
+  const [query, setQuery] = useState2("");
+  const [selectedConnectors, setSelectedConnectors] = useState2([]);
+  const [pendingCatalog, setPendingCatalog] = useState2(null);
+  const [pendingLoading, setPendingLoading] = useState2(false);
+  const [pendingError, setPendingError] = useState2(false);
+  const activation = useSessionPluginActivation({
+    client,
+    sessionId: sessionId ?? "",
+    onChange: onPluginsChanged
+  });
+  const { reload, items: sessionItems } = activation;
+  useEffect2(() => {
+    if (sessionId) reload();
+  }, [reload, sessionId]);
+  const loadPendingCatalog = useCallback2(async () => {
+    setPendingLoading(true);
+    setPendingError(false);
+    try {
+      const { plugins } = await client.plugins.catalog();
+      setPendingCatalog(plugins);
+    } catch {
+      setPendingError(true);
+    } finally {
+      setPendingLoading(false);
+    }
+  }, [client]);
+  useEffect2(() => {
+    if (sessionId) return;
+    void loadPendingCatalog();
+  }, [loadPendingCatalog, sessionId]);
+  const selected = useMemo2(
+    () => new Set((pendingPlugins ?? []).map((item) => item.name)),
+    [pendingPlugins]
+  );
+  const items = useMemo2(() => {
+    if (sessionId) return sessionItems;
+    return catalogToConnectorItems(pendingCatalog ?? []).map((item) => ({
+      ...item,
+      active: selected.has(item.name)
+    }));
+  }, [pendingCatalog, selected, sessionId, sessionItems]);
+  const visibleItems = useMemo2(
+    () => sessionId ? filterConnectorItems(items, query) : filterConnectorItems(items, query).map((item) => ({ ...item, config: void 0 })),
+    [items, query, sessionId]
+  );
+  const togglePending = useCallback2((item, next) => {
+    const kept = (pendingPlugins ?? []).filter((entry) => entry.name !== item.name);
+    onPendingPluginsChange?.(next ? [...kept, selectionFromItem(item)] : kept);
+  }, [onPendingPluginsChange, pendingPlugins]);
+  const toggle = useCallback2((item, next) => {
+    if (sessionId) activation.toggle(item, next);
+    else togglePending(item, next);
+  }, [activation, sessionId, togglePending]);
+  const selectedItems = useMemo2(
+    () => [
+      ...items.filter((item) => item.active && !isLocalConnectorName2(item.name)),
+      ...selectedConnectors.map((item) => ({
+        name: item.name,
+        display_name: item.display_name,
+        icon: item.icon ?? null,
+        iconSource: "account",
+        installed: true,
+        active: true,
+        status: "valid",
+        projected: false,
+        connector: true
+      }))
+    ],
+    [items, selectedConnectors]
+  );
+  const onSelectedChangeRef = useRef2(onSelectedChange);
+  onSelectedChangeRef.current = onSelectedChange;
+  const latestSelected = useRef2(selectedItems);
+  latestSelected.current = selectedItems;
+  const reportSelected = useCallback2(() => {
+    onSelectedChangeRef.current?.(latestSelected.current);
+  }, []);
+  const selectedNames = selectedItems.map((item) => item.name).join("\0");
+  useEffect2(reportSelected, [reportSelected, selectedNames]);
+  const failed = sessionId ? activation.listError : pendingError;
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-[hsl(var(--border))] border-b px-3 py-2", children: [
+      /* @__PURE__ */ jsx2(Search, { size: 12, className: "shrink-0 text-[hsl(var(--muted-foreground))]", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "\u641C\u7D22\u8FDE\u63A5\u5668",
+          "aria-label": "\u641C\u7D22\u8FDE\u63A5\u5668",
+          className: "min-w-0 flex-1 bg-transparent text-[11px] outline-none placeholder:text-[hsl(var(--muted-foreground))]"
+        }
+      )
+    ] }),
+    renderComputerSection ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(PanelTitle, { children: "\u7535\u8111" }),
+      renderComputerSection(query)
+    ] }) : null,
+    renderPhoneSection ? renderPhoneSection(query) : null,
+    /* @__PURE__ */ jsx2(PanelDivider, {}),
+    /* @__PURE__ */ jsx2(
+      AccountConnectors,
+      {
+        client,
+        query,
+        sessionId,
+        pending: selected,
+        onSelectedChange: setSelectedConnectors,
+        disabledReason: pendingDisabledReason,
+        onUse: async (name, label, enabled, icon) => {
+          if (sessionId) {
+            const result = await client.sessions.setSessionPluginActivation(sessionId, name, enabled);
+            onPluginsChanged?.(result.plugin);
+          } else {
+            const kept = (pendingPlugins ?? []).filter((item) => item.name !== name);
+            onPendingPluginsChange?.(enabled ? [...kept, { name, displayName: label, icon: icon ?? null, iconSource: "account" }] : kept);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx2(PanelDivider, {}),
+    /* @__PURE__ */ jsx2(PanelTitle, { children: "\u63D2\u4EF6" }),
+    !sessionId ? /* @__PURE__ */ jsx2("div", { className: "px-3 pb-0.5 text-[10px] text-[hsl(var(--muted-foreground))]", children: "\u5148\u9009\u4E2D\uFF0C\u53D1\u9001\u8FD9\u6761\u6D88\u606F\u65F6\u4F1A\u4E00\u5E76\u542F\u7528" }) : null,
+    (sessionId ? activation.loading : pendingLoading) && visibleItems.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "px-3 py-1.5 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
+      /* @__PURE__ */ jsx2(LoaderCircle, { size: 12, className: "mr-1 inline animate-spin" }),
+      "\u6B63\u5728\u83B7\u53D6\u63D2\u4EF6\u2026"
+    ] }) : null,
+    failed ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => sessionId ? reload() : void loadPendingCatalog(),
+        className: "px-3 py-1.5 text-left text-[11px] text-[hsl(var(--muted-foreground))] underline",
+        children: "\u63D2\u4EF6\u5217\u8868\u6682\u4E0D\u53EF\u7528\uFF0C\u70B9\u51FB\u91CD\u8BD5"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      PluginConnectorList,
+      {
+        client,
+        sessionId,
+        items: visibleItems.filter((item) => !isLocalConnectorName2(item.name)),
+        inFlight: activation.inFlight,
+        busy: sessionId ? activation.busy : pendingLoading,
+        mutationError: sessionId ? activation.mutationError : false,
+        onToggle: toggle,
+        onRetry: activation.retry,
+        onEditConfig: activation.editConfig,
+        configuring: sessionId ? activation.configuring : null,
+        onConfigSaved: activation.onConfigSaved,
+        onConfigClose: activation.onConfigClose,
+        disabledReason: sessionId ? null : pendingDisabledReason,
+        unavailableText: failed ? null : query.trim() ? "\u6CA1\u6709\u5339\u914D\u7684\u63D2\u4EF6" : null,
+        emptyText: sessionId ? "\u5C1A\u672A\u5B89\u88C5\u63D2\u4EF6" : "\u5C1A\u672A\u5B89\u88C5\u63D2\u4EF6\uFF0C\u53BB\u5E94\u7528\u5E02\u573A\u6DFB\u52A0\u4E00\u4E2A",
+        draft: !sessionId
+      }
+    ),
+    renderExternalAccounts ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(PanelDivider, {}),
+      /* @__PURE__ */ jsx2(PanelTitle, { children: "\u5916\u90E8\u8D26\u53F7" }),
+      renderExternalAccounts(query)
+    ] }) : null,
+    renderFooterActions ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(PanelDivider, {}),
+      renderFooterActions()
+    ] }) : null
+  ] });
+}
+
+// src/components/PluginTriggerStack.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var AVATAR_SIZE = 20;
+function hueOf(name) {
+  let hash = 0;
+  for (const char of name) hash = (hash * 31 + char.codePointAt(0)) % 1000003;
+  return hash % 360;
+}
+var AVATAR_PALETTE = [
+  "bg-violet-100 text-violet-800 dark:bg-violet-500/25 dark:text-violet-200",
+  "bg-sky-100 text-sky-800 dark:bg-sky-500/25 dark:text-sky-200",
+  "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/25 dark:text-emerald-200",
+  "bg-amber-100 text-amber-800 dark:bg-amber-500/25 dark:text-amber-200",
+  "bg-rose-100 text-rose-800 dark:bg-rose-500/25 dark:text-rose-200",
+  "bg-indigo-100 text-indigo-800 dark:bg-indigo-500/25 dark:text-indigo-200",
+  "bg-teal-100 text-teal-800 dark:bg-teal-500/25 dark:text-teal-200",
+  "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-500/25 dark:text-fuchsia-200"
+];
+function PluginTriggerStack({ client, sessionId, summary, className }) {
+  if (summary.total === 0) return null;
+  const ring = "ring-2 ring-[hsl(var(--background))]";
+  return /* @__PURE__ */ jsxs3("span", { className: `flex items-center -space-x-1 ${className ?? ""}`, children: [
+    summary.visible.map((item) => {
+      const label = item.displayName?.trim() || item.name;
+      const tone = AVATAR_PALETTE[hueOf(item.name) % AVATAR_PALETTE.length];
+      return item.icon ? /* @__PURE__ */ jsx3(
+        SessionPluginIcon,
+        {
+          client,
+          sessionId: item.iconSource === "account" ? null : sessionId,
+          plugin: item,
+          size: AVATAR_SIZE,
+          shape: "circle",
+          className: ring
+        },
+        item.name
+      ) : /* @__PURE__ */ jsx3(
+        "span",
+        {
+          title: label,
+          className: `flex shrink-0 items-center justify-center rounded-full font-semibold text-[11px] ${tone} ${ring}`,
+          style: { width: AVATAR_SIZE, height: AVATAR_SIZE },
+          children: Array.from(label.trim())[0]?.toUpperCase() ?? "?"
+        },
+        item.name
+      );
+    }),
+    summary.overflow > 0 ? /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        className: `flex shrink-0 items-center justify-center rounded-full bg-[hsl(var(--muted))] font-medium text-[hsl(var(--muted-foreground))] text-[10px] ${ring}`,
+        style: { width: AVATAR_SIZE, height: AVATAR_SIZE },
+        children: [
+          "+",
+          summary.overflow
+        ]
+      }
+    ) : null
+  ] });
+}
+
+export {
+  selectionFromItem,
+  TRIGGER_ICON_LIMIT,
+  triggerSummary,
+  AccountConnectors,
+  ConnectorPanel,
+  PluginTriggerStack
+};
+//# sourceMappingURL=chunk-FBGCDXRK.js.map