@dxos/shell 0.6.1-main.e05b43b → 0.6.1-main.ff751ec

package/dist/lib/browser/react.mjs

@@ -3,19 +3,23 @@ import {
 } from "./chunk-ZSTKOCBT.mjs";
 
 // packages/sdk/shell/src/components/AgentConfig.tsx
-import { Database, Plus, Power } from "@phosphor-icons/react";
+import { ArrowsClockwise, Database, Plus, Power } from "@phosphor-icons/react";
 import React from "react";
 import { Avatar, Button, Link, Tooltip, Trans, useTranslation } from "@dxos/react-ui";
-import { descriptionText, getSize, mx } from "@dxos/react-ui-theme";
-var AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate }) => {
+import { descriptionText, getSize, mx, valenceColorText } from "@dxos/react-ui-theme";
+var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCreate, onAgentRefresh }) => {
   const { t } = useTranslation("os");
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
     className: mx(descriptionText, "text-center mbs-4")
-  }, t("agent heading")), agentActive ? /* @__PURE__ */ React.createElement("div", {
+  }, t("agent heading")), validationMessage && /* @__PURE__ */ React.createElement("p", {
+    role: "alert",
+    className: mx(valenceColorText("error"), "mlb-2")
+  }, validationMessage), agentStatus === "created" || agentStatus === "creating" || agentStatus === "getting" || agentStatus === "destroying" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     role: "group",
-    className: "flex gap-2 items-center"
+    className: "mlb-2 flex gap-2 items-center",
+    "aria-describedby": "devices-panel.create-agent.description"
   }, /* @__PURE__ */ React.createElement(Avatar.Root, {
-    status: agentStatus ? "active" : "inactive",
+    status: agentStatus === "created" ? "warning" : "inactive",
     variant: "square"
   }, /* @__PURE__ */ React.createElement(Avatar.Frame, {
     classNames: "place-self-center"
@@ -24,10 +28,13 @@ var AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate })
     width: 24,
     height: 24,
     x: 8,
-    y: 8
+    y: 8,
+    ...agentStatus !== "created" && {
+      className: "opacity-50"
+    }
   })), /* @__PURE__ */ React.createElement(Avatar.Label, {
     classNames: "flex-1 text-sm truncate"
-  }, t("agent device label"))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  }, t(agentStatus === "created" ? "agent requested label" : agentStatus === "creating" ? "creating agent label" : agentStatus === "destroying" ? "destroying agent label" : "getting agent label"))), agentStatus === "created" && /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
@@ -41,23 +48,32 @@ var AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate })
   }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t("destroy agent label"))))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+  }, t("destroy agent label"))))), agentStatus === "created" && /* @__PURE__ */ React.createElement("p", {
+    id: "devices-panel.create-agent.description",
+    className: mx(descriptionText, "mlb-2")
+  }, t("agent requested description"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
     classNames: "mlb-2 is-full justify-start gap-2 !pis-0 !pie-3",
-    "data-testid": "devices-panel.create-agent",
-    onClick: onAgentCreate,
+    "data-testid": agentStatus === "creatable" ? "devices-panel.create-agent" : "devices-panel.agent-error",
+    onClick: agentStatus === "creatable" ? onAgentCreate : onAgentRefresh,
     "aria-describedby": "devices-panel.create-agent.description"
   }, /* @__PURE__ */ React.createElement("div", {
     role: "img",
     className: mx(getSize(8), "m-1 rounded-sm surface-input grid place-items-center")
-  }, /* @__PURE__ */ React.createElement(Plus, {
+  }, agentStatus === "creatable" ? /* @__PURE__ */ React.createElement(Plus, {
+    weight: "light",
+    className: getSize(6)
+  }) : /* @__PURE__ */ React.createElement(ArrowsClockwise, {
     weight: "light",
     className: getSize(6)
   })), /* @__PURE__ */ React.createElement("span", {
     className: "grow font-medium text-start"
-  }, t("create agent label"))), /* @__PURE__ */ React.createElement("p", {
-    id: "devices-panel.create-agent.clickwrap-message",
-    className: mx(descriptionText, "mbe-2")
+  }, t(agentStatus === "creatable" ? "create agent label" : ""))), agentStatus === "creatable" && /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "space-y-2",
+    id: "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: descriptionText
   }, /* @__PURE__ */ React.createElement(Trans, {
     t,
     i18nKey: "create agent clickwrap",
@@ -68,9 +84,8 @@ var AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate })
       })
     }
   })), /* @__PURE__ */ React.createElement("p", {
-    id: "devices-panel.create-agent.description",
     className: descriptionText
-  }, t("create agent description"))));
+  }, t("create agent description")))));
 };
 
 // packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
@@ -556,12 +571,12 @@ import { Button as Button6, List as List2, useTranslation as useTranslation7 } f
 import { descriptionText as descriptionText4, getSize as getSize6, mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/DeviceList/DeviceListItem.tsx
-import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot } from "@phosphor-icons/react";
+import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot, Database as Database2 } from "@phosphor-icons/react";
 import React9, { forwardRef as forwardRef2 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { Device, DeviceType, DeviceKind } from "@dxos/react-client/halo";
 import { ConnectionState } from "@dxos/react-client/mesh";
-import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation6, DropdownMenu as DropdownMenu2, Button as Button5 } from "@dxos/react-ui";
+import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation6, DropdownMenu as DropdownMenu2, Button as Button5, Tooltip as Tooltip5 } from "@dxos/react-ui";
 import { getSize as getSize5 } from "@dxos/react-ui-theme";
 import { keyToFallback as keyToFallback2 } from "@dxos/util";
 var iconProps = {
@@ -571,7 +586,7 @@ var iconProps = {
   x: 8,
   y: 8
 };
-var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, connectionState, ...props }, forwardedRef) => {
+var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, connectionState, onAgentDestroy, ...props }, forwardedRef) => {
   const { t } = useTranslation6("os");
   const fallbackValue = keyToFallback2(device.deviceKey);
   const labelId = useId3("identityListItem__label");
@@ -596,7 +611,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     variant: "square"
   }, /* @__PURE__ */ React9.createElement(Avatar3.Frame, {
     classNames: "place-self-center"
-  }, device.profile?.type ? device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React9.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React9.createElement(Desktop, iconProps) : [
+  }, device.profile?.type ? device.profile.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React9.createElement(Database2, iconProps) : device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React9.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React9.createElement(Desktop, iconProps) : [
     DeviceType.AGENT,
     DeviceType.AGENT_MANAGED
   ].includes(device.profile.type) ? /* @__PURE__ */ React9.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React9.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React9.createElement(Devices, iconProps) : /* @__PURE__ */ React9.createElement(Avatar3.Fallback, {
@@ -605,7 +620,21 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     classNames: "flex-1 text-sm truncate"
   }, displayName), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
     color: "primary"
-  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
+  }, t("current device tag label")), device.profile?.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React9.createElement(Tooltip5.Root, null, /* @__PURE__ */ React9.createElement(Tooltip5.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button5, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": "agent.destroy",
+    onClick: onAgentDestroy
+  }, /* @__PURE__ */ React9.createElement("span", {
+    className: "sr-only"
+  }, t("destroy agent label")), /* @__PURE__ */ React9.createElement(Power2, {
+    className: getSize5(5)
+  }))), /* @__PURE__ */ React9.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip5.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("destroy agent label")))) : device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React9.createElement(Button5, {
     variant: "ghost",
@@ -629,7 +658,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
 });
 
 // packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
-var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting }) => {
+var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, onAgentDestroy }) => {
   const { t } = useTranslation7("os");
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("h2", {
     className: mx7(descriptionText4, "text-center mbs-4")
@@ -640,7 +669,8 @@ var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickRe
       onClickEdit: () => onClickEdit?.(device),
       onClickReset,
       onClickJoinExisting,
-      connectionState
+      connectionState,
+      onAgentDestroy
     });
   })), /* @__PURE__ */ React10.createElement(Button6, {
     variant: "ghost",
@@ -666,7 +696,7 @@ import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns";
 import React12, { useCallback as useCallback2 } from "react";
 import { Invitation, useInvitationStatus } from "@dxos/react-client/invitations";
-import { Button as Button7, ListItem as ListItem3, useTranslation as useTranslation8, Avatar as Avatar4, useThemeContext as useThemeContext4, Tooltip as Tooltip5 } from "@dxos/react-ui";
+import { Button as Button7, ListItem as ListItem3, useTranslation as useTranslation8, Avatar as Avatar4, useThemeContext as useThemeContext4, Tooltip as Tooltip6 } from "@dxos/react-ui";
 import { focusRing, getSize as getSize7, mx as mx9 } from "@dxos/react-ui-theme";
 import { hexToEmoji } from "@dxos/util";
 
@@ -786,11 +816,11 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(Avatar4.Root, {
+  }), /* @__PURE__ */ React12.createElement(Tooltip6.Root, null, /* @__PURE__ */ React12.createElement(Avatar4.Root, {
     ...avatarProps,
     animation: avatarAnimation,
     status: avatarStatus
-  }, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
+  }, /* @__PURE__ */ React12.createElement(Tooltip6.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React12.createElement(Avatar4.Frame, {
     tabIndex: 0,
@@ -800,10 +830,10 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     ]
   }, /* @__PURE__ */ React12.createElement(Avatar4.Fallback, {
     text: hexToEmoji(invitationId)
-  })))), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
+  })))), /* @__PURE__ */ React12.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip6.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React12.createElement(Tooltip5.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React12.createElement(Tooltip6.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React12.createElement(Tooltip6.Root, null, /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip6.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React12.createElement(Button7, {
     variant: "ghost",
@@ -816,7 +846,7 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
   }, /* @__PURE__ */ React12.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React12.createElement(CopyButtonIconOnly, {
     variant: "ghost",
     value: invitationUrl
-  })), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
+  })), /* @__PURE__ */ React12.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip6.Content, {
     side: "left",
     classNames: "z-[70]"
   }, invitationHasLifetime && /* @__PURE__ */ React12.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React12.createElement(AuthCode, {
@@ -1202,7 +1232,7 @@ import { useClient as useClient4 } from "@dxos/react-client";
 import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
 import { useNetworkStatus, ConnectionState as ConnectionState2 } from "@dxos/react-client/mesh";
-import { Avatar as Avatar6, DensityProvider, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip6, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { Avatar as Avatar6, DensityProvider, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip7, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
 import { getSize as getSize13 } from "@dxos/react-ui-theme";
 import { hexToEmoji as hexToEmoji4, hexToHue as hexToHue2, keyToFallback as keyToFallback3 } from "@dxos/util";
 
@@ -1316,15 +1346,14 @@ var useIdentityMachine = (client, options) => {
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
 import React25, { useCallback as useCallback4 } from "react";
 import { log as log2 } from "@dxos/log";
-import { useAgentHostingClient, useClient as useClient2 } from "@dxos/react-client";
-import { useHaloInvitations } from "@dxos/react-client/halo";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { useHaloInvitations, DeviceType as DeviceType2 } from "@dxos/react-client/halo";
 import { Invitation as Invitation2, InvitationEncoder } from "@dxos/react-client/invitations";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx";
 var IdentityActionChooser = (props) => {
   const { send } = props;
   const client = useClient2();
   const invitations = useHaloInvitations();
-  const agentHostingProviderClient = useAgentHostingClient();
   const onInvitationEvent = useCallback4((invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation2.State.CONNECTING) {
@@ -1333,7 +1362,7 @@ var IdentityActionChooser = (props) => {
         authCode: invitation.authCode
       }), void 0, {
         F: __dxlog_file2,
-        L: 25,
+        L: 24,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1352,11 +1381,11 @@ var IdentityActionChooser = (props) => {
   };
   return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
     ...props,
-    onCreateInvitationClick: createInvitation,
-    agentHostingEnabled: !!agentHostingProviderClient
+    onCreateInvitationClick: createInvitation
   });
 };
-var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, connectionState, onAgentDestroy, onAgentCreate, agentStatus, agentActive, agentHostingEnabled }) => {
+var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, connectionState, agentHostingEnabled, ...agentProps }) => {
+  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType2.AGENT_MANAGED);
   return /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "bs-40 grow overflow-y-auto overflow-x-hidden"
@@ -1369,13 +1398,9 @@ var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, conne
     }),
     onClickReset: () => send?.({
       type: "chooseResetStorage"
-    })
-  }), agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, {
-    agentActive,
-    agentStatus,
-    onAgentDestroy,
-    onAgentCreate
-  }));
+    }),
+    onAgentDestroy: agentProps.onAgentDestroy
+  }), !managedDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, agentProps));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
@@ -1388,31 +1413,90 @@ import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
 import { useCallback as useCallback5, useEffect as useEffect2, useState as useState6 } from "react";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
-import { useAgentHostingClient as useAgentHostingClient2, useClient as useClient3 } from "@dxos/react-client";
+import { useAgentHostingClient, useClient as useClient3 } from "@dxos/react-client";
 import { Invitation as Invitation3, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts";
 var useAgentHandlers = ({ invitations, identity }) => {
   const [validationMessage, setValidationMessage] = useState6("");
-  const [agentStatus, setAgentStatus] = useState6("");
-  const [agentActive, setAgentActive] = useState6(false);
-  const agentHostingProviderClient = useAgentHostingClient2();
+  const [agentStatus, setAgentStatus] = useState6("getting");
+  const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient3();
-  useEffect2(() => {
-    const fetchAgentStatus = async () => {
-      if (agentHostingProviderClient) {
-        const agentStatus2 = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? "foo");
-        if (agentStatus2) {
-          setAgentActive(true);
-          setAgentStatus(agentStatus2);
+  const updateAgentStatus = async () => {
+    if (agentHostingProviderClient) {
+      setAgentStatus("getting");
+      try {
+        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? "never");
+        if (agentId) {
+          setAgentStatus("created");
         } else {
-          setAgentActive(false);
-          setValidationMessage("No agent deployed via provider.");
+          setAgentStatus("creatable");
         }
-      } else {
-        setValidationMessage("No agent provider configured.");
+      } catch (err) {
+        setAgentStatus("error");
+        setValidationMessage(`Couldn\u2019t check agent status: ${err.message}`);
       }
-    };
-    void fetchAgentStatus();
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const createAgent = async (invitationCode) => {
+    invariant(identity, "Identity not found", {
+      F: __dxlog_file3,
+      L: 50,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("creating");
+      setValidationMessage("");
+      try {
+        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+        if (agentId) {
+          setAgentStatus("created");
+        } else {
+          setAgentStatus("creatable");
+          setValidationMessage("Error creating agent.");
+        }
+      } catch (err) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const destroyAgent = async () => {
+    invariant(identity, "Identity not found", {
+      F: __dxlog_file3,
+      L: 73,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("destroying");
+      setValidationMessage("");
+      try {
+        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+        setAgentStatus("creatable");
+      } catch (err) {
+        setValidationMessage(`Error destroying agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  useEffect2(() => {
+    void updateAgentStatus();
   }, []);
   const handleAgentCreate = useCallback5(async (invitation) => {
     const invitationCode = InvitationEncoder2.encode(invitation);
@@ -1422,29 +1506,11 @@ var useAgentHandlers = ({ invitations, identity }) => {
         authCode: invitation.authCode
       }), void 0, {
         F: __dxlog_file3,
-        L: 49,
+        L: 97,
         S: void 0,
         C: (f, a) => f(...a)
       });
-      invariant(identity, "Identity not found", {
-        F: __dxlog_file3,
-        L: 50,
-        S: void 0,
-        A: [
-          "identity",
-          "'Identity not found'"
-        ]
-      });
-      if (agentHostingProviderClient) {
-        try {
-          const res = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
-          setAgentStatus(res);
-          setAgentActive(true);
-          setValidationMessage("");
-        } catch (err) {
-          setValidationMessage(`error creating agent: ${err.message}`);
-        }
-      }
+      return createAgent(invitationCode);
     }
   }, []);
   const onAgentCreate = async () => {
@@ -1456,32 +1522,17 @@ var useAgentHandlers = ({ invitations, identity }) => {
     });
     invitation.subscribe(handleAgentCreate);
   };
-  const onAgentDestroy = async () => {
-    const identity2 = client.halo.identity.get();
-    invariant(identity2, "Identity not found", {
-      F: __dxlog_file3,
-      L: 80,
-      S: void 0,
-      A: [
-        "identity",
-        "'Identity not found'"
-      ]
-    });
-    try {
-      await agentHostingProviderClient?.destroyAgent(identity2.identityKey.truncate());
-      setValidationMessage("No agent deployed via provider.");
-      setAgentStatus("");
-      setAgentActive(false);
-    } catch (err) {
-      setValidationMessage(`error destroying agent: ${err.message}`);
-    }
+  const onAgentRefresh = async () => {
+    setValidationMessage("");
+    await updateAgentStatus();
   };
   return {
     onAgentCreate,
-    onAgentDestroy,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
     validationMessage,
     agentStatus,
-    agentActive
+    agentHostingEnabled: !!agentHostingProviderClient
   };
 };
 
@@ -1763,24 +1814,24 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     hue,
     onChangeHue: setHue,
     classNames: "bs-[--rail-action]"
-  }), debug && /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+  }), debug && /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
-    classNames: "bs-[--rail-action] justify-self-start",
+    classNames: "bs-[--rail-action]",
     "data-testid": "update-profile-form-copy-key",
     onClick: () => setTextValue(identityHex)
   }, /* @__PURE__ */ React29.createElement("span", {
     className: "sr-only"
   }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React29.createElement(Key, {
     className: getSize13(5)
-  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t(copied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null))), /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+  }, t(copied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null))), /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
     classNames: [
-      "bs-[--rail-action] is-[--rail-action] justify-self-end",
+      "bs-[--rail-action]",
       !isConnected && "text-error-500"
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
@@ -1790,10 +1841,10 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     className: getSize13(5)
   }) : /* @__PURE__ */ React29.createElement(Plugs, {
     className: getSize13(5)
-  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null)))))))));
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))))))));
 };
 var IdentityPanelImpl = (props) => {
   const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
@@ -1876,7 +1927,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log6.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file5,
-      L: 249,
+      L: 246,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1893,7 +1944,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log6("[state]", state, {
         F: __dxlog_file5,
-        L: 262,
+        L: 259,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3788,7 +3839,7 @@ import React47, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { AgentHostingProvider, Client, ClientContext, ClientServicesProxy, Config, ShellDisplay as ShellDisplay2, SystemStatus } from "@dxos/react-client";
-import { Button as Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip7, useTranslation as useTranslation26 } from "@dxos/react-ui";
+import { Button as Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip8, useTranslation as useTranslation26 } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
@@ -4236,7 +4287,12 @@ var os = {
   "create agent label": "Start an agent",
   "destroy agent label": "Shut down agent",
   "agent device label": "Your agent",
-  "shell fallback title": "Shell failed to connect"
+  "shell fallback title": "Shell failed to connect",
+  "creating agent label": "Starting agent\u2026",
+  "destroying agent label": "Stopping agent\u2026",
+  "getting agent label": "Checking agent status\u2026",
+  "agent requested label": "Agent requested",
+  "agent requested description": "The agent service is creating an agent for you. Once the agent connects, it will display in the devices list."
 };
 
 // packages/sdk/shell/src/translations/index.ts
@@ -4269,7 +4325,7 @@ var runShell = async (config = new Config()) => {
         client,
         status: SystemStatus.ACTIVE
       }
-    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip7.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
+    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip8.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
       runtime
     }))))))));
   } catch {