@dxos/shell 0.6.13 → 0.6.14-main.69511f5

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -2,17 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
+import { FirstAidKit, Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
+import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
-import { Avatar, DensityProvider, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { Avatar, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
@@ -51,6 +52,7 @@ const IdentityHeading = ({
   connectionState,
   onChangeConnectionState,
 }: IdentityPanelHeadingProps) => {
+  const client = useClient();
   const fallbackValue = keyToFallback(identity.identityKey);
   const { t } = useTranslation('os');
   const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
@@ -58,7 +60,7 @@ const IdentityHeading = ({
   const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity.identityKey.toHex();
-  const copied = textValue === identityHex;
+  const publicKeyCopied = textValue === identityHex;
 
   const setEmoji = (nextEmoji: string) => {
     setEmojiDirectly(nextEmoji);
@@ -70,9 +72,15 @@ const IdentityHeading = ({
     void onUpdateProfile?.({ ...identity.profile, data: { ...identity.profile?.data, hue: nextHue } });
   };
 
-  const isConnected = connectionState === ConnectionState.ONLINE;
+  const handleRecoveryCode = async () => {
+    invariant(client.services.services.IdentityService, 'IdentityService not available');
+    // TODO(wittjosiah): This needs a proper api.
+    const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+    void setTextValue(seedphrase);
+  };
 
-  const debug = true;
+  const isConnected = connectionState === ConnectionState.ONLINE;
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production';
 
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
@@ -103,47 +111,61 @@ const IdentityHeading = ({
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
           <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
-          {debug && (
-            <>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Toolbar.Button
-                    classNames='bs-[--rail-action]'
-                    data-testid='update-profile-form-copy-key'
-                    onClick={() => setTextValue(identityHex)}
-                  >
-                    <span className='sr-only'>{t(copied ? 'copy success label' : 'copy self public key label')}</span>
-                    <Key className={getSize(5)} />
-                  </Toolbar.Button>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content side='bottom' classNames='z-50'>
-                    {t(copied ? 'copy success label' : 'copy self public key label')}
-                    <Tooltip.Arrow />
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Toolbar.Button
-                      classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
-                      onClick={() =>
-                        onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
-                      }
-                    >
-                      <span className='sr-only'>{t(isConnected ? 'disconnect label' : 'connect label')}</span>
-                      {isConnected ? <PlugsConnected className={getSize(5)} /> : <Plugs className={getSize(5)} />}
-                    </Toolbar.Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Portal>
-                    <Tooltip.Content side='bottom' classNames='z-50'>
-                      {t(isConnected ? 'disconnect label' : 'connect label')}
-                      <Tooltip.Arrow />
-                    </Tooltip.Content>
-                  </Tooltip.Portal>
-                </Tooltip.Root>
-              </Tooltip.Root>
-            </>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames='bs-[--rail-action]'
+                data-testid='update-profile-form-copy-key'
+                onClick={() => setTextValue(identityHex)}
+              >
+                <span className='sr-only'>
+                  {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
+                </span>
+                <Key className={getSize(5)} />
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          {/* TODO(wittjosiah): Remove. This should have its own flow. */}
+          {!isProduction && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toolbar.Button classNames='bs-[--rail-action]' onClick={handleRecoveryCode}>
+                  <FirstAidKit className={getSize(5)} />
+                </Toolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom' classNames='z-50'>
+                  {t('create recovery code label')}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
           )}
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
+                onClick={() =>
+                  onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
+                }
+              >
+                <span className='sr-only'>{t(isConnected ? 'disconnect label' : 'connect label')}</span>
+                {isConnected ? <PlugsConnected className={getSize(5)} /> : <Plugs className={getSize(5)} />}
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(isConnected ? 'disconnect label' : 'connect label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
         </Toolbar.Root>
       </Avatar.Root>
     </Heading>
@@ -157,6 +179,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     activeView,
     onUpdateProfile,
     onResetStorage,
+    onRecover,
     onJoinNewIdentity,
     IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser,
     InvitationManager: InvitationManagerComponent = InvitationManager,
@@ -178,7 +201,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
   const onCancelReset = () => rest.send?.('unchooseAction');
 
   return (
-    <DensityProvider density='fine'>
+    <>
       <IdentityHeading
         {...{ identity, titleId, title, onDone, onUpdateProfile, connectionState, onChangeConnectionState }}
       />
@@ -207,6 +230,15 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
               onCancel={onCancelReset}
             />
           </Viewport.View>
+          <Viewport.View classNames={viewStyles} id='confirm recover'>
+            <ConfirmReset
+              active={activeView === 'confirm recover'}
+              {...rest}
+              mode='recover'
+              onConfirm={onRecover}
+              onCancel={onCancelReset}
+            />
+          </Viewport.View>
           <Viewport.View classNames={viewStyles} id='confirm reset storage'>
             <ConfirmReset
               active={activeView === 'confirm reset storage'}
@@ -218,7 +250,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
           </Viewport.View>
         </Viewport.Views>
       </Viewport.Root>
-    </DensityProvider>
+    </>
   );
 };
 
@@ -270,6 +302,8 @@ export const IdentityPanel = ({
         return 'device invitation manager';
       case identityState.matches('confirmingResetStorage'):
         return 'confirm reset storage';
+      case identityState.matches('confirmingRecover'):
+        return 'confirm recover';
       case identityState.matches('confirmingJoinNewIdentity'):
         return 'confirm join new identity';
       default:

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { cloneElement } from 'react';
+import type { FC, cloneElement } from 'react';
 import type { Event, SingleOrArray } from 'xstate';
 
 import type { Device, Identity } from '@dxos/react-client/halo';
@@ -10,7 +10,7 @@ import type { InvitationStatus } from '@dxos/react-client/invitations';
 import type { ConnectionState } from '@dxos/react-client/mesh';
 
 import type { IdentityEvent } from './identityMachine';
-import { type AgentFormProps } from '../../components';
+import type { AgentFormProps } from '../../components';
 import type { InvitationManagerProps } from '../../steps';
 
 export type IdentityPanelInitialDisposition = 'default' | 'manage-device-invitation';
@@ -21,6 +21,7 @@ export type IdentityPanelImplProps = {
     | 'device invitation manager'
     | 'identity action chooser'
     | 'confirm join new identity'
+    | 'confirm recover'
     | 'confirm reset storage';
   initialDisposition?: IdentityPanelInitialDisposition;
   identity: Identity;
@@ -29,14 +30,15 @@ export type IdentityPanelImplProps = {
   onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
   onResetStorage?: () => Promise<void>;
+  onRecover?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
   createInvitationUrl: (invitationCode: string) => string;
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
   onDone?: () => void;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   invitationUrl?: string;
-  IdentityActionChooser?: React.FC<IdentityPanelStepProps>;
-  InvitationManager?: React.FC<InvitationManagerProps>;
+  IdentityActionChooser?: FC<IdentityPanelStepProps>;
+  InvitationManager?: FC<InvitationManagerProps>;
 } & Partial<InvitationStatus> &
   Partial<AgentFormProps>;
 

package/src/panels/IdentityPanel/identityMachine.ts

@@ -21,7 +21,7 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseResetStorage' | 'chooseJoinNewIdentity' | 'unchooseAction';
+  type: 'chooseResetStorage' | 'chooseRecoverIdentity' | 'chooseJoinNewIdentity' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -67,6 +67,7 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       choosingAction: {},
       managingDeviceInvitation: {},
       confirmingResetStorage: {},
+      confirmingRecover: {},
       confirmingJoinNewIdentity: {},
     },
     on: {
@@ -74,6 +75,7 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       deselectInvitation: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
       selectInvitation: { target: '.managingDeviceInvitation', actions: ['setInvitation', 'log'] },
       chooseJoinNewIdentity: { target: '.confirmingJoinNewIdentity', actions: 'log' },
+      chooseRecoverIdentity: { target: '.confirmingRecover', actions: 'log' },
       chooseResetStorage: { target: '.confirmingResetStorage', actions: 'log' },
     },
   },

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

@@ -9,7 +9,7 @@ import { useClient } from '@dxos/react-client';
 import { useHaloInvitations, DeviceType } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
-import { AgentConfig, type AgentFormProps, DeviceList } from '../../../components';
+import { AgentConfig, type AgentFormProps, DeviceList, type DeviceListProps } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 
 export type IdentityActionChooserProps = IdentityPanelStepProps;
@@ -33,20 +33,30 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
     }
     send?.({ type: 'selectInvitation', invitation });
   };
-  return <IdentityActionChooserImpl {...props} onCreateInvitationClick={createInvitation} />;
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production';
+  return (
+    <IdentityActionChooserImpl
+      {...props}
+      onClickAdd={createInvitation}
+      onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
+      onClickRecover={isProduction ? undefined : () => send?.({ type: 'chooseRecoverIdentity' })}
+      onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+    />
+  );
 };
 
 export type IdentityActionChooserImplProps = IdentityActionChooserProps &
-  Partial<AgentFormProps> & {
-    onCreateInvitationClick?: () => void;
-  };
+  Partial<AgentFormProps> &
+  Pick<DeviceListProps, 'onClickAdd' | 'onClickJoinExisting' | 'onClickRecover' | 'onClickReset'>;
 
 export const IdentityActionChooserImpl = ({
-  send,
-  onCreateInvitationClick,
   devices,
   connectionState,
   agentHostingEnabled,
+  onClickAdd,
+  onClickJoinExisting,
+  onClickRecover,
+  onClickReset,
   ...agentProps
 }: IdentityActionChooserImplProps) => {
   const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
@@ -55,9 +65,10 @@ export const IdentityActionChooserImpl = ({
       <DeviceList
         devices={devices}
         connectionState={connectionState}
-        onClickAdd={onCreateInvitationClick}
-        onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
-        onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+        onClickAdd={onClickAdd}
+        onClickJoinExisting={onClickJoinExisting}
+        onClickRecover={onClickRecover}
+        onClickReset={onClickReset}
         onAgentDestroy={agentProps.onAgentDestroy!}
       />
       {!managedDeviceAvailable && agentHostingEnabled && <AgentConfig {...(agentProps as AgentFormProps)} />}

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -2,127 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useCallback, useEffect, useState } from 'react';
-
 import { type CancellableInvitation } from '@dxos/client-protocol';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { useClient, useAgentHostingClient } from '@dxos/react-client';
+import { useClient } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
-import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
+import { useEdgeAgentHandlers } from './useEdgeAgentsHandlers';
+import { useKubeAgentHandlers } from './useKubeAgentHandlers';
 import { type AgentFormProps } from '../../components';
 
-export const useAgentHandlers = ({
-  invitations,
-  identity,
-}: {
+export const useAgentHandlers = (params: {
   invitations: CancellableInvitation[];
   identity: Identity | null;
 }): AgentFormProps => {
-  const [validationMessage, setValidationMessage] = useState('');
-  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
-  const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient();
-
-  const updateAgentStatus = async () => {
-    // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
-    if (agentHostingProviderClient) {
-      setAgentStatus('getting');
-      try {
-        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'never');
-        if (agentId) {
-          setAgentStatus('created');
-        } else {
-          setAgentStatus('creatable');
-        }
-      } catch (err: any) {
-        setAgentStatus('error');
-        setValidationMessage(`Couldn’t check agent status: ${err.message}`);
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  const createAgent = async (invitationCode: string) => {
-    invariant(identity, 'Identity not found');
-    if (agentHostingProviderClient) {
-      setAgentStatus('creating');
-      setValidationMessage('');
-      try {
-        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
-        if (agentId) {
-          setAgentStatus('created');
-        } else {
-          setAgentStatus('creatable');
-          setValidationMessage('Error creating agent.');
-        }
-      } catch (err: any) {
-        setValidationMessage(`Error creating agent: ${err.message}`);
-        return updateAgentStatus();
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  const destroyAgent = async () => {
-    invariant(identity, 'Identity not found');
-    if (agentHostingProviderClient) {
-      setAgentStatus('destroying');
-      setValidationMessage('');
-      try {
-        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
-        setAgentStatus('creatable');
-      } catch (err: any) {
-        setValidationMessage(`Error destroying agent: ${err.message}`);
-        return updateAgentStatus();
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  useEffect(() => {
-    void updateAgentStatus();
-  }, []);
-
-  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
-    const invitationCode = InvitationEncoder.encode(invitation);
-    if (invitation.state === Invitation.State.CONNECTING) {
-      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
-      return createAgent(invitationCode);
-    }
-  }, []);
-
-  const onAgentCreate = async () => {
-    invitations.forEach((invitation) => invitation.cancel());
-
-    // TODO(nf): do this work in the hosting provider client?
-    const invitation = client.halo.share({
-      type: Invitation.Type.INTERACTIVE,
-      authMethod: Invitation.AuthMethod.NONE,
-      multiUse: true,
-    });
-
-    invitation.subscribe(handleAgentCreate);
-  };
-
-  const onAgentRefresh = async () => {
-    setValidationMessage('');
-    await updateAgentStatus();
-  };
-
-  return {
-    onAgentCreate,
-    onAgentDestroy: destroyAgent,
-    onAgentRefresh,
-    validationMessage,
-    agentStatus,
-    agentHostingEnabled: !!agentHostingProviderClient,
-  };
+  if (client.config.values?.runtime?.client?.edgeFeatures?.agents) {
+    return useEdgeAgentHandlers(params);
+  } else {
+    return useKubeAgentHandlers(params);
+  }
 };

package/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { QueryAgentStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
+import { useClient } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+
+import { type AgentFormProps } from '../../components';
+
+export const useEdgeAgentHandlers = ({
+  identity,
+}: {
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}): AgentFormProps => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [lastReceivedStatus, setLastReceivedStatus] = useState<QueryAgentStatusResponse.AgentStatus>(
+    QueryAgentStatusResponse.AgentStatus.UNKNOWN,
+  );
+  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
+  const client = useClient();
+  const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+
+  const handleStatus = (status: QueryAgentStatusResponse.AgentStatus) => {
+    switch (status) {
+      case QueryAgentStatusResponse.AgentStatus.ACTIVE:
+      case QueryAgentStatusResponse.AgentStatus.INACTIVE:
+        setAgentStatus('created');
+        break;
+      case QueryAgentStatusResponse.AgentStatus.NOT_FOUND:
+        setAgentStatus('creatable');
+        break;
+      case QueryAgentStatusResponse.AgentStatus.UNKNOWN:
+        setAgentStatus('getting');
+        break;
+    }
+  };
+
+  useEffect(() => {
+    const stream = client.services.services.EdgeAgentService?.queryAgentStatus();
+    stream?.subscribe(({ status }) => {
+      setLastReceivedStatus(status);
+      handleStatus(status);
+    });
+    return () => {
+      void stream?.close().catch(() => {});
+    };
+  }, []);
+
+  const onAgentCreate = async () => {
+    invariant(identity, 'Identity not found');
+    const service = client.services.services.EdgeAgentService;
+    if (!service) {
+      setAgentStatus('error');
+      setValidationMessage('Agent service not initialized.');
+      return;
+    }
+    if (!agentHostingEnabled) {
+      setAgentStatus('error');
+      setValidationMessage('Edge agents are disabled in config.');
+      return;
+    }
+    setAgentStatus('creating');
+    setValidationMessage('');
+    try {
+      await service.createAgent();
+      setAgentStatus('created');
+    } catch (err: any) {
+      setAgentStatus('error');
+      setValidationMessage(`Error creating an agent: ${err.message}`);
+    }
+  };
+
+  const onAgentDestroy = async () => {
+    setValidationMessage('Agents are non-destructible.');
+  };
+
+  const onAgentRefresh = async () => {
+    setValidationMessage('');
+    handleStatus(lastReceivedStatus);
+  };
+
+  return {
+    onAgentCreate,
+    onAgentDestroy,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled,
+  };
+};