@blade-hq/agent-kit 1.0.34 → 1.1.0

package/README.md

@@ -67,7 +67,88 @@ function BashTool({ toolCall }: ToolRendererProps) {
 
 ## 认证
 
-SDK 支持 cookie 会话和 Bearer Token 两种模式。
+SDK 支持网页授权、cookie 会话和显式 Bearer Token 三种模式。
+
+### 浏览器零配置接入
+
+浏览器中可以不填写后端地址和 PAT。SDK 默认使用当前页面的协议与 hostname，并连接 `8020` 端口。例如页面地址是 `https://demo.example.com:5173`，默认后端地址为 `https://demo.example.com:8020`。
+
+React 应用可以直接初始化客户端并渲染完整连接面板：
+
+```tsx
+import {
+  BladeClientProvider,
+  BladeConnectionPanel,
+  bootstrapBladeClient,
+} from "@blade-hq/agent-kit/react"
+
+const client = bootstrapBladeClient()
+
+root.render(
+  <BladeClientProvider client={client}>
+    <BladeConnectionPanel />
+    <App />
+  </BladeClientProvider>,
+)
+```
+
+如果业务页面只需要紧凑入口，可以使用：
+
+```tsx
+import { BladeConnectionButton } from "@blade-hq/agent-kit/connection"
+
+<BladeConnectionButton />
+```
+
+用户点击后会打开 Blade Agent 登录和授权窗口。授权完成后，一次性授权码会被兑换成 PAT；PAT 不会出现在 URL 或跨窗口消息中。
+
+非 React 应用可以使用同一套底层 API 自建界面：
+
+```ts
+import { BladeClient } from "@blade-hq/agent-kit/client"
+
+const client = new BladeClient()
+await client.auth.restore()
+
+loginButton.addEventListener("click", async () => {
+  const user = await client.auth.connectWithPopup()
+  console.log(`已连接：${user.display_name ?? user.username}`)
+})
+```
+
+`connectWithPopup()` 必须直接在点击等用户手势中调用，否则浏览器可能拦截授权窗口。`client.auth.getConnectionSnapshot()` 和 `subscribe()` 可用于 Vue、Svelte 等框架的状态绑定。
+
+### 手动配置后端地址
+
+完整地址配置优先于自动推导：
+
+```ts
+const client = new BladeClient({ baseUrl: "https://blade.example.com" })
+```
+
+如果只需覆盖默认端口，可以使用：
+
+```ts
+const client = new BladeClient({ port: 9000 })
+```
+
+`baseUrl` 和 `port` 不能同时传入。切换运行中的客户端可调用 `client.setBaseUrl(nextUrl)`；SDK 会断开旧 Socket，并按新后端隔离恢复登录状态。
+
+Node.js、SSR 和其他没有 `window.location` 的环境无法自动推导地址，必须显式传入 `baseUrl`。popup 登录也只在浏览器中可用，服务端程序应使用显式 PAT。
+
+### 登录状态存储
+
+网页授权默认把认证信息保存到业务页面的 `localStorage`，并按后端 Base URL 隔离。断开连接只会清理当前页面针对当前后端保存的认证信息，不会撤销账户级 PAT。
+
+如果宿主页面安全要求更高，可以仅保存在内存中：
+
+```ts
+const client = new BladeClient({ authStorage: false })
+```
+
+也可以传入实现 `get`、`set`、`remove` 的自定义 `BladeAuthStorage`。宿主页面若发生 XSS，页面脚本可能读取 localStorage 中的 PAT；接入方应根据自身安全边界选择存储方式。
+
+### Cookie 会话
 
 首方 Web 应用通常使用 cookie 会话：
 
@@ -77,7 +158,9 @@ const client = new BladeClient({ baseUrl: "https://blade.example.com" })
 
 这种模式下，REST 请求始终使用 `credentials: "include"`，不会发送 `Authorization`；Socket.IO 连接不发送 token，由浏览器自动携带 cookie。
 
-第三方接入使用 Bearer Token。Token 必须在构造 `BladeClient` 时注入，不能在单次方法调用时临时传入：
+### 显式 PAT
+
+自动授权不适用时，可以在构造 `BladeClient` 时注入 PAT。Token 不能在单次方法调用时临时传入：
 
 ```ts
 const client = new BladeClient({
@@ -90,6 +173,16 @@ const client = new BladeClient({
 
 如果 `token` 是空字符串，SDK 按 cookie 会话模式处理，不会发送空的 `Authorization` 或 Socket.IO token。`buildAuthedUrl()` 只会给同一后端域名追加 `?token=...`，用于文件预览等无法自定义请求头的场景；外部绝对 URL 不会被追加 Blade token。
 
+显式传入的 Token 始终由调用方管理。SDK 不会持久化、覆盖或删除它，也不会对它执行 popup 授权流程。
+
+### 常见连接问题
+
+- **服务未启动或地址错误**：确认 Blade Agent 已监听目标 hostname 和端口，再在连接面板中修改地址并重新检测。
+- **HTTPS 页面连接 HTTP 后端**：浏览器会阻止混合内容。请为 Blade Agent 提供 HTTPS，或通过同一 HTTPS 入口反向代理。
+- **授权窗口没有打开**：允许当前业务页面弹出窗口，然后重新点击“连接 Blade Agent”。
+- **登录已失效**：SDK 会清理失效的受管 Token，重新点击连接即可。
+- **页面刷新后需要再次连接**：浏览器可能禁用了 localStorage，或接入方配置了 `authStorage: false`。
+
 ## 类型生成
 
 SDK 的类型来源以后端为准，生成产物提交到仓库，确保本地安装后可以直接 typecheck。

package/dist/chunk-6KO3AOJ7.js

@@ -0,0 +1,251 @@
+import {
+  getBootstrappedClient
+} from "./chunk-YJSN44Q4.js";
+import {
+  cn
+} from "./chunk-7LEKQI47.js";
+
+// src/react/hooks/use-blade-connection.ts
+import { useCallback, useEffect, useSyncExternalStore } from "react";
+
+// src/react/provider.tsx
+import { useContext } from "react";
+
+// src/react/context.ts
+import { createContext } from "react";
+var BladeContext = createContext(null);
+
+// src/react/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function BladeClientProvider({ client, children }) {
+  const instance = client ?? getBootstrappedClient();
+  return /* @__PURE__ */ jsx(BladeContext.Provider, { value: instance, children });
+}
+function useBladeClient() {
+  return useContext(BladeContext) ?? getBootstrappedClient();
+}
+
+// src/react/hooks/use-blade-connection.ts
+function useBladeConnection() {
+  const client = useBladeClient();
+  const snapshot = useSyncExternalStore(
+    useCallback((listener) => client.auth.subscribe(listener), [client]),
+    useCallback(() => client.auth.getConnectionSnapshot(), [client]),
+    useCallback(() => client.auth.getConnectionSnapshot(), [client])
+  );
+  useEffect(() => {
+    void client.auth.restore();
+  }, [client]);
+  return {
+    ...snapshot,
+    connect: useCallback(
+      (options) => client.auth.connectWithPopup(options),
+      [client]
+    ),
+    disconnect: useCallback(() => client.auth.disconnect(), [client]),
+    retry: useCallback(() => client.auth.retry(), [client]),
+    setBaseUrl: useCallback((baseUrl) => client.setBaseUrl(baseUrl), [client])
+  };
+}
+
+// src/react/components/connection/BladeConnectionButton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function BladeConnectionButton({
+  className,
+  onConnected,
+  onError
+}) {
+  const connection = useBladeConnection();
+  const busy = connection.status === "checking_service" || connection.status === "waiting_for_authorization" || connection.status === "connecting";
+  const busyLabel = connection.status === "checking_service" ? "\u6B63\u5728\u68C0\u67E5\u670D\u52A1\u2026" : connection.status === "waiting_for_authorization" ? "\u8BF7\u5728\u65B0\u7A97\u53E3\u5B8C\u6210\u6388\u6743\u2026" : "\u6B63\u5728\u5EFA\u7ACB\u8FDE\u63A5\u2026";
+  const label = connection.status === "connected" ? `\u5DF2\u8FDE\u63A5${connection.user?.display_name || connection.user?.username ? ` \xB7 ${connection.user.display_name || connection.user.username}` : ""}` : connection.status === "expired" && !connection.managedBySdk ? "\u63A5\u5165 Token \u5DF2\u5931\u6548" : busy ? busyLabel : connection.status === "expired" ? "\u91CD\u65B0\u8FDE\u63A5 Blade Agent" : "\u8FDE\u63A5 Blade Agent";
+  const handleClick = async () => {
+    try {
+      const user = await connection.connect();
+      onConnected?.(user);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-semibold transition-colors",
+        connection.status === "connected" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:cursor-wait disabled:opacity-70",
+        className
+      ),
+      disabled: busy || connection.status === "connected" || connection.status === "expired" && !connection.managedBySdk,
+      onClick: () => void handleClick(),
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-2 rounded-full",
+              connection.status === "connected" ? "bg-emerald-500" : "bg-current opacity-70",
+              busy && "animate-pulse"
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/react/components/connection/BladeConnectionPanel.tsx
+import { useEffect as useEffect2, useState } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var STATUS_COPY = {
+  checking_service: ["\u6B63\u5728\u68C0\u67E5\u670D\u52A1", "\u6B63\u5728\u786E\u8BA4 Blade Agent \u662F\u5426\u53EF\u7528\u3002"],
+  service_unavailable: ["\u65E0\u6CD5\u8FDE\u63A5\u5230 Blade Agent", "\u8BF7\u68C0\u67E5\u670D\u52A1\u5730\u5740\u6216\u7F51\u7EDC\u72B6\u6001\u540E\u91CD\u8BD5\u3002"],
+  signed_out: ["\u5C1A\u672A\u8FDE\u63A5", "\u8FDE\u63A5\u540E\u5373\u53EF\u5728\u5F53\u524D\u9875\u9762\u4F7F\u7528 Blade Agent\u3002"],
+  waiting_for_authorization: ["\u7B49\u5F85\u6388\u6743", "\u8BF7\u5728\u65B0\u7A97\u53E3\u4E2D\u786E\u8BA4\u8D26\u53F7\u5E76\u5141\u8BB8\u8FDE\u63A5\u3002"],
+  connecting: ["\u6B63\u5728\u5EFA\u7ACB\u8FDE\u63A5", "\u6388\u6743\u5DF2\u5B8C\u6210\uFF0C\u6B63\u5728\u9A8C\u8BC1\u8D26\u53F7\u3002"],
+  connected: ["\u5DF2\u8FDE\u63A5", "\u5F53\u524D\u9875\u9762\u5DF2\u7ECF\u53EF\u4EE5\u4F7F\u7528 Blade Agent\u3002"],
+  expired: ["\u767B\u5F55\u5DF2\u5931\u6548", "\u8BF7\u91CD\u65B0\u8FDE\u63A5 Blade Agent\u3002"],
+  configuration_error: ["\u670D\u52A1\u5730\u5740\u9700\u8981\u8C03\u6574", "\u8BF7\u4FEE\u6539\u5730\u5740\u540E\u91CD\u65B0\u68C0\u6D4B\u3002"]
+};
+function BladeConnectionPanel({
+  className,
+  onConnected,
+  onError
+}) {
+  const connection = useBladeConnection();
+  const [draftUrl, setDraftUrl] = useState(connection.baseUrl);
+  const [inputError, setInputError] = useState(null);
+  const [title, description] = STATUS_COPY[connection.status];
+  const busy = connection.status === "checking_service" || connection.status === "waiting_for_authorization" || connection.status === "connecting";
+  useEffect2(() => setDraftUrl(connection.baseUrl), [connection.baseUrl]);
+  const connect = async () => {
+    try {
+      const user = await connection.connect();
+      onConnected?.(user);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+  const applyAddress = () => {
+    try {
+      connection.setBaseUrl(draftUrl);
+      setInputError(null);
+    } catch (error) {
+      setInputError(error instanceof Error ? error.message : "\u8BF7\u8F93\u5165\u6709\u6548\u7684 HTTP(S) \u5730\u5740\u3002");
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: cn(
+        "w-full max-w-xl rounded-2xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "mt-1 size-3 shrink-0 rounded-full",
+                connection.status === "connected" ? "bg-emerald-500" : connection.status === "service_unavailable" || connection.status === "configuration_error" || connection.status === "expired" ? "bg-amber-500" : "bg-blue-500",
+                busy && "animate-pulse"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx3("h2", { className: "m-0 text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm leading-6 text-slate-600", children: description }),
+            connection.user && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm font-medium text-slate-800", children: connection.user.display_name || connection.user.username })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-5", children: [
+          /* @__PURE__ */ jsx3("label", { className: "mb-1.5 block text-sm font-medium", htmlFor: "blade-agent-base-url", children: "Blade Agent \u670D\u52A1\u5730\u5740" }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                id: "blade-agent-base-url",
+                className: "min-h-10 min-w-0 flex-1 rounded-lg border border-slate-300 bg-white px-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100",
+                inputMode: "url",
+                spellCheck: false,
+                value: draftUrl,
+                onChange: (event) => setDraftUrl(event.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "min-h-10 rounded-lg border border-slate-300 px-3 text-sm font-medium hover:bg-slate-50",
+                onClick: applyAddress,
+                children: "\u68C0\u6D4B"
+              }
+            )
+          ] }),
+          inputError && /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-sm text-red-600", children: inputError })
+        ] }),
+        connection.error && /* @__PURE__ */ jsx3("div", { className: "mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900", children: connection.error.message }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-5 flex flex-wrap gap-2", children: [
+          connection.status === "connected" && connection.managedBySdk ? /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "min-h-10 rounded-lg border border-slate-300 px-4 text-sm font-semibold hover:bg-slate-50",
+              onClick: () => void connection.disconnect(),
+              children: "\u65AD\u5F00\u8FDE\u63A5"
+            }
+          ) : connection.status !== "connected" && connection.managedBySdk ? /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "min-h-10 rounded-lg bg-blue-600 px-4 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-wait disabled:opacity-70",
+              disabled: busy,
+              onClick: () => void connect(),
+              children: connection.status === "waiting_for_authorization" ? "\u7B49\u5F85\u6388\u6743\u2026" : connection.status === "connecting" ? "\u6B63\u5728\u8FDE\u63A5\u2026" : "\u8FDE\u63A5 Blade Agent"
+            }
+          ) : null,
+          (connection.status === "service_unavailable" || connection.status === "expired") && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "min-h-10 rounded-lg border border-slate-300 px-4 text-sm font-semibold hover:bg-slate-50",
+              onClick: () => void connection.retry(),
+              children: "\u91CD\u65B0\u68C0\u6D4B"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("details", { className: "mt-5 border-t border-slate-200 pt-4 text-sm text-slate-600", children: [
+          /* @__PURE__ */ jsx3("summary", { className: "cursor-pointer font-medium text-slate-700", children: "\u6280\u672F\u8BE6\u60C5" }),
+          /* @__PURE__ */ jsxs2("dl", { className: "mt-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2", children: [
+            /* @__PURE__ */ jsx3("dt", { children: "\u670D\u52A1\u5730\u5740" }),
+            /* @__PURE__ */ jsx3("dd", { className: "min-w-0 break-all text-slate-900", children: connection.baseUrl }),
+            /* @__PURE__ */ jsx3("dt", { children: "\u72B6\u6001" }),
+            /* @__PURE__ */ jsx3("dd", { className: "text-slate-900", children: connection.status }),
+            /* @__PURE__ */ jsx3("dt", { children: "\u767B\u5F55\u4FDD\u5B58" }),
+            /* @__PURE__ */ jsx3("dd", { className: "text-slate-900", children: connection.persistent ? "\u5237\u65B0\u540E\u4FDD\u7559" : "\u4EC5\u5F53\u524D\u9875\u9762" }),
+            /* @__PURE__ */ jsx3("dt", { children: "\u51ED\u636E\u7BA1\u7406" }),
+            /* @__PURE__ */ jsx3("dd", { className: "text-slate-900", children: connection.managedBySdk ? "\u7531 SDK \u7BA1\u7406" : "\u7531\u63A5\u5165\u65B9\u7BA1\u7406" }),
+            connection.error && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx3("dt", { children: "\u9519\u8BEF\u7C7B\u578B" }),
+              /* @__PURE__ */ jsx3("dd", { className: "text-slate-900", children: connection.error.code })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  BladeContext,
+  BladeClientProvider,
+  useBladeClient,
+  useBladeConnection,
+  BladeConnectionButton,
+  BladeConnectionPanel
+};
+//# sourceMappingURL=chunk-6KO3AOJ7.js.map

package/dist/chunk-6KO3AOJ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/hooks/use-blade-connection.ts","../src/react/provider.tsx","../src/react/context.ts","../src/react/components/connection/BladeConnectionButton.tsx","../src/react/components/connection/BladeConnectionPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useSyncExternalStore } from \"react\"\nimport type { BladePopupOptions } from \"../../client\"\nimport { useBladeClient } from \"../provider\"\n\nexport function useBladeConnection() {\n  const client = useBladeClient()\n  const snapshot = useSyncExternalStore(\n    useCallback((listener) => client.auth.subscribe(listener), [client]),\n    useCallback(() => client.auth.getConnectionSnapshot(), [client]),\n    useCallback(() => client.auth.getConnectionSnapshot(), [client]),\n  )\n\n  useEffect(() => {\n    void client.auth.restore()\n  }, [client])\n\n  return {\n    ...snapshot,\n    connect: useCallback(\n      (options?: BladePopupOptions) => client.auth.connectWithPopup(options),\n      [client],\n    ),\n    disconnect: useCallback(() => client.auth.disconnect(), [client]),\n    retry: useCallback(() => client.auth.retry(), [client]),\n    setBaseUrl: useCallback((baseUrl: string) => client.setBaseUrl(baseUrl), [client]),\n  }\n}\n\nexport type UseBladeConnectionResult = ReturnType<typeof useBladeConnection>\n","import type { ReactNode } from \"react\"\nimport { useContext } from \"react\"\nimport type { BladeClient } from \"../client\"\nimport { getBootstrappedClient } from \"./bootstrap\"\nimport { BladeContext } from \"./context\"\n\nexport interface BladeClientProviderProps {\n  client?: BladeClient\n  children: ReactNode\n}\n\nexport function BladeClientProvider({ client, children }: BladeClientProviderProps) {\n  const instance = client ?? getBootstrappedClient()\n  return <BladeContext.Provider value={instance}>{children}</BladeContext.Provider>\n}\n\nexport function useBladeClient(): BladeClient {\n  return useContext(BladeContext) ?? getBootstrappedClient()\n}\n","import { createContext } from \"react\"\nimport type { BladeClient } from \"../client\"\n\nexport const BladeContext = createContext<BladeClient | null>(null)\n","import type { BladeAuthenticatedUser, BladeConnectionError } from \"../../../client\"\nimport { cn } from \"../../lib/utils\"\nimport { useBladeConnection } from \"../../hooks/use-blade-connection\"\n\nexport interface BladeConnectionButtonProps {\n  className?: string\n  onConnected?: (user: BladeAuthenticatedUser) => void\n  onError?: (error: BladeConnectionError) => void\n}\n\nexport function BladeConnectionButton({\n  className,\n  onConnected,\n  onError,\n}: BladeConnectionButtonProps) {\n  const connection = useBladeConnection()\n  const busy =\n    connection.status === \"checking_service\" ||\n    connection.status === \"waiting_for_authorization\" ||\n    connection.status === \"connecting\"\n  const busyLabel =\n    connection.status === \"checking_service\"\n      ? \"正在检查服务…\"\n      : connection.status === \"waiting_for_authorization\"\n        ? \"请在新窗口完成授权…\"\n        : \"正在建立连接…\"\n  const label =\n    connection.status === \"connected\"\n      ? `已连接${connection.user?.display_name || connection.user?.username ? ` · ${connection.user.display_name || connection.user.username}` : \"\"}`\n      : connection.status === \"expired\" && !connection.managedBySdk\n        ? \"接入 Token 已失效\"\n      : busy\n        ? busyLabel\n        : connection.status === \"expired\"\n          ? \"重新连接 Blade Agent\"\n          : \"连接 Blade Agent\"\n\n  const handleClick = async () => {\n    try {\n      const user = await connection.connect()\n      onConnected?.(user)\n    } catch (error) {\n      onError?.(error as BladeConnectionError)\n    }\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-semibold transition-colors\",\n        connection.status === \"connected\"\n          ? \"border-emerald-200 bg-emerald-50 text-emerald-800\"\n          : \"border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:cursor-wait disabled:opacity-70\",\n        className,\n      )}\n      disabled={\n        busy ||\n        connection.status === \"connected\" ||\n        (connection.status === \"expired\" && !connection.managedBySdk)\n      }\n      onClick={() => void handleClick()}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"size-2 rounded-full\",\n          connection.status === \"connected\" ? \"bg-emerald-500\" : \"bg-current opacity-70\",\n          busy && \"animate-pulse\",\n        )}\n      />\n      {label}\n    </button>\n  )\n}\n","import { useEffect, useState } from \"react\"\nimport type { BladeAuthenticatedUser, BladeConnectionError } from \"../../../client\"\nimport { useBladeConnection } from \"../../hooks/use-blade-connection\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface BladeConnectionPanelProps {\n  className?: string\n  onConnected?: (user: BladeAuthenticatedUser) => void\n  onError?: (error: BladeConnectionError) => void\n}\n\nconst STATUS_COPY = {\n  checking_service: [\"正在检查服务\", \"正在确认 Blade Agent 是否可用。\"],\n  service_unavailable: [\"无法连接到 Blade Agent\", \"请检查服务地址或网络状态后重试。\"],\n  signed_out: [\"尚未连接\", \"连接后即可在当前页面使用 Blade Agent。\"],\n  waiting_for_authorization: [\"等待授权\", \"请在新窗口中确认账号并允许连接。\"],\n  connecting: [\"正在建立连接\", \"授权已完成，正在验证账号。\"],\n  connected: [\"已连接\", \"当前页面已经可以使用 Blade Agent。\"],\n  expired: [\"登录已失效\", \"请重新连接 Blade Agent。\"],\n  configuration_error: [\"服务地址需要调整\", \"请修改地址后重新检测。\"],\n} as const\n\nexport function BladeConnectionPanel({\n  className,\n  onConnected,\n  onError,\n}: BladeConnectionPanelProps) {\n  const connection = useBladeConnection()\n  const [draftUrl, setDraftUrl] = useState(connection.baseUrl)\n  const [inputError, setInputError] = useState<string | null>(null)\n  const [title, description] = STATUS_COPY[connection.status]\n  const busy =\n    connection.status === \"checking_service\" ||\n    connection.status === \"waiting_for_authorization\" ||\n    connection.status === \"connecting\"\n\n  useEffect(() => setDraftUrl(connection.baseUrl), [connection.baseUrl])\n\n  const connect = async () => {\n    try {\n      const user = await connection.connect()\n      onConnected?.(user)\n    } catch (error) {\n      onError?.(error as BladeConnectionError)\n    }\n  }\n\n  const applyAddress = () => {\n    try {\n      connection.setBaseUrl(draftUrl)\n      setInputError(null)\n    } catch (error) {\n      setInputError(error instanceof Error ? error.message : \"请输入有效的 HTTP(S) 地址。\")\n    }\n  }\n\n  return (\n    <section\n      className={cn(\n        \"w-full max-w-xl rounded-2xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"mt-1 size-3 shrink-0 rounded-full\",\n            connection.status === \"connected\"\n              ? \"bg-emerald-500\"\n              : connection.status === \"service_unavailable\" ||\n                  connection.status === \"configuration_error\" ||\n                  connection.status === \"expired\"\n                ? \"bg-amber-500\"\n                : \"bg-blue-500\",\n            busy && \"animate-pulse\",\n          )}\n        />\n        <div className=\"min-w-0 flex-1\">\n          <h2 className=\"m-0 text-base font-semibold\">{title}</h2>\n          <p className=\"mt-1 text-sm leading-6 text-slate-600\">{description}</p>\n          {connection.user && (\n            <p className=\"mt-2 text-sm font-medium text-slate-800\">\n              {connection.user.display_name || connection.user.username}\n            </p>\n          )}\n        </div>\n      </div>\n\n      <div className=\"mt-5\">\n        <label className=\"mb-1.5 block text-sm font-medium\" htmlFor=\"blade-agent-base-url\">\n          Blade Agent 服务地址\n        </label>\n        <div className=\"flex gap-2\">\n          <input\n            id=\"blade-agent-base-url\"\n            className=\"min-h-10 min-w-0 flex-1 rounded-lg border border-slate-300 bg-white px-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"\n            inputMode=\"url\"\n            spellCheck={false}\n            value={draftUrl}\n            onChange={(event) => setDraftUrl(event.target.value)}\n          />\n          <button\n            type=\"button\"\n            className=\"min-h-10 rounded-lg border border-slate-300 px-3 text-sm font-medium hover:bg-slate-50\"\n            onClick={applyAddress}\n          >\n            检测\n          </button>\n        </div>\n        {inputError && <p className=\"mt-1.5 text-sm text-red-600\">{inputError}</p>}\n      </div>\n\n      {connection.error && (\n        <div className=\"mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900\">\n          {connection.error.message}\n        </div>\n      )}\n\n      <div className=\"mt-5 flex flex-wrap gap-2\">\n        {connection.status === \"connected\" && connection.managedBySdk ? (\n          <button\n            type=\"button\"\n            className=\"min-h-10 rounded-lg border border-slate-300 px-4 text-sm font-semibold hover:bg-slate-50\"\n            onClick={() => void connection.disconnect()}\n          >\n            断开连接\n          </button>\n        ) : connection.status !== \"connected\" && connection.managedBySdk ? (\n          <button\n            type=\"button\"\n            className=\"min-h-10 rounded-lg bg-blue-600 px-4 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-wait disabled:opacity-70\"\n            disabled={busy}\n            onClick={() => void connect()}\n          >\n            {connection.status === \"waiting_for_authorization\"\n              ? \"等待授权…\"\n              : connection.status === \"connecting\"\n                ? \"正在连接…\"\n                : \"连接 Blade Agent\"}\n          </button>\n        ) : null}\n        {(connection.status === \"service_unavailable\" || connection.status === \"expired\") && (\n          <button\n            type=\"button\"\n            className=\"min-h-10 rounded-lg border border-slate-300 px-4 text-sm font-semibold hover:bg-slate-50\"\n            onClick={() => void connection.retry()}\n          >\n            重新检测\n          </button>\n        )}\n      </div>\n\n      <details className=\"mt-5 border-t border-slate-200 pt-4 text-sm text-slate-600\">\n        <summary className=\"cursor-pointer font-medium text-slate-700\">技术详情</summary>\n        <dl className=\"mt-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2\">\n          <dt>服务地址</dt>\n          <dd className=\"min-w-0 break-all text-slate-900\">{connection.baseUrl}</dd>\n          <dt>状态</dt>\n          <dd className=\"text-slate-900\">{connection.status}</dd>\n          <dt>登录保存</dt>\n          <dd className=\"text-slate-900\">{connection.persistent ? \"刷新后保留\" : \"仅当前页面\"}</dd>\n          <dt>凭据管理</dt>\n          <dd className=\"text-slate-900\">\n            {connection.managedBySdk ? \"由 SDK 管理\" : \"由接入方管理\"}\n          </dd>\n          {connection.error && (\n            <>\n              <dt>错误类型</dt>\n              <dd className=\"text-slate-900\">{connection.error.code}</dd>\n            </>\n          )}\n        </dl>\n      </details>\n    </section>\n  )\n}\n"],"mappings":"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","names":["jsx","useEffect","jsx","jsxs","useEffect"]}