@dxos/shell 0.3.11-main.9c729f3 → 0.3.11-main.9fa973d

package/dist/lib/browser/react.mjs

@@ -182,9 +182,9 @@ var DeviceList = ({ devices, onSelect }) => {
   }, devices.map((device) => {
     const identity = {
       identityKey: device.deviceKey,
-      profile: {
+      profile: device.profile ? {
         displayName: `${device.profile?.platform} (${device.profile?.platformVersion}) on ${device.profile?.os} (${device.profile?.osVersion}) ${device.profile?.architecture ?? "Unknown"}-bit`
-      }
+      } : void 0
     };
     return /* @__PURE__ */ React5.createElement(IdentityListItem, {
       key: device.deviceKey.toHex(),
@@ -813,17 +813,17 @@ var SpaceListItem = /* @__PURE__ */ forwardRef7(({ space, onClick }, ref) => {
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
-import React37 from "react";
+import React39 from "react";
 import { Dialog, useId as useId9 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import React24, { useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import React26, { useEffect as useEffect3, useMemo as useMemo3 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { log as log3 } from "@dxos/log";
-import { useClient as useClient3 } from "@dxos/react-client";
-import { useIdentity } from "@dxos/react-client/halo";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { useIdentity, useDevices } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
-import { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useJdenticonHref as useJdenticonHref3, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useJdenticonHref as useJdenticonHref3, useTranslation as useTranslation12 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
 import { useMachine } from "@xstate/react";
@@ -844,6 +844,14 @@ var identityMachine = createMachine({
   states: {
     choosingAction: {},
     managingDeviceInvitation: {},
+    managingAgent: {
+      initial: "idle",
+      states: {
+        idle: {},
+        pending: {}
+      }
+    },
+    managingDevices: {},
     managingProfile: {
       initial: "idle",
       states: {
@@ -873,13 +881,6 @@ var identityMachine = createMachine({
         "log"
       ]
     },
-    chooseDevices: {
-      target: ".managingDeviceInvitation",
-      actions: [
-        "unsetInvitation",
-        "log"
-      ]
-    },
     deselectInvitation: {
       target: ".choosingAction",
       actions: [
@@ -894,9 +895,17 @@ var identityMachine = createMachine({
         "log"
       ]
     },
+    chooseDevices: {
+      target: ".managingDevices",
+      actions: "log"
+    },
     chooseProfile: {
       target: ".managingProfile",
       actions: "log"
+    },
+    chooseAgent: {
+      target: ".managingAgent",
+      actions: "log"
     }
   }
 }, {
@@ -916,7 +925,7 @@ var identityMachine = createMachine({
         context
       }, {
         F: __dxlog_file,
-        L: 95,
+        L: 104,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -937,13 +946,34 @@ var useIdentityMachine = (client, options) => {
   });
 };
 
+// packages/sdk/shell/src/panels/IdentityPanel/steps/DeviceManager.tsx
+import React21 from "react";
+import { useTranslation as useTranslation7 } from "@dxos/react-ui";
+var DeviceManager = ({ devices, active, send }) => {
+  const { t } = useTranslation7("os");
+  const disabled = !active;
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", {
+    role: "none",
+    className: "grow"
+  }, /* @__PURE__ */ React21.createElement(DeviceList, {
+    devices
+  })), /* @__PURE__ */ React21.createElement(Actions, null, /* @__PURE__ */ React21.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => send?.({
+      type: "unchooseAction"
+    }),
+    "data-testid": "manage-devices-back"
+  }, t("back label"))));
+};
+
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
-import { CaretRight, Plus, Power, UserGear } from "@phosphor-icons/react";
-import React21, { useCallback as useCallback4 } from "react";
+import { CaretRight, Devices, Plus, Power, UserGear, HardDrive } from "@phosphor-icons/react";
+import React22, { useCallback as useCallback4 } from "react";
 import { useClient as useClient2 } from "@dxos/react-client";
 import { useHaloInvitations } from "@dxos/react-client/halo";
 import { Invitation as Invitation3, InvitationEncoder } from "@dxos/react-client/invitations";
-import { DensityProvider, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { DensityProvider, useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { getSize as getSize6 } from "@dxos/react-ui-theme";
 var IdentityActionChooser = (props) => {
   const { send } = props;
@@ -973,69 +1003,95 @@ var IdentityActionChooser = (props) => {
       invitation
     });
   };
-  return /* @__PURE__ */ React21.createElement(IdentityActionChooserImpl, {
+  return /* @__PURE__ */ React22.createElement(IdentityActionChooserImpl, {
     ...props,
     onCreateInvitationClick: (e) => createInvitation(e)
   });
 };
 var IdentityActionChooserImpl = ({ onCreateInvitationClick, active, send, onDone, doneActionParent }) => {
-  const { t } = useTranslation7("os");
-  return /* @__PURE__ */ React21.createElement("div", {
+  const { t } = useTranslation8("os");
+  return /* @__PURE__ */ React22.createElement("div", {
     role: "none",
     className: "grow flex flex-col gap-1"
-  }, /* @__PURE__ */ React21.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React22.createElement(DensityProvider, {
     density: "coarse"
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React22.createElement("div", {
     className: "grow justify-center flex flex-col gap-1"
-  }, /* @__PURE__ */ React21.createElement(Action, {
+  }, /* @__PURE__ */ React22.createElement(Action, {
+    "data-testid": "manage-agent",
+    onClick: () => send?.({
+      type: "chooseAgent"
+    }),
+    classNames: "plb-4"
+  }, /* @__PURE__ */ React22.createElement(HardDrive, {
+    className: getSize6(6)
+  }), /* @__PURE__ */ React22.createElement("span", {
+    className: "grow mli-3"
+  }, "Manage Agent"), /* @__PURE__ */ React22.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })), /* @__PURE__ */ React22.createElement(Action, {
     disabled: !active,
     "data-testid": "devices-panel.create-invitation",
     onClick: onCreateInvitationClick,
     classNames: "plb-4"
-  }, /* @__PURE__ */ React21.createElement(Plus, {
+  }, /* @__PURE__ */ React22.createElement(Plus, {
+    className: getSize6(6)
+  }), /* @__PURE__ */ React22.createElement("span", {
+    className: "grow mli-3"
+  }, t("choose add device label")), /* @__PURE__ */ React22.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })), /* @__PURE__ */ React22.createElement(Action, {
+    "data-testid": "manage-devices",
+    onClick: () => send?.({
+      type: "chooseDevices"
+    }),
+    classNames: "plb-4"
+  }, /* @__PURE__ */ React22.createElement(Devices, {
     className: getSize6(6)
-  }), /* @__PURE__ */ React21.createElement("span", {
+  }), /* @__PURE__ */ React22.createElement("span", {
     className: "grow mli-3"
-  }, t("choose devices label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+  }, t("choose devices label")), /* @__PURE__ */ React22.createElement(CaretRight, {
     weight: "bold",
     className: getSize6(4)
-  })), /* @__PURE__ */ React21.createElement(Action, {
+  })), /* @__PURE__ */ React22.createElement(Action, {
     "data-testid": "manage-profile",
     onClick: () => send?.({
       type: "chooseProfile"
     }),
     classNames: "plb-4"
-  }, /* @__PURE__ */ React21.createElement(UserGear, {
+  }, /* @__PURE__ */ React22.createElement(UserGear, {
     className: getSize6(6)
-  }), /* @__PURE__ */ React21.createElement("span", {
+  }), /* @__PURE__ */ React22.createElement("span", {
     className: "grow mli-3"
-  }, t("choose profile label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+  }, t("choose profile label")), /* @__PURE__ */ React22.createElement(CaretRight, {
     weight: "bold",
     className: getSize6(4)
-  })), /* @__PURE__ */ React21.createElement(Action, {
+  })), /* @__PURE__ */ React22.createElement(Action, {
     disabled: true,
     "data-testid": "sign-out",
     onClick: () => {
     },
     classNames: "plb-4"
-  }, /* @__PURE__ */ React21.createElement(Power, {
+  }, /* @__PURE__ */ React22.createElement(Power, {
     className: getSize6(6)
-  }), /* @__PURE__ */ React21.createElement("span", {
+  }), /* @__PURE__ */ React22.createElement("span", {
     className: "grow mli-3"
-  }, t("choose sign out label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+  }, t("choose sign out label")), /* @__PURE__ */ React22.createElement(CaretRight, {
     weight: "bold",
     className: getSize6(4)
   })))));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
-import React22, { useState as useState3 } from "react";
+import React23, { useState as useState3 } from "react";
 import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { useTranslation as useTranslation9 } from "@dxos/react-ui";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx";
 var ProfileForm = (props) => {
   const { onUpdateProfile } = props;
-  const { t } = useTranslation8("os");
+  const { t } = useTranslation9("os");
   const [validationMessage, setValidationMessage] = useState3("");
   const handleUpdateProfile = async (profile) => {
     await onUpdateProfile?.(profile).catch((error) => {
@@ -1048,7 +1104,7 @@ var ProfileForm = (props) => {
       setValidationMessage(t("failed to update profile message"));
     });
   };
-  return /* @__PURE__ */ React22.createElement(ProfileFormImpl, {
+  return /* @__PURE__ */ React23.createElement(ProfileFormImpl, {
     ...props,
     onUpdateProfile: handleUpdateProfile,
     validationMessage
@@ -1057,14 +1113,14 @@ var ProfileForm = (props) => {
 var ProfileFormImpl = (props) => {
   const { active, profile, send, onUpdateProfile, validationMessage } = props;
   const disabled = !active;
-  const { t } = useTranslation8("os");
+  const { t } = useTranslation9("os");
   const [inputValue, setInputValue] = useState3(profile?.displayName ?? "");
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React22.createElement(Input, {
+  }, /* @__PURE__ */ React23.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React22.createElement(StepHeading, null, t("display name input label")),
+    label: /* @__PURE__ */ React23.createElement(StepHeading, null, t("display name input label")),
     disabled,
     "data-testid": "display-name-input",
     placeholder: t("display name input placeholder"),
@@ -1073,14 +1129,14 @@ var ProfileFormImpl = (props) => {
     onKeyDown: ({ key }) => key === "Enter" && onUpdateProfile?.({
       displayName: inputValue
     })
-  })), /* @__PURE__ */ React22.createElement(Actions, null, /* @__PURE__ */ React22.createElement(Action, {
+  })), /* @__PURE__ */ React23.createElement(Actions, null, /* @__PURE__ */ React23.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
       type: "unchooseAction"
     }),
     "data-testid": "update-profile-form-back"
-  }, t("back label")), /* @__PURE__ */ React22.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React23.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onUpdateProfile?.({
@@ -1090,23 +1146,152 @@ var ProfileFormImpl = (props) => {
   }, t("done label"))));
 };
 
+// packages/sdk/shell/src/panels/IdentityPanel/steps/AgentPanel.tsx
+import React24, { useState as useState4, useCallback as useCallback5, useEffect as useEffect2 } from "react";
+import { invariant } from "@dxos/invariant";
+import { useClient as useClient3, useAgentHostingProviderClient } from "@dxos/react-client";
+import { useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
+import { Invitation as Invitation4, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
+import { useTranslation as useTranslation10 } from "@dxos/react-ui";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/AgentPanel.tsx";
+var AgentForm = (props) => {
+  const { identity } = props;
+  const [validationMessage, setValidationMessage] = useState4("");
+  const [agentStatus, setAgentStatus] = useState4("");
+  const [agentActive, setAgentActive] = useState4(false);
+  const client = useClient3();
+  const invitations = useHaloInvitations2();
+  const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
+  useEffect2(() => {
+    const fetchAgentStatus = async () => {
+      if (agentHostingProviderClient) {
+        const agentStatus2 = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? "foo");
+        if (agentStatus2) {
+          setAgentActive(true);
+          setAgentStatus(agentStatus2);
+        } else {
+          setAgentActive(false);
+          setValidationMessage("No agent deployed via provider.");
+        }
+      } else {
+        setValidationMessage("No agent provider configured.");
+      }
+    };
+    void fetchAgentStatus();
+  }, []);
+  const onAgentCreateEvent = useCallback5(async (invitation) => {
+    const invitationCode = InvitationEncoder2.encode(invitation);
+    if (invitation.state === Invitation4.State.CONNECTING) {
+      console.log(JSON.stringify({
+        invitationCode,
+        authCode: invitation.authCode
+      }));
+      invariant(identity, "Identity not found", {
+        F: __dxlog_file3,
+        L: 65,
+        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}`);
+        }
+      }
+    }
+  }, []);
+  const handleAgentCreate = async () => {
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share({
+      type: Invitation4.Type.MULTIUSE,
+      authMethod: Invitation4.AuthMethod.NONE
+    });
+    invitation.subscribe(onAgentCreateEvent);
+  };
+  const handleAgentDestroy = async () => {
+    const identity2 = client.halo.identity.get();
+    invariant(identity2, "Identity not found", {
+      F: __dxlog_file3,
+      L: 91,
+      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}`);
+    }
+  };
+  return /* @__PURE__ */ React24.createElement(AgentFormImpl, {
+    ...props,
+    onAgentCreate: handleAgentCreate,
+    onAgentDestroy: handleAgentDestroy,
+    validationMessage,
+    agentStatus,
+    agentActive,
+    agentProviderDisabled: !agentHostingProviderClient
+  });
+};
+var AgentFormImpl = (props) => {
+  const { active, onAgentCreate, onAgentDestroy, send, validationMessage, agentStatus, agentActive, agentProviderDisabled } = props;
+  const disabled = !active;
+  const { t } = useTranslation10("os");
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React24.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ React24.createElement(StepHeading, null, "Agent Status"),
+    disabled,
+    "data-testid": "agent-status",
+    value: agentStatus
+  })), /* @__PURE__ */ React24.createElement(Actions, null, /* @__PURE__ */ React24.createElement(Action, {
+    disabled: agentActive || agentProviderDisabled,
+    onClick: () => onAgentCreate?.(),
+    "data-testid": "create-agent"
+  }, "Create Agent"), /* @__PURE__ */ React24.createElement(Action, {
+    disabled: !agentActive || agentProviderDisabled,
+    onClick: () => onAgentDestroy?.(),
+    "data-testid": "destroy-agent"
+  }, "Destroy Agent"), /* @__PURE__ */ React24.createElement(Action, {
+    disabled,
+    onClick: () => send?.({
+      type: "unchooseAction"
+    }),
+    "data-testid": "update-profile-form-back"
+  }, t("back label"))));
+};
+
 // packages/sdk/shell/src/steps/InvitationManager.tsx
 import { Check as Check3, X as X3 } from "@phosphor-icons/react";
-import React23, { useMemo as useMemo2 } from "react";
+import React25, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
-import { Invitation as Invitation4 } from "@dxos/react-client/invitations";
-import { useId as useId4, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { Invitation as Invitation5 } from "@dxos/react-client/invitations";
+import { useId as useId4, useTranslation as useTranslation11 } from "@dxos/react-ui";
 import { descriptionText as descriptionText7, getSize as getSize7, mx as mx18 } from "@dxos/react-ui-theme";
 var InvitationManagerView = ({ children, ...props }) => {
-  return /* @__PURE__ */ React23.createElement(Viewport.View, {
+  return /* @__PURE__ */ React25.createElement(Viewport.View, {
     ...props,
     classNames: "grow flex flex-col justify-around items-center"
   }, children);
 };
 var InvitationManager = ({ invitationUrl, active, send, status, type, authCode, id }) => {
-  const { t } = useTranslation9("os");
+  const { t } = useTranslation11("os");
   const qrLabel = useId4("invitation-manager__qr-code");
-  const statusValue = type === Invitation4.Type.MULTIUSE ? 0 : invitationStatusValue.get(status) ?? 0;
+  const statusValue = type === Invitation5.Type.MULTIUSE ? 0 : invitationStatusValue.get(status) ?? 0;
   const showAuthCode = statusValue === 3;
   const emoji2 = toEmoji(id ?? "");
   const activeView = useMemo2(() => {
@@ -1122,18 +1307,18 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
   }, [
     statusValue
   ]);
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Viewport.Root, {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Viewport.Root, {
     activeView,
     classNames: "grow plb-1"
-  }, /* @__PURE__ */ React23.createElement(Viewport.Views, null, /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+  }, /* @__PURE__ */ React25.createElement(Viewport.Views, null, /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing qr",
     emoji: emoji2
-  }, /* @__PURE__ */ React23.createElement("p", {
+  }, /* @__PURE__ */ React25.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(type === Invitation4.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React23.createElement("div", {
+  }, t(type === Invitation5.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: mx18(descriptionText7, "is-full max-is-[14rem] relative")
-  }, /* @__PURE__ */ React23.createElement(QR, {
+  }, /* @__PURE__ */ React25.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
@@ -1141,31 +1326,31 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
-  }, invitationUrl ?? "never"), /* @__PURE__ */ React23.createElement(Centered, null, /* @__PURE__ */ React23.createElement(Emoji, {
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React25.createElement(Centered, null, /* @__PURE__ */ React25.createElement(Emoji, {
     text: emoji2
-  }))), /* @__PURE__ */ React23.createElement("span", {
+  }))), /* @__PURE__ */ React25.createElement("span", {
     id: qrLabel,
     className: "sr-only"
-  }, t("qr label")), /* @__PURE__ */ React23.createElement(CopyButton, {
+  }, t("qr label")), /* @__PURE__ */ React25.createElement(CopyButton, {
     variant: "ghost",
     value: invitationUrl ?? "never"
-  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing auth code"
-  }, /* @__PURE__ */ React23.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React23.createElement(AuthCode, {
+  }, /* @__PURE__ */ React25.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React25.createElement(AuthCode, {
     code: authCode,
     large: true,
     classNames: "text-black dark:text-white"
-  }), /* @__PURE__ */ React23.createElement(Label, null, "Be sure the other device is showing this symbol:"), emoji2 && /* @__PURE__ */ React23.createElement(Emoji, {
+  }), /* @__PURE__ */ React25.createElement(Label, null, "Be sure the other device is showing this symbol:"), emoji2 && /* @__PURE__ */ React25.createElement(Emoji, {
     text: emoji2
-  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing final"
-  }, statusValue > 0 ? /* @__PURE__ */ React23.createElement(Check3, {
+  }, statusValue > 0 ? /* @__PURE__ */ React25.createElement(Check3, {
     className: mx18("m-1.5", getSize7(6))
-  }) : /* @__PURE__ */ React23.createElement(X3, {
+  }) : /* @__PURE__ */ React25.createElement(X3, {
     className: mx18("m-1.5", getSize7(6))
-  })))), /* @__PURE__ */ React23.createElement(Actions, {
+  })))), /* @__PURE__ */ React25.createElement(Actions, {
     classNames: "mbs-4"
-  }, /* @__PURE__ */ React23.createElement(Action, {
+  }, /* @__PURE__ */ React25.createElement(Action, {
     disabled: !active,
     onClick: () => send?.({
       type: "deselectInvitation"
@@ -1174,36 +1359,37 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
 var viewStyles = "pbs-1 pbe-3 pli-3";
 var IdentityHeading = ({ titleId, title, identity, onDone }) => {
   const fallbackHref = useJdenticonHref3(identity.identityKey.toHex(), 12);
-  return /* @__PURE__ */ React24.createElement(Heading, {
+  return /* @__PURE__ */ React26.createElement(Heading, {
     titleId,
     title,
-    corner: /* @__PURE__ */ React24.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React26.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React24.createElement(Avatar4.Root, {
+  }, /* @__PURE__ */ React26.createElement(Avatar4.Root, {
     size: 12,
     variant: "circle",
     status: "active"
-  }, /* @__PURE__ */ React24.createElement(Avatar4.Frame, {
+  }, /* @__PURE__ */ React26.createElement(Avatar4.Frame, {
     classNames: "block mbs-4 mbe-2 mli-auto chromatic-ignore"
-  }, /* @__PURE__ */ React24.createElement(Avatar4.Fallback, {
+  }, /* @__PURE__ */ React26.createElement(Avatar4.Fallback, {
     href: fallbackHref
-  })), /* @__PURE__ */ React24.createElement(Avatar4.Label, {
+  })), /* @__PURE__ */ React26.createElement(Avatar4.Label, {
     classNames: "block text-center font-light text-xl"
   }, identity.profile?.displayName ?? generateName2(identity.identityKey.toHex()))));
 };
 var IdentityPanelImpl = (props) => {
   const { identity, titleId, activeView, onUpdateProfile, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, onDone, ...rest } = props;
-  const { t } = useTranslation10("os");
+  const { t } = useTranslation12("os");
   const title = useMemo3(() => {
     switch (activeView) {
-      case "device manager":
+      case "agent manager":
+        return "Manage Agent";
       case "device invitation manager":
-        return t("choose devices label");
+        return t("choose add device label");
       default:
         return t("identity heading");
     }
@@ -1211,59 +1397,76 @@ var IdentityPanelImpl = (props) => {
     activeView,
     t
   ]);
-  return /* @__PURE__ */ React24.createElement(DensityProvider2, {
+  console.log("[IdentityPanelImpl]", {
+    activeView
+  });
+  return /* @__PURE__ */ React26.createElement(DensityProvider2, {
     density: "fine"
-  }, /* @__PURE__ */ React24.createElement(IdentityHeading, {
+  }, /* @__PURE__ */ React26.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
     onDone
-  }), /* @__PURE__ */ React24.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React26.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React24.createElement(Viewport.Views, null, /* @__PURE__ */ React24.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React26.createElement(Viewport.Views, null, /* @__PURE__ */ React26.createElement(Viewport.View, {
     id: "identity action chooser",
     classNames: viewStyles
-  }, /* @__PURE__ */ React24.createElement(IdentityActionChooserComponent, {
+  }, /* @__PURE__ */ React26.createElement(IdentityActionChooserComponent, {
     active: activeView === "identity action chooser",
     ...rest
-  })), /* @__PURE__ */ React24.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React26.createElement(Viewport.View, {
     id: "device invitation manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React24.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React26.createElement(InvitationManagerComponent, {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React24.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React26.createElement(Viewport.View, {
+    id: "device manager",
+    classNames: viewStyles
+  }, /* @__PURE__ */ React26.createElement(DeviceManager, {
+    active: activeView === "device manager",
+    ...rest
+  })), /* @__PURE__ */ React26.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "update profile form"
-  }, /* @__PURE__ */ React24.createElement(ProfileForm, {
+  }, /* @__PURE__ */ React26.createElement(ProfileForm, {
     send: rest.send,
     active: activeView === "update profile form",
     profile: identity.profile,
     onUpdateProfile
+  })), /* @__PURE__ */ React26.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "agent manager"
+  }, /* @__PURE__ */ React26.createElement(AgentForm, {
+    send: rest.send,
+    active: activeView === "agent manager",
+    identity
   })))));
 };
 var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus2(invitation);
-  return /* @__PURE__ */ React24.createElement(IdentityPanelImpl, {
+  return /* @__PURE__ */ React26.createElement(IdentityPanelImpl, {
     ...props,
     ...invitationStatus
   });
 };
 var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
   const titleId = useId5("identityPanel__heading", propsTitleId);
-  const client = useClient3();
+  const client = useClient4();
+  const devices = useDevices();
   const identity = useIdentity();
   if (!identity) {
     console.error("IdentityPanel rendered with no active identity.");
     return null;
   }
   const [identityState, identitySend, identityService] = useIdentityMachine(client);
-  useEffect2(() => {
+  useEffect3(() => {
     const subscription = identityService.subscribe((state) => {
       log3("[state]", state, {
-        F: __dxlog_file3,
-        L: 117,
+        F: __dxlog_file4,
+        L: 126,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1278,6 +1481,8 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
         return "identity action chooser";
       case identityState.matches("managingDeviceInvitation"):
         return "device invitation manager";
+      case identityState.matches("managingDevices"):
+        return "device manager";
       case [
         {
           managingProfile: "idle"
@@ -1287,12 +1492,25 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
         }
       ].some(identityState.matches):
         return "update profile form";
+      case [
+        {
+          managingAgent: "idle"
+        },
+        {
+          managingAgent: "pending"
+        }
+      ].some(identityState.matches):
+        return "agent manager";
       default:
         return "identity action chooser";
     }
   }, [
     identityState
   ]);
+  console.log({
+    activeView,
+    identityState
+  });
   const onUpdateProfile = async (profile) => {
     identitySend({
       type: "updateProfile"
@@ -1302,46 +1520,47 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   const implProps = {
     ...props,
     identity,
+    devices,
     activeView,
     send: identitySend,
     titleId,
     createInvitationUrl,
     onUpdateProfile
   };
-  return identityState.context.invitation ? /* @__PURE__ */ React24.createElement(IdentityPanelWithInvitationImpl, {
+  return identityState.context.invitation ? /* @__PURE__ */ React26.createElement(IdentityPanelWithInvitationImpl, {
     ...implProps,
     invitation: identityState.context.invitation
-  }) : /* @__PURE__ */ React24.createElement(IdentityPanelImpl, implProps);
+  }) : /* @__PURE__ */ React26.createElement(IdentityPanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-import React34, { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import React36, { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 import { log as log8 } from "@dxos/log";
-import { useClient as useClient6, useMulticastObservable } from "@dxos/react-client";
+import { useClient as useClient7, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
 import { DensityProvider as DensityProvider3, useId as useId7, useThemeContext as useThemeContext3 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X4 } from "@phosphor-icons/react";
-import React25, { cloneElement, forwardRef as forwardRef8 } from "react";
-import { Button as Button5, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import React27, { cloneElement, forwardRef as forwardRef8 } from "react";
+import { Button as Button5, useTranslation as useTranslation13 } from "@dxos/react-ui";
 import { descriptionText as descriptionText8, getSize as getSize8, mx as mx19 } from "@dxos/react-ui-theme";
 var JoinHeading = /* @__PURE__ */ forwardRef8(({ mode, titleId, onExit, exitActionParent }, forwardedRef) => {
-  const { t } = useTranslation11("os");
-  const exitButton = /* @__PURE__ */ React25.createElement(Button5, {
+  const { t } = useTranslation13("os");
+  const exitButton = /* @__PURE__ */ React27.createElement(Button5, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
     classNames: mx19(descriptionText8, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
-  }, /* @__PURE__ */ React25.createElement(X4, {
+  }, /* @__PURE__ */ React27.createElement(X4, {
     weight: "bold",
     className: getSize8(4)
-  }), /* @__PURE__ */ React25.createElement("span", {
+  }), /* @__PURE__ */ React27.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React25.createElement(Heading, {
+  return /* @__PURE__ */ React27.createElement(Heading, {
     ref: forwardedRef,
     titleId,
     title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
@@ -1356,14 +1575,14 @@ var JoinHeading = /* @__PURE__ */ forwardRef8(({ mode, titleId, onExit, exitActi
 
 // packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts
 import { useMachine as useMachine2 } from "@xstate/react";
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { assign as assign2, createMachine as createMachine2 } from "xstate";
 import { log as log4 } from "@dxos/log";
-import { Invitation as Invitation5, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
+import { Invitation as Invitation6, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
 var getInvitationSubscribable = (Kind, invitation) => {
   log4("[subscribing to invitation]", invitation, {
-    F: __dxlog_file4,
+    F: __dxlog_file5,
     L: 88,
     S: void 0,
     C: (f, a) => f(...a)
@@ -1371,12 +1590,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
   return {
     subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
       switch (invitation2.state) {
-        case Invitation5.State.CONNECTING: {
+        case Invitation6.State.CONNECTING: {
           log4("[invitation connecting]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 99,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1386,12 +1605,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation5.State.CONNECTED: {
+        case Invitation6.State.CONNECTED: {
           log4("[invitation connected]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 104,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1401,12 +1620,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation5.State.READY_FOR_AUTHENTICATION: {
+        case Invitation6.State.READY_FOR_AUTHENTICATION: {
           log4("[invitation ready for authentication]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 109,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1416,12 +1635,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation5.State.AUTHENTICATING: {
+        case Invitation6.State.AUTHENTICATING: {
           log4("[invitation authenticating]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 114,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1431,12 +1650,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation5.State.SUCCESS: {
+        case Invitation6.State.SUCCESS: {
           log4("[invitation success]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 119,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1447,11 +1666,11 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
           return complete?.();
         }
-        case Invitation5.State.CANCELLED: {
+        case Invitation6.State.CANCELLED: {
           log4.warn("[invitation cancelled]", {
             Kind
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 125,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1461,11 +1680,11 @@ var getInvitationSubscribable = (Kind, invitation) => {
             reason: "cancelled"
           });
         }
-        case Invitation5.State.TIMEOUT: {
+        case Invitation6.State.TIMEOUT: {
           log4.error("[invitation timeout]", {
             Kind
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file5,
             L: 130,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1481,7 +1700,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
         Kind,
         error
       }, {
-        F: __dxlog_file4,
+        F: __dxlog_file5,
         L: 136,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1544,7 +1763,7 @@ var acceptingInvitationTemplate = (Kind, successTarget) => {
               {
                 cond: (context) => {
                   const invitation = context[Kind.toLowerCase()].invitation;
-                  return !invitation || invitation?.state === Invitation5.State.CONNECTING;
+                  return !invitation || invitation?.state === Invitation6.State.CONNECTING;
                 },
                 target: `connecting${Kind}Invitation`,
                 actions: "log"
@@ -1801,12 +2020,12 @@ var joinMachine = createMachine2({
       } : context.space
     }),
     log: (context, event) => {
-      log4.info("[transition]", {
+      log4("[transition]", {
         event,
         haloInvitation: context.halo.invitation,
         spaceInvitation: context.space.invitation
       }, {
-        F: __dxlog_file4,
+        F: __dxlog_file5,
         L: 400,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1820,7 +2039,7 @@ var defaultCodeFromUrl = (invitationType, text) => {
     return searchParams.get(`${invitationType}InvitationCode`) ?? searchParams.get(`${invitationType}Invitation`) ?? searchParams.get("invitationCode") ?? searchParams.get("invitation") ?? text;
   } catch (err) {
     log4.catch(err, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 427,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1829,10 +2048,10 @@ var defaultCodeFromUrl = (invitationType, text) => {
   }
 };
 var useJoinMachine = (client, options) => {
-  const redeemHaloInvitationCode = useCallback5(({ halo }) => {
+  const redeemHaloInvitationCode = useCallback6(({ halo }) => {
     if (halo.unredeemedCode) {
       try {
-        const invitationObservable = client.halo.join(InvitationEncoder2.decode(defaultCodeFromUrl("halo", halo.unredeemedCode)));
+        const invitationObservable = client.halo.join(InvitationEncoder3.decode(defaultCodeFromUrl("halo", halo.unredeemedCode)));
         return {
           ...halo,
           invitationObservable,
@@ -1840,7 +2059,7 @@ var useJoinMachine = (client, options) => {
         };
       } catch (err) {
         log4.error("Could not redeem device invitation code", err, {
-          F: __dxlog_file4,
+          F: __dxlog_file5,
           L: 449,
           S: void 0,
           C: (f, a) => f(...a)
@@ -1853,10 +2072,10 @@ var useJoinMachine = (client, options) => {
   }, [
     client
   ]);
-  const redeemSpaceInvitationCode = useCallback5(({ space }) => {
+  const redeemSpaceInvitationCode = useCallback6(({ space }) => {
     if (space.unredeemedCode) {
       try {
-        const invitation = InvitationEncoder2.decode(defaultCodeFromUrl("space", space.unredeemedCode));
+        const invitation = InvitationEncoder3.decode(defaultCodeFromUrl("space", space.unredeemedCode));
         if (space.succeededKeys?.has(invitation.spaceKey?.toHex() ?? "never")) {
           return {
             ...space,
@@ -1872,7 +2091,7 @@ var useJoinMachine = (client, options) => {
         }
       } catch (err) {
         log4.error("Could not redeem space invitation code", err, {
-          F: __dxlog_file4,
+          F: __dxlog_file5,
           L: 479,
           S: void 0,
           C: (f, a) => f(...a)
@@ -1885,7 +2104,7 @@ var useJoinMachine = (client, options) => {
   }, [
     client
   ]);
-  const invalidateHaloInvitationCode = useCallback5(({ halo }) => {
+  const invalidateHaloInvitationCode = useCallback6(({ halo }) => {
     if (halo.unredeemedCode) {
       options?.onInvalidateInvitationCode?.(halo.unredeemedCode);
       return {
@@ -1898,7 +2117,7 @@ var useJoinMachine = (client, options) => {
   }, [
     options?.onInvalidateInvitationCode
   ]);
-  const invalidateSpaceInvitationCode = useCallback5(({ space }) => {
+  const invalidateSpaceInvitationCode = useCallback6(({ space }) => {
     if (space.unredeemedCode) {
       options?.onInvalidateInvitationCode?.(space.unredeemedCode);
       return {
@@ -1933,16 +2152,16 @@ var useJoinMachine = (client, options) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
 import { CaretRight as CaretRight2, Plus as Plus2, QrCode, Textbox } from "@phosphor-icons/react";
-import React26 from "react";
-import { useTranslation as useTranslation12 } from "@dxos/react-ui";
+import React28 from "react";
+import { useTranslation as useTranslation14 } from "@dxos/react-ui";
 import { getSize as getSize9 } from "@dxos/react-ui-theme";
 var AdditionMethodChooser = (viewStateProps) => {
   const disabled = !viewStateProps.active;
   const { send } = viewStateProps;
-  const { t } = useTranslation12("os");
+  const { t } = useTranslation14("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React26.createElement(CaretRight2, {
+    after: /* @__PURE__ */ React28.createElement(CaretRight2, {
       className: getSize9(4),
       weight: "bold"
     }),
@@ -1952,13 +2171,13 @@ var AdditionMethodChooser = (viewStateProps) => {
       }
     }
   };
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React26.createElement(CompoundButton, {
+  }, /* @__PURE__ */ React28.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React26.createElement(Plus2, {
+    before: /* @__PURE__ */ React28.createElement(Plus2, {
       className: getSize9(6)
     }),
     onClick: () => send({
@@ -1966,22 +2185,22 @@ var AdditionMethodChooser = (viewStateProps) => {
     }),
     "data-autofocus": "choosingAuthMethod",
     "data-testid": "create-identity"
-  }, t("create identity label")), /* @__PURE__ */ React26.createElement(CompoundButton, {
+  }, t("create identity label")), /* @__PURE__ */ React28.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("join identity description"),
-    before: /* @__PURE__ */ React26.createElement(QrCode, {
+    before: /* @__PURE__ */ React28.createElement(QrCode, {
       className: getSize9(6)
     }),
     onClick: () => send({
       type: "acceptHaloInvitation"
     }),
     "data-testid": "join-identity"
-  }, t("join identity label")), /* @__PURE__ */ React26.createElement(CompoundButton, {
+  }, t("join identity label")), /* @__PURE__ */ React28.createElement(CompoundButton, {
     ...sharedButtonProps,
     // TODO(mykola): Implement recover.
     disabled: true,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React26.createElement(Textbox, {
+    before: /* @__PURE__ */ React28.createElement(Textbox, {
       className: getSize9(6)
     }),
     onClick: () => send({
@@ -1992,37 +2211,37 @@ var AdditionMethodChooser = (viewStateProps) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
-import React27, { cloneElement as cloneElement2 } from "react";
+import React29, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
-import { Avatar as Avatar5, useId as useId6, useJdenticonHref as useJdenticonHref4, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { Avatar as Avatar5, useId as useId6, useJdenticonHref as useJdenticonHref4, useTranslation as useTranslation15 } from "@dxos/react-ui";
 import { mx as mx20 } from "@dxos/react-ui-theme";
 var IdentityAdded = (props) => {
   const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
   const disabled = !active;
-  const { t } = useTranslation13("os");
+  const { t } = useTranslation15("os");
   const fallbackValue = addedIdentity?.identityKey.toHex();
   const labelId = useId6("identityListItem__label");
   const jdenticon = useJdenticonHref4(fallbackValue ?? "", 12);
   const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName3(addedIdentity?.identityKey.toHex()));
-  const doneAction = /* @__PURE__ */ React27.createElement(Action, {
+  const doneAction = /* @__PURE__ */ React29.createElement(Action, {
     ...onDone && {
       onClick: () => onDone(null)
     },
     disabled,
     "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }, /* @__PURE__ */ React27.createElement("span", null, t("done label")));
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React27.createElement("div", {
+  }, /* @__PURE__ */ React29.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React29.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React27.createElement(Avatar5.Root, {
+  }, /* @__PURE__ */ React29.createElement(Avatar5.Root, {
     status: "active",
     labelId
-  }, /* @__PURE__ */ React27.createElement(Avatar5.Frame, null, /* @__PURE__ */ React27.createElement(Avatar5.Fallback, {
+  }, /* @__PURE__ */ React29.createElement(Avatar5.Frame, null, /* @__PURE__ */ React29.createElement(Avatar5.Fallback, {
     href: jdenticon
-  })), /* @__PURE__ */ React27.createElement(Avatar5.Label, {
+  })), /* @__PURE__ */ React29.createElement(Avatar5.Label, {
     classNames: mx20("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
-  }, displayName))), /* @__PURE__ */ React27.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React27.createElement(Action, {
+  }, displayName))), /* @__PURE__ */ React29.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React29.createElement(Action, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
     onClick: () => addedIdentity && send({
@@ -2034,17 +2253,17 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React28, { useState as useState4 } from "react";
+import React30, { useState as useState5 } from "react";
 import { log as log5 } from "@dxos/log";
-import { useClient as useClient4 } from "@dxos/react-client";
-import { useTranslation as useTranslation14 } from "@dxos/react-ui";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
+import { useClient as useClient5 } from "@dxos/react-client";
+import { useTranslation as useTranslation16 } from "@dxos/react-ui";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
 var IdentityInput = (props) => {
   const { send, method } = props;
   const isRecover = method === "recover identity";
-  const client = useClient4();
-  const { t } = useTranslation14("os");
-  const [validationMessage, setValidationMessage] = useState4("");
+  const client = useClient5();
+  const { t } = useTranslation16("os");
+  const [validationMessage, setValidationMessage] = useState5("");
   const createIdentity = (displayName) => {
     void client.halo.createIdentity({
       [isRecover ? "seedphrase" : "displayName"]: displayName
@@ -2055,7 +2274,7 @@ var IdentityInput = (props) => {
       });
     }, (error) => {
       log5.catch(error, void 0, {
-        F: __dxlog_file5,
+        F: __dxlog_file6,
         L: 37,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2063,7 +2282,7 @@ var IdentityInput = (props) => {
       setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
     });
   };
-  return /* @__PURE__ */ React28.createElement(IdentityInputImpl, {
+  return /* @__PURE__ */ React30.createElement(IdentityInputImpl, {
     ...props,
     onDisplayNameConfirm: createIdentity,
     validationMessage
@@ -2072,27 +2291,27 @@ var IdentityInput = (props) => {
 var IdentityInputImpl = (props) => {
   const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
   const disabled = !active;
-  const { t } = useTranslation14("os");
-  const [inputValue, setInputValue] = useState4("");
+  const { t } = useTranslation16("os");
+  const [inputValue, setInputValue] = useState5("");
   const isRecover = method === "recover identity";
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React28.createElement(Input, {
+  }, /* @__PURE__ */ React30.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React28.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React30.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     disabled,
     "data-testid": "identity-input",
     placeholder: isRecover ? "Type your recovery phrase" : "Type a display name",
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React28.createElement(Actions, null, /* @__PURE__ */ React28.createElement(Action, {
+  })), /* @__PURE__ */ React30.createElement(Actions, null, /* @__PURE__ */ React30.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
       type: "deselectAuthMethod"
     }),
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, t("back label")), /* @__PURE__ */ React28.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React30.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onDisplayNameConfirm?.(inputValue),
@@ -2101,32 +2320,32 @@ var IdentityInputImpl = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
-import React29, { cloneElement as cloneElement3 } from "react";
-import { useTranslation as useTranslation15 } from "@dxos/react-ui";
+import React31, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation17 } from "@dxos/react-ui";
 var InvitationAccepted = (props) => {
   const { active, Kind, doneActionParent, onDone } = props;
   const disabled = !active;
-  const { t } = useTranslation15("os");
-  const doneAction = /* @__PURE__ */ React29.createElement(Action, {
+  const { t } = useTranslation17("os");
+  const doneAction = /* @__PURE__ */ React31.createElement(Action, {
     variant: "primary",
     onClick: onDone,
     disabled,
     "data-autofocus": `success${Kind}Invitation finishingJoining${Kind}`,
     "data-testid": `${Kind.toLowerCase()}-invitation-accepted-done`
   }, t("done label"));
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React29.createElement("p", {
+  }, /* @__PURE__ */ React31.createElement("p", {
     className: "text-center text-sm font-normal"
-  }, t("welcome message"))), /* @__PURE__ */ React29.createElement(Actions, null, doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneAction) : doneAction));
+  }, t("welcome message"))), /* @__PURE__ */ React31.createElement(Actions, null, doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneAction) : doneAction));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React30, { useState as useState5, useEffect as useEffect3, cloneElement as cloneElement4 } from "react";
+import React32, { useState as useState6, useEffect as useEffect4, cloneElement as cloneElement4 } from "react";
 import { log as log6 } from "@dxos/log";
-import { useTranslation as useTranslation16 } from "@dxos/react-ui";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
+import { useTranslation as useTranslation18 } from "@dxos/react-ui";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
 var invitationCodeFromUrl = (text) => {
   try {
     const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
@@ -2134,7 +2353,7 @@ var invitationCodeFromUrl = (text) => {
     return invitation ?? text;
   } catch (err) {
     log6.catch(err, void 0, {
-      F: __dxlog_file6,
+      F: __dxlog_file7,
       L: 25,
       S: void 0,
       C: (f, a) => f(...a)
@@ -2145,9 +2364,9 @@ var invitationCodeFromUrl = (text) => {
 var InvitationInput = (props) => {
   const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
   const disabled = !active;
-  const { t } = useTranslation16("os");
-  const [inputValue, setInputValue] = useState5(unredeemedCode ?? "");
-  useEffect3(() => {
+  const { t } = useTranslation18("os");
+  const [inputValue, setInputValue] = useState6(unredeemedCode ?? "");
+  useEffect4(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
     unredeemedCode
@@ -2159,7 +2378,7 @@ var InvitationInput = (props) => {
       succeededKeys
     }
   });
-  const exitAction = /* @__PURE__ */ React30.createElement(Action, {
+  const exitAction = /* @__PURE__ */ React32.createElement(Action, {
     variant: "ghost",
     disabled,
     ...onExit ? {
@@ -2169,11 +2388,11 @@ var InvitationInput = (props) => {
     },
     "data-testid": "join-exit"
   }, t("cancel label"));
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("div", {
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React30.createElement(Input, {
-    label: /* @__PURE__ */ React30.createElement(StepHeading, null, t("invitation input label")),
+  }, /* @__PURE__ */ React32.createElement(Input, {
+    label: /* @__PURE__ */ React32.createElement(StepHeading, null, t("invitation input label")),
     placeholder: "Type an invitation code",
     disabled,
     value: inputValue,
@@ -2181,14 +2400,14 @@ var InvitationInput = (props) => {
     "data-autofocus": `inputting${Kind}InvitationCode`,
     "data-testid": `${Kind.toLowerCase()}-invitation-input`,
     onKeyUp: ({ key }) => key === "Enter" && handleNext()
-  })), /* @__PURE__ */ React30.createElement(Actions, null, Kind === "Halo" ? /* @__PURE__ */ React30.createElement(Action, {
+  })), /* @__PURE__ */ React32.createElement(Actions, null, Kind === "Halo" ? /* @__PURE__ */ React32.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send({
       type: "deselectAuthMethod"
     }),
     "data-testid": `${Kind.toLowerCase()}-invitation-input-back`
-  }, t("back label")) : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React30.createElement(Action, {
+  }, t("back label")) : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React32.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: handleNext,
@@ -2197,8 +2416,8 @@ var InvitationInput = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
-import React31 from "react";
-import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import React33 from "react";
+import { useTranslation as useTranslation19 } from "@dxos/react-ui";
 import { descriptionText as descriptionText9 } from "@dxos/react-ui-theme";
 var InvitationActions = ({
   // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
@@ -2210,14 +2429,14 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation17("os");
+  const { t } = useTranslation19("os");
   if (failReason) {
-    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, {
+    return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StepHeading, {
       className: descriptionText9
-    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React31.createElement("div", {
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React33.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+    }), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
       disabled: !active,
       onClick: () => send({
         type: `reset${Kind}Invitation`
@@ -2225,16 +2444,16 @@ var InvitationActions = ({
       "data-testid": "invitation-rescuer-reset"
     }, t("reset label"))));
   } else {
-    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, {
+    return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StepHeading, {
       className: descriptionText9
-    }, t("connecting status label")), /* @__PURE__ */ React31.createElement("div", {
+    }, t("connecting status label")), /* @__PURE__ */ React33.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+    }), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
       disabled: true,
       classNames: "order-2",
       "data-testid": "next"
-    }, t("next label")), /* @__PURE__ */ React31.createElement(Action, {
+    }, t("next label")), /* @__PURE__ */ React33.createElement(Action, {
       disabled: !active,
       onClick: onInvitationCancel,
       "data-testid": "invitation-rescuer-cancel"
@@ -2243,46 +2462,46 @@ var InvitationActions = ({
 };
 var InvitationRescuer = (props) => {
   const { Kind, invitationState, active, send } = props;
-  const { t } = useTranslation17("os");
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
+  const { t } = useTranslation19("os");
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React31.createElement(StepHeading, {
+  }, /* @__PURE__ */ React33.createElement(StepHeading, {
     className: descriptionText9
-  }, "There was a problem joining the space")), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+  }, "There was a problem joining the space")), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
     disabled: !active,
     "data-testid": "invitation-rescuer-blank-reset",
     onClick: () => send({
       type: `reset${Kind}Invitation`
     })
-  }, t("reset label")))) : /* @__PURE__ */ React31.createElement(InvitationActions, props));
+  }, t("reset label")))) : /* @__PURE__ */ React33.createElement(InvitationActions, props));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React32, { useState as useState6 } from "react";
-import { Input as Input2, useTranslation as useTranslation18 } from "@dxos/react-ui";
+import React34, { useState as useState7 } from "react";
+import { Input as Input2, useTranslation as useTranslation20 } from "@dxos/react-ui";
 var pinLength = 6;
 var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
   const disabled = !active || pending;
-  const { t } = useTranslation18("os");
+  const { t } = useTranslation20("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState6("");
+  const [authCode, setAuthCode] = useState7("");
   const onChange = ({ target: { value } }) => {
     setAuthCode(value);
     if (value.length === pinLength) {
       document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
     }
   };
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, invitationId && /* @__PURE__ */ React32.createElement(Emoji, {
+  }, invitationId && /* @__PURE__ */ React34.createElement(Emoji, {
     text: toEmoji(invitationId)
-  }), /* @__PURE__ */ React32.createElement(Input2.Root, failed && {
+  }), /* @__PURE__ */ React34.createElement(Input2.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React32.createElement(Input2.Label, {
+  }, /* @__PURE__ */ React34.createElement(Input2.Label, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React32.createElement(Input2.PinInput, {
+  }, /* @__PURE__ */ React34.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React34.createElement(Input2.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -2293,14 +2512,14 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
     "data-prevent-ios-autofocus": true,
     "data-testid": `${invitationType}-auth-code-input`,
     "data-1p-ignore": true
-  }), failed && /* @__PURE__ */ React32.createElement(Input2.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React34.createElement(Input2.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React32.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.createElement(Action, {
+  }, /* @__PURE__ */ React34.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, t("cancel label")), /* @__PURE__ */ React32.createElement(Action, {
+  }, t("cancel label")), /* @__PURE__ */ React34.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onInvitationAuthenticate?.(authCode),
@@ -2310,21 +2529,21 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx
-import React33, { useState as useState7 } from "react";
+import React35, { useState as useState8 } from "react";
 import { log as log7 } from "@dxos/log";
-import { useClient as useClient5 } from "@dxos/react-client";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx";
+import { useClient as useClient6 } from "@dxos/react-client";
+import { useTranslation as useTranslation21 } from "@dxos/react-ui";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx";
 var ResetIdentity = ({ send, active }) => {
-  const client = useClient5();
-  const { t } = useTranslation19("os");
-  const [validationMessage, setValidationMessage] = useState7("");
+  const client = useClient6();
+  const { t } = useTranslation21("os");
+  const [validationMessage, setValidationMessage] = useState8("");
   const resetIdentity = () => {
     void client.reset().then(() => send?.({
       type: "resetIdentity"
     }), (error) => {
       log7.catch(error, void 0, {
-        F: __dxlog_file7,
+        F: __dxlog_file8,
         L: 32,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2332,29 +2551,29 @@ var ResetIdentity = ({ send, active }) => {
       setValidationMessage(t("failed to reset identity message"));
     });
   };
-  return /* @__PURE__ */ React33.createElement(ResetIdentityImpl, {
+  return /* @__PURE__ */ React35.createElement(ResetIdentityImpl, {
     disabled: !active,
     validationMessage,
     onConfirm: () => resetIdentity()
   });
 };
 var ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }) => {
-  const { t } = useTranslation19("os");
+  const { t } = useTranslation21("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState7("");
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+  const [inputValue, setInputValue] = useState8("");
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React33.createElement(Input, {
+  }, /* @__PURE__ */ React35.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t("reset identity input label", {
+    label: /* @__PURE__ */ React35.createElement(StepHeading, null, t("reset identity input label", {
       confirmationValue
     })),
     disabled,
     "data-testid": "identity-input",
     placeholder: confirmationValue,
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
+  })), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(Action, {
     // TODO(wittjosiah): Probably make this red?
     variant: "primary",
     disabled: disabled || inputValue !== confirmationValue,
@@ -2367,7 +2586,7 @@ var ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }) => {
 var stepStyles = "pbs-1 pbe-3 pli-3";
 
 // packages/sdk/shell/src/styles/invitationStatusStyles.ts
-import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
+import { Invitation as Invitation7 } from "@dxos/react-client/invitations";
 var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
 var activeBgColor = "bg-primary-500 dark:bg-primary-400";
 var successBgColor = "bg-success-500 dark:bg-success-400";
@@ -2383,55 +2602,55 @@ var activeStrokeColor = "stroke-primary-400 dark:stroke-primary-150";
 var successStrokeColor = "stroke-success-300 dark:stroke-primary-400";
 var errorStrokeColor = "stroke-error-300 dark:stroke-error-500";
 var cancelledStrokeColor = "stroke-warning-300 dark:stroke-warning-500";
-var resolvedStrokeColor = (status) => status === Invitation6.State.ERROR ? errorStrokeColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
-var resolvedBgColor = (status) => status === Invitation6.State.ERROR ? errorBgColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledBgColor : successBgColor;
-var resolvedTextColor = (status) => status === Invitation6.State.ERROR ? errorTextColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledTextColor : successTextColor;
+var resolvedStrokeColor = (status) => status === Invitation7.State.ERROR ? errorStrokeColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation7.State.ERROR ? errorBgColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation7.State.ERROR ? errorTextColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledTextColor : successTextColor;
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
 var JoinPanelImpl = (props) => {
   const { titleId, send, activeView, failed, mode, unredeemedCodes, invitationStates, succeededKeys, failReasons, onExit, onHaloDone, onSpaceDone, exitActionParent, doneActionParent, onHaloInvitationCancel, onSpaceInvitationCancel, onHaloInvitationAuthenticate, onSpaceInvitationAuthenticate, IdentityInput: IdentityInputComponent = IdentityInput, ResetIdentity: ResetIdentityComponent = ResetIdentity } = props;
-  return /* @__PURE__ */ React34.createElement(DensityProvider3, {
+  return /* @__PURE__ */ React36.createElement(DensityProvider3, {
     density: "fine"
-  }, mode !== "halo-only" && /* @__PURE__ */ React34.createElement(JoinHeading, {
+  }, mode !== "halo-only" && /* @__PURE__ */ React36.createElement(JoinHeading, {
     titleId,
     mode,
     onExit,
     exitActionParent
-  }), /* @__PURE__ */ React34.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
     focusManaged: true,
     activeView
-  }, /* @__PURE__ */ React34.createElement(Viewport.Views, null, /* @__PURE__ */ React34.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "addition method chooser"
-  }, /* @__PURE__ */ React34.createElement(AdditionMethodChooser, {
+  }, /* @__PURE__ */ React36.createElement(AdditionMethodChooser, {
     send,
     active: activeView === "addition method chooser"
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "reset identity confirmation"
-  }, /* @__PURE__ */ React34.createElement(ResetIdentityComponent, {
+  }, /* @__PURE__ */ React36.createElement(ResetIdentityComponent, {
     send,
     method: "reset identity",
     active: activeView === "reset identity confirmation"
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "create identity input"
-  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
     send,
     method: "create identity",
     active: activeView === "create identity input"
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "recover identity input"
-  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
     send,
     method: "recover identity",
     active: activeView === "recover identity input"
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation input"
-  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation input",
@@ -2441,20 +2660,20 @@ var JoinPanelImpl = (props) => {
     ...succeededKeys?.Halo && {
       succeededKeys: succeededKeys.Halo
     }
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation rescuer"
-  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation rescuer",
     invitationState: invitationStates?.Halo,
     onInvitationCancel: onHaloInvitationCancel,
     failReason: failReasons?.Halo
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation authenticator"
-  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation authenticator",
@@ -2463,28 +2682,28 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Halo") && {
       failed: true
     }
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation accepted"
-  }, /* @__PURE__ */ React34.createElement(InvitationAccepted, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAccepted, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation accepted",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "identity added"
-  }, /* @__PURE__ */ React34.createElement(IdentityAdded, {
+  }, /* @__PURE__ */ React36.createElement(IdentityAdded, {
     send,
     mode,
     active: activeView === "identity added",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation input"
-  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
     send,
     Kind: "Space",
     active: activeView === "space invitation input",
@@ -2496,20 +2715,20 @@ var JoinPanelImpl = (props) => {
     },
     onExit,
     exitActionParent
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation rescuer"
-  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
     send,
     Kind: "Space",
     active: activeView === "space invitation rescuer",
     invitationState: invitationStates?.Space,
     onInvitationCancel: onSpaceInvitationCancel,
     failReason: failReasons?.Space
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation authenticator"
-  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
     send,
     Kind: "Space",
     active: activeView === "space invitation authenticator",
@@ -2518,10 +2737,10 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Space") && {
       failed: true
     }
-  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation accepted"
-  }, /* @__PURE__ */ React34.createElement(InvitationAccepted, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAccepted, {
     send,
     Kind: "Space",
     active: activeView === "space invitation accepted",
@@ -2530,7 +2749,7 @@ var JoinPanelImpl = (props) => {
   })))));
 };
 var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone }) => {
-  const client = useClient6();
+  const client = useClient7();
   const identity = useIdentity2();
   const { hasIosKeyboard } = useThemeContext3();
   const titleId = useId7("joinPanel__heading", propsTitleId);
@@ -2545,12 +2764,11 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
       }
     }
   });
-  console.log("[joinState]", joinState);
-  useEffect4(() => {
+  useEffect5(() => {
     const subscription = joinService.subscribe((state) => {
       log8("[state]", state, {
-        F: __dxlog_file8,
-        L: 200,
+        F: __dxlog_file9,
+        L: 198,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2559,7 +2777,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
   }, [
     joinService
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     const stateStack = joinState.configuration[0].id.split(".");
     const innermostState = stateStack[stateStack.length - 1];
     const autoFocusValue = innermostState === "finishingJoining" ? "successSpaceInvitation" : innermostState;
@@ -2740,27 +2958,29 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
   }), [
     joinState
   ]);
-  const onHaloDone = useCallback6(() => {
+  const onHaloDone = useCallback7(() => {
     propsOnDone?.({
       identityKey: joinState.context.halo.invitation?.identityKey ?? null,
       swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
-      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null
+      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+      target: joinState.context.halo.invitation?.target ?? null
     });
   }, [
     joinState,
     propsOnDone
   ]);
-  const onSpaceDone = useCallback6(() => {
+  const onSpaceDone = useCallback7(() => {
     propsOnDone?.({
       identityKey: joinState.context.space.invitation?.identityKey ?? null,
       swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
-      spaceKey: joinState.context.space.invitation?.spaceKey ?? null
+      spaceKey: joinState.context.space.invitation?.spaceKey ?? null,
+      target: joinState.context.space.invitation?.target ?? null
     });
   }, [
     joinState,
     propsOnDone
   ]);
-  return /* @__PURE__ */ React34.createElement(JoinPanelImpl, {
+  return /* @__PURE__ */ React36.createElement(JoinPanelImpl, {
     titleId,
     mode,
     send: joinSend,
@@ -2799,16 +3019,16 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 import { Planet } from "@phosphor-icons/react";
-import React36, { useEffect as useEffect5, useMemo as useMemo5 } from "react";
+import React38, { useEffect as useEffect6, useMemo as useMemo5 } from "react";
 import { log as log10 } from "@dxos/log";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
-import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation23 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
 import { useMachine as useMachine3 } from "@xstate/react";
 import { assign as assign3, createMachine as createMachine3 } from "xstate";
 import { log as log9 } from "@dxos/log";
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
 var spaceMachine = createMachine3({
   id: "space",
   predictableActionArguments: true,
@@ -2849,7 +3069,7 @@ var spaceMachine = createMachine3({
         event,
         context
       }, {
-        F: __dxlog_file9,
+        F: __dxlog_file10,
         L: 53,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2868,21 +3088,21 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React35, { useCallback as useCallback7, useState as useState8 } from "react";
+import React37, { useCallback as useCallback8, useState as useState9 } from "react";
 import { useConfig } from "@dxos/react-client";
 import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client/echo";
-import { Invitation as Invitation7, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
-import { ScrollArea, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { Invitation as Invitation8, InvitationEncoder as InvitationEncoder4 } from "@dxos/react-client/invitations";
+import { ScrollArea, useTranslation as useTranslation22 } from "@dxos/react-ui";
 import { descriptionText as descriptionText10, mx as mx21 } from "@dxos/react-ui-theme";
 var activeActionKey = "dxos:react-shell/space-manager/active-action";
 var SpaceManager = (props) => {
-  const { space } = props;
-  const { t } = useTranslation20("os");
+  const { space, target } = props;
+  const { t } = useTranslation22("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
-  const onInvitationEvent = useCallback7((invitation) => {
-    const invitationCode = InvitationEncoder3.encode(invitation);
-    if (invitation.state === Invitation7.State.CONNECTING) {
+  const onInvitationEvent = useCallback8((invitation) => {
+    const invitationCode = InvitationEncoder4.encode(invitation);
+    if (invitation.state === Invitation8.State.CONNECTING) {
       console.log(JSON.stringify({
         invitationCode,
         authCode: invitation.authCode
@@ -2894,10 +3114,11 @@ var SpaceManager = (props) => {
       label: t("invite one label"),
       description: t("invite one description"),
       icon: UserPlus,
-      onClick: useCallback7(() => {
+      onClick: useCallback8(() => {
         const invitation = space.share?.({
-          type: Invitation7.Type.INTERACTIVE,
-          authMethod: Invitation7.AuthMethod.SHARED_SECRET
+          type: Invitation8.Type.INTERACTIVE,
+          authMethod: Invitation8.AuthMethod.SHARED_SECRET,
+          target
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
           invitation.subscribe(onInvitationEvent);
@@ -2910,10 +3131,11 @@ var SpaceManager = (props) => {
       label: t("invite many label"),
       description: t("invite many description"),
       icon: UsersThree,
-      onClick: useCallback7(() => {
+      onClick: useCallback8(() => {
         const invitation = space.share?.({
-          type: Invitation7.Type.MULTIUSE,
-          authMethod: Invitation7.AuthMethod.NONE
+          type: Invitation8.Type.MULTIUSE,
+          authMethod: Invitation8.AuthMethod.NONE,
+          target
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
           invitation.subscribe(onInvitationEvent);
@@ -2923,7 +3145,7 @@ var SpaceManager = (props) => {
       ])
     }
   };
-  return /* @__PURE__ */ React35.createElement(SpaceManagerImpl, {
+  return /* @__PURE__ */ React37.createElement(SpaceManagerImpl, {
     ...props,
     invitations,
     inviteActions
@@ -2932,7 +3154,7 @@ var SpaceManager = (props) => {
 var headingFragment = "pis-3 pie-1 plb-1 mbe-1 font-medium";
 var SpaceManagerImpl = (props) => {
   const { active, space, createInvitationUrl, send, inviteActions: propsInviteActions, invitations, showInactiveInvitations, SpaceMemberList: SpaceMemberListComponent = SpaceMemberList, InvitationList: InvitationListComponent = InvitationList } = props;
-  const { t } = useTranslation20("os");
+  const { t } = useTranslation22("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -2942,34 +3164,34 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState8(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const [activeAction, setInternalActiveAction] = useState9(localStorage.getItem(activeActionKey) ?? "inviteOne");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
   };
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
-    Invitation7.State.CANCELLED
+    Invitation8.State.CANCELLED
   ].includes(invitation.get().state));
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
-  }, /* @__PURE__ */ React35.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
-  }, !!visibleInvitations?.length && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("h3", {
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("h3", {
     className: mx21(headingFragment, descriptionText10)
-  }, t("invitation list heading")), /* @__PURE__ */ React35.createElement(InvitationListComponent, {
+  }, t("invitation list heading")), /* @__PURE__ */ React37.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
     invitations: visibleInvitations ?? [],
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
-  }), /* @__PURE__ */ React35.createElement("h3", {
+  }), /* @__PURE__ */ React37.createElement("h3", {
     className: mx21(headingFragment, descriptionText10, "mbs-2")
-  }, t("space member list heading"))), /* @__PURE__ */ React35.createElement(SpaceMemberListComponent, {
+  }, t("space member list heading"))), /* @__PURE__ */ React37.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
-  })), /* @__PURE__ */ React35.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React37.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React35.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(BifurcatedAction, {
+  }, /* @__PURE__ */ React37.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(BifurcatedAction, {
     disabled: !active,
     actions: inviteActions,
     activeAction,
@@ -2979,47 +3201,48 @@ var SpaceManagerImpl = (props) => {
 };
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
 var SpacePanelHeading = ({ titleId, space, onDone }) => {
-  const { t } = useTranslation21("os");
+  const { t } = useTranslation23("os");
   const name = space.properties.name;
-  return /* @__PURE__ */ React36.createElement(Heading, {
+  return /* @__PURE__ */ React38.createElement(Heading, {
     titleId,
     title: t("space panel heading"),
-    corner: /* @__PURE__ */ React36.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React38.createElement(CloseButton, {
       "data-testid": "identity-panel-done",
       onDone
     })
-  }, /* @__PURE__ */ React36.createElement("div", {
+  }, /* @__PURE__ */ React38.createElement("div", {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
-  }, /* @__PURE__ */ React36.createElement(Planet, {
+  }, /* @__PURE__ */ React38.createElement(Planet, {
     size: 32
-  }), /* @__PURE__ */ React36.createElement("div", {
+  }), /* @__PURE__ */ React38.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
 };
 var SpacePanelImpl = (props) => {
-  const { titleId, activeView, space, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
-  return /* @__PURE__ */ React36.createElement(DensityProvider4, {
+  const { titleId, activeView, space, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
+  return /* @__PURE__ */ React38.createElement(DensityProvider4, {
     density: "fine"
-  }, /* @__PURE__ */ React36.createElement(SpacePanelHeading, {
+  }, /* @__PURE__ */ React38.createElement(SpacePanelHeading, {
     ...rest,
     titleId,
     space
-  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
     id: "space manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React36.createElement(SpaceManagerComponent, {
+  }, /* @__PURE__ */ React38.createElement(SpaceManagerComponent, {
     active: activeView === "space manager",
     space,
+    target,
     ...rest
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     id: "space invitation manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React36.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React38.createElement(InvitationManagerComponent, {
     active: activeView === "space invitation manager",
     ...rest,
     invitationUrl: props.invitationUrl
@@ -3027,7 +3250,7 @@ var SpacePanelImpl = (props) => {
 };
 var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus3(invitation);
-  return /* @__PURE__ */ React36.createElement(SpacePanelImpl, {
+  return /* @__PURE__ */ React38.createElement(SpacePanelImpl, {
     ...props,
     ...invitationStatus,
     invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
@@ -3040,11 +3263,11 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
       space: props.space
     }
   });
-  useEffect5(() => {
+  useEffect6(() => {
     const subscription = spaceService.subscribe((state) => {
       log10("[state]", state, {
-        F: __dxlog_file10,
-        L: 92,
+        F: __dxlog_file11,
+        L: 94,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3072,62 +3295,65 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
     titleId,
     createInvitationUrl
   };
-  return spaceState.context.invitation ? /* @__PURE__ */ React36.createElement(SpacePanelWithInvitationImpl, {
-    ...implProps,
-    invitation: spaceState.context.invitation
-  }) : /* @__PURE__ */ React36.createElement(SpacePanelImpl, implProps);
+  return spaceState.context.invitation ? (
+    // TODO(wittjosiah): Unused? Remove?
+    /* @__PURE__ */ React38.createElement(SpacePanelWithInvitationImpl, {
+      ...implProps,
+      invitation: spaceState.context.invitation
+    })
+  ) : /* @__PURE__ */ React38.createElement(SpacePanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
   const titleId = useId9("spaceDialog__title");
-  return /* @__PURE__ */ React37.createElement(Dialog.Root, {
+  return /* @__PURE__ */ React39.createElement(Dialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || props.onDone?.()
-  }, /* @__PURE__ */ React37.createElement(Dialog.Portal, null, /* @__PURE__ */ React37.createElement(Dialog.Overlay, null, /* @__PURE__ */ React37.createElement(Dialog.Content, {
+  }, /* @__PURE__ */ React39.createElement(Dialog.Portal, null, /* @__PURE__ */ React39.createElement(Dialog.Overlay, null, /* @__PURE__ */ React39.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React37.createElement(ClipboardProvider, null, /* @__PURE__ */ React37.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React39.createElement(ClipboardProvider, null, /* @__PURE__ */ React39.createElement(IdentityPanel, {
     ...props,
     titleId,
-    doneActionParent: /* @__PURE__ */ React37.createElement(Dialog.Close, {
+    doneActionParent: /* @__PURE__ */ React39.createElement(Dialog.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
-import React38 from "react";
+import React40 from "react";
 import { AlertDialog, useId as useId10, useVisualViewport } from "@dxos/react-ui";
 var JoinDialog = (joinPanelProps) => {
   const titleId = useId10("joinDialog__title");
   const { height } = useVisualViewport();
-  return /* @__PURE__ */ React38.createElement(AlertDialog.Root, {
+  return /* @__PURE__ */ React40.createElement(AlertDialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
-  }, /* @__PURE__ */ React38.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React38.createElement(AlertDialog.Overlay, {
+  }, /* @__PURE__ */ React40.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React40.createElement(AlertDialog.Overlay, {
     classNames: "backdrop-blur",
     ...height && {
       style: {
         blockSize: `${height}px`
       }
     }
-  }, /* @__PURE__ */ React38.createElement(AlertDialog.Content, {
+  }, /* @__PURE__ */ React40.createElement(AlertDialog.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React38.createElement(JoinPanel, {
+  }, /* @__PURE__ */ React40.createElement(JoinPanel, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React38.createElement(AlertDialog.Cancel, {
+    exitActionParent: /* @__PURE__ */ React40.createElement(AlertDialog.Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React38.createElement(AlertDialog.Action, {
+    doneActionParent: /* @__PURE__ */ React40.createElement(AlertDialog.Action, {
       asChild: true
     })
   })))));
 };
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
-import React41, { StrictMode } from "react";
+import React43, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { ShellRuntimeImpl } from "@dxos/client-services";
@@ -3137,49 +3363,50 @@ import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
-import React40, { useEffect as useEffect6, useState as useState9 } from "react";
+import React42, { useEffect as useEffect7, useState as useState10 } from "react";
 import { log as log11 } from "@dxos/log";
 import { ShellDisplay, ShellLayout } from "@dxos/react-client";
 import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
-import React39 from "react";
+import React41 from "react";
 import { Dialog as Dialog2, useId as useId11 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId11("spaceDialog__title");
-  return /* @__PURE__ */ React39.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React41.createElement(Dialog2.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
-  }, /* @__PURE__ */ React39.createElement(Dialog2.Portal, null, /* @__PURE__ */ React39.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React39.createElement(Dialog2.Content, {
+  }, /* @__PURE__ */ React41.createElement(Dialog2.Portal, null, /* @__PURE__ */ React41.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React41.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React39.createElement(ClipboardProvider, null, /* @__PURE__ */ React39.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React41.createElement(ClipboardProvider, null, /* @__PURE__ */ React41.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React39.createElement(Dialog2.Close, {
+    doneActionParent: /* @__PURE__ */ React41.createElement(Dialog2.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
 var Shell = ({ runtime, origin }) => {
-  const [{ layout, invitationCode, spaceKey }, setLayout] = useState9({
+  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState10({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
-    spaceKey: runtime.spaceKey
+    spaceKey: runtime.spaceKey,
+    target: runtime.target
   });
   const space = useSpace2(spaceKey);
-  useEffect6(() => {
+  useEffect7(() => {
     return runtime.layoutUpdate.on((request) => setLayout(request));
   }, [
     runtime
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (layout === ShellLayout.SPACE && !space) {
       log11.warn("No space found for shell space invitations.", void 0, {
-        F: __dxlog_file11,
-        L: 30,
+        F: __dxlog_file12,
+        L: 31,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3200,7 +3427,7 @@ var Shell = ({ runtime, origin }) => {
   ]);
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
-      return /* @__PURE__ */ React40.createElement(JoinDialog, {
+      return /* @__PURE__ */ React42.createElement(JoinDialog, {
         mode: "halo-only",
         initialInvitationCode: invitationCode,
         onDone: () => {
@@ -3215,7 +3442,7 @@ var Shell = ({ runtime, origin }) => {
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
-      return /* @__PURE__ */ React40.createElement(IdentityDialog, {
+      return /* @__PURE__ */ React42.createElement(IdentityDialog, {
         createInvitationUrl: (invitationCode2) => `${origin}?deviceInvitationCode=${invitationCode2}`,
         onDone: async () => {
           await runtime.setAppContext({
@@ -3227,8 +3454,9 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.SPACE:
-      return space ? /* @__PURE__ */ React40.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React42.createElement(SpaceDialog, {
         space,
+        target,
         createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
         onDone: async () => {
           await runtime.setAppContext({
@@ -3240,12 +3468,14 @@ var Shell = ({ runtime, origin }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React40.createElement(JoinDialog, {
+      return /* @__PURE__ */ React42.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
+          const target2 = result?.target ?? void 0;
           await runtime.setAppContext({
             display: ShellDisplay.NONE,
-            spaceKey: result?.spaceKey ?? void 0
+            spaceKey: result?.spaceKey ?? void 0,
+            target: target2
           });
           runtime.setLayout({
             layout: ShellLayout.DEFAULT
@@ -3337,7 +3567,8 @@ var os = {
   "selecting identity heading": "Selecting identity",
   "devices heading": "Devices",
   "identity heading": "Profile settings",
-  "choose devices label": "Add device",
+  "choose add device label": "Add device",
+  "choose devices label": "Manage devices",
   "choose profile label": "Edit profile",
   "choose sign out label": "Sign out",
   "empty space members message": "There is nobody in this space yet.",
@@ -3388,25 +3619,25 @@ var runShell = async (config = new Config()) => {
     runtime.open(),
     client.initialize()
   ]);
-  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React41.createElement(StrictMode, null, /* @__PURE__ */ React41.createElement(ThemeProvider, {
+  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React43.createElement(StrictMode, null, /* @__PURE__ */ React43.createElement(ThemeProvider, {
     tx: defaultTx,
     resourceExtensions: [
       osTranslations
     ]
-  }, /* @__PURE__ */ React41.createElement(ClientContext.Provider, {
+  }, /* @__PURE__ */ React43.createElement(ClientContext.Provider, {
     value: {
       client,
       status: SystemStatus.ACTIVE
     }
-  }, /* @__PURE__ */ React41.createElement(ClipboardProvider, null, /* @__PURE__ */ React41.createElement(Tooltip3.Provider, null, /* @__PURE__ */ React41.createElement(Shell, {
+  }, /* @__PURE__ */ React43.createElement(ClipboardProvider, null, /* @__PURE__ */ React43.createElement(Tooltip3.Provider, null, /* @__PURE__ */ React43.createElement(Shell, {
     runtime,
     origin: location.origin
   })))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React42, { createContext as createContext2, useCallback as useCallback8, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
-import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient7 } from "@dxos/react-client";
+import React44, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState11 } from "react";
+import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient8 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
 import { mx as mx22 } from "@dxos/react-ui-theme";
 
@@ -3444,7 +3675,7 @@ var MemoryShellRuntime = class {
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
 var ShellContext = /* @__PURE__ */ createContext2({});
 var useShell = () => {
-  const client = useClient7();
+  const client = useClient8();
   const { runtime, setDisplay } = useContext2(ShellContext);
   const setLayout = async (layout, options) => {
     if (runtime) {
@@ -3465,9 +3696,9 @@ var useShell = () => {
   };
 };
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
-  const client = useClient7();
+  const client = useClient8();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState10(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState11(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -3493,7 +3724,7 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
     spaceInvitationCode,
     deviceInvitationCode
   ]);
-  const handleKeyDown = useCallback8((event) => {
+  const handleKeyDown = useCallback9((event) => {
     if (!space || !shellRuntime) {
       return;
     }
@@ -3514,7 +3745,7 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
     space,
     shellRuntime
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!shellRuntime) {
       return;
     }
@@ -3524,7 +3755,7 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
     shellRuntime,
     handleKeyDown
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!shellRuntime) {
       return;
     }
@@ -3537,12 +3768,12 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, shellRuntime && /* @__PURE__ */ React42.createElement("div", {
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, shellRuntime && /* @__PURE__ */ React44.createElement("div", {
     className: mx22(display === ShellDisplay2.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React42.createElement(Shell, {
+  }, /* @__PURE__ */ React44.createElement(Shell, {
     runtime: shellRuntime,
     origin: window.location.origin
-  })), /* @__PURE__ */ React42.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React44.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay