@dxos/shell 0.4.10-main.eedd150 → 0.4.10-main.f15a546

package/dist/lib/browser/react.mjs

@@ -2,14 +2,73 @@ import {
   __export
 } from "./chunk-ZSTKOCBT.mjs";
 
+// packages/sdk/shell/src/components/AgentConfig.tsx
+import { Database, Plus, Power } from "@phosphor-icons/react";
+import React from "react";
+import { Avatar, Button, Tooltip, useTranslation } from "@dxos/react-ui";
+import { descriptionText, getSize, mx } from "@dxos/react-ui-theme";
+var AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate }) => {
+  const { t } = useTranslation("os");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
+    className: mx(descriptionText, "text-center mbs-4")
+  }, t("agent heading")), agentActive ? /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "flex gap-2 items-center"
+  }, /* @__PURE__ */ React.createElement(Avatar.Root, {
+    status: agentStatus ? "active" : "inactive",
+    variant: "square"
+  }, /* @__PURE__ */ React.createElement(Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ React.createElement(Database, {
+    weight: "duotone",
+    width: 24,
+    height: 24,
+    x: 8,
+    y: 8
+  })), /* @__PURE__ */ React.createElement(Avatar.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, t("agent device label"))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": "agent.destroy",
+    onClick: onAgentDestroy
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("destroy agent label")), /* @__PURE__ */ React.createElement(Power, {
+    className: getSize(5)
+  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("destroy agent label"))))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "mlb-2 is-full justify-start gap-2 !pis-0 !pie-3",
+    "data-testid": "devices-panel.create-agent",
+    onClick: onAgentCreate,
+    "aria-describedby": "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "img",
+    className: mx(getSize(8), "m-1 rounded-sm surface-input grid place-items-center")
+  }, /* @__PURE__ */ React.createElement(Plus, {
+    weight: "light",
+    className: getSize(6)
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t("create agent label"))), /* @__PURE__ */ React.createElement("p", {
+    id: "devices-panel.create-agent.description",
+    className: descriptionText
+  }, t("agent message body"))));
+};
+
 // packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
 import { Check, Copy } from "@phosphor-icons/react";
-import React2, { useState as useState2 } from "react";
-import { Button, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize, mx } from "@dxos/react-ui-theme";
+import React3, { useState as useState2 } from "react";
+import { Button as Button2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/Clipboard/ClipboardProvider.tsx
-import React, { createContext, useCallback, useContext, useState } from "react";
+import React2, { createContext, useCallback, useContext, useState } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext({
   textValue: "",
   setTextValue: async (_) => {
@@ -22,7 +81,7 @@ var ClipboardProvider = ({ children }) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -32,11 +91,11 @@ var ClipboardProvider = ({ children }) => {
 
 // packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
 var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
-var CopyButton = ({ value, classNames, iconProps, ...props }) => {
-  const { t } = useTranslation("os");
+var CopyButton = ({ value, classNames, iconProps: iconProps2, ...props }) => {
+  const { t } = useTranslation2("os");
   const { textValue, setTextValue } = useClipboardContext();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ React2.createElement(Button, {
+  return /* @__PURE__ */ React3.createElement(Button2, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -44,60 +103,60 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React3.createElement("div", {
     role: "none",
-    className: mx("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React2.createElement("span", {
+    className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "pli-1"
-  }, t("copy invitation code label")), /* @__PURE__ */ React2.createElement(Copy, {
-    className: getSize(5),
-    ...iconProps
-  })), /* @__PURE__ */ React2.createElement("div", {
+  }, t("copy invitation code label")), /* @__PURE__ */ React3.createElement(Copy, {
+    className: getSize2(5),
+    ...iconProps2
+  })), /* @__PURE__ */ React3.createElement("div", {
     role: "none",
-    className: mx("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React2.createElement("span", {
+    className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "pli-1"
-  }, t("copy success label")), /* @__PURE__ */ React2.createElement(Check, {
-    className: getSize(5),
-    ...iconProps
+  }, t("copy success label")), /* @__PURE__ */ React3.createElement(Check, {
+    className: getSize2(5),
+    ...iconProps2
   })));
 };
-var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
-  const { t } = useTranslation("os");
+var CopyButtonIconOnly = ({ value, classNames, iconProps: iconProps2, variant, ...props }) => {
+  const { t } = useTranslation2("os");
   const { textValue, setTextValue } = useClipboardContext();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : t("copy invitation code label");
   const [open, setOpen] = useState2(false);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+  return /* @__PURE__ */ React3.createElement(Tooltip2.Root, {
     delayDuration: 1500,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+  }, /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
     side: "bottom",
     sideOffset: 12,
     classNames: "z-30"
-  }, /* @__PURE__ */ React2.createElement("span", null, label), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React3.createElement("span", null, label), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
     "aria-label": label,
     ...props,
     onClick: () => setTextValue(value).then(() => setOpen(true)),
     "data-testid": "copy-invitation",
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button, {
+  }, /* @__PURE__ */ React3.createElement(Button2, {
     variant,
     classNames: [
       "inline-flex flex-col justify-center",
       classNames
     ]
-  }, /* @__PURE__ */ React2.createElement(Copy, {
-    className: getSize(5),
-    ...iconProps
+  }, /* @__PURE__ */ React3.createElement(Copy, {
+    className: getSize2(5),
+    ...iconProps2
   }))));
 };
 
 // packages/sdk/shell/src/components/CompoundButton/CompoundButton.tsx
-import React3 from "react";
+import React4 from "react";
 import { useId, useThemeContext, useElevationContext } from "@dxos/react-ui";
-import { descriptionText, descriptionTextPrimary, mx as mx2 } from "@dxos/react-ui-theme";
+import { descriptionText as descriptionText2, descriptionTextPrimary, mx as mx3 } from "@dxos/react-ui-theme";
 var CompoundButton = ({ children, description, before, after, variant = "default", elevation: propsElevation, slots = {}, ...buttonProps }) => {
   const labelId = useId("compoundButton-label");
   const descriptionId = useId("compoundButton-description");
@@ -110,7 +169,7 @@ var CompoundButton = ({ children, description, before, after, variant = "default
     textWrap: true
   };
   const buttonClassName = tx("button.root", "button button--compound", styleProps, "flex items-center gap-4 plb-2.5", slots.root?.className);
-  return /* @__PURE__ */ React3.createElement("button", {
+  return /* @__PURE__ */ React4.createElement("button", {
     ...buttonProps,
     ...slots.root,
     className: buttonClassName,
@@ -118,22 +177,22 @@ var CompoundButton = ({ children, description, before, after, variant = "default
     ...description && {
       "aria-describedby": descriptionId
     }
-  }, before && /* @__PURE__ */ React3.createElement("div", {
+  }, before && /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grow-0"
-  }, before), /* @__PURE__ */ React3.createElement("div", {
+  }, before), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     ...slots.middle,
-    className: mx2("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
-  }, /* @__PURE__ */ React3.createElement("p", {
+    className: mx3("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
+  }, /* @__PURE__ */ React4.createElement("p", {
     ...slots.label,
     id: labelId,
-    className: mx2(slots.label?.className)
-  }, children), description && /* @__PURE__ */ React3.createElement("p", {
+    className: mx3(slots.label?.className)
+  }, children), description && /* @__PURE__ */ React4.createElement("p", {
     id: descriptionId,
     ...slots.description,
-    className: mx2("text-xs mbe-1 font-normal", variant === "primary" ? descriptionTextPrimary : descriptionText, slots.description?.className)
-  }, description)), after && /* @__PURE__ */ React3.createElement("div", {
+    className: mx3("text-xs mbe-1 font-normal", variant === "primary" ? descriptionTextPrimary : descriptionText2, slots.description?.className)
+  }, description)), after && /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grow-0"
   }, after));
@@ -142,13 +201,78 @@ var CompoundButton = ({ children, description, before, after, variant = "default
 // packages/sdk/shell/src/components/EmojiPicker.tsx
 import emojiData from "@emoji-mart/data";
 import EmojiMart from "@emoji-mart/react";
-import { ArrowCounterClockwise, CaretDown } from "@phosphor-icons/react";
+import { ArrowCounterClockwise, CaretDown, ImageSquare } from "@phosphor-icons/react";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React4, { useState as useState3 } from "react";
-import { Button as Button2, Popover, useTranslation as useTranslation2, Tooltip as Tooltip2, useMediaQuery } from "@dxos/react-ui";
-import { getSize as getSize2 } from "@dxos/react-ui-theme";
-var EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
-  const { t } = useTranslation2("os");
+import React5, { useRef, useState as useState3 } from "react";
+import { Button as Button3, Popover, useTranslation as useTranslation3, Tooltip as Tooltip3, Toolbar, useMediaQuery } from "@dxos/react-ui";
+import { getSize as getSize3 } from "@dxos/react-ui-theme";
+var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
+  const { t } = useTranslation3("os");
+  const [_emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
+  const suppressNextTooltip = useRef(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState3(false);
+  return /* @__PURE__ */ React5.createElement(Tooltip3.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React5.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: (nextOpen) => {
+      setEmojiPickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Toolbar.Button, {
+    classNames: [
+      "gap-2 text-2xl plb-1",
+      classNames
+    ],
+    disabled
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ React5.createElement(ImageSquare, {
+    className: getSize3(5)
+  })))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select emoji label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null))), /* @__PURE__ */ React5.createElement(Popover.Content, {
+    side: "bottom",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+        suppressNextTooltip.current = true;
+      }
+    }
+  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))));
+};
+var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
+  const { t } = useTranslation3("os");
   const [isMd] = useMediaQuery("md", {
     ssr: false
   });
@@ -158,22 +282,22 @@ var EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear
     defaultProp: defaultEmoji
   });
   const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Popover.Root, {
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Popover.Root, {
     open: emojiPickerOpen,
     onOpenChange: setEmojiPickerOpen
-  }, /* @__PURE__ */ React4.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button2, {
+  }, /* @__PURE__ */ React5.createElement(Button3, {
     variant: "ghost",
     classNames: "gap-2 text-2xl plb-1",
     disabled
-  }, /* @__PURE__ */ React4.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React4.createElement("span", {
+  }, t("select emoji label")), /* @__PURE__ */ React5.createElement("span", {
     className: "grow pis-14"
-  }, emojiValue), /* @__PURE__ */ React4.createElement(CaretDown, {
-    className: getSize2(4)
-  }))), /* @__PURE__ */ React4.createElement(Popover.Content, {
+  }, emojiValue), /* @__PURE__ */ React5.createElement(CaretDown, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React5.createElement(Popover.Content, {
     side: "right",
     sideOffset: isMd ? 0 : -310,
     onKeyDownCapture: (event) => {
@@ -182,7 +306,7 @@ var EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear
         setEmojiPickerOpen(false);
       }
     }
-  }, /* @__PURE__ */ React4.createElement(EmojiMart, {
+  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
     data: emojiData,
     onEmojiSelect: ({ native }) => {
       if (native) {
@@ -193,35 +317,35 @@ var EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear
     autoFocus: true,
     maxFrequentRows: 0,
     noCountryFlags: true
-  }), /* @__PURE__ */ React4.createElement(Popover.Arrow, null))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
+  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Root, null, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button2, {
+  }, /* @__PURE__ */ React5.createElement(Button3, {
     variant: "ghost",
     onClick: onClickClear,
     disabled
-  }, /* @__PURE__ */ React4.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React4.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React4.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip2.Content, {
+  }, t("clear label")), /* @__PURE__ */ React5.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
     style: {
       zIndex: 70
     },
     side: "right"
-  }, t("clear label"), /* @__PURE__ */ React4.createElement(Tooltip2.Arrow, null)))));
+  }, t("clear label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null)))));
 };
 
 // packages/sdk/shell/src/components/HuePicker.tsx
-import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check as Check2 } from "@phosphor-icons/react";
+import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check as Check2, Palette } from "@phosphor-icons/react";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React5 from "react";
-import { Button as Button3, useTranslation as useTranslation3, Tooltip as Tooltip3, DropdownMenu, useThemeContext as useThemeContext2 } from "@dxos/react-ui";
-import { getSize as getSize3, hueTokenThemes } from "@dxos/react-ui-theme";
+import React6, { useRef as useRef2, useState as useState4 } from "react";
+import { Button as Button4, useTranslation as useTranslation4, Tooltip as Tooltip4, DropdownMenu, useThemeContext as useThemeContext2, Toolbar as Toolbar2 } from "@dxos/react-ui";
+import { getSize as getSize4, hueTokenThemes, mx as mx4 } from "@dxos/react-ui-theme";
 var HuePreview = ({ hue }) => {
   const { tx } = useThemeContext2();
-  return /* @__PURE__ */ React5.createElement("svg", {
+  return /* @__PURE__ */ React6.createElement("svg", {
     width: 12,
     height: 12,
     viewBox: "0 0 12 12"
-  }, /* @__PURE__ */ React5.createElement("rect", {
+  }, /* @__PURE__ */ React6.createElement("rect", {
     x: 0,
     y: 0,
     width: 12,
@@ -231,130 +355,150 @@ var HuePreview = ({ hue }) => {
     })
   }));
 };
-var HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
-  const { t } = useTranslation3("os");
+var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
+  const { t } = useTranslation4("os");
   const [hueValue, setHueValue] = useControllableState2({
     prop: hue,
     onChange: onChangeHue,
     defaultProp: defaultHue
   });
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
+  const [huePickerOpen, setHuePickerOpen] = useState4(false);
+  const suppressNextTooltip = useRef2(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
+  return /* @__PURE__ */ React6.createElement(Tooltip4.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: huePickerOpen,
+    onOpenChange: (nextOpen) => {
+      setHuePickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React6.createElement(Tooltip4.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Toolbar2.Button, {
+    classNames: mx4("gap-2 plb-1", classNames),
+    disabled
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ React6.createElement(Palette, {
+    className: getSize4(5)
+  })))), /* @__PURE__ */ React6.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip4.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select hue label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2)
+    }, /* @__PURE__ */ React6.createElement(HuePreview, {
+      hue: hue2
+    }), /* @__PURE__ */ React6.createElement("span", {
+      className: "grow"
+    }, t(`${hue2} label`)), /* @__PURE__ */ React6.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React6.createElement(Check2, null)));
+  })), /* @__PURE__ */ React6.createElement(DropdownMenu.Arrow, null))));
+};
+var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+  const { t } = useTranslation4("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
     modal: false
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React6.createElement(Button4, {
     variant: "ghost",
     classNames: "gap-2 plb-1",
     disabled
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React5.createElement("div", {
+  }, t("select hue label")), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "pis-14 grow flex items-center justify-center gap-2"
-  }, /* @__PURE__ */ React5.createElement(HuePreview, {
+  }, /* @__PURE__ */ React6.createElement(HuePreview, {
     hue: hueValue
-  }), /* @__PURE__ */ React5.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React5.createElement(CaretDown2, {
-    className: getSize3(4)
-  }))), /* @__PURE__ */ React5.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React6.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React6.createElement(CaretDown2, {
+    className: getSize4(4)
+  }))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
     side: "right"
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
-    return /* @__PURE__ */ React5.createElement(DropdownMenu.CheckboxItem, {
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
       key: hue2,
       checked: hue2 === hueValue,
       onCheckedChange: () => setHueValue(hue2)
-    }, /* @__PURE__ */ React5.createElement(HuePreview, {
+    }, /* @__PURE__ */ React6.createElement(HuePreview, {
       hue: hue2
-    }), /* @__PURE__ */ React5.createElement("span", {
+    }), /* @__PURE__ */ React6.createElement("span", {
       className: "grow"
-    }, t(`${hue2} label`)), /* @__PURE__ */ React5.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React5.createElement(Check2, null)));
-  })), /* @__PURE__ */ React5.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Root, null, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+    }, t(`${hue2} label`)), /* @__PURE__ */ React6.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React6.createElement(Check2, null)));
+  })), /* @__PURE__ */ React6.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React6.createElement(Tooltip4.Root, null, /* @__PURE__ */ React6.createElement(Tooltip4.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React6.createElement(Button4, {
     variant: "ghost",
     onClick: onClickClear,
     disabled
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React5.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+  }, t("clear label")), /* @__PURE__ */ React6.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React6.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip4.Content, {
     style: {
       zIndex: 70
     },
     side: "right"
-  }, t("clear label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null)))));
+  }, t("clear label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null)))));
 };
 
-// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
-import React7 from "react";
-import { generateName as generateName2 } from "@dxos/display-name";
-import { DeviceType } from "@dxos/react-client/halo";
-import { List, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { descriptionText as descriptionText2, mx as mx4 } from "@dxos/react-ui-theme";
-
 // packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
-import React6, { forwardRef } from "react";
+import React7, { forwardRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { SpaceMember } from "@dxos/react-client/echo";
-import { ListItem, Avatar, useId as useId2 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { ListItem, Avatar as Avatar2, useId as useId2 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 import { keyToFallback } from "@dxos/util";
 var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
   const fallbackValue = keyToFallback(identity.identityKey);
   const labelId = useId2("identityListItem__label");
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
-  return /* @__PURE__ */ React6.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React7.createElement(ListItem.Root, {
     ...props,
-    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
+    classNames: mx5("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
     onClick: () => onClick?.(),
     "data-testid": "identity-list-item",
     labelId,
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(Avatar.Root, {
+  }, /* @__PURE__ */ React7.createElement(Avatar2.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
     labelId,
     hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React6.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React7.createElement(Avatar2.Frame, {
     classNames: "place-self-center"
-  }, /* @__PURE__ */ React6.createElement(Avatar.Fallback, {
+  }, /* @__PURE__ */ React7.createElement(Avatar2.Fallback, {
     text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React6.createElement(Avatar.Label, {
+  })), /* @__PURE__ */ React7.createElement(Avatar2.Label, {
     classNames: "text-sm truncate pli-2"
   }, displayName)));
 });
 
-// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
-var DeviceList = ({ devices, onSelect }) => {
-  const { t } = useTranslation4("os");
-  return devices.length > 0 ? /* @__PURE__ */ React7.createElement(List, {
-    classNames: "flex flex-col gap-2"
-  }, devices.map((device) => {
-    const deviceType = device.profile?.type || DeviceType.UNKNOWN;
-    const displayName = device.profile?.label ? `${device.profile.label} (${DeviceType[deviceType]})` : generateName2(device.deviceKey.toHex());
-    const identity = {
-      identityKey: device.deviceKey,
-      profile: {
-        displayName
-      }
-    };
-    return /* @__PURE__ */ React7.createElement(IdentityListItem, {
-      key: device.deviceKey.toHex(),
-      identity,
-      presence: device.presence,
-      onClick: onSelect && (() => onSelect(device))
-    });
-  })) : /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "grow flex items-center p-2"
-  }, /* @__PURE__ */ React7.createElement("p", {
-    className: mx4(descriptionText2, "text-center is-full")
-  }, t("empty device list message")));
-};
-
 // packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
 import React8, { useMemo } from "react";
 import { useClient } from "@dxos/react-client";
 import { useMembers } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation5, List as List2 } from "@dxos/react-ui";
-import { descriptionText as descriptionText3, mx as mx5 } from "@dxos/react-ui-theme";
+import { useTranslation as useTranslation5, List } from "@dxos/react-ui";
+import { descriptionText as descriptionText3, mx as mx6 } from "@dxos/react-ui-theme";
 var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
   const allUnsortedMembers = useMembers(spaceKey);
@@ -369,7 +513,7 @@ var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
 var SpaceMemberListImpl = ({ members, onSelect }) => {
   const { t } = useTranslation5("os");
   const visibleMembers = members.filter((member) => member.identity);
-  return visibleMembers.length > 0 ? /* @__PURE__ */ React8.createElement(List2, {
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React8.createElement(List, {
     classNames: "flex flex-col gap-2",
     "data-testid": "space-members-list"
   }, visibleMembers.map((member) => {
@@ -383,22 +527,132 @@ var SpaceMemberListImpl = ({ members, onSelect }) => {
     role: "none",
     className: "grow flex items-center p-2"
   }, /* @__PURE__ */ React8.createElement("p", {
-    className: mx5(descriptionText3, "text-center is-full mlb-2")
+    className: mx6(descriptionText3, "text-center is-full mlb-2")
   }, t("empty space members message")));
 };
 
+// packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
+import { CaretRight, Plus as Plus2 } from "@phosphor-icons/react";
+import React10 from "react";
+import { Button as Button6, List as List2, useTranslation as useTranslation7 } from "@dxos/react-ui";
+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, Intersect, Power as Power2, Robot } from "@phosphor-icons/react";
+import React9, { forwardRef as forwardRef2 } from "react";
+import { generateName as generateName2 } from "@dxos/display-name";
+import { Device, DeviceType, DeviceKind } from "@dxos/react-client/halo";
+import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation6, DropdownMenu as DropdownMenu2, Button as Button5 } from "@dxos/react-ui";
+import { getSize as getSize5 } from "@dxos/react-ui-theme";
+import { keyToFallback as keyToFallback2 } from "@dxos/util";
+var iconProps = {
+  weight: "duotone",
+  width: 24,
+  height: 24,
+  x: 8,
+  y: 8
+};
+var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, ...props }, forwardedRef) => {
+  const { t } = useTranslation6("os");
+  const fallbackValue = keyToFallback2(device.deviceKey);
+  const labelId = useId3("identityListItem__label");
+  const displayName = device.profile ? t("device name placeholder", {
+    os: device.profile.os,
+    platform: device.profile.platform
+  }) : generateName2(device.deviceKey.toHex());
+  const isCurrent = device.kind === DeviceKind.CURRENT;
+  return /* @__PURE__ */ React9.createElement(ListItem2.Root, {
+    ...props,
+    classNames: [
+      "flex gap-2 items-center mlb-2",
+      classNames
+    ],
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}`,
+    labelId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React9.createElement(Avatar3.Root, {
+    status: device.presence === Device.PresenceState.ONLINE ? "active" : "inactive",
+    labelId,
+    hue: fallbackValue.hue,
+    variant: "square"
+  }, /* @__PURE__ */ React9.createElement(Avatar3.Frame, {
+    classNames: "place-self-center"
+  }, device.profile?.type ? device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React9.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React9.createElement(Desktop, iconProps) : [
+    DeviceType.AGENT,
+    DeviceType.AGENT_MANAGED
+  ].includes(device.profile.type) ? /* @__PURE__ */ React9.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React9.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React9.createElement(Devices, iconProps) : /* @__PURE__ */ React9.createElement(Avatar3.Fallback, {
+    text: fallbackValue.emoji
+  })), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
+    color: "primary"
+  }, t("current device tag label")), /* @__PURE__ */ React9.createElement(Avatar3.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, displayName), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button5, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}.options`
+  }, /* @__PURE__ */ React9.createElement("span", {
+    className: "sr-only"
+  }, t("more options label")), /* @__PURE__ */ React9.createElement(DotsThree, {
+    className: getSize5(5)
+  }))), /* @__PURE__ */ React9.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+    "data-testid": "device-list-item-current.join-existing",
+    onClick: onClickJoinExisting
+  }, /* @__PURE__ */ React9.createElement(Intersect, {
+    className: getSize5(5)
+  }), t("choose join new identity label")), /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+    "data-testid": "device-list-item-current.reset",
+    onClick: onClickReset
+  }, /* @__PURE__ */ React9.createElement(Power2, {
+    className: getSize5(5)
+  }), t("reset device label")))))));
+});
+
+// packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
+var DeviceList = ({ devices, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting }) => {
+  const { t } = useTranslation7("os");
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("h2", {
+    className: mx7(descriptionText4, "text-center mbs-4")
+  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ React10.createElement(List2, null, devices.map((device) => {
+    return /* @__PURE__ */ React10.createElement(DeviceListItem, {
+      key: device.deviceKey.toHex(),
+      device,
+      onClickEdit: () => onClickEdit?.(device),
+      onClickReset,
+      onClickJoinExisting
+    });
+  })), /* @__PURE__ */ React10.createElement(Button6, {
+    variant: "ghost",
+    classNames: "justify-start gap-2 !pis-0 !pie-3",
+    "data-testid": "devices-panel.create-invitation",
+    onClick: onClickAdd
+  }, /* @__PURE__ */ React10.createElement("div", {
+    role: "img",
+    className: mx7(getSize6(8), "m-1 rounded-sm surface-input grid place-items-center")
+  }, /* @__PURE__ */ React10.createElement(Plus2, {
+    weight: "light",
+    className: getSize6(6)
+  })), /* @__PURE__ */ React10.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t("choose add device label")), /* @__PURE__ */ React10.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })));
+};
+
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns";
-import React10, { useCallback as useCallback2 } from "react";
+import React12, { useCallback as useCallback2 } from "react";
 import { Invitation, useInvitationStatus } from "@dxos/react-client/invitations";
-import { Button as Button4, ListItem as ListItem2, useTranslation as useTranslation6, Avatar as Avatar2, useThemeContext as useThemeContext3, Tooltip as Tooltip4 } from "@dxos/react-ui";
-import { focusRing, getSize as getSize4, mx as mx7 } from "@dxos/react-ui-theme";
+import { Button as Button7, ListItem as ListItem3, useTranslation as useTranslation8, Avatar as Avatar4, useThemeContext as useThemeContext3, Tooltip as Tooltip5 } from "@dxos/react-ui";
+import { focusRing, getSize as getSize7, mx as mx9 } from "@dxos/react-ui-theme";
 import { hexToEmoji } from "@dxos/util";
 
 // packages/sdk/shell/src/components/AuthCode.tsx
-import React9 from "react";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import React11 from "react";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 var AuthCode = (props) => {
   const { code, large, classNames } = props;
   const l = code?.length ?? 0;
@@ -407,17 +661,17 @@ var AuthCode = (props) => {
   const handleCopy = () => {
     void navigator.clipboard.writeText(code ?? "");
   };
-  return /* @__PURE__ */ React9.createElement("span", {
-    className: mx6(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 flex gap-1.5 rounded cursor-pointer", classNames),
+  return /* @__PURE__ */ React11.createElement("span", {
+    className: mx8(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 flex gap-1.5 rounded cursor-pointer", classNames),
     onClick: handleCopy
-  }, /* @__PURE__ */ React9.createElement("span", null, left), /* @__PURE__ */ React9.createElement("span", null, right));
+  }, /* @__PURE__ */ React11.createElement("span", null, left), /* @__PURE__ */ React11.createElement("span", null, right));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 var InvitationListItem = (props) => {
   const { invitation } = props;
   const invitationStatus = useInvitationStatus(invitation);
-  return /* @__PURE__ */ React10.createElement(InvitationListItemImpl, {
+  return /* @__PURE__ */ React12.createElement(InvitationListItemImpl, {
     ...props,
     invitationStatus
   });
@@ -428,10 +682,10 @@ var avatarProps = {
 };
 var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   const { tx } = useThemeContext3();
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize4(avatarProps.size))
-  }, /* @__PURE__ */ React10.createElement("span", {
+    className: mx9("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize7(avatarProps.size))
+  }, /* @__PURE__ */ React12.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -441,10 +695,10 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
     style: {
       animationDelay: "400ms"
     }
-  })), /* @__PURE__ */ React10.createElement("span", {
+  })), /* @__PURE__ */ React12.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize4(avatarProps.size))
-  }, /* @__PURE__ */ React10.createElement("span", {
+    className: mx9("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize7(avatarProps.size))
+  }, /* @__PURE__ */ React12.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -457,14 +711,14 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   })));
 };
 var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
-  const { t } = useTranslation6("os");
-  const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
+  const { t } = useTranslation8("os");
+  const { cancel, status: invitationStatus, invitationCode, authCode, multiUse } = propsInvitationStatus;
   const isCancellable = !([
     Invitation.State.ERROR,
     Invitation.State.TIMEOUT,
     Invitation.State.CANCELLED
   ].indexOf(invitationStatus) >= 0);
-  const showShare = type === Invitation.Type.MULTIUSE || [
+  const showShare = multiUse || [
     Invitation.State.INIT,
     Invitation.State.CONNECTING,
     Invitation.State.CONNECTED
@@ -499,39 +753,39 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     Invitation.State.SUCCESS
   ].includes(invitationStatus);
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
-  return /* @__PURE__ */ React10.createElement(ListItem2.Root, {
+  return /* @__PURE__ */ React12.createElement(ListItem3.Root, {
     id: invitationCode,
     ...props,
     classNames: [
       "flex gap-2 pis-3 pie-1 items-center relative",
       props.classNames
     ]
-  }, /* @__PURE__ */ React10.createElement(ListItem2.Heading, {
+  }, /* @__PURE__ */ React12.createElement(ListItem3.Heading, {
     classNames: "sr-only"
-  }, t(type === Invitation.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation.Type.MULTIUSE && /* @__PURE__ */ React10.createElement(AvatarStackEffect, {
+  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React12.createElement(AvatarStackEffect, {
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(Avatar2.Root, {
+  }), /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(Avatar4.Root, {
     ...avatarProps,
     animation: avatarAnimation,
     status: avatarStatus
-  }, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
+  }, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(Avatar2.Frame, {
+  }, /* @__PURE__ */ React12.createElement(Avatar4.Frame, {
     tabIndex: 0,
     classNames: [
       focusRing,
       "relative rounded-full place-self-center"
     ]
-  }, /* @__PURE__ */ React10.createElement(Avatar2.Fallback, {
+  }, /* @__PURE__ */ React12.createElement(Avatar4.Fallback, {
     text: hexToEmoji(invitationId)
-  })))), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
+  })))), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, t(type === Invitation.Type.MULTIUSE ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React10.createElement(Tooltip4.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React12.createElement(Tooltip5.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(Button4, {
+  }, /* @__PURE__ */ React12.createElement(Button7, {
     variant: "ghost",
     classNames: "grow justify-start font-medium",
     onClick: () => send({
@@ -539,63 +793,63 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
       invitation
     }),
     "data-testid": "show-qrcode"
-  }, /* @__PURE__ */ React10.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React10.createElement(CopyButtonIconOnly, {
+  }, /* @__PURE__ */ React12.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React12.createElement(CopyButtonIconOnly, {
     variant: "ghost",
     value: invitationUrl
-  })), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
+  })), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, invitationHasLifetime && /* @__PURE__ */ React10.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React10.createElement(AuthCode, {
+  }, invitationHasLifetime && /* @__PURE__ */ React12.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React12.createElement(AuthCode, {
     code: authCode,
     classNames: "grow"
-  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React10.createElement("span", {
+  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React12.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React12.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React12.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React12.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React12.createElement("span", {
     className: "pli-2 grow truncate"
-  }, "User joined") : /* @__PURE__ */ React10.createElement("span", {
+  }, "User joined") : /* @__PURE__ */ React12.createElement("span", {
     className: "grow"
-  }, " "), isCancellable ? /* @__PURE__ */ React10.createElement(Button4, {
+  }, " "), isCancellable ? /* @__PURE__ */ React12.createElement(Button7, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
-  }, /* @__PURE__ */ React10.createElement("span", {
+  }, /* @__PURE__ */ React12.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React10.createElement(X, {
-    className: getSize4(4)
-  })) : /* @__PURE__ */ React10.createElement(Button4, {
+  }, t("cancel invitation label")), /* @__PURE__ */ React12.createElement(X, {
+    className: getSize7(4)
+  })) : /* @__PURE__ */ React12.createElement(Button7, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
-  }, /* @__PURE__ */ React10.createElement("span", {
+  }, /* @__PURE__ */ React12.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React10.createElement(X, {
-    className: getSize4(4)
+  }, t("remove invitation label")), /* @__PURE__ */ React12.createElement(X, {
+    className: getSize7(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
-import React12, { useCallback as useCallback3 } from "react";
+import React14, { useCallback as useCallback3 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
-import React11 from "react";
+import React13 from "react";
 import { List as List3 } from "@dxos/react-ui";
-import { mx as mx8 } from "@dxos/react-ui-theme";
+import { mx as mx10 } from "@dxos/react-ui-theme";
 var InvitationList = ({ invitations, send, ...invitationProps }) => {
   const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
-  return /* @__PURE__ */ React11.createElement(List3, {
-    classNames: mx8("flex flex-col gap-2", className)
+  return /* @__PURE__ */ React13.createElement(List3, {
+    classNames: mx10("flex flex-col gap-2", className)
   }, invitations.map((invitation) => {
     const value = invitation.get().invitationId;
-    return /* @__PURE__ */ React11.createElement(Item, {
+    return /* @__PURE__ */ React13.createElement(Item, {
       key: value,
       send,
       invitation,
@@ -613,7 +867,7 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React12.createElement(InvitationList, {
+  return /* @__PURE__ */ React14.createElement(InvitationList, {
     invitations,
     onClickRemove,
     createInvitationUrl,
@@ -624,9 +878,9 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
 // packages/sdk/shell/src/components/Panel/Action.tsx
 import { CaretDown as CaretDown3, Check as Check3, Placeholder } from "@phosphor-icons/react";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React13, { forwardRef as forwardRef2 } from "react";
-import { Button as Button5, DropdownMenu as DropdownMenu2, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { descriptionText as descriptionText4, getSize as getSize5, mx as mx9 } from "@dxos/react-ui-theme";
+import React15, { forwardRef as forwardRef3 } from "react";
+import { Button as Button8, DropdownMenu as DropdownMenu3, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { descriptionText as descriptionText5, getSize as getSize8, mx as mx11 } from "@dxos/react-ui-theme";
 var defaultActions = {
   noopAction: {
     label: "No-op",
@@ -636,7 +890,7 @@ var defaultActions = {
     }
   }
 };
-var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, ...rest } = props;
   const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState3({
     prop: propsActiveAction,
@@ -644,11 +898,11 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     defaultProp: defaultActiveAction
   });
   const activeAction = actions[activeActionKey2] ?? {};
-  const { t } = useTranslation7("os");
-  return /* @__PURE__ */ React13.createElement("div", {
+  const { t } = useTranslation9("os");
+  return /* @__PURE__ */ React15.createElement("div", {
     role: "none",
-    className: mx9("mbs-2 flex gap-px items-center", isFull && "is-full")
-  }, /* @__PURE__ */ React13.createElement(Button5, {
+    className: mx11("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ React15.createElement(Button8, {
     ...rest,
     classNames: [
       "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
@@ -657,48 +911,48 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ref: forwardedRef,
     variant,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React13.createElement(activeAction.icon, {
-    className: getSize5(5)
-  }), /* @__PURE__ */ React13.createElement("span", null, activeAction.label)), /* @__PURE__ */ React13.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React13.createElement(DropdownMenu2.Trigger, {
+  }, activeAction.icon && /* @__PURE__ */ React15.createElement(activeAction.icon, {
+    className: getSize8(5)
+  }), /* @__PURE__ */ React15.createElement("span", null, activeAction.label)), /* @__PURE__ */ React15.createElement(DropdownMenu3.Root, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React13.createElement(Button5, {
+  }, /* @__PURE__ */ React15.createElement(Button8, {
     classNames: [
       "bs-11 flex-none rounded-is-none",
       classNames
     ]
-  }, /* @__PURE__ */ React13.createElement("span", {
+  }, /* @__PURE__ */ React15.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React13.createElement(CaretDown3, {
-    className: getSize5(4)
-  }))), /* @__PURE__ */ React13.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React13.createElement(DropdownMenu2.Viewport, null, Object.entries(actions).map(([id, action]) => {
-    return /* @__PURE__ */ React13.createElement(DropdownMenu2.CheckboxItem, {
+  }, t("invite options label")), /* @__PURE__ */ React15.createElement(CaretDown3, {
+    className: getSize8(4)
+  }))), /* @__PURE__ */ React15.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ React15.createElement(DropdownMenu3.CheckboxItem, {
       key: id,
       "aria-labelledby": `${id}__label`,
       "aria-describedby": `${id}__description`,
       checked: activeActionKey2 === id,
       onCheckedChange: (checked) => checked && setActiveAction(id),
       classNames: "gap-2"
-    }, action.icon && /* @__PURE__ */ React13.createElement(action.icon, {
-      className: getSize5(5)
-    }), /* @__PURE__ */ React13.createElement("div", {
+    }, action.icon && /* @__PURE__ */ React15.createElement(action.icon, {
+      className: getSize8(5)
+    }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: "flex-1 min-is-0 space-b-1"
-    }, /* @__PURE__ */ React13.createElement("p", {
+    }, /* @__PURE__ */ React15.createElement("p", {
       id: `${id}__label`
-    }, action.label), action.description && /* @__PURE__ */ React13.createElement("p", {
+    }, action.label), action.description && /* @__PURE__ */ React15.createElement("p", {
       id: `${id}__description`,
-      className: descriptionText4
-    }, action.description)), /* @__PURE__ */ React13.createElement(DropdownMenu2.ItemIndicator, {
+      className: descriptionText5
+    }, action.description)), /* @__PURE__ */ React15.createElement(DropdownMenu3.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React13.createElement(Check3, {
+    }, /* @__PURE__ */ React15.createElement(Check3, {
       weight: "bold",
-      className: getSize5(4)
+      className: getSize8(4)
     })));
-  })), /* @__PURE__ */ React13.createElement(DropdownMenu2.Arrow, null))));
+  })), /* @__PURE__ */ React15.createElement(DropdownMenu3.Arrow, null))));
 });
-var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { children, classNames, variant, isFull = true, ...rest } = props;
-  return /* @__PURE__ */ React13.createElement(Button5, {
+  return /* @__PURE__ */ React15.createElement(Button8, {
     ...rest,
     classNames: [
       isFull && "is-full",
@@ -711,49 +965,49 @@ var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
 });
 
 // packages/sdk/shell/src/components/Panel/Actions.tsx
-import React14, { forwardRef as forwardRef3 } from "react";
-import { mx as mx10 } from "@dxos/react-ui-theme";
-var Actions = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React14.createElement("div", {
+import React16, { forwardRef as forwardRef4 } from "react";
+import { mx as mx12 } from "@dxos/react-ui-theme";
+var Actions = /* @__PURE__ */ forwardRef4(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React16.createElement("div", {
     ...props,
-    className: mx10("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
+    className: mx12("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
     ref: forwardedRef
   }, children);
 });
 
 // packages/sdk/shell/src/components/Panel/CloseButton.tsx
 import { X as X2 } from "@phosphor-icons/react";
-import React15 from "react";
-import { Button as Button6, useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { getSize as getSize6, mx as mx11 } from "@dxos/react-ui-theme";
+import React17 from "react";
+import { Button as Button9, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { getSize as getSize9, mx as mx13 } from "@dxos/react-ui-theme";
 var CloseButton = ({ onDone, ...props }) => {
-  const { t } = useTranslation8("os");
-  return /* @__PURE__ */ React15.createElement(Button6, {
+  const { t } = useTranslation10("os");
+  return /* @__PURE__ */ React17.createElement(Button9, {
     variant: "ghost",
-    classNames: mx11("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx13("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     onClick: () => onDone?.(),
     ...props
-  }, /* @__PURE__ */ React15.createElement(X2, {
+  }, /* @__PURE__ */ React17.createElement(X2, {
     weight: "bold",
-    className: getSize6(4)
-  }), /* @__PURE__ */ React15.createElement("span", {
+    className: getSize9(4)
+  }), /* @__PURE__ */ React17.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
 };
 
 // packages/sdk/shell/src/components/Panel/Emoji.tsx
-import React16 from "react";
-import { mx as mx12, getSize as getSize7 } from "@dxos/react-ui-theme";
+import React18 from "react";
+import { mx as mx14, getSize as getSize10 } from "@dxos/react-ui-theme";
 var Emoji = ({ text, className }) => {
   const size = 14;
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx12(getSize7(size), "rounded relative pointer-events-none", className)
-  }, /* @__PURE__ */ React16.createElement("svg", {
+    className: mx14(getSize10(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React18.createElement("svg", {
     viewBox: `0 0 ${size * 4} ${size * 4}`,
     width: size * 4,
     height: size * 4
-  }, /* @__PURE__ */ React16.createElement("text", {
+  }, /* @__PURE__ */ React18.createElement("text", {
     x: "50%",
     y: "50%",
     textAnchor: "middle",
@@ -764,57 +1018,57 @@ var Emoji = ({ text, className }) => {
 };
 var Centered = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     role: "none",
     className: "absolute inset-0 flex items-center justify-center"
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Heading.tsx
-import React17, { forwardRef as forwardRef4 } from "react";
-import { descriptionText as descriptionText5, mx as mx13 } from "@dxos/react-ui-theme";
-var Heading = /* @__PURE__ */ forwardRef4(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement("div", {
+import React19, { forwardRef as forwardRef5 } from "react";
+import { descriptionText as descriptionText6, mx as mx15 } from "@dxos/react-ui-theme";
+var Heading = /* @__PURE__ */ forwardRef5(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement("div", {
     role: "none",
     className: "pbe-2 relative",
     ref: forwardedRef
-  }, corner, /* @__PURE__ */ React17.createElement("h1", {
+  }, corner, /* @__PURE__ */ React19.createElement("h1", {
     ...!titleSrOnly && {
       id: titleId
     },
-    className: mx13(descriptionText5, "text-center mlb-2", titleSrOnly && "invisible")
-  }, title), titleSrOnly && /* @__PURE__ */ React17.createElement("span", {
+    className: mx15(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ React19.createElement("span", {
     id: titleId
   }, title), children);
 });
 
 // packages/sdk/shell/src/components/Panel/Label.tsx
-import React18 from "react";
-import { descriptionText as descriptionText6, mx as mx14 } from "@dxos/react-ui-theme";
+import React20 from "react";
+import { descriptionText as descriptionText7, mx as mx16 } from "@dxos/react-ui-theme";
 var Label = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React18.createElement("span", {
-    className: mx14(descriptionText6, "text-center mli-6 whitespace-normal")
+  return /* @__PURE__ */ React20.createElement("span", {
+    className: mx16(descriptionText7, "text-center mli-6 whitespace-normal")
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Input.tsx
-import React19 from "react";
+import React21 from "react";
 import { Input as UiInput } from "@dxos/react-ui";
 var Input = ({ validationMessage, label, ...props }) => {
-  return /* @__PURE__ */ React19.createElement(UiInput.Root, null, /* @__PURE__ */ React19.createElement(UiInput.Label, null, label), /* @__PURE__ */ React19.createElement(UiInput.TextInput, {
+  return /* @__PURE__ */ React21.createElement(UiInput.Root, null, /* @__PURE__ */ React21.createElement(UiInput.Label, null, label), /* @__PURE__ */ React21.createElement(UiInput.TextInput, {
     ...props,
     classNames: "plb-3 mbs-2 text-center"
-  }), /* @__PURE__ */ React19.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React19.createElement(UiInput.Validation, null, validationMessage)));
+  }), /* @__PURE__ */ React21.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React21.createElement(UiInput.Validation, null, validationMessage)));
 };
 
 // packages/sdk/shell/src/components/Panel/StepHeading.tsx
-import React20, { forwardRef as forwardRef5 } from "react";
-import { mx as mx15 } from "@dxos/react-ui-theme";
-var StepHeading = /* @__PURE__ */ forwardRef5(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React20.createElement("h2", {
+import React22, { forwardRef as forwardRef6 } from "react";
+import { mx as mx17 } from "@dxos/react-ui-theme";
+var StepHeading = /* @__PURE__ */ forwardRef6(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React22.createElement("h2", {
     ...props,
-    className: mx15("font-normal text-sm mbe-4 mli-1 text-center", className),
+    className: mx17("font-normal text-sm mbe-4 mli-1 text-center", className),
     ref: forwardedRef
   }, children);
 });
@@ -823,9 +1077,9 @@ var StepHeading = /* @__PURE__ */ forwardRef5(({ children, className, ...props }
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React21, { forwardRef as forwardRef6, useEffect } from "react";
+import React23, { forwardRef as forwardRef7, useEffect } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx16 } from "@dxos/react-ui-theme";
+import { mx as mx18 } from "@dxos/react-ui-theme";
 var VIEWPORT_NAME = "Viewport";
 var VIEWS_NAME = "ViewportViews";
 var VIEW_NAME = "ViewportView";
@@ -837,16 +1091,16 @@ var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView,
     defaultProp: defaultActiveView,
     onChange: onActiveViewChange
   });
-  return /* @__PURE__ */ React21.createElement(ViewportProvider, {
+  return /* @__PURE__ */ React23.createElement(ViewportProvider, {
     focusManaged,
     activeView,
     setActiveView,
     scope: __viewportScope
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     role: "region",
     "aria-live": "polite",
     ...props,
-    className: mx16("is-full overflow-hidden", classNames)
+    className: mx18("is-full overflow-hidden", classNames)
   }, children));
 };
 ViewportRoot.displayName = VIEWPORT_NAME;
@@ -854,15 +1108,15 @@ var ViewportViews = ({ classNames, children, ...props }) => {
   const size = {
     inlineSize: `${Math.ceil(children.length) * 100}%`
   };
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     style: size,
     ...props,
-    className: mx16("flex", classNames)
+    className: mx18("flex", classNames)
   }, children);
 };
 ViewportViews.displayName = VIEWS_NAME;
-var ViewportView = /* @__PURE__ */ forwardRef6(({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
+var ViewportView = /* @__PURE__ */ forwardRef7(({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
   const { activeView, focusManaged } = useViewportContext(VIEW_NAME, __viewportScope);
   const isActive = id === activeView;
   const ref = useForwardedRef(forwardedRef);
@@ -876,12 +1130,12 @@ var ViewportView = /* @__PURE__ */ forwardRef6(({ __viewportScope, classNames, c
     ref.current,
     isActive
   ]);
-  return /* @__PURE__ */ React21.createElement("section", {
+  return /* @__PURE__ */ React23.createElement("section", {
     ...props,
     ...!isActive && {
       "aria-hidden": true
     },
-    className: mx16("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
+    className: mx18("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
     ref
   }, children);
 });
@@ -893,41 +1147,44 @@ var Viewport = {
 };
 
 // packages/sdk/shell/src/components/SpaceListItem.tsx
-import React22, { forwardRef as forwardRef7 } from "react";
-import { Avatar as Avatar3, useId as useId3 } from "@dxos/react-ui";
-import { mx as mx17 } from "@dxos/react-ui-theme";
+import React24, { forwardRef as forwardRef8 } from "react";
+import { Avatar as Avatar5, useId as useId4 } from "@dxos/react-ui";
+import { mx as mx19 } from "@dxos/react-ui-theme";
 import { humanize, keyToEmoji } from "@dxos/util";
-var SpaceListItem = /* @__PURE__ */ forwardRef7(({ space, onClick }, ref) => {
+var SpaceListItem = /* @__PURE__ */ forwardRef8(({ space, onClick }, ref) => {
   const fallbackValue = keyToEmoji(space.key);
-  const labelId = useId3("identityListItem__label");
+  const labelId = useId4("identityListItem__label");
   const displayName = space.properties.name ?? humanize(space.key.toHex());
-  return /* @__PURE__ */ React22.createElement("li", {
-    className: mx17("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+  return /* @__PURE__ */ React24.createElement("li", {
+    className: mx19("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick?.(),
     ref,
     "data-testid": "space-list-item"
-  }, /* @__PURE__ */ React22.createElement(Avatar3.Root, {
+  }, /* @__PURE__ */ React24.createElement(Avatar5.Root, {
     labelId
-  }, /* @__PURE__ */ React22.createElement(Avatar3.Frame, null, /* @__PURE__ */ React22.createElement(Avatar3.Fallback, {
+  }, /* @__PURE__ */ React24.createElement(Avatar5.Frame, null, /* @__PURE__ */ React24.createElement(Avatar5.Fallback, {
     text: fallbackValue
-  })), /* @__PURE__ */ React22.createElement(Avatar3.Label, {
+  })), /* @__PURE__ */ React24.createElement(Avatar5.Label, {
     classNames: "text-sm truncate"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 import React42 from "react";
-import { Dialog, useId as useId9 } from "@dxos/react-ui";
+import { Dialog, useId as useId10 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import React29, { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { CopySimple, Plugs, PlugsConnected } from "@phosphor-icons/react";
+import React29, { useEffect as useEffect3, useMemo as useMemo3, useState as useState8 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
 import { log as log6 } from "@dxos/log";
 import { useClient as useClient3 } 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 { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useTranslation as useTranslation15 } from "@dxos/react-ui";
-import { keyToFallback as keyToFallback2 } from "@dxos/util";
+import { useNetworkStatus, ConnectionState } from "@dxos/react-client/mesh";
+import { Avatar as Avatar6, DensityProvider, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip6, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { getSize as getSize13 } from "@dxos/react-ui-theme";
+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";
@@ -953,11 +1210,6 @@ var identityMachine = createMachine({
           target: "managingDeviceInvitation",
           actions: "log"
         },
-        {
-          cond: "initiallyManagingProfile",
-          target: "managingProfile",
-          actions: "log"
-        },
         {
           target: "choosingAction",
           actions: "log"
@@ -966,34 +1218,6 @@ var identityMachine = createMachine({
     },
     choosingAction: {},
     managingDeviceInvitation: {},
-    managingAgent: {
-      initial: "idle",
-      states: {
-        idle: {},
-        pending: {}
-      }
-    },
-    managingDevices: {},
-    managingProfile: {
-      initial: "idle",
-      states: {
-        idle: {},
-        pending: {}
-      },
-      on: {
-        setIdentity: {
-          target: "choosingAction",
-          actions: [
-            "setIdentity",
-            "log"
-          ]
-        },
-        updateProfile: {
-          target: ".pending",
-          actions: "log"
-        }
-      }
-    },
     confirmingResetStorage: {},
     confirmingJoinNewIdentity: {}
   },
@@ -1019,14 +1243,6 @@ var identityMachine = createMachine({
         "log"
       ]
     },
-    chooseDevices: {
-      target: ".managingDevices",
-      actions: "log"
-    },
-    chooseProfile: {
-      target: ".managingProfile",
-      actions: "log"
-    },
     chooseJoinNewIdentity: {
       target: ".confirmingJoinNewIdentity",
       actions: "log"
@@ -1034,16 +1250,11 @@ var identityMachine = createMachine({
     chooseResetStorage: {
       target: ".confirmingResetStorage",
       actions: "log"
-    },
-    chooseAgent: {
-      target: ".managingAgent",
-      actions: "log"
     }
   }
 }, {
   guards: {
-    initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) => initialDisposition === "manage-device-invitation",
-    initiallyManagingProfile: ({ initialDisposition }, _event) => initialDisposition === "manage-profile"
+    initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) => initialDisposition === "manage-device-invitation"
   },
   actions: {
     setIdentity: assign({
@@ -1061,7 +1272,7 @@ var identityMachine = createMachine({
         context
       }, {
         F: __dxlog_file,
-        L: 126,
+        L: 96,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1082,69 +1293,12 @@ var useIdentityMachine = (client, options) => {
   });
 };
 
-// packages/sdk/shell/src/panels/IdentityPanel/steps/AgentForm.tsx
-import React23 from "react";
-import { useTranslation as useTranslation9 } from "@dxos/react-ui";
-var AgentForm = (props) => {
-  const { active, onAgentCreate, onAgentDestroy, send, validationMessage, agentStatus, agentActive, agentProviderDisabled } = props;
-  const disabled = !active;
-  const { t } = useTranslation9("os");
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", {
-    role: "none",
-    className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React23.createElement(Input, {
-    validationMessage,
-    label: /* @__PURE__ */ React23.createElement(StepHeading, null, "Agent Status"),
-    disabled,
-    "data-testid": "agent-status",
-    value: agentStatus
-  })), /* @__PURE__ */ React23.createElement(Actions, null, /* @__PURE__ */ React23.createElement(Action, {
-    disabled: agentActive || agentProviderDisabled,
-    onClick: () => onAgentCreate?.(),
-    "data-testid": "create-agent"
-  }, "Create Agent"), /* @__PURE__ */ React23.createElement(Action, {
-    disabled: !agentActive || agentProviderDisabled,
-    onClick: () => onAgentDestroy?.(),
-    "data-testid": "destroy-agent"
-  }, "Destroy Agent"), /* @__PURE__ */ React23.createElement(Action, {
-    disabled,
-    onClick: () => send?.({
-      type: "unchooseAction"
-    }),
-    "data-testid": "update-profile-form-back"
-  }, t("back label"))));
-};
-
-// packages/sdk/shell/src/panels/IdentityPanel/steps/DeviceManager.tsx
-import React24 from "react";
-import { useTranslation as useTranslation10 } from "@dxos/react-ui";
-var DeviceManager = ({ devices, active, send }) => {
-  const { t } = useTranslation10("os");
-  const disabled = !active;
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
-    role: "none",
-    className: "grow"
-  }, /* @__PURE__ */ React24.createElement(DeviceList, {
-    devices
-  })), /* @__PURE__ */ React24.createElement(Actions, null, /* @__PURE__ */ React24.createElement(Action, {
-    variant: "ghost",
-    disabled,
-    onClick: () => send?.({
-      type: "unchooseAction"
-    }),
-    "data-testid": "manage-devices-back"
-  }, t("back label"))));
-};
-
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
-import { CaretRight, Devices, Plus, Power, UserGear, HardDrive, Intersect } from "@phosphor-icons/react";
 import React25, { useCallback as useCallback4 } from "react";
 import { log as log2 } from "@dxos/log";
 import { useAgentHostingProviderClient, useClient as useClient2 } from "@dxos/react-client";
 import { useHaloInvitations } from "@dxos/react-client/halo";
 import { Invitation as Invitation2, InvitationEncoder } from "@dxos/react-client/invitations";
-import { DensityProvider, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { getSize as getSize8 } from "@dxos/react-ui-theme";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx";
 var IdentityActionChooser = (props) => {
   const { send } = props;
@@ -1159,19 +1313,15 @@ var IdentityActionChooser = (props) => {
         authCode: invitation.authCode
       }), void 0, {
         F: __dxlog_file2,
-        L: 28,
+        L: 25,
         S: void 0,
         C: (f, a) => f(...a)
       });
     }
   }, []);
-  const createInvitation = (e) => {
-    const testing = e.altKey && e.shiftKey;
+  const createInvitation = () => {
     invitations.forEach((invitation2) => invitation2.cancel());
-    const invitation = client.halo.share(testing ? {
-      type: Invitation2.Type.MULTIUSE,
-      authMethod: Invitation2.AuthMethod.NONE
-    } : void 0);
+    const invitation = client.halo.share();
     if (true) {
       invitation.subscribe(onInvitationEvent);
     }
@@ -1182,216 +1332,45 @@ var IdentityActionChooser = (props) => {
   };
   return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
     ...props,
-    onCreateInvitationClick: (e) => createInvitation(e),
+    onCreateInvitationClick: createInvitation,
     agentHostingEnabled: !!agentHostingProviderClient
   });
 };
-var IdentityActionChooserImpl = ({ onCreateInvitationClick, active, send, onDone, doneActionParent, agentHostingEnabled }) => {
-  const { t } = useTranslation11("os");
-  return /* @__PURE__ */ React25.createElement("div", {
-    role: "none",
-    className: "grow flex flex-col gap-1"
-  }, /* @__PURE__ */ React25.createElement(DensityProvider, {
-    density: "coarse"
-  }, /* @__PURE__ */ React25.createElement("div", {
-    className: "grow justify-center flex flex-col gap-1"
-  }, /* @__PURE__ */ React25.createElement(Action, {
-    "data-testid": "manage-profile",
-    onClick: () => send?.({
-      type: "chooseProfile"
-    }),
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(UserGear, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, t("choose profile label")), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })), agentHostingEnabled && /* @__PURE__ */ React25.createElement(Action, {
-    "data-testid": "manage-agent",
-    onClick: () => send?.({
-      type: "chooseAgent"
-    }),
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(HardDrive, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, "Manage Agent"), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React25.createElement(Action, {
-    disabled: !active,
-    "data-testid": "devices-panel.create-invitation",
-    onClick: onCreateInvitationClick,
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(Plus, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, t("choose add device label")), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React25.createElement(Action, {
-    "data-testid": "devices-panel.join-new-identity",
-    onClick: () => send?.({
+var IdentityActionChooserImpl = ({ send, onCreateInvitationClick, devices, onAgentDestroy, onAgentCreate, agentStatus, agentActive, agentHostingEnabled }) => {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(DeviceList, {
+    devices,
+    onClickAdd: onCreateInvitationClick,
+    onClickJoinExisting: () => send?.({
       type: "chooseJoinNewIdentity"
     }),
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(Intersect, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, t("choose join new identity label")), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React25.createElement(Action, {
-    "data-testid": "manage-devices",
-    onClick: () => send?.({
-      type: "chooseDevices"
-    }),
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(Devices, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, t("choose devices label")), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React25.createElement(Action, {
-    "data-testid": "devices-panel.sign-out",
-    onClick: () => send?.({
+    onClickReset: () => send?.({
       type: "chooseResetStorage"
-    }),
-    classNames: "plb-4"
-  }, /* @__PURE__ */ React25.createElement(Power, {
-    className: getSize8(6)
-  }), /* @__PURE__ */ React25.createElement("span", {
-    className: "grow mli-3"
-  }, t("choose sign out label")), /* @__PURE__ */ React25.createElement(CaretRight, {
-    weight: "bold",
-    className: getSize8(4)
-  })))));
+    })
+  }), agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, {
+    agentActive,
+    agentStatus,
+    onAgentDestroy,
+    onAgentCreate
+  }));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
-import React26, { useState as useState4 } from "react";
+import React26, { useState as useState5 } from "react";
 import { log as log3 } from "@dxos/log";
-import { useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { useTranslation as useTranslation11 } from "@dxos/react-ui";
 import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx";
-var ProfileForm = (props) => {
-  const { onUpdateProfile } = props;
-  const { t } = useTranslation12("os");
-  const [validationMessage, setValidationMessage] = useState4("");
-  const handleUpdateProfile = async (profile) => {
-    await onUpdateProfile?.(profile).catch((error) => {
-      log3.catch(error, void 0, {
-        F: __dxlog_file3,
-        L: 33,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      setValidationMessage(t("failed to update profile message"));
-    });
-  };
-  return /* @__PURE__ */ React26.createElement(ProfileFormImpl, {
-    ...props,
-    onUpdateProfile: handleUpdateProfile,
-    validationMessage
-  });
-};
-var getHueValue = (identity) => identity?.profile?.data?.hue || hexToHue(identity?.identityKey.toHex() ?? "0");
-var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji2(identity?.identityKey.toHex() ?? "0");
-var ProfileFormImpl = (props) => {
-  const { active, identity, send, onUpdateProfile, validationMessage } = props;
-  const profile = identity?.profile;
-  const disabled = !active;
-  const { t } = useTranslation12("os");
-  const [displayName, setDisplayName] = useState4(profile?.displayName ?? "");
-  const [hue, setHue] = useState4(getHueValue(identity));
-  const [emoji, setEmoji] = useState4(getEmojiValue(identity));
-  const { textValue, setTextValue } = useClipboardContext();
-  const identityHex = identity?.identityKey.toHex();
-  const copied = textValue === identityHex;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("div", {
-    role: "none",
-    className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React26.createElement(Input, {
-    validationMessage,
-    label: /* @__PURE__ */ React26.createElement(StepHeading, {
-      className: "m-0"
-    }, t("display name input label")),
-    disabled,
-    "data-testid": "display-name-input",
-    placeholder: t("display name input placeholder"),
-    value: displayName,
-    onChange: ({ target: { value } }) => setDisplayName(value)
-  }), /* @__PURE__ */ React26.createElement(StepHeading, {
-    className: "mbe-2"
-  }, t("emoji and color label")), /* @__PURE__ */ React26.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-[1fr_min-content] gap-y-2"
-  }, /* @__PURE__ */ React26.createElement(EmojiPicker, {
-    emoji,
-    onChangeEmoji: setEmoji,
-    disabled,
-    onClickClear: () => setEmoji(getEmojiValue(identity))
-  }), /* @__PURE__ */ React26.createElement(HuePicker, {
-    hue,
-    onChangeHue: setHue,
-    disabled,
-    onClickClear: () => setHue(getHueValue(identity))
-  }))), /* @__PURE__ */ React26.createElement(Actions, null, /* @__PURE__ */ React26.createElement(Action, {
-    variant: "ghost",
-    disabled,
-    onClick: () => {
-      if (identityHex) {
-        void setTextValue(identityHex);
-      }
-    },
-    "data-testid": "update-profile-form-copy-key"
-  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React26.createElement(Action, {
-    variant: "ghost",
-    disabled,
-    onClick: () => send?.({
-      type: "unchooseAction"
-    }),
-    "data-testid": "update-profile-form-back"
-  }, t("back label")), /* @__PURE__ */ React26.createElement(Action, {
-    variant: "primary",
-    disabled,
-    onClick: () => onUpdateProfile?.({
-      ...displayName && {
-        displayName
-      },
-      ...(emoji || hue) && {
-        data: {
-          ...emoji && {
-            emoji
-          },
-          ...hue && {
-            hue
-          }
-        }
-      }
-    }),
-    "data-testid": "update-profile-form-continue"
-  }, t("done label"))));
-};
 
 // packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
-import { useCallback as useCallback5, useEffect as useEffect2, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useState as useState6 } from "react";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
 import { useAgentHostingProviderClient as useAgentHostingProviderClient2 } 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/useAgentHandlers.ts";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts";
 var useAgentHandlers = ({ client, invitations, identity }) => {
-  const [validationMessage, setValidationMessage] = useState5("");
-  const [agentStatus, setAgentStatus] = useState5("");
-  const [agentActive, setAgentActive] = useState5(false);
+  const [validationMessage, setValidationMessage] = useState6("");
+  const [agentStatus, setAgentStatus] = useState6("");
+  const [agentActive, setAgentActive] = useState6(false);
   const agentHostingProviderClient = useAgentHostingProviderClient2(client.config);
   useEffect2(() => {
     const fetchAgentStatus = async () => {
@@ -1417,13 +1396,13 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
         invitationCode,
         authCode: invitation.authCode
       }), void 0, {
-        F: __dxlog_file4,
+        F: __dxlog_file3,
         L: 50,
         S: void 0,
         C: (f, a) => f(...a)
       });
       invariant(identity, "Identity not found", {
-        F: __dxlog_file4,
+        F: __dxlog_file3,
         L: 51,
         S: void 0,
         A: [
@@ -1446,16 +1425,17 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
   const onAgentCreate = async () => {
     invitations.forEach((invitation2) => invitation2.cancel());
     const invitation = client.halo.share({
-      type: Invitation3.Type.MULTIUSE,
-      authMethod: Invitation3.AuthMethod.NONE
+      type: Invitation3.Type.INTERACTIVE,
+      authMethod: Invitation3.AuthMethod.NONE,
+      multiUse: true
     });
     invitation.subscribe(handleAgentCreate);
   };
   const onAgentDestroy = async () => {
     const identity2 = client.halo.identity.get();
     invariant(identity2, "Identity not found", {
-      F: __dxlog_file4,
-      L: 77,
+      F: __dxlog_file3,
+      L: 81,
       S: void 0,
       A: [
         "identity",
@@ -1484,9 +1464,8 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
 import { Check as Check4, X as X3 } from "@phosphor-icons/react";
 import React27, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
-import { Invitation as Invitation5 } from "@dxos/react-client/invitations";
-import { useId as useId4, useTranslation as useTranslation13 } from "@dxos/react-ui";
-import { descriptionText as descriptionText7, getSize as getSize9, mx as mx18 } from "@dxos/react-ui-theme";
+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 hexToEmoji3 } from "@dxos/util";
 
 // packages/sdk/shell/src/util/invitationStatusValue.ts
@@ -1537,10 +1516,10 @@ var InvitationManagerView = ({ children, ...props }) => {
     classNames: "grow flex flex-col justify-around items-center"
   }, children);
 };
-var InvitationManager = ({ invitationUrl, active, send, status, type, authCode, id = "0" }) => {
-  const { t } = useTranslation13("os");
-  const qrLabel = useId4("invitation-manager__qr-code");
-  const statusValue = type === Invitation5.Type.MULTIUSE ? 0 : invitationStatusValue.get(status) ?? 0;
+var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCode, id = "0" }) => {
+  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 = hexToEmoji3(id);
   const activeView = useMemo2(() => {
@@ -1564,14 +1543,14 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
     emoji
   }, /* @__PURE__ */ React27.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(type === Invitation5.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React27.createElement("div", {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React27.createElement("div", {
     role: "none",
-    className: mx18(descriptionText7, "is-full max-is-[14rem] relative")
+    className: mx20(descriptionText8, "is-full max-is-[14rem] relative")
   }, /* @__PURE__ */ React27.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
-    className: mx18("is-full bs-full p-2", showAuthCode && "invisible"),
+    className: mx20("is-full bs-full p-2", showAuthCode && "invisible"),
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
@@ -1594,9 +1573,9 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
   })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
     id: "showing final"
   }, statusValue > 0 ? /* @__PURE__ */ React27.createElement(Check4, {
-    className: mx18("m-1.5", getSize9(6))
+    className: mx20("m-1.5", getSize11(6))
   }) : /* @__PURE__ */ React27.createElement(X3, {
-    className: mx18("m-1.5", getSize9(6))
+    className: mx20("m-1.5", getSize11(6))
   })))), /* @__PURE__ */ React27.createElement(Actions, {
     classNames: "mbs-4"
   }, /* @__PURE__ */ React27.createElement(Action, {
@@ -1609,20 +1588,20 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
 
 // packages/sdk/shell/src/steps/ConfirmReset.tsx
 import { Warning } from "@phosphor-icons/react";
-import React28, { useState as useState6 } from "react";
+import React28, { useState as useState7 } from "react";
 import { log as log5 } from "@dxos/log";
-import { Message, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { getSize as getSize10, mx as mx19 } from "@dxos/react-ui-theme";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/steps/ConfirmReset.tsx";
+import { Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { getSize as getSize12, mx as mx21 } from "@dxos/react-ui-theme";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/steps/ConfirmReset.tsx";
 var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
-  const { t } = useTranslation14("os");
-  const [validationMessage, setValidationMessage] = useState6("");
-  const [pending, setPending] = useState6(false);
+  const { t } = useTranslation13("os");
+  const [validationMessage, setValidationMessage] = useState7("");
+  const [pending, setPending] = useState7(false);
   const processReset = async () => {
     setPending(true);
     return onConfirm?.().then(() => setPending(false), (error) => {
       log5.catch(error, void 0, {
-        F: __dxlog_file5,
+        F: __dxlog_file4,
         L: 38,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1641,9 +1620,9 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
   });
 };
 var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
-  const { t } = useTranslation14("os");
+  const { t } = useTranslation13("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState6("");
+  const [inputValue, setInputValue] = useState7("");
   const testIdAffix = mode === "join new identity" ? "join-new-identity" : "reset-storage";
   return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
     role: "none",
@@ -1651,7 +1630,7 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
   }, /* @__PURE__ */ React28.createElement(Message.Root, {
     valence: "error"
   }, /* @__PURE__ */ React28.createElement(Message.Title, null, /* @__PURE__ */ React28.createElement(Warning, {
-    className: mx19(getSize10(6), "inline mie-2")
+    className: mx21(getSize12(6), "inline mie-2")
   }), t("sign out chooser title")), /* @__PURE__ */ React28.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React28.createElement(Input, {
     validationMessage,
     label: /* @__PURE__ */ React28.createElement(StepHeading, {
@@ -1676,37 +1655,120 @@ 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 __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
 var viewStyles = "pbs-1 pbe-3 pli-3";
-var IdentityHeading = ({ titleId, title, identity, onDone }) => {
-  const fallbackValue = keyToFallback2(identity.identityKey);
+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 fallbackValue = keyToFallback3(identity.identityKey);
+  const { t } = useTranslation14("os");
+  const [displayName, setDisplayName] = useState8(identity.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = useState8(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState8(getHueValue(identity));
+  const { textValue, setTextValue } = useClipboardContext();
+  const identityHex = identity.identityKey.toHex();
+  const copied = textValue === identityHex;
+  const handleUpdateProfile = async () => {
+    const nextProfile = {
+      ...displayName && {
+        displayName
+      },
+      ...(emoji || hue) && {
+        data: {
+          ...emoji && {
+            emoji
+          },
+          ...hue && {
+            hue
+          }
+        }
+      }
+    };
+    return onUpdateProfile?.(nextProfile);
+  };
+  const setEmoji = (nextEmoji) => {
+    setEmojiDirectly(nextEmoji);
+    void handleUpdateProfile();
+  };
+  const setHue = (nextHue) => {
+    setHueDirectly(nextHue);
+    void handleUpdateProfile();
+  };
+  const isConnected = connectionState === ConnectionState.ONLINE;
   return /* @__PURE__ */ React29.createElement(Heading, {
     titleId,
     title,
     corner: /* @__PURE__ */ React29.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React29.createElement(Avatar4.Root, {
-    size: 12,
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Root, {
+    size: 16,
     variant: "circle",
-    status: "active",
-    hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React29.createElement(Avatar4.Frame, {
-    classNames: "block mbs-4 mbe-2 mli-auto chromatic-ignore"
-  }, /* @__PURE__ */ React29.createElement(Avatar4.Fallback, {
-    text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React29.createElement(Avatar4.Label, {
-    classNames: "block text-center font-light text-xl",
+    status: isConnected ? "active" : "error",
+    hue: hue || fallbackValue.hue
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
+    classNames: "grid grid-cols-[1fr_var(--rail-action)_min-content_var(--rail-action)_1fr] items-center gap-2"
+  }, /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: "bs-[--rail-action] is-[--rail-action] justify-self-end",
+    onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
+  }, /* @__PURE__ */ React29.createElement("span", {
+    className: "sr-only"
+  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React29.createElement(PlugsConnected, {
+    className: getSize13(5)
+  }) : /* @__PURE__ */ React29.createElement(Plugs, {
+    className: getSize13(5)
+  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null)))), /* @__PURE__ */ React29.createElement(EmojiPickerToolbarButton, {
+    emoji,
+    onChangeEmoji: setEmoji,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ React29.createElement(Avatar6.Frame, {
+    classNames: "relative z-[2] -mli-4 chromatic-ignore"
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Fallback, {
+    text: emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ React29.createElement(HuePickerToolbarButton, {
+    hue,
+    onChangeHue: setHue,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: "bs-[--rail-action] justify-self-start",
+    "data-testid": "update-profile-form-copy-key",
+    onClick: () => setTextValue(identityHex)
+  }, /* @__PURE__ */ React29.createElement("span", {
+    className: "sr-only"
+  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React29.createElement(CopySimple, {
+    className: getSize13(5)
+  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(copied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null))))), /* @__PURE__ */ React29.createElement(Avatar6.Label, {
+    classNames: "sr-only",
     "data-testid": "identityHeading.displayName"
-  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex()))));
+  }, 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__ */ React29.createElement(Input2.TextInput, {
+    variant: "subdued",
+    "data-testid": "display-name-input",
+    placeholder: t("display name input placeholder"),
+    classNames: "mbs-2 text-center font-light text-xl",
+    value: displayName,
+    onChange: ({ target: { value } }) => {
+      setDisplayName(value);
+    },
+    onBlur: handleUpdateProfile
+  }))));
 };
 var IdentityPanelImpl = (props) => {
-  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, onDone, ...rest } = props;
-  const { t } = useTranslation15("os");
+  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
+  const { t } = useTranslation14("os");
   const title = useMemo3(() => {
     switch (activeView) {
-      case "agent manager":
-        return "Manage Agent";
       case "device invitation manager":
         return t("choose add device label");
       default:
@@ -1717,13 +1779,16 @@ var IdentityPanelImpl = (props) => {
     t
   ]);
   const onCancelReset = () => rest.send?.("unchooseAction");
-  return /* @__PURE__ */ React29.createElement(DensityProvider2, {
+  return /* @__PURE__ */ React29.createElement(DensityProvider, {
     density: "fine"
   }, /* @__PURE__ */ React29.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
-    onDone
+    onDone,
+    onUpdateProfile,
+    connectionState,
+    onChangeConnectionState
   }), /* @__PURE__ */ React29.createElement(Viewport.Root, {
     activeView
   }, /* @__PURE__ */ React29.createElement(Viewport.Views, null, /* @__PURE__ */ React29.createElement(Viewport.View, {
@@ -1739,27 +1804,6 @@ var IdentityPanelImpl = (props) => {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
-    id: "device manager",
-    classNames: viewStyles
-  }, /* @__PURE__ */ React29.createElement(DeviceManager, {
-    active: activeView === "device manager",
-    ...rest
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
-    classNames: viewStyles,
-    id: "update profile form"
-  }, /* @__PURE__ */ React29.createElement(ProfileForm, {
-    send: rest.send,
-    active: activeView === "update profile form",
-    identity,
-    onUpdateProfile
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
-    classNames: viewStyles,
-    id: "agent manager"
-  }, /* @__PURE__ */ React29.createElement(AgentForm, {
-    send: rest.send,
-    active: activeView === "agent manager",
-    ...rest
   })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm join new identity"
@@ -1788,7 +1832,7 @@ var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   });
 };
 var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, initialDisposition = "default", ...props }) => {
-  const titleId = useId5("identityPanel__heading", propsTitleId);
+  const titleId = useId6("identityPanel__heading", propsTitleId);
   const client = useClient3();
   const devices = useDevices();
   const identity = useIdentity();
@@ -1800,8 +1844,8 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   });
   if (!identity) {
     log6.error("IdentityPanel rendered with no active identity.", void 0, {
-      F: __dxlog_file6,
-      L: 145,
+      F: __dxlog_file5,
+      L: 240,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1812,11 +1856,13 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
       initialDisposition
     }
   });
+  const { swarm: connectionState } = useNetworkStatus();
+  const handleChangeConnectionState = async (nextState) => client?.mesh.updateConfig(nextState);
   useEffect3(() => {
     const subscription = identityService.subscribe((state) => {
       log6("[state]", state, {
-        F: __dxlog_file6,
-        L: 154,
+        F: __dxlog_file5,
+        L: 253,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1831,30 +1877,10 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
         return "identity action chooser";
       case identityState.matches("managingDeviceInvitation"):
         return "device invitation manager";
-      case identityState.matches("managingDevices"):
-        return "device manager";
-      case [
-        {
-          managingProfile: "idle"
-        },
-        {
-          managingProfile: "pending"
-        }
-      ].some(identityState.matches):
-        return "update profile form";
       case identityState.matches("confirmingResetStorage"):
         return "confirm reset storage";
       case identityState.matches("confirmingJoinNewIdentity"):
         return "confirm join new identity";
-      case [
-        {
-          managingAgent: "idle"
-        },
-        {
-          managingAgent: "pending"
-        }
-      ].some(identityState.matches):
-        return "agent manager";
       default:
         return "identity action chooser";
     }
@@ -1876,6 +1902,8 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     titleId,
     createInvitationUrl,
     onUpdateProfile,
+    connectionState,
+    onChangeConnectionState: handleChangeConnectionState,
     ...agentProps
   };
   return identityState.context.invitation ? /* @__PURE__ */ React29.createElement(IdentityPanelWithInvitationImpl, {
@@ -1889,25 +1917,25 @@ import React38, { useCallback as useCallback7, useEffect as useEffect5, useMemo
 import { log as log10 } from "@dxos/log";
 import { useClient as useClient5, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { DensityProvider as DensityProvider3, useId as useId7, useThemeContext as useThemeContext4 } from "@dxos/react-ui";
+import { DensityProvider as DensityProvider2, useId as useId8, useThemeContext as useThemeContext4 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X4 } from "@phosphor-icons/react";
-import React30, { cloneElement, forwardRef as forwardRef8 } from "react";
-import { Button as Button7, useTranslation as useTranslation16 } from "@dxos/react-ui";
-import { descriptionText as descriptionText8, getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
-var JoinHeading = /* @__PURE__ */ forwardRef8(({ mode, titleId, onExit, exitActionParent }, forwardedRef) => {
-  const { t } = useTranslation16("os");
-  const exitButton = /* @__PURE__ */ React30.createElement(Button7, {
+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, onExit, exitActionParent }, forwardedRef) => {
+  const { t } = useTranslation15("os");
+  const exitButton = /* @__PURE__ */ React30.createElement(Button10, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
-    classNames: mx20(descriptionText8, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx22(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
   }, /* @__PURE__ */ React30.createElement(X4, {
     weight: "bold",
-    className: getSize11(4)
+    className: getSize14(4)
   }), /* @__PURE__ */ React30.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
@@ -1930,11 +1958,11 @@ import { useCallback as useCallback6 } from "react";
 import { assign as assign2, createMachine as createMachine2 } from "xstate";
 import { log as log7 } from "@dxos/log";
 import { AlreadyJoinedError } from "@dxos/react-client";
-import { Invitation as Invitation6, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
+import { Invitation as Invitation5, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
 var getInvitationSubscribable = (Kind, invitation) => {
   log7("[subscribing to invitation]", invitation, {
-    F: __dxlog_file7,
+    F: __dxlog_file6,
     L: 90,
     S: void 0,
     C: (f, a) => f(...a)
@@ -1942,12 +1970,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
   return {
     subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
       switch (invitation2.state) {
-        case Invitation6.State.CONNECTING: {
+        case Invitation5.State.CONNECTING: {
           log7("[invitation connecting]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 101,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1957,12 +1985,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation6.State.CONNECTED: {
+        case Invitation5.State.CONNECTED: {
           log7("[invitation connected]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 106,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1972,12 +2000,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation6.State.READY_FOR_AUTHENTICATION: {
+        case Invitation5.State.READY_FOR_AUTHENTICATION: {
           log7("[invitation ready for authentication]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 111,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1987,12 +2015,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation6.State.AUTHENTICATING: {
+        case Invitation5.State.AUTHENTICATING: {
           log7("[invitation authenticating]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 116,
             S: void 0,
             C: (f, a) => f(...a)
@@ -2002,12 +2030,12 @@ var getInvitationSubscribable = (Kind, invitation) => {
             invitation: invitation2
           });
         }
-        case Invitation6.State.SUCCESS: {
+        case Invitation5.State.SUCCESS: {
           log7("[invitation success]", {
             Kind,
             invitation: invitation2
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 121,
             S: void 0,
             C: (f, a) => f(...a)
@@ -2018,11 +2046,11 @@ var getInvitationSubscribable = (Kind, invitation) => {
           });
           return complete?.();
         }
-        case Invitation6.State.CANCELLED: {
+        case Invitation5.State.CANCELLED: {
           log7.warn("[invitation cancelled]", {
             Kind
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 127,
             S: void 0,
             C: (f, a) => f(...a)
@@ -2032,11 +2060,11 @@ var getInvitationSubscribable = (Kind, invitation) => {
             reason: "cancelled"
           });
         }
-        case Invitation6.State.TIMEOUT: {
+        case Invitation5.State.TIMEOUT: {
           log7.error("[invitation timeout]", {
             Kind
           }, {
-            F: __dxlog_file7,
+            F: __dxlog_file6,
             L: 132,
             S: void 0,
             C: (f, a) => f(...a)
@@ -2053,7 +2081,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
           Kind,
           error
         }, {
-          F: __dxlog_file7,
+          F: __dxlog_file6,
           L: 139,
           S: void 0,
           C: (f, a) => f(...a)
@@ -2068,7 +2096,7 @@ var getInvitationSubscribable = (Kind, invitation) => {
         Kind,
         error
       }, {
-        F: __dxlog_file7,
+        F: __dxlog_file6,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2131,7 +2159,7 @@ var acceptingInvitationTemplate = (Kind, successTarget) => {
               {
                 cond: (context) => {
                   const invitation = context[Kind.toLowerCase()].invitation;
-                  return !invitation || invitation?.state === Invitation6.State.CONNECTING;
+                  return !invitation || invitation?.state === Invitation5.State.CONNECTING;
                 },
                 target: `connecting${Kind}Invitation`,
                 actions: "log"
@@ -2400,7 +2428,7 @@ var joinMachine = createMachine2({
         haloInvitation: context.halo.invitation,
         spaceInvitation: context.space.invitation
       }, {
-        F: __dxlog_file7,
+        F: __dxlog_file6,
         L: 416,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2414,7 +2442,7 @@ var defaultCodeFromUrl = (invitationType, text) => {
     return searchParams.get(`${invitationType}InvitationCode`) ?? searchParams.get(`${invitationType}Invitation`) ?? searchParams.get("invitationCode") ?? searchParams.get("invitation") ?? text;
   } catch (err) {
     log7.catch(err, void 0, {
-      F: __dxlog_file7,
+      F: __dxlog_file6,
       L: 443,
       S: void 0,
       C: (f, a) => f(...a)
@@ -2435,7 +2463,7 @@ var useJoinMachine = (client, options) => {
         };
       } catch (err) {
         log7.error("Could not redeem device invitation code", err, {
-          F: __dxlog_file7,
+          F: __dxlog_file6,
           L: 464,
           S: void 0,
           C: (f, a) => f(...a)
@@ -2460,7 +2488,7 @@ var useJoinMachine = (client, options) => {
         };
       } catch (err) {
         log7.error("Could not redeem space invitation code", err, {
-          F: __dxlog_file7,
+          F: __dxlog_file6,
           L: 486,
           S: void 0,
           C: (f, a) => f(...a)
@@ -2520,18 +2548,18 @@ var useJoinMachine = (client, options) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
-import { CaretRight as CaretRight2, Plus as Plus2, QrCode, Textbox } from "@phosphor-icons/react";
+import { CaretRight as CaretRight2, Plus as Plus3, QrCode, Textbox } from "@phosphor-icons/react";
 import React31 from "react";
-import { useTranslation as useTranslation17 } from "@dxos/react-ui";
-import { getSize as getSize12 } from "@dxos/react-ui-theme";
+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 } = useTranslation17("os");
+  const { t } = useTranslation16("os");
   const sharedButtonProps = {
     disabled,
     after: /* @__PURE__ */ React31.createElement(CaretRight2, {
-      className: getSize12(4),
+      className: getSize15(4),
       weight: "bold"
     }),
     slots: {
@@ -2546,8 +2574,8 @@ var AdditionMethodChooser = (viewStateProps) => {
   }, /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React31.createElement(Plus2, {
-      className: getSize12(6)
+    before: /* @__PURE__ */ React31.createElement(Plus3, {
+      className: getSize15(6)
     }),
     onClick: () => send({
       type: "createIdentity"
@@ -2558,7 +2586,7 @@ var AdditionMethodChooser = (viewStateProps) => {
     ...sharedButtonProps,
     description: t("join identity description"),
     before: /* @__PURE__ */ React31.createElement(QrCode, {
-      className: getSize12(6)
+      className: getSize15(6)
     }),
     onClick: () => send({
       type: "acceptHaloInvitation"
@@ -2570,7 +2598,7 @@ var AdditionMethodChooser = (viewStateProps) => {
     disabled: true,
     description: t("recover identity description"),
     before: /* @__PURE__ */ React31.createElement(Textbox, {
-      className: getSize12(6)
+      className: getSize15(6)
     }),
     onClick: () => send({
       type: "recoverIdentity"
@@ -2582,16 +2610,16 @@ var AdditionMethodChooser = (viewStateProps) => {
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
 import React32, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName4 } from "@dxos/display-name";
-import { Avatar as Avatar5, useId as useId6, useTranslation as useTranslation18 } from "@dxos/react-ui";
-import { mx as mx21 } from "@dxos/react-ui-theme";
+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 } = useTranslation18("os");
+  const { t } = useTranslation17("os");
   const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? "0";
   const fallbackValue = hexToFallback(addedIdentityHex);
-  const labelId = useId6("identityListItem__label");
+  const labelId = useId7("identityListItem__label");
   const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName4(addedIdentityHex));
   const doneAction = /* @__PURE__ */ React32.createElement(Action, {
     ...onDone && {
@@ -2604,14 +2632,14 @@ var IdentityAdded = (props) => {
   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__ */ React32.createElement(Avatar5.Root, {
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Root, {
     status: "active",
     labelId,
     hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React32.createElement(Avatar5.Frame, null, /* @__PURE__ */ React32.createElement(Avatar5.Fallback, {
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Frame, null, /* @__PURE__ */ React32.createElement(Avatar7.Fallback, {
     text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React32.createElement(Avatar5.Label, {
-    classNames: mx21("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
+  })), /* @__PURE__ */ React32.createElement(Avatar7.Label, {
+    classNames: mx23("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
   }, displayName))), /* @__PURE__ */ React32.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React32.createElement(Action, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
@@ -2624,17 +2652,17 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React33, { useState as useState7 } from "react";
+import React33, { useState as useState9 } from "react";
 import { log as log8 } from "@dxos/log";
 import { useClient as useClient4 } from "@dxos/react-client";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
+import { useTranslation as useTranslation18 } from "@dxos/react-ui";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
 var IdentityInput = (props) => {
   const { send, method } = props;
   const isRecover = method === "recover identity";
   const client = useClient4();
-  const { t } = useTranslation19("os");
-  const [validationMessage, setValidationMessage] = useState7("");
+  const { t } = useTranslation18("os");
+  const [validationMessage, setValidationMessage] = useState9("");
   const createIdentity = (displayName) => {
     void client.halo.createIdentity({
       [isRecover ? "seedphrase" : "displayName"]: displayName
@@ -2645,7 +2673,7 @@ var IdentityInput = (props) => {
       });
     }, (error) => {
       log8.catch(error, void 0, {
-        F: __dxlog_file8,
+        F: __dxlog_file7,
         L: 37,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2662,8 +2690,8 @@ var IdentityInput = (props) => {
 var IdentityInputImpl = (props) => {
   const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
   const disabled = !active;
-  const { t } = useTranslation19("os");
-  const [inputValue, setInputValue] = useState7("");
+  const { t } = useTranslation18("os");
+  const [inputValue, setInputValue] = useState9("");
   const isRecover = method === "recover identity";
   return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
     role: "none",
@@ -2692,11 +2720,11 @@ var IdentityInputImpl = (props) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
 import React34, { cloneElement as cloneElement3 } from "react";
-import { useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { useTranslation as useTranslation19 } from "@dxos/react-ui";
 var InvitationAccepted = (props) => {
   const { active, Kind, doneActionParent, onDone } = props;
   const disabled = !active;
-  const { t } = useTranslation20("os");
+  const { t } = useTranslation19("os");
   const doneAction = /* @__PURE__ */ React34.createElement(Action, {
     variant: "primary",
     onClick: onDone,
@@ -2713,10 +2741,10 @@ var InvitationAccepted = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React35, { useState as useState8, useEffect as useEffect4, cloneElement as cloneElement4 } from "react";
+import React35, { useState as useState10, useEffect as useEffect4, cloneElement as cloneElement4 } from "react";
 import { log as log9 } from "@dxos/log";
-import { useTranslation as useTranslation21 } from "@dxos/react-ui";
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
+import { useTranslation as useTranslation20 } from "@dxos/react-ui";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
 var invitationCodeFromUrl = (text) => {
   try {
     const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
@@ -2724,7 +2752,7 @@ var invitationCodeFromUrl = (text) => {
     return invitation ?? text;
   } catch (err) {
     log9.catch(err, void 0, {
-      F: __dxlog_file9,
+      F: __dxlog_file8,
       L: 25,
       S: void 0,
       C: (f, a) => f(...a)
@@ -2735,8 +2763,8 @@ var invitationCodeFromUrl = (text) => {
 var InvitationInput = (props) => {
   const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
   const disabled = !active;
-  const { t } = useTranslation21("os");
-  const [inputValue, setInputValue] = useState8(unredeemedCode ?? "");
+  const { t } = useTranslation20("os");
+  const [inputValue, setInputValue] = useState10(unredeemedCode ?? "");
   useEffect4(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
@@ -2794,8 +2822,8 @@ var InvitationInput = (props) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
 import React36 from "react";
-import { useTranslation as useTranslation22 } from "@dxos/react-ui";
-import { descriptionText as descriptionText9 } from "@dxos/react-ui-theme";
+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
   // for the UI in particular.
@@ -2806,10 +2834,10 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation22("os");
+  const { t } = useTranslation21("os");
   if (failReason) {
     return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
-      className: descriptionText9
+      className: descriptionText10
     }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
@@ -2822,7 +2850,7 @@ var InvitationActions = ({
     }, t("reset label"))));
   } else {
     return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
-      className: descriptionText9
+      className: descriptionText10
     }, t("connecting status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
@@ -2839,12 +2867,12 @@ var InvitationActions = ({
 };
 var InvitationRescuer = (props) => {
   const { Kind, invitationState, active, send } = props;
-  const { t } = useTranslation22("os");
+  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__ */ React36.createElement(StepHeading, {
-    className: descriptionText9
+    className: descriptionText10
   }, "There was a problem joining the space")), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
     disabled: !active,
     "data-testid": "invitation-rescuer-blank-reset",
@@ -2855,15 +2883,15 @@ var InvitationRescuer = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React37, { useState as useState9 } from "react";
-import { Input as Input2, useTranslation as useTranslation23 } from "@dxos/react-ui";
-import { hexToEmoji as hexToEmoji4 } from "@dxos/util";
+import React37, { useState as useState11 } from "react";
+import { Input as Input3, useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { hexToEmoji as hexToEmoji5 } from "@dxos/util";
 var pinLength = 6;
 var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
   const disabled = !active || pending;
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation22("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState9("");
+  const [authCode, setAuthCode] = useState11("");
   const onChange = ({ target: { value } }) => {
     setAuthCode(value);
     if (value.length === pinLength) {
@@ -2874,12 +2902,12 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
     role: "none",
     className: "grow flex flex-col justify-center"
   }, invitationId && /* @__PURE__ */ React37.createElement(Emoji, {
-    text: hexToEmoji4(invitationId)
-  }), /* @__PURE__ */ React37.createElement(Input2.Root, failed && {
+    text: hexToEmoji5(invitationId)
+  }), /* @__PURE__ */ React37.createElement(Input3.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React37.createElement(Input2.Label, {
+  }, /* @__PURE__ */ React37.createElement(Input3.Label, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React37.createElement(Input2.PinInput, {
+  }, /* @__PURE__ */ React37.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React37.createElement(Input3.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -2890,9 +2918,9 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
     "data-prevent-ios-autofocus": true,
     "data-testid": `${invitationType}-auth-code-input`,
     "data-1p-ignore": true
-  }), failed && /* @__PURE__ */ React37.createElement(Input2.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React37.createElement(Input3.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React37.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
+  }, /* @__PURE__ */ React37.createElement(Input3.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
@@ -2910,7 +2938,7 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
 var stepStyles = "pbs-1 pbe-3 pli-3";
 
 // packages/sdk/shell/src/styles/invitationStatusStyles.ts
-import { Invitation as Invitation7 } from "@dxos/react-client/invitations";
+import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
 var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
 var activeBgColor = "bg-primary-500 dark:bg-primary-400";
 var successBgColor = "bg-success-500 dark:bg-success-400";
@@ -2926,15 +2954,15 @@ var activeStrokeColor = "stroke-primary-400 dark:stroke-primary-150";
 var successStrokeColor = "stroke-success-300 dark:stroke-primary-400";
 var errorStrokeColor = "stroke-error-300 dark:stroke-error-500";
 var cancelledStrokeColor = "stroke-warning-300 dark:stroke-warning-500";
-var resolvedStrokeColor = (status) => status === Invitation7.State.ERROR ? errorStrokeColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
-var resolvedBgColor = (status) => status === Invitation7.State.ERROR ? errorBgColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledBgColor : successBgColor;
-var resolvedTextColor = (status) => status === Invitation7.State.ERROR ? errorTextColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledTextColor : successTextColor;
+var resolvedStrokeColor = (status) => status === Invitation6.State.ERROR ? errorStrokeColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation6.State.ERROR ? errorBgColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation6.State.ERROR ? errorTextColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledTextColor : successTextColor;
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
 var JoinPanelImpl = (props) => {
   const { titleId, send, activeView, failed, mode, unredeemedCodes, invitationStates, succeededKeys, failReasons, onExit, onHaloDone, onSpaceDone, exitActionParent, doneActionParent, onHaloInvitationCancel, onSpaceInvitationCancel, onHaloInvitationAuthenticate, onSpaceInvitationAuthenticate, onCancelResetStorage, onConfirmResetStorage, IdentityInput: IdentityInputComponent = IdentityInput, ConfirmReset: ConfirmResetComponent = ConfirmReset } = props;
-  return /* @__PURE__ */ React38.createElement(DensityProvider3, {
+  return /* @__PURE__ */ React38.createElement(DensityProvider2, {
     density: "fine"
   }, mode !== "halo-only" && /* @__PURE__ */ React38.createElement(JoinHeading, {
     titleId,
@@ -3077,7 +3105,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
   const client = useClient5();
   const identity = useIdentity2();
   const { hasIosKeyboard } = useThemeContext4();
-  const titleId = useId7("joinPanel__heading", propsTitleId);
+  const titleId = useId8("joinPanel__heading", propsTitleId);
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
       mode,
@@ -3093,7 +3121,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
   useEffect5(() => {
     const subscription = joinService.subscribe((state) => {
       log10("[state]", state, {
-        F: __dxlog_file10,
+        F: __dxlog_file9,
         L: 204,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3358,13 +3386,13 @@ import { Planet } from "@phosphor-icons/react";
 import React40, { useEffect as useEffect6, useMemo as useMemo5 } from "react";
 import { log as log13 } from "@dxos/log";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
-import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation25 } from "@dxos/react-ui";
+import { DensityProvider as DensityProvider3, 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 log11 } from "@dxos/log";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
 var spaceMachine = createMachine3({
   id: "space",
   predictableActionArguments: true,
@@ -3405,7 +3433,7 @@ var spaceMachine = createMachine3({
         event,
         context
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file10,
         L: 53,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3424,28 +3452,28 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React39, { useCallback as useCallback8, useState as useState10 } from "react";
+import React39, { useCallback as useCallback8, useState as useState12 } 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 useTranslation24 } from "@dxos/react-ui";
-import { descriptionText as descriptionText10, mx as mx22 } from "@dxos/react-ui-theme";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
+import { Invitation as Invitation7, InvitationEncoder as InvitationEncoder4 } from "@dxos/react-client/invitations";
+import { ScrollArea, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { descriptionText as descriptionText11, mx as mx24 } from "@dxos/react-ui-theme";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
 var activeActionKey = "dxos:react-shell/space-manager/active-action";
 var SpaceManager = (props) => {
   const { space, target } = props;
-  const { t } = useTranslation24("os");
+  const { t } = useTranslation23("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
   const onInvitationEvent = useCallback8((invitation) => {
     const invitationCode = InvitationEncoder4.encode(invitation);
-    if (invitation.state === Invitation8.State.CONNECTING) {
+    if (invitation.state === Invitation7.State.CONNECTING) {
       log12.info(JSON.stringify({
         invitationCode,
         authCode: invitation.authCode
       }), void 0, {
-        F: __dxlog_file12,
+        F: __dxlog_file11,
         L: 49,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3459,8 +3487,9 @@ var SpaceManager = (props) => {
       icon: UserPlus,
       onClick: useCallback8(() => {
         const invitation = space.share?.({
-          type: Invitation8.Type.INTERACTIVE,
-          authMethod: Invitation8.AuthMethod.SHARED_SECRET,
+          type: Invitation7.Type.INTERACTIVE,
+          authMethod: Invitation7.AuthMethod.SHARED_SECRET,
+          multiUse: false,
           target
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
@@ -3476,8 +3505,9 @@ var SpaceManager = (props) => {
       icon: UsersThree,
       onClick: useCallback8(() => {
         const invitation = space.share?.({
-          type: Invitation8.Type.MULTIUSE,
-          authMethod: Invitation8.AuthMethod.NONE,
+          type: Invitation7.Type.INTERACTIVE,
+          authMethod: Invitation7.AuthMethod.NONE,
+          multiUse: true,
           target
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
@@ -3497,7 +3527,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 } = useTranslation24("os");
+  const { t } = useTranslation23("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -3507,20 +3537,20 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState10(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const [activeAction, setInternalActiveAction] = useState12(localStorage.getItem(activeActionKey) ?? "inviteOne");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
   };
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
-    Invitation8.State.CANCELLED
+    Invitation7.State.CANCELLED
   ].includes(invitation.get().state));
   return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
   }, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
   }, !!visibleInvitations?.length && /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement("h3", {
-    className: mx22(headingFragment, descriptionText10)
+    className: mx24(headingFragment, descriptionText11)
   }, t("invitation list heading")), /* @__PURE__ */ React39.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
@@ -3528,7 +3558,7 @@ var SpaceManagerImpl = (props) => {
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
   }), /* @__PURE__ */ React39.createElement("h3", {
-    className: mx22(headingFragment, descriptionText10, "mbs-2")
+    className: mx24(headingFragment, descriptionText11, "mbs-2")
   }, t("space member list heading"))), /* @__PURE__ */ React39.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
@@ -3544,9 +3574,9 @@ 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 __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
 var SpacePanelHeading = ({ titleId, space, onDone }) => {
-  const { t } = useTranslation25("os");
+  const { t } = useTranslation24("os");
   const name = space.properties.name;
   return /* @__PURE__ */ React40.createElement(Heading, {
     titleId,
@@ -3567,7 +3597,7 @@ var SpacePanelHeading = ({ titleId, space, onDone }) => {
 };
 var SpacePanelImpl = (props) => {
   const { titleId, activeView, space, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
-  return /* @__PURE__ */ React40.createElement(DensityProvider4, {
+  return /* @__PURE__ */ React40.createElement(DensityProvider3, {
     density: "fine"
   }, /* @__PURE__ */ React40.createElement(SpacePanelHeading, {
     ...rest,
@@ -3601,7 +3631,7 @@ var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   });
 };
 var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
-  const titleId = useId8("spacePanel__heading", propsTitleId);
+  const titleId = useId9("spacePanel__heading", propsTitleId);
   const [spaceState, spaceSend, spaceService] = useSpaceMachine({
     context: {
       space: props.space
@@ -3610,7 +3640,7 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   useEffect6(() => {
     const subscription = spaceService.subscribe((state) => {
       log13("[state]", state, {
-        F: __dxlog_file13,
+        F: __dxlog_file12,
         L: 94,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3650,9 +3680,9 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
 
 // packages/sdk/shell/src/panels/StatusPanel/StatusPanel.tsx
 import React41 from "react";
-import { Status, useTranslation as useTranslation26 } from "@dxos/react-ui";
+import { Status, useTranslation as useTranslation25 } from "@dxos/react-ui";
 var StatusPanel = ({ titleId }) => {
-  const { t } = useTranslation26("os");
+  const { t } = useTranslation25("os");
   return /* @__PURE__ */ React41.createElement("div", {
     className: "grid place-items-center p-2 gap-2"
   }, /* @__PURE__ */ React41.createElement("p", {
@@ -3665,7 +3695,7 @@ var StatusPanel = ({ titleId }) => {
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
-  const titleId = useId9("identityDialog__title", props.title);
+  const titleId = useId10("identityDialog__title", props.title);
   return /* @__PURE__ */ React42.createElement(Dialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || props.onDone?.()
@@ -3683,9 +3713,9 @@ var IdentityDialog = (props) => {
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
 import React43 from "react";
-import { AlertDialog, useId as useId10, useVisualViewport } from "@dxos/react-ui";
+import { AlertDialog, useId as useId11, useVisualViewport } from "@dxos/react-ui";
 var JoinDialog = (joinPanelProps) => {
-  const titleId = useId10("joinDialog__title");
+  const titleId = useId11("joinDialog__title");
   const { height } = useVisualViewport();
   return /* @__PURE__ */ React43.createElement(AlertDialog.Root, {
     defaultOpen: true,
@@ -3717,21 +3747,21 @@ import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { ShellRuntimeImpl } from "@dxos/client-services";
 import { Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from "@dxos/react-client";
-import { ThemeProvider, Tooltip as Tooltip5 } from "@dxos/react-ui";
+import { ThemeProvider, Tooltip as Tooltip7 } 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 React46, { useEffect as useEffect7, useState as useState11 } from "react";
+import React46, { useEffect as useEffect7, useState as useState13 } from "react";
 import { log as log14 } from "@dxos/log";
 import { ShellDisplay, ShellLayout, useClient as useClient6 } from "@dxos/react-client";
 import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
 import React44 from "react";
-import { Dialog as Dialog2, useId as useId11 } from "@dxos/react-ui";
+import { Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
-  const titleId = useId11("spaceDialog__title");
+  const titleId = useId12("spaceDialog__title");
   return /* @__PURE__ */ React44.createElement(Dialog2.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
@@ -3748,9 +3778,9 @@ var SpaceDialog = (spacePanelProps) => {
 
 // packages/sdk/shell/src/composites/StatusDialog/StatusDialog.tsx
 import React45 from "react";
-import { AlertDialog as AlertDialog2, useId as useId12 } from "@dxos/react-ui";
+import { AlertDialog as AlertDialog2, useId as useId13 } from "@dxos/react-ui";
 var StatusDialog = () => {
-  const titleId = useId12("statusDialog__title");
+  const titleId = useId13("statusDialog__title");
   return /* @__PURE__ */ React45.createElement(AlertDialog2.Root, {
     open: true
   }, /* @__PURE__ */ React45.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Content, {
@@ -3761,9 +3791,9 @@ var StatusDialog = () => {
 };
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
-var __dxlog_file14 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
+var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
 var Shell = ({ runtime, origin }) => {
-  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState11({
+  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState13({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
@@ -3779,7 +3809,7 @@ var Shell = ({ runtime, origin }) => {
   useEffect7(() => {
     if (layout === ShellLayout.SPACE && !space) {
       log14.warn("No space found for shell space invitations.", void 0, {
-        F: __dxlog_file14,
+        F: __dxlog_file13,
         L: 33,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3852,7 +3882,7 @@ var Shell = ({ runtime, origin }) => {
             layout: ShellLayout.DEFAULT
           });
         },
-        initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : layout === ShellLayout.EDIT_PROFILE ? "manage-profile" : "default"
+        initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
       });
     case ShellLayout.SPACE:
       return space ? /* @__PURE__ */ React46.createElement(SpaceDialog, {
@@ -3944,8 +3974,6 @@ var os = {
   "connected status label": "Enter confirmation PIN",
   "authenticating status label": "Enter confirmation PIN",
   "success status label": "Success",
-  "connect label": "Connect",
-  "reconnect label": "Reconnect",
   "cancel label": "Cancel",
   "done label": "Done",
   "reset label": "Start over",
@@ -4027,7 +4055,19 @@ var os = {
   "purple label": "Purple",
   "fuchsia label": "Fuchsia",
   "pink label": "Pink",
-  "rose label": "Rose"
+  "rose label": "Rose",
+  "current device tag label": "This device",
+  "device name placeholder": "{{platform}} on {{os}}",
+  "more options label": "More options",
+  "disconnect label": "Currently online. Click to go offline.",
+  "connect label": "Currently offline. Click to go online.",
+  "edit device label": "Edit device name & avatar",
+  "agent heading": "Agent",
+  "agent message title": "About creating an agent",
+  "agent message body": "Creating an agent helps keep your devices and peers in-sync. An agent is like any other device, but since it\u2019s always online your changes will sync even when all your physical devices are\xA0asleep.",
+  "create agent label": "Start an agent",
+  "destroy agent label": "Shut down agent",
+  "agent device label": "Your agent"
 };
 
 // packages/sdk/shell/src/translations/index.ts
@@ -4061,17 +4101,17 @@ var runShell = async (config = new Config()) => {
       client,
       status: SystemStatus.ACTIVE
     }
-  }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip5.Provider, null, /* @__PURE__ */ React47.createElement(Shell, {
+  }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip7.Provider, null, /* @__PURE__ */ React47.createElement(Shell, {
     runtime,
     origin: location.origin
   })))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React48, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState12 } from "react";
+import React48, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState14 } from "react";
 import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient7 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
-import { mx as mx23 } from "@dxos/react-ui-theme";
+import { mx as mx25 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/composites/Shell/memory-shell-runtime.ts
 import { Event } from "@dxos/async";
@@ -4130,7 +4170,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient7();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState12(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState14(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -4201,7 +4241,7 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
     shellRuntime
   ]);
   return /* @__PURE__ */ React48.createElement(React48.Fragment, null, shellRuntime && /* @__PURE__ */ React48.createElement("div", {
-    className: mx23(display === ShellDisplay2.NONE ? "hidden" : "")
+    className: mx25(display === ShellDisplay2.NONE ? "hidden" : "")
   }, /* @__PURE__ */ React48.createElement(Shell, {
     runtime: shellRuntime,
     origin: window.location.origin
@@ -4215,6 +4255,7 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
 export {
   Action,
   Actions,
+  AgentConfig,
   AuthCode,
   BifurcatedAction,
   Centered,
@@ -4228,9 +4269,11 @@ export {
   CopyButtonIconOnly,
   DeviceList,
   Emoji,
-  EmojiPicker,
+  EmojiPickerBlock,
+  EmojiPickerToolbarButton,
   Heading,
-  HuePicker,
+  HuePickerBlock,
+  HuePickerToolbarButton,
   IdentityDialog,
   IdentityListItem,
   IdentityPanel,