@dxos/shell 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/dist/lib/browser/react.mjs

@@ -571,7 +571,7 @@ import { Button as Button6, List as List2, useTranslation as useTranslation7 } f
 import { descriptionText as descriptionText4, getSize as getSize6, mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/DeviceList/DeviceListItem.tsx
-import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot, Database as Database2 } from "@phosphor-icons/react";
+import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot, Database as Database2, FirstAidKit } from "@phosphor-icons/react";
 import React9, { forwardRef as forwardRef2 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { Device, DeviceType, DeviceKind } from "@dxos/react-client/halo";
@@ -586,7 +586,7 @@ var iconProps = {
   x: 8,
   y: 8
 };
-var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, connectionState, onAgentDestroy, ...props }, forwardedRef) => {
+var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy, ...props }, forwardedRef) => {
   const { t } = useTranslation6("os");
   const fallbackValue = keyToFallback2(device.deviceKey);
   const labelId = useId3("identityListItem__label");
@@ -649,7 +649,12 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     onClick: onClickJoinExisting
   }, /* @__PURE__ */ React9.createElement(ShareFat, {
     className: getSize5(5)
-  }), t("choose join new identity label")), /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+    "data-testid": "device-list-item-current.recover",
+    onClick: onClickRecover
+  }, /* @__PURE__ */ React9.createElement(FirstAidKit, {
+    className: getSize5(5)
+  }), t("choose recover identity label")), /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
     "data-testid": "device-list-item-current.reset",
     onClick: onClickReset
   }, /* @__PURE__ */ React9.createElement(Power2, {
@@ -658,7 +663,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
 });
 
 // packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
-var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, onAgentDestroy }) => {
+var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, onAgentDestroy }) => {
   const { t } = useTranslation7("os");
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("h2", {
     className: mx7(descriptionText4, "text-center mbs-4")
@@ -668,6 +673,7 @@ var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickRe
       device,
       onClickEdit: () => onClickEdit?.(device),
       onClickReset,
+      onClickRecover,
       onClickJoinExisting,
       connectionState,
       onAgentDestroy
@@ -925,14 +931,14 @@ var InvitationList = ({ invitations, send, ...invitationProps }) => {
 var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
   const space = useSpace(spaceKey);
   const invitations = useSpaceInvitations(spaceKey);
-  const onClickRemove = useCallback3((invitation) => {
+  const handleClickRemove = useCallback3((invitation) => {
     void invitation.cancel();
   }, [
     space
   ]);
   return /* @__PURE__ */ React14.createElement(InvitationList, {
     invitations,
-    onClickRemove,
+    onClickRemove: handleClickRemove,
     createInvitationUrl,
     send
   });
@@ -1233,21 +1239,22 @@ var SpaceListItem = /* @__PURE__ */ forwardRef8(({ space, onClick }, ref) => {
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
-import React40 from "react";
+import React42 from "react";
 import { Dialog, useId as useId10 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import { Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
-import React28, { useEffect as useEffect4, useMemo as useMemo3, useState as useState8 } from "react";
+import { FirstAidKit as FirstAidKit2, Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
+import React29, { useEffect as useEffect4, useMemo as useMemo3, useState as useState9 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
-import { log as log5 } from "@dxos/log";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { log as log6 } from "@dxos/log";
 import { useClient as useClient6 } from "@dxos/react-client";
 import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
 import { useNetworkStatus, ConnectionState as ConnectionState2 } from "@dxos/react-client/mesh";
-import { Avatar as Avatar6, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip7, useId as useId6, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { Avatar as Avatar6, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip7, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
 import { getSize as getSize13 } from "@dxos/react-ui-theme";
-import { hexToEmoji as hexToEmoji3, hexToHue, keyToFallback as keyToFallback3 } from "@dxos/util";
+import { hexToEmoji as hexToEmoji4, hexToHue as hexToHue2, keyToFallback as keyToFallback3 } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
 import { useMachine } from "@xstate/react";
@@ -1282,6 +1289,7 @@ var identityMachine = createMachine({
     choosingAction: {},
     managingDeviceInvitation: {},
     confirmingResetStorage: {},
+    confirmingRecover: {},
     confirmingJoinNewIdentity: {}
   },
   on: {
@@ -1310,6 +1318,10 @@ var identityMachine = createMachine({
       target: ".confirmingJoinNewIdentity",
       actions: "log"
     },
+    chooseRecoverIdentity: {
+      target: ".confirmingRecover",
+      actions: "log"
+    },
     chooseResetStorage: {
       target: ".confirmingResetStorage",
       actions: "log"
@@ -1335,7 +1347,7 @@ var identityMachine = createMachine({
         context
       }, {
         F: __dxlog_file,
-        L: 96,
+        L: 98,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1392,12 +1404,22 @@ var IdentityActionChooser = (props) => {
       invitation
     });
   };
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
   return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
     ...props,
-    onCreateInvitationClick: createInvitation
+    onClickAdd: createInvitation,
+    onClickJoinExisting: () => send?.({
+      type: "chooseJoinNewIdentity"
+    }),
+    onClickRecover: isProduction ? void 0 : () => send?.({
+      type: "chooseRecoverIdentity"
+    }),
+    onClickReset: () => send?.({
+      type: "chooseResetStorage"
+    })
   });
 };
-var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, connectionState, agentHostingEnabled, ...agentProps }) => {
+var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled, onClickAdd, onClickJoinExisting, onClickRecover, onClickReset, ...agentProps }) => {
   const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType2.AGENT_MANAGED);
   return /* @__PURE__ */ React25.createElement("div", {
     role: "none",
@@ -1405,30 +1427,33 @@ var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, conne
   }, /* @__PURE__ */ React25.createElement(DeviceList, {
     devices,
     connectionState,
-    onClickAdd: onCreateInvitationClick,
-    onClickJoinExisting: () => send?.({
-      type: "chooseJoinNewIdentity"
-    }),
-    onClickReset: () => send?.({
-      type: "chooseResetStorage"
-    }),
+    onClickAdd,
+    onClickJoinExisting,
+    onClickRecover,
+    onClickReset,
     onAgentDestroy: agentProps.onAgentDestroy
   }), !managedDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, agentProps));
 };
 
+// packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
+import React26, { useState as useState5 } from "react";
+import { log as log3 } from "@dxos/log";
+import { useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
+
 // packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
 import { useClient as useClient5 } from "@dxos/react-client";
 
 // packages/sdk/shell/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 import { invariant } from "@dxos/invariant";
 import { QueryAgentStatusResponse } from "@dxos/protocols/proto/dxos/client/services";
 import { useClient as useClient3 } from "@dxos/react-client";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts";
 var useEdgeAgentHandlers = ({ identity }) => {
-  const [validationMessage, setValidationMessage] = useState5("");
-  const [lastReceivedStatus, setLastReceivedStatus] = useState5(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
-  const [agentStatus, setAgentStatus] = useState5("getting");
+  const [validationMessage, setValidationMessage] = useState6("");
+  const [lastReceivedStatus, setLastReceivedStatus] = useState6(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
+  const [agentStatus, setAgentStatus] = useState6("getting");
   const client = useClient3();
   const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
   const handleStatus = (status) => {
@@ -1505,15 +1530,15 @@ var useEdgeAgentHandlers = ({ identity }) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useState as useState7 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log3 } from "@dxos/log";
+import { log as log4 } from "@dxos/log";
 import { useClient as useClient4, useAgentHostingClient } from "@dxos/react-client";
 import { Invitation as Invitation3, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts";
 var useKubeAgentHandlers = ({ invitations, identity }) => {
-  const [validationMessage, setValidationMessage] = useState6("");
-  const [agentStatus, setAgentStatus] = useState6("getting");
+  const [validationMessage, setValidationMessage] = useState7("");
+  const [agentStatus, setAgentStatus] = useState7("getting");
   const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient4();
   const updateAgentStatus = async () => {
@@ -1596,7 +1621,7 @@ var useKubeAgentHandlers = ({ invitations, identity }) => {
   const handleAgentCreate = useCallback4(async (invitation) => {
     const invitationCode = InvitationEncoder2.encode(invitation);
     if (invitation.state === Invitation3.State.CONNECTING) {
-      log3.info(JSON.stringify({
+      log4.info(JSON.stringify({
         invitationCode,
         authCode: invitation.authCode
       }), void 0, {
@@ -1643,11 +1668,11 @@ var useAgentHandlers = (params) => {
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
 import { Check as Check4, X as X3 } from "@phosphor-icons/react";
-import React26, { useMemo as useMemo2 } from "react";
+import React27, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
-import { useId as useId5, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { useId as useId5, useTranslation as useTranslation12 } from "@dxos/react-ui";
 import { descriptionText as descriptionText8, getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
-import { hexToEmoji as hexToEmoji2 } from "@dxos/util";
+import { hexToEmoji as hexToEmoji3 } from "@dxos/util";
 
 // packages/sdk/shell/src/util/invitationStatusValue.ts
 import { Invitation as Invitation4 } from "@dxos/react-client/invitations";
@@ -1692,17 +1717,17 @@ var invitationStatusValue = /* @__PURE__ */ new Map([
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
 var InvitationManagerView = ({ children, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(Viewport.View, {
+  return /* @__PURE__ */ React27.createElement(Viewport.View, {
     ...props,
     classNames: "grow flex flex-col justify-around items-center"
   }, children);
 };
 var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCode, id = "0" }) => {
-  const { t } = useTranslation11("os");
+  const { t } = useTranslation12("os");
   const qrLabel = useId5("invitation-manager__qr-code");
   const statusValue = multiUse ? 0 : invitationStatusValue.get(status) ?? 0;
   const showAuthCode = statusValue === 3;
-  const emoji = hexToEmoji2(id);
+  const emoji = hexToEmoji3(id);
   const activeView = useMemo2(() => {
     if (multiUse) {
       return "showing qr";
@@ -1719,18 +1744,18 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
   }, [
     statusValue
   ]);
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Viewport.Root, {
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Viewport.Root, {
     activeView,
     classNames: "grow plb-1"
-  }, /* @__PURE__ */ React26.createElement(Viewport.Views, null, /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(InvitationManagerView, {
     id: "showing qr",
     emoji
-  }, /* @__PURE__ */ React26.createElement("p", {
+  }, /* @__PURE__ */ React27.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React26.createElement("div", {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: mx20(descriptionText8, "is-full max-is-[14rem] relative")
-  }, /* @__PURE__ */ React26.createElement(QR, {
+  }, /* @__PURE__ */ React27.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
@@ -1738,31 +1763,31 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
-  }, invitationUrl ?? "never"), /* @__PURE__ */ React26.createElement(Centered, null, /* @__PURE__ */ React26.createElement(Emoji, {
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React27.createElement(Centered, null, /* @__PURE__ */ React27.createElement(Emoji, {
     text: emoji
-  }))), /* @__PURE__ */ React26.createElement("span", {
+  }))), /* @__PURE__ */ React27.createElement("span", {
     id: qrLabel,
     className: "sr-only"
-  }, t("qr label")), /* @__PURE__ */ React26.createElement(CopyButton, {
+  }, t("qr label")), /* @__PURE__ */ React27.createElement(CopyButton, {
     variant: "ghost",
     value: invitationUrl ?? "never"
-  })), /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
     id: "showing auth code"
-  }, /* @__PURE__ */ React26.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React26.createElement(AuthCode, {
+  }, /* @__PURE__ */ React27.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React27.createElement(AuthCode, {
     code: authCode,
     large: true,
     classNames: "text-black dark:text-white"
-  }), /* @__PURE__ */ React26.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React26.createElement(Emoji, {
+  }), /* @__PURE__ */ React27.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React27.createElement(Emoji, {
     text: emoji
-  })), /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
     id: "showing final"
-  }, statusValue > 0 ? /* @__PURE__ */ React26.createElement(Check4, {
+  }, statusValue > 0 ? /* @__PURE__ */ React27.createElement(Check4, {
     className: mx20("m-1.5", getSize11(6))
-  }) : /* @__PURE__ */ React26.createElement(X3, {
+  }) : /* @__PURE__ */ React27.createElement(X3, {
     className: mx20("m-1.5", getSize11(6))
-  })))), /* @__PURE__ */ React26.createElement(Actions, {
+  })))), /* @__PURE__ */ React27.createElement(Actions, {
     classNames: "mbs-4"
-  }, /* @__PURE__ */ React26.createElement(Action, {
+  }, /* @__PURE__ */ React27.createElement(Action, {
     disabled: !active,
     onClick: () => send?.({
       type: "deselectInvitation"
@@ -1772,19 +1797,19 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
 
 // packages/sdk/shell/src/steps/ConfirmReset.tsx
 import { Warning } from "@phosphor-icons/react";
-import React27, { useState as useState7 } from "react";
-import { log as log4 } from "@dxos/log";
-import { Message, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import React28, { useState as useState8 } from "react";
+import { log as log5 } from "@dxos/log";
+import { Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
 import { getSize as getSize12, mx as mx21 } from "@dxos/react-ui-theme";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/steps/ConfirmReset.tsx";
 var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
-  const { t } = useTranslation12("os");
-  const [validationMessage, setValidationMessage] = useState7("");
-  const [pending, setPending] = useState7(false);
+  const { t } = useTranslation13("os");
+  const [validationMessage, setValidationMessage] = useState8("");
+  const [pending, setPending] = useState8(false);
   const processReset = async () => {
     setPending(true);
     return onConfirm?.().then(() => setPending(false), (error) => {
-      log4.catch(error, void 0, {
+      log5.catch(error, void 0, {
         F: __dxlog_file5,
         L: 38,
         S: void 0,
@@ -1794,7 +1819,7 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
       setPending(false);
     });
   };
-  return /* @__PURE__ */ React27.createElement(ConfirmResetImpl, {
+  return /* @__PURE__ */ React28.createElement(ConfirmResetImpl, {
     disabled: !active,
     pending,
     validationMessage,
@@ -1804,22 +1829,22 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
   });
 };
 var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
-  const { t } = useTranslation12("os");
+  const { t } = useTranslation13("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState7("");
-  const testIdAffix = mode === "join new identity" ? "join-new-identity" : "reset-storage";
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", {
+  const [inputValue, setInputValue] = useState8("");
+  const testIdAffix = mode === "join new identity" ? "join-new-identity" : mode === "recover" ? "recover" : "reset-storage";
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     className: "grow flex flex-col gap-2 justify-center"
-  }, /* @__PURE__ */ React27.createElement(Message.Root, {
+  }, /* @__PURE__ */ React28.createElement(Message.Root, {
     valence: "error"
-  }, /* @__PURE__ */ React27.createElement(Message.Title, null, /* @__PURE__ */ React27.createElement(Warning, {
+  }, /* @__PURE__ */ React28.createElement(Message.Title, null, /* @__PURE__ */ React28.createElement(Warning, {
     className: mx21(getSize12(6), "inline mie-2")
-  }), t("sign out chooser title")), /* @__PURE__ */ React27.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React27.createElement(Input, {
+  }), t("sign out chooser title")), /* @__PURE__ */ React28.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React28.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React27.createElement(StepHeading, {
+    label: /* @__PURE__ */ React28.createElement(StepHeading, {
       className: "text-start mlb-2"
-    }, t(mode === "join new identity" ? "join new identity input label" : "reset storage input label", {
+    }, t(mode === "join new identity" ? "join new identity input label" : mode === "recover" ? "recover reset input label" : "reset storage input label", {
       confirmationValue
     })),
     disabled,
@@ -1828,11 +1853,11 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
       confirmationValue
     }),
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React27.createElement(Actions, null, onCancel && /* @__PURE__ */ React27.createElement(Action, {
+  })), /* @__PURE__ */ React28.createElement(Actions, null, onCancel && /* @__PURE__ */ React28.createElement(Action, {
     disabled,
     onClick: onCancel,
     "data-testid": `${testIdAffix}.reset-identity-cancel`
-  }, t("cancel label")), onConfirm && /* @__PURE__ */ React27.createElement(Action, {
+  }, t("cancel label")), onConfirm && /* @__PURE__ */ React28.createElement(Action, {
     variant: "destructive",
     disabled: disabled || pending || inputValue !== confirmationValue,
     onClick: onConfirm,
@@ -1843,17 +1868,18 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
 var viewStyles = "pbs-1 pbe-3 pli-3";
-var getHueValue = (identity) => identity?.profile?.data?.hue || hexToHue(identity?.identityKey.toHex() ?? "0");
-var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji3(identity?.identityKey.toHex() ?? "0");
+var getHueValue = (identity) => identity?.profile?.data?.hue || hexToHue2(identity?.identityKey.toHex() ?? "0");
+var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji4(identity?.identityKey.toHex() ?? "0");
 var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
+  const client = useClient6();
   const fallbackValue = keyToFallback3(identity.identityKey);
-  const { t } = useTranslation13("os");
-  const [displayName, setDisplayName] = useState8(identity.profile?.displayName ?? "");
-  const [emoji, setEmojiDirectly] = useState8(getEmojiValue(identity));
-  const [hue, setHueDirectly] = useState8(getHueValue(identity));
+  const { t } = useTranslation14("os");
+  const [displayName, setDisplayName] = useState9(identity.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = useState9(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState9(getHueValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity.identityKey.toHex();
-  const copied = textValue === identityHex;
+  const publicKeyCopied = textValue === identityHex;
   const setEmoji = (nextEmoji) => {
     setEmojiDirectly(nextEmoji);
     void onUpdateProfile?.({
@@ -1874,31 +1900,44 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
       }
     });
   };
+  const handleRecoveryCode = async () => {
+    invariant3(client.services.services.IdentityService, "IdentityService not available", {
+      F: __dxlog_file6,
+      L: 76,
+      S: void 0,
+      A: [
+        "client.services.services.IdentityService",
+        "'IdentityService not available'"
+      ]
+    });
+    const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+    void setTextValue(seedphrase);
+  };
   const isConnected = connectionState === ConnectionState2.ONLINE;
-  const debug = true;
-  return /* @__PURE__ */ React28.createElement(Heading, {
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
+  return /* @__PURE__ */ React29.createElement(Heading, {
     titleId,
     title,
-    corner: /* @__PURE__ */ React28.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React29.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React28.createElement(Avatar6.Root, {
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Root, {
     size: 16,
     variant: "circle",
     status: isConnected ? "active" : "error",
     hue: hue || fallbackValue.hue
-  }, /* @__PURE__ */ React28.createElement(Toolbar3.Root, {
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
     classNames: "flex justify-center"
-  }, /* @__PURE__ */ React28.createElement(Avatar6.Frame, {
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Frame, {
     classNames: "relative z-[2] -mli-4 chromatic-ignore"
-  }, /* @__PURE__ */ React28.createElement(Avatar6.Fallback, {
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Fallback, {
     text: emoji || fallbackValue.emoji
-  }))), /* @__PURE__ */ React28.createElement(Avatar6.Label, {
+  }))), /* @__PURE__ */ React29.createElement(Avatar6.Label, {
     classNames: "sr-only",
     "data-testid": "identityHeading.displayName"
-  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React28.createElement(Input2.Root, null, /* @__PURE__ */ React28.createElement(Input2.Label, {
+  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React29.createElement(Input2.Root, null, /* @__PURE__ */ React29.createElement(Input2.Label, {
     srOnly: true
-  }, t("display name input label")), /* @__PURE__ */ React28.createElement(Input2.TextInput, {
+  }, t("display name input label")), /* @__PURE__ */ React29.createElement(Input2.TextInput, {
     variant: "subdued",
     "data-testid": "display-name-input",
     placeholder: t("display name input placeholder"),
@@ -1909,51 +1948,61 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
       ...identity.profile,
       displayName: value
     })
-  })), /* @__PURE__ */ React28.createElement(Toolbar3.Root, {
+  })), /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
     classNames: "flex justify-center items-center gap-1 pt-3"
-  }, /* @__PURE__ */ React28.createElement(EmojiPickerToolbarButton, {
+  }, /* @__PURE__ */ React29.createElement(EmojiPickerToolbarButton, {
     emoji,
     onChangeEmoji: setEmoji,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React28.createElement(HuePickerToolbarButton, {
+  }), /* @__PURE__ */ React29.createElement(HuePickerToolbarButton, {
     hue,
     onChangeHue: setHue,
     classNames: "bs-[--rail-action]"
-  }), debug && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Tooltip7.Root, null, /* @__PURE__ */ React28.createElement(Tooltip7.Trigger, {
+  }), /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Toolbar3.Button, {
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
     classNames: "bs-[--rail-action]",
     "data-testid": "update-profile-form-copy-key",
     onClick: () => setTextValue(identityHex)
-  }, /* @__PURE__ */ React28.createElement("span", {
+  }, /* @__PURE__ */ React29.createElement("span", {
     className: "sr-only"
-  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React28.createElement(Key, {
+  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React29.createElement(Key, {
+    className: getSize13(5)
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))), !isProduction && /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: "bs-[--rail-action]",
+    onClick: handleRecoveryCode
+  }, /* @__PURE__ */ React29.createElement(FirstAidKit2, {
     className: getSize13(5)
-  }))), /* @__PURE__ */ React28.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React28.createElement(Tooltip7.Content, {
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t(copied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React28.createElement(Tooltip7.Arrow, null))), /* @__PURE__ */ React28.createElement(Tooltip7.Root, null, /* @__PURE__ */ React28.createElement(Tooltip7.Trigger, {
+  }, t("create recovery code label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))), /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Toolbar3.Button, {
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
     classNames: [
       "bs-[--rail-action]",
       !isConnected && "text-error-500"
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
-  }, /* @__PURE__ */ React28.createElement("span", {
+  }, /* @__PURE__ */ React29.createElement("span", {
     className: "sr-only"
-  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React28.createElement(PlugsConnected, {
+  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React29.createElement(PlugsConnected, {
     className: getSize13(5)
-  }) : /* @__PURE__ */ React28.createElement(Plugs, {
+  }) : /* @__PURE__ */ React29.createElement(Plugs, {
     className: getSize13(5)
-  }))), /* @__PURE__ */ React28.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React28.createElement(Tooltip7.Content, {
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React28.createElement(Tooltip7.Arrow, null)))))))));
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))))));
 };
 var IdentityPanelImpl = (props) => {
-  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
-  const { t } = useTranslation13("os");
+  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onRecover, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
+  const { t } = useTranslation14("os");
   const title = useMemo3(() => {
     switch (activeView) {
       case "device invitation manager":
@@ -1966,7 +2015,7 @@ var IdentityPanelImpl = (props) => {
     t
   ]);
   const onCancelReset = () => rest.send?.("unchooseAction");
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(IdentityHeading, {
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
@@ -1974,35 +2023,44 @@ var IdentityPanelImpl = (props) => {
     onUpdateProfile,
     connectionState,
     onChangeConnectionState
-  }), /* @__PURE__ */ React28.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React29.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React28.createElement(Viewport.Views, null, /* @__PURE__ */ React28.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React29.createElement(Viewport.Views, null, /* @__PURE__ */ React29.createElement(Viewport.View, {
     id: "identity action chooser",
     classNames: viewStyles
-  }, /* @__PURE__ */ React28.createElement(IdentityActionChooserComponent, {
+  }, /* @__PURE__ */ React29.createElement(IdentityActionChooserComponent, {
     active: activeView === "identity action chooser",
     ...rest,
     connectionState
-  })), /* @__PURE__ */ React28.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     id: "device invitation manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React28.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React29.createElement(InvitationManagerComponent, {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React28.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm join new identity"
-  }, /* @__PURE__ */ React28.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
     active: activeView === "confirm join new identity",
     ...rest,
     mode: "join new identity",
     onConfirm: onJoinNewIdentity,
     onCancel: onCancelReset
-  })), /* @__PURE__ */ React28.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm recover"
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+    active: activeView === "confirm recover",
+    ...rest,
+    mode: "recover",
+    onConfirm: onRecover,
+    onCancel: onCancelReset
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm reset storage"
-  }, /* @__PURE__ */ React28.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
     active: activeView === "confirm reset storage",
     ...rest,
     mode: "reset storage",
@@ -2012,7 +2070,7 @@ var IdentityPanelImpl = (props) => {
 };
 var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus2(invitation);
-  return /* @__PURE__ */ React28.createElement(IdentityPanelImpl, {
+  return /* @__PURE__ */ React29.createElement(IdentityPanelImpl, {
     ...props,
     ...invitationStatus
   });
@@ -2028,9 +2086,9 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     invitations
   });
   if (!identity) {
-    log5.error("IdentityPanel rendered with no active identity.", void 0, {
+    log6.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 246,
+      L: 278,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2045,9 +2103,9 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   const handleChangeConnectionState = async (nextState) => client?.mesh.updateConfig(nextState);
   useEffect4(() => {
     const subscription = identityService.subscribe((state) => {
-      log5("[state]", state, {
+      log6("[state]", state, {
         F: __dxlog_file6,
-        L: 259,
+        L: 291,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2064,6 +2122,8 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
         return "device invitation manager";
       case identityState.matches("confirmingResetStorage"):
         return "confirm reset storage";
+      case identityState.matches("confirmingRecover"):
+        return "confirm recover";
       case identityState.matches("confirmingJoinNewIdentity"):
         return "confirm join new identity";
       default:
@@ -2091,40 +2151,40 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     onChangeConnectionState: handleChangeConnectionState,
     ...agentProps
   };
-  return identityState.context.invitation ? /* @__PURE__ */ React28.createElement(IdentityPanelWithInvitationImpl, {
+  return identityState.context.invitation ? /* @__PURE__ */ React29.createElement(IdentityPanelWithInvitationImpl, {
     ...implProps,
     invitation: identityState.context.invitation
-  }) : /* @__PURE__ */ React28.createElement(IdentityPanelImpl, implProps);
+  }) : /* @__PURE__ */ React29.createElement(IdentityPanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-import React36, { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4 } from "react";
-import { log as log9 } from "@dxos/log";
+import React38, { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import { log as log10 } from "@dxos/log";
 import { useClient as useClient8, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
 import { useId as useId8, useThemeContext as useThemeContext5 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X4 } from "@phosphor-icons/react";
-import React29, { cloneElement, forwardRef as forwardRef9 } from "react";
-import { Button as Button10, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import React30, { cloneElement, forwardRef as forwardRef9 } from "react";
+import { Button as Button10, useTranslation as useTranslation15 } from "@dxos/react-ui";
 import { descriptionText as descriptionText9, getSize as getSize14, mx as mx22 } from "@dxos/react-ui-theme";
 var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent, onExit }, forwardedRef) => {
-  const { t } = useTranslation14("os");
-  const exitButton = /* @__PURE__ */ React29.createElement(Button10, {
+  const { t } = useTranslation15("os");
+  const exitButton = /* @__PURE__ */ React30.createElement(Button10, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
     classNames: mx22(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
-  }, /* @__PURE__ */ React29.createElement(X4, {
+  }, /* @__PURE__ */ React30.createElement(X4, {
     weight: "bold",
     className: getSize14(4)
-  }), /* @__PURE__ */ React29.createElement("span", {
+  }), /* @__PURE__ */ React30.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React29.createElement(Heading, {
+  return /* @__PURE__ */ React30.createElement(Heading, {
     ref: forwardedRef,
     titleId,
     title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
@@ -2141,12 +2201,12 @@ var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent
 import { useMachine as useMachine2 } from "@xstate/react";
 import { useCallback as useCallback5 } from "react";
 import { assign as assign2, createMachine as createMachine2 } from "xstate";
-import { log as log6 } from "@dxos/log";
+import { log as log7 } from "@dxos/log";
 import { AlreadyJoinedError } from "@dxos/react-client";
 import { Invitation as Invitation5, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
 var getInvitationSubscribable = (Kind, invitation) => {
-  log6("[subscribing to invitation]", invitation, {
+  log7("[subscribing to invitation]", invitation, {
     F: __dxlog_file7,
     L: 90,
     S: void 0,
@@ -2156,7 +2216,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
     subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
       switch (invitation2.state) {
         case Invitation5.State.CONNECTING: {
-          log6("[invitation connecting]", {
+          log7("[invitation connecting]", {
             Kind,
             invitation: invitation2
           }, {
@@ -2171,7 +2231,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
         }
         case Invitation5.State.CONNECTED: {
-          log6("[invitation connected]", {
+          log7("[invitation connected]", {
             Kind,
             invitation: invitation2
           }, {
@@ -2186,7 +2246,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
         }
         case Invitation5.State.READY_FOR_AUTHENTICATION: {
-          log6("[invitation ready for authentication]", {
+          log7("[invitation ready for authentication]", {
             Kind,
             invitation: invitation2
           }, {
@@ -2201,7 +2261,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
         }
         case Invitation5.State.AUTHENTICATING: {
-          log6("[invitation authenticating]", {
+          log7("[invitation authenticating]", {
             Kind,
             invitation: invitation2
           }, {
@@ -2216,7 +2276,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
         }
         case Invitation5.State.SUCCESS: {
-          log6("[invitation success]", {
+          log7("[invitation success]", {
             Kind,
             invitation: invitation2
           }, {
@@ -2232,7 +2292,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           return complete?.();
         }
         case Invitation5.State.CANCELLED: {
-          log6.warn("[invitation cancelled]", {
+          log7.warn("[invitation cancelled]", {
             Kind
           }, {
             F: __dxlog_file7,
@@ -2246,7 +2306,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
         }
         case Invitation5.State.TIMEOUT: {
-          log6.error("[invitation timeout]", {
+          log7.error("[invitation timeout]", {
             Kind
           }, {
             F: __dxlog_file7,
@@ -2262,7 +2322,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
       }
     }, (error) => {
       if (error instanceof AlreadyJoinedError) {
-        log6("[already joined]", {
+        log7("[already joined]", {
           Kind,
           error
         }, {
@@ -2277,7 +2337,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
         });
         return complete?.();
       }
-      log6.error("[invitation errored]", {
+      log7.error("[invitation errored]", {
         Kind,
         error
       }, {
@@ -2474,6 +2534,11 @@ var joinMachine = createMachine2({
           target: "#join.choosingIdentity.acceptingHaloInvitation",
           actions: "log"
         },
+        {
+          cond: "initiallyRecoveringIdentity",
+          target: "#join.choosingIdentity.recoveringIdentity",
+          actions: "log"
+        },
         {
           cond: "noSelectedIdentity",
           target: "choosingIdentity",
@@ -2559,6 +2624,7 @@ var joinMachine = createMachine2({
     existingIdentity: ({ identity, mode }, _event) => mode === "halo-only" && !!identity,
     noSelectedIdentity: ({ identity }, _event) => !identity,
     initiallyAcceptingHaloInvitation: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "accept-halo-invitation",
+    initiallyRecoveringIdentity: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "recover-identity",
     hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
     noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
   },
@@ -2610,13 +2676,13 @@ var joinMachine = createMachine2({
       } : context.space
     }),
     log: (context, event) => {
-      log6("[transition]", {
+      log7("[transition]", {
         event,
         haloInvitation: context.halo.invitation,
         spaceInvitation: context.space.invitation
       }, {
         F: __dxlog_file7,
-        L: 418,
+        L: 425,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2628,9 +2694,9 @@ var defaultCodeFromUrl = (invitationType, text) => {
     const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
     return searchParams.get(`${invitationType}InvitationCode`) ?? searchParams.get(`${invitationType}Invitation`) ?? searchParams.get("invitationCode") ?? searchParams.get("invitation") ?? text;
   } catch (err) {
-    log6.catch(err, void 0, {
+    log7.catch(err, void 0, {
       F: __dxlog_file7,
-      L: 445,
+      L: 452,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2649,9 +2715,9 @@ var useJoinMachine = (client, options) => {
           invitationSubscribable: getInvitationSubscribable("Halo", invitationObservable)
         };
       } catch (err) {
-        log6.error("Could not redeem device invitation code", err, {
+        log7.error("Could not redeem device invitation code", err, {
           F: __dxlog_file7,
-          L: 466,
+          L: 473,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -2674,9 +2740,9 @@ var useJoinMachine = (client, options) => {
           invitationSubscribable: getInvitationSubscribable("Space", invitationObservable)
         };
       } catch (err) {
-        log6.error("Could not redeem space invitation code", err, {
+        log7.error("Could not redeem space invitation code", err, {
           F: __dxlog_file7,
-          L: 488,
+          L: 495,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -2736,16 +2802,16 @@ var useJoinMachine = (client, options) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
 import { CaretRight as CaretRight2, Plus as Plus3, QrCode, Textbox } from "@phosphor-icons/react";
-import React30 from "react";
-import { useTranslation as useTranslation15 } from "@dxos/react-ui";
+import React31 from "react";
+import { useTranslation as useTranslation16 } from "@dxos/react-ui";
 import { getSize as getSize15 } from "@dxos/react-ui-theme";
 var AdditionMethodChooser = (viewStateProps) => {
   const disabled = !viewStateProps.active;
   const { send } = viewStateProps;
-  const { t } = useTranslation15("os");
+  const { t } = useTranslation16("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React30.createElement(CaretRight2, {
+    after: /* @__PURE__ */ React31.createElement(CaretRight2, {
       className: getSize15(4),
       weight: "bold"
     }),
@@ -2755,13 +2821,13 @@ var AdditionMethodChooser = (viewStateProps) => {
       }
     }
   };
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React30.createElement("div", {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React31.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React30.createElement(CompoundButton, {
+  }, /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React30.createElement(Plus3, {
+    before: /* @__PURE__ */ React31.createElement(Plus3, {
       className: getSize15(6)
     }),
     onClick: () => send({
@@ -2769,22 +2835,20 @@ var AdditionMethodChooser = (viewStateProps) => {
     }),
     "data-autofocus": "choosingAuthMethod",
     "data-testid": "identity-chooser.create-identity"
-  }, t("create identity label")), /* @__PURE__ */ React30.createElement(CompoundButton, {
+  }, t("create identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("join identity description"),
-    before: /* @__PURE__ */ React30.createElement(QrCode, {
+    before: /* @__PURE__ */ React31.createElement(QrCode, {
       className: getSize15(6)
     }),
     onClick: () => send({
       type: "acceptHaloInvitation"
     }),
     "data-testid": "identity-chooser.join-identity"
-  }, t("join identity label")), /* @__PURE__ */ React30.createElement(CompoundButton, {
+  }, t("join identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
-    // TODO(mykola): Implement recover.
-    disabled: true,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React30.createElement(Textbox, {
+    before: /* @__PURE__ */ React31.createElement(Textbox, {
       className: getSize15(6)
     }),
     onClick: () => send({
@@ -2795,39 +2859,39 @@ var AdditionMethodChooser = (viewStateProps) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
-import React31, { cloneElement as cloneElement2 } from "react";
+import React32, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName4 } from "@dxos/display-name";
-import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation17 } from "@dxos/react-ui";
 import { mx as mx23 } from "@dxos/react-ui-theme";
 import { hexToFallback } from "@dxos/util";
 var IdentityAdded = (props) => {
   const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
   const disabled = !active;
-  const { t } = useTranslation16("os");
+  const { t } = useTranslation17("os");
   const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? "0";
   const fallbackValue = hexToFallback(addedIdentityHex);
   const labelId = useId7("identityListItem__label");
   const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName4(addedIdentityHex));
-  const doneAction = /* @__PURE__ */ React31.createElement(Action, {
+  const doneAction = /* @__PURE__ */ React32.createElement(Action, {
     ...onDone && {
       onClick: () => onDone(null)
     },
     disabled,
     "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }, /* @__PURE__ */ React31.createElement("span", null, t("done label")));
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React31.createElement("div", {
+  }, /* @__PURE__ */ React32.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React32.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React31.createElement(Avatar7.Root, {
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Root, {
     status: "active",
     labelId,
     hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React31.createElement(Avatar7.Frame, null, /* @__PURE__ */ React31.createElement(Avatar7.Fallback, {
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Frame, null, /* @__PURE__ */ React32.createElement(Avatar7.Fallback, {
     text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React31.createElement(Avatar7.Label, {
+  })), /* @__PURE__ */ React32.createElement(Avatar7.Label, {
     classNames: mx23("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
-  }, displayName))), /* @__PURE__ */ React31.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React31.createElement(Action, {
+  }, displayName))), /* @__PURE__ */ React32.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React32.createElement(Action, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
     onClick: () => addedIdentity && send({
@@ -2839,36 +2903,55 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React32, { useState as useState9 } from "react";
-import { log as log7 } from "@dxos/log";
+import React33, { useState as useState10 } from "react";
+import { log as log8 } from "@dxos/log";
 import { useClient as useClient7 } from "@dxos/react-client";
-import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { useTranslation as useTranslation18 } from "@dxos/react-ui";
 var __dxlog_file8 = "/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 = useClient7();
-  const { t } = useTranslation17("os");
-  const [validationMessage, setValidationMessage] = useState9("");
-  const createIdentity = (displayName) => {
-    void client.halo.createIdentity({
-      [isRecover ? "seedphrase" : "displayName"]: displayName
-    }).then((identity) => {
-      send?.({
-        type: "selectIdentity",
-        identity
+  const { t } = useTranslation18("os");
+  const [validationMessage, setValidationMessage] = useState10("");
+  const createIdentity = (value) => {
+    if (isRecover) {
+      void client.halo.recoverIdentity({
+        seedphrase: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        log8.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 38,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to recover identity message"));
       });
-    }, (error) => {
-      log7.catch(error, void 0, {
-        F: __dxlog_file8,
-        L: 37,
-        S: void 0,
-        C: (f, a) => f(...a)
+    } else {
+      void client.halo.createIdentity({
+        displayName: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        log8.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 48,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to create identity message"));
       });
-      setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
-    });
+    }
   };
-  return /* @__PURE__ */ React32.createElement(IdentityInputImpl, {
+  return /* @__PURE__ */ React33.createElement(IdentityInputImpl, {
     ...props,
     onDisplayNameConfirm: createIdentity,
     validationMessage
@@ -2877,27 +2960,27 @@ var IdentityInput = (props) => {
 var IdentityInputImpl = (props) => {
   const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
   const disabled = !active;
-  const { t } = useTranslation17("os");
-  const [inputValue, setInputValue] = useState9("");
+  const { t } = useTranslation18("os");
+  const [inputValue, setInputValue] = useState10("");
   const isRecover = method === "recover identity";
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React32.createElement(Input, {
+  }, /* @__PURE__ */ React33.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React32.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React33.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__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.createElement(Action, {
+  })), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
       type: "deselectAuthMethod"
     }),
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, t("back label")), /* @__PURE__ */ React32.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React33.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onDisplayNameConfirm?.(inputValue),
@@ -2905,10 +2988,14 @@ var IdentityInputImpl = (props) => {
   }, t("continue label"))));
 };
 
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
+import React34, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React33, { useState as useState10, useEffect as useEffect5, cloneElement as cloneElement3 } from "react";
-import { log as log8 } from "@dxos/log";
-import { useTranslation as useTranslation18 } from "@dxos/react-ui";
+import React35, { useState as useState11, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
+import { log as log9 } from "@dxos/log";
+import { useTranslation as useTranslation20 } from "@dxos/react-ui";
 var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
 var invitationCodeFromUrl = (text) => {
   try {
@@ -2916,7 +3003,7 @@ var invitationCodeFromUrl = (text) => {
     const invitation = searchParams.get("spaceInvitationCode") ?? searchParams.get("deviceInvitationCode");
     return invitation ?? text;
   } catch (err) {
-    log8.catch(err, void 0, {
+    log9.catch(err, void 0, {
       F: __dxlog_file9,
       L: 25,
       S: void 0,
@@ -2928,8 +3015,8 @@ var invitationCodeFromUrl = (text) => {
 var InvitationInput = (props) => {
   const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
   const disabled = !active;
-  const { t } = useTranslation18("os");
-  const [inputValue, setInputValue] = useState10(unredeemedCode ?? "");
+  const { t } = useTranslation20("os");
+  const [inputValue, setInputValue] = useState11(unredeemedCode ?? "");
   useEffect5(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
@@ -2947,7 +3034,7 @@ var InvitationInput = (props) => {
       }
     });
   };
-  const exitAction = /* @__PURE__ */ React33.createElement(Action, {
+  const exitAction = /* @__PURE__ */ React35.createElement(Action, {
     variant: "ghost",
     disabled,
     ...onExit ? {
@@ -2957,11 +3044,11 @@ var InvitationInput = (props) => {
     },
     "data-testid": "join-exit"
   }, t("cancel label"));
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React33.createElement(Input, {
-    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t("invitation input label")),
+  }, /* @__PURE__ */ React35.createElement(Input, {
+    label: /* @__PURE__ */ React35.createElement(StepHeading, null, t("invitation input label")),
     // TODO(burdon): Translation.
     placeholder: "Type an invitation code",
     disabled,
@@ -2970,7 +3057,7 @@ var InvitationInput = (props) => {
     "data-autofocus": `inputting${Kind}InvitationCode`,
     "data-testid": `${Kind.toLowerCase()}-invitation-input`,
     onKeyUp: ({ key }) => key === "Enter" && handleNext()
-  })), /* @__PURE__ */ React33.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ cloneElement3(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React33.createElement(Action, {
+  })), /* @__PURE__ */ React35.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React35.createElement(Action, {
     variant: "primary",
     disabled: disabled || inputValue.trim().length === 0,
     onClick: handleNext,
@@ -2979,8 +3066,8 @@ var InvitationInput = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
-import React34 from "react";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+import React36 from "react";
+import { useTranslation as useTranslation21 } from "@dxos/react-ui";
 import { descriptionText as descriptionText10 } from "@dxos/react-ui-theme";
 var InvitationActions = ({
   // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
@@ -2992,14 +3079,14 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation19("os");
+  const { t } = useTranslation21("os");
   if (failReason) {
-    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
       className: descriptionText10
-    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React34.createElement("div", {
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
       disabled: !active,
       onClick: () => send({
         type: `reset${Kind}Invitation`
@@ -3007,16 +3094,16 @@ var InvitationActions = ({
       "data-testid": "invitation-rescuer-reset"
     }, t("reset label"))));
   } else {
-    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
       className: descriptionText10
-    }, t("connecting status label")), /* @__PURE__ */ React34.createElement("div", {
+    }, t("connecting status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
       disabled: true,
       classNames: "order-2",
       "data-testid": "next"
-    }, t("next label")), /* @__PURE__ */ React34.createElement(Action, {
+    }, t("next label")), /* @__PURE__ */ React36.createElement(Action, {
       disabled: !active,
       onClick: onInvitationCancel,
       "data-testid": "invitation-rescuer-cancel"
@@ -3025,52 +3112,52 @@ var InvitationActions = ({
 };
 var InvitationRescuer = (props) => {
   const { Kind, invitationState, active, send } = props;
-  const { t } = useTranslation19("os");
-  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", {
+  const { t } = useTranslation21("os");
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React34.createElement(StepHeading, {
+  }, /* @__PURE__ */ React36.createElement(StepHeading, {
     className: descriptionText10
-  }, "There was a problem joining the space")), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+  }, "There was a problem joining the space")), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
     disabled: !active,
     "data-testid": "invitation-rescuer-blank-reset",
     onClick: () => send({
       type: `reset${Kind}Invitation`
     })
-  }, t("reset label")))) : /* @__PURE__ */ React34.createElement(InvitationActions, props));
+  }, t("reset label")))) : /* @__PURE__ */ React36.createElement(InvitationActions, props));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React35, { useState as useState11 } from "react";
+import React37, { useState as useState12 } from "react";
 import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
-import { Input as Input3, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation22 } from "@dxos/react-ui";
 import { descriptionText as descriptionText11 } from "@dxos/react-ui-theme";
-import { hexToEmoji as hexToEmoji4 } from "@dxos/util";
+import { hexToEmoji as hexToEmoji5 } from "@dxos/util";
 var pinLength = 6;
 var InvitationAuthenticator = ({ failed, Kind, authMethod, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
   const disabled = !active || pending;
-  const { t } = useTranslation20("os");
+  const { t } = useTranslation22("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState11("");
+  const [authCode, setAuthCode] = useState12("");
   const onChange = ({ target: { value } }) => {
     setAuthCode(value);
     if (value.length === pinLength) {
       document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
     }
   };
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center gap-4"
-  }, /* @__PURE__ */ React35.createElement(Input3.Root, failed && {
+  }, /* @__PURE__ */ React37.createElement(Input3.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React35.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React37.createElement(Input3.Label, {
     asChild: true
-  }, authMethod === Invitation6.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ React35.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(StepHeading, {
+  }, authMethod === Invitation6.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ React37.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(StepHeading, {
     className: descriptionText11
-  }, t("authenticating label")), /* @__PURE__ */ React35.createElement("div", {
+  }, t("authenticating label")), /* @__PURE__ */ React37.createElement("div", {
     role: "none",
     className: "grow"
-  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React35.createElement(Input3.PinInput, {
+  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React37.createElement(Input3.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -3081,18 +3168,18 @@ var InvitationAuthenticator = ({ failed, Kind, authMethod, active, pending, invi
     "data-prevent-ios-autofocus": true,
     "data-testid": `${invitationType}-auth-code-input`,
     "data-1p-ignore": true
-  }), failed && /* @__PURE__ */ React35.createElement(Input3.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React37.createElement(Input3.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React35.createElement(Input3.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ React35.createElement("div", {
+  }, /* @__PURE__ */ React37.createElement(Input3.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ React37.createElement("div", {
     className: "flex justify-center"
-  }, /* @__PURE__ */ React35.createElement(Emoji, {
-    text: hexToEmoji4(invitationId)
-  })))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(Action, {
+  }, /* @__PURE__ */ React37.createElement(Emoji, {
+    text: hexToEmoji5(invitationId)
+  })))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, t("cancel label")), /* @__PURE__ */ React35.createElement(Action, {
+  }, t("cancel label")), /* @__PURE__ */ React37.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onInvitationAuthenticate?.(authCode),
@@ -3154,46 +3241,46 @@ var JoinPanelImpl = (props) => {
     IdentityInput: IdentityInputComponent = IdentityInput,
     ConfirmReset: ConfirmResetComponent = ConfirmReset
   } = props;
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React36.createElement(JoinHeading, {
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React38.createElement(JoinHeading, {
     titleId,
     mode,
     onExit,
     exitActionParent
-  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
     focusManaged: true,
     activeView
-  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "addition method chooser"
-  }, /* @__PURE__ */ React36.createElement(AdditionMethodChooser, {
+  }, /* @__PURE__ */ React38.createElement(AdditionMethodChooser, {
     send,
     active: activeView === "addition method chooser"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "reset storage confirmation"
-  }, /* @__PURE__ */ React36.createElement(ConfirmResetComponent, {
+  }, /* @__PURE__ */ React38.createElement(ConfirmResetComponent, {
     send,
     active: activeView === "reset storage confirmation",
     onCancel: onCancelResetStorage,
     onConfirm: onConfirmResetStorage
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "create identity input"
-  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
     send,
     method: "create identity",
     active: activeView === "create identity input"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "recover identity input"
-  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
     send,
     method: "recover identity",
     active: activeView === "recover identity input"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation input"
-  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation input",
@@ -3203,20 +3290,20 @@ var JoinPanelImpl = (props) => {
     ...succeededKeys?.Halo && {
       succeededKeys: succeededKeys.Halo
     }
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation rescuer"
-  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation rescuer",
     invitationState: invitationStates?.Halo,
     onInvitationCancel: onHaloInvitationCancel,
     failReason: failReasons?.Halo
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation authenticator"
-  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
     send,
     Kind: "Halo",
     invitationId: invitationIds?.Halo,
@@ -3227,19 +3314,19 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Halo") && {
       failed: true
     }
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "identity added"
-  }, /* @__PURE__ */ React36.createElement(IdentityAdded, {
+  }, /* @__PURE__ */ React38.createElement(IdentityAdded, {
     send,
     mode,
     active: activeView === "identity added",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation input"
-  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
     send,
     Kind: "Space",
     active: activeView === "space invitation input",
@@ -3251,20 +3338,20 @@ var JoinPanelImpl = (props) => {
     },
     onExit,
     exitActionParent
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation rescuer"
-  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
     send,
     Kind: "Space",
     active: activeView === "space invitation rescuer",
     invitationState: invitationStates?.Space,
     onInvitationCancel: onSpaceInvitationCancel,
     failReason: failReasons?.Space
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation authenticator"
-  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
     send,
     Kind: "Space",
     invitationId: invitationIds?.Space,
@@ -3296,7 +3383,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
   });
   useEffect6(() => {
     const subscription = joinService.subscribe((state) => {
-      log9("[state]", state, {
+      log10("[state]", state, {
         F: __dxlog_file10,
         L: 210,
         S: void 0,
@@ -3542,7 +3629,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
     client,
     joinSend
   ]);
-  return /* @__PURE__ */ React36.createElement(JoinPanelImpl, {
+  return /* @__PURE__ */ React38.createElement(JoinPanelImpl, {
     titleId,
     mode,
     send: joinSend,
@@ -3585,15 +3672,15 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 import { Planet } from "@phosphor-icons/react";
-import React38, { useEffect as useEffect7, useMemo as useMemo5 } from "react";
-import { log as log12 } from "@dxos/log";
+import React40, { useEffect as useEffect7, useMemo as useMemo5 } from "react";
+import { log as log13 } from "@dxos/log";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
-import { useId as useId9, useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { useId as useId9, useTranslation as useTranslation24 } 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 log10 } from "@dxos/log";
+import { log as log11 } from "@dxos/log";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
 var spaceMachine = createMachine3({
   id: "space",
@@ -3631,7 +3718,7 @@ var spaceMachine = createMachine3({
       invitation: () => void 0
     }),
     log: (context, event) => {
-      log10("[transition]", {
+      log11("[transition]", {
         event,
         context
       }, {
@@ -3654,19 +3741,19 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React37, { useCallback as useCallback7, useState as useState12 } from "react";
-import { log as log11 } from "@dxos/log";
+import React39, { useCallback as useCallback7, useState as useState13 } from "react";
+import { log as log12 } from "@dxos/log";
 import { useConfig } from "@dxos/react-client";
 import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client/echo";
 import { Invitation as Invitation8, InvitationEncoder as InvitationEncoder4 } from "@dxos/react-client/invitations";
-import { ScrollArea, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { ScrollArea, useTranslation as useTranslation23 } from "@dxos/react-ui";
 import { descriptionText as descriptionText12, mx as mx24 } from "@dxos/react-ui-theme";
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
 var activeActionKey = "dxos:react-shell/space-manager/active-action";
 var handleInvitationEvent = (invitation, subscription) => {
   const invitationCode = InvitationEncoder4.encode(invitation);
   if (invitation.state === Invitation8.State.CONNECTING) {
-    log11.info(JSON.stringify({
+    log12.info(JSON.stringify({
       invitationCode,
       authCode: invitation.authCode
     }), void 0, {
@@ -3680,7 +3767,7 @@ var handleInvitationEvent = (invitation, subscription) => {
 };
 var SpaceManager = (props) => {
   const { space, target } = props;
-  const { t } = useTranslation21("os");
+  const { t } = useTranslation23("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
   const inviteActions = {
@@ -3721,7 +3808,7 @@ var SpaceManager = (props) => {
       ])
     }
   };
-  return /* @__PURE__ */ React37.createElement(SpaceManagerImpl, {
+  return /* @__PURE__ */ React39.createElement(SpaceManagerImpl, {
     ...props,
     invitations,
     inviteActions
@@ -3730,7 +3817,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 } = useTranslation21("os");
+  const { t } = useTranslation23("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -3740,7 +3827,7 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState12(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const [activeAction, setInternalActiveAction] = useState13(localStorage.getItem(activeActionKey) ?? "inviteOne");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
@@ -3748,26 +3835,26 @@ var SpaceManagerImpl = (props) => {
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
     Invitation8.State.CANCELLED
   ].includes(invitation.get().state));
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
-  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
-  }, !!visibleInvitations?.length && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("h3", {
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement("h3", {
     className: mx24(headingFragment, descriptionText12)
-  }, t("invitation list heading")), /* @__PURE__ */ React37.createElement(InvitationListComponent, {
+  }, t("invitation list heading")), /* @__PURE__ */ React39.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
     invitations: visibleInvitations ?? [],
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
-  }), /* @__PURE__ */ React37.createElement("h3", {
+  }), /* @__PURE__ */ React39.createElement("h3", {
     className: mx24(headingFragment, descriptionText12, "mbs-2")
-  }, t("space member list heading"))), /* @__PURE__ */ React37.createElement(SpaceMemberListComponent, {
+  }, t("space member list heading"))), /* @__PURE__ */ React39.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
-  })), /* @__PURE__ */ React37.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React39.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React37.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(BifurcatedAction, {
+  }, /* @__PURE__ */ React39.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React39.createElement(Actions, null, /* @__PURE__ */ React39.createElement(BifurcatedAction, {
     disabled: !active,
     actions: inviteActions,
     activeAction,
@@ -3779,45 +3866,45 @@ var SpaceManagerImpl = (props) => {
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
 var SpacePanelHeading = ({ titleId, space, onDone }) => {
-  const { t } = useTranslation22("os");
+  const { t } = useTranslation24("os");
   const name = space.properties.name;
-  return /* @__PURE__ */ React38.createElement(Heading, {
+  return /* @__PURE__ */ React40.createElement(Heading, {
     titleId,
     title: t("space panel heading"),
-    corner: /* @__PURE__ */ React38.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React40.createElement(CloseButton, {
       "data-testid": "identity-panel-done",
       onDone
     })
-  }, /* @__PURE__ */ React38.createElement("div", {
+  }, /* @__PURE__ */ React40.createElement("div", {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
-  }, /* @__PURE__ */ React38.createElement(Planet, {
+  }, /* @__PURE__ */ React40.createElement(Planet, {
     size: 32,
     weight: "light"
-  }), /* @__PURE__ */ React38.createElement("div", {
+  }), /* @__PURE__ */ React40.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
 };
 var SpacePanelImpl = (props) => {
   const { titleId, activeView, space, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(SpacePanelHeading, {
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(SpacePanelHeading, {
     ...rest,
     titleId,
     space
-  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React40.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React40.createElement(Viewport.Views, null, /* @__PURE__ */ React40.createElement(Viewport.View, {
     id: "space manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React38.createElement(SpaceManagerComponent, {
+  }, /* @__PURE__ */ React40.createElement(SpaceManagerComponent, {
     active: activeView === "space manager",
     space,
     target,
     ...rest
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React40.createElement(Viewport.View, {
     id: "space invitation manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React38.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React40.createElement(InvitationManagerComponent, {
     active: activeView === "space invitation manager",
     ...rest,
     invitationUrl: props.invitationUrl
@@ -3825,7 +3912,7 @@ var SpacePanelImpl = (props) => {
 };
 var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus3(invitation);
-  return /* @__PURE__ */ React38.createElement(SpacePanelImpl, {
+  return /* @__PURE__ */ React40.createElement(SpacePanelImpl, {
     ...props,
     ...invitationStatus,
     invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
@@ -3840,7 +3927,7 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   });
   useEffect7(() => {
     const subscription = spaceService.subscribe((state) => {
-      log12("[state]", state, {
+      log13("[state]", state, {
         F: __dxlog_file13,
         L: 94,
         S: void 0,
@@ -3872,24 +3959,24 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   };
   return spaceState.context.invitation ? (
     // TODO(wittjosiah): Unused? Remove?
-    /* @__PURE__ */ React38.createElement(SpacePanelWithInvitationImpl, {
+    /* @__PURE__ */ React40.createElement(SpacePanelWithInvitationImpl, {
       ...implProps,
       invitation: spaceState.context.invitation
     })
-  ) : /* @__PURE__ */ React38.createElement(SpacePanelImpl, implProps);
+  ) : /* @__PURE__ */ React40.createElement(SpacePanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/StatusPanel/StatusPanel.tsx
-import React39 from "react";
-import { Status, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import React41 from "react";
+import { Status, useTranslation as useTranslation25 } from "@dxos/react-ui";
 var StatusPanel = ({ titleId }) => {
-  const { t } = useTranslation23("os");
-  return /* @__PURE__ */ React39.createElement("div", {
+  const { t } = useTranslation25("os");
+  return /* @__PURE__ */ React41.createElement("div", {
     className: "grid place-items-center p-2 gap-2"
-  }, /* @__PURE__ */ React39.createElement("p", {
+  }, /* @__PURE__ */ React41.createElement("p", {
     id: titleId,
     className: "font-medium text-center"
-  }, t("resetting message")), /* @__PURE__ */ React39.createElement(Status, {
+  }, t("resetting message")), /* @__PURE__ */ React41.createElement(Status, {
     indeterminate: true
   }, t("resetting message")));
 };
@@ -3897,96 +3984,96 @@ var StatusPanel = ({ titleId }) => {
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
   const titleId = useId10("identityDialog__title", props.title);
-  return /* @__PURE__ */ React40.createElement(Dialog.Root, {
+  return /* @__PURE__ */ React42.createElement(Dialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || props.onDone?.()
-  }, /* @__PURE__ */ React40.createElement(Dialog.Portal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null, /* @__PURE__ */ React40.createElement(Dialog.Content, {
+  }, /* @__PURE__ */ React42.createElement(Dialog.Portal, null, /* @__PURE__ */ React42.createElement(Dialog.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React40.createElement(ClipboardProvider, null, /* @__PURE__ */ React40.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(IdentityPanel, {
     ...props,
     titleId,
-    doneActionParent: /* @__PURE__ */ React40.createElement(Dialog.Close, {
+    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
-import React41 from "react";
+import React43 from "react";
 import { AlertDialog, useId as useId11, useVisualViewport } from "@dxos/react-ui";
 var JoinDialog = (joinPanelProps) => {
   const titleId = useId11("joinDialog__title");
   const { height } = useVisualViewport();
-  return /* @__PURE__ */ React41.createElement(AlertDialog.Root, {
+  return /* @__PURE__ */ React43.createElement(AlertDialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
-  }, /* @__PURE__ */ React41.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React41.createElement(AlertDialog.Overlay, {
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog.Overlay, {
     classNames: "backdrop-blur",
     ...height && {
       style: {
         blockSize: `${height}px`
       }
     }
-  }, /* @__PURE__ */ React41.createElement(AlertDialog.Content, {
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React41.createElement(JoinPanel, {
+  }, /* @__PURE__ */ React43.createElement(JoinPanel, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Cancel, {
+    exitActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Action, {
+    doneActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Action, {
       asChild: true
     })
   })))));
 };
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
-import React45, { StrictMode } from "react";
+import React47, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { AgentHostingProvider, ClientProvider, ClientServicesProxy, Config, ShellDisplay as ShellDisplay2 } from "@dxos/react-client";
-import { Button as Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip8, useTranslation as useTranslation24 } from "@dxos/react-ui";
+import { Button as Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip8, useTranslation as useTranslation26 } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
-import React44, { useEffect as useEffect8, useState as useState13 } from "react";
-import { log as log13 } from "@dxos/log";
+import React46, { useEffect as useEffect8, useState as useState14 } from "react";
+import { log as log14 } from "@dxos/log";
 import { useClient as useClient9 } from "@dxos/react-client";
 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 React42 from "react";
+import React44 from "react";
 import { Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId12("spaceDialog__title");
-  return /* @__PURE__ */ React42.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React44.createElement(Dialog2.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
-  }, /* @__PURE__ */ React42.createElement(Dialog2.Portal, null, /* @__PURE__ */ React42.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog2.Content, {
+  }, /* @__PURE__ */ React44.createElement(Dialog2.Portal, null, /* @__PURE__ */ React44.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React44.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React44.createElement(ClipboardProvider, null, /* @__PURE__ */ React44.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog2.Close, {
+    doneActionParent: /* @__PURE__ */ React44.createElement(Dialog2.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/StatusDialog/StatusDialog.tsx
-import React43 from "react";
+import React45 from "react";
 import { AlertDialog as AlertDialog2, useId as useId13 } from "@dxos/react-ui";
 var StatusDialog = () => {
   const titleId = useId13("statusDialog__title");
-  return /* @__PURE__ */ React43.createElement(AlertDialog2.Root, {
+  return /* @__PURE__ */ React45.createElement(AlertDialog2.Root, {
     open: true
-  }, /* @__PURE__ */ React43.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Content, {
+  }, /* @__PURE__ */ React45.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React43.createElement(StatusPanel, {
+  }, /* @__PURE__ */ React45.createElement(StatusPanel, {
     titleId
   })))));
 };
@@ -3995,14 +4082,14 @@ var StatusDialog = () => {
 var __dxlog_file14 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
 var blurActiveElement = () => document.activeElement?.blur?.();
 var Shell = ({ runtime }) => {
-  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = useState13({
+  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = useState14({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
     spaceId: runtime.spaceId,
     target: runtime.target
   });
-  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState13({
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState14({
     invitationUrl: runtime.invitationUrl,
     deviceInvitationParam: runtime.deviceInvitationParam,
     spaceInvitationParam: runtime.spaceInvitationParam
@@ -4031,7 +4118,7 @@ var Shell = ({ runtime }) => {
   ]);
   useEffect8(() => {
     if (layout === ShellLayout.SPACE && !space) {
-      log13.warn("No space found for shell space invitations.", void 0, {
+      log14.warn("No space found for shell space invitations.", void 0, {
         F: __dxlog_file14,
         L: 67,
         S: void 0,
@@ -4054,12 +4141,13 @@ var Shell = ({ runtime }) => {
   ]);
   switch (layout) {
     case ShellLayout.STATUS:
-      return /* @__PURE__ */ React44.createElement(StatusDialog, null);
+      return /* @__PURE__ */ React46.createElement(StatusDialog, null);
     case ShellLayout.INITIALIZE_IDENTITY:
     case ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
-      return /* @__PURE__ */ React44.createElement(JoinDialog, {
+    case ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY:
+      return /* @__PURE__ */ React46.createElement(JoinDialog, {
         mode: "halo-only",
-        initialDisposition: layout === ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION ? "accept-halo-invitation" : "default",
+        initialDisposition: layout === ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY ? "recover-identity" : layout === ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION ? "accept-halo-invitation" : "default",
         initialInvitationCode: invitationCode,
         onCancelResetStorage: () => runtime.setLayout({
           layout: ShellLayout.IDENTITY
@@ -4077,7 +4165,7 @@ var Shell = ({ runtime }) => {
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
-      return /* @__PURE__ */ React44.createElement(IdentityDialog, {
+      return /* @__PURE__ */ React46.createElement(IdentityDialog, {
         createInvitationUrl: createDeviceInvitationUrl,
         onResetStorage: async () => {
           runtime.setLayout({
@@ -4089,6 +4177,17 @@ var Shell = ({ runtime }) => {
             reset: true
           });
         },
+        onRecover: async () => {
+          runtime.setLayout({
+            layout: ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            reset: true,
+            target: "recoverIdentity"
+          });
+        },
         onJoinNewIdentity: async () => {
           runtime.setLayout({
             layout: ShellLayout.STATUS
@@ -4112,7 +4211,7 @@ var Shell = ({ runtime }) => {
         initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
       });
     case ShellLayout.SPACE:
-      return space ? /* @__PURE__ */ React44.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React46.createElement(SpaceDialog, {
         space,
         target,
         createInvitationUrl: createSpaceInvitationUrl,
@@ -4127,7 +4226,7 @@ var Shell = ({ runtime }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React44.createElement(JoinDialog, {
+      return /* @__PURE__ */ React46.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           blurActiveElement();
@@ -4159,7 +4258,7 @@ var Shell = ({ runtime }) => {
 // packages/sdk/shell/src/composites/Shell/shell-runtime.ts
 import { Event } from "@dxos/async";
 import { appServiceBundle, shellServiceBundle } from "@dxos/client-protocol";
-import { invariant as invariant3 } from "@dxos/invariant";
+import { invariant as invariant4 } from "@dxos/invariant";
 import { ShellLayout as ShellLayout2 } from "@dxos/protocols/proto/dxos/iframe";
 import { createProtoRpcPeer } from "@dxos/rpc";
 var __dxlog_file15 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/shell-runtime.ts";
@@ -4218,7 +4317,7 @@ var ShellRuntimeImpl = class {
     });
   }
   async setAppContext(context) {
-    invariant3(this._appRpc, "runtime not open", {
+    invariant4(this._appRpc, "runtime not open", {
       F: __dxlog_file15,
       L: 83,
       S: this,
@@ -4410,7 +4509,9 @@ var os = {
   "getting agent label": "Checking agent status\u2026",
   "agent requested label": "Agent requested",
   "agent requested description": "The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.",
-  "authenticating label": "Authenticating\u2026"
+  "authenticating label": "Authenticating\u2026",
+  "create recovery code label": "Create recovery code",
+  "choose recover identity label": "Recover identity"
 };
 
 // packages/sdk/shell/src/translations/index.ts
@@ -4428,25 +4529,25 @@ var runShell = async (config = new Config()) => {
     const services = new ClientServicesProxy(createIFramePort({
       channel: DEFAULT_CLIENT_CHANNEL
     }));
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React45.createElement(ClientProvider, {
+    }, /* @__PURE__ */ React47.createElement(ClientProvider, {
       config,
       services,
       noBanner: true
-    }, /* @__PURE__ */ React45.createElement(ClipboardProvider, null, /* @__PURE__ */ React45.createElement(Tooltip8.Provider, null, /* @__PURE__ */ React45.createElement(AgentHostingProvider, null, /* @__PURE__ */ React45.createElement(Shell, {
+    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip8.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
       runtime
     }))))))));
   } catch {
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React45.createElement(Fallback, {
+    }, /* @__PURE__ */ React47.createElement(Fallback, {
       onClose: () => runtime.setAppContext({
         display: ShellDisplay2.NONE
       })
@@ -4454,21 +4555,21 @@ var runShell = async (config = new Config()) => {
   }
 };
 var Fallback = ({ onClose }) => {
-  const { t } = useTranslation24("os");
-  return /* @__PURE__ */ React45.createElement(Dialog3.Root, {
+  const { t } = useTranslation26("os");
+  return /* @__PURE__ */ React47.createElement(Dialog3.Root, {
     modal: true,
     open: true,
     onOpenChange: () => onClose?.()
-  }, /* @__PURE__ */ React45.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React45.createElement(Dialog3.Content, null, /* @__PURE__ */ React45.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React45.createElement(Dialog3.Close, {
+  }, /* @__PURE__ */ React47.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React47.createElement(Dialog3.Content, null, /* @__PURE__ */ React47.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React47.createElement(Dialog3.Close, {
     asChild: true,
     onClick: () => onClose?.()
-  }, /* @__PURE__ */ React45.createElement(Button11, {
+  }, /* @__PURE__ */ React47.createElement(Button11, {
     variant: "primary"
   }, t("close label"))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React46, { createContext as createContext2, useCallback as useCallback8, useContext as useContext2, useEffect as useEffect9, useMemo as useMemo6, useState as useState14 } from "react";
+import React48, { createContext as createContext2, useCallback as useCallback8, useContext as useContext2, useEffect as useEffect9, useMemo as useMemo6, useState as useState15 } from "react";
 import { useClient as useClient10, ShellDisplay as ShellDisplay3, ShellLayout as ShellLayout4 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
 import { mx as mx25 } from "@dxos/react-ui-theme";
@@ -4549,7 +4650,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient10();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState14(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
+  const [display, setDisplay] = useState15(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -4619,11 +4720,11 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, shellRuntime && /* @__PURE__ */ React46.createElement("div", {
+  return /* @__PURE__ */ React48.createElement(React48.Fragment, null, shellRuntime && /* @__PURE__ */ React48.createElement("div", {
     className: mx25(display === ShellDisplay3.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React46.createElement(Shell, {
+  }, /* @__PURE__ */ React48.createElement(Shell, {
     runtime: shellRuntime
-  })), /* @__PURE__ */ React46.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React48.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay