@dxos/shell 0.4.10-main.fd4f2a3 → 0.4.10-next.71cec10

package/src/steps/InvitationManager.tsx

@@ -6,7 +6,7 @@ import { Check, X } from '@phosphor-icons/react';
 import React, { useMemo } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { type InvitationStatus, Invitation } from '@dxos/react-client/invitations';
+import { type InvitationStatus } from '@dxos/react-client/invitations';
 import { useId, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
 import { hexToEmoji } from '@dxos/util';
@@ -43,13 +43,13 @@ export const InvitationManager = ({
   active,
   send,
   status,
-  type,
+  multiUse,
   authCode,
   id = '0',
 }: InvitationManagerProps) => {
   const { t } = useTranslation('os');
   const qrLabel = useId('invitation-manager__qr-code');
-  const statusValue = type === Invitation.Type.MULTIUSE ? 0 : invitationStatusValue.get(status!) ?? 0;
+  const statusValue = multiUse ? 0 : invitationStatusValue.get(status!) ?? 0;
   const showAuthCode = statusValue === 3;
   const emoji = hexToEmoji(id);
   const activeView = useMemo(() => {
@@ -69,7 +69,7 @@ export const InvitationManager = ({
         <Viewport.Views>
           <InvitationManagerView id='showing qr' emoji={emoji}>
             <p className='text-sm mlb-1 font-normal text-center'>
-              {t(type === Invitation.Type.MULTIUSE ? 'invite many qr label' : 'invite one qr label')}
+              {t(multiUse ? 'invite many qr label' : 'invite one qr label')}
             </p>
             <div role='none' className={mx(descriptionText, 'is-full max-is-[14rem] relative')}>
               <QR

package/src/stories/Invitations.e2e-stories.tsx

@@ -10,7 +10,7 @@ import React, { useMemo, useState } from 'react';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { type Space, type SpaceMember, SpaceProxy, useSpaces } from '@dxos/react-client/echo';
+import { type Space, type SpaceMember, useSpaces } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { ConnectionState, useNetworkStatus } from '@dxos/react-client/mesh';
@@ -36,7 +36,7 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
   const spaces = useSpaces();
 
   useMemo(() => {
-    if (panel instanceof SpaceProxy) {
+    if (panel && typeof panel !== 'string') {
       (window as any)[`peer${id}CreateSpaceInvitation`] = (options?: Partial<Invitation>) => {
         const invitation = panel.share(options);
 
@@ -50,7 +50,7 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
     }
   }, [panel]);
 
-  if (panel instanceof SpaceProxy) {
+  if (panel && typeof panel !== 'string') {
     return <SpacePanel space={panel} createInvitationUrl={createInvitationUrl} />;
   }
 
@@ -216,6 +216,9 @@ const Invitations = (args: { id: number; count: number }) => {
   );
 };
 
+// TODO(wittjosiah): This story fails to start in Safari/Webkit.
+//   The issue appears to be related to dynamic imports during client initialization.
+//   This does not seem to be a problem in other browsers nor in Safari in the app.
 export const Default = {
   render: (args: { id: number }) => (
     <ClipboardProvider>

package/src/testing/shell-manager.ts

@@ -65,15 +65,17 @@ export class ShellManager extends ScopedShellManager {
     };
 
     this.page.on('dialog', handleDialog);
-    await this.shell.getByTestId('devices-panel.sign-out').click();
+    await this.shell.getByTestId('device-list-item-current.options').click();
+    await this.shell.getByTestId('device-list-item-current.reset').click();
     await this.shell.getByTestId('reset-storage.reset-identity-input').fill('CONFIRM');
     await this.shell.getByTestId('reset-storage.reset-identity-confirm').click();
   }
 
   async joinNewIdentity(invitationCode: string) {
-    await this.shell.getByTestId('devices-panel.join-new-identity').click();
+    await this.shell.getByTestId('device-list-item-current.options').click();
+    await this.shell.getByTestId('device-list-item-current.join-existing').click();
     await this.shell.getByTestId('join-new-identity.reset-identity-input').fill('CONFIRM');
-    await this.shell.getByTestId('join-new-identity.reset-identity-input-confirm').click();
+    await this.shell.getByTestId('join-new-identity.reset-identity-confirm').click();
     await this.inputInvitation('device', invitationCode, this.shell);
   }
 
@@ -115,7 +117,8 @@ export class ShellManager extends ScopedShellManager {
 
   private async _onConsoleMessage(message: ConsoleMessage) {
     try {
-      const json = JSON.parse(message.text());
+      const text = message.text();
+      const json = JSON.parse(text.slice(text.indexOf('{')));
       if (json.invitationCode) {
         this._invitationCode.wake(json.invitationCode);
       }

package/src/translations/locales/en-US.ts

@@ -45,8 +45,6 @@ export const 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',
@@ -131,4 +129,17 @@ export const os = {
   'fuchsia label': 'Fuchsia',
   'pink label': 'Pink',
   '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’s always online your changes will sync even when all your physical devices are asleep.',
+  'create agent label': 'Start an agent',
+  'destroy agent label': 'Shut down agent',
+  'agent device label': 'Your agent',
 };

package/dist/types/src/components/IdentityList/DeviceList.d.ts

@@ -1,7 +0,0 @@
-import { type Device } from '@dxos/react-client/halo';
-export interface DeviceListProps {
-    devices: Device[];
-    onSelect?: (device: Device) => void;
-}
-export declare const DeviceList: ({ devices, onSelect }: DeviceListProps) => JSX.Element;
-//# sourceMappingURL=DeviceList.d.ts.map

package/dist/types/src/components/IdentityList/DeviceList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeviceList.d.ts","sourceRoot":"","sources":["../../../../../src/components/IdentityList/DeviceList.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,yBAAyB,CAAC;AAMlE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,UAAU,0BAA2B,eAAe,gBA8BhE,CAAC"}

package/dist/types/src/components/IdentityList/DeviceList.js

@@ -1,34 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeviceList = void 0;
-const react_1 = __importDefault(require("react"));
-const display_name_1 = require("@dxos/display-name");
-const halo_1 = require("@dxos/react-client/halo");
-const react_ui_1 = require("@dxos/react-ui");
-const react_ui_theme_1 = require("@dxos/react-ui-theme");
-const IdentityListItem_1 = require("./IdentityListItem");
-const DeviceList = ({ devices, onSelect }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    return devices.length > 0 ? (react_1.default.createElement(react_ui_1.List, { classNames: 'flex flex-col gap-2' }, devices.map((device) => {
-        var _a, _b;
-        // TODO(wittjosiah): Render this better. Consider communicating these as apps rather than devices.
-        const deviceType = ((_a = device.profile) === null || _a === void 0 ? void 0 : _a.type) || halo_1.DeviceType.UNKNOWN;
-        const displayName = ((_b = device.profile) === null || _b === void 0 ? void 0 : _b.label)
-            ? `${device.profile.label} (${halo_1.DeviceType[deviceType]})`
-            : (0, display_name_1.generateName)(device.deviceKey.toHex());
-        const identity = {
-            identityKey: device.deviceKey,
-            profile: { displayName },
-        };
-        return (react_1.default.createElement(IdentityListItem_1.IdentityListItem, { key: device.deviceKey.toHex(), identity: identity, presence: device.presence, onClick: onSelect && (() => onSelect(device)) }));
-    }))) : (react_1.default.createElement("div", { role: 'none', className: 'grow flex items-center p-2' },
-        react_1.default.createElement("p", { className: (0, react_ui_theme_1.mx)(react_ui_theme_1.descriptionText, 'text-center is-full') }, t('empty device list message'))));
-};
-exports.DeviceList = DeviceList;
-//# sourceMappingURL=DeviceList.js.map

package/dist/types/src/components/IdentityList/DeviceList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeviceList.js","sourceRoot":"","sources":["../../../../../src/components/IdentityList/DeviceList.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,kDAA0B;AAE1B,qDAAkD;AAClD,kDAAkE;AAClE,6CAAsD;AACtD,yDAA2D;AAE3D,yDAAsD;AAO/C,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAmB,EAAE,EAAE;IACnE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,yBAAc,EAAC,IAAI,CAAC,CAAC;IACnC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,8BAAC,eAAI,IAAC,UAAU,EAAC,qBAAqB,IACnC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;QACtB,kGAAkG;QAClG,MAAM,UAAU,GAAG,CAAA,MAAA,MAAM,CAAC,OAAO,0CAAE,IAAI,KAAI,iBAAU,CAAC,OAAO,CAAC;QAC9D,MAAM,WAAW,GAAG,CAAA,MAAA,MAAM,CAAC,OAAO,0CAAE,KAAK;YACvC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,iBAAU,CAAC,UAAU,CAAC,GAAG;YACvD,CAAC,CAAC,IAAA,2BAAY,EAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;QAE3C,MAAM,QAAQ,GAAG;YACf,WAAW,EAAE,MAAM,CAAC,SAAS;YAC7B,OAAO,EAAE,EAAE,WAAW,EAAE;SACzB,CAAC;QACF,OAAO,CACL,8BAAC,mCAAgB,IACf,GAAG,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,EAC7B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC7C,CACH,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC,CAAC,CAAC,CACF,uCAAK,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,4BAA4B;QACrD,qCAAG,SAAS,EAAE,IAAA,mBAAE,EAAC,gCAAe,EAAE,qBAAqB,CAAC,IAAG,CAAC,CAAC,2BAA2B,CAAC,CAAK,CAC1F,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,UAAU,cA8BrB"}

package/dist/types/src/panels/IdentityPanel/steps/AgentForm.d.ts

@@ -1,3 +0,0 @@
-import { type AgentFormProps, type IdentityPanelStepProps } from '../IdentityPanelProps';
-export declare const AgentForm: (props: IdentityPanelStepProps & AgentFormProps) => JSX.Element;
-//# sourceMappingURL=AgentForm.d.ts.map

package/dist/types/src/panels/IdentityPanel/steps/AgentForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentForm.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/IdentityPanel/steps/AgentForm.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEzF,eAAO,MAAM,SAAS,UAAW,sBAAsB,GAAG,cAAc,gBAiDvE,CAAC"}

package/dist/types/src/panels/IdentityPanel/steps/AgentForm.js

@@ -1,26 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AgentForm = void 0;
-const react_1 = __importDefault(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const components_1 = require("../../../components");
-const AgentForm = (props) => {
-    const { active, onAgentCreate, onAgentDestroy, send, validationMessage, agentStatus, agentActive, agentProviderDisabled, } = props;
-    const disabled = !active;
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { role: 'none', className: 'grow flex flex-col justify-center' },
-            react_1.default.createElement(components_1.Input, { validationMessage, label: react_1.default.createElement(components_1.StepHeading, null, "Agent Status"), disabled: disabled, "data-testid": 'agent-status', value: agentStatus })),
-        react_1.default.createElement(components_1.Actions, null,
-            react_1.default.createElement(components_1.Action, { disabled: agentActive || agentProviderDisabled, onClick: () => onAgentCreate === null || onAgentCreate === void 0 ? void 0 : onAgentCreate(), "data-testid": 'create-agent' }, "Create Agent"),
-            react_1.default.createElement(components_1.Action, { disabled: !agentActive || agentProviderDisabled, onClick: () => onAgentDestroy === null || onAgentDestroy === void 0 ? void 0 : onAgentDestroy(), "data-testid": 'destroy-agent' }, "Destroy Agent"),
-            react_1.default.createElement(components_1.Action, { disabled: disabled, onClick: () => send === null || send === void 0 ? void 0 : send({ type: 'unchooseAction' }), "data-testid": 'update-profile-form-back' }, t('back label')))));
-};
-exports.AgentForm = AgentForm;
-//# sourceMappingURL=AgentForm.js.map

package/dist/types/src/panels/IdentityPanel/steps/AgentForm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentForm.js","sourceRoot":"","sources":["../../../../../../src/panels/IdentityPanel/steps/AgentForm.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,kDAA0B;AAE1B,6CAAgD;AAEhD,oDAA0E;AAGnE,MAAM,SAAS,GAAG,CAAC,KAA8C,EAAE,EAAE;IAC1E,MAAM,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACd,IAAI,EACJ,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,qBAAqB,GACtB,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;IACzB,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,yBAAc,EAAC,IAAI,CAAC,CAAC;IACnC,OAAO,CACL;QACE,uCAAK,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,mCAAmC;YAC5D,8BAAC,kBAAK,IACE,iBAAiB,EACvB,KAAK,EAAE,8BAAC,wBAAW,uBAA2B,EAC9C,QAAQ,EAAE,QAAQ,iBACN,cAAc,EAC1B,KAAK,EAAE,WAAW,GAClB,CACE;QACN,8BAAC,oBAAO;YACN,8BAAC,mBAAM,IACL,QAAQ,EAAE,WAAW,IAAI,qBAAqB,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,iBACnB,cAAc,mBAGpB;YACT,8BAAC,mBAAM,IACL,QAAQ,EAAE,CAAC,WAAW,IAAI,qBAAqB,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,iBACpB,eAAe,oBAGrB;YACT,8BAAC,mBAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,iBACpC,0BAA0B,IAEtC,CAAC,CAAC,YAAY,CAAC,CACT,CACD,CACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,SAAS,aAiDpB"}

package/dist/types/src/panels/IdentityPanel/steps/DeviceManager.d.ts

@@ -1,10 +0,0 @@
-import { type Event, type SingleOrArray } from 'xstate';
-import { type Device } from '@dxos/react-client/halo';
-import type { IdentityPanelStepProps } from '../IdentityPanelProps';
-import type { IdentityEvent } from '../identityMachine';
-export interface DeviceManagerProps extends Omit<IdentityPanelStepProps, 'send'> {
-    send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
-    devices: Device[];
-}
-export declare const DeviceManager: ({ devices, active, send }: DeviceManagerProps) => JSX.Element;
-//# sourceMappingURL=DeviceManager.d.ts.map

package/dist/types/src/panels/IdentityPanel/steps/DeviceManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeviceManager.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/IdentityPanel/steps/DeviceManager.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAItD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,8BAA+B,kBAAkB,gBAqB1E,CAAC"}

package/dist/types/src/panels/IdentityPanel/steps/DeviceManager.js

@@ -1,23 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeviceManager = void 0;
-const react_1 = __importDefault(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const components_1 = require("../../../components");
-const DeviceManager = ({ devices, active, send }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const disabled = !active;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { role: 'none', className: 'grow' },
-            react_1.default.createElement(components_1.DeviceList, { devices: devices })),
-        react_1.default.createElement(components_1.Actions, null,
-            react_1.default.createElement(components_1.Action, { variant: 'ghost', disabled: disabled, onClick: () => send === null || send === void 0 ? void 0 : send({ type: 'unchooseAction' }), "data-testid": 'manage-devices-back' }, t('back label')))));
-};
-exports.DeviceManager = DeviceManager;
-//# sourceMappingURL=DeviceManager.js.map

package/dist/types/src/panels/IdentityPanel/steps/DeviceManager.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeviceManager.js","sourceRoot":"","sources":["../../../../../../src/panels/IdentityPanel/steps/DeviceManager.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,kDAA0B;AAI1B,6CAAgD;AAEhD,oDAAkE;AAS3D,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE;IAC7E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,yBAAc,EAAC,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;IAEzB,OAAO,CACL;QACE,uCAAK,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM;YAC/B,8BAAC,uBAAU,IAAC,OAAO,EAAE,OAAO,GAAI,CAC5B;QACN,8BAAC,oBAAO;YACN,8BAAC,mBAAM,IACL,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,iBACpC,qBAAqB,IAEjC,CAAC,CAAC,YAAY,CAAC,CACT,CACD,CACT,CACJ,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,aAAa,iBAqBxB"}

package/src/components/IdentityList/DeviceList.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { generateName } from '@dxos/display-name';
-import { type Device, DeviceType } from '@dxos/react-client/halo';
-import { List, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-
-import { IdentityListItem } from './IdentityListItem';
-
-export interface DeviceListProps {
-  devices: Device[];
-  onSelect?: (device: Device) => void;
-}
-
-export const DeviceList = ({ devices, onSelect }: DeviceListProps) => {
-  const { t } = useTranslation('os');
-  return devices.length > 0 ? (
-    <List classNames='flex flex-col gap-2'>
-      {devices.map((device) => {
-        // TODO(wittjosiah): Render this better. Consider communicating these as apps rather than devices.
-        const deviceType = device.profile?.type || DeviceType.UNKNOWN;
-        const displayName = device.profile?.label
-          ? `${device.profile.label} (${DeviceType[deviceType]})`
-          : generateName(device.deviceKey.toHex());
-
-        const identity = {
-          identityKey: device.deviceKey,
-          profile: { displayName },
-        };
-        return (
-          <IdentityListItem
-            key={device.deviceKey.toHex()}
-            identity={identity}
-            presence={device.presence}
-            onClick={onSelect && (() => onSelect(device))}
-          />
-        );
-      })}
-    </List>
-  ) : (
-    <div role='none' className='grow flex items-center p-2'>
-      <p className={mx(descriptionText, 'text-center is-full')}>{t('empty device list message')}</p>
-    </div>
-  );
-};

package/src/panels/IdentityPanel/steps/AgentForm.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { useTranslation } from '@dxos/react-ui';
-
-import { Action, Actions, StepHeading, Input } from '../../../components';
-import { type AgentFormProps, type IdentityPanelStepProps } from '../IdentityPanelProps';
-
-export const AgentForm = (props: IdentityPanelStepProps & AgentFormProps) => {
-  const {
-    active,
-    onAgentCreate,
-    onAgentDestroy,
-    send,
-    validationMessage,
-    agentStatus,
-    agentActive,
-    agentProviderDisabled,
-  } = props;
-  const disabled = !active;
-  const { t } = useTranslation('os');
-  return (
-    <>
-      <div role='none' className='grow flex flex-col justify-center'>
-        <Input
-          {...{ validationMessage }}
-          label={<StepHeading>Agent Status</StepHeading>}
-          disabled={disabled}
-          data-testid='agent-status'
-          value={agentStatus}
-        />
-      </div>
-      <Actions>
-        <Action
-          disabled={agentActive || agentProviderDisabled}
-          onClick={() => onAgentCreate?.()}
-          data-testid={'create-agent'}
-        >
-          Create Agent
-        </Action>
-        <Action
-          disabled={!agentActive || agentProviderDisabled}
-          onClick={() => onAgentDestroy?.()}
-          data-testid={'destroy-agent'}
-        >
-          Destroy Agent
-        </Action>
-        <Action
-          disabled={disabled}
-          onClick={() => send?.({ type: 'unchooseAction' })}
-          data-testid={'update-profile-form-back'}
-        >
-          {t('back label')}
-        </Action>
-      </Actions>
-    </>
-  );
-};

package/src/panels/IdentityPanel/steps/DeviceManager.tsx

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-import { type Event, type SingleOrArray } from 'xstate';
-
-import { type Device } from '@dxos/react-client/halo';
-import { useTranslation } from '@dxos/react-ui';
-
-import { Action, Actions, DeviceList } from '../../../components';
-import type { IdentityPanelStepProps } from '../IdentityPanelProps';
-import type { IdentityEvent } from '../identityMachine';
-
-export interface DeviceManagerProps extends Omit<IdentityPanelStepProps, 'send'> {
-  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
-  devices: Device[];
-}
-
-export const DeviceManager = ({ devices, active, send }: DeviceManagerProps) => {
-  const { t } = useTranslation('os');
-  const disabled = !active;
-
-  return (
-    <>
-      <div role='none' className='grow'>
-        <DeviceList devices={devices} />
-      </div>
-      <Actions>
-        <Action
-          variant='ghost'
-          disabled={disabled}
-          onClick={() => send?.({ type: 'unchooseAction' })}
-          data-testid={'manage-devices-back'}
-        >
-          {t('back label')}
-        </Action>
-      </Actions>
-    </>
-  );
-};